commit 3a338b33dddb16d1fb55d29974d70384893c732a
Author: saridsa2 <s.satya.suman@globaluniversityfoundation.com>
Date:   Mon Mar 16 14:23:23 2026 +0530

    chore: initial Untitled UI Vite scaffold with FontAwesome Pro

diff --git a/.github/last-sync-commit b/.github/last-sync-commit
new file mode 100644
index 0000000..a7b3ea1
--- /dev/null
+++ b/.github/last-sync-commit
@@ -0,0 +1 @@
+3cdabc0b462049086ebc0f954fc661dc4ca2a594
diff --git a/.github/workflows/README.md b/.github/workflows/README.md
new file mode 100644
index 0000000..a93df5d
--- /dev/null
+++ b/.github/workflows/README.md
@@ -0,0 +1,73 @@
+# Component sync workflow
+
+This workflow synchronizes components from the main [untitleduico/react](https://github.com/untitleduico/react) repository with intelligent commit tracking.
+
+## How to use
+
+1. Go to the "Actions" tab in your GitHub repository
+2. Select "Sync Components from Main Repository"
+3. Click "Run workflow"
+4. Configure options:
+   - **Directories**: Which directories to sync (default: `components,hooks,utils,styles`)
+   - **Sync mode**: Choose between `all` or `existing-only`
+5. Click "Run workflow" to start the sync
+
+## What it does
+
+1. **Fetches** the latest commit information from the main repository
+2. **Tracks** previously synced commits to show what's new
+3. **Creates** a branch named `sync/YYYY-MM-DD-[commit-hash]`
+4. **Processes** files by removing `"use client";` directives
+5. **Generates** a PR with commit history and detailed diff summaries
+6. **Stores** the sync state for future runs
+
+## Sync modes
+
+### `all` (default)
+- Syncs all files from the main repository
+- Adds new files and updates existing ones
+- Creates complete mirror of main repo structure
+
+### `existing-only`
+- Only updates files that already exist in your repository
+- Skips new files from the main repository
+- Useful for maintaining a subset of components
+
+## Smart commit tracking
+
+- **First run**: Shows "Initial sync" with latest commit details
+- **Subsequent runs**: Shows commit range since last sync
+- **Up-to-date**: Indicates when no new commits are available
+- **Commit history**: Collapsible list of all commits since last sync
+
+## Branch naming
+
+Branches follow the pattern: `sync/YYYY-MM-DD-[short-commit-hash]`
+- Example: `sync/2024-03-15-a1b2c3d`
+
+## PR format
+
+The generated PR includes:
+
+### Title
+- **New commits**: `🔄 Sync components (X commits) → a1b2c3d`
+- **First sync**: `🎉 Initial sync from main repository → a1b2c3d`
+
+### Content
+- **Commits since last sync**: Collapsible commit history with links
+- **Changed files**: Each file with collapsible diff view
+- **Sync details**: Source repo, latest commit, date, directories synced
+- **Automated processing**: Notes about `"use client"` removal
+
+## State management
+
+The workflow stores sync state in `.github/last-sync-commit` to track:
+- Last successfully synced commit hash
+- Enables incremental sync reporting
+- Shows commit ranges in PR descriptions
+
+## Requirements
+
+- Repository must have `contents: write` and `pull-requests: write` permissions
+- Uses `GITHUB_TOKEN` (automatically available in GitHub Actions)
+- GitHub CLI (`gh`) for PR creation
\ No newline at end of file
diff --git a/.github/workflows/sync-components.yml b/.github/workflows/sync-components.yml
new file mode 100644
index 0000000..c5a828c
--- /dev/null
+++ b/.github/workflows/sync-components.yml
@@ -0,0 +1,380 @@
+name: Sync Components from Main Repository
+
+on:
+    workflow_dispatch:
+        inputs:
+            sync_directories:
+                description: "Directories to sync (comma-separated)"
+                required: false
+                default: "components,hooks,utils,styles"
+                type: string
+            sync_mode:
+                description: "Sync mode"
+                required: false
+                default: "all"
+                type: choice
+                options:
+                    - all
+                    - existing-only
+
+jobs:
+    sync-components:
+        runs-on: ubuntu-latest
+        permissions:
+            contents: write
+            pull-requests: write
+
+        steps:
+            - name: Checkout repository
+              uses: actions/checkout@v4
+              with:
+                  token: ${{ secrets.GITHUB_TOKEN }}
+                  fetch-depth: 0
+
+            - name: Setup Node.js
+              uses: actions/setup-node@v4
+              with:
+                  node-version: "18"
+
+            - name: Configure git
+              run: |
+                  git config --global user.name "github-actions[bot]"
+                  git config --global user.email "github-actions[bot]@users.noreply.github.com"
+
+            - name: Fetch main repository and get commit info
+              id: fetch-main-repo
+              run: |
+                  echo "Fetching main repository..."
+
+                  # Create a temporary directory for cloning
+                  mkdir -p /tmp/main-repo
+                  cd /tmp/main-repo
+
+                  # Clone the main repository
+                  git clone https://github.com/untitleduico/react.git .
+
+                  # Get latest commit info
+                  LATEST_COMMIT_HASH=$(git rev-parse HEAD)
+                  LATEST_COMMIT_SHORT=$(git rev-parse --short HEAD)
+                  LATEST_COMMIT_MESSAGE=$(git log -1 --pretty=format:"%s")
+                  LATEST_COMMIT_AUTHOR=$(git log -1 --pretty=format:"%an")
+                  LATEST_COMMIT_DATE=$(git log -1 --pretty=format:"%ci")
+
+                  echo "LATEST_COMMIT_HASH=$LATEST_COMMIT_HASH" >> $GITHUB_ENV
+                  echo "LATEST_COMMIT_SHORT=$LATEST_COMMIT_SHORT" >> $GITHUB_ENV
+                  echo "LATEST_COMMIT_MESSAGE=$LATEST_COMMIT_MESSAGE" >> $GITHUB_ENV
+                  echo "LATEST_COMMIT_AUTHOR=$LATEST_COMMIT_AUTHOR" >> $GITHUB_ENV
+                  echo "LATEST_COMMIT_DATE=$LATEST_COMMIT_DATE" >> $GITHUB_ENV
+
+                  echo "Latest commit: $LATEST_COMMIT_SHORT - $LATEST_COMMIT_MESSAGE"
+
+                  # Get the directory structure (main repo has directories at root level, not in src/)
+                  # Exclude demo and story files
+                  find components hooks utils styles -type f ! -name "*.demo.tsx" ! -name "*.story.tsx" ! -name "*.stories.tsx" 2>/dev/null | sort > /tmp/main-repo-files.txt || echo "Some directories may not exist"
+
+                  echo "Files to sync:"
+                  cat /tmp/main-repo-files.txt
+
+            - name: Get last synced commit
+              id: get-last-sync
+              run: |
+                  cd $GITHUB_WORKSPACE
+
+                  # Check if we have a previous sync record
+                  if [ -f ".github/last-sync-commit" ] && [ -s ".github/last-sync-commit" ]; then
+                    # Read the first line and trim whitespace, ignore comments
+                    LAST_SYNC_COMMIT=$(head -n 1 .github/last-sync-commit | xargs | grep -v '^#' || echo "")
+                    
+                    if [ -n "$LAST_SYNC_COMMIT" ] && [ "$LAST_SYNC_COMMIT" != "" ]; then
+                      echo "LAST_SYNC_COMMIT=$LAST_SYNC_COMMIT" >> $GITHUB_ENV
+                      echo "Found previous sync commit: $LAST_SYNC_COMMIT"
+                    else
+                      echo "LAST_SYNC_COMMIT=" >> $GITHUB_ENV
+                      echo "Sync file exists but no valid commit hash found"
+                    fi
+                  else
+                    echo "LAST_SYNC_COMMIT=" >> $GITHUB_ENV
+                    echo "No previous sync record found"
+                  fi
+
+            - name: Get commits since last sync
+              id: get-commits-since-sync
+              run: |
+                  cd /tmp/main-repo
+
+                  if [ -n "$LAST_SYNC_COMMIT" ]; then
+                    echo "Getting commits since $LAST_SYNC_COMMIT..."
+                    
+                    # Get commit log since last sync
+                    git log --oneline "$LAST_SYNC_COMMIT".."$LATEST_COMMIT_HASH" > /tmp/commits-since-sync.txt || echo "Could not get commit range"
+                    
+                    # Count commits
+                    COMMIT_COUNT=$(wc -l < /tmp/commits-since-sync.txt)
+                    echo "COMMIT_COUNT=$COMMIT_COUNT" >> $GITHUB_ENV
+                    
+                    echo "Commits since last sync ($COMMIT_COUNT):"
+                    cat /tmp/commits-since-sync.txt
+                  else
+                    echo "COMMIT_COUNT=unknown" >> $GITHUB_ENV
+                    echo "No previous sync - this is the first sync"
+                    echo "First sync - syncing from latest commit" > /tmp/commits-since-sync.txt
+                  fi
+
+            - name: Create sync branch
+              run: |
+                  cd $GITHUB_WORKSPACE
+                  BRANCH_NAME="sync/$(date +%Y-%m-%d-%H%M%S)-$LATEST_COMMIT_SHORT"
+                  echo "BRANCH_NAME=$BRANCH_NAME" >> $GITHUB_ENV
+
+                  # Delete branch if it exists locally
+                  git branch -D "$BRANCH_NAME" 2>/dev/null || true
+
+                  # Delete branch if it exists remotely
+                  git push origin --delete "$BRANCH_NAME" 2>/dev/null || true
+
+                  # Create fresh branch
+                  git checkout -b "$BRANCH_NAME"
+                  echo "Created branch: $BRANCH_NAME"
+
+            - name: Sync files from main repository
+              run: |
+                  cd /tmp/main-repo
+
+                  # Read the sync directories from input
+                  IFS=',' read -ra DIRS <<< "${{ github.event.inputs.sync_directories }}"
+
+                  # Create sync summary file
+                  echo "# Sync Summary" > /tmp/sync-summary.md
+                  echo "" >> /tmp/sync-summary.md
+
+                  for dir in "${DIRS[@]}"; do
+                    dir=$(echo "$dir" | xargs) # trim whitespace
+                    echo "## Syncing $dir directory" >> /tmp/sync-summary.md
+                    
+                    # Main repo has directories at root level, target repo has them in src/
+                    if [ -d "$dir" ]; then
+                      # Create directory in target repo if it doesn't exist
+                      mkdir -p "$GITHUB_WORKSPACE/src/$dir"
+                      
+                      # Find all files in the directory from main repo, excluding demo and story files
+                      find "$dir" -type f ! -name "*.demo.tsx" ! -name "*.story.tsx" ! -name "*.stories.tsx" | while read -r file; do
+                        target_file="$GITHUB_WORKSPACE/src/$file"
+                        
+                        # Check sync mode
+                        if [ "${{ github.event.inputs.sync_mode }}" = "existing-only" ]; then
+                          # Only process if target file already exists
+                          if [ ! -f "$target_file" ]; then
+                            echo "Skipping new file: $file (existing-only mode)"
+                            continue
+                          fi
+                        fi
+                        
+                        echo "Processing $file..."
+                        
+                        # Copy file content and process it
+                        content=$(cat "$file")
+                        
+                        # Remove "use client" directive if present (including double newlines after it)
+                        # This handles both double quotes and single quotes, with optional semicolon
+                        processed_content=$(echo "$content" | sed -E '
+                          /^"use client";?\s*$/{
+                            N
+                            N
+                            s/"use client";?\s*\n\s*\n//
+                          }
+                          /^'\''use client'\'';?\s*$/{
+                            N
+                            N
+                            s/'\''use client'\'';?\s*\n\s*\n//
+                          }
+                        ')
+                        
+                        # Target file goes in src/ directory
+                        target_dir=$(dirname "$target_file")
+                        mkdir -p "$target_dir"
+                        
+                        # Write processed content to target file
+                        echo "$processed_content" > "$target_file"
+                        
+                        echo "- src/$file" >> /tmp/sync-summary.md
+                      done
+                      
+                      # Log skipped files for transparency
+                      DEMO_STORY_SKIPPED=$(find "$dir" -type f \( -name "*.demo.tsx" -o -name "*.story.tsx" -o -name "*.stories.tsx" \) | wc -l)
+                      
+                      if [ "${{ github.event.inputs.sync_mode }}" = "existing-only" ]; then
+                        # Count new files that were skipped
+                        NEW_FILES_SKIPPED=0
+                        find "$dir" -type f ! -name "*.demo.tsx" ! -name "*.story.tsx" ! -name "*.stories.tsx" | while read -r file; do
+                          target_file="$GITHUB_WORKSPACE/src/$file"
+                          if [ ! -f "$target_file" ]; then
+                            NEW_FILES_SKIPPED=$((NEW_FILES_SKIPPED + 1))
+                          fi
+                        done
+                        
+                        if [ "$NEW_FILES_SKIPPED" -gt 0 ]; then
+                          echo "Skipped $NEW_FILES_SKIPPED new files (existing-only mode)"
+                          echo "- Skipped $NEW_FILES_SKIPPED new files (existing-only mode)" >> /tmp/sync-summary.md
+                        fi
+                      fi
+                      
+                      if [ "$DEMO_STORY_SKIPPED" -gt 0 ]; then
+                        echo "Skipped $DEMO_STORY_SKIPPED demo/story files"
+                        echo "- Skipped $DEMO_STORY_SKIPPED demo/story files" >> /tmp/sync-summary.md
+                      fi
+                    else
+                      echo "Directory $dir not found in main repository" >> /tmp/sync-summary.md
+                    fi
+                  done
+
+            - name: Check for changes
+              id: check-changes
+              run: |
+                  cd $GITHUB_WORKSPACE
+                  if git diff --quiet; then
+                    echo "changes=false" >> $GITHUB_OUTPUT
+                    echo "No changes detected"
+                  else
+                    echo "changes=true" >> $GITHUB_OUTPUT
+                    echo "Changes detected"
+                  fi
+
+            - name: Generate detailed diff summary
+              if: steps.check-changes.outputs.changes == 'true'
+              run: |
+                  cd $GITHUB_WORKSPACE
+
+                  echo "# Component sync changes" > /tmp/pr-description.md
+                  echo "" >> /tmp/pr-description.md
+                  echo "This PR synchronizes components from the main repository [untitleduico/react](https://github.com/untitleduico/react)." >> /tmp/pr-description.md
+                  echo "" >> /tmp/pr-description.md
+
+                  # Add commits since last sync section
+                  echo "## 📝 Commits since last sync" >> /tmp/pr-description.md
+                  echo "" >> /tmp/pr-description.md
+                  if [ -n "$LAST_SYNC_COMMIT" ] && [ "$COMMIT_COUNT" != "unknown" ]; then
+                    if [ "$COMMIT_COUNT" -gt 0 ]; then
+                      echo "**$COMMIT_COUNT new commits** from [\`$LAST_SYNC_COMMIT\`](https://github.com/untitleduico/react/commit/$LAST_SYNC_COMMIT) to [\`$LATEST_COMMIT_SHORT\`](https://github.com/untitleduico/react/commit/$LATEST_COMMIT_HASH):" >> /tmp/pr-description.md
+                      echo "" >> /tmp/pr-description.md
+                      echo "<details>" >> /tmp/pr-description.md
+                      echo "<summary>View commit history</summary>" >> /tmp/pr-description.md
+                      echo "" >> /tmp/pr-description.md
+                      while IFS= read -r commit_line; do
+                        if [ -n "$commit_line" ]; then
+                          commit_hash=$(echo "$commit_line" | cut -d' ' -f1)
+                          commit_msg=$(echo "$commit_line" | cut -d' ' -f2-)
+                          echo "- [\`$commit_hash\`](https://github.com/untitleduico/react/commit/$commit_hash) $commit_msg" >> /tmp/pr-description.md
+                        fi
+                      done < /tmp/commits-since-sync.txt
+                      echo "" >> /tmp/pr-description.md
+                      echo "</details>" >> /tmp/pr-description.md
+                    else
+                      echo "✅ **Repository is up to date** - no new commits since last sync [\`$LAST_SYNC_COMMIT\`](https://github.com/untitleduico/react/commit/$LAST_SYNC_COMMIT)" >> /tmp/pr-description.md
+                    fi
+                  else
+                    echo "🎉 **First sync** - syncing from latest commit [\`$LATEST_COMMIT_SHORT\`](https://github.com/untitleduico/react/commit/$LATEST_COMMIT_HASH)" >> /tmp/pr-description.md
+                    echo "" >> /tmp/pr-description.md
+                    echo "**Latest commit**: $LATEST_COMMIT_MESSAGE" >> /tmp/pr-description.md
+                    echo "**Author**: $LATEST_COMMIT_AUTHOR" >> /tmp/pr-description.md
+                    echo "**Date**: $LATEST_COMMIT_DATE" >> /tmp/pr-description.md
+                  fi
+                  echo "" >> /tmp/pr-description.md
+
+                  echo "## 📁 Modified files" >> /tmp/pr-description.md
+                  echo "" >> /tmp/pr-description.md
+
+                  # Get file statistics
+                  TOTAL_FILES=$(git diff --name-only | wc -l)
+                  echo "**$TOTAL_FILES files modified**" >> /tmp/pr-description.md
+                  echo "" >> /tmp/pr-description.md
+
+                  # List all changed files
+                  git diff --name-only | while read -r file; do
+                    if [ -n "$file" ]; then
+                      echo "- \`$file\`" >> /tmp/pr-description.md
+                    fi
+                  done
+                  echo "" >> /tmp/pr-description.md
+
+                  echo "## 🔧 Sync details" >> /tmp/pr-description.md
+                  echo "" >> /tmp/pr-description.md
+                  echo "- **Source repository**: [untitleduico/react](https://github.com/untitleduico/react)" >> /tmp/pr-description.md
+                  echo "- **Latest commit**: [\`$LATEST_COMMIT_SHORT\`](https://github.com/untitleduico/react/commit/$LATEST_COMMIT_HASH)" >> /tmp/pr-description.md
+                  echo "- **Sync date**: $(date -u '+%Y-%m-%d %H:%M:%S UTC')" >> /tmp/pr-description.md
+                  echo "- **Directories synced**: ${{ github.event.inputs.sync_directories }}" >> /tmp/pr-description.md
+                  echo "- **Sync mode**: ${{ github.event.inputs.sync_mode }}" >> /tmp/pr-description.md
+                  echo "- **Automated processing**: Removed \`\"use client\";\` directives, excluded demo/story files" >> /tmp/pr-description.md
+                  echo "" >> /tmp/pr-description.md
+                  echo "---" >> /tmp/pr-description.md
+                  echo "*This PR was automatically generated by the sync-components workflow.*" >> /tmp/pr-description.md
+
+            - name: Store sync commit record
+              if: steps.check-changes.outputs.changes == 'true'
+              run: |
+                  cd $GITHUB_WORKSPACE
+
+                  # Create .github directory if it doesn't exist
+                  mkdir -p .github
+
+                  # Store the latest commit hash for next sync
+                  echo "$LATEST_COMMIT_HASH" > .github/last-sync-commit
+
+                  echo "Stored sync commit: $LATEST_COMMIT_HASH"
+
+            - name: Commit changes
+              if: steps.check-changes.outputs.changes == 'true'
+              run: |
+                  cd $GITHUB_WORKSPACE
+                  git add .
+
+                  # Create commit message
+                  if [ -n "$LAST_SYNC_COMMIT" ] && [ "$COMMIT_COUNT" != "unknown" ] && [ "$COMMIT_COUNT" -gt 0 ]; then
+                    COMMIT_MSG="sync: Update components from main repository ($COMMIT_COUNT commits)
+
+                  Synced from: $LAST_SYNC_COMMIT..$LATEST_COMMIT_SHORT
+                  Latest commit: $LATEST_COMMIT_MESSAGE
+                  Directories: ${{ github.event.inputs.sync_directories }}
+                  Source: https://github.com/untitleduico/react/commit/$LATEST_COMMIT_HASH
+                  Automated processing: Removed 'use client' directives"
+                  else
+                    COMMIT_MSG="sync: Initial sync from main repository
+
+                  Latest commit: $LATEST_COMMIT_SHORT - $LATEST_COMMIT_MESSAGE
+                  Author: $LATEST_COMMIT_AUTHOR
+                  Directories: ${{ github.event.inputs.sync_directories }}
+                  Source: https://github.com/untitleduico/react/commit/$LATEST_COMMIT_HASH
+                  Automated processing: Removed 'use client' directives"
+                  fi
+
+                  git commit -m "$COMMIT_MSG"
+
+            - name: Push changes and create PR
+              if: steps.check-changes.outputs.changes == 'true'
+              env:
+                  GH_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+              run: |
+                  cd $GITHUB_WORKSPACE
+                  git push origin "$BRANCH_NAME"
+
+                  # Create PR title based on sync type
+                  if [ -n "$LAST_SYNC_COMMIT" ] && [ "$COMMIT_COUNT" != "unknown" ] && [ "$COMMIT_COUNT" -gt 0 ]; then
+                    PR_TITLE="🔄 Sync components ($COMMIT_COUNT commits) → $LATEST_COMMIT_SHORT"
+                  else
+                    PR_TITLE="🎉 Initial sync from main repository → $LATEST_COMMIT_SHORT"
+                  fi
+
+                  # Create PR using GitHub CLI
+                  gh pr create \
+                    --title "$PR_TITLE" \
+                    --body-file /tmp/pr-description.md \
+                    --head "$BRANCH_NAME" \
+                    --base main
+
+            - name: Output results
+              run: |
+                  if [ "${{ steps.check-changes.outputs.changes }}" == "true" ]; then
+                    echo "✅ Sync completed successfully. PR created."
+                    echo "Branch: $BRANCH_NAME"
+                  else
+                    echo "ℹ️ No changes detected. Repository is already in sync."
+                  fi
diff --git a/.gitignore b/.gitignore
new file mode 100644
index 0000000..7ceb59f
--- /dev/null
+++ b/.gitignore
@@ -0,0 +1,25 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
+.env
diff --git a/.npmrc b/.npmrc
new file mode 100644
index 0000000..16d51e6
--- /dev/null
+++ b/.npmrc
@@ -0,0 +1,3 @@
+@awesome.me:registry=https://npm.fontawesome.com/
+@fortawesome:registry=https://npm.fontawesome.com/
+//npm.fontawesome.com/:_authToken=B9FAA215-4936-4B13-BEAA-FA58F042FA1A
diff --git a/.prettierrc b/.prettierrc
new file mode 100644
index 0000000..f4b9b99
--- /dev/null
+++ b/.prettierrc
@@ -0,0 +1,19 @@
+{
+  "printWidth": 160,
+  "tabWidth": 4,
+  "plugins": [
+    "@trivago/prettier-plugin-sort-imports",
+    "prettier-plugin-tailwindcss"
+  ],
+  "tailwindFunctions": ["sortCx", "cx"],
+  "importOrder": [
+    "^react$",
+    "^react-dom$",
+    "^(?!react$|react-dom$|@/|\\.).*",
+    "^@/.*",
+    "^\\.{1,2}/.*"
+  ],
+  "importOrderSeparation": false,
+  "importOrderSortSpecifiers": true,
+  "tailwindStylesheet": "./src/styles/globals.css"
+}
diff --git a/CLAUDE.md b/CLAUDE.md
new file mode 100644
index 0000000..721ccac
--- /dev/null
+++ b/CLAUDE.md
@@ -0,0 +1,811 @@
+## Project Overview
+
+This is an **Untitled UI React** component library project built with:
+
+- **React 19.1.1** with TypeScript
+- **Tailwind CSS v4.1** for styling
+- **React Aria Components** as the foundation for accessibility and behavior
+
+## Key Architecture Principles
+
+### Component Foundation
+
+- All components are built on **React Aria Components** for consistent accessibility and behavior
+- Components follow the compound component pattern with sub-components (e.g., `Select.Item`, `Select.ComboBox`)
+- TypeScript is used throughout for type safety
+
+### Import Naming Convention
+
+**CRITICAL**: All imports from `react-aria-components` must be prefixed with `Aria*` for clarity and consistency:
+
+```typescript
+// ✅ Correct
+import { Button as AriaButton, TextField as AriaTextField } from "react-aria-components";
+// ❌ Incorrect
+import { Button, TextField } from "react-aria-components";
+```
+
+This convention:
+
+- Prevents naming conflicts with custom components
+- Makes it clear when using base React Aria components
+- Maintains consistency across the entire codebase
+
+### File Naming Convention
+
+**IMPORTANT**: All files must be named in **kebab-case** for consistency:
+
+```
+✅ Correct:
+- date-picker.tsx
+- user-profile.tsx
+- api-client.ts
+- auth-context.tsx
+
+❌ Incorrect:
+- DatePicker.tsx
+- userProfile.tsx
+- apiClient.ts
+- AuthContext.tsx
+```
+
+This applies to all file types including:
+
+- Component files (.tsx, .jsx)
+- TypeScript/JavaScript files (.ts, .js)
+- Style files (.css, .scss)
+- Test files (.test.ts, .spec.tsx)
+- Configuration files (when creating new ones)
+
+## Development Commands
+
+```bash
+# Development
+npm run dev               # Start Vite development server (http://localhost:5173)
+npm run build            # Build for production (TypeScript compilation + Vite build)
+```
+
+## Project Structure
+
+### Application Architecture
+
+```
+src/
+├── components/
+│   ├── base/              # Core UI components (Button, Input, Select, etc.)
+│   ├── application/       # Complex application components
+│   ├── foundations/       # Design tokens and foundational elements
+│   ├── marketing/         # Marketing-specific components
+│   └── shared-assets/     # Reusable assets and illustrations
+├── hooks/                 # Custom React hooks
+├── pages/                 # Route components
+├── providers/             # React context providers
+├── styles/               # Global styles and theme
+├── types/                # TypeScript type definitions
+└── utils/                # Utility functions
+```
+
+### Component Patterns
+
+#### 1. Base Components
+
+Located in `components/base/`, these are the building blocks:
+
+- `Button` - All button variants with loading states
+- `Input` - Text inputs with validation and icons
+- `Select` - Dropdown selections with complex options
+- `Checkbox`, `Radio`, `Toggle` - Form controls
+- `Avatar`, `Badge`, `Tooltip` - Display components
+
+#### 2. Application Components
+
+Located in `components/application/`, these are complex UI patterns:
+
+- `DatePicker` - Calendar-based date selection
+- `Modal` - Overlay dialogs
+- `Pagination` - Data navigation
+- `Table` - Data display with sorting
+- `Tabs` - Content organization
+
+#### 3. Styling Architecture
+
+- Uses a `sortCx` utility for organized style objects
+- Follows size variants: `sm`, `md`, `lg`, `xl`
+- Color variants: `primary`, `secondary`, `tertiary`, `destructive`, etc.
+- Responsive and state-aware styling with Tailwind
+
+#### 4. Component Props Pattern
+
+```typescript
+interface CommonProps {
+    size?: "sm" | "md" | "lg";
+    isDisabled?: boolean;
+    isLoading?: boolean;
+    // ... other common props
+}
+
+interface ButtonProps extends CommonProps, HTMLButtonElement {
+    color?: "primary" | "secondary" | "tertiary";
+    iconLeading?: FC | ReactNode;
+    iconTrailing?: FC | ReactNode;
+}
+```
+
+## Styling Guidelines
+
+### Tailwind CSS v4.1
+
+- Uses the latest Tailwind CSS v4.1 features
+- Custom design tokens defined in theme configuration
+- Consistent spacing, colors, and typography scales
+
+### Brand Color Customization
+
+To change the main brand color across the entire application:
+
+1. **Update Brand Color Variables**: Edit `src/styles/theme.css` and modify the `--color-brand-*` variables
+2. **Maintain Color Scale**: Ensure you provide a complete color scale from 25 to 950 with proper contrast ratios
+3. **Example Brand Color Scale**:
+    ```css
+    --color-brand-25: rgb(252 250 255); /* Lightest tint */
+    --color-brand-50: rgb(249 245 255);
+    --color-brand-100: rgb(244 235 255);
+    --color-brand-200: rgb(233 215 254);
+    --color-brand-300: rgb(214 187 251);
+    --color-brand-400: rgb(182 146 246);
+    --color-brand-500: rgb(158 119 237); /* Base brand color */
+    --color-brand-600: rgb(127 86 217); /* Primary interactive color */
+    --color-brand-700: rgb(105 65 198);
+    --color-brand-800: rgb(83 56 158);
+    --color-brand-900: rgb(66 48 125);
+    --color-brand-950: rgb(44 28 95); /* Darkest shade */
+    ```
+
+The color scale automatically adapts to both light and dark modes through the CSS variable system.
+
+### Style Organization
+
+```typescript
+export const styles = sortCx({
+    common: {
+        root: "base-classes-here",
+        icon: "icon-classes-here",
+    },
+    sizes: {
+        sm: { root: "small-size-classes" },
+        md: { root: "medium-size-classes" },
+    },
+    colors: {
+        primary: { root: "primary-color-classes" },
+        secondary: { root: "secondary-color-classes" },
+    },
+});
+```
+
+### Utility Functions
+
+- `cx()` - Class name utility (from `@/utils/cx`)
+- `sortCx()` - Organized style objects
+- `isReactComponent()` - Component type checking
+
+## Icon Usage
+
+### Available Libraries
+
+- `@untitledui/icons` - 1,100+ line-style icons (free)
+- `@untitledui/file-icons` - File type icons
+- `@untitledui-pro/icons` - 4,600+ icons in 4 styles (Requires PRO access)
+
+### Import & Usage
+
+```typescript
+// Recommended: Named imports (tree-shakeable)
+import { Home01, Settings01, ChevronDown } from "@untitledui/icons";
+
+// Component props - pass as reference
+<Button iconLeading={ChevronDown}>Options</Button>
+
+// Standalone usage
+<Home01 className="size-5 text-gray-600" />
+
+// As JSX element - MUST include data-icon
+<Button iconLeading={<ChevronDown data-icon className="size-4" />}>Options</Button>
+```
+
+### Styling
+
+```typescript
+// Size: use size-4 (16px), size-5 (20px), size-6 (24px)
+<Home01 className="size-5" />
+
+// Color: use semantic text colors
+<Home01 className="size-5 text-brand-600" />
+
+// Stroke width (line icons only)
+<Home01 className="size-5" strokeWidth={2} />
+
+// Accessibility: decorative icons need aria-hidden
+<Home01 className="size-5" aria-hidden="true" />
+```
+
+### PRO Icon Styles
+
+```typescript
+import { Home01 } from "@untitledui-pro/icons";
+// Line
+import { Home01 } from "@untitledui-pro/icons/duocolor";
+import { Home01 } from "@untitledui-pro/icons/duotone";
+import { Home01 } from "@untitledui-pro/icons/solid";
+```
+
+## Form Handling
+
+### Form Components
+
+- `Input` - Text inputs with validation
+- `Select` - Dropdown selections
+- `Checkbox`, `Radio` - Selection controls
+- `Textarea` - Multi-line text input
+- `Form` - Form wrapper with validation
+
+## Animation and Interactions
+
+### Animation Libraries
+
+- `motion` (Framer Motion) for complex animations
+- `tailwindcss-animate` for utility-based animations
+- CSS transitions for simple state changes
+
+### CSS Transitions
+
+For default small transition actions (hover states, color changes, etc.), use:
+
+```typescript
+className = "transition duration-100 ease-linear";
+```
+
+This provides a snappy 100ms linear transition that feels responsive without being jarring.
+
+### Loading States
+
+- Components support `isLoading` prop
+- Built-in loading spinners
+- Proper disabled states during loading
+
+## Common Patterns
+
+### Compound Components
+
+```typescript
+const Select = SelectComponent as typeof SelectComponent & {
+    Item: typeof SelectItem;
+    ComboBox: typeof ComboBox;
+};
+Select.Item = SelectItem;
+Select.ComboBox = ComboBox;
+```
+
+### Conditional Rendering
+
+```typescript
+{label && <Label isRequired={isRequired}>{label}</Label>}
+{hint && <HintText isInvalid={isInvalid}>{hint}</HintText>}
+```
+
+## State Management
+
+### Component State
+
+- Use React Aria's built-in state management
+- Local state for component-specific data
+- Context for shared component state (theme, router)
+
+### Global State
+
+- Theme context in `src/providers/theme.tsx`
+- Router context in `src/providers/router-provider.tsx`
+
+## Key Files and Utilities
+
+### Core Utilities
+
+- `src/utils/cx.ts` - Class name utilities
+- `src/utils/is-react-component.ts` - Component type checking
+- `src/hooks/` - Custom React hooks
+
+### Style Configuration
+
+- `src/styles/globals.css` - Global styles
+- `src/styles/theme.css` - Theme definitions
+- `src/styles/typography.css` - Typography styles
+
+## Best Practices for AI Assistance
+
+### When Adding New Components
+
+1. Follow the existing component structure
+2. Use React Aria Components as foundation
+3. Implement proper TypeScript types
+4. Add size and color variants where applicable
+5. Include accessibility features
+6. Follow the naming conventions
+7. Add components to appropriate folders (`base/`, `application/`, etc.)
+
+## Most Used Components Reference
+
+### Button
+
+The Button component is the most frequently used interactive element across the library.
+
+**Import:**
+
+```typescript
+import { Button } from "@/components/base/buttons/button";
+```
+
+**Common Props:**
+
+- `size`: `"sm" | "md" | "lg" | "xl"` - Button size (default: `"sm"`)
+- `color`: `"primary" | "secondary" | "tertiary" | "link-gray" | "link-color" | "primary-destructive" | "secondary-destructive" | "tertiary-destructive" | "link-destructive"` - Button color variant (default: `"primary"`)
+- `iconLeading`: `FC | ReactNode` - Icon or component to display before text
+- `iconTrailing`: `FC | ReactNode` - Icon or component to display after text
+- `isDisabled`: `boolean` - Disabled state
+- `isLoading`: `boolean` - Loading state with spinner
+- `showTextWhileLoading`: `boolean` - Keep text visible during loading
+- `children`: `ReactNode` - Button content
+
+**Examples:**
+
+```typescript
+// Basic button
+<Button size="md">Save</Button>
+
+// With leading icon
+<Button iconLeading={Check} color="primary">Save</Button>
+
+// Loading state
+<Button isLoading showTextWhileLoading>Submitting...</Button>
+
+// Destructive action
+<Button color="primary-destructive" iconLeading={Trash02}>Delete</Button>
+```
+
+### Input
+
+Text input component with extensive customization options.
+
+**Import:**
+
+```typescript
+import { Input } from "@/components/base/input/input";
+import { InputGroup } from "@/components/base/input/input-group";
+```
+
+**Common Props:**
+
+- `size`: `"sm" | "md"` - Input size (default: `"sm"`)
+- `label`: `string` - Field label
+- `placeholder`: `string` - Placeholder text
+- `hint`: `string` - Helper text below input
+- `tooltip`: `string` - Tooltip text for help icon
+- `icon`: `FC` - Leading icon component
+- `isRequired`: `boolean` - Required field indicator
+- `isDisabled`: `boolean` - Disabled state
+- `isInvalid`: `boolean` - Error state
+
+**Examples:**
+
+```typescript
+// Basic input with label
+<Input label="Email" placeholder="olivia@untitledui.com" />
+
+// With icon and validation
+<Input
+  icon={Mail01}
+  label="Email"
+  isRequired
+  isInvalid
+  hint="Please enter a valid email"
+/>
+
+// Input group with button
+<InputGroup label="Website" trailingAddon={<Button>Copy</Button>}>
+  <InputBase placeholder="www.untitledui.com" />
+</InputGroup>
+```
+
+### Select
+
+Dropdown selection component with search and multi-select capabilities.
+
+**Import:**
+
+```typescript
+import { MultiSelect } from "@/components/base/select/multi-select";
+import { Select } from "@/components/base/select/select";
+```
+
+**Common Props:**
+
+- `size`: `"sm" | "md"` - Select size (default: `"sm"`)
+- `label`: `string` - Field label
+- `placeholder`: `string` - Placeholder text
+- `hint`: `string` - Helper text
+- `tooltip`: `string` - Tooltip text
+- `items`: `Array` - Data items to display
+- `isRequired`: `boolean` - Required field
+- `isDisabled`: `boolean` - Disabled state
+- `placeholderIcon`: `FC | ReactNode` - Icon for placeholder
+
+**Item Props:**
+
+- `id`: `string` - Unique identifier
+- `supportingText`: `string` - Secondary text
+- `icon`: `FC | ReactNode` - Leading icon
+- `avatarUrl`: `string` - Avatar image URL
+- `isDisabled`: `boolean` - Disabled item
+
+**Examples:**
+
+```typescript
+// Basic select
+<Select label="Team member" placeholder="Select member" items={users}>
+  {(item) => (
+    <Select.Item id={item.id} supportingText={item.email}>
+      {item.name}
+    </Select.Item>
+  )}
+</Select>
+
+// With search (ComboBox)
+<Select.ComboBox label="Search" placeholder="Search users" items={users}>
+  {(item) => <Select.Item id={item.id}>{item.name}</Select.Item>}
+</Select.ComboBox>
+
+// With avatars
+<Select items={users} placeholderIcon={User01}>
+  {(item) => (
+    <Select.Item avatarUrl={item.avatar} supportingText={item.role}>
+      {item.name}
+    </Select.Item>
+  )}
+</Select>
+```
+
+### Checkbox
+
+Checkbox component for boolean selections.
+
+**Import:**
+
+```typescript
+import { Checkbox } from "@/components/base/checkbox/checkbox";
+```
+
+**Common Props:**
+
+- `size`: `"sm" | "md"` - Checkbox size (default: `"sm"`)
+- `label`: `string` - Checkbox label
+- `hint`: `string` - Helper text below label
+- `isSelected`: `boolean` - Checked state
+- `isDisabled`: `boolean` - Disabled state
+- `isIndeterminate`: `boolean` - Indeterminate state
+
+**Examples:**
+
+```typescript
+// Basic checkbox
+<Checkbox label="Remember me" />
+
+// With hint text
+<Checkbox
+  label="Remember me"
+  hint="Save my login details for next time"
+/>
+
+// Controlled state
+<Checkbox isSelected={checked} onChange={setChecked} />
+```
+
+### Badge
+
+Badge components for status indicators and labels.
+
+**Import:**
+
+```typescript
+import { Badge, BadgeWithDot, BadgeWithIcon } from "@/components/base/badges/badges";
+```
+
+**Common Props:**
+
+- `size`: `"sm" | "md" | "lg"` - Badge size
+- `color`: `"gray" | "brand" | "error" | "warning" | "success" | "blue-gray" | "blue-light" | "blue" | "indigo" | "purple" | "pink" | "rose" | "orange"` - Color theme
+- `type`: `"pill-color" | "color" | "modern"` - Badge style variant
+
+**Examples:**
+
+```typescript
+// Basic badge
+<Badge color="brand" size="md">New</Badge>
+
+// With dot indicator
+<BadgeWithDot color="success" type="pill-color">Active</BadgeWithDot>
+
+// With icon
+<BadgeWithIcon iconLeading={ArrowUp} color="success">12%</BadgeWithIcon>
+```
+
+### Avatar
+
+Avatar component for user profile images.
+
+**Import:**
+
+```typescript
+import { Avatar } from "@/components/base/avatar/avatar";
+import { AvatarLabelGroup } from "@/components/base/avatar/avatar-label-group";
+```
+
+**Common Props:**
+
+- `size`: `"xs" | "sm" | "md" | "lg" | "xl" | "2xl"` - Avatar size
+- `src`: `string` - Image URL
+- `alt`: `string` - Alt text for accessibility
+- `initials`: `string` - Text initials when no image
+- `placeholderIcon`: `FC` - Icon when no image
+- `status`: `"online" | "offline"` - Status indicator
+- `verified`: `boolean` - Verification badge
+- `badge`: `ReactNode` - Custom badge element
+
+**Examples:**
+
+```typescript
+// Basic avatar
+<Avatar src="/avatar.jpg" alt="User Name" size="md" />
+
+// With status
+<Avatar src="/avatar.jpg" status="online" />
+
+// With initials fallback
+<Avatar initials="OR" size="lg" />
+
+// Label group
+<AvatarLabelGroup
+  src="/avatar.jpg"
+  title="Olivia Rhye"
+  subtitle="olivia@untitledui.com"
+  size="md"
+/>
+```
+
+### FeaturedIcon
+
+Decorative icon component with themed backgrounds for emphasis and visual hierarchy.
+
+**Import:**
+
+```typescript
+import { FeaturedIcon } from "@/components/foundations/featured-icon/featured-icon";
+```
+
+**Common Props:**
+
+- `icon`: `FC` - Icon component to display (required)
+- `size`: `"sm" | "md" | "lg" | "xl"` - Icon container size
+- `color`: `"brand" | "gray" | "error" | "warning" | "success"` - Color scheme
+- `theme`: `"light" | "gradient" | "dark" | "modern" | "modern-neue" | "outline"` - Visual theme style
+
+**Theme Styles:**
+
+- `light`: Subtle background with colored icon
+- `gradient`: Gradient background effect
+- `dark`: Solid colored background with white icon
+- `modern`: Contemporary gray styling (gray color only)
+- `modern-neue`: Alternative modern style (gray color only)
+- `outline`: Border style with transparent background
+
+**Examples:**
+
+```typescript
+// Basic featured icon
+<FeaturedIcon icon={CheckCircle} color="success" theme="light" size="lg" />
+
+// With gradient theme
+<FeaturedIcon icon={AlertCircle} color="warning" theme="gradient" size="xl" />
+
+// Dark theme for emphasis
+<FeaturedIcon icon={XCircle} color="error" theme="dark" size="md" />
+
+// Outline style
+<FeaturedIcon icon={InfoCircle} color="brand" theme="outline" size="lg" />
+
+// Modern styles (IMPORTANT: gray only)
+<FeaturedIcon icon={Settings} color="gray" theme="modern" size="lg" />
+```
+
+### Link
+
+**Note**: There is no dedicated Link component. Instead, use the Button component with an `href` prop and link-specific color variants.
+
+**Import:**
+
+```typescript
+import { Button } from "@/components/base/buttons/button";
+```
+
+**Link Colors:**
+
+- `link-gray` - Gray link styling
+- `link-color` - Brand color link styling
+- `link-destructive` - Destructive link styling
+
+**Examples:**
+
+```typescript
+// Basic link
+<Button href="/dashboard" color="link-color">View Dashboard</Button>
+
+// With icon
+<Button href="/settings" color="link-gray" iconLeading={Settings01}>
+  Settings
+</Button>
+
+// Destructive link
+<Button href="/delete" color="link-destructive" iconLeading={Trash02}>
+  Delete Account
+</Button>
+
+// External link
+<Button href="https://example.com" color="link-color" iconTrailing={ExternalLink01}>
+  Visit Site
+</Button>
+```
+
+### Common Component Patterns
+
+1. **Size Variants**: Most components support `sm`, `md`, `lg` sizes
+2. **State Props**: `isDisabled`, `isLoading`, `isInvalid`, `isRequired` are common
+3. **Icon Support**: Components accept icons as both components (`Icon`) or elements (`<Icon />`)
+4. **Compound Components**: Complex components use dot notation (e.g., `Select.Item`, `Select.ComboBox`)
+5. **Accessibility**: All components include proper ARIA attributes and keyboard support
+
+### Icon Usage
+
+When passing icons to components:
+
+```typescript
+// As component reference (preferred)
+<Button iconLeading={ChevronDown}>Options</Button>
+
+// As element (must include data-icon)
+<Button iconLeading={<ChevronDown data-icon className="size-4" />}>Options</Button>
+```
+
+## COLORS
+
+MUST use color classes to style elements.
+
+Bad:
+
+- text-gray-900
+- text-gray-600
+- bg-blue-700
+
+Good:
+
+- text-primary
+- text-secondary
+- bg-primary
+
+### Text Color
+
+Use text color variables to manage all text fill colors in your designs across light and dark modes.
+
+| Name                       | Usage                                                                                                                                                                |
+| :------------------------- | :------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| text-primary               | Primary text such as page headings.                                                                                                                                  |
+| text-primary_on-brand      | Primary text when used on solid brand color backgrounds. Commonly used for brand theme website sections (e.g. CTA sections).                                         |
+| text-secondary             | Secondary text such as labels and section headings.                                                                                                                  |
+| text-secondary_hover       | Secondary text when in hover state.                                                                                                                                  |
+| text-secondary_on-brand    | Secondary text when used on solid brand color backgrounds. Commonly used for brand theme website sections (e.g. CTA sections).                                       |
+| text-tertiary              | Tertiary text such as supporting text and paragraph text.                                                                                                            |
+| text-tertiary_hover        | Tertiary text when in hover state.                                                                                                                                   |
+| text-tertiary_on-brand     | Tertiary text when used on solid brand color backgrounds. Commonly used for brand theme website sections (e.g. CTA sections).                                        |
+| text-quaternary            | Quaternary text for more subtle and lower-contrast text, such as footer column headings.                                                                             |
+| text-quaternary_on-brand   | Quaternary text when used on solid brand color backgrounds. Commonly used for brand theme website sections (e.g. footers).                                           |
+| text-white                 | Text that is always white, regardless of the mode.                                                                                                                   |
+| text-disabled              | Default color for disabled text such as disabled input fields or buttons. This can be changed to gray-400, but gray-500 is higher contrast and more accessible.      |
+| text-placeholder           | Default color for placeholder text such as input field placeholders. This can be changed to gray-400, but gray-500 is more accessible because it is higher contrast. |
+| text-placeholder_subtle    | A more subtle (lower contrast) alternative placeholder text. Useful for components such as verification code input fields.                                           |
+| text-brand-primary         | Primary brand text useful for headings (e.g. cards in pricing page headers).                                                                                         |
+| text-brand-secondary       | Secondary brand text for brand buttons, as well as accented text, highlights, and subheadings (e.g. subheadings in blog post cards).                                 |
+| text-brand-secondary_hover | Secondary brand text when in hover state (e.g. brand buttons).                                                                                                       |
+| text-brand-tertiary        | Tertiary brand text for lighter accented text and highlights (e.g. numbers in metric cards).                                                                         |
+| text-brand-tertiary_alt    | An alternative to tertiary brand text that is lighter in dark mode (e.g. numbers in metric cards).                                                                   |
+| text-error-primary         | Default error state semantic text color (e.g. input field error states).                                                                                             |
+| text-warning-primary       | Default warning state semantic text color.                                                                                                                           |
+| text-success-primary       | Default success state semantic text color.                                                                                                                           |
+
+### Border Color
+
+Use border color variables to manage all stroke colors in your designs across light and dark modes. You can use the same values for `ring-` and `outline-` as well (i.e. `ring-primary` `outline-secondary`).
+
+| Name                   | Usage                                                                                                                                                                                   |
+| :--------------------- | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| border-primary         | High contrast borders. These are used for components such as input fields, button groups, and checkboxes.                                                                               |
+| border-secondary       | Medium contrast borders. This is the most commonly used border color and is the default for most components (e.g. file uploaders), cards (such as tables), and content dividers.        |
+| border-secondary_alt   | An alternative to secondary border that uses alpha transparency. This is used exclusively for floating menus such as input dropdowns and notifications to create sharper bottom border. |
+| border-tertiary        | Low contrast borders useful for very subtle dividers and borders such as line and bar chart axis dividers.                                                                              |
+| border-disabled        | Default disabled border color for disabled states in components such as input fields and checkboxes.                                                                                    |
+| border-disabled_subtle | A more subtle (lower contrast) alternative for disabled borders such as disabled buttons.                                                                                               |
+| border-brand           | Default brand border color. Useful for active states in components such as input fields.                                                                                                |
+| border-brand_alt       | An brand border color that switches to gray when in dark mode. Useful for components such as brand-style variants of banners and footers.                                               |
+| border-error           | Default error state semantic border color. Useful for error states in components such as input fields and file uploaders.                                                               |
+| border-error_subtle    | A more subtle (lower contrast) alternative for error state semantic borders such as error state input fields.                                                                           |
+
+### Foreground Color
+
+Use foreground color variables to manage all non-text foreground elements in your designs across light and dark modes. Can be used via `text-`, `bg-`, `ring-`, `outline-`, `stroke-`, `fill-`, etc.
+
+| Name                   | Usage                                                                                                                                                         |
+| :--------------------- | :------------------------------------------------------------------------------------------------------------------------------------------------------------ |
+| fg-primary             | Highest contrast non-text foreground elements such as icons.                                                                                                  |
+| fg-secondary           | High contrast non-text foreground elements such as icons.                                                                                                     |
+| fg-secondary_hover     | Secondary foreground elements when in hover state.                                                                                                            |
+| fg-tertiary            | Medium contrast non-text foreground elements such as icons.                                                                                                   |
+| fg-tertiary_hover      | Tertiary foreground elements when in hover state.                                                                                                             |
+| fg-quaternary          | Low contrast non-text foreground elements such as icons in buttons, help icons and icons used in input fields.                                                |
+| fg-quaternary_hover    | Quaternary foreground elements when in hover state, such as help icons.                                                                                       |
+| fg-white               | Foreground elements that are always white, regardless of the mode.                                                                                            |
+| fg-disabled            | Default color for disabled non-text foreground elements such as icons in disabled button group buttons and input dropdown menu items.                         |
+| fg-disabled_subtle     | A more subtle (lower contrast) alternative for non-text disabled foreground elements such as disabled active checkboxes and tag checkboxes.                   |
+| fg-brand-primary       | Primary brand color non-text foreground elements such as featured icons and progress bars.                                                                    |
+| fg-brand-primary_alt   | An alternative for primary brand color non-text foreground elements that switches to gray when in dark mode such as active horizontal tabs.                   |
+| fg-brand-secondary     | Secondary brand color non-text foreground elements such as accents and arrows in marketing site sections (e.g. hero header sections).                         |
+| fg-brand-secondary_alt | An alternative for secondary brand color non-text foreground elements that switches to gray when in dark mode such as brand buttons.                          |
+| fg-error-primary       | Primary error state color for non-text foreground elements such as featured icons.                                                                            |
+| fg-error-secondary     | Secondary error state color for non-text foreground elements such as icons in error state input fields and negative metrics item charts and icons.            |
+| fg-warning-primary     | Primary warning state color for non-text foreground elements such as featured icons.                                                                          |
+| fg-warning-secondary   | Secondary warning state color for non-text foreground elements.                                                                                               |
+| fg-success-primary     | Primary success state color for non-text foreground elements such as featured icons.                                                                          |
+| fg-success-secondary   | Secondary success state color for non-text foreground elements such as button dots, avatar online indicator dots, and positive metrics item charts and icons. |
+
+### Background Color
+
+Use background color variables to manage all fill colors for elements in your designs across light and dark modes.
+
+| Name                    | Usage                                                                                                                                                                                         |
+| :---------------------- | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| bg-primary              | The primary background color (white) used across all layouts and components.                                                                                                                  |
+| bg-primary_alt          | An alternative primary background color (white) that switches to bg-secondary when in dark mode.                                                                                              |
+| bg-primary_hover        | Primary background hover color. This acts as the default hover state background color for components with white backgrounds (e.g. input dropdown menu items).                                 |
+| bg-primary-solid        | The primary dark background color used across layouts and components. This switches to bg-secondary when in dark mode and is useful for components such as tooltips and Text editor tooltips. |
+| bg-secondary            | The secondary background color used to create contrast against white backgrounds, such as website section backgrounds.                                                                        |
+| bg-secondary_alt        | An alternative secondary background color that switches to bg-primary when in dark mode. Useful for components such as border-style horizontal tabs.                                          |
+| bg-secondary_hover      | Secondary background hover color. Useful for hover states for components with gray-50 backgrounds such as active states (e.g. navigation items and date pickers).                             |
+| bg-secondary_subtle     | An alternative secondary background color that is slightly lighter and more subtle in light mode. This is useful for components such as banners.                                              |
+| bg-secondary-solid      | The secondary dark background color used across layouts and components. This is useful for components such as featured icons.                                                                 |
+| bg-tertiary             | The tertiary background color used to create contrast against light backgrounds such as toggles.                                                                                              |
+| bg-quaternary           | The quaternary background color used to create contrast against light backgrounds, such as sliders and progress bars.                                                                         |
+| bg-active               | Default active background color for components such as selected menu items in input dropdowns.                                                                                                |
+| bg-disabled             | Default disabled background color for components such as disabled primary buttons and toggles.                                                                                                |
+| bg-disabled_subtle      | An alternative disabled background color that is more subtle. This is useful for components such as disabled input fields and checkboxes.                                                     |
+| bg-overlay              | Default background color for background overlays. These are useful for overlay components such as modals.                                                                                     |
+| bg-brand-primary        | The primary brand background color. Useful for components such as check icons.                                                                                                                |
+| bg-brand-primary_alt    | An alternative primary brand background color that switches to bg-secondary when in dark mode. Useful for components such as active horizontal tabs.                                          |
+| bg-brand-secondary      | The secondary brand background color. Useful for components such as featured icons.                                                                                                           |
+| bg-brand-solid          | Default solid (dark) brand background color. Useful for components such as toggles and messages.                                                                                              |
+| bg-brand-solid_hover    | Solid brand background color when in hover state. Useful for components such as toggles.                                                                                                      |
+| bg-brand-section        | This is the default dark brand color background used for website sections such as CTA sections and testimonials. Switches to bg-secondary when in dark mode.                                  |
+| bg-brand-section_subtle | An alternative brand section background color to provide contrast for website sections such as FAQ sections. Switches to bg-primary when in dark mode.                                        |
+| bg-error-primary        | Primary error state background color for components such as buttons.                                                                                                                          |
+| bg-error-secondary      | Secondary error state background color for components such as featured icons.                                                                                                                 |
+| bg-error-solid          | Default solid (dark) error state background color for components such as buttons, featured icons and metric items.                                                                            |
+| bg-error-solid_hover    | Default solid (dark) error hover state background color for components such as buttons.                                                                                                       |
+| bg-warning-primary      | Primary warning state background color for components.                                                                                                                                        |
+| bg-warning-secondary    | Secondary warning state background color for components such as featured icons.                                                                                                               |
+| bg-warning-solid        | Default solid (dark) warning state background color for components such as featured icons.                                                                                                    |
+| bg-success-primary      | Primary success state background color for components.                                                                                                                                        |
+| bg-success-secondary    | Secondary success state background color for components such as featured icons.                                                                                                               |
+| bg-success-solid        | Default solid (dark) success state background color for components such as featured icons and metric items.                                                                                   |
diff --git a/README.md b/README.md
new file mode 100644
index 0000000..79d9123
--- /dev/null
+++ b/README.md
@@ -0,0 +1,56 @@
+# Untitled UI starter kit for Vite
+
+This is an official Untitled UI starter kit for Vite. Kickstart your Untitled UI project with Vite in seconds.
+
+## Untitled UI React
+
+[Untitled UI React](https://www.untitledui.com/react) is the world’s largest collection of open-source React UI components. Everything you need to design and develop modern, beautiful interfaces—fast.
+
+Built with React 19.1, Tailwind CSS v4.1, TypeScript 5.8, and React Aria, Untitled UI React components deliver modern performance, type safety, and maintainability.
+
+[Learn more](https://www.untitledui.com/react) • [Documentation](https://www.untitledui.com/react/docs/introduction) • [Figma](https://www.untitledui.com/figma) • [FAQs](https://www.untitledui.com/faqs)
+
+## Getting started
+
+First, run the development server:
+
+```bash
+npm run dev
+# or
+yarn dev
+# or
+pnpm dev
+# or
+bun dev
+```
+
+Open [http://localhost:5173](http://localhost:5173) with your browser to see the result.
+
+You can start editing the app by modifying the components in `src/` folder. The page auto-updates as you edit the file.
+
+## Resources
+
+Untitled UI React is built on top of [Untitled UI Figma](https://www.untitledui.com/figma), the world's largest and most popular Figma UI kit and design system. Explore more:
+
+**[Untitled UI Figma:](https://www.untitledui.com/react/resources/figma-files)** The world's largest Figma UI kit and design system.
+<br/>
+**[Untitled UI Icons:](https://www.untitledui.com/react/resources/icons)** A clean, consistent, and neutral icon library crafted specifically for modern UI design.
+<br/>
+**[Untitled UI file icons:](https://www.untitledui.com/react/resources/file-icons)** Free file format icons, designed specifically for modern web and UI design.
+<br/>
+**[Untitled UI flag icons:](https://www.untitledui.com/react/resources/flag-icons)** Free country flag icons, designed specifically for modern web and UI design.
+<br/>
+**[Untitled UI avatars:](https://www.untitledui.com/react/resources/avatars)** Free placeholder user avatars and profile pictures to use in your projects.
+<br/>
+**[Untitled UI logos:](https://www.untitledui.com/react/resources/logos)** Free fictional company logos to use in your projects.
+
+## License
+
+Untitled UI React open-source components are licensed under the MIT license, which means you can use them for free in unlimited commercial projects.
+
+> [!NOTE]
+> This license applies only to the starter kit and to the components included in this open-source repository. [Untitled UI React PRO](https://www.untitledui.com/react) includes hundreds more advanced UI components and page examples and is subject to a separate [license agreement](https://www.untitledui.com/license).
+
+[Untitled UI license agreement →](https://www.untitledui.com/license)
+
+[Frequently asked questions →](https://www.untitledui.com/faqs)
diff --git a/bun.lock b/bun.lock
new file mode 100644
index 0000000..87108e4
--- /dev/null
+++ b/bun.lock
@@ -0,0 +1,848 @@
+{
+  "lockfileVersion": 1,
+  "workspaces": {
+    "": {
+      "name": "untitledui-vite-starter-kit",
+      "dependencies": {
+        "@tailwindcss/typography": "^0.5.19",
+        "@tailwindcss/vite": "^4.1.18",
+        "@untitledui/file-icons": "^0.0.8",
+        "@untitledui/icons": "^0.0.21",
+        "input-otp": "^1.4.2",
+        "motion": "^12.29.0",
+        "qr-code-styling": "^1.9.2",
+        "react": "^19.2.3",
+        "react-aria": "^3.46.0",
+        "react-aria-components": "^1.15.1",
+        "react-dom": "^19.2.3",
+        "react-hotkeys-hook": "^5.2.3",
+        "react-router": "^7.13.0",
+        "tailwind-merge": "^3.4.0",
+        "tailwindcss": "^4.1.18",
+        "tailwindcss-animate": "^1.0.7",
+        "tailwindcss-react-aria-components": "^2.0.1",
+      },
+      "devDependencies": {
+        "@tailwindcss/postcss": "^4.1.18",
+        "@trivago/prettier-plugin-sort-imports": "^5.2.2",
+        "@types/node": "^24.10.9",
+        "@types/react": "^19.2.9",
+        "@types/react-dom": "^19.2.3",
+        "@vitejs/plugin-react-swc": "^4.2.2",
+        "globals": "^16.5.0",
+        "prettier": "^3.8.1",
+        "prettier-plugin-tailwindcss": "^0.6.14",
+        "typescript": "^5.9.3",
+        "typescript-eslint": "^8.53.1",
+        "vite": "^7.3.1",
+      },
+    },
+  },
+  "packages": {
+    "@alloc/quick-lru": ["@alloc/quick-lru@5.2.0", "", {}, "sha512-UrcABB+4bUrFABwbluTIBErXwvbsU/V7TZWfmbgJfbkwiBuziS9gxdODUyuiecfdGQ85jglMW6juS3+z5TsKLw=="],
+
+    "@babel/code-frame": ["@babel/code-frame@7.28.6", "", { "dependencies": { "@babel/helper-validator-identifier": "^7.28.5", "js-tokens": "^4.0.0", "picocolors": "^1.1.1" } }, "sha512-JYgintcMjRiCvS8mMECzaEn+m3PfoQiyqukOMCCVQtoJGYJw8j/8LBJEiqkHLkfwCcs74E3pbAUFNg7d9VNJ+Q=="],
+
+    "@babel/generator": ["@babel/generator@7.28.6", "", { "dependencies": { "@babel/parser": "^7.28.6", "@babel/types": "^7.28.6", "@jridgewell/gen-mapping": "^0.3.12", "@jridgewell/trace-mapping": "^0.3.28", "jsesc": "^3.0.2" } }, "sha512-lOoVRwADj8hjf7al89tvQ2a1lf53Z+7tiXMgpZJL3maQPDxh0DgLMN62B2MKUOFcoodBHLMbDM6WAbKgNy5Suw=="],
+
+    "@babel/helper-globals": ["@babel/helper-globals@7.28.0", "", {}, "sha512-+W6cISkXFa1jXsDEdYA8HeevQT/FULhxzR99pxphltZcVaugps53THCeiWA8SguxxpSp3gKPiuYfSWopkLQ4hw=="],
+
+    "@babel/helper-string-parser": ["@babel/helper-string-parser@7.27.1", "", {}, "sha512-qMlSxKbpRlAridDExk92nSobyDdpPijUq2DW6oDnUqd0iOGxmQjyqhMIihI9+zv4LPyZdRje2cavWPbCbWm3eA=="],
+
+    "@babel/helper-validator-identifier": ["@babel/helper-validator-identifier@7.28.5", "", {}, "sha512-qSs4ifwzKJSV39ucNjsvc6WVHs6b7S03sOh2OcHF9UHfVPqWWALUsNUVzhSBiItjRZoLHx7nIarVjqKVusUZ1Q=="],
+
+    "@babel/parser": ["@babel/parser@7.28.6", "", { "dependencies": { "@babel/types": "^7.28.6" }, "bin": "./bin/babel-parser.js" }, "sha512-TeR9zWR18BvbfPmGbLampPMW+uW1NZnJlRuuHso8i87QZNq2JRF9i6RgxRqtEq+wQGsS19NNTWr2duhnE49mfQ=="],
+
+    "@babel/template": ["@babel/template@7.28.6", "", { "dependencies": { "@babel/code-frame": "^7.28.6", "@babel/parser": "^7.28.6", "@babel/types": "^7.28.6" } }, "sha512-YA6Ma2KsCdGb+WC6UpBVFJGXL58MDA6oyONbjyF/+5sBgxY/dwkhLogbMT2GXXyU84/IhRw/2D1Os1B/giz+BQ=="],
+
+    "@babel/traverse": ["@babel/traverse@7.28.6", "", { "dependencies": { "@babel/code-frame": "^7.28.6", "@babel/generator": "^7.28.6", "@babel/helper-globals": "^7.28.0", "@babel/parser": "^7.28.6", "@babel/template": "^7.28.6", "@babel/types": "^7.28.6", "debug": "^4.3.1" } }, "sha512-fgWX62k02qtjqdSNTAGxmKYY/7FSL9WAS1o2Hu5+I5m9T0yxZzr4cnrfXQ/MX0rIifthCSs6FKTlzYbJcPtMNg=="],
+
+    "@babel/types": ["@babel/types@7.28.6", "", { "dependencies": { "@babel/helper-string-parser": "^7.27.1", "@babel/helper-validator-identifier": "^7.28.5" } }, "sha512-0ZrskXVEHSWIqZM/sQZ4EV3jZJXRkio/WCxaqKZP1g//CEWEPSfeZFcms4XeKBCHU0ZKnIkdJeU/kF+eRp5lBg=="],
+
+    "@esbuild/aix-ppc64": ["@esbuild/aix-ppc64@0.27.2", "", { "os": "aix", "cpu": "ppc64" }, "sha512-GZMB+a0mOMZs4MpDbj8RJp4cw+w1WV5NYD6xzgvzUJ5Ek2jerwfO2eADyI6ExDSUED+1X8aMbegahsJi+8mgpw=="],
+
+    "@esbuild/android-arm": ["@esbuild/android-arm@0.27.2", "", { "os": "android", "cpu": "arm" }, "sha512-DVNI8jlPa7Ujbr1yjU2PfUSRtAUZPG9I1RwW4F4xFB1Imiu2on0ADiI/c3td+KmDtVKNbi+nffGDQMfcIMkwIA=="],
+
+    "@esbuild/android-arm64": ["@esbuild/android-arm64@0.27.2", "", { "os": "android", "cpu": "arm64" }, "sha512-pvz8ZZ7ot/RBphf8fv60ljmaoydPU12VuXHImtAs0XhLLw+EXBi2BLe3OYSBslR4rryHvweW5gmkKFwTiFy6KA=="],
+
+    "@esbuild/android-x64": ["@esbuild/android-x64@0.27.2", "", { "os": "android", "cpu": "x64" }, "sha512-z8Ank4Byh4TJJOh4wpz8g2vDy75zFL0TlZlkUkEwYXuPSgX8yzep596n6mT7905kA9uHZsf/o2OJZubl2l3M7A=="],
+
+    "@esbuild/darwin-arm64": ["@esbuild/darwin-arm64@0.27.2", "", { "os": "darwin", "cpu": "arm64" }, "sha512-davCD2Zc80nzDVRwXTcQP/28fiJbcOwvdolL0sOiOsbwBa72kegmVU0Wrh1MYrbuCL98Omp5dVhQFWRKR2ZAlg=="],
+
+    "@esbuild/darwin-x64": ["@esbuild/darwin-x64@0.27.2", "", { "os": "darwin", "cpu": "x64" }, "sha512-ZxtijOmlQCBWGwbVmwOF/UCzuGIbUkqB1faQRf5akQmxRJ1ujusWsb3CVfk/9iZKr2L5SMU5wPBi1UWbvL+VQA=="],
+
+    "@esbuild/freebsd-arm64": ["@esbuild/freebsd-arm64@0.27.2", "", { "os": "freebsd", "cpu": "arm64" }, "sha512-lS/9CN+rgqQ9czogxlMcBMGd+l8Q3Nj1MFQwBZJyoEKI50XGxwuzznYdwcav6lpOGv5BqaZXqvBSiB/kJ5op+g=="],
+
+    "@esbuild/freebsd-x64": ["@esbuild/freebsd-x64@0.27.2", "", { "os": "freebsd", "cpu": "x64" }, "sha512-tAfqtNYb4YgPnJlEFu4c212HYjQWSO/w/h/lQaBK7RbwGIkBOuNKQI9tqWzx7Wtp7bTPaGC6MJvWI608P3wXYA=="],
+
+    "@esbuild/linux-arm": ["@esbuild/linux-arm@0.27.2", "", { "os": "linux", "cpu": "arm" }, "sha512-vWfq4GaIMP9AIe4yj1ZUW18RDhx6EPQKjwe7n8BbIecFtCQG4CfHGaHuh7fdfq+y3LIA2vGS/o9ZBGVxIDi9hw=="],
+
+    "@esbuild/linux-arm64": ["@esbuild/linux-arm64@0.27.2", "", { "os": "linux", "cpu": "arm64" }, "sha512-hYxN8pr66NsCCiRFkHUAsxylNOcAQaxSSkHMMjcpx0si13t1LHFphxJZUiGwojB1a/Hd5OiPIqDdXONia6bhTw=="],
+
+    "@esbuild/linux-ia32": ["@esbuild/linux-ia32@0.27.2", "", { "os": "linux", "cpu": "ia32" }, "sha512-MJt5BRRSScPDwG2hLelYhAAKh9imjHK5+NE/tvnRLbIqUWa+0E9N4WNMjmp/kXXPHZGqPLxggwVhz7QP8CTR8w=="],
+
+    "@esbuild/linux-loong64": ["@esbuild/linux-loong64@0.27.2", "", { "os": "linux", "cpu": "none" }, "sha512-lugyF1atnAT463aO6KPshVCJK5NgRnU4yb3FUumyVz+cGvZbontBgzeGFO1nF+dPueHD367a2ZXe1NtUkAjOtg=="],
+
+    "@esbuild/linux-mips64el": ["@esbuild/linux-mips64el@0.27.2", "", { "os": "linux", "cpu": "none" }, "sha512-nlP2I6ArEBewvJ2gjrrkESEZkB5mIoaTswuqNFRv/WYd+ATtUpe9Y09RnJvgvdag7he0OWgEZWhviS1OTOKixw=="],
+
+    "@esbuild/linux-ppc64": ["@esbuild/linux-ppc64@0.27.2", "", { "os": "linux", "cpu": "ppc64" }, "sha512-C92gnpey7tUQONqg1n6dKVbx3vphKtTHJaNG2Ok9lGwbZil6DrfyecMsp9CrmXGQJmZ7iiVXvvZH6Ml5hL6XdQ=="],
+
+    "@esbuild/linux-riscv64": ["@esbuild/linux-riscv64@0.27.2", "", { "os": "linux", "cpu": "none" }, "sha512-B5BOmojNtUyN8AXlK0QJyvjEZkWwy/FKvakkTDCziX95AowLZKR6aCDhG7LeF7uMCXEJqwa8Bejz5LTPYm8AvA=="],
+
+    "@esbuild/linux-s390x": ["@esbuild/linux-s390x@0.27.2", "", { "os": "linux", "cpu": "s390x" }, "sha512-p4bm9+wsPwup5Z8f4EpfN63qNagQ47Ua2znaqGH6bqLlmJ4bx97Y9JdqxgGZ6Y8xVTixUnEkoKSHcpRlDnNr5w=="],
+
+    "@esbuild/linux-x64": ["@esbuild/linux-x64@0.27.2", "", { "os": "linux", "cpu": "x64" }, "sha512-uwp2Tip5aPmH+NRUwTcfLb+W32WXjpFejTIOWZFw/v7/KnpCDKG66u4DLcurQpiYTiYwQ9B7KOeMJvLCu/OvbA=="],
+
+    "@esbuild/netbsd-arm64": ["@esbuild/netbsd-arm64@0.27.2", "", { "os": "none", "cpu": "arm64" }, "sha512-Kj6DiBlwXrPsCRDeRvGAUb/LNrBASrfqAIok+xB0LxK8CHqxZ037viF13ugfsIpePH93mX7xfJp97cyDuTZ3cw=="],
+
+    "@esbuild/netbsd-x64": ["@esbuild/netbsd-x64@0.27.2", "", { "os": "none", "cpu": "x64" }, "sha512-HwGDZ0VLVBY3Y+Nw0JexZy9o/nUAWq9MlV7cahpaXKW6TOzfVno3y3/M8Ga8u8Yr7GldLOov27xiCnqRZf0tCA=="],
+
+    "@esbuild/openbsd-arm64": ["@esbuild/openbsd-arm64@0.27.2", "", { "os": "openbsd", "cpu": "arm64" }, "sha512-DNIHH2BPQ5551A7oSHD0CKbwIA/Ox7+78/AWkbS5QoRzaqlev2uFayfSxq68EkonB+IKjiuxBFoV8ESJy8bOHA=="],
+
+    "@esbuild/openbsd-x64": ["@esbuild/openbsd-x64@0.27.2", "", { "os": "openbsd", "cpu": "x64" }, "sha512-/it7w9Nb7+0KFIzjalNJVR5bOzA9Vay+yIPLVHfIQYG/j+j9VTH84aNB8ExGKPU4AzfaEvN9/V4HV+F+vo8OEg=="],
+
+    "@esbuild/openharmony-arm64": ["@esbuild/openharmony-arm64@0.27.2", "", { "os": "none", "cpu": "arm64" }, "sha512-LRBbCmiU51IXfeXk59csuX/aSaToeG7w48nMwA6049Y4J4+VbWALAuXcs+qcD04rHDuSCSRKdmY63sruDS5qag=="],
+
+    "@esbuild/sunos-x64": ["@esbuild/sunos-x64@0.27.2", "", { "os": "sunos", "cpu": "x64" }, "sha512-kMtx1yqJHTmqaqHPAzKCAkDaKsffmXkPHThSfRwZGyuqyIeBvf08KSsYXl+abf5HDAPMJIPnbBfXvP2ZC2TfHg=="],
+
+    "@esbuild/win32-arm64": ["@esbuild/win32-arm64@0.27.2", "", { "os": "win32", "cpu": "arm64" }, "sha512-Yaf78O/B3Kkh+nKABUF++bvJv5Ijoy9AN1ww904rOXZFLWVc5OLOfL56W+C8F9xn5JQZa3UX6m+IktJnIb1Jjg=="],
+
+    "@esbuild/win32-ia32": ["@esbuild/win32-ia32@0.27.2", "", { "os": "win32", "cpu": "ia32" }, "sha512-Iuws0kxo4yusk7sw70Xa2E2imZU5HoixzxfGCdxwBdhiDgt9vX9VUCBhqcwY7/uh//78A1hMkkROMJq9l27oLQ=="],
+
+    "@esbuild/win32-x64": ["@esbuild/win32-x64@0.27.2", "", { "os": "win32", "cpu": "x64" }, "sha512-sRdU18mcKf7F+YgheI/zGf5alZatMUTKj/jNS6l744f9u3WFu4v7twcUI9vu4mknF4Y9aDlblIie0IM+5xxaqQ=="],
+
+    "@eslint-community/eslint-utils": ["@eslint-community/eslint-utils@4.9.1", "", { "dependencies": { "eslint-visitor-keys": "^3.4.3" }, "peerDependencies": { "eslint": "^6.0.0 || ^7.0.0 || >=8.0.0" } }, "sha512-phrYmNiYppR7znFEdqgfWHXR6NCkZEK7hwWDHZUjit/2/U0r6XvkDl0SYnoM51Hq7FhCGdLDT6zxCCOY1hexsQ=="],
+
+    "@eslint-community/regexpp": ["@eslint-community/regexpp@4.12.2", "", {}, "sha512-EriSTlt5OC9/7SXkRSCAhfSxxoSUgBm33OH+IkwbdpgoqsSsUg7y3uh+IICI/Qg4BBWr3U2i39RpmycbxMq4ew=="],
+
+    "@eslint/config-array": ["@eslint/config-array@0.21.1", "", { "dependencies": { "@eslint/object-schema": "^2.1.7", "debug": "^4.3.1", "minimatch": "^3.1.2" } }, "sha512-aw1gNayWpdI/jSYVgzN5pL0cfzU02GT3NBpeT/DXbx1/1x7ZKxFPd9bwrzygx/qiwIQiJ1sw/zD8qY/kRvlGHA=="],
+
+    "@eslint/config-helpers": ["@eslint/config-helpers@0.4.2", "", { "dependencies": { "@eslint/core": "^0.17.0" } }, "sha512-gBrxN88gOIf3R7ja5K9slwNayVcZgK6SOUORm2uBzTeIEfeVaIhOpCtTox3P6R7o2jLFwLFTLnC7kU/RGcYEgw=="],
+
+    "@eslint/core": ["@eslint/core@0.17.0", "", { "dependencies": { "@types/json-schema": "^7.0.15" } }, "sha512-yL/sLrpmtDaFEiUj1osRP4TI2MDz1AddJL+jZ7KSqvBuliN4xqYY54IfdN8qD8Toa6g1iloph1fxQNkjOxrrpQ=="],
+
+    "@eslint/eslintrc": ["@eslint/eslintrc@3.3.3", "", { "dependencies": { "ajv": "^6.12.4", "debug": "^4.3.2", "espree": "^10.0.1", "globals": "^14.0.0", "ignore": "^5.2.0", "import-fresh": "^3.2.1", "js-yaml": "^4.1.1", "minimatch": "^3.1.2", "strip-json-comments": "^3.1.1" } }, "sha512-Kr+LPIUVKz2qkx1HAMH8q1q6azbqBAsXJUxBl/ODDuVPX45Z9DfwB8tPjTi6nNZ8BuM3nbJxC5zCAg5elnBUTQ=="],
+
+    "@eslint/js": ["@eslint/js@9.39.2", "", {}, "sha512-q1mjIoW1VX4IvSocvM/vbTiveKC4k9eLrajNEuSsmjymSDEbpGddtpfOoN7YGAqBK3NG+uqo8ia4PDTt8buCYA=="],
+
+    "@eslint/object-schema": ["@eslint/object-schema@2.1.7", "", {}, "sha512-VtAOaymWVfZcmZbp6E2mympDIHvyjXs/12LqWYjVw6qjrfF+VK+fyG33kChz3nnK+SU5/NeHOqrTEHS8sXO3OA=="],
+
+    "@eslint/plugin-kit": ["@eslint/plugin-kit@0.4.1", "", { "dependencies": { "@eslint/core": "^0.17.0", "levn": "^0.4.1" } }, "sha512-43/qtrDUokr7LJqoF2c3+RInu/t4zfrpYdoSDfYyhg52rwLV6TnOvdG4fXm7IkSB3wErkcmJS9iEhjVtOSEjjA=="],
+
+    "@formatjs/ecma402-abstract": ["@formatjs/ecma402-abstract@2.3.6", "", { "dependencies": { "@formatjs/fast-memoize": "2.2.7", "@formatjs/intl-localematcher": "0.6.2", "decimal.js": "^10.4.3", "tslib": "^2.8.0" } }, "sha512-HJnTFeRM2kVFVr5gr5kH1XP6K0JcJtE7Lzvtr3FS/so5f1kpsqqqxy5JF+FRaO6H2qmcMfAUIox7AJteieRtVw=="],
+
+    "@formatjs/fast-memoize": ["@formatjs/fast-memoize@2.2.7", "", { "dependencies": { "tslib": "^2.8.0" } }, "sha512-Yabmi9nSvyOMrlSeGGWDiH7rf3a7sIwplbvo/dlz9WCIjzIQAfy1RMf4S0X3yG724n5Ghu2GmEl5NJIV6O9sZQ=="],
+
+    "@formatjs/icu-messageformat-parser": ["@formatjs/icu-messageformat-parser@2.11.4", "", { "dependencies": { "@formatjs/ecma402-abstract": "2.3.6", "@formatjs/icu-skeleton-parser": "1.8.16", "tslib": "^2.8.0" } }, "sha512-7kR78cRrPNB4fjGFZg3Rmj5aah8rQj9KPzuLsmcSn4ipLXQvC04keycTI1F7kJYDwIXtT2+7IDEto842CfZBtw=="],
+
+    "@formatjs/icu-skeleton-parser": ["@formatjs/icu-skeleton-parser@1.8.16", "", { "dependencies": { "@formatjs/ecma402-abstract": "2.3.6", "tslib": "^2.8.0" } }, "sha512-H13E9Xl+PxBd8D5/6TVUluSpxGNvFSlN/b3coUp0e0JpuWXXnQDiavIpY3NnvSp4xhEMoXyyBvVfdFX8jglOHQ=="],
+
+    "@formatjs/intl-localematcher": ["@formatjs/intl-localematcher@0.6.2", "", { "dependencies": { "tslib": "^2.8.0" } }, "sha512-XOMO2Hupl0wdd172Y06h6kLpBz6Dv+J4okPLl4LPtzbr8f66WbIoy4ev98EBuZ6ZK4h5ydTN6XneT4QVpD7cdA=="],
+
+    "@humanfs/core": ["@humanfs/core@0.19.1", "", {}, "sha512-5DyQ4+1JEUzejeK1JGICcideyfUbGixgS9jNgex5nqkW+cY7WZhxBigmieN5Qnw9ZosSNVC9KQKyb+GUaGyKUA=="],
+
+    "@humanfs/node": ["@humanfs/node@0.16.7", "", { "dependencies": { "@humanfs/core": "^0.19.1", "@humanwhocodes/retry": "^0.4.0" } }, "sha512-/zUx+yOsIrG4Y43Eh2peDeKCxlRt/gET6aHfaKpuq267qXdYDFViVHfMaLyygZOnl0kGWxFIgsBy8QFuTLUXEQ=="],
+
+    "@humanwhocodes/module-importer": ["@humanwhocodes/module-importer@1.0.1", "", {}, "sha512-bxveV4V8v5Yb4ncFTT3rPSgZBOpCkjfK0y4oVVVJwIuDVBRMDXrPyXRL988i5ap9m9bnyEEjWfm5WkBmtffLfA=="],
+
+    "@humanwhocodes/retry": ["@humanwhocodes/retry@0.4.3", "", {}, "sha512-bV0Tgo9K4hfPCek+aMAn81RppFKv2ySDQeMoSZuvTASywNTnVJCArCZE2FWqpvIatKu7VMRLWlR1EazvVhDyhQ=="],
+
+    "@internationalized/date": ["@internationalized/date@3.11.0", "", { "dependencies": { "@swc/helpers": "^0.5.0" } }, "sha512-BOx5huLAWhicM9/ZFs84CzP+V3gBW6vlpM02yzsdYC7TGlZJX1OJiEEHcSayF00Z+3jLlm4w79amvSt6RqKN3Q=="],
+
+    "@internationalized/message": ["@internationalized/message@3.1.8", "", { "dependencies": { "@swc/helpers": "^0.5.0", "intl-messageformat": "^10.1.0" } }, "sha512-Rwk3j/TlYZhn3HQ6PyXUV0XP9Uv42jqZGNegt0BXlxjE6G3+LwHjbQZAGHhCnCPdaA6Tvd3ma/7QzLlLkJxAWA=="],
+
+    "@internationalized/number": ["@internationalized/number@3.6.5", "", { "dependencies": { "@swc/helpers": "^0.5.0" } }, "sha512-6hY4Kl4HPBvtfS62asS/R22JzNNy8vi/Ssev7x6EobfCp+9QIB2hKvI2EtbdJ0VSQacxVNtqhE/NmF/NZ0gm6g=="],
+
+    "@internationalized/string": ["@internationalized/string@3.2.7", "", { "dependencies": { "@swc/helpers": "^0.5.0" } }, "sha512-D4OHBjrinH+PFZPvfCXvG28n2LSykWcJ7GIioQL+ok0LON15SdfoUssoHzzOUmVZLbRoREsQXVzA6r8JKsbP6A=="],
+
+    "@jridgewell/gen-mapping": ["@jridgewell/gen-mapping@0.3.13", "", { "dependencies": { "@jridgewell/sourcemap-codec": "^1.5.0", "@jridgewell/trace-mapping": "^0.3.24" } }, "sha512-2kkt/7niJ6MgEPxF0bYdQ6etZaA+fQvDcLKckhy1yIQOzaoKjBBjSj63/aLVjYE3qhRt5dvM+uUyfCg6UKCBbA=="],
+
+    "@jridgewell/remapping": ["@jridgewell/remapping@2.3.5", "", { "dependencies": { "@jridgewell/gen-mapping": "^0.3.5", "@jridgewell/trace-mapping": "^0.3.24" } }, "sha512-LI9u/+laYG4Ds1TDKSJW2YPrIlcVYOwi2fUC6xB43lueCjgxV4lffOCZCtYFiH6TNOX+tQKXx97T4IKHbhyHEQ=="],
+
+    "@jridgewell/resolve-uri": ["@jridgewell/resolve-uri@3.1.2", "", {}, "sha512-bRISgCIjP20/tbWSPWMEi54QVPRZExkuD9lJL+UIxUKtwVJA8wW1Trb1jMs1RFXo1CBTNZ/5hpC9QvmKWdopKw=="],
+
+    "@jridgewell/sourcemap-codec": ["@jridgewell/sourcemap-codec@1.5.5", "", {}, "sha512-cYQ9310grqxueWbl+WuIUIaiUaDcj7WOq5fVhEljNVgRfOUhY9fy2zTvfoqWsnebh8Sl70VScFbICvJnLKB0Og=="],
+
+    "@jridgewell/trace-mapping": ["@jridgewell/trace-mapping@0.3.31", "", { "dependencies": { "@jridgewell/resolve-uri": "^3.1.0", "@jridgewell/sourcemap-codec": "^1.4.14" } }, "sha512-zzNR+SdQSDJzc8joaeP8QQoCQr8NuYx2dIIytl1QeBEZHJ9uW6hebsrYgbz8hJwUQao3TWCMtmfV8Nu1twOLAw=="],
+
+    "@react-aria/autocomplete": ["@react-aria/autocomplete@3.0.0-rc.5", "", { "dependencies": { "@react-aria/combobox": "^3.14.2", "@react-aria/focus": "^3.21.4", "@react-aria/i18n": "^3.12.15", "@react-aria/interactions": "^3.27.0", "@react-aria/listbox": "^3.15.2", "@react-aria/searchfield": "^3.8.11", "@react-aria/textfield": "^3.18.4", "@react-aria/utils": "^3.33.0", "@react-stately/autocomplete": "3.0.0-beta.4", "@react-stately/combobox": "^3.12.2", "@react-types/autocomplete": "3.0.0-alpha.37", "@react-types/button": "^3.15.0", "@react-types/shared": "^3.33.0", "@swc/helpers": "^0.5.0" }, "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" } }, "sha512-qcGr/ZlSJxw78QtXB29MnvCwGZKlJ5FGfSICjaX/KIg4ONGFR/u4QjP/axA+vhlPa9Ik7BNeikWQriTcYrkbhw=="],
+
+    "@react-aria/breadcrumbs": ["@react-aria/breadcrumbs@3.5.31", "", { "dependencies": { "@react-aria/i18n": "^3.12.15", "@react-aria/link": "^3.8.8", "@react-aria/utils": "^3.33.0", "@react-types/breadcrumbs": "^3.7.18", "@react-types/shared": "^3.33.0", "@swc/helpers": "^0.5.0" }, "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" } }, "sha512-j8F2NMHFGT/n3alfFKdO4bvrY/ymtdL04GdclY7Vc6zOmCnWoEZ2UA0sFuV7Rk9dOL8fAtYV1kMD1ZRO/EMcGA=="],
+
+    "@react-aria/button": ["@react-aria/button@3.14.4", "", { "dependencies": { "@react-aria/interactions": "^3.27.0", "@react-aria/toolbar": "3.0.0-beta.23", "@react-aria/utils": "^3.33.0", "@react-stately/toggle": "^3.9.4", "@react-types/button": "^3.15.0", "@react-types/shared": "^3.33.0", "@swc/helpers": "^0.5.0" }, "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" } }, "sha512-6mTPiSSQhELnWlnYJ1Tm1B0VL1GGKAs2PGAY3ZGbPGQPPDc6Wu82yIhuAO8TTFJrXkwAiqjQawgDLil/yB0V7Q=="],
+
+    "@react-aria/calendar": ["@react-aria/calendar@3.9.4", "", { "dependencies": { "@internationalized/date": "^3.11.0", "@react-aria/i18n": "^3.12.15", "@react-aria/interactions": "^3.27.0", "@react-aria/live-announcer": "^3.4.4", "@react-aria/utils": "^3.33.0", "@react-stately/calendar": "^3.9.2", "@react-types/button": "^3.15.0", "@react-types/calendar": "^3.8.2", "@react-types/shared": "^3.33.0", "@swc/helpers": "^0.5.0" }, "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" } }, "sha512-0BvU8cj6uHn622Vp8Xd21XxXtvp3Bh4Yk1pHloqDNmUvvdBN+ol3Xsm5gG3XKKkZ+6CCEi6asCbLaEg3SZSbyg=="],
+
+    "@react-aria/checkbox": ["@react-aria/checkbox@3.16.4", "", { "dependencies": { "@react-aria/form": "^3.1.4", "@react-aria/interactions": "^3.27.0", "@react-aria/label": "^3.7.24", "@react-aria/toggle": "^3.12.4", "@react-aria/utils": "^3.33.0", "@react-stately/checkbox": "^3.7.4", "@react-stately/form": "^3.2.3", "@react-stately/toggle": "^3.9.4", "@react-types/checkbox": "^3.10.3", "@react-types/shared": "^3.33.0", "@swc/helpers": "^0.5.0" }, "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" } }, "sha512-FcZj6/f27mNp2+G5yxyOMRZbZQjJ1cuWvo0PPnnZ4ybSPUmSzI4uUZBk1wvsJVP9F9n+J2hZuYVCaN8pyzLweA=="],
+
+    "@react-aria/collections": ["@react-aria/collections@3.0.2", "", { "dependencies": { "@react-aria/interactions": "^3.27.0", "@react-aria/ssr": "^3.9.10", "@react-aria/utils": "^3.33.0", "@react-types/shared": "^3.33.0", "@swc/helpers": "^0.5.0", "use-sync-external-store": "^1.6.0" }, "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" } }, "sha512-5GV0fj1bvfdztHozlZQ1nzdmcZOAOdZ5BhwrSyuHbK5ptmQrpAoWUK+VTQlxkAfyn5i6niaaN/llP1v3RgEemw=="],
+
+    "@react-aria/color": ["@react-aria/color@3.1.4", "", { "dependencies": { "@react-aria/i18n": "^3.12.15", "@react-aria/interactions": "^3.27.0", "@react-aria/numberfield": "^3.12.4", "@react-aria/slider": "^3.8.4", "@react-aria/spinbutton": "^3.7.1", "@react-aria/textfield": "^3.18.4", "@react-aria/utils": "^3.33.0", "@react-aria/visually-hidden": "^3.8.30", "@react-stately/color": "^3.9.4", "@react-stately/form": "^3.2.3", "@react-types/color": "^3.1.3", "@react-types/shared": "^3.33.0", "@swc/helpers": "^0.5.0" }, "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" } }, "sha512-LNFo0A9EEn2HZ8O/hASschH++M+krfezcp01XPv0/2ZQJ5b5u7VvJlUOEXtPsD4i9+BzvkSAEoVUXdlJie9V2Q=="],
+
+    "@react-aria/combobox": ["@react-aria/combobox@3.14.2", "", { "dependencies": { "@react-aria/focus": "^3.21.4", "@react-aria/i18n": "^3.12.15", "@react-aria/listbox": "^3.15.2", "@react-aria/live-announcer": "^3.4.4", "@react-aria/menu": "^3.20.0", "@react-aria/overlays": "^3.31.1", "@react-aria/selection": "^3.27.1", "@react-aria/textfield": "^3.18.4", "@react-aria/utils": "^3.33.0", "@react-stately/collections": "^3.12.9", "@react-stately/combobox": "^3.12.2", "@react-stately/form": "^3.2.3", "@react-types/button": "^3.15.0", "@react-types/combobox": "^3.13.11", "@react-types/shared": "^3.33.0", "@swc/helpers": "^0.5.0" }, "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" } }, "sha512-qwBeb8cMgK3xwrvXYHPtcphduD/k+oTcU18JHPvEO2kmR32knB33H81C2/Zoh4x86zTDJXaEtPscXBWuQ/M7AQ=="],
+
+    "@react-aria/datepicker": ["@react-aria/datepicker@3.16.0", "", { "dependencies": { "@internationalized/date": "^3.11.0", "@internationalized/number": "^3.6.5", "@internationalized/string": "^3.2.7", "@react-aria/focus": "^3.21.4", "@react-aria/form": "^3.1.4", "@react-aria/i18n": "^3.12.15", "@react-aria/interactions": "^3.27.0", "@react-aria/label": "^3.7.24", "@react-aria/spinbutton": "^3.7.1", "@react-aria/utils": "^3.33.0", "@react-stately/datepicker": "^3.16.0", "@react-stately/form": "^3.2.3", "@react-types/button": "^3.15.0", "@react-types/calendar": "^3.8.2", "@react-types/datepicker": "^3.13.4", "@react-types/dialog": "^3.5.23", "@react-types/shared": "^3.33.0", "@swc/helpers": "^0.5.0" }, "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" } }, "sha512-QynYHIHE+wvuGopl/k05tphmDpykpfZ3l3eKnUfGrqvAYJEeCOyS0qoMlw7Vq3NscMLFbJI6ajqBmlmtgFNiSA=="],
+
+    "@react-aria/dialog": ["@react-aria/dialog@3.5.33", "", { "dependencies": { "@react-aria/interactions": "^3.27.0", "@react-aria/overlays": "^3.31.1", "@react-aria/utils": "^3.33.0", "@react-types/dialog": "^3.5.23", "@react-types/shared": "^3.33.0", "@swc/helpers": "^0.5.0" }, "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" } }, "sha512-C5FpLAMJU6gQU8gztWKlEJ2A0k/JKl0YijNOv3Lizk+vUdF5njROSrmFs16bY5Hd6ycmsK9x/Pqkq3m/OpNFXA=="],
+
+    "@react-aria/disclosure": ["@react-aria/disclosure@3.1.2", "", { "dependencies": { "@react-aria/ssr": "^3.9.10", "@react-aria/utils": "^3.33.0", "@react-stately/disclosure": "^3.0.10", "@react-types/button": "^3.15.0", "@swc/helpers": "^0.5.0" }, "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" } }, "sha512-UQ/CmWcdcROfRTMtvfsnYHrEsPPNbwZifZ/UErQpbvU4kzal2N+PpuP3+kpdf4G7TeMt+uJ8S9dLzyFVijOj9A=="],
+
+    "@react-aria/dnd": ["@react-aria/dnd@3.11.5", "", { "dependencies": { "@internationalized/string": "^3.2.7", "@react-aria/i18n": "^3.12.15", "@react-aria/interactions": "^3.27.0", "@react-aria/live-announcer": "^3.4.4", "@react-aria/overlays": "^3.31.1", "@react-aria/utils": "^3.33.0", "@react-stately/collections": "^3.12.9", "@react-stately/dnd": "^3.7.3", "@react-types/button": "^3.15.0", "@react-types/shared": "^3.33.0", "@swc/helpers": "^0.5.0" }, "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" } }, "sha512-3IGrABfK8Cf6/b/uEmGEDGeubWKMUK3umWunF/tdkWBnIaxpdj4gRkWFMw7siWQYnqir6AN567nrWXtHFcLKsA=="],
+
+    "@react-aria/focus": ["@react-aria/focus@3.21.4", "", { "dependencies": { "@react-aria/interactions": "^3.27.0", "@react-aria/utils": "^3.33.0", "@react-types/shared": "^3.33.0", "@swc/helpers": "^0.5.0", "clsx": "^2.0.0" }, "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" } }, "sha512-6gz+j9ip0/vFRTKJMl3R30MHopn4i19HqqLfSQfElxJD+r9hBnYG1Q6Wd/kl/WRR1+CALn2F+rn06jUnf5sT8Q=="],
+
+    "@react-aria/form": ["@react-aria/form@3.1.4", "", { "dependencies": { "@react-aria/interactions": "^3.27.0", "@react-aria/utils": "^3.33.0", "@react-stately/form": "^3.2.3", "@react-types/shared": "^3.33.0", "@swc/helpers": "^0.5.0" }, "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" } }, "sha512-GjPS85cE/34zal3vs6MOi7FxUsXwbxN4y6l1LFor2g92UK97gVobp238f3xdMW2T8IuaWGcnHeYFg+cjiZ51pQ=="],
+
+    "@react-aria/grid": ["@react-aria/grid@3.14.7", "", { "dependencies": { "@react-aria/focus": "^3.21.4", "@react-aria/i18n": "^3.12.15", "@react-aria/interactions": "^3.27.0", "@react-aria/live-announcer": "^3.4.4", "@react-aria/selection": "^3.27.1", "@react-aria/utils": "^3.33.0", "@react-stately/collections": "^3.12.9", "@react-stately/grid": "^3.11.8", "@react-stately/selection": "^3.20.8", "@react-types/checkbox": "^3.10.3", "@react-types/grid": "^3.3.7", "@react-types/shared": "^3.33.0", "@swc/helpers": "^0.5.0" }, "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" } }, "sha512-8eaJThNHUs75Xf4+FQC2NKQtTOVYkkDdA8VbfbqG06oYDAn7ETb1yhbwoqh1jOv7MezCNkYjyFe4ADsz2rBVcw=="],
+
+    "@react-aria/gridlist": ["@react-aria/gridlist@3.14.3", "", { "dependencies": { "@react-aria/focus": "^3.21.4", "@react-aria/grid": "^3.14.7", "@react-aria/i18n": "^3.12.15", "@react-aria/interactions": "^3.27.0", "@react-aria/selection": "^3.27.1", "@react-aria/utils": "^3.33.0", "@react-stately/list": "^3.13.3", "@react-stately/tree": "^3.9.5", "@react-types/shared": "^3.33.0", "@swc/helpers": "^0.5.0" }, "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" } }, "sha512-t3nr29nU5jRG9MdWe9aiMd02V8o0pmidLU/7c4muWAu7hEH+IYdeDthGDdXL9tXAom/oQ+6yt6sOfLxpsVNmGA=="],
+
+    "@react-aria/i18n": ["@react-aria/i18n@3.12.15", "", { "dependencies": { "@internationalized/date": "^3.11.0", "@internationalized/message": "^3.1.8", "@internationalized/number": "^3.6.5", "@internationalized/string": "^3.2.7", "@react-aria/ssr": "^3.9.10", "@react-aria/utils": "^3.33.0", "@react-types/shared": "^3.33.0", "@swc/helpers": "^0.5.0" }, "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" } }, "sha512-3CrAN7ORVHrckvTmbPq76jFZabqq+rScosGT5+ElircJ5rF5+JcdT99Hp5Xg6R10jk74e8G3xiqdYsUd+7iJMA=="],
+
+    "@react-aria/interactions": ["@react-aria/interactions@3.27.0", "", { "dependencies": { "@react-aria/ssr": "^3.9.10", "@react-aria/utils": "^3.33.0", "@react-stately/flags": "^3.1.2", "@react-types/shared": "^3.33.0", "@swc/helpers": "^0.5.0" }, "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" } }, "sha512-D27pOy+0jIfHK60BB26AgqjjRFOYdvVSkwC31b2LicIzRCSPOSP06V4gMHuGmkhNTF4+YWDi1HHYjxIvMeiSlA=="],
+
+    "@react-aria/label": ["@react-aria/label@3.7.24", "", { "dependencies": { "@react-aria/utils": "^3.33.0", "@react-types/shared": "^3.33.0", "@swc/helpers": "^0.5.0" }, "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" } }, "sha512-lcJbUy6xyicWKNgzfrXksrJ2CeCST2rDxGAvHOmUxSbFOm26kK710DjaFvtO4tICWh/TKW5mC3sm77soNcVUGA=="],
+
+    "@react-aria/landmark": ["@react-aria/landmark@3.0.9", "", { "dependencies": { "@react-aria/utils": "^3.33.0", "@react-types/shared": "^3.33.0", "@swc/helpers": "^0.5.0", "use-sync-external-store": "^1.6.0" }, "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" } }, "sha512-YYyluDBCXupnMh91ccE5g27fczjYmzPebHqTkVYjH4B6k45pOoqsMmWBCMnOTl0qOCeioI+daT8W0MamAZzoSw=="],
+
+    "@react-aria/link": ["@react-aria/link@3.8.8", "", { "dependencies": { "@react-aria/interactions": "^3.27.0", "@react-aria/utils": "^3.33.0", "@react-types/link": "^3.6.6", "@react-types/shared": "^3.33.0", "@swc/helpers": "^0.5.0" }, "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" } }, "sha512-hxQEvo5rrn2C0GOSwB/tROe+y//dyhmyXGbm8arDy6WF5Mj0wcjjrAu0/dhGYBqoltJa16iIEvs52xgzOC+f+Q=="],
+
+    "@react-aria/listbox": ["@react-aria/listbox@3.15.2", "", { "dependencies": { "@react-aria/interactions": "^3.27.0", "@react-aria/label": "^3.7.24", "@react-aria/selection": "^3.27.1", "@react-aria/utils": "^3.33.0", "@react-stately/collections": "^3.12.9", "@react-stately/list": "^3.13.3", "@react-types/listbox": "^3.7.5", "@react-types/shared": "^3.33.0", "@swc/helpers": "^0.5.0" }, "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" } }, "sha512-xcrgSediV8MaVmsuDrDPmWywF82/HOv+H+Y/dgr6GLCWl0XDj5Q7PyAhDzUsYdZNIne3B9muGh6IQc3HdkgWqg=="],
+
+    "@react-aria/live-announcer": ["@react-aria/live-announcer@3.4.4", "", { "dependencies": { "@swc/helpers": "^0.5.0" } }, "sha512-PTTBIjNRnrdJOIRTDGNifY2d//kA7GUAwRFJNOEwSNG4FW+Bq9awqLiflw0JkpyB0VNIwou6lqKPHZVLsGWOXA=="],
+
+    "@react-aria/menu": ["@react-aria/menu@3.20.0", "", { "dependencies": { "@react-aria/focus": "^3.21.4", "@react-aria/i18n": "^3.12.15", "@react-aria/interactions": "^3.27.0", "@react-aria/overlays": "^3.31.1", "@react-aria/selection": "^3.27.1", "@react-aria/utils": "^3.33.0", "@react-stately/collections": "^3.12.9", "@react-stately/menu": "^3.9.10", "@react-stately/selection": "^3.20.8", "@react-stately/tree": "^3.9.5", "@react-types/button": "^3.15.0", "@react-types/menu": "^3.10.6", "@react-types/shared": "^3.33.0", "@swc/helpers": "^0.5.0" }, "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" } }, "sha512-BAsHuf7kTVmawNUkTUd5RB3ZvL6DQQT7hgZ2cYKd/1ZwYq4KO2wWGYdzyTOtK1qimZL0eyHyQwDYv4dNKBH4gw=="],
+
+    "@react-aria/meter": ["@react-aria/meter@3.4.29", "", { "dependencies": { "@react-aria/progress": "^3.4.29", "@react-types/meter": "^3.4.14", "@react-types/shared": "^3.33.0", "@swc/helpers": "^0.5.0" }, "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" } }, "sha512-XAhJf8LlYQl+QQXqtpWvzjlrT8MZKEG6c8N3apC5DONgSKlCwfmDm4laGEJPqtuz3QGiOopsfSfyTFYHjWsfZw=="],
+
+    "@react-aria/numberfield": ["@react-aria/numberfield@3.12.4", "", { "dependencies": { "@react-aria/i18n": "^3.12.15", "@react-aria/interactions": "^3.27.0", "@react-aria/spinbutton": "^3.7.1", "@react-aria/textfield": "^3.18.4", "@react-aria/utils": "^3.33.0", "@react-stately/form": "^3.2.3", "@react-stately/numberfield": "^3.10.4", "@react-types/button": "^3.15.0", "@react-types/numberfield": "^3.8.17", "@react-types/shared": "^3.33.0", "@swc/helpers": "^0.5.0" }, "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" } }, "sha512-TgKBjKOjyURzbqNR2wF4tSFmQKNK5DqE4QZSlQxpYYo1T6zuztkh+oTOUZ4IWCJymL5qLtuPfGHCZbR7B+DN2w=="],
+
+    "@react-aria/overlays": ["@react-aria/overlays@3.31.1", "", { "dependencies": { "@react-aria/focus": "^3.21.4", "@react-aria/i18n": "^3.12.15", "@react-aria/interactions": "^3.27.0", "@react-aria/ssr": "^3.9.10", "@react-aria/utils": "^3.33.0", "@react-aria/visually-hidden": "^3.8.30", "@react-stately/overlays": "^3.6.22", "@react-types/button": "^3.15.0", "@react-types/overlays": "^3.9.3", "@react-types/shared": "^3.33.0", "@swc/helpers": "^0.5.0" }, "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" } }, "sha512-U5BedzcXU97U5PWm4kIPnNoVpAs9KjTYfbkGx33vapmTVpGYhQyYW9eg6zW2E8ZKsyFJtQ/jkQnbWGen97aHSQ=="],
+
+    "@react-aria/progress": ["@react-aria/progress@3.4.29", "", { "dependencies": { "@react-aria/i18n": "^3.12.15", "@react-aria/label": "^3.7.24", "@react-aria/utils": "^3.33.0", "@react-types/progress": "^3.5.17", "@react-types/shared": "^3.33.0", "@swc/helpers": "^0.5.0" }, "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" } }, "sha512-orSaaFLX5LdD9UyxgBrmP1J/ivyEFX+5v4ENPQM5RH5+Hl+0OJa+8ozI0AfVKBqCYc89BOZfG7kzi7wFHACZcQ=="],
+
+    "@react-aria/radio": ["@react-aria/radio@3.12.4", "", { "dependencies": { "@react-aria/focus": "^3.21.4", "@react-aria/form": "^3.1.4", "@react-aria/i18n": "^3.12.15", "@react-aria/interactions": "^3.27.0", "@react-aria/label": "^3.7.24", "@react-aria/utils": "^3.33.0", "@react-stately/radio": "^3.11.4", "@react-types/radio": "^3.9.3", "@react-types/shared": "^3.33.0", "@swc/helpers": "^0.5.0" }, "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" } }, "sha512-2sjBAE8++EtAAfjwPdrqEVswbzR4Mvcy4n8SvwUxTo02yESa9nolBzCSdAUFUmhrNj3MiMA+zLxQ+KACfUjJOg=="],
+
+    "@react-aria/searchfield": ["@react-aria/searchfield@3.8.11", "", { "dependencies": { "@react-aria/i18n": "^3.12.15", "@react-aria/textfield": "^3.18.4", "@react-aria/utils": "^3.33.0", "@react-stately/searchfield": "^3.5.18", "@react-types/button": "^3.15.0", "@react-types/searchfield": "^3.6.7", "@react-types/shared": "^3.33.0", "@swc/helpers": "^0.5.0" }, "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" } }, "sha512-5R0prEC+jRFwPeJsK6G4RN8QG3V/+EaIuw9p79G1gFD+1dY81ZakiZIIJaLWRyO7AzYBGyC/QFHtz0m3KGQT/Q=="],
+
+    "@react-aria/select": ["@react-aria/select@3.17.2", "", { "dependencies": { "@react-aria/form": "^3.1.4", "@react-aria/i18n": "^3.12.15", "@react-aria/interactions": "^3.27.0", "@react-aria/label": "^3.7.24", "@react-aria/listbox": "^3.15.2", "@react-aria/menu": "^3.20.0", "@react-aria/selection": "^3.27.1", "@react-aria/utils": "^3.33.0", "@react-aria/visually-hidden": "^3.8.30", "@react-stately/select": "^3.9.1", "@react-types/button": "^3.15.0", "@react-types/select": "^3.12.1", "@react-types/shared": "^3.33.0", "@swc/helpers": "^0.5.0" }, "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" } }, "sha512-oMpHStyMluRf67qxrzH5Qfcvw6ETQgZT1Qw2xvAxQVRd5IBb0PfzZS7TGiULOcMLqXAUOC28O/ycUGrGRKLarg=="],
+
+    "@react-aria/selection": ["@react-aria/selection@3.27.1", "", { "dependencies": { "@react-aria/focus": "^3.21.4", "@react-aria/i18n": "^3.12.15", "@react-aria/interactions": "^3.27.0", "@react-aria/utils": "^3.33.0", "@react-stately/selection": "^3.20.8", "@react-types/shared": "^3.33.0", "@swc/helpers": "^0.5.0" }, "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" } }, "sha512-8WQ4AtWiBnk9UEeYkqpH12dd8KQW2aFbNZvM4sDfLtz7K7HWyY/MkqMe/snk9IcoSa7t4zr0bnoZJcWSGgn2PQ=="],
+
+    "@react-aria/separator": ["@react-aria/separator@3.4.15", "", { "dependencies": { "@react-aria/utils": "^3.33.0", "@react-types/shared": "^3.33.0", "@swc/helpers": "^0.5.0" }, "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" } }, "sha512-A1aPQhCaE8XeelNJYPjHtA2uh921ROh8PNiZI4o62x80wcziRoctN5PAtNHJAx7VKvX66A8ZVGbOqb7iqS3J5Q=="],
+
+    "@react-aria/slider": ["@react-aria/slider@3.8.4", "", { "dependencies": { "@react-aria/i18n": "^3.12.15", "@react-aria/interactions": "^3.27.0", "@react-aria/label": "^3.7.24", "@react-aria/utils": "^3.33.0", "@react-stately/slider": "^3.7.4", "@react-types/shared": "^3.33.0", "@react-types/slider": "^3.8.3", "@swc/helpers": "^0.5.0" }, "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" } }, "sha512-/FYCgK1qVqaz2VCDfR2x4BjyJ8lmWg1v8//+WIwKdIu4cz0KUs+U3yx0w1vp676RoERp3OEvkT3tb+/jHQ1hjA=="],
+
+    "@react-aria/spinbutton": ["@react-aria/spinbutton@3.7.1", "", { "dependencies": { "@react-aria/i18n": "^3.12.15", "@react-aria/live-announcer": "^3.4.4", "@react-aria/utils": "^3.33.0", "@react-types/button": "^3.15.0", "@react-types/shared": "^3.33.0", "@swc/helpers": "^0.5.0" }, "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" } }, "sha512-Nisah6yzxOC6983u/5ck0w+OQoa3sRKmpDvWpTEX0g2+ZIABOl8ttdSd65XKtxXmXHdK8X1zmrfeGOBfBR3sKA=="],
+
+    "@react-aria/ssr": ["@react-aria/ssr@3.9.10", "", { "dependencies": { "@swc/helpers": "^0.5.0" }, "peerDependencies": { "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1" } }, "sha512-hvTm77Pf+pMBhuBm760Li0BVIO38jv1IBws1xFm1NoL26PU+fe+FMW5+VZWyANR6nYL65joaJKZqOdTQMkO9IQ=="],
+
+    "@react-aria/switch": ["@react-aria/switch@3.7.10", "", { "dependencies": { "@react-aria/toggle": "^3.12.4", "@react-stately/toggle": "^3.9.4", "@react-types/shared": "^3.33.0", "@react-types/switch": "^3.5.16", "@swc/helpers": "^0.5.0" }, "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" } }, "sha512-j7nrYnqX6H9J8GuqD0kdMECUozeqxeG19A2nsvfaTx3//Q7RhgIR9fqhQdVHW/wgraTlEHNH6AhDzmomBg0TNw=="],
+
+    "@react-aria/table": ["@react-aria/table@3.17.10", "", { "dependencies": { "@react-aria/focus": "^3.21.4", "@react-aria/grid": "^3.14.7", "@react-aria/i18n": "^3.12.15", "@react-aria/interactions": "^3.27.0", "@react-aria/live-announcer": "^3.4.4", "@react-aria/utils": "^3.33.0", "@react-aria/visually-hidden": "^3.8.30", "@react-stately/collections": "^3.12.9", "@react-stately/flags": "^3.1.2", "@react-stately/table": "^3.15.3", "@react-types/checkbox": "^3.10.3", "@react-types/grid": "^3.3.7", "@react-types/shared": "^3.33.0", "@react-types/table": "^3.13.5", "@swc/helpers": "^0.5.0" }, "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" } }, "sha512-xdEeyOzuETkOfAHhZrX7HOIwMUsCUr4rbPvHqdcNqg7Ngla2ck9iulZNAyvOPfFwELuBEd2rz1I9TYRQ2OzSQQ=="],
+
+    "@react-aria/tabs": ["@react-aria/tabs@3.11.0", "", { "dependencies": { "@react-aria/focus": "^3.21.4", "@react-aria/i18n": "^3.12.15", "@react-aria/selection": "^3.27.1", "@react-aria/utils": "^3.33.0", "@react-stately/tabs": "^3.8.8", "@react-types/shared": "^3.33.0", "@react-types/tabs": "^3.3.21", "@swc/helpers": "^0.5.0" }, "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" } }, "sha512-9Gwo118GHrMXSyteCZL1L/LHLVlGSYkhGgiTL3e/UgnYjHfEfDJVTkV2JikuE2O/4uig52gQRlq5E99axLeE9Q=="],
+
+    "@react-aria/tag": ["@react-aria/tag@3.8.0", "", { "dependencies": { "@react-aria/gridlist": "^3.14.3", "@react-aria/i18n": "^3.12.15", "@react-aria/interactions": "^3.27.0", "@react-aria/label": "^3.7.24", "@react-aria/selection": "^3.27.1", "@react-aria/utils": "^3.33.0", "@react-stately/list": "^3.13.3", "@react-types/button": "^3.15.0", "@react-types/shared": "^3.33.0", "@swc/helpers": "^0.5.0" }, "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" } }, "sha512-sTV6uRKFIFU1aljKb0QjM6fPPnzBuitrbkkCUZCJ0w0RIX1JinZPh96NknNtjFwWmqoROjVNCq51EUd0Hh2SQw=="],
+
+    "@react-aria/textfield": ["@react-aria/textfield@3.18.4", "", { "dependencies": { "@react-aria/form": "^3.1.4", "@react-aria/interactions": "^3.27.0", "@react-aria/label": "^3.7.24", "@react-aria/utils": "^3.33.0", "@react-stately/form": "^3.2.3", "@react-stately/utils": "^3.11.0", "@react-types/shared": "^3.33.0", "@react-types/textfield": "^3.12.7", "@swc/helpers": "^0.5.0" }, "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" } }, "sha512-ts3Vdy2qNOzjCVeO+4RH8FSgTYN2USAMcYFeGbHOriCukVOrvgRsqcDniW7xaT60LgFdlWMJsCusvltSIyo6xw=="],
+
+    "@react-aria/toast": ["@react-aria/toast@3.0.10", "", { "dependencies": { "@react-aria/i18n": "^3.12.15", "@react-aria/interactions": "^3.27.0", "@react-aria/landmark": "^3.0.9", "@react-aria/utils": "^3.33.0", "@react-stately/toast": "^3.1.3", "@react-types/button": "^3.15.0", "@react-types/shared": "^3.33.0", "@swc/helpers": "^0.5.0" }, "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" } }, "sha512-irW5Cr4msbPo4A4ysjT70MDJbpGCe1h9SkFgdYXBPA4Xbi4jRT7TiEZeIS1I7Hsvp6shAK1Ld/m6NBS0b/gyzg=="],
+
+    "@react-aria/toggle": ["@react-aria/toggle@3.12.4", "", { "dependencies": { "@react-aria/interactions": "^3.27.0", "@react-aria/utils": "^3.33.0", "@react-stately/toggle": "^3.9.4", "@react-types/checkbox": "^3.10.3", "@react-types/shared": "^3.33.0", "@swc/helpers": "^0.5.0" }, "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" } }, "sha512-yVcl8kEFLsV47aCA22EMPcd/KWoYqPIPSzoKjRD/iWmxcP6iGzSxDjdUgMQojNGY8Q6wL8lUxfRqKBjvl/uezQ=="],
+
+    "@react-aria/toolbar": ["@react-aria/toolbar@3.0.0-beta.23", "", { "dependencies": { "@react-aria/focus": "^3.21.4", "@react-aria/i18n": "^3.12.15", "@react-aria/utils": "^3.33.0", "@react-types/shared": "^3.33.0", "@swc/helpers": "^0.5.0" }, "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" } }, "sha512-FzvNf2hWtjEwk8F2MBf4qSs6AAR/p2WFSws6kJ4f0SrWXl4wR9VDEwBEUQcIPbWCK2aUsyOjubCh55Cl4t3MoQ=="],
+
+    "@react-aria/tooltip": ["@react-aria/tooltip@3.9.1", "", { "dependencies": { "@react-aria/interactions": "^3.27.0", "@react-aria/utils": "^3.33.0", "@react-stately/tooltip": "^3.5.10", "@react-types/shared": "^3.33.0", "@react-types/tooltip": "^3.5.1", "@swc/helpers": "^0.5.0" }, "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" } }, "sha512-mvEhqpvF4v/wj9zw3a8bsAEnySutGbxKXXt39s6WvF6dkVfaXfsmV9ahuMCHH//UGh/yidZGLrXX4YVdrgS8lA=="],
+
+    "@react-aria/tree": ["@react-aria/tree@3.1.6", "", { "dependencies": { "@react-aria/gridlist": "^3.14.3", "@react-aria/i18n": "^3.12.15", "@react-aria/selection": "^3.27.1", "@react-aria/utils": "^3.33.0", "@react-stately/tree": "^3.9.5", "@react-types/button": "^3.15.0", "@react-types/shared": "^3.33.0", "@swc/helpers": "^0.5.0" }, "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" } }, "sha512-igLX+OQrbXCBLrtPWgUevU0iDrgTSAJh1ncHoPzfD/YDcyTDLqKdy2nZhNbJ/IdHCwTyzIknhFJ700K20Ymw9A=="],
+
+    "@react-aria/utils": ["@react-aria/utils@3.33.0", "", { "dependencies": { "@react-aria/ssr": "^3.9.10", "@react-stately/flags": "^3.1.2", "@react-stately/utils": "^3.11.0", "@react-types/shared": "^3.33.0", "@swc/helpers": "^0.5.0", "clsx": "^2.0.0" }, "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" } }, "sha512-yvz7CMH8d2VjwbSa5nGXqjU031tYhD8ddax95VzJsHSPyqHDEGfxul8RkhGV6oO7bVqZxVs6xY66NIgae+FHjw=="],
+
+    "@react-aria/virtualizer": ["@react-aria/virtualizer@4.1.12", "", { "dependencies": { "@react-aria/i18n": "^3.12.15", "@react-aria/interactions": "^3.27.0", "@react-aria/utils": "^3.33.0", "@react-stately/virtualizer": "^4.4.5", "@react-types/shared": "^3.33.0", "@swc/helpers": "^0.5.0" }, "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" } }, "sha512-va0VAD28nq7rk1vHZvnkq591EbWuDKBwh2NzAEn+zz9JjMtpg4utcihNXECJ1DwMRkpaT6q+KpOE7dSdzTxPBQ=="],
+
+    "@react-aria/visually-hidden": ["@react-aria/visually-hidden@3.8.30", "", { "dependencies": { "@react-aria/interactions": "^3.27.0", "@react-aria/utils": "^3.33.0", "@react-types/shared": "^3.33.0", "@swc/helpers": "^0.5.0" }, "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" } }, "sha512-iY44USEU8sJy0NOJ/sTDn3YlspbhHuVG3nx2YYrzfmxbS3i+lNwkCfG8kJ77dtmbuDLIdBGKENjGkbcwz3kiJg=="],
+
+    "@react-stately/autocomplete": ["@react-stately/autocomplete@3.0.0-beta.4", "", { "dependencies": { "@react-stately/utils": "^3.11.0", "@swc/helpers": "^0.5.0" }, "peerDependencies": { "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1" } }, "sha512-K2Uy7XEdseFvgwRQ8CyrYEHMupjVKEszddOapP8deNz4hntYvT1aRm0m+sKa5Kl/4kvg9c/3NZpQcrky/vRZIg=="],
+
+    "@react-stately/calendar": ["@react-stately/calendar@3.9.2", "", { "dependencies": { "@internationalized/date": "^3.11.0", "@react-stately/utils": "^3.11.0", "@react-types/calendar": "^3.8.2", "@react-types/shared": "^3.33.0", "@swc/helpers": "^0.5.0" }, "peerDependencies": { "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1" } }, "sha512-AQj8/izwb7eY+KFqKcMLI2ygvnbAIwLuQG5KPHgJsMygFqnN4yzXKz5orGqVJnxEXLKiLPteVztx7b5EQobrtw=="],
+
+    "@react-stately/checkbox": ["@react-stately/checkbox@3.7.4", "", { "dependencies": { "@react-stately/form": "^3.2.3", "@react-stately/utils": "^3.11.0", "@react-types/checkbox": "^3.10.3", "@react-types/shared": "^3.33.0", "@swc/helpers": "^0.5.0" }, "peerDependencies": { "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1" } }, "sha512-oXHMkK22CWLcmNlunDuu4p52QXYmkpx6es9AjWx/xlh3XLZdJzo/5SANioOH1QvBtwPA/c2KQy+ZBqC21NtMHw=="],
+
+    "@react-stately/collections": ["@react-stately/collections@3.12.9", "", { "dependencies": { "@react-types/shared": "^3.33.0", "@swc/helpers": "^0.5.0" }, "peerDependencies": { "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1" } }, "sha512-2jywPMhVgMOh0XtutxPqIxFCIiLOnL/GXIrRKoBEo8M3Q24NoMRBavUrn9RTvjqNnec1i/8w1/8sq8cmCKEohA=="],
+
+    "@react-stately/color": ["@react-stately/color@3.9.4", "", { "dependencies": { "@internationalized/number": "^3.6.5", "@internationalized/string": "^3.2.7", "@react-stately/form": "^3.2.3", "@react-stately/numberfield": "^3.10.4", "@react-stately/slider": "^3.7.4", "@react-stately/utils": "^3.11.0", "@react-types/color": "^3.1.3", "@react-types/shared": "^3.33.0", "@swc/helpers": "^0.5.0" }, "peerDependencies": { "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1" } }, "sha512-SprAP5STMg6K0jq+A3UoimsvvTCIGItUtWurS/lDRoQJYajFR8IUdz+mekU/GaXzvFhMN32dijOtFcfxnA4cfA=="],
+
+    "@react-stately/combobox": ["@react-stately/combobox@3.12.2", "", { "dependencies": { "@react-stately/collections": "^3.12.9", "@react-stately/form": "^3.2.3", "@react-stately/list": "^3.13.3", "@react-stately/overlays": "^3.6.22", "@react-stately/utils": "^3.11.0", "@react-types/combobox": "^3.13.11", "@react-types/shared": "^3.33.0", "@swc/helpers": "^0.5.0" }, "peerDependencies": { "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1" } }, "sha512-h4YRmzA+s3aMwUrXm6jyWLN0BWWXUNiodArB1wC24xNdeI7S8O3mxz6G2r3Ne8AE02FXmZXs9SD30Mx5vVVuqQ=="],
+
+    "@react-stately/data": ["@react-stately/data@3.15.1", "", { "dependencies": { "@react-types/shared": "^3.33.0", "@swc/helpers": "^0.5.0" }, "peerDependencies": { "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1" } }, "sha512-lchubLxCWg1Yswpe9yRYJAjmzP0eTYZe+AQyFJQRIT6axRi9Gs92RIZ7zhwLXxI0vcWpnAWADB9kD4bsos7xww=="],
+
+    "@react-stately/datepicker": ["@react-stately/datepicker@3.16.0", "", { "dependencies": { "@internationalized/date": "^3.11.0", "@internationalized/number": "^3.6.5", "@internationalized/string": "^3.2.7", "@react-stately/form": "^3.2.3", "@react-stately/overlays": "^3.6.22", "@react-stately/utils": "^3.11.0", "@react-types/datepicker": "^3.13.4", "@react-types/shared": "^3.33.0", "@swc/helpers": "^0.5.0" }, "peerDependencies": { "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1" } }, "sha512-mYtzKXufFVivrHjmxys3ryJFMPIQNhVqaSItmGnWv3ehxw+0HKBrROf3BFiEN4zP20euoP149ZaR4uNx90kMYw=="],
+
+    "@react-stately/disclosure": ["@react-stately/disclosure@3.0.10", "", { "dependencies": { "@react-stately/utils": "^3.11.0", "@react-types/shared": "^3.33.0", "@swc/helpers": "^0.5.0" }, "peerDependencies": { "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1" } }, "sha512-nUistLYMjBDy+yaS5H0y0Dwfcjr12zpIh7vjhQXF4wxIh3D08NRvV1NCQ0LV+IsMej/qoPJvKS4EnXHxBI3GmQ=="],
+
+    "@react-stately/dnd": ["@react-stately/dnd@3.7.3", "", { "dependencies": { "@react-stately/selection": "^3.20.8", "@react-types/shared": "^3.33.0", "@swc/helpers": "^0.5.0" }, "peerDependencies": { "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1" } }, "sha512-yBtzAimyYvJWnzP80Scx7l559+43TVSyjaMpUR6/s2IjqD3XoPKgPsv7KaFUmygBTkCBGBFJn404rYgMCOsu3g=="],
+
+    "@react-stately/flags": ["@react-stately/flags@3.1.2", "", { "dependencies": { "@swc/helpers": "^0.5.0" } }, "sha512-2HjFcZx1MyQXoPqcBGALwWWmgFVUk2TuKVIQxCbRq7fPyWXIl6VHcakCLurdtYC2Iks7zizvz0Idv48MQ38DWg=="],
+
+    "@react-stately/form": ["@react-stately/form@3.2.3", "", { "dependencies": { "@react-types/shared": "^3.33.0", "@swc/helpers": "^0.5.0" }, "peerDependencies": { "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1" } }, "sha512-NPvjJtns1Pq9uvqeRJCf8HIdVmOm2ARLYQ2F/sqXj1w5IChJ4oWL4Xzvj29/zBitgE1vVjDhnrnwSfNlHZGX0g=="],
+
+    "@react-stately/grid": ["@react-stately/grid@3.11.8", "", { "dependencies": { "@react-stately/collections": "^3.12.9", "@react-stately/selection": "^3.20.8", "@react-types/grid": "^3.3.7", "@react-types/shared": "^3.33.0", "@swc/helpers": "^0.5.0" }, "peerDependencies": { "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1" } }, "sha512-tCabR5U7ype+uEElS5Chv5n6ntUv3drXa9DwebjO05cFevUmjTkEfYPJWixpgX4UlCCvjdUFgzeQlJF+gCiozg=="],
+
+    "@react-stately/layout": ["@react-stately/layout@4.5.3", "", { "dependencies": { "@react-stately/collections": "^3.12.9", "@react-stately/table": "^3.15.3", "@react-stately/virtualizer": "^4.4.5", "@react-types/grid": "^3.3.7", "@react-types/shared": "^3.33.0", "@react-types/table": "^3.13.5", "@swc/helpers": "^0.5.0" }, "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" } }, "sha512-BDYnvO2AKzvWfxxVM96kif3qCynsA+XcNoQC+T77exH+LLT8zlK9oOdarZXTlok/eZmjs6+5wmjq51PeL6eM5w=="],
+
+    "@react-stately/list": ["@react-stately/list@3.13.3", "", { "dependencies": { "@react-stately/collections": "^3.12.9", "@react-stately/selection": "^3.20.8", "@react-stately/utils": "^3.11.0", "@react-types/shared": "^3.33.0", "@swc/helpers": "^0.5.0" }, "peerDependencies": { "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1" } }, "sha512-xN0v7rzhIKshhcshOzx+ZgVngXnGCtMPRdhoDLGaHzQy5YfxvKBMNLCnr5Lm4T1U/kIvHbyzxmr5uwmH8WxoIg=="],
+
+    "@react-stately/menu": ["@react-stately/menu@3.9.10", "", { "dependencies": { "@react-stately/overlays": "^3.6.22", "@react-types/menu": "^3.10.6", "@react-types/shared": "^3.33.0", "@swc/helpers": "^0.5.0" }, "peerDependencies": { "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1" } }, "sha512-dY9FzjQ+6iNInVujZPyMklDGoSbaoO0yguUnALAY+yfkPAyStEElfm4aXZgRfNKOTNHe9E34oV7qefSYsclvTg=="],
+
+    "@react-stately/numberfield": ["@react-stately/numberfield@3.10.4", "", { "dependencies": { "@internationalized/number": "^3.6.5", "@react-stately/form": "^3.2.3", "@react-stately/utils": "^3.11.0", "@react-types/numberfield": "^3.8.17", "@swc/helpers": "^0.5.0" }, "peerDependencies": { "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1" } }, "sha512-EniHHwXOw/Ta0x5j61OvldDAvLoi/8xOo//bzrqwnDvf2/1IKGFMD9CHs7HYhQw+9oNl3Q2V1meOTNPc4PvoMQ=="],
+
+    "@react-stately/overlays": ["@react-stately/overlays@3.6.22", "", { "dependencies": { "@react-stately/utils": "^3.11.0", "@react-types/overlays": "^3.9.3", "@swc/helpers": "^0.5.0" }, "peerDependencies": { "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1" } }, "sha512-sWBnuy5dqVp8d+1e+ABTRVB3YBcOW86/90pF5PWY44au3bUFXVSUBO2QMdR/6JtojDoPRmrjufonI19/Zs/20w=="],
+
+    "@react-stately/radio": ["@react-stately/radio@3.11.4", "", { "dependencies": { "@react-stately/form": "^3.2.3", "@react-stately/utils": "^3.11.0", "@react-types/radio": "^3.9.3", "@react-types/shared": "^3.33.0", "@swc/helpers": "^0.5.0" }, "peerDependencies": { "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1" } }, "sha512-3svsW5VxJA5/p1vO+Qlxv+7Jq9g7f4rqX9Rbqdfd+pH7ykHaV0CUKkSRMaWfcY8Vgaf2xmcc6dvusPRqKX8T1A=="],
+
+    "@react-stately/searchfield": ["@react-stately/searchfield@3.5.18", "", { "dependencies": { "@react-stately/utils": "^3.11.0", "@react-types/searchfield": "^3.6.7", "@swc/helpers": "^0.5.0" }, "peerDependencies": { "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1" } }, "sha512-C3/1wOON5oK0QBljj0vSbHm/IWgd29NxB+7zT1JjZcxtbcFxCj4HOxKdnPCT/d8Pojb0YS26QgKzatLZ0NnhgQ=="],
+
+    "@react-stately/select": ["@react-stately/select@3.9.1", "", { "dependencies": { "@react-stately/form": "^3.2.3", "@react-stately/list": "^3.13.3", "@react-stately/overlays": "^3.6.22", "@react-stately/utils": "^3.11.0", "@react-types/select": "^3.12.1", "@react-types/shared": "^3.33.0", "@swc/helpers": "^0.5.0" }, "peerDependencies": { "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1" } }, "sha512-CJQRqv8Dg+0RRvcig3a2YfY6POJIscDINvidRF31yK6J72rsP01dY3ria9aJjizNDHR9Q5dWFp/z+ii0cOTWIQ=="],
+
+    "@react-stately/selection": ["@react-stately/selection@3.20.8", "", { "dependencies": { "@react-stately/collections": "^3.12.9", "@react-stately/utils": "^3.11.0", "@react-types/shared": "^3.33.0", "@swc/helpers": "^0.5.0" }, "peerDependencies": { "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1" } }, "sha512-V1kRN1NLW+i/3Xv+Q0pN9OzuM0zFEW9mdXOOOq7l+YL6hFjqIjttT2/q4KoyiNV3W0hfoRFSTQ7XCgqnqtwEng=="],
+
+    "@react-stately/slider": ["@react-stately/slider@3.7.4", "", { "dependencies": { "@react-stately/utils": "^3.11.0", "@react-types/shared": "^3.33.0", "@react-types/slider": "^3.8.3", "@swc/helpers": "^0.5.0" }, "peerDependencies": { "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1" } }, "sha512-cSOYSx2nsOQejMg6Ql0+GUpqAiPwRA5teYXUghNvuBDtVxnd4l2rnXs54Ww48tU43xf2+L3kkmMofThjABoEPw=="],
+
+    "@react-stately/table": ["@react-stately/table@3.15.3", "", { "dependencies": { "@react-stately/collections": "^3.12.9", "@react-stately/flags": "^3.1.2", "@react-stately/grid": "^3.11.8", "@react-stately/selection": "^3.20.8", "@react-stately/utils": "^3.11.0", "@react-types/grid": "^3.3.7", "@react-types/shared": "^3.33.0", "@react-types/table": "^3.13.5", "@swc/helpers": "^0.5.0" }, "peerDependencies": { "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1" } }, "sha512-W1wR0O/PmdD8hCUFIAelHICjUX/Ii6ZldPlH6EILr9olyGpoCaY7XmnyG7kii1aANuQGBeskjJdXvS6LX/gyDw=="],
+
+    "@react-stately/tabs": ["@react-stately/tabs@3.8.8", "", { "dependencies": { "@react-stately/list": "^3.13.3", "@react-types/shared": "^3.33.0", "@react-types/tabs": "^3.3.21", "@swc/helpers": "^0.5.0" }, "peerDependencies": { "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1" } }, "sha512-BZImWT+pHZitImRQkoL7jVhTtpGPSra1Rhh4pi8epzwogeqseEIEpuWpQebjQP74r1kfNi/iT2p5Qb31eWfh1Q=="],
+
+    "@react-stately/toast": ["@react-stately/toast@3.1.3", "", { "dependencies": { "@swc/helpers": "^0.5.0", "use-sync-external-store": "^1.6.0" }, "peerDependencies": { "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1" } }, "sha512-mT9QJKmD523lqFpOp0VWZ6QHZENFK7HrodnNJDVc7g616s5GNmemdlkITV43fSY3tHeThCVvPu+Uzh7RvQ9mpQ=="],
+
+    "@react-stately/toggle": ["@react-stately/toggle@3.9.4", "", { "dependencies": { "@react-stately/utils": "^3.11.0", "@react-types/checkbox": "^3.10.3", "@react-types/shared": "^3.33.0", "@swc/helpers": "^0.5.0" }, "peerDependencies": { "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1" } }, "sha512-tjWsshRJtHC+PI5NYMlnDlV/BTo1eWq6fmR6x1mXlQfKuKGTJRzhgJyaQ2mc5K+LkifD7fchOhfapHCrRlzwMg=="],
+
+    "@react-stately/tooltip": ["@react-stately/tooltip@3.5.10", "", { "dependencies": { "@react-stately/overlays": "^3.6.22", "@react-types/tooltip": "^3.5.1", "@swc/helpers": "^0.5.0" }, "peerDependencies": { "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1" } }, "sha512-GauUdc6Of08Np2iUw4xx/DdgpvszS9CxJWYcRnNyAAGPLQrmniVrpJvb0EUKQTP9sUSci1SlmpvJh4SNZx26Bw=="],
+
+    "@react-stately/tree": ["@react-stately/tree@3.9.5", "", { "dependencies": { "@react-stately/collections": "^3.12.9", "@react-stately/selection": "^3.20.8", "@react-stately/utils": "^3.11.0", "@react-types/shared": "^3.33.0", "@swc/helpers": "^0.5.0" }, "peerDependencies": { "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1" } }, "sha512-UpvBlzL/MpFdOepDg+cohI/zvw8DEVM8cXY/OZ8tKUXWpew1HpUglwnAI3ivm0L2k9laUIB9siW0g04ZWiH9Lg=="],
+
+    "@react-stately/utils": ["@react-stately/utils@3.11.0", "", { "dependencies": { "@swc/helpers": "^0.5.0" }, "peerDependencies": { "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1" } }, "sha512-8LZpYowJ9eZmmYLpudbo/eclIRnbhWIJZ994ncmlKlouNzKohtM8qTC6B1w1pwUbiwGdUoyzLuQbeaIor5Dvcw=="],
+
+    "@react-stately/virtualizer": ["@react-stately/virtualizer@4.4.5", "", { "dependencies": { "@react-types/shared": "^3.33.0", "@swc/helpers": "^0.5.0" }, "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" } }, "sha512-MP33zys3nRYTk/+3BPchxlil9GrwbMksc3XuvNACeZqYEA/oEidsHffgPL+LY0iitKCmQE6pg49MI5HvBuOd2w=="],
+
+    "@react-types/autocomplete": ["@react-types/autocomplete@3.0.0-alpha.37", "", { "dependencies": { "@react-types/combobox": "^3.13.11", "@react-types/searchfield": "^3.6.7", "@react-types/shared": "^3.33.0" }, "peerDependencies": { "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1" } }, "sha512-9KkL/UEUHIqp4OD4PffeZPiRV93ZBKq84sBrzTbTIPN+os+N+Lfz45Mg67NM2RumR/KQSVE0gZp7OA0eOvxPYA=="],
+
+    "@react-types/breadcrumbs": ["@react-types/breadcrumbs@3.7.18", "", { "dependencies": { "@react-types/link": "^3.6.6", "@react-types/shared": "^3.33.0" }, "peerDependencies": { "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1" } }, "sha512-zwltqx2XSELBRQeuCraxrdfT4fpIOVu6eQXsZ4RhWlsT7DLhzj3pUGkxdPDAMfYaVdyNBqc+nhiAnCwz6tUJ8A=="],
+
+    "@react-types/button": ["@react-types/button@3.15.0", "", { "dependencies": { "@react-types/shared": "^3.33.0" }, "peerDependencies": { "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1" } }, "sha512-X/K2/Oeuq7Hi8nMIzx4/YlZuvWFiSOHZt27p4HmThCnNO/9IDFPmvPrpkYjWN5eN9Nuk+P5vZUb4A7QJgYpvGA=="],
+
+    "@react-types/calendar": ["@react-types/calendar@3.8.2", "", { "dependencies": { "@internationalized/date": "^3.11.0", "@react-types/shared": "^3.33.0" }, "peerDependencies": { "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1" } }, "sha512-QbPFhvBQfrsz3x1Nnatr5SL+8XtbxvP4obESFuDrKmsqaaAv+jG5vwLiPTKp6Z3L+MWkCvKavBPuW+byhq+69A=="],
+
+    "@react-types/checkbox": ["@react-types/checkbox@3.10.3", "", { "dependencies": { "@react-types/shared": "^3.33.0" }, "peerDependencies": { "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1" } }, "sha512-Xw4jHG7uK352Wc18XXzdzmtr3Xjg8d2tPoBGNgsw39f92EY2UpoDAPHxYR0BaDe04lGfAn6YwVivI4OGVbjXIg=="],
+
+    "@react-types/color": ["@react-types/color@3.1.3", "", { "dependencies": { "@react-types/shared": "^3.33.0", "@react-types/slider": "^3.8.3" }, "peerDependencies": { "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1" } }, "sha512-XM0x8iZpAf036w9qceD2RFroehLxKRwkVer7EvdJNs8K8iUN8TuhCagzsomiSJtyYh5MFysEVQ2ir85toiAFyw=="],
+
+    "@react-types/combobox": ["@react-types/combobox@3.13.11", "", { "dependencies": { "@react-types/shared": "^3.33.0" }, "peerDependencies": { "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1" } }, "sha512-5/tdmTAvqPpiWzEeaV7uLLSbSTkkoQ1mVz6NfKMPuw4ZBkY3lPc9JDkkQjY/JrquZao+KY4Dx8ZIoS0NqkrFrw=="],
+
+    "@react-types/datepicker": ["@react-types/datepicker@3.13.4", "", { "dependencies": { "@internationalized/date": "^3.11.0", "@react-types/calendar": "^3.8.2", "@react-types/overlays": "^3.9.3", "@react-types/shared": "^3.33.0" }, "peerDependencies": { "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1" } }, "sha512-B5sAPoYZfluDBpgVK3ADlHbXBKRkFCQFO18Bs091IvRRwqzfoO/uf+/9UpXMw+BEF4pciLf0/kdiVQTvI3MzlA=="],
+
+    "@react-types/dialog": ["@react-types/dialog@3.5.23", "", { "dependencies": { "@react-types/overlays": "^3.9.3", "@react-types/shared": "^3.33.0" }, "peerDependencies": { "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1" } }, "sha512-3tMzweYuaDOaufF5tZPMgXSA0pPFJNgdg89YRITh0wMXMG0pm+tAKVQJL1TSLLhOiLCEL08V8M/AK67dBdr2IA=="],
+
+    "@react-types/form": ["@react-types/form@3.7.17", "", { "dependencies": { "@react-types/shared": "^3.33.0" }, "peerDependencies": { "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1" } }, "sha512-wBFRJ3jehHw2X2Td/KwUNxFWOqXCK7OTGG9A+W3ZI3nDGyflHQpIjqKCKV1jRySs6sv7huiPckJ7ScDleCKf7w=="],
+
+    "@react-types/grid": ["@react-types/grid@3.3.7", "", { "dependencies": { "@react-types/shared": "^3.33.0" }, "peerDependencies": { "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1" } }, "sha512-riET3xeKPTcRWQy6hYCMxdbdL3yubPY5Ow66b2GA2rEqoYvmDBniYXAM2Oh+q9s+YgnAP7qJK++ym8NljvHiLA=="],
+
+    "@react-types/link": ["@react-types/link@3.6.6", "", { "dependencies": { "@react-types/shared": "^3.33.0" }, "peerDependencies": { "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1" } }, "sha512-M6WXxUJFmiF6GNu7xUH0uHj0jsorFBN6npkfSCNM4puStC8NbUT2+ZPySQyZXCoHMQ89g6qZ6vCc8QduVkTE7Q=="],
+
+    "@react-types/listbox": ["@react-types/listbox@3.7.5", "", { "dependencies": { "@react-types/shared": "^3.33.0" }, "peerDependencies": { "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1" } }, "sha512-Cn+yNip+YZBaGzu+z5xPNgmfSupnLl+li7uG5hRc+EArkk8/G42myRXz6M8wPrLM1bFAq3r85tAbyoXVmKG5Jw=="],
+
+    "@react-types/menu": ["@react-types/menu@3.10.6", "", { "dependencies": { "@react-types/overlays": "^3.9.3", "@react-types/shared": "^3.33.0" }, "peerDependencies": { "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1" } }, "sha512-OJTznQ4xE/VddBJU+HO4x5tceSOdyQhiHA1bREE1aHl+PcgHOUZLdMjXp1zFaGF16HhItHJaxpifJ4hzf4hWQA=="],
+
+    "@react-types/meter": ["@react-types/meter@3.4.14", "", { "dependencies": { "@react-types/progress": "^3.5.17" }, "peerDependencies": { "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1" } }, "sha512-rNw0Do2AM3zLGZ0pSWweViuddg1uW99PWzE6RQXE8nsTHTeiwDZt9SYGdObEnjd+nJ3YzemqekG0Kqt93iNBcA=="],
+
+    "@react-types/numberfield": ["@react-types/numberfield@3.8.17", "", { "dependencies": { "@react-types/shared": "^3.33.0" }, "peerDependencies": { "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1" } }, "sha512-Q9n24OaSMXrebMowbtowmHLNclknN3XkcBIaYMwA2BIGIl+fZFnI8MERM0pG87W+wki6FepDExsDW9YxQF4pnw=="],
+
+    "@react-types/overlays": ["@react-types/overlays@3.9.3", "", { "dependencies": { "@react-types/shared": "^3.33.0" }, "peerDependencies": { "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1" } }, "sha512-LzetThNNk8T26pQRbs1I7+isuFhdFYREy7wJCsZmbB0FnZgCukGTfOtThZWv+ry11veyVJiX68jfl4SV6ACTWA=="],
+
+    "@react-types/progress": ["@react-types/progress@3.5.17", "", { "dependencies": { "@react-types/shared": "^3.33.0" }, "peerDependencies": { "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1" } }, "sha512-JtiGlek6QS04bFrRj1WfChjPNr7+3/+pd6yZayXGUkQUPHt1Z/cFnv3QZ/tSQTdUt1XXmjnCak9ZH9JQBqe64Q=="],
+
+    "@react-types/radio": ["@react-types/radio@3.9.3", "", { "dependencies": { "@react-types/shared": "^3.33.0" }, "peerDependencies": { "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1" } }, "sha512-w2BrMGIiZxYXPCnnB2NQyifwE/rRFMIW87MyawrKO9zPSbnDkqLIHAAtqmlNk2zkz1ZEWjk9opNsuztjP7D4sA=="],
+
+    "@react-types/searchfield": ["@react-types/searchfield@3.6.7", "", { "dependencies": { "@react-types/shared": "^3.33.0", "@react-types/textfield": "^3.12.7" }, "peerDependencies": { "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1" } }, "sha512-POo3spZcYD14aqo0f4eNbymJ8w9EKrlu0pOOjYYWI2P0GUSRmib9cBA9xZFhvRGHuNlHo3ePjeFitYQI7L3g1g=="],
+
+    "@react-types/select": ["@react-types/select@3.12.1", "", { "dependencies": { "@react-types/shared": "^3.33.0" }, "peerDependencies": { "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1" } }, "sha512-PtIUymvQNIIzgr+piJtK/8gbH7akWtbswIbfoADPSxtZEd1/vfUIO0s8c750s3XYNlmx/4DrhugQsLYwgC35yg=="],
+
+    "@react-types/shared": ["@react-types/shared@3.33.0", "", { "peerDependencies": { "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1" } }, "sha512-xuUpP6MyuPmJtzNOqF5pzFUIHH2YogyOQfUQHag54PRmWB7AbjuGWBUv0l1UDmz6+AbzAYGmDVAzcRDOu2PFpw=="],
+
+    "@react-types/slider": ["@react-types/slider@3.8.3", "", { "dependencies": { "@react-types/shared": "^3.33.0" }, "peerDependencies": { "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1" } }, "sha512-HCDegYiUA27CcJKvFwgpR8ktFKf2nAirXqQEgVPV4uxk6JIeiRx41yqM/xPJGfmaqa7BARYARLT41yN2V8Kadg=="],
+
+    "@react-types/switch": ["@react-types/switch@3.5.16", "", { "dependencies": { "@react-types/shared": "^3.33.0" }, "peerDependencies": { "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1" } }, "sha512-6fynclkyg0wGHo3f1bwk4Z+gZZEg0Z63iP5TFhgHWdZ8W+Uq6F3u7V4IgQpuJ2NleL1c2jy2/CKdS9v06ac2Og=="],
+
+    "@react-types/table": ["@react-types/table@3.13.5", "", { "dependencies": { "@react-types/grid": "^3.3.7", "@react-types/shared": "^3.33.0" }, "peerDependencies": { "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1" } }, "sha512-4/CixlNmXSuJuX2IKuUlgNd/dEgNh3WvfE/bdwuI1t5JBdShP9tHIzSkgZbrzE2xX46NeA2xq4vXNO5kBv+QDA=="],
+
+    "@react-types/tabs": ["@react-types/tabs@3.3.21", "", { "dependencies": { "@react-types/shared": "^3.33.0" }, "peerDependencies": { "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1" } }, "sha512-Dq9bKI62rHoI4LGGcBGlZ5s0aSwB0G4Y8o0r7hQZvf1eZWc9fmqdAdTTaGG/RUyhMIGRYWl5RRUBUuC5RmaO6w=="],
+
+    "@react-types/textfield": ["@react-types/textfield@3.12.7", "", { "dependencies": { "@react-types/shared": "^3.33.0" }, "peerDependencies": { "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1" } }, "sha512-ddiacsS6sLFtAn2/fym7lR8nbdsLgPfelNDcsDqHiu6XUHh5TCNe8ItXHFaIiyfnKTH8uJqZrSli4wfAYNfMsw=="],
+
+    "@react-types/tooltip": ["@react-types/tooltip@3.5.1", "", { "dependencies": { "@react-types/overlays": "^3.9.3", "@react-types/shared": "^3.33.0" }, "peerDependencies": { "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1" } }, "sha512-h6xOAWbWUJKs9CzcCyzSPATLHq7W5dS866HkXLrtCrRDShLuzQnojZnctD2tKtNt17990hjnOhl36GUBuO5kyw=="],
+
+    "@rolldown/pluginutils": ["@rolldown/pluginutils@1.0.0-beta.47", "", {}, "sha512-8QagwMH3kNCuzD8EWL8R2YPW5e4OrHNSAHRFDdmFqEwEaD/KcNKjVoumo+gP2vW5eKB2UPbM6vTYiGZX0ixLnw=="],
+
+    "@rollup/rollup-android-arm-eabi": ["@rollup/rollup-android-arm-eabi@4.56.0", "", { "os": "android", "cpu": "arm" }, "sha512-LNKIPA5k8PF1+jAFomGe3qN3bbIgJe/IlpDBwuVjrDKrJhVWywgnJvflMt/zkbVNLFtF1+94SljYQS6e99klnw=="],
+
+    "@rollup/rollup-android-arm64": ["@rollup/rollup-android-arm64@4.56.0", "", { "os": "android", "cpu": "arm64" }, "sha512-lfbVUbelYqXlYiU/HApNMJzT1E87UPGvzveGg2h0ktUNlOCxKlWuJ9jtfvs1sKHdwU4fzY7Pl8sAl49/XaEk6Q=="],
+
+    "@rollup/rollup-darwin-arm64": ["@rollup/rollup-darwin-arm64@4.56.0", "", { "os": "darwin", "cpu": "arm64" }, "sha512-EgxD1ocWfhoD6xSOeEEwyE7tDvwTgZc8Bss7wCWe+uc7wO8G34HHCUH+Q6cHqJubxIAnQzAsyUsClt0yFLu06w=="],
+
+    "@rollup/rollup-darwin-x64": ["@rollup/rollup-darwin-x64@4.56.0", "", { "os": "darwin", "cpu": "x64" }, "sha512-1vXe1vcMOssb/hOF8iv52A7feWW2xnu+c8BV4t1F//m9QVLTfNVpEdja5ia762j/UEJe2Z1jAmEqZAK42tVW3g=="],
+
+    "@rollup/rollup-freebsd-arm64": ["@rollup/rollup-freebsd-arm64@4.56.0", "", { "os": "freebsd", "cpu": "arm64" }, "sha512-bof7fbIlvqsyv/DtaXSck4VYQ9lPtoWNFCB/JY4snlFuJREXfZnm+Ej6yaCHfQvofJDXLDMTVxWscVSuQvVWUQ=="],
+
+    "@rollup/rollup-freebsd-x64": ["@rollup/rollup-freebsd-x64@4.56.0", "", { "os": "freebsd", "cpu": "x64" }, "sha512-KNa6lYHloW+7lTEkYGa37fpvPq+NKG/EHKM8+G/g9WDU7ls4sMqbVRV78J6LdNuVaeeK5WB9/9VAFbKxcbXKYg=="],
+
+    "@rollup/rollup-linux-arm-gnueabihf": ["@rollup/rollup-linux-arm-gnueabihf@4.56.0", "", { "os": "linux", "cpu": "arm" }, "sha512-E8jKK87uOvLrrLN28jnAAAChNq5LeCd2mGgZF+fGF5D507WlG/Noct3lP/QzQ6MrqJ5BCKNwI9ipADB6jyiq2A=="],
+
+    "@rollup/rollup-linux-arm-musleabihf": ["@rollup/rollup-linux-arm-musleabihf@4.56.0", "", { "os": "linux", "cpu": "arm" }, "sha512-jQosa5FMYF5Z6prEpTCCmzCXz6eKr/tCBssSmQGEeozA9tkRUty/5Vx06ibaOP9RCrW1Pvb8yp3gvZhHwTDsJw=="],
+
+    "@rollup/rollup-linux-arm64-gnu": ["@rollup/rollup-linux-arm64-gnu@4.56.0", "", { "os": "linux", "cpu": "arm64" }, "sha512-uQVoKkrC1KGEV6udrdVahASIsaF8h7iLG0U0W+Xn14ucFwi6uS539PsAr24IEF9/FoDtzMeeJXJIBo5RkbNWvQ=="],
+
+    "@rollup/rollup-linux-arm64-musl": ["@rollup/rollup-linux-arm64-musl@4.56.0", "", { "os": "linux", "cpu": "arm64" }, "sha512-vLZ1yJKLxhQLFKTs42RwTwa6zkGln+bnXc8ueFGMYmBTLfNu58sl5/eXyxRa2RarTkJbXl8TKPgfS6V5ijNqEA=="],
+
+    "@rollup/rollup-linux-loong64-gnu": ["@rollup/rollup-linux-loong64-gnu@4.56.0", "", { "os": "linux", "cpu": "none" }, "sha512-FWfHOCub564kSE3xJQLLIC/hbKqHSVxy8vY75/YHHzWvbJL7aYJkdgwD/xGfUlL5UV2SB7otapLrcCj2xnF1dg=="],
+
+    "@rollup/rollup-linux-loong64-musl": ["@rollup/rollup-linux-loong64-musl@4.56.0", "", { "os": "linux", "cpu": "none" }, "sha512-z1EkujxIh7nbrKL1lmIpqFTc/sr0u8Uk0zK/qIEFldbt6EDKWFk/pxFq3gYj4Bjn3aa9eEhYRlL3H8ZbPT1xvA=="],
+
+    "@rollup/rollup-linux-ppc64-gnu": ["@rollup/rollup-linux-ppc64-gnu@4.56.0", "", { "os": "linux", "cpu": "ppc64" }, "sha512-iNFTluqgdoQC7AIE8Q34R3AuPrJGJirj5wMUErxj22deOcY7XwZRaqYmB6ZKFHoVGqRcRd0mqO+845jAibKCkw=="],
+
+    "@rollup/rollup-linux-ppc64-musl": ["@rollup/rollup-linux-ppc64-musl@4.56.0", "", { "os": "linux", "cpu": "ppc64" }, "sha512-MtMeFVlD2LIKjp2sE2xM2slq3Zxf9zwVuw0jemsxvh1QOpHSsSzfNOTH9uYW9i1MXFxUSMmLpeVeUzoNOKBaWg=="],
+
+    "@rollup/rollup-linux-riscv64-gnu": ["@rollup/rollup-linux-riscv64-gnu@4.56.0", "", { "os": "linux", "cpu": "none" }, "sha512-in+v6wiHdzzVhYKXIk5U74dEZHdKN9KH0Q4ANHOTvyXPG41bajYRsy7a8TPKbYPl34hU7PP7hMVHRvv/5aCSew=="],
+
+    "@rollup/rollup-linux-riscv64-musl": ["@rollup/rollup-linux-riscv64-musl@4.56.0", "", { "os": "linux", "cpu": "none" }, "sha512-yni2raKHB8m9NQpI9fPVwN754mn6dHQSbDTwxdr9SE0ks38DTjLMMBjrwvB5+mXrX+C0npX0CVeCUcvvvD8CNQ=="],
+
+    "@rollup/rollup-linux-s390x-gnu": ["@rollup/rollup-linux-s390x-gnu@4.56.0", "", { "os": "linux", "cpu": "s390x" }, "sha512-zhLLJx9nQPu7wezbxt2ut+CI4YlXi68ndEve16tPc/iwoylWS9B3FxpLS2PkmfYgDQtosah07Mj9E0khc3Y+vQ=="],
+
+    "@rollup/rollup-linux-x64-gnu": ["@rollup/rollup-linux-x64-gnu@4.56.0", "", { "os": "linux", "cpu": "x64" }, "sha512-MVC6UDp16ZSH7x4rtuJPAEoE1RwS8N4oK9DLHy3FTEdFoUTCFVzMfJl/BVJ330C+hx8FfprA5Wqx4FhZXkj2Kw=="],
+
+    "@rollup/rollup-linux-x64-musl": ["@rollup/rollup-linux-x64-musl@4.56.0", "", { "os": "linux", "cpu": "x64" }, "sha512-ZhGH1eA4Qv0lxaV00azCIS1ChedK0V32952Md3FtnxSqZTBTd6tgil4nZT5cU8B+SIw3PFYkvyR4FKo2oyZIHA=="],
+
+    "@rollup/rollup-openbsd-x64": ["@rollup/rollup-openbsd-x64@4.56.0", "", { "os": "openbsd", "cpu": "x64" }, "sha512-O16XcmyDeFI9879pEcmtWvD/2nyxR9mF7Gs44lf1vGGx8Vg2DRNx11aVXBEqOQhWb92WN4z7fW/q4+2NYzCbBA=="],
+
+    "@rollup/rollup-openharmony-arm64": ["@rollup/rollup-openharmony-arm64@4.56.0", "", { "os": "none", "cpu": "arm64" }, "sha512-LhN/Reh+7F3RCgQIRbgw8ZMwUwyqJM+8pXNT6IIJAqm2IdKkzpCh/V9EdgOMBKuebIrzswqy4ATlrDgiOwbRcQ=="],
+
+    "@rollup/rollup-win32-arm64-msvc": ["@rollup/rollup-win32-arm64-msvc@4.56.0", "", { "os": "win32", "cpu": "arm64" }, "sha512-kbFsOObXp3LBULg1d3JIUQMa9Kv4UitDmpS+k0tinPBz3watcUiV2/LUDMMucA6pZO3WGE27P7DsfaN54l9ing=="],
+
+    "@rollup/rollup-win32-ia32-msvc": ["@rollup/rollup-win32-ia32-msvc@4.56.0", "", { "os": "win32", "cpu": "ia32" }, "sha512-vSSgny54D6P4vf2izbtFm/TcWYedw7f8eBrOiGGecyHyQB9q4Kqentjaj8hToe+995nob/Wv48pDqL5a62EWtg=="],
+
+    "@rollup/rollup-win32-x64-gnu": ["@rollup/rollup-win32-x64-gnu@4.56.0", "", { "os": "win32", "cpu": "x64" }, "sha512-FeCnkPCTHQJFbiGG49KjV5YGW/8b9rrXAM2Mz2kiIoktq2qsJxRD5giEMEOD2lPdgs72upzefaUvS+nc8E3UzQ=="],
+
+    "@rollup/rollup-win32-x64-msvc": ["@rollup/rollup-win32-x64-msvc@4.56.0", "", { "os": "win32", "cpu": "x64" }, "sha512-H8AE9Ur/t0+1VXujj90w0HrSOuv0Nq9r1vSZF2t5km20NTfosQsGGUXDaKdQZzwuLts7IyL1fYT4hM95TI9c4g=="],
+
+    "@swc/core": ["@swc/core@1.15.10", "", { "dependencies": { "@swc/counter": "^0.1.3", "@swc/types": "^0.1.25" }, "optionalDependencies": { "@swc/core-darwin-arm64": "1.15.10", "@swc/core-darwin-x64": "1.15.10", "@swc/core-linux-arm-gnueabihf": "1.15.10", "@swc/core-linux-arm64-gnu": "1.15.10", "@swc/core-linux-arm64-musl": "1.15.10", "@swc/core-linux-x64-gnu": "1.15.10", "@swc/core-linux-x64-musl": "1.15.10", "@swc/core-win32-arm64-msvc": "1.15.10", "@swc/core-win32-ia32-msvc": "1.15.10", "@swc/core-win32-x64-msvc": "1.15.10" }, "peerDependencies": { "@swc/helpers": ">=0.5.17" }, "optionalPeers": ["@swc/helpers"] }, "sha512-udNofxftduMUEv7nqahl2nvodCiCDQ4Ge0ebzsEm6P8s0RC2tBM0Hqx0nNF5J/6t9uagFJyWIDjXy3IIWMHDJw=="],
+
+    "@swc/core-darwin-arm64": ["@swc/core-darwin-arm64@1.15.10", "", { "os": "darwin", "cpu": "arm64" }, "sha512-U72pGqmJYbjrLhMndIemZ7u9Q9owcJczGxwtfJlz/WwMaGYAV/g4nkGiUVk/+QSX8sFCAjanovcU1IUsP2YulA=="],
+
+    "@swc/core-darwin-x64": ["@swc/core-darwin-x64@1.15.10", "", { "os": "darwin", "cpu": "x64" }, "sha512-NZpDXtwHH083L40xdyj1sY31MIwLgOxKfZEAGCI8xHXdHa+GWvEiVdGiu4qhkJctoHFzAEc7ZX3GN5phuJcPuQ=="],
+
+    "@swc/core-linux-arm-gnueabihf": ["@swc/core-linux-arm-gnueabihf@1.15.10", "", { "os": "linux", "cpu": "arm" }, "sha512-ioieF5iuRziUF1HkH1gg1r93e055dAdeBAPGAk40VjqpL5/igPJ/WxFHGvc6WMLhUubSJI4S0AiZAAhEAp1jDg=="],
+
+    "@swc/core-linux-arm64-gnu": ["@swc/core-linux-arm64-gnu@1.15.10", "", { "os": "linux", "cpu": "arm64" }, "sha512-tD6BClOrxSsNus9cJL7Gxdv7z7Y2hlyvZd9l0NQz+YXzmTWqnfzLpg16ovEI7gknH2AgDBB5ywOsqu8hUgSeEQ=="],
+
+    "@swc/core-linux-arm64-musl": ["@swc/core-linux-arm64-musl@1.15.10", "", { "os": "linux", "cpu": "arm64" }, "sha512-4uAHO3nbfbrTcmO/9YcVweTQdx5fN3l7ewwl5AEK4yoC4wXmoBTEPHAVdKNe4r9+xrTgd4BgyPsy0409OjjlMw=="],
+
+    "@swc/core-linux-x64-gnu": ["@swc/core-linux-x64-gnu@1.15.10", "", { "os": "linux", "cpu": "x64" }, "sha512-W0h9ONNw1pVIA0cN7wtboOSTl4Jk3tHq+w2cMPQudu9/+3xoCxpFb9ZdehwCAk29IsvdWzGzY6P7dDVTyFwoqg=="],
+
+    "@swc/core-linux-x64-musl": ["@swc/core-linux-x64-musl@1.15.10", "", { "os": "linux", "cpu": "x64" }, "sha512-XQNZlLZB62S8nAbw7pqoqwy91Ldy2RpaMRqdRN3T+tAg6Xg6FywXRKCsLh6IQOadr4p1+lGnqM/Wn35z5a/0Vw=="],
+
+    "@swc/core-win32-arm64-msvc": ["@swc/core-win32-arm64-msvc@1.15.10", "", { "os": "win32", "cpu": "arm64" }, "sha512-qnAGrRv5Nj/DATxAmCnJQRXXQqnJwR0trxLndhoHoxGci9MuguNIjWahS0gw8YZFjgTinbTxOwzatkoySihnmw=="],
+
+    "@swc/core-win32-ia32-msvc": ["@swc/core-win32-ia32-msvc@1.15.10", "", { "os": "win32", "cpu": "ia32" }, "sha512-i4X/q8QSvzVlaRtv1xfnfl+hVKpCfiJ+9th484rh937fiEZKxZGf51C+uO0lfKDP1FfnT6C1yBYwHy7FLBVXFw=="],
+
+    "@swc/core-win32-x64-msvc": ["@swc/core-win32-x64-msvc@1.15.10", "", { "os": "win32", "cpu": "x64" }, "sha512-HvY8XUFuoTXn6lSccDLYFlXv1SU/PzYi4PyUqGT++WfTnbw/68N/7BdUZqglGRwiSqr0qhYt/EhmBpULj0J9rA=="],
+
+    "@swc/counter": ["@swc/counter@0.1.3", "", {}, "sha512-e2BR4lsJkkRlKZ/qCHPw9ZaSxc0MVUd7gtbtaB7aMvHeJVYe8sOB8DBZkP2DtISHGSku9sCK6T6cnY0CtXrOCQ=="],
+
+    "@swc/helpers": ["@swc/helpers@0.5.18", "", { "dependencies": { "tslib": "^2.8.0" } }, "sha512-TXTnIcNJQEKwThMMqBXsZ4VGAza6bvN4pa41Rkqoio6QBKMvo+5lexeTMScGCIxtzgQJzElcvIltani+adC5PQ=="],
+
+    "@swc/types": ["@swc/types@0.1.25", "", { "dependencies": { "@swc/counter": "^0.1.3" } }, "sha512-iAoY/qRhNH8a/hBvm3zKj9qQ4oc2+3w1unPJa2XvTK3XjeLXtzcCingVPw/9e5mn1+0yPqxcBGp9Jf0pkfMb1g=="],
+
+    "@tailwindcss/node": ["@tailwindcss/node@4.1.18", "", { "dependencies": { "@jridgewell/remapping": "^2.3.4", "enhanced-resolve": "^5.18.3", "jiti": "^2.6.1", "lightningcss": "1.30.2", "magic-string": "^0.30.21", "source-map-js": "^1.2.1", "tailwindcss": "4.1.18" } }, "sha512-DoR7U1P7iYhw16qJ49fgXUlry1t4CpXeErJHnQ44JgTSKMaZUdf17cfn5mHchfJ4KRBZRFA/Coo+MUF5+gOaCQ=="],
+
+    "@tailwindcss/oxide": ["@tailwindcss/oxide@4.1.18", "", { "optionalDependencies": { "@tailwindcss/oxide-android-arm64": "4.1.18", "@tailwindcss/oxide-darwin-arm64": "4.1.18", "@tailwindcss/oxide-darwin-x64": "4.1.18", "@tailwindcss/oxide-freebsd-x64": "4.1.18", "@tailwindcss/oxide-linux-arm-gnueabihf": "4.1.18", "@tailwindcss/oxide-linux-arm64-gnu": "4.1.18", "@tailwindcss/oxide-linux-arm64-musl": "4.1.18", "@tailwindcss/oxide-linux-x64-gnu": "4.1.18", "@tailwindcss/oxide-linux-x64-musl": "4.1.18", "@tailwindcss/oxide-wasm32-wasi": "4.1.18", "@tailwindcss/oxide-win32-arm64-msvc": "4.1.18", "@tailwindcss/oxide-win32-x64-msvc": "4.1.18" } }, "sha512-EgCR5tTS5bUSKQgzeMClT6iCY3ToqE1y+ZB0AKldj809QXk1Y+3jB0upOYZrn9aGIzPtUsP7sX4QQ4XtjBB95A=="],
+
+    "@tailwindcss/oxide-android-arm64": ["@tailwindcss/oxide-android-arm64@4.1.18", "", { "os": "android", "cpu": "arm64" }, "sha512-dJHz7+Ugr9U/diKJA0W6N/6/cjI+ZTAoxPf9Iz9BFRF2GzEX8IvXxFIi/dZBloVJX/MZGvRuFA9rqwdiIEZQ0Q=="],
+
+    "@tailwindcss/oxide-darwin-arm64": ["@tailwindcss/oxide-darwin-arm64@4.1.18", "", { "os": "darwin", "cpu": "arm64" }, "sha512-Gc2q4Qhs660bhjyBSKgq6BYvwDz4G+BuyJ5H1xfhmDR3D8HnHCmT/BSkvSL0vQLy/nkMLY20PQ2OoYMO15Jd0A=="],
+
+    "@tailwindcss/oxide-darwin-x64": ["@tailwindcss/oxide-darwin-x64@4.1.18", "", { "os": "darwin", "cpu": "x64" }, "sha512-FL5oxr2xQsFrc3X9o1fjHKBYBMD1QZNyc1Xzw/h5Qu4XnEBi3dZn96HcHm41c/euGV+GRiXFfh2hUCyKi/e+yw=="],
+
+    "@tailwindcss/oxide-freebsd-x64": ["@tailwindcss/oxide-freebsd-x64@4.1.18", "", { "os": "freebsd", "cpu": "x64" }, "sha512-Fj+RHgu5bDodmV1dM9yAxlfJwkkWvLiRjbhuO2LEtwtlYlBgiAT4x/j5wQr1tC3SANAgD+0YcmWVrj8R9trVMA=="],
+
+    "@tailwindcss/oxide-linux-arm-gnueabihf": ["@tailwindcss/oxide-linux-arm-gnueabihf@4.1.18", "", { "os": "linux", "cpu": "arm" }, "sha512-Fp+Wzk/Ws4dZn+LV2Nqx3IilnhH51YZoRaYHQsVq3RQvEl+71VGKFpkfHrLM/Li+kt5c0DJe/bHXK1eHgDmdiA=="],
+
+    "@tailwindcss/oxide-linux-arm64-gnu": ["@tailwindcss/oxide-linux-arm64-gnu@4.1.18", "", { "os": "linux", "cpu": "arm64" }, "sha512-S0n3jboLysNbh55Vrt7pk9wgpyTTPD0fdQeh7wQfMqLPM/Hrxi+dVsLsPrycQjGKEQk85Kgbx+6+QnYNiHalnw=="],
+
+    "@tailwindcss/oxide-linux-arm64-musl": ["@tailwindcss/oxide-linux-arm64-musl@4.1.18", "", { "os": "linux", "cpu": "arm64" }, "sha512-1px92582HkPQlaaCkdRcio71p8bc8i/ap5807tPRDK/uw953cauQBT8c5tVGkOwrHMfc2Yh6UuxaH4vtTjGvHg=="],
+
+    "@tailwindcss/oxide-linux-x64-gnu": ["@tailwindcss/oxide-linux-x64-gnu@4.1.18", "", { "os": "linux", "cpu": "x64" }, "sha512-v3gyT0ivkfBLoZGF9LyHmts0Isc8jHZyVcbzio6Wpzifg/+5ZJpDiRiUhDLkcr7f/r38SWNe7ucxmGW3j3Kb/g=="],
+
+    "@tailwindcss/oxide-linux-x64-musl": ["@tailwindcss/oxide-linux-x64-musl@4.1.18", "", { "os": "linux", "cpu": "x64" }, "sha512-bhJ2y2OQNlcRwwgOAGMY0xTFStt4/wyU6pvI6LSuZpRgKQwxTec0/3Scu91O8ir7qCR3AuepQKLU/kX99FouqQ=="],
+
+    "@tailwindcss/oxide-wasm32-wasi": ["@tailwindcss/oxide-wasm32-wasi@4.1.18", "", { "dependencies": { "@emnapi/core": "^1.7.1", "@emnapi/runtime": "^1.7.1", "@emnapi/wasi-threads": "^1.1.0", "@napi-rs/wasm-runtime": "^1.1.0", "@tybys/wasm-util": "^0.10.1", "tslib": "^2.4.0" }, "cpu": "none" }, "sha512-LffYTvPjODiP6PT16oNeUQJzNVyJl1cjIebq/rWWBF+3eDst5JGEFSc5cWxyRCJ0Mxl+KyIkqRxk1XPEs9x8TA=="],
+
+    "@tailwindcss/oxide-win32-arm64-msvc": ["@tailwindcss/oxide-win32-arm64-msvc@4.1.18", "", { "os": "win32", "cpu": "arm64" }, "sha512-HjSA7mr9HmC8fu6bdsZvZ+dhjyGCLdotjVOgLA2vEqxEBZaQo9YTX4kwgEvPCpRh8o4uWc4J/wEoFzhEmjvPbA=="],
+
+    "@tailwindcss/oxide-win32-x64-msvc": ["@tailwindcss/oxide-win32-x64-msvc@4.1.18", "", { "os": "win32", "cpu": "x64" }, "sha512-bJWbyYpUlqamC8dpR7pfjA0I7vdF6t5VpUGMWRkXVE3AXgIZjYUYAK7II1GNaxR8J1SSrSrppRar8G++JekE3Q=="],
+
+    "@tailwindcss/postcss": ["@tailwindcss/postcss@4.1.18", "", { "dependencies": { "@alloc/quick-lru": "^5.2.0", "@tailwindcss/node": "4.1.18", "@tailwindcss/oxide": "4.1.18", "postcss": "^8.4.41", "tailwindcss": "4.1.18" } }, "sha512-Ce0GFnzAOuPyfV5SxjXGn0CubwGcuDB0zcdaPuCSzAa/2vII24JTkH+I6jcbXLb1ctjZMZZI6OjDaLPJQL1S0g=="],
+
+    "@tailwindcss/typography": ["@tailwindcss/typography@0.5.19", "", { "dependencies": { "postcss-selector-parser": "6.0.10" }, "peerDependencies": { "tailwindcss": ">=3.0.0 || insiders || >=4.0.0-alpha.20 || >=4.0.0-beta.1" } }, "sha512-w31dd8HOx3k9vPtcQh5QHP9GwKcgbMp87j58qi6xgiBnFFtKEAgCWnDw4qUT8aHwkCp8bKvb/KGKWWHedP0AAg=="],
+
+    "@tailwindcss/vite": ["@tailwindcss/vite@4.1.18", "", { "dependencies": { "@tailwindcss/node": "4.1.18", "@tailwindcss/oxide": "4.1.18", "tailwindcss": "4.1.18" }, "peerDependencies": { "vite": "^5.2.0 || ^6 || ^7" } }, "sha512-jVA+/UpKL1vRLg6Hkao5jldawNmRo7mQYrZtNHMIVpLfLhDml5nMRUo/8MwoX2vNXvnaXNNMedrMfMugAVX1nA=="],
+
+    "@trivago/prettier-plugin-sort-imports": ["@trivago/prettier-plugin-sort-imports@5.2.2", "", { "dependencies": { "@babel/generator": "^7.26.5", "@babel/parser": "^7.26.7", "@babel/traverse": "^7.26.7", "@babel/types": "^7.26.7", "javascript-natural-sort": "^0.7.1", "lodash": "^4.17.21" }, "peerDependencies": { "@vue/compiler-sfc": "3.x", "prettier": "2.x - 3.x", "prettier-plugin-svelte": "3.x", "svelte": "4.x || 5.x" }, "optionalPeers": ["@vue/compiler-sfc", "prettier-plugin-svelte", "svelte"] }, "sha512-fYDQA9e6yTNmA13TLVSA+WMQRc5Bn/c0EUBditUHNfMMxN7M82c38b1kEggVE3pLpZ0FwkwJkUEKMiOi52JXFA=="],
+
+    "@types/estree": ["@types/estree@1.0.8", "", {}, "sha512-dWHzHa2WqEXI/O1E9OjrocMTKJl2mSrEolh1Iomrv6U+JuNwaHXsXx9bLu5gG7BUWFIN0skIQJQ/L1rIex4X6w=="],
+
+    "@types/json-schema": ["@types/json-schema@7.0.15", "", {}, "sha512-5+fP8P8MFNC+AyZCDxrB2pkZFPGzqQWUzpSeuuVLvm8VMcorNYavBqoFcxK8bQz4Qsbn4oUEEem4wDLfcysGHA=="],
+
+    "@types/node": ["@types/node@24.10.9", "", { "dependencies": { "undici-types": "~7.16.0" } }, "sha512-ne4A0IpG3+2ETuREInjPNhUGis1SFjv1d5asp8MzEAGtOZeTeHVDOYqOgqfhvseqg/iXty2hjBf1zAOb7RNiNw=="],
+
+    "@types/react": ["@types/react@19.2.9", "", { "dependencies": { "csstype": "^3.2.2" } }, "sha512-Lpo8kgb/igvMIPeNV2rsYKTgaORYdO1XGVZ4Qz3akwOj0ySGYMPlQWa8BaLn0G63D1aSaAQ5ldR06wCpChQCjA=="],
+
+    "@types/react-dom": ["@types/react-dom@19.2.3", "", { "peerDependencies": { "@types/react": "^19.2.0" } }, "sha512-jp2L/eY6fn+KgVVQAOqYItbF0VY/YApe5Mz2F0aykSO8gx31bYCZyvSeYxCHKvzHG5eZjc+zyaS5BrBWya2+kQ=="],
+
+    "@typescript-eslint/eslint-plugin": ["@typescript-eslint/eslint-plugin@8.53.1", "", { "dependencies": { "@eslint-community/regexpp": "^4.12.2", "@typescript-eslint/scope-manager": "8.53.1", "@typescript-eslint/type-utils": "8.53.1", "@typescript-eslint/utils": "8.53.1", "@typescript-eslint/visitor-keys": "8.53.1", "ignore": "^7.0.5", "natural-compare": "^1.4.0", "ts-api-utils": "^2.4.0" }, "peerDependencies": { "@typescript-eslint/parser": "^8.53.1", "eslint": "^8.57.0 || ^9.0.0", "typescript": ">=4.8.4 <6.0.0" } }, "sha512-cFYYFZ+oQFi6hUnBTbLRXfTJiaQtYE3t4O692agbBl+2Zy+eqSKWtPjhPXJu1G7j4RLjKgeJPDdq3EqOwmX5Ag=="],
+
+    "@typescript-eslint/parser": ["@typescript-eslint/parser@8.53.1", "", { "dependencies": { "@typescript-eslint/scope-manager": "8.53.1", "@typescript-eslint/types": "8.53.1", "@typescript-eslint/typescript-estree": "8.53.1", "@typescript-eslint/visitor-keys": "8.53.1", "debug": "^4.4.3" }, "peerDependencies": { "eslint": "^8.57.0 || ^9.0.0", "typescript": ">=4.8.4 <6.0.0" } }, "sha512-nm3cvFN9SqZGXjmw5bZ6cGmvJSyJPn0wU9gHAZZHDnZl2wF9PhHv78Xf06E0MaNk4zLVHL8hb2/c32XvyJOLQg=="],
+
+    "@typescript-eslint/project-service": ["@typescript-eslint/project-service@8.53.1", "", { "dependencies": { "@typescript-eslint/tsconfig-utils": "^8.53.1", "@typescript-eslint/types": "^8.53.1", "debug": "^4.4.3" }, "peerDependencies": { "typescript": ">=4.8.4 <6.0.0" } }, "sha512-WYC4FB5Ra0xidsmlPb+1SsnaSKPmS3gsjIARwbEkHkoWloQmuzcfypljaJcR78uyLA1h8sHdWWPHSLDI+MtNog=="],
+
+    "@typescript-eslint/scope-manager": ["@typescript-eslint/scope-manager@8.53.1", "", { "dependencies": { "@typescript-eslint/types": "8.53.1", "@typescript-eslint/visitor-keys": "8.53.1" } }, "sha512-Lu23yw1uJMFY8cUeq7JlrizAgeQvWugNQzJp8C3x8Eo5Jw5Q2ykMdiiTB9vBVOOUBysMzmRRmUfwFrZuI2C4SQ=="],
+
+    "@typescript-eslint/tsconfig-utils": ["@typescript-eslint/tsconfig-utils@8.53.1", "", { "peerDependencies": { "typescript": ">=4.8.4 <6.0.0" } }, "sha512-qfvLXS6F6b1y43pnf0pPbXJ+YoXIC7HKg0UGZ27uMIemKMKA6XH2DTxsEDdpdN29D+vHV07x/pnlPNVLhdhWiA=="],
+
+    "@typescript-eslint/type-utils": ["@typescript-eslint/type-utils@8.53.1", "", { "dependencies": { "@typescript-eslint/types": "8.53.1", "@typescript-eslint/typescript-estree": "8.53.1", "@typescript-eslint/utils": "8.53.1", "debug": "^4.4.3", "ts-api-utils": "^2.4.0" }, "peerDependencies": { "eslint": "^8.57.0 || ^9.0.0", "typescript": ">=4.8.4 <6.0.0" } }, "sha512-MOrdtNvyhy0rHyv0ENzub1d4wQYKb2NmIqG7qEqPWFW7Mpy2jzFC3pQ2yKDvirZB7jypm5uGjF2Qqs6OIqu47w=="],
+
+    "@typescript-eslint/types": ["@typescript-eslint/types@8.53.1", "", {}, "sha512-jr/swrr2aRmUAUjW5/zQHbMaui//vQlsZcJKijZf3M26bnmLj8LyZUpj8/Rd6uzaek06OWsqdofN/Thenm5O8A=="],
+
+    "@typescript-eslint/typescript-estree": ["@typescript-eslint/typescript-estree@8.53.1", "", { "dependencies": { "@typescript-eslint/project-service": "8.53.1", "@typescript-eslint/tsconfig-utils": "8.53.1", "@typescript-eslint/types": "8.53.1", "@typescript-eslint/visitor-keys": "8.53.1", "debug": "^4.4.3", "minimatch": "^9.0.5", "semver": "^7.7.3", "tinyglobby": "^0.2.15", "ts-api-utils": "^2.4.0" }, "peerDependencies": { "typescript": ">=4.8.4 <6.0.0" } }, "sha512-RGlVipGhQAG4GxV1s34O91cxQ/vWiHJTDHbXRr0li2q/BGg3RR/7NM8QDWgkEgrwQYCvmJV9ichIwyoKCQ+DTg=="],
+
+    "@typescript-eslint/utils": ["@typescript-eslint/utils@8.53.1", "", { "dependencies": { "@eslint-community/eslint-utils": "^4.9.1", "@typescript-eslint/scope-manager": "8.53.1", "@typescript-eslint/types": "8.53.1", "@typescript-eslint/typescript-estree": "8.53.1" }, "peerDependencies": { "eslint": "^8.57.0 || ^9.0.0", "typescript": ">=4.8.4 <6.0.0" } }, "sha512-c4bMvGVWW4hv6JmDUEG7fSYlWOl3II2I4ylt0NM+seinYQlZMQIaKaXIIVJWt9Ofh6whrpM+EdDQXKXjNovvrg=="],
+
+    "@typescript-eslint/visitor-keys": ["@typescript-eslint/visitor-keys@8.53.1", "", { "dependencies": { "@typescript-eslint/types": "8.53.1", "eslint-visitor-keys": "^4.2.1" } }, "sha512-oy+wV7xDKFPRyNggmXuZQSBzvoLnpmJs+GhzRhPjrxl2b/jIlyjVokzm47CZCDUdXKr2zd7ZLodPfOBpOPyPlg=="],
+
+    "@untitledui/file-icons": ["@untitledui/file-icons@0.0.8", "", { "peerDependencies": { "react": ">= 18" } }, "sha512-lxOp2rreDedjD82SOKoETmCDhm5TckCD3y49EEsuZqxnFES/3bfg9drNiilOCOAuEco7ImvdB4L//I//B93asw=="],
+
+    "@untitledui/icons": ["@untitledui/icons@0.0.21", "", { "peerDependencies": { "react": ">= 16" } }, "sha512-+aVWUw/1se9PIJgwMD3qp5ohynGlVNu2oHSLzMwYpiSFp6bFcxv4kUGy685hQXB/hE4WAqnp7dIEVVMD0tfL7w=="],
+
+    "@vitejs/plugin-react-swc": ["@vitejs/plugin-react-swc@4.2.2", "", { "dependencies": { "@rolldown/pluginutils": "1.0.0-beta.47", "@swc/core": "^1.13.5" }, "peerDependencies": { "vite": "^4 || ^5 || ^6 || ^7" } }, "sha512-x+rE6tsxq/gxrEJN3Nv3dIV60lFflPj94c90b+NNo6n1QV1QQUTLoL0MpaOVasUZ0zqVBn7ead1B5ecx1JAGfA=="],
+
+    "acorn": ["acorn@8.15.0", "", { "bin": { "acorn": "bin/acorn" } }, "sha512-NZyJarBfL7nWwIq+FDL6Zp/yHEhePMNnnJ0y3qfieCrmNvYct8uvtiV41UvlSe6apAfk0fY1FbWx+NwfmpvtTg=="],
+
+    "acorn-jsx": ["acorn-jsx@5.3.2", "", { "peerDependencies": { "acorn": "^6.0.0 || ^7.0.0 || ^8.0.0" } }, "sha512-rq9s+JNhf0IChjtDXxllJ7g41oZk5SlXtp0LHwyA5cejwn7vKmKp4pPri6YEePv2PU65sAsegbXtIinmDFDXgQ=="],
+
+    "ajv": ["ajv@6.12.6", "", { "dependencies": { "fast-deep-equal": "^3.1.1", "fast-json-stable-stringify": "^2.0.0", "json-schema-traverse": "^0.4.1", "uri-js": "^4.2.2" } }, "sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g=="],
+
+    "ansi-styles": ["ansi-styles@4.3.0", "", { "dependencies": { "color-convert": "^2.0.1" } }, "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg=="],
+
+    "argparse": ["argparse@2.0.1", "", {}, "sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q=="],
+
+    "balanced-match": ["balanced-match@1.0.2", "", {}, "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw=="],
+
+    "brace-expansion": ["brace-expansion@2.0.2", "", { "dependencies": { "balanced-match": "^1.0.0" } }, "sha512-Jt0vHyM+jmUBqojB7E1NIYadt0vI0Qxjxd2TErW94wDz+E2LAm5vKMXXwg6ZZBTHPuUlDgQHKXvjGBdfcF1ZDQ=="],
+
+    "callsites": ["callsites@3.1.0", "", {}, "sha512-P8BjAsXvZS+VIDUI11hHCQEv74YT67YUi5JJFNWIqL235sBmjX4+qx9Muvls5ivyNENctx46xQLQ3aTuE7ssaQ=="],
+
+    "chalk": ["chalk@4.1.2", "", { "dependencies": { "ansi-styles": "^4.1.0", "supports-color": "^7.1.0" } }, "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA=="],
+
+    "client-only": ["client-only@0.0.1", "", {}, "sha512-IV3Ou0jSMzZrd3pZ48nLkT9DA7Ag1pnPzaiQhpW7c3RbcqqzvzzVu+L8gfqMp/8IM2MQtSiqaCxrrcfu8I8rMA=="],
+
+    "clsx": ["clsx@2.1.1", "", {}, "sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA=="],
+
+    "color-convert": ["color-convert@2.0.1", "", { "dependencies": { "color-name": "~1.1.4" } }, "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ=="],
+
+    "color-name": ["color-name@1.1.4", "", {}, "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA=="],
+
+    "concat-map": ["concat-map@0.0.1", "", {}, "sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg=="],
+
+    "cookie": ["cookie@1.1.1", "", {}, "sha512-ei8Aos7ja0weRpFzJnEA9UHJ/7XQmqglbRwnf2ATjcB9Wq874VKH9kfjjirM6UhU2/E5fFYadylyhFldcqSidQ=="],
+
+    "cross-spawn": ["cross-spawn@7.0.6", "", { "dependencies": { "path-key": "^3.1.0", "shebang-command": "^2.0.0", "which": "^2.0.1" } }, "sha512-uV2QOWP2nWzsy2aMp8aRibhi9dlzF5Hgh5SHaB9OiTGEyDTiJJyx0uy51QXdyWbtAHNua4XJzUKca3OzKUd3vA=="],
+
+    "cssesc": ["cssesc@3.0.0", "", { "bin": { "cssesc": "bin/cssesc" } }, "sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg=="],
+
+    "csstype": ["csstype@3.2.3", "", {}, "sha512-z1HGKcYy2xA8AGQfwrn0PAy+PB7X/GSj3UVJW9qKyn43xWa+gl5nXmU4qqLMRzWVLFC8KusUX8T/0kCiOYpAIQ=="],
+
+    "debug": ["debug@4.4.3", "", { "dependencies": { "ms": "^2.1.3" } }, "sha512-RGwwWnwQvkVfavKVt22FGLw+xYSdzARwm0ru6DhTVA3umU5hZc28V3kO4stgYryrTlLpuvgI9GiijltAjNbcqA=="],
+
+    "decimal.js": ["decimal.js@10.6.0", "", {}, "sha512-YpgQiITW3JXGntzdUmyUR1V812Hn8T1YVXhCu+wO3OpS4eU9l4YdD3qjyiKdV6mvV29zapkMeD390UVEf2lkUg=="],
+
+    "deep-is": ["deep-is@0.1.4", "", {}, "sha512-oIPzksmTg4/MriiaYGO+okXDT7ztn/w3Eptv/+gSIdMdKsJo0u4CfYNFJPy+4SKMuCqGw2wxnA+URMg3t8a/bQ=="],
+
+    "detect-libc": ["detect-libc@2.1.2", "", {}, "sha512-Btj2BOOO83o3WyH59e8MgXsxEQVcarkUOpEYrubB0urwnN10yQ364rsiByU11nZlqWYZm05i/of7io4mzihBtQ=="],
+
+    "enhanced-resolve": ["enhanced-resolve@5.18.4", "", { "dependencies": { "graceful-fs": "^4.2.4", "tapable": "^2.2.0" } }, "sha512-LgQMM4WXU3QI+SYgEc2liRgznaD5ojbmY3sb8LxyguVkIg5FxdpTkvk72te2R38/TGKxH634oLxXRGY6d7AP+Q=="],
+
+    "esbuild": ["esbuild@0.27.2", "", { "optionalDependencies": { "@esbuild/aix-ppc64": "0.27.2", "@esbuild/android-arm": "0.27.2", "@esbuild/android-arm64": "0.27.2", "@esbuild/android-x64": "0.27.2", "@esbuild/darwin-arm64": "0.27.2", "@esbuild/darwin-x64": "0.27.2", "@esbuild/freebsd-arm64": "0.27.2", "@esbuild/freebsd-x64": "0.27.2", "@esbuild/linux-arm": "0.27.2", "@esbuild/linux-arm64": "0.27.2", "@esbuild/linux-ia32": "0.27.2", "@esbuild/linux-loong64": "0.27.2", "@esbuild/linux-mips64el": "0.27.2", "@esbuild/linux-ppc64": "0.27.2", "@esbuild/linux-riscv64": "0.27.2", "@esbuild/linux-s390x": "0.27.2", "@esbuild/linux-x64": "0.27.2", "@esbuild/netbsd-arm64": "0.27.2", "@esbuild/netbsd-x64": "0.27.2", "@esbuild/openbsd-arm64": "0.27.2", "@esbuild/openbsd-x64": "0.27.2", "@esbuild/openharmony-arm64": "0.27.2", "@esbuild/sunos-x64": "0.27.2", "@esbuild/win32-arm64": "0.27.2", "@esbuild/win32-ia32": "0.27.2", "@esbuild/win32-x64": "0.27.2" }, "bin": { "esbuild": "bin/esbuild" } }, "sha512-HyNQImnsOC7X9PMNaCIeAm4ISCQXs5a5YasTXVliKv4uuBo1dKrG0A+uQS8M5eXjVMnLg3WgXaKvprHlFJQffw=="],
+
+    "escape-string-regexp": ["escape-string-regexp@4.0.0", "", {}, "sha512-TtpcNJ3XAzx3Gq8sWRzJaVajRs0uVxA2YAkdb1jm2YkPz4G6egUFAyA3n5vtEIZefPk5Wa4UXbKuS5fKkJWdgA=="],
+
+    "eslint": ["eslint@9.39.2", "", { "dependencies": { "@eslint-community/eslint-utils": "^4.8.0", "@eslint-community/regexpp": "^4.12.1", "@eslint/config-array": "^0.21.1", "@eslint/config-helpers": "^0.4.2", "@eslint/core": "^0.17.0", "@eslint/eslintrc": "^3.3.1", "@eslint/js": "9.39.2", "@eslint/plugin-kit": "^0.4.1", "@humanfs/node": "^0.16.6", "@humanwhocodes/module-importer": "^1.0.1", "@humanwhocodes/retry": "^0.4.2", "@types/estree": "^1.0.6", "ajv": "^6.12.4", "chalk": "^4.0.0", "cross-spawn": "^7.0.6", "debug": "^4.3.2", "escape-string-regexp": "^4.0.0", "eslint-scope": "^8.4.0", "eslint-visitor-keys": "^4.2.1", "espree": "^10.4.0", "esquery": "^1.5.0", "esutils": "^2.0.2", "fast-deep-equal": "^3.1.3", "file-entry-cache": "^8.0.0", "find-up": "^5.0.0", "glob-parent": "^6.0.2", "ignore": "^5.2.0", "imurmurhash": "^0.1.4", "is-glob": "^4.0.0", "json-stable-stringify-without-jsonify": "^1.0.1", "lodash.merge": "^4.6.2", "minimatch": "^3.1.2", "natural-compare": "^1.4.0", "optionator": "^0.9.3" }, "peerDependencies": { "jiti": "*" }, "optionalPeers": ["jiti"], "bin": { "eslint": "bin/eslint.js" } }, "sha512-LEyamqS7W5HB3ujJyvi0HQK/dtVINZvd5mAAp9eT5S/ujByGjiZLCzPcHVzuXbpJDJF/cxwHlfceVUDZ2lnSTw=="],
+
+    "eslint-scope": ["eslint-scope@8.4.0", "", { "dependencies": { "esrecurse": "^4.3.0", "estraverse": "^5.2.0" } }, "sha512-sNXOfKCn74rt8RICKMvJS7XKV/Xk9kA7DyJr8mJik3S7Cwgy3qlkkmyS2uQB3jiJg6VNdZd/pDBJu0nvG2NlTg=="],
+
+    "eslint-visitor-keys": ["eslint-visitor-keys@4.2.1", "", {}, "sha512-Uhdk5sfqcee/9H/rCOJikYz67o0a2Tw2hGRPOG2Y1R2dg7brRe1uG0yaNQDHu+TO/uQPF/5eCapvYSmHUjt7JQ=="],
+
+    "espree": ["espree@10.4.0", "", { "dependencies": { "acorn": "^8.15.0", "acorn-jsx": "^5.3.2", "eslint-visitor-keys": "^4.2.1" } }, "sha512-j6PAQ2uUr79PZhBjP5C5fhl8e39FmRnOjsD5lGnWrFU8i2G776tBK7+nP8KuQUTTyAZUwfQqXAgrVH5MbH9CYQ=="],
+
+    "esquery": ["esquery@1.7.0", "", { "dependencies": { "estraverse": "^5.1.0" } }, "sha512-Ap6G0WQwcU/LHsvLwON1fAQX9Zp0A2Y6Y/cJBl9r/JbW90Zyg4/zbG6zzKa2OTALELarYHmKu0GhpM5EO+7T0g=="],
+
+    "esrecurse": ["esrecurse@4.3.0", "", { "dependencies": { "estraverse": "^5.2.0" } }, "sha512-KmfKL3b6G+RXvP8N1vr3Tq1kL/oCFgn2NYXEtqP8/L3pKapUA4G8cFVaoF3SU323CD4XypR/ffioHmkti6/Tag=="],
+
+    "estraverse": ["estraverse@5.3.0", "", {}, "sha512-MMdARuVEQziNTeJD8DgMqmhwR11BRQ/cBP+pLtYdSTnf3MIO8fFeiINEbX36ZdNlfU/7A9f3gUw49B3oQsvwBA=="],
+
+    "esutils": ["esutils@2.0.3", "", {}, "sha512-kVscqXk4OCp68SZ0dkgEKVi6/8ij300KBWTJq32P/dYeWTSwK41WyTxalN1eRmA5Z9UU/LX9D7FWSmV9SAYx6g=="],
+
+    "fast-deep-equal": ["fast-deep-equal@3.1.3", "", {}, "sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q=="],
+
+    "fast-json-stable-stringify": ["fast-json-stable-stringify@2.1.0", "", {}, "sha512-lhd/wF+Lk98HZoTCtlVraHtfh5XYijIjalXck7saUtuanSDyLMxnHhSXEDJqHxD7msR8D0uCmqlkwjCV8xvwHw=="],
+
+    "fast-levenshtein": ["fast-levenshtein@2.0.6", "", {}, "sha512-DCXu6Ifhqcks7TZKY3Hxp3y6qphY5SJZmrWMDrKcERSOXWQdMhU9Ig/PYrzyw/ul9jOIyh0N4M0tbC5hodg8dw=="],
+
+    "fdir": ["fdir@6.5.0", "", { "peerDependencies": { "picomatch": "^3 || ^4" }, "optionalPeers": ["picomatch"] }, "sha512-tIbYtZbucOs0BRGqPJkshJUYdL+SDH7dVM8gjy+ERp3WAUjLEFJE+02kanyHtwjWOnwrKYBiwAmM0p4kLJAnXg=="],
+
+    "file-entry-cache": ["file-entry-cache@8.0.0", "", { "dependencies": { "flat-cache": "^4.0.0" } }, "sha512-XXTUwCvisa5oacNGRP9SfNtYBNAMi+RPwBFmblZEF7N7swHYQS6/Zfk7SRwx4D5j3CH211YNRco1DEMNVfZCnQ=="],
+
+    "find-up": ["find-up@5.0.0", "", { "dependencies": { "locate-path": "^6.0.0", "path-exists": "^4.0.0" } }, "sha512-78/PXT1wlLLDgTzDs7sjq9hzz0vXD+zn+7wypEe4fXQxCmdmqfGsEPQxmiCSQI3ajFV91bVSsvNtrJRiW6nGng=="],
+
+    "flat-cache": ["flat-cache@4.0.1", "", { "dependencies": { "flatted": "^3.2.9", "keyv": "^4.5.4" } }, "sha512-f7ccFPK3SXFHpx15UIGyRJ/FJQctuKZ0zVuN3frBo4HnK3cay9VEW0R6yPYFHC0AgqhukPzKjq22t5DmAyqGyw=="],
+
+    "flatted": ["flatted@3.3.3", "", {}, "sha512-GX+ysw4PBCz0PzosHDepZGANEuFCMLrnRTiEy9McGjmkCQYwRq4A/X786G/fjM/+OjsWSU1ZrY5qyARZmO/uwg=="],
+
+    "framer-motion": ["framer-motion@12.29.0", "", { "dependencies": { "motion-dom": "^12.29.0", "motion-utils": "^12.27.2", "tslib": "^2.4.0" }, "peerDependencies": { "@emotion/is-prop-valid": "*", "react": "^18.0.0 || ^19.0.0", "react-dom": "^18.0.0 || ^19.0.0" }, "optionalPeers": ["@emotion/is-prop-valid", "react", "react-dom"] }, "sha512-1gEFGXHYV2BD42ZPTFmSU9buehppU+bCuOnHU0AD18DKh9j4DuTx47MvqY5ax+NNWRtK32qIcJf1UxKo1WwjWg=="],
+
+    "fsevents": ["fsevents@2.3.3", "", { "os": "darwin" }, "sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw=="],
+
+    "glob-parent": ["glob-parent@6.0.2", "", { "dependencies": { "is-glob": "^4.0.3" } }, "sha512-XxwI8EOhVQgWp6iDL+3b0r86f4d6AX6zSU55HfB4ydCEuXLXc5FcYeOu+nnGftS4TEju/11rt4KJPTMgbfmv4A=="],
+
+    "globals": ["globals@16.5.0", "", {}, "sha512-c/c15i26VrJ4IRt5Z89DnIzCGDn9EcebibhAOjw5ibqEHsE1wLUgkPn9RDmNcUKyU87GeaL633nyJ+pplFR2ZQ=="],
+
+    "graceful-fs": ["graceful-fs@4.2.11", "", {}, "sha512-RbJ5/jmFcNNCcDV5o9eTnBLJ/HszWV0P73bc+Ff4nS/rJj+YaS6IGyiOL0VoBYX+l1Wrl3k63h/KrH+nhJ0XvQ=="],
+
+    "has-flag": ["has-flag@4.0.0", "", {}, "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ=="],
+
+    "ignore": ["ignore@7.0.5", "", {}, "sha512-Hs59xBNfUIunMFgWAbGX5cq6893IbWg4KnrjbYwX3tx0ztorVgTDA6B2sxf8ejHJ4wz8BqGUMYlnzNBer5NvGg=="],
+
+    "import-fresh": ["import-fresh@3.3.1", "", { "dependencies": { "parent-module": "^1.0.0", "resolve-from": "^4.0.0" } }, "sha512-TR3KfrTZTYLPB6jUjfx6MF9WcWrHL9su5TObK4ZkYgBdWKPOFoSoQIdEuTuR82pmtxH2spWG9h6etwfr1pLBqQ=="],
+
+    "imurmurhash": ["imurmurhash@0.1.4", "", {}, "sha512-JmXMZ6wuvDmLiHEml9ykzqO6lwFbof0GG4IkcGaENdCRDDmMVnny7s5HsIgHCbaq0w2MyPhDqkhTUgS2LU2PHA=="],
+
+    "input-otp": ["input-otp@1.4.2", "", { "peerDependencies": { "react": "^16.8 || ^17.0 || ^18.0 || ^19.0.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0.0 || ^19.0.0-rc" } }, "sha512-l3jWwYNvrEa6NTCt7BECfCm48GvwuZzkoeG3gBL2w4CHeOXW3eKFmf9UNYkNfYc3mxMrthMnxjIE07MT0zLBQA=="],
+
+    "intl-messageformat": ["intl-messageformat@10.7.18", "", { "dependencies": { "@formatjs/ecma402-abstract": "2.3.6", "@formatjs/fast-memoize": "2.2.7", "@formatjs/icu-messageformat-parser": "2.11.4", "tslib": "^2.8.0" } }, "sha512-m3Ofv/X/tV8Y3tHXLohcuVuhWKo7BBq62cqY15etqmLxg2DZ34AGGgQDeR+SCta2+zICb1NX83af0GJmbQ1++g=="],
+
+    "is-extglob": ["is-extglob@2.1.1", "", {}, "sha512-SbKbANkN603Vi4jEZv49LeVJMn4yGwsbzZworEoyEiutsN3nJYdbO36zfhGJ6QEDpOZIFkDtnq5JRxmvl3jsoQ=="],
+
+    "is-glob": ["is-glob@4.0.3", "", { "dependencies": { "is-extglob": "^2.1.1" } }, "sha512-xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxhLSnrwRr4elSSg=="],
+
+    "isexe": ["isexe@2.0.0", "", {}, "sha512-RHxMLp9lnKHGHRng9QFhRCMbYAcVpn69smSGcq3f36xjgVVWThj4qqLbTLlq7Ssj8B+fIQ1EuCEGI2lKsyQeIw=="],
+
+    "javascript-natural-sort": ["javascript-natural-sort@0.7.1", "", {}, "sha512-nO6jcEfZWQXDhOiBtG2KvKyEptz7RVbpGP4vTD2hLBdmNQSsCiicO2Ioinv6UI4y9ukqnBpy+XZ9H6uLNgJTlw=="],
+
+    "jiti": ["jiti@2.6.1", "", { "bin": { "jiti": "lib/jiti-cli.mjs" } }, "sha512-ekilCSN1jwRvIbgeg/57YFh8qQDNbwDb9xT/qu2DAHbFFZUicIl4ygVaAvzveMhMVr3LnpSKTNnwt8PoOfmKhQ=="],
+
+    "js-tokens": ["js-tokens@4.0.0", "", {}, "sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ=="],
+
+    "js-yaml": ["js-yaml@4.1.1", "", { "dependencies": { "argparse": "^2.0.1" }, "bin": { "js-yaml": "bin/js-yaml.js" } }, "sha512-qQKT4zQxXl8lLwBtHMWwaTcGfFOZviOJet3Oy/xmGk2gZH677CJM9EvtfdSkgWcATZhj/55JZ0rmy3myCT5lsA=="],
+
+    "jsesc": ["jsesc@3.1.0", "", { "bin": { "jsesc": "bin/jsesc" } }, "sha512-/sM3dO2FOzXjKQhJuo0Q173wf2KOo8t4I8vHy6lF9poUp7bKT0/NHE8fPX23PwfhnykfqnC2xRxOnVw5XuGIaA=="],
+
+    "json-buffer": ["json-buffer@3.0.1", "", {}, "sha512-4bV5BfR2mqfQTJm+V5tPPdf+ZpuhiIvTuAB5g8kcrXOZpTT/QwwVRWBywX1ozr6lEuPdbHxwaJlm9G6mI2sfSQ=="],
+
+    "json-schema-traverse": ["json-schema-traverse@0.4.1", "", {}, "sha512-xbbCH5dCYU5T8LcEhhuh7HJ88HXuW3qsI3Y0zOZFKfZEHcpWiHU/Jxzk629Brsab/mMiHQti9wMP+845RPe3Vg=="],
+
+    "json-stable-stringify-without-jsonify": ["json-stable-stringify-without-jsonify@1.0.1", "", {}, "sha512-Bdboy+l7tA3OGW6FjyFHWkP5LuByj1Tk33Ljyq0axyzdk9//JSi2u3fP1QSmd1KNwq6VOKYGlAu87CisVir6Pw=="],
+
+    "keyv": ["keyv@4.5.4", "", { "dependencies": { "json-buffer": "3.0.1" } }, "sha512-oxVHkHR/EJf2CNXnWxRLW6mg7JyCCUcG0DtEGmL2ctUo1PNTin1PUil+r/+4r5MpVgC/fn1kjsx7mjSujKqIpw=="],
+
+    "levn": ["levn@0.4.1", "", { "dependencies": { "prelude-ls": "^1.2.1", "type-check": "~0.4.0" } }, "sha512-+bT2uH4E5LGE7h/n3evcS/sQlJXCpIp6ym8OWJ5eV6+67Dsql/LaaT7qJBAt2rzfoa/5QBGBhxDix1dMt2kQKQ=="],
+
+    "lightningcss": ["lightningcss@1.30.2", "", { "dependencies": { "detect-libc": "^2.0.3" }, "optionalDependencies": { "lightningcss-android-arm64": "1.30.2", "lightningcss-darwin-arm64": "1.30.2", "lightningcss-darwin-x64": "1.30.2", "lightningcss-freebsd-x64": "1.30.2", "lightningcss-linux-arm-gnueabihf": "1.30.2", "lightningcss-linux-arm64-gnu": "1.30.2", "lightningcss-linux-arm64-musl": "1.30.2", "lightningcss-linux-x64-gnu": "1.30.2", "lightningcss-linux-x64-musl": "1.30.2", "lightningcss-win32-arm64-msvc": "1.30.2", "lightningcss-win32-x64-msvc": "1.30.2" } }, "sha512-utfs7Pr5uJyyvDETitgsaqSyjCb2qNRAtuqUeWIAKztsOYdcACf2KtARYXg2pSvhkt+9NfoaNY7fxjl6nuMjIQ=="],
+
+    "lightningcss-android-arm64": ["lightningcss-android-arm64@1.30.2", "", { "os": "android", "cpu": "arm64" }, "sha512-BH9sEdOCahSgmkVhBLeU7Hc9DWeZ1Eb6wNS6Da8igvUwAe0sqROHddIlvU06q3WyXVEOYDZ6ykBZQnjTbmo4+A=="],
+
+    "lightningcss-darwin-arm64": ["lightningcss-darwin-arm64@1.30.2", "", { "os": "darwin", "cpu": "arm64" }, "sha512-ylTcDJBN3Hp21TdhRT5zBOIi73P6/W0qwvlFEk22fkdXchtNTOU4Qc37SkzV+EKYxLouZ6M4LG9NfZ1qkhhBWA=="],
+
+    "lightningcss-darwin-x64": ["lightningcss-darwin-x64@1.30.2", "", { "os": "darwin", "cpu": "x64" }, "sha512-oBZgKchomuDYxr7ilwLcyms6BCyLn0z8J0+ZZmfpjwg9fRVZIR5/GMXd7r9RH94iDhld3UmSjBM6nXWM2TfZTQ=="],
+
+    "lightningcss-freebsd-x64": ["lightningcss-freebsd-x64@1.30.2", "", { "os": "freebsd", "cpu": "x64" }, "sha512-c2bH6xTrf4BDpK8MoGG4Bd6zAMZDAXS569UxCAGcA7IKbHNMlhGQ89eRmvpIUGfKWNVdbhSbkQaWhEoMGmGslA=="],
+
+    "lightningcss-linux-arm-gnueabihf": ["lightningcss-linux-arm-gnueabihf@1.30.2", "", { "os": "linux", "cpu": "arm" }, "sha512-eVdpxh4wYcm0PofJIZVuYuLiqBIakQ9uFZmipf6LF/HRj5Bgm0eb3qL/mr1smyXIS1twwOxNWndd8z0E374hiA=="],
+
+    "lightningcss-linux-arm64-gnu": ["lightningcss-linux-arm64-gnu@1.30.2", "", { "os": "linux", "cpu": "arm64" }, "sha512-UK65WJAbwIJbiBFXpxrbTNArtfuznvxAJw4Q2ZGlU8kPeDIWEX1dg3rn2veBVUylA2Ezg89ktszWbaQnxD/e3A=="],
+
+    "lightningcss-linux-arm64-musl": ["lightningcss-linux-arm64-musl@1.30.2", "", { "os": "linux", "cpu": "arm64" }, "sha512-5Vh9dGeblpTxWHpOx8iauV02popZDsCYMPIgiuw97OJ5uaDsL86cnqSFs5LZkG3ghHoX5isLgWzMs+eD1YzrnA=="],
+
+    "lightningcss-linux-x64-gnu": ["lightningcss-linux-x64-gnu@1.30.2", "", { "os": "linux", "cpu": "x64" }, "sha512-Cfd46gdmj1vQ+lR6VRTTadNHu6ALuw2pKR9lYq4FnhvgBc4zWY1EtZcAc6EffShbb1MFrIPfLDXD6Xprbnni4w=="],
+
+    "lightningcss-linux-x64-musl": ["lightningcss-linux-x64-musl@1.30.2", "", { "os": "linux", "cpu": "x64" }, "sha512-XJaLUUFXb6/QG2lGIW6aIk6jKdtjtcffUT0NKvIqhSBY3hh9Ch+1LCeH80dR9q9LBjG3ewbDjnumefsLsP6aiA=="],
+
+    "lightningcss-win32-arm64-msvc": ["lightningcss-win32-arm64-msvc@1.30.2", "", { "os": "win32", "cpu": "arm64" }, "sha512-FZn+vaj7zLv//D/192WFFVA0RgHawIcHqLX9xuWiQt7P0PtdFEVaxgF9rjM/IRYHQXNnk61/H/gb2Ei+kUQ4xQ=="],
+
+    "lightningcss-win32-x64-msvc": ["lightningcss-win32-x64-msvc@1.30.2", "", { "os": "win32", "cpu": "x64" }, "sha512-5g1yc73p+iAkid5phb4oVFMB45417DkRevRbt/El/gKXJk4jid+vPFF/AXbxn05Aky8PapwzZrdJShv5C0avjw=="],
+
+    "locate-path": ["locate-path@6.0.0", "", { "dependencies": { "p-locate": "^5.0.0" } }, "sha512-iPZK6eYjbxRu3uB4/WZ3EsEIMJFMqAoopl3R+zuq0UjcAm/MO6KCweDgPfP3elTztoKP3KtnVHxTn2NHBSDVUw=="],
+
+    "lodash": ["lodash@4.17.23", "", {}, "sha512-LgVTMpQtIopCi79SJeDiP0TfWi5CNEc/L/aRdTh3yIvmZXTnheWpKjSZhnvMl8iXbC1tFg9gdHHDMLoV7CnG+w=="],
+
+    "lodash.merge": ["lodash.merge@4.6.2", "", {}, "sha512-0KpjqXRVvrYyCsX1swR/XTK0va6VQkQM6MNo7PqW77ByjAhoARA8EfrP1N4+KlKj8YS0ZUCtRT/YUuhyYDujIQ=="],
+
+    "magic-string": ["magic-string@0.30.21", "", { "dependencies": { "@jridgewell/sourcemap-codec": "^1.5.5" } }, "sha512-vd2F4YUyEXKGcLHoq+TEyCjxueSeHnFxyyjNp80yg0XV4vUhnDer/lvvlqM/arB5bXQN5K2/3oinyCRyx8T2CQ=="],
+
+    "minimatch": ["minimatch@9.0.5", "", { "dependencies": { "brace-expansion": "^2.0.1" } }, "sha512-G6T0ZX48xgozx7587koeX9Ys2NYy6Gmv//P89sEte9V9whIapMNF4idKxnW2QtCcLiTWlb/wfCabAtAFWhhBow=="],
+
+    "motion": ["motion@12.29.0", "", { "dependencies": { "framer-motion": "^12.29.0", "tslib": "^2.4.0" }, "peerDependencies": { "@emotion/is-prop-valid": "*", "react": "^18.0.0 || ^19.0.0", "react-dom": "^18.0.0 || ^19.0.0" }, "optionalPeers": ["@emotion/is-prop-valid", "react", "react-dom"] }, "sha512-rjB5CP2N9S2ESAyEFnAFMgTec6X8yvfxLNcz8n12gPq3M48R7ZbBeVYkDOTj8SPMwfvGIFI801SiPSr1+HCr9g=="],
+
+    "motion-dom": ["motion-dom@12.29.0", "", { "dependencies": { "motion-utils": "^12.27.2" } }, "sha512-3eiz9bb32yvY8Q6XNM4AwkSOBPgU//EIKTZwsSWgA9uzbPBhZJeScCVcBuwwYVqhfamewpv7ZNmVKTGp5qnzkA=="],
+
+    "motion-utils": ["motion-utils@12.27.2", "", {}, "sha512-B55gcoL85Mcdt2IEStY5EEAsrMSVE2sI14xQ/uAdPL+mfQxhKKFaEag9JmfxedJOR4vZpBGoPeC/Gm13I/4g5Q=="],
+
+    "ms": ["ms@2.1.3", "", {}, "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA=="],
+
+    "nanoid": ["nanoid@3.3.11", "", { "bin": { "nanoid": "bin/nanoid.cjs" } }, "sha512-N8SpfPUnUp1bK+PMYW8qSWdl9U+wwNWI4QKxOYDy9JAro3WMX7p2OeVRF9v+347pnakNevPmiHhNmZ2HbFA76w=="],
+
+    "natural-compare": ["natural-compare@1.4.0", "", {}, "sha512-OWND8ei3VtNC9h7V60qff3SVobHr996CTwgxubgyQYEpg290h9J0buyECNNJexkFm5sOajh5G116RYA1c8ZMSw=="],
+
+    "optionator": ["optionator@0.9.4", "", { "dependencies": { "deep-is": "^0.1.3", "fast-levenshtein": "^2.0.6", "levn": "^0.4.1", "prelude-ls": "^1.2.1", "type-check": "^0.4.0", "word-wrap": "^1.2.5" } }, "sha512-6IpQ7mKUxRcZNLIObR0hz7lxsapSSIYNZJwXPGeF0mTVqGKFIXj1DQcMoT22S3ROcLyY/rz0PWaWZ9ayWmad9g=="],
+
+    "p-limit": ["p-limit@3.1.0", "", { "dependencies": { "yocto-queue": "^0.1.0" } }, "sha512-TYOanM3wGwNGsZN2cVTYPArw454xnXj5qmWF1bEoAc4+cU/ol7GVh7odevjp1FNHduHc3KZMcFduxU5Xc6uJRQ=="],
+
+    "p-locate": ["p-locate@5.0.0", "", { "dependencies": { "p-limit": "^3.0.2" } }, "sha512-LaNjtRWUBY++zB5nE/NwcaoMylSPk+S+ZHNB1TzdbMJMny6dynpAGt7X/tl/QYq3TIeE6nxHppbo2LGymrG5Pw=="],
+
+    "parent-module": ["parent-module@1.0.1", "", { "dependencies": { "callsites": "^3.0.0" } }, "sha512-GQ2EWRpQV8/o+Aw8YqtfZZPfNRWZYkbidE9k5rpl/hC3vtHHBfGm2Ifi6qWV+coDGkrUKZAxE3Lot5kcsRlh+g=="],
+
+    "path-exists": ["path-exists@4.0.0", "", {}, "sha512-ak9Qy5Q7jYb2Wwcey5Fpvg2KoAc/ZIhLSLOSBmRmygPsGwkVVt0fZa0qrtMz+m6tJTAHfZQ8FnmB4MG4LWy7/w=="],
+
+    "path-key": ["path-key@3.1.1", "", {}, "sha512-ojmeN0qd+y0jszEtoY48r0Peq5dwMEkIlCOu6Q5f41lfkswXuKtYrhgoTpLnyIcHm24Uhqx+5Tqm2InSwLhE6Q=="],
+
+    "picocolors": ["picocolors@1.1.1", "", {}, "sha512-xceH2snhtb5M9liqDsmEw56le376mTZkEX/jEb/RxNFyegNul7eNslCXP9FDj/Lcu0X8KEyMceP2ntpaHrDEVA=="],
+
+    "picomatch": ["picomatch@4.0.3", "", {}, "sha512-5gTmgEY/sqK6gFXLIsQNH19lWb4ebPDLA4SdLP7dsWkIXHWlG66oPuVvXSGFPppYZz8ZDZq0dYYrbHfBCVUb1Q=="],
+
+    "postcss": ["postcss@8.5.6", "", { "dependencies": { "nanoid": "^3.3.11", "picocolors": "^1.1.1", "source-map-js": "^1.2.1" } }, "sha512-3Ybi1tAuwAP9s0r1UQ2J4n5Y0G05bJkpUIO0/bI9MhwmD70S5aTWbXGBwxHrelT+XM1k6dM0pk+SwNkpTRN7Pg=="],
+
+    "postcss-selector-parser": ["postcss-selector-parser@6.0.10", "", { "dependencies": { "cssesc": "^3.0.0", "util-deprecate": "^1.0.2" } }, "sha512-IQ7TZdoaqbT+LCpShg46jnZVlhWD2w6iQYAcYXfHARZ7X1t/UGhhceQDs5X0cGqKvYlHNOuv7Oa1xmb0oQuA3w=="],
+
+    "prelude-ls": ["prelude-ls@1.2.1", "", {}, "sha512-vkcDPrRZo1QZLbn5RLGPpg/WmIQ65qoWWhcGKf/b5eplkkarX0m9z8ppCat4mlOqUsWpyNuYgO3VRyrYHSzX5g=="],
+
+    "prettier": ["prettier@3.8.1", "", { "bin": { "prettier": "bin/prettier.cjs" } }, "sha512-UOnG6LftzbdaHZcKoPFtOcCKztrQ57WkHDeRD9t/PTQtmT0NHSeWWepj6pS0z/N7+08BHFDQVUrfmfMRcZwbMg=="],
+
+    "prettier-plugin-tailwindcss": ["prettier-plugin-tailwindcss@0.6.14", "", { "peerDependencies": { "@ianvs/prettier-plugin-sort-imports": "*", "@prettier/plugin-hermes": "*", "@prettier/plugin-oxc": "*", "@prettier/plugin-pug": "*", "@shopify/prettier-plugin-liquid": "*", "@trivago/prettier-plugin-sort-imports": "*", "@zackad/prettier-plugin-twig": "*", "prettier": "^3.0", "prettier-plugin-astro": "*", "prettier-plugin-css-order": "*", "prettier-plugin-import-sort": "*", "prettier-plugin-jsdoc": "*", "prettier-plugin-marko": "*", "prettier-plugin-multiline-arrays": "*", "prettier-plugin-organize-attributes": "*", "prettier-plugin-organize-imports": "*", "prettier-plugin-sort-imports": "*", "prettier-plugin-style-order": "*", "prettier-plugin-svelte": "*" }, "optionalPeers": ["@ianvs/prettier-plugin-sort-imports", "@prettier/plugin-hermes", "@prettier/plugin-oxc", "@prettier/plugin-pug", "@shopify/prettier-plugin-liquid", "@trivago/prettier-plugin-sort-imports", "@zackad/prettier-plugin-twig", "prettier-plugin-astro", "prettier-plugin-css-order", "prettier-plugin-import-sort", "prettier-plugin-jsdoc", "prettier-plugin-marko", "prettier-plugin-multiline-arrays", "prettier-plugin-organize-attributes", "prettier-plugin-organize-imports", "prettier-plugin-sort-imports", "prettier-plugin-style-order", "prettier-plugin-svelte"] }, "sha512-pi2e/+ZygeIqntN+vC573BcW5Cve8zUB0SSAGxqpB4f96boZF4M3phPVoOFCeypwkpRYdi7+jQ5YJJUwrkGUAg=="],
+
+    "punycode": ["punycode@2.3.1", "", {}, "sha512-vYt7UD1U9Wg6138shLtLOvdAu+8DsC/ilFtEVHcH+wydcSpNE20AfSOduf6MkRFahL5FY7X1oU7nKVZFtfq8Fg=="],
+
+    "qr-code-styling": ["qr-code-styling@1.9.2", "", { "dependencies": { "qrcode-generator": "^1.4.4" } }, "sha512-RgJaZJ1/RrXJ6N0j7a+pdw3zMBmzZU4VN2dtAZf8ZggCfRB5stEQ3IoDNGaNhYY3nnZKYlYSLl5YkfWN5dPutg=="],
+
+    "qrcode-generator": ["qrcode-generator@1.5.2", "", {}, "sha512-pItrW0Z9HnDBnFmgiNrY1uxRdri32Uh9EjNYLPVC2zZ3ZRIIEqBoDgm4DkvDwNNDHTK7FNkmr8zAa77BYc9xNw=="],
+
+    "react": ["react@19.2.3", "", {}, "sha512-Ku/hhYbVjOQnXDZFv2+RibmLFGwFdeeKHFcOTlrt7xplBnya5OGn/hIRDsqDiSUcfORsDC7MPxwork8jBwsIWA=="],
+
+    "react-aria": ["react-aria@3.46.0", "", { "dependencies": { "@internationalized/string": "^3.2.7", "@react-aria/breadcrumbs": "^3.5.31", "@react-aria/button": "^3.14.4", "@react-aria/calendar": "^3.9.4", "@react-aria/checkbox": "^3.16.4", "@react-aria/color": "^3.1.4", "@react-aria/combobox": "^3.14.2", "@react-aria/datepicker": "^3.16.0", "@react-aria/dialog": "^3.5.33", "@react-aria/disclosure": "^3.1.2", "@react-aria/dnd": "^3.11.5", "@react-aria/focus": "^3.21.4", "@react-aria/gridlist": "^3.14.3", "@react-aria/i18n": "^3.12.15", "@react-aria/interactions": "^3.27.0", "@react-aria/label": "^3.7.24", "@react-aria/landmark": "^3.0.9", "@react-aria/link": "^3.8.8", "@react-aria/listbox": "^3.15.2", "@react-aria/menu": "^3.20.0", "@react-aria/meter": "^3.4.29", "@react-aria/numberfield": "^3.12.4", "@react-aria/overlays": "^3.31.1", "@react-aria/progress": "^3.4.29", "@react-aria/radio": "^3.12.4", "@react-aria/searchfield": "^3.8.11", "@react-aria/select": "^3.17.2", "@react-aria/selection": "^3.27.1", "@react-aria/separator": "^3.4.15", "@react-aria/slider": "^3.8.4", "@react-aria/ssr": "^3.9.10", "@react-aria/switch": "^3.7.10", "@react-aria/table": "^3.17.10", "@react-aria/tabs": "^3.11.0", "@react-aria/tag": "^3.8.0", "@react-aria/textfield": "^3.18.4", "@react-aria/toast": "^3.0.10", "@react-aria/tooltip": "^3.9.1", "@react-aria/tree": "^3.1.6", "@react-aria/utils": "^3.33.0", "@react-aria/visually-hidden": "^3.8.30", "@react-types/shared": "^3.33.0" }, "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" } }, "sha512-We0diSsMK35jw53JFjgF9w8obBjehAUI/TRiynnzSrjRd9eoHYQcecHlptke/HEFxvya/Gcm+LA21Im1+qnIeQ=="],
+
+    "react-aria-components": ["react-aria-components@1.15.1", "", { "dependencies": { "@internationalized/date": "^3.11.0", "@internationalized/string": "^3.2.7", "@react-aria/autocomplete": "3.0.0-rc.5", "@react-aria/collections": "^3.0.2", "@react-aria/dnd": "^3.11.5", "@react-aria/focus": "^3.21.4", "@react-aria/interactions": "^3.27.0", "@react-aria/live-announcer": "^3.4.4", "@react-aria/overlays": "^3.31.1", "@react-aria/ssr": "^3.9.10", "@react-aria/textfield": "^3.18.4", "@react-aria/toolbar": "3.0.0-beta.23", "@react-aria/utils": "^3.33.0", "@react-aria/virtualizer": "^4.1.12", "@react-stately/autocomplete": "3.0.0-beta.4", "@react-stately/layout": "^4.5.3", "@react-stately/selection": "^3.20.8", "@react-stately/table": "^3.15.3", "@react-stately/utils": "^3.11.0", "@react-stately/virtualizer": "^4.4.5", "@react-types/form": "^3.7.17", "@react-types/grid": "^3.3.7", "@react-types/shared": "^3.33.0", "@react-types/table": "^3.13.5", "@swc/helpers": "^0.5.0", "client-only": "^0.0.1", "react-aria": "^3.46.0", "react-stately": "^3.44.0", "use-sync-external-store": "^1.6.0" }, "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" } }, "sha512-irGhZ+vBvoY9xJHf/qzPLLwFZ8cBUrYwPERGhgjE62dy/RXMUiEW+1DeTHz0OvtjbvFbhNp/I7XM9IaBvmLALg=="],
+
+    "react-dom": ["react-dom@19.2.3", "", { "dependencies": { "scheduler": "^0.27.0" }, "peerDependencies": { "react": "^19.2.3" } }, "sha512-yELu4WmLPw5Mr/lmeEpox5rw3RETacE++JgHqQzd2dg+YbJuat3jH4ingc+WPZhxaoFzdv9y33G+F7Nl5O0GBg=="],
+
+    "react-hotkeys-hook": ["react-hotkeys-hook@5.2.3", "", { "peerDependencies": { "react": ">=16.8.0", "react-dom": ">=16.8.0" } }, "sha512-Q27F8EuImYJOVSXAjSQrQPj9cx4GSNY+WdSdk5tSNN085H8/a00W6LZp0PrytEDwF6iT0pGTJeVEDKPRpEK2Bg=="],
+
+    "react-router": ["react-router@7.13.0", "", { "dependencies": { "cookie": "^1.0.1", "set-cookie-parser": "^2.6.0" }, "peerDependencies": { "react": ">=18", "react-dom": ">=18" }, "optionalPeers": ["react-dom"] }, "sha512-PZgus8ETambRT17BUm/LL8lX3Of+oiLaPuVTRH3l1eLvSPpKO3AvhAEb5N7ihAFZQrYDqkvvWfFh9p0z9VsjLw=="],
+
+    "react-stately": ["react-stately@3.44.0", "", { "dependencies": { "@react-stately/calendar": "^3.9.2", "@react-stately/checkbox": "^3.7.4", "@react-stately/collections": "^3.12.9", "@react-stately/color": "^3.9.4", "@react-stately/combobox": "^3.12.2", "@react-stately/data": "^3.15.1", "@react-stately/datepicker": "^3.16.0", "@react-stately/disclosure": "^3.0.10", "@react-stately/dnd": "^3.7.3", "@react-stately/form": "^3.2.3", "@react-stately/list": "^3.13.3", "@react-stately/menu": "^3.9.10", "@react-stately/numberfield": "^3.10.4", "@react-stately/overlays": "^3.6.22", "@react-stately/radio": "^3.11.4", "@react-stately/searchfield": "^3.5.18", "@react-stately/select": "^3.9.1", "@react-stately/selection": "^3.20.8", "@react-stately/slider": "^3.7.4", "@react-stately/table": "^3.15.3", "@react-stately/tabs": "^3.8.8", "@react-stately/toast": "^3.1.3", "@react-stately/toggle": "^3.9.4", "@react-stately/tooltip": "^3.5.10", "@react-stately/tree": "^3.9.5", "@react-types/shared": "^3.33.0" }, "peerDependencies": { "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1" } }, "sha512-Il3trIp2Mo1SSa9PhQFraqOpC74zEFmwuMAlu5Fj3qdtihJOKOFqoyDl7ALRrVfnvCkau6rui155d/NMKvd+RQ=="],
+
+    "resolve-from": ["resolve-from@4.0.0", "", {}, "sha512-pb/MYmXstAkysRFx8piNI1tGFNQIFA3vkE3Gq4EuA1dF6gHp/+vgZqsCGJapvy8N3Q+4o7FwvquPJcnZ7RYy4g=="],
+
+    "rollup": ["rollup@4.56.0", "", { "dependencies": { "@types/estree": "1.0.8" }, "optionalDependencies": { "@rollup/rollup-android-arm-eabi": "4.56.0", "@rollup/rollup-android-arm64": "4.56.0", "@rollup/rollup-darwin-arm64": "4.56.0", "@rollup/rollup-darwin-x64": "4.56.0", "@rollup/rollup-freebsd-arm64": "4.56.0", "@rollup/rollup-freebsd-x64": "4.56.0", "@rollup/rollup-linux-arm-gnueabihf": "4.56.0", "@rollup/rollup-linux-arm-musleabihf": "4.56.0", "@rollup/rollup-linux-arm64-gnu": "4.56.0", "@rollup/rollup-linux-arm64-musl": "4.56.0", "@rollup/rollup-linux-loong64-gnu": "4.56.0", "@rollup/rollup-linux-loong64-musl": "4.56.0", "@rollup/rollup-linux-ppc64-gnu": "4.56.0", "@rollup/rollup-linux-ppc64-musl": "4.56.0", "@rollup/rollup-linux-riscv64-gnu": "4.56.0", "@rollup/rollup-linux-riscv64-musl": "4.56.0", "@rollup/rollup-linux-s390x-gnu": "4.56.0", "@rollup/rollup-linux-x64-gnu": "4.56.0", "@rollup/rollup-linux-x64-musl": "4.56.0", "@rollup/rollup-openbsd-x64": "4.56.0", "@rollup/rollup-openharmony-arm64": "4.56.0", "@rollup/rollup-win32-arm64-msvc": "4.56.0", "@rollup/rollup-win32-ia32-msvc": "4.56.0", "@rollup/rollup-win32-x64-gnu": "4.56.0", "@rollup/rollup-win32-x64-msvc": "4.56.0", "fsevents": "~2.3.2" }, "bin": { "rollup": "dist/bin/rollup" } }, "sha512-9FwVqlgUHzbXtDg9RCMgodF3Ua4Na6Gau+Sdt9vyCN4RhHfVKX2DCHy3BjMLTDd47ITDhYAnTwGulWTblJSDLg=="],
+
+    "scheduler": ["scheduler@0.27.0", "", {}, "sha512-eNv+WrVbKu1f3vbYJT/xtiF5syA5HPIMtf9IgY/nKg0sWqzAUEvqY/xm7OcZc/qafLx/iO9FgOmeSAp4v5ti/Q=="],
+
+    "semver": ["semver@7.7.3", "", { "bin": { "semver": "bin/semver.js" } }, "sha512-SdsKMrI9TdgjdweUSR9MweHA4EJ8YxHn8DFaDisvhVlUOe4BF1tLD7GAj0lIqWVl+dPb/rExr0Btby5loQm20Q=="],
+
+    "set-cookie-parser": ["set-cookie-parser@2.7.2", "", {}, "sha512-oeM1lpU/UvhTxw+g3cIfxXHyJRc/uidd3yK1P242gzHds0udQBYzs3y8j4gCCW+ZJ7ad0yctld8RYO+bdurlvw=="],
+
+    "shebang-command": ["shebang-command@2.0.0", "", { "dependencies": { "shebang-regex": "^3.0.0" } }, "sha512-kHxr2zZpYtdmrN1qDjrrX/Z1rR1kG8Dx+gkpK1G4eXmvXswmcE1hTWBWYUzlraYw1/yZp6YuDY77YtvbN0dmDA=="],
+
+    "shebang-regex": ["shebang-regex@3.0.0", "", {}, "sha512-7++dFhtcx3353uBaq8DDR4NuxBetBzC7ZQOhmTQInHEd6bSrXdiEyzCvG07Z44UYdLShWUyXt5M/yhz8ekcb1A=="],
+
+    "source-map-js": ["source-map-js@1.2.1", "", {}, "sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA=="],
+
+    "strip-json-comments": ["strip-json-comments@3.1.1", "", {}, "sha512-6fPc+R4ihwqP6N/aIv2f1gMH8lOVtWQHoqC4yK6oSDVVocumAsfCqjkXnqiYMhmMwS/mEHLp7Vehlt3ql6lEig=="],
+
+    "supports-color": ["supports-color@7.2.0", "", { "dependencies": { "has-flag": "^4.0.0" } }, "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw=="],
+
+    "tailwind-merge": ["tailwind-merge@3.4.0", "", {}, "sha512-uSaO4gnW+b3Y2aWoWfFpX62vn2sR3skfhbjsEnaBI81WD1wBLlHZe5sWf0AqjksNdYTbGBEd0UasQMT3SNV15g=="],
+
+    "tailwindcss": ["tailwindcss@4.1.18", "", {}, "sha512-4+Z+0yiYyEtUVCScyfHCxOYP06L5Ne+JiHhY2IjR2KWMIWhJOYZKLSGZaP5HkZ8+bY0cxfzwDE5uOmzFXyIwxw=="],
+
+    "tailwindcss-animate": ["tailwindcss-animate@1.0.7", "", { "peerDependencies": { "tailwindcss": ">=3.0.0 || insiders" } }, "sha512-bl6mpH3T7I3UFxuvDEXLxy/VuFxBk5bbzplh7tXI68mwMokNYd1t9qPBHlnyTwfa4JGC4zP516I1hYYtQ/vspA=="],
+
+    "tailwindcss-react-aria-components": ["tailwindcss-react-aria-components@2.0.1", "", { "peerDependencies": { "tailwindcss": "^4.0.0" } }, "sha512-yTAfYv9BE/gKczS+b8UiFMqxnrEYKKNE6Y4vAWzGadkHGb4Yuawp0SHbZKkZJQgFvK0KjO3JpCq/0kzR5jJ9tw=="],
+
+    "tapable": ["tapable@2.3.0", "", {}, "sha512-g9ljZiwki/LfxmQADO3dEY1CbpmXT5Hm2fJ+QaGKwSXUylMybePR7/67YW7jOrrvjEgL1Fmz5kzyAjWVWLlucg=="],
+
+    "tinyglobby": ["tinyglobby@0.2.15", "", { "dependencies": { "fdir": "^6.5.0", "picomatch": "^4.0.3" } }, "sha512-j2Zq4NyQYG5XMST4cbs02Ak8iJUdxRM0XI5QyxXuZOzKOINmWurp3smXu3y5wDcJrptwpSjgXHzIQxR0omXljQ=="],
+
+    "ts-api-utils": ["ts-api-utils@2.4.0", "", { "peerDependencies": { "typescript": ">=4.8.4" } }, "sha512-3TaVTaAv2gTiMB35i3FiGJaRfwb3Pyn/j3m/bfAvGe8FB7CF6u+LMYqYlDh7reQf7UNvoTvdfAqHGmPGOSsPmA=="],
+
+    "tslib": ["tslib@2.8.1", "", {}, "sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w=="],
+
+    "type-check": ["type-check@0.4.0", "", { "dependencies": { "prelude-ls": "^1.2.1" } }, "sha512-XleUoc9uwGXqjWwXaUTZAmzMcFZ5858QA2vvx1Ur5xIcixXIP+8LnFDgRplU30us6teqdlskFfu+ae4K79Ooew=="],
+
+    "typescript": ["typescript@5.9.3", "", { "bin": { "tsc": "bin/tsc", "tsserver": "bin/tsserver" } }, "sha512-jl1vZzPDinLr9eUt3J/t7V6FgNEw9QjvBPdysz9KfQDD41fQrC2Y4vKQdiaUpFT4bXlb1RHhLpp8wtm6M5TgSw=="],
+
+    "typescript-eslint": ["typescript-eslint@8.53.1", "", { "dependencies": { "@typescript-eslint/eslint-plugin": "8.53.1", "@typescript-eslint/parser": "8.53.1", "@typescript-eslint/typescript-estree": "8.53.1", "@typescript-eslint/utils": "8.53.1" }, "peerDependencies": { "eslint": "^8.57.0 || ^9.0.0", "typescript": ">=4.8.4 <6.0.0" } }, "sha512-gB+EVQfP5RDElh9ittfXlhZJdjSU4jUSTyE2+ia8CYyNvet4ElfaLlAIqDvQV9JPknKx0jQH1racTYe/4LaLSg=="],
+
+    "undici-types": ["undici-types@7.16.0", "", {}, "sha512-Zz+aZWSj8LE6zoxD+xrjh4VfkIG8Ya6LvYkZqtUQGJPZjYl53ypCaUwWqo7eI0x66KBGeRo+mlBEkMSeSZ38Nw=="],
+
+    "uri-js": ["uri-js@4.4.1", "", { "dependencies": { "punycode": "^2.1.0" } }, "sha512-7rKUyy33Q1yc98pQ1DAmLtwX109F7TIfWlW1Ydo8Wl1ii1SeHieeh0HHfPeL2fMXK6z0s8ecKs9frCuLJvndBg=="],
+
+    "use-sync-external-store": ["use-sync-external-store@1.6.0", "", { "peerDependencies": { "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0" } }, "sha512-Pp6GSwGP/NrPIrxVFAIkOQeyw8lFenOHijQWkUTrDvrF4ALqylP2C/KCkeS9dpUM3KvYRQhna5vt7IL95+ZQ9w=="],
+
+    "util-deprecate": ["util-deprecate@1.0.2", "", {}, "sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw=="],
+
+    "vite": ["vite@7.3.1", "", { "dependencies": { "esbuild": "^0.27.0", "fdir": "^6.5.0", "picomatch": "^4.0.3", "postcss": "^8.5.6", "rollup": "^4.43.0", "tinyglobby": "^0.2.15" }, "optionalDependencies": { "fsevents": "~2.3.3" }, "peerDependencies": { "@types/node": "^20.19.0 || >=22.12.0", "jiti": ">=1.21.0", "less": "^4.0.0", "lightningcss": "^1.21.0", "sass": "^1.70.0", "sass-embedded": "^1.70.0", "stylus": ">=0.54.8", "sugarss": "^5.0.0", "terser": "^5.16.0", "tsx": "^4.8.1", "yaml": "^2.4.2" }, "optionalPeers": ["@types/node", "jiti", "less", "lightningcss", "sass", "sass-embedded", "stylus", "sugarss", "terser", "tsx", "yaml"], "bin": { "vite": "bin/vite.js" } }, "sha512-w+N7Hifpc3gRjZ63vYBXA56dvvRlNWRczTdmCBBa+CotUzAPf5b7YMdMR/8CQoeYE5LX3W4wj6RYTgonm1b9DA=="],
+
+    "which": ["which@2.0.2", "", { "dependencies": { "isexe": "^2.0.0" }, "bin": { "node-which": "./bin/node-which" } }, "sha512-BLI3Tl1TW3Pvl70l3yq3Y64i+awpwXqsGBYWkkqMtnbXgrMD+yj7rhW0kuEDxzJaYXGjEW5ogapKNMEKNMjibA=="],
+
+    "word-wrap": ["word-wrap@1.2.5", "", {}, "sha512-BN22B5eaMMI9UMtjrGd5g5eCYPpCPDUy0FJXbYsaT5zYxjFOckS53SQDE3pWkVoWpHXVb3BrYcEN4Twa55B5cA=="],
+
+    "yocto-queue": ["yocto-queue@0.1.0", "", {}, "sha512-rVksvsnNCdJ/ohGc6xgPwyN8eheCxsiLM8mxuE/t/mOVqJewPuO1miLpTHQiRgTKCLexL4MeAFVagts7HmNZ2Q=="],
+
+    "@eslint-community/eslint-utils/eslint-visitor-keys": ["eslint-visitor-keys@3.4.3", "", {}, "sha512-wpc+LXeiyiisxPlEkUzU6svyS1frIO3Mgxj1fdy7Pm8Ygzguax2N3Fa/D/ag1WqbOprdI+uY6wMUl8/a2G+iag=="],
+
+    "@eslint/config-array/minimatch": ["minimatch@3.1.2", "", { "dependencies": { "brace-expansion": "^1.1.7" } }, "sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw=="],
+
+    "@eslint/eslintrc/globals": ["globals@14.0.0", "", {}, "sha512-oahGvuMGQlPw/ivIYBjVSrWAfWLBeku5tpPE2fOPLi+WHffIWbuh2tCjhyQhTBPMf5E9jDEH4FOmTYgYwbKwtQ=="],
+
+    "@eslint/eslintrc/ignore": ["ignore@5.3.2", "", {}, "sha512-hsBTNUqQTDwkWtcdYI2i06Y/nUBEsNEDJKjWdigLvegy8kDuJAS8uRlpkkcQpyEXL0Z/pjDy5HBmMjRCJ2gq+g=="],
+
+    "@eslint/eslintrc/minimatch": ["minimatch@3.1.2", "", { "dependencies": { "brace-expansion": "^1.1.7" } }, "sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw=="],
+
+    "@tailwindcss/oxide-wasm32-wasi/@emnapi/core": ["@emnapi/core@1.8.1", "", { "dependencies": { "@emnapi/wasi-threads": "1.1.0", "tslib": "^2.4.0" }, "bundled": true }, "sha512-AvT9QFpxK0Zd8J0jopedNm+w/2fIzvtPKPjqyw9jwvBaReTTqPBk9Hixaz7KbjimP+QNz605/XnjFcDAL2pqBg=="],
+
+    "@tailwindcss/oxide-wasm32-wasi/@emnapi/runtime": ["@emnapi/runtime@1.8.1", "", { "dependencies": { "tslib": "^2.4.0" }, "bundled": true }, "sha512-mehfKSMWjjNol8659Z8KxEMrdSJDDot5SXMq00dM8BN4o+CLNXQ0xH2V7EchNHV4RmbZLmmPdEaXZc5H2FXmDg=="],
+
+    "@tailwindcss/oxide-wasm32-wasi/@emnapi/wasi-threads": ["@emnapi/wasi-threads@1.1.0", "", { "dependencies": { "tslib": "^2.4.0" }, "bundled": true }, "sha512-WI0DdZ8xFSbgMjR1sFsKABJ/C5OnRrjT06JXbZKexJGrDuPTzZdDYfFlsgcCXCyf+suG5QU2e/y1Wo2V/OapLQ=="],
+
+    "@tailwindcss/oxide-wasm32-wasi/@napi-rs/wasm-runtime": ["@napi-rs/wasm-runtime@1.1.1", "", { "dependencies": { "@emnapi/core": "^1.7.1", "@emnapi/runtime": "^1.7.1", "@tybys/wasm-util": "^0.10.1" }, "bundled": true }, "sha512-p64ah1M1ld8xjWv3qbvFwHiFVWrq1yFvV4f7w+mzaqiR4IlSgkqhcRdHwsGgomwzBH51sRY4NEowLxnaBjcW/A=="],
+
+    "@tailwindcss/oxide-wasm32-wasi/@tybys/wasm-util": ["@tybys/wasm-util@0.10.1", "", { "dependencies": { "tslib": "^2.4.0" }, "bundled": true }, "sha512-9tTaPJLSiejZKx+Bmog4uSubteqTvFrVrURwkmHixBo0G4seD0zUxp98E1DzUBJxLQ3NPwXrGKDiVjwx/DpPsg=="],
+
+    "@tailwindcss/oxide-wasm32-wasi/tslib": ["tslib@2.8.1", "", { "bundled": true }, "sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w=="],
+
+    "eslint/ignore": ["ignore@5.3.2", "", {}, "sha512-hsBTNUqQTDwkWtcdYI2i06Y/nUBEsNEDJKjWdigLvegy8kDuJAS8uRlpkkcQpyEXL0Z/pjDy5HBmMjRCJ2gq+g=="],
+
+    "eslint/minimatch": ["minimatch@3.1.2", "", { "dependencies": { "brace-expansion": "^1.1.7" } }, "sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw=="],
+
+    "@eslint/config-array/minimatch/brace-expansion": ["brace-expansion@1.1.12", "", { "dependencies": { "balanced-match": "^1.0.0", "concat-map": "0.0.1" } }, "sha512-9T9UjW3r0UW5c1Q7GTwllptXwhvYmEzFhzMfZ9H7FQWt+uZePjZPjBP/W1ZEyZ1twGWom5/56TF4lPcqjnDHcg=="],
+
+    "@eslint/eslintrc/minimatch/brace-expansion": ["brace-expansion@1.1.12", "", { "dependencies": { "balanced-match": "^1.0.0", "concat-map": "0.0.1" } }, "sha512-9T9UjW3r0UW5c1Q7GTwllptXwhvYmEzFhzMfZ9H7FQWt+uZePjZPjBP/W1ZEyZ1twGWom5/56TF4lPcqjnDHcg=="],
+
+    "eslint/minimatch/brace-expansion": ["brace-expansion@1.1.12", "", { "dependencies": { "balanced-match": "^1.0.0", "concat-map": "0.0.1" } }, "sha512-9T9UjW3r0UW5c1Q7GTwllptXwhvYmEzFhzMfZ9H7FQWt+uZePjZPjBP/W1ZEyZ1twGWom5/56TF4lPcqjnDHcg=="],
+  }
+}
diff --git a/index.html b/index.html
new file mode 100644
index 0000000..a26dbb3
--- /dev/null
+++ b/index.html
@@ -0,0 +1,29 @@
+<!doctype html>
+<html lang="en">
+    <head>
+        <meta charset="UTF-8" />
+        <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+        <meta name="description" content="Generated by Untitled UI CLI" />
+        <meta name="theme-color" content="#7f56d9" />
+
+        <link rel="preconnect" href="https://fonts.googleapis.com" />
+        <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+        <link href="https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,400..700;1,14..32,400..700&display=swap" rel="stylesheet" />
+
+        <title>Starter kit — Untitled UI</title>
+    </head>
+
+    <body class="size-full bg-primary antialiased">
+        <div id="root"></div>
+        <script type="module" src="/src/main.tsx"></script>
+        <script>
+            // On page load or when changing themes, best to add inline in `head` to avoid FOUC
+            if (localStorage.theme === "dark" || (!("theme" in localStorage) && window.matchMedia("(prefers-color-scheme: dark)").matches)) {
+                document.documentElement.classList.add("dark-mode");
+            } else {
+                document.documentElement.classList.remove("dark-mode");
+            }
+        </script>
+    </body>
+</html>
diff --git a/package-lock.json b/package-lock.json
new file mode 100644
index 0000000..c7a3993
--- /dev/null
+++ b/package-lock.json
@@ -0,0 +1,5938 @@
+{
+    "name": "untitledui-vite-starter-kit",
+    "version": "0.0.0",
+    "lockfileVersion": 3,
+    "requires": true,
+    "packages": {
+        "": {
+            "name": "untitledui-vite-starter-kit",
+            "version": "0.0.0",
+            "dependencies": {
+                "@fortawesome/fontawesome-svg-core": "^7.2.0",
+                "@fortawesome/free-solid-svg-icons": "^7.2.0",
+                "@fortawesome/pro-light-svg-icons": "^7.2.0",
+                "@fortawesome/pro-regular-svg-icons": "^7.2.0",
+                "@fortawesome/pro-solid-svg-icons": "^7.2.0",
+                "@fortawesome/react-fontawesome": "^3.2.0",
+                "@tailwindcss/typography": "^0.5.19",
+                "@tailwindcss/vite": "^4.1.18",
+                "@untitledui/file-icons": "^0.0.8",
+                "@untitledui/icons": "^0.0.21",
+                "input-otp": "^1.4.2",
+                "motion": "^12.29.0",
+                "qr-code-styling": "^1.9.2",
+                "react": "^19.2.3",
+                "react-aria": "^3.46.0",
+                "react-aria-components": "^1.15.1",
+                "react-dom": "^19.2.3",
+                "react-hotkeys-hook": "^5.2.3",
+                "react-router": "^7.13.0",
+                "tailwind-merge": "^3.4.0",
+                "tailwindcss": "^4.1.18",
+                "tailwindcss-animate": "^1.0.7",
+                "tailwindcss-react-aria-components": "^2.0.1"
+            },
+            "devDependencies": {
+                "@tailwindcss/postcss": "^4.1.18",
+                "@trivago/prettier-plugin-sort-imports": "^5.2.2",
+                "@types/node": "^24.10.9",
+                "@types/react": "^19.2.9",
+                "@types/react-dom": "^19.2.3",
+                "@vitejs/plugin-react-swc": "^4.2.2",
+                "globals": "^16.5.0",
+                "prettier": "^3.8.1",
+                "prettier-plugin-tailwindcss": "^0.6.14",
+                "typescript": "^5.9.3",
+                "typescript-eslint": "^8.53.1",
+                "vite": "^7.3.1"
+            }
+        },
+        "node_modules/@alloc/quick-lru": {
+            "version": "5.2.0",
+            "resolved": "http://localhost:4873/@alloc/quick-lru/-/quick-lru-5.2.0.tgz",
+            "integrity": "sha512-UrcABB+4bUrFABwbluTIBErXwvbsU/V7TZWfmbgJfbkwiBuziS9gxdODUyuiecfdGQ85jglMW6juS3+z5TsKLw==",
+            "dev": true,
+            "license": "MIT",
+            "engines": {
+                "node": ">=10"
+            },
+            "funding": {
+                "url": "https://github.com/sponsors/sindresorhus"
+            }
+        },
+        "node_modules/@babel/code-frame": {
+            "version": "7.29.0",
+            "resolved": "http://localhost:4873/@babel/code-frame/-/code-frame-7.29.0.tgz",
+            "integrity": "sha512-9NhCeYjq9+3uxgdtp20LSiJXJvN0FeCtNGpJxuMFZ1Kv3cWUNb6DOhJwUvcVCzKGR66cw4njwM6hrJLqgOwbcw==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "@babel/helper-validator-identifier": "^7.28.5",
+                "js-tokens": "^4.0.0",
+                "picocolors": "^1.1.1"
+            },
+            "engines": {
+                "node": ">=6.9.0"
+            }
+        },
+        "node_modules/@babel/generator": {
+            "version": "7.29.1",
+            "resolved": "http://localhost:4873/@babel/generator/-/generator-7.29.1.tgz",
+            "integrity": "sha512-qsaF+9Qcm2Qv8SRIMMscAvG4O3lJ0F1GuMo5HR/Bp02LopNgnZBC/EkbevHFeGs4ls/oPz9v+Bsmzbkbe+0dUw==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "@babel/parser": "^7.29.0",
+                "@babel/types": "^7.29.0",
+                "@jridgewell/gen-mapping": "^0.3.12",
+                "@jridgewell/trace-mapping": "^0.3.28",
+                "jsesc": "^3.0.2"
+            },
+            "engines": {
+                "node": ">=6.9.0"
+            }
+        },
+        "node_modules/@babel/helper-globals": {
+            "version": "7.28.0",
+            "resolved": "http://localhost:4873/@babel/helper-globals/-/helper-globals-7.28.0.tgz",
+            "integrity": "sha512-+W6cISkXFa1jXsDEdYA8HeevQT/FULhxzR99pxphltZcVaugps53THCeiWA8SguxxpSp3gKPiuYfSWopkLQ4hw==",
+            "dev": true,
+            "license": "MIT",
+            "engines": {
+                "node": ">=6.9.0"
+            }
+        },
+        "node_modules/@babel/helper-string-parser": {
+            "version": "7.27.1",
+            "resolved": "http://localhost:4873/@babel/helper-string-parser/-/helper-string-parser-7.27.1.tgz",
+            "integrity": "sha512-qMlSxKbpRlAridDExk92nSobyDdpPijUq2DW6oDnUqd0iOGxmQjyqhMIihI9+zv4LPyZdRje2cavWPbCbWm3eA==",
+            "dev": true,
+            "license": "MIT",
+            "engines": {
+                "node": ">=6.9.0"
+            }
+        },
+        "node_modules/@babel/helper-validator-identifier": {
+            "version": "7.28.5",
+            "resolved": "http://localhost:4873/@babel/helper-validator-identifier/-/helper-validator-identifier-7.28.5.tgz",
+            "integrity": "sha512-qSs4ifwzKJSV39ucNjsvc6WVHs6b7S03sOh2OcHF9UHfVPqWWALUsNUVzhSBiItjRZoLHx7nIarVjqKVusUZ1Q==",
+            "dev": true,
+            "license": "MIT",
+            "engines": {
+                "node": ">=6.9.0"
+            }
+        },
+        "node_modules/@babel/parser": {
+            "version": "7.29.0",
+            "resolved": "http://localhost:4873/@babel/parser/-/parser-7.29.0.tgz",
+            "integrity": "sha512-IyDgFV5GeDUVX4YdF/3CPULtVGSXXMLh1xVIgdCgxApktqnQV0r7/8Nqthg+8YLGaAtdyIlo2qIdZrbCv4+7ww==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "@babel/types": "^7.29.0"
+            },
+            "bin": {
+                "parser": "bin/babel-parser.js"
+            },
+            "engines": {
+                "node": ">=6.0.0"
+            }
+        },
+        "node_modules/@babel/template": {
+            "version": "7.28.6",
+            "resolved": "http://localhost:4873/@babel/template/-/template-7.28.6.tgz",
+            "integrity": "sha512-YA6Ma2KsCdGb+WC6UpBVFJGXL58MDA6oyONbjyF/+5sBgxY/dwkhLogbMT2GXXyU84/IhRw/2D1Os1B/giz+BQ==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "@babel/code-frame": "^7.28.6",
+                "@babel/parser": "^7.28.6",
+                "@babel/types": "^7.28.6"
+            },
+            "engines": {
+                "node": ">=6.9.0"
+            }
+        },
+        "node_modules/@babel/traverse": {
+            "version": "7.29.0",
+            "resolved": "http://localhost:4873/@babel/traverse/-/traverse-7.29.0.tgz",
+            "integrity": "sha512-4HPiQr0X7+waHfyXPZpWPfWL/J7dcN1mx9gL6WdQVMbPnF3+ZhSMs8tCxN7oHddJE9fhNE7+lxdnlyemKfJRuA==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "@babel/code-frame": "^7.29.0",
+                "@babel/generator": "^7.29.0",
+                "@babel/helper-globals": "^7.28.0",
+                "@babel/parser": "^7.29.0",
+                "@babel/template": "^7.28.6",
+                "@babel/types": "^7.29.0",
+                "debug": "^4.3.1"
+            },
+            "engines": {
+                "node": ">=6.9.0"
+            }
+        },
+        "node_modules/@babel/types": {
+            "version": "7.29.0",
+            "resolved": "http://localhost:4873/@babel/types/-/types-7.29.0.tgz",
+            "integrity": "sha512-LwdZHpScM4Qz8Xw2iKSzS+cfglZzJGvofQICy7W7v4caru4EaAmyUuO6BGrbyQ2mYV11W0U8j5mBhd14dd3B0A==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "@babel/helper-string-parser": "^7.27.1",
+                "@babel/helper-validator-identifier": "^7.28.5"
+            },
+            "engines": {
+                "node": ">=6.9.0"
+            }
+        },
+        "node_modules/@esbuild/aix-ppc64": {
+            "version": "0.27.4",
+            "resolved": "http://localhost:4873/@esbuild/aix-ppc64/-/aix-ppc64-0.27.4.tgz",
+            "integrity": "sha512-cQPwL2mp2nSmHHJlCyoXgHGhbEPMrEEU5xhkcy3Hs/O7nGZqEpZ2sUtLaL9MORLtDfRvVl2/3PAuEkYZH0Ty8Q==",
+            "cpu": [
+                "ppc64"
+            ],
+            "license": "MIT",
+            "optional": true,
+            "os": [
+                "aix"
+            ],
+            "engines": {
+                "node": ">=18"
+            }
+        },
+        "node_modules/@esbuild/android-arm": {
+            "version": "0.27.4",
+            "resolved": "http://localhost:4873/@esbuild/android-arm/-/android-arm-0.27.4.tgz",
+            "integrity": "sha512-X9bUgvxiC8CHAGKYufLIHGXPJWnr0OCdR0anD2e21vdvgCI8lIfqFbnoeOz7lBjdrAGUhqLZLcQo6MLhTO2DKQ==",
+            "cpu": [
+                "arm"
+            ],
+            "license": "MIT",
+            "optional": true,
+            "os": [
+                "android"
+            ],
+            "engines": {
+                "node": ">=18"
+            }
+        },
+        "node_modules/@esbuild/android-arm64": {
+            "version": "0.27.4",
+            "resolved": "http://localhost:4873/@esbuild/android-arm64/-/android-arm64-0.27.4.tgz",
+            "integrity": "sha512-gdLscB7v75wRfu7QSm/zg6Rx29VLdy9eTr2t44sfTW7CxwAtQghZ4ZnqHk3/ogz7xao0QAgrkradbBzcqFPasw==",
+            "cpu": [
+                "arm64"
+            ],
+            "license": "MIT",
+            "optional": true,
+            "os": [
+                "android"
+            ],
+            "engines": {
+                "node": ">=18"
+            }
+        },
+        "node_modules/@esbuild/android-x64": {
+            "version": "0.27.4",
+            "resolved": "http://localhost:4873/@esbuild/android-x64/-/android-x64-0.27.4.tgz",
+            "integrity": "sha512-PzPFnBNVF292sfpfhiyiXCGSn9HZg5BcAz+ivBuSsl6Rk4ga1oEXAamhOXRFyMcjwr2DVtm40G65N3GLeH1Lvw==",
+            "cpu": [
+                "x64"
+            ],
+            "license": "MIT",
+            "optional": true,
+            "os": [
+                "android"
+            ],
+            "engines": {
+                "node": ">=18"
+            }
+        },
+        "node_modules/@esbuild/darwin-arm64": {
+            "version": "0.27.4",
+            "resolved": "http://localhost:4873/@esbuild/darwin-arm64/-/darwin-arm64-0.27.4.tgz",
+            "integrity": "sha512-b7xaGIwdJlht8ZFCvMkpDN6uiSmnxxK56N2GDTMYPr2/gzvfdQN8rTfBsvVKmIVY/X7EM+/hJKEIbbHs9oA4tQ==",
+            "cpu": [
+                "arm64"
+            ],
+            "license": "MIT",
+            "optional": true,
+            "os": [
+                "darwin"
+            ],
+            "engines": {
+                "node": ">=18"
+            }
+        },
+        "node_modules/@esbuild/darwin-x64": {
+            "version": "0.27.4",
+            "resolved": "http://localhost:4873/@esbuild/darwin-x64/-/darwin-x64-0.27.4.tgz",
+            "integrity": "sha512-sR+OiKLwd15nmCdqpXMnuJ9W2kpy0KigzqScqHI3Hqwr7IXxBp3Yva+yJwoqh7rE8V77tdoheRYataNKL4QrPw==",
+            "cpu": [
+                "x64"
+            ],
+            "license": "MIT",
+            "optional": true,
+            "os": [
+                "darwin"
+            ],
+            "engines": {
+                "node": ">=18"
+            }
+        },
+        "node_modules/@esbuild/freebsd-arm64": {
+            "version": "0.27.4",
+            "resolved": "http://localhost:4873/@esbuild/freebsd-arm64/-/freebsd-arm64-0.27.4.tgz",
+            "integrity": "sha512-jnfpKe+p79tCnm4GVav68A7tUFeKQwQyLgESwEAUzyxk/TJr4QdGog9sqWNcUbr/bZt/O/HXouspuQDd9JxFSw==",
+            "cpu": [
+                "arm64"
+            ],
+            "license": "MIT",
+            "optional": true,
+            "os": [
+                "freebsd"
+            ],
+            "engines": {
+                "node": ">=18"
+            }
+        },
+        "node_modules/@esbuild/freebsd-x64": {
+            "version": "0.27.4",
+            "resolved": "http://localhost:4873/@esbuild/freebsd-x64/-/freebsd-x64-0.27.4.tgz",
+            "integrity": "sha512-2kb4ceA/CpfUrIcTUl1wrP/9ad9Atrp5J94Lq69w7UwOMolPIGrfLSvAKJp0RTvkPPyn6CIWrNy13kyLikZRZQ==",
+            "cpu": [
+                "x64"
+            ],
+            "license": "MIT",
+            "optional": true,
+            "os": [
+                "freebsd"
+            ],
+            "engines": {
+                "node": ">=18"
+            }
+        },
+        "node_modules/@esbuild/linux-arm": {
+            "version": "0.27.4",
+            "resolved": "http://localhost:4873/@esbuild/linux-arm/-/linux-arm-0.27.4.tgz",
+            "integrity": "sha512-aBYgcIxX/wd5n2ys0yESGeYMGF+pv6g0DhZr3G1ZG4jMfruU9Tl1i2Z+Wnj9/KjGz1lTLCcorqE2viePZqj4Eg==",
+            "cpu": [
+                "arm"
+            ],
+            "license": "MIT",
+            "optional": true,
+            "os": [
+                "linux"
+            ],
+            "engines": {
+                "node": ">=18"
+            }
+        },
+        "node_modules/@esbuild/linux-arm64": {
+            "version": "0.27.4",
+            "resolved": "http://localhost:4873/@esbuild/linux-arm64/-/linux-arm64-0.27.4.tgz",
+            "integrity": "sha512-7nQOttdzVGth1iz57kxg9uCz57dxQLHWxopL6mYuYthohPKEK0vU0C3O21CcBK6KDlkYVcnDXY099HcCDXd9dA==",
+            "cpu": [
+                "arm64"
+            ],
+            "license": "MIT",
+            "optional": true,
+            "os": [
+                "linux"
+            ],
+            "engines": {
+                "node": ">=18"
+            }
+        },
+        "node_modules/@esbuild/linux-ia32": {
+            "version": "0.27.4",
+            "resolved": "http://localhost:4873/@esbuild/linux-ia32/-/linux-ia32-0.27.4.tgz",
+            "integrity": "sha512-oPtixtAIzgvzYcKBQM/qZ3R+9TEUd1aNJQu0HhGyqtx6oS7qTpvjheIWBbes4+qu1bNlo2V4cbkISr8q6gRBFA==",
+            "cpu": [
+                "ia32"
+            ],
+            "license": "MIT",
+            "optional": true,
+            "os": [
+                "linux"
+            ],
+            "engines": {
+                "node": ">=18"
+            }
+        },
+        "node_modules/@esbuild/linux-loong64": {
+            "version": "0.27.4",
+            "resolved": "http://localhost:4873/@esbuild/linux-loong64/-/linux-loong64-0.27.4.tgz",
+            "integrity": "sha512-8mL/vh8qeCoRcFH2nM8wm5uJP+ZcVYGGayMavi8GmRJjuI3g1v6Z7Ni0JJKAJW+m0EtUuARb6Lmp4hMjzCBWzA==",
+            "cpu": [
+                "loong64"
+            ],
+            "license": "MIT",
+            "optional": true,
+            "os": [
+                "linux"
+            ],
+            "engines": {
+                "node": ">=18"
+            }
+        },
+        "node_modules/@esbuild/linux-mips64el": {
+            "version": "0.27.4",
+            "resolved": "http://localhost:4873/@esbuild/linux-mips64el/-/linux-mips64el-0.27.4.tgz",
+            "integrity": "sha512-1RdrWFFiiLIW7LQq9Q2NES+HiD4NyT8Itj9AUeCl0IVCA459WnPhREKgwrpaIfTOe+/2rdntisegiPWn/r/aAw==",
+            "cpu": [
+                "mips64el"
+            ],
+            "license": "MIT",
+            "optional": true,
+            "os": [
+                "linux"
+            ],
+            "engines": {
+                "node": ">=18"
+            }
+        },
+        "node_modules/@esbuild/linux-ppc64": {
+            "version": "0.27.4",
+            "resolved": "http://localhost:4873/@esbuild/linux-ppc64/-/linux-ppc64-0.27.4.tgz",
+            "integrity": "sha512-tLCwNG47l3sd9lpfyx9LAGEGItCUeRCWeAx6x2Jmbav65nAwoPXfewtAdtbtit/pJFLUWOhpv0FpS6GQAmPrHA==",
+            "cpu": [
+                "ppc64"
+            ],
+            "license": "MIT",
+            "optional": true,
+            "os": [
+                "linux"
+            ],
+            "engines": {
+                "node": ">=18"
+            }
+        },
+        "node_modules/@esbuild/linux-riscv64": {
+            "version": "0.27.4",
+            "resolved": "http://localhost:4873/@esbuild/linux-riscv64/-/linux-riscv64-0.27.4.tgz",
+            "integrity": "sha512-BnASypppbUWyqjd1KIpU4AUBiIhVr6YlHx/cnPgqEkNoVOhHg+YiSVxM1RLfiy4t9cAulbRGTNCKOcqHrEQLIw==",
+            "cpu": [
+                "riscv64"
+            ],
+            "license": "MIT",
+            "optional": true,
+            "os": [
+                "linux"
+            ],
+            "engines": {
+                "node": ">=18"
+            }
+        },
+        "node_modules/@esbuild/linux-s390x": {
+            "version": "0.27.4",
+            "resolved": "http://localhost:4873/@esbuild/linux-s390x/-/linux-s390x-0.27.4.tgz",
+            "integrity": "sha512-+eUqgb/Z7vxVLezG8bVB9SfBie89gMueS+I0xYh2tJdw3vqA/0ImZJ2ROeWwVJN59ihBeZ7Tu92dF/5dy5FttA==",
+            "cpu": [
+                "s390x"
+            ],
+            "license": "MIT",
+            "optional": true,
+            "os": [
+                "linux"
+            ],
+            "engines": {
+                "node": ">=18"
+            }
+        },
+        "node_modules/@esbuild/linux-x64": {
+            "version": "0.27.4",
+            "resolved": "http://localhost:4873/@esbuild/linux-x64/-/linux-x64-0.27.4.tgz",
+            "integrity": "sha512-S5qOXrKV8BQEzJPVxAwnryi2+Iq5pB40gTEIT69BQONqR7JH1EPIcQ/Uiv9mCnn05jff9umq/5nqzxlqTOg9NA==",
+            "cpu": [
+                "x64"
+            ],
+            "license": "MIT",
+            "optional": true,
+            "os": [
+                "linux"
+            ],
+            "engines": {
+                "node": ">=18"
+            }
+        },
+        "node_modules/@esbuild/netbsd-arm64": {
+            "version": "0.27.4",
+            "resolved": "http://localhost:4873/@esbuild/netbsd-arm64/-/netbsd-arm64-0.27.4.tgz",
+            "integrity": "sha512-xHT8X4sb0GS8qTqiwzHqpY00C95DPAq7nAwX35Ie/s+LO9830hrMd3oX0ZMKLvy7vsonee73x0lmcdOVXFzd6Q==",
+            "cpu": [
+                "arm64"
+            ],
+            "license": "MIT",
+            "optional": true,
+            "os": [
+                "netbsd"
+            ],
+            "engines": {
+                "node": ">=18"
+            }
+        },
+        "node_modules/@esbuild/netbsd-x64": {
+            "version": "0.27.4",
+            "resolved": "http://localhost:4873/@esbuild/netbsd-x64/-/netbsd-x64-0.27.4.tgz",
+            "integrity": "sha512-RugOvOdXfdyi5Tyv40kgQnI0byv66BFgAqjdgtAKqHoZTbTF2QqfQrFwa7cHEORJf6X2ht+l9ABLMP0dnKYsgg==",
+            "cpu": [
+                "x64"
+            ],
+            "license": "MIT",
+            "optional": true,
+            "os": [
+                "netbsd"
+            ],
+            "engines": {
+                "node": ">=18"
+            }
+        },
+        "node_modules/@esbuild/openbsd-arm64": {
+            "version": "0.27.4",
+            "resolved": "http://localhost:4873/@esbuild/openbsd-arm64/-/openbsd-arm64-0.27.4.tgz",
+            "integrity": "sha512-2MyL3IAaTX+1/qP0O1SwskwcwCoOI4kV2IBX1xYnDDqthmq5ArrW94qSIKCAuRraMgPOmG0RDTA74mzYNQA9ow==",
+            "cpu": [
+                "arm64"
+            ],
+            "license": "MIT",
+            "optional": true,
+            "os": [
+                "openbsd"
+            ],
+            "engines": {
+                "node": ">=18"
+            }
+        },
+        "node_modules/@esbuild/openbsd-x64": {
+            "version": "0.27.4",
+            "resolved": "http://localhost:4873/@esbuild/openbsd-x64/-/openbsd-x64-0.27.4.tgz",
+            "integrity": "sha512-u8fg/jQ5aQDfsnIV6+KwLOf1CmJnfu1ShpwqdwC0uA7ZPwFws55Ngc12vBdeUdnuWoQYx/SOQLGDcdlfXhYmXQ==",
+            "cpu": [
+                "x64"
+            ],
+            "license": "MIT",
+            "optional": true,
+            "os": [
+                "openbsd"
+            ],
+            "engines": {
+                "node": ">=18"
+            }
+        },
+        "node_modules/@esbuild/openharmony-arm64": {
+            "version": "0.27.4",
+            "resolved": "http://localhost:4873/@esbuild/openharmony-arm64/-/openharmony-arm64-0.27.4.tgz",
+            "integrity": "sha512-JkTZrl6VbyO8lDQO3yv26nNr2RM2yZzNrNHEsj9bm6dOwwu9OYN28CjzZkH57bh4w0I2F7IodpQvUAEd1mbWXg==",
+            "cpu": [
+                "arm64"
+            ],
+            "license": "MIT",
+            "optional": true,
+            "os": [
+                "openharmony"
+            ],
+            "engines": {
+                "node": ">=18"
+            }
+        },
+        "node_modules/@esbuild/sunos-x64": {
+            "version": "0.27.4",
+            "resolved": "http://localhost:4873/@esbuild/sunos-x64/-/sunos-x64-0.27.4.tgz",
+            "integrity": "sha512-/gOzgaewZJfeJTlsWhvUEmUG4tWEY2Spp5M20INYRg2ZKl9QPO3QEEgPeRtLjEWSW8FilRNacPOg8R1uaYkA6g==",
+            "cpu": [
+                "x64"
+            ],
+            "license": "MIT",
+            "optional": true,
+            "os": [
+                "sunos"
+            ],
+            "engines": {
+                "node": ">=18"
+            }
+        },
+        "node_modules/@esbuild/win32-arm64": {
+            "version": "0.27.4",
+            "resolved": "http://localhost:4873/@esbuild/win32-arm64/-/win32-arm64-0.27.4.tgz",
+            "integrity": "sha512-Z9SExBg2y32smoDQdf1HRwHRt6vAHLXcxD2uGgO/v2jK7Y718Ix4ndsbNMU/+1Qiem9OiOdaqitioZwxivhXYg==",
+            "cpu": [
+                "arm64"
+            ],
+            "license": "MIT",
+            "optional": true,
+            "os": [
+                "win32"
+            ],
+            "engines": {
+                "node": ">=18"
+            }
+        },
+        "node_modules/@esbuild/win32-ia32": {
+            "version": "0.27.4",
+            "resolved": "http://localhost:4873/@esbuild/win32-ia32/-/win32-ia32-0.27.4.tgz",
+            "integrity": "sha512-DAyGLS0Jz5G5iixEbMHi5KdiApqHBWMGzTtMiJ72ZOLhbu/bzxgAe8Ue8CTS3n3HbIUHQz/L51yMdGMeoxXNJw==",
+            "cpu": [
+                "ia32"
+            ],
+            "license": "MIT",
+            "optional": true,
+            "os": [
+                "win32"
+            ],
+            "engines": {
+                "node": ">=18"
+            }
+        },
+        "node_modules/@esbuild/win32-x64": {
+            "version": "0.27.4",
+            "resolved": "http://localhost:4873/@esbuild/win32-x64/-/win32-x64-0.27.4.tgz",
+            "integrity": "sha512-+knoa0BDoeXgkNvvV1vvbZX4+hizelrkwmGJBdT17t8FNPwG2lKemmuMZlmaNQ3ws3DKKCxpb4zRZEIp3UxFCg==",
+            "cpu": [
+                "x64"
+            ],
+            "license": "MIT",
+            "optional": true,
+            "os": [
+                "win32"
+            ],
+            "engines": {
+                "node": ">=18"
+            }
+        },
+        "node_modules/@eslint-community/eslint-utils": {
+            "version": "4.9.1",
+            "resolved": "http://localhost:4873/@eslint-community/eslint-utils/-/eslint-utils-4.9.1.tgz",
+            "integrity": "sha512-phrYmNiYppR7znFEdqgfWHXR6NCkZEK7hwWDHZUjit/2/U0r6XvkDl0SYnoM51Hq7FhCGdLDT6zxCCOY1hexsQ==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "eslint-visitor-keys": "^3.4.3"
+            },
+            "engines": {
+                "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
+            },
+            "funding": {
+                "url": "https://opencollective.com/eslint"
+            },
+            "peerDependencies": {
+                "eslint": "^6.0.0 || ^7.0.0 || >=8.0.0"
+            }
+        },
+        "node_modules/@eslint-community/eslint-utils/node_modules/eslint-visitor-keys": {
+            "version": "3.4.3",
+            "resolved": "http://localhost:4873/eslint-visitor-keys/-/eslint-visitor-keys-3.4.3.tgz",
+            "integrity": "sha512-wpc+LXeiyiisxPlEkUzU6svyS1frIO3Mgxj1fdy7Pm8Ygzguax2N3Fa/D/ag1WqbOprdI+uY6wMUl8/a2G+iag==",
+            "dev": true,
+            "license": "Apache-2.0",
+            "engines": {
+                "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
+            },
+            "funding": {
+                "url": "https://opencollective.com/eslint"
+            }
+        },
+        "node_modules/@eslint-community/regexpp": {
+            "version": "4.12.2",
+            "resolved": "http://localhost:4873/@eslint-community/regexpp/-/regexpp-4.12.2.tgz",
+            "integrity": "sha512-EriSTlt5OC9/7SXkRSCAhfSxxoSUgBm33OH+IkwbdpgoqsSsUg7y3uh+IICI/Qg4BBWr3U2i39RpmycbxMq4ew==",
+            "dev": true,
+            "license": "MIT",
+            "engines": {
+                "node": "^12.0.0 || ^14.0.0 || >=16.0.0"
+            }
+        },
+        "node_modules/@eslint/config-array": {
+            "version": "0.23.3",
+            "resolved": "http://localhost:4873/@eslint/config-array/-/config-array-0.23.3.tgz",
+            "integrity": "sha512-j+eEWmB6YYLwcNOdlwQ6L2OsptI/LO6lNBuLIqe5R7RetD658HLoF+Mn7LzYmAWWNNzdC6cqP+L6r8ujeYXWLw==",
+            "dev": true,
+            "license": "Apache-2.0",
+            "peer": true,
+            "dependencies": {
+                "@eslint/object-schema": "^3.0.3",
+                "debug": "^4.3.1",
+                "minimatch": "^10.2.4"
+            },
+            "engines": {
+                "node": "^20.19.0 || ^22.13.0 || >=24"
+            }
+        },
+        "node_modules/@eslint/config-helpers": {
+            "version": "0.5.3",
+            "resolved": "http://localhost:4873/@eslint/config-helpers/-/config-helpers-0.5.3.tgz",
+            "integrity": "sha512-lzGN0onllOZCGroKJmRwY6QcEHxbjBw1gwB8SgRSqK8YbbtEXMvKynsXc3553ckIEBxsbMBU7oOZXKIPGZNeZw==",
+            "dev": true,
+            "license": "Apache-2.0",
+            "peer": true,
+            "dependencies": {
+                "@eslint/core": "^1.1.1"
+            },
+            "engines": {
+                "node": "^20.19.0 || ^22.13.0 || >=24"
+            }
+        },
+        "node_modules/@eslint/core": {
+            "version": "1.1.1",
+            "resolved": "http://localhost:4873/@eslint/core/-/core-1.1.1.tgz",
+            "integrity": "sha512-QUPblTtE51/7/Zhfv8BDwO0qkkzQL7P/aWWbqcf4xWLEYn1oKjdO0gglQBB4GAsu7u6wjijbCmzsUTy6mnk6oQ==",
+            "dev": true,
+            "license": "Apache-2.0",
+            "peer": true,
+            "dependencies": {
+                "@types/json-schema": "^7.0.15"
+            },
+            "engines": {
+                "node": "^20.19.0 || ^22.13.0 || >=24"
+            }
+        },
+        "node_modules/@eslint/object-schema": {
+            "version": "3.0.3",
+            "resolved": "http://localhost:4873/@eslint/object-schema/-/object-schema-3.0.3.tgz",
+            "integrity": "sha512-iM869Pugn9Nsxbh/YHRqYiqd23AmIbxJOcpUMOuWCVNdoQJ5ZtwL6h3t0bcZzJUlC3Dq9jCFCESBZnX0GTv7iQ==",
+            "dev": true,
+            "license": "Apache-2.0",
+            "peer": true,
+            "engines": {
+                "node": "^20.19.0 || ^22.13.0 || >=24"
+            }
+        },
+        "node_modules/@eslint/plugin-kit": {
+            "version": "0.6.1",
+            "resolved": "http://localhost:4873/@eslint/plugin-kit/-/plugin-kit-0.6.1.tgz",
+            "integrity": "sha512-iH1B076HoAshH1mLpHMgwdGeTs0CYwL0SPMkGuSebZrwBp16v415e9NZXg2jtrqPVQjf6IANe2Vtlr5KswtcZQ==",
+            "dev": true,
+            "license": "Apache-2.0",
+            "peer": true,
+            "dependencies": {
+                "@eslint/core": "^1.1.1",
+                "levn": "^0.4.1"
+            },
+            "engines": {
+                "node": "^20.19.0 || ^22.13.0 || >=24"
+            }
+        },
+        "node_modules/@formatjs/ecma402-abstract": {
+            "version": "2.3.6",
+            "resolved": "http://localhost:4873/@formatjs/ecma402-abstract/-/ecma402-abstract-2.3.6.tgz",
+            "integrity": "sha512-HJnTFeRM2kVFVr5gr5kH1XP6K0JcJtE7Lzvtr3FS/so5f1kpsqqqxy5JF+FRaO6H2qmcMfAUIox7AJteieRtVw==",
+            "license": "MIT",
+            "dependencies": {
+                "@formatjs/fast-memoize": "2.2.7",
+                "@formatjs/intl-localematcher": "0.6.2",
+                "decimal.js": "^10.4.3",
+                "tslib": "^2.8.0"
+            }
+        },
+        "node_modules/@formatjs/fast-memoize": {
+            "version": "2.2.7",
+            "resolved": "http://localhost:4873/@formatjs/fast-memoize/-/fast-memoize-2.2.7.tgz",
+            "integrity": "sha512-Yabmi9nSvyOMrlSeGGWDiH7rf3a7sIwplbvo/dlz9WCIjzIQAfy1RMf4S0X3yG724n5Ghu2GmEl5NJIV6O9sZQ==",
+            "license": "MIT",
+            "dependencies": {
+                "tslib": "^2.8.0"
+            }
+        },
+        "node_modules/@formatjs/icu-messageformat-parser": {
+            "version": "2.11.4",
+            "resolved": "http://localhost:4873/@formatjs/icu-messageformat-parser/-/icu-messageformat-parser-2.11.4.tgz",
+            "integrity": "sha512-7kR78cRrPNB4fjGFZg3Rmj5aah8rQj9KPzuLsmcSn4ipLXQvC04keycTI1F7kJYDwIXtT2+7IDEto842CfZBtw==",
+            "license": "MIT",
+            "dependencies": {
+                "@formatjs/ecma402-abstract": "2.3.6",
+                "@formatjs/icu-skeleton-parser": "1.8.16",
+                "tslib": "^2.8.0"
+            }
+        },
+        "node_modules/@formatjs/icu-skeleton-parser": {
+            "version": "1.8.16",
+            "resolved": "http://localhost:4873/@formatjs/icu-skeleton-parser/-/icu-skeleton-parser-1.8.16.tgz",
+            "integrity": "sha512-H13E9Xl+PxBd8D5/6TVUluSpxGNvFSlN/b3coUp0e0JpuWXXnQDiavIpY3NnvSp4xhEMoXyyBvVfdFX8jglOHQ==",
+            "license": "MIT",
+            "dependencies": {
+                "@formatjs/ecma402-abstract": "2.3.6",
+                "tslib": "^2.8.0"
+            }
+        },
+        "node_modules/@formatjs/intl-localematcher": {
+            "version": "0.6.2",
+            "resolved": "http://localhost:4873/@formatjs/intl-localematcher/-/intl-localematcher-0.6.2.tgz",
+            "integrity": "sha512-XOMO2Hupl0wdd172Y06h6kLpBz6Dv+J4okPLl4LPtzbr8f66WbIoy4ev98EBuZ6ZK4h5ydTN6XneT4QVpD7cdA==",
+            "license": "MIT",
+            "dependencies": {
+                "tslib": "^2.8.0"
+            }
+        },
+        "node_modules/@fortawesome/fontawesome-common-types": {
+            "version": "7.2.0",
+            "resolved": "https://npm.fontawesome.com/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-7.2.0.tgz",
+            "integrity": "sha512-IpR0bER9FY25p+e7BmFH25MZKEwFHTfRAfhOyJubgiDnoJNsSvJ7nigLraHtp4VOG/cy8D7uiV0dLkHOne5Fhw==",
+            "license": "MIT",
+            "engines": {
+                "node": ">=6"
+            }
+        },
+        "node_modules/@fortawesome/fontawesome-svg-core": {
+            "version": "7.2.0",
+            "resolved": "https://npm.fontawesome.com/@fortawesome/fontawesome-svg-core/-/fontawesome-svg-core-7.2.0.tgz",
+            "integrity": "sha512-6639htZMjEkwskf3J+e6/iar+4cTNM9qhoWuRfj9F3eJD6r7iCzV1SWnQr2Mdv0QT0suuqU8BoJCZUyCtP9R4Q==",
+            "license": "MIT",
+            "dependencies": {
+                "@fortawesome/fontawesome-common-types": "7.2.0"
+            },
+            "engines": {
+                "node": ">=6"
+            }
+        },
+        "node_modules/@fortawesome/free-solid-svg-icons": {
+            "version": "7.2.0",
+            "resolved": "https://npm.fontawesome.com/@fortawesome/free-solid-svg-icons/-/free-solid-svg-icons-7.2.0.tgz",
+            "integrity": "sha512-YTVITFGN0/24PxzXrwqCgnyd7njDuzp5ZvaCx5nq/jg55kUYd94Nj8UTchBdBofi/L0nwRfjGOg0E41d2u9T1w==",
+            "license": "(CC-BY-4.0 AND MIT)",
+            "dependencies": {
+                "@fortawesome/fontawesome-common-types": "7.2.0"
+            },
+            "engines": {
+                "node": ">=6"
+            }
+        },
+        "node_modules/@fortawesome/pro-light-svg-icons": {
+            "version": "7.2.0",
+            "resolved": "https://npm.fontawesome.com/@fortawesome/pro-light-svg-icons/-/pro-light-svg-icons-7.2.0.tgz",
+            "integrity": "sha512-0SZf+Lu4DoolJelZi9Cc1Ta2VqUGkvV6BPxCb22mV16GQhqGa2VuLkqAn7zur0Sy8Cinu6MyPRfndHSe72zYyQ==",
+            "license": "UNLICENSED",
+            "dependencies": {
+                "@fortawesome/fontawesome-common-types": "7.2.0"
+            },
+            "engines": {
+                "node": ">=6"
+            }
+        },
+        "node_modules/@fortawesome/pro-regular-svg-icons": {
+            "version": "7.2.0",
+            "resolved": "https://npm.fontawesome.com/@fortawesome/pro-regular-svg-icons/-/pro-regular-svg-icons-7.2.0.tgz",
+            "integrity": "sha512-FU6amNj6Dbsb2m19T8ABiL8HoImIGm8AhxnPAgQDDZcslGezu6R7HrDicBPJuVTNFSxFGRRAXIRs/z44xg7ftA==",
+            "license": "UNLICENSED",
+            "dependencies": {
+                "@fortawesome/fontawesome-common-types": "7.2.0"
+            },
+            "engines": {
+                "node": ">=6"
+            }
+        },
+        "node_modules/@fortawesome/pro-solid-svg-icons": {
+            "version": "7.2.0",
+            "resolved": "https://npm.fontawesome.com/@fortawesome/pro-solid-svg-icons/-/pro-solid-svg-icons-7.2.0.tgz",
+            "integrity": "sha512-r+YsuG1B+iYcCXNS82bfvRnGJtlRhVI5Xk7vVJ9+ymJU5u4UGGGOSFRV5kRWH2zFItH9PKaIjnN1cXMcgOM/+g==",
+            "license": "UNLICENSED",
+            "dependencies": {
+                "@fortawesome/fontawesome-common-types": "7.2.0"
+            },
+            "engines": {
+                "node": ">=6"
+            }
+        },
+        "node_modules/@fortawesome/react-fontawesome": {
+            "version": "3.2.0",
+            "resolved": "https://npm.fontawesome.com/@fortawesome/react-fontawesome/-/react-fontawesome-3.2.0.tgz",
+            "integrity": "sha512-E9Gu1hqd6JussVO26EC4WqRZssXMnQr2ol7ZNWkkFOH8jZUaxDJ9Z9WF9wIVkC+kJGXUdY3tlffpDwEKfgQrQw==",
+            "license": "MIT",
+            "engines": {
+                "node": ">=20"
+            },
+            "peerDependencies": {
+                "@fortawesome/fontawesome-svg-core": "~6 || ~7",
+                "react": "^18.0.0 || ^19.0.0"
+            }
+        },
+        "node_modules/@humanfs/core": {
+            "version": "0.19.1",
+            "resolved": "http://localhost:4873/@humanfs/core/-/core-0.19.1.tgz",
+            "integrity": "sha512-5DyQ4+1JEUzejeK1JGICcideyfUbGixgS9jNgex5nqkW+cY7WZhxBigmieN5Qnw9ZosSNVC9KQKyb+GUaGyKUA==",
+            "dev": true,
+            "license": "Apache-2.0",
+            "peer": true,
+            "engines": {
+                "node": ">=18.18.0"
+            }
+        },
+        "node_modules/@humanfs/node": {
+            "version": "0.16.7",
+            "resolved": "http://localhost:4873/@humanfs/node/-/node-0.16.7.tgz",
+            "integrity": "sha512-/zUx+yOsIrG4Y43Eh2peDeKCxlRt/gET6aHfaKpuq267qXdYDFViVHfMaLyygZOnl0kGWxFIgsBy8QFuTLUXEQ==",
+            "dev": true,
+            "license": "Apache-2.0",
+            "peer": true,
+            "dependencies": {
+                "@humanfs/core": "^0.19.1",
+                "@humanwhocodes/retry": "^0.4.0"
+            },
+            "engines": {
+                "node": ">=18.18.0"
+            }
+        },
+        "node_modules/@humanwhocodes/module-importer": {
+            "version": "1.0.1",
+            "resolved": "http://localhost:4873/@humanwhocodes/module-importer/-/module-importer-1.0.1.tgz",
+            "integrity": "sha512-bxveV4V8v5Yb4ncFTT3rPSgZBOpCkjfK0y4oVVVJwIuDVBRMDXrPyXRL988i5ap9m9bnyEEjWfm5WkBmtffLfA==",
+            "dev": true,
+            "license": "Apache-2.0",
+            "peer": true,
+            "engines": {
+                "node": ">=12.22"
+            },
+            "funding": {
+                "type": "github",
+                "url": "https://github.com/sponsors/nzakas"
+            }
+        },
+        "node_modules/@humanwhocodes/retry": {
+            "version": "0.4.3",
+            "resolved": "http://localhost:4873/@humanwhocodes/retry/-/retry-0.4.3.tgz",
+            "integrity": "sha512-bV0Tgo9K4hfPCek+aMAn81RppFKv2ySDQeMoSZuvTASywNTnVJCArCZE2FWqpvIatKu7VMRLWlR1EazvVhDyhQ==",
+            "dev": true,
+            "license": "Apache-2.0",
+            "peer": true,
+            "engines": {
+                "node": ">=18.18"
+            },
+            "funding": {
+                "type": "github",
+                "url": "https://github.com/sponsors/nzakas"
+            }
+        },
+        "node_modules/@internationalized/date": {
+            "version": "3.12.0",
+            "resolved": "http://localhost:4873/@internationalized/date/-/date-3.12.0.tgz",
+            "integrity": "sha512-/PyIMzK29jtXaGU23qTvNZxvBXRtKbNnGDFD+PY6CZw/Y8Ex8pFUzkuCJCG9aOqmShjqhS9mPqP6Dk5onQY8rQ==",
+            "license": "Apache-2.0",
+            "dependencies": {
+                "@swc/helpers": "^0.5.0"
+            }
+        },
+        "node_modules/@internationalized/message": {
+            "version": "3.1.8",
+            "resolved": "http://localhost:4873/@internationalized/message/-/message-3.1.8.tgz",
+            "integrity": "sha512-Rwk3j/TlYZhn3HQ6PyXUV0XP9Uv42jqZGNegt0BXlxjE6G3+LwHjbQZAGHhCnCPdaA6Tvd3ma/7QzLlLkJxAWA==",
+            "license": "Apache-2.0",
+            "dependencies": {
+                "@swc/helpers": "^0.5.0",
+                "intl-messageformat": "^10.1.0"
+            }
+        },
+        "node_modules/@internationalized/number": {
+            "version": "3.6.5",
+            "resolved": "http://localhost:4873/@internationalized/number/-/number-3.6.5.tgz",
+            "integrity": "sha512-6hY4Kl4HPBvtfS62asS/R22JzNNy8vi/Ssev7x6EobfCp+9QIB2hKvI2EtbdJ0VSQacxVNtqhE/NmF/NZ0gm6g==",
+            "license": "Apache-2.0",
+            "dependencies": {
+                "@swc/helpers": "^0.5.0"
+            }
+        },
+        "node_modules/@internationalized/string": {
+            "version": "3.2.7",
+            "resolved": "http://localhost:4873/@internationalized/string/-/string-3.2.7.tgz",
+            "integrity": "sha512-D4OHBjrinH+PFZPvfCXvG28n2LSykWcJ7GIioQL+ok0LON15SdfoUssoHzzOUmVZLbRoREsQXVzA6r8JKsbP6A==",
+            "license": "Apache-2.0",
+            "dependencies": {
+                "@swc/helpers": "^0.5.0"
+            }
+        },
+        "node_modules/@jridgewell/gen-mapping": {
+            "version": "0.3.13",
+            "resolved": "http://localhost:4873/@jridgewell/gen-mapping/-/gen-mapping-0.3.13.tgz",
+            "integrity": "sha512-2kkt/7niJ6MgEPxF0bYdQ6etZaA+fQvDcLKckhy1yIQOzaoKjBBjSj63/aLVjYE3qhRt5dvM+uUyfCg6UKCBbA==",
+            "license": "MIT",
+            "dependencies": {
+                "@jridgewell/sourcemap-codec": "^1.5.0",
+                "@jridgewell/trace-mapping": "^0.3.24"
+            }
+        },
+        "node_modules/@jridgewell/remapping": {
+            "version": "2.3.5",
+            "resolved": "http://localhost:4873/@jridgewell/remapping/-/remapping-2.3.5.tgz",
+            "integrity": "sha512-LI9u/+laYG4Ds1TDKSJW2YPrIlcVYOwi2fUC6xB43lueCjgxV4lffOCZCtYFiH6TNOX+tQKXx97T4IKHbhyHEQ==",
+            "license": "MIT",
+            "dependencies": {
+                "@jridgewell/gen-mapping": "^0.3.5",
+                "@jridgewell/trace-mapping": "^0.3.24"
+            }
+        },
+        "node_modules/@jridgewell/resolve-uri": {
+            "version": "3.1.2",
+            "resolved": "http://localhost:4873/@jridgewell/resolve-uri/-/resolve-uri-3.1.2.tgz",
+            "integrity": "sha512-bRISgCIjP20/tbWSPWMEi54QVPRZExkuD9lJL+UIxUKtwVJA8wW1Trb1jMs1RFXo1CBTNZ/5hpC9QvmKWdopKw==",
+            "license": "MIT",
+            "engines": {
+                "node": ">=6.0.0"
+            }
+        },
+        "node_modules/@jridgewell/sourcemap-codec": {
+            "version": "1.5.5",
+            "resolved": "http://localhost:4873/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.5.5.tgz",
+            "integrity": "sha512-cYQ9310grqxueWbl+WuIUIaiUaDcj7WOq5fVhEljNVgRfOUhY9fy2zTvfoqWsnebh8Sl70VScFbICvJnLKB0Og==",
+            "license": "MIT"
+        },
+        "node_modules/@jridgewell/trace-mapping": {
+            "version": "0.3.31",
+            "resolved": "http://localhost:4873/@jridgewell/trace-mapping/-/trace-mapping-0.3.31.tgz",
+            "integrity": "sha512-zzNR+SdQSDJzc8joaeP8QQoCQr8NuYx2dIIytl1QeBEZHJ9uW6hebsrYgbz8hJwUQao3TWCMtmfV8Nu1twOLAw==",
+            "license": "MIT",
+            "dependencies": {
+                "@jridgewell/resolve-uri": "^3.1.0",
+                "@jridgewell/sourcemap-codec": "^1.4.14"
+            }
+        },
+        "node_modules/@react-aria/autocomplete": {
+            "version": "3.0.0-rc.6",
+            "resolved": "http://localhost:4873/@react-aria/autocomplete/-/autocomplete-3.0.0-rc.6.tgz",
+            "integrity": "sha512-uymUNJ8NW+dX7lmgkHE+SklAbxwktycAJcI5lBBw6KPZyc0EdMHC+/Fc5CUz3enIAhNwd2oxxogcSHknquMzQA==",
+            "license": "Apache-2.0",
+            "dependencies": {
+                "@react-aria/combobox": "^3.15.0",
+                "@react-aria/focus": "^3.21.5",
+                "@react-aria/i18n": "^3.12.16",
+                "@react-aria/interactions": "^3.27.1",
+                "@react-aria/listbox": "^3.15.3",
+                "@react-aria/searchfield": "^3.8.12",
+                "@react-aria/textfield": "^3.18.5",
+                "@react-aria/utils": "^3.33.1",
+                "@react-stately/autocomplete": "3.0.0-beta.4",
+                "@react-stately/combobox": "^3.13.0",
+                "@react-types/autocomplete": "3.0.0-alpha.38",
+                "@react-types/button": "^3.15.1",
+                "@react-types/shared": "^3.33.1",
+                "@swc/helpers": "^0.5.0"
+            },
+            "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"
+            }
+        },
+        "node_modules/@react-aria/breadcrumbs": {
+            "version": "3.5.32",
+            "resolved": "http://localhost:4873/@react-aria/breadcrumbs/-/breadcrumbs-3.5.32.tgz",
+            "integrity": "sha512-S61vh5DJ2PXiXUwD7gk+pvS/b4VPrc3ZJOUZ0yVRLHkVESr5LhIZH+SAVgZkm1lzKyMRG+BH+fiRH/DZRSs7SA==",
+            "license": "Apache-2.0",
+            "dependencies": {
+                "@react-aria/i18n": "^3.12.16",
+                "@react-aria/link": "^3.8.9",
+                "@react-aria/utils": "^3.33.1",
+                "@react-types/breadcrumbs": "^3.7.19",
+                "@react-types/shared": "^3.33.1",
+                "@swc/helpers": "^0.5.0"
+            },
+            "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"
+            }
+        },
+        "node_modules/@react-aria/button": {
+            "version": "3.14.5",
+            "resolved": "http://localhost:4873/@react-aria/button/-/button-3.14.5.tgz",
+            "integrity": "sha512-ZuLx+wQj9VQhH9BYe7t0JowmKnns2XrFHFNvIVBb5RwxL+CIycIOL7brhWKg2rGdxvlOom7jhVbcjSmtAaSyaQ==",
+            "license": "Apache-2.0",
+            "dependencies": {
+                "@react-aria/interactions": "^3.27.1",
+                "@react-aria/toolbar": "3.0.0-beta.24",
+                "@react-aria/utils": "^3.33.1",
+                "@react-stately/toggle": "^3.9.5",
+                "@react-types/button": "^3.15.1",
+                "@react-types/shared": "^3.33.1",
+                "@swc/helpers": "^0.5.0"
+            },
+            "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"
+            }
+        },
+        "node_modules/@react-aria/calendar": {
+            "version": "3.9.5",
+            "resolved": "http://localhost:4873/@react-aria/calendar/-/calendar-3.9.5.tgz",
+            "integrity": "sha512-k0kvceYdZZu+DoeqephtlmIvh1CxqdFyoN52iqVzTz9O0pe5Xfhq7zxPGbeCp4pC61xzp8Lu/6uFA/YNfQQNag==",
+            "license": "Apache-2.0",
+            "dependencies": {
+                "@internationalized/date": "^3.12.0",
+                "@react-aria/i18n": "^3.12.16",
+                "@react-aria/interactions": "^3.27.1",
+                "@react-aria/live-announcer": "^3.4.4",
+                "@react-aria/utils": "^3.33.1",
+                "@react-stately/calendar": "^3.9.3",
+                "@react-types/button": "^3.15.1",
+                "@react-types/calendar": "^3.8.3",
+                "@react-types/shared": "^3.33.1",
+                "@swc/helpers": "^0.5.0"
+            },
+            "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"
+            }
+        },
+        "node_modules/@react-aria/checkbox": {
+            "version": "3.16.5",
+            "resolved": "http://localhost:4873/@react-aria/checkbox/-/checkbox-3.16.5.tgz",
+            "integrity": "sha512-ZhUT7ELuD52hb+Zpzw0ElLQiVOd5sKYahrh+PK3vq13Wk5TedBscALpjuXetI4pwFfdmAM1Lhgcsrd8+6AmyvA==",
+            "license": "Apache-2.0",
+            "dependencies": {
+                "@react-aria/form": "^3.1.5",
+                "@react-aria/interactions": "^3.27.1",
+                "@react-aria/label": "^3.7.25",
+                "@react-aria/toggle": "^3.12.5",
+                "@react-aria/utils": "^3.33.1",
+                "@react-stately/checkbox": "^3.7.5",
+                "@react-stately/form": "^3.2.4",
+                "@react-stately/toggle": "^3.9.5",
+                "@react-types/checkbox": "^3.10.4",
+                "@react-types/shared": "^3.33.1",
+                "@swc/helpers": "^0.5.0"
+            },
+            "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"
+            }
+        },
+        "node_modules/@react-aria/collections": {
+            "version": "3.0.3",
+            "resolved": "http://localhost:4873/@react-aria/collections/-/collections-3.0.3.tgz",
+            "integrity": "sha512-lbC5DEbHeVFvVr4ke9y8D9Nynnr8G8UjVEBoFGRylpAaScU7SX1TN84QI+EjMbsdZ0/5P2H7gUTS+MYd+6U3Rg==",
+            "license": "Apache-2.0",
+            "dependencies": {
+                "@react-aria/interactions": "^3.27.1",
+                "@react-aria/ssr": "^3.9.10",
+                "@react-aria/utils": "^3.33.1",
+                "@react-types/shared": "^3.33.1",
+                "@swc/helpers": "^0.5.0",
+                "use-sync-external-store": "^1.6.0"
+            },
+            "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"
+            }
+        },
+        "node_modules/@react-aria/color": {
+            "version": "3.1.5",
+            "resolved": "http://localhost:4873/@react-aria/color/-/color-3.1.5.tgz",
+            "integrity": "sha512-eysWdBRzE8WDhBzh1nfjyUgzseMokXGHjIoJo880T7IPJ8tTavfQni49pU1B2qWrNOWPyrwx4Bd9pzHyboxJSA==",
+            "license": "Apache-2.0",
+            "dependencies": {
+                "@react-aria/i18n": "^3.12.16",
+                "@react-aria/interactions": "^3.27.1",
+                "@react-aria/numberfield": "^3.12.5",
+                "@react-aria/slider": "^3.8.5",
+                "@react-aria/spinbutton": "^3.7.2",
+                "@react-aria/textfield": "^3.18.5",
+                "@react-aria/utils": "^3.33.1",
+                "@react-aria/visually-hidden": "^3.8.31",
+                "@react-stately/color": "^3.9.5",
+                "@react-stately/form": "^3.2.4",
+                "@react-types/color": "^3.1.4",
+                "@react-types/shared": "^3.33.1",
+                "@swc/helpers": "^0.5.0"
+            },
+            "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"
+            }
+        },
+        "node_modules/@react-aria/combobox": {
+            "version": "3.15.0",
+            "resolved": "http://localhost:4873/@react-aria/combobox/-/combobox-3.15.0.tgz",
+            "integrity": "sha512-qSjQTFwKl3x1jCP2NRSJ6doZqAp6c2GTfoiFwWjaWg1IewwLsglaW6NnzqRDFiqFbDGgXPn4MqtC1VYEJ3NEjA==",
+            "license": "Apache-2.0",
+            "dependencies": {
+                "@react-aria/focus": "^3.21.5",
+                "@react-aria/i18n": "^3.12.16",
+                "@react-aria/interactions": "^3.27.1",
+                "@react-aria/listbox": "^3.15.3",
+                "@react-aria/live-announcer": "^3.4.4",
+                "@react-aria/menu": "^3.21.0",
+                "@react-aria/overlays": "^3.31.2",
+                "@react-aria/selection": "^3.27.2",
+                "@react-aria/textfield": "^3.18.5",
+                "@react-aria/utils": "^3.33.1",
+                "@react-stately/collections": "^3.12.10",
+                "@react-stately/combobox": "^3.13.0",
+                "@react-stately/form": "^3.2.4",
+                "@react-types/button": "^3.15.1",
+                "@react-types/combobox": "^3.14.0",
+                "@react-types/shared": "^3.33.1",
+                "@swc/helpers": "^0.5.0"
+            },
+            "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"
+            }
+        },
+        "node_modules/@react-aria/datepicker": {
+            "version": "3.16.1",
+            "resolved": "http://localhost:4873/@react-aria/datepicker/-/datepicker-3.16.1.tgz",
+            "integrity": "sha512-6BltCVWt09yefTkGjb2gViGCwoddx9HKJiZbY9u6Es/Q+VhwNJQRtczbnZ3K32p262hIknukNf/5nZaCOI1AKA==",
+            "license": "Apache-2.0",
+            "dependencies": {
+                "@internationalized/date": "^3.12.0",
+                "@internationalized/number": "^3.6.5",
+                "@internationalized/string": "^3.2.7",
+                "@react-aria/focus": "^3.21.5",
+                "@react-aria/form": "^3.1.5",
+                "@react-aria/i18n": "^3.12.16",
+                "@react-aria/interactions": "^3.27.1",
+                "@react-aria/label": "^3.7.25",
+                "@react-aria/spinbutton": "^3.7.2",
+                "@react-aria/utils": "^3.33.1",
+                "@react-stately/datepicker": "^3.16.1",
+                "@react-stately/form": "^3.2.4",
+                "@react-types/button": "^3.15.1",
+                "@react-types/calendar": "^3.8.3",
+                "@react-types/datepicker": "^3.13.5",
+                "@react-types/dialog": "^3.5.24",
+                "@react-types/shared": "^3.33.1",
+                "@swc/helpers": "^0.5.0"
+            },
+            "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"
+            }
+        },
+        "node_modules/@react-aria/dialog": {
+            "version": "3.5.34",
+            "resolved": "http://localhost:4873/@react-aria/dialog/-/dialog-3.5.34.tgz",
+            "integrity": "sha512-/x53Q5ynpW5Kv9637WYu7SrDfj3woSp6jJRj8l6teGnWW/iNZWYJETgzHfbxx+HPKYATCZesRoIeO2LnYIXyEA==",
+            "license": "Apache-2.0",
+            "dependencies": {
+                "@react-aria/interactions": "^3.27.1",
+                "@react-aria/overlays": "^3.31.2",
+                "@react-aria/utils": "^3.33.1",
+                "@react-types/dialog": "^3.5.24",
+                "@react-types/shared": "^3.33.1",
+                "@swc/helpers": "^0.5.0"
+            },
+            "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"
+            }
+        },
+        "node_modules/@react-aria/disclosure": {
+            "version": "3.1.3",
+            "resolved": "http://localhost:4873/@react-aria/disclosure/-/disclosure-3.1.3.tgz",
+            "integrity": "sha512-S3k7Wqrj+x0sWcP88Z1stSr5TIZmKEmx2rU7RB1O1/jPpbw5mgKnjtiriOlTh+kwdK11FkeqgxyHzAcBAR+FMQ==",
+            "license": "Apache-2.0",
+            "dependencies": {
+                "@react-aria/ssr": "^3.9.10",
+                "@react-aria/utils": "^3.33.1",
+                "@react-stately/disclosure": "^3.0.11",
+                "@react-types/button": "^3.15.1",
+                "@swc/helpers": "^0.5.0"
+            },
+            "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"
+            }
+        },
+        "node_modules/@react-aria/dnd": {
+            "version": "3.11.6",
+            "resolved": "http://localhost:4873/@react-aria/dnd/-/dnd-3.11.6.tgz",
+            "integrity": "sha512-4YLHUeYJleF+moAYaYt8UZqujudPvpoaHR+QMkWIFzhfridVUhCr6ZjGWrzpSZY3r68k46TG7YCsi4IEiNnysw==",
+            "license": "Apache-2.0",
+            "dependencies": {
+                "@internationalized/string": "^3.2.7",
+                "@react-aria/i18n": "^3.12.16",
+                "@react-aria/interactions": "^3.27.1",
+                "@react-aria/live-announcer": "^3.4.4",
+                "@react-aria/overlays": "^3.31.2",
+                "@react-aria/utils": "^3.33.1",
+                "@react-stately/collections": "^3.12.10",
+                "@react-stately/dnd": "^3.7.4",
+                "@react-types/button": "^3.15.1",
+                "@react-types/shared": "^3.33.1",
+                "@swc/helpers": "^0.5.0"
+            },
+            "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"
+            }
+        },
+        "node_modules/@react-aria/focus": {
+            "version": "3.21.5",
+            "resolved": "http://localhost:4873/@react-aria/focus/-/focus-3.21.5.tgz",
+            "integrity": "sha512-V18fwCyf8zqgJdpLQeDU5ZRNd9TeOfBbhLgmX77Zr5ae9XwaoJ1R3SFJG1wCJX60t34AW+aLZSEEK+saQElf3Q==",
+            "license": "Apache-2.0",
+            "dependencies": {
+                "@react-aria/interactions": "^3.27.1",
+                "@react-aria/utils": "^3.33.1",
+                "@react-types/shared": "^3.33.1",
+                "@swc/helpers": "^0.5.0",
+                "clsx": "^2.0.0"
+            },
+            "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"
+            }
+        },
+        "node_modules/@react-aria/form": {
+            "version": "3.1.5",
+            "resolved": "http://localhost:4873/@react-aria/form/-/form-3.1.5.tgz",
+            "integrity": "sha512-BWlONgHn8hmaMkcS6AgMSLQeNqVBwqPNLhdqjDO/PCfzvV7O8NZw/dFeIzJwfG4aBfSpbHHRdXGdfrk3d8dylQ==",
+            "license": "Apache-2.0",
+            "dependencies": {
+                "@react-aria/interactions": "^3.27.1",
+                "@react-aria/utils": "^3.33.1",
+                "@react-stately/form": "^3.2.4",
+                "@react-types/shared": "^3.33.1",
+                "@swc/helpers": "^0.5.0"
+            },
+            "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"
+            }
+        },
+        "node_modules/@react-aria/grid": {
+            "version": "3.14.8",
+            "resolved": "http://localhost:4873/@react-aria/grid/-/grid-3.14.8.tgz",
+            "integrity": "sha512-X6rRFKDu/Kh6Sv8FBap3vjcb+z4jXkSOwkYnexIJp5kMTo5/Dqo55cCBio5B70Tanfv32Ev/6SpzYG7ryxnM9w==",
+            "license": "Apache-2.0",
+            "dependencies": {
+                "@react-aria/focus": "^3.21.5",
+                "@react-aria/i18n": "^3.12.16",
+                "@react-aria/interactions": "^3.27.1",
+                "@react-aria/live-announcer": "^3.4.4",
+                "@react-aria/selection": "^3.27.2",
+                "@react-aria/utils": "^3.33.1",
+                "@react-stately/collections": "^3.12.10",
+                "@react-stately/grid": "^3.11.9",
+                "@react-stately/selection": "^3.20.9",
+                "@react-types/checkbox": "^3.10.4",
+                "@react-types/grid": "^3.3.8",
+                "@react-types/shared": "^3.33.1",
+                "@swc/helpers": "^0.5.0"
+            },
+            "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"
+            }
+        },
+        "node_modules/@react-aria/gridlist": {
+            "version": "3.14.4",
+            "resolved": "http://localhost:4873/@react-aria/gridlist/-/gridlist-3.14.4.tgz",
+            "integrity": "sha512-C/SbwC0qagZatoBrCjx8iZUex9apaJ8o8iRJ9eVHz0cpj7mXg6HuuotYGmDy9q67A2hve4I693RM1Cuwqwm+PQ==",
+            "license": "Apache-2.0",
+            "dependencies": {
+                "@react-aria/focus": "^3.21.5",
+                "@react-aria/grid": "^3.14.8",
+                "@react-aria/i18n": "^3.12.16",
+                "@react-aria/interactions": "^3.27.1",
+                "@react-aria/selection": "^3.27.2",
+                "@react-aria/utils": "^3.33.1",
+                "@react-stately/list": "^3.13.4",
+                "@react-stately/tree": "^3.9.6",
+                "@react-types/shared": "^3.33.1",
+                "@swc/helpers": "^0.5.0"
+            },
+            "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"
+            }
+        },
+        "node_modules/@react-aria/i18n": {
+            "version": "3.12.16",
+            "resolved": "http://localhost:4873/@react-aria/i18n/-/i18n-3.12.16.tgz",
+            "integrity": "sha512-Km2CAz6MFQOUEaattaW+2jBdWOHUF8WX7VQoNbjlqElCP58nSaqi9yxTWUDRhAcn8/xFUnkFh4MFweNgtrHuEA==",
+            "license": "Apache-2.0",
+            "dependencies": {
+                "@internationalized/date": "^3.12.0",
+                "@internationalized/message": "^3.1.8",
+                "@internationalized/number": "^3.6.5",
+                "@internationalized/string": "^3.2.7",
+                "@react-aria/ssr": "^3.9.10",
+                "@react-aria/utils": "^3.33.1",
+                "@react-types/shared": "^3.33.1",
+                "@swc/helpers": "^0.5.0"
+            },
+            "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"
+            }
+        },
+        "node_modules/@react-aria/interactions": {
+            "version": "3.27.1",
+            "resolved": "http://localhost:4873/@react-aria/interactions/-/interactions-3.27.1.tgz",
+            "integrity": "sha512-M3wLpTTmDflI0QGNK0PJNUaBXXfeBXue8ZxLMngfc1piHNiH4G5lUvWd9W14XVbqrSCVY8i8DfGrNYpyyZu0tw==",
+            "license": "Apache-2.0",
+            "dependencies": {
+                "@react-aria/ssr": "^3.9.10",
+                "@react-aria/utils": "^3.33.1",
+                "@react-stately/flags": "^3.1.2",
+                "@react-types/shared": "^3.33.1",
+                "@swc/helpers": "^0.5.0"
+            },
+            "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"
+            }
+        },
+        "node_modules/@react-aria/label": {
+            "version": "3.7.25",
+            "resolved": "http://localhost:4873/@react-aria/label/-/label-3.7.25.tgz",
+            "integrity": "sha512-oNK3Pqj4LDPwEbQaoM/uCip4QvQmmwGOh08VeW+vzSi6TAwf+KoWTyH/tiAeB0CHWNDK0k3e1iTygTAt4wzBmg==",
+            "license": "Apache-2.0",
+            "dependencies": {
+                "@react-aria/utils": "^3.33.1",
+                "@react-types/shared": "^3.33.1",
+                "@swc/helpers": "^0.5.0"
+            },
+            "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"
+            }
+        },
+        "node_modules/@react-aria/landmark": {
+            "version": "3.0.10",
+            "resolved": "http://localhost:4873/@react-aria/landmark/-/landmark-3.0.10.tgz",
+            "integrity": "sha512-GpNjJaI8/a6WxYDZgzTCLYSzPM6xp2pxCIQ4udiGbTCtxx13Trmm0cPABvPtzELidgolCf05em9Phr+3G0eE8A==",
+            "license": "Apache-2.0",
+            "dependencies": {
+                "@react-aria/utils": "^3.33.1",
+                "@react-types/shared": "^3.33.1",
+                "@swc/helpers": "^0.5.0",
+                "use-sync-external-store": "^1.6.0"
+            },
+            "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"
+            }
+        },
+        "node_modules/@react-aria/link": {
+            "version": "3.8.9",
+            "resolved": "http://localhost:4873/@react-aria/link/-/link-3.8.9.tgz",
+            "integrity": "sha512-UaAFBfs84/Qq6TxlMWkREqqNY6SFLukot+z2Aa1kC+VyStv1kWG6sE5QLjm4SBn1Q3CGRsefhB/5+taaIbB4Pw==",
+            "license": "Apache-2.0",
+            "dependencies": {
+                "@react-aria/interactions": "^3.27.1",
+                "@react-aria/utils": "^3.33.1",
+                "@react-types/link": "^3.6.7",
+                "@react-types/shared": "^3.33.1",
+                "@swc/helpers": "^0.5.0"
+            },
+            "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"
+            }
+        },
+        "node_modules/@react-aria/listbox": {
+            "version": "3.15.3",
+            "resolved": "http://localhost:4873/@react-aria/listbox/-/listbox-3.15.3.tgz",
+            "integrity": "sha512-C6YgiyrHS5sbS5UBdxGMhEs+EKJYotJgGVtl9l0ySXpBUXERiHJWLOyV7a8PwkUOmepbB4FaLD7Y9EUzGkrGlw==",
+            "license": "Apache-2.0",
+            "dependencies": {
+                "@react-aria/interactions": "^3.27.1",
+                "@react-aria/label": "^3.7.25",
+                "@react-aria/selection": "^3.27.2",
+                "@react-aria/utils": "^3.33.1",
+                "@react-stately/collections": "^3.12.10",
+                "@react-stately/list": "^3.13.4",
+                "@react-types/listbox": "^3.7.6",
+                "@react-types/shared": "^3.33.1",
+                "@swc/helpers": "^0.5.0"
+            },
+            "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"
+            }
+        },
+        "node_modules/@react-aria/live-announcer": {
+            "version": "3.4.4",
+            "resolved": "http://localhost:4873/@react-aria/live-announcer/-/live-announcer-3.4.4.tgz",
+            "integrity": "sha512-PTTBIjNRnrdJOIRTDGNifY2d//kA7GUAwRFJNOEwSNG4FW+Bq9awqLiflw0JkpyB0VNIwou6lqKPHZVLsGWOXA==",
+            "license": "Apache-2.0",
+            "dependencies": {
+                "@swc/helpers": "^0.5.0"
+            }
+        },
+        "node_modules/@react-aria/menu": {
+            "version": "3.21.0",
+            "resolved": "http://localhost:4873/@react-aria/menu/-/menu-3.21.0.tgz",
+            "integrity": "sha512-CKTVZ4izSE1eKIti6TbTtzJAUo+WT8O4JC0XZCYDBpa0f++lD19Kz9aY+iY1buv5xGI20gAfpO474E9oEd4aQA==",
+            "license": "Apache-2.0",
+            "dependencies": {
+                "@react-aria/focus": "^3.21.5",
+                "@react-aria/i18n": "^3.12.16",
+                "@react-aria/interactions": "^3.27.1",
+                "@react-aria/overlays": "^3.31.2",
+                "@react-aria/selection": "^3.27.2",
+                "@react-aria/utils": "^3.33.1",
+                "@react-stately/collections": "^3.12.10",
+                "@react-stately/menu": "^3.9.11",
+                "@react-stately/selection": "^3.20.9",
+                "@react-stately/tree": "^3.9.6",
+                "@react-types/button": "^3.15.1",
+                "@react-types/menu": "^3.10.7",
+                "@react-types/shared": "^3.33.1",
+                "@swc/helpers": "^0.5.0"
+            },
+            "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"
+            }
+        },
+        "node_modules/@react-aria/meter": {
+            "version": "3.4.30",
+            "resolved": "http://localhost:4873/@react-aria/meter/-/meter-3.4.30.tgz",
+            "integrity": "sha512-ZmANKW7s/Z4QGylHi46nhwtQ47T1bfMsU9MysBu7ViXXNJ03F4b6JXCJlKL5o2goQ3NbfZ68GeWamIT0BWSgtw==",
+            "license": "Apache-2.0",
+            "dependencies": {
+                "@react-aria/progress": "^3.4.30",
+                "@react-types/meter": "^3.4.15",
+                "@react-types/shared": "^3.33.1",
+                "@swc/helpers": "^0.5.0"
+            },
+            "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"
+            }
+        },
+        "node_modules/@react-aria/numberfield": {
+            "version": "3.12.5",
+            "resolved": "http://localhost:4873/@react-aria/numberfield/-/numberfield-3.12.5.tgz",
+            "integrity": "sha512-Fi41IUWXEHLFIeJ/LHuZ9Azs8J/P563fZi37GSBkIq5P1pNt1rPgJJng5CNn4KsHxwqadTRUlbbZwbZraWDtRg==",
+            "license": "Apache-2.0",
+            "dependencies": {
+                "@react-aria/i18n": "^3.12.16",
+                "@react-aria/interactions": "^3.27.1",
+                "@react-aria/live-announcer": "^3.4.4",
+                "@react-aria/spinbutton": "^3.7.2",
+                "@react-aria/textfield": "^3.18.5",
+                "@react-aria/utils": "^3.33.1",
+                "@react-stately/form": "^3.2.4",
+                "@react-stately/numberfield": "^3.11.0",
+                "@react-types/button": "^3.15.1",
+                "@react-types/numberfield": "^3.8.18",
+                "@react-types/shared": "^3.33.1",
+                "@swc/helpers": "^0.5.0"
+            },
+            "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"
+            }
+        },
+        "node_modules/@react-aria/overlays": {
+            "version": "3.31.2",
+            "resolved": "http://localhost:4873/@react-aria/overlays/-/overlays-3.31.2.tgz",
+            "integrity": "sha512-78HYI08r6LvcfD34gyv19ArRIjy1qxOKuXl/jYnjLDyQzD4pVb634IQWcm0zt10RdKgyuH6HTqvuDOgZTLet7Q==",
+            "license": "Apache-2.0",
+            "dependencies": {
+                "@react-aria/focus": "^3.21.5",
+                "@react-aria/i18n": "^3.12.16",
+                "@react-aria/interactions": "^3.27.1",
+                "@react-aria/ssr": "^3.9.10",
+                "@react-aria/utils": "^3.33.1",
+                "@react-aria/visually-hidden": "^3.8.31",
+                "@react-stately/flags": "^3.1.2",
+                "@react-stately/overlays": "^3.6.23",
+                "@react-types/button": "^3.15.1",
+                "@react-types/overlays": "^3.9.4",
+                "@react-types/shared": "^3.33.1",
+                "@swc/helpers": "^0.5.0"
+            },
+            "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"
+            }
+        },
+        "node_modules/@react-aria/progress": {
+            "version": "3.4.30",
+            "resolved": "http://localhost:4873/@react-aria/progress/-/progress-3.4.30.tgz",
+            "integrity": "sha512-S6OWVGgluSWYSd/A6O8CVjz83eeMUfkuWSra0ewAV9bmxZ7TP9pUmD3bGdqHZEl97nt5vHGjZ3eq/x8eCmzKhA==",
+            "license": "Apache-2.0",
+            "dependencies": {
+                "@react-aria/i18n": "^3.12.16",
+                "@react-aria/label": "^3.7.25",
+                "@react-aria/utils": "^3.33.1",
+                "@react-types/progress": "^3.5.18",
+                "@react-types/shared": "^3.33.1",
+                "@swc/helpers": "^0.5.0"
+            },
+            "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"
+            }
+        },
+        "node_modules/@react-aria/radio": {
+            "version": "3.12.5",
+            "resolved": "http://localhost:4873/@react-aria/radio/-/radio-3.12.5.tgz",
+            "integrity": "sha512-8CCJKJzfozEiWBPO9QAATG1rBGJEJ+xoqvHf9LKU2sPFGsA2/SRnLs6LB9fCG5R3spvaK1xz0any1fjWPl7x8A==",
+            "license": "Apache-2.0",
+            "dependencies": {
+                "@react-aria/focus": "^3.21.5",
+                "@react-aria/form": "^3.1.5",
+                "@react-aria/i18n": "^3.12.16",
+                "@react-aria/interactions": "^3.27.1",
+                "@react-aria/label": "^3.7.25",
+                "@react-aria/utils": "^3.33.1",
+                "@react-stately/radio": "^3.11.5",
+                "@react-types/radio": "^3.9.4",
+                "@react-types/shared": "^3.33.1",
+                "@swc/helpers": "^0.5.0"
+            },
+            "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"
+            }
+        },
+        "node_modules/@react-aria/searchfield": {
+            "version": "3.8.12",
+            "resolved": "http://localhost:4873/@react-aria/searchfield/-/searchfield-3.8.12.tgz",
+            "integrity": "sha512-kYlUHD/+mWzNroHoR8ojUxYBoMviRZn134WaKPFjfNUGZDOEuh4XzOoj+cjdJfe6N3mwTaYu6rJQtunSHIAfhA==",
+            "license": "Apache-2.0",
+            "dependencies": {
+                "@react-aria/i18n": "^3.12.16",
+                "@react-aria/textfield": "^3.18.5",
+                "@react-aria/utils": "^3.33.1",
+                "@react-stately/searchfield": "^3.5.19",
+                "@react-types/button": "^3.15.1",
+                "@react-types/searchfield": "^3.6.8",
+                "@react-types/shared": "^3.33.1",
+                "@swc/helpers": "^0.5.0"
+            },
+            "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"
+            }
+        },
+        "node_modules/@react-aria/select": {
+            "version": "3.17.3",
+            "resolved": "http://localhost:4873/@react-aria/select/-/select-3.17.3.tgz",
+            "integrity": "sha512-u0UFWw0S7q9oiSbjetDpRoLLIcC+L89uYlm+YfCrdT8ntbQgABNiJRxdVvxnhR0fR6MC9ASTTvuQnNHNn52+1A==",
+            "license": "Apache-2.0",
+            "dependencies": {
+                "@react-aria/form": "^3.1.5",
+                "@react-aria/i18n": "^3.12.16",
+                "@react-aria/interactions": "^3.27.1",
+                "@react-aria/label": "^3.7.25",
+                "@react-aria/listbox": "^3.15.3",
+                "@react-aria/menu": "^3.21.0",
+                "@react-aria/selection": "^3.27.2",
+                "@react-aria/utils": "^3.33.1",
+                "@react-aria/visually-hidden": "^3.8.31",
+                "@react-stately/select": "^3.9.2",
+                "@react-types/button": "^3.15.1",
+                "@react-types/select": "^3.12.2",
+                "@react-types/shared": "^3.33.1",
+                "@swc/helpers": "^0.5.0"
+            },
+            "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"
+            }
+        },
+        "node_modules/@react-aria/selection": {
+            "version": "3.27.2",
+            "resolved": "http://localhost:4873/@react-aria/selection/-/selection-3.27.2.tgz",
+            "integrity": "sha512-GbUSSLX/ciXix95KW1g+SLM9np7iXpIZrFDSXkC6oNx1uhy18eAcuTkeZE25+SY5USVUmEzjI3m/3JoSUcebbg==",
+            "license": "Apache-2.0",
+            "dependencies": {
+                "@react-aria/focus": "^3.21.5",
+                "@react-aria/i18n": "^3.12.16",
+                "@react-aria/interactions": "^3.27.1",
+                "@react-aria/utils": "^3.33.1",
+                "@react-stately/selection": "^3.20.9",
+                "@react-types/shared": "^3.33.1",
+                "@swc/helpers": "^0.5.0"
+            },
+            "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"
+            }
+        },
+        "node_modules/@react-aria/separator": {
+            "version": "3.4.16",
+            "resolved": "http://localhost:4873/@react-aria/separator/-/separator-3.4.16.tgz",
+            "integrity": "sha512-RCUtQhDGnPxKzyG8KM79yOB0fSiEf8r/rxShidOVnGLiBW2KFmBa22/Gfc4jnqg/keN3dxvkSGoqmeXgctyp6g==",
+            "license": "Apache-2.0",
+            "dependencies": {
+                "@react-aria/utils": "^3.33.1",
+                "@react-types/shared": "^3.33.1",
+                "@swc/helpers": "^0.5.0"
+            },
+            "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"
+            }
+        },
+        "node_modules/@react-aria/slider": {
+            "version": "3.8.5",
+            "resolved": "http://localhost:4873/@react-aria/slider/-/slider-3.8.5.tgz",
+            "integrity": "sha512-gqkJxznk141mE0JamXF5CXml9PDbPkBz8dyKlihtWHWX4yhEbVYdC9J0otE7iCR3zx69Bm7WHoTGL0BsdpKzVA==",
+            "license": "Apache-2.0",
+            "dependencies": {
+                "@react-aria/i18n": "^3.12.16",
+                "@react-aria/interactions": "^3.27.1",
+                "@react-aria/label": "^3.7.25",
+                "@react-aria/utils": "^3.33.1",
+                "@react-stately/slider": "^3.7.5",
+                "@react-types/shared": "^3.33.1",
+                "@react-types/slider": "^3.8.4",
+                "@swc/helpers": "^0.5.0"
+            },
+            "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"
+            }
+        },
+        "node_modules/@react-aria/spinbutton": {
+            "version": "3.7.2",
+            "resolved": "http://localhost:4873/@react-aria/spinbutton/-/spinbutton-3.7.2.tgz",
+            "integrity": "sha512-adjE1wNCWlugvAtVXlXWPtIG9JWurEgYVn1Eeyh19x038+oXGvOsOAoKCXM+SnGleTWQ9J7pEZITFoEI3cVfAw==",
+            "license": "Apache-2.0",
+            "dependencies": {
+                "@react-aria/i18n": "^3.12.16",
+                "@react-aria/live-announcer": "^3.4.4",
+                "@react-aria/utils": "^3.33.1",
+                "@react-types/button": "^3.15.1",
+                "@react-types/shared": "^3.33.1",
+                "@swc/helpers": "^0.5.0"
+            },
+            "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"
+            }
+        },
+        "node_modules/@react-aria/ssr": {
+            "version": "3.9.10",
+            "resolved": "http://localhost:4873/@react-aria/ssr/-/ssr-3.9.10.tgz",
+            "integrity": "sha512-hvTm77Pf+pMBhuBm760Li0BVIO38jv1IBws1xFm1NoL26PU+fe+FMW5+VZWyANR6nYL65joaJKZqOdTQMkO9IQ==",
+            "license": "Apache-2.0",
+            "dependencies": {
+                "@swc/helpers": "^0.5.0"
+            },
+            "engines": {
+                "node": ">= 12"
+            },
+            "peerDependencies": {
+                "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1"
+            }
+        },
+        "node_modules/@react-aria/switch": {
+            "version": "3.7.11",
+            "resolved": "http://localhost:4873/@react-aria/switch/-/switch-3.7.11.tgz",
+            "integrity": "sha512-dYVX71HiepBsKyeMaQgHbhqI+MQ3MVoTd5EnTbUjefIBnmQZavYj1/e4NUiUI4Ix+/C0HxL8ibDAv4NlSW3eLQ==",
+            "license": "Apache-2.0",
+            "dependencies": {
+                "@react-aria/toggle": "^3.12.5",
+                "@react-stately/toggle": "^3.9.5",
+                "@react-types/shared": "^3.33.1",
+                "@react-types/switch": "^3.5.17",
+                "@swc/helpers": "^0.5.0"
+            },
+            "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"
+            }
+        },
+        "node_modules/@react-aria/table": {
+            "version": "3.17.11",
+            "resolved": "http://localhost:4873/@react-aria/table/-/table-3.17.11.tgz",
+            "integrity": "sha512-GkYmWPiW3OM+FUZxdS33teHXHXde7TjHuYgDDaG9phvg6cQTQjGilJozrzA3OfftTOq5VB8XcKTIQW3c0tpYsQ==",
+            "license": "Apache-2.0",
+            "dependencies": {
+                "@react-aria/focus": "^3.21.5",
+                "@react-aria/grid": "^3.14.8",
+                "@react-aria/i18n": "^3.12.16",
+                "@react-aria/interactions": "^3.27.1",
+                "@react-aria/live-announcer": "^3.4.4",
+                "@react-aria/utils": "^3.33.1",
+                "@react-aria/visually-hidden": "^3.8.31",
+                "@react-stately/collections": "^3.12.10",
+                "@react-stately/flags": "^3.1.2",
+                "@react-stately/table": "^3.15.4",
+                "@react-types/checkbox": "^3.10.4",
+                "@react-types/grid": "^3.3.8",
+                "@react-types/shared": "^3.33.1",
+                "@react-types/table": "^3.13.6",
+                "@swc/helpers": "^0.5.0"
+            },
+            "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"
+            }
+        },
+        "node_modules/@react-aria/tabs": {
+            "version": "3.11.1",
+            "resolved": "http://localhost:4873/@react-aria/tabs/-/tabs-3.11.1.tgz",
+            "integrity": "sha512-3Ppz7yaEDW9L7p9PE9yNOl5caLwNnnLQqI+MX/dwbWlw9HluHS7uIjb21oswNl6UbSxAWyENOka45+KN4Fkh7A==",
+            "license": "Apache-2.0",
+            "dependencies": {
+                "@react-aria/focus": "^3.21.5",
+                "@react-aria/i18n": "^3.12.16",
+                "@react-aria/selection": "^3.27.2",
+                "@react-aria/utils": "^3.33.1",
+                "@react-stately/tabs": "^3.8.9",
+                "@react-types/shared": "^3.33.1",
+                "@react-types/tabs": "^3.3.22",
+                "@swc/helpers": "^0.5.0"
+            },
+            "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"
+            }
+        },
+        "node_modules/@react-aria/tag": {
+            "version": "3.8.1",
+            "resolved": "http://localhost:4873/@react-aria/tag/-/tag-3.8.1.tgz",
+            "integrity": "sha512-VonpO++F8afXGDWc9VUxAc2wefyJpp1n9OGpbnB7zmqWiuPwO/RixjUdcH7iJkiC4vADwx9uLnhyD6kcwGV2ig==",
+            "license": "Apache-2.0",
+            "dependencies": {
+                "@react-aria/gridlist": "^3.14.4",
+                "@react-aria/i18n": "^3.12.16",
+                "@react-aria/interactions": "^3.27.1",
+                "@react-aria/label": "^3.7.25",
+                "@react-aria/selection": "^3.27.2",
+                "@react-aria/utils": "^3.33.1",
+                "@react-stately/list": "^3.13.4",
+                "@react-types/button": "^3.15.1",
+                "@react-types/shared": "^3.33.1",
+                "@swc/helpers": "^0.5.0"
+            },
+            "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"
+            }
+        },
+        "node_modules/@react-aria/textfield": {
+            "version": "3.18.5",
+            "resolved": "http://localhost:4873/@react-aria/textfield/-/textfield-3.18.5.tgz",
+            "integrity": "sha512-ttwVSuwoV3RPaG2k2QzEXKeQNQ3mbdl/2yy6I4Tjrn1ZNkYHfVyJJ26AjenfSmj1kkTQoSAfZ8p+7rZp4n0xoQ==",
+            "license": "Apache-2.0",
+            "dependencies": {
+                "@react-aria/form": "^3.1.5",
+                "@react-aria/interactions": "^3.27.1",
+                "@react-aria/label": "^3.7.25",
+                "@react-aria/utils": "^3.33.1",
+                "@react-stately/form": "^3.2.4",
+                "@react-stately/utils": "^3.11.0",
+                "@react-types/shared": "^3.33.1",
+                "@react-types/textfield": "^3.12.8",
+                "@swc/helpers": "^0.5.0"
+            },
+            "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"
+            }
+        },
+        "node_modules/@react-aria/toast": {
+            "version": "3.0.11",
+            "resolved": "http://localhost:4873/@react-aria/toast/-/toast-3.0.11.tgz",
+            "integrity": "sha512-2DjZjBAvm8/CWbnZ6s7LjkYCkULKtjMve6GvhPTq98AthuEDLEiBvM1wa3xdecCRhZyRT1g6DXqVca0EfZ9fJA==",
+            "license": "Apache-2.0",
+            "dependencies": {
+                "@react-aria/i18n": "^3.12.16",
+                "@react-aria/interactions": "^3.27.1",
+                "@react-aria/landmark": "^3.0.10",
+                "@react-aria/utils": "^3.33.1",
+                "@react-stately/toast": "^3.1.3",
+                "@react-types/button": "^3.15.1",
+                "@react-types/shared": "^3.33.1",
+                "@swc/helpers": "^0.5.0"
+            },
+            "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"
+            }
+        },
+        "node_modules/@react-aria/toggle": {
+            "version": "3.12.5",
+            "resolved": "http://localhost:4873/@react-aria/toggle/-/toggle-3.12.5.tgz",
+            "integrity": "sha512-XXVFLzcV8fr9mz7y/wfxEAhWvaBZ9jSfhCMuxH2bsivO7nTcMJ1jb4g2xJNwZgne17bMWNc7mKvW5dbsdlI6BA==",
+            "license": "Apache-2.0",
+            "dependencies": {
+                "@react-aria/interactions": "^3.27.1",
+                "@react-aria/utils": "^3.33.1",
+                "@react-stately/toggle": "^3.9.5",
+                "@react-types/checkbox": "^3.10.4",
+                "@react-types/shared": "^3.33.1",
+                "@swc/helpers": "^0.5.0"
+            },
+            "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"
+            }
+        },
+        "node_modules/@react-aria/toolbar": {
+            "version": "3.0.0-beta.24",
+            "resolved": "http://localhost:4873/@react-aria/toolbar/-/toolbar-3.0.0-beta.24.tgz",
+            "integrity": "sha512-B2Rmpko7Ghi2RbNfsGdbR7I+RQBDhPGVE4bU3/EwHz+P/vNe5LyGPTeSwqaOMsQTF9lKNCkY8424dVTCr6RUMg==",
+            "license": "Apache-2.0",
+            "dependencies": {
+                "@react-aria/focus": "^3.21.5",
+                "@react-aria/i18n": "^3.12.16",
+                "@react-aria/utils": "^3.33.1",
+                "@react-types/shared": "^3.33.1",
+                "@swc/helpers": "^0.5.0"
+            },
+            "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"
+            }
+        },
+        "node_modules/@react-aria/tooltip": {
+            "version": "3.9.2",
+            "resolved": "http://localhost:4873/@react-aria/tooltip/-/tooltip-3.9.2.tgz",
+            "integrity": "sha512-VrgkPwHiEnAnBhoQ4W7kfry/RfVuRWrUPaJSp0+wKM6u0gg2tmn7OFRDXTxBAm/omQUguIdIjRWg7sf3zHH82A==",
+            "license": "Apache-2.0",
+            "dependencies": {
+                "@react-aria/interactions": "^3.27.1",
+                "@react-aria/utils": "^3.33.1",
+                "@react-stately/tooltip": "^3.5.11",
+                "@react-types/shared": "^3.33.1",
+                "@react-types/tooltip": "^3.5.2",
+                "@swc/helpers": "^0.5.0"
+            },
+            "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"
+            }
+        },
+        "node_modules/@react-aria/tree": {
+            "version": "3.1.7",
+            "resolved": "http://localhost:4873/@react-aria/tree/-/tree-3.1.7.tgz",
+            "integrity": "sha512-C54yH5NmsOFa2Q+cg6B1BPr5KUlU9vLIoBnVrgrH237FRSXQPIbcM4VpmITAHq1VR7w6ayyS1hgTwFxo67ykWQ==",
+            "license": "Apache-2.0",
+            "dependencies": {
+                "@react-aria/gridlist": "^3.14.4",
+                "@react-aria/i18n": "^3.12.16",
+                "@react-aria/selection": "^3.27.2",
+                "@react-aria/utils": "^3.33.1",
+                "@react-stately/tree": "^3.9.6",
+                "@react-types/button": "^3.15.1",
+                "@react-types/shared": "^3.33.1",
+                "@swc/helpers": "^0.5.0"
+            },
+            "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"
+            }
+        },
+        "node_modules/@react-aria/utils": {
+            "version": "3.33.1",
+            "resolved": "http://localhost:4873/@react-aria/utils/-/utils-3.33.1.tgz",
+            "integrity": "sha512-kIx1Sj6bbAT0pdqCegHuPanR9zrLn5zMRiM7LN12rgRf55S19ptd9g3ncahArifYTRkfEU9VIn+q0HjfMqS9/w==",
+            "license": "Apache-2.0",
+            "dependencies": {
+                "@react-aria/ssr": "^3.9.10",
+                "@react-stately/flags": "^3.1.2",
+                "@react-stately/utils": "^3.11.0",
+                "@react-types/shared": "^3.33.1",
+                "@swc/helpers": "^0.5.0",
+                "clsx": "^2.0.0"
+            },
+            "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"
+            }
+        },
+        "node_modules/@react-aria/virtualizer": {
+            "version": "4.1.13",
+            "resolved": "http://localhost:4873/@react-aria/virtualizer/-/virtualizer-4.1.13.tgz",
+            "integrity": "sha512-d5KS+p8GXGNRbGPRE/N6jtth3et3KssQIz52h2+CAoAh7C3vvR64kkTaGdeywClvM+fSo8FxJuBrdfQvqC2ktQ==",
+            "license": "Apache-2.0",
+            "dependencies": {
+                "@react-aria/i18n": "^3.12.16",
+                "@react-aria/interactions": "^3.27.1",
+                "@react-aria/utils": "^3.33.1",
+                "@react-stately/virtualizer": "^4.4.6",
+                "@react-types/shared": "^3.33.1",
+                "@swc/helpers": "^0.5.0"
+            },
+            "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"
+            }
+        },
+        "node_modules/@react-aria/visually-hidden": {
+            "version": "3.8.31",
+            "resolved": "http://localhost:4873/@react-aria/visually-hidden/-/visually-hidden-3.8.31.tgz",
+            "integrity": "sha512-RTOHHa4n56a9A3criThqFHBifvZoV71+MCkSuNP2cKO662SUWjqKkd0tJt/mBRMEJPkys8K7Eirp6T8Wt5FFRA==",
+            "license": "Apache-2.0",
+            "dependencies": {
+                "@react-aria/interactions": "^3.27.1",
+                "@react-aria/utils": "^3.33.1",
+                "@react-types/shared": "^3.33.1",
+                "@swc/helpers": "^0.5.0"
+            },
+            "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"
+            }
+        },
+        "node_modules/@react-stately/autocomplete": {
+            "version": "3.0.0-beta.4",
+            "resolved": "http://localhost:4873/@react-stately/autocomplete/-/autocomplete-3.0.0-beta.4.tgz",
+            "integrity": "sha512-K2Uy7XEdseFvgwRQ8CyrYEHMupjVKEszddOapP8deNz4hntYvT1aRm0m+sKa5Kl/4kvg9c/3NZpQcrky/vRZIg==",
+            "license": "Apache-2.0",
+            "dependencies": {
+                "@react-stately/utils": "^3.11.0",
+                "@swc/helpers": "^0.5.0"
+            },
+            "peerDependencies": {
+                "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1"
+            }
+        },
+        "node_modules/@react-stately/calendar": {
+            "version": "3.9.3",
+            "resolved": "http://localhost:4873/@react-stately/calendar/-/calendar-3.9.3.tgz",
+            "integrity": "sha512-uw7fCZXoypSBBUsVkbNvJMQWTihZReRbyLIGG3o/ZM630N3OCZhb/h4Uxke4pNu7n527H0V1bAnZgAldIzOYqg==",
+            "license": "Apache-2.0",
+            "dependencies": {
+                "@internationalized/date": "^3.12.0",
+                "@react-stately/utils": "^3.11.0",
+                "@react-types/calendar": "^3.8.3",
+                "@react-types/shared": "^3.33.1",
+                "@swc/helpers": "^0.5.0"
+            },
+            "peerDependencies": {
+                "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1"
+            }
+        },
+        "node_modules/@react-stately/checkbox": {
+            "version": "3.7.5",
+            "resolved": "http://localhost:4873/@react-stately/checkbox/-/checkbox-3.7.5.tgz",
+            "integrity": "sha512-K5R5ted7AxLB3sDkuVAazUdyRMraFT1imVqij2GuAiOUFvsZvbuocnDuFkBVKojyV3GpqLBvViV8IaCMc4hNIw==",
+            "license": "Apache-2.0",
+            "dependencies": {
+                "@react-stately/form": "^3.2.4",
+                "@react-stately/utils": "^3.11.0",
+                "@react-types/checkbox": "^3.10.4",
+                "@react-types/shared": "^3.33.1",
+                "@swc/helpers": "^0.5.0"
+            },
+            "peerDependencies": {
+                "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1"
+            }
+        },
+        "node_modules/@react-stately/collections": {
+            "version": "3.12.10",
+            "resolved": "http://localhost:4873/@react-stately/collections/-/collections-3.12.10.tgz",
+            "integrity": "sha512-wmF9VxJDyBujBuQ76vXj2g/+bnnj8fx5DdXgRmyfkkYhPB46+g2qnjbVGEvipo7bJuGxDftCUC4SN7l7xqUWfg==",
+            "license": "Apache-2.0",
+            "dependencies": {
+                "@react-types/shared": "^3.33.1",
+                "@swc/helpers": "^0.5.0"
+            },
+            "peerDependencies": {
+                "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1"
+            }
+        },
+        "node_modules/@react-stately/color": {
+            "version": "3.9.5",
+            "resolved": "http://localhost:4873/@react-stately/color/-/color-3.9.5.tgz",
+            "integrity": "sha512-8pZxzXWDRuglzDwyTG7mLw2LQMCHIVNbVc9YmbsxbOjAL+lOqszo60KzyaFKVxeDQczSvrNTHcQZqlbNIC0eyQ==",
+            "license": "Apache-2.0",
+            "dependencies": {
+                "@internationalized/number": "^3.6.5",
+                "@internationalized/string": "^3.2.7",
+                "@react-stately/form": "^3.2.4",
+                "@react-stately/numberfield": "^3.11.0",
+                "@react-stately/slider": "^3.7.5",
+                "@react-stately/utils": "^3.11.0",
+                "@react-types/color": "^3.1.4",
+                "@react-types/shared": "^3.33.1",
+                "@swc/helpers": "^0.5.0"
+            },
+            "peerDependencies": {
+                "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1"
+            }
+        },
+        "node_modules/@react-stately/combobox": {
+            "version": "3.13.0",
+            "resolved": "http://localhost:4873/@react-stately/combobox/-/combobox-3.13.0.tgz",
+            "integrity": "sha512-dX9g/cK1hjLRjcbWVF6keHxTQDGhKGB2QAgPhWcBmOK3qJv+2dQqsJ6YCGWn/Y2N2acoEseLrAA7+Qe4HWV9cg==",
+            "license": "Apache-2.0",
+            "dependencies": {
+                "@react-stately/collections": "^3.12.10",
+                "@react-stately/form": "^3.2.4",
+                "@react-stately/list": "^3.13.4",
+                "@react-stately/overlays": "^3.6.23",
+                "@react-stately/utils": "^3.11.0",
+                "@react-types/combobox": "^3.14.0",
+                "@react-types/shared": "^3.33.1",
+                "@swc/helpers": "^0.5.0"
+            },
+            "peerDependencies": {
+                "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1"
+            }
+        },
+        "node_modules/@react-stately/data": {
+            "version": "3.15.2",
+            "resolved": "http://localhost:4873/@react-stately/data/-/data-3.15.2.tgz",
+            "integrity": "sha512-BsmeeGgFwOGwo0g9Waprdyt+846n3KhKggZfpEnp5+sC4dE4uW1VIYpdyupMfr3bQcmX123q6TegfNP3eszrUA==",
+            "license": "Apache-2.0",
+            "dependencies": {
+                "@react-types/shared": "^3.33.1",
+                "@swc/helpers": "^0.5.0"
+            },
+            "peerDependencies": {
+                "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1"
+            }
+        },
+        "node_modules/@react-stately/datepicker": {
+            "version": "3.16.1",
+            "resolved": "http://localhost:4873/@react-stately/datepicker/-/datepicker-3.16.1.tgz",
+            "integrity": "sha512-BtAMDvxd1OZxkxjqq5tN5TYmp6Hm8+o3+IDA4qmem2/pfQfVbOZeWS2WitcPBImj4n4T+W1A5+PI7mT/6DUBVg==",
+            "license": "Apache-2.0",
+            "dependencies": {
+                "@internationalized/date": "^3.12.0",
+                "@internationalized/number": "^3.6.5",
+                "@internationalized/string": "^3.2.7",
+                "@react-stately/form": "^3.2.4",
+                "@react-stately/overlays": "^3.6.23",
+                "@react-stately/utils": "^3.11.0",
+                "@react-types/datepicker": "^3.13.5",
+                "@react-types/shared": "^3.33.1",
+                "@swc/helpers": "^0.5.0"
+            },
+            "peerDependencies": {
+                "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1"
+            }
+        },
+        "node_modules/@react-stately/disclosure": {
+            "version": "3.0.11",
+            "resolved": "http://localhost:4873/@react-stately/disclosure/-/disclosure-3.0.11.tgz",
+            "integrity": "sha512-/KjB/0HkxGWbhFAPztCP411LUKZCx9k8cKukrlGqrUWyvrcXlmza90j0g/CuxACBoV+DJP9V+4q+8ide0x750A==",
+            "license": "Apache-2.0",
+            "dependencies": {
+                "@react-stately/utils": "^3.11.0",
+                "@react-types/shared": "^3.33.1",
+                "@swc/helpers": "^0.5.0"
+            },
+            "peerDependencies": {
+                "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1"
+            }
+        },
+        "node_modules/@react-stately/dnd": {
+            "version": "3.7.4",
+            "resolved": "http://localhost:4873/@react-stately/dnd/-/dnd-3.7.4.tgz",
+            "integrity": "sha512-YD0TVR5JkvTqskc1ouBpVKs6t/QS4RYCIyu8Ug8RgO122iIizuf2pfKnRLjYMdu5lXzBXGaIgd49dvnLzEXHIw==",
+            "license": "Apache-2.0",
+            "dependencies": {
+                "@react-stately/selection": "^3.20.9",
+                "@react-types/shared": "^3.33.1",
+                "@swc/helpers": "^0.5.0"
+            },
+            "peerDependencies": {
+                "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1"
+            }
+        },
+        "node_modules/@react-stately/flags": {
+            "version": "3.1.2",
+            "resolved": "http://localhost:4873/@react-stately/flags/-/flags-3.1.2.tgz",
+            "integrity": "sha512-2HjFcZx1MyQXoPqcBGALwWWmgFVUk2TuKVIQxCbRq7fPyWXIl6VHcakCLurdtYC2Iks7zizvz0Idv48MQ38DWg==",
+            "license": "Apache-2.0",
+            "dependencies": {
+                "@swc/helpers": "^0.5.0"
+            }
+        },
+        "node_modules/@react-stately/form": {
+            "version": "3.2.4",
+            "resolved": "http://localhost:4873/@react-stately/form/-/form-3.2.4.tgz",
+            "integrity": "sha512-qNBzun8SbLdgahryhKLqL1eqP+MXY6as82sVXYOOvUYLzgU5uuN8mObxYlxJgMI5akSdQJQV3RzyfVobPRE7Kw==",
+            "license": "Apache-2.0",
+            "dependencies": {
+                "@react-types/shared": "^3.33.1",
+                "@swc/helpers": "^0.5.0"
+            },
+            "peerDependencies": {
+                "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1"
+            }
+        },
+        "node_modules/@react-stately/grid": {
+            "version": "3.11.9",
+            "resolved": "http://localhost:4873/@react-stately/grid/-/grid-3.11.9.tgz",
+            "integrity": "sha512-qQY6F+27iZRn30dt0ZOrSetUmbmNJ0pLe9Weuqw3+XDVSuWT+2O/rO1UUYeK+mO0Acjzdv+IWiYbu9RKf2wS9w==",
+            "license": "Apache-2.0",
+            "dependencies": {
+                "@react-stately/collections": "^3.12.10",
+                "@react-stately/selection": "^3.20.9",
+                "@react-types/grid": "^3.3.8",
+                "@react-types/shared": "^3.33.1",
+                "@swc/helpers": "^0.5.0"
+            },
+            "peerDependencies": {
+                "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1"
+            }
+        },
+        "node_modules/@react-stately/layout": {
+            "version": "4.6.0",
+            "resolved": "http://localhost:4873/@react-stately/layout/-/layout-4.6.0.tgz",
+            "integrity": "sha512-kBenEsP03nh5rKgfqlVMPcoKTJv0v92CTvrAb5gYY8t9g8LOwzdL89Yannq7f5xv8LFck/MmRQlotpMt2InETg==",
+            "license": "Apache-2.0",
+            "dependencies": {
+                "@react-stately/collections": "^3.12.10",
+                "@react-stately/table": "^3.15.4",
+                "@react-stately/virtualizer": "^4.4.6",
+                "@react-types/grid": "^3.3.8",
+                "@react-types/shared": "^3.33.1",
+                "@react-types/table": "^3.13.6",
+                "@swc/helpers": "^0.5.0"
+            },
+            "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"
+            }
+        },
+        "node_modules/@react-stately/list": {
+            "version": "3.13.4",
+            "resolved": "http://localhost:4873/@react-stately/list/-/list-3.13.4.tgz",
+            "integrity": "sha512-HHYSjA9VG7FPSAtpXAjQyM/V7qFHWGg88WmMrDt5QDlTBexwPuH0oFLnW0qaVZpAIxuWIsutZfxRAnme/NhhAA==",
+            "license": "Apache-2.0",
+            "dependencies": {
+                "@react-stately/collections": "^3.12.10",
+                "@react-stately/selection": "^3.20.9",
+                "@react-stately/utils": "^3.11.0",
+                "@react-types/shared": "^3.33.1",
+                "@swc/helpers": "^0.5.0"
+            },
+            "peerDependencies": {
+                "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1"
+            }
+        },
+        "node_modules/@react-stately/menu": {
+            "version": "3.9.11",
+            "resolved": "http://localhost:4873/@react-stately/menu/-/menu-3.9.11.tgz",
+            "integrity": "sha512-vYkpO9uV2OUecsIkrOc+Urdl/s1xw/ibNH/UXsp4PtjMnS6mK9q2kXZTM3WvMAKoh12iveUO+YkYCZQshmFLHQ==",
+            "license": "Apache-2.0",
+            "dependencies": {
+                "@react-stately/overlays": "^3.6.23",
+                "@react-types/menu": "^3.10.7",
+                "@react-types/shared": "^3.33.1",
+                "@swc/helpers": "^0.5.0"
+            },
+            "peerDependencies": {
+                "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1"
+            }
+        },
+        "node_modules/@react-stately/numberfield": {
+            "version": "3.11.0",
+            "resolved": "http://localhost:4873/@react-stately/numberfield/-/numberfield-3.11.0.tgz",
+            "integrity": "sha512-rxfC047vL0LP4tanjinfjKAriAvdVL57Um5RUL5nHML8IOWCB3TBxegQkJ6to6goScC/oZhd0/Y2LSaiRuKbNw==",
+            "license": "Apache-2.0",
+            "dependencies": {
+                "@internationalized/number": "^3.6.5",
+                "@react-stately/form": "^3.2.4",
+                "@react-stately/utils": "^3.11.0",
+                "@react-types/numberfield": "^3.8.18",
+                "@swc/helpers": "^0.5.0"
+            },
+            "peerDependencies": {
+                "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1"
+            }
+        },
+        "node_modules/@react-stately/overlays": {
+            "version": "3.6.23",
+            "resolved": "http://localhost:4873/@react-stately/overlays/-/overlays-3.6.23.tgz",
+            "integrity": "sha512-RzWxots9A6gAzQMP4s8hOAHV7SbJRTFSlQbb6ly1nkWQXacOSZSFNGsKOaS0eIatfNPlNnW4NIkgtGws5UYzfw==",
+            "license": "Apache-2.0",
+            "dependencies": {
+                "@react-stately/utils": "^3.11.0",
+                "@react-types/overlays": "^3.9.4",
+                "@swc/helpers": "^0.5.0"
+            },
+            "peerDependencies": {
+                "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1"
+            }
+        },
+        "node_modules/@react-stately/radio": {
+            "version": "3.11.5",
+            "resolved": "http://localhost:4873/@react-stately/radio/-/radio-3.11.5.tgz",
+            "integrity": "sha512-QxA779S4ea5icQ0ja7CeiNzY1cj7c9G9TN0m7maAIGiTSinZl2Ia8naZJ0XcbRRp+LBll7RFEdekne15TjvS/w==",
+            "license": "Apache-2.0",
+            "dependencies": {
+                "@react-stately/form": "^3.2.4",
+                "@react-stately/utils": "^3.11.0",
+                "@react-types/radio": "^3.9.4",
+                "@react-types/shared": "^3.33.1",
+                "@swc/helpers": "^0.5.0"
+            },
+            "peerDependencies": {
+                "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1"
+            }
+        },
+        "node_modules/@react-stately/searchfield": {
+            "version": "3.5.19",
+            "resolved": "http://localhost:4873/@react-stately/searchfield/-/searchfield-3.5.19.tgz",
+            "integrity": "sha512-URllgjbtTQEaOCfddbHpJSPKOzG3pE3ajQHJ7Df8qCoHTjKfL6hnm/vp7X5sxPaZaN7VLZ5kAQxTE8hpo6s0+A==",
+            "license": "Apache-2.0",
+            "dependencies": {
+                "@react-stately/utils": "^3.11.0",
+                "@react-types/searchfield": "^3.6.8",
+                "@swc/helpers": "^0.5.0"
+            },
+            "peerDependencies": {
+                "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1"
+            }
+        },
+        "node_modules/@react-stately/select": {
+            "version": "3.9.2",
+            "resolved": "http://localhost:4873/@react-stately/select/-/select-3.9.2.tgz",
+            "integrity": "sha512-oWn0bijuusp8YI7FRM/wgtPVqiIrgU/ZUfLKe/qJUmT8D+JFaMAJnyrAzKpx98TrgamgtXynF78ccpopPhgrKQ==",
+            "license": "Apache-2.0",
+            "dependencies": {
+                "@react-stately/form": "^3.2.4",
+                "@react-stately/list": "^3.13.4",
+                "@react-stately/overlays": "^3.6.23",
+                "@react-stately/utils": "^3.11.0",
+                "@react-types/select": "^3.12.2",
+                "@react-types/shared": "^3.33.1",
+                "@swc/helpers": "^0.5.0"
+            },
+            "peerDependencies": {
+                "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1"
+            }
+        },
+        "node_modules/@react-stately/selection": {
+            "version": "3.20.9",
+            "resolved": "http://localhost:4873/@react-stately/selection/-/selection-3.20.9.tgz",
+            "integrity": "sha512-RhxRR5Wovg9EVi3pq7gBPK2BoKmP59tOXDMh2r1PbnGevg/7TNdR67DCEblcmXwHuBNS46ELfKdd0XGHqmS8nQ==",
+            "license": "Apache-2.0",
+            "dependencies": {
+                "@react-stately/collections": "^3.12.10",
+                "@react-stately/utils": "^3.11.0",
+                "@react-types/shared": "^3.33.1",
+                "@swc/helpers": "^0.5.0"
+            },
+            "peerDependencies": {
+                "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1"
+            }
+        },
+        "node_modules/@react-stately/slider": {
+            "version": "3.7.5",
+            "resolved": "http://localhost:4873/@react-stately/slider/-/slider-3.7.5.tgz",
+            "integrity": "sha512-OrQMNR5xamLYH52TXtvTgyw3EMwv+JI+1istQgEj1CHBjC9eZZqn5iNCN20tzm+uDPTH0EIGULFjjPIumqYUQg==",
+            "license": "Apache-2.0",
+            "dependencies": {
+                "@react-stately/utils": "^3.11.0",
+                "@react-types/shared": "^3.33.1",
+                "@react-types/slider": "^3.8.4",
+                "@swc/helpers": "^0.5.0"
+            },
+            "peerDependencies": {
+                "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1"
+            }
+        },
+        "node_modules/@react-stately/table": {
+            "version": "3.15.4",
+            "resolved": "http://localhost:4873/@react-stately/table/-/table-3.15.4.tgz",
+            "integrity": "sha512-fGaNyw3wv7JgRCNzgyDzpaaTFuSy5f4Qekch4UheMXDJX7dOeaMhUXeOfvnXCVg+BGM4ey/D82RvDOGvPy1Nww==",
+            "license": "Apache-2.0",
+            "dependencies": {
+                "@react-stately/collections": "^3.12.10",
+                "@react-stately/flags": "^3.1.2",
+                "@react-stately/grid": "^3.11.9",
+                "@react-stately/selection": "^3.20.9",
+                "@react-stately/utils": "^3.11.0",
+                "@react-types/grid": "^3.3.8",
+                "@react-types/shared": "^3.33.1",
+                "@react-types/table": "^3.13.6",
+                "@swc/helpers": "^0.5.0"
+            },
+            "peerDependencies": {
+                "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1"
+            }
+        },
+        "node_modules/@react-stately/tabs": {
+            "version": "3.8.9",
+            "resolved": "http://localhost:4873/@react-stately/tabs/-/tabs-3.8.9.tgz",
+            "integrity": "sha512-AQ4Xrn6YzIolaVShCV9cnwOjBKPAOGP/PTp7wpSEtQbQ0HZzUDG2RG/M4baMeUB2jZ33b7ifXyPcK78o0uOftg==",
+            "license": "Apache-2.0",
+            "dependencies": {
+                "@react-stately/list": "^3.13.4",
+                "@react-types/shared": "^3.33.1",
+                "@react-types/tabs": "^3.3.22",
+                "@swc/helpers": "^0.5.0"
+            },
+            "peerDependencies": {
+                "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1"
+            }
+        },
+        "node_modules/@react-stately/toast": {
+            "version": "3.1.3",
+            "resolved": "http://localhost:4873/@react-stately/toast/-/toast-3.1.3.tgz",
+            "integrity": "sha512-mT9QJKmD523lqFpOp0VWZ6QHZENFK7HrodnNJDVc7g616s5GNmemdlkITV43fSY3tHeThCVvPu+Uzh7RvQ9mpQ==",
+            "license": "Apache-2.0",
+            "dependencies": {
+                "@swc/helpers": "^0.5.0",
+                "use-sync-external-store": "^1.6.0"
+            },
+            "peerDependencies": {
+                "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1"
+            }
+        },
+        "node_modules/@react-stately/toggle": {
+            "version": "3.9.5",
+            "resolved": "http://localhost:4873/@react-stately/toggle/-/toggle-3.9.5.tgz",
+            "integrity": "sha512-PVzXc788q3jH98Kvw1LYDL+wpVC14dCEKjOku8cSaqhEof6AJGaLR9yq+EF1yYSL2dxI6z8ghc0OozY8WrcFcA==",
+            "license": "Apache-2.0",
+            "dependencies": {
+                "@react-stately/utils": "^3.11.0",
+                "@react-types/checkbox": "^3.10.4",
+                "@react-types/shared": "^3.33.1",
+                "@swc/helpers": "^0.5.0"
+            },
+            "peerDependencies": {
+                "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1"
+            }
+        },
+        "node_modules/@react-stately/tooltip": {
+            "version": "3.5.11",
+            "resolved": "http://localhost:4873/@react-stately/tooltip/-/tooltip-3.5.11.tgz",
+            "integrity": "sha512-o8PnFXbvDCuVZ4Ht9ahfS6KHwIZjXopvoQ2vUPxv920irdgWEeC+4omgDOnJ/xFvcpmmJAmSsrQsTQrTguDUQA==",
+            "license": "Apache-2.0",
+            "dependencies": {
+                "@react-stately/overlays": "^3.6.23",
+                "@react-types/tooltip": "^3.5.2",
+                "@swc/helpers": "^0.5.0"
+            },
+            "peerDependencies": {
+                "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1"
+            }
+        },
+        "node_modules/@react-stately/tree": {
+            "version": "3.9.6",
+            "resolved": "http://localhost:4873/@react-stately/tree/-/tree-3.9.6.tgz",
+            "integrity": "sha512-JCuhGyX2A+PAMsx2pRSwArfqNFZJ9JSPkDaOQJS8MFPAsBe5HemvXsdmv9aBIMzlbCYcVq6EsrFnzbVVTBt/6w==",
+            "license": "Apache-2.0",
+            "dependencies": {
+                "@react-stately/collections": "^3.12.10",
+                "@react-stately/selection": "^3.20.9",
+                "@react-stately/utils": "^3.11.0",
+                "@react-types/shared": "^3.33.1",
+                "@swc/helpers": "^0.5.0"
+            },
+            "peerDependencies": {
+                "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1"
+            }
+        },
+        "node_modules/@react-stately/utils": {
+            "version": "3.11.0",
+            "resolved": "http://localhost:4873/@react-stately/utils/-/utils-3.11.0.tgz",
+            "integrity": "sha512-8LZpYowJ9eZmmYLpudbo/eclIRnbhWIJZ994ncmlKlouNzKohtM8qTC6B1w1pwUbiwGdUoyzLuQbeaIor5Dvcw==",
+            "license": "Apache-2.0",
+            "dependencies": {
+                "@swc/helpers": "^0.5.0"
+            },
+            "peerDependencies": {
+                "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1"
+            }
+        },
+        "node_modules/@react-stately/virtualizer": {
+            "version": "4.4.6",
+            "resolved": "http://localhost:4873/@react-stately/virtualizer/-/virtualizer-4.4.6.tgz",
+            "integrity": "sha512-9SfXgLFB61/8SXNLfg5ARx9jAK4m03Aw6/Cg8mdZN24SYarL4TKNRpfw8K/HHVU/bi6WHSJypk6Z/z19o/ztrg==",
+            "license": "Apache-2.0",
+            "dependencies": {
+                "@react-types/shared": "^3.33.1",
+                "@swc/helpers": "^0.5.0"
+            },
+            "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"
+            }
+        },
+        "node_modules/@react-types/autocomplete": {
+            "version": "3.0.0-alpha.38",
+            "resolved": "http://localhost:4873/@react-types/autocomplete/-/autocomplete-3.0.0-alpha.38.tgz",
+            "integrity": "sha512-0XrlVC8drzcrCNzybbkZdLcTofXEzBsHuaFevt5awW1J0xBJ+SMLIQMDeUYrvKjjwXUBlCtjJJpOvitGt4Z+KA==",
+            "license": "Apache-2.0",
+            "dependencies": {
+                "@react-types/combobox": "^3.14.0",
+                "@react-types/searchfield": "^3.6.8",
+                "@react-types/shared": "^3.33.1"
+            },
+            "peerDependencies": {
+                "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1"
+            }
+        },
+        "node_modules/@react-types/breadcrumbs": {
+            "version": "3.7.19",
+            "resolved": "http://localhost:4873/@react-types/breadcrumbs/-/breadcrumbs-3.7.19.tgz",
+            "integrity": "sha512-AnkyYYmzaM2QFi/N0P/kQLM8tHOyFi7p397B/jEMucXDfwMw5Ny1ObCXeIEqbh8KrIa2Xp8SxmQlCV+8FPs4LA==",
+            "license": "Apache-2.0",
+            "dependencies": {
+                "@react-types/link": "^3.6.7",
+                "@react-types/shared": "^3.33.1"
+            },
+            "peerDependencies": {
+                "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1"
+            }
+        },
+        "node_modules/@react-types/button": {
+            "version": "3.15.1",
+            "resolved": "http://localhost:4873/@react-types/button/-/button-3.15.1.tgz",
+            "integrity": "sha512-M1HtsKreJkigCnqceuIT22hDJBSStbPimnpmQmsl7SNyqCFY3+DHS7y/Sl3GvqCkzxF7j9UTL0dG38lGQ3K4xQ==",
+            "license": "Apache-2.0",
+            "dependencies": {
+                "@react-types/shared": "^3.33.1"
+            },
+            "peerDependencies": {
+                "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1"
+            }
+        },
+        "node_modules/@react-types/calendar": {
+            "version": "3.8.3",
+            "resolved": "http://localhost:4873/@react-types/calendar/-/calendar-3.8.3.tgz",
+            "integrity": "sha512-fpH6WNXotzH0TlKHXXxtjeLZ7ko0sbyHmwDAwmDFyP7T0Iwn1YQZ+lhceLifvynlxuOgX6oBItyUKmkHQ0FouQ==",
+            "license": "Apache-2.0",
+            "dependencies": {
+                "@internationalized/date": "^3.12.0",
+                "@react-types/shared": "^3.33.1"
+            },
+            "peerDependencies": {
+                "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1"
+            }
+        },
+        "node_modules/@react-types/checkbox": {
+            "version": "3.10.4",
+            "resolved": "http://localhost:4873/@react-types/checkbox/-/checkbox-3.10.4.tgz",
+            "integrity": "sha512-tYCG0Pd1usEz5hjvBEYcqcA0youx930Rss1QBIse9TgMekA1c2WmPDNupYV8phpO8Zuej3DL1WfBeXcgavK8aw==",
+            "license": "Apache-2.0",
+            "dependencies": {
+                "@react-types/shared": "^3.33.1"
+            },
+            "peerDependencies": {
+                "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1"
+            }
+        },
+        "node_modules/@react-types/color": {
+            "version": "3.1.4",
+            "resolved": "http://localhost:4873/@react-types/color/-/color-3.1.4.tgz",
+            "integrity": "sha512-s+Xj4pvNBlJPpQ1Gr7bO1j4/tuwMUfdS9xIVFuiW5RvDsSybKTUJ/gqPzTxms94VDCRhLFocVn2STNdD2Erf6A==",
+            "license": "Apache-2.0",
+            "dependencies": {
+                "@react-types/shared": "^3.33.1",
+                "@react-types/slider": "^3.8.4"
+            },
+            "peerDependencies": {
+                "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1"
+            }
+        },
+        "node_modules/@react-types/combobox": {
+            "version": "3.14.0",
+            "resolved": "http://localhost:4873/@react-types/combobox/-/combobox-3.14.0.tgz",
+            "integrity": "sha512-zmSSS7BcCOD8rGT8eGbVy7UlL5qq1vm88fFn4WgFe+lfK33ne+E7yTzTxcPY2TCGSo5fY6xMj3OG79FfVNGbSg==",
+            "license": "Apache-2.0",
+            "dependencies": {
+                "@react-types/shared": "^3.33.1"
+            },
+            "peerDependencies": {
+                "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1"
+            }
+        },
+        "node_modules/@react-types/datepicker": {
+            "version": "3.13.5",
+            "resolved": "http://localhost:4873/@react-types/datepicker/-/datepicker-3.13.5.tgz",
+            "integrity": "sha512-j28Vz+xvbb4bj7+9Xbpc4WTvSitlBvt7YEaEGM/8ZQ5g4Jr85H2KwkmDwjzmMN2r6VMQMMYq9JEcemq5wWpfUQ==",
+            "license": "Apache-2.0",
+            "dependencies": {
+                "@internationalized/date": "^3.12.0",
+                "@react-types/calendar": "^3.8.3",
+                "@react-types/overlays": "^3.9.4",
+                "@react-types/shared": "^3.33.1"
+            },
+            "peerDependencies": {
+                "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1"
+            }
+        },
+        "node_modules/@react-types/dialog": {
+            "version": "3.5.24",
+            "resolved": "http://localhost:4873/@react-types/dialog/-/dialog-3.5.24.tgz",
+            "integrity": "sha512-NFurEP/zV0dA/41422lV1t+0oh6f/13n+VmLHZG8R13m1J3ql/kAXZ49zBSqkqANBO1ojyugWebk99IiR4pYOw==",
+            "license": "Apache-2.0",
+            "dependencies": {
+                "@react-types/overlays": "^3.9.4",
+                "@react-types/shared": "^3.33.1"
+            },
+            "peerDependencies": {
+                "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1"
+            }
+        },
+        "node_modules/@react-types/form": {
+            "version": "3.7.18",
+            "resolved": "http://localhost:4873/@react-types/form/-/form-3.7.18.tgz",
+            "integrity": "sha512-0sBJW0+I9nJcF4SmKrYFEWAlehiebSTy7xqriqAXtqfTEdvzAYLGaAK2/7gx+wlNZeDTdW43CDRJ4XAhyhBqnw==",
+            "license": "Apache-2.0",
+            "dependencies": {
+                "@react-types/shared": "^3.33.1"
+            },
+            "peerDependencies": {
+                "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1"
+            }
+        },
+        "node_modules/@react-types/grid": {
+            "version": "3.3.8",
+            "resolved": "http://localhost:4873/@react-types/grid/-/grid-3.3.8.tgz",
+            "integrity": "sha512-zJvXH8gc1e1VH2H3LRnHH/W2HIkLkZMH3Cu5pLcj0vDuLBSWpcr3Ikh3jZ+VUOZF0G1Jt1lO8pKIaqFzDLNmLQ==",
+            "license": "Apache-2.0",
+            "dependencies": {
+                "@react-types/shared": "^3.33.1"
+            },
+            "peerDependencies": {
+                "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1"
+            }
+        },
+        "node_modules/@react-types/link": {
+            "version": "3.6.7",
+            "resolved": "http://localhost:4873/@react-types/link/-/link-3.6.7.tgz",
+            "integrity": "sha512-1apXCFJgMC1uydc2KNENrps1qR642FqDpwlNWe254UTpRZn/hEZhA6ImVr8WhomfLJu672WyWA0rUOv4HT+/pQ==",
+            "license": "Apache-2.0",
+            "dependencies": {
+                "@react-types/shared": "^3.33.1"
+            },
+            "peerDependencies": {
+                "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1"
+            }
+        },
+        "node_modules/@react-types/listbox": {
+            "version": "3.7.6",
+            "resolved": "http://localhost:4873/@react-types/listbox/-/listbox-3.7.6.tgz",
+            "integrity": "sha512-335NYElKEByXMalAmeRPyulKIDd2cjOCQhLwvv2BtxO5zaJfZnBbhZs+XPd9zwU6YomyOxODKSHrwbNDx+Jf3w==",
+            "license": "Apache-2.0",
+            "dependencies": {
+                "@react-types/shared": "^3.33.1"
+            },
+            "peerDependencies": {
+                "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1"
+            }
+        },
+        "node_modules/@react-types/menu": {
+            "version": "3.10.7",
+            "resolved": "http://localhost:4873/@react-types/menu/-/menu-3.10.7.tgz",
+            "integrity": "sha512-+p7ixZdvPDJZhisqdtWiiuJ9pteNfK5i19NB6wzAw5XkljbEzodNhwLv6rI96DY5XpbFso2kcjw7IWi+rAAGGQ==",
+            "license": "Apache-2.0",
+            "dependencies": {
+                "@react-types/overlays": "^3.9.4",
+                "@react-types/shared": "^3.33.1"
+            },
+            "peerDependencies": {
+                "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1"
+            }
+        },
+        "node_modules/@react-types/meter": {
+            "version": "3.4.15",
+            "resolved": "http://localhost:4873/@react-types/meter/-/meter-3.4.15.tgz",
+            "integrity": "sha512-9WjNphhLLM+TA4Ev1y2MkpugJ5JjTXseHh7ZWWx2veq5DrXMZYclkRpfUrUdLVKvaBIPQCgpQIj0TcQi+quR9A==",
+            "license": "Apache-2.0",
+            "dependencies": {
+                "@react-types/progress": "^3.5.18"
+            },
+            "peerDependencies": {
+                "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1"
+            }
+        },
+        "node_modules/@react-types/numberfield": {
+            "version": "3.8.18",
+            "resolved": "http://localhost:4873/@react-types/numberfield/-/numberfield-3.8.18.tgz",
+            "integrity": "sha512-nLzk7YAG9yAUtSv+9R8LgCHsu8hJq8/A+m1KsKxvc8WmNJjIujSFgWvT21MWBiUgPBzJKGzAqpMDDa087mltJQ==",
+            "license": "Apache-2.0",
+            "dependencies": {
+                "@react-types/shared": "^3.33.1"
+            },
+            "peerDependencies": {
+                "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1"
+            }
+        },
+        "node_modules/@react-types/overlays": {
+            "version": "3.9.4",
+            "resolved": "http://localhost:4873/@react-types/overlays/-/overlays-3.9.4.tgz",
+            "integrity": "sha512-7Z9HaebMFyYBqtv3XVNHEmVkm7AiYviV7gv0c98elEN2Co+eQcKFGvwBM9Gy/lV57zlTqFX1EX/SAqkMEbCLOA==",
+            "license": "Apache-2.0",
+            "dependencies": {
+                "@react-types/shared": "^3.33.1"
+            },
+            "peerDependencies": {
+                "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1"
+            }
+        },
+        "node_modules/@react-types/progress": {
+            "version": "3.5.18",
+            "resolved": "http://localhost:4873/@react-types/progress/-/progress-3.5.18.tgz",
+            "integrity": "sha512-mKeQn+KrHr1y0/k7KtrbeDGDaERH6i4f6yBwj/ZtYDCTNKMO3tPHJY6nzF0w/KKZLplIO+BjUbHXc2RVm8ovwQ==",
+            "license": "Apache-2.0",
+            "dependencies": {
+                "@react-types/shared": "^3.33.1"
+            },
+            "peerDependencies": {
+                "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1"
+            }
+        },
+        "node_modules/@react-types/radio": {
+            "version": "3.9.4",
+            "resolved": "http://localhost:4873/@react-types/radio/-/radio-3.9.4.tgz",
+            "integrity": "sha512-TkMRY3sA1PcFZhhclu4IUzUTIir6MzNJj8h6WT8vO6Nug2kXJ72qigugVFBWJSE472mltduOErEAo0rtAYWbQA==",
+            "license": "Apache-2.0",
+            "dependencies": {
+                "@react-types/shared": "^3.33.1"
+            },
+            "peerDependencies": {
+                "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1"
+            }
+        },
+        "node_modules/@react-types/searchfield": {
+            "version": "3.6.8",
+            "resolved": "http://localhost:4873/@react-types/searchfield/-/searchfield-3.6.8.tgz",
+            "integrity": "sha512-M2p7OVdMTMDmlBcHd4N2uCBwg3uJSNM4lmEyf09YD44N5wDAI0yogk52QBwsnhpe+i2s65UwCYgunB+QltRX8A==",
+            "license": "Apache-2.0",
+            "dependencies": {
+                "@react-types/shared": "^3.33.1",
+                "@react-types/textfield": "^3.12.8"
+            },
+            "peerDependencies": {
+                "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1"
+            }
+        },
+        "node_modules/@react-types/select": {
+            "version": "3.12.2",
+            "resolved": "http://localhost:4873/@react-types/select/-/select-3.12.2.tgz",
+            "integrity": "sha512-AseOjfr3qM1W1qIWcbAe6NFpwZluVeQX/dmu9BYxjcnVvtoBLPMbE5zX/BPbv+N5eFYjoMyj7Ug9dqnI+LrlGw==",
+            "license": "Apache-2.0",
+            "dependencies": {
+                "@react-types/shared": "^3.33.1"
+            },
+            "peerDependencies": {
+                "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1"
+            }
+        },
+        "node_modules/@react-types/shared": {
+            "version": "3.33.1",
+            "resolved": "http://localhost:4873/@react-types/shared/-/shared-3.33.1.tgz",
+            "integrity": "sha512-oJHtjvLG43VjwemQDadlR5g/8VepK56B/xKO2XORPHt9zlW6IZs3tZrYlvH29BMvoqC7RtE7E5UjgbnbFtDGag==",
+            "license": "Apache-2.0",
+            "peerDependencies": {
+                "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1"
+            }
+        },
+        "node_modules/@react-types/slider": {
+            "version": "3.8.4",
+            "resolved": "http://localhost:4873/@react-types/slider/-/slider-3.8.4.tgz",
+            "integrity": "sha512-C+xFVvfKREai9S/ekBDCVaGPOQYkNUAsQhjQnNsUAATaox4I6IYLmcIgLmljpMQWqAe+gZiWsIwacRYMez2Tew==",
+            "license": "Apache-2.0",
+            "dependencies": {
+                "@react-types/shared": "^3.33.1"
+            },
+            "peerDependencies": {
+                "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1"
+            }
+        },
+        "node_modules/@react-types/switch": {
+            "version": "3.5.17",
+            "resolved": "http://localhost:4873/@react-types/switch/-/switch-3.5.17.tgz",
+            "integrity": "sha512-2GTPJvBCYI8YZ3oerHtXg+qikabIXCMJ6C2wcIJ5Xn0k9XOovowghfJi10OPB2GGyOiLBU74CczP5nx8adG90Q==",
+            "license": "Apache-2.0",
+            "dependencies": {
+                "@react-types/shared": "^3.33.1"
+            },
+            "peerDependencies": {
+                "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1"
+            }
+        },
+        "node_modules/@react-types/table": {
+            "version": "3.13.6",
+            "resolved": "http://localhost:4873/@react-types/table/-/table-3.13.6.tgz",
+            "integrity": "sha512-eluL+iFfnVmFm7OSZrrFG9AUjw+tcv898zbv+NsZACa8oXG1v9AimhZfd+Mo8q/5+sX/9hguWNXFkSvmTjuVPQ==",
+            "license": "Apache-2.0",
+            "dependencies": {
+                "@react-types/grid": "^3.3.8",
+                "@react-types/shared": "^3.33.1"
+            },
+            "peerDependencies": {
+                "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1"
+            }
+        },
+        "node_modules/@react-types/tabs": {
+            "version": "3.3.22",
+            "resolved": "http://localhost:4873/@react-types/tabs/-/tabs-3.3.22.tgz",
+            "integrity": "sha512-HGwLD9dA3k3AGfRKGFBhNgxU9/LyRmxN0kxVj1ghA4L9S/qTOzS6GhrGNkGzsGxyVLV4JN8MLxjWN2o9QHnLEg==",
+            "license": "Apache-2.0",
+            "dependencies": {
+                "@react-types/shared": "^3.33.1"
+            },
+            "peerDependencies": {
+                "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1"
+            }
+        },
+        "node_modules/@react-types/textfield": {
+            "version": "3.12.8",
+            "resolved": "http://localhost:4873/@react-types/textfield/-/textfield-3.12.8.tgz",
+            "integrity": "sha512-wt6FcuE5AyntxsnPika/h3nf/DPmeAVbI018L9o6h+B/IL4sMWWdx663wx2KOOeHH8ejKGZQNPLhUKs4s1mVQA==",
+            "license": "Apache-2.0",
+            "dependencies": {
+                "@react-types/shared": "^3.33.1"
+            },
+            "peerDependencies": {
+                "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1"
+            }
+        },
+        "node_modules/@react-types/tooltip": {
+            "version": "3.5.2",
+            "resolved": "http://localhost:4873/@react-types/tooltip/-/tooltip-3.5.2.tgz",
+            "integrity": "sha512-FvSuZ2WP08NEWefrpCdBYpEEZh/5TvqvGjq0wqGzWg2OPwpc14HjD8aE7I3MOuylXkD4MSlMjl7J4DlvlcCs3Q==",
+            "license": "Apache-2.0",
+            "dependencies": {
+                "@react-types/overlays": "^3.9.4",
+                "@react-types/shared": "^3.33.1"
+            },
+            "peerDependencies": {
+                "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1"
+            }
+        },
+        "node_modules/@rolldown/pluginutils": {
+            "version": "1.0.0-rc.7",
+            "resolved": "http://localhost:4873/@rolldown/pluginutils/-/pluginutils-1.0.0-rc.7.tgz",
+            "integrity": "sha512-qujRfC8sFVInYSPPMLQByRh7zhwkGFS4+tyMQ83srV1qrxL4g8E2tyxVVyxd0+8QeBM1mIk9KbWxkegRr76XzA==",
+            "dev": true,
+            "license": "MIT"
+        },
+        "node_modules/@rollup/rollup-android-arm-eabi": {
+            "version": "4.59.0",
+            "resolved": "http://localhost:4873/@rollup/rollup-android-arm-eabi/-/rollup-android-arm-eabi-4.59.0.tgz",
+            "integrity": "sha512-upnNBkA6ZH2VKGcBj9Fyl9IGNPULcjXRlg0LLeaioQWueH30p6IXtJEbKAgvyv+mJaMxSm1l6xwDXYjpEMiLMg==",
+            "cpu": [
+                "arm"
+            ],
+            "license": "MIT",
+            "optional": true,
+            "os": [
+                "android"
+            ]
+        },
+        "node_modules/@rollup/rollup-android-arm64": {
+            "version": "4.59.0",
+            "resolved": "http://localhost:4873/@rollup/rollup-android-arm64/-/rollup-android-arm64-4.59.0.tgz",
+            "integrity": "sha512-hZ+Zxj3SySm4A/DylsDKZAeVg0mvi++0PYVceVyX7hemkw7OreKdCvW2oQ3T1FMZvCaQXqOTHb8qmBShoqk69Q==",
+            "cpu": [
+                "arm64"
+            ],
+            "license": "MIT",
+            "optional": true,
+            "os": [
+                "android"
+            ]
+        },
+        "node_modules/@rollup/rollup-darwin-arm64": {
+            "version": "4.59.0",
+            "resolved": "http://localhost:4873/@rollup/rollup-darwin-arm64/-/rollup-darwin-arm64-4.59.0.tgz",
+            "integrity": "sha512-W2Psnbh1J8ZJw0xKAd8zdNgF9HRLkdWwwdWqubSVk0pUuQkoHnv7rx4GiF9rT4t5DIZGAsConRE3AxCdJ4m8rg==",
+            "cpu": [
+                "arm64"
+            ],
+            "license": "MIT",
+            "optional": true,
+            "os": [
+                "darwin"
+            ]
+        },
+        "node_modules/@rollup/rollup-darwin-x64": {
+            "version": "4.59.0",
+            "resolved": "http://localhost:4873/@rollup/rollup-darwin-x64/-/rollup-darwin-x64-4.59.0.tgz",
+            "integrity": "sha512-ZW2KkwlS4lwTv7ZVsYDiARfFCnSGhzYPdiOU4IM2fDbL+QGlyAbjgSFuqNRbSthybLbIJ915UtZBtmuLrQAT/w==",
+            "cpu": [
+                "x64"
+            ],
+            "license": "MIT",
+            "optional": true,
+            "os": [
+                "darwin"
+            ]
+        },
+        "node_modules/@rollup/rollup-freebsd-arm64": {
+            "version": "4.59.0",
+            "resolved": "http://localhost:4873/@rollup/rollup-freebsd-arm64/-/rollup-freebsd-arm64-4.59.0.tgz",
+            "integrity": "sha512-EsKaJ5ytAu9jI3lonzn3BgG8iRBjV4LxZexygcQbpiU0wU0ATxhNVEpXKfUa0pS05gTcSDMKpn3Sx+QB9RlTTA==",
+            "cpu": [
+                "arm64"
+            ],
+            "license": "MIT",
+            "optional": true,
+            "os": [
+                "freebsd"
+            ]
+        },
+        "node_modules/@rollup/rollup-freebsd-x64": {
+            "version": "4.59.0",
+            "resolved": "http://localhost:4873/@rollup/rollup-freebsd-x64/-/rollup-freebsd-x64-4.59.0.tgz",
+            "integrity": "sha512-d3DuZi2KzTMjImrxoHIAODUZYoUUMsuUiY4SRRcJy6NJoZ6iIqWnJu9IScV9jXysyGMVuW+KNzZvBLOcpdl3Vg==",
+            "cpu": [
+                "x64"
+            ],
+            "license": "MIT",
+            "optional": true,
+            "os": [
+                "freebsd"
+            ]
+        },
+        "node_modules/@rollup/rollup-linux-arm-gnueabihf": {
+            "version": "4.59.0",
+            "resolved": "http://localhost:4873/@rollup/rollup-linux-arm-gnueabihf/-/rollup-linux-arm-gnueabihf-4.59.0.tgz",
+            "integrity": "sha512-t4ONHboXi/3E0rT6OZl1pKbl2Vgxf9vJfWgmUoCEVQVxhW6Cw/c8I6hbbu7DAvgp82RKiH7TpLwxnJeKv2pbsw==",
+            "cpu": [
+                "arm"
+            ],
+            "license": "MIT",
+            "optional": true,
+            "os": [
+                "linux"
+            ]
+        },
+        "node_modules/@rollup/rollup-linux-arm-musleabihf": {
+            "version": "4.59.0",
+            "resolved": "http://localhost:4873/@rollup/rollup-linux-arm-musleabihf/-/rollup-linux-arm-musleabihf-4.59.0.tgz",
+            "integrity": "sha512-CikFT7aYPA2ufMD086cVORBYGHffBo4K8MQ4uPS/ZnY54GKj36i196u8U+aDVT2LX4eSMbyHtyOh7D7Zvk2VvA==",
+            "cpu": [
+                "arm"
+            ],
+            "license": "MIT",
+            "optional": true,
+            "os": [
+                "linux"
+            ]
+        },
+        "node_modules/@rollup/rollup-linux-arm64-gnu": {
+            "version": "4.59.0",
+            "resolved": "http://localhost:4873/@rollup/rollup-linux-arm64-gnu/-/rollup-linux-arm64-gnu-4.59.0.tgz",
+            "integrity": "sha512-jYgUGk5aLd1nUb1CtQ8E+t5JhLc9x5WdBKew9ZgAXg7DBk0ZHErLHdXM24rfX+bKrFe+Xp5YuJo54I5HFjGDAA==",
+            "cpu": [
+                "arm64"
+            ],
+            "license": "MIT",
+            "optional": true,
+            "os": [
+                "linux"
+            ]
+        },
+        "node_modules/@rollup/rollup-linux-arm64-musl": {
+            "version": "4.59.0",
+            "resolved": "http://localhost:4873/@rollup/rollup-linux-arm64-musl/-/rollup-linux-arm64-musl-4.59.0.tgz",
+            "integrity": "sha512-peZRVEdnFWZ5Bh2KeumKG9ty7aCXzzEsHShOZEFiCQlDEepP1dpUl/SrUNXNg13UmZl+gzVDPsiCwnV1uI0RUA==",
+            "cpu": [
+                "arm64"
+            ],
+            "license": "MIT",
+            "optional": true,
+            "os": [
+                "linux"
+            ]
+        },
+        "node_modules/@rollup/rollup-linux-loong64-gnu": {
+            "version": "4.59.0",
+            "resolved": "http://localhost:4873/@rollup/rollup-linux-loong64-gnu/-/rollup-linux-loong64-gnu-4.59.0.tgz",
+            "integrity": "sha512-gbUSW/97f7+r4gHy3Jlup8zDG190AuodsWnNiXErp9mT90iCy9NKKU0Xwx5k8VlRAIV2uU9CsMnEFg/xXaOfXg==",
+            "cpu": [
+                "loong64"
+            ],
+            "license": "MIT",
+            "optional": true,
+            "os": [
+                "linux"
+            ]
+        },
+        "node_modules/@rollup/rollup-linux-loong64-musl": {
+            "version": "4.59.0",
+            "resolved": "http://localhost:4873/@rollup/rollup-linux-loong64-musl/-/rollup-linux-loong64-musl-4.59.0.tgz",
+            "integrity": "sha512-yTRONe79E+o0FWFijasoTjtzG9EBedFXJMl888NBEDCDV9I2wGbFFfJQQe63OijbFCUZqxpHz1GzpbtSFikJ4Q==",
+            "cpu": [
+                "loong64"
+            ],
+            "license": "MIT",
+            "optional": true,
+            "os": [
+                "linux"
+            ]
+        },
+        "node_modules/@rollup/rollup-linux-ppc64-gnu": {
+            "version": "4.59.0",
+            "resolved": "http://localhost:4873/@rollup/rollup-linux-ppc64-gnu/-/rollup-linux-ppc64-gnu-4.59.0.tgz",
+            "integrity": "sha512-sw1o3tfyk12k3OEpRddF68a1unZ5VCN7zoTNtSn2KndUE+ea3m3ROOKRCZxEpmT9nsGnogpFP9x6mnLTCaoLkA==",
+            "cpu": [
+                "ppc64"
+            ],
+            "license": "MIT",
+            "optional": true,
+            "os": [
+                "linux"
+            ]
+        },
+        "node_modules/@rollup/rollup-linux-ppc64-musl": {
+            "version": "4.59.0",
+            "resolved": "http://localhost:4873/@rollup/rollup-linux-ppc64-musl/-/rollup-linux-ppc64-musl-4.59.0.tgz",
+            "integrity": "sha512-+2kLtQ4xT3AiIxkzFVFXfsmlZiG5FXYW7ZyIIvGA7Bdeuh9Z0aN4hVyXS/G1E9bTP/vqszNIN/pUKCk/BTHsKA==",
+            "cpu": [
+                "ppc64"
+            ],
+            "license": "MIT",
+            "optional": true,
+            "os": [
+                "linux"
+            ]
+        },
+        "node_modules/@rollup/rollup-linux-riscv64-gnu": {
+            "version": "4.59.0",
+            "resolved": "http://localhost:4873/@rollup/rollup-linux-riscv64-gnu/-/rollup-linux-riscv64-gnu-4.59.0.tgz",
+            "integrity": "sha512-NDYMpsXYJJaj+I7UdwIuHHNxXZ/b/N2hR15NyH3m2qAtb/hHPA4g4SuuvrdxetTdndfj9b1WOmy73kcPRoERUg==",
+            "cpu": [
+                "riscv64"
+            ],
+            "license": "MIT",
+            "optional": true,
+            "os": [
+                "linux"
+            ]
+        },
+        "node_modules/@rollup/rollup-linux-riscv64-musl": {
+            "version": "4.59.0",
+            "resolved": "http://localhost:4873/@rollup/rollup-linux-riscv64-musl/-/rollup-linux-riscv64-musl-4.59.0.tgz",
+            "integrity": "sha512-nLckB8WOqHIf1bhymk+oHxvM9D3tyPndZH8i8+35p/1YiVoVswPid2yLzgX7ZJP0KQvnkhM4H6QZ5m0LzbyIAg==",
+            "cpu": [
+                "riscv64"
+            ],
+            "license": "MIT",
+            "optional": true,
+            "os": [
+                "linux"
+            ]
+        },
+        "node_modules/@rollup/rollup-linux-s390x-gnu": {
+            "version": "4.59.0",
+            "resolved": "http://localhost:4873/@rollup/rollup-linux-s390x-gnu/-/rollup-linux-s390x-gnu-4.59.0.tgz",
+            "integrity": "sha512-oF87Ie3uAIvORFBpwnCvUzdeYUqi2wY6jRFWJAy1qus/udHFYIkplYRW+wo+GRUP4sKzYdmE1Y3+rY5Gc4ZO+w==",
+            "cpu": [
+                "s390x"
+            ],
+            "license": "MIT",
+            "optional": true,
+            "os": [
+                "linux"
+            ]
+        },
+        "node_modules/@rollup/rollup-linux-x64-gnu": {
+            "version": "4.59.0",
+            "resolved": "http://localhost:4873/@rollup/rollup-linux-x64-gnu/-/rollup-linux-x64-gnu-4.59.0.tgz",
+            "integrity": "sha512-3AHmtQq/ppNuUspKAlvA8HtLybkDflkMuLK4DPo77DfthRb71V84/c4MlWJXixZz4uruIH4uaa07IqoAkG64fg==",
+            "cpu": [
+                "x64"
+            ],
+            "license": "MIT",
+            "optional": true,
+            "os": [
+                "linux"
+            ]
+        },
+        "node_modules/@rollup/rollup-linux-x64-musl": {
+            "version": "4.59.0",
+            "resolved": "http://localhost:4873/@rollup/rollup-linux-x64-musl/-/rollup-linux-x64-musl-4.59.0.tgz",
+            "integrity": "sha512-2UdiwS/9cTAx7qIUZB/fWtToJwvt0Vbo0zmnYt7ED35KPg13Q0ym1g442THLC7VyI6JfYTP4PiSOWyoMdV2/xg==",
+            "cpu": [
+                "x64"
+            ],
+            "license": "MIT",
+            "optional": true,
+            "os": [
+                "linux"
+            ]
+        },
+        "node_modules/@rollup/rollup-openbsd-x64": {
+            "version": "4.59.0",
+            "resolved": "http://localhost:4873/@rollup/rollup-openbsd-x64/-/rollup-openbsd-x64-4.59.0.tgz",
+            "integrity": "sha512-M3bLRAVk6GOwFlPTIxVBSYKUaqfLrn8l0psKinkCFxl4lQvOSz8ZrKDz2gxcBwHFpci0B6rttydI4IpS4IS/jQ==",
+            "cpu": [
+                "x64"
+            ],
+            "license": "MIT",
+            "optional": true,
+            "os": [
+                "openbsd"
+            ]
+        },
+        "node_modules/@rollup/rollup-openharmony-arm64": {
+            "version": "4.59.0",
+            "resolved": "http://localhost:4873/@rollup/rollup-openharmony-arm64/-/rollup-openharmony-arm64-4.59.0.tgz",
+            "integrity": "sha512-tt9KBJqaqp5i5HUZzoafHZX8b5Q2Fe7UjYERADll83O4fGqJ49O1FsL6LpdzVFQcpwvnyd0i+K/VSwu/o/nWlA==",
+            "cpu": [
+                "arm64"
+            ],
+            "license": "MIT",
+            "optional": true,
+            "os": [
+                "openharmony"
+            ]
+        },
+        "node_modules/@rollup/rollup-win32-arm64-msvc": {
+            "version": "4.59.0",
+            "resolved": "http://localhost:4873/@rollup/rollup-win32-arm64-msvc/-/rollup-win32-arm64-msvc-4.59.0.tgz",
+            "integrity": "sha512-V5B6mG7OrGTwnxaNUzZTDTjDS7F75PO1ae6MJYdiMu60sq0CqN5CVeVsbhPxalupvTX8gXVSU9gq+Rx1/hvu6A==",
+            "cpu": [
+                "arm64"
+            ],
+            "license": "MIT",
+            "optional": true,
+            "os": [
+                "win32"
+            ]
+        },
+        "node_modules/@rollup/rollup-win32-ia32-msvc": {
+            "version": "4.59.0",
+            "resolved": "http://localhost:4873/@rollup/rollup-win32-ia32-msvc/-/rollup-win32-ia32-msvc-4.59.0.tgz",
+            "integrity": "sha512-UKFMHPuM9R0iBegwzKF4y0C4J9u8C6MEJgFuXTBerMk7EJ92GFVFYBfOZaSGLu6COf7FxpQNqhNS4c4icUPqxA==",
+            "cpu": [
+                "ia32"
+            ],
+            "license": "MIT",
+            "optional": true,
+            "os": [
+                "win32"
+            ]
+        },
+        "node_modules/@rollup/rollup-win32-x64-gnu": {
+            "version": "4.59.0",
+            "resolved": "http://localhost:4873/@rollup/rollup-win32-x64-gnu/-/rollup-win32-x64-gnu-4.59.0.tgz",
+            "integrity": "sha512-laBkYlSS1n2L8fSo1thDNGrCTQMmxjYY5G0WFWjFFYZkKPjsMBsgJfGf4TLxXrF6RyhI60L8TMOjBMvXiTcxeA==",
+            "cpu": [
+                "x64"
+            ],
+            "license": "MIT",
+            "optional": true,
+            "os": [
+                "win32"
+            ]
+        },
+        "node_modules/@rollup/rollup-win32-x64-msvc": {
+            "version": "4.59.0",
+            "resolved": "http://localhost:4873/@rollup/rollup-win32-x64-msvc/-/rollup-win32-x64-msvc-4.59.0.tgz",
+            "integrity": "sha512-2HRCml6OztYXyJXAvdDXPKcawukWY2GpR5/nxKp4iBgiO3wcoEGkAaqctIbZcNB6KlUQBIqt8VYkNSj2397EfA==",
+            "cpu": [
+                "x64"
+            ],
+            "license": "MIT",
+            "optional": true,
+            "os": [
+                "win32"
+            ]
+        },
+        "node_modules/@swc/core": {
+            "version": "1.15.18",
+            "resolved": "http://localhost:4873/@swc/core/-/core-1.15.18.tgz",
+            "integrity": "sha512-z87aF9GphWp//fnkRsqvtY+inMVPgYW3zSlXH1kJFvRT5H/wiAn+G32qW5l3oEk63KSF1x3Ov0BfHCObAmT8RA==",
+            "dev": true,
+            "hasInstallScript": true,
+            "license": "Apache-2.0",
+            "dependencies": {
+                "@swc/counter": "^0.1.3",
+                "@swc/types": "^0.1.25"
+            },
+            "engines": {
+                "node": ">=10"
+            },
+            "funding": {
+                "type": "opencollective",
+                "url": "https://opencollective.com/swc"
+            },
+            "optionalDependencies": {
+                "@swc/core-darwin-arm64": "1.15.18",
+                "@swc/core-darwin-x64": "1.15.18",
+                "@swc/core-linux-arm-gnueabihf": "1.15.18",
+                "@swc/core-linux-arm64-gnu": "1.15.18",
+                "@swc/core-linux-arm64-musl": "1.15.18",
+                "@swc/core-linux-x64-gnu": "1.15.18",
+                "@swc/core-linux-x64-musl": "1.15.18",
+                "@swc/core-win32-arm64-msvc": "1.15.18",
+                "@swc/core-win32-ia32-msvc": "1.15.18",
+                "@swc/core-win32-x64-msvc": "1.15.18"
+            },
+            "peerDependencies": {
+                "@swc/helpers": ">=0.5.17"
+            },
+            "peerDependenciesMeta": {
+                "@swc/helpers": {
+                    "optional": true
+                }
+            }
+        },
+        "node_modules/@swc/core-darwin-arm64": {
+            "version": "1.15.18",
+            "resolved": "http://localhost:4873/@swc/core-darwin-arm64/-/core-darwin-arm64-1.15.18.tgz",
+            "integrity": "sha512-+mIv7uBuSaywN3C9LNuWaX1jJJ3SKfiJuE6Lr3bd+/1Iv8oMU7oLBjYMluX1UrEPzwN2qCdY6Io0yVicABoCwQ==",
+            "cpu": [
+                "arm64"
+            ],
+            "dev": true,
+            "license": "Apache-2.0 AND MIT",
+            "optional": true,
+            "os": [
+                "darwin"
+            ],
+            "engines": {
+                "node": ">=10"
+            }
+        },
+        "node_modules/@swc/core-darwin-x64": {
+            "version": "1.15.18",
+            "resolved": "http://localhost:4873/@swc/core-darwin-x64/-/core-darwin-x64-1.15.18.tgz",
+            "integrity": "sha512-wZle0eaQhnzxWX5V/2kEOI6Z9vl/lTFEC6V4EWcn+5pDjhemCpQv9e/TDJ0GIoiClX8EDWRvuZwh+Z3dhL1NAg==",
+            "cpu": [
+                "x64"
+            ],
+            "dev": true,
+            "license": "Apache-2.0 AND MIT",
+            "optional": true,
+            "os": [
+                "darwin"
+            ],
+            "engines": {
+                "node": ">=10"
+            }
+        },
+        "node_modules/@swc/core-linux-arm-gnueabihf": {
+            "version": "1.15.18",
+            "resolved": "http://localhost:4873/@swc/core-linux-arm-gnueabihf/-/core-linux-arm-gnueabihf-1.15.18.tgz",
+            "integrity": "sha512-ao61HGXVqrJFHAcPtF4/DegmwEkVCo4HApnotLU8ognfmU8x589z7+tcf3hU+qBiU1WOXV5fQX6W9Nzs6hjxDw==",
+            "cpu": [
+                "arm"
+            ],
+            "dev": true,
+            "license": "Apache-2.0",
+            "optional": true,
+            "os": [
+                "linux"
+            ],
+            "engines": {
+                "node": ">=10"
+            }
+        },
+        "node_modules/@swc/core-linux-arm64-gnu": {
+            "version": "1.15.18",
+            "resolved": "http://localhost:4873/@swc/core-linux-arm64-gnu/-/core-linux-arm64-gnu-1.15.18.tgz",
+            "integrity": "sha512-3xnctOBLIq3kj8PxOCgPrGjBLP/kNOddr6f5gukYt/1IZxsITQaU9TDyjeX6jG+FiCIHjCuWuffsyQDL5Ew1bg==",
+            "cpu": [
+                "arm64"
+            ],
+            "dev": true,
+            "license": "Apache-2.0 AND MIT",
+            "optional": true,
+            "os": [
+                "linux"
+            ],
+            "engines": {
+                "node": ">=10"
+            }
+        },
+        "node_modules/@swc/core-linux-arm64-musl": {
+            "version": "1.15.18",
+            "resolved": "http://localhost:4873/@swc/core-linux-arm64-musl/-/core-linux-arm64-musl-1.15.18.tgz",
+            "integrity": "sha512-0a+Lix+FSSHBSBOA0XznCcHo5/1nA6oLLjcnocvzXeqtdjnPb+SvchItHI+lfeiuj1sClYPDvPMLSLyXFaiIKw==",
+            "cpu": [
+                "arm64"
+            ],
+            "dev": true,
+            "license": "Apache-2.0 AND MIT",
+            "optional": true,
+            "os": [
+                "linux"
+            ],
+            "engines": {
+                "node": ">=10"
+            }
+        },
+        "node_modules/@swc/core-linux-x64-gnu": {
+            "version": "1.15.18",
+            "resolved": "http://localhost:4873/@swc/core-linux-x64-gnu/-/core-linux-x64-gnu-1.15.18.tgz",
+            "integrity": "sha512-wG9J8vReUlpaHz4KOD/5UE1AUgirimU4UFT9oZmupUDEofxJKYb1mTA/DrMj0s78bkBiNI+7Fo2EgPuvOJfuAA==",
+            "cpu": [
+                "x64"
+            ],
+            "dev": true,
+            "license": "Apache-2.0 AND MIT",
+            "optional": true,
+            "os": [
+                "linux"
+            ],
+            "engines": {
+                "node": ">=10"
+            }
+        },
+        "node_modules/@swc/core-linux-x64-musl": {
+            "version": "1.15.18",
+            "resolved": "http://localhost:4873/@swc/core-linux-x64-musl/-/core-linux-x64-musl-1.15.18.tgz",
+            "integrity": "sha512-4nwbVvCphKzicwNWRmvD5iBaZj8JYsRGa4xOxJmOyHlMDpsvvJ2OR2cODlvWyGFH6BYL1MfIAK3qph3hp0Az6g==",
+            "cpu": [
+                "x64"
+            ],
+            "dev": true,
+            "license": "Apache-2.0 AND MIT",
+            "optional": true,
+            "os": [
+                "linux"
+            ],
+            "engines": {
+                "node": ">=10"
+            }
+        },
+        "node_modules/@swc/core-win32-arm64-msvc": {
+            "version": "1.15.18",
+            "resolved": "http://localhost:4873/@swc/core-win32-arm64-msvc/-/core-win32-arm64-msvc-1.15.18.tgz",
+            "integrity": "sha512-zk0RYO+LjiBCat2RTMHzAWaMky0cra9loH4oRrLKLLNuL+jarxKLFDA8xTZWEkCPLjUTwlRN7d28eDLLMgtUcQ==",
+            "cpu": [
+                "arm64"
+            ],
+            "dev": true,
+            "license": "Apache-2.0 AND MIT",
+            "optional": true,
+            "os": [
+                "win32"
+            ],
+            "engines": {
+                "node": ">=10"
+            }
+        },
+        "node_modules/@swc/core-win32-ia32-msvc": {
+            "version": "1.15.18",
+            "resolved": "http://localhost:4873/@swc/core-win32-ia32-msvc/-/core-win32-ia32-msvc-1.15.18.tgz",
+            "integrity": "sha512-yVuTrZ0RccD5+PEkpcLOBAuPbYBXS6rslENvIXfvJGXSdX5QGi1ehC4BjAMl5FkKLiam4kJECUI0l7Hq7T1vwg==",
+            "cpu": [
+                "ia32"
+            ],
+            "dev": true,
+            "license": "Apache-2.0 AND MIT",
+            "optional": true,
+            "os": [
+                "win32"
+            ],
+            "engines": {
+                "node": ">=10"
+            }
+        },
+        "node_modules/@swc/core-win32-x64-msvc": {
+            "version": "1.15.18",
+            "resolved": "http://localhost:4873/@swc/core-win32-x64-msvc/-/core-win32-x64-msvc-1.15.18.tgz",
+            "integrity": "sha512-7NRmE4hmUQNCbYU3Hn9Tz57mK9Qq4c97ZS+YlamlK6qG9Fb5g/BB3gPDe0iLlJkns/sYv2VWSkm8c3NmbEGjbg==",
+            "cpu": [
+                "x64"
+            ],
+            "dev": true,
+            "license": "Apache-2.0 AND MIT",
+            "optional": true,
+            "os": [
+                "win32"
+            ],
+            "engines": {
+                "node": ">=10"
+            }
+        },
+        "node_modules/@swc/counter": {
+            "version": "0.1.3",
+            "resolved": "http://localhost:4873/@swc/counter/-/counter-0.1.3.tgz",
+            "integrity": "sha512-e2BR4lsJkkRlKZ/qCHPw9ZaSxc0MVUd7gtbtaB7aMvHeJVYe8sOB8DBZkP2DtISHGSku9sCK6T6cnY0CtXrOCQ==",
+            "dev": true,
+            "license": "Apache-2.0"
+        },
+        "node_modules/@swc/helpers": {
+            "version": "0.5.19",
+            "resolved": "http://localhost:4873/@swc/helpers/-/helpers-0.5.19.tgz",
+            "integrity": "sha512-QamiFeIK3txNjgUTNppE6MiG3p7TdninpZu0E0PbqVh1a9FNLT2FRhisaa4NcaX52XVhA5l7Pk58Ft7Sqi/2sA==",
+            "license": "Apache-2.0",
+            "dependencies": {
+                "tslib": "^2.8.0"
+            }
+        },
+        "node_modules/@swc/types": {
+            "version": "0.1.25",
+            "resolved": "http://localhost:4873/@swc/types/-/types-0.1.25.tgz",
+            "integrity": "sha512-iAoY/qRhNH8a/hBvm3zKj9qQ4oc2+3w1unPJa2XvTK3XjeLXtzcCingVPw/9e5mn1+0yPqxcBGp9Jf0pkfMb1g==",
+            "dev": true,
+            "license": "Apache-2.0",
+            "dependencies": {
+                "@swc/counter": "^0.1.3"
+            }
+        },
+        "node_modules/@tailwindcss/node": {
+            "version": "4.2.1",
+            "resolved": "http://localhost:4873/@tailwindcss/node/-/node-4.2.1.tgz",
+            "integrity": "sha512-jlx6sLk4EOwO6hHe1oCGm1Q4AN/s0rSrTTPBGPM0/RQ6Uylwq17FuU8IeJJKEjtc6K6O07zsvP+gDO6MMWo7pg==",
+            "license": "MIT",
+            "dependencies": {
+                "@jridgewell/remapping": "^2.3.5",
+                "enhanced-resolve": "^5.19.0",
+                "jiti": "^2.6.1",
+                "lightningcss": "1.31.1",
+                "magic-string": "^0.30.21",
+                "source-map-js": "^1.2.1",
+                "tailwindcss": "4.2.1"
+            }
+        },
+        "node_modules/@tailwindcss/oxide": {
+            "version": "4.2.1",
+            "resolved": "http://localhost:4873/@tailwindcss/oxide/-/oxide-4.2.1.tgz",
+            "integrity": "sha512-yv9jeEFWnjKCI6/T3Oq50yQEOqmpmpfzG1hcZsAOaXFQPfzWprWrlHSdGPEF3WQTi8zu8ohC9Mh9J470nT5pUw==",
+            "license": "MIT",
+            "engines": {
+                "node": ">= 20"
+            },
+            "optionalDependencies": {
+                "@tailwindcss/oxide-android-arm64": "4.2.1",
+                "@tailwindcss/oxide-darwin-arm64": "4.2.1",
+                "@tailwindcss/oxide-darwin-x64": "4.2.1",
+                "@tailwindcss/oxide-freebsd-x64": "4.2.1",
+                "@tailwindcss/oxide-linux-arm-gnueabihf": "4.2.1",
+                "@tailwindcss/oxide-linux-arm64-gnu": "4.2.1",
+                "@tailwindcss/oxide-linux-arm64-musl": "4.2.1",
+                "@tailwindcss/oxide-linux-x64-gnu": "4.2.1",
+                "@tailwindcss/oxide-linux-x64-musl": "4.2.1",
+                "@tailwindcss/oxide-wasm32-wasi": "4.2.1",
+                "@tailwindcss/oxide-win32-arm64-msvc": "4.2.1",
+                "@tailwindcss/oxide-win32-x64-msvc": "4.2.1"
+            }
+        },
+        "node_modules/@tailwindcss/oxide-android-arm64": {
+            "version": "4.2.1",
+            "resolved": "http://localhost:4873/@tailwindcss/oxide-android-arm64/-/oxide-android-arm64-4.2.1.tgz",
+            "integrity": "sha512-eZ7G1Zm5EC8OOKaesIKuw77jw++QJ2lL9N+dDpdQiAB/c/B2wDh0QPFHbkBVrXnwNugvrbJFk1gK2SsVjwWReg==",
+            "cpu": [
+                "arm64"
+            ],
+            "license": "MIT",
+            "optional": true,
+            "os": [
+                "android"
+            ],
+            "engines": {
+                "node": ">= 20"
+            }
+        },
+        "node_modules/@tailwindcss/oxide-darwin-arm64": {
+            "version": "4.2.1",
+            "resolved": "http://localhost:4873/@tailwindcss/oxide-darwin-arm64/-/oxide-darwin-arm64-4.2.1.tgz",
+            "integrity": "sha512-q/LHkOstoJ7pI1J0q6djesLzRvQSIfEto148ppAd+BVQK0JYjQIFSK3JgYZJa+Yzi0DDa52ZsQx2rqytBnf8Hw==",
+            "cpu": [
+                "arm64"
+            ],
+            "license": "MIT",
+            "optional": true,
+            "os": [
+                "darwin"
+            ],
+            "engines": {
+                "node": ">= 20"
+            }
+        },
+        "node_modules/@tailwindcss/oxide-darwin-x64": {
+            "version": "4.2.1",
+            "resolved": "http://localhost:4873/@tailwindcss/oxide-darwin-x64/-/oxide-darwin-x64-4.2.1.tgz",
+            "integrity": "sha512-/f/ozlaXGY6QLbpvd/kFTro2l18f7dHKpB+ieXz+Cijl4Mt9AI2rTrpq7V+t04nK+j9XBQHnSMdeQRhbGyt6fw==",
+            "cpu": [
+                "x64"
+            ],
+            "license": "MIT",
+            "optional": true,
+            "os": [
+                "darwin"
+            ],
+            "engines": {
+                "node": ">= 20"
+            }
+        },
+        "node_modules/@tailwindcss/oxide-freebsd-x64": {
+            "version": "4.2.1",
+            "resolved": "http://localhost:4873/@tailwindcss/oxide-freebsd-x64/-/oxide-freebsd-x64-4.2.1.tgz",
+            "integrity": "sha512-5e/AkgYJT/cpbkys/OU2Ei2jdETCLlifwm7ogMC7/hksI2fC3iiq6OcXwjibcIjPung0kRtR3TxEITkqgn0TcA==",
+            "cpu": [
+                "x64"
+            ],
+            "license": "MIT",
+            "optional": true,
+            "os": [
+                "freebsd"
+            ],
+            "engines": {
+                "node": ">= 20"
+            }
+        },
+        "node_modules/@tailwindcss/oxide-linux-arm-gnueabihf": {
+            "version": "4.2.1",
+            "resolved": "http://localhost:4873/@tailwindcss/oxide-linux-arm-gnueabihf/-/oxide-linux-arm-gnueabihf-4.2.1.tgz",
+            "integrity": "sha512-Uny1EcVTTmerCKt/1ZuKTkb0x8ZaiuYucg2/kImO5A5Y/kBz41/+j0gxUZl+hTF3xkWpDmHX+TaWhOtba2Fyuw==",
+            "cpu": [
+                "arm"
+            ],
+            "license": "MIT",
+            "optional": true,
+            "os": [
+                "linux"
+            ],
+            "engines": {
+                "node": ">= 20"
+            }
+        },
+        "node_modules/@tailwindcss/oxide-linux-arm64-gnu": {
+            "version": "4.2.1",
+            "resolved": "http://localhost:4873/@tailwindcss/oxide-linux-arm64-gnu/-/oxide-linux-arm64-gnu-4.2.1.tgz",
+            "integrity": "sha512-CTrwomI+c7n6aSSQlsPL0roRiNMDQ/YzMD9EjcR+H4f0I1SQ8QqIuPnsVp7QgMkC1Qi8rtkekLkOFjo7OlEFRQ==",
+            "cpu": [
+                "arm64"
+            ],
+            "license": "MIT",
+            "optional": true,
+            "os": [
+                "linux"
+            ],
+            "engines": {
+                "node": ">= 20"
+            }
+        },
+        "node_modules/@tailwindcss/oxide-linux-arm64-musl": {
+            "version": "4.2.1",
+            "resolved": "http://localhost:4873/@tailwindcss/oxide-linux-arm64-musl/-/oxide-linux-arm64-musl-4.2.1.tgz",
+            "integrity": "sha512-WZA0CHRL/SP1TRbA5mp9htsppSEkWuQ4KsSUumYQnyl8ZdT39ntwqmz4IUHGN6p4XdSlYfJwM4rRzZLShHsGAQ==",
+            "cpu": [
+                "arm64"
+            ],
+            "license": "MIT",
+            "optional": true,
+            "os": [
+                "linux"
+            ],
+            "engines": {
+                "node": ">= 20"
+            }
+        },
+        "node_modules/@tailwindcss/oxide-linux-x64-gnu": {
+            "version": "4.2.1",
+            "resolved": "http://localhost:4873/@tailwindcss/oxide-linux-x64-gnu/-/oxide-linux-x64-gnu-4.2.1.tgz",
+            "integrity": "sha512-qMFzxI2YlBOLW5PhblzuSWlWfwLHaneBE0xHzLrBgNtqN6mWfs+qYbhryGSXQjFYB1Dzf5w+LN5qbUTPhW7Y5g==",
+            "cpu": [
+                "x64"
+            ],
+            "license": "MIT",
+            "optional": true,
+            "os": [
+                "linux"
+            ],
+            "engines": {
+                "node": ">= 20"
+            }
+        },
+        "node_modules/@tailwindcss/oxide-linux-x64-musl": {
+            "version": "4.2.1",
+            "resolved": "http://localhost:4873/@tailwindcss/oxide-linux-x64-musl/-/oxide-linux-x64-musl-4.2.1.tgz",
+            "integrity": "sha512-5r1X2FKnCMUPlXTWRYpHdPYUY6a1Ar/t7P24OuiEdEOmms5lyqjDRvVY1yy9Rmioh+AunQ0rWiOTPE8F9A3v5g==",
+            "cpu": [
+                "x64"
+            ],
+            "license": "MIT",
+            "optional": true,
+            "os": [
+                "linux"
+            ],
+            "engines": {
+                "node": ">= 20"
+            }
+        },
+        "node_modules/@tailwindcss/oxide-wasm32-wasi": {
+            "version": "4.2.1",
+            "resolved": "http://localhost:4873/@tailwindcss/oxide-wasm32-wasi/-/oxide-wasm32-wasi-4.2.1.tgz",
+            "integrity": "sha512-MGFB5cVPvshR85MTJkEvqDUnuNoysrsRxd6vnk1Lf2tbiqNlXpHYZqkqOQalydienEWOHHFyyuTSYRsLfxFJ2Q==",
+            "bundleDependencies": [
+                "@napi-rs/wasm-runtime",
+                "@emnapi/core",
+                "@emnapi/runtime",
+                "@tybys/wasm-util",
+                "@emnapi/wasi-threads",
+                "tslib"
+            ],
+            "cpu": [
+                "wasm32"
+            ],
+            "license": "MIT",
+            "optional": true,
+            "dependencies": {
+                "@emnapi/core": "^1.8.1",
+                "@emnapi/runtime": "^1.8.1",
+                "@emnapi/wasi-threads": "^1.1.0",
+                "@napi-rs/wasm-runtime": "^1.1.1",
+                "@tybys/wasm-util": "^0.10.1",
+                "tslib": "^2.8.1"
+            },
+            "engines": {
+                "node": ">=14.0.0"
+            }
+        },
+        "node_modules/@tailwindcss/oxide-win32-arm64-msvc": {
+            "version": "4.2.1",
+            "resolved": "http://localhost:4873/@tailwindcss/oxide-win32-arm64-msvc/-/oxide-win32-arm64-msvc-4.2.1.tgz",
+            "integrity": "sha512-YlUEHRHBGnCMh4Nj4GnqQyBtsshUPdiNroZj8VPkvTZSoHsilRCwXcVKnG9kyi0ZFAS/3u+qKHBdDc81SADTRA==",
+            "cpu": [
+                "arm64"
+            ],
+            "license": "MIT",
+            "optional": true,
+            "os": [
+                "win32"
+            ],
+            "engines": {
+                "node": ">= 20"
+            }
+        },
+        "node_modules/@tailwindcss/oxide-win32-x64-msvc": {
+            "version": "4.2.1",
+            "resolved": "http://localhost:4873/@tailwindcss/oxide-win32-x64-msvc/-/oxide-win32-x64-msvc-4.2.1.tgz",
+            "integrity": "sha512-rbO34G5sMWWyrN/idLeVxAZgAKWrn5LiR3/I90Q9MkA67s6T1oB0xtTe+0heoBvHSpbU9Mk7i6uwJnpo4u21XQ==",
+            "cpu": [
+                "x64"
+            ],
+            "license": "MIT",
+            "optional": true,
+            "os": [
+                "win32"
+            ],
+            "engines": {
+                "node": ">= 20"
+            }
+        },
+        "node_modules/@tailwindcss/postcss": {
+            "version": "4.2.1",
+            "resolved": "http://localhost:4873/@tailwindcss/postcss/-/postcss-4.2.1.tgz",
+            "integrity": "sha512-OEwGIBnXnj7zJeonOh6ZG9woofIjGrd2BORfvE5p9USYKDCZoQmfqLcfNiRWoJlRWLdNPn2IgVZuWAOM4iTYMw==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "@alloc/quick-lru": "^5.2.0",
+                "@tailwindcss/node": "4.2.1",
+                "@tailwindcss/oxide": "4.2.1",
+                "postcss": "^8.5.6",
+                "tailwindcss": "4.2.1"
+            }
+        },
+        "node_modules/@tailwindcss/typography": {
+            "version": "0.5.19",
+            "resolved": "http://localhost:4873/@tailwindcss/typography/-/typography-0.5.19.tgz",
+            "integrity": "sha512-w31dd8HOx3k9vPtcQh5QHP9GwKcgbMp87j58qi6xgiBnFFtKEAgCWnDw4qUT8aHwkCp8bKvb/KGKWWHedP0AAg==",
+            "license": "MIT",
+            "dependencies": {
+                "postcss-selector-parser": "6.0.10"
+            },
+            "peerDependencies": {
+                "tailwindcss": ">=3.0.0 || insiders || >=4.0.0-alpha.20 || >=4.0.0-beta.1"
+            }
+        },
+        "node_modules/@tailwindcss/vite": {
+            "version": "4.2.1",
+            "resolved": "http://localhost:4873/@tailwindcss/vite/-/vite-4.2.1.tgz",
+            "integrity": "sha512-TBf2sJjYeb28jD2U/OhwdW0bbOsxkWPwQ7SrqGf9sVcoYwZj7rkXljroBO9wKBut9XnmQLXanuDUeqQK0lGg/w==",
+            "license": "MIT",
+            "dependencies": {
+                "@tailwindcss/node": "4.2.1",
+                "@tailwindcss/oxide": "4.2.1",
+                "tailwindcss": "4.2.1"
+            },
+            "peerDependencies": {
+                "vite": "^5.2.0 || ^6 || ^7"
+            }
+        },
+        "node_modules/@trivago/prettier-plugin-sort-imports": {
+            "version": "5.2.2",
+            "resolved": "http://localhost:4873/@trivago/prettier-plugin-sort-imports/-/prettier-plugin-sort-imports-5.2.2.tgz",
+            "integrity": "sha512-fYDQA9e6yTNmA13TLVSA+WMQRc5Bn/c0EUBditUHNfMMxN7M82c38b1kEggVE3pLpZ0FwkwJkUEKMiOi52JXFA==",
+            "dev": true,
+            "license": "Apache-2.0",
+            "dependencies": {
+                "@babel/generator": "^7.26.5",
+                "@babel/parser": "^7.26.7",
+                "@babel/traverse": "^7.26.7",
+                "@babel/types": "^7.26.7",
+                "javascript-natural-sort": "^0.7.1",
+                "lodash": "^4.17.21"
+            },
+            "engines": {
+                "node": ">18.12"
+            },
+            "peerDependencies": {
+                "@vue/compiler-sfc": "3.x",
+                "prettier": "2.x - 3.x",
+                "prettier-plugin-svelte": "3.x",
+                "svelte": "4.x || 5.x"
+            },
+            "peerDependenciesMeta": {
+                "@vue/compiler-sfc": {
+                    "optional": true
+                },
+                "prettier-plugin-svelte": {
+                    "optional": true
+                },
+                "svelte": {
+                    "optional": true
+                }
+            }
+        },
+        "node_modules/@types/esrecurse": {
+            "version": "4.3.1",
+            "resolved": "http://localhost:4873/@types/esrecurse/-/esrecurse-4.3.1.tgz",
+            "integrity": "sha512-xJBAbDifo5hpffDBuHl0Y8ywswbiAp/Wi7Y/GtAgSlZyIABppyurxVueOPE8LUQOxdlgi6Zqce7uoEpqNTeiUw==",
+            "dev": true,
+            "license": "MIT",
+            "peer": true
+        },
+        "node_modules/@types/estree": {
+            "version": "1.0.8",
+            "resolved": "http://localhost:4873/@types/estree/-/estree-1.0.8.tgz",
+            "integrity": "sha512-dWHzHa2WqEXI/O1E9OjrocMTKJl2mSrEolh1Iomrv6U+JuNwaHXsXx9bLu5gG7BUWFIN0skIQJQ/L1rIex4X6w==",
+            "license": "MIT"
+        },
+        "node_modules/@types/json-schema": {
+            "version": "7.0.15",
+            "resolved": "http://localhost:4873/@types/json-schema/-/json-schema-7.0.15.tgz",
+            "integrity": "sha512-5+fP8P8MFNC+AyZCDxrB2pkZFPGzqQWUzpSeuuVLvm8VMcorNYavBqoFcxK8bQz4Qsbn4oUEEem4wDLfcysGHA==",
+            "dev": true,
+            "license": "MIT",
+            "peer": true
+        },
+        "node_modules/@types/node": {
+            "version": "24.12.0",
+            "resolved": "http://localhost:4873/@types/node/-/node-24.12.0.tgz",
+            "integrity": "sha512-GYDxsZi3ChgmckRT9HPU0WEhKLP08ev/Yfcq2AstjrDASOYCSXeyjDsHg4v5t4jOj7cyDX3vmprafKlWIG9MXQ==",
+            "devOptional": true,
+            "license": "MIT",
+            "dependencies": {
+                "undici-types": "~7.16.0"
+            }
+        },
+        "node_modules/@types/react": {
+            "version": "19.2.14",
+            "resolved": "http://localhost:4873/@types/react/-/react-19.2.14.tgz",
+            "integrity": "sha512-ilcTH/UniCkMdtexkoCN0bI7pMcJDvmQFPvuPvmEaYA/NSfFTAgdUSLAoVjaRJm7+6PvcM+q1zYOwS4wTYMF9w==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "csstype": "^3.2.2"
+            }
+        },
+        "node_modules/@types/react-dom": {
+            "version": "19.2.3",
+            "resolved": "http://localhost:4873/@types/react-dom/-/react-dom-19.2.3.tgz",
+            "integrity": "sha512-jp2L/eY6fn+KgVVQAOqYItbF0VY/YApe5Mz2F0aykSO8gx31bYCZyvSeYxCHKvzHG5eZjc+zyaS5BrBWya2+kQ==",
+            "dev": true,
+            "license": "MIT",
+            "peerDependencies": {
+                "@types/react": "^19.2.0"
+            }
+        },
+        "node_modules/@typescript-eslint/eslint-plugin": {
+            "version": "8.57.0",
+            "resolved": "http://localhost:4873/@typescript-eslint/eslint-plugin/-/eslint-plugin-8.57.0.tgz",
+            "integrity": "sha512-qeu4rTHR3/IaFORbD16gmjq9+rEs9fGKdX0kF6BKSfi+gCuG3RCKLlSBYzn/bGsY9Tj7KE/DAQStbp8AHJGHEQ==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "@eslint-community/regexpp": "^4.12.2",
+                "@typescript-eslint/scope-manager": "8.57.0",
+                "@typescript-eslint/type-utils": "8.57.0",
+                "@typescript-eslint/utils": "8.57.0",
+                "@typescript-eslint/visitor-keys": "8.57.0",
+                "ignore": "^7.0.5",
+                "natural-compare": "^1.4.0",
+                "ts-api-utils": "^2.4.0"
+            },
+            "engines": {
+                "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+            },
+            "funding": {
+                "type": "opencollective",
+                "url": "https://opencollective.com/typescript-eslint"
+            },
+            "peerDependencies": {
+                "@typescript-eslint/parser": "^8.57.0",
+                "eslint": "^8.57.0 || ^9.0.0 || ^10.0.0",
+                "typescript": ">=4.8.4 <6.0.0"
+            }
+        },
+        "node_modules/@typescript-eslint/eslint-plugin/node_modules/ignore": {
+            "version": "7.0.5",
+            "resolved": "http://localhost:4873/ignore/-/ignore-7.0.5.tgz",
+            "integrity": "sha512-Hs59xBNfUIunMFgWAbGX5cq6893IbWg4KnrjbYwX3tx0ztorVgTDA6B2sxf8ejHJ4wz8BqGUMYlnzNBer5NvGg==",
+            "dev": true,
+            "license": "MIT",
+            "engines": {
+                "node": ">= 4"
+            }
+        },
+        "node_modules/@typescript-eslint/parser": {
+            "version": "8.57.0",
+            "resolved": "http://localhost:4873/@typescript-eslint/parser/-/parser-8.57.0.tgz",
+            "integrity": "sha512-XZzOmihLIr8AD1b9hL9ccNMzEMWt/dE2u7NyTY9jJG6YNiNthaD5XtUHVF2uCXZ15ng+z2hT3MVuxnUYhq6k1g==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "@typescript-eslint/scope-manager": "8.57.0",
+                "@typescript-eslint/types": "8.57.0",
+                "@typescript-eslint/typescript-estree": "8.57.0",
+                "@typescript-eslint/visitor-keys": "8.57.0",
+                "debug": "^4.4.3"
+            },
+            "engines": {
+                "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+            },
+            "funding": {
+                "type": "opencollective",
+                "url": "https://opencollective.com/typescript-eslint"
+            },
+            "peerDependencies": {
+                "eslint": "^8.57.0 || ^9.0.0 || ^10.0.0",
+                "typescript": ">=4.8.4 <6.0.0"
+            }
+        },
+        "node_modules/@typescript-eslint/project-service": {
+            "version": "8.57.0",
+            "resolved": "http://localhost:4873/@typescript-eslint/project-service/-/project-service-8.57.0.tgz",
+            "integrity": "sha512-pR+dK0BlxCLxtWfaKQWtYr7MhKmzqZxuii+ZjuFlZlIGRZm22HnXFqa2eY+90MUz8/i80YJmzFGDUsi8dMOV5w==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "@typescript-eslint/tsconfig-utils": "^8.57.0",
+                "@typescript-eslint/types": "^8.57.0",
+                "debug": "^4.4.3"
+            },
+            "engines": {
+                "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+            },
+            "funding": {
+                "type": "opencollective",
+                "url": "https://opencollective.com/typescript-eslint"
+            },
+            "peerDependencies": {
+                "typescript": ">=4.8.4 <6.0.0"
+            }
+        },
+        "node_modules/@typescript-eslint/scope-manager": {
+            "version": "8.57.0",
+            "resolved": "http://localhost:4873/@typescript-eslint/scope-manager/-/scope-manager-8.57.0.tgz",
+            "integrity": "sha512-nvExQqAHF01lUM66MskSaZulpPL5pgy5hI5RfrxviLgzZVffB5yYzw27uK/ft8QnKXI2X0LBrHJFr1TaZtAibw==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "@typescript-eslint/types": "8.57.0",
+                "@typescript-eslint/visitor-keys": "8.57.0"
+            },
+            "engines": {
+                "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+            },
+            "funding": {
+                "type": "opencollective",
+                "url": "https://opencollective.com/typescript-eslint"
+            }
+        },
+        "node_modules/@typescript-eslint/tsconfig-utils": {
+            "version": "8.57.0",
+            "resolved": "http://localhost:4873/@typescript-eslint/tsconfig-utils/-/tsconfig-utils-8.57.0.tgz",
+            "integrity": "sha512-LtXRihc5ytjJIQEH+xqjB0+YgsV4/tW35XKX3GTZHpWtcC8SPkT/d4tqdf1cKtesryHm2bgp6l555NYcT2NLvA==",
+            "dev": true,
+            "license": "MIT",
+            "engines": {
+                "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+            },
+            "funding": {
+                "type": "opencollective",
+                "url": "https://opencollective.com/typescript-eslint"
+            },
+            "peerDependencies": {
+                "typescript": ">=4.8.4 <6.0.0"
+            }
+        },
+        "node_modules/@typescript-eslint/type-utils": {
+            "version": "8.57.0",
+            "resolved": "http://localhost:4873/@typescript-eslint/type-utils/-/type-utils-8.57.0.tgz",
+            "integrity": "sha512-yjgh7gmDcJ1+TcEg8x3uWQmn8ifvSupnPfjP21twPKrDP/pTHlEQgmKcitzF/rzPSmv7QjJ90vRpN4U+zoUjwQ==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "@typescript-eslint/types": "8.57.0",
+                "@typescript-eslint/typescript-estree": "8.57.0",
+                "@typescript-eslint/utils": "8.57.0",
+                "debug": "^4.4.3",
+                "ts-api-utils": "^2.4.0"
+            },
+            "engines": {
+                "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+            },
+            "funding": {
+                "type": "opencollective",
+                "url": "https://opencollective.com/typescript-eslint"
+            },
+            "peerDependencies": {
+                "eslint": "^8.57.0 || ^9.0.0 || ^10.0.0",
+                "typescript": ">=4.8.4 <6.0.0"
+            }
+        },
+        "node_modules/@typescript-eslint/types": {
+            "version": "8.57.0",
+            "resolved": "http://localhost:4873/@typescript-eslint/types/-/types-8.57.0.tgz",
+            "integrity": "sha512-dTLI8PEXhjUC7B9Kre+u0XznO696BhXcTlOn0/6kf1fHaQW8+VjJAVHJ3eTI14ZapTxdkOmc80HblPQLaEeJdg==",
+            "dev": true,
+            "license": "MIT",
+            "engines": {
+                "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+            },
+            "funding": {
+                "type": "opencollective",
+                "url": "https://opencollective.com/typescript-eslint"
+            }
+        },
+        "node_modules/@typescript-eslint/typescript-estree": {
+            "version": "8.57.0",
+            "resolved": "http://localhost:4873/@typescript-eslint/typescript-estree/-/typescript-estree-8.57.0.tgz",
+            "integrity": "sha512-m7faHcyVg0BT3VdYTlX8GdJEM7COexXxS6KqGopxdtkQRvBanK377QDHr4W/vIPAR+ah9+B/RclSW5ldVniO1Q==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "@typescript-eslint/project-service": "8.57.0",
+                "@typescript-eslint/tsconfig-utils": "8.57.0",
+                "@typescript-eslint/types": "8.57.0",
+                "@typescript-eslint/visitor-keys": "8.57.0",
+                "debug": "^4.4.3",
+                "minimatch": "^10.2.2",
+                "semver": "^7.7.3",
+                "tinyglobby": "^0.2.15",
+                "ts-api-utils": "^2.4.0"
+            },
+            "engines": {
+                "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+            },
+            "funding": {
+                "type": "opencollective",
+                "url": "https://opencollective.com/typescript-eslint"
+            },
+            "peerDependencies": {
+                "typescript": ">=4.8.4 <6.0.0"
+            }
+        },
+        "node_modules/@typescript-eslint/utils": {
+            "version": "8.57.0",
+            "resolved": "http://localhost:4873/@typescript-eslint/utils/-/utils-8.57.0.tgz",
+            "integrity": "sha512-5iIHvpD3CZe06riAsbNxxreP+MuYgVUsV0n4bwLH//VJmgtt54sQeY2GszntJ4BjYCpMzrfVh2SBnUQTtys2lQ==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "@eslint-community/eslint-utils": "^4.9.1",
+                "@typescript-eslint/scope-manager": "8.57.0",
+                "@typescript-eslint/types": "8.57.0",
+                "@typescript-eslint/typescript-estree": "8.57.0"
+            },
+            "engines": {
+                "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+            },
+            "funding": {
+                "type": "opencollective",
+                "url": "https://opencollective.com/typescript-eslint"
+            },
+            "peerDependencies": {
+                "eslint": "^8.57.0 || ^9.0.0 || ^10.0.0",
+                "typescript": ">=4.8.4 <6.0.0"
+            }
+        },
+        "node_modules/@typescript-eslint/visitor-keys": {
+            "version": "8.57.0",
+            "resolved": "http://localhost:4873/@typescript-eslint/visitor-keys/-/visitor-keys-8.57.0.tgz",
+            "integrity": "sha512-zm6xx8UT/Xy2oSr2ZXD0pZo7Jx2XsCoID2IUh9YSTFRu7z+WdwYTRk6LhUftm1crwqbuoF6I8zAFeCMw0YjwDg==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "@typescript-eslint/types": "8.57.0",
+                "eslint-visitor-keys": "^5.0.0"
+            },
+            "engines": {
+                "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+            },
+            "funding": {
+                "type": "opencollective",
+                "url": "https://opencollective.com/typescript-eslint"
+            }
+        },
+        "node_modules/@untitledui/file-icons": {
+            "version": "0.0.8",
+            "resolved": "http://localhost:4873/@untitledui/file-icons/-/file-icons-0.0.8.tgz",
+            "integrity": "sha512-lxOp2rreDedjD82SOKoETmCDhm5TckCD3y49EEsuZqxnFES/3bfg9drNiilOCOAuEco7ImvdB4L//I//B93asw==",
+            "license": "MIT",
+            "peerDependencies": {
+                "react": ">= 18"
+            }
+        },
+        "node_modules/@untitledui/icons": {
+            "version": "0.0.21",
+            "resolved": "http://localhost:4873/@untitledui/icons/-/icons-0.0.21.tgz",
+            "integrity": "sha512-+aVWUw/1se9PIJgwMD3qp5ohynGlVNu2oHSLzMwYpiSFp6bFcxv4kUGy685hQXB/hE4WAqnp7dIEVVMD0tfL7w==",
+            "license": "MIT",
+            "peerDependencies": {
+                "react": ">= 16"
+            }
+        },
+        "node_modules/@vitejs/plugin-react-swc": {
+            "version": "4.3.0",
+            "resolved": "http://localhost:4873/@vitejs/plugin-react-swc/-/plugin-react-swc-4.3.0.tgz",
+            "integrity": "sha512-mOkXCII839dHyAt/gpoSlm28JIVDwhZ6tnG6wJxUy2bmOx7UaPjvOyIDf3SFv5s7Eo7HVaq6kRcu6YMEzt5Z7w==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "@rolldown/pluginutils": "1.0.0-rc.7",
+                "@swc/core": "^1.15.11"
+            },
+            "engines": {
+                "node": "^20.19.0 || >=22.12.0"
+            },
+            "peerDependencies": {
+                "vite": "^4 || ^5 || ^6 || ^7 || ^8"
+            }
+        },
+        "node_modules/acorn": {
+            "version": "8.16.0",
+            "resolved": "http://localhost:4873/acorn/-/acorn-8.16.0.tgz",
+            "integrity": "sha512-UVJyE9MttOsBQIDKw1skb9nAwQuR5wuGD3+82K6JgJlm/Y+KI92oNsMNGZCYdDsVtRHSak0pcV5Dno5+4jh9sw==",
+            "dev": true,
+            "license": "MIT",
+            "peer": true,
+            "bin": {
+                "acorn": "bin/acorn"
+            },
+            "engines": {
+                "node": ">=0.4.0"
+            }
+        },
+        "node_modules/acorn-jsx": {
+            "version": "5.3.2",
+            "resolved": "http://localhost:4873/acorn-jsx/-/acorn-jsx-5.3.2.tgz",
+            "integrity": "sha512-rq9s+JNhf0IChjtDXxllJ7g41oZk5SlXtp0LHwyA5cejwn7vKmKp4pPri6YEePv2PU65sAsegbXtIinmDFDXgQ==",
+            "dev": true,
+            "license": "MIT",
+            "peer": true,
+            "peerDependencies": {
+                "acorn": "^6.0.0 || ^7.0.0 || ^8.0.0"
+            }
+        },
+        "node_modules/ajv": {
+            "version": "6.14.0",
+            "resolved": "http://localhost:4873/ajv/-/ajv-6.14.0.tgz",
+            "integrity": "sha512-IWrosm/yrn43eiKqkfkHis7QioDleaXQHdDVPKg0FSwwd/DuvyX79TZnFOnYpB7dcsFAMmtFztZuXPDvSePkFw==",
+            "dev": true,
+            "license": "MIT",
+            "peer": true,
+            "dependencies": {
+                "fast-deep-equal": "^3.1.1",
+                "fast-json-stable-stringify": "^2.0.0",
+                "json-schema-traverse": "^0.4.1",
+                "uri-js": "^4.2.2"
+            },
+            "funding": {
+                "type": "github",
+                "url": "https://github.com/sponsors/epoberezkin"
+            }
+        },
+        "node_modules/balanced-match": {
+            "version": "4.0.4",
+            "resolved": "http://localhost:4873/balanced-match/-/balanced-match-4.0.4.tgz",
+            "integrity": "sha512-BLrgEcRTwX2o6gGxGOCNyMvGSp35YofuYzw9h1IMTRmKqttAZZVU67bdb9Pr2vUHA8+j3i2tJfjO6C6+4myGTA==",
+            "dev": true,
+            "license": "MIT",
+            "engines": {
+                "node": "18 || 20 || >=22"
+            }
+        },
+        "node_modules/brace-expansion": {
+            "version": "5.0.4",
+            "resolved": "http://localhost:4873/brace-expansion/-/brace-expansion-5.0.4.tgz",
+            "integrity": "sha512-h+DEnpVvxmfVefa4jFbCf5HdH5YMDXRsmKflpf1pILZWRFlTbJpxeU55nJl4Smt5HQaGzg1o6RHFPJaOqnmBDg==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "balanced-match": "^4.0.2"
+            },
+            "engines": {
+                "node": "18 || 20 || >=22"
+            }
+        },
+        "node_modules/client-only": {
+            "version": "0.0.1",
+            "resolved": "http://localhost:4873/client-only/-/client-only-0.0.1.tgz",
+            "integrity": "sha512-IV3Ou0jSMzZrd3pZ48nLkT9DA7Ag1pnPzaiQhpW7c3RbcqqzvzzVu+L8gfqMp/8IM2MQtSiqaCxrrcfu8I8rMA==",
+            "license": "MIT"
+        },
+        "node_modules/clsx": {
+            "version": "2.1.1",
+            "resolved": "http://localhost:4873/clsx/-/clsx-2.1.1.tgz",
+            "integrity": "sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA==",
+            "license": "MIT",
+            "engines": {
+                "node": ">=6"
+            }
+        },
+        "node_modules/cookie": {
+            "version": "1.1.1",
+            "resolved": "http://localhost:4873/cookie/-/cookie-1.1.1.tgz",
+            "integrity": "sha512-ei8Aos7ja0weRpFzJnEA9UHJ/7XQmqglbRwnf2ATjcB9Wq874VKH9kfjjirM6UhU2/E5fFYadylyhFldcqSidQ==",
+            "license": "MIT",
+            "engines": {
+                "node": ">=18"
+            },
+            "funding": {
+                "type": "opencollective",
+                "url": "https://opencollective.com/express"
+            }
+        },
+        "node_modules/cross-spawn": {
+            "version": "7.0.6",
+            "resolved": "http://localhost:4873/cross-spawn/-/cross-spawn-7.0.6.tgz",
+            "integrity": "sha512-uV2QOWP2nWzsy2aMp8aRibhi9dlzF5Hgh5SHaB9OiTGEyDTiJJyx0uy51QXdyWbtAHNua4XJzUKca3OzKUd3vA==",
+            "dev": true,
+            "license": "MIT",
+            "peer": true,
+            "dependencies": {
+                "path-key": "^3.1.0",
+                "shebang-command": "^2.0.0",
+                "which": "^2.0.1"
+            },
+            "engines": {
+                "node": ">= 8"
+            }
+        },
+        "node_modules/cssesc": {
+            "version": "3.0.0",
+            "resolved": "http://localhost:4873/cssesc/-/cssesc-3.0.0.tgz",
+            "integrity": "sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg==",
+            "license": "MIT",
+            "bin": {
+                "cssesc": "bin/cssesc"
+            },
+            "engines": {
+                "node": ">=4"
+            }
+        },
+        "node_modules/csstype": {
+            "version": "3.2.3",
+            "resolved": "http://localhost:4873/csstype/-/csstype-3.2.3.tgz",
+            "integrity": "sha512-z1HGKcYy2xA8AGQfwrn0PAy+PB7X/GSj3UVJW9qKyn43xWa+gl5nXmU4qqLMRzWVLFC8KusUX8T/0kCiOYpAIQ==",
+            "dev": true,
+            "license": "MIT"
+        },
+        "node_modules/debug": {
+            "version": "4.4.3",
+            "resolved": "http://localhost:4873/debug/-/debug-4.4.3.tgz",
+            "integrity": "sha512-RGwwWnwQvkVfavKVt22FGLw+xYSdzARwm0ru6DhTVA3umU5hZc28V3kO4stgYryrTlLpuvgI9GiijltAjNbcqA==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "ms": "^2.1.3"
+            },
+            "engines": {
+                "node": ">=6.0"
+            },
+            "peerDependenciesMeta": {
+                "supports-color": {
+                    "optional": true
+                }
+            }
+        },
+        "node_modules/decimal.js": {
+            "version": "10.6.0",
+            "resolved": "http://localhost:4873/decimal.js/-/decimal.js-10.6.0.tgz",
+            "integrity": "sha512-YpgQiITW3JXGntzdUmyUR1V812Hn8T1YVXhCu+wO3OpS4eU9l4YdD3qjyiKdV6mvV29zapkMeD390UVEf2lkUg==",
+            "license": "MIT"
+        },
+        "node_modules/deep-is": {
+            "version": "0.1.4",
+            "resolved": "http://localhost:4873/deep-is/-/deep-is-0.1.4.tgz",
+            "integrity": "sha512-oIPzksmTg4/MriiaYGO+okXDT7ztn/w3Eptv/+gSIdMdKsJo0u4CfYNFJPy+4SKMuCqGw2wxnA+URMg3t8a/bQ==",
+            "dev": true,
+            "license": "MIT",
+            "peer": true
+        },
+        "node_modules/detect-libc": {
+            "version": "2.1.2",
+            "resolved": "http://localhost:4873/detect-libc/-/detect-libc-2.1.2.tgz",
+            "integrity": "sha512-Btj2BOOO83o3WyH59e8MgXsxEQVcarkUOpEYrubB0urwnN10yQ364rsiByU11nZlqWYZm05i/of7io4mzihBtQ==",
+            "license": "Apache-2.0",
+            "engines": {
+                "node": ">=8"
+            }
+        },
+        "node_modules/enhanced-resolve": {
+            "version": "5.20.0",
+            "resolved": "http://localhost:4873/enhanced-resolve/-/enhanced-resolve-5.20.0.tgz",
+            "integrity": "sha512-/ce7+jQ1PQ6rVXwe+jKEg5hW5ciicHwIQUagZkp6IufBoY3YDgdTTY1azVs0qoRgVmvsNB+rbjLJxDAeHHtwsQ==",
+            "license": "MIT",
+            "dependencies": {
+                "graceful-fs": "^4.2.4",
+                "tapable": "^2.3.0"
+            },
+            "engines": {
+                "node": ">=10.13.0"
+            }
+        },
+        "node_modules/esbuild": {
+            "version": "0.27.4",
+            "resolved": "http://localhost:4873/esbuild/-/esbuild-0.27.4.tgz",
+            "integrity": "sha512-Rq4vbHnYkK5fws5NF7MYTU68FPRE1ajX7heQ/8QXXWqNgqqJ/GkmmyxIzUnf2Sr/bakf8l54716CcMGHYhMrrQ==",
+            "hasInstallScript": true,
+            "license": "MIT",
+            "bin": {
+                "esbuild": "bin/esbuild"
+            },
+            "engines": {
+                "node": ">=18"
+            },
+            "optionalDependencies": {
+                "@esbuild/aix-ppc64": "0.27.4",
+                "@esbuild/android-arm": "0.27.4",
+                "@esbuild/android-arm64": "0.27.4",
+                "@esbuild/android-x64": "0.27.4",
+                "@esbuild/darwin-arm64": "0.27.4",
+                "@esbuild/darwin-x64": "0.27.4",
+                "@esbuild/freebsd-arm64": "0.27.4",
+                "@esbuild/freebsd-x64": "0.27.4",
+                "@esbuild/linux-arm": "0.27.4",
+                "@esbuild/linux-arm64": "0.27.4",
+                "@esbuild/linux-ia32": "0.27.4",
+                "@esbuild/linux-loong64": "0.27.4",
+                "@esbuild/linux-mips64el": "0.27.4",
+                "@esbuild/linux-ppc64": "0.27.4",
+                "@esbuild/linux-riscv64": "0.27.4",
+                "@esbuild/linux-s390x": "0.27.4",
+                "@esbuild/linux-x64": "0.27.4",
+                "@esbuild/netbsd-arm64": "0.27.4",
+                "@esbuild/netbsd-x64": "0.27.4",
+                "@esbuild/openbsd-arm64": "0.27.4",
+                "@esbuild/openbsd-x64": "0.27.4",
+                "@esbuild/openharmony-arm64": "0.27.4",
+                "@esbuild/sunos-x64": "0.27.4",
+                "@esbuild/win32-arm64": "0.27.4",
+                "@esbuild/win32-ia32": "0.27.4",
+                "@esbuild/win32-x64": "0.27.4"
+            }
+        },
+        "node_modules/escape-string-regexp": {
+            "version": "4.0.0",
+            "resolved": "http://localhost:4873/escape-string-regexp/-/escape-string-regexp-4.0.0.tgz",
+            "integrity": "sha512-TtpcNJ3XAzx3Gq8sWRzJaVajRs0uVxA2YAkdb1jm2YkPz4G6egUFAyA3n5vtEIZefPk5Wa4UXbKuS5fKkJWdgA==",
+            "dev": true,
+            "license": "MIT",
+            "peer": true,
+            "engines": {
+                "node": ">=10"
+            },
+            "funding": {
+                "url": "https://github.com/sponsors/sindresorhus"
+            }
+        },
+        "node_modules/eslint": {
+            "version": "10.0.3",
+            "resolved": "http://localhost:4873/eslint/-/eslint-10.0.3.tgz",
+            "integrity": "sha512-COV33RzXZkqhG9P2rZCFl9ZmJ7WL+gQSCRzE7RhkbclbQPtLAWReL7ysA0Sh4c8Im2U9ynybdR56PV0XcKvqaQ==",
+            "dev": true,
+            "license": "MIT",
+            "peer": true,
+            "dependencies": {
+                "@eslint-community/eslint-utils": "^4.8.0",
+                "@eslint-community/regexpp": "^4.12.2",
+                "@eslint/config-array": "^0.23.3",
+                "@eslint/config-helpers": "^0.5.2",
+                "@eslint/core": "^1.1.1",
+                "@eslint/plugin-kit": "^0.6.1",
+                "@humanfs/node": "^0.16.6",
+                "@humanwhocodes/module-importer": "^1.0.1",
+                "@humanwhocodes/retry": "^0.4.2",
+                "@types/estree": "^1.0.6",
+                "ajv": "^6.14.0",
+                "cross-spawn": "^7.0.6",
+                "debug": "^4.3.2",
+                "escape-string-regexp": "^4.0.0",
+                "eslint-scope": "^9.1.2",
+                "eslint-visitor-keys": "^5.0.1",
+                "espree": "^11.1.1",
+                "esquery": "^1.7.0",
+                "esutils": "^2.0.2",
+                "fast-deep-equal": "^3.1.3",
+                "file-entry-cache": "^8.0.0",
+                "find-up": "^5.0.0",
+                "glob-parent": "^6.0.2",
+                "ignore": "^5.2.0",
+                "imurmurhash": "^0.1.4",
+                "is-glob": "^4.0.0",
+                "json-stable-stringify-without-jsonify": "^1.0.1",
+                "minimatch": "^10.2.4",
+                "natural-compare": "^1.4.0",
+                "optionator": "^0.9.3"
+            },
+            "bin": {
+                "eslint": "bin/eslint.js"
+            },
+            "engines": {
+                "node": "^20.19.0 || ^22.13.0 || >=24"
+            },
+            "funding": {
+                "url": "https://eslint.org/donate"
+            },
+            "peerDependencies": {
+                "jiti": "*"
+            },
+            "peerDependenciesMeta": {
+                "jiti": {
+                    "optional": true
+                }
+            }
+        },
+        "node_modules/eslint-scope": {
+            "version": "9.1.2",
+            "resolved": "http://localhost:4873/eslint-scope/-/eslint-scope-9.1.2.tgz",
+            "integrity": "sha512-xS90H51cKw0jltxmvmHy2Iai1LIqrfbw57b79w/J7MfvDfkIkFZ+kj6zC3BjtUwh150HsSSdxXZcsuv72miDFQ==",
+            "dev": true,
+            "license": "BSD-2-Clause",
+            "peer": true,
+            "dependencies": {
+                "@types/esrecurse": "^4.3.1",
+                "@types/estree": "^1.0.8",
+                "esrecurse": "^4.3.0",
+                "estraverse": "^5.2.0"
+            },
+            "engines": {
+                "node": "^20.19.0 || ^22.13.0 || >=24"
+            },
+            "funding": {
+                "url": "https://opencollective.com/eslint"
+            }
+        },
+        "node_modules/eslint-visitor-keys": {
+            "version": "5.0.1",
+            "resolved": "http://localhost:4873/eslint-visitor-keys/-/eslint-visitor-keys-5.0.1.tgz",
+            "integrity": "sha512-tD40eHxA35h0PEIZNeIjkHoDR4YjjJp34biM0mDvplBe//mB+IHCqHDGV7pxF+7MklTvighcCPPZC7ynWyjdTA==",
+            "dev": true,
+            "license": "Apache-2.0",
+            "engines": {
+                "node": "^20.19.0 || ^22.13.0 || >=24"
+            },
+            "funding": {
+                "url": "https://opencollective.com/eslint"
+            }
+        },
+        "node_modules/espree": {
+            "version": "11.2.0",
+            "resolved": "http://localhost:4873/espree/-/espree-11.2.0.tgz",
+            "integrity": "sha512-7p3DrVEIopW1B1avAGLuCSh1jubc01H2JHc8B4qqGblmg5gI9yumBgACjWo4JlIc04ufug4xJ3SQI8HkS/Rgzw==",
+            "dev": true,
+            "license": "BSD-2-Clause",
+            "peer": true,
+            "dependencies": {
+                "acorn": "^8.16.0",
+                "acorn-jsx": "^5.3.2",
+                "eslint-visitor-keys": "^5.0.1"
+            },
+            "engines": {
+                "node": "^20.19.0 || ^22.13.0 || >=24"
+            },
+            "funding": {
+                "url": "https://opencollective.com/eslint"
+            }
+        },
+        "node_modules/esquery": {
+            "version": "1.7.0",
+            "resolved": "http://localhost:4873/esquery/-/esquery-1.7.0.tgz",
+            "integrity": "sha512-Ap6G0WQwcU/LHsvLwON1fAQX9Zp0A2Y6Y/cJBl9r/JbW90Zyg4/zbG6zzKa2OTALELarYHmKu0GhpM5EO+7T0g==",
+            "dev": true,
+            "license": "BSD-3-Clause",
+            "peer": true,
+            "dependencies": {
+                "estraverse": "^5.1.0"
+            },
+            "engines": {
+                "node": ">=0.10"
+            }
+        },
+        "node_modules/esrecurse": {
+            "version": "4.3.0",
+            "resolved": "http://localhost:4873/esrecurse/-/esrecurse-4.3.0.tgz",
+            "integrity": "sha512-KmfKL3b6G+RXvP8N1vr3Tq1kL/oCFgn2NYXEtqP8/L3pKapUA4G8cFVaoF3SU323CD4XypR/ffioHmkti6/Tag==",
+            "dev": true,
+            "license": "BSD-2-Clause",
+            "peer": true,
+            "dependencies": {
+                "estraverse": "^5.2.0"
+            },
+            "engines": {
+                "node": ">=4.0"
+            }
+        },
+        "node_modules/estraverse": {
+            "version": "5.3.0",
+            "resolved": "http://localhost:4873/estraverse/-/estraverse-5.3.0.tgz",
+            "integrity": "sha512-MMdARuVEQziNTeJD8DgMqmhwR11BRQ/cBP+pLtYdSTnf3MIO8fFeiINEbX36ZdNlfU/7A9f3gUw49B3oQsvwBA==",
+            "dev": true,
+            "license": "BSD-2-Clause",
+            "peer": true,
+            "engines": {
+                "node": ">=4.0"
+            }
+        },
+        "node_modules/esutils": {
+            "version": "2.0.3",
+            "resolved": "http://localhost:4873/esutils/-/esutils-2.0.3.tgz",
+            "integrity": "sha512-kVscqXk4OCp68SZ0dkgEKVi6/8ij300KBWTJq32P/dYeWTSwK41WyTxalN1eRmA5Z9UU/LX9D7FWSmV9SAYx6g==",
+            "dev": true,
+            "license": "BSD-2-Clause",
+            "peer": true,
+            "engines": {
+                "node": ">=0.10.0"
+            }
+        },
+        "node_modules/fast-deep-equal": {
+            "version": "3.1.3",
+            "resolved": "http://localhost:4873/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz",
+            "integrity": "sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==",
+            "dev": true,
+            "license": "MIT",
+            "peer": true
+        },
+        "node_modules/fast-json-stable-stringify": {
+            "version": "2.1.0",
+            "resolved": "http://localhost:4873/fast-json-stable-stringify/-/fast-json-stable-stringify-2.1.0.tgz",
+            "integrity": "sha512-lhd/wF+Lk98HZoTCtlVraHtfh5XYijIjalXck7saUtuanSDyLMxnHhSXEDJqHxD7msR8D0uCmqlkwjCV8xvwHw==",
+            "dev": true,
+            "license": "MIT",
+            "peer": true
+        },
+        "node_modules/fast-levenshtein": {
+            "version": "2.0.6",
+            "resolved": "http://localhost:4873/fast-levenshtein/-/fast-levenshtein-2.0.6.tgz",
+            "integrity": "sha512-DCXu6Ifhqcks7TZKY3Hxp3y6qphY5SJZmrWMDrKcERSOXWQdMhU9Ig/PYrzyw/ul9jOIyh0N4M0tbC5hodg8dw==",
+            "dev": true,
+            "license": "MIT",
+            "peer": true
+        },
+        "node_modules/fdir": {
+            "version": "6.5.0",
+            "resolved": "http://localhost:4873/fdir/-/fdir-6.5.0.tgz",
+            "integrity": "sha512-tIbYtZbucOs0BRGqPJkshJUYdL+SDH7dVM8gjy+ERp3WAUjLEFJE+02kanyHtwjWOnwrKYBiwAmM0p4kLJAnXg==",
+            "license": "MIT",
+            "engines": {
+                "node": ">=12.0.0"
+            },
+            "peerDependencies": {
+                "picomatch": "^3 || ^4"
+            },
+            "peerDependenciesMeta": {
+                "picomatch": {
+                    "optional": true
+                }
+            }
+        },
+        "node_modules/file-entry-cache": {
+            "version": "8.0.0",
+            "resolved": "http://localhost:4873/file-entry-cache/-/file-entry-cache-8.0.0.tgz",
+            "integrity": "sha512-XXTUwCvisa5oacNGRP9SfNtYBNAMi+RPwBFmblZEF7N7swHYQS6/Zfk7SRwx4D5j3CH211YNRco1DEMNVfZCnQ==",
+            "dev": true,
+            "license": "MIT",
+            "peer": true,
+            "dependencies": {
+                "flat-cache": "^4.0.0"
+            },
+            "engines": {
+                "node": ">=16.0.0"
+            }
+        },
+        "node_modules/find-up": {
+            "version": "5.0.0",
+            "resolved": "http://localhost:4873/find-up/-/find-up-5.0.0.tgz",
+            "integrity": "sha512-78/PXT1wlLLDgTzDs7sjq9hzz0vXD+zn+7wypEe4fXQxCmdmqfGsEPQxmiCSQI3ajFV91bVSsvNtrJRiW6nGng==",
+            "dev": true,
+            "license": "MIT",
+            "peer": true,
+            "dependencies": {
+                "locate-path": "^6.0.0",
+                "path-exists": "^4.0.0"
+            },
+            "engines": {
+                "node": ">=10"
+            },
+            "funding": {
+                "url": "https://github.com/sponsors/sindresorhus"
+            }
+        },
+        "node_modules/flat-cache": {
+            "version": "4.0.1",
+            "resolved": "http://localhost:4873/flat-cache/-/flat-cache-4.0.1.tgz",
+            "integrity": "sha512-f7ccFPK3SXFHpx15UIGyRJ/FJQctuKZ0zVuN3frBo4HnK3cay9VEW0R6yPYFHC0AgqhukPzKjq22t5DmAyqGyw==",
+            "dev": true,
+            "license": "MIT",
+            "peer": true,
+            "dependencies": {
+                "flatted": "^3.2.9",
+                "keyv": "^4.5.4"
+            },
+            "engines": {
+                "node": ">=16"
+            }
+        },
+        "node_modules/flatted": {
+            "version": "3.4.1",
+            "resolved": "http://localhost:4873/flatted/-/flatted-3.4.1.tgz",
+            "integrity": "sha512-IxfVbRFVlV8V/yRaGzk0UVIcsKKHMSfYw66T/u4nTwlWteQePsxe//LjudR1AMX4tZW3WFCh3Zqa/sjlqpbURQ==",
+            "dev": true,
+            "license": "ISC",
+            "peer": true
+        },
+        "node_modules/framer-motion": {
+            "version": "12.36.0",
+            "resolved": "http://localhost:4873/framer-motion/-/framer-motion-12.36.0.tgz",
+            "integrity": "sha512-4PqYHAT7gev0ke0wos+PyrcFxI0HScjm3asgU8nSYa8YzJFuwgIvdj3/s3ZaxLq0bUSboIn19A2WS/MHwLCvfw==",
+            "license": "MIT",
+            "dependencies": {
+                "motion-dom": "^12.36.0",
+                "motion-utils": "^12.36.0",
+                "tslib": "^2.4.0"
+            },
+            "peerDependencies": {
+                "@emotion/is-prop-valid": "*",
+                "react": "^18.0.0 || ^19.0.0",
+                "react-dom": "^18.0.0 || ^19.0.0"
+            },
+            "peerDependenciesMeta": {
+                "@emotion/is-prop-valid": {
+                    "optional": true
+                },
+                "react": {
+                    "optional": true
+                },
+                "react-dom": {
+                    "optional": true
+                }
+            }
+        },
+        "node_modules/fsevents": {
+            "version": "2.3.3",
+            "resolved": "http://localhost:4873/fsevents/-/fsevents-2.3.3.tgz",
+            "integrity": "sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==",
+            "hasInstallScript": true,
+            "license": "MIT",
+            "optional": true,
+            "os": [
+                "darwin"
+            ],
+            "engines": {
+                "node": "^8.16.0 || ^10.6.0 || >=11.0.0"
+            }
+        },
+        "node_modules/glob-parent": {
+            "version": "6.0.2",
+            "resolved": "http://localhost:4873/glob-parent/-/glob-parent-6.0.2.tgz",
+            "integrity": "sha512-XxwI8EOhVQgWp6iDL+3b0r86f4d6AX6zSU55HfB4ydCEuXLXc5FcYeOu+nnGftS4TEju/11rt4KJPTMgbfmv4A==",
+            "dev": true,
+            "license": "ISC",
+            "peer": true,
+            "dependencies": {
+                "is-glob": "^4.0.3"
+            },
+            "engines": {
+                "node": ">=10.13.0"
+            }
+        },
+        "node_modules/globals": {
+            "version": "16.5.0",
+            "resolved": "http://localhost:4873/globals/-/globals-16.5.0.tgz",
+            "integrity": "sha512-c/c15i26VrJ4IRt5Z89DnIzCGDn9EcebibhAOjw5ibqEHsE1wLUgkPn9RDmNcUKyU87GeaL633nyJ+pplFR2ZQ==",
+            "dev": true,
+            "license": "MIT",
+            "engines": {
+                "node": ">=18"
+            },
+            "funding": {
+                "url": "https://github.com/sponsors/sindresorhus"
+            }
+        },
+        "node_modules/graceful-fs": {
+            "version": "4.2.11",
+            "resolved": "http://localhost:4873/graceful-fs/-/graceful-fs-4.2.11.tgz",
+            "integrity": "sha512-RbJ5/jmFcNNCcDV5o9eTnBLJ/HszWV0P73bc+Ff4nS/rJj+YaS6IGyiOL0VoBYX+l1Wrl3k63h/KrH+nhJ0XvQ==",
+            "license": "ISC"
+        },
+        "node_modules/ignore": {
+            "version": "5.3.2",
+            "resolved": "http://localhost:4873/ignore/-/ignore-5.3.2.tgz",
+            "integrity": "sha512-hsBTNUqQTDwkWtcdYI2i06Y/nUBEsNEDJKjWdigLvegy8kDuJAS8uRlpkkcQpyEXL0Z/pjDy5HBmMjRCJ2gq+g==",
+            "dev": true,
+            "license": "MIT",
+            "peer": true,
+            "engines": {
+                "node": ">= 4"
+            }
+        },
+        "node_modules/imurmurhash": {
+            "version": "0.1.4",
+            "resolved": "http://localhost:4873/imurmurhash/-/imurmurhash-0.1.4.tgz",
+            "integrity": "sha512-JmXMZ6wuvDmLiHEml9ykzqO6lwFbof0GG4IkcGaENdCRDDmMVnny7s5HsIgHCbaq0w2MyPhDqkhTUgS2LU2PHA==",
+            "dev": true,
+            "license": "MIT",
+            "peer": true,
+            "engines": {
+                "node": ">=0.8.19"
+            }
+        },
+        "node_modules/input-otp": {
+            "version": "1.4.2",
+            "resolved": "http://localhost:4873/input-otp/-/input-otp-1.4.2.tgz",
+            "integrity": "sha512-l3jWwYNvrEa6NTCt7BECfCm48GvwuZzkoeG3gBL2w4CHeOXW3eKFmf9UNYkNfYc3mxMrthMnxjIE07MT0zLBQA==",
+            "license": "MIT",
+            "peerDependencies": {
+                "react": "^16.8 || ^17.0 || ^18.0 || ^19.0.0 || ^19.0.0-rc",
+                "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0.0 || ^19.0.0-rc"
+            }
+        },
+        "node_modules/intl-messageformat": {
+            "version": "10.7.18",
+            "resolved": "http://localhost:4873/intl-messageformat/-/intl-messageformat-10.7.18.tgz",
+            "integrity": "sha512-m3Ofv/X/tV8Y3tHXLohcuVuhWKo7BBq62cqY15etqmLxg2DZ34AGGgQDeR+SCta2+zICb1NX83af0GJmbQ1++g==",
+            "license": "BSD-3-Clause",
+            "dependencies": {
+                "@formatjs/ecma402-abstract": "2.3.6",
+                "@formatjs/fast-memoize": "2.2.7",
+                "@formatjs/icu-messageformat-parser": "2.11.4",
+                "tslib": "^2.8.0"
+            }
+        },
+        "node_modules/is-extglob": {
+            "version": "2.1.1",
+            "resolved": "http://localhost:4873/is-extglob/-/is-extglob-2.1.1.tgz",
+            "integrity": "sha512-SbKbANkN603Vi4jEZv49LeVJMn4yGwsbzZworEoyEiutsN3nJYdbO36zfhGJ6QEDpOZIFkDtnq5JRxmvl3jsoQ==",
+            "dev": true,
+            "license": "MIT",
+            "peer": true,
+            "engines": {
+                "node": ">=0.10.0"
+            }
+        },
+        "node_modules/is-glob": {
+            "version": "4.0.3",
+            "resolved": "http://localhost:4873/is-glob/-/is-glob-4.0.3.tgz",
+            "integrity": "sha512-xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxhLSnrwRr4elSSg==",
+            "dev": true,
+            "license": "MIT",
+            "peer": true,
+            "dependencies": {
+                "is-extglob": "^2.1.1"
+            },
+            "engines": {
+                "node": ">=0.10.0"
+            }
+        },
+        "node_modules/isexe": {
+            "version": "2.0.0",
+            "resolved": "http://localhost:4873/isexe/-/isexe-2.0.0.tgz",
+            "integrity": "sha512-RHxMLp9lnKHGHRng9QFhRCMbYAcVpn69smSGcq3f36xjgVVWThj4qqLbTLlq7Ssj8B+fIQ1EuCEGI2lKsyQeIw==",
+            "dev": true,
+            "license": "ISC",
+            "peer": true
+        },
+        "node_modules/javascript-natural-sort": {
+            "version": "0.7.1",
+            "resolved": "http://localhost:4873/javascript-natural-sort/-/javascript-natural-sort-0.7.1.tgz",
+            "integrity": "sha512-nO6jcEfZWQXDhOiBtG2KvKyEptz7RVbpGP4vTD2hLBdmNQSsCiicO2Ioinv6UI4y9ukqnBpy+XZ9H6uLNgJTlw==",
+            "dev": true,
+            "license": "MIT"
+        },
+        "node_modules/jiti": {
+            "version": "2.6.1",
+            "resolved": "http://localhost:4873/jiti/-/jiti-2.6.1.tgz",
+            "integrity": "sha512-ekilCSN1jwRvIbgeg/57YFh8qQDNbwDb9xT/qu2DAHbFFZUicIl4ygVaAvzveMhMVr3LnpSKTNnwt8PoOfmKhQ==",
+            "license": "MIT",
+            "bin": {
+                "jiti": "lib/jiti-cli.mjs"
+            }
+        },
+        "node_modules/js-tokens": {
+            "version": "4.0.0",
+            "resolved": "http://localhost:4873/js-tokens/-/js-tokens-4.0.0.tgz",
+            "integrity": "sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==",
+            "dev": true,
+            "license": "MIT"
+        },
+        "node_modules/jsesc": {
+            "version": "3.1.0",
+            "resolved": "http://localhost:4873/jsesc/-/jsesc-3.1.0.tgz",
+            "integrity": "sha512-/sM3dO2FOzXjKQhJuo0Q173wf2KOo8t4I8vHy6lF9poUp7bKT0/NHE8fPX23PwfhnykfqnC2xRxOnVw5XuGIaA==",
+            "dev": true,
+            "license": "MIT",
+            "bin": {
+                "jsesc": "bin/jsesc"
+            },
+            "engines": {
+                "node": ">=6"
+            }
+        },
+        "node_modules/json-buffer": {
+            "version": "3.0.1",
+            "resolved": "http://localhost:4873/json-buffer/-/json-buffer-3.0.1.tgz",
+            "integrity": "sha512-4bV5BfR2mqfQTJm+V5tPPdf+ZpuhiIvTuAB5g8kcrXOZpTT/QwwVRWBywX1ozr6lEuPdbHxwaJlm9G6mI2sfSQ==",
+            "dev": true,
+            "license": "MIT",
+            "peer": true
+        },
+        "node_modules/json-schema-traverse": {
+            "version": "0.4.1",
+            "resolved": "http://localhost:4873/json-schema-traverse/-/json-schema-traverse-0.4.1.tgz",
+            "integrity": "sha512-xbbCH5dCYU5T8LcEhhuh7HJ88HXuW3qsI3Y0zOZFKfZEHcpWiHU/Jxzk629Brsab/mMiHQti9wMP+845RPe3Vg==",
+            "dev": true,
+            "license": "MIT",
+            "peer": true
+        },
+        "node_modules/json-stable-stringify-without-jsonify": {
+            "version": "1.0.1",
+            "resolved": "http://localhost:4873/json-stable-stringify-without-jsonify/-/json-stable-stringify-without-jsonify-1.0.1.tgz",
+            "integrity": "sha512-Bdboy+l7tA3OGW6FjyFHWkP5LuByj1Tk33Ljyq0axyzdk9//JSi2u3fP1QSmd1KNwq6VOKYGlAu87CisVir6Pw==",
+            "dev": true,
+            "license": "MIT",
+            "peer": true
+        },
+        "node_modules/keyv": {
+            "version": "4.5.4",
+            "resolved": "http://localhost:4873/keyv/-/keyv-4.5.4.tgz",
+            "integrity": "sha512-oxVHkHR/EJf2CNXnWxRLW6mg7JyCCUcG0DtEGmL2ctUo1PNTin1PUil+r/+4r5MpVgC/fn1kjsx7mjSujKqIpw==",
+            "dev": true,
+            "license": "MIT",
+            "peer": true,
+            "dependencies": {
+                "json-buffer": "3.0.1"
+            }
+        },
+        "node_modules/levn": {
+            "version": "0.4.1",
+            "resolved": "http://localhost:4873/levn/-/levn-0.4.1.tgz",
+            "integrity": "sha512-+bT2uH4E5LGE7h/n3evcS/sQlJXCpIp6ym8OWJ5eV6+67Dsql/LaaT7qJBAt2rzfoa/5QBGBhxDix1dMt2kQKQ==",
+            "dev": true,
+            "license": "MIT",
+            "peer": true,
+            "dependencies": {
+                "prelude-ls": "^1.2.1",
+                "type-check": "~0.4.0"
+            },
+            "engines": {
+                "node": ">= 0.8.0"
+            }
+        },
+        "node_modules/lightningcss": {
+            "version": "1.31.1",
+            "resolved": "http://localhost:4873/lightningcss/-/lightningcss-1.31.1.tgz",
+            "integrity": "sha512-l51N2r93WmGUye3WuFoN5k10zyvrVs0qfKBhyC5ogUQ6Ew6JUSswh78mbSO+IU3nTWsyOArqPCcShdQSadghBQ==",
+            "license": "MPL-2.0",
+            "dependencies": {
+                "detect-libc": "^2.0.3"
+            },
+            "engines": {
+                "node": ">= 12.0.0"
+            },
+            "funding": {
+                "type": "opencollective",
+                "url": "https://opencollective.com/parcel"
+            },
+            "optionalDependencies": {
+                "lightningcss-android-arm64": "1.31.1",
+                "lightningcss-darwin-arm64": "1.31.1",
+                "lightningcss-darwin-x64": "1.31.1",
+                "lightningcss-freebsd-x64": "1.31.1",
+                "lightningcss-linux-arm-gnueabihf": "1.31.1",
+                "lightningcss-linux-arm64-gnu": "1.31.1",
+                "lightningcss-linux-arm64-musl": "1.31.1",
+                "lightningcss-linux-x64-gnu": "1.31.1",
+                "lightningcss-linux-x64-musl": "1.31.1",
+                "lightningcss-win32-arm64-msvc": "1.31.1",
+                "lightningcss-win32-x64-msvc": "1.31.1"
+            }
+        },
+        "node_modules/lightningcss-android-arm64": {
+            "version": "1.31.1",
+            "resolved": "http://localhost:4873/lightningcss-android-arm64/-/lightningcss-android-arm64-1.31.1.tgz",
+            "integrity": "sha512-HXJF3x8w9nQ4jbXRiNppBCqeZPIAfUo8zE/kOEGbW5NZvGc/K7nMxbhIr+YlFlHW5mpbg/YFPdbnCh1wAXCKFg==",
+            "cpu": [
+                "arm64"
+            ],
+            "license": "MPL-2.0",
+            "optional": true,
+            "os": [
+                "android"
+            ],
+            "engines": {
+                "node": ">= 12.0.0"
+            },
+            "funding": {
+                "type": "opencollective",
+                "url": "https://opencollective.com/parcel"
+            }
+        },
+        "node_modules/lightningcss-darwin-arm64": {
+            "version": "1.31.1",
+            "resolved": "http://localhost:4873/lightningcss-darwin-arm64/-/lightningcss-darwin-arm64-1.31.1.tgz",
+            "integrity": "sha512-02uTEqf3vIfNMq3h/z2cJfcOXnQ0GRwQrkmPafhueLb2h7mqEidiCzkE4gBMEH65abHRiQvhdcQ+aP0D0g67sg==",
+            "cpu": [
+                "arm64"
+            ],
+            "license": "MPL-2.0",
+            "optional": true,
+            "os": [
+                "darwin"
+            ],
+            "engines": {
+                "node": ">= 12.0.0"
+            },
+            "funding": {
+                "type": "opencollective",
+                "url": "https://opencollective.com/parcel"
+            }
+        },
+        "node_modules/lightningcss-darwin-x64": {
+            "version": "1.31.1",
+            "resolved": "http://localhost:4873/lightningcss-darwin-x64/-/lightningcss-darwin-x64-1.31.1.tgz",
+            "integrity": "sha512-1ObhyoCY+tGxtsz1lSx5NXCj3nirk0Y0kB/g8B8DT+sSx4G9djitg9ejFnjb3gJNWo7qXH4DIy2SUHvpoFwfTA==",
+            "cpu": [
+                "x64"
+            ],
+            "license": "MPL-2.0",
+            "optional": true,
+            "os": [
+                "darwin"
+            ],
+            "engines": {
+                "node": ">= 12.0.0"
+            },
+            "funding": {
+                "type": "opencollective",
+                "url": "https://opencollective.com/parcel"
+            }
+        },
+        "node_modules/lightningcss-freebsd-x64": {
+            "version": "1.31.1",
+            "resolved": "http://localhost:4873/lightningcss-freebsd-x64/-/lightningcss-freebsd-x64-1.31.1.tgz",
+            "integrity": "sha512-1RINmQKAItO6ISxYgPwszQE1BrsVU5aB45ho6O42mu96UiZBxEXsuQ7cJW4zs4CEodPUioj/QrXW1r9pLUM74A==",
+            "cpu": [
+                "x64"
+            ],
+            "license": "MPL-2.0",
+            "optional": true,
+            "os": [
+                "freebsd"
+            ],
+            "engines": {
+                "node": ">= 12.0.0"
+            },
+            "funding": {
+                "type": "opencollective",
+                "url": "https://opencollective.com/parcel"
+            }
+        },
+        "node_modules/lightningcss-linux-arm-gnueabihf": {
+            "version": "1.31.1",
+            "resolved": "http://localhost:4873/lightningcss-linux-arm-gnueabihf/-/lightningcss-linux-arm-gnueabihf-1.31.1.tgz",
+            "integrity": "sha512-OOCm2//MZJ87CdDK62rZIu+aw9gBv4azMJuA8/KB74wmfS3lnC4yoPHm0uXZ/dvNNHmnZnB8XLAZzObeG0nS1g==",
+            "cpu": [
+                "arm"
+            ],
+            "license": "MPL-2.0",
+            "optional": true,
+            "os": [
+                "linux"
+            ],
+            "engines": {
+                "node": ">= 12.0.0"
+            },
+            "funding": {
+                "type": "opencollective",
+                "url": "https://opencollective.com/parcel"
+            }
+        },
+        "node_modules/lightningcss-linux-arm64-gnu": {
+            "version": "1.31.1",
+            "resolved": "http://localhost:4873/lightningcss-linux-arm64-gnu/-/lightningcss-linux-arm64-gnu-1.31.1.tgz",
+            "integrity": "sha512-WKyLWztD71rTnou4xAD5kQT+982wvca7E6QoLpoawZ1gP9JM0GJj4Tp5jMUh9B3AitHbRZ2/H3W5xQmdEOUlLg==",
+            "cpu": [
+                "arm64"
+            ],
+            "license": "MPL-2.0",
+            "optional": true,
+            "os": [
+                "linux"
+            ],
+            "engines": {
+                "node": ">= 12.0.0"
+            },
+            "funding": {
+                "type": "opencollective",
+                "url": "https://opencollective.com/parcel"
+            }
+        },
+        "node_modules/lightningcss-linux-arm64-musl": {
+            "version": "1.31.1",
+            "resolved": "http://localhost:4873/lightningcss-linux-arm64-musl/-/lightningcss-linux-arm64-musl-1.31.1.tgz",
+            "integrity": "sha512-mVZ7Pg2zIbe3XlNbZJdjs86YViQFoJSpc41CbVmKBPiGmC4YrfeOyz65ms2qpAobVd7WQsbW4PdsSJEMymyIMg==",
+            "cpu": [
+                "arm64"
+            ],
+            "license": "MPL-2.0",
+            "optional": true,
+            "os": [
+                "linux"
+            ],
+            "engines": {
+                "node": ">= 12.0.0"
+            },
+            "funding": {
+                "type": "opencollective",
+                "url": "https://opencollective.com/parcel"
+            }
+        },
+        "node_modules/lightningcss-linux-x64-gnu": {
+            "version": "1.31.1",
+            "resolved": "http://localhost:4873/lightningcss-linux-x64-gnu/-/lightningcss-linux-x64-gnu-1.31.1.tgz",
+            "integrity": "sha512-xGlFWRMl+0KvUhgySdIaReQdB4FNudfUTARn7q0hh/V67PVGCs3ADFjw+6++kG1RNd0zdGRlEKa+T13/tQjPMA==",
+            "cpu": [
+                "x64"
+            ],
+            "license": "MPL-2.0",
+            "optional": true,
+            "os": [
+                "linux"
+            ],
+            "engines": {
+                "node": ">= 12.0.0"
+            },
+            "funding": {
+                "type": "opencollective",
+                "url": "https://opencollective.com/parcel"
+            }
+        },
+        "node_modules/lightningcss-linux-x64-musl": {
+            "version": "1.31.1",
+            "resolved": "http://localhost:4873/lightningcss-linux-x64-musl/-/lightningcss-linux-x64-musl-1.31.1.tgz",
+            "integrity": "sha512-eowF8PrKHw9LpoZii5tdZwnBcYDxRw2rRCyvAXLi34iyeYfqCQNA9rmUM0ce62NlPhCvof1+9ivRaTY6pSKDaA==",
+            "cpu": [
+                "x64"
+            ],
+            "license": "MPL-2.0",
+            "optional": true,
+            "os": [
+                "linux"
+            ],
+            "engines": {
+                "node": ">= 12.0.0"
+            },
+            "funding": {
+                "type": "opencollective",
+                "url": "https://opencollective.com/parcel"
+            }
+        },
+        "node_modules/lightningcss-win32-arm64-msvc": {
+            "version": "1.31.1",
+            "resolved": "http://localhost:4873/lightningcss-win32-arm64-msvc/-/lightningcss-win32-arm64-msvc-1.31.1.tgz",
+            "integrity": "sha512-aJReEbSEQzx1uBlQizAOBSjcmr9dCdL3XuC/6HLXAxmtErsj2ICo5yYggg1qOODQMtnjNQv2UHb9NpOuFtYe4w==",
+            "cpu": [
+                "arm64"
+            ],
+            "license": "MPL-2.0",
+            "optional": true,
+            "os": [
+                "win32"
+            ],
+            "engines": {
+                "node": ">= 12.0.0"
+            },
+            "funding": {
+                "type": "opencollective",
+                "url": "https://opencollective.com/parcel"
+            }
+        },
+        "node_modules/lightningcss-win32-x64-msvc": {
+            "version": "1.31.1",
+            "resolved": "http://localhost:4873/lightningcss-win32-x64-msvc/-/lightningcss-win32-x64-msvc-1.31.1.tgz",
+            "integrity": "sha512-I9aiFrbd7oYHwlnQDqr1Roz+fTz61oDDJX7n9tYF9FJymH1cIN1DtKw3iYt6b8WZgEjoNwVSncwF4wx/ZedMhw==",
+            "cpu": [
+                "x64"
+            ],
+            "license": "MPL-2.0",
+            "optional": true,
+            "os": [
+                "win32"
+            ],
+            "engines": {
+                "node": ">= 12.0.0"
+            },
+            "funding": {
+                "type": "opencollective",
+                "url": "https://opencollective.com/parcel"
+            }
+        },
+        "node_modules/locate-path": {
+            "version": "6.0.0",
+            "resolved": "http://localhost:4873/locate-path/-/locate-path-6.0.0.tgz",
+            "integrity": "sha512-iPZK6eYjbxRu3uB4/WZ3EsEIMJFMqAoopl3R+zuq0UjcAm/MO6KCweDgPfP3elTztoKP3KtnVHxTn2NHBSDVUw==",
+            "dev": true,
+            "license": "MIT",
+            "peer": true,
+            "dependencies": {
+                "p-locate": "^5.0.0"
+            },
+            "engines": {
+                "node": ">=10"
+            },
+            "funding": {
+                "url": "https://github.com/sponsors/sindresorhus"
+            }
+        },
+        "node_modules/lodash": {
+            "version": "4.17.23",
+            "resolved": "http://localhost:4873/lodash/-/lodash-4.17.23.tgz",
+            "integrity": "sha512-LgVTMpQtIopCi79SJeDiP0TfWi5CNEc/L/aRdTh3yIvmZXTnheWpKjSZhnvMl8iXbC1tFg9gdHHDMLoV7CnG+w==",
+            "dev": true,
+            "license": "MIT"
+        },
+        "node_modules/magic-string": {
+            "version": "0.30.21",
+            "resolved": "http://localhost:4873/magic-string/-/magic-string-0.30.21.tgz",
+            "integrity": "sha512-vd2F4YUyEXKGcLHoq+TEyCjxueSeHnFxyyjNp80yg0XV4vUhnDer/lvvlqM/arB5bXQN5K2/3oinyCRyx8T2CQ==",
+            "license": "MIT",
+            "dependencies": {
+                "@jridgewell/sourcemap-codec": "^1.5.5"
+            }
+        },
+        "node_modules/minimatch": {
+            "version": "10.2.4",
+            "resolved": "http://localhost:4873/minimatch/-/minimatch-10.2.4.tgz",
+            "integrity": "sha512-oRjTw/97aTBN0RHbYCdtF1MQfvusSIBQM0IZEgzl6426+8jSC0nF1a/GmnVLpfB9yyr6g6FTqWqiZVbxrtaCIg==",
+            "dev": true,
+            "license": "BlueOak-1.0.0",
+            "dependencies": {
+                "brace-expansion": "^5.0.2"
+            },
+            "engines": {
+                "node": "18 || 20 || >=22"
+            },
+            "funding": {
+                "url": "https://github.com/sponsors/isaacs"
+            }
+        },
+        "node_modules/motion": {
+            "version": "12.36.0",
+            "resolved": "http://localhost:4873/motion/-/motion-12.36.0.tgz",
+            "integrity": "sha512-5BMQuktYUX8aEByKWYx5tR4X3G08H2OMgp46wTxZ4o7CDDstyy4A0fe9RLNMjZiwvntCWGDvs16sC87/emz4Yw==",
+            "license": "MIT",
+            "dependencies": {
+                "framer-motion": "^12.36.0",
+                "tslib": "^2.4.0"
+            },
+            "peerDependencies": {
+                "@emotion/is-prop-valid": "*",
+                "react": "^18.0.0 || ^19.0.0",
+                "react-dom": "^18.0.0 || ^19.0.0"
+            },
+            "peerDependenciesMeta": {
+                "@emotion/is-prop-valid": {
+                    "optional": true
+                },
+                "react": {
+                    "optional": true
+                },
+                "react-dom": {
+                    "optional": true
+                }
+            }
+        },
+        "node_modules/motion-dom": {
+            "version": "12.36.0",
+            "resolved": "http://localhost:4873/motion-dom/-/motion-dom-12.36.0.tgz",
+            "integrity": "sha512-Ep1pq8P88rGJ75om8lTCA13zqd7ywPGwCqwuWwin6BKc0hMLkVfcS6qKlRqEo2+t0DwoUcgGJfXwaiFn4AOcQA==",
+            "license": "MIT",
+            "dependencies": {
+                "motion-utils": "^12.36.0"
+            }
+        },
+        "node_modules/motion-utils": {
+            "version": "12.36.0",
+            "resolved": "http://localhost:4873/motion-utils/-/motion-utils-12.36.0.tgz",
+            "integrity": "sha512-eHWisygbiwVvf6PZ1vhaHCLamvkSbPIeAYxWUuL3a2PD/TROgE7FvfHWTIH4vMl798QLfMw15nRqIaRDXTlYRg==",
+            "license": "MIT"
+        },
+        "node_modules/ms": {
+            "version": "2.1.3",
+            "resolved": "http://localhost:4873/ms/-/ms-2.1.3.tgz",
+            "integrity": "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==",
+            "dev": true,
+            "license": "MIT"
+        },
+        "node_modules/nanoid": {
+            "version": "3.3.11",
+            "resolved": "http://localhost:4873/nanoid/-/nanoid-3.3.11.tgz",
+            "integrity": "sha512-N8SpfPUnUp1bK+PMYW8qSWdl9U+wwNWI4QKxOYDy9JAro3WMX7p2OeVRF9v+347pnakNevPmiHhNmZ2HbFA76w==",
+            "funding": [
+                {
+                    "type": "github",
+                    "url": "https://github.com/sponsors/ai"
+                }
+            ],
+            "license": "MIT",
+            "bin": {
+                "nanoid": "bin/nanoid.cjs"
+            },
+            "engines": {
+                "node": "^10 || ^12 || ^13.7 || ^14 || >=15.0.1"
+            }
+        },
+        "node_modules/natural-compare": {
+            "version": "1.4.0",
+            "resolved": "http://localhost:4873/natural-compare/-/natural-compare-1.4.0.tgz",
+            "integrity": "sha512-OWND8ei3VtNC9h7V60qff3SVobHr996CTwgxubgyQYEpg290h9J0buyECNNJexkFm5sOajh5G116RYA1c8ZMSw==",
+            "dev": true,
+            "license": "MIT"
+        },
+        "node_modules/optionator": {
+            "version": "0.9.4",
+            "resolved": "http://localhost:4873/optionator/-/optionator-0.9.4.tgz",
+            "integrity": "sha512-6IpQ7mKUxRcZNLIObR0hz7lxsapSSIYNZJwXPGeF0mTVqGKFIXj1DQcMoT22S3ROcLyY/rz0PWaWZ9ayWmad9g==",
+            "dev": true,
+            "license": "MIT",
+            "peer": true,
+            "dependencies": {
+                "deep-is": "^0.1.3",
+                "fast-levenshtein": "^2.0.6",
+                "levn": "^0.4.1",
+                "prelude-ls": "^1.2.1",
+                "type-check": "^0.4.0",
+                "word-wrap": "^1.2.5"
+            },
+            "engines": {
+                "node": ">= 0.8.0"
+            }
+        },
+        "node_modules/p-limit": {
+            "version": "3.1.0",
+            "resolved": "http://localhost:4873/p-limit/-/p-limit-3.1.0.tgz",
+            "integrity": "sha512-TYOanM3wGwNGsZN2cVTYPArw454xnXj5qmWF1bEoAc4+cU/ol7GVh7odevjp1FNHduHc3KZMcFduxU5Xc6uJRQ==",
+            "dev": true,
+            "license": "MIT",
+            "peer": true,
+            "dependencies": {
+                "yocto-queue": "^0.1.0"
+            },
+            "engines": {
+                "node": ">=10"
+            },
+            "funding": {
+                "url": "https://github.com/sponsors/sindresorhus"
+            }
+        },
+        "node_modules/p-locate": {
+            "version": "5.0.0",
+            "resolved": "http://localhost:4873/p-locate/-/p-locate-5.0.0.tgz",
+            "integrity": "sha512-LaNjtRWUBY++zB5nE/NwcaoMylSPk+S+ZHNB1TzdbMJMny6dynpAGt7X/tl/QYq3TIeE6nxHppbo2LGymrG5Pw==",
+            "dev": true,
+            "license": "MIT",
+            "peer": true,
+            "dependencies": {
+                "p-limit": "^3.0.2"
+            },
+            "engines": {
+                "node": ">=10"
+            },
+            "funding": {
+                "url": "https://github.com/sponsors/sindresorhus"
+            }
+        },
+        "node_modules/path-exists": {
+            "version": "4.0.0",
+            "resolved": "http://localhost:4873/path-exists/-/path-exists-4.0.0.tgz",
+            "integrity": "sha512-ak9Qy5Q7jYb2Wwcey5Fpvg2KoAc/ZIhLSLOSBmRmygPsGwkVVt0fZa0qrtMz+m6tJTAHfZQ8FnmB4MG4LWy7/w==",
+            "dev": true,
+            "license": "MIT",
+            "peer": true,
+            "engines": {
+                "node": ">=8"
+            }
+        },
+        "node_modules/path-key": {
+            "version": "3.1.1",
+            "resolved": "http://localhost:4873/path-key/-/path-key-3.1.1.tgz",
+            "integrity": "sha512-ojmeN0qd+y0jszEtoY48r0Peq5dwMEkIlCOu6Q5f41lfkswXuKtYrhgoTpLnyIcHm24Uhqx+5Tqm2InSwLhE6Q==",
+            "dev": true,
+            "license": "MIT",
+            "peer": true,
+            "engines": {
+                "node": ">=8"
+            }
+        },
+        "node_modules/picocolors": {
+            "version": "1.1.1",
+            "resolved": "http://localhost:4873/picocolors/-/picocolors-1.1.1.tgz",
+            "integrity": "sha512-xceH2snhtb5M9liqDsmEw56le376mTZkEX/jEb/RxNFyegNul7eNslCXP9FDj/Lcu0X8KEyMceP2ntpaHrDEVA==",
+            "license": "ISC"
+        },
+        "node_modules/picomatch": {
+            "version": "4.0.3",
+            "resolved": "http://localhost:4873/picomatch/-/picomatch-4.0.3.tgz",
+            "integrity": "sha512-5gTmgEY/sqK6gFXLIsQNH19lWb4ebPDLA4SdLP7dsWkIXHWlG66oPuVvXSGFPppYZz8ZDZq0dYYrbHfBCVUb1Q==",
+            "license": "MIT",
+            "engines": {
+                "node": ">=12"
+            },
+            "funding": {
+                "url": "https://github.com/sponsors/jonschlinkert"
+            }
+        },
+        "node_modules/postcss": {
+            "version": "8.5.8",
+            "resolved": "http://localhost:4873/postcss/-/postcss-8.5.8.tgz",
+            "integrity": "sha512-OW/rX8O/jXnm82Ey1k44pObPtdblfiuWnrd8X7GJ7emImCOstunGbXUpp7HdBrFQX6rJzn3sPT397Wp5aCwCHg==",
+            "funding": [
+                {
+                    "type": "opencollective",
+                    "url": "https://opencollective.com/postcss/"
+                },
+                {
+                    "type": "tidelift",
+                    "url": "https://tidelift.com/funding/github/npm/postcss"
+                },
+                {
+                    "type": "github",
+                    "url": "https://github.com/sponsors/ai"
+                }
+            ],
+            "license": "MIT",
+            "dependencies": {
+                "nanoid": "^3.3.11",
+                "picocolors": "^1.1.1",
+                "source-map-js": "^1.2.1"
+            },
+            "engines": {
+                "node": "^10 || ^12 || >=14"
+            }
+        },
+        "node_modules/postcss-selector-parser": {
+            "version": "6.0.10",
+            "resolved": "http://localhost:4873/postcss-selector-parser/-/postcss-selector-parser-6.0.10.tgz",
+            "integrity": "sha512-IQ7TZdoaqbT+LCpShg46jnZVlhWD2w6iQYAcYXfHARZ7X1t/UGhhceQDs5X0cGqKvYlHNOuv7Oa1xmb0oQuA3w==",
+            "license": "MIT",
+            "dependencies": {
+                "cssesc": "^3.0.0",
+                "util-deprecate": "^1.0.2"
+            },
+            "engines": {
+                "node": ">=4"
+            }
+        },
+        "node_modules/prelude-ls": {
+            "version": "1.2.1",
+            "resolved": "http://localhost:4873/prelude-ls/-/prelude-ls-1.2.1.tgz",
+            "integrity": "sha512-vkcDPrRZo1QZLbn5RLGPpg/WmIQ65qoWWhcGKf/b5eplkkarX0m9z8ppCat4mlOqUsWpyNuYgO3VRyrYHSzX5g==",
+            "dev": true,
+            "license": "MIT",
+            "peer": true,
+            "engines": {
+                "node": ">= 0.8.0"
+            }
+        },
+        "node_modules/prettier": {
+            "version": "3.8.1",
+            "resolved": "http://localhost:4873/prettier/-/prettier-3.8.1.tgz",
+            "integrity": "sha512-UOnG6LftzbdaHZcKoPFtOcCKztrQ57WkHDeRD9t/PTQtmT0NHSeWWepj6pS0z/N7+08BHFDQVUrfmfMRcZwbMg==",
+            "dev": true,
+            "license": "MIT",
+            "bin": {
+                "prettier": "bin/prettier.cjs"
+            },
+            "engines": {
+                "node": ">=14"
+            },
+            "funding": {
+                "url": "https://github.com/prettier/prettier?sponsor=1"
+            }
+        },
+        "node_modules/prettier-plugin-tailwindcss": {
+            "version": "0.6.14",
+            "resolved": "http://localhost:4873/prettier-plugin-tailwindcss/-/prettier-plugin-tailwindcss-0.6.14.tgz",
+            "integrity": "sha512-pi2e/+ZygeIqntN+vC573BcW5Cve8zUB0SSAGxqpB4f96boZF4M3phPVoOFCeypwkpRYdi7+jQ5YJJUwrkGUAg==",
+            "dev": true,
+            "license": "MIT",
+            "engines": {
+                "node": ">=14.21.3"
+            },
+            "peerDependencies": {
+                "@ianvs/prettier-plugin-sort-imports": "*",
+                "@prettier/plugin-hermes": "*",
+                "@prettier/plugin-oxc": "*",
+                "@prettier/plugin-pug": "*",
+                "@shopify/prettier-plugin-liquid": "*",
+                "@trivago/prettier-plugin-sort-imports": "*",
+                "@zackad/prettier-plugin-twig": "*",
+                "prettier": "^3.0",
+                "prettier-plugin-astro": "*",
+                "prettier-plugin-css-order": "*",
+                "prettier-plugin-import-sort": "*",
+                "prettier-plugin-jsdoc": "*",
+                "prettier-plugin-marko": "*",
+                "prettier-plugin-multiline-arrays": "*",
+                "prettier-plugin-organize-attributes": "*",
+                "prettier-plugin-organize-imports": "*",
+                "prettier-plugin-sort-imports": "*",
+                "prettier-plugin-style-order": "*",
+                "prettier-plugin-svelte": "*"
+            },
+            "peerDependenciesMeta": {
+                "@ianvs/prettier-plugin-sort-imports": {
+                    "optional": true
+                },
+                "@prettier/plugin-hermes": {
+                    "optional": true
+                },
+                "@prettier/plugin-oxc": {
+                    "optional": true
+                },
+                "@prettier/plugin-pug": {
+                    "optional": true
+                },
+                "@shopify/prettier-plugin-liquid": {
+                    "optional": true
+                },
+                "@trivago/prettier-plugin-sort-imports": {
+                    "optional": true
+                },
+                "@zackad/prettier-plugin-twig": {
+                    "optional": true
+                },
+                "prettier-plugin-astro": {
+                    "optional": true
+                },
+                "prettier-plugin-css-order": {
+                    "optional": true
+                },
+                "prettier-plugin-import-sort": {
+                    "optional": true
+                },
+                "prettier-plugin-jsdoc": {
+                    "optional": true
+                },
+                "prettier-plugin-marko": {
+                    "optional": true
+                },
+                "prettier-plugin-multiline-arrays": {
+                    "optional": true
+                },
+                "prettier-plugin-organize-attributes": {
+                    "optional": true
+                },
+                "prettier-plugin-organize-imports": {
+                    "optional": true
+                },
+                "prettier-plugin-sort-imports": {
+                    "optional": true
+                },
+                "prettier-plugin-style-order": {
+                    "optional": true
+                },
+                "prettier-plugin-svelte": {
+                    "optional": true
+                }
+            }
+        },
+        "node_modules/punycode": {
+            "version": "2.3.1",
+            "resolved": "http://localhost:4873/punycode/-/punycode-2.3.1.tgz",
+            "integrity": "sha512-vYt7UD1U9Wg6138shLtLOvdAu+8DsC/ilFtEVHcH+wydcSpNE20AfSOduf6MkRFahL5FY7X1oU7nKVZFtfq8Fg==",
+            "dev": true,
+            "license": "MIT",
+            "peer": true,
+            "engines": {
+                "node": ">=6"
+            }
+        },
+        "node_modules/qr-code-styling": {
+            "version": "1.9.2",
+            "resolved": "http://localhost:4873/qr-code-styling/-/qr-code-styling-1.9.2.tgz",
+            "integrity": "sha512-RgJaZJ1/RrXJ6N0j7a+pdw3zMBmzZU4VN2dtAZf8ZggCfRB5stEQ3IoDNGaNhYY3nnZKYlYSLl5YkfWN5dPutg==",
+            "license": "MIT",
+            "dependencies": {
+                "qrcode-generator": "^1.4.4"
+            },
+            "engines": {
+                "node": ">=18.18.0"
+            }
+        },
+        "node_modules/qrcode-generator": {
+            "version": "1.5.2",
+            "resolved": "http://localhost:4873/qrcode-generator/-/qrcode-generator-1.5.2.tgz",
+            "integrity": "sha512-pItrW0Z9HnDBnFmgiNrY1uxRdri32Uh9EjNYLPVC2zZ3ZRIIEqBoDgm4DkvDwNNDHTK7FNkmr8zAa77BYc9xNw==",
+            "license": "MIT"
+        },
+        "node_modules/react": {
+            "version": "19.2.4",
+            "resolved": "http://localhost:4873/react/-/react-19.2.4.tgz",
+            "integrity": "sha512-9nfp2hYpCwOjAN+8TZFGhtWEwgvWHXqESH8qT89AT/lWklpLON22Lc8pEtnpsZz7VmawabSU0gCjnj8aC0euHQ==",
+            "license": "MIT",
+            "engines": {
+                "node": ">=0.10.0"
+            }
+        },
+        "node_modules/react-aria": {
+            "version": "3.47.0",
+            "resolved": "http://localhost:4873/react-aria/-/react-aria-3.47.0.tgz",
+            "integrity": "sha512-nvahimIqdByl/PXk/xPkG30LPRzcin+/Uk0uFfwbbKRRFC9aa22a6BRULZLqVHwa9GaNyKe6CDUxO1Dde4v0kA==",
+            "license": "Apache-2.0",
+            "dependencies": {
+                "@internationalized/string": "^3.2.7",
+                "@react-aria/breadcrumbs": "^3.5.32",
+                "@react-aria/button": "^3.14.5",
+                "@react-aria/calendar": "^3.9.5",
+                "@react-aria/checkbox": "^3.16.5",
+                "@react-aria/color": "^3.1.5",
+                "@react-aria/combobox": "^3.15.0",
+                "@react-aria/datepicker": "^3.16.1",
+                "@react-aria/dialog": "^3.5.34",
+                "@react-aria/disclosure": "^3.1.3",
+                "@react-aria/dnd": "^3.11.6",
+                "@react-aria/focus": "^3.21.5",
+                "@react-aria/gridlist": "^3.14.4",
+                "@react-aria/i18n": "^3.12.16",
+                "@react-aria/interactions": "^3.27.1",
+                "@react-aria/label": "^3.7.25",
+                "@react-aria/landmark": "^3.0.10",
+                "@react-aria/link": "^3.8.9",
+                "@react-aria/listbox": "^3.15.3",
+                "@react-aria/menu": "^3.21.0",
+                "@react-aria/meter": "^3.4.30",
+                "@react-aria/numberfield": "^3.12.5",
+                "@react-aria/overlays": "^3.31.2",
+                "@react-aria/progress": "^3.4.30",
+                "@react-aria/radio": "^3.12.5",
+                "@react-aria/searchfield": "^3.8.12",
+                "@react-aria/select": "^3.17.3",
+                "@react-aria/selection": "^3.27.2",
+                "@react-aria/separator": "^3.4.16",
+                "@react-aria/slider": "^3.8.5",
+                "@react-aria/ssr": "^3.9.10",
+                "@react-aria/switch": "^3.7.11",
+                "@react-aria/table": "^3.17.11",
+                "@react-aria/tabs": "^3.11.1",
+                "@react-aria/tag": "^3.8.1",
+                "@react-aria/textfield": "^3.18.5",
+                "@react-aria/toast": "^3.0.11",
+                "@react-aria/tooltip": "^3.9.2",
+                "@react-aria/tree": "^3.1.7",
+                "@react-aria/utils": "^3.33.1",
+                "@react-aria/visually-hidden": "^3.8.31",
+                "@react-types/shared": "^3.33.1"
+            },
+            "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"
+            }
+        },
+        "node_modules/react-aria-components": {
+            "version": "1.16.0",
+            "resolved": "http://localhost:4873/react-aria-components/-/react-aria-components-1.16.0.tgz",
+            "integrity": "sha512-MjHbTLpMFzzD2Tv5KbeXoZwPczuUWZcRavVvQQlNHRtXHH38D+sToMEYpNeir7Wh3K/XWtzeX3EujfJW6QNkrw==",
+            "license": "Apache-2.0",
+            "dependencies": {
+                "@internationalized/date": "^3.12.0",
+                "@internationalized/string": "^3.2.7",
+                "@react-aria/autocomplete": "3.0.0-rc.6",
+                "@react-aria/collections": "^3.0.3",
+                "@react-aria/dnd": "^3.11.6",
+                "@react-aria/focus": "^3.21.5",
+                "@react-aria/interactions": "^3.27.1",
+                "@react-aria/live-announcer": "^3.4.4",
+                "@react-aria/overlays": "^3.31.2",
+                "@react-aria/ssr": "^3.9.10",
+                "@react-aria/textfield": "^3.18.5",
+                "@react-aria/toolbar": "3.0.0-beta.24",
+                "@react-aria/utils": "^3.33.1",
+                "@react-aria/virtualizer": "^4.1.13",
+                "@react-stately/autocomplete": "3.0.0-beta.4",
+                "@react-stately/layout": "^4.6.0",
+                "@react-stately/selection": "^3.20.9",
+                "@react-stately/table": "^3.15.4",
+                "@react-stately/utils": "^3.11.0",
+                "@react-stately/virtualizer": "^4.4.6",
+                "@react-types/form": "^3.7.18",
+                "@react-types/grid": "^3.3.8",
+                "@react-types/shared": "^3.33.1",
+                "@react-types/table": "^3.13.6",
+                "@swc/helpers": "^0.5.0",
+                "client-only": "^0.0.1",
+                "react-aria": "^3.47.0",
+                "react-stately": "^3.45.0",
+                "use-sync-external-store": "^1.6.0"
+            },
+            "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"
+            }
+        },
+        "node_modules/react-dom": {
+            "version": "19.2.4",
+            "resolved": "http://localhost:4873/react-dom/-/react-dom-19.2.4.tgz",
+            "integrity": "sha512-AXJdLo8kgMbimY95O2aKQqsz2iWi9jMgKJhRBAxECE4IFxfcazB2LmzloIoibJI3C12IlY20+KFaLv+71bUJeQ==",
+            "license": "MIT",
+            "dependencies": {
+                "scheduler": "^0.27.0"
+            },
+            "peerDependencies": {
+                "react": "^19.2.4"
+            }
+        },
+        "node_modules/react-hotkeys-hook": {
+            "version": "5.2.4",
+            "resolved": "http://localhost:4873/react-hotkeys-hook/-/react-hotkeys-hook-5.2.4.tgz",
+            "integrity": "sha512-BgKg+A1+TawkYluh5Bo4cTmcgMN5L29uhJbDUQdHwPX+qgXRjIPYU5kIDHyxnAwCkCBiu9V5OpB2mpyeluVF2A==",
+            "license": "MIT",
+            "peerDependencies": {
+                "react": ">=16.8.0",
+                "react-dom": ">=16.8.0"
+            }
+        },
+        "node_modules/react-router": {
+            "version": "7.13.1",
+            "resolved": "http://localhost:4873/react-router/-/react-router-7.13.1.tgz",
+            "integrity": "sha512-td+xP4X2/6BJvZoX6xw++A2DdEi++YypA69bJUV5oVvqf6/9/9nNlD70YO1e9d3MyamJEBQFEzk6mbfDYbqrSA==",
+            "license": "MIT",
+            "dependencies": {
+                "cookie": "^1.0.1",
+                "set-cookie-parser": "^2.6.0"
+            },
+            "engines": {
+                "node": ">=20.0.0"
+            },
+            "peerDependencies": {
+                "react": ">=18",
+                "react-dom": ">=18"
+            },
+            "peerDependenciesMeta": {
+                "react-dom": {
+                    "optional": true
+                }
+            }
+        },
+        "node_modules/react-stately": {
+            "version": "3.45.0",
+            "resolved": "http://localhost:4873/react-stately/-/react-stately-3.45.0.tgz",
+            "integrity": "sha512-G3bYr0BIiookpt4H05VeZUuVS/FslQAj2TeT8vDfCiL314Y+LtPXIPe/a3eamCA0wljy7z1EDYKV50Qbz7pcJg==",
+            "license": "Apache-2.0",
+            "dependencies": {
+                "@react-stately/calendar": "^3.9.3",
+                "@react-stately/checkbox": "^3.7.5",
+                "@react-stately/collections": "^3.12.10",
+                "@react-stately/color": "^3.9.5",
+                "@react-stately/combobox": "^3.13.0",
+                "@react-stately/data": "^3.15.2",
+                "@react-stately/datepicker": "^3.16.1",
+                "@react-stately/disclosure": "^3.0.11",
+                "@react-stately/dnd": "^3.7.4",
+                "@react-stately/form": "^3.2.4",
+                "@react-stately/list": "^3.13.4",
+                "@react-stately/menu": "^3.9.11",
+                "@react-stately/numberfield": "^3.11.0",
+                "@react-stately/overlays": "^3.6.23",
+                "@react-stately/radio": "^3.11.5",
+                "@react-stately/searchfield": "^3.5.19",
+                "@react-stately/select": "^3.9.2",
+                "@react-stately/selection": "^3.20.9",
+                "@react-stately/slider": "^3.7.5",
+                "@react-stately/table": "^3.15.4",
+                "@react-stately/tabs": "^3.8.9",
+                "@react-stately/toast": "^3.1.3",
+                "@react-stately/toggle": "^3.9.5",
+                "@react-stately/tooltip": "^3.5.11",
+                "@react-stately/tree": "^3.9.6",
+                "@react-types/shared": "^3.33.1"
+            },
+            "peerDependencies": {
+                "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1"
+            }
+        },
+        "node_modules/rollup": {
+            "version": "4.59.0",
+            "resolved": "http://localhost:4873/rollup/-/rollup-4.59.0.tgz",
+            "integrity": "sha512-2oMpl67a3zCH9H79LeMcbDhXW/UmWG/y2zuqnF2jQq5uq9TbM9TVyXvA4+t+ne2IIkBdrLpAaRQAvo7YI/Yyeg==",
+            "license": "MIT",
+            "dependencies": {
+                "@types/estree": "1.0.8"
+            },
+            "bin": {
+                "rollup": "dist/bin/rollup"
+            },
+            "engines": {
+                "node": ">=18.0.0",
+                "npm": ">=8.0.0"
+            },
+            "optionalDependencies": {
+                "@rollup/rollup-android-arm-eabi": "4.59.0",
+                "@rollup/rollup-android-arm64": "4.59.0",
+                "@rollup/rollup-darwin-arm64": "4.59.0",
+                "@rollup/rollup-darwin-x64": "4.59.0",
+                "@rollup/rollup-freebsd-arm64": "4.59.0",
+                "@rollup/rollup-freebsd-x64": "4.59.0",
+                "@rollup/rollup-linux-arm-gnueabihf": "4.59.0",
+                "@rollup/rollup-linux-arm-musleabihf": "4.59.0",
+                "@rollup/rollup-linux-arm64-gnu": "4.59.0",
+                "@rollup/rollup-linux-arm64-musl": "4.59.0",
+                "@rollup/rollup-linux-loong64-gnu": "4.59.0",
+                "@rollup/rollup-linux-loong64-musl": "4.59.0",
+                "@rollup/rollup-linux-ppc64-gnu": "4.59.0",
+                "@rollup/rollup-linux-ppc64-musl": "4.59.0",
+                "@rollup/rollup-linux-riscv64-gnu": "4.59.0",
+                "@rollup/rollup-linux-riscv64-musl": "4.59.0",
+                "@rollup/rollup-linux-s390x-gnu": "4.59.0",
+                "@rollup/rollup-linux-x64-gnu": "4.59.0",
+                "@rollup/rollup-linux-x64-musl": "4.59.0",
+                "@rollup/rollup-openbsd-x64": "4.59.0",
+                "@rollup/rollup-openharmony-arm64": "4.59.0",
+                "@rollup/rollup-win32-arm64-msvc": "4.59.0",
+                "@rollup/rollup-win32-ia32-msvc": "4.59.0",
+                "@rollup/rollup-win32-x64-gnu": "4.59.0",
+                "@rollup/rollup-win32-x64-msvc": "4.59.0",
+                "fsevents": "~2.3.2"
+            }
+        },
+        "node_modules/scheduler": {
+            "version": "0.27.0",
+            "resolved": "http://localhost:4873/scheduler/-/scheduler-0.27.0.tgz",
+            "integrity": "sha512-eNv+WrVbKu1f3vbYJT/xtiF5syA5HPIMtf9IgY/nKg0sWqzAUEvqY/xm7OcZc/qafLx/iO9FgOmeSAp4v5ti/Q==",
+            "license": "MIT"
+        },
+        "node_modules/semver": {
+            "version": "7.7.4",
+            "resolved": "http://localhost:4873/semver/-/semver-7.7.4.tgz",
+            "integrity": "sha512-vFKC2IEtQnVhpT78h1Yp8wzwrf8CM+MzKMHGJZfBtzhZNycRFnXsHk6E5TxIkkMsgNS7mdX3AGB7x2QM2di4lA==",
+            "dev": true,
+            "license": "ISC",
+            "bin": {
+                "semver": "bin/semver.js"
+            },
+            "engines": {
+                "node": ">=10"
+            }
+        },
+        "node_modules/set-cookie-parser": {
+            "version": "2.7.2",
+            "resolved": "http://localhost:4873/set-cookie-parser/-/set-cookie-parser-2.7.2.tgz",
+            "integrity": "sha512-oeM1lpU/UvhTxw+g3cIfxXHyJRc/uidd3yK1P242gzHds0udQBYzs3y8j4gCCW+ZJ7ad0yctld8RYO+bdurlvw==",
+            "license": "MIT"
+        },
+        "node_modules/shebang-command": {
+            "version": "2.0.0",
+            "resolved": "http://localhost:4873/shebang-command/-/shebang-command-2.0.0.tgz",
+            "integrity": "sha512-kHxr2zZpYtdmrN1qDjrrX/Z1rR1kG8Dx+gkpK1G4eXmvXswmcE1hTWBWYUzlraYw1/yZp6YuDY77YtvbN0dmDA==",
+            "dev": true,
+            "license": "MIT",
+            "peer": true,
+            "dependencies": {
+                "shebang-regex": "^3.0.0"
+            },
+            "engines": {
+                "node": ">=8"
+            }
+        },
+        "node_modules/shebang-regex": {
+            "version": "3.0.0",
+            "resolved": "http://localhost:4873/shebang-regex/-/shebang-regex-3.0.0.tgz",
+            "integrity": "sha512-7++dFhtcx3353uBaq8DDR4NuxBetBzC7ZQOhmTQInHEd6bSrXdiEyzCvG07Z44UYdLShWUyXt5M/yhz8ekcb1A==",
+            "dev": true,
+            "license": "MIT",
+            "peer": true,
+            "engines": {
+                "node": ">=8"
+            }
+        },
+        "node_modules/source-map-js": {
+            "version": "1.2.1",
+            "resolved": "http://localhost:4873/source-map-js/-/source-map-js-1.2.1.tgz",
+            "integrity": "sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA==",
+            "license": "BSD-3-Clause",
+            "engines": {
+                "node": ">=0.10.0"
+            }
+        },
+        "node_modules/tailwind-merge": {
+            "version": "3.5.0",
+            "resolved": "http://localhost:4873/tailwind-merge/-/tailwind-merge-3.5.0.tgz",
+            "integrity": "sha512-I8K9wewnVDkL1NTGoqWmVEIlUcB9gFriAEkXkfCjX5ib8ezGxtR3xD7iZIxrfArjEsH7F1CHD4RFUtxefdqV/A==",
+            "license": "MIT",
+            "funding": {
+                "type": "github",
+                "url": "https://github.com/sponsors/dcastil"
+            }
+        },
+        "node_modules/tailwindcss": {
+            "version": "4.2.1",
+            "resolved": "http://localhost:4873/tailwindcss/-/tailwindcss-4.2.1.tgz",
+            "integrity": "sha512-/tBrSQ36vCleJkAOsy9kbNTgaxvGbyOamC30PRePTQe/o1MFwEKHQk4Cn7BNGaPtjp+PuUrByJehM1hgxfq4sw==",
+            "license": "MIT"
+        },
+        "node_modules/tailwindcss-animate": {
+            "version": "1.0.7",
+            "resolved": "http://localhost:4873/tailwindcss-animate/-/tailwindcss-animate-1.0.7.tgz",
+            "integrity": "sha512-bl6mpH3T7I3UFxuvDEXLxy/VuFxBk5bbzplh7tXI68mwMokNYd1t9qPBHlnyTwfa4JGC4zP516I1hYYtQ/vspA==",
+            "license": "MIT",
+            "peerDependencies": {
+                "tailwindcss": ">=3.0.0 || insiders"
+            }
+        },
+        "node_modules/tailwindcss-react-aria-components": {
+            "version": "2.0.1",
+            "resolved": "http://localhost:4873/tailwindcss-react-aria-components/-/tailwindcss-react-aria-components-2.0.1.tgz",
+            "integrity": "sha512-yTAfYv9BE/gKczS+b8UiFMqxnrEYKKNE6Y4vAWzGadkHGb4Yuawp0SHbZKkZJQgFvK0KjO3JpCq/0kzR5jJ9tw==",
+            "license": "Apache-2.0",
+            "peerDependencies": {
+                "tailwindcss": "^4.0.0"
+            }
+        },
+        "node_modules/tapable": {
+            "version": "2.3.0",
+            "resolved": "http://localhost:4873/tapable/-/tapable-2.3.0.tgz",
+            "integrity": "sha512-g9ljZiwki/LfxmQADO3dEY1CbpmXT5Hm2fJ+QaGKwSXUylMybePR7/67YW7jOrrvjEgL1Fmz5kzyAjWVWLlucg==",
+            "license": "MIT",
+            "engines": {
+                "node": ">=6"
+            },
+            "funding": {
+                "type": "opencollective",
+                "url": "https://opencollective.com/webpack"
+            }
+        },
+        "node_modules/tinyglobby": {
+            "version": "0.2.15",
+            "resolved": "http://localhost:4873/tinyglobby/-/tinyglobby-0.2.15.tgz",
+            "integrity": "sha512-j2Zq4NyQYG5XMST4cbs02Ak8iJUdxRM0XI5QyxXuZOzKOINmWurp3smXu3y5wDcJrptwpSjgXHzIQxR0omXljQ==",
+            "license": "MIT",
+            "dependencies": {
+                "fdir": "^6.5.0",
+                "picomatch": "^4.0.3"
+            },
+            "engines": {
+                "node": ">=12.0.0"
+            },
+            "funding": {
+                "url": "https://github.com/sponsors/SuperchupuDev"
+            }
+        },
+        "node_modules/ts-api-utils": {
+            "version": "2.4.0",
+            "resolved": "http://localhost:4873/ts-api-utils/-/ts-api-utils-2.4.0.tgz",
+            "integrity": "sha512-3TaVTaAv2gTiMB35i3FiGJaRfwb3Pyn/j3m/bfAvGe8FB7CF6u+LMYqYlDh7reQf7UNvoTvdfAqHGmPGOSsPmA==",
+            "dev": true,
+            "license": "MIT",
+            "engines": {
+                "node": ">=18.12"
+            },
+            "peerDependencies": {
+                "typescript": ">=4.8.4"
+            }
+        },
+        "node_modules/tslib": {
+            "version": "2.8.1",
+            "resolved": "http://localhost:4873/tslib/-/tslib-2.8.1.tgz",
+            "integrity": "sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==",
+            "license": "0BSD"
+        },
+        "node_modules/type-check": {
+            "version": "0.4.0",
+            "resolved": "http://localhost:4873/type-check/-/type-check-0.4.0.tgz",
+            "integrity": "sha512-XleUoc9uwGXqjWwXaUTZAmzMcFZ5858QA2vvx1Ur5xIcixXIP+8LnFDgRplU30us6teqdlskFfu+ae4K79Ooew==",
+            "dev": true,
+            "license": "MIT",
+            "peer": true,
+            "dependencies": {
+                "prelude-ls": "^1.2.1"
+            },
+            "engines": {
+                "node": ">= 0.8.0"
+            }
+        },
+        "node_modules/typescript": {
+            "version": "5.9.3",
+            "resolved": "http://localhost:4873/typescript/-/typescript-5.9.3.tgz",
+            "integrity": "sha512-jl1vZzPDinLr9eUt3J/t7V6FgNEw9QjvBPdysz9KfQDD41fQrC2Y4vKQdiaUpFT4bXlb1RHhLpp8wtm6M5TgSw==",
+            "dev": true,
+            "license": "Apache-2.0",
+            "bin": {
+                "tsc": "bin/tsc",
+                "tsserver": "bin/tsserver"
+            },
+            "engines": {
+                "node": ">=14.17"
+            }
+        },
+        "node_modules/typescript-eslint": {
+            "version": "8.57.0",
+            "resolved": "http://localhost:4873/typescript-eslint/-/typescript-eslint-8.57.0.tgz",
+            "integrity": "sha512-W8GcigEMEeB07xEZol8oJ26rigm3+bfPHxHvwbYUlu1fUDsGuQ7Hiskx5xGW/xM4USc9Ephe3jtv7ZYPQntHeA==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "@typescript-eslint/eslint-plugin": "8.57.0",
+                "@typescript-eslint/parser": "8.57.0",
+                "@typescript-eslint/typescript-estree": "8.57.0",
+                "@typescript-eslint/utils": "8.57.0"
+            },
+            "engines": {
+                "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+            },
+            "funding": {
+                "type": "opencollective",
+                "url": "https://opencollective.com/typescript-eslint"
+            },
+            "peerDependencies": {
+                "eslint": "^8.57.0 || ^9.0.0 || ^10.0.0",
+                "typescript": ">=4.8.4 <6.0.0"
+            }
+        },
+        "node_modules/undici-types": {
+            "version": "7.16.0",
+            "resolved": "http://localhost:4873/undici-types/-/undici-types-7.16.0.tgz",
+            "integrity": "sha512-Zz+aZWSj8LE6zoxD+xrjh4VfkIG8Ya6LvYkZqtUQGJPZjYl53ypCaUwWqo7eI0x66KBGeRo+mlBEkMSeSZ38Nw==",
+            "devOptional": true,
+            "license": "MIT"
+        },
+        "node_modules/uri-js": {
+            "version": "4.4.1",
+            "resolved": "http://localhost:4873/uri-js/-/uri-js-4.4.1.tgz",
+            "integrity": "sha512-7rKUyy33Q1yc98pQ1DAmLtwX109F7TIfWlW1Ydo8Wl1ii1SeHieeh0HHfPeL2fMXK6z0s8ecKs9frCuLJvndBg==",
+            "dev": true,
+            "license": "BSD-2-Clause",
+            "peer": true,
+            "dependencies": {
+                "punycode": "^2.1.0"
+            }
+        },
+        "node_modules/use-sync-external-store": {
+            "version": "1.6.0",
+            "resolved": "http://localhost:4873/use-sync-external-store/-/use-sync-external-store-1.6.0.tgz",
+            "integrity": "sha512-Pp6GSwGP/NrPIrxVFAIkOQeyw8lFenOHijQWkUTrDvrF4ALqylP2C/KCkeS9dpUM3KvYRQhna5vt7IL95+ZQ9w==",
+            "license": "MIT",
+            "peerDependencies": {
+                "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
+            }
+        },
+        "node_modules/util-deprecate": {
+            "version": "1.0.2",
+            "resolved": "http://localhost:4873/util-deprecate/-/util-deprecate-1.0.2.tgz",
+            "integrity": "sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==",
+            "license": "MIT"
+        },
+        "node_modules/vite": {
+            "version": "7.3.1",
+            "resolved": "http://localhost:4873/vite/-/vite-7.3.1.tgz",
+            "integrity": "sha512-w+N7Hifpc3gRjZ63vYBXA56dvvRlNWRczTdmCBBa+CotUzAPf5b7YMdMR/8CQoeYE5LX3W4wj6RYTgonm1b9DA==",
+            "license": "MIT",
+            "dependencies": {
+                "esbuild": "^0.27.0",
+                "fdir": "^6.5.0",
+                "picomatch": "^4.0.3",
+                "postcss": "^8.5.6",
+                "rollup": "^4.43.0",
+                "tinyglobby": "^0.2.15"
+            },
+            "bin": {
+                "vite": "bin/vite.js"
+            },
+            "engines": {
+                "node": "^20.19.0 || >=22.12.0"
+            },
+            "funding": {
+                "url": "https://github.com/vitejs/vite?sponsor=1"
+            },
+            "optionalDependencies": {
+                "fsevents": "~2.3.3"
+            },
+            "peerDependencies": {
+                "@types/node": "^20.19.0 || >=22.12.0",
+                "jiti": ">=1.21.0",
+                "less": "^4.0.0",
+                "lightningcss": "^1.21.0",
+                "sass": "^1.70.0",
+                "sass-embedded": "^1.70.0",
+                "stylus": ">=0.54.8",
+                "sugarss": "^5.0.0",
+                "terser": "^5.16.0",
+                "tsx": "^4.8.1",
+                "yaml": "^2.4.2"
+            },
+            "peerDependenciesMeta": {
+                "@types/node": {
+                    "optional": true
+                },
+                "jiti": {
+                    "optional": true
+                },
+                "less": {
+                    "optional": true
+                },
+                "lightningcss": {
+                    "optional": true
+                },
+                "sass": {
+                    "optional": true
+                },
+                "sass-embedded": {
+                    "optional": true
+                },
+                "stylus": {
+                    "optional": true
+                },
+                "sugarss": {
+                    "optional": true
+                },
+                "terser": {
+                    "optional": true
+                },
+                "tsx": {
+                    "optional": true
+                },
+                "yaml": {
+                    "optional": true
+                }
+            }
+        },
+        "node_modules/which": {
+            "version": "2.0.2",
+            "resolved": "http://localhost:4873/which/-/which-2.0.2.tgz",
+            "integrity": "sha512-BLI3Tl1TW3Pvl70l3yq3Y64i+awpwXqsGBYWkkqMtnbXgrMD+yj7rhW0kuEDxzJaYXGjEW5ogapKNMEKNMjibA==",
+            "dev": true,
+            "license": "ISC",
+            "peer": true,
+            "dependencies": {
+                "isexe": "^2.0.0"
+            },
+            "bin": {
+                "node-which": "bin/node-which"
+            },
+            "engines": {
+                "node": ">= 8"
+            }
+        },
+        "node_modules/word-wrap": {
+            "version": "1.2.5",
+            "resolved": "http://localhost:4873/word-wrap/-/word-wrap-1.2.5.tgz",
+            "integrity": "sha512-BN22B5eaMMI9UMtjrGd5g5eCYPpCPDUy0FJXbYsaT5zYxjFOckS53SQDE3pWkVoWpHXVb3BrYcEN4Twa55B5cA==",
+            "dev": true,
+            "license": "MIT",
+            "peer": true,
+            "engines": {
+                "node": ">=0.10.0"
+            }
+        },
+        "node_modules/yocto-queue": {
+            "version": "0.1.0",
+            "resolved": "http://localhost:4873/yocto-queue/-/yocto-queue-0.1.0.tgz",
+            "integrity": "sha512-rVksvsnNCdJ/ohGc6xgPwyN8eheCxsiLM8mxuE/t/mOVqJewPuO1miLpTHQiRgTKCLexL4MeAFVagts7HmNZ2Q==",
+            "dev": true,
+            "license": "MIT",
+            "peer": true,
+            "engines": {
+                "node": ">=10"
+            },
+            "funding": {
+                "url": "https://github.com/sponsors/sindresorhus"
+            }
+        }
+    }
+}
diff --git a/package.json b/package.json
new file mode 100644
index 0000000..8af59f5
--- /dev/null
+++ b/package.json
@@ -0,0 +1,50 @@
+{
+    "name": "untitledui-vite-starter-kit",
+    "version": "0.0.0",
+    "type": "module",
+    "private": true,
+    "scripts": {
+        "dev": "vite",
+        "build": "tsc -b && vite build",
+        "preview": "vite preview"
+    },
+    "dependencies": {
+        "@fortawesome/fontawesome-svg-core": "^7.2.0",
+        "@fortawesome/free-solid-svg-icons": "^7.2.0",
+        "@fortawesome/pro-light-svg-icons": "^7.2.0",
+        "@fortawesome/pro-regular-svg-icons": "^7.2.0",
+        "@fortawesome/pro-solid-svg-icons": "^7.2.0",
+        "@fortawesome/react-fontawesome": "^3.2.0",
+        "@tailwindcss/typography": "^0.5.19",
+        "@tailwindcss/vite": "^4.1.18",
+        "@untitledui/file-icons": "^0.0.8",
+        "@untitledui/icons": "^0.0.21",
+        "input-otp": "^1.4.2",
+        "motion": "^12.29.0",
+        "qr-code-styling": "^1.9.2",
+        "react": "^19.2.3",
+        "react-aria": "^3.46.0",
+        "react-aria-components": "^1.15.1",
+        "react-dom": "^19.2.3",
+        "react-hotkeys-hook": "^5.2.3",
+        "react-router": "^7.13.0",
+        "tailwind-merge": "^3.4.0",
+        "tailwindcss": "^4.1.18",
+        "tailwindcss-animate": "^1.0.7",
+        "tailwindcss-react-aria-components": "^2.0.1"
+    },
+    "devDependencies": {
+        "@tailwindcss/postcss": "^4.1.18",
+        "@trivago/prettier-plugin-sort-imports": "^5.2.2",
+        "@types/node": "^24.10.9",
+        "@types/react": "^19.2.9",
+        "@types/react-dom": "^19.2.3",
+        "@vitejs/plugin-react-swc": "^4.2.2",
+        "globals": "^16.5.0",
+        "prettier": "^3.8.1",
+        "prettier-plugin-tailwindcss": "^0.6.14",
+        "typescript": "^5.9.3",
+        "typescript-eslint": "^8.53.1",
+        "vite": "^7.3.1"
+    }
+}
diff --git a/public/vite.svg b/public/vite.svg
new file mode 100644
index 0000000..e7b8dfb
--- /dev/null
+++ b/public/vite.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>
\ No newline at end of file
diff --git a/src/components/application/app-navigation/base-components/mobile-header.tsx b/src/components/application/app-navigation/base-components/mobile-header.tsx
new file mode 100644
index 0000000..0da5a17
--- /dev/null
+++ b/src/components/application/app-navigation/base-components/mobile-header.tsx
@@ -0,0 +1,56 @@
+import type { PropsWithChildren } from "react";
+import { X as CloseIcon, Menu02 } from "@untitledui/icons";
+import {
+    Button as AriaButton,
+    Dialog as AriaDialog,
+    DialogTrigger as AriaDialogTrigger,
+    Modal as AriaModal,
+    ModalOverlay as AriaModalOverlay,
+} from "react-aria-components";
+import { UntitledLogo } from "@/components/foundations/logo/untitledui-logo";
+import { cx } from "@/utils/cx";
+
+export const MobileNavigationHeader = ({ children }: PropsWithChildren) => {
+    return (
+        <AriaDialogTrigger>
+            <header className="flex h-16 items-center justify-between border-b border-secondary bg-primary py-3 pr-2 pl-4 lg:hidden">
+                <UntitledLogo />
+
+                <AriaButton
+                    aria-label="Expand navigation menu"
+                    className="group flex items-center justify-center rounded-lg bg-primary p-2 text-fg-secondary outline-focus-ring hover:bg-primary_hover hover:text-fg-secondary_hover focus-visible:outline-2 focus-visible:outline-offset-2"
+                >
+                    <Menu02 className="size-6 transition duration-200 ease-in-out group-aria-expanded:opacity-0" />
+                    <CloseIcon className="absolute size-6 opacity-0 transition duration-200 ease-in-out group-aria-expanded:opacity-100" />
+                </AriaButton>
+            </header>
+
+            <AriaModalOverlay
+                isDismissable
+                className={({ isEntering, isExiting }) =>
+                    cx(
+                        "fixed inset-0 z-50 cursor-pointer bg-overlay/70 pr-16 backdrop-blur-md lg:hidden",
+                        isEntering && "duration-300 ease-in-out animate-in fade-in",
+                        isExiting && "duration-200 ease-in-out animate-out fade-out",
+                    )
+                }
+            >
+                {({ state }) => (
+                    <>
+                        <AriaButton
+                            aria-label="Close navigation menu"
+                            onPress={() => state.close()}
+                            className="fixed top-3 right-2 flex cursor-pointer items-center justify-center rounded-lg p-2 text-fg-white/70 outline-focus-ring hover:bg-white/10 hover:text-fg-white focus-visible:outline-2 focus-visible:outline-offset-2"
+                        >
+                            <CloseIcon className="size-6" />
+                        </AriaButton>
+
+                        <AriaModal className="w-full cursor-auto will-change-transform">
+                            <AriaDialog className="h-dvh outline-hidden focus:outline-hidden">{children}</AriaDialog>
+                        </AriaModal>
+                    </>
+                )}
+            </AriaModalOverlay>
+        </AriaDialogTrigger>
+    );
+};
diff --git a/src/components/application/app-navigation/base-components/nav-account-card.tsx b/src/components/application/app-navigation/base-components/nav-account-card.tsx
new file mode 100644
index 0000000..8946da8
--- /dev/null
+++ b/src/components/application/app-navigation/base-components/nav-account-card.tsx
@@ -0,0 +1,209 @@
+import type { FC, HTMLAttributes } from "react";
+import { useCallback, useEffect, useRef } from "react";
+import type { Placement } from "@react-types/overlays";
+import { BookOpen01, ChevronSelectorVertical, LogOut01, Plus, Settings01, User01 } from "@untitledui/icons";
+import { useFocusManager } from "react-aria";
+import type { DialogProps as AriaDialogProps } from "react-aria-components";
+import { Button as AriaButton, Dialog as AriaDialog, DialogTrigger as AriaDialogTrigger, Popover as AriaPopover } from "react-aria-components";
+import { AvatarLabelGroup } from "@/components/base/avatar/avatar-label-group";
+import { Button } from "@/components/base/buttons/button";
+import { RadioButtonBase } from "@/components/base/radio-buttons/radio-buttons";
+import { useBreakpoint } from "@/hooks/use-breakpoint";
+import { cx } from "@/utils/cx";
+
+type NavAccountType = {
+    /** Unique identifier for the nav item. */
+    id: string;
+    /** Name of the account holder. */
+    name: string;
+    /** Email address of the account holder. */
+    email: string;
+    /** Avatar image URL. */
+    avatar: string;
+    /** Online status of the account holder. This is used to display the online status indicator. */
+    status: "online" | "offline";
+};
+
+const placeholderAccounts: NavAccountType[] = [
+    {
+        id: "olivia",
+        name: "Olivia Rhye",
+        email: "olivia@untitledui.com",
+        avatar: "https://www.untitledui.com/images/avatars/olivia-rhye?fm=webp&q=80",
+        status: "online",
+    },
+    {
+        id: "sienna",
+        name: "Sienna Hewitt",
+        email: "sienna@untitledui.com",
+        avatar: "https://www.untitledui.com/images/avatars/transparent/sienna-hewitt?bg=%23E0E0E0",
+        status: "online",
+    },
+];
+
+export const NavAccountMenu = ({
+    className,
+    selectedAccountId = "olivia",
+    ...dialogProps
+}: AriaDialogProps & { className?: string; accounts?: NavAccountType[]; selectedAccountId?: string }) => {
+    const focusManager = useFocusManager();
+    const dialogRef = useRef<HTMLDivElement>(null);
+
+    const onKeyDown = useCallback(
+        (e: KeyboardEvent) => {
+            switch (e.key) {
+                case "ArrowDown":
+                    focusManager?.focusNext({ tabbable: true, wrap: true });
+                    break;
+                case "ArrowUp":
+                    focusManager?.focusPrevious({ tabbable: true, wrap: true });
+                    break;
+            }
+        },
+        [focusManager],
+    );
+
+    useEffect(() => {
+        const element = dialogRef.current;
+        if (element) {
+            element.addEventListener("keydown", onKeyDown);
+        }
+
+        return () => {
+            if (element) {
+                element.removeEventListener("keydown", onKeyDown);
+            }
+        };
+    }, [onKeyDown]);
+
+    return (
+        <AriaDialog
+            {...dialogProps}
+            ref={dialogRef}
+            className={cx("w-66 rounded-xl bg-secondary_alt shadow-lg ring ring-secondary_alt outline-hidden", className)}
+        >
+            <div className="rounded-xl bg-primary ring-1 ring-secondary">
+                <div className="flex flex-col gap-0.5 py-1.5">
+                    <NavAccountCardMenuItem label="View profile" icon={User01} shortcut="⌘K->P" />
+                    <NavAccountCardMenuItem label="Account settings" icon={Settings01} shortcut="⌘S" />
+                    <NavAccountCardMenuItem label="Documentation" icon={BookOpen01} />
+                </div>
+                <div className="flex flex-col gap-0.5 border-t border-secondary py-1.5">
+                    <div className="px-3 pt-1.5 pb-1 text-xs font-semibold text-tertiary">Switch account</div>
+
+                    <div className="flex flex-col gap-0.5 px-1.5">
+                        {placeholderAccounts.map((account) => (
+                            <button
+                                key={account.id}
+                                className={cx(
+                                    "relative w-full cursor-pointer rounded-md px-2 py-1.5 text-left outline-focus-ring hover:bg-primary_hover focus:z-10 focus-visible:outline-2 focus-visible:outline-offset-2",
+                                    account.id === selectedAccountId && "bg-primary_hover",
+                                )}
+                            >
+                                <AvatarLabelGroup status="online" size="md" src={account.avatar} title={account.name} subtitle={account.email} />
+
+                                <RadioButtonBase isSelected={account.id === selectedAccountId} className="absolute top-2 right-2" />
+                            </button>
+                        ))}
+                    </div>
+                </div>
+                <div className="flex flex-col gap-2 px-2 pt-0.5 pb-2">
+                    <Button iconLeading={Plus} color="secondary" size="sm">
+                        Add account
+                    </Button>
+                </div>
+            </div>
+
+            <div className="pt-1 pb-1.5">
+                <NavAccountCardMenuItem label="Sign out" icon={LogOut01} shortcut="⌥⇧Q" />
+            </div>
+        </AriaDialog>
+    );
+};
+
+const NavAccountCardMenuItem = ({
+    icon: Icon,
+    label,
+    shortcut,
+    ...buttonProps
+}: {
+    icon?: FC<{ className?: string }>;
+    label: string;
+    shortcut?: string;
+} & HTMLAttributes<HTMLButtonElement>) => {
+    return (
+        <button {...buttonProps} className={cx("group/item w-full cursor-pointer px-1.5 focus:outline-hidden", buttonProps.className)}>
+            <div
+                className={cx(
+                    "flex w-full items-center justify-between gap-3 rounded-md p-2 group-hover/item:bg-primary_hover",
+                    // Focus styles.
+                    "outline-focus-ring group-focus-visible/item:outline-2 group-focus-visible/item:outline-offset-2",
+                )}
+            >
+                <div className="flex gap-2 text-sm font-semibold text-secondary group-hover/item:text-secondary_hover">
+                    {Icon && <Icon className="size-5 text-fg-quaternary" />} {label}
+                </div>
+
+                {shortcut && (
+                    <kbd className="flex rounded px-1 py-px font-body text-xs font-medium text-tertiary ring-1 ring-secondary ring-inset">{shortcut}</kbd>
+                )}
+            </div>
+        </button>
+    );
+};
+
+export const NavAccountCard = ({
+    popoverPlacement,
+    selectedAccountId = "olivia",
+    items = placeholderAccounts,
+}: {
+    popoverPlacement?: Placement;
+    selectedAccountId?: string;
+    items?: NavAccountType[];
+}) => {
+    const triggerRef = useRef<HTMLDivElement>(null);
+    const isDesktop = useBreakpoint("lg");
+
+    const selectedAccount = placeholderAccounts.find((account) => account.id === selectedAccountId);
+
+    if (!selectedAccount) {
+        console.warn(`Account with ID ${selectedAccountId} not found in <NavAccountCard />`);
+        return null;
+    }
+
+    return (
+        <div ref={triggerRef} className="relative flex items-center gap-3 rounded-xl p-3 ring-1 ring-secondary ring-inset">
+            <AvatarLabelGroup
+                size="md"
+                src={selectedAccount.avatar}
+                title={selectedAccount.name}
+                subtitle={selectedAccount.email}
+                status={selectedAccount.status}
+            />
+
+            <div className="absolute top-1.5 right-1.5">
+                <AriaDialogTrigger>
+                    <AriaButton className="flex cursor-pointer items-center justify-center rounded-md p-1.5 text-fg-quaternary outline-focus-ring transition duration-100 ease-linear hover:bg-primary_hover hover:text-fg-quaternary_hover focus-visible:outline-2 focus-visible:outline-offset-2 pressed:bg-primary_hover pressed:text-fg-quaternary_hover">
+                        <ChevronSelectorVertical className="size-4 shrink-0" />
+                    </AriaButton>
+                    <AriaPopover
+                        placement={popoverPlacement ?? (isDesktop ? "right bottom" : "top right")}
+                        triggerRef={triggerRef}
+                        offset={8}
+                        className={({ isEntering, isExiting }) =>
+                            cx(
+                                "origin-(--trigger-anchor-point) will-change-transform",
+                                isEntering &&
+                                    "duration-150 ease-out animate-in fade-in placement-right:slide-in-from-left-0.5 placement-top:slide-in-from-bottom-0.5 placement-bottom:slide-in-from-top-0.5",
+                                isExiting &&
+                                    "duration-100 ease-in animate-out fade-out placement-right:slide-out-to-left-0.5 placement-top:slide-out-to-bottom-0.5 placement-bottom:slide-out-to-top-0.5",
+                            )
+                        }
+                    >
+                        <NavAccountMenu selectedAccountId={selectedAccountId} accounts={items} />
+                    </AriaPopover>
+                </AriaDialogTrigger>
+            </div>
+        </div>
+    );
+};
diff --git a/src/components/application/app-navigation/base-components/nav-item-button.tsx b/src/components/application/app-navigation/base-components/nav-item-button.tsx
new file mode 100644
index 0000000..65e1662
--- /dev/null
+++ b/src/components/application/app-navigation/base-components/nav-item-button.tsx
@@ -0,0 +1,67 @@
+import type { FC, MouseEventHandler } from "react";
+import { Pressable } from "react-aria-components";
+import { Tooltip } from "@/components/base/tooltip/tooltip";
+import { cx } from "@/utils/cx";
+
+const styles = {
+    md: {
+        root: "size-10",
+        icon: "size-5",
+    },
+    lg: {
+        root: "size-12",
+        icon: "size-6",
+    },
+};
+
+interface NavItemButtonProps {
+    /** Whether the collapsible nav item is open. */
+    open?: boolean;
+    /** URL to navigate to when the button is clicked. */
+    href?: string;
+    /** Label text for the button. */
+    label: string;
+    /** Icon component to display. */
+    icon: FC<{ className?: string }>;
+    /** Whether the button is currently active. */
+    current?: boolean;
+    /** Size of the button. */
+    size?: "md" | "lg";
+    /** Handler for click events. */
+    onClick?: MouseEventHandler;
+    /** Additional CSS classes to apply to the button. */
+    className?: string;
+    /** Placement of the tooltip. */
+    tooltipPlacement?: "top" | "right" | "bottom" | "left";
+}
+
+export const NavItemButton = ({
+    current: current,
+    label,
+    href,
+    icon: Icon,
+    size = "md",
+    className,
+    tooltipPlacement = "right",
+    onClick,
+}: NavItemButtonProps) => {
+    return (
+        <Tooltip title={label} placement={tooltipPlacement}>
+            <Pressable>
+                <a
+                    href={href}
+                    aria-label={label}
+                    onClick={onClick}
+                    className={cx(
+                        "relative flex w-full cursor-pointer items-center justify-center rounded-md bg-primary p-2 text-fg-quaternary outline-focus-ring transition duration-100 ease-linear select-none hover:bg-primary_hover hover:text-fg-quaternary_hover focus-visible:z-10 focus-visible:outline-2 focus-visible:outline-offset-2",
+                        current && "bg-active text-fg-quaternary_hover hover:bg-secondary_hover",
+                        styles[size].root,
+                        className,
+                    )}
+                >
+                    <Icon aria-hidden="true" className={cx("shrink-0 transition-inherit-all", styles[size].icon)} />
+                </a>
+            </Pressable>
+        </Tooltip>
+    );
+};
diff --git a/src/components/application/app-navigation/base-components/nav-item.tsx b/src/components/application/app-navigation/base-components/nav-item.tsx
new file mode 100644
index 0000000..72a85f9
--- /dev/null
+++ b/src/components/application/app-navigation/base-components/nav-item.tsx
@@ -0,0 +1,108 @@
+import type { FC, HTMLAttributes, MouseEventHandler, ReactNode } from "react";
+import { ChevronDown, Share04 } from "@untitledui/icons";
+import { Link as AriaLink } from "react-aria-components";
+import { Badge } from "@/components/base/badges/badges";
+import { cx, sortCx } from "@/utils/cx";
+
+const styles = sortCx({
+    root: "group relative flex w-full cursor-pointer items-center rounded-md bg-primary outline-focus-ring transition duration-100 ease-linear select-none hover:bg-primary_hover focus-visible:z-10 focus-visible:outline-2 focus-visible:outline-offset-2",
+    rootSelected: "bg-active hover:bg-secondary_hover",
+});
+
+interface NavItemBaseProps {
+    /** Whether the nav item shows only an icon. */
+    iconOnly?: boolean;
+    /** Whether the collapsible nav item is open. */
+    open?: boolean;
+    /** URL to navigate to when the nav item is clicked. */
+    href?: string;
+    /** Type of the nav item. */
+    type: "link" | "collapsible" | "collapsible-child";
+    /** Icon component to display. */
+    icon?: FC<HTMLAttributes<HTMLOrSVGElement>>;
+    /** Badge to display. */
+    badge?: ReactNode;
+    /** Whether the nav item is currently active. */
+    current?: boolean;
+    /** Whether to truncate the label text. */
+    truncate?: boolean;
+    /** Handler for click events. */
+    onClick?: MouseEventHandler;
+    /** Content to display. */
+    children?: ReactNode;
+}
+
+export const NavItemBase = ({ current, type, badge, href, icon: Icon, children, truncate = true, onClick }: NavItemBaseProps) => {
+    const iconElement = Icon && <Icon aria-hidden="true" className="mr-2 size-5 shrink-0 text-fg-quaternary transition-inherit-all" />;
+
+    const badgeElement =
+        badge && (typeof badge === "string" || typeof badge === "number") ? (
+            <Badge className="ml-3" color="gray" type="pill-color" size="sm">
+                {badge}
+            </Badge>
+        ) : (
+            badge
+        );
+
+    const labelElement = (
+        <span
+            className={cx(
+                "flex-1 text-md font-semibold text-secondary transition-inherit-all group-hover:text-secondary_hover",
+                truncate && "truncate",
+                current && "text-secondary_hover",
+            )}
+        >
+            {children}
+        </span>
+    );
+
+    const isExternal = href && href.startsWith("http");
+    const externalIcon = isExternal && <Share04 className="size-4 stroke-[2.5px] text-fg-quaternary" />;
+
+    if (type === "collapsible") {
+        return (
+            <summary className={cx("px-3 py-2", styles.root, current && styles.rootSelected)} onClick={onClick}>
+                {iconElement}
+
+                {labelElement}
+
+                {badgeElement}
+
+                <ChevronDown aria-hidden="true" className="ml-3 size-4 shrink-0 stroke-[2.5px] text-fg-quaternary in-open:-scale-y-100" />
+            </summary>
+        );
+    }
+
+    if (type === "collapsible-child") {
+        return (
+            <AriaLink
+                href={href!}
+                target={isExternal ? "_blank" : "_self"}
+                rel="noopener noreferrer"
+                className={cx("py-2 pr-3 pl-10", styles.root, current && styles.rootSelected)}
+                onClick={onClick}
+                aria-current={current ? "page" : undefined}
+            >
+                {labelElement}
+                {externalIcon}
+                {badgeElement}
+            </AriaLink>
+        );
+    }
+
+    return (
+        <AriaLink
+            href={href!}
+            target={isExternal ? "_blank" : "_self"}
+            rel="noopener noreferrer"
+            className={cx("px-3 py-2", styles.root, current && styles.rootSelected)}
+            onClick={onClick}
+            aria-current={current ? "page" : undefined}
+        >
+            {iconElement}
+            {labelElement}
+            {externalIcon}
+            {badgeElement}
+        </AriaLink>
+    );
+};
diff --git a/src/components/application/app-navigation/base-components/nav-list.tsx b/src/components/application/app-navigation/base-components/nav-list.tsx
new file mode 100644
index 0000000..1c312cb
--- /dev/null
+++ b/src/components/application/app-navigation/base-components/nav-list.tsx
@@ -0,0 +1,83 @@
+import { useState } from "react";
+import { cx } from "@/utils/cx";
+import type { NavItemDividerType, NavItemType } from "../config";
+import { NavItemBase } from "./nav-item";
+
+interface NavListProps {
+    /** URL of the currently active item. */
+    activeUrl?: string;
+    /** Additional CSS classes to apply to the list. */
+    className?: string;
+    /** List of items to display. */
+    items: (NavItemType | NavItemDividerType)[];
+}
+
+export const NavList = ({ activeUrl, items, className }: NavListProps) => {
+    const [open, setOpen] = useState(false);
+    const activeItem = items.find((item) => item.href === activeUrl || item.items?.some((subItem) => subItem.href === activeUrl));
+    const [currentItem, setCurrentItem] = useState(activeItem);
+
+    return (
+        <ul className={cx("mt-4 flex flex-col px-2 lg:px-4", className)}>
+            {items.map((item, index) => {
+                if (item.divider) {
+                    return (
+                        <li key={index} className="w-full px-0.5 py-2">
+                            <hr className="h-px w-full border-none bg-border-secondary" />
+                        </li>
+                    );
+                }
+
+                if (item.items?.length) {
+                    return (
+                        <details
+                            key={item.label}
+                            open={activeItem?.href === item.href}
+                            className="appearance-none py-0.5"
+                            onToggle={(e) => {
+                                setOpen(e.currentTarget.open);
+                                setCurrentItem(item);
+                            }}
+                        >
+                            <NavItemBase href={item.href} badge={item.badge} icon={item.icon} type="collapsible">
+                                {item.label}
+                            </NavItemBase>
+
+                            <dd>
+                                <ul className="py-0.5">
+                                    {item.items.map((childItem) => (
+                                        <li key={childItem.label} className="py-0.5">
+                                            <NavItemBase
+                                                href={childItem.href}
+                                                badge={childItem.badge}
+                                                type="collapsible-child"
+                                                current={activeUrl === childItem.href}
+                                            >
+                                                {childItem.label}
+                                            </NavItemBase>
+                                        </li>
+                                    ))}
+                                </ul>
+                            </dd>
+                        </details>
+                    );
+                }
+
+                return (
+                    <li key={item.label} className="py-0.5">
+                        <NavItemBase
+                            type="link"
+                            badge={item.badge}
+                            icon={item.icon}
+                            href={item.href}
+                            current={currentItem?.href === item.href}
+                            open={open && currentItem?.href === item.href}
+                        >
+                            {item.label}
+                        </NavItemBase>
+                    </li>
+                );
+            })}
+        </ul>
+    );
+};
diff --git a/src/components/application/app-navigation/config.ts b/src/components/application/app-navigation/config.ts
new file mode 100644
index 0000000..4f3b1ac
--- /dev/null
+++ b/src/components/application/app-navigation/config.ts
@@ -0,0 +1,23 @@
+import type { FC, ReactNode } from "react";
+
+export type NavItemType = {
+    /** Label text for the nav item. */
+    label: string;
+    /** URL to navigate to when the nav item is clicked. */
+    href?: string;
+    /** Icon component to display. */
+    icon?: FC<{ className?: string }>;
+    /** Badge to display. */
+    badge?: ReactNode;
+    /** List of sub-items to display. */
+    items?: { label: string; href: string; icon?: FC<{ className?: string }>; badge?: ReactNode }[];
+    /** Whether this nav item is a divider. */
+    divider?: boolean;
+};
+
+export type NavItemDividerType = Omit<NavItemType, "icon" | "label" | "divider"> & {
+    /** Label text for the divider. */
+    label?: string;
+    /** Whether this nav item is a divider. */
+    divider: true;
+};
diff --git a/src/components/application/app-navigation/header-navigation.tsx b/src/components/application/app-navigation/header-navigation.tsx
new file mode 100644
index 0000000..cd912bb
--- /dev/null
+++ b/src/components/application/app-navigation/header-navigation.tsx
@@ -0,0 +1,202 @@
+import type { FC, ReactNode } from "react";
+import { Bell01, LifeBuoy01, SearchLg, Settings01 } from "@untitledui/icons";
+import { Button as AriaButton, DialogTrigger, Popover } from "react-aria-components";
+import { Avatar } from "@/components/base/avatar/avatar";
+import { BadgeWithDot } from "@/components/base/badges/badges";
+import { Input } from "@/components/base/input/input";
+import { UntitledLogo } from "@/components/foundations/logo/untitledui-logo";
+import { cx } from "@/utils/cx";
+import { MobileNavigationHeader } from "./base-components/mobile-header";
+import { NavAccountCard, NavAccountMenu } from "./base-components/nav-account-card";
+import { NavItemBase } from "./base-components/nav-item";
+import { NavItemButton } from "./base-components/nav-item-button";
+import { NavList } from "./base-components/nav-list";
+
+type NavItem = {
+    /** Label text for the nav item. */
+    label: string;
+    /** URL to navigate to when the nav item is clicked. */
+    href: string;
+    /** Whether the nav item is currently active. */
+    current?: boolean;
+    /** Icon component to display. */
+    icon?: FC<{ className?: string }>;
+    /** Badge to display. */
+    badge?: ReactNode;
+    /** List of sub-items to display. */
+    items?: NavItem[];
+};
+
+interface HeaderNavigationBaseProps {
+    /** URL of the currently active item. */
+    activeUrl?: string;
+    /** List of items to display. */
+    items: NavItem[];
+    /** List of sub-items to display. */
+    subItems?: NavItem[];
+    /** Content to display in the trailing position. */
+    trailingContent?: ReactNode;
+    /** Whether to show the avatar dropdown. */
+    showAvatarDropdown?: boolean;
+    /** Whether to hide the bottom border. */
+    hideBorder?: boolean;
+}
+
+export const HeaderNavigationBase = ({
+    activeUrl,
+    items,
+    subItems,
+    trailingContent,
+    showAvatarDropdown = true,
+    hideBorder = false,
+}: HeaderNavigationBaseProps) => {
+    const activeSubNavItems = subItems || items.find((item) => item.current && item.items && item.items.length > 0)?.items;
+
+    const showSecondaryNav = activeSubNavItems && activeSubNavItems.length > 0;
+
+    return (
+        <>
+            <MobileNavigationHeader>
+                <aside className="flex h-full max-w-full flex-col justify-between overflow-auto border-r border-secondary bg-primary pt-4 lg:pt-6">
+                    <div className="flex flex-col gap-5 px-4 lg:px-5">
+                        <UntitledLogo className="h-8" />
+                        <Input shortcut size="sm" aria-label="Search" placeholder="Search" icon={SearchLg} />
+                    </div>
+
+                    <NavList items={items} />
+
+                    <div className="mt-auto flex flex-col gap-4 px-2 py-4 lg:px-4 lg:py-6">
+                        <div className="flex flex-col gap-1">
+                            <NavItemBase type="link" href="#" icon={LifeBuoy01}>
+                                Support
+                            </NavItemBase>
+                            <NavItemBase
+                                type="link"
+                                href="#"
+                                icon={Settings01}
+                                badge={
+                                    <BadgeWithDot color="success" type="modern" size="sm">
+                                        Online
+                                    </BadgeWithDot>
+                                }
+                            >
+                                Settings
+                            </NavItemBase>
+                            <NavItemBase type="link" href="https://www.untitledui.com/" icon={Settings01}>
+                                Open in browser
+                            </NavItemBase>
+                        </div>
+
+                        <NavAccountCard />
+                    </div>
+                </aside>
+            </MobileNavigationHeader>
+
+            <header className="max-lg:hidden">
+                <section
+                    className={cx(
+                        "flex h-16 w-full items-center justify-center bg-primary md:h-18",
+                        (!hideBorder || showSecondaryNav) && "border-b border-secondary",
+                    )}
+                >
+                    <div className="flex w-full max-w-container justify-between pr-3 pl-4 md:px-8">
+                        <div className="flex flex-1 items-center gap-4">
+                            <a
+                                aria-label="Go to homepage"
+                                href="/"
+                                className="rounded-xs outline-focus-ring focus-visible:outline-2 focus-visible:outline-offset-2"
+                            >
+                                <UntitledLogo className="h-8" />
+                            </a>
+
+                            <nav>
+                                <ul className="flex items-center gap-0.5">
+                                    {items.map((item) => (
+                                        <li key={item.label} className="py-0.5">
+                                            <NavItemBase icon={item.icon} href={item.href} current={item.current} badge={item.badge} type="link">
+                                                {item.label}
+                                            </NavItemBase>
+                                        </li>
+                                    ))}
+                                </ul>
+                            </nav>
+                        </div>
+
+                        <div className="flex items-center gap-3">
+                            {trailingContent}
+
+                            <div className="flex gap-0.5">
+                                <NavItemButton
+                                    current={activeUrl === "/settings-01"}
+                                    size="md"
+                                    icon={Settings01}
+                                    label="Settings"
+                                    href="/settings-01"
+                                    tooltipPlacement="bottom"
+                                />
+                                <NavItemButton
+                                    current={activeUrl === "/notifications-01"}
+                                    size="md"
+                                    icon={Bell01}
+                                    label="Notifications"
+                                    href="/notifications-01"
+                                    tooltipPlacement="bottom"
+                                />
+                            </div>
+
+                            {showAvatarDropdown && (
+                                <DialogTrigger>
+                                    <AriaButton
+                                        className={({ isPressed, isFocused }) =>
+                                            cx(
+                                                "group relative inline-flex cursor-pointer",
+                                                (isPressed || isFocused) && "rounded-full outline-2 outline-offset-2 outline-focus-ring",
+                                            )
+                                        }
+                                    >
+                                        <Avatar alt="Olivia Rhye" src="https://www.untitledui.com/images/avatars/olivia-rhye?bg=%23E0E0E0" size="md" />
+                                    </AriaButton>
+                                    <Popover
+                                        placement="bottom right"
+                                        offset={8}
+                                        className={({ isEntering, isExiting }) =>
+                                            cx(
+                                                "will-change-transform",
+                                                isEntering &&
+                                                    "duration-300 ease-out animate-in fade-in placement-right:slide-in-from-left-2 placement-top:slide-in-from-bottom-2 placement-bottom:slide-in-from-top-2",
+                                                isExiting &&
+                                                    "duration-150 ease-in animate-out fade-out placement-right:slide-out-to-left-2 placement-top:slide-out-to-bottom-2 placement-bottom:slide-out-to-top-2",
+                                            )
+                                        }
+                                    >
+                                        <NavAccountMenu />
+                                    </Popover>
+                                </DialogTrigger>
+                            )}
+                        </div>
+                    </div>
+                </section>
+
+                {showSecondaryNav && (
+                    <section className={cx("flex h-16 w-full items-center justify-center bg-primary", !hideBorder && "border-b border-secondary")}>
+                        <div className="flex w-full max-w-container items-center justify-between gap-8 px-8">
+                            <nav>
+                                <ul className="flex items-center gap-0.5">
+                                    {activeSubNavItems.map((item) => (
+                                        <li key={item.label} className="py-0.5">
+                                            <NavItemBase icon={item.icon} href={item.href} current={item.current} badge={item.badge} type="link">
+                                                {item.label}
+                                            </NavItemBase>
+                                        </li>
+                                    ))}
+                                </ul>
+                            </nav>
+
+                            <Input shortcut aria-label="Search" placeholder="Search" icon={SearchLg} size="sm" className="max-w-xs" />
+                        </div>
+                    </section>
+                )}
+            </header>
+        </>
+    );
+};
diff --git a/src/components/application/app-navigation/sidebar-navigation-base.tsx b/src/components/application/app-navigation/sidebar-navigation-base.tsx
new file mode 100644
index 0000000..65372f6
--- /dev/null
+++ b/src/components/application/app-navigation/sidebar-navigation-base.tsx
@@ -0,0 +1,5 @@
+export { MobileNavigationHeader } from "./base-components/mobile-header";
+export { NavAccountCard } from "./base-components/nav-account-card";
+export { NavItemButton } from "./base-components/nav-item-button";
+export { NavItemBase } from "./base-components/nav-item";
+export { NavList } from "./base-components/nav-list";
diff --git a/src/components/application/app-navigation/sidebar-navigation/sidebar-dual-tier.tsx b/src/components/application/app-navigation/sidebar-navigation/sidebar-dual-tier.tsx
new file mode 100644
index 0000000..51adccf
--- /dev/null
+++ b/src/components/application/app-navigation/sidebar-navigation/sidebar-dual-tier.tsx
@@ -0,0 +1,149 @@
+import type { ReactNode } from "react";
+import { useState } from "react";
+import { SearchLg } from "@untitledui/icons";
+import { AnimatePresence, motion } from "motion/react";
+import { Input } from "@/components/base/input/input";
+import { UntitledLogo } from "@/components/foundations/logo/untitledui-logo";
+import { cx } from "@/utils/cx";
+import { MobileNavigationHeader } from "../base-components/mobile-header";
+import { NavAccountCard } from "../base-components/nav-account-card";
+import { NavItemBase } from "../base-components/nav-item";
+import { NavList } from "../base-components/nav-list";
+import type { NavItemType } from "../config";
+
+interface SidebarNavigationDualTierProps {
+    /** URL of the currently active item. */
+    activeUrl?: string;
+    /** Feature card to display. */
+    featureCard?: ReactNode;
+    /** List of items to display. */
+    items: NavItemType[];
+    /** List of footer items to display. */
+    footerItems?: NavItemType[];
+    /** Whether to hide the right side border. */
+    hideBorder?: boolean;
+}
+
+export const SidebarNavigationDualTier = ({ activeUrl, hideBorder, items, footerItems = [], featureCard }: SidebarNavigationDualTierProps) => {
+    const activeItem = [...items, ...footerItems].find((item) => item.href === activeUrl || item.items?.some((subItem) => subItem.href === activeUrl));
+    const [currentItem, setCurrentItem] = useState(activeItem || items[1]);
+    const [isHovering, setIsHovering] = useState(false);
+
+    const isSecondarySidebarVisible = isHovering && Boolean(currentItem.items?.length);
+
+    const MAIN_SIDEBAR_WIDTH = 296;
+    const SECONDARY_SIDEBAR_WIDTH = 256;
+
+    const mainSidebar = (
+        <aside className="group flex h-full max-h-full max-w-full overflow-y-auto bg-primary">
+            <div
+                style={
+                    {
+                        "--width": `${MAIN_SIDEBAR_WIDTH}px`,
+                    } as React.CSSProperties
+                }
+                className={cx(
+                    "relative flex w-full flex-col border-r border-secondary pt-4 transition duration-300 lg:w-(--width) lg:pt-6",
+                    hideBorder && !isSecondarySidebarVisible && "border-transparent",
+                )}
+            >
+                <div className="flex flex-col gap-5 px-4 lg:px-5">
+                    <UntitledLogo className="h-8" />
+                    <Input shortcut size="sm" aria-label="Search" placeholder="Search" icon={SearchLg} />
+                </div>
+
+                <NavList activeUrl={activeUrl} items={items} className="lg:hidden" />
+
+                <ul className="mt-4 hidden flex-col px-4 lg:flex">
+                    {items.map((item) => (
+                        <li key={item.label + item.href} className="py-0.5">
+                            <NavItemBase
+                                current={currentItem.href === item.href}
+                                href={item.href}
+                                badge={item.badge}
+                                icon={item.icon}
+                                type="link"
+                                onClick={() => setCurrentItem(item)}
+                            >
+                                {item.label}
+                            </NavItemBase>
+                        </li>
+                    ))}
+                </ul>
+                <div className="mt-auto flex flex-col gap-4 px-2 py-4 lg:px-4 lg:py-6">
+                    {footerItems.length > 0 && (
+                        <ul className="flex flex-col">
+                            {footerItems.map((item) => (
+                                <li key={item.label + item.href} className="py-0.5">
+                                    <NavItemBase
+                                        current={currentItem.href === item.href}
+                                        href={item.href}
+                                        badge={item.badge}
+                                        icon={item.icon}
+                                        type="link"
+                                        onClick={() => setCurrentItem(item)}
+                                    >
+                                        {item.label}
+                                    </NavItemBase>
+                                </li>
+                            ))}
+                        </ul>
+                    )}
+
+                    {featureCard}
+
+                    <NavAccountCard />
+                </div>
+            </div>
+        </aside>
+    );
+
+    const secondarySidebar = (
+        <AnimatePresence initial={false}>
+            {isSecondarySidebarVisible && (
+                <motion.div
+                    initial={{ width: 0, borderColor: "var(--color-border-secondary)" }}
+                    animate={{ width: SECONDARY_SIDEBAR_WIDTH, borderColor: "var(--color-border-secondary)" }}
+                    exit={{ width: 0, borderColor: "rgba(0,0,0,0)", transition: { borderColor: { type: "tween", delay: 0.05 } } }}
+                    transition={{ type: "spring", damping: 26, stiffness: 220, bounce: 0 }}
+                    className={cx("relative h-full overflow-x-hidden overflow-y-auto bg-primary", !hideBorder && "box-content border-r-[1.5px]")}
+                >
+                    <ul style={{ width: SECONDARY_SIDEBAR_WIDTH }} className="flex h-full flex-col p-4 py-6">
+                        {currentItem.items?.map((item) => (
+                            <li key={item.label + item.href} className="py-0.5">
+                                <NavItemBase current={activeUrl === item.href} href={item.href} icon={item.icon} badge={item.badge} type="link">
+                                    {item.label}
+                                </NavItemBase>
+                            </li>
+                        ))}
+                    </ul>
+                </motion.div>
+            )}
+        </AnimatePresence>
+    );
+
+    return (
+        <>
+            {/* Mobile header navigation */}
+            <MobileNavigationHeader>{mainSidebar}</MobileNavigationHeader>
+
+            {/* Desktop sidebar navigation */}
+            <div
+                className="z-50 hidden lg:fixed lg:inset-y-0 lg:left-0 lg:flex"
+                onPointerEnter={() => setIsHovering(true)}
+                onPointerLeave={() => setIsHovering(false)}
+            >
+                {mainSidebar}
+                {secondarySidebar}
+            </div>
+
+            {/* Placeholder to take up physical space because the real sidebar has `fixed` position. */}
+            <div
+                style={{
+                    paddingLeft: MAIN_SIDEBAR_WIDTH,
+                }}
+                className="invisible hidden lg:sticky lg:top-0 lg:bottom-0 lg:left-0 lg:block"
+            />
+        </>
+    );
+};
diff --git a/src/components/application/app-navigation/sidebar-navigation/sidebar-section-dividers.tsx b/src/components/application/app-navigation/sidebar-navigation/sidebar-section-dividers.tsx
new file mode 100644
index 0000000..c6bf227
--- /dev/null
+++ b/src/components/application/app-navigation/sidebar-navigation/sidebar-section-dividers.tsx
@@ -0,0 +1,58 @@
+import { SearchLg } from "@untitledui/icons";
+import { Input } from "@/components/base/input/input";
+import { UntitledLogo } from "@/components/foundations/logo/untitledui-logo";
+import { MobileNavigationHeader } from "../base-components/mobile-header";
+import { NavAccountCard } from "../base-components/nav-account-card";
+import { NavList } from "../base-components/nav-list";
+import type { NavItemDividerType, NavItemType } from "../config";
+
+interface SidebarNavigationSectionDividersProps {
+    /** URL of the currently active item. */
+    activeUrl?: string;
+    /** List of items to display. */
+    items: (NavItemType | NavItemDividerType)[];
+}
+
+export const SidebarNavigationSectionDividers = ({ activeUrl, items }: SidebarNavigationSectionDividersProps) => {
+    const MAIN_SIDEBAR_WIDTH = 292;
+
+    const content = (
+        <aside
+            style={
+                {
+                    "--width": `${MAIN_SIDEBAR_WIDTH}px`,
+                } as React.CSSProperties
+            }
+            className="flex h-full w-full max-w-full flex-col justify-between overflow-auto border-secondary bg-primary pt-4 shadow-xs md:border-r lg:w-(--width) lg:rounded-xl lg:border lg:pt-5"
+        >
+            <div className="flex flex-col gap-5 px-4 lg:px-5">
+                <UntitledLogo className="h-8" />
+                <Input shortcut size="sm" aria-label="Search" placeholder="Search" icon={SearchLg} />
+            </div>
+
+            <NavList activeUrl={activeUrl} items={items} className="mt-5" />
+
+            <div className="mt-auto flex flex-col gap-5 px-2 py-4 lg:gap-6 lg:px-4 lg:py-4">
+                <NavAccountCard />
+            </div>
+        </aside>
+    );
+
+    return (
+        <>
+            {/* Mobile header navigation */}
+            <MobileNavigationHeader>{content}</MobileNavigationHeader>
+
+            {/* Desktop sidebar navigation */}
+            <div className="hidden lg:fixed lg:inset-y-0 lg:left-0 lg:flex lg:py-1 lg:pl-1">{content}</div>
+
+            {/* Placeholder to take up physical space because the real sidebar has `fixed` position. */}
+            <div
+                style={{
+                    paddingLeft: MAIN_SIDEBAR_WIDTH + 4, // Add 4px to account for the padding in the sidebar wrapper
+                }}
+                className="invisible hidden lg:sticky lg:top-0 lg:bottom-0 lg:left-0 lg:block"
+            />
+        </>
+    );
+};
diff --git a/src/components/application/app-navigation/sidebar-navigation/sidebar-sections-subheadings.tsx b/src/components/application/app-navigation/sidebar-navigation/sidebar-sections-subheadings.tsx
new file mode 100644
index 0000000..8e8ab1e
--- /dev/null
+++ b/src/components/application/app-navigation/sidebar-navigation/sidebar-sections-subheadings.tsx
@@ -0,0 +1,72 @@
+import { UntitledLogo } from "@/components/foundations/logo/untitledui-logo";
+import { MobileNavigationHeader } from "../base-components/mobile-header";
+import { NavAccountCard } from "../base-components/nav-account-card";
+import { NavItemBase } from "../base-components/nav-item";
+import type { NavItemType } from "../config";
+
+interface SidebarNavigationSectionsSubheadingsProps {
+    /** URL of the currently active item. */
+    activeUrl?: string;
+    /** List of items to display. */
+    items: Array<{ label: string; items: NavItemType[] }>;
+}
+
+export const SidebarNavigationSectionsSubheadings = ({ activeUrl = "/", items }: SidebarNavigationSectionsSubheadingsProps) => {
+    const MAIN_SIDEBAR_WIDTH = 292;
+
+    const content = (
+        <aside
+            style={
+                {
+                    "--width": `${MAIN_SIDEBAR_WIDTH}px`,
+                } as React.CSSProperties
+            }
+            className="flex h-full w-full max-w-full flex-col justify-between overflow-auto border-secondary bg-primary pt-4 shadow-xs md:border-r lg:w-(--width) lg:rounded-xl lg:border lg:pt-5"
+        >
+            <div className="flex flex-col gap-5 px-4 lg:px-5">
+                <UntitledLogo className="h-8" />
+            </div>
+
+            <ul className="mt-8">
+                {items.map((group) => (
+                    <li key={group.label}>
+                        <div className="px-5 pb-1">
+                            <p className="text-xs font-bold text-quaternary uppercase">{group.label}</p>
+                        </div>
+                        <ul className="px-4 pb-5">
+                            {group.items.map((item) => (
+                                <li key={item.label} className="py-0.5">
+                                    <NavItemBase icon={item.icon} href={item.href} badge={item.badge} type="link" current={item.href === activeUrl}>
+                                        {item.label}
+                                    </NavItemBase>
+                                </li>
+                            ))}
+                        </ul>
+                    </li>
+                ))}
+            </ul>
+
+            <div className="mt-auto flex flex-col gap-5 px-2 py-4 lg:gap-6 lg:px-4 lg:py-4">
+                <NavAccountCard />
+            </div>
+        </aside>
+    );
+
+    return (
+        <>
+            {/* Mobile header navigation */}
+            <MobileNavigationHeader>{content}</MobileNavigationHeader>
+
+            {/* Desktop sidebar navigation */}
+            <div className="hidden lg:fixed lg:inset-y-0 lg:left-0 lg:flex lg:py-1 lg:pl-1">{content}</div>
+
+            {/* Placeholder to take up physical space because the real sidebar has `fixed` position. */}
+            <div
+                style={{
+                    paddingLeft: MAIN_SIDEBAR_WIDTH + 4,
+                }}
+                className="invisible hidden lg:sticky lg:top-0 lg:bottom-0 lg:left-0 lg:block"
+            />
+        </>
+    );
+};
diff --git a/src/components/application/app-navigation/sidebar-navigation/sidebar-simple.tsx b/src/components/application/app-navigation/sidebar-navigation/sidebar-simple.tsx
new file mode 100644
index 0000000..400d855
--- /dev/null
+++ b/src/components/application/app-navigation/sidebar-navigation/sidebar-simple.tsx
@@ -0,0 +1,97 @@
+import type { ReactNode } from "react";
+import { SearchLg } from "@untitledui/icons";
+import { Input } from "@/components/base/input/input";
+import { UntitledLogo } from "@/components/foundations/logo/untitledui-logo";
+import { cx } from "@/utils/cx";
+import { MobileNavigationHeader } from "../base-components/mobile-header";
+import { NavAccountCard } from "../base-components/nav-account-card";
+import { NavItemBase } from "../base-components/nav-item";
+import { NavList } from "../base-components/nav-list";
+import type { NavItemType } from "../config";
+
+interface SidebarNavigationProps {
+    /** URL of the currently active item. */
+    activeUrl?: string;
+    /** List of items to display. */
+    items: NavItemType[];
+    /** List of footer items to display. */
+    footerItems?: NavItemType[];
+    /** Feature card to display. */
+    featureCard?: ReactNode;
+    /** Whether to show the account card. */
+    showAccountCard?: boolean;
+    /** Whether to hide the right side border. */
+    hideBorder?: boolean;
+    /** Additional CSS classes to apply to the sidebar. */
+    className?: string;
+}
+
+export const SidebarNavigationSimple = ({
+    activeUrl,
+    items,
+    footerItems = [],
+    featureCard,
+    showAccountCard = true,
+    hideBorder = false,
+    className,
+}: SidebarNavigationProps) => {
+    const MAIN_SIDEBAR_WIDTH = 296;
+
+    const content = (
+        <aside
+            style={
+                {
+                    "--width": `${MAIN_SIDEBAR_WIDTH}px`,
+                } as React.CSSProperties
+            }
+            className={cx(
+                "flex h-full w-full max-w-full flex-col justify-between overflow-auto bg-primary pt-4 lg:w-(--width) lg:pt-6",
+                !hideBorder && "border-secondary md:border-r",
+                className,
+            )}
+        >
+            <div className="flex flex-col gap-5 px-4 lg:px-5">
+                <UntitledLogo className="h-8" />
+                <Input shortcut size="sm" aria-label="Search" placeholder="Search" icon={SearchLg} />
+            </div>
+
+            <NavList activeUrl={activeUrl} items={items} />
+
+            <div className="mt-auto flex flex-col gap-4 px-2 py-4 lg:px-4 lg:py-6">
+                {footerItems.length > 0 && (
+                    <ul className="flex flex-col">
+                        {footerItems.map((item) => (
+                            <li key={item.label} className="py-0.5">
+                                <NavItemBase badge={item.badge} icon={item.icon} href={item.href} type="link" current={item.href === activeUrl}>
+                                    {item.label}
+                                </NavItemBase>
+                            </li>
+                        ))}
+                    </ul>
+                )}
+
+                {featureCard}
+
+                {showAccountCard && <NavAccountCard />}
+            </div>
+        </aside>
+    );
+
+    return (
+        <>
+            {/* Mobile header navigation */}
+            <MobileNavigationHeader>{content}</MobileNavigationHeader>
+
+            {/* Desktop sidebar navigation */}
+            <div className="hidden lg:fixed lg:inset-y-0 lg:left-0 lg:flex">{content}</div>
+
+            {/* Placeholder to take up physical space because the real sidebar has `fixed` position. */}
+            <div
+                style={{
+                    paddingLeft: MAIN_SIDEBAR_WIDTH,
+                }}
+                className="invisible hidden lg:sticky lg:top-0 lg:bottom-0 lg:left-0 lg:block"
+            />
+        </>
+    );
+};
diff --git a/src/components/application/app-navigation/sidebar-navigation/sidebar-slim.tsx b/src/components/application/app-navigation/sidebar-navigation/sidebar-slim.tsx
new file mode 100644
index 0000000..61deb1b
--- /dev/null
+++ b/src/components/application/app-navigation/sidebar-navigation/sidebar-slim.tsx
@@ -0,0 +1,226 @@
+import type { FC } from "react";
+import { useState } from "react";
+import { LifeBuoy01, LogOut01, Settings01 } from "@untitledui/icons";
+import { AnimatePresence, motion } from "motion/react";
+import { Button as AriaButton, DialogTrigger as AriaDialogTrigger, Popover as AriaPopover } from "react-aria-components";
+import { Avatar } from "@/components/base/avatar/avatar";
+import { AvatarLabelGroup } from "@/components/base/avatar/avatar-label-group";
+import { Button } from "@/components/base/buttons/button";
+import { ButtonUtility } from "@/components/base/buttons/button-utility";
+import { UntitledLogo } from "@/components/foundations/logo/untitledui-logo";
+import { UntitledLogoMinimal } from "@/components/foundations/logo/untitledui-logo-minimal";
+import { cx } from "@/utils/cx";
+import { MobileNavigationHeader } from "../base-components/mobile-header";
+import { NavAccountMenu } from "../base-components/nav-account-card";
+import { NavItemBase } from "../base-components/nav-item";
+import { NavItemButton } from "../base-components/nav-item-button";
+import { NavList } from "../base-components/nav-list";
+import type { NavItemType } from "../config";
+
+interface SidebarNavigationSlimProps {
+    /** URL of the currently active item. */
+    activeUrl?: string;
+    /** List of items to display. */
+    items: (NavItemType & { icon: FC<{ className?: string }> })[];
+    /** List of footer items to display. */
+    footerItems?: (NavItemType & { icon: FC<{ className?: string }> })[];
+    /** Whether to hide the border. */
+    hideBorder?: boolean;
+    /** Whether to hide the right side border. */
+    hideRightBorder?: boolean;
+}
+
+export const SidebarNavigationSlim = ({ activeUrl, items, footerItems = [], hideBorder, hideRightBorder }: SidebarNavigationSlimProps) => {
+    const activeItem = [...items, ...footerItems].find((item) => item.href === activeUrl || item.items?.some((subItem) => subItem.href === activeUrl));
+    const [currentItem, setCurrentItem] = useState(activeItem || items[1]);
+    const [isHovering, setIsHovering] = useState(false);
+
+    const isSecondarySidebarVisible = isHovering && Boolean(currentItem.items?.length);
+
+    const MAIN_SIDEBAR_WIDTH = 68;
+    const SECONDARY_SIDEBAR_WIDTH = 268;
+
+    const mainSidebar = (
+        <aside
+            style={{
+                width: MAIN_SIDEBAR_WIDTH,
+            }}
+            className={cx(
+                "group flex h-full max-h-full max-w-full overflow-y-auto py-1 pl-1 transition duration-100 ease-linear",
+                isSecondarySidebarVisible && "bg-primary",
+            )}
+        >
+            <div
+                className={cx(
+                    "flex w-auto flex-col justify-between rounded-xl bg-primary pt-5 ring-1 ring-secondary transition duration-300 ring-inset",
+                    hideBorder && !isSecondarySidebarVisible && "ring-transparent",
+                )}
+            >
+                <div className="flex justify-center px-3">
+                    <UntitledLogoMinimal className="size-8" />
+                </div>
+
+                <ul className="mt-4 flex flex-col gap-0.5 px-3">
+                    {items.map((item) => (
+                        <li key={item.label}>
+                            <NavItemButton
+                                size="md"
+                                current={currentItem.href === item.href}
+                                href={item.href}
+                                label={item.label || ""}
+                                icon={item.icon}
+                                onClick={() => setCurrentItem(item)}
+                            />
+                        </li>
+                    ))}
+                </ul>
+                <div className="mt-auto flex flex-col gap-4 px-3 py-5">
+                    {footerItems.length > 0 && (
+                        <ul className="flex flex-col gap-0.5">
+                            {footerItems.map((item) => (
+                                <li key={item.label}>
+                                    <NavItemButton
+                                        size="md"
+                                        current={currentItem.href === item.href}
+                                        label={item.label || ""}
+                                        href={item.href}
+                                        icon={item.icon}
+                                        onClick={() => setCurrentItem(item)}
+                                    />
+                                </li>
+                            ))}
+                        </ul>
+                    )}
+
+                    <AriaDialogTrigger>
+                        <AriaButton
+                            className={({ isPressed, isFocused }) =>
+                                cx("group relative inline-flex rounded-full", (isPressed || isFocused) && "outline-2 outline-offset-2 outline-focus-ring")
+                            }
+                        >
+                            <Avatar status="online" src="https://www.untitledui.com/images/avatars/olivia-rhye?fm=webp&q=80" size="md" alt="Olivia Rhye" />
+                        </AriaButton>
+                        <AriaPopover
+                            placement="right bottom"
+                            offset={8}
+                            crossOffset={6}
+                            className={({ isEntering, isExiting }) =>
+                                cx(
+                                    "will-change-transform",
+                                    isEntering &&
+                                        "duration-300 ease-out animate-in fade-in placement-right:slide-in-from-left-2 placement-top:slide-in-from-bottom-2 placement-bottom:slide-in-from-top-2",
+                                    isExiting &&
+                                        "duration-150 ease-in animate-out fade-out placement-right:slide-out-to-left-2 placement-top:slide-out-to-bottom-2 placement-bottom:slide-out-to-top-2",
+                                )
+                            }
+                        >
+                            <NavAccountMenu />
+                        </AriaPopover>
+                    </AriaDialogTrigger>
+                </div>
+            </div>
+        </aside>
+    );
+
+    const secondarySidebar = (
+        <AnimatePresence initial={false}>
+            {isSecondarySidebarVisible && (
+                <motion.div
+                    initial={{ width: 0, borderColor: "var(--color-border-secondary)" }}
+                    animate={{ width: SECONDARY_SIDEBAR_WIDTH, borderColor: "var(--color-border-secondary)" }}
+                    exit={{ width: 0, borderColor: "rgba(0,0,0,0)", transition: { borderColor: { type: "tween", delay: 0.05 } } }}
+                    transition={{ type: "spring", damping: 26, stiffness: 220, bounce: 0 }}
+                    className={cx(
+                        "relative h-full overflow-x-hidden overflow-y-auto bg-primary",
+                        !(hideBorder || hideRightBorder) && "box-content border-r-[1.5px]",
+                    )}
+                >
+                    <div style={{ width: SECONDARY_SIDEBAR_WIDTH }} className="flex h-full flex-col px-4 pt-6">
+                        <h3 className="text-sm font-semibold text-brand-secondary">{currentItem.label}</h3>
+                        <ul className="py-2">
+                            {currentItem.items?.map((item) => (
+                                <li key={item.label} className="py-0.5">
+                                    <NavItemBase current={activeUrl === item.href} href={item.href} icon={item.icon} badge={item.badge} type="link">
+                                        {item.label}
+                                    </NavItemBase>
+                                </li>
+                            ))}
+                        </ul>
+                        <div className="sticky bottom-0 mt-auto flex justify-between border-t border-secondary bg-primary px-2 py-5">
+                            <div>
+                                <p className="text-sm font-semibold text-primary">Olivia Rhye</p>
+                                <p className="text-sm text-tertiary">olivia@untitledui.com</p>
+                            </div>
+                            <div className="absolute top-2.5 right-0">
+                                <ButtonUtility size="sm" color="tertiary" tooltip="Log out" icon={LogOut01} />
+                            </div>
+                        </div>
+                    </div>
+                </motion.div>
+            )}
+        </AnimatePresence>
+    );
+
+    return (
+        <>
+            {/* Desktop sidebar navigation */}
+            <div
+                className="z-50 hidden lg:fixed lg:inset-y-0 lg:left-0 lg:flex"
+                onPointerEnter={() => setIsHovering(true)}
+                onPointerLeave={() => setIsHovering(false)}
+            >
+                {mainSidebar}
+                {secondarySidebar}
+            </div>
+
+            {/* Placeholder to take up physical space because the real sidebar has `fixed` position. */}
+            <div
+                style={{
+                    paddingLeft: MAIN_SIDEBAR_WIDTH,
+                }}
+                className="invisible hidden lg:sticky lg:top-0 lg:bottom-0 lg:left-0 lg:block"
+            />
+
+            {/* Mobile header navigation */}
+            <MobileNavigationHeader>
+                <aside className="group flex h-full max-h-full w-full max-w-full flex-col justify-between overflow-y-auto bg-primary pt-4">
+                    <div className="px-4">
+                        <UntitledLogo className="h-8" />
+                    </div>
+
+                    <NavList items={items} />
+
+                    <div className="mt-auto flex flex-col gap-5 px-2 py-4">
+                        <div className="flex flex-col gap-2">
+                            <NavItemBase current={activeUrl === "/support"} type="link" href="/support" icon={LifeBuoy01}>
+                                Support
+                            </NavItemBase>
+                            <NavItemBase current={activeUrl === "/settings"} type="link" href="/settings" icon={Settings01}>
+                                Settings
+                            </NavItemBase>
+                        </div>
+
+                        <div className="relative flex items-center gap-3 border-t border-secondary pt-6 pr-8 pl-2">
+                            <AvatarLabelGroup
+                                status="online"
+                                size="md"
+                                src="https://www.untitledui.com/images/avatars/olivia-rhye?fm=webp&q=80"
+                                title="Olivia Rhye"
+                                subtitle="olivia@untitledui.com"
+                            />
+
+                            <div className="absolute top-1/2 right-0 -translate-y-1/2">
+                                <Button
+                                    size="sm"
+                                    color="tertiary"
+                                    iconLeading={<LogOut01 className="size-5 text-fg-quaternary transition-inherit-all group-hover:text-fg-quaternary_hover" />}
+                                    className="p-1.5!"
+                                />
+                            </div>
+                        </div>
+                    </div>
+                </aside>
+            </MobileNavigationHeader>
+        </>
+    );
+};
diff --git a/src/components/application/date-picker/calendar.tsx b/src/components/application/date-picker/calendar.tsx
new file mode 100644
index 0000000..4ab17a3
--- /dev/null
+++ b/src/components/application/date-picker/calendar.tsx
@@ -0,0 +1,99 @@
+import type { HTMLAttributes, PropsWithChildren } from "react";
+import { Fragment, useContext, useState } from "react";
+import { type CalendarDate, getLocalTimeZone, today } from "@internationalized/date";
+import { ChevronLeft, ChevronRight } from "@untitledui/icons";
+import type { CalendarProps as AriaCalendarProps, DateValue } from "react-aria-components";
+import {
+    Calendar as AriaCalendar,
+    CalendarContext as AriaCalendarContext,
+    CalendarGrid as AriaCalendarGrid,
+    CalendarGridBody as AriaCalendarGridBody,
+    CalendarGridHeader as AriaCalendarGridHeader,
+    CalendarHeaderCell as AriaCalendarHeaderCell,
+    CalendarStateContext as AriaCalendarStateContext,
+    Heading as AriaHeading,
+    useSlottedContext,
+} from "react-aria-components";
+import { Button } from "@/components/base/buttons/button";
+import { cx } from "@/utils/cx";
+import { CalendarCell } from "./cell";
+import { DateInput } from "./date-input";
+
+export const CalendarContextProvider = ({ children }: PropsWithChildren) => {
+    const [value, onChange] = useState<DateValue | null>(null);
+    const [focusedValue, onFocusChange] = useState<DateValue | undefined>();
+
+    return <AriaCalendarContext.Provider value={{ value, onChange, focusedValue, onFocusChange }}>{children}</AriaCalendarContext.Provider>;
+};
+
+const PresetButton = ({ value, children, ...props }: HTMLAttributes<HTMLButtonElement> & { value: CalendarDate }) => {
+    const context = useContext(AriaCalendarStateContext);
+
+    if (!context) {
+        throw new Error("Preset must be used within a Calendar component");
+    }
+
+    const handleClick = () => {
+        context.setValue(value);
+        context.setFocusedDate(value);
+    };
+
+    return (
+        <Button
+            {...props}
+            // It's important to give `null` explicitly to the `slot` prop
+            // otherwise the button will throw an error due to not using one of
+            // the required slots inside the Calendar component.
+            // Passing `null` will tell the button to not use a slot context.
+            slot={null}
+            size="md"
+            color="secondary"
+            onClick={handleClick}
+        >
+            {children}
+        </Button>
+    );
+};
+
+interface CalendarProps extends AriaCalendarProps<DateValue> {
+    /** The dates to highlight. */
+    highlightedDates?: DateValue[];
+}
+
+export const Calendar = ({ highlightedDates, className, ...props }: CalendarProps) => {
+    const context = useSlottedContext(AriaCalendarContext)!;
+
+    const ContextWrapper = context ? Fragment : CalendarContextProvider;
+
+    return (
+        <ContextWrapper>
+            <AriaCalendar {...props} className={(state) => cx("flex flex-col gap-3", typeof className === "function" ? className(state) : className)}>
+                <header className="flex items-center justify-between">
+                    <Button slot="previous" iconLeading={ChevronLeft} size="sm" color="tertiary" className="size-8" />
+                    <AriaHeading className="text-sm font-semibold text-fg-secondary" />
+                    <Button slot="next" iconLeading={ChevronRight} size="sm" color="tertiary" className="size-8" />
+                </header>
+
+                <div className="flex gap-3">
+                    <DateInput className="flex-1" />
+                    <PresetButton value={today(getLocalTimeZone())}>Today</PresetButton>
+                </div>
+
+                <AriaCalendarGrid weekdayStyle="short" className="w-max">
+                    <AriaCalendarGridHeader className="border-b-4 border-transparent">
+                        {(day) => (
+                            <AriaCalendarHeaderCell className="p-0">
+                                <div className="flex size-10 items-center justify-center text-sm font-medium text-secondary">{day.slice(0, 2)}</div>
+                            </AriaCalendarHeaderCell>
+                        )}
+                    </AriaCalendarGridHeader>
+                    <AriaCalendarGridBody className="[&_td]:p-0 [&_tr]:border-b-4 [&_tr]:border-transparent [&_tr:last-of-type]:border-none">
+                        {(date) => (
+                            <CalendarCell date={date} isHighlighted={highlightedDates?.some((highlightedDate) => date.compare(highlightedDate) === 0)} />
+                        )}
+                    </AriaCalendarGridBody>
+                </AriaCalendarGrid>
+            </AriaCalendar>
+        </ContextWrapper>
+    );
+};
diff --git a/src/components/application/date-picker/cell.tsx b/src/components/application/date-picker/cell.tsx
new file mode 100644
index 0000000..bac6d03
--- /dev/null
+++ b/src/components/application/date-picker/cell.tsx
@@ -0,0 +1,104 @@
+import { getDayOfWeek, getLocalTimeZone, isToday } from "@internationalized/date";
+import type { CalendarCellProps as AriaCalendarCellProps } from "react-aria-components";
+import { CalendarCell as AriaCalendarCell, RangeCalendarContext, useLocale, useSlottedContext } from "react-aria-components";
+import { cx } from "@/utils/cx";
+
+interface CalendarCellProps extends AriaCalendarCellProps {
+    /** Whether the calendar is a range calendar. */
+    isRangeCalendar?: boolean;
+    /** Whether the cell is highlighted. */
+    isHighlighted?: boolean;
+}
+
+export const CalendarCell = ({ date, isHighlighted, ...props }: CalendarCellProps) => {
+    const { locale } = useLocale();
+    const dayOfWeek = getDayOfWeek(date, locale);
+    const rangeCalendarContext = useSlottedContext(RangeCalendarContext);
+
+    const isRangeCalendar = !!rangeCalendarContext;
+
+    const start = rangeCalendarContext?.value?.start;
+    const end = rangeCalendarContext?.value?.end;
+
+    const isAfterStart = start ? date.compare(start) > 0 : true;
+    const isBeforeEnd = end ? date.compare(end) < 0 : true;
+
+    const isAfterOrOnStart = start && date.compare(start) >= 0;
+    const isBeforeOrOnEnd = end && date.compare(end) <= 0;
+    const isInRange = isAfterOrOnStart && isBeforeOrOnEnd;
+
+    const lastDayOfMonth = new Date(date.year, date.month, 0).getDate();
+    const isLastDayOfMonth = date.day === lastDayOfMonth;
+    const isFirstDayOfMonth = date.day === 1;
+
+    const isTodayDate = isToday(date, getLocalTimeZone());
+
+    return (
+        <AriaCalendarCell
+            {...props}
+            date={date}
+            className={({ isDisabled, isFocusVisible, isSelectionStart, isSelectionEnd, isSelected, isOutsideMonth }) => {
+                const isRoundedLeft = isSelectionStart || dayOfWeek === 0;
+                const isRoundedRight = isSelectionEnd || dayOfWeek === 6;
+
+                return cx(
+                    "relative size-10 focus:outline-none",
+                    isRoundedLeft && "rounded-l-full",
+                    isRoundedRight && "rounded-r-full",
+                    isInRange && isDisabled && "bg-active",
+                    isSelected && isRangeCalendar && "bg-active",
+                    isDisabled ? "pointer-events-none" : "cursor-pointer",
+                    isFocusVisible ? "z-10" : "z-0",
+                    isRangeCalendar && isOutsideMonth && "hidden",
+
+                    // Show gradient on last day of month if it's within the selected range.
+                    isLastDayOfMonth &&
+                        isSelected &&
+                        isBeforeEnd &&
+                        isRangeCalendar &&
+                        "after:absolute after:inset-0 after:translate-x-full after:bg-gradient-to-l after:from-transparent after:to-bg-active in-[[role=gridcell]:last-child]:after:hidden",
+
+                    // Show gradient on first day of month if it's within the selected range.
+                    isFirstDayOfMonth &&
+                        isSelected &&
+                        isAfterStart &&
+                        isRangeCalendar &&
+                        "after:absolute after:inset-0 after:-translate-x-full after:bg-gradient-to-r after:from-transparent after:to-bg-active in-[[role=gridcell]:first-child]:after:hidden",
+                );
+            }}
+        >
+            {({ isDisabled, isFocusVisible, isSelectionStart, isSelectionEnd, isSelected, formattedDate }) => {
+                const markedAsSelected = isSelectionStart || isSelectionEnd || (isSelected && !isDisabled && !isRangeCalendar);
+
+                return (
+                    <div
+                        className={cx(
+                            "relative flex size-full items-center justify-center rounded-full text-sm",
+                            // Disabled state.
+                            isDisabled ? "text-disabled" : "text-secondary hover:text-secondary_hover",
+                            // Focus ring, visible while the cell has keyboard focus.
+                            isFocusVisible ? "outline-2 outline-offset-2 outline-focus-ring" : "",
+                            // Hover state for cells in the middle of the range.
+                            isSelected && !isDisabled && isRangeCalendar ? "font-medium" : "",
+                            markedAsSelected && "bg-brand-solid font-medium text-white hover:bg-brand-solid_hover hover:text-white",
+                            // Hover state for non-selected cells.
+                            !isSelected && !isDisabled ? "hover:bg-primary_hover hover:font-medium!" : "",
+                            !isSelected && isTodayDate ? "bg-active font-medium hover:bg-secondary_hover" : "",
+                        )}
+                    >
+                        {formattedDate}
+
+                        {(isHighlighted || isTodayDate) && (
+                            <div
+                                className={cx(
+                                    "absolute bottom-1 left-1/2 size-1.25 -translate-x-1/2 rounded-full",
+                                    isDisabled ? "bg-fg-disabled" : markedAsSelected ? "bg-fg-white" : "bg-fg-brand-primary",
+                                )}
+                            />
+                        )}
+                    </div>
+                );
+            }}
+        </AriaCalendarCell>
+    );
+};
diff --git a/src/components/application/date-picker/date-input.tsx b/src/components/application/date-picker/date-input.tsx
new file mode 100644
index 0000000..ae8e177
--- /dev/null
+++ b/src/components/application/date-picker/date-input.tsx
@@ -0,0 +1,30 @@
+import type { DateInputProps as AriaDateInputProps } from "react-aria-components";
+import { DateInput as AriaDateInput, DateSegment as AriaDateSegment } from "react-aria-components";
+import { cx } from "@/utils/cx";
+
+interface DateInputProps extends Omit<AriaDateInputProps, "children"> {}
+
+export const DateInput = (props: DateInputProps) => {
+    return (
+        <AriaDateInput
+            {...props}
+            className={cx(
+                "flex rounded-lg bg-primary px-2.5 py-2 text-md shadow-xs ring-1 ring-primary ring-inset focus-within:ring-2 focus-within:ring-brand",
+                typeof props.className === "string" && props.className,
+            )}
+        >
+            {(segment) => (
+                <AriaDateSegment
+                    segment={segment}
+                    className={cx(
+                        "rounded px-0.5 text-primary tabular-nums caret-transparent focus:bg-brand-solid focus:font-medium focus:text-white focus:outline-hidden",
+                        // The placeholder segment.
+                        segment.isPlaceholder && "text-placeholder uppercase",
+                        // The separator "/" segment.
+                        segment.type === "literal" && "text-fg-quaternary",
+                    )}
+                />
+            )}
+        </AriaDateInput>
+    );
+};
diff --git a/src/components/application/date-picker/date-picker.tsx b/src/components/application/date-picker/date-picker.tsx
new file mode 100644
index 0000000..3160851
--- /dev/null
+++ b/src/components/application/date-picker/date-picker.tsx
@@ -0,0 +1,84 @@
+import { getLocalTimeZone, today } from "@internationalized/date";
+import { useControlledState } from "@react-stately/utils";
+import { Calendar as CalendarIcon } from "@untitledui/icons";
+import { useDateFormatter } from "react-aria";
+import type { DatePickerProps as AriaDatePickerProps, DateValue } from "react-aria-components";
+import { DatePicker as AriaDatePicker, Dialog as AriaDialog, Group as AriaGroup, Popover as AriaPopover } from "react-aria-components";
+import { Button } from "@/components/base/buttons/button";
+import { cx } from "@/utils/cx";
+import { Calendar } from "./calendar";
+
+const highlightedDates = [today(getLocalTimeZone())];
+
+interface DatePickerProps extends AriaDatePickerProps<DateValue> {
+    /** The function to call when the apply button is clicked. */
+    onApply?: () => void;
+    /** The function to call when the cancel button is clicked. */
+    onCancel?: () => void;
+}
+
+export const DatePicker = ({ value: valueProp, defaultValue, onChange, onApply, onCancel, ...props }: DatePickerProps) => {
+    const formatter = useDateFormatter({
+        month: "short",
+        day: "numeric",
+        year: "numeric",
+    });
+    const [value, setValue] = useControlledState(valueProp, defaultValue || null, onChange);
+
+    const formattedDate = value ? formatter.format(value.toDate(getLocalTimeZone())) : "Select date";
+
+    return (
+        <AriaDatePicker shouldCloseOnSelect={false} {...props} value={value} onChange={setValue}>
+            <AriaGroup>
+                <Button size="md" color="secondary" iconLeading={CalendarIcon}>
+                    {formattedDate}
+                </Button>
+            </AriaGroup>
+            <AriaPopover
+                offset={8}
+                placement="bottom right"
+                className={({ isEntering, isExiting }) =>
+                    cx(
+                        "origin-(--trigger-anchor-point) will-change-transform",
+                        isEntering &&
+                            "duration-150 ease-out animate-in fade-in placement-right:slide-in-from-left-0.5 placement-top:slide-in-from-bottom-0.5 placement-bottom:slide-in-from-top-0.5",
+                        isExiting &&
+                            "duration-100 ease-in animate-out fade-out placement-right:slide-out-to-left-0.5 placement-top:slide-out-to-bottom-0.5 placement-bottom:slide-out-to-top-0.5",
+                    )
+                }
+            >
+                <AriaDialog className="rounded-2xl bg-primary shadow-xl ring ring-secondary_alt">
+                    {({ close }) => (
+                        <>
+                            <div className="flex px-6 py-5">
+                                <Calendar highlightedDates={highlightedDates} />
+                            </div>
+                            <div className="grid grid-cols-2 gap-3 border-t border-secondary p-4">
+                                <Button
+                                    size="md"
+                                    color="secondary"
+                                    onClick={() => {
+                                        onCancel?.();
+                                        close();
+                                    }}
+                                >
+                                    Cancel
+                                </Button>
+                                <Button
+                                    size="md"
+                                    color="primary"
+                                    onClick={() => {
+                                        onApply?.();
+                                        close();
+                                    }}
+                                >
+                                    Apply
+                                </Button>
+                            </div>
+                        </>
+                    )}
+                </AriaDialog>
+            </AriaPopover>
+        </AriaDatePicker>
+    );
+};
diff --git a/src/components/application/date-picker/date-range-picker.tsx b/src/components/application/date-picker/date-range-picker.tsx
new file mode 100644
index 0000000..754aac8
--- /dev/null
+++ b/src/components/application/date-picker/date-range-picker.tsx
@@ -0,0 +1,161 @@
+import { useMemo, useState } from "react";
+import { endOfMonth, endOfWeek, getLocalTimeZone, startOfMonth, startOfWeek, today } from "@internationalized/date";
+import { useControlledState } from "@react-stately/utils";
+import { Calendar as CalendarIcon } from "@untitledui/icons";
+import { useDateFormatter } from "react-aria";
+import type { DateRangePickerProps as AriaDateRangePickerProps, DateValue } from "react-aria-components";
+import { DateRangePicker as AriaDateRangePicker, Dialog as AriaDialog, Group as AriaGroup, Popover as AriaPopover, useLocale } from "react-aria-components";
+import { Button } from "@/components/base/buttons/button";
+import { cx } from "@/utils/cx";
+import { DateInput } from "./date-input";
+import { RangeCalendar } from "./range-calendar";
+import { RangePresetButton } from "./range-preset";
+
+const now = today(getLocalTimeZone());
+
+const highlightedDates = [today(getLocalTimeZone())];
+
+interface DateRangePickerProps extends AriaDateRangePickerProps<DateValue> {
+    /** The function to call when the apply button is clicked. */
+    onApply?: () => void;
+    /** The function to call when the cancel button is clicked. */
+    onCancel?: () => void;
+}
+
+export const DateRangePicker = ({ value: valueProp, defaultValue, onChange, onApply, onCancel, ...props }: DateRangePickerProps) => {
+    const { locale } = useLocale();
+    const formatter = useDateFormatter({
+        month: "short",
+        day: "numeric",
+        year: "numeric",
+    });
+    const [value, setValue] = useControlledState(valueProp, defaultValue || null, onChange);
+    const [focusedValue, setFocusedValue] = useState<DateValue | null>(null);
+
+    const formattedStartDate = value?.start ? formatter.format(value.start.toDate(getLocalTimeZone())) : "Select date";
+    const formattedEndDate = value?.end ? formatter.format(value.end.toDate(getLocalTimeZone())) : "Select date";
+
+    const presets = useMemo(
+        () => ({
+            today: { label: "Today", value: { start: now, end: now } },
+            yesterday: { label: "Yesterday", value: { start: now.subtract({ days: 1 }), end: now.subtract({ days: 1 }) } },
+            thisWeek: { label: "This week", value: { start: startOfWeek(now, locale), end: endOfWeek(now, locale) } },
+            lastWeek: {
+                label: "Last week",
+                value: {
+                    start: startOfWeek(now, locale).subtract({ weeks: 1 }),
+                    end: endOfWeek(now, locale).subtract({ weeks: 1 }),
+                },
+            },
+            thisMonth: { label: "This month", value: { start: startOfMonth(now), end: endOfMonth(now) } },
+            lastMonth: {
+                label: "Last month",
+                value: {
+                    start: startOfMonth(now).subtract({ months: 1 }),
+                    end: endOfMonth(now).subtract({ months: 1 }),
+                },
+            },
+            thisYear: { label: "This year", value: { start: startOfMonth(now.set({ month: 1 })), end: endOfMonth(now.set({ month: 12 })) } },
+            lastYear: {
+                label: "Last year",
+                value: {
+                    start: startOfMonth(now.set({ month: 1 }).subtract({ years: 1 })),
+                    end: endOfMonth(now.set({ month: 12 }).subtract({ years: 1 })),
+                },
+            },
+            allTime: {
+                label: "All time",
+                value: {
+                    start: now.set({ year: 2000, month: 1, day: 1 }),
+                    end: now,
+                },
+            },
+        }),
+        [locale],
+    );
+
+    return (
+        <AriaDateRangePicker aria-label="Date range picker" shouldCloseOnSelect={false} {...props} value={value} onChange={setValue}>
+            <AriaGroup>
+                <Button size="md" color="secondary" iconLeading={CalendarIcon}>
+                    {!value ? <span className="text-placeholder">Select dates</span> : `${formattedStartDate} – ${formattedEndDate}`}
+                </Button>
+            </AriaGroup>
+            <AriaPopover
+                placement="bottom right"
+                offset={8}
+                className={({ isEntering, isExiting }) =>
+                    cx(
+                        "origin-(--trigger-anchor-point) will-change-transform",
+                        isEntering &&
+                            "duration-150 ease-out animate-in fade-in placement-right:slide-in-from-left-0.5 placement-top:slide-in-from-bottom-0.5 placement-bottom:slide-in-from-top-0.5",
+                        isExiting &&
+                            "duration-100 ease-in animate-out fade-out placement-right:slide-out-to-left-0.5 placement-top:slide-out-to-bottom-0.5 placement-bottom:slide-out-to-top-0.5",
+                    )
+                }
+            >
+                <AriaDialog className="flex rounded-2xl bg-primary shadow-xl ring ring-secondary_alt focus:outline-hidden">
+                    {({ close }) => (
+                        <>
+                            <div className="hidden w-38 flex-col gap-0.5 border-r border-solid border-secondary p-3 lg:flex">
+                                {Object.values(presets).map((preset) => (
+                                    <RangePresetButton
+                                        key={preset.label}
+                                        value={preset.value}
+                                        onClick={() => {
+                                            setValue(preset.value);
+                                            setFocusedValue(preset.value.start);
+                                        }}
+                                    >
+                                        {preset.label}
+                                    </RangePresetButton>
+                                ))}
+                            </div>
+                            <div className="flex flex-col">
+                                <RangeCalendar
+                                    focusedValue={focusedValue}
+                                    onFocusChange={setFocusedValue}
+                                    highlightedDates={highlightedDates}
+                                    presets={{
+                                        lastWeek: presets.lastWeek,
+                                        lastMonth: presets.lastMonth,
+                                        lastYear: presets.lastYear,
+                                    }}
+                                />
+                                <div className="flex justify-between gap-3 border-t border-secondary p-4">
+                                    <div className="hidden items-center gap-3 md:flex">
+                                        <DateInput slot="start" className="w-36" />
+                                        <div className="text-md text-quaternary">–</div>
+                                        <DateInput slot="end" className="w-36" />
+                                    </div>
+                                    <div className="grid w-full grid-cols-2 gap-3 md:flex md:w-auto">
+                                        <Button
+                                            size="md"
+                                            color="secondary"
+                                            onClick={() => {
+                                                onCancel?.();
+                                                close();
+                                            }}
+                                        >
+                                            Cancel
+                                        </Button>
+                                        <Button
+                                            size="md"
+                                            color="primary"
+                                            onClick={() => {
+                                                onApply?.();
+                                                close();
+                                            }}
+                                        >
+                                            Apply
+                                        </Button>
+                                    </div>
+                                </div>
+                            </div>
+                        </>
+                    )}
+                </AriaDialog>
+            </AriaPopover>
+        </AriaDateRangePicker>
+    );
+};
diff --git a/src/components/application/date-picker/range-calendar.tsx b/src/components/application/date-picker/range-calendar.tsx
new file mode 100644
index 0000000..1db50f3
--- /dev/null
+++ b/src/components/application/date-picker/range-calendar.tsx
@@ -0,0 +1,159 @@
+import type { HTMLAttributes, PropsWithChildren } from "react";
+import { Fragment, useContext, useState } from "react";
+import type { CalendarDate } from "@internationalized/date";
+import { ChevronLeft, ChevronRight } from "@untitledui/icons";
+import { useDateFormatter } from "react-aria";
+import type { RangeCalendarProps as AriaRangeCalendarProps, DateValue } from "react-aria-components";
+import {
+    CalendarGrid as AriaCalendarGrid,
+    CalendarGridBody as AriaCalendarGridBody,
+    CalendarGridHeader as AriaCalendarGridHeader,
+    CalendarHeaderCell as AriaCalendarHeaderCell,
+    RangeCalendar as AriaRangeCalendar,
+    RangeCalendarContext,
+    RangeCalendarStateContext,
+    useSlottedContext,
+} from "react-aria-components";
+import { Button } from "@/components/base/buttons/button";
+import { useBreakpoint } from "@/hooks/use-breakpoint";
+import { CalendarCell } from "./cell";
+import { DateInput } from "./date-input";
+
+export const RangeCalendarContextProvider = ({ children }: PropsWithChildren) => {
+    const [value, onChange] = useState<{ start: DateValue; end: DateValue } | null>(null);
+    const [focusedValue, onFocusChange] = useState<DateValue | undefined>();
+
+    return <RangeCalendarContext.Provider value={{ value, onChange, focusedValue, onFocusChange }}>{children}</RangeCalendarContext.Provider>;
+};
+
+const RangeCalendarTitle = ({ part }: { part: "start" | "end" }) => {
+    const context = useContext(RangeCalendarStateContext);
+
+    if (!context) {
+        throw new Error("<RangeCalendarTitle /> must be used within a <RangeCalendar /> component.");
+    }
+
+    const formatter = useDateFormatter({
+        month: "long",
+        year: "numeric",
+        calendar: context.visibleRange.start.calendar.identifier,
+        timeZone: context.timeZone,
+    });
+
+    return part === "start"
+        ? formatter.format(context.visibleRange.start.toDate(context.timeZone))
+        : formatter.format(context.visibleRange.end.toDate(context.timeZone));
+};
+
+const MobilePresetButton = ({ value, children, ...props }: HTMLAttributes<HTMLButtonElement> & { value: { start: DateValue; end: DateValue } }) => {
+    const context = useContext(RangeCalendarStateContext);
+
+    return (
+        <Button
+            {...props}
+            slot={null}
+            size="sm"
+            color="link-color"
+            onClick={() => {
+                context?.setValue(value);
+                context?.setFocusedDate(value.start as CalendarDate);
+            }}
+        >
+            {children}
+        </Button>
+    );
+};
+
+interface RangeCalendarProps extends AriaRangeCalendarProps<DateValue> {
+    /** The dates to highlight. */
+    highlightedDates?: DateValue[];
+    /** The date presets to display. */
+    presets?: Record<string, { label: string; value: { start: DateValue; end: DateValue } }>;
+}
+
+export const RangeCalendar = ({ presets, ...props }: RangeCalendarProps) => {
+    const isDesktop = useBreakpoint("md");
+    const context = useSlottedContext(RangeCalendarContext);
+
+    const ContextWrapper = context ? Fragment : RangeCalendarContextProvider;
+
+    return (
+        <ContextWrapper>
+            <AriaRangeCalendar
+                className="flex items-start"
+                visibleDuration={{
+                    months: isDesktop ? 2 : 1,
+                }}
+                {...props}
+            >
+                <div className="flex flex-col gap-3 px-6 py-5">
+                    <header className="relative flex items-center justify-between md:justify-start">
+                        <Button slot="previous" iconLeading={ChevronLeft} size="sm" color="tertiary" className="size-8" />
+
+                        <h2 className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 text-sm font-semibold text-fg-secondary">
+                            <RangeCalendarTitle part="start" />
+                        </h2>
+
+                        <Button slot="next" iconLeading={ChevronRight} size="sm" color="tertiary" className="size-8 md:hidden" />
+                    </header>
+
+                    {!isDesktop && (
+                        <div className="flex items-center gap-2 md:hidden">
+                            <DateInput slot="start" className="flex-1" />
+                            <div className="text-md text-quaternary">–</div>
+                            <DateInput slot="end" className="flex-1" />
+                        </div>
+                    )}
+
+                    {!isDesktop && presets && (
+                        <div className="mt-1 flex justify-between gap-3 px-2 md:hidden">
+                            {Object.values(presets).map((preset) => (
+                                <MobilePresetButton key={preset.label} value={preset.value}>
+                                    {preset.label}
+                                </MobilePresetButton>
+                            ))}
+                        </div>
+                    )}
+
+                    <AriaCalendarGrid weekdayStyle="short" className="w-max">
+                        <AriaCalendarGridHeader>
+                            {(day) => (
+                                <AriaCalendarHeaderCell className="border-b-4 border-transparent p-0">
+                                    <div className="flex size-10 items-center justify-center text-sm font-medium text-secondary">{day.slice(0, 2)}</div>
+                                </AriaCalendarHeaderCell>
+                            )}
+                        </AriaCalendarGridHeader>
+                        <AriaCalendarGridBody className="[&_td]:p-0 [&_tr]:border-b-4 [&_tr]:border-transparent [&_tr:last-of-type]:border-none">
+                            {(date) => <CalendarCell date={date} />}
+                        </AriaCalendarGridBody>
+                    </AriaCalendarGrid>
+                </div>
+
+                {isDesktop && (
+                    <div className="flex flex-col gap-3 border-l border-secondary px-6 py-5">
+                        <header className="relative flex items-center justify-end">
+                            <h2 className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 text-sm font-semibold text-fg-secondary">
+                                <RangeCalendarTitle part="end" />
+                            </h2>
+
+                            <Button slot="next" iconLeading={ChevronRight} size="sm" color="tertiary" className="size-8" />
+                        </header>
+
+                        <AriaCalendarGrid weekdayStyle="short" offset={{ months: 1 }} className="w-max">
+                            <AriaCalendarGridHeader>
+                                {(day) => (
+                                    <AriaCalendarHeaderCell className="border-b-4 border-transparent p-0">
+                                        <div className="flex size-10 items-center justify-center text-sm font-medium text-secondary">{day.slice(0, 2)}</div>
+                                    </AriaCalendarHeaderCell>
+                                )}
+                            </AriaCalendarGridHeader>
+                            <AriaCalendarGridBody className="[&_td]:p-0 [&_tr]:border-b-4 [&_tr]:border-transparent [&_tr:last-of-type]:border-none">
+                                {(date) => <CalendarCell date={date} />}
+                            </AriaCalendarGridBody>
+                        </AriaCalendarGrid>
+                    </div>
+                )}
+            </AriaRangeCalendar>
+        </ContextWrapper>
+    );
+};
diff --git a/src/components/application/date-picker/range-preset.tsx b/src/components/application/date-picker/range-preset.tsx
new file mode 100644
index 0000000..0e5a2c3
--- /dev/null
+++ b/src/components/application/date-picker/range-preset.tsx
@@ -0,0 +1,26 @@
+import { type HTMLAttributes } from "react";
+import { type DateValue, RangeCalendarContext, useSlottedContext } from "react-aria-components";
+import { cx } from "@/utils/cx";
+
+interface RangePresetButtonProps extends HTMLAttributes<HTMLButtonElement> {
+    value: { start: DateValue; end: DateValue };
+}
+
+export const RangePresetButton = ({ value, className, children, ...props }: RangePresetButtonProps) => {
+    const context = useSlottedContext(RangeCalendarContext);
+
+    const isSelected = context?.value?.start?.compare(value.start) === 0 && context?.value?.end?.compare(value.end) === 0;
+
+    return (
+        <button
+            {...props}
+            className={cx(
+                "cursor-pointer rounded-md px-3 py-2 text-left text-sm font-medium outline-focus-ring transition duration-100 ease-linear focus-visible:outline-2 focus-visible:outline-offset-2",
+                isSelected ? "bg-active text-secondary_hover hover:bg-secondary_hover" : "text-secondary hover:bg-primary_hover hover:text-secondary_hover",
+                className,
+            )}
+        >
+            {children}
+        </button>
+    );
+};
diff --git a/src/components/application/empty-state/empty-state.tsx b/src/components/application/empty-state/empty-state.tsx
new file mode 100644
index 0000000..d0a4d5e
--- /dev/null
+++ b/src/components/application/empty-state/empty-state.tsx
@@ -0,0 +1,144 @@
+import type { ComponentProps, ComponentPropsWithRef } from "react";
+import { Children, createContext, isValidElement, useContext } from "react";
+import { FileIcon } from "@untitledui/file-icons";
+import { SearchLg } from "@untitledui/icons";
+import { FeaturedIcon as FeaturedIconbase } from "@/components/foundations/featured-icon/featured-icon";
+import type { BackgroundPatternProps } from "@/components/shared-assets/background-patterns";
+import { BackgroundPattern } from "@/components/shared-assets/background-patterns";
+import { Illustration as Illustrations } from "@/components/shared-assets/illustrations";
+import { cx } from "@/utils/cx";
+
+interface RootContextProps {
+    size?: "sm" | "md" | "lg";
+}
+
+const RootContext = createContext<RootContextProps>({ size: "lg" });
+
+interface RootProps extends ComponentPropsWithRef<"div">, RootContextProps {}
+
+const Root = ({ size = "lg", ...props }: RootProps) => {
+    return (
+        <RootContext.Provider value={{ size }}>
+            <div {...props} className={cx("mx-auto flex w-full max-w-lg flex-col items-center justify-center", props.className)} />
+        </RootContext.Provider>
+    );
+};
+
+const FeaturedIcon = ({ color = "gray", theme = "modern", icon = SearchLg, size = "lg", ...props }: ComponentPropsWithRef<typeof FeaturedIconbase>) => {
+    const { size: rootSize } = useContext(RootContext);
+
+    return <FeaturedIconbase {...props} {...{ color, theme, icon }} size={rootSize === "lg" ? "xl" : size} />;
+};
+
+const Illustration = ({ type = "cloud", color = "gray", size = "lg", ...props }: ComponentPropsWithRef<typeof Illustrations>) => {
+    const { size: rootSize } = useContext(RootContext);
+
+    return (
+        <Illustrations
+            role="img"
+            {...props}
+            {...{ type, color }}
+            size={rootSize === "sm" ? "sm" : rootSize === "md" ? "md" : size}
+            className={cx("z-10", props.className)}
+        />
+    );
+};
+
+interface FileTypeIconProps extends ComponentPropsWithRef<"div"> {
+    type?: ComponentProps<typeof FileIcon>["type"];
+    theme?: ComponentProps<typeof FileIcon>["variant"];
+}
+
+const FileTypeIcon = ({ type = "folder", theme = "solid", ...props }: FileTypeIconProps) => {
+    return (
+        <div {...props} className={cx("relative z-10 flex rounded-full bg-linear-to-b from-gray-50 to-gray-200 p-8", props.className)}>
+            <FileIcon type={type} variant={theme} className="size-10 drop-shadow-sm" />
+        </div>
+    );
+};
+
+interface HeaderProps extends ComponentPropsWithRef<"div"> {
+    pattern?: "none" | BackgroundPatternProps["pattern"];
+    patternSize?: "sm" | "md" | "lg";
+}
+
+const Header = ({ pattern = "circle", patternSize = "md", ...props }: HeaderProps) => {
+    const { size } = useContext(RootContext);
+    // Whether we are passing `Illustration` component as children.
+    const hasIllustration = Children.toArray(props.children).some((headerChild) => isValidElement(headerChild) && headerChild.type === Illustration);
+
+    return (
+        <header
+            {...props}
+            className={cx("relative mb-4", (size === "md" || size === "lg") && "mb-5", hasIllustration && size === "lg" && "mb-6!", props.className)}
+        >
+            {pattern !== "none" && (
+                <BackgroundPattern size={patternSize} pattern={pattern} className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2" />
+            )}
+            {props.children}
+        </header>
+    );
+};
+
+const Content = (props: ComponentPropsWithRef<"div">) => {
+    const { size } = useContext(RootContext);
+
+    return (
+        <main
+            {...props}
+            className={cx(
+                "z-10 mb-6 flex w-full max-w-88 flex-col items-center justify-center gap-1",
+                (size === "md" || size === "lg") && "mb-8 gap-2",
+                props.className,
+            )}
+        />
+    );
+};
+
+const Footer = (props: ComponentPropsWithRef<"div">) => {
+    return <footer {...props} className={cx("z-10 flex gap-3", props.className)} />;
+};
+
+const Title = (props: ComponentPropsWithRef<"h1">) => {
+    const { size } = useContext(RootContext);
+
+    return (
+        <h1
+            {...props}
+            className={cx(
+                "text-md font-semibold text-primary",
+                size === "md" && "text-lg font-semibold",
+                size === "lg" && "text-xl font-semibold",
+                props.className,
+            )}
+        />
+    );
+};
+
+const Description = (props: ComponentPropsWithRef<"p">) => {
+    const { size } = useContext(RootContext);
+
+    return <p {...props} className={cx("text-center text-sm text-tertiary", size === "lg" && "text-md", props.className)} />;
+};
+
+const EmptyState = Root as typeof Root & {
+    Title: typeof Title;
+    Header: typeof Header;
+    Footer: typeof Footer;
+    Content: typeof Content;
+    Description: typeof Description;
+    Illustration: typeof Illustration;
+    FeaturedIcon: typeof FeaturedIcon;
+    FileTypeIcon: typeof FileTypeIcon;
+};
+
+EmptyState.Title = Title;
+EmptyState.Header = Header;
+EmptyState.Footer = Footer;
+EmptyState.Content = Content;
+EmptyState.Description = Description;
+EmptyState.Illustration = Illustration;
+EmptyState.FeaturedIcon = FeaturedIcon;
+EmptyState.FileTypeIcon = FileTypeIcon;
+
+export { EmptyState };
diff --git a/src/components/application/file-upload/file-upload-base.tsx b/src/components/application/file-upload/file-upload-base.tsx
new file mode 100644
index 0000000..1274138
--- /dev/null
+++ b/src/components/application/file-upload/file-upload-base.tsx
@@ -0,0 +1,394 @@
+import type { ComponentProps, ComponentPropsWithRef } from "react";
+import { useId, useRef, useState } from "react";
+import type { FileIcon } from "@untitledui/file-icons";
+import { FileIcon as FileTypeIcon } from "@untitledui/file-icons";
+import { CheckCircle, Trash01, UploadCloud02, XCircle } from "@untitledui/icons";
+import { AnimatePresence, motion } from "motion/react";
+import { Button } from "@/components/base/buttons/button";
+import { ButtonUtility } from "@/components/base/buttons/button-utility";
+import { ProgressBar } from "@/components/base/progress-indicators/progress-indicators";
+import { FeaturedIcon } from "@/components/foundations/featured-icon/featured-icon";
+import { cx } from "@/utils/cx";
+
+/**
+ * Returns a human-readable file size.
+ * @param bytes - The size of the file in bytes.
+ * @returns A string representing the file size in a human-readable format.
+ */
+export const getReadableFileSize = (bytes: number) => {
+    if (bytes === 0) return "0 KB";
+
+    const suffixes = ["B", "KB", "MB", "GB", "TB", "PB", "EB", "ZB", "YB"];
+
+    const i = Math.floor(Math.log(bytes) / Math.log(1024));
+
+    return Math.floor(bytes / Math.pow(1024, i)) + " " + suffixes[i];
+};
+
+interface FileUploadDropZoneProps {
+    /** The class name of the drop zone. */
+    className?: string;
+    /**
+     * A hint text explaining what files can be dropped.
+     */
+    hint?: string;
+    /**
+     * Disables dropping or uploading files.
+     */
+    isDisabled?: boolean;
+    /**
+     * Specifies the types of files that the server accepts.
+     * Examples: "image/*", ".pdf,image/*", "image/*,video/mpeg,application/pdf"
+     */
+    accept?: string;
+    /**
+     * Allows multiple file uploads.
+     */
+    allowsMultiple?: boolean;
+    /**
+     * Maximum file size in bytes.
+     */
+    maxSize?: number;
+    /**
+     * Callback function that is called with the list of dropped files
+     * when files are dropped on the drop zone.
+     */
+    onDropFiles?: (files: FileList) => void;
+    /**
+     * Callback function that is called with the list of unaccepted files
+     * when files are dropped on the drop zone.
+     */
+    onDropUnacceptedFiles?: (files: FileList) => void;
+    /**
+     * Callback function that is called with the list of files that exceed
+     * the size limit when files are dropped on the drop zone.
+     */
+    onSizeLimitExceed?: (files: FileList) => void;
+}
+
+export const FileUploadDropZone = ({
+    className,
+    hint,
+    isDisabled,
+    accept,
+    allowsMultiple = true,
+    maxSize,
+    onDropFiles,
+    onDropUnacceptedFiles,
+    onSizeLimitExceed,
+}: FileUploadDropZoneProps) => {
+    const id = useId();
+    const inputRef = useRef<HTMLInputElement>(null);
+    const [isInvalid, setIsInvalid] = useState(false);
+    const [isDraggingOver, setIsDraggingOver] = useState(false);
+
+    const isFileTypeAccepted = (file: File): boolean => {
+        if (!accept) return true;
+
+        // Split the accept string into individual types
+        const acceptedTypes = accept.split(",").map((type) => type.trim());
+
+        return acceptedTypes.some((acceptedType) => {
+            // Handle file extensions (e.g., .pdf, .doc)
+            if (acceptedType.startsWith(".")) {
+                const extension = `.${file.name.split(".").pop()?.toLowerCase()}`;
+                return extension === acceptedType.toLowerCase();
+            }
+
+            // Handle wildcards (e.g., image/*)
+            if (acceptedType.endsWith("/*")) {
+                const typePrefix = acceptedType.split("/")[0];
+                return file.type.startsWith(`${typePrefix}/`);
+            }
+
+            // Handle exact MIME types (e.g., application/pdf)
+            return file.type === acceptedType;
+        });
+    };
+
+    const handleDragIn = (event: React.DragEvent<HTMLDivElement>) => {
+        if (isDisabled) return;
+
+        event.preventDefault();
+        event.stopPropagation();
+        setIsDraggingOver(true);
+    };
+
+    const handleDragOut = (event: React.DragEvent<HTMLDivElement>) => {
+        if (isDisabled) return;
+
+        event.preventDefault();
+        event.stopPropagation();
+        setIsDraggingOver(false);
+    };
+
+    const processFiles = (files: File[]): void => {
+        // Reset the invalid state when processing files.
+        setIsInvalid(false);
+
+        const acceptedFiles: File[] = [];
+        const unacceptedFiles: File[] = [];
+        const oversizedFiles: File[] = [];
+
+        // If multiple files are not allowed, only process the first file
+        const filesToProcess = allowsMultiple ? files : files.slice(0, 1);
+
+        filesToProcess.forEach((file) => {
+            // Check file size first
+            if (maxSize && file.size > maxSize) {
+                oversizedFiles.push(file);
+                return;
+            }
+
+            // Then check file type
+            if (isFileTypeAccepted(file)) {
+                acceptedFiles.push(file);
+            } else {
+                unacceptedFiles.push(file);
+            }
+        });
+
+        // Handle oversized files
+        if (oversizedFiles.length > 0 && typeof onSizeLimitExceed === "function") {
+            const dataTransfer = new DataTransfer();
+            oversizedFiles.forEach((file) => dataTransfer.items.add(file));
+
+            setIsInvalid(true);
+            onSizeLimitExceed(dataTransfer.files);
+        }
+
+        // Handle accepted files
+        if (acceptedFiles.length > 0 && typeof onDropFiles === "function") {
+            const dataTransfer = new DataTransfer();
+            acceptedFiles.forEach((file) => dataTransfer.items.add(file));
+            onDropFiles(dataTransfer.files);
+        }
+
+        // Handle unaccepted files
+        if (unacceptedFiles.length > 0 && typeof onDropUnacceptedFiles === "function") {
+            const unacceptedDataTransfer = new DataTransfer();
+            unacceptedFiles.forEach((file) => unacceptedDataTransfer.items.add(file));
+
+            setIsInvalid(true);
+            onDropUnacceptedFiles(unacceptedDataTransfer.files);
+        }
+
+        // Clear the input value to ensure the same file can be selected again
+        if (inputRef.current) {
+            inputRef.current.value = "";
+        }
+    };
+
+    const handleDrop = (event: React.DragEvent<HTMLDivElement>) => {
+        if (isDisabled) return;
+
+        handleDragOut(event);
+        processFiles(Array.from(event.dataTransfer.files));
+    };
+
+    const handleInputFileChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+        processFiles(Array.from(event.target.files || []));
+    };
+
+    return (
+        <div
+            data-dropzone
+            onDragOver={handleDragIn}
+            onDragEnter={handleDragIn}
+            onDragLeave={handleDragOut}
+            onDragEnd={handleDragOut}
+            onDrop={handleDrop}
+            className={cx(
+                "relative flex flex-col items-center gap-3 rounded-xl bg-primary px-6 py-4 text-tertiary ring-1 ring-secondary transition duration-100 ease-linear ring-inset",
+                isDraggingOver && "ring-2 ring-brand",
+                isDisabled && "cursor-not-allowed bg-disabled_subtle ring-disabled_subtle",
+                className,
+            )}
+        >
+            <FeaturedIcon color="gray" theme="modern" size="md">
+                <UploadCloud02 className="size-5" />
+            </FeaturedIcon>
+
+            <div className="flex flex-col gap-1 text-center">
+                <div className="flex justify-center gap-1 text-center">
+                    <input
+                        ref={inputRef}
+                        id={id}
+                        type="file"
+                        className="peer sr-only"
+                        disabled={isDisabled}
+                        accept={accept}
+                        multiple={allowsMultiple}
+                        onChange={handleInputFileChange}
+                    />
+                    <label htmlFor={id} className="flex cursor-pointer">
+                        <Button color="link-color" size="md" isDisabled={isDisabled} onClick={() => inputRef.current?.click()}>
+                            Click to upload <span className="md:hidden">and attach files</span>
+                        </Button>
+                    </label>
+                    <span className="text-sm max-md:hidden">or drag and drop</span>
+                </div>
+                <p className={cx("text-xs transition duration-100 ease-linear", isInvalid && "text-error-primary")}>
+                    {hint || "SVG, PNG, JPG or GIF (max. 800x400px)"}
+                </p>
+            </div>
+        </div>
+    );
+};
+
+export interface FileListItemProps {
+    /** The name of the file. */
+    name: string;
+    /** The size of the file. */
+    size: number;
+    /** The upload progress of the file. */
+    progress: number;
+    /** Whether the file failed to upload. */
+    failed?: boolean;
+    /** The type of the file. */
+    type?: ComponentProps<typeof FileIcon>["type"];
+    /** The class name of the file list item. */
+    className?: string;
+    /** The variant of the file icon. */
+    fileIconVariant?: ComponentProps<typeof FileTypeIcon>["variant"];
+    /** The function to call when the file is deleted. */
+    onDelete?: () => void;
+    /** The function to call when the file upload is retried. */
+    onRetry?: () => void;
+}
+
+export const FileListItemProgressBar = ({ name, size, progress, failed, type, fileIconVariant, onDelete, onRetry, className }: FileListItemProps) => {
+    const isComplete = progress === 100;
+
+    return (
+        <motion.li
+            layout="position"
+            className={cx(
+                "relative flex gap-3 rounded-xl bg-primary p-4 ring-1 ring-secondary transition-shadow duration-100 ease-linear ring-inset",
+                failed && "ring-2 ring-error",
+                className,
+            )}
+        >
+            <FileTypeIcon className="size-10 shrink-0 dark:hidden" type={type ?? "empty"} theme="light" variant={fileIconVariant ?? "default"} />
+            <FileTypeIcon className="size-10 shrink-0 not-dark:hidden" type={type ?? "empty"} theme="dark" variant={fileIconVariant ?? "default"} />
+
+            <div className="flex min-w-0 flex-1 flex-col items-start">
+                <div className="flex w-full max-w-full min-w-0 flex-1">
+                    <div className="min-w-0 flex-1">
+                        <p className="truncate text-sm font-medium text-secondary">{name}</p>
+
+                        <div className="mt-0.5 flex items-center gap-2">
+                            <p className="truncate text-sm whitespace-nowrap text-tertiary">{getReadableFileSize(size)}</p>
+
+                            <hr className="h-3 w-px rounded-t-full rounded-b-full border-none bg-border-primary" />
+
+                            <div className="flex items-center gap-1">
+                                {isComplete && <CheckCircle className="size-4 stroke-[2.5px] text-fg-success-primary" />}
+                                {isComplete && <p className="text-sm font-medium text-success-primary">Complete</p>}
+
+                                {!isComplete && !failed && <UploadCloud02 className="stroke-[2.5px size-4 text-fg-quaternary" />}
+                                {!isComplete && !failed && <p className="text-sm font-medium text-quaternary">Uploading...</p>}
+
+                                {failed && <XCircle className="size-4 text-fg-error-primary" />}
+                                {failed && <p className="text-sm font-medium text-error-primary">Failed</p>}
+                            </div>
+                        </div>
+                    </div>
+
+                    <ButtonUtility color="tertiary" tooltip="Delete" icon={Trash01} size="xs" className="-mt-2 -mr-2 self-start" onClick={onDelete} />
+                </div>
+
+                {!failed && (
+                    <div className="mt-1 w-full">
+                        <ProgressBar labelPosition="right" max={100} min={0} value={progress} />
+                    </div>
+                )}
+
+                {failed && (
+                    <Button color="link-destructive" size="sm" onClick={onRetry} className="mt-1.5">
+                        Try again
+                    </Button>
+                )}
+            </div>
+        </motion.li>
+    );
+};
+
+export const FileListItemProgressFill = ({ name, size, progress, failed, type, fileIconVariant, onDelete, onRetry, className }: FileListItemProps) => {
+    const isComplete = progress === 100;
+
+    return (
+        <motion.li layout="position" className={cx("relative flex gap-3 overflow-hidden rounded-xl bg-primary p-4", className)}>
+            {/* Progress fill. */}
+            <div
+                style={{ transform: `translateX(-${100 - progress}%)` }}
+                className={cx("absolute inset-0 size-full bg-secondary transition duration-75 ease-linear", isComplete && "opacity-0")}
+                role="progressbar"
+                aria-valuenow={progress}
+                aria-valuemin={0}
+                aria-valuemax={100}
+            />
+            {/* Inner ring. */}
+            <div
+                className={cx(
+                    "absolute inset-0 size-full rounded-[inherit] ring-1 ring-secondary transition duration-100 ease-linear ring-inset",
+                    failed && "ring-2 ring-error",
+                )}
+            />
+            <FileTypeIcon className="relative size-10 shrink-0 dark:hidden" type={type ?? "empty"} theme="light" variant={fileIconVariant ?? "solid"} />
+            <FileTypeIcon className="relative size-10 shrink-0 not-dark:hidden" type={type ?? "empty"} theme="dark" variant={fileIconVariant ?? "solid"} />
+
+            <div className="relative flex min-w-0 flex-1">
+                <div className="relative flex min-w-0 flex-1 flex-col items-start">
+                    <div className="w-full min-w-0 flex-1">
+                        <p className="truncate text-sm font-medium text-secondary">{name}</p>
+
+                        <div className="mt-0.5 flex items-center gap-2">
+                            <p className="text-sm text-tertiary">{failed ? "Upload failed, please try again" : getReadableFileSize(size)}</p>
+
+                            {!failed && (
+                                <>
+                                    <hr className="h-3 w-px rounded-t-full rounded-b-full border-none bg-border-primary" />
+                                    <div className="flex items-center gap-1">
+                                        {isComplete && <CheckCircle className="size-4 stroke-[2.5px] text-fg-success-primary" />}
+                                        {!isComplete && <UploadCloud02 className="size-4 stroke-[2.5px] text-fg-quaternary" />}
+
+                                        <p className="text-sm text-tertiary">{progress}%</p>
+                                    </div>
+                                </>
+                            )}
+                        </div>
+                    </div>
+
+                    {failed && (
+                        <Button color="link-destructive" size="sm" onClick={onRetry} className="mt-1.5">
+                            Try again
+                        </Button>
+                    )}
+                </div>
+
+                <ButtonUtility color="tertiary" tooltip="Delete" icon={Trash01} size="xs" className="-mt-2 -mr-2 self-start" onClick={onDelete} />
+            </div>
+        </motion.li>
+    );
+};
+
+const FileUploadRoot = (props: ComponentPropsWithRef<"div">) => (
+    <div {...props} className={cx("flex flex-col gap-4", props.className)}>
+        {props.children}
+    </div>
+);
+
+const FileUploadList = (props: ComponentPropsWithRef<"ul">) => (
+    <ul {...props} className={cx("flex flex-col gap-3", props.className)}>
+        <AnimatePresence initial={false}>{props.children}</AnimatePresence>
+    </ul>
+);
+
+export const FileUpload = {
+    Root: FileUploadRoot,
+    List: FileUploadList,
+    DropZone: FileUploadDropZone,
+    ListItemProgressBar: FileListItemProgressBar,
+    ListItemProgressFill: FileListItemProgressFill,
+};
diff --git a/src/components/application/loading-indicator/loading-indicator.tsx b/src/components/application/loading-indicator/loading-indicator.tsx
new file mode 100644
index 0000000..a8233a1
--- /dev/null
+++ b/src/components/application/loading-indicator/loading-indicator.tsx
@@ -0,0 +1,121 @@
+import { cx } from "@/utils/cx";
+
+const styles = {
+    sm: {
+        root: "gap-4",
+        label: "text-sm font-medium",
+        spinner: "size-8",
+    },
+    md: {
+        root: "gap-4",
+        label: "text-sm font-medium",
+        spinner: "size-12",
+    },
+    lg: {
+        root: "gap-4",
+        label: "text-lg font-medium",
+        spinner: "size-14",
+    },
+    xl: {
+        root: "gap-5",
+        label: "text-lg font-medium",
+        spinner: "size-16",
+    },
+};
+
+interface LoadingIndicatorProps {
+    /**
+     * The visual style of the loading indicator.
+     * @default 'line-simple'
+     */
+    type?: "line-simple" | "line-spinner" | "dot-circle";
+    /**
+     * The size of the loading indicator.
+     * @default 'sm'
+     */
+    size?: "sm" | "md" | "lg" | "xl";
+    /**
+     * Optional text label displayed below the indicator.
+     */
+    label?: string;
+}
+
+export const LoadingIndicator = ({ type = "line-simple", size = "sm", label }: LoadingIndicatorProps) => {
+    const renderSpinner = () => {
+        if (type === "line-spinner") {
+            return (
+                <svg className={cx("animate-spin", styles[size].spinner)} viewBox="0 0 32 32" fill="none">
+                    <circle
+                        className="stroke-fg-brand-primary"
+                        cx="16"
+                        cy="16"
+                        r="14"
+                        fill="none"
+                        strokeWidth="4"
+                        strokeDashoffset="40"
+                        strokeDasharray="100"
+                        strokeLinecap="round"
+                    />
+                </svg>
+            );
+        }
+
+        if (type === "dot-circle") {
+            return (
+                <svg className={cx("animate-spin text-fg-brand-primary", styles[size].spinner)} viewBox="0 0 36 36" fill="none">
+                    <path
+                        d="M34 18C34 15.8989 33.5861 13.8183 32.7821 11.8771C31.978 9.93586 30.7994 8.17203 29.3137 6.68629C27.828 5.20055 26.0641 4.022 24.1229 3.21793C22.1817 2.41385 20.1011 2 18 2C15.8988 2 13.8183 2.41385 11.8771 3.21793C9.93585 4.022 8.17203 5.20055 6.68629 6.68629C5.20055 8.17203 4.022 9.93586 3.21793 11.8771C2.41385 13.8183 2 15.8989 2 18"
+                        stroke="url(#paint0)"
+                        strokeWidth="4"
+                        strokeLinecap="round"
+                        strokeLinejoin="round"
+                        strokeDasharray="0.1 8"
+                    />
+                    <path
+                        d="M3.21793 24.1229C4.022 26.0641 5.20055 27.828 6.68629 29.3137C8.17203 30.7994 9.93585 31.978 11.8771 32.7821C13.8183 33.5861 15.8988 34 18 34C20.1011 34 22.1817 33.5861 24.1229 32.7821C26.0641 31.978 27.828 30.7994 29.3137 29.3137C30.7994 27.828 31.978 26.0641 32.7821 24.1229"
+                        stroke="url(#paint1)"
+                        strokeWidth="4"
+                        strokeLinecap="round"
+                        strokeLinejoin="round"
+                        strokeDasharray="0.1 8"
+                    />
+                    <defs>
+                        <linearGradient id="paint0" x1="34" y1="18" x2="2" y2="18" gradientUnits="userSpaceOnUse">
+                            <stop stopColor="currentColor" />
+                            <stop offset="1" stopColor="currentColor" stopOpacity="0.5" />
+                        </linearGradient>
+                        <linearGradient id="paint1" x1="33" y1="23.5" x2="3" y2="24" gradientUnits="userSpaceOnUse">
+                            <stop stopOpacity="0" stopColor="currentColor" />
+                            <stop offset="1" stopColor="currentColor" stopOpacity="0.48" />
+                        </linearGradient>
+                    </defs>
+                </svg>
+            );
+        }
+
+        // Default case: type === "line-simple"
+        return (
+            <svg className={cx("animate-spin", styles[size].spinner)} viewBox="0 0 32 32" fill="none">
+                <circle className="text-bg-tertiary" cx="16" cy="16" r="14" stroke="currentColor" strokeWidth="4" />
+                <circle
+                    className="stroke-fg-brand-primary"
+                    cx="16"
+                    cy="16"
+                    r="14"
+                    fill="none"
+                    strokeWidth="4"
+                    strokeDashoffset="75"
+                    strokeDasharray="100"
+                    strokeLinecap="round"
+                />
+            </svg>
+        );
+    };
+
+    return (
+        <div className={cx("flex flex-col items-center justify-center", styles[size].root)}>
+            {renderSpinner()}
+            {label && <span className={cx("text-secondary", styles[size].label)}>{label}</span>}
+        </div>
+    );
+};
diff --git a/src/components/application/modals/modal.tsx b/src/components/application/modals/modal.tsx
new file mode 100644
index 0000000..bfd3896
--- /dev/null
+++ b/src/components/application/modals/modal.tsx
@@ -0,0 +1,39 @@
+import type { DialogProps as AriaDialogProps, ModalOverlayProps as AriaModalOverlayProps } from "react-aria-components";
+import { Dialog as AriaDialog, DialogTrigger as AriaDialogTrigger, Modal as AriaModal, ModalOverlay as AriaModalOverlay } from "react-aria-components";
+import { cx } from "@/utils/cx";
+
+export const DialogTrigger = AriaDialogTrigger;
+
+export const ModalOverlay = (props: AriaModalOverlayProps) => {
+    return (
+        <AriaModalOverlay
+            {...props}
+            className={(state) =>
+                cx(
+                    "fixed inset-0 z-50 flex min-h-dvh w-full items-end justify-center overflow-y-auto bg-overlay/70 px-4 pt-4 pb-[clamp(16px,8vh,64px)] outline-hidden backdrop-blur-[6px] sm:items-center sm:justify-center sm:p-8",
+                    state.isEntering && "duration-300 ease-out animate-in fade-in",
+                    state.isExiting && "duration-200 ease-in animate-out fade-out",
+                    typeof props.className === "function" ? props.className(state) : props.className,
+                )
+            }
+        />
+    );
+};
+
+export const Modal = (props: AriaModalOverlayProps) => (
+    <AriaModal
+        {...props}
+        className={(state) =>
+            cx(
+                "max-h-full w-full align-middle outline-hidden max-sm:overflow-y-auto max-sm:rounded-xl",
+                state.isEntering && "duration-300 ease-out animate-in zoom-in-95",
+                state.isExiting && "duration-200 ease-in animate-out zoom-out-95",
+                typeof props.className === "function" ? props.className(state) : props.className,
+            )
+        }
+    />
+);
+
+export const Dialog = (props: AriaDialogProps) => (
+    <AriaDialog {...props} className={cx("flex w-full items-center justify-center outline-hidden", props.className)} />
+);
diff --git a/src/components/application/pagination/pagination-base.tsx b/src/components/application/pagination/pagination-base.tsx
new file mode 100644
index 0000000..db462ba
--- /dev/null
+++ b/src/components/application/pagination/pagination-base.tsx
@@ -0,0 +1,376 @@
+import type { CSSProperties, FC, HTMLAttributes, ReactNode } from "react";
+import React, { cloneElement, createContext, isValidElement, useCallback, useContext, useEffect, useState } from "react";
+
+type PaginationPage = {
+    /** The type of the pagination item. */
+    type: "page";
+    /** The value of the pagination item. */
+    value: number;
+    /** Whether the pagination item is the current page. */
+    isCurrent: boolean;
+};
+
+type PaginationEllipsisType = {
+    type: "ellipsis";
+    key: number;
+};
+
+type PaginationItemType = PaginationPage | PaginationEllipsisType;
+
+interface PaginationContextType {
+    /** The pages of the pagination. */
+    pages: PaginationItemType[];
+    /** The current page of the pagination. */
+    currentPage: number;
+    /** The total number of pages. */
+    total: number;
+    /** The function to call when the page changes. */
+    onPageChange: (page: number) => void;
+}
+
+const PaginationContext = createContext<PaginationContextType | undefined>(undefined);
+
+export interface PaginationRootProps {
+    /** Number of sibling pages to show on each side of the current page */
+    siblingCount?: number;
+    /** Current active page number */
+    page: number;
+    /** Total number of pages */
+    total: number;
+    children: ReactNode;
+    /** The style of the pagination root. */
+    style?: CSSProperties;
+    /** The class name of the pagination root. */
+    className?: string;
+    /** Callback function that's called when the page changes with the new page number. */
+    onPageChange?: (page: number) => void;
+}
+
+const PaginationRoot = ({ total, siblingCount = 1, page, onPageChange, children, style, className }: PaginationRootProps) => {
+    const [pages, setPages] = useState<PaginationItemType[]>([]);
+
+    const createPaginationItems = useCallback((): PaginationItemType[] => {
+        const items: PaginationItemType[] = [];
+        // Calculate the maximum number of pagination elements (pages, potential ellipsis, first and last) to show
+        const totalPageNumbers = siblingCount * 2 + 5;
+
+        // If the total number of items to show is greater than or equal to the total pages,
+        // we can simply list all pages without needing to collapse with ellipsis
+        if (totalPageNumbers >= total) {
+            for (let i = 1; i <= total; i++) {
+                items.push({
+                    type: "page",
+                    value: i,
+                    isCurrent: i === page,
+                });
+            }
+        } else {
+            // Calculate left and right sibling boundaries around the current page
+            const leftSiblingIndex = Math.max(page - siblingCount, 1);
+            const rightSiblingIndex = Math.min(page + siblingCount, total);
+
+            // Determine if we need to show ellipsis on either side
+            const showLeftEllipsis = leftSiblingIndex > 2;
+            const showRightEllipsis = rightSiblingIndex < total - 1;
+
+            // Case 1: No left ellipsis, but right ellipsis is needed
+            if (!showLeftEllipsis && showRightEllipsis) {
+                // Calculate how many page numbers to show starting from the beginning
+                const leftItemCount = siblingCount * 2 + 3;
+                const leftRange = range(1, leftItemCount);
+
+                leftRange.forEach((pageNum) =>
+                    items.push({
+                        type: "page",
+                        value: pageNum,
+                        isCurrent: pageNum === page,
+                    }),
+                );
+
+                // Insert ellipsis after the left range and add the last page
+                items.push({ type: "ellipsis", key: leftItemCount + 1 });
+                items.push({
+                    type: "page",
+                    value: total,
+                    isCurrent: total === page,
+                });
+            }
+            // Case 2: Left ellipsis needed, but right ellipsis is not needed
+            else if (showLeftEllipsis && !showRightEllipsis) {
+                // Determine how many items from the end should be shown
+                const rightItemCount = siblingCount * 2 + 3;
+                const rightRange = range(total - rightItemCount + 1, total);
+
+                // Always show the first page, then add an ellipsis to indicate skipped pages
+                items.push({
+                    type: "page",
+                    value: 1,
+                    isCurrent: page === 1,
+                });
+                items.push({ type: "ellipsis", key: total - rightItemCount });
+                rightRange.forEach((pageNum) =>
+                    items.push({
+                        type: "page",
+                        value: pageNum,
+                        isCurrent: pageNum === page,
+                    }),
+                );
+            }
+            // Case 3: Both left and right ellipsis are needed
+            else if (showLeftEllipsis && showRightEllipsis) {
+                // Always show the first page
+                items.push({
+                    type: "page",
+                    value: 1,
+                    isCurrent: page === 1,
+                });
+                // Insert left ellipsis after the first page
+                items.push({ type: "ellipsis", key: leftSiblingIndex - 1 });
+
+                // Show a range of pages around the current page
+                const middleRange = range(leftSiblingIndex, rightSiblingIndex);
+                middleRange.forEach((pageNum) =>
+                    items.push({
+                        type: "page",
+                        value: pageNum,
+                        isCurrent: pageNum === page,
+                    }),
+                );
+
+                // Insert right ellipsis and finally the last page
+                items.push({ type: "ellipsis", key: rightSiblingIndex + 1 });
+                items.push({
+                    type: "page",
+                    value: total,
+                    isCurrent: total === page,
+                });
+            }
+        }
+
+        return items;
+    }, [total, siblingCount, page]);
+
+    useEffect(() => {
+        const paginationItems = createPaginationItems();
+        setPages(paginationItems);
+    }, [createPaginationItems]);
+
+    const onPageChangeHandler = (newPage: number) => {
+        onPageChange?.(newPage);
+    };
+
+    const paginationContextValue: PaginationContextType = {
+        pages,
+        currentPage: page,
+        total,
+        onPageChange: onPageChangeHandler,
+    };
+
+    return (
+        <PaginationContext.Provider value={paginationContextValue}>
+            <nav aria-label="Pagination Navigation" style={style} className={className}>
+                {children}
+            </nav>
+        </PaginationContext.Provider>
+    );
+};
+
+/**
+ * Creates an array of numbers from start to end.
+ * @param start - The start number.
+ * @param end - The end number.
+ * @returns An array of numbers from start to end.
+ */
+const range = (start: number, end: number): number[] => {
+    const length = end - start + 1;
+
+    return Array.from({ length }, (_, index) => index + start);
+};
+
+interface TriggerRenderProps {
+    isDisabled: boolean;
+    onClick: () => void;
+}
+
+interface TriggerProps {
+    /** The children of the trigger. Can be a render prop or a valid element. */
+    children: ReactNode | ((props: TriggerRenderProps) => ReactNode);
+    /** The style of the trigger. */
+    style?: CSSProperties;
+    /** The class name of the trigger. */
+    className?: string | ((args: { isDisabled: boolean }) => string);
+    /** If true, the child element will be cloned and passed down the prop of the trigger. */
+    asChild?: boolean;
+    /** The direction of the trigger. */
+    direction: "prev" | "next";
+    /** The aria label of the trigger. */
+    ariaLabel?: string;
+}
+
+const Trigger: FC<TriggerProps> = ({ children, style, className, asChild = false, direction, ariaLabel }) => {
+    const context = useContext(PaginationContext);
+    if (!context) {
+        throw new Error("Pagination components must be used within a Pagination.Root");
+    }
+
+    const { currentPage, total, onPageChange } = context;
+
+    const isDisabled = direction === "prev" ? currentPage <= 1 : currentPage >= total;
+
+    const handleClick = () => {
+        if (isDisabled) return;
+
+        const newPage = direction === "prev" ? currentPage - 1 : currentPage + 1;
+        onPageChange?.(newPage);
+    };
+
+    const computedClassName = typeof className === "function" ? className({ isDisabled }) : className;
+
+    const defaultAriaLabel = direction === "prev" ? "Previous Page" : "Next Page";
+
+    // If the children is a render prop, we need to pass the isDisabled and onClick to the render prop.
+    if (typeof children === "function") {
+        return <>{children({ isDisabled, onClick: handleClick })}</>;
+    }
+
+    // If the children is a valid element, we need to clone it and pass the isDisabled and onClick to the cloned element.
+    if (asChild && isValidElement(children)) {
+        return cloneElement(children, {
+            onClick: handleClick,
+            disabled: isDisabled,
+            isDisabled,
+            "aria-label": ariaLabel || defaultAriaLabel,
+            style: { ...(children.props as HTMLAttributes<HTMLElement>).style, ...style },
+            className: [computedClassName, (children.props as HTMLAttributes<HTMLElement>).className].filter(Boolean).join(" ") || undefined,
+        } as HTMLAttributes<HTMLElement>);
+    }
+
+    return (
+        <button aria-label={ariaLabel || defaultAriaLabel} onClick={handleClick} disabled={isDisabled} style={style} className={computedClassName}>
+            {children}
+        </button>
+    );
+};
+
+const PaginationPrevTrigger: FC<Omit<TriggerProps, "direction">> = (props) => <Trigger {...props} direction="prev" />;
+
+const PaginationNextTrigger: FC<Omit<TriggerProps, "direction">> = (props) => <Trigger {...props} direction="next" />;
+
+interface PaginationItemRenderProps {
+    isSelected: boolean;
+    onClick: () => void;
+    value: number;
+    "aria-current"?: "page";
+    "aria-label"?: string;
+}
+
+export interface PaginationItemProps {
+    /** The value of the pagination item. */
+    value: number;
+    /** Whether the pagination item is the current page. */
+    isCurrent: boolean;
+    /** The children of the pagination item. Can be a render prop or a valid element. */
+    children?: ReactNode | ((props: PaginationItemRenderProps) => ReactNode);
+    /** The style object of the pagination item. */
+    style?: CSSProperties;
+    /** The class name of the pagination item. */
+    className?: string | ((args: { isSelected: boolean }) => string);
+    /** The aria label of the pagination item. */
+    ariaLabel?: string;
+    /** If true, the child element will be cloned and passed down the prop of the item. */
+    asChild?: boolean;
+}
+
+const PaginationItem = ({ value, isCurrent, children, style, className, ariaLabel, asChild = false }: PaginationItemProps) => {
+    const context = useContext(PaginationContext);
+    if (!context) {
+        throw new Error("Pagination components must be used within a <Pagination.Root />");
+    }
+
+    const { onPageChange } = context;
+
+    const isSelected = isCurrent;
+
+    const handleClick = () => {
+        onPageChange?.(value);
+    };
+
+    const computedClassName = typeof className === "function" ? className({ isSelected }) : className;
+
+    // If the children is a render prop, we need to pass the necessary props to the render prop.
+    if (typeof children === "function") {
+        return (
+            <>
+                {children({
+                    isSelected,
+                    onClick: handleClick,
+                    value,
+                    "aria-current": isCurrent ? "page" : undefined,
+                    "aria-label": ariaLabel || `Page ${value}`,
+                })}
+            </>
+        );
+    }
+
+    // If the children is a valid element, we need to clone it and pass the necessary props to the cloned element.
+    if (asChild && isValidElement(children)) {
+        return cloneElement(children, {
+            onClick: handleClick,
+            "aria-current": isCurrent ? "page" : undefined,
+            "aria-label": ariaLabel || `Page ${value}`,
+            style: { ...(children.props as HTMLAttributes<HTMLElement>).style, ...style },
+            className: [computedClassName, (children.props as HTMLAttributes<HTMLElement>).className].filter(Boolean).join(" ") || undefined,
+        } as HTMLAttributes<HTMLElement>);
+    }
+
+    return (
+        <button
+            onClick={handleClick}
+            style={style}
+            className={computedClassName}
+            aria-current={isCurrent ? "page" : undefined}
+            aria-label={ariaLabel || `Page ${value}`}
+            role="listitem"
+        >
+            {children}
+        </button>
+    );
+};
+interface PaginationEllipsisProps {
+    key: number;
+    children?: ReactNode;
+    style?: CSSProperties;
+    className?: string | (() => string);
+}
+
+const PaginationEllipsis: FC<PaginationEllipsisProps> = ({ children, style, className }) => {
+    const computedClassName = typeof className === "function" ? className() : className;
+
+    return (
+        <span style={style} className={computedClassName} aria-hidden="true">
+            {children}
+        </span>
+    );
+};
+
+interface PaginationContextComponentProps {
+    children: (pagination: PaginationContextType) => ReactNode;
+}
+
+const PaginationContextComponent: FC<PaginationContextComponentProps> = ({ children }) => {
+    const context = useContext(PaginationContext);
+    if (!context) {
+        throw new Error("Pagination components must be used within a Pagination.Root");
+    }
+
+    return <>{children(context)}</>;
+};
+
+export const Pagination = {
+    Root: PaginationRoot,
+    PrevTrigger: PaginationPrevTrigger,
+    NextTrigger: PaginationNextTrigger,
+    Item: PaginationItem,
+    Ellipsis: PaginationEllipsis,
+    Context: PaginationContextComponent,
+};
diff --git a/src/components/application/pagination/pagination-dot.tsx b/src/components/application/pagination/pagination-dot.tsx
new file mode 100644
index 0000000..544721e
--- /dev/null
+++ b/src/components/application/pagination/pagination-dot.tsx
@@ -0,0 +1,52 @@
+import { cx } from "@/utils/cx";
+import type { PaginationRootProps } from "./pagination-base";
+import { Pagination } from "./pagination-base";
+
+interface PaginationDotProps extends Omit<PaginationRootProps, "children"> {
+    /** The size of the pagination dot. */
+    size?: "md" | "lg";
+    /** Whether the pagination uses brand colors. */
+    isBrand?: boolean;
+    /** Whether the pagination is displayed in a card. */
+    framed?: boolean;
+}
+
+export const PaginationDot = ({ framed, className, size = "md", isBrand, ...props }: PaginationDotProps) => {
+    const sizes = {
+        md: {
+            root: cx("gap-3", framed && "p-2"),
+            button: "h-2 w-2 after:-inset-x-1.5 after:-inset-y-2",
+        },
+        lg: {
+            root: cx("gap-4", framed && "p-3"),
+            button: "h-2.5 w-2.5 after:-inset-x-2 after:-inset-y-3",
+        },
+    };
+
+    return (
+        <Pagination.Root {...props} className={cx("flex h-max w-max", sizes[size].root, framed && "rounded-full bg-alpha-white/90 backdrop-blur", className)}>
+            <Pagination.Context>
+                {({ pages }) =>
+                    pages.map((page, index) =>
+                        page.type === "page" ? (
+                            <Pagination.Item
+                                {...page}
+                                asChild
+                                key={index}
+                                className={cx(
+                                    "relative cursor-pointer rounded-full bg-quaternary outline-focus-ring after:absolute focus-visible:outline-2 focus-visible:outline-offset-2",
+                                    sizes[size].button,
+                                    page.isCurrent && "bg-fg-brand-primary_alt",
+                                    isBrand && "bg-fg-brand-secondary",
+                                    isBrand && page.isCurrent && "bg-fg-white",
+                                )}
+                            ></Pagination.Item>
+                        ) : (
+                            <Pagination.Ellipsis {...page} key={index} />
+                        ),
+                    )
+                }
+            </Pagination.Context>
+        </Pagination.Root>
+    );
+};
diff --git a/src/components/application/pagination/pagination-line.tsx b/src/components/application/pagination/pagination-line.tsx
new file mode 100644
index 0000000..abaae45
--- /dev/null
+++ b/src/components/application/pagination/pagination-line.tsx
@@ -0,0 +1,48 @@
+import { cx } from "@/utils/cx";
+import type { PaginationRootProps } from "./pagination-base";
+import { Pagination } from "./pagination-base";
+
+interface PaginationLineProps extends Omit<PaginationRootProps, "children"> {
+    /** The size of the pagination line. */
+    size?: "md" | "lg";
+    /** Whether the pagination is displayed in a card. */
+    framed?: boolean;
+}
+
+export const PaginationLine = ({ framed, className, size = "md", ...props }: PaginationLineProps) => {
+    const sizes = {
+        md: {
+            root: cx("gap-2", framed && "p-2"),
+            button: "h-1.5 w-full after:-inset-x-1.5 after:-inset-y-2",
+        },
+        lg: {
+            root: cx("gap-3", framed && "p-3"),
+            button: "h-2 w-full after:-inset-x-2 after:-inset-y-3",
+        },
+    };
+
+    return (
+        <Pagination.Root {...props} className={cx("flex h-max w-max", sizes[size].root, framed && "rounded-full bg-alpha-white/90 backdrop-blur", className)}>
+            <Pagination.Context>
+                {({ pages }) =>
+                    pages.map((page, index) =>
+                        page.type === "page" ? (
+                            <Pagination.Item
+                                {...page}
+                                asChild
+                                key={index}
+                                className={cx(
+                                    "relative cursor-pointer rounded-full bg-quaternary outline-focus-ring after:absolute focus-visible:outline-2 focus-visible:outline-offset-2",
+                                    sizes[size].button,
+                                    page.isCurrent && "bg-fg-brand-primary_alt",
+                                )}
+                            />
+                        ) : (
+                            <Pagination.Ellipsis {...page} key={index} />
+                        ),
+                    )
+                }
+            </Pagination.Context>
+        </Pagination.Root>
+    );
+};
diff --git a/src/components/application/pagination/pagination.tsx b/src/components/application/pagination/pagination.tsx
new file mode 100644
index 0000000..51569a1
--- /dev/null
+++ b/src/components/application/pagination/pagination.tsx
@@ -0,0 +1,328 @@
+import { ArrowLeft, ArrowRight } from "@untitledui/icons";
+import { ButtonGroup, ButtonGroupItem } from "@/components/base/button-group/button-group";
+import { Button } from "@/components/base/buttons/button";
+import { useBreakpoint } from "@/hooks/use-breakpoint";
+import { cx } from "@/utils/cx";
+import type { PaginationRootProps } from "./pagination-base";
+import { Pagination } from "./pagination-base";
+
+interface PaginationProps extends Partial<Omit<PaginationRootProps, "children">> {
+    /** Whether the pagination buttons are rounded. */
+    rounded?: boolean;
+}
+
+const PaginationItem = ({ value, rounded, isCurrent }: { value: number; rounded?: boolean; isCurrent: boolean }) => {
+    return (
+        <Pagination.Item
+            value={value}
+            isCurrent={isCurrent}
+            className={({ isSelected }) =>
+                cx(
+                    "flex size-10 cursor-pointer items-center justify-center p-3 text-sm font-medium text-quaternary outline-focus-ring transition duration-100 ease-linear hover:bg-primary_hover hover:text-secondary focus-visible:z-10 focus-visible:bg-primary_hover focus-visible:outline-2 focus-visible:outline-offset-2",
+                    rounded ? "rounded-full" : "rounded-lg",
+                    isSelected && "bg-primary_hover text-secondary",
+                )
+            }
+        >
+            {value}
+        </Pagination.Item>
+    );
+};
+
+interface MobilePaginationProps {
+    /** The current page. */
+    page?: number;
+    /** The total number of pages. */
+    total?: number;
+    /** The class name of the pagination component. */
+    className?: string;
+    /** The function to call when the page changes. */
+    onPageChange?: (page: number) => void;
+}
+
+const MobilePagination = ({ page = 1, total = 10, className, onPageChange }: MobilePaginationProps) => {
+    return (
+        <nav aria-label="Pagination" className={cx("flex items-center justify-between md:hidden", className)}>
+            <Button
+                aria-label="Go to previous page"
+                iconLeading={ArrowLeft}
+                color="secondary"
+                size="sm"
+                onClick={() => onPageChange?.(Math.max(0, page - 1))}
+            />
+
+            <span className="text-sm text-fg-secondary">
+                Page <span className="font-medium">{page}</span> of <span className="font-medium">{total}</span>
+            </span>
+
+            <Button
+                aria-label="Go to next page"
+                iconLeading={ArrowRight}
+                color="secondary"
+                size="sm"
+                onClick={() => onPageChange?.(Math.min(total, page + 1))}
+            />
+        </nav>
+    );
+};
+
+export const PaginationPageDefault = ({ rounded, page = 1, total = 10, className, ...props }: PaginationProps) => {
+    const isDesktop = useBreakpoint("md");
+
+    return (
+        <Pagination.Root
+            {...props}
+            page={page}
+            total={total}
+            className={cx("flex w-full items-center justify-between gap-3 border-t border-secondary pt-4 md:pt-5", className)}
+        >
+            <div className="hidden flex-1 justify-start md:flex">
+                <Pagination.PrevTrigger asChild>
+                    <Button iconLeading={ArrowLeft} color="link-gray" size="sm">
+                        {isDesktop ? "Previous" : undefined}{" "}
+                    </Button>
+                </Pagination.PrevTrigger>
+            </div>
+
+            <Pagination.PrevTrigger asChild className="md:hidden">
+                <Button iconLeading={ArrowLeft} color="secondary" size="sm">
+                    {isDesktop ? "Previous" : undefined}
+                </Button>
+            </Pagination.PrevTrigger>
+
+            <Pagination.Context>
+                {({ pages, currentPage, total }) => (
+                    <>
+                        <div className="hidden justify-center gap-0.5 md:flex">
+                            {pages.map((page, index) =>
+                                page.type === "page" ? (
+                                    <PaginationItem key={index} rounded={rounded} {...page} />
+                                ) : (
+                                    <Pagination.Ellipsis key={index} className="flex size-10 shrink-0 items-center justify-center text-tertiary">
+                                        &#8230;
+                                    </Pagination.Ellipsis>
+                                ),
+                            )}
+                        </div>
+
+                        <div className="flex justify-center text-sm whitespace-pre text-fg-secondary md:hidden">
+                            Page <span className="font-medium">{currentPage}</span> of <span className="font-medium">{total}</span>
+                        </div>
+                    </>
+                )}
+            </Pagination.Context>
+
+            <div className="hidden flex-1 justify-end md:flex">
+                <Pagination.NextTrigger asChild>
+                    <Button iconTrailing={ArrowRight} color="link-gray" size="sm">
+                        {isDesktop ? "Next" : undefined}
+                    </Button>
+                </Pagination.NextTrigger>
+            </div>
+            <Pagination.NextTrigger asChild className="md:hidden">
+                <Button iconTrailing={ArrowRight} color="secondary" size="sm">
+                    {isDesktop ? "Next" : undefined}
+                </Button>
+            </Pagination.NextTrigger>
+        </Pagination.Root>
+    );
+};
+
+export const PaginationPageMinimalCenter = ({ rounded, page = 1, total = 10, className, ...props }: PaginationProps) => {
+    const isDesktop = useBreakpoint("md");
+
+    return (
+        <Pagination.Root
+            {...props}
+            page={page}
+            total={total}
+            className={cx("flex w-full items-center justify-between gap-3 border-t border-secondary pt-4 md:pt-5", className)}
+        >
+            <div className="flex flex-1 justify-start">
+                <Pagination.PrevTrigger asChild>
+                    <Button iconLeading={ArrowLeft} color="secondary" size="sm">
+                        {isDesktop ? "Previous" : undefined}
+                    </Button>
+                </Pagination.PrevTrigger>
+            </div>
+
+            <Pagination.Context>
+                {({ pages, currentPage, total }) => (
+                    <>
+                        <div className="hidden justify-center gap-0.5 md:flex">
+                            {pages.map((page, index) =>
+                                page.type === "page" ? (
+                                    <PaginationItem key={index} rounded={rounded} {...page} />
+                                ) : (
+                                    <Pagination.Ellipsis key={index} className="flex size-10 shrink-0 items-center justify-center text-tertiary">
+                                        &#8230;
+                                    </Pagination.Ellipsis>
+                                ),
+                            )}
+                        </div>
+
+                        <div className="flex justify-center text-sm whitespace-pre text-fg-secondary md:hidden">
+                            Page <span className="font-medium">{currentPage}</span> of <span className="font-medium">{total}</span>
+                        </div>
+                    </>
+                )}
+            </Pagination.Context>
+
+            <div className="flex flex-1 justify-end">
+                <Pagination.NextTrigger asChild>
+                    <Button iconTrailing={ArrowRight} color="secondary" size="sm">
+                        {isDesktop ? "Next" : undefined}
+                    </Button>
+                </Pagination.NextTrigger>
+            </div>
+        </Pagination.Root>
+    );
+};
+
+export const PaginationCardDefault = ({ rounded, page = 1, total = 10, ...props }: PaginationProps) => {
+    const isDesktop = useBreakpoint("md");
+
+    return (
+        <Pagination.Root
+            {...props}
+            page={page}
+            total={total}
+            className="flex w-full items-center justify-between gap-3 border-t border-secondary px-4 py-3 md:px-6 md:pt-3 md:pb-4"
+        >
+            <div className="flex flex-1 justify-start">
+                <Pagination.PrevTrigger asChild>
+                    <Button iconLeading={ArrowLeft} color="secondary" size="sm">
+                        {isDesktop ? "Previous" : undefined}
+                    </Button>
+                </Pagination.PrevTrigger>
+            </div>
+
+            <Pagination.Context>
+                {({ pages, currentPage, total }) => (
+                    <>
+                        <div className="hidden justify-center gap-0.5 md:flex">
+                            {pages.map((page, index) =>
+                                page.type === "page" ? (
+                                    <PaginationItem key={index} rounded={rounded} {...page} />
+                                ) : (
+                                    <Pagination.Ellipsis key={index} className="flex size-10 shrink-0 items-center justify-center text-tertiary">
+                                        &#8230;
+                                    </Pagination.Ellipsis>
+                                ),
+                            )}
+                        </div>
+
+                        <div className="flex justify-center text-sm whitespace-pre text-fg-secondary md:hidden">
+                            Page <span className="font-medium">{currentPage}</span> of <span className="font-medium">{total}</span>
+                        </div>
+                    </>
+                )}
+            </Pagination.Context>
+
+            <div className="flex flex-1 justify-end">
+                <Pagination.NextTrigger asChild>
+                    <Button iconTrailing={ArrowRight} color="secondary" size="sm">
+                        {isDesktop ? "Next" : undefined}
+                    </Button>
+                </Pagination.NextTrigger>
+            </div>
+        </Pagination.Root>
+    );
+};
+
+interface PaginationCardMinimalProps {
+    /** The current page. */
+    page?: number;
+    /** The total number of pages. */
+    total?: number;
+    /** The alignment of the pagination. */
+    align?: "left" | "center" | "right";
+    /** The class name of the pagination component. */
+    className?: string;
+    /** The function to call when the page changes. */
+    onPageChange?: (page: number) => void;
+}
+
+export const PaginationCardMinimal = ({ page = 1, total = 10, align = "left", onPageChange, className }: PaginationCardMinimalProps) => {
+    return (
+        <div className={cx("border-t border-secondary px-4 py-3 md:px-6 md:pt-3 md:pb-4", className)}>
+            <MobilePagination page={page} total={total} onPageChange={onPageChange} />
+
+            <nav aria-label="Pagination" className={cx("hidden items-center gap-3 md:flex", align === "center" && "justify-between")}>
+                <div className={cx(align === "center" && "flex flex-1 justify-start")}>
+                    <Button isDisabled={page === 1} color="secondary" size="sm" onClick={() => onPageChange?.(Math.max(0, page - 1))}>
+                        Previous
+                    </Button>
+                </div>
+
+                <span
+                    className={cx(
+                        "text-sm font-medium text-fg-secondary",
+                        align === "right" && "order-first mr-auto",
+                        align === "left" && "order-last ml-auto",
+                    )}
+                >
+                    Page {page} of {total}
+                </span>
+
+                <div className={cx(align === "center" && "flex flex-1 justify-end")}>
+                    <Button isDisabled={page === total} color="secondary" size="sm" onClick={() => onPageChange?.(Math.min(total, page + 1))}>
+                        Next
+                    </Button>
+                </div>
+            </nav>
+        </div>
+    );
+};
+
+interface PaginationButtonGroupProps extends Partial<Omit<PaginationRootProps, "children">> {
+    /** The alignment of the pagination. */
+    align?: "left" | "center" | "right";
+}
+
+export const PaginationButtonGroup = ({ align = "left", page = 1, total = 10, ...props }: PaginationButtonGroupProps) => {
+    const isDesktop = useBreakpoint("md");
+
+    return (
+        <div
+            className={cx(
+                "flex border-t border-secondary px-4 py-3 md:px-6 md:pt-3 md:pb-4",
+                align === "left" && "justify-start",
+                align === "center" && "justify-center",
+                align === "right" && "justify-end",
+            )}
+        >
+            <Pagination.Root {...props} page={page} total={total}>
+                <Pagination.Context>
+                    {({ pages }) => (
+                        <ButtonGroup size="md">
+                            <Pagination.PrevTrigger asChild>
+                                <ButtonGroupItem iconLeading={ArrowLeft}>{isDesktop ? "Previous" : undefined}</ButtonGroupItem>
+                            </Pagination.PrevTrigger>
+
+                            {pages.map((page, index) =>
+                                page.type === "page" ? (
+                                    <Pagination.Item key={index} {...page} asChild>
+                                        <ButtonGroupItem isSelected={page.isCurrent} className="size-10 items-center justify-center">
+                                            {page.value}
+                                        </ButtonGroupItem>
+                                    </Pagination.Item>
+                                ) : (
+                                    <Pagination.Ellipsis key={index}>
+                                        <ButtonGroupItem className="pointer-events-none size-10 items-center justify-center rounded-none!">
+                                            &#8230;
+                                        </ButtonGroupItem>
+                                    </Pagination.Ellipsis>
+                                ),
+                            )}
+
+                            <Pagination.NextTrigger asChild>
+                                <ButtonGroupItem iconTrailing={ArrowRight}>{isDesktop ? "Next" : undefined}</ButtonGroupItem>
+                            </Pagination.NextTrigger>
+                        </ButtonGroup>
+                    )}
+                </Pagination.Context>
+            </Pagination.Root>
+        </div>
+    );
+};
diff --git a/src/components/application/slideout-menus/slideout-menu.tsx b/src/components/application/slideout-menus/slideout-menu.tsx
new file mode 100644
index 0000000..c337257
--- /dev/null
+++ b/src/components/application/slideout-menus/slideout-menu.tsx
@@ -0,0 +1,120 @@
+import { type ComponentPropsWithRef, type ReactNode, type RefAttributes } from "react";
+import type {
+    DialogProps as AriaDialogProps,
+    ModalOverlayProps as AriaModalOverlayProps,
+    ModalRenderProps as AriaModalRenderProps,
+} from "react-aria-components";
+import { Dialog as AriaDialog, DialogTrigger as AriaDialogTrigger, Modal as AriaModal, ModalOverlay as AriaModalOverlay } from "react-aria-components";
+import { CloseButton } from "@/components/base/buttons/close-button";
+import { cx } from "@/utils/cx";
+
+interface ModalOverlayProps extends AriaModalOverlayProps, RefAttributes<HTMLDivElement> {}
+
+export const ModalOverlay = (props: ModalOverlayProps) => {
+    return (
+        <AriaModalOverlay
+            {...props}
+            className={(state) =>
+                cx(
+                    "fixed inset-0 flex min-h-dvh w-full items-center justify-end bg-overlay/70 pl-6 outline-hidden ease-linear md:pl-10",
+                    state.isEntering && "duration-300 animate-in fade-in",
+                    state.isExiting && "duration-500 animate-out fade-out",
+                    typeof props.className === "function" ? props.className(state) : props.className,
+                )
+            }
+        />
+    );
+};
+ModalOverlay.displayName = "ModalOverlay";
+
+interface ModalProps extends AriaModalOverlayProps, RefAttributes<HTMLDivElement> {}
+
+export const Modal = (props: ModalProps) => (
+    <AriaModal
+        {...props}
+        className={(state) =>
+            cx(
+                "inset-y-0 right-0 h-full w-full max-w-100 shadow-xl transition",
+                state.isEntering && "duration-300 animate-in slide-in-from-right",
+                state.isExiting && "duration-500 animate-out slide-out-to-right",
+                typeof props.className === "function" ? props.className(state) : props.className,
+            )
+        }
+    />
+);
+Modal.displayName = "Modal";
+
+interface DialogProps extends AriaDialogProps, RefAttributes<HTMLElement> {}
+
+export const Dialog = (props: DialogProps) => (
+    <AriaDialog
+        role="dialog"
+        {...props}
+        className={cx(
+            "relative flex size-full flex-col items-start gap-6 overflow-y-auto bg-primary ring-1 ring-secondary_alt outline-hidden",
+            props.className,
+        )}
+    />
+);
+Dialog.displayName = "Dialog";
+
+interface SlideoutMenuProps extends Omit<AriaModalOverlayProps, "children">, RefAttributes<HTMLDivElement> {
+    children: ReactNode | ((children: AriaModalRenderProps & { close: () => void }) => ReactNode);
+    dialogClassName?: string;
+}
+
+const Menu = ({ children, dialogClassName, ...props }: SlideoutMenuProps) => {
+    return (
+        <ModalOverlay {...props}>
+            <Modal className={(state) => cx(typeof props.className === "function" ? props.className(state) : props.className)}>
+                {(state) => (
+                    <Dialog className={dialogClassName}>
+                        {({ close }) => {
+                            return typeof children === "function" ? children({ ...state, close }) : children;
+                        }}
+                    </Dialog>
+                )}
+            </Modal>
+        </ModalOverlay>
+    );
+};
+Menu.displayName = "SlideoutMenu";
+
+const Content = ({ role = "main", ...props }: ComponentPropsWithRef<"div">) => {
+    return <div role={role} {...props} className={cx("flex size-full flex-col gap-6 overflow-y-auto overscroll-auto px-4 md:px-6", props.className)} />;
+};
+Content.displayName = "SlideoutContent";
+
+interface SlideoutHeaderProps extends ComponentPropsWithRef<"header"> {
+    onClose?: () => void;
+}
+
+const Header = ({ className, children, onClose, ...props }: SlideoutHeaderProps) => {
+    return (
+        <header {...props} className={cx("relative z-1 w-full px-4 pt-6 md:px-6", className)}>
+            {children}
+            <CloseButton size="md" className="absolute top-3 right-3 shrink-0" onClick={onClose} />
+        </header>
+    );
+};
+Header.displayName = "SlideoutHeader";
+
+const Footer = (props: ComponentPropsWithRef<"footer">) => {
+    return <footer {...props} className={cx("w-full p-4 shadow-[inset_0px_1px_0px_0px] shadow-border-secondary md:px-6", props.className)} />;
+};
+Footer.displayName = "SlideoutFooter";
+
+const SlideoutMenu = Menu as typeof Menu & {
+    Trigger: typeof AriaDialogTrigger;
+    Content: typeof Content;
+    Header: typeof Header;
+    Footer: typeof Footer;
+};
+SlideoutMenu.displayName = "SlideoutMenu";
+
+SlideoutMenu.Trigger = AriaDialogTrigger;
+SlideoutMenu.Content = Content;
+SlideoutMenu.Header = Header;
+SlideoutMenu.Footer = Footer;
+
+export { SlideoutMenu };
diff --git a/src/components/application/table/table.tsx b/src/components/application/table/table.tsx
new file mode 100644
index 0000000..cd2352d
--- /dev/null
+++ b/src/components/application/table/table.tsx
@@ -0,0 +1,298 @@
+import type { ComponentPropsWithRef, HTMLAttributes, ReactNode, Ref, TdHTMLAttributes, ThHTMLAttributes } from "react";
+import { createContext, isValidElement, useContext } from "react";
+import { ArrowDown, ChevronSelectorVertical, Copy01, Edit01, HelpCircle, Trash01 } from "@untitledui/icons";
+import type {
+    CellProps as AriaCellProps,
+    ColumnProps as AriaColumnProps,
+    RowProps as AriaRowProps,
+    TableHeaderProps as AriaTableHeaderProps,
+    TableProps as AriaTableProps,
+} from "react-aria-components";
+import {
+    Cell as AriaCell,
+    Collection as AriaCollection,
+    Column as AriaColumn,
+    Group as AriaGroup,
+    Row as AriaRow,
+    Table as AriaTable,
+    TableBody as AriaTableBody,
+    TableHeader as AriaTableHeader,
+    useTableOptions,
+} from "react-aria-components";
+import { Badge } from "@/components/base/badges/badges";
+import { Checkbox } from "@/components/base/checkbox/checkbox";
+import { Dropdown } from "@/components/base/dropdown/dropdown";
+import { Tooltip, TooltipTrigger } from "@/components/base/tooltip/tooltip";
+import { cx } from "@/utils/cx";
+
+export const TableRowActionsDropdown = () => (
+    <Dropdown.Root>
+        <Dropdown.DotsButton />
+
+        <Dropdown.Popover className="w-min">
+            <Dropdown.Menu>
+                <Dropdown.Item icon={Edit01}>
+                    <span className="pr-4">Edit</span>
+                </Dropdown.Item>
+                <Dropdown.Item icon={Copy01}>
+                    <span className="pr-4">Copy link</span>
+                </Dropdown.Item>
+                <Dropdown.Item icon={Trash01}>
+                    <span className="pr-4">Delete</span>
+                </Dropdown.Item>
+            </Dropdown.Menu>
+        </Dropdown.Popover>
+    </Dropdown.Root>
+);
+
+const TableContext = createContext<{ size: "sm" | "md" }>({ size: "md" });
+
+const TableCardRoot = ({ children, className, size = "md", ...props }: HTMLAttributes<HTMLDivElement> & { size?: "sm" | "md" }) => {
+    return (
+        <TableContext.Provider value={{ size }}>
+            <div {...props} className={cx("overflow-hidden rounded-xl bg-primary shadow-xs ring-1 ring-secondary", className)}>
+                {children}
+            </div>
+        </TableContext.Provider>
+    );
+};
+
+interface TableCardHeaderProps {
+    /** The title of the table card header. */
+    title: string;
+    /** The badge displayed next to the title. */
+    badge?: ReactNode;
+    /** The description of the table card header. */
+    description?: string;
+    /** The content displayed after the title and badge. */
+    contentTrailing?: ReactNode;
+    /** The class name of the table card header. */
+    className?: string;
+}
+
+const TableCardHeader = ({ title, badge, description, contentTrailing, className }: TableCardHeaderProps) => {
+    const { size } = useContext(TableContext);
+
+    return (
+        <div
+            className={cx(
+                "relative flex flex-col items-start gap-4 border-b border-secondary bg-primary px-4 md:flex-row",
+                size === "sm" ? "py-4 md:px-5" : "py-5 md:px-6",
+                className,
+            )}
+        >
+            <div className="flex flex-1 flex-col gap-0.5">
+                <div className="flex items-center gap-2">
+                    <h2 className={cx("font-semibold text-primary", size === "sm" ? "text-md" : "text-lg")}>{title}</h2>
+                    {badge ? (
+                        isValidElement(badge) ? (
+                            badge
+                        ) : (
+                            <Badge color="brand" size="sm">
+                                {badge}
+                            </Badge>
+                        )
+                    ) : null}
+                </div>
+                {description && <p className="text-sm text-tertiary">{description}</p>}
+            </div>
+            {contentTrailing}
+        </div>
+    );
+};
+
+interface TableRootProps extends AriaTableProps, Omit<ComponentPropsWithRef<"table">, "className" | "slot" | "style"> {
+    size?: "sm" | "md";
+}
+
+const TableRoot = ({ className, size = "md", ...props }: TableRootProps) => {
+    const context = useContext(TableContext);
+
+    return (
+        <TableContext.Provider value={{ size: context?.size ?? size }}>
+            <div className="overflow-x-auto">
+                <AriaTable className={(state) => cx("w-full overflow-x-hidden", typeof className === "function" ? className(state) : className)} {...props} />
+            </div>
+        </TableContext.Provider>
+    );
+};
+TableRoot.displayName = "Table";
+
+interface TableHeaderProps<T extends object>
+    extends AriaTableHeaderProps<T>,
+        Omit<ComponentPropsWithRef<"thead">, "children" | "className" | "slot" | "style"> {
+    bordered?: boolean;
+}
+
+const TableHeader = <T extends object>({ columns, children, bordered = true, className, ...props }: TableHeaderProps<T>) => {
+    const { size } = useContext(TableContext);
+    const { selectionBehavior, selectionMode } = useTableOptions();
+
+    return (
+        <AriaTableHeader
+            {...props}
+            className={(state) =>
+                cx(
+                    "relative bg-secondary",
+                    size === "sm" ? "h-9" : "h-11",
+
+                    // Row border—using an "after" pseudo-element to avoid the border taking up space.
+                    bordered &&
+                        "[&>tr>th]:after:pointer-events-none [&>tr>th]:after:absolute [&>tr>th]:after:inset-x-0 [&>tr>th]:after:bottom-0 [&>tr>th]:after:h-px [&>tr>th]:after:bg-border-secondary [&>tr>th]:focus-visible:after:bg-transparent",
+
+                    typeof className === "function" ? className(state) : className,
+                )
+            }
+        >
+            {selectionBehavior === "toggle" && (
+                <AriaColumn className={cx("relative py-2 pr-0 pl-4", size === "sm" ? "w-9 md:pl-5" : "w-11 md:pl-6")}>
+                    {selectionMode === "multiple" && (
+                        <div className="flex items-start">
+                            <Checkbox slot="selection" size={size} />
+                        </div>
+                    )}
+                </AriaColumn>
+            )}
+            <AriaCollection items={columns}>{children}</AriaCollection>
+        </AriaTableHeader>
+    );
+};
+
+TableHeader.displayName = "TableHeader";
+
+interface TableHeadProps extends AriaColumnProps, Omit<ThHTMLAttributes<HTMLTableCellElement>, "children" | "className" | "style" | "id"> {
+    label?: string;
+    tooltip?: string;
+}
+
+const TableHead = ({ className, tooltip, label, children, ...props }: TableHeadProps) => {
+    const { selectionBehavior } = useTableOptions();
+
+    return (
+        <AriaColumn
+            {...props}
+            className={(state) =>
+                cx(
+                    "relative p-0 px-6 py-2 outline-hidden focus-visible:z-1 focus-visible:ring-2 focus-visible:ring-focus-ring focus-visible:ring-offset-bg-primary focus-visible:ring-inset",
+                    selectionBehavior === "toggle" && "nth-2:pl-3",
+                    state.allowsSorting && "cursor-pointer",
+                    typeof className === "function" ? className(state) : className,
+                )
+            }
+        >
+            {(state) => (
+                <AriaGroup className="flex items-center gap-1">
+                    <div className="flex items-center gap-1">
+                        {label && <span className="text-xs font-semibold whitespace-nowrap text-quaternary">{label}</span>}
+                        {typeof children === "function" ? children(state) : children}
+                    </div>
+
+                    {tooltip && (
+                        <Tooltip title={tooltip} placement="top">
+                            <TooltipTrigger className="cursor-pointer text-fg-quaternary transition duration-100 ease-linear hover:text-fg-quaternary_hover focus:text-fg-quaternary_hover">
+                                <HelpCircle className="size-4" />
+                            </TooltipTrigger>
+                        </Tooltip>
+                    )}
+
+                    {state.allowsSorting &&
+                        (state.sortDirection ? (
+                            <ArrowDown className={cx("size-3 stroke-[3px] text-fg-quaternary", state.sortDirection === "ascending" && "rotate-180")} />
+                        ) : (
+                            <ChevronSelectorVertical size={12} strokeWidth={3} className="text-fg-quaternary" />
+                        ))}
+                </AriaGroup>
+            )}
+        </AriaColumn>
+    );
+};
+TableHead.displayName = "TableHead";
+
+interface TableRowProps<T extends object>
+    extends AriaRowProps<T>,
+        Omit<ComponentPropsWithRef<"tr">, "children" | "className" | "onClick" | "slot" | "style" | "id"> {
+    highlightSelectedRow?: boolean;
+}
+
+const TableRow = <T extends object>({ columns, children, className, highlightSelectedRow = true, ...props }: TableRowProps<T>) => {
+    const { size } = useContext(TableContext);
+    const { selectionBehavior } = useTableOptions();
+
+    return (
+        <AriaRow
+            {...props}
+            className={(state) =>
+                cx(
+                    "relative outline-focus-ring transition-colors after:pointer-events-none hover:bg-secondary focus-visible:outline-2 focus-visible:-outline-offset-2",
+                    size === "sm" ? "h-14" : "h-18",
+                    highlightSelectedRow && "selected:bg-secondary",
+
+                    // Row border—using an "after" pseudo-element to avoid the border taking up space.
+                    "[&>td]:after:absolute [&>td]:after:inset-x-0 [&>td]:after:bottom-0 [&>td]:after:h-px [&>td]:after:w-full [&>td]:after:bg-border-secondary last:[&>td]:after:hidden [&>td]:focus-visible:after:opacity-0 focus-visible:[&>td]:after:opacity-0",
+
+                    typeof className === "function" ? className(state) : className,
+                )
+            }
+        >
+            {selectionBehavior === "toggle" && (
+                <AriaCell className={cx("relative py-2 pr-0 pl-4", size === "sm" ? "md:pl-5" : "md:pl-6")}>
+                    <div className="flex items-end">
+                        <Checkbox slot="selection" size={size} />
+                    </div>
+                </AriaCell>
+            )}
+            <AriaCollection items={columns}>{children}</AriaCollection>
+        </AriaRow>
+    );
+};
+
+TableRow.displayName = "TableRow";
+
+interface TableCellProps extends AriaCellProps, Omit<TdHTMLAttributes<HTMLTableCellElement>, "children" | "className" | "style" | "id"> {
+    ref?: Ref<HTMLTableCellElement>;
+}
+
+const TableCell = ({ className, children, ...props }: TableCellProps) => {
+    const { size } = useContext(TableContext);
+    const { selectionBehavior } = useTableOptions();
+
+    return (
+        <AriaCell
+            {...props}
+            className={(state) =>
+                cx(
+                    "relative text-sm text-tertiary outline-focus-ring focus-visible:z-1 focus-visible:outline-2 focus-visible:-outline-offset-2",
+                    size === "sm" && "px-5 py-3",
+                    size === "md" && "px-6 py-4",
+
+                    selectionBehavior === "toggle" && "nth-2:pl-3",
+
+                    typeof className === "function" ? className(state) : className,
+                )
+            }
+        >
+            {children}
+        </AriaCell>
+    );
+};
+TableCell.displayName = "TableCell";
+
+const TableCard = {
+    Root: TableCardRoot,
+    Header: TableCardHeader,
+};
+
+const Table = TableRoot as typeof TableRoot & {
+    Body: typeof AriaTableBody;
+    Cell: typeof TableCell;
+    Head: typeof TableHead;
+    Header: typeof TableHeader;
+    Row: typeof TableRow;
+};
+Table.Body = AriaTableBody;
+Table.Cell = TableCell;
+Table.Head = TableHead;
+Table.Header = TableHeader;
+Table.Row = TableRow;
+
+export { Table, TableCard };
diff --git a/src/components/application/tabs/tabs.tsx b/src/components/application/tabs/tabs.tsx
new file mode 100644
index 0000000..f7f090c
--- /dev/null
+++ b/src/components/application/tabs/tabs.tsx
@@ -0,0 +1,223 @@
+import type { ComponentPropsWithRef, ReactNode } from "react";
+import { Fragment, createContext, useContext } from "react";
+import type { TabListProps as AriaTabListProps, TabProps as AriaTabProps, TabRenderProps as AriaTabRenderProps } from "react-aria-components";
+import { Tab as AriaTab, TabList as AriaTabList, TabPanel as AriaTabPanel, Tabs as AriaTabs, TabsContext, useSlottedContext } from "react-aria-components";
+import type { BadgeColors } from "@/components/base/badges/badge-types";
+import { Badge } from "@/components/base/badges/badges";
+import { cx } from "@/utils/cx";
+
+type Orientation = "horizontal" | "vertical";
+
+// Types for different orientations
+type HorizontalTypes = "button-brand" | "button-gray" | "button-border" | "button-minimal" | "underline";
+type VerticalTypes = "button-brand" | "button-gray" | "button-border" | "button-minimal" | "line";
+type TabTypeColors<T> = T extends "horizontal" ? HorizontalTypes : VerticalTypes;
+
+// Styles for different types of tab
+const getTabStyles = ({ isFocusVisible, isSelected, isHovered }: AriaTabRenderProps) => ({
+    "button-brand": cx(
+        "outline-focus-ring",
+        isFocusVisible && "outline-2 -outline-offset-2",
+        (isSelected || isHovered) && "bg-brand-primary_alt text-brand-secondary",
+    ),
+    "button-gray": cx(
+        "outline-focus-ring",
+        isHovered && "bg-primary_hover text-secondary",
+        isFocusVisible && "outline-2 -outline-offset-2",
+        isSelected && "bg-active text-secondary",
+    ),
+    "button-border": cx(
+        "outline-focus-ring",
+        (isSelected || isHovered) && "bg-primary_alt text-secondary shadow-sm",
+        isFocusVisible && "outline-2 -outline-offset-2",
+    ),
+    "button-minimal": cx(
+        "rounded-lg outline-focus-ring",
+        isHovered && "text-secondary",
+        isFocusVisible && "outline-2 -outline-offset-2",
+        isSelected && "bg-primary_alt text-secondary shadow-xs ring-1 ring-primary ring-inset",
+    ),
+    underline: cx(
+        "rounded-none border-b-2 border-transparent outline-focus-ring",
+        (isSelected || isHovered) && "border-fg-brand-primary_alt text-brand-secondary",
+        isFocusVisible && "outline-2 -outline-offset-2",
+    ),
+    line: cx(
+        "rounded-none border-l-2 border-transparent outline-focus-ring",
+        (isSelected || isHovered) && "border-fg-brand-primary_alt text-brand-secondary",
+        isFocusVisible && "outline-2 -outline-offset-2",
+    ),
+});
+
+const sizes = {
+    sm: {
+        "button-brand": "text-sm font-semibold py-2 px-3",
+        "button-gray": "text-sm font-semibold py-2 px-3",
+        "button-border": "text-sm font-semibold py-2 px-3",
+        "button-minimal": "text-sm font-semibold py-2 px-3",
+        underline: "text-sm font-semibold px-1 pb-2.5 pt-0",
+        line: "text-sm font-semibold pl-2.5 pr-3 py-0.5",
+    },
+    md: {
+        "button-brand": "text-md font-semibold py-2.5 px-3",
+        "button-gray": "text-md font-semibold py-2.5 px-3",
+        "button-border": "text-md font-semibold py-2.5 px-3",
+        "button-minimal": "text-md font-semibold py-2.5 px-3",
+        underline: "text-md font-semibold px-1 pb-2.5 pt-0",
+        line: "text-md font-semibold pr-3.5 pl-3 py-1",
+    },
+};
+
+// Styles for different types of horizontal tabs
+const getHorizontalStyles = ({ size, fullWidth }: { size?: "sm" | "md"; fullWidth?: boolean }) => ({
+    "button-brand": "gap-1",
+    "button-gray": "gap-1",
+    "button-border": cx("gap-1 rounded-[10px] bg-secondary_alt p-1 ring-1 ring-secondary ring-inset", size === "md" && "rounded-xl p-1.5"),
+    "button-minimal": "gap-0.5 rounded-lg bg-secondary_alt ring-1 ring-inset ring-secondary",
+    underline: cx("gap-3", fullWidth && "w-full gap-4"),
+    line: "gap-2",
+});
+
+const getColorStyles = ({ isSelected, isHovered }: Partial<AriaTabRenderProps>) => ({
+    "button-brand": isSelected || isHovered ? "brand" : "gray",
+    "button-gray": "gray",
+    "button-border": "gray",
+    "button-minimal": "gray",
+    underline: isSelected || isHovered ? "brand" : "gray",
+    line: isSelected || isHovered ? "brand" : "gray",
+});
+
+interface TabListComponentProps<T extends object, K extends Orientation> extends AriaTabListProps<T> {
+    /** The size of the tab list. */
+    size?: keyof typeof sizes;
+    /** The type of the tab list. */
+    type?: TabTypeColors<K>;
+    /** The orientation of the tab list. */
+    orientation?: K;
+    /** The items of the tab list. */
+    items: T[];
+    /** Whether the tab list is full width. */
+    fullWidth?: boolean;
+}
+
+const TabListContext = createContext<Omit<TabListComponentProps<TabComponentProps, Orientation>, "items">>({
+    size: "sm",
+    type: "button-brand",
+});
+
+export const TabList = <T extends Orientation>({
+    size = "sm",
+    type = "button-brand",
+    orientation: orientationProp,
+    fullWidth,
+    className,
+    children,
+    ...otherProps
+}: TabListComponentProps<TabComponentProps, T>) => {
+    const context = useSlottedContext(TabsContext);
+
+    const orientation = orientationProp ?? context?.orientation ?? "horizontal";
+
+    return (
+        <TabListContext.Provider value={{ size, type, orientation, fullWidth }}>
+            <AriaTabList
+                {...otherProps}
+                className={(state) =>
+                    cx(
+                        "group flex",
+
+                        getHorizontalStyles({
+                            size,
+                            fullWidth,
+                        })[type as HorizontalTypes],
+
+                        orientation === "vertical" && "w-max flex-col",
+
+                        // Only horizontal tabs with underline type have bottom border
+                        orientation === "horizontal" &&
+                            type === "underline" &&
+                            "relative before:absolute before:inset-x-0 before:bottom-0 before:h-px before:bg-border-secondary",
+
+                        typeof className === "function" ? className(state) : className,
+                    )
+                }
+            >
+                {children ?? ((item) => <Tab {...item}>{item.children}</Tab>)}
+            </AriaTabList>
+        </TabListContext.Provider>
+    );
+};
+
+export const TabPanel = (props: ComponentPropsWithRef<typeof AriaTabPanel>) => {
+    return (
+        <AriaTabPanel
+            {...props}
+            className={(state) =>
+                cx(
+                    "outline-focus-ring focus-visible:outline-2 focus-visible:outline-offset-2",
+                    typeof props.className === "function" ? props.className(state) : props.className,
+                )
+            }
+        />
+    );
+};
+
+interface TabComponentProps extends AriaTabProps {
+    /** The label of the tab. */
+    label?: ReactNode;
+    /** The children of the tab. */
+    children?: ReactNode | ((props: AriaTabRenderProps) => ReactNode);
+    /** The badge displayed next to the label. */
+    badge?: number | string;
+}
+
+export const Tab = (props: TabComponentProps) => {
+    const { label, children, badge, ...otherProps } = props;
+    const { size = "sm", type = "button-brand", fullWidth } = useContext(TabListContext);
+
+    return (
+        <AriaTab
+            {...otherProps}
+            className={(prop) =>
+                cx(
+                    "z-10 flex h-max cursor-pointer items-center justify-center gap-2 rounded-md whitespace-nowrap text-quaternary transition duration-100 ease-linear",
+                    "group-orientation-vertical:justify-start",
+                    fullWidth && "w-full flex-1",
+                    sizes[size][type],
+                    getTabStyles(prop)[type],
+                    typeof props.className === "function" ? props.className(prop) : props.className,
+                )
+            }
+        >
+            {(state) => (
+                <Fragment>
+                    {typeof children === "function" ? children(state) : children || label}
+                    {badge && (
+                        <Badge
+                            size={size}
+                            type="pill-color"
+                            color={getColorStyles(state)[type] as BadgeColors}
+                            className={cx("hidden transition-inherit-all md:flex", size === "sm" && "-my-px")}
+                        >
+                            {badge}
+                        </Badge>
+                    )}
+                </Fragment>
+            )}
+        </AriaTab>
+    );
+};
+
+export const Tabs = ({ className, ...props }: ComponentPropsWithRef<typeof AriaTabs>) => {
+    return (
+        <AriaTabs
+            keyboardActivation="manual"
+            {...props}
+            className={(state) => cx("flex w-full flex-col", typeof className === "function" ? className(state) : className)}
+        />
+    );
+};
+
+Tabs.Panel = TabPanel;
+Tabs.List = TabList;
+Tabs.Item = Tab;
diff --git a/src/components/base/avatar/avatar-label-group.tsx b/src/components/base/avatar/avatar-label-group.tsx
new file mode 100644
index 0000000..f9792e7
--- /dev/null
+++ b/src/components/base/avatar/avatar-label-group.tsx
@@ -0,0 +1,28 @@
+import { type ReactNode } from "react";
+import { cx } from "@/utils/cx";
+import { Avatar, type AvatarProps } from "./avatar";
+
+const styles = {
+    sm: { root: "gap-2", title: "text-sm font-semibold", subtitle: "text-xs" },
+    md: { root: "gap-2", title: "text-sm font-semibold", subtitle: "text-sm" },
+    lg: { root: "gap-3", title: "text-md font-semibold", subtitle: "text-md" },
+    xl: { root: "gap-4", title: "text-lg font-semibold", subtitle: "text-md" },
+};
+
+interface AvatarLabelGroupProps extends AvatarProps {
+    size: "sm" | "md" | "lg" | "xl";
+    title: string | ReactNode;
+    subtitle: string | ReactNode;
+}
+
+export const AvatarLabelGroup = ({ title, subtitle, className, ...props }: AvatarLabelGroupProps) => {
+    return (
+        <figure className={cx("group flex min-w-0 flex-1 items-center", styles[props.size].root, className)}>
+            <Avatar {...props} />
+            <figcaption className="min-w-0 flex-1">
+                <p className={cx("text-primary", styles[props.size].title)}>{title}</p>
+                <p className={cx("truncate text-tertiary", styles[props.size].subtitle)}>{subtitle}</p>
+            </figcaption>
+        </figure>
+    );
+};
diff --git a/src/components/base/avatar/avatar-profile-photo.tsx b/src/components/base/avatar/avatar-profile-photo.tsx
new file mode 100644
index 0000000..13563e6
--- /dev/null
+++ b/src/components/base/avatar/avatar-profile-photo.tsx
@@ -0,0 +1,123 @@
+import { useState } from "react";
+import { User01 } from "@untitledui/icons";
+import { cx } from "@/utils/cx";
+import { type AvatarProps } from "./avatar";
+import { AvatarOnlineIndicator, VerifiedTick } from "./base-components";
+
+const styles = {
+    sm: {
+        root: "size-18 p-0.75",
+        rootWithPlaceholder: "p-1",
+        content: "",
+        icon: "size-9",
+        initials: "text-display-sm font-semibold",
+        badge: "bottom-0.5 right-0.5",
+    },
+    md: {
+        root: "size-24 p-1",
+        rootWithPlaceholder: "p-1.25",
+        content: "shadow-xl",
+        icon: "size-12",
+        initials: "text-display-md font-semibold",
+        badge: "bottom-1 right-1",
+    },
+    lg: {
+        root: "size-40 p-1.5",
+        rootWithPlaceholder: "p-1.75",
+        content: "shadow-2xl",
+        icon: "size-20",
+        initials: "text-display-xl font-semibold",
+        badge: "bottom-2 right-2",
+    },
+};
+
+const tickSizeMap = {
+    sm: "2xl",
+    md: "3xl",
+    lg: "4xl",
+} as const;
+
+interface AvatarProfilePhotoProps extends AvatarProps {
+    size: "sm" | "md" | "lg";
+}
+
+export const AvatarProfilePhoto = ({
+    contrastBorder = true,
+    size = "md",
+    src,
+    alt,
+    initials,
+    placeholder,
+    placeholderIcon: PlaceholderIcon,
+    verified,
+    badge,
+    status,
+    className,
+}: AvatarProfilePhotoProps) => {
+    const [isFailed, setIsFailed] = useState(false);
+
+    const renderMainContent = () => {
+        if (src && !isFailed) {
+            return (
+                <img
+                    src={src}
+                    alt={alt}
+                    onError={() => setIsFailed(true)}
+                    className={cx(
+                        "size-full rounded-full object-cover",
+                        contrastBorder && "outline-1 -outline-offset-1 outline-avatar-contrast-border",
+                        styles[size].content,
+                    )}
+                />
+            );
+        }
+
+        if (initials) {
+            return (
+                <div className={cx("flex size-full items-center justify-center rounded-full bg-tertiary ring-1 ring-secondary_alt", styles[size].content)}>
+                    <span className={cx("text-quaternary", styles[size].initials)}>{initials}</span>
+                </div>
+            );
+        }
+
+        if (PlaceholderIcon) {
+            return (
+                <div className={cx("flex size-full items-center justify-center rounded-full bg-tertiary ring-1 ring-secondary_alt", styles[size].content)}>
+                    <PlaceholderIcon className={cx("text-fg-quaternary", styles[size].icon)} />
+                </div>
+            );
+        }
+
+        return (
+            <div className={cx("flex size-full items-center justify-center rounded-full bg-tertiary ring-1 ring-secondary_alt", styles[size].content)}>
+                {placeholder || <User01 className={cx("text-fg-quaternary", styles[size].icon)} />}
+            </div>
+        );
+    };
+
+    const renderBadgeContent = () => {
+        if (status) {
+            return <AvatarOnlineIndicator status={status} size={tickSizeMap[size]} className={styles[size].badge} />;
+        }
+
+        if (verified) {
+            return <VerifiedTick size={tickSizeMap[size]} className={cx("absolute", styles[size].badge)} />;
+        }
+
+        return badge;
+    };
+
+    return (
+        <div
+            className={cx(
+                "relative flex shrink-0 items-center justify-center rounded-full bg-primary ring-1 ring-secondary_alt",
+                styles[size].root,
+                (!src || isFailed) && styles[size].rootWithPlaceholder,
+                className,
+            )}
+        >
+            {renderMainContent()}
+            {renderBadgeContent()}
+        </div>
+    );
+};
diff --git a/src/components/base/avatar/avatar.tsx b/src/components/base/avatar/avatar.tsx
new file mode 100644
index 0000000..cb6ad22
--- /dev/null
+++ b/src/components/base/avatar/avatar.tsx
@@ -0,0 +1,129 @@
+import { type FC, type ReactNode, useState } from "react";
+import { User01 } from "@untitledui/icons";
+import { cx } from "@/utils/cx";
+import { AvatarOnlineIndicator, VerifiedTick } from "./base-components";
+
+type AvatarSize = "xxs" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl";
+
+export interface AvatarProps {
+    size?: AvatarSize;
+    className?: string;
+    src?: string | null;
+    alt?: string;
+    /**
+     * Display a contrast border around the avatar.
+     */
+    contrastBorder?: boolean;
+    /**
+     * Display a badge (i.e. company logo).
+     */
+    badge?: ReactNode;
+    /**
+     * Display a status indicator.
+     */
+    status?: "online" | "offline";
+    /**
+     * Display a verified tick icon.
+     *
+     * @default false
+     */
+    verified?: boolean;
+
+    /**
+     * The initials of the user to display if no image is available.
+     */
+    initials?: string;
+    /**
+     * An icon to display if no image is available.
+     */
+    placeholderIcon?: FC<{ className?: string }>;
+    /**
+     * A placeholder to display if no image is available.
+     */
+    placeholder?: ReactNode;
+
+    /**
+     * Whether the avatar should show a focus ring when the parent group is in focus.
+     * For example, when the avatar is wrapped inside a link.
+     *
+     * @default false
+     */
+    focusable?: boolean;
+}
+
+const styles = {
+    xxs: { root: "size-4 outline-[0.5px] -outline-offset-[0.5px]", initials: "text-xs font-semibold", icon: "size-3" },
+    xs: { root: "size-6 outline-[0.5px] -outline-offset-[0.5px]", initials: "text-xs font-semibold", icon: "size-4" },
+    sm: { root: "size-8 outline-[0.75px] -outline-offset-[0.75px]", initials: "text-sm font-semibold", icon: "size-5" },
+    md: { root: "size-10 outline-1 -outline-offset-1", initials: "text-md font-semibold", icon: "size-6" },
+    lg: { root: "size-12 outline-1 -outline-offset-1", initials: "text-lg font-semibold", icon: "size-7" },
+    xl: { root: "size-14 outline-1 -outline-offset-1", initials: "text-xl font-semibold", icon: "size-8" },
+    "2xl": { root: "size-16 outline-1 -outline-offset-1", initials: "text-display-xs font-semibold", icon: "size-8" },
+};
+
+export const Avatar = ({
+    contrastBorder = true,
+    size = "md",
+    src,
+    alt,
+    initials,
+    placeholder,
+    placeholderIcon: PlaceholderIcon,
+    badge,
+    status,
+    verified,
+    focusable = false,
+    className,
+}: AvatarProps) => {
+    const [isFailed, setIsFailed] = useState(false);
+
+    const renderMainContent = () => {
+        if (src && !isFailed) {
+            return <img data-avatar-img className="size-full rounded-full object-cover" src={src} alt={alt} onError={() => setIsFailed(true)} />;
+        }
+
+        if (initials) {
+            return <span className={cx("text-quaternary", styles[size].initials)}>{initials}</span>;
+        }
+
+        if (PlaceholderIcon) {
+            return <PlaceholderIcon className={cx("text-fg-quaternary", styles[size].icon)} />;
+        }
+
+        return placeholder || <User01 className={cx("text-fg-quaternary", styles[size].icon)} />;
+    };
+
+    const renderBadgeContent = () => {
+        if (status) {
+            return <AvatarOnlineIndicator status={status} size={size === "xxs" ? "xs" : size} />;
+        }
+
+        if (verified) {
+            return (
+                <VerifiedTick
+                    size={size === "xxs" ? "xs" : size}
+                    className={cx("absolute right-0 bottom-0", (size === "xxs" || size === "xs") && "-right-px -bottom-px")}
+                />
+            );
+        }
+
+        return badge;
+    };
+
+    return (
+        <div
+            data-avatar
+            className={cx(
+                "relative inline-flex shrink-0 items-center justify-center rounded-full bg-avatar-bg outline-transparent",
+                // Focus styles
+                focusable && "group-outline-focus-ring group-focus-visible:outline-2 group-focus-visible:outline-offset-2",
+                contrastBorder && "outline outline-avatar-contrast-border",
+                styles[size].root,
+                className,
+            )}
+        >
+            {renderMainContent()}
+            {renderBadgeContent()}
+        </div>
+    );
+};
diff --git a/src/components/base/avatar/base-components/avatar-add-button.tsx b/src/components/base/avatar/base-components/avatar-add-button.tsx
new file mode 100644
index 0000000..9bb9342
--- /dev/null
+++ b/src/components/base/avatar/base-components/avatar-add-button.tsx
@@ -0,0 +1,32 @@
+import { Plus } from "@untitledui/icons";
+import type { ButtonProps as AriaButtonProps } from "react-aria-components";
+import { Tooltip as AriaTooltip, TooltipTrigger as AriaTooltipTrigger } from "@/components/base/tooltip/tooltip";
+import { cx } from "@/utils/cx";
+
+const sizes = {
+    xs: { root: "size-6", icon: "size-4" },
+    sm: { root: "size-8", icon: "size-4" },
+    md: { root: "size-10", icon: "size-5" },
+};
+
+interface AvatarAddButtonProps extends AriaButtonProps {
+    size: "xs" | "sm" | "md";
+    title?: string;
+    className?: string;
+}
+
+export const AvatarAddButton = ({ size, className, title = "Add user", ...props }: AvatarAddButtonProps) => (
+    <AriaTooltip title={title}>
+        <AriaTooltipTrigger
+            {...props}
+            aria-label={title}
+            className={cx(
+                "flex cursor-pointer items-center justify-center rounded-full border border-dashed border-primary bg-primary text-fg-quaternary outline-focus-ring transition duration-100 ease-linear hover:bg-primary_hover hover:text-fg-quaternary_hover focus-visible:outline-2 focus-visible:outline-offset-2 disabled:border-gray-200 disabled:bg-secondary disabled:text-gray-200",
+                sizes[size].root,
+                className,
+            )}
+        >
+            <Plus className={cx("text-current transition-inherit-all", sizes[size].icon)} />
+        </AriaTooltipTrigger>
+    </AriaTooltip>
+);
diff --git a/src/components/base/avatar/base-components/avatar-company-icon.tsx b/src/components/base/avatar/base-components/avatar-company-icon.tsx
new file mode 100644
index 0000000..9e8e961
--- /dev/null
+++ b/src/components/base/avatar/base-components/avatar-company-icon.tsx
@@ -0,0 +1,24 @@
+import { cx } from "@/utils/cx";
+
+const sizes = {
+    xs: "size-2",
+    sm: "size-3",
+    md: "size-3.5",
+    lg: "size-4",
+    xl: "size-4.5",
+    "2xl": "size-5 ring-[1.67px]",
+};
+
+interface AvatarCompanyIconProps {
+    size: "xs" | "sm" | "md" | "lg" | "xl" | "2xl";
+    src: string;
+    alt?: string;
+}
+
+export const AvatarCompanyIcon = ({ size, src, alt }: AvatarCompanyIconProps) => (
+    <img
+        src={src}
+        alt={alt}
+        className={cx("bg-primary-25 absolute -right-0.5 -bottom-0.5 rounded-full object-cover ring-[1.5px] ring-bg-primary", sizes[size])}
+    />
+);
diff --git a/src/components/base/avatar/base-components/avatar-online-indicator.tsx b/src/components/base/avatar/base-components/avatar-online-indicator.tsx
new file mode 100644
index 0000000..f2dc453
--- /dev/null
+++ b/src/components/base/avatar/base-components/avatar-online-indicator.tsx
@@ -0,0 +1,29 @@
+import { cx } from "@/utils/cx";
+
+const sizes = {
+    xs: "size-1.5",
+    sm: "size-2",
+    md: "size-2.5",
+    lg: "size-3",
+    xl: "size-3.5",
+    "2xl": "size-4",
+    "3xl": "size-4.5",
+    "4xl": "size-5",
+};
+
+interface AvatarOnlineIndicatorProps {
+    size: "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "4xl";
+    status: "online" | "offline";
+    className?: string;
+}
+
+export const AvatarOnlineIndicator = ({ size, status, className }: AvatarOnlineIndicatorProps) => (
+    <span
+        className={cx(
+            "absolute right-0 bottom-0 rounded-full ring-[1.5px] ring-bg-primary",
+            status === "online" ? "bg-fg-success-secondary" : "bg-fg-disabled_subtle",
+            sizes[size],
+            className,
+        )}
+    />
+);
diff --git a/src/components/base/avatar/base-components/index.tsx b/src/components/base/avatar/base-components/index.tsx
new file mode 100644
index 0000000..4054d80
--- /dev/null
+++ b/src/components/base/avatar/base-components/index.tsx
@@ -0,0 +1,4 @@
+export * from "./avatar-add-button";
+export * from "./avatar-company-icon";
+export * from "./avatar-online-indicator";
+export * from "./verified-tick";
diff --git a/src/components/base/avatar/base-components/verified-tick.tsx b/src/components/base/avatar/base-components/verified-tick.tsx
new file mode 100644
index 0000000..f83d071
--- /dev/null
+++ b/src/components/base/avatar/base-components/verified-tick.tsx
@@ -0,0 +1,32 @@
+import { cx } from "@/utils/cx";
+
+const sizes = {
+    xs: { root: "size-2.5", tick: "size-[4.38px" },
+    sm: { root: "size-3", tick: "size-[5.25px]" },
+    md: { root: "size-3.5", tick: "size-[6.13px]" },
+    lg: { root: "size-4", tick: "size-[7px]" },
+    xl: { root: "size-4.5", tick: "size-[7.88px]" },
+    "2xl": { root: "size-5", tick: "size-[8.75px]" },
+    "3xl": { root: "size-6", tick: "size-[10.5px]" },
+    "4xl": { root: "size-8", tick: "size-[14px]" },
+};
+
+interface VerifiedTickProps {
+    size: "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "4xl";
+    className?: string;
+}
+
+export const VerifiedTick = ({ size, className }: VerifiedTickProps) => (
+    <svg data-verified className={cx("z-10 text-utility-blue-500", sizes[size].root, className)} viewBox="0 0 10 10" fill="none">
+        <path
+            d="M7.72237 1.77098C7.81734 2.00068 7.99965 2.18326 8.2292 2.27858L9.03413 2.61199C9.26384 2.70714 9.44635 2.88965 9.5415 3.11936C9.63665 3.34908 9.63665 3.60718 9.5415 3.83689L9.20833 4.64125C9.11313 4.87106 9.113 5.12943 9.20863 5.35913L9.54122 6.16325C9.58839 6.27702 9.61268 6.39897 9.6127 6.52214C9.61272 6.6453 9.58847 6.76726 9.54134 6.88105C9.4942 6.99484 9.42511 7.09823 9.33801 7.18531C9.2509 7.27238 9.14749 7.34144 9.03369 7.38854L8.22934 7.72171C7.99964 7.81669 7.81706 7.99899 7.72174 8.22855L7.38833 9.03348C7.29318 9.26319 7.11067 9.4457 6.88096 9.54085C6.65124 9.636 6.39314 9.636 6.16343 9.54085L5.35907 9.20767C5.12935 9.11276 4.87134 9.11295 4.64177 9.20821L3.83684 9.54115C3.60725 9.63608 3.34937 9.636 3.11984 9.54092C2.89032 9.44585 2.70791 9.26356 2.6127 9.03409L2.27918 8.22892C2.18421 7.99923 2.0019 7.81665 1.77235 7.72133L0.967421 7.38792C0.737807 7.29281 0.555355 7.11041 0.460169 6.88083C0.364983 6.65125 0.364854 6.39327 0.45981 6.16359L0.792984 5.35924C0.8879 5.12952 0.887707 4.87151 0.792445 4.64193L0.459749 3.83642C0.41258 3.72265 0.388291 3.60069 0.388272 3.47753C0.388252 3.35436 0.412501 3.2324 0.459634 3.11861C0.506767 3.00482 0.57586 2.90144 0.662965 2.81436C0.75007 2.72728 0.853479 2.65822 0.967283 2.61113L1.77164 2.27795C2.00113 2.18306 2.1836 2.00099 2.27899 1.7717L2.6124 0.966768C2.70755 0.737054 2.89006 0.554547 3.11978 0.459397C3.34949 0.364246 3.60759 0.364246 3.83731 0.459397L4.64166 0.792571C4.87138 0.887487 5.12939 0.887293 5.35897 0.792031L6.16424 0.459913C6.39392 0.364816 6.65197 0.364836 6.88164 0.459968C7.11131 0.555099 7.29379 0.737554 7.38895 0.967208L7.72247 1.77238L7.72237 1.77098Z"
+            className="fill-current"
+        />
+        <path
+            fillRule="evenodd"
+            clipRule="evenodd"
+            d="M6.95829 3.68932C7.02509 3.58439 7.04747 3.45723 7.02051 3.3358C6.99356 3.21437 6.91946 3.10862 6.81454 3.04182C6.70961 2.97502 6.58245 2.95264 6.46102 2.97959C6.33959 3.00655 6.23384 3.08064 6.16704 3.18557L4.33141 6.06995L3.49141 5.01995C3.41375 4.92281 3.30069 4.8605 3.17709 4.84673C3.05349 4.83296 2.92949 4.86885 2.83235 4.94651C2.73522 5.02417 2.67291 5.13723 2.65914 5.26083C2.64536 5.38443 2.68125 5.50843 2.75891 5.60557L4.00891 7.16807C4.0555 7.22638 4.11533 7.27271 4.18344 7.30323C4.25154 7.33375 4.32595 7.34757 4.40047 7.34353C4.47499 7.3395 4.54747 7.31773 4.61188 7.28004C4.67629 7.24234 4.73077 7.18981 4.77079 7.12682L6.95829 3.68932Z"
+            fill="white"
+        />
+    </svg>
+);
diff --git a/src/components/base/avatar/utils.ts b/src/components/base/avatar/utils.ts
new file mode 100644
index 0000000..a8feb18
--- /dev/null
+++ b/src/components/base/avatar/utils.ts
@@ -0,0 +1,12 @@
+/**
+ * Extracts the initials from a full name.
+ *
+ * @param name - The full name from which to extract initials.
+ * @returns The initials of the provided name. If the name contains only one word,
+ *          it returns the first character of that word. If the name contains two words,
+ *          it returns the first character of each word.
+ */
+export const getInitials = (name: string) => {
+    const [firstName, lastName] = name.split(" ");
+    return firstName.charAt(0) + (lastName ? lastName.charAt(0) : "");
+};
diff --git a/src/components/base/badges/badge-groups.tsx b/src/components/base/badges/badge-groups.tsx
new file mode 100644
index 0000000..548e020
--- /dev/null
+++ b/src/components/base/badges/badge-groups.tsx
@@ -0,0 +1,174 @@
+import type { FC, ReactNode } from "react";
+import { isValidElement } from "react";
+import { ArrowRight } from "@untitledui/icons";
+import { cx, sortCx } from "@/utils/cx";
+import { isReactComponent } from "@/utils/is-react-component";
+
+type Size = "md" | "lg";
+type Color = "brand" | "warning" | "error" | "gray" | "success";
+type Theme = "light" | "modern";
+type Align = "leading" | "trailing";
+
+const baseClasses: Record<Theme, { root?: string; addon?: string; icon?: string }> = {
+    light: {
+        root: "rounded-full ring-1 ring-inset",
+        addon: "rounded-full ring-1 ring-inset",
+    },
+    modern: {
+        root: "rounded-[10px] bg-primary text-secondary shadow-xs ring-1 ring-inset ring-primary hover:bg-secondary",
+        addon: "flex items-center rounded-md bg-primary shadow-xs ring-1 ring-inset ring-primary",
+        icon: "text-utility-gray-500",
+    },
+};
+
+const getSizeClasses = (
+    theme?: Theme,
+    text?: boolean,
+    icon?: boolean,
+): Record<Align, Record<Size, { root?: string; addon?: string; icon?: string; dot?: string }>> => ({
+    leading: {
+        md: {
+            root: cx("py-1 pr-2 pl-1 text-xs font-medium", !text && !icon && "pr-1"),
+            addon: cx("px-2 py-0.5", theme === "modern" && "gap-1 px-1.5", text && "mr-2"),
+            icon: "ml-1 size-4",
+        },
+        lg: {
+            root: cx("py-1 pr-2 pl-1 text-sm font-medium", !text && !icon && "pr-1"),
+            addon: cx("px-2.5 py-0.5", theme === "modern" && "gap-1.5 px-2", text && "mr-2"),
+            icon: "ml-1 size-4",
+        },
+    },
+    trailing: {
+        md: {
+            root: cx("py-1 pr-1 pl-3 text-xs font-medium", theme === "modern" && "pl-2.5"),
+            addon: cx("py-0.5 pr-1.5 pl-2", theme === "modern" && "pr-1.5 pl-2", text && "ml-2"),
+            icon: "ml-0.5 size-3 stroke-[3px]",
+            dot: "mr-1.5",
+        },
+        lg: {
+            root: "py-1 pr-1 pl-3 text-sm font-medium",
+            addon: cx("py-0.5 pr-2 pl-2.5", theme === "modern" && "pr-1.5 pl-2", text && "ml-2"),
+            icon: "ml-1 size-3 stroke-[3px]",
+            dot: "mr-2",
+        },
+    },
+});
+
+const colorClasses: Record<Theme, Record<Color, { root?: string; addon?: string; icon?: string; dot?: string }>> = sortCx({
+    light: {
+        brand: {
+            root: "bg-utility-brand-50 text-utility-brand-700 ring-utility-brand-200 hover:bg-utility-brand-100",
+            addon: "bg-primary text-current ring-utility-brand-200",
+            icon: "text-utility-brand-500",
+        },
+        gray: {
+            root: "bg-utility-gray-50 text-utility-gray-700 ring-utility-gray-200 hover:bg-utility-gray-100",
+            addon: "bg-primary text-current ring-utility-gray-200",
+            icon: "text-utility-gray-500",
+        },
+        error: {
+            root: "bg-utility-error-50 text-utility-error-700 ring-utility-error-200 hover:bg-utility-error-100",
+            addon: "bg-primary text-current ring-utility-error-200",
+            icon: "text-utility-error-500",
+        },
+        warning: {
+            root: "bg-utility-warning-50 text-utility-warning-700 ring-utility-warning-200 hover:bg-utility-warning-100",
+            addon: "bg-primary text-current ring-utility-warning-200",
+            icon: "text-utility-warning-500",
+        },
+        success: {
+            root: "bg-utility-success-50 text-utility-success-700 ring-utility-success-200 hover:bg-utility-success-100",
+            addon: "bg-primary text-current ring-utility-success-200",
+            icon: "text-utility-success-500",
+        },
+    },
+    modern: {
+        brand: {
+            dot: "bg-utility-brand-500 outline-3 -outline-offset-1 outline-utility-brand-100",
+        },
+        gray: {
+            dot: "bg-utility-gray-500 outline-3 -outline-offset-1 outline-utility-gray-100",
+        },
+        error: {
+            dot: "bg-utility-error-500 outline-3 -outline-offset-1 outline-utility-error-100",
+        },
+        warning: {
+            dot: "bg-utility-warning-500 outline-3 -outline-offset-1 outline-utility-warning-100",
+        },
+        success: {
+            dot: "bg-utility-success-500 outline-3 -outline-offset-1 outline-utility-success-100",
+        },
+    },
+});
+
+interface BadgeGroupProps {
+    children?: string | ReactNode;
+    addonText: string;
+    size?: Size;
+    color: Color;
+    theme?: Theme;
+    /**
+     * Alignment of the badge addon element.
+     */
+    align?: Align;
+    iconTrailing?: FC<{ className?: string }> | ReactNode;
+    className?: string;
+}
+
+export const BadgeGroup = ({
+    children,
+    addonText,
+    size = "md",
+    color = "brand",
+    theme = "light",
+    align = "leading",
+    className,
+    iconTrailing: IconTrailing = ArrowRight,
+}: BadgeGroupProps) => {
+    const colors = colorClasses[theme][color];
+    const sizes = getSizeClasses(theme, !!children, !!IconTrailing)[align][size];
+
+    const rootClasses = cx(
+        "inline-flex w-max cursor-pointer items-center transition duration-100 ease-linear",
+        baseClasses[theme].root,
+        sizes.root,
+        colors.root,
+        className,
+    );
+    const addonClasses = cx("inline-flex items-center", baseClasses[theme].addon, sizes.addon, colors.addon);
+    const dotClasses = cx("inline-block size-2 shrink-0 rounded-full", sizes.dot, colors.dot);
+    const iconClasses = cx(baseClasses[theme].icon, sizes.icon, colors.icon);
+
+    if (align === "trailing") {
+        return (
+            <div className={rootClasses}>
+                {theme === "modern" && <span className={dotClasses} />}
+
+                {children}
+
+                <span className={addonClasses}>
+                    {addonText}
+
+                    {/* Trailing icon */}
+                    {isReactComponent(IconTrailing) && <IconTrailing className={iconClasses} />}
+                    {isValidElement(IconTrailing) && IconTrailing}
+                </span>
+            </div>
+        );
+    }
+
+    return (
+        <div className={rootClasses}>
+            <span className={addonClasses}>
+                {theme === "modern" && <span className={dotClasses} />}
+                {addonText}
+            </span>
+
+            {children}
+
+            {/* Trailing icon */}
+            {isReactComponent(IconTrailing) && <IconTrailing className={iconClasses} />}
+            {isValidElement(IconTrailing) && IconTrailing}
+        </div>
+    );
+};
diff --git a/src/components/base/badges/badge-types.ts b/src/components/base/badges/badge-types.ts
new file mode 100644
index 0000000..4041b4c
--- /dev/null
+++ b/src/components/base/badges/badge-types.ts
@@ -0,0 +1,264 @@
+export type IconComponentType = React.FunctionComponent<{ className?: string; strokeWidth?: string | number }>;
+
+export type Sizes = "sm" | "md" | "lg";
+
+export type BadgeColors = "gray" | "brand" | "error" | "warning" | "success" | "gray-blue" | "blue-light" | "blue" | "indigo" | "purple" | "pink" | "orange";
+
+export type FlagTypes =
+    | "AD"
+    | "AE"
+    | "AF"
+    | "AG"
+    | "AI"
+    | "AL"
+    | "AM"
+    | "AO"
+    | "AR"
+    | "AS"
+    | "AT"
+    | "AU"
+    | "AW"
+    | "AX"
+    | "AZ"
+    | "BA"
+    | "BB"
+    | "BD"
+    | "BE"
+    | "BF"
+    | "BG"
+    | "BH"
+    | "BI"
+    | "BJ"
+    | "BL"
+    | "BM"
+    | "BN"
+    | "BO"
+    | "BQ-1"
+    | "BQ-2"
+    | "BQ"
+    | "BR"
+    | "BS"
+    | "BT"
+    | "BW"
+    | "BY"
+    | "BZ"
+    | "CA"
+    | "CC"
+    | "CD-1"
+    | "CD"
+    | "CF"
+    | "CH"
+    | "CK"
+    | "CL"
+    | "CM"
+    | "CN"
+    | "CO"
+    | "CR"
+    | "CU"
+    | "CW"
+    | "CX"
+    | "CY"
+    | "CZ"
+    | "DE"
+    | "DJ"
+    | "DK"
+    | "DM"
+    | "DO"
+    | "DS"
+    | "DZ"
+    | "earth"
+    | "EC"
+    | "EE"
+    | "EG"
+    | "EH"
+    | "ER"
+    | "ES"
+    | "ET"
+    | "FI"
+    | "FJ"
+    | "FK"
+    | "FM"
+    | "FO"
+    | "FR"
+    | "GA"
+    | "GB-2"
+    | "GB"
+    | "GD"
+    | "GE"
+    | "GG"
+    | "GH"
+    | "GI"
+    | "GL"
+    | "GM"
+    | "GN"
+    | "GQ"
+    | "GR"
+    | "GT"
+    | "GU"
+    | "GW"
+    | "GY"
+    | "HK"
+    | "HN"
+    | "HR"
+    | "HT"
+    | "HU"
+    | "ID"
+    | "IE"
+    | "IL"
+    | "IM"
+    | "IN"
+    | "IO"
+    | "IQ"
+    | "IR"
+    | "IS"
+    | "IT"
+    | "JE"
+    | "JM"
+    | "JO"
+    | "JP"
+    | "KE"
+    | "KG"
+    | "KH"
+    | "KI"
+    | "KM"
+    | "KN"
+    | "KP"
+    | "KR"
+    | "KW"
+    | "KY"
+    | "KZ"
+    | "LA"
+    | "LB"
+    | "LC"
+    | "LI"
+    | "LK"
+    | "LR"
+    | "LS"
+    | "LT"
+    | "LU"
+    | "LV"
+    | "LY"
+    | "MA"
+    | "MC"
+    | "MD"
+    | "ME"
+    | "MG"
+    | "MH"
+    | "MK"
+    | "ML"
+    | "MM"
+    | "MN"
+    | "MO"
+    | "MP"
+    | "MQ"
+    | "MR"
+    | "MS"
+    | "MT"
+    | "MU"
+    | "MV"
+    | "MW"
+    | "MX"
+    | "MY"
+    | "MZ"
+    | "NA"
+    | "NE"
+    | "NF"
+    | "NG"
+    | "NI"
+    | "NL"
+    | "NO"
+    | "NP"
+    | "NR"
+    | "NU"
+    | "NZ"
+    | "OM"
+    | "PA"
+    | "PE"
+    | "PF"
+    | "PG"
+    | "PH"
+    | "PK"
+    | "PL"
+    | "PM"
+    | "PN"
+    | "PR"
+    | "PT"
+    | "PW"
+    | "PY"
+    | "QA"
+    | "RE"
+    | "RO"
+    | "RS"
+    | "RU"
+    | "RW"
+    | "SA"
+    | "SB"
+    | "SC"
+    | "SD"
+    | "SE"
+    | "SG"
+    | "SH"
+    | "SI"
+    | "SJ"
+    | "SK"
+    | "SL"
+    | "SM"
+    | "SN"
+    | "SO"
+    | "SR"
+    | "SS"
+    | "ST"
+    | "SV"
+    | "SX"
+    | "SY"
+    | "SZ"
+    | "TC"
+    | "TD"
+    | "TF"
+    | "TG"
+    | "TH"
+    | "TJ"
+    | "TK"
+    | "TL"
+    | "TM"
+    | "TN"
+    | "TO"
+    | "TR"
+    | "TT"
+    | "TV"
+    | "TZ"
+    | "UA"
+    | "UG"
+    | "UM"
+    | "US"
+    | "UY"
+    | "UZ"
+    | "VA"
+    | "VC"
+    | "VE"
+    | "VG"
+    | "VI"
+    | "VN"
+    | "VU"
+    | "WF"
+    | "WS"
+    | "YE"
+    | "YT"
+    | "ZA"
+    | "ZM"
+    | "ZW";
+
+export type ExtractColorKeys<T> = T extends { styles: infer C } ? keyof C : never;
+export type ExtractBadgeKeys<T> = keyof T;
+export type BadgeTypeToColorMap<T> = {
+    [K in ExtractBadgeKeys<T>]: ExtractColorKeys<T[K]>;
+};
+export type BadgeTypeColors<T> = ExtractColorKeys<T[keyof T]>;
+
+export const badgeTypes = {
+    pillColor: "pill-color",
+    badgeColor: "color",
+    badgeModern: "modern",
+} as const;
+
+export type BadgeTypes = (typeof badgeTypes)[keyof typeof badgeTypes];
diff --git a/src/components/base/badges/badges.tsx b/src/components/base/badges/badges.tsx
new file mode 100644
index 0000000..b5d40e8
--- /dev/null
+++ b/src/components/base/badges/badges.tsx
@@ -0,0 +1,415 @@
+import type { MouseEventHandler, ReactNode } from "react";
+import { X as CloseX } from "@untitledui/icons";
+import { Dot } from "@/components/foundations/dot-icon";
+import { cx } from "@/utils/cx";
+import type { BadgeColors, BadgeTypeToColorMap, BadgeTypes, FlagTypes, IconComponentType, Sizes } from "./badge-types";
+import { badgeTypes } from "./badge-types";
+
+export const filledColors: Record<BadgeColors, { root: string; addon: string; addonButton: string }> = {
+    gray: {
+        root: "bg-utility-gray-50 text-utility-gray-700 ring-utility-gray-200",
+        addon: "text-utility-gray-500",
+        addonButton: "hover:bg-utility-gray-100 text-utility-gray-400 hover:text-utility-gray-500",
+    },
+    brand: {
+        root: "bg-utility-brand-50 text-utility-brand-700 ring-utility-brand-200",
+        addon: "text-utility-brand-500",
+        addonButton: "hover:bg-utility-brand-100 text-utility-brand-400 hover:text-utility-brand-500",
+    },
+    error: {
+        root: "bg-utility-error-50 text-utility-error-700 ring-utility-error-200",
+        addon: "text-utility-error-500",
+        addonButton: "hover:bg-utility-error-100 text-utility-error-400 hover:text-utility-error-500",
+    },
+    warning: {
+        root: "bg-utility-warning-50 text-utility-warning-700 ring-utility-warning-200",
+        addon: "text-utility-warning-500",
+        addonButton: "hover:bg-utility-warning-100 text-utility-warning-400 hover:text-utility-warning-500",
+    },
+    success: {
+        root: "bg-utility-success-50 text-utility-success-700 ring-utility-success-200",
+        addon: "text-utility-success-500",
+        addonButton: "hover:bg-utility-success-100 text-utility-success-400 hover:text-utility-success-500",
+    },
+    "gray-blue": {
+        root: "bg-utility-gray-blue-50 text-utility-gray-blue-700 ring-utility-gray-blue-200",
+        addon: "text-utility-gray-blue-500",
+        addonButton: "hover:bg-utility-gray-blue-100 text-utility-gray-blue-400 hover:text-utility-gray-blue-500",
+    },
+    "blue-light": {
+        root: "bg-utility-blue-light-50 text-utility-blue-light-700 ring-utility-blue-light-200",
+        addon: "text-utility-blue-light-500",
+        addonButton: "hover:bg-utility-blue-light-100 text-utility-blue-light-400 hover:text-utility-blue-light-500",
+    },
+    blue: {
+        root: "bg-utility-blue-50 text-utility-blue-700 ring-utility-blue-200",
+        addon: "text-utility-blue-500",
+        addonButton: "hover:bg-utility-blue-100 text-utility-blue-400 hover:text-utility-blue-500",
+    },
+    indigo: {
+        root: "bg-utility-indigo-50 text-utility-indigo-700 ring-utility-indigo-200",
+        addon: "text-utility-indigo-500",
+        addonButton: "hover:bg-utility-indigo-100 text-utility-indigo-400 hover:text-utility-indigo-500",
+    },
+    purple: {
+        root: "bg-utility-purple-50 text-utility-purple-700 ring-utility-purple-200",
+        addon: "text-utility-purple-500",
+        addonButton: "hover:bg-utility-purple-100 text-utility-purple-400 hover:text-utility-purple-500",
+    },
+    pink: {
+        root: "bg-utility-pink-50 text-utility-pink-700 ring-utility-pink-200",
+        addon: "text-utility-pink-500",
+        addonButton: "hover:bg-utility-pink-100 text-utility-pink-400 hover:text-utility-pink-500",
+    },
+    orange: {
+        root: "bg-utility-orange-50 text-utility-orange-700 ring-utility-orange-200",
+        addon: "text-utility-orange-500",
+        addonButton: "hover:bg-utility-orange-100 text-utility-orange-400 hover:text-utility-orange-500",
+    },
+};
+
+const addonOnlyColors = Object.fromEntries(Object.entries(filledColors).map(([key, value]) => [key, { root: "", addon: value.addon }])) as Record<
+    BadgeColors,
+    { root: string; addon: string }
+>;
+
+const withPillTypes = {
+    [badgeTypes.pillColor]: {
+        common: "size-max flex items-center whitespace-nowrap rounded-full ring-1 ring-inset",
+        styles: filledColors,
+    },
+    [badgeTypes.badgeColor]: {
+        common: "size-max flex items-center whitespace-nowrap rounded-md ring-1 ring-inset",
+        styles: filledColors,
+    },
+    [badgeTypes.badgeModern]: {
+        common: "size-max flex items-center whitespace-nowrap rounded-md ring-1 ring-inset shadow-xs",
+        styles: {
+            gray: {
+                root: "bg-primary text-secondary ring-primary",
+                addon: "text-gray-500",
+                addonButton: "hover:bg-utility-gray-100 text-utility-gray-400 hover:text-utility-gray-500",
+            },
+        },
+    },
+};
+
+const withBadgeTypes = {
+    [badgeTypes.pillColor]: {
+        common: "size-max flex items-center whitespace-nowrap rounded-full ring-1 ring-inset",
+        styles: filledColors,
+    },
+    [badgeTypes.badgeColor]: {
+        common: "size-max flex items-center whitespace-nowrap rounded-md ring-1 ring-inset",
+        styles: filledColors,
+    },
+    [badgeTypes.badgeModern]: {
+        common: "size-max flex items-center whitespace-nowrap rounded-md ring-1 ring-inset bg-primary text-secondary ring-primary shadow-xs",
+        styles: addonOnlyColors,
+    },
+};
+
+export type BadgeColor<T extends BadgeTypes> = BadgeTypeToColorMap<typeof withPillTypes>[T];
+
+interface BadgeProps<T extends BadgeTypes> {
+    type?: T;
+    size?: Sizes;
+    color?: BadgeColor<T>;
+    children: ReactNode;
+    className?: string;
+}
+
+export const Badge = <T extends BadgeTypes>(props: BadgeProps<T>) => {
+    const { type = "pill-color", size = "md", color = "gray", children } = props;
+    const colors = withPillTypes[type];
+
+    const pillSizes = {
+        sm: "py-0.5 px-2 text-xs font-medium",
+        md: "py-0.5 px-2.5 text-sm font-medium",
+        lg: "py-1 px-3 text-sm font-medium",
+    };
+    const badgeSizes = {
+        sm: "py-0.5 px-1.5 text-xs font-medium",
+        md: "py-0.5 px-2 text-sm font-medium",
+        lg: "py-1 px-2.5 text-sm font-medium rounded-lg",
+    };
+
+    const sizes = {
+        [badgeTypes.pillColor]: pillSizes,
+        [badgeTypes.badgeColor]: badgeSizes,
+        [badgeTypes.badgeModern]: badgeSizes,
+    };
+
+    return <span className={cx(colors.common, sizes[type][size], colors.styles[color].root, props.className)}>{children}</span>;
+};
+
+interface BadgeWithDotProps<T extends BadgeTypes> {
+    type?: T;
+    size?: Sizes;
+    color?: BadgeTypeToColorMap<typeof withBadgeTypes>[T];
+    className?: string;
+    children: ReactNode;
+}
+
+export const BadgeWithDot = <T extends BadgeTypes>(props: BadgeWithDotProps<T>) => {
+    const { size = "md", color = "gray", type = "pill-color", className, children } = props;
+
+    const colors = withBadgeTypes[type];
+
+    const pillSizes = {
+        sm: "gap-1 py-0.5 pl-1.5 pr-2 text-xs font-medium",
+        md: "gap-1.5 py-0.5 pl-2 pr-2.5 text-sm font-medium",
+        lg: "gap-1.5 py-1 pl-2.5 pr-3 text-sm font-medium",
+    };
+
+    const badgeSizes = {
+        sm: "gap-1 py-0.5 px-1.5 text-xs font-medium",
+        md: "gap-1.5 py-0.5 px-2 text-sm font-medium",
+        lg: "gap-1.5 py-1 px-2.5 text-sm font-medium rounded-lg",
+    };
+
+    const sizes = {
+        [badgeTypes.pillColor]: pillSizes,
+        [badgeTypes.badgeColor]: badgeSizes,
+        [badgeTypes.badgeModern]: badgeSizes,
+    };
+
+    return (
+        <span className={cx(colors.common, sizes[type][size], colors.styles[color].root, className)}>
+            <Dot className={colors.styles[color].addon} size="sm" />
+            {children}
+        </span>
+    );
+};
+
+interface BadgeWithIconProps<T extends BadgeTypes> {
+    type?: T;
+    size?: Sizes;
+    color?: BadgeTypeToColorMap<typeof withBadgeTypes>[T];
+    iconLeading?: IconComponentType;
+    iconTrailing?: IconComponentType;
+    children: ReactNode;
+    className?: string;
+}
+
+export const BadgeWithIcon = <T extends BadgeTypes>(props: BadgeWithIconProps<T>) => {
+    const { size = "md", color = "gray", type = "pill-color", iconLeading: IconLeading, iconTrailing: IconTrailing, children, className } = props;
+
+    const colors = withBadgeTypes[type];
+
+    const icon = IconLeading ? "leading" : "trailing";
+
+    const pillSizes = {
+        sm: {
+            trailing: "gap-0.5 py-0.5 pl-2 pr-1.5 text-xs font-medium",
+            leading: "gap-0.5 py-0.5 pr-2 pl-1.5 text-xs font-medium",
+        },
+        md: {
+            trailing: "gap-1 py-0.5 pl-2.5 pr-2 text-sm font-medium",
+            leading: "gap-1 py-0.5 pr-2.5 pl-2 text-sm font-medium",
+        },
+        lg: {
+            trailing: "gap-1 py-1 pl-3 pr-2.5 text-sm font-medium",
+            leading: "gap-1 py-1 pr-3 pl-2.5 text-sm font-medium",
+        },
+    };
+    const badgeSizes = {
+        sm: {
+            trailing: "gap-0.5 py-0.5 pl-2 pr-1.5 text-xs font-medium",
+            leading: "gap-0.5 py-0.5 pr-2 pl-1.5 text-xs font-medium",
+        },
+        md: {
+            trailing: "gap-1 py-0.5 pl-2 pr-1.5 text-sm font-medium",
+            leading: "gap-1 py-0.5 pr-2 pl-1.5 text-sm font-medium",
+        },
+        lg: {
+            trailing: "gap-1 py-1 pl-2.5 pr-2 text-sm font-medium rounded-lg",
+            leading: "gap-1 py-1 pr-2.5 pl-2 text-sm font-medium rounded-lg",
+        },
+    };
+
+    const sizes = {
+        [badgeTypes.pillColor]: pillSizes,
+        [badgeTypes.badgeColor]: badgeSizes,
+        [badgeTypes.badgeModern]: badgeSizes,
+    };
+
+    return (
+        <span className={cx(colors.common, sizes[type][size][icon], colors.styles[color].root, className)}>
+            {IconLeading && <IconLeading className={cx(colors.styles[color].addon, "size-3 stroke-3")} />}
+            {children}
+            {IconTrailing && <IconTrailing className={cx(colors.styles[color].addon, "size-3 stroke-3")} />}
+        </span>
+    );
+};
+
+interface BadgeWithFlagProps<T extends BadgeTypes> {
+    type?: T;
+    size?: Sizes;
+    flag?: FlagTypes;
+    color?: BadgeTypeToColorMap<typeof withPillTypes>[T];
+    children: ReactNode;
+}
+
+export const BadgeWithFlag = <T extends BadgeTypes>(props: BadgeWithFlagProps<T>) => {
+    const { size = "md", color = "gray", flag = "AU", type = "pill-color", children } = props;
+
+    const colors = withPillTypes[type];
+
+    const pillSizes = {
+        sm: "gap-1 py-0.5 pl-0.75 pr-2 text-xs font-medium",
+        md: "gap-1.5 py-0.5 pl-1 pr-2.5 text-sm font-medium",
+        lg: "gap-1.5 py-1 pl-1.5 pr-3 text-sm font-medium",
+    };
+    const badgeSizes = {
+        sm: "gap-1 py-0.5 pl-1 pr-1.5 text-xs font-medium",
+        md: "gap-1.5 py-0.5 pl-1.5 pr-2 text-sm font-medium",
+        lg: "gap-1.5 py-1 pl-2 pr-2.5 text-sm font-medium rounded-lg",
+    };
+
+    const sizes = {
+        [badgeTypes.pillColor]: pillSizes,
+        [badgeTypes.badgeColor]: badgeSizes,
+        [badgeTypes.badgeModern]: badgeSizes,
+    };
+
+    return (
+        <span className={cx(colors.common, sizes[type][size], colors.styles[color].root)}>
+            <img src={`https://www.untitledui.com/images/flags/${flag}.svg`} className="size-4 max-w-none rounded-full" alt={`${flag} flag`} />
+            {children}
+        </span>
+    );
+};
+
+interface BadgeWithImageProps<T extends BadgeTypes> {
+    type?: T;
+    size?: Sizes;
+    imgSrc: string;
+    color?: BadgeTypeToColorMap<typeof withPillTypes>[T];
+    children: ReactNode;
+}
+
+export const BadgeWithImage = <T extends BadgeTypes>(props: BadgeWithImageProps<T>) => {
+    const { size = "md", color = "gray", type = "pill-color", imgSrc, children } = props;
+
+    const colors = withPillTypes[type];
+
+    const pillSizes = {
+        sm: "gap-1 py-0.5 pl-0.75 pr-2 text-xs font-medium",
+        md: "gap-1.5 py-0.5 pl-1 pr-2.5 text-sm font-medium",
+        lg: "gap-1.5 py-1 pl-1.5 pr-3 text-sm font-medium",
+    };
+    const badgeSizes = {
+        sm: "gap-1 py-0.5 pl-1 pr-1.5 text-xs font-medium",
+        md: "gap-1.5 py-0.5 pl-1.5 pr-2 text-sm font-medium",
+        lg: "gap-1.5 py-1 pl-2 pr-2.5 text-sm font-medium rounded-lg",
+    };
+
+    const sizes = {
+        [badgeTypes.pillColor]: pillSizes,
+        [badgeTypes.badgeColor]: badgeSizes,
+        [badgeTypes.badgeModern]: badgeSizes,
+    };
+
+    return (
+        <span className={cx(colors.common, sizes[type][size], colors.styles[color].root)}>
+            <img src={imgSrc} className="size-4 max-w-none rounded-full" alt="Badge image" />
+            {children}
+        </span>
+    );
+};
+
+interface BadgeWithButtonProps<T extends BadgeTypes> {
+    type?: T;
+    size?: Sizes;
+    icon?: IconComponentType;
+    color?: BadgeTypeToColorMap<typeof withPillTypes>[T];
+    children: ReactNode;
+    /**
+     * The label for the button.
+     */
+    buttonLabel?: string;
+    /**
+     * The click event handler for the button.
+     */
+    onButtonClick?: MouseEventHandler<HTMLButtonElement>;
+}
+
+export const BadgeWithButton = <T extends BadgeTypes>(props: BadgeWithButtonProps<T>) => {
+    const { size = "md", color = "gray", type = "pill-color", icon: Icon = CloseX, buttonLabel, children } = props;
+
+    const colors = withPillTypes[type];
+
+    const pillSizes = {
+        sm: "gap-0.5 py-0.5 pl-2 pr-0.75 text-xs font-medium",
+        md: "gap-0.5 py-0.5 pl-2.5 pr-1 text-sm font-medium",
+        lg: "gap-0.5 py-1 pl-3 pr-1.5 text-sm font-medium",
+    };
+    const badgeSizes = {
+        sm: "gap-0.5 py-0.5 pl-1.5 pr-0.75 text-xs font-medium",
+        md: "gap-0.5 py-0.5 pl-2 pr-1 text-sm font-medium",
+        lg: "gap-0.5 py-1 pl-2.5 pr-1.5 text-sm font-medium rounded-lg",
+    };
+
+    const sizes = {
+        [badgeTypes.pillColor]: pillSizes,
+        [badgeTypes.badgeColor]: badgeSizes,
+        [badgeTypes.badgeModern]: badgeSizes,
+    };
+
+    return (
+        <span className={cx(colors.common, sizes[type][size], colors.styles[color].root)}>
+            {children}
+            <button
+                type="button"
+                aria-label={buttonLabel}
+                onClick={props.onButtonClick}
+                className={cx(
+                    "flex cursor-pointer items-center justify-center p-0.5 outline-focus-ring transition duration-100 ease-linear focus-visible:outline-2",
+                    colors.styles[color].addonButton,
+                    type === "pill-color" ? "rounded-full" : "rounded-[3px]",
+                )}
+            >
+                <Icon className="size-3 stroke-[3px] transition-inherit-all" />
+            </button>
+        </span>
+    );
+};
+
+interface BadgeIconProps<T extends BadgeTypes> {
+    type?: T;
+    size?: Sizes;
+    icon: IconComponentType;
+    color?: BadgeTypeToColorMap<typeof withPillTypes>[T];
+    children?: ReactNode;
+}
+
+export const BadgeIcon = <T extends BadgeTypes>(props: BadgeIconProps<T>) => {
+    const { size = "md", color = "gray", type = "pill-color", icon: Icon } = props;
+
+    const colors = withPillTypes[type];
+
+    const pillSizes = {
+        sm: "p-1.25",
+        md: "p-1.5",
+        lg: "p-2",
+    };
+
+    const badgeSizes = {
+        sm: "p-1.25",
+        md: "p-1.5",
+        lg: "p-2 rounded-lg",
+    };
+
+    const sizes = {
+        [badgeTypes.pillColor]: pillSizes,
+        [badgeTypes.badgeColor]: badgeSizes,
+        [badgeTypes.badgeModern]: badgeSizes,
+    };
+
+    return (
+        <span className={cx(colors.common, sizes[type][size], colors.styles[color].root)}>
+            <Icon className={cx("size-3 stroke-[3px]", colors.styles[color].addon)} />
+        </span>
+    );
+};
diff --git a/src/components/base/button-group/button-group.tsx b/src/components/base/button-group/button-group.tsx
new file mode 100644
index 0000000..d3e24b5
--- /dev/null
+++ b/src/components/base/button-group/button-group.tsx
@@ -0,0 +1,104 @@
+import { type FC, type PropsWithChildren, type ReactNode, type RefAttributes, createContext, isValidElement, useContext } from "react";
+import {
+    ToggleButton as AriaToggleButton,
+    ToggleButtonGroup as AriaToggleButtonGroup,
+    type ToggleButtonGroupProps,
+    type ToggleButtonProps,
+} from "react-aria-components";
+import { cx, sortCx } from "@/utils/cx";
+import { isReactComponent } from "@/utils/is-react-component";
+
+export const styles = sortCx({
+    common: {
+        root: [
+            "group/button-group inline-flex h-max cursor-pointer items-center bg-primary font-semibold whitespace-nowrap text-secondary shadow-skeumorphic ring-1 ring-primary outline-brand transition duration-100 ease-linear ring-inset",
+            // Hover and focus styles
+            "hover:bg-primary_hover hover:text-secondary_hover focus-visible:z-10 focus-visible:outline-2 focus-visible:outline-offset-2",
+            // Disabled styles
+            "disabled:cursor-not-allowed disabled:bg-primary disabled:text-disabled",
+            // Selected styles
+            "selected:bg-active selected:text-secondary_hover selected:disabled:bg-disabled_subtle",
+        ].join(" "),
+        icon: "pointer-events-none text-fg-quaternary transition-[inherit] group-hover/button-group:text-fg-quaternary_hover group-disabled/button-group:text-fg-disabled_subtle",
+    },
+
+    sizes: {
+        sm: {
+            root: "gap-1.5 px-3.5 py-2 text-sm not-last:pr-[calc(calc(var(--spacing)*3.5)+1px)] first:rounded-l-lg last:rounded-r-lg data-icon-leading:pl-3 data-icon-only:p-2",
+            icon: "size-5",
+        },
+        md: {
+            root: "gap-1.5 px-4 py-2.5 text-sm not-last:pr-[calc(calc(var(--spacing)*4)+1px)] first:rounded-l-lg last:rounded-r-lg data-icon-leading:pl-3.5 data-icon-only:px-3",
+            icon: "size-5",
+        },
+        lg: {
+            root: "gap-2 px-4.5 py-2.5 text-md not-last:pr-[calc(calc(var(--spacing)*4.5)+1px)] first:rounded-l-lg last:rounded-r-lg data-icon-leading:pl-4 data-icon-only:p-3",
+            icon: "size-5",
+        },
+    },
+});
+
+type ButtonSize = keyof typeof styles.sizes;
+
+const ButtonGroupContext = createContext<{ size: ButtonSize }>({ size: "md" });
+
+interface ButtonGroupItemProps extends ToggleButtonProps, RefAttributes<HTMLButtonElement> {
+    iconLeading?: FC<{ className?: string }> | ReactNode;
+    iconTrailing?: FC<{ className?: string }> | ReactNode;
+    onClick?: () => void;
+    className?: string;
+}
+
+export const ButtonGroupItem = ({
+    iconLeading: IconLeading,
+    iconTrailing: IconTrailing,
+    children,
+    className,
+    ...otherProps
+}: PropsWithChildren<ButtonGroupItemProps>) => {
+    const context = useContext(ButtonGroupContext);
+
+    if (!context) {
+        throw new Error("ButtonGroupItem must be used within a ButtonGroup component");
+    }
+
+    const { size } = context;
+
+    const isIcon = (IconLeading || IconTrailing) && !children;
+
+    return (
+        <AriaToggleButton
+            {...otherProps}
+            data-icon-only={isIcon ? true : undefined}
+            data-icon-leading={IconLeading ? true : undefined}
+            className={cx(styles.common.root, styles.sizes[size].root, className)}
+        >
+            {isReactComponent(IconLeading) && <IconLeading className={cx(styles.common.icon, styles.sizes[size].icon)} />}
+            {isValidElement(IconLeading) && IconLeading}
+
+            {children}
+
+            {isReactComponent(IconTrailing) && <IconTrailing className={cx(styles.common.icon, styles.sizes[size].icon)} />}
+            {isValidElement(IconTrailing) && IconTrailing}
+        </AriaToggleButton>
+    );
+};
+
+interface ButtonGroupProps extends Omit<ToggleButtonGroupProps, "orientation">, RefAttributes<HTMLDivElement> {
+    size?: ButtonSize;
+    className?: string;
+}
+
+export const ButtonGroup = ({ children, size = "md", className, ...otherProps }: ButtonGroupProps) => {
+    return (
+        <ButtonGroupContext.Provider value={{ size }}>
+            <AriaToggleButtonGroup
+                selectionMode="single"
+                className={cx("relative z-0 inline-flex w-max -space-x-px rounded-lg shadow-xs", className)}
+                {...otherProps}
+            >
+                {children}
+            </AriaToggleButtonGroup>
+        </ButtonGroupContext.Provider>
+    );
+};
diff --git a/src/components/base/buttons/app-store-buttons-outline.tsx b/src/components/base/buttons/app-store-buttons-outline.tsx
new file mode 100644
index 0000000..976e998
--- /dev/null
+++ b/src/components/base/buttons/app-store-buttons-outline.tsx
@@ -0,0 +1,376 @@
+import type { AnchorHTMLAttributes } from "react";
+import { cx } from "@/utils/cx";
+
+export const GooglePlayButton = ({ size = "md", ...props }: AnchorHTMLAttributes<HTMLAnchorElement> & { size?: "md" | "lg" }) => {
+    return (
+        <a
+            aria-label="Get it on Google Play"
+            href="#"
+            {...props}
+            className={cx(
+                "rounded-[7px] text-fg-primary ring-1 ring-fg-primary outline-focus-ring ring-inset focus-visible:outline-2 focus-visible:outline-offset-2",
+                props.className,
+            )}
+        >
+            <svg width={size === "md" ? 135 : 149} height={size === "md" ? 40 : 44} viewBox="0 0 135 40" fill="none">
+                <path
+                    d="M68.136 21.7511C65.784 21.7511 63.867 23.5401 63.867 26.0041C63.867 28.4531 65.784 30.2571 68.136 30.2571C70.489 30.2571 72.406 28.4531 72.406 26.0041C72.405 23.5401 70.488 21.7511 68.136 21.7511ZM68.136 28.5831C66.847 28.5831 65.736 27.5201 65.736 26.0051C65.736 24.4741 66.848 23.4271 68.136 23.4271C69.425 23.4271 70.536 24.4741 70.536 26.0051C70.536 27.5191 69.425 28.5831 68.136 28.5831ZM58.822 21.7511C56.47 21.7511 54.553 23.5401 54.553 26.0041C54.553 28.4531 56.47 30.2571 58.822 30.2571C61.175 30.2571 63.092 28.4531 63.092 26.0041C63.092 23.5401 61.175 21.7511 58.822 21.7511ZM58.822 28.5831C57.533 28.5831 56.422 27.5201 56.422 26.0051C56.422 24.4741 57.534 23.4271 58.822 23.4271C60.111 23.4271 61.222 24.4741 61.222 26.0051C61.223 27.5191 60.111 28.5831 58.822 28.5831ZM47.744 23.0571V24.8611H52.062C51.933 25.8761 51.595 26.6171 51.079 27.1321C50.451 27.7601 49.468 28.4531 47.744 28.4531C45.086 28.4531 43.008 26.3101 43.008 23.6521C43.008 20.9941 45.086 18.8511 47.744 18.8511C49.178 18.8511 50.225 19.4151 50.998 20.1401L52.271 18.8671C51.191 17.8361 49.758 17.0471 47.744 17.0471C44.103 17.0471 41.042 20.0111 41.042 23.6521C41.042 27.2931 44.103 30.2571 47.744 30.2571C49.709 30.2571 51.192 29.6121 52.351 28.4041C53.543 27.2121 53.914 25.5361 53.914 24.1831C53.914 23.7651 53.882 23.3781 53.817 23.0561H47.744V23.0571ZM93.052 24.4581C92.698 23.5081 91.618 21.7511 89.411 21.7511C87.22 21.7511 85.399 23.4751 85.399 26.0041C85.399 28.3881 87.204 30.2571 89.62 30.2571C91.569 30.2571 92.697 29.0651 93.165 28.3721L91.715 27.4051C91.232 28.1141 90.571 28.5811 89.62 28.5811C88.67 28.5811 87.993 28.1461 87.558 27.2921L93.245 24.9401L93.052 24.4581ZM87.252 25.8761C87.204 24.2321 88.525 23.3951 89.476 23.3951C90.217 23.3951 90.845 23.7661 91.055 24.2971L87.252 25.8761ZM82.629 30.0001H84.497V17.4991H82.629V30.0001ZM79.567 22.7021H79.503C79.084 22.2021 78.278 21.7511 77.264 21.7511C75.137 21.7511 73.188 23.6201 73.188 26.0211C73.188 28.4051 75.137 30.2581 77.264 30.2581C78.279 30.2581 79.084 29.8071 79.503 29.2921H79.567V29.9041C79.567 31.5311 78.697 32.4011 77.296 32.4011C76.152 32.4011 75.443 31.5801 75.153 30.8871L73.526 31.5641C73.993 32.6911 75.233 34.0771 77.296 34.0771C79.487 34.0771 81.34 32.7881 81.34 29.6461V22.0101H79.568V22.7021H79.567ZM77.425 28.5831C76.136 28.5831 75.057 27.5031 75.057 26.0211C75.057 24.5221 76.136 23.4271 77.425 23.4271C78.697 23.4271 79.696 24.5221 79.696 26.0211C79.696 27.5031 78.697 28.5831 77.425 28.5831ZM101.806 17.4991H97.335V30.0001H99.2V25.2641H101.805C103.873 25.2641 105.907 23.7671 105.907 21.3821C105.907 18.9971 103.874 17.4991 101.806 17.4991ZM101.854 23.5241H99.2V19.2391H101.854C103.249 19.2391 104.041 20.3941 104.041 21.3821C104.041 22.3501 103.249 23.5241 101.854 23.5241ZM113.386 21.7291C112.035 21.7291 110.636 22.3241 110.057 23.6431L111.713 24.3341C112.067 23.6431 112.727 23.4171 113.418 23.4171C114.383 23.4171 115.364 23.9961 115.38 25.0251V25.1541C115.042 24.9611 114.318 24.6721 113.434 24.6721C111.649 24.6721 109.831 25.6531 109.831 27.4861C109.831 29.1591 111.295 30.2361 112.935 30.2361C114.189 30.2361 114.881 29.6731 115.315 29.0131H115.379V29.9781H117.181V25.1851C117.182 22.9671 115.524 21.7291 113.386 21.7291ZM113.16 28.5801C112.55 28.5801 111.697 28.2741 111.697 27.5181C111.697 26.5531 112.759 26.1831 113.676 26.1831C114.495 26.1831 114.882 26.3601 115.38 26.6011C115.235 27.7601 114.238 28.5801 113.16 28.5801ZM123.743 22.0021L121.604 27.4221H121.54L119.32 22.0021H117.31L120.639 29.5771L118.741 33.7911H120.687L125.818 22.0021H123.743ZM106.937 30.0001H108.802V17.4991H106.937V30.0001Z"
+                    className="fill-current"
+                />
+                <path
+                    d="M47.418 10.2429C47.418 11.0809 47.1701 11.7479 46.673 12.2459C46.109 12.8379 45.3731 13.1339 44.4691 13.1339C43.6031 13.1339 42.8661 12.8339 42.2611 12.2339C41.6551 11.6329 41.3521 10.8889 41.3521 10.0009C41.3521 9.11194 41.6551 8.36794 42.2611 7.76794C42.8661 7.16694 43.6031 6.86694 44.4691 6.86694C44.8991 6.86694 45.3101 6.95094 45.7001 7.11794C46.0911 7.28594 46.404 7.50894 46.6381 7.78794L46.111 8.31594C45.714 7.84094 45.167 7.60394 44.468 7.60394C43.836 7.60394 43.29 7.82594 42.829 8.26994C42.368 8.71394 42.1381 9.29094 42.1381 9.99994C42.1381 10.7089 42.368 11.2859 42.829 11.7299C43.29 12.1739 43.836 12.3959 44.468 12.3959C45.138 12.3959 45.6971 12.1729 46.1441 11.7259C46.4341 11.4349 46.602 11.0299 46.647 10.5109H44.468V9.78994H47.375C47.405 9.94694 47.418 10.0979 47.418 10.2429Z"
+                    className="fill-current"
+                />
+                <path d="M52.0281 7.737H49.2961V9.639H51.7601V10.36H49.2961V12.262H52.0281V13H48.5251V7H52.0281V7.737Z" className="fill-current" />
+                <path d="M55.279 13H54.508V7.737H52.832V7H56.955V7.737H55.279V13Z" className="fill-current" />
+                <path d="M59.938 13V7H60.709V13H59.938Z" className="fill-current" />
+                <path d="M64.1281 13H63.3572V7.737H61.6812V7H65.8042V7.737H64.1281V13Z" className="fill-current" />
+                <path
+                    d="M73.6089 12.225C73.0189 12.831 72.2859 13.134 71.4089 13.134C70.5319 13.134 69.7989 12.831 69.2099 12.225C68.6199 11.619 68.3259 10.877 68.3259 9.99999C68.3259 9.12299 68.6199 8.38099 69.2099 7.77499C69.7989 7.16899 70.5319 6.86499 71.4089 6.86499C72.2809 6.86499 73.0129 7.16999 73.6049 7.77899C74.1969 8.38799 74.4929 9.12799 74.4929 9.99999C74.4929 10.877 74.1979 11.619 73.6089 12.225ZM69.7789 11.722C70.2229 12.172 70.7659 12.396 71.4089 12.396C72.0519 12.396 72.5959 12.171 73.0389 11.722C73.4829 11.272 73.7059 10.698 73.7059 9.99999C73.7059 9.30199 73.4829 8.72799 73.0389 8.27799C72.5959 7.82799 72.0519 7.60399 71.4089 7.60399C70.7659 7.60399 70.2229 7.82899 69.7789 8.27799C69.3359 8.72799 69.1129 9.30199 69.1129 9.99999C69.1129 10.698 69.3359 11.272 69.7789 11.722Z"
+                    className="fill-current"
+                />
+                <path
+                    d="M75.5749 13V7H76.513L79.429 11.667H79.4619L79.429 10.511V7H80.1999V13H79.3949L76.344 8.106H76.3109L76.344 9.262V13H75.5749Z"
+                    className="fill-current"
+                />
+                <path
+                    d="M47.418 10.2429C47.418 11.0809 47.1701 11.7479 46.673 12.2459C46.109 12.8379 45.3731 13.1339 44.4691 13.1339C43.6031 13.1339 42.8661 12.8339 42.2611 12.2339C41.6551 11.6329 41.3521 10.8889 41.3521 10.0009C41.3521 9.11194 41.6551 8.36794 42.2611 7.76794C42.8661 7.16694 43.6031 6.86694 44.4691 6.86694C44.8991 6.86694 45.3101 6.95094 45.7001 7.11794C46.0911 7.28594 46.404 7.50894 46.6381 7.78794L46.111 8.31594C45.714 7.84094 45.167 7.60394 44.468 7.60394C43.836 7.60394 43.29 7.82594 42.829 8.26994C42.368 8.71394 42.1381 9.29094 42.1381 9.99994C42.1381 10.7089 42.368 11.2859 42.829 11.7299C43.29 12.1739 43.836 12.3959 44.468 12.3959C45.138 12.3959 45.6971 12.1729 46.1441 11.7259C46.4341 11.4349 46.602 11.0299 46.647 10.5109H44.468V9.78994H47.375C47.405 9.94694 47.418 10.0979 47.418 10.2429Z"
+                    className="stroke-current"
+                    strokeWidth="0.2"
+                    strokeMiterlimit="10"
+                />
+                <path
+                    d="M52.0281 7.737H49.2961V9.639H51.7601V10.36H49.2961V12.262H52.0281V13H48.5251V7H52.0281V7.737Z"
+                    className="stroke-current"
+                    strokeWidth="0.2"
+                    strokeMiterlimit="10"
+                />
+                <path d="M55.279 13H54.508V7.737H52.832V7H56.955V7.737H55.279V13Z" className="stroke-current" strokeWidth="0.2" strokeMiterlimit="10" />
+                <path d="M59.938 13V7H60.709V13H59.938Z" className="stroke-current" strokeWidth="0.2" strokeMiterlimit="10" />
+                <path d="M64.1281 13H63.3572V7.737H61.6812V7H65.8042V7.737H64.1281V13Z" className="stroke-current" strokeWidth="0.2" strokeMiterlimit="10" />
+                <path
+                    d="M73.6089 12.225C73.0189 12.831 72.2859 13.134 71.4089 13.134C70.5319 13.134 69.7989 12.831 69.2099 12.225C68.6199 11.619 68.3259 10.877 68.3259 9.99999C68.3259 9.12299 68.6199 8.38099 69.2099 7.77499C69.7989 7.16899 70.5319 6.86499 71.4089 6.86499C72.2809 6.86499 73.0129 7.16999 73.6049 7.77899C74.1969 8.38799 74.4929 9.12799 74.4929 9.99999C74.4929 10.877 74.1979 11.619 73.6089 12.225ZM69.7789 11.722C70.2229 12.172 70.7659 12.396 71.4089 12.396C72.0519 12.396 72.5959 12.171 73.0389 11.722C73.4829 11.272 73.7059 10.698 73.7059 9.99999C73.7059 9.30199 73.4829 8.72799 73.0389 8.27799C72.5959 7.82799 72.0519 7.60399 71.4089 7.60399C70.7659 7.60399 70.2229 7.82899 69.7789 8.27799C69.3359 8.72799 69.1129 9.30199 69.1129 9.99999C69.1129 10.698 69.3359 11.272 69.7789 11.722Z"
+                    className="stroke-current"
+                    strokeWidth="0.2"
+                    strokeMiterlimit="10"
+                />
+                <path
+                    d="M75.5749 13V7H76.513L79.429 11.667H79.4619L79.429 10.511V7H80.1999V13H79.3949L76.344 8.106H76.3109L76.344 9.262V13H75.5749Z"
+                    className="stroke-current"
+                    strokeWidth="0.2"
+                    strokeMiterlimit="10"
+                />
+                <path
+                    fillRule="evenodd"
+                    clipRule="evenodd"
+                    d="M10.1565 7.96648C10.0384 8.23398 9.97314 8.56174 9.97314 8.943V31.059C9.97314 31.4411 10.0385 31.7689 10.1567 32.0363L22.1907 20.0006L10.1565 7.96648ZM10.8517 32.7555C11.2978 32.9464 11.8797 32.8858 12.5141 32.526L26.6712 24.4812L22.8978 20.7077L10.8517 32.7555ZM27.5737 23.9695L32.0151 21.446C33.4121 20.651 33.4121 19.352 32.0151 18.558L27.5717 16.0331L23.6048 20.0006L27.5737 23.9695ZM26.6699 15.5207L12.5141 7.47701C11.8796 7.11643 11.2977 7.05626 10.8516 7.2474L22.8977 19.2935L26.6699 15.5207Z"
+                    className="fill-current"
+                />
+            </svg>
+        </a>
+    );
+};
+
+export const AppStoreButton = ({ size = "md", ...props }: AnchorHTMLAttributes<HTMLAnchorElement> & { size?: "md" | "lg" }) => {
+    return (
+        <a
+            aria-label="Download on the App Store"
+            href="#"
+            {...props}
+            className={cx(
+                "rounded-[7px] text-fg-primary ring-1 ring-fg-primary outline-focus-ring ring-inset focus-visible:outline-2 focus-visible:outline-offset-2",
+                props.className,
+            )}
+        >
+            <svg width={size === "md" ? 120 : 132} height={size === "md" ? 40 : 44} viewBox="0 0 120 40" fill="none">
+                <path
+                    d="M81.5257 19.2009V21.4919H80.0896V22.9944H81.5257V28.0994C81.5257 29.8425 82.3143 30.5398 84.2981 30.5398C84.6468 30.5398 84.9788 30.4983 85.2693 30.4485V28.9626C85.0203 28.9875 84.8626 29.0041 84.5887 29.0041C83.7005 29.0041 83.3104 28.5891 83.3104 27.6428V22.9944H85.2693V21.4919H83.3104V19.2009H81.5257Z"
+                    className="fill-current"
+                />
+                <path
+                    d="M90.3232 30.6643C92.9628 30.6643 94.5815 28.8962 94.5815 25.9661C94.5815 23.0525 92.9545 21.2761 90.3232 21.2761C87.6835 21.2761 86.0566 23.0525 86.0566 25.9661C86.0566 28.8962 87.6752 30.6643 90.3232 30.6643ZM90.3232 29.0789C88.7709 29.0789 87.8994 27.9416 87.8994 25.9661C87.8994 24.0071 88.7709 22.8616 90.3232 22.8616C91.8671 22.8616 92.747 24.0071 92.747 25.9661C92.747 27.9333 91.8671 29.0789 90.3232 29.0789Z"
+                    className="fill-current"
+                />
+                <path
+                    d="M95.9664 30.49H97.7511V25.1526C97.7511 23.8826 98.7056 23.0276 100.059 23.0276C100.374 23.0276 100.905 23.0857 101.055 23.1355V21.3757C100.864 21.3259 100.524 21.301 100.258 21.301C99.0792 21.301 98.0748 21.9485 97.8175 22.8367H97.6846V21.4504H95.9664V30.49Z"
+                    className="fill-current"
+                />
+                <path
+                    d="M105.486 22.7952C106.806 22.7952 107.669 23.7165 107.711 25.136H103.145C103.245 23.7248 104.166 22.7952 105.486 22.7952ZM107.702 28.0496C107.37 28.7551 106.632 29.1453 105.552 29.1453C104.125 29.1453 103.203 28.1409 103.145 26.5554V26.4558H109.529V25.8332C109.529 22.9944 108.009 21.2761 105.494 21.2761C102.946 21.2761 101.327 23.1106 101.327 25.9993C101.327 28.8879 102.913 30.6643 105.503 30.6643C107.57 30.6643 109.014 29.6682 109.421 28.0496H107.702Z"
+                    className="fill-current"
+                />
+                <path
+                    d="M69.8221 27.1518C69.9598 29.3715 71.8095 30.7911 74.5626 30.7911C77.505 30.7911 79.3462 29.3027 79.3462 26.9281C79.3462 25.0612 78.2966 24.0287 75.7499 23.4351L74.382 23.0996C72.7645 22.721 72.1106 22.2134 72.1106 21.3272C72.1106 20.2088 73.1259 19.4775 74.6487 19.4775C76.0941 19.4775 77.0921 20.1916 77.2727 21.3358H79.1483C79.0365 19.2452 77.1953 17.774 74.6745 17.774C71.9644 17.774 70.1576 19.2452 70.1576 21.4563C70.1576 23.2802 71.1815 24.3643 73.427 24.8891L75.0272 25.2763C76.6705 25.6634 77.3932 26.2312 77.3932 27.1776C77.3932 28.2789 76.2575 29.079 74.7089 29.079C73.0484 29.079 71.8955 28.3305 71.7321 27.1518H69.8221Z"
+                    className="fill-current"
+                />
+                <path
+                    d="M51.3348 21.301C50.1063 21.301 49.0437 21.9153 48.4959 22.9446H48.3631V21.4504H46.6448V33.4949H48.4295V29.1204H48.5706C49.0437 30.0749 50.0647 30.6394 51.3514 30.6394C53.6341 30.6394 55.0867 28.8381 55.0867 25.9661C55.0867 23.094 53.6341 21.301 51.3348 21.301ZM50.8284 29.0373C49.3343 29.0373 48.3963 27.8586 48.3963 25.9744C48.3963 24.0818 49.3343 22.9031 50.8367 22.9031C52.3475 22.9031 53.2522 24.0569 53.2522 25.9661C53.2522 27.8835 52.3475 29.0373 50.8284 29.0373Z"
+                    className="fill-current"
+                />
+                <path
+                    d="M61.3316 21.301C60.103 21.301 59.0405 21.9153 58.4927 22.9446H58.3599V21.4504H56.6416V33.4949H58.4263V29.1204H58.5674C59.0405 30.0749 60.0615 30.6394 61.3482 30.6394C63.6309 30.6394 65.0835 28.8381 65.0835 25.9661C65.0835 23.094 63.6309 21.301 61.3316 21.301ZM60.8252 29.0373C59.3311 29.0373 58.3931 27.8586 58.3931 25.9744C58.3931 24.0818 59.3311 22.9031 60.8335 22.9031C62.3443 22.9031 63.249 24.0569 63.249 25.9661C63.249 27.8835 62.3443 29.0373 60.8252 29.0373Z"
+                    className="fill-current"
+                />
+                <path
+                    d="M43.4428 30.49H45.4905L41.008 18.0751H38.9346L34.4521 30.49H36.431L37.5752 27.1948H42.3072L43.4428 30.49ZM39.8724 20.3292H40.0186L41.8168 25.5774H38.0656L39.8724 20.3292Z"
+                    className="fill-current"
+                />
+                <path
+                    d="M35.6514 8.71094V14.7H37.8137C39.5984 14.7 40.6318 13.6001 40.6318 11.6868C40.6318 9.80249 39.5901 8.71094 37.8137 8.71094H35.6514ZM36.5811 9.55762H37.71C38.9509 9.55762 39.6855 10.3462 39.6855 11.6992C39.6855 13.073 38.9634 13.8533 37.71 13.8533H36.5811V9.55762Z"
+                    className="fill-current"
+                />
+                <path
+                    d="M43.7969 14.7871C45.1167 14.7871 45.9261 13.9031 45.9261 12.438C45.9261 10.9812 45.1126 10.093 43.7969 10.093C42.4771 10.093 41.6636 10.9812 41.6636 12.438C41.6636 13.9031 42.4729 14.7871 43.7969 14.7871ZM43.7969 13.9944C43.0208 13.9944 42.585 13.4258 42.585 12.438C42.585 11.4585 43.0208 10.8857 43.7969 10.8857C44.5689 10.8857 45.0088 11.4585 45.0088 12.438C45.0088 13.4216 44.5689 13.9944 43.7969 13.9944Z"
+                    className="fill-current"
+                />
+                <path
+                    d="M52.8182 10.1802H51.9259L51.1207 13.6292H51.0501L50.1205 10.1802H49.2655L48.3358 13.6292H48.2694L47.4601 10.1802H46.5553L47.8004 14.7H48.7176L49.6473 11.3713H49.7179L50.6517 14.7H51.5772L52.8182 10.1802Z"
+                    className="fill-current"
+                />
+                <path
+                    d="M53.8458 14.7H54.7382V12.0562C54.7382 11.3506 55.1574 10.9106 55.8173 10.9106C56.4772 10.9106 56.7926 11.2717 56.7926 11.998V14.7H57.685V11.7739C57.685 10.699 57.1288 10.093 56.1203 10.093C55.4396 10.093 54.9914 10.396 54.7714 10.8982H54.705V10.1802H53.8458V14.7Z"
+                    className="fill-current"
+                />
+                <path d="M59.0903 14.7H59.9826V8.41626H59.0903V14.7Z" className="fill-current" />
+                <path
+                    d="M63.3386 14.7871C64.6584 14.7871 65.4678 13.9031 65.4678 12.438C65.4678 10.9812 64.6543 10.093 63.3386 10.093C62.0188 10.093 61.2053 10.9812 61.2053 12.438C61.2053 13.9031 62.0146 14.7871 63.3386 14.7871ZM63.3386 13.9944C62.5625 13.9944 62.1267 13.4258 62.1267 12.438C62.1267 11.4585 62.5625 10.8857 63.3386 10.8857C64.1106 10.8857 64.5505 11.4585 64.5505 12.438C64.5505 13.4216 64.1106 13.9944 63.3386 13.9944Z"
+                    className="fill-current"
+                />
+                <path
+                    d="M68.1265 14.0234C67.6409 14.0234 67.2881 13.7869 67.2881 13.3801C67.2881 12.9817 67.5704 12.77 68.1929 12.7285L69.2969 12.658V13.0356C69.2969 13.5959 68.7989 14.0234 68.1265 14.0234ZM67.8982 14.7747C68.4917 14.7747 68.9856 14.5173 69.2554 14.0649H69.326V14.7H70.1851V11.6121C70.1851 10.6575 69.5459 10.093 68.4129 10.093C67.3877 10.093 66.6573 10.5911 66.566 11.3672H67.4292C67.5289 11.0476 67.8733 10.865 68.3714 10.865C68.9815 10.865 69.2969 11.1348 69.2969 11.6121V12.0022L68.0726 12.0728C66.9976 12.1392 66.3916 12.6082 66.3916 13.4216C66.3916 14.2476 67.0267 14.7747 67.8982 14.7747Z"
+                    className="fill-current"
+                />
+                <path
+                    d="M73.2132 14.7747C73.8358 14.7747 74.3629 14.48 74.6327 13.9861H74.7032V14.7H75.5582V8.41626H74.6659V10.8982H74.5995C74.3546 10.4001 73.8316 10.1055 73.2132 10.1055C72.0719 10.1055 71.3373 11.0103 71.3373 12.438C71.3373 13.8699 72.0636 14.7747 73.2132 14.7747ZM73.4664 10.9065C74.2135 10.9065 74.6825 11.5 74.6825 12.4421C74.6825 13.3884 74.2176 13.9736 73.4664 13.9736C72.711 13.9736 72.2586 13.3967 72.2586 12.438C72.2586 11.4875 72.7152 10.9065 73.4664 10.9065Z"
+                    className="fill-current"
+                />
+                <path
+                    d="M81.3447 14.7871C82.6645 14.7871 83.4738 13.9031 83.4738 12.438C83.4738 10.9812 82.6604 10.093 81.3447 10.093C80.0249 10.093 79.2114 10.9812 79.2114 12.438C79.2114 13.9031 80.0207 14.7871 81.3447 14.7871ZM81.3447 13.9944C80.5686 13.9944 80.1328 13.4258 80.1328 12.438C80.1328 11.4585 80.5686 10.8857 81.3447 10.8857C82.1166 10.8857 82.5566 11.4585 82.5566 12.438C82.5566 13.4216 82.1166 13.9944 81.3447 13.9944Z"
+                    className="fill-current"
+                />
+                <path
+                    d="M84.655 14.7H85.5474V12.0562C85.5474 11.3506 85.9666 10.9106 86.6265 10.9106C87.2864 10.9106 87.6018 11.2717 87.6018 11.998V14.7H88.4941V11.7739C88.4941 10.699 87.938 10.093 86.9294 10.093C86.2488 10.093 85.8005 10.396 85.5806 10.8982H85.5142V10.1802H84.655V14.7Z"
+                    className="fill-current"
+                />
+                <path
+                    d="M92.6039 9.05542V10.2009H91.8858V10.9521H92.6039V13.5046C92.6039 14.3762 92.9981 14.7249 93.9901 14.7249C94.1644 14.7249 94.3304 14.7041 94.4757 14.6792V13.9363C94.3512 13.9487 94.2723 13.957 94.1353 13.957C93.6913 13.957 93.4962 13.7495 93.4962 13.2764V10.9521H94.4757V10.2009H93.4962V9.05542H92.6039Z"
+                    className="fill-current"
+                />
+                <path
+                    d="M95.6735 14.7H96.5658V12.0603C96.5658 11.3755 96.9726 10.9148 97.703 10.9148C98.3339 10.9148 98.6701 11.28 98.6701 12.0022V14.7H99.5624V11.7822C99.5624 10.7073 98.9689 10.0972 98.006 10.0972C97.3253 10.0972 96.848 10.4001 96.6281 10.9065H96.5575V8.41626H95.6735V14.7Z"
+                    className="fill-current"
+                />
+                <path
+                    d="M102.781 10.8525C103.441 10.8525 103.873 11.3132 103.894 12.0229H101.611C101.661 11.3174 102.122 10.8525 102.781 10.8525ZM103.89 13.4797C103.724 13.8325 103.354 14.0276 102.815 14.0276C102.101 14.0276 101.64 13.5254 101.611 12.7327V12.6829H104.803V12.3716C104.803 10.9521 104.043 10.093 102.786 10.093C101.511 10.093 100.702 11.0103 100.702 12.4546C100.702 13.8989 101.495 14.7871 102.79 14.7871C103.823 14.7871 104.545 14.2891 104.749 13.4797H103.89Z"
+                    className="fill-current"
+                />
+                <path
+                    d="M24.769 20.3008C24.7907 18.6198 25.6934 17.0292 27.1256 16.1488C26.2221 14.8584 24.7088 14.0403 23.1344 13.9911C21.4552 13.8148 19.8272 14.9959 18.9715 14.9959C18.0992 14.9959 16.7817 14.0086 15.363 14.0378C13.5137 14.0975 11.7898 15.1489 10.8901 16.7656C8.95607 20.1141 10.3987 25.0351 12.2513 27.7417C13.1782 29.0671 14.2615 30.5475 15.6789 30.495C17.066 30.4375 17.584 29.6105 19.2583 29.6105C20.9171 29.6105 21.4031 30.495 22.8493 30.4616C24.3377 30.4375 25.2754 29.1304 26.1698 27.7925C26.8358 26.8481 27.3483 25.8044 27.6882 24.7C25.9391 23.9602 24.771 22.2 24.769 20.3008Z"
+                    className="fill-current"
+                />
+                <path
+                    d="M22.0373 12.2111C22.8489 11.2369 23.2487 9.98469 23.1518 8.72046C21.912 8.85068 20.7668 9.44324 19.9443 10.3801C19.14 11.2954 18.7214 12.5255 18.8006 13.7415C20.0408 13.7542 21.2601 13.1777 22.0373 12.2111Z"
+                    className="fill-current"
+                />
+            </svg>
+        </a>
+    );
+};
+
+export const GalaxyStoreButton = ({ size = "md", ...props }: AnchorHTMLAttributes<HTMLAnchorElement> & { size?: "md" | "lg" }) => {
+    return (
+        <a
+            aria-label="Available on Galaxy Store"
+            href="#"
+            {...props}
+            className={cx(
+                "rounded-[7px] text-fg-primary ring-1 ring-fg-primary outline-focus-ring ring-inset focus-visible:outline-2 focus-visible:outline-offset-2",
+                props.className,
+            )}
+        >
+            <svg width={size === "md" ? 147 : 162} height={size === "md" ? 40 : 44} viewBox="0 0 147 40" fill="none">
+                <path d="M64.7516 20.3987H66.7715V31.3885H64.7516V20.3987Z" className="fill-current" />
+                <path
+                    d="M42.5 25.9699C42.5 22.8811 44.8314 20.4009 48.039 20.4009C50.2816 20.4009 52.0489 21.5444 52.9695 23.1779L51.1875 24.2473C50.5193 23.0146 49.4799 22.3611 48.054 22.3611C46.0343 22.3611 44.5047 23.9946 44.5047 25.9699C44.5047 27.9745 46.0196 29.5786 48.1281 29.5786C49.7469 29.5786 50.8757 28.6578 51.2616 27.2322H47.8017V25.3017H53.4298V26.1037C53.4298 29.0289 51.3657 31.5392 48.1281 31.5392C44.7423 31.5392 42.5 28.9695 42.5 25.9699Z"
+                    className="fill-current"
+                />
+                <path
+                    d="M54.3525 27.0543C54.3525 24.1732 56.4613 22.525 58.6592 22.525C59.8027 22.525 60.8274 22.9999 61.4512 23.7426V22.7032H63.4558V31.3907H61.4512V30.2616C60.8124 31.0636 59.773 31.5689 58.6295 31.5689C56.5354 31.5689 54.3525 29.8904 54.3525 27.0543ZM61.555 27.0246C61.555 25.5543 60.4412 24.3514 58.9562 24.3514C57.4713 24.3514 56.3278 25.5249 56.3278 27.0246C56.3278 28.539 57.4713 29.7272 58.9562 29.7272C60.4412 29.7272 61.555 28.5243 61.555 27.0246Z"
+                    className="fill-current"
+                />
+                <path
+                    d="M67.7938 27.0543C67.7938 24.1732 69.9026 22.525 72.1005 22.525C73.244 22.525 74.2686 22.9999 74.8925 23.7426V22.7032H76.8971V31.3907H74.8925V30.2616C74.2539 31.0636 73.2146 31.5689 72.0707 31.5689C69.977 31.5689 67.7938 29.8904 67.7938 27.0543ZM74.9966 27.0246C74.9966 25.5543 73.8828 24.3514 72.3981 24.3514C70.9128 24.3514 69.7693 25.5249 69.7693 27.0246C69.7693 28.539 70.9128 29.7272 72.3981 29.7272C73.8825 29.7272 74.9966 28.5243 74.9966 27.0246Z"
+                    className="fill-current"
+                />
+                <path
+                    d="M80.8048 26.9652L77.6566 22.7032H80.1072L82.0818 25.4652L84.0424 22.7032H86.4182L83.2994 26.9949L86.6261 31.3907H84.1759L82.0524 28.4949L79.988 31.3907H77.5375L80.8048 26.9652Z"
+                    className="fill-current"
+                />
+                <path
+                    d="M90.3846 30.9598L86.8206 22.7029H88.9588L91.3796 28.554L93.6663 22.7029H95.7757L90.5926 35.4H88.5582L90.3846 30.9598Z"
+                    className="fill-current"
+                />
+                <path
+                    d="M99.8907 29.5936L101.732 28.1384C102.282 29.074 103.128 29.6083 104.108 29.6083C105.178 29.6083 105.757 28.911 105.757 28.1531C105.757 27.2325 104.658 26.9505 103.499 26.594C102.044 26.1334 100.426 25.5693 100.426 23.5049C100.426 21.7676 101.94 20.4012 104.019 20.4012C105.772 20.4012 106.781 21.0697 107.658 21.9756L105.994 23.2376C105.534 22.5547 104.895 22.1982 104.034 22.1982C103.054 22.1982 102.519 22.7329 102.519 23.4305C102.519 24.292 103.559 24.5743 104.732 24.9605C106.203 25.4355 107.866 26.089 107.866 28.1681C107.866 29.8757 106.499 31.5395 104.123 31.5395C102.163 31.5392 100.871 30.7071 99.8907 29.5936Z"
+                    className="fill-current"
+                />
+                <path
+                    d="M108.03 22.7029H109.515V21.3812L111.535 20V22.7029H113.302V24.4999H111.535V27.7519C111.535 29.2669 111.743 29.5045 113.302 29.5045V31.3904H113.02C110.332 31.3904 109.515 30.5292 109.515 27.7672V24.4999H108.03L108.03 22.7029Z"
+                    className="fill-current"
+                />
+                <path
+                    d="M113.838 27.0543C113.838 24.5296 115.827 22.5247 118.337 22.5247C120.832 22.5247 122.837 24.5296 122.837 27.0543C122.837 29.5639 120.832 31.5689 118.337 31.5689C115.827 31.5689 113.838 29.5639 113.838 27.0543ZM120.862 27.0543C120.862 25.599 119.747 24.4108 118.337 24.4108C116.896 24.4108 115.812 25.599 115.812 27.0543C115.812 28.4949 116.896 29.6828 118.337 29.6828C119.747 29.6828 120.862 28.4949 120.862 27.0543Z"
+                    className="fill-current"
+                />
+                <path
+                    d="M125.853 22.7029V23.9949C126.254 23.1335 126.981 22.7029 128.08 22.7029C128.704 22.7029 129.223 22.8514 129.61 23.0741L128.852 24.9749C128.555 24.782 128.214 24.6334 127.649 24.6334C126.491 24.6334 125.867 25.2573 125.867 26.7569V31.3904H123.862V22.7029H125.853Z"
+                    className="fill-current"
+                />
+                <path
+                    d="M129.834 27.069C129.834 24.5296 131.808 22.5247 134.348 22.5247C136.932 22.5247 138.818 24.4255 138.818 26.9949V27.7519H131.749C132.017 28.9701 132.997 29.8016 134.423 29.8016C135.536 29.8016 136.413 29.1928 136.828 28.2719L138.477 29.2222C137.719 30.6186 136.353 31.5686 134.423 31.5686C131.69 31.5686 129.834 29.5786 129.834 27.069ZM131.853 26.074H136.784C136.487 24.9158 135.596 24.292 134.348 24.292C133.145 24.292 132.21 25.0196 131.853 26.074Z"
+                    className="fill-current"
+                />
+                <path
+                    d="M46.6986 13.974H43.9018L43.3866 15.4H42.5034L44.8218 9.0244H45.7878L48.097 15.4H47.2138L46.6986 13.974ZM46.4594 13.2932L45.3002 10.0548L44.141 13.2932H46.4594Z"
+                    className="fill-current"
+                />
+                <path d="M50.4322 14.6272L51.9962 10.3584H52.8886L50.9106 15.4H49.9354L47.9574 10.3584H48.859L50.4322 14.6272Z" className="fill-current" />
+                <path
+                    d="M53.4917 12.8608C53.4917 12.3456 53.5959 11.8948 53.8045 11.5084C54.013 11.1159 54.2982 10.8123 54.6601 10.5976C55.0281 10.3829 55.4359 10.2756 55.8837 10.2756C56.3253 10.2756 56.7086 10.3707 57.0337 10.5608C57.3587 10.7509 57.601 10.9901 57.7605 11.2784V10.3584H58.6069V15.4H57.7605V14.4616C57.5949 14.756 57.3465 15.0013 57.0153 15.1976C56.6902 15.3877 56.3099 15.4828 55.8745 15.4828C55.4267 15.4828 55.0219 15.3724 54.6601 15.1516C54.2982 14.9308 54.013 14.6211 53.8045 14.2224C53.5959 13.8237 53.4917 13.3699 53.4917 12.8608ZM57.7605 12.87C57.7605 12.4897 57.6838 12.1585 57.5305 11.8764C57.3771 11.5943 57.1686 11.3796 56.9049 11.2324C56.6473 11.0791 56.3621 11.0024 56.0493 11.0024C55.7365 11.0024 55.4513 11.076 55.1937 11.2232C54.9361 11.3704 54.7306 11.5851 54.5773 11.8672C54.4239 12.1493 54.3473 12.4805 54.3473 12.8608C54.3473 13.2472 54.4239 13.5845 54.5773 13.8728C54.7306 14.1549 54.9361 14.3727 55.1937 14.526C55.4513 14.6732 55.7365 14.7468 56.0493 14.7468C56.3621 14.7468 56.6473 14.6732 56.9049 14.526C57.1686 14.3727 57.3771 14.1549 57.5305 13.8728C57.6838 13.5845 57.7605 13.2503 57.7605 12.87Z"
+                    className="fill-current"
+                />
+                <path
+                    d="M60.2701 9.5396C60.1106 9.5396 59.9757 9.4844 59.8653 9.374C59.7549 9.2636 59.6997 9.12867 59.6997 8.9692C59.6997 8.80974 59.7549 8.6748 59.8653 8.5644C59.9757 8.454 60.1106 8.3988 60.2701 8.3988C60.4234 8.3988 60.5522 8.454 60.6565 8.5644C60.7669 8.6748 60.8221 8.80974 60.8221 8.9692C60.8221 9.12867 60.7669 9.2636 60.6565 9.374C60.5522 9.4844 60.4234 9.5396 60.2701 9.5396ZM60.6749 10.3584V15.4H59.8377V10.3584H60.6749Z"
+                    className="fill-current"
+                />
+                <path d="M62.7549 8.592V15.4H61.9177V8.592H62.7549Z" className="fill-current" />
+                <path
+                    d="M63.869 12.8608C63.869 12.3456 63.9732 11.8948 64.1818 11.5084C64.3903 11.1159 64.6755 10.8123 65.0374 10.5976C65.4054 10.3829 65.8132 10.2756 66.261 10.2756C66.7026 10.2756 67.0859 10.3707 67.411 10.5608C67.736 10.7509 67.9783 10.9901 68.1378 11.2784V10.3584H68.9842V15.4H68.1378V14.4616C67.9722 14.756 67.7238 15.0013 67.3926 15.1976C67.0675 15.3877 66.6872 15.4828 66.2518 15.4828C65.804 15.4828 65.3992 15.3724 65.0374 15.1516C64.6755 14.9308 64.3903 14.6211 64.1818 14.2224C63.9732 13.8237 63.869 13.3699 63.869 12.8608ZM68.1378 12.87C68.1378 12.4897 68.0611 12.1585 67.9078 11.8764C67.7544 11.5943 67.5459 11.3796 67.2822 11.2324C67.0246 11.0791 66.7394 11.0024 66.4266 11.0024C66.1138 11.0024 65.8286 11.076 65.571 11.2232C65.3134 11.3704 65.1079 11.5851 64.9546 11.8672C64.8012 12.1493 64.7246 12.4805 64.7246 12.8608C64.7246 13.2472 64.8012 13.5845 64.9546 13.8728C65.1079 14.1549 65.3134 14.3727 65.571 14.526C65.8286 14.6732 66.1138 14.7468 66.4266 14.7468C66.7394 14.7468 67.0246 14.6732 67.2822 14.526C67.5459 14.3727 67.7544 14.1549 67.9078 13.8728C68.0611 13.5845 68.1378 13.2503 68.1378 12.87Z"
+                    className="fill-current"
+                />
+                <path
+                    d="M71.3282 11.2968C71.4999 10.9963 71.7514 10.7509 72.0826 10.5608C72.4138 10.3707 72.791 10.2756 73.2142 10.2756C73.668 10.2756 74.0759 10.3829 74.4378 10.5976C74.7996 10.8123 75.0848 11.1159 75.2934 11.5084C75.5019 11.8948 75.6062 12.3456 75.6062 12.8608C75.6062 13.3699 75.5019 13.8237 75.2934 14.2224C75.0848 14.6211 74.7966 14.9308 74.4286 15.1516C74.0667 15.3724 73.6619 15.4828 73.2142 15.4828C72.7787 15.4828 72.3954 15.3877 72.0642 15.1976C71.7391 15.0075 71.4938 14.7652 71.3282 14.4708V15.4H70.491V8.592H71.3282V11.2968ZM74.7506 12.8608C74.7506 12.4805 74.6739 12.1493 74.5206 11.8672C74.3672 11.5851 74.1587 11.3704 73.895 11.2232C73.6374 11.076 73.3522 11.0024 73.0394 11.0024C72.7327 11.0024 72.4475 11.0791 72.1838 11.2324C71.9262 11.3796 71.7176 11.5973 71.5582 11.8856C71.4048 12.1677 71.3282 12.4959 71.3282 12.87C71.3282 13.2503 71.4048 13.5845 71.5582 13.8728C71.7176 14.1549 71.9262 14.3727 72.1838 14.526C72.4475 14.6732 72.7327 14.7468 73.0394 14.7468C73.3522 14.7468 73.6374 14.6732 73.895 14.526C74.1587 14.3727 74.3672 14.1549 74.5206 13.8728C74.6739 13.5845 74.7506 13.2472 74.7506 12.8608Z"
+                    className="fill-current"
+                />
+                <path d="M77.5454 8.592V15.4H76.7082V8.592H77.5454Z" className="fill-current" />
+                <path
+                    d="M83.6642 12.686C83.6642 12.8455 83.655 13.0141 83.6366 13.192H79.607C79.6377 13.6888 79.8064 14.0783 80.113 14.3604C80.4258 14.6364 80.803 14.7744 81.2446 14.7744C81.6065 14.7744 81.907 14.6916 82.1462 14.526C82.3916 14.3543 82.5633 14.1273 82.6614 13.8452H83.563C83.4281 14.3297 83.1582 14.7253 82.7534 15.032C82.3486 15.3325 81.8457 15.4828 81.2446 15.4828C80.7662 15.4828 80.3369 15.3755 79.9566 15.1608C79.5825 14.9461 79.2881 14.6425 79.0734 14.25C78.8587 13.8513 78.7514 13.3913 78.7514 12.87C78.7514 12.3487 78.8557 11.8917 79.0642 11.4992C79.2728 11.1067 79.5641 10.8061 79.9382 10.5976C80.3185 10.3829 80.754 10.2756 81.2446 10.2756C81.723 10.2756 82.1462 10.3799 82.5142 10.5884C82.8822 10.7969 83.1643 11.0852 83.3606 11.4532C83.563 11.8151 83.6642 12.226 83.6642 12.686ZM82.7994 12.5112C82.7994 12.1923 82.7289 11.9193 82.5878 11.6924C82.4467 11.4593 82.2536 11.2845 82.0082 11.168C81.769 11.0453 81.5022 10.984 81.2078 10.984C80.7846 10.984 80.4227 11.1189 80.1222 11.3888C79.8278 11.6587 79.6591 12.0328 79.6162 12.5112H82.7994Z"
+                    className="fill-current"
+                />
+                <path
+                    d="M89.6048 15.4828C89.1326 15.4828 88.7032 15.3755 88.3168 15.1608C87.9366 14.9461 87.636 14.6425 87.4152 14.25C87.2006 13.8513 87.0932 13.3913 87.0932 12.87C87.0932 12.3548 87.2036 11.9009 87.4244 11.5084C87.6514 11.1097 87.958 10.8061 88.3444 10.5976C88.7308 10.3829 89.1632 10.2756 89.6416 10.2756C90.12 10.2756 90.5524 10.3829 90.9388 10.5976C91.3252 10.8061 91.6288 11.1067 91.8496 11.4992C92.0766 11.8917 92.19 12.3487 92.19 12.87C92.19 13.3913 92.0735 13.8513 91.8404 14.25C91.6135 14.6425 91.3038 14.9461 90.9112 15.1608C90.5187 15.3755 90.0832 15.4828 89.6048 15.4828ZM89.6048 14.7468C89.9054 14.7468 90.1875 14.6763 90.4512 14.5352C90.715 14.3941 90.9266 14.1825 91.086 13.9004C91.2516 13.6183 91.3344 13.2748 91.3344 12.87C91.3344 12.4652 91.2547 12.1217 91.0952 11.8396C90.9358 11.5575 90.7272 11.3489 90.4696 11.214C90.212 11.0729 89.933 11.0024 89.6324 11.0024C89.3258 11.0024 89.0436 11.0729 88.786 11.214C88.5346 11.3489 88.3322 11.5575 88.1788 11.8396C88.0255 12.1217 87.9488 12.4652 87.9488 12.87C87.9488 13.2809 88.0224 13.6275 88.1696 13.9096C88.323 14.1917 88.5254 14.4033 88.7768 14.5444C89.0283 14.6793 89.3043 14.7468 89.6048 14.7468Z"
+                    className="fill-current"
+                />
+                <path
+                    d="M95.9312 10.2664C96.5445 10.2664 97.0413 10.4535 97.4216 10.8276C97.8019 11.1956 97.992 11.7292 97.992 12.4284V15.4H97.164V12.548C97.164 12.0451 97.0383 11.6617 96.7868 11.398C96.5353 11.1281 96.1919 10.9932 95.7564 10.9932C95.3148 10.9932 94.9621 11.1312 94.6984 11.4072C94.4408 11.6832 94.312 12.0849 94.312 12.6124V15.4H93.4748V10.3584H94.312V11.076C94.4776 10.8184 94.7015 10.6191 94.9836 10.478C95.2719 10.3369 95.5877 10.2664 95.9312 10.2664Z"
+                    className="fill-current"
+                />
+                <path
+                    fillRule="evenodd"
+                    clipRule="evenodd"
+                    d="M9.2763 14.6655C9 15.8164 9 17.2109 9 20C9 22.7891 9 24.1836 9.2763 25.3345C10.1541 28.9909 13.0091 31.8459 16.6655 32.7237C17.8164 33 19.2109 33 22 33C24.7891 33 26.1836 33 27.3345 32.7237C30.9909 31.8459 33.8459 28.9909 34.7237 25.3345C35 24.1836 35 22.7891 35 20C35 17.2109 35 15.8164 34.7237 14.6655C33.8459 11.0091 30.9909 8.15415 27.3345 7.2763C26.1836 7 24.7891 7 22 7C19.2109 7 17.8164 7 16.6655 7.2763C13.0091 8.15415 10.1541 11.0091 9.2763 14.6655ZM25.738 16.3341L25.7914 16.5695H28.8609L28.0334 24.2828C27.8677 25.8515 26.5446 27.0421 24.9669 27.0421H19.0326C17.4549 27.0421 16.1318 25.8515 15.966 24.2826L15.1387 16.5695H18.2081L18.2617 16.3341C18.2617 14.2733 19.9385 12.5968 21.9997 12.5968C24.0609 12.5968 25.738 14.2733 25.738 16.3341ZM19.8934 16.3341L19.8331 16.5695H24.1664L24.1063 16.3341C24.1063 15.1729 23.1613 14.2281 21.9997 14.2281C20.8383 14.2281 19.8934 15.1729 19.8934 16.3341Z"
+                    className="fill-current"
+                />
+            </svg>
+        </a>
+    );
+};
+
+export const AppGalleryButton = ({ size = "md", ...props }: AnchorHTMLAttributes<HTMLAnchorElement> & { size?: "md" | "lg" }) => {
+    return (
+        <a
+            aria-label="Explore it on AppGallery"
+            href="#"
+            {...props}
+            className={cx(
+                "rounded-[7px] text-fg-primary ring-1 ring-fg-primary outline-focus-ring ring-inset focus-visible:outline-2 focus-visible:outline-offset-2",
+                props.className,
+            )}
+        >
+            <svg width={size === "md" ? 133 : 147} height={size === "md" ? 40 : 44} viewBox="0 0 133 40" fill="none">
+                <path
+                    d="M45.3962 25.4116H48.8919L47.6404 22.0615C47.4682 21.5986 47.2989 21.0875 47.1319 20.5276C46.9813 21.0229 46.817 21.5286 46.6394 22.0453L45.3962 25.4116ZM49.4893 27.0021H44.8068L43.6607 30.1344H41.6021L46.1874 18.4368H48.133L52.8234 30.1344H50.6599L49.4893 27.0021Z"
+                    className="fill-current"
+                />
+                <path
+                    d="M58.8962 28.0072C59.3026 27.461 59.5058 26.663 59.5058 25.6135C59.5058 24.6396 59.3375 23.933 59.0013 23.4942C58.6647 23.0557 58.2167 22.8364 57.657 22.8364C57.2695 22.8364 56.9117 22.9281 56.5834 23.1109C56.2551 23.2939 55.9429 23.5387 55.6469 23.8455V28.5117C55.8461 28.6085 56.0775 28.6853 56.3413 28.7416C56.605 28.7984 56.8661 28.8266 57.1242 28.8266C57.8994 28.8266 58.4898 28.5533 58.8962 28.0072ZM53.653 23.555C53.653 22.9092 53.6314 22.1986 53.5885 21.4237H55.4613C55.5311 21.7844 55.5797 22.1531 55.6066 22.5297C56.3815 21.6849 57.2695 21.2622 58.2706 21.2622C58.8519 21.2622 59.3901 21.4088 59.8853 21.7021C60.3802 21.9955 60.7799 22.4583 61.0839 23.0906C61.3882 23.7231 61.5402 24.5265 61.5402 25.5005C61.5402 26.5177 61.3666 27.387 61.0194 28.108C60.6722 28.8294 60.1866 29.3754 59.5623 29.747C58.9381 30.1181 58.2167 30.3039 57.3989 30.3039C56.8066 30.3039 56.2226 30.2042 55.6469 30.0053V33.6056L53.653 33.7752V23.555Z"
+                    className="fill-current"
+                />
+                <path
+                    d="M67.9935 28.0072C68.3999 27.461 68.6031 26.663 68.6031 25.6135C68.6031 24.6396 68.4349 23.933 68.0986 23.4942C67.7621 23.0557 67.3141 22.8364 66.7543 22.8364C66.3669 22.8364 66.009 22.9281 65.6807 23.1109C65.3522 23.2939 65.0402 23.5387 64.7442 23.8455V28.5117C64.9434 28.6085 65.1746 28.6853 65.4386 28.7416C65.7021 28.7984 65.9631 28.8266 66.2215 28.8266C66.9964 28.8266 67.5871 28.5533 67.9935 28.0072ZM62.7501 23.555C62.7501 22.9092 62.7285 22.1986 62.6855 21.4237H64.5586C64.6285 21.7844 64.677 22.1531 64.7039 22.5297C65.4789 21.6849 66.3668 21.2622 67.3679 21.2622C67.9493 21.2622 68.4871 21.4088 68.9826 21.7021C69.4775 21.9955 69.8772 22.4583 70.1815 23.0906C70.4852 23.7231 70.6375 24.5265 70.6375 25.5005C70.6375 26.5177 70.4637 27.387 70.1167 28.108C69.7695 28.8294 69.2837 29.3754 68.6597 29.747C68.0351 30.1181 67.314 30.3039 66.4959 30.3039C65.9039 30.3039 65.3199 30.2042 64.7442 30.0053V33.6056L62.7501 33.7752V23.555Z"
+                    className="fill-current"
+                />
+                <path
+                    d="M74.3005 29.5813C73.4391 29.1053 72.7773 28.4229 72.3146 27.5349C71.8514 26.6469 71.6202 25.5974 71.6202 24.3864C71.6202 23.0734 71.8866 21.9578 72.4194 21.0401C72.9522 20.1227 73.6775 19.4337 74.5949 18.9735C75.5127 18.5134 76.5418 18.2833 77.6831 18.2833C78.3557 18.2833 78.9975 18.3574 79.6085 18.5053C80.2191 18.6534 80.7882 18.8564 81.3159 19.1149L80.8071 20.6486C79.7468 20.1428 78.7351 19.8898 77.7719 19.8898C76.9591 19.8898 76.2474 20.0634 75.6367 20.4106C75.0258 20.7578 74.5506 21.2677 74.2117 21.9404C73.8725 22.6132 73.7031 23.4258 73.7031 24.3783C73.7031 25.2128 73.8335 25.9526 74.0943 26.5984C74.3557 27.2442 74.7674 27.7557 75.3298 28.1323C75.8922 28.509 76.6013 28.6973 77.457 28.6973C77.8445 28.6973 78.2319 28.6651 78.6194 28.6005C79.0069 28.536 79.3703 28.4418 79.7093 28.3179V25.9526H77.005V24.4026H81.6469V29.3272C80.9794 29.6392 80.2783 29.8789 79.5439 30.0456C78.809 30.2123 78.0786 30.2957 77.3519 30.2957C76.1786 30.2957 75.1613 30.0579 74.3005 29.5813Z"
+                    className="fill-current"
+                />
+                <path
+                    d="M87.5381 28.5197C87.9522 28.3208 88.2914 28.073 88.5551 27.7771V26.1625C88.0114 26.1034 87.5674 26.0737 87.2231 26.0737C86.3997 26.0737 85.8303 26.2068 85.5159 26.4734C85.2007 26.7394 85.0434 27.0989 85.0434 27.5509C85.0434 27.9818 85.1578 28.3005 85.3866 28.5077C85.6154 28.7149 85.9261 28.8184 86.3189 28.8184C86.717 28.8184 87.1234 28.7189 87.5381 28.5197ZM88.7327 30.1344C88.6626 29.7952 88.6167 29.4106 88.5954 28.98C88.2887 29.3461 87.8893 29.6568 87.3965 29.9125C86.9045 30.168 86.3485 30.2957 85.7295 30.2957C85.229 30.2957 84.773 30.1976 84.361 30.001C83.9498 29.8048 83.6226 29.5087 83.3805 29.113C83.1383 28.7176 83.017 28.2347 83.017 27.6639C83.017 26.8192 83.321 26.145 83.9293 25.6416C84.5375 25.1385 85.5519 24.887 86.9727 24.887C87.5055 24.887 88.033 24.9248 88.5551 25V24.8305C88.5551 24.0609 88.3909 23.5187 88.0626 23.2036C87.7343 22.889 87.2634 22.7316 86.6501 22.7316C86.2247 22.7316 85.7701 22.7935 85.2855 22.9172C84.8013 23.0411 84.3759 23.189 84.0101 23.3612L83.6951 21.9081C84.0503 21.7465 84.5186 21.5986 85.0999 21.464C85.6813 21.3297 86.2946 21.2622 86.9405 21.2622C87.6941 21.2622 88.3343 21.3765 88.8618 21.6052C89.3893 21.834 89.801 22.2271 90.097 22.7838C90.393 23.3411 90.541 24.0906 90.541 25.0323V28.4954C90.541 28.8562 90.5623 29.4027 90.6055 30.1344H88.7327Z"
+                    className="fill-current"
+                />
+                <path
+                    d="M92.0709 28.0434V17.7505L94.0567 17.5891V27.6882C94.0567 28.0597 94.1199 28.3218 94.2463 28.4754C94.3727 28.6285 94.5732 28.7056 94.8479 28.7056C94.9716 28.7056 95.1466 28.676 95.3724 28.6168L95.6066 30.0456C95.418 30.121 95.1882 30.1816 94.9167 30.2272C94.6447 30.2728 94.3876 30.2957 94.1455 30.2957C92.762 30.2957 92.0709 29.5451 92.0709 28.0434Z"
+                    className="fill-current"
+                />
+                <path
+                    d="M97.0356 28.0434V17.7505L99.0215 17.5891V27.6882C99.0215 28.0597 99.0847 28.3218 99.2111 28.4754C99.3378 28.6285 99.5383 28.7056 99.8127 28.7056C99.9365 28.7056 100.111 28.676 100.338 28.6168L100.572 30.0456C100.383 30.121 100.153 30.1816 99.8815 30.2272C99.6095 30.2728 99.3524 30.2957 99.1103 30.2957C97.7271 30.2957 97.0356 29.5451 97.0356 28.0434Z"
+                    className="fill-current"
+                />
+                <path
+                    d="M106.795 24.7659C106.755 24.0716 106.581 23.551 106.269 23.2036C105.957 22.8568 105.539 22.683 105.019 22.683C104.512 22.683 104.091 22.8581 103.755 23.2078C103.419 23.5578 103.197 24.0771 103.096 24.7659H106.795ZM108.739 26.0333H103.04C103.131 27.8579 104 28.7701 105.648 28.7701C106.056 28.7701 106.475 28.7203 106.904 28.6208C107.331 28.521 107.741 28.388 108.133 28.221L108.571 29.5853C107.595 30.0592 106.501 30.2957 105.285 30.2957C104.357 30.2957 103.579 30.121 102.944 29.7711C102.307 29.4213 101.829 28.9181 101.509 28.2613C101.19 27.6051 101.03 26.8138 101.03 25.888C101.03 24.9248 101.199 24.0958 101.539 23.4016C101.877 22.7073 102.349 22.1773 102.955 21.8112C103.56 21.4453 104.259 21.2622 105.051 21.2622C105.875 21.2622 106.56 21.4547 107.112 21.8396C107.664 22.2241 108.072 22.737 108.339 23.3773C108.605 24.018 108.739 24.7255 108.739 25.5005V26.0333Z"
+                    className="fill-current"
+                />
+                <path
+                    d="M110.248 23.6115C110.248 23.1326 110.224 22.4034 110.181 21.4237H112.048C112.08 21.6659 112.109 21.9552 112.141 22.2916C112.171 22.6279 112.189 22.901 112.2 23.1109C112.432 22.7288 112.659 22.4073 112.883 22.1463C113.107 21.8851 113.368 21.6727 113.667 21.5083C113.965 21.3443 114.304 21.2622 114.688 21.2622C114.995 21.2622 115.256 21.2946 115.477 21.3592L115.227 23.0868C115.035 23.0276 114.819 22.9979 114.581 22.9979C114.115 22.9979 113.704 23.1177 113.355 23.3573C113.005 23.5965 112.632 23.9908 112.232 24.5398V30.1344H110.248V23.6115Z"
+                    className="fill-current"
+                />
+                <path
+                    d="M116.597 33.6984C116.307 33.6475 116.067 33.5896 115.88 33.5251L116.243 32.072C116.376 32.1094 116.547 32.1458 116.752 32.1808C116.955 32.216 117.149 32.2333 117.333 32.2333C118.216 32.2333 118.877 31.6653 119.317 30.5299L119.448 30.207L116.235 21.4237H118.373L119.989 26.332C120.251 27.1717 120.421 27.8149 120.496 28.2613C120.648 27.6317 120.824 27.0021 121.029 26.3724L122.669 21.4237H124.677L121.475 30.2475C121.173 31.0816 120.845 31.7541 120.496 32.2656C120.147 32.7768 119.733 33.1562 119.259 33.4039C118.781 33.6512 118.208 33.7752 117.533 33.7752C117.2 33.7752 116.888 33.7499 116.597 33.6984Z"
+                    className="fill-current"
+                />
+                <path
+                    d="M41.5933 7.30106H45.1474L45.0474 8.15946H42.6349V9.82186H44.9098V10.6261H42.6349V12.4677H45.1765L45.089 13.3344H41.5933V7.30106Z"
+                    className="fill-current"
+                />
+                <path
+                    d="M47.5973 10.2552L45.7223 7.30106H46.9055L48.1765 9.472L49.514 7.30106H50.6639L48.8055 10.2176L50.8181 13.3344H49.6181L48.1807 10.9595L46.7181 13.3344H45.5682L47.5973 10.2552Z"
+                    className="fill-current"
+                />
+                <path
+                    d="M54.1973 9.99466C54.4194 9.7936 54.5306 9.50933 54.5306 9.14266C54.5306 8.7704 54.4172 8.50266 54.1911 8.33866C53.9647 8.17466 53.6319 8.0928 53.1932 8.0928H52.6266V10.2344C52.8876 10.276 53.0876 10.2968 53.2266 10.2968C53.6514 10.2968 53.9751 10.1963 54.1973 9.99466ZM51.5847 7.30106H53.2098C53.9735 7.30106 54.5583 7.4568 54.9639 7.76773C55.3695 8.07893 55.5722 8.5288 55.5722 9.1176C55.5722 9.5176 55.4813 9.8672 55.2994 10.1656C55.1173 10.4643 54.8639 10.6936 54.5388 10.8531C54.214 11.0131 53.8402 11.0928 53.418 11.0928C53.1876 11.0928 52.9236 11.0651 52.6266 11.0093V13.3344H51.5847V7.30106Z"
+                    className="fill-current"
+                />
+                <path d="M56.6015 7.30106H57.6431V12.4427H60.1389L60.0514 13.3344H56.6015V7.30106Z" className="fill-current" />
+                <path
+                    d="M64.4223 12.2989C64.714 12.1032 64.9319 11.8339 65.0764 11.4907C65.221 11.1477 65.2932 10.7552 65.2932 10.3136C65.2932 9.88026 65.2292 9.49439 65.1015 9.15519C64.9735 8.81625 64.7695 8.54639 64.489 8.34479C64.2084 8.14346 63.8474 8.04266 63.4055 8.04266C62.9834 8.04266 62.625 8.14479 62.3306 8.34906C62.0362 8.55306 61.8154 8.82692 61.6682 9.16986C61.521 9.51306 61.4474 9.89145 61.4474 10.3053C61.4474 10.7413 61.5167 11.1317 61.6556 11.476C61.7943 11.8205 62.0068 12.0928 62.2932 12.2928C62.5791 12.4928 62.9332 12.5928 63.3556 12.5928C63.7751 12.5928 64.1306 12.4947 64.4223 12.2989ZM61.7223 13.0387C61.2807 12.7859 60.9431 12.4309 60.7098 11.9739C60.4764 11.5171 60.3599 10.9859 60.3599 10.3803C60.3599 9.74426 60.4839 9.18799 60.7327 8.71146C60.9813 8.23519 61.3396 7.86719 61.8076 7.60719C62.2756 7.34772 62.8277 7.21759 63.4639 7.21759C64.0722 7.21759 64.5959 7.34346 65.0348 7.59466C65.4735 7.84639 65.8084 8.19972 66.0388 8.65519C66.2695 9.11092 66.3847 9.63865 66.3847 10.2387C66.3847 10.8859 66.2591 11.4485 66.0076 11.9261C65.7562 12.4037 65.3981 12.772 64.9327 13.0301C64.4674 13.2885 63.921 13.4177 63.2932 13.4177C62.6876 13.4177 62.1639 13.2915 61.7223 13.0387Z"
+                    className="fill-current"
+                />
+                <path
+                    d="M69.1807 10.1552C69.4333 10.1552 69.657 10.1061 69.8514 10.0072C70.0458 9.9088 70.1973 9.76986 70.3055 9.59066C70.4141 9.41146 70.4682 9.20373 70.4682 8.96773C70.4682 8.66506 70.3722 8.44346 70.1807 8.3032C69.989 8.16293 69.7098 8.0928 69.3431 8.0928H68.589V10.1552H69.1807ZM67.5474 7.30106H69.4349C70.1237 7.30106 70.6453 7.43866 70.9994 7.7136C71.3535 7.98853 71.5306 8.38186 71.5306 8.8928C71.5306 9.21226 71.4666 9.4936 71.3389 9.73653C71.2111 9.97973 71.0527 10.1776 70.864 10.3301C70.6749 10.4829 70.4807 10.5968 70.2807 10.672L72.1349 13.3344H70.9266L69.3557 10.9427H68.589V13.3344H67.5474V7.30106Z"
+                    className="fill-current"
+                />
+                <path
+                    d="M72.9599 7.30106H76.5141L76.4141 8.15946H74.0015V9.82186H76.2765V10.6261H74.0015V12.4677H76.5431L76.4556 13.3344H72.9599V7.30106Z"
+                    className="fill-current"
+                />
+                <path d="M80.3807 7.30106H81.4223V13.3344H80.3807V7.30106Z" className="fill-current" />
+                <path d="M84.1765 8.172H82.3055L82.3973 7.30106H87.0933L86.9973 8.172H85.218V13.3344H84.1765V8.172Z" className="fill-current" />
+                <path
+                    d="M94.3141 12.2989C94.6055 12.1032 94.8237 11.8339 94.9682 11.4907C95.1125 11.1477 95.1847 10.7552 95.1847 10.3136C95.1847 9.88026 95.1207 9.49439 94.9933 9.15519C94.8653 8.81625 94.661 8.54639 94.3807 8.34479C94.0999 8.14346 93.7389 8.04266 93.2973 8.04266C92.8749 8.04266 92.5167 8.14479 92.2223 8.34906C91.9277 8.55306 91.7069 8.82692 91.5599 9.16986C91.4125 9.51306 91.3389 9.89145 91.3389 10.3053C91.3389 10.7413 91.4082 11.1317 91.5474 11.476C91.6861 11.8205 91.8986 12.0928 92.1847 12.2928C92.4709 12.4928 92.825 12.5928 93.2474 12.5928C93.6666 12.5928 94.0223 12.4947 94.3141 12.2989ZM91.6141 13.0387C91.1722 12.7859 90.8349 12.4309 90.6015 11.9739C90.3682 11.5171 90.2514 10.9859 90.2514 10.3803C90.2514 9.74426 90.3757 9.18799 90.6245 8.71146C90.8727 8.23519 91.2311 7.86719 91.6994 7.60719C92.1674 7.34772 92.7194 7.21759 93.3557 7.21759C93.9639 7.21759 94.4874 7.34346 94.9266 7.59466C95.3653 7.84639 95.6999 8.19972 95.9306 8.65519C96.161 9.11092 96.2765 9.63865 96.2765 10.2387C96.2765 10.8859 96.1506 11.4485 95.8994 11.9261C95.6479 12.4037 95.2895 12.772 94.8245 13.0301C94.3591 13.2885 93.8125 13.4177 93.1847 13.4177C92.5791 13.4177 92.0557 13.2915 91.6141 13.0387Z"
+                    className="fill-current"
+                />
+                <path
+                    d="M97.4389 7.30106H98.6349L101.619 11.976C101.592 11.5317 101.581 11.1219 101.581 10.7469V7.30106H102.547V13.3344H101.389L98.3599 8.58426C98.3903 9.12346 98.4055 9.60106 98.4055 10.0176V13.3344H97.4389V7.30106Z"
+                    className="fill-current"
+                />
+                <path d="M19.7881 22.0255H20.8041L20.2945 20.8404L19.7881 22.0255Z" className="fill-current" />
+                <path
+                    fillRule="evenodd"
+                    clipRule="evenodd"
+                    d="M26.9417 7.33331H15.8633C10.6446 7.33331 8.73584 9.24211 8.73584 14.4608V25.5394C8.73584 30.7579 10.6446 32.6666 15.8633 32.6666H26.9382C32.1569 32.6666 34.0692 30.7579 34.0692 25.5394V14.4608C34.0692 9.24211 32.1604 7.33331 26.9417 7.33331ZM19.538 22.6229L19.2366 23.3125H18.5505L20.0097 20.0022H20.6025L22.0558 23.3125H21.3513L21.0537 22.6229H19.538ZM30.5787 23.3102H31.242V20.0022H30.5787V23.3102ZM27.9396 21.8887H29.1617V21.2859H27.9396V20.6078H29.7137V20.0042H27.2766V23.3122H29.7777V22.7088H27.9396V21.8887ZM25.3046 22.2797L24.5526 20.0021H24.0043L23.2524 22.2797L22.5206 20.0036H21.8054L22.9598 23.314H23.5161L24.2692 21.1396L25.022 23.314H25.5833L26.7348 20.0036H26.038L25.3046 22.2797ZM17.5382 21.8979C17.5382 22.4364 17.2708 22.7241 16.7852 22.7241C16.2969 22.7241 16.0281 22.4283 16.0281 21.875V20.004H15.3561V21.8979C15.3561 22.8297 15.8737 23.3638 16.7761 23.3638C17.6873 23.3638 18.2099 22.8194 18.2099 21.8705V20.0021H17.5382V21.8979ZM13.7526 20.0022H14.4243V23.3142H13.7526V21.9693H12.235V23.3142H11.563V20.0022H12.235V21.3383H13.7526V20.0022ZM17.1857 11.5683C17.1857 13.8933 19.0774 15.7851 21.4025 15.7851C23.7276 15.7851 25.6193 13.8933 25.6193 11.5683H25.0236C25.0236 13.5649 23.3993 15.1894 21.4025 15.1894C19.4057 15.1894 17.7814 13.5649 17.7814 11.5683H17.1857Z"
+                    className="fill-current"
+                />
+            </svg>
+        </a>
+    );
+};
diff --git a/src/components/base/buttons/app-store-buttons.tsx b/src/components/base/buttons/app-store-buttons.tsx
new file mode 100644
index 0000000..b4b6be4
--- /dev/null
+++ b/src/components/base/buttons/app-store-buttons.tsx
@@ -0,0 +1,565 @@
+import type { AnchorHTMLAttributes } from "react";
+import { cx } from "@/utils/cx";
+
+export const GooglePlayButton = ({ size = "md", ...props }: AnchorHTMLAttributes<HTMLAnchorElement> & { size?: "md" | "lg" }) => {
+    return (
+        <a
+            aria-label="Get it on Google Play"
+            href="#"
+            {...props}
+            className={cx(
+                "rounded-[7px] bg-black ring-1 ring-app-store-badge-border outline-focus-ring ring-inset focus-visible:outline-2 focus-visible:outline-offset-2",
+                props.className,
+            )}
+        >
+            <svg width={size === "md" ? 135 : 149} height={size === "md" ? 40 : 44} viewBox="0 0 135 40" fill="none">
+                <path
+                    d="M68.136 21.7511C65.784 21.7511 63.867 23.5401 63.867 26.0041C63.867 28.4531 65.784 30.2571 68.136 30.2571C70.489 30.2571 72.406 28.4531 72.406 26.0041C72.405 23.5401 70.488 21.7511 68.136 21.7511ZM68.136 28.5831C66.847 28.5831 65.736 27.5201 65.736 26.0051C65.736 24.4741 66.848 23.4271 68.136 23.4271C69.425 23.4271 70.536 24.4741 70.536 26.0051C70.536 27.5191 69.425 28.5831 68.136 28.5831ZM58.822 21.7511C56.47 21.7511 54.553 23.5401 54.553 26.0041C54.553 28.4531 56.47 30.2571 58.822 30.2571C61.175 30.2571 63.092 28.4531 63.092 26.0041C63.092 23.5401 61.175 21.7511 58.822 21.7511ZM58.822 28.5831C57.533 28.5831 56.422 27.5201 56.422 26.0051C56.422 24.4741 57.534 23.4271 58.822 23.4271C60.111 23.4271 61.222 24.4741 61.222 26.0051C61.223 27.5191 60.111 28.5831 58.822 28.5831ZM47.744 23.0571V24.8611H52.062C51.933 25.8761 51.595 26.6171 51.079 27.1321C50.451 27.7601 49.468 28.4531 47.744 28.4531C45.086 28.4531 43.008 26.3101 43.008 23.6521C43.008 20.9941 45.086 18.8511 47.744 18.8511C49.178 18.8511 50.225 19.4151 50.998 20.1401L52.271 18.8671C51.191 17.8361 49.758 17.0471 47.744 17.0471C44.103 17.0471 41.042 20.0111 41.042 23.6521C41.042 27.2931 44.103 30.2571 47.744 30.2571C49.709 30.2571 51.192 29.6121 52.351 28.4041C53.543 27.2121 53.914 25.5361 53.914 24.1831C53.914 23.7651 53.882 23.3781 53.817 23.0561H47.744V23.0571ZM93.052 24.4581C92.698 23.5081 91.618 21.7511 89.411 21.7511C87.22 21.7511 85.399 23.4751 85.399 26.0041C85.399 28.3881 87.204 30.2571 89.62 30.2571C91.569 30.2571 92.697 29.0651 93.165 28.3721L91.715 27.4051C91.232 28.1141 90.571 28.5811 89.62 28.5811C88.67 28.5811 87.993 28.1461 87.558 27.2921L93.245 24.9401L93.052 24.4581ZM87.252 25.8761C87.204 24.2321 88.525 23.3951 89.476 23.3951C90.217 23.3951 90.845 23.7661 91.055 24.2971L87.252 25.8761ZM82.629 30.0001H84.497V17.4991H82.629V30.0001ZM79.567 22.7021H79.503C79.084 22.2021 78.278 21.7511 77.264 21.7511C75.137 21.7511 73.188 23.6201 73.188 26.0211C73.188 28.4051 75.137 30.2581 77.264 30.2581C78.279 30.2581 79.084 29.8071 79.503 29.2921H79.567V29.9041C79.567 31.5311 78.697 32.4011 77.296 32.4011C76.152 32.4011 75.443 31.5801 75.153 30.8871L73.526 31.5641C73.993 32.6911 75.233 34.0771 77.296 34.0771C79.487 34.0771 81.34 32.7881 81.34 29.6461V22.0101H79.568V22.7021H79.567ZM77.425 28.5831C76.136 28.5831 75.057 27.5031 75.057 26.0211C75.057 24.5221 76.136 23.4271 77.425 23.4271C78.697 23.4271 79.696 24.5221 79.696 26.0211C79.696 27.5031 78.697 28.5831 77.425 28.5831ZM101.806 17.4991H97.335V30.0001H99.2V25.2641H101.805C103.873 25.2641 105.907 23.7671 105.907 21.3821C105.907 18.9971 103.874 17.4991 101.806 17.4991ZM101.854 23.5241H99.2V19.2391H101.854C103.249 19.2391 104.041 20.3941 104.041 21.3821C104.041 22.3501 103.249 23.5241 101.854 23.5241ZM113.386 21.7291C112.035 21.7291 110.636 22.3241 110.057 23.6431L111.713 24.3341C112.067 23.6431 112.727 23.4171 113.418 23.4171C114.383 23.4171 115.364 23.9961 115.38 25.0251V25.1541C115.042 24.9611 114.318 24.6721 113.434 24.6721C111.649 24.6721 109.831 25.6531 109.831 27.4861C109.831 29.1591 111.295 30.2361 112.935 30.2361C114.189 30.2361 114.881 29.6731 115.315 29.0131H115.379V29.9781H117.181V25.1851C117.182 22.9671 115.524 21.7291 113.386 21.7291ZM113.16 28.5801C112.55 28.5801 111.697 28.2741 111.697 27.5181C111.697 26.5531 112.759 26.1831 113.676 26.1831C114.495 26.1831 114.882 26.3601 115.38 26.6011C115.235 27.7601 114.238 28.5801 113.16 28.5801ZM123.743 22.0021L121.604 27.4221H121.54L119.32 22.0021H117.31L120.639 29.5771L118.741 33.7911H120.687L125.818 22.0021H123.743ZM106.937 30.0001H108.802V17.4991H106.937V30.0001Z"
+                    fill="white"
+                />
+                <path
+                    d="M47.418 10.2429C47.418 11.0809 47.1701 11.7479 46.673 12.2459C46.109 12.8379 45.3731 13.1339 44.4691 13.1339C43.6031 13.1339 42.8661 12.8339 42.2611 12.2339C41.6551 11.6329 41.3521 10.8889 41.3521 10.0009C41.3521 9.11194 41.6551 8.36794 42.2611 7.76794C42.8661 7.16694 43.6031 6.86694 44.4691 6.86694C44.8991 6.86694 45.3101 6.95094 45.7001 7.11794C46.0911 7.28594 46.404 7.50894 46.6381 7.78794L46.111 8.31594C45.714 7.84094 45.167 7.60394 44.468 7.60394C43.836 7.60394 43.29 7.82594 42.829 8.26994C42.368 8.71394 42.1381 9.29094 42.1381 9.99994C42.1381 10.7089 42.368 11.2859 42.829 11.7299C43.29 12.1739 43.836 12.3959 44.468 12.3959C45.138 12.3959 45.6971 12.1729 46.1441 11.7259C46.4341 11.4349 46.602 11.0299 46.647 10.5109H44.468V9.78994H47.375C47.405 9.94694 47.418 10.0979 47.418 10.2429Z"
+                    fill="white"
+                />
+                <path d="M52.0281 7.737H49.2961V9.639H51.7601V10.36H49.2961V12.262H52.0281V13H48.5251V7H52.0281V7.737Z" fill="white" />
+                <path d="M55.279 13H54.508V7.737H52.832V7H56.955V7.737H55.279V13Z" fill="white" />
+                <path d="M59.938 13V7H60.709V13H59.938Z" fill="white" />
+                <path d="M64.1281 13H63.3572V7.737H61.6812V7H65.8042V7.737H64.1281V13Z" fill="white" />
+                <path
+                    d="M73.6089 12.225C73.0189 12.831 72.2859 13.134 71.4089 13.134C70.5319 13.134 69.7989 12.831 69.2099 12.225C68.6199 11.619 68.3259 10.877 68.3259 9.99999C68.3259 9.12299 68.6199 8.38099 69.2099 7.77499C69.7989 7.16899 70.5319 6.86499 71.4089 6.86499C72.2809 6.86499 73.0129 7.16999 73.6049 7.77899C74.1969 8.38799 74.4929 9.12799 74.4929 9.99999C74.4929 10.877 74.1979 11.619 73.6089 12.225ZM69.7789 11.722C70.2229 12.172 70.7659 12.396 71.4089 12.396C72.0519 12.396 72.5959 12.171 73.0389 11.722C73.4829 11.272 73.7059 10.698 73.7059 9.99999C73.7059 9.30199 73.4829 8.72799 73.0389 8.27799C72.5959 7.82799 72.0519 7.60399 71.4089 7.60399C70.7659 7.60399 70.2229 7.82899 69.7789 8.27799C69.3359 8.72799 69.1129 9.30199 69.1129 9.99999C69.1129 10.698 69.3359 11.272 69.7789 11.722Z"
+                    fill="white"
+                />
+                <path
+                    d="M75.5749 13V7H76.513L79.429 11.667H79.4619L79.429 10.511V7H80.1999V13H79.3949L76.344 8.106H76.3109L76.344 9.262V13H75.5749Z"
+                    fill="white"
+                />
+                <path
+                    d="M47.418 10.2429C47.418 11.0809 47.1701 11.7479 46.673 12.2459C46.109 12.8379 45.3731 13.1339 44.4691 13.1339C43.6031 13.1339 42.8661 12.8339 42.2611 12.2339C41.6551 11.6329 41.3521 10.8889 41.3521 10.0009C41.3521 9.11194 41.6551 8.36794 42.2611 7.76794C42.8661 7.16694 43.6031 6.86694 44.4691 6.86694C44.8991 6.86694 45.3101 6.95094 45.7001 7.11794C46.0911 7.28594 46.404 7.50894 46.6381 7.78794L46.111 8.31594C45.714 7.84094 45.167 7.60394 44.468 7.60394C43.836 7.60394 43.29 7.82594 42.829 8.26994C42.368 8.71394 42.1381 9.29094 42.1381 9.99994C42.1381 10.7089 42.368 11.2859 42.829 11.7299C43.29 12.1739 43.836 12.3959 44.468 12.3959C45.138 12.3959 45.6971 12.1729 46.1441 11.7259C46.4341 11.4349 46.602 11.0299 46.647 10.5109H44.468V9.78994H47.375C47.405 9.94694 47.418 10.0979 47.418 10.2429Z"
+                    stroke="white"
+                    strokeWidth="0.2"
+                    strokeMiterlimit="10"
+                />
+                <path
+                    d="M52.0281 7.737H49.2961V9.639H51.7601V10.36H49.2961V12.262H52.0281V13H48.5251V7H52.0281V7.737Z"
+                    stroke="white"
+                    strokeWidth="0.2"
+                    strokeMiterlimit="10"
+                />
+                <path d="M55.279 13H54.508V7.737H52.832V7H56.955V7.737H55.279V13Z" stroke="white" strokeWidth="0.2" strokeMiterlimit="10" />
+                <path d="M59.938 13V7H60.709V13H59.938Z" stroke="white" strokeWidth="0.2" strokeMiterlimit="10" />
+                <path d="M64.1281 13H63.3572V7.737H61.6812V7H65.8042V7.737H64.1281V13Z" stroke="white" strokeWidth="0.2" strokeMiterlimit="10" />
+                <path
+                    d="M73.6089 12.225C73.0189 12.831 72.2859 13.134 71.4089 13.134C70.5319 13.134 69.7989 12.831 69.2099 12.225C68.6199 11.619 68.3259 10.877 68.3259 9.99999C68.3259 9.12299 68.6199 8.38099 69.2099 7.77499C69.7989 7.16899 70.5319 6.86499 71.4089 6.86499C72.2809 6.86499 73.0129 7.16999 73.6049 7.77899C74.1969 8.38799 74.4929 9.12799 74.4929 9.99999C74.4929 10.877 74.1979 11.619 73.6089 12.225ZM69.7789 11.722C70.2229 12.172 70.7659 12.396 71.4089 12.396C72.0519 12.396 72.5959 12.171 73.0389 11.722C73.4829 11.272 73.7059 10.698 73.7059 9.99999C73.7059 9.30199 73.4829 8.72799 73.0389 8.27799C72.5959 7.82799 72.0519 7.60399 71.4089 7.60399C70.7659 7.60399 70.2229 7.82899 69.7789 8.27799C69.3359 8.72799 69.1129 9.30199 69.1129 9.99999C69.1129 10.698 69.3359 11.272 69.7789 11.722Z"
+                    stroke="white"
+                    strokeWidth="0.2"
+                    strokeMiterlimit="10"
+                />
+                <path
+                    d="M75.5749 13V7H76.513L79.429 11.667H79.4619L79.429 10.511V7H80.1999V13H79.3949L76.344 8.106H76.3109L76.344 9.262V13H75.5749Z"
+                    stroke="white"
+                    strokeWidth="0.2"
+                    strokeMiterlimit="10"
+                />
+                <g filter="url(#filter0_ii_1303_2188)">
+                    <path
+                        d="M10.4361 7.53803C10.1451 7.84603 9.97314 8.32403 9.97314 8.94303V31.059C9.97314 31.679 10.1451 32.156 10.4361 32.464L10.5101 32.536L22.8991 20.147V20.001V19.855L10.5101 7.46503L10.4361 7.53803Z"
+                        fill="url(#paint0_linear_1303_2188)"
+                    />
+                    <path
+                        d="M27.0279 24.278L22.8989 20.147V20.001V19.855L27.0289 15.725L27.1219 15.778L32.0149 18.558C33.4119 19.352 33.4119 20.651 32.0149 21.446L27.1219 24.226L27.0279 24.278Z"
+                        fill="url(#paint1_linear_1303_2188)"
+                    />
+                    <g filter="url(#filter1_i_1303_2188)">
+                        <path
+                            d="M27.122 24.225L22.898 20.001L10.436 32.464C10.896 32.952 11.657 33.012 12.514 32.526L27.122 24.225Z"
+                            fill="url(#paint2_linear_1303_2188)"
+                        />
+                    </g>
+                    <path
+                        d="M27.122 15.777L12.514 7.47701C11.657 6.99001 10.896 7.05101 10.436 7.53901L22.899 20.002L27.122 15.777Z"
+                        fill="url(#paint3_linear_1303_2188)"
+                    />
+                </g>
+                <defs>
+                    <filter
+                        id="filter0_ii_1303_2188"
+                        x="9.97314"
+                        y="7.14093"
+                        width="23.0894"
+                        height="25.7207"
+                        filterUnits="userSpaceOnUse"
+                        colorInterpolationFilters="sRGB"
+                    >
+                        <feFlood floodOpacity="0" result="BackgroundImageFix" />
+                        <feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape" />
+                        <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha" />
+                        <feOffset dy="-0.15" />
+                        <feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1" />
+                        <feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.12 0" />
+                        <feBlend mode="normal" in2="shape" result="effect1_innerShadow_1303_2188" />
+                        <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha" />
+                        <feOffset dy="0.15" />
+                        <feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1" />
+                        <feColorMatrix type="matrix" values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.25 0" />
+                        <feBlend mode="normal" in2="effect1_innerShadow_1303_2188" result="effect2_innerShadow_1303_2188" />
+                    </filter>
+                    <filter
+                        id="filter1_i_1303_2188"
+                        x="10.436"
+                        y="20.001"
+                        width="16.686"
+                        height="12.8607"
+                        filterUnits="userSpaceOnUse"
+                        colorInterpolationFilters="sRGB"
+                    >
+                        <feFlood floodOpacity="0" result="BackgroundImageFix" />
+                        <feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape" />
+                        <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha" />
+                        <feOffset dy="-0.15" />
+                        <feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1" />
+                        <feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.08 0" />
+                        <feBlend mode="normal" in2="shape" result="effect1_innerShadow_1303_2188" />
+                    </filter>
+                    <linearGradient id="paint0_linear_1303_2188" x1="21.8009" y1="8.70903" x2="5.01895" y2="25.491" gradientUnits="userSpaceOnUse">
+                        <stop stopColor="#00A0FF" />
+                        <stop offset="0.0066" stopColor="#00A1FF" />
+                        <stop offset="0.2601" stopColor="#00BEFF" />
+                        <stop offset="0.5122" stopColor="#00D2FF" />
+                        <stop offset="0.7604" stopColor="#00DFFF" />
+                        <stop offset="1" stopColor="#00E3FF" />
+                    </linearGradient>
+                    <linearGradient id="paint1_linear_1303_2188" x1="33.8334" y1="20.001" x2="9.63753" y2="20.001" gradientUnits="userSpaceOnUse">
+                        <stop stopColor="#FFE000" />
+                        <stop offset="0.4087" stopColor="#FFBD00" />
+                        <stop offset="0.7754" stopColor="#FFA500" />
+                        <stop offset="1" stopColor="#FF9C00" />
+                    </linearGradient>
+                    <linearGradient id="paint2_linear_1303_2188" x1="24.8281" y1="22.2949" x2="2.06964" y2="45.0534" gradientUnits="userSpaceOnUse">
+                        <stop stopColor="#FF3A44" />
+                        <stop offset="1" stopColor="#C31162" />
+                    </linearGradient>
+                    <linearGradient id="paint3_linear_1303_2188" x1="7.29743" y1="0.176806" x2="17.4597" y2="10.3391" gradientUnits="userSpaceOnUse">
+                        <stop stopColor="#32A071" />
+                        <stop offset="0.0685" stopColor="#2DA771" />
+                        <stop offset="0.4762" stopColor="#15CF74" />
+                        <stop offset="0.8009" stopColor="#06E775" />
+                        <stop offset="1" stopColor="#00F076" />
+                    </linearGradient>
+                </defs>
+            </svg>
+        </a>
+    );
+};
+
+export const GooglePlayWhiteButton = ({ size = "md", ...props }: AnchorHTMLAttributes<HTMLAnchorElement> & { size?: "md" | "lg" }) => {
+    return (
+        <a
+            aria-label="Get it on Google Play"
+            href="#"
+            {...props}
+            className={cx(
+                "rounded-[7px] bg-black ring-1 ring-app-store-badge-border outline-focus-ring ring-inset focus-visible:outline-2 focus-visible:outline-offset-2",
+                props.className,
+            )}
+        >
+            <svg width={size === "md" ? 135 : 149} height={size === "md" ? 40 : 44} viewBox="0 0 135 40" fill="none">
+                <rect x="0.5" y="0.5" width="134" height="39" rx="6.5" stroke="white" />
+                <path
+                    d="M68.136 21.7509C65.784 21.7509 63.867 23.5399 63.867 26.0039C63.867 28.4529 65.784 30.2569 68.136 30.2569C70.489 30.2569 72.406 28.4529 72.406 26.0039C72.405 23.5399 70.488 21.7509 68.136 21.7509ZM68.136 28.5829C66.847 28.5829 65.736 27.5199 65.736 26.0049C65.736 24.4739 66.848 23.4269 68.136 23.4269C69.425 23.4269 70.536 24.4739 70.536 26.0049C70.536 27.5189 69.425 28.5829 68.136 28.5829ZM58.822 21.7509C56.47 21.7509 54.553 23.5399 54.553 26.0039C54.553 28.4529 56.47 30.2569 58.822 30.2569C61.175 30.2569 63.092 28.4529 63.092 26.0039C63.092 23.5399 61.175 21.7509 58.822 21.7509ZM58.822 28.5829C57.533 28.5829 56.422 27.5199 56.422 26.0049C56.422 24.4739 57.534 23.4269 58.822 23.4269C60.111 23.4269 61.222 24.4739 61.222 26.0049C61.223 27.5189 60.111 28.5829 58.822 28.5829ZM47.744 23.0569V24.8609H52.062C51.933 25.8759 51.595 26.6169 51.079 27.1319C50.451 27.7599 49.468 28.4529 47.744 28.4529C45.086 28.4529 43.008 26.3099 43.008 23.6519C43.008 20.9939 45.086 18.8509 47.744 18.8509C49.178 18.8509 50.225 19.4149 50.998 20.1399L52.271 18.8669C51.191 17.8359 49.758 17.0469 47.744 17.0469C44.103 17.0469 41.042 20.0109 41.042 23.6519C41.042 27.2929 44.103 30.2569 47.744 30.2569C49.709 30.2569 51.192 29.6119 52.351 28.4039C53.543 27.2119 53.914 25.5359 53.914 24.1829C53.914 23.7649 53.882 23.3779 53.817 23.0559H47.744V23.0569ZM93.052 24.4579C92.698 23.5079 91.618 21.7509 89.411 21.7509C87.22 21.7509 85.399 23.4749 85.399 26.0039C85.399 28.3879 87.204 30.2569 89.62 30.2569C91.569 30.2569 92.697 29.0649 93.165 28.3719L91.715 27.4049C91.232 28.1139 90.571 28.5809 89.62 28.5809C88.67 28.5809 87.993 28.1459 87.558 27.2919L93.245 24.9399L93.052 24.4579ZM87.252 25.8759C87.204 24.2319 88.525 23.3949 89.476 23.3949C90.217 23.3949 90.845 23.7659 91.055 24.2969L87.252 25.8759ZM82.629 29.9999H84.497V17.4989H82.629V29.9999ZM79.567 22.7019H79.503C79.084 22.2019 78.278 21.7509 77.264 21.7509C75.137 21.7509 73.188 23.6199 73.188 26.0209C73.188 28.4049 75.137 30.2579 77.264 30.2579C78.279 30.2579 79.084 29.8069 79.503 29.2919H79.567V29.9039C79.567 31.5309 78.697 32.4009 77.296 32.4009C76.152 32.4009 75.443 31.5799 75.153 30.8869L73.526 31.5639C73.993 32.6909 75.233 34.0769 77.296 34.0769C79.487 34.0769 81.34 32.7879 81.34 29.6459V22.0099H79.568V22.7019H79.567ZM77.425 28.5829C76.136 28.5829 75.057 27.5029 75.057 26.0209C75.057 24.5219 76.136 23.4269 77.425 23.4269C78.697 23.4269 79.696 24.5219 79.696 26.0209C79.696 27.5029 78.697 28.5829 77.425 28.5829ZM101.806 17.4989H97.335V29.9999H99.2V25.2639H101.805C103.873 25.2639 105.907 23.7669 105.907 21.3819C105.907 18.9969 103.874 17.4989 101.806 17.4989ZM101.854 23.5239H99.2V19.2389H101.854C103.249 19.2389 104.041 20.3939 104.041 21.3819C104.041 22.3499 103.249 23.5239 101.854 23.5239ZM113.386 21.7289C112.035 21.7289 110.636 22.3239 110.057 23.6429L111.713 24.3339C112.067 23.6429 112.727 23.4169 113.418 23.4169C114.383 23.4169 115.364 23.9959 115.38 25.0249V25.1539C115.042 24.9609 114.318 24.6719 113.434 24.6719C111.649 24.6719 109.831 25.6529 109.831 27.4859C109.831 29.1589 111.295 30.2359 112.935 30.2359C114.189 30.2359 114.881 29.6729 115.315 29.0129H115.379V29.9779H117.181V25.1849C117.182 22.9669 115.524 21.7289 113.386 21.7289ZM113.16 28.5799C112.55 28.5799 111.697 28.2739 111.697 27.5179C111.697 26.5529 112.759 26.1829 113.676 26.1829C114.495 26.1829 114.882 26.3599 115.38 26.6009C115.235 27.7599 114.238 28.5799 113.16 28.5799ZM123.743 22.0019L121.604 27.4219H121.54L119.32 22.0019H117.31L120.639 29.5769L118.741 33.7909H120.687L125.818 22.0019H123.743ZM106.937 29.9999H108.802V17.4989H106.937V29.9999Z"
+                    fill="white"
+                />
+                <path
+                    d="M47.418 10.2432C47.418 11.0812 47.1701 11.7482 46.673 12.2462C46.109 12.8382 45.3731 13.1342 44.4691 13.1342C43.6031 13.1342 42.8661 12.8342 42.2611 12.2342C41.6551 11.6332 41.3521 10.8892 41.3521 10.0012C41.3521 9.11219 41.6551 8.36819 42.2611 7.76819C42.8661 7.16719 43.6031 6.86719 44.4691 6.86719C44.8991 6.86719 45.3101 6.95119 45.7001 7.11819C46.0911 7.28619 46.404 7.50919 46.6381 7.78819L46.111 8.31619C45.714 7.84119 45.167 7.60419 44.468 7.60419C43.836 7.60419 43.29 7.82619 42.829 8.27019C42.368 8.71419 42.1381 9.29119 42.1381 10.0002C42.1381 10.7092 42.368 11.2862 42.829 11.7302C43.29 12.1742 43.836 12.3962 44.468 12.3962C45.138 12.3962 45.6971 12.1732 46.1441 11.7262C46.4341 11.4352 46.602 11.0302 46.647 10.5112H44.468V9.79019H47.375C47.405 9.94719 47.418 10.0982 47.418 10.2432Z"
+                    fill="white"
+                />
+                <path d="M52.0281 7.73724H49.2961V9.63924H51.7601V10.3602H49.2961V12.2622H52.0281V13.0002H48.5251V7.00024H52.0281V7.73724Z" fill="white" />
+                <path d="M55.279 13.0002H54.508V7.73724H52.832V7.00024H56.955V7.73724H55.279V13.0002Z" fill="white" />
+                <path d="M59.938 13.0002V7.00024H60.709V13.0002H59.938Z" fill="white" />
+                <path d="M64.1281 13.0002H63.3572V7.73724H61.6812V7.00024H65.8042V7.73724H64.1281V13.0002Z" fill="white" />
+                <path
+                    d="M73.6089 12.2252C73.0189 12.8312 72.2859 13.1342 71.4089 13.1342C70.5319 13.1342 69.7989 12.8312 69.2099 12.2252C68.6199 11.6192 68.3259 10.8772 68.3259 10.0002C68.3259 9.12323 68.6199 8.38123 69.2099 7.77523C69.7989 7.16923 70.5319 6.86523 71.4089 6.86523C72.2809 6.86523 73.0129 7.17023 73.6049 7.77923C74.1969 8.38823 74.4929 9.12823 74.4929 10.0002C74.4929 10.8772 74.1979 11.6192 73.6089 12.2252ZM69.7789 11.7222C70.2229 12.1722 70.7659 12.3962 71.4089 12.3962C72.0519 12.3962 72.5959 12.1712 73.0389 11.7222C73.4829 11.2722 73.7059 10.6982 73.7059 10.0002C73.7059 9.30223 73.4829 8.72823 73.0389 8.27823C72.5959 7.82823 72.0519 7.60423 71.4089 7.60423C70.7659 7.60423 70.2229 7.82923 69.7789 8.27823C69.3359 8.72823 69.1129 9.30223 69.1129 10.0002C69.1129 10.6982 69.3359 11.2722 69.7789 11.7222Z"
+                    fill="white"
+                />
+                <path
+                    d="M75.5749 13.0002V7.00024H76.513L79.429 11.6672H79.4619L79.429 10.5112V7.00024H80.1999V13.0002H79.3949L76.344 8.10625H76.3109L76.344 9.26224V13.0002H75.5749Z"
+                    fill="white"
+                />
+                <path
+                    d="M47.418 10.2432C47.418 11.0812 47.1701 11.7482 46.673 12.2462C46.109 12.8382 45.3731 13.1342 44.4691 13.1342C43.6031 13.1342 42.8661 12.8342 42.2611 12.2342C41.6551 11.6332 41.3521 10.8892 41.3521 10.0012C41.3521 9.11219 41.6551 8.36819 42.2611 7.76819C42.8661 7.16719 43.6031 6.86719 44.4691 6.86719C44.8991 6.86719 45.3101 6.95119 45.7001 7.11819C46.0911 7.28619 46.404 7.50919 46.6381 7.78819L46.111 8.31619C45.714 7.84119 45.167 7.60419 44.468 7.60419C43.836 7.60419 43.29 7.82619 42.829 8.27019C42.368 8.71419 42.1381 9.29119 42.1381 10.0002C42.1381 10.7092 42.368 11.2862 42.829 11.7302C43.29 12.1742 43.836 12.3962 44.468 12.3962C45.138 12.3962 45.6971 12.1732 46.1441 11.7262C46.4341 11.4352 46.602 11.0302 46.647 10.5112H44.468V9.79019H47.375C47.405 9.94719 47.418 10.0982 47.418 10.2432Z"
+                    stroke="white"
+                    strokeWidth="0.2"
+                    strokeMiterlimit="10"
+                />
+                <path
+                    d="M52.0281 7.73724H49.2961V9.63924H51.7601V10.3602H49.2961V12.2622H52.0281V13.0002H48.5251V7.00024H52.0281V7.73724Z"
+                    stroke="white"
+                    strokeWidth="0.2"
+                    strokeMiterlimit="10"
+                />
+                <path d="M55.279 13.0002H54.508V7.73724H52.832V7.00024H56.955V7.73724H55.279V13.0002Z" stroke="white" strokeWidth="0.2" strokeMiterlimit="10" />
+                <path d="M59.938 13.0002V7.00024H60.709V13.0002H59.938Z" stroke="white" strokeWidth="0.2" strokeMiterlimit="10" />
+                <path
+                    d="M64.1281 13.0002H63.3572V7.73724H61.6812V7.00024H65.8042V7.73724H64.1281V13.0002Z"
+                    stroke="white"
+                    strokeWidth="0.2"
+                    strokeMiterlimit="10"
+                />
+                <path
+                    d="M73.6089 12.2252C73.0189 12.8312 72.2859 13.1342 71.4089 13.1342C70.5319 13.1342 69.7989 12.8312 69.2099 12.2252C68.6199 11.6192 68.3259 10.8772 68.3259 10.0002C68.3259 9.12323 68.6199 8.38123 69.2099 7.77523C69.7989 7.16923 70.5319 6.86523 71.4089 6.86523C72.2809 6.86523 73.0129 7.17023 73.6049 7.77923C74.1969 8.38823 74.4929 9.12823 74.4929 10.0002C74.4929 10.8772 74.1979 11.6192 73.6089 12.2252ZM69.7789 11.7222C70.2229 12.1722 70.7659 12.3962 71.4089 12.3962C72.0519 12.3962 72.5959 12.1712 73.0389 11.7222C73.4829 11.2722 73.7059 10.6982 73.7059 10.0002C73.7059 9.30223 73.4829 8.72823 73.0389 8.27823C72.5959 7.82823 72.0519 7.60423 71.4089 7.60423C70.7659 7.60423 70.2229 7.82923 69.7789 8.27823C69.3359 8.72823 69.1129 9.30223 69.1129 10.0002C69.1129 10.6982 69.3359 11.2722 69.7789 11.7222Z"
+                    stroke="white"
+                    strokeWidth="0.2"
+                    strokeMiterlimit="10"
+                />
+                <path
+                    d="M75.5749 13.0002V7.00024H76.513L79.429 11.6672H79.4619L79.429 10.5112V7.00024H80.1999V13.0002H79.3949L76.344 8.10625H76.3109L76.344 9.26224V13.0002H75.5749Z"
+                    stroke="white"
+                    strokeWidth="0.2"
+                    strokeMiterlimit="10"
+                />
+                <path
+                    fillRule="evenodd"
+                    clipRule="evenodd"
+                    d="M10.1565 7.96617C10.0384 8.23367 9.97314 8.56144 9.97314 8.94269V31.0587C9.97314 31.4408 10.0385 31.7686 10.1567 32.036L22.1907 20.0003L10.1565 7.96617ZM10.8517 32.7552C11.2978 32.9461 11.8797 32.8855 12.5141 32.5257L26.6712 24.4809L22.8978 20.7074L10.8517 32.7552ZM27.5737 23.9691L32.0151 21.4457C33.4121 20.6507 33.4121 19.3517 32.0151 18.5577L27.5717 16.0328L23.6048 20.0003L27.5737 23.9691ZM26.6699 15.5204L12.5141 7.4767C11.8796 7.11612 11.2977 7.05596 10.8516 7.2471L22.8977 19.2932L26.6699 15.5204Z"
+                    fill="white"
+                />
+            </svg>
+        </a>
+    );
+};
+
+export const AppStoreButton = ({ size = "md", ...props }: AnchorHTMLAttributes<HTMLAnchorElement> & { size?: "md" | "lg" }) => {
+    return (
+        <a
+            aria-label="Download on the App Store"
+            href="#"
+            {...props}
+            className={cx(
+                "rounded-[7px] bg-black ring-1 ring-app-store-badge-border outline-focus-ring ring-inset focus-visible:outline-2 focus-visible:outline-offset-2",
+                props.className,
+            )}
+        >
+            <svg width={size === "md" ? 120 : 132} height={size === "md" ? 40 : 44} viewBox="0 0 120 40" fill="none">
+                <path
+                    d="M81.5257 19.2009V21.4919H80.0896V22.9944H81.5257V28.0994C81.5257 29.8425 82.3143 30.5398 84.2981 30.5398C84.6468 30.5398 84.9788 30.4983 85.2693 30.4485V28.9626C85.0203 28.9875 84.8626 29.0041 84.5887 29.0041C83.7005 29.0041 83.3104 28.5891 83.3104 27.6428V22.9944H85.2693V21.4919H83.3104V19.2009H81.5257Z"
+                    fill="white"
+                />
+                <path
+                    d="M90.3232 30.6643C92.9628 30.6643 94.5815 28.8962 94.5815 25.9661C94.5815 23.0525 92.9545 21.2761 90.3232 21.2761C87.6835 21.2761 86.0566 23.0525 86.0566 25.9661C86.0566 28.8962 87.6752 30.6643 90.3232 30.6643ZM90.3232 29.0789C88.7709 29.0789 87.8994 27.9416 87.8994 25.9661C87.8994 24.0071 88.7709 22.8616 90.3232 22.8616C91.8671 22.8616 92.747 24.0071 92.747 25.9661C92.747 27.9333 91.8671 29.0789 90.3232 29.0789Z"
+                    fill="white"
+                />
+                <path
+                    d="M95.9664 30.49H97.7511V25.1526C97.7511 23.8826 98.7056 23.0276 100.059 23.0276C100.374 23.0276 100.905 23.0857 101.055 23.1355V21.3757C100.864 21.3259 100.524 21.301 100.258 21.301C99.0792 21.301 98.0748 21.9485 97.8175 22.8367H97.6846V21.4504H95.9664V30.49Z"
+                    fill="white"
+                />
+                <path
+                    d="M105.486 22.7952C106.806 22.7952 107.669 23.7165 107.711 25.136H103.145C103.245 23.7248 104.166 22.7952 105.486 22.7952ZM107.702 28.0496C107.37 28.7551 106.632 29.1453 105.552 29.1453C104.125 29.1453 103.203 28.1409 103.145 26.5554V26.4558H109.529V25.8332C109.529 22.9944 108.009 21.2761 105.494 21.2761C102.946 21.2761 101.327 23.1106 101.327 25.9993C101.327 28.8879 102.913 30.6643 105.503 30.6643C107.57 30.6643 109.014 29.6682 109.421 28.0496H107.702Z"
+                    fill="white"
+                />
+                <path
+                    d="M69.8221 27.1518C69.9598 29.3715 71.8095 30.7911 74.5626 30.7911C77.505 30.7911 79.3462 29.3027 79.3462 26.9281C79.3462 25.0612 78.2966 24.0287 75.7499 23.4351L74.382 23.0996C72.7645 22.721 72.1106 22.2134 72.1106 21.3272C72.1106 20.2088 73.1259 19.4775 74.6487 19.4775C76.0941 19.4775 77.0921 20.1916 77.2727 21.3358H79.1483C79.0365 19.2452 77.1953 17.774 74.6745 17.774C71.9644 17.774 70.1576 19.2452 70.1576 21.4563C70.1576 23.2802 71.1815 24.3643 73.427 24.8891L75.0272 25.2763C76.6705 25.6634 77.3932 26.2312 77.3932 27.1776C77.3932 28.2789 76.2575 29.079 74.7089 29.079C73.0484 29.079 71.8955 28.3305 71.7321 27.1518H69.8221Z"
+                    fill="white"
+                />
+                <path
+                    d="M51.3348 21.301C50.1063 21.301 49.0437 21.9153 48.4959 22.9446H48.3631V21.4504H46.6448V33.4949H48.4295V29.1204H48.5706C49.0437 30.0749 50.0647 30.6394 51.3514 30.6394C53.6341 30.6394 55.0867 28.8381 55.0867 25.9661C55.0867 23.094 53.6341 21.301 51.3348 21.301ZM50.8284 29.0373C49.3343 29.0373 48.3963 27.8586 48.3963 25.9744C48.3963 24.0818 49.3343 22.9031 50.8367 22.9031C52.3475 22.9031 53.2522 24.0569 53.2522 25.9661C53.2522 27.8835 52.3475 29.0373 50.8284 29.0373Z"
+                    fill="white"
+                />
+                <path
+                    d="M61.3316 21.301C60.103 21.301 59.0405 21.9153 58.4927 22.9446H58.3599V21.4504H56.6416V33.4949H58.4263V29.1204H58.5674C59.0405 30.0749 60.0615 30.6394 61.3482 30.6394C63.6309 30.6394 65.0835 28.8381 65.0835 25.9661C65.0835 23.094 63.6309 21.301 61.3316 21.301ZM60.8252 29.0373C59.3311 29.0373 58.3931 27.8586 58.3931 25.9744C58.3931 24.0818 59.3311 22.9031 60.8335 22.9031C62.3443 22.9031 63.249 24.0569 63.249 25.9661C63.249 27.8835 62.3443 29.0373 60.8252 29.0373Z"
+                    fill="white"
+                />
+                <path
+                    d="M43.4428 30.49H45.4905L41.008 18.0751H38.9346L34.4521 30.49H36.431L37.5752 27.1948H42.3072L43.4428 30.49ZM39.8724 20.3292H40.0186L41.8168 25.5774H38.0656L39.8724 20.3292Z"
+                    fill="white"
+                />
+                <path
+                    d="M35.6514 8.71094V14.7H37.8137C39.5984 14.7 40.6318 13.6001 40.6318 11.6868C40.6318 9.80249 39.5901 8.71094 37.8137 8.71094H35.6514ZM36.5811 9.55762H37.71C38.9509 9.55762 39.6855 10.3462 39.6855 11.6992C39.6855 13.073 38.9634 13.8533 37.71 13.8533H36.5811V9.55762Z"
+                    fill="white"
+                />
+                <path
+                    d="M43.7969 14.7871C45.1167 14.7871 45.9261 13.9031 45.9261 12.438C45.9261 10.9812 45.1126 10.093 43.7969 10.093C42.4771 10.093 41.6636 10.9812 41.6636 12.438C41.6636 13.9031 42.4729 14.7871 43.7969 14.7871ZM43.7969 13.9944C43.0208 13.9944 42.585 13.4258 42.585 12.438C42.585 11.4585 43.0208 10.8857 43.7969 10.8857C44.5689 10.8857 45.0088 11.4585 45.0088 12.438C45.0088 13.4216 44.5689 13.9944 43.7969 13.9944Z"
+                    fill="white"
+                />
+                <path
+                    d="M52.8182 10.1802H51.9259L51.1207 13.6292H51.0501L50.1205 10.1802H49.2655L48.3358 13.6292H48.2694L47.4601 10.1802H46.5553L47.8004 14.7H48.7176L49.6473 11.3713H49.7179L50.6517 14.7H51.5772L52.8182 10.1802Z"
+                    fill="white"
+                />
+                <path
+                    d="M53.8458 14.7H54.7382V12.0562C54.7382 11.3506 55.1574 10.9106 55.8173 10.9106C56.4772 10.9106 56.7926 11.2717 56.7926 11.998V14.7H57.685V11.7739C57.685 10.699 57.1288 10.093 56.1203 10.093C55.4396 10.093 54.9914 10.396 54.7714 10.8982H54.705V10.1802H53.8458V14.7Z"
+                    fill="white"
+                />
+                <path d="M59.0903 14.7H59.9826V8.41626H59.0903V14.7Z" fill="white" />
+                <path
+                    d="M63.3386 14.7871C64.6584 14.7871 65.4678 13.9031 65.4678 12.438C65.4678 10.9812 64.6543 10.093 63.3386 10.093C62.0188 10.093 61.2053 10.9812 61.2053 12.438C61.2053 13.9031 62.0146 14.7871 63.3386 14.7871ZM63.3386 13.9944C62.5625 13.9944 62.1267 13.4258 62.1267 12.438C62.1267 11.4585 62.5625 10.8857 63.3386 10.8857C64.1106 10.8857 64.5505 11.4585 64.5505 12.438C64.5505 13.4216 64.1106 13.9944 63.3386 13.9944Z"
+                    fill="white"
+                />
+                <path
+                    d="M68.1265 14.0234C67.6409 14.0234 67.2881 13.7869 67.2881 13.3801C67.2881 12.9817 67.5704 12.77 68.1929 12.7285L69.2969 12.658V13.0356C69.2969 13.5959 68.7989 14.0234 68.1265 14.0234ZM67.8982 14.7747C68.4917 14.7747 68.9856 14.5173 69.2554 14.0649H69.326V14.7H70.1851V11.6121C70.1851 10.6575 69.5459 10.093 68.4129 10.093C67.3877 10.093 66.6573 10.5911 66.566 11.3672H67.4292C67.5289 11.0476 67.8733 10.865 68.3714 10.865C68.9815 10.865 69.2969 11.1348 69.2969 11.6121V12.0022L68.0726 12.0728C66.9976 12.1392 66.3916 12.6082 66.3916 13.4216C66.3916 14.2476 67.0267 14.7747 67.8982 14.7747Z"
+                    fill="white"
+                />
+                <path
+                    d="M73.2132 14.7747C73.8358 14.7747 74.3629 14.48 74.6327 13.9861H74.7032V14.7H75.5582V8.41626H74.6659V10.8982H74.5995C74.3546 10.4001 73.8316 10.1055 73.2132 10.1055C72.0719 10.1055 71.3373 11.0103 71.3373 12.438C71.3373 13.8699 72.0636 14.7747 73.2132 14.7747ZM73.4664 10.9065C74.2135 10.9065 74.6825 11.5 74.6825 12.4421C74.6825 13.3884 74.2176 13.9736 73.4664 13.9736C72.711 13.9736 72.2586 13.3967 72.2586 12.438C72.2586 11.4875 72.7152 10.9065 73.4664 10.9065Z"
+                    fill="white"
+                />
+                <path
+                    d="M81.3447 14.7871C82.6645 14.7871 83.4738 13.9031 83.4738 12.438C83.4738 10.9812 82.6604 10.093 81.3447 10.093C80.0249 10.093 79.2114 10.9812 79.2114 12.438C79.2114 13.9031 80.0207 14.7871 81.3447 14.7871ZM81.3447 13.9944C80.5686 13.9944 80.1328 13.4258 80.1328 12.438C80.1328 11.4585 80.5686 10.8857 81.3447 10.8857C82.1166 10.8857 82.5566 11.4585 82.5566 12.438C82.5566 13.4216 82.1166 13.9944 81.3447 13.9944Z"
+                    fill="white"
+                />
+                <path
+                    d="M84.655 14.7H85.5474V12.0562C85.5474 11.3506 85.9666 10.9106 86.6265 10.9106C87.2864 10.9106 87.6018 11.2717 87.6018 11.998V14.7H88.4941V11.7739C88.4941 10.699 87.938 10.093 86.9294 10.093C86.2488 10.093 85.8005 10.396 85.5806 10.8982H85.5142V10.1802H84.655V14.7Z"
+                    fill="white"
+                />
+                <path
+                    d="M92.6039 9.05542V10.2009H91.8858V10.9521H92.6039V13.5046C92.6039 14.3762 92.9981 14.7249 93.9901 14.7249C94.1644 14.7249 94.3304 14.7041 94.4757 14.6792V13.9363C94.3512 13.9487 94.2723 13.957 94.1353 13.957C93.6913 13.957 93.4962 13.7495 93.4962 13.2764V10.9521H94.4757V10.2009H93.4962V9.05542H92.6039Z"
+                    fill="white"
+                />
+                <path
+                    d="M95.6735 14.7H96.5658V12.0603C96.5658 11.3755 96.9726 10.9148 97.703 10.9148C98.3339 10.9148 98.6701 11.28 98.6701 12.0022V14.7H99.5624V11.7822C99.5624 10.7073 98.9689 10.0972 98.006 10.0972C97.3253 10.0972 96.848 10.4001 96.6281 10.9065H96.5575V8.41626H95.6735V14.7Z"
+                    fill="white"
+                />
+                <path
+                    d="M102.781 10.8525C103.441 10.8525 103.873 11.3132 103.894 12.0229H101.611C101.661 11.3174 102.122 10.8525 102.781 10.8525ZM103.89 13.4797C103.724 13.8325 103.354 14.0276 102.815 14.0276C102.101 14.0276 101.64 13.5254 101.611 12.7327V12.6829H104.803V12.3716C104.803 10.9521 104.043 10.093 102.786 10.093C101.511 10.093 100.702 11.0103 100.702 12.4546C100.702 13.8989 101.495 14.7871 102.79 14.7871C103.823 14.7871 104.545 14.2891 104.749 13.4797H103.89Z"
+                    fill="white"
+                />
+                <path
+                    d="M24.769 20.3008C24.7907 18.6198 25.6934 17.0292 27.1256 16.1488C26.2221 14.8584 24.7088 14.0403 23.1344 13.9911C21.4552 13.8148 19.8272 14.9959 18.9715 14.9959C18.0992 14.9959 16.7817 14.0086 15.363 14.0378C13.5137 14.0975 11.7898 15.1489 10.8901 16.7656C8.95607 20.1141 10.3987 25.0351 12.2513 27.7417C13.1782 29.0671 14.2615 30.5475 15.6789 30.495C17.066 30.4375 17.584 29.6105 19.2583 29.6105C20.9171 29.6105 21.4031 30.495 22.8493 30.4616C24.3377 30.4375 25.2754 29.1304 26.1698 27.7925C26.8358 26.8481 27.3483 25.8044 27.6882 24.7C25.9391 23.9602 24.771 22.2 24.769 20.3008Z"
+                    fill="white"
+                />
+                <path
+                    d="M22.0373 12.2111C22.8489 11.2369 23.2487 9.98469 23.1518 8.72046C21.912 8.85068 20.7668 9.44324 19.9443 10.3801C19.14 11.2954 18.7214 12.5255 18.8006 13.7415C20.0408 13.7542 21.2601 13.1777 22.0373 12.2111Z"
+                    fill="white"
+                />
+            </svg>
+        </a>
+    );
+};
+
+export const GalaxyStoreButton = ({ size = "md", ...props }: AnchorHTMLAttributes<HTMLAnchorElement> & { size?: "md" | "lg" }) => {
+    return (
+        <a
+            aria-label="Available on Galaxy Store"
+            href="#"
+            {...props}
+            className={cx(
+                "rounded-[7px] bg-black ring-1 ring-app-store-badge-border outline-focus-ring ring-inset focus-visible:outline-2 focus-visible:outline-offset-2",
+                props.className,
+            )}
+        >
+            <svg width={size === "md" ? 147 : 162} height={size === "md" ? 40 : 44} viewBox="0 0 147 40" fill="none">
+                <path d="M64.7516 20.3987H66.7715V31.3885H64.7516V20.3987Z" fill="white" />
+                <path
+                    d="M42.5 25.9699C42.5 22.8811 44.8314 20.4009 48.039 20.4009C50.2816 20.4009 52.0489 21.5444 52.9695 23.1779L51.1875 24.2473C50.5193 23.0146 49.4799 22.3611 48.054 22.3611C46.0343 22.3611 44.5047 23.9946 44.5047 25.9699C44.5047 27.9745 46.0196 29.5786 48.1281 29.5786C49.7469 29.5786 50.8757 28.6578 51.2616 27.2322H47.8017V25.3017H53.4298V26.1037C53.4298 29.0289 51.3657 31.5392 48.1281 31.5392C44.7423 31.5392 42.5 28.9695 42.5 25.9699Z"
+                    fill="white"
+                />
+                <path
+                    d="M54.3525 27.0543C54.3525 24.1732 56.4613 22.525 58.6592 22.525C59.8027 22.525 60.8274 22.9999 61.4512 23.7426V22.7032H63.4558V31.3907H61.4512V30.2616C60.8124 31.0636 59.773 31.5689 58.6295 31.5689C56.5354 31.5689 54.3525 29.8904 54.3525 27.0543ZM61.555 27.0246C61.555 25.5543 60.4412 24.3514 58.9562 24.3514C57.4713 24.3514 56.3278 25.5249 56.3278 27.0246C56.3278 28.539 57.4713 29.7272 58.9562 29.7272C60.4412 29.7272 61.555 28.5243 61.555 27.0246Z"
+                    fill="white"
+                />
+                <path
+                    d="M67.7938 27.0543C67.7938 24.1732 69.9026 22.525 72.1005 22.525C73.244 22.525 74.2686 22.9999 74.8925 23.7426V22.7032H76.8971V31.3907H74.8925V30.2616C74.2539 31.0636 73.2146 31.5689 72.0707 31.5689C69.977 31.5689 67.7938 29.8904 67.7938 27.0543ZM74.9966 27.0246C74.9966 25.5543 73.8828 24.3514 72.3981 24.3514C70.9128 24.3514 69.7693 25.5249 69.7693 27.0246C69.7693 28.539 70.9128 29.7272 72.3981 29.7272C73.8825 29.7272 74.9966 28.5243 74.9966 27.0246Z"
+                    fill="white"
+                />
+                <path
+                    d="M80.8048 26.9652L77.6566 22.7032H80.1072L82.0818 25.4652L84.0424 22.7032H86.4182L83.2994 26.9949L86.6261 31.3907H84.1759L82.0524 28.4949L79.988 31.3907H77.5375L80.8048 26.9652Z"
+                    fill="white"
+                />
+                <path d="M90.3846 30.9598L86.8206 22.7029H88.9588L91.3796 28.554L93.6663 22.7029H95.7757L90.5926 35.4H88.5582L90.3846 30.9598Z" fill="white" />
+                <path
+                    d="M99.8907 29.5936L101.732 28.1384C102.282 29.074 103.128 29.6083 104.108 29.6083C105.178 29.6083 105.757 28.911 105.757 28.1531C105.757 27.2325 104.658 26.9505 103.499 26.594C102.044 26.1334 100.426 25.5693 100.426 23.5049C100.426 21.7676 101.94 20.4012 104.019 20.4012C105.772 20.4012 106.781 21.0697 107.658 21.9756L105.994 23.2376C105.534 22.5547 104.895 22.1982 104.034 22.1982C103.054 22.1982 102.519 22.7329 102.519 23.4305C102.519 24.292 103.559 24.5743 104.732 24.9605C106.203 25.4355 107.866 26.089 107.866 28.1681C107.866 29.8757 106.499 31.5395 104.123 31.5395C102.163 31.5392 100.871 30.7071 99.8907 29.5936Z"
+                    fill="white"
+                />
+                <path
+                    d="M108.03 22.7029H109.515V21.3812L111.535 20V22.7029H113.302V24.4999H111.535V27.7519C111.535 29.2669 111.743 29.5045 113.302 29.5045V31.3904H113.02C110.332 31.3904 109.515 30.5292 109.515 27.7672V24.4999H108.03L108.03 22.7029Z"
+                    fill="white"
+                />
+                <path
+                    d="M113.838 27.0543C113.838 24.5296 115.827 22.5247 118.337 22.5247C120.832 22.5247 122.837 24.5296 122.837 27.0543C122.837 29.5639 120.832 31.5689 118.337 31.5689C115.827 31.5689 113.838 29.5639 113.838 27.0543ZM120.862 27.0543C120.862 25.599 119.747 24.4108 118.337 24.4108C116.896 24.4108 115.812 25.599 115.812 27.0543C115.812 28.4949 116.896 29.6828 118.337 29.6828C119.747 29.6828 120.862 28.4949 120.862 27.0543Z"
+                    fill="white"
+                />
+                <path
+                    d="M125.853 22.7029V23.9949C126.254 23.1335 126.981 22.7029 128.08 22.7029C128.704 22.7029 129.223 22.8514 129.61 23.0741L128.852 24.9749C128.555 24.782 128.214 24.6334 127.649 24.6334C126.491 24.6334 125.867 25.2573 125.867 26.7569V31.3904H123.862V22.7029H125.853Z"
+                    fill="white"
+                />
+                <path
+                    d="M129.834 27.069C129.834 24.5296 131.808 22.5247 134.348 22.5247C136.932 22.5247 138.818 24.4255 138.818 26.9949V27.7519H131.749C132.017 28.9701 132.997 29.8016 134.423 29.8016C135.536 29.8016 136.413 29.1928 136.828 28.2719L138.477 29.2222C137.719 30.6186 136.353 31.5686 134.423 31.5686C131.69 31.5686 129.834 29.5786 129.834 27.069ZM131.853 26.074H136.784C136.487 24.9158 135.596 24.292 134.348 24.292C133.145 24.292 132.21 25.0196 131.853 26.074Z"
+                    fill="white"
+                />
+                <path
+                    d="M46.6986 13.974H43.9018L43.3866 15.4H42.5034L44.8218 9.0244H45.7878L48.097 15.4H47.2138L46.6986 13.974ZM46.4594 13.2932L45.3002 10.0548L44.141 13.2932H46.4594Z"
+                    fill="white"
+                />
+                <path d="M50.4322 14.6272L51.9962 10.3584H52.8886L50.9106 15.4H49.9354L47.9574 10.3584H48.859L50.4322 14.6272Z" fill="white" />
+                <path
+                    d="M53.4917 12.8608C53.4917 12.3456 53.5959 11.8948 53.8045 11.5084C54.013 11.1159 54.2982 10.8123 54.6601 10.5976C55.0281 10.3829 55.4359 10.2756 55.8837 10.2756C56.3253 10.2756 56.7086 10.3707 57.0337 10.5608C57.3587 10.7509 57.601 10.9901 57.7605 11.2784V10.3584H58.6069V15.4H57.7605V14.4616C57.5949 14.756 57.3465 15.0013 57.0153 15.1976C56.6902 15.3877 56.3099 15.4828 55.8745 15.4828C55.4267 15.4828 55.0219 15.3724 54.6601 15.1516C54.2982 14.9308 54.013 14.6211 53.8045 14.2224C53.5959 13.8237 53.4917 13.3699 53.4917 12.8608ZM57.7605 12.87C57.7605 12.4897 57.6838 12.1585 57.5305 11.8764C57.3771 11.5943 57.1686 11.3796 56.9049 11.2324C56.6473 11.0791 56.3621 11.0024 56.0493 11.0024C55.7365 11.0024 55.4513 11.076 55.1937 11.2232C54.9361 11.3704 54.7306 11.5851 54.5773 11.8672C54.4239 12.1493 54.3473 12.4805 54.3473 12.8608C54.3473 13.2472 54.4239 13.5845 54.5773 13.8728C54.7306 14.1549 54.9361 14.3727 55.1937 14.526C55.4513 14.6732 55.7365 14.7468 56.0493 14.7468C56.3621 14.7468 56.6473 14.6732 56.9049 14.526C57.1686 14.3727 57.3771 14.1549 57.5305 13.8728C57.6838 13.5845 57.7605 13.2503 57.7605 12.87Z"
+                    fill="white"
+                />
+                <path
+                    d="M60.2701 9.5396C60.1106 9.5396 59.9757 9.4844 59.8653 9.374C59.7549 9.2636 59.6997 9.12867 59.6997 8.9692C59.6997 8.80974 59.7549 8.6748 59.8653 8.5644C59.9757 8.454 60.1106 8.3988 60.2701 8.3988C60.4234 8.3988 60.5522 8.454 60.6565 8.5644C60.7669 8.6748 60.8221 8.80974 60.8221 8.9692C60.8221 9.12867 60.7669 9.2636 60.6565 9.374C60.5522 9.4844 60.4234 9.5396 60.2701 9.5396ZM60.6749 10.3584V15.4H59.8377V10.3584H60.6749Z"
+                    fill="white"
+                />
+                <path d="M62.7549 8.592V15.4H61.9177V8.592H62.7549Z" fill="white" />
+                <path
+                    d="M63.869 12.8608C63.869 12.3456 63.9732 11.8948 64.1818 11.5084C64.3903 11.1159 64.6755 10.8123 65.0374 10.5976C65.4054 10.3829 65.8132 10.2756 66.261 10.2756C66.7026 10.2756 67.0859 10.3707 67.411 10.5608C67.736 10.7509 67.9783 10.9901 68.1378 11.2784V10.3584H68.9842V15.4H68.1378V14.4616C67.9722 14.756 67.7238 15.0013 67.3926 15.1976C67.0675 15.3877 66.6872 15.4828 66.2518 15.4828C65.804 15.4828 65.3992 15.3724 65.0374 15.1516C64.6755 14.9308 64.3903 14.6211 64.1818 14.2224C63.9732 13.8237 63.869 13.3699 63.869 12.8608ZM68.1378 12.87C68.1378 12.4897 68.0611 12.1585 67.9078 11.8764C67.7544 11.5943 67.5459 11.3796 67.2822 11.2324C67.0246 11.0791 66.7394 11.0024 66.4266 11.0024C66.1138 11.0024 65.8286 11.076 65.571 11.2232C65.3134 11.3704 65.1079 11.5851 64.9546 11.8672C64.8012 12.1493 64.7246 12.4805 64.7246 12.8608C64.7246 13.2472 64.8012 13.5845 64.9546 13.8728C65.1079 14.1549 65.3134 14.3727 65.571 14.526C65.8286 14.6732 66.1138 14.7468 66.4266 14.7468C66.7394 14.7468 67.0246 14.6732 67.2822 14.526C67.5459 14.3727 67.7544 14.1549 67.9078 13.8728C68.0611 13.5845 68.1378 13.2503 68.1378 12.87Z"
+                    fill="white"
+                />
+                <path
+                    d="M71.3282 11.2968C71.4999 10.9963 71.7514 10.7509 72.0826 10.5608C72.4138 10.3707 72.791 10.2756 73.2142 10.2756C73.668 10.2756 74.0759 10.3829 74.4378 10.5976C74.7996 10.8123 75.0848 11.1159 75.2934 11.5084C75.5019 11.8948 75.6062 12.3456 75.6062 12.8608C75.6062 13.3699 75.5019 13.8237 75.2934 14.2224C75.0848 14.6211 74.7966 14.9308 74.4286 15.1516C74.0667 15.3724 73.6619 15.4828 73.2142 15.4828C72.7787 15.4828 72.3954 15.3877 72.0642 15.1976C71.7391 15.0075 71.4938 14.7652 71.3282 14.4708V15.4H70.491V8.592H71.3282V11.2968ZM74.7506 12.8608C74.7506 12.4805 74.6739 12.1493 74.5206 11.8672C74.3672 11.5851 74.1587 11.3704 73.895 11.2232C73.6374 11.076 73.3522 11.0024 73.0394 11.0024C72.7327 11.0024 72.4475 11.0791 72.1838 11.2324C71.9262 11.3796 71.7176 11.5973 71.5582 11.8856C71.4048 12.1677 71.3282 12.4959 71.3282 12.87C71.3282 13.2503 71.4048 13.5845 71.5582 13.8728C71.7176 14.1549 71.9262 14.3727 72.1838 14.526C72.4475 14.6732 72.7327 14.7468 73.0394 14.7468C73.3522 14.7468 73.6374 14.6732 73.895 14.526C74.1587 14.3727 74.3672 14.1549 74.5206 13.8728C74.6739 13.5845 74.7506 13.2472 74.7506 12.8608Z"
+                    fill="white"
+                />
+                <path d="M77.5454 8.592V15.4H76.7082V8.592H77.5454Z" fill="white" />
+                <path
+                    d="M83.6642 12.686C83.6642 12.8455 83.655 13.0141 83.6366 13.192H79.607C79.6377 13.6888 79.8064 14.0783 80.113 14.3604C80.4258 14.6364 80.803 14.7744 81.2446 14.7744C81.6065 14.7744 81.907 14.6916 82.1462 14.526C82.3916 14.3543 82.5633 14.1273 82.6614 13.8452H83.563C83.4281 14.3297 83.1582 14.7253 82.7534 15.032C82.3486 15.3325 81.8457 15.4828 81.2446 15.4828C80.7662 15.4828 80.3369 15.3755 79.9566 15.1608C79.5825 14.9461 79.2881 14.6425 79.0734 14.25C78.8587 13.8513 78.7514 13.3913 78.7514 12.87C78.7514 12.3487 78.8557 11.8917 79.0642 11.4992C79.2728 11.1067 79.5641 10.8061 79.9382 10.5976C80.3185 10.3829 80.754 10.2756 81.2446 10.2756C81.723 10.2756 82.1462 10.3799 82.5142 10.5884C82.8822 10.7969 83.1643 11.0852 83.3606 11.4532C83.563 11.8151 83.6642 12.226 83.6642 12.686ZM82.7994 12.5112C82.7994 12.1923 82.7289 11.9193 82.5878 11.6924C82.4467 11.4593 82.2536 11.2845 82.0082 11.168C81.769 11.0453 81.5022 10.984 81.2078 10.984C80.7846 10.984 80.4227 11.1189 80.1222 11.3888C79.8278 11.6587 79.6591 12.0328 79.6162 12.5112H82.7994Z"
+                    fill="white"
+                />
+                <path
+                    d="M89.6048 15.4828C89.1326 15.4828 88.7032 15.3755 88.3168 15.1608C87.9366 14.9461 87.636 14.6425 87.4152 14.25C87.2006 13.8513 87.0932 13.3913 87.0932 12.87C87.0932 12.3548 87.2036 11.9009 87.4244 11.5084C87.6514 11.1097 87.958 10.8061 88.3444 10.5976C88.7308 10.3829 89.1632 10.2756 89.6416 10.2756C90.12 10.2756 90.5524 10.3829 90.9388 10.5976C91.3252 10.8061 91.6288 11.1067 91.8496 11.4992C92.0766 11.8917 92.19 12.3487 92.19 12.87C92.19 13.3913 92.0735 13.8513 91.8404 14.25C91.6135 14.6425 91.3038 14.9461 90.9112 15.1608C90.5187 15.3755 90.0832 15.4828 89.6048 15.4828ZM89.6048 14.7468C89.9054 14.7468 90.1875 14.6763 90.4512 14.5352C90.715 14.3941 90.9266 14.1825 91.086 13.9004C91.2516 13.6183 91.3344 13.2748 91.3344 12.87C91.3344 12.4652 91.2547 12.1217 91.0952 11.8396C90.9358 11.5575 90.7272 11.3489 90.4696 11.214C90.212 11.0729 89.933 11.0024 89.6324 11.0024C89.3258 11.0024 89.0436 11.0729 88.786 11.214C88.5346 11.3489 88.3322 11.5575 88.1788 11.8396C88.0255 12.1217 87.9488 12.4652 87.9488 12.87C87.9488 13.2809 88.0224 13.6275 88.1696 13.9096C88.323 14.1917 88.5254 14.4033 88.7768 14.5444C89.0283 14.6793 89.3043 14.7468 89.6048 14.7468Z"
+                    fill="white"
+                />
+                <path
+                    d="M95.9312 10.2664C96.5445 10.2664 97.0413 10.4535 97.4216 10.8276C97.8019 11.1956 97.992 11.7292 97.992 12.4284V15.4H97.164V12.548C97.164 12.0451 97.0383 11.6617 96.7868 11.398C96.5353 11.1281 96.1919 10.9932 95.7564 10.9932C95.3148 10.9932 94.9621 11.1312 94.6984 11.4072C94.4408 11.6832 94.312 12.0849 94.312 12.6124V15.4H93.4748V10.3584H94.312V11.076C94.4776 10.8184 94.7015 10.6191 94.9836 10.478C95.2719 10.3369 95.5877 10.2664 95.9312 10.2664Z"
+                    fill="white"
+                />
+                <rect x="9" y="7" width="26" height="26" rx="10" fill="url(#paint0_angular_1303_2200)" />
+                <path
+                    fillRule="evenodd"
+                    clipRule="evenodd"
+                    d="M25.7914 16.5695L25.738 16.3341C25.738 14.2733 24.0609 12.5968 21.9997 12.5968C19.9385 12.5968 18.2617 14.2733 18.2617 16.3341L18.2081 16.5695H15.1387L15.966 24.2826C16.1318 25.8515 17.4549 27.0421 19.0326 27.0421H24.9669C26.5446 27.0421 27.8677 25.8515 28.0334 24.2828L28.8609 16.5695H25.7914ZM19.8331 16.5695L19.8934 16.3341C19.8934 15.1729 20.8383 14.2281 21.9997 14.2281C23.1613 14.2281 24.1063 15.1729 24.1063 16.3341L24.1664 16.5695H19.8331Z"
+                    fill="white"
+                />
+                <defs>
+                    <radialGradient
+                        id="paint0_angular_1303_2200"
+                        cx="0"
+                        cy="0"
+                        r="1"
+                        gradientUnits="userSpaceOnUse"
+                        gradientTransform="translate(22 20) rotate(88.8309) scale(13.0027)"
+                    >
+                        <stop offset="0.000415415" stopColor="#F4605E" />
+                        <stop offset="0.0642377" stopColor="#E94B80" />
+                        <stop offset="0.128396" stopColor="#DE33A4" />
+                        <stop offset="0.186654" stopColor="#D41AC8" />
+                        <stop offset="0.250949" stopColor="#CB06E5" />
+                        <stop offset="0.281719" stopColor="#C902EC" />
+                        <stop offset="0.316858" stopColor="#CB04E5" />
+                        <stop offset="0.371347" stopColor="#D108D3" />
+                        <stop offset="0.43351" stopColor="#D80DBA" />
+                        <stop offset="0.504024" stopColor="#E1139E" />
+                        <stop offset="0.59576" stopColor="#EC1E7B" />
+                        <stop offset="0.673288" stopColor="#F22A65" />
+                        <stop offset="0.713795" stopColor="#F5355B" />
+                        <stop offset="0.754495" stopColor="#F74452" />
+                        <stop offset="0.818581" stopColor="#F75651" />
+                        <stop offset="0.878478" stopColor="#F76051" />
+                        <stop offset="0.938046" stopColor="#F76551" />
+                    </radialGradient>
+                </defs>
+            </svg>
+        </a>
+    );
+};
+
+export const AppGalleryButton = ({ size = "md", ...props }: AnchorHTMLAttributes<HTMLAnchorElement> & { size?: "md" | "lg" }) => {
+    return (
+        <a
+            aria-label="Explore it on AppGallery"
+            href="#"
+            {...props}
+            className={cx(
+                "rounded-[7px] bg-black ring-1 ring-app-store-badge-border outline-focus-ring ring-inset focus-visible:outline-2 focus-visible:outline-offset-2",
+                props.className,
+            )}
+        >
+            <svg width={size === "md" ? 133 : 147} height={size === "md" ? 40 : 44} viewBox="0 0 133 40" fill="none">
+                <path
+                    d="M45.3962 25.4116H48.8919L47.6404 22.0615C47.4682 21.5986 47.2989 21.0875 47.1319 20.5276C46.9813 21.0229 46.817 21.5286 46.6394 22.0453L45.3962 25.4116ZM49.4893 27.0021H44.8068L43.6607 30.1344H41.6021L46.1874 18.4368H48.133L52.8234 30.1344H50.6599L49.4893 27.0021Z"
+                    fill="white"
+                />
+                <path
+                    d="M58.8962 28.0072C59.3026 27.461 59.5058 26.663 59.5058 25.6135C59.5058 24.6396 59.3375 23.933 59.0013 23.4942C58.6647 23.0557 58.2167 22.8364 57.657 22.8364C57.2695 22.8364 56.9117 22.9281 56.5834 23.1109C56.2551 23.2939 55.9429 23.5387 55.6469 23.8455V28.5117C55.8461 28.6085 56.0775 28.6853 56.3413 28.7416C56.605 28.7984 56.8661 28.8266 57.1242 28.8266C57.8994 28.8266 58.4898 28.5533 58.8962 28.0072ZM53.653 23.555C53.653 22.9092 53.6314 22.1986 53.5885 21.4237H55.4613C55.5311 21.7844 55.5797 22.1531 55.6066 22.5297C56.3815 21.6849 57.2695 21.2622 58.2706 21.2622C58.8519 21.2622 59.3901 21.4088 59.8853 21.7021C60.3802 21.9955 60.7799 22.4583 61.0839 23.0906C61.3882 23.7231 61.5402 24.5265 61.5402 25.5005C61.5402 26.5177 61.3666 27.387 61.0194 28.108C60.6722 28.8294 60.1866 29.3754 59.5623 29.747C58.9381 30.1181 58.2167 30.3039 57.3989 30.3039C56.8066 30.3039 56.2226 30.2042 55.6469 30.0053V33.6056L53.653 33.7752V23.555Z"
+                    fill="white"
+                />
+                <path
+                    d="M67.9935 28.0072C68.3999 27.461 68.6031 26.663 68.6031 25.6135C68.6031 24.6396 68.4349 23.933 68.0986 23.4942C67.7621 23.0557 67.3141 22.8364 66.7543 22.8364C66.3669 22.8364 66.009 22.9281 65.6807 23.1109C65.3522 23.2939 65.0402 23.5387 64.7442 23.8455V28.5117C64.9434 28.6085 65.1746 28.6853 65.4386 28.7416C65.7021 28.7984 65.9631 28.8266 66.2215 28.8266C66.9964 28.8266 67.5871 28.5533 67.9935 28.0072ZM62.7501 23.555C62.7501 22.9092 62.7285 22.1986 62.6855 21.4237H64.5586C64.6285 21.7844 64.677 22.1531 64.7039 22.5297C65.4789 21.6849 66.3669 21.2622 67.3679 21.2622C67.9493 21.2622 68.4871 21.4088 68.9826 21.7021C69.4775 21.9955 69.8772 22.4583 70.1815 23.0906C70.4852 23.7231 70.6375 24.5265 70.6375 25.5005C70.6375 26.5177 70.4637 27.387 70.1167 28.108C69.7695 28.8294 69.2837 29.3754 68.6597 29.747C68.0351 30.1181 67.314 30.3039 66.4959 30.3039C65.9039 30.3039 65.3199 30.2042 64.7442 30.0053V33.6056L62.7501 33.7752V23.555Z"
+                    fill="white"
+                />
+                <path
+                    d="M74.3005 29.5813C73.4391 29.1053 72.7773 28.4229 72.3146 27.5349C71.8514 26.6469 71.6202 25.5974 71.6202 24.3864C71.6202 23.0734 71.8866 21.9578 72.4194 21.0401C72.9522 20.1227 73.6775 19.4337 74.5949 18.9735C75.5127 18.5134 76.5418 18.2833 77.6831 18.2833C78.3557 18.2833 78.9975 18.3574 79.6085 18.5053C80.2191 18.6534 80.7882 18.8564 81.3159 19.1149L80.8071 20.6486C79.7469 20.1428 78.7351 19.8898 77.7719 19.8898C76.9591 19.8898 76.2474 20.0634 75.6367 20.4106C75.0258 20.7578 74.5506 21.2677 74.2117 21.9404C73.8725 22.6132 73.7031 23.4258 73.7031 24.3783C73.7031 25.2128 73.8335 25.9526 74.0943 26.5984C74.3557 27.2442 74.7674 27.7557 75.3298 28.1323C75.8922 28.509 76.6013 28.6973 77.457 28.6973C77.8445 28.6973 78.2319 28.6651 78.6194 28.6005C79.0069 28.536 79.3703 28.4418 79.7093 28.3179V25.9526H77.005V24.4026H81.6469V29.3272C80.9794 29.6392 80.2783 29.8789 79.5439 30.0456C78.809 30.2123 78.0786 30.2957 77.3519 30.2957C76.1786 30.2957 75.1613 30.0579 74.3005 29.5813Z"
+                    fill="white"
+                />
+                <path
+                    d="M87.5381 28.5197C87.9522 28.3208 88.2914 28.073 88.5551 27.7771V26.1625C88.0114 26.1034 87.5674 26.0737 87.2231 26.0737C86.3997 26.0737 85.8303 26.2068 85.5159 26.4734C85.2007 26.7394 85.0434 27.0989 85.0434 27.5509C85.0434 27.9818 85.1578 28.3005 85.3866 28.5077C85.6154 28.7149 85.9261 28.8184 86.3189 28.8184C86.717 28.8184 87.1234 28.7189 87.5381 28.5197ZM88.7327 30.1344C88.6626 29.7952 88.6167 29.4106 88.5954 28.98C88.2887 29.3461 87.8893 29.6568 87.3965 29.9125C86.9045 30.168 86.3485 30.2957 85.7295 30.2957C85.229 30.2957 84.773 30.1976 84.361 30.001C83.9498 29.8048 83.6226 29.5087 83.3805 29.113C83.1383 28.7176 83.017 28.2347 83.017 27.6639C83.017 26.8192 83.321 26.145 83.9293 25.6416C84.5375 25.1385 85.5519 24.887 86.9727 24.887C87.5055 24.887 88.033 24.9248 88.5551 25V24.8305C88.5551 24.0609 88.3909 23.5187 88.0626 23.2036C87.7343 22.889 87.2634 22.7316 86.6501 22.7316C86.2247 22.7316 85.7701 22.7935 85.2855 22.9172C84.8013 23.0411 84.3759 23.189 84.0101 23.3612L83.6951 21.9081C84.0503 21.7465 84.5186 21.5986 85.0999 21.464C85.6813 21.3297 86.2946 21.2622 86.9405 21.2622C87.6941 21.2622 88.3343 21.3765 88.8618 21.6052C89.3893 21.834 89.801 22.2271 90.097 22.7838C90.393 23.3411 90.541 24.0906 90.541 25.0323V28.4954C90.541 28.8562 90.5623 29.4027 90.6055 30.1344H88.7327Z"
+                    fill="white"
+                />
+                <path
+                    d="M92.0709 28.0434V17.7505L94.0567 17.5891V27.6882C94.0567 28.0597 94.1199 28.3218 94.2463 28.4754C94.3727 28.6285 94.5732 28.7056 94.8479 28.7056C94.9716 28.7056 95.1466 28.676 95.3724 28.6168L95.6066 30.0456C95.418 30.121 95.1882 30.1816 94.9167 30.2272C94.6447 30.2728 94.3876 30.2957 94.1455 30.2957C92.762 30.2957 92.0709 29.5451 92.0709 28.0434Z"
+                    fill="white"
+                />
+                <path
+                    d="M97.0356 28.0434V17.7505L99.0215 17.5891V27.6882C99.0215 28.0597 99.0847 28.3218 99.2111 28.4754C99.3378 28.6285 99.5383 28.7056 99.8127 28.7056C99.9365 28.7056 100.111 28.676 100.338 28.6168L100.572 30.0456C100.383 30.121 100.153 30.1816 99.8815 30.2272C99.6095 30.2728 99.3524 30.2957 99.1103 30.2957C97.7271 30.2957 97.0356 29.5451 97.0356 28.0434Z"
+                    fill="white"
+                />
+                <path
+                    d="M106.795 24.7659C106.755 24.0716 106.581 23.551 106.269 23.2036C105.957 22.8568 105.539 22.683 105.019 22.683C104.512 22.683 104.091 22.8581 103.755 23.2078C103.419 23.5578 103.197 24.0771 103.096 24.7659H106.795ZM108.739 26.0333H103.04C103.131 27.8579 104 28.7701 105.648 28.7701C106.056 28.7701 106.475 28.7203 106.904 28.6208C107.331 28.521 107.741 28.388 108.133 28.221L108.571 29.5853C107.595 30.0592 106.501 30.2957 105.285 30.2957C104.357 30.2957 103.579 30.121 102.944 29.7711C102.307 29.4213 101.829 28.9181 101.509 28.2613C101.19 27.6051 101.03 26.8138 101.03 25.888C101.03 24.9248 101.199 24.0958 101.539 23.4016C101.877 22.7073 102.349 22.1773 102.955 21.8112C103.56 21.4453 104.259 21.2622 105.051 21.2622C105.875 21.2622 106.56 21.4547 107.112 21.8396C107.664 22.2241 108.072 22.737 108.339 23.3773C108.605 24.018 108.739 24.7255 108.739 25.5005V26.0333Z"
+                    fill="white"
+                />
+                <path
+                    d="M110.248 23.6115C110.248 23.1326 110.224 22.4034 110.181 21.4237H112.048C112.08 21.6659 112.109 21.9552 112.141 22.2916C112.171 22.6279 112.189 22.901 112.2 23.1109C112.432 22.7288 112.659 22.4073 112.883 22.1463C113.107 21.8851 113.368 21.6727 113.667 21.5083C113.965 21.3443 114.304 21.2622 114.688 21.2622C114.995 21.2622 115.256 21.2946 115.477 21.3592L115.227 23.0868C115.035 23.0276 114.819 22.9979 114.581 22.9979C114.115 22.9979 113.704 23.1177 113.355 23.3573C113.005 23.5965 112.632 23.9908 112.232 24.5398V30.1344H110.248V23.6115Z"
+                    fill="white"
+                />
+                <path
+                    d="M116.597 33.6984C116.307 33.6475 116.067 33.5896 115.88 33.5251L116.243 32.072C116.376 32.1094 116.547 32.1458 116.752 32.1808C116.955 32.216 117.149 32.2333 117.333 32.2333C118.216 32.2333 118.877 31.6653 119.317 30.5299L119.448 30.207L116.235 21.4237H118.373L119.989 26.332C120.251 27.1717 120.421 27.8149 120.496 28.2613C120.648 27.6317 120.824 27.0021 121.029 26.3724L122.669 21.4237H124.677L121.475 30.2475C121.173 31.0816 120.845 31.7541 120.496 32.2656C120.147 32.7768 119.733 33.1562 119.259 33.4039C118.781 33.6512 118.208 33.7752 117.533 33.7752C117.2 33.7752 116.888 33.7499 116.597 33.6984Z"
+                    fill="white"
+                />
+                <path
+                    d="M41.5933 7.30106H45.1474L45.0474 8.15946H42.6349V9.82186H44.9098V10.6261H42.6349V12.4677H45.1765L45.089 13.3344H41.5933V7.30106Z"
+                    fill="white"
+                />
+                <path
+                    d="M47.5973 10.2552L45.7223 7.30106H46.9055L48.1765 9.472L49.514 7.30106H50.6639L48.8055 10.2176L50.8181 13.3344H49.6181L48.1807 10.9595L46.7181 13.3344H45.5682L47.5973 10.2552Z"
+                    fill="white"
+                />
+                <path
+                    d="M54.1973 9.99466C54.4194 9.7936 54.5306 9.50933 54.5306 9.14266C54.5306 8.7704 54.4172 8.50266 54.1911 8.33866C53.9647 8.17466 53.6319 8.0928 53.1932 8.0928H52.6266V10.2344C52.8876 10.276 53.0876 10.2968 53.2266 10.2968C53.6514 10.2968 53.9751 10.1963 54.1973 9.99466ZM51.5847 7.30106H53.2098C53.9735 7.30106 54.5583 7.4568 54.9639 7.76773C55.3695 8.07893 55.5722 8.5288 55.5722 9.1176C55.5722 9.5176 55.4813 9.8672 55.2994 10.1656C55.1173 10.4643 54.8639 10.6936 54.5388 10.8531C54.214 11.0131 53.8402 11.0928 53.418 11.0928C53.1876 11.0928 52.9236 11.0651 52.6266 11.0093V13.3344H51.5847V7.30106Z"
+                    fill="white"
+                />
+                <path d="M56.6015 7.30106H57.6431V12.4427H60.1389L60.0514 13.3344H56.6015V7.30106Z" fill="white" />
+                <path
+                    d="M64.4223 12.2989C64.714 12.1032 64.9319 11.8339 65.0764 11.4907C65.221 11.1477 65.2932 10.7552 65.2932 10.3136C65.2932 9.88026 65.2292 9.49439 65.1015 9.15519C64.9735 8.81625 64.7695 8.54639 64.489 8.34479C64.2084 8.14346 63.8474 8.04266 63.4055 8.04266C62.9834 8.04266 62.625 8.14479 62.3306 8.34906C62.0362 8.55306 61.8154 8.82692 61.6682 9.16986C61.521 9.51306 61.4474 9.89145 61.4474 10.3053C61.4474 10.7413 61.5167 11.1317 61.6556 11.476C61.7943 11.8205 62.0068 12.0928 62.2932 12.2928C62.5791 12.4928 62.9332 12.5928 63.3556 12.5928C63.7751 12.5928 64.1306 12.4947 64.4223 12.2989ZM61.7223 13.0387C61.2807 12.7859 60.9431 12.4309 60.7098 11.9739C60.4764 11.5171 60.3599 10.9859 60.3599 10.3803C60.3599 9.74426 60.4839 9.18799 60.7327 8.71146C60.9813 8.23519 61.3396 7.86719 61.8076 7.60719C62.2756 7.34772 62.8277 7.21759 63.4639 7.21759C64.0722 7.21759 64.5959 7.34346 65.0348 7.59466C65.4735 7.84639 65.8084 8.19972 66.0388 8.65519C66.2695 9.11092 66.3847 9.63865 66.3847 10.2387C66.3847 10.8859 66.2591 11.4485 66.0076 11.9261C65.7562 12.4037 65.3981 12.772 64.9327 13.0301C64.4674 13.2885 63.921 13.4177 63.2932 13.4177C62.6876 13.4177 62.1639 13.2915 61.7223 13.0387Z"
+                    fill="white"
+                />
+                <path
+                    d="M69.1807 10.1552C69.4333 10.1552 69.657 10.1061 69.8514 10.0072C70.0458 9.9088 70.1973 9.76986 70.3055 9.59066C70.4141 9.41146 70.4682 9.20373 70.4682 8.96773C70.4682 8.66506 70.3722 8.44346 70.1807 8.3032C69.989 8.16293 69.7098 8.0928 69.3431 8.0928H68.589V10.1552H69.1807ZM67.5474 7.30106H69.4349C70.1237 7.30106 70.6453 7.43866 70.9994 7.7136C71.3536 7.98853 71.5306 8.38186 71.5306 8.8928C71.5306 9.21226 71.4666 9.4936 71.3389 9.73653C71.2111 9.97973 71.0528 10.1776 70.864 10.3301C70.6749 10.4829 70.4807 10.5968 70.2807 10.672L72.1349 13.3344H70.9266L69.3557 10.9427H68.589V13.3344H67.5474V7.30106Z"
+                    fill="white"
+                />
+                <path
+                    d="M72.9599 7.30106H76.5141L76.4141 8.15946H74.0015V9.82186H76.2765V10.6261H74.0015V12.4677H76.5431L76.4556 13.3344H72.9599V7.30106Z"
+                    fill="white"
+                />
+                <path d="M80.3807 7.30106H81.4223V13.3344H80.3807V7.30106Z" fill="white" />
+                <path d="M84.1765 8.172H82.3055L82.3973 7.30106H87.0933L86.9973 8.172H85.218V13.3344H84.1765V8.172Z" fill="white" />
+                <path
+                    d="M94.3141 12.2989C94.6055 12.1032 94.8237 11.8339 94.9682 11.4907C95.1125 11.1477 95.1847 10.7552 95.1847 10.3136C95.1847 9.88026 95.1207 9.49439 94.9933 9.15519C94.8653 8.81625 94.661 8.54639 94.3807 8.34479C94.0999 8.14346 93.7389 8.04266 93.2973 8.04266C92.8749 8.04266 92.5167 8.14479 92.2223 8.34906C91.9277 8.55306 91.7069 8.82692 91.5599 9.16986C91.4125 9.51306 91.3389 9.89145 91.3389 10.3053C91.3389 10.7413 91.4082 11.1317 91.5474 11.476C91.6861 11.8205 91.8986 12.0928 92.1847 12.2928C92.4709 12.4928 92.825 12.5928 93.2474 12.5928C93.6666 12.5928 94.0223 12.4947 94.3141 12.2989ZM91.6141 13.0387C91.1722 12.7859 90.8349 12.4309 90.6015 11.9739C90.3682 11.5171 90.2514 10.9859 90.2514 10.3803C90.2514 9.74426 90.3757 9.18799 90.6245 8.71146C90.8727 8.23519 91.2311 7.86719 91.6994 7.60719C92.1674 7.34772 92.7194 7.21759 93.3557 7.21759C93.9639 7.21759 94.4874 7.34346 94.9266 7.59466C95.3653 7.84639 95.6999 8.19972 95.9306 8.65519C96.161 9.11092 96.2765 9.63865 96.2765 10.2387C96.2765 10.8859 96.1506 11.4485 95.8994 11.9261C95.6479 12.4037 95.2895 12.772 94.8245 13.0301C94.3591 13.2885 93.8125 13.4177 93.1847 13.4177C92.5791 13.4177 92.0557 13.2915 91.6141 13.0387Z"
+                    fill="white"
+                />
+                <path
+                    d="M97.4389 7.30106H98.6349L101.619 11.976C101.592 11.5317 101.581 11.1219 101.581 10.7469V7.30106H102.547V13.3344H101.389L98.3599 8.58426C98.3903 9.12346 98.4055 9.60106 98.4055 10.0176V13.3344H97.4389V7.30106Z"
+                    fill="white"
+                />
+                <path
+                    fillRule="evenodd"
+                    clipRule="evenodd"
+                    d="M26.9417 7.33329H15.8633C10.6446 7.33329 8.73584 9.24209 8.73584 14.4608V25.5393C8.73584 30.7579 10.6446 32.6666 15.8633 32.6666H26.9382C32.1569 32.6666 34.0692 30.7579 34.0692 25.5393V14.4608C34.0692 9.24209 32.1604 7.33329 26.9417 7.33329"
+                    fill="#C91C2E"
+                />
+                <path
+                    d="M19.7881 22.0255H20.8041L20.2944 20.8404L19.7881 22.0255ZM19.5379 22.6229L19.2366 23.3125H18.5504L20.0097 20.0021H20.6025L22.0558 23.3125H21.3513L21.0537 22.6229H19.5379ZM30.5787 23.3102H31.2419V20.0021H30.5787V23.3102ZM27.9395 21.8887H29.1616V21.2859H27.9395V20.6078H29.7137V20.0042H27.2766V23.3121H29.7777V22.7088H27.9395V21.8887ZM25.3046 22.2796L24.5526 20.002H24.0043L23.2523 22.2796L22.5206 20.0036H21.8054L22.9598 23.314H23.516L24.2691 21.1395L25.0219 23.314H25.5832L26.7347 20.0036H26.0379L25.3046 22.2796ZM17.5382 21.8979C17.5382 22.4364 17.2707 22.7241 16.7851 22.7241C16.2969 22.7241 16.0281 22.4283 16.0281 21.875V20.004H15.356V21.8979C15.356 22.8296 15.8736 23.3638 16.776 23.3638C17.6872 23.3638 18.2099 22.8194 18.2099 21.8705V20.002H17.5382V21.8979ZM13.7526 20.0021H14.4243V23.3142H13.7526V21.9692H12.235V23.3142H11.563V20.0021H12.235V21.3383H13.7526V20.0021Z"
+                    fill="white"
+                />
+                <path
+                    d="M21.4023 15.7851C19.0773 15.7851 17.1855 13.8933 17.1855 11.5683H17.7813C17.7813 13.5649 19.4055 15.1894 21.4023 15.1894C23.3991 15.1894 25.0234 13.5649 25.0234 11.5683H25.6191C25.6191 13.8933 23.7274 15.7851 21.4023 15.7851"
+                    fill="white"
+                />
+            </svg>
+        </a>
+    );
+};
diff --git a/src/components/base/buttons/button-utility.tsx b/src/components/base/buttons/button-utility.tsx
new file mode 100644
index 0000000..8e91903
--- /dev/null
+++ b/src/components/base/buttons/button-utility.tsx
@@ -0,0 +1,117 @@
+import type { AnchorHTMLAttributes, ButtonHTMLAttributes, DetailedHTMLProps, FC, ReactNode } from "react";
+import { isValidElement } from "react";
+import type { Placement } from "react-aria";
+import type { ButtonProps as AriaButtonProps, LinkProps as AriaLinkProps } from "react-aria-components";
+import { Button as AriaButton, Link as AriaLink } from "react-aria-components";
+import { Tooltip } from "@/components/base/tooltip/tooltip";
+import { cx } from "@/utils/cx";
+import { isReactComponent } from "@/utils/is-react-component";
+
+export const styles = {
+    secondary:
+        "bg-primary text-fg-quaternary shadow-xs-skeumorphic ring-1 ring-primary ring-inset hover:bg-primary_hover hover:text-fg-quaternary_hover disabled:shadow-xs disabled:ring-disabled_subtle",
+    tertiary: "text-fg-quaternary hover:bg-primary_hover hover:text-fg-quaternary_hover",
+};
+
+/**
+ * Common props shared between button and anchor variants
+ */
+export interface CommonProps {
+    /** Disables the button and shows a disabled state */
+    isDisabled?: boolean;
+    /** The size variant of the button */
+    size?: "xs" | "sm";
+    /** The color variant of the button */
+    color?: "secondary" | "tertiary";
+    /** The icon to display in the button */
+    icon?: FC<{ className?: string }> | ReactNode;
+    /** The tooltip to display when hovering over the button */
+    tooltip?: string;
+    /** The placement of the tooltip */
+    tooltipPlacement?: Placement;
+}
+
+/**
+ * Props for the button variant (non-link)
+ */
+export interface ButtonProps extends CommonProps, DetailedHTMLProps<Omit<ButtonHTMLAttributes<HTMLButtonElement>, "color" | "slot">, HTMLButtonElement> {
+    /** Slot name for react-aria component */
+    slot?: AriaButtonProps["slot"];
+}
+
+/**
+ * Props for the link variant (anchor tag)
+ */
+interface LinkProps extends CommonProps, DetailedHTMLProps<Omit<AnchorHTMLAttributes<HTMLAnchorElement>, "color">, HTMLAnchorElement> {
+    /** Options for the configured client side router. */
+    routerOptions?: AriaLinkProps["routerOptions"];
+}
+
+/** Union type of button and link props */
+export type Props = ButtonProps | LinkProps;
+
+export const ButtonUtility = ({
+    tooltip,
+    className,
+    isDisabled,
+    icon: Icon,
+    size = "sm",
+    color = "secondary",
+    tooltipPlacement = "top",
+    ...otherProps
+}: Props) => {
+    const href = "href" in otherProps ? otherProps.href : undefined;
+    const Component = href ? AriaLink : AriaButton;
+
+    let props = {};
+
+    if (href) {
+        props = {
+            ...otherProps,
+
+            href: isDisabled ? undefined : href,
+
+            // Since anchor elements do not support the `disabled` attribute and state,
+            // we need to specify `data-rac` and `data-disabled` in order to be able
+            // to use the `disabled:` selector in classes.
+            ...(isDisabled ? { "data-rac": true, "data-disabled": true } : {}),
+        };
+    } else {
+        props = {
+            ...otherProps,
+
+            type: otherProps.type || "button",
+            isDisabled,
+        };
+    }
+
+    const content = (
+        <Component
+            aria-label={tooltip}
+            {...props}
+            className={cx(
+                "group relative inline-flex h-max cursor-pointer items-center justify-center rounded-md p-1.5 outline-focus-ring transition duration-100 ease-linear focus-visible:outline-2 focus-visible:outline-offset-2 disabled:cursor-not-allowed disabled:text-fg-disabled_subtle",
+                styles[color],
+
+                // Icon styles
+                "*:data-icon:pointer-events-none *:data-icon:shrink-0 *:data-icon:text-current *:data-icon:transition-inherit-all",
+                size === "xs" ? "*:data-icon:size-4" : "*:data-icon:size-5",
+
+                className,
+            )}
+        >
+            {isReactComponent(Icon) && <Icon data-icon />}
+            {isValidElement(Icon) && Icon}
+        </Component>
+    );
+
+    if (tooltip) {
+        return (
+            <Tooltip title={tooltip} placement={tooltipPlacement} isDisabled={isDisabled} offset={size === "xs" ? 4 : 6}>
+                {content}
+            </Tooltip>
+        );
+    }
+
+    return content;
+};
diff --git a/src/components/base/buttons/button.tsx b/src/components/base/buttons/button.tsx
new file mode 100644
index 0000000..044b5d2
--- /dev/null
+++ b/src/components/base/buttons/button.tsx
@@ -0,0 +1,267 @@
+import type { AnchorHTMLAttributes, ButtonHTMLAttributes, DetailedHTMLProps, FC, ReactNode } from "react";
+import React, { isValidElement } from "react";
+import type { ButtonProps as AriaButtonProps, LinkProps as AriaLinkProps } from "react-aria-components";
+import { Button as AriaButton, Link as AriaLink } from "react-aria-components";
+import { cx, sortCx } from "@/utils/cx";
+import { isReactComponent } from "@/utils/is-react-component";
+
+export const styles = sortCx({
+    common: {
+        root: [
+            "group relative inline-flex h-max cursor-pointer items-center justify-center whitespace-nowrap outline-brand transition duration-100 ease-linear before:absolute focus-visible:outline-2 focus-visible:outline-offset-2",
+            // When button is used within `InputGroup`
+            "in-data-input-wrapper:shadow-xs in-data-input-wrapper:focus:!z-50 in-data-input-wrapper:in-data-leading:-mr-px in-data-input-wrapper:in-data-leading:rounded-r-none in-data-input-wrapper:in-data-leading:before:rounded-r-none in-data-input-wrapper:in-data-trailing:-ml-px in-data-input-wrapper:in-data-trailing:rounded-l-none in-data-input-wrapper:in-data-trailing:before:rounded-l-none",
+            // Disabled styles
+            "disabled:cursor-not-allowed disabled:text-fg-disabled",
+            // Icon styles
+            "disabled:*:data-icon:text-fg-disabled_subtle",
+            // Same as `icon` but for SSR icons that cannot be passed to the client as functions.
+            "*:data-icon:pointer-events-none *:data-icon:size-5 *:data-icon:shrink-0 *:data-icon:transition-inherit-all",
+        ].join(" "),
+        icon: "pointer-events-none size-5 shrink-0 transition-inherit-all",
+    },
+    sizes: {
+        sm: {
+            root: [
+                "gap-1 rounded-lg px-3 py-2 text-sm font-semibold before:rounded-[7px] data-icon-only:p-2",
+                "in-data-input-wrapper:px-3.5 in-data-input-wrapper:py-2.5 in-data-input-wrapper:data-icon-only:p-2.5",
+            ].join(" "),
+            linkRoot: "gap-1",
+        },
+        md: {
+            root: [
+                "gap-1 rounded-lg px-3.5 py-2.5 text-sm font-semibold before:rounded-[7px] data-icon-only:p-2.5",
+                "in-data-input-wrapper:gap-1.5 in-data-input-wrapper:px-4 in-data-input-wrapper:text-md in-data-input-wrapper:data-icon-only:p-3",
+            ].join(" "),
+            linkRoot: "gap-1",
+        },
+        lg: {
+            root: "gap-1.5 rounded-lg px-4 py-2.5 text-md font-semibold before:rounded-[7px] data-icon-only:p-3",
+            linkRoot: "gap-1.5",
+        },
+        xl: {
+            root: "gap-1.5 rounded-lg px-4.5 py-3 text-md font-semibold before:rounded-[7px] data-icon-only:p-3.5",
+            linkRoot: "gap-1.5",
+        },
+    },
+
+    colors: {
+        primary: {
+            root: [
+                "bg-brand-solid text-white shadow-xs-skeumorphic ring-1 ring-transparent ring-inset hover:bg-brand-solid_hover data-loading:bg-brand-solid_hover",
+                // Inner border gradient
+                "before:absolute before:inset-px before:border before:border-white/12 before:mask-b-from-0%",
+                // Disabled styles
+                "disabled:bg-disabled disabled:shadow-xs disabled:ring-disabled_subtle",
+                // Icon styles
+                "*:data-icon:text-button-primary-icon hover:*:data-icon:text-button-primary-icon_hover",
+            ].join(" "),
+        },
+        secondary: {
+            root: [
+                "bg-primary text-secondary shadow-xs-skeumorphic ring-1 ring-primary ring-inset hover:bg-primary_hover hover:text-secondary_hover data-loading:bg-primary_hover",
+                // Disabled styles
+                "disabled:shadow-xs disabled:ring-disabled_subtle",
+                // Icon styles
+                "*:data-icon:text-fg-quaternary hover:*:data-icon:text-fg-quaternary_hover",
+            ].join(" "),
+        },
+        tertiary: {
+            root: [
+                "text-tertiary hover:bg-primary_hover hover:text-tertiary_hover data-loading:bg-primary_hover",
+                // Icon styles
+                "*:data-icon:text-fg-quaternary hover:*:data-icon:text-fg-quaternary_hover",
+            ].join(" "),
+        },
+        "link-gray": {
+            root: [
+                "justify-normal rounded p-0! text-tertiary hover:text-tertiary_hover",
+                // Inner text underline
+                "*:data-text:underline *:data-text:decoration-transparent *:data-text:underline-offset-2 hover:*:data-text:decoration-current",
+                // Icon styles
+                "*:data-icon:text-fg-quaternary hover:*:data-icon:text-fg-quaternary_hover",
+            ].join(" "),
+        },
+        "link-color": {
+            root: [
+                "justify-normal rounded p-0! text-brand-secondary hover:text-brand-secondary_hover",
+                // Inner text underline
+                "*:data-text:underline *:data-text:decoration-transparent *:data-text:underline-offset-2 hover:*:data-text:decoration-current",
+                // Icon styles
+                "*:data-icon:text-fg-brand-secondary_alt hover:*:data-icon:text-fg-brand-secondary_hover",
+            ].join(" "),
+        },
+        "primary-destructive": {
+            root: [
+                "bg-error-solid text-white shadow-xs-skeumorphic ring-1 ring-transparent outline-error ring-inset hover:bg-error-solid_hover data-loading:bg-error-solid_hover",
+                // Inner border gradient
+                "before:absolute before:inset-px before:border before:border-white/12 before:mask-b-from-0%",
+                // Disabled styles
+                "disabled:bg-disabled disabled:shadow-xs disabled:ring-disabled_subtle",
+                // Icon styles
+                "*:data-icon:text-button-destructive-primary-icon hover:*:data-icon:text-button-destructive-primary-icon_hover",
+            ].join(" "),
+        },
+        "secondary-destructive": {
+            root: [
+                "bg-primary text-error-primary shadow-xs-skeumorphic ring-1 ring-error_subtle outline-error ring-inset hover:bg-error-primary hover:text-error-primary_hover data-loading:bg-error-primary",
+                // Disabled styles
+                "disabled:bg-primary disabled:shadow-xs disabled:ring-disabled_subtle",
+                // Icon styles
+                "*:data-icon:text-fg-error-secondary hover:*:data-icon:text-fg-error-primary",
+            ].join(" "),
+        },
+        "tertiary-destructive": {
+            root: [
+                "text-error-primary outline-error hover:bg-error-primary hover:text-error-primary_hover data-loading:bg-error-primary",
+                // Icon styles
+                "*:data-icon:text-fg-error-secondary hover:*:data-icon:text-fg-error-primary",
+            ].join(" "),
+        },
+        "link-destructive": {
+            root: [
+                "justify-normal rounded p-0! text-error-primary outline-error hover:text-error-primary_hover",
+                // Inner text underline
+                "*:data-text:underline *:data-text:decoration-transparent *:data-text:underline-offset-2 hover:*:data-text:decoration-current",
+                // Icon styles
+                "*:data-icon:text-fg-error-secondary hover:*:data-icon:text-fg-error-primary",
+            ].join(" "),
+        },
+    },
+});
+
+/**
+ * Common props shared between button and anchor variants
+ */
+export interface CommonProps {
+    /** Disables the button and shows a disabled state */
+    isDisabled?: boolean;
+    /** Shows a loading spinner and disables the button */
+    isLoading?: boolean;
+    /** The size variant of the button */
+    size?: keyof typeof styles.sizes;
+    /** The color variant of the button */
+    color?: keyof typeof styles.colors;
+    /** Icon component or element to show before the text */
+    iconLeading?: FC<{ className?: string }> | ReactNode;
+    /** Icon component or element to show after the text */
+    iconTrailing?: FC<{ className?: string }> | ReactNode;
+    /** Removes horizontal padding from the text content */
+    noTextPadding?: boolean;
+    /** When true, keeps the text visible during loading state */
+    showTextWhileLoading?: boolean;
+}
+
+/**
+ * Props for the button variant (non-link)
+ */
+export interface ButtonProps extends CommonProps, DetailedHTMLProps<Omit<ButtonHTMLAttributes<HTMLButtonElement>, "color" | "slot">, HTMLButtonElement> {
+    /** Slot name for react-aria component */
+    slot?: AriaButtonProps["slot"];
+}
+
+/**
+ * Props for the link variant (anchor tag)
+ */
+interface LinkProps extends CommonProps, DetailedHTMLProps<Omit<AnchorHTMLAttributes<HTMLAnchorElement>, "color">, HTMLAnchorElement> {
+    /** Options for the configured client side router. */
+    routerOptions?: AriaLinkProps["routerOptions"];
+}
+
+/** Union type of button and link props */
+export type Props = ButtonProps | LinkProps;
+
+export const Button = ({
+    size = "sm",
+    color = "primary",
+    children,
+    className,
+    noTextPadding,
+    iconLeading: IconLeading,
+    iconTrailing: IconTrailing,
+    isDisabled: disabled,
+    isLoading: loading,
+    showTextWhileLoading,
+    ...otherProps
+}: Props) => {
+    const href = "href" in otherProps ? otherProps.href : undefined;
+    const Component = href ? AriaLink : AriaButton;
+
+    const isIcon = (IconLeading || IconTrailing) && !children;
+    const isLinkType = ["link-gray", "link-color", "link-destructive"].includes(color);
+
+    noTextPadding = isLinkType || noTextPadding;
+
+    let props = {};
+
+    if (href) {
+        props = {
+            ...otherProps,
+
+            href: disabled ? undefined : href,
+        };
+    } else {
+        props = {
+            ...otherProps,
+
+            type: otherProps.type || "button",
+            isPending: loading,
+        };
+    }
+
+    return (
+        <Component
+            data-loading={loading ? true : undefined}
+            data-icon-only={isIcon ? true : undefined}
+            {...props}
+            isDisabled={disabled}
+            className={cx(
+                styles.common.root,
+                styles.sizes[size].root,
+                styles.colors[color].root,
+                isLinkType && styles.sizes[size].linkRoot,
+                (loading || (href && (disabled || loading))) && "pointer-events-none",
+                // If in `loading` state, hide everything except the loading icon (and text if `showTextWhileLoading` is true).
+                loading && (showTextWhileLoading ? "[&>*:not([data-icon=loading]):not([data-text])]:hidden" : "[&>*:not([data-icon=loading])]:invisible"),
+                className,
+            )}
+        >
+            {/* Leading icon */}
+            {isValidElement(IconLeading) && IconLeading}
+            {isReactComponent(IconLeading) && <IconLeading data-icon="leading" className={styles.common.icon} />}
+
+            {loading && (
+                <svg
+                    fill="none"
+                    data-icon="loading"
+                    viewBox="0 0 20 20"
+                    className={cx(styles.common.icon, !showTextWhileLoading && "absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2")}
+                >
+                    {/* Background circle */}
+                    <circle className="stroke-current opacity-30" cx="10" cy="10" r="8" fill="none" strokeWidth="2" />
+                    {/* Spinning circle */}
+                    <circle
+                        className="origin-center animate-spin stroke-current"
+                        cx="10"
+                        cy="10"
+                        r="8"
+                        fill="none"
+                        strokeWidth="2"
+                        strokeDasharray="12.5 50"
+                        strokeLinecap="round"
+                    />
+                </svg>
+            )}
+
+            {children && (
+                <span data-text className={cx("transition-inherit-all", !noTextPadding && "px-0.5")}>
+                    {children}
+                </span>
+            )}
+
+            {/* Trailing icon */}
+            {isValidElement(IconTrailing) && IconTrailing}
+            {isReactComponent(IconTrailing) && <IconTrailing data-icon="trailing" className={styles.common.icon} />}
+        </Component>
+    );
+};
diff --git a/src/components/base/buttons/close-button.tsx b/src/components/base/buttons/close-button.tsx
new file mode 100644
index 0000000..c8f5ade
--- /dev/null
+++ b/src/components/base/buttons/close-button.tsx
@@ -0,0 +1,40 @@
+import { X as CloseIcon } from "@untitledui/icons";
+import { Button as AriaButton, type ButtonProps as AriaButtonProps } from "react-aria-components";
+import { cx } from "@/utils/cx";
+
+const sizes = {
+    xs: { root: "size-7", icon: "size-4" },
+    sm: { root: "size-9", icon: "size-5" },
+    md: { root: "size-10", icon: "size-5" },
+    lg: { root: "size-11", icon: "size-6" },
+};
+
+const themes = {
+    light: "text-fg-quaternary hover:bg-primary_hover hover:text-fg-quaternary_hover focus-visible:outline-2 focus-visible:outline-offset-2 outline-focus-ring",
+    dark: "text-fg-white/70 hover:text-fg-white hover:bg-white/20 focus-visible:outline-2 focus-visible:outline-offset-2 outline-focus-ring",
+};
+
+interface CloseButtonProps extends AriaButtonProps {
+    theme?: "light" | "dark";
+    size?: "xs" | "sm" | "md" | "lg";
+    label?: string;
+}
+
+export const CloseButton = ({ label, className, size = "sm", theme = "light", ...otherProps }: CloseButtonProps) => {
+    return (
+        <AriaButton
+            {...otherProps}
+            aria-label={label || "Close"}
+            className={(state) =>
+                cx(
+                    "flex cursor-pointer items-center justify-center rounded-lg p-2 transition duration-100 ease-linear focus:outline-hidden",
+                    sizes[size].root,
+                    themes[theme],
+                    typeof className === "function" ? className(state) : className,
+                )
+            }
+        >
+            <CloseIcon aria-hidden="true" className={cx("shrink-0 transition-inherit-all", sizes[size].icon)} />
+        </AriaButton>
+    );
+};
diff --git a/src/components/base/buttons/social-button.tsx b/src/components/base/buttons/social-button.tsx
new file mode 100644
index 0000000..b7f8f90
--- /dev/null
+++ b/src/components/base/buttons/social-button.tsx
@@ -0,0 +1,149 @@
+import type { AnchorHTMLAttributes, ButtonHTMLAttributes, DetailedHTMLProps } from "react";
+import type { ButtonProps as AriaButtonProps, LinkProps as AriaLinkProps } from "react-aria-components";
+import { Button as AriaButton, Link as AriaLink } from "react-aria-components";
+import { cx, sortCx } from "@/utils/cx";
+import { AppleLogo, DribbleLogo, FacebookLogo, FigmaLogo, FigmaLogoOutlined, GoogleLogo, TwitterLogo } from "./social-logos";
+
+export const styles = sortCx({
+    common: {
+        root: "group relative inline-flex h-max cursor-pointer items-center justify-center font-semibold whitespace-nowrap outline-focus-ring transition duration-100 ease-linear before:absolute focus-visible:outline-2 focus-visible:outline-offset-2 disabled:cursor-not-allowed disabled:stroke-fg-disabled disabled:text-fg-disabled disabled:*:text-fg-disabled",
+        icon: "pointer-events-none shrink-0 transition-inherit-all",
+    },
+
+    sizes: {
+        sm: {
+            root: "gap-2 rounded-lg px-3 py-2 text-sm before:rounded-[7px] data-icon-only:p-2",
+        },
+        md: {
+            root: "gap-2.5 rounded-lg px-3.5 py-2.5 text-sm before:rounded-[7px] data-icon-only:p-2.5",
+        },
+        lg: {
+            root: "gap-3 rounded-lg px-4 py-2.5 text-md before:rounded-[7px] data-icon-only:p-2.5",
+        },
+        xl: {
+            root: "gap-3.5 rounded-lg px-4.5 py-3 text-md before:rounded-[7px] data-icon-only:p-3.5",
+        },
+        "2xl": {
+            root: "gap-4 rounded-[10px] px-5.5 py-4 text-lg before:rounded-[9px] data-icon-only:p-4",
+        },
+    },
+
+    colors: {
+        gray: {
+            root: "bg-primary text-secondary shadow-xs-skeumorphic ring-1 ring-primary ring-inset hover:bg-primary_hover hover:text-secondary_hover",
+            icon: "text-fg-quaternary group-hover:text-fg-quaternary_hover",
+        },
+        black: {
+            root: "bg-black text-white shadow-xs-skeumorphic ring-1 ring-transparent ring-inset before:absolute before:inset-px before:border before:border-white/12 before:mask-b-from-0%",
+            icon: "",
+        },
+
+        facebook: {
+            root: "bg-[#1877F2] text-white shadow-xs-skeumorphic ring-1 ring-transparent ring-inset before:absolute before:inset-px before:border before:border-white/12 before:mask-b-from-0% hover:bg-[#0C63D4]",
+            icon: "",
+        },
+
+        dribble: {
+            root: "bg-[#EA4C89] text-white shadow-xs-skeumorphic ring-1 ring-transparent ring-inset before:absolute before:inset-px before:border before:border-white/12 before:mask-b-from-0% hover:bg-[#E62872]",
+            icon: "",
+        },
+    },
+});
+
+interface CommonProps {
+    social: "google" | "facebook" | "apple" | "twitter" | "figma" | "dribble";
+    disabled?: boolean;
+    theme?: "brand" | "color" | "gray";
+    size?: keyof typeof styles.sizes;
+}
+
+interface ButtonProps extends CommonProps, DetailedHTMLProps<Omit<ButtonHTMLAttributes<HTMLButtonElement>, "color" | "slot">, HTMLButtonElement> {
+    slot?: AriaButtonProps["slot"];
+}
+
+interface LinkProps extends CommonProps, DetailedHTMLProps<Omit<AnchorHTMLAttributes<HTMLAnchorElement>, "color">, HTMLAnchorElement> {
+    /** Options for the configured client side router. */
+    routerOptions?: AriaLinkProps["routerOptions"];
+}
+
+export type SocialButtonProps = ButtonProps | LinkProps;
+
+export const SocialButton = ({ size = "lg", theme = "brand", social, className, children, disabled, ...otherProps }: SocialButtonProps) => {
+    const href = "href" in otherProps ? otherProps.href : undefined;
+    const Component = href ? AriaLink : AriaButton;
+
+    const isIconOnly = !children;
+
+    const socialToColor = {
+        google: "gray",
+        facebook: "facebook",
+        apple: "black",
+        twitter: "black",
+        figma: "black",
+        dribble: "dribble",
+    } as const;
+
+    const colorStyles = theme === "brand" ? styles.colors[socialToColor[social]] : styles.colors.gray;
+
+    const logos = {
+        google: GoogleLogo,
+        facebook: FacebookLogo,
+        apple: AppleLogo,
+        twitter: TwitterLogo,
+        figma: theme === "gray" ? FigmaLogoOutlined : FigmaLogo,
+        dribble: DribbleLogo,
+    };
+
+    const Logo = logos[social];
+
+    let props = {};
+
+    if (href) {
+        props = {
+            ...otherProps,
+
+            href: disabled ? undefined : href,
+
+            // Since anchor elements do not support the `disabled` attribute and state,
+            // we need to specify `data-rac` and `data-disabled` in order to be able
+            // to use the `disabled:` selector in classes.
+            ...(disabled ? { "data-rac": true, "data-disabled": true } : {}),
+        };
+    } else {
+        props = {
+            ...otherProps,
+
+            type: otherProps.type || "button",
+            isDisabled: disabled,
+        };
+    }
+
+    return (
+        <Component
+            isDisabled={disabled}
+            {...props}
+            data-icon-only={isIconOnly ? true : undefined}
+            className={cx(styles.common.root, styles.sizes[size].root, colorStyles.root, className)}
+        >
+            <Logo
+                className={cx(
+                    styles.common.icon,
+                    theme === "gray"
+                        ? colorStyles.icon
+                        : theme === "brand" && (social === "facebook" || social === "apple" || social === "twitter")
+                          ? "text-white"
+                          : theme === "color" && (social === "apple" || social === "twitter")
+                            ? "text-alpha-black"
+                            : "",
+                )}
+                colorful={
+                    (theme === "brand" && (social === "google" || social === "figma")) ||
+                    (theme === "color" && (social === "google" || social === "facebook" || social === "figma" || social === "dribble")) ||
+                    undefined
+                }
+            />
+
+            {children}
+        </Component>
+    );
+};
diff --git a/src/components/base/buttons/social-logos.tsx b/src/components/base/buttons/social-logos.tsx
new file mode 100644
index 0000000..d9149e9
--- /dev/null
+++ b/src/components/base/buttons/social-logos.tsx
@@ -0,0 +1,113 @@
+import type { SVGProps } from "react";
+
+export const GoogleLogo = ({ colorful, ...props }: SVGProps<SVGSVGElement> & { colorful?: boolean }) => {
+    return (
+        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" {...props}>
+            <path
+                d="M23.766 12.2764C23.766 11.4607 23.6999 10.6406 23.5588 9.83807H12.24V14.4591H18.7217C18.4528 15.9494 17.5885 17.2678 16.323 18.1056V21.1039H20.19C22.4608 19.0139 23.766 15.9274 23.766 12.2764Z"
+                fill={colorful ? "#4285F4" : "currentColor"}
+            />
+            <path
+                d="M12.24 24.0008C15.4764 24.0008 18.2058 22.9382 20.1944 21.1039L16.3274 18.1055C15.2516 18.8375 13.8626 19.252 12.2444 19.252C9.11376 19.252 6.45934 17.1399 5.50693 14.3003H1.51648V17.3912C3.55359 21.4434 7.70278 24.0008 12.24 24.0008Z"
+                fill={colorful ? "#34A853" : "currentColor"}
+            />
+            <path
+                d="M5.50253 14.3003C4.99987 12.8099 4.99987 11.1961 5.50253 9.70575V6.61481H1.51649C-0.18551 10.0056 -0.18551 14.0004 1.51649 17.3912L5.50253 14.3003Z"
+                fill={colorful ? "#FBBC04" : "currentColor"}
+            />
+            <path
+                d="M12.24 4.74966C13.9508 4.7232 15.6043 5.36697 16.8433 6.54867L20.2694 3.12262C18.1 1.0855 15.2207 -0.034466 12.24 0.000808666C7.70277 0.000808666 3.55359 2.55822 1.51648 6.61481L5.50252 9.70575C6.45052 6.86173 9.10935 4.74966 12.24 4.74966Z"
+                fill={colorful ? "#EA4335" : "currentColor"}
+            />
+        </svg>
+    );
+};
+
+export const FigmaLogo = ({ colorful, ...props }: SVGProps<SVGSVGElement> & { colorful?: boolean }) => {
+    return (
+        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" {...props}>
+            <path
+                d="M8.00006 24.0001C10.2081 24.0001 12.0001 22.208 12.0001 20V16H8.00006C5.79205 16 4 17.792 4 20C4 22.208 5.79205 24.0001 8.00006 24.0001Z"
+                fill={colorful ? "#24CB71" : "currentColor"}
+            />
+            <path d="M4 12C4 9.79203 5.79205 8 8.00006 8H12.0001V16H8.00006C5.79205 16.0001 4 14.208 4 12Z" fill={colorful ? "#874FFF" : "currentColor"} />
+            <path
+                d="M4 4.00003C4 1.79203 5.79205 0 8.00006 0H12.0001V7.99997H8.00006C5.79205 7.99997 4 6.20803 4 4.00003Z"
+                fill={colorful ? "#FF3737" : "currentColor"}
+            />
+            <path
+                d="M12 0H16.0001C18.2081 0 20.0001 1.79203 20.0001 4.00003C20.0001 6.20803 18.2081 7.99997 16.0001 7.99997H12V0Z"
+                fill={colorful ? "#FF7237" : "currentColor"}
+            />
+            <path
+                d="M20.0001 12C20.0001 14.208 18.2081 16.0001 16.0001 16.0001C13.792 16.0001 12 14.208 12 12C12 9.79203 13.792 8 16.0001 8C18.2081 8 20.0001 9.79203 20.0001 12Z"
+                fill={colorful ? "#00B6FF" : "currentColor"}
+            />
+        </svg>
+    );
+};
+
+export const FigmaLogoOutlined = (props: SVGProps<SVGSVGElement>) => {
+    return (
+        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" {...props}>
+            <path
+                fillRule="evenodd"
+                clipRule="evenodd"
+                d="M8.25 2C7.51349 2 6.81155 2.28629 6.29747 2.78895C5.78414 3.29087 5.5 3.96677 5.5 4.66667C5.5 5.36657 5.78414 6.04247 6.29747 6.54438C6.81155 7.04705 7.51349 7.33333 8.25 7.33333H11V2H8.25ZM13 2V7.33333H15.75C16.1142 7.33333 16.4744 7.26316 16.8097 7.12736C17.145 6.99157 17.4482 6.79311 17.7025 6.54438C17.9569 6.29571 18.1574 6.00171 18.2938 5.67977C18.4301 5.35788 18.5 5.0137 18.5 4.66667C18.5 4.31964 18.4301 3.97545 18.2938 3.65356C18.1574 3.33162 17.9569 3.03763 17.7025 2.78895C17.4482 2.54022 17.145 2.34177 16.8097 2.20598C16.4744 2.07017 16.1142 2 15.75 2H13ZM18.6884 8.33334C18.8324 8.22191 18.9702 8.10211 19.1008 7.9744C19.5429 7.54211 19.8948 7.02769 20.1353 6.45991C20.3759 5.89208 20.5 5.28266 20.5 4.66667C20.5 4.05067 20.3759 3.44126 20.1353 2.87342C19.8948 2.30564 19.5429 1.79122 19.1008 1.35894C18.6587 0.926696 18.1351 0.584984 17.5605 0.352241C16.9858 0.119512 16.3707 0 15.75 0H8.25C6.99738 0 5.79167 0.486331 4.89923 1.35894C4.00603 2.23228 3.5 3.42165 3.5 4.66667C3.5 5.91169 4.00603 7.10105 4.89923 7.9744C5.03021 8.10247 5.16794 8.22222 5.31158 8.33333C5.16794 8.44445 5.03021 8.5642 4.89923 8.69227C4.00603 9.56562 3.5 10.755 3.5 12C3.5 13.245 4.00603 14.4344 4.89923 15.3077C5.03022 15.4358 5.16795 15.5556 5.31159 15.6667C5.16795 15.7778 5.03022 15.8975 4.89923 16.0256C4.00603 16.899 3.5 18.0883 3.5 19.3333C3.5 20.5784 4.00603 21.7677 4.89923 22.6411C5.79167 23.5137 6.99738 24 8.25 24C9.5026 24 10.7083 23.5137 11.6008 22.6411C12.494 21.7677 13 20.5784 13 19.3333V15.8051C13.2922 16.0089 13.6073 16.1799 13.9395 16.3144C14.5142 16.5472 15.1293 16.6667 15.75 16.6667C16.3707 16.6667 16.9858 16.5472 17.5605 16.3144C18.1351 16.0817 18.6587 15.74 19.1008 15.3077C19.5429 14.8754 19.8948 14.361 20.1353 13.7932C20.3759 13.2254 20.5 12.616 20.5 12C20.5 11.384 20.3759 10.7746 20.1353 10.2068C19.8948 9.63898 19.5429 9.12456 19.1008 8.69227C18.9702 8.56456 18.8324 8.44476 18.6884 8.33334ZM11 14.6667V9.33333H8.25C7.51349 9.33333 6.81155 9.61962 6.29747 10.1223C5.78414 10.6242 5.5 11.3001 5.5 12C5.5 12.6999 5.78414 13.3758 6.29747 13.8777C6.81155 14.3804 7.51349 14.6667 8.25 14.6667H11ZM11 16.6667H8.25C7.51349 16.6667 6.81155 16.953 6.29747 17.4556C5.78414 17.9575 5.5 18.6334 5.5 19.3333C5.5 20.0332 5.78414 20.7091 6.29747 21.2111C6.81155 21.7137 7.51349 22 8.25 22C8.98651 22 9.6884 21.7137 10.2025 21.2111C10.7159 20.7091 11 20.0332 11 19.3333V16.6667ZM15.75 9.33333C15.3858 9.33333 15.0256 9.4035 14.6903 9.53931C14.355 9.6751 14.0518 9.87356 13.7975 10.1223C13.5431 10.371 13.3426 10.665 13.2062 10.9869C13.0699 11.3088 13 11.653 13 12C13 12.347 13.0699 12.6912 13.2062 13.0131C13.3426 13.335 13.5431 13.629 13.7975 13.8777C14.0518 14.1264 14.355 14.3249 14.6903 14.4607C15.0256 14.5965 15.3858 14.6667 15.75 14.6667C16.1142 14.6667 16.4744 14.5965 16.8097 14.4607C17.145 14.3249 17.4482 14.1264 17.7025 13.8777C17.9569 13.629 18.1574 13.335 18.2938 13.0131C18.4301 12.6912 18.5 12.347 18.5 12C18.5 11.653 18.4301 11.3088 18.2938 10.9869C18.1574 10.665 17.9569 10.371 17.7025 10.1223C17.4482 9.87356 17.145 9.6751 16.8097 9.53931C16.4744 9.4035 16.1142 9.33333 15.75 9.33333Z"
+                fill="currentColor"
+            />
+        </svg>
+    );
+};
+
+export const DribbleLogo = ({ colorful, ...props }: SVGProps<SVGSVGElement> & { colorful?: boolean }) => {
+    return (
+        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" {...props}>
+            <path
+                d="M12 23.625C18.4203 23.625 23.625 18.4203 23.625 12C23.625 5.57969 18.4203 0.375 12 0.375C5.57969 0.375 0.375 5.57969 0.375 12C0.375 18.4203 5.57969 23.625 12 23.625Z"
+                fill={colorful ? "#EA4C89" : "none"}
+            />
+            <path
+                fillRule="evenodd"
+                clipRule="evenodd"
+                d="M12 0C5.37527 0 0 5.37527 0 12C0 18.6248 5.37527 24 12 24C18.6117 24 24 18.6248 24 12C24 5.37527 18.6117 0 12 0ZM19.9262 5.53145C21.3579 7.27549 22.217 9.50107 22.243 11.9089C21.9046 11.8439 18.5206 11.154 15.1106 11.5835C15.0325 11.4143 14.9675 11.2321 14.8894 11.0499C14.6811 10.5554 14.4469 10.0477 14.2126 9.56618C17.9869 8.0304 19.705 5.81779 19.9262 5.53145ZM12 1.77007C14.603 1.77007 16.9848 2.74621 18.7939 4.34707C18.6117 4.60738 17.0629 6.67679 13.4186 8.04338C11.7397 4.95878 9.87855 2.43384 9.5922 2.04338C10.3601 1.86117 11.1671 1.77007 12 1.77007ZM7.63995 2.73319C7.91325 3.09761 9.73538 5.63558 11.4404 8.65508C6.65076 9.9306 2.42083 9.90458 1.96529 9.90458C2.62907 6.72885 4.77657 4.08676 7.63995 2.73319ZM1.74404 12.0131C1.74404 11.9089 1.74404 11.8048 1.74404 11.7007C2.18655 11.7136 7.15835 11.7787 12.2733 10.243C12.5727 10.8156 12.846 11.4013 13.1063 11.9869C12.9761 12.026 12.8329 12.0651 12.7028 12.1041C7.41865 13.8091 4.60738 18.4685 4.3731 18.859C2.7462 17.0499 1.74404 14.6421 1.74404 12.0131ZM12 22.256C9.6312 22.256 7.44469 21.449 5.71367 20.0954C5.89588 19.718 7.97827 15.7094 13.757 13.692C13.783 13.679 13.7961 13.679 13.8221 13.666C15.2668 17.4013 15.8525 20.5379 16.0087 21.436C14.7722 21.9696 13.4186 22.256 12 22.256ZM17.7136 20.4989C17.6096 19.8742 17.0629 16.8807 15.7223 13.1974C18.9371 12.6898 21.7484 13.5228 22.0998 13.6399C21.6573 16.4902 20.0173 18.9501 17.7136 20.4989Z"
+                fill={colorful ? "#C32361" : "currentColor"}
+            />
+        </svg>
+    );
+};
+
+export const FacebookLogo = ({ colorful, ...props }: SVGProps<SVGSVGElement> & { colorful?: boolean }) => {
+    return (
+        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" {...props}>
+            <path
+                d="M24 12C24 5.37258 18.6274 0 12 0C5.37258 0 0 5.37258 0 12C0 17.9895 4.3882 22.954 10.125 23.8542V15.4688H7.07812V12H10.125V9.35625C10.125 6.34875 11.9166 4.6875 14.6576 4.6875C15.9701 4.6875 17.3438 4.92188 17.3438 4.92188V7.875H15.8306C14.34 7.875 13.875 8.80008 13.875 9.75V12H17.2031L16.6711 15.4688H13.875V23.8542C19.6118 22.954 24 17.9895 24 12Z"
+                fill={colorful ? "#1877F2" : "currentColor"}
+            />
+        </svg>
+    );
+};
+
+export const AppleLogo = (props: SVGProps<SVGSVGElement>) => {
+    return (
+        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" {...props}>
+            <path
+                d="M20.8426 17.1449C20.5099 17.9135 20.1161 18.6211 19.6598 19.2715C19.0379 20.1583 18.5286 20.7721 18.1362 21.113C17.5278 21.6724 16.876 21.959 16.178 21.9753C15.6769 21.9753 15.0726 21.8327 14.3691 21.5434C13.6634 21.2555 13.0148 21.113 12.4218 21.113C11.7998 21.113 11.1328 21.2555 10.4193 21.5434C9.70475 21.8327 9.1291 21.9834 8.68898 21.9984C8.01963 22.0269 7.35246 21.7322 6.6865 21.113C6.26145 20.7422 5.7298 20.1067 5.09291 19.2063C4.40957 18.2449 3.84778 17.13 3.40766 15.8589C2.9363 14.486 2.70001 13.1565 2.70001 11.8694C2.70001 10.3951 3.01859 9.12345 3.65671 8.05784C4.15821 7.20191 4.82539 6.52672 5.66041 6.03105C6.49543 5.53539 7.39768 5.2828 8.36931 5.26664C8.90096 5.26664 9.59815 5.43109 10.4645 5.75429C11.3285 6.07858 11.8832 6.24303 12.1264 6.24303C12.3083 6.24303 12.9245 6.05074 13.9692 5.66738C14.9571 5.31186 15.7909 5.16466 16.474 5.22264C18.3249 5.37202 19.7155 6.10167 20.6403 7.41619C18.9849 8.4192 18.1661 9.82403 18.1824 11.6262C18.1973 13.03 18.7065 14.1981 19.7074 15.1256C20.1609 15.5561 20.6675 15.8888 21.231 16.1251C21.1088 16.4795 20.9798 16.819 20.8426 17.1449ZM16.5976 0.440369C16.5976 1.54062 16.1956 2.56792 15.3944 3.51878C14.4275 4.64917 13.258 5.30236 11.9898 5.19929C11.9737 5.06729 11.9643 4.92837 11.9643 4.78239C11.9643 3.72615 12.4241 2.59576 13.2407 1.67152C13.6483 1.20356 14.1668 0.814453 14.7955 0.504058C15.4229 0.198295 16.0164 0.0292007 16.5745 0.000244141C16.5908 0.147331 16.5976 0.294426 16.5976 0.440355V0.440369Z"
+                fill="currentColor"
+            />
+        </svg>
+    );
+};
+
+export const TwitterLogo = (props: SVGProps<SVGSVGElement>) => {
+    return (
+        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" {...props}>
+            <path
+                fillRule="evenodd"
+                clipRule="evenodd"
+                d="M15.9455 23L10.396 15.0901L3.44886 23H0.509766L9.09209 13.2311L0.509766 1H8.05571L13.286 8.45502L19.8393 1H22.7784L14.5943 10.3165L23.4914 23H15.9455ZM19.2185 20.77H17.2398L4.71811 3.23H6.6971L11.7121 10.2532L12.5793 11.4719L19.2185 20.77Z"
+                fill="currentColor"
+            />
+        </svg>
+    );
+};
diff --git a/src/components/base/checkbox/checkbox.tsx b/src/components/base/checkbox/checkbox.tsx
new file mode 100644
index 0000000..06e2db9
--- /dev/null
+++ b/src/components/base/checkbox/checkbox.tsx
@@ -0,0 +1,118 @@
+import type { ReactNode, Ref } from "react";
+import { Checkbox as AriaCheckbox, type CheckboxProps as AriaCheckboxProps } from "react-aria-components";
+import { cx } from "@/utils/cx";
+
+export interface CheckboxBaseProps {
+    size?: "sm" | "md";
+    className?: string;
+    isFocusVisible?: boolean;
+    isSelected?: boolean;
+    isDisabled?: boolean;
+    isIndeterminate?: boolean;
+}
+
+export const CheckboxBase = ({ className, isSelected, isDisabled, isIndeterminate, size = "sm", isFocusVisible = false }: CheckboxBaseProps) => {
+    return (
+        <div
+            className={cx(
+                "relative flex size-4 shrink-0 cursor-pointer appearance-none items-center justify-center rounded bg-primary ring-1 ring-primary ring-inset",
+                size === "md" && "size-5 rounded-md",
+                (isSelected || isIndeterminate) && "bg-brand-solid ring-bg-brand-solid",
+                isDisabled && "cursor-not-allowed bg-disabled_subtle ring-disabled",
+                isFocusVisible && "outline-2 outline-offset-2 outline-focus-ring",
+                className,
+            )}
+        >
+            <svg
+                aria-hidden="true"
+                viewBox="0 0 14 14"
+                fill="none"
+                className={cx(
+                    "pointer-events-none absolute h-3 w-2.5 text-fg-white opacity-0 transition-inherit-all",
+                    size === "md" && "size-3.5",
+                    isIndeterminate && "opacity-100",
+                    isDisabled && "text-fg-disabled_subtle",
+                )}
+            >
+                <path d="M2.91675 7H11.0834" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
+            </svg>
+
+            <svg
+                aria-hidden="true"
+                viewBox="0 0 14 14"
+                fill="none"
+                className={cx(
+                    "pointer-events-none absolute size-3 text-fg-white opacity-0 transition-inherit-all",
+                    size === "md" && "size-3.5",
+                    isSelected && !isIndeterminate && "opacity-100",
+                    isDisabled && "text-fg-disabled_subtle",
+                )}
+            >
+                <path d="M11.6666 3.5L5.24992 9.91667L2.33325 7" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
+            </svg>
+        </div>
+    );
+};
+CheckboxBase.displayName = "CheckboxBase";
+
+interface CheckboxProps extends AriaCheckboxProps {
+    ref?: Ref<HTMLLabelElement>;
+    size?: "sm" | "md";
+    label?: ReactNode;
+    hint?: ReactNode;
+}
+
+export const Checkbox = ({ label, hint, size = "sm", className, ...ariaCheckboxProps }: CheckboxProps) => {
+    const sizes = {
+        sm: {
+            root: "gap-2",
+            textWrapper: "",
+            label: "text-sm font-medium",
+            hint: "text-sm",
+        },
+        md: {
+            root: "gap-3",
+            textWrapper: "gap-0.5",
+            label: "text-md font-medium",
+            hint: "text-md",
+        },
+    };
+
+    return (
+        <AriaCheckbox
+            {...ariaCheckboxProps}
+            className={(state) =>
+                cx(
+                    "flex items-start",
+                    state.isDisabled && "cursor-not-allowed",
+                    sizes[size].root,
+                    typeof className === "function" ? className(state) : className,
+                )
+            }
+        >
+            {({ isSelected, isIndeterminate, isDisabled, isFocusVisible }) => (
+                <>
+                    <CheckboxBase
+                        size={size}
+                        isSelected={isSelected}
+                        isIndeterminate={isIndeterminate}
+                        isDisabled={isDisabled}
+                        isFocusVisible={isFocusVisible}
+                        className={label || hint ? "mt-0.5" : ""}
+                    />
+                    {(label || hint) && (
+                        <div className={cx("inline-flex flex-col", sizes[size].textWrapper)}>
+                            {label && <p className={cx("text-secondary select-none", sizes[size].label)}>{label}</p>}
+                            {hint && (
+                                <span className={cx("text-tertiary", sizes[size].hint)} onClick={(event) => event.stopPropagation()}>
+                                    {hint}
+                                </span>
+                            )}
+                        </div>
+                    )}
+                </>
+            )}
+        </AriaCheckbox>
+    );
+};
+Checkbox.displayName = "Checkbox";
diff --git a/src/components/base/dropdown/dropdown.tsx b/src/components/base/dropdown/dropdown.tsx
new file mode 100644
index 0000000..57621d1
--- /dev/null
+++ b/src/components/base/dropdown/dropdown.tsx
@@ -0,0 +1,161 @@
+import type { FC, RefAttributes } from "react";
+import { DotsVertical } from "@untitledui/icons";
+import type {
+    ButtonProps as AriaButtonProps,
+    MenuItemProps as AriaMenuItemProps,
+    MenuProps as AriaMenuProps,
+    PopoverProps as AriaPopoverProps,
+    SeparatorProps as AriaSeparatorProps,
+} from "react-aria-components";
+import {
+    Button as AriaButton,
+    Header as AriaHeader,
+    Menu as AriaMenu,
+    MenuItem as AriaMenuItem,
+    MenuSection as AriaMenuSection,
+    MenuTrigger as AriaMenuTrigger,
+    Popover as AriaPopover,
+    Separator as AriaSeparator,
+} from "react-aria-components";
+import { cx } from "@/utils/cx";
+
+interface DropdownItemProps extends AriaMenuItemProps {
+    /** The label of the item to be displayed. */
+    label?: string;
+    /** An addon to be displayed on the right side of the item. */
+    addon?: string;
+    /** If true, the item will not have any styles. */
+    unstyled?: boolean;
+    /** An icon to be displayed on the left side of the item. */
+    icon?: FC<{ className?: string }>;
+}
+
+const DropdownItem = ({ label, children, addon, icon: Icon, unstyled, ...props }: DropdownItemProps) => {
+    if (unstyled) {
+        return <AriaMenuItem id={label} textValue={label} {...props} />;
+    }
+
+    return (
+        <AriaMenuItem
+            {...props}
+            className={(state) =>
+                cx(
+                    "group block cursor-pointer px-1.5 py-px outline-hidden",
+                    state.isDisabled && "cursor-not-allowed",
+                    typeof props.className === "function" ? props.className(state) : props.className,
+                )
+            }
+        >
+            {(state) => (
+                <div
+                    className={cx(
+                        "relative flex items-center rounded-md px-2.5 py-2 outline-focus-ring transition duration-100 ease-linear",
+                        !state.isDisabled && "group-hover:bg-primary_hover",
+                        state.isFocused && "bg-primary_hover",
+                        state.isFocusVisible && "outline-2 -outline-offset-2",
+                    )}
+                >
+                    {Icon && (
+                        <Icon
+                            aria-hidden="true"
+                            className={cx("mr-2 size-4 shrink-0 stroke-[2.25px]", state.isDisabled ? "text-fg-disabled" : "text-fg-quaternary")}
+                        />
+                    )}
+
+                    <span
+                        className={cx(
+                            "grow truncate text-sm font-semibold",
+                            state.isDisabled ? "text-disabled" : "text-secondary",
+                            state.isFocused && "text-secondary_hover",
+                        )}
+                    >
+                        {label || (typeof children === "function" ? children(state) : children)}
+                    </span>
+
+                    {addon && (
+                        <span
+                            className={cx(
+                                "ml-3 shrink-0 rounded px-1 py-px text-xs font-medium ring-1 ring-secondary ring-inset",
+                                state.isDisabled ? "text-disabled" : "text-quaternary",
+                            )}
+                        >
+                            {addon}
+                        </span>
+                    )}
+                </div>
+            )}
+        </AriaMenuItem>
+    );
+};
+
+interface DropdownMenuProps<T extends object> extends AriaMenuProps<T> {}
+
+const DropdownMenu = <T extends object>(props: DropdownMenuProps<T>) => {
+    return (
+        <AriaMenu
+            disallowEmptySelection
+            selectionMode="single"
+            {...props}
+            className={(state) =>
+                cx("h-min overflow-y-auto py-1 outline-hidden select-none", typeof props.className === "function" ? props.className(state) : props.className)
+            }
+        />
+    );
+};
+
+interface DropdownPopoverProps extends AriaPopoverProps {}
+
+const DropdownPopover = (props: DropdownPopoverProps) => {
+    return (
+        <AriaPopover
+            placement="bottom right"
+            {...props}
+            className={(state) =>
+                cx(
+                    "w-62 origin-(--trigger-anchor-point) overflow-auto rounded-lg bg-primary shadow-lg ring-1 ring-secondary_alt will-change-transform",
+                    state.isEntering &&
+                        "duration-150 ease-out animate-in fade-in placement-right:slide-in-from-left-0.5 placement-top:slide-in-from-bottom-0.5 placement-bottom:slide-in-from-top-0.5",
+                    state.isExiting &&
+                        "duration-100 ease-in animate-out fade-out placement-right:slide-out-to-left-0.5 placement-top:slide-out-to-bottom-0.5 placement-bottom:slide-out-to-top-0.5",
+                    typeof props.className === "function" ? props.className(state) : props.className,
+                )
+            }
+        >
+            {props.children}
+        </AriaPopover>
+    );
+};
+
+const DropdownSeparator = (props: AriaSeparatorProps) => {
+    return <AriaSeparator {...props} className={cx("my-1 h-px w-full bg-border-secondary", props.className)} />;
+};
+
+const DropdownDotsButton = (props: AriaButtonProps & RefAttributes<HTMLButtonElement>) => {
+    return (
+        <AriaButton
+            {...props}
+            aria-label="Open menu"
+            className={(state) =>
+                cx(
+                    "cursor-pointer rounded-md text-fg-quaternary outline-focus-ring transition duration-100 ease-linear",
+                    (state.isPressed || state.isHovered) && "text-fg-quaternary_hover",
+                    (state.isPressed || state.isFocusVisible) && "outline-2 outline-offset-2",
+                    typeof props.className === "function" ? props.className(state) : props.className,
+                )
+            }
+        >
+            <DotsVertical className="size-5 transition-inherit-all" />
+        </AriaButton>
+    );
+};
+
+export const Dropdown = {
+    Root: AriaMenuTrigger,
+    Popover: DropdownPopover,
+    Menu: DropdownMenu,
+    Section: AriaMenuSection,
+    SectionHeader: AriaHeader,
+    Item: DropdownItem,
+    Separator: DropdownSeparator,
+    DotsButton: DropdownDotsButton,
+};
diff --git a/src/components/base/file-upload-trigger/file-upload-trigger.tsx b/src/components/base/file-upload-trigger/file-upload-trigger.tsx
new file mode 100644
index 0000000..7ef6e08
--- /dev/null
+++ b/src/components/base/file-upload-trigger/file-upload-trigger.tsx
@@ -0,0 +1,71 @@
+import type { DetailedReactHTMLElement, HTMLAttributes, ReactNode } from "react";
+import React, { cloneElement, useRef } from "react";
+import { filterDOMProps } from "@react-aria/utils";
+
+interface FileTriggerProps {
+    /**
+     * Specifies what mime type of files are allowed.
+     */
+    acceptedFileTypes?: Array<string>;
+    /**
+     * Whether multiple files can be selected.
+     */
+    allowsMultiple?: boolean;
+    /**
+     * Specifies the use of a media capture mechanism to capture the media on the spot.
+     */
+    defaultCamera?: "user" | "environment";
+    /**
+     * Handler when a user selects a file.
+     */
+    onSelect?: (files: FileList | null) => void;
+    /**
+     * The children of the component.
+     */
+    children: ReactNode;
+    /**
+     * Enables the selection of directories instead of individual files.
+     */
+    acceptDirectory?: boolean;
+}
+
+/**
+ * A FileTrigger allows a user to access the file system with any pressable React Aria or React Spectrum component, or custom components built with usePress.
+ */
+export const FileTrigger = (props: FileTriggerProps) => {
+    const { children, onSelect, acceptedFileTypes, allowsMultiple, defaultCamera, acceptDirectory, ...rest } = props;
+
+    const inputRef = useRef<HTMLInputElement | null>(null);
+    const domProps = filterDOMProps(rest);
+
+    // Make sure that only one child is passed to the component.
+    const clonableElement = React.Children.only(children);
+
+    // Clone the child element and add an `onClick` handler to open the file dialog.
+    const mainElement = cloneElement(clonableElement as DetailedReactHTMLElement<HTMLAttributes<HTMLElement>, HTMLElement>, {
+        onClick: () => {
+            if (inputRef.current?.value) {
+                inputRef.current.value = "";
+            }
+            inputRef.current?.click();
+        },
+    });
+
+    return (
+        <>
+            {mainElement}
+            <input
+                {...domProps}
+                type="file"
+                ref={inputRef}
+                style={{ display: "none" }}
+                accept={acceptedFileTypes?.toString()}
+                onChange={(e) => onSelect?.(e.target.files)}
+                capture={defaultCamera}
+                multiple={allowsMultiple}
+                // @ts-expect-error
+                webkitdirectory={acceptDirectory ? "" : undefined}
+            />
+        </>
+    );
+};
diff --git a/src/components/base/form/form.tsx b/src/components/base/form/form.tsx
new file mode 100644
index 0000000..e0fca24
--- /dev/null
+++ b/src/components/base/form/form.tsx
@@ -0,0 +1,8 @@
+import type { ComponentPropsWithRef } from "react";
+import { Form as AriaForm } from "react-aria-components";
+
+export const Form = (props: ComponentPropsWithRef<typeof AriaForm>) => {
+    return <AriaForm {...props} />;
+};
+
+Form.displayName = "Form";
diff --git a/src/components/base/input/hint-text.tsx b/src/components/base/input/hint-text.tsx
new file mode 100644
index 0000000..b2d1e3e
--- /dev/null
+++ b/src/components/base/input/hint-text.tsx
@@ -0,0 +1,31 @@
+import type { ReactNode, Ref } from "react";
+import type { TextProps as AriaTextProps } from "react-aria-components";
+import { Text as AriaText } from "react-aria-components";
+import { cx } from "@/utils/cx";
+
+interface HintTextProps extends AriaTextProps {
+    /** Indicates that the hint text is an error message. */
+    isInvalid?: boolean;
+    ref?: Ref<HTMLElement>;
+    children: ReactNode;
+}
+
+export const HintText = ({ isInvalid, className, ...props }: HintTextProps) => {
+    return (
+        <AriaText
+            {...props}
+            slot={isInvalid ? "errorMessage" : "description"}
+            className={cx(
+                "text-sm text-tertiary",
+
+                // Invalid state
+                isInvalid && "text-error-primary",
+                "group-invalid:text-error-primary",
+
+                className,
+            )}
+        />
+    );
+};
+
+HintText.displayName = "HintText";
diff --git a/src/components/base/input/input-group.tsx b/src/components/base/input/input-group.tsx
new file mode 100644
index 0000000..09d34df
--- /dev/null
+++ b/src/components/base/input/input-group.tsx
@@ -0,0 +1,131 @@
+import { type HTMLAttributes, type ReactNode } from "react";
+import { HintText } from "@/components/base/input/hint-text";
+import type { InputBaseProps } from "@/components/base/input/input";
+import { TextField } from "@/components/base/input/input";
+import { Label } from "@/components/base/input/label";
+import { cx, sortCx } from "@/utils/cx";
+
+interface InputPrefixProps extends HTMLAttributes<HTMLDivElement> {
+    /** The position of the prefix. */
+    position?: "leading" | "trailing";
+    /** The size of the prefix. */
+    size?: "sm" | "md";
+    /** Indicates that the prefix is disabled. */
+    isDisabled?: boolean;
+}
+
+export const InputPrefix = ({ isDisabled, children, ...props }: InputPrefixProps) => (
+    <span
+        {...props}
+        className={cx(
+            "flex text-md text-tertiary shadow-xs ring-1 ring-border-primary ring-inset",
+            // Styles when the prefix is within an `InputGroup`
+            "in-data-input-wrapper:in-data-leading:-mr-px in-data-input-wrapper:in-data-leading:rounded-l-lg",
+            "in-data-input-wrapper:in-data-trailing:-ml-px in-data-input-wrapper:in-data-trailing:rounded-r-lg",
+            // Size styles based on size when within an `InputGroup`
+            "in-data-input-wrapper:in-data-[input-size=md]:py-2.5 in-data-input-wrapper:in-data-[input-size=md]:pr-3 in-data-input-wrapper:in-data-[input-size=md]:pl-3.5 in-data-input-wrapper:in-data-[input-size=sm]:px-3 in-data-input-wrapper:in-data-[input-size=sm]:py-2",
+            // Disabled styles
+            isDisabled && "border-disabled bg-disabled_subtle text-tertiary",
+            "in-data-input-wrapper:group-disabled:bg-disabled_subtle in-data-input-wrapper:group-disabled:text-disabled in-data-input-wrapper:group-disabled:ring-border-disabled",
+
+            props.className,
+        )}
+    >
+        {children}
+    </span>
+);
+
+// `${string}ClassName` is used to omit any className prop that ends with a `ClassName` suffix
+interface InputGroupProps extends Omit<InputBaseProps, "type" | "icon" | "placeholder" | "tooltip" | "shortcut" | `${string}ClassName`> {
+    /** A prefix text that is displayed in the same box as the input.*/
+    prefix?: string;
+    /** A leading addon that is displayed with visual separation from the input. */
+    leadingAddon?: ReactNode;
+    /** A trailing addon that is displayed with visual separation from the input. */
+    trailingAddon?: ReactNode;
+    /** The class name to apply to the input group. */
+    className?: string;
+    /** The children of the input group (i.e `<InputBase />`) */
+    children: ReactNode;
+}
+
+export const InputGroup = ({ size = "sm", prefix, leadingAddon, trailingAddon, label, hint, children, ...props }: InputGroupProps) => {
+    const hasLeading = !!leadingAddon;
+    const hasTrailing = !!trailingAddon;
+
+    const paddings = sortCx({
+        sm: {
+            input: cx(
+                // Apply padding styles when select element is passed as a child
+                hasLeading && "group-has-[&>select]:px-2.5 group-has-[&>select]:pl-2.5",
+                hasTrailing && (prefix ? "group-has-[&>select]:pr-6 group-has-[&>select]:pl-0" : "group-has-[&>select]:pr-6 group-has-[&>select]:pl-3"),
+            ),
+            leadingText: "pl-3",
+        },
+        md: {
+            input: cx(
+                // Apply padding styles when select element is passed as a child
+                hasLeading && "group-has-[&>select]:px-3 group-has-[&>select]:pl-3",
+                hasTrailing && (prefix ? "group-has-[&>select]:pr-6 group-has-[&>select]:pl-0" : "group-has-[&>select]:pr-6 group-has-[&>select]:pl-3"),
+            ),
+            leadingText: "pl-3.5",
+        },
+    });
+
+    return (
+        <TextField
+            size={size}
+            aria-label={label || undefined}
+            inputClassName={cx(paddings[size].input)}
+            tooltipClassName={cx(hasTrailing && !hasLeading && "group-has-[&>select]:right-0")}
+            wrapperClassName={cx(
+                "z-10",
+                // Apply styles based on the presence of leading or trailing elements
+                hasLeading && "rounded-l-none",
+                hasTrailing && "rounded-r-none",
+                // When select element is passed as a child
+                "group-has-[&>select]:bg-transparent group-has-[&>select]:shadow-none group-has-[&>select]:ring-0 group-has-[&>select]:focus-within:ring-0",
+                // In `Input` component, there is "group-disabled" class so here we need to use "group-disabled:group-has-[&>select]" to avoid conflict
+                "group-disabled:group-has-[&>select]:bg-transparent",
+            )}
+            {...props}
+        >
+            {({ isDisabled, isInvalid, isRequired }) => (
+                <>
+                    {label && <Label isRequired={isRequired}>{label}</Label>}
+
+                    <div
+                        data-input-size={size}
+                        className={cx(
+                            "group relative flex h-max w-full flex-row justify-center rounded-lg bg-primary transition-all duration-100 ease-linear",
+
+                            // Only apply focus ring when child is select and input is focused
+                            "has-[&>select]:shadow-xs has-[&>select]:ring-1 has-[&>select]:ring-border-primary has-[&>select]:ring-inset has-[&>select]:has-[input:focus]:ring-2 has-[&>select]:has-[input:focus]:ring-border-brand",
+
+                            isDisabled && "cursor-not-allowed has-[&>select]:bg-disabled_subtle has-[&>select]:ring-border-disabled",
+                            isInvalid && "has-[&>select]:ring-border-error_subtle has-[&>select]:has-[input:focus]:ring-border-error",
+                        )}
+                    >
+                        {leadingAddon && <section data-leading={hasLeading || undefined}>{leadingAddon}</section>}
+
+                        {prefix && (
+                            <span className={cx("my-auto grow pr-2", paddings[size].leadingText)}>
+                                <p className={cx("text-md text-tertiary", isDisabled && "text-disabled")}>{prefix}</p>
+                            </span>
+                        )}
+
+                        {children}
+
+                        {trailingAddon && <section data-trailing={hasTrailing || undefined}>{trailingAddon}</section>}
+                    </div>
+
+                    {hint && <HintText isInvalid={isInvalid}>{hint}</HintText>}
+                </>
+            )}
+        </TextField>
+    );
+};
+
+InputGroup.Prefix = InputPrefix;
+
+InputGroup.displayName = "InputGroup";
diff --git a/src/components/base/input/input-payment.tsx b/src/components/base/input/input-payment.tsx
new file mode 100644
index 0000000..c57c4d2
--- /dev/null
+++ b/src/components/base/input/input-payment.tsx
@@ -0,0 +1,121 @@
+import { useControlledState } from "@react-stately/utils";
+import { HintText } from "@/components/base/input/hint-text";
+import type { InputBaseProps } from "@/components/base/input/input";
+import { InputBase, TextField } from "@/components/base/input/input";
+import { Label } from "@/components/base/input/label";
+import { AmexIcon, DiscoverIcon, MastercardIcon, UnionPayIcon, VisaIcon } from "@/components/foundations/payment-icons";
+
+const cardTypes = [
+    {
+        name: "Visa",
+        pattern: /^4[0-9]{3,}$/, // Visa card numbers start with 4 and are 13 or 16 digits long
+        card: "visa",
+        icon: VisaIcon,
+    },
+    {
+        name: "MasterCard",
+        pattern: /^5[1-5][0-9]{2,}$/, // MasterCard numbers start with 51-55 and are 16 digits long
+        card: "mastercard",
+        icon: MastercardIcon,
+    },
+    {
+        name: "American Express",
+        pattern: /^3[47][0-9]{2,}$/, // American Express numbers start with 34 or 37 and are 15 digits long
+        card: "amex",
+        icon: AmexIcon,
+    },
+    {
+        name: "Discover",
+        pattern: /^6(?:011|5[0-9]{2}|4[4-9][0-9])[0-9]{12}$/, // Discover card numbers start with 6011 or 65 and are 16 digits long
+        card: "discover",
+        icon: DiscoverIcon,
+    },
+    {
+        name: "UnionPay",
+        pattern: /^(62|88)[0-9]{14,17}$/, // UnionPay card numbers start with 62 or 88 and are between 15-19 digits long
+        card: "unionpay",
+        icon: UnionPayIcon,
+    },
+    {
+        name: "Unknown",
+        pattern: /.*/, // Fallback pattern for unknown cards
+        card: "unknown",
+        icon: MastercardIcon,
+    },
+];
+
+/**
+ * Detect the card type based on the card number.
+ * @param number The card number to detect the type for.
+ * @returns The matching card type object.
+ */
+const detectCardType = (number: string) => {
+    // Remove all spaces
+    const sanitizedNumber = number.replace(/\D/g, "");
+
+    // Find the matching card type
+    const card = cardTypes.find((cardType) => cardType.pattern.test(sanitizedNumber));
+
+    return card || cardTypes[cardTypes.length - 1];
+};
+
+/**
+ * Format the card number in groups of 4 digits (i.e. 1234 5678 9012 3456).
+ */
+export const formatCardNumber = (number: string) => {
+    // Remove non-numeric characters
+    const cleaned = number.replace(/\D/g, "");
+
+    // Format the card number in groups of 4 digits
+    const match = cleaned.match(/\d{1,4}/g);
+
+    if (match) {
+        return match.join(" ");
+    }
+
+    return cleaned;
+};
+
+interface PaymentInputProps extends Omit<InputBaseProps, "icon"> {}
+
+export const PaymentInput = ({ onChange, value, defaultValue, className, maxLength = 19, label, hint, ...props }: PaymentInputProps) => {
+    const [cardNumber, setCardNumber] = useControlledState(value, defaultValue || "", (value) => {
+        // Remove all non-numeric characters
+        value = value.replace(/\D/g, "");
+
+        onChange?.(value || "");
+    });
+
+    const card = detectCardType(cardNumber);
+
+    return (
+        <TextField
+            aria-label={!label ? props?.placeholder : undefined}
+            {...props}
+            className={className}
+            inputMode="numeric"
+            maxLength={maxLength}
+            value={formatCardNumber(cardNumber)}
+            onChange={setCardNumber}
+        >
+            {({ isDisabled, isInvalid, isRequired }) => (
+                <>
+                    {label && <Label isRequired={isRequired}>{label}</Label>}
+
+                    <InputBase
+                        {...props}
+                        isDisabled={isDisabled}
+                        isInvalid={isInvalid}
+                        icon={card.icon}
+                        inputClassName="pl-13"
+                        iconClassName="left-2.5 h-6 w-8.5"
+                    />
+
+                    {hint && <HintText isInvalid={isInvalid}>{hint}</HintText>}
+                </>
+            )}
+        </TextField>
+    );
+};
+
+PaymentInput.displayName = "PaymentInput";
diff --git a/src/components/base/input/input.tsx b/src/components/base/input/input.tsx
new file mode 100644
index 0000000..f567cc9
--- /dev/null
+++ b/src/components/base/input/input.tsx
@@ -0,0 +1,269 @@
+import { type ComponentType, type HTMLAttributes, type ReactNode, type Ref, createContext, useContext } from "react";
+import { HelpCircle, InfoCircle } from "@untitledui/icons";
+import type { InputProps as AriaInputProps, TextFieldProps as AriaTextFieldProps } from "react-aria-components";
+import { Group as AriaGroup, Input as AriaInput, TextField as AriaTextField } from "react-aria-components";
+import { HintText } from "@/components/base/input/hint-text";
+import { Label } from "@/components/base/input/label";
+import { Tooltip, TooltipTrigger } from "@/components/base/tooltip/tooltip";
+import { cx, sortCx } from "@/utils/cx";
+
+export interface InputBaseProps extends TextFieldProps {
+    /** Tooltip message on hover. */
+    tooltip?: string;
+    /**
+     * Input size.
+     * @default "sm"
+     */
+    size?: "sm" | "md";
+    /** Placeholder text. */
+    placeholder?: string;
+    /** Class name for the icon. */
+    iconClassName?: string;
+    /** Class name for the input. */
+    inputClassName?: string;
+    /** Class name for the input wrapper. */
+    wrapperClassName?: string;
+    /** Class name for the tooltip. */
+    tooltipClassName?: string;
+    /** Keyboard shortcut to display. */
+    shortcut?: string | boolean;
+    ref?: Ref<HTMLInputElement>;
+    groupRef?: Ref<HTMLDivElement>;
+    /** Icon component to display on the left side of the input. */
+    icon?: ComponentType<HTMLAttributes<HTMLOrSVGElement>>;
+}
+
+export const InputBase = ({
+    ref,
+    tooltip,
+    shortcut,
+    groupRef,
+    size = "sm",
+    isInvalid,
+    isDisabled,
+    icon: Icon,
+    placeholder,
+    wrapperClassName,
+    tooltipClassName,
+    inputClassName,
+    iconClassName,
+    // Omit this prop to avoid invalid HTML attribute warning
+    isRequired: _isRequired,
+    ...inputProps
+}: Omit<InputBaseProps, "label" | "hint">) => {
+    // Check if the input has a leading icon or tooltip
+    const hasTrailingIcon = tooltip || isInvalid;
+    const hasLeadingIcon = Icon;
+
+    // If the input is inside a `TextFieldContext`, use its context to simplify applying styles
+    const context = useContext(TextFieldContext);
+
+    const inputSize = context?.size || size;
+
+    const sizes = sortCx({
+        sm: {
+            root: cx("px-3 py-2", hasTrailingIcon && "pr-9", hasLeadingIcon && "pl-10"),
+            iconLeading: "left-3",
+            iconTrailing: "right-3",
+            shortcut: "pr-2.5",
+        },
+        md: {
+            root: cx("px-3.5 py-2.5", hasTrailingIcon && "pr-9.5", hasLeadingIcon && "pl-10.5"),
+            iconLeading: "left-3.5",
+            iconTrailing: "right-3.5",
+            shortcut: "pr-3",
+        },
+    });
+
+    return (
+        <AriaGroup
+            {...{ isDisabled, isInvalid }}
+            ref={groupRef}
+            className={({ isFocusWithin, isDisabled, isInvalid }) =>
+                cx(
+                    "relative flex w-full flex-row place-content-center place-items-center rounded-lg bg-primary shadow-xs ring-1 ring-primary transition-shadow duration-100 ease-linear ring-inset",
+
+                    isFocusWithin && !isDisabled && "ring-2 ring-brand",
+
+                    // Disabled state styles
+                    isDisabled && "cursor-not-allowed bg-disabled_subtle ring-disabled",
+                    "group-disabled:cursor-not-allowed group-disabled:bg-disabled_subtle group-disabled:ring-disabled",
+
+                    // Invalid state styles
+                    isInvalid && "ring-error_subtle",
+                    "group-invalid:ring-error_subtle",
+
+                    // Invalid state with focus-within styles
+                    isInvalid && isFocusWithin && "ring-2 ring-error",
+                    isFocusWithin && "group-invalid:ring-2 group-invalid:ring-error",
+
+                    context?.wrapperClassName,
+                    wrapperClassName,
+                )
+            }
+        >
+            {/* Leading icon and Payment icon */}
+            {Icon && (
+                <Icon
+                    className={cx(
+                        "pointer-events-none absolute size-5 text-fg-quaternary",
+                        isDisabled && "text-fg-disabled",
+                        sizes[inputSize].iconLeading,
+                        context?.iconClassName,
+                        iconClassName,
+                    )}
+                />
+            )}
+
+            {/* Input field */}
+            <AriaInput
+                {...(inputProps as AriaInputProps)}
+                ref={ref}
+                placeholder={placeholder}
+                className={cx(
+                    "m-0 w-full bg-transparent text-md text-primary ring-0 outline-hidden placeholder:text-placeholder autofill:rounded-lg autofill:text-primary",
+                    isDisabled && "cursor-not-allowed text-disabled",
+                    sizes[inputSize].root,
+                    context?.inputClassName,
+                    inputClassName,
+                )}
+            />
+
+            {/* Tooltip and help icon */}
+            {tooltip && !isInvalid && (
+                <Tooltip title={tooltip} placement="top">
+                    <TooltipTrigger
+                        className={cx(
+                            "absolute cursor-pointer text-fg-quaternary transition duration-200 hover:text-fg-quaternary_hover focus:text-fg-quaternary_hover",
+                            sizes[inputSize].iconTrailing,
+                            context?.tooltipClassName,
+                            tooltipClassName,
+                        )}
+                    >
+                        <HelpCircle className="size-4" />
+                    </TooltipTrigger>
+                </Tooltip>
+            )}
+
+            {/* Invalid icon */}
+            {isInvalid && (
+                <InfoCircle
+                    className={cx(
+                        "pointer-events-none absolute size-4 text-fg-error-secondary",
+                        sizes[inputSize].iconTrailing,
+                        context?.tooltipClassName,
+                        tooltipClassName,
+                    )}
+                />
+            )}
+
+            {/* Shortcut */}
+            {shortcut && (
+                <div
+                    className={cx(
+                        "pointer-events-none absolute inset-y-0.5 right-0.5 z-10 flex items-center rounded-r-[inherit] bg-linear-to-r from-transparent to-bg-primary to-40% pl-8",
+                        sizes[inputSize].shortcut,
+                    )}
+                >
+                    <span
+                        className={cx(
+                            "pointer-events-none rounded px-1 py-px text-xs font-medium text-quaternary ring-1 ring-secondary select-none ring-inset",
+                            isDisabled && "bg-transparent text-disabled",
+                        )}
+                        aria-hidden="true"
+                    >
+                        {typeof shortcut === "string" ? shortcut : "⌘K"}
+                    </span>
+                </div>
+            )}
+        </AriaGroup>
+    );
+};
+
+InputBase.displayName = "InputBase";
+
+interface BaseProps {
+    /** Label text for the input */
+    label?: string;
+    /** Helper text displayed below the input */
+    hint?: ReactNode;
+}
+
+interface TextFieldProps
+    extends BaseProps,
+        AriaTextFieldProps,
+        Pick<InputBaseProps, "size" | "wrapperClassName" | "inputClassName" | "iconClassName" | "tooltipClassName"> {
+    ref?: Ref<HTMLDivElement>;
+}
+
+const TextFieldContext = createContext<TextFieldProps>({});
+
+export const TextField = ({ className, ...props }: TextFieldProps) => {
+    return (
+        <TextFieldContext.Provider value={props}>
+            <AriaTextField
+                {...props}
+                data-input-wrapper
+                className={(state) =>
+                    cx("group flex h-max w-full flex-col items-start justify-start gap-1.5", typeof className === "function" ? className(state) : className)
+                }
+            />
+        </TextFieldContext.Provider>
+    );
+};
+
+TextField.displayName = "TextField";
+
+interface InputProps extends InputBaseProps, BaseProps {
+    /** Whether to hide required indicator from label */
+    hideRequiredIndicator?: boolean;
+}
+
+export const Input = ({
+    size = "sm",
+    placeholder,
+    icon: Icon,
+    label,
+    hint,
+    shortcut,
+    hideRequiredIndicator,
+    className,
+    ref,
+    groupRef,
+    tooltip,
+    iconClassName,
+    inputClassName,
+    wrapperClassName,
+    tooltipClassName,
+    ...props
+}: InputProps) => {
+    return (
+        <TextField aria-label={!label ? placeholder : undefined} {...props} className={className}>
+            {({ isRequired, isInvalid }) => (
+                <>
+                    {label && <Label isRequired={hideRequiredIndicator ? !hideRequiredIndicator : isRequired}>{label}</Label>}
+
+                    <InputBase
+                        {...{
+                            ref,
+                            groupRef,
+                            size,
+                            placeholder,
+                            icon: Icon,
+                            shortcut,
+                            iconClassName,
+                            inputClassName,
+                            wrapperClassName,
+                            tooltipClassName,
+                            tooltip,
+                        }}
+                    />
+
+                    {hint && <HintText isInvalid={isInvalid}>{hint}</HintText>}
+                </>
+            )}
+        </TextField>
+    );
+};
+
+Input.displayName = "Input";
diff --git a/src/components/base/input/label.tsx b/src/components/base/input/label.tsx
new file mode 100644
index 0000000..5e2fb55
--- /dev/null
+++ b/src/components/base/input/label.tsx
@@ -0,0 +1,48 @@
+import type { ReactNode, Ref } from "react";
+import { HelpCircle } from "@untitledui/icons";
+import type { LabelProps as AriaLabelProps } from "react-aria-components";
+import { Label as AriaLabel } from "react-aria-components";
+import { Tooltip, TooltipTrigger } from "@/components/base/tooltip/tooltip";
+import { cx } from "@/utils/cx";
+
+interface LabelProps extends AriaLabelProps {
+    children: ReactNode;
+    isRequired?: boolean;
+    tooltip?: string;
+    tooltipDescription?: string;
+    ref?: Ref<HTMLLabelElement>;
+}
+
+export const Label = ({ isRequired, tooltip, tooltipDescription, className, ...props }: LabelProps) => {
+    return (
+        <AriaLabel
+            // Used for conditionally hiding/showing the label element via CSS:
+            // <Input label="Visible only on mobile" className="lg:**:data-label:hidden" />
+            // or
+            // <Input label="Visible only on mobile" className="lg:label:hidden" />
+            data-label="true"
+            {...props}
+            className={cx("flex cursor-default items-center gap-0.5 text-sm font-medium text-secondary", className)}
+        >
+            {props.children}
+
+            <span className={cx("hidden text-brand-tertiary", isRequired && "block", typeof isRequired === "undefined" && "group-required:block")}>*</span>
+
+            {tooltip && (
+                <Tooltip title={tooltip} description={tooltipDescription} placement="top">
+                    <TooltipTrigger
+                        // `TooltipTrigger` inherits the disabled state from the parent form field
+                        // but we don't that. We want the tooltip be enabled even if the parent
+                        // field is disabled.
+                        isDisabled={false}
+                        className="cursor-pointer text-fg-quaternary transition duration-200 hover:text-fg-quaternary_hover focus:text-fg-quaternary_hover"
+                    >
+                        <HelpCircle className="size-4" />
+                    </TooltipTrigger>
+                </Tooltip>
+            )}
+        </AriaLabel>
+    );
+};
+
+Label.displayName = "Label";
diff --git a/src/components/base/pin-input/pin-input.tsx b/src/components/base/pin-input/pin-input.tsx
new file mode 100644
index 0000000..ff68188
--- /dev/null
+++ b/src/components/base/pin-input/pin-input.tsx
@@ -0,0 +1,152 @@
+import type { ComponentPropsWithRef } from "react";
+import { createContext, useContext, useId } from "react";
+import { OTPInput, OTPInputContext } from "input-otp";
+import { cx } from "@/utils/cx";
+
+type PinInputContextType = {
+    size: "sm" | "md" | "lg";
+    disabled: boolean;
+    id: string;
+};
+
+const PinInputContext = createContext<PinInputContextType>({
+    size: "sm",
+    id: "",
+    disabled: false,
+});
+
+export const usePinInputContext = () => {
+    const context = useContext(PinInputContext);
+
+    if (!context) {
+        throw new Error("The 'usePinInputContext' hook must be used within a '<PinInput />'");
+    }
+
+    return context;
+};
+
+interface RootProps extends ComponentPropsWithRef<"div"> {
+    size?: "sm" | "md" | "lg";
+    disabled?: boolean;
+}
+
+const Root = ({ className, size = "md", disabled = false, ...props }: RootProps) => {
+    const id = useId();
+
+    return (
+        <PinInputContext.Provider value={{ size, disabled, id }}>
+            <div role="group" className={cx("flex h-max flex-col gap-1.5", className)} {...props} />
+        </PinInputContext.Provider>
+    );
+};
+Root.displayName = "Root";
+
+type GroupProps = ComponentPropsWithRef<typeof OTPInput> & {
+    width?: number;
+    inputClassName?: string;
+};
+
+const Group = ({ inputClassName, containerClassName, width, maxLength = 4, ...props }: GroupProps) => {
+    const { id, size, disabled } = usePinInputContext();
+
+    const heights = {
+        sm: "h-16.5",
+        md: "h-20.5",
+        lg: "h-24.5",
+    };
+
+    return (
+        <OTPInput
+            {...props}
+            size={width}
+            maxLength={maxLength}
+            disabled={disabled}
+            id={"pin-input-" + id}
+            aria-label="Enter your pin"
+            aria-labelledby={"pin-input-label-" + id}
+            aria-describedby={"pin-input-description-" + id}
+            containerClassName={cx("flex flex-row gap-3", size === "sm" && "gap-2", heights[size], containerClassName)}
+            className={cx("w-full! disabled:cursor-not-allowed", inputClassName)}
+        />
+    );
+};
+Group.displayName = "Group";
+
+const sizes = {
+    sm: "size-16 px-2 py-0.5 text-display-lg font-medium",
+    md: "size-20 px-2 py-2.5 text-display-lg font-medium",
+    lg: "size-24 px-2 py-3 text-display-xl font-medium",
+};
+
+const Slot = ({ index, className, ...props }: ComponentPropsWithRef<"div"> & { index: number }) => {
+    const { size, disabled } = usePinInputContext();
+    const { slots, isFocused } = useContext(OTPInputContext);
+    const slot = slots[index];
+
+    return (
+        <div
+            {...props}
+            aria-label={"Enter digit " + (index + 1) + " of " + slots.length}
+            className={cx(
+                "relative flex items-center justify-center rounded-xl bg-primary text-center text-placeholder_subtle shadow-xs ring-1 ring-primary transition-[box-shadow,background-color] duration-100 ease-linear ring-inset",
+                sizes[size],
+                isFocused && slot?.isActive && "ring-2 ring-brand outline-2 outline-offset-2 outline-brand",
+                slot?.char && "text-brand-tertiary_alt ring-2 ring-brand",
+                disabled && "bg-disabled_subtle text-fg-disabled_subtle ring-disabled",
+                className,
+            )}
+        >
+            {slot?.char ? slot.char : slot?.hasFakeCaret ? <FakeCaret size={size} /> : 0}
+        </div>
+    );
+};
+Slot.displayName = "Slot";
+
+const FakeCaret = ({ size = "md" }: { size?: "sm" | "md" | "lg" }) => {
+    return (
+        <div
+            className={cx(
+                "pointer-events-none h-[1em] w-0.5 animate-caret-blink bg-fg-brand-primary",
+                size === "lg" ? "text-display-xl font-medium" : "text-display-lg font-medium",
+            )}
+        />
+    );
+};
+
+const Separator = (props: ComponentPropsWithRef<"p">) => {
+    return (
+        <div role="separator" {...props} className={cx("text-center text-display-xl font-medium text-placeholder_subtle", props.className)}>
+            -
+        </div>
+    );
+};
+Separator.displayName = "Separator";
+
+const Label = ({ className, ...props }: ComponentPropsWithRef<"label">) => {
+    const { id } = usePinInputContext();
+
+    return <label {...props} htmlFor={"pin-input-" + id} id={"pin-input-label-" + id} className={cx("text-sm font-medium text-secondary", className)} />;
+};
+Label.displayName = "Label";
+
+const Description = ({ className, ...props }: ComponentPropsWithRef<"p">) => {
+    const { id } = usePinInputContext();
+
+    return <p {...props} id={"pin-input-description-" + id} role="description" className={cx("text-sm text-tertiary", className)} />;
+};
+Description.displayName = "Description";
+
+const PinInput = Root as typeof Root & {
+    Slot: typeof Slot;
+    Label: typeof Label;
+    Group: typeof Group;
+    Separator: typeof Separator;
+    Description: typeof Description;
+};
+PinInput.Slot = Slot;
+PinInput.Label = Label;
+PinInput.Group = Group;
+PinInput.Separator = Separator;
+PinInput.Description = Description;
+
+export { PinInput };
diff --git a/src/components/base/progress-indicators/progress-circles.tsx b/src/components/base/progress-indicators/progress-circles.tsx
new file mode 100644
index 0000000..66fb1e6
--- /dev/null
+++ b/src/components/base/progress-indicators/progress-circles.tsx
@@ -0,0 +1,174 @@
+import { cx as clx, sortCx } from "@/utils/cx";
+
+interface ProgressBarProps {
+    value: number;
+    min?: number;
+    max?: number;
+    size: "xxs" | "xs" | "sm" | "md" | "lg";
+    label?: string;
+    valueFormatter?: (value: number, valueInPercentage: number) => string | number;
+}
+
+const sizes = sortCx({
+    xxs: {
+        strokeWidth: 6,
+        radius: 29,
+        valueClass: "text-sm font-semibold text-primary",
+        labelClass: "text-xs font-medium text-tertiary",
+        halfCircleTextPosition: "absolute bottom-0.5 text-center",
+    },
+    xs: {
+        strokeWidth: 16,
+        radius: 72,
+        valueClass: "text-display-xs font-semibold text-primary",
+        labelClass: "text-xs font-medium text-tertiary",
+        halfCircleTextPosition: "absolute bottom-0.5 text-center",
+    },
+    sm: {
+        strokeWidth: 20,
+        radius: 90,
+        valueClass: "text-display-sm font-semibold text-primary",
+        labelClass: "text-xs font-medium text-tertiary",
+        halfCircleTextPosition: "absolute bottom-1 text-center",
+    },
+    md: {
+        strokeWidth: 24,
+        radius: 108,
+        valueClass: "text-display-md font-semibold text-primary",
+        labelClass: "text-sm font-medium text-tertiary",
+        halfCircleTextPosition: "absolute bottom-1 text-center",
+    },
+    lg: {
+        strokeWidth: 28,
+        radius: 126,
+        valueClass: "text-display-lg font-semibold text-primary",
+        labelClass: "text-sm font-medium text-tertiary",
+        halfCircleTextPosition: "absolute bottom-0 text-center",
+    },
+});
+
+export const ProgressBarCircle = ({ value, min = 0, max = 100, size, label, valueFormatter }: ProgressBarProps) => {
+    const percentage = Math.round(((value - min) * 100) / (max - min));
+
+    const sizeConfig = sizes[size];
+
+    const { strokeWidth, radius, valueClass, labelClass } = sizeConfig;
+
+    const diameter = 2 * (radius + strokeWidth / 2);
+    const width = diameter;
+    const height = diameter;
+    const viewBox = `0 0 ${width} ${height}`;
+    const cx = diameter / 2;
+    const cy = diameter / 2;
+
+    const textPosition = label ? "absolute text-center" : "absolute text-primary";
+    const strokeDashoffset = 100 - percentage;
+
+    return (
+        <div className="flex flex-col items-center gap-0.5">
+            <div role="progressbar" aria-valuenow={value} aria-valuemin={min} aria-valuemax={max} className="relative flex w-max items-center justify-center">
+                <svg className="-rotate-90" width={width} height={height} viewBox={viewBox}>
+                    {/* Background circle */}
+                    <circle
+                        className="stroke-bg-quaternary"
+                        cx={cx}
+                        cy={cy}
+                        r={radius}
+                        fill="none"
+                        strokeWidth={strokeWidth}
+                        pathLength="100"
+                        strokeDasharray="100"
+                        strokeLinecap="round"
+                    />
+
+                    {/* Foreground circle */}
+                    <circle
+                        className="stroke-fg-brand-primary"
+                        cx={cx}
+                        cy={cy}
+                        r={radius}
+                        fill="none"
+                        strokeWidth={strokeWidth}
+                        pathLength="100"
+                        strokeDasharray="100"
+                        strokeLinecap="round"
+                        strokeDashoffset={strokeDashoffset}
+                    />
+                </svg>
+                {label && size !== "xxs" ? (
+                    <div className="absolute text-center">
+                        <div className={labelClass}>{label}</div>
+                        <div className={valueClass}>{valueFormatter ? valueFormatter(value, percentage) : `${percentage}%`}</div>
+                    </div>
+                ) : (
+                    <span className={clx(textPosition, valueClass)}>{valueFormatter ? valueFormatter(value, percentage) : `${percentage}%`}</span>
+                )}
+            </div>
+
+            {label && size === "xxs" && <div className={labelClass}>{label}</div>}
+        </div>
+    );
+};
+
+export const ProgressBarHalfCircle = ({ value, min = 0, max = 100, size, label, valueFormatter }: ProgressBarProps) => {
+    const percentage = Math.round(((value - min) * 100) / (max - min));
+
+    const sizeConfig = sizes[size];
+
+    const { strokeWidth, radius, valueClass, labelClass, halfCircleTextPosition } = sizeConfig;
+
+    const width = 2 * (radius + strokeWidth / 2);
+    const height = radius + strokeWidth;
+    const viewBox = `0 0 ${width} ${height}`;
+    const cx = "50%";
+    const cy = radius + strokeWidth / 2;
+
+    const strokeDashoffset = -50 - (100 - percentage) / 2;
+
+    return (
+        <div className="flex flex-col items-center gap-0.5">
+            <div role="progressbar" aria-valuenow={value} aria-valuemin={min} aria-valuemax={max} className="relative flex w-max items-center justify-center">
+                <svg width={width} height={height} viewBox={viewBox}>
+                    {/* Background half-circle */}
+                    <circle
+                        className="stroke-bg-quaternary"
+                        cx={cx}
+                        cy={cy}
+                        r={radius}
+                        fill="none"
+                        strokeWidth={strokeWidth}
+                        pathLength="100"
+                        strokeDasharray="100"
+                        strokeDashoffset="-50"
+                        strokeLinecap="round"
+                    />
+
+                    {/* Foreground half-circle */}
+                    <circle
+                        className="origin-center -scale-x-100 stroke-fg-brand-primary"
+                        cx={cx}
+                        cy={cy}
+                        r={radius}
+                        fill="none"
+                        strokeWidth={strokeWidth}
+                        pathLength="100"
+                        strokeDasharray="100"
+                        strokeDashoffset={strokeDashoffset}
+                        strokeLinecap="round"
+                    />
+                </svg>
+
+                {label && size !== "xxs" ? (
+                    <div className={halfCircleTextPosition}>
+                        <div className={labelClass}>{label}</div>
+                        <div className={valueClass}>{valueFormatter ? valueFormatter(value, percentage) : `${percentage}%`}</div>
+                    </div>
+                ) : (
+                    <span className={clx(halfCircleTextPosition, valueClass)}>{valueFormatter ? valueFormatter(value, percentage) : `${percentage}%`}</span>
+                )}
+            </div>
+
+            {label && size === "xxs" && <div className={labelClass}>{label}</div>}
+        </div>
+    );
+};
diff --git a/src/components/base/progress-indicators/progress-indicators.tsx b/src/components/base/progress-indicators/progress-indicators.tsx
new file mode 100644
index 0000000..4905495
--- /dev/null
+++ b/src/components/base/progress-indicators/progress-indicators.tsx
@@ -0,0 +1,121 @@
+import { cx } from "@/utils/cx";
+
+export interface ProgressBarProps {
+    /**
+     * The current value of the progress bar.
+     */
+    value: number;
+    /**
+     * The minimum value of the progress bar.
+     * @default 0
+     */
+    min?: number;
+    /**
+     * The maximum value of the progress bar.
+     * @default 100
+     */
+    max?: number;
+    /**
+     * Optional additional CSS class names for the progress bar container.
+     */
+    className?: string;
+    /**
+     * Optional additional CSS class names for the progress bar indicator element.
+     */
+    progressClassName?: string;
+    /**
+     * Optional function to format the displayed value.
+     * It receives the raw value and the calculated percentage.
+     */
+    valueFormatter?: (value: number, valueInPercentage: number) => string | number;
+}
+
+/**
+ * A basic progress bar component.
+ */
+export const ProgressBarBase = ({ value, min = 0, max = 100, className, progressClassName }: ProgressBarProps) => {
+    const percentage = ((value - min) * 100) / (max - min);
+
+    return (
+        <div
+            role="progressbar"
+            aria-valuenow={value}
+            aria-valuemin={min}
+            aria-valuemax={max}
+            className={cx("h-2 w-full overflow-hidden rounded-md bg-quaternary", className)}
+        >
+            <div
+                // Use transform instead of width to avoid layout thrashing (and for smoother animation)
+                style={{ transform: `translateX(-${100 - percentage}%)` }}
+                className={cx("size-full rounded-md bg-fg-brand-primary transition duration-75 ease-linear", progressClassName)}
+            />
+        </div>
+    );
+};
+
+type ProgressBarLabelPosition = "right" | "bottom" | "top-floating" | "bottom-floating";
+
+export interface ProgressIndicatorWithTextProps extends ProgressBarProps {
+    /**
+     * Specifies the layout of the text relative to the progress bar.
+     * - `right`: Text is displayed to the right of the progress bar.
+     * - `bottom`: Text is displayed below the progress bar, aligned to the right.
+     * - `top-floating`: Text is displayed in a floating tooltip above the progress indicator.
+     * - `bottom-floating`: Text is displayed in a floating tooltip below the progress indicator.
+     */
+    labelPosition?: ProgressBarLabelPosition;
+}
+
+/**
+ * A progress bar component that displays the value text in various configurable layouts.
+ */
+export const ProgressBar = ({ value, min = 0, max = 100, valueFormatter, labelPosition, className, progressClassName }: ProgressIndicatorWithTextProps) => {
+    const percentage = ((value - min) * 100) / (max - min);
+    const formattedValue = valueFormatter ? valueFormatter(value, percentage) : `${percentage.toFixed(0)}%`; // Default to rounded percentage
+
+    const baseProgressBar = <ProgressBarBase min={min} max={max} value={value} className={className} progressClassName={progressClassName} />;
+
+    switch (labelPosition) {
+        case "right":
+            return (
+                <div className="flex items-center gap-3">
+                    {baseProgressBar}
+                    <span className="shrink-0 text-sm font-medium text-secondary tabular-nums">{formattedValue}</span>
+                </div>
+            );
+        case "bottom":
+            return (
+                <div className="flex flex-col items-end gap-2">
+                    {baseProgressBar}
+                    <span className="text-sm font-medium text-secondary tabular-nums">{formattedValue}</span>
+                </div>
+            );
+        case "top-floating":
+            return (
+                <div className="relative flex flex-col items-end gap-2">
+                    {baseProgressBar}
+                    <div
+                        style={{ left: `${percentage}%` }}
+                        className="absolute -top-2 -translate-x-1/2 -translate-y-full rounded-lg bg-primary_alt px-3 py-2 shadow-lg ring-1 ring-secondary_alt"
+                    >
+                        <div className="text-xs font-semibold text-secondary tabular-nums">{formattedValue}</div>
+                    </div>
+                </div>
+            );
+        case "bottom-floating":
+            return (
+                <div className="relative flex flex-col items-end gap-2">
+                    {baseProgressBar}
+                    <div
+                        style={{ left: `${percentage}%` }}
+                        className="absolute -bottom-2 -translate-x-1/2 translate-y-full rounded-lg bg-primary_alt px-3 py-2 shadow-lg ring-1 ring-secondary_alt"
+                    >
+                        <div className="text-xs font-semibold text-secondary">{formattedValue}</div>
+                    </div>
+                </div>
+            );
+        default:
+            // Fallback or default case, could render the basic progress bar or throw an error
+            return baseProgressBar;
+    }
+};
diff --git a/src/components/base/progress-indicators/simple-circle.tsx b/src/components/base/progress-indicators/simple-circle.tsx
new file mode 100644
index 0000000..73c5931
--- /dev/null
+++ b/src/components/base/progress-indicators/simple-circle.tsx
@@ -0,0 +1,27 @@
+export const CircleProgressBar = (props: { value: number; min?: 0; max?: 100 }) => {
+    const { value, min = 0, max = 100 } = props;
+    const percentage = ((value - min) * 100) / (max - min);
+
+    return (
+        <div role="progressbar" aria-valuenow={value} aria-valuemin={min} aria-valuemax={max} className="relative flex w-max items-center justify-center">
+            <span className="absolute text-sm font-medium text-primary">{percentage}%</span>
+            <svg className="size-16 -rotate-90" viewBox="0 0 60 60">
+                <circle className="stroke-bg-quaternary" cx="30" cy="30" r="26" fill="none" strokeWidth="6" />
+                <circle
+                    className="stroke-fg-brand-primary"
+                    style={{
+                        strokeDashoffset: `calc(100 - ${percentage})`,
+                    }}
+                    cx="30"
+                    cy="30"
+                    r="26"
+                    fill="none"
+                    strokeWidth="6"
+                    strokeDasharray="100"
+                    pathLength="100"
+                    strokeLinecap="round"
+                />
+            </svg>
+        </div>
+    );
+};
diff --git a/src/components/base/radio-buttons/radio-buttons.tsx b/src/components/base/radio-buttons/radio-buttons.tsx
new file mode 100644
index 0000000..d19ee14
--- /dev/null
+++ b/src/components/base/radio-buttons/radio-buttons.tsx
@@ -0,0 +1,127 @@
+import { type ReactNode, type Ref, createContext, useContext } from "react";
+import {
+    Radio as AriaRadio,
+    RadioGroup as AriaRadioGroup,
+    type RadioGroupProps as AriaRadioGroupProps,
+    type RadioProps as AriaRadioProps,
+} from "react-aria-components";
+import { cx } from "@/utils/cx";
+
+export interface RadioGroupContextType {
+    size?: "sm" | "md";
+}
+
+const RadioGroupContext = createContext<RadioGroupContextType | null>(null);
+
+export interface RadioButtonBaseProps {
+    size?: "sm" | "md";
+    className?: string;
+    isFocusVisible?: boolean;
+    isSelected?: boolean;
+    isDisabled?: boolean;
+}
+
+export const RadioButtonBase = ({ className, isFocusVisible, isSelected, isDisabled, size = "sm" }: RadioButtonBaseProps) => {
+    return (
+        <div
+            className={cx(
+                "flex size-4 min-h-4 min-w-4 cursor-pointer appearance-none items-center justify-center rounded-full bg-primary ring-1 ring-primary ring-inset",
+                size === "md" && "size-5 min-h-5 min-w-5",
+                isSelected && !isDisabled && "bg-brand-solid ring-bg-brand-solid",
+                isDisabled && "cursor-not-allowed border-disabled bg-disabled_subtle",
+                isFocusVisible && "outline-2 outline-offset-2 outline-focus-ring",
+                className,
+            )}
+        >
+            <div
+                className={cx(
+                    "size-1.5 rounded-full bg-fg-white opacity-0 transition-inherit-all",
+                    size === "md" && "size-2",
+                    isDisabled && "bg-fg-disabled_subtle",
+                    isSelected && "opacity-100",
+                )}
+            />
+        </div>
+    );
+};
+RadioButtonBase.displayName = "RadioButtonBase";
+
+interface RadioButtonProps extends AriaRadioProps {
+    size?: "sm" | "md";
+    label?: ReactNode;
+    hint?: ReactNode;
+    ref?: Ref<HTMLLabelElement>;
+}
+
+export const RadioButton = ({ label, hint, className, size = "sm", ...ariaRadioProps }: RadioButtonProps) => {
+    const context = useContext(RadioGroupContext);
+
+    size = context?.size ?? size;
+
+    const sizes = {
+        sm: {
+            root: "gap-2",
+            textWrapper: "",
+            label: "text-sm font-medium",
+            hint: "text-sm",
+        },
+        md: {
+            root: "gap-3",
+            textWrapper: "gap-0.5",
+            label: "text-md font-medium",
+            hint: "text-md",
+        },
+    };
+
+    return (
+        <AriaRadio
+            {...ariaRadioProps}
+            className={(renderProps) =>
+                cx(
+                    "flex items-start",
+                    renderProps.isDisabled && "cursor-not-allowed",
+                    sizes[size].root,
+                    typeof className === "function" ? className(renderProps) : className,
+                )
+            }
+        >
+            {({ isSelected, isDisabled, isFocusVisible }) => (
+                <>
+                    <RadioButtonBase
+                        size={size}
+                        isSelected={isSelected}
+                        isDisabled={isDisabled}
+                        isFocusVisible={isFocusVisible}
+                        className={label || hint ? "mt-0.5" : ""}
+                    />
+                    {(label || hint) && (
+                        <div className={cx("inline-flex flex-col", sizes[size].textWrapper)}>
+                            {label && <p className={cx("text-secondary select-none", sizes[size].label)}>{label}</p>}
+                            {hint && (
+                                <span className={cx("text-tertiary", sizes[size].hint)} onClick={(event) => event.stopPropagation()}>
+                                    {hint}
+                                </span>
+                            )}
+                        </div>
+                    )}
+                </>
+            )}
+        </AriaRadio>
+    );
+};
+RadioButton.displayName = "RadioButton";
+
+interface RadioGroupProps extends RadioGroupContextType, AriaRadioGroupProps {
+    children: ReactNode;
+    className?: string;
+}
+
+export const RadioGroup = ({ children, className, size = "sm", ...props }: RadioGroupProps) => {
+    return (
+        <RadioGroupContext.Provider value={{ size }}>
+            <AriaRadioGroup {...props} className={cx("flex flex-col gap-4", className)}>
+                {children}
+            </AriaRadioGroup>
+        </RadioGroupContext.Provider>
+    );
+};
diff --git a/src/components/base/select/combobox.tsx b/src/components/base/select/combobox.tsx
new file mode 100644
index 0000000..4dc81b4
--- /dev/null
+++ b/src/components/base/select/combobox.tsx
@@ -0,0 +1,150 @@
+import type { FocusEventHandler, PointerEventHandler, RefAttributes, RefObject } from "react";
+import { useCallback, useContext, useRef, useState } from "react";
+import { SearchLg as SearchIcon } from "@untitledui/icons";
+import type { ComboBoxProps as AriaComboBoxProps, GroupProps as AriaGroupProps, ListBoxProps as AriaListBoxProps } from "react-aria-components";
+import { ComboBox as AriaComboBox, Group as AriaGroup, Input as AriaInput, ListBox as AriaListBox, ComboBoxStateContext } from "react-aria-components";
+import { HintText } from "@/components/base/input/hint-text";
+import { Label } from "@/components/base/input/label";
+import { Popover } from "@/components/base/select/popover";
+import { type CommonProps, SelectContext, type SelectItemType, sizes } from "@/components/base/select/select";
+import { useResizeObserver } from "@/hooks/use-resize-observer";
+import { cx } from "@/utils/cx";
+
+interface ComboBoxProps extends Omit<AriaComboBoxProps<SelectItemType>, "children" | "items">, RefAttributes<HTMLDivElement>, CommonProps {
+    shortcut?: boolean;
+    items?: SelectItemType[];
+    popoverClassName?: string;
+    shortcutClassName?: string;
+    children: AriaListBoxProps<SelectItemType>["children"];
+}
+
+interface ComboBoxValueProps extends AriaGroupProps {
+    size: "sm" | "md";
+    shortcut: boolean;
+    placeholder?: string;
+    shortcutClassName?: string;
+    onFocus?: FocusEventHandler;
+    onPointerEnter?: PointerEventHandler;
+    ref?: RefObject<HTMLDivElement | null>;
+}
+
+const ComboBoxValue = ({ size, shortcut, placeholder, shortcutClassName, ...otherProps }: ComboBoxValueProps) => {
+    const state = useContext(ComboBoxStateContext);
+
+    const value = state?.selectedItem?.value || null;
+    const inputValue = state?.inputValue || null;
+
+    const first = inputValue?.split(value?.supportingText)?.[0] || "";
+    const last = inputValue?.split(first)[1];
+
+    return (
+        <AriaGroup
+            {...otherProps}
+            className={({ isFocusWithin, isDisabled }) =>
+                cx(
+                    "relative flex w-full items-center gap-2 rounded-lg bg-primary shadow-xs ring-1 ring-primary outline-hidden transition-shadow duration-100 ease-linear ring-inset",
+                    isDisabled && "cursor-not-allowed bg-disabled_subtle",
+                    isFocusWithin && "ring-2 ring-brand",
+                    sizes[size].root,
+                )
+            }
+        >
+            {({ isDisabled }) => (
+                <>
+                    <SearchIcon className="pointer-events-none size-5 shrink-0 text-fg-quaternary" />
+
+                    <div className="relative flex w-full items-center gap-2">
+                        {inputValue && (
+                            <span className="absolute top-1/2 z-0 inline-flex w-full -translate-y-1/2 gap-2 truncate" aria-hidden="true">
+                                <p className={cx("text-md font-medium text-primary", isDisabled && "text-disabled")}>{first}</p>
+                                {last && <p className={cx("-ml-0.75 text-md text-tertiary", isDisabled && "text-disabled")}>{last}</p>}
+                            </span>
+                        )}
+
+                        <AriaInput
+                            placeholder={placeholder}
+                            className="z-10 w-full appearance-none bg-transparent text-md text-transparent caret-alpha-black/90 placeholder:text-placeholder focus:outline-hidden disabled:cursor-not-allowed disabled:text-disabled disabled:placeholder:text-disabled"
+                        />
+                    </div>
+
+                    {shortcut && (
+                        <div
+                            className={cx(
+                                "absolute inset-y-0.5 right-0.5 z-10 flex items-center rounded-r-[inherit] bg-linear-to-r from-transparent to-bg-primary to-40% pl-8",
+                                isDisabled && "to-bg-disabled_subtle",
+                                sizes[size].shortcut,
+                                shortcutClassName,
+                            )}
+                        >
+                            <span
+                                className={cx(
+                                    "pointer-events-none rounded px-1 py-px text-xs font-medium text-quaternary ring-1 ring-secondary select-none ring-inset",
+                                    isDisabled && "bg-transparent text-disabled",
+                                )}
+                                aria-hidden="true"
+                            >
+                                ⌘K
+                            </span>
+                        </div>
+                    )}
+                </>
+            )}
+        </AriaGroup>
+    );
+};
+
+export const ComboBox = ({ placeholder = "Search", shortcut = true, size = "sm", children, items, shortcutClassName, ...otherProps }: ComboBoxProps) => {
+    const placeholderRef = useRef<HTMLDivElement>(null);
+    const [popoverWidth, setPopoverWidth] = useState("");
+
+    // Resize observer for popover width
+    const onResize = useCallback(() => {
+        if (!placeholderRef.current) return;
+
+        const divRect = placeholderRef.current?.getBoundingClientRect();
+
+        setPopoverWidth(divRect.width + "px");
+    }, [placeholderRef, setPopoverWidth]);
+
+    useResizeObserver({
+        ref: placeholderRef,
+        box: "border-box",
+        onResize,
+    });
+
+    return (
+        <SelectContext.Provider value={{ size }}>
+            <AriaComboBox menuTrigger="focus" {...otherProps}>
+                {(state) => (
+                    <div className="flex flex-col gap-1.5">
+                        {otherProps.label && (
+                            <Label isRequired={state.isRequired} tooltip={otherProps.tooltip}>
+                                {otherProps.label}
+                            </Label>
+                        )}
+
+                        <ComboBoxValue
+                            ref={placeholderRef}
+                            placeholder={placeholder}
+                            shortcut={shortcut}
+                            shortcutClassName={shortcutClassName}
+                            size={size}
+                            // This is a workaround to correctly calculating the trigger width
+                            // while using ResizeObserver wasn't 100% reliable.
+                            onFocus={onResize}
+                            onPointerEnter={onResize}
+                        />
+
+                        <Popover size={size} triggerRef={placeholderRef} style={{ width: popoverWidth }} className={otherProps.popoverClassName}>
+                            <AriaListBox items={items} className="size-full outline-hidden">
+                                {children}
+                            </AriaListBox>
+                        </Popover>
+
+                        {otherProps.hint && <HintText isInvalid={state.isInvalid}>{otherProps.hint}</HintText>}
+                    </div>
+                )}
+            </AriaComboBox>
+        </SelectContext.Provider>
+    );
+};
diff --git a/src/components/base/select/multi-select.tsx b/src/components/base/select/multi-select.tsx
new file mode 100644
index 0000000..c56ac9a
--- /dev/null
+++ b/src/components/base/select/multi-select.tsx
@@ -0,0 +1,361 @@
+import type { FocusEventHandler, KeyboardEvent, PointerEventHandler, RefAttributes, RefObject } from "react";
+import { createContext, useCallback, useContext, useRef, useState } from "react";
+import { SearchLg } from "@untitledui/icons";
+import { FocusScope, useFilter, useFocusManager } from "react-aria";
+import type { ComboBoxProps as AriaComboBoxProps, GroupProps as AriaGroupProps, ListBoxProps as AriaListBoxProps, Key } from "react-aria-components";
+import { ComboBox as AriaComboBox, Group as AriaGroup, Input as AriaInput, ListBox as AriaListBox, ComboBoxStateContext } from "react-aria-components";
+import type { ListData } from "react-stately";
+import { useListData } from "react-stately";
+import { Avatar } from "@/components/base/avatar/avatar";
+import type { IconComponentType } from "@/components/base/badges/badge-types";
+import { HintText } from "@/components/base/input/hint-text";
+import { Label } from "@/components/base/input/label";
+import { Popover } from "@/components/base/select/popover";
+import { type SelectItemType, sizes } from "@/components/base/select/select";
+import { TagCloseX } from "@/components/base/tags/base-components/tag-close-x";
+import { useResizeObserver } from "@/hooks/use-resize-observer";
+import { cx } from "@/utils/cx";
+import { SelectItem } from "./select-item";
+
+interface ComboBoxValueProps extends AriaGroupProps {
+    size: "sm" | "md";
+    shortcut?: boolean;
+    isDisabled?: boolean;
+    placeholder?: string;
+    shortcutClassName?: string;
+    placeholderIcon?: IconComponentType | null;
+    ref?: RefObject<HTMLDivElement | null>;
+    onFocus?: FocusEventHandler;
+    onPointerEnter?: PointerEventHandler;
+}
+
+const ComboboxContext = createContext<{
+    size: "sm" | "md";
+    selectedKeys: Key[];
+    selectedItems: ListData<SelectItemType>;
+    onRemove: (keys: Set<Key>) => void;
+    onInputChange: (value: string) => void;
+}>({
+    size: "sm",
+    selectedKeys: [],
+    selectedItems: {} as ListData<SelectItemType>,
+    onRemove: () => {},
+    onInputChange: () => {},
+});
+
+interface MultiSelectProps extends Omit<AriaComboBoxProps<SelectItemType>, "children" | "items">, RefAttributes<HTMLDivElement> {
+    hint?: string;
+    label?: string;
+    tooltip?: string;
+    size?: "sm" | "md";
+    placeholder?: string;
+    shortcut?: boolean;
+    items?: SelectItemType[];
+    popoverClassName?: string;
+    shortcutClassName?: string;
+    selectedItems: ListData<SelectItemType>;
+    placeholderIcon?: IconComponentType | null;
+    children: AriaListBoxProps<SelectItemType>["children"];
+    onItemCleared?: (key: Key) => void;
+    onItemInserted?: (key: Key) => void;
+}
+
+export const MultiSelectBase = ({
+    items,
+    children,
+    size = "sm",
+    selectedItems,
+    onItemCleared,
+    onItemInserted,
+    shortcut,
+    placeholder = "Search",
+    // Omit these props to avoid conflicts with the `Select` component
+    name: _name,
+    className: _className,
+    ...props
+}: MultiSelectProps) => {
+    const { contains } = useFilter({ sensitivity: "base" });
+    const selectedKeys = selectedItems.items.map((item) => item.id);
+
+    const filter = useCallback(
+        (item: SelectItemType, filterText: string) => {
+            return !selectedKeys.includes(item.id) && contains(item.label || item.supportingText || "", filterText);
+        },
+        [contains, selectedKeys],
+    );
+
+    const accessibleList = useListData({
+        initialItems: items,
+        filter,
+    });
+
+    const onRemove = useCallback(
+        (keys: Set<Key>) => {
+            const key = keys.values().next().value;
+
+            if (!key) return;
+
+            selectedItems.remove(key);
+            onItemCleared?.(key);
+        },
+        [selectedItems, onItemCleared],
+    );
+
+    const onSelectionChange = (id: Key | null) => {
+        if (!id) {
+            return;
+        }
+
+        const item = accessibleList.getItem(id);
+
+        if (!item) {
+            return;
+        }
+
+        if (!selectedKeys.includes(id as string)) {
+            selectedItems.append(item);
+            onItemInserted?.(id);
+        }
+
+        accessibleList.setFilterText("");
+    };
+
+    const onInputChange = (value: string) => {
+        accessibleList.setFilterText(value);
+    };
+
+    const placeholderRef = useRef<HTMLDivElement>(null);
+    const [popoverWidth, setPopoverWidth] = useState("");
+
+    // Resize observer for popover width
+    const onResize = useCallback(() => {
+        if (!placeholderRef.current) return;
+        let divRect = placeholderRef.current?.getBoundingClientRect();
+        setPopoverWidth(divRect.width + "px");
+    }, [placeholderRef, setPopoverWidth]);
+
+    useResizeObserver({
+        ref: placeholderRef,
+        onResize: onResize,
+        box: "border-box",
+    });
+
+    return (
+        <ComboboxContext.Provider
+            value={{
+                size,
+                selectedKeys,
+                selectedItems,
+                onInputChange,
+                onRemove,
+            }}
+        >
+            <AriaComboBox
+                allowsEmptyCollection
+                menuTrigger="focus"
+                items={accessibleList.items}
+                onInputChange={onInputChange}
+                inputValue={accessibleList.filterText}
+                // This keeps the combobox popover open and the input value unchanged when an item is selected.
+                selectedKey={null}
+                onSelectionChange={onSelectionChange}
+                {...props}
+            >
+                {(state) => (
+                    <div className="flex flex-col gap-1.5">
+                        {props.label && (
+                            <Label isRequired={state.isRequired} tooltip={props.tooltip}>
+                                {props.label}
+                            </Label>
+                        )}
+
+                        <MultiSelectTagsValue
+                            size={size}
+                            shortcut={shortcut}
+                            ref={placeholderRef}
+                            placeholder={placeholder}
+                            // This is a workaround to correctly calculating the trigger width
+                            // while using ResizeObserver wasn't 100% reliable.
+                            onFocus={onResize}
+                            onPointerEnter={onResize}
+                        />
+
+                        <Popover size={"md"} triggerRef={placeholderRef} style={{ width: popoverWidth }} className={props?.popoverClassName}>
+                            <AriaListBox selectionMode="multiple" className="size-full outline-hidden">
+                                {children}
+                            </AriaListBox>
+                        </Popover>
+
+                        {props.hint && <HintText isInvalid={state.isInvalid}>{props.hint}</HintText>}
+                    </div>
+                )}
+            </AriaComboBox>
+        </ComboboxContext.Provider>
+    );
+};
+
+const InnerMultiSelect = ({ isDisabled, shortcut, shortcutClassName, placeholder }: Omit<MultiSelectProps, "selectedItems" | "children">) => {
+    const focusManager = useFocusManager();
+    const comboBoxContext = useContext(ComboboxContext);
+    const comboBoxStateContext = useContext(ComboBoxStateContext);
+
+    const handleInputKeyDown = (event: KeyboardEvent<HTMLInputElement>) => {
+        const isCaretAtStart = event.currentTarget.selectionStart === 0 && event.currentTarget.selectionEnd === 0;
+
+        if (!isCaretAtStart && event.currentTarget.value !== "") {
+            return;
+        }
+
+        switch (event.key) {
+            case "Backspace":
+            case "ArrowLeft":
+                focusManager?.focusPrevious({ wrap: false, tabbable: false });
+                break;
+            case "ArrowRight":
+                focusManager?.focusNext({ wrap: false, tabbable: false });
+                break;
+        }
+    };
+
+    // Ensure dropdown opens on click even if input is already focused
+    const handleInputMouseDown = (_event: React.MouseEvent<HTMLInputElement>) => {
+        if (comboBoxStateContext && !comboBoxStateContext.isOpen) {
+            comboBoxStateContext.open();
+        }
+    };
+
+    const handleTagKeyDown = (event: KeyboardEvent<HTMLButtonElement>, value: Key) => {
+        // Do nothing when tab is clicked to move focus from the tag to the input element.
+        if (event.key === "Tab") {
+            return;
+        }
+
+        event.preventDefault();
+
+        const isFirstTag = comboBoxContext?.selectedItems?.items?.[0]?.id === value;
+
+        switch (event.key) {
+            case " ":
+            case "Enter":
+            case "Backspace":
+                if (isFirstTag) {
+                    focusManager?.focusNext({ wrap: false, tabbable: false });
+                } else {
+                    focusManager?.focusPrevious({ wrap: false, tabbable: false });
+                }
+
+                comboBoxContext.onRemove(new Set([value]));
+                break;
+
+            case "ArrowLeft":
+                focusManager?.focusPrevious({ wrap: false, tabbable: false });
+                break;
+            case "ArrowRight":
+                focusManager?.focusNext({ wrap: false, tabbable: false });
+                break;
+            case "Escape":
+                comboBoxStateContext?.close();
+                break;
+        }
+    };
+
+    const isSelectionEmpty = comboBoxContext?.selectedItems?.items?.length === 0;
+
+    return (
+        <div className="relative flex w-full flex-1 flex-row flex-wrap items-center justify-start gap-1.5">
+            {!isSelectionEmpty &&
+                comboBoxContext?.selectedItems?.items?.map((value) => (
+                    <span key={value.id} className="flex items-center rounded-md bg-primary py-0.5 pr-1 pl-1.25 ring-1 ring-primary ring-inset">
+                        <Avatar size="xxs" alt={value?.label} src={value?.avatarUrl} />
+
+                        <p className="ml-1.25 truncate text-sm font-medium whitespace-nowrap text-secondary select-none">{value?.label}</p>
+
+                        <TagCloseX
+                            size="md"
+                            isDisabled={isDisabled}
+                            className="ml-0.75"
+                            // For workaround, onKeyDown is added to the button
+                            onKeyDown={(event) => handleTagKeyDown(event, value.id)}
+                            onPress={() => comboBoxContext.onRemove(new Set([value.id]))}
+                        />
+                    </span>
+                ))}
+
+            <div className={cx("relative flex min-w-[20%] flex-1 flex-row items-center", !isSelectionEmpty && "ml-0.5", shortcut && "min-w-[30%]")}>
+                <AriaInput
+                    placeholder={placeholder}
+                    onKeyDown={handleInputKeyDown}
+                    onMouseDown={handleInputMouseDown}
+                    className="w-full flex-[1_0_0] appearance-none bg-transparent text-md text-ellipsis text-primary caret-alpha-black/90 outline-none placeholder:text-placeholder focus:outline-hidden disabled:cursor-not-allowed disabled:text-disabled disabled:placeholder:text-disabled"
+                />
+
+                {shortcut && (
+                    <div
+                        aria-hidden="true"
+                        className={cx(
+                            "absolute inset-y-0.5 right-0.5 z-10 flex items-center rounded-r-[inherit] bg-linear-to-r from-transparent to-bg-primary to-40% pl-8",
+                            shortcutClassName,
+                        )}
+                    >
+                        <span
+                            className={cx(
+                                "pointer-events-none rounded px-1 py-px text-xs font-medium text-quaternary ring-1 ring-secondary select-none ring-inset",
+                                isDisabled && "bg-transparent text-disabled",
+                            )}
+                        >
+                            ⌘K
+                        </span>
+                    </div>
+                )}
+            </div>
+        </div>
+    );
+};
+
+export const MultiSelectTagsValue = ({
+    size,
+    shortcut,
+    placeholder,
+    shortcutClassName,
+    placeholderIcon: Icon = SearchLg,
+    // Omit this prop to avoid invalid HTML attribute warning
+    isDisabled: _isDisabled,
+    ...otherProps
+}: ComboBoxValueProps) => {
+    return (
+        <AriaGroup
+            {...otherProps}
+            className={({ isFocusWithin, isDisabled }) =>
+                cx(
+                    "relative flex w-full items-center gap-2 rounded-lg bg-primary shadow-xs ring-1 ring-primary outline-hidden transition duration-100 ease-linear ring-inset",
+                    isDisabled && "cursor-not-allowed bg-disabled_subtle",
+                    isFocusWithin && "ring-2 ring-brand",
+                    sizes[size].root,
+                )
+            }
+        >
+            {({ isDisabled }) => (
+                <>
+                    {Icon && <Icon className="pointer-events-none size-5 text-fg-quaternary" />}
+                    <FocusScope contain={false} autoFocus={false} restoreFocus={false}>
+                        <InnerMultiSelect
+                            isDisabled={isDisabled}
+                            size={size}
+                            shortcut={shortcut}
+                            shortcutClassName={shortcutClassName}
+                            placeholder={placeholder}
+                        />
+                    </FocusScope>
+                </>
+            )}
+        </AriaGroup>
+    );
+};
+
+const MultiSelect = MultiSelectBase as typeof MultiSelectBase & {
+    Item: typeof SelectItem;
+};
+
+MultiSelect.Item = SelectItem;
+
+export { MultiSelect as MultiSelect };
diff --git a/src/components/base/select/popover.tsx b/src/components/base/select/popover.tsx
new file mode 100644
index 0000000..b9e4fd6
--- /dev/null
+++ b/src/components/base/select/popover.tsx
@@ -0,0 +1,32 @@
+import type { RefAttributes } from "react";
+import type { PopoverProps as AriaPopoverProps } from "react-aria-components";
+import { Popover as AriaPopover } from "react-aria-components";
+import { cx } from "@/utils/cx";
+
+interface PopoverProps extends AriaPopoverProps, RefAttributes<HTMLElement> {
+    size: "sm" | "md";
+}
+
+export const Popover = (props: PopoverProps) => {
+    return (
+        <AriaPopover
+            placement="bottom"
+            containerPadding={0}
+            offset={4}
+            {...props}
+            className={(state) =>
+                cx(
+                    "max-h-64! w-(--trigger-width) origin-(--trigger-anchor-point) overflow-x-hidden overflow-y-auto rounded-lg bg-primary py-1 shadow-lg ring-1 ring-secondary_alt outline-hidden will-change-transform",
+
+                    state.isEntering &&
+                        "duration-150 ease-out animate-in fade-in placement-right:slide-in-from-left-0.5 placement-top:slide-in-from-bottom-0.5 placement-bottom:slide-in-from-top-0.5",
+                    state.isExiting &&
+                        "duration-100 ease-in animate-out fade-out placement-right:slide-out-to-left-0.5 placement-top:slide-out-to-bottom-0.5 placement-bottom:slide-out-to-top-0.5",
+                    props.size === "md" && "max-h-80!",
+
+                    typeof props.className === "function" ? props.className(state) : props.className,
+                )
+            }
+        />
+    );
+};
diff --git a/src/components/base/select/select-item.tsx b/src/components/base/select/select-item.tsx
new file mode 100644
index 0000000..94a0619
--- /dev/null
+++ b/src/components/base/select/select-item.tsx
@@ -0,0 +1,95 @@
+import { isValidElement, useContext } from "react";
+import { Check } from "@untitledui/icons";
+import type { ListBoxItemProps as AriaListBoxItemProps } from "react-aria-components";
+import { ListBoxItem as AriaListBoxItem, Text as AriaText } from "react-aria-components";
+import { Avatar } from "@/components/base/avatar/avatar";
+import { cx } from "@/utils/cx";
+import { isReactComponent } from "@/utils/is-react-component";
+import type { SelectItemType } from "./select";
+import { SelectContext } from "./select";
+
+const sizes = {
+    sm: "p-2 pr-2.5",
+    md: "p-2.5 pl-2",
+};
+
+interface SelectItemProps extends Omit<AriaListBoxItemProps<SelectItemType>, "id">, SelectItemType {}
+
+export const SelectItem = ({ label, id, value, avatarUrl, supportingText, isDisabled, icon: Icon, className, children, ...props }: SelectItemProps) => {
+    const { size } = useContext(SelectContext);
+
+    const labelOrChildren = label || (typeof children === "string" ? children : "");
+    const textValue = supportingText ? labelOrChildren + " " + supportingText : labelOrChildren;
+
+    return (
+        <AriaListBoxItem
+            id={id}
+            value={
+                value ?? {
+                    id,
+                    label: labelOrChildren,
+                    avatarUrl,
+                    supportingText,
+                    isDisabled,
+                    icon: Icon,
+                }
+            }
+            textValue={textValue}
+            isDisabled={isDisabled}
+            {...props}
+            className={(state) => cx("w-full px-1.5 py-px outline-hidden", typeof className === "function" ? className(state) : className)}
+        >
+            {(state) => (
+                <div
+                    className={cx(
+                        "flex cursor-pointer items-center gap-2 rounded-md outline-hidden select-none",
+                        state.isSelected && "bg-active",
+                        state.isDisabled && "cursor-not-allowed",
+                        state.isFocused && "bg-primary_hover",
+                        state.isFocusVisible && "ring-2 ring-focus-ring ring-inset",
+
+                        // Icon styles
+                        "*:data-icon:size-5 *:data-icon:shrink-0 *:data-icon:text-fg-quaternary",
+                        state.isDisabled && "*:data-icon:text-fg-disabled",
+
+                        sizes[size],
+                    )}
+                >
+                    {avatarUrl ? (
+                        <Avatar aria-hidden="true" size="xs" src={avatarUrl} alt={label} />
+                    ) : isReactComponent(Icon) ? (
+                        <Icon data-icon aria-hidden="true" />
+                    ) : isValidElement(Icon) ? (
+                        Icon
+                    ) : null}
+
+                    <div className="flex w-full min-w-0 flex-1 flex-wrap gap-x-2">
+                        <AriaText
+                            slot="label"
+                            className={cx("truncate text-md font-medium whitespace-nowrap text-primary", state.isDisabled && "text-disabled")}
+                        >
+                            {label || (typeof children === "function" ? children(state) : children)}
+                        </AriaText>
+
+                        {supportingText && (
+                            <AriaText slot="description" className={cx("text-md whitespace-nowrap text-tertiary", state.isDisabled && "text-disabled")}>
+                                {supportingText}
+                            </AriaText>
+                        )}
+                    </div>
+
+                    {state.isSelected && (
+                        <Check
+                            aria-hidden="true"
+                            className={cx(
+                                "ml-auto text-fg-brand-primary",
+                                size === "sm" ? "size-4 stroke-[2.5px]" : "size-5",
+                                state.isDisabled && "text-fg-disabled",
+                            )}
+                        />
+                    )}
+                </div>
+            )}
+        </AriaListBoxItem>
+    );
+};
diff --git a/src/components/base/select/select-native.tsx b/src/components/base/select/select-native.tsx
new file mode 100644
index 0000000..dfa22c4
--- /dev/null
+++ b/src/components/base/select/select-native.tsx
@@ -0,0 +1,67 @@
+import { type SelectHTMLAttributes, useId } from "react";
+import { ChevronDown } from "@untitledui/icons";
+import { HintText } from "@/components/base/input/hint-text";
+import { Label } from "@/components/base/input/label";
+import { cx } from "@/utils/cx";
+
+interface NativeSelectProps extends SelectHTMLAttributes<HTMLSelectElement> {
+    label?: string;
+    hint?: string;
+    selectClassName?: string;
+    options: { label: string; value: string; disabled?: boolean }[];
+}
+
+export const NativeSelect = ({ label, hint, options, className, selectClassName, ...props }: NativeSelectProps) => {
+    const id = useId();
+    const selectId = `select-native-${id}`;
+    const hintId = `select-native-hint-${id}`;
+
+    return (
+        <div className={cx("w-full in-data-input-wrapper:w-max", className)}>
+            {label && (
+                <Label htmlFor={selectId} id={selectId} className="mb-1.5">
+                    {label}
+                </Label>
+            )}
+
+            <div className="relative grid w-full items-center">
+                <select
+                    {...props}
+                    id={selectId}
+                    aria-describedby={hintId}
+                    aria-labelledby={selectId}
+                    className={cx(
+                        "appearance-none rounded-lg bg-primary px-3.5 py-2.5 text-md font-medium text-primary shadow-xs ring-1 ring-primary outline-hidden transition duration-100 ease-linear ring-inset placeholder:text-fg-quaternary focus-visible:ring-2 focus-visible:ring-brand disabled:cursor-not-allowed disabled:bg-disabled_subtle disabled:text-disabled",
+                        // Styles when the select is within an `InputGroup`
+                        "in-data-input-wrapper:flex in-data-input-wrapper:h-full in-data-input-wrapper:gap-1 in-data-input-wrapper:bg-inherit in-data-input-wrapper:px-3 in-data-input-wrapper:py-2 in-data-input-wrapper:font-normal in-data-input-wrapper:text-tertiary in-data-input-wrapper:shadow-none in-data-input-wrapper:ring-transparent",
+                        // Styles for the select when `TextField` is disabled
+                        "in-data-input-wrapper:group-disabled:pointer-events-none in-data-input-wrapper:group-disabled:cursor-not-allowed in-data-input-wrapper:group-disabled:bg-transparent in-data-input-wrapper:group-disabled:text-disabled",
+                        // Common styles for sizes and border radius within `InputGroup`
+                        "in-data-input-wrapper:in-data-leading:rounded-r-none in-data-input-wrapper:in-data-trailing:rounded-l-none in-data-input-wrapper:in-data-[input-size=md]:py-2.5 in-data-input-wrapper:in-data-leading:in-data-[input-size=md]:pl-3.5 in-data-input-wrapper:in-data-[input-size=sm]:py-2 in-data-input-wrapper:in-data-[input-size=sm]:pl-3",
+                        // For "leading" dropdown within `InputGroup`
+                        "in-data-input-wrapper:in-data-leading:in-data-[input-size=md]:pr-4.5 in-data-input-wrapper:in-data-leading:in-data-[input-size=sm]:pr-4.5",
+                        // For "trailing" dropdown within `InputGroup`
+                        "in-data-input-wrapper:in-data-trailing:in-data-[input-size=md]:pr-8 in-data-input-wrapper:in-data-trailing:in-data-[input-size=sm]:pr-7.5",
+                        selectClassName,
+                    )}
+                >
+                    {options.map((opt) => (
+                        <option key={opt.value} value={opt.value}>
+                            {opt.label}
+                        </option>
+                    ))}
+                </select>
+                <ChevronDown
+                    aria-hidden="true"
+                    className="pointer-events-none absolute right-3.5 size-5 text-fg-quaternary in-data-input-wrapper:right-0 in-data-input-wrapper:size-4 in-data-input-wrapper:stroke-[2.625px] in-data-input-wrapper:in-data-trailing:in-data-[input-size=sm]:right-3"
+                />
+            </div>
+
+            {hint && (
+                <HintText className="mt-2" id={hintId}>
+                    {hint}
+                </HintText>
+            )}
+        </div>
+    );
+};
diff --git a/src/components/base/select/select.tsx b/src/components/base/select/select.tsx
new file mode 100644
index 0000000..bc87346
--- /dev/null
+++ b/src/components/base/select/select.tsx
@@ -0,0 +1,144 @@
+import type { FC, ReactNode, Ref, RefAttributes } from "react";
+import { createContext, isValidElement } from "react";
+import { ChevronDown } from "@untitledui/icons";
+import type { SelectProps as AriaSelectProps } from "react-aria-components";
+import { Button as AriaButton, ListBox as AriaListBox, Select as AriaSelect, SelectValue as AriaSelectValue } from "react-aria-components";
+import { Avatar } from "@/components/base/avatar/avatar";
+import { HintText } from "@/components/base/input/hint-text";
+import { Label } from "@/components/base/input/label";
+import { cx } from "@/utils/cx";
+import { isReactComponent } from "@/utils/is-react-component";
+import { ComboBox } from "./combobox";
+import { Popover } from "./popover";
+import { SelectItem } from "./select-item";
+
+export type SelectItemType = {
+    id: string;
+    label?: string;
+    avatarUrl?: string;
+    isDisabled?: boolean;
+    supportingText?: string;
+    icon?: FC | ReactNode;
+};
+
+export interface CommonProps {
+    hint?: string;
+    label?: string;
+    tooltip?: string;
+    size?: "sm" | "md";
+    placeholder?: string;
+}
+
+interface SelectProps extends Omit<AriaSelectProps<SelectItemType>, "children" | "items">, RefAttributes<HTMLDivElement>, CommonProps {
+    items?: SelectItemType[];
+    popoverClassName?: string;
+    placeholderIcon?: FC | ReactNode;
+    children: ReactNode | ((item: SelectItemType) => ReactNode);
+}
+
+interface SelectValueProps {
+    isOpen: boolean;
+    size: "sm" | "md";
+    isFocused: boolean;
+    isDisabled: boolean;
+    placeholder?: string;
+    ref?: Ref<HTMLButtonElement>;
+    placeholderIcon?: FC | ReactNode;
+}
+
+export const sizes = {
+    sm: { root: "py-2 px-3", shortcut: "pr-2.5" },
+    md: { root: "py-2.5 px-3.5", shortcut: "pr-3" },
+};
+
+const SelectValue = ({ isOpen, isFocused, isDisabled, size, placeholder, placeholderIcon, ref }: SelectValueProps) => {
+    return (
+        <AriaButton
+            ref={ref}
+            className={cx(
+                "relative flex w-full cursor-pointer items-center rounded-lg bg-primary shadow-xs ring-1 ring-primary outline-hidden transition duration-100 ease-linear ring-inset",
+                (isFocused || isOpen) && "ring-2 ring-brand",
+                isDisabled && "cursor-not-allowed bg-disabled_subtle text-disabled",
+            )}
+        >
+            <AriaSelectValue<SelectItemType>
+                className={cx(
+                    "flex h-max w-full items-center justify-start gap-2 truncate text-left align-middle",
+
+                    // Icon styles
+                    "*:data-icon:size-5 *:data-icon:shrink-0 *:data-icon:text-fg-quaternary in-disabled:*:data-icon:text-fg-disabled",
+
+                    sizes[size].root,
+                )}
+            >
+                {(state) => {
+                    const Icon = state.selectedItem?.icon || placeholderIcon;
+                    return (
+                        <>
+                            {state.selectedItem?.avatarUrl ? (
+                                <Avatar size="xs" src={state.selectedItem.avatarUrl} alt={state.selectedItem.label} />
+                            ) : isReactComponent(Icon) ? (
+                                <Icon data-icon aria-hidden="true" />
+                            ) : isValidElement(Icon) ? (
+                                Icon
+                            ) : null}
+
+                            {state.selectedItem ? (
+                                <section className="flex w-full gap-2 truncate">
+                                    <p className="truncate text-md font-medium text-primary">{state.selectedItem?.label}</p>
+                                    {state.selectedItem?.supportingText && <p className="text-md text-tertiary">{state.selectedItem?.supportingText}</p>}
+                                </section>
+                            ) : (
+                                <p className={cx("text-md text-placeholder", isDisabled && "text-disabled")}>{placeholder}</p>
+                            )}
+
+                            <ChevronDown
+                                aria-hidden="true"
+                                className={cx("ml-auto shrink-0 text-fg-quaternary", size === "sm" ? "size-4 stroke-[2.5px]" : "size-5")}
+                            />
+                        </>
+                    );
+                }}
+            </AriaSelectValue>
+        </AriaButton>
+    );
+};
+
+export const SelectContext = createContext<{ size: "sm" | "md" }>({ size: "sm" });
+
+const Select = ({ placeholder = "Select", placeholderIcon, size = "sm", children, items, label, hint, tooltip, className, ...rest }: SelectProps) => {
+    return (
+        <SelectContext.Provider value={{ size }}>
+            <AriaSelect {...rest} className={(state) => cx("flex flex-col gap-1.5", typeof className === "function" ? className(state) : className)}>
+                {(state) => (
+                    <>
+                        {label && (
+                            <Label isRequired={state.isRequired} tooltip={tooltip}>
+                                {label}
+                            </Label>
+                        )}
+
+                        <SelectValue {...state} {...{ size, placeholder }} placeholderIcon={placeholderIcon} />
+
+                        <Popover size={size} className={rest.popoverClassName}>
+                            <AriaListBox items={items} className="size-full outline-hidden">
+                                {children}
+                            </AriaListBox>
+                        </Popover>
+
+                        {hint && <HintText isInvalid={state.isInvalid}>{hint}</HintText>}
+                    </>
+                )}
+            </AriaSelect>
+        </SelectContext.Provider>
+    );
+};
+
+const _Select = Select as typeof Select & {
+    ComboBox: typeof ComboBox;
+    Item: typeof SelectItem;
+};
+_Select.ComboBox = ComboBox;
+_Select.Item = SelectItem;
+
+export { _Select as Select };
diff --git a/src/components/base/slider/slider.tsx b/src/components/base/slider/slider.tsx
new file mode 100644
index 0000000..6136f27
--- /dev/null
+++ b/src/components/base/slider/slider.tsx
@@ -0,0 +1,73 @@
+import type { SliderProps as AriaSliderProps } from "react-aria-components";
+import {
+    Label as AriaLabel,
+    Slider as AriaSlider,
+    SliderOutput as AriaSliderOutput,
+    SliderThumb as AriaSliderThumb,
+    SliderTrack as AriaSliderTrack,
+} from "react-aria-components";
+import { cx, sortCx } from "@/utils/cx";
+
+const styles = sortCx({
+    default: "hidden",
+    bottom: "absolute top-2 left-1/2 -translate-x-1/2 translate-y-full text-md font-medium text-primary",
+    "top-floating":
+        "absolute -top-2 left-1/2 -translate-x-1/2 -translate-y-full rounded-lg bg-primary px-3 py-2 text-xs font-semibold text-secondary shadow-lg ring-1 ring-secondary_alt",
+});
+
+interface SliderProps extends AriaSliderProps {
+    labelPosition?: keyof typeof styles;
+    labelFormatter?: (value: number) => string;
+}
+
+export const Slider = ({ labelPosition = "default", minValue = 0, maxValue = 100, labelFormatter, formatOptions, ...rest }: SliderProps) => {
+    // Format thumb value as percentage by default.
+    const defaultFormatOptions: Intl.NumberFormatOptions = {
+        style: "percent",
+        maximumFractionDigits: 0,
+    };
+
+    return (
+        <AriaSlider {...rest} {...{ minValue, maxValue }} formatOptions={formatOptions ?? defaultFormatOptions}>
+            <AriaLabel />
+            <AriaSliderTrack className="relative h-6 w-full">
+                {({ state: { values, getThumbValue, getThumbPercent, getFormattedValue } }) => {
+                    const left = values.length === 1 ? 0 : getThumbPercent(0);
+                    const width = values.length === 1 ? getThumbPercent(0) : getThumbPercent(1) - left;
+
+                    return (
+                        <>
+                            <span className="absolute top-1/2 h-2 w-full -translate-y-1/2 rounded-full bg-quaternary" />
+                            <span
+                                className="absolute top-1/2 h-2 w-full -translate-y-1/2 rounded-full bg-brand-solid"
+                                style={{
+                                    left: `${left * 100}%`,
+                                    width: `${width * 100}%`,
+                                }}
+                            />
+                            {values.map((_, index) => {
+                                return (
+                                    <AriaSliderThumb
+                                        key={index}
+                                        index={index}
+                                        className={({ isFocusVisible, isDragging }) =>
+                                            cx(
+                                                "top-1/2 box-border size-6 cursor-grab rounded-full bg-slider-handle-bg shadow-md ring-2 ring-slider-handle-border ring-inset",
+                                                isFocusVisible && "outline-2 outline-offset-2 outline-focus-ring",
+                                                isDragging && "cursor-grabbing",
+                                            )
+                                        }
+                                    >
+                                        <AriaSliderOutput className={cx("whitespace-nowrap", styles[labelPosition])}>
+                                            {labelFormatter ? labelFormatter(getThumbValue(index)) : getFormattedValue(getThumbValue(index) / 100)}
+                                        </AriaSliderOutput>
+                                    </AriaSliderThumb>
+                                );
+                            })}
+                        </>
+                    );
+                }}
+            </AriaSliderTrack>
+        </AriaSlider>
+    );
+};
diff --git a/src/components/base/tags/base-components/tag-checkbox.tsx b/src/components/base/tags/base-components/tag-checkbox.tsx
new file mode 100644
index 0000000..e9f8305
--- /dev/null
+++ b/src/components/base/tags/base-components/tag-checkbox.tsx
@@ -0,0 +1,43 @@
+import { cx } from "@/utils/cx";
+
+interface TagCheckboxProps {
+    size?: "sm" | "md" | "lg";
+    className?: string;
+    isFocused?: boolean;
+    isSelected?: boolean;
+    isDisabled?: boolean;
+}
+
+export const TagCheckbox = ({ className, isFocused, isSelected, isDisabled, size = "sm" }: TagCheckboxProps) => {
+    return (
+        <div
+            className={cx(
+                "flex cursor-pointer appearance-none items-center justify-center rounded bg-primary ring-1 ring-primary ring-inset",
+                size === "sm" && "size-3.5",
+                size === "md" && "size-4",
+                size === "lg" && "size-4.5",
+                isSelected && "bg-brand-solid ring-bg-brand-solid",
+                isDisabled && "cursor-not-allowed bg-disabled_subtle ring-disabled",
+                isFocused && "outline-2 outline-offset-2 outline-focus-ring",
+                className,
+            )}
+        >
+            <svg
+                aria-hidden="true"
+                viewBox="0 0 14 14"
+                fill="none"
+                className={cx(
+                    "pointer-events-none absolute text-fg-white opacity-0 transition-inherit-all",
+                    size === "sm" && "size-2.5",
+                    size === "md" && "size-3",
+                    size === "lg" && "size-3.5",
+                    isSelected && "opacity-100",
+                    isDisabled && "text-fg-disabled_subtle",
+                )}
+            >
+                <path d="M11.6666 3.5L5.24992 9.91667L2.33325 7" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
+            </svg>
+        </div>
+    );
+};
+TagCheckbox.displayName = "TagCheckbox";
diff --git a/src/components/base/tags/base-components/tag-close-x.tsx b/src/components/base/tags/base-components/tag-close-x.tsx
new file mode 100644
index 0000000..dcbad66
--- /dev/null
+++ b/src/components/base/tags/base-components/tag-close-x.tsx
@@ -0,0 +1,32 @@
+import type { RefAttributes } from "react";
+import { XClose } from "@untitledui/icons";
+import { Button as AriaButton, type ButtonProps as AriaButtonProps } from "react-aria-components";
+import { cx } from "@/utils/cx";
+
+interface TagCloseXProps extends AriaButtonProps, RefAttributes<HTMLButtonElement> {
+    size?: "sm" | "md" | "lg";
+    className?: string;
+}
+
+const styles = {
+    sm: { root: "p-0.5", icon: "size-2.5" },
+    md: { root: "p-0.5", icon: "size-3" },
+    lg: { root: "p-0.75", icon: "size-3.5" },
+};
+
+export const TagCloseX = ({ size = "md", className, ...otherProps }: TagCloseXProps) => {
+    return (
+        <AriaButton
+            slot="remove"
+            aria-label="Remove this tag"
+            className={cx(
+                "flex cursor-pointer rounded-[3px] text-fg-quaternary outline-transparent transition duration-100 ease-linear hover:bg-primary_hover hover:text-fg-quaternary_hover focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-focus-ring disabled:cursor-not-allowed",
+                styles[size].root,
+                className,
+            )}
+            {...otherProps}
+        >
+            <XClose className={cx("transition-inherit-all", styles[size].icon)} strokeWidth="3" />
+        </AriaButton>
+    );
+};
diff --git a/src/components/base/tags/tags.tsx b/src/components/base/tags/tags.tsx
new file mode 100644
index 0000000..ef1f4b0
--- /dev/null
+++ b/src/components/base/tags/tags.tsx
@@ -0,0 +1,161 @@
+import { type PropsWithChildren, type RefAttributes, createContext, useContext } from "react";
+import {
+    Tag as AriaTag,
+    TagGroup as AriaTagGroup,
+    type TagGroupProps as AriaTagGroupProps,
+    TagList as AriaTagList,
+    type TagProps as AriaTagProps,
+} from "react-aria-components";
+import { Avatar } from "@/components/base/avatar/avatar";
+import { Dot } from "@/components/foundations/dot-icon";
+import { cx } from "@/utils/cx";
+import { TagCheckbox } from "./base-components/tag-checkbox";
+import { TagCloseX } from "./base-components/tag-close-x";
+
+export interface TagItem {
+    id: string;
+    label: string;
+    count?: number;
+    avatarSrc?: string;
+    avatarContrastBorder?: boolean;
+    dot?: boolean;
+    dotClassName?: string;
+    isDisabled?: boolean;
+    onClose?: (id: string) => void;
+}
+
+const TagGroupContext = createContext<{
+    selectionMode: "none" | "single" | "multiple";
+    size: "sm" | "md" | "lg";
+}>({
+    selectionMode: "none",
+    size: "sm",
+});
+
+interface TagGroupProps extends AriaTagGroupProps, RefAttributes<HTMLDivElement> {
+    label: string;
+    size?: "sm" | "md" | "lg";
+}
+
+export const TagGroup = ({ label, selectionMode = "none", size = "sm", children, ...otherProps }: TagGroupProps) => {
+    return (
+        <TagGroupContext.Provider value={{ selectionMode, size }}>
+            <AriaTagGroup aria-label={label} selectionMode={selectionMode} disallowEmptySelection={selectionMode === "single"} {...otherProps}>
+                {children}
+            </AriaTagGroup>
+        </TagGroupContext.Provider>
+    );
+};
+
+export const TagList = AriaTagList;
+
+const styles = {
+    sm: {
+        root: {
+            base: "px-2 py-0.75 text-xs font-medium",
+            withCheckbox: "pl-1.25",
+            withAvatar: "pl-1",
+            withDot: "pl-1.5",
+            withCount: "pr-1",
+            withClose: "pr-1",
+        },
+        content: "gap-1",
+        count: "px-1 text-xs font-medium",
+    },
+    md: {
+        root: {
+            base: "px-2.25 py-0.5 text-sm font-medium",
+            withCheckbox: "pl-1",
+            withAvatar: "pl-1.25",
+            withDot: "pl-1.75",
+            withCount: "pr-0.75",
+            withClose: "pr-1",
+        },
+        content: "gap-1.25",
+        count: "px-1.25 text-xs font-medium",
+    },
+    lg: {
+        root: {
+            base: "px-2.5 py-1 text-sm font-medium",
+            withCheckbox: "pl-1.25",
+            withAvatar: "pl-1.75",
+            withDot: "pl-2.25",
+            withCount: "pr-1",
+            withClose: "pr-1",
+        },
+        content: "gap-1.5",
+        count: "px-1.5 text-sm font-medium",
+    },
+};
+
+interface TagProps extends AriaTagProps, RefAttributes<object>, Omit<TagItem, "label" | "id"> {}
+
+export const Tag = ({
+    id,
+    avatarSrc,
+    avatarContrastBorder,
+    dot,
+    dotClassName,
+    isDisabled,
+    count,
+    className,
+    children,
+    onClose,
+}: PropsWithChildren<TagProps>) => {
+    const context = useContext(TagGroupContext);
+
+    const leadingContent = avatarSrc ? (
+        <Avatar size="xxs" src={avatarSrc} alt="Avatar" contrastBorder={avatarContrastBorder} />
+    ) : dot ? (
+        <Dot className={cx("text-fg-success-secondary", dotClassName)} size="sm" />
+    ) : null;
+
+    return (
+        <AriaTag
+            id={id}
+            isDisabled={isDisabled}
+            textValue={typeof children === "string" ? children : undefined}
+            className={(state) =>
+                cx(
+                    "flex cursor-default items-center gap-0.75 rounded-md bg-primary text-secondary ring-1 ring-primary ring-inset focus:outline-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-focus-ring",
+                    styles[context.size].root.base,
+
+                    // With avatar
+                    avatarSrc && styles[context.size].root.withAvatar,
+                    // With X button
+                    (onClose || state.allowsRemoving) && styles[context.size].root.withClose,
+                    // With dot
+                    dot && styles[context.size].root.withDot,
+                    // With count
+                    typeof count === "number" && styles[context.size].root.withCount,
+                    // With checkbox
+                    context.selectionMode !== "none" && styles[context.size].root.withCheckbox,
+                    // Disabled
+                    isDisabled && "cursor-not-allowed",
+
+                    typeof className === "function" ? className(state) : className,
+                )
+            }
+        >
+            {({ isSelected, isDisabled, allowsRemoving }) => (
+                <>
+                    <div className={cx("flex items-center gap-1", styles[context.size].content)}>
+                        {context.selectionMode !== "none" && <TagCheckbox size={context.size} isSelected={isSelected} isDisabled={isDisabled} />}
+
+                        {leadingContent}
+
+                        {children}
+
+                        {typeof count === "number" && (
+                            <span className={cx("flex items-center justify-center rounded-[3px] bg-tertiary text-center", styles[context.size].count)}>
+                                {count}
+                            </span>
+                        )}
+                    </div>
+
+                    {(onClose || allowsRemoving) && <TagCloseX size={context.size} onPress={() => id && onClose?.(id.toString())} />}
+                </>
+            )}
+        </AriaTag>
+    );
+};
diff --git a/src/components/base/textarea/textarea.tsx b/src/components/base/textarea/textarea.tsx
new file mode 100644
index 0000000..8fe7dc9
--- /dev/null
+++ b/src/components/base/textarea/textarea.tsx
@@ -0,0 +1,109 @@
+import type { ReactNode, Ref } from "react";
+import React from "react";
+import type { TextAreaProps as AriaTextAreaProps, TextFieldProps as AriaTextFieldProps } from "react-aria-components";
+import { TextArea as AriaTextArea, TextField as AriaTextField } from "react-aria-components";
+import { HintText } from "@/components/base/input/hint-text";
+import { Label } from "@/components/base/input/label";
+import { cx } from "@/utils/cx";
+
+// Creates a data URL for an SVG resize handle with a given color.
+const getResizeHandleBg = (color: string) => {
+    return `url(data:image/svg+xml;base64,${btoa(`<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M10 2L2 10" stroke="${color}" stroke-linecap="round"/><path d="M11 7L7 11" stroke="${color}" stroke-linecap="round"/></svg>`)})`;
+};
+
+interface TextAreaBaseProps extends AriaTextAreaProps {
+    ref?: Ref<HTMLTextAreaElement>;
+}
+
+export const TextAreaBase = ({ className, ...props }: TextAreaBaseProps) => {
+    return (
+        <AriaTextArea
+            {...props}
+            style={
+                {
+                    "--resize-handle-bg": getResizeHandleBg("#D5D7DA"),
+                    "--resize-handle-bg-dark": getResizeHandleBg("#373A41"),
+                } as React.CSSProperties
+            }
+            className={(state) =>
+                cx(
+                    "w-full scroll-py-3 rounded-lg bg-primary px-3.5 py-3 text-md text-primary shadow-xs ring-1 ring-primary transition duration-100 ease-linear ring-inset placeholder:text-placeholder autofill:rounded-lg autofill:text-primary focus:outline-hidden",
+
+                    // Resize handle
+                    "[&::-webkit-resizer]:bg-(image:--resize-handle-bg) [&::-webkit-resizer]:bg-contain dark:[&::-webkit-resizer]:bg-(image:--resize-handle-bg-dark)",
+
+                    state.isFocused && !state.isDisabled && "ring-2 ring-brand",
+                    state.isDisabled && "cursor-not-allowed bg-disabled_subtle text-disabled ring-disabled",
+                    state.isInvalid && "ring-error_subtle",
+                    state.isInvalid && state.isFocused && "ring-2 ring-error",
+
+                    typeof className === "function" ? className(state) : className,
+                )
+            }
+        />
+    );
+};
+
+TextAreaBase.displayName = "TextAreaBase";
+
+interface TextFieldProps extends AriaTextFieldProps {
+    /** Label text for the textarea */
+    label?: string;
+    /** Helper text displayed below the textarea */
+    hint?: ReactNode;
+    /** Tooltip message displayed after the label. */
+    tooltip?: string;
+    /** Class name for the textarea wrapper */
+    textAreaClassName?: TextAreaBaseProps["className"];
+    /** Ref for the textarea wrapper */
+    ref?: Ref<HTMLDivElement>;
+    /** Ref for the textarea */
+    textAreaRef?: TextAreaBaseProps["ref"];
+    /** Whether to hide required indicator from label. */
+    hideRequiredIndicator?: boolean;
+    /** Placeholder text. */
+    placeholder?: string;
+    /** Visible height of textarea in rows . */
+    rows?: number;
+    /** Visible width of textarea in columns. */
+    cols?: number;
+}
+
+export const TextArea = ({
+    label,
+    hint,
+    tooltip,
+    textAreaRef,
+    hideRequiredIndicator,
+    textAreaClassName,
+    placeholder,
+    className,
+    rows,
+    cols,
+    ...props
+}: TextFieldProps) => {
+    return (
+        <AriaTextField
+            {...props}
+            className={(state) =>
+                cx("group flex h-max w-full flex-col items-start justify-start gap-1.5", typeof className === "function" ? className(state) : className)
+            }
+        >
+            {({ isInvalid, isRequired }) => (
+                <>
+                    {label && (
+                        <Label isRequired={hideRequiredIndicator ? !hideRequiredIndicator : isRequired} tooltip={tooltip}>
+                            {label}
+                        </Label>
+                    )}
+
+                    <TextAreaBase placeholder={placeholder} className={textAreaClassName} ref={textAreaRef} rows={rows} cols={cols} />
+
+                    {hint && <HintText isInvalid={isInvalid}>{hint}</HintText>}
+                </>
+            )}
+        </AriaTextField>
+    );
+};
+
+TextArea.displayName = "TextArea";
diff --git a/src/components/base/toggle/toggle.tsx b/src/components/base/toggle/toggle.tsx
new file mode 100644
index 0000000..0a938a1
--- /dev/null
+++ b/src/components/base/toggle/toggle.tsx
@@ -0,0 +1,138 @@
+import type { ReactNode } from "react";
+import type { SwitchProps as AriaSwitchProps } from "react-aria-components";
+import { Switch as AriaSwitch } from "react-aria-components";
+import { cx } from "@/utils/cx";
+
+interface ToggleBaseProps {
+    size?: "sm" | "md";
+    slim?: boolean;
+    className?: string;
+    isHovered?: boolean;
+    isFocusVisible?: boolean;
+    isSelected?: boolean;
+    isDisabled?: boolean;
+}
+
+export const ToggleBase = ({ className, isHovered, isDisabled, isFocusVisible, isSelected, slim, size = "sm" }: ToggleBaseProps) => {
+    const styles = {
+        default: {
+            sm: {
+                root: "h-5 w-9 p-0.5",
+                switch: cx("size-4", isSelected && "translate-x-4"),
+            },
+            md: {
+                root: "h-6 w-11 p-0.5",
+                switch: cx("size-5", isSelected && "translate-x-5"),
+            },
+        },
+        slim: {
+            sm: {
+                root: "h-4 w-8",
+                switch: cx("size-4", isSelected && "translate-x-4"),
+            },
+            md: {
+                root: "h-5 w-10",
+                switch: cx("size-5", isSelected && "translate-x-5"),
+            },
+        },
+    };
+
+    const classes = slim ? styles.slim[size] : styles.default[size];
+
+    return (
+        <div
+            className={cx(
+                "cursor-pointer rounded-full bg-tertiary outline-focus-ring transition duration-150 ease-linear",
+                isSelected && "bg-brand-solid",
+                isSelected && isHovered && "bg-brand-solid_hover",
+                isDisabled && "cursor-not-allowed bg-disabled",
+                isFocusVisible && "outline-2 outline-offset-2",
+
+                slim && "ring-1 ring-secondary ring-inset",
+                slim && isSelected && "ring-transparent",
+                classes.root,
+                className,
+            )}
+        >
+            <div
+                style={{
+                    transition: "transform 0.15s ease-in-out, translate 0.15s ease-in-out, border-color 0.1s linear, background-color 0.1s linear",
+                }}
+                className={cx(
+                    "rounded-full bg-fg-white shadow-sm",
+                    isDisabled && "bg-toggle-button-fg_disabled",
+
+                    slim && "shadow-xs",
+                    slim && "border border-toggle-border",
+                    slim && isSelected && "border-toggle-slim-border_pressed",
+                    slim && isSelected && isHovered && "border-toggle-slim-border_pressed-hover",
+
+                    classes.switch,
+                )}
+            />
+        </div>
+    );
+};
+
+interface ToggleProps extends AriaSwitchProps {
+    size?: "sm" | "md";
+    label?: string;
+    hint?: ReactNode;
+    slim?: boolean;
+}
+
+export const Toggle = ({ label, hint, className, size = "sm", slim, ...ariaSwitchProps }: ToggleProps) => {
+    const sizes = {
+        sm: {
+            root: "gap-2",
+            textWrapper: "",
+            label: "text-sm font-medium",
+            hint: "text-sm",
+        },
+        md: {
+            root: "gap-3",
+            textWrapper: "gap-0.5",
+            label: "text-md font-medium",
+            hint: "text-md",
+        },
+    };
+
+    return (
+        <AriaSwitch
+            {...ariaSwitchProps}
+            className={(renderProps) =>
+                cx(
+                    "flex w-max items-start",
+                    renderProps.isDisabled && "cursor-not-allowed",
+                    sizes[size].root,
+                    typeof className === "function" ? className(renderProps) : className,
+                )
+            }
+        >
+            {({ isSelected, isDisabled, isFocusVisible, isHovered }) => (
+                <>
+                    <ToggleBase
+                        slim={slim}
+                        size={size}
+                        isHovered={isHovered}
+                        isDisabled={isDisabled}
+                        isFocusVisible={isFocusVisible}
+                        isSelected={isSelected}
+                        className={slim ? "mt-0.5" : ""}
+                    />
+
+                    {(label || hint) && (
+                        <div className={cx("flex flex-col", sizes[size].textWrapper)}>
+                            {label && <p className={cx("text-secondary select-none", sizes[size].label)}>{label}</p>}
+                            {hint && (
+                                <span className={cx("text-tertiary", sizes[size].hint)} onClick={(event) => event.stopPropagation()}>
+                                    {hint}
+                                </span>
+                            )}
+                        </div>
+                    )}
+                </>
+            )}
+        </AriaSwitch>
+    );
+};
diff --git a/src/components/base/tooltip/tooltip.tsx b/src/components/base/tooltip/tooltip.tsx
new file mode 100644
index 0000000..9497504
--- /dev/null
+++ b/src/components/base/tooltip/tooltip.tsx
@@ -0,0 +1,107 @@
+import type { ReactNode } from "react";
+import type {
+    ButtonProps as AriaButtonProps,
+    TooltipProps as AriaTooltipProps,
+    TooltipTriggerComponentProps as AriaTooltipTriggerComponentProps,
+} from "react-aria-components";
+import { Button as AriaButton, OverlayArrow as AriaOverlayArrow, Tooltip as AriaTooltip, TooltipTrigger as AriaTooltipTrigger } from "react-aria-components";
+import { cx } from "@/utils/cx";
+
+interface TooltipProps extends AriaTooltipTriggerComponentProps, Omit<AriaTooltipProps, "children"> {
+    /**
+     * The title of the tooltip.
+     */
+    title: ReactNode;
+    /**
+     * The description of the tooltip.
+     */
+    description?: ReactNode;
+    /**
+     * Whether to show the arrow on the tooltip.
+     *
+     * @default false
+     */
+    arrow?: boolean;
+    /**
+     * Delay in milliseconds before the tooltip is shown.
+     *
+     * @default 300
+     */
+    delay?: number;
+}
+
+export const Tooltip = ({
+    title,
+    description,
+    children,
+    arrow = false,
+    delay = 300,
+    closeDelay = 0,
+    trigger,
+    isDisabled,
+    isOpen,
+    defaultOpen,
+    offset = 6,
+    crossOffset,
+    placement = "top",
+    onOpenChange,
+    ...tooltipProps
+}: TooltipProps) => {
+    const isTopOrBottomLeft = ["top left", "top end", "bottom left", "bottom end"].includes(placement);
+    const isTopOrBottomRight = ["top right", "top start", "bottom right", "bottom start"].includes(placement);
+    // Set negative cross offset for left and right placement to visually balance the tooltip.
+    const calculatedCrossOffset = isTopOrBottomLeft ? -12 : isTopOrBottomRight ? 12 : 0;
+
+    return (
+        <AriaTooltipTrigger {...{ trigger, delay, closeDelay, isDisabled, isOpen, defaultOpen, onOpenChange }}>
+            {children}
+
+            <AriaTooltip
+                {...tooltipProps}
+                offset={offset}
+                placement={placement}
+                crossOffset={crossOffset ?? calculatedCrossOffset}
+                className={({ isEntering, isExiting }) => cx(isEntering && "ease-out animate-in", isExiting && "ease-in animate-out")}
+            >
+                {({ isEntering, isExiting }) => (
+                    <div
+                        className={cx(
+                            "z-50 flex max-w-xs origin-(--trigger-anchor-point) flex-col items-start gap-1 rounded-lg bg-primary-solid px-3 shadow-lg will-change-transform",
+                            description ? "py-3" : "py-2",
+
+                            isEntering &&
+                                "ease-out animate-in fade-in zoom-in-95 in-placement-left:slide-in-from-right-0.5 in-placement-right:slide-in-from-left-0.5 in-placement-top:slide-in-from-bottom-0.5 in-placement-bottom:slide-in-from-top-0.5",
+                            isExiting &&
+                                "ease-in animate-out fade-out zoom-out-95 in-placement-left:slide-out-to-right-0.5 in-placement-right:slide-out-to-left-0.5 in-placement-top:slide-out-to-bottom-0.5 in-placement-bottom:slide-out-to-top-0.5",
+                        )}
+                    >
+                        <span className="text-xs font-semibold text-white">{title}</span>
+
+                        {description && <span className="text-xs font-medium text-tooltip-supporting-text">{description}</span>}
+
+                        {arrow && (
+                            <AriaOverlayArrow>
+                                <svg
+                                    viewBox="0 0 100 100"
+                                    className="size-2.5 fill-bg-primary-solid in-placement-left:-rotate-90 in-placement-right:rotate-90 in-placement-top:rotate-0 in-placement-bottom:rotate-180"
+                                >
+                                    <path d="M0,0 L35.858,35.858 Q50,50 64.142,35.858 L100,0 Z" />
+                                </svg>
+                            </AriaOverlayArrow>
+                        )}
+                    </div>
+                )}
+            </AriaTooltip>
+        </AriaTooltipTrigger>
+    );
+};
+
+interface TooltipTriggerProps extends AriaButtonProps {}
+
+export const TooltipTrigger = ({ children, className, ...buttonProps }: TooltipTriggerProps) => {
+    return (
+        <AriaButton {...buttonProps} className={(values) => cx("h-max w-max outline-hidden", typeof className === "function" ? className(values) : className)}>
+            {children}
+        </AriaButton>
+    );
+};
diff --git a/src/components/foundations/dot-icon.tsx b/src/components/foundations/dot-icon.tsx
new file mode 100644
index 0000000..7a07c44
--- /dev/null
+++ b/src/components/foundations/dot-icon.tsx
@@ -0,0 +1,22 @@
+import type { HTMLAttributes } from "react";
+
+const sizes = {
+    sm: {
+        wh: 8,
+        c: 4,
+        r: 2.5,
+    },
+    md: {
+        wh: 10,
+        c: 5,
+        r: 4,
+    },
+};
+
+export const Dot = ({ size = "md", ...props }: HTMLAttributes<HTMLOrSVGElement> & { size?: "sm" | "md" }) => {
+    return (
+        <svg width={sizes[size].wh} height={sizes[size].wh} viewBox={`0 0 ${sizes[size].wh} ${sizes[size].wh}`} fill="none" {...props}>
+            <circle cx={sizes[size].c} cy={sizes[size].c} r={sizes[size].r} fill="currentColor" stroke="currentColor" />
+        </svg>
+    );
+};
diff --git a/src/components/foundations/featured-icon/featured-icon.tsx b/src/components/foundations/featured-icon/featured-icon.tsx
new file mode 100644
index 0000000..cf22650
--- /dev/null
+++ b/src/components/foundations/featured-icon/featured-icon.tsx
@@ -0,0 +1,154 @@
+import type { FC, ReactNode, Ref } from "react";
+import { isValidElement } from "react";
+import { cx, sortCx } from "@/utils/cx";
+import { isReactComponent } from "@/utils/is-react-component";
+
+const iconsSizes = {
+    sm: "*:data-icon:size-4",
+    md: "*:data-icon:size-5",
+    lg: "*:data-icon:size-6",
+    xl: "*:data-icon:size-7",
+};
+
+const styles = sortCx({
+    light: {
+        base: "rounded-full",
+        sizes: {
+            sm: "size-8",
+            md: "size-10",
+            lg: "size-12",
+            xl: "size-14",
+        },
+        colors: {
+            brand: "bg-brand-secondary text-featured-icon-light-fg-brand",
+            gray: "bg-tertiary text-featured-icon-light-fg-gray",
+            error: "bg-error-secondary text-featured-icon-light-fg-error",
+            warning: "bg-warning-secondary text-featured-icon-light-fg-warning",
+            success: "bg-success-secondary text-featured-icon-light-fg-success",
+        },
+    },
+
+    gradient: {
+        base: "rounded-full text-fg-white before:absolute before:inset-0 before:size-full before:rounded-full before:border before:mask-b-from-0% after:absolute after:block after:rounded-full",
+        sizes: {
+            sm: "size-8 after:size-6 *:data-icon:size-4",
+            md: "size-10 after:size-7 *:data-icon:size-4",
+            lg: "size-12 after:size-8 *:data-icon:size-5",
+            xl: "size-14 after:size-10 *:data-icon:size-5",
+        },
+        colors: {
+            brand: "before:border-utility-brand-200 before:bg-utility-brand-50 after:bg-brand-solid",
+            gray: "before:border-utility-gray-200 before:bg-utility-gray-50 after:bg-secondary-solid",
+            error: "before:border-utility-error-200 before:bg-utility-error-50 after:bg-error-solid",
+            warning: "before:border-utility-warning-200 before:bg-utility-warning-50 after:bg-warning-solid",
+            success: "before:border-utility-success-200 before:bg-utility-success-50 after:bg-success-solid",
+        },
+    },
+
+    dark: {
+        base: "text-fg-white shadow-xs-skeumorphic before:absolute before:inset-px before:border before:border-white/12 before:mask-b-from-0%",
+        sizes: {
+            sm: "size-8 rounded-md before:rounded-[5px]",
+            md: "size-10 rounded-lg before:rounded-[7px]",
+            lg: "size-12 rounded-[10px] before:rounded-[9px]",
+            xl: "size-14 rounded-xl before:rounded-[11px]",
+        },
+        colors: {
+            brand: "bg-brand-solid before:border-utility-brand-200/12",
+            gray: "bg-secondary-solid before:border-utility-gray-200/12",
+            error: "bg-error-solid before:border-utility-error-200/12",
+            warning: "bg-warning-solid before:border-utility-warning-200/12",
+            success: "bg-success-solid before:border-utility-success-200/12",
+        },
+    },
+
+    modern: {
+        base: "bg-primary shadow-xs-skeumorphic ring-1 ring-inset",
+        sizes: {
+            sm: "size-8 rounded-md",
+            md: "size-10 rounded-lg",
+            lg: "size-12 rounded-[10px]",
+            xl: "size-14 rounded-xl",
+        },
+        colors: {
+            brand: "",
+            gray: "text-fg-secondary ring-primary",
+            error: "",
+            warning: "",
+            success: "",
+        },
+    },
+    "modern-neue": {
+        base: [
+            "bg-primary_alt ring-1 ring-inset before:absolute before:inset-1",
+            // Shadow
+            "before:shadow-[0px_1px_2px_0px_rgba(0,0,0,0.1),0px_3px_3px_0px_rgba(0,0,0,0.09),1px_8px_5px_0px_rgba(0,0,0,0.05),2px_21px_6px_0px_rgba(0,0,0,0),0px_0px_0px_1px_rgba(0,0,0,0.08),1px_13px_5px_0px_rgba(0,0,0,0.01),0px_-2px_2px_0px_rgba(0,0,0,0.13)_inset] before:ring-1 before:ring-secondary_alt",
+        ].join(" "),
+        sizes: {
+            sm: "size-8 rounded-[8px] before:rounded-[4px]",
+            md: "size-10 rounded-[10px] before:rounded-[6px]",
+            lg: "size-12 rounded-[12px] before:rounded-[8px]",
+            xl: "size-14 rounded-[14px] before:rounded-[10px]",
+        },
+        colors: {
+            brand: "",
+            gray: "text-fg-secondary ring-primary",
+            error: "",
+            warning: "",
+            success: "",
+        },
+    },
+
+    outline: {
+        base: "before:absolute before:rounded-full before:border-2 after:absolute after:rounded-full after:border-2",
+        sizes: {
+            sm: "size-4 before:size-6 after:size-8.5",
+            md: "size-5 before:size-7 after:size-9.5",
+            lg: "size-6 before:size-8 after:size-10.5",
+            xl: "size-7 before:size-9 after:size-11.5",
+        },
+        colors: {
+            brand: "text-fg-brand-primary before:border-fg-brand-primary/30 after:border-fg-brand-primary/10",
+            gray: "text-fg-tertiary before:border-fg-tertiary/30 after:border-fg-tertiary/10",
+            error: "text-fg-error-primary before:border-fg-error-primary/30 after:border-fg-error-primary/10",
+            warning: "text-fg-warning-primary before:border-fg-warning-primary/30 after:border-fg-warning-primary/10",
+            success: "text-fg-success-primary before:border-fg-success-primary/30 after:border-fg-success-primary/10",
+        },
+    },
+});
+
+interface FeaturedIconProps {
+    ref?: Ref<HTMLDivElement>;
+    children?: ReactNode;
+    className?: string;
+    icon?: FC<{ className?: string }> | ReactNode;
+    size?: "sm" | "md" | "lg" | "xl";
+    color: "brand" | "gray" | "success" | "warning" | "error";
+    theme?: "light" | "gradient" | "dark" | "outline" | "modern" | "modern-neue";
+}
+
+export const FeaturedIcon = (props: FeaturedIconProps) => {
+    const { size = "sm", theme: variant = "light", color = "brand", icon: Icon, ...otherProps } = props;
+
+    return (
+        <div
+            {...otherProps}
+            data-featured-icon
+            className={cx(
+                "relative flex shrink-0 items-center justify-center",
+
+                iconsSizes[size],
+                styles[variant].base,
+                styles[variant].sizes[size],
+                styles[variant].colors[color],
+
+                props.className,
+            )}
+        >
+            {isReactComponent(Icon) && <Icon data-icon className="z-1" />}
+            {isValidElement(Icon) && <div className="z-1">{Icon}</div>}
+
+            {props.children}
+        </div>
+    );
+};
diff --git a/src/components/foundations/logo/untitledui-logo-minimal.tsx b/src/components/foundations/logo/untitledui-logo-minimal.tsx
new file mode 100644
index 0000000..2807e48
--- /dev/null
+++ b/src/components/foundations/logo/untitledui-logo-minimal.tsx
@@ -0,0 +1,170 @@
+import type { SVGProps } from "react";
+import { useId } from "react";
+import { cx } from "@/utils/cx";
+
+export const UntitledLogoMinimal = (props: SVGProps<SVGSVGElement>) => {
+    const id = useId();
+
+    return (
+        <svg viewBox="0 0 38 38" fill="none" {...props} className={cx("size-8 origin-center scale-[1.2]", props.className)}>
+            <g filter={`url(#filter0-${id}`}>
+                <g clipPath={`url(#clip0-${id}`}>
+                    <path
+                        d="M3 14.8C3 10.3196 3 8.07937 3.87195 6.36808C4.63893 4.86278 5.86278 3.63893 7.36808 2.87195C9.07937 2 11.3196 2 15.8 2H22.2C26.6804 2 28.9206 2 30.6319 2.87195C32.1372 3.63893 33.3611 4.86278 34.1281 6.36808C35 8.07937 35 10.3196 35 14.8V21.2C35 25.6804 35 27.9206 34.1281 29.6319C33.3611 31.1372 32.1372 32.3611 30.6319 33.1281C28.9206 34 26.6804 34 22.2 34H15.8C11.3196 34 9.07937 34 7.36808 33.1281C5.86278 32.3611 4.63893 31.1372 3.87195 29.6319C3 27.9206 3 25.6804 3 21.2V14.8Z"
+                        fill="white"
+                    />
+                    <path
+                        d="M3 14.8C3 10.3196 3 8.07937 3.87195 6.36808C4.63893 4.86278 5.86278 3.63893 7.36808 2.87195C9.07937 2 11.3196 2 15.8 2H22.2C26.6804 2 28.9206 2 30.6319 2.87195C32.1372 3.63893 33.3611 4.86278 34.1281 6.36808C35 8.07937 35 10.3196 35 14.8V21.2C35 25.6804 35 27.9206 34.1281 29.6319C33.3611 31.1372 32.1372 32.3611 30.6319 33.1281C28.9206 34 26.6804 34 22.2 34H15.8C11.3196 34 9.07937 34 7.36808 33.1281C5.86278 32.3611 4.63893 31.1372 3.87195 29.6319C3 27.9206 3 25.6804 3 21.2V14.8Z"
+                        fill={`url(#paint0_linear-${id}`}
+                        fillOpacity="0.2"
+                    />
+                    <g opacity="0.14" clipPath={`url(#clip1-${id}`}>
+                        <path
+                            fillRule="evenodd"
+                            clipRule="evenodd"
+                            d="M18.9612 2H19.0388V3.96123C20.8929 3.96625 22.6625 4.33069 24.2816 4.98855V2H24.3592V5.02038C25.7339 5.58859 26.9986 6.36882 28.1126 7.32031H29.602V2H29.6796V7.32031H35V7.39798H29.6796V8.88728C30.6311 10.0013 31.4113 11.266 31.9796 12.6406H35V12.7183H32.0114C32.6693 14.3373 33.0337 16.1069 33.0388 17.9609H35V18.0386H33.0388C33.0338 19.8927 32.6694 21.6622 32.0116 23.2812H35V23.3589H31.9798C31.4115 24.7337 30.6312 25.9986 29.6796 27.1128V28.6016H35V28.6792H29.6796V34H29.602V28.6792H28.1132C26.999 29.6309 25.7341 30.4113 24.3592 30.9797V34H24.2816V31.0115C22.6625 31.6693 20.8929 32.0338 19.0388 32.0388V34H18.9612V32.0388C17.1071 32.0338 15.3375 31.6693 13.7184 31.0115V34H13.6408V30.9797C12.2659 30.4113 11.001 29.6309 9.88678 28.6792H8.39804V34H8.32037V28.6792H3V28.6016H8.32037V27.1128C7.36877 25.9986 6.58847 24.7337 6.02023 23.3589H3V23.2812H5.9884C5.3306 21.6622 4.96621 19.8927 4.96122 18.0386H3V17.9609H4.96122C4.96627 16.1069 5.33073 14.3373 5.9886 12.7183H3V12.6406H6.02044C6.58866 11.266 7.36889 10.0013 8.32037 8.88728V7.39798H3V7.32031H8.32037V2H8.39804V7.32031H9.88736C11.0014 6.36882 12.2661 5.58859 13.6408 5.02038V2H13.7184V4.98855C15.3375 4.33069 17.1071 3.96626 18.9612 3.96123V2ZM18.9612 4.0389C17.1062 4.04396 15.3364 4.41075 13.7184 5.07245V7.32031H18.9612V4.0389ZM13.6408 5.10449C12.3137 5.65662 11.0902 6.40763 10.0074 7.32031H13.6408V5.10449ZM9.79719 7.39798H8.39804V8.79711C8.8311 8.29865 9.29872 7.83103 9.79719 7.39798ZM8.39804 8.91598C8.86452 8.37206 9.37213 7.86446 9.91606 7.39798H13.6408V12.6406H8.39804V8.91598ZM8.32037 9.00733C7.4077 10.0901 6.65669 11.3136 6.10454 12.6406H8.32037V9.00733ZM6.0725 12.7183C5.41078 14.3362 5.04397 16.106 5.03889 17.9609H8.32037V12.7183H6.0725ZM5.03889 18.0386C5.04391 19.8935 5.41065 21.6633 6.0723 23.2812H8.32037V18.0386H5.03889ZM6.10434 23.3589C6.6565 24.6861 7.40759 25.9098 8.32037 26.9927V23.3589H6.10434ZM8.39804 27.2029V28.6016H9.79662C9.29837 28.1686 8.83093 27.7012 8.39804 27.2029ZM9.91548 28.6016C9.37178 28.1352 8.86436 27.6278 8.39804 27.0841V23.3589H13.6408V28.6016H9.91548ZM10.0068 28.6792C11.0898 29.5921 12.3135 30.3433 13.6408 30.8955V28.6792H10.0068ZM13.7184 30.9276C15.3364 31.5893 17.1062 31.9561 18.9612 31.9611V28.6792H13.7184V30.9276ZM19.0388 31.9611C20.8937 31.9561 22.6636 31.5893 24.2816 30.9276V28.6792H19.0388V31.9611ZM24.3592 30.8955C25.6865 30.3433 26.9102 29.5921 27.9932 28.6792H24.3592V30.8955ZM28.2034 28.6016H29.602V27.2029C29.1691 27.7012 28.7016 28.1686 28.2034 28.6016ZM29.602 27.0841C29.1356 27.6278 28.6282 28.1352 28.0845 28.6016H24.3592V23.3589H29.602V27.0841ZM29.6796 26.9927C30.5924 25.9098 31.3435 24.6861 31.8957 23.3589H29.6796V26.9927ZM31.9277 23.2812C32.5894 21.6633 32.9561 19.8935 32.9611 18.0386H29.6796V23.2812H31.9277ZM32.9611 17.9609C32.956 16.1061 32.5892 14.3362 31.9275 12.7183H29.6796V17.9609H32.9611ZM31.8955 12.6406C31.3433 11.3136 30.5923 10.0901 29.6796 9.00733V12.6406H31.8955ZM29.602 8.79711V7.39798H28.2028C28.7013 7.83103 29.1689 8.29865 29.602 8.79711ZM28.0839 7.39798C28.6279 7.86446 29.1355 8.37206 29.602 8.91598V12.6406H24.3592V7.39798H28.0839ZM27.9926 7.32031C26.9098 6.40763 25.6863 5.65662 24.3592 5.10449V7.32031H27.9926ZM24.2816 5.07245C22.6636 4.41074 20.8937 4.04395 19.0388 4.0389V7.32031H24.2816V5.07245ZM13.7184 7.39798H18.9612V12.6406H13.7184V7.39798ZM24.2816 7.39798H19.0388V12.6406H24.2816V7.39798ZM13.6408 23.2812H8.39804V18.0386H13.6408V23.2812ZM13.7184 23.3589V28.6016H18.9612V23.3589H13.7184ZM18.9612 23.2812H13.7184V18.0386H18.9612V23.2812ZM19.0388 23.3589V28.6016H24.2816V23.3589H19.0388ZM24.2816 23.2812H19.0388V18.0386H24.2816V23.2812ZM29.602 23.2812H24.3592V18.0386H29.602V23.2812ZM13.7184 12.7183H18.9612V17.9609H13.7184V12.7183ZM8.39804 12.7183L13.6408 12.7183V17.9609H8.39804V12.7183ZM24.2816 12.7183H19.0388V17.9609H24.2816V12.7183ZM24.3592 17.9609V12.7183L29.602 12.7183V17.9609H24.3592Z"
+                            fill="#0A0D12"
+                        />
+                    </g>
+                    <g filter={`url(#filter1_dd-${id}`}>
+                        <rect x="11" y="10" width="16" height="16" rx="8" fill={`url(#paint1_linear-${id}`} />
+                        <rect x="11" y="10" width="16" height="16" rx="8" fill={`url(#paint2_radial-${id}`} fillOpacity="0.08" />
+                        <rect x="11" y="10" width="16" height="16" rx="8" fill={`url(#paint3_radial-${id}`} fillOpacity="0.18" />
+                        <rect x="11" y="10" width="16" height="16" rx="8" fill={`url(#paint4_radial-${id}`} fillOpacity="0.05" />
+                        <path
+                            d="M23.8 14.0414C23.8 15.3898 21.651 14.5297 19 14.5297C16.349 14.5297 14.2 15.3898 14.2 14.0414C14.2 12.693 16.349 11.6 19 11.6C21.651 11.6 23.8 12.693 23.8 14.0414Z"
+                            fill={`url(#paint5_linear-${id}`}
+                            fillOpacity="0.4"
+                        />
+                    </g>
+                </g>
+                <path
+                    d="M3.1 14.8C3.1 12.5581 3.10008 10.8828 3.20866 9.55376C3.31715 8.22593 3.53345 7.25268 3.96105 6.41348C4.71845 4.92699 5.92699 3.71845 7.41348 2.96105C8.25268 2.53345 9.22593 2.31715 10.5538 2.20866C11.8828 2.10008 13.5581 2.1 15.8 2.1H22.2C24.4419 2.1 26.1172 2.10008 27.4462 2.20866C28.7741 2.31715 29.7473 2.53345 30.5865 2.96105C32.073 3.71845 33.2816 4.92699 34.039 6.41348C34.4665 7.25268 34.6828 8.22593 34.7913 9.55376C34.8999 10.8828 34.9 12.5581 34.9 14.8V21.2C34.9 23.4419 34.8999 25.1172 34.7913 26.4462C34.6828 27.7741 34.4665 28.7473 34.039 29.5865C33.2816 31.073 32.073 32.2816 30.5865 33.039C29.7473 33.4665 28.7741 33.6828 27.4462 33.7913C26.1172 33.8999 24.4419 33.9 22.2 33.9H15.8C13.5581 33.9 11.8828 33.8999 10.5538 33.7913C9.22593 33.6828 8.25268 33.4665 7.41348 33.039C5.92699 32.2816 4.71845 31.073 3.96105 29.5865C3.53345 28.7473 3.31715 27.7741 3.20866 26.4462C3.10008 25.1172 3.1 23.4419 3.1 21.2V14.8Z"
+                    stroke="#0A0D12"
+                    strokeOpacity="0.12"
+                    strokeWidth="0.2"
+                />
+            </g>
+            <image
+                href="data:image/webp;base64,UklGRoYHAABXRUJQVlA4WAoAAAAQAAAAnwAATwAAQUxQSIcFAAABD9D/iAjY3/9PbSp7ed+ZTNJJKWUSCpsenYbSDay1rPukpGxgrV3WtfCsu16XSSmc9NgTuLa+Qa+7e1h3d3ff/em6RvQ/jjUcsJXcxqnp73y0Dd1iS99JJiIk8ActCkLbexBTRwGAiRepAc0DWAxNoPI469jGE+uApSJKwSaxwH/SDuvFRgSL+iF90f0/uOinRfp2jRkl3Nff8aS4scgmTK8WSJAVeVMRv8MPmIiL0AL18jbT0iUQ4DLPPF/UJ4mbkQ4c4NfrQGJI7ocYCmQLUqQGLS9i1ZjJ9YD0wfkBRF/XQbJCuVeo1XGMePjwSf2n48dncwVJ5gjukhRfrTlAVTy4rpscDVXOijJypxQS6iZgBm9Q/kbbeQC8WMyky2I1RSACacETMY7ld3aOWZWw7g04bJcNNfCX6IsL4cz9WT+HbkzgHlngSQGIuajVbyZkyV32WwfZg2CY/K69d78dyr19p3jzASrzrYmkoHQM/2cGci2NjEfmfsjszTI6mhxAeqmb/h72AaqBsGWdCrha2VmpQtyCx/EEGm/dvEnAt/gBqYPCDEh3R6bFAQoJcUvQRIdkuD2Zk4H+uHUhGxHpl7F/DNHVZnf7DX/F7JqyqhhOZ4Vy4aVATT89pT6Oio4sfs5ULH9Ur0ZpYPL1Eq+om9+wDFkhQ0IDF7EBFfA8yWGAgWQ8lWnm0cnzknwjxU6eQkAfVsiZBxhw0hjPFwx7uwcLkAZYD2lOyDqorXqpgjlI9zdQX61m7fly+X4FlyixZi0OifzLtlA26N2N9+N5d8NP3f3h7AG4EfiMPaLDdgJOUEz0LipV00L4ouO+0F5826ZwaV2BSUWQ03dWSTzXqKZVC9pM6caAo/Xxu9V2Y5hwD0eAaPXq6ndNlvNQYS4NcAJpT6UHVigUPfSX5tJxATt1ZVukUft1iDcX/swp1q9mPN+Jn8hNz22sgVH/Hj6e+N/5DPU6IkcEMIhhCYffRA+HtZbBngZ4epF4vzCAu6OSk+D6xA2piTzCJVPIGnseVYeMjMgTPejNPc6yYypzXj4G8AFZeiu3+MlN8E5Pzm+e6XoV043lWOqKp7XjesRhra133Li79Z2UoDiwizOksgRVaMAsj3o/INvNRZ3HSA/vuYkPsoNbBgIopPsHfiPSdJY2Szy752RKphatmd/pACuOi57f3tVk30vJ3DAMf07h1UMzknO2Ez8B24dV7YxgK87zMIKdB+w8BCp59/G29K5GW5NM97V3NwBS9BcIN/91ETsQNwRQcWhAQloc1ngPoAcX3t3GgqXP8f88Sj3S07Ub09YQWbJ1MHRgEpl10ayV96mWyfsGaBONZoORvD9zPei0Ad6XtGZytQ6WDxJN61//aXV1BosiPeNS69b2B+XS+dc66dgPjB9mfyNvfPFhuUQRyOu1pHN+Dxw7u7YMP7Gb0DGL4nRcJQDEufQ+UMcP6F6a3RX/ZtPJN8P/yb/g4YsEpOOEk72GY2VNq7AlCJ/n96M3Rq6J5sXXNmrgfHjypfv3WSO/pOuElp+ckuHDNSLmsfmHdmSj9j+Nmosz8FeFuu1+0QMOQlMnTxfNAkTfoe0Rijtpq38Mpj+W9b3yUeHlfcazjLbQQhds194PAPDZwgj71n+VRxDXHscni/Wky7ywckRU4/JqDpVmuOed3eBwCb10sD55/TfECEJNPJPYeG6UuvcrtswWvQOGXDft/1xrxR7Az/JQWtisbGGbQrgbQjx2rJRUh0am0G/Yj0Cu/NQy7f8JtQVbh+ZCgIt7gOEADvJFKwEr7/GrgQql3CM/urtBzm9nMnCj53WEWr3/5BJROomYBUwsRXInvP5O3DqZfVoD9WRpEsUH4yx6BI4JaaMQZUYZ8F7y0KBvD/PTDSR/CgBWUDgg2AEAAFATAJ0BKqAAUAA+KRKHQqGhCj4CcgwBQlnAM4spE3mv/5foxj7CIWswa6AqkXFI+Yh0P/x5D3Ezvirfp0TGLFgI7x9F5fO5IHYoatU6Evly836v+YqU0oO2cfVypfHDsDw29g1p0iydYsDT1vJNxjinCDWybXmWiyxS9UEu/eRrG49iyvR67gMIAazf0vPgtrbCHQlTv5rJV7PPFdfirZtz+MAA/v5sJNKJKeJ/hzR4FAhZT+MvOLxH42j6POGLQ5xx2In90EX/MqvckpWMe6weKHop6T9BUAz/qmeY0d8DTiGxEk9YU598XXHiiNGKd3N9bWu4tL9X/OTRVy1Rn7PiG3QoRIX3J93WJsqnemrvJRVh5OFlmDx8B2NZglxXEALZRATlzsBOth3ETpiwt4j0QGUWf9bqg+8o+N9xVYJQdwytiTyuepp1FCA/u6R5xx93RhFIuyDILKBC2Y5InXCxD6GMe2LENm7ZJ/grDJ4/Sw87hS1FBNG9/Q83pgBC8DNlOmf4pz//jBR6YIzM9rp4182sAr4cYbiEejZB40FUN1LWRAjTwjz+qDQMg6IT9yo01SmHMkGkr4vQZayROK4PIIkRRSAlJALZq89W30VJUep6YrggAAA="
+                x="0"
+                y="19"
+                width="38"
+                height="19"
+                transform="scale(0.84) translate(0, -1.5)"
+                className="origin-center"
+                preserveAspectRatio="xMidYMax slice"
+                clipPath={`url(#imageClip-${id})`}
+            />
+
+            <defs>
+                <clipPath id={`imageClip-${id}`}>
+                    <path d="M 0 19 L 38 19 L 38 28.88  A 9.12 9.12 0 0 1 28.88 38 L 9.12 38 A 9.12 9.12 0 0 1 0 28.88 Z" />
+                </clipPath>
+                <filter id={`filter0-${id}`} x="0" y="0" width="38" height="38" filterUnits="userSpaceOnUse" colorInterpolationFilters="sRGB">
+                    <feFlood floodOpacity="0" result="BackgroundImageFix" />
+                    <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha" />
+                    <feOffset dy="1" />
+                    <feGaussianBlur stdDeviation="1" />
+                    <feColorMatrix type="matrix" values="0 0 0 0 0.0392157 0 0 0 0 0.0509804 0 0 0 0 0.0705882 0 0 0 0.06 0" />
+                    <feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow" />
+                    <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha" />
+                    <feOffset dy="1" />
+                    <feGaussianBlur stdDeviation="1.5" />
+                    <feColorMatrix type="matrix" values="0 0 0 0 0.0392157 0 0 0 0 0.0509804 0 0 0 0 0.0705882 0 0 0 0.1 0" />
+                    <feBlend mode="normal" in2="effect1_dropShadow" result="effect2_dropShadow" />
+                    <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha" />
+                    <feMorphology radius="0.5" operator="erode" in="SourceAlpha" result="effect3_dropShadow" />
+                    <feOffset dy="1" />
+                    <feGaussianBlur stdDeviation="0.5" />
+                    <feComposite in2="hardAlpha" operator="out" />
+                    <feColorMatrix type="matrix" values="0 0 0 0 0.0392157 0 0 0 0 0.0509804 0 0 0 0 0.0705882 0 0 0 0.13 0" />
+                    <feBlend mode="normal" in2="effect2_dropShadow" result="effect3_dropShadow" />
+                    <feBlend mode="normal" in="SourceGraphic" in2="effect3_dropShadow" result="shape" />
+                    <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha" />
+                    <feOffset dy="-0.5" />
+                    <feGaussianBlur stdDeviation="0.25" />
+                    <feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1" />
+                    <feColorMatrix type="matrix" values="0 0 0 0 0.0392157 0 0 0 0 0.0509804 0 0 0 0 0.0705882 0 0 0 0.1 0" />
+                    <feBlend mode="normal" in2="shape" result="effect4_innerShadow" />
+                </filter>
+                <filter id={`filter1_dd-${id}`} x="8" y="8" width="22" height="22" filterUnits="userSpaceOnUse" colorInterpolationFilters="sRGB">
+                    <feFlood floodOpacity="0" result="BackgroundImageFix" />
+                    <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha" />
+                    <feOffset dy="1" />
+                    <feGaussianBlur stdDeviation="1" />
+                    <feColorMatrix type="matrix" values="0 0 0 0 0.0392157 0 0 0 0 0.0509804 0 0 0 0 0.0705882 0 0 0 0.06 0" />
+                    <feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow" />
+                    <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha" />
+                    <feOffset dy="1" />
+                    <feGaussianBlur stdDeviation="1.5" />
+                    <feColorMatrix type="matrix" values="0 0 0 0 0.0392157 0 0 0 0 0.0509804 0 0 0 0 0.0705882 0 0 0 0.1 0" />
+                    <feBlend mode="normal" in2="effect1_dropShadow" result="effect2_dropShadow" />
+                    <feBlend mode="normal" in="SourceGraphic" in2="effect2_dropShadow" result="shape" />
+                </filter>
+                <filter id={`filter2_b-${id}`} x="-2" y="13" width="42" height="26" filterUnits="userSpaceOnUse" colorInterpolationFilters="sRGB">
+                    <feFlood floodOpacity="0" result="BackgroundImageFix" />
+                    <feGaussianBlur in="BackgroundImageFix" stdDeviation="2.5" />
+                    <feComposite in2="SourceAlpha" operator="in" result="effect1_backgroundBlur" />
+                    <feBlend mode="normal" in="SourceGraphic" in2="effect1_backgroundBlur" result="shape" />
+                </filter>
+                <linearGradient id={`paint0_linear-${id}`} x1="19" y1="2" x2="19" y2="34" gradientUnits="userSpaceOnUse">
+                    <stop stopColor="white" />
+                    <stop offset="1" stopColor="#0A0D12" />
+                </linearGradient>
+                <linearGradient id={`paint1_linear-${id}`} x1="15" y1="26" x2="23" y2="10" gradientUnits="userSpaceOnUse">
+                    <stop stopColor="#53389E" />
+                    <stop offset="1" stopColor="#6941C6" />
+                </linearGradient>
+                <radialGradient
+                    id={`paint2_radial-${id}`}
+                    cx="0"
+                    cy="0"
+                    r="1"
+                    gradientUnits="userSpaceOnUse"
+                    gradientTransform="translate(19 10) rotate(90) scale(12)"
+                >
+                    <stop stopColor="white" stopOpacity="0" />
+                    <stop offset="0.5" stopColor="white" stopOpacity="0" />
+                    <stop offset="0.99" stopColor="white" />
+                    <stop offset="1" stopColor="white" stopOpacity="0" />
+                </radialGradient>
+                <radialGradient
+                    id={`paint3_radial-${id}`}
+                    cx="0"
+                    cy="0"
+                    r="1"
+                    gradientUnits="userSpaceOnUse"
+                    gradientTransform="translate(19 18) rotate(90) scale(8)"
+                >
+                    <stop offset="0.746599" stopColor="white" stopOpacity="0" />
+                    <stop offset="1" stopColor="white" />
+                </radialGradient>
+                <radialGradient
+                    id={`paint4_radial-${id}`}
+                    cx="0"
+                    cy="0"
+                    r="1"
+                    gradientUnits="userSpaceOnUse"
+                    gradientTransform="translate(19 14.6) rotate(90) scale(7)"
+                >
+                    <stop stopColor="white" />
+                    <stop offset="1" stopColor="white" stopOpacity="0" />
+                </radialGradient>
+                <linearGradient id={`paint5_linear-${id}`} x1="19" y1="11.6" x2="19" y2="14.8" gradientUnits="userSpaceOnUse">
+                    <stop stopColor="white" />
+                    <stop offset="1" stopColor="white" stopOpacity="0.1" />
+                </linearGradient>
+                <clipPath id={`clip0-${id}`}>
+                    <path
+                        d="M3 14.8C3 10.3196 3 8.07937 3.87195 6.36808C4.63893 4.86278 5.86278 3.63893 7.36808 2.87195C9.07937 2 11.3196 2 15.8 2H22.2C26.6804 2 28.9206 2 30.6319 2.87195C32.1372 3.63893 33.3611 4.86278 34.1281 6.36808C35 8.07937 35 10.3196 35 14.8V21.2C35 25.6804 35 27.9206 34.1281 29.6319C33.3611 31.1372 32.1372 32.3611 30.6319 33.1281C28.9206 34 26.6804 34 22.2 34H15.8C11.3196 34 9.07937 34 7.36808 33.1281C5.86278 32.3611 4.63893 31.1372 3.87195 29.6319C3 27.9206 3 25.6804 3 21.2V14.8Z"
+                        fill="white"
+                    />
+                </clipPath>
+                <clipPath id={`clip1-${id}`}>
+                    <rect width="32" height="32" fill="white" transform="translate(3 2)" />
+                </clipPath>
+            </defs>
+        </svg>
+    );
+};
diff --git a/src/components/foundations/logo/untitledui-logo.tsx b/src/components/foundations/logo/untitledui-logo.tsx
new file mode 100644
index 0000000..7ccd1dc
--- /dev/null
+++ b/src/components/foundations/logo/untitledui-logo.tsx
@@ -0,0 +1,58 @@
+import type { HTMLAttributes } from "react";
+import { cx } from "@/utils/cx";
+import { UntitledLogoMinimal } from "./untitledui-logo-minimal";
+
+export const UntitledLogo = (props: HTMLAttributes<HTMLOrSVGElement>) => {
+    return (
+        <div {...props} className={cx("flex h-8 w-max items-center justify-start overflow-visible", props.className)}>
+            {/* Minimal logo */}
+            <UntitledLogoMinimal className="aspect-square h-full w-auto shrink-0" />
+
+            {/* Gap that adjusts to the height of the container */}
+            <div className="aspect-[0.3] h-full" />
+
+            {/* Logomark */}
+            <svg viewBox="0 0 97 32" fill="none" className="aspect-[3] h-full shrink-0">
+                <path
+                    d="M33.9101 10.2372C34.2321 10.5355 34.6179 10.6847 35.0678 10.6847C35.5176 10.6847 35.9011 10.5355 36.2183 10.2372C36.5403 9.9342 36.7013 9.57199 36.7013 9.15058C36.7013 8.73392 36.5403 8.37644 36.2183 8.07814C35.9011 7.77511 35.5176 7.6236 35.0678 7.6236C34.6179 7.6236 34.2321 7.77511 33.9101 8.07814C33.5928 8.37644 33.4342 8.73392 33.4342 9.15058C33.4342 9.57199 33.5928 9.9342 33.9101 10.2372Z"
+                    className="fill-fg-primary"
+                />
+                <path
+                    d="M11.2997 20.6847C11.8063 19.8892 12.0597 18.9612 12.0597 17.9006V8.45456H8.98438V17.6378C8.98438 18.1918 8.86127 18.6842 8.61506 19.1151C8.37358 19.5459 8.0303 19.8845 7.58523 20.1307C7.14489 20.3769 6.62642 20.5 6.02983 20.5C5.43797 20.5 4.91951 20.3769 4.47443 20.1307C4.02936 19.8845 3.68371 19.5459 3.4375 19.1151C3.19602 18.6842 3.07528 18.1918 3.07528 17.6378V8.45456H0V17.9006C0 18.9612 0.250947 19.8892 0.752841 20.6847C1.25473 21.4801 1.95786 22.1004 2.86222 22.5455C3.76657 22.9858 4.82244 23.206 6.02983 23.206C7.23248 23.206 8.28599 22.9858 9.19034 22.5455C10.0947 22.1004 10.7978 21.4801 11.2997 20.6847Z"
+                    className="fill-fg-primary"
+                />
+                <path
+                    d="M18.3589 12.51C17.7907 12.8793 17.3859 13.3812 17.1444 14.0156H17.0165V12.0909H14.133V23H17.1586V16.6932C17.1633 16.2244 17.2509 15.8244 17.4214 15.4929C17.5966 15.1567 17.838 14.9011 18.1458 14.7259C18.4583 14.5507 18.8182 14.4631 19.2254 14.4631C19.8314 14.4631 20.3073 14.6525 20.6529 15.0313C20.9986 15.4053 21.169 15.9262 21.1643 16.5938V23H24.1898V16.054C24.1898 15.2065 24.0336 14.4773 23.7211 13.8665C23.4086 13.251 22.9706 12.7775 22.4072 12.446C21.8437 12.1146 21.1832 11.9489 20.4256 11.9489C19.616 11.9489 18.9271 12.1359 18.3589 12.51Z"
+                    className="fill-fg-primary"
+                />
+                <path
+                    d="M27.3463 21.821C27.0433 21.3523 26.8941 20.7604 26.8989 20.0455V14.3637H25.4074V12.0909H26.8989V9.47729H29.9244V12.0909H31.977V14.3637H29.9244V19.6477C29.9244 19.9271 29.967 20.1449 30.0523 20.3012C30.1375 20.4527 30.2559 20.5592 30.4074 20.6208C30.5636 20.6823 30.7436 20.7131 30.9472 20.7131C31.0892 20.7131 31.2313 20.7012 31.3733 20.6776C31.5153 20.6492 31.6242 20.6279 31.7 20.6137L32.1759 22.8651C32.0243 22.9124 31.8113 22.9669 31.5366 23.0284C31.262 23.0947 30.9282 23.135 30.5352 23.1492C29.8061 23.1776 29.1669 23.0805 28.6176 22.858C28.0731 22.6354 27.6493 22.2898 27.3463 21.821Z"
+                    className="fill-fg-primary"
+                />
+                <path
+                    d="M39.769 21.821C39.4659 21.3523 39.3168 20.7604 39.3215 20.0455V14.3637H37.83V12.0909H39.3215V9.47729H42.3471V12.0909H44.3996V14.3637H42.3471V19.6477C42.3471 19.9271 42.3897 20.1449 42.4749 20.3012C42.5602 20.4527 42.6785 20.5592 42.83 20.6208C42.9863 20.6823 43.1662 20.7131 43.3698 20.7131C43.5119 20.7131 43.6539 20.7012 43.796 20.6776C43.938 20.6492 44.0469 20.6279 44.1227 20.6137L44.5985 22.8651C44.447 22.9124 44.2339 22.9669 43.9593 23.0284C43.6847 23.0947 43.3509 23.135 42.9579 23.1492C42.2287 23.1776 41.5895 23.0805 41.0403 22.858C40.4958 22.6354 40.072 22.2898 39.769 21.821Z"
+                    className="fill-fg-primary"
+                />
+                <path
+                    fillRule="evenodd"
+                    clipRule="evenodd"
+                    d="M56.2257 23.2131C55.1035 23.2131 54.1376 22.9858 53.328 22.5313C52.5231 22.072 51.9028 21.4233 51.4672 20.5852C51.0316 19.7424 50.8138 18.7458 50.8138 17.5952C50.8138 16.473 51.0316 15.4882 51.4672 14.6406C51.9028 13.7931 52.516 13.1326 53.3067 12.6591C54.1021 12.1856 55.0349 11.9489 56.105 11.9489C56.8247 11.9489 57.4946 12.0649 58.1149 12.2969C58.7399 12.5242 59.2844 12.8674 59.7484 13.3267C60.2172 13.786 60.5818 14.3637 60.8422 15.0597C61.1026 15.751 61.2328 16.5606 61.2328 17.4887V18.3196H53.8038V18.3267C53.8038 18.8665 53.9033 19.3329 54.1021 19.7259C54.3057 20.1189 54.5922 20.4219 54.9615 20.635C55.3308 20.848 55.7688 20.9546 56.2754 20.9546C56.6116 20.9546 56.9194 20.9072 57.1987 20.8125C57.4781 20.7178 57.7172 20.5758 57.916 20.3864C58.1149 20.197 58.2664 19.965 58.3706 19.6904L61.1689 19.875C61.0268 20.5474 60.7357 21.1345 60.2953 21.6364C59.8597 22.1335 59.2963 22.5218 58.605 22.8012C57.9184 23.0758 57.1253 23.2131 56.2257 23.2131ZM54.1092 15.3722C53.9258 15.6954 53.8249 16.0529 53.8067 16.4446H58.3848C58.3848 16.009 58.2901 15.6231 58.1007 15.2869C57.9113 14.9508 57.6485 14.688 57.3124 14.4986C56.9809 14.3045 56.595 14.2074 56.1547 14.2074C55.6954 14.2074 55.2882 14.3139 54.9331 14.527C54.5827 14.7353 54.3081 15.0171 54.1092 15.3722Z"
+                    className="fill-fg-primary"
+                />
+                <path
+                    fillRule="evenodd"
+                    clipRule="evenodd"
+                    d="M64.5757 22.5384C65.2481 22.9645 65.9985 23.1776 66.8271 23.1776C67.4143 23.1776 67.9114 23.0805 68.3186 22.8864C68.7305 22.6923 69.0643 22.4484 69.32 22.1548C69.5804 21.8566 69.7817 21.5559 69.9237 21.2529H70.0516V23H73.0345V8.45456H70.0161V13.9233H69.9237C69.7911 13.6298 69.597 13.3315 69.3413 13.0284C69.0904 12.7207 68.7589 12.465 68.347 12.2614C67.9398 12.053 67.4308 11.9489 66.82 11.9489C66.0198 11.9489 65.2836 12.1572 64.6112 12.5739C63.9436 12.9858 63.4086 13.6084 63.0061 14.4418C62.6036 15.2704 62.4024 16.3097 62.4024 17.5597C62.4024 18.7765 62.5965 19.804 62.9848 20.6421C63.3778 21.4754 63.9081 22.1075 64.5757 22.5384ZM69.0217 20.3722C68.6856 20.6373 68.2736 20.7699 67.7859 20.7699C67.2888 20.7699 66.8698 20.635 66.5288 20.3651C66.1927 20.0905 65.9346 19.7117 65.7547 19.2287C65.5795 18.741 65.4919 18.1799 65.4919 17.5455C65.4919 16.9157 65.5795 16.3618 65.7547 15.8835C65.9299 15.4053 66.1879 15.0313 66.5288 14.7614C66.8698 14.4915 67.2888 14.3566 67.7859 14.3566C68.2736 14.3566 68.6879 14.4868 69.0288 14.7472C69.3698 15.0076 69.6302 15.3769 69.8101 15.8551C69.99 16.3334 70.08 16.8968 70.08 17.5455C70.08 18.1941 69.9876 18.76 69.803 19.2429C69.6231 19.7259 69.3626 20.1023 69.0217 20.3722Z"
+                    className="fill-fg-primary"
+                />
+                <path
+                    d="M88.0229 19.1151C88.2691 18.6842 88.3922 18.1918 88.3922 17.6378V8.45456H91.4675V17.9006C91.4675 18.9612 91.2142 19.8892 90.7075 20.6847C90.2056 21.4801 89.5025 22.1004 88.5982 22.5455C87.6938 22.9858 86.6403 23.206 85.4376 23.206C84.2303 23.206 83.1744 22.9858 82.27 22.5455C81.3657 22.1004 80.6625 21.4801 80.1607 20.6847C79.6588 19.8892 79.4078 18.9612 79.4078 17.9006V8.45456H82.4831V17.6378C82.4831 18.1918 82.6038 18.6842 82.8453 19.1151C83.0915 19.5459 83.4372 19.8845 83.8822 20.1307C84.3273 20.3769 84.8458 20.5 85.4376 20.5C86.0342 20.5 86.5527 20.3769 86.993 20.1307C87.4381 19.8845 87.7814 19.5459 88.0229 19.1151Z"
+                    className="fill-fg-primary"
+                />
+                <path d="M33.5479 12.0909V23H36.5734V12.0909H33.5479Z" className="fill-fg-primary" />
+                <path d="M49.2305 23V8.45456H46.2049V23H49.2305Z" className="fill-fg-primary" />
+                <path d="M96.6729 23V8.45456H93.5977V23H96.6729Z" className="fill-fg-primary" />
+            </svg>
+        </div>
+    );
+};
diff --git a/src/components/foundations/payment-icons/amex-icon.tsx b/src/components/foundations/payment-icons/amex-icon.tsx
new file mode 100644
index 0000000..1e30810
--- /dev/null
+++ b/src/components/foundations/payment-icons/amex-icon.tsx
@@ -0,0 +1,17 @@
+import type { SVGProps } from "react";
+
+const AmexIcon = (props: SVGProps<SVGSVGElement>) => {
+    return (
+        <svg width="34" height="24" viewBox="0 0 34 24" fill="none" {...props}>
+            <path d="M0 4C0 1.79086 1.79086 0 4 0H30C32.2091 0 34 1.79086 34 4V20C34 22.2091 32.2091 24 30 24H4C1.79086 24 0 22.2091 0 20V4Z" fill="#1F72CD" />
+            <path
+                fillRule="evenodd"
+                clipRule="evenodd"
+                d="M6.09517 8.5L2.91406 15.7467H6.7223L7.19441 14.5913H8.27355L8.74566 15.7467H12.9375V14.8649L13.311 15.7467H15.4793L15.8528 14.8462V15.7467H24.5706L25.6307 14.6213L26.6232 15.7467L31.1009 15.7561L27.9097 12.1436L31.1009 8.5H26.6927L25.6608 9.60463L24.6995 8.5H15.2156L14.4013 10.3704L13.5678 8.5H9.7675V9.35186L9.34474 8.5H6.09517ZM6.83205 9.52905H8.68836L10.7984 14.4431V9.52905H12.8319L14.4617 13.0524L15.9637 9.52905H17.987V14.7291H16.7559L16.7458 10.6544L14.9509 14.7291H13.8495L12.0446 10.6544V14.7291H9.51179L9.03162 13.5633H6.43745L5.95827 14.728H4.60123L6.83205 9.52905ZM24.1196 9.52905H19.1134V14.726H24.0421L25.6307 13.0036L27.1618 14.726H28.7624L26.436 12.1426L28.7624 9.52905H27.2313L25.6507 11.2316L24.1196 9.52905ZM7.73508 10.4089L6.8804 12.4856H8.58876L7.73508 10.4089ZM20.3497 11.555V10.6057V10.6048H23.4734L24.8364 12.1229L23.413 13.6493H20.3497V12.613H23.0808V11.555H20.3497Z"
+                fill="white"
+            />
+        </svg>
+    );
+};
+
+export default AmexIcon;
diff --git a/src/components/foundations/payment-icons/apple-pay-icon.tsx b/src/components/foundations/payment-icons/apple-pay-icon.tsx
new file mode 100644
index 0000000..a09a747
--- /dev/null
+++ b/src/components/foundations/payment-icons/apple-pay-icon.tsx
@@ -0,0 +1,25 @@
+import type { SVGProps } from "react";
+
+const ApplePayIcon = (props: SVGProps<SVGSVGElement>) => {
+    return (
+        <svg width="34" height="24" viewBox="0 0 34 24" fill="none" {...props}>
+            <path
+                d="M0.5 4C0.5 2.067 2.067 0.5 4 0.5H30C31.933 0.5 33.5 2.067 33.5 4V20C33.5 21.933 31.933 23.5 30 23.5H4C2.067 23.5 0.5 21.933 0.5 20V4Z"
+                fill="white"
+            />
+            <path
+                d="M0.5 4C0.5 2.067 2.067 0.5 4 0.5H30C31.933 0.5 33.5 2.067 33.5 4V20C33.5 21.933 31.933 23.5 30 23.5H4C2.067 23.5 0.5 21.933 0.5 20V4Z"
+                className="stroke-border-secondary"
+                strokeWidth="0.75"
+            />
+            <path
+                fillRule="evenodd"
+                clipRule="evenodd"
+                d="M9.44921 8.34316C9.16382 8.69506 8.70721 8.97261 8.2506 8.93296C8.19353 8.45715 8.41707 7.95161 8.67867 7.63936C8.96406 7.27755 9.46348 7.01983 9.86777 7C9.91533 7.49563 9.72983 7.98135 9.44921 8.34316ZM9.86297 9.02712C9.46071 9.003 9.09366 9.15319 8.79718 9.2745C8.60639 9.35256 8.44483 9.41867 8.32191 9.41867C8.18397 9.41867 8.01574 9.34903 7.82685 9.27084L7.82685 9.27084C7.57935 9.16838 7.29638 9.05124 6.99964 9.05686C6.31948 9.06677 5.68688 9.46823 5.33967 10.1076C4.62621 11.3863 5.15417 13.2796 5.84384 14.3205C6.18155 14.8359 6.58584 15.4009 7.11855 15.3811C7.35291 15.3719 7.5215 15.2973 7.69597 15.2202C7.89683 15.1314 8.10549 15.0391 8.43131 15.0391C8.74582 15.0391 8.94536 15.129 9.1369 15.2152C9.31903 15.2973 9.49393 15.376 9.75358 15.3712C10.3053 15.3613 10.6525 14.8557 10.9902 14.3403C11.3547 13.7871 11.5148 13.2471 11.5391 13.1652L11.542 13.1557C11.5414 13.1551 11.5369 13.153 11.5289 13.1492C11.4071 13.0911 10.476 12.6469 10.467 11.4557C10.4581 10.4559 11.2056 9.94935 11.3233 9.86961L11.3233 9.8696C11.3304 9.86476 11.3353 9.86149 11.3374 9.85978C10.8618 9.12625 10.1198 9.04695 9.86297 9.02712ZM13.6824 15.3167V7.5898H16.4649C17.9013 7.5898 18.9049 8.62071 18.9049 10.1274C18.9049 11.6341 17.8822 12.675 16.4268 12.675H14.8334V15.3167H13.6824ZM14.8333 8.60088H16.1603C17.1592 8.60088 17.7299 9.15599 17.7299 10.1324C17.7299 11.1088 17.1592 11.6688 16.1556 11.6688H14.8333V8.60088ZM22.7053 14.3898C22.4009 14.9945 21.7302 15.3761 21.0072 15.3761C19.9371 15.3761 19.1903 14.712 19.1903 13.7108C19.1903 12.7196 19.9133 12.1496 21.2498 12.0653L22.6862 11.9761V11.5499C22.6862 10.9204 22.2915 10.5784 21.5875 10.5784C21.0072 10.5784 20.5839 10.8907 20.4983 11.3665H19.4614C19.4947 10.3653 20.3984 9.63675 21.6208 9.63675C22.9383 9.63675 23.7945 10.3554 23.7945 11.4706V15.3167H22.729V14.3898H22.7053ZM21.3163 14.4592C20.7027 14.4592 20.3127 14.1519 20.3127 13.6811C20.3127 13.1954 20.6885 12.9129 21.4067 12.8683L22.6861 12.784V13.2202C22.6861 13.9438 22.0964 14.4592 21.3163 14.4592ZM27.3284 15.619C26.867 16.9721 26.3391 17.4181 25.2166 17.4181C25.131 17.4181 24.8456 17.4082 24.779 17.3884V16.4616C24.8503 16.4715 25.0263 16.4814 25.1167 16.4814C25.6256 16.4814 25.911 16.2584 26.087 15.6785L26.1916 15.3365L24.2415 9.7111H25.4449L26.8004 14.2759H26.8242L28.1798 9.7111H29.3499L27.3284 15.619Z"
+                fill="black"
+            />
+        </svg>
+    );
+};
+
+export default ApplePayIcon;
diff --git a/src/components/foundations/payment-icons/discover-icon.tsx b/src/components/foundations/payment-icons/discover-icon.tsx
new file mode 100644
index 0000000..1889160
--- /dev/null
+++ b/src/components/foundations/payment-icons/discover-icon.tsx
@@ -0,0 +1,32 @@
+import type { SVGProps } from "react";
+
+const DiscoverIcon = (props: SVGProps<SVGSVGElement>) => {
+    return (
+        <svg width="34" height="24" viewBox="0 0 34 24" fill="none" {...props}>
+            <path
+                d="M0.5 4C0.5 2.067 2.067 0.5 4 0.5H30C31.933 0.5 33.5 2.067 33.5 4V20C33.5 21.933 31.933 23.5 30 23.5H4C2.067 23.5 0.5 21.933 0.5 20V4Z"
+                fill="white"
+            />
+            <path
+                d="M0.5 4C0.5 2.067 2.067 0.5 4 0.5H30C31.933 0.5 33.5 2.067 33.5 4V20C33.5 21.933 31.933 23.5 30 23.5H4C2.067 23.5 0.5 21.933 0.5 20V4Z"
+                className="stroke-border-secondary"
+                strokeWidth="0.75"
+            />
+            <path d="M14 23L33 17.25V20C33 21.6569 31.6569 23 30 23H14Z" fill="#FD6020" />
+            <path
+                fillRule="evenodd"
+                clipRule="evenodd"
+                d="M29.3937 9.11084C30.439 9.11084 31.0139 9.59438 31.0139 10.5077C31.0662 11.2062 30.5958 11.7972 29.9686 11.9046L31.3797 13.8925H30.2822L29.0801 11.9584H28.9756V13.8925H28.0871V9.11084H29.3937ZM28.9756 11.3137H29.2369C29.8118 11.3137 30.0731 11.045 30.0731 10.5615C30.0731 10.1317 29.8118 9.86304 29.2369 9.86304H28.9756V11.3137ZM25.0034 13.8925H27.5122V13.0866H25.8919V11.7972H27.4599V10.9913H25.8919V9.91674H27.5122V9.11084H25.0034V13.8925ZM22.3902 12.3345L21.1881 9.11084H20.2474L22.1812 14H22.6515L24.5853 9.11084H23.6446L22.3902 12.3345ZM11.7805 11.5286C11.7805 12.8717 12.8258 14 14.1324 14C14.5505 14 14.9164 13.8925 15.2822 13.7314V12.6568C15.0209 12.9792 14.655 13.1941 14.2369 13.1941C13.4007 13.1941 12.7212 12.5494 12.7212 11.6897V11.5823C12.669 10.7227 13.3484 9.97048 14.1847 9.91675C14.6028 9.91675 15.0209 10.1317 15.2822 10.454V9.37948C14.9686 9.16458 14.5505 9.11085 14.1847 9.11085C12.8258 9.0034 11.7805 10.1317 11.7805 11.5286ZM10.1603 10.9376C9.63762 10.7227 9.48082 10.6152 9.48082 10.3466C9.53309 10.0242 9.79441 9.75557 10.108 9.8093C10.3693 9.8093 10.6306 9.97048 10.8397 10.1854L11.3101 9.54066C10.9442 9.2183 10.4739 9.00339 10.0035 9.00339C9.27176 8.94967 8.64459 9.54066 8.59232 10.2928V10.3466C8.59232 10.9913 8.85365 11.3674 9.68988 11.636C9.89894 11.6897 10.108 11.7972 10.3171 11.9046C10.4739 12.0121 10.5784 12.1733 10.5784 12.3882C10.5784 12.7643 10.2648 13.0866 9.95121 13.0866H9.89894C9.48082 13.0866 9.11497 12.818 8.95818 12.4419L8.38326 13.0329C8.69685 13.6239 9.32403 13.9463 9.95121 13.9463C10.7874 14 11.4669 13.3553 11.5191 12.4956V12.3345C11.4669 11.6897 11.2056 11.3674 10.1603 10.9376ZM7.12892 13.8925H8.01742V9.11084H7.12892V13.8925ZM3 9.11086H4.30662H4.56794C5.8223 9.16458 6.81532 10.2391 6.76306 11.5286C6.76306 12.227 6.44947 12.8717 5.92682 13.3553C5.45644 13.7314 4.88153 13.9463 4.30662 13.8926H3V9.11086ZM4.14983 13.0866C4.56794 13.1404 5.03833 12.9792 5.35191 12.7105C5.6655 12.3882 5.8223 11.9584 5.8223 11.4748C5.8223 11.045 5.6655 10.6152 5.35191 10.2928C5.03833 10.0242 4.56794 9.86302 4.14983 9.91674H3.8885V13.0866H4.14983Z"
+                fill="black"
+            />
+            <path
+                fillRule="evenodd"
+                clipRule="evenodd"
+                d="M17.9481 9C16.6415 9 15.5439 10.0745 15.5439 11.4714C15.5439 12.8146 16.5892 13.9429 17.9481 13.9966C19.307 14.0503 20.3523 12.9221 20.4046 11.5252C20.3523 10.1283 19.307 9 17.9481 9V9Z"
+                fill="#FD6020"
+            />
+        </svg>
+    );
+};
+
+export default DiscoverIcon;
diff --git a/src/components/foundations/payment-icons/index.tsx b/src/components/foundations/payment-icons/index.tsx
new file mode 100644
index 0000000..9160220
--- /dev/null
+++ b/src/components/foundations/payment-icons/index.tsx
@@ -0,0 +1,8 @@
+export { default as AmexIcon } from "./amex-icon";
+export { default as ApplePayIcon } from "./apple-pay-icon";
+export { default as DiscoverIcon } from "./discover-icon";
+export { default as MastercardIcon } from "./mastercard-icon";
+export { default as VisaIcon } from "./visa-icon";
+export { default as PayPalIcon } from "./paypal-icon";
+export { default as StripeIcon } from "./stripe-icon";
+export { default as UnionPayIcon } from "./union-pay-icon";
diff --git a/src/components/foundations/payment-icons/mastercard-icon.tsx b/src/components/foundations/payment-icons/mastercard-icon.tsx
new file mode 100644
index 0000000..34535d8
--- /dev/null
+++ b/src/components/foundations/payment-icons/mastercard-icon.tsx
@@ -0,0 +1,37 @@
+import type { SVGProps } from "react";
+
+const MastercardIcon = (props: SVGProps<SVGSVGElement>) => {
+    return (
+        <svg width="34" height="24" viewBox="0 0 34 24" fill="none" {...props}>
+            <path
+                d="M0.5 4C0.5 2.067 2.067 0.5 4 0.5H30C31.933 0.5 33.5 2.067 33.5 4V20C33.5 21.933 31.933 23.5 30 23.5H4C2.067 23.5 0.5 21.933 0.5 20V4Z"
+                fill="white"
+            />
+            <path
+                d="M0.5 4C0.5 2.067 2.067 0.5 4 0.5H30C31.933 0.5 33.5 2.067 33.5 4V20C33.5 21.933 31.933 23.5 30 23.5H4C2.067 23.5 0.5 21.933 0.5 20V4Z"
+                className="stroke-border-secondary"
+                strokeWidth="0.75"
+            />
+            <path
+                fillRule="evenodd"
+                clipRule="evenodd"
+                d="M17.179 16.8294C15.9949 17.8275 14.459 18.43 12.7807 18.43C9.03582 18.43 6 15.4303 6 11.73C6 8.02966 9.03582 5.02997 12.7807 5.02997C14.459 5.02997 15.9949 5.63247 17.179 6.63051C18.363 5.63247 19.8989 5.02997 21.5773 5.02997C25.3221 5.02997 28.358 8.02966 28.358 11.73C28.358 15.4303 25.3221 18.43 21.5773 18.43C19.8989 18.43 18.363 17.8275 17.179 16.8294Z"
+                fill="#ED0006"
+            />
+            <path
+                fillRule="evenodd"
+                clipRule="evenodd"
+                d="M17.1787 16.8294C18.6366 15.6005 19.5611 13.7719 19.5611 11.73C19.5611 9.68801 18.6366 7.85941 17.1787 6.63051C18.3628 5.63247 19.8987 5.02997 21.577 5.02997C25.3219 5.02997 28.3577 8.02966 28.3577 11.73C28.3577 15.4303 25.3219 18.43 21.577 18.43C19.8987 18.43 18.3628 17.8275 17.1787 16.8294Z"
+                fill="#F9A000"
+            />
+            <path
+                fillRule="evenodd"
+                clipRule="evenodd"
+                d="M17.1793 16.8294C18.6372 15.6005 19.5616 13.7719 19.5616 11.73C19.5616 9.68805 18.6372 7.85946 17.1793 6.63055C15.7213 7.85946 14.7969 9.68805 14.7969 11.73C14.7969 13.7719 15.7213 15.6005 17.1793 16.8294Z"
+                fill="#FF5E00"
+            />
+        </svg>
+    );
+};
+
+export default MastercardIcon;
diff --git a/src/components/foundations/payment-icons/paypal-icon.tsx b/src/components/foundations/payment-icons/paypal-icon.tsx
new file mode 100644
index 0000000..26b6dad
--- /dev/null
+++ b/src/components/foundations/payment-icons/paypal-icon.tsx
@@ -0,0 +1,43 @@
+import type { SVGProps } from "react";
+
+const PayPalIcon = (props: SVGProps<SVGSVGElement>) => {
+    return (
+        <svg width="34" height="24" viewBox="0 0 34 24" fill="none" {...props}>
+            <path
+                d="M0.5 4C0.5 2.067 2.067 0.5 4 0.5H30C31.933 0.5 33.5 2.067 33.5 4V20C33.5 21.933 31.933 23.5 30 23.5H4C2.067 23.5 0.5 21.933 0.5 20V4Z"
+                fill="white"
+            />
+            <path
+                d="M0.5 4C0.5 2.067 2.067 0.5 4 0.5H30C31.933 0.5 33.5 2.067 33.5 4V20C33.5 21.933 31.933 23.5 30 23.5H4C2.067 23.5 0.5 21.933 0.5 20V4Z"
+                className="stroke-border-secondary"
+                strokeWidth="0.75"
+            />
+            <path
+                fillRule="evenodd"
+                clipRule="evenodd"
+                d="M14.614 18.4483L14.8347 16.9992L14.3431 16.9873H11.9951L13.6268 6.2937C13.6319 6.26132 13.6484 6.23126 13.6724 6.20987C13.6965 6.18849 13.7272 6.17676 13.7594 6.17676H17.7184C19.0328 6.17676 19.9398 6.45939 20.4133 7.01734C20.6353 7.27908 20.7767 7.55267 20.8452 7.85364C20.9169 8.16951 20.9181 8.54685 20.8481 9.00715L20.843 9.04063V9.33561L21.0651 9.46563C21.252 9.56815 21.4006 9.68546 21.5145 9.81975C21.7044 10.0436 21.8272 10.3281 21.8791 10.6652C21.9328 11.012 21.9151 11.4248 21.8272 11.892C21.7259 12.4295 21.5622 12.8976 21.341 13.2805C21.1376 13.6334 20.8785 13.9262 20.5708 14.153C20.277 14.3686 19.928 14.5322 19.5333 14.6369C19.1509 14.7398 18.7149 14.7917 18.2367 14.7917H17.9286C17.7083 14.7917 17.4943 14.8737 17.3263 15.0207C17.1579 15.1708 17.0465 15.3758 17.0123 15.6L16.989 15.7305L16.599 18.2848L16.5814 18.3785C16.5767 18.4082 16.5686 18.423 16.5568 18.433C16.5463 18.4422 16.5311 18.4483 16.5164 18.4483H14.614Z"
+                fill="#28356A"
+            />
+            <path
+                fillRule="evenodd"
+                clipRule="evenodd"
+                d="M21.2761 9.07458C21.2644 9.15267 21.2508 9.23246 21.2356 9.31445C20.7136 12.0851 18.9273 13.0422 16.646 13.0422H15.4845C15.2055 13.0422 14.9703 13.2516 14.9269 13.536L14.1638 18.5393C14.1356 18.7261 14.2748 18.8944 14.4571 18.8944H16.5173C16.7612 18.8944 16.9684 18.7112 17.0069 18.4626L17.0271 18.3544L17.415 15.8102L17.4399 15.6707C17.4779 15.4211 17.6856 15.2378 17.9295 15.2378H18.2376C20.2336 15.2378 21.7961 14.4003 22.2528 11.9765C22.4435 10.964 22.3448 10.1185 21.84 9.52389C21.6873 9.34464 21.4977 9.1958 21.2761 9.07458Z"
+                fill="#298FC2"
+            />
+            <path
+                fillRule="evenodd"
+                clipRule="evenodd"
+                d="M20.7298 8.84956C20.65 8.82549 20.5677 8.80374 20.4833 8.78407C20.3984 8.76488 20.3115 8.7479 20.222 8.73299C19.9089 8.68069 19.5656 8.65588 19.1981 8.65588H16.0951C16.0186 8.65588 15.946 8.67372 15.8811 8.70598C15.7379 8.7771 15.6316 8.91714 15.6058 9.08857L14.9457 13.4101L14.9268 13.5361C14.9701 13.2516 15.2053 13.0423 15.4843 13.0423H16.6459C18.9271 13.0423 20.7134 12.0847 21.2354 9.31451C21.2511 9.23252 21.2642 9.15273 21.2759 9.07464C21.1438 9.00218 21.0008 8.94023 20.8467 8.88744C20.8087 8.87437 20.7694 8.86178 20.7298 8.84956Z"
+                fill="#22284F"
+            />
+            <path
+                fillRule="evenodd"
+                clipRule="evenodd"
+                d="M15.6056 9.08862C15.6314 8.91718 15.7377 8.77715 15.8809 8.70652C15.9462 8.67414 16.0184 8.6563 16.0948 8.6563H19.1979C19.5654 8.6563 19.9086 8.68123 20.2218 8.73353C20.3113 8.74831 20.3982 8.76542 20.4831 8.7846C20.5675 8.80415 20.6498 8.82603 20.7296 8.84998C20.7692 8.8622 20.8085 8.8749 20.8469 8.88749C21.0009 8.94028 21.1441 9.00272 21.2761 9.07469C21.4315 8.05082 21.2748 7.3537 20.7393 6.72245C20.1488 6.0274 19.0831 5.72998 17.7194 5.72998H13.7603C13.4817 5.72998 13.2441 5.9393 13.2011 6.22426L11.5521 17.0279C11.5196 17.2416 11.679 17.4344 11.8876 17.4344H14.3318L15.6056 9.08862Z"
+                fill="#28356A"
+            />
+        </svg>
+    );
+};
+
+export default PayPalIcon;
diff --git a/src/components/foundations/payment-icons/stripe-icon.tsx b/src/components/foundations/payment-icons/stripe-icon.tsx
new file mode 100644
index 0000000..7d24556
--- /dev/null
+++ b/src/components/foundations/payment-icons/stripe-icon.tsx
@@ -0,0 +1,25 @@
+import type { SVGProps } from "react";
+
+const StripeIcon = (props: SVGProps<SVGSVGElement>) => {
+    return (
+        <svg width="34" height="24" viewBox="0 0 34 24" fill="none" {...props}>
+            <path
+                d="M0.5 4C0.5 2.067 2.067 0.5 4 0.5H30C31.933 0.5 33.5 2.067 33.5 4V20C33.5 21.933 31.933 23.5 30 23.5H4C2.067 23.5 0.5 21.933 0.5 20V4Z"
+                fill="white"
+            />
+            <path
+                d="M0.5 4C0.5 2.067 2.067 0.5 4 0.5H30C31.933 0.5 33.5 2.067 33.5 4V20C33.5 21.933 31.933 23.5 30 23.5H4C2.067 23.5 0.5 21.933 0.5 20V4Z"
+                className="stroke-border-secondary"
+                strokeWidth="0.75"
+            />
+            <path
+                fillRule="evenodd"
+                clipRule="evenodd"
+                d="M18.2684 8.14192L16.5413 8.52349V7.08202L18.2684 6.70752V8.14192ZM21.8602 8.94038C21.1858 8.94038 20.7523 9.26542 20.5115 9.49153L20.422 9.05344H18.9082V17.2924L20.6285 16.9179L20.6354 14.9183C20.8831 15.102 21.2478 15.3634 21.8533 15.3634C23.085 15.3634 24.2066 14.3459 24.2066 12.106C24.1997 10.0568 23.0643 8.94038 21.8602 8.94038ZM21.4473 13.8089C21.0413 13.8089 20.8005 13.6605 20.6353 13.4768L20.6285 10.8553C20.8074 10.6504 21.0551 10.509 21.4473 10.509C22.0735 10.509 22.507 11.2298 22.507 12.1554C22.507 13.1023 22.0803 13.8089 21.4473 13.8089ZM29.6289 12.1766C29.6289 10.3677 28.7756 8.94038 27.1448 8.94038C25.5072 8.94038 24.5163 10.3677 24.5163 12.1625C24.5163 14.2894 25.6861 15.3634 27.365 15.3634C28.1839 15.3634 28.8031 15.1726 29.271 14.9041V13.4909C28.8031 13.7312 28.2664 13.8795 27.5852 13.8795C26.9178 13.8795 26.326 13.6393 26.2503 12.8055H29.6151C29.6151 12.7666 29.6176 12.6782 29.6204 12.5763L29.6204 12.5761C29.6243 12.4377 29.6289 12.2743 29.6289 12.1766ZM26.2296 11.5054C26.2296 10.7069 26.7044 10.3748 27.1379 10.3748C27.5576 10.3748 28.0049 10.7069 28.0049 11.5054H26.2296ZM16.5412 9.06052H18.2683V15.2433H16.5412V9.06052ZM14.5803 9.06051L14.6904 9.5834C15.0963 8.82026 15.9014 8.97572 16.1216 9.06051V10.6857C15.9083 10.608 15.2202 10.509 14.8142 11.0531V15.2433H13.094V9.06051H14.5803ZM11.2498 7.52717L9.57081 7.8946L9.56392 13.5545C9.56392 14.6003 10.3277 15.3705 11.3461 15.3705C11.9103 15.3705 12.3232 15.2645 12.5503 15.1373V13.7029C12.3301 13.7947 11.2429 14.1198 11.2429 13.074V10.5656H12.5503V9.0605H11.2429L11.2498 7.52717ZM7.1832 10.4737C6.8185 10.4737 6.59831 10.5797 6.59831 10.8553C6.59831 11.1562 6.97726 11.2885 7.4474 11.4527C8.21383 11.7204 9.22258 12.0728 9.22685 13.3779C9.22685 14.6427 8.24287 15.3705 6.81162 15.3705C6.21986 15.3705 5.57304 15.2504 4.93311 14.9677V13.286C5.51112 13.611 6.2405 13.8513 6.81162 13.8513C7.19696 13.8513 7.4722 13.7453 7.4722 13.4203C7.4722 13.087 7.0614 12.9346 6.56547 12.7507C5.81018 12.4706 4.85742 12.1173 4.85742 10.9401C4.85742 9.6894 5.78636 8.9404 7.1832 8.9404C7.75432 8.9404 8.31856 9.03225 8.88968 9.26543V10.926C8.36673 10.6362 7.70615 10.4737 7.1832 10.4737Z"
+                fill="#6461FC"
+            />
+        </svg>
+    );
+};
+
+export default StripeIcon;
diff --git a/src/components/foundations/payment-icons/union-pay-icon.tsx b/src/components/foundations/payment-icons/union-pay-icon.tsx
new file mode 100644
index 0000000..37c3e55
--- /dev/null
+++ b/src/components/foundations/payment-icons/union-pay-icon.tsx
@@ -0,0 +1,35 @@
+import type { SVGProps } from "react";
+
+const UnionPayIcon = (props: SVGProps<SVGSVGElement>) => {
+    return (
+        <svg width="34" height="24" viewBox="0 0 34 24" fill="none" {...props}>
+            <path
+                d="M0.5 4C0.5 2.067 2.067 0.5 4 0.5H30C31.933 0.5 33.5 2.067 33.5 4V20C33.5 21.933 31.933 23.5 30 23.5H4C2.067 23.5 0.5 21.933 0.5 20V4Z"
+                fill="white"
+            />
+            <path
+                d="M0.5 4C0.5 2.067 2.067 0.5 4 0.5H30C31.933 0.5 33.5 2.067 33.5 4V20C33.5 21.933 31.933 23.5 30 23.5H4C2.067 23.5 0.5 21.933 0.5 20V4Z"
+                className="stroke-border-secondary"
+                strokeWidth="0.75"
+            />
+            <path
+                d="M10.5185 5.00073H15.8767C16.6247 5.00073 17.0899 5.62831 16.9154 6.40082L14.4208 17.4262C14.2447 18.196 13.4959 18.8241 12.7474 18.8241H7.38973C6.64282 18.8241 6.17657 18.196 6.35106 17.4262L8.84672 6.40082C9.0212 5.62831 9.76968 5.00073 10.5185 5.00073Z"
+                fill="#E21836"
+            />
+            <path
+                d="M15.4303 5H21.5921C22.3399 5 22.0027 5.62758 21.8268 6.40009L19.3326 17.4255C19.1576 18.1953 19.2121 18.8234 18.4628 18.8234H12.301C11.5516 18.8234 11.0878 18.1953 11.2639 17.4255L13.758 6.40009C13.9351 5.62758 14.682 5 15.4303 5Z"
+                fill="#00447C"
+            />
+            <path
+                d="M21.348 5H26.7062C27.4552 5 27.9204 5.62758 27.7445 6.40009L25.2503 17.4255C25.0742 18.1953 24.3248 18.8234 23.576 18.8234H18.2203C17.4709 18.8234 17.0061 18.1953 17.1816 17.4255L19.6762 6.40009C19.8507 5.62758 20.5986 5 21.348 5Z"
+                fill="#007B84"
+            />
+            <path
+                d="M11.9181 8.53326C11.3671 8.53904 11.2043 8.53326 11.1524 8.52062C11.1324 8.61836 10.7605 10.384 10.7595 10.3855C10.6794 10.7427 10.6212 10.9973 10.4233 11.1617C10.311 11.2573 10.1799 11.3035 10.0279 11.3035C9.78352 11.3035 9.64116 11.1786 9.61726 10.9417L9.61269 10.8603C9.61269 10.8603 9.68714 10.3818 9.68714 10.3792C9.68714 10.3792 10.0774 8.77015 10.1472 8.55746C10.1509 8.54536 10.1519 8.53904 10.1529 8.53326C9.39328 8.54012 9.25863 8.53326 9.24936 8.52062C9.24427 8.53797 9.22546 8.63772 9.22546 8.63772L8.82699 10.4512L8.79278 10.605L8.72656 11.1081C8.72656 11.2573 8.75503 11.3791 8.81171 11.4821C8.99325 11.8087 9.51108 11.8576 9.80402 11.8576C10.1815 11.8576 10.5355 11.7751 10.7748 11.6244C11.1901 11.3717 11.2988 10.9769 11.3957 10.626L11.4406 10.446C11.4406 10.446 11.8426 8.77485 11.9109 8.55746C11.9135 8.54536 11.9145 8.53904 11.9181 8.53326ZM13.2858 9.88137C13.1889 9.88137 13.0118 9.90557 12.8527 9.98583C12.795 10.0164 12.7404 10.0516 12.6828 10.0867L12.7348 9.89347L12.7063 9.86094C12.369 9.93125 12.2935 9.94066 11.9819 9.98583L11.9558 10.0037C11.9196 10.3125 11.8875 10.5447 11.7533 11.1517C11.7023 11.3754 11.6493 11.6013 11.5961 11.8245L11.6105 11.8528C11.9298 11.8355 12.0267 11.8355 12.3042 11.8402L12.3267 11.8151C12.3619 11.6291 12.3665 11.5856 12.4446 11.209C12.4813 11.0305 12.5578 10.6381 12.5956 10.4985C12.6649 10.4654 12.7334 10.4329 12.7987 10.4329C12.9542 10.4329 12.9353 10.5725 12.9293 10.6282C12.9226 10.7216 12.8659 11.0268 12.8078 11.2888L12.769 11.458C12.742 11.5829 12.7123 11.7043 12.6853 11.8281L12.6971 11.8528C13.0118 11.8355 13.1078 11.8355 13.3766 11.8402L13.4082 11.8151C13.4568 11.5247 13.471 11.447 13.5572 11.0241L13.6006 10.8299C13.6848 10.4497 13.7271 10.2569 13.6634 10.0998C13.596 9.92385 13.4343 9.88137 13.2858 9.88137ZM14.8137 10.2794C14.6464 10.3125 14.5397 10.3346 14.4337 10.3488C14.3286 10.3662 14.226 10.3819 14.0644 10.405L14.0516 10.417L14.0398 10.4265C14.023 10.5505 14.0112 10.6576 13.9889 10.7836C13.9699 10.9139 13.9408 11.0619 13.8934 11.2746C13.8567 11.4374 13.8378 11.4941 13.8169 11.5514C13.7965 11.6087 13.774 11.6643 13.7328 11.8245L13.7424 11.8392L13.7505 11.8528C13.9016 11.8454 14.0005 11.8402 14.1021 11.8392C14.2036 11.8355 14.3087 11.8392 14.4714 11.8402L14.4857 11.8282L14.501 11.815C14.5245 11.6707 14.528 11.6318 14.5424 11.5614C14.5566 11.4858 14.5811 11.3812 14.6414 11.1018C14.6698 10.9706 14.7016 10.8398 14.7311 10.7059C14.7618 10.5725 14.7939 10.4412 14.8245 10.31L14.8199 10.2941L14.8137 10.2794ZM14.8173 9.74272C14.6653 9.65036 14.3985 9.67967 14.2189 9.80725C14.0398 9.93228 14.0195 10.1097 14.171 10.2033C14.3204 10.2931 14.5882 10.2664 14.7662 10.1377C14.9449 10.01 14.9672 9.83414 14.8173 9.74272ZM15.7367 11.8818C16.0442 11.8818 16.3595 11.7945 16.5968 11.5356C16.7794 11.3256 16.8631 11.0131 16.8921 10.8845C16.9865 10.458 16.913 10.2589 16.8207 10.1376C16.6804 9.95279 16.4325 9.8935 16.1754 9.8935C16.0207 9.8935 15.6524 9.90923 15.3647 10.1823C15.1581 10.3792 15.0626 10.6465 15.0051 10.9028C14.9469 11.1638 14.8801 11.6339 15.3 11.8088C15.4295 11.866 15.6163 11.8818 15.7367 11.8818ZM15.7127 10.9223C15.7836 10.5993 15.8673 10.3283 16.0809 10.3283C16.2484 10.3283 16.2605 10.5299 16.1861 10.854C16.1728 10.9259 16.1116 11.1933 16.029 11.3072C15.9712 11.3912 15.9029 11.4421 15.8275 11.4421C15.805 11.4421 15.6714 11.4421 15.6693 11.2379C15.6682 11.1371 15.6882 11.0341 15.7127 10.9223ZM17.661 11.8402L17.685 11.8151C17.7191 11.6292 17.7247 11.5855 17.8002 11.209C17.8379 11.0305 17.916 10.6382 17.9527 10.4985C18.0222 10.4653 18.0895 10.4328 18.1569 10.4328C18.3114 10.4328 18.2926 10.5724 18.2864 10.6281C18.2808 10.7217 18.2241 11.0267 18.165 11.2888L18.1283 11.4579C18.1002 11.5829 18.0696 11.7042 18.0426 11.8281L18.0543 11.8529C18.3701 11.8355 18.4625 11.8355 18.7328 11.8402L18.7655 11.8151C18.8129 11.5246 18.8257 11.4469 18.9145 11.0242L18.9568 10.8298C19.0414 10.4496 19.0843 10.2569 19.0216 10.0999C18.9522 9.92389 18.7895 9.88141 18.6431 9.88141C18.546 9.88141 18.368 9.90548 18.2099 9.98587C18.1533 10.0164 18.0967 10.0515 18.041 10.0867L18.0895 9.89351L18.0635 9.86084C17.7263 9.93129 17.6492 9.9407 17.338 9.98587L17.3141 10.0038C17.2763 10.3126 17.2457 10.5446 17.1115 11.1518C17.0605 11.3755 17.0074 11.6013 16.9544 11.8245L16.9686 11.8529C17.2885 11.8355 17.384 11.8355 17.661 11.8402ZM19.9812 11.8528C20.001 11.7531 20.1189 11.1618 20.12 11.1618C20.12 11.1618 20.2204 10.7279 20.2266 10.7122C20.2266 10.7122 20.2582 10.667 20.2898 10.6491H20.3363C20.775 10.6491 21.2703 10.6491 21.6586 10.3551C21.9228 10.1535 22.1034 9.85567 22.184 9.49375C22.2049 9.40501 22.2203 9.29948 22.2203 9.19394C22.2203 9.05533 22.1933 8.9182 22.1152 8.81105C21.9172 8.52589 21.5229 8.52065 21.0678 8.5185C21.0663 8.5185 20.8434 8.52065 20.8434 8.52065C20.2608 8.52804 20.0271 8.52589 19.9311 8.51379C19.923 8.55749 19.9078 8.6352 19.9078 8.6352C19.9078 8.6352 19.6991 9.63088 19.6991 9.63249C19.6991 9.63249 19.1996 11.7494 19.1761 11.8492C19.6848 11.8429 19.8934 11.8429 19.9812 11.8528ZM20.3679 10.0841C20.3679 10.0841 20.5898 9.09042 20.5887 9.09418L20.5959 9.04323L20.599 9.00437L20.6877 9.01379C20.6877 9.01379 21.1453 9.05425 21.1561 9.05533C21.3367 9.12726 21.4111 9.31265 21.3591 9.55465C21.3117 9.77581 21.1724 9.96174 20.9933 10.0515C20.8459 10.1276 20.6653 10.134 20.4791 10.134H20.3587L20.3679 10.0841ZM21.7494 10.9407C21.6908 11.198 21.6234 11.668 22.0412 11.8355C22.1744 11.8939 22.2938 11.9112 22.4151 11.9049C22.5432 11.8978 22.6619 11.8316 22.7719 11.7364C22.762 11.7755 22.7521 11.8147 22.7421 11.8539L22.7611 11.8791C23.0616 11.866 23.1548 11.866 23.4804 11.8686L23.5099 11.8455C23.5575 11.5577 23.6023 11.2784 23.7258 10.728C23.786 10.4643 23.8461 10.2032 23.9079 9.94067L23.8982 9.91177C23.562 9.9759 23.4722 9.98961 23.1488 10.0368L23.1243 10.0574C23.121 10.0841 23.1176 10.1098 23.1145 10.1355C23.0642 10.0519 22.9913 9.98047 22.8789 9.93597C22.7351 9.87775 22.3973 9.95277 22.107 10.2249C21.903 10.4192 21.8051 10.6854 21.7494 10.9407ZM22.4555 10.9564C22.5274 10.6392 22.6101 10.3709 22.8243 10.3709C22.9597 10.3709 23.031 10.4996 23.0165 10.719C23.005 10.7737 22.9926 10.8314 22.9779 10.8966C22.9564 10.9908 22.9332 11.0842 22.9106 11.1778C22.8876 11.2418 22.8608 11.3022 22.8315 11.3424C22.7763 11.4228 22.6452 11.4726 22.5697 11.4726C22.5483 11.4726 22.4161 11.4726 22.4116 11.2721C22.4105 11.1722 22.4305 11.0693 22.4555 10.9564ZM26.1424 9.9092L26.1164 9.87868C25.7838 9.94805 25.7236 9.95908 25.418 10.0016L25.3955 10.0247C25.3944 10.0285 25.3935 10.0342 25.392 10.0395L25.3909 10.0342C25.1634 10.5746 25.1701 10.458 24.9849 10.8834C24.9838 10.864 24.9838 10.8519 24.9828 10.8313L24.9364 9.9092L24.9073 9.87868C24.5589 9.94805 24.5506 9.95908 24.2288 10.0016L24.2038 10.0247C24.2002 10.0357 24.2002 10.0478 24.1981 10.061L24.2002 10.0657C24.2405 10.2773 24.2308 10.2301 24.2711 10.5641C24.2899 10.728 24.315 10.8928 24.3338 11.0547C24.3656 11.3256 24.3833 11.4589 24.4221 11.8723C24.2048 12.2415 24.1533 12.3812 23.9441 12.7052L23.9456 12.7084L23.7982 12.9483C23.7814 12.9735 23.7661 12.9909 23.7447 12.9983C23.7212 13.0103 23.6906 13.0124 23.6482 13.0124H23.5665L23.4452 13.4278L23.8614 13.4352C24.1058 13.4342 24.2594 13.3165 24.3421 13.1584L24.6038 12.6967H24.5996L24.6272 12.6642C24.8032 12.274 26.1424 9.9092 26.1424 9.9092ZM21.7494 15.3652H21.5728L22.2264 13.1401H22.4432L22.512 12.9108L22.5187 13.1657C22.5106 13.3233 22.631 13.463 22.9473 13.4399H23.3131L23.439 13.0114H23.3013C23.2222 13.0114 23.1855 12.9908 23.1901 12.9467L23.1834 12.6874H22.506V12.6887C22.287 12.6934 21.6329 12.7104 21.5005 12.7467C21.3402 12.7892 21.1714 12.9142 21.1714 12.9142L21.2377 12.6847H20.604L20.472 13.1401L19.8097 15.3992H19.6812L19.5552 15.8246H20.8173L20.775 15.9664H21.3969L21.4382 15.8246H21.6127L21.7494 15.3652ZM21.2316 13.5922C21.1301 13.6211 20.9413 13.7087 20.9413 13.7087L21.1092 13.1401H21.6127L21.4912 13.5544C21.4912 13.5544 21.3357 13.5638 21.2316 13.5922ZM21.2412 14.4046C21.2412 14.4046 21.0831 14.4251 20.979 14.4493C20.8765 14.4813 20.6842 14.5821 20.6842 14.5821L20.8577 13.9903H21.3637L21.2412 14.4046ZM20.9591 15.3705H20.4541L20.6005 14.871H21.104L20.9591 15.3705ZM22.1754 13.9903H22.9034L22.7987 14.339H22.0611L21.9504 14.7203H22.5958L22.1071 15.4287C22.0729 15.4807 22.0422 15.4991 22.0081 15.5138C21.9739 15.5317 21.9289 15.5526 21.877 15.5526H21.6979L21.5749 15.9702H22.0432C22.2867 15.9702 22.4304 15.8562 22.5366 15.7066L22.8717 15.2344L22.9437 15.7138C22.959 15.8036 23.0217 15.8562 23.0641 15.8766C23.111 15.9008 23.1595 15.9424 23.2279 15.9486C23.3013 15.9518 23.3543 15.9543 23.3896 15.9543H23.6197L23.7579 15.487H23.6671C23.615 15.487 23.5253 15.478 23.51 15.4612C23.4947 15.4408 23.4947 15.4093 23.4865 15.3615L23.4135 14.881H23.1145L23.2457 14.7203H23.9819L24.0951 14.339H23.4135L23.5197 13.9903H24.1992L24.3252 13.5602H22.2993L22.1754 13.9903ZM16.0269 15.4676L16.1968 14.8857H16.8951L17.0227 14.4529H16.3238L16.4305 14.0948H17.1135L17.2401 13.6757H15.531L15.4071 14.0948H15.7953L15.6918 14.4529H15.3025L15.1734 14.8931H15.5616L15.3351 15.6629C15.3045 15.7648 15.3495 15.8037 15.3779 15.851C15.4071 15.8971 15.4366 15.9276 15.5029 15.945C15.5714 15.9607 15.6183 15.9701 15.682 15.9701H16.4693L16.6095 15.4907L16.2606 15.54C16.1932 15.54 16.0065 15.5317 16.0269 15.4676ZM16.107 12.6821L15.93 13.0113C15.8922 13.0833 15.8581 13.1279 15.8274 13.1485C15.8004 13.1658 15.7468 13.1731 15.6692 13.1731H15.5769L15.4535 13.5943H15.7601C15.9076 13.5943 16.0208 13.5386 16.0749 13.5108C16.133 13.4788 16.1483 13.4971 16.1932 13.4524L16.2968 13.3601H17.2543L17.3814 12.9215H16.6805L16.8028 12.6821H16.107ZM17.5207 15.476C17.5044 15.4518 17.5161 15.4092 17.5411 15.3205L17.8028 14.4287H18.7338C18.8695 14.4267 18.9675 14.4251 19.0312 14.4204C19.0997 14.413 19.1741 14.3878 19.2552 14.3427C19.3389 14.2953 19.3818 14.2455 19.4179 14.1882C19.4583 14.1311 19.5231 14.006 19.5787 13.8132L19.9077 12.6847L18.9415 12.6905C18.9415 12.6905 18.644 12.7357 18.513 12.7856C18.3808 12.8412 18.192 12.9966 18.192 12.9966L18.2792 12.6873H17.6824L16.8468 15.54C16.8171 15.6508 16.7973 15.7312 16.7927 15.7795C16.7911 15.8315 16.8564 15.883 16.8988 15.9218C16.9488 15.9607 17.0227 15.9544 17.0936 15.9607C17.1682 15.9665 17.2742 15.9701 17.4206 15.9701H17.8793L18.0201 15.4807L17.6095 15.5207C17.5656 15.5207 17.5339 15.4965 17.5207 15.476ZM17.9717 13.8264H18.9496L18.8874 14.027C18.8787 14.0317 18.8578 14.0171 18.7583 14.0292H17.9114L17.9717 13.8264ZM18.1676 13.1537H19.1537L19.0828 13.3953C19.0828 13.3953 18.618 13.3906 18.5436 13.4047C18.216 13.463 18.0247 13.6432 18.0247 13.6432L18.1676 13.1537ZM18.9093 14.6987C18.9012 14.7287 18.8884 14.747 18.8705 14.7607C18.8507 14.7739 18.8185 14.7786 18.7706 14.7786H18.6313L18.6395 14.5343H18.0599L18.0364 15.7285C18.0355 15.8147 18.0436 15.8646 18.1048 15.9045C18.1661 15.9544 18.3548 15.9607 18.6088 15.9607H18.972L19.1031 15.5137L18.7869 15.5316L18.6818 15.5379C18.6674 15.5316 18.6537 15.5258 18.6384 15.5101C18.6251 15.4965 18.6027 15.5048 18.6063 15.4187L18.6088 15.1125L18.9404 15.0984C19.1195 15.0984 19.196 15.0385 19.2613 14.9813C19.3236 14.9266 19.344 14.8637 19.3675 14.7786L19.4231 14.5075H18.9674L18.9093 14.6987Z"
+                fill="#FEFEFE"
+            />
+        </svg>
+    );
+};
+
+export default UnionPayIcon;
diff --git a/src/components/foundations/payment-icons/visa-icon.tsx b/src/components/foundations/payment-icons/visa-icon.tsx
new file mode 100644
index 0000000..1c83a23
--- /dev/null
+++ b/src/components/foundations/payment-icons/visa-icon.tsx
@@ -0,0 +1,25 @@
+import type { SVGProps } from "react";
+
+const VisaIcon = (props: SVGProps<SVGSVGElement>) => {
+    return (
+        <svg width="34" height="24" viewBox="0 0 34 24" fill="none" {...props}>
+            <path
+                d="M0.5 4C0.5 2.067 2.067 0.5 4 0.5H30C31.933 0.5 33.5 2.067 33.5 4V20C33.5 21.933 31.933 23.5 30 23.5H4C2.067 23.5 0.5 21.933 0.5 20V4Z"
+                fill="white"
+            />
+            <path
+                d="M0.5 4C0.5 2.067 2.067 0.5 4 0.5H30C31.933 0.5 33.5 2.067 33.5 4V20C33.5 21.933 31.933 23.5 30 23.5H4C2.067 23.5 0.5 21.933 0.5 20V4Z"
+                className="stroke-border-secondary"
+                strokeWidth="0.75"
+            />
+            <path
+                fillRule="evenodd"
+                clipRule="evenodd"
+                d="M10.7501 15.8582H8.69031L7.14576 9.79235C7.07245 9.51332 6.91679 9.26664 6.68782 9.15038C6.11639 8.85821 5.48672 8.62568 4.7998 8.50841V8.27487H8.11789C8.57583 8.27487 8.91929 8.62568 8.97653 9.0331L9.77793 13.4086L11.8367 8.27487H13.8392L10.7501 15.8582ZM14.984 15.8582H13.0388L14.6406 8.27487H16.5858L14.984 15.8582ZM19.1025 10.3757C19.1597 9.96725 19.5032 9.73372 19.9039 9.73372C20.5336 9.67508 21.2195 9.79235 21.7919 10.0835L22.1354 8.45079C21.5629 8.21725 20.9333 8.09998 20.3619 8.09998C18.4738 8.09998 17.1 9.15038 17.1 10.6082C17.1 11.7173 18.0731 12.2996 18.7601 12.6504C19.5032 13.0002 19.7894 13.2337 19.7322 13.5835C19.7322 14.1082 19.1597 14.3418 18.5883 14.3418C17.9014 14.3418 17.2145 14.1669 16.5858 13.8747L16.2424 15.5084C16.9293 15.7996 17.6724 15.9169 18.3594 15.9169C20.4763 15.9745 21.7919 14.9251 21.7919 13.35C21.7919 11.3664 19.1025 11.2502 19.1025 10.3757ZM28.5998 15.8582L27.0553 8.27487H25.3962C25.0528 8.27487 24.7093 8.50841 24.5948 8.85821L21.7347 15.8582H23.7372L24.1369 14.7502H26.5973L26.8263 15.8582H28.5998ZM25.6824 10.3171L26.2539 13.1751H24.6521L25.6824 10.3171Z"
+                fill="#172B85"
+            />
+        </svg>
+    );
+};
+
+export default VisaIcon;
diff --git a/src/components/foundations/rating-badge.tsx b/src/components/foundations/rating-badge.tsx
new file mode 100644
index 0000000..33cbc40
--- /dev/null
+++ b/src/components/foundations/rating-badge.tsx
@@ -0,0 +1,142 @@
+import { type HTMLAttributes } from "react";
+import { RatingStars } from "@/components/foundations/rating-stars";
+import { cx } from "@/utils/cx";
+
+export const Wreath = (props: HTMLAttributes<HTMLOrSVGElement>) => (
+    <svg width="36" height="81" viewBox="0 0 36 81" fill="none" {...props} className={cx("text-fg-primary", props.className)}>
+        <path
+            fillRule="evenodd"
+            clipRule="evenodd"
+            d="M34.188 79.123C21.8844 77.4193 12.9273 67.7396 8.84084 54.5087C7.16207 49.0327 6.91909 42.9593 7.50445 36.6094C8.58681 25.2702 13.7888 15.4245 21.3764 8.24482C21.4095 8.21163 21.4206 8.20057 21.4316 8.23376C21.4537 8.26695 21.52 8.30013 21.5531 8.32226C21.5973 8.34439 21.6083 8.32226 21.5752 8.37757C13.5237 15.7563 8.35488 27.4938 7.79161 39.3529C6.91909 56.2898 15.1362 71.2907 27.4509 76.4569C29.5162 77.3308 31.6809 77.9946 33.934 78.3375C34.0886 78.5367 34.177 78.8132 34.188 79.123Z"
+            fill="currentColor"
+        />
+        <path
+            fillRule="evenodd"
+            clipRule="evenodd"
+            d="M3.51737 50.8359C4.52243 52.0306 6.12388 53.2033 7.84683 52.7497C7.93518 52.8825 8.38801 53.5462 8.45428 53.6458C8.53159 53.7675 8.67517 53.8892 8.78561 53.7896C8.85188 53.7453 8.9071 53.6458 8.84084 53.4909C8.58681 53.1812 8.34383 52.8603 8.05667 52.5285C7.54863 49.8402 6.80864 48.0481 5.26241 46.2338C3.4732 44.1541 1.6398 43.2248 0.502216 42.8376C0.336548 42.7934 0.181926 42.7491 0.0162576 42.6938C-0.0941877 43.7337 0.380727 45.2493 0.756241 46.1121C1.48518 47.8822 2.28039 49.4309 3.51737 50.8359Z"
+            fill="currentColor"
+        />
+        <path
+            fillRule="evenodd"
+            clipRule="evenodd"
+            d="M18.317 12.9686C18.1735 13.0239 17.3341 13.2451 17.2347 13.0792C17.2015 13.0349 17.2457 12.869 17.323 12.8579C17.6323 12.8247 17.9747 12.8026 18.2729 12.7362C18.814 11.0326 20.3161 10.2914 21.6967 10.0038C23.3533 9.6719 25.1757 10.1808 27.1306 10.4573C27.23 10.4795 27.3404 10.4905 27.4288 10.4905C27.3956 10.5569 27.3515 10.6012 27.3073 10.6675C26.49 11.7849 25.2088 12.8137 23.9608 13.3226C23.1214 13.6766 22.1164 13.8757 21.1334 13.8425C20.0952 13.7983 19.2227 13.5659 18.317 12.9686Z"
+            fill="currentColor"
+        />
+        <path
+            fillRule="evenodd"
+            clipRule="evenodd"
+            d="M21.5531 8.3112C21.6194 8.33332 21.6194 8.3112 21.7408 8.24482C21.9728 8.02357 22.1716 7.89082 22.4035 7.68063C23.7289 7.69169 24.9879 7.29344 26.1807 6.49693C26.7109 6.14293 27.241 5.71148 27.6828 5.19154C28.7431 4.05209 29.5935 2.38164 29.9801 0.854996C30.0022 0.766495 30.0132 0.711182 30.0242 0.622681C29.9248 0.666931 29.8365 0.711183 29.7371 0.755433C27.5945 1.61832 25.5181 2.01657 23.7951 3.68703C22.6244 4.80435 22.017 6.15399 22.2599 7.45938C21.9949 7.66957 21.7188 7.86869 21.4647 8.11207C21.3543 8.21163 21.4868 8.3112 21.5531 8.3112Z"
+            fill="currentColor"
+        />
+        <path
+            fillRule="evenodd"
+            clipRule="evenodd"
+            d="M13.7557 20.1039C13.6121 20.1814 12.8058 20.6018 12.6843 20.4579C12.6291 20.4026 12.6512 20.2256 12.7285 20.1924C13.0267 20.0818 13.3801 20.0044 13.6783 19.8716C13.7888 18.6658 14.4625 17.5374 15.7989 16.763C17.8421 15.6789 20.1615 15.8559 22.3483 15.6678C22.4587 15.6568 22.5581 15.6568 22.6575 15.6457C22.6244 15.7121 22.5913 15.7674 22.5692 15.8338C21.8402 17.0949 20.6585 18.4556 19.4546 19.23C18.6484 19.7721 17.6544 20.1814 16.6604 20.3805C15.6111 20.5907 14.7165 20.469 13.7557 20.1039Z"
+            fill="currentColor"
+        />
+        <path
+            fillRule="evenodd"
+            clipRule="evenodd"
+            d="M3.0535 38.7113C3.71618 40.2047 4.90898 41.842 6.65402 41.9526C6.70924 42.1075 7.02953 42.8266 7.07371 42.9372C7.10685 43.0921 7.21729 43.258 7.36087 43.1916C7.42714 43.1695 7.4934 43.081 7.48236 42.9261C7.31669 42.5279 7.10685 42.2181 6.90804 41.8088C7.06267 39.0653 6.90804 37.0629 5.85881 34.8062C4.666 32.2064 3.03141 30.713 2.02636 29.9829C1.90487 29.8722 1.76129 29.7837 1.61771 29.6952C1.38578 30.7572 1.46309 32.4056 1.60667 33.357C1.86069 35.2818 2.26934 36.9744 3.0535 38.7113Z"
+            fill="currentColor"
+        />
+        <path
+            fillRule="evenodd"
+            clipRule="evenodd"
+            d="M5.00838 27.6929C5.29554 29.2859 6.01344 30.89 7.60385 31.5869C7.62594 31.7529 7.80265 32.5273 7.82474 32.6489C7.82474 32.8149 7.87996 33.0029 8.03458 32.9808C8.07876 32.9698 8.18921 32.9255 8.20025 32.7596C8.13399 32.3392 8.0125 31.8635 7.93519 31.4099C8.46532 29.474 8.75248 27.704 8.66412 25.8123C8.52054 23.1462 7.52654 20.8341 5.95821 18.9756C5.83672 18.8428 5.74837 18.699 5.63792 18.5773C5.19614 19.4955 4.90898 21.0664 4.83167 22.0067C4.666 23.9095 4.67705 25.8233 5.00838 27.6929Z"
+            fill="currentColor"
+        />
+        <path
+            fillRule="evenodd"
+            clipRule="evenodd"
+            d="M9.01755 17.637C8.97337 19.2742 9.37097 21.1106 10.7405 22.1727C10.7295 22.3386 10.6963 23.1351 10.6963 23.2457C10.6742 23.4006 10.6853 23.5887 10.8399 23.6219C10.8951 23.6219 10.9945 23.6108 11.0277 23.4559C11.0608 23.0466 11.0718 22.416 11.0939 21.9625C12.2646 19.9712 12.8942 17.8029 12.9163 15.3249C12.9604 12.4597 12.2536 10.6343 11.6903 9.48383C11.613 9.32896 11.5357 9.17408 11.4584 9.01921C10.8399 9.77146 10.2545 11.2096 9.98947 12.0946C9.45933 13.8868 9.07277 15.7563 9.01755 17.637Z"
+            fill="currentColor"
+        />
+        <path
+            fillRule="evenodd"
+            clipRule="evenodd"
+            d="M15.092 8.45501C14.7386 9.99271 14.838 12.2495 15.9867 13.1787C15.9425 13.3779 15.8431 14.0638 15.832 14.2186C15.7878 14.3846 15.7547 14.5394 15.8872 14.6058C15.9425 14.6279 15.9866 14.628 16.0529 14.4841C16.1302 14.0527 16.1523 13.6987 16.2186 13.2562C17.8532 11.5083 18.7809 9.78252 19.3 7.42619C19.8191 4.95923 19.7418 3.00114 19.5209 1.61832C19.4988 1.45238 19.4546 1.28644 19.4105 1.10944C17.9747 2.25995 16.9586 3.77553 16.0971 5.50129C15.6332 6.44162 15.2688 7.40406 15.092 8.45501Z"
+            fill="currentColor"
+        />
+        <path
+            fillRule="evenodd"
+            clipRule="evenodd"
+            d="M10.0889 29.5182C9.95633 29.6399 9.22739 30.3369 9.05068 30.2484C9.0065 30.2041 8.97337 29.9718 9.05068 29.9275C9.32679 29.7063 9.68022 29.5404 9.95633 29.3302C9.86798 28.0026 10.1662 26.653 11.37 25.3919C13.2255 23.5887 15.6884 22.9802 17.9305 22.051C18.0299 22.0067 18.1293 21.9514 18.2508 21.9071C18.2287 21.9846 18.2176 22.0731 18.1845 22.1505C17.7427 23.6993 16.8592 25.5025 15.7878 26.7194C15.092 27.538 14.1533 28.3235 13.1703 28.8434C12.1432 29.3965 11.1712 29.5735 10.0889 29.5182Z"
+            fill="currentColor"
+        />
+        <path
+            fillRule="evenodd"
+            clipRule="evenodd"
+            d="M8.54263 40.3264C8.44323 40.5034 7.85787 41.4548 7.67012 41.4105C7.5928 41.4105 7.51549 41.1782 7.57072 41.0897C7.81369 40.7689 8.12294 40.5145 8.33279 40.1826C7.95727 38.9657 8.13399 37.2067 9.03964 35.5252C10.4754 33.0693 12.5739 31.8746 14.6061 30.1599C14.6944 30.0714 14.7828 29.9939 14.8822 29.8944C14.8932 29.9718 14.9043 30.0603 14.8932 30.1599C14.8491 31.8414 14.4073 33.9543 13.6231 35.5474C13.1151 36.6204 12.364 37.6935 11.5026 38.5896C10.608 39.4856 9.65813 40.0056 8.54263 40.3264Z"
+            fill="currentColor"
+        />
+        <path
+            fillRule="evenodd"
+            clipRule="evenodd"
+            d="M9.55873 50.9244C9.48142 51.1346 9.08382 52.263 8.88501 52.3072C8.81875 52.2961 8.68621 52.1302 8.74144 52.0085C8.90711 51.6324 9.09486 51.2009 9.24948 50.8138C8.56472 50.1611 8.33279 48.3468 8.88501 46.444C9.80171 43.6562 11.8449 41.5654 13.4906 39.2533C13.5679 39.1427 13.6452 39.0321 13.7225 38.9214C13.7446 38.9989 13.7557 39.0874 13.7777 39.1759C14.0649 40.8021 14.0428 42.9593 13.601 44.7183C13.3028 45.8909 12.7837 47.1852 12.11 48.2915C11.4142 49.4641 10.5859 50.2717 9.55873 50.9244Z"
+            fill="currentColor"
+        />
+        <path
+            fillRule="evenodd"
+            clipRule="evenodd"
+            d="M7.0958 63.3256C8.34383 64.1442 10.5748 64.7637 12.11 63.757C12.2315 63.8455 12.8721 64.2327 12.9494 64.2991C13.0598 64.4097 13.2145 64.4871 13.3139 64.3323C13.3691 64.2659 13.4022 64.1553 13.2918 64.0336C12.9715 63.8123 12.6181 63.6685 12.2757 63.4473C11.105 61.0135 9.84589 59.3652 7.9131 58.1483C5.70419 56.7323 3.85975 56.7101 2.67799 56.7101C2.51232 56.7101 2.34665 56.7212 2.18098 56.7212C2.46814 59.1218 5.43912 62.2968 7.0958 63.3256Z"
+            fill="currentColor"
+        />
+        <path
+            fillRule="evenodd"
+            clipRule="evenodd"
+            d="M13.2255 61.4449C13.2145 61.5998 13.1372 62.2857 13.0267 62.7061C12.9936 62.8277 12.9825 63.0048 12.8169 62.9384C12.7506 62.9273 12.6843 62.7835 12.6843 62.7171C12.7616 62.3078 12.8279 61.8432 12.861 61.4339C12.099 60.9471 11.5026 59.3541 11.3811 57.396C11.5136 54.4423 12.839 51.7651 13.8992 48.9774C13.9324 48.8557 13.9765 48.7229 14.0207 48.5902C14.0649 48.6565 14.087 48.7229 14.1312 48.7893C14.838 50.2496 15.3792 52.2962 15.4234 54.1436C15.4676 55.3494 15.2908 56.7544 14.9374 58.0598C14.5619 59.3983 14.0097 60.4493 13.2255 61.4449Z"
+            fill="currentColor"
+        />
+        <path
+            fillRule="evenodd"
+            clipRule="evenodd"
+            d="M13.8551 73.4257C15.2908 73.7134 17.2347 73.647 18.4496 72.0982C18.7588 72.1425 19.2558 72.2199 19.5761 72.242C19.6645 72.2531 19.7307 72.1867 19.7639 72.0761C19.786 71.9987 19.7639 71.8991 19.6203 71.8217C19.2558 71.7442 18.8914 71.7442 18.5048 71.6778C16.8923 69.7861 15.3682 68.7241 13.1703 68.3259C10.6301 67.8612 8.47637 68.5139 7.32774 68.9896C7.17311 69.0449 7.00744 69.1113 6.86387 69.1888C7.27251 70.1069 8.46532 71.0473 9.21635 71.5008C10.6521 72.4522 12.1211 73.1381 13.8551 73.4257Z"
+            fill="currentColor"
+        />
+        <path
+            fillRule="evenodd"
+            clipRule="evenodd"
+            d="M18.9908 69.4321C19.0128 69.5981 19.0349 70.2618 19.0349 70.7043C19.0239 70.826 19.057 70.992 18.8914 71.003C18.814 71.003 18.7257 70.9035 18.7257 70.826C18.6926 70.4167 18.7146 69.9742 18.6484 69.5538C17.798 69.2883 16.6714 67.994 16.1523 66.2129C15.5559 63.3588 16.2075 60.4161 16.5168 57.396C16.5389 57.2633 16.5278 57.1305 16.5389 56.9867C16.5941 57.042 16.6604 57.0973 16.7156 57.1526C17.7538 58.2921 18.792 60.051 19.289 61.7768C19.6313 62.9052 19.8081 64.2991 19.8081 65.6376C19.786 67.0426 19.4988 68.2263 18.9908 69.4321Z"
+            fill="currentColor"
+        />
+        <path
+            fillRule="evenodd"
+            clipRule="evenodd"
+            d="M27.0312 75.24C27.1085 75.3617 27.2079 75.9148 27.3183 76.3352C27.3515 76.4348 27.4177 76.5896 27.2631 76.645C27.1858 76.6781 27.0864 76.6118 27.0643 76.5454C26.9207 76.1914 26.9207 75.8153 26.744 75.4613C25.9157 75.6604 24.4799 74.6094 23.5411 73.2377C22.2379 70.8703 22.0943 68.0936 21.5862 65.2726C21.5752 65.1398 21.531 65.0182 21.5089 64.8854C21.5752 64.8965 21.6414 64.9407 21.7077 64.9628C22.9557 65.5934 24.3805 66.7107 25.2972 68.0825C25.9267 68.9675 26.5121 70.1955 26.8434 71.4234C27.1858 72.7177 27.1968 73.9457 27.0312 75.24Z"
+            fill="currentColor"
+        />
+        <path
+            fillRule="evenodd"
+            clipRule="evenodd"
+            d="M22.514 80.5058C23.9829 80.3067 25.8825 79.6319 26.7219 77.7512C27.0201 77.6627 27.5392 77.6074 27.8485 77.5189C27.9368 77.5078 27.981 77.4083 27.9921 77.2866C27.9921 77.2202 27.9479 77.1207 27.7933 77.0985C27.4288 77.1538 27.0643 77.2645 26.6557 77.3087C24.5241 76.0476 22.8011 75.4723 20.5591 75.7931C17.9857 76.1582 16.1081 77.4525 15.1031 78.2822C14.9595 78.4039 14.8159 78.5145 14.6834 78.6362C15.3019 79.3996 16.6935 79.9084 17.5218 80.1297C19.1454 80.5833 20.7358 80.7603 22.514 80.5058Z"
+            fill="currentColor"
+        />
+    </svg>
+);
+
+interface RatingBadgeProps extends HTMLAttributes<HTMLDivElement> {
+    title?: string;
+    subtitle?: string;
+    rating?: number;
+    theme?: "light" | "dark";
+}
+
+export const RatingBadge = ({ title = "Best Design Tool", subtitle = "2,000+ reviews", rating, theme = "dark", className, ...props }: RatingBadgeProps) => {
+    return (
+        <div {...props} className={cx("flex items-center -space-x-0.5", className)}>
+            <Wreath className={cx("shrink-0", theme === "light" && "text-fg-white")} />
+
+            <div className="flex flex-col items-center gap-1">
+                <RatingStars rating={rating} className="gap-0.5" starClassName="size-4" />
+
+                <div className="text-center">
+                    <p className={cx("text-sm font-semibold", theme === "light" ? "text-primary_on-brand" : "text-primary")}>{title}</p>
+                    <p className={cx("text-xs font-medium", theme === "light" ? "text-secondary_on-brand" : "text-secondary")}>{subtitle}</p>
+                </div>
+            </div>
+
+            <Wreath className={cx("shrink-0 -scale-x-100", theme === "light" && "text-fg-white")} />
+        </div>
+    );
+};
diff --git a/src/components/foundations/rating-stars.tsx b/src/components/foundations/rating-stars.tsx
new file mode 100644
index 0000000..ec6043a
--- /dev/null
+++ b/src/components/foundations/rating-stars.tsx
@@ -0,0 +1,75 @@
+import type { HTMLAttributes, SVGProps } from "react";
+import { useId } from "react";
+import { cx } from "@/utils/cx";
+
+export const getStarProgress = (starPosition: number, rating: number, maxRating: number = 5) => {
+    // Ensure rating is between 0 and 5
+    const clampedRating = Math.min(Math.max(rating, 0), maxRating);
+
+    const diff = clampedRating - starPosition;
+
+    if (diff >= 1) return 100;
+    if (diff <= 0) return 0;
+
+    return Math.round(diff * 100);
+};
+
+interface StarIconProps extends SVGProps<SVGSVGElement> {
+    /**
+     * The progress of the star icon. It should be a number between 0 and 100.
+     *
+     * @default 100
+     */
+    progress?: number;
+}
+
+export const StarIcon = ({ progress = 100, ...props }: StarIconProps) => {
+    const id = useId();
+
+    return (
+        <svg width="20" height="20" viewBox="0 0 20 20" fill="none" {...props} className={cx("size-5 text-warning-400", props.className)}>
+            <path
+                d="M9.53834 1.60996C9.70914 1.19932 10.2909 1.19932 10.4617 1.60996L12.5278 6.57744C12.5998 6.75056 12.7626 6.86885 12.9495 6.88383L18.3123 7.31376C18.7556 7.3493 18.9354 7.90256 18.5976 8.19189L14.5117 11.6919C14.3693 11.8139 14.3071 12.0053 14.3506 12.1876L15.5989 17.4208C15.7021 17.8534 15.2315 18.1954 14.8519 17.9635L10.2606 15.1592C10.1006 15.0615 9.89938 15.0615 9.73937 15.1592L5.14806 17.9635C4.76851 18.1954 4.29788 17.8534 4.40108 17.4208L5.64939 12.1876C5.69289 12.0053 5.6307 11.8139 5.48831 11.6919L1.40241 8.19189C1.06464 7.90256 1.24441 7.3493 1.68773 7.31376L7.05054 6.88383C7.23744 6.86885 7.40024 6.75056 7.47225 6.57744L9.53834 1.60996Z"
+                className="fill-bg-tertiary"
+            />
+            <g clipPath={`url(#clip-${id})`}>
+                <path
+                    d="M9.53834 1.60996C9.70914 1.19932 10.2909 1.19932 10.4617 1.60996L12.5278 6.57744C12.5998 6.75056 12.7626 6.86885 12.9495 6.88383L18.3123 7.31376C18.7556 7.3493 18.9354 7.90256 18.5976 8.19189L14.5117 11.6919C14.3693 11.8139 14.3071 12.0053 14.3506 12.1876L15.5989 17.4208C15.7021 17.8534 15.2315 18.1954 14.8519 17.9635L10.2606 15.1592C10.1006 15.0615 9.89938 15.0615 9.73937 15.1592L5.14806 17.9635C4.76851 18.1954 4.29788 17.8534 4.40108 17.4208L5.64939 12.1876C5.69289 12.0053 5.6307 11.8139 5.48831 11.6919L1.40241 8.19189C1.06464 7.90256 1.24441 7.3493 1.68773 7.31376L7.05054 6.88383C7.23744 6.86885 7.40024 6.75056 7.47225 6.57744L9.53834 1.60996Z"
+                    fill="currentColor"
+                />
+            </g>
+            <defs>
+                <clipPath id={`clip-${id}`}>
+                    <rect width={`${progress}%`} height="20" fill="white" />
+                </clipPath>
+            </defs>
+        </svg>
+    );
+};
+
+interface RatingStarsProps extends HTMLAttributes<HTMLDivElement> {
+    /**
+     * The rating to display.
+     *
+     * @default 5
+     */
+    rating?: number;
+    /**
+     * The number of stars to display.
+     */
+    stars?: number;
+    /**
+     * The class name of the star icon.
+     */
+    starClassName?: string;
+}
+
+export const RatingStars = ({ rating = 5, stars = 5, starClassName, ...props }: RatingStarsProps) => {
+    return (
+        <div {...props} className={cx("flex", props.className)}>
+            {Array.from({ length: stars }).map((_, index) => (
+                <StarIcon key={index} progress={getStarProgress(index, rating, stars)} className={starClassName} />
+            ))}
+        </div>
+    );
+};
diff --git a/src/components/foundations/social-icons/angel-list.tsx b/src/components/foundations/social-icons/angel-list.tsx
new file mode 100644
index 0000000..db95ad1
--- /dev/null
+++ b/src/components/foundations/social-icons/angel-list.tsx
@@ -0,0 +1,18 @@
+import type { SVGProps } from "react";
+
+interface Props extends SVGProps<SVGSVGElement> {
+    size?: number;
+}
+
+const AngelList = ({ size = 24, ...props }: Props) => {
+    return (
+        <svg width={size} height={size} viewBox="0 0 24 24" fill="none" {...props}>
+            <path
+                d="M17.7705 10.0969C18.319 8.56875 19.8986 4.14844 19.8986 2.73281C19.8986 1.48594 19.1627 0.440625 17.8502 0.440625C15.7596 0.440625 13.8846 6.61406 13.2986 8.08594C12.844 6.75 10.7158 0 8.84083 0C7.38301 0 6.69864 1.07344 6.69864 2.42344C6.69864 4.07812 8.30176 8.36719 8.88301 10.0172C8.5877 9.90937 8.26895 9.81562 7.94551 9.81562C6.84864 9.81562 5.68145 11.1797 5.68145 12.2812C5.68145 12.6984 5.91114 13.2844 6.05645 13.6734C4.32676 14.1422 3.66114 15.2953 3.66114 17.0344C3.65645 20.4187 6.8627 24 11.3721 24C16.9033 24 20.344 19.8469 20.344 14.4891C20.344 12.4688 20.0205 10.6453 17.7705 10.0969V10.0969ZM16.1111 5.0625C16.2986 4.48594 17.1002 2.04844 17.8502 2.04844C18.2533 2.04844 18.3611 2.46563 18.3611 2.79844C18.3611 3.69375 16.5518 8.63906 16.1533 9.73594L14.5596 9.45469L16.1111 5.0625V5.0625ZM8.17051 2.26406C8.17051 1.70625 8.8502 0.121875 10.3408 4.47188L11.9627 9.17344C11.2315 9.1125 10.6643 9.03281 10.3033 9.23906C9.79239 7.88906 8.17051 3.62812 8.17051 2.26406V2.26406ZM8.0627 11.4375C9.43614 11.4375 11.208 15.8719 11.208 16.4719C11.208 16.7109 10.9783 17.0062 10.7111 17.0062C9.73145 17.0062 7.10645 13.4016 7.10645 12.4266C7.11114 12.0656 7.70176 11.4375 8.0627 11.4375V11.4375ZM16.7018 20.1703C15.3377 21.6703 13.594 22.4484 11.5596 22.4484C8.7752 22.4484 6.57676 20.9203 5.51739 18.3094C4.71583 16.275 5.69551 15.1078 6.48301 15.1078C7.01739 15.1078 9.02833 17.9344 9.02833 18.5344C9.02833 18.7641 8.66739 18.9234 8.47989 18.9234C7.7252 18.9234 7.42989 18.1969 6.08458 16.5141C4.69239 17.9062 7.04551 20.5875 8.81739 20.5875C10.0408 20.5875 10.8377 19.4531 10.5986 18.6188C10.7721 18.6188 10.9877 18.6328 11.1471 18.5906C11.1986 19.8609 11.5736 21.375 13.1018 21.4828C13.1018 21.4406 13.1955 21.15 13.1955 21.1359C13.1955 20.3203 12.6986 19.6078 12.6986 18.7781C12.6986 17.4516 13.7158 16.1672 14.7471 15.4172C15.1221 15.1359 15.5768 14.9625 16.0174 14.8031C16.4721 14.6297 16.9549 14.4281 17.3018 14.0812C17.2502 13.5562 17.0346 13.0922 16.5096 13.0922C15.2111 13.0922 10.8565 13.2797 10.8565 11.2313C10.8565 10.9172 10.8611 10.6172 11.6721 10.6172C13.1861 10.6172 17.0299 10.9922 18.1549 11.9813C19.0033 12.7359 19.294 17.2875 16.7018 20.1703V20.1703ZM12.0799 14.2641C12.5346 14.4094 13.0033 14.4516 13.4721 14.5453C13.1252 14.7984 12.8158 15.1078 12.5205 15.4406C12.3893 15.0422 12.2299 14.6531 12.0799 14.2641V14.2641Z"
+                fill="currentColor"
+            />
+        </svg>
+    );
+};
+
+export default AngelList;
diff --git a/src/components/foundations/social-icons/apple.tsx b/src/components/foundations/social-icons/apple.tsx
new file mode 100644
index 0000000..790c2ec
--- /dev/null
+++ b/src/components/foundations/social-icons/apple.tsx
@@ -0,0 +1,18 @@
+import type { SVGProps } from "react";
+
+interface Props extends SVGProps<SVGSVGElement> {
+    size?: number;
+}
+
+const Apple = ({ size = 24, ...props }: Props) => {
+    return (
+        <svg width={size} height={size} viewBox="0 0 24 24" fill="none" {...props}>
+            <path
+                d="M20.8428 17.1449C20.5101 17.9135 20.1163 18.6211 19.66 19.2715C19.0381 20.1583 18.5288 20.7721 18.1364 21.113C17.528 21.6724 16.8762 21.959 16.1782 21.9753C15.6771 21.9753 15.0728 21.8327 14.3693 21.5434C13.6636 21.2555 13.015 21.113 12.422 21.113C11.8 21.113 11.133 21.2555 10.4195 21.5434C9.70493 21.8327 9.12928 21.9834 8.68916 21.9984C8.01981 22.0269 7.35264 21.7322 6.68668 21.113C6.26164 20.7422 5.72999 20.1067 5.09309 19.2063C4.40976 18.2449 3.84796 17.13 3.40784 15.8589C2.93648 14.486 2.7002 13.1565 2.7002 11.8694C2.7002 10.3951 3.01878 9.12345 3.65689 8.05784C4.1584 7.20191 4.82557 6.52672 5.66059 6.03105C6.49562 5.53539 7.39786 5.2828 8.36949 5.26664C8.90114 5.26664 9.59833 5.43109 10.4647 5.75429C11.3287 6.07858 11.8834 6.24303 12.1266 6.24303C12.3085 6.24303 12.9247 6.05074 13.9694 5.66738C14.9573 5.31186 15.7911 5.16466 16.4742 5.22264C18.3251 5.37202 19.7157 6.10167 20.6405 7.41619C18.9851 8.4192 18.1662 9.82403 18.1825 11.6262C18.1975 13.03 18.7067 14.1981 19.7075 15.1256C20.1611 15.5561 20.6676 15.8888 21.2312 16.1251C21.109 16.4795 20.98 16.819 20.8428 17.1449V17.1449ZM16.5978 0.440369C16.5978 1.54062 16.1958 2.56792 15.3946 3.51878C14.4277 4.64917 13.2582 5.30236 11.99 5.19929C11.9738 5.06729 11.9645 4.92837 11.9645 4.78239C11.9645 3.72615 12.4243 2.59576 13.2408 1.67152C13.6485 1.20356 14.167 0.814453 14.7957 0.504058C15.4231 0.198295 16.0166 0.0292007 16.5747 0.000244141C16.591 0.147331 16.5978 0.294426 16.5978 0.440355V0.440369Z"
+                fill="currentColor"
+            />
+        </svg>
+    );
+};
+
+export default Apple;
diff --git a/src/components/foundations/social-icons/clubhouse.tsx b/src/components/foundations/social-icons/clubhouse.tsx
new file mode 100644
index 0000000..770546e
--- /dev/null
+++ b/src/components/foundations/social-icons/clubhouse.tsx
@@ -0,0 +1,22 @@
+import type { SVGProps } from "react";
+
+interface Props extends SVGProps<SVGSVGElement> {
+    size?: number;
+}
+
+const Clubhouse = ({ size = 24, ...props }: Props) => {
+    return (
+        <svg width={size} height={size} viewBox="0 0 24 24" fill="none" {...props}>
+            <path
+                d="M1.74167 17.875C0.783333 17.875 0 18.6583 0 19.6167C0 20.575 0.783333 21.3583 1.74167 21.3583C2.7 21.3583 3.48333 20.575 3.48333 19.6167C3.48333 18.6583 2.70833 17.875 1.74167 17.875Z"
+                fill="currentColor"
+            />
+            <path
+                d="M23.1833 2.66663L12.2166 6.16663V2.70829L0.391602 6.48329V16.5083L10.5916 13.25V16.6916L23.9999 12.4166L20.3666 8.86663L23.1833 2.66663ZM10.5916 11.5333L2.02494 14.2666V7.67496L10.5916 4.94163V11.5333ZM20.9666 11.675L12.2166 14.4666V7.88329L20.2749 5.30829L18.4249 9.20829L20.9666 11.675Z"
+                fill="currentColor"
+            />
+        </svg>
+    );
+};
+
+export default Clubhouse;
diff --git a/src/components/foundations/social-icons/discord.tsx b/src/components/foundations/social-icons/discord.tsx
new file mode 100644
index 0000000..24db52e
--- /dev/null
+++ b/src/components/foundations/social-icons/discord.tsx
@@ -0,0 +1,28 @@
+import type { SVGProps } from "react";
+
+interface Props extends SVGProps<SVGSVGElement> {
+    size?: number;
+}
+
+const Discord = ({ size = 24, ...props }: Props) => {
+    return (
+        <svg width={size} height={size} viewBox="0 0 24 24" fill="none" {...props}>
+            <path
+                d="M7.50197 13.0057C7.50197 14.0114 8.28047 14.8343 9.14548 14.8343C10.0105 14.8343 10.789 14.0114 10.789 13.0057C10.789 12 10.0105 11.1771 9.14548 11.1771C8.28047 11.1771 7.50197 12 7.50197 13.0057Z"
+                fill="currentColor"
+            />
+            <path
+                d="M13.211 13.0057C13.211 14.0114 13.9895 14.8343 14.8545 14.8343C15.7195 14.8343 16.498 14.0114 16.498 13.0057C16.498 12 15.7195 11.1771 14.8545 11.1771C13.9895 11.1771 13.211 12 13.211 13.0057Z"
+                fill="currentColor"
+            />
+            <path
+                fillRule="evenodd"
+                clipRule="evenodd"
+                d="M0.560538 2.80805C0 3.90817 0 5.3483 0 8.22857V15.7714C0 18.6517 0 20.0918 0.560538 21.192C1.0536 22.1596 1.84036 22.9464 2.80805 23.4395C3.90817 24 5.3483 24 8.22857 24H15.7714C18.6517 24 20.0918 24 21.192 23.4395C22.1596 22.9464 22.9464 22.1596 23.4395 21.192C24 20.0918 24 18.6517 24 15.7714V8.22857C24 5.3483 24 3.90817 23.4395 2.80805C22.9464 1.84036 22.1596 1.0536 21.192 0.560538C20.0918 0 18.6517 0 15.7714 0H8.22857C5.3483 0 3.90817 0 2.80805 0.560538C1.84036 1.0536 1.0536 1.84036 0.560538 2.80805ZM14.595 5.14286C16.2385 5.23429 17.7955 5.78286 19.0931 6.88C20.5636 9.80572 21.3421 13.0971 21.4286 16.48C20.1311 17.9429 18.3145 18.8571 16.4115 18.8571C16.4115 18.8571 15.806 18.1257 15.3735 17.4857C16.498 17.2114 17.536 16.5714 18.228 15.5657C17.6225 15.9314 17.017 16.2971 16.4115 16.5714C15.633 16.9371 14.8545 17.12 14.076 17.3029C13.384 17.3943 12.692 17.4857 12 17.4857C11.308 17.4857 10.616 17.3943 9.92398 17.3029C9.14548 17.12 8.36697 16.9371 7.58847 16.5714C6.98296 16.2971 6.37746 15.9314 5.77195 15.5657C6.46396 16.5714 7.50197 17.2114 8.62647 17.4857C8.19397 18.1257 7.58847 18.8571 7.58847 18.8571C5.68545 18.8571 3.86894 17.9429 2.57143 16.48C2.65793 13.0971 3.43644 9.80572 4.90695 6.88C6.20446 5.78286 7.76147 5.23429 9.40498 5.14286L9.66448 5.41714C8.19397 5.78286 6.89646 6.51429 5.68545 7.52C7.15596 6.69714 8.79948 6.14857 10.5295 5.96571C11.0485 5.87429 11.481 5.87429 12 5.87429C12.519 5.87429 12.9515 5.87429 13.4705 5.96571C15.2005 6.14857 16.844 6.69714 18.3145 7.52C17.1035 6.51429 15.806 5.78286 14.3355 5.41714L14.595 5.14286Z"
+                fill="currentColor"
+            />
+        </svg>
+    );
+};
+
+export default Discord;
diff --git a/src/components/foundations/social-icons/dribbble.tsx b/src/components/foundations/social-icons/dribbble.tsx
new file mode 100644
index 0000000..c13a5ff
--- /dev/null
+++ b/src/components/foundations/social-icons/dribbble.tsx
@@ -0,0 +1,20 @@
+import type { SVGProps } from "react";
+
+interface Props extends SVGProps<SVGSVGElement> {
+    size?: number;
+}
+
+const Dribbble = ({ size = 24, ...props }: Props) => {
+    return (
+        <svg width={size} height={size} viewBox="0 0 24 24" fill="none" {...props}>
+            <path
+                fillRule="evenodd"
+                clipRule="evenodd"
+                d="M12 0C5.37527 0 0 5.37527 0 12C0 18.6248 5.37527 24 12 24C18.6117 24 24 18.6248 24 12C24 5.37527 18.6117 0 12 0ZM19.9262 5.53145C21.3579 7.27549 22.217 9.50107 22.243 11.9089C21.9046 11.8438 18.5206 11.154 15.1106 11.5835C15.0325 11.4143 14.9675 11.2321 14.8894 11.0499C14.6811 10.5554 14.4469 10.0477 14.2126 9.56617C17.9869 8.0304 19.705 5.81779 19.9262 5.53145ZM12 1.77007C14.603 1.77007 16.9848 2.74621 18.7939 4.34708C18.6117 4.60738 17.0629 6.67679 13.4186 8.04337C11.7397 4.95878 9.87855 2.43384 9.5922 2.04338C10.3601 1.86117 11.1671 1.77007 12 1.77007ZM7.63995 2.73319C7.91325 3.09761 9.73538 5.63558 11.4404 8.65508C6.65076 9.9306 2.42083 9.90458 1.96529 9.90458C2.62906 6.72885 4.77657 4.08676 7.63995 2.73319ZM1.74404 12.0131C1.74404 11.9089 1.74404 11.8048 1.74404 11.7007C2.18655 11.7136 7.15835 11.7787 12.2733 10.243C12.5727 10.8156 12.846 11.4013 13.1063 11.987C12.9761 12.026 12.8329 12.0651 12.7028 12.1041C7.41865 13.8091 4.60738 18.4685 4.3731 18.859C2.7462 17.0499 1.74404 14.6421 1.74404 12.0131ZM12 22.256C9.6312 22.256 7.44469 21.449 5.71366 20.0954C5.89588 19.718 7.97827 15.7094 13.757 13.692C13.783 13.679 13.7961 13.679 13.8221 13.666C15.2668 17.4013 15.8525 20.5379 16.0087 21.436C14.7722 21.9696 13.4186 22.256 12 22.256ZM17.7137 20.4989C17.6096 19.8742 17.0629 16.8807 15.7223 13.1974C18.9371 12.6898 21.7484 13.5228 22.0998 13.6399C21.6573 16.4902 20.0174 18.9501 17.7137 20.4989Z"
+                fill="currentColor"
+            />
+        </svg>
+    );
+};
+
+export default Dribbble;
diff --git a/src/components/foundations/social-icons/facebook.tsx b/src/components/foundations/social-icons/facebook.tsx
new file mode 100644
index 0000000..7245df5
--- /dev/null
+++ b/src/components/foundations/social-icons/facebook.tsx
@@ -0,0 +1,18 @@
+import type { SVGProps } from "react";
+
+interface Props extends SVGProps<SVGSVGElement> {
+    size?: number;
+}
+
+const Facebook = ({ size = 24, ...props }: Props) => {
+    return (
+        <svg width={size} height={size} viewBox="0 0 24 24" fill="none" {...props}>
+            <path
+                d="M24 12C24 5.37258 18.6274 0 12 0C5.37258 0 0 5.37258 0 12C0 17.9895 4.3882 22.954 10.125 23.8542V15.4688H7.07812V12H10.125V9.35625C10.125 6.34875 11.9166 4.6875 14.6576 4.6875C15.9701 4.6875 17.3438 4.92188 17.3438 4.92188V7.875H15.8306C14.34 7.875 13.875 8.80008 13.875 9.75V12H17.2031L16.6711 15.4688H13.875V23.8542C19.6118 22.954 24 17.9895 24 12Z"
+                fill="currentColor"
+            />
+        </svg>
+    );
+};
+
+export default Facebook;
diff --git a/src/components/foundations/social-icons/figma.tsx b/src/components/foundations/social-icons/figma.tsx
new file mode 100644
index 0000000..8a86697
--- /dev/null
+++ b/src/components/foundations/social-icons/figma.tsx
@@ -0,0 +1,20 @@
+import type { SVGProps } from "react";
+
+interface Props extends SVGProps<SVGSVGElement> {
+    size?: number;
+}
+
+const Figma = ({ size = 24, ...props }: Props) => {
+    return (
+        <svg width={size} height={size} viewBox="0 0 24 24" fill="none" {...props}>
+            <path
+                fillRule="evenodd"
+                clipRule="evenodd"
+                d="M8.25 2C7.51349 2 6.81155 2.28629 6.29747 2.78895C5.78414 3.29087 5.5 3.96677 5.5 4.66667C5.5 5.36657 5.78414 6.04247 6.29747 6.54438C6.81155 7.04705 7.51349 7.33333 8.25 7.33333H11V2H8.25ZM13 2V7.33333H15.75C16.1142 7.33333 16.4744 7.26316 16.8097 7.12736C17.145 6.99157 17.4482 6.79311 17.7025 6.54438C17.9569 6.29571 18.1574 6.00171 18.2938 5.67977C18.4301 5.35788 18.5 5.0137 18.5 4.66667C18.5 4.31964 18.4301 3.97545 18.2938 3.65356C18.1574 3.33162 17.9569 3.03763 17.7025 2.78895C17.4482 2.54022 17.145 2.34177 16.8097 2.20598C16.4744 2.07017 16.1142 2 15.75 2H13ZM18.6884 8.33334C18.8324 8.22191 18.9702 8.10211 19.1008 7.9744C19.5429 7.54211 19.8948 7.02769 20.1353 6.45991C20.3759 5.89208 20.5 5.28266 20.5 4.66667C20.5 4.05067 20.3759 3.44126 20.1353 2.87342C19.8948 2.30564 19.5429 1.79122 19.1008 1.35894C18.6587 0.926696 18.1351 0.584984 17.5605 0.352241C16.9858 0.119512 16.3707 0 15.75 0H8.25C6.99738 0 5.79167 0.486331 4.89923 1.35894C4.00603 2.23228 3.5 3.42165 3.5 4.66667C3.5 5.91169 4.00603 7.10105 4.89923 7.9744C5.03021 8.10247 5.16794 8.22222 5.31158 8.33333C5.16794 8.44445 5.03021 8.5642 4.89923 8.69227C4.00603 9.56562 3.5 10.755 3.5 12C3.5 13.245 4.00603 14.4344 4.89923 15.3077C5.03022 15.4358 5.16795 15.5556 5.31159 15.6667C5.16795 15.7778 5.03022 15.8975 4.89923 16.0256C4.00603 16.899 3.5 18.0883 3.5 19.3333C3.5 20.5784 4.00603 21.7677 4.89923 22.6411C5.79167 23.5137 6.99738 24 8.25 24C9.5026 24 10.7083 23.5137 11.6008 22.6411C12.494 21.7677 13 20.5784 13 19.3333V15.8051C13.2922 16.0089 13.6073 16.1799 13.9395 16.3144C14.5142 16.5472 15.1293 16.6667 15.75 16.6667C16.3707 16.6667 16.9858 16.5472 17.5605 16.3144C18.1351 16.0817 18.6587 15.74 19.1008 15.3077C19.5429 14.8754 19.8948 14.361 20.1353 13.7932C20.3759 13.2254 20.5 12.616 20.5 12C20.5 11.384 20.3759 10.7746 20.1353 10.2068C19.8948 9.63898 19.5429 9.12456 19.1008 8.69227C18.9702 8.56456 18.8324 8.44476 18.6884 8.33334ZM11 14.6667V9.33333H8.25C7.51349 9.33333 6.81155 9.61962 6.29747 10.1223C5.78414 10.6242 5.5 11.3001 5.5 12C5.5 12.6999 5.78414 13.3758 6.29747 13.8777C6.81155 14.3804 7.51349 14.6667 8.25 14.6667H11ZM11 16.6667H8.25C7.51349 16.6667 6.81155 16.953 6.29747 17.4556C5.78414 17.9575 5.5 18.6334 5.5 19.3333C5.5 20.0332 5.78414 20.7091 6.29747 21.2111C6.81155 21.7137 7.51349 22 8.25 22C8.98651 22 9.6884 21.7137 10.2025 21.2111C10.7159 20.7091 11 20.0332 11 19.3333V16.6667ZM15.75 9.33333C15.3858 9.33333 15.0256 9.4035 14.6903 9.53931C14.355 9.6751 14.0518 9.87356 13.7975 10.1223C13.5431 10.371 13.3426 10.665 13.2062 10.9869C13.0699 11.3088 13 11.653 13 12C13 12.347 13.0699 12.6912 13.2062 13.0131C13.3426 13.335 13.5431 13.629 13.7975 13.8777C14.0518 14.1264 14.355 14.3249 14.6903 14.4607C15.0256 14.5965 15.3858 14.6667 15.75 14.6667C16.1142 14.6667 16.4744 14.5965 16.8097 14.4607C17.145 14.3249 17.4482 14.1264 17.7025 13.8777C17.9569 13.629 18.1574 13.335 18.2938 13.0131C18.4301 12.6912 18.5 12.347 18.5 12C18.5 11.653 18.4301 11.3088 18.2938 10.9869C18.1574 10.665 17.9569 10.371 17.7025 10.1223C17.4482 9.87356 17.145 9.6751 16.8097 9.53931C16.4744 9.4035 16.1142 9.33333 15.75 9.33333Z"
+                fill="currentColor"
+            />
+        </svg>
+    );
+};
+
+export default Figma;
diff --git a/src/components/foundations/social-icons/github.tsx b/src/components/foundations/social-icons/github.tsx
new file mode 100644
index 0000000..75ca492
--- /dev/null
+++ b/src/components/foundations/social-icons/github.tsx
@@ -0,0 +1,20 @@
+import type { SVGProps } from "react";
+
+interface Props extends SVGProps<SVGSVGElement> {
+    size?: number;
+}
+
+const GitHub = ({ size = 24, ...props }: Props) => {
+    return (
+        <svg width={size} height={size} viewBox="0 0 24 24" fill="none" {...props}>
+            <path
+                fillRule="evenodd"
+                clipRule="evenodd"
+                d="M12 0C5.3724 0 0 5.3808 0 12.0204C0 17.3304 3.438 21.8364 8.2068 23.4252C8.8068 23.5356 9.0252 23.1648 9.0252 22.8456C9.0252 22.5612 9.0156 21.804 9.0096 20.802C5.6712 21.528 4.9668 19.1904 4.9668 19.1904C4.422 17.8008 3.6348 17.4312 3.6348 17.4312C2.5452 16.6872 3.7176 16.7016 3.7176 16.7016C4.9212 16.7856 5.5548 17.94 5.5548 17.94C6.6252 19.776 8.364 19.2456 9.0468 18.9384C9.1572 18.162 9.4668 17.6328 9.81 17.3328C7.146 17.0292 4.344 15.9972 4.344 11.3916C4.344 10.08 4.812 9.006 5.5788 8.166C5.4552 7.8624 5.0436 6.6396 5.6964 4.986C5.6964 4.986 6.7044 4.662 8.9964 6.2172C9.97532 5.95022 10.9853 5.81423 12 5.8128C13.02 5.8176 14.046 5.9508 15.0048 6.2172C17.2956 4.662 18.3012 4.9848 18.3012 4.9848C18.9564 6.6396 18.5436 7.8624 18.4212 8.166C19.1892 9.006 19.6548 10.08 19.6548 11.3916C19.6548 16.0092 16.848 17.0256 14.1756 17.3232C14.6064 17.694 14.9892 18.4272 14.9892 19.5492C14.9892 21.1548 14.9748 22.452 14.9748 22.8456C14.9748 23.1672 15.1908 23.5416 15.8004 23.424C18.19 22.6225 20.2672 21.0904 21.7386 19.0441C23.2099 16.9977 24.001 14.5408 24 12.0204C24 5.3808 18.6264 0 12 0Z"
+                fill="currentColor"
+            />
+        </svg>
+    );
+};
+
+export default GitHub;
diff --git a/src/components/foundations/social-icons/google.tsx b/src/components/foundations/social-icons/google.tsx
new file mode 100644
index 0000000..b5f3578
--- /dev/null
+++ b/src/components/foundations/social-icons/google.tsx
@@ -0,0 +1,20 @@
+import type { SVGProps } from "react";
+
+interface Props extends SVGProps<SVGSVGElement> {
+    size?: number;
+}
+
+const Google = ({ size = 24, ...props }: Props) => {
+    return (
+        <svg width={size} height={size} viewBox="0 0 24 24" fill="none" {...props}>
+            <path
+                fillRule="evenodd"
+                clipRule="evenodd"
+                d="M16.8426 6.54781C15.6036 5.36611 13.9501 4.72235 12.2392 4.74881C9.10863 4.74881 6.44981 6.86086 5.5018 9.70486V9.70493C4.99913 11.1953 4.99913 12.8091 5.50179 14.2994H5.50619C6.45861 17.139 9.11303 19.2511 12.2437 19.2511C13.8597 19.2511 15.247 18.8378 16.3223 18.1077V18.1047C17.5878 17.2669 18.452 15.9486 18.721 14.4582H12.2393V9.83722H23.558C23.6991 10.6397 23.7653 11.4599 23.7653 12.2756C23.7653 15.9254 22.4609 19.0112 20.1913 21.1012L20.1937 21.103C18.2051 22.9373 15.4757 24 12.2392 24C7.70204 24 3.55286 21.4426 1.51575 17.3904V17.3904C-0.186243 13.9996 -0.186239 10.0048 1.51576 6.61398H1.51579L1.51575 6.61395C3.55286 2.55737 7.70204 -4.58262e-05 12.2392 -4.58262e-05C15.22 -0.0353205 18.0992 1.08465 20.2686 3.12176L16.8426 6.54781Z"
+                fill="currentColor"
+            />
+        </svg>
+    );
+};
+
+export default Google;
diff --git a/src/components/foundations/social-icons/index.tsx b/src/components/foundations/social-icons/index.tsx
new file mode 100644
index 0000000..ec743cc
--- /dev/null
+++ b/src/components/foundations/social-icons/index.tsx
@@ -0,0 +1,22 @@
+export { default as AngelList } from "./angel-list";
+export { default as Apple } from "./apple";
+export { default as Clubhouse } from "./clubhouse";
+export { default as Discord } from "./discord";
+export { default as Dribbble } from "./dribbble";
+export { default as Facebook } from "./facebook";
+export { default as Figma } from "./figma";
+export { default as GitHub } from "./github";
+export { default as Google } from "./google";
+export { default as Instagram } from "./instagram";
+export { default as Layers } from "./layers";
+export { default as LinkedIn } from "./linkedin";
+export { default as Pinterest } from "./pinterest";
+export { default as Reddit } from "./reddit";
+export { default as Signal } from "./signal";
+export { default as Snapchat } from "./snapchat";
+export { default as Telegram } from "./telegram";
+export { default as TikTok } from "./tiktok";
+export { default as Tumblr } from "./tumblr";
+export { default as Twitter } from "./twitter";
+export { default as X } from "./x";
+export { default as YouTube } from "./youtube";
diff --git a/src/components/foundations/social-icons/instagram.tsx b/src/components/foundations/social-icons/instagram.tsx
new file mode 100644
index 0000000..5b9f6cf
--- /dev/null
+++ b/src/components/foundations/social-icons/instagram.tsx
@@ -0,0 +1,26 @@
+import type { SVGProps } from "react";
+
+interface Props extends SVGProps<SVGSVGElement> {
+    size?: number;
+}
+
+const Instagram = ({ size = 24, ...props }: Props) => {
+    return (
+        <svg width={size} height={size} viewBox="0 0 24 24" fill="none" {...props}>
+            <path
+                d="M12 2.16094C15.2063 2.16094 15.5859 2.175 16.8469 2.23125C18.0188 2.28281 18.6516 2.47969 19.0734 2.64375C19.6313 2.85938 20.0344 3.12188 20.4516 3.53906C20.8734 3.96094 21.1313 4.35938 21.3469 4.91719C21.5109 5.33906 21.7078 5.97656 21.7594 7.14375C21.8156 8.40937 21.8297 8.78906 21.8297 11.9906C21.8297 15.1969 21.8156 15.5766 21.7594 16.8375C21.7078 18.0094 21.5109 18.6422 21.3469 19.0641C21.1313 19.6219 20.8688 20.025 20.4516 20.4422C20.0297 20.8641 19.6313 21.1219 19.0734 21.3375C18.6516 21.5016 18.0141 21.6984 16.8469 21.75C15.5813 21.8063 15.2016 21.8203 12 21.8203C8.79375 21.8203 8.41406 21.8063 7.15313 21.75C5.98125 21.6984 5.34844 21.5016 4.92656 21.3375C4.36875 21.1219 3.96563 20.8594 3.54844 20.4422C3.12656 20.0203 2.86875 19.6219 2.65313 19.0641C2.48906 18.6422 2.29219 18.0047 2.24063 16.8375C2.18438 15.5719 2.17031 15.1922 2.17031 11.9906C2.17031 8.78438 2.18438 8.40469 2.24063 7.14375C2.29219 5.97187 2.48906 5.33906 2.65313 4.91719C2.86875 4.35938 3.13125 3.95625 3.54844 3.53906C3.97031 3.11719 4.36875 2.85938 4.92656 2.64375C5.34844 2.47969 5.98594 2.28281 7.15313 2.23125C8.41406 2.175 8.79375 2.16094 12 2.16094ZM12 0C8.74219 0 8.33438 0.0140625 7.05469 0.0703125C5.77969 0.126563 4.90313 0.332812 4.14375 0.628125C3.35156 0.9375 2.68125 1.34531 2.01563 2.01562C1.34531 2.68125 0.9375 3.35156 0.628125 4.13906C0.332812 4.90313 0.126563 5.775 0.0703125 7.05C0.0140625 8.33437 0 8.74219 0 12C0 15.2578 0.0140625 15.6656 0.0703125 16.9453C0.126563 18.2203 0.332812 19.0969 0.628125 19.8563C0.9375 20.6484 1.34531 21.3188 2.01563 21.9844C2.68125 22.65 3.35156 23.0625 4.13906 23.3672C4.90313 23.6625 5.775 23.8687 7.05 23.925C8.32969 23.9812 8.7375 23.9953 11.9953 23.9953C15.2531 23.9953 15.6609 23.9812 16.9406 23.925C18.2156 23.8687 19.0922 23.6625 19.8516 23.3672C20.6391 23.0625 21.3094 22.65 21.975 21.9844C22.6406 21.3188 23.0531 20.6484 23.3578 19.8609C23.6531 19.0969 23.8594 18.225 23.9156 16.95C23.9719 15.6703 23.9859 15.2625 23.9859 12.0047C23.9859 8.74688 23.9719 8.33906 23.9156 7.05938C23.8594 5.78438 23.6531 4.90781 23.3578 4.14844C23.0625 3.35156 22.6547 2.68125 21.9844 2.01562C21.3188 1.35 20.6484 0.9375 19.8609 0.632812C19.0969 0.3375 18.225 0.13125 16.95 0.075C15.6656 0.0140625 15.2578 0 12 0Z"
+                fill="currentColor"
+            />
+            <path
+                d="M12 5.83594C8.59688 5.83594 5.83594 8.59688 5.83594 12C5.83594 15.4031 8.59688 18.1641 12 18.1641C15.4031 18.1641 18.1641 15.4031 18.1641 12C18.1641 8.59688 15.4031 5.83594 12 5.83594ZM12 15.9984C9.79219 15.9984 8.00156 14.2078 8.00156 12C8.00156 9.79219 9.79219 8.00156 12 8.00156C14.2078 8.00156 15.9984 9.79219 15.9984 12C15.9984 14.2078 14.2078 15.9984 12 15.9984Z"
+                fill="currentColor"
+            />
+            <path
+                d="M19.8469 5.59214C19.8469 6.38902 19.2 7.0312 18.4078 7.0312C17.6109 7.0312 16.9688 6.38433 16.9688 5.59214C16.9688 4.79526 17.6156 4.15308 18.4078 4.15308C19.2 4.15308 19.8469 4.79995 19.8469 5.59214Z"
+                fill="currentColor"
+            />
+        </svg>
+    );
+};
+
+export default Instagram;
diff --git a/src/components/foundations/social-icons/layers.tsx b/src/components/foundations/social-icons/layers.tsx
new file mode 100644
index 0000000..be6a641
--- /dev/null
+++ b/src/components/foundations/social-icons/layers.tsx
@@ -0,0 +1,36 @@
+import type { SVGProps } from "react";
+
+interface Props extends SVGProps<SVGSVGElement> {
+    size?: number;
+}
+
+const Layers = ({ size = 24, ...props }: Props) => {
+    return (
+        <svg width={size} height={size} viewBox="0 0 24 24" fill="none" {...props}>
+            <g clipPath="url(#clip0_7441_94320)">
+                <path
+                    opacity="0.2"
+                    d="M0.363357 13.6945L0.421539 4.96865C0.431721 3.38902 1.53645 2.03484 3.06154 1.73302L11.4884 0.0624719C13.5132 -0.338983 15.3924 1.24574 15.3794 3.34247L15.3212 12.0697C15.3103 13.6487 14.2055 15.0021 12.6804 15.3047L4.25354 16.9752C2.22881 17.3767 0.349539 15.7919 0.363357 13.6945Z"
+                    fill="currentColor"
+                />
+                <path
+                    opacity="0.5"
+                    d="M4.49226 17.1762L4.55044 8.44892C4.5599 6.87073 5.66535 5.51728 7.19045 5.21473L15.6174 3.54492C17.6421 3.14346 19.5214 4.72746 19.5075 6.82492L19.4494 15.5522C19.4392 17.1311 18.3344 18.4846 16.8094 18.7871L8.38245 20.4576C6.35772 20.8584 4.47845 19.2744 4.49226 17.1776V17.1762Z"
+                    fill="currentColor"
+                />
+                <path
+                    opacity="0.8"
+                    d="M8.62091 20.6576L8.67909 11.9303C8.68928 10.3507 9.794 8.99797 11.3191 8.69542L19.746 7.02487C21.7707 6.62342 23.65 8.20815 23.6362 10.3049L23.578 19.0321C23.5678 20.6118 22.4631 21.9652 20.938 22.2671L12.5111 23.9376C10.4864 24.3391 8.60709 22.7543 8.62019 20.6576H8.62091Z"
+                    fill="currentColor"
+                />
+            </g>
+            <defs>
+                <clipPath id="clip0_7441_94320">
+                    <rect width="24" height="24" fill="white" />
+                </clipPath>
+            </defs>
+        </svg>
+    );
+};
+
+export default Layers;
diff --git a/src/components/foundations/social-icons/linkedin.tsx b/src/components/foundations/social-icons/linkedin.tsx
new file mode 100644
index 0000000..f9148a2
--- /dev/null
+++ b/src/components/foundations/social-icons/linkedin.tsx
@@ -0,0 +1,18 @@
+import type { SVGProps } from "react";
+
+interface Props extends SVGProps<SVGSVGElement> {
+    size?: number;
+}
+
+const LinkedIn = ({ size = 24, ...props }: Props) => {
+    return (
+        <svg width={size} height={size} viewBox="0 0 24 24" fill="none" {...props}>
+            <path
+                d="M22.2234 0H1.77187C0.792187 0 0 0.773438 0 1.72969V22.2656C0 23.2219 0.792187 24 1.77187 24H22.2234C23.2031 24 24 23.2219 24 22.2703V1.72969C24 0.773438 23.2031 0 22.2234 0ZM7.12031 20.4516H3.55781V8.99531H7.12031V20.4516ZM5.33906 7.43438C4.19531 7.43438 3.27188 6.51094 3.27188 5.37187C3.27188 4.23281 4.19531 3.30937 5.33906 3.30937C6.47813 3.30937 7.40156 4.23281 7.40156 5.37187C7.40156 6.50625 6.47813 7.43438 5.33906 7.43438ZM20.4516 20.4516H16.8937V14.8828C16.8937 13.5563 16.8703 11.8453 15.0422 11.8453C13.1906 11.8453 12.9094 13.2938 12.9094 14.7891V20.4516H9.35625V8.99531H12.7687V10.5609H12.8156C13.2891 9.66094 14.4516 8.70938 16.1813 8.70938C19.7859 8.70938 20.4516 11.0813 20.4516 14.1656V20.4516V20.4516Z"
+                fill="currentColor"
+            />
+        </svg>
+    );
+};
+
+export default LinkedIn;
diff --git a/src/components/foundations/social-icons/pinterest.tsx b/src/components/foundations/social-icons/pinterest.tsx
new file mode 100644
index 0000000..4cbdf2d
--- /dev/null
+++ b/src/components/foundations/social-icons/pinterest.tsx
@@ -0,0 +1,18 @@
+import type { SVGProps } from "react";
+
+interface Props extends SVGProps<SVGSVGElement> {
+    size?: number;
+}
+
+const Pinterest = ({ size = 24, ...props }: Props) => {
+    return (
+        <svg width={size} height={size} viewBox="0 0 24 24" fill="none" {...props}>
+            <path
+                d="M12 0C5.37188 0 0 5.37188 0 12C0 17.0859 3.16406 21.4266 7.62656 23.175C7.52344 22.2234 7.425 20.7703 7.66875 19.7344C7.88906 18.7969 9.075 13.7719 9.075 13.7719C9.075 13.7719 8.71406 13.0547 8.71406 11.9906C8.71406 10.3219 9.67969 9.075 10.8844 9.075C11.9062 9.075 12.4031 9.84375 12.4031 10.7672C12.4031 11.7984 11.7469 13.3359 11.4094 14.7609C11.1281 15.9562 12.0094 16.9313 13.1859 16.9313C15.3187 16.9313 16.9594 14.6812 16.9594 11.4375C16.9594 8.56406 14.8969 6.55313 11.9484 6.55313C8.53594 6.55313 6.52969 9.1125 6.52969 11.7609C6.52969 12.7922 6.92812 13.8984 7.425 14.4984C7.52344 14.6156 7.5375 14.7234 7.50937 14.8406C7.42031 15.2203 7.21406 16.0359 7.17656 16.2C7.125 16.4203 7.00313 16.4672 6.77344 16.3594C5.27344 15.6609 4.33594 13.4719 4.33594 11.7094C4.33594 7.92188 7.0875 4.44844 12.2625 4.44844C16.425 4.44844 19.6594 7.41563 19.6594 11.3813C19.6594 15.5156 17.0531 18.8438 13.4344 18.8438C12.2203 18.8438 11.0766 18.2109 10.6828 17.4656C10.6828 17.4656 10.0828 19.7578 9.9375 20.3203C9.66562 21.3609 8.93437 22.6688 8.44687 23.4656C9.57187 23.8125 10.7625 24 12 24C18.6281 24 24 18.6281 24 12C24 5.37188 18.6281 0 12 0Z"
+                fill="currentColor"
+            />
+        </svg>
+    );
+};
+
+export default Pinterest;
diff --git a/src/components/foundations/social-icons/reddit.tsx b/src/components/foundations/social-icons/reddit.tsx
new file mode 100644
index 0000000..a3e9bb8
--- /dev/null
+++ b/src/components/foundations/social-icons/reddit.tsx
@@ -0,0 +1,20 @@
+import type { SVGProps } from "react";
+
+interface Props extends SVGProps<SVGSVGElement> {
+    size?: number;
+}
+
+const Reddit = ({ size = 24, ...props }: Props) => {
+    return (
+        <svg width={size} height={size} viewBox="0 0 24 24" fill="none" {...props}>
+            <path
+                fillRule="evenodd"
+                clipRule="evenodd"
+                d="M24 12C24 18.6274 18.6274 24 12 24C5.37258 24 0 18.6274 0 12C0 5.37258 5.37258 0 12 0C18.6274 0 24 5.37258 24 12ZM18.2456 10.2456C19.214 10.2456 20 11.0316 20 12C20 12.7158 19.5649 13.3333 18.9895 13.614C19.0175 13.7824 19.0316 13.9509 19.0316 14.1333C19.0316 16.828 15.9018 19.0035 12.0281 19.0035C8.15439 19.0035 5.02457 16.828 5.02457 14.1333C5.02457 13.9509 5.0386 13.7684 5.06667 13.6C4.44913 13.3193 4.02808 12.7158 4.02808 12C4.02808 11.0316 4.81404 10.2456 5.78246 10.2456C6.24562 10.2456 6.68071 10.4421 6.98948 10.7368C8.1965 9.85261 9.86667 9.30524 11.7333 9.2491L12.6176 5.06664C12.6456 4.98243 12.6877 4.91226 12.7579 4.87015C12.8281 4.82805 12.9123 4.81401 12.9965 4.82805L15.9018 5.44559C16.0983 5.02454 16.5193 4.74384 17.0105 4.74384C17.6983 4.74384 18.2597 5.30524 18.2597 5.99296C18.2597 6.68068 17.6983 7.24208 17.0105 7.24208C16.3368 7.24208 15.7895 6.70875 15.7614 6.0491L13.1649 5.50173L12.3649 9.2491C14.1895 9.31927 15.8456 9.88068 17.0386 10.7368C17.3474 10.428 17.7684 10.2456 18.2456 10.2456ZM9.24913 12C8.56141 12 8.00001 12.5614 8.00001 13.2491C8.00001 13.9368 8.56141 14.4982 9.24913 14.4982C9.93685 14.4982 10.4983 13.9368 10.4983 13.2491C10.4983 12.5614 9.93685 12 9.24913 12ZM12.014 17.4596C12.4912 17.4596 14.1193 17.4035 14.9754 16.5473C15.1018 16.421 15.1018 16.2245 15.0035 16.0842C14.8772 15.9579 14.6667 15.9579 14.5404 16.0842C13.993 16.6175 12.8561 16.814 12.0281 16.814C11.2 16.814 10.0491 16.6175 9.51579 16.0842C9.38948 15.9579 9.17895 15.9579 9.05264 16.0842C8.92632 16.2105 8.92632 16.421 9.05264 16.5473C9.89474 17.3895 11.5368 17.4596 12.014 17.4596ZM13.5018 13.2491C13.5018 13.9368 14.0632 14.4982 14.7509 14.4982C15.4386 14.4982 16 13.9368 16 13.2491C16 12.5614 15.4386 12 14.7509 12C14.0632 12 13.5018 12.5614 13.5018 13.2491Z"
+                fill="currentColor"
+            />
+        </svg>
+    );
+};
+
+export default Reddit;
diff --git a/src/components/foundations/social-icons/signal.tsx b/src/components/foundations/social-icons/signal.tsx
new file mode 100644
index 0000000..8f2b3e0
--- /dev/null
+++ b/src/components/foundations/social-icons/signal.tsx
@@ -0,0 +1,18 @@
+import type { SVGProps } from "react";
+
+interface Props extends SVGProps<SVGSVGElement> {
+    size?: number;
+}
+
+const Signal = ({ size = 24, ...props }: Props) => {
+    return (
+        <svg width={size} height={size} viewBox="0 0 24 24" fill="none" {...props}>
+            <path
+                d="M9.11911 0.350322L9.38845 1.44131C8.32691 1.70367 7.31091 2.12432 6.3746 2.68912L5.79842 1.72428C6.82904 1.10015 7.94881 0.63684 9.11911 0.350322V0.350322ZM14.8809 0.350322L14.6115 1.44131C15.6731 1.70367 16.6891 2.12432 17.6254 2.68912L18.2084 1.72428C17.1751 1.1007 16.0531 0.637446 14.8809 0.350322V0.350322ZM1.72427 5.79503C1.10072 6.82716 0.637457 7.94795 0.350307 9.11913L1.44129 9.38846C1.70365 8.32693 2.1243 7.31093 2.68911 6.37461L1.72427 5.79503ZM1.12423 12C1.12414 11.4545 1.16517 10.9097 1.24696 10.3704L0.135519 10.1999C-0.0451731 11.392 -0.0451731 12.6046 0.135519 13.7967L1.24696 13.6297C1.1653 13.0903 1.12427 12.5455 1.12423 12V12ZM18.2016 22.2723L17.6254 21.3109C16.6906 21.8762 15.6756 22.2969 14.615 22.5587L14.8843 23.6497C16.0532 23.3604 17.1716 22.8961 18.2016 22.2723ZM22.8758 12C22.8757 12.5455 22.8347 13.0903 22.753 13.6297L23.8645 13.7967C24.0452 12.6046 24.0452 11.392 23.8645 10.1999L22.753 10.3704C22.8348 10.9097 22.8759 11.4545 22.8758 12V12ZM23.6497 14.8775L22.5587 14.6082C22.297 15.671 21.8763 16.6882 21.3109 17.6254L22.2757 18.205C22.8999 17.172 23.3632 16.0499 23.6497 14.8775V14.8775ZM13.6297 22.7531C12.5494 22.9167 11.4506 22.9167 10.3703 22.7531L10.2033 23.8645C11.3943 24.0452 12.6057 24.0452 13.7967 23.8645L13.6297 22.7531ZM20.7552 18.4505C20.1072 19.3292 19.3302 20.1051 18.4505 20.7518L19.1187 21.6587C20.0876 20.9454 20.9449 20.0916 21.6621 19.1255L20.7552 18.4505ZM18.4505 3.24485C19.3302 3.89279 20.1072 4.66977 20.7552 5.54955L21.6621 4.87451C20.9474 3.90756 20.0925 3.05263 19.1255 2.33796L18.4505 3.24485ZM3.24483 5.54955C3.89278 4.66977 4.66976 3.89279 5.54954 3.24485L4.87449 2.33796C3.90754 3.05263 3.05262 3.90756 2.33795 4.87451L3.24483 5.54955ZM22.2757 5.79503L21.3109 6.37461C21.8762 7.30945 22.2969 8.3244 22.5587 9.38506L23.6497 9.11572C23.3625 7.94563 22.8992 6.82596 22.2757 5.79503V5.79503ZM10.3703 1.24698C11.4506 1.08331 12.5494 1.08331 13.6297 1.24698L13.7967 0.135534C12.6057 -0.0451779 11.3943 -0.0451779 10.2033 0.135534L10.3703 1.24698ZM3.82101 21.9587L1.49925 22.4974L2.04134 20.1756L0.946941 19.9199L0.404856 22.2417C0.370939 22.3856 0.365734 22.5348 0.389539 22.6808C0.413344 22.8267 0.465692 22.9666 0.543588 23.0923C0.621485 23.218 0.723402 23.3271 0.843508 23.4134C0.963615 23.4997 1.09956 23.5615 1.24355 23.5952C1.41196 23.6327 1.58655 23.6327 1.75495 23.5952L4.07671 23.0599L3.82101 21.9587ZM1.17878 18.9176L2.27658 19.1698L2.65161 17.5606C2.10394 16.642 1.69604 15.6469 1.44129 14.6082L0.350307 14.8775C0.595705 15.8718 0.966907 16.8307 1.45493 17.7311L1.17878 18.9176ZM6.42915 21.3518L4.81994 21.7268L5.07564 22.8246L6.25868 22.5485C7.15838 23.038 8.11751 23.4093 9.11229 23.6531L9.38163 22.5621C8.34612 22.304 7.35459 21.8939 6.43938 21.345L6.42915 21.3518ZM12 2.24932C6.61325 2.25273 2.25272 6.62009 2.25272 12.0034C2.25568 13.837 2.77433 15.6328 3.74941 17.1856L2.81185 21.1882L6.81099 20.2506C11.3693 23.1178 17.3902 21.7507 20.2574 17.1958C23.1247 12.641 21.7609 6.62009 17.2061 3.74943C15.6467 2.76884 13.842 2.24882 12 2.24932"
+                fill="currentColor"
+            />
+        </svg>
+    );
+};
+
+export default Signal;
diff --git a/src/components/foundations/social-icons/snapchat.tsx b/src/components/foundations/social-icons/snapchat.tsx
new file mode 100644
index 0000000..7d34b47
--- /dev/null
+++ b/src/components/foundations/social-icons/snapchat.tsx
@@ -0,0 +1,18 @@
+import type { SVGProps } from "react";
+
+interface Props extends SVGProps<SVGSVGElement> {
+    size?: number;
+}
+
+const Snapchat = ({ size = 24, ...props }: Props) => {
+    return (
+        <svg width={size} height={size} viewBox="0 0 24 24" fill="none" {...props}>
+            <path
+                d="M23.9132 17.4571C23.7478 17.0035 23.4291 16.7584 23.0675 16.5623C23.0001 16.5255 22.9388 16.4887 22.8836 16.4642C22.7733 16.4091 22.663 16.3539 22.5527 16.2988C21.425 15.6982 20.5425 14.9505 19.9358 14.0557C19.7642 13.8044 19.611 13.5348 19.4884 13.259C19.4332 13.1119 19.4394 13.0261 19.4761 12.9464C19.5129 12.8851 19.5619 12.8361 19.6232 12.7932C19.8193 12.6645 20.0155 12.5358 20.1503 12.45C20.3893 12.2907 20.5854 12.1681 20.708 12.0823C21.1676 11.7575 21.4924 11.4143 21.6947 11.0282C21.9827 10.4889 22.0195 9.85761 21.7989 9.28765C21.4924 8.47868 20.7325 7.98226 19.8071 7.98226C19.611 7.98226 19.421 8.00065 19.2249 8.04355C19.1758 8.0558 19.1207 8.06806 19.0716 8.08032C19.0778 7.52874 19.0655 6.94653 19.0165 6.37044C18.8449 4.35413 18.134 3.30002 17.3985 2.4604C16.9266 1.93334 16.3751 1.48596 15.7561 1.13663C14.6407 0.499254 13.3721 0.174438 11.9931 0.174438C10.6142 0.174438 9.35171 0.499254 8.2363 1.13663C7.61732 1.48596 7.06574 1.93334 6.59384 2.4604C5.85841 3.30002 5.15362 4.36026 4.9759 6.37044C4.92687 6.94653 4.91461 7.52874 4.92074 8.08032C4.87171 8.06806 4.82268 8.0558 4.76752 8.04355C4.57754 8.00065 4.38142 7.98226 4.19144 7.98226C3.26602 7.98226 2.50607 8.4848 2.19965 9.28765C1.97902 9.85761 2.01579 10.4889 2.30383 11.0282C2.50607 11.4143 2.83089 11.7575 3.29053 12.0823C3.41311 12.1681 3.60309 12.2907 3.84824 12.45C3.97694 12.5358 4.16692 12.6584 4.35691 12.7809C4.42432 12.8238 4.47948 12.879 4.52238 12.9464C4.55915 13.0261 4.56528 13.1119 4.50399 13.2712C4.38142 13.5409 4.23434 13.8044 4.06274 14.0496C3.46826 14.9198 2.61026 15.6614 1.51937 16.2559C0.943285 16.5623 0.342683 16.7645 0.085282 17.4571C-0.104704 17.978 0.0178675 18.5663 0.502026 19.0689C0.679755 19.2527 0.888127 19.4121 1.11489 19.5347C1.58679 19.7921 2.08933 19.9943 2.61639 20.1353C2.7267 20.1659 2.82476 20.2088 2.91669 20.2701C3.09442 20.4233 3.0699 20.6562 3.30279 20.9994C3.41923 21.1771 3.57245 21.3303 3.74405 21.4529C4.24047 21.7961 4.79817 21.8145 5.38651 21.839C5.9197 21.8574 6.5203 21.8819 7.21283 22.1087C7.50087 22.2006 7.79505 22.3844 8.13825 22.5989C8.96561 23.1076 10.0933 23.8001 11.987 23.8001C13.8807 23.8001 15.0145 23.1015 15.848 22.5928C16.1912 22.3844 16.4854 22.2006 16.7612 22.1087C17.4476 21.8819 18.0543 21.8574 18.5875 21.839C19.1758 21.8145 19.7335 21.7961 20.23 21.4529C20.4383 21.3058 20.6099 21.122 20.7325 20.9013C20.9041 20.6133 20.898 20.411 21.0573 20.2701C21.1431 20.2088 21.2412 20.1659 21.3392 20.1414C21.8663 20.0004 22.3811 19.7982 22.8591 19.5347C23.0981 19.406 23.3188 19.2343 23.5026 19.0321L23.5087 19.026C23.9868 18.5357 24.1032 17.9596 23.9132 17.4571ZM22.234 18.358C21.2105 18.9218 20.5241 18.8605 19.9971 19.2037C19.5436 19.4917 19.8132 20.1169 19.4884 20.3436C19.0839 20.6194 17.895 20.3252 16.3628 20.8339C15.0942 21.2507 14.2914 22.458 12.0115 22.458C9.73168 22.458 8.94722 21.2568 7.66022 20.8339C6.12807 20.3252 4.93912 20.6255 4.53464 20.3436C4.20982 20.1169 4.47335 19.4917 4.02596 19.2037C3.49278 18.8605 2.8125 18.9218 1.78903 18.358C1.13327 17.9964 1.50711 17.7757 1.72162 17.6716C5.43554 15.8759 6.03001 13.0996 6.05453 12.8913C6.08517 12.64 6.12194 12.4439 5.84616 12.1926C5.58263 11.9475 4.40594 11.2182 4.07499 10.9914C3.53568 10.6114 3.29666 10.2376 3.47439 9.77181C3.59696 9.45312 3.89726 9.33055 4.20982 9.33055C4.30788 9.33055 4.40594 9.34281 4.50399 9.36119C5.09847 9.48989 5.67456 9.78407 6.0055 9.86987C6.0484 9.88212 6.08517 9.88825 6.12807 9.88825C6.3058 9.88825 6.36709 9.79632 6.35483 9.59408C6.31806 8.94445 6.22613 7.68196 6.33031 6.49914C6.47127 4.87507 6.9922 4.06609 7.61732 3.35518C7.91762 3.01197 9.32107 1.52886 12.0115 1.52886C14.702 1.52886 16.1054 3.00585 16.4057 3.34905C17.0308 4.05996 17.5518 4.86894 17.6927 6.49301C17.7969 7.67583 17.705 8.93832 17.6621 9.58795C17.6498 9.80245 17.7111 9.88212 17.8888 9.88212C17.9317 9.88212 17.9685 9.87599 18.0114 9.86374C18.3423 9.78406 18.9184 9.48376 19.5129 9.35506C19.611 9.33055 19.709 9.32442 19.8071 9.32442C20.1196 9.32442 20.4199 9.44699 20.5425 9.76568C20.7202 10.2315 20.4812 10.6053 19.9419 10.9853C19.6171 11.212 18.4404 11.9413 18.1707 12.1865C17.895 12.4377 17.9317 12.6339 17.9624 12.8851C17.9869 13.0935 18.5814 15.8698 22.2953 17.6654C22.5159 17.7696 22.8836 17.9964 22.234 18.358Z"
+                fill="currentColor"
+            />
+        </svg>
+    );
+};
+
+export default Snapchat;
diff --git a/src/components/foundations/social-icons/telegram.tsx b/src/components/foundations/social-icons/telegram.tsx
new file mode 100644
index 0000000..376fac1
--- /dev/null
+++ b/src/components/foundations/social-icons/telegram.tsx
@@ -0,0 +1,20 @@
+import type { SVGProps } from "react";
+
+interface Props extends SVGProps<SVGSVGElement> {
+    size?: number;
+}
+
+const Telegram = ({ size = 24, ...props }: Props) => {
+    return (
+        <svg width={size} height={size} viewBox="0 0 24 24" fill="none" {...props}>
+            <path
+                fillRule="evenodd"
+                clipRule="evenodd"
+                d="M24 12C24 18.6274 18.6274 24 12 24C5.37258 24 0 18.6274 0 12C0 5.37258 5.37258 0 12 0C18.6274 0 24 5.37258 24 12ZM12.43 8.85893C11.2628 9.3444 8.93014 10.3492 5.43189 11.8733C4.86383 12.0992 4.56626 12.3202 4.53917 12.5363C4.49339 12.9015 4.95071 13.0453 5.57347 13.2411C5.65818 13.2678 5.74595 13.2954 5.83594 13.3246C6.44864 13.5238 7.27283 13.7568 7.70129 13.766C8.08994 13.7744 8.52373 13.6142 9.00264 13.2853C12.2712 11.079 13.9584 9.96381 14.0643 9.93977C14.139 9.92281 14.2426 9.90148 14.3128 9.96385C14.3829 10.0262 14.376 10.1443 14.3686 10.176C14.3233 10.3691 12.5281 12.0381 11.5991 12.9018C11.3095 13.171 11.1041 13.362 11.0621 13.4056C10.968 13.5033 10.8721 13.5958 10.78 13.6846C10.2108 14.2333 9.78391 14.6448 10.8036 15.3168C11.2936 15.6397 11.6858 15.9067 12.077 16.1731C12.5042 16.4641 12.9303 16.7543 13.4816 17.1157C13.6221 17.2077 13.7562 17.3034 13.8869 17.3965C14.3841 17.751 14.8307 18.0694 15.3826 18.0186C15.7032 17.9891 16.0345 17.6876 16.2027 16.7884C16.6002 14.6631 17.3816 10.0585 17.5622 8.16097C17.578 7.99473 17.5581 7.78197 17.5422 7.68857C17.5262 7.59518 17.4928 7.46211 17.3714 7.3636C17.2276 7.24694 17.0056 7.22234 16.9064 7.22408C16.455 7.23203 15.7626 7.47282 12.43 8.85893Z"
+                fill="currentColor"
+            />
+        </svg>
+    );
+};
+
+export default Telegram;
diff --git a/src/components/foundations/social-icons/tiktok.tsx b/src/components/foundations/social-icons/tiktok.tsx
new file mode 100644
index 0000000..762bb7d
--- /dev/null
+++ b/src/components/foundations/social-icons/tiktok.tsx
@@ -0,0 +1,18 @@
+import type { SVGProps } from "react";
+
+interface Props extends SVGProps<SVGSVGElement> {
+    size?: number;
+}
+
+const TikTok = ({ size = 24, ...props }: Props) => {
+    return (
+        <svg width={size} height={size} viewBox="0 0 24 24" fill="none" {...props}>
+            <path
+                d="M17.0725 0H13.0278V16.3478C13.0278 18.2957 11.4722 19.8957 9.53626 19.8957C7.60034 19.8957 6.04469 18.2957 6.04469 16.3478C6.04469 14.4348 7.56577 12.8695 9.43257 12.8V8.69567C5.31872 8.7652 2 12.1391 2 16.3478C2 20.5913 5.38786 24 9.57085 24C13.7538 24 17.1416 20.5565 17.1416 16.3478V7.9652C18.6627 9.07827 20.5295 9.73913 22.5 9.77393V5.66957C19.4579 5.56522 17.0725 3.06087 17.0725 0Z"
+                fill="currentColor"
+            />
+        </svg>
+    );
+};
+
+export default TikTok;
diff --git a/src/components/foundations/social-icons/tumblr.tsx b/src/components/foundations/social-icons/tumblr.tsx
new file mode 100644
index 0000000..7395eca
--- /dev/null
+++ b/src/components/foundations/social-icons/tumblr.tsx
@@ -0,0 +1,18 @@
+import type { SVGProps } from "react";
+
+interface Props extends SVGProps<SVGSVGElement> {
+    size?: number;
+}
+
+const Tumblr = ({ size = 24, ...props }: Props) => {
+    return (
+        <svg width={size} height={size} viewBox="0 0 24 24" fill="none" {...props}>
+            <path
+                d="M14.6 24C11 24 8.3 22.15 8.3 17.7V10.6H5V6.75C8.6 5.8 10.1 2.7 10.3 0H14.05V6.1H18.4V10.6H14.05V16.8C14.05 18.65 15 19.3 16.5 19.3H18.6V24H14.6Z"
+                fill="currentColor"
+            />
+        </svg>
+    );
+};
+
+export default Tumblr;
diff --git a/src/components/foundations/social-icons/twitter.tsx b/src/components/foundations/social-icons/twitter.tsx
new file mode 100644
index 0000000..bce1006
--- /dev/null
+++ b/src/components/foundations/social-icons/twitter.tsx
@@ -0,0 +1,18 @@
+import type { SVGProps } from "react";
+
+interface Props extends SVGProps<SVGSVGElement> {
+    size?: number;
+}
+
+const Twitter = ({ size = 24, ...props }: Props) => {
+    return (
+        <svg width={size} height={size} viewBox="0 0 24 24" fill="none" {...props}>
+            <path
+                d="M7.55016 21.75C16.6045 21.75 21.5583 14.2468 21.5583 7.74192C21.5583 7.53098 21.5536 7.31536 21.5442 7.10442C22.5079 6.40752 23.3395 5.54432 24 4.55536C23.1025 4.95466 22.1496 5.21544 21.1739 5.3288C22.2013 4.71297 22.9705 3.74553 23.3391 2.60583C22.3726 3.17862 21.3156 3.58267 20.2134 3.80067C19.4708 3.01162 18.489 2.48918 17.4197 2.31411C16.3504 2.13905 15.2532 2.32111 14.2977 2.83216C13.3423 3.3432 12.5818 4.15477 12.1338 5.14137C11.6859 6.12798 11.5754 7.23468 11.8195 8.29036C9.86249 8.19215 7.94794 7.68377 6.19998 6.79816C4.45203 5.91255 2.90969 4.6695 1.67297 3.14958C1.0444 4.2333 0.852057 5.51571 1.13503 6.73615C1.418 7.9566 2.15506 9.02351 3.19641 9.72005C2.41463 9.69523 1.64998 9.48474 0.965625 9.10598V9.16692C0.964925 10.3042 1.3581 11.4066 2.07831 12.2868C2.79852 13.167 3.80132 13.7706 4.91625 13.995C4.19206 14.1932 3.43198 14.2221 2.69484 14.0794C3.00945 15.0575 3.62157 15.913 4.44577 16.5264C5.26997 17.1398 6.26512 17.4807 7.29234 17.5013C5.54842 18.8712 3.39417 19.6142 1.17656 19.6107C0.783287 19.6101 0.390399 19.586 0 19.5385C2.25286 20.9838 4.87353 21.7514 7.55016 21.75Z"
+                fill="currentColor"
+            />
+        </svg>
+    );
+};
+
+export default Twitter;
diff --git a/src/components/foundations/social-icons/x.tsx b/src/components/foundations/social-icons/x.tsx
new file mode 100644
index 0000000..5bf4848
--- /dev/null
+++ b/src/components/foundations/social-icons/x.tsx
@@ -0,0 +1,20 @@
+import type { SVGProps } from "react";
+
+interface Props extends SVGProps<SVGSVGElement> {
+    size?: number;
+}
+
+const X = ({ size = 24, ...props }: Props) => {
+    return (
+        <svg width={size} height={size} viewBox="0 0 24 22" fill="none" {...props}>
+            <path
+                fillRule="evenodd"
+                clipRule="evenodd"
+                d="M15.9455 22L10.396 14.0901L3.44886 22H0.509766L9.09209 12.2311L0.509766 0H8.05571L13.286 7.45502L19.8393 0H22.7784L14.5943 9.31648L23.4914 22H15.9455ZM19.2185 19.77H17.2398L4.71811 2.23H6.6971L11.7121 9.25316L12.5793 10.4719L19.2185 19.77Z"
+                fill="currentColor"
+            />
+        </svg>
+    );
+};
+
+export default X;
diff --git a/src/components/foundations/social-icons/youtube.tsx b/src/components/foundations/social-icons/youtube.tsx
new file mode 100644
index 0000000..0206f24
--- /dev/null
+++ b/src/components/foundations/social-icons/youtube.tsx
@@ -0,0 +1,18 @@
+import type { SVGProps } from "react";
+
+interface Props extends SVGProps<SVGSVGElement> {
+    size?: number;
+}
+
+const YouTube = ({ size = 24, ...props }: Props) => {
+    return (
+        <svg width={size} height={size} viewBox="0 0 24 24" fill="none" {...props}>
+            <path
+                d="M23.7609 7.20005C23.7609 7.20005 23.5266 5.54536 22.8047 4.8188C21.8906 3.86255 20.8688 3.85786 20.4 3.80161C17.0438 3.55786 12.0047 3.55786 12.0047 3.55786H11.9953C11.9953 3.55786 6.95625 3.55786 3.6 3.80161C3.13125 3.85786 2.10938 3.86255 1.19531 4.8188C0.473438 5.54536 0.24375 7.20005 0.24375 7.20005C0.24375 7.20005 0 9.14536 0 11.086V12.9047C0 14.8454 0.239062 16.7907 0.239062 16.7907C0.239062 16.7907 0.473437 18.4454 1.19062 19.1719C2.10469 20.1282 3.30469 20.0954 3.83906 20.1985C5.76094 20.3813 12 20.4375 12 20.4375C12 20.4375 17.0438 20.4282 20.4 20.1891C20.8688 20.1329 21.8906 20.1282 22.8047 19.1719C23.5266 18.4454 23.7609 16.7907 23.7609 16.7907C23.7609 16.7907 24 14.85 24 12.9047V11.086C24 9.14536 23.7609 7.20005 23.7609 7.20005ZM9.52031 15.1125V8.36724L16.0031 11.7516L9.52031 15.1125Z"
+                fill="currentColor"
+            />
+        </svg>
+    );
+};
+
+export default YouTube;
diff --git a/src/components/marketing/header-navigation/base-components/nav-menu-item.tsx b/src/components/marketing/header-navigation/base-components/nav-menu-item.tsx
new file mode 100644
index 0000000..dbea8c8
--- /dev/null
+++ b/src/components/marketing/header-navigation/base-components/nav-menu-item.tsx
@@ -0,0 +1,42 @@
+"use client";
+
+import { type FC, type ReactNode, isValidElement } from "react";
+import { cx } from "@/utils/cx";
+import { isReactComponent } from "@/utils/is-react-component";
+
+interface NavMenuItemLinkProps {
+    href: string;
+    icon?: FC<{ className?: string }> | ReactNode;
+    iconClassName?: string;
+    className?: string;
+    title: string;
+    subtitle?: string;
+    badge?: ReactNode;
+    actionsContent?: ReactNode;
+}
+
+export const NavMenuItemLink = ({ href, icon: Icon, iconClassName, title, badge, subtitle, className, actionsContent }: NavMenuItemLinkProps) => (
+    <a
+        href={href}
+        className={cx(
+            "inline-flex w-full gap-3 px-4 py-3 outline-focus-ring transition duration-100 ease-linear hover:bg-primary_hover focus-visible:outline-2 sm:max-w-80 sm:p-3 md:rounded-lg",
+            className,
+        )}
+    >
+        {isValidElement(Icon) && Icon}
+        {isReactComponent(Icon) && <Icon className={cx("mt-0.5 size-4 shrink-0 stroke-[2.3px] text-fg-brand-primary", iconClassName)} />}
+
+        <div className="flex flex-col gap-3">
+            <div className="flex flex-col gap-0.5">
+                <div className="flex items-center gap-2">
+                    <span className="text-md font-semibold text-primary">{title}</span>
+                    {badge}
+                </div>
+
+                {subtitle && <span className="line-clamp-2 text-sm text-tertiary">{subtitle}</span>}
+            </div>
+
+            {actionsContent}
+        </div>
+    </a>
+);
diff --git a/src/components/marketing/header-navigation/dropdown-header-navigation.tsx b/src/components/marketing/header-navigation/dropdown-header-navigation.tsx
new file mode 100644
index 0000000..8c8386e
--- /dev/null
+++ b/src/components/marketing/header-navigation/dropdown-header-navigation.tsx
@@ -0,0 +1,51 @@
+import { BookClosed, FileCode01, LifeBuoy01, PlayCircle, Stars02 } from "@untitledui/icons";
+import { NavMenuItemLink } from "./base-components/nav-menu-item";
+
+const items = [
+    {
+        title: "Blog",
+        subtitle: "The latest industry new and guides curated by our expert team.",
+        href: "/blog",
+        Icon: BookClosed,
+    },
+    {
+        title: "Customer stories",
+        subtitle: "Learn how our customers are using Untitled UI to 10x their growth.",
+        href: "/customer-stories",
+        Icon: Stars02,
+    },
+    {
+        title: "Video tutorials",
+        subtitle: "Get up and running on our newest features and in-depth guides.",
+        href: "/tutorials",
+        Icon: PlayCircle,
+    },
+    {
+        title: "Documentation",
+        subtitle: "In-depth articles on our tools and technologies to empower teams.",
+        href: "/docs",
+        Icon: FileCode01,
+    },
+    {
+        title: "Help and support",
+        subtitle: "Need help with something? Our expert team is here to help 24/7.",
+        href: "/help",
+        Icon: LifeBuoy01,
+    },
+];
+
+export const DropdownMenuSimple = () => {
+    return (
+        <div className="px-3 pb-2 md:max-w-84 md:p-0">
+            <nav className="overflow-hidden rounded-2xl bg-primary py-2 shadow-xs ring-1 ring-secondary_alt md:p-2 md:shadow-lg">
+                <ul className="flex flex-col gap-0.5">
+                    {items.map(({ title, subtitle, href, Icon }) => (
+                        <li key={title}>
+                            <NavMenuItemLink icon={Icon} title={title} subtitle={subtitle} href={href} />
+                        </li>
+                    ))}
+                </ul>
+            </nav>
+        </div>
+    );
+};
diff --git a/src/components/marketing/header-navigation/header.tsx b/src/components/marketing/header-navigation/header.tsx
new file mode 100644
index 0000000..7614141
--- /dev/null
+++ b/src/components/marketing/header-navigation/header.tsx
@@ -0,0 +1,248 @@
+import type { ReactNode } from "react";
+import { useRef, useState } from "react";
+import { ChevronDown } from "@untitledui/icons";
+import { Button as AriaButton, Dialog as AriaDialog, DialogTrigger as AriaDialogTrigger, Popover as AriaPopover } from "react-aria-components";
+import { Button } from "@/components/base/buttons/button";
+import { UntitledLogo } from "@/components/foundations/logo/untitledui-logo";
+import { UntitledLogoMinimal } from "@/components/foundations/logo/untitledui-logo-minimal";
+import { DropdownMenuSimple } from "@/components/marketing/header-navigation/dropdown-header-navigation";
+import { cx } from "@/utils/cx";
+
+type HeaderNavItem = {
+    label: string;
+    href?: string;
+    menu?: ReactNode;
+};
+
+const headerNavItems: HeaderNavItem[] = [
+    { label: "Products", href: "/products", menu: <DropdownMenuSimple /> },
+    { label: "Services", href: "/Services", menu: <DropdownMenuSimple /> },
+    { label: "Pricing", href: "/pricing" },
+    { label: "Resources", href: "/resources", menu: <DropdownMenuSimple /> },
+    { label: "About", href: "/about" },
+];
+
+const footerNavItems = [
+    { label: "About us", href: "/" },
+    { label: "Press", href: "/products" },
+    { label: "Careers", href: "/resources" },
+    { label: "Legal", href: "/pricing" },
+    { label: "Support", href: "/pricing" },
+    { label: "Contact", href: "/pricing" },
+    { label: "Sitemap", href: "/pricing" },
+    { label: "Cookie settings", href: "/pricing" },
+];
+
+const MobileNavItem = (props: { className?: string; label: string; href?: string; children?: ReactNode }) => {
+    const [isOpen, setIsOpen] = useState(false);
+
+    if (props.href) {
+        return (
+            <li>
+                <a href={props.href} className="flex items-center justify-between px-4 py-3 text-md font-semibold text-primary hover:bg-primary_hover">
+                    {props.label}
+                </a>
+            </li>
+        );
+    }
+
+    return (
+        <li className="flex flex-col gap-0.5">
+            <button
+                aria-expanded={isOpen}
+                onClick={() => setIsOpen(!isOpen)}
+                className="flex w-full items-center justify-between px-4 py-3 text-md font-semibold text-primary hover:bg-primary_hover"
+            >
+                {props.label}{" "}
+                <ChevronDown
+                    className={cx("size-4 stroke-[2.625px] text-fg-quaternary transition duration-100 ease-linear", isOpen ? "-rotate-180" : "rotate-0")}
+                />
+            </button>
+            {isOpen && <div>{props.children}</div>}
+        </li>
+    );
+};
+
+const MobileFooter = () => {
+    return (
+        <div className="flex flex-col gap-8 border-t border-secondary px-4 py-6">
+            <div>
+                <ul className="grid grid-flow-col grid-cols-2 grid-rows-4 gap-x-6 gap-y-3">
+                    {footerNavItems.map((navItem) => (
+                        <li key={navItem.label}>
+                            <Button color="link-gray" size="lg" href={navItem.href}>
+                                {navItem.label}
+                            </Button>
+                        </li>
+                    ))}
+                </ul>
+            </div>
+            <div className="flex flex-col gap-3">
+                <Button size="lg">Sign up</Button>
+                <Button color="secondary" size="lg">
+                    Log in
+                </Button>
+            </div>
+        </div>
+    );
+};
+
+interface HeaderProps {
+    items?: HeaderNavItem[];
+    isFullWidth?: boolean;
+    isFloating?: boolean;
+    className?: string;
+}
+
+export const Header = ({ items = headerNavItems, isFullWidth, isFloating, className }: HeaderProps) => {
+    const headerRef = useRef<HTMLElement>(null);
+
+    return (
+        <header
+            ref={headerRef}
+            className={cx(
+                "relative flex h-18 w-full items-center justify-center md:h-20",
+                isFloating && "h-16 md:h-19 md:pt-3",
+                isFullWidth && !isFloating ? "has-aria-expanded:bg-primary" : "max-md:has-aria-expanded:bg-primary",
+                className,
+            )}
+        >
+            <div className="flex size-full max-w-container flex-1 items-center pr-3 pl-4 md:px-8">
+                <div
+                    className={cx(
+                        "flex w-full justify-between gap-4",
+                        isFloating && "ring-secondary_alt md:rounded-2xl md:bg-primary md:py-3 md:pr-3 md:pl-4 md:shadow-xs md:ring-1",
+                    )}
+                >
+                    <div className="flex flex-1 items-center gap-5">
+                        <UntitledLogo className="h-8 md:max-lg:hidden" />
+                        <UntitledLogoMinimal className="hidden h-8 md:inline-block lg:hidden" />
+
+                        {/* Desktop navigation */}
+                        <nav className="max-md:hidden">
+                            <ul className="flex items-center gap-0.5">
+                                {items.map((navItem) => (
+                                    <li key={navItem.label}>
+                                        {navItem.menu ? (
+                                            <AriaDialogTrigger>
+                                                <AriaButton className="flex cursor-pointer items-center gap-0.5 rounded-lg px-1.5 py-1 text-md font-semibold text-secondary outline-focus-ring transition duration-100 ease-linear hover:text-secondary_hover focus-visible:outline-2 focus-visible:outline-offset-2">
+                                                    <span className="px-0.5">{navItem.label}</span>
+
+                                                    <ChevronDown className="size-4 rotate-0 stroke-[2.625px] text-fg-quaternary transition duration-100 ease-linear in-aria-expanded:-rotate-180" />
+                                                </AriaButton>
+
+                                                <AriaPopover
+                                                    className={({ isEntering, isExiting }) =>
+                                                        cx(
+                                                            "hidden origin-top will-change-transform md:block",
+                                                            isFullWidth && "w-full",
+                                                            isEntering && "duration-200 ease-out animate-in fade-in slide-in-from-top-1",
+                                                            isExiting && "duration-150 ease-in animate-out fade-out slide-out-to-top-1",
+                                                        )
+                                                    }
+                                                    offset={isFloating || isFullWidth ? 0 : 8}
+                                                    containerPadding={0}
+                                                    triggerRef={(isFloating && isFullWidth) || isFullWidth ? headerRef : undefined}
+                                                >
+                                                    {({ isEntering, isExiting }) => (
+                                                        <AriaDialog
+                                                            className={cx(
+                                                                "mx-auto origin-top outline-hidden",
+                                                                isFloating && "max-w-7xl px-8 pt-3",
+                                                                // Have to use the scale animation inside the popover to avoid
+                                                                // miscalculating the popover's position when opening.
+                                                                isEntering && !isFullWidth && "duration-200 ease-out animate-in zoom-in-95",
+                                                                isExiting && !isFullWidth && "duration-150 ease-in animate-out zoom-out-95",
+                                                            )}
+                                                        >
+                                                            {navItem.menu}
+                                                        </AriaDialog>
+                                                    )}
+                                                </AriaPopover>
+                                            </AriaDialogTrigger>
+                                        ) : (
+                                            <a
+                                                href={navItem.href}
+                                                className="flex cursor-pointer items-center gap-0.5 rounded-lg px-1.5 py-1 text-md font-semibold text-secondary outline-focus-ring transition duration-100 ease-linear hover:text-secondary_hover focus:outline-offset-2 focus-visible:outline-2"
+                                            >
+                                                <span className="px-0.5">{navItem.label}</span>
+                                            </a>
+                                        )}
+                                    </li>
+                                ))}
+                            </ul>
+                        </nav>
+                    </div>
+
+                    <div className="hidden items-center gap-3 md:flex">
+                        <Button color="secondary" size={isFloating ? "md" : "lg"}>
+                            Log in
+                        </Button>
+                        <Button color="primary" size={isFloating ? "md" : "lg"}>
+                            Sign up
+                        </Button>
+                    </div>
+
+                    {/* Mobile menu and menu trigger */}
+                    <AriaDialogTrigger>
+                        <AriaButton
+                            aria-label="Toggle navigation menu"
+                            className={({ isFocusVisible, isHovered }) =>
+                                cx(
+                                    "group ml-auto cursor-pointer rounded-lg p-2 md:hidden",
+                                    isHovered && "bg-primary_hover",
+                                    isFocusVisible && "outline-2 outline-offset-2 outline-focus-ring",
+                                )
+                            }
+                        >
+                            <svg aria-hidden="true" width="24" height="24" viewBox="0 0 24 24" fill="none">
+                                <path
+                                    className="hidden text-secondary group-aria-expanded:block"
+                                    d="M18 6L6 18M6 6L18 18"
+                                    stroke="currentColor"
+                                    strokeWidth="2"
+                                    strokeLinecap="round"
+                                    strokeLinejoin="round"
+                                />
+                                <path
+                                    className="text-secondary group-aria-expanded:hidden"
+                                    d="M3 12H21M3 6H21M3 18H21"
+                                    stroke="currentColor"
+                                    strokeWidth="2"
+                                    strokeLinecap="round"
+                                    strokeLinejoin="round"
+                                />
+                            </svg>
+                        </AriaButton>
+                        <AriaPopover
+                            triggerRef={headerRef}
+                            className="h-calc(100%-72px) scrollbar-hide w-full overflow-y-auto shadow-lg md:hidden"
+                            offset={0}
+                            crossOffset={20}
+                            containerPadding={0}
+                            placement="bottom left"
+                        >
+                            <AriaDialog className="outline-hidden">
+                                <nav className="w-full bg-primary shadow-lg">
+                                    <ul className="flex flex-col gap-0.5 py-5">
+                                        {items.map((navItem) =>
+                                            navItem.menu ? (
+                                                <MobileNavItem key={navItem.label} label={navItem.label}>
+                                                    {navItem.menu}
+                                                </MobileNavItem>
+                                            ) : (
+                                                <MobileNavItem key={navItem.label} label={navItem.label} href={navItem.href} />
+                                            ),
+                                        )}
+                                    </ul>
+
+                                    <MobileFooter />
+                                </nav>
+                            </AriaDialog>
+                        </AriaPopover>
+                    </AriaDialogTrigger>
+                </div>
+            </div>
+        </header>
+    );
+};
diff --git a/src/components/shared-assets/background-patterns/circle.tsx b/src/components/shared-assets/background-patterns/circle.tsx
new file mode 100644
index 0000000..e8feaf4
--- /dev/null
+++ b/src/components/shared-assets/background-patterns/circle.tsx
@@ -0,0 +1,113 @@
+import type { SVGProps } from "react";
+import { cx } from "@/utils/cx";
+
+export const Circle = (props: Omit<SVGProps<SVGSVGElement>, "size"> & { size?: "sm" | "md" | "lg" }) => {
+    const { size = "lg", className } = props;
+    const Pattern = sizes[size];
+
+    return <Pattern className={className} />;
+};
+
+const lg = (props: SVGProps<SVGSVGElement>) => {
+    return (
+        <svg width="768" height="768" viewBox="0 0 768 768" fill="none" {...props} className={cx("text-border-secondary", props.className)}>
+            <mask id="mask0_4933_392997" style={{ maskType: "alpha" }} maskUnits="userSpaceOnUse" x="0" y="0" width="768" height="768">
+                <rect width="768" height="768" fill="url(#paint0_radial_4933_392997)" />
+            </mask>
+            <g mask="url(#mask0_4933_392997)">
+                <circle cx="384" cy="384" r="47.5" stroke="currentColor" />
+                <circle cx="384" cy="384" r="95.5" stroke="currentColor" />
+                <circle cx="384" cy="384" r="143.5" stroke="currentColor" />
+                <circle cx="384" cy="384" r="191.5" stroke="currentColor" />
+                <circle cx="384" cy="384" r="239.5" stroke="currentColor" />
+                <circle cx="384" cy="384" r="287.5" stroke="currentColor" />
+                <circle cx="384" cy="384" r="335.5" stroke="currentColor" />
+                <circle cx="384" cy="384" r="383.5" stroke="currentColor" />
+            </g>
+            <defs>
+                <radialGradient
+                    id="paint0_radial_4933_392997"
+                    cx="0"
+                    cy="0"
+                    r="1"
+                    gradientUnits="userSpaceOnUse"
+                    gradientTransform="translate(384 384) rotate(90) scale(384 384)"
+                >
+                    <stop />
+                    <stop offset="1" stopOpacity="0" />
+                </radialGradient>
+            </defs>
+        </svg>
+    );
+};
+
+const md = (props: SVGProps<SVGSVGElement>) => {
+    return (
+        <svg width="480" height="480" viewBox="0 0 480 480" fill="none" {...props} className={cx("text-border-secondary", props.className)}>
+            <mask id="mask0_4933_393068" style={{ maskType: "alpha" }} maskUnits="userSpaceOnUse" x="0" y="0" width="480" height="480">
+                <rect width="480" height="480" fill="url(#paint0_radial_4933_393068)" />
+            </mask>
+            <g mask="url(#mask0_4933_393068)">
+                <circle cx="240" cy="240" r="47.5" stroke="currentColor" />
+                <circle cx="240" cy="240" r="79.5" stroke="currentColor" />
+                <circle cx="240" cy="240" r="111.5" stroke="currentColor" />
+                <circle cx="240" cy="240" r="143.5" stroke="currentColor" />
+                <circle cx="240" cy="240" r="143.5" stroke="currentColor" />
+                <circle cx="240" cy="240" r="175.5" stroke="currentColor" />
+                <circle cx="240" cy="240" r="207.5" stroke="currentColor" />
+                <circle cx="240" cy="240" r="239.5" stroke="currentColor" />
+            </g>
+            <defs>
+                <radialGradient
+                    id="paint0_radial_4933_393068"
+                    cx="0"
+                    cy="0"
+                    r="1"
+                    gradientUnits="userSpaceOnUse"
+                    gradientTransform="translate(240 240) rotate(90) scale(240 240)"
+                >
+                    <stop />
+                    <stop offset="1" stopOpacity="0" />
+                </radialGradient>
+            </defs>
+        </svg>
+    );
+};
+
+const sm = (props: SVGProps<SVGSVGElement>) => {
+    return (
+        <svg width="336" height="336" viewBox="0 0 336 336" fill="none" {...props} className={cx("text-border-secondary", props.className)}>
+            <mask id="mask0_4947_375931" style={{ maskType: "alpha" }} maskUnits="userSpaceOnUse" x="0" y="0" width="336" height="336">
+                <rect width="336" height="336" fill="url(#paint0_radial_4947_375931)" />
+            </mask>
+            <g mask="url(#mask0_4947_375931)">
+                <circle cx="168" cy="168" r="47.5" stroke="currentColor" />
+                <circle cx="168" cy="168" r="47.5" stroke="currentColor" />
+                <circle cx="168" cy="168" r="71.5" stroke="currentColor" />
+                <circle cx="168" cy="168" r="95.5" stroke="currentColor" />
+                <circle cx="168" cy="168" r="119.5" stroke="currentColor" />
+                <circle cx="168" cy="168" r="143.5" stroke="currentColor" />
+                <circle cx="168" cy="168" r="167.5" stroke="currentColor" />
+            </g>
+            <defs>
+                <radialGradient
+                    id="paint0_radial_4947_375931"
+                    cx="0"
+                    cy="0"
+                    r="1"
+                    gradientUnits="userSpaceOnUse"
+                    gradientTransform="translate(168 168) rotate(90) scale(168 168)"
+                >
+                    <stop />
+                    <stop offset="1" stopOpacity="0" />
+                </radialGradient>
+            </defs>
+        </svg>
+    );
+};
+
+const sizes = {
+    sm,
+    md,
+    lg,
+};
diff --git a/src/components/shared-assets/background-patterns/grid-check.tsx b/src/components/shared-assets/background-patterns/grid-check.tsx
new file mode 100644
index 0000000..3d297f5
--- /dev/null
+++ b/src/components/shared-assets/background-patterns/grid-check.tsx
@@ -0,0 +1,2520 @@
+import type { SVGProps } from "react";
+
+export const GridCheck = (props: Omit<SVGProps<SVGSVGElement>, "size"> & { size?: "sm" | "md" }) => {
+    const { size = "md", className } = props;
+    const Pattern = sizes[size];
+
+    return <Pattern className={className} />;
+};
+
+const md = (props: SVGProps<SVGSVGElement>) => {
+    return (
+        <svg width="960" height="960" viewBox="0 0 960 960" fill="none" {...props}>
+            <mask id="mask0_4940_405685" style={{ maskType: "alpha" }} maskUnits="userSpaceOnUse" x="0" y="0" width="960" height="960">
+                <rect width="960" height="960" fill="url(#paint0_radial_4940_405685)" />
+            </mask>
+            <g mask="url(#mask0_4940_405685)">
+                <g clipPath="url(#clip0_4940_405685)">
+                    <mask id="path-3-inside-1_4940_405685" fill="white">
+                        <path d="M0 0H96V96H0V0Z" />
+                    </mask>
+                    <path d="M96 96V97H97V96H96ZM95 0V96H97V0H95ZM96 95H0V97H96V95Z" fill="#D0D5DD" mask="url(#path-3-inside-1_4940_405685)" />
+                    <mask id="path-5-inside-2_4940_405685" fill="white">
+                        <path d="M96 0H192V96H96V0Z" />
+                    </mask>
+                    <path d="M192 96V97H193V96H192ZM191 0V96H193V0H191ZM192 95H96V97H192V95Z" fill="#D0D5DD" mask="url(#path-5-inside-2_4940_405685)" />
+                    <mask id="path-7-inside-3_4940_405685" fill="white">
+                        <path d="M192 0H288V96H192V0Z" />
+                    </mask>
+                    <path d="M288 96V97H289V96H288ZM287 0V96H289V0H287ZM288 95H192V97H288V95Z" fill="#D0D5DD" mask="url(#path-7-inside-3_4940_405685)" />
+                    <mask id="path-9-inside-4_4940_405685" fill="white">
+                        <path d="M288 0H384V96H288V0Z" />
+                    </mask>
+                    <path d="M384 96V97H385V96H384ZM383 0V96H385V0H383ZM384 95H288V97H384V95Z" fill="#D0D5DD" mask="url(#path-9-inside-4_4940_405685)" />
+                    <mask id="path-11-inside-5_4940_405685" fill="white">
+                        <path d="M384 0H480V96H384V0Z" />
+                    </mask>
+                    <path d="M480 96V97H481V96H480ZM479 0V96H481V0H479ZM480 95H384V97H480V95Z" fill="#D0D5DD" mask="url(#path-11-inside-5_4940_405685)" />
+                    <mask id="path-13-inside-6_4940_405685" fill="white">
+                        <path d="M480 0H576V96H480V0Z" />
+                    </mask>
+                    <path d="M576 96V97H577V96H576ZM575 0V96H577V0H575ZM576 95H480V97H576V95Z" fill="#D0D5DD" mask="url(#path-13-inside-6_4940_405685)" />
+                    <mask id="path-15-inside-7_4940_405685" fill="white">
+                        <path d="M576 0H672V96H576V0Z" />
+                    </mask>
+                    <path d="M672 96V97H673V96H672ZM671 0V96H673V0H671ZM672 95H576V97H672V95Z" fill="#D0D5DD" mask="url(#path-15-inside-7_4940_405685)" />
+                    <mask id="path-17-inside-8_4940_405685" fill="white">
+                        <path d="M672 0H768V96H672V0Z" />
+                    </mask>
+                    <path d="M768 96V97H769V96H768ZM767 0V96H769V0H767ZM768 95H672V97H768V95Z" fill="#D0D5DD" mask="url(#path-17-inside-8_4940_405685)" />
+                    <mask id="path-19-inside-9_4940_405685" fill="white">
+                        <path d="M768 0H864V96H768V0Z" />
+                    </mask>
+                    <path d="M864 96V97H865V96H864ZM863 0V96H865V0H863ZM864 95H768V97H864V95Z" fill="#D0D5DD" mask="url(#path-19-inside-9_4940_405685)" />
+                    <mask id="path-21-inside-10_4940_405685" fill="white">
+                        <path d="M864 0H960V96H864V0Z" />
+                    </mask>
+                    <path d="M960 96V97H961V96H960ZM959 0V96H961V0H959ZM960 95H864V97H960V95Z" fill="#D0D5DD" mask="url(#path-21-inside-10_4940_405685)" />
+                    <mask id="path-23-inside-11_4940_405685" fill="white">
+                        <path d="M0 96H96V192H0V96Z" />
+                    </mask>
+                    <path d="M96 192V193H97V192H96ZM95 96V192H97V96H95ZM96 191H0V193H96V191Z" fill="#D0D5DD" mask="url(#path-23-inside-11_4940_405685)" />
+                    <mask id="path-25-inside-12_4940_405685" fill="white">
+                        <path d="M96 96H192V192H96V96Z" />
+                    </mask>
+                    <path
+                        d="M192 192V193H193V192H192ZM191 96V192H193V96H191ZM192 191H96V193H192V191Z"
+                        fill="#D0D5DD"
+                        mask="url(#path-25-inside-12_4940_405685)"
+                    />
+                    <mask id="path-27-inside-13_4940_405685" fill="white">
+                        <path d="M192 96H288V192H192V96Z" />
+                    </mask>
+                    <path d="M192 96H288V192H192V96Z" fill="#F2F4F7" />
+                    <path
+                        d="M288 192V193H289V192H288ZM287 96V192H289V96H287ZM288 191H192V193H288V191Z"
+                        fill="#D0D5DD"
+                        mask="url(#path-27-inside-13_4940_405685)"
+                    />
+                    <mask id="path-29-inside-14_4940_405685" fill="white">
+                        <path d="M288 96H384V192H288V96Z" />
+                    </mask>
+                    <path
+                        d="M384 192V193H385V192H384ZM383 96V192H385V96H383ZM384 191H288V193H384V191Z"
+                        fill="#D0D5DD"
+                        mask="url(#path-29-inside-14_4940_405685)"
+                    />
+                    <mask id="path-31-inside-15_4940_405685" fill="white">
+                        <path d="M384 96H480V192H384V96Z" />
+                    </mask>
+                    <path
+                        d="M480 192V193H481V192H480ZM479 96V192H481V96H479ZM480 191H384V193H480V191Z"
+                        fill="#D0D5DD"
+                        mask="url(#path-31-inside-15_4940_405685)"
+                    />
+                    <mask id="path-33-inside-16_4940_405685" fill="white">
+                        <path d="M480 96H576V192H480V96Z" />
+                    </mask>
+                    <path
+                        d="M576 192V193H577V192H576ZM575 96V192H577V96H575ZM576 191H480V193H576V191Z"
+                        fill="#D0D5DD"
+                        mask="url(#path-33-inside-16_4940_405685)"
+                    />
+                    <mask id="path-35-inside-17_4940_405685" fill="white">
+                        <path d="M576 96H672V192H576V96Z" />
+                    </mask>
+                    <path
+                        d="M672 192V193H673V192H672ZM671 96V192H673V96H671ZM672 191H576V193H672V191Z"
+                        fill="#D0D5DD"
+                        mask="url(#path-35-inside-17_4940_405685)"
+                    />
+                    <mask id="path-37-inside-18_4940_405685" fill="white">
+                        <path d="M672 96H768V192H672V96Z" />
+                    </mask>
+                    <path
+                        d="M768 192V193H769V192H768ZM767 96V192H769V96H767ZM768 191H672V193H768V191Z"
+                        fill="#D0D5DD"
+                        mask="url(#path-37-inside-18_4940_405685)"
+                    />
+                    <mask id="path-39-inside-19_4940_405685" fill="white">
+                        <path d="M768 96H864V192H768V96Z" />
+                    </mask>
+                    <path d="M768 96H864V192H768V96Z" fill="#F2F4F7" />
+                    <path
+                        d="M864 192V193H865V192H864ZM863 96V192H865V96H863ZM864 191H768V193H864V191Z"
+                        fill="#D0D5DD"
+                        mask="url(#path-39-inside-19_4940_405685)"
+                    />
+                    <mask id="path-41-inside-20_4940_405685" fill="white">
+                        <path d="M864 96H960V192H864V96Z" />
+                    </mask>
+                    <path
+                        d="M960 192V193H961V192H960ZM959 96V192H961V96H959ZM960 191H864V193H960V191Z"
+                        fill="#D0D5DD"
+                        mask="url(#path-41-inside-20_4940_405685)"
+                    />
+                    <mask id="path-43-inside-21_4940_405685" fill="white">
+                        <path d="M0 192H96V288H0V192Z" />
+                    </mask>
+                    <path d="M0 192H96V288H0V192Z" fill="#F2F4F7" />
+                    <path d="M96 288V289H97V288H96ZM95 192V288H97V192H95ZM96 287H0V289H96V287Z" fill="#D0D5DD" mask="url(#path-43-inside-21_4940_405685)" />
+                    <mask id="path-45-inside-22_4940_405685" fill="white">
+                        <path d="M96 192H192V288H96V192Z" />
+                    </mask>
+                    <path
+                        d="M192 288V289H193V288H192ZM191 192V288H193V192H191ZM192 287H96V289H192V287Z"
+                        fill="#D0D5DD"
+                        mask="url(#path-45-inside-22_4940_405685)"
+                    />
+                    <mask id="path-47-inside-23_4940_405685" fill="white">
+                        <path d="M192 192H288V288H192V192Z" />
+                    </mask>
+                    <path
+                        d="M288 288V289H289V288H288ZM287 192V288H289V192H287ZM288 287H192V289H288V287Z"
+                        fill="#D0D5DD"
+                        mask="url(#path-47-inside-23_4940_405685)"
+                    />
+                    <mask id="path-49-inside-24_4940_405685" fill="white">
+                        <path d="M288 192H384V288H288V192Z" />
+                    </mask>
+                    <path
+                        d="M384 288V289H385V288H384ZM383 192V288H385V192H383ZM384 287H288V289H384V287Z"
+                        fill="#D0D5DD"
+                        mask="url(#path-49-inside-24_4940_405685)"
+                    />
+                    <mask id="path-51-inside-25_4940_405685" fill="white">
+                        <path d="M384 192H480V288H384V192Z" />
+                    </mask>
+                    <path
+                        d="M480 288V289H481V288H480ZM479 192V288H481V192H479ZM480 287H384V289H480V287Z"
+                        fill="#D0D5DD"
+                        mask="url(#path-51-inside-25_4940_405685)"
+                    />
+                    <mask id="path-53-inside-26_4940_405685" fill="white">
+                        <path d="M480 192H576V288H480V192Z" />
+                    </mask>
+                    <path
+                        d="M576 288V289H577V288H576ZM575 192V288H577V192H575ZM576 287H480V289H576V287Z"
+                        fill="#D0D5DD"
+                        mask="url(#path-53-inside-26_4940_405685)"
+                    />
+                    <mask id="path-55-inside-27_4940_405685" fill="white">
+                        <path d="M576 192H672V288H576V192Z" />
+                    </mask>
+                    <path d="M576 192H672V288H576V192Z" fill="#F2F4F7" />
+                    <path
+                        d="M672 288V289H673V288H672ZM671 192V288H673V192H671ZM672 287H576V289H672V287Z"
+                        fill="#D0D5DD"
+                        mask="url(#path-55-inside-27_4940_405685)"
+                    />
+                    <mask id="path-57-inside-28_4940_405685" fill="white">
+                        <path d="M672 192H768V288H672V192Z" />
+                    </mask>
+                    <path
+                        d="M768 288V289H769V288H768ZM767 192V288H769V192H767ZM768 287H672V289H768V287Z"
+                        fill="#D0D5DD"
+                        mask="url(#path-57-inside-28_4940_405685)"
+                    />
+                    <mask id="path-59-inside-29_4940_405685" fill="white">
+                        <path d="M768 192H864V288H768V192Z" />
+                    </mask>
+                    <path
+                        d="M864 288V289H865V288H864ZM863 192V288H865V192H863ZM864 287H768V289H864V287Z"
+                        fill="#D0D5DD"
+                        mask="url(#path-59-inside-29_4940_405685)"
+                    />
+                    <mask id="path-61-inside-30_4940_405685" fill="white">
+                        <path d="M864 192H960V288H864V192Z" />
+                    </mask>
+                    <path
+                        d="M960 288V289H961V288H960ZM959 192V288H961V192H959ZM960 287H864V289H960V287Z"
+                        fill="#D0D5DD"
+                        mask="url(#path-61-inside-30_4940_405685)"
+                    />
+                    <mask id="path-63-inside-31_4940_405685" fill="white">
+                        <path d="M0 288H96V384H0V288Z" />
+                    </mask>
+                    <path d="M96 384V385H97V384H96ZM95 288V384H97V288H95ZM96 383H0V385H96V383Z" fill="#D0D5DD" mask="url(#path-63-inside-31_4940_405685)" />
+                    <mask id="path-65-inside-32_4940_405685" fill="white">
+                        <path d="M96 288H192V384H96V288Z" />
+                    </mask>
+                    <path
+                        d="M192 384V385H193V384H192ZM191 288V384H193V288H191ZM192 383H96V385H192V383Z"
+                        fill="#D0D5DD"
+                        mask="url(#path-65-inside-32_4940_405685)"
+                    />
+                    <mask id="path-67-inside-33_4940_405685" fill="white">
+                        <path d="M192 288H288V384H192V288Z" />
+                    </mask>
+                    <path
+                        d="M288 384V385H289V384H288ZM287 288V384H289V288H287ZM288 383H192V385H288V383Z"
+                        fill="#D0D5DD"
+                        mask="url(#path-67-inside-33_4940_405685)"
+                    />
+                    <mask id="path-69-inside-34_4940_405685" fill="white">
+                        <path d="M288 288H384V384H288V288Z" />
+                    </mask>
+                    <path
+                        d="M384 384V385H385V384H384ZM383 288V384H385V288H383ZM384 383H288V385H384V383Z"
+                        fill="#D0D5DD"
+                        mask="url(#path-69-inside-34_4940_405685)"
+                    />
+                    <mask id="path-71-inside-35_4940_405685" fill="white">
+                        <path d="M384 288H480V384H384V288Z" />
+                    </mask>
+                    <path
+                        d="M480 384V385H481V384H480ZM479 288V384H481V288H479ZM480 383H384V385H480V383Z"
+                        fill="#D0D5DD"
+                        mask="url(#path-71-inside-35_4940_405685)"
+                    />
+                    <mask id="path-73-inside-36_4940_405685" fill="white">
+                        <path d="M480 288H576V384H480V288Z" />
+                    </mask>
+                    <path
+                        d="M576 384V385H577V384H576ZM575 288V384H577V288H575ZM576 383H480V385H576V383Z"
+                        fill="#D0D5DD"
+                        mask="url(#path-73-inside-36_4940_405685)"
+                    />
+                    <mask id="path-75-inside-37_4940_405685" fill="white">
+                        <path d="M576 288H672V384H576V288Z" />
+                    </mask>
+                    <path
+                        d="M672 384V385H673V384H672ZM671 288V384H673V288H671ZM672 383H576V385H672V383Z"
+                        fill="#D0D5DD"
+                        mask="url(#path-75-inside-37_4940_405685)"
+                    />
+                    <mask id="path-77-inside-38_4940_405685" fill="white">
+                        <path d="M672 288H768V384H672V288Z" />
+                    </mask>
+                    <path
+                        d="M768 384V385H769V384H768ZM767 288V384H769V288H767ZM768 383H672V385H768V383Z"
+                        fill="#D0D5DD"
+                        mask="url(#path-77-inside-38_4940_405685)"
+                    />
+                    <mask id="path-79-inside-39_4940_405685" fill="white">
+                        <path d="M768 288H864V384H768V288Z" />
+                    </mask>
+                    <path
+                        d="M864 384V385H865V384H864ZM863 288V384H865V288H863ZM864 383H768V385H864V383Z"
+                        fill="#D0D5DD"
+                        mask="url(#path-79-inside-39_4940_405685)"
+                    />
+                    <mask id="path-81-inside-40_4940_405685" fill="white">
+                        <path d="M864 288H960V384H864V288Z" />
+                    </mask>
+                    <path d="M864 288H960V384H864V288Z" fill="#F2F4F7" />
+                    <path
+                        d="M960 384V385H961V384H960ZM959 288V384H961V288H959ZM960 383H864V385H960V383Z"
+                        fill="#D0D5DD"
+                        mask="url(#path-81-inside-40_4940_405685)"
+                    />
+                    <mask id="path-83-inside-41_4940_405685" fill="white">
+                        <path d="M0 384H96V480H0V384Z" />
+                    </mask>
+                    <path d="M96 480V481H97V480H96ZM95 384V480H97V384H95ZM96 479H0V481H96V479Z" fill="#D0D5DD" mask="url(#path-83-inside-41_4940_405685)" />
+                    <mask id="path-85-inside-42_4940_405685" fill="white">
+                        <path d="M96 384H192V480H96V384Z" />
+                    </mask>
+                    <path
+                        d="M192 480V481H193V480H192ZM191 384V480H193V384H191ZM192 479H96V481H192V479Z"
+                        fill="#D0D5DD"
+                        mask="url(#path-85-inside-42_4940_405685)"
+                    />
+                    <mask id="path-87-inside-43_4940_405685" fill="white">
+                        <path d="M192 384H288V480H192V384Z" />
+                    </mask>
+                    <path
+                        d="M288 480V481H289V480H288ZM287 384V480H289V384H287ZM288 479H192V481H288V479Z"
+                        fill="#D0D5DD"
+                        mask="url(#path-87-inside-43_4940_405685)"
+                    />
+                    <mask id="path-89-inside-44_4940_405685" fill="white">
+                        <path d="M288 384H384V480H288V384Z" />
+                    </mask>
+                    <path d="M288 384H384V480H288V384Z" fill="#F2F4F7" />
+                    <path
+                        d="M384 480V481H385V480H384ZM383 384V480H385V384H383ZM384 479H288V481H384V479Z"
+                        fill="#D0D5DD"
+                        mask="url(#path-89-inside-44_4940_405685)"
+                    />
+                    <mask id="path-91-inside-45_4940_405685" fill="white">
+                        <path d="M384 384H480V480H384V384Z" />
+                    </mask>
+                    <path
+                        d="M480 480V481H481V480H480ZM479 384V480H481V384H479ZM480 479H384V481H480V479Z"
+                        fill="#D0D5DD"
+                        mask="url(#path-91-inside-45_4940_405685)"
+                    />
+                    <mask id="path-93-inside-46_4940_405685" fill="white">
+                        <path d="M480 384H576V480H480V384Z" />
+                    </mask>
+                    <path
+                        d="M576 480V481H577V480H576ZM575 384V480H577V384H575ZM576 479H480V481H576V479Z"
+                        fill="#D0D5DD"
+                        mask="url(#path-93-inside-46_4940_405685)"
+                    />
+                    <mask id="path-95-inside-47_4940_405685" fill="white">
+                        <path d="M576 384H672V480H576V384Z" />
+                    </mask>
+                    <path
+                        d="M672 480V481H673V480H672ZM671 384V480H673V384H671ZM672 479H576V481H672V479Z"
+                        fill="#D0D5DD"
+                        mask="url(#path-95-inside-47_4940_405685)"
+                    />
+                    <mask id="path-97-inside-48_4940_405685" fill="white">
+                        <path d="M672 384H768V480H672V384Z" />
+                    </mask>
+                    <path
+                        d="M768 480V481H769V480H768ZM767 384V480H769V384H767ZM768 479H672V481H768V479Z"
+                        fill="#D0D5DD"
+                        mask="url(#path-97-inside-48_4940_405685)"
+                    />
+                    <mask id="path-99-inside-49_4940_405685" fill="white">
+                        <path d="M768 384H864V480H768V384Z" />
+                    </mask>
+                    <path
+                        d="M864 480V481H865V480H864ZM863 384V480H865V384H863ZM864 479H768V481H864V479Z"
+                        fill="#D0D5DD"
+                        mask="url(#path-99-inside-49_4940_405685)"
+                    />
+                    <mask id="path-101-inside-50_4940_405685" fill="white">
+                        <path d="M864 384H960V480H864V384Z" />
+                    </mask>
+                    <path
+                        d="M960 480V481H961V480H960ZM959 384V480H961V384H959ZM960 479H864V481H960V479Z"
+                        fill="#D0D5DD"
+                        mask="url(#path-101-inside-50_4940_405685)"
+                    />
+                    <mask id="path-103-inside-51_4940_405685" fill="white">
+                        <path d="M0 480H96V576H0V480Z" />
+                    </mask>
+                    <path d="M0 480H96V576H0V480Z" fill="#F2F4F7" />
+                    <path d="M96 576V577H97V576H96ZM95 480V576H97V480H95ZM96 575H0V577H96V575Z" fill="#D0D5DD" mask="url(#path-103-inside-51_4940_405685)" />
+                    <mask id="path-105-inside-52_4940_405685" fill="white">
+                        <path d="M96 480H192V576H96V480Z" />
+                    </mask>
+                    <path
+                        d="M192 576V577H193V576H192ZM191 480V576H193V480H191ZM192 575H96V577H192V575Z"
+                        fill="#D0D5DD"
+                        mask="url(#path-105-inside-52_4940_405685)"
+                    />
+                    <mask id="path-107-inside-53_4940_405685" fill="white">
+                        <path d="M192 480H288V576H192V480Z" />
+                    </mask>
+                    <path
+                        d="M288 576V577H289V576H288ZM287 480V576H289V480H287ZM288 575H192V577H288V575Z"
+                        fill="#D0D5DD"
+                        mask="url(#path-107-inside-53_4940_405685)"
+                    />
+                    <mask id="path-109-inside-54_4940_405685" fill="white">
+                        <path d="M288 480H384V576H288V480Z" />
+                    </mask>
+                    <path
+                        d="M384 576V577H385V576H384ZM383 480V576H385V480H383ZM384 575H288V577H384V575Z"
+                        fill="#D0D5DD"
+                        mask="url(#path-109-inside-54_4940_405685)"
+                    />
+                    <mask id="path-111-inside-55_4940_405685" fill="white">
+                        <path d="M384 480H480V576H384V480Z" />
+                    </mask>
+                    <path
+                        d="M480 576V577H481V576H480ZM479 480V576H481V480H479ZM480 575H384V577H480V575Z"
+                        fill="#D0D5DD"
+                        mask="url(#path-111-inside-55_4940_405685)"
+                    />
+                    <mask id="path-113-inside-56_4940_405685" fill="white">
+                        <path d="M480 480H576V576H480V480Z" />
+                    </mask>
+                    <path
+                        d="M576 576V577H577V576H576ZM575 480V576H577V480H575ZM576 575H480V577H576V575Z"
+                        fill="#D0D5DD"
+                        mask="url(#path-113-inside-56_4940_405685)"
+                    />
+                    <mask id="path-115-inside-57_4940_405685" fill="white">
+                        <path d="M576 480H672V576H576V480Z" />
+                    </mask>
+                    <path d="M576 480H672V576H576V480Z" fill="#F2F4F7" />
+                    <path
+                        d="M672 576V577H673V576H672ZM671 480V576H673V480H671ZM672 575H576V577H672V575Z"
+                        fill="#D0D5DD"
+                        mask="url(#path-115-inside-57_4940_405685)"
+                    />
+                    <mask id="path-117-inside-58_4940_405685" fill="white">
+                        <path d="M672 480H768V576H672V480Z" />
+                    </mask>
+                    <path
+                        d="M768 576V577H769V576H768ZM767 480V576H769V480H767ZM768 575H672V577H768V575Z"
+                        fill="#D0D5DD"
+                        mask="url(#path-117-inside-58_4940_405685)"
+                    />
+                    <mask id="path-119-inside-59_4940_405685" fill="white">
+                        <path d="M768 480H864V576H768V480Z" />
+                    </mask>
+                    <path
+                        d="M864 576V577H865V576H864ZM863 480V576H865V480H863ZM864 575H768V577H864V575Z"
+                        fill="#D0D5DD"
+                        mask="url(#path-119-inside-59_4940_405685)"
+                    />
+                    <mask id="path-121-inside-60_4940_405685" fill="white">
+                        <path d="M864 480H960V576H864V480Z" />
+                    </mask>
+                    <path
+                        d="M960 576V577H961V576H960ZM959 480V576H961V480H959ZM960 575H864V577H960V575Z"
+                        fill="#D0D5DD"
+                        mask="url(#path-121-inside-60_4940_405685)"
+                    />
+                    <mask id="path-123-inside-61_4940_405685" fill="white">
+                        <path d="M0 576H96V672H0V576Z" />
+                    </mask>
+                    <path d="M96 672V673H97V672H96ZM95 576V672H97V576H95ZM96 671H0V673H96V671Z" fill="#D0D5DD" mask="url(#path-123-inside-61_4940_405685)" />
+                    <mask id="path-125-inside-62_4940_405685" fill="white">
+                        <path d="M96 576H192V672H96V576Z" />
+                    </mask>
+                    <path
+                        d="M192 672V673H193V672H192ZM191 576V672H193V576H191ZM192 671H96V673H192V671Z"
+                        fill="#D0D5DD"
+                        mask="url(#path-125-inside-62_4940_405685)"
+                    />
+                    <mask id="path-127-inside-63_4940_405685" fill="white">
+                        <path d="M192 576H288V672H192V576Z" />
+                    </mask>
+                    <path
+                        d="M288 672V673H289V672H288ZM287 576V672H289V576H287ZM288 671H192V673H288V671Z"
+                        fill="#D0D5DD"
+                        mask="url(#path-127-inside-63_4940_405685)"
+                    />
+                    <mask id="path-129-inside-64_4940_405685" fill="white">
+                        <path d="M288 576H384V672H288V576Z" />
+                    </mask>
+                    <path
+                        d="M384 672V673H385V672H384ZM383 576V672H385V576H383ZM384 671H288V673H384V671Z"
+                        fill="#D0D5DD"
+                        mask="url(#path-129-inside-64_4940_405685)"
+                    />
+                    <mask id="path-131-inside-65_4940_405685" fill="white">
+                        <path d="M384 576H480V672H384V576Z" />
+                    </mask>
+                    <path
+                        d="M480 672V673H481V672H480ZM479 576V672H481V576H479ZM480 671H384V673H480V671Z"
+                        fill="#D0D5DD"
+                        mask="url(#path-131-inside-65_4940_405685)"
+                    />
+                    <mask id="path-133-inside-66_4940_405685" fill="white">
+                        <path d="M480 576H576V672H480V576Z" />
+                    </mask>
+                    <path
+                        d="M576 672V673H577V672H576ZM575 576V672H577V576H575ZM576 671H480V673H576V671Z"
+                        fill="#D0D5DD"
+                        mask="url(#path-133-inside-66_4940_405685)"
+                    />
+                    <mask id="path-135-inside-67_4940_405685" fill="white">
+                        <path d="M576 576H672V672H576V576Z" />
+                    </mask>
+                    <path
+                        d="M672 672V673H673V672H672ZM671 576V672H673V576H671ZM672 671H576V673H672V671Z"
+                        fill="#D0D5DD"
+                        mask="url(#path-135-inside-67_4940_405685)"
+                    />
+                    <mask id="path-137-inside-68_4940_405685" fill="white">
+                        <path d="M672 576H768V672H672V576Z" />
+                    </mask>
+                    <path
+                        d="M768 672V673H769V672H768ZM767 576V672H769V576H767ZM768 671H672V673H768V671Z"
+                        fill="#D0D5DD"
+                        mask="url(#path-137-inside-68_4940_405685)"
+                    />
+                    <mask id="path-139-inside-69_4940_405685" fill="white">
+                        <path d="M768 576H864V672H768V576Z" />
+                    </mask>
+                    <path
+                        d="M864 672V673H865V672H864ZM863 576V672H865V576H863ZM864 671H768V673H864V671Z"
+                        fill="#D0D5DD"
+                        mask="url(#path-139-inside-69_4940_405685)"
+                    />
+                    <mask id="path-141-inside-70_4940_405685" fill="white">
+                        <path d="M864 576H960V672H864V576Z" />
+                    </mask>
+                    <path
+                        d="M960 672V673H961V672H960ZM959 576V672H961V576H959ZM960 671H864V673H960V671Z"
+                        fill="#D0D5DD"
+                        mask="url(#path-141-inside-70_4940_405685)"
+                    />
+                    <mask id="path-143-inside-71_4940_405685" fill="white">
+                        <path d="M0 672H96V768H0V672Z" />
+                    </mask>
+                    <path d="M96 768V769H97V768H96ZM95 672V768H97V672H95ZM96 767H0V769H96V767Z" fill="#D0D5DD" mask="url(#path-143-inside-71_4940_405685)" />
+                    <mask id="path-145-inside-72_4940_405685" fill="white">
+                        <path d="M96 672H192V768H96V672Z" />
+                    </mask>
+                    <path
+                        d="M192 768V769H193V768H192ZM191 672V768H193V672H191ZM192 767H96V769H192V767Z"
+                        fill="#D0D5DD"
+                        mask="url(#path-145-inside-72_4940_405685)"
+                    />
+                    <mask id="path-147-inside-73_4940_405685" fill="white">
+                        <path d="M192 672H288V768H192V672Z" />
+                    </mask>
+                    <path
+                        d="M288 768V769H289V768H288ZM287 672V768H289V672H287ZM288 767H192V769H288V767Z"
+                        fill="#D0D5DD"
+                        mask="url(#path-147-inside-73_4940_405685)"
+                    />
+                    <mask id="path-149-inside-74_4940_405685" fill="white">
+                        <path d="M288 672H384V768H288V672Z" />
+                    </mask>
+                    <path d="M288 672H384V768H288V672Z" fill="#F2F4F7" />
+                    <path
+                        d="M384 768V769H385V768H384ZM383 672V768H385V672H383ZM384 767H288V769H384V767Z"
+                        fill="#D0D5DD"
+                        mask="url(#path-149-inside-74_4940_405685)"
+                    />
+                    <mask id="path-151-inside-75_4940_405685" fill="white">
+                        <path d="M384 672H480V768H384V672Z" />
+                    </mask>
+                    <path
+                        d="M480 768V769H481V768H480ZM479 672V768H481V672H479ZM480 767H384V769H480V767Z"
+                        fill="#D0D5DD"
+                        mask="url(#path-151-inside-75_4940_405685)"
+                    />
+                    <mask id="path-153-inside-76_4940_405685" fill="white">
+                        <path d="M480 672H576V768H480V672Z" />
+                    </mask>
+                    <path
+                        d="M576 768V769H577V768H576ZM575 672V768H577V672H575ZM576 767H480V769H576V767Z"
+                        fill="#D0D5DD"
+                        mask="url(#path-153-inside-76_4940_405685)"
+                    />
+                    <mask id="path-155-inside-77_4940_405685" fill="white">
+                        <path d="M576 672H672V768H576V672Z" />
+                    </mask>
+                    <path
+                        d="M672 768V769H673V768H672ZM671 672V768H673V672H671ZM672 767H576V769H672V767Z"
+                        fill="#D0D5DD"
+                        mask="url(#path-155-inside-77_4940_405685)"
+                    />
+                    <mask id="path-157-inside-78_4940_405685" fill="white">
+                        <path d="M672 672H768V768H672V672Z" />
+                    </mask>
+                    <path
+                        d="M768 768V769H769V768H768ZM767 672V768H769V672H767ZM768 767H672V769H768V767Z"
+                        fill="#D0D5DD"
+                        mask="url(#path-157-inside-78_4940_405685)"
+                    />
+                    <mask id="path-159-inside-79_4940_405685" fill="white">
+                        <path d="M768 672H864V768H768V672Z" />
+                    </mask>
+                    <path
+                        d="M864 768V769H865V768H864ZM863 672V768H865V672H863ZM864 767H768V769H864V767Z"
+                        fill="#D0D5DD"
+                        mask="url(#path-159-inside-79_4940_405685)"
+                    />
+                    <mask id="path-161-inside-80_4940_405685" fill="white">
+                        <path d="M864 672H960V768H864V672Z" />
+                    </mask>
+                    <path d="M864 672H960V768H864V672Z" fill="#F2F4F7" />
+                    <path
+                        d="M960 768V769H961V768H960ZM959 672V768H961V672H959ZM960 767H864V769H960V767Z"
+                        fill="#D0D5DD"
+                        mask="url(#path-161-inside-80_4940_405685)"
+                    />
+                    <mask id="path-163-inside-81_4940_405685" fill="white">
+                        <path d="M0 768H96V864H0V768Z" />
+                    </mask>
+                    <path d="M0 768H96V864H0V768Z" fill="#F2F4F7" />
+                    <path d="M96 864V865H97V864H96ZM95 768V864H97V768H95ZM96 863H0V865H96V863Z" fill="#D0D5DD" mask="url(#path-163-inside-81_4940_405685)" />
+                    <mask id="path-165-inside-82_4940_405685" fill="white">
+                        <path d="M96 768H192V864H96V768Z" />
+                    </mask>
+                    <path
+                        d="M192 864V865H193V864H192ZM191 768V864H193V768H191ZM192 863H96V865H192V863Z"
+                        fill="#D0D5DD"
+                        mask="url(#path-165-inside-82_4940_405685)"
+                    />
+                    <mask id="path-167-inside-83_4940_405685" fill="white">
+                        <path d="M192 768H288V864H192V768Z" />
+                    </mask>
+                    <path
+                        d="M288 864V865H289V864H288ZM287 768V864H289V768H287ZM288 863H192V865H288V863Z"
+                        fill="#D0D5DD"
+                        mask="url(#path-167-inside-83_4940_405685)"
+                    />
+                    <mask id="path-169-inside-84_4940_405685" fill="white">
+                        <path d="M288 768H384V864H288V768Z" />
+                    </mask>
+                    <path
+                        d="M384 864V865H385V864H384ZM383 768V864H385V768H383ZM384 863H288V865H384V863Z"
+                        fill="#D0D5DD"
+                        mask="url(#path-169-inside-84_4940_405685)"
+                    />
+                    <mask id="path-171-inside-85_4940_405685" fill="white">
+                        <path d="M384 768H480V864H384V768Z" />
+                    </mask>
+                    <path
+                        d="M480 864V865H481V864H480ZM479 768V864H481V768H479ZM480 863H384V865H480V863Z"
+                        fill="#D0D5DD"
+                        mask="url(#path-171-inside-85_4940_405685)"
+                    />
+                    <mask id="path-173-inside-86_4940_405685" fill="white">
+                        <path d="M480 768H576V864H480V768Z" />
+                    </mask>
+                    <path
+                        d="M576 864V865H577V864H576ZM575 768V864H577V768H575ZM576 863H480V865H576V863Z"
+                        fill="#D0D5DD"
+                        mask="url(#path-173-inside-86_4940_405685)"
+                    />
+                    <mask id="path-175-inside-87_4940_405685" fill="white">
+                        <path d="M576 768H672V864H576V768Z" />
+                    </mask>
+                    <path d="M576 768H672V864H576V768Z" fill="#F2F4F7" />
+                    <path
+                        d="M672 864V865H673V864H672ZM671 768V864H673V768H671ZM672 863H576V865H672V863Z"
+                        fill="#D0D5DD"
+                        mask="url(#path-175-inside-87_4940_405685)"
+                    />
+                    <mask id="path-177-inside-88_4940_405685" fill="white">
+                        <path d="M672 768H768V864H672V768Z" />
+                    </mask>
+                    <path
+                        d="M768 864V865H769V864H768ZM767 768V864H769V768H767ZM768 863H672V865H768V863Z"
+                        fill="#D0D5DD"
+                        mask="url(#path-177-inside-88_4940_405685)"
+                    />
+                    <mask id="path-179-inside-89_4940_405685" fill="white">
+                        <path d="M768 768H864V864H768V768Z" />
+                    </mask>
+                    <path
+                        d="M864 864V865H865V864H864ZM863 768V864H865V768H863ZM864 863H768V865H864V863Z"
+                        fill="#D0D5DD"
+                        mask="url(#path-179-inside-89_4940_405685)"
+                    />
+                    <mask id="path-181-inside-90_4940_405685" fill="white">
+                        <path d="M864 768H960V864H864V768Z" />
+                    </mask>
+                    <path
+                        d="M960 864V865H961V864H960ZM959 768V864H961V768H959ZM960 863H864V865H960V863Z"
+                        fill="#D0D5DD"
+                        mask="url(#path-181-inside-90_4940_405685)"
+                    />
+                    <mask id="path-183-inside-91_4940_405685" fill="white">
+                        <path d="M0 864H96V960H0V864Z" />
+                    </mask>
+                    <path d="M96 960V961H97V960H96ZM95 864V960H97V864H95ZM96 959H0V961H96V959Z" fill="#D0D5DD" mask="url(#path-183-inside-91_4940_405685)" />
+                    <mask id="path-185-inside-92_4940_405685" fill="white">
+                        <path d="M96 864H192V960H96V864Z" />
+                    </mask>
+                    <path
+                        d="M192 960V961H193V960H192ZM191 864V960H193V864H191ZM192 959H96V961H192V959Z"
+                        fill="#D0D5DD"
+                        mask="url(#path-185-inside-92_4940_405685)"
+                    />
+                    <mask id="path-187-inside-93_4940_405685" fill="white">
+                        <path d="M192 864H288V960H192V864Z" />
+                    </mask>
+                    <path
+                        d="M288 960V961H289V960H288ZM287 864V960H289V864H287ZM288 959H192V961H288V959Z"
+                        fill="#D0D5DD"
+                        mask="url(#path-187-inside-93_4940_405685)"
+                    />
+                    <mask id="path-189-inside-94_4940_405685" fill="white">
+                        <path d="M288 864H384V960H288V864Z" />
+                    </mask>
+                    <path
+                        d="M384 960V961H385V960H384ZM383 864V960H385V864H383ZM384 959H288V961H384V959Z"
+                        fill="#D0D5DD"
+                        mask="url(#path-189-inside-94_4940_405685)"
+                    />
+                    <mask id="path-191-inside-95_4940_405685" fill="white">
+                        <path d="M384 864H480V960H384V864Z" />
+                    </mask>
+                    <path
+                        d="M480 960V961H481V960H480ZM479 864V960H481V864H479ZM480 959H384V961H480V959Z"
+                        fill="#D0D5DD"
+                        mask="url(#path-191-inside-95_4940_405685)"
+                    />
+                    <mask id="path-193-inside-96_4940_405685" fill="white">
+                        <path d="M480 864H576V960H480V864Z" />
+                    </mask>
+                    <path
+                        d="M576 960V961H577V960H576ZM575 864V960H577V864H575ZM576 959H480V961H576V959Z"
+                        fill="#D0D5DD"
+                        mask="url(#path-193-inside-96_4940_405685)"
+                    />
+                    <mask id="path-195-inside-97_4940_405685" fill="white">
+                        <path d="M576 864H672V960H576V864Z" />
+                    </mask>
+                    <path
+                        d="M672 960V961H673V960H672ZM671 864V960H673V864H671ZM672 959H576V961H672V959Z"
+                        fill="#D0D5DD"
+                        mask="url(#path-195-inside-97_4940_405685)"
+                    />
+                    <mask id="path-197-inside-98_4940_405685" fill="white">
+                        <path d="M672 864H768V960H672V864Z" />
+                    </mask>
+                    <path
+                        d="M768 960V961H769V960H768ZM767 864V960H769V864H767ZM768 959H672V961H768V959Z"
+                        fill="#D0D5DD"
+                        mask="url(#path-197-inside-98_4940_405685)"
+                    />
+                    <mask id="path-199-inside-99_4940_405685" fill="white">
+                        <path d="M768 864H864V960H768V864Z" />
+                    </mask>
+                    <path
+                        d="M864 960V961H865V960H864ZM863 864V960H865V864H863ZM864 959H768V961H864V959Z"
+                        fill="#D0D5DD"
+                        mask="url(#path-199-inside-99_4940_405685)"
+                    />
+                    <mask id="path-201-inside-100_4940_405685" fill="white">
+                        <path d="M864 864H960V960H864V864Z" />
+                    </mask>
+                    <path
+                        d="M960 960V961H961V960H960ZM959 864V960H961V864H959ZM960 959H864V961H960V959Z"
+                        fill="#D0D5DD"
+                        mask="url(#path-201-inside-100_4940_405685)"
+                    />
+                </g>
+                <rect x="0.5" y="0.5" width="959" height="959" stroke="#D0D5DD" />
+            </g>
+            <defs>
+                <radialGradient
+                    id="paint0_radial_4940_405685"
+                    cx="0"
+                    cy="0"
+                    r="1"
+                    gradientUnits="userSpaceOnUse"
+                    gradientTransform="translate(480 -0.000114441) rotate(90) scale(960 501.059)"
+                >
+                    <stop />
+                    <stop offset="0.953125" stopOpacity="0" />
+                </radialGradient>
+                <clipPath id="clip0_4940_405685">
+                    <rect width="960" height="960" fill="white" />
+                </clipPath>
+            </defs>
+        </svg>
+    );
+};
+
+const sm = (props: SVGProps<SVGSVGElement>) => {
+    return (
+        <svg width="960" height="960" viewBox="0 0 960 960" fill="none" {...props}>
+            <mask id="mask0_4940_405682" style={{ maskType: "alpha" }} maskUnits="userSpaceOnUse" x="0" y="0" width="960" height="960">
+                <rect width="960" height="960" fill="url(#paint0_radial_4940_405682)" />
+            </mask>
+            <g mask="url(#mask0_4940_405682)">
+                <g clipPath="url(#clip0_4940_405682)">
+                    <mask id="path-3-inside-1_4940_405682" fill="white">
+                        <path d="M0 0H64V64H0V0Z" />
+                    </mask>
+                    <path d="M64 64V65H65V64H64ZM63 0V64H65V0H63ZM64 63H0V65H64V63Z" fill="#D0D5DD" mask="url(#path-3-inside-1_4940_405682)" />
+                    <mask id="path-5-inside-2_4940_405682" fill="white">
+                        <path d="M64 0H128V64H64V0Z" />
+                    </mask>
+                    <path d="M128 64V65H129V64H128ZM127 0V64H129V0H127ZM128 63H64V65H128V63Z" fill="#D0D5DD" mask="url(#path-5-inside-2_4940_405682)" />
+                    <mask id="path-7-inside-3_4940_405682" fill="white">
+                        <path d="M128 0H192V64H128V0Z" />
+                    </mask>
+                    <path d="M192 64V65H193V64H192ZM191 0V64H193V0H191ZM192 63H128V65H192V63Z" fill="#D0D5DD" mask="url(#path-7-inside-3_4940_405682)" />
+                    <mask id="path-9-inside-4_4940_405682" fill="white">
+                        <path d="M192 0H256V64H192V0Z" />
+                    </mask>
+                    <path d="M256 64V65H257V64H256ZM255 0V64H257V0H255ZM256 63H192V65H256V63Z" fill="#D0D5DD" mask="url(#path-9-inside-4_4940_405682)" />
+                    <mask id="path-11-inside-5_4940_405682" fill="white">
+                        <path d="M256 0H320V64H256V0Z" />
+                    </mask>
+                    <path d="M320 64V65H321V64H320ZM319 0V64H321V0H319ZM320 63H256V65H320V63Z" fill="#D0D5DD" mask="url(#path-11-inside-5_4940_405682)" />
+                    <mask id="path-13-inside-6_4940_405682" fill="white">
+                        <path d="M320 0H384V64H320V0Z" />
+                    </mask>
+                    <path d="M384 64V65H385V64H384ZM383 0V64H385V0H383ZM384 63H320V65H384V63Z" fill="#D0D5DD" mask="url(#path-13-inside-6_4940_405682)" />
+                    <mask id="path-15-inside-7_4940_405682" fill="white">
+                        <path d="M384 0H448V64H384V0Z" />
+                    </mask>
+                    <path d="M448 64V65H449V64H448ZM447 0V64H449V0H447ZM448 63H384V65H448V63Z" fill="#D0D5DD" mask="url(#path-15-inside-7_4940_405682)" />
+                    <mask id="path-17-inside-8_4940_405682" fill="white">
+                        <path d="M448 0H512V64H448V0Z" />
+                    </mask>
+                    <path d="M512 64V65H513V64H512ZM511 0V64H513V0H511ZM512 63H448V65H512V63Z" fill="#D0D5DD" mask="url(#path-17-inside-8_4940_405682)" />
+                    <mask id="path-19-inside-9_4940_405682" fill="white">
+                        <path d="M512 0H576V64H512V0Z" />
+                    </mask>
+                    <path d="M576 64V65H577V64H576ZM575 0V64H577V0H575ZM576 63H512V65H576V63Z" fill="#D0D5DD" mask="url(#path-19-inside-9_4940_405682)" />
+                    <mask id="path-21-inside-10_4940_405682" fill="white">
+                        <path d="M576 0H640V64H576V0Z" />
+                    </mask>
+                    <path d="M640 64V65H641V64H640ZM639 0V64H641V0H639ZM640 63H576V65H640V63Z" fill="#D0D5DD" mask="url(#path-21-inside-10_4940_405682)" />
+                    <mask id="path-23-inside-11_4940_405682" fill="white">
+                        <path d="M640 0H704V64H640V0Z" />
+                    </mask>
+                    <path d="M704 64V65H705V64H704ZM703 0V64H705V0H703ZM704 63H640V65H704V63Z" fill="#D0D5DD" mask="url(#path-23-inside-11_4940_405682)" />
+                    <mask id="path-25-inside-12_4940_405682" fill="white">
+                        <path d="M704 0H768V64H704V0Z" />
+                    </mask>
+                    <path d="M768 64V65H769V64H768ZM767 0V64H769V0H767ZM768 63H704V65H768V63Z" fill="#D0D5DD" mask="url(#path-25-inside-12_4940_405682)" />
+                    <mask id="path-27-inside-13_4940_405682" fill="white">
+                        <path d="M768 0H832V64H768V0Z" />
+                    </mask>
+                    <path d="M832 64V65H833V64H832ZM831 0V64H833V0H831ZM832 63H768V65H832V63Z" fill="#D0D5DD" mask="url(#path-27-inside-13_4940_405682)" />
+                    <mask id="path-29-inside-14_4940_405682" fill="white">
+                        <path d="M832 0H896V64H832V0Z" />
+                    </mask>
+                    <path d="M896 64V65H897V64H896ZM895 0V64H897V0H895ZM896 63H832V65H896V63Z" fill="#D0D5DD" mask="url(#path-29-inside-14_4940_405682)" />
+                    <mask id="path-31-inside-15_4940_405682" fill="white">
+                        <path d="M896 0H960V64H896V0Z" />
+                    </mask>
+                    <path d="M960 64V65H961V64H960ZM959 0V64H961V0H959ZM960 63H896V65H960V63Z" fill="#D0D5DD" mask="url(#path-31-inside-15_4940_405682)" />
+                    <mask id="path-33-inside-16_4940_405682" fill="white">
+                        <path d="M0 64H64V128H0V64Z" />
+                    </mask>
+                    <path d="M64 128V129H65V128H64ZM63 64V128H65V64H63ZM64 127H0V129H64V127Z" fill="#D0D5DD" mask="url(#path-33-inside-16_4940_405682)" />
+                    <mask id="path-35-inside-17_4940_405682" fill="white">
+                        <path d="M64 64H128V128H64V64Z" />
+                    </mask>
+                    <path
+                        d="M128 128V129H129V128H128ZM127 64V128H129V64H127ZM128 127H64V129H128V127Z"
+                        fill="#D0D5DD"
+                        mask="url(#path-35-inside-17_4940_405682)"
+                    />
+                    <mask id="path-37-inside-18_4940_405682" fill="white">
+                        <path d="M128 64H192V128H128V64Z" />
+                    </mask>
+                    <path d="M128 64H192V128H128V64Z" fill="#F2F4F7" />
+                    <path
+                        d="M192 128V129H193V128H192ZM191 64V128H193V64H191ZM192 127H128V129H192V127Z"
+                        fill="#D0D5DD"
+                        mask="url(#path-37-inside-18_4940_405682)"
+                    />
+                    <mask id="path-39-inside-19_4940_405682" fill="white">
+                        <path d="M192 64H256V128H192V64Z" />
+                    </mask>
+                    <path
+                        d="M256 128V129H257V128H256ZM255 64V128H257V64H255ZM256 127H192V129H256V127Z"
+                        fill="#D0D5DD"
+                        mask="url(#path-39-inside-19_4940_405682)"
+                    />
+                    <mask id="path-41-inside-20_4940_405682" fill="white">
+                        <path d="M256 64H320V128H256V64Z" />
+                    </mask>
+                    <path
+                        d="M320 128V129H321V128H320ZM319 64V128H321V64H319ZM320 127H256V129H320V127Z"
+                        fill="#D0D5DD"
+                        mask="url(#path-41-inside-20_4940_405682)"
+                    />
+                    <mask id="path-43-inside-21_4940_405682" fill="white">
+                        <path d="M320 64H384V128H320V64Z" />
+                    </mask>
+                    <path
+                        d="M384 128V129H385V128H384ZM383 64V128H385V64H383ZM384 127H320V129H384V127Z"
+                        fill="#D0D5DD"
+                        mask="url(#path-43-inside-21_4940_405682)"
+                    />
+                    <mask id="path-45-inside-22_4940_405682" fill="white">
+                        <path d="M384 64H448V128H384V64Z" />
+                    </mask>
+                    <path
+                        d="M448 128V129H449V128H448ZM447 64V128H449V64H447ZM448 127H384V129H448V127Z"
+                        fill="#D0D5DD"
+                        mask="url(#path-45-inside-22_4940_405682)"
+                    />
+                    <mask id="path-47-inside-23_4940_405682" fill="white">
+                        <path d="M448 64H512V128H448V64Z" />
+                    </mask>
+                    <path
+                        d="M512 128V129H513V128H512ZM511 64V128H513V64H511ZM512 127H448V129H512V127Z"
+                        fill="#D0D5DD"
+                        mask="url(#path-47-inside-23_4940_405682)"
+                    />
+                    <mask id="path-49-inside-24_4940_405682" fill="white">
+                        <path d="M512 64H576V128H512V64Z" />
+                    </mask>
+                    <path
+                        d="M576 128V129H577V128H576ZM575 64V128H577V64H575ZM576 127H512V129H576V127Z"
+                        fill="#D0D5DD"
+                        mask="url(#path-49-inside-24_4940_405682)"
+                    />
+                    <mask id="path-51-inside-25_4940_405682" fill="white">
+                        <path d="M576 64H640V128H576V64Z" />
+                    </mask>
+                    <path
+                        d="M640 128V129H641V128H640ZM639 64V128H641V64H639ZM640 127H576V129H640V127Z"
+                        fill="#D0D5DD"
+                        mask="url(#path-51-inside-25_4940_405682)"
+                    />
+                    <mask id="path-53-inside-26_4940_405682" fill="white">
+                        <path d="M640 64H704V128H640V64Z" />
+                    </mask>
+                    <path
+                        d="M704 128V129H705V128H704ZM703 64V128H705V64H703ZM704 127H640V129H704V127Z"
+                        fill="#D0D5DD"
+                        mask="url(#path-53-inside-26_4940_405682)"
+                    />
+                    <mask id="path-55-inside-27_4940_405682" fill="white">
+                        <path d="M704 64H768V128H704V64Z" />
+                    </mask>
+                    <path d="M704 64H768V128H704V64Z" fill="#F2F4F7" />
+                    <path
+                        d="M768 128V129H769V128H768ZM767 64V128H769V64H767ZM768 127H704V129H768V127Z"
+                        fill="#D0D5DD"
+                        mask="url(#path-55-inside-27_4940_405682)"
+                    />
+                    <mask id="path-57-inside-28_4940_405682" fill="white">
+                        <path d="M768 64H832V128H768V64Z" />
+                    </mask>
+                    <path
+                        d="M832 128V129H833V128H832ZM831 64V128H833V64H831ZM832 127H768V129H832V127Z"
+                        fill="#D0D5DD"
+                        mask="url(#path-57-inside-28_4940_405682)"
+                    />
+                    <mask id="path-59-inside-29_4940_405682" fill="white">
+                        <path d="M832 64H896V128H832V64Z" />
+                    </mask>
+                    <path
+                        d="M896 128V129H897V128H896ZM895 64V128H897V64H895ZM896 127H832V129H896V127Z"
+                        fill="#D0D5DD"
+                        mask="url(#path-59-inside-29_4940_405682)"
+                    />
+                    <mask id="path-61-inside-30_4940_405682" fill="white">
+                        <path d="M896 64H960V128H896V64Z" />
+                    </mask>
+                    <path
+                        d="M960 128V129H961V128H960ZM959 64V128H961V64H959ZM960 127H896V129H960V127Z"
+                        fill="#D0D5DD"
+                        mask="url(#path-61-inside-30_4940_405682)"
+                    />
+                    <mask id="path-63-inside-31_4940_405682" fill="white">
+                        <path d="M0 128H64V192H0V128Z" />
+                    </mask>
+                    <path d="M64 192V193H65V192H64ZM63 128V192H65V128H63ZM64 191H0V193H64V191Z" fill="#D0D5DD" mask="url(#path-63-inside-31_4940_405682)" />
+                    <mask id="path-65-inside-32_4940_405682" fill="white">
+                        <path d="M64 128H128V192H64V128Z" />
+                    </mask>
+                    <path
+                        d="M128 192V193H129V192H128ZM127 128V192H129V128H127ZM128 191H64V193H128V191Z"
+                        fill="#D0D5DD"
+                        mask="url(#path-65-inside-32_4940_405682)"
+                    />
+                    <mask id="path-67-inside-33_4940_405682" fill="white">
+                        <path d="M128 128H192V192H128V128Z" />
+                    </mask>
+                    <path
+                        d="M192 192V193H193V192H192ZM191 128V192H193V128H191ZM192 191H128V193H192V191Z"
+                        fill="#D0D5DD"
+                        mask="url(#path-67-inside-33_4940_405682)"
+                    />
+                    <mask id="path-69-inside-34_4940_405682" fill="white">
+                        <path d="M192 128H256V192H192V128Z" />
+                    </mask>
+                    <path
+                        d="M256 192V193H257V192H256ZM255 128V192H257V128H255ZM256 191H192V193H256V191Z"
+                        fill="#D0D5DD"
+                        mask="url(#path-69-inside-34_4940_405682)"
+                    />
+                    <mask id="path-71-inside-35_4940_405682" fill="white">
+                        <path d="M256 128H320V192H256V128Z" />
+                    </mask>
+                    <path d="M256 128H320V192H256V128Z" fill="#F2F4F7" />
+                    <path
+                        d="M320 192V193H321V192H320ZM319 128V192H321V128H319ZM320 191H256V193H320V191Z"
+                        fill="#D0D5DD"
+                        mask="url(#path-71-inside-35_4940_405682)"
+                    />
+                    <mask id="path-73-inside-36_4940_405682" fill="white">
+                        <path d="M320 128H384V192H320V128Z" />
+                    </mask>
+                    <path
+                        d="M384 192V193H385V192H384ZM383 128V192H385V128H383ZM384 191H320V193H384V191Z"
+                        fill="#D0D5DD"
+                        mask="url(#path-73-inside-36_4940_405682)"
+                    />
+                    <mask id="path-75-inside-37_4940_405682" fill="white">
+                        <path d="M384 128H448V192H384V128Z" />
+                    </mask>
+                    <path
+                        d="M448 192V193H449V192H448ZM447 128V192H449V128H447ZM448 191H384V193H448V191Z"
+                        fill="#D0D5DD"
+                        mask="url(#path-75-inside-37_4940_405682)"
+                    />
+                    <mask id="path-77-inside-38_4940_405682" fill="white">
+                        <path d="M448 128H512V192H448V128Z" />
+                    </mask>
+                    <path
+                        d="M512 192V193H513V192H512ZM511 128V192H513V128H511ZM512 191H448V193H512V191Z"
+                        fill="#D0D5DD"
+                        mask="url(#path-77-inside-38_4940_405682)"
+                    />
+                    <mask id="path-79-inside-39_4940_405682" fill="white">
+                        <path d="M512 128H576V192H512V128Z" />
+                    </mask>
+                    <path d="M512 128H576V192H512V128Z" fill="#F2F4F7" />
+                    <path
+                        d="M576 192V193H577V192H576ZM575 128V192H577V128H575ZM576 191H512V193H576V191Z"
+                        fill="#D0D5DD"
+                        mask="url(#path-79-inside-39_4940_405682)"
+                    />
+                    <mask id="path-81-inside-40_4940_405682" fill="white">
+                        <path d="M576 128H640V192H576V128Z" />
+                    </mask>
+                    <path
+                        d="M640 192V193H641V192H640ZM639 128V192H641V128H639ZM640 191H576V193H640V191Z"
+                        fill="#D0D5DD"
+                        mask="url(#path-81-inside-40_4940_405682)"
+                    />
+                    <mask id="path-83-inside-41_4940_405682" fill="white">
+                        <path d="M640 128H704V192H640V128Z" />
+                    </mask>
+                    <path
+                        d="M704 192V193H705V192H704ZM703 128V192H705V128H703ZM704 191H640V193H704V191Z"
+                        fill="#D0D5DD"
+                        mask="url(#path-83-inside-41_4940_405682)"
+                    />
+                    <mask id="path-85-inside-42_4940_405682" fill="white">
+                        <path d="M704 128H768V192H704V128Z" />
+                    </mask>
+                    <path
+                        d="M768 192V193H769V192H768ZM767 128V192H769V128H767ZM768 191H704V193H768V191Z"
+                        fill="#D0D5DD"
+                        mask="url(#path-85-inside-42_4940_405682)"
+                    />
+                    <mask id="path-87-inside-43_4940_405682" fill="white">
+                        <path d="M768 128H832V192H768V128Z" />
+                    </mask>
+                    <path
+                        d="M832 192V193H833V192H832ZM831 128V192H833V128H831ZM832 191H768V193H832V191Z"
+                        fill="#D0D5DD"
+                        mask="url(#path-87-inside-43_4940_405682)"
+                    />
+                    <mask id="path-89-inside-44_4940_405682" fill="white">
+                        <path d="M832 128H896V192H832V128Z" />
+                    </mask>
+                    <path
+                        d="M896 192V193H897V192H896ZM895 128V192H897V128H895ZM896 191H832V193H896V191Z"
+                        fill="#D0D5DD"
+                        mask="url(#path-89-inside-44_4940_405682)"
+                    />
+                    <mask id="path-91-inside-45_4940_405682" fill="white">
+                        <path d="M896 128H960V192H896V128Z" />
+                    </mask>
+                    <path
+                        d="M960 192V193H961V192H960ZM959 128V192H961V128H959ZM960 191H896V193H960V191Z"
+                        fill="#D0D5DD"
+                        mask="url(#path-91-inside-45_4940_405682)"
+                    />
+                    <mask id="path-93-inside-46_4940_405682" fill="white">
+                        <path d="M0 192H64V256H0V192Z" />
+                    </mask>
+                    <path d="M64 256V257H65V256H64ZM63 192V256H65V192H63ZM64 255H0V257H64V255Z" fill="#D0D5DD" mask="url(#path-93-inside-46_4940_405682)" />
+                    <mask id="path-95-inside-47_4940_405682" fill="white">
+                        <path d="M64 192H128V256H64V192Z" />
+                    </mask>
+                    <path
+                        d="M128 256V257H129V256H128ZM127 192V256H129V192H127ZM128 255H64V257H128V255Z"
+                        fill="#D0D5DD"
+                        mask="url(#path-95-inside-47_4940_405682)"
+                    />
+                    <mask id="path-97-inside-48_4940_405682" fill="white">
+                        <path d="M128 192H192V256H128V192Z" />
+                    </mask>
+                    <path
+                        d="M192 256V257H193V256H192ZM191 192V256H193V192H191ZM192 255H128V257H192V255Z"
+                        fill="#D0D5DD"
+                        mask="url(#path-97-inside-48_4940_405682)"
+                    />
+                    <mask id="path-99-inside-49_4940_405682" fill="white">
+                        <path d="M192 192H256V256H192V192Z" />
+                    </mask>
+                    <path
+                        d="M256 256V257H257V256H256ZM255 192V256H257V192H255ZM256 255H192V257H256V255Z"
+                        fill="#D0D5DD"
+                        mask="url(#path-99-inside-49_4940_405682)"
+                    />
+                    <mask id="path-101-inside-50_4940_405682" fill="white">
+                        <path d="M256 192H320V256H256V192Z" />
+                    </mask>
+                    <path
+                        d="M320 256V257H321V256H320ZM319 192V256H321V192H319ZM320 255H256V257H320V255Z"
+                        fill="#D0D5DD"
+                        mask="url(#path-101-inside-50_4940_405682)"
+                    />
+                    <mask id="path-103-inside-51_4940_405682" fill="white">
+                        <path d="M320 192H384V256H320V192Z" />
+                    </mask>
+                    <path
+                        d="M384 256V257H385V256H384ZM383 192V256H385V192H383ZM384 255H320V257H384V255Z"
+                        fill="#D0D5DD"
+                        mask="url(#path-103-inside-51_4940_405682)"
+                    />
+                    <mask id="path-105-inside-52_4940_405682" fill="white">
+                        <path d="M384 192H448V256H384V192Z" />
+                    </mask>
+                    <path
+                        d="M448 256V257H449V256H448ZM447 192V256H449V192H447ZM448 255H384V257H448V255Z"
+                        fill="#D0D5DD"
+                        mask="url(#path-105-inside-52_4940_405682)"
+                    />
+                    <mask id="path-107-inside-53_4940_405682" fill="white">
+                        <path d="M448 192H512V256H448V192Z" />
+                    </mask>
+                    <path
+                        d="M512 256V257H513V256H512ZM511 192V256H513V192H511ZM512 255H448V257H512V255Z"
+                        fill="#D0D5DD"
+                        mask="url(#path-107-inside-53_4940_405682)"
+                    />
+                    <mask id="path-109-inside-54_4940_405682" fill="white">
+                        <path d="M512 192H576V256H512V192Z" />
+                    </mask>
+                    <path
+                        d="M576 256V257H577V256H576ZM575 192V256H577V192H575ZM576 255H512V257H576V255Z"
+                        fill="#D0D5DD"
+                        mask="url(#path-109-inside-54_4940_405682)"
+                    />
+                    <mask id="path-111-inside-55_4940_405682" fill="white">
+                        <path d="M576 192H640V256H576V192Z" />
+                    </mask>
+                    <path
+                        d="M640 256V257H641V256H640ZM639 192V256H641V192H639ZM640 255H576V257H640V255Z"
+                        fill="#D0D5DD"
+                        mask="url(#path-111-inside-55_4940_405682)"
+                    />
+                    <mask id="path-113-inside-56_4940_405682" fill="white">
+                        <path d="M640 192H704V256H640V192Z" />
+                    </mask>
+                    <path
+                        d="M704 256V257H705V256H704ZM703 192V256H705V192H703ZM704 255H640V257H704V255Z"
+                        fill="#D0D5DD"
+                        mask="url(#path-113-inside-56_4940_405682)"
+                    />
+                    <mask id="path-115-inside-57_4940_405682" fill="white">
+                        <path d="M704 192H768V256H704V192Z" />
+                    </mask>
+                    <path
+                        d="M768 256V257H769V256H768ZM767 192V256H769V192H767ZM768 255H704V257H768V255Z"
+                        fill="#D0D5DD"
+                        mask="url(#path-115-inside-57_4940_405682)"
+                    />
+                    <mask id="path-117-inside-58_4940_405682" fill="white">
+                        <path d="M768 192H832V256H768V192Z" />
+                    </mask>
+                    <path d="M768 192H832V256H768V192Z" fill="#F2F4F7" />
+                    <path
+                        d="M832 256V257H833V256H832ZM831 192V256H833V192H831ZM832 255H768V257H832V255Z"
+                        fill="#D0D5DD"
+                        mask="url(#path-117-inside-58_4940_405682)"
+                    />
+                    <mask id="path-119-inside-59_4940_405682" fill="white">
+                        <path d="M832 192H896V256H832V192Z" />
+                    </mask>
+                    <path
+                        d="M896 256V257H897V256H896ZM895 192V256H897V192H895ZM896 255H832V257H896V255Z"
+                        fill="#D0D5DD"
+                        mask="url(#path-119-inside-59_4940_405682)"
+                    />
+                    <mask id="path-121-inside-60_4940_405682" fill="white">
+                        <path d="M896 192H960V256H896V192Z" />
+                    </mask>
+                    <path
+                        d="M960 256V257H961V256H960ZM959 192V256H961V192H959ZM960 255H896V257H960V255Z"
+                        fill="#D0D5DD"
+                        mask="url(#path-121-inside-60_4940_405682)"
+                    />
+                    <mask id="path-123-inside-61_4940_405682" fill="white">
+                        <path d="M0 256H64V320H0V256Z" />
+                    </mask>
+                    <path d="M0 256H64V320H0V256Z" fill="#F2F4F7" />
+                    <path d="M64 320V321H65V320H64ZM63 256V320H65V256H63ZM64 319H0V321H64V319Z" fill="#D0D5DD" mask="url(#path-123-inside-61_4940_405682)" />
+                    <mask id="path-125-inside-62_4940_405682" fill="white">
+                        <path d="M64 256H128V320H64V256Z" />
+                    </mask>
+                    <path
+                        d="M128 320V321H129V320H128ZM127 256V320H129V256H127ZM128 319H64V321H128V319Z"
+                        fill="#D0D5DD"
+                        mask="url(#path-125-inside-62_4940_405682)"
+                    />
+                    <mask id="path-127-inside-63_4940_405682" fill="white">
+                        <path d="M128 256H192V320H128V256Z" />
+                    </mask>
+                    <path
+                        d="M192 320V321H193V320H192ZM191 256V320H193V256H191ZM192 319H128V321H192V319Z"
+                        fill="#D0D5DD"
+                        mask="url(#path-127-inside-63_4940_405682)"
+                    />
+                    <mask id="path-129-inside-64_4940_405682" fill="white">
+                        <path d="M192 256H256V320H192V256Z" />
+                    </mask>
+                    <path
+                        d="M256 320V321H257V320H256ZM255 256V320H257V256H255ZM256 319H192V321H256V319Z"
+                        fill="#D0D5DD"
+                        mask="url(#path-129-inside-64_4940_405682)"
+                    />
+                    <mask id="path-131-inside-65_4940_405682" fill="white">
+                        <path d="M256 256H320V320H256V256Z" />
+                    </mask>
+                    <path
+                        d="M320 320V321H321V320H320ZM319 256V320H321V256H319ZM320 319H256V321H320V319Z"
+                        fill="#D0D5DD"
+                        mask="url(#path-131-inside-65_4940_405682)"
+                    />
+                    <mask id="path-133-inside-66_4940_405682" fill="white">
+                        <path d="M320 256H384V320H320V256Z" />
+                    </mask>
+                    <path d="M320 256H384V320H320V256Z" fill="#F2F4F7" />
+                    <path
+                        d="M384 320V321H385V320H384ZM383 256V320H385V256H383ZM384 319H320V321H384V319Z"
+                        fill="#D0D5DD"
+                        mask="url(#path-133-inside-66_4940_405682)"
+                    />
+                    <mask id="path-135-inside-67_4940_405682" fill="white">
+                        <path d="M384 256H448V320H384V256Z" />
+                    </mask>
+                    <path
+                        d="M448 320V321H449V320H448ZM447 256V320H449V256H447ZM448 319H384V321H448V319Z"
+                        fill="#D0D5DD"
+                        mask="url(#path-135-inside-67_4940_405682)"
+                    />
+                    <mask id="path-137-inside-68_4940_405682" fill="white">
+                        <path d="M448 256H512V320H448V256Z" />
+                    </mask>
+                    <path
+                        d="M512 320V321H513V320H512ZM511 256V320H513V256H511ZM512 319H448V321H512V319Z"
+                        fill="#D0D5DD"
+                        mask="url(#path-137-inside-68_4940_405682)"
+                    />
+                    <mask id="path-139-inside-69_4940_405682" fill="white">
+                        <path d="M512 256H576V320H512V256Z" />
+                    </mask>
+                    <path
+                        d="M576 320V321H577V320H576ZM575 256V320H577V256H575ZM576 319H512V321H576V319Z"
+                        fill="#D0D5DD"
+                        mask="url(#path-139-inside-69_4940_405682)"
+                    />
+                    <mask id="path-141-inside-70_4940_405682" fill="white">
+                        <path d="M576 256H640V320H576V256Z" />
+                    </mask>
+                    <path
+                        d="M640 320V321H641V320H640ZM639 256V320H641V256H639ZM640 319H576V321H640V319Z"
+                        fill="#D0D5DD"
+                        mask="url(#path-141-inside-70_4940_405682)"
+                    />
+                    <mask id="path-143-inside-71_4940_405682" fill="white">
+                        <path d="M640 256H704V320H640V256Z" />
+                    </mask>
+                    <path
+                        d="M704 320V321H705V320H704ZM703 256V320H705V256H703ZM704 319H640V321H704V319Z"
+                        fill="#D0D5DD"
+                        mask="url(#path-143-inside-71_4940_405682)"
+                    />
+                    <mask id="path-145-inside-72_4940_405682" fill="white">
+                        <path d="M704 256H768V320H704V256Z" />
+                    </mask>
+                    <path
+                        d="M768 320V321H769V320H768ZM767 256V320H769V256H767ZM768 319H704V321H768V319Z"
+                        fill="#D0D5DD"
+                        mask="url(#path-145-inside-72_4940_405682)"
+                    />
+                    <mask id="path-147-inside-73_4940_405682" fill="white">
+                        <path d="M768 256H832V320H768V256Z" />
+                    </mask>
+                    <path
+                        d="M832 320V321H833V320H832ZM831 256V320H833V256H831ZM832 319H768V321H832V319Z"
+                        fill="#D0D5DD"
+                        mask="url(#path-147-inside-73_4940_405682)"
+                    />
+                    <mask id="path-149-inside-74_4940_405682" fill="white">
+                        <path d="M832 256H896V320H832V256Z" />
+                    </mask>
+                    <path
+                        d="M896 320V321H897V320H896ZM895 256V320H897V256H895ZM896 319H832V321H896V319Z"
+                        fill="#D0D5DD"
+                        mask="url(#path-149-inside-74_4940_405682)"
+                    />
+                    <mask id="path-151-inside-75_4940_405682" fill="white">
+                        <path d="M896 256H960V320H896V256Z" />
+                    </mask>
+                    <path
+                        d="M960 320V321H961V320H960ZM959 256V320H961V256H959ZM960 319H896V321H960V319Z"
+                        fill="#D0D5DD"
+                        mask="url(#path-151-inside-75_4940_405682)"
+                    />
+                    <mask id="path-153-inside-76_4940_405682" fill="white">
+                        <path d="M0 320H64V384H0V320Z" />
+                    </mask>
+                    <path d="M64 384V385H65V384H64ZM63 320V384H65V320H63ZM64 383H0V385H64V383Z" fill="#D0D5DD" mask="url(#path-153-inside-76_4940_405682)" />
+                    <mask id="path-155-inside-77_4940_405682" fill="white">
+                        <path d="M64 320H128V384H64V320Z" />
+                    </mask>
+                    <path
+                        d="M128 384V385H129V384H128ZM127 320V384H129V320H127ZM128 383H64V385H128V383Z"
+                        fill="#D0D5DD"
+                        mask="url(#path-155-inside-77_4940_405682)"
+                    />
+                    <mask id="path-157-inside-78_4940_405682" fill="white">
+                        <path d="M128 320H192V384H128V320Z" />
+                    </mask>
+                    <path
+                        d="M192 384V385H193V384H192ZM191 320V384H193V320H191ZM192 383H128V385H192V383Z"
+                        fill="#D0D5DD"
+                        mask="url(#path-157-inside-78_4940_405682)"
+                    />
+                    <mask id="path-159-inside-79_4940_405682" fill="white">
+                        <path d="M192 320H256V384H192V320Z" />
+                    </mask>
+                    <path d="M192 320H256V384H192V320Z" fill="#F2F4F7" />
+                    <path
+                        d="M256 384V385H257V384H256ZM255 320V384H257V320H255ZM256 383H192V385H256V383Z"
+                        fill="#D0D5DD"
+                        mask="url(#path-159-inside-79_4940_405682)"
+                    />
+                    <mask id="path-161-inside-80_4940_405682" fill="white">
+                        <path d="M256 320H320V384H256V320Z" />
+                    </mask>
+                    <path
+                        d="M320 384V385H321V384H320ZM319 320V384H321V320H319ZM320 383H256V385H320V383Z"
+                        fill="#D0D5DD"
+                        mask="url(#path-161-inside-80_4940_405682)"
+                    />
+                    <mask id="path-163-inside-81_4940_405682" fill="white">
+                        <path d="M320 320H384V384H320V320Z" />
+                    </mask>
+                    <path
+                        d="M384 384V385H385V384H384ZM383 320V384H385V320H383ZM384 383H320V385H384V383Z"
+                        fill="#D0D5DD"
+                        mask="url(#path-163-inside-81_4940_405682)"
+                    />
+                    <mask id="path-165-inside-82_4940_405682" fill="white">
+                        <path d="M384 320H448V384H384V320Z" />
+                    </mask>
+                    <path
+                        d="M448 384V385H449V384H448ZM447 320V384H449V320H447ZM448 383H384V385H448V383Z"
+                        fill="#D0D5DD"
+                        mask="url(#path-165-inside-82_4940_405682)"
+                    />
+                    <mask id="path-167-inside-83_4940_405682" fill="white">
+                        <path d="M448 320H512V384H448V320Z" />
+                    </mask>
+                    <path
+                        d="M512 384V385H513V384H512ZM511 320V384H513V320H511ZM512 383H448V385H512V383Z"
+                        fill="#D0D5DD"
+                        mask="url(#path-167-inside-83_4940_405682)"
+                    />
+                    <mask id="path-169-inside-84_4940_405682" fill="white">
+                        <path d="M512 320H576V384H512V320Z" />
+                    </mask>
+                    <path
+                        d="M576 384V385H577V384H576ZM575 320V384H577V320H575ZM576 383H512V385H576V383Z"
+                        fill="#D0D5DD"
+                        mask="url(#path-169-inside-84_4940_405682)"
+                    />
+                    <mask id="path-171-inside-85_4940_405682" fill="white">
+                        <path d="M576 320H640V384H576V320Z" />
+                    </mask>
+                    <path d="M576 320H640V384H576V320Z" fill="#F2F4F7" />
+                    <path
+                        d="M640 384V385H641V384H640ZM639 320V384H641V320H639ZM640 383H576V385H640V383Z"
+                        fill="#D0D5DD"
+                        mask="url(#path-171-inside-85_4940_405682)"
+                    />
+                    <mask id="path-173-inside-86_4940_405682" fill="white">
+                        <path d="M640 320H704V384H640V320Z" />
+                    </mask>
+                    <path
+                        d="M704 384V385H705V384H704ZM703 320V384H705V320H703ZM704 383H640V385H704V383Z"
+                        fill="#D0D5DD"
+                        mask="url(#path-173-inside-86_4940_405682)"
+                    />
+                    <mask id="path-175-inside-87_4940_405682" fill="white">
+                        <path d="M704 320H768V384H704V320Z" />
+                    </mask>
+                    <path
+                        d="M768 384V385H769V384H768ZM767 320V384H769V320H767ZM768 383H704V385H768V383Z"
+                        fill="#D0D5DD"
+                        mask="url(#path-175-inside-87_4940_405682)"
+                    />
+                    <mask id="path-177-inside-88_4940_405682" fill="white">
+                        <path d="M768 320H832V384H768V320Z" />
+                    </mask>
+                    <path d="M768 320H832V384H768V320Z" fill="#F2F4F7" />
+                    <path
+                        d="M832 384V385H833V384H832ZM831 320V384H833V320H831ZM832 383H768V385H832V383Z"
+                        fill="#D0D5DD"
+                        mask="url(#path-177-inside-88_4940_405682)"
+                    />
+                    <mask id="path-179-inside-89_4940_405682" fill="white">
+                        <path d="M832 320H896V384H832V320Z" />
+                    </mask>
+                    <path
+                        d="M896 384V385H897V384H896ZM895 320V384H897V320H895ZM896 383H832V385H896V383Z"
+                        fill="#D0D5DD"
+                        mask="url(#path-179-inside-89_4940_405682)"
+                    />
+                    <mask id="path-181-inside-90_4940_405682" fill="white">
+                        <path d="M896 320H960V384H896V320Z" />
+                    </mask>
+                    <path
+                        d="M960 384V385H961V384H960ZM959 320V384H961V320H959ZM960 383H896V385H960V383Z"
+                        fill="#D0D5DD"
+                        mask="url(#path-181-inside-90_4940_405682)"
+                    />
+                    <mask id="path-183-inside-91_4940_405682" fill="white">
+                        <path d="M0 384H64V448H0V384Z" />
+                    </mask>
+                    <path d="M64 448V449H65V448H64ZM63 384V448H65V384H63ZM64 447H0V449H64V447Z" fill="#D0D5DD" mask="url(#path-183-inside-91_4940_405682)" />
+                    <mask id="path-185-inside-92_4940_405682" fill="white">
+                        <path d="M64 384H128V448H64V384Z" />
+                    </mask>
+                    <path
+                        d="M128 448V449H129V448H128ZM127 384V448H129V384H127ZM128 447H64V449H128V447Z"
+                        fill="#D0D5DD"
+                        mask="url(#path-185-inside-92_4940_405682)"
+                    />
+                    <mask id="path-187-inside-93_4940_405682" fill="white">
+                        <path d="M128 384H192V448H128V384Z" />
+                    </mask>
+                    <path
+                        d="M192 448V449H193V448H192ZM191 384V448H193V384H191ZM192 447H128V449H192V447Z"
+                        fill="#D0D5DD"
+                        mask="url(#path-187-inside-93_4940_405682)"
+                    />
+                    <mask id="path-189-inside-94_4940_405682" fill="white">
+                        <path d="M192 384H256V448H192V384Z" />
+                    </mask>
+                    <path
+                        d="M256 448V449H257V448H256ZM255 384V448H257V384H255ZM256 447H192V449H256V447Z"
+                        fill="#D0D5DD"
+                        mask="url(#path-189-inside-94_4940_405682)"
+                    />
+                    <mask id="path-191-inside-95_4940_405682" fill="white">
+                        <path d="M256 384H320V448H256V384Z" />
+                    </mask>
+                    <path
+                        d="M320 448V449H321V448H320ZM319 384V448H321V384H319ZM320 447H256V449H320V447Z"
+                        fill="#D0D5DD"
+                        mask="url(#path-191-inside-95_4940_405682)"
+                    />
+                    <mask id="path-193-inside-96_4940_405682" fill="white">
+                        <path d="M320 384H384V448H320V384Z" />
+                    </mask>
+                    <path
+                        d="M384 448V449H385V448H384ZM383 384V448H385V384H383ZM384 447H320V449H384V447Z"
+                        fill="#D0D5DD"
+                        mask="url(#path-193-inside-96_4940_405682)"
+                    />
+                    <mask id="path-195-inside-97_4940_405682" fill="white">
+                        <path d="M384 384H448V448H384V384Z" />
+                    </mask>
+                    <path d="M384 384H448V448H384V384Z" fill="#F2F4F7" />
+                    <path
+                        d="M448 448V449H449V448H448ZM447 384V448H449V384H447ZM448 447H384V449H448V447Z"
+                        fill="#D0D5DD"
+                        mask="url(#path-195-inside-97_4940_405682)"
+                    />
+                    <mask id="path-197-inside-98_4940_405682" fill="white">
+                        <path d="M448 384H512V448H448V384Z" />
+                    </mask>
+                    <path
+                        d="M512 448V449H513V448H512ZM511 384V448H513V384H511ZM512 447H448V449H512V447Z"
+                        fill="#D0D5DD"
+                        mask="url(#path-197-inside-98_4940_405682)"
+                    />
+                    <mask id="path-199-inside-99_4940_405682" fill="white">
+                        <path d="M512 384H576V448H512V384Z" />
+                    </mask>
+                    <path
+                        d="M576 448V449H577V448H576ZM575 384V448H577V384H575ZM576 447H512V449H576V447Z"
+                        fill="#D0D5DD"
+                        mask="url(#path-199-inside-99_4940_405682)"
+                    />
+                    <mask id="path-201-inside-100_4940_405682" fill="white">
+                        <path d="M576 384H640V448H576V384Z" />
+                    </mask>
+                    <path
+                        d="M640 448V449H641V448H640ZM639 384V448H641V384H639ZM640 447H576V449H640V447Z"
+                        fill="#D0D5DD"
+                        mask="url(#path-201-inside-100_4940_405682)"
+                    />
+                    <mask id="path-203-inside-101_4940_405682" fill="white">
+                        <path d="M640 384H704V448H640V384Z" />
+                    </mask>
+                    <path
+                        d="M704 448V449H705V448H704ZM703 384V448H705V384H703ZM704 447H640V449H704V447Z"
+                        fill="#D0D5DD"
+                        mask="url(#path-203-inside-101_4940_405682)"
+                    />
+                    <mask id="path-205-inside-102_4940_405682" fill="white">
+                        <path d="M704 384H768V448H704V384Z" />
+                    </mask>
+                    <path
+                        d="M768 448V449H769V448H768ZM767 384V448H769V384H767ZM768 447H704V449H768V447Z"
+                        fill="#D0D5DD"
+                        mask="url(#path-205-inside-102_4940_405682)"
+                    />
+                    <mask id="path-207-inside-103_4940_405682" fill="white">
+                        <path d="M768 384H832V448H768V384Z" />
+                    </mask>
+                    <path
+                        d="M832 448V449H833V448H832ZM831 384V448H833V384H831ZM832 447H768V449H832V447Z"
+                        fill="#D0D5DD"
+                        mask="url(#path-207-inside-103_4940_405682)"
+                    />
+                    <mask id="path-209-inside-104_4940_405682" fill="white">
+                        <path d="M832 384H896V448H832V384Z" />
+                    </mask>
+                    <path
+                        d="M896 448V449H897V448H896ZM895 384V448H897V384H895ZM896 447H832V449H896V447Z"
+                        fill="#D0D5DD"
+                        mask="url(#path-209-inside-104_4940_405682)"
+                    />
+                    <mask id="path-211-inside-105_4940_405682" fill="white">
+                        <path d="M896 384H960V448H896V384Z" />
+                    </mask>
+                    <path
+                        d="M960 448V449H961V448H960ZM959 384V448H961V384H959ZM960 447H896V449H960V447Z"
+                        fill="#D0D5DD"
+                        mask="url(#path-211-inside-105_4940_405682)"
+                    />
+                    <mask id="path-213-inside-106_4940_405682" fill="white">
+                        <path d="M0 448H64V512H0V448Z" />
+                    </mask>
+                    <path d="M64 512V513H65V512H64ZM63 448V512H65V448H63ZM64 511H0V513H64V511Z" fill="#D0D5DD" mask="url(#path-213-inside-106_4940_405682)" />
+                    <mask id="path-215-inside-107_4940_405682" fill="white">
+                        <path d="M64 448H128V512H64V448Z" />
+                    </mask>
+                    <path
+                        d="M128 512V513H129V512H128ZM127 448V512H129V448H127ZM128 511H64V513H128V511Z"
+                        fill="#D0D5DD"
+                        mask="url(#path-215-inside-107_4940_405682)"
+                    />
+                    <mask id="path-217-inside-108_4940_405682" fill="white">
+                        <path d="M128 448H192V512H128V448Z" />
+                    </mask>
+                    <path
+                        d="M192 512V513H193V512H192ZM191 448V512H193V448H191ZM192 511H128V513H192V511Z"
+                        fill="#D0D5DD"
+                        mask="url(#path-217-inside-108_4940_405682)"
+                    />
+                    <mask id="path-219-inside-109_4940_405682" fill="white">
+                        <path d="M192 448H256V512H192V448Z" />
+                    </mask>
+                    <path
+                        d="M256 512V513H257V512H256ZM255 448V512H257V448H255ZM256 511H192V513H256V511Z"
+                        fill="#D0D5DD"
+                        mask="url(#path-219-inside-109_4940_405682)"
+                    />
+                    <mask id="path-221-inside-110_4940_405682" fill="white">
+                        <path d="M256 448H320V512H256V448Z" />
+                    </mask>
+                    <path d="M256 448H320V512H256V448Z" fill="#F2F4F7" />
+                    <path
+                        d="M320 512V513H321V512H320ZM319 448V512H321V448H319ZM320 511H256V513H320V511Z"
+                        fill="#D0D5DD"
+                        mask="url(#path-221-inside-110_4940_405682)"
+                    />
+                    <mask id="path-223-inside-111_4940_405682" fill="white">
+                        <path d="M320 448H384V512H320V448Z" />
+                    </mask>
+                    <path
+                        d="M384 512V513H385V512H384ZM383 448V512H385V448H383ZM384 511H320V513H384V511Z"
+                        fill="#D0D5DD"
+                        mask="url(#path-223-inside-111_4940_405682)"
+                    />
+                    <mask id="path-225-inside-112_4940_405682" fill="white">
+                        <path d="M384 448H448V512H384V448Z" />
+                    </mask>
+                    <path
+                        d="M448 512V513H449V512H448ZM447 448V512H449V448H447ZM448 511H384V513H448V511Z"
+                        fill="#D0D5DD"
+                        mask="url(#path-225-inside-112_4940_405682)"
+                    />
+                    <mask id="path-227-inside-113_4940_405682" fill="white">
+                        <path d="M448 448H512V512H448V448Z" />
+                    </mask>
+                    <path
+                        d="M512 512V513H513V512H512ZM511 448V512H513V448H511ZM512 511H448V513H512V511Z"
+                        fill="#D0D5DD"
+                        mask="url(#path-227-inside-113_4940_405682)"
+                    />
+                    <mask id="path-229-inside-114_4940_405682" fill="white">
+                        <path d="M512 448H576V512H512V448Z" />
+                    </mask>
+                    <path
+                        d="M576 512V513H577V512H576ZM575 448V512H577V448H575ZM576 511H512V513H576V511Z"
+                        fill="#D0D5DD"
+                        mask="url(#path-229-inside-114_4940_405682)"
+                    />
+                    <mask id="path-231-inside-115_4940_405682" fill="white">
+                        <path d="M576 448H640V512H576V448Z" />
+                    </mask>
+                    <path
+                        d="M640 512V513H641V512H640ZM639 448V512H641V448H639ZM640 511H576V513H640V511Z"
+                        fill="#D0D5DD"
+                        mask="url(#path-231-inside-115_4940_405682)"
+                    />
+                    <mask id="path-233-inside-116_4940_405682" fill="white">
+                        <path d="M640 448H704V512H640V448Z" />
+                    </mask>
+                    <path d="M640 448H704V512H640V448Z" fill="#F2F4F7" />
+                    <path
+                        d="M704 512V513H705V512H704ZM703 448V512H705V448H703ZM704 511H640V513H704V511Z"
+                        fill="#D0D5DD"
+                        mask="url(#path-233-inside-116_4940_405682)"
+                    />
+                    <mask id="path-235-inside-117_4940_405682" fill="white">
+                        <path d="M704 448H768V512H704V448Z" />
+                    </mask>
+                    <path
+                        d="M768 512V513H769V512H768ZM767 448V512H769V448H767ZM768 511H704V513H768V511Z"
+                        fill="#D0D5DD"
+                        mask="url(#path-235-inside-117_4940_405682)"
+                    />
+                    <mask id="path-237-inside-118_4940_405682" fill="white">
+                        <path d="M768 448H832V512H768V448Z" />
+                    </mask>
+                    <path
+                        d="M832 512V513H833V512H832ZM831 448V512H833V448H831ZM832 511H768V513H832V511Z"
+                        fill="#D0D5DD"
+                        mask="url(#path-237-inside-118_4940_405682)"
+                    />
+                    <mask id="path-239-inside-119_4940_405682" fill="white">
+                        <path d="M832 448H896V512H832V448Z" />
+                    </mask>
+                    <path
+                        d="M896 512V513H897V512H896ZM895 448V512H897V448H895ZM896 511H832V513H896V511Z"
+                        fill="#D0D5DD"
+                        mask="url(#path-239-inside-119_4940_405682)"
+                    />
+                    <mask id="path-241-inside-120_4940_405682" fill="white">
+                        <path d="M896 448H960V512H896V448Z" />
+                    </mask>
+                    <path
+                        d="M960 512V513H961V512H960ZM959 448V512H961V448H959ZM960 511H896V513H960V511Z"
+                        fill="#D0D5DD"
+                        mask="url(#path-241-inside-120_4940_405682)"
+                    />
+                    <mask id="path-243-inside-121_4940_405682" fill="white">
+                        <path d="M0 512H64V576H0V512Z" />
+                    </mask>
+                    <path d="M64 576V577H65V576H64ZM63 512V576H65V512H63ZM64 575H0V577H64V575Z" fill="#D0D5DD" mask="url(#path-243-inside-121_4940_405682)" />
+                    <mask id="path-245-inside-122_4940_405682" fill="white">
+                        <path d="M64 512H128V576H64V512Z" />
+                    </mask>
+                    <path
+                        d="M128 576V577H129V576H128ZM127 512V576H129V512H127ZM128 575H64V577H128V575Z"
+                        fill="#D0D5DD"
+                        mask="url(#path-245-inside-122_4940_405682)"
+                    />
+                    <mask id="path-247-inside-123_4940_405682" fill="white">
+                        <path d="M128 512H192V576H128V512Z" />
+                    </mask>
+                    <path d="M128 512H192V576H128V512Z" fill="#F2F4F7" />
+                    <path
+                        d="M192 576V577H193V576H192ZM191 512V576H193V512H191ZM192 575H128V577H192V575Z"
+                        fill="#D0D5DD"
+                        mask="url(#path-247-inside-123_4940_405682)"
+                    />
+                    <mask id="path-249-inside-124_4940_405682" fill="white">
+                        <path d="M192 512H256V576H192V512Z" />
+                    </mask>
+                    <path
+                        d="M256 576V577H257V576H256ZM255 512V576H257V512H255ZM256 575H192V577H256V575Z"
+                        fill="#D0D5DD"
+                        mask="url(#path-249-inside-124_4940_405682)"
+                    />
+                    <mask id="path-251-inside-125_4940_405682" fill="white">
+                        <path d="M256 512H320V576H256V512Z" />
+                    </mask>
+                    <path
+                        d="M320 576V577H321V576H320ZM319 512V576H321V512H319ZM320 575H256V577H320V575Z"
+                        fill="#D0D5DD"
+                        mask="url(#path-251-inside-125_4940_405682)"
+                    />
+                    <mask id="path-253-inside-126_4940_405682" fill="white">
+                        <path d="M320 512H384V576H320V512Z" />
+                    </mask>
+                    <path
+                        d="M384 576V577H385V576H384ZM383 512V576H385V512H383ZM384 575H320V577H384V575Z"
+                        fill="#D0D5DD"
+                        mask="url(#path-253-inside-126_4940_405682)"
+                    />
+                    <mask id="path-255-inside-127_4940_405682" fill="white">
+                        <path d="M384 512H448V576H384V512Z" />
+                    </mask>
+                    <path
+                        d="M448 576V577H449V576H448ZM447 512V576H449V512H447ZM448 575H384V577H448V575Z"
+                        fill="#D0D5DD"
+                        mask="url(#path-255-inside-127_4940_405682)"
+                    />
+                    <mask id="path-257-inside-128_4940_405682" fill="white">
+                        <path d="M448 512H512V576H448V512Z" />
+                    </mask>
+                    <path
+                        d="M512 576V577H513V576H512ZM511 512V576H513V512H511ZM512 575H448V577H512V575Z"
+                        fill="#D0D5DD"
+                        mask="url(#path-257-inside-128_4940_405682)"
+                    />
+                    <mask id="path-259-inside-129_4940_405682" fill="white">
+                        <path d="M512 512H576V576H512V512Z" />
+                    </mask>
+                    <path
+                        d="M576 576V577H577V576H576ZM575 512V576H577V512H575ZM576 575H512V577H576V575Z"
+                        fill="#D0D5DD"
+                        mask="url(#path-259-inside-129_4940_405682)"
+                    />
+                    <mask id="path-261-inside-130_4940_405682" fill="white">
+                        <path d="M576 512H640V576H576V512Z" />
+                    </mask>
+                    <path
+                        d="M640 576V577H641V576H640ZM639 512V576H641V512H639ZM640 575H576V577H640V575Z"
+                        fill="#D0D5DD"
+                        mask="url(#path-261-inside-130_4940_405682)"
+                    />
+                    <mask id="path-263-inside-131_4940_405682" fill="white">
+                        <path d="M640 512H704V576H640V512Z" />
+                    </mask>
+                    <path
+                        d="M704 576V577H705V576H704ZM703 512V576H705V512H703ZM704 575H640V577H704V575Z"
+                        fill="#D0D5DD"
+                        mask="url(#path-263-inside-131_4940_405682)"
+                    />
+                    <mask id="path-265-inside-132_4940_405682" fill="white">
+                        <path d="M704 512H768V576H704V512Z" />
+                    </mask>
+                    <path
+                        d="M768 576V577H769V576H768ZM767 512V576H769V512H767ZM768 575H704V577H768V575Z"
+                        fill="#D0D5DD"
+                        mask="url(#path-265-inside-132_4940_405682)"
+                    />
+                    <mask id="path-267-inside-133_4940_405682" fill="white">
+                        <path d="M768 512H832V576H768V512Z" />
+                    </mask>
+                    <path
+                        d="M832 576V577H833V576H832ZM831 512V576H833V512H831ZM832 575H768V577H832V575Z"
+                        fill="#D0D5DD"
+                        mask="url(#path-267-inside-133_4940_405682)"
+                    />
+                    <mask id="path-269-inside-134_4940_405682" fill="white">
+                        <path d="M832 512H896V576H832V512Z" />
+                    </mask>
+                    <path d="M832 512H896V576H832V512Z" fill="#F2F4F7" />
+                    <path
+                        d="M896 576V577H897V576H896ZM895 512V576H897V512H895ZM896 575H832V577H896V575Z"
+                        fill="#D0D5DD"
+                        mask="url(#path-269-inside-134_4940_405682)"
+                    />
+                    <mask id="path-271-inside-135_4940_405682" fill="white">
+                        <path d="M896 512H960V576H896V512Z" />
+                    </mask>
+                    <path
+                        d="M960 576V577H961V576H960ZM959 512V576H961V512H959ZM960 575H896V577H960V575Z"
+                        fill="#D0D5DD"
+                        mask="url(#path-271-inside-135_4940_405682)"
+                    />
+                    <mask id="path-273-inside-136_4940_405682" fill="white">
+                        <path d="M0 576H64V640H0V576Z" />
+                    </mask>
+                    <path d="M64 640V641H65V640H64ZM63 576V640H65V576H63ZM64 639H0V641H64V639Z" fill="#D0D5DD" mask="url(#path-273-inside-136_4940_405682)" />
+                    <mask id="path-275-inside-137_4940_405682" fill="white">
+                        <path d="M64 576H128V640H64V576Z" />
+                    </mask>
+                    <path
+                        d="M128 640V641H129V640H128ZM127 576V640H129V576H127ZM128 639H64V641H128V639Z"
+                        fill="#D0D5DD"
+                        mask="url(#path-275-inside-137_4940_405682)"
+                    />
+                    <mask id="path-277-inside-138_4940_405682" fill="white">
+                        <path d="M128 576H192V640H128V576Z" />
+                    </mask>
+                    <path
+                        d="M192 640V641H193V640H192ZM191 576V640H193V576H191ZM192 639H128V641H192V639Z"
+                        fill="#D0D5DD"
+                        mask="url(#path-277-inside-138_4940_405682)"
+                    />
+                    <mask id="path-279-inside-139_4940_405682" fill="white">
+                        <path d="M192 576H256V640H192V576Z" />
+                    </mask>
+                    <path
+                        d="M256 640V641H257V640H256ZM255 576V640H257V576H255ZM256 639H192V641H256V639Z"
+                        fill="#D0D5DD"
+                        mask="url(#path-279-inside-139_4940_405682)"
+                    />
+                    <mask id="path-281-inside-140_4940_405682" fill="white">
+                        <path d="M256 576H320V640H256V576Z" />
+                    </mask>
+                    <path
+                        d="M320 640V641H321V640H320ZM319 576V640H321V576H319ZM320 639H256V641H320V639Z"
+                        fill="#D0D5DD"
+                        mask="url(#path-281-inside-140_4940_405682)"
+                    />
+                    <mask id="path-283-inside-141_4940_405682" fill="white">
+                        <path d="M320 576H384V640H320V576Z" />
+                    </mask>
+                    <path
+                        d="M384 640V641H385V640H384ZM383 576V640H385V576H383ZM384 639H320V641H384V639Z"
+                        fill="#D0D5DD"
+                        mask="url(#path-283-inside-141_4940_405682)"
+                    />
+                    <mask id="path-285-inside-142_4940_405682" fill="white">
+                        <path d="M384 576H448V640H384V576Z" />
+                    </mask>
+                    <path d="M384 576H448V640H384V576Z" fill="#F2F4F7" />
+                    <path
+                        d="M448 640V641H449V640H448ZM447 576V640H449V576H447ZM448 639H384V641H448V639Z"
+                        fill="#D0D5DD"
+                        mask="url(#path-285-inside-142_4940_405682)"
+                    />
+                    <mask id="path-287-inside-143_4940_405682" fill="white">
+                        <path d="M448 576H512V640H448V576Z" />
+                    </mask>
+                    <path
+                        d="M512 640V641H513V640H512ZM511 576V640H513V576H511ZM512 639H448V641H512V639Z"
+                        fill="#D0D5DD"
+                        mask="url(#path-287-inside-143_4940_405682)"
+                    />
+                    <mask id="path-289-inside-144_4940_405682" fill="white">
+                        <path d="M512 576H576V640H512V576Z" />
+                    </mask>
+                    <path
+                        d="M576 640V641H577V640H576ZM575 576V640H577V576H575ZM576 639H512V641H576V639Z"
+                        fill="#D0D5DD"
+                        mask="url(#path-289-inside-144_4940_405682)"
+                    />
+                    <mask id="path-291-inside-145_4940_405682" fill="white">
+                        <path d="M576 576H640V640H576V576Z" />
+                    </mask>
+                    <path
+                        d="M640 640V641H641V640H640ZM639 576V640H641V576H639ZM640 639H576V641H640V639Z"
+                        fill="#D0D5DD"
+                        mask="url(#path-291-inside-145_4940_405682)"
+                    />
+                    <mask id="path-293-inside-146_4940_405682" fill="white">
+                        <path d="M640 576H704V640H640V576Z" />
+                    </mask>
+                    <path
+                        d="M704 640V641H705V640H704ZM703 576V640H705V576H703ZM704 639H640V641H704V639Z"
+                        fill="#D0D5DD"
+                        mask="url(#path-293-inside-146_4940_405682)"
+                    />
+                    <mask id="path-295-inside-147_4940_405682" fill="white">
+                        <path d="M704 576H768V640H704V576Z" />
+                    </mask>
+                    <path
+                        d="M768 640V641H769V640H768ZM767 576V640H769V576H767ZM768 639H704V641H768V639Z"
+                        fill="#D0D5DD"
+                        mask="url(#path-295-inside-147_4940_405682)"
+                    />
+                    <mask id="path-297-inside-148_4940_405682" fill="white">
+                        <path d="M768 576H832V640H768V576Z" />
+                    </mask>
+                    <path
+                        d="M832 640V641H833V640H832ZM831 576V640H833V576H831ZM832 639H768V641H832V639Z"
+                        fill="#D0D5DD"
+                        mask="url(#path-297-inside-148_4940_405682)"
+                    />
+                    <mask id="path-299-inside-149_4940_405682" fill="white">
+                        <path d="M832 576H896V640H832V576Z" />
+                    </mask>
+                    <path
+                        d="M896 640V641H897V640H896ZM895 576V640H897V576H895ZM896 639H832V641H896V639Z"
+                        fill="#D0D5DD"
+                        mask="url(#path-299-inside-149_4940_405682)"
+                    />
+                    <mask id="path-301-inside-150_4940_405682" fill="white">
+                        <path d="M896 576H960V640H896V576Z" />
+                    </mask>
+                    <path
+                        d="M960 640V641H961V640H960ZM959 576V640H961V576H959ZM960 639H896V641H960V639Z"
+                        fill="#D0D5DD"
+                        mask="url(#path-301-inside-150_4940_405682)"
+                    />
+                    <mask id="path-303-inside-151_4940_405682" fill="white">
+                        <path d="M0 640H64V704H0V640Z" />
+                    </mask>
+                    <path d="M64 704V705H65V704H64ZM63 640V704H65V640H63ZM64 703H0V705H64V703Z" fill="#D0D5DD" mask="url(#path-303-inside-151_4940_405682)" />
+                    <mask id="path-305-inside-152_4940_405682" fill="white">
+                        <path d="M64 640H128V704H64V640Z" />
+                    </mask>
+                    <path
+                        d="M128 704V705H129V704H128ZM127 640V704H129V640H127ZM128 703H64V705H128V703Z"
+                        fill="#D0D5DD"
+                        mask="url(#path-305-inside-152_4940_405682)"
+                    />
+                    <mask id="path-307-inside-153_4940_405682" fill="white">
+                        <path d="M128 640H192V704H128V640Z" />
+                    </mask>
+                    <path
+                        d="M192 704V705H193V704H192ZM191 640V704H193V640H191ZM192 703H128V705H192V703Z"
+                        fill="#D0D5DD"
+                        mask="url(#path-307-inside-153_4940_405682)"
+                    />
+                    <mask id="path-309-inside-154_4940_405682" fill="white">
+                        <path d="M192 640H256V704H192V640Z" />
+                    </mask>
+                    <path
+                        d="M256 704V705H257V704H256ZM255 640V704H257V640H255ZM256 703H192V705H256V703Z"
+                        fill="#D0D5DD"
+                        mask="url(#path-309-inside-154_4940_405682)"
+                    />
+                    <mask id="path-311-inside-155_4940_405682" fill="white">
+                        <path d="M256 640H320V704H256V640Z" />
+                    </mask>
+                    <path d="M256 640H320V704H256V640Z" fill="#F2F4F7" />
+                    <path
+                        d="M320 704V705H321V704H320ZM319 640V704H321V640H319ZM320 703H256V705H320V703Z"
+                        fill="#D0D5DD"
+                        mask="url(#path-311-inside-155_4940_405682)"
+                    />
+                    <mask id="path-313-inside-156_4940_405682" fill="white">
+                        <path d="M320 640H384V704H320V640Z" />
+                    </mask>
+                    <path
+                        d="M384 704V705H385V704H384ZM383 640V704H385V640H383ZM384 703H320V705H384V703Z"
+                        fill="#D0D5DD"
+                        mask="url(#path-313-inside-156_4940_405682)"
+                    />
+                    <mask id="path-315-inside-157_4940_405682" fill="white">
+                        <path d="M384 640H448V704H384V640Z" />
+                    </mask>
+                    <path
+                        d="M448 704V705H449V704H448ZM447 640V704H449V640H447ZM448 703H384V705H448V703Z"
+                        fill="#D0D5DD"
+                        mask="url(#path-315-inside-157_4940_405682)"
+                    />
+                    <mask id="path-317-inside-158_4940_405682" fill="white">
+                        <path d="M448 640H512V704H448V640Z" />
+                    </mask>
+                    <path
+                        d="M512 704V705H513V704H512ZM511 640V704H513V640H511ZM512 703H448V705H512V703Z"
+                        fill="#D0D5DD"
+                        mask="url(#path-317-inside-158_4940_405682)"
+                    />
+                    <mask id="path-319-inside-159_4940_405682" fill="white">
+                        <path d="M512 640H576V704H512V640Z" />
+                    </mask>
+                    <path
+                        d="M576 704V705H577V704H576ZM575 640V704H577V640H575ZM576 703H512V705H576V703Z"
+                        fill="#D0D5DD"
+                        mask="url(#path-319-inside-159_4940_405682)"
+                    />
+                    <mask id="path-321-inside-160_4940_405682" fill="white">
+                        <path d="M576 640H640V704H576V640Z" />
+                    </mask>
+                    <path
+                        d="M640 704V705H641V704H640ZM639 640V704H641V640H639ZM640 703H576V705H640V703Z"
+                        fill="#D0D5DD"
+                        mask="url(#path-321-inside-160_4940_405682)"
+                    />
+                    <mask id="path-323-inside-161_4940_405682" fill="white">
+                        <path d="M640 640H704V704H640V640Z" />
+                    </mask>
+                    <path
+                        d="M704 704V705H705V704H704ZM703 640V704H705V640H703ZM704 703H640V705H704V703Z"
+                        fill="#D0D5DD"
+                        mask="url(#path-323-inside-161_4940_405682)"
+                    />
+                    <mask id="path-325-inside-162_4940_405682" fill="white">
+                        <path d="M704 640H768V704H704V640Z" />
+                    </mask>
+                    <path d="M704 640H768V704H704V640Z" fill="#F2F4F7" />
+                    <path
+                        d="M768 704V705H769V704H768ZM767 640V704H769V640H767ZM768 703H704V705H768V703Z"
+                        fill="#D0D5DD"
+                        mask="url(#path-325-inside-162_4940_405682)"
+                    />
+                    <mask id="path-327-inside-163_4940_405682" fill="white">
+                        <path d="M768 640H832V704H768V640Z" />
+                    </mask>
+                    <path
+                        d="M832 704V705H833V704H832ZM831 640V704H833V640H831ZM832 703H768V705H832V703Z"
+                        fill="#D0D5DD"
+                        mask="url(#path-327-inside-163_4940_405682)"
+                    />
+                    <mask id="path-329-inside-164_4940_405682" fill="white">
+                        <path d="M832 640H896V704H832V640Z" />
+                    </mask>
+                    <path
+                        d="M896 704V705H897V704H896ZM895 640V704H897V640H895ZM896 703H832V705H896V703Z"
+                        fill="#D0D5DD"
+                        mask="url(#path-329-inside-164_4940_405682)"
+                    />
+                    <mask id="path-331-inside-165_4940_405682" fill="white">
+                        <path d="M896 640H960V704H896V640Z" />
+                    </mask>
+                    <path
+                        d="M960 704V705H961V704H960ZM959 640V704H961V640H959ZM960 703H896V705H960V703Z"
+                        fill="#D0D5DD"
+                        mask="url(#path-331-inside-165_4940_405682)"
+                    />
+                    <mask id="path-333-inside-166_4940_405682" fill="white">
+                        <path d="M0 704H64V768H0V704Z" />
+                    </mask>
+                    <path d="M64 768V769H65V768H64ZM63 704V768H65V704H63ZM64 767H0V769H64V767Z" fill="#D0D5DD" mask="url(#path-333-inside-166_4940_405682)" />
+                    <mask id="path-335-inside-167_4940_405682" fill="white">
+                        <path d="M64 704H128V768H64V704Z" />
+                    </mask>
+                    <path
+                        d="M128 768V769H129V768H128ZM127 704V768H129V704H127ZM128 767H64V769H128V767Z"
+                        fill="#D0D5DD"
+                        mask="url(#path-335-inside-167_4940_405682)"
+                    />
+                    <mask id="path-337-inside-168_4940_405682" fill="white">
+                        <path d="M128 704H192V768H128V704Z" />
+                    </mask>
+                    <path
+                        d="M192 768V769H193V768H192ZM191 704V768H193V704H191ZM192 767H128V769H192V767Z"
+                        fill="#D0D5DD"
+                        mask="url(#path-337-inside-168_4940_405682)"
+                    />
+                    <mask id="path-339-inside-169_4940_405682" fill="white">
+                        <path d="M192 704H256V768H192V704Z" />
+                    </mask>
+                    <path
+                        d="M256 768V769H257V768H256ZM255 704V768H257V704H255ZM256 767H192V769H256V767Z"
+                        fill="#D0D5DD"
+                        mask="url(#path-339-inside-169_4940_405682)"
+                    />
+                    <mask id="path-341-inside-170_4940_405682" fill="white">
+                        <path d="M256 704H320V768H256V704Z" />
+                    </mask>
+                    <path
+                        d="M320 768V769H321V768H320ZM319 704V768H321V704H319ZM320 767H256V769H320V767Z"
+                        fill="#D0D5DD"
+                        mask="url(#path-341-inside-170_4940_405682)"
+                    />
+                    <mask id="path-343-inside-171_4940_405682" fill="white">
+                        <path d="M320 704H384V768H320V704Z" />
+                    </mask>
+                    <path
+                        d="M384 768V769H385V768H384ZM383 704V768H385V704H383ZM384 767H320V769H384V767Z"
+                        fill="#D0D5DD"
+                        mask="url(#path-343-inside-171_4940_405682)"
+                    />
+                    <mask id="path-345-inside-172_4940_405682" fill="white">
+                        <path d="M384 704H448V768H384V704Z" />
+                    </mask>
+                    <path
+                        d="M448 768V769H449V768H448ZM447 704V768H449V704H447ZM448 767H384V769H448V767Z"
+                        fill="#D0D5DD"
+                        mask="url(#path-345-inside-172_4940_405682)"
+                    />
+                    <mask id="path-347-inside-173_4940_405682" fill="white">
+                        <path d="M448 704H512V768H448V704Z" />
+                    </mask>
+                    <path
+                        d="M512 768V769H513V768H512ZM511 704V768H513V704H511ZM512 767H448V769H512V767Z"
+                        fill="#D0D5DD"
+                        mask="url(#path-347-inside-173_4940_405682)"
+                    />
+                    <mask id="path-349-inside-174_4940_405682" fill="white">
+                        <path d="M512 704H576V768H512V704Z" />
+                    </mask>
+                    <path d="M512 704H576V768H512V704Z" fill="#F2F4F7" />
+                    <path
+                        d="M576 768V769H577V768H576ZM575 704V768H577V704H575ZM576 767H512V769H576V767Z"
+                        fill="#D0D5DD"
+                        mask="url(#path-349-inside-174_4940_405682)"
+                    />
+                    <mask id="path-351-inside-175_4940_405682" fill="white">
+                        <path d="M576 704H640V768H576V704Z" />
+                    </mask>
+                    <path
+                        d="M640 768V769H641V768H640ZM639 704V768H641V704H639ZM640 767H576V769H640V767Z"
+                        fill="#D0D5DD"
+                        mask="url(#path-351-inside-175_4940_405682)"
+                    />
+                    <mask id="path-353-inside-176_4940_405682" fill="white">
+                        <path d="M640 704H704V768H640V704Z" />
+                    </mask>
+                    <path
+                        d="M704 768V769H705V768H704ZM703 704V768H705V704H703ZM704 767H640V769H704V767Z"
+                        fill="#D0D5DD"
+                        mask="url(#path-353-inside-176_4940_405682)"
+                    />
+                    <mask id="path-355-inside-177_4940_405682" fill="white">
+                        <path d="M704 704H768V768H704V704Z" />
+                    </mask>
+                    <path
+                        d="M768 768V769H769V768H768ZM767 704V768H769V704H767ZM768 767H704V769H768V767Z"
+                        fill="#D0D5DD"
+                        mask="url(#path-355-inside-177_4940_405682)"
+                    />
+                    <mask id="path-357-inside-178_4940_405682" fill="white">
+                        <path d="M768 704H832V768H768V704Z" />
+                    </mask>
+                    <path
+                        d="M832 768V769H833V768H832ZM831 704V768H833V704H831ZM832 767H768V769H832V767Z"
+                        fill="#D0D5DD"
+                        mask="url(#path-357-inside-178_4940_405682)"
+                    />
+                    <mask id="path-359-inside-179_4940_405682" fill="white">
+                        <path d="M832 704H896V768H832V704Z" />
+                    </mask>
+                    <path d="M832 704H896V768H832V704Z" fill="#F2F4F7" />
+                    <path
+                        d="M896 768V769H897V768H896ZM895 704V768H897V704H895ZM896 767H832V769H896V767Z"
+                        fill="#D0D5DD"
+                        mask="url(#path-359-inside-179_4940_405682)"
+                    />
+                    <mask id="path-361-inside-180_4940_405682" fill="white">
+                        <path d="M896 704H960V768H896V704Z" />
+                    </mask>
+                    <path
+                        d="M960 768V769H961V768H960ZM959 704V768H961V704H959ZM960 767H896V769H960V767Z"
+                        fill="#D0D5DD"
+                        mask="url(#path-361-inside-180_4940_405682)"
+                    />
+                    <mask id="path-363-inside-181_4940_405682" fill="white">
+                        <path d="M0 768H64V832H0V768Z" />
+                    </mask>
+                    <path d="M64 832V833H65V832H64ZM63 768V832H65V768H63ZM64 831H0V833H64V831Z" fill="#D0D5DD" mask="url(#path-363-inside-181_4940_405682)" />
+                    <mask id="path-365-inside-182_4940_405682" fill="white">
+                        <path d="M64 768H128V832H64V768Z" />
+                    </mask>
+                    <path
+                        d="M128 832V833H129V832H128ZM127 768V832H129V768H127ZM128 831H64V833H128V831Z"
+                        fill="#D0D5DD"
+                        mask="url(#path-365-inside-182_4940_405682)"
+                    />
+                    <mask id="path-367-inside-183_4940_405682" fill="white">
+                        <path d="M128 768H192V832H128V768Z" />
+                    </mask>
+                    <path
+                        d="M192 832V833H193V832H192ZM191 768V832H193V768H191ZM192 831H128V833H192V831Z"
+                        fill="#D0D5DD"
+                        mask="url(#path-367-inside-183_4940_405682)"
+                    />
+                    <mask id="path-369-inside-184_4940_405682" fill="white">
+                        <path d="M192 768H256V832H192V768Z" />
+                    </mask>
+                    <path
+                        d="M256 832V833H257V832H256ZM255 768V832H257V768H255ZM256 831H192V833H256V831Z"
+                        fill="#D0D5DD"
+                        mask="url(#path-369-inside-184_4940_405682)"
+                    />
+                    <mask id="path-371-inside-185_4940_405682" fill="white">
+                        <path d="M256 768H320V832H256V768Z" />
+                    </mask>
+                    <path d="M256 768H320V832H256V768Z" fill="#F2F4F7" />
+                    <path
+                        d="M320 832V833H321V832H320ZM319 768V832H321V768H319ZM320 831H256V833H320V831Z"
+                        fill="#D0D5DD"
+                        mask="url(#path-371-inside-185_4940_405682)"
+                    />
+                    <mask id="path-373-inside-186_4940_405682" fill="white">
+                        <path d="M320 768H384V832H320V768Z" />
+                    </mask>
+                    <path
+                        d="M384 832V833H385V832H384ZM383 768V832H385V768H383ZM384 831H320V833H384V831Z"
+                        fill="#D0D5DD"
+                        mask="url(#path-373-inside-186_4940_405682)"
+                    />
+                    <mask id="path-375-inside-187_4940_405682" fill="white">
+                        <path d="M384 768H448V832H384V768Z" />
+                    </mask>
+                    <path
+                        d="M448 832V833H449V832H448ZM447 768V832H449V768H447ZM448 831H384V833H448V831Z"
+                        fill="#D0D5DD"
+                        mask="url(#path-375-inside-187_4940_405682)"
+                    />
+                    <mask id="path-377-inside-188_4940_405682" fill="white">
+                        <path d="M448 768H512V832H448V768Z" />
+                    </mask>
+                    <path
+                        d="M512 832V833H513V832H512ZM511 768V832H513V768H511ZM512 831H448V833H512V831Z"
+                        fill="#D0D5DD"
+                        mask="url(#path-377-inside-188_4940_405682)"
+                    />
+                    <mask id="path-379-inside-189_4940_405682" fill="white">
+                        <path d="M512 768H576V832H512V768Z" />
+                    </mask>
+                    <path
+                        d="M576 832V833H577V832H576ZM575 768V832H577V768H575ZM576 831H512V833H576V831Z"
+                        fill="#D0D5DD"
+                        mask="url(#path-379-inside-189_4940_405682)"
+                    />
+                    <mask id="path-381-inside-190_4940_405682" fill="white">
+                        <path d="M576 768H640V832H576V768Z" />
+                    </mask>
+                    <path
+                        d="M640 832V833H641V832H640ZM639 768V832H641V768H639ZM640 831H576V833H640V831Z"
+                        fill="#D0D5DD"
+                        mask="url(#path-381-inside-190_4940_405682)"
+                    />
+                    <mask id="path-383-inside-191_4940_405682" fill="white">
+                        <path d="M640 768H704V832H640V768Z" />
+                    </mask>
+                    <path
+                        d="M704 832V833H705V832H704ZM703 768V832H705V768H703ZM704 831H640V833H704V831Z"
+                        fill="#D0D5DD"
+                        mask="url(#path-383-inside-191_4940_405682)"
+                    />
+                    <mask id="path-385-inside-192_4940_405682" fill="white">
+                        <path d="M704 768H768V832H704V768Z" />
+                    </mask>
+                    <path
+                        d="M768 832V833H769V832H768ZM767 768V832H769V768H767ZM768 831H704V833H768V831Z"
+                        fill="#D0D5DD"
+                        mask="url(#path-385-inside-192_4940_405682)"
+                    />
+                    <mask id="path-387-inside-193_4940_405682" fill="white">
+                        <path d="M768 768H832V832H768V768Z" />
+                    </mask>
+                    <path
+                        d="M832 832V833H833V832H832ZM831 768V832H833V768H831ZM832 831H768V833H832V831Z"
+                        fill="#D0D5DD"
+                        mask="url(#path-387-inside-193_4940_405682)"
+                    />
+                    <mask id="path-389-inside-194_4940_405682" fill="white">
+                        <path d="M832 768H896V832H832V768Z" />
+                    </mask>
+                    <path
+                        d="M896 832V833H897V832H896ZM895 768V832H897V768H895ZM896 831H832V833H896V831Z"
+                        fill="#D0D5DD"
+                        mask="url(#path-389-inside-194_4940_405682)"
+                    />
+                    <mask id="path-391-inside-195_4940_405682" fill="white">
+                        <path d="M896 768H960V832H896V768Z" />
+                    </mask>
+                    <path
+                        d="M960 832V833H961V832H960ZM959 768V832H961V768H959ZM960 831H896V833H960V831Z"
+                        fill="#D0D5DD"
+                        mask="url(#path-391-inside-195_4940_405682)"
+                    />
+                    <mask id="path-393-inside-196_4940_405682" fill="white">
+                        <path d="M0 832H64V896H0V832Z" />
+                    </mask>
+                    <path d="M64 896V897H65V896H64ZM63 832V896H65V832H63ZM64 895H0V897H64V895Z" fill="#D0D5DD" mask="url(#path-393-inside-196_4940_405682)" />
+                    <mask id="path-395-inside-197_4940_405682" fill="white">
+                        <path d="M64 832H128V896H64V832Z" />
+                    </mask>
+                    <path d="M64 832H128V896H64V832Z" fill="#F2F4F7" />
+                    <path
+                        d="M128 896V897H129V896H128ZM127 832V896H129V832H127ZM128 895H64V897H128V895Z"
+                        fill="#D0D5DD"
+                        mask="url(#path-395-inside-197_4940_405682)"
+                    />
+                    <mask id="path-397-inside-198_4940_405682" fill="white">
+                        <path d="M128 832H192V896H128V832Z" />
+                    </mask>
+                    <path
+                        d="M192 896V897H193V896H192ZM191 832V896H193V832H191ZM192 895H128V897H192V895Z"
+                        fill="#D0D5DD"
+                        mask="url(#path-397-inside-198_4940_405682)"
+                    />
+                    <mask id="path-399-inside-199_4940_405682" fill="white">
+                        <path d="M192 832H256V896H192V832Z" />
+                    </mask>
+                    <path
+                        d="M256 896V897H257V896H256ZM255 832V896H257V832H255ZM256 895H192V897H256V895Z"
+                        fill="#D0D5DD"
+                        mask="url(#path-399-inside-199_4940_405682)"
+                    />
+                    <mask id="path-401-inside-200_4940_405682" fill="white">
+                        <path d="M256 832H320V896H256V832Z" />
+                    </mask>
+                    <path
+                        d="M320 896V897H321V896H320ZM319 832V896H321V832H319ZM320 895H256V897H320V895Z"
+                        fill="#D0D5DD"
+                        mask="url(#path-401-inside-200_4940_405682)"
+                    />
+                    <mask id="path-403-inside-201_4940_405682" fill="white">
+                        <path d="M320 832H384V896H320V832Z" />
+                    </mask>
+                    <path
+                        d="M384 896V897H385V896H384ZM383 832V896H385V832H383ZM384 895H320V897H384V895Z"
+                        fill="#D0D5DD"
+                        mask="url(#path-403-inside-201_4940_405682)"
+                    />
+                    <mask id="path-405-inside-202_4940_405682" fill="white">
+                        <path d="M384 832H448V896H384V832Z" />
+                    </mask>
+                    <path
+                        d="M448 896V897H449V896H448ZM447 832V896H449V832H447ZM448 895H384V897H448V895Z"
+                        fill="#D0D5DD"
+                        mask="url(#path-405-inside-202_4940_405682)"
+                    />
+                    <mask id="path-407-inside-203_4940_405682" fill="white">
+                        <path d="M448 832H512V896H448V832Z" />
+                    </mask>
+                    <path
+                        d="M512 896V897H513V896H512ZM511 832V896H513V832H511ZM512 895H448V897H512V895Z"
+                        fill="#D0D5DD"
+                        mask="url(#path-407-inside-203_4940_405682)"
+                    />
+                    <mask id="path-409-inside-204_4940_405682" fill="white">
+                        <path d="M512 832H576V896H512V832Z" />
+                    </mask>
+                    <path
+                        d="M576 896V897H577V896H576ZM575 832V896H577V832H575ZM576 895H512V897H576V895Z"
+                        fill="#D0D5DD"
+                        mask="url(#path-409-inside-204_4940_405682)"
+                    />
+                    <mask id="path-411-inside-205_4940_405682" fill="white">
+                        <path d="M576 832H640V896H576V832Z" />
+                    </mask>
+                    <path
+                        d="M640 896V897H641V896H640ZM639 832V896H641V832H639ZM640 895H576V897H640V895Z"
+                        fill="#D0D5DD"
+                        mask="url(#path-411-inside-205_4940_405682)"
+                    />
+                    <mask id="path-413-inside-206_4940_405682" fill="white">
+                        <path d="M640 832H704V896H640V832Z" />
+                    </mask>
+                    <path d="M640 832H704V896H640V832Z" fill="#F2F4F7" />
+                    <path
+                        d="M704 896V897H705V896H704ZM703 832V896H705V832H703ZM704 895H640V897H704V895Z"
+                        fill="#D0D5DD"
+                        mask="url(#path-413-inside-206_4940_405682)"
+                    />
+                    <mask id="path-415-inside-207_4940_405682" fill="white">
+                        <path d="M704 832H768V896H704V832Z" />
+                    </mask>
+                    <path
+                        d="M768 896V897H769V896H768ZM767 832V896H769V832H767ZM768 895H704V897H768V895Z"
+                        fill="#D0D5DD"
+                        mask="url(#path-415-inside-207_4940_405682)"
+                    />
+                    <mask id="path-417-inside-208_4940_405682" fill="white">
+                        <path d="M768 832H832V896H768V832Z" />
+                    </mask>
+                    <path
+                        d="M832 896V897H833V896H832ZM831 832V896H833V832H831ZM832 895H768V897H832V895Z"
+                        fill="#D0D5DD"
+                        mask="url(#path-417-inside-208_4940_405682)"
+                    />
+                    <mask id="path-419-inside-209_4940_405682" fill="white">
+                        <path d="M832 832H896V896H832V832Z" />
+                    </mask>
+                    <path
+                        d="M896 896V897H897V896H896ZM895 832V896H897V832H895ZM896 895H832V897H896V895Z"
+                        fill="#D0D5DD"
+                        mask="url(#path-419-inside-209_4940_405682)"
+                    />
+                    <mask id="path-421-inside-210_4940_405682" fill="white">
+                        <path d="M896 832H960V896H896V832Z" />
+                    </mask>
+                    <path
+                        d="M960 896V897H961V896H960ZM959 832V896H961V832H959ZM960 895H896V897H960V895Z"
+                        fill="#D0D5DD"
+                        mask="url(#path-421-inside-210_4940_405682)"
+                    />
+                    <mask id="path-423-inside-211_4940_405682" fill="white">
+                        <path d="M0 896H64V960H0V896Z" />
+                    </mask>
+                    <path d="M64 960V961H65V960H64ZM63 896V960H65V896H63ZM64 959H0V961H64V959Z" fill="#D0D5DD" mask="url(#path-423-inside-211_4940_405682)" />
+                    <mask id="path-425-inside-212_4940_405682" fill="white">
+                        <path d="M64 896H128V960H64V896Z" />
+                    </mask>
+                    <path
+                        d="M128 960V961H129V960H128ZM127 896V960H129V896H127ZM128 959H64V961H128V959Z"
+                        fill="#D0D5DD"
+                        mask="url(#path-425-inside-212_4940_405682)"
+                    />
+                    <mask id="path-427-inside-213_4940_405682" fill="white">
+                        <path d="M128 896H192V960H128V896Z" />
+                    </mask>
+                    <path
+                        d="M192 960V961H193V960H192ZM191 896V960H193V896H191ZM192 959H128V961H192V959Z"
+                        fill="#D0D5DD"
+                        mask="url(#path-427-inside-213_4940_405682)"
+                    />
+                    <mask id="path-429-inside-214_4940_405682" fill="white">
+                        <path d="M192 896H256V960H192V896Z" />
+                    </mask>
+                    <path
+                        d="M256 960V961H257V960H256ZM255 896V960H257V896H255ZM256 959H192V961H256V959Z"
+                        fill="#D0D5DD"
+                        mask="url(#path-429-inside-214_4940_405682)"
+                    />
+                    <mask id="path-431-inside-215_4940_405682" fill="white">
+                        <path d="M256 896H320V960H256V896Z" />
+                    </mask>
+                    <path
+                        d="M320 960V961H321V960H320ZM319 896V960H321V896H319ZM320 959H256V961H320V959Z"
+                        fill="#D0D5DD"
+                        mask="url(#path-431-inside-215_4940_405682)"
+                    />
+                    <mask id="path-433-inside-216_4940_405682" fill="white">
+                        <path d="M320 896H384V960H320V896Z" />
+                    </mask>
+                    <path
+                        d="M384 960V961H385V960H384ZM383 896V960H385V896H383ZM384 959H320V961H384V959Z"
+                        fill="#D0D5DD"
+                        mask="url(#path-433-inside-216_4940_405682)"
+                    />
+                    <mask id="path-435-inside-217_4940_405682" fill="white">
+                        <path d="M384 896H448V960H384V896Z" />
+                    </mask>
+                    <path
+                        d="M448 960V961H449V960H448ZM447 896V960H449V896H447ZM448 959H384V961H448V959Z"
+                        fill="#D0D5DD"
+                        mask="url(#path-435-inside-217_4940_405682)"
+                    />
+                    <mask id="path-437-inside-218_4940_405682" fill="white">
+                        <path d="M448 896H512V960H448V896Z" />
+                    </mask>
+                    <path d="M448 896H512V960H448V896Z" fill="#F2F4F7" />
+                    <path
+                        d="M512 960V961H513V960H512ZM511 896V960H513V896H511ZM512 959H448V961H512V959Z"
+                        fill="#D0D5DD"
+                        mask="url(#path-437-inside-218_4940_405682)"
+                    />
+                    <mask id="path-439-inside-219_4940_405682" fill="white">
+                        <path d="M512 896H576V960H512V896Z" />
+                    </mask>
+                    <path
+                        d="M576 960V961H577V960H576ZM575 896V960H577V896H575ZM576 959H512V961H576V959Z"
+                        fill="#D0D5DD"
+                        mask="url(#path-439-inside-219_4940_405682)"
+                    />
+                    <mask id="path-441-inside-220_4940_405682" fill="white">
+                        <path d="M576 896H640V960H576V896Z" />
+                    </mask>
+                    <path
+                        d="M640 960V961H641V960H640ZM639 896V960H641V896H639ZM640 959H576V961H640V959Z"
+                        fill="#D0D5DD"
+                        mask="url(#path-441-inside-220_4940_405682)"
+                    />
+                    <mask id="path-443-inside-221_4940_405682" fill="white">
+                        <path d="M640 896H704V960H640V896Z" />
+                    </mask>
+                    <path
+                        d="M704 960V961H705V960H704ZM703 896V960H705V896H703ZM704 959H640V961H704V959Z"
+                        fill="#D0D5DD"
+                        mask="url(#path-443-inside-221_4940_405682)"
+                    />
+                    <mask id="path-445-inside-222_4940_405682" fill="white">
+                        <path d="M704 896H768V960H704V896Z" />
+                    </mask>
+                    <path
+                        d="M768 960V961H769V960H768ZM767 896V960H769V896H767ZM768 959H704V961H768V959Z"
+                        fill="#D0D5DD"
+                        mask="url(#path-445-inside-222_4940_405682)"
+                    />
+                    <mask id="path-447-inside-223_4940_405682" fill="white">
+                        <path d="M768 896H832V960H768V896Z" />
+                    </mask>
+                    <path
+                        d="M832 960V961H833V960H832ZM831 896V960H833V896H831ZM832 959H768V961H832V959Z"
+                        fill="#D0D5DD"
+                        mask="url(#path-447-inside-223_4940_405682)"
+                    />
+                    <mask id="path-449-inside-224_4940_405682" fill="white">
+                        <path d="M832 896H896V960H832V896Z" />
+                    </mask>
+                    <path
+                        d="M896 960V961H897V960H896ZM895 896V960H897V896H895ZM896 959H832V961H896V959Z"
+                        fill="#D0D5DD"
+                        mask="url(#path-449-inside-224_4940_405682)"
+                    />
+                    <mask id="path-451-inside-225_4940_405682" fill="white">
+                        <path d="M896 896H960V960H896V896Z" />
+                    </mask>
+                    <path d="M896 896H960V960H896V896Z" fill="#F2F4F7" />
+                    <path
+                        d="M960 960V961H961V960H960ZM959 896V960H961V896H959ZM960 959H896V961H960V959Z"
+                        fill="#D0D5DD"
+                        mask="url(#path-451-inside-225_4940_405682)"
+                    />
+                </g>
+                <rect x="0.5" y="0.5" width="959" height="959" stroke="#D0D5DD" />
+            </g>
+            <defs>
+                <radialGradient
+                    id="paint0_radial_4940_405682"
+                    cx="0"
+                    cy="0"
+                    r="1"
+                    gradientUnits="userSpaceOnUse"
+                    gradientTransform="translate(480 -0.000114441) rotate(90) scale(960 501.059)"
+                >
+                    <stop />
+                    <stop offset="0.953125" stopOpacity="0" />
+                </radialGradient>
+                <clipPath id="clip0_4940_405682">
+                    <rect width="960" height="960" fill="white" />
+                </clipPath>
+            </defs>
+        </svg>
+    );
+};
+
+const sizes = {
+    sm,
+    md,
+};
diff --git a/src/components/shared-assets/background-patterns/grid.tsx b/src/components/shared-assets/background-patterns/grid.tsx
new file mode 100644
index 0000000..c0cd677
--- /dev/null
+++ b/src/components/shared-assets/background-patterns/grid.tsx
@@ -0,0 +1,231 @@
+import type { SVGProps } from "react";
+import { cx } from "@/utils/cx";
+
+export const Grid = (props: Omit<SVGProps<SVGSVGElement>, "size"> & { size?: "sm" | "md" | "lg" }) => {
+    const { size = "lg", className } = props;
+    const Pattern = sizes[size];
+
+    return <Pattern className={className} />;
+};
+
+const lg = (props: SVGProps<SVGSVGElement>) => {
+    return (
+        <svg width="768" height="768" viewBox="0 0 768 768" fill="none" {...props} className={cx("text-border-secondary", props.className)}>
+            <mask id="mask0_4933_393109" style={{ maskType: "alpha" }} maskUnits="userSpaceOnUse" x="0" y="0" width="768" height="768">
+                <rect width="768" height="768" fill="url(#paint0_radial_4933_393109)" />
+            </mask>
+            <g mask="url(#mask0_4933_393109)">
+                <g clipPath="url(#clip0_4933_393109)">
+                    <g clipPath="url(#clip1_4933_393109)">
+                        <line x1="0.5" x2="0.5" y2="768" stroke="currentColor" />
+                        <line x1="48.5" x2="48.5" y2="768" stroke="currentColor" />
+                        <line x1="96.5" x2="96.5" y2="768" stroke="currentColor" />
+                        <line x1="144.5" x2="144.5" y2="768" stroke="currentColor" />
+                        <line x1="192.5" x2="192.5" y2="768" stroke="currentColor" />
+                        <line x1="240.5" x2="240.5" y2="768" stroke="currentColor" />
+                        <line x1="288.5" x2="288.5" y2="768" stroke="currentColor" />
+                        <line x1="336.5" x2="336.5" y2="768" stroke="currentColor" />
+                        <line x1="384.5" x2="384.5" y2="768" stroke="currentColor" />
+                        <line x1="432.5" x2="432.5" y2="768" stroke="currentColor" />
+                        <line x1="480.5" x2="480.5" y2="768" stroke="currentColor" />
+                        <line x1="528.5" x2="528.5" y2="768" stroke="currentColor" />
+                        <line x1="576.5" x2="576.5" y2="768" stroke="currentColor" />
+                        <line x1="624.5" x2="624.5" y2="768" stroke="currentColor" />
+                        <line x1="672.5" x2="672.5" y2="768" stroke="currentColor" />
+                        <line x1="720.5" x2="720.5" y2="768" stroke="currentColor" />
+                    </g>
+                    <rect x="0.5" y="0.5" width="767" height="767" stroke="currentColor" />
+                    <g clipPath="url(#clip2_4933_393109)">
+                        <line y1="47.5" x2="768" y2="47.5" stroke="currentColor" />
+                        <line y1="95.5" x2="768" y2="95.5" stroke="currentColor" />
+                        <line y1="143.5" x2="768" y2="143.5" stroke="currentColor" />
+                        <line y1="191.5" x2="768" y2="191.5" stroke="currentColor" />
+                        <line y1="239.5" x2="768" y2="239.5" stroke="currentColor" />
+                        <line y1="287.5" x2="768" y2="287.5" stroke="currentColor" />
+                        <line y1="335.5" x2="768" y2="335.5" stroke="currentColor" />
+                        <line y1="383.5" x2="768" y2="383.5" stroke="currentColor" />
+                        <line y1="431.5" x2="768" y2="431.5" stroke="currentColor" />
+                        <line y1="479.5" x2="768" y2="479.5" stroke="currentColor" />
+                        <line y1="527.5" x2="768" y2="527.5" stroke="currentColor" />
+                        <line y1="575.5" x2="768" y2="575.5" stroke="currentColor" />
+                        <line y1="623.5" x2="768" y2="623.5" stroke="currentColor" />
+                        <line y1="671.5" x2="768" y2="671.5" stroke="currentColor" />
+                        <line y1="719.5" x2="768" y2="719.5" stroke="currentColor" />
+                        <line y1="767.5" x2="768" y2="767.5" stroke="currentColor" />
+                    </g>
+                    <rect x="0.5" y="0.5" width="767" height="767" stroke="currentColor" />
+                </g>
+            </g>
+            <defs>
+                <radialGradient
+                    id="paint0_radial_4933_393109"
+                    cx="0"
+                    cy="0"
+                    r="1"
+                    gradientUnits="userSpaceOnUse"
+                    gradientTransform="translate(384 384) rotate(90) scale(384 384)"
+                >
+                    <stop />
+                    <stop offset="1" stopOpacity="0" />
+                </radialGradient>
+                <clipPath id="clip0_4933_393109">
+                    <rect width="768" height="768" fill="white" />
+                </clipPath>
+                <clipPath id="clip1_4933_393109">
+                    <rect width="768" height="768" fill="white" />
+                </clipPath>
+                <clipPath id="clip2_4933_393109">
+                    <rect width="768" height="768" fill="white" />
+                </clipPath>
+            </defs>
+        </svg>
+    );
+};
+
+const md = (props: SVGProps<SVGSVGElement>) => {
+    return (
+        <svg width="480" height="480" viewBox="0 0 480 480" {...props} fill="none" className={cx("text-border-secondary", props.className)}>
+            <mask id="mask0_4933_393121" style={{ maskType: "alpha" }} maskUnits="userSpaceOnUse" x="0" y="0" width="480" height="480">
+                <rect width="480" height="480" fill="url(#paint0_radial_4933_393121)" />
+            </mask>
+            <g mask="url(#mask0_4933_393121)">
+                <g clipPath="url(#clip0_4933_393121)">
+                    <g clipPath="url(#clip1_4933_393121)">
+                        <line x1="0.5" x2="0.5" y2="480" stroke="currentColor" />
+                        <line x1="32.5" x2="32.5" y2="480" stroke="currentColor" />
+                        <line x1="64.5" x2="64.5" y2="480" stroke="currentColor" />
+                        <line x1="96.5" x2="96.5" y2="480" stroke="currentColor" />
+                        <line x1="128.5" x2="128.5" y2="480" stroke="currentColor" />
+                        <line x1="160.5" x2="160.5" y2="480" stroke="currentColor" />
+                        <line x1="192.5" x2="192.5" y2="480" stroke="currentColor" />
+                        <line x1="224.5" x2="224.5" y2="480" stroke="currentColor" />
+                        <line x1="256.5" x2="256.5" y2="480" stroke="currentColor" />
+                        <line x1="288.5" x2="288.5" y2="480" stroke="currentColor" />
+                        <line x1="320.5" x2="320.5" y2="480" stroke="currentColor" />
+                        <line x1="352.5" x2="352.5" y2="480" stroke="currentColor" />
+                        <line x1="384.5" x2="384.5" y2="480" stroke="currentColor" />
+                        <line x1="416.5" x2="416.5" y2="480" stroke="currentColor" />
+                        <line x1="448.5" x2="448.5" y2="480" stroke="currentColor" />
+                    </g>
+                    <rect x="0.5" y="0.5" width="479" height="479" stroke="currentColor" />
+                    <g clipPath="url(#clip2_4933_393121)">
+                        <line y1="31.5" x2="480" y2="31.5" stroke="currentColor" />
+                        <line y1="63.5" x2="480" y2="63.5" stroke="currentColor" />
+                        <line y1="95.5" x2="480" y2="95.5" stroke="currentColor" />
+                        <line y1="127.5" x2="480" y2="127.5" stroke="currentColor" />
+                        <line y1="159.5" x2="480" y2="159.5" stroke="currentColor" />
+                        <line y1="191.5" x2="480" y2="191.5" stroke="currentColor" />
+                        <line y1="223.5" x2="480" y2="223.5" stroke="currentColor" />
+                        <line y1="255.5" x2="480" y2="255.5" stroke="currentColor" />
+                        <line y1="287.5" x2="480" y2="287.5" stroke="currentColor" />
+                        <line y1="319.5" x2="480" y2="319.5" stroke="currentColor" />
+                        <line y1="351.5" x2="480" y2="351.5" stroke="currentColor" />
+                        <line y1="383.5" x2="480" y2="383.5" stroke="currentColor" />
+                        <line y1="415.5" x2="480" y2="415.5" stroke="currentColor" />
+                        <line y1="447.5" x2="480" y2="447.5" stroke="currentColor" />
+                        <line y1="479.5" x2="480" y2="479.5" stroke="currentColor" />
+                    </g>
+                    <rect x="0.5" y="0.5" width="479" height="479" stroke="currentColor" />
+                </g>
+            </g>
+            <defs>
+                <radialGradient
+                    id="paint0_radial_4933_393121"
+                    cx="0"
+                    cy="0"
+                    r="1"
+                    gradientUnits="userSpaceOnUse"
+                    gradientTransform="translate(240 240) rotate(90) scale(240 240)"
+                >
+                    <stop />
+                    <stop offset="1" stopOpacity="0" />
+                </radialGradient>
+                <clipPath id="clip0_4933_393121">
+                    <rect width="480" height="480" fill="white" />
+                </clipPath>
+                <clipPath id="clip1_4933_393121">
+                    <rect width="480" height="480" fill="white" />
+                </clipPath>
+                <clipPath id="clip2_4933_393121">
+                    <rect width="480" height="480" fill="white" />
+                </clipPath>
+            </defs>
+        </svg>
+    );
+};
+
+const sm = (props: SVGProps<SVGSVGElement>) => {
+    return (
+        <svg width="336" height="336" viewBox="0 0 336 336" {...props} fill="none" className={cx("text-border-secondary", props.className)}>
+            <mask id="mask0_4947_375939" style={{ maskType: "alpha" }} maskUnits="userSpaceOnUse" x="0" y="0" width="336" height="336">
+                <rect width="336" height="336" fill="url(#paint0_radial_4947_375939)" />
+            </mask>
+            <g mask="url(#mask0_4947_375939)">
+                <g clipPath="url(#clip0_4947_375939)">
+                    <g clipPath="url(#clip1_4947_375939)">
+                        <line x1="0.5" x2="0.5" y2="336" stroke="currentColor" />
+                        <line x1="24.5" x2="24.5" y2="336" stroke="currentColor" />
+                        <line x1="48.5" x2="48.5" y2="336" stroke="currentColor" />
+                        <line x1="72.5" x2="72.5" y2="336" stroke="currentColor" />
+                        <line x1="96.5" x2="96.5" y2="336" stroke="currentColor" />
+                        <line x1="120.5" x2="120.5" y2="336" stroke="currentColor" />
+                        <line x1="144.5" x2="144.5" y2="336" stroke="currentColor" />
+                        <line x1="168.5" x2="168.5" y2="336" stroke="currentColor" />
+                        <line x1="192.5" x2="192.5" y2="336" stroke="currentColor" />
+                        <line x1="216.5" x2="216.5" y2="336" stroke="currentColor" />
+                        <line x1="240.5" x2="240.5" y2="336" stroke="currentColor" />
+                        <line x1="264.5" x2="264.5" y2="336" stroke="currentColor" />
+                        <line x1="288.5" x2="288.5" y2="336" stroke="currentColor" />
+                        <line x1="312.5" x2="312.5" y2="336" stroke="currentColor" />
+                    </g>
+                    <rect x="0.5" y="0.5" width="335" height="335" stroke="currentColor" />
+                    <g clipPath="url(#clip2_4947_375939)">
+                        <line y1="23.5" x2="336" y2="23.5" stroke="currentColor" />
+                        <line y1="47.5" x2="336" y2="47.5" stroke="currentColor" />
+                        <line y1="71.5" x2="336" y2="71.5" stroke="currentColor" />
+                        <line y1="95.5" x2="336" y2="95.5" stroke="currentColor" />
+                        <line y1="119.5" x2="336" y2="119.5" stroke="currentColor" />
+                        <line y1="143.5" x2="336" y2="143.5" stroke="currentColor" />
+                        <line y1="167.5" x2="336" y2="167.5" stroke="currentColor" />
+                        <line y1="191.5" x2="336" y2="191.5" stroke="currentColor" />
+                        <line y1="215.5" x2="336" y2="215.5" stroke="currentColor" />
+                        <line y1="239.5" x2="336" y2="239.5" stroke="currentColor" />
+                        <line y1="263.5" x2="336" y2="263.5" stroke="currentColor" />
+                        <line y1="287.5" x2="336" y2="287.5" stroke="currentColor" />
+                        <line y1="311.5" x2="336" y2="311.5" stroke="currentColor" />
+                        <line y1="335.5" x2="336" y2="335.5" stroke="currentColor" />
+                    </g>
+                    <rect x="0.5" y="0.5" width="335" height="335" stroke="currentColor" />
+                </g>
+            </g>
+            <defs>
+                <radialGradient
+                    id="paint0_radial_4947_375939"
+                    cx="0"
+                    cy="0"
+                    r="1"
+                    gradientUnits="userSpaceOnUse"
+                    gradientTransform="translate(168 168) rotate(90) scale(168 168)"
+                >
+                    <stop />
+                    <stop offset="1" stopOpacity="0" />
+                </radialGradient>
+                <clipPath id="clip0_4947_375939">
+                    <rect width="336" height="336" fill="white" />
+                </clipPath>
+                <clipPath id="clip1_4947_375939">
+                    <rect width="336" height="336" fill="white" />
+                </clipPath>
+                <clipPath id="clip2_4947_375939">
+                    <rect width="336" height="336" fill="white" />
+                </clipPath>
+            </defs>
+        </svg>
+    );
+};
+
+const sizes = {
+    sm,
+    md,
+    lg,
+};
diff --git a/src/components/shared-assets/background-patterns/index.tsx b/src/components/shared-assets/background-patterns/index.tsx
new file mode 100644
index 0000000..57dc883
--- /dev/null
+++ b/src/components/shared-assets/background-patterns/index.tsx
@@ -0,0 +1,25 @@
+import type { SVGProps } from "react";
+import { cx } from "@/utils/cx";
+import { Circle } from "./circle";
+import { Grid } from "./grid";
+import { GridCheck } from "./grid-check";
+import { Square } from "./square";
+
+const patterns = {
+    circle: Circle,
+    square: Square,
+    grid: Grid,
+    "grid-check": GridCheck,
+};
+
+export interface BackgroundPatternProps extends Omit<SVGProps<SVGSVGElement>, "size"> {
+    size?: "sm" | "md" | "lg";
+    pattern: keyof typeof patterns;
+}
+
+export const BackgroundPattern = (props: BackgroundPatternProps) => {
+    const { pattern } = props;
+    const Pattern = patterns[pattern];
+
+    return <Pattern {...props} size={props.size as "sm" | "md"} className={cx("pointer-events-none", props.className)} />;
+};
diff --git a/src/components/shared-assets/background-patterns/square.tsx b/src/components/shared-assets/background-patterns/square.tsx
new file mode 100644
index 0000000..983c561
--- /dev/null
+++ b/src/components/shared-assets/background-patterns/square.tsx
@@ -0,0 +1,180 @@
+import type { SVGProps } from "react";
+import { cx } from "@/utils/cx";
+
+export const Square = (props: Omit<SVGProps<SVGSVGElement>, "size"> & { size?: "sm" | "md" | "lg" }) => {
+    const { size = "lg", className } = props;
+    const Pattern = sizes[size];
+
+    return <Pattern className={className} />;
+};
+
+const lg = (props: SVGProps<SVGSVGElement>) => {
+    return (
+        <svg width="910" height="910" viewBox="0 0 910 910" fill="none" {...props} className={cx("text-border-secondary", props.className)}>
+            <mask id="mask0_16747_25726" style={{ maskType: "alpha" }} maskUnits="userSpaceOnUse" x="-4" y="-4" width="918" height="918">
+                <path
+                    d="M1.31903 182.741C-1.0717 171.957 5.73229 161.277 16.5162 158.886L727.26 1.31801C738.044 -1.07271 748.724 5.73127 751.114 16.5151L908.682 727.259C911.073 738.042 904.269 748.723 893.485 751.113L182.742 908.681C171.958 911.072 161.278 904.268 158.887 893.484L1.31903 182.741Z"
+                    fill="url(#paint0_radial_16747_25726)"
+                />
+            </mask>
+            <g mask="url(#mask0_16747_25726)">
+                <path
+                    d="M417.382 414.687L472.055 402.566C482.569 400.235 492.982 406.869 495.313 417.383L507.434 472.056C509.765 482.57 503.131 492.983 492.617 495.314L437.944 507.435C427.43 509.766 417.017 503.132 414.686 492.618L402.565 437.945C400.234 427.431 406.868 417.018 417.382 414.687Z"
+                    stroke="currentColor"
+                />
+                <path
+                    d="M360.132 378.213L508.529 345.314C519.043 342.983 529.457 349.617 531.788 360.131L564.686 508.528C567.017 519.043 560.383 529.456 549.869 531.787L401.472 564.686C390.958 567.017 380.545 560.383 378.214 549.868L345.315 401.471C342.984 390.957 349.618 380.544 360.132 378.213Z"
+                    stroke="currentColor"
+                />
+                <path
+                    d="M302.88 341.74L545.002 288.063C555.516 285.732 565.929 292.366 568.26 302.881L621.937 545.002C624.268 555.516 617.634 565.929 607.12 568.26L364.998 621.937C354.484 624.268 344.071 617.634 341.74 607.12L288.063 364.999C285.732 354.484 292.366 344.071 302.88 341.74Z"
+                    stroke="currentColor"
+                />
+                <path
+                    d="M245.628 305.267L581.474 230.812C591.988 228.481 602.401 235.114 604.732 245.629L679.188 581.475C681.519 591.989 674.885 602.402 664.37 604.733L328.525 679.188C318.01 681.519 307.597 674.885 305.266 664.371L230.811 328.525C228.48 318.011 235.114 307.598 245.628 305.267Z"
+                    stroke="currentColor"
+                />
+                <path
+                    d="M188.378 268.794L617.949 173.561C628.463 171.23 638.876 177.864 641.207 188.378L736.44 617.948C738.771 628.462 732.137 638.876 721.623 641.206L292.053 736.44C281.539 738.771 271.125 732.137 268.795 721.623L173.561 292.052C171.23 281.538 177.864 271.125 188.378 268.794Z"
+                    stroke="currentColor"
+                />
+                <path
+                    d="M131.126 232.321L654.421 116.309C664.935 113.978 675.348 120.612 677.679 131.126L793.691 654.421C796.022 664.935 789.388 675.348 778.874 677.679L255.579 793.691C245.065 796.022 234.652 789.388 232.321 778.874L116.309 255.579C113.978 245.065 120.612 234.652 131.126 232.321Z"
+                    stroke="currentColor"
+                />
+                <path
+                    d="M73.8744 195.848L690.893 59.058C701.408 56.727 711.821 63.3609 714.152 73.8752L850.942 690.894C853.273 701.409 846.639 711.822 836.124 714.153L219.105 850.942C208.591 853.273 198.178 846.64 195.847 836.125L59.0572 219.106C56.7262 208.592 63.3601 198.179 73.8744 195.848Z"
+                    stroke="currentColor"
+                />
+                <path
+                    d="M16.6244 159.374L727.368 1.80616C737.882 -0.524797 748.295 6.10908 750.626 16.6234L908.194 727.367C910.525 737.881 903.891 748.294 893.377 750.625L182.634 908.193C172.119 910.524 161.706 903.89 159.375 893.376L1.80718 182.633C-0.52378 172.118 6.1101 161.705 16.6244 159.374Z"
+                    stroke="currentColor"
+                />
+            </g>
+            <defs>
+                <radialGradient
+                    id="paint0_radial_16747_25726"
+                    cx="0"
+                    cy="0"
+                    r="1"
+                    gradientUnits="userSpaceOnUse"
+                    gradientTransform="translate(455.001 455) rotate(77.5) scale(384 384)"
+                >
+                    <stop />
+                    <stop offset="1" stopOpacity="0" />
+                </radialGradient>
+            </defs>
+        </svg>
+    );
+};
+
+const md = (props: SVGProps<SVGSVGElement>) => {
+    return (
+        <svg width="480" height="480" viewBox="0 0 480 480" fill="none" {...props} className={cx("text-border-secondary", props.className)}>
+            <mask id="mask0_4933_421799" style={{ maskType: "alpha" }} maskUnits="userSpaceOnUse" x="0" y="0" width="480" height="480">
+                <path
+                    d="M0 12C0 5.37257 5.37258 0 12 0H468C474.627 0 480 5.37258 480 12V468C480 474.627 474.627 480 468 480H12C5.37257 480 0 474.627 0 468V12Z"
+                    fill="url(#paint0_radial_4933_421799)"
+                />
+            </mask>
+            <g mask="url(#mask0_4933_421799)">
+                <path
+                    d="M185.833 215.135C184.459 208.934 188.371 202.793 194.572 201.418L264.865 185.835C271.066 184.46 277.207 188.372 278.582 194.573L294.165 264.866C295.54 271.067 291.628 277.208 285.427 278.583L215.134 294.166C208.933 295.541 202.792 291.629 201.417 285.428L185.833 215.135Z"
+                    stroke="currentColor"
+                />
+                <path
+                    d="M147.667 190.819C146.293 184.619 150.205 178.477 156.406 177.103L289.182 147.667C295.383 146.292 301.524 150.205 302.899 156.405L332.334 289.182C333.709 295.382 329.797 301.523 323.596 302.898L190.82 332.334C184.619 333.709 178.478 329.796 177.103 323.596L147.667 190.819Z"
+                    stroke="currentColor"
+                />
+                <path
+                    d="M109.499 166.504C108.125 160.303 112.037 154.162 118.238 152.787L313.497 109.499C319.698 108.125 325.839 112.037 327.213 118.238L370.501 313.497C371.876 319.698 367.964 325.839 361.763 327.213L166.504 370.501C160.303 371.876 154.162 367.964 152.787 361.763L109.499 166.504Z"
+                    stroke="currentColor"
+                />
+                <path
+                    d="M71.3315 142.188C69.9569 135.988 73.8691 129.847 80.0699 128.472L337.812 71.3319C344.013 69.9572 350.154 73.8695 351.528 80.0702L408.669 337.812C410.043 344.013 406.131 350.154 399.93 351.529L142.188 408.669C135.987 410.044 129.846 406.131 128.472 399.931L71.3315 142.188Z"
+                    stroke="currentColor"
+                />
+                <path
+                    d="M33.1636 117.873C31.7889 111.672 35.7012 105.531 41.9019 104.156L362.127 33.1643C368.328 31.7896 374.469 35.7019 375.843 41.9027L446.836 362.128C448.21 368.328 444.298 374.47 438.097 375.844L117.872 446.836C111.671 448.211 105.53 444.299 104.156 438.098L33.1636 117.873Z"
+                    stroke="currentColor"
+                />
+                <path
+                    d="M-5.00442 93.5575C-6.37909 87.3568 -2.4668 81.2157 3.73393 79.8411L386.442 -5.00326C392.643 -6.37793 398.784 -2.46564 400.158 3.73509L485.003 386.443C486.377 392.644 482.465 398.785 476.264 400.16L93.5564 485.004C87.3556 486.379 81.2146 482.466 79.8399 476.266L-5.00442 93.5575Z"
+                    stroke="currentColor"
+                />
+                <path
+                    d="M-43.1704 69.2421C-44.5451 63.0414 -40.6328 56.9003 -34.4321 55.5256L410.759 -43.1708C416.96 -44.5455 423.101 -40.6332 424.475 -34.4325L523.172 410.758C524.546 416.959 520.634 423.1 514.433 424.475L69.2425 523.171C63.0418 524.546 56.9007 520.634 55.526 514.433L-43.1704 69.2421Z"
+                    stroke="currentColor"
+                />
+            </g>
+            <defs>
+                <radialGradient
+                    id="paint0_radial_4933_421799"
+                    cx="0"
+                    cy="0"
+                    r="1"
+                    gradientUnits="userSpaceOnUse"
+                    gradientTransform="translate(240 240) rotate(90) scale(240 240)"
+                >
+                    <stop />
+                    <stop offset="1" stopOpacity="0" />
+                </radialGradient>
+            </defs>
+        </svg>
+    );
+};
+
+const sm = (props: SVGProps<SVGSVGElement>) => {
+    return (
+        <svg width="336" height="336" viewBox="0 0 336 336" fill="none" {...props} className={cx("text-border-secondary", props.className)}>
+            <mask id="mask0_4947_375930" style={{ maskType: "alpha" }} maskUnits="userSpaceOnUse" x="0" y="0" width="336" height="336">
+                <rect width="336" height="336" fill="url(#paint0_radial_4947_375930)" />
+            </mask>
+            <g mask="url(#mask0_4947_375930)">
+                <path
+                    d="M113.833 143.135C112.459 136.934 116.371 130.793 122.572 129.418L192.865 113.835C199.066 112.46 205.207 116.372 206.582 122.573L222.165 192.866C223.54 199.067 219.628 205.208 213.427 206.583L143.134 222.166C136.933 223.541 130.792 219.629 129.417 213.428L113.833 143.135Z"
+                    stroke="currentColor"
+                />
+                <path
+                    d="M85.2085 124.898C83.8338 118.697 87.7461 112.556 93.9468 111.181L211.102 85.2084C217.303 83.8337 223.444 87.746 224.819 93.9467L250.792 211.102C252.166 217.303 248.254 223.444 242.053 224.819L124.898 250.791C118.697 252.166 112.556 248.254 111.181 242.053L85.2085 124.898Z"
+                    stroke="currentColor"
+                />
+                <path
+                    d="M56.5835 106.661C55.2088 100.46 59.1211 94.3188 65.3218 92.9441L229.34 56.5822C235.54 55.2076 241.681 59.1199 243.056 65.3206L279.418 229.338C280.793 235.539 276.88 241.68 270.68 243.055L106.662 279.417C100.461 280.791 94.32 276.879 92.9453 270.678L56.5835 106.661Z"
+                    stroke="currentColor"
+                />
+                <path
+                    d="M27.9594 88.4235C26.5848 82.2228 30.4971 76.0817 36.6978 74.707L247.578 27.9561C253.778 26.5814 259.92 30.4937 261.294 36.6944L308.045 247.574C309.42 253.775 305.508 259.916 299.307 261.291L88.4269 308.042C82.2261 309.416 76.0851 305.504 74.7104 299.303L27.9594 88.4235Z"
+                    stroke="currentColor"
+                />
+                <path
+                    d="M-0.665552 70.1864C-2.04022 63.9857 1.87207 57.8446 8.0728 56.47L265.815 -0.670085C272.016 -2.04475 278.157 1.86754 279.531 8.06826L336.671 265.81C338.046 272.011 334.134 278.152 327.933 279.527L70.191 336.667C63.9902 338.042 57.8492 334.129 56.4745 327.929L-0.665552 70.1864Z"
+                    stroke="currentColor"
+                />
+                <path
+                    d="M-29.2906 51.9496C-30.6652 45.7489 -26.7529 39.6078 -20.5522 38.2332L284.052 -29.296C290.253 -30.6707 296.394 -26.7584 297.769 -20.5577L365.298 284.047C366.672 290.247 362.76 296.388 356.559 297.763L51.9551 365.292C45.7543 366.667 39.6133 362.755 38.2386 356.554L-29.2906 51.9496Z"
+                    stroke="currentColor"
+                />
+            </g>
+            <defs>
+                <radialGradient
+                    id="paint0_radial_4947_375930"
+                    cx="0"
+                    cy="0"
+                    r="1"
+                    gradientUnits="userSpaceOnUse"
+                    gradientTransform="translate(168 168) rotate(90) scale(168 168)"
+                >
+                    <stop />
+                    <stop offset="1" stopOpacity="0" />
+                </radialGradient>
+            </defs>
+        </svg>
+    );
+};
+
+const sizes = {
+    sm,
+    md,
+    lg,
+};
diff --git a/src/components/shared-assets/illustrations/box.tsx b/src/components/shared-assets/illustrations/box.tsx
new file mode 100644
index 0000000..87e7ddc
--- /dev/null
+++ b/src/components/shared-assets/illustrations/box.tsx
@@ -0,0 +1,257 @@
+import type { HTMLAttributes } from "react";
+import { UploadCloud02 } from "@untitledui/icons";
+import { cx } from "@/utils/cx";
+
+interface IllustrationProps extends HTMLAttributes<HTMLDivElement> {
+    size?: "sm" | "md" | "lg";
+    svgClassName?: string;
+    childrenClassName?: string;
+}
+
+export const BoxIllustration = ({ size = "lg", ...otherProps }: IllustrationProps) => {
+    const Pattern = sizes[size];
+
+    return <Pattern {...otherProps} />;
+};
+
+export const sm = ({
+    className,
+    svgClassName,
+    childrenClassName,
+    children = <UploadCloud02 className="size-6" />,
+    ...otherProps
+}: Omit<IllustrationProps, "size">) => {
+    return (
+        <div {...otherProps} className={cx("relative h-31.5 w-38", className)}>
+            <svg viewBox="0 0 152 126" fill="none" className={cx("size-full stroke-inherit text-inherit", svgClassName)}>
+                <circle cx="76" cy="60" r="52" className="fill-utility-gray-100" />
+                <circle cx="21" cy="27" r="5" className="fill-utility-gray-100" />
+                <circle cx="18" cy="111" r="7" className="fill-utility-gray-100" />
+                <circle cx="145" cy="43" r="7" className="fill-utility-gray-100" />
+                <circle cx="134" cy="16" r="4" className="fill-utility-gray-100" />
+                <g filter="url(#box-shadow-sm)">
+                    <path d="M76.0006 92.1898L118 73.5312V20.375L76.3298 2L34 20.375V73.5312L76.0006 92.1898Z" className="fill-utility-gray-50" />
+                    <path
+                        d="M118.5 73.8564L118.203 73.9883L76.2031 92.6465L76.001 92.7373L75.7979 92.6465L33.7969 73.9883L33.5 73.8564V20.0469L33.8008 19.916L76.1309 1.54102L76.3311 1.4541L76.5312 1.54297L118.202 19.918L118.5 20.0488V73.8564Z"
+                        className="stroke-border-secondary_alt"
+                    />
+                    <path d="M76 38.0629V92.2344L34 73.5312V20.375L76 38.0629Z" className="fill-utility-gray-200" />
+                    <path d="M76.0008 38.0938V92.2344L118 73.5312V20.375L76.0008 38.0938Z" fill="url(#box-gradient-sm)" />
+                    <path d="M76 38.0938L118 20.375L76.3298 2L34 20.375L76 38.0938Z" className="fill-utility-gray-50" />
+                    <path
+                        d="M50.0781 13.3943L91.6722 31.4986L92.0523 44.7698L103.759 39.9395L103.405 26.5846L60.4847 8.88196L50.0781 13.3943Z"
+                        className="fill-utility-gray-200"
+                    />
+                </g>
+                <defs>
+                    <filter
+                        id="box-shadow-sm"
+                        x="19.875"
+                        y="0.908508"
+                        width="112.25"
+                        height="118.626"
+                        filterUnits="userSpaceOnUse"
+                        colorInterpolationFilters="sRGB"
+                    >
+                        <feFlood floodOpacity="0" result="BackgroundImageFix" />
+                        <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha" />
+                        <feMorphology radius="0.984375" operator="erode" in="SourceAlpha" result="box-shadow-sm-effect1" />
+                        <feOffset dy="1.96875" />
+                        <feGaussianBlur stdDeviation="0.984375" />
+                        <feColorMatrix type="matrix" values="0 0 0 0 0.0392157 0 0 0 0 0.0496732 0 0 0 0 0.0705882 0 0 0 0.04 0" />
+                        <feBlend mode="normal" in2="BackgroundImageFix" result="box-shadow-sm-effect1" />
+                        <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha" />
+                        <feMorphology radius="2.625" operator="erode" in="SourceAlpha" result="box-shadow-sm-effect2" />
+                        <feOffset dy="5.25" />
+                        <feGaussianBlur stdDeviation="2.625" />
+                        <feColorMatrix type="matrix" values="0 0 0 0 0.0392157 0 0 0 0 0.0496732 0 0 0 0 0.0705882 0 0 0 0.03 0" />
+                        <feBlend mode="normal" in2="box-shadow-sm-effect1" result="box-shadow-sm-effect2" />
+                        <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha" />
+                        <feMorphology radius="2.625" operator="erode" in="SourceAlpha" result="box-shadow-sm-effect3" />
+                        <feOffset dy="13.125" />
+                        <feGaussianBlur stdDeviation="7.875" />
+                        <feColorMatrix type="matrix" values="0 0 0 0 0.0392157 0 0 0 0 0.0496732 0 0 0 0 0.0705882 0 0 0 0.08 0" />
+                        <feBlend mode="normal" in2="box-shadow-sm-effect2" result="box-shadow-sm-effect3" />
+                        <feBlend mode="normal" in="SourceGraphic" in2="box-shadow-sm-effect3" result="shape" />
+                    </filter>
+                    <linearGradient id="box-gradient-sm" x1="97" y1="20.375" x2="128.011" y2="74.9366" gradientUnits="userSpaceOnUse">
+                        <stop stopColor="currentColor" className="text-utility-gray-100" />
+                        <stop offset="1" stopColor="currentColor" className="text-utility-gray-200" />
+                    </linearGradient>
+                </defs>
+            </svg>
+
+            {children && (
+                <span
+                    className={cx(
+                        "absolute inset-x-13 bottom-2 z-10 flex size-12 items-center justify-center rounded-full bg-alpha-black/20 text-fg-white backdrop-blur-xs",
+                        childrenClassName,
+                    )}
+                >
+                    {children}
+                </span>
+            )}
+        </div>
+    );
+};
+
+export const md = ({
+    className,
+    svgClassName,
+    childrenClassName,
+    children = <UploadCloud02 className="size-7" />,
+    ...otherProps
+}: Omit<IllustrationProps, "size">) => {
+    return (
+        <div {...otherProps} className={cx("relative h-37 w-43", className)}>
+            <svg viewBox="0 0 172 148" fill="none" className={cx("size-full stroke-inherit text-inherit", svgClassName)}>
+                <circle cx="86" cy="74" r="64" className="fill-utility-gray-100" />
+                <circle cx="20" cy="30" r="6" className="fill-utility-gray-100" />
+                <circle cx="17" cy="122" r="8" className="fill-utility-gray-100" />
+                <circle cx="160" cy="46" r="8" className="fill-utility-gray-100" />
+                <circle cx="149" cy="19" r="5" className="fill-utility-gray-100" />
+                <g filter="url(#box-shadow-md)">
+                    <path d="M86.0007 113.664L138 90.5625V24.75L86.4084 2L34 24.75V90.5625L86.0007 113.664Z" className="fill-utility-gray-50" />
+                    <path
+                        d="M138.5 90.8877L138.203 91.0195L86.2041 114.12L86.001 114.211L85.7979 114.12L33.7969 91.0195L33.5 90.8877V24.4219L33.8008 24.291L86.209 1.54102L86.4102 1.4541L86.6104 1.54297L138.202 24.293L138.5 24.4238V90.8877Z"
+                        className="stroke-border-secondary_alt"
+                    />
+                    <path d="M86 46.6493V113.719L34 90.5625V24.75L86 46.6493Z" className="fill-utility-gray-200" />
+                    <path d="M86.001 46.6875V113.719L138 90.5625V24.75L86.001 46.6875Z" fill="url(#box-gradient-md)" />
+                    <path d="M86 46.6875L138 24.75L86.4084 2L34 24.75L86 46.6875Z" className="fill-utility-gray-50" />
+                    <path
+                        d="M53.9062 16.1072L105.404 38.5221L105.874 54.9531L120.368 48.9727L119.93 32.438L66.7906 10.5205L53.9062 16.1072Z"
+                        className="fill-utility-gray-200"
+                    />
+                </g>
+                <defs>
+                    <filter
+                        id="box-shadow-md"
+                        x="16.75"
+                        y="0.908508"
+                        width="138.5"
+                        height="146.349"
+                        filterUnits="userSpaceOnUse"
+                        colorInterpolationFilters="sRGB"
+                    >
+                        <feFlood floodOpacity="0" result="BackgroundImageFix" />
+                        <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha" />
+                        <feMorphology radius="1.21875" operator="erode" in="SourceAlpha" result="box-shadow-md-effect1" />
+                        <feOffset dy="2.4375" />
+                        <feGaussianBlur stdDeviation="1.21875" />
+                        <feColorMatrix type="matrix" values="0 0 0 0 0.0392157 0 0 0 0 0.0496732 0 0 0 0 0.0705882 0 0 0 0.04 0" />
+                        <feBlend mode="normal" in2="BackgroundImageFix" result="box-shadow-md-effect1" />
+                        <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha" />
+                        <feMorphology radius="3.25" operator="erode" in="SourceAlpha" result="box-shadow-md-effect2" />
+                        <feOffset dy="6.5" />
+                        <feGaussianBlur stdDeviation="3.25" />
+                        <feColorMatrix type="matrix" values="0 0 0 0 0.0392157 0 0 0 0 0.0496732 0 0 0 0 0.0705882 0 0 0 0.03 0" />
+                        <feBlend mode="normal" in2="box-shadow-md-effect1" result="box-shadow-md-effect2" />
+                        <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha" />
+                        <feMorphology radius="3.25" operator="erode" in="SourceAlpha" result="box-shadow-md-effect3" />
+                        <feOffset dy="16.25" />
+                        <feGaussianBlur stdDeviation="9.75" />
+                        <feColorMatrix type="matrix" values="0 0 0 0 0.0392157 0 0 0 0 0.0496732 0 0 0 0 0.0705882 0 0 0 0.08 0" />
+                        <feBlend mode="normal" in2="box-shadow-md-effect2" result="box-shadow-md-effect3" />
+                        <feBlend mode="normal" in="SourceGraphic" in2="box-shadow-md-effect3" result="shape" />
+                    </filter>
+                    <linearGradient id="box-gradient-md" x1="112" y1="24.75" x2="150.395" y2="92.3024" gradientUnits="userSpaceOnUse">
+                        <stop stopColor="currentColor" className="text-utility-gray-100" />
+                        <stop offset="1" stopColor="currentColor" className="text-utility-gray-200" />
+                    </linearGradient>
+                </defs>
+            </svg>
+
+            {children && (
+                <span
+                    className={cx(
+                        "absolute bottom-3 left-1/2 z-10 flex size-14 -translate-x-1/2 items-center justify-center rounded-full bg-alpha-black/20 text-fg-white backdrop-blur-xs",
+                        childrenClassName,
+                    )}
+                >
+                    {children}
+                </span>
+            )}
+        </div>
+    );
+};
+
+export const lg = ({
+    className,
+    svgClassName,
+    childrenClassName,
+    children = <UploadCloud02 className="size-7" />,
+    ...otherProps
+}: Omit<IllustrationProps, "size">) => {
+    return (
+        <div {...otherProps} className={cx("relative h-45.25 w-55", className)}>
+            <svg viewBox="0 0 220 181" fill="none" className={cx("size-full stroke-inherit text-inherit", svgClassName)}>
+                <circle cx="110" cy="90" r="80" className="fill-utility-gray-100" />
+                <circle cx="26" cy="30" r="8" className="fill-utility-gray-100" />
+                <circle cx="198" cy="136" r="6" className="fill-utility-gray-100" />
+                <circle cx="25" cy="148" r="10" className="fill-utility-gray-100" />
+                <circle cx="210" cy="56" r="10" className="fill-utility-gray-100" />
+                <circle cx="191" cy="21" r="7" className="fill-utility-gray-100" />
+                <g filter="url(#box-shadow-lg)">
+                    <path d="M110.001 139.432L174 111V30L110.503 2L46 30V111L110.001 139.432Z" className="fill-utility-gray-50" />
+                    <path
+                        d="M174.5 111.325L174.203 111.457L110.204 139.889L110.001 139.979L109.798 139.889L45.7969 111.457L45.5 111.325V29.6719L45.8008 29.541L110.304 1.54102L110.504 1.4541L110.704 1.54297L174.202 29.543L174.5 29.6738V111.325Z"
+                        className="stroke-border-secondary_alt"
+                    />
+                    <path d="M110 56.9531V139.5L46 111V30.0001L110 56.9531Z" className="fill-utility-gray-200" />
+                    <path d="M110.001 57V139.5L174 111V30L110.001 57Z" fill="url(#box-gradient-lg)" />
+                    <path d="M110 57L174 30L110.503 2L46 30L110 57Z" className="fill-utility-gray-50" />
+                    <path
+                        d="M70.5 19.3627L133.882 46.9503L134.461 67.173L152.299 59.8125L151.759 39.4622L86.3577 12.4868L70.5 19.3627Z"
+                        className="fill-utility-gray-200"
+                    />
+                </g>
+                <defs>
+                    <filter id="box-shadow-lg" x="25" y="0.908508" width="170" height="179.618" filterUnits="userSpaceOnUse" colorInterpolationFilters="sRGB">
+                        <feFlood floodOpacity="0" result="BackgroundImageFix" />
+                        <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha" />
+                        <feMorphology radius="1.5" operator="erode" in="SourceAlpha" result="box-shadow-lg-effect1" />
+                        <feOffset dy="3" />
+                        <feGaussianBlur stdDeviation="1.5" />
+                        <feColorMatrix type="matrix" values="0 0 0 0 0.0392157 0 0 0 0 0.0496732 0 0 0 0 0.0705882 0 0 0 0.04 0" />
+                        <feBlend mode="normal" in2="BackgroundImageFix" result="box-shadow-lg-effect1" />
+                        <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha" />
+                        <feMorphology radius="4" operator="erode" in="SourceAlpha" result="box-shadow-lg-effect2" />
+                        <feOffset dy="8" />
+                        <feGaussianBlur stdDeviation="4" />
+                        <feColorMatrix type="matrix" values="0 0 0 0 0.0392157 0 0 0 0 0.0496732 0 0 0 0 0.0705882 0 0 0 0.03 0" />
+                        <feBlend mode="normal" in2="box-shadow-lg-effect1" result="box-shadow-lg-effect2" />
+                        <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha" />
+                        <feMorphology radius="4" operator="erode" in="SourceAlpha" result="box-shadow-lg-effect3" />
+                        <feOffset dy="20" />
+                        <feGaussianBlur stdDeviation="12" />
+                        <feColorMatrix type="matrix" values="0 0 0 0 0.0392157 0 0 0 0 0.0496732 0 0 0 0 0.0705882 0 0 0 0.08 0" />
+                        <feBlend mode="normal" in2="box-shadow-lg-effect2" result="box-shadow-lg-effect3" />
+                        <feBlend mode="normal" in="SourceGraphic" in2="box-shadow-lg-effect3" result="shape" />
+                    </filter>
+                    <linearGradient id="box-gradient-lg" x1="142" y1="30" x2="189.255" y2="113.141" gradientUnits="userSpaceOnUse">
+                        <stop stopColor="currentColor" className="text-utility-gray-100" />
+                        <stop offset="1" stopColor="currentColor" className="text-utility-gray-200" />
+                    </linearGradient>
+                </defs>
+            </svg>
+
+            {children && (
+                <span
+                    className={cx(
+                        "absolute bottom-5 left-1/2 z-10 flex size-14 -translate-x-1/2 items-center justify-center rounded-full bg-alpha-black/20 text-fg-white backdrop-blur-xs",
+                        childrenClassName,
+                    )}
+                >
+                    {children}
+                </span>
+            )}
+        </div>
+    );
+};
+
+const sizes = {
+    sm,
+    md,
+    lg,
+};
diff --git a/src/components/shared-assets/illustrations/cloud.tsx b/src/components/shared-assets/illustrations/cloud.tsx
new file mode 100644
index 0000000..213ebdc
--- /dev/null
+++ b/src/components/shared-assets/illustrations/cloud.tsx
@@ -0,0 +1,281 @@
+import type { HTMLAttributes } from "react";
+import { SearchLg } from "@untitledui/icons";
+import { cx } from "@/utils/cx";
+
+interface IllustrationProps extends HTMLAttributes<HTMLDivElement> {
+    size?: "sm" | "md" | "lg";
+    svgClassName?: string;
+    childrenClassName?: string;
+}
+
+export const CloudIllustration = ({ size = "lg", ...otherProps }: IllustrationProps) => {
+    const Pattern = sizes[size];
+
+    return <Pattern {...otherProps} />;
+};
+
+export const sm = ({
+    className,
+    svgClassName,
+    childrenClassName,
+    children = <SearchLg className="size-6" />,
+    ...otherProps
+}: Omit<IllustrationProps, "size">) => {
+    return (
+        <div {...otherProps} className={cx("relative h-30 w-38", className)}>
+            <svg viewBox="0 0 152 120" fill="none" className={cx("size-full stroke-inherit text-inherit", svgClassName)}>
+                <circle cx="76" cy="52" r="52" className="fill-utility-gray-100" />
+
+                <circle cx="21" cy="19" r="5" className="fill-utility-gray-100" />
+                <circle cx="18" cy="109" r="7" className="fill-utility-gray-100" />
+                <circle cx="145" cy="35" r="7" className="fill-utility-gray-100" />
+                <circle cx="134" cy="8" r="4" className="fill-utility-gray-100" />
+
+                <g filter="url(#filter-01-sm)">
+                    <path
+                        d="M78.6 16C67.8273 16 58.2978 21.3233 52.4987 29.4829C50.605 29.0363 48.6301 28.8 46.6 28.8C32.4615 28.8 21 40.2615 21 54.4C21 68.5385 32.4615 80 46.6 80L110.6 80C122.971 80 133 69.9712 133 57.6C133 45.2288 122.971 35.2 110.6 35.2C109.721 35.2 108.854 35.2506 108.002 35.349C103.098 23.9677 91.7797 16 78.6 16Z"
+                        className="fill-bg-secondary"
+                    />
+                    <path
+                        d="M78.6 15.5C67.7787 15.5 58.1927 20.7893 52.2864 28.9214C50.4555 28.5145 48.5525 28.3 46.6 28.3C32.1854 28.3 20.5 39.9854 20.5 54.4C20.5 68.8146 32.1854 80.5 46.6 80.5L110.6 80.5C123.247 80.5 133.5 70.2473 133.5 57.6C133.5 44.9527 123.247 34.7 110.6 34.7C109.828 34.7 109.065 34.7382 108.313 34.8128C103.256 23.4354 91.8553 15.5 78.6 15.5Z"
+                        className="stroke-border-secondary_alt"
+                    />
+                    <ellipse cx="46.6" cy="54.3998" rx="25.6" ry="25.6" fill="url(#cloud-gradient-01-sm)" />
+                    <circle cx="78.6" cy="48" r="32" fill="url(#cloud-gradient-02-sm)" />
+                    <ellipse cx="110.6" cy="57.6002" rx="22.4" ry="22.4" fill="url(#cloud-gradient-03-sm)" />
+                </g>
+
+                <defs>
+                    <filter id="filter-01-sm" x="0" y="15" width="154" height="106" filterUnits="userSpaceOnUse" colorInterpolationFilters="sRGB">
+                        <feFlood floodOpacity="0" result="BackgroundImageFix" />
+                        <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha" />
+                        <feMorphology radius="1.5" operator="erode" in="SourceAlpha" result="effect-01-sm" />
+                        <feOffset dy="3" />
+                        <feGaussianBlur stdDeviation="1.5" />
+                        <feColorMatrix type="matrix" values="0 0 0 0 0.0392157 0 0 0 0 0.0496732 0 0 0 0 0.0705882 0 0 0 0.04 0" />
+                        <feBlend mode="normal" in2="BackgroundImageFix" result="effect-01-sm" />
+                        <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha" />
+                        <feMorphology radius="4" operator="erode" in="SourceAlpha" result="effect-02-sm" />
+                        <feOffset dy="8" />
+                        <feGaussianBlur stdDeviation="4" />
+                        <feColorMatrix type="matrix" values="0 0 0 0 0.0392157 0 0 0 0 0.0496732 0 0 0 0 0.0705882 0 0 0 0.03 0" />
+                        <feBlend mode="normal" in2="effect-02-sm" result="effect-02-sm" />
+                        <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha" />
+                        <feMorphology radius="4" operator="erode" in="SourceAlpha" result="effect-03-sm" />
+                        <feOffset dy="20" />
+                        <feGaussianBlur stdDeviation="12" />
+                        <feColorMatrix type="matrix" values="0 0 0 0 0.0392157 0 0 0 0 0.0496732 0 0 0 0 0.0705882 0 0 0 0.08 0" />
+                        <feBlend mode="normal" in2="effect-02-sm" result="effect-03-sm" />
+                        <feBlend mode="normal" in="SourceGraphic" in2="effect-03-sm" result="shape" />
+                    </filter>
+                    <linearGradient id="cloud-gradient-01-sm" x1="26.9429" y1="37.4855" x2="72.2" y2="79.9998" gradientUnits="userSpaceOnUse">
+                        <stop stopColor="currentColor" className="text-utility-gray-200" />
+                        <stop offset="0.350715" stopColor="currentColor" className="text-utility-gray-50" />
+                    </linearGradient>
+                    <linearGradient id="cloud-gradient-02-sm" x1="54.0286" y1="26.8571" x2="110.6" y2="80" gradientUnits="userSpaceOnUse">
+                        <stop stopColor="currentColor" className="text-utility-gray-200" />
+                        <stop offset="0.350715" stopColor="currentColor" className="text-utility-gray-50" />
+                    </linearGradient>
+                    <linearGradient id="cloud-gradient-03-sm" x1="93.4" y1="42.8002" x2="133" y2="80.0002" gradientUnits="userSpaceOnUse">
+                        <stop stopColor="currentColor" className="text-utility-gray-200" />
+                        <stop offset="0.350715" stopColor="currentColor" className="text-utility-gray-50" />
+                    </linearGradient>
+                </defs>
+            </svg>
+
+            {children && (
+                <span
+                    className={cx(
+                        "absolute inset-x-13 bottom-2 z-10 flex size-12 items-center justify-center rounded-full bg-alpha-black/20 text-fg-white backdrop-blur-xs",
+                        childrenClassName,
+                    )}
+                >
+                    {children}
+                </span>
+            )}
+        </div>
+    );
+};
+
+export const md = ({
+    className,
+    svgClassName,
+    childrenClassName,
+    children = <SearchLg className="size-7" />,
+    ...otherProps
+}: Omit<IllustrationProps, "size">) => {
+    return (
+        <div {...otherProps} className={cx("relative h-32 w-43", className)}>
+            <svg viewBox="0 0 182 137" fill="none" className={cx("size-full stroke-inherit text-inherit", svgClassName)}>
+                <circle cx="91" cy="64" r="64" className="fill-utility-gray-100" />
+
+                <circle cx="25" cy="20" r="6" className="fill-utility-gray-100" />
+                <circle cx="22" cy="112" r="8" className="fill-utility-gray-100" />
+                <circle cx="165" cy="36" r="8" className="fill-utility-gray-100" />
+                <circle cx="154" cy="9" r="5" className="fill-utility-gray-100" />
+
+                <g filter="url(#filter-01-md)">
+                    <path
+                        d="M93 16C79.534 16 67.6222 22.6541 60.3733 32.8536C58.0062 32.2954 55.5376 32 53 32C35.3269 32 21 46.3269 21 64C21 81.6731 35.3269 96 53 96H133C148.464 96 161 83.464 161 68C161 52.536 148.464 40 133 40C131.902 40 130.818 40.0633 129.752 40.1863C123.623 25.9596 109.475 16 93 16Z"
+                        className="fill-bg-secondary"
+                    />
+                    <path
+                        d="M93 15.5C79.4856 15.5 67.5173 22.1198 60.161 32.2916C57.8566 31.7734 55.4599 31.5 53 31.5C35.0507 31.5 20.5 46.0507 20.5 64C20.5 81.9493 35.0507 96.5 53 96.5H133C148.74 96.5 161.5 83.7401 161.5 68C161.5 52.2599 148.74 39.5 133 39.5C132.009 39.5 131.029 39.5506 130.064 39.6495C123.78 25.427 109.55 15.5 93 15.5Z"
+                        stroke="black"
+                        strokeOpacity="0.08"
+                    />
+                    <circle cx="53" cy="64" r="32" fill="url(#cloud-gradient-01-md)" />
+                    <circle cx="93" cy="56" r="40" fill="url(#cloud-gradient-02-md)" />
+                    <circle cx="133" cy="68" r="28" fill="url(#cloud-gradient-03-md)" />
+                </g>
+
+                <defs>
+                    <filter id="filter-01-md" x="0" y="15" width="182" height="122" filterUnits="userSpaceOnUse" colorInterpolationFilters="sRGB">
+                        <feFlood floodOpacity="0" result="BackgroundImageFix" />
+                        <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha" />
+                        <feMorphology radius="1.5" operator="erode" in="SourceAlpha" result="effect-01-md" />
+                        <feOffset dy="3" />
+                        <feGaussianBlur stdDeviation="1.5" />
+                        <feColorMatrix type="matrix" values="0 0 0 0 0.0392157 0 0 0 0 0.0496732 0 0 0 0 0.0705882 0 0 0 0.04 0" />
+                        <feBlend mode="normal" in2="BackgroundImageFix" result="effect-01-md" />
+                        <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha" />
+                        <feMorphology radius="4" operator="erode" in="SourceAlpha" result="effect-02-md" />
+                        <feOffset dy="8" />
+                        <feGaussianBlur stdDeviation="4" />
+                        <feColorMatrix type="matrix" values="0 0 0 0 0.0392157 0 0 0 0 0.0496732 0 0 0 0 0.0705882 0 0 0 0.03 0" />
+                        <feBlend mode="normal" in2="effect-01-md" result="effect-02-md" />
+                        <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha" />
+                        <feMorphology radius="4" operator="erode" in="SourceAlpha" result="effect-03-md" />
+                        <feOffset dy="20" />
+                        <feGaussianBlur stdDeviation="12" />
+                        <feColorMatrix type="matrix" values="0 0 0 0 0.0392157 0 0 0 0 0.0496732 0 0 0 0 0.0705882 0 0 0 0.08 0" />
+                        <feBlend mode="normal" in2="effect-02-md" result="effect-03-md" />
+                        <feBlend mode="normal" in="SourceGraphic" in2="effect-03-md" result="shape" />
+                    </filter>
+                    <linearGradient id="cloud-gradient-01-md" x1="28.4286" y1="42.8571" x2="85" y2="96" gradientUnits="userSpaceOnUse">
+                        <stop stopColor="currentColor" className="text-utility-gray-200" />
+                        <stop offset="0.350715" stopColor="currentColor" className="text-utility-gray-50" />
+                    </linearGradient>
+                    <linearGradient id="cloud-gradient-02-md" x1="62.2857" y1="29.5714" x2="133" y2="95.9999" gradientUnits="userSpaceOnUse">
+                        <stop stopColor="currentColor" className="text-utility-gray-200" />
+                        <stop offset="0.350715" stopColor="currentColor" className="text-utility-gray-50" />
+                    </linearGradient>
+                    <linearGradient id="cloud-gradient-03-md" x1="111.5" y1="49.5" x2="161" y2="96" gradientUnits="userSpaceOnUse">
+                        <stop stopColor="currentColor" className="text-utility-gray-200" />
+                        <stop offset="0.350715" stopColor="currentColor" className="text-utility-gray-50" />
+                    </linearGradient>
+                </defs>
+            </svg>
+
+            {children && (
+                <span
+                    className={cx(
+                        "absolute bottom-3 left-1/2 z-10 flex size-14 -translate-x-1/2 items-center justify-center rounded-full bg-alpha-black/20 text-fg-white backdrop-blur-xs",
+                        childrenClassName,
+                    )}
+                >
+                    {children}
+                </span>
+            )}
+        </div>
+    );
+};
+
+export const lg = ({
+    className,
+    svgClassName,
+    childrenClassName,
+    children = <SearchLg className="size-7" />,
+    ...otherProps
+}: Omit<IllustrationProps, "size">) => {
+    return (
+        <div {...otherProps} className={cx("relative h-40 w-55", className)}>
+            <svg viewBox="0 0 220 160" fill="none" className={cx("size-full stroke-inherit text-inherit", svgClassName)}>
+                <circle cx="110" cy="80" r="80" className="fill-utility-gray-100" />
+                <circle cx="26" cy="20" r="8" className="fill-utility-gray-100" />
+                <circle cx="198" cy="126" r="6" className="fill-utility-gray-100" />
+                <circle cx="25" cy="138" r="10" className="fill-utility-gray-100" />
+                <circle cx="210" cy="46" r="10" className="fill-utility-gray-100" />
+                <circle cx="191" cy="11" r="7" className="fill-utility-gray-100" />
+                <g filter="url(#filter-01-lg)">
+                    <mask id="path-01-lg" maskUnits="userSpaceOnUse" x="23" y="15" width="176" height="102" fill="black">
+                        <rect fill="white" x="23" y="15" width="176" height="102" />
+                        <path
+                            fillRule="evenodd"
+                            clipRule="evenodd"
+                            d="M113.486 16C96.7495 16 81.9448 24.2701 72.9354 36.9466C69.9934 36.2528 66.9253 35.8857 63.7714 35.8857C41.8063 35.8857 24 53.692 24 75.6571C24 97.6223 41.8063 115.429 63.7714 115.429H163.2C182.42 115.429 198 99.8481 198 80.6286C198 61.4091 182.42 45.8286 163.2 45.8286C161.835 45.8286 160.488 45.9072 159.164 46.0601C151.546 28.3784 133.961 16 113.486 16Z"
+                        />
+                    </mask>
+                    <path
+                        fillRule="evenodd"
+                        clipRule="evenodd"
+                        d="M113.486 16C96.7495 16 81.9448 24.2701 72.9354 36.9466C69.9934 36.2528 66.9253 35.8857 63.7714 35.8857C41.8063 35.8857 24 53.692 24 75.6571C24 97.6223 41.8063 115.429 63.7714 115.429H163.2C182.42 115.429 198 99.8481 198 80.6286C198 61.4091 182.42 45.8286 163.2 45.8286C161.835 45.8286 160.488 45.9072 159.164 46.0601C151.546 28.3784 133.961 16 113.486 16Z"
+                        className="fill-bg-secondary"
+                    />
+                    <path
+                        d="M72.9354 36.9466L72.7059 37.9199L73.3607 38.0744L73.7505 37.5259L72.9354 36.9466ZM63.7714 115.429V116.429V115.429ZM159.164 46.0601L158.245 46.4558L158.54 47.1389L159.279 47.0535L159.164 46.0601ZM73.7505 37.5259C82.5804 25.102 97.0869 17 113.486 17V15C96.412 15 81.3092 23.4382 72.1203 36.3673L73.7505 37.5259ZM63.7714 36.8857C66.8474 36.8857 69.8386 37.2437 72.7059 37.9199L73.1649 35.9733C70.1483 35.2619 67.0031 34.8857 63.7714 34.8857V36.8857ZM25 75.6571C25 54.2443 42.3586 36.8857 63.7714 36.8857V34.8857C41.254 34.8857 23 53.1397 23 75.6571H25ZM63.7714 114.429C42.3586 114.429 25 97.07 25 75.6571H23C23 98.1746 41.254 116.429 63.7714 116.429V114.429ZM163.2 114.429H63.7714V116.429H163.2V114.429ZM197 80.6286C197 99.2958 181.867 114.429 163.2 114.429V116.429C182.972 116.429 199 100.4 199 80.6286H197ZM163.2 46.8286C181.867 46.8286 197 61.9613 197 80.6286H199C199 60.8568 182.972 44.8286 163.2 44.8286V46.8286ZM159.279 47.0535C160.565 46.905 161.873 46.8286 163.2 46.8286V44.8286C161.796 44.8286 160.411 44.9094 159.049 45.0667L159.279 47.0535ZM113.486 17C133.548 17 150.78 29.1277 158.245 46.4558L160.082 45.6644C152.312 27.6291 134.375 15 113.486 15V17Z"
+                        className="fill-border-secondary_alt"
+                        mask="url(#path-01-lg)"
+                    />
+                    <circle cx="63.7714" cy="75.6572" r="39.7714" fill="url(#cloud-gradient-01-lg)" />
+                    <circle cx="113.486" cy="65.7143" r="49.7143" fill="url(#cloud-gradient-02-lg)" />
+                    <circle cx="163.2" cy="80.6286" r="34.8" fill="url(#cloud-gradient-03-lg)" />
+                </g>
+
+                <defs>
+                    <filter id="filter-01-lg" x="3" y="15" width="216" height="141.429" filterUnits="userSpaceOnUse" colorInterpolationFilters="sRGB">
+                        <feFlood floodOpacity="0" result="BackgroundImageFix" />
+                        <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha" />
+                        <feMorphology radius="1.5" operator="erode" in="SourceAlpha" result="effect-01-lg" />
+                        <feOffset dy="3" />
+                        <feGaussianBlur stdDeviation="1.5" />
+                        <feColorMatrix type="matrix" values="0 0 0 0 0.0392157 0 0 0 0 0.0496732 0 0 0 0 0.0705882 0 0 0 0.04 0" />
+                        <feBlend mode="normal" in2="BackgroundImageFix" result="effect-01-lg" />
+                        <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha" />
+                        <feMorphology radius="4" operator="erode" in="SourceAlpha" result="effect-02-lg" />
+                        <feOffset dy="8" />
+                        <feGaussianBlur stdDeviation="4" />
+                        <feColorMatrix type="matrix" values="0 0 0 0 0.0392157 0 0 0 0 0.0496732 0 0 0 0 0.0705882 0 0 0 0.03 0" />
+                        <feBlend mode="normal" in2="effect-01-lg" result="effect-02-lg" />
+                        <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha" />
+                        <feMorphology radius="4" operator="erode" in="SourceAlpha" result="effect-03-lg" />
+                        <feOffset dy="20" />
+                        <feGaussianBlur stdDeviation="12" />
+                        <feColorMatrix type="matrix" values="0 0 0 0 0.0392157 0 0 0 0 0.0496732 0 0 0 0 0.0705882 0 0 0 0.08 0" />
+                        <feBlend mode="normal" in2="effect-02-lg" result="effect-03-lg" />
+                        <feBlend mode="normal" in="SourceGraphic" in2="effect-03-lg" result="shape" />
+                    </filter>
+                    <linearGradient id="cloud-gradient-01-lg" x1="33.2326" y1="49.3796" x2="103.543" y2="115.429" gradientUnits="userSpaceOnUse">
+                        <stop stopColor="currentColor" className="text-utility-gray-200" />
+                        <stop offset="0.350715" stopColor="currentColor" className="text-utility-gray-50" />
+                    </linearGradient>
+                    <linearGradient id="cloud-gradient-02-lg" x1="75.3122" y1="32.8673" x2="163.2" y2="115.428" gradientUnits="userSpaceOnUse">
+                        <stop stopColor="currentColor" className="text-utility-gray-200" />
+                        <stop offset="0.350715" stopColor="currentColor" className="text-utility-gray-50" />
+                    </linearGradient>
+                    <linearGradient id="cloud-gradient-03-lg" x1="136.479" y1="57.6357" x2="198" y2="115.429" gradientUnits="userSpaceOnUse">
+                        <stop stopColor="currentColor" className="text-utility-gray-200" />
+                        <stop offset="0.350715" stopColor="currentColor" className="text-utility-gray-50" />
+                    </linearGradient>
+                </defs>
+            </svg>
+
+            {children && (
+                <span
+                    className={cx(
+                        "absolute bottom-5 left-1/2 z-10 flex size-14 -translate-x-1/2 items-center justify-center rounded-full bg-alpha-black/20 text-fg-white backdrop-blur-xs",
+                        childrenClassName,
+                    )}
+                >
+                    {children}
+                </span>
+            )}
+        </div>
+    );
+};
+
+const sizes = {
+    sm,
+    md,
+    lg,
+};
diff --git a/src/components/shared-assets/illustrations/credit-card.tsx b/src/components/shared-assets/illustrations/credit-card.tsx
new file mode 100644
index 0000000..f388c27
--- /dev/null
+++ b/src/components/shared-assets/illustrations/credit-card.tsx
@@ -0,0 +1,303 @@
+import type { HTMLAttributes } from "react";
+import { AlertCircle } from "@untitledui/icons";
+import { cx } from "@/utils/cx";
+
+interface IllustrationProps extends HTMLAttributes<HTMLDivElement> {
+    size?: "sm" | "md" | "lg";
+    svgClassName?: string;
+    childrenClassName?: string;
+}
+
+export const CreditCardIllustration = ({ size = "lg", ...otherProps }: IllustrationProps) => {
+    const Pattern = sizes[size];
+
+    return <Pattern {...otherProps} />;
+};
+
+export const sm = ({
+    className,
+    svgClassName,
+    childrenClassName,
+    children = <AlertCircle className="size-6" />,
+    ...otherProps
+}: Omit<IllustrationProps, "size">) => {
+    return (
+        <div {...otherProps} className={cx("relative h-29.5 w-38", className)}>
+            <svg viewBox="0 0 152 118" fill="none" className={cx("size-full stroke-inherit text-inherit", svgClassName)}>
+                <circle cx="21" cy="5" r="5" className="fill-utility-gray-100" />
+                <circle cx="18" cy="109" r="7" className="fill-utility-gray-100" />
+                <circle cx="145" cy="35" r="7" className="fill-utility-gray-100" />
+                <circle cx="134" cy="8" r="4" className="fill-utility-gray-100" />
+                <circle cx="76" cy="52" r="52" className="fill-utility-gray-100" />
+                <g filter="url(#credit-card-shadow-sm)">
+                    <path
+                        d="M18 18C18 14.6863 20.6863 12 24 12H127C130.314 12 133 14.6863 133 18V78C133 81.3137 130.314 84 127 84H24C20.6863 84 18 81.3137 18 78V18Z"
+                        fill="url(#credit-card-gradient-sm)"
+                    />
+                    <path
+                        d="M127 11.75C130.452 11.75 133.25 14.5482 133.25 18V78C133.25 81.4518 130.452 84.25 127 84.25H24C20.5482 84.25 17.75 81.4518 17.75 78V18C17.75 14.5482 20.5482 11.75 24 11.75H127Z"
+                        className="stroke-border-secondary_alt"
+                        strokeWidth="0.5"
+                    />
+                    <path
+                        d="M28 28C28 26.8954 28.8954 26 30 26H46C47.1046 26 48 26.8954 48 28V39C48 40.1046 47.1046 41 46 41H30C28.8954 41 28 40.1046 28 39V28Z"
+                        className="fill-utility-gray-200"
+                    />
+                    <circle cx="114.667" cy="32.3335" r="8.33333" className="fill-utility-gray-300" />
+                    <circle cx="104.667" cy="32.3333" r="8.33333" className="fill-utility-gray-200" />
+                    <path
+                        d="M28 73.6667C28 72.7462 28.7462 72 29.6667 72H46.3333C47.2538 72 48 72.7462 48 73.6667C48 74.5871 47.2538 75.3333 46.3333 75.3333H29.6667C28.7462 75.3333 28 74.5871 28 73.6667Z"
+                        className="fill-utility-gray-300"
+                    />
+                    <path
+                        d="M53 73.6667C53 72.7462 53.7462 72 54.6667 72H71.3333C72.2538 72 73 72.7462 73 73.6667C73 74.5871 72.2538 75.3333 71.3333 75.3333H54.6667C53.7462 75.3333 53 74.5871 53 73.6667Z"
+                        className="fill-utility-gray-300"
+                    />
+                    <path
+                        d="M78 73.6667C78 72.7462 78.7462 72 79.6667 72H96.3333C97.2538 72 98 72.7462 98 73.6667C98 74.5871 97.2538 75.3333 96.3333 75.3333H79.6667C78.7462 75.3333 78 74.5871 78 73.6667Z"
+                        className="fill-utility-gray-300"
+                    />
+                    <path
+                        d="M103 73.6667C103 72.7462 103.746 72 104.667 72H121.333C122.254 72 123 72.7462 123 73.6667C123 74.5871 122.254 75.3333 121.333 75.3333H104.667C103.746 75.3333 103 74.5871 103 73.6667Z"
+                        className="fill-utility-gray-300"
+                    />
+                </g>
+
+                <defs>
+                    <filter
+                        id="credit-card-shadow-sm"
+                        x="0.833333"
+                        y="11.5"
+                        width="149.333"
+                        height="106.333"
+                        filterUnits="userSpaceOnUse"
+                        colorInterpolationFilters="sRGB"
+                    >
+                        <feFlood floodOpacity="0" result="BackgroundImageFix" />
+                        <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha" />
+                        <feMorphology radius="3.33333" operator="erode" in="SourceAlpha" result="credit-card-shadow-sm-effect1" />
+                        <feOffset dy="6.66667" />
+                        <feGaussianBlur stdDeviation="3.33333" />
+                        <feColorMatrix type="matrix" values="0 0 0 0 0.0627451 0 0 0 0 0.0941176 0 0 0 0 0.156863 0 0 0 0.04 0" />
+                        <feBlend mode="normal" in2="BackgroundImageFix" result="credit-card-shadow-sm-effect1" />
+                        <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha" />
+                        <feMorphology radius="3.33333" operator="erode" in="SourceAlpha" result="credit-card-shadow-sm-effect2" />
+                        <feOffset dy="16.6667" />
+                        <feGaussianBlur stdDeviation="10" />
+                        <feColorMatrix type="matrix" values="0 0 0 0 0.0627451 0 0 0 0 0.0941176 0 0 0 0 0.156863 0 0 0 0.1 0" />
+                        <feBlend mode="normal" in2="credit-card-shadow-sm-effect1" result="credit-card-shadow-sm-effect2" />
+                        <feBlend mode="normal" in="SourceGraphic" in2="credit-card-shadow-sm-effect2" result="shape" />
+                    </filter>
+                    <linearGradient id="credit-card-gradient-sm" x1="22.0049" y1="83.1477" x2="19.9135" y2="17.2505" gradientUnits="userSpaceOnUse">
+                        <stop stopColor="currentColor" className="text-utility-gray-100" />
+                        <stop offset="1" stopColor="currentColor" className="text-utility-gray-50" />
+                    </linearGradient>
+                </defs>
+            </svg>
+
+            {children && (
+                <span
+                    className={cx(
+                        "absolute inset-x-13 bottom-2 z-10 flex size-12 items-center justify-center rounded-full bg-alpha-black/20 text-fg-white backdrop-blur-xs",
+                        childrenClassName,
+                    )}
+                >
+                    {children}
+                </span>
+            )}
+        </div>
+    );
+};
+
+export const md = ({
+    className,
+    svgClassName,
+    childrenClassName,
+    children = <AlertCircle className="size-7" />,
+    ...otherProps
+}: Omit<IllustrationProps, "size">) => {
+    return (
+        <div {...otherProps} className={cx("relative h-35.75 w-45", className)}>
+            <svg viewBox="0 0 180 143" fill="none" className={cx("size-full stroke-inherit text-inherit", svgClassName)}>
+                <circle cx="90" cy="64" r="64" className="fill-utility-gray-100" />
+                <circle cx="24" cy="6" r="6" className="fill-utility-gray-100" />
+                <circle cx="21" cy="112" r="8" className="fill-utility-gray-100" />
+                <circle cx="164" cy="36" r="8" className="fill-utility-gray-100" />
+                <circle cx="153" cy="9" r="5" className="fill-utility-gray-100" />
+                <g filter="url(#credit-card-shadow-md)">
+                    <path
+                        d="M21 22C21 18.6863 23.6863 16 27 16H153C156.314 16 159 18.6863 159 22V96C159 99.3137 156.314 102 153 102H27C23.6863 102 21 99.3137 21 96V22Z"
+                        fill="url(#credit-card-gradient-md)"
+                    />
+                    <path
+                        d="M153 15.75C156.452 15.75 159.25 18.5482 159.25 22V96C159.25 99.4518 156.452 102.25 153 102.25H27C23.5482 102.25 20.75 99.4518 20.75 96V22C20.75 18.5482 23.5482 15.75 27 15.75H153Z"
+                        className="stroke-border-secondary_alt"
+                        strokeWidth="0.5"
+                    />
+                    <path
+                        d="M33 38C33 36.8954 33.8954 36 35 36H55C56.1046 36 57 36.8954 57 38V52C57 53.1046 56.1046 54 55 54H35C33.8954 54 33 53.1046 33 52V38Z"
+                        className="fill-utility-gray-200"
+                    />
+                    <circle cx="137" cy="42" r="10" className="fill-utility-gray-300" />
+                    <circle cx="125" cy="42" r="10" className="fill-utility-gray-200" />
+                    <path
+                        d="M33 89C33 87.8954 33.8954 87 35 87H55C56.1046 87 57 87.8954 57 89C57 90.1046 56.1046 91 55 91H35C33.8954 91 33 90.1046 33 89Z"
+                        className="fill-utility-gray-300"
+                    />
+                    <path
+                        d="M63 89C63 87.8954 63.8954 87 65 87H85C86.1046 87 87 87.8954 87 89C87 90.1046 86.1046 91 85 91H65C63.8954 91 63 90.1046 63 89Z"
+                        className="fill-utility-gray-300"
+                    />
+                    <path
+                        d="M93 89C93 87.8954 93.8954 87 95 87H115C116.105 87 117 87.8954 117 89C117 90.1046 116.105 91 115 91H95C93.8954 91 93 90.1046 93 89Z"
+                        className="fill-utility-gray-300"
+                    />
+                    <path
+                        d="M123 89C123 87.8954 123.895 87 125 87H145C146.105 87 147 87.8954 147 89C147 90.1046 146.105 91 145 91H125C123.895 91 123 90.1046 123 89Z"
+                        className="fill-utility-gray-300"
+                    />
+                </g>
+
+                <defs>
+                    <filter id="credit-card-shadow-md" x="0.5" y="15.5" width="179" height="127" filterUnits="userSpaceOnUse" colorInterpolationFilters="sRGB">
+                        <feFlood floodOpacity="0" result="BackgroundImageFix" />
+                        <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha" />
+                        <feMorphology radius="1.5" operator="erode" in="SourceAlpha" result="credit-card-shadow-md-effect1" />
+                        <feOffset dy="3" />
+                        <feGaussianBlur stdDeviation="1.5" />
+                        <feColorMatrix type="matrix" values="0 0 0 0 0.0392157 0 0 0 0 0.0496732 0 0 0 0 0.0705882 0 0 0 0.04 0" />
+                        <feBlend mode="normal" in2="BackgroundImageFix" result="credit-card-shadow-md-effect1" />
+                        <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha" />
+                        <feMorphology radius="4" operator="erode" in="SourceAlpha" result="credit-card-shadow-md-effect2" />
+                        <feOffset dy="8" />
+                        <feGaussianBlur stdDeviation="4" />
+                        <feColorMatrix type="matrix" values="0 0 0 0 0.0392157 0 0 0 0 0.0496732 0 0 0 0 0.0705882 0 0 0 0.03 0" />
+                        <feBlend mode="normal" in2="credit-card-shadow-md-effect1" result="credit-card-shadow-md-effect2" />
+                        <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha" />
+                        <feMorphology radius="4" operator="erode" in="SourceAlpha" result="credit-card-shadow-md-effect3" />
+                        <feOffset dy="20" />
+                        <feGaussianBlur stdDeviation="12" />
+                        <feColorMatrix type="matrix" values="0 0 0 0 0.0392157 0 0 0 0 0.0496732 0 0 0 0 0.0705882 0 0 0 0.08 0" />
+                        <feBlend mode="normal" in2="credit-card-shadow-md-effect2" result="credit-card-shadow-md-effect3" />
+                        <feBlend mode="normal" in="SourceGraphic" in2="credit-card-shadow-md-effect3" result="shape" />
+                    </filter>
+                    <linearGradient id="credit-card-gradient-md" x1="25.8058" y1="100.982" x2="23.3193" y2="22.2707" gradientUnits="userSpaceOnUse">
+                        <stop stopColor="currentColor" className="text-utility-gray-100" />
+                        <stop offset="1" stopColor="currentColor" className="text-utility-gray-50" />
+                    </linearGradient>
+                </defs>
+            </svg>
+
+            {children && (
+                <span
+                    className={cx(
+                        "absolute bottom-3 left-1/2 z-10 flex size-14 -translate-x-1/2 items-center justify-center rounded-full bg-alpha-black/20 text-fg-white backdrop-blur-xs",
+                        childrenClassName,
+                    )}
+                >
+                    {children}
+                </span>
+            )}
+        </div>
+    );
+};
+
+export const lg = ({
+    className,
+    svgClassName,
+    childrenClassName,
+    children = <AlertCircle className="size-7" />,
+    ...otherProps
+}: Omit<IllustrationProps, "size">) => {
+    return (
+        <div {...otherProps} className={cx("relative h-41.75 w-55", className)}>
+            <svg viewBox="0 0 220 167" fill="none" className={cx("size-full stroke-inherit text-inherit", svgClassName)}>
+                <circle cx="110" cy="80" r="80" className="fill-utility-gray-100" />
+                <circle cx="18" cy="12" r="8" className="fill-utility-gray-100" />
+                <circle cx="198" cy="142" r="6" className="fill-utility-gray-100" />
+                <circle cx="25" cy="138" r="10" className="fill-utility-gray-100" />
+                <circle cx="210" cy="46" r="10" className="fill-utility-gray-100" />
+                <circle cx="191" cy="11" r="7" className="fill-utility-gray-100" />
+                <g filter="url(#credit-card-shadow-lg)">
+                    <path
+                        d="M27 28C27 24.6863 29.6863 22 33 22H187C190.314 22 193 24.6863 193 28V120C193 123.314 190.314 126 187 126H33C29.6863 126 27 123.314 27 120V28Z"
+                        fill="url(#credit-card-gradient-lg)"
+                    />
+                    <path
+                        d="M187 21.75C190.452 21.75 193.25 24.5482 193.25 28V120C193.25 123.452 190.452 126.25 187 126.25H33C29.5482 126.25 26.75 123.452 26.75 120V28C26.75 24.5482 29.5482 21.75 33 21.75H187Z"
+                        className="stroke-border-secondary_alt"
+                        strokeWidth="0.5"
+                    />
+                    <path
+                        d="M41.0698 48.186C41.0698 47.0815 41.9653 46.186 43.0698 46.186H68.0931C69.1977 46.186 70.0931 47.0815 70.0931 48.186V65.9535C70.0931 67.058 69.1977 67.9535 68.0931 67.9535H43.0698C41.9653 67.9535 41.0698 67.058 41.0698 65.9535V48.186Z"
+                        className="fill-utility-gray-200"
+                    />
+                    <circle cx="166.837" cy="53.4419" r="12.093" className="fill-utility-gray-300" />
+                    <circle cx="152.325" cy="53.4419" r="12.093" className="fill-utility-gray-200" />
+                    <path
+                        d="M41.0698 110.279C41.0698 108.943 42.1527 107.86 43.4884 107.86H67.6745C69.0102 107.86 70.0931 108.943 70.0931 110.279C70.0931 111.615 69.0102 112.698 67.6745 112.698H43.4884C42.1527 112.698 41.0698 111.615 41.0698 110.279Z"
+                        className="fill-utility-gray-300"
+                    />
+                    <path
+                        d="M77.3489 110.279C77.3489 108.943 78.4317 107.86 79.7675 107.86H103.954C105.289 107.86 106.372 108.943 106.372 110.279C106.372 111.615 105.289 112.698 103.954 112.698H79.7675C78.4317 112.698 77.3489 111.615 77.3489 110.279Z"
+                        className="fill-utility-gray-300"
+                    />
+                    <path
+                        d="M113.628 110.279C113.628 108.943 114.711 107.86 116.047 107.86H140.233C141.568 107.86 142.651 108.943 142.651 110.279C142.651 111.615 141.568 112.698 140.233 112.698H116.047C114.711 112.698 113.628 111.615 113.628 110.279Z"
+                        className="fill-utility-gray-300"
+                    />
+                    <path
+                        d="M149.907 110.279C149.907 108.943 150.99 107.86 152.326 107.86H176.512C177.847 107.86 178.93 108.943 178.93 110.279C178.93 111.615 177.847 112.698 176.512 112.698H152.326C150.99 112.698 149.907 111.615 149.907 110.279Z"
+                        className="fill-utility-gray-300"
+                    />
+                </g>
+
+                <defs>
+                    <filter id="credit-card-shadow-lg" x="6.5" y="21.5" width="207" height="145" filterUnits="userSpaceOnUse" colorInterpolationFilters="sRGB">
+                        <feFlood floodOpacity="0" result="BackgroundImageFix" />
+                        <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha" />
+                        <feMorphology radius="1.5" operator="erode" in="SourceAlpha" result="credit-card-shadow-lg-effect1" />
+                        <feOffset dy="3" />
+                        <feGaussianBlur stdDeviation="1.5" />
+                        <feColorMatrix type="matrix" values="0 0 0 0 0.0392157 0 0 0 0 0.0496732 0 0 0 0 0.0705882 0 0 0 0.04 0" />
+                        <feBlend mode="normal" in2="BackgroundImageFix" result="credit-card-shadow-lg-effect1" />
+                        <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha" />
+                        <feMorphology radius="4" operator="erode" in="SourceAlpha" result="credit-card-shadow-lg-effect2" />
+                        <feOffset dy="8" />
+                        <feGaussianBlur stdDeviation="4" />
+                        <feColorMatrix type="matrix" values="0 0 0 0 0.0392157 0 0 0 0 0.0496732 0 0 0 0 0.0705882 0 0 0 0.03 0" />
+                        <feBlend mode="normal" in2="credit-card-shadow-lg-effect1" result="credit-card-shadow-lg-effect2" />
+                        <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha" />
+                        <feMorphology radius="4" operator="erode" in="SourceAlpha" result="credit-card-shadow-lg-effect3" />
+                        <feOffset dy="20" />
+                        <feGaussianBlur stdDeviation="12" />
+                        <feColorMatrix type="matrix" values="0 0 0 0 0.0392157 0 0 0 0 0.0496732 0 0 0 0 0.0705882 0 0 0 0.08 0" />
+                        <feBlend mode="normal" in2="credit-card-shadow-lg-effect2" result="credit-card-shadow-lg-effect3" />
+                        <feBlend mode="normal" in="SourceGraphic" in2="credit-card-shadow-lg-effect3" result="shape" />
+                    </filter>
+                    <linearGradient id="credit-card-gradient-lg" x1="32.7809" y1="124.769" x2="29.758" y2="29.5842" gradientUnits="userSpaceOnUse">
+                        <stop stopColor="currentColor" className="text-utility-gray-100" />
+                        <stop offset="1" stopColor="currentColor" className="text-utility-gray-50" />
+                    </linearGradient>
+                </defs>
+            </svg>
+
+            {children && (
+                <span
+                    className={cx(
+                        "absolute bottom-5 left-1/2 z-10 flex size-14 -translate-x-1/2 items-center justify-center rounded-full bg-alpha-black/20 text-fg-white backdrop-blur-xs",
+                        childrenClassName,
+                    )}
+                >
+                    {children}
+                </span>
+            )}
+        </div>
+    );
+};
+
+const sizes = {
+    sm,
+    md,
+    lg,
+};
diff --git a/src/components/shared-assets/illustrations/documents.tsx b/src/components/shared-assets/illustrations/documents.tsx
new file mode 100644
index 0000000..92172cd
--- /dev/null
+++ b/src/components/shared-assets/illustrations/documents.tsx
@@ -0,0 +1,538 @@
+import type { HTMLAttributes } from "react";
+import { UploadCloud02 } from "@untitledui/icons";
+import { cx } from "@/utils/cx";
+
+interface IllustrationProps extends HTMLAttributes<HTMLDivElement> {
+    size?: "sm" | "md" | "lg";
+    svgClassName?: string;
+    childrenClassName?: string;
+}
+
+export const DocumentsIllustration = ({ size = "lg", ...otherProps }: IllustrationProps) => {
+    const Pattern = sizes[size];
+
+    return <Pattern {...otherProps} />;
+};
+
+export const sm = ({
+    className,
+    svgClassName,
+    childrenClassName,
+    children = <UploadCloud02 className="size-6" />,
+    ...otherProps
+}: Omit<IllustrationProps, "size">) => {
+    return (
+        <div {...otherProps} className={cx("relative h-30 w-40.25", className)}>
+            <svg viewBox="0 0 161 120" fill="none" className={cx("size-full stroke-inherit text-inherit", svgClassName)}>
+                <circle cx="27" cy="11" r="5" className="fill-utility-gray-100" />
+                <circle cx="24" cy="109" r="7" className="fill-utility-gray-100" />
+                <circle cx="151" cy="35" r="7" className="fill-utility-gray-100" />
+                <circle cx="140" cy="8" r="4" className="fill-utility-gray-100" />
+                <circle cx="82" cy="52" r="52" className="fill-utility-gray-100" />
+                <g filter="url(#documents-shadow-01-sm)">
+                    <path
+                        d="M47.7267 79.1102L80.9652 63.6108C82.634 62.8326 83.356 60.8489 82.5778 59.1801L62.9485 17.0849L49.6564 12.2469L22.4612 24.9282C20.7924 25.7064 20.0704 27.6901 20.8486 29.359L43.296 77.4975C44.0741 79.1663 46.0578 79.8883 47.7267 79.1102Z"
+                        fill="url(#documents-gradient-01-sm)"
+                    />
+                    <path
+                        d="M82.8045 59.0745C83.6409 60.8685 82.8648 63.0009 81.071 63.8374L47.8323 79.3368C46.0384 80.1733 43.906 79.3971 43.0694 77.6033L20.622 29.4646L20.5484 29.2952C19.8352 27.5384 20.6177 25.5121 22.3555 24.7017L49.6448 11.9765L63.1313 16.8852L82.8045 59.0745Z"
+                        className="stroke-border-secondary_alt"
+                        strokeWidth="0.5"
+                    />
+                    <path d="M49.6569 12.2471L62.949 17.085L53.884 21.3121L49.6569 12.2471Z" className="fill-utility-gray-200" />
+                </g>
+                <g filter="url(#documents-shadow-02-sm)">
+                    <path
+                        d="M63.6162 67.7831H100.291C102.132 67.7831 103.625 66.2904 103.625 64.4491V18.0022L93.6227 8H63.6162C61.7748 8 60.2821 9.49271 60.2821 11.3341V64.4491C60.2821 66.2904 61.7748 67.7831 63.6162 67.7831Z"
+                        fill="url(#documents-gradient-02-sm)"
+                    />
+                    <path
+                        d="M103.875 64.4492C103.875 66.4285 102.27 68.0332 100.291 68.0332H63.6161C61.6368 68.0332 60.0322 66.4285 60.0321 64.4492V11.334L60.037 11.1494C60.1331 9.25583 61.6986 7.75004 63.6161 7.75H93.7264L103.875 17.8984V64.4492Z"
+                        className="stroke-border-secondary_alt"
+                        strokeWidth="0.5"
+                    />
+                    <path d="M93.6226 8L103.625 18.0022H93.6226V8Z" className="fill-utility-gray-200" />
+                </g>
+                <g filter="url(#documents-shadow-03-sm)">
+                    <path
+                        d="M82.4745 63.5909L115.713 79.0903C117.382 79.8685 119.366 79.1465 120.144 77.4777L139.773 35.3825L134.935 22.0903L107.74 9.40903C106.071 8.63085 104.087 9.35286 103.309 11.0217L80.8619 59.1602C80.0837 60.8291 80.8057 62.8128 82.4745 63.5909Z"
+                        fill="url(#documents-gradient-03-sm)"
+                    />
+                    <path
+                        d="M120.37 77.5835C119.534 79.3773 117.401 80.1535 115.607 79.317L82.3688 63.8176C80.5749 62.981 79.7988 60.8486 80.6352 59.0547L103.083 10.916L103.165 10.7507C104.053 9.0752 106.108 8.37211 107.846 9.18243L135.135 21.9076L140.044 35.3941L120.37 77.5835Z"
+                        className="stroke-border-secondary_alt"
+                        strokeWidth="0.5"
+                    />
+                    <path d="M134.936 22.0903L139.774 35.3825L130.708 31.1554L134.936 22.0903Z" className="fill-utility-gray-200" />
+                </g>
+
+                <defs>
+                    <filter
+                        id="documents-shadow-01-sm"
+                        x="-0.560448"
+                        y="8.0199"
+                        width="104.547"
+                        height="112.499"
+                        filterUnits="userSpaceOnUse"
+                        colorInterpolationFilters="sRGB"
+                    >
+                        <feFlood floodOpacity="0" result="BackgroundImageFix" />
+                        <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha" />
+                        <feMorphology radius="1.5" operator="erode" in="SourceAlpha" result="effect1_dropShadow_1182_1949" />
+                        <feOffset dy="3" />
+                        <feGaussianBlur stdDeviation="1.5" />
+                        <feColorMatrix type="matrix" values="0 0 0 0 0.0392157 0 0 0 0 0.0496732 0 0 0 0 0.0705882 0 0 0 0.04 0" />
+                        <feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_1182_1949" />
+                        <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha" />
+                        <feMorphology radius="4" operator="erode" in="SourceAlpha" result="effect2_dropShadow_1182_1949" />
+                        <feOffset dy="8" />
+                        <feGaussianBlur stdDeviation="4" />
+                        <feColorMatrix type="matrix" values="0 0 0 0 0.0392157 0 0 0 0 0.0496732 0 0 0 0 0.0705882 0 0 0 0.03 0" />
+                        <feBlend mode="normal" in2="effect1_dropShadow_1182_1949" result="effect2_dropShadow_1182_1949" />
+                        <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha" />
+                        <feMorphology radius="4" operator="erode" in="SourceAlpha" result="effect3_dropShadow_1182_1949" />
+                        <feOffset dy="20" />
+                        <feGaussianBlur stdDeviation="12" />
+                        <feColorMatrix type="matrix" values="0 0 0 0 0.0392157 0 0 0 0 0.0496732 0 0 0 0 0.0705882 0 0 0 0.08 0" />
+                        <feBlend mode="normal" in2="effect2_dropShadow_1182_1949" result="effect3_dropShadow_1182_1949" />
+                        <feBlend mode="normal" in="SourceGraphic" in2="effect3_dropShadow_1182_1949" result="shape" />
+                    </filter>
+                    <filter
+                        id="documents-shadow-02-sm"
+                        x="39.7821"
+                        y="7.5"
+                        width="84.3428"
+                        height="100.783"
+                        filterUnits="userSpaceOnUse"
+                        colorInterpolationFilters="sRGB"
+                    >
+                        <feFlood floodOpacity="0" result="BackgroundImageFix" />
+                        <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha" />
+                        <feMorphology radius="1.5" operator="erode" in="SourceAlpha" result="effect1_dropShadow_1182_1949" />
+                        <feOffset dy="3" />
+                        <feGaussianBlur stdDeviation="1.5" />
+                        <feColorMatrix type="matrix" values="0 0 0 0 0.0392157 0 0 0 0 0.0496732 0 0 0 0 0.0705882 0 0 0 0.04 0" />
+                        <feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_1182_1949" />
+                        <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha" />
+                        <feMorphology radius="4" operator="erode" in="SourceAlpha" result="effect2_dropShadow_1182_1949" />
+                        <feOffset dy="8" />
+                        <feGaussianBlur stdDeviation="4" />
+                        <feColorMatrix type="matrix" values="0 0 0 0 0.0392157 0 0 0 0 0.0496732 0 0 0 0 0.0705882 0 0 0 0.03 0" />
+                        <feBlend mode="normal" in2="effect1_dropShadow_1182_1949" result="effect2_dropShadow_1182_1949" />
+                        <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha" />
+                        <feMorphology radius="4" operator="erode" in="SourceAlpha" result="effect3_dropShadow_1182_1949" />
+                        <feOffset dy="20" />
+                        <feGaussianBlur stdDeviation="12" />
+                        <feColorMatrix type="matrix" values="0 0 0 0 0.0392157 0 0 0 0 0.0496732 0 0 0 0 0.0705882 0 0 0 0.08 0" />
+                        <feBlend mode="normal" in2="effect2_dropShadow_1182_1949" result="effect3_dropShadow_1182_1949" />
+                        <feBlend mode="normal" in="SourceGraphic" in2="effect3_dropShadow_1182_1949" result="shape" />
+                    </filter>
+                    <filter
+                        id="documents-shadow-03-sm"
+                        x="59.4529"
+                        y="8"
+                        width="104.547"
+                        height="112.499"
+                        filterUnits="userSpaceOnUse"
+                        colorInterpolationFilters="sRGB"
+                    >
+                        <feFlood floodOpacity="0" result="BackgroundImageFix" />
+                        <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha" />
+                        <feMorphology radius="1.5" operator="erode" in="SourceAlpha" result="effect1_dropShadow_1182_1949" />
+                        <feOffset dy="3" />
+                        <feGaussianBlur stdDeviation="1.5" />
+                        <feColorMatrix type="matrix" values="0 0 0 0 0.0392157 0 0 0 0 0.0496732 0 0 0 0 0.0705882 0 0 0 0.04 0" />
+                        <feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_1182_1949" />
+                        <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha" />
+                        <feMorphology radius="4" operator="erode" in="SourceAlpha" result="effect2_dropShadow_1182_1949" />
+                        <feOffset dy="8" />
+                        <feGaussianBlur stdDeviation="4" />
+                        <feColorMatrix type="matrix" values="0 0 0 0 0.0392157 0 0 0 0 0.0496732 0 0 0 0 0.0705882 0 0 0 0.03 0" />
+                        <feBlend mode="normal" in2="effect1_dropShadow_1182_1949" result="effect2_dropShadow_1182_1949" />
+                        <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha" />
+                        <feMorphology radius="4" operator="erode" in="SourceAlpha" result="effect3_dropShadow_1182_1949" />
+                        <feOffset dy="20" />
+                        <feGaussianBlur stdDeviation="12" />
+                        <feColorMatrix type="matrix" values="0 0 0 0 0.0392157 0 0 0 0 0.0496732 0 0 0 0 0.0705882 0 0 0 0.08 0" />
+                        <feBlend mode="normal" in2="effect2_dropShadow_1182_1949" result="effect3_dropShadow_1182_1949" />
+                        <feBlend mode="normal" in="SourceGraphic" in2="effect3_dropShadow_1182_1949" result="shape" />
+                    </filter>
+                    <linearGradient id="documents-gradient-01-sm" x1="45.7739" y1="79.2399" x2="19.2854" y2="31.4527" gradientUnits="userSpaceOnUse">
+                        <stop stopColor="currentColor" className="text-utility-gray-100" />
+                        <stop offset="1" stopColor="currentColor" className="text-utility-gray-50" />
+                    </linearGradient>
+                    <linearGradient id="documents-gradient-02-sm" x1="61.7915" y1="67.0755" x2="57.9806" y2="12.571" gradientUnits="userSpaceOnUse">
+                        <stop stopColor="currentColor" className="text-utility-gray-100" />
+                        <stop offset="1" stopColor="currentColor" className="text-utility-gray-50" />
+                    </linearGradient>
+                    <linearGradient id="documents-gradient-03-sm" x1="81.1199" y1="62.1785" x2="100.701" y2="11.17" gradientUnits="userSpaceOnUse">
+                        <stop stopColor="currentColor" className="text-utility-gray-100" />
+                        <stop offset="1" stopColor="currentColor" className="text-utility-gray-50" />
+                    </linearGradient>
+                </defs>
+            </svg>
+
+            {children && (
+                <span
+                    className={cx(
+                        "absolute inset-x-13 bottom-2 z-10 flex size-12 items-center justify-center rounded-full bg-alpha-black/20 text-fg-white backdrop-blur-xs",
+                        childrenClassName,
+                    )}
+                >
+                    {children}
+                </span>
+            )}
+        </div>
+    );
+};
+
+export const md = ({
+    className,
+    svgClassName,
+    childrenClassName,
+    children = <UploadCloud02 className="size-7" />,
+    ...otherProps
+}: Omit<IllustrationProps, "size">) => {
+    return (
+        <div {...otherProps} className={cx("relative h-34.25 w-46.25", className)}>
+            <svg viewBox="0 0 185 137" fill="none" className={cx("size-full stroke-inherit text-inherit", svgClassName)}>
+                <circle cx="95" cy="64" r="64" className="fill-utility-gray-100" />
+                <circle cx="29" cy="12" r="6" className="fill-utility-gray-100" />
+                <circle cx="26" cy="112" r="8" className="fill-utility-gray-100" />
+                <circle cx="173" cy="96" r="8" className="fill-utility-gray-100" />
+                <circle cx="158" cy="9" r="5" className="fill-utility-gray-100" />
+                <g filter="url(#documents-shadow-01-md)">
+                    <path
+                        d="M53.9372 95.3137L93.8147 76.7185C95.8169 75.7848 96.6831 73.4049 95.7495 71.4028L72.1994 20.8995L56.2523 15.0953L23.6252 30.3095C21.6231 31.2431 20.7569 33.6231 21.6905 35.6252L48.6215 93.3789C49.5551 95.3811 51.935 96.2473 53.9372 95.3137Z"
+                        fill="url(#documents-gradient-01-md)"
+                    />
+                    <path
+                        d="M95.9762 71.2975C96.9679 73.4247 96.0477 75.9536 93.9206 76.9455L54.043 95.5407C51.9159 96.5326 49.3872 95.612 48.3951 93.485L21.4639 35.7309C20.4719 33.6036 21.3923 31.0749 23.5196 30.0829L56.2405 14.8249L72.3823 20.7001L95.9762 71.2975Z"
+                        className="stroke-border-secondary_alt"
+                        strokeWidth="0.5"
+                    />
+                    <path d="M56.2523 15.0952L72.1994 20.8995L61.3237 25.9709L56.2523 15.0952Z" className="fill-utility-gray-200" />
+                </g>
+                <g filter="url(#documents-shadow-02-md)">
+                    <path
+                        d="M73 81.7241H117C119.209 81.7241 121 79.9333 121 77.7241V22L109 10H73C70.7909 10 69 11.7909 69 14V77.7241C69 79.9333 70.7909 81.7241 73 81.7241Z"
+                        fill="url(#documents-gradient-02-md)"
+                    />
+                    <path
+                        d="M121.25 77.7246C121.25 80.0716 119.347 81.9746 117 81.9746H73C70.6529 81.9746 68.7503 80.0716 68.75 77.7246V14C68.75 11.6528 70.6528 9.75 73 9.75H109.104L121.25 21.8965V77.7246Z"
+                        className="stroke-border-secondary_alt"
+                        strokeWidth="0.5"
+                    />
+                    <path d="M109 10L121 22H109V10Z" className="fill-utility-gray-200" />
+                </g>
+                <g filter="url(#documents-shadow-03-md)">
+                    <path
+                        d="M95.6253 76.6946L135.503 95.2898C137.505 96.2234 139.885 95.3572 140.819 93.3551L164.369 42.8518L158.564 26.9047L125.937 11.6905C123.935 10.7569 121.555 11.6231 120.622 13.6252L93.6906 71.3789C92.7569 73.3811 93.6232 75.761 95.6253 76.6946Z"
+                        fill="url(#documents-gradient-03-md)"
+                    />
+                    <path
+                        d="M141.045 93.4611C140.053 95.5881 137.524 96.5087 135.397 95.5168L95.5195 76.9216C93.3923 75.9297 92.4721 73.4009 93.4638 71.2737L120.395 13.5196C121.387 11.3923 123.916 10.4719 126.043 11.4639L158.764 26.7219L164.639 42.8637L141.045 93.4611Z"
+                        className="stroke-border-secondary_alt"
+                        strokeWidth="0.5"
+                    />
+                    <path d="M158.564 26.9048L164.369 42.8519L153.493 37.7805L158.564 26.9048Z" className="fill-utility-gray-200" />
+                </g>
+
+                <defs>
+                    <filter
+                        id="documents-shadow-01-md"
+                        x="0"
+                        y="10.0238"
+                        width="117.44"
+                        height="126.98"
+                        filterUnits="userSpaceOnUse"
+                        colorInterpolationFilters="sRGB"
+                    >
+                        <feFlood floodOpacity="0" result="BackgroundImageFix" />
+                        <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha" />
+                        <feMorphology radius="1.5" operator="erode" in="SourceAlpha" result="effect1_dropShadow_1182_2009" />
+                        <feOffset dy="3" />
+                        <feGaussianBlur stdDeviation="1.5" />
+                        <feColorMatrix type="matrix" values="0 0 0 0 0.0392157 0 0 0 0 0.0496732 0 0 0 0 0.0705882 0 0 0 0.04 0" />
+                        <feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_1182_2009" />
+                        <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha" />
+                        <feMorphology radius="4" operator="erode" in="SourceAlpha" result="effect2_dropShadow_1182_2009" />
+                        <feOffset dy="8" />
+                        <feGaussianBlur stdDeviation="4" />
+                        <feColorMatrix type="matrix" values="0 0 0 0 0.0392157 0 0 0 0 0.0496732 0 0 0 0 0.0705882 0 0 0 0.03 0" />
+                        <feBlend mode="normal" in2="effect1_dropShadow_1182_2009" result="effect2_dropShadow_1182_2009" />
+                        <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha" />
+                        <feMorphology radius="4" operator="erode" in="SourceAlpha" result="effect3_dropShadow_1182_2009" />
+                        <feOffset dy="20" />
+                        <feGaussianBlur stdDeviation="12" />
+                        <feColorMatrix type="matrix" values="0 0 0 0 0.0392157 0 0 0 0 0.0496732 0 0 0 0 0.0705882 0 0 0 0.08 0" />
+                        <feBlend mode="normal" in2="effect2_dropShadow_1182_2009" result="effect3_dropShadow_1182_2009" />
+                        <feBlend mode="normal" in="SourceGraphic" in2="effect3_dropShadow_1182_2009" result="shape" />
+                    </filter>
+                    <filter
+                        id="documents-shadow-02-md"
+                        x="48.5"
+                        y="9.5"
+                        width="93"
+                        height="112.724"
+                        filterUnits="userSpaceOnUse"
+                        colorInterpolationFilters="sRGB"
+                    >
+                        <feFlood floodOpacity="0" result="BackgroundImageFix" />
+                        <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha" />
+                        <feMorphology radius="1.5" operator="erode" in="SourceAlpha" result="effect1_dropShadow_1182_2009" />
+                        <feOffset dy="3" />
+                        <feGaussianBlur stdDeviation="1.5" />
+                        <feColorMatrix type="matrix" values="0 0 0 0 0.0392157 0 0 0 0 0.0496732 0 0 0 0 0.0705882 0 0 0 0.04 0" />
+                        <feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_1182_2009" />
+                        <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha" />
+                        <feMorphology radius="4" operator="erode" in="SourceAlpha" result="effect2_dropShadow_1182_2009" />
+                        <feOffset dy="8" />
+                        <feGaussianBlur stdDeviation="4" />
+                        <feColorMatrix type="matrix" values="0 0 0 0 0.0392157 0 0 0 0 0.0496732 0 0 0 0 0.0705882 0 0 0 0.03 0" />
+                        <feBlend mode="normal" in2="effect1_dropShadow_1182_2009" result="effect2_dropShadow_1182_2009" />
+                        <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha" />
+                        <feMorphology radius="4" operator="erode" in="SourceAlpha" result="effect3_dropShadow_1182_2009" />
+                        <feOffset dy="20" />
+                        <feGaussianBlur stdDeviation="12" />
+                        <feColorMatrix type="matrix" values="0 0 0 0 0.0392157 0 0 0 0 0.0496732 0 0 0 0 0.0705882 0 0 0 0.08 0" />
+                        <feBlend mode="normal" in2="effect2_dropShadow_1182_2009" result="effect3_dropShadow_1182_2009" />
+                        <feBlend mode="normal" in="SourceGraphic" in2="effect3_dropShadow_1182_2009" result="shape" />
+                    </filter>
+                    <filter
+                        id="documents-shadow-03-md"
+                        x="72.0001"
+                        y="10"
+                        width="117.44"
+                        height="126.98"
+                        filterUnits="userSpaceOnUse"
+                        colorInterpolationFilters="sRGB"
+                    >
+                        <feFlood floodOpacity="0" result="BackgroundImageFix" />
+                        <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha" />
+                        <feMorphology radius="1.5" operator="erode" in="SourceAlpha" result="effect1_dropShadow_1182_2009" />
+                        <feOffset dy="3" />
+                        <feGaussianBlur stdDeviation="1.5" />
+                        <feColorMatrix type="matrix" values="0 0 0 0 0.0392157 0 0 0 0 0.0496732 0 0 0 0 0.0705882 0 0 0 0.04 0" />
+                        <feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_1182_2009" />
+                        <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha" />
+                        <feMorphology radius="4" operator="erode" in="SourceAlpha" result="effect2_dropShadow_1182_2009" />
+                        <feOffset dy="8" />
+                        <feGaussianBlur stdDeviation="4" />
+                        <feColorMatrix type="matrix" values="0 0 0 0 0.0392157 0 0 0 0 0.0496732 0 0 0 0 0.0705882 0 0 0 0.03 0" />
+                        <feBlend mode="normal" in2="effect1_dropShadow_1182_2009" result="effect2_dropShadow_1182_2009" />
+                        <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha" />
+                        <feMorphology radius="4" operator="erode" in="SourceAlpha" result="effect3_dropShadow_1182_2009" />
+                        <feOffset dy="20" />
+                        <feGaussianBlur stdDeviation="12" />
+                        <feColorMatrix type="matrix" values="0 0 0 0 0.0392157 0 0 0 0 0.0496732 0 0 0 0 0.0705882 0 0 0 0.08 0" />
+                        <feBlend mode="normal" in2="effect2_dropShadow_1182_2009" result="effect3_dropShadow_1182_2009" />
+                        <feBlend mode="normal" in="SourceGraphic" in2="effect3_dropShadow_1182_2009" result="shape" />
+                    </filter>
+                    <linearGradient id="documents-gradient-01-md" x1="51.5944" y1="95.4694" x2="19.8151" y2="38.1371" gradientUnits="userSpaceOnUse">
+                        <stop stopColor="currentColor" className="text-utility-gray-100" />
+                        <stop offset="1" stopColor="currentColor" className="text-utility-gray-50" />
+                    </linearGradient>
+                    <linearGradient id="documents-gradient-02-md" x1="70.8109" y1="80.8751" x2="66.2388" y2="15.484" gradientUnits="userSpaceOnUse">
+                        <stop stopColor="currentColor" className="text-utility-gray-100" />
+                        <stop offset="1" stopColor="currentColor" className="text-utility-gray-50" />
+                    </linearGradient>
+                    <linearGradient id="documents-gradient-03-md" x1="94.0001" y1="75" x2="117.492" y2="13.8032" gradientUnits="userSpaceOnUse">
+                        <stop stopColor="currentColor" className="text-utility-gray-100" />
+                        <stop offset="1" stopColor="currentColor" className="text-utility-gray-50" />
+                    </linearGradient>
+                </defs>
+            </svg>
+
+            {children && (
+                <span
+                    className={cx(
+                        "absolute bottom-3 left-1/2 z-10 flex size-14 -translate-x-1/2 items-center justify-center rounded-full bg-alpha-black/20 text-fg-white backdrop-blur-xs",
+                        childrenClassName,
+                    )}
+                >
+                    {children}
+                </span>
+            )}
+        </div>
+    );
+};
+
+export const lg = ({
+    className,
+    svgClassName,
+    childrenClassName,
+    children = <UploadCloud02 className="size-7" />,
+    ...otherProps
+}: Omit<IllustrationProps, "size">) => {
+    return (
+        <div {...otherProps} className={cx("relative h-41.5 w-57.5", className)}>
+            <svg viewBox="0 0 230 166" fill="none" className={cx("size-full stroke-inherit text-inherit", svgClassName)}>
+                <circle cx="118" cy="80" r="80" className="fill-utility-gray-100" />
+                <circle cx="34" cy="20" r="8" className="fill-utility-gray-100" />
+                <circle cx="206" cy="126" r="6" className="fill-utility-gray-100" />
+                <circle cx="33" cy="138" r="10" className="fill-utility-gray-100" />
+                <circle cx="218" cy="38" r="10" className="fill-utility-gray-100" />
+                <circle cx="199" cy="11" r="7" className="fill-utility-gray-100" />
+                <g filter="url(#documents-shadow-01-lg)">
+                    <path
+                        d="M64.0781 124.214L116.529 99.7552C119.163 98.5272 120.302 95.3969 119.074 92.7634L88.0986 26.3361L67.1232 18.7017L24.2085 38.7132C21.5751 39.9412 20.4357 43.0715 21.6637 45.7049L57.0863 121.669C58.3143 124.302 61.4446 125.442 64.0781 124.214Z"
+                        fill="url(#documents-gradient-01-lg)"
+                    />
+                    <path
+                        d="M119.301 92.6576C120.587 95.4162 119.394 98.6959 116.635 99.9823L64.1844 124.44C61.4258 125.727 58.1461 124.533 56.8597 121.775L21.4374 45.811C20.151 43.0524 21.3447 39.7727 24.1033 38.4864L67.1114 18.4314L67.2087 18.4668L88.1843 26.1006L88.2816 26.136L119.301 92.6576Z"
+                        className="stroke-border-secondary_alt"
+                        strokeWidth="0.5"
+                    />
+                    <path d="M67.123 18.7017L88.0984 26.3361L73.7935 33.0066L67.123 18.7017Z" className="fill-utility-gray-200" />
+                </g>
+                <g filter="url(#documents-shadow-02-lg)">
+                    <path
+                        d="M89.1516 106.339H147.025C149.931 106.339 152.286 103.984 152.286 101.078V27.7837L136.503 12H89.1516C86.2459 12 83.8904 14.3555 83.8904 17.2612V101.078C83.8904 103.984 86.2459 106.339 89.1516 106.339Z"
+                        fill="url(#documents-gradient-02-lg)"
+                    />
+                    <path
+                        d="M152.537 101.078C152.537 104.122 150.069 106.59 147.025 106.59H89.1521C86.1083 106.59 83.6404 104.122 83.6404 101.078V17.2617C83.6404 14.2179 86.1083 11.75 89.1521 11.75H136.606L136.679 11.8232L152.464 27.6064L152.537 27.6797V101.078Z"
+                        className="stroke-border-secondary_alt"
+                        strokeWidth="0.5"
+                    />
+                    <path d="M136.503 12L152.286 27.7837H136.503V12Z" className="fill-utility-gray-200" />
+                </g>
+                <g filter="url(#documents-shadow-03-lg)">
+                    <path
+                        d="M118.911 99.724L171.362 124.182C173.996 125.41 177.126 124.271 178.354 121.638L209.329 55.2103L201.695 34.2349L158.78 14.2235C156.147 12.9955 153.017 14.1348 151.789 16.7683L116.366 92.7322C115.138 95.3657 116.277 98.496 118.911 99.724Z"
+                        fill="url(#documents-gradient-03-lg)"
+                    />
+                    <path
+                        d="M178.581 121.743C177.295 124.502 174.015 125.696 171.256 124.409L118.805 99.9512C116.047 98.6649 114.853 95.3851 116.139 92.6265L151.562 16.6631C152.848 13.9045 156.128 12.7108 158.886 13.9971L201.894 34.0521L201.93 34.1494L209.565 55.1245L209.6 55.2219L178.581 121.743Z"
+                        className="stroke-border-secondary_alt"
+                        strokeWidth="0.5"
+                    />
+                    <path d="M201.695 34.2349L209.329 55.2102L195.024 48.5398L201.695 34.2349Z" className="fill-utility-gray-200" />
+                </g>
+
+                <defs>
+                    <filter
+                        id="documents-shadow-01-lg"
+                        x="-0.559753"
+                        y="12.0312"
+                        width="141.857"
+                        height="154.406"
+                        filterUnits="userSpaceOnUse"
+                        colorInterpolationFilters="sRGB"
+                    >
+                        <feFlood floodOpacity="0" result="BackgroundImageFix" />
+                        <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha" />
+                        <feMorphology radius="1.5" operator="erode" in="SourceAlpha" result="effect1_dropShadow_1182_2741" />
+                        <feOffset dy="3" />
+                        <feGaussianBlur stdDeviation="1.5" />
+                        <feColorMatrix type="matrix" values="0 0 0 0 0.0392157 0 0 0 0 0.0496732 0 0 0 0 0.0705882 0 0 0 0.04 0" />
+                        <feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_1182_2741" />
+                        <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha" />
+                        <feMorphology radius="4" operator="erode" in="SourceAlpha" result="effect2_dropShadow_1182_2741" />
+                        <feOffset dy="8" />
+                        <feGaussianBlur stdDeviation="4" />
+                        <feColorMatrix type="matrix" values="0 0 0 0 0.0392157 0 0 0 0 0.0496732 0 0 0 0 0.0705882 0 0 0 0.03 0" />
+                        <feBlend mode="normal" in2="effect1_dropShadow_1182_2741" result="effect2_dropShadow_1182_2741" />
+                        <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha" />
+                        <feMorphology radius="4" operator="erode" in="SourceAlpha" result="effect3_dropShadow_1182_2741" />
+                        <feOffset dy="20" />
+                        <feGaussianBlur stdDeviation="12" />
+                        <feColorMatrix type="matrix" values="0 0 0 0 0.0392157 0 0 0 0 0.0496732 0 0 0 0 0.0705882 0 0 0 0.08 0" />
+                        <feBlend mode="normal" in2="effect2_dropShadow_1182_2741" result="effect3_dropShadow_1182_2741" />
+                        <feBlend mode="normal" in="SourceGraphic" in2="effect3_dropShadow_1182_2741" result="shape" />
+                    </filter>
+                    <filter
+                        id="documents-shadow-02-lg"
+                        x="63.3904"
+                        y="11.5"
+                        width="109.396"
+                        height="135.339"
+                        filterUnits="userSpaceOnUse"
+                        colorInterpolationFilters="sRGB"
+                    >
+                        <feFlood floodOpacity="0" result="BackgroundImageFix" />
+                        <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha" />
+                        <feMorphology radius="1.5" operator="erode" in="SourceAlpha" result="effect1_dropShadow_1182_2741" />
+                        <feOffset dy="3" />
+                        <feGaussianBlur stdDeviation="1.5" />
+                        <feColorMatrix type="matrix" values="0 0 0 0 0.0392157 0 0 0 0 0.0496732 0 0 0 0 0.0705882 0 0 0 0.04 0" />
+                        <feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_1182_2741" />
+                        <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha" />
+                        <feMorphology radius="4" operator="erode" in="SourceAlpha" result="effect2_dropShadow_1182_2741" />
+                        <feOffset dy="8" />
+                        <feGaussianBlur stdDeviation="4" />
+                        <feColorMatrix type="matrix" values="0 0 0 0 0.0392157 0 0 0 0 0.0496732 0 0 0 0 0.0705882 0 0 0 0.03 0" />
+                        <feBlend mode="normal" in2="effect1_dropShadow_1182_2741" result="effect2_dropShadow_1182_2741" />
+                        <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha" />
+                        <feMorphology radius="4" operator="erode" in="SourceAlpha" result="effect3_dropShadow_1182_2741" />
+                        <feOffset dy="20" />
+                        <feGaussianBlur stdDeviation="12" />
+                        <feColorMatrix type="matrix" values="0 0 0 0 0.0392157 0 0 0 0 0.0496732 0 0 0 0 0.0705882 0 0 0 0.08 0" />
+                        <feBlend mode="normal" in2="effect2_dropShadow_1182_2741" result="effect3_dropShadow_1182_2741" />
+                        <feBlend mode="normal" in="SourceGraphic" in2="effect3_dropShadow_1182_2741" result="shape" />
+                    </filter>
+                    <filter
+                        id="documents-shadow-03-lg"
+                        x="94.1425"
+                        y="12"
+                        width="141.857"
+                        height="154.406"
+                        filterUnits="userSpaceOnUse"
+                        colorInterpolationFilters="sRGB"
+                    >
+                        <feFlood floodOpacity="0" result="BackgroundImageFix" />
+                        <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha" />
+                        <feMorphology radius="1.5" operator="erode" in="SourceAlpha" result="effect1_dropShadow_1182_2741" />
+                        <feOffset dy="3" />
+                        <feGaussianBlur stdDeviation="1.5" />
+                        <feColorMatrix type="matrix" values="0 0 0 0 0.0392157 0 0 0 0 0.0496732 0 0 0 0 0.0705882 0 0 0 0.04 0" />
+                        <feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_1182_2741" />
+                        <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha" />
+                        <feMorphology radius="4" operator="erode" in="SourceAlpha" result="effect2_dropShadow_1182_2741" />
+                        <feOffset dy="8" />
+                        <feGaussianBlur stdDeviation="4" />
+                        <feColorMatrix type="matrix" values="0 0 0 0 0.0392157 0 0 0 0 0.0496732 0 0 0 0 0.0705882 0 0 0 0.03 0" />
+                        <feBlend mode="normal" in2="effect1_dropShadow_1182_2741" result="effect2_dropShadow_1182_2741" />
+                        <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha" />
+                        <feMorphology radius="4" operator="erode" in="SourceAlpha" result="effect3_dropShadow_1182_2741" />
+                        <feOffset dy="20" />
+                        <feGaussianBlur stdDeviation="12" />
+                        <feColorMatrix type="matrix" values="0 0 0 0 0.0392157 0 0 0 0 0.0496732 0 0 0 0 0.0705882 0 0 0 0.08 0" />
+                        <feBlend mode="normal" in2="effect2_dropShadow_1182_2741" result="effect3_dropShadow_1182_2741" />
+                        <feBlend mode="normal" in="SourceGraphic" in2="effect3_dropShadow_1182_2741" result="shape" />
+                    </filter>
+                    <linearGradient id="documents-gradient-01-lg" x1="60.9966" y1="124.418" x2="19.197" y2="49.0089" gradientUnits="userSpaceOnUse">
+                        <stop stopColor="currentColor" className="text-utility-gray-100" />
+                        <stop offset="1" stopColor="currentColor" className="text-utility-gray-50" />
+                    </linearGradient>
+                    <linearGradient id="documents-gradient-02-lg" x1="86.2723" y1="105.223" x2="80.2585" y2="19.2131" gradientUnits="userSpaceOnUse">
+                        <stop stopColor="currentColor" className="text-utility-gray-100" />
+                        <stop offset="1" stopColor="currentColor" className="text-utility-gray-50" />
+                    </linearGradient>
+                    <linearGradient id="documents-gradient-03-lg" x1="116.773" y1="97.4951" x2="147.672" y2="17.0024" gradientUnits="userSpaceOnUse">
+                        <stop stopColor="currentColor" className="text-utility-gray-100" />
+                        <stop offset="1" stopColor="currentColor" className="text-utility-gray-50" />
+                    </linearGradient>
+                </defs>
+            </svg>
+
+            {children && (
+                <span
+                    className={cx(
+                        "absolute bottom-5 left-1/2 z-10 flex size-14 -translate-x-1/2 items-center justify-center rounded-full bg-alpha-black/20 text-fg-white backdrop-blur-xs",
+                        childrenClassName,
+                    )}
+                >
+                    {children}
+                </span>
+            )}
+        </div>
+    );
+};
+
+const sizes = {
+    sm,
+    md,
+    lg,
+};
diff --git a/src/components/shared-assets/illustrations/index.tsx b/src/components/shared-assets/illustrations/index.tsx
new file mode 100644
index 0000000..ef72972
--- /dev/null
+++ b/src/components/shared-assets/illustrations/index.tsx
@@ -0,0 +1,26 @@
+import type { HTMLAttributes } from "react";
+import { BoxIllustration } from "./box";
+import { CloudIllustration } from "./cloud";
+import { CreditCardIllustration } from "./credit-card";
+import { DocumentsIllustration } from "./documents";
+
+const types = {
+    box: BoxIllustration,
+    cloud: CloudIllustration,
+    documents: DocumentsIllustration,
+    "credit-card": CreditCardIllustration,
+};
+
+export interface IllustrationProps extends HTMLAttributes<HTMLDivElement> {
+    size?: "sm" | "md" | "lg";
+    svgClassName?: string;
+    childrenClassName?: string;
+}
+
+export const Illustration = (props: IllustrationProps & { type: keyof typeof types }) => {
+    const { type } = props;
+
+    const Component = types[type];
+
+    return <Component {...props} />;
+};
diff --git a/src/components/shared-assets/qr-code.tsx b/src/components/shared-assets/qr-code.tsx
new file mode 100644
index 0000000..b497642
--- /dev/null
+++ b/src/components/shared-assets/qr-code.tsx
@@ -0,0 +1,83 @@
+import type { HTMLAttributes } from "react";
+import { useEffect, useRef, useState } from "react";
+import QRCodeStyling, { type Options as QRCodeStylingOptions } from "qr-code-styling";
+import { cx } from "@/utils/cx";
+
+const QRCodeFrameHandle = ({ className, ...props }: HTMLAttributes<HTMLDivElement>) => (
+    <div {...props} className={cx("size-3 rounded-tl border-t-2 border-l-2 border-brand_alt", className)} />
+);
+
+export const GradientScan = ({ className, ...props }: HTMLAttributes<HTMLDivElement>) => (
+    <div
+        {...props}
+        className={cx("absolute bottom-0 h-1/2 w-full border-t border-brand bg-brand-solid/10", className)}
+        style={{
+            maskImage: "radial-gradient(52.19% 100% at 50% 0%, #000 0%, rgba(0,0,0,0) 95.31%)",
+            WebkitMaskImage: "radial-gradient(52.19% 100% at 50% 0%, #000 0%, rgba(0,0,0,0) 95.31%)",
+            ...props.style,
+        }}
+    />
+);
+
+const styles = {
+    md: { root: "p-2", qr: { width: 96, height: 96 } },
+    lg: { root: "p-3", qr: { width: 128, height: 128 } },
+};
+
+interface QRCodeProps {
+    /**
+     * The value to encode in the QR code.
+     */
+    value: string;
+    /**
+     * Additional options to customize the QR code.
+     */
+    options?: QRCodeStylingOptions;
+    /**
+     * The size of the QR code.
+     *
+     * @default "md"
+     */
+    size?: "md" | "lg";
+    /**
+     * The class name to apply to the QR code.
+     */
+    className?: string;
+}
+
+export const QRCode = ({ size = "md", value, options, className }: QRCodeProps) => {
+    const ref = useRef<HTMLDivElement | null>(null);
+    const [qrCode, setQrCode] = useState<QRCodeStyling | null>(null);
+
+    useEffect(() => {
+        if (!ref.current) return;
+
+        const qrCode = new QRCodeStyling({
+            width: styles[size].qr.width,
+            height: styles[size].qr.height,
+            data: value,
+            type: "svg",
+            ...options,
+        });
+
+        setQrCode(qrCode);
+        qrCode.append(ref.current);
+    }, [options, size, value]);
+
+    useEffect(() => {
+        if (!qrCode) return;
+
+        qrCode.update(options);
+    }, [qrCode, value, options]);
+
+    return (
+        <div className={cx("relative flex items-center justify-center", styles[size].root, className)}>
+            <div ref={ref} />
+
+            <QRCodeFrameHandle className="absolute top-0 left-0" />
+            <QRCodeFrameHandle className="absolute top-0 right-0 rotate-90" />
+            <QRCodeFrameHandle className="absolute right-0 bottom-0 rotate-180" />
+            <QRCodeFrameHandle className="absolute bottom-0 left-0 -rotate-90" />
+        </div>
+    );
+};
diff --git a/src/components/shared-assets/section-divider.tsx b/src/components/shared-assets/section-divider.tsx
new file mode 100644
index 0000000..43c4d52
--- /dev/null
+++ b/src/components/shared-assets/section-divider.tsx
@@ -0,0 +1,10 @@
+import type { HTMLAttributes } from "react";
+import { cx } from "@/utils/cx";
+
+export const SectionDivider = (props: HTMLAttributes<HTMLDivElement>) => {
+    return (
+        <div {...props} className={cx("mx-auto max-w-container px-4 md:px-8", props.className)}>
+            <hr className="h-px w-full border-none bg-border-secondary" />
+        </div>
+    );
+};
diff --git a/src/hooks/use-breakpoint.ts b/src/hooks/use-breakpoint.ts
new file mode 100644
index 0000000..9565d6f
--- /dev/null
+++ b/src/hooks/use-breakpoint.ts
@@ -0,0 +1,34 @@
+import { useEffect, useState } from "react";
+
+const screens = {
+    sm: "640px",
+    md: "768px",
+    lg: "1024px",
+    xl: "1280px",
+    "2xl": "1536px",
+};
+
+/**
+ * Checks whether a particular Tailwind CSS viewport size applies.
+ *
+ * @param size The size to check, which must either be included in Tailwind CSS's
+ * list of default screen sizes, or added to the Tailwind CSS config file.
+ *
+ * @returns A boolean indicating whether the viewport size applies.
+ */
+export const useBreakpoint = (size: "sm" | "md" | "lg" | "xl" | "2xl") => {
+    const [matches, setMatches] = useState(typeof window !== "undefined" ? window.matchMedia(`(min-width: ${screens[size]})`).matches : true);
+
+    useEffect(() => {
+        const breakpoint = window.matchMedia(`(min-width: ${screens[size]})`);
+
+        setMatches(breakpoint.matches);
+
+        const handleChange = (value: MediaQueryListEvent) => setMatches(value.matches);
+
+        breakpoint.addEventListener("change", handleChange);
+        return () => breakpoint.removeEventListener("change", handleChange);
+    }, [size]);
+
+    return matches;
+};
diff --git a/src/hooks/use-clipboard.ts b/src/hooks/use-clipboard.ts
new file mode 100644
index 0000000..ef57aab
--- /dev/null
+++ b/src/hooks/use-clipboard.ts
@@ -0,0 +1,77 @@
+import { useCallback, useState } from "react";
+
+const DEFAULT_TIMEOUT = 2000;
+
+type UseClipboardReturnType = {
+    /**
+     * The state indicating whether the text has been copied.
+     * If a string is provided, it will be used as the identifier for the copied state.
+     */
+    copied: string | boolean;
+    /**
+     * Function to copy text to the clipboard using the modern clipboard API.
+     * Falls back to the fallback function if the modern API fails.
+     *
+     * @param {string} text - The text to be copied.
+     * @param {string} [id] - Optional identifier to set the copied state.
+     * @returns {Promise<Object>} - A promise that resolves to an object containing:
+     *  - `success` (boolean): Whether the copy operation was successful.
+     *  - `error` (Error | undefined): The error object if the copy operation failed.
+     */
+    copy: (text: string, id?: string) => Promise<{ success: boolean; error?: Error }>;
+};
+
+/**
+ * Custom hook to copy text to the clipboard.
+ *
+ * @returns {UseClipboardReturnType} - An object containing the copied state and the copy function.
+ */
+export const useClipboard = (): UseClipboardReturnType => {
+    const [copied, setCopied] = useState<string | boolean>(false);
+
+    // Fallback function for older browsers
+    const fallback = (text: string, id?: string) => {
+        try {
+            // Textarea to copy the text to the clipboard
+            const textArea = document.createElement("textarea");
+            textArea.value = text;
+            textArea.style.position = "absolute";
+            textArea.style.left = "-99999px";
+
+            document.body.appendChild(textArea);
+            textArea.select();
+
+            const success = document.execCommand("copy");
+            textArea.remove();
+
+            setCopied(id || true);
+            setTimeout(() => setCopied(false), DEFAULT_TIMEOUT);
+
+            return success ? { success: true } : { success: false, error: new Error("execCommand returned false") };
+        } catch (err) {
+            return {
+                success: false,
+                error: err instanceof Error ? err : new Error("Fallback copy failed"),
+            };
+        }
+    };
+
+    const copy = useCallback(async (text: string, id?: string) => {
+        if (navigator.clipboard && window.isSecureContext) {
+            try {
+                await navigator.clipboard.writeText(text);
+
+                setCopied(id || true);
+                setTimeout(() => setCopied(false), DEFAULT_TIMEOUT);
+
+                return { success: true };
+            } catch {
+                // If modern method fails, try fallback
+                return fallback(text, id);
+            }
+        }
+        return fallback(text);
+    }, []);
+
+    return { copied, copy };
+};
diff --git a/src/hooks/use-resize-observer.ts b/src/hooks/use-resize-observer.ts
new file mode 100644
index 0000000..0bfb05d
--- /dev/null
+++ b/src/hooks/use-resize-observer.ts
@@ -0,0 +1,67 @@
+import { useEffect } from "react";
+import type { RefObject } from "@react-types/shared";
+
+/**
+ * Checks if the ResizeObserver API is supported.
+ * @returns True if the ResizeObserver API is supported, false otherwise.
+ */
+function hasResizeObserver() {
+    return typeof window.ResizeObserver !== "undefined";
+}
+
+/**
+ * The options for the useResizeObserver hook.
+ */
+type useResizeObserverOptionsType<T> = {
+    /**
+     * The ref to the element to observe.
+     */
+    ref: RefObject<T | undefined | null> | undefined;
+    /**
+     * The box to observe.
+     */
+    box?: ResizeObserverBoxOptions;
+    /**
+     * The callback function to call when the size changes.
+     */
+    onResize: () => void;
+};
+
+/**
+ * A hook that observes the size of an element and calls a callback function when the size changes.
+ * @param options - The options for the hook.
+ */
+export function useResizeObserver<T extends Element>(options: useResizeObserverOptionsType<T>) {
+    const { ref, box, onResize } = options;
+
+    useEffect(() => {
+        const element = ref?.current;
+        if (!element) {
+            return;
+        }
+
+        if (!hasResizeObserver()) {
+            window.addEventListener("resize", onResize, false);
+
+            return () => {
+                window.removeEventListener("resize", onResize, false);
+            };
+        } else {
+            const resizeObserverInstance = new window.ResizeObserver((entries) => {
+                if (!entries.length) {
+                    return;
+                }
+
+                onResize();
+            });
+
+            resizeObserverInstance.observe(element, { box });
+
+            return () => {
+                if (element) {
+                    resizeObserverInstance.unobserve(element);
+                }
+            };
+        }
+    }, [onResize, ref, box]);
+}
diff --git a/src/main.tsx b/src/main.tsx
new file mode 100644
index 0000000..947dae7
--- /dev/null
+++ b/src/main.tsx
@@ -0,0 +1,23 @@
+import { StrictMode } from "react";
+import { createRoot } from "react-dom/client";
+import { BrowserRouter, Route, Routes } from "react-router";
+import { HomeScreen } from "@/pages/home-screen";
+import { NotFound } from "@/pages/not-found";
+import { RouteProvider } from "@/providers/router-provider";
+import { ThemeProvider } from "@/providers/theme-provider";
+import "@/styles/globals.css";
+
+createRoot(document.getElementById("root")!).render(
+    <StrictMode>
+        <ThemeProvider>
+            <BrowserRouter>
+                <RouteProvider>
+                    <Routes>
+                        <Route path="/" element={<HomeScreen />} />
+                        <Route path="*" element={<NotFound />} />
+                    </Routes>
+                </RouteProvider>
+            </BrowserRouter>
+        </ThemeProvider>
+    </StrictMode>,
+);
diff --git a/src/pages/home-screen.tsx b/src/pages/home-screen.tsx
new file mode 100644
index 0000000..ccbb6fe
--- /dev/null
+++ b/src/pages/home-screen.tsx
@@ -0,0 +1,75 @@
+import { BookOpen01, Check, Copy01, Cube01, HelpCircle } from "@untitledui/icons";
+import { Button } from "@/components/base/buttons/button";
+import { ButtonUtility } from "@/components/base/buttons/button-utility";
+import { UntitledLogoMinimal } from "@/components/foundations/logo/untitledui-logo-minimal";
+import { useClipboard } from "@/hooks/use-clipboard";
+
+export const HomeScreen = () => {
+    const clipboard = useClipboard();
+
+    return (
+        <div className="flex h-dvh flex-col">
+            <div className="flex min-h-0 flex-1 flex-col items-center justify-center px-4">
+                <div className="relative flex size-28 items-center justify-center">
+                    <UntitledLogoMinimal className="size-10" />
+                </div>
+
+                <h1 className="max-w-3xl text-center text-display-sm font-semibold text-primary">Untitled UI Vite starter kit</h1>
+
+                <p className="mt-2 max-w-xl text-center text-lg text-tertiary">
+                    Get started by using existing components that came with this starter kit or add new ones:
+                </p>
+
+                <div className="relative mt-6 flex h-10 items-center rounded-lg border border-secondary bg-secondary">
+                    <code className="px-3 font-mono text-secondary">npx untitledui@latest add</code>
+
+                    <hr className="h-10 w-px bg-border-secondary" />
+
+                    <ButtonUtility
+                        color="tertiary"
+                        size="sm"
+                        tooltip="Copy"
+                        className="mx-1"
+                        icon={clipboard.copied ? Check : Copy01}
+                        onClick={() => clipboard.copy("npx untitledui@latest add")}
+                    />
+                </div>
+
+                <div className="mt-6 flex items-center gap-3">
+                    <Button
+                        href="https://www.untitledui.com/react/docs/introduction"
+                        target="_blank"
+                        rel="noopener noreferrer"
+                        color="link-color"
+                        size="lg"
+                        iconLeading={BookOpen01}
+                    >
+                        Docs
+                    </Button>
+                    <div className="h-px w-4 bg-brand-solid" />
+                    <Button
+                        href="https://www.untitledui.com/react/resources/icons"
+                        target="_blank"
+                        rel="noopener noreferrer"
+                        color="link-color"
+                        size="lg"
+                        iconLeading={Cube01}
+                    >
+                        Icons
+                    </Button>
+                    <div className="h-px w-4 bg-brand-solid" />
+                    <Button
+                        href="https://github.com/untitleduico/react/issues/"
+                        target="_blank"
+                        rel="noopener noreferrer"
+                        color="link-color"
+                        size="lg"
+                        iconLeading={HelpCircle}
+                    >
+                        Help
+                    </Button>
+                </div>
+            </div>
+        </div>
+    );
+};
diff --git a/src/pages/not-found.tsx b/src/pages/not-found.tsx
new file mode 100644
index 0000000..bd2bb9f
--- /dev/null
+++ b/src/pages/not-found.tsx
@@ -0,0 +1,32 @@
+import { ArrowLeft } from "@untitledui/icons";
+import { useNavigate } from "react-router";
+import { Button } from "@/components/base/buttons/button";
+
+export function NotFound() {
+    const router = useNavigate();
+
+    return (
+        <section className="flex min-h-screen items-start bg-primary py-16 md:items-center md:py-24">
+            <div className="mx-auto max-w-container grow px-4 md:px-8">
+                <div className="flex w-full max-w-3xl flex-col gap-8 md:gap-12">
+                    <div className="flex flex-col gap-4 md:gap-6">
+                        <div className="flex flex-col gap-3">
+                            <span className="text-md font-semibold text-brand-secondary">404 error</span>
+                            <h1 className="text-display-md font-semibold text-primary md:text-display-lg lg:text-display-xl">We can’t find that page</h1>
+                        </div>
+                        <p className="text-lg text-tertiary md:text-xl">Sorry, the page you are looking for doesn't exist or has been moved.</p>
+                    </div>
+
+                    <div className="flex flex-col-reverse gap-3 sm:flex-row">
+                        <Button color="secondary" size="xl" iconLeading={ArrowLeft} onClick={() => router(-1)}>
+                            Go back
+                        </Button>
+                        <Button size="xl" onClick={() => router(-1)}>
+                            Take me home
+                        </Button>
+                    </div>
+                </div>
+            </div>
+        </section>
+    );
+}
diff --git a/src/providers/router-provider.tsx b/src/providers/router-provider.tsx
new file mode 100644
index 0000000..1669a61
--- /dev/null
+++ b/src/providers/router-provider.tsx
@@ -0,0 +1,16 @@
+import { type PropsWithChildren } from "react";
+import { RouterProvider } from "react-aria-components";
+import { useNavigate } from "react-router";
+import type { NavigateOptions } from "react-router";
+
+declare module "react-aria-components" {
+    interface RouterConfig {
+        routerOptions: NavigateOptions;
+    }
+}
+
+export const RouteProvider = ({ children }: PropsWithChildren) => {
+    const navigate = useNavigate();
+
+    return <RouterProvider navigate={navigate}>{children}</RouterProvider>;
+};
diff --git a/src/providers/theme-provider.tsx b/src/providers/theme-provider.tsx
new file mode 100644
index 0000000..6a6deee
--- /dev/null
+++ b/src/providers/theme-provider.tsx
@@ -0,0 +1,82 @@
+import type { ReactNode } from "react";
+import { createContext, useContext, useEffect, useState } from "react";
+
+type Theme = "light" | "dark" | "system";
+
+interface ThemeContextType {
+    theme: Theme;
+    setTheme: (theme: Theme) => void;
+}
+
+const ThemeContext = createContext<ThemeContextType | undefined>(undefined);
+
+export const useTheme = (): ThemeContextType => {
+    const context = useContext(ThemeContext);
+
+    if (context === undefined) {
+        throw new Error("useTheme must be used within a ThemeProvider");
+    }
+
+    return context;
+};
+
+interface ThemeProviderProps {
+    children: ReactNode;
+    /**
+     * The class to add to the root element when the theme is dark
+     * @default "dark-mode"
+     */
+    darkModeClass?: string;
+    /**
+     * The default theme to use if no theme is stored in localStorage
+     * @default "system"
+     */
+    defaultTheme?: Theme;
+    /**
+     * The key to use to store the theme in localStorage
+     * @default "ui-theme"
+     */
+    storageKey?: string;
+}
+
+export const ThemeProvider = ({ children, defaultTheme = "system", storageKey = "ui-theme", darkModeClass = "dark-mode" }: ThemeProviderProps) => {
+    const [theme, setTheme] = useState<Theme>(() => {
+        if (typeof window !== "undefined") {
+            const savedTheme = localStorage.getItem(storageKey) as Theme | null;
+            return savedTheme || defaultTheme;
+        }
+        return defaultTheme;
+    });
+
+    useEffect(() => {
+        const applyTheme = () => {
+            const root = window.document.documentElement;
+
+            if (theme === "system") {
+                const systemTheme = window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
+
+                root.classList.toggle(darkModeClass, systemTheme === "dark");
+                localStorage.removeItem(storageKey);
+            } else {
+                root.classList.toggle(darkModeClass, theme === "dark");
+                localStorage.setItem(storageKey, theme);
+            }
+        };
+
+        applyTheme();
+
+        // Listen for system theme changes
+        const mediaQuery = window.matchMedia("(prefers-color-scheme: dark)");
+
+        const handleChange = () => {
+            if (theme === "system") {
+                applyTheme();
+            }
+        };
+
+        mediaQuery.addEventListener("change", handleChange);
+        return () => mediaQuery.removeEventListener("change", handleChange);
+    }, [theme]);
+
+    return <ThemeContext.Provider value={{ theme, setTheme }}>{children}</ThemeContext.Provider>;
+};
diff --git a/src/styles/globals.css b/src/styles/globals.css
new file mode 100755
index 0000000..d067886
--- /dev/null
+++ b/src/styles/globals.css
@@ -0,0 +1,69 @@
+@import "tailwindcss";
+@import "./theme.css";
+@import "./typography.css";
+
+@plugin "@tailwindcss/typography";
+@plugin "tailwindcss-react-aria-components";
+@plugin "tailwindcss-animate";
+
+@custom-variant dark (&:where(.dark-mode, .dark-mode *));
+@custom-variant label (& [data-label]);
+@custom-variant focus-input-within (&:has(input:focus));
+
+@utility scrollbar-hide {
+    /* For Webkit-based browsers (Chrome, Safari and Opera) */
+    &::-webkit-scrollbar {
+        display: none;
+        -webkit-appearance: none;
+    }
+
+    /* For IE, Edge and Firefox */
+    -ms-overflow-style: none; /* IE and Edge */
+    scrollbar-width: none; /* Firefox */
+}
+
+@utility transition-inherit-all {
+    transition-property: inherit;
+    transition-duration: inherit;
+    transition-timing-function: inherit;
+}
+
+html,
+body {
+    font-family: var(--font-body);
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+    -webkit-font-variant-ligatures: contextual;
+    font-variant-ligatures: contextual;
+    -webkit-font-kerning: normal;
+    font-kerning: normal;
+}
+
+/* Hide the default expand arrow on Safari.  */
+details summary::-webkit-details-marker {
+    display: none;
+}
+
+/* Hide default arrows from number inputs. */
+/* Chrome, Safari, Edge, Opera */
+input::-webkit-outer-spin-button,
+input::-webkit-inner-spin-button {
+    -webkit-appearance: none;
+    margin: 0;
+}
+/* Firefox */
+input[type="number"] {
+    -moz-appearance: textfield;
+}
+
+/* Hide the default clear button (X) from search inputs. */
+input[type="search"]::-webkit-search-cancel-button {
+    -webkit-appearance: none;
+}
+
+/* Hide the default outline on chart elements. */
+.recharts-surface,
+.recharts-surface g,
+.recharts-surface path {
+    outline: none;
+}
diff --git a/src/styles/theme.css b/src/styles/theme.css
new file mode 100644
index 0000000..84838f3
--- /dev/null
+++ b/src/styles/theme.css
@@ -0,0 +1,1326 @@
+@theme {
+    /* FONT FAMILY */
+    --font-body: var(--font-inter, "Inter"), -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
+    --font-display: var(--font-inter, "Inter"), -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
+    --font-mono: ui-monospace, "Roboto Mono", SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
+
+    /* FONT SIZE */
+    --text-xs: calc(var(--spacing) * 3);
+    --text-xs--line-height: calc(var(--spacing) * 4.5);
+
+    --text-sm: calc(var(--spacing) * 3.5);
+    --text-sm--line-height: calc(var(--spacing) * 5);
+
+    --text-md: calc(var(--spacing) * 4);
+    --text-md--line-height: calc(var(--spacing) * 6);
+
+    --text-lg: calc(var(--spacing) * 4.5);
+    --text-lg--line-height: calc(var(--spacing) * 7);
+
+    --text-xl: calc(var(--spacing) * 5);
+    --text-xl--line-height: calc(var(--spacing) * 7.5);
+
+    --text-display-xs: calc(var(--spacing) * 6);
+    --text-display-xs--line-height: calc(var(--spacing) * 8);
+
+    --text-display-sm: calc(var(--spacing) * 7.5);
+    --text-display-sm--line-height: calc(var(--spacing) * 9.5);
+
+    --text-display-md: calc(var(--spacing) * 9);
+    --text-display-md--line-height: calc(var(--spacing) * 11);
+    --text-display-md--letter-spacing: -0.72px;
+
+    --text-display-lg: calc(var(--spacing) * 12);
+    --text-display-lg--line-height: calc(var(--spacing) * 15);
+    --text-display-lg--letter-spacing: -0.96px;
+
+    --text-display-xl: calc(var(--spacing) * 15);
+    --text-display-xl--line-height: calc(var(--spacing) * 18);
+    --text-display-xl--letter-spacing: -1.2px;
+
+    --text-display-2xl: calc(var(--spacing) * 18);
+    --text-display-2xl--line-height: calc(var(--spacing) * 22.5);
+    --text-display-2xl--letter-spacing: -1.44px;
+
+    /* MAX WIDTH */
+    --max-width-container: 1280px;
+
+    /* BREAKPOINTS */
+    --breakpoint-xxs: 320px;
+    /* This must match the breakpoint in Sonner: https://github.com/emilkowalski/sonner/blob/main/src/styles.css */
+    --breakpoint-xs: 600px;
+
+    /* RADIUS */
+    --radius-none: 0px;
+    --radius-xs: 0.125rem;
+    --radius-sm: 0.25rem;
+    --radius-DEFAULT: 0.25rem;
+    --radius-md: 0.375rem;
+    --radius-lg: 0.5rem;
+    --radius-xl: 0.75rem;
+    --radius-2xl: 1rem;
+    --radius-3xl: 1.5rem;
+    --radius-full: 9999px;
+
+    /* SHADOW */
+    --shadow-xs: 0px 1px 2px rgba(10, 13, 18, 0.05);
+    --shadow-sm: 0px 1px 3px rgba(10, 13, 18, 0.1), 0px 1px 2px -1px rgba(10, 13, 18, 0.1);
+    --shadow-md: 0px 4px 6px -1px rgba(10, 13, 18, 0.1), 0px 2px 4px -2px rgba(10, 13, 18, 0.06);
+    --shadow-lg: 0px 12px 16px -4px rgba(10, 13, 18, 0.08), 0px 4px 6px -2px rgba(10, 13, 18, 0.03), 0px 2px 2px -1px rgba(10, 13, 18, 0.04);
+    --shadow-xl: 0px 20px 24px -4px rgba(10, 13, 18, 0.08), 0px 8px 8px -4px rgba(10, 13, 18, 0.03), 0px 3px 3px -1.5px rgba(10, 13, 18, 0.04);
+    --shadow-2xl: 0px 24px 48px -12px rgba(10, 13, 18, 0.18), 0px 4px 4px -2px rgba(10, 13, 18, 0.04);
+    --shadow-3xl: 0px 32px 64px -12px rgba(10, 13, 18, 0.14), 0px 5px 5px -2.5px rgba(10, 13, 18, 0.04);
+
+    --shadow-skeumorphic: 0px 0px 0px 1px rgba(10, 13, 18, 0.18) inset, 0px -2px 0px 0px rgba(10, 13, 18, 0.05) inset;
+    --shadow-xs-skeumorphic: var(--shadow-skeumorphic), var(--shadow-xs);
+
+    --shadow-modern-mockup-inner-lg: 0px 0px 3.765px 1.255px rgba(10, 13, 18, 0.08) inset, 0px 0px 2.51px 1.255px rgba(10, 13, 18, 0.03) inset;
+    --shadow-modern-mockup-inner-md: 0px 0px 1.692px 0.564px rgba(10, 13, 18, 0.08) inset, 0px 0px 1.128px 0.564px rgba(10, 13, 18, 0.03) inset;
+    --shadow-modern-mockup-inner-sm: 0px 0px 4.48px 1.493px rgba(10, 13, 18, 0.08) inset, 0px 0px 2.987px 1.493px rgba(10, 13, 18, 0.03) inset;
+
+    --shadow-modern-mockup-outer-lg:
+        0px 7.529px 10.039px -2.51px rgba(10, 13, 18, 0.08), 0px 2.51px 3.765px -1.255px rgba(10, 13, 18, 0.03),
+        0px 1.255px 1.255px -0.627px rgba(10, 13, 18, 0.04);
+    --shadow-modern-mockup-outer-md:
+        0px 3.385px 4.513px -1.128px rgba(10, 13, 18, 0.08), 0px 1.128px 1.692px -0.564px rgba(10, 13, 18, 0.03),
+        0px 0.564px 0.564px -0.282px rgba(10, 13, 18, 0.04);
+
+    --drop-shadow-iphone-mockup: 20px 12px 18px rgba(16, 24, 40, 0.2);
+
+    /* ANIMATIONS */
+    --animate-marquee: marquee 60s linear infinite;
+    --animate-caret-blink: caret-blink 1s infinite;
+
+    @keyframes marquee {
+        0% {
+            transform: translateX(0);
+        }
+        100% {
+            transform: translateX(-100%);
+        }
+    }
+
+    @keyframes caret-blink {
+        0%,
+        50% {
+            opacity: 1;
+        }
+        51%,
+        100% {
+            opacity: 0;
+        }
+    }
+
+    /* BASE COLOR */
+    --color-transparent: rgb(0 0 0 / 0);
+
+    --color-white: rgb(255 255 255);
+    --color-black: rgb(0 0 0);
+
+    --color-brand-25: rgb(252 250 255);
+    --color-brand-50: rgb(249 245 255);
+    --color-brand-100: rgb(244 235 255);
+    --color-brand-200: rgb(233 215 254);
+    --color-brand-300: rgb(214 187 251);
+    --color-brand-400: rgb(182 146 246);
+    --color-brand-500: rgb(158 119 237);
+    --color-brand-600: rgb(127 86 217);
+    --color-brand-700: rgb(105 65 198);
+    --color-brand-800: rgb(83 56 158);
+    --color-brand-900: rgb(66 48 125);
+    --color-brand-950: rgb(44 28 95);
+
+    --color-error-25: rgb(255 251 250);
+    --color-error-50: rgb(254 243 242);
+    --color-error-100: rgb(254 228 226);
+    --color-error-200: rgb(254 205 202);
+    --color-error-300: rgb(253 162 155);
+    --color-error-400: rgb(249 112 102);
+    --color-error-500: rgb(240 68 56);
+    --color-error-600: rgb(217 45 32);
+    --color-error-700: rgb(180 35 24);
+    --color-error-800: rgb(145 32 24);
+    --color-error-900: rgb(122 39 26);
+    --color-error-950: rgb(85 22 12);
+
+    --color-warning-25: rgb(255 252 245);
+    --color-warning-50: rgb(255 250 235);
+    --color-warning-100: rgb(254 240 199);
+    --color-warning-200: rgb(254 223 137);
+    --color-warning-300: rgb(254 200 75);
+    --color-warning-400: rgb(253 176 34);
+    --color-warning-500: rgb(247 144 9);
+    --color-warning-600: rgb(220 104 3);
+    --color-warning-700: rgb(181 71 8);
+    --color-warning-800: rgb(147 55 13);
+    --color-warning-900: rgb(122 46 14);
+    --color-warning-950: rgb(78 29 9);
+
+    --color-success-25: rgb(246 254 249);
+    --color-success-50: rgb(236 253 243);
+    --color-success-100: rgb(220 250 230);
+    --color-success-200: rgb(171 239 198);
+    --color-success-300: rgb(117 224 167);
+    --color-success-400: rgb(71 205 137);
+    --color-success-500: rgb(23 178 106);
+    --color-success-600: rgb(7 148 85);
+    --color-success-700: rgb(6 118 71);
+    --color-success-800: rgb(8 93 58);
+    --color-success-900: rgb(7 77 49);
+    --color-success-950: rgb(5 51 33);
+
+    --color-gray-25: rgb(253 253 253);
+    --color-gray-50: rgb(250 250 250);
+    --color-gray-100: rgb(245 245 245);
+    --color-gray-200: rgb(233 234 235);
+    --color-gray-300: rgb(213 215 218);
+    --color-gray-400: rgb(164 167 174);
+    --color-gray-500: rgb(113 118 128);
+    --color-gray-600: rgb(83 88 98);
+    --color-gray-700: rgb(65 70 81);
+    --color-gray-800: rgb(37 43 55);
+    --color-gray-900: rgb(24 29 39);
+    --color-gray-950: rgb(10 13 18);
+
+    --color-gray-blue-25: rgb(252 252 253);
+    --color-gray-blue-50: rgb(248 249 252);
+    --color-gray-blue-100: rgb(234 236 245);
+    --color-gray-blue-200: rgb(213 217 235);
+    --color-gray-blue-300: rgb(179 184 219);
+    --color-gray-blue-400: rgb(113 123 188);
+    --color-gray-blue-500: rgb(78 91 166);
+    --color-gray-blue-600: rgb(62 71 132);
+    --color-gray-blue-700: rgb(54 63 114);
+    --color-gray-blue-800: rgb(41 48 86);
+    --color-gray-blue-900: rgb(16 19 35);
+    --color-gray-blue-950: rgb(13 15 28);
+
+    --color-gray-cool-25: rgb(252 252 253);
+    --color-gray-cool-50: rgb(249 249 251);
+    --color-gray-cool-100: rgb(239 241 245);
+    --color-gray-cool-200: rgb(220 223 234);
+    --color-gray-cool-300: rgb(185 192 212);
+    --color-gray-cool-400: rgb(125 137 176);
+    --color-gray-cool-500: rgb(93 107 152);
+    --color-gray-cool-600: rgb(74 85 120);
+    --color-gray-cool-700: rgb(64 73 104);
+    --color-gray-cool-800: rgb(48 55 79);
+    --color-gray-cool-900: rgb(17 19 34);
+    --color-gray-cool-950: rgb(14 16 27);
+
+    --color-gray-modern-25: rgb(252 252 253);
+    --color-gray-modern-50: rgb(248 250 252);
+    --color-gray-modern-100: rgb(238 242 246);
+    --color-gray-modern-200: rgb(227 232 239);
+    --color-gray-modern-300: rgb(205 213 223);
+    --color-gray-modern-400: rgb(154 164 178);
+    --color-gray-modern-500: rgb(105 117 134);
+    --color-gray-modern-600: rgb(75 85 101);
+    --color-gray-modern-700: rgb(54 65 82);
+    --color-gray-modern-800: rgb(32 41 57);
+    --color-gray-modern-900: rgb(18 25 38);
+    --color-gray-modern-950: rgb(13 18 28);
+
+    --color-gray-neutral-25: rgb(252 252 253);
+    --color-gray-neutral-50: rgb(249 250 251);
+    --color-gray-neutral-100: rgb(243 244 246);
+    --color-gray-neutral-200: rgb(229 231 235);
+    --color-gray-neutral-300: rgb(210 214 219);
+    --color-gray-neutral-400: rgb(157 164 174);
+    --color-gray-neutral-500: rgb(108 115 127);
+    --color-gray-neutral-600: rgb(77 87 97);
+    --color-gray-neutral-700: rgb(56 66 80);
+    --color-gray-neutral-800: rgb(31 42 55);
+    --color-gray-neutral-900: rgb(17 25 39);
+    --color-gray-neutral-950: rgb(13 18 28);
+
+    --color-gray-iron-25: rgb(252 252 252);
+    --color-gray-iron-50: rgb(250 250 250);
+    --color-gray-iron-100: rgb(244 244 245);
+    --color-gray-iron-200: rgb(228 228 231);
+    --color-gray-iron-300: rgb(209 209 214);
+    --color-gray-iron-400: rgb(160 160 171);
+    --color-gray-iron-500: rgb(112 112 123);
+    --color-gray-iron-600: rgb(81 82 92);
+    --color-gray-iron-700: rgb(63 63 70);
+    --color-gray-iron-800: rgb(38 39 43);
+    --color-gray-iron-900: rgb(26 26 30);
+    --color-gray-iron-950: rgb(19 19 22);
+
+    --color-gray-true-25: rgb(252 252 252);
+    --color-gray-true-50: rgb(247 247 247);
+    --color-gray-true-100: rgb(245 245 245);
+    --color-gray-true-200: rgb(229 229 229);
+    --color-gray-true-300: rgb(214 214 214);
+    --color-gray-true-400: rgb(163 163 163);
+    --color-gray-true-500: rgb(115 115 115);
+    --color-gray-true-600: rgb(82 82 82);
+    --color-gray-true-700: rgb(66 66 66);
+    --color-gray-true-800: rgb(41 41 41);
+    --color-gray-true-900: rgb(20 20 20);
+    --color-gray-true-950: rgb(15 15 15);
+
+    --color-gray-warm-25: rgb(253 253 252);
+    --color-gray-warm-50: rgb(250 250 249);
+    --color-gray-warm-100: rgb(245 245 244);
+    --color-gray-warm-200: rgb(231 229 228);
+    --color-gray-warm-300: rgb(215 211 208);
+    --color-gray-warm-400: rgb(169 162 157);
+    --color-gray-warm-500: rgb(121 113 107);
+    --color-gray-warm-600: rgb(87 83 78);
+    --color-gray-warm-700: rgb(68 64 60);
+    --color-gray-warm-800: rgb(41 37 36);
+    --color-gray-warm-900: rgb(28 25 23);
+    --color-gray-warm-950: rgb(23 20 18);
+
+    --color-moss-25: rgb(250 253 247);
+    --color-moss-50: rgb(245 251 238);
+    --color-moss-100: rgb(230 244 215);
+    --color-moss-200: rgb(206 234 176);
+    --color-moss-300: rgb(172 220 121);
+    --color-moss-400: rgb(134 203 60);
+    --color-moss-500: rgb(102 159 42);
+    --color-moss-600: rgb(79 122 33);
+    --color-moss-700: rgb(63 98 26);
+    --color-moss-800: rgb(51 80 21);
+    --color-moss-900: rgb(43 66 18);
+    --color-moss-950: rgb(26 40 11);
+
+    --color-green-light-25: rgb(250 254 245);
+    --color-green-light-50: rgb(243 254 231);
+    --color-green-light-100: rgb(227 251 204);
+    --color-green-light-200: rgb(208 248 171);
+    --color-green-light-300: rgb(166 239 103);
+    --color-green-light-400: rgb(133 225 58);
+    --color-green-light-500: rgb(102 198 28);
+    --color-green-light-600: rgb(76 163 13);
+    --color-green-light-700: rgb(59 124 15);
+    --color-green-light-800: rgb(50 98 18);
+    --color-green-light-900: rgb(43 83 20);
+    --color-green-light-950: rgb(21 41 10);
+
+    --color-green-25: rgb(246 254 249);
+    --color-green-50: rgb(237 252 242);
+    --color-green-100: rgb(211 248 223);
+    --color-green-200: rgb(170 240 196);
+    --color-green-300: rgb(115 226 163);
+    --color-green-400: rgb(60 203 127);
+    --color-green-500: rgb(22 179 100);
+    --color-green-600: rgb(9 146 80);
+    --color-green-700: rgb(8 116 67);
+    --color-green-800: rgb(9 92 55);
+    --color-green-900: rgb(8 76 46);
+    --color-green-950: rgb(5 46 28);
+
+    --color-teal-25: rgb(246 254 252);
+    --color-teal-50: rgb(240 253 249);
+    --color-teal-100: rgb(204 251 239);
+    --color-teal-200: rgb(153 246 224);
+    --color-teal-300: rgb(95 233 208);
+    --color-teal-400: rgb(46 211 183);
+    --color-teal-500: rgb(21 183 158);
+    --color-teal-600: rgb(14 147 132);
+    --color-teal-700: rgb(16 117 105);
+    --color-teal-800: rgb(18 93 86);
+    --color-teal-900: rgb(19 78 72);
+    --color-teal-950: rgb(10 41 38);
+
+    --color-cyan-25: rgb(245 254 255);
+    --color-cyan-50: rgb(236 253 255);
+    --color-cyan-100: rgb(207 249 254);
+    --color-cyan-200: rgb(165 240 252);
+    --color-cyan-300: rgb(103 227 249);
+    --color-cyan-400: rgb(34 204 238);
+    --color-cyan-500: rgb(6 174 212);
+    --color-cyan-600: rgb(8 138 178);
+    --color-cyan-700: rgb(14 112 144);
+    --color-cyan-800: rgb(21 91 117);
+    --color-cyan-900: rgb(22 76 99);
+    --color-cyan-950: rgb(13 45 58);
+
+    --color-blue-light-25: rgb(245 251 255);
+    --color-blue-light-50: rgb(240 249 255);
+    --color-blue-light-100: rgb(224 242 254);
+    --color-blue-light-200: rgb(185 230 254);
+    --color-blue-light-300: rgb(124 212 253);
+    --color-blue-light-400: rgb(54 191 250);
+    --color-blue-light-500: rgb(11 165 236);
+    --color-blue-light-600: rgb(0 134 201);
+    --color-blue-light-700: rgb(2 106 162);
+    --color-blue-light-800: rgb(6 89 134);
+    --color-blue-light-900: rgb(11 74 111);
+    --color-blue-light-950: rgb(6 44 65);
+
+    --color-blue-25: rgb(245 250 255);
+    --color-blue-50: rgb(239 248 255);
+    --color-blue-100: rgb(209 233 255);
+    --color-blue-200: rgb(178 221 255);
+    --color-blue-300: rgb(132 202 255);
+    --color-blue-400: rgb(83 177 253);
+    --color-blue-500: rgb(46 144 250);
+    --color-blue-600: rgb(21 112 239);
+    --color-blue-700: rgb(23 92 211);
+    --color-blue-800: rgb(24 73 169);
+    --color-blue-900: rgb(25 65 133);
+    --color-blue-950: rgb(16 42 86);
+
+    --color-blue-dark-25: rgb(245 248 255);
+    --color-blue-dark-50: rgb(239 244 255);
+    --color-blue-dark-100: rgb(209 224 255);
+    --color-blue-dark-200: rgb(178 204 255);
+    --color-blue-dark-300: rgb(132 173 255);
+    --color-blue-dark-400: rgb(82 139 255);
+    --color-blue-dark-500: rgb(41 112 255);
+    --color-blue-dark-600: rgb(21 94 239);
+    --color-blue-dark-700: rgb(0 78 235);
+    --color-blue-dark-800: rgb(0 64 193);
+    --color-blue-dark-900: rgb(0 53 158);
+    --color-blue-dark-950: rgb(0 34 102);
+
+    --color-indigo-25: rgb(245 248 255);
+    --color-indigo-50: rgb(238 244 255);
+    --color-indigo-100: rgb(224 234 255);
+    --color-indigo-200: rgb(199 215 254);
+    --color-indigo-300: rgb(164 188 253);
+    --color-indigo-400: rgb(128 152 249);
+    --color-indigo-500: rgb(97 114 243);
+    --color-indigo-600: rgb(68 76 231);
+    --color-indigo-700: rgb(53 56 205);
+    --color-indigo-800: rgb(45 49 166);
+    --color-indigo-900: rgb(45 50 130);
+    --color-indigo-950: rgb(31 35 91);
+
+    --color-violet-25: rgb(251 250 255);
+    --color-violet-50: rgb(245 243 255);
+    --color-violet-100: rgb(236 233 254);
+    --color-violet-200: rgb(221 214 254);
+    --color-violet-300: rgb(195 181 253);
+    --color-violet-400: rgb(164 138 251);
+    --color-violet-500: rgb(135 91 247);
+    --color-violet-600: rgb(120 57 238);
+    --color-violet-700: rgb(105 39 218);
+    --color-violet-800: rgb(87 32 183);
+    --color-violet-900: rgb(73 28 150);
+    --color-violet-950: rgb(46 18 94);
+
+    --color-purple-25: rgb(250 250 255);
+    --color-purple-50: rgb(244 243 255);
+    --color-purple-100: rgb(235 233 254);
+    --color-purple-200: rgb(217 214 254);
+    --color-purple-300: rgb(189 180 254);
+    --color-purple-400: rgb(155 138 251);
+    --color-purple-500: rgb(122 90 248);
+    --color-purple-600: rgb(105 56 239);
+    --color-purple-700: rgb(89 37 220);
+    --color-purple-800: rgb(74 31 184);
+    --color-purple-900: rgb(62 28 150);
+    --color-purple-950: rgb(39 17 95);
+
+    --color-fuchsia-25: rgb(254 250 255);
+    --color-fuchsia-50: rgb(253 244 255);
+    --color-fuchsia-100: rgb(251 232 255);
+    --color-fuchsia-200: rgb(246 208 254);
+    --color-fuchsia-300: rgb(238 170 253);
+    --color-fuchsia-400: rgb(228 120 250);
+    --color-fuchsia-500: rgb(212 68 241);
+    --color-fuchsia-600: rgb(186 36 213);
+    --color-fuchsia-700: rgb(159 26 177);
+    --color-fuchsia-800: rgb(130 24 144);
+    --color-fuchsia-900: rgb(111 24 119);
+    --color-fuchsia-950: rgb(71 16 76);
+
+    --color-pink-25: rgb(254 246 251);
+    --color-pink-50: rgb(253 242 250);
+    --color-pink-100: rgb(252 231 246);
+    --color-pink-200: rgb(252 206 238);
+    --color-pink-300: rgb(250 167 224);
+    --color-pink-400: rgb(246 112 199);
+    --color-pink-500: rgb(238 70 188);
+    --color-pink-600: rgb(221 37 144);
+    --color-pink-700: rgb(193 21 116);
+    --color-pink-800: rgb(158 22 95);
+    --color-pink-900: rgb(133 22 81);
+    --color-pink-950: rgb(78 13 48);
+
+    --color-rose-25: rgb(255 245 246);
+    --color-rose-50: rgb(255 241 243);
+    --color-rose-100: rgb(255 228 232);
+    --color-rose-200: rgb(254 205 214);
+    --color-rose-300: rgb(254 163 180);
+    --color-rose-400: rgb(253 111 142);
+    --color-rose-500: rgb(246 61 104);
+    --color-rose-600: rgb(227 27 84);
+    --color-rose-700: rgb(192 16 72);
+    --color-rose-800: rgb(161 16 67);
+    --color-rose-900: rgb(137 18 62);
+    --color-rose-950: rgb(81 11 36);
+
+    --color-orange-dark-25: rgb(255 249 245);
+    --color-orange-dark-50: rgb(255 244 237);
+    --color-orange-dark-100: rgb(255 230 213);
+    --color-orange-dark-200: rgb(255 214 174);
+    --color-orange-dark-300: rgb(255 156 102);
+    --color-orange-dark-400: rgb(255 105 46);
+    --color-orange-dark-500: rgb(255 68 5);
+    --color-orange-dark-600: rgb(230 46 5);
+    --color-orange-dark-700: rgb(188 27 6);
+    --color-orange-dark-800: rgb(151 24 12);
+    --color-orange-dark-900: rgb(119 26 13);
+    --color-orange-dark-950: rgb(87 19 10);
+
+    --color-orange-25: rgb(254 250 245);
+    --color-orange-50: rgb(254 246 238);
+    --color-orange-100: rgb(253 234 215);
+    --color-orange-200: rgb(249 219 175);
+    --color-orange-300: rgb(247 178 122);
+    --color-orange-400: rgb(243 135 68);
+    --color-orange-500: rgb(239 104 32);
+    --color-orange-600: rgb(224 79 22);
+    --color-orange-700: rgb(185 56 21);
+    --color-orange-800: rgb(147 47 25);
+    --color-orange-900: rgb(119 41 23);
+    --color-orange-950: rgb(81 28 16);
+
+    --color-yellow-25: rgb(254 253 240);
+    --color-yellow-50: rgb(254 251 232);
+    --color-yellow-100: rgb(254 247 195);
+    --color-yellow-200: rgb(254 238 149);
+    --color-yellow-300: rgb(253 226 114);
+    --color-yellow-400: rgb(250 197 21);
+    --color-yellow-500: rgb(234 170 8);
+    --color-yellow-600: rgb(202 133 4);
+    --color-yellow-700: rgb(161 92 7);
+    --color-yellow-800: rgb(133 74 14);
+    --color-yellow-900: rgb(113 59 18);
+    --color-yellow-950: rgb(84 44 13);
+
+    /* LIGHT MODE VARIABLES */
+
+    --color-alpha-white: rgb(255 255 255);
+    --color-alpha-black: rgb(0 0 0);
+
+    /* UTILITY COLORS */
+    --color-utility-blue-50: var(--color-blue-50);
+    --color-utility-blue-100: var(--color-blue-100);
+    --color-utility-blue-200: var(--color-blue-200);
+    --color-utility-blue-300: var(--color-blue-300);
+    --color-utility-blue-400: var(--color-blue-400);
+    --color-utility-blue-500: var(--color-blue-500);
+    --color-utility-blue-600: var(--color-blue-600);
+    --color-utility-blue-700: var(--color-blue-700);
+
+    --color-utility-brand-50: var(--color-brand-50);
+    --color-utility-brand-50_alt: var(--color-brand-50);
+    --color-utility-brand-100: var(--color-brand-100);
+    --color-utility-brand-100_alt: var(--color-brand-100);
+    --color-utility-brand-200: var(--color-brand-200);
+    --color-utility-brand-200_alt: var(--color-brand-200);
+    --color-utility-brand-300: var(--color-brand-300);
+    --color-utility-brand-300_alt: var(--color-brand-300);
+    --color-utility-brand-400: var(--color-brand-400);
+    --color-utility-brand-400_alt: var(--color-brand-400);
+    --color-utility-brand-500: var(--color-brand-500);
+    --color-utility-brand-500_alt: var(--color-brand-500);
+    --color-utility-brand-600: var(--color-brand-600);
+    --color-utility-brand-600_alt: var(--color-brand-600);
+    --color-utility-brand-700: var(--color-brand-700);
+    --color-utility-brand-700_alt: var(--color-brand-700);
+    --color-utility-brand-800: var(--color-brand-800);
+    --color-utility-brand-800_alt: var(--color-brand-800);
+    --color-utility-brand-900: var(--color-brand-900);
+    --color-utility-brand-900_alt: var(--color-brand-900);
+
+    --color-utility-gray-50: var(--color-gray-50);
+    --color-utility-gray-100: var(--color-gray-100);
+    --color-utility-gray-200: var(--color-gray-200);
+    --color-utility-gray-300: var(--color-gray-300);
+    --color-utility-gray-400: var(--color-gray-400);
+    --color-utility-gray-500: var(--color-gray-500);
+    --color-utility-gray-600: var(--color-gray-600);
+    --color-utility-gray-700: var(--color-gray-700);
+    --color-utility-gray-800: var(--color-gray-800);
+    --color-utility-gray-900: var(--color-gray-900);
+
+    --color-utility-error-50: var(--color-error-50);
+    --color-utility-error-100: var(--color-error-100);
+    --color-utility-error-200: var(--color-error-200);
+    --color-utility-error-300: var(--color-error-300);
+    --color-utility-error-400: var(--color-error-400);
+    --color-utility-error-500: var(--color-error-500);
+    --color-utility-error-600: var(--color-error-600);
+    --color-utility-error-700: var(--color-error-700);
+
+    --color-utility-warning-50: var(--color-warning-50);
+    --color-utility-warning-100: var(--color-warning-100);
+    --color-utility-warning-200: var(--color-warning-200);
+    --color-utility-warning-300: var(--color-warning-300);
+    --color-utility-warning-400: var(--color-warning-400);
+    --color-utility-warning-500: var(--color-warning-500);
+    --color-utility-warning-600: var(--color-warning-600);
+    --color-utility-warning-700: var(--color-warning-700);
+
+    --color-utility-success-50: var(--color-success-50);
+    --color-utility-success-100: var(--color-success-100);
+    --color-utility-success-200: var(--color-success-200);
+    --color-utility-success-300: var(--color-success-300);
+    --color-utility-success-400: var(--color-success-400);
+    --color-utility-success-500: var(--color-success-500);
+    --color-utility-success-600: var(--color-success-600);
+    --color-utility-success-700: var(--color-success-700);
+
+    --color-utility-orange-50: var(--color-orange-50);
+    --color-utility-orange-100: var(--color-orange-100);
+    --color-utility-orange-200: var(--color-orange-200);
+    --color-utility-orange-300: var(--color-orange-300);
+    --color-utility-orange-400: var(--color-orange-400);
+    --color-utility-orange-500: var(--color-orange-500);
+    --color-utility-orange-600: var(--color-orange-600);
+    --color-utility-orange-700: var(--color-orange-700);
+
+    --color-utility-blue-dark-50: var(--color-blue-dark-50);
+    --color-utility-blue-dark-100: var(--color-blue-dark-100);
+    --color-utility-blue-dark-200: var(--color-blue-dark-200);
+    --color-utility-blue-dark-300: var(--color-blue-dark-300);
+    --color-utility-blue-dark-400: var(--color-blue-dark-400);
+    --color-utility-blue-dark-500: var(--color-blue-dark-500);
+    --color-utility-blue-dark-600: var(--color-blue-dark-600);
+    --color-utility-blue-dark-700: var(--color-blue-dark-700);
+
+    --color-utility-indigo-50: var(--color-indigo-50);
+    --color-utility-indigo-100: var(--color-indigo-100);
+    --color-utility-indigo-200: var(--color-indigo-200);
+    --color-utility-indigo-300: var(--color-indigo-300);
+    --color-utility-indigo-400: var(--color-indigo-400);
+    --color-utility-indigo-500: var(--color-indigo-500);
+    --color-utility-indigo-600: var(--color-indigo-600);
+    --color-utility-indigo-700: var(--color-indigo-700);
+
+    --color-utility-fuchsia-50: var(--color-fuchsia-50);
+    --color-utility-fuchsia-100: var(--color-fuchsia-100);
+    --color-utility-fuchsia-200: var(--color-fuchsia-200);
+    --color-utility-fuchsia-300: var(--color-fuchsia-300);
+    --color-utility-fuchsia-400: var(--color-fuchsia-400);
+    --color-utility-fuchsia-500: var(--color-fuchsia-500);
+    --color-utility-fuchsia-600: var(--color-fuchsia-600);
+    --color-utility-fuchsia-700: var(--color-fuchsia-700);
+
+    --color-utility-pink-50: var(--color-pink-50);
+    --color-utility-pink-100: var(--color-pink-100);
+    --color-utility-pink-200: var(--color-pink-200);
+    --color-utility-pink-300: var(--color-pink-300);
+    --color-utility-pink-400: var(--color-pink-400);
+    --color-utility-pink-500: var(--color-pink-500);
+    --color-utility-pink-600: var(--color-pink-600);
+    --color-utility-pink-700: var(--color-pink-700);
+
+    --color-utility-purple-50: var(--color-purple-50);
+    --color-utility-purple-100: var(--color-purple-100);
+    --color-utility-purple-200: var(--color-purple-200);
+    --color-utility-purple-300: var(--color-purple-300);
+    --color-utility-purple-400: var(--color-purple-400);
+    --color-utility-purple-500: var(--color-purple-500);
+    --color-utility-purple-600: var(--color-purple-600);
+    --color-utility-purple-700: var(--color-purple-700);
+
+    --color-utility-orange-dark-50: var(--color-orange-dark-50);
+    --color-utility-orange-dark-100: var(--color-orange-dark-100);
+    --color-utility-orange-dark-200: var(--color-orange-dark-200);
+    --color-utility-orange-dark-300: var(--color-orange-dark-300);
+    --color-utility-orange-dark-400: var(--color-orange-dark-400);
+    --color-utility-orange-dark-500: var(--color-orange-dark-500);
+    --color-utility-orange-dark-600: var(--color-orange-dark-600);
+    --color-utility-orange-dark-700: var(--color-orange-dark-700);
+
+    --color-utility-blue-light-50: var(--color-blue-light-50);
+    --color-utility-blue-light-100: var(--color-blue-light-100);
+    --color-utility-blue-light-200: var(--color-blue-light-200);
+    --color-utility-blue-light-300: var(--color-blue-light-300);
+    --color-utility-blue-light-400: var(--color-blue-light-400);
+    --color-utility-blue-light-500: var(--color-blue-light-500);
+    --color-utility-blue-light-600: var(--color-blue-light-600);
+    --color-utility-blue-light-700: var(--color-blue-light-700);
+
+    --color-utility-gray-blue-50: var(--color-gray-blue-50);
+    --color-utility-gray-blue-100: var(--color-gray-blue-100);
+    --color-utility-gray-blue-200: var(--color-gray-blue-200);
+    --color-utility-gray-blue-300: var(--color-gray-blue-300);
+    --color-utility-gray-blue-400: var(--color-gray-blue-400);
+    --color-utility-gray-blue-500: var(--color-gray-blue-500);
+    --color-utility-gray-blue-600: var(--color-gray-blue-600);
+    --color-utility-gray-blue-700: var(--color-gray-blue-700);
+
+    --color-utility-green-50: var(--color-green-50);
+    --color-utility-green-100: var(--color-green-100);
+    --color-utility-green-200: var(--color-green-200);
+    --color-utility-green-300: var(--color-green-300);
+    --color-utility-green-400: var(--color-green-400);
+    --color-utility-green-500: var(--color-green-500);
+    --color-utility-green-600: var(--color-green-600);
+    --color-utility-green-700: var(--color-green-700);
+
+    --color-utility-yellow-50: var(--color-yellow-50);
+    --color-utility-yellow-100: var(--color-yellow-100);
+    --color-utility-yellow-200: var(--color-yellow-200);
+    --color-utility-yellow-300: var(--color-yellow-300);
+    --color-utility-yellow-400: var(--color-yellow-400);
+    --color-utility-yellow-500: var(--color-yellow-500);
+    --color-utility-yellow-600: var(--color-yellow-600);
+    --color-utility-yellow-700: var(--color-yellow-700);
+
+    /* TEXT COLORS */
+    --color-text-white: var(--color-white);
+    --color-text-primary: var(--color-gray-900);
+    --color-text-secondary: var(--color-gray-700);
+    --color-text-secondary_hover: var(--color-gray-800);
+    --color-text-tertiary: var(--color-gray-600);
+    --color-text-tertiary_hover: var(--color-gray-700);
+    --color-text-quaternary: var(--color-gray-500);
+    --color-text-error-primary: var(--color-error-600);
+    --color-text-error-primary_hover: var(--color-error-700);
+    --color-text-warning-primary: var(--color-warning-600);
+    --color-text-success-primary: var(--color-success-600);
+    --color-text-disabled: var(--color-gray-500);
+    --color-text-placeholder: var(--color-gray-500);
+    --color-text-placeholder_subtle: var(--color-gray-300);
+    --color-text-primary_on-brand: var(--color-white);
+    --color-text-secondary_on-brand: var(--color-brand-200);
+    --color-text-tertiary_on-brand: var(--color-brand-200);
+    --color-text-quaternary_on-brand: var(--color-brand-300);
+    --color-text-brand-primary: var(--color-brand-900);
+    --color-text-brand-secondary: var(--color-brand-700);
+    --color-text-brand-secondary_hover: var(--color-brand-800);
+    --color-text-brand-tertiary: var(--color-brand-600);
+    --color-text-brand-tertiary_alt: var(--color-brand-600);
+
+    /* BORDER COLORS */
+    --color-border-primary: var(--color-gray-300);
+    --color-border-secondary: var(--color-gray-200);
+    --color-border-secondary_alt: rgb(0 0 0 / 0.08);
+    --color-border-tertiary: var(--color-gray-100);
+    --color-border-error: var(--color-error-500);
+    --color-border-error_subtle: var(--color-error-300);
+    --color-border-disabled: var(--color-gray-300);
+    --color-border-disabled_subtle: var(--color-gray-200);
+    --color-border-brand: var(--color-brand-500);
+    --color-border-brand_alt: var(--color-brand-600);
+
+    /* FOREGROUND COLORS */
+    --color-fg-white: var(--color-white);
+    --color-fg-primary: var(--color-gray-900);
+    --color-fg-secondary: var(--color-gray-700);
+    --color-fg-secondary_hover: var(--color-gray-800);
+    --color-fg-tertiary: var(--color-gray-600);
+    --color-fg-tertiary_hover: var(--color-gray-700);
+    --color-fg-quaternary: var(--color-gray-400);
+    --color-fg-quaternary_hover: var(--color-gray-500);
+    --color-fg-warning-primary: var(--color-warning-600);
+    --color-fg-warning-secondary: var(--color-warning-500);
+    --color-fg-success-primary: var(--color-success-600);
+    --color-fg-success-secondary: var(--color-success-500);
+    --color-fg-error-primary: var(--color-error-600);
+    --color-fg-error-secondary: var(--color-error-500);
+    --color-fg-disabled: var(--color-gray-400);
+    --color-fg-disabled_subtle: var(--color-gray-300);
+    --color-fg-brand-primary: var(--color-brand-600);
+    --color-fg-brand-primary_alt: var(--color-fg-brand-primary);
+    --color-fg-brand-secondary: var(--color-brand-500);
+    --color-fg-brand-secondary_alt: var(--color-fg-brand-secondary);
+    --color-fg-brand-secondary_hover: var(--color-brand-600);
+
+    /* BACKGROUND COLORS */
+    --color-bg-primary: var(--color-white);
+    --color-bg-primary-solid: var(--color-gray-950);
+    --color-bg-primary_alt: var(--color-white);
+    --color-bg-primary_hover: var(--color-gray-50);
+    --color-bg-secondary: var(--color-gray-50);
+    --color-bg-secondary-solid: var(--color-gray-600);
+    --color-bg-secondary_subtle: var(--color-gray-25);
+    --color-bg-secondary_hover: var(--color-gray-100);
+    --color-bg-secondary_alt: var(--color-gray-50);
+    --color-bg-tertiary: var(--color-gray-100);
+    --color-bg-quaternary: var(--color-gray-200);
+    --color-bg-error-primary: var(--color-error-50);
+    --color-bg-error-secondary: var(--color-error-100);
+    --color-bg-error-solid: var(--color-error-600);
+    --color-bg-error-solid_hover: var(--color-error-700);
+    --color-bg-warning-primary: var(--color-warning-50);
+    --color-bg-warning-secondary: var(--color-warning-100);
+    --color-bg-warning-solid: var(--color-warning-600);
+    --color-bg-success-primary: var(--color-success-50);
+    --color-bg-success-secondary: var(--color-success-100);
+    --color-bg-success-solid: var(--color-success-600);
+    --color-bg-disabled: var(--color-gray-100);
+    --color-bg-disabled_subtle: var(--color-gray-50);
+    --color-bg-active: var(--color-gray-50);
+    --color-bg-overlay: var(--color-gray-950);
+    --color-bg-brand-primary: var(--color-brand-50);
+    --color-bg-brand-primary_alt: var(--color-brand-50);
+    --color-bg-brand-secondary: var(--color-brand-100);
+    --color-bg-brand-solid: var(--color-brand-600);
+    --color-bg-brand-solid_hover: var(--color-brand-700);
+    --color-bg-brand-section: var(--color-brand-800);
+    --color-bg-brand-section_subtle: var(--color-brand-700);
+
+    /* COMPONENT COLORS */
+    --color-app-store-badge-border: rgb(166 166 166);
+    --color-avatar-bg: var(--color-gray-100);
+    --color-avatar-contrast-border: rgb(0 0 0 / 0.08);
+    --color-avatar-profile-photo-border: var(--color-white);
+    --color-avatar-styles-bg-neutral: rgb(224 224 224);
+    --color-button-destructive-primary-icon: var(--color-error-300);
+    --color-button-destructive-primary-icon_hover: var(--color-error-200);
+    --color-button-primary-icon: var(--color-brand-300);
+    --color-button-primary-icon_hover: var(--color-brand-200);
+    --color-featured-icon-light-fg-brand: var(--color-brand-600);
+    --color-featured-icon-light-fg-error: var(--color-error-600);
+    --color-featured-icon-light-fg-gray: var(--color-gray-500);
+    --color-featured-icon-light-fg-success: var(--color-success-600);
+    --color-featured-icon-light-fg-warning: var(--color-warning-600);
+    --color-focus-ring-error: var(--color-error-500);
+    --color-focus-ring: var(--color-brand-500);
+    --color-footer-button-fg: var(--color-brand-200);
+    --color-footer-button-fg_hover: var(--color-white);
+    --color-icon-fg-brand: var(--color-brand-600);
+    --color-icon-fg-brand_on-brand: var(--color-brand-200);
+    --color-screen-mockup-border: var(--color-gray-900);
+    --color-slider-handle-bg: var(--color-white);
+    --color-slider-handle-border: var(--color-brand-600);
+    --color-toggle-border: var(--color-gray-300);
+    --color-toggle-button-fg_disabled: var(--color-gray-50);
+    --color-toggle-slim-border_pressed-hover: var(--color-bg-brand-solid_hover);
+    --color-toggle-slim-border_pressed: var(--color-bg-brand-solid);
+    --color-tooltip-supporting-text: var(--color-gray-300);
+    --color-text-editor-icon-fg: var(--color-gray-400);
+    --color-text-editor-icon-fg_active: var(--color-gray-500);
+
+    /* BACKGROUND PROPERTY COLORS */
+    --background-color-primary: var(--color-bg-primary);
+    --background-color-primary-solid: var(--color-bg-primary-solid);
+    --background-color-primary_alt: var(--color-bg-primary_alt);
+    --background-color-primary_hover: var(--color-bg-primary_hover);
+    --background-color-secondary: var(--color-bg-secondary);
+    --background-color-secondary-solid: var(--color-bg-secondary-solid);
+    --background-color-secondary_alt: var(--color-bg-secondary_alt);
+    --background-color-secondary_hover: var(--color-bg-secondary_hover);
+    --background-color-secondary_subtle: var(--color-bg-secondary_subtle);
+    --background-color-tertiary: var(--color-bg-tertiary);
+    --background-color-quaternary: var(--color-bg-quaternary);
+    --background-color-active: var(--color-bg-active);
+    --background-color-disabled: var(--color-bg-disabled);
+    --background-color-disabled_subtle: var(--color-bg-disabled_subtle);
+    --background-color-overlay: var(--color-bg-overlay);
+    --background-color-brand-primary: var(--color-bg-brand-primary);
+    --background-color-brand-primary_alt: var(--color-bg-brand-primary_alt);
+    --background-color-brand-secondary: var(--color-bg-brand-secondary);
+    --background-color-brand-solid: var(--color-bg-brand-solid);
+    --background-color-brand-solid_hover: var(--color-bg-brand-solid_hover);
+    --background-color-brand-section: var(--color-bg-brand-section);
+    --background-color-brand-section_subtle: var(--color-bg-brand-section_subtle);
+    --background-color-error-primary: var(--color-bg-error-primary);
+    --background-color-error-secondary: var(--color-bg-error-secondary);
+    --background-color-error-solid: var(--color-bg-error-solid);
+    --background-color-error-solid_hover: var(--color-bg-error-solid_hover);
+    --background-color-warning-primary: var(--color-bg-warning-primary);
+    --background-color-warning-secondary: var(--color-bg-warning-secondary);
+    --background-color-warning-solid: var(--color-bg-warning-solid);
+    --background-color-success-primary: var(--color-bg-success-primary);
+    --background-color-success-secondary: var(--color-bg-success-secondary);
+    --background-color-border-tertiary: var(--color-border-tertiary);
+    --background-color-success-solid: var(--color-bg-success-solid);
+    --background-color-border-brand: var(--color-border-brand);
+    --background-color-border-brand_alt: var(--color-border-brand_alt);
+
+    /* TEXT PROPERTY COLORS */
+    --text-color-primary: var(--color-text-primary);
+    --text-color-primary_on-brand: var(--color-text-primary_on-brand);
+    --text-color-secondary: var(--color-text-secondary);
+    --text-color-secondary_hover: var(--color-text-secondary_hover);
+    --text-color-secondary_on-brand: var(--color-text-secondary_on-brand);
+    --text-color-tertiary: var(--color-text-tertiary);
+    --text-color-tertiary_hover: var(--color-text-tertiary_hover);
+    --text-color-tertiary_on-brand: var(--color-text-tertiary_on-brand);
+    --text-color-quaternary: var(--color-text-quaternary);
+    --text-color-quaternary_on-brand: var(--color-text-quaternary_on-brand);
+    --text-color-disabled: var(--color-text-disabled);
+    --text-color-placeholder: var(--color-text-placeholder);
+    --text-color-placeholder_subtle: var(--color-text-placeholder_subtle);
+    --text-color-brand-primary: var(--color-text-brand-primary);
+    --text-color-brand-secondary: var(--color-text-brand-secondary);
+    --text-color-brand-secondary_hover: var(--color-text-brand-secondary_hover);
+    --text-color-brand-tertiary: var(--color-text-brand-tertiary);
+    --text-color-brand-tertiary_alt: var(--color-text-brand-tertiary_alt);
+    --text-color-error-primary: var(--color-text-error-primary);
+    --text-color-error-primary_hover: var(--color-text-error-primary_hover);
+    --text-color-warning-primary: var(--color-text-warning-primary);
+    --text-color-success-primary: var(--color-text-success-primary);
+    --text-color-tooltip-supporting-text: var(--color-tooltip-supporting-text);
+
+    /* BORDER PROPERTY COLORS */
+    --border-color-primary: var(--color-border-primary);
+    --border-color-secondary: var(--color-border-secondary);
+    --border-color-secondary_alt: var(--color-border-secondary_alt);
+    --border-color-tertiary: var(--color-border-tertiary);
+    --border-color-disabled: var(--color-border-disabled);
+    --border-color-disabled_subtle: var(--color-border-disabled_subtle);
+    --border-color-error: var(--color-border-error);
+    --border-color-error_subtle: var(--color-border-error_subtle);
+    --border-color-brand: var(--color-border-brand);
+    --border-color-brand_alt: var(--color-border-brand_alt);
+    --border-color-brand-solid: var(--color-bg-brand-solid);
+    --border-color-brand-solid_hover: var(--color-bg-brand-solid_hover);
+
+    /* RING PROPERTY COLORS */
+    --ring-color-primary: var(--color-border-primary);
+    --ring-color-secondary: var(--color-border-secondary);
+    --ring-color-secondary_alt: var(--color-border-secondary_alt);
+    --ring-color-tertiary: var(--color-border-tertiary);
+    --ring-color-error: var(--color-border-error);
+    --ring-color-error_subtle: var(--color-border-error_subtle);
+    --ring-color-disabled: var(--color-border-disabled);
+    --ring-color-disabled_subtle: var(--color-border-disabled_subtle);
+    --ring-color-brand: var(--color-border-brand);
+    --ring-color-brand-solid: var(--color-bg-brand-solid);
+    --ring-color-brand-solid_hover: var(--color-bg-brand-solid_hover);
+    --ring-color-brand_alt: var(--color-border-brand_alt);
+    --ring-color-bg-brand-solid: var(--color-bg-brand-solid);
+
+    /* OUTLINE PROPERTY COLORS */
+    --outline-color-primary: var(--color-border-primary);
+    --outline-color-secondary: var(--color-border-secondary);
+    --outline-color-secondary_alt: var(--color-border-secondary_alt);
+    --outline-color-tertiary: var(--color-border-tertiary);
+    --outline-color-error: var(--color-border-error);
+    --outline-color-error_subtle: var(--color-border-error_subtle);
+    --outline-color-disabled: var(--color-border-disabled);
+    --outline-color-disabled_subtle: var(--color-border-disabled_subtle);
+    --outline-color-brand: var(--color-border-brand);
+    --outline-color-brand-solid: var(--color-bg-brand-solid);
+    --outline-color-brand-solid_hover: var(--color-bg-brand-solid_hover);
+    --outline-color-brand_alt: var(--color-border-brand_alt);
+}
+
+@layer base {
+    /* DARK MODE VARIABLES */
+
+    .dark-mode {
+        --color-alpha-white: rgb(12 14 18);
+        --color-alpha-black: rgb(255 255 255);
+
+        /* UTILITY COLORS */
+
+        --color-gray-25: rgb(250 250 250);
+        --color-gray-50: rgb(247 247 247);
+        --color-gray-100: rgb(240 240 241);
+        --color-gray-200: rgb(236 236 237);
+        --color-gray-300: rgb(206 207 210);
+        --color-gray-400: rgb(148 151 156);
+        --color-gray-500: rgb(133 136 142);
+        --color-gray-600: rgb(97 101 108);
+        --color-gray-700: rgb(55 58 65);
+        --color-gray-800: rgb(34 38 47);
+        --color-gray-900: rgb(19 22 27);
+        --color-gray-950: rgb(12 14 18);
+
+        --color-utility-blue-50: var(--color-blue-950);
+        --color-utility-blue-100: var(--color-blue-900);
+        --color-utility-blue-200: var(--color-blue-800);
+        --color-utility-blue-300: var(--color-blue-700);
+        --color-utility-blue-400: var(--color-blue-600);
+        --color-utility-blue-500: var(--color-blue-500);
+        --color-utility-blue-600: var(--color-blue-400);
+        --color-utility-blue-700: var(--color-blue-300);
+
+        --color-utility-brand-50: var(--color-brand-950);
+        --color-utility-brand-50_alt: var(--color-utility-gray-50);
+        --color-utility-brand-100: var(--color-brand-900);
+        --color-utility-brand-100_alt: var(--color-utility-gray-100);
+        --color-utility-brand-200: var(--color-brand-800);
+        --color-utility-brand-200_alt: var(--color-utility-gray-200);
+        --color-utility-brand-300: var(--color-brand-700);
+        --color-utility-brand-300_alt: var(--color-utility-gray-300);
+        --color-utility-brand-400: var(--color-brand-600);
+        --color-utility-brand-400_alt: var(--color-utility-gray-400);
+        --color-utility-brand-500: var(--color-brand-500);
+        --color-utility-brand-500_alt: var(--color-utility-gray-500);
+        --color-utility-brand-600: var(--color-brand-400);
+        --color-utility-brand-600_alt: var(--color-utility-gray-600);
+        --color-utility-brand-700: var(--color-brand-300);
+        --color-utility-brand-700_alt: var(--color-utility-gray-700);
+        --color-utility-brand-800: var(--color-brand-200);
+        --color-utility-brand-800_alt: var(--color-utility-gray-800);
+        --color-utility-brand-900: var(--color-brand-100);
+        --color-utility-brand-900_alt: var(--color-utility-gray-900);
+
+        --color-utility-gray-50: var(--color-gray-900);
+        --color-utility-gray-100: var(--color-gray-800);
+        --color-utility-gray-200: var(--color-gray-700);
+        --color-utility-gray-300: var(--color-gray-700);
+        --color-utility-gray-400: var(--color-gray-600);
+        --color-utility-gray-500: var(--color-gray-500);
+        --color-utility-gray-600: var(--color-gray-400);
+        --color-utility-gray-700: var(--color-gray-300);
+        --color-utility-gray-800: var(--color-gray-200);
+        --color-utility-gray-900: var(--color-gray-100);
+
+        --color-utility-error-50: var(--color-error-950);
+        --color-utility-error-100: var(--color-error-900);
+        --color-utility-error-200: var(--color-error-800);
+        --color-utility-error-300: var(--color-error-700);
+        --color-utility-error-400: var(--color-error-600);
+        --color-utility-error-500: var(--color-error-500);
+        --color-utility-error-600: var(--color-error-400);
+        --color-utility-error-700: var(--color-error-300);
+
+        --color-utility-warning-50: var(--color-warning-950);
+        --color-utility-warning-100: var(--color-warning-900);
+        --color-utility-warning-200: var(--color-warning-800);
+        --color-utility-warning-300: var(--color-warning-700);
+        --color-utility-warning-400: var(--color-warning-600);
+        --color-utility-warning-500: var(--color-warning-500);
+        --color-utility-warning-600: var(--color-warning-400);
+        --color-utility-warning-700: var(--color-warning-300);
+
+        --color-utility-success-50: var(--color-success-950);
+        --color-utility-success-100: var(--color-success-900);
+        --color-utility-success-200: var(--color-success-800);
+        --color-utility-success-300: var(--color-success-700);
+        --color-utility-success-400: var(--color-success-600);
+        --color-utility-success-500: var(--color-success-500);
+        --color-utility-success-600: var(--color-success-400);
+        --color-utility-success-700: var(--color-success-300);
+
+        --color-utility-orange-50: var(--color-orange-950);
+        --color-utility-orange-100: var(--color-orange-900);
+        --color-utility-orange-200: var(--color-orange-800);
+        --color-utility-orange-300: var(--color-orange-700);
+        --color-utility-orange-400: var(--color-orange-600);
+        --color-utility-orange-500: var(--color-orange-500);
+        --color-utility-orange-600: var(--color-orange-400);
+        --color-utility-orange-700: var(--color-orange-300);
+
+        --color-utility-blue-dark-50: var(--color-blue-dark-950);
+        --color-utility-blue-dark-100: var(--color-blue-dark-900);
+        --color-utility-blue-dark-200: var(--color-blue-dark-800);
+        --color-utility-blue-dark-300: var(--color-blue-dark-700);
+        --color-utility-blue-dark-400: var(--color-blue-dark-600);
+        --color-utility-blue-dark-500: var(--color-blue-dark-500);
+        --color-utility-blue-dark-600: var(--color-blue-dark-400);
+        --color-utility-blue-dark-700: var(--color-blue-dark-300);
+
+        --color-utility-indigo-50: var(--color-indigo-950);
+        --color-utility-indigo-100: var(--color-indigo-900);
+        --color-utility-indigo-200: var(--color-indigo-800);
+        --color-utility-indigo-300: var(--color-indigo-700);
+        --color-utility-indigo-400: var(--color-indigo-600);
+        --color-utility-indigo-500: var(--color-indigo-500);
+        --color-utility-indigo-600: var(--color-indigo-400);
+        --color-utility-indigo-700: var(--color-indigo-300);
+
+        --color-utility-fuchsia-50: var(--color-fuchsia-950);
+        --color-utility-fuchsia-100: var(--color-fuchsia-900);
+        --color-utility-fuchsia-200: var(--color-fuchsia-800);
+        --color-utility-fuchsia-300: var(--color-fuchsia-700);
+        --color-utility-fuchsia-400: var(--color-fuchsia-600);
+        --color-utility-fuchsia-500: var(--color-fuchsia-500);
+        --color-utility-fuchsia-600: var(--color-fuchsia-400);
+        --color-utility-fuchsia-700: var(--color-fuchsia-300);
+
+        --color-utility-pink-50: var(--color-pink-950);
+        --color-utility-pink-100: var(--color-pink-900);
+        --color-utility-pink-200: var(--color-pink-800);
+        --color-utility-pink-300: var(--color-pink-700);
+        --color-utility-pink-400: var(--color-pink-600);
+        --color-utility-pink-500: var(--color-pink-500);
+        --color-utility-pink-600: var(--color-pink-400);
+        --color-utility-pink-700: var(--color-pink-300);
+
+        --color-utility-purple-50: var(--color-purple-950);
+        --color-utility-purple-100: var(--color-purple-900);
+        --color-utility-purple-200: var(--color-purple-800);
+        --color-utility-purple-300: var(--color-purple-700);
+        --color-utility-purple-400: var(--color-purple-600);
+        --color-utility-purple-500: var(--color-purple-500);
+        --color-utility-purple-600: var(--color-purple-400);
+        --color-utility-purple-700: var(--color-purple-300);
+
+        --color-utility-orange-dark-50: var(--color-orange-dark-950);
+        --color-utility-orange-dark-100: var(--color-orange-dark-900);
+        --color-utility-orange-dark-200: var(--color-orange-dark-800);
+        --color-utility-orange-dark-300: var(--color-orange-dark-700);
+        --color-utility-orange-dark-400: var(--color-orange-dark-600);
+        --color-utility-orange-dark-500: var(--color-orange-dark-500);
+        --color-utility-orange-dark-600: var(--color-orange-dark-400);
+        --color-utility-orange-dark-700: var(--color-orange-dark-300);
+
+        --color-utility-blue-light-50: var(--color-blue-light-950);
+        --color-utility-blue-light-100: var(--color-blue-light-900);
+        --color-utility-blue-light-200: var(--color-blue-light-800);
+        --color-utility-blue-light-300: var(--color-blue-light-700);
+        --color-utility-blue-light-400: var(--color-blue-light-600);
+        --color-utility-blue-light-500: var(--color-blue-light-500);
+        --color-utility-blue-light-600: var(--color-blue-light-400);
+        --color-utility-blue-light-700: var(--color-blue-light-300);
+
+        --color-utility-gray-blue-50: var(--color-gray-blue-950);
+        --color-utility-gray-blue-100: var(--color-gray-blue-900);
+        --color-utility-gray-blue-200: var(--color-gray-blue-800);
+        --color-utility-gray-blue-300: var(--color-gray-blue-700);
+        --color-utility-gray-blue-400: var(--color-gray-blue-600);
+        --color-utility-gray-blue-500: var(--color-gray-blue-500);
+        --color-utility-gray-blue-600: var(--color-gray-blue-400);
+        --color-utility-gray-blue-700: var(--color-gray-blue-300);
+
+        --color-utility-green-50: var(--color-green-950);
+        --color-utility-green-100: var(--color-green-900);
+        --color-utility-green-200: var(--color-green-800);
+        --color-utility-green-300: var(--color-green-700);
+        --color-utility-green-400: var(--color-green-600);
+        --color-utility-green-500: var(--color-green-500);
+        --color-utility-green-600: var(--color-green-400);
+        --color-utility-green-700: var(--color-green-300);
+
+        --color-utility-yellow-50: var(--color-yellow-950);
+        --color-utility-yellow-100: var(--color-yellow-900);
+        --color-utility-yellow-200: var(--color-yellow-800);
+        --color-utility-yellow-300: var(--color-yellow-700);
+        --color-utility-yellow-400: var(--color-yellow-600);
+        --color-utility-yellow-500: var(--color-yellow-500);
+        --color-utility-yellow-600: var(--color-yellow-400);
+        --color-utility-yellow-700: var(--color-yellow-300);
+
+        /* TEXT COLORS */
+        --color-text-white: var(--color-white);
+        --color-text-primary: var(--color-gray-50);
+        --color-text-secondary: var(--color-gray-300);
+        --color-text-secondary_hover: var(--color-gray-200);
+        --color-text-tertiary: var(--color-gray-400);
+        --color-text-tertiary_hover: var(--color-gray-300);
+        --color-text-quaternary: var(--color-gray-400);
+        --color-text-error-primary: var(--color-error-400);
+        --color-text-warning-primary: var(--color-warning-400);
+        --color-text-success-primary: var(--color-success-400);
+        --color-text-disabled: var(--color-gray-500);
+        --color-text-brand-primary: var(--color-gray-50);
+        --color-text-brand-secondary: var(--color-gray-300);
+        --color-text-brand-tertiary: var(--color-gray-400);
+        --color-text-placeholder: var(--color-gray-500);
+        --color-text-placeholder_subtle: var(--color-gray-700);
+        --color-text-primary_on-brand: var(--color-gray-50);
+        --color-text-secondary_on-brand: var(--color-gray-300);
+        --color-text-tertiary_on-brand: var(--color-gray-400);
+        --color-text-quaternary_on-brand: var(--color-gray-400);
+        --color-text-brand-secondary_hover: var(--color-gray-200);
+        --color-text-brand-tertiary_alt: var(--color-gray-50);
+        --color-text-error-primary_hover: var(--color-error-300);
+
+        /* BORDER COLORS */
+        --color-border-primary: var(--color-gray-700);
+        --color-border-secondary: var(--color-gray-800);
+        --color-border-secondary_alt: var(--color-gray-800);
+        --color-border-tertiary: var(--color-gray-800);
+        --color-border-brand: var(--color-brand-400);
+        --color-border-brand_alt: var(--color-gray-700);
+        --color-border-error: var(--color-error-400);
+        --color-border-error_subtle: var(--color-error-500);
+        --color-border-disabled: var(--color-gray-700);
+        --color-border-disabled_subtle: var(--color-gray-800);
+
+        /* FOREGROUND COLORS */
+        --color-fg-white: var(--color-white);
+        --color-fg-primary: var(--color-white);
+        --color-fg-secondary: var(--color-gray-300);
+        --color-fg-tertiary: var(--color-gray-400);
+        --color-fg-tertiary_hover: var(--color-gray-300);
+        --color-fg-quaternary: var(--color-gray-600);
+        --color-fg-quaternary_hover: var(--color-gray-500);
+        --color-fg-error-primary: var(--color-error-500);
+        --color-fg-error-secondary: var(--color-error-400);
+        --color-fg-warning-primary: var(--color-warning-500);
+        --color-fg-warning-secondary: var(--color-warning-400);
+        --color-fg-success-primary: var(--color-success-500);
+        --color-fg-success-secondary: var(--color-success-400);
+        --color-fg-secondary_hover: var(--color-gray-200);
+        --color-fg-disabled: var(--color-gray-500);
+        --color-fg-disabled_subtle: var(--color-gray-600);
+        --color-fg-brand-primary: var(--color-brand-500);
+        --color-fg-brand-secondary: var(--color-brand-500);
+        --color-fg-brand-primary_alt: var(--color-gray-300);
+        --color-fg-brand-secondary_alt: var(--color-gray-600);
+        --color-fg-brand-secondary_hover: var(--color-gray-500);
+
+        /* BACKGROUND COLORS */
+        --color-bg-primary: var(--color-gray-950);
+        --color-bg-primary-solid: var(--color-bg-secondary);
+        --color-bg-primary_alt: var(--color-bg-secondary);
+        --color-bg-primary_hover: var(--color-gray-800);
+        --color-bg-secondary: var(--color-gray-900);
+        --color-bg-secondary-solid: var(--color-gray-600);
+        --color-bg-secondary_subtle: var(--color-gray-900);
+        --color-bg-secondary_hover: var(--color-gray-800);
+        --color-bg-tertiary: var(--color-gray-800);
+        --color-bg-quaternary: var(--color-gray-700);
+        --color-bg-error-primary: var(--color-error-950);
+        --color-bg-error-secondary: var(--color-error-600);
+        --color-bg-error-solid: var(--color-error-600);
+        --color-bg-error-solid_hover: var(--color-error-500);
+        --color-bg-warning-primary: var(--color-warning-950);
+        --color-bg-warning-secondary: var(--color-warning-600);
+        --color-bg-warning-solid: var(--color-warning-600);
+        --color-bg-success-primary: var(--color-success-950);
+        --color-bg-success-secondary: var(--color-success-600);
+        --color-bg-success-solid: var(--color-success-600);
+        --color-bg-active: var(--color-gray-800);
+        --color-bg-disabled: var(--color-gray-800);
+        --color-bg-disabled_subtle: var(--color-gray-900);
+        --color-bg-brand-primary: var(--color-brand-500);
+        --color-bg-brand-primary_alt: var(--color-bg-secondary);
+        --color-bg-brand-secondary: var(--color-brand-600);
+        --color-bg-secondary_alt: var(--color-bg-primary);
+        --color-bg-brand-solid: var(--color-brand-600);
+        --color-bg-brand-solid_hover: var(--color-brand-500);
+        --color-bg-overlay: var(--color-gray-800);
+        --color-bg-brand-section: var(--color-bg-secondary);
+        --color-bg-brand-section_subtle: var(--color-bg-primary);
+
+        /* COMPONENT COLORS */
+        --color-app-store-badge-border: var(--color-white);
+        --color-avatar-bg: var(--color-gray-800);
+        --color-avatar-contrast-border: rgb(255 255 255 / 0.12);
+        --color-avatar-profile-photo-border: var(--color-gray-950);
+        --color-avatar-styles-bg-neutral: rgb(224 224 224 / 1);
+        --color-button-destructive-primary-icon: var(--color-error-300);
+        --color-button-destructive-primary-icon_hover: var(--color-error-200);
+        --color-button-primary-icon: var(--color-brand-300);
+        --color-button-primary-icon_hover: var(--color-brand-200);
+        --color-featured-icon-light-fg-brand: var(--color-brand-200);
+        --color-featured-icon-light-fg-error: var(--color-error-200);
+        --color-featured-icon-light-fg-gray: var(--color-gray-200);
+        --color-featured-icon-light-fg-success: var(--color-success-200);
+        --color-featured-icon-light-fg-warning: var(--color-warning-200);
+        --color-focus-ring-error: var(--color-error-500);
+        --color-focus-ring: var(--color-brand-500);
+        --color-footer-button-fg: var(--color-gray-300);
+        --color-footer-button-fg_hover: var(--color-gray-100);
+        --color-icon-fg-brand: var(--color-gray-400);
+        --color-icon-fg-brand_on-brand: var(--color-gray-400);
+        --color-nav-item-button-icon-fg: var(--color-gray-400);
+        --color-nav-item-button-icon-fg_active: var(--color-gray-300);
+        --color-nav-item-icon-fg: var(--color-gray-400);
+        --color-nav-item-icon-fg_active: var(--color-gray-300);
+        --color-screen-mockup-border: var(--color-gray-700);
+        --color-slider-handle-bg: var(--color-fg-brand-primary);
+        --color-slider-handle-border: var(--color-bg-primary);
+        --color-toggle-border: var(--color-transparent);
+        --color-toggle-button-fg_disabled: var(--color-gray-600);
+        --color-toggle-slim-border_pressed-hover: var(--color-transparent);
+        --color-toggle-slim-border_pressed: var(--color-transparent);
+        --color-tooltip-supporting-text: var(--color-gray-300);
+        --color-text-editor-icon-fg: var(--color-gray-400);
+        --color-text-editor-icon-fg_active: var(--color-white);
+
+        /* BACKGROUND PROPERTY COLORS */
+        --background-color-primary: var(--color-bg-primary);
+        --background-color-primary-solid: var(--color-bg-primary-solid);
+        --background-color-primary_alt: var(--color-bg-primary_alt);
+        --background-color-primary_hover: var(--color-bg-primary_hover);
+        --background-color-secondary: var(--color-bg-secondary);
+        --background-color-secondary-solid: var(--color-bg-secondary-solid);
+        --background-color-secondary_alt: var(--color-bg-secondary_alt);
+        --background-color-secondary_hover: var(--color-bg-secondary_hover);
+        --background-color-secondary_subtle: var(--color-bg-secondary_subtle);
+        --background-color-tertiary: var(--color-bg-tertiary);
+        --background-color-quaternary: var(--color-bg-quaternary);
+        --background-color-active: var(--color-bg-active);
+        --background-color-disabled: var(--color-bg-disabled);
+        --background-color-disabled_subtle: var(--color-bg-disabled_subtle);
+        --background-color-overlay: var(--color-bg-overlay);
+        --background-color-brand-primary: var(--color-bg-brand-primary);
+        --background-color-brand-primary_alt: var(--color-bg-brand-primary_alt);
+        --background-color-brand-secondary: var(--color-bg-brand-secondary);
+        --background-color-brand-solid: var(--color-bg-brand-solid);
+        --background-color-brand-solid_hover: var(--color-bg-brand-solid_hover);
+        --background-color-brand-section: var(--color-bg-brand-section);
+        --background-color-brand-section_subtle: var(--color-bg-brand-section_subtle);
+        --background-color-error-primary: var(--color-bg-error-primary);
+        --background-color-error-secondary: var(--color-bg-error-secondary);
+        --background-color-error-solid: var(--color-bg-error-solid);
+        --background-color-error-solid_hover: var(--color-bg-error-solid_hover);
+        --background-color-warning-primary: var(--color-bg-warning-primary);
+        --background-color-warning-secondary: var(--color-bg-warning-secondary);
+        --background-color-warning-solid: var(--color-bg-warning-solid);
+        --background-color-success-primary: var(--color-bg-success-primary);
+        --background-color-success-secondary: var(--color-bg-success-secondary);
+        --background-color-success-solid: var(--color-bg-success-solid);
+        --background-color-border-brand: var(--color-border-brand);
+        --background-color-border-tertiary: var(--color-border-tertiary);
+        --background-color-border-brand_alt: var(--color-border-brand_alt);
+
+        /* TEXT PROPERTY COLORS */
+        --text-color-primary: var(--color-text-primary);
+        --text-color-primary_on-brand: var(--color-text-primary_on-brand);
+        --text-color-secondary: var(--color-text-secondary);
+        --text-color-secondary_hover: var(--color-text-secondary_hover);
+        --text-color-secondary_on-brand: var(--color-text-secondary_on-brand);
+        --text-color-tertiary: var(--color-text-tertiary);
+        --text-color-tertiary_hover: var(--color-text-tertiary_hover);
+        --text-color-tertiary_on-brand: var(--color-text-tertiary_on-brand);
+        --text-color-quaternary: var(--color-text-quaternary);
+        --text-color-quaternary_on-brand: var(--color-text-quaternary_on-brand);
+        --text-color-disabled: var(--color-text-disabled);
+        --text-color-placeholder: var(--color-text-placeholder);
+        --text-color-placeholder_subtle: var(--color-text-placeholder_subtle);
+        --text-color-brand-primary: var(--color-text-brand-primary);
+        --text-color-brand-secondary: var(--color-text-brand-secondary);
+        --text-color-brand-secondary_hover: var(--color-text-brand-secondary_hover);
+        --text-color-brand-tertiary: var(--color-text-brand-tertiary);
+        --text-color-brand-tertiary_alt: var(--color-text-brand-tertiary_alt);
+        --text-color-error-primary: var(--color-text-error-primary);
+        --text-color-error-primary_hover: var(--color-text-error-primary_hover);
+        --text-color-warning-primary: var(--color-text-warning-primary);
+        --text-color-success-primary: var(--color-text-success-primary);
+        --text-color-tooltip-supporting-text: var(--color-tooltip-supporting-text);
+
+        /* BORDER PROPERTY COLORS */
+        --border-color-primary: var(--color-border-primary);
+        --border-color-secondary: var(--color-border-secondary);
+        --border-color-secondary_alt: var(--color-border-secondary_alt);
+        --border-color-tertiary: var(--color-border-tertiary);
+        --border-color-disabled: var(--color-border-disabled);
+        --border-color-brand: var(--color-border-brand);
+        --border-color-brand-solid: var(--color-bg-brand-solid);
+        --border-color-brand-solid_hover: var(--color-bg-brand-solid_hover);
+        --border-color-error: var(--color-border-error);
+        --border-color-disabled_subtle: var(--color-border-disabled_subtle);
+        --border-color-brand_alt: var(--color-border-brand_alt);
+        --border-color-error_subtle: var(--color-border-error_subtle);
+
+        /* RING PROPERTY COLORS */
+        --ring-color-primary: var(--color-border-primary);
+        --ring-color-secondary: var(--color-border-secondary);
+        --ring-color-secondary_alt: var(--color-border-secondary_alt);
+        --ring-color-tertiary: var(--color-border-tertiary);
+        --ring-color-brand: var(--color-border-brand);
+        --ring-color-brand-solid: var(--color-bg-brand-solid);
+        --ring-color-brand-solid_hover: var(--color-bg-brand-solid_hover);
+        --ring-color-error: var(--color-border-error);
+        --ring-color-error_subtle: var(--color-border-error_subtle);
+        --ring-color-disabled: var(--color-border-disabled);
+        --ring-color-disabled_subtle: var(--color-border-disabled_subtle);
+        --ring-color-brand_alt: var(--color-border-brand_alt);
+        --ring-color-bg-brand-solid: var(--color-bg-brand-solid);
+
+        /* OUTLINE PROPERTY COLORS */
+        --outline-color-primary: var(--color-border-primary);
+        --outline-color-secondary: var(--color-border-secondary);
+        --outline-color-secondary_alt: var(--color-border-secondary_alt);
+        --outline-color-tertiary: var(--color-border-tertiary);
+        --outline-color-disabled: var(--color-border-disabled);
+        --outline-color-disabled_subtle: var(--color-border-disabled_subtle);
+        --outline-color-brand: var(--color-border-brand);
+        --outline-color-brand-solid: var(--color-bg-brand-solid);
+        --outline-color-brand-solid_hover: var(--color-bg-brand-solid_hover);
+        --outline-color-brand_alt: var(--color-border-brand_alt);
+        --outline-color-error: var(--color-border-error);
+        --outline-color-error_subtle: var(--color-border-error_subtle);
+    }
+}
diff --git a/src/styles/typography.css b/src/styles/typography.css
new file mode 100644
index 0000000..4db73b6
--- /dev/null
+++ b/src/styles/typography.css
@@ -0,0 +1,430 @@
+.prose:not(:where([class~="not-prose"], [class~="not-prose"] *)) {
+    --tw-prose-body: var(--color-text-tertiary);
+    --tw-prose-headings: var(--color-text-primary);
+    --tw-prose-lead: var(--color-text-tertiary);
+    --tw-prose-links: var(--color-text-tertiary);
+    --tw-prose-bold: var(--color-text-primary);
+    --tw-prose-counters: var(--color-text-tertiary);
+    --tw-prose-bullets: var(--color-text-tertiary);
+    --tw-prose-hr: var(--color-border-secondary);
+    --tw-prose-quotes: var(--color-text-primary);
+    --tw-prose-quote-borders: var(--color-fg-brand-primary_alt);
+    --tw-prose-captions: var(--color-text-tertiary);
+    --tw-prose-code: var(--color-text-tertiary);
+    --tw-prose-pre-code: var(--color-text-tertiary);
+    --tw-prose-pre-bg: var(--color-bg-primary);
+    --tw-prose-th-borders: var(--color-border-primary);
+    --tw-prose-td-borders: var(--color-border-secondary);
+
+    /* Base */
+    color: var(--tw-prose-body);
+    font-size: var(--text-md);
+    line-height: var(--text-md--line-height);
+}
+
+.prose :not(:where([class~="not-prose"], [class~="not-prose"] *)) {
+    /* Text */
+    &:where(p) {
+        margin-top: calc(var(--spacing) * 4);
+        margin-bottom: calc(var(--spacing) * 4);
+    }
+
+    &:where([class~="lead"]) {
+        font-size: var(--text-md);
+        line-height: var(--text-md--line-height);
+        margin-top: 1.2em;
+        margin-bottom: 1.2em;
+    }
+
+    /* Lists */
+    &:where(ol) {
+        list-style-type: decimal;
+
+        margin-top: calc(var(--spacing) * 4);
+        margin-bottom: calc(var(--spacing) * 4);
+        padding-inline-start: calc(var(--spacing) * 5.75);
+    }
+    &:where(ul) {
+        list-style-type: disc;
+
+        margin-top: calc(var(--spacing) * 4);
+        margin-bottom: calc(var(--spacing) * 4);
+        padding-inline-start: calc(var(--spacing) * 5.75);
+    }
+    &:where(li) {
+        margin-top: calc(var(--spacing) * 2);
+        margin-bottom: calc(var(--spacing) * 2);
+    }
+    &:where(ol > li) {
+        padding-inline-start: 1px;
+        margin-top: 0;
+        margin-bottom: 0;
+    }
+    &:where(ul > li) {
+        padding-inline-start: 1px;
+        margin-top: 0;
+        margin-bottom: 0;
+    }
+
+    /* Horizontal rules */
+    &:where(hr) {
+        margin-top: calc(var(--spacing) * 8);
+        margin-bottom: calc(var(--spacing) * 8);
+    }
+
+    /* Quotes */
+    &:where(blockquote) {
+        color: var(--tw-prose-quotes);
+
+        border-left-width: 2px;
+        border-left-color: var(--tw-prose-quote-borders);
+
+        padding-inline-start: 0;
+        margin-top: calc(var(--spacing) * 10);
+        margin-bottom: calc(var(--spacing) * 10);
+    }
+    &:where(blockquote p) {
+        margin: 0;
+        font-weight: 500;
+        font-style: italic;
+
+        font-size: var(--text-xl);
+        line-height: var(--text-xl--line-height);
+    }
+    &:where(blockquote p:first-of-type::before) {
+        content: open-quote;
+    }
+    &:where(blockquote p:last-of-type::after) {
+        content: close-quote;
+    }
+
+    /* Headings */
+    &:where(h1) {
+        color: var(--tw-prose-headings);
+        font-weight: 600;
+
+        font-size: var(--text-display-sm);
+        line-height: var(--text-display-sm--line-height);
+        margin-bottom: calc(var(--spacing) * 5);
+        margin-top: calc(var(--spacing) * 10);
+    }
+    &:where(h2) {
+        color: var(--tw-prose-headings);
+        font-weight: 600;
+
+        font-size: var(--text-display-xs);
+        line-height: var(--text-display-xs--line-height);
+        margin-bottom: calc(var(--spacing) * 4);
+        margin-top: calc(var(--spacing) * 8);
+    }
+    &:where(h3) {
+        color: var(--tw-prose-headings);
+        font-weight: 600;
+
+        font-size: var(--text-xl);
+        line-height: var(--text-xl--line-height);
+        margin-bottom: calc(var(--spacing) * 3);
+        margin-top: calc(var(--spacing) * 8);
+    }
+    &:where(h4) {
+        color: var(--tw-prose-headings);
+        font-weight: 600;
+
+        font-size: var(--text-lg);
+        line-height: var(--text-lg--line-height);
+        margin-bottom: calc(var(--spacing) * 2);
+        margin-top: calc(var(--spacing) * 5);
+    }
+
+    &:where(h2 + *) {
+        margin-top: 0;
+    }
+    &:where(h3 + *) {
+        margin-top: 0;
+    }
+    &:where(h4 + *) {
+        margin-top: 0;
+    }
+
+    &:where(h1 strong) {
+        font-weight: 900;
+        color: inherit;
+    }
+    &:where(h2 strong) {
+        font-weight: 800;
+        color: inherit;
+    }
+    &:where(h3 strong) {
+        font-weight: 700;
+        color: inherit;
+    }
+    &:where(h4 strong) {
+        font-weight: 700;
+        color: inherit;
+    }
+
+    /* Media */
+
+    &:where(img) {
+        border-radius: var(--radius-xl);
+        width: 100%;
+        object-fit: cover;
+
+        margin-top: calc(var(--spacing) * 8);
+        margin-bottom: calc(var(--spacing) * 8);
+    }
+    &:where(video) {
+        margin-top: calc(var(--spacing) * 8);
+        margin-bottom: calc(var(--spacing) * 8);
+    }
+    &:where(figure) {
+        margin-top: calc(var(--spacing) * 10);
+        margin-bottom: calc(var(--spacing) * 10);
+    }
+    &:where(figure > *) {
+        margin-top: 0;
+        margin-bottom: 0;
+    }
+    &:where(figure:has(> blockquote)) {
+        border-left-width: 2px;
+        border-left-color: var(--tw-prose-quote-borders);
+        padding-top: calc(var(--spacing) * 2);
+        padding-bottom: calc(var(--spacing) * 2);
+
+        padding-inline-start: calc(var(--spacing) * 4);
+    }
+    &:where(figure:has(> blockquote) blockquote) {
+        padding-inline-start: 0;
+        border: none;
+    }
+    &:where(img + figcaption) {
+        display: flex;
+        align-items: center;
+        gap: calc(var(--spacing) * 1.5);
+    }
+    &:where(figcaption) {
+        color: var(--tw-prose-captions);
+
+        font-size: var(--text-sm);
+        line-height: var(--text-sm--line-height);
+        margin-top: calc(var(--spacing) * 3);
+    }
+    &:where(cite) {
+        font-style: normal;
+    }
+
+    /* Inline elements */
+    &:where(a:not(h1 a, h2 a, h3 a, h4 a, h5 a, h6 a)) {
+        font-weight: 400;
+        text-decoration: underline;
+        text-underline-offset: 3px;
+    }
+
+    &:where(a:focus-visible) {
+        border-radius: var(--radius-sm);
+        outline: 2px solid var(--color-focus-ring);
+        outline-offset: 2px;
+    }
+    &:where(:is(h1, h2, h3) a) {
+        color: var(--tw-prose-headings);
+        font-weight: inherit;
+        text-decoration: none;
+    }
+
+    /* Inline code element */
+    &:where(code:not(pre code)) {
+        font-size: 0.875rem;
+        line-height: 1.25rem;
+        font-weight: 700;
+        border-radius: 6px;
+        padding: calc(var(--spacing) * 0.5) calc(var(--spacing) * 1.5);
+        margin: calc(var(--spacing) * -0.5) 0px;
+        background: var(--color-bg-secondary);
+        box-shadow: 0 0 0 1px var(--color-border-secondary);
+
+        &::before,
+        &::after {
+            content: "";
+        }
+    }
+}
+
+.prose.prose-centered-quote :not(:where([class~="not-prose"], [class~="not-prose"] *)) {
+    &:where(blockquote) {
+        padding-inline-start: 0px !important;
+        border-left: none;
+        text-align: center;
+    }
+    &:where(figure:has(> blockquote)) {
+        border-left: none;
+        padding-inline-start: 0px !important;
+        padding-top: 0px !important;
+        padding-bottom: 0px !important;
+        text-align: center;
+    }
+}
+
+.prose.prose-minimal-quote :not(:where([class~="not-prose"], [class~="not-prose"] *)) {
+    &:where(blockquote) {
+        border-left: none;
+        padding-inline-start: 0px !important;
+    }
+    &:where(figure:has(> blockquote)) {
+        border-left: none;
+        padding-inline-start: 0px !important;
+    }
+}
+
+.prose.md\:prose-lg:not(:where([class~="not-prose"], [class~="not-prose"] *)) {
+    @media (width >= 48rem /* 768px */) {
+        /* Base */
+        font-size: var(--text-lg);
+        line-height: var(--text-lg--line-height);
+    }
+}
+
+.prose.md\:prose-lg :not(:where([class~="not-prose"], [class~="not-prose"] *)) {
+    @media (width >= 48rem /* 768px */) {
+        /* Text */
+        &:where(p) {
+            margin-top: calc(var(--spacing) * 4.5);
+            margin-bottom: calc(var(--spacing) * 4.5);
+        }
+
+        &:where([class~="lead"]) {
+            font-size: var(--text-xl);
+            line-height: var(--text-xl--line-height);
+            margin-top: 1.09em;
+            margin-bottom: 1.09em;
+        }
+
+        /* Lists */
+        &:where(ol) {
+            margin-top: calc(var(--spacing) * 4.5);
+            margin-bottom: calc(var(--spacing) * 4.5);
+            padding-inline-start: calc(var(--spacing) * 6.5);
+        }
+        &:where(ul) {
+            margin-top: calc(var(--spacing) * 4.5);
+            margin-bottom: calc(var(--spacing) * 4.5);
+            padding-inline-start: calc(var(--spacing) * 6.5);
+        }
+
+        &:where(ol > li) {
+            padding-inline-start: 1px;
+            margin-top: 0;
+            margin-bottom: 0;
+        }
+        &:where(ul > li) {
+            padding-inline-start: 1px;
+            margin-top: 0;
+            margin-bottom: 0;
+        }
+
+        /* Horizontal rules */
+        &:where(hr) {
+            margin-top: calc(var(--spacing) * 8);
+            margin-bottom: calc(var(--spacing) * 8);
+        }
+
+        /* Quotes */
+        &:where(blockquote) {
+            padding-inline-start: 0;
+            margin-top: calc(var(--spacing) * 12);
+            margin-bottom: calc(var(--spacing) * 12);
+        }
+        &:where(blockquote p) {
+            margin: 0;
+
+            font-size: var(--text-display-xs);
+            line-height: var(--text-display-xs--line-height);
+        }
+
+        /* Headings */
+        &:where(h1) {
+            font-size: var(--text-display-md);
+            line-height: var(--text-display-md--line-height);
+            margin-bottom: calc(var(--spacing) * 6);
+            margin-top: calc(var(--spacing) * 12);
+        }
+        &:where(h2) {
+            font-size: var(--text-display-sm);
+            line-height: var(--text-display-sm--line-height);
+            margin-bottom: calc(var(--spacing) * 5);
+            margin-top: calc(var(--spacing) * 10);
+        }
+        &:where(h3) {
+            font-size: var(--text-display-xs);
+            line-height: var(--text-display-xs--line-height);
+            margin-bottom: calc(var(--spacing) * 4);
+            margin-top: calc(var(--spacing) * 8);
+        }
+        &:where(h4) {
+            font-size: var(--text-xl);
+            line-height: var(--text-xl--line-height);
+            margin-bottom: calc(var(--spacing) * 3);
+            margin-top: calc(var(--spacing) * 8);
+        }
+        &:where(h2 + *) {
+            margin-top: 0;
+        }
+        &:where(h3 + *) {
+            margin-top: 0;
+        }
+        &:where(h4 + *) {
+            margin-top: 0;
+        }
+
+        &:where(figure) {
+            margin-top: calc(var(--spacing) * 12);
+            margin-bottom: calc(var(--spacing) * 12);
+        }
+        &:where(figure > *) {
+            margin-top: 0;
+            margin-bottom: 0;
+        }
+        &:where(figure:has(> blockquote)) {
+            padding-inline-start: calc(var(--spacing) * 5);
+        }
+        &:where(figure > blockquote + figcaption) {
+            font-size: var(--text-md);
+            line-height: var(--text-md--line-height);
+        }
+
+        &:where(figcaption) {
+            margin-top: calc(var(--spacing) * 4);
+        }
+
+        /* Inline elements */
+        &:where(a:not(h1 a, h2 a, h3 a, h4 a, h5 a, h6 a)) {
+            font-weight: 400;
+            text-decoration: underline;
+            text-underline-offset: 3px;
+        }
+        &:where(:is(h1, h2, h3) a) {
+            color: var(--tw-prose-headings);
+            font-weight: inherit;
+            text-decoration: none;
+        }
+
+        /* Inline code element */
+        &:where(code:not(pre code)) {
+            font-size: 0.875rem;
+            line-height: 1.25rem;
+            font-weight: 700;
+            border-radius: 6px;
+            padding: calc(var(--spacing) * 0.5) calc(var(--spacing) * 1.5);
+            margin: calc(var(--spacing) * -0.5) 0px;
+            background: var(--color-bg-secondary);
+            box-shadow: 0 0 0 1px var(--color-border-secondary);
+        }
+    }
+}
+
+/* Remove top margin from first element */
+.prose > :first-child:not(:where([class~="not-prose"], [class~="not-prose"] *)) {
+    margin-top: 0;
+}
+.prose > :last-child:not(:where([class~="not-prose"], [class~="not-prose"] *)) {
+    margin-bottom: 0;
+}
diff --git a/src/types/vite-env.d.ts b/src/types/vite-env.d.ts
new file mode 100644
index 0000000..11f02fe
--- /dev/null
+++ b/src/types/vite-env.d.ts
@@ -0,0 +1 @@
+/// <reference types="vite/client" />
diff --git a/src/utils/cx.ts b/src/utils/cx.ts
new file mode 100644
index 0000000..9c039b5
--- /dev/null
+++ b/src/utils/cx.ts
@@ -0,0 +1,24 @@
+import { extendTailwindMerge } from "tailwind-merge";
+
+const twMerge = extendTailwindMerge({
+    extend: {
+        theme: {
+            text: ["display-xs", "display-sm", "display-md", "display-lg", "display-xl", "display-2xl"],
+        },
+    },
+});
+
+/**
+ * This function is a wrapper around the twMerge function.
+ * It is used to merge the classes inside style objects.
+ */
+export const cx = twMerge;
+
+/**
+ * This function does nothing besides helping us to be able to
+ * sort the classes inside style objects which is not supported
+ * by the Tailwind IntelliSense by default.
+ */
+export function sortCx<T extends Record<string, string | number | Record<string, string | number | Record<string, string | number>>>>(classes: T): T {
+    return classes;
+}
diff --git a/src/utils/is-react-component.ts b/src/utils/is-react-component.ts
new file mode 100644
index 0000000..db7b778
--- /dev/null
+++ b/src/utils/is-react-component.ts
@@ -0,0 +1,33 @@
+/* We cannot use type `unknown` instead of `any` here because it will break the type assertion `isReactComponent` function is providing. */
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import type React from "react";
+
+type ReactComponent = React.FC<any> | React.ComponentClass<any, any>;
+
+/**
+ * Checks if a given value is a function component.
+ */
+export const isFunctionComponent = (component: any): component is React.FC<any> => {
+    return typeof component === "function";
+};
+
+/**
+ * Checks if a given value is a class component.
+ */
+export const isClassComponent = (component: any): component is React.ComponentClass<any, any> => {
+    return typeof component === "function" && component.prototype && (!!component.prototype.isReactComponent || !!component.prototype.render);
+};
+
+/**
+ * Checks if a given value is a forward ref component.
+ */
+export const isForwardRefComponent = (component: any): component is React.ForwardRefExoticComponent<any> => {
+    return typeof component === "object" && component !== null && component.$$typeof.toString() === "Symbol(react.forward_ref)";
+};
+
+/**
+ * Checks if a given value is a valid React component.
+ */
+export const isReactComponent = (component: any): component is ReactComponent => {
+    return isFunctionComponent(component) || isForwardRefComponent(component) || isClassComponent(component);
+};
diff --git a/tsconfig.app.json b/tsconfig.app.json
new file mode 100644
index 0000000..a8c7c99
--- /dev/null
+++ b/tsconfig.app.json
@@ -0,0 +1,30 @@
+{
+  "compilerOptions": {
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
+    "target": "ES2020",
+    "useDefineForClassFields": true,
+    "lib": ["ES2020", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "isolatedModules": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+    "jsx": "preserve",
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true,
+    "noUncheckedSideEffectImports": true,
+    "baseUrl": ".",
+    "paths": {
+      "@/*": ["./src/*"]
+    }
+  },
+  "include": ["src"]
+}
diff --git a/tsconfig.json b/tsconfig.json
new file mode 100644
index 0000000..aa3c04f
--- /dev/null
+++ b/tsconfig.json
@@ -0,0 +1,13 @@
+{
+  "compilerOptions": {
+    "baseUrl": ".",
+    "paths": {
+      "@/*": ["./src/*"]
+    }
+  },
+  "files": [],
+  "references": [
+    { "path": "./tsconfig.app.json" },
+    { "path": "./tsconfig.node.json" }
+  ]
+}
diff --git a/tsconfig.node.json b/tsconfig.node.json
new file mode 100644
index 0000000..db0becc
--- /dev/null
+++ b/tsconfig.node.json
@@ -0,0 +1,24 @@
+{
+  "compilerOptions": {
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
+    "target": "ES2022",
+    "lib": ["ES2023"],
+    "module": "ESNext",
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "isolatedModules": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true,
+    "noUncheckedSideEffectImports": true
+  },
+  "include": ["vite.config.ts"]
+}
diff --git a/vite.config.ts b/vite.config.ts
new file mode 100644
index 0000000..28d6673
--- /dev/null
+++ b/vite.config.ts
@@ -0,0 +1,13 @@
+import tailwindcss from "@tailwindcss/vite";
+import react from "@vitejs/plugin-react-swc";
+import path from "path";
+import { defineConfig } from "vite";
+
+export default defineConfig({
+    plugins: [react(), tailwindcss()],
+    resolve: {
+        alias: {
+            "@": path.resolve(__dirname, "./src"),
+        },
+    },
+});
diff --git a/vite.svg b/vite.svg
new file mode 100644
index 0000000..e7b8dfb
--- /dev/null
+++ b/vite.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>
\ No newline at end of file