commit ed3eba27ec9fa92d09763d2b193a1e25baf12c6e
Author: Om Prakash Das <omkletu+github@gmail.com>
Date:   Thu Jul 2 18:39:11 2026 +0530

    first commit

diff --git a/.dockerignore b/.dockerignore
new file mode 100644
index 0000000..b1ffc8f
--- /dev/null
+++ b/.dockerignore
@@ -0,0 +1,8 @@
+node_modules
+dist
+.git
+.github
+.claude
+Dockerfile
+docker-compose.yml
+*.md
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/.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..5d70e8f
--- /dev/null
+++ b/CLAUDE.md
@@ -0,0 +1,815 @@
+## Project Overview
+
+This is an **Untitled UI React** component library project built with:
+
+- **React 19** with TypeScript
+- **Tailwind CSS v4.2** 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.2
+
+- Uses the latest Tailwind CSS v4.2 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
+
+### Disabled states
+
+All components use `opacity-50` for disabled states instead of individual disabled color tokens:
+
+```typescript
+// Correct (v8)
+"disabled:cursor-not-allowed disabled:opacity-50"
+
+// Incorrect (v7 pattern, do not use)
+"disabled:bg-disabled_subtle disabled:text-disabled disabled:ring-disabled"
+```
+
+## 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`: `"xs" | "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" | "lg"` - Input size (default: `"md"`)
+- `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" | "lg"` - Select size (default: `"md"`)
+- `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
+- `icon`: `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} icon={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" | "slate" | "sky" | "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 (note: `"xxs"` was removed in v8)
+- `src`: `string` - Image URL
+- `alt`: `string` - Alt text for accessibility
+- `initials`: `string` - Text initials when no image
+- `icon`: `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-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-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-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-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-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/Dockerfile b/Dockerfile
new file mode 100644
index 0000000..563f754
--- /dev/null
+++ b/Dockerfile
@@ -0,0 +1,18 @@
+FROM node:22-alpine AS build
+WORKDIR /app
+COPY package.json package-lock.json ./
+# npm ci fails here: lockfiles written on macOS omit the @emnapi/* deps of
+# optional wasm32-wasi packages (long-standing npm bug), so use install.
+RUN npm install --no-audit --no-fund
+COPY . .
+# Public URL baked into canonical/OG/JSON-LD tags; pass your domain at build
+# time (or set it in .env). An empty arg must not shadow the .env value, so
+# unset it when blank — process.env beats .env files in Vite.
+ARG VITE_SITE_URL=
+RUN if [ -z "$VITE_SITE_URL" ]; then unset VITE_SITE_URL; fi && npm run build
+
+FROM nginx:alpine
+COPY nginx.conf /etc/nginx/conf.d/default.conf
+COPY --from=build /app/dist /usr/share/nginx/html
+EXPOSE 80
+CMD ["nginx", "-g", "daemon off;"]
diff --git a/README.md b/README.md
new file mode 100644
index 0000000..ec78f19
--- /dev/null
+++ b/README.md
@@ -0,0 +1,65 @@
+# Markdown Studio
+
+A self-contained web app for working with markdown files: upload a `.md` file (or start blank), edit it with live syntax highlighting, see a rendered preview, and export the result as **PDF**, **standalone HTML**, or **Markdown**.
+
+Built with React + Vite + Tailwind CSS and [Untitled UI React](https://www.untitledui.com/react) components. No backend — everything runs in the browser, and your document auto-saves to localStorage.
+
+## Features
+
+- **Upload** — drag & drop or browse for `.md` / `.markdown` / `.txt` files (drop works anywhere in the app)
+- **Edit** — CodeMirror editor with markdown + fenced-code syntax highlighting
+- **Preview** — GitHub-flavored markdown (tables, task lists, strikethrough) with highlighted code blocks
+- **Layouts** — editor only, side-by-side split (draggable divider), or preview only
+- **Export** — Markdown download (`⌘S` / `Ctrl+S`), self-contained HTML file, or PDF via the browser's print dialog
+- **Extras** — light/dark theme, autosave to localStorage, unsaved-changes indicator
+
+## Development
+
+```sh
+npm install
+npm run dev        # http://localhost:5173
+npm run build      # typecheck + production build into dist/
+```
+
+## Docker
+
+```sh
+docker compose up --build
+# → http://localhost:8080
+```
+
+Or without compose:
+
+```sh
+docker build -t markdown-studio .
+docker run -p 8080:80 markdown-studio
+```
+
+The image is a multi-stage build: Node builds the static bundle, nginx serves it (SPA fallback + gzip + long-lived caching for hashed assets).
+
+## SEO
+
+The app ships with full on-page SEO: keyword-rich title/description, canonical URL, Open Graph + Twitter cards with a branded share image (`public/og-image.png`), JSON-LD `WebApplication` structured data, favicons + web manifest, `robots.txt`, and a `<noscript>` fallback for crawlers.
+
+Absolute URLs (canonical, `og:url`, `og:image`) are stamped at build time from `VITE_SITE_URL`. Set it to your public domain before building:
+
+```sh
+# .env file
+VITE_SITE_URL=https://markdown.yourdomain.com
+
+# or as a Docker build arg
+VITE_SITE_URL=https://markdown.yourdomain.com docker compose up --build
+```
+
+After deploying, verify the share card with https://www.opengraph.xyz and submit the site in Google Search Console. Ranking beyond on-page factors depends on your domain, backlinks, and content — consider a landing/blog section if you want to target more queries.
+
+## Project layout
+
+```
+src/
+├── components/      # Untitled UI components (installed via `npx untitledui add`)
+├── features/        # App UI: header, editor pane, preview pane, upload zone
+├── hooks/           # use-document (state + autosave), use-resolved-theme
+├── lib/             # markdown pipeline, export (md / html / pdf), sample doc
+└── pages/           # markdown-studio (main screen)
+```
diff --git a/docker-compose.yml b/docker-compose.yml
new file mode 100644
index 0000000..656d4f5
--- /dev/null
+++ b/docker-compose.yml
@@ -0,0 +1,11 @@
+services:
+  markdown-studio:
+    build:
+      context: .
+      args:
+        # Set to your public domain so canonical/OG/social tags use absolute URLs:
+        # VITE_SITE_URL: https://markdown.yourdomain.com
+        VITE_SITE_URL: ${VITE_SITE_URL:-}
+    ports:
+      - "8080:80"
+    restart: unless-stopped
diff --git a/index.html b/index.html
new file mode 100644
index 0000000..1229c9e
--- /dev/null
+++ b/index.html
@@ -0,0 +1,94 @@
+<!doctype html>
+<html lang="en">
+    <head>
+        <meta charset="UTF-8" />
+        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+
+        <!-- Primary SEO -->
+        <title>Markdown Studio — Free Online Markdown Editor with Live Preview & PDF Export</title>
+        <meta
+            name="description"
+            content="Free online markdown editor with live side-by-side preview. Upload .md files, edit with syntax highlighting, and export to PDF, HTML, or Markdown. No sign-up, no server — your files never leave your browser."
+        />
+        <meta name="robots" content="index, follow" />
+        <meta name="theme-color" content="#7f56d9" />
+        <link rel="canonical" href="%VITE_SITE_URL%/" />
+
+        <!-- Icons & manifest -->
+        <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
+        <link rel="apple-touch-icon" href="/apple-touch-icon.png" />
+        <link rel="manifest" href="/site.webmanifest" />
+
+        <!-- Open Graph -->
+        <meta property="og:type" content="website" />
+        <meta property="og:site_name" content="Markdown Studio" />
+        <meta property="og:title" content="Markdown Studio — Free Online Markdown Editor with Live Preview" />
+        <meta
+            property="og:description"
+            content="Edit markdown with a live preview and export to PDF, HTML, or Markdown. Free, private, no sign-up — everything runs in your browser."
+        />
+        <meta property="og:url" content="%VITE_SITE_URL%/" />
+        <meta property="og:image" content="%VITE_SITE_URL%/og-image.png" />
+        <meta property="og:image:width" content="1200" />
+        <meta property="og:image:height" content="630" />
+        <meta property="og:image:alt" content="Markdown Studio — edit markdown, preview live, export anywhere" />
+
+        <!-- Twitter -->
+        <meta name="twitter:card" content="summary_large_image" />
+        <meta name="twitter:title" content="Markdown Studio — Free Online Markdown Editor with Live Preview" />
+        <meta name="twitter:description" content="Edit markdown with a live preview and export to PDF, HTML, or Markdown. Free, private, no sign-up." />
+        <meta name="twitter:image" content="%VITE_SITE_URL%/og-image.png" />
+
+        <!-- Structured data -->
+        <script type="application/ld+json">
+            {
+                "@context": "https://schema.org",
+                "@type": "WebApplication",
+                "name": "Markdown Studio",
+                "url": "%VITE_SITE_URL%/",
+                "description": "Free online markdown editor with live side-by-side preview. Upload .md files, edit with syntax highlighting, and export to PDF, HTML, or Markdown.",
+                "applicationCategory": "UtilitiesApplication",
+                "operatingSystem": "Any",
+                "browserRequirements": "Requires JavaScript",
+                "offers": { "@type": "Offer", "price": "0", "priceCurrency": "USD" },
+                "featureList": [
+                    "Upload and edit .md files",
+                    "Live side-by-side markdown preview",
+                    "GitHub-flavored markdown: tables, task lists, code highlighting",
+                    "Export to PDF",
+                    "Export to standalone HTML",
+                    "Download edited Markdown",
+                    "Dark mode",
+                    "Local autosave — files never leave the browser"
+                ]
+            }
+        </script>
+    </head>
+
+    <body class="size-full bg-primary antialiased">
+        <div id="root"></div>
+
+        <noscript>
+            <main style="max-width: 640px; margin: 80px auto; font-family: sans-serif; padding: 0 24px">
+                <h1>Markdown Studio — Online Markdown Editor with Live Preview</h1>
+                <p>
+                    Markdown Studio is a free, browser-based markdown editor. Upload a .md file, edit it with syntax highlighting and a live rendered
+                    preview, then export your document as PDF, standalone HTML, or Markdown. Your files are processed entirely in your browser and
+                    never uploaded to a server.
+                </p>
+                <p>JavaScript is required to run the editor — please enable it and reload.</p>
+            </main>
+        </noscript>
+
+        <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
+            // Must match the ThemeProvider's "ui-theme" storage key.
+            if (localStorage.getItem("ui-theme") === "dark" || (!localStorage.getItem("ui-theme") && 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/nginx.conf b/nginx.conf
new file mode 100644
index 0000000..b100ebc
--- /dev/null
+++ b/nginx.conf
@@ -0,0 +1,21 @@
+server {
+    listen 80;
+    server_name _;
+    root /usr/share/nginx/html;
+    index index.html;
+
+    gzip on;
+    gzip_types text/css application/javascript application/json image/svg+xml font/woff2;
+    gzip_min_length 1024;
+
+    # Hashed build assets can be cached forever.
+    location /assets/ {
+        expires 1y;
+        add_header Cache-Control "public, immutable";
+    }
+
+    # SPA fallback.
+    location / {
+        try_files $uri $uri/ /index.html;
+    }
+}
diff --git a/package-lock.json b/package-lock.json
new file mode 100644
index 0000000..8958d07
--- /dev/null
+++ b/package-lock.json
@@ -0,0 +1,6024 @@
+{
+    "name": "untitledui-vite-starter-kit",
+    "version": "0.0.0",
+    "lockfileVersion": 3,
+    "requires": true,
+    "packages": {
+        "": {
+            "name": "untitledui-vite-starter-kit",
+            "version": "0.0.0",
+            "dependencies": {
+                "@codemirror/lang-markdown": "^6.5.0",
+                "@codemirror/language-data": "^6.5.2",
+                "@fontsource-variable/inter": "^5.2.8",
+                "@tailwindcss/typography": "^0.5.19",
+                "@tailwindcss/vite": "^4.2.2",
+                "@uiw/codemirror-theme-github": "^4.25.10",
+                "@uiw/react-codemirror": "^4.25.10",
+                "@untitledui/file-icons": "^0.0.9",
+                "@untitledui/icons": "^0.0.22",
+                "embla-carousel-react": "^8.6.0",
+                "highlight.js": "^11.11.1",
+                "input-otp": "^1.4.2",
+                "motion": "^12.42.2",
+                "qr-code-styling": "^1.9.2",
+                "react": "^19.2.4",
+                "react-aria": "^3.50.0",
+                "react-aria-components": "^1.19.0",
+                "react-dom": "^19.2.4",
+                "react-hotkeys-hook": "^5.2.4",
+                "react-markdown": "^10.1.0",
+                "react-router": "^7.13.0",
+                "recharts": "^3.8.0",
+                "rehype-highlight": "^7.0.2",
+                "rehype-stringify": "^10.0.1",
+                "remark-gfm": "^4.0.1",
+                "remark-parse": "^11.0.0",
+                "remark-rehype": "^11.1.2",
+                "tailwind-merge": "^3.6.0",
+                "tailwindcss": "^4.2.2",
+                "tailwindcss-animate": "^1.0.7",
+                "tailwindcss-react-aria-components": "^2.0.1",
+                "unified": "^11.0.5"
+            },
+            "devDependencies": {
+                "@trivago/prettier-plugin-sort-imports": "^6.0.2",
+                "@types/node": "^25.5.0",
+                "@types/react": "^19.2.14",
+                "@types/react-dom": "^19.2.3",
+                "@vitejs/plugin-react": "^6.0.1",
+                "globals": "^16.5.0",
+                "prettier": "^3.8.1",
+                "prettier-plugin-tailwindcss": "^0.7.2",
+                "typescript": "^5.9.3",
+                "typescript-eslint": "^8.53.1",
+                "vite": "^8.0.2"
+            }
+        },
+        "node_modules/@babel/code-frame": {
+            "version": "7.29.7",
+            "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.29.7.tgz",
+            "integrity": "sha512-Aup7aUOfpbAUg2ROOJN6Iw5f9DMBlzu0mIkm/malLQFN/YQgO48wCj0Kxa3sEHJvPVFg7siR+qRInwXd2qhQKw==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "@babel/helper-validator-identifier": "^7.29.7",
+                "js-tokens": "^4.0.0",
+                "picocolors": "^1.1.1"
+            },
+            "engines": {
+                "node": ">=6.9.0"
+            }
+        },
+        "node_modules/@babel/generator": {
+            "version": "7.29.7",
+            "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.29.7.tgz",
+            "integrity": "sha512-DkXD5OJQaAQIdZ1bt3UZdEnHAn9Imd3IVBdX03UFe+ony9Ojw5pzr9YVKGDY1jt+Gcn/FnGkNf8r+Vj5NOJWtQ==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "@babel/parser": "^7.29.7",
+                "@babel/types": "^7.29.7",
+                "@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.29.7",
+            "resolved": "https://registry.npmjs.org/@babel/helper-globals/-/helper-globals-7.29.7.tgz",
+            "integrity": "sha512-3nQVUAtvkKH9zahfWgw96Jc/uFOmjACE1kQz82E2lqWmHBgjzbNlsC22nuQTfahmWeQtTq5nQ/4Nnd2A1wj4zA==",
+            "dev": true,
+            "license": "MIT",
+            "engines": {
+                "node": ">=6.9.0"
+            }
+        },
+        "node_modules/@babel/helper-string-parser": {
+            "version": "7.29.7",
+            "resolved": "https://registry.npmjs.org/@babel/helper-string-parser/-/helper-string-parser-7.29.7.tgz",
+            "integrity": "sha512-Pb5ijPrZ89GDH8223L4UP8i6QApWxs04RbPQJTeWDV0/keR2E36MeKnyr6LYmUUvqRRI+Iv87SuF1W6ErINzYw==",
+            "dev": true,
+            "license": "MIT",
+            "engines": {
+                "node": ">=6.9.0"
+            }
+        },
+        "node_modules/@babel/helper-validator-identifier": {
+            "version": "7.29.7",
+            "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.29.7.tgz",
+            "integrity": "sha512-qehxGkRj55h/ff8EMaJ+cYhyaKlHIxqYDn682wQD7RNp9UujOQsHog2uS0r2vzr4pW+sXf90NeeayjcNaX3fFg==",
+            "dev": true,
+            "license": "MIT",
+            "engines": {
+                "node": ">=6.9.0"
+            }
+        },
+        "node_modules/@babel/parser": {
+            "version": "7.29.7",
+            "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.29.7.tgz",
+            "integrity": "sha512-hnORnjP/1P/zFEndoeX+n+t1RwWRJiJpM/jO7FW32Kn9r5+sJB2JWOdYo4L6k78j15eCwY3Gm/7364B1EMwtNg==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "@babel/types": "^7.29.7"
+            },
+            "bin": {
+                "parser": "bin/babel-parser.js"
+            },
+            "engines": {
+                "node": ">=6.0.0"
+            }
+        },
+        "node_modules/@babel/runtime": {
+            "version": "7.29.7",
+            "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.29.7.tgz",
+            "integrity": "sha512-Nq8OhGWiZIZGV6hLHoyAKLLcJihP/xFeBMGJoUrxTX2psI8dCifzLhZISFb+VWS3wFMRDmCGw5R+dOySCqPLhw==",
+            "license": "MIT",
+            "engines": {
+                "node": ">=6.9.0"
+            }
+        },
+        "node_modules/@babel/template": {
+            "version": "7.29.7",
+            "resolved": "https://registry.npmjs.org/@babel/template/-/template-7.29.7.tgz",
+            "integrity": "sha512-puq+Gf35oI24FeN11LkoUQFqv9uwNeWpxXZi/Ji3rRIoKAzKnxRaZ+Gkj0vKS9ZCiTESfng1N9LyOyXvo+m+Gg==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "@babel/code-frame": "^7.29.7",
+                "@babel/parser": "^7.29.7",
+                "@babel/types": "^7.29.7"
+            },
+            "engines": {
+                "node": ">=6.9.0"
+            }
+        },
+        "node_modules/@babel/traverse": {
+            "version": "7.29.7",
+            "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.29.7.tgz",
+            "integrity": "sha512-EhlfNQtZ+NK22w5BM61ciuiq1m58ed33Wr1Xan//ZRTy6hgjnwyCffRYwzsGXdASJSUJ1guZILsErh1eQcl+zw==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "@babel/code-frame": "^7.29.7",
+                "@babel/generator": "^7.29.7",
+                "@babel/helper-globals": "^7.29.7",
+                "@babel/parser": "^7.29.7",
+                "@babel/template": "^7.29.7",
+                "@babel/types": "^7.29.7",
+                "debug": "^4.3.1"
+            },
+            "engines": {
+                "node": ">=6.9.0"
+            }
+        },
+        "node_modules/@babel/types": {
+            "version": "7.29.7",
+            "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.29.7.tgz",
+            "integrity": "sha512-4zBIxpPzowiZpusoFkyGVwakdRJUyuH5PxQ/PrqghfdFWWasvnCdPfQXHrenDai+gyLARulZjZowCOj6fjT4pA==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "@babel/helper-string-parser": "^7.29.7",
+                "@babel/helper-validator-identifier": "^7.29.7"
+            },
+            "engines": {
+                "node": ">=6.9.0"
+            }
+        },
+        "node_modules/@codemirror/autocomplete": {
+            "version": "6.20.3",
+            "resolved": "https://registry.npmjs.org/@codemirror/autocomplete/-/autocomplete-6.20.3.tgz",
+            "integrity": "sha512-tlosUqb+3BbxCxZdu4tKeRghPFC+QM7q4X5YhKV2eCmPG+1r2F3f4AaSz5sCrFqUtX4Jh20VFTKecl16MgiV9g==",
+            "license": "MIT",
+            "dependencies": {
+                "@codemirror/language": "^6.0.0",
+                "@codemirror/state": "^6.0.0",
+                "@codemirror/view": "^6.17.0",
+                "@lezer/common": "^1.0.0"
+            }
+        },
+        "node_modules/@codemirror/commands": {
+            "version": "6.10.4",
+            "resolved": "https://registry.npmjs.org/@codemirror/commands/-/commands-6.10.4.tgz",
+            "integrity": "sha512-Ryk9y9T0FFVF0cUGhAknveAyUOl/A1qReTFi+qPKtOh2Z9F4AUBz3XOrYD4ZEgZirdugVzHvd/2/Wcwy5OliTg==",
+            "license": "MIT",
+            "dependencies": {
+                "@codemirror/language": "^6.0.0",
+                "@codemirror/state": "^6.7.0",
+                "@codemirror/view": "^6.27.0",
+                "@lezer/common": "^1.1.0"
+            }
+        },
+        "node_modules/@codemirror/lang-angular": {
+            "version": "0.1.4",
+            "resolved": "https://registry.npmjs.org/@codemirror/lang-angular/-/lang-angular-0.1.4.tgz",
+            "integrity": "sha512-oap+gsltb/fzdlTQWD6BFF4bSLKcDnlxDsLdePiJpCVNKWXSTAbiiQeYI3UmES+BLAdkmIC1WjyztC1pi/bX4g==",
+            "license": "MIT",
+            "dependencies": {
+                "@codemirror/lang-html": "^6.0.0",
+                "@codemirror/lang-javascript": "^6.1.2",
+                "@codemirror/language": "^6.0.0",
+                "@lezer/common": "^1.2.0",
+                "@lezer/highlight": "^1.0.0",
+                "@lezer/lr": "^1.3.3"
+            }
+        },
+        "node_modules/@codemirror/lang-cpp": {
+            "version": "6.0.3",
+            "resolved": "https://registry.npmjs.org/@codemirror/lang-cpp/-/lang-cpp-6.0.3.tgz",
+            "integrity": "sha512-URM26M3vunFFn9/sm6rzqrBzDgfWuDixp85uTY49wKudToc2jTHUrKIGGKs+QWND+YLofNNZpxcNGRynFJfvgA==",
+            "license": "MIT",
+            "dependencies": {
+                "@codemirror/language": "^6.0.0",
+                "@lezer/cpp": "^1.0.0"
+            }
+        },
+        "node_modules/@codemirror/lang-css": {
+            "version": "6.3.1",
+            "resolved": "https://registry.npmjs.org/@codemirror/lang-css/-/lang-css-6.3.1.tgz",
+            "integrity": "sha512-kr5fwBGiGtmz6l0LSJIbno9QrifNMUusivHbnA1H6Dmqy4HZFte3UAICix1VuKo0lMPKQr2rqB+0BkKi/S3Ejg==",
+            "license": "MIT",
+            "dependencies": {
+                "@codemirror/autocomplete": "^6.0.0",
+                "@codemirror/language": "^6.0.0",
+                "@codemirror/state": "^6.0.0",
+                "@lezer/common": "^1.0.2",
+                "@lezer/css": "^1.1.7"
+            }
+        },
+        "node_modules/@codemirror/lang-go": {
+            "version": "6.0.1",
+            "resolved": "https://registry.npmjs.org/@codemirror/lang-go/-/lang-go-6.0.1.tgz",
+            "integrity": "sha512-7fNvbyNylvqCphW9HD6WFnRpcDjr+KXX/FgqXy5H5ZS0eC5edDljukm/yNgYkwTsgp2busdod50AOTIy6Jikfg==",
+            "license": "MIT",
+            "dependencies": {
+                "@codemirror/autocomplete": "^6.0.0",
+                "@codemirror/language": "^6.6.0",
+                "@codemirror/state": "^6.0.0",
+                "@lezer/common": "^1.0.0",
+                "@lezer/go": "^1.0.0"
+            }
+        },
+        "node_modules/@codemirror/lang-html": {
+            "version": "6.4.11",
+            "resolved": "https://registry.npmjs.org/@codemirror/lang-html/-/lang-html-6.4.11.tgz",
+            "integrity": "sha512-9NsXp7Nwp891pQchI7gPdTwBuSuT3K65NGTHWHNJ55HjYcHLllr0rbIZNdOzas9ztc1EUVBlHou85FFZS4BNnw==",
+            "license": "MIT",
+            "dependencies": {
+                "@codemirror/autocomplete": "^6.0.0",
+                "@codemirror/lang-css": "^6.0.0",
+                "@codemirror/lang-javascript": "^6.0.0",
+                "@codemirror/language": "^6.4.0",
+                "@codemirror/state": "^6.0.0",
+                "@codemirror/view": "^6.17.0",
+                "@lezer/common": "^1.0.0",
+                "@lezer/css": "^1.1.0",
+                "@lezer/html": "^1.3.12"
+            }
+        },
+        "node_modules/@codemirror/lang-java": {
+            "version": "6.0.2",
+            "resolved": "https://registry.npmjs.org/@codemirror/lang-java/-/lang-java-6.0.2.tgz",
+            "integrity": "sha512-m5Nt1mQ/cznJY7tMfQTJchmrjdjQ71IDs+55d1GAa8DGaB8JXWsVCkVT284C3RTASaY43YknrK2X3hPO/J3MOQ==",
+            "license": "MIT",
+            "dependencies": {
+                "@codemirror/language": "^6.0.0",
+                "@lezer/java": "^1.0.0"
+            }
+        },
+        "node_modules/@codemirror/lang-javascript": {
+            "version": "6.2.5",
+            "resolved": "https://registry.npmjs.org/@codemirror/lang-javascript/-/lang-javascript-6.2.5.tgz",
+            "integrity": "sha512-zD4e5mS+50htS7F+TYjBPsiIFGanfVqg4HyUz6WNFikgOPf2BgKlx+TQedI1w6n/IqRBVBbBWmGFdLB/7uxO4A==",
+            "license": "MIT",
+            "dependencies": {
+                "@codemirror/autocomplete": "^6.0.0",
+                "@codemirror/language": "^6.6.0",
+                "@codemirror/lint": "^6.0.0",
+                "@codemirror/state": "^6.0.0",
+                "@codemirror/view": "^6.17.0",
+                "@lezer/common": "^1.0.0",
+                "@lezer/javascript": "^1.0.0"
+            }
+        },
+        "node_modules/@codemirror/lang-jinja": {
+            "version": "6.0.1",
+            "resolved": "https://registry.npmjs.org/@codemirror/lang-jinja/-/lang-jinja-6.0.1.tgz",
+            "integrity": "sha512-P5kyHLObzjtbGj16h+hyvZTxJhSjBEeSx4wMjbnAf3b0uwTy2+F0zGjMZL4PQOm/mh2eGZ5xUDVZXgwP783Nsw==",
+            "license": "MIT",
+            "dependencies": {
+                "@codemirror/autocomplete": "^6.0.0",
+                "@codemirror/lang-html": "^6.0.0",
+                "@codemirror/language": "^6.0.0",
+                "@codemirror/state": "^6.0.0",
+                "@codemirror/view": "^6.0.0",
+                "@lezer/common": "^1.2.0",
+                "@lezer/highlight": "^1.2.0",
+                "@lezer/lr": "^1.4.0"
+            }
+        },
+        "node_modules/@codemirror/lang-json": {
+            "version": "6.0.2",
+            "resolved": "https://registry.npmjs.org/@codemirror/lang-json/-/lang-json-6.0.2.tgz",
+            "integrity": "sha512-x2OtO+AvwEHrEwR0FyyPtfDUiloG3rnVTSZV1W8UteaLL8/MajQd8DpvUb2YVzC+/T18aSDv0H9mu+xw0EStoQ==",
+            "license": "MIT",
+            "dependencies": {
+                "@codemirror/language": "^6.0.0",
+                "@lezer/json": "^1.0.0"
+            }
+        },
+        "node_modules/@codemirror/lang-less": {
+            "version": "6.0.2",
+            "resolved": "https://registry.npmjs.org/@codemirror/lang-less/-/lang-less-6.0.2.tgz",
+            "integrity": "sha512-EYdQTG22V+KUUk8Qq582g7FMnCZeEHsyuOJisHRft/mQ+ZSZ2w51NupvDUHiqtsOy7It5cHLPGfHQLpMh9bqpQ==",
+            "license": "MIT",
+            "dependencies": {
+                "@codemirror/lang-css": "^6.2.0",
+                "@codemirror/language": "^6.0.0",
+                "@lezer/common": "^1.2.0",
+                "@lezer/highlight": "^1.0.0",
+                "@lezer/lr": "^1.0.0"
+            }
+        },
+        "node_modules/@codemirror/lang-liquid": {
+            "version": "6.3.2",
+            "resolved": "https://registry.npmjs.org/@codemirror/lang-liquid/-/lang-liquid-6.3.2.tgz",
+            "integrity": "sha512-6PDVU3ZnfeYyz1at1E/ttorErZvZFXXt1OPhtfe1EZJ2V2iDFa0CwPqPgG5F7NXN0yONGoBogKmFAafKTqlwIw==",
+            "license": "MIT",
+            "dependencies": {
+                "@codemirror/autocomplete": "^6.0.0",
+                "@codemirror/lang-html": "^6.0.0",
+                "@codemirror/language": "^6.0.0",
+                "@codemirror/state": "^6.0.0",
+                "@codemirror/view": "^6.0.0",
+                "@lezer/common": "^1.0.0",
+                "@lezer/highlight": "^1.0.0",
+                "@lezer/lr": "^1.3.1"
+            }
+        },
+        "node_modules/@codemirror/lang-markdown": {
+            "version": "6.5.0",
+            "resolved": "https://registry.npmjs.org/@codemirror/lang-markdown/-/lang-markdown-6.5.0.tgz",
+            "integrity": "sha512-0K40bZ35jpHya6FriukbgaleaqzBLZfOh7HuzqbMxBXkbYMJDxfF39c23xOgxFezR+3G+tR2/Mup+Xk865OMvw==",
+            "license": "MIT",
+            "dependencies": {
+                "@codemirror/autocomplete": "^6.7.1",
+                "@codemirror/lang-html": "^6.0.0",
+                "@codemirror/language": "^6.3.0",
+                "@codemirror/state": "^6.0.0",
+                "@codemirror/view": "^6.0.0",
+                "@lezer/common": "^1.2.1",
+                "@lezer/markdown": "^1.0.0"
+            }
+        },
+        "node_modules/@codemirror/lang-php": {
+            "version": "6.0.2",
+            "resolved": "https://registry.npmjs.org/@codemirror/lang-php/-/lang-php-6.0.2.tgz",
+            "integrity": "sha512-ZKy2v1n8Fc8oEXj0Th0PUMXzQJ0AIR6TaZU+PbDHExFwdu+guzOA4jmCHS1Nz4vbFezwD7LyBdDnddSJeScMCA==",
+            "license": "MIT",
+            "dependencies": {
+                "@codemirror/lang-html": "^6.0.0",
+                "@codemirror/language": "^6.0.0",
+                "@codemirror/state": "^6.0.0",
+                "@lezer/common": "^1.0.0",
+                "@lezer/php": "^1.0.0"
+            }
+        },
+        "node_modules/@codemirror/lang-python": {
+            "version": "6.2.1",
+            "resolved": "https://registry.npmjs.org/@codemirror/lang-python/-/lang-python-6.2.1.tgz",
+            "integrity": "sha512-IRjC8RUBhn9mGR9ywecNhB51yePWCGgvHfY1lWN/Mrp3cKuHr0isDKia+9HnvhiWNnMpbGhWrkhuWOc09exRyw==",
+            "license": "MIT",
+            "dependencies": {
+                "@codemirror/autocomplete": "^6.3.2",
+                "@codemirror/language": "^6.8.0",
+                "@codemirror/state": "^6.0.0",
+                "@lezer/common": "^1.2.1",
+                "@lezer/python": "^1.1.4"
+            }
+        },
+        "node_modules/@codemirror/lang-rust": {
+            "version": "6.0.2",
+            "resolved": "https://registry.npmjs.org/@codemirror/lang-rust/-/lang-rust-6.0.2.tgz",
+            "integrity": "sha512-EZaGjCUegtiU7kSMvOfEZpaCReowEf3yNidYu7+vfuGTm9ow4mthAparY5hisJqOHmJowVH3Upu+eJlUji6qqA==",
+            "license": "MIT",
+            "dependencies": {
+                "@codemirror/language": "^6.0.0",
+                "@lezer/rust": "^1.0.0"
+            }
+        },
+        "node_modules/@codemirror/lang-sass": {
+            "version": "6.0.2",
+            "resolved": "https://registry.npmjs.org/@codemirror/lang-sass/-/lang-sass-6.0.2.tgz",
+            "integrity": "sha512-l/bdzIABvnTo1nzdY6U+kPAC51czYQcOErfzQ9zSm9D8GmNPD0WTW8st/CJwBTPLO8jlrbyvlSEcN20dc4iL0Q==",
+            "license": "MIT",
+            "dependencies": {
+                "@codemirror/lang-css": "^6.2.0",
+                "@codemirror/language": "^6.0.0",
+                "@codemirror/state": "^6.0.0",
+                "@lezer/common": "^1.0.2",
+                "@lezer/sass": "^1.0.0"
+            }
+        },
+        "node_modules/@codemirror/lang-sql": {
+            "version": "6.10.0",
+            "resolved": "https://registry.npmjs.org/@codemirror/lang-sql/-/lang-sql-6.10.0.tgz",
+            "integrity": "sha512-6ayPkEd/yRw0XKBx5uAiToSgGECo/GY2NoJIHXIIQh1EVwLuKoU8BP/qK0qH5NLXAbtJRLuT73hx7P9X34iO4w==",
+            "license": "MIT",
+            "dependencies": {
+                "@codemirror/autocomplete": "^6.0.0",
+                "@codemirror/language": "^6.0.0",
+                "@codemirror/state": "^6.0.0",
+                "@lezer/common": "^1.2.0",
+                "@lezer/highlight": "^1.0.0",
+                "@lezer/lr": "^1.0.0"
+            }
+        },
+        "node_modules/@codemirror/lang-vue": {
+            "version": "0.1.3",
+            "resolved": "https://registry.npmjs.org/@codemirror/lang-vue/-/lang-vue-0.1.3.tgz",
+            "integrity": "sha512-QSKdtYTDRhEHCfo5zOShzxCmqKJvgGrZwDQSdbvCRJ5pRLWBS7pD/8e/tH44aVQT6FKm0t6RVNoSUWHOI5vNug==",
+            "license": "MIT",
+            "dependencies": {
+                "@codemirror/lang-html": "^6.0.0",
+                "@codemirror/lang-javascript": "^6.1.2",
+                "@codemirror/language": "^6.0.0",
+                "@lezer/common": "^1.2.0",
+                "@lezer/highlight": "^1.0.0",
+                "@lezer/lr": "^1.3.1"
+            }
+        },
+        "node_modules/@codemirror/lang-wast": {
+            "version": "6.0.2",
+            "resolved": "https://registry.npmjs.org/@codemirror/lang-wast/-/lang-wast-6.0.2.tgz",
+            "integrity": "sha512-Imi2KTpVGm7TKuUkqyJ5NRmeFWF7aMpNiwHnLQe0x9kmrxElndyH0K6H/gXtWwY6UshMRAhpENsgfpSwsgmC6Q==",
+            "license": "MIT",
+            "dependencies": {
+                "@codemirror/language": "^6.0.0",
+                "@lezer/common": "^1.2.0",
+                "@lezer/highlight": "^1.0.0",
+                "@lezer/lr": "^1.0.0"
+            }
+        },
+        "node_modules/@codemirror/lang-xml": {
+            "version": "6.1.0",
+            "resolved": "https://registry.npmjs.org/@codemirror/lang-xml/-/lang-xml-6.1.0.tgz",
+            "integrity": "sha512-3z0blhicHLfwi2UgkZYRPioSgVTo9PV5GP5ducFH6FaHy0IAJRg+ixj5gTR1gnT/glAIC8xv4w2VL1LoZfs+Jg==",
+            "license": "MIT",
+            "dependencies": {
+                "@codemirror/autocomplete": "^6.0.0",
+                "@codemirror/language": "^6.4.0",
+                "@codemirror/state": "^6.0.0",
+                "@codemirror/view": "^6.0.0",
+                "@lezer/common": "^1.0.0",
+                "@lezer/xml": "^1.0.0"
+            }
+        },
+        "node_modules/@codemirror/lang-yaml": {
+            "version": "6.1.3",
+            "resolved": "https://registry.npmjs.org/@codemirror/lang-yaml/-/lang-yaml-6.1.3.tgz",
+            "integrity": "sha512-AZ8DJBuXGVHybpBQhmZtgew5//4hv3tdkXnr3vDmOUMJRuB6vn/uuwtmTOTlqEaQFg3hQSVeA90NmvIQyUV6FQ==",
+            "license": "MIT",
+            "dependencies": {
+                "@codemirror/autocomplete": "^6.0.0",
+                "@codemirror/language": "^6.0.0",
+                "@codemirror/state": "^6.0.0",
+                "@lezer/common": "^1.2.0",
+                "@lezer/highlight": "^1.2.0",
+                "@lezer/lr": "^1.0.0",
+                "@lezer/yaml": "^1.0.0"
+            }
+        },
+        "node_modules/@codemirror/language": {
+            "version": "6.12.4",
+            "resolved": "https://registry.npmjs.org/@codemirror/language/-/language-6.12.4.tgz",
+            "integrity": "sha512-1q4PaT+o6PbgpkJt4Q8Fv5XJxTy4FUZ4MWETtyiDw3J0Pyr9E2vqcKL+k9wcvjNTIsauxvE7OfmWj3FRPHQ76A==",
+            "license": "MIT",
+            "dependencies": {
+                "@codemirror/state": "^6.0.0",
+                "@codemirror/view": "^6.23.0",
+                "@lezer/common": "^1.5.0",
+                "@lezer/highlight": "^1.0.0",
+                "@lezer/lr": "^1.0.0",
+                "style-mod": "^4.0.0"
+            }
+        },
+        "node_modules/@codemirror/language-data": {
+            "version": "6.5.2",
+            "resolved": "https://registry.npmjs.org/@codemirror/language-data/-/language-data-6.5.2.tgz",
+            "integrity": "sha512-CPkWBKrNS8stYbEU5kwBwTf3JB1kghlbh4FSAwzGW2TEscdeHHH4FGysREW86Mqnj3Qn09s0/6Ea/TutmoTobg==",
+            "license": "MIT",
+            "dependencies": {
+                "@codemirror/lang-angular": "^0.1.0",
+                "@codemirror/lang-cpp": "^6.0.0",
+                "@codemirror/lang-css": "^6.0.0",
+                "@codemirror/lang-go": "^6.0.0",
+                "@codemirror/lang-html": "^6.0.0",
+                "@codemirror/lang-java": "^6.0.0",
+                "@codemirror/lang-javascript": "^6.0.0",
+                "@codemirror/lang-jinja": "^6.0.0",
+                "@codemirror/lang-json": "^6.0.0",
+                "@codemirror/lang-less": "^6.0.0",
+                "@codemirror/lang-liquid": "^6.0.0",
+                "@codemirror/lang-markdown": "^6.0.0",
+                "@codemirror/lang-php": "^6.0.0",
+                "@codemirror/lang-python": "^6.0.0",
+                "@codemirror/lang-rust": "^6.0.0",
+                "@codemirror/lang-sass": "^6.0.0",
+                "@codemirror/lang-sql": "^6.0.0",
+                "@codemirror/lang-vue": "^0.1.1",
+                "@codemirror/lang-wast": "^6.0.0",
+                "@codemirror/lang-xml": "^6.0.0",
+                "@codemirror/lang-yaml": "^6.0.0",
+                "@codemirror/language": "^6.0.0",
+                "@codemirror/legacy-modes": "^6.4.0"
+            }
+        },
+        "node_modules/@codemirror/legacy-modes": {
+            "version": "6.5.3",
+            "resolved": "https://registry.npmjs.org/@codemirror/legacy-modes/-/legacy-modes-6.5.3.tgz",
+            "integrity": "sha512-xCsmIzH78MyWkib9jlPaaun57XNkfbMIhagfaZVd0iLTqlpw3jXaIcbZm72MTmmn64eTZpBVNjbyYh+QXnxRsg==",
+            "license": "MIT",
+            "dependencies": {
+                "@codemirror/language": "^6.0.0"
+            }
+        },
+        "node_modules/@codemirror/lint": {
+            "version": "6.9.7",
+            "resolved": "https://registry.npmjs.org/@codemirror/lint/-/lint-6.9.7.tgz",
+            "integrity": "sha512-28/+iWLYxKxsvGYhSYL7zaCZqLz5+FFFDq9tVsvGv9kv8RY4fFAchJ5WX9M3YrrRlTIsECjsXPqeNgnSmNP2dg==",
+            "license": "MIT",
+            "dependencies": {
+                "@codemirror/state": "^6.0.0",
+                "@codemirror/view": "^6.42.0",
+                "crelt": "^1.0.5"
+            }
+        },
+        "node_modules/@codemirror/search": {
+            "version": "6.7.1",
+            "resolved": "https://registry.npmjs.org/@codemirror/search/-/search-6.7.1.tgz",
+            "integrity": "sha512-uMe5UO6PamJtSHrXhhHOzSX3ReWtiJrva6GnPMwSOrZtiExb5X5eExhr2OUZQVvdxPsKpY3Ro2mFbQadpPWmHA==",
+            "license": "MIT",
+            "dependencies": {
+                "@codemirror/state": "^6.0.0",
+                "@codemirror/view": "^6.37.0",
+                "crelt": "^1.0.5"
+            }
+        },
+        "node_modules/@codemirror/state": {
+            "version": "6.7.0",
+            "resolved": "https://registry.npmjs.org/@codemirror/state/-/state-6.7.0.tgz",
+            "integrity": "sha512-Zbl9NyscLMZkfXPQnNAIIAFftidrA1UbcJEIMp24C0Bukc2I5T8wJS0wsXYsnDOqCFJUeJ1BITGNs5CqPDSmSg==",
+            "license": "MIT",
+            "dependencies": {
+                "@marijn/find-cluster-break": "^1.0.0"
+            }
+        },
+        "node_modules/@codemirror/theme-one-dark": {
+            "version": "6.1.3",
+            "resolved": "https://registry.npmjs.org/@codemirror/theme-one-dark/-/theme-one-dark-6.1.3.tgz",
+            "integrity": "sha512-NzBdIvEJmx6fjeremiGp3t/okrLPYT0d9orIc7AFun8oZcRk58aejkqhv6spnz4MLAevrKNPMQYXEWMg4s+sKA==",
+            "license": "MIT",
+            "dependencies": {
+                "@codemirror/language": "^6.0.0",
+                "@codemirror/state": "^6.0.0",
+                "@codemirror/view": "^6.0.0",
+                "@lezer/highlight": "^1.0.0"
+            }
+        },
+        "node_modules/@codemirror/view": {
+            "version": "6.43.4",
+            "resolved": "https://registry.npmjs.org/@codemirror/view/-/view-6.43.4.tgz",
+            "integrity": "sha512-YImu23iyKfncJzT7sRy+rEqEhSc8RhOHqDxwy4WzXRKJwYm6iwf/9OJk5ctCAdZ6yi2ZqaGEvmf55fSVqMDrgg==",
+            "license": "MIT",
+            "peer": true,
+            "dependencies": {
+                "@codemirror/state": "^6.7.0",
+                "crelt": "^1.0.6",
+                "style-mod": "^4.1.0",
+                "w3c-keyname": "^2.2.4"
+            }
+        },
+        "node_modules/@emnapi/wasi-threads": {
+            "version": "1.2.2",
+            "resolved": "https://registry.npmjs.org/@emnapi/wasi-threads/-/wasi-threads-1.2.2.tgz",
+            "integrity": "sha512-c95qOXkHdydNKhscBTebqEC1CVAZpyqOfVfBzQ1qgzyl3gfeldUjIggDbIZgDKsHLgnsM+igH7TJ/eAasaVuMA==",
+            "license": "MIT",
+            "optional": true,
+            "dependencies": {
+                "tslib": "^2.4.0"
+            }
+        },
+        "node_modules/@eslint-community/eslint-utils": {
+            "version": "4.9.1",
+            "resolved": "https://registry.npmjs.org/@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": "https://registry.npmjs.org/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": "https://registry.npmjs.org/@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.5",
+            "resolved": "https://registry.npmjs.org/@eslint/config-array/-/config-array-0.23.5.tgz",
+            "integrity": "sha512-Y3kKLvC1dvTOT+oGlqNQ1XLqK6D1HU2YXPc52NmAlJZbMMWDzGYXMiPRJ8TYD39muD/OTjlZmNJ4ib7dvSrMBA==",
+            "dev": true,
+            "license": "Apache-2.0",
+            "dependencies": {
+                "@eslint/object-schema": "^3.0.5",
+                "debug": "^4.3.1",
+                "minimatch": "^10.2.4"
+            },
+            "engines": {
+                "node": "^20.19.0 || ^22.13.0 || >=24"
+            }
+        },
+        "node_modules/@eslint/config-array/node_modules/balanced-match": {
+            "version": "4.0.4",
+            "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-4.0.4.tgz",
+            "integrity": "sha512-BLrgEcRTwX2o6gGxGOCNyMvGSp35YofuYzw9h1IMTRmKqttAZZVU67bdb9Pr2vUHA8+j3i2tJfjO6C6+4myGTA==",
+            "dev": true,
+            "license": "MIT",
+            "engines": {
+                "node": "18 || 20 || >=22"
+            }
+        },
+        "node_modules/@eslint/config-array/node_modules/brace-expansion": {
+            "version": "5.0.7",
+            "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-5.0.7.tgz",
+            "integrity": "sha512-7oFy703dxfY3/NLxC1fh2SUCQ0H9rmAY+5EpDVfXjUTTs+HEwR2nYaqLv+GWcTsumwxPfiz6CzCNkwXwBUwqCA==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "balanced-match": "^4.0.2"
+            },
+            "engines": {
+                "node": "18 || 20 || >=22"
+            }
+        },
+        "node_modules/@eslint/config-array/node_modules/minimatch": {
+            "version": "10.2.5",
+            "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-10.2.5.tgz",
+            "integrity": "sha512-MULkVLfKGYDFYejP07QOurDLLQpcjk7Fw+7jXS2R2czRQzR56yHRveU5NDJEOviH+hETZKSkIk5c+T23GjFUMg==",
+            "dev": true,
+            "license": "BlueOak-1.0.0",
+            "dependencies": {
+                "brace-expansion": "^5.0.5"
+            },
+            "engines": {
+                "node": "18 || 20 || >=22"
+            },
+            "funding": {
+                "url": "https://github.com/sponsors/isaacs"
+            }
+        },
+        "node_modules/@eslint/config-helpers": {
+            "version": "0.6.0",
+            "resolved": "https://registry.npmjs.org/@eslint/config-helpers/-/config-helpers-0.6.0.tgz",
+            "integrity": "sha512-ii6Bw9jJ2zi2cWA2Z+9/QZ/+3DX6kwaV5Q986D/CdP3Lap3w/pgQZ373FV7byY/i7L4IRH/G43I5dz1ClsCbpA==",
+            "dev": true,
+            "license": "Apache-2.0",
+            "dependencies": {
+                "@eslint/core": "^1.2.1"
+            },
+            "engines": {
+                "node": "^20.19.0 || ^22.13.0 || >=24"
+            }
+        },
+        "node_modules/@eslint/core": {
+            "version": "1.2.1",
+            "resolved": "https://registry.npmjs.org/@eslint/core/-/core-1.2.1.tgz",
+            "integrity": "sha512-MwcE1P+AZ4C6DWlpin/OmOA54mmIZ/+xZuJiQd4SyB29oAJjN30UW9wkKNptW2ctp4cEsvhlLY/CsQ1uoHDloQ==",
+            "dev": true,
+            "license": "Apache-2.0",
+            "dependencies": {
+                "@types/json-schema": "^7.0.15"
+            },
+            "engines": {
+                "node": "^20.19.0 || ^22.13.0 || >=24"
+            }
+        },
+        "node_modules/@eslint/object-schema": {
+            "version": "3.0.5",
+            "resolved": "https://registry.npmjs.org/@eslint/object-schema/-/object-schema-3.0.5.tgz",
+            "integrity": "sha512-vqTaUEgxzm+YDSdElad6PiRoX4t8VGDjCtt05zn4nU810UIx/uNEV7/lZJ6KwFThKZOzOxzXy48da+No7HZaMw==",
+            "dev": true,
+            "license": "Apache-2.0",
+            "engines": {
+                "node": "^20.19.0 || ^22.13.0 || >=24"
+            }
+        },
+        "node_modules/@eslint/plugin-kit": {
+            "version": "0.7.2",
+            "resolved": "https://registry.npmjs.org/@eslint/plugin-kit/-/plugin-kit-0.7.2.tgz",
+            "integrity": "sha512-+CNAzxglkrpNf/kKywqQfk74QjtceuOE7Qm+AF8miRvPF/wmmK5+OJOgVh3AVTT3RP2mH3+FOaxlE5v72owk0A==",
+            "dev": true,
+            "license": "Apache-2.0",
+            "dependencies": {
+                "@eslint/core": "^1.2.1",
+                "levn": "^0.4.1"
+            },
+            "engines": {
+                "node": "^20.19.0 || ^22.13.0 || >=24"
+            }
+        },
+        "node_modules/@fontsource-variable/inter": {
+            "version": "5.2.8",
+            "resolved": "https://registry.npmjs.org/@fontsource-variable/inter/-/inter-5.2.8.tgz",
+            "integrity": "sha512-kOfP2D+ykbcX/P3IFnokOhVRNoTozo5/JxhAIVYLpea/UBmCQ/YWPBfWIDuBImXX/15KH+eKh4xpEUyS2sQQGQ==",
+            "license": "OFL-1.1",
+            "funding": {
+                "url": "https://github.com/sponsors/ayuhito"
+            }
+        },
+        "node_modules/@humanfs/core": {
+            "version": "0.19.2",
+            "resolved": "https://registry.npmjs.org/@humanfs/core/-/core-0.19.2.tgz",
+            "integrity": "sha512-UhXNm+CFMWcbChXywFwkmhqjs3PRCmcSa/hfBgLIb7oQ5HNb1wS0icWsGtSAUNgefHeI+eBrA8I1fxmbHsGdvA==",
+            "dev": true,
+            "license": "Apache-2.0",
+            "dependencies": {
+                "@humanfs/types": "^0.15.0"
+            },
+            "engines": {
+                "node": ">=18.18.0"
+            }
+        },
+        "node_modules/@humanfs/node": {
+            "version": "0.16.8",
+            "resolved": "https://registry.npmjs.org/@humanfs/node/-/node-0.16.8.tgz",
+            "integrity": "sha512-gE1eQNZ3R++kTzFUpdGlpmy8kDZD/MLyHqDwqjkVQI0JMdI1D51sy1H958PNXYkM2rAac7e5/CnIKZrHtPh3BQ==",
+            "dev": true,
+            "license": "Apache-2.0",
+            "dependencies": {
+                "@humanfs/core": "^0.19.2",
+                "@humanfs/types": "^0.15.0",
+                "@humanwhocodes/retry": "^0.4.0"
+            },
+            "engines": {
+                "node": ">=18.18.0"
+            }
+        },
+        "node_modules/@humanfs/types": {
+            "version": "0.15.0",
+            "resolved": "https://registry.npmjs.org/@humanfs/types/-/types-0.15.0.tgz",
+            "integrity": "sha512-ZZ1w0aoQkwuUuC7Yf+7sdeaNfqQiiLcSRbfI08oAxqLtpXQr9AIVX7Ay7HLDuiLYAaFPu8oBYNq/QIi9URHJ3Q==",
+            "dev": true,
+            "license": "Apache-2.0",
+            "engines": {
+                "node": ">=18.18.0"
+            }
+        },
+        "node_modules/@humanwhocodes/module-importer": {
+            "version": "1.0.1",
+            "resolved": "https://registry.npmjs.org/@humanwhocodes/module-importer/-/module-importer-1.0.1.tgz",
+            "integrity": "sha512-bxveV4V8v5Yb4ncFTT3rPSgZBOpCkjfK0y4oVVVJwIuDVBRMDXrPyXRL988i5ap9m9bnyEEjWfm5WkBmtffLfA==",
+            "dev": true,
+            "license": "Apache-2.0",
+            "engines": {
+                "node": ">=12.22"
+            },
+            "funding": {
+                "type": "github",
+                "url": "https://github.com/sponsors/nzakas"
+            }
+        },
+        "node_modules/@humanwhocodes/retry": {
+            "version": "0.4.3",
+            "resolved": "https://registry.npmjs.org/@humanwhocodes/retry/-/retry-0.4.3.tgz",
+            "integrity": "sha512-bV0Tgo9K4hfPCek+aMAn81RppFKv2ySDQeMoSZuvTASywNTnVJCArCZE2FWqpvIatKu7VMRLWlR1EazvVhDyhQ==",
+            "dev": true,
+            "license": "Apache-2.0",
+            "engines": {
+                "node": ">=18.18"
+            },
+            "funding": {
+                "type": "github",
+                "url": "https://github.com/sponsors/nzakas"
+            }
+        },
+        "node_modules/@internationalized/date": {
+            "version": "3.12.2",
+            "resolved": "https://registry.npmjs.org/@internationalized/date/-/date-3.12.2.tgz",
+            "integrity": "sha512-FY1Y+H64NDs+HAF6omlnWxm3mEpfgaCSWtL5l551ZZfImA+kGjPFgrnJrGjH6lfmLL0g8Z/mBu1R3kufeCp6Jw==",
+            "license": "Apache-2.0",
+            "dependencies": {
+                "@swc/helpers": "^0.5.0"
+            }
+        },
+        "node_modules/@internationalized/number": {
+            "version": "3.6.7",
+            "resolved": "https://registry.npmjs.org/@internationalized/number/-/number-3.6.7.tgz",
+            "integrity": "sha512-3ji1fcrT+FPAK86UqEhB/psHixYo6niWPJtt7+qRaYFynt/BaJG8GhAPimtWUpEiVSTq8ZM8L5psMxGquiB/Vg==",
+            "license": "Apache-2.0",
+            "dependencies": {
+                "@swc/helpers": "^0.5.0"
+            }
+        },
+        "node_modules/@internationalized/string": {
+            "version": "3.2.9",
+            "resolved": "https://registry.npmjs.org/@internationalized/string/-/string-3.2.9.tgz",
+            "integrity": "sha512-kzP/M/mbQxODlmOt4bIQZ2SBVUWUSqMLXooXixnX7noche8WHaQcA+nwFN1K2KCF/cp+LDUhcJsCicwkvhD1pg==",
+            "license": "Apache-2.0",
+            "dependencies": {
+                "@swc/helpers": "^0.5.0"
+            }
+        },
+        "node_modules/@jridgewell/gen-mapping": {
+            "version": "0.3.13",
+            "resolved": "https://registry.npmjs.org/@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": "https://registry.npmjs.org/@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": "https://registry.npmjs.org/@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": "https://registry.npmjs.org/@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": "https://registry.npmjs.org/@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/@lezer/common": {
+            "version": "1.5.2",
+            "resolved": "https://registry.npmjs.org/@lezer/common/-/common-1.5.2.tgz",
+            "integrity": "sha512-sxQE460fPZyU3sdc8lafxiPwJHBzZRy/udNFynGQky1SePYBdhkBl1kOagA9uT3pxR8K09bOrmTUqA9wb/PjSQ==",
+            "license": "MIT"
+        },
+        "node_modules/@lezer/cpp": {
+            "version": "1.1.6",
+            "resolved": "https://registry.npmjs.org/@lezer/cpp/-/cpp-1.1.6.tgz",
+            "integrity": "sha512-vh9gWWJOXFVY8HBHK3Twzq8MgwG2iN4GSyzBP9sCGTe37P15x2R14VaBQk0VA0ezTRN1KHYBBsHhvpGZ2Xy/pA==",
+            "license": "MIT",
+            "dependencies": {
+                "@lezer/common": "^1.2.0",
+                "@lezer/highlight": "^1.0.0",
+                "@lezer/lr": "^1.0.0"
+            }
+        },
+        "node_modules/@lezer/css": {
+            "version": "1.3.4",
+            "resolved": "https://registry.npmjs.org/@lezer/css/-/css-1.3.4.tgz",
+            "integrity": "sha512-N+tn9tej2hPvyKgHEApMOQfHczDJCwxrRFS3SPn9QjYN+uwHvEDnCgKRrb3mxDYxRS8sKMM8fhC3+lc04Abz5Q==",
+            "license": "MIT",
+            "dependencies": {
+                "@lezer/common": "^1.2.0",
+                "@lezer/highlight": "^1.0.0",
+                "@lezer/lr": "^1.3.0"
+            }
+        },
+        "node_modules/@lezer/go": {
+            "version": "1.0.1",
+            "resolved": "https://registry.npmjs.org/@lezer/go/-/go-1.0.1.tgz",
+            "integrity": "sha512-xToRsYxwsgJNHTgNdStpcvmbVuKxTapV0dM0wey1geMMRc9aggoVyKgzYp41D2/vVOx+Ii4hmE206kvxIXBVXQ==",
+            "license": "MIT",
+            "dependencies": {
+                "@lezer/common": "^1.2.0",
+                "@lezer/highlight": "^1.0.0",
+                "@lezer/lr": "^1.3.0"
+            }
+        },
+        "node_modules/@lezer/highlight": {
+            "version": "1.2.3",
+            "resolved": "https://registry.npmjs.org/@lezer/highlight/-/highlight-1.2.3.tgz",
+            "integrity": "sha512-qXdH7UqTvGfdVBINrgKhDsVTJTxactNNxLk7+UMwZhU13lMHaOBlJe9Vqp907ya56Y3+ed2tlqzys7jDkTmW0g==",
+            "license": "MIT",
+            "dependencies": {
+                "@lezer/common": "^1.3.0"
+            }
+        },
+        "node_modules/@lezer/html": {
+            "version": "1.3.13",
+            "resolved": "https://registry.npmjs.org/@lezer/html/-/html-1.3.13.tgz",
+            "integrity": "sha512-oI7n6NJml729m7pjm9lvLvmXbdoMoi2f+1pwSDJkl9d68zGr7a9Btz8NdHTGQZtW2DA25ybeuv/SyDb9D5tseg==",
+            "license": "MIT",
+            "dependencies": {
+                "@lezer/common": "^1.2.0",
+                "@lezer/highlight": "^1.0.0",
+                "@lezer/lr": "^1.0.0"
+            }
+        },
+        "node_modules/@lezer/java": {
+            "version": "1.1.3",
+            "resolved": "https://registry.npmjs.org/@lezer/java/-/java-1.1.3.tgz",
+            "integrity": "sha512-yHquUfujwg6Yu4Fd1GNHCvidIvJwi/1Xu2DaKl/pfWIA2c1oXkVvawH3NyXhCaFx4OdlYBVX5wvz2f7Aoa/4Xw==",
+            "license": "MIT",
+            "dependencies": {
+                "@lezer/common": "^1.2.0",
+                "@lezer/highlight": "^1.0.0",
+                "@lezer/lr": "^1.0.0"
+            }
+        },
+        "node_modules/@lezer/javascript": {
+            "version": "1.5.4",
+            "resolved": "https://registry.npmjs.org/@lezer/javascript/-/javascript-1.5.4.tgz",
+            "integrity": "sha512-vvYx3MhWqeZtGPwDStM2dwgljd5smolYD2lR2UyFcHfxbBQebqx8yjmFmxtJ/E6nN6u1D9srOiVWm3Rb4tmcUA==",
+            "license": "MIT",
+            "dependencies": {
+                "@lezer/common": "^1.2.0",
+                "@lezer/highlight": "^1.1.3",
+                "@lezer/lr": "^1.3.0"
+            }
+        },
+        "node_modules/@lezer/json": {
+            "version": "1.0.3",
+            "resolved": "https://registry.npmjs.org/@lezer/json/-/json-1.0.3.tgz",
+            "integrity": "sha512-BP9KzdF9Y35PDpv04r0VeSTKDeox5vVr3efE7eBbx3r4s3oNLfunchejZhjArmeieBH+nVOpgIiBJpEAv8ilqQ==",
+            "license": "MIT",
+            "dependencies": {
+                "@lezer/common": "^1.2.0",
+                "@lezer/highlight": "^1.0.0",
+                "@lezer/lr": "^1.0.0"
+            }
+        },
+        "node_modules/@lezer/lr": {
+            "version": "1.4.10",
+            "resolved": "https://registry.npmjs.org/@lezer/lr/-/lr-1.4.10.tgz",
+            "integrity": "sha512-rnCpTIBafOx4mRp43xOxDJbFipJm/c0cia/V5TiGlhmMa+wsSdoGmUN3w5Bqrks/09Q/D4tNAmWaT8p6NRi77A==",
+            "license": "MIT",
+            "dependencies": {
+                "@lezer/common": "^1.0.0"
+            }
+        },
+        "node_modules/@lezer/markdown": {
+            "version": "1.6.4",
+            "resolved": "https://registry.npmjs.org/@lezer/markdown/-/markdown-1.6.4.tgz",
+            "integrity": "sha512-N0SxazMj4k65DBfaf1azqtMZd6u7MqluP84/NZnB/io8Td9aleFmAhz9hcbvSfsxT5tdYlJ5qgv5aMJGY4zEtA==",
+            "license": "MIT",
+            "dependencies": {
+                "@lezer/common": "^1.5.0",
+                "@lezer/highlight": "^1.0.0"
+            }
+        },
+        "node_modules/@lezer/php": {
+            "version": "1.0.5",
+            "resolved": "https://registry.npmjs.org/@lezer/php/-/php-1.0.5.tgz",
+            "integrity": "sha512-W7asp9DhM6q0W6DYNwIkLSKOvxlXRrif+UXBMxzsJUuqmhE7oVU+gS3THO4S/Puh7Xzgm858UNaFi6dxTP8dJA==",
+            "license": "MIT",
+            "dependencies": {
+                "@lezer/common": "^1.2.0",
+                "@lezer/highlight": "^1.0.0",
+                "@lezer/lr": "^1.1.0"
+            }
+        },
+        "node_modules/@lezer/python": {
+            "version": "1.1.19",
+            "resolved": "https://registry.npmjs.org/@lezer/python/-/python-1.1.19.tgz",
+            "integrity": "sha512-MhQIURHRytsNzP/YXnqpYKW6la6voAH3kyplTOOiCdjyFY6cWWGFVmYVdHIPrElqSDf4iCDktQCockB9FxuhzQ==",
+            "license": "MIT",
+            "dependencies": {
+                "@lezer/common": "^1.2.0",
+                "@lezer/highlight": "^1.0.0",
+                "@lezer/lr": "^1.0.0"
+            }
+        },
+        "node_modules/@lezer/rust": {
+            "version": "1.0.2",
+            "resolved": "https://registry.npmjs.org/@lezer/rust/-/rust-1.0.2.tgz",
+            "integrity": "sha512-Lz5sIPBdF2FUXcWeCu1//ojFAZqzTQNRga0aYv6dYXqJqPfMdCAI0NzajWUd4Xijj1IKJLtjoXRPMvTKWBcqKg==",
+            "license": "MIT",
+            "dependencies": {
+                "@lezer/common": "^1.2.0",
+                "@lezer/highlight": "^1.0.0",
+                "@lezer/lr": "^1.0.0"
+            }
+        },
+        "node_modules/@lezer/sass": {
+            "version": "1.1.0",
+            "resolved": "https://registry.npmjs.org/@lezer/sass/-/sass-1.1.0.tgz",
+            "integrity": "sha512-3mMGdCTUZ/84ArHOuXWQr37pnf7f+Nw9ycPUeKX+wu19b7pSMcZGLbaXwvD2APMBDOGxPmpK/O6S1v1EvLoqgQ==",
+            "license": "MIT",
+            "dependencies": {
+                "@lezer/common": "^1.2.0",
+                "@lezer/highlight": "^1.0.0",
+                "@lezer/lr": "^1.0.0"
+            }
+        },
+        "node_modules/@lezer/xml": {
+            "version": "1.0.6",
+            "resolved": "https://registry.npmjs.org/@lezer/xml/-/xml-1.0.6.tgz",
+            "integrity": "sha512-CdDwirL0OEaStFue/66ZmFSeppuL6Dwjlk8qk153mSQwiSH/Dlri4GNymrNWnUmPl2Um7QfV1FO9KFUyX3Twww==",
+            "license": "MIT",
+            "dependencies": {
+                "@lezer/common": "^1.2.0",
+                "@lezer/highlight": "^1.0.0",
+                "@lezer/lr": "^1.0.0"
+            }
+        },
+        "node_modules/@lezer/yaml": {
+            "version": "1.0.4",
+            "resolved": "https://registry.npmjs.org/@lezer/yaml/-/yaml-1.0.4.tgz",
+            "integrity": "sha512-2lrrHqxalACEbxIbsjhqGpSW8kWpUKuY6RHgnSAFZa6qK62wvnPxA8hGOwOoDbwHcOFs5M4o27mjGu+P7TvBmw==",
+            "license": "MIT",
+            "dependencies": {
+                "@lezer/common": "^1.2.0",
+                "@lezer/highlight": "^1.0.0",
+                "@lezer/lr": "^1.4.0"
+            }
+        },
+        "node_modules/@marijn/find-cluster-break": {
+            "version": "1.0.3",
+            "resolved": "https://registry.npmjs.org/@marijn/find-cluster-break/-/find-cluster-break-1.0.3.tgz",
+            "integrity": "sha512-FY+MKLBoTsLNJF/eLWaOsXGdz6uh3Iu1axjPf6TUq92IYumcTcXWHoS747JARLkcdlJ/Waiaxc5wQfFO8jC6NA==",
+            "license": "MIT"
+        },
+        "node_modules/@napi-rs/wasm-runtime": {
+            "version": "1.1.6",
+            "resolved": "https://registry.npmjs.org/@napi-rs/wasm-runtime/-/wasm-runtime-1.1.6.tgz",
+            "integrity": "sha512-ZLv/JdUfkvOy9eCnnBaGfiO+XimbjebAeO+MRQqD/B+FR1tnRN0tpKSJHRbE8sFfS6aqsXZ67TQjfwfsxULVbg==",
+            "license": "MIT",
+            "optional": true,
+            "dependencies": {
+                "@tybys/wasm-util": "^0.10.3"
+            },
+            "funding": {
+                "type": "github",
+                "url": "https://github.com/sponsors/Brooooooklyn"
+            },
+            "peerDependencies": {
+                "@emnapi/core": "^1.7.1",
+                "@emnapi/runtime": "^1.7.1"
+            }
+        },
+        "node_modules/@oxc-project/types": {
+            "version": "0.138.0",
+            "resolved": "https://registry.npmjs.org/@oxc-project/types/-/types-0.138.0.tgz",
+            "integrity": "sha512-1a7ZKmrRTCoN1XMZ4L0PyyqrMnrNlLyPuOkdSX2MZg7IiIGRUyurNhAm73ptDOraoBcIordsIGKNPKUzy3ZmfA==",
+            "license": "MIT",
+            "funding": {
+                "url": "https://github.com/sponsors/Boshen"
+            }
+        },
+        "node_modules/@react-types/shared": {
+            "version": "3.36.0",
+            "resolved": "https://registry.npmjs.org/@react-types/shared/-/shared-3.36.0.tgz",
+            "integrity": "sha512-DkP/H0C2YjjS7gZWKNqOmU8a16qHPjQNdzMwmTq9SzplM6Iw0kVMTZ0OIoe6FOgGqa+FwMsE2QbPjh/n3g/jXQ==",
+            "license": "Apache-2.0",
+            "peerDependencies": {
+                "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1"
+            }
+        },
+        "node_modules/@reduxjs/toolkit": {
+            "version": "2.12.0",
+            "resolved": "https://registry.npmjs.org/@reduxjs/toolkit/-/toolkit-2.12.0.tgz",
+            "integrity": "sha512-KiT+RzZbp6mQET+Mg+h2c97+9j1sNflUxQkIHI7Yuzf6Peu+OYpmkn6nbHWmLLWj+1ZODUJFwGZ7gx3L9R9EOw==",
+            "license": "MIT",
+            "dependencies": {
+                "@standard-schema/spec": "^1.0.0",
+                "@standard-schema/utils": "^0.3.0",
+                "immer": "^11.0.0",
+                "redux": "^5.0.1",
+                "redux-thunk": "^3.1.0",
+                "reselect": "^5.1.0"
+            },
+            "peerDependencies": {
+                "react": "^16.9.0 || ^17.0.0 || ^18 || ^19",
+                "react-redux": "^7.2.1 || ^8.1.3 || ^9.0.0"
+            },
+            "peerDependenciesMeta": {
+                "react": {
+                    "optional": true
+                },
+                "react-redux": {
+                    "optional": true
+                }
+            }
+        },
+        "node_modules/@rolldown/binding-android-arm64": {
+            "version": "1.1.4",
+            "resolved": "https://registry.npmjs.org/@rolldown/binding-android-arm64/-/binding-android-arm64-1.1.4.tgz",
+            "integrity": "sha512-EZLpf/8y7GXkkra90ML47kzik/GMP3EMcE9bPyHmRfxLC6z9+aW5A8poCsoxjrT5GfEcNAAvWwUHjvP1pUQkfw==",
+            "cpu": [
+                "arm64"
+            ],
+            "license": "MIT",
+            "optional": true,
+            "os": [
+                "android"
+            ],
+            "engines": {
+                "node": "^20.19.0 || >=22.12.0"
+            }
+        },
+        "node_modules/@rolldown/binding-darwin-arm64": {
+            "version": "1.1.4",
+            "resolved": "https://registry.npmjs.org/@rolldown/binding-darwin-arm64/-/binding-darwin-arm64-1.1.4.tgz",
+            "integrity": "sha512-aUi+HBvmYb7j8krl1+qJgkG8C17fO79gk3c+jPw4S8glRFc1DTija9S3EyaTSQUm5GJXYKDAsugBEhFHH2vYiQ==",
+            "cpu": [
+                "arm64"
+            ],
+            "license": "MIT",
+            "optional": true,
+            "os": [
+                "darwin"
+            ],
+            "engines": {
+                "node": "^20.19.0 || >=22.12.0"
+            }
+        },
+        "node_modules/@rolldown/binding-darwin-x64": {
+            "version": "1.1.4",
+            "resolved": "https://registry.npmjs.org/@rolldown/binding-darwin-x64/-/binding-darwin-x64-1.1.4.tgz",
+            "integrity": "sha512-F7hHC3gwY11+vByKPRWqwGbeXWVgKmL+pTGCinaEhdihzBV2aQ0fvZOch9cXYUOKuKKq429HeYXOqQLc7wFCEg==",
+            "cpu": [
+                "x64"
+            ],
+            "license": "MIT",
+            "optional": true,
+            "os": [
+                "darwin"
+            ],
+            "engines": {
+                "node": "^20.19.0 || >=22.12.0"
+            }
+        },
+        "node_modules/@rolldown/binding-freebsd-x64": {
+            "version": "1.1.4",
+            "resolved": "https://registry.npmjs.org/@rolldown/binding-freebsd-x64/-/binding-freebsd-x64-1.1.4.tgz",
+            "integrity": "sha512-sI5yw+7s92SK6odiEhD5lKCBlWcpjHS5qyqpVQbZAJ0fIzEUXrmbl3DH2ybR3PZogulNJF+COLtmA8hUfvkCCQ==",
+            "cpu": [
+                "x64"
+            ],
+            "license": "MIT",
+            "optional": true,
+            "os": [
+                "freebsd"
+            ],
+            "engines": {
+                "node": "^20.19.0 || >=22.12.0"
+            }
+        },
+        "node_modules/@rolldown/binding-linux-arm-gnueabihf": {
+            "version": "1.1.4",
+            "resolved": "https://registry.npmjs.org/@rolldown/binding-linux-arm-gnueabihf/-/binding-linux-arm-gnueabihf-1.1.4.tgz",
+            "integrity": "sha512-mCi0OKgEieFircrtVYmQAFGszRtMnZ6fpZAXrxanXAu7lqZcsK1E1RAaZNG0uKAnxox3B1f4EyQNnoyMfN1vAA==",
+            "cpu": [
+                "arm"
+            ],
+            "license": "MIT",
+            "optional": true,
+            "os": [
+                "linux"
+            ],
+            "engines": {
+                "node": "^20.19.0 || >=22.12.0"
+            }
+        },
+        "node_modules/@rolldown/binding-linux-arm64-gnu": {
+            "version": "1.1.4",
+            "resolved": "https://registry.npmjs.org/@rolldown/binding-linux-arm64-gnu/-/binding-linux-arm64-gnu-1.1.4.tgz",
+            "integrity": "sha512-B9Ial3Kv5sh0SHnB1g/QWcUQCEvCF6QKGAl4zXypYj65mVI+B4AhFBwPtSN7pDrJeIx8Z7zdy4ntx+wQABom7w==",
+            "cpu": [
+                "arm64"
+            ],
+            "license": "MIT",
+            "optional": true,
+            "os": [
+                "linux"
+            ],
+            "engines": {
+                "node": "^20.19.0 || >=22.12.0"
+            }
+        },
+        "node_modules/@rolldown/binding-linux-arm64-musl": {
+            "version": "1.1.4",
+            "resolved": "https://registry.npmjs.org/@rolldown/binding-linux-arm64-musl/-/binding-linux-arm64-musl-1.1.4.tgz",
+            "integrity": "sha512-lZVym0PuHE1KZ22gmFTC15lAkrg9iTszR617oYRB/iPY1A56ywoJzVKOJBKaot5RiikCObmur6pogpse3gRcng==",
+            "cpu": [
+                "arm64"
+            ],
+            "license": "MIT",
+            "optional": true,
+            "os": [
+                "linux"
+            ],
+            "engines": {
+                "node": "^20.19.0 || >=22.12.0"
+            }
+        },
+        "node_modules/@rolldown/binding-linux-ppc64-gnu": {
+            "version": "1.1.4",
+            "resolved": "https://registry.npmjs.org/@rolldown/binding-linux-ppc64-gnu/-/binding-linux-ppc64-gnu-1.1.4.tgz",
+            "integrity": "sha512-t2DNiLJWNTbnEHyUzTumldML6ET4/g16467LZoDDJ3tSxGvguL5/NyC2lCsNKuyRycg9XeDQF5SSv+TNOhQEXg==",
+            "cpu": [
+                "ppc64"
+            ],
+            "license": "MIT",
+            "optional": true,
+            "os": [
+                "linux"
+            ],
+            "engines": {
+                "node": "^20.19.0 || >=22.12.0"
+            }
+        },
+        "node_modules/@rolldown/binding-linux-s390x-gnu": {
+            "version": "1.1.4",
+            "resolved": "https://registry.npmjs.org/@rolldown/binding-linux-s390x-gnu/-/binding-linux-s390x-gnu-1.1.4.tgz",
+            "integrity": "sha512-0WIRnL1Uw4BvTZRLQt+PVgo6ZKTJadlC2btP+/EOXv2f/DWbY0rEgl+y834mIVwP1FkTlWVTrGGJXf12lru7EQ==",
+            "cpu": [
+                "s390x"
+            ],
+            "license": "MIT",
+            "optional": true,
+            "os": [
+                "linux"
+            ],
+            "engines": {
+                "node": "^20.19.0 || >=22.12.0"
+            }
+        },
+        "node_modules/@rolldown/binding-linux-x64-gnu": {
+            "version": "1.1.4",
+            "resolved": "https://registry.npmjs.org/@rolldown/binding-linux-x64-gnu/-/binding-linux-x64-gnu-1.1.4.tgz",
+            "integrity": "sha512-JWtGshGfX+oENAKonoNkqEJX+7hC8yfhi9GUyPX1VX4mdh1y5r+ZiJLR5XzAB0aoP6s/PcILsGjKq8O0mm24bw==",
+            "cpu": [
+                "x64"
+            ],
+            "license": "MIT",
+            "optional": true,
+            "os": [
+                "linux"
+            ],
+            "engines": {
+                "node": "^20.19.0 || >=22.12.0"
+            }
+        },
+        "node_modules/@rolldown/binding-linux-x64-musl": {
+            "version": "1.1.4",
+            "resolved": "https://registry.npmjs.org/@rolldown/binding-linux-x64-musl/-/binding-linux-x64-musl-1.1.4.tgz",
+            "integrity": "sha512-rT6yQcxUuXs4CnbofqwHRRV0iem349rLMYpTjkgQGLjrY4ado/eDzwPZPTCgTOlF6Nkp8NEv70yLMTn6qkWxsQ==",
+            "cpu": [
+                "x64"
+            ],
+            "license": "MIT",
+            "optional": true,
+            "os": [
+                "linux"
+            ],
+            "engines": {
+                "node": "^20.19.0 || >=22.12.0"
+            }
+        },
+        "node_modules/@rolldown/binding-openharmony-arm64": {
+            "version": "1.1.4",
+            "resolved": "https://registry.npmjs.org/@rolldown/binding-openharmony-arm64/-/binding-openharmony-arm64-1.1.4.tgz",
+            "integrity": "sha512-KXMGoboq5cyaCQjDA4GLuRiOwBQ0EyFnJoVViLeZ45/3rFItRODEr+NdsBcVpll40hhNArlm/speWGRvj08LzA==",
+            "cpu": [
+                "arm64"
+            ],
+            "license": "MIT",
+            "optional": true,
+            "os": [
+                "openharmony"
+            ],
+            "engines": {
+                "node": "^20.19.0 || >=22.12.0"
+            }
+        },
+        "node_modules/@rolldown/binding-wasm32-wasi": {
+            "version": "1.1.4",
+            "resolved": "https://registry.npmjs.org/@rolldown/binding-wasm32-wasi/-/binding-wasm32-wasi-1.1.4.tgz",
+            "integrity": "sha512-5K83rb36oJiY7BCyE9zLZtGcPV4g5wvq+xwdO0XPIwDVZI8cyB/AUjkNXGb92/rnmezEkjMOpgY61rtwjQtFwg==",
+            "cpu": [
+                "wasm32"
+            ],
+            "license": "MIT",
+            "optional": true,
+            "dependencies": {
+                "@emnapi/core": "1.11.1",
+                "@emnapi/runtime": "1.11.1",
+                "@napi-rs/wasm-runtime": "^1.1.6"
+            },
+            "engines": {
+                "node": "^20.19.0 || >=22.12.0"
+            }
+        },
+        "node_modules/@rolldown/binding-win32-arm64-msvc": {
+            "version": "1.1.4",
+            "resolved": "https://registry.npmjs.org/@rolldown/binding-win32-arm64-msvc/-/binding-win32-arm64-msvc-1.1.4.tgz",
+            "integrity": "sha512-PnWBtw3TV5KOg69HQQDR0mnQuyCmSGR2pAB4DC1rPF808fgKeTUMj2EOEyKATpgiuxuR5APQmiDO7PDgEjTFSA==",
+            "cpu": [
+                "arm64"
+            ],
+            "license": "MIT",
+            "optional": true,
+            "os": [
+                "win32"
+            ],
+            "engines": {
+                "node": "^20.19.0 || >=22.12.0"
+            }
+        },
+        "node_modules/@rolldown/binding-win32-x64-msvc": {
+            "version": "1.1.4",
+            "resolved": "https://registry.npmjs.org/@rolldown/binding-win32-x64-msvc/-/binding-win32-x64-msvc-1.1.4.tgz",
+            "integrity": "sha512-M1lpniBePobTfsa7Ks9a199e1akxsXn+GYBUKsEzv3YFzOm1HJAMNwKI3qr0Zq+mxwx9gOZoTdP1yXRYsZUocQ==",
+            "cpu": [
+                "x64"
+            ],
+            "license": "MIT",
+            "optional": true,
+            "os": [
+                "win32"
+            ],
+            "engines": {
+                "node": "^20.19.0 || >=22.12.0"
+            }
+        },
+        "node_modules/@rolldown/pluginutils": {
+            "version": "1.0.1",
+            "resolved": "https://registry.npmjs.org/@rolldown/pluginutils/-/pluginutils-1.0.1.tgz",
+            "integrity": "sha512-2j9bGt5Jh8hj+vPtgzPtl72j0yRxHAyumoo6TNfAjsLB04UtpSvPbPcDcBMxz7n+9CYB0c1GxQFxYRg2jimqGw==",
+            "license": "MIT"
+        },
+        "node_modules/@standard-schema/spec": {
+            "version": "1.1.0",
+            "resolved": "https://registry.npmjs.org/@standard-schema/spec/-/spec-1.1.0.tgz",
+            "integrity": "sha512-l2aFy5jALhniG5HgqrD6jXLi/rUWrKvqN/qJx6yoJsgKhblVd+iqqU4RCXavm/jPityDo5TCvKMnpjKnOriy0w==",
+            "license": "MIT"
+        },
+        "node_modules/@standard-schema/utils": {
+            "version": "0.3.0",
+            "resolved": "https://registry.npmjs.org/@standard-schema/utils/-/utils-0.3.0.tgz",
+            "integrity": "sha512-e7Mew686owMaPJVNNLs55PUvgz371nKgwsc4vxE49zsODpJEnxgxRo2y/OKrqueavXgZNMDVj3DdHFlaSAeU8g==",
+            "license": "MIT"
+        },
+        "node_modules/@swc/helpers": {
+            "version": "0.5.23",
+            "resolved": "https://registry.npmjs.org/@swc/helpers/-/helpers-0.5.23.tgz",
+            "integrity": "sha512-5lSsMOTXURePglDfvuAQUqkGek9Hg2kksOYay2m0+XR++b2NWYL/4sWyuvVBIs8oKnJaxkdi9whaL/sqN13afw==",
+            "license": "Apache-2.0",
+            "dependencies": {
+                "tslib": "^2.8.0"
+            }
+        },
+        "node_modules/@tailwindcss/node": {
+            "version": "4.3.2",
+            "resolved": "https://registry.npmjs.org/@tailwindcss/node/-/node-4.3.2.tgz",
+            "integrity": "sha512-yWP/sqEcBLaD8JuA6zNwxoYKr75qxTioYwlRwekj5Jr/I5GXnoJfjetH/psLUIv74cYTH2lBUEzBkinthoYcBg==",
+            "license": "MIT",
+            "dependencies": {
+                "@jridgewell/remapping": "^2.3.5",
+                "enhanced-resolve": "5.21.6",
+                "jiti": "^2.7.0",
+                "lightningcss": "1.32.0",
+                "magic-string": "^0.30.21",
+                "source-map-js": "^1.2.1",
+                "tailwindcss": "4.3.2"
+            }
+        },
+        "node_modules/@tailwindcss/oxide": {
+            "version": "4.3.2",
+            "resolved": "https://registry.npmjs.org/@tailwindcss/oxide/-/oxide-4.3.2.tgz",
+            "integrity": "sha512-z8ZgnzX8gdNoWLBLqBPoh/sjnxkwvf9ZuWjnO0l0yIzbLa5/9S+eC5QxGZKRobVHIC3/1BoMWjHblqWjcgFgag==",
+            "license": "MIT",
+            "engines": {
+                "node": ">= 20"
+            },
+            "optionalDependencies": {
+                "@tailwindcss/oxide-android-arm64": "4.3.2",
+                "@tailwindcss/oxide-darwin-arm64": "4.3.2",
+                "@tailwindcss/oxide-darwin-x64": "4.3.2",
+                "@tailwindcss/oxide-freebsd-x64": "4.3.2",
+                "@tailwindcss/oxide-linux-arm-gnueabihf": "4.3.2",
+                "@tailwindcss/oxide-linux-arm64-gnu": "4.3.2",
+                "@tailwindcss/oxide-linux-arm64-musl": "4.3.2",
+                "@tailwindcss/oxide-linux-x64-gnu": "4.3.2",
+                "@tailwindcss/oxide-linux-x64-musl": "4.3.2",
+                "@tailwindcss/oxide-wasm32-wasi": "4.3.2",
+                "@tailwindcss/oxide-win32-arm64-msvc": "4.3.2",
+                "@tailwindcss/oxide-win32-x64-msvc": "4.3.2"
+            }
+        },
+        "node_modules/@tailwindcss/oxide-android-arm64": {
+            "version": "4.3.2",
+            "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-android-arm64/-/oxide-android-arm64-4.3.2.tgz",
+            "integrity": "sha512-WHxqIuHpvZ5VtdX6GTl1Ik/Vp2YuN42Et+0CdeaVd/frQ9jAvGmvR8vLT+jk3e8/Q3x8kECB9+R17pgpp2BulA==",
+            "cpu": [
+                "arm64"
+            ],
+            "license": "MIT",
+            "optional": true,
+            "os": [
+                "android"
+            ],
+            "engines": {
+                "node": ">= 20"
+            }
+        },
+        "node_modules/@tailwindcss/oxide-darwin-arm64": {
+            "version": "4.3.2",
+            "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-darwin-arm64/-/oxide-darwin-arm64-4.3.2.tgz",
+            "integrity": "sha512-GZypeUY/IDJW3877KeM+O67vbXr3MBnbtEL4aYhNErv/JWZhye2vGSWWG9tB6iiqR2MqRNkY8IOUy4NdSZV26w==",
+            "cpu": [
+                "arm64"
+            ],
+            "license": "MIT",
+            "optional": true,
+            "os": [
+                "darwin"
+            ],
+            "engines": {
+                "node": ">= 20"
+            }
+        },
+        "node_modules/@tailwindcss/oxide-darwin-x64": {
+            "version": "4.3.2",
+            "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-darwin-x64/-/oxide-darwin-x64-4.3.2.tgz",
+            "integrity": "sha512-UIIzmefR6KO1sDU7MzRqAxC8iBpft/VhkGjTjnhoS6k7Z3rQ9wEgA1ODSiyH/tcSYssulNm4Ci3hOeK1jH7ccQ==",
+            "cpu": [
+                "x64"
+            ],
+            "license": "MIT",
+            "optional": true,
+            "os": [
+                "darwin"
+            ],
+            "engines": {
+                "node": ">= 20"
+            }
+        },
+        "node_modules/@tailwindcss/oxide-freebsd-x64": {
+            "version": "4.3.2",
+            "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-freebsd-x64/-/oxide-freebsd-x64-4.3.2.tgz",
+            "integrity": "sha512-GN+uAmcI6DNspnCDwtOAZrTz6oukJnp337qZvxqCGLd3BHBzJpO0ZbTLRvJNdztOeAmTzewewGIMPb0tk2R4WA==",
+            "cpu": [
+                "x64"
+            ],
+            "license": "MIT",
+            "optional": true,
+            "os": [
+                "freebsd"
+            ],
+            "engines": {
+                "node": ">= 20"
+            }
+        },
+        "node_modules/@tailwindcss/oxide-linux-arm-gnueabihf": {
+            "version": "4.3.2",
+            "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-linux-arm-gnueabihf/-/oxide-linux-arm-gnueabihf-4.3.2.tgz",
+            "integrity": "sha512-4ABn7qSbdHRwTiDiuWNegCyb5+2FJ4vKIKc3DmKrvAFw7MU1Lm11dIkTPwUaFdTzc7IsOpDbqBrlh0x6y36U/w==",
+            "cpu": [
+                "arm"
+            ],
+            "license": "MIT",
+            "optional": true,
+            "os": [
+                "linux"
+            ],
+            "engines": {
+                "node": ">= 20"
+            }
+        },
+        "node_modules/@tailwindcss/oxide-linux-arm64-gnu": {
+            "version": "4.3.2",
+            "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-linux-arm64-gnu/-/oxide-linux-arm64-gnu-4.3.2.tgz",
+            "integrity": "sha512-wDgEIGwoM8w8pufh9LVt1PahDgNdKXrLC2qfAnV3vAmococ9RWbxeAw4pxPttd/TsJfwjyLf90Dg1y9y8I6Emw==",
+            "cpu": [
+                "arm64"
+            ],
+            "license": "MIT",
+            "optional": true,
+            "os": [
+                "linux"
+            ],
+            "engines": {
+                "node": ">= 20"
+            }
+        },
+        "node_modules/@tailwindcss/oxide-linux-arm64-musl": {
+            "version": "4.3.2",
+            "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-linux-arm64-musl/-/oxide-linux-arm64-musl-4.3.2.tgz",
+            "integrity": "sha512-J5Nuk0uZQIiMTJj3LEx4sAA9tMFUoXQZFv1J6An+QGYe53HKRJuFDi0rpq/tuouCZeAbOBY3kQ6g8qeD4TUjtA==",
+            "cpu": [
+                "arm64"
+            ],
+            "license": "MIT",
+            "optional": true,
+            "os": [
+                "linux"
+            ],
+            "engines": {
+                "node": ">= 20"
+            }
+        },
+        "node_modules/@tailwindcss/oxide-linux-x64-gnu": {
+            "version": "4.3.2",
+            "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-linux-x64-gnu/-/oxide-linux-x64-gnu-4.3.2.tgz",
+            "integrity": "sha512-kqCZpSKOBEJO4mz7OqWoofBZeXTAwaVGPj0ErAj7CojmhKpWVWVOnrt9dE8odoIraZq4oj3ausM37kXi+Tow8w==",
+            "cpu": [
+                "x64"
+            ],
+            "license": "MIT",
+            "optional": true,
+            "os": [
+                "linux"
+            ],
+            "engines": {
+                "node": ">= 20"
+            }
+        },
+        "node_modules/@tailwindcss/oxide-linux-x64-musl": {
+            "version": "4.3.2",
+            "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-linux-x64-musl/-/oxide-linux-x64-musl-4.3.2.tgz",
+            "integrity": "sha512-cixpqbh2toJDmkuCRI68nXA8ZxNmdK9Y+9v5h3MC3ZQKy/0BO8AWzlkWyRM7JAFSGBlfig4YVTPsK6MVgqz1uw==",
+            "cpu": [
+                "x64"
+            ],
+            "license": "MIT",
+            "optional": true,
+            "os": [
+                "linux"
+            ],
+            "engines": {
+                "node": ">= 20"
+            }
+        },
+        "node_modules/@tailwindcss/oxide-wasm32-wasi": {
+            "version": "4.3.2",
+            "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-wasm32-wasi/-/oxide-wasm32-wasi-4.3.2.tgz",
+            "integrity": "sha512-4ec2Z/LOmRsAgU23CS4xeJfcJlmRg94A/XrbGRCF1gyU/zdDfRLYDVsS+ynSZCmGNxQ1jQriQOKMQeQxBA3Isw==",
+            "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.11.1",
+                "@emnapi/runtime": "^1.11.1",
+                "@emnapi/wasi-threads": "^1.2.2",
+                "@napi-rs/wasm-runtime": "^1.1.4",
+                "@tybys/wasm-util": "^0.10.2",
+                "tslib": "^2.8.1"
+            },
+            "engines": {
+                "node": ">=14.0.0"
+            }
+        },
+        "node_modules/@tailwindcss/oxide-win32-arm64-msvc": {
+            "version": "4.3.2",
+            "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-win32-arm64-msvc/-/oxide-win32-arm64-msvc-4.3.2.tgz",
+            "integrity": "sha512-Zyr/M0+XcYZu3bZrUytc7TXvrk0ftWfl8gN2MwekNDzhqhKRUucMPSeOzM0o0wH5AWOU49BsKRrfKxI2atCPMQ==",
+            "cpu": [
+                "arm64"
+            ],
+            "license": "MIT",
+            "optional": true,
+            "os": [
+                "win32"
+            ],
+            "engines": {
+                "node": ">= 20"
+            }
+        },
+        "node_modules/@tailwindcss/oxide-win32-x64-msvc": {
+            "version": "4.3.2",
+            "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-win32-x64-msvc/-/oxide-win32-x64-msvc-4.3.2.tgz",
+            "integrity": "sha512-QI9BO7KlNZsp2GuO0jwAAj5jCDABOKXRkCk2XuKTSaNEFSdfzqswYVTtCHBNKHLsqyjFyFkqlDiwkNbTYSssMQ==",
+            "cpu": [
+                "x64"
+            ],
+            "license": "MIT",
+            "optional": true,
+            "os": [
+                "win32"
+            ],
+            "engines": {
+                "node": ">= 20"
+            }
+        },
+        "node_modules/@tailwindcss/typography": {
+            "version": "0.5.20",
+            "resolved": "https://registry.npmjs.org/@tailwindcss/typography/-/typography-0.5.20.tgz",
+            "integrity": "sha512-hwbzQuNUfcPvbegQFatVPl/MY/tcM9KLl963hQ5laJKPh81TEZ1+dNG9PirGvcaDBkp+BCshExAyKVPW91dozw==",
+            "license": "MIT",
+            "dependencies": {
+                "postcss-selector-parser": "6.0.10"
+            },
+            "peerDependencies": {
+                "tailwindcss": ">=3.0.0 || >=4.0.0 || insiders"
+            }
+        },
+        "node_modules/@tailwindcss/vite": {
+            "version": "4.3.2",
+            "resolved": "https://registry.npmjs.org/@tailwindcss/vite/-/vite-4.3.2.tgz",
+            "integrity": "sha512-eHpMeX4JXfVNJDEcsouTeCBubJBTcTLigeaw/NTUW6PB5ATKKXdyonnXgTBX2VuRbjz1hjfz6C5XAhr52ImQXA==",
+            "license": "MIT",
+            "dependencies": {
+                "@tailwindcss/node": "4.3.2",
+                "@tailwindcss/oxide": "4.3.2",
+                "tailwindcss": "4.3.2"
+            },
+            "peerDependencies": {
+                "vite": "^5.2.0 || ^6 || ^7 || ^8"
+            }
+        },
+        "node_modules/@trivago/prettier-plugin-sort-imports": {
+            "version": "6.0.2",
+            "resolved": "https://registry.npmjs.org/@trivago/prettier-plugin-sort-imports/-/prettier-plugin-sort-imports-6.0.2.tgz",
+            "integrity": "sha512-3DgfkukFyC/sE/VuYjaUUWoFfuVjPK55vOFDsxD56XXynFMCZDYFogH2l/hDfOsQAm1myoU/1xByJ3tWqtulXA==",
+            "dev": true,
+            "license": "Apache-2.0",
+            "peer": true,
+            "dependencies": {
+                "@babel/generator": "^7.28.0",
+                "@babel/parser": "^7.28.0",
+                "@babel/traverse": "^7.28.0",
+                "@babel/types": "^7.28.0",
+                "javascript-natural-sort": "^0.7.1",
+                "lodash-es": "^4.17.21",
+                "minimatch": "^9.0.0",
+                "parse-imports-exports": "^0.2.4"
+            },
+            "engines": {
+                "node": ">= 20"
+            },
+            "peerDependencies": {
+                "@vue/compiler-sfc": "3.x",
+                "prettier": "2.x - 3.x",
+                "prettier-plugin-ember-template-tag": ">= 2.0.0",
+                "prettier-plugin-svelte": "3.x",
+                "svelte": "4.x || 5.x"
+            },
+            "peerDependenciesMeta": {
+                "@vue/compiler-sfc": {
+                    "optional": true
+                },
+                "prettier-plugin-ember-template-tag": {
+                    "optional": true
+                },
+                "prettier-plugin-svelte": {
+                    "optional": true
+                },
+                "svelte": {
+                    "optional": true
+                }
+            }
+        },
+        "node_modules/@tybys/wasm-util": {
+            "version": "0.10.3",
+            "resolved": "https://registry.npmjs.org/@tybys/wasm-util/-/wasm-util-0.10.3.tgz",
+            "integrity": "sha512-F3fo1MYrRJYL3zER0OUOmkutjr1Vp23m7OsSgp7nq4SP6OqX6C/56XFIPAl5bt3zaBRjmW7SGz3u/6LwFpYcOg==",
+            "license": "MIT",
+            "optional": true,
+            "dependencies": {
+                "tslib": "^2.4.0"
+            }
+        },
+        "node_modules/@types/d3-array": {
+            "version": "3.2.2",
+            "resolved": "https://registry.npmjs.org/@types/d3-array/-/d3-array-3.2.2.tgz",
+            "integrity": "sha512-hOLWVbm7uRza0BYXpIIW5pxfrKe0W+D5lrFiAEYR+pb6w3N2SwSMaJbXdUfSEv+dT4MfHBLtn5js0LAWaO6otw==",
+            "license": "MIT"
+        },
+        "node_modules/@types/d3-color": {
+            "version": "3.1.3",
+            "resolved": "https://registry.npmjs.org/@types/d3-color/-/d3-color-3.1.3.tgz",
+            "integrity": "sha512-iO90scth9WAbmgv7ogoq57O9YpKmFBbmoEoCHDB2xMBY0+/KVrqAaCDyCE16dUspeOvIxFFRI+0sEtqDqy2b4A==",
+            "license": "MIT"
+        },
+        "node_modules/@types/d3-ease": {
+            "version": "3.0.2",
+            "resolved": "https://registry.npmjs.org/@types/d3-ease/-/d3-ease-3.0.2.tgz",
+            "integrity": "sha512-NcV1JjO5oDzoK26oMzbILE6HW7uVXOHLQvHshBUW4UMdZGfiY6v5BeQwh9a9tCzv+CeefZQHJt5SRgK154RtiA==",
+            "license": "MIT"
+        },
+        "node_modules/@types/d3-interpolate": {
+            "version": "3.0.4",
+            "resolved": "https://registry.npmjs.org/@types/d3-interpolate/-/d3-interpolate-3.0.4.tgz",
+            "integrity": "sha512-mgLPETlrpVV1YRJIglr4Ez47g7Yxjl1lj7YKsiMCb27VJH9W8NVM6Bb9d8kkpG/uAQS5AmbA48q2IAolKKo1MA==",
+            "license": "MIT",
+            "dependencies": {
+                "@types/d3-color": "*"
+            }
+        },
+        "node_modules/@types/d3-path": {
+            "version": "3.1.1",
+            "resolved": "https://registry.npmjs.org/@types/d3-path/-/d3-path-3.1.1.tgz",
+            "integrity": "sha512-VMZBYyQvbGmWyWVea0EHs/BwLgxc+MKi1zLDCONksozI4YJMcTt8ZEuIR4Sb1MMTE8MMW49v0IwI5+b7RmfWlg==",
+            "license": "MIT"
+        },
+        "node_modules/@types/d3-scale": {
+            "version": "4.0.9",
+            "resolved": "https://registry.npmjs.org/@types/d3-scale/-/d3-scale-4.0.9.tgz",
+            "integrity": "sha512-dLmtwB8zkAeO/juAMfnV+sItKjlsw2lKdZVVy6LRr0cBmegxSABiLEpGVmSJJ8O08i4+sGR6qQtb6WtuwJdvVw==",
+            "license": "MIT",
+            "dependencies": {
+                "@types/d3-time": "*"
+            }
+        },
+        "node_modules/@types/d3-shape": {
+            "version": "3.1.8",
+            "resolved": "https://registry.npmjs.org/@types/d3-shape/-/d3-shape-3.1.8.tgz",
+            "integrity": "sha512-lae0iWfcDeR7qt7rA88BNiqdvPS5pFVPpo5OfjElwNaT2yyekbM0C9vK+yqBqEmHr6lDkRnYNoTBYlAgJa7a4w==",
+            "license": "MIT",
+            "dependencies": {
+                "@types/d3-path": "*"
+            }
+        },
+        "node_modules/@types/d3-time": {
+            "version": "3.0.4",
+            "resolved": "https://registry.npmjs.org/@types/d3-time/-/d3-time-3.0.4.tgz",
+            "integrity": "sha512-yuzZug1nkAAaBlBBikKZTgzCeA+k1uy4ZFwWANOfKw5z5LRhV0gNA7gNkKm7HoK+HRN0wX3EkxGk0fpbWhmB7g==",
+            "license": "MIT"
+        },
+        "node_modules/@types/d3-timer": {
+            "version": "3.0.2",
+            "resolved": "https://registry.npmjs.org/@types/d3-timer/-/d3-timer-3.0.2.tgz",
+            "integrity": "sha512-Ps3T8E8dZDam6fUyNiMkekK3XUsaUEik+idO9/YjPtfj2qruF8tFBXS7XhtE4iIXBLxhmLjP3SXpLhVf21I9Lw==",
+            "license": "MIT"
+        },
+        "node_modules/@types/debug": {
+            "version": "4.1.13",
+            "resolved": "https://registry.npmjs.org/@types/debug/-/debug-4.1.13.tgz",
+            "integrity": "sha512-KSVgmQmzMwPlmtljOomayoR89W4FynCAi3E8PPs7vmDVPe84hT+vGPKkJfThkmXs0x0jAaa9U8uW8bbfyS2fWw==",
+            "license": "MIT",
+            "dependencies": {
+                "@types/ms": "*"
+            }
+        },
+        "node_modules/@types/esrecurse": {
+            "version": "4.3.1",
+            "resolved": "https://registry.npmjs.org/@types/esrecurse/-/esrecurse-4.3.1.tgz",
+            "integrity": "sha512-xJBAbDifo5hpffDBuHl0Y8ywswbiAp/Wi7Y/GtAgSlZyIABppyurxVueOPE8LUQOxdlgi6Zqce7uoEpqNTeiUw==",
+            "dev": true,
+            "license": "MIT"
+        },
+        "node_modules/@types/estree": {
+            "version": "1.0.9",
+            "resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.9.tgz",
+            "integrity": "sha512-GhdPgy1el4/ImP05X05Uw4cw2/M93BCUmnEvWZNStlCzEKME4Fkk+YpoA5OiHNQmoS7Cafb8Xa3Pya8m1Qrzeg==",
+            "license": "MIT"
+        },
+        "node_modules/@types/estree-jsx": {
+            "version": "1.0.5",
+            "resolved": "https://registry.npmjs.org/@types/estree-jsx/-/estree-jsx-1.0.5.tgz",
+            "integrity": "sha512-52CcUVNFyfb1A2ALocQw/Dd1BQFNmSdkuC3BkZ6iqhdMfQz7JWOFRuJFloOzjk+6WijU56m9oKXFAXc7o3Towg==",
+            "license": "MIT",
+            "dependencies": {
+                "@types/estree": "*"
+            }
+        },
+        "node_modules/@types/hast": {
+            "version": "3.0.4",
+            "resolved": "https://registry.npmjs.org/@types/hast/-/hast-3.0.4.tgz",
+            "integrity": "sha512-WPs+bbQw5aCj+x6laNGWLH3wviHtoCv/P3+otBhbOhJgG8qtpdAMlTCxLtsTWA7LH1Oh/bFCHsBn0TPS5m30EQ==",
+            "license": "MIT",
+            "dependencies": {
+                "@types/unist": "*"
+            }
+        },
+        "node_modules/@types/json-schema": {
+            "version": "7.0.15",
+            "resolved": "https://registry.npmjs.org/@types/json-schema/-/json-schema-7.0.15.tgz",
+            "integrity": "sha512-5+fP8P8MFNC+AyZCDxrB2pkZFPGzqQWUzpSeuuVLvm8VMcorNYavBqoFcxK8bQz4Qsbn4oUEEem4wDLfcysGHA==",
+            "dev": true,
+            "license": "MIT"
+        },
+        "node_modules/@types/mdast": {
+            "version": "4.0.4",
+            "resolved": "https://registry.npmjs.org/@types/mdast/-/mdast-4.0.4.tgz",
+            "integrity": "sha512-kGaNbPh1k7AFzgpud/gMdvIm5xuECykRR+JnWKQno9TAXVa6WIVCGTPvYGekIDL4uwCZQSYbUxNBSb1aUo79oA==",
+            "license": "MIT",
+            "dependencies": {
+                "@types/unist": "*"
+            }
+        },
+        "node_modules/@types/ms": {
+            "version": "2.1.0",
+            "resolved": "https://registry.npmjs.org/@types/ms/-/ms-2.1.0.tgz",
+            "integrity": "sha512-GsCCIZDE/p3i96vtEqx+7dBUGXrc7zeSK3wwPHIaRThS+9OhWIXRqzs4d6k1SVU8g91DrNRWxWUGhp5KXQb2VA==",
+            "license": "MIT"
+        },
+        "node_modules/@types/node": {
+            "version": "25.9.4",
+            "resolved": "https://registry.npmjs.org/@types/node/-/node-25.9.4.tgz",
+            "integrity": "sha512-dszCsrKb5U7ZsVZBWiHFklTloVl0mSEnWH/iZXfZUlI4rzCUnsvGmgqfuVRHL54ugE7/wRuxEIXRa2iMZ+BG6g==",
+            "devOptional": true,
+            "license": "MIT",
+            "peer": true,
+            "dependencies": {
+                "undici-types": ">=7.24.0 <7.24.7"
+            }
+        },
+        "node_modules/@types/react": {
+            "version": "19.2.17",
+            "resolved": "https://registry.npmjs.org/@types/react/-/react-19.2.17.tgz",
+            "integrity": "sha512-MXfmqaVPEVgkBT/aY0aGCkRWWtByiYQXo3xdQ8r5RzuFrPiRn8Gar2tQdXSUQ2GKV3bkXckek89V8wQBY2Q/Aw==",
+            "license": "MIT",
+            "peer": true,
+            "dependencies": {
+                "csstype": "^3.2.2"
+            }
+        },
+        "node_modules/@types/react-dom": {
+            "version": "19.2.3",
+            "resolved": "https://registry.npmjs.org/@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/@types/unist": {
+            "version": "3.0.3",
+            "resolved": "https://registry.npmjs.org/@types/unist/-/unist-3.0.3.tgz",
+            "integrity": "sha512-ko/gIFJRv177XgZsZcBwnqJN5x/Gien8qNOn0D5bQU/zAzVf9Zt3BlcUiLqhV9y4ARk0GbT3tnUiPNgnTXzc/Q==",
+            "license": "MIT"
+        },
+        "node_modules/@types/use-sync-external-store": {
+            "version": "0.0.6",
+            "resolved": "https://registry.npmjs.org/@types/use-sync-external-store/-/use-sync-external-store-0.0.6.tgz",
+            "integrity": "sha512-zFDAD+tlpf2r4asuHEj0XH6pY6i0g5NeAHPn+15wk3BV6JA69eERFXC1gyGThDkVa1zCyKr5jox1+2LbV/AMLg==",
+            "license": "MIT"
+        },
+        "node_modules/@typescript-eslint/eslint-plugin": {
+            "version": "8.62.1",
+            "resolved": "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-8.62.1.tgz",
+            "integrity": "sha512-4EQM77WgVNxj7OkL/5b/D/xZsw00G577+UriYTC7JF5opcF3T2AuoeY7ueLaZgSVjSgCS6yOAJB5bRGLPSJUzA==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "@eslint-community/regexpp": "^4.12.2",
+                "@typescript-eslint/scope-manager": "8.62.1",
+                "@typescript-eslint/type-utils": "8.62.1",
+                "@typescript-eslint/utils": "8.62.1",
+                "@typescript-eslint/visitor-keys": "8.62.1",
+                "ignore": "^7.0.5",
+                "natural-compare": "^1.4.0",
+                "ts-api-utils": "^2.5.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.62.1",
+                "eslint": "^8.57.0 || ^9.0.0 || ^10.0.0",
+                "typescript": ">=4.8.4 <6.1.0"
+            }
+        },
+        "node_modules/@typescript-eslint/eslint-plugin/node_modules/ignore": {
+            "version": "7.0.5",
+            "resolved": "https://registry.npmjs.org/ignore/-/ignore-7.0.5.tgz",
+            "integrity": "sha512-Hs59xBNfUIunMFgWAbGX5cq6893IbWg4KnrjbYwX3tx0ztorVgTDA6B2sxf8ejHJ4wz8BqGUMYlnzNBer5NvGg==",
+            "dev": true,
+            "license": "MIT",
+            "engines": {
+                "node": ">= 4"
+            }
+        },
+        "node_modules/@typescript-eslint/parser": {
+            "version": "8.62.1",
+            "resolved": "https://registry.npmjs.org/@typescript-eslint/parser/-/parser-8.62.1.tgz",
+            "integrity": "sha512-sPhE4iHuJDSvoAiec+Ro8JyXw8f0ql13HFR82P99nCm9GwTEKG0KYLvDe6REk8BCXuit6vJAv/Yxg5ABaNS2rA==",
+            "dev": true,
+            "license": "MIT",
+            "peer": true,
+            "dependencies": {
+                "@typescript-eslint/scope-manager": "8.62.1",
+                "@typescript-eslint/types": "8.62.1",
+                "@typescript-eslint/typescript-estree": "8.62.1",
+                "@typescript-eslint/visitor-keys": "8.62.1",
+                "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.1.0"
+            }
+        },
+        "node_modules/@typescript-eslint/project-service": {
+            "version": "8.62.1",
+            "resolved": "https://registry.npmjs.org/@typescript-eslint/project-service/-/project-service-8.62.1.tgz",
+            "integrity": "sha512-yQ3RgY5RkSBpsNS1Bx/JQEcA24FOSdfGktoyprAr5u18390UQdtVcfnEv4nIrIshNnavlVyZBKxQwT1fIAE6cg==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "@typescript-eslint/tsconfig-utils": "^8.62.1",
+                "@typescript-eslint/types": "^8.62.1",
+                "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.1.0"
+            }
+        },
+        "node_modules/@typescript-eslint/scope-manager": {
+            "version": "8.62.1",
+            "resolved": "https://registry.npmjs.org/@typescript-eslint/scope-manager/-/scope-manager-8.62.1.tgz",
+            "integrity": "sha512-r4d249KbQ1SFdpeStvob8Ih6aPPIzfqllPVOtvhve6ZcpuVcYo5/7zUWckKpHE7StASX4kTKZTLf0WQm/wPkcg==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "@typescript-eslint/types": "8.62.1",
+                "@typescript-eslint/visitor-keys": "8.62.1"
+            },
+            "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.62.1",
+            "resolved": "https://registry.npmjs.org/@typescript-eslint/tsconfig-utils/-/tsconfig-utils-8.62.1.tgz",
+            "integrity": "sha512-xadytJqX9vJVQ2fdQjkcIVigwaOJNWkpjdLt6cEQ+xPnrI1fkp+/jZE/I97k9KUjqtpd25i0HeyZf3T6dutv2g==",
+            "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.1.0"
+            }
+        },
+        "node_modules/@typescript-eslint/type-utils": {
+            "version": "8.62.1",
+            "resolved": "https://registry.npmjs.org/@typescript-eslint/type-utils/-/type-utils-8.62.1.tgz",
+            "integrity": "sha512-aXM5xlqXiTxPibXB93cLAURfT3rlizf7uMXISCXy66Isr/9hISJx3yDsKl0L7lKa51b8JpFuNKby0/O0pEm9jg==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "@typescript-eslint/types": "8.62.1",
+                "@typescript-eslint/typescript-estree": "8.62.1",
+                "@typescript-eslint/utils": "8.62.1",
+                "debug": "^4.4.3",
+                "ts-api-utils": "^2.5.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.1.0"
+            }
+        },
+        "node_modules/@typescript-eslint/types": {
+            "version": "8.62.1",
+            "resolved": "https://registry.npmjs.org/@typescript-eslint/types/-/types-8.62.1.tgz",
+            "integrity": "sha512-ooCzJFaf+Hg+uG6fA3NRFGuFjlfNlDhBthbv4ZPU/0elCAFUfnyXUvf/WOpHz/jYwSmvU2GkR2LtyUfy1AxZ1Q==",
+            "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.62.1",
+            "resolved": "https://registry.npmjs.org/@typescript-eslint/typescript-estree/-/typescript-estree-8.62.1.tgz",
+            "integrity": "sha512-xMcW9oP9u7fAMXYs9A65CVmtLQe2r//oXINHfi8HV+oiqhih17sbLdhXr4540YWlgpDKQdY854OL5ZrdCiQsAA==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "@typescript-eslint/project-service": "8.62.1",
+                "@typescript-eslint/tsconfig-utils": "8.62.1",
+                "@typescript-eslint/types": "8.62.1",
+                "@typescript-eslint/visitor-keys": "8.62.1",
+                "debug": "^4.4.3",
+                "minimatch": "^10.2.2",
+                "semver": "^7.7.3",
+                "tinyglobby": "^0.2.15",
+                "ts-api-utils": "^2.5.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.1.0"
+            }
+        },
+        "node_modules/@typescript-eslint/typescript-estree/node_modules/balanced-match": {
+            "version": "4.0.4",
+            "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-4.0.4.tgz",
+            "integrity": "sha512-BLrgEcRTwX2o6gGxGOCNyMvGSp35YofuYzw9h1IMTRmKqttAZZVU67bdb9Pr2vUHA8+j3i2tJfjO6C6+4myGTA==",
+            "dev": true,
+            "license": "MIT",
+            "engines": {
+                "node": "18 || 20 || >=22"
+            }
+        },
+        "node_modules/@typescript-eslint/typescript-estree/node_modules/brace-expansion": {
+            "version": "5.0.7",
+            "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-5.0.7.tgz",
+            "integrity": "sha512-7oFy703dxfY3/NLxC1fh2SUCQ0H9rmAY+5EpDVfXjUTTs+HEwR2nYaqLv+GWcTsumwxPfiz6CzCNkwXwBUwqCA==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "balanced-match": "^4.0.2"
+            },
+            "engines": {
+                "node": "18 || 20 || >=22"
+            }
+        },
+        "node_modules/@typescript-eslint/typescript-estree/node_modules/minimatch": {
+            "version": "10.2.5",
+            "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-10.2.5.tgz",
+            "integrity": "sha512-MULkVLfKGYDFYejP07QOurDLLQpcjk7Fw+7jXS2R2czRQzR56yHRveU5NDJEOviH+hETZKSkIk5c+T23GjFUMg==",
+            "dev": true,
+            "license": "BlueOak-1.0.0",
+            "dependencies": {
+                "brace-expansion": "^5.0.5"
+            },
+            "engines": {
+                "node": "18 || 20 || >=22"
+            },
+            "funding": {
+                "url": "https://github.com/sponsors/isaacs"
+            }
+        },
+        "node_modules/@typescript-eslint/utils": {
+            "version": "8.62.1",
+            "resolved": "https://registry.npmjs.org/@typescript-eslint/utils/-/utils-8.62.1.tgz",
+            "integrity": "sha512-sHtbPfuKNZCG+ih8SyjjucqRntSVmp8XgL5u6o9mAhiSn8ds5o/M/XdM0abweme2Tln3szOstOrZ9OXitvPh0g==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "@eslint-community/eslint-utils": "^4.9.1",
+                "@typescript-eslint/scope-manager": "8.62.1",
+                "@typescript-eslint/types": "8.62.1",
+                "@typescript-eslint/typescript-estree": "8.62.1"
+            },
+            "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.1.0"
+            }
+        },
+        "node_modules/@typescript-eslint/visitor-keys": {
+            "version": "8.62.1",
+            "resolved": "https://registry.npmjs.org/@typescript-eslint/visitor-keys/-/visitor-keys-8.62.1.tgz",
+            "integrity": "sha512-4g3BLxfdTMy8iZG0MaBkadnlRrCJ74cQiFbyEVMrkwIoqdyaXXQM22cotDvrl4x28wgIZ9rEJRoM+mmhSJpJ1g==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "@typescript-eslint/types": "8.62.1",
+                "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/@uiw/codemirror-extensions-basic-setup": {
+            "version": "4.25.10",
+            "resolved": "https://registry.npmjs.org/@uiw/codemirror-extensions-basic-setup/-/codemirror-extensions-basic-setup-4.25.10.tgz",
+            "integrity": "sha512-P3vytLlpE62KYSWrMUnwDCv2lvaQDuDZzyj03mHntuHo5bSl34fRZpjTY3kQTPGuXHxkGSYpoPFFj+hMTqaaMQ==",
+            "license": "MIT",
+            "dependencies": {
+                "@codemirror/autocomplete": "^6.0.0",
+                "@codemirror/commands": "^6.0.0",
+                "@codemirror/language": "^6.0.0",
+                "@codemirror/lint": "^6.0.0",
+                "@codemirror/search": "^6.0.0",
+                "@codemirror/state": "^6.0.0",
+                "@codemirror/view": "^6.0.0"
+            },
+            "funding": {
+                "url": "https://jaywcjlove.github.io/#/sponsor"
+            },
+            "peerDependencies": {
+                "@codemirror/autocomplete": ">=6.0.0",
+                "@codemirror/commands": ">=6.0.0",
+                "@codemirror/language": ">=6.0.0",
+                "@codemirror/lint": ">=6.0.0",
+                "@codemirror/search": ">=6.0.0",
+                "@codemirror/state": ">=6.0.0",
+                "@codemirror/view": ">=6.0.0"
+            }
+        },
+        "node_modules/@uiw/codemirror-theme-github": {
+            "version": "4.25.10",
+            "resolved": "https://registry.npmjs.org/@uiw/codemirror-theme-github/-/codemirror-theme-github-4.25.10.tgz",
+            "integrity": "sha512-iMM2QT4FaebJMO4W7lXmxNkRPIjKzgY26wL0QG0Ugy0gzsnxoNz4zgNeFIblPA8rvrN3vOIhNNh4nk9UOlFKxA==",
+            "license": "MIT",
+            "dependencies": {
+                "@uiw/codemirror-themes": "4.25.10"
+            },
+            "funding": {
+                "url": "https://jaywcjlove.github.io/#/sponsor"
+            }
+        },
+        "node_modules/@uiw/codemirror-themes": {
+            "version": "4.25.10",
+            "resolved": "https://registry.npmjs.org/@uiw/codemirror-themes/-/codemirror-themes-4.25.10.tgz",
+            "integrity": "sha512-Fqiz1HIuDlDftcL+/O53V333UOH6MqQ84VbiQB5egn6u+uDwAqACp1FrdAoi4wgpR3b3TGW4Gr0wIYcrJSSz1A==",
+            "license": "MIT",
+            "dependencies": {
+                "@codemirror/language": "^6.0.0",
+                "@codemirror/state": "^6.0.0",
+                "@codemirror/view": "^6.0.0"
+            },
+            "funding": {
+                "url": "https://jaywcjlove.github.io/#/sponsor"
+            },
+            "peerDependencies": {
+                "@codemirror/language": ">=6.0.0",
+                "@codemirror/state": ">=6.0.0",
+                "@codemirror/view": ">=6.0.0"
+            }
+        },
+        "node_modules/@uiw/react-codemirror": {
+            "version": "4.25.10",
+            "resolved": "https://registry.npmjs.org/@uiw/react-codemirror/-/react-codemirror-4.25.10.tgz",
+            "integrity": "sha512-DzgSMwM5qzB7v1FIb4gEeriYt67iiay756/HIOM9mAbeOVK0MO7rqefHf0O5c0269pJKMW7AH9FjclExD23V9w==",
+            "license": "MIT",
+            "dependencies": {
+                "@babel/runtime": "^7.18.6",
+                "@codemirror/commands": "^6.1.0",
+                "@codemirror/state": "^6.1.1",
+                "@codemirror/theme-one-dark": "^6.0.0",
+                "@uiw/codemirror-extensions-basic-setup": "4.25.10",
+                "codemirror": "^6.0.0"
+            },
+            "funding": {
+                "url": "https://jaywcjlove.github.io/#/sponsor"
+            },
+            "peerDependencies": {
+                "@babel/runtime": ">=7.11.0",
+                "@codemirror/state": ">=6.0.0",
+                "@codemirror/theme-one-dark": ">=6.0.0",
+                "@codemirror/view": ">=6.0.0",
+                "codemirror": ">=6.0.0",
+                "react": ">=17.0.0",
+                "react-dom": ">=17.0.0"
+            }
+        },
+        "node_modules/@ungap/structured-clone": {
+            "version": "1.3.2",
+            "resolved": "https://registry.npmjs.org/@ungap/structured-clone/-/structured-clone-1.3.2.tgz",
+            "integrity": "sha512-5jsZFwgR5rTdKwidH9Qmat75RKwqfpKlWWB1frDkljN127mwqBu8K0PYo7/hFpF03IEJpfVPpCQDY/eDx3iHvA==",
+            "license": "ISC"
+        },
+        "node_modules/@untitledui/file-icons": {
+            "version": "0.0.9",
+            "resolved": "https://registry.npmjs.org/@untitledui/file-icons/-/file-icons-0.0.9.tgz",
+            "integrity": "sha512-wz3btNnSSv2hTujgyxEFL21oyjPtGTj3osU8ZEMe8nwdlmLQEILLe96NMg9b1ciiOC5UOWNDeYIt7IfxEM6qtg==",
+            "license": "MIT",
+            "peerDependencies": {
+                "react": ">= 18"
+            }
+        },
+        "node_modules/@untitledui/icons": {
+            "version": "0.0.22",
+            "resolved": "https://registry.npmjs.org/@untitledui/icons/-/icons-0.0.22.tgz",
+            "integrity": "sha512-lEUdk2Ni7SocXMjIokJDoBeECzmZO1qAIuZc+91rAqwSMln0CKRnk+r2dC2TJ9ccION/1ZFed2fIeKvAEAs0lQ==",
+            "license": "MIT",
+            "peerDependencies": {
+                "react": ">= 16"
+            }
+        },
+        "node_modules/@vitejs/plugin-react": {
+            "version": "6.0.3",
+            "resolved": "https://registry.npmjs.org/@vitejs/plugin-react/-/plugin-react-6.0.3.tgz",
+            "integrity": "sha512-vmFvco5/QuC2f9Oj+wTk0+9XeDFkHxSamwZKYc7MxYwKICfvUvlMhqKI0VuICPltGqh1neqBKDvO4kes1ya8vg==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "@rolldown/pluginutils": "^1.0.1"
+            },
+            "engines": {
+                "node": "^20.19.0 || >=22.12.0"
+            },
+            "peerDependencies": {
+                "@rolldown/plugin-babel": "^0.1.7 || ^0.2.0",
+                "babel-plugin-react-compiler": "^1.0.0",
+                "vite": "^8.0.0"
+            },
+            "peerDependenciesMeta": {
+                "@rolldown/plugin-babel": {
+                    "optional": true
+                },
+                "babel-plugin-react-compiler": {
+                    "optional": true
+                }
+            }
+        },
+        "node_modules/acorn": {
+            "version": "8.17.0",
+            "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.17.0.tgz",
+            "integrity": "sha512-xRQbDb9BnwDafYNn6Vwl839DYVjqXYb1XVGtWAZ1kcDc6iwAL4hg3B1dZlRiuENFeO2H53gFG3in621AdERVAg==",
+            "dev": true,
+            "license": "MIT",
+            "peer": true,
+            "bin": {
+                "acorn": "bin/acorn"
+            },
+            "engines": {
+                "node": ">=0.4.0"
+            }
+        },
+        "node_modules/acorn-jsx": {
+            "version": "5.3.2",
+            "resolved": "https://registry.npmjs.org/acorn-jsx/-/acorn-jsx-5.3.2.tgz",
+            "integrity": "sha512-rq9s+JNhf0IChjtDXxllJ7g41oZk5SlXtp0LHwyA5cejwn7vKmKp4pPri6YEePv2PU65sAsegbXtIinmDFDXgQ==",
+            "dev": true,
+            "license": "MIT",
+            "peerDependencies": {
+                "acorn": "^6.0.0 || ^7.0.0 || ^8.0.0"
+            }
+        },
+        "node_modules/ajv": {
+            "version": "6.15.0",
+            "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.15.0.tgz",
+            "integrity": "sha512-fgFx7Hfoq60ytK2c7DhnF8jIvzYgOMxfugjLOSMHjLIPgenqa7S7oaagATUq99mV6IYvN2tRmC0wnTYX6iPbMw==",
+            "dev": true,
+            "license": "MIT",
+            "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/aria-hidden": {
+            "version": "1.2.6",
+            "resolved": "https://registry.npmjs.org/aria-hidden/-/aria-hidden-1.2.6.tgz",
+            "integrity": "sha512-ik3ZgC9dY/lYVVM++OISsaYDeg1tb0VtP5uL3ouh1koGOaUMDPpbFIei4JkFimWUFPn90sbMNMXQAIVOlnYKJA==",
+            "license": "MIT",
+            "dependencies": {
+                "tslib": "^2.0.0"
+            },
+            "engines": {
+                "node": ">=10"
+            }
+        },
+        "node_modules/bail": {
+            "version": "2.0.2",
+            "resolved": "https://registry.npmjs.org/bail/-/bail-2.0.2.tgz",
+            "integrity": "sha512-0xO6mYd7JB2YesxDKplafRpsiOzPt9V02ddPCLbY1xYGPOX24NTyN50qnUxgCPcSoYMhKpAuBTjQoRZCAkUDRw==",
+            "license": "MIT",
+            "funding": {
+                "type": "github",
+                "url": "https://github.com/sponsors/wooorm"
+            }
+        },
+        "node_modules/balanced-match": {
+            "version": "1.0.2",
+            "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.2.tgz",
+            "integrity": "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==",
+            "dev": true,
+            "license": "MIT"
+        },
+        "node_modules/brace-expansion": {
+            "version": "2.1.1",
+            "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-2.1.1.tgz",
+            "integrity": "sha512-WR1cURNjuvBLMZBMbqM0UoE+WAfdUcEV1ccD8PVBVOI+Z3ND4+SZbN8RsfT2bMuG1qwz5RFvPukSZm5fF2D5eA==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "balanced-match": "^1.0.0"
+            }
+        },
+        "node_modules/ccount": {
+            "version": "2.0.1",
+            "resolved": "https://registry.npmjs.org/ccount/-/ccount-2.0.1.tgz",
+            "integrity": "sha512-eyrF0jiFpY+3drT6383f1qhkbGsLSifNAjA61IUjZjmLCWjItY6LB9ft9YhoDgwfmclB2zhu51Lc7+95b8NRAg==",
+            "license": "MIT",
+            "funding": {
+                "type": "github",
+                "url": "https://github.com/sponsors/wooorm"
+            }
+        },
+        "node_modules/character-entities": {
+            "version": "2.0.2",
+            "resolved": "https://registry.npmjs.org/character-entities/-/character-entities-2.0.2.tgz",
+            "integrity": "sha512-shx7oQ0Awen/BRIdkjkvz54PnEEI/EjwXDSIZp86/KKdbafHh1Df/RYGBhn4hbe2+uKC9FnT5UCEdyPz3ai9hQ==",
+            "license": "MIT",
+            "funding": {
+                "type": "github",
+                "url": "https://github.com/sponsors/wooorm"
+            }
+        },
+        "node_modules/character-entities-html4": {
+            "version": "2.1.0",
+            "resolved": "https://registry.npmjs.org/character-entities-html4/-/character-entities-html4-2.1.0.tgz",
+            "integrity": "sha512-1v7fgQRj6hnSwFpq1Eu0ynr/CDEw0rXo2B61qXrLNdHZmPKgb7fqS1a2JwF0rISo9q77jDI8VMEHoApn8qDoZA==",
+            "license": "MIT",
+            "funding": {
+                "type": "github",
+                "url": "https://github.com/sponsors/wooorm"
+            }
+        },
+        "node_modules/character-entities-legacy": {
+            "version": "3.0.0",
+            "resolved": "https://registry.npmjs.org/character-entities-legacy/-/character-entities-legacy-3.0.0.tgz",
+            "integrity": "sha512-RpPp0asT/6ufRm//AJVwpViZbGM/MkjQFxJccQRHmISF/22NBtsHqAWmL+/pmkPWoIUJdWyeVleTl1wydHATVQ==",
+            "license": "MIT",
+            "funding": {
+                "type": "github",
+                "url": "https://github.com/sponsors/wooorm"
+            }
+        },
+        "node_modules/character-reference-invalid": {
+            "version": "2.0.1",
+            "resolved": "https://registry.npmjs.org/character-reference-invalid/-/character-reference-invalid-2.0.1.tgz",
+            "integrity": "sha512-iBZ4F4wRbyORVsu0jPV7gXkOsGYjGHPmAyv+HiHG8gi5PtC9KI2j1+v8/tlibRvjoWX027ypmG/n0HtO5t7unw==",
+            "license": "MIT",
+            "funding": {
+                "type": "github",
+                "url": "https://github.com/sponsors/wooorm"
+            }
+        },
+        "node_modules/client-only": {
+            "version": "0.0.1",
+            "resolved": "https://registry.npmjs.org/client-only/-/client-only-0.0.1.tgz",
+            "integrity": "sha512-IV3Ou0jSMzZrd3pZ48nLkT9DA7Ag1pnPzaiQhpW7c3RbcqqzvzzVu+L8gfqMp/8IM2MQtSiqaCxrrcfu8I8rMA==",
+            "license": "MIT"
+        },
+        "node_modules/clsx": {
+            "version": "2.1.1",
+            "resolved": "https://registry.npmjs.org/clsx/-/clsx-2.1.1.tgz",
+            "integrity": "sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA==",
+            "license": "MIT",
+            "engines": {
+                "node": ">=6"
+            }
+        },
+        "node_modules/codemirror": {
+            "version": "6.0.2",
+            "resolved": "https://registry.npmjs.org/codemirror/-/codemirror-6.0.2.tgz",
+            "integrity": "sha512-VhydHotNW5w1UGK0Qj96BwSk/Zqbp9WbnyK2W/eVMv4QyF41INRGpjUhFJY7/uDNuudSc33a/PKr4iDqRduvHw==",
+            "license": "MIT",
+            "dependencies": {
+                "@codemirror/autocomplete": "^6.0.0",
+                "@codemirror/commands": "^6.0.0",
+                "@codemirror/language": "^6.0.0",
+                "@codemirror/lint": "^6.0.0",
+                "@codemirror/search": "^6.0.0",
+                "@codemirror/state": "^6.0.0",
+                "@codemirror/view": "^6.0.0"
+            }
+        },
+        "node_modules/comma-separated-tokens": {
+            "version": "2.0.3",
+            "resolved": "https://registry.npmjs.org/comma-separated-tokens/-/comma-separated-tokens-2.0.3.tgz",
+            "integrity": "sha512-Fu4hJdvzeylCfQPp9SGWidpzrMs7tTrlu6Vb8XGaRGck8QSNZJJp538Wrb60Lax4fPwR64ViY468OIUTbRlGZg==",
+            "license": "MIT",
+            "funding": {
+                "type": "github",
+                "url": "https://github.com/sponsors/wooorm"
+            }
+        },
+        "node_modules/cookie": {
+            "version": "1.1.1",
+            "resolved": "https://registry.npmjs.org/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/crelt": {
+            "version": "1.0.7",
+            "resolved": "https://registry.npmjs.org/crelt/-/crelt-1.0.7.tgz",
+            "integrity": "sha512-aK6BbWfhf4U/wCcLHKPJl/xa6VkVstRaPywWtMKGwuOLc/wZTyQYuoxgvZnNsBvv7Kg3YTBQYYBCggcviQczuA==",
+            "license": "MIT"
+        },
+        "node_modules/cross-spawn": {
+            "version": "7.0.6",
+            "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.6.tgz",
+            "integrity": "sha512-uV2QOWP2nWzsy2aMp8aRibhi9dlzF5Hgh5SHaB9OiTGEyDTiJJyx0uy51QXdyWbtAHNua4XJzUKca3OzKUd3vA==",
+            "dev": true,
+            "license": "MIT",
+            "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": "https://registry.npmjs.org/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": "https://registry.npmjs.org/csstype/-/csstype-3.2.3.tgz",
+            "integrity": "sha512-z1HGKcYy2xA8AGQfwrn0PAy+PB7X/GSj3UVJW9qKyn43xWa+gl5nXmU4qqLMRzWVLFC8KusUX8T/0kCiOYpAIQ==",
+            "license": "MIT"
+        },
+        "node_modules/d3-array": {
+            "version": "3.2.4",
+            "resolved": "https://registry.npmjs.org/d3-array/-/d3-array-3.2.4.tgz",
+            "integrity": "sha512-tdQAmyA18i4J7wprpYq8ClcxZy3SC31QMeByyCFyRt7BVHdREQZ5lpzoe5mFEYZUWe+oq8HBvk9JjpibyEV4Jg==",
+            "license": "ISC",
+            "dependencies": {
+                "internmap": "1 - 2"
+            },
+            "engines": {
+                "node": ">=12"
+            }
+        },
+        "node_modules/d3-color": {
+            "version": "3.1.0",
+            "resolved": "https://registry.npmjs.org/d3-color/-/d3-color-3.1.0.tgz",
+            "integrity": "sha512-zg/chbXyeBtMQ1LbD/WSoW2DpC3I0mpmPdW+ynRTj/x2DAWYrIY7qeZIHidozwV24m4iavr15lNwIwLxRmOxhA==",
+            "license": "ISC",
+            "engines": {
+                "node": ">=12"
+            }
+        },
+        "node_modules/d3-ease": {
+            "version": "3.0.1",
+            "resolved": "https://registry.npmjs.org/d3-ease/-/d3-ease-3.0.1.tgz",
+            "integrity": "sha512-wR/XK3D3XcLIZwpbvQwQ5fK+8Ykds1ip7A2Txe0yxncXSdq1L9skcG7blcedkOX+ZcgxGAmLX1FrRGbADwzi0w==",
+            "license": "BSD-3-Clause",
+            "engines": {
+                "node": ">=12"
+            }
+        },
+        "node_modules/d3-format": {
+            "version": "3.1.2",
+            "resolved": "https://registry.npmjs.org/d3-format/-/d3-format-3.1.2.tgz",
+            "integrity": "sha512-AJDdYOdnyRDV5b6ArilzCPPwc1ejkHcoyFarqlPqT7zRYjhavcT3uSrqcMvsgh2CgoPbK3RCwyHaVyxYcP2Arg==",
+            "license": "ISC",
+            "engines": {
+                "node": ">=12"
+            }
+        },
+        "node_modules/d3-interpolate": {
+            "version": "3.0.1",
+            "resolved": "https://registry.npmjs.org/d3-interpolate/-/d3-interpolate-3.0.1.tgz",
+            "integrity": "sha512-3bYs1rOD33uo8aqJfKP3JWPAibgw8Zm2+L9vBKEHJ2Rg+viTR7o5Mmv5mZcieN+FRYaAOWX5SJATX6k1PWz72g==",
+            "license": "ISC",
+            "dependencies": {
+                "d3-color": "1 - 3"
+            },
+            "engines": {
+                "node": ">=12"
+            }
+        },
+        "node_modules/d3-path": {
+            "version": "3.1.0",
+            "resolved": "https://registry.npmjs.org/d3-path/-/d3-path-3.1.0.tgz",
+            "integrity": "sha512-p3KP5HCf/bvjBSSKuXid6Zqijx7wIfNW+J/maPs+iwR35at5JCbLUT0LzF1cnjbCHWhqzQTIN2Jpe8pRebIEFQ==",
+            "license": "ISC",
+            "engines": {
+                "node": ">=12"
+            }
+        },
+        "node_modules/d3-scale": {
+            "version": "4.0.2",
+            "resolved": "https://registry.npmjs.org/d3-scale/-/d3-scale-4.0.2.tgz",
+            "integrity": "sha512-GZW464g1SH7ag3Y7hXjf8RoUuAFIqklOAq3MRl4OaWabTFJY9PN/E1YklhXLh+OQ3fM9yS2nOkCoS+WLZ6kvxQ==",
+            "license": "ISC",
+            "dependencies": {
+                "d3-array": "2.10.0 - 3",
+                "d3-format": "1 - 3",
+                "d3-interpolate": "1.2.0 - 3",
+                "d3-time": "2.1.1 - 3",
+                "d3-time-format": "2 - 4"
+            },
+            "engines": {
+                "node": ">=12"
+            }
+        },
+        "node_modules/d3-shape": {
+            "version": "3.2.0",
+            "resolved": "https://registry.npmjs.org/d3-shape/-/d3-shape-3.2.0.tgz",
+            "integrity": "sha512-SaLBuwGm3MOViRq2ABk3eLoxwZELpH6zhl3FbAoJ7Vm1gofKx6El1Ib5z23NUEhF9AsGl7y+dzLe5Cw2AArGTA==",
+            "license": "ISC",
+            "dependencies": {
+                "d3-path": "^3.1.0"
+            },
+            "engines": {
+                "node": ">=12"
+            }
+        },
+        "node_modules/d3-time": {
+            "version": "3.1.0",
+            "resolved": "https://registry.npmjs.org/d3-time/-/d3-time-3.1.0.tgz",
+            "integrity": "sha512-VqKjzBLejbSMT4IgbmVgDjpkYrNWUYJnbCGo874u7MMKIWsILRX+OpX/gTk8MqjpT1A/c6HY2dCA77ZN0lkQ2Q==",
+            "license": "ISC",
+            "dependencies": {
+                "d3-array": "2 - 3"
+            },
+            "engines": {
+                "node": ">=12"
+            }
+        },
+        "node_modules/d3-time-format": {
+            "version": "4.1.0",
+            "resolved": "https://registry.npmjs.org/d3-time-format/-/d3-time-format-4.1.0.tgz",
+            "integrity": "sha512-dJxPBlzC7NugB2PDLwo9Q8JiTR3M3e4/XANkreKSUxF8vvXKqm1Yfq4Q5dl8budlunRVlUUaDUgFt7eA8D6NLg==",
+            "license": "ISC",
+            "dependencies": {
+                "d3-time": "1 - 3"
+            },
+            "engines": {
+                "node": ">=12"
+            }
+        },
+        "node_modules/d3-timer": {
+            "version": "3.0.1",
+            "resolved": "https://registry.npmjs.org/d3-timer/-/d3-timer-3.0.1.tgz",
+            "integrity": "sha512-ndfJ/JxxMd3nw31uyKoY2naivF+r29V+Lc0svZxe1JvvIRmi8hUsrMvdOwgS1o6uBHmiz91geQ0ylPP0aj1VUA==",
+            "license": "ISC",
+            "engines": {
+                "node": ">=12"
+            }
+        },
+        "node_modules/debug": {
+            "version": "4.4.3",
+            "resolved": "https://registry.npmjs.org/debug/-/debug-4.4.3.tgz",
+            "integrity": "sha512-RGwwWnwQvkVfavKVt22FGLw+xYSdzARwm0ru6DhTVA3umU5hZc28V3kO4stgYryrTlLpuvgI9GiijltAjNbcqA==",
+            "license": "MIT",
+            "dependencies": {
+                "ms": "^2.1.3"
+            },
+            "engines": {
+                "node": ">=6.0"
+            },
+            "peerDependenciesMeta": {
+                "supports-color": {
+                    "optional": true
+                }
+            }
+        },
+        "node_modules/decimal.js-light": {
+            "version": "2.5.1",
+            "resolved": "https://registry.npmjs.org/decimal.js-light/-/decimal.js-light-2.5.1.tgz",
+            "integrity": "sha512-qIMFpTMZmny+MMIitAB6D7iVPEorVw6YQRWkvarTkT4tBeSLLiHzcwj6q0MmYSFCiVpiqPJTJEYIrpcPzVEIvg==",
+            "license": "MIT"
+        },
+        "node_modules/decode-named-character-reference": {
+            "version": "1.3.0",
+            "resolved": "https://registry.npmjs.org/decode-named-character-reference/-/decode-named-character-reference-1.3.0.tgz",
+            "integrity": "sha512-GtpQYB283KrPp6nRw50q3U9/VfOutZOe103qlN7BPP6Ad27xYnOIWv4lPzo8HCAL+mMZofJ9KEy30fq6MfaK6Q==",
+            "license": "MIT",
+            "dependencies": {
+                "character-entities": "^2.0.0"
+            },
+            "funding": {
+                "type": "github",
+                "url": "https://github.com/sponsors/wooorm"
+            }
+        },
+        "node_modules/deep-is": {
+            "version": "0.1.4",
+            "resolved": "https://registry.npmjs.org/deep-is/-/deep-is-0.1.4.tgz",
+            "integrity": "sha512-oIPzksmTg4/MriiaYGO+okXDT7ztn/w3Eptv/+gSIdMdKsJo0u4CfYNFJPy+4SKMuCqGw2wxnA+URMg3t8a/bQ==",
+            "dev": true,
+            "license": "MIT"
+        },
+        "node_modules/dequal": {
+            "version": "2.0.3",
+            "resolved": "https://registry.npmjs.org/dequal/-/dequal-2.0.3.tgz",
+            "integrity": "sha512-0je+qPKHEMohvfRTCEo3CrPG6cAzAYgmzKyxRiYSSDkS6eGJdyVJm7WaYA5ECaAD9wLB2T4EEeymA5aFVcYXCA==",
+            "license": "MIT",
+            "engines": {
+                "node": ">=6"
+            }
+        },
+        "node_modules/detect-libc": {
+            "version": "2.1.2",
+            "resolved": "https://registry.npmjs.org/detect-libc/-/detect-libc-2.1.2.tgz",
+            "integrity": "sha512-Btj2BOOO83o3WyH59e8MgXsxEQVcarkUOpEYrubB0urwnN10yQ364rsiByU11nZlqWYZm05i/of7io4mzihBtQ==",
+            "license": "Apache-2.0",
+            "engines": {
+                "node": ">=8"
+            }
+        },
+        "node_modules/devlop": {
+            "version": "1.1.0",
+            "resolved": "https://registry.npmjs.org/devlop/-/devlop-1.1.0.tgz",
+            "integrity": "sha512-RWmIqhcFf1lRYBvNmr7qTNuyCt/7/ns2jbpp1+PalgE/rDQcBT0fioSMUpJ93irlUhC5hrg4cYqe6U+0ImW0rA==",
+            "license": "MIT",
+            "dependencies": {
+                "dequal": "^2.0.0"
+            },
+            "funding": {
+                "type": "github",
+                "url": "https://github.com/sponsors/wooorm"
+            }
+        },
+        "node_modules/embla-carousel": {
+            "version": "8.6.0",
+            "resolved": "https://registry.npmjs.org/embla-carousel/-/embla-carousel-8.6.0.tgz",
+            "integrity": "sha512-SjWyZBHJPbqxHOzckOfo8lHisEaJWmwd23XppYFYVh10bU66/Pn5tkVkbkCMZVdbUE5eTCI2nD8OyIP4Z+uwkA==",
+            "license": "MIT",
+            "peer": true
+        },
+        "node_modules/embla-carousel-react": {
+            "version": "8.6.0",
+            "resolved": "https://registry.npmjs.org/embla-carousel-react/-/embla-carousel-react-8.6.0.tgz",
+            "integrity": "sha512-0/PjqU7geVmo6F734pmPqpyHqiM99olvyecY7zdweCw+6tKEXnrE90pBiBbMMU8s5tICemzpQ3hi5EpxzGW+JA==",
+            "license": "MIT",
+            "dependencies": {
+                "embla-carousel": "8.6.0",
+                "embla-carousel-reactive-utils": "8.6.0"
+            },
+            "peerDependencies": {
+                "react": "^16.8.0 || ^17.0.1 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc"
+            }
+        },
+        "node_modules/embla-carousel-reactive-utils": {
+            "version": "8.6.0",
+            "resolved": "https://registry.npmjs.org/embla-carousel-reactive-utils/-/embla-carousel-reactive-utils-8.6.0.tgz",
+            "integrity": "sha512-fMVUDUEx0/uIEDM0Mz3dHznDhfX+znCCDCeIophYb1QGVM7YThSWX+wz11zlYwWFOr74b4QLGg0hrGPJeG2s4A==",
+            "license": "MIT",
+            "peerDependencies": {
+                "embla-carousel": "8.6.0"
+            }
+        },
+        "node_modules/enhanced-resolve": {
+            "version": "5.21.6",
+            "resolved": "https://registry.npmjs.org/enhanced-resolve/-/enhanced-resolve-5.21.6.tgz",
+            "integrity": "sha512-aNnGCvbJ/RIyWo1IuhNdVjnNF+EjH9wpzpNHt+ci/m9He9LJvUN8wrCcXjp9cWsGNAuvSpVFTx/vraAFQ8qGjQ==",
+            "license": "MIT",
+            "dependencies": {
+                "graceful-fs": "^4.2.4",
+                "tapable": "^2.3.3"
+            },
+            "engines": {
+                "node": ">=10.13.0"
+            }
+        },
+        "node_modules/es-toolkit": {
+            "version": "1.49.0",
+            "resolved": "https://registry.npmjs.org/es-toolkit/-/es-toolkit-1.49.0.tgz",
+            "integrity": "sha512-G5iZ6Pc/FNRY/soKZHC+TxGDD83rHUDXxzaWhGCX44vAv/tMs56WMusnm/KMNK+luUPsgA9U28cGr4RDlSzL2g==",
+            "license": "MIT",
+            "workspaces": [
+                "docs",
+                "benchmarks"
+            ]
+        },
+        "node_modules/escape-string-regexp": {
+            "version": "4.0.0",
+            "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-4.0.0.tgz",
+            "integrity": "sha512-TtpcNJ3XAzx3Gq8sWRzJaVajRs0uVxA2YAkdb1jm2YkPz4G6egUFAyA3n5vtEIZefPk5Wa4UXbKuS5fKkJWdgA==",
+            "dev": true,
+            "license": "MIT",
+            "engines": {
+                "node": ">=10"
+            },
+            "funding": {
+                "url": "https://github.com/sponsors/sindresorhus"
+            }
+        },
+        "node_modules/eslint": {
+            "version": "10.6.0",
+            "resolved": "https://registry.npmjs.org/eslint/-/eslint-10.6.0.tgz",
+            "integrity": "sha512-6lVbcqSodALYo+4ELD0heG6lFiFxnLMuLkiMi2qV8LMp54N8tE8FT1GMH+ev4Ti00nFjNze2+Su6DsV5OQW3Dg==",
+            "dev": true,
+            "license": "MIT",
+            "peer": true,
+            "workspaces": [
+                "packages/*"
+            ],
+            "dependencies": {
+                "@eslint-community/eslint-utils": "^4.8.0",
+                "@eslint-community/regexpp": "^4.12.2",
+                "@eslint/config-array": "^0.23.5",
+                "@eslint/config-helpers": "^0.6.0",
+                "@eslint/core": "^1.2.1",
+                "@eslint/plugin-kit": "^0.7.2",
+                "@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.2.0",
+                "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": "https://registry.npmjs.org/eslint-scope/-/eslint-scope-9.1.2.tgz",
+            "integrity": "sha512-xS90H51cKw0jltxmvmHy2Iai1LIqrfbw57b79w/J7MfvDfkIkFZ+kj6zC3BjtUwh150HsSSdxXZcsuv72miDFQ==",
+            "dev": true,
+            "license": "BSD-2-Clause",
+            "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": "https://registry.npmjs.org/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/eslint/node_modules/balanced-match": {
+            "version": "4.0.4",
+            "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-4.0.4.tgz",
+            "integrity": "sha512-BLrgEcRTwX2o6gGxGOCNyMvGSp35YofuYzw9h1IMTRmKqttAZZVU67bdb9Pr2vUHA8+j3i2tJfjO6C6+4myGTA==",
+            "dev": true,
+            "license": "MIT",
+            "engines": {
+                "node": "18 || 20 || >=22"
+            }
+        },
+        "node_modules/eslint/node_modules/brace-expansion": {
+            "version": "5.0.7",
+            "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-5.0.7.tgz",
+            "integrity": "sha512-7oFy703dxfY3/NLxC1fh2SUCQ0H9rmAY+5EpDVfXjUTTs+HEwR2nYaqLv+GWcTsumwxPfiz6CzCNkwXwBUwqCA==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "balanced-match": "^4.0.2"
+            },
+            "engines": {
+                "node": "18 || 20 || >=22"
+            }
+        },
+        "node_modules/eslint/node_modules/minimatch": {
+            "version": "10.2.5",
+            "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-10.2.5.tgz",
+            "integrity": "sha512-MULkVLfKGYDFYejP07QOurDLLQpcjk7Fw+7jXS2R2czRQzR56yHRveU5NDJEOviH+hETZKSkIk5c+T23GjFUMg==",
+            "dev": true,
+            "license": "BlueOak-1.0.0",
+            "dependencies": {
+                "brace-expansion": "^5.0.5"
+            },
+            "engines": {
+                "node": "18 || 20 || >=22"
+            },
+            "funding": {
+                "url": "https://github.com/sponsors/isaacs"
+            }
+        },
+        "node_modules/espree": {
+            "version": "11.2.0",
+            "resolved": "https://registry.npmjs.org/espree/-/espree-11.2.0.tgz",
+            "integrity": "sha512-7p3DrVEIopW1B1avAGLuCSh1jubc01H2JHc8B4qqGblmg5gI9yumBgACjWo4JlIc04ufug4xJ3SQI8HkS/Rgzw==",
+            "dev": true,
+            "license": "BSD-2-Clause",
+            "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": "https://registry.npmjs.org/esquery/-/esquery-1.7.0.tgz",
+            "integrity": "sha512-Ap6G0WQwcU/LHsvLwON1fAQX9Zp0A2Y6Y/cJBl9r/JbW90Zyg4/zbG6zzKa2OTALELarYHmKu0GhpM5EO+7T0g==",
+            "dev": true,
+            "license": "BSD-3-Clause",
+            "dependencies": {
+                "estraverse": "^5.1.0"
+            },
+            "engines": {
+                "node": ">=0.10"
+            }
+        },
+        "node_modules/esrecurse": {
+            "version": "4.3.0",
+            "resolved": "https://registry.npmjs.org/esrecurse/-/esrecurse-4.3.0.tgz",
+            "integrity": "sha512-KmfKL3b6G+RXvP8N1vr3Tq1kL/oCFgn2NYXEtqP8/L3pKapUA4G8cFVaoF3SU323CD4XypR/ffioHmkti6/Tag==",
+            "dev": true,
+            "license": "BSD-2-Clause",
+            "dependencies": {
+                "estraverse": "^5.2.0"
+            },
+            "engines": {
+                "node": ">=4.0"
+            }
+        },
+        "node_modules/estraverse": {
+            "version": "5.3.0",
+            "resolved": "https://registry.npmjs.org/estraverse/-/estraverse-5.3.0.tgz",
+            "integrity": "sha512-MMdARuVEQziNTeJD8DgMqmhwR11BRQ/cBP+pLtYdSTnf3MIO8fFeiINEbX36ZdNlfU/7A9f3gUw49B3oQsvwBA==",
+            "dev": true,
+            "license": "BSD-2-Clause",
+            "engines": {
+                "node": ">=4.0"
+            }
+        },
+        "node_modules/estree-util-is-identifier-name": {
+            "version": "3.0.0",
+            "resolved": "https://registry.npmjs.org/estree-util-is-identifier-name/-/estree-util-is-identifier-name-3.0.0.tgz",
+            "integrity": "sha512-hFtqIDZTIUZ9BXLb8y4pYGyk6+wekIivNVTcmvk8NoOh+VeRn5y6cEHzbURrWbfp1fIqdVipilzj+lfaadNZmg==",
+            "license": "MIT",
+            "funding": {
+                "type": "opencollective",
+                "url": "https://opencollective.com/unified"
+            }
+        },
+        "node_modules/esutils": {
+            "version": "2.0.3",
+            "resolved": "https://registry.npmjs.org/esutils/-/esutils-2.0.3.tgz",
+            "integrity": "sha512-kVscqXk4OCp68SZ0dkgEKVi6/8ij300KBWTJq32P/dYeWTSwK41WyTxalN1eRmA5Z9UU/LX9D7FWSmV9SAYx6g==",
+            "dev": true,
+            "license": "BSD-2-Clause",
+            "engines": {
+                "node": ">=0.10.0"
+            }
+        },
+        "node_modules/eventemitter3": {
+            "version": "5.0.4",
+            "resolved": "https://registry.npmjs.org/eventemitter3/-/eventemitter3-5.0.4.tgz",
+            "integrity": "sha512-mlsTRyGaPBjPedk6Bvw+aqbsXDtoAyAzm5MO7JgU+yVRyMQ5O8bD4Kcci7BS85f93veegeCPkL8R4GLClnjLFw==",
+            "license": "MIT"
+        },
+        "node_modules/extend": {
+            "version": "3.0.2",
+            "resolved": "https://registry.npmjs.org/extend/-/extend-3.0.2.tgz",
+            "integrity": "sha512-fjquC59cD7CyW6urNXK0FBufkZcoiGG80wTuPujX590cB5Ttln20E2UB4S/WARVqhXffZl2LNgS+gQdPIIim/g==",
+            "license": "MIT"
+        },
+        "node_modules/fast-deep-equal": {
+            "version": "3.1.3",
+            "resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz",
+            "integrity": "sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==",
+            "dev": true,
+            "license": "MIT"
+        },
+        "node_modules/fast-json-stable-stringify": {
+            "version": "2.1.0",
+            "resolved": "https://registry.npmjs.org/fast-json-stable-stringify/-/fast-json-stable-stringify-2.1.0.tgz",
+            "integrity": "sha512-lhd/wF+Lk98HZoTCtlVraHtfh5XYijIjalXck7saUtuanSDyLMxnHhSXEDJqHxD7msR8D0uCmqlkwjCV8xvwHw==",
+            "dev": true,
+            "license": "MIT"
+        },
+        "node_modules/fast-levenshtein": {
+            "version": "2.0.6",
+            "resolved": "https://registry.npmjs.org/fast-levenshtein/-/fast-levenshtein-2.0.6.tgz",
+            "integrity": "sha512-DCXu6Ifhqcks7TZKY3Hxp3y6qphY5SJZmrWMDrKcERSOXWQdMhU9Ig/PYrzyw/ul9jOIyh0N4M0tbC5hodg8dw==",
+            "dev": true,
+            "license": "MIT"
+        },
+        "node_modules/fdir": {
+            "version": "6.5.0",
+            "resolved": "https://registry.npmjs.org/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": "https://registry.npmjs.org/file-entry-cache/-/file-entry-cache-8.0.0.tgz",
+            "integrity": "sha512-XXTUwCvisa5oacNGRP9SfNtYBNAMi+RPwBFmblZEF7N7swHYQS6/Zfk7SRwx4D5j3CH211YNRco1DEMNVfZCnQ==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "flat-cache": "^4.0.0"
+            },
+            "engines": {
+                "node": ">=16.0.0"
+            }
+        },
+        "node_modules/find-up": {
+            "version": "5.0.0",
+            "resolved": "https://registry.npmjs.org/find-up/-/find-up-5.0.0.tgz",
+            "integrity": "sha512-78/PXT1wlLLDgTzDs7sjq9hzz0vXD+zn+7wypEe4fXQxCmdmqfGsEPQxmiCSQI3ajFV91bVSsvNtrJRiW6nGng==",
+            "dev": true,
+            "license": "MIT",
+            "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": "https://registry.npmjs.org/flat-cache/-/flat-cache-4.0.1.tgz",
+            "integrity": "sha512-f7ccFPK3SXFHpx15UIGyRJ/FJQctuKZ0zVuN3frBo4HnK3cay9VEW0R6yPYFHC0AgqhukPzKjq22t5DmAyqGyw==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "flatted": "^3.2.9",
+                "keyv": "^4.5.4"
+            },
+            "engines": {
+                "node": ">=16"
+            }
+        },
+        "node_modules/flatted": {
+            "version": "3.4.2",
+            "resolved": "https://registry.npmjs.org/flatted/-/flatted-3.4.2.tgz",
+            "integrity": "sha512-PjDse7RzhcPkIJwy5t7KPWQSZ9cAbzQXcafsetQoD7sOJRQlGikNbx7yZp2OotDnJyrDcbyRq3Ttb18iYOqkxA==",
+            "dev": true,
+            "license": "ISC"
+        },
+        "node_modules/framer-motion": {
+            "version": "12.42.2",
+            "resolved": "https://registry.npmjs.org/framer-motion/-/framer-motion-12.42.2.tgz",
+            "integrity": "sha512-5XY9luDiu0oHfHBjpDthFMh0ES+122w6p/papSJBweMkO8Sn+PW2QaEgRblQBpWFnuvZS5qvarpt/hO2pjGmnw==",
+            "license": "MIT",
+            "dependencies": {
+                "motion-dom": "^12.42.2",
+                "motion-utils": "^12.39.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": "https://registry.npmjs.org/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": "https://registry.npmjs.org/glob-parent/-/glob-parent-6.0.2.tgz",
+            "integrity": "sha512-XxwI8EOhVQgWp6iDL+3b0r86f4d6AX6zSU55HfB4ydCEuXLXc5FcYeOu+nnGftS4TEju/11rt4KJPTMgbfmv4A==",
+            "dev": true,
+            "license": "ISC",
+            "dependencies": {
+                "is-glob": "^4.0.3"
+            },
+            "engines": {
+                "node": ">=10.13.0"
+            }
+        },
+        "node_modules/globals": {
+            "version": "16.5.0",
+            "resolved": "https://registry.npmjs.org/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": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.11.tgz",
+            "integrity": "sha512-RbJ5/jmFcNNCcDV5o9eTnBLJ/HszWV0P73bc+Ff4nS/rJj+YaS6IGyiOL0VoBYX+l1Wrl3k63h/KrH+nhJ0XvQ==",
+            "license": "ISC"
+        },
+        "node_modules/hast-util-is-element": {
+            "version": "3.0.0",
+            "resolved": "https://registry.npmjs.org/hast-util-is-element/-/hast-util-is-element-3.0.0.tgz",
+            "integrity": "sha512-Val9mnv2IWpLbNPqc/pUem+a7Ipj2aHacCwgNfTiK0vJKl0LF+4Ba4+v1oPHFpf3bLYmreq0/l3Gud9S5OH42g==",
+            "license": "MIT",
+            "dependencies": {
+                "@types/hast": "^3.0.0"
+            },
+            "funding": {
+                "type": "opencollective",
+                "url": "https://opencollective.com/unified"
+            }
+        },
+        "node_modules/hast-util-to-html": {
+            "version": "9.0.5",
+            "resolved": "https://registry.npmjs.org/hast-util-to-html/-/hast-util-to-html-9.0.5.tgz",
+            "integrity": "sha512-OguPdidb+fbHQSU4Q4ZiLKnzWo8Wwsf5bZfbvu7//a9oTYoqD/fWpe96NuHkoS9h0ccGOTe0C4NGXdtS0iObOw==",
+            "license": "MIT",
+            "dependencies": {
+                "@types/hast": "^3.0.0",
+                "@types/unist": "^3.0.0",
+                "ccount": "^2.0.0",
+                "comma-separated-tokens": "^2.0.0",
+                "hast-util-whitespace": "^3.0.0",
+                "html-void-elements": "^3.0.0",
+                "mdast-util-to-hast": "^13.0.0",
+                "property-information": "^7.0.0",
+                "space-separated-tokens": "^2.0.0",
+                "stringify-entities": "^4.0.0",
+                "zwitch": "^2.0.4"
+            },
+            "funding": {
+                "type": "opencollective",
+                "url": "https://opencollective.com/unified"
+            }
+        },
+        "node_modules/hast-util-to-jsx-runtime": {
+            "version": "2.3.6",
+            "resolved": "https://registry.npmjs.org/hast-util-to-jsx-runtime/-/hast-util-to-jsx-runtime-2.3.6.tgz",
+            "integrity": "sha512-zl6s8LwNyo1P9uw+XJGvZtdFF1GdAkOg8ujOw+4Pyb76874fLps4ueHXDhXWdk6YHQ6OgUtinliG7RsYvCbbBg==",
+            "license": "MIT",
+            "dependencies": {
+                "@types/estree": "^1.0.0",
+                "@types/hast": "^3.0.0",
+                "@types/unist": "^3.0.0",
+                "comma-separated-tokens": "^2.0.0",
+                "devlop": "^1.0.0",
+                "estree-util-is-identifier-name": "^3.0.0",
+                "hast-util-whitespace": "^3.0.0",
+                "mdast-util-mdx-expression": "^2.0.0",
+                "mdast-util-mdx-jsx": "^3.0.0",
+                "mdast-util-mdxjs-esm": "^2.0.0",
+                "property-information": "^7.0.0",
+                "space-separated-tokens": "^2.0.0",
+                "style-to-js": "^1.0.0",
+                "unist-util-position": "^5.0.0",
+                "vfile-message": "^4.0.0"
+            },
+            "funding": {
+                "type": "opencollective",
+                "url": "https://opencollective.com/unified"
+            }
+        },
+        "node_modules/hast-util-to-text": {
+            "version": "4.0.2",
+            "resolved": "https://registry.npmjs.org/hast-util-to-text/-/hast-util-to-text-4.0.2.tgz",
+            "integrity": "sha512-KK6y/BN8lbaq654j7JgBydev7wuNMcID54lkRav1P0CaE1e47P72AWWPiGKXTJU271ooYzcvTAn/Zt0REnvc7A==",
+            "license": "MIT",
+            "dependencies": {
+                "@types/hast": "^3.0.0",
+                "@types/unist": "^3.0.0",
+                "hast-util-is-element": "^3.0.0",
+                "unist-util-find-after": "^5.0.0"
+            },
+            "funding": {
+                "type": "opencollective",
+                "url": "https://opencollective.com/unified"
+            }
+        },
+        "node_modules/hast-util-whitespace": {
+            "version": "3.0.0",
+            "resolved": "https://registry.npmjs.org/hast-util-whitespace/-/hast-util-whitespace-3.0.0.tgz",
+            "integrity": "sha512-88JUN06ipLwsnv+dVn+OIYOvAuvBMy/Qoi6O7mQHxdPXpjy+Cd6xRkWwux7DKO+4sYILtLBRIKgsdpS2gQc7qw==",
+            "license": "MIT",
+            "dependencies": {
+                "@types/hast": "^3.0.0"
+            },
+            "funding": {
+                "type": "opencollective",
+                "url": "https://opencollective.com/unified"
+            }
+        },
+        "node_modules/highlight.js": {
+            "version": "11.11.1",
+            "resolved": "https://registry.npmjs.org/highlight.js/-/highlight.js-11.11.1.tgz",
+            "integrity": "sha512-Xwwo44whKBVCYoliBQwaPvtd/2tYFkRQtXDWj1nackaV2JPXx3L0+Jvd8/qCJ2p+ML0/XVkJ2q+Mr+UVdpJK5w==",
+            "license": "BSD-3-Clause",
+            "engines": {
+                "node": ">=12.0.0"
+            }
+        },
+        "node_modules/html-url-attributes": {
+            "version": "3.0.1",
+            "resolved": "https://registry.npmjs.org/html-url-attributes/-/html-url-attributes-3.0.1.tgz",
+            "integrity": "sha512-ol6UPyBWqsrO6EJySPz2O7ZSr856WDrEzM5zMqp+FJJLGMW35cLYmmZnl0vztAZxRUoNZJFTCohfjuIJ8I4QBQ==",
+            "license": "MIT",
+            "funding": {
+                "type": "opencollective",
+                "url": "https://opencollective.com/unified"
+            }
+        },
+        "node_modules/html-void-elements": {
+            "version": "3.0.0",
+            "resolved": "https://registry.npmjs.org/html-void-elements/-/html-void-elements-3.0.0.tgz",
+            "integrity": "sha512-bEqo66MRXsUGxWHV5IP0PUiAWwoEjba4VCzg0LjFJBpchPaTfyfCKTG6bc5F8ucKec3q5y6qOdGyYTSBEvhCrg==",
+            "license": "MIT",
+            "funding": {
+                "type": "github",
+                "url": "https://github.com/sponsors/wooorm"
+            }
+        },
+        "node_modules/ignore": {
+            "version": "5.3.2",
+            "resolved": "https://registry.npmjs.org/ignore/-/ignore-5.3.2.tgz",
+            "integrity": "sha512-hsBTNUqQTDwkWtcdYI2i06Y/nUBEsNEDJKjWdigLvegy8kDuJAS8uRlpkkcQpyEXL0Z/pjDy5HBmMjRCJ2gq+g==",
+            "dev": true,
+            "license": "MIT",
+            "engines": {
+                "node": ">= 4"
+            }
+        },
+        "node_modules/immer": {
+            "version": "11.1.9",
+            "resolved": "https://registry.npmjs.org/immer/-/immer-11.1.9.tgz",
+            "integrity": "sha512-sc/z0Cyti70bZa0ZU4sWfAElfovFb9Ni8tArJZLuklYWxegPiK3pDOql1Rq5H0FIRAW9LSQRG6OX4KqBldbhBA==",
+            "license": "MIT",
+            "funding": {
+                "type": "opencollective",
+                "url": "https://opencollective.com/immer"
+            }
+        },
+        "node_modules/imurmurhash": {
+            "version": "0.1.4",
+            "resolved": "https://registry.npmjs.org/imurmurhash/-/imurmurhash-0.1.4.tgz",
+            "integrity": "sha512-JmXMZ6wuvDmLiHEml9ykzqO6lwFbof0GG4IkcGaENdCRDDmMVnny7s5HsIgHCbaq0w2MyPhDqkhTUgS2LU2PHA==",
+            "dev": true,
+            "license": "MIT",
+            "engines": {
+                "node": ">=0.8.19"
+            }
+        },
+        "node_modules/inline-style-parser": {
+            "version": "0.2.7",
+            "resolved": "https://registry.npmjs.org/inline-style-parser/-/inline-style-parser-0.2.7.tgz",
+            "integrity": "sha512-Nb2ctOyNR8DqQoR0OwRG95uNWIC0C1lCgf5Naz5H6Ji72KZ8OcFZLz2P5sNgwlyoJ8Yif11oMuYs5pBQa86csA==",
+            "license": "MIT"
+        },
+        "node_modules/input-otp": {
+            "version": "1.4.2",
+            "resolved": "https://registry.npmjs.org/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/internmap": {
+            "version": "2.0.3",
+            "resolved": "https://registry.npmjs.org/internmap/-/internmap-2.0.3.tgz",
+            "integrity": "sha512-5Hh7Y1wQbvY5ooGgPbDaL5iYLAPzMTUrjMulskHLH6wnv/A+1q5rgEaiuqEjB+oxGXIVZs1FF+R/KPN3ZSQYYg==",
+            "license": "ISC",
+            "engines": {
+                "node": ">=12"
+            }
+        },
+        "node_modules/is-alphabetical": {
+            "version": "2.0.1",
+            "resolved": "https://registry.npmjs.org/is-alphabetical/-/is-alphabetical-2.0.1.tgz",
+            "integrity": "sha512-FWyyY60MeTNyeSRpkM2Iry0G9hpr7/9kD40mD/cGQEuilcZYS4okz8SN2Q6rLCJ8gbCt6fN+rC+6tMGS99LaxQ==",
+            "license": "MIT",
+            "funding": {
+                "type": "github",
+                "url": "https://github.com/sponsors/wooorm"
+            }
+        },
+        "node_modules/is-alphanumerical": {
+            "version": "2.0.1",
+            "resolved": "https://registry.npmjs.org/is-alphanumerical/-/is-alphanumerical-2.0.1.tgz",
+            "integrity": "sha512-hmbYhX/9MUMF5uh7tOXyK/n0ZvWpad5caBA17GsC6vyuCqaWliRG5K1qS9inmUhEMaOBIW7/whAnSwveW/LtZw==",
+            "license": "MIT",
+            "dependencies": {
+                "is-alphabetical": "^2.0.0",
+                "is-decimal": "^2.0.0"
+            },
+            "funding": {
+                "type": "github",
+                "url": "https://github.com/sponsors/wooorm"
+            }
+        },
+        "node_modules/is-decimal": {
+            "version": "2.0.1",
+            "resolved": "https://registry.npmjs.org/is-decimal/-/is-decimal-2.0.1.tgz",
+            "integrity": "sha512-AAB9hiomQs5DXWcRB1rqsxGUstbRroFOPPVAomNk/3XHR5JyEZChOyTWe2oayKnsSsr/kcGqF+z6yuH6HHpN0A==",
+            "license": "MIT",
+            "funding": {
+                "type": "github",
+                "url": "https://github.com/sponsors/wooorm"
+            }
+        },
+        "node_modules/is-extglob": {
+            "version": "2.1.1",
+            "resolved": "https://registry.npmjs.org/is-extglob/-/is-extglob-2.1.1.tgz",
+            "integrity": "sha512-SbKbANkN603Vi4jEZv49LeVJMn4yGwsbzZworEoyEiutsN3nJYdbO36zfhGJ6QEDpOZIFkDtnq5JRxmvl3jsoQ==",
+            "dev": true,
+            "license": "MIT",
+            "engines": {
+                "node": ">=0.10.0"
+            }
+        },
+        "node_modules/is-glob": {
+            "version": "4.0.3",
+            "resolved": "https://registry.npmjs.org/is-glob/-/is-glob-4.0.3.tgz",
+            "integrity": "sha512-xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxhLSnrwRr4elSSg==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "is-extglob": "^2.1.1"
+            },
+            "engines": {
+                "node": ">=0.10.0"
+            }
+        },
+        "node_modules/is-hexadecimal": {
+            "version": "2.0.1",
+            "resolved": "https://registry.npmjs.org/is-hexadecimal/-/is-hexadecimal-2.0.1.tgz",
+            "integrity": "sha512-DgZQp241c8oO6cA1SbTEWiXeoxV42vlcJxgH+B3hi1AiqqKruZR3ZGF8In3fj4+/y/7rHvlOZLZtgJ/4ttYGZg==",
+            "license": "MIT",
+            "funding": {
+                "type": "github",
+                "url": "https://github.com/sponsors/wooorm"
+            }
+        },
+        "node_modules/is-plain-obj": {
+            "version": "4.1.0",
+            "resolved": "https://registry.npmjs.org/is-plain-obj/-/is-plain-obj-4.1.0.tgz",
+            "integrity": "sha512-+Pgi+vMuUNkJyExiMBt5IlFoMyKnr5zhJ4Uspz58WOhBF5QoIZkFyNHIbBAtHwzVAgk5RtndVNsDRN61/mmDqg==",
+            "license": "MIT",
+            "engines": {
+                "node": ">=12"
+            },
+            "funding": {
+                "url": "https://github.com/sponsors/sindresorhus"
+            }
+        },
+        "node_modules/isexe": {
+            "version": "2.0.0",
+            "resolved": "https://registry.npmjs.org/isexe/-/isexe-2.0.0.tgz",
+            "integrity": "sha512-RHxMLp9lnKHGHRng9QFhRCMbYAcVpn69smSGcq3f36xjgVVWThj4qqLbTLlq7Ssj8B+fIQ1EuCEGI2lKsyQeIw==",
+            "dev": true,
+            "license": "ISC"
+        },
+        "node_modules/javascript-natural-sort": {
+            "version": "0.7.1",
+            "resolved": "https://registry.npmjs.org/javascript-natural-sort/-/javascript-natural-sort-0.7.1.tgz",
+            "integrity": "sha512-nO6jcEfZWQXDhOiBtG2KvKyEptz7RVbpGP4vTD2hLBdmNQSsCiicO2Ioinv6UI4y9ukqnBpy+XZ9H6uLNgJTlw==",
+            "dev": true,
+            "license": "MIT"
+        },
+        "node_modules/jiti": {
+            "version": "2.7.0",
+            "resolved": "https://registry.npmjs.org/jiti/-/jiti-2.7.0.tgz",
+            "integrity": "sha512-AC/7JofJvZGrrneWNaEnJeOLUx+JlGt7tNa0wZiRPT4MY1wmfKjt2+6O2p2uz2+skll8OZZmJMNqeke7kKbNgQ==",
+            "license": "MIT",
+            "bin": {
+                "jiti": "lib/jiti-cli.mjs"
+            }
+        },
+        "node_modules/js-tokens": {
+            "version": "4.0.0",
+            "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",
+            "integrity": "sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==",
+            "dev": true,
+            "license": "MIT"
+        },
+        "node_modules/jsesc": {
+            "version": "3.1.0",
+            "resolved": "https://registry.npmjs.org/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": "https://registry.npmjs.org/json-buffer/-/json-buffer-3.0.1.tgz",
+            "integrity": "sha512-4bV5BfR2mqfQTJm+V5tPPdf+ZpuhiIvTuAB5g8kcrXOZpTT/QwwVRWBywX1ozr6lEuPdbHxwaJlm9G6mI2sfSQ==",
+            "dev": true,
+            "license": "MIT"
+        },
+        "node_modules/json-schema-traverse": {
+            "version": "0.4.1",
+            "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-0.4.1.tgz",
+            "integrity": "sha512-xbbCH5dCYU5T8LcEhhuh7HJ88HXuW3qsI3Y0zOZFKfZEHcpWiHU/Jxzk629Brsab/mMiHQti9wMP+845RPe3Vg==",
+            "dev": true,
+            "license": "MIT"
+        },
+        "node_modules/json-stable-stringify-without-jsonify": {
+            "version": "1.0.1",
+            "resolved": "https://registry.npmjs.org/json-stable-stringify-without-jsonify/-/json-stable-stringify-without-jsonify-1.0.1.tgz",
+            "integrity": "sha512-Bdboy+l7tA3OGW6FjyFHWkP5LuByj1Tk33Ljyq0axyzdk9//JSi2u3fP1QSmd1KNwq6VOKYGlAu87CisVir6Pw==",
+            "dev": true,
+            "license": "MIT"
+        },
+        "node_modules/keyv": {
+            "version": "4.5.4",
+            "resolved": "https://registry.npmjs.org/keyv/-/keyv-4.5.4.tgz",
+            "integrity": "sha512-oxVHkHR/EJf2CNXnWxRLW6mg7JyCCUcG0DtEGmL2ctUo1PNTin1PUil+r/+4r5MpVgC/fn1kjsx7mjSujKqIpw==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "json-buffer": "3.0.1"
+            }
+        },
+        "node_modules/levn": {
+            "version": "0.4.1",
+            "resolved": "https://registry.npmjs.org/levn/-/levn-0.4.1.tgz",
+            "integrity": "sha512-+bT2uH4E5LGE7h/n3evcS/sQlJXCpIp6ym8OWJ5eV6+67Dsql/LaaT7qJBAt2rzfoa/5QBGBhxDix1dMt2kQKQ==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "prelude-ls": "^1.2.1",
+                "type-check": "~0.4.0"
+            },
+            "engines": {
+                "node": ">= 0.8.0"
+            }
+        },
+        "node_modules/lightningcss": {
+            "version": "1.32.0",
+            "resolved": "https://registry.npmjs.org/lightningcss/-/lightningcss-1.32.0.tgz",
+            "integrity": "sha512-NXYBzinNrblfraPGyrbPoD19C1h9lfI/1mzgWYvXUTe414Gz/X1FD2XBZSZM7rRTrMA8JL3OtAaGifrIKhQ5yQ==",
+            "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.32.0",
+                "lightningcss-darwin-arm64": "1.32.0",
+                "lightningcss-darwin-x64": "1.32.0",
+                "lightningcss-freebsd-x64": "1.32.0",
+                "lightningcss-linux-arm-gnueabihf": "1.32.0",
+                "lightningcss-linux-arm64-gnu": "1.32.0",
+                "lightningcss-linux-arm64-musl": "1.32.0",
+                "lightningcss-linux-x64-gnu": "1.32.0",
+                "lightningcss-linux-x64-musl": "1.32.0",
+                "lightningcss-win32-arm64-msvc": "1.32.0",
+                "lightningcss-win32-x64-msvc": "1.32.0"
+            }
+        },
+        "node_modules/lightningcss-android-arm64": {
+            "version": "1.32.0",
+            "resolved": "https://registry.npmjs.org/lightningcss-android-arm64/-/lightningcss-android-arm64-1.32.0.tgz",
+            "integrity": "sha512-YK7/ClTt4kAK0vo6w3X+Pnm0D2cf2vPHbhOXdoNti1Ga0al1P4TBZhwjATvjNwLEBCnKvjJc2jQgHXH0NEwlAg==",
+            "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.32.0",
+            "resolved": "https://registry.npmjs.org/lightningcss-darwin-arm64/-/lightningcss-darwin-arm64-1.32.0.tgz",
+            "integrity": "sha512-RzeG9Ju5bag2Bv1/lwlVJvBE3q6TtXskdZLLCyfg5pt+HLz9BqlICO7LZM7VHNTTn/5PRhHFBSjk5lc4cmscPQ==",
+            "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.32.0",
+            "resolved": "https://registry.npmjs.org/lightningcss-darwin-x64/-/lightningcss-darwin-x64-1.32.0.tgz",
+            "integrity": "sha512-U+QsBp2m/s2wqpUYT/6wnlagdZbtZdndSmut/NJqlCcMLTWp5muCrID+K5UJ6jqD2BFshejCYXniPDbNh73V8w==",
+            "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.32.0",
+            "resolved": "https://registry.npmjs.org/lightningcss-freebsd-x64/-/lightningcss-freebsd-x64-1.32.0.tgz",
+            "integrity": "sha512-JCTigedEksZk3tHTTthnMdVfGf61Fky8Ji2E4YjUTEQX14xiy/lTzXnu1vwiZe3bYe0q+SpsSH/CTeDXK6WHig==",
+            "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.32.0",
+            "resolved": "https://registry.npmjs.org/lightningcss-linux-arm-gnueabihf/-/lightningcss-linux-arm-gnueabihf-1.32.0.tgz",
+            "integrity": "sha512-x6rnnpRa2GL0zQOkt6rts3YDPzduLpWvwAF6EMhXFVZXD4tPrBkEFqzGowzCsIWsPjqSK+tyNEODUBXeeVHSkw==",
+            "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.32.0",
+            "resolved": "https://registry.npmjs.org/lightningcss-linux-arm64-gnu/-/lightningcss-linux-arm64-gnu-1.32.0.tgz",
+            "integrity": "sha512-0nnMyoyOLRJXfbMOilaSRcLH3Jw5z9HDNGfT/gwCPgaDjnx0i8w7vBzFLFR1f6CMLKF8gVbebmkUN3fa/kQJpQ==",
+            "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.32.0",
+            "resolved": "https://registry.npmjs.org/lightningcss-linux-arm64-musl/-/lightningcss-linux-arm64-musl-1.32.0.tgz",
+            "integrity": "sha512-UpQkoenr4UJEzgVIYpI80lDFvRmPVg6oqboNHfoH4CQIfNA+HOrZ7Mo7KZP02dC6LjghPQJeBsvXhJod/wnIBg==",
+            "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.32.0",
+            "resolved": "https://registry.npmjs.org/lightningcss-linux-x64-gnu/-/lightningcss-linux-x64-gnu-1.32.0.tgz",
+            "integrity": "sha512-V7Qr52IhZmdKPVr+Vtw8o+WLsQJYCTd8loIfpDaMRWGUZfBOYEJeyJIkqGIDMZPwPx24pUMfwSxxI8phr/MbOA==",
+            "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.32.0",
+            "resolved": "https://registry.npmjs.org/lightningcss-linux-x64-musl/-/lightningcss-linux-x64-musl-1.32.0.tgz",
+            "integrity": "sha512-bYcLp+Vb0awsiXg/80uCRezCYHNg1/l3mt0gzHnWV9XP1W5sKa5/TCdGWaR/zBM2PeF/HbsQv/j2URNOiVuxWg==",
+            "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.32.0",
+            "resolved": "https://registry.npmjs.org/lightningcss-win32-arm64-msvc/-/lightningcss-win32-arm64-msvc-1.32.0.tgz",
+            "integrity": "sha512-8SbC8BR40pS6baCM8sbtYDSwEVQd4JlFTOlaD3gWGHfThTcABnNDBda6eTZeqbofalIJhFx0qKzgHJmcPTnGdw==",
+            "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.32.0",
+            "resolved": "https://registry.npmjs.org/lightningcss-win32-x64-msvc/-/lightningcss-win32-x64-msvc-1.32.0.tgz",
+            "integrity": "sha512-Amq9B/SoZYdDi1kFrojnoqPLxYhQ4Wo5XiL8EVJrVsB8ARoC1PWW6VGtT0WKCemjy8aC+louJnjS7U18x3b06Q==",
+            "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": "https://registry.npmjs.org/locate-path/-/locate-path-6.0.0.tgz",
+            "integrity": "sha512-iPZK6eYjbxRu3uB4/WZ3EsEIMJFMqAoopl3R+zuq0UjcAm/MO6KCweDgPfP3elTztoKP3KtnVHxTn2NHBSDVUw==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "p-locate": "^5.0.0"
+            },
+            "engines": {
+                "node": ">=10"
+            },
+            "funding": {
+                "url": "https://github.com/sponsors/sindresorhus"
+            }
+        },
+        "node_modules/lodash-es": {
+            "version": "4.18.1",
+            "resolved": "https://registry.npmjs.org/lodash-es/-/lodash-es-4.18.1.tgz",
+            "integrity": "sha512-J8xewKD/Gk22OZbhpOVSwcs60zhd95ESDwezOFuA3/099925PdHJ7OFHNTGtajL3AlZkykD32HykiMo+BIBI8A==",
+            "dev": true,
+            "license": "MIT"
+        },
+        "node_modules/longest-streak": {
+            "version": "3.1.0",
+            "resolved": "https://registry.npmjs.org/longest-streak/-/longest-streak-3.1.0.tgz",
+            "integrity": "sha512-9Ri+o0JYgehTaVBBDoMqIl8GXtbWg711O3srftcHhZ0dqnETqLaoIK0x17fUw9rFSlK/0NlsKe0Ahhyl5pXE2g==",
+            "license": "MIT",
+            "funding": {
+                "type": "github",
+                "url": "https://github.com/sponsors/wooorm"
+            }
+        },
+        "node_modules/lowlight": {
+            "version": "3.3.0",
+            "resolved": "https://registry.npmjs.org/lowlight/-/lowlight-3.3.0.tgz",
+            "integrity": "sha512-0JNhgFoPvP6U6lE/UdVsSq99tn6DhjjpAj5MxG49ewd2mOBVtwWYIT8ClyABhq198aXXODMU6Ox8DrGy/CpTZQ==",
+            "license": "MIT",
+            "dependencies": {
+                "@types/hast": "^3.0.0",
+                "devlop": "^1.0.0",
+                "highlight.js": "~11.11.0"
+            },
+            "funding": {
+                "type": "github",
+                "url": "https://github.com/sponsors/wooorm"
+            }
+        },
+        "node_modules/magic-string": {
+            "version": "0.30.21",
+            "resolved": "https://registry.npmjs.org/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/markdown-table": {
+            "version": "3.0.4",
+            "resolved": "https://registry.npmjs.org/markdown-table/-/markdown-table-3.0.4.tgz",
+            "integrity": "sha512-wiYz4+JrLyb/DqW2hkFJxP7Vd7JuTDm77fvbM8VfEQdmSMqcImWeeRbHwZjBjIFki/VaMK2BhFi7oUUZeM5bqw==",
+            "license": "MIT",
+            "funding": {
+                "type": "github",
+                "url": "https://github.com/sponsors/wooorm"
+            }
+        },
+        "node_modules/mdast-util-find-and-replace": {
+            "version": "3.0.2",
+            "resolved": "https://registry.npmjs.org/mdast-util-find-and-replace/-/mdast-util-find-and-replace-3.0.2.tgz",
+            "integrity": "sha512-Tmd1Vg/m3Xz43afeNxDIhWRtFZgM2VLyaf4vSTYwudTyeuTneoL3qtWMA5jeLyz/O1vDJmmV4QuScFCA2tBPwg==",
+            "license": "MIT",
+            "dependencies": {
+                "@types/mdast": "^4.0.0",
+                "escape-string-regexp": "^5.0.0",
+                "unist-util-is": "^6.0.0",
+                "unist-util-visit-parents": "^6.0.0"
+            },
+            "funding": {
+                "type": "opencollective",
+                "url": "https://opencollective.com/unified"
+            }
+        },
+        "node_modules/mdast-util-find-and-replace/node_modules/escape-string-regexp": {
+            "version": "5.0.0",
+            "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-5.0.0.tgz",
+            "integrity": "sha512-/veY75JbMK4j1yjvuUxuVsiS/hr/4iHs9FTT6cgTexxdE0Ly/glccBAkloH/DofkjRbZU3bnoj38mOmhkZ0lHw==",
+            "license": "MIT",
+            "engines": {
+                "node": ">=12"
+            },
+            "funding": {
+                "url": "https://github.com/sponsors/sindresorhus"
+            }
+        },
+        "node_modules/mdast-util-from-markdown": {
+            "version": "2.0.3",
+            "resolved": "https://registry.npmjs.org/mdast-util-from-markdown/-/mdast-util-from-markdown-2.0.3.tgz",
+            "integrity": "sha512-W4mAWTvSlKvf8L6J+VN9yLSqQ9AOAAvHuoDAmPkz4dHf553m5gVj2ejadHJhoJmcmxEnOv6Pa8XJhpxE93kb8Q==",
+            "license": "MIT",
+            "dependencies": {
+                "@types/mdast": "^4.0.0",
+                "@types/unist": "^3.0.0",
+                "decode-named-character-reference": "^1.0.0",
+                "devlop": "^1.0.0",
+                "mdast-util-to-string": "^4.0.0",
+                "micromark": "^4.0.0",
+                "micromark-util-decode-numeric-character-reference": "^2.0.0",
+                "micromark-util-decode-string": "^2.0.0",
+                "micromark-util-normalize-identifier": "^2.0.0",
+                "micromark-util-symbol": "^2.0.0",
+                "micromark-util-types": "^2.0.0",
+                "unist-util-stringify-position": "^4.0.0"
+            },
+            "funding": {
+                "type": "opencollective",
+                "url": "https://opencollective.com/unified"
+            }
+        },
+        "node_modules/mdast-util-gfm": {
+            "version": "3.1.0",
+            "resolved": "https://registry.npmjs.org/mdast-util-gfm/-/mdast-util-gfm-3.1.0.tgz",
+            "integrity": "sha512-0ulfdQOM3ysHhCJ1p06l0b0VKlhU0wuQs3thxZQagjcjPrlFRqY215uZGHHJan9GEAXd9MbfPjFJz+qMkVR6zQ==",
+            "license": "MIT",
+            "dependencies": {
+                "mdast-util-from-markdown": "^2.0.0",
+                "mdast-util-gfm-autolink-literal": "^2.0.0",
+                "mdast-util-gfm-footnote": "^2.0.0",
+                "mdast-util-gfm-strikethrough": "^2.0.0",
+                "mdast-util-gfm-table": "^2.0.0",
+                "mdast-util-gfm-task-list-item": "^2.0.0",
+                "mdast-util-to-markdown": "^2.0.0"
+            },
+            "funding": {
+                "type": "opencollective",
+                "url": "https://opencollective.com/unified"
+            }
+        },
+        "node_modules/mdast-util-gfm-autolink-literal": {
+            "version": "2.0.1",
+            "resolved": "https://registry.npmjs.org/mdast-util-gfm-autolink-literal/-/mdast-util-gfm-autolink-literal-2.0.1.tgz",
+            "integrity": "sha512-5HVP2MKaP6L+G6YaxPNjuL0BPrq9orG3TsrZ9YXbA3vDw/ACI4MEsnoDpn6ZNm7GnZgtAcONJyPhOP8tNJQavQ==",
+            "license": "MIT",
+            "dependencies": {
+                "@types/mdast": "^4.0.0",
+                "ccount": "^2.0.0",
+                "devlop": "^1.0.0",
+                "mdast-util-find-and-replace": "^3.0.0",
+                "micromark-util-character": "^2.0.0"
+            },
+            "funding": {
+                "type": "opencollective",
+                "url": "https://opencollective.com/unified"
+            }
+        },
+        "node_modules/mdast-util-gfm-footnote": {
+            "version": "2.1.0",
+            "resolved": "https://registry.npmjs.org/mdast-util-gfm-footnote/-/mdast-util-gfm-footnote-2.1.0.tgz",
+            "integrity": "sha512-sqpDWlsHn7Ac9GNZQMeUzPQSMzR6Wv0WKRNvQRg0KqHh02fpTz69Qc1QSseNX29bhz1ROIyNyxExfawVKTm1GQ==",
+            "license": "MIT",
+            "dependencies": {
+                "@types/mdast": "^4.0.0",
+                "devlop": "^1.1.0",
+                "mdast-util-from-markdown": "^2.0.0",
+                "mdast-util-to-markdown": "^2.0.0",
+                "micromark-util-normalize-identifier": "^2.0.0"
+            },
+            "funding": {
+                "type": "opencollective",
+                "url": "https://opencollective.com/unified"
+            }
+        },
+        "node_modules/mdast-util-gfm-strikethrough": {
+            "version": "2.0.0",
+            "resolved": "https://registry.npmjs.org/mdast-util-gfm-strikethrough/-/mdast-util-gfm-strikethrough-2.0.0.tgz",
+            "integrity": "sha512-mKKb915TF+OC5ptj5bJ7WFRPdYtuHv0yTRxK2tJvi+BDqbkiG7h7u/9SI89nRAYcmap2xHQL9D+QG/6wSrTtXg==",
+            "license": "MIT",
+            "dependencies": {
+                "@types/mdast": "^4.0.0",
+                "mdast-util-from-markdown": "^2.0.0",
+                "mdast-util-to-markdown": "^2.0.0"
+            },
+            "funding": {
+                "type": "opencollective",
+                "url": "https://opencollective.com/unified"
+            }
+        },
+        "node_modules/mdast-util-gfm-table": {
+            "version": "2.0.0",
+            "resolved": "https://registry.npmjs.org/mdast-util-gfm-table/-/mdast-util-gfm-table-2.0.0.tgz",
+            "integrity": "sha512-78UEvebzz/rJIxLvE7ZtDd/vIQ0RHv+3Mh5DR96p7cS7HsBhYIICDBCu8csTNWNO6tBWfqXPWekRuj2FNOGOZg==",
+            "license": "MIT",
+            "dependencies": {
+                "@types/mdast": "^4.0.0",
+                "devlop": "^1.0.0",
+                "markdown-table": "^3.0.0",
+                "mdast-util-from-markdown": "^2.0.0",
+                "mdast-util-to-markdown": "^2.0.0"
+            },
+            "funding": {
+                "type": "opencollective",
+                "url": "https://opencollective.com/unified"
+            }
+        },
+        "node_modules/mdast-util-gfm-task-list-item": {
+            "version": "2.0.0",
+            "resolved": "https://registry.npmjs.org/mdast-util-gfm-task-list-item/-/mdast-util-gfm-task-list-item-2.0.0.tgz",
+            "integrity": "sha512-IrtvNvjxC1o06taBAVJznEnkiHxLFTzgonUdy8hzFVeDun0uTjxxrRGVaNFqkU1wJR3RBPEfsxmU6jDWPofrTQ==",
+            "license": "MIT",
+            "dependencies": {
+                "@types/mdast": "^4.0.0",
+                "devlop": "^1.0.0",
+                "mdast-util-from-markdown": "^2.0.0",
+                "mdast-util-to-markdown": "^2.0.0"
+            },
+            "funding": {
+                "type": "opencollective",
+                "url": "https://opencollective.com/unified"
+            }
+        },
+        "node_modules/mdast-util-mdx-expression": {
+            "version": "2.0.1",
+            "resolved": "https://registry.npmjs.org/mdast-util-mdx-expression/-/mdast-util-mdx-expression-2.0.1.tgz",
+            "integrity": "sha512-J6f+9hUp+ldTZqKRSg7Vw5V6MqjATc+3E4gf3CFNcuZNWD8XdyI6zQ8GqH7f8169MM6P7hMBRDVGnn7oHB9kXQ==",
+            "license": "MIT",
+            "dependencies": {
+                "@types/estree-jsx": "^1.0.0",
+                "@types/hast": "^3.0.0",
+                "@types/mdast": "^4.0.0",
+                "devlop": "^1.0.0",
+                "mdast-util-from-markdown": "^2.0.0",
+                "mdast-util-to-markdown": "^2.0.0"
+            },
+            "funding": {
+                "type": "opencollective",
+                "url": "https://opencollective.com/unified"
+            }
+        },
+        "node_modules/mdast-util-mdx-jsx": {
+            "version": "3.2.0",
+            "resolved": "https://registry.npmjs.org/mdast-util-mdx-jsx/-/mdast-util-mdx-jsx-3.2.0.tgz",
+            "integrity": "sha512-lj/z8v0r6ZtsN/cGNNtemmmfoLAFZnjMbNyLzBafjzikOM+glrjNHPlf6lQDOTccj9n5b0PPihEBbhneMyGs1Q==",
+            "license": "MIT",
+            "dependencies": {
+                "@types/estree-jsx": "^1.0.0",
+                "@types/hast": "^3.0.0",
+                "@types/mdast": "^4.0.0",
+                "@types/unist": "^3.0.0",
+                "ccount": "^2.0.0",
+                "devlop": "^1.1.0",
+                "mdast-util-from-markdown": "^2.0.0",
+                "mdast-util-to-markdown": "^2.0.0",
+                "parse-entities": "^4.0.0",
+                "stringify-entities": "^4.0.0",
+                "unist-util-stringify-position": "^4.0.0",
+                "vfile-message": "^4.0.0"
+            },
+            "funding": {
+                "type": "opencollective",
+                "url": "https://opencollective.com/unified"
+            }
+        },
+        "node_modules/mdast-util-mdxjs-esm": {
+            "version": "2.0.1",
+            "resolved": "https://registry.npmjs.org/mdast-util-mdxjs-esm/-/mdast-util-mdxjs-esm-2.0.1.tgz",
+            "integrity": "sha512-EcmOpxsZ96CvlP03NghtH1EsLtr0n9Tm4lPUJUBccV9RwUOneqSycg19n5HGzCf+10LozMRSObtVr3ee1WoHtg==",
+            "license": "MIT",
+            "dependencies": {
+                "@types/estree-jsx": "^1.0.0",
+                "@types/hast": "^3.0.0",
+                "@types/mdast": "^4.0.0",
+                "devlop": "^1.0.0",
+                "mdast-util-from-markdown": "^2.0.0",
+                "mdast-util-to-markdown": "^2.0.0"
+            },
+            "funding": {
+                "type": "opencollective",
+                "url": "https://opencollective.com/unified"
+            }
+        },
+        "node_modules/mdast-util-phrasing": {
+            "version": "4.1.0",
+            "resolved": "https://registry.npmjs.org/mdast-util-phrasing/-/mdast-util-phrasing-4.1.0.tgz",
+            "integrity": "sha512-TqICwyvJJpBwvGAMZjj4J2n0X8QWp21b9l0o7eXyVJ25YNWYbJDVIyD1bZXE6WtV6RmKJVYmQAKWa0zWOABz2w==",
+            "license": "MIT",
+            "dependencies": {
+                "@types/mdast": "^4.0.0",
+                "unist-util-is": "^6.0.0"
+            },
+            "funding": {
+                "type": "opencollective",
+                "url": "https://opencollective.com/unified"
+            }
+        },
+        "node_modules/mdast-util-to-hast": {
+            "version": "13.2.1",
+            "resolved": "https://registry.npmjs.org/mdast-util-to-hast/-/mdast-util-to-hast-13.2.1.tgz",
+            "integrity": "sha512-cctsq2wp5vTsLIcaymblUriiTcZd0CwWtCbLvrOzYCDZoWyMNV8sZ7krj09FSnsiJi3WVsHLM4k6Dq/yaPyCXA==",
+            "license": "MIT",
+            "dependencies": {
+                "@types/hast": "^3.0.0",
+                "@types/mdast": "^4.0.0",
+                "@ungap/structured-clone": "^1.0.0",
+                "devlop": "^1.0.0",
+                "micromark-util-sanitize-uri": "^2.0.0",
+                "trim-lines": "^3.0.0",
+                "unist-util-position": "^5.0.0",
+                "unist-util-visit": "^5.0.0",
+                "vfile": "^6.0.0"
+            },
+            "funding": {
+                "type": "opencollective",
+                "url": "https://opencollective.com/unified"
+            }
+        },
+        "node_modules/mdast-util-to-markdown": {
+            "version": "2.1.2",
+            "resolved": "https://registry.npmjs.org/mdast-util-to-markdown/-/mdast-util-to-markdown-2.1.2.tgz",
+            "integrity": "sha512-xj68wMTvGXVOKonmog6LwyJKrYXZPvlwabaryTjLh9LuvovB/KAH+kvi8Gjj+7rJjsFi23nkUxRQv1KqSroMqA==",
+            "license": "MIT",
+            "dependencies": {
+                "@types/mdast": "^4.0.0",
+                "@types/unist": "^3.0.0",
+                "longest-streak": "^3.0.0",
+                "mdast-util-phrasing": "^4.0.0",
+                "mdast-util-to-string": "^4.0.0",
+                "micromark-util-classify-character": "^2.0.0",
+                "micromark-util-decode-string": "^2.0.0",
+                "unist-util-visit": "^5.0.0",
+                "zwitch": "^2.0.0"
+            },
+            "funding": {
+                "type": "opencollective",
+                "url": "https://opencollective.com/unified"
+            }
+        },
+        "node_modules/mdast-util-to-string": {
+            "version": "4.0.0",
+            "resolved": "https://registry.npmjs.org/mdast-util-to-string/-/mdast-util-to-string-4.0.0.tgz",
+            "integrity": "sha512-0H44vDimn51F0YwvxSJSm0eCDOJTRlmN0R1yBh4HLj9wiV1Dn0QoXGbvFAWj2hSItVTlCmBF1hqKlIyUBVFLPg==",
+            "license": "MIT",
+            "dependencies": {
+                "@types/mdast": "^4.0.0"
+            },
+            "funding": {
+                "type": "opencollective",
+                "url": "https://opencollective.com/unified"
+            }
+        },
+        "node_modules/micromark": {
+            "version": "4.0.2",
+            "resolved": "https://registry.npmjs.org/micromark/-/micromark-4.0.2.tgz",
+            "integrity": "sha512-zpe98Q6kvavpCr1NPVSCMebCKfD7CA2NqZ+rykeNhONIJBpc1tFKt9hucLGwha3jNTNI8lHpctWJWoimVF4PfA==",
+            "funding": [
+                {
+                    "type": "GitHub Sponsors",
+                    "url": "https://github.com/sponsors/unifiedjs"
+                },
+                {
+                    "type": "OpenCollective",
+                    "url": "https://opencollective.com/unified"
+                }
+            ],
+            "license": "MIT",
+            "dependencies": {
+                "@types/debug": "^4.0.0",
+                "debug": "^4.0.0",
+                "decode-named-character-reference": "^1.0.0",
+                "devlop": "^1.0.0",
+                "micromark-core-commonmark": "^2.0.0",
+                "micromark-factory-space": "^2.0.0",
+                "micromark-util-character": "^2.0.0",
+                "micromark-util-chunked": "^2.0.0",
+                "micromark-util-combine-extensions": "^2.0.0",
+                "micromark-util-decode-numeric-character-reference": "^2.0.0",
+                "micromark-util-encode": "^2.0.0",
+                "micromark-util-normalize-identifier": "^2.0.0",
+                "micromark-util-resolve-all": "^2.0.0",
+                "micromark-util-sanitize-uri": "^2.0.0",
+                "micromark-util-subtokenize": "^2.0.0",
+                "micromark-util-symbol": "^2.0.0",
+                "micromark-util-types": "^2.0.0"
+            }
+        },
+        "node_modules/micromark-core-commonmark": {
+            "version": "2.0.3",
+            "resolved": "https://registry.npmjs.org/micromark-core-commonmark/-/micromark-core-commonmark-2.0.3.tgz",
+            "integrity": "sha512-RDBrHEMSxVFLg6xvnXmb1Ayr2WzLAWjeSATAoxwKYJV94TeNavgoIdA0a9ytzDSVzBy2YKFK+emCPOEibLeCrg==",
+            "funding": [
+                {
+                    "type": "GitHub Sponsors",
+                    "url": "https://github.com/sponsors/unifiedjs"
+                },
+                {
+                    "type": "OpenCollective",
+                    "url": "https://opencollective.com/unified"
+                }
+            ],
+            "license": "MIT",
+            "dependencies": {
+                "decode-named-character-reference": "^1.0.0",
+                "devlop": "^1.0.0",
+                "micromark-factory-destination": "^2.0.0",
+                "micromark-factory-label": "^2.0.0",
+                "micromark-factory-space": "^2.0.0",
+                "micromark-factory-title": "^2.0.0",
+                "micromark-factory-whitespace": "^2.0.0",
+                "micromark-util-character": "^2.0.0",
+                "micromark-util-chunked": "^2.0.0",
+                "micromark-util-classify-character": "^2.0.0",
+                "micromark-util-html-tag-name": "^2.0.0",
+                "micromark-util-normalize-identifier": "^2.0.0",
+                "micromark-util-resolve-all": "^2.0.0",
+                "micromark-util-subtokenize": "^2.0.0",
+                "micromark-util-symbol": "^2.0.0",
+                "micromark-util-types": "^2.0.0"
+            }
+        },
+        "node_modules/micromark-extension-gfm": {
+            "version": "3.0.0",
+            "resolved": "https://registry.npmjs.org/micromark-extension-gfm/-/micromark-extension-gfm-3.0.0.tgz",
+            "integrity": "sha512-vsKArQsicm7t0z2GugkCKtZehqUm31oeGBV/KVSorWSy8ZlNAv7ytjFhvaryUiCUJYqs+NoE6AFhpQvBTM6Q4w==",
+            "license": "MIT",
+            "dependencies": {
+                "micromark-extension-gfm-autolink-literal": "^2.0.0",
+                "micromark-extension-gfm-footnote": "^2.0.0",
+                "micromark-extension-gfm-strikethrough": "^2.0.0",
+                "micromark-extension-gfm-table": "^2.0.0",
+                "micromark-extension-gfm-tagfilter": "^2.0.0",
+                "micromark-extension-gfm-task-list-item": "^2.0.0",
+                "micromark-util-combine-extensions": "^2.0.0",
+                "micromark-util-types": "^2.0.0"
+            },
+            "funding": {
+                "type": "opencollective",
+                "url": "https://opencollective.com/unified"
+            }
+        },
+        "node_modules/micromark-extension-gfm-autolink-literal": {
+            "version": "2.1.0",
+            "resolved": "https://registry.npmjs.org/micromark-extension-gfm-autolink-literal/-/micromark-extension-gfm-autolink-literal-2.1.0.tgz",
+            "integrity": "sha512-oOg7knzhicgQ3t4QCjCWgTmfNhvQbDDnJeVu9v81r7NltNCVmhPy1fJRX27pISafdjL+SVc4d3l48Gb6pbRypw==",
+            "license": "MIT",
+            "dependencies": {
+                "micromark-util-character": "^2.0.0",
+                "micromark-util-sanitize-uri": "^2.0.0",
+                "micromark-util-symbol": "^2.0.0",
+                "micromark-util-types": "^2.0.0"
+            },
+            "funding": {
+                "type": "opencollective",
+                "url": "https://opencollective.com/unified"
+            }
+        },
+        "node_modules/micromark-extension-gfm-footnote": {
+            "version": "2.1.0",
+            "resolved": "https://registry.npmjs.org/micromark-extension-gfm-footnote/-/micromark-extension-gfm-footnote-2.1.0.tgz",
+            "integrity": "sha512-/yPhxI1ntnDNsiHtzLKYnE3vf9JZ6cAisqVDauhp4CEHxlb4uoOTxOCJ+9s51bIB8U1N1FJ1RXOKTIlD5B/gqw==",
+            "license": "MIT",
+            "dependencies": {
+                "devlop": "^1.0.0",
+                "micromark-core-commonmark": "^2.0.0",
+                "micromark-factory-space": "^2.0.0",
+                "micromark-util-character": "^2.0.0",
+                "micromark-util-normalize-identifier": "^2.0.0",
+                "micromark-util-sanitize-uri": "^2.0.0",
+                "micromark-util-symbol": "^2.0.0",
+                "micromark-util-types": "^2.0.0"
+            },
+            "funding": {
+                "type": "opencollective",
+                "url": "https://opencollective.com/unified"
+            }
+        },
+        "node_modules/micromark-extension-gfm-strikethrough": {
+            "version": "2.1.0",
+            "resolved": "https://registry.npmjs.org/micromark-extension-gfm-strikethrough/-/micromark-extension-gfm-strikethrough-2.1.0.tgz",
+            "integrity": "sha512-ADVjpOOkjz1hhkZLlBiYA9cR2Anf8F4HqZUO6e5eDcPQd0Txw5fxLzzxnEkSkfnD0wziSGiv7sYhk/ktvbf1uw==",
+            "license": "MIT",
+            "dependencies": {
+                "devlop": "^1.0.0",
+                "micromark-util-chunked": "^2.0.0",
+                "micromark-util-classify-character": "^2.0.0",
+                "micromark-util-resolve-all": "^2.0.0",
+                "micromark-util-symbol": "^2.0.0",
+                "micromark-util-types": "^2.0.0"
+            },
+            "funding": {
+                "type": "opencollective",
+                "url": "https://opencollective.com/unified"
+            }
+        },
+        "node_modules/micromark-extension-gfm-table": {
+            "version": "2.1.1",
+            "resolved": "https://registry.npmjs.org/micromark-extension-gfm-table/-/micromark-extension-gfm-table-2.1.1.tgz",
+            "integrity": "sha512-t2OU/dXXioARrC6yWfJ4hqB7rct14e8f7m0cbI5hUmDyyIlwv5vEtooptH8INkbLzOatzKuVbQmAYcbWoyz6Dg==",
+            "license": "MIT",
+            "dependencies": {
+                "devlop": "^1.0.0",
+                "micromark-factory-space": "^2.0.0",
+                "micromark-util-character": "^2.0.0",
+                "micromark-util-symbol": "^2.0.0",
+                "micromark-util-types": "^2.0.0"
+            },
+            "funding": {
+                "type": "opencollective",
+                "url": "https://opencollective.com/unified"
+            }
+        },
+        "node_modules/micromark-extension-gfm-tagfilter": {
+            "version": "2.0.0",
+            "resolved": "https://registry.npmjs.org/micromark-extension-gfm-tagfilter/-/micromark-extension-gfm-tagfilter-2.0.0.tgz",
+            "integrity": "sha512-xHlTOmuCSotIA8TW1mDIM6X2O1SiX5P9IuDtqGonFhEK0qgRI4yeC6vMxEV2dgyr2TiD+2PQ10o+cOhdVAcwfg==",
+            "license": "MIT",
+            "dependencies": {
+                "micromark-util-types": "^2.0.0"
+            },
+            "funding": {
+                "type": "opencollective",
+                "url": "https://opencollective.com/unified"
+            }
+        },
+        "node_modules/micromark-extension-gfm-task-list-item": {
+            "version": "2.1.0",
+            "resolved": "https://registry.npmjs.org/micromark-extension-gfm-task-list-item/-/micromark-extension-gfm-task-list-item-2.1.0.tgz",
+            "integrity": "sha512-qIBZhqxqI6fjLDYFTBIa4eivDMnP+OZqsNwmQ3xNLE4Cxwc+zfQEfbs6tzAo2Hjq+bh6q5F+Z8/cksrLFYWQQw==",
+            "license": "MIT",
+            "dependencies": {
+                "devlop": "^1.0.0",
+                "micromark-factory-space": "^2.0.0",
+                "micromark-util-character": "^2.0.0",
+                "micromark-util-symbol": "^2.0.0",
+                "micromark-util-types": "^2.0.0"
+            },
+            "funding": {
+                "type": "opencollective",
+                "url": "https://opencollective.com/unified"
+            }
+        },
+        "node_modules/micromark-factory-destination": {
+            "version": "2.0.1",
+            "resolved": "https://registry.npmjs.org/micromark-factory-destination/-/micromark-factory-destination-2.0.1.tgz",
+            "integrity": "sha512-Xe6rDdJlkmbFRExpTOmRj9N3MaWmbAgdpSrBQvCFqhezUn4AHqJHbaEnfbVYYiexVSs//tqOdY/DxhjdCiJnIA==",
+            "funding": [
+                {
+                    "type": "GitHub Sponsors",
+                    "url": "https://github.com/sponsors/unifiedjs"
+                },
+                {
+                    "type": "OpenCollective",
+                    "url": "https://opencollective.com/unified"
+                }
+            ],
+            "license": "MIT",
+            "dependencies": {
+                "micromark-util-character": "^2.0.0",
+                "micromark-util-symbol": "^2.0.0",
+                "micromark-util-types": "^2.0.0"
+            }
+        },
+        "node_modules/micromark-factory-label": {
+            "version": "2.0.1",
+            "resolved": "https://registry.npmjs.org/micromark-factory-label/-/micromark-factory-label-2.0.1.tgz",
+            "integrity": "sha512-VFMekyQExqIW7xIChcXn4ok29YE3rnuyveW3wZQWWqF4Nv9Wk5rgJ99KzPvHjkmPXF93FXIbBp6YdW3t71/7Vg==",
+            "funding": [
+                {
+                    "type": "GitHub Sponsors",
+                    "url": "https://github.com/sponsors/unifiedjs"
+                },
+                {
+                    "type": "OpenCollective",
+                    "url": "https://opencollective.com/unified"
+                }
+            ],
+            "license": "MIT",
+            "dependencies": {
+                "devlop": "^1.0.0",
+                "micromark-util-character": "^2.0.0",
+                "micromark-util-symbol": "^2.0.0",
+                "micromark-util-types": "^2.0.0"
+            }
+        },
+        "node_modules/micromark-factory-space": {
+            "version": "2.0.1",
+            "resolved": "https://registry.npmjs.org/micromark-factory-space/-/micromark-factory-space-2.0.1.tgz",
+            "integrity": "sha512-zRkxjtBxxLd2Sc0d+fbnEunsTj46SWXgXciZmHq0kDYGnck/ZSGj9/wULTV95uoeYiK5hRXP2mJ98Uo4cq/LQg==",
+            "funding": [
+                {
+                    "type": "GitHub Sponsors",
+                    "url": "https://github.com/sponsors/unifiedjs"
+                },
+                {
+                    "type": "OpenCollective",
+                    "url": "https://opencollective.com/unified"
+                }
+            ],
+            "license": "MIT",
+            "dependencies": {
+                "micromark-util-character": "^2.0.0",
+                "micromark-util-types": "^2.0.0"
+            }
+        },
+        "node_modules/micromark-factory-title": {
+            "version": "2.0.1",
+            "resolved": "https://registry.npmjs.org/micromark-factory-title/-/micromark-factory-title-2.0.1.tgz",
+            "integrity": "sha512-5bZ+3CjhAd9eChYTHsjy6TGxpOFSKgKKJPJxr293jTbfry2KDoWkhBb6TcPVB4NmzaPhMs1Frm9AZH7OD4Cjzw==",
+            "funding": [
+                {
+                    "type": "GitHub Sponsors",
+                    "url": "https://github.com/sponsors/unifiedjs"
+                },
+                {
+                    "type": "OpenCollective",
+                    "url": "https://opencollective.com/unified"
+                }
+            ],
+            "license": "MIT",
+            "dependencies": {
+                "micromark-factory-space": "^2.0.0",
+                "micromark-util-character": "^2.0.0",
+                "micromark-util-symbol": "^2.0.0",
+                "micromark-util-types": "^2.0.0"
+            }
+        },
+        "node_modules/micromark-factory-whitespace": {
+            "version": "2.0.1",
+            "resolved": "https://registry.npmjs.org/micromark-factory-whitespace/-/micromark-factory-whitespace-2.0.1.tgz",
+            "integrity": "sha512-Ob0nuZ3PKt/n0hORHyvoD9uZhr+Za8sFoP+OnMcnWK5lngSzALgQYKMr9RJVOWLqQYuyn6ulqGWSXdwf6F80lQ==",
+            "funding": [
+                {
+                    "type": "GitHub Sponsors",
+                    "url": "https://github.com/sponsors/unifiedjs"
+                },
+                {
+                    "type": "OpenCollective",
+                    "url": "https://opencollective.com/unified"
+                }
+            ],
+            "license": "MIT",
+            "dependencies": {
+                "micromark-factory-space": "^2.0.0",
+                "micromark-util-character": "^2.0.0",
+                "micromark-util-symbol": "^2.0.0",
+                "micromark-util-types": "^2.0.0"
+            }
+        },
+        "node_modules/micromark-util-character": {
+            "version": "2.1.1",
+            "resolved": "https://registry.npmjs.org/micromark-util-character/-/micromark-util-character-2.1.1.tgz",
+            "integrity": "sha512-wv8tdUTJ3thSFFFJKtpYKOYiGP2+v96Hvk4Tu8KpCAsTMs6yi+nVmGh1syvSCsaxz45J6Jbw+9DD6g97+NV67Q==",
+            "funding": [
+                {
+                    "type": "GitHub Sponsors",
+                    "url": "https://github.com/sponsors/unifiedjs"
+                },
+                {
+                    "type": "OpenCollective",
+                    "url": "https://opencollective.com/unified"
+                }
+            ],
+            "license": "MIT",
+            "dependencies": {
+                "micromark-util-symbol": "^2.0.0",
+                "micromark-util-types": "^2.0.0"
+            }
+        },
+        "node_modules/micromark-util-chunked": {
+            "version": "2.0.1",
+            "resolved": "https://registry.npmjs.org/micromark-util-chunked/-/micromark-util-chunked-2.0.1.tgz",
+            "integrity": "sha512-QUNFEOPELfmvv+4xiNg2sRYeS/P84pTW0TCgP5zc9FpXetHY0ab7SxKyAQCNCc1eK0459uoLI1y5oO5Vc1dbhA==",
+            "funding": [
+                {
+                    "type": "GitHub Sponsors",
+                    "url": "https://github.com/sponsors/unifiedjs"
+                },
+                {
+                    "type": "OpenCollective",
+                    "url": "https://opencollective.com/unified"
+                }
+            ],
+            "license": "MIT",
+            "dependencies": {
+                "micromark-util-symbol": "^2.0.0"
+            }
+        },
+        "node_modules/micromark-util-classify-character": {
+            "version": "2.0.1",
+            "resolved": "https://registry.npmjs.org/micromark-util-classify-character/-/micromark-util-classify-character-2.0.1.tgz",
+            "integrity": "sha512-K0kHzM6afW/MbeWYWLjoHQv1sgg2Q9EccHEDzSkxiP/EaagNzCm7T/WMKZ3rjMbvIpvBiZgwR3dKMygtA4mG1Q==",
+            "funding": [
+                {
+                    "type": "GitHub Sponsors",
+                    "url": "https://github.com/sponsors/unifiedjs"
+                },
+                {
+                    "type": "OpenCollective",
+                    "url": "https://opencollective.com/unified"
+                }
+            ],
+            "license": "MIT",
+            "dependencies": {
+                "micromark-util-character": "^2.0.0",
+                "micromark-util-symbol": "^2.0.0",
+                "micromark-util-types": "^2.0.0"
+            }
+        },
+        "node_modules/micromark-util-combine-extensions": {
+            "version": "2.0.1",
+            "resolved": "https://registry.npmjs.org/micromark-util-combine-extensions/-/micromark-util-combine-extensions-2.0.1.tgz",
+            "integrity": "sha512-OnAnH8Ujmy59JcyZw8JSbK9cGpdVY44NKgSM7E9Eh7DiLS2E9RNQf0dONaGDzEG9yjEl5hcqeIsj4hfRkLH/Bg==",
+            "funding": [
+                {
+                    "type": "GitHub Sponsors",
+                    "url": "https://github.com/sponsors/unifiedjs"
+                },
+                {
+                    "type": "OpenCollective",
+                    "url": "https://opencollective.com/unified"
+                }
+            ],
+            "license": "MIT",
+            "dependencies": {
+                "micromark-util-chunked": "^2.0.0",
+                "micromark-util-types": "^2.0.0"
+            }
+        },
+        "node_modules/micromark-util-decode-numeric-character-reference": {
+            "version": "2.0.2",
+            "resolved": "https://registry.npmjs.org/micromark-util-decode-numeric-character-reference/-/micromark-util-decode-numeric-character-reference-2.0.2.tgz",
+            "integrity": "sha512-ccUbYk6CwVdkmCQMyr64dXz42EfHGkPQlBj5p7YVGzq8I7CtjXZJrubAYezf7Rp+bjPseiROqe7G6foFd+lEuw==",
+            "funding": [
+                {
+                    "type": "GitHub Sponsors",
+                    "url": "https://github.com/sponsors/unifiedjs"
+                },
+                {
+                    "type": "OpenCollective",
+                    "url": "https://opencollective.com/unified"
+                }
+            ],
+            "license": "MIT",
+            "dependencies": {
+                "micromark-util-symbol": "^2.0.0"
+            }
+        },
+        "node_modules/micromark-util-decode-string": {
+            "version": "2.0.1",
+            "resolved": "https://registry.npmjs.org/micromark-util-decode-string/-/micromark-util-decode-string-2.0.1.tgz",
+            "integrity": "sha512-nDV/77Fj6eH1ynwscYTOsbK7rR//Uj0bZXBwJZRfaLEJ1iGBR6kIfNmlNqaqJf649EP0F3NWNdeJi03elllNUQ==",
+            "funding": [
+                {
+                    "type": "GitHub Sponsors",
+                    "url": "https://github.com/sponsors/unifiedjs"
+                },
+                {
+                    "type": "OpenCollective",
+                    "url": "https://opencollective.com/unified"
+                }
+            ],
+            "license": "MIT",
+            "dependencies": {
+                "decode-named-character-reference": "^1.0.0",
+                "micromark-util-character": "^2.0.0",
+                "micromark-util-decode-numeric-character-reference": "^2.0.0",
+                "micromark-util-symbol": "^2.0.0"
+            }
+        },
+        "node_modules/micromark-util-encode": {
+            "version": "2.0.1",
+            "resolved": "https://registry.npmjs.org/micromark-util-encode/-/micromark-util-encode-2.0.1.tgz",
+            "integrity": "sha512-c3cVx2y4KqUnwopcO9b/SCdo2O67LwJJ/UyqGfbigahfegL9myoEFoDYZgkT7f36T0bLrM9hZTAaAyH+PCAXjw==",
+            "funding": [
+                {
+                    "type": "GitHub Sponsors",
+                    "url": "https://github.com/sponsors/unifiedjs"
+                },
+                {
+                    "type": "OpenCollective",
+                    "url": "https://opencollective.com/unified"
+                }
+            ],
+            "license": "MIT"
+        },
+        "node_modules/micromark-util-html-tag-name": {
+            "version": "2.0.1",
+            "resolved": "https://registry.npmjs.org/micromark-util-html-tag-name/-/micromark-util-html-tag-name-2.0.1.tgz",
+            "integrity": "sha512-2cNEiYDhCWKI+Gs9T0Tiysk136SnR13hhO8yW6BGNyhOC4qYFnwF1nKfD3HFAIXA5c45RrIG1ub11GiXeYd1xA==",
+            "funding": [
+                {
+                    "type": "GitHub Sponsors",
+                    "url": "https://github.com/sponsors/unifiedjs"
+                },
+                {
+                    "type": "OpenCollective",
+                    "url": "https://opencollective.com/unified"
+                }
+            ],
+            "license": "MIT"
+        },
+        "node_modules/micromark-util-normalize-identifier": {
+            "version": "2.0.1",
+            "resolved": "https://registry.npmjs.org/micromark-util-normalize-identifier/-/micromark-util-normalize-identifier-2.0.1.tgz",
+            "integrity": "sha512-sxPqmo70LyARJs0w2UclACPUUEqltCkJ6PhKdMIDuJ3gSf/Q+/GIe3WKl0Ijb/GyH9lOpUkRAO2wp0GVkLvS9Q==",
+            "funding": [
+                {
+                    "type": "GitHub Sponsors",
+                    "url": "https://github.com/sponsors/unifiedjs"
+                },
+                {
+                    "type": "OpenCollective",
+                    "url": "https://opencollective.com/unified"
+                }
+            ],
+            "license": "MIT",
+            "dependencies": {
+                "micromark-util-symbol": "^2.0.0"
+            }
+        },
+        "node_modules/micromark-util-resolve-all": {
+            "version": "2.0.1",
+            "resolved": "https://registry.npmjs.org/micromark-util-resolve-all/-/micromark-util-resolve-all-2.0.1.tgz",
+            "integrity": "sha512-VdQyxFWFT2/FGJgwQnJYbe1jjQoNTS4RjglmSjTUlpUMa95Htx9NHeYW4rGDJzbjvCsl9eLjMQwGeElsqmzcHg==",
+            "funding": [
+                {
+                    "type": "GitHub Sponsors",
+                    "url": "https://github.com/sponsors/unifiedjs"
+                },
+                {
+                    "type": "OpenCollective",
+                    "url": "https://opencollective.com/unified"
+                }
+            ],
+            "license": "MIT",
+            "dependencies": {
+                "micromark-util-types": "^2.0.0"
+            }
+        },
+        "node_modules/micromark-util-sanitize-uri": {
+            "version": "2.0.1",
+            "resolved": "https://registry.npmjs.org/micromark-util-sanitize-uri/-/micromark-util-sanitize-uri-2.0.1.tgz",
+            "integrity": "sha512-9N9IomZ/YuGGZZmQec1MbgxtlgougxTodVwDzzEouPKo3qFWvymFHWcnDi2vzV1ff6kas9ucW+o3yzJK9YB1AQ==",
+            "funding": [
+                {
+                    "type": "GitHub Sponsors",
+                    "url": "https://github.com/sponsors/unifiedjs"
+                },
+                {
+                    "type": "OpenCollective",
+                    "url": "https://opencollective.com/unified"
+                }
+            ],
+            "license": "MIT",
+            "dependencies": {
+                "micromark-util-character": "^2.0.0",
+                "micromark-util-encode": "^2.0.0",
+                "micromark-util-symbol": "^2.0.0"
+            }
+        },
+        "node_modules/micromark-util-subtokenize": {
+            "version": "2.1.0",
+            "resolved": "https://registry.npmjs.org/micromark-util-subtokenize/-/micromark-util-subtokenize-2.1.0.tgz",
+            "integrity": "sha512-XQLu552iSctvnEcgXw6+Sx75GflAPNED1qx7eBJ+wydBb2KCbRZe+NwvIEEMM83uml1+2WSXpBAcp9IUCgCYWA==",
+            "funding": [
+                {
+                    "type": "GitHub Sponsors",
+                    "url": "https://github.com/sponsors/unifiedjs"
+                },
+                {
+                    "type": "OpenCollective",
+                    "url": "https://opencollective.com/unified"
+                }
+            ],
+            "license": "MIT",
+            "dependencies": {
+                "devlop": "^1.0.0",
+                "micromark-util-chunked": "^2.0.0",
+                "micromark-util-symbol": "^2.0.0",
+                "micromark-util-types": "^2.0.0"
+            }
+        },
+        "node_modules/micromark-util-symbol": {
+            "version": "2.0.1",
+            "resolved": "https://registry.npmjs.org/micromark-util-symbol/-/micromark-util-symbol-2.0.1.tgz",
+            "integrity": "sha512-vs5t8Apaud9N28kgCrRUdEed4UJ+wWNvicHLPxCa9ENlYuAY31M0ETy5y1vA33YoNPDFTghEbnh6efaE8h4x0Q==",
+            "funding": [
+                {
+                    "type": "GitHub Sponsors",
+                    "url": "https://github.com/sponsors/unifiedjs"
+                },
+                {
+                    "type": "OpenCollective",
+                    "url": "https://opencollective.com/unified"
+                }
+            ],
+            "license": "MIT"
+        },
+        "node_modules/micromark-util-types": {
+            "version": "2.0.2",
+            "resolved": "https://registry.npmjs.org/micromark-util-types/-/micromark-util-types-2.0.2.tgz",
+            "integrity": "sha512-Yw0ECSpJoViF1qTU4DC6NwtC4aWGt1EkzaQB8KPPyCRR8z9TWeV0HbEFGTO+ZY1wB22zmxnJqhPyTpOVCpeHTA==",
+            "funding": [
+                {
+                    "type": "GitHub Sponsors",
+                    "url": "https://github.com/sponsors/unifiedjs"
+                },
+                {
+                    "type": "OpenCollective",
+                    "url": "https://opencollective.com/unified"
+                }
+            ],
+            "license": "MIT"
+        },
+        "node_modules/minimatch": {
+            "version": "9.0.9",
+            "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-9.0.9.tgz",
+            "integrity": "sha512-OBwBN9AL4dqmETlpS2zasx+vTeWclWzkblfZk7KTA5j3jeOONz/tRCnZomUyvNg83wL5Zv9Ss6HMJXAgL8R2Yg==",
+            "dev": true,
+            "license": "ISC",
+            "dependencies": {
+                "brace-expansion": "^2.0.2"
+            },
+            "engines": {
+                "node": ">=16 || 14 >=14.17"
+            },
+            "funding": {
+                "url": "https://github.com/sponsors/isaacs"
+            }
+        },
+        "node_modules/motion": {
+            "version": "12.42.2",
+            "resolved": "https://registry.npmjs.org/motion/-/motion-12.42.2.tgz",
+            "integrity": "sha512-Atvv11yUKIid41cVrRBDVX5m8tF8kNpExRSlbpt6APClhDjtwQssgFHhQzejxw7/7YYbjHSPKBVbHo05BuJT5Q==",
+            "license": "MIT",
+            "dependencies": {
+                "framer-motion": "^12.42.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"
+            },
+            "peerDependenciesMeta": {
+                "@emotion/is-prop-valid": {
+                    "optional": true
+                },
+                "react": {
+                    "optional": true
+                },
+                "react-dom": {
+                    "optional": true
+                }
+            }
+        },
+        "node_modules/motion-dom": {
+            "version": "12.42.2",
+            "resolved": "https://registry.npmjs.org/motion-dom/-/motion-dom-12.42.2.tgz",
+            "integrity": "sha512-5gIMWLp/PycBtJRJWRgjxke5n8dlvkSn2DrYW+tr3XcqAZY1xZh6BJyooJXCM8wdfM7wfMjkBJNLge1CKPUIRA==",
+            "license": "MIT",
+            "dependencies": {
+                "motion-utils": "^12.39.0"
+            }
+        },
+        "node_modules/motion-utils": {
+            "version": "12.39.0",
+            "resolved": "https://registry.npmjs.org/motion-utils/-/motion-utils-12.39.0.tgz",
+            "integrity": "sha512-8nadJAJjTtqRkmRF36FoJTrywK9nnFmnPwnSMyxaOCU7GDjN9RTMJIxx9De8ErM+vpPhMccr/6fo5WciyQLnMQ==",
+            "license": "MIT"
+        },
+        "node_modules/ms": {
+            "version": "2.1.3",
+            "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz",
+            "integrity": "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==",
+            "license": "MIT"
+        },
+        "node_modules/nanoid": {
+            "version": "3.3.15",
+            "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.15.tgz",
+            "integrity": "sha512-y7Wygv/7mEOvxTuEQDB8StXdMRBWf1kR/tlhAzBRUFkB2jfcLOAxO/SHmOO2zgz1pVgK29/kyupn059/bCHdjA==",
+            "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": "https://registry.npmjs.org/natural-compare/-/natural-compare-1.4.0.tgz",
+            "integrity": "sha512-OWND8ei3VtNC9h7V60qff3SVobHr996CTwgxubgyQYEpg290h9J0buyECNNJexkFm5sOajh5G116RYA1c8ZMSw==",
+            "dev": true,
+            "license": "MIT"
+        },
+        "node_modules/optionator": {
+            "version": "0.9.4",
+            "resolved": "https://registry.npmjs.org/optionator/-/optionator-0.9.4.tgz",
+            "integrity": "sha512-6IpQ7mKUxRcZNLIObR0hz7lxsapSSIYNZJwXPGeF0mTVqGKFIXj1DQcMoT22S3ROcLyY/rz0PWaWZ9ayWmad9g==",
+            "dev": true,
+            "license": "MIT",
+            "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": "https://registry.npmjs.org/p-limit/-/p-limit-3.1.0.tgz",
+            "integrity": "sha512-TYOanM3wGwNGsZN2cVTYPArw454xnXj5qmWF1bEoAc4+cU/ol7GVh7odevjp1FNHduHc3KZMcFduxU5Xc6uJRQ==",
+            "dev": true,
+            "license": "MIT",
+            "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": "https://registry.npmjs.org/p-locate/-/p-locate-5.0.0.tgz",
+            "integrity": "sha512-LaNjtRWUBY++zB5nE/NwcaoMylSPk+S+ZHNB1TzdbMJMny6dynpAGt7X/tl/QYq3TIeE6nxHppbo2LGymrG5Pw==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "p-limit": "^3.0.2"
+            },
+            "engines": {
+                "node": ">=10"
+            },
+            "funding": {
+                "url": "https://github.com/sponsors/sindresorhus"
+            }
+        },
+        "node_modules/parse-entities": {
+            "version": "4.0.2",
+            "resolved": "https://registry.npmjs.org/parse-entities/-/parse-entities-4.0.2.tgz",
+            "integrity": "sha512-GG2AQYWoLgL877gQIKeRPGO1xF9+eG1ujIb5soS5gPvLQ1y2o8FL90w2QWNdf9I361Mpp7726c+lj3U0qK1uGw==",
+            "license": "MIT",
+            "dependencies": {
+                "@types/unist": "^2.0.0",
+                "character-entities-legacy": "^3.0.0",
+                "character-reference-invalid": "^2.0.0",
+                "decode-named-character-reference": "^1.0.0",
+                "is-alphanumerical": "^2.0.0",
+                "is-decimal": "^2.0.0",
+                "is-hexadecimal": "^2.0.0"
+            },
+            "funding": {
+                "type": "github",
+                "url": "https://github.com/sponsors/wooorm"
+            }
+        },
+        "node_modules/parse-entities/node_modules/@types/unist": {
+            "version": "2.0.11",
+            "resolved": "https://registry.npmjs.org/@types/unist/-/unist-2.0.11.tgz",
+            "integrity": "sha512-CmBKiL6NNo/OqgmMn95Fk9Whlp2mtvIv+KNpQKN2F4SjvrEesubTRWGYSg+BnWZOnlCaSTU1sMpsBOzgbYhnsA==",
+            "license": "MIT"
+        },
+        "node_modules/parse-imports-exports": {
+            "version": "0.2.4",
+            "resolved": "https://registry.npmjs.org/parse-imports-exports/-/parse-imports-exports-0.2.4.tgz",
+            "integrity": "sha512-4s6vd6dx1AotCx/RCI2m7t7GCh5bDRUtGNvRfHSP2wbBQdMi67pPe7mtzmgwcaQ8VKK/6IB7Glfyu3qdZJPybQ==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "parse-statements": "1.0.11"
+            }
+        },
+        "node_modules/parse-statements": {
+            "version": "1.0.11",
+            "resolved": "https://registry.npmjs.org/parse-statements/-/parse-statements-1.0.11.tgz",
+            "integrity": "sha512-HlsyYdMBnbPQ9Jr/VgJ1YF4scnldvJpJxCVx6KgqPL4dxppsWrJHCIIxQXMJrqGnsRkNPATbeMJ8Yxu7JMsYcA==",
+            "dev": true,
+            "license": "MIT"
+        },
+        "node_modules/path-exists": {
+            "version": "4.0.0",
+            "resolved": "https://registry.npmjs.org/path-exists/-/path-exists-4.0.0.tgz",
+            "integrity": "sha512-ak9Qy5Q7jYb2Wwcey5Fpvg2KoAc/ZIhLSLOSBmRmygPsGwkVVt0fZa0qrtMz+m6tJTAHfZQ8FnmB4MG4LWy7/w==",
+            "dev": true,
+            "license": "MIT",
+            "engines": {
+                "node": ">=8"
+            }
+        },
+        "node_modules/path-key": {
+            "version": "3.1.1",
+            "resolved": "https://registry.npmjs.org/path-key/-/path-key-3.1.1.tgz",
+            "integrity": "sha512-ojmeN0qd+y0jszEtoY48r0Peq5dwMEkIlCOu6Q5f41lfkswXuKtYrhgoTpLnyIcHm24Uhqx+5Tqm2InSwLhE6Q==",
+            "dev": true,
+            "license": "MIT",
+            "engines": {
+                "node": ">=8"
+            }
+        },
+        "node_modules/picocolors": {
+            "version": "1.1.1",
+            "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.1.1.tgz",
+            "integrity": "sha512-xceH2snhtb5M9liqDsmEw56le376mTZkEX/jEb/RxNFyegNul7eNslCXP9FDj/Lcu0X8KEyMceP2ntpaHrDEVA==",
+            "license": "ISC"
+        },
+        "node_modules/picomatch": {
+            "version": "4.0.4",
+            "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-4.0.4.tgz",
+            "integrity": "sha512-QP88BAKvMam/3NxH6vj2o21R6MjxZUAd6nlwAS/pnGvN9IVLocLHxGYIzFhg6fUQ+5th6P4dv4eW9jX3DSIj7A==",
+            "license": "MIT",
+            "peer": true,
+            "engines": {
+                "node": ">=12"
+            },
+            "funding": {
+                "url": "https://github.com/sponsors/jonschlinkert"
+            }
+        },
+        "node_modules/postcss": {
+            "version": "8.5.16",
+            "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.5.16.tgz",
+            "integrity": "sha512-vuwillviilfKZsg0VGj5R/YwwcHx4SLsIOI/7K6mQkWx+l5cUHTjj5g0AasTBcyXsbfTgrwsUNmVUb5xVwyPwg==",
+            "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.12",
+                "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": "https://registry.npmjs.org/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": "https://registry.npmjs.org/prelude-ls/-/prelude-ls-1.2.1.tgz",
+            "integrity": "sha512-vkcDPrRZo1QZLbn5RLGPpg/WmIQ65qoWWhcGKf/b5eplkkarX0m9z8ppCat4mlOqUsWpyNuYgO3VRyrYHSzX5g==",
+            "dev": true,
+            "license": "MIT",
+            "engines": {
+                "node": ">= 0.8.0"
+            }
+        },
+        "node_modules/prettier": {
+            "version": "3.9.4",
+            "resolved": "https://registry.npmjs.org/prettier/-/prettier-3.9.4.tgz",
+            "integrity": "sha512-yWG/o/4oJfo036EKAfK6ACAoDOfHeRHx4tuxkfBZiauURiaSmYwlpOr5LQqKtIkRD2z1PLteme2WoxEnj4tHTg==",
+            "dev": true,
+            "license": "MIT",
+            "peer": true,
+            "bin": {
+                "prettier": "bin/prettier.cjs"
+            },
+            "engines": {
+                "node": ">=14"
+            },
+            "funding": {
+                "url": "https://github.com/prettier/prettier?sponsor=1"
+            }
+        },
+        "node_modules/prettier-plugin-tailwindcss": {
+            "version": "0.7.4",
+            "resolved": "https://registry.npmjs.org/prettier-plugin-tailwindcss/-/prettier-plugin-tailwindcss-0.7.4.tgz",
+            "integrity": "sha512-UKii4RjY05SNt/WQi6/NcOn/LsT0/ILLXsxygjbRg5/YZelsSu5jTqorYHPDGq4nZy5q5hpCu+XdGZ1xaJEQgw==",
+            "dev": true,
+            "license": "MIT",
+            "engines": {
+                "node": ">=20.19"
+            },
+            "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-jsdoc": "*",
+                "prettier-plugin-marko": "*",
+                "prettier-plugin-multiline-arrays": "*",
+                "prettier-plugin-organize-attributes": "*",
+                "prettier-plugin-organize-imports": "*",
+                "prettier-plugin-sort-imports": "*",
+                "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-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-svelte": {
+                    "optional": true
+                }
+            }
+        },
+        "node_modules/property-information": {
+            "version": "7.2.0",
+            "resolved": "https://registry.npmjs.org/property-information/-/property-information-7.2.0.tgz",
+            "integrity": "sha512-IAtzIB6sUiWaJYrX9smp3V46pBGbBeLFRGdh25kg1334VcBlD8HzhPeNIWQH9zhGmo2itIe25EHt9dQP7G5hmg==",
+            "license": "MIT",
+            "funding": {
+                "type": "github",
+                "url": "https://github.com/sponsors/wooorm"
+            }
+        },
+        "node_modules/punycode": {
+            "version": "2.3.1",
+            "resolved": "https://registry.npmjs.org/punycode/-/punycode-2.3.1.tgz",
+            "integrity": "sha512-vYt7UD1U9Wg6138shLtLOvdAu+8DsC/ilFtEVHcH+wydcSpNE20AfSOduf6MkRFahL5FY7X1oU7nKVZFtfq8Fg==",
+            "dev": true,
+            "license": "MIT",
+            "engines": {
+                "node": ">=6"
+            }
+        },
+        "node_modules/qr-code-styling": {
+            "version": "1.9.2",
+            "resolved": "https://registry.npmjs.org/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": "https://registry.npmjs.org/qrcode-generator/-/qrcode-generator-1.5.2.tgz",
+            "integrity": "sha512-pItrW0Z9HnDBnFmgiNrY1uxRdri32Uh9EjNYLPVC2zZ3ZRIIEqBoDgm4DkvDwNNDHTK7FNkmr8zAa77BYc9xNw==",
+            "license": "MIT"
+        },
+        "node_modules/react": {
+            "version": "19.2.7",
+            "resolved": "https://registry.npmjs.org/react/-/react-19.2.7.tgz",
+            "integrity": "sha512-HNe9WslTbXmFK8o8cmwgAeJFSBvt1bPdHCVKtaaV+WlAN36mpT4hcRpwbf3fY56ar2oIXzsBpOAiIRHAdY0OlQ==",
+            "license": "MIT",
+            "peer": true,
+            "engines": {
+                "node": ">=0.10.0"
+            }
+        },
+        "node_modules/react-aria": {
+            "version": "3.50.0",
+            "resolved": "https://registry.npmjs.org/react-aria/-/react-aria-3.50.0.tgz",
+            "integrity": "sha512-S0Os6QZk33fzUAKu1QLT9afoUaCBt1ZNdoiq0n2YMVgKIdNIQS8zxiZ8O9hYE6QyDkHKjD6q39LQZ+qaSAIgjw==",
+            "license": "Apache-2.0",
+            "dependencies": {
+                "@internationalized/date": "^3.12.2",
+                "@internationalized/number": "^3.6.7",
+                "@internationalized/string": "^3.2.9",
+                "@react-types/shared": "^3.36.0",
+                "@swc/helpers": "^0.5.0",
+                "aria-hidden": "^1.2.3",
+                "clsx": "^2.0.0",
+                "react-stately": "3.48.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-components": {
+            "version": "1.19.0",
+            "resolved": "https://registry.npmjs.org/react-aria-components/-/react-aria-components-1.19.0.tgz",
+            "integrity": "sha512-2smSS5nqJ8cGYMQezuUXveZm7eMyHCqTN6mDpylQBYLYbdF5dxCCuW1DHn1VKLe1DybSfPvX/cZtJlDmvFfn8A==",
+            "license": "Apache-2.0",
+            "dependencies": {
+                "@internationalized/date": "^3.12.2",
+                "@react-types/shared": "^3.36.0",
+                "@swc/helpers": "^0.5.0",
+                "client-only": "^0.0.1",
+                "react-aria": "3.50.0",
+                "react-stately": "3.48.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.7",
+            "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-19.2.7.tgz",
+            "integrity": "sha512-t0BRVXvbiE/o20Hfw669rLbMCDWtYZLvmJigy2f0MxsXF+71pxhR3xOkspmsO8h3ZlNzyibAmtCa3l4lYKk6gQ==",
+            "license": "MIT",
+            "peer": true,
+            "dependencies": {
+                "scheduler": "^0.27.0"
+            },
+            "peerDependencies": {
+                "react": "^19.2.7"
+            }
+        },
+        "node_modules/react-hotkeys-hook": {
+            "version": "5.3.3",
+            "resolved": "https://registry.npmjs.org/react-hotkeys-hook/-/react-hotkeys-hook-5.3.3.tgz",
+            "integrity": "sha512-aswgyWUnE25hmhzHTfKDmKzsaSE5DJ4LKaU/o6rQSXkDd/1Bh9TfAFQbHkf6fLy11HvlYkp+cDDarGdhmCDhoQ==",
+            "license": "MIT",
+            "workspaces": [
+                "packages/*"
+            ],
+            "peerDependencies": {
+                "react": ">=16.8.0",
+                "react-dom": ">=16.8.0"
+            }
+        },
+        "node_modules/react-is": {
+            "version": "19.2.7",
+            "resolved": "https://registry.npmjs.org/react-is/-/react-is-19.2.7.tgz",
+            "integrity": "sha512-kZFnouyVv7eP/Phmrlo9FK+zcAdriZJvzxXHF1Sl1P377WSGe2G/JxVolhTrB/jeV47lKImhNUsijjHAAbcl/A==",
+            "license": "MIT",
+            "peer": true
+        },
+        "node_modules/react-markdown": {
+            "version": "10.1.0",
+            "resolved": "https://registry.npmjs.org/react-markdown/-/react-markdown-10.1.0.tgz",
+            "integrity": "sha512-qKxVopLT/TyA6BX3Ue5NwabOsAzm0Q7kAPwq6L+wWDwisYs7R8vZ0nRXqq6rkueboxpkjvLGU9fWifiX/ZZFxQ==",
+            "license": "MIT",
+            "dependencies": {
+                "@types/hast": "^3.0.0",
+                "@types/mdast": "^4.0.0",
+                "devlop": "^1.0.0",
+                "hast-util-to-jsx-runtime": "^2.0.0",
+                "html-url-attributes": "^3.0.0",
+                "mdast-util-to-hast": "^13.0.0",
+                "remark-parse": "^11.0.0",
+                "remark-rehype": "^11.0.0",
+                "unified": "^11.0.0",
+                "unist-util-visit": "^5.0.0",
+                "vfile": "^6.0.0"
+            },
+            "funding": {
+                "type": "opencollective",
+                "url": "https://opencollective.com/unified"
+            },
+            "peerDependencies": {
+                "@types/react": ">=18",
+                "react": ">=18"
+            }
+        },
+        "node_modules/react-redux": {
+            "version": "9.3.0",
+            "resolved": "https://registry.npmjs.org/react-redux/-/react-redux-9.3.0.tgz",
+            "integrity": "sha512-KQopgqFo/p/fgmAs5qz6p5RWaNAzq40WAu7fJIXnQpYxFPbJYtsJPWvGeF2rOBaY/kEuV77AVsX8TsQzKm+A/g==",
+            "license": "MIT",
+            "peer": true,
+            "dependencies": {
+                "@types/use-sync-external-store": "^0.0.6",
+                "use-sync-external-store": "^1.4.0"
+            },
+            "peerDependencies": {
+                "@types/react": "^18.2.25 || ^19",
+                "react": "^18.0 || ^19",
+                "redux": "^5.0.0"
+            },
+            "peerDependenciesMeta": {
+                "@types/react": {
+                    "optional": true
+                },
+                "redux": {
+                    "optional": true
+                }
+            }
+        },
+        "node_modules/react-router": {
+            "version": "7.18.1",
+            "resolved": "https://registry.npmjs.org/react-router/-/react-router-7.18.1.tgz",
+            "integrity": "sha512-GDLgg3i3uM0aeJO3Fm+TCS+sDQ7gu12T6x0qdTEzcwqEfleci7JwugVNIF3U//0FWKnJT7ptG+20B2jfDqnZAg==",
+            "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.48.0",
+            "resolved": "https://registry.npmjs.org/react-stately/-/react-stately-3.48.0.tgz",
+            "integrity": "sha512-ImicSAG+lTotAe5izcs1fz49Zk48w7pDusqYg04WaPhCoej8BJ24soMu3iLXIrsi273s4P1gZrYGrqReMfgEEA==",
+            "license": "Apache-2.0",
+            "dependencies": {
+                "@internationalized/date": "^3.12.2",
+                "@internationalized/number": "^3.6.7",
+                "@internationalized/string": "^3.2.9",
+                "@react-types/shared": "^3.36.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"
+            }
+        },
+        "node_modules/recharts": {
+            "version": "3.9.1",
+            "resolved": "https://registry.npmjs.org/recharts/-/recharts-3.9.1.tgz",
+            "integrity": "sha512-WMcwlXcB7l+BbxiEdyClkG+1sxrMHNZpzT577LEvU4+rXPd8oTAy1wXk72hnk2KOOmxuLvw3z5DtXT7HEAydtg==",
+            "license": "MIT",
+            "workspaces": [
+                "www"
+            ],
+            "dependencies": {
+                "@reduxjs/toolkit": "^1.9.0 || 2.x.x",
+                "clsx": "^2.1.1",
+                "decimal.js-light": "^2.5.1",
+                "es-toolkit": "^1.39.3",
+                "eventemitter3": "^5.0.1",
+                "immer": "^11.1.8",
+                "react-redux": "8.x.x || 9.x.x",
+                "reselect": "5.2.0",
+                "tiny-invariant": "^1.3.3",
+                "use-sync-external-store": "^1.2.2",
+                "victory-vendor": "^37.0.2"
+            },
+            "engines": {
+                "node": ">=18"
+            },
+            "peerDependencies": {
+                "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0",
+                "react-dom": "^16.0.0 || ^17.0.0 || ^18.0.0 || ^19.0.0",
+                "react-is": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
+            }
+        },
+        "node_modules/redux": {
+            "version": "5.0.1",
+            "resolved": "https://registry.npmjs.org/redux/-/redux-5.0.1.tgz",
+            "integrity": "sha512-M9/ELqF6fy8FwmkpnF0S3YKOqMyoWJ4+CS5Efg2ct3oY9daQvd/Pc71FpGZsVsbl3Cpb+IIcjBDUnnyBdQbq4w==",
+            "license": "MIT",
+            "peer": true
+        },
+        "node_modules/redux-thunk": {
+            "version": "3.1.0",
+            "resolved": "https://registry.npmjs.org/redux-thunk/-/redux-thunk-3.1.0.tgz",
+            "integrity": "sha512-NW2r5T6ksUKXCabzhL9z+h206HQw/NJkcLm1GPImRQ8IzfXwRGqjVhKJGauHirT0DAuyy6hjdnMZaRoAcy0Klw==",
+            "license": "MIT",
+            "peerDependencies": {
+                "redux": "^5.0.0"
+            }
+        },
+        "node_modules/rehype-highlight": {
+            "version": "7.0.2",
+            "resolved": "https://registry.npmjs.org/rehype-highlight/-/rehype-highlight-7.0.2.tgz",
+            "integrity": "sha512-k158pK7wdC2qL3M5NcZROZ2tR/l7zOzjxXd5VGdcfIyoijjQqpHd3JKtYSBDpDZ38UI2WJWuFAtkMDxmx5kstA==",
+            "license": "MIT",
+            "dependencies": {
+                "@types/hast": "^3.0.0",
+                "hast-util-to-text": "^4.0.0",
+                "lowlight": "^3.0.0",
+                "unist-util-visit": "^5.0.0",
+                "vfile": "^6.0.0"
+            },
+            "funding": {
+                "type": "opencollective",
+                "url": "https://opencollective.com/unified"
+            }
+        },
+        "node_modules/rehype-stringify": {
+            "version": "10.0.1",
+            "resolved": "https://registry.npmjs.org/rehype-stringify/-/rehype-stringify-10.0.1.tgz",
+            "integrity": "sha512-k9ecfXHmIPuFVI61B9DeLPN0qFHfawM6RsuX48hoqlaKSF61RskNjSm1lI8PhBEM0MRdLxVVm4WmTqJQccH9mA==",
+            "license": "MIT",
+            "dependencies": {
+                "@types/hast": "^3.0.0",
+                "hast-util-to-html": "^9.0.0",
+                "unified": "^11.0.0"
+            },
+            "funding": {
+                "type": "opencollective",
+                "url": "https://opencollective.com/unified"
+            }
+        },
+        "node_modules/remark-gfm": {
+            "version": "4.0.1",
+            "resolved": "https://registry.npmjs.org/remark-gfm/-/remark-gfm-4.0.1.tgz",
+            "integrity": "sha512-1quofZ2RQ9EWdeN34S79+KExV1764+wCUGop5CPL1WGdD0ocPpu91lzPGbwWMECpEpd42kJGQwzRfyov9j4yNg==",
+            "license": "MIT",
+            "dependencies": {
+                "@types/mdast": "^4.0.0",
+                "mdast-util-gfm": "^3.0.0",
+                "micromark-extension-gfm": "^3.0.0",
+                "remark-parse": "^11.0.0",
+                "remark-stringify": "^11.0.0",
+                "unified": "^11.0.0"
+            },
+            "funding": {
+                "type": "opencollective",
+                "url": "https://opencollective.com/unified"
+            }
+        },
+        "node_modules/remark-parse": {
+            "version": "11.0.0",
+            "resolved": "https://registry.npmjs.org/remark-parse/-/remark-parse-11.0.0.tgz",
+            "integrity": "sha512-FCxlKLNGknS5ba/1lmpYijMUzX2esxW5xQqjWxw2eHFfS2MSdaHVINFmhjo+qN1WhZhNimq0dZATN9pH0IDrpA==",
+            "license": "MIT",
+            "dependencies": {
+                "@types/mdast": "^4.0.0",
+                "mdast-util-from-markdown": "^2.0.0",
+                "micromark-util-types": "^2.0.0",
+                "unified": "^11.0.0"
+            },
+            "funding": {
+                "type": "opencollective",
+                "url": "https://opencollective.com/unified"
+            }
+        },
+        "node_modules/remark-rehype": {
+            "version": "11.1.2",
+            "resolved": "https://registry.npmjs.org/remark-rehype/-/remark-rehype-11.1.2.tgz",
+            "integrity": "sha512-Dh7l57ianaEoIpzbp0PC9UKAdCSVklD8E5Rpw7ETfbTl3FqcOOgq5q2LVDhgGCkaBv7p24JXikPdvhhmHvKMsw==",
+            "license": "MIT",
+            "dependencies": {
+                "@types/hast": "^3.0.0",
+                "@types/mdast": "^4.0.0",
+                "mdast-util-to-hast": "^13.0.0",
+                "unified": "^11.0.0",
+                "vfile": "^6.0.0"
+            },
+            "funding": {
+                "type": "opencollective",
+                "url": "https://opencollective.com/unified"
+            }
+        },
+        "node_modules/remark-stringify": {
+            "version": "11.0.0",
+            "resolved": "https://registry.npmjs.org/remark-stringify/-/remark-stringify-11.0.0.tgz",
+            "integrity": "sha512-1OSmLd3awB/t8qdoEOMazZkNsfVTeY4fTsgzcQFdXNq8ToTN4ZGwrMnlda4K6smTFKD+GRV6O48i6Z4iKgPPpw==",
+            "license": "MIT",
+            "dependencies": {
+                "@types/mdast": "^4.0.0",
+                "mdast-util-to-markdown": "^2.0.0",
+                "unified": "^11.0.0"
+            },
+            "funding": {
+                "type": "opencollective",
+                "url": "https://opencollective.com/unified"
+            }
+        },
+        "node_modules/reselect": {
+            "version": "5.2.0",
+            "resolved": "https://registry.npmjs.org/reselect/-/reselect-5.2.0.tgz",
+            "integrity": "sha512-AgZ3UOZm3YndfrJ4OYjgrT7bmCm/1iqkjvEfH/oYjzh6PD2qw4QuT3jjnXIrpdt4MTpMXclMT3lXbmRY+XRakw==",
+            "license": "MIT"
+        },
+        "node_modules/rolldown": {
+            "version": "1.1.4",
+            "resolved": "https://registry.npmjs.org/rolldown/-/rolldown-1.1.4.tgz",
+            "integrity": "sha512-IjZYiLxZwpnhwhdBH2ugdTGVSdhCQUmLxLoqyjiL0JxYjyRst+5a0P3xfrTxJ5F638j4Mvvw5FAX5XE6eHpXbA==",
+            "license": "MIT",
+            "dependencies": {
+                "@oxc-project/types": "=0.138.0",
+                "@rolldown/pluginutils": "^1.0.0"
+            },
+            "bin": {
+                "rolldown": "bin/cli.mjs"
+            },
+            "engines": {
+                "node": "^20.19.0 || >=22.12.0"
+            },
+            "optionalDependencies": {
+                "@rolldown/binding-android-arm64": "1.1.4",
+                "@rolldown/binding-darwin-arm64": "1.1.4",
+                "@rolldown/binding-darwin-x64": "1.1.4",
+                "@rolldown/binding-freebsd-x64": "1.1.4",
+                "@rolldown/binding-linux-arm-gnueabihf": "1.1.4",
+                "@rolldown/binding-linux-arm64-gnu": "1.1.4",
+                "@rolldown/binding-linux-arm64-musl": "1.1.4",
+                "@rolldown/binding-linux-ppc64-gnu": "1.1.4",
+                "@rolldown/binding-linux-s390x-gnu": "1.1.4",
+                "@rolldown/binding-linux-x64-gnu": "1.1.4",
+                "@rolldown/binding-linux-x64-musl": "1.1.4",
+                "@rolldown/binding-openharmony-arm64": "1.1.4",
+                "@rolldown/binding-wasm32-wasi": "1.1.4",
+                "@rolldown/binding-win32-arm64-msvc": "1.1.4",
+                "@rolldown/binding-win32-x64-msvc": "1.1.4"
+            }
+        },
+        "node_modules/scheduler": {
+            "version": "0.27.0",
+            "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.27.0.tgz",
+            "integrity": "sha512-eNv+WrVbKu1f3vbYJT/xtiF5syA5HPIMtf9IgY/nKg0sWqzAUEvqY/xm7OcZc/qafLx/iO9FgOmeSAp4v5ti/Q==",
+            "license": "MIT"
+        },
+        "node_modules/semver": {
+            "version": "7.8.5",
+            "resolved": "https://registry.npmjs.org/semver/-/semver-7.8.5.tgz",
+            "integrity": "sha512-Y7/KDsb8LjooZpwaqGyulO6DQlksgCncchHGk+sZIY4SBvUocMBEFH5Ur1fI4dV+Jvl0w6cjvucaIi40puRioA==",
+            "dev": true,
+            "license": "ISC",
+            "bin": {
+                "semver": "bin/semver.js"
+            },
+            "engines": {
+                "node": ">=10"
+            }
+        },
+        "node_modules/set-cookie-parser": {
+            "version": "2.7.2",
+            "resolved": "https://registry.npmjs.org/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": "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz",
+            "integrity": "sha512-kHxr2zZpYtdmrN1qDjrrX/Z1rR1kG8Dx+gkpK1G4eXmvXswmcE1hTWBWYUzlraYw1/yZp6YuDY77YtvbN0dmDA==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "shebang-regex": "^3.0.0"
+            },
+            "engines": {
+                "node": ">=8"
+            }
+        },
+        "node_modules/shebang-regex": {
+            "version": "3.0.0",
+            "resolved": "https://registry.npmjs.org/shebang-regex/-/shebang-regex-3.0.0.tgz",
+            "integrity": "sha512-7++dFhtcx3353uBaq8DDR4NuxBetBzC7ZQOhmTQInHEd6bSrXdiEyzCvG07Z44UYdLShWUyXt5M/yhz8ekcb1A==",
+            "dev": true,
+            "license": "MIT",
+            "engines": {
+                "node": ">=8"
+            }
+        },
+        "node_modules/source-map-js": {
+            "version": "1.2.1",
+            "resolved": "https://registry.npmjs.org/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/space-separated-tokens": {
+            "version": "2.0.2",
+            "resolved": "https://registry.npmjs.org/space-separated-tokens/-/space-separated-tokens-2.0.2.tgz",
+            "integrity": "sha512-PEGlAwrG8yXGXRjW32fGbg66JAlOAwbObuqVoJpv/mRgoWDQfgH1wDPvtzWyUSNAXBGSk8h755YDbbcEy3SH2Q==",
+            "license": "MIT",
+            "funding": {
+                "type": "github",
+                "url": "https://github.com/sponsors/wooorm"
+            }
+        },
+        "node_modules/stringify-entities": {
+            "version": "4.0.4",
+            "resolved": "https://registry.npmjs.org/stringify-entities/-/stringify-entities-4.0.4.tgz",
+            "integrity": "sha512-IwfBptatlO+QCJUo19AqvrPNqlVMpW9YEL2LIVY+Rpv2qsjCGxaDLNRgeGsQWJhfItebuJhsGSLjaBbNSQ+ieg==",
+            "license": "MIT",
+            "dependencies": {
+                "character-entities-html4": "^2.0.0",
+                "character-entities-legacy": "^3.0.0"
+            },
+            "funding": {
+                "type": "github",
+                "url": "https://github.com/sponsors/wooorm"
+            }
+        },
+        "node_modules/style-mod": {
+            "version": "4.1.3",
+            "resolved": "https://registry.npmjs.org/style-mod/-/style-mod-4.1.3.tgz",
+            "integrity": "sha512-i/n8VsZydrugj3Iuzll8+x/00GH2vnYsk1eomD8QiRrSAeW6ItbCQDtfXCeJHd0iwiNagqjQkvpvREEPtW3IoQ==",
+            "license": "MIT"
+        },
+        "node_modules/style-to-js": {
+            "version": "1.1.21",
+            "resolved": "https://registry.npmjs.org/style-to-js/-/style-to-js-1.1.21.tgz",
+            "integrity": "sha512-RjQetxJrrUJLQPHbLku6U/ocGtzyjbJMP9lCNK7Ag0CNh690nSH8woqWH9u16nMjYBAok+i7JO1NP2pOy8IsPQ==",
+            "license": "MIT",
+            "dependencies": {
+                "style-to-object": "1.0.14"
+            }
+        },
+        "node_modules/style-to-object": {
+            "version": "1.0.14",
+            "resolved": "https://registry.npmjs.org/style-to-object/-/style-to-object-1.0.14.tgz",
+            "integrity": "sha512-LIN7rULI0jBscWQYaSswptyderlarFkjQ+t79nzty8tcIAceVomEVlLzH5VP4Cmsv6MtKhs7qaAiwlcp+Mgaxw==",
+            "license": "MIT",
+            "dependencies": {
+                "inline-style-parser": "0.2.7"
+            }
+        },
+        "node_modules/tailwind-merge": {
+            "version": "3.6.0",
+            "resolved": "https://registry.npmjs.org/tailwind-merge/-/tailwind-merge-3.6.0.tgz",
+            "integrity": "sha512-uxL7qAVQriqRQPAyK3pj66VqskWqoZ37PW94jwOTwNfq/z9oyu1V+eqrZqtR2+fCiXdYOZe/Modt8GtvqNzu+w==",
+            "license": "MIT",
+            "funding": {
+                "type": "github",
+                "url": "https://github.com/sponsors/dcastil"
+            }
+        },
+        "node_modules/tailwindcss": {
+            "version": "4.3.2",
+            "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-4.3.2.tgz",
+            "integrity": "sha512-WtctNNSH8A9jlMIqxzuYumOHU5uGZyRv0Q5svQl+oEPy5w84YpBxdb7MdqyiSPQge5jTJ6zFQLq0PFygdccSBA==",
+            "license": "MIT",
+            "peer": true
+        },
+        "node_modules/tailwindcss-animate": {
+            "version": "1.0.7",
+            "resolved": "https://registry.npmjs.org/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.2.0",
+            "resolved": "https://registry.npmjs.org/tailwindcss-react-aria-components/-/tailwindcss-react-aria-components-2.2.0.tgz",
+            "integrity": "sha512-iNVDSQd6haXWiu4RakjaYnCUnLw/nOEFSFHEelFeIkT/0f8HSrJ23fwt59F93yNw4FrjjHDXIGHgEtqProNcmQ==",
+            "license": "Apache-2.0",
+            "peerDependencies": {
+                "tailwindcss": "^4.0.0"
+            }
+        },
+        "node_modules/tapable": {
+            "version": "2.3.3",
+            "resolved": "https://registry.npmjs.org/tapable/-/tapable-2.3.3.tgz",
+            "integrity": "sha512-uxc/zpqFg6x7C8vOE7lh6Lbda8eEL9zmVm/PLeTPBRhh1xCgdWaQ+J1CUieGpIfm2HdtsUpRv+HshiasBMcc6A==",
+            "license": "MIT",
+            "engines": {
+                "node": ">=6"
+            },
+            "funding": {
+                "type": "opencollective",
+                "url": "https://opencollective.com/webpack"
+            }
+        },
+        "node_modules/tiny-invariant": {
+            "version": "1.3.3",
+            "resolved": "https://registry.npmjs.org/tiny-invariant/-/tiny-invariant-1.3.3.tgz",
+            "integrity": "sha512-+FbBPE1o9QAYvviau/qC5SE3caw21q3xkvWKBtja5vgqOWIHHJ3ioaq1VPfn/Szqctz2bU/oYeKd9/z5BL+PVg==",
+            "license": "MIT"
+        },
+        "node_modules/tinyglobby": {
+            "version": "0.2.17",
+            "resolved": "https://registry.npmjs.org/tinyglobby/-/tinyglobby-0.2.17.tgz",
+            "integrity": "sha512-wXR/dYpcqKmfWpEdZjiKJOwCNFndD0DMnrW/cYjVGttEkBfVgcLFHoNrlj47mjOVic9yyNu65alsgF4NQyTa2g==",
+            "license": "MIT",
+            "dependencies": {
+                "fdir": "^6.5.0",
+                "picomatch": "^4.0.4"
+            },
+            "engines": {
+                "node": ">=12.0.0"
+            },
+            "funding": {
+                "url": "https://github.com/sponsors/SuperchupuDev"
+            }
+        },
+        "node_modules/trim-lines": {
+            "version": "3.0.1",
+            "resolved": "https://registry.npmjs.org/trim-lines/-/trim-lines-3.0.1.tgz",
+            "integrity": "sha512-kRj8B+YHZCc9kQYdWfJB2/oUl9rA99qbowYYBtr4ui4mZyAQ2JpvVBd/6U2YloATfqBhBTSMhTpgBHtU0Mf3Rg==",
+            "license": "MIT",
+            "funding": {
+                "type": "github",
+                "url": "https://github.com/sponsors/wooorm"
+            }
+        },
+        "node_modules/trough": {
+            "version": "2.2.0",
+            "resolved": "https://registry.npmjs.org/trough/-/trough-2.2.0.tgz",
+            "integrity": "sha512-tmMpK00BjZiUyVyvrBK7knerNgmgvcV/KLVyuma/SC+TQN167GrMRciANTz09+k3zW8L8t60jWO1GpfkZdjTaw==",
+            "license": "MIT",
+            "funding": {
+                "type": "github",
+                "url": "https://github.com/sponsors/wooorm"
+            }
+        },
+        "node_modules/ts-api-utils": {
+            "version": "2.5.0",
+            "resolved": "https://registry.npmjs.org/ts-api-utils/-/ts-api-utils-2.5.0.tgz",
+            "integrity": "sha512-OJ/ibxhPlqrMM0UiNHJ/0CKQkoKF243/AEmplt3qpRgkW8VG7IfOS41h7V8TjITqdByHzrjcS/2si+y4lIh8NA==",
+            "dev": true,
+            "license": "MIT",
+            "engines": {
+                "node": ">=18.12"
+            },
+            "peerDependencies": {
+                "typescript": ">=4.8.4"
+            }
+        },
+        "node_modules/tslib": {
+            "version": "2.8.1",
+            "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.8.1.tgz",
+            "integrity": "sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==",
+            "license": "0BSD"
+        },
+        "node_modules/type-check": {
+            "version": "0.4.0",
+            "resolved": "https://registry.npmjs.org/type-check/-/type-check-0.4.0.tgz",
+            "integrity": "sha512-XleUoc9uwGXqjWwXaUTZAmzMcFZ5858QA2vvx1Ur5xIcixXIP+8LnFDgRplU30us6teqdlskFfu+ae4K79Ooew==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "prelude-ls": "^1.2.1"
+            },
+            "engines": {
+                "node": ">= 0.8.0"
+            }
+        },
+        "node_modules/typescript": {
+            "version": "5.9.3",
+            "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.9.3.tgz",
+            "integrity": "sha512-jl1vZzPDinLr9eUt3J/t7V6FgNEw9QjvBPdysz9KfQDD41fQrC2Y4vKQdiaUpFT4bXlb1RHhLpp8wtm6M5TgSw==",
+            "dev": true,
+            "license": "Apache-2.0",
+            "peer": true,
+            "bin": {
+                "tsc": "bin/tsc",
+                "tsserver": "bin/tsserver"
+            },
+            "engines": {
+                "node": ">=14.17"
+            }
+        },
+        "node_modules/typescript-eslint": {
+            "version": "8.62.1",
+            "resolved": "https://registry.npmjs.org/typescript-eslint/-/typescript-eslint-8.62.1.tgz",
+            "integrity": "sha512-vymnnM5g0AKQDSAyfP12nMIBvgwgA42syg74kkuZ4x1VuTzwQKwc5h9rGxeShCjny5o+zWAb6OEoz7XLgrIkIw==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "@typescript-eslint/eslint-plugin": "8.62.1",
+                "@typescript-eslint/parser": "8.62.1",
+                "@typescript-eslint/typescript-estree": "8.62.1",
+                "@typescript-eslint/utils": "8.62.1"
+            },
+            "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.1.0"
+            }
+        },
+        "node_modules/undici-types": {
+            "version": "7.24.6",
+            "resolved": "https://registry.npmjs.org/undici-types/-/undici-types-7.24.6.tgz",
+            "integrity": "sha512-WRNW+sJgj5OBN4/0JpHFqtqzhpbnV0GuB+OozA9gCL7a993SmU+1JBZCzLNxYsbMfIeDL+lTsphD5jN5N+n0zg==",
+            "devOptional": true,
+            "license": "MIT"
+        },
+        "node_modules/unified": {
+            "version": "11.0.5",
+            "resolved": "https://registry.npmjs.org/unified/-/unified-11.0.5.tgz",
+            "integrity": "sha512-xKvGhPWw3k84Qjh8bI3ZeJjqnyadK+GEFtazSfZv/rKeTkTjOJho6mFqh2SM96iIcZokxiOpg78GazTSg8+KHA==",
+            "license": "MIT",
+            "dependencies": {
+                "@types/unist": "^3.0.0",
+                "bail": "^2.0.0",
+                "devlop": "^1.0.0",
+                "extend": "^3.0.0",
+                "is-plain-obj": "^4.0.0",
+                "trough": "^2.0.0",
+                "vfile": "^6.0.0"
+            },
+            "funding": {
+                "type": "opencollective",
+                "url": "https://opencollective.com/unified"
+            }
+        },
+        "node_modules/unist-util-find-after": {
+            "version": "5.0.0",
+            "resolved": "https://registry.npmjs.org/unist-util-find-after/-/unist-util-find-after-5.0.0.tgz",
+            "integrity": "sha512-amQa0Ep2m6hE2g72AugUItjbuM8X8cGQnFoHk0pGfrFeT9GZhzN5SW8nRsiGKK7Aif4CrACPENkA6P/Lw6fHGQ==",
+            "license": "MIT",
+            "dependencies": {
+                "@types/unist": "^3.0.0",
+                "unist-util-is": "^6.0.0"
+            },
+            "funding": {
+                "type": "opencollective",
+                "url": "https://opencollective.com/unified"
+            }
+        },
+        "node_modules/unist-util-is": {
+            "version": "6.0.1",
+            "resolved": "https://registry.npmjs.org/unist-util-is/-/unist-util-is-6.0.1.tgz",
+            "integrity": "sha512-LsiILbtBETkDz8I9p1dQ0uyRUWuaQzd/cuEeS1hoRSyW5E5XGmTzlwY1OrNzzakGowI9Dr/I8HVaw4hTtnxy8g==",
+            "license": "MIT",
+            "dependencies": {
+                "@types/unist": "^3.0.0"
+            },
+            "funding": {
+                "type": "opencollective",
+                "url": "https://opencollective.com/unified"
+            }
+        },
+        "node_modules/unist-util-position": {
+            "version": "5.0.0",
+            "resolved": "https://registry.npmjs.org/unist-util-position/-/unist-util-position-5.0.0.tgz",
+            "integrity": "sha512-fucsC7HjXvkB5R3kTCO7kUjRdrS0BJt3M/FPxmHMBOm8JQi2BsHAHFsy27E0EolP8rp0NzXsJ+jNPyDWvOJZPA==",
+            "license": "MIT",
+            "dependencies": {
+                "@types/unist": "^3.0.0"
+            },
+            "funding": {
+                "type": "opencollective",
+                "url": "https://opencollective.com/unified"
+            }
+        },
+        "node_modules/unist-util-stringify-position": {
+            "version": "4.0.0",
+            "resolved": "https://registry.npmjs.org/unist-util-stringify-position/-/unist-util-stringify-position-4.0.0.tgz",
+            "integrity": "sha512-0ASV06AAoKCDkS2+xw5RXJywruurpbC4JZSm7nr7MOt1ojAzvyyaO+UxZf18j8FCF6kmzCZKcAgN/yu2gm2XgQ==",
+            "license": "MIT",
+            "dependencies": {
+                "@types/unist": "^3.0.0"
+            },
+            "funding": {
+                "type": "opencollective",
+                "url": "https://opencollective.com/unified"
+            }
+        },
+        "node_modules/unist-util-visit": {
+            "version": "5.1.0",
+            "resolved": "https://registry.npmjs.org/unist-util-visit/-/unist-util-visit-5.1.0.tgz",
+            "integrity": "sha512-m+vIdyeCOpdr/QeQCu2EzxX/ohgS8KbnPDgFni4dQsfSCtpz8UqDyY5GjRru8PDKuYn7Fq19j1CQ+nJSsGKOzg==",
+            "license": "MIT",
+            "dependencies": {
+                "@types/unist": "^3.0.0",
+                "unist-util-is": "^6.0.0",
+                "unist-util-visit-parents": "^6.0.0"
+            },
+            "funding": {
+                "type": "opencollective",
+                "url": "https://opencollective.com/unified"
+            }
+        },
+        "node_modules/unist-util-visit-parents": {
+            "version": "6.0.2",
+            "resolved": "https://registry.npmjs.org/unist-util-visit-parents/-/unist-util-visit-parents-6.0.2.tgz",
+            "integrity": "sha512-goh1s1TBrqSqukSc8wrjwWhL0hiJxgA8m4kFxGlQ+8FYQ3C/m11FcTs4YYem7V664AhHVvgoQLk890Ssdsr2IQ==",
+            "license": "MIT",
+            "dependencies": {
+                "@types/unist": "^3.0.0",
+                "unist-util-is": "^6.0.0"
+            },
+            "funding": {
+                "type": "opencollective",
+                "url": "https://opencollective.com/unified"
+            }
+        },
+        "node_modules/uri-js": {
+            "version": "4.4.1",
+            "resolved": "https://registry.npmjs.org/uri-js/-/uri-js-4.4.1.tgz",
+            "integrity": "sha512-7rKUyy33Q1yc98pQ1DAmLtwX109F7TIfWlW1Ydo8Wl1ii1SeHieeh0HHfPeL2fMXK6z0s8ecKs9frCuLJvndBg==",
+            "dev": true,
+            "license": "BSD-2-Clause",
+            "dependencies": {
+                "punycode": "^2.1.0"
+            }
+        },
+        "node_modules/use-sync-external-store": {
+            "version": "1.6.0",
+            "resolved": "https://registry.npmjs.org/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": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",
+            "integrity": "sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==",
+            "license": "MIT"
+        },
+        "node_modules/vfile": {
+            "version": "6.0.3",
+            "resolved": "https://registry.npmjs.org/vfile/-/vfile-6.0.3.tgz",
+            "integrity": "sha512-KzIbH/9tXat2u30jf+smMwFCsno4wHVdNmzFyL+T/L3UGqqk6JKfVqOFOZEpZSHADH1k40ab6NUIXZq422ov3Q==",
+            "license": "MIT",
+            "dependencies": {
+                "@types/unist": "^3.0.0",
+                "vfile-message": "^4.0.0"
+            },
+            "funding": {
+                "type": "opencollective",
+                "url": "https://opencollective.com/unified"
+            }
+        },
+        "node_modules/vfile-message": {
+            "version": "4.0.3",
+            "resolved": "https://registry.npmjs.org/vfile-message/-/vfile-message-4.0.3.tgz",
+            "integrity": "sha512-QTHzsGd1EhbZs4AsQ20JX1rC3cOlt/IWJruk893DfLRr57lcnOeMaWG4K0JrRta4mIJZKth2Au3mM3u03/JWKw==",
+            "license": "MIT",
+            "dependencies": {
+                "@types/unist": "^3.0.0",
+                "unist-util-stringify-position": "^4.0.0"
+            },
+            "funding": {
+                "type": "opencollective",
+                "url": "https://opencollective.com/unified"
+            }
+        },
+        "node_modules/victory-vendor": {
+            "version": "37.3.6",
+            "resolved": "https://registry.npmjs.org/victory-vendor/-/victory-vendor-37.3.6.tgz",
+            "integrity": "sha512-SbPDPdDBYp+5MJHhBCAyI7wKM3d5ivekigc2Dk2s7pgbZ9wIgIBYGVw4zGHBml/qTFbexrofXW6Gu4noGxrOwQ==",
+            "license": "MIT AND ISC",
+            "dependencies": {
+                "@types/d3-array": "^3.0.3",
+                "@types/d3-ease": "^3.0.0",
+                "@types/d3-interpolate": "^3.0.1",
+                "@types/d3-scale": "^4.0.2",
+                "@types/d3-shape": "^3.1.0",
+                "@types/d3-time": "^3.0.0",
+                "@types/d3-timer": "^3.0.0",
+                "d3-array": "^3.1.6",
+                "d3-ease": "^3.0.1",
+                "d3-interpolate": "^3.0.1",
+                "d3-scale": "^4.0.2",
+                "d3-shape": "^3.1.0",
+                "d3-time": "^3.0.0",
+                "d3-timer": "^3.0.1"
+            }
+        },
+        "node_modules/vite": {
+            "version": "8.1.3",
+            "resolved": "https://registry.npmjs.org/vite/-/vite-8.1.3.tgz",
+            "integrity": "sha512-Ds+gBRbj0lwRO2Y5hwnUBdxSwlAve9LeRyU4sNnAr0ewW0gWF0n5bgXgUzbgZ49MV9BVUAQUFYVcDUcilUExMA==",
+            "license": "MIT",
+            "peer": true,
+            "dependencies": {
+                "lightningcss": "^1.32.0",
+                "picomatch": "^4.0.4",
+                "postcss": "^8.5.16",
+                "rolldown": "~1.1.3",
+                "tinyglobby": "^0.2.17"
+            },
+            "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",
+                "@vitejs/devtools": "^0.3.0",
+                "esbuild": "^0.27.0 || ^0.28.0",
+                "jiti": ">=1.21.0",
+                "less": "^4.0.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
+                },
+                "@vitejs/devtools": {
+                    "optional": true
+                },
+                "esbuild": {
+                    "optional": true
+                },
+                "jiti": {
+                    "optional": true
+                },
+                "less": {
+                    "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/w3c-keyname": {
+            "version": "2.2.8",
+            "resolved": "https://registry.npmjs.org/w3c-keyname/-/w3c-keyname-2.2.8.tgz",
+            "integrity": "sha512-dpojBhNsCNN7T82Tm7k26A6G9ML3NkhDsnw9n/eoxSRlVBB4CEtIQ/KTCLI2Fwf3ataSXRhYFkQi3SlnFwPvPQ==",
+            "license": "MIT"
+        },
+        "node_modules/which": {
+            "version": "2.0.2",
+            "resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz",
+            "integrity": "sha512-BLI3Tl1TW3Pvl70l3yq3Y64i+awpwXqsGBYWkkqMtnbXgrMD+yj7rhW0kuEDxzJaYXGjEW5ogapKNMEKNMjibA==",
+            "dev": true,
+            "license": "ISC",
+            "dependencies": {
+                "isexe": "^2.0.0"
+            },
+            "bin": {
+                "node-which": "bin/node-which"
+            },
+            "engines": {
+                "node": ">= 8"
+            }
+        },
+        "node_modules/word-wrap": {
+            "version": "1.2.5",
+            "resolved": "https://registry.npmjs.org/word-wrap/-/word-wrap-1.2.5.tgz",
+            "integrity": "sha512-BN22B5eaMMI9UMtjrGd5g5eCYPpCPDUy0FJXbYsaT5zYxjFOckS53SQDE3pWkVoWpHXVb3BrYcEN4Twa55B5cA==",
+            "dev": true,
+            "license": "MIT",
+            "engines": {
+                "node": ">=0.10.0"
+            }
+        },
+        "node_modules/yocto-queue": {
+            "version": "0.1.0",
+            "resolved": "https://registry.npmjs.org/yocto-queue/-/yocto-queue-0.1.0.tgz",
+            "integrity": "sha512-rVksvsnNCdJ/ohGc6xgPwyN8eheCxsiLM8mxuE/t/mOVqJewPuO1miLpTHQiRgTKCLexL4MeAFVagts7HmNZ2Q==",
+            "dev": true,
+            "license": "MIT",
+            "engines": {
+                "node": ">=10"
+            },
+            "funding": {
+                "url": "https://github.com/sponsors/sindresorhus"
+            }
+        },
+        "node_modules/zwitch": {
+            "version": "2.0.4",
+            "resolved": "https://registry.npmjs.org/zwitch/-/zwitch-2.0.4.tgz",
+            "integrity": "sha512-bXE4cR/kVZhKZX/RjPEflHaKVhUVl85noU3v6b8apfQEc1x4A+zBxjZ4lN8LqGd6WZ3dl98pY4o717VFmoPp+A==",
+            "license": "MIT",
+            "funding": {
+                "type": "github",
+                "url": "https://github.com/sponsors/wooorm"
+            }
+        }
+    }
+}
diff --git a/package.json b/package.json
new file mode 100644
index 0000000..b778ac5
--- /dev/null
+++ b/package.json
@@ -0,0 +1,58 @@
+{
+    "name": "md-studio",
+    "version": "0.0.0",
+    "type": "module",
+    "private": true,
+    "scripts": {
+        "dev": "vite",
+        "build": "tsc -b && vite build",
+        "preview": "vite preview"
+    },
+    "dependencies": {
+        "@codemirror/lang-markdown": "^6.5.0",
+        "@codemirror/language-data": "^6.5.2",
+        "@fontsource-variable/inter": "^5.2.8",
+        "@tailwindcss/typography": "^0.5.19",
+        "@tailwindcss/vite": "^4.2.2",
+        "@uiw/codemirror-theme-github": "^4.25.10",
+        "@uiw/react-codemirror": "^4.25.10",
+        "@untitledui/file-icons": "^0.0.9",
+        "@untitledui/icons": "^0.0.22",
+        "embla-carousel-react": "^8.6.0",
+        "highlight.js": "^11.11.1",
+        "input-otp": "^1.4.2",
+        "motion": "^12.42.2",
+        "qr-code-styling": "^1.9.2",
+        "react": "^19.2.4",
+        "react-aria": "^3.50.0",
+        "react-aria-components": "^1.19.0",
+        "react-dom": "^19.2.4",
+        "react-hotkeys-hook": "^5.2.4",
+        "react-markdown": "^10.1.0",
+        "react-router": "^7.13.0",
+        "recharts": "^3.8.0",
+        "rehype-highlight": "^7.0.2",
+        "rehype-stringify": "^10.0.1",
+        "remark-gfm": "^4.0.1",
+        "remark-parse": "^11.0.0",
+        "remark-rehype": "^11.1.2",
+        "tailwind-merge": "^3.6.0",
+        "tailwindcss": "^4.2.2",
+        "tailwindcss-animate": "^1.0.7",
+        "tailwindcss-react-aria-components": "^2.0.1",
+        "unified": "^11.0.5"
+    },
+    "devDependencies": {
+        "@trivago/prettier-plugin-sort-imports": "^6.0.2",
+        "@types/node": "^25.5.0",
+        "@types/react": "^19.2.14",
+        "@types/react-dom": "^19.2.3",
+        "@vitejs/plugin-react": "^6.0.1",
+        "globals": "^16.5.0",
+        "prettier": "^3.8.1",
+        "prettier-plugin-tailwindcss": "^0.7.2",
+        "typescript": "^5.9.3",
+        "typescript-eslint": "^8.53.1",
+        "vite": "^8.0.2"
+    }
+}
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
new file mode 100644
index 0000000..ba9fbea
--- /dev/null
+++ b/pnpm-lock.yaml
@@ -0,0 +1,4102 @@
+lockfileVersion: '9.0'
+
+settings:
+  autoInstallPeers: true
+  excludeLinksFromLockfile: false
+
+importers:
+
+  .:
+    dependencies:
+      '@codemirror/lang-markdown':
+        specifier: ^6.5.0
+        version: 6.5.0
+      '@codemirror/language-data':
+        specifier: ^6.5.2
+        version: 6.5.2
+      '@fontsource-variable/inter':
+        specifier: ^5.2.8
+        version: 5.2.8
+      '@tailwindcss/typography':
+        specifier: ^0.5.19
+        version: 0.5.20(tailwindcss@4.3.2)
+      '@tailwindcss/vite':
+        specifier: ^4.2.2
+        version: 4.3.2(vite@8.1.3(@types/node@25.9.4)(jiti@2.7.0))
+      '@uiw/codemirror-theme-github':
+        specifier: ^4.25.10
+        version: 4.25.10(@codemirror/language@6.12.4)(@codemirror/state@6.7.0)(@codemirror/view@6.43.4)
+      '@uiw/react-codemirror':
+        specifier: ^4.25.10
+        version: 4.25.10(@babel/runtime@8.0.0)(@codemirror/autocomplete@6.20.3)(@codemirror/language@6.12.4)(@codemirror/lint@6.9.7)(@codemirror/search@6.7.1)(@codemirror/state@6.7.0)(@codemirror/theme-one-dark@6.1.3)(@codemirror/view@6.43.4)(codemirror@6.0.2)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)
+      '@untitledui/file-icons':
+        specifier: ^0.0.9
+        version: 0.0.9(react@19.2.7)
+      '@untitledui/icons':
+        specifier: ^0.0.22
+        version: 0.0.22(react@19.2.7)
+      embla-carousel-react:
+        specifier: ^8.6.0
+        version: 8.6.0(react@19.2.7)
+      highlight.js:
+        specifier: ^11.11.1
+        version: 11.11.1
+      input-otp:
+        specifier: ^1.4.2
+        version: 1.4.2(react-dom@19.2.7(react@19.2.7))(react@19.2.7)
+      motion:
+        specifier: ^12.42.2
+        version: 12.42.2(react-dom@19.2.7(react@19.2.7))(react@19.2.7)
+      qr-code-styling:
+        specifier: ^1.9.2
+        version: 1.9.2
+      react:
+        specifier: ^19.2.4
+        version: 19.2.7
+      react-aria:
+        specifier: ^3.50.0
+        version: 3.50.0(react-dom@19.2.7(react@19.2.7))(react@19.2.7)
+      react-aria-components:
+        specifier: ^1.19.0
+        version: 1.19.0(react-dom@19.2.7(react@19.2.7))(react@19.2.7)
+      react-dom:
+        specifier: ^19.2.4
+        version: 19.2.7(react@19.2.7)
+      react-hotkeys-hook:
+        specifier: ^5.2.4
+        version: 5.3.3(react-dom@19.2.7(react@19.2.7))(react@19.2.7)
+      react-markdown:
+        specifier: ^10.1.0
+        version: 10.1.0(@types/react@19.2.17)(react@19.2.7)
+      react-router:
+        specifier: ^7.13.0
+        version: 7.18.1(react-dom@19.2.7(react@19.2.7))(react@19.2.7)
+      recharts:
+        specifier: ^3.8.0
+        version: 3.9.1(@types/react@19.2.17)(react-dom@19.2.7(react@19.2.7))(react-is@19.2.7)(react@19.2.7)(redux@5.0.1)
+      rehype-highlight:
+        specifier: ^7.0.2
+        version: 7.0.2
+      rehype-stringify:
+        specifier: ^10.0.1
+        version: 10.0.1
+      remark-gfm:
+        specifier: ^4.0.1
+        version: 4.0.1
+      remark-parse:
+        specifier: ^11.0.0
+        version: 11.0.0
+      remark-rehype:
+        specifier: ^11.1.2
+        version: 11.1.2
+      tailwind-merge:
+        specifier: ^3.6.0
+        version: 3.6.0
+      tailwindcss:
+        specifier: ^4.2.2
+        version: 4.3.2
+      tailwindcss-animate:
+        specifier: ^1.0.7
+        version: 1.0.7(tailwindcss@4.3.2)
+      tailwindcss-react-aria-components:
+        specifier: ^2.0.1
+        version: 2.2.0(tailwindcss@4.3.2)
+      unified:
+        specifier: ^11.0.5
+        version: 11.0.5
+    devDependencies:
+      '@trivago/prettier-plugin-sort-imports':
+        specifier: ^6.0.2
+        version: 6.0.2(prettier@3.9.4)
+      '@types/node':
+        specifier: ^25.5.0
+        version: 25.9.4
+      '@types/react':
+        specifier: ^19.2.14
+        version: 19.2.17
+      '@types/react-dom':
+        specifier: ^19.2.3
+        version: 19.2.3(@types/react@19.2.17)
+      '@vitejs/plugin-react':
+        specifier: ^6.0.1
+        version: 6.0.3(vite@8.1.3(@types/node@25.9.4)(jiti@2.7.0))
+      globals:
+        specifier: ^16.5.0
+        version: 16.5.0
+      prettier:
+        specifier: ^3.8.1
+        version: 3.9.4
+      prettier-plugin-tailwindcss:
+        specifier: ^0.7.2
+        version: 0.7.4(@trivago/prettier-plugin-sort-imports@6.0.2(prettier@3.9.4))(prettier@3.9.4)
+      typescript:
+        specifier: ^5.9.3
+        version: 5.9.3
+      typescript-eslint:
+        specifier: ^8.53.1
+        version: 8.62.1(eslint@10.6.0(jiti@2.7.0))(typescript@5.9.3)
+      vite:
+        specifier: ^8.0.2
+        version: 8.1.3(@types/node@25.9.4)(jiti@2.7.0)
+
+packages:
+
+  '@babel/code-frame@7.29.7':
+    resolution: {integrity: sha512-Aup7aUOfpbAUg2ROOJN6Iw5f9DMBlzu0mIkm/malLQFN/YQgO48wCj0Kxa3sEHJvPVFg7siR+qRInwXd2qhQKw==}
+    engines: {node: '>=6.9.0'}
+
+  '@babel/generator@7.29.7':
+    resolution: {integrity: sha512-DkXD5OJQaAQIdZ1bt3UZdEnHAn9Imd3IVBdX03UFe+ony9Ojw5pzr9YVKGDY1jt+Gcn/FnGkNf8r+Vj5NOJWtQ==}
+    engines: {node: '>=6.9.0'}
+
+  '@babel/helper-globals@7.29.7':
+    resolution: {integrity: sha512-3nQVUAtvkKH9zahfWgw96Jc/uFOmjACE1kQz82E2lqWmHBgjzbNlsC22nuQTfahmWeQtTq5nQ/4Nnd2A1wj4zA==}
+    engines: {node: '>=6.9.0'}
+
+  '@babel/helper-string-parser@7.29.7':
+    resolution: {integrity: sha512-Pb5ijPrZ89GDH8223L4UP8i6QApWxs04RbPQJTeWDV0/keR2E36MeKnyr6LYmUUvqRRI+Iv87SuF1W6ErINzYw==}
+    engines: {node: '>=6.9.0'}
+
+  '@babel/helper-validator-identifier@7.29.7':
+    resolution: {integrity: sha512-qehxGkRj55h/ff8EMaJ+cYhyaKlHIxqYDn682wQD7RNp9UujOQsHog2uS0r2vzr4pW+sXf90NeeayjcNaX3fFg==}
+    engines: {node: '>=6.9.0'}
+
+  '@babel/parser@7.29.7':
+    resolution: {integrity: sha512-hnORnjP/1P/zFEndoeX+n+t1RwWRJiJpM/jO7FW32Kn9r5+sJB2JWOdYo4L6k78j15eCwY3Gm/7364B1EMwtNg==}
+    engines: {node: '>=6.0.0'}
+    hasBin: true
+
+  '@babel/runtime@8.0.0':
+    resolution: {integrity: sha512-sL6cvO2IfkSu/iU+zs2S/w01B7A8V7suXSIKEN4hPFFdZoiPGxrj5pAG0lCaqLWiEIrjKzdznIWuaLcxPR53qw==}
+
+  '@babel/template@7.29.7':
+    resolution: {integrity: sha512-puq+Gf35oI24FeN11LkoUQFqv9uwNeWpxXZi/Ji3rRIoKAzKnxRaZ+Gkj0vKS9ZCiTESfng1N9LyOyXvo+m+Gg==}
+    engines: {node: '>=6.9.0'}
+
+  '@babel/traverse@7.29.7':
+    resolution: {integrity: sha512-EhlfNQtZ+NK22w5BM61ciuiq1m58ed33Wr1Xan//ZRTy6hgjnwyCffRYwzsGXdASJSUJ1guZILsErh1eQcl+zw==}
+    engines: {node: '>=6.9.0'}
+
+  '@babel/types@7.29.7':
+    resolution: {integrity: sha512-4zBIxpPzowiZpusoFkyGVwakdRJUyuH5PxQ/PrqghfdFWWasvnCdPfQXHrenDai+gyLARulZjZowCOj6fjT4pA==}
+    engines: {node: '>=6.9.0'}
+
+  '@codemirror/autocomplete@6.20.3':
+    resolution: {integrity: sha512-tlosUqb+3BbxCxZdu4tKeRghPFC+QM7q4X5YhKV2eCmPG+1r2F3f4AaSz5sCrFqUtX4Jh20VFTKecl16MgiV9g==}
+
+  '@codemirror/commands@6.10.4':
+    resolution: {integrity: sha512-Ryk9y9T0FFVF0cUGhAknveAyUOl/A1qReTFi+qPKtOh2Z9F4AUBz3XOrYD4ZEgZirdugVzHvd/2/Wcwy5OliTg==}
+
+  '@codemirror/lang-angular@0.1.4':
+    resolution: {integrity: sha512-oap+gsltb/fzdlTQWD6BFF4bSLKcDnlxDsLdePiJpCVNKWXSTAbiiQeYI3UmES+BLAdkmIC1WjyztC1pi/bX4g==}
+
+  '@codemirror/lang-cpp@6.0.3':
+    resolution: {integrity: sha512-URM26M3vunFFn9/sm6rzqrBzDgfWuDixp85uTY49wKudToc2jTHUrKIGGKs+QWND+YLofNNZpxcNGRynFJfvgA==}
+
+  '@codemirror/lang-css@6.3.1':
+    resolution: {integrity: sha512-kr5fwBGiGtmz6l0LSJIbno9QrifNMUusivHbnA1H6Dmqy4HZFte3UAICix1VuKo0lMPKQr2rqB+0BkKi/S3Ejg==}
+
+  '@codemirror/lang-go@6.0.1':
+    resolution: {integrity: sha512-7fNvbyNylvqCphW9HD6WFnRpcDjr+KXX/FgqXy5H5ZS0eC5edDljukm/yNgYkwTsgp2busdod50AOTIy6Jikfg==}
+
+  '@codemirror/lang-html@6.4.11':
+    resolution: {integrity: sha512-9NsXp7Nwp891pQchI7gPdTwBuSuT3K65NGTHWHNJ55HjYcHLllr0rbIZNdOzas9ztc1EUVBlHou85FFZS4BNnw==}
+
+  '@codemirror/lang-java@6.0.2':
+    resolution: {integrity: sha512-m5Nt1mQ/cznJY7tMfQTJchmrjdjQ71IDs+55d1GAa8DGaB8JXWsVCkVT284C3RTASaY43YknrK2X3hPO/J3MOQ==}
+
+  '@codemirror/lang-javascript@6.2.5':
+    resolution: {integrity: sha512-zD4e5mS+50htS7F+TYjBPsiIFGanfVqg4HyUz6WNFikgOPf2BgKlx+TQedI1w6n/IqRBVBbBWmGFdLB/7uxO4A==}
+
+  '@codemirror/lang-jinja@6.0.1':
+    resolution: {integrity: sha512-P5kyHLObzjtbGj16h+hyvZTxJhSjBEeSx4wMjbnAf3b0uwTy2+F0zGjMZL4PQOm/mh2eGZ5xUDVZXgwP783Nsw==}
+
+  '@codemirror/lang-json@6.0.2':
+    resolution: {integrity: sha512-x2OtO+AvwEHrEwR0FyyPtfDUiloG3rnVTSZV1W8UteaLL8/MajQd8DpvUb2YVzC+/T18aSDv0H9mu+xw0EStoQ==}
+
+  '@codemirror/lang-less@6.0.2':
+    resolution: {integrity: sha512-EYdQTG22V+KUUk8Qq582g7FMnCZeEHsyuOJisHRft/mQ+ZSZ2w51NupvDUHiqtsOy7It5cHLPGfHQLpMh9bqpQ==}
+
+  '@codemirror/lang-liquid@6.3.2':
+    resolution: {integrity: sha512-6PDVU3ZnfeYyz1at1E/ttorErZvZFXXt1OPhtfe1EZJ2V2iDFa0CwPqPgG5F7NXN0yONGoBogKmFAafKTqlwIw==}
+
+  '@codemirror/lang-markdown@6.5.0':
+    resolution: {integrity: sha512-0K40bZ35jpHya6FriukbgaleaqzBLZfOh7HuzqbMxBXkbYMJDxfF39c23xOgxFezR+3G+tR2/Mup+Xk865OMvw==}
+
+  '@codemirror/lang-php@6.0.2':
+    resolution: {integrity: sha512-ZKy2v1n8Fc8oEXj0Th0PUMXzQJ0AIR6TaZU+PbDHExFwdu+guzOA4jmCHS1Nz4vbFezwD7LyBdDnddSJeScMCA==}
+
+  '@codemirror/lang-python@6.2.1':
+    resolution: {integrity: sha512-IRjC8RUBhn9mGR9ywecNhB51yePWCGgvHfY1lWN/Mrp3cKuHr0isDKia+9HnvhiWNnMpbGhWrkhuWOc09exRyw==}
+
+  '@codemirror/lang-rust@6.0.2':
+    resolution: {integrity: sha512-EZaGjCUegtiU7kSMvOfEZpaCReowEf3yNidYu7+vfuGTm9ow4mthAparY5hisJqOHmJowVH3Upu+eJlUji6qqA==}
+
+  '@codemirror/lang-sass@6.0.2':
+    resolution: {integrity: sha512-l/bdzIABvnTo1nzdY6U+kPAC51czYQcOErfzQ9zSm9D8GmNPD0WTW8st/CJwBTPLO8jlrbyvlSEcN20dc4iL0Q==}
+
+  '@codemirror/lang-sql@6.10.0':
+    resolution: {integrity: sha512-6ayPkEd/yRw0XKBx5uAiToSgGECo/GY2NoJIHXIIQh1EVwLuKoU8BP/qK0qH5NLXAbtJRLuT73hx7P9X34iO4w==}
+
+  '@codemirror/lang-vue@0.1.3':
+    resolution: {integrity: sha512-QSKdtYTDRhEHCfo5zOShzxCmqKJvgGrZwDQSdbvCRJ5pRLWBS7pD/8e/tH44aVQT6FKm0t6RVNoSUWHOI5vNug==}
+
+  '@codemirror/lang-wast@6.0.2':
+    resolution: {integrity: sha512-Imi2KTpVGm7TKuUkqyJ5NRmeFWF7aMpNiwHnLQe0x9kmrxElndyH0K6H/gXtWwY6UshMRAhpENsgfpSwsgmC6Q==}
+
+  '@codemirror/lang-xml@6.1.0':
+    resolution: {integrity: sha512-3z0blhicHLfwi2UgkZYRPioSgVTo9PV5GP5ducFH6FaHy0IAJRg+ixj5gTR1gnT/glAIC8xv4w2VL1LoZfs+Jg==}
+
+  '@codemirror/lang-yaml@6.1.3':
+    resolution: {integrity: sha512-AZ8DJBuXGVHybpBQhmZtgew5//4hv3tdkXnr3vDmOUMJRuB6vn/uuwtmTOTlqEaQFg3hQSVeA90NmvIQyUV6FQ==}
+
+  '@codemirror/language-data@6.5.2':
+    resolution: {integrity: sha512-CPkWBKrNS8stYbEU5kwBwTf3JB1kghlbh4FSAwzGW2TEscdeHHH4FGysREW86Mqnj3Qn09s0/6Ea/TutmoTobg==}
+
+  '@codemirror/language@6.12.4':
+    resolution: {integrity: sha512-1q4PaT+o6PbgpkJt4Q8Fv5XJxTy4FUZ4MWETtyiDw3J0Pyr9E2vqcKL+k9wcvjNTIsauxvE7OfmWj3FRPHQ76A==}
+
+  '@codemirror/legacy-modes@6.5.3':
+    resolution: {integrity: sha512-xCsmIzH78MyWkib9jlPaaun57XNkfbMIhagfaZVd0iLTqlpw3jXaIcbZm72MTmmn64eTZpBVNjbyYh+QXnxRsg==}
+
+  '@codemirror/lint@6.9.7':
+    resolution: {integrity: sha512-28/+iWLYxKxsvGYhSYL7zaCZqLz5+FFFDq9tVsvGv9kv8RY4fFAchJ5WX9M3YrrRlTIsECjsXPqeNgnSmNP2dg==}
+
+  '@codemirror/search@6.7.1':
+    resolution: {integrity: sha512-uMe5UO6PamJtSHrXhhHOzSX3ReWtiJrva6GnPMwSOrZtiExb5X5eExhr2OUZQVvdxPsKpY3Ro2mFbQadpPWmHA==}
+
+  '@codemirror/state@6.7.0':
+    resolution: {integrity: sha512-Zbl9NyscLMZkfXPQnNAIIAFftidrA1UbcJEIMp24C0Bukc2I5T8wJS0wsXYsnDOqCFJUeJ1BITGNs5CqPDSmSg==}
+
+  '@codemirror/theme-one-dark@6.1.3':
+    resolution: {integrity: sha512-NzBdIvEJmx6fjeremiGp3t/okrLPYT0d9orIc7AFun8oZcRk58aejkqhv6spnz4MLAevrKNPMQYXEWMg4s+sKA==}
+
+  '@codemirror/view@6.43.4':
+    resolution: {integrity: sha512-YImu23iyKfncJzT7sRy+rEqEhSc8RhOHqDxwy4WzXRKJwYm6iwf/9OJk5ctCAdZ6yi2ZqaGEvmf55fSVqMDrgg==}
+
+  '@emnapi/core@1.11.1':
+    resolution: {integrity: sha512-RSvbQmHzdKzNsLYa/wHrbc3KN4sYLKAdPZxqiM2HATqv/SBk2/ENSHpvXGaLOMcsAyz0poEGqkmmKYG3OWiJEQ==}
+
+  '@emnapi/runtime@1.11.1':
+    resolution: {integrity: sha512-vgj7R3y3Wgx24IQaGPA/R6YFXLHVMOZ0uVEyIQPaWs+rd1AzfEMXlAC22FYwO1XkKR6NPsq7mUandH8oIRdZFw==}
+
+  '@emnapi/wasi-threads@1.2.2':
+    resolution: {integrity: sha512-c95qOXkHdydNKhscBTebqEC1CVAZpyqOfVfBzQ1qgzyl3gfeldUjIggDbIZgDKsHLgnsM+igH7TJ/eAasaVuMA==}
+
+  '@eslint-community/eslint-utils@4.9.1':
+    resolution: {integrity: sha512-phrYmNiYppR7znFEdqgfWHXR6NCkZEK7hwWDHZUjit/2/U0r6XvkDl0SYnoM51Hq7FhCGdLDT6zxCCOY1hexsQ==}
+    engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
+    peerDependencies:
+      eslint: ^6.0.0 || ^7.0.0 || >=8.0.0
+
+  '@eslint-community/regexpp@4.12.2':
+    resolution: {integrity: sha512-EriSTlt5OC9/7SXkRSCAhfSxxoSUgBm33OH+IkwbdpgoqsSsUg7y3uh+IICI/Qg4BBWr3U2i39RpmycbxMq4ew==}
+    engines: {node: ^12.0.0 || ^14.0.0 || >=16.0.0}
+
+  '@eslint/config-array@0.23.5':
+    resolution: {integrity: sha512-Y3kKLvC1dvTOT+oGlqNQ1XLqK6D1HU2YXPc52NmAlJZbMMWDzGYXMiPRJ8TYD39muD/OTjlZmNJ4ib7dvSrMBA==}
+    engines: {node: ^20.19.0 || ^22.13.0 || >=24}
+
+  '@eslint/config-helpers@0.6.0':
+    resolution: {integrity: sha512-ii6Bw9jJ2zi2cWA2Z+9/QZ/+3DX6kwaV5Q986D/CdP3Lap3w/pgQZ373FV7byY/i7L4IRH/G43I5dz1ClsCbpA==}
+    engines: {node: ^20.19.0 || ^22.13.0 || >=24}
+
+  '@eslint/core@1.2.1':
+    resolution: {integrity: sha512-MwcE1P+AZ4C6DWlpin/OmOA54mmIZ/+xZuJiQd4SyB29oAJjN30UW9wkKNptW2ctp4cEsvhlLY/CsQ1uoHDloQ==}
+    engines: {node: ^20.19.0 || ^22.13.0 || >=24}
+
+  '@eslint/object-schema@3.0.5':
+    resolution: {integrity: sha512-vqTaUEgxzm+YDSdElad6PiRoX4t8VGDjCtt05zn4nU810UIx/uNEV7/lZJ6KwFThKZOzOxzXy48da+No7HZaMw==}
+    engines: {node: ^20.19.0 || ^22.13.0 || >=24}
+
+  '@eslint/plugin-kit@0.7.2':
+    resolution: {integrity: sha512-+CNAzxglkrpNf/kKywqQfk74QjtceuOE7Qm+AF8miRvPF/wmmK5+OJOgVh3AVTT3RP2mH3+FOaxlE5v72owk0A==}
+    engines: {node: ^20.19.0 || ^22.13.0 || >=24}
+
+  '@fontsource-variable/inter@5.2.8':
+    resolution: {integrity: sha512-kOfP2D+ykbcX/P3IFnokOhVRNoTozo5/JxhAIVYLpea/UBmCQ/YWPBfWIDuBImXX/15KH+eKh4xpEUyS2sQQGQ==}
+
+  '@humanfs/core@0.19.2':
+    resolution: {integrity: sha512-UhXNm+CFMWcbChXywFwkmhqjs3PRCmcSa/hfBgLIb7oQ5HNb1wS0icWsGtSAUNgefHeI+eBrA8I1fxmbHsGdvA==}
+    engines: {node: '>=18.18.0'}
+
+  '@humanfs/node@0.16.8':
+    resolution: {integrity: sha512-gE1eQNZ3R++kTzFUpdGlpmy8kDZD/MLyHqDwqjkVQI0JMdI1D51sy1H958PNXYkM2rAac7e5/CnIKZrHtPh3BQ==}
+    engines: {node: '>=18.18.0'}
+
+  '@humanfs/types@0.15.0':
+    resolution: {integrity: sha512-ZZ1w0aoQkwuUuC7Yf+7sdeaNfqQiiLcSRbfI08oAxqLtpXQr9AIVX7Ay7HLDuiLYAaFPu8oBYNq/QIi9URHJ3Q==}
+    engines: {node: '>=18.18.0'}
+
+  '@humanwhocodes/module-importer@1.0.1':
+    resolution: {integrity: sha512-bxveV4V8v5Yb4ncFTT3rPSgZBOpCkjfK0y4oVVVJwIuDVBRMDXrPyXRL988i5ap9m9bnyEEjWfm5WkBmtffLfA==}
+    engines: {node: '>=12.22'}
+
+  '@humanwhocodes/retry@0.4.3':
+    resolution: {integrity: sha512-bV0Tgo9K4hfPCek+aMAn81RppFKv2ySDQeMoSZuvTASywNTnVJCArCZE2FWqpvIatKu7VMRLWlR1EazvVhDyhQ==}
+    engines: {node: '>=18.18'}
+
+  '@internationalized/date@3.12.2':
+    resolution: {integrity: sha512-FY1Y+H64NDs+HAF6omlnWxm3mEpfgaCSWtL5l551ZZfImA+kGjPFgrnJrGjH6lfmLL0g8Z/mBu1R3kufeCp6Jw==}
+
+  '@internationalized/number@3.6.7':
+    resolution: {integrity: sha512-3ji1fcrT+FPAK86UqEhB/psHixYo6niWPJtt7+qRaYFynt/BaJG8GhAPimtWUpEiVSTq8ZM8L5psMxGquiB/Vg==}
+
+  '@internationalized/string@3.2.9':
+    resolution: {integrity: sha512-kzP/M/mbQxODlmOt4bIQZ2SBVUWUSqMLXooXixnX7noche8WHaQcA+nwFN1K2KCF/cp+LDUhcJsCicwkvhD1pg==}
+
+  '@jridgewell/gen-mapping@0.3.13':
+    resolution: {integrity: sha512-2kkt/7niJ6MgEPxF0bYdQ6etZaA+fQvDcLKckhy1yIQOzaoKjBBjSj63/aLVjYE3qhRt5dvM+uUyfCg6UKCBbA==}
+
+  '@jridgewell/remapping@2.3.5':
+    resolution: {integrity: sha512-LI9u/+laYG4Ds1TDKSJW2YPrIlcVYOwi2fUC6xB43lueCjgxV4lffOCZCtYFiH6TNOX+tQKXx97T4IKHbhyHEQ==}
+
+  '@jridgewell/resolve-uri@3.1.2':
+    resolution: {integrity: sha512-bRISgCIjP20/tbWSPWMEi54QVPRZExkuD9lJL+UIxUKtwVJA8wW1Trb1jMs1RFXo1CBTNZ/5hpC9QvmKWdopKw==}
+    engines: {node: '>=6.0.0'}
+
+  '@jridgewell/sourcemap-codec@1.5.5':
+    resolution: {integrity: sha512-cYQ9310grqxueWbl+WuIUIaiUaDcj7WOq5fVhEljNVgRfOUhY9fy2zTvfoqWsnebh8Sl70VScFbICvJnLKB0Og==}
+
+  '@jridgewell/trace-mapping@0.3.31':
+    resolution: {integrity: sha512-zzNR+SdQSDJzc8joaeP8QQoCQr8NuYx2dIIytl1QeBEZHJ9uW6hebsrYgbz8hJwUQao3TWCMtmfV8Nu1twOLAw==}
+
+  '@lezer/common@1.5.2':
+    resolution: {integrity: sha512-sxQE460fPZyU3sdc8lafxiPwJHBzZRy/udNFynGQky1SePYBdhkBl1kOagA9uT3pxR8K09bOrmTUqA9wb/PjSQ==}
+
+  '@lezer/cpp@1.1.6':
+    resolution: {integrity: sha512-vh9gWWJOXFVY8HBHK3Twzq8MgwG2iN4GSyzBP9sCGTe37P15x2R14VaBQk0VA0ezTRN1KHYBBsHhvpGZ2Xy/pA==}
+
+  '@lezer/css@1.3.4':
+    resolution: {integrity: sha512-N+tn9tej2hPvyKgHEApMOQfHczDJCwxrRFS3SPn9QjYN+uwHvEDnCgKRrb3mxDYxRS8sKMM8fhC3+lc04Abz5Q==}
+
+  '@lezer/go@1.0.1':
+    resolution: {integrity: sha512-xToRsYxwsgJNHTgNdStpcvmbVuKxTapV0dM0wey1geMMRc9aggoVyKgzYp41D2/vVOx+Ii4hmE206kvxIXBVXQ==}
+
+  '@lezer/highlight@1.2.3':
+    resolution: {integrity: sha512-qXdH7UqTvGfdVBINrgKhDsVTJTxactNNxLk7+UMwZhU13lMHaOBlJe9Vqp907ya56Y3+ed2tlqzys7jDkTmW0g==}
+
+  '@lezer/html@1.3.13':
+    resolution: {integrity: sha512-oI7n6NJml729m7pjm9lvLvmXbdoMoi2f+1pwSDJkl9d68zGr7a9Btz8NdHTGQZtW2DA25ybeuv/SyDb9D5tseg==}
+
+  '@lezer/java@1.1.3':
+    resolution: {integrity: sha512-yHquUfujwg6Yu4Fd1GNHCvidIvJwi/1Xu2DaKl/pfWIA2c1oXkVvawH3NyXhCaFx4OdlYBVX5wvz2f7Aoa/4Xw==}
+
+  '@lezer/javascript@1.5.4':
+    resolution: {integrity: sha512-vvYx3MhWqeZtGPwDStM2dwgljd5smolYD2lR2UyFcHfxbBQebqx8yjmFmxtJ/E6nN6u1D9srOiVWm3Rb4tmcUA==}
+
+  '@lezer/json@1.0.3':
+    resolution: {integrity: sha512-BP9KzdF9Y35PDpv04r0VeSTKDeox5vVr3efE7eBbx3r4s3oNLfunchejZhjArmeieBH+nVOpgIiBJpEAv8ilqQ==}
+
+  '@lezer/lr@1.4.10':
+    resolution: {integrity: sha512-rnCpTIBafOx4mRp43xOxDJbFipJm/c0cia/V5TiGlhmMa+wsSdoGmUN3w5Bqrks/09Q/D4tNAmWaT8p6NRi77A==}
+
+  '@lezer/markdown@1.6.4':
+    resolution: {integrity: sha512-N0SxazMj4k65DBfaf1azqtMZd6u7MqluP84/NZnB/io8Td9aleFmAhz9hcbvSfsxT5tdYlJ5qgv5aMJGY4zEtA==}
+
+  '@lezer/php@1.0.5':
+    resolution: {integrity: sha512-W7asp9DhM6q0W6DYNwIkLSKOvxlXRrif+UXBMxzsJUuqmhE7oVU+gS3THO4S/Puh7Xzgm858UNaFi6dxTP8dJA==}
+
+  '@lezer/python@1.1.19':
+    resolution: {integrity: sha512-MhQIURHRytsNzP/YXnqpYKW6la6voAH3kyplTOOiCdjyFY6cWWGFVmYVdHIPrElqSDf4iCDktQCockB9FxuhzQ==}
+
+  '@lezer/rust@1.0.2':
+    resolution: {integrity: sha512-Lz5sIPBdF2FUXcWeCu1//ojFAZqzTQNRga0aYv6dYXqJqPfMdCAI0NzajWUd4Xijj1IKJLtjoXRPMvTKWBcqKg==}
+
+  '@lezer/sass@1.1.0':
+    resolution: {integrity: sha512-3mMGdCTUZ/84ArHOuXWQr37pnf7f+Nw9ycPUeKX+wu19b7pSMcZGLbaXwvD2APMBDOGxPmpK/O6S1v1EvLoqgQ==}
+
+  '@lezer/xml@1.0.6':
+    resolution: {integrity: sha512-CdDwirL0OEaStFue/66ZmFSeppuL6Dwjlk8qk153mSQwiSH/Dlri4GNymrNWnUmPl2Um7QfV1FO9KFUyX3Twww==}
+
+  '@lezer/yaml@1.0.4':
+    resolution: {integrity: sha512-2lrrHqxalACEbxIbsjhqGpSW8kWpUKuY6RHgnSAFZa6qK62wvnPxA8hGOwOoDbwHcOFs5M4o27mjGu+P7TvBmw==}
+
+  '@marijn/find-cluster-break@1.0.3':
+    resolution: {integrity: sha512-FY+MKLBoTsLNJF/eLWaOsXGdz6uh3Iu1axjPf6TUq92IYumcTcXWHoS747JARLkcdlJ/Waiaxc5wQfFO8jC6NA==}
+
+  '@napi-rs/wasm-runtime@1.1.6':
+    resolution: {integrity: sha512-ZLv/JdUfkvOy9eCnnBaGfiO+XimbjebAeO+MRQqD/B+FR1tnRN0tpKSJHRbE8sFfS6aqsXZ67TQjfwfsxULVbg==}
+    peerDependencies:
+      '@emnapi/core': ^1.7.1
+      '@emnapi/runtime': ^1.7.1
+
+  '@oxc-project/types@0.138.0':
+    resolution: {integrity: sha512-1a7ZKmrRTCoN1XMZ4L0PyyqrMnrNlLyPuOkdSX2MZg7IiIGRUyurNhAm73ptDOraoBcIordsIGKNPKUzy3ZmfA==}
+
+  '@react-types/shared@3.36.0':
+    resolution: {integrity: sha512-DkP/H0C2YjjS7gZWKNqOmU8a16qHPjQNdzMwmTq9SzplM6Iw0kVMTZ0OIoe6FOgGqa+FwMsE2QbPjh/n3g/jXQ==}
+    peerDependencies:
+      react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1
+
+  '@reduxjs/toolkit@2.12.0':
+    resolution: {integrity: sha512-KiT+RzZbp6mQET+Mg+h2c97+9j1sNflUxQkIHI7Yuzf6Peu+OYpmkn6nbHWmLLWj+1ZODUJFwGZ7gx3L9R9EOw==}
+    peerDependencies:
+      react: ^16.9.0 || ^17.0.0 || ^18 || ^19
+      react-redux: ^7.2.1 || ^8.1.3 || ^9.0.0
+    peerDependenciesMeta:
+      react:
+        optional: true
+      react-redux:
+        optional: true
+
+  '@rolldown/binding-android-arm64@1.1.4':
+    resolution: {integrity: sha512-EZLpf/8y7GXkkra90ML47kzik/GMP3EMcE9bPyHmRfxLC6z9+aW5A8poCsoxjrT5GfEcNAAvWwUHjvP1pUQkfw==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [arm64]
+    os: [android]
+
+  '@rolldown/binding-darwin-arm64@1.1.4':
+    resolution: {integrity: sha512-aUi+HBvmYb7j8krl1+qJgkG8C17fO79gk3c+jPw4S8glRFc1DTija9S3EyaTSQUm5GJXYKDAsugBEhFHH2vYiQ==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [arm64]
+    os: [darwin]
+
+  '@rolldown/binding-darwin-x64@1.1.4':
+    resolution: {integrity: sha512-F7hHC3gwY11+vByKPRWqwGbeXWVgKmL+pTGCinaEhdihzBV2aQ0fvZOch9cXYUOKuKKq429HeYXOqQLc7wFCEg==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [x64]
+    os: [darwin]
+
+  '@rolldown/binding-freebsd-x64@1.1.4':
+    resolution: {integrity: sha512-sI5yw+7s92SK6odiEhD5lKCBlWcpjHS5qyqpVQbZAJ0fIzEUXrmbl3DH2ybR3PZogulNJF+COLtmA8hUfvkCCQ==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [x64]
+    os: [freebsd]
+
+  '@rolldown/binding-linux-arm-gnueabihf@1.1.4':
+    resolution: {integrity: sha512-mCi0OKgEieFircrtVYmQAFGszRtMnZ6fpZAXrxanXAu7lqZcsK1E1RAaZNG0uKAnxox3B1f4EyQNnoyMfN1vAA==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [arm]
+    os: [linux]
+
+  '@rolldown/binding-linux-arm64-gnu@1.1.4':
+    resolution: {integrity: sha512-B9Ial3Kv5sh0SHnB1g/QWcUQCEvCF6QKGAl4zXypYj65mVI+B4AhFBwPtSN7pDrJeIx8Z7zdy4ntx+wQABom7w==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [arm64]
+    os: [linux]
+    libc: [glibc]
+
+  '@rolldown/binding-linux-arm64-musl@1.1.4':
+    resolution: {integrity: sha512-lZVym0PuHE1KZ22gmFTC15lAkrg9iTszR617oYRB/iPY1A56ywoJzVKOJBKaot5RiikCObmur6pogpse3gRcng==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [arm64]
+    os: [linux]
+    libc: [musl]
+
+  '@rolldown/binding-linux-ppc64-gnu@1.1.4':
+    resolution: {integrity: sha512-t2DNiLJWNTbnEHyUzTumldML6ET4/g16467LZoDDJ3tSxGvguL5/NyC2lCsNKuyRycg9XeDQF5SSv+TNOhQEXg==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [ppc64]
+    os: [linux]
+    libc: [glibc]
+
+  '@rolldown/binding-linux-s390x-gnu@1.1.4':
+    resolution: {integrity: sha512-0WIRnL1Uw4BvTZRLQt+PVgo6ZKTJadlC2btP+/EOXv2f/DWbY0rEgl+y834mIVwP1FkTlWVTrGGJXf12lru7EQ==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [s390x]
+    os: [linux]
+    libc: [glibc]
+
+  '@rolldown/binding-linux-x64-gnu@1.1.4':
+    resolution: {integrity: sha512-JWtGshGfX+oENAKonoNkqEJX+7hC8yfhi9GUyPX1VX4mdh1y5r+ZiJLR5XzAB0aoP6s/PcILsGjKq8O0mm24bw==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [x64]
+    os: [linux]
+    libc: [glibc]
+
+  '@rolldown/binding-linux-x64-musl@1.1.4':
+    resolution: {integrity: sha512-rT6yQcxUuXs4CnbofqwHRRV0iem349rLMYpTjkgQGLjrY4ado/eDzwPZPTCgTOlF6Nkp8NEv70yLMTn6qkWxsQ==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [x64]
+    os: [linux]
+    libc: [musl]
+
+  '@rolldown/binding-openharmony-arm64@1.1.4':
+    resolution: {integrity: sha512-KXMGoboq5cyaCQjDA4GLuRiOwBQ0EyFnJoVViLeZ45/3rFItRODEr+NdsBcVpll40hhNArlm/speWGRvj08LzA==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [arm64]
+    os: [openharmony]
+
+  '@rolldown/binding-wasm32-wasi@1.1.4':
+    resolution: {integrity: sha512-5K83rb36oJiY7BCyE9zLZtGcPV4g5wvq+xwdO0XPIwDVZI8cyB/AUjkNXGb92/rnmezEkjMOpgY61rtwjQtFwg==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [wasm32]
+
+  '@rolldown/binding-win32-arm64-msvc@1.1.4':
+    resolution: {integrity: sha512-PnWBtw3TV5KOg69HQQDR0mnQuyCmSGR2pAB4DC1rPF808fgKeTUMj2EOEyKATpgiuxuR5APQmiDO7PDgEjTFSA==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [arm64]
+    os: [win32]
+
+  '@rolldown/binding-win32-x64-msvc@1.1.4':
+    resolution: {integrity: sha512-M1lpniBePobTfsa7Ks9a199e1akxsXn+GYBUKsEzv3YFzOm1HJAMNwKI3qr0Zq+mxwx9gOZoTdP1yXRYsZUocQ==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [x64]
+    os: [win32]
+
+  '@rolldown/pluginutils@1.0.1':
+    resolution: {integrity: sha512-2j9bGt5Jh8hj+vPtgzPtl72j0yRxHAyumoo6TNfAjsLB04UtpSvPbPcDcBMxz7n+9CYB0c1GxQFxYRg2jimqGw==}
+
+  '@standard-schema/spec@1.1.0':
+    resolution: {integrity: sha512-l2aFy5jALhniG5HgqrD6jXLi/rUWrKvqN/qJx6yoJsgKhblVd+iqqU4RCXavm/jPityDo5TCvKMnpjKnOriy0w==}
+
+  '@standard-schema/utils@0.3.0':
+    resolution: {integrity: sha512-e7Mew686owMaPJVNNLs55PUvgz371nKgwsc4vxE49zsODpJEnxgxRo2y/OKrqueavXgZNMDVj3DdHFlaSAeU8g==}
+
+  '@swc/helpers@0.5.23':
+    resolution: {integrity: sha512-5lSsMOTXURePglDfvuAQUqkGek9Hg2kksOYay2m0+XR++b2NWYL/4sWyuvVBIs8oKnJaxkdi9whaL/sqN13afw==}
+
+  '@tailwindcss/node@4.3.2':
+    resolution: {integrity: sha512-yWP/sqEcBLaD8JuA6zNwxoYKr75qxTioYwlRwekj5Jr/I5GXnoJfjetH/psLUIv74cYTH2lBUEzBkinthoYcBg==}
+
+  '@tailwindcss/oxide-android-arm64@4.3.2':
+    resolution: {integrity: sha512-WHxqIuHpvZ5VtdX6GTl1Ik/Vp2YuN42Et+0CdeaVd/frQ9jAvGmvR8vLT+jk3e8/Q3x8kECB9+R17pgpp2BulA==}
+    engines: {node: '>= 20'}
+    cpu: [arm64]
+    os: [android]
+
+  '@tailwindcss/oxide-darwin-arm64@4.3.2':
+    resolution: {integrity: sha512-GZypeUY/IDJW3877KeM+O67vbXr3MBnbtEL4aYhNErv/JWZhye2vGSWWG9tB6iiqR2MqRNkY8IOUy4NdSZV26w==}
+    engines: {node: '>= 20'}
+    cpu: [arm64]
+    os: [darwin]
+
+  '@tailwindcss/oxide-darwin-x64@4.3.2':
+    resolution: {integrity: sha512-UIIzmefR6KO1sDU7MzRqAxC8iBpft/VhkGjTjnhoS6k7Z3rQ9wEgA1ODSiyH/tcSYssulNm4Ci3hOeK1jH7ccQ==}
+    engines: {node: '>= 20'}
+    cpu: [x64]
+    os: [darwin]
+
+  '@tailwindcss/oxide-freebsd-x64@4.3.2':
+    resolution: {integrity: sha512-GN+uAmcI6DNspnCDwtOAZrTz6oukJnp337qZvxqCGLd3BHBzJpO0ZbTLRvJNdztOeAmTzewewGIMPb0tk2R4WA==}
+    engines: {node: '>= 20'}
+    cpu: [x64]
+    os: [freebsd]
+
+  '@tailwindcss/oxide-linux-arm-gnueabihf@4.3.2':
+    resolution: {integrity: sha512-4ABn7qSbdHRwTiDiuWNegCyb5+2FJ4vKIKc3DmKrvAFw7MU1Lm11dIkTPwUaFdTzc7IsOpDbqBrlh0x6y36U/w==}
+    engines: {node: '>= 20'}
+    cpu: [arm]
+    os: [linux]
+
+  '@tailwindcss/oxide-linux-arm64-gnu@4.3.2':
+    resolution: {integrity: sha512-wDgEIGwoM8w8pufh9LVt1PahDgNdKXrLC2qfAnV3vAmococ9RWbxeAw4pxPttd/TsJfwjyLf90Dg1y9y8I6Emw==}
+    engines: {node: '>= 20'}
+    cpu: [arm64]
+    os: [linux]
+    libc: [glibc]
+
+  '@tailwindcss/oxide-linux-arm64-musl@4.3.2':
+    resolution: {integrity: sha512-J5Nuk0uZQIiMTJj3LEx4sAA9tMFUoXQZFv1J6An+QGYe53HKRJuFDi0rpq/tuouCZeAbOBY3kQ6g8qeD4TUjtA==}
+    engines: {node: '>= 20'}
+    cpu: [arm64]
+    os: [linux]
+    libc: [musl]
+
+  '@tailwindcss/oxide-linux-x64-gnu@4.3.2':
+    resolution: {integrity: sha512-kqCZpSKOBEJO4mz7OqWoofBZeXTAwaVGPj0ErAj7CojmhKpWVWVOnrt9dE8odoIraZq4oj3ausM37kXi+Tow8w==}
+    engines: {node: '>= 20'}
+    cpu: [x64]
+    os: [linux]
+    libc: [glibc]
+
+  '@tailwindcss/oxide-linux-x64-musl@4.3.2':
+    resolution: {integrity: sha512-cixpqbh2toJDmkuCRI68nXA8ZxNmdK9Y+9v5h3MC3ZQKy/0BO8AWzlkWyRM7JAFSGBlfig4YVTPsK6MVgqz1uw==}
+    engines: {node: '>= 20'}
+    cpu: [x64]
+    os: [linux]
+    libc: [musl]
+
+  '@tailwindcss/oxide-wasm32-wasi@4.3.2':
+    resolution: {integrity: sha512-4ec2Z/LOmRsAgU23CS4xeJfcJlmRg94A/XrbGRCF1gyU/zdDfRLYDVsS+ynSZCmGNxQ1jQriQOKMQeQxBA3Isw==}
+    engines: {node: '>=14.0.0'}
+    cpu: [wasm32]
+    bundledDependencies:
+      - '@napi-rs/wasm-runtime'
+      - '@emnapi/core'
+      - '@emnapi/runtime'
+      - '@tybys/wasm-util'
+      - '@emnapi/wasi-threads'
+      - tslib
+
+  '@tailwindcss/oxide-win32-arm64-msvc@4.3.2':
+    resolution: {integrity: sha512-Zyr/M0+XcYZu3bZrUytc7TXvrk0ftWfl8gN2MwekNDzhqhKRUucMPSeOzM0o0wH5AWOU49BsKRrfKxI2atCPMQ==}
+    engines: {node: '>= 20'}
+    cpu: [arm64]
+    os: [win32]
+
+  '@tailwindcss/oxide-win32-x64-msvc@4.3.2':
+    resolution: {integrity: sha512-QI9BO7KlNZsp2GuO0jwAAj5jCDABOKXRkCk2XuKTSaNEFSdfzqswYVTtCHBNKHLsqyjFyFkqlDiwkNbTYSssMQ==}
+    engines: {node: '>= 20'}
+    cpu: [x64]
+    os: [win32]
+
+  '@tailwindcss/oxide@4.3.2':
+    resolution: {integrity: sha512-z8ZgnzX8gdNoWLBLqBPoh/sjnxkwvf9ZuWjnO0l0yIzbLa5/9S+eC5QxGZKRobVHIC3/1BoMWjHblqWjcgFgag==}
+    engines: {node: '>= 20'}
+
+  '@tailwindcss/typography@0.5.20':
+    resolution: {integrity: sha512-hwbzQuNUfcPvbegQFatVPl/MY/tcM9KLl963hQ5laJKPh81TEZ1+dNG9PirGvcaDBkp+BCshExAyKVPW91dozw==}
+    peerDependencies:
+      tailwindcss: '>=3.0.0 || >=4.0.0 || insiders'
+
+  '@tailwindcss/vite@4.3.2':
+    resolution: {integrity: sha512-eHpMeX4JXfVNJDEcsouTeCBubJBTcTLigeaw/NTUW6PB5ATKKXdyonnXgTBX2VuRbjz1hjfz6C5XAhr52ImQXA==}
+    peerDependencies:
+      vite: ^5.2.0 || ^6 || ^7 || ^8
+
+  '@trivago/prettier-plugin-sort-imports@6.0.2':
+    resolution: {integrity: sha512-3DgfkukFyC/sE/VuYjaUUWoFfuVjPK55vOFDsxD56XXynFMCZDYFogH2l/hDfOsQAm1myoU/1xByJ3tWqtulXA==}
+    engines: {node: '>= 20'}
+    peerDependencies:
+      '@vue/compiler-sfc': 3.x
+      prettier: 2.x - 3.x
+      prettier-plugin-ember-template-tag: '>= 2.0.0'
+      prettier-plugin-svelte: 3.x
+      svelte: 4.x || 5.x
+    peerDependenciesMeta:
+      '@vue/compiler-sfc':
+        optional: true
+      prettier-plugin-ember-template-tag:
+        optional: true
+      prettier-plugin-svelte:
+        optional: true
+      svelte:
+        optional: true
+
+  '@tybys/wasm-util@0.10.3':
+    resolution: {integrity: sha512-F3fo1MYrRJYL3zER0OUOmkutjr1Vp23m7OsSgp7nq4SP6OqX6C/56XFIPAl5bt3zaBRjmW7SGz3u/6LwFpYcOg==}
+
+  '@types/d3-array@3.2.2':
+    resolution: {integrity: sha512-hOLWVbm7uRza0BYXpIIW5pxfrKe0W+D5lrFiAEYR+pb6w3N2SwSMaJbXdUfSEv+dT4MfHBLtn5js0LAWaO6otw==}
+
+  '@types/d3-color@3.1.3':
+    resolution: {integrity: sha512-iO90scth9WAbmgv7ogoq57O9YpKmFBbmoEoCHDB2xMBY0+/KVrqAaCDyCE16dUspeOvIxFFRI+0sEtqDqy2b4A==}
+
+  '@types/d3-ease@3.0.2':
+    resolution: {integrity: sha512-NcV1JjO5oDzoK26oMzbILE6HW7uVXOHLQvHshBUW4UMdZGfiY6v5BeQwh9a9tCzv+CeefZQHJt5SRgK154RtiA==}
+
+  '@types/d3-interpolate@3.0.4':
+    resolution: {integrity: sha512-mgLPETlrpVV1YRJIglr4Ez47g7Yxjl1lj7YKsiMCb27VJH9W8NVM6Bb9d8kkpG/uAQS5AmbA48q2IAolKKo1MA==}
+
+  '@types/d3-path@3.1.1':
+    resolution: {integrity: sha512-VMZBYyQvbGmWyWVea0EHs/BwLgxc+MKi1zLDCONksozI4YJMcTt8ZEuIR4Sb1MMTE8MMW49v0IwI5+b7RmfWlg==}
+
+  '@types/d3-scale@4.0.9':
+    resolution: {integrity: sha512-dLmtwB8zkAeO/juAMfnV+sItKjlsw2lKdZVVy6LRr0cBmegxSABiLEpGVmSJJ8O08i4+sGR6qQtb6WtuwJdvVw==}
+
+  '@types/d3-shape@3.1.8':
+    resolution: {integrity: sha512-lae0iWfcDeR7qt7rA88BNiqdvPS5pFVPpo5OfjElwNaT2yyekbM0C9vK+yqBqEmHr6lDkRnYNoTBYlAgJa7a4w==}
+
+  '@types/d3-time@3.0.4':
+    resolution: {integrity: sha512-yuzZug1nkAAaBlBBikKZTgzCeA+k1uy4ZFwWANOfKw5z5LRhV0gNA7gNkKm7HoK+HRN0wX3EkxGk0fpbWhmB7g==}
+
+  '@types/d3-timer@3.0.2':
+    resolution: {integrity: sha512-Ps3T8E8dZDam6fUyNiMkekK3XUsaUEik+idO9/YjPtfj2qruF8tFBXS7XhtE4iIXBLxhmLjP3SXpLhVf21I9Lw==}
+
+  '@types/debug@4.1.13':
+    resolution: {integrity: sha512-KSVgmQmzMwPlmtljOomayoR89W4FynCAi3E8PPs7vmDVPe84hT+vGPKkJfThkmXs0x0jAaa9U8uW8bbfyS2fWw==}
+
+  '@types/esrecurse@4.3.1':
+    resolution: {integrity: sha512-xJBAbDifo5hpffDBuHl0Y8ywswbiAp/Wi7Y/GtAgSlZyIABppyurxVueOPE8LUQOxdlgi6Zqce7uoEpqNTeiUw==}
+
+  '@types/estree-jsx@1.0.5':
+    resolution: {integrity: sha512-52CcUVNFyfb1A2ALocQw/Dd1BQFNmSdkuC3BkZ6iqhdMfQz7JWOFRuJFloOzjk+6WijU56m9oKXFAXc7o3Towg==}
+
+  '@types/estree@1.0.9':
+    resolution: {integrity: sha512-GhdPgy1el4/ImP05X05Uw4cw2/M93BCUmnEvWZNStlCzEKME4Fkk+YpoA5OiHNQmoS7Cafb8Xa3Pya8m1Qrzeg==}
+
+  '@types/hast@3.0.4':
+    resolution: {integrity: sha512-WPs+bbQw5aCj+x6laNGWLH3wviHtoCv/P3+otBhbOhJgG8qtpdAMlTCxLtsTWA7LH1Oh/bFCHsBn0TPS5m30EQ==}
+
+  '@types/json-schema@7.0.15':
+    resolution: {integrity: sha512-5+fP8P8MFNC+AyZCDxrB2pkZFPGzqQWUzpSeuuVLvm8VMcorNYavBqoFcxK8bQz4Qsbn4oUEEem4wDLfcysGHA==}
+
+  '@types/mdast@4.0.4':
+    resolution: {integrity: sha512-kGaNbPh1k7AFzgpud/gMdvIm5xuECykRR+JnWKQno9TAXVa6WIVCGTPvYGekIDL4uwCZQSYbUxNBSb1aUo79oA==}
+
+  '@types/ms@2.1.0':
+    resolution: {integrity: sha512-GsCCIZDE/p3i96vtEqx+7dBUGXrc7zeSK3wwPHIaRThS+9OhWIXRqzs4d6k1SVU8g91DrNRWxWUGhp5KXQb2VA==}
+
+  '@types/node@25.9.4':
+    resolution: {integrity: sha512-dszCsrKb5U7ZsVZBWiHFklTloVl0mSEnWH/iZXfZUlI4rzCUnsvGmgqfuVRHL54ugE7/wRuxEIXRa2iMZ+BG6g==}
+
+  '@types/react-dom@19.2.3':
+    resolution: {integrity: sha512-jp2L/eY6fn+KgVVQAOqYItbF0VY/YApe5Mz2F0aykSO8gx31bYCZyvSeYxCHKvzHG5eZjc+zyaS5BrBWya2+kQ==}
+    peerDependencies:
+      '@types/react': ^19.2.0
+
+  '@types/react@19.2.17':
+    resolution: {integrity: sha512-MXfmqaVPEVgkBT/aY0aGCkRWWtByiYQXo3xdQ8r5RzuFrPiRn8Gar2tQdXSUQ2GKV3bkXckek89V8wQBY2Q/Aw==}
+
+  '@types/unist@2.0.11':
+    resolution: {integrity: sha512-CmBKiL6NNo/OqgmMn95Fk9Whlp2mtvIv+KNpQKN2F4SjvrEesubTRWGYSg+BnWZOnlCaSTU1sMpsBOzgbYhnsA==}
+
+  '@types/unist@3.0.3':
+    resolution: {integrity: sha512-ko/gIFJRv177XgZsZcBwnqJN5x/Gien8qNOn0D5bQU/zAzVf9Zt3BlcUiLqhV9y4ARk0GbT3tnUiPNgnTXzc/Q==}
+
+  '@types/use-sync-external-store@0.0.6':
+    resolution: {integrity: sha512-zFDAD+tlpf2r4asuHEj0XH6pY6i0g5NeAHPn+15wk3BV6JA69eERFXC1gyGThDkVa1zCyKr5jox1+2LbV/AMLg==}
+
+  '@typescript-eslint/eslint-plugin@8.62.1':
+    resolution: {integrity: sha512-4EQM77WgVNxj7OkL/5b/D/xZsw00G577+UriYTC7JF5opcF3T2AuoeY7ueLaZgSVjSgCS6yOAJB5bRGLPSJUzA==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
+    peerDependencies:
+      '@typescript-eslint/parser': ^8.62.1
+      eslint: ^8.57.0 || ^9.0.0 || ^10.0.0
+      typescript: '>=4.8.4 <6.1.0'
+
+  '@typescript-eslint/parser@8.62.1':
+    resolution: {integrity: sha512-sPhE4iHuJDSvoAiec+Ro8JyXw8f0ql13HFR82P99nCm9GwTEKG0KYLvDe6REk8BCXuit6vJAv/Yxg5ABaNS2rA==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
+    peerDependencies:
+      eslint: ^8.57.0 || ^9.0.0 || ^10.0.0
+      typescript: '>=4.8.4 <6.1.0'
+
+  '@typescript-eslint/project-service@8.62.1':
+    resolution: {integrity: sha512-yQ3RgY5RkSBpsNS1Bx/JQEcA24FOSdfGktoyprAr5u18390UQdtVcfnEv4nIrIshNnavlVyZBKxQwT1fIAE6cg==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
+    peerDependencies:
+      typescript: '>=4.8.4 <6.1.0'
+
+  '@typescript-eslint/scope-manager@8.62.1':
+    resolution: {integrity: sha512-r4d249KbQ1SFdpeStvob8Ih6aPPIzfqllPVOtvhve6ZcpuVcYo5/7zUWckKpHE7StASX4kTKZTLf0WQm/wPkcg==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
+
+  '@typescript-eslint/tsconfig-utils@8.62.1':
+    resolution: {integrity: sha512-xadytJqX9vJVQ2fdQjkcIVigwaOJNWkpjdLt6cEQ+xPnrI1fkp+/jZE/I97k9KUjqtpd25i0HeyZf3T6dutv2g==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
+    peerDependencies:
+      typescript: '>=4.8.4 <6.1.0'
+
+  '@typescript-eslint/type-utils@8.62.1':
+    resolution: {integrity: sha512-aXM5xlqXiTxPibXB93cLAURfT3rlizf7uMXISCXy66Isr/9hISJx3yDsKl0L7lKa51b8JpFuNKby0/O0pEm9jg==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
+    peerDependencies:
+      eslint: ^8.57.0 || ^9.0.0 || ^10.0.0
+      typescript: '>=4.8.4 <6.1.0'
+
+  '@typescript-eslint/types@8.62.1':
+    resolution: {integrity: sha512-ooCzJFaf+Hg+uG6fA3NRFGuFjlfNlDhBthbv4ZPU/0elCAFUfnyXUvf/WOpHz/jYwSmvU2GkR2LtyUfy1AxZ1Q==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
+
+  '@typescript-eslint/typescript-estree@8.62.1':
+    resolution: {integrity: sha512-xMcW9oP9u7fAMXYs9A65CVmtLQe2r//oXINHfi8HV+oiqhih17sbLdhXr4540YWlgpDKQdY854OL5ZrdCiQsAA==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
+    peerDependencies:
+      typescript: '>=4.8.4 <6.1.0'
+
+  '@typescript-eslint/utils@8.62.1':
+    resolution: {integrity: sha512-sHtbPfuKNZCG+ih8SyjjucqRntSVmp8XgL5u6o9mAhiSn8ds5o/M/XdM0abweme2Tln3szOstOrZ9OXitvPh0g==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
+    peerDependencies:
+      eslint: ^8.57.0 || ^9.0.0 || ^10.0.0
+      typescript: '>=4.8.4 <6.1.0'
+
+  '@typescript-eslint/visitor-keys@8.62.1':
+    resolution: {integrity: sha512-4g3BLxfdTMy8iZG0MaBkadnlRrCJ74cQiFbyEVMrkwIoqdyaXXQM22cotDvrl4x28wgIZ9rEJRoM+mmhSJpJ1g==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
+
+  '@uiw/codemirror-extensions-basic-setup@4.25.10':
+    resolution: {integrity: sha512-P3vytLlpE62KYSWrMUnwDCv2lvaQDuDZzyj03mHntuHo5bSl34fRZpjTY3kQTPGuXHxkGSYpoPFFj+hMTqaaMQ==}
+    peerDependencies:
+      '@codemirror/autocomplete': '>=6.0.0'
+      '@codemirror/commands': '>=6.0.0'
+      '@codemirror/language': '>=6.0.0'
+      '@codemirror/lint': '>=6.0.0'
+      '@codemirror/search': '>=6.0.0'
+      '@codemirror/state': '>=6.0.0'
+      '@codemirror/view': '>=6.0.0'
+
+  '@uiw/codemirror-theme-github@4.25.10':
+    resolution: {integrity: sha512-iMM2QT4FaebJMO4W7lXmxNkRPIjKzgY26wL0QG0Ugy0gzsnxoNz4zgNeFIblPA8rvrN3vOIhNNh4nk9UOlFKxA==}
+
+  '@uiw/codemirror-themes@4.25.10':
+    resolution: {integrity: sha512-Fqiz1HIuDlDftcL+/O53V333UOH6MqQ84VbiQB5egn6u+uDwAqACp1FrdAoi4wgpR3b3TGW4Gr0wIYcrJSSz1A==}
+    peerDependencies:
+      '@codemirror/language': '>=6.0.0'
+      '@codemirror/state': '>=6.0.0'
+      '@codemirror/view': '>=6.0.0'
+
+  '@uiw/react-codemirror@4.25.10':
+    resolution: {integrity: sha512-DzgSMwM5qzB7v1FIb4gEeriYt67iiay756/HIOM9mAbeOVK0MO7rqefHf0O5c0269pJKMW7AH9FjclExD23V9w==}
+    peerDependencies:
+      '@babel/runtime': '>=7.11.0'
+      '@codemirror/state': '>=6.0.0'
+      '@codemirror/theme-one-dark': '>=6.0.0'
+      '@codemirror/view': '>=6.0.0'
+      codemirror: '>=6.0.0'
+      react: '>=17.0.0'
+      react-dom: '>=17.0.0'
+
+  '@ungap/structured-clone@1.3.2':
+    resolution: {integrity: sha512-5jsZFwgR5rTdKwidH9Qmat75RKwqfpKlWWB1frDkljN127mwqBu8K0PYo7/hFpF03IEJpfVPpCQDY/eDx3iHvA==}
+
+  '@untitledui/file-icons@0.0.9':
+    resolution: {integrity: sha512-wz3btNnSSv2hTujgyxEFL21oyjPtGTj3osU8ZEMe8nwdlmLQEILLe96NMg9b1ciiOC5UOWNDeYIt7IfxEM6qtg==}
+    peerDependencies:
+      react: '>= 18'
+
+  '@untitledui/icons@0.0.22':
+    resolution: {integrity: sha512-lEUdk2Ni7SocXMjIokJDoBeECzmZO1qAIuZc+91rAqwSMln0CKRnk+r2dC2TJ9ccION/1ZFed2fIeKvAEAs0lQ==}
+    peerDependencies:
+      react: '>= 16'
+
+  '@vitejs/plugin-react@6.0.3':
+    resolution: {integrity: sha512-vmFvco5/QuC2f9Oj+wTk0+9XeDFkHxSamwZKYc7MxYwKICfvUvlMhqKI0VuICPltGqh1neqBKDvO4kes1ya8vg==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    peerDependencies:
+      '@rolldown/plugin-babel': ^0.1.7 || ^0.2.0
+      babel-plugin-react-compiler: ^1.0.0
+      vite: ^8.0.0
+    peerDependenciesMeta:
+      '@rolldown/plugin-babel':
+        optional: true
+      babel-plugin-react-compiler:
+        optional: true
+
+  acorn-jsx@5.3.2:
+    resolution: {integrity: sha512-rq9s+JNhf0IChjtDXxllJ7g41oZk5SlXtp0LHwyA5cejwn7vKmKp4pPri6YEePv2PU65sAsegbXtIinmDFDXgQ==}
+    peerDependencies:
+      acorn: ^6.0.0 || ^7.0.0 || ^8.0.0
+
+  acorn@8.17.0:
+    resolution: {integrity: sha512-xRQbDb9BnwDafYNn6Vwl839DYVjqXYb1XVGtWAZ1kcDc6iwAL4hg3B1dZlRiuENFeO2H53gFG3in621AdERVAg==}
+    engines: {node: '>=0.4.0'}
+    hasBin: true
+
+  ajv@6.15.0:
+    resolution: {integrity: sha512-fgFx7Hfoq60ytK2c7DhnF8jIvzYgOMxfugjLOSMHjLIPgenqa7S7oaagATUq99mV6IYvN2tRmC0wnTYX6iPbMw==}
+
+  aria-hidden@1.2.6:
+    resolution: {integrity: sha512-ik3ZgC9dY/lYVVM++OISsaYDeg1tb0VtP5uL3ouh1koGOaUMDPpbFIei4JkFimWUFPn90sbMNMXQAIVOlnYKJA==}
+    engines: {node: '>=10'}
+
+  bail@2.0.2:
+    resolution: {integrity: sha512-0xO6mYd7JB2YesxDKplafRpsiOzPt9V02ddPCLbY1xYGPOX24NTyN50qnUxgCPcSoYMhKpAuBTjQoRZCAkUDRw==}
+
+  balanced-match@1.0.2:
+    resolution: {integrity: sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==}
+
+  balanced-match@4.0.4:
+    resolution: {integrity: sha512-BLrgEcRTwX2o6gGxGOCNyMvGSp35YofuYzw9h1IMTRmKqttAZZVU67bdb9Pr2vUHA8+j3i2tJfjO6C6+4myGTA==}
+    engines: {node: 18 || 20 || >=22}
+
+  brace-expansion@2.1.1:
+    resolution: {integrity: sha512-WR1cURNjuvBLMZBMbqM0UoE+WAfdUcEV1ccD8PVBVOI+Z3ND4+SZbN8RsfT2bMuG1qwz5RFvPukSZm5fF2D5eA==}
+
+  brace-expansion@5.0.7:
+    resolution: {integrity: sha512-7oFy703dxfY3/NLxC1fh2SUCQ0H9rmAY+5EpDVfXjUTTs+HEwR2nYaqLv+GWcTsumwxPfiz6CzCNkwXwBUwqCA==}
+    engines: {node: 18 || 20 || >=22}
+
+  ccount@2.0.1:
+    resolution: {integrity: sha512-eyrF0jiFpY+3drT6383f1qhkbGsLSifNAjA61IUjZjmLCWjItY6LB9ft9YhoDgwfmclB2zhu51Lc7+95b8NRAg==}
+
+  character-entities-html4@2.1.0:
+    resolution: {integrity: sha512-1v7fgQRj6hnSwFpq1Eu0ynr/CDEw0rXo2B61qXrLNdHZmPKgb7fqS1a2JwF0rISo9q77jDI8VMEHoApn8qDoZA==}
+
+  character-entities-legacy@3.0.0:
+    resolution: {integrity: sha512-RpPp0asT/6ufRm//AJVwpViZbGM/MkjQFxJccQRHmISF/22NBtsHqAWmL+/pmkPWoIUJdWyeVleTl1wydHATVQ==}
+
+  character-entities@2.0.2:
+    resolution: {integrity: sha512-shx7oQ0Awen/BRIdkjkvz54PnEEI/EjwXDSIZp86/KKdbafHh1Df/RYGBhn4hbe2+uKC9FnT5UCEdyPz3ai9hQ==}
+
+  character-reference-invalid@2.0.1:
+    resolution: {integrity: sha512-iBZ4F4wRbyORVsu0jPV7gXkOsGYjGHPmAyv+HiHG8gi5PtC9KI2j1+v8/tlibRvjoWX027ypmG/n0HtO5t7unw==}
+
+  client-only@0.0.1:
+    resolution: {integrity: sha512-IV3Ou0jSMzZrd3pZ48nLkT9DA7Ag1pnPzaiQhpW7c3RbcqqzvzzVu+L8gfqMp/8IM2MQtSiqaCxrrcfu8I8rMA==}
+
+  clsx@2.1.1:
+    resolution: {integrity: sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA==}
+    engines: {node: '>=6'}
+
+  codemirror@6.0.2:
+    resolution: {integrity: sha512-VhydHotNW5w1UGK0Qj96BwSk/Zqbp9WbnyK2W/eVMv4QyF41INRGpjUhFJY7/uDNuudSc33a/PKr4iDqRduvHw==}
+
+  comma-separated-tokens@2.0.3:
+    resolution: {integrity: sha512-Fu4hJdvzeylCfQPp9SGWidpzrMs7tTrlu6Vb8XGaRGck8QSNZJJp538Wrb60Lax4fPwR64ViY468OIUTbRlGZg==}
+
+  cookie@1.1.1:
+    resolution: {integrity: sha512-ei8Aos7ja0weRpFzJnEA9UHJ/7XQmqglbRwnf2ATjcB9Wq874VKH9kfjjirM6UhU2/E5fFYadylyhFldcqSidQ==}
+    engines: {node: '>=18'}
+
+  crelt@1.0.7:
+    resolution: {integrity: sha512-aK6BbWfhf4U/wCcLHKPJl/xa6VkVstRaPywWtMKGwuOLc/wZTyQYuoxgvZnNsBvv7Kg3YTBQYYBCggcviQczuA==}
+
+  cross-spawn@7.0.6:
+    resolution: {integrity: sha512-uV2QOWP2nWzsy2aMp8aRibhi9dlzF5Hgh5SHaB9OiTGEyDTiJJyx0uy51QXdyWbtAHNua4XJzUKca3OzKUd3vA==}
+    engines: {node: '>= 8'}
+
+  cssesc@3.0.0:
+    resolution: {integrity: sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg==}
+    engines: {node: '>=4'}
+    hasBin: true
+
+  csstype@3.2.3:
+    resolution: {integrity: sha512-z1HGKcYy2xA8AGQfwrn0PAy+PB7X/GSj3UVJW9qKyn43xWa+gl5nXmU4qqLMRzWVLFC8KusUX8T/0kCiOYpAIQ==}
+
+  d3-array@3.2.4:
+    resolution: {integrity: sha512-tdQAmyA18i4J7wprpYq8ClcxZy3SC31QMeByyCFyRt7BVHdREQZ5lpzoe5mFEYZUWe+oq8HBvk9JjpibyEV4Jg==}
+    engines: {node: '>=12'}
+
+  d3-color@3.1.0:
+    resolution: {integrity: sha512-zg/chbXyeBtMQ1LbD/WSoW2DpC3I0mpmPdW+ynRTj/x2DAWYrIY7qeZIHidozwV24m4iavr15lNwIwLxRmOxhA==}
+    engines: {node: '>=12'}
+
+  d3-ease@3.0.1:
+    resolution: {integrity: sha512-wR/XK3D3XcLIZwpbvQwQ5fK+8Ykds1ip7A2Txe0yxncXSdq1L9skcG7blcedkOX+ZcgxGAmLX1FrRGbADwzi0w==}
+    engines: {node: '>=12'}
+
+  d3-format@3.1.2:
+    resolution: {integrity: sha512-AJDdYOdnyRDV5b6ArilzCPPwc1ejkHcoyFarqlPqT7zRYjhavcT3uSrqcMvsgh2CgoPbK3RCwyHaVyxYcP2Arg==}
+    engines: {node: '>=12'}
+
+  d3-interpolate@3.0.1:
+    resolution: {integrity: sha512-3bYs1rOD33uo8aqJfKP3JWPAibgw8Zm2+L9vBKEHJ2Rg+viTR7o5Mmv5mZcieN+FRYaAOWX5SJATX6k1PWz72g==}
+    engines: {node: '>=12'}
+
+  d3-path@3.1.0:
+    resolution: {integrity: sha512-p3KP5HCf/bvjBSSKuXid6Zqijx7wIfNW+J/maPs+iwR35at5JCbLUT0LzF1cnjbCHWhqzQTIN2Jpe8pRebIEFQ==}
+    engines: {node: '>=12'}
+
+  d3-scale@4.0.2:
+    resolution: {integrity: sha512-GZW464g1SH7ag3Y7hXjf8RoUuAFIqklOAq3MRl4OaWabTFJY9PN/E1YklhXLh+OQ3fM9yS2nOkCoS+WLZ6kvxQ==}
+    engines: {node: '>=12'}
+
+  d3-shape@3.2.0:
+    resolution: {integrity: sha512-SaLBuwGm3MOViRq2ABk3eLoxwZELpH6zhl3FbAoJ7Vm1gofKx6El1Ib5z23NUEhF9AsGl7y+dzLe5Cw2AArGTA==}
+    engines: {node: '>=12'}
+
+  d3-time-format@4.1.0:
+    resolution: {integrity: sha512-dJxPBlzC7NugB2PDLwo9Q8JiTR3M3e4/XANkreKSUxF8vvXKqm1Yfq4Q5dl8budlunRVlUUaDUgFt7eA8D6NLg==}
+    engines: {node: '>=12'}
+
+  d3-time@3.1.0:
+    resolution: {integrity: sha512-VqKjzBLejbSMT4IgbmVgDjpkYrNWUYJnbCGo874u7MMKIWsILRX+OpX/gTk8MqjpT1A/c6HY2dCA77ZN0lkQ2Q==}
+    engines: {node: '>=12'}
+
+  d3-timer@3.0.1:
+    resolution: {integrity: sha512-ndfJ/JxxMd3nw31uyKoY2naivF+r29V+Lc0svZxe1JvvIRmi8hUsrMvdOwgS1o6uBHmiz91geQ0ylPP0aj1VUA==}
+    engines: {node: '>=12'}
+
+  debug@4.4.3:
+    resolution: {integrity: sha512-RGwwWnwQvkVfavKVt22FGLw+xYSdzARwm0ru6DhTVA3umU5hZc28V3kO4stgYryrTlLpuvgI9GiijltAjNbcqA==}
+    engines: {node: '>=6.0'}
+    peerDependencies:
+      supports-color: '*'
+    peerDependenciesMeta:
+      supports-color:
+        optional: true
+
+  decimal.js-light@2.5.1:
+    resolution: {integrity: sha512-qIMFpTMZmny+MMIitAB6D7iVPEorVw6YQRWkvarTkT4tBeSLLiHzcwj6q0MmYSFCiVpiqPJTJEYIrpcPzVEIvg==}
+
+  decode-named-character-reference@1.3.0:
+    resolution: {integrity: sha512-GtpQYB283KrPp6nRw50q3U9/VfOutZOe103qlN7BPP6Ad27xYnOIWv4lPzo8HCAL+mMZofJ9KEy30fq6MfaK6Q==}
+
+  deep-is@0.1.4:
+    resolution: {integrity: sha512-oIPzksmTg4/MriiaYGO+okXDT7ztn/w3Eptv/+gSIdMdKsJo0u4CfYNFJPy+4SKMuCqGw2wxnA+URMg3t8a/bQ==}
+
+  dequal@2.0.3:
+    resolution: {integrity: sha512-0je+qPKHEMohvfRTCEo3CrPG6cAzAYgmzKyxRiYSSDkS6eGJdyVJm7WaYA5ECaAD9wLB2T4EEeymA5aFVcYXCA==}
+    engines: {node: '>=6'}
+
+  detect-libc@2.1.2:
+    resolution: {integrity: sha512-Btj2BOOO83o3WyH59e8MgXsxEQVcarkUOpEYrubB0urwnN10yQ364rsiByU11nZlqWYZm05i/of7io4mzihBtQ==}
+    engines: {node: '>=8'}
+
+  devlop@1.1.0:
+    resolution: {integrity: sha512-RWmIqhcFf1lRYBvNmr7qTNuyCt/7/ns2jbpp1+PalgE/rDQcBT0fioSMUpJ93irlUhC5hrg4cYqe6U+0ImW0rA==}
+
+  embla-carousel-react@8.6.0:
+    resolution: {integrity: sha512-0/PjqU7geVmo6F734pmPqpyHqiM99olvyecY7zdweCw+6tKEXnrE90pBiBbMMU8s5tICemzpQ3hi5EpxzGW+JA==}
+    peerDependencies:
+      react: ^16.8.0 || ^17.0.1 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc
+
+  embla-carousel-reactive-utils@8.6.0:
+    resolution: {integrity: sha512-fMVUDUEx0/uIEDM0Mz3dHznDhfX+znCCDCeIophYb1QGVM7YThSWX+wz11zlYwWFOr74b4QLGg0hrGPJeG2s4A==}
+    peerDependencies:
+      embla-carousel: 8.6.0
+
+  embla-carousel@8.6.0:
+    resolution: {integrity: sha512-SjWyZBHJPbqxHOzckOfo8lHisEaJWmwd23XppYFYVh10bU66/Pn5tkVkbkCMZVdbUE5eTCI2nD8OyIP4Z+uwkA==}
+
+  enhanced-resolve@5.21.6:
+    resolution: {integrity: sha512-aNnGCvbJ/RIyWo1IuhNdVjnNF+EjH9wpzpNHt+ci/m9He9LJvUN8wrCcXjp9cWsGNAuvSpVFTx/vraAFQ8qGjQ==}
+    engines: {node: '>=10.13.0'}
+
+  es-toolkit@1.49.0:
+    resolution: {integrity: sha512-G5iZ6Pc/FNRY/soKZHC+TxGDD83rHUDXxzaWhGCX44vAv/tMs56WMusnm/KMNK+luUPsgA9U28cGr4RDlSzL2g==}
+
+  escape-string-regexp@4.0.0:
+    resolution: {integrity: sha512-TtpcNJ3XAzx3Gq8sWRzJaVajRs0uVxA2YAkdb1jm2YkPz4G6egUFAyA3n5vtEIZefPk5Wa4UXbKuS5fKkJWdgA==}
+    engines: {node: '>=10'}
+
+  escape-string-regexp@5.0.0:
+    resolution: {integrity: sha512-/veY75JbMK4j1yjvuUxuVsiS/hr/4iHs9FTT6cgTexxdE0Ly/glccBAkloH/DofkjRbZU3bnoj38mOmhkZ0lHw==}
+    engines: {node: '>=12'}
+
+  eslint-scope@9.1.2:
+    resolution: {integrity: sha512-xS90H51cKw0jltxmvmHy2Iai1LIqrfbw57b79w/J7MfvDfkIkFZ+kj6zC3BjtUwh150HsSSdxXZcsuv72miDFQ==}
+    engines: {node: ^20.19.0 || ^22.13.0 || >=24}
+
+  eslint-visitor-keys@3.4.3:
+    resolution: {integrity: sha512-wpc+LXeiyiisxPlEkUzU6svyS1frIO3Mgxj1fdy7Pm8Ygzguax2N3Fa/D/ag1WqbOprdI+uY6wMUl8/a2G+iag==}
+    engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
+
+  eslint-visitor-keys@5.0.1:
+    resolution: {integrity: sha512-tD40eHxA35h0PEIZNeIjkHoDR4YjjJp34biM0mDvplBe//mB+IHCqHDGV7pxF+7MklTvighcCPPZC7ynWyjdTA==}
+    engines: {node: ^20.19.0 || ^22.13.0 || >=24}
+
+  eslint@10.6.0:
+    resolution: {integrity: sha512-6lVbcqSodALYo+4ELD0heG6lFiFxnLMuLkiMi2qV8LMp54N8tE8FT1GMH+ev4Ti00nFjNze2+Su6DsV5OQW3Dg==}
+    engines: {node: ^20.19.0 || ^22.13.0 || >=24}
+    hasBin: true
+    peerDependencies:
+      jiti: '*'
+    peerDependenciesMeta:
+      jiti:
+        optional: true
+
+  espree@11.2.0:
+    resolution: {integrity: sha512-7p3DrVEIopW1B1avAGLuCSh1jubc01H2JHc8B4qqGblmg5gI9yumBgACjWo4JlIc04ufug4xJ3SQI8HkS/Rgzw==}
+    engines: {node: ^20.19.0 || ^22.13.0 || >=24}
+
+  esquery@1.7.0:
+    resolution: {integrity: sha512-Ap6G0WQwcU/LHsvLwON1fAQX9Zp0A2Y6Y/cJBl9r/JbW90Zyg4/zbG6zzKa2OTALELarYHmKu0GhpM5EO+7T0g==}
+    engines: {node: '>=0.10'}
+
+  esrecurse@4.3.0:
+    resolution: {integrity: sha512-KmfKL3b6G+RXvP8N1vr3Tq1kL/oCFgn2NYXEtqP8/L3pKapUA4G8cFVaoF3SU323CD4XypR/ffioHmkti6/Tag==}
+    engines: {node: '>=4.0'}
+
+  estraverse@5.3.0:
+    resolution: {integrity: sha512-MMdARuVEQziNTeJD8DgMqmhwR11BRQ/cBP+pLtYdSTnf3MIO8fFeiINEbX36ZdNlfU/7A9f3gUw49B3oQsvwBA==}
+    engines: {node: '>=4.0'}
+
+  estree-util-is-identifier-name@3.0.0:
+    resolution: {integrity: sha512-hFtqIDZTIUZ9BXLb8y4pYGyk6+wekIivNVTcmvk8NoOh+VeRn5y6cEHzbURrWbfp1fIqdVipilzj+lfaadNZmg==}
+
+  esutils@2.0.3:
+    resolution: {integrity: sha512-kVscqXk4OCp68SZ0dkgEKVi6/8ij300KBWTJq32P/dYeWTSwK41WyTxalN1eRmA5Z9UU/LX9D7FWSmV9SAYx6g==}
+    engines: {node: '>=0.10.0'}
+
+  eventemitter3@5.0.4:
+    resolution: {integrity: sha512-mlsTRyGaPBjPedk6Bvw+aqbsXDtoAyAzm5MO7JgU+yVRyMQ5O8bD4Kcci7BS85f93veegeCPkL8R4GLClnjLFw==}
+
+  extend@3.0.2:
+    resolution: {integrity: sha512-fjquC59cD7CyW6urNXK0FBufkZcoiGG80wTuPujX590cB5Ttln20E2UB4S/WARVqhXffZl2LNgS+gQdPIIim/g==}
+
+  fast-deep-equal@3.1.3:
+    resolution: {integrity: sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==}
+
+  fast-json-stable-stringify@2.1.0:
+    resolution: {integrity: sha512-lhd/wF+Lk98HZoTCtlVraHtfh5XYijIjalXck7saUtuanSDyLMxnHhSXEDJqHxD7msR8D0uCmqlkwjCV8xvwHw==}
+
+  fast-levenshtein@2.0.6:
+    resolution: {integrity: sha512-DCXu6Ifhqcks7TZKY3Hxp3y6qphY5SJZmrWMDrKcERSOXWQdMhU9Ig/PYrzyw/ul9jOIyh0N4M0tbC5hodg8dw==}
+
+  fdir@6.5.0:
+    resolution: {integrity: sha512-tIbYtZbucOs0BRGqPJkshJUYdL+SDH7dVM8gjy+ERp3WAUjLEFJE+02kanyHtwjWOnwrKYBiwAmM0p4kLJAnXg==}
+    engines: {node: '>=12.0.0'}
+    peerDependencies:
+      picomatch: ^3 || ^4
+    peerDependenciesMeta:
+      picomatch:
+        optional: true
+
+  file-entry-cache@8.0.0:
+    resolution: {integrity: sha512-XXTUwCvisa5oacNGRP9SfNtYBNAMi+RPwBFmblZEF7N7swHYQS6/Zfk7SRwx4D5j3CH211YNRco1DEMNVfZCnQ==}
+    engines: {node: '>=16.0.0'}
+
+  find-up@5.0.0:
+    resolution: {integrity: sha512-78/PXT1wlLLDgTzDs7sjq9hzz0vXD+zn+7wypEe4fXQxCmdmqfGsEPQxmiCSQI3ajFV91bVSsvNtrJRiW6nGng==}
+    engines: {node: '>=10'}
+
+  flat-cache@4.0.1:
+    resolution: {integrity: sha512-f7ccFPK3SXFHpx15UIGyRJ/FJQctuKZ0zVuN3frBo4HnK3cay9VEW0R6yPYFHC0AgqhukPzKjq22t5DmAyqGyw==}
+    engines: {node: '>=16'}
+
+  flatted@3.4.2:
+    resolution: {integrity: sha512-PjDse7RzhcPkIJwy5t7KPWQSZ9cAbzQXcafsetQoD7sOJRQlGikNbx7yZp2OotDnJyrDcbyRq3Ttb18iYOqkxA==}
+
+  framer-motion@12.42.2:
+    resolution: {integrity: sha512-5XY9luDiu0oHfHBjpDthFMh0ES+122w6p/papSJBweMkO8Sn+PW2QaEgRblQBpWFnuvZS5qvarpt/hO2pjGmnw==}
+    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
+
+  fsevents@2.3.3:
+    resolution: {integrity: sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==}
+    engines: {node: ^8.16.0 || ^10.6.0 || >=11.0.0}
+    os: [darwin]
+
+  glob-parent@6.0.2:
+    resolution: {integrity: sha512-XxwI8EOhVQgWp6iDL+3b0r86f4d6AX6zSU55HfB4ydCEuXLXc5FcYeOu+nnGftS4TEju/11rt4KJPTMgbfmv4A==}
+    engines: {node: '>=10.13.0'}
+
+  globals@16.5.0:
+    resolution: {integrity: sha512-c/c15i26VrJ4IRt5Z89DnIzCGDn9EcebibhAOjw5ibqEHsE1wLUgkPn9RDmNcUKyU87GeaL633nyJ+pplFR2ZQ==}
+    engines: {node: '>=18'}
+
+  graceful-fs@4.2.11:
+    resolution: {integrity: sha512-RbJ5/jmFcNNCcDV5o9eTnBLJ/HszWV0P73bc+Ff4nS/rJj+YaS6IGyiOL0VoBYX+l1Wrl3k63h/KrH+nhJ0XvQ==}
+
+  hast-util-is-element@3.0.0:
+    resolution: {integrity: sha512-Val9mnv2IWpLbNPqc/pUem+a7Ipj2aHacCwgNfTiK0vJKl0LF+4Ba4+v1oPHFpf3bLYmreq0/l3Gud9S5OH42g==}
+
+  hast-util-to-html@9.0.5:
+    resolution: {integrity: sha512-OguPdidb+fbHQSU4Q4ZiLKnzWo8Wwsf5bZfbvu7//a9oTYoqD/fWpe96NuHkoS9h0ccGOTe0C4NGXdtS0iObOw==}
+
+  hast-util-to-jsx-runtime@2.3.6:
+    resolution: {integrity: sha512-zl6s8LwNyo1P9uw+XJGvZtdFF1GdAkOg8ujOw+4Pyb76874fLps4ueHXDhXWdk6YHQ6OgUtinliG7RsYvCbbBg==}
+
+  hast-util-to-text@4.0.2:
+    resolution: {integrity: sha512-KK6y/BN8lbaq654j7JgBydev7wuNMcID54lkRav1P0CaE1e47P72AWWPiGKXTJU271ooYzcvTAn/Zt0REnvc7A==}
+
+  hast-util-whitespace@3.0.0:
+    resolution: {integrity: sha512-88JUN06ipLwsnv+dVn+OIYOvAuvBMy/Qoi6O7mQHxdPXpjy+Cd6xRkWwux7DKO+4sYILtLBRIKgsdpS2gQc7qw==}
+
+  highlight.js@11.11.1:
+    resolution: {integrity: sha512-Xwwo44whKBVCYoliBQwaPvtd/2tYFkRQtXDWj1nackaV2JPXx3L0+Jvd8/qCJ2p+ML0/XVkJ2q+Mr+UVdpJK5w==}
+    engines: {node: '>=12.0.0'}
+
+  html-url-attributes@3.0.1:
+    resolution: {integrity: sha512-ol6UPyBWqsrO6EJySPz2O7ZSr856WDrEzM5zMqp+FJJLGMW35cLYmmZnl0vztAZxRUoNZJFTCohfjuIJ8I4QBQ==}
+
+  html-void-elements@3.0.0:
+    resolution: {integrity: sha512-bEqo66MRXsUGxWHV5IP0PUiAWwoEjba4VCzg0LjFJBpchPaTfyfCKTG6bc5F8ucKec3q5y6qOdGyYTSBEvhCrg==}
+
+  ignore@5.3.2:
+    resolution: {integrity: sha512-hsBTNUqQTDwkWtcdYI2i06Y/nUBEsNEDJKjWdigLvegy8kDuJAS8uRlpkkcQpyEXL0Z/pjDy5HBmMjRCJ2gq+g==}
+    engines: {node: '>= 4'}
+
+  ignore@7.0.5:
+    resolution: {integrity: sha512-Hs59xBNfUIunMFgWAbGX5cq6893IbWg4KnrjbYwX3tx0ztorVgTDA6B2sxf8ejHJ4wz8BqGUMYlnzNBer5NvGg==}
+    engines: {node: '>= 4'}
+
+  immer@11.1.9:
+    resolution: {integrity: sha512-sc/z0Cyti70bZa0ZU4sWfAElfovFb9Ni8tArJZLuklYWxegPiK3pDOql1Rq5H0FIRAW9LSQRG6OX4KqBldbhBA==}
+
+  imurmurhash@0.1.4:
+    resolution: {integrity: sha512-JmXMZ6wuvDmLiHEml9ykzqO6lwFbof0GG4IkcGaENdCRDDmMVnny7s5HsIgHCbaq0w2MyPhDqkhTUgS2LU2PHA==}
+    engines: {node: '>=0.8.19'}
+
+  inline-style-parser@0.2.7:
+    resolution: {integrity: sha512-Nb2ctOyNR8DqQoR0OwRG95uNWIC0C1lCgf5Naz5H6Ji72KZ8OcFZLz2P5sNgwlyoJ8Yif11oMuYs5pBQa86csA==}
+
+  input-otp@1.4.2:
+    resolution: {integrity: sha512-l3jWwYNvrEa6NTCt7BECfCm48GvwuZzkoeG3gBL2w4CHeOXW3eKFmf9UNYkNfYc3mxMrthMnxjIE07MT0zLBQA==}
+    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
+
+  internmap@2.0.3:
+    resolution: {integrity: sha512-5Hh7Y1wQbvY5ooGgPbDaL5iYLAPzMTUrjMulskHLH6wnv/A+1q5rgEaiuqEjB+oxGXIVZs1FF+R/KPN3ZSQYYg==}
+    engines: {node: '>=12'}
+
+  is-alphabetical@2.0.1:
+    resolution: {integrity: sha512-FWyyY60MeTNyeSRpkM2Iry0G9hpr7/9kD40mD/cGQEuilcZYS4okz8SN2Q6rLCJ8gbCt6fN+rC+6tMGS99LaxQ==}
+
+  is-alphanumerical@2.0.1:
+    resolution: {integrity: sha512-hmbYhX/9MUMF5uh7tOXyK/n0ZvWpad5caBA17GsC6vyuCqaWliRG5K1qS9inmUhEMaOBIW7/whAnSwveW/LtZw==}
+
+  is-decimal@2.0.1:
+    resolution: {integrity: sha512-AAB9hiomQs5DXWcRB1rqsxGUstbRroFOPPVAomNk/3XHR5JyEZChOyTWe2oayKnsSsr/kcGqF+z6yuH6HHpN0A==}
+
+  is-extglob@2.1.1:
+    resolution: {integrity: sha512-SbKbANkN603Vi4jEZv49LeVJMn4yGwsbzZworEoyEiutsN3nJYdbO36zfhGJ6QEDpOZIFkDtnq5JRxmvl3jsoQ==}
+    engines: {node: '>=0.10.0'}
+
+  is-glob@4.0.3:
+    resolution: {integrity: sha512-xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxhLSnrwRr4elSSg==}
+    engines: {node: '>=0.10.0'}
+
+  is-hexadecimal@2.0.1:
+    resolution: {integrity: sha512-DgZQp241c8oO6cA1SbTEWiXeoxV42vlcJxgH+B3hi1AiqqKruZR3ZGF8In3fj4+/y/7rHvlOZLZtgJ/4ttYGZg==}
+
+  is-plain-obj@4.1.0:
+    resolution: {integrity: sha512-+Pgi+vMuUNkJyExiMBt5IlFoMyKnr5zhJ4Uspz58WOhBF5QoIZkFyNHIbBAtHwzVAgk5RtndVNsDRN61/mmDqg==}
+    engines: {node: '>=12'}
+
+  isexe@2.0.0:
+    resolution: {integrity: sha512-RHxMLp9lnKHGHRng9QFhRCMbYAcVpn69smSGcq3f36xjgVVWThj4qqLbTLlq7Ssj8B+fIQ1EuCEGI2lKsyQeIw==}
+
+  javascript-natural-sort@0.7.1:
+    resolution: {integrity: sha512-nO6jcEfZWQXDhOiBtG2KvKyEptz7RVbpGP4vTD2hLBdmNQSsCiicO2Ioinv6UI4y9ukqnBpy+XZ9H6uLNgJTlw==}
+
+  jiti@2.7.0:
+    resolution: {integrity: sha512-AC/7JofJvZGrrneWNaEnJeOLUx+JlGt7tNa0wZiRPT4MY1wmfKjt2+6O2p2uz2+skll8OZZmJMNqeke7kKbNgQ==}
+    hasBin: true
+
+  js-tokens@4.0.0:
+    resolution: {integrity: sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==}
+
+  jsesc@3.1.0:
+    resolution: {integrity: sha512-/sM3dO2FOzXjKQhJuo0Q173wf2KOo8t4I8vHy6lF9poUp7bKT0/NHE8fPX23PwfhnykfqnC2xRxOnVw5XuGIaA==}
+    engines: {node: '>=6'}
+    hasBin: true
+
+  json-buffer@3.0.1:
+    resolution: {integrity: sha512-4bV5BfR2mqfQTJm+V5tPPdf+ZpuhiIvTuAB5g8kcrXOZpTT/QwwVRWBywX1ozr6lEuPdbHxwaJlm9G6mI2sfSQ==}
+
+  json-schema-traverse@0.4.1:
+    resolution: {integrity: sha512-xbbCH5dCYU5T8LcEhhuh7HJ88HXuW3qsI3Y0zOZFKfZEHcpWiHU/Jxzk629Brsab/mMiHQti9wMP+845RPe3Vg==}
+
+  json-stable-stringify-without-jsonify@1.0.1:
+    resolution: {integrity: sha512-Bdboy+l7tA3OGW6FjyFHWkP5LuByj1Tk33Ljyq0axyzdk9//JSi2u3fP1QSmd1KNwq6VOKYGlAu87CisVir6Pw==}
+
+  keyv@4.5.4:
+    resolution: {integrity: sha512-oxVHkHR/EJf2CNXnWxRLW6mg7JyCCUcG0DtEGmL2ctUo1PNTin1PUil+r/+4r5MpVgC/fn1kjsx7mjSujKqIpw==}
+
+  levn@0.4.1:
+    resolution: {integrity: sha512-+bT2uH4E5LGE7h/n3evcS/sQlJXCpIp6ym8OWJ5eV6+67Dsql/LaaT7qJBAt2rzfoa/5QBGBhxDix1dMt2kQKQ==}
+    engines: {node: '>= 0.8.0'}
+
+  lightningcss-android-arm64@1.32.0:
+    resolution: {integrity: sha512-YK7/ClTt4kAK0vo6w3X+Pnm0D2cf2vPHbhOXdoNti1Ga0al1P4TBZhwjATvjNwLEBCnKvjJc2jQgHXH0NEwlAg==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [arm64]
+    os: [android]
+
+  lightningcss-darwin-arm64@1.32.0:
+    resolution: {integrity: sha512-RzeG9Ju5bag2Bv1/lwlVJvBE3q6TtXskdZLLCyfg5pt+HLz9BqlICO7LZM7VHNTTn/5PRhHFBSjk5lc4cmscPQ==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [arm64]
+    os: [darwin]
+
+  lightningcss-darwin-x64@1.32.0:
+    resolution: {integrity: sha512-U+QsBp2m/s2wqpUYT/6wnlagdZbtZdndSmut/NJqlCcMLTWp5muCrID+K5UJ6jqD2BFshejCYXniPDbNh73V8w==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [x64]
+    os: [darwin]
+
+  lightningcss-freebsd-x64@1.32.0:
+    resolution: {integrity: sha512-JCTigedEksZk3tHTTthnMdVfGf61Fky8Ji2E4YjUTEQX14xiy/lTzXnu1vwiZe3bYe0q+SpsSH/CTeDXK6WHig==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [x64]
+    os: [freebsd]
+
+  lightningcss-linux-arm-gnueabihf@1.32.0:
+    resolution: {integrity: sha512-x6rnnpRa2GL0zQOkt6rts3YDPzduLpWvwAF6EMhXFVZXD4tPrBkEFqzGowzCsIWsPjqSK+tyNEODUBXeeVHSkw==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [arm]
+    os: [linux]
+
+  lightningcss-linux-arm64-gnu@1.32.0:
+    resolution: {integrity: sha512-0nnMyoyOLRJXfbMOilaSRcLH3Jw5z9HDNGfT/gwCPgaDjnx0i8w7vBzFLFR1f6CMLKF8gVbebmkUN3fa/kQJpQ==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [arm64]
+    os: [linux]
+    libc: [glibc]
+
+  lightningcss-linux-arm64-musl@1.32.0:
+    resolution: {integrity: sha512-UpQkoenr4UJEzgVIYpI80lDFvRmPVg6oqboNHfoH4CQIfNA+HOrZ7Mo7KZP02dC6LjghPQJeBsvXhJod/wnIBg==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [arm64]
+    os: [linux]
+    libc: [musl]
+
+  lightningcss-linux-x64-gnu@1.32.0:
+    resolution: {integrity: sha512-V7Qr52IhZmdKPVr+Vtw8o+WLsQJYCTd8loIfpDaMRWGUZfBOYEJeyJIkqGIDMZPwPx24pUMfwSxxI8phr/MbOA==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [x64]
+    os: [linux]
+    libc: [glibc]
+
+  lightningcss-linux-x64-musl@1.32.0:
+    resolution: {integrity: sha512-bYcLp+Vb0awsiXg/80uCRezCYHNg1/l3mt0gzHnWV9XP1W5sKa5/TCdGWaR/zBM2PeF/HbsQv/j2URNOiVuxWg==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [x64]
+    os: [linux]
+    libc: [musl]
+
+  lightningcss-win32-arm64-msvc@1.32.0:
+    resolution: {integrity: sha512-8SbC8BR40pS6baCM8sbtYDSwEVQd4JlFTOlaD3gWGHfThTcABnNDBda6eTZeqbofalIJhFx0qKzgHJmcPTnGdw==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [arm64]
+    os: [win32]
+
+  lightningcss-win32-x64-msvc@1.32.0:
+    resolution: {integrity: sha512-Amq9B/SoZYdDi1kFrojnoqPLxYhQ4Wo5XiL8EVJrVsB8ARoC1PWW6VGtT0WKCemjy8aC+louJnjS7U18x3b06Q==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [x64]
+    os: [win32]
+
+  lightningcss@1.32.0:
+    resolution: {integrity: sha512-NXYBzinNrblfraPGyrbPoD19C1h9lfI/1mzgWYvXUTe414Gz/X1FD2XBZSZM7rRTrMA8JL3OtAaGifrIKhQ5yQ==}
+    engines: {node: '>= 12.0.0'}
+
+  locate-path@6.0.0:
+    resolution: {integrity: sha512-iPZK6eYjbxRu3uB4/WZ3EsEIMJFMqAoopl3R+zuq0UjcAm/MO6KCweDgPfP3elTztoKP3KtnVHxTn2NHBSDVUw==}
+    engines: {node: '>=10'}
+
+  lodash-es@4.18.1:
+    resolution: {integrity: sha512-J8xewKD/Gk22OZbhpOVSwcs60zhd95ESDwezOFuA3/099925PdHJ7OFHNTGtajL3AlZkykD32HykiMo+BIBI8A==}
+
+  longest-streak@3.1.0:
+    resolution: {integrity: sha512-9Ri+o0JYgehTaVBBDoMqIl8GXtbWg711O3srftcHhZ0dqnETqLaoIK0x17fUw9rFSlK/0NlsKe0Ahhyl5pXE2g==}
+
+  lowlight@3.3.0:
+    resolution: {integrity: sha512-0JNhgFoPvP6U6lE/UdVsSq99tn6DhjjpAj5MxG49ewd2mOBVtwWYIT8ClyABhq198aXXODMU6Ox8DrGy/CpTZQ==}
+
+  magic-string@0.30.21:
+    resolution: {integrity: sha512-vd2F4YUyEXKGcLHoq+TEyCjxueSeHnFxyyjNp80yg0XV4vUhnDer/lvvlqM/arB5bXQN5K2/3oinyCRyx8T2CQ==}
+
+  markdown-table@3.0.4:
+    resolution: {integrity: sha512-wiYz4+JrLyb/DqW2hkFJxP7Vd7JuTDm77fvbM8VfEQdmSMqcImWeeRbHwZjBjIFki/VaMK2BhFi7oUUZeM5bqw==}
+
+  mdast-util-find-and-replace@3.0.2:
+    resolution: {integrity: sha512-Tmd1Vg/m3Xz43afeNxDIhWRtFZgM2VLyaf4vSTYwudTyeuTneoL3qtWMA5jeLyz/O1vDJmmV4QuScFCA2tBPwg==}
+
+  mdast-util-from-markdown@2.0.3:
+    resolution: {integrity: sha512-W4mAWTvSlKvf8L6J+VN9yLSqQ9AOAAvHuoDAmPkz4dHf553m5gVj2ejadHJhoJmcmxEnOv6Pa8XJhpxE93kb8Q==}
+
+  mdast-util-gfm-autolink-literal@2.0.1:
+    resolution: {integrity: sha512-5HVP2MKaP6L+G6YaxPNjuL0BPrq9orG3TsrZ9YXbA3vDw/ACI4MEsnoDpn6ZNm7GnZgtAcONJyPhOP8tNJQavQ==}
+
+  mdast-util-gfm-footnote@2.1.0:
+    resolution: {integrity: sha512-sqpDWlsHn7Ac9GNZQMeUzPQSMzR6Wv0WKRNvQRg0KqHh02fpTz69Qc1QSseNX29bhz1ROIyNyxExfawVKTm1GQ==}
+
+  mdast-util-gfm-strikethrough@2.0.0:
+    resolution: {integrity: sha512-mKKb915TF+OC5ptj5bJ7WFRPdYtuHv0yTRxK2tJvi+BDqbkiG7h7u/9SI89nRAYcmap2xHQL9D+QG/6wSrTtXg==}
+
+  mdast-util-gfm-table@2.0.0:
+    resolution: {integrity: sha512-78UEvebzz/rJIxLvE7ZtDd/vIQ0RHv+3Mh5DR96p7cS7HsBhYIICDBCu8csTNWNO6tBWfqXPWekRuj2FNOGOZg==}
+
+  mdast-util-gfm-task-list-item@2.0.0:
+    resolution: {integrity: sha512-IrtvNvjxC1o06taBAVJznEnkiHxLFTzgonUdy8hzFVeDun0uTjxxrRGVaNFqkU1wJR3RBPEfsxmU6jDWPofrTQ==}
+
+  mdast-util-gfm@3.1.0:
+    resolution: {integrity: sha512-0ulfdQOM3ysHhCJ1p06l0b0VKlhU0wuQs3thxZQagjcjPrlFRqY215uZGHHJan9GEAXd9MbfPjFJz+qMkVR6zQ==}
+
+  mdast-util-mdx-expression@2.0.1:
+    resolution: {integrity: sha512-J6f+9hUp+ldTZqKRSg7Vw5V6MqjATc+3E4gf3CFNcuZNWD8XdyI6zQ8GqH7f8169MM6P7hMBRDVGnn7oHB9kXQ==}
+
+  mdast-util-mdx-jsx@3.2.0:
+    resolution: {integrity: sha512-lj/z8v0r6ZtsN/cGNNtemmmfoLAFZnjMbNyLzBafjzikOM+glrjNHPlf6lQDOTccj9n5b0PPihEBbhneMyGs1Q==}
+
+  mdast-util-mdxjs-esm@2.0.1:
+    resolution: {integrity: sha512-EcmOpxsZ96CvlP03NghtH1EsLtr0n9Tm4lPUJUBccV9RwUOneqSycg19n5HGzCf+10LozMRSObtVr3ee1WoHtg==}
+
+  mdast-util-phrasing@4.1.0:
+    resolution: {integrity: sha512-TqICwyvJJpBwvGAMZjj4J2n0X8QWp21b9l0o7eXyVJ25YNWYbJDVIyD1bZXE6WtV6RmKJVYmQAKWa0zWOABz2w==}
+
+  mdast-util-to-hast@13.2.1:
+    resolution: {integrity: sha512-cctsq2wp5vTsLIcaymblUriiTcZd0CwWtCbLvrOzYCDZoWyMNV8sZ7krj09FSnsiJi3WVsHLM4k6Dq/yaPyCXA==}
+
+  mdast-util-to-markdown@2.1.2:
+    resolution: {integrity: sha512-xj68wMTvGXVOKonmog6LwyJKrYXZPvlwabaryTjLh9LuvovB/KAH+kvi8Gjj+7rJjsFi23nkUxRQv1KqSroMqA==}
+
+  mdast-util-to-string@4.0.0:
+    resolution: {integrity: sha512-0H44vDimn51F0YwvxSJSm0eCDOJTRlmN0R1yBh4HLj9wiV1Dn0QoXGbvFAWj2hSItVTlCmBF1hqKlIyUBVFLPg==}
+
+  micromark-core-commonmark@2.0.3:
+    resolution: {integrity: sha512-RDBrHEMSxVFLg6xvnXmb1Ayr2WzLAWjeSATAoxwKYJV94TeNavgoIdA0a9ytzDSVzBy2YKFK+emCPOEibLeCrg==}
+
+  micromark-extension-gfm-autolink-literal@2.1.0:
+    resolution: {integrity: sha512-oOg7knzhicgQ3t4QCjCWgTmfNhvQbDDnJeVu9v81r7NltNCVmhPy1fJRX27pISafdjL+SVc4d3l48Gb6pbRypw==}
+
+  micromark-extension-gfm-footnote@2.1.0:
+    resolution: {integrity: sha512-/yPhxI1ntnDNsiHtzLKYnE3vf9JZ6cAisqVDauhp4CEHxlb4uoOTxOCJ+9s51bIB8U1N1FJ1RXOKTIlD5B/gqw==}
+
+  micromark-extension-gfm-strikethrough@2.1.0:
+    resolution: {integrity: sha512-ADVjpOOkjz1hhkZLlBiYA9cR2Anf8F4HqZUO6e5eDcPQd0Txw5fxLzzxnEkSkfnD0wziSGiv7sYhk/ktvbf1uw==}
+
+  micromark-extension-gfm-table@2.1.1:
+    resolution: {integrity: sha512-t2OU/dXXioARrC6yWfJ4hqB7rct14e8f7m0cbI5hUmDyyIlwv5vEtooptH8INkbLzOatzKuVbQmAYcbWoyz6Dg==}
+
+  micromark-extension-gfm-tagfilter@2.0.0:
+    resolution: {integrity: sha512-xHlTOmuCSotIA8TW1mDIM6X2O1SiX5P9IuDtqGonFhEK0qgRI4yeC6vMxEV2dgyr2TiD+2PQ10o+cOhdVAcwfg==}
+
+  micromark-extension-gfm-task-list-item@2.1.0:
+    resolution: {integrity: sha512-qIBZhqxqI6fjLDYFTBIa4eivDMnP+OZqsNwmQ3xNLE4Cxwc+zfQEfbs6tzAo2Hjq+bh6q5F+Z8/cksrLFYWQQw==}
+
+  micromark-extension-gfm@3.0.0:
+    resolution: {integrity: sha512-vsKArQsicm7t0z2GugkCKtZehqUm31oeGBV/KVSorWSy8ZlNAv7ytjFhvaryUiCUJYqs+NoE6AFhpQvBTM6Q4w==}
+
+  micromark-factory-destination@2.0.1:
+    resolution: {integrity: sha512-Xe6rDdJlkmbFRExpTOmRj9N3MaWmbAgdpSrBQvCFqhezUn4AHqJHbaEnfbVYYiexVSs//tqOdY/DxhjdCiJnIA==}
+
+  micromark-factory-label@2.0.1:
+    resolution: {integrity: sha512-VFMekyQExqIW7xIChcXn4ok29YE3rnuyveW3wZQWWqF4Nv9Wk5rgJ99KzPvHjkmPXF93FXIbBp6YdW3t71/7Vg==}
+
+  micromark-factory-space@2.0.1:
+    resolution: {integrity: sha512-zRkxjtBxxLd2Sc0d+fbnEunsTj46SWXgXciZmHq0kDYGnck/ZSGj9/wULTV95uoeYiK5hRXP2mJ98Uo4cq/LQg==}
+
+  micromark-factory-title@2.0.1:
+    resolution: {integrity: sha512-5bZ+3CjhAd9eChYTHsjy6TGxpOFSKgKKJPJxr293jTbfry2KDoWkhBb6TcPVB4NmzaPhMs1Frm9AZH7OD4Cjzw==}
+
+  micromark-factory-whitespace@2.0.1:
+    resolution: {integrity: sha512-Ob0nuZ3PKt/n0hORHyvoD9uZhr+Za8sFoP+OnMcnWK5lngSzALgQYKMr9RJVOWLqQYuyn6ulqGWSXdwf6F80lQ==}
+
+  micromark-util-character@2.1.1:
+    resolution: {integrity: sha512-wv8tdUTJ3thSFFFJKtpYKOYiGP2+v96Hvk4Tu8KpCAsTMs6yi+nVmGh1syvSCsaxz45J6Jbw+9DD6g97+NV67Q==}
+
+  micromark-util-chunked@2.0.1:
+    resolution: {integrity: sha512-QUNFEOPELfmvv+4xiNg2sRYeS/P84pTW0TCgP5zc9FpXetHY0ab7SxKyAQCNCc1eK0459uoLI1y5oO5Vc1dbhA==}
+
+  micromark-util-classify-character@2.0.1:
+    resolution: {integrity: sha512-K0kHzM6afW/MbeWYWLjoHQv1sgg2Q9EccHEDzSkxiP/EaagNzCm7T/WMKZ3rjMbvIpvBiZgwR3dKMygtA4mG1Q==}
+
+  micromark-util-combine-extensions@2.0.1:
+    resolution: {integrity: sha512-OnAnH8Ujmy59JcyZw8JSbK9cGpdVY44NKgSM7E9Eh7DiLS2E9RNQf0dONaGDzEG9yjEl5hcqeIsj4hfRkLH/Bg==}
+
+  micromark-util-decode-numeric-character-reference@2.0.2:
+    resolution: {integrity: sha512-ccUbYk6CwVdkmCQMyr64dXz42EfHGkPQlBj5p7YVGzq8I7CtjXZJrubAYezf7Rp+bjPseiROqe7G6foFd+lEuw==}
+
+  micromark-util-decode-string@2.0.1:
+    resolution: {integrity: sha512-nDV/77Fj6eH1ynwscYTOsbK7rR//Uj0bZXBwJZRfaLEJ1iGBR6kIfNmlNqaqJf649EP0F3NWNdeJi03elllNUQ==}
+
+  micromark-util-encode@2.0.1:
+    resolution: {integrity: sha512-c3cVx2y4KqUnwopcO9b/SCdo2O67LwJJ/UyqGfbigahfegL9myoEFoDYZgkT7f36T0bLrM9hZTAaAyH+PCAXjw==}
+
+  micromark-util-html-tag-name@2.0.1:
+    resolution: {integrity: sha512-2cNEiYDhCWKI+Gs9T0Tiysk136SnR13hhO8yW6BGNyhOC4qYFnwF1nKfD3HFAIXA5c45RrIG1ub11GiXeYd1xA==}
+
+  micromark-util-normalize-identifier@2.0.1:
+    resolution: {integrity: sha512-sxPqmo70LyARJs0w2UclACPUUEqltCkJ6PhKdMIDuJ3gSf/Q+/GIe3WKl0Ijb/GyH9lOpUkRAO2wp0GVkLvS9Q==}
+
+  micromark-util-resolve-all@2.0.1:
+    resolution: {integrity: sha512-VdQyxFWFT2/FGJgwQnJYbe1jjQoNTS4RjglmSjTUlpUMa95Htx9NHeYW4rGDJzbjvCsl9eLjMQwGeElsqmzcHg==}
+
+  micromark-util-sanitize-uri@2.0.1:
+    resolution: {integrity: sha512-9N9IomZ/YuGGZZmQec1MbgxtlgougxTodVwDzzEouPKo3qFWvymFHWcnDi2vzV1ff6kas9ucW+o3yzJK9YB1AQ==}
+
+  micromark-util-subtokenize@2.1.0:
+    resolution: {integrity: sha512-XQLu552iSctvnEcgXw6+Sx75GflAPNED1qx7eBJ+wydBb2KCbRZe+NwvIEEMM83uml1+2WSXpBAcp9IUCgCYWA==}
+
+  micromark-util-symbol@2.0.1:
+    resolution: {integrity: sha512-vs5t8Apaud9N28kgCrRUdEed4UJ+wWNvicHLPxCa9ENlYuAY31M0ETy5y1vA33YoNPDFTghEbnh6efaE8h4x0Q==}
+
+  micromark-util-types@2.0.2:
+    resolution: {integrity: sha512-Yw0ECSpJoViF1qTU4DC6NwtC4aWGt1EkzaQB8KPPyCRR8z9TWeV0HbEFGTO+ZY1wB22zmxnJqhPyTpOVCpeHTA==}
+
+  micromark@4.0.2:
+    resolution: {integrity: sha512-zpe98Q6kvavpCr1NPVSCMebCKfD7CA2NqZ+rykeNhONIJBpc1tFKt9hucLGwha3jNTNI8lHpctWJWoimVF4PfA==}
+
+  minimatch@10.2.5:
+    resolution: {integrity: sha512-MULkVLfKGYDFYejP07QOurDLLQpcjk7Fw+7jXS2R2czRQzR56yHRveU5NDJEOviH+hETZKSkIk5c+T23GjFUMg==}
+    engines: {node: 18 || 20 || >=22}
+
+  minimatch@9.0.9:
+    resolution: {integrity: sha512-OBwBN9AL4dqmETlpS2zasx+vTeWclWzkblfZk7KTA5j3jeOONz/tRCnZomUyvNg83wL5Zv9Ss6HMJXAgL8R2Yg==}
+    engines: {node: '>=16 || 14 >=14.17'}
+
+  motion-dom@12.42.2:
+    resolution: {integrity: sha512-5gIMWLp/PycBtJRJWRgjxke5n8dlvkSn2DrYW+tr3XcqAZY1xZh6BJyooJXCM8wdfM7wfMjkBJNLge1CKPUIRA==}
+
+  motion-utils@12.39.0:
+    resolution: {integrity: sha512-8nadJAJjTtqRkmRF36FoJTrywK9nnFmnPwnSMyxaOCU7GDjN9RTMJIxx9De8ErM+vpPhMccr/6fo5WciyQLnMQ==}
+
+  motion@12.42.2:
+    resolution: {integrity: sha512-Atvv11yUKIid41cVrRBDVX5m8tF8kNpExRSlbpt6APClhDjtwQssgFHhQzejxw7/7YYbjHSPKBVbHo05BuJT5Q==}
+    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
+
+  ms@2.1.3:
+    resolution: {integrity: sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==}
+
+  nanoid@3.3.15:
+    resolution: {integrity: sha512-y7Wygv/7mEOvxTuEQDB8StXdMRBWf1kR/tlhAzBRUFkB2jfcLOAxO/SHmOO2zgz1pVgK29/kyupn059/bCHdjA==}
+    engines: {node: ^10 || ^12 || ^13.7 || ^14 || >=15.0.1}
+    hasBin: true
+
+  natural-compare@1.4.0:
+    resolution: {integrity: sha512-OWND8ei3VtNC9h7V60qff3SVobHr996CTwgxubgyQYEpg290h9J0buyECNNJexkFm5sOajh5G116RYA1c8ZMSw==}
+
+  optionator@0.9.4:
+    resolution: {integrity: sha512-6IpQ7mKUxRcZNLIObR0hz7lxsapSSIYNZJwXPGeF0mTVqGKFIXj1DQcMoT22S3ROcLyY/rz0PWaWZ9ayWmad9g==}
+    engines: {node: '>= 0.8.0'}
+
+  p-limit@3.1.0:
+    resolution: {integrity: sha512-TYOanM3wGwNGsZN2cVTYPArw454xnXj5qmWF1bEoAc4+cU/ol7GVh7odevjp1FNHduHc3KZMcFduxU5Xc6uJRQ==}
+    engines: {node: '>=10'}
+
+  p-locate@5.0.0:
+    resolution: {integrity: sha512-LaNjtRWUBY++zB5nE/NwcaoMylSPk+S+ZHNB1TzdbMJMny6dynpAGt7X/tl/QYq3TIeE6nxHppbo2LGymrG5Pw==}
+    engines: {node: '>=10'}
+
+  parse-entities@4.0.2:
+    resolution: {integrity: sha512-GG2AQYWoLgL877gQIKeRPGO1xF9+eG1ujIb5soS5gPvLQ1y2o8FL90w2QWNdf9I361Mpp7726c+lj3U0qK1uGw==}
+
+  parse-imports-exports@0.2.4:
+    resolution: {integrity: sha512-4s6vd6dx1AotCx/RCI2m7t7GCh5bDRUtGNvRfHSP2wbBQdMi67pPe7mtzmgwcaQ8VKK/6IB7Glfyu3qdZJPybQ==}
+
+  parse-statements@1.0.11:
+    resolution: {integrity: sha512-HlsyYdMBnbPQ9Jr/VgJ1YF4scnldvJpJxCVx6KgqPL4dxppsWrJHCIIxQXMJrqGnsRkNPATbeMJ8Yxu7JMsYcA==}
+
+  path-exists@4.0.0:
+    resolution: {integrity: sha512-ak9Qy5Q7jYb2Wwcey5Fpvg2KoAc/ZIhLSLOSBmRmygPsGwkVVt0fZa0qrtMz+m6tJTAHfZQ8FnmB4MG4LWy7/w==}
+    engines: {node: '>=8'}
+
+  path-key@3.1.1:
+    resolution: {integrity: sha512-ojmeN0qd+y0jszEtoY48r0Peq5dwMEkIlCOu6Q5f41lfkswXuKtYrhgoTpLnyIcHm24Uhqx+5Tqm2InSwLhE6Q==}
+    engines: {node: '>=8'}
+
+  picocolors@1.1.1:
+    resolution: {integrity: sha512-xceH2snhtb5M9liqDsmEw56le376mTZkEX/jEb/RxNFyegNul7eNslCXP9FDj/Lcu0X8KEyMceP2ntpaHrDEVA==}
+
+  picomatch@4.0.4:
+    resolution: {integrity: sha512-QP88BAKvMam/3NxH6vj2o21R6MjxZUAd6nlwAS/pnGvN9IVLocLHxGYIzFhg6fUQ+5th6P4dv4eW9jX3DSIj7A==}
+    engines: {node: '>=12'}
+
+  postcss-selector-parser@6.0.10:
+    resolution: {integrity: sha512-IQ7TZdoaqbT+LCpShg46jnZVlhWD2w6iQYAcYXfHARZ7X1t/UGhhceQDs5X0cGqKvYlHNOuv7Oa1xmb0oQuA3w==}
+    engines: {node: '>=4'}
+
+  postcss@8.5.16:
+    resolution: {integrity: sha512-vuwillviilfKZsg0VGj5R/YwwcHx4SLsIOI/7K6mQkWx+l5cUHTjj5g0AasTBcyXsbfTgrwsUNmVUb5xVwyPwg==}
+    engines: {node: ^10 || ^12 || >=14}
+
+  prelude-ls@1.2.1:
+    resolution: {integrity: sha512-vkcDPrRZo1QZLbn5RLGPpg/WmIQ65qoWWhcGKf/b5eplkkarX0m9z8ppCat4mlOqUsWpyNuYgO3VRyrYHSzX5g==}
+    engines: {node: '>= 0.8.0'}
+
+  prettier-plugin-tailwindcss@0.7.4:
+    resolution: {integrity: sha512-UKii4RjY05SNt/WQi6/NcOn/LsT0/ILLXsxygjbRg5/YZelsSu5jTqorYHPDGq4nZy5q5hpCu+XdGZ1xaJEQgw==}
+    engines: {node: '>=20.19'}
+    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-jsdoc: '*'
+      prettier-plugin-marko: '*'
+      prettier-plugin-multiline-arrays: '*'
+      prettier-plugin-organize-attributes: '*'
+      prettier-plugin-organize-imports: '*'
+      prettier-plugin-sort-imports: '*'
+      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-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-svelte:
+        optional: true
+
+  prettier@3.9.4:
+    resolution: {integrity: sha512-yWG/o/4oJfo036EKAfK6ACAoDOfHeRHx4tuxkfBZiauURiaSmYwlpOr5LQqKtIkRD2z1PLteme2WoxEnj4tHTg==}
+    engines: {node: '>=14'}
+    hasBin: true
+
+  property-information@7.2.0:
+    resolution: {integrity: sha512-IAtzIB6sUiWaJYrX9smp3V46pBGbBeLFRGdh25kg1334VcBlD8HzhPeNIWQH9zhGmo2itIe25EHt9dQP7G5hmg==}
+
+  punycode@2.3.1:
+    resolution: {integrity: sha512-vYt7UD1U9Wg6138shLtLOvdAu+8DsC/ilFtEVHcH+wydcSpNE20AfSOduf6MkRFahL5FY7X1oU7nKVZFtfq8Fg==}
+    engines: {node: '>=6'}
+
+  qr-code-styling@1.9.2:
+    resolution: {integrity: sha512-RgJaZJ1/RrXJ6N0j7a+pdw3zMBmzZU4VN2dtAZf8ZggCfRB5stEQ3IoDNGaNhYY3nnZKYlYSLl5YkfWN5dPutg==}
+    engines: {node: '>=18.18.0'}
+
+  qrcode-generator@1.5.2:
+    resolution: {integrity: sha512-pItrW0Z9HnDBnFmgiNrY1uxRdri32Uh9EjNYLPVC2zZ3ZRIIEqBoDgm4DkvDwNNDHTK7FNkmr8zAa77BYc9xNw==}
+
+  react-aria-components@1.19.0:
+    resolution: {integrity: sha512-2smSS5nqJ8cGYMQezuUXveZm7eMyHCqTN6mDpylQBYLYbdF5dxCCuW1DHn1VKLe1DybSfPvX/cZtJlDmvFfn8A==}
+    peerDependencies:
+      react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1
+      react-dom: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1
+
+  react-aria@3.50.0:
+    resolution: {integrity: sha512-S0Os6QZk33fzUAKu1QLT9afoUaCBt1ZNdoiq0n2YMVgKIdNIQS8zxiZ8O9hYE6QyDkHKjD6q39LQZ+qaSAIgjw==}
+    peerDependencies:
+      react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1
+      react-dom: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1
+
+  react-dom@19.2.7:
+    resolution: {integrity: sha512-t0BRVXvbiE/o20Hfw669rLbMCDWtYZLvmJigy2f0MxsXF+71pxhR3xOkspmsO8h3ZlNzyibAmtCa3l4lYKk6gQ==}
+    peerDependencies:
+      react: ^19.2.7
+
+  react-hotkeys-hook@5.3.3:
+    resolution: {integrity: sha512-aswgyWUnE25hmhzHTfKDmKzsaSE5DJ4LKaU/o6rQSXkDd/1Bh9TfAFQbHkf6fLy11HvlYkp+cDDarGdhmCDhoQ==}
+    peerDependencies:
+      react: '>=16.8.0'
+      react-dom: '>=16.8.0'
+
+  react-is@19.2.7:
+    resolution: {integrity: sha512-kZFnouyVv7eP/Phmrlo9FK+zcAdriZJvzxXHF1Sl1P377WSGe2G/JxVolhTrB/jeV47lKImhNUsijjHAAbcl/A==}
+
+  react-markdown@10.1.0:
+    resolution: {integrity: sha512-qKxVopLT/TyA6BX3Ue5NwabOsAzm0Q7kAPwq6L+wWDwisYs7R8vZ0nRXqq6rkueboxpkjvLGU9fWifiX/ZZFxQ==}
+    peerDependencies:
+      '@types/react': '>=18'
+      react: '>=18'
+
+  react-redux@9.3.0:
+    resolution: {integrity: sha512-KQopgqFo/p/fgmAs5qz6p5RWaNAzq40WAu7fJIXnQpYxFPbJYtsJPWvGeF2rOBaY/kEuV77AVsX8TsQzKm+A/g==}
+    peerDependencies:
+      '@types/react': ^18.2.25 || ^19
+      react: ^18.0 || ^19
+      redux: ^5.0.0
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      redux:
+        optional: true
+
+  react-router@7.18.1:
+    resolution: {integrity: sha512-GDLgg3i3uM0aeJO3Fm+TCS+sDQ7gu12T6x0qdTEzcwqEfleci7JwugVNIF3U//0FWKnJT7ptG+20B2jfDqnZAg==}
+    engines: {node: '>=20.0.0'}
+    peerDependencies:
+      react: '>=18'
+      react-dom: '>=18'
+    peerDependenciesMeta:
+      react-dom:
+        optional: true
+
+  react-stately@3.48.0:
+    resolution: {integrity: sha512-ImicSAG+lTotAe5izcs1fz49Zk48w7pDusqYg04WaPhCoej8BJ24soMu3iLXIrsi273s4P1gZrYGrqReMfgEEA==}
+    peerDependencies:
+      react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1
+
+  react@19.2.7:
+    resolution: {integrity: sha512-HNe9WslTbXmFK8o8cmwgAeJFSBvt1bPdHCVKtaaV+WlAN36mpT4hcRpwbf3fY56ar2oIXzsBpOAiIRHAdY0OlQ==}
+    engines: {node: '>=0.10.0'}
+
+  recharts@3.9.1:
+    resolution: {integrity: sha512-WMcwlXcB7l+BbxiEdyClkG+1sxrMHNZpzT577LEvU4+rXPd8oTAy1wXk72hnk2KOOmxuLvw3z5DtXT7HEAydtg==}
+    engines: {node: '>=18'}
+    peerDependencies:
+      react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
+      react-dom: ^16.0.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
+      react-is: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
+
+  redux-thunk@3.1.0:
+    resolution: {integrity: sha512-NW2r5T6ksUKXCabzhL9z+h206HQw/NJkcLm1GPImRQ8IzfXwRGqjVhKJGauHirT0DAuyy6hjdnMZaRoAcy0Klw==}
+    peerDependencies:
+      redux: ^5.0.0
+
+  redux@5.0.1:
+    resolution: {integrity: sha512-M9/ELqF6fy8FwmkpnF0S3YKOqMyoWJ4+CS5Efg2ct3oY9daQvd/Pc71FpGZsVsbl3Cpb+IIcjBDUnnyBdQbq4w==}
+
+  rehype-highlight@7.0.2:
+    resolution: {integrity: sha512-k158pK7wdC2qL3M5NcZROZ2tR/l7zOzjxXd5VGdcfIyoijjQqpHd3JKtYSBDpDZ38UI2WJWuFAtkMDxmx5kstA==}
+
+  rehype-stringify@10.0.1:
+    resolution: {integrity: sha512-k9ecfXHmIPuFVI61B9DeLPN0qFHfawM6RsuX48hoqlaKSF61RskNjSm1lI8PhBEM0MRdLxVVm4WmTqJQccH9mA==}
+
+  remark-gfm@4.0.1:
+    resolution: {integrity: sha512-1quofZ2RQ9EWdeN34S79+KExV1764+wCUGop5CPL1WGdD0ocPpu91lzPGbwWMECpEpd42kJGQwzRfyov9j4yNg==}
+
+  remark-parse@11.0.0:
+    resolution: {integrity: sha512-FCxlKLNGknS5ba/1lmpYijMUzX2esxW5xQqjWxw2eHFfS2MSdaHVINFmhjo+qN1WhZhNimq0dZATN9pH0IDrpA==}
+
+  remark-rehype@11.1.2:
+    resolution: {integrity: sha512-Dh7l57ianaEoIpzbp0PC9UKAdCSVklD8E5Rpw7ETfbTl3FqcOOgq5q2LVDhgGCkaBv7p24JXikPdvhhmHvKMsw==}
+
+  remark-stringify@11.0.0:
+    resolution: {integrity: sha512-1OSmLd3awB/t8qdoEOMazZkNsfVTeY4fTsgzcQFdXNq8ToTN4ZGwrMnlda4K6smTFKD+GRV6O48i6Z4iKgPPpw==}
+
+  reselect@5.2.0:
+    resolution: {integrity: sha512-AgZ3UOZm3YndfrJ4OYjgrT7bmCm/1iqkjvEfH/oYjzh6PD2qw4QuT3jjnXIrpdt4MTpMXclMT3lXbmRY+XRakw==}
+
+  rolldown@1.1.4:
+    resolution: {integrity: sha512-IjZYiLxZwpnhwhdBH2ugdTGVSdhCQUmLxLoqyjiL0JxYjyRst+5a0P3xfrTxJ5F638j4Mvvw5FAX5XE6eHpXbA==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    hasBin: true
+
+  scheduler@0.27.0:
+    resolution: {integrity: sha512-eNv+WrVbKu1f3vbYJT/xtiF5syA5HPIMtf9IgY/nKg0sWqzAUEvqY/xm7OcZc/qafLx/iO9FgOmeSAp4v5ti/Q==}
+
+  semver@7.8.5:
+    resolution: {integrity: sha512-Y7/KDsb8LjooZpwaqGyulO6DQlksgCncchHGk+sZIY4SBvUocMBEFH5Ur1fI4dV+Jvl0w6cjvucaIi40puRioA==}
+    engines: {node: '>=10'}
+    hasBin: true
+
+  set-cookie-parser@2.7.2:
+    resolution: {integrity: sha512-oeM1lpU/UvhTxw+g3cIfxXHyJRc/uidd3yK1P242gzHds0udQBYzs3y8j4gCCW+ZJ7ad0yctld8RYO+bdurlvw==}
+
+  shebang-command@2.0.0:
+    resolution: {integrity: sha512-kHxr2zZpYtdmrN1qDjrrX/Z1rR1kG8Dx+gkpK1G4eXmvXswmcE1hTWBWYUzlraYw1/yZp6YuDY77YtvbN0dmDA==}
+    engines: {node: '>=8'}
+
+  shebang-regex@3.0.0:
+    resolution: {integrity: sha512-7++dFhtcx3353uBaq8DDR4NuxBetBzC7ZQOhmTQInHEd6bSrXdiEyzCvG07Z44UYdLShWUyXt5M/yhz8ekcb1A==}
+    engines: {node: '>=8'}
+
+  source-map-js@1.2.1:
+    resolution: {integrity: sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA==}
+    engines: {node: '>=0.10.0'}
+
+  space-separated-tokens@2.0.2:
+    resolution: {integrity: sha512-PEGlAwrG8yXGXRjW32fGbg66JAlOAwbObuqVoJpv/mRgoWDQfgH1wDPvtzWyUSNAXBGSk8h755YDbbcEy3SH2Q==}
+
+  stringify-entities@4.0.4:
+    resolution: {integrity: sha512-IwfBptatlO+QCJUo19AqvrPNqlVMpW9YEL2LIVY+Rpv2qsjCGxaDLNRgeGsQWJhfItebuJhsGSLjaBbNSQ+ieg==}
+
+  style-mod@4.1.3:
+    resolution: {integrity: sha512-i/n8VsZydrugj3Iuzll8+x/00GH2vnYsk1eomD8QiRrSAeW6ItbCQDtfXCeJHd0iwiNagqjQkvpvREEPtW3IoQ==}
+
+  style-to-js@1.1.21:
+    resolution: {integrity: sha512-RjQetxJrrUJLQPHbLku6U/ocGtzyjbJMP9lCNK7Ag0CNh690nSH8woqWH9u16nMjYBAok+i7JO1NP2pOy8IsPQ==}
+
+  style-to-object@1.0.14:
+    resolution: {integrity: sha512-LIN7rULI0jBscWQYaSswptyderlarFkjQ+t79nzty8tcIAceVomEVlLzH5VP4Cmsv6MtKhs7qaAiwlcp+Mgaxw==}
+
+  tailwind-merge@3.6.0:
+    resolution: {integrity: sha512-uxL7qAVQriqRQPAyK3pj66VqskWqoZ37PW94jwOTwNfq/z9oyu1V+eqrZqtR2+fCiXdYOZe/Modt8GtvqNzu+w==}
+
+  tailwindcss-animate@1.0.7:
+    resolution: {integrity: sha512-bl6mpH3T7I3UFxuvDEXLxy/VuFxBk5bbzplh7tXI68mwMokNYd1t9qPBHlnyTwfa4JGC4zP516I1hYYtQ/vspA==}
+    peerDependencies:
+      tailwindcss: '>=3.0.0 || insiders'
+
+  tailwindcss-react-aria-components@2.2.0:
+    resolution: {integrity: sha512-iNVDSQd6haXWiu4RakjaYnCUnLw/nOEFSFHEelFeIkT/0f8HSrJ23fwt59F93yNw4FrjjHDXIGHgEtqProNcmQ==}
+    peerDependencies:
+      tailwindcss: ^4.0.0
+
+  tailwindcss@4.3.2:
+    resolution: {integrity: sha512-WtctNNSH8A9jlMIqxzuYumOHU5uGZyRv0Q5svQl+oEPy5w84YpBxdb7MdqyiSPQge5jTJ6zFQLq0PFygdccSBA==}
+
+  tapable@2.3.3:
+    resolution: {integrity: sha512-uxc/zpqFg6x7C8vOE7lh6Lbda8eEL9zmVm/PLeTPBRhh1xCgdWaQ+J1CUieGpIfm2HdtsUpRv+HshiasBMcc6A==}
+    engines: {node: '>=6'}
+
+  tiny-invariant@1.3.3:
+    resolution: {integrity: sha512-+FbBPE1o9QAYvviau/qC5SE3caw21q3xkvWKBtja5vgqOWIHHJ3ioaq1VPfn/Szqctz2bU/oYeKd9/z5BL+PVg==}
+
+  tinyglobby@0.2.17:
+    resolution: {integrity: sha512-wXR/dYpcqKmfWpEdZjiKJOwCNFndD0DMnrW/cYjVGttEkBfVgcLFHoNrlj47mjOVic9yyNu65alsgF4NQyTa2g==}
+    engines: {node: '>=12.0.0'}
+
+  trim-lines@3.0.1:
+    resolution: {integrity: sha512-kRj8B+YHZCc9kQYdWfJB2/oUl9rA99qbowYYBtr4ui4mZyAQ2JpvVBd/6U2YloATfqBhBTSMhTpgBHtU0Mf3Rg==}
+
+  trough@2.2.0:
+    resolution: {integrity: sha512-tmMpK00BjZiUyVyvrBK7knerNgmgvcV/KLVyuma/SC+TQN167GrMRciANTz09+k3zW8L8t60jWO1GpfkZdjTaw==}
+
+  ts-api-utils@2.5.0:
+    resolution: {integrity: sha512-OJ/ibxhPlqrMM0UiNHJ/0CKQkoKF243/AEmplt3qpRgkW8VG7IfOS41h7V8TjITqdByHzrjcS/2si+y4lIh8NA==}
+    engines: {node: '>=18.12'}
+    peerDependencies:
+      typescript: '>=4.8.4'
+
+  tslib@2.8.1:
+    resolution: {integrity: sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==}
+
+  type-check@0.4.0:
+    resolution: {integrity: sha512-XleUoc9uwGXqjWwXaUTZAmzMcFZ5858QA2vvx1Ur5xIcixXIP+8LnFDgRplU30us6teqdlskFfu+ae4K79Ooew==}
+    engines: {node: '>= 0.8.0'}
+
+  typescript-eslint@8.62.1:
+    resolution: {integrity: sha512-vymnnM5g0AKQDSAyfP12nMIBvgwgA42syg74kkuZ4x1VuTzwQKwc5h9rGxeShCjny5o+zWAb6OEoz7XLgrIkIw==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
+    peerDependencies:
+      eslint: ^8.57.0 || ^9.0.0 || ^10.0.0
+      typescript: '>=4.8.4 <6.1.0'
+
+  typescript@5.9.3:
+    resolution: {integrity: sha512-jl1vZzPDinLr9eUt3J/t7V6FgNEw9QjvBPdysz9KfQDD41fQrC2Y4vKQdiaUpFT4bXlb1RHhLpp8wtm6M5TgSw==}
+    engines: {node: '>=14.17'}
+    hasBin: true
+
+  undici-types@7.24.6:
+    resolution: {integrity: sha512-WRNW+sJgj5OBN4/0JpHFqtqzhpbnV0GuB+OozA9gCL7a993SmU+1JBZCzLNxYsbMfIeDL+lTsphD5jN5N+n0zg==}
+
+  unified@11.0.5:
+    resolution: {integrity: sha512-xKvGhPWw3k84Qjh8bI3ZeJjqnyadK+GEFtazSfZv/rKeTkTjOJho6mFqh2SM96iIcZokxiOpg78GazTSg8+KHA==}
+
+  unist-util-find-after@5.0.0:
+    resolution: {integrity: sha512-amQa0Ep2m6hE2g72AugUItjbuM8X8cGQnFoHk0pGfrFeT9GZhzN5SW8nRsiGKK7Aif4CrACPENkA6P/Lw6fHGQ==}
+
+  unist-util-is@6.0.1:
+    resolution: {integrity: sha512-LsiILbtBETkDz8I9p1dQ0uyRUWuaQzd/cuEeS1hoRSyW5E5XGmTzlwY1OrNzzakGowI9Dr/I8HVaw4hTtnxy8g==}
+
+  unist-util-position@5.0.0:
+    resolution: {integrity: sha512-fucsC7HjXvkB5R3kTCO7kUjRdrS0BJt3M/FPxmHMBOm8JQi2BsHAHFsy27E0EolP8rp0NzXsJ+jNPyDWvOJZPA==}
+
+  unist-util-stringify-position@4.0.0:
+    resolution: {integrity: sha512-0ASV06AAoKCDkS2+xw5RXJywruurpbC4JZSm7nr7MOt1ojAzvyyaO+UxZf18j8FCF6kmzCZKcAgN/yu2gm2XgQ==}
+
+  unist-util-visit-parents@6.0.2:
+    resolution: {integrity: sha512-goh1s1TBrqSqukSc8wrjwWhL0hiJxgA8m4kFxGlQ+8FYQ3C/m11FcTs4YYem7V664AhHVvgoQLk890Ssdsr2IQ==}
+
+  unist-util-visit@5.1.0:
+    resolution: {integrity: sha512-m+vIdyeCOpdr/QeQCu2EzxX/ohgS8KbnPDgFni4dQsfSCtpz8UqDyY5GjRru8PDKuYn7Fq19j1CQ+nJSsGKOzg==}
+
+  uri-js@4.4.1:
+    resolution: {integrity: sha512-7rKUyy33Q1yc98pQ1DAmLtwX109F7TIfWlW1Ydo8Wl1ii1SeHieeh0HHfPeL2fMXK6z0s8ecKs9frCuLJvndBg==}
+
+  use-sync-external-store@1.6.0:
+    resolution: {integrity: sha512-Pp6GSwGP/NrPIrxVFAIkOQeyw8lFenOHijQWkUTrDvrF4ALqylP2C/KCkeS9dpUM3KvYRQhna5vt7IL95+ZQ9w==}
+    peerDependencies:
+      react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
+
+  util-deprecate@1.0.2:
+    resolution: {integrity: sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==}
+
+  vfile-message@4.0.3:
+    resolution: {integrity: sha512-QTHzsGd1EhbZs4AsQ20JX1rC3cOlt/IWJruk893DfLRr57lcnOeMaWG4K0JrRta4mIJZKth2Au3mM3u03/JWKw==}
+
+  vfile@6.0.3:
+    resolution: {integrity: sha512-KzIbH/9tXat2u30jf+smMwFCsno4wHVdNmzFyL+T/L3UGqqk6JKfVqOFOZEpZSHADH1k40ab6NUIXZq422ov3Q==}
+
+  victory-vendor@37.3.6:
+    resolution: {integrity: sha512-SbPDPdDBYp+5MJHhBCAyI7wKM3d5ivekigc2Dk2s7pgbZ9wIgIBYGVw4zGHBml/qTFbexrofXW6Gu4noGxrOwQ==}
+
+  vite@8.1.3:
+    resolution: {integrity: sha512-Ds+gBRbj0lwRO2Y5hwnUBdxSwlAve9LeRyU4sNnAr0ewW0gWF0n5bgXgUzbgZ49MV9BVUAQUFYVcDUcilUExMA==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    hasBin: true
+    peerDependencies:
+      '@types/node': ^20.19.0 || >=22.12.0
+      '@vitejs/devtools': ^0.3.0
+      esbuild: ^0.27.0 || ^0.28.0
+      jiti: '>=1.21.0'
+      less: ^4.0.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
+      '@vitejs/devtools':
+        optional: true
+      esbuild:
+        optional: true
+      jiti:
+        optional: true
+      less:
+        optional: true
+      sass:
+        optional: true
+      sass-embedded:
+        optional: true
+      stylus:
+        optional: true
+      sugarss:
+        optional: true
+      terser:
+        optional: true
+      tsx:
+        optional: true
+      yaml:
+        optional: true
+
+  w3c-keyname@2.2.8:
+    resolution: {integrity: sha512-dpojBhNsCNN7T82Tm7k26A6G9ML3NkhDsnw9n/eoxSRlVBB4CEtIQ/KTCLI2Fwf3ataSXRhYFkQi3SlnFwPvPQ==}
+
+  which@2.0.2:
+    resolution: {integrity: sha512-BLI3Tl1TW3Pvl70l3yq3Y64i+awpwXqsGBYWkkqMtnbXgrMD+yj7rhW0kuEDxzJaYXGjEW5ogapKNMEKNMjibA==}
+    engines: {node: '>= 8'}
+    hasBin: true
+
+  word-wrap@1.2.5:
+    resolution: {integrity: sha512-BN22B5eaMMI9UMtjrGd5g5eCYPpCPDUy0FJXbYsaT5zYxjFOckS53SQDE3pWkVoWpHXVb3BrYcEN4Twa55B5cA==}
+    engines: {node: '>=0.10.0'}
+
+  yocto-queue@0.1.0:
+    resolution: {integrity: sha512-rVksvsnNCdJ/ohGc6xgPwyN8eheCxsiLM8mxuE/t/mOVqJewPuO1miLpTHQiRgTKCLexL4MeAFVagts7HmNZ2Q==}
+    engines: {node: '>=10'}
+
+  zwitch@2.0.4:
+    resolution: {integrity: sha512-bXE4cR/kVZhKZX/RjPEflHaKVhUVl85noU3v6b8apfQEc1x4A+zBxjZ4lN8LqGd6WZ3dl98pY4o717VFmoPp+A==}
+
+snapshots:
+
+  '@babel/code-frame@7.29.7':
+    dependencies:
+      '@babel/helper-validator-identifier': 7.29.7
+      js-tokens: 4.0.0
+      picocolors: 1.1.1
+
+  '@babel/generator@7.29.7':
+    dependencies:
+      '@babel/parser': 7.29.7
+      '@babel/types': 7.29.7
+      '@jridgewell/gen-mapping': 0.3.13
+      '@jridgewell/trace-mapping': 0.3.31
+      jsesc: 3.1.0
+
+  '@babel/helper-globals@7.29.7': {}
+
+  '@babel/helper-string-parser@7.29.7': {}
+
+  '@babel/helper-validator-identifier@7.29.7': {}
+
+  '@babel/parser@7.29.7':
+    dependencies:
+      '@babel/types': 7.29.7
+
+  '@babel/runtime@8.0.0': {}
+
+  '@babel/template@7.29.7':
+    dependencies:
+      '@babel/code-frame': 7.29.7
+      '@babel/parser': 7.29.7
+      '@babel/types': 7.29.7
+
+  '@babel/traverse@7.29.7':
+    dependencies:
+      '@babel/code-frame': 7.29.7
+      '@babel/generator': 7.29.7
+      '@babel/helper-globals': 7.29.7
+      '@babel/parser': 7.29.7
+      '@babel/template': 7.29.7
+      '@babel/types': 7.29.7
+      debug: 4.4.3
+    transitivePeerDependencies:
+      - supports-color
+
+  '@babel/types@7.29.7':
+    dependencies:
+      '@babel/helper-string-parser': 7.29.7
+      '@babel/helper-validator-identifier': 7.29.7
+
+  '@codemirror/autocomplete@6.20.3':
+    dependencies:
+      '@codemirror/language': 6.12.4
+      '@codemirror/state': 6.7.0
+      '@codemirror/view': 6.43.4
+      '@lezer/common': 1.5.2
+
+  '@codemirror/commands@6.10.4':
+    dependencies:
+      '@codemirror/language': 6.12.4
+      '@codemirror/state': 6.7.0
+      '@codemirror/view': 6.43.4
+      '@lezer/common': 1.5.2
+
+  '@codemirror/lang-angular@0.1.4':
+    dependencies:
+      '@codemirror/lang-html': 6.4.11
+      '@codemirror/lang-javascript': 6.2.5
+      '@codemirror/language': 6.12.4
+      '@lezer/common': 1.5.2
+      '@lezer/highlight': 1.2.3
+      '@lezer/lr': 1.4.10
+
+  '@codemirror/lang-cpp@6.0.3':
+    dependencies:
+      '@codemirror/language': 6.12.4
+      '@lezer/cpp': 1.1.6
+
+  '@codemirror/lang-css@6.3.1':
+    dependencies:
+      '@codemirror/autocomplete': 6.20.3
+      '@codemirror/language': 6.12.4
+      '@codemirror/state': 6.7.0
+      '@lezer/common': 1.5.2
+      '@lezer/css': 1.3.4
+
+  '@codemirror/lang-go@6.0.1':
+    dependencies:
+      '@codemirror/autocomplete': 6.20.3
+      '@codemirror/language': 6.12.4
+      '@codemirror/state': 6.7.0
+      '@lezer/common': 1.5.2
+      '@lezer/go': 1.0.1
+
+  '@codemirror/lang-html@6.4.11':
+    dependencies:
+      '@codemirror/autocomplete': 6.20.3
+      '@codemirror/lang-css': 6.3.1
+      '@codemirror/lang-javascript': 6.2.5
+      '@codemirror/language': 6.12.4
+      '@codemirror/state': 6.7.0
+      '@codemirror/view': 6.43.4
+      '@lezer/common': 1.5.2
+      '@lezer/css': 1.3.4
+      '@lezer/html': 1.3.13
+
+  '@codemirror/lang-java@6.0.2':
+    dependencies:
+      '@codemirror/language': 6.12.4
+      '@lezer/java': 1.1.3
+
+  '@codemirror/lang-javascript@6.2.5':
+    dependencies:
+      '@codemirror/autocomplete': 6.20.3
+      '@codemirror/language': 6.12.4
+      '@codemirror/lint': 6.9.7
+      '@codemirror/state': 6.7.0
+      '@codemirror/view': 6.43.4
+      '@lezer/common': 1.5.2
+      '@lezer/javascript': 1.5.4
+
+  '@codemirror/lang-jinja@6.0.1':
+    dependencies:
+      '@codemirror/autocomplete': 6.20.3
+      '@codemirror/lang-html': 6.4.11
+      '@codemirror/language': 6.12.4
+      '@codemirror/state': 6.7.0
+      '@codemirror/view': 6.43.4
+      '@lezer/common': 1.5.2
+      '@lezer/highlight': 1.2.3
+      '@lezer/lr': 1.4.10
+
+  '@codemirror/lang-json@6.0.2':
+    dependencies:
+      '@codemirror/language': 6.12.4
+      '@lezer/json': 1.0.3
+
+  '@codemirror/lang-less@6.0.2':
+    dependencies:
+      '@codemirror/lang-css': 6.3.1
+      '@codemirror/language': 6.12.4
+      '@lezer/common': 1.5.2
+      '@lezer/highlight': 1.2.3
+      '@lezer/lr': 1.4.10
+
+  '@codemirror/lang-liquid@6.3.2':
+    dependencies:
+      '@codemirror/autocomplete': 6.20.3
+      '@codemirror/lang-html': 6.4.11
+      '@codemirror/language': 6.12.4
+      '@codemirror/state': 6.7.0
+      '@codemirror/view': 6.43.4
+      '@lezer/common': 1.5.2
+      '@lezer/highlight': 1.2.3
+      '@lezer/lr': 1.4.10
+
+  '@codemirror/lang-markdown@6.5.0':
+    dependencies:
+      '@codemirror/autocomplete': 6.20.3
+      '@codemirror/lang-html': 6.4.11
+      '@codemirror/language': 6.12.4
+      '@codemirror/state': 6.7.0
+      '@codemirror/view': 6.43.4
+      '@lezer/common': 1.5.2
+      '@lezer/markdown': 1.6.4
+
+  '@codemirror/lang-php@6.0.2':
+    dependencies:
+      '@codemirror/lang-html': 6.4.11
+      '@codemirror/language': 6.12.4
+      '@codemirror/state': 6.7.0
+      '@lezer/common': 1.5.2
+      '@lezer/php': 1.0.5
+
+  '@codemirror/lang-python@6.2.1':
+    dependencies:
+      '@codemirror/autocomplete': 6.20.3
+      '@codemirror/language': 6.12.4
+      '@codemirror/state': 6.7.0
+      '@lezer/common': 1.5.2
+      '@lezer/python': 1.1.19
+
+  '@codemirror/lang-rust@6.0.2':
+    dependencies:
+      '@codemirror/language': 6.12.4
+      '@lezer/rust': 1.0.2
+
+  '@codemirror/lang-sass@6.0.2':
+    dependencies:
+      '@codemirror/lang-css': 6.3.1
+      '@codemirror/language': 6.12.4
+      '@codemirror/state': 6.7.0
+      '@lezer/common': 1.5.2
+      '@lezer/sass': 1.1.0
+
+  '@codemirror/lang-sql@6.10.0':
+    dependencies:
+      '@codemirror/autocomplete': 6.20.3
+      '@codemirror/language': 6.12.4
+      '@codemirror/state': 6.7.0
+      '@lezer/common': 1.5.2
+      '@lezer/highlight': 1.2.3
+      '@lezer/lr': 1.4.10
+
+  '@codemirror/lang-vue@0.1.3':
+    dependencies:
+      '@codemirror/lang-html': 6.4.11
+      '@codemirror/lang-javascript': 6.2.5
+      '@codemirror/language': 6.12.4
+      '@lezer/common': 1.5.2
+      '@lezer/highlight': 1.2.3
+      '@lezer/lr': 1.4.10
+
+  '@codemirror/lang-wast@6.0.2':
+    dependencies:
+      '@codemirror/language': 6.12.4
+      '@lezer/common': 1.5.2
+      '@lezer/highlight': 1.2.3
+      '@lezer/lr': 1.4.10
+
+  '@codemirror/lang-xml@6.1.0':
+    dependencies:
+      '@codemirror/autocomplete': 6.20.3
+      '@codemirror/language': 6.12.4
+      '@codemirror/state': 6.7.0
+      '@codemirror/view': 6.43.4
+      '@lezer/common': 1.5.2
+      '@lezer/xml': 1.0.6
+
+  '@codemirror/lang-yaml@6.1.3':
+    dependencies:
+      '@codemirror/autocomplete': 6.20.3
+      '@codemirror/language': 6.12.4
+      '@codemirror/state': 6.7.0
+      '@lezer/common': 1.5.2
+      '@lezer/highlight': 1.2.3
+      '@lezer/lr': 1.4.10
+      '@lezer/yaml': 1.0.4
+
+  '@codemirror/language-data@6.5.2':
+    dependencies:
+      '@codemirror/lang-angular': 0.1.4
+      '@codemirror/lang-cpp': 6.0.3
+      '@codemirror/lang-css': 6.3.1
+      '@codemirror/lang-go': 6.0.1
+      '@codemirror/lang-html': 6.4.11
+      '@codemirror/lang-java': 6.0.2
+      '@codemirror/lang-javascript': 6.2.5
+      '@codemirror/lang-jinja': 6.0.1
+      '@codemirror/lang-json': 6.0.2
+      '@codemirror/lang-less': 6.0.2
+      '@codemirror/lang-liquid': 6.3.2
+      '@codemirror/lang-markdown': 6.5.0
+      '@codemirror/lang-php': 6.0.2
+      '@codemirror/lang-python': 6.2.1
+      '@codemirror/lang-rust': 6.0.2
+      '@codemirror/lang-sass': 6.0.2
+      '@codemirror/lang-sql': 6.10.0
+      '@codemirror/lang-vue': 0.1.3
+      '@codemirror/lang-wast': 6.0.2
+      '@codemirror/lang-xml': 6.1.0
+      '@codemirror/lang-yaml': 6.1.3
+      '@codemirror/language': 6.12.4
+      '@codemirror/legacy-modes': 6.5.3
+
+  '@codemirror/language@6.12.4':
+    dependencies:
+      '@codemirror/state': 6.7.0
+      '@codemirror/view': 6.43.4
+      '@lezer/common': 1.5.2
+      '@lezer/highlight': 1.2.3
+      '@lezer/lr': 1.4.10
+      style-mod: 4.1.3
+
+  '@codemirror/legacy-modes@6.5.3':
+    dependencies:
+      '@codemirror/language': 6.12.4
+
+  '@codemirror/lint@6.9.7':
+    dependencies:
+      '@codemirror/state': 6.7.0
+      '@codemirror/view': 6.43.4
+      crelt: 1.0.7
+
+  '@codemirror/search@6.7.1':
+    dependencies:
+      '@codemirror/state': 6.7.0
+      '@codemirror/view': 6.43.4
+      crelt: 1.0.7
+
+  '@codemirror/state@6.7.0':
+    dependencies:
+      '@marijn/find-cluster-break': 1.0.3
+
+  '@codemirror/theme-one-dark@6.1.3':
+    dependencies:
+      '@codemirror/language': 6.12.4
+      '@codemirror/state': 6.7.0
+      '@codemirror/view': 6.43.4
+      '@lezer/highlight': 1.2.3
+
+  '@codemirror/view@6.43.4':
+    dependencies:
+      '@codemirror/state': 6.7.0
+      crelt: 1.0.7
+      style-mod: 4.1.3
+      w3c-keyname: 2.2.8
+
+  '@emnapi/core@1.11.1':
+    dependencies:
+      '@emnapi/wasi-threads': 1.2.2
+      tslib: 2.8.1
+    optional: true
+
+  '@emnapi/runtime@1.11.1':
+    dependencies:
+      tslib: 2.8.1
+    optional: true
+
+  '@emnapi/wasi-threads@1.2.2':
+    dependencies:
+      tslib: 2.8.1
+    optional: true
+
+  '@eslint-community/eslint-utils@4.9.1(eslint@10.6.0(jiti@2.7.0))':
+    dependencies:
+      eslint: 10.6.0(jiti@2.7.0)
+      eslint-visitor-keys: 3.4.3
+
+  '@eslint-community/regexpp@4.12.2': {}
+
+  '@eslint/config-array@0.23.5':
+    dependencies:
+      '@eslint/object-schema': 3.0.5
+      debug: 4.4.3
+      minimatch: 10.2.5
+    transitivePeerDependencies:
+      - supports-color
+
+  '@eslint/config-helpers@0.6.0':
+    dependencies:
+      '@eslint/core': 1.2.1
+
+  '@eslint/core@1.2.1':
+    dependencies:
+      '@types/json-schema': 7.0.15
+
+  '@eslint/object-schema@3.0.5': {}
+
+  '@eslint/plugin-kit@0.7.2':
+    dependencies:
+      '@eslint/core': 1.2.1
+      levn: 0.4.1
+
+  '@fontsource-variable/inter@5.2.8': {}
+
+  '@humanfs/core@0.19.2':
+    dependencies:
+      '@humanfs/types': 0.15.0
+
+  '@humanfs/node@0.16.8':
+    dependencies:
+      '@humanfs/core': 0.19.2
+      '@humanfs/types': 0.15.0
+      '@humanwhocodes/retry': 0.4.3
+
+  '@humanfs/types@0.15.0': {}
+
+  '@humanwhocodes/module-importer@1.0.1': {}
+
+  '@humanwhocodes/retry@0.4.3': {}
+
+  '@internationalized/date@3.12.2':
+    dependencies:
+      '@swc/helpers': 0.5.23
+
+  '@internationalized/number@3.6.7':
+    dependencies:
+      '@swc/helpers': 0.5.23
+
+  '@internationalized/string@3.2.9':
+    dependencies:
+      '@swc/helpers': 0.5.23
+
+  '@jridgewell/gen-mapping@0.3.13':
+    dependencies:
+      '@jridgewell/sourcemap-codec': 1.5.5
+      '@jridgewell/trace-mapping': 0.3.31
+
+  '@jridgewell/remapping@2.3.5':
+    dependencies:
+      '@jridgewell/gen-mapping': 0.3.13
+      '@jridgewell/trace-mapping': 0.3.31
+
+  '@jridgewell/resolve-uri@3.1.2': {}
+
+  '@jridgewell/sourcemap-codec@1.5.5': {}
+
+  '@jridgewell/trace-mapping@0.3.31':
+    dependencies:
+      '@jridgewell/resolve-uri': 3.1.2
+      '@jridgewell/sourcemap-codec': 1.5.5
+
+  '@lezer/common@1.5.2': {}
+
+  '@lezer/cpp@1.1.6':
+    dependencies:
+      '@lezer/common': 1.5.2
+      '@lezer/highlight': 1.2.3
+      '@lezer/lr': 1.4.10
+
+  '@lezer/css@1.3.4':
+    dependencies:
+      '@lezer/common': 1.5.2
+      '@lezer/highlight': 1.2.3
+      '@lezer/lr': 1.4.10
+
+  '@lezer/go@1.0.1':
+    dependencies:
+      '@lezer/common': 1.5.2
+      '@lezer/highlight': 1.2.3
+      '@lezer/lr': 1.4.10
+
+  '@lezer/highlight@1.2.3':
+    dependencies:
+      '@lezer/common': 1.5.2
+
+  '@lezer/html@1.3.13':
+    dependencies:
+      '@lezer/common': 1.5.2
+      '@lezer/highlight': 1.2.3
+      '@lezer/lr': 1.4.10
+
+  '@lezer/java@1.1.3':
+    dependencies:
+      '@lezer/common': 1.5.2
+      '@lezer/highlight': 1.2.3
+      '@lezer/lr': 1.4.10
+
+  '@lezer/javascript@1.5.4':
+    dependencies:
+      '@lezer/common': 1.5.2
+      '@lezer/highlight': 1.2.3
+      '@lezer/lr': 1.4.10
+
+  '@lezer/json@1.0.3':
+    dependencies:
+      '@lezer/common': 1.5.2
+      '@lezer/highlight': 1.2.3
+      '@lezer/lr': 1.4.10
+
+  '@lezer/lr@1.4.10':
+    dependencies:
+      '@lezer/common': 1.5.2
+
+  '@lezer/markdown@1.6.4':
+    dependencies:
+      '@lezer/common': 1.5.2
+      '@lezer/highlight': 1.2.3
+
+  '@lezer/php@1.0.5':
+    dependencies:
+      '@lezer/common': 1.5.2
+      '@lezer/highlight': 1.2.3
+      '@lezer/lr': 1.4.10
+
+  '@lezer/python@1.1.19':
+    dependencies:
+      '@lezer/common': 1.5.2
+      '@lezer/highlight': 1.2.3
+      '@lezer/lr': 1.4.10
+
+  '@lezer/rust@1.0.2':
+    dependencies:
+      '@lezer/common': 1.5.2
+      '@lezer/highlight': 1.2.3
+      '@lezer/lr': 1.4.10
+
+  '@lezer/sass@1.1.0':
+    dependencies:
+      '@lezer/common': 1.5.2
+      '@lezer/highlight': 1.2.3
+      '@lezer/lr': 1.4.10
+
+  '@lezer/xml@1.0.6':
+    dependencies:
+      '@lezer/common': 1.5.2
+      '@lezer/highlight': 1.2.3
+      '@lezer/lr': 1.4.10
+
+  '@lezer/yaml@1.0.4':
+    dependencies:
+      '@lezer/common': 1.5.2
+      '@lezer/highlight': 1.2.3
+      '@lezer/lr': 1.4.10
+
+  '@marijn/find-cluster-break@1.0.3': {}
+
+  '@napi-rs/wasm-runtime@1.1.6(@emnapi/core@1.11.1)(@emnapi/runtime@1.11.1)':
+    dependencies:
+      '@emnapi/core': 1.11.1
+      '@emnapi/runtime': 1.11.1
+      '@tybys/wasm-util': 0.10.3
+    optional: true
+
+  '@oxc-project/types@0.138.0': {}
+
+  '@react-types/shared@3.36.0(react@19.2.7)':
+    dependencies:
+      react: 19.2.7
+
+  '@reduxjs/toolkit@2.12.0(react-redux@9.3.0(@types/react@19.2.17)(react@19.2.7)(redux@5.0.1))(react@19.2.7)':
+    dependencies:
+      '@standard-schema/spec': 1.1.0
+      '@standard-schema/utils': 0.3.0
+      immer: 11.1.9
+      redux: 5.0.1
+      redux-thunk: 3.1.0(redux@5.0.1)
+      reselect: 5.2.0
+    optionalDependencies:
+      react: 19.2.7
+      react-redux: 9.3.0(@types/react@19.2.17)(react@19.2.7)(redux@5.0.1)
+
+  '@rolldown/binding-android-arm64@1.1.4':
+    optional: true
+
+  '@rolldown/binding-darwin-arm64@1.1.4':
+    optional: true
+
+  '@rolldown/binding-darwin-x64@1.1.4':
+    optional: true
+
+  '@rolldown/binding-freebsd-x64@1.1.4':
+    optional: true
+
+  '@rolldown/binding-linux-arm-gnueabihf@1.1.4':
+    optional: true
+
+  '@rolldown/binding-linux-arm64-gnu@1.1.4':
+    optional: true
+
+  '@rolldown/binding-linux-arm64-musl@1.1.4':
+    optional: true
+
+  '@rolldown/binding-linux-ppc64-gnu@1.1.4':
+    optional: true
+
+  '@rolldown/binding-linux-s390x-gnu@1.1.4':
+    optional: true
+
+  '@rolldown/binding-linux-x64-gnu@1.1.4':
+    optional: true
+
+  '@rolldown/binding-linux-x64-musl@1.1.4':
+    optional: true
+
+  '@rolldown/binding-openharmony-arm64@1.1.4':
+    optional: true
+
+  '@rolldown/binding-wasm32-wasi@1.1.4':
+    dependencies:
+      '@emnapi/core': 1.11.1
+      '@emnapi/runtime': 1.11.1
+      '@napi-rs/wasm-runtime': 1.1.6(@emnapi/core@1.11.1)(@emnapi/runtime@1.11.1)
+    optional: true
+
+  '@rolldown/binding-win32-arm64-msvc@1.1.4':
+    optional: true
+
+  '@rolldown/binding-win32-x64-msvc@1.1.4':
+    optional: true
+
+  '@rolldown/pluginutils@1.0.1': {}
+
+  '@standard-schema/spec@1.1.0': {}
+
+  '@standard-schema/utils@0.3.0': {}
+
+  '@swc/helpers@0.5.23':
+    dependencies:
+      tslib: 2.8.1
+
+  '@tailwindcss/node@4.3.2':
+    dependencies:
+      '@jridgewell/remapping': 2.3.5
+      enhanced-resolve: 5.21.6
+      jiti: 2.7.0
+      lightningcss: 1.32.0
+      magic-string: 0.30.21
+      source-map-js: 1.2.1
+      tailwindcss: 4.3.2
+
+  '@tailwindcss/oxide-android-arm64@4.3.2':
+    optional: true
+
+  '@tailwindcss/oxide-darwin-arm64@4.3.2':
+    optional: true
+
+  '@tailwindcss/oxide-darwin-x64@4.3.2':
+    optional: true
+
+  '@tailwindcss/oxide-freebsd-x64@4.3.2':
+    optional: true
+
+  '@tailwindcss/oxide-linux-arm-gnueabihf@4.3.2':
+    optional: true
+
+  '@tailwindcss/oxide-linux-arm64-gnu@4.3.2':
+    optional: true
+
+  '@tailwindcss/oxide-linux-arm64-musl@4.3.2':
+    optional: true
+
+  '@tailwindcss/oxide-linux-x64-gnu@4.3.2':
+    optional: true
+
+  '@tailwindcss/oxide-linux-x64-musl@4.3.2':
+    optional: true
+
+  '@tailwindcss/oxide-wasm32-wasi@4.3.2':
+    optional: true
+
+  '@tailwindcss/oxide-win32-arm64-msvc@4.3.2':
+    optional: true
+
+  '@tailwindcss/oxide-win32-x64-msvc@4.3.2':
+    optional: true
+
+  '@tailwindcss/oxide@4.3.2':
+    optionalDependencies:
+      '@tailwindcss/oxide-android-arm64': 4.3.2
+      '@tailwindcss/oxide-darwin-arm64': 4.3.2
+      '@tailwindcss/oxide-darwin-x64': 4.3.2
+      '@tailwindcss/oxide-freebsd-x64': 4.3.2
+      '@tailwindcss/oxide-linux-arm-gnueabihf': 4.3.2
+      '@tailwindcss/oxide-linux-arm64-gnu': 4.3.2
+      '@tailwindcss/oxide-linux-arm64-musl': 4.3.2
+      '@tailwindcss/oxide-linux-x64-gnu': 4.3.2
+      '@tailwindcss/oxide-linux-x64-musl': 4.3.2
+      '@tailwindcss/oxide-wasm32-wasi': 4.3.2
+      '@tailwindcss/oxide-win32-arm64-msvc': 4.3.2
+      '@tailwindcss/oxide-win32-x64-msvc': 4.3.2
+
+  '@tailwindcss/typography@0.5.20(tailwindcss@4.3.2)':
+    dependencies:
+      postcss-selector-parser: 6.0.10
+      tailwindcss: 4.3.2
+
+  '@tailwindcss/vite@4.3.2(vite@8.1.3(@types/node@25.9.4)(jiti@2.7.0))':
+    dependencies:
+      '@tailwindcss/node': 4.3.2
+      '@tailwindcss/oxide': 4.3.2
+      tailwindcss: 4.3.2
+      vite: 8.1.3(@types/node@25.9.4)(jiti@2.7.0)
+
+  '@trivago/prettier-plugin-sort-imports@6.0.2(prettier@3.9.4)':
+    dependencies:
+      '@babel/generator': 7.29.7
+      '@babel/parser': 7.29.7
+      '@babel/traverse': 7.29.7
+      '@babel/types': 7.29.7
+      javascript-natural-sort: 0.7.1
+      lodash-es: 4.18.1
+      minimatch: 9.0.9
+      parse-imports-exports: 0.2.4
+      prettier: 3.9.4
+    transitivePeerDependencies:
+      - supports-color
+
+  '@tybys/wasm-util@0.10.3':
+    dependencies:
+      tslib: 2.8.1
+    optional: true
+
+  '@types/d3-array@3.2.2': {}
+
+  '@types/d3-color@3.1.3': {}
+
+  '@types/d3-ease@3.0.2': {}
+
+  '@types/d3-interpolate@3.0.4':
+    dependencies:
+      '@types/d3-color': 3.1.3
+
+  '@types/d3-path@3.1.1': {}
+
+  '@types/d3-scale@4.0.9':
+    dependencies:
+      '@types/d3-time': 3.0.4
+
+  '@types/d3-shape@3.1.8':
+    dependencies:
+      '@types/d3-path': 3.1.1
+
+  '@types/d3-time@3.0.4': {}
+
+  '@types/d3-timer@3.0.2': {}
+
+  '@types/debug@4.1.13':
+    dependencies:
+      '@types/ms': 2.1.0
+
+  '@types/esrecurse@4.3.1': {}
+
+  '@types/estree-jsx@1.0.5':
+    dependencies:
+      '@types/estree': 1.0.9
+
+  '@types/estree@1.0.9': {}
+
+  '@types/hast@3.0.4':
+    dependencies:
+      '@types/unist': 3.0.3
+
+  '@types/json-schema@7.0.15': {}
+
+  '@types/mdast@4.0.4':
+    dependencies:
+      '@types/unist': 3.0.3
+
+  '@types/ms@2.1.0': {}
+
+  '@types/node@25.9.4':
+    dependencies:
+      undici-types: 7.24.6
+
+  '@types/react-dom@19.2.3(@types/react@19.2.17)':
+    dependencies:
+      '@types/react': 19.2.17
+
+  '@types/react@19.2.17':
+    dependencies:
+      csstype: 3.2.3
+
+  '@types/unist@2.0.11': {}
+
+  '@types/unist@3.0.3': {}
+
+  '@types/use-sync-external-store@0.0.6': {}
+
+  '@typescript-eslint/eslint-plugin@8.62.1(@typescript-eslint/parser@8.62.1(eslint@10.6.0(jiti@2.7.0))(typescript@5.9.3))(eslint@10.6.0(jiti@2.7.0))(typescript@5.9.3)':
+    dependencies:
+      '@eslint-community/regexpp': 4.12.2
+      '@typescript-eslint/parser': 8.62.1(eslint@10.6.0(jiti@2.7.0))(typescript@5.9.3)
+      '@typescript-eslint/scope-manager': 8.62.1
+      '@typescript-eslint/type-utils': 8.62.1(eslint@10.6.0(jiti@2.7.0))(typescript@5.9.3)
+      '@typescript-eslint/utils': 8.62.1(eslint@10.6.0(jiti@2.7.0))(typescript@5.9.3)
+      '@typescript-eslint/visitor-keys': 8.62.1
+      eslint: 10.6.0(jiti@2.7.0)
+      ignore: 7.0.5
+      natural-compare: 1.4.0
+      ts-api-utils: 2.5.0(typescript@5.9.3)
+      typescript: 5.9.3
+    transitivePeerDependencies:
+      - supports-color
+
+  '@typescript-eslint/parser@8.62.1(eslint@10.6.0(jiti@2.7.0))(typescript@5.9.3)':
+    dependencies:
+      '@typescript-eslint/scope-manager': 8.62.1
+      '@typescript-eslint/types': 8.62.1
+      '@typescript-eslint/typescript-estree': 8.62.1(typescript@5.9.3)
+      '@typescript-eslint/visitor-keys': 8.62.1
+      debug: 4.4.3
+      eslint: 10.6.0(jiti@2.7.0)
+      typescript: 5.9.3
+    transitivePeerDependencies:
+      - supports-color
+
+  '@typescript-eslint/project-service@8.62.1(typescript@5.9.3)':
+    dependencies:
+      '@typescript-eslint/tsconfig-utils': 8.62.1(typescript@5.9.3)
+      '@typescript-eslint/types': 8.62.1
+      debug: 4.4.3
+      typescript: 5.9.3
+    transitivePeerDependencies:
+      - supports-color
+
+  '@typescript-eslint/scope-manager@8.62.1':
+    dependencies:
+      '@typescript-eslint/types': 8.62.1
+      '@typescript-eslint/visitor-keys': 8.62.1
+
+  '@typescript-eslint/tsconfig-utils@8.62.1(typescript@5.9.3)':
+    dependencies:
+      typescript: 5.9.3
+
+  '@typescript-eslint/type-utils@8.62.1(eslint@10.6.0(jiti@2.7.0))(typescript@5.9.3)':
+    dependencies:
+      '@typescript-eslint/types': 8.62.1
+      '@typescript-eslint/typescript-estree': 8.62.1(typescript@5.9.3)
+      '@typescript-eslint/utils': 8.62.1(eslint@10.6.0(jiti@2.7.0))(typescript@5.9.3)
+      debug: 4.4.3
+      eslint: 10.6.0(jiti@2.7.0)
+      ts-api-utils: 2.5.0(typescript@5.9.3)
+      typescript: 5.9.3
+    transitivePeerDependencies:
+      - supports-color
+
+  '@typescript-eslint/types@8.62.1': {}
+
+  '@typescript-eslint/typescript-estree@8.62.1(typescript@5.9.3)':
+    dependencies:
+      '@typescript-eslint/project-service': 8.62.1(typescript@5.9.3)
+      '@typescript-eslint/tsconfig-utils': 8.62.1(typescript@5.9.3)
+      '@typescript-eslint/types': 8.62.1
+      '@typescript-eslint/visitor-keys': 8.62.1
+      debug: 4.4.3
+      minimatch: 10.2.5
+      semver: 7.8.5
+      tinyglobby: 0.2.17
+      ts-api-utils: 2.5.0(typescript@5.9.3)
+      typescript: 5.9.3
+    transitivePeerDependencies:
+      - supports-color
+
+  '@typescript-eslint/utils@8.62.1(eslint@10.6.0(jiti@2.7.0))(typescript@5.9.3)':
+    dependencies:
+      '@eslint-community/eslint-utils': 4.9.1(eslint@10.6.0(jiti@2.7.0))
+      '@typescript-eslint/scope-manager': 8.62.1
+      '@typescript-eslint/types': 8.62.1
+      '@typescript-eslint/typescript-estree': 8.62.1(typescript@5.9.3)
+      eslint: 10.6.0(jiti@2.7.0)
+      typescript: 5.9.3
+    transitivePeerDependencies:
+      - supports-color
+
+  '@typescript-eslint/visitor-keys@8.62.1':
+    dependencies:
+      '@typescript-eslint/types': 8.62.1
+      eslint-visitor-keys: 5.0.1
+
+  '@uiw/codemirror-extensions-basic-setup@4.25.10(@codemirror/autocomplete@6.20.3)(@codemirror/commands@6.10.4)(@codemirror/language@6.12.4)(@codemirror/lint@6.9.7)(@codemirror/search@6.7.1)(@codemirror/state@6.7.0)(@codemirror/view@6.43.4)':
+    dependencies:
+      '@codemirror/autocomplete': 6.20.3
+      '@codemirror/commands': 6.10.4
+      '@codemirror/language': 6.12.4
+      '@codemirror/lint': 6.9.7
+      '@codemirror/search': 6.7.1
+      '@codemirror/state': 6.7.0
+      '@codemirror/view': 6.43.4
+
+  '@uiw/codemirror-theme-github@4.25.10(@codemirror/language@6.12.4)(@codemirror/state@6.7.0)(@codemirror/view@6.43.4)':
+    dependencies:
+      '@uiw/codemirror-themes': 4.25.10(@codemirror/language@6.12.4)(@codemirror/state@6.7.0)(@codemirror/view@6.43.4)
+    transitivePeerDependencies:
+      - '@codemirror/language'
+      - '@codemirror/state'
+      - '@codemirror/view'
+
+  '@uiw/codemirror-themes@4.25.10(@codemirror/language@6.12.4)(@codemirror/state@6.7.0)(@codemirror/view@6.43.4)':
+    dependencies:
+      '@codemirror/language': 6.12.4
+      '@codemirror/state': 6.7.0
+      '@codemirror/view': 6.43.4
+
+  '@uiw/react-codemirror@4.25.10(@babel/runtime@8.0.0)(@codemirror/autocomplete@6.20.3)(@codemirror/language@6.12.4)(@codemirror/lint@6.9.7)(@codemirror/search@6.7.1)(@codemirror/state@6.7.0)(@codemirror/theme-one-dark@6.1.3)(@codemirror/view@6.43.4)(codemirror@6.0.2)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)':
+    dependencies:
+      '@babel/runtime': 8.0.0
+      '@codemirror/commands': 6.10.4
+      '@codemirror/state': 6.7.0
+      '@codemirror/theme-one-dark': 6.1.3
+      '@codemirror/view': 6.43.4
+      '@uiw/codemirror-extensions-basic-setup': 4.25.10(@codemirror/autocomplete@6.20.3)(@codemirror/commands@6.10.4)(@codemirror/language@6.12.4)(@codemirror/lint@6.9.7)(@codemirror/search@6.7.1)(@codemirror/state@6.7.0)(@codemirror/view@6.43.4)
+      codemirror: 6.0.2
+      react: 19.2.7
+      react-dom: 19.2.7(react@19.2.7)
+    transitivePeerDependencies:
+      - '@codemirror/autocomplete'
+      - '@codemirror/language'
+      - '@codemirror/lint'
+      - '@codemirror/search'
+
+  '@ungap/structured-clone@1.3.2': {}
+
+  '@untitledui/file-icons@0.0.9(react@19.2.7)':
+    dependencies:
+      react: 19.2.7
+
+  '@untitledui/icons@0.0.22(react@19.2.7)':
+    dependencies:
+      react: 19.2.7
+
+  '@vitejs/plugin-react@6.0.3(vite@8.1.3(@types/node@25.9.4)(jiti@2.7.0))':
+    dependencies:
+      '@rolldown/pluginutils': 1.0.1
+      vite: 8.1.3(@types/node@25.9.4)(jiti@2.7.0)
+
+  acorn-jsx@5.3.2(acorn@8.17.0):
+    dependencies:
+      acorn: 8.17.0
+
+  acorn@8.17.0: {}
+
+  ajv@6.15.0:
+    dependencies:
+      fast-deep-equal: 3.1.3
+      fast-json-stable-stringify: 2.1.0
+      json-schema-traverse: 0.4.1
+      uri-js: 4.4.1
+
+  aria-hidden@1.2.6:
+    dependencies:
+      tslib: 2.8.1
+
+  bail@2.0.2: {}
+
+  balanced-match@1.0.2: {}
+
+  balanced-match@4.0.4: {}
+
+  brace-expansion@2.1.1:
+    dependencies:
+      balanced-match: 1.0.2
+
+  brace-expansion@5.0.7:
+    dependencies:
+      balanced-match: 4.0.4
+
+  ccount@2.0.1: {}
+
+  character-entities-html4@2.1.0: {}
+
+  character-entities-legacy@3.0.0: {}
+
+  character-entities@2.0.2: {}
+
+  character-reference-invalid@2.0.1: {}
+
+  client-only@0.0.1: {}
+
+  clsx@2.1.1: {}
+
+  codemirror@6.0.2:
+    dependencies:
+      '@codemirror/autocomplete': 6.20.3
+      '@codemirror/commands': 6.10.4
+      '@codemirror/language': 6.12.4
+      '@codemirror/lint': 6.9.7
+      '@codemirror/search': 6.7.1
+      '@codemirror/state': 6.7.0
+      '@codemirror/view': 6.43.4
+
+  comma-separated-tokens@2.0.3: {}
+
+  cookie@1.1.1: {}
+
+  crelt@1.0.7: {}
+
+  cross-spawn@7.0.6:
+    dependencies:
+      path-key: 3.1.1
+      shebang-command: 2.0.0
+      which: 2.0.2
+
+  cssesc@3.0.0: {}
+
+  csstype@3.2.3: {}
+
+  d3-array@3.2.4:
+    dependencies:
+      internmap: 2.0.3
+
+  d3-color@3.1.0: {}
+
+  d3-ease@3.0.1: {}
+
+  d3-format@3.1.2: {}
+
+  d3-interpolate@3.0.1:
+    dependencies:
+      d3-color: 3.1.0
+
+  d3-path@3.1.0: {}
+
+  d3-scale@4.0.2:
+    dependencies:
+      d3-array: 3.2.4
+      d3-format: 3.1.2
+      d3-interpolate: 3.0.1
+      d3-time: 3.1.0
+      d3-time-format: 4.1.0
+
+  d3-shape@3.2.0:
+    dependencies:
+      d3-path: 3.1.0
+
+  d3-time-format@4.1.0:
+    dependencies:
+      d3-time: 3.1.0
+
+  d3-time@3.1.0:
+    dependencies:
+      d3-array: 3.2.4
+
+  d3-timer@3.0.1: {}
+
+  debug@4.4.3:
+    dependencies:
+      ms: 2.1.3
+
+  decimal.js-light@2.5.1: {}
+
+  decode-named-character-reference@1.3.0:
+    dependencies:
+      character-entities: 2.0.2
+
+  deep-is@0.1.4: {}
+
+  dequal@2.0.3: {}
+
+  detect-libc@2.1.2: {}
+
+  devlop@1.1.0:
+    dependencies:
+      dequal: 2.0.3
+
+  embla-carousel-react@8.6.0(react@19.2.7):
+    dependencies:
+      embla-carousel: 8.6.0
+      embla-carousel-reactive-utils: 8.6.0(embla-carousel@8.6.0)
+      react: 19.2.7
+
+  embla-carousel-reactive-utils@8.6.0(embla-carousel@8.6.0):
+    dependencies:
+      embla-carousel: 8.6.0
+
+  embla-carousel@8.6.0: {}
+
+  enhanced-resolve@5.21.6:
+    dependencies:
+      graceful-fs: 4.2.11
+      tapable: 2.3.3
+
+  es-toolkit@1.49.0: {}
+
+  escape-string-regexp@4.0.0: {}
+
+  escape-string-regexp@5.0.0: {}
+
+  eslint-scope@9.1.2:
+    dependencies:
+      '@types/esrecurse': 4.3.1
+      '@types/estree': 1.0.9
+      esrecurse: 4.3.0
+      estraverse: 5.3.0
+
+  eslint-visitor-keys@3.4.3: {}
+
+  eslint-visitor-keys@5.0.1: {}
+
+  eslint@10.6.0(jiti@2.7.0):
+    dependencies:
+      '@eslint-community/eslint-utils': 4.9.1(eslint@10.6.0(jiti@2.7.0))
+      '@eslint-community/regexpp': 4.12.2
+      '@eslint/config-array': 0.23.5
+      '@eslint/config-helpers': 0.6.0
+      '@eslint/core': 1.2.1
+      '@eslint/plugin-kit': 0.7.2
+      '@humanfs/node': 0.16.8
+      '@humanwhocodes/module-importer': 1.0.1
+      '@humanwhocodes/retry': 0.4.3
+      '@types/estree': 1.0.9
+      ajv: 6.15.0
+      cross-spawn: 7.0.6
+      debug: 4.4.3
+      escape-string-regexp: 4.0.0
+      eslint-scope: 9.1.2
+      eslint-visitor-keys: 5.0.1
+      espree: 11.2.0
+      esquery: 1.7.0
+      esutils: 2.0.3
+      fast-deep-equal: 3.1.3
+      file-entry-cache: 8.0.0
+      find-up: 5.0.0
+      glob-parent: 6.0.2
+      ignore: 5.3.2
+      imurmurhash: 0.1.4
+      is-glob: 4.0.3
+      json-stable-stringify-without-jsonify: 1.0.1
+      minimatch: 10.2.5
+      natural-compare: 1.4.0
+      optionator: 0.9.4
+    optionalDependencies:
+      jiti: 2.7.0
+    transitivePeerDependencies:
+      - supports-color
+
+  espree@11.2.0:
+    dependencies:
+      acorn: 8.17.0
+      acorn-jsx: 5.3.2(acorn@8.17.0)
+      eslint-visitor-keys: 5.0.1
+
+  esquery@1.7.0:
+    dependencies:
+      estraverse: 5.3.0
+
+  esrecurse@4.3.0:
+    dependencies:
+      estraverse: 5.3.0
+
+  estraverse@5.3.0: {}
+
+  estree-util-is-identifier-name@3.0.0: {}
+
+  esutils@2.0.3: {}
+
+  eventemitter3@5.0.4: {}
+
+  extend@3.0.2: {}
+
+  fast-deep-equal@3.1.3: {}
+
+  fast-json-stable-stringify@2.1.0: {}
+
+  fast-levenshtein@2.0.6: {}
+
+  fdir@6.5.0(picomatch@4.0.4):
+    optionalDependencies:
+      picomatch: 4.0.4
+
+  file-entry-cache@8.0.0:
+    dependencies:
+      flat-cache: 4.0.1
+
+  find-up@5.0.0:
+    dependencies:
+      locate-path: 6.0.0
+      path-exists: 4.0.0
+
+  flat-cache@4.0.1:
+    dependencies:
+      flatted: 3.4.2
+      keyv: 4.5.4
+
+  flatted@3.4.2: {}
+
+  framer-motion@12.42.2(react-dom@19.2.7(react@19.2.7))(react@19.2.7):
+    dependencies:
+      motion-dom: 12.42.2
+      motion-utils: 12.39.0
+      tslib: 2.8.1
+    optionalDependencies:
+      react: 19.2.7
+      react-dom: 19.2.7(react@19.2.7)
+
+  fsevents@2.3.3:
+    optional: true
+
+  glob-parent@6.0.2:
+    dependencies:
+      is-glob: 4.0.3
+
+  globals@16.5.0: {}
+
+  graceful-fs@4.2.11: {}
+
+  hast-util-is-element@3.0.0:
+    dependencies:
+      '@types/hast': 3.0.4
+
+  hast-util-to-html@9.0.5:
+    dependencies:
+      '@types/hast': 3.0.4
+      '@types/unist': 3.0.3
+      ccount: 2.0.1
+      comma-separated-tokens: 2.0.3
+      hast-util-whitespace: 3.0.0
+      html-void-elements: 3.0.0
+      mdast-util-to-hast: 13.2.1
+      property-information: 7.2.0
+      space-separated-tokens: 2.0.2
+      stringify-entities: 4.0.4
+      zwitch: 2.0.4
+
+  hast-util-to-jsx-runtime@2.3.6:
+    dependencies:
+      '@types/estree': 1.0.9
+      '@types/hast': 3.0.4
+      '@types/unist': 3.0.3
+      comma-separated-tokens: 2.0.3
+      devlop: 1.1.0
+      estree-util-is-identifier-name: 3.0.0
+      hast-util-whitespace: 3.0.0
+      mdast-util-mdx-expression: 2.0.1
+      mdast-util-mdx-jsx: 3.2.0
+      mdast-util-mdxjs-esm: 2.0.1
+      property-information: 7.2.0
+      space-separated-tokens: 2.0.2
+      style-to-js: 1.1.21
+      unist-util-position: 5.0.0
+      vfile-message: 4.0.3
+    transitivePeerDependencies:
+      - supports-color
+
+  hast-util-to-text@4.0.2:
+    dependencies:
+      '@types/hast': 3.0.4
+      '@types/unist': 3.0.3
+      hast-util-is-element: 3.0.0
+      unist-util-find-after: 5.0.0
+
+  hast-util-whitespace@3.0.0:
+    dependencies:
+      '@types/hast': 3.0.4
+
+  highlight.js@11.11.1: {}
+
+  html-url-attributes@3.0.1: {}
+
+  html-void-elements@3.0.0: {}
+
+  ignore@5.3.2: {}
+
+  ignore@7.0.5: {}
+
+  immer@11.1.9: {}
+
+  imurmurhash@0.1.4: {}
+
+  inline-style-parser@0.2.7: {}
+
+  input-otp@1.4.2(react-dom@19.2.7(react@19.2.7))(react@19.2.7):
+    dependencies:
+      react: 19.2.7
+      react-dom: 19.2.7(react@19.2.7)
+
+  internmap@2.0.3: {}
+
+  is-alphabetical@2.0.1: {}
+
+  is-alphanumerical@2.0.1:
+    dependencies:
+      is-alphabetical: 2.0.1
+      is-decimal: 2.0.1
+
+  is-decimal@2.0.1: {}
+
+  is-extglob@2.1.1: {}
+
+  is-glob@4.0.3:
+    dependencies:
+      is-extglob: 2.1.1
+
+  is-hexadecimal@2.0.1: {}
+
+  is-plain-obj@4.1.0: {}
+
+  isexe@2.0.0: {}
+
+  javascript-natural-sort@0.7.1: {}
+
+  jiti@2.7.0: {}
+
+  js-tokens@4.0.0: {}
+
+  jsesc@3.1.0: {}
+
+  json-buffer@3.0.1: {}
+
+  json-schema-traverse@0.4.1: {}
+
+  json-stable-stringify-without-jsonify@1.0.1: {}
+
+  keyv@4.5.4:
+    dependencies:
+      json-buffer: 3.0.1
+
+  levn@0.4.1:
+    dependencies:
+      prelude-ls: 1.2.1
+      type-check: 0.4.0
+
+  lightningcss-android-arm64@1.32.0:
+    optional: true
+
+  lightningcss-darwin-arm64@1.32.0:
+    optional: true
+
+  lightningcss-darwin-x64@1.32.0:
+    optional: true
+
+  lightningcss-freebsd-x64@1.32.0:
+    optional: true
+
+  lightningcss-linux-arm-gnueabihf@1.32.0:
+    optional: true
+
+  lightningcss-linux-arm64-gnu@1.32.0:
+    optional: true
+
+  lightningcss-linux-arm64-musl@1.32.0:
+    optional: true
+
+  lightningcss-linux-x64-gnu@1.32.0:
+    optional: true
+
+  lightningcss-linux-x64-musl@1.32.0:
+    optional: true
+
+  lightningcss-win32-arm64-msvc@1.32.0:
+    optional: true
+
+  lightningcss-win32-x64-msvc@1.32.0:
+    optional: true
+
+  lightningcss@1.32.0:
+    dependencies:
+      detect-libc: 2.1.2
+    optionalDependencies:
+      lightningcss-android-arm64: 1.32.0
+      lightningcss-darwin-arm64: 1.32.0
+      lightningcss-darwin-x64: 1.32.0
+      lightningcss-freebsd-x64: 1.32.0
+      lightningcss-linux-arm-gnueabihf: 1.32.0
+      lightningcss-linux-arm64-gnu: 1.32.0
+      lightningcss-linux-arm64-musl: 1.32.0
+      lightningcss-linux-x64-gnu: 1.32.0
+      lightningcss-linux-x64-musl: 1.32.0
+      lightningcss-win32-arm64-msvc: 1.32.0
+      lightningcss-win32-x64-msvc: 1.32.0
+
+  locate-path@6.0.0:
+    dependencies:
+      p-locate: 5.0.0
+
+  lodash-es@4.18.1: {}
+
+  longest-streak@3.1.0: {}
+
+  lowlight@3.3.0:
+    dependencies:
+      '@types/hast': 3.0.4
+      devlop: 1.1.0
+      highlight.js: 11.11.1
+
+  magic-string@0.30.21:
+    dependencies:
+      '@jridgewell/sourcemap-codec': 1.5.5
+
+  markdown-table@3.0.4: {}
+
+  mdast-util-find-and-replace@3.0.2:
+    dependencies:
+      '@types/mdast': 4.0.4
+      escape-string-regexp: 5.0.0
+      unist-util-is: 6.0.1
+      unist-util-visit-parents: 6.0.2
+
+  mdast-util-from-markdown@2.0.3:
+    dependencies:
+      '@types/mdast': 4.0.4
+      '@types/unist': 3.0.3
+      decode-named-character-reference: 1.3.0
+      devlop: 1.1.0
+      mdast-util-to-string: 4.0.0
+      micromark: 4.0.2
+      micromark-util-decode-numeric-character-reference: 2.0.2
+      micromark-util-decode-string: 2.0.1
+      micromark-util-normalize-identifier: 2.0.1
+      micromark-util-symbol: 2.0.1
+      micromark-util-types: 2.0.2
+      unist-util-stringify-position: 4.0.0
+    transitivePeerDependencies:
+      - supports-color
+
+  mdast-util-gfm-autolink-literal@2.0.1:
+    dependencies:
+      '@types/mdast': 4.0.4
+      ccount: 2.0.1
+      devlop: 1.1.0
+      mdast-util-find-and-replace: 3.0.2
+      micromark-util-character: 2.1.1
+
+  mdast-util-gfm-footnote@2.1.0:
+    dependencies:
+      '@types/mdast': 4.0.4
+      devlop: 1.1.0
+      mdast-util-from-markdown: 2.0.3
+      mdast-util-to-markdown: 2.1.2
+      micromark-util-normalize-identifier: 2.0.1
+    transitivePeerDependencies:
+      - supports-color
+
+  mdast-util-gfm-strikethrough@2.0.0:
+    dependencies:
+      '@types/mdast': 4.0.4
+      mdast-util-from-markdown: 2.0.3
+      mdast-util-to-markdown: 2.1.2
+    transitivePeerDependencies:
+      - supports-color
+
+  mdast-util-gfm-table@2.0.0:
+    dependencies:
+      '@types/mdast': 4.0.4
+      devlop: 1.1.0
+      markdown-table: 3.0.4
+      mdast-util-from-markdown: 2.0.3
+      mdast-util-to-markdown: 2.1.2
+    transitivePeerDependencies:
+      - supports-color
+
+  mdast-util-gfm-task-list-item@2.0.0:
+    dependencies:
+      '@types/mdast': 4.0.4
+      devlop: 1.1.0
+      mdast-util-from-markdown: 2.0.3
+      mdast-util-to-markdown: 2.1.2
+    transitivePeerDependencies:
+      - supports-color
+
+  mdast-util-gfm@3.1.0:
+    dependencies:
+      mdast-util-from-markdown: 2.0.3
+      mdast-util-gfm-autolink-literal: 2.0.1
+      mdast-util-gfm-footnote: 2.1.0
+      mdast-util-gfm-strikethrough: 2.0.0
+      mdast-util-gfm-table: 2.0.0
+      mdast-util-gfm-task-list-item: 2.0.0
+      mdast-util-to-markdown: 2.1.2
+    transitivePeerDependencies:
+      - supports-color
+
+  mdast-util-mdx-expression@2.0.1:
+    dependencies:
+      '@types/estree-jsx': 1.0.5
+      '@types/hast': 3.0.4
+      '@types/mdast': 4.0.4
+      devlop: 1.1.0
+      mdast-util-from-markdown: 2.0.3
+      mdast-util-to-markdown: 2.1.2
+    transitivePeerDependencies:
+      - supports-color
+
+  mdast-util-mdx-jsx@3.2.0:
+    dependencies:
+      '@types/estree-jsx': 1.0.5
+      '@types/hast': 3.0.4
+      '@types/mdast': 4.0.4
+      '@types/unist': 3.0.3
+      ccount: 2.0.1
+      devlop: 1.1.0
+      mdast-util-from-markdown: 2.0.3
+      mdast-util-to-markdown: 2.1.2
+      parse-entities: 4.0.2
+      stringify-entities: 4.0.4
+      unist-util-stringify-position: 4.0.0
+      vfile-message: 4.0.3
+    transitivePeerDependencies:
+      - supports-color
+
+  mdast-util-mdxjs-esm@2.0.1:
+    dependencies:
+      '@types/estree-jsx': 1.0.5
+      '@types/hast': 3.0.4
+      '@types/mdast': 4.0.4
+      devlop: 1.1.0
+      mdast-util-from-markdown: 2.0.3
+      mdast-util-to-markdown: 2.1.2
+    transitivePeerDependencies:
+      - supports-color
+
+  mdast-util-phrasing@4.1.0:
+    dependencies:
+      '@types/mdast': 4.0.4
+      unist-util-is: 6.0.1
+
+  mdast-util-to-hast@13.2.1:
+    dependencies:
+      '@types/hast': 3.0.4
+      '@types/mdast': 4.0.4
+      '@ungap/structured-clone': 1.3.2
+      devlop: 1.1.0
+      micromark-util-sanitize-uri: 2.0.1
+      trim-lines: 3.0.1
+      unist-util-position: 5.0.0
+      unist-util-visit: 5.1.0
+      vfile: 6.0.3
+
+  mdast-util-to-markdown@2.1.2:
+    dependencies:
+      '@types/mdast': 4.0.4
+      '@types/unist': 3.0.3
+      longest-streak: 3.1.0
+      mdast-util-phrasing: 4.1.0
+      mdast-util-to-string: 4.0.0
+      micromark-util-classify-character: 2.0.1
+      micromark-util-decode-string: 2.0.1
+      unist-util-visit: 5.1.0
+      zwitch: 2.0.4
+
+  mdast-util-to-string@4.0.0:
+    dependencies:
+      '@types/mdast': 4.0.4
+
+  micromark-core-commonmark@2.0.3:
+    dependencies:
+      decode-named-character-reference: 1.3.0
+      devlop: 1.1.0
+      micromark-factory-destination: 2.0.1
+      micromark-factory-label: 2.0.1
+      micromark-factory-space: 2.0.1
+      micromark-factory-title: 2.0.1
+      micromark-factory-whitespace: 2.0.1
+      micromark-util-character: 2.1.1
+      micromark-util-chunked: 2.0.1
+      micromark-util-classify-character: 2.0.1
+      micromark-util-html-tag-name: 2.0.1
+      micromark-util-normalize-identifier: 2.0.1
+      micromark-util-resolve-all: 2.0.1
+      micromark-util-subtokenize: 2.1.0
+      micromark-util-symbol: 2.0.1
+      micromark-util-types: 2.0.2
+
+  micromark-extension-gfm-autolink-literal@2.1.0:
+    dependencies:
+      micromark-util-character: 2.1.1
+      micromark-util-sanitize-uri: 2.0.1
+      micromark-util-symbol: 2.0.1
+      micromark-util-types: 2.0.2
+
+  micromark-extension-gfm-footnote@2.1.0:
+    dependencies:
+      devlop: 1.1.0
+      micromark-core-commonmark: 2.0.3
+      micromark-factory-space: 2.0.1
+      micromark-util-character: 2.1.1
+      micromark-util-normalize-identifier: 2.0.1
+      micromark-util-sanitize-uri: 2.0.1
+      micromark-util-symbol: 2.0.1
+      micromark-util-types: 2.0.2
+
+  micromark-extension-gfm-strikethrough@2.1.0:
+    dependencies:
+      devlop: 1.1.0
+      micromark-util-chunked: 2.0.1
+      micromark-util-classify-character: 2.0.1
+      micromark-util-resolve-all: 2.0.1
+      micromark-util-symbol: 2.0.1
+      micromark-util-types: 2.0.2
+
+  micromark-extension-gfm-table@2.1.1:
+    dependencies:
+      devlop: 1.1.0
+      micromark-factory-space: 2.0.1
+      micromark-util-character: 2.1.1
+      micromark-util-symbol: 2.0.1
+      micromark-util-types: 2.0.2
+
+  micromark-extension-gfm-tagfilter@2.0.0:
+    dependencies:
+      micromark-util-types: 2.0.2
+
+  micromark-extension-gfm-task-list-item@2.1.0:
+    dependencies:
+      devlop: 1.1.0
+      micromark-factory-space: 2.0.1
+      micromark-util-character: 2.1.1
+      micromark-util-symbol: 2.0.1
+      micromark-util-types: 2.0.2
+
+  micromark-extension-gfm@3.0.0:
+    dependencies:
+      micromark-extension-gfm-autolink-literal: 2.1.0
+      micromark-extension-gfm-footnote: 2.1.0
+      micromark-extension-gfm-strikethrough: 2.1.0
+      micromark-extension-gfm-table: 2.1.1
+      micromark-extension-gfm-tagfilter: 2.0.0
+      micromark-extension-gfm-task-list-item: 2.1.0
+      micromark-util-combine-extensions: 2.0.1
+      micromark-util-types: 2.0.2
+
+  micromark-factory-destination@2.0.1:
+    dependencies:
+      micromark-util-character: 2.1.1
+      micromark-util-symbol: 2.0.1
+      micromark-util-types: 2.0.2
+
+  micromark-factory-label@2.0.1:
+    dependencies:
+      devlop: 1.1.0
+      micromark-util-character: 2.1.1
+      micromark-util-symbol: 2.0.1
+      micromark-util-types: 2.0.2
+
+  micromark-factory-space@2.0.1:
+    dependencies:
+      micromark-util-character: 2.1.1
+      micromark-util-types: 2.0.2
+
+  micromark-factory-title@2.0.1:
+    dependencies:
+      micromark-factory-space: 2.0.1
+      micromark-util-character: 2.1.1
+      micromark-util-symbol: 2.0.1
+      micromark-util-types: 2.0.2
+
+  micromark-factory-whitespace@2.0.1:
+    dependencies:
+      micromark-factory-space: 2.0.1
+      micromark-util-character: 2.1.1
+      micromark-util-symbol: 2.0.1
+      micromark-util-types: 2.0.2
+
+  micromark-util-character@2.1.1:
+    dependencies:
+      micromark-util-symbol: 2.0.1
+      micromark-util-types: 2.0.2
+
+  micromark-util-chunked@2.0.1:
+    dependencies:
+      micromark-util-symbol: 2.0.1
+
+  micromark-util-classify-character@2.0.1:
+    dependencies:
+      micromark-util-character: 2.1.1
+      micromark-util-symbol: 2.0.1
+      micromark-util-types: 2.0.2
+
+  micromark-util-combine-extensions@2.0.1:
+    dependencies:
+      micromark-util-chunked: 2.0.1
+      micromark-util-types: 2.0.2
+
+  micromark-util-decode-numeric-character-reference@2.0.2:
+    dependencies:
+      micromark-util-symbol: 2.0.1
+
+  micromark-util-decode-string@2.0.1:
+    dependencies:
+      decode-named-character-reference: 1.3.0
+      micromark-util-character: 2.1.1
+      micromark-util-decode-numeric-character-reference: 2.0.2
+      micromark-util-symbol: 2.0.1
+
+  micromark-util-encode@2.0.1: {}
+
+  micromark-util-html-tag-name@2.0.1: {}
+
+  micromark-util-normalize-identifier@2.0.1:
+    dependencies:
+      micromark-util-symbol: 2.0.1
+
+  micromark-util-resolve-all@2.0.1:
+    dependencies:
+      micromark-util-types: 2.0.2
+
+  micromark-util-sanitize-uri@2.0.1:
+    dependencies:
+      micromark-util-character: 2.1.1
+      micromark-util-encode: 2.0.1
+      micromark-util-symbol: 2.0.1
+
+  micromark-util-subtokenize@2.1.0:
+    dependencies:
+      devlop: 1.1.0
+      micromark-util-chunked: 2.0.1
+      micromark-util-symbol: 2.0.1
+      micromark-util-types: 2.0.2
+
+  micromark-util-symbol@2.0.1: {}
+
+  micromark-util-types@2.0.2: {}
+
+  micromark@4.0.2:
+    dependencies:
+      '@types/debug': 4.1.13
+      debug: 4.4.3
+      decode-named-character-reference: 1.3.0
+      devlop: 1.1.0
+      micromark-core-commonmark: 2.0.3
+      micromark-factory-space: 2.0.1
+      micromark-util-character: 2.1.1
+      micromark-util-chunked: 2.0.1
+      micromark-util-combine-extensions: 2.0.1
+      micromark-util-decode-numeric-character-reference: 2.0.2
+      micromark-util-encode: 2.0.1
+      micromark-util-normalize-identifier: 2.0.1
+      micromark-util-resolve-all: 2.0.1
+      micromark-util-sanitize-uri: 2.0.1
+      micromark-util-subtokenize: 2.1.0
+      micromark-util-symbol: 2.0.1
+      micromark-util-types: 2.0.2
+    transitivePeerDependencies:
+      - supports-color
+
+  minimatch@10.2.5:
+    dependencies:
+      brace-expansion: 5.0.7
+
+  minimatch@9.0.9:
+    dependencies:
+      brace-expansion: 2.1.1
+
+  motion-dom@12.42.2:
+    dependencies:
+      motion-utils: 12.39.0
+
+  motion-utils@12.39.0: {}
+
+  motion@12.42.2(react-dom@19.2.7(react@19.2.7))(react@19.2.7):
+    dependencies:
+      framer-motion: 12.42.2(react-dom@19.2.7(react@19.2.7))(react@19.2.7)
+      tslib: 2.8.1
+    optionalDependencies:
+      react: 19.2.7
+      react-dom: 19.2.7(react@19.2.7)
+
+  ms@2.1.3: {}
+
+  nanoid@3.3.15: {}
+
+  natural-compare@1.4.0: {}
+
+  optionator@0.9.4:
+    dependencies:
+      deep-is: 0.1.4
+      fast-levenshtein: 2.0.6
+      levn: 0.4.1
+      prelude-ls: 1.2.1
+      type-check: 0.4.0
+      word-wrap: 1.2.5
+
+  p-limit@3.1.0:
+    dependencies:
+      yocto-queue: 0.1.0
+
+  p-locate@5.0.0:
+    dependencies:
+      p-limit: 3.1.0
+
+  parse-entities@4.0.2:
+    dependencies:
+      '@types/unist': 2.0.11
+      character-entities-legacy: 3.0.0
+      character-reference-invalid: 2.0.1
+      decode-named-character-reference: 1.3.0
+      is-alphanumerical: 2.0.1
+      is-decimal: 2.0.1
+      is-hexadecimal: 2.0.1
+
+  parse-imports-exports@0.2.4:
+    dependencies:
+      parse-statements: 1.0.11
+
+  parse-statements@1.0.11: {}
+
+  path-exists@4.0.0: {}
+
+  path-key@3.1.1: {}
+
+  picocolors@1.1.1: {}
+
+  picomatch@4.0.4: {}
+
+  postcss-selector-parser@6.0.10:
+    dependencies:
+      cssesc: 3.0.0
+      util-deprecate: 1.0.2
+
+  postcss@8.5.16:
+    dependencies:
+      nanoid: 3.3.15
+      picocolors: 1.1.1
+      source-map-js: 1.2.1
+
+  prelude-ls@1.2.1: {}
+
+  prettier-plugin-tailwindcss@0.7.4(@trivago/prettier-plugin-sort-imports@6.0.2(prettier@3.9.4))(prettier@3.9.4):
+    dependencies:
+      prettier: 3.9.4
+    optionalDependencies:
+      '@trivago/prettier-plugin-sort-imports': 6.0.2(prettier@3.9.4)
+
+  prettier@3.9.4: {}
+
+  property-information@7.2.0: {}
+
+  punycode@2.3.1: {}
+
+  qr-code-styling@1.9.2:
+    dependencies:
+      qrcode-generator: 1.5.2
+
+  qrcode-generator@1.5.2: {}
+
+  react-aria-components@1.19.0(react-dom@19.2.7(react@19.2.7))(react@19.2.7):
+    dependencies:
+      '@internationalized/date': 3.12.2
+      '@react-types/shared': 3.36.0(react@19.2.7)
+      '@swc/helpers': 0.5.23
+      client-only: 0.0.1
+      react: 19.2.7
+      react-aria: 3.50.0(react-dom@19.2.7(react@19.2.7))(react@19.2.7)
+      react-dom: 19.2.7(react@19.2.7)
+      react-stately: 3.48.0(react@19.2.7)
+
+  react-aria@3.50.0(react-dom@19.2.7(react@19.2.7))(react@19.2.7):
+    dependencies:
+      '@internationalized/date': 3.12.2
+      '@internationalized/number': 3.6.7
+      '@internationalized/string': 3.2.9
+      '@react-types/shared': 3.36.0(react@19.2.7)
+      '@swc/helpers': 0.5.23
+      aria-hidden: 1.2.6
+      clsx: 2.1.1
+      react: 19.2.7
+      react-dom: 19.2.7(react@19.2.7)
+      react-stately: 3.48.0(react@19.2.7)
+      use-sync-external-store: 1.6.0(react@19.2.7)
+
+  react-dom@19.2.7(react@19.2.7):
+    dependencies:
+      react: 19.2.7
+      scheduler: 0.27.0
+
+  react-hotkeys-hook@5.3.3(react-dom@19.2.7(react@19.2.7))(react@19.2.7):
+    dependencies:
+      react: 19.2.7
+      react-dom: 19.2.7(react@19.2.7)
+
+  react-is@19.2.7: {}
+
+  react-markdown@10.1.0(@types/react@19.2.17)(react@19.2.7):
+    dependencies:
+      '@types/hast': 3.0.4
+      '@types/mdast': 4.0.4
+      '@types/react': 19.2.17
+      devlop: 1.1.0
+      hast-util-to-jsx-runtime: 2.3.6
+      html-url-attributes: 3.0.1
+      mdast-util-to-hast: 13.2.1
+      react: 19.2.7
+      remark-parse: 11.0.0
+      remark-rehype: 11.1.2
+      unified: 11.0.5
+      unist-util-visit: 5.1.0
+      vfile: 6.0.3
+    transitivePeerDependencies:
+      - supports-color
+
+  react-redux@9.3.0(@types/react@19.2.17)(react@19.2.7)(redux@5.0.1):
+    dependencies:
+      '@types/use-sync-external-store': 0.0.6
+      react: 19.2.7
+      use-sync-external-store: 1.6.0(react@19.2.7)
+    optionalDependencies:
+      '@types/react': 19.2.17
+      redux: 5.0.1
+
+  react-router@7.18.1(react-dom@19.2.7(react@19.2.7))(react@19.2.7):
+    dependencies:
+      cookie: 1.1.1
+      react: 19.2.7
+      set-cookie-parser: 2.7.2
+    optionalDependencies:
+      react-dom: 19.2.7(react@19.2.7)
+
+  react-stately@3.48.0(react@19.2.7):
+    dependencies:
+      '@internationalized/date': 3.12.2
+      '@internationalized/number': 3.6.7
+      '@internationalized/string': 3.2.9
+      '@react-types/shared': 3.36.0(react@19.2.7)
+      '@swc/helpers': 0.5.23
+      react: 19.2.7
+      use-sync-external-store: 1.6.0(react@19.2.7)
+
+  react@19.2.7: {}
+
+  recharts@3.9.1(@types/react@19.2.17)(react-dom@19.2.7(react@19.2.7))(react-is@19.2.7)(react@19.2.7)(redux@5.0.1):
+    dependencies:
+      '@reduxjs/toolkit': 2.12.0(react-redux@9.3.0(@types/react@19.2.17)(react@19.2.7)(redux@5.0.1))(react@19.2.7)
+      clsx: 2.1.1
+      decimal.js-light: 2.5.1
+      es-toolkit: 1.49.0
+      eventemitter3: 5.0.4
+      immer: 11.1.9
+      react: 19.2.7
+      react-dom: 19.2.7(react@19.2.7)
+      react-is: 19.2.7
+      react-redux: 9.3.0(@types/react@19.2.17)(react@19.2.7)(redux@5.0.1)
+      reselect: 5.2.0
+      tiny-invariant: 1.3.3
+      use-sync-external-store: 1.6.0(react@19.2.7)
+      victory-vendor: 37.3.6
+    transitivePeerDependencies:
+      - '@types/react'
+      - redux
+
+  redux-thunk@3.1.0(redux@5.0.1):
+    dependencies:
+      redux: 5.0.1
+
+  redux@5.0.1: {}
+
+  rehype-highlight@7.0.2:
+    dependencies:
+      '@types/hast': 3.0.4
+      hast-util-to-text: 4.0.2
+      lowlight: 3.3.0
+      unist-util-visit: 5.1.0
+      vfile: 6.0.3
+
+  rehype-stringify@10.0.1:
+    dependencies:
+      '@types/hast': 3.0.4
+      hast-util-to-html: 9.0.5
+      unified: 11.0.5
+
+  remark-gfm@4.0.1:
+    dependencies:
+      '@types/mdast': 4.0.4
+      mdast-util-gfm: 3.1.0
+      micromark-extension-gfm: 3.0.0
+      remark-parse: 11.0.0
+      remark-stringify: 11.0.0
+      unified: 11.0.5
+    transitivePeerDependencies:
+      - supports-color
+
+  remark-parse@11.0.0:
+    dependencies:
+      '@types/mdast': 4.0.4
+      mdast-util-from-markdown: 2.0.3
+      micromark-util-types: 2.0.2
+      unified: 11.0.5
+    transitivePeerDependencies:
+      - supports-color
+
+  remark-rehype@11.1.2:
+    dependencies:
+      '@types/hast': 3.0.4
+      '@types/mdast': 4.0.4
+      mdast-util-to-hast: 13.2.1
+      unified: 11.0.5
+      vfile: 6.0.3
+
+  remark-stringify@11.0.0:
+    dependencies:
+      '@types/mdast': 4.0.4
+      mdast-util-to-markdown: 2.1.2
+      unified: 11.0.5
+
+  reselect@5.2.0: {}
+
+  rolldown@1.1.4:
+    dependencies:
+      '@oxc-project/types': 0.138.0
+      '@rolldown/pluginutils': 1.0.1
+    optionalDependencies:
+      '@rolldown/binding-android-arm64': 1.1.4
+      '@rolldown/binding-darwin-arm64': 1.1.4
+      '@rolldown/binding-darwin-x64': 1.1.4
+      '@rolldown/binding-freebsd-x64': 1.1.4
+      '@rolldown/binding-linux-arm-gnueabihf': 1.1.4
+      '@rolldown/binding-linux-arm64-gnu': 1.1.4
+      '@rolldown/binding-linux-arm64-musl': 1.1.4
+      '@rolldown/binding-linux-ppc64-gnu': 1.1.4
+      '@rolldown/binding-linux-s390x-gnu': 1.1.4
+      '@rolldown/binding-linux-x64-gnu': 1.1.4
+      '@rolldown/binding-linux-x64-musl': 1.1.4
+      '@rolldown/binding-openharmony-arm64': 1.1.4
+      '@rolldown/binding-wasm32-wasi': 1.1.4
+      '@rolldown/binding-win32-arm64-msvc': 1.1.4
+      '@rolldown/binding-win32-x64-msvc': 1.1.4
+
+  scheduler@0.27.0: {}
+
+  semver@7.8.5: {}
+
+  set-cookie-parser@2.7.2: {}
+
+  shebang-command@2.0.0:
+    dependencies:
+      shebang-regex: 3.0.0
+
+  shebang-regex@3.0.0: {}
+
+  source-map-js@1.2.1: {}
+
+  space-separated-tokens@2.0.2: {}
+
+  stringify-entities@4.0.4:
+    dependencies:
+      character-entities-html4: 2.1.0
+      character-entities-legacy: 3.0.0
+
+  style-mod@4.1.3: {}
+
+  style-to-js@1.1.21:
+    dependencies:
+      style-to-object: 1.0.14
+
+  style-to-object@1.0.14:
+    dependencies:
+      inline-style-parser: 0.2.7
+
+  tailwind-merge@3.6.0: {}
+
+  tailwindcss-animate@1.0.7(tailwindcss@4.3.2):
+    dependencies:
+      tailwindcss: 4.3.2
+
+  tailwindcss-react-aria-components@2.2.0(tailwindcss@4.3.2):
+    dependencies:
+      tailwindcss: 4.3.2
+
+  tailwindcss@4.3.2: {}
+
+  tapable@2.3.3: {}
+
+  tiny-invariant@1.3.3: {}
+
+  tinyglobby@0.2.17:
+    dependencies:
+      fdir: 6.5.0(picomatch@4.0.4)
+      picomatch: 4.0.4
+
+  trim-lines@3.0.1: {}
+
+  trough@2.2.0: {}
+
+  ts-api-utils@2.5.0(typescript@5.9.3):
+    dependencies:
+      typescript: 5.9.3
+
+  tslib@2.8.1: {}
+
+  type-check@0.4.0:
+    dependencies:
+      prelude-ls: 1.2.1
+
+  typescript-eslint@8.62.1(eslint@10.6.0(jiti@2.7.0))(typescript@5.9.3):
+    dependencies:
+      '@typescript-eslint/eslint-plugin': 8.62.1(@typescript-eslint/parser@8.62.1(eslint@10.6.0(jiti@2.7.0))(typescript@5.9.3))(eslint@10.6.0(jiti@2.7.0))(typescript@5.9.3)
+      '@typescript-eslint/parser': 8.62.1(eslint@10.6.0(jiti@2.7.0))(typescript@5.9.3)
+      '@typescript-eslint/typescript-estree': 8.62.1(typescript@5.9.3)
+      '@typescript-eslint/utils': 8.62.1(eslint@10.6.0(jiti@2.7.0))(typescript@5.9.3)
+      eslint: 10.6.0(jiti@2.7.0)
+      typescript: 5.9.3
+    transitivePeerDependencies:
+      - supports-color
+
+  typescript@5.9.3: {}
+
+  undici-types@7.24.6: {}
+
+  unified@11.0.5:
+    dependencies:
+      '@types/unist': 3.0.3
+      bail: 2.0.2
+      devlop: 1.1.0
+      extend: 3.0.2
+      is-plain-obj: 4.1.0
+      trough: 2.2.0
+      vfile: 6.0.3
+
+  unist-util-find-after@5.0.0:
+    dependencies:
+      '@types/unist': 3.0.3
+      unist-util-is: 6.0.1
+
+  unist-util-is@6.0.1:
+    dependencies:
+      '@types/unist': 3.0.3
+
+  unist-util-position@5.0.0:
+    dependencies:
+      '@types/unist': 3.0.3
+
+  unist-util-stringify-position@4.0.0:
+    dependencies:
+      '@types/unist': 3.0.3
+
+  unist-util-visit-parents@6.0.2:
+    dependencies:
+      '@types/unist': 3.0.3
+      unist-util-is: 6.0.1
+
+  unist-util-visit@5.1.0:
+    dependencies:
+      '@types/unist': 3.0.3
+      unist-util-is: 6.0.1
+      unist-util-visit-parents: 6.0.2
+
+  uri-js@4.4.1:
+    dependencies:
+      punycode: 2.3.1
+
+  use-sync-external-store@1.6.0(react@19.2.7):
+    dependencies:
+      react: 19.2.7
+
+  util-deprecate@1.0.2: {}
+
+  vfile-message@4.0.3:
+    dependencies:
+      '@types/unist': 3.0.3
+      unist-util-stringify-position: 4.0.0
+
+  vfile@6.0.3:
+    dependencies:
+      '@types/unist': 3.0.3
+      vfile-message: 4.0.3
+
+  victory-vendor@37.3.6:
+    dependencies:
+      '@types/d3-array': 3.2.2
+      '@types/d3-ease': 3.0.2
+      '@types/d3-interpolate': 3.0.4
+      '@types/d3-scale': 4.0.9
+      '@types/d3-shape': 3.1.8
+      '@types/d3-time': 3.0.4
+      '@types/d3-timer': 3.0.2
+      d3-array: 3.2.4
+      d3-ease: 3.0.1
+      d3-interpolate: 3.0.1
+      d3-scale: 4.0.2
+      d3-shape: 3.2.0
+      d3-time: 3.1.0
+      d3-timer: 3.0.1
+
+  vite@8.1.3(@types/node@25.9.4)(jiti@2.7.0):
+    dependencies:
+      lightningcss: 1.32.0
+      picomatch: 4.0.4
+      postcss: 8.5.16
+      rolldown: 1.1.4
+      tinyglobby: 0.2.17
+    optionalDependencies:
+      '@types/node': 25.9.4
+      fsevents: 2.3.3
+      jiti: 2.7.0
+
+  w3c-keyname@2.2.8: {}
+
+  which@2.0.2:
+    dependencies:
+      isexe: 2.0.0
+
+  word-wrap@1.2.5: {}
+
+  yocto-queue@0.1.0: {}
+
+  zwitch@2.0.4: {}
diff --git a/public/apple-touch-icon.png b/public/apple-touch-icon.png
new file mode 100644
index 0000000..8567b5d
Binary files /dev/null and b/public/apple-touch-icon.png differ
diff --git a/public/favicon.svg b/public/favicon.svg
new file mode 100644
index 0000000..b3c1fac
--- /dev/null
+++ b/public/favicon.svg
@@ -0,0 +1,10 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64">
+  <defs>
+    <linearGradient id="g" x1="0" y1="0" x2="1" y2="1">
+      <stop offset="0" stop-color="#9e77ed"/>
+      <stop offset="1" stop-color="#6941c6"/>
+    </linearGradient>
+  </defs>
+  <rect width="64" height="64" rx="14" fill="url(#g)"/>
+  <text x="32" y="42" font-family="-apple-system, 'Segoe UI', Helvetica, Arial, sans-serif" font-size="28" font-weight="700" fill="#ffffff" text-anchor="middle">M↓</text>
+</svg>
diff --git a/public/icon-512.png b/public/icon-512.png
new file mode 100644
index 0000000..3debe65
Binary files /dev/null and b/public/icon-512.png differ
diff --git a/public/og-image.png b/public/og-image.png
new file mode 100644
index 0000000..f35a9c1
Binary files /dev/null and b/public/og-image.png differ
diff --git a/public/robots.txt b/public/robots.txt
new file mode 100644
index 0000000..c2a49f4
--- /dev/null
+++ b/public/robots.txt
@@ -0,0 +1,2 @@
+User-agent: *
+Allow: /
diff --git a/public/site.webmanifest b/public/site.webmanifest
new file mode 100644
index 0000000..2e377df
--- /dev/null
+++ b/public/site.webmanifest
@@ -0,0 +1,14 @@
+{
+    "name": "Markdown Studio — Online Markdown Editor with Live Preview",
+    "short_name": "Markdown Studio",
+    "description": "Free online markdown editor with live preview. Upload .md files, edit side by side, and export to PDF, HTML, or Markdown. No sign-up, works offline.",
+    "start_url": "/",
+    "display": "standalone",
+    "background_color": "#ffffff",
+    "theme_color": "#7f56d9",
+    "icons": [
+        { "src": "/favicon.svg", "sizes": "any", "type": "image/svg+xml" },
+        { "src": "/icon-512.png", "sizes": "512x512", "type": "image/png" },
+        { "src": "/apple-touch-icon.png", "sizes": "180x180", "type": "image/png" }
+    ]
+}
diff --git a/src/components/application/carousel/carousel-base.tsx b/src/components/application/carousel/carousel-base.tsx
new file mode 100644
index 0000000..216d6bd
--- /dev/null
+++ b/src/components/application/carousel/carousel-base.tsx
@@ -0,0 +1,306 @@
+import type { CSSProperties, ComponentPropsWithRef, HTMLAttributes, KeyboardEvent, ReactNode, Ref } from "react";
+import { cloneElement, createContext, isValidElement, useCallback, useContext, useEffect, useState } from "react";
+import useEmblaCarousel, { type UseEmblaCarouselType } from "embla-carousel-react";
+import { cx } from "@/utils/cx";
+
+type CarouselApi = UseEmblaCarouselType[1];
+type UseCarouselParameters = Parameters<typeof useEmblaCarousel>;
+type CarouselOptions = UseCarouselParameters[0];
+type CarouselPlugin = UseCarouselParameters[1];
+
+type CarouselProps = {
+    /** The options for the Embla carousel. */
+    opts?: CarouselOptions;
+    /** The plugins for the Embla carousel. */
+    plugins?: CarouselPlugin;
+    /** The orientation of the carousel. */
+    orientation?: "horizontal" | "vertical";
+    /** The function to set the API for the carousel. */
+    setApi?: (api: CarouselApi) => void;
+};
+
+type CarouselContextProps = CarouselProps & {
+    /** The ref of the carousel. */
+    carouselRef: ReturnType<typeof useEmblaCarousel>[0];
+    /** The API of the carousel. */
+    api: ReturnType<typeof useEmblaCarousel>[1];
+    /** The function to scroll the carousel to the previous slide. */
+    scrollPrev: () => void;
+    /** The function to scroll the carousel to the next slide. */
+    scrollNext: () => void;
+    /** Whether the carousel can scroll to the previous slide. */
+    canScrollPrev: boolean;
+    /** Whether the carousel can scroll to the next slide. */
+    canScrollNext: boolean;
+    /** The index of the selected slide. */
+    selectedIndex: number;
+    /** The scroll snaps of the carousel. */
+    scrollSnaps: number[];
+};
+
+export const CarouselContext = createContext<CarouselContextProps | null>(null);
+
+export const useCarousel = () => {
+    const context = useContext(CarouselContext);
+
+    if (!context) {
+        throw new Error("The `useCarousel` hook must be used within a <Carousel />");
+    }
+
+    return context;
+};
+
+const CarouselRoot = ({ orientation = "horizontal", opts, setApi, plugins, className, children, ...props }: ComponentPropsWithRef<"div"> & CarouselProps) => {
+    const [carouselRef, api] = useEmblaCarousel(
+        {
+            ...opts,
+            axis: orientation === "horizontal" ? "x" : "y",
+        },
+        plugins,
+    );
+    const [canScrollPrev, setCanScrollPrev] = useState(false);
+    const [canScrollNext, setCanScrollNext] = useState(false);
+    const [selectedIndex, setSelectedIndex] = useState(0);
+    const [scrollSnaps, setScrollSnaps] = useState<number[]>([]);
+
+    const onInit = useCallback((api: CarouselApi) => {
+        if (!api) return;
+
+        setScrollSnaps(api.scrollSnapList());
+    }, []);
+
+    const onSelect = useCallback((api: CarouselApi) => {
+        if (!api) return;
+
+        setCanScrollPrev(api.canScrollPrev());
+        setCanScrollNext(api.canScrollNext());
+        setSelectedIndex(api.selectedScrollSnap());
+    }, []);
+
+    const scrollPrev = useCallback(() => {
+        api?.scrollPrev();
+    }, [api]);
+
+    const scrollNext = useCallback(() => {
+        api?.scrollNext();
+    }, [api]);
+
+    const handleKeyDown = useCallback(
+        (event: KeyboardEvent<HTMLDivElement>) => {
+            if (event.key === "ArrowLeft") {
+                event.preventDefault();
+                scrollPrev();
+            } else if (event.key === "ArrowRight") {
+                event.preventDefault();
+                scrollNext();
+            }
+        },
+        [scrollPrev, scrollNext],
+    );
+
+    useEffect(() => {
+        if (!api || !setApi) return;
+
+        setApi(api);
+    }, [api, setApi]);
+
+    useEffect(() => {
+        if (!api) return;
+
+        onInit(api);
+        onSelect(api);
+
+        api.on("reInit", onInit);
+        api.on("reInit", onSelect);
+        api.on("select", onSelect);
+
+        return () => {
+            api?.off("select", onSelect);
+        };
+    }, [api, onInit, onSelect]);
+
+    return (
+        <CarouselContext.Provider
+            value={{
+                carouselRef,
+                api: api,
+                opts,
+                orientation: orientation || (opts?.axis === "y" ? "vertical" : "horizontal"),
+                scrollPrev,
+                scrollNext,
+                canScrollPrev,
+                canScrollNext,
+                selectedIndex,
+                scrollSnaps,
+            }}
+        >
+            <div onKeyDownCapture={handleKeyDown} className={cx("relative", className)} role="region" aria-roledescription="carousel" {...props}>
+                {children}
+            </div>
+        </CarouselContext.Provider>
+    );
+};
+
+interface CarouselContentProps extends ComponentPropsWithRef<"div"> {
+    /** The class name of the content. */
+    className?: string;
+    /** Whether to hide the overflow. */
+    overflowHidden?: boolean;
+}
+
+const CarouselContent = ({ className, overflowHidden = true, ...props }: CarouselContentProps) => {
+    const { carouselRef, orientation } = useCarousel();
+
+    return (
+        <div ref={carouselRef} className={cx("h-full w-full", overflowHidden && "overflow-hidden")}>
+            <div className={cx("flex max-h-full", orientation === "horizontal" ? "" : "flex-col", className)} {...props} />
+        </div>
+    );
+};
+
+const CarouselItem = ({ className, ...props }: ComponentPropsWithRef<"div">) => {
+    return <div role="group" aria-roledescription="slide" className={cx("min-w-0 shrink-0 grow-0 basis-full", className)} {...props} />;
+};
+
+interface TriggerRenderProps {
+    isDisabled: boolean;
+    onClick: () => void;
+}
+
+interface TriggerProps {
+    /** The ref of the trigger. */
+    ref?: Ref<HTMLButtonElement>;
+    /** 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 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);
+}
+
+const Trigger = ({ className, children, asChild, direction, style, ...props }: TriggerProps) => {
+    const { scrollPrev, canScrollNext, scrollNext, canScrollPrev } = useCarousel();
+
+    const isDisabled = direction === "prev" ? !canScrollPrev : !canScrollNext;
+
+    const handleClick = () => {
+        if (isDisabled) return;
+
+        direction === "prev" ? scrollPrev() : scrollNext();
+    };
+
+    const computedClassName = typeof className === "function" ? className({ isDisabled }) : className;
+
+    const defaultAriaLabel = direction === "prev" ? "Previous slide" : "Next slide";
+
+    // If the children is a render prop, we need to pass the necessary props 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 necessary props to the cloned element.
+    if (asChild && isValidElement(children)) {
+        return cloneElement(children, {
+            onClick: handleClick,
+            disabled: isDisabled,
+            "aria-label": 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={defaultAriaLabel} disabled={isDisabled} className={computedClassName} onClick={handleClick} {...props}>
+            {children}
+        </button>
+    );
+};
+
+const CarouselPrevTrigger = (props: Omit<TriggerProps, "direction">) => <Trigger {...props} direction="prev" />;
+
+const CarouselNextTrigger = (props: Omit<TriggerProps, "direction">) => <Trigger {...props} direction="next" />;
+
+interface CarouselIndicatorRenderProps {
+    isSelected: boolean;
+    onClick: () => void;
+}
+
+interface CarouselIndicatorProps {
+    /** The index of the indicator. */
+    index: number;
+    /** If true, the child element will be cloned and passed down the prop of the indicator. */
+    asChild?: boolean;
+    /** If true, the indicator will be selected. */
+    isSelected?: boolean;
+    /** The children of the indicator. Can be a render prop or a valid element. */
+    children?: ReactNode | ((props: CarouselIndicatorRenderProps) => ReactNode);
+    /** The style of the indicator. */
+    style?: CSSProperties;
+    /** The class name of the indicator. */
+    className?: string | ((args: { isSelected: boolean }) => string);
+}
+
+const CarouselIndicator = ({ index, isSelected = false, children, asChild, className, style }: CarouselIndicatorProps) => {
+    const { api, selectedIndex } = useCarousel();
+
+    isSelected = isSelected || selectedIndex === index;
+
+    const handleClick = () => {
+        api?.scrollTo(index);
+    };
+    const computedClassName = typeof className === "function" ? className({ isSelected }) : className;
+
+    const defaultAriaLabel = "Go to slide" + (index + 1);
+
+    // 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 })}</>;
+    }
+
+    // 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-label": defaultAriaLabel,
+            "aria-current": isSelected ? "true" : undefined,
+            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={defaultAriaLabel} aria-current={isSelected ? "true" : undefined} className={computedClassName} onClick={handleClick}>
+            {children}
+        </button>
+    );
+};
+
+interface CarouselIndicatorGroupProps extends Omit<HTMLAttributes<HTMLDivElement>, "children"> {
+    children: ReactNode | ((props: { index: number }) => ReactNode);
+    className?: string;
+}
+
+const CarouselIndicatorGroup = ({ children, ...props }: CarouselIndicatorGroupProps) => {
+    const { scrollSnaps } = useCarousel();
+
+    // If the children is a render prop, we need to pass the index to the render prop.
+    if (typeof children === "function") {
+        return <nav {...props}>{scrollSnaps.map((index) => children({ index }))}</nav>;
+    }
+
+    return <nav {...props}>{children}</nav>;
+};
+
+export const Carousel = {
+    Root: CarouselRoot,
+    Content: CarouselContent,
+    Item: CarouselItem,
+    PrevTrigger: CarouselPrevTrigger,
+    NextTrigger: CarouselNextTrigger,
+    IndicatorGroup: CarouselIndicatorGroup,
+    Indicator: CarouselIndicator,
+};
diff --git a/src/components/application/charts/charts-base.tsx b/src/components/application/charts/charts-base.tsx
new file mode 100644
index 0000000..7930815
--- /dev/null
+++ b/src/components/application/charts/charts-base.tsx
@@ -0,0 +1,138 @@
+import type { TooltipProps } from "recharts";
+import type { Props as LegendContentProps } from "recharts/types/component/DefaultLegendContent";
+import type { NameType, ValueType } from "recharts/types/component/DefaultTooltipContent";
+import type { Props as DotProps } from "recharts/types/shape/Dot";
+import { cx } from "@/utils/cx";
+
+/**
+ * Selects evenly spaced items from an array. Used for rendering
+ * certain number of x-axis labels.
+ * @param dataArray - The array of items to select from.
+ * @param count - The number of items to select.
+ * @returns The selected items.
+ */
+export const selectEvenlySpacedItems = <T extends readonly unknown[]>(dataArray: T, count: number): Array<T[number]> => {
+    if (!dataArray || dataArray.length === 0) {
+        return [];
+    }
+
+    const selectedItems: Array<T[number]> = [];
+
+    if (dataArray.length === 1) {
+        for (let i = 0; i < count; i++) {
+            selectedItems.push(dataArray[0]);
+        }
+        return selectedItems;
+    }
+
+    for (let i = 0; i < count; i++) {
+        const targetIndex = Math.round((i * (dataArray.length - 1)) / (count - 1));
+        const boundedIndex = Math.max(0, Math.min(targetIndex, dataArray.length - 1));
+        selectedItems.push(dataArray[boundedIndex]);
+    }
+
+    return selectedItems;
+};
+
+/**
+ * Renders the legend content for a chart.
+ * @param reversed - Whether to reverse the payload.
+ * @param payload - The payload of the legend.
+ * @param align - The alignment of the legend.
+ * @param layout - The layout of the legend.
+ * @param className - The class name of the legend.
+ * @returns The legend content.
+ */
+export const ChartLegendContent = ({ reversed, payload, align, layout, className }: LegendContentProps & { reversed?: boolean; className?: string }) => {
+    payload = reversed ? payload?.toReversed() : payload;
+
+    return (
+        <ul
+            className={cx(
+                "flex",
+                layout === "vertical"
+                    ? `flex-col gap-1 pl-4 ${align === "center" ? "items-center" : align === "right" ? "items-start" : "items-start"}`
+                    : `flex-row gap-3 ${align === "center" ? "justify-center" : align === "right" ? "justify-end" : "justify-start"}`,
+                className,
+            )}
+        >
+            {payload?.map((entry, index) => (
+                <li className="flex items-center gap-2 text-sm text-tertiary" key={index}>
+                    <span
+                        className={cx(
+                            "block size-2 rounded-full bg-current ring-[0.5px] ring-black/10 ring-inset",
+                            (entry.payload as { className?: string })?.className,
+                        )}
+                    />
+                    {entry.value}
+                </li>
+            ))}
+        </ul>
+    );
+};
+
+interface ChartTooltipContentProps extends TooltipProps<ValueType, NameType> {
+    isRadialChart?: boolean;
+    isPieChart?: boolean;
+    label?: string;
+    // We have to use `any` here because the `payload` prop is not typed correctly in the `recharts` library.
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    payload?: any;
+}
+
+export const ChartTooltipContent = ({ active, payload, label, isRadialChart, isPieChart, formatter, labelFormatter }: ChartTooltipContentProps) => {
+    const canRender = active && payload && payload.length;
+
+    if (!canRender) {
+        return null;
+    }
+
+    const isSingleDataPoint = payload.length === 1;
+
+    // If it's a single data point, we use the value as the title and
+    // the name as the secondary title.
+    let title = isSingleDataPoint ? (isRadialChart ? payload[0].value : isPieChart ? payload[0].value : payload[0].value) : label;
+    let secondaryTitle = isSingleDataPoint ? (isRadialChart ? payload[0].payload.name : isPieChart ? payload[0].name : label) : payload;
+
+    title =
+        isSingleDataPoint && formatter
+            ? formatter(title, payload?.[0].name || label, payload[0], 0, payload)
+            : labelFormatter
+              ? labelFormatter(title, payload)
+              : title;
+    secondaryTitle = isSingleDataPoint && labelFormatter ? labelFormatter(secondaryTitle, payload) : secondaryTitle;
+
+    return (
+        <div className="flex flex-col gap-0.5 rounded-lg bg-primary-solid px-3 py-2 shadow-lg">
+            <p className="text-xs font-semibold text-white">{title}</p>
+
+            {!secondaryTitle ? null : Array.isArray(secondaryTitle) ? (
+                <div>
+                    {secondaryTitle.map((entry, index) => (
+                        <p key={index} className={cx("text-xs text-tooltip-supporting-text")}>
+                            {`${entry.name}: ${formatter ? formatter(entry.value, entry.name, entry, index, entry.payload) : entry.value}`}
+                        </p>
+                    ))}
+                </div>
+            ) : (
+                <p className="text-xs text-tooltip-supporting-text">{secondaryTitle}</p>
+            )}
+        </div>
+    );
+};
+
+interface ChartActiveDotProps extends DotProps {
+    // We have to use `any` here because the `payload` prop is not typed correctly in the `recharts` library.
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    payload?: any;
+}
+
+export const ChartActiveDot = ({ cx = 0, cy = 0 }: ChartActiveDotProps) => {
+    const size = 12;
+
+    return (
+        <svg x={cx - size / 2} y={cy - size / 2} width={size} height={size} viewBox="0 0 12 12" fill="none">
+            <rect x="2" y="2" width="8" height="8" rx="6" className="fill-bg-primary stroke-utility-brand-600" strokeWidth="2" />
+        </svg>
+    );
+};
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..3836099
--- /dev/null
+++ b/src/components/application/empty-state/empty-state.tsx
@@ -0,0 +1,343 @@
+import type { ComponentProps, ComponentPropsWithRef, ReactNode } 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, ...props }: ComponentPropsWithRef<typeof FeaturedIconbase>) => {
+    const { size: rootSize } = useContext(RootContext);
+
+    return <FeaturedIconbase {...props} {...{ color, theme, icon }} size={!size && rootSize === "lg" ? "xl" : size || "lg"} />;
+};
+
+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-neutral-50 to-neutral-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)} />;
+};
+
+interface AvatarRadiusProps extends ComponentPropsWithRef<"div"> {
+    avatars?: Array<{ src: string; alt?: string }>;
+}
+
+/**
+ * Predefined avatar slots positioned on concentric circle rings.
+ * Each slot defines: ring radius, CSS angle (0°=top, clockwise), and avatar size class.
+ */
+const avatarSlots = [
+    { ring: 80, angle: 330, size: "size-8" },
+    { ring: 80, angle: 56, size: "size-8" },
+    { ring: 144, angle: 82, size: "size-7" },
+    { ring: 144, angle: 299, size: "size-7" },
+    { ring: 144, angle: 241, size: "size-7" },
+    { ring: 176, angle: 64, size: "size-6" },
+    { ring: 176, angle: 270, size: "size-6" },
+    { ring: 144, angle: 112, size: "size-7" },
+    { ring: 80, angle: 249, size: "size-8" },
+] as const;
+
+const RING_RADII = [48, 80, 112, 144, 176];
+
+const AvatarRadius = ({ avatars = [], ...props }: AvatarRadiusProps) => {
+    return (
+        <div
+            aria-hidden="true"
+            {...props}
+            className={cx("pointer-events-none absolute top-1/2 left-1/2 size-120 -translate-x-1/2 -translate-y-1/2", props.className)}
+            style={{
+                maskImage: "radial-gradient(circle, black 10%, transparent 70%)",
+                WebkitMaskImage: "radial-gradient(circle, black 10%, transparent 70%)",
+                ...props.style,
+            }}
+        >
+            {RING_RADII.map((radius) => (
+                <div
+                    key={radius}
+                    className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 rounded-full border border-secondary"
+                    style={{ width: radius * 2, height: radius * 2 }}
+                />
+            ))}
+
+            {avatars.slice(0, avatarSlots.length).map((avatar, i) => {
+                const slot = avatarSlots[i];
+                const rad = (slot.angle * Math.PI) / 180;
+                const x = Math.sin(rad) * slot.ring;
+                const y = -Math.cos(rad) * slot.ring;
+
+                return (
+                    <div
+                        key={i}
+                        className={cx("absolute top-1/2 left-1/2 rounded-full bg-primary p-px shadow-xs ring-[0.5px] ring-black/10", slot.size)}
+                        style={{ transform: `translate(calc(-50% + ${x}px), calc(-50% + ${y}px))` }}
+                    >
+                        <img src={avatar.src} alt="" className="size-full rounded-full object-cover outline-[0.5px] -outline-offset-[0.5px] outline-black/16" />
+                    </div>
+                );
+            })}
+        </div>
+    );
+};
+
+interface AvatarRowProps extends ComponentPropsWithRef<"div"> {
+    avatars?: Array<{ src: string; alt?: string }>;
+    children?: ReactNode;
+}
+
+/** Avatar sizes per root size — ordered smallest to largest (left edge → center). */
+const rowStyles = {
+    sm: ["size-8 rounded-md", "size-9 rounded-[7px]", "size-10 rounded-lg", "size-11 rounded-[9px]"],
+    md: ["size-10 rounded-lg", "size-11 rounded-[9px]", "size-12 rounded-[10px]"],
+    lg: ["size-10 rounded-lg", "size-11 rounded-[9px]", "size-12 rounded-[10px]"],
+} as const;
+
+const AvatarRow = ({ avatars = [], children, ...props }: AvatarRowProps) => {
+    const { size: rootSize } = useContext(RootContext);
+    const sizeKey = rootSize || "md";
+    const sizes = rowStyles[sizeKey];
+    const count = sizes.length;
+    const leftAvatars = avatars.slice(0, count);
+    const rightAvatars = avatars.slice(count, count * 2);
+
+    const renderAvatar = (avatar: { src: string; alt?: string }, sizeClass: string, key: number) => (
+        <div
+            key={key}
+            className={cx(
+                "relative shrink-0 overflow-hidden outline-[0.5px] -outline-offset-[0.5px] outline-black/16 before:absolute before:inset-0 before:rounded-[inherit] before:border before:border-white/32 before:mask-[linear-gradient(to_bottom,black_0%,transparent_25%,transparent_75%,black_100%)]",
+                sizeClass,
+            )}
+        >
+            <img src={avatar.src} alt={avatar.alt || ""} className="size-full object-cover" />
+        </div>
+    );
+
+    return (
+        <div
+            aria-hidden="true"
+            {...props}
+            className={cx("-m-1 flex items-center justify-center p-1", sizeKey === "sm" ? "gap-4" : sizeKey === "md" ? "gap-5" : "gap-6", props.className)}
+            style={{
+                maskImage: "radial-gradient(circle, black 5%, transparent 105%)",
+                WebkitMaskImage: "radial-gradient(circle, black 5%, transparent 105%)",
+                ...props.style,
+            }}
+        >
+            <div className={cx("flex items-center", sizeKey === "sm" ? "gap-3" : "gap-4")}>
+                {leftAvatars.map((avatar, i) => renderAvatar(avatar, sizes[i], i))}
+            </div>
+
+            {children}
+
+            <div className={cx("flex items-center", sizeKey === "sm" ? "gap-3" : "gap-4")}>
+                {rightAvatars.map((avatar, i) => renderAvatar(avatar, sizes[count - 1 - i], i + count))}
+            </div>
+        </div>
+    );
+};
+
+interface AvatarGridProps extends ComponentPropsWithRef<"div"> {
+    avatars?: Array<{ src: string; alt?: string }>;
+}
+
+const gridStyles = {
+    sm: { avatar: "size-8 rounded-md", inner: "rounded-[5px]", gap: "gap-2 pl-2", rowGap: "gap-2" },
+    md: { avatar: "size-10 rounded-lg", inner: "rounded-[7px]", gap: "gap-3 pl-3", rowGap: "gap-3" },
+    lg: { avatar: "size-12 rounded-[10px]", inner: "rounded-[9px]", gap: "gap-3 pl-3", rowGap: "gap-3" },
+} as const;
+
+const AvatarGrid = ({ avatars = [], ...props }: AvatarGridProps) => {
+    const { size: rootSize } = useContext(RootContext);
+    const sizeKey = rootSize || "md";
+    const config = gridStyles[sizeKey];
+    const mid = Math.ceil(avatars.length / 2);
+    const row1Base = avatars.slice(0, mid);
+    const row2Base = avatars.slice(mid);
+
+    const row1 = [...row1Base, ...row1Base, ...row1Base];
+    const row2 = [...row2Base, ...row2Base, ...row2Base];
+
+    const renderGridAvatar = (avatar: { src: string; alt?: string }, key: number) => (
+        <div key={key} className={cx("shrink-0 bg-primary p-px shadow-xs ring-[0.75px] ring-black/10", config.avatar)}>
+            <div
+                className={cx(
+                    "relative size-full overflow-hidden outline-[0.5px] -outline-offset-[0.5px] outline-black/16 before:absolute before:inset-0 before:rounded-[inherit] before:border before:border-white/32 before:mask-[linear-gradient(to_bottom,black_0%,transparent_25%,transparent_75%,black_100%)]",
+                    config.inner,
+                )}
+            >
+                <img src={avatar.src} alt={avatar.alt || ""} className="size-full object-cover" />
+            </div>
+        </div>
+    );
+
+    return (
+        <div
+            aria-hidden="true"
+            {...props}
+            className={cx("-m-1 flex max-w-lg flex-col items-center overflow-x-clip p-1", config.rowGap, props.className)}
+            style={{
+                maskImage: "radial-gradient(circle, black 10%, transparent 100%)",
+                WebkitMaskImage: "radial-gradient(circle, black 10%, transparent 100%)",
+                ...props.style,
+            }}
+        >
+            <div className="flex">
+                <div className={cx("flex w-auto max-w-none shrink-0 animate-marquee [animation-duration:240s] motion-reduce:animate-none", config.gap)}>
+                    {row1.map((avatar, i) => renderGridAvatar(avatar, i))}
+                </div>
+                <div className={cx("flex w-auto max-w-none shrink-0 animate-marquee [animation-duration:240s] motion-reduce:animate-none", config.gap)}>
+                    {row1.map((avatar, i) => renderGridAvatar(avatar, i))}
+                </div>
+            </div>
+            <div className="flex">
+                <div
+                    className={cx(
+                        "flex w-auto max-w-none shrink-0 animate-marquee [animation-delay:-120s] [animation-duration:240s] direction-reverse motion-reduce:-translate-x-1/2 motion-reduce:animate-none",
+                        config.gap,
+                    )}
+                >
+                    {row2.map((avatar, i) => renderGridAvatar(avatar, i + mid))}
+                </div>
+                <div
+                    className={cx(
+                        "flex w-auto max-w-none shrink-0 animate-marquee [animation-delay:-120s] [animation-duration:240s] direction-reverse motion-reduce:-translate-x-1/2 motion-reduce:animate-none",
+                        config.gap,
+                    )}
+                >
+                    {row2.map((avatar, i) => renderGridAvatar(avatar, i + mid))}
+                </div>
+            </div>
+        </div>
+    );
+};
+
+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;
+    AvatarRadius: typeof AvatarRadius;
+    AvatarRow: typeof AvatarRow;
+    AvatarGrid: typeof AvatarGrid;
+};
+
+EmptyState.Title = Title;
+EmptyState.Header = Header;
+EmptyState.Footer = Footer;
+EmptyState.Content = Content;
+EmptyState.Description = Description;
+EmptyState.Illustration = Illustration;
+EmptyState.FeaturedIcon = FeaturedIcon;
+EmptyState.FileTypeIcon = FileTypeIcon;
+EmptyState.AvatarRadius = AvatarRadius;
+EmptyState.AvatarRow = AvatarRow;
+EmptyState.AvatarGrid = AvatarGrid;
+
+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..5129022
--- /dev/null
+++ b/src/components/application/file-upload/file-upload-base.tsx
@@ -0,0 +1,392 @@
+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-secondary",
+                className,
+            )}
+        >
+            <FeaturedIcon icon={UploadCloud02} color="gray" theme="modern" size="md" className={cx(isDisabled && "opacity-50")} />
+
+            <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="size-4 stroke-[2.5px] 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..8255ab3
--- /dev/null
+++ b/src/components/application/pagination/pagination.tsx
@@ -0,0 +1,480 @@
+import { ArrowLeft, ArrowRight, ChevronLeft, ChevronLeftDouble, ChevronRight, ChevronRightDouble } from "@untitledui/icons";
+import { ButtonGroup, ButtonGroupItem } from "@/components/base/button-group/button-group";
+import { Button } from "@/components/base/buttons/button";
+import { InputBase } from "@/components/base/input/input";
+import { Select } from "@/components/base/select/select";
+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-9 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-9 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-9 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-9 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 number of items per page. */
+    pageSize?: 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;
+    /** The function to call when the page size changes. */
+    onPageSizeChange?: (pageSize: number) => void;
+}
+
+export const PaginationCardMinimal = ({
+    page = 1,
+    total = 10,
+    pageSize = 10,
+    align = "left",
+    onPageChange,
+    className,
+    onPageSizeChange,
+}: 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>
+
+                <div
+                    className={cx(
+                        "flex items-center gap-3",
+                        align === "right" && "order-first mr-auto",
+                        align === "left" && "order-last ml-auto flex-row-reverse",
+                    )}
+                >
+                    <span className="text-sm font-medium text-fg-secondary">
+                        Page {page} of {total}
+                    </span>
+                    <Select
+                        aria-label="Page Size"
+                        value={pageSize}
+                        onChange={(value) => onPageSizeChange?.(value as number)}
+                        size="sm"
+                        items={[
+                            { label: "10 per page", id: 10 },
+                            { label: "25 per page", id: 25 },
+                            { label: "50 per page", id: 50 },
+                            { label: "100 per page", id: 100 },
+                        ]}
+                    >
+                        {(item) => (
+                            <Select.Item id={item.id} key={item.id}>
+                                {item.label?.split(" ")[0]}
+                            </Select.Item>
+                        )}
+                    </Select>
+                </div>
+                <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="sm">
+                            <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-9 items-center justify-center">
+                                            {page.value}
+                                        </ButtonGroupItem>
+                                    </Pagination.Item>
+                                ) : (
+                                    <Pagination.Ellipsis key={index}>
+                                        <ButtonGroupItem className="pointer-events-none size-9 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>
+    );
+};
+
+interface PaginationCardAdvancedProps {
+    /** The current page. */
+    page?: number;
+    /** The total number of pages. */
+    total?: number;
+    /** The number of items per page. */
+    pageSize?: number;
+    /** The alignment of the pagination. */
+    align?: "space-between" | "center";
+    /** The class name of the pagination component. */
+    className?: string;
+    /** The function to call when the page changes. */
+    onPageChange?: (page: number) => void;
+    /** The function to call when the page size changes. */
+    onPageSizeChange?: (pageSize: number) => void;
+}
+
+export const PaginationCardAdvanced = ({
+    page = 1,
+    total = 10,
+    pageSize = 10,
+    align = "space-between",
+    onPageChange,
+    className,
+    onPageSizeChange,
+}: PaginationCardAdvancedProps) => {
+    return (
+        <div className={cx("border-t border-secondary px-4 py-3 md:px-6 md:pt-3 md:pb-4", className)}>
+            <Pagination.Root
+                page={page}
+                total={total}
+                onPageChange={onPageChange}
+                className={cx("flex items-center gap-3", align === "center" && "justify-between")}
+            >
+                <div className="hidden items-center gap-2 text-sm font-medium whitespace-nowrap text-fg-secondary md:flex">
+                    Page
+                    <InputBase
+                        aria-label="Page"
+                        value={page.toString()}
+                        onChange={(event) => onPageChange?.(Number(event.target.value))}
+                        size="sm"
+                        wrapperClassName="min-w-9"
+                        inputClassName="text-center min-w-9 field-sizing-content"
+                    />
+                    of {total}
+                </div>
+
+                <hr className={cx("mx-1 h-4 w-px border-l border-primary max-md:hidden", align === "center" && "hidden")} />
+
+                <div className={cx("hidden items-center gap-2 md:flex", align === "center" && "order-last")}>
+                    <span className="text-sm font-medium whitespace-nowrap text-secondary">Rows per page</span>
+                    <Select
+                        aria-label="Page Size"
+                        value={pageSize}
+                        onChange={(value) => onPageSizeChange?.(value as number)}
+                        size="sm"
+                        items={[
+                            { label: "10", id: 10 },
+                            { label: "25", id: 25 },
+                            { label: "50", id: 50 },
+                            { label: "100", id: 100 },
+                        ]}
+                    >
+                        {(item) => (
+                            <Select.Item selectionIndicator="none" id={item.id}>
+                                {item.label}
+                            </Select.Item>
+                        )}
+                    </Select>
+                </div>
+
+                <div className={cx("flex flex-1 items-center gap-4 md:ml-auto md:justify-end", align === "center" && "md:justify-center")}>
+                    <div className="flex gap-2">
+                        <Button iconLeading={ChevronLeftDouble} color="secondary" size="sm" isDisabled={page === 1} onClick={() => onPageChange?.(1)} />
+                        <Pagination.PrevTrigger asChild>
+                            <Button iconLeading={ChevronLeft} color="secondary" size="sm" />
+                        </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} {...page} />
+                                        ) : (
+                                            <Pagination.Ellipsis key={index} className="flex size-9 shrink-0 items-center justify-center text-tertiary">
+                                                &#8230;
+                                            </Pagination.Ellipsis>
+                                        ),
+                                    )}
+                                </div>
+
+                                <div className="flex flex-1 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 gap-2">
+                        <Button
+                            iconTrailing={ChevronRightDouble}
+                            color="secondary"
+                            size="sm"
+                            isDisabled={page === total}
+                            onClick={() => onPageChange?.(total)}
+                        />
+                        <Pagination.NextTrigger asChild>
+                            <Button iconTrailing={ChevronRight} color="secondary" size="sm" />
+                        </Pagination.NextTrigger>
+                    </div>
+                </div>
+            </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..afda618
--- /dev/null
+++ b/src/components/application/slideout-menus/slideout-menu.tsx
@@ -0,0 +1,121 @@
+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"
+        aria-label="Slideout menu"
+        {...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="sm" 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..9a70406
--- /dev/null
+++ b/src/components/application/table/table.tsx
@@ -0,0 +1,305 @@
+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="text-md font-semibold text-primary">{title}</h2>
+                    {badge ? (
+                        isValidElement(badge) ? (
+                            badge
+                        ) : (
+                            <Badge color="gray" size="sm" type="modern">
+                                {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;
+    size?: "sm" | "md";
+}
+
+const TableHeader = <T extends object>({ columns, children, bordered = true, className, size: sizeProp, ...props }: TableHeaderProps<T>) => {
+    const context = useContext(TableContext);
+    const { selectionBehavior, selectionMode } = useTableOptions();
+
+    const size = sizeProp ?? context.size;
+
+    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="md" />
+                        </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;
+    size?: "sm" | "md";
+}
+
+const TableRow = <T extends object>({ columns, children, className, highlightSelectedRow = true, size: sizeProp, ...props }: TableRowProps<T>) => {
+    const context = useContext(TableContext);
+    const { selectionBehavior } = useTableOptions();
+
+    const size = sizeProp ?? context.size;
+
+    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="md" />
+                    </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>;
+    size?: "sm" | "md";
+}
+
+const TableCell = ({ className, children, size: sizeProp, ...props }: TableCellProps) => {
+    const context = useContext(TableContext);
+    const { selectionBehavior } = useTableOptions();
+
+    const size = sizeProp ?? context.size;
+
+    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..201ab81
--- /dev/null
+++ b/src/components/application/tabs/tabs.tsx
@@ -0,0 +1,228 @@
+import type { ComponentPropsWithRef, FC, ReactNode } from "react";
+import { createContext, isValidElement, 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 { Badge } from "@/components/base/badges/badges";
+import { cx } from "@/utils/cx";
+import { isReactComponent } from "@/utils/is-react-component";
+
+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 *:data-icon:text-fg-quaternary",
+        isFocusVisible && "outline-2 -outline-offset-2",
+        (isSelected || isHovered) && "bg-brand-primary_alt text-brand-secondary *:data-icon:text-fg-brand-secondary_hover",
+    ),
+    "button-gray": cx(
+        "outline-focus-ring *:data-icon:text-fg-quaternary",
+        isHovered && "bg-primary_hover text-secondary *:data-icon:text-fg-secondary_hover",
+        isFocusVisible && "outline-2 -outline-offset-2",
+        isSelected && "bg-primary_hover text-secondary *:data-icon:text-fg-secondary_hover",
+    ),
+    "button-border": cx(
+        "outline-focus-ring *:data-icon:text-fg-quaternary",
+        isFocusVisible && "outline-2 -outline-offset-2",
+        (isSelected || isHovered) && "bg-primary_alt text-secondary shadow-sm *:data-icon:text-fg-secondary_hover",
+    ),
+    "button-minimal": cx(
+        "rounded-lg outline-focus-ring *:data-icon:text-fg-quaternary",
+        isFocusVisible && "outline-2 -outline-offset-2",
+        (isSelected || isHovered) && "bg-primary_alt text-secondary shadow-xs ring-1 ring-primary ring-inset *:data-icon:text-fg-secondary_hover",
+    ),
+    underline: cx(
+        "rounded-none border-b-2 border-transparent outline-focus-ring *:data-icon:text-fg-quaternary",
+        isFocusVisible && "outline-2 -outline-offset-2",
+        (isSelected || isHovered) && "border-fg-brand-primary_alt text-brand-secondary *:data-icon:text-fg-brand-secondary_hover",
+    ),
+    line: cx(
+        "rounded-none border-l-2 border-transparent outline-focus-ring *:data-icon:text-fg-quaternary",
+        isFocusVisible && "outline-2 -outline-offset-2",
+        (isSelected || isHovered) && "border-fg-brand-primary_alt text-brand-secondary *:data-icon:text-fg-brand-secondary_hover",
+    ),
+});
+
+const sizes = {
+    sm: {
+        base: "text-sm font-semibold gap-1 *:data-icon:size-4",
+        "button-brand": "py-2 px-2.5",
+        "button-gray": "py-2 px-2.5",
+        "button-border": "py-2 px-2.5",
+        "button-minimal": "py-2 px-2.5",
+        underline: "px-0.5 pb-2.5 pt-0",
+        line: "pl-2.5 pr-3 py-0.5",
+    },
+    md: {
+        base: "text-md font-semibold gap-1.5 *:data-icon:size-5",
+        "button-brand": "py-2.5 px-2.5",
+        "button-gray": "py-2.5 px-2.5",
+        "button-border": "py-2.5 px-2.5",
+        "button-minimal": "py-2.5 px-2.5",
+        underline: "px-0.5 pb-2.5 pt-0",
+        line: "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",
+});
+
+
+interface TabListComponentProps<T extends object, K extends Orientation> extends Omit<AriaTabListProps<T>, "items"> {
+    /** 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. When provided, tabs are rendered automatically via the render function in children. */
+    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 ?? (otherProps.items ? (item) => <Tab {...item}>{item.children}</Tab> : undefined)}
+            </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);
+    /** Icon component or element to show before the text */
+    icon?: FC<{ className?: string }> | ReactNode;
+    /** The badge displayed next to the label. */
+    badge?: number | string;
+}
+
+export const Tab = ({ label, children, badge, icon: Icon, className, ...otherProps }: TabComponentProps) => {
+    const { size = "sm", type = "button-brand", fullWidth } = useContext(TabListContext);
+
+    const showPillColorBadge = type === "underline" || type === "line" || type === "button-brand";
+
+    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].base,
+                    sizes[size][type],
+                    getTabStyles(prop)[type],
+                    typeof className === "function" ? className(prop) : className,
+                )
+            }
+        >
+            {(state) => (
+                <>
+                    {/* Icon */}
+                    {isValidElement(Icon) && Icon}
+                    {isReactComponent(Icon) && <Icon data-icon className="transition-inherit-all" />}
+
+                    <span className={cx("flex items-center gap-1.5", type !== "line" && "px-0.5")}>
+                        {typeof children === "function" ? children(state) : children || label}
+
+                        {/* Badge */}
+                        {badge && (
+                            <Badge
+                                size="sm"
+                                type={showPillColorBadge ? "pill-color" : "modern"}
+                                color={showPillColorBadge && (state.isHovered || state.isSelected) ? "brand" : "gray"}
+                                className={cx("hidden transition-inherit-all md:flex", size === "sm" && "-my-px")}
+                            >
+                                {badge}
+                            </Badge>
+                        )}
+                    </span>
+                </>
+            )}
+        </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..385e02a
--- /dev/null
+++ b/src/components/base/avatar/avatar-label-group.tsx
@@ -0,0 +1,29 @@
+import { type ReactNode } from "react";
+import { cx } from "@/utils/cx";
+import { Avatar, type AvatarProps } from "./avatar";
+
+const styles = {
+    sm: { title: "text-sm ", subtitle: "text-xs" },
+    md: { title: "text-sm ", subtitle: "text-sm" },
+    lg: { title: "text-md ", subtitle: "text-md" },
+};
+
+interface AvatarLabelGroupProps extends AvatarProps {
+    size: "sm" | "md" | "lg";
+    rounded?: boolean;
+    title: string | ReactNode;
+    subtitle: string | ReactNode;
+    avatarClassName?: string;
+}
+
+export const AvatarLabelGroup = ({ title, subtitle, className, rounded, avatarClassName, ...props }: AvatarLabelGroupProps) => {
+    return (
+        <figure className={cx("group flex min-w-0 flex-1 items-center gap-2", className)}>
+            <Avatar border rounded={rounded} className={avatarClassName} {...props} />
+            <figcaption className="min-w-0 flex-1">
+                <p className={cx("font-semibold 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..f4d3a59
--- /dev/null
+++ b/src/components/base/avatar/avatar-profile-photo.tsx
@@ -0,0 +1,135 @@
+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: "outline-[0.5px] -outline-offset-[0.5px] before:border",
+        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 outline-[0.75px] -outline-offset-[0.75px] before:border-[1.5px]",
+        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 outline-[0.75px] -outline-offset-[0.75px] before:border-[1.5px]",
+        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 = ({
+    size = "md",
+    src,
+    alt,
+    initials,
+    placeholder,
+    placeholderIcon: PlaceholderIcon,
+    verified,
+    badge,
+    status,
+    className,
+}: AvatarProfilePhotoProps) => {
+    const [isFailed, setIsFailed] = useState(false);
+
+    const renderMainContent = () => {
+        if (src && !isFailed) {
+            return (
+                <div
+                    className={cx(
+                        "relative size-full overflow-hidden rounded-full outline-black/16 before:absolute before:inset-0 before:rounded-full before:border-white/32 before:mask-[linear-gradient(to_bottom,black_0%,transparent_25%,transparent_75%,black_100%)]",
+                        styles[size].content,
+                    )}
+                >
+                    <img src={src} alt={alt} onError={() => setIsFailed(true)} className="size-full object-cover" />
+                </div>
+            );
+        }
+
+        if (initials) {
+            return (
+                <div
+                    className={cx(
+                        "flex size-full items-center justify-center rounded-full bg-tertiary ring-1 ring-secondary_alt outline-transparent before:hidden",
+                        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 outline-transparent before:hidden",
+                        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 outline-transparent before:hidden",
+                    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..993109a
--- /dev/null
+++ b/src/components/base/avatar/avatar.tsx
@@ -0,0 +1,160 @@
+import { type FC, type ReactNode, useState } from "react";
+import { User01 } from "@untitledui/icons";
+import { cx } from "@/utils/cx";
+import { AvatarOnlineIndicator, VerifiedTick } from "./base-components";
+import { AvatarCount } from "./base-components/avatar-count";
+
+export interface AvatarProps {
+    size?: "xs" | "sm" | "md" | "lg" | "xl" | "2xl";
+    className?: string;
+    /**
+     * The class name for the main child of the avatar.
+     */
+    contentClassName?: string;
+    src?: string | null;
+    alt?: string;
+    /**
+     * Display an inner contrast border around the avatar image.
+     */
+    contrastBorder?: boolean;
+    /**
+     * Whether the avatar should be rounded.
+     * @default true
+     */
+    rounded?: boolean;
+    /**
+     * Display an outer border around the avatar.
+     */
+    border?: 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;
+    /**
+     * Display a count badge.
+     */
+    count?: number;
+    /**
+     * 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 = {
+    xs: { root: "size-6", rootWithBorder: "p-px", initials: "text-xs font-semibold", icon: "size-4" },
+    sm: { root: "size-8", rootWithBorder: "p-px", initials: "text-sm font-semibold", icon: "size-5" },
+    md: { root: "size-10", rootWithBorder: "p-px", initials: "text-md font-semibold", icon: "size-6" },
+    lg: { root: "size-12", rootWithBorder: "p-[1.5px]", initials: "text-lg font-semibold", icon: "size-7" },
+    xl: { root: "size-14", rootWithBorder: "p-0.5", initials: "text-xl font-semibold", icon: "size-8" },
+    "2xl": { root: "size-16", rootWithBorder: "p-0.5", initials: "text-display-xs font-semibold", icon: "size-8" },
+};
+
+export const Avatar = ({
+    size = "md",
+    src,
+    alt,
+    initials,
+    placeholder,
+    placeholderIcon: PlaceholderIcon,
+    border,
+    badge,
+    status,
+    verified,
+    count,
+    focusable = false,
+    rounded = true,
+    className,
+    contentClassName,
+}: AvatarProps) => {
+    const [isFailed, setIsFailed] = useState(false);
+
+    const canShowImage = src && !isFailed;
+
+    const renderMainContent = () => {
+        if (canShowImage) {
+            return <img data-avatar-img className="size-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} />;
+        }
+
+        if (verified) {
+            return <VerifiedTick size={size} className={cx("absolute right-0 bottom-0", size === "xs" && "-right-px -bottom-px")} />;
+        }
+
+        if (count) {
+            return <AvatarCount count={count} />;
+        }
+
+        return badge;
+    };
+
+    return (
+        <div
+            data-avatar
+            className={cx(
+                "relative inline-flex shrink-0 rounded-[7px]",
+                rounded && "rounded-full",
+                // Focus styles
+                focusable && "outline-transparent group-focus-visible:outline-2 group-focus-visible:outline-offset-2 group-focus-visible:outline-focus-ring",
+                border && "ring-1 ring-secondary_alt",
+                border && styles[size].rootWithBorder,
+                styles[size].root,
+                className,
+            )}
+        >
+            <div
+                className={cx(
+                    "relative inline-flex size-full shrink-0 items-center justify-center overflow-hidden rounded-md bg-tertiary outline-[0.5px] -outline-offset-[0.5px] outline-black/16 before:inset-[0.5px]",
+                    rounded && "rounded-full",
+                    canShowImage &&
+                        size !== "xs" &&
+                        "before:absolute before:inset-0 before:rounded-[inherit] before:border before:border-white/32 before:mask-[linear-gradient(to_bottom,black_0%,transparent_25%,transparent_75%,black_100%)]",
+                    contentClassName,
+                )}
+            >
+                {renderMainContent()}
+            </div>
+            {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..53c8d84
--- /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:opacity-50",
+                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..31fc7ff
--- /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("absolute -right-0.5 -bottom-0.5 rounded-full bg-brand-50 object-cover ring-[1.5px] ring-bg-primary", sizes[size])}
+    />
+);
diff --git a/src/components/base/avatar/base-components/avatar-count.tsx b/src/components/base/avatar/base-components/avatar-count.tsx
new file mode 100644
index 0000000..b4fa214
--- /dev/null
+++ b/src/components/base/avatar/base-components/avatar-count.tsx
@@ -0,0 +1,14 @@
+import { cx } from "@/utils/cx";
+
+interface AvatarCountProps {
+    count: number;
+    className?: string;
+}
+
+export const AvatarCount = ({ count, className }: AvatarCountProps) => (
+    <div className={cx("absolute right-0 bottom-0 p-px", className)}>
+        <div className="flex size-3.5 items-center justify-center rounded-full bg-fg-error-primary text-center text-[10px] leading-[13px] font-bold text-white">
+            {count}
+        </div>
+    </div>
+);
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..9710ec7
--- /dev/null
+++ b/src/components/base/avatar/base-components/avatar-online-indicator.tsx
@@ -0,0 +1,48 @@
+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 flex justify-center rounded-full ring-[1.5px] ring-bg-primary",
+            status === "online" ? "bg-fg-success-secondary" : "bg-utility-neutral-300",
+            sizes[size],
+            className,
+        )}
+        style={{
+            backgroundImage:
+                "radial-gradient(43.75% 43.75% at 50% 28.75%, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0.00) 100%), radial-gradient(50% 50% at 50% 50%, rgba(255, 255, 255, 0.00) 74.66%, rgba(255, 255, 255, 0.18) 100%), radial-gradient(75% 75% at 50% 0%, rgba(255, 255, 255, 0.00) 0%, rgba(255, 255, 255, 0.00) 50%, rgba(255, 255, 255, 0.08) 99%, rgba(255, 255, 255, 0.00) 100%)",
+        }}
+    >
+        {/* Reflection */}
+        <svg viewBox="0 0 7.2 2.85" fill="none" className="mt-[10%] h-[20%] w-[60%]">
+            <path
+                d="M7.2 1.83107C7.2 2.84235 5.58823 2.19729 3.6 2.19729C1.61177 2.19729 0 2.84235 0 1.83107C0 0.8198 1.61177 0 3.6 0C5.58823 0 7.2 0.8198 7.2 1.83107Z"
+                fill="url(#reflection-gradient)"
+                fillOpacity="0.4"
+            />
+            <defs>
+                <linearGradient id="reflection-gradient" x1="3.6" y1="0" x2="3.6" y2="2.4" gradientUnits="userSpaceOnUse">
+                    <stop stopColor="white" />
+                    <stop offset="1" stopColor="white" stopOpacity="0.1" />
+                </linearGradient>
+            </defs>
+        </svg>
+    </span>
+);
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..baf3c02
--- /dev/null
+++ b/src/components/base/avatar/base-components/verified-tick.tsx
@@ -0,0 +1,32 @@
+import { cx } from "@/utils/cx";
+
+const sizes = {
+    xs: "size-2.5",
+    sm: "size-3",
+    md: "size-3.5",
+    lg: "size-4",
+    xl: "size-4.5",
+    "2xl": "size-5",
+    "3xl": "size-6",
+    "4xl": "size-8",
+};
+
+interface VerifiedTickProps {
+    size: "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "4xl";
+    className?: string;
+}
+
+export const VerifiedTick = ({ size, className }: VerifiedTickProps) => (
+    <svg className={cx("z-10 text-utility-blue-500", sizes[size], 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..1babfb8
--- /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-neutral-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-neutral-50 text-utility-neutral-700 ring-utility-neutral-200 hover:bg-utility-neutral-100",
+            addon: "bg-primary text-current ring-utility-neutral-200",
+            icon: "text-utility-neutral-500",
+        },
+        error: {
+            root: "bg-utility-red-50 text-utility-red-700 ring-utility-red-200 hover:bg-utility-red-100",
+            addon: "bg-primary text-current ring-utility-red-200",
+            icon: "text-utility-red-500",
+        },
+        warning: {
+            root: "bg-utility-yellow-50 text-utility-yellow-700 ring-utility-yellow-200 hover:bg-utility-yellow-100",
+            addon: "bg-primary text-current ring-utility-yellow-200",
+            icon: "text-utility-yellow-500",
+        },
+        success: {
+            root: "bg-utility-green-50 text-utility-green-700 ring-utility-green-200 hover:bg-utility-green-100",
+            addon: "bg-primary text-current ring-utility-green-200",
+            icon: "text-utility-green-500",
+        },
+    },
+    modern: {
+        brand: {
+            dot: "bg-utility-brand-500 outline-3 -outline-offset-1 outline-utility-brand-100",
+        },
+        gray: {
+            dot: "bg-utility-neutral-500 outline-3 -outline-offset-1 outline-utility-neutral-100",
+        },
+        error: {
+            dot: "bg-utility-red-500 outline-3 -outline-offset-1 outline-utility-red-100",
+        },
+        warning: {
+            dot: "bg-utility-yellow-500 outline-3 -outline-offset-1 outline-utility-yellow-100",
+        },
+        success: {
+            dot: "bg-utility-green-500 outline-3 -outline-offset-1 outline-utility-green-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..6c18a6f
--- /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" | "slate" | "sky" | "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..e0ba7ae
--- /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-neutral-50 text-utility-neutral-700 ring-utility-neutral-200",
+        addon: "text-utility-neutral-500",
+        addonButton: "hover:bg-utility-neutral-100 text-utility-neutral-400 hover:text-utility-neutral-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-red-50 text-utility-red-700 ring-utility-red-200",
+        addon: "text-utility-red-500",
+        addonButton: "hover:bg-utility-red-100 text-utility-red-400 hover:text-utility-red-500",
+    },
+    warning: {
+        root: "bg-utility-yellow-50 text-utility-yellow-700 ring-utility-yellow-200",
+        addon: "text-utility-yellow-500",
+        addonButton: "hover:bg-utility-yellow-100 text-utility-yellow-400 hover:text-utility-yellow-500",
+    },
+    success: {
+        root: "bg-utility-green-50 text-utility-green-700 ring-utility-green-200",
+        addon: "text-utility-green-500",
+        addonButton: "hover:bg-utility-green-100 text-utility-green-400 hover:text-utility-green-500",
+    },
+    slate: {
+        root: "bg-utility-slate-50 text-utility-slate-700 ring-utility-slate-200",
+        addon: "text-utility-slate-500",
+        addonButton: "hover:bg-utility-slate-100 text-utility-slate-400 hover:text-utility-slate-500",
+    },
+    sky: {
+        root: "bg-utility-sky-50 text-utility-sky-700 ring-utility-sky-200",
+        addon: "text-utility-sky-500",
+        addonButton: "hover:bg-utility-sky-100 text-utility-sky-400 hover:text-utility-sky-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-neutral-500",
+                addonButton: "hover:bg-utility-neutral-100 text-utility-neutral-400 hover:text-utility-neutral-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..73f0750
--- /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-skeuomorphic 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:text-secondary/50 disabled:*:opacity-50",
+            // Selected styles
+            "selected:bg-primary_hover selected:text-secondary_hover",
+        ].join(" "),
+        icon: "pointer-events-none text-fg-quaternary transition-[inherit] group-hover/button-group:text-fg-quaternary_hover group-selected/button-group:text-fg-quaternary_hover",
+    },
+
+    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:px-2.5",
+            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:px-3.5",
+            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..fad264d
--- /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-skeuomorphic ring-1 ring-primary ring-inset hover:bg-primary_hover hover:text-fg-quaternary_hover disabled:shadow-xs",
+    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:opacity-50",
+                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..6bd4ae7
--- /dev/null
+++ b/src/components/base/buttons/button.tsx
@@ -0,0 +1,257 @@
+import type { FC, ReactElement, 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:opacity-50 in-data-input-wrapper:disabled:opacity-100",
+            // 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: {
+        xs: {
+            root: [
+                "gap-1 rounded-lg px-2.5 py-1.5 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",
+                "*:data-icon:size-4 *:data-icon:stroke-[2.25px]",
+            ].join(" "),
+            linkRoot: "gap-1 *:data-text:underline-offset-3",
+        },
+        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 *:data-text:underline-offset-3",
+        },
+        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 *:data-text:underline-offset-4",
+        },
+        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 *:data-text:underline-offset-4",
+        },
+        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 *:data-text:underline-offset-4",
+        },
+    },
+
+    colors: {
+        primary: {
+            root: [
+                "bg-brand-solid text-white shadow-xs-skeuomorphic 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%",
+                // Icon styles
+                "*:data-icon:text-white/60 hover:*:data-icon:text-white/70",
+            ].join(" "),
+        },
+        secondary: {
+            root: [
+                "bg-primary text-secondary shadow-xs-skeuomorphic ring-1 ring-primary ring-inset hover:bg-primary_hover hover:text-secondary_hover data-loading:bg-primary_hover",
+                // 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-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 hover:*:data-text:decoration-fg-brand-secondary_alt",
+                // Icon styles
+                "*:data-icon:text-fg-brand-secondary_alt hover:*:data-icon:text-fg-brand-secondary_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 hover:*:data-text:decoration-fg-quaternary",
+                // Icon styles
+                "*:data-icon:text-fg-quaternary hover:*:data-icon:text-fg-quaternary_hover",
+            ].join(" "),
+        },
+        "primary-destructive": {
+            root: [
+                "bg-error-solid text-white shadow-xs-skeuomorphic 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%",
+                // Icon styles
+                "*:data-icon:text-white/60 hover:*:data-icon:text-white/70",
+            ].join(" "),
+        },
+        "secondary-destructive": {
+            root: [
+                "bg-primary text-error-primary shadow-xs-skeuomorphic ring-1 ring-error_subtle outline-error ring-inset 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(" "),
+        },
+        "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;
+
+    children?: ReactNode;
+    className?: string;
+}
+
+/**
+ * Props for the button variant (non-link)
+ */
+export interface ButtonProps extends CommonProps, Omit<AriaButtonProps, "children" | "className"> {}
+/**
+ * Props for the link variant (anchor tag)
+ */
+interface LinkProps extends CommonProps, Omit<AriaLinkProps, "children" | "className"> {
+    href: NonNullable<AriaLinkProps["href"]>;
+}
+
+/** Union type of button and link props */
+export type Props = ButtonProps | LinkProps;
+
+export const Button: {
+    (props: LinkProps): ReactElement<LinkProps>;
+    (props: ButtonProps): ReactElement<ButtonProps>;
+} = ({
+    size = "sm",
+    color = "primary",
+    children,
+    className,
+    noTextPadding,
+    iconLeading: IconLeading,
+    iconTrailing: IconTrailing,
+    isDisabled: disabled,
+    isLoading: loading,
+    showTextWhileLoading,
+    ...props
+}) => {
+    const href = "href" in props ? props.href : undefined;
+
+    const isIcon = (IconLeading || IconTrailing) && !children;
+    const isLinkType = ["link-gray", "link-color", "link-destructive"].includes(color);
+
+    noTextPadding = isLinkType || noTextPadding;
+
+    const commonChildren = (
+        <>
+            {/* 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} />}
+        </>
+    );
+
+    const commonProps = {
+        "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,
+        ),
+        children: commonChildren,
+    };
+
+    if ("href" in commonProps) {
+        return <AriaLink {...commonProps} href={disabled ? undefined : href} />;
+    }
+
+    return <AriaButton {...commonProps} type={commonProps.type || "button"} isPending={loading} />;
+};
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..4c4f3ed
--- /dev/null
+++ b/src/components/base/buttons/social-button.tsx
@@ -0,0 +1,143 @@
+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 disabled:stroke-fg-disabled disabled:text-fg-disabled disabled:*:text-fg-disabled 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",
+        icon: "pointer-events-none shrink-0 transition-inherit-all",
+    },
+
+    sizes: {
+        md: {
+            root: "gap-2 rounded-lg px-3.5 py-2.5 text-sm before:rounded-[7px] data-icon-only:p-3",
+            icon: "size-4",
+        },
+        lg: {
+            root: "gap-2.5 rounded-lg px-4 py-2.5 text-md before:rounded-[7px] data-icon-only:p-3",
+            icon: "size-5",
+        },
+    },
+
+    colors: {
+        gray: {
+            root: "bg-primary text-secondary shadow-xs-skeuomorphic 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-skeuomorphic 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-skeuomorphic 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-skeuomorphic 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,
+                    styles.sizes[size].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..8ba39ca
--- /dev/null
+++ b/src/components/base/checkbox/checkbox.tsx
@@ -0,0 +1,117 @@
+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-brand-solid",
+                isDisabled && "cursor-not-allowed opacity-50",
+                isDisabled && !(isSelected || isIndeterminate) && "bg-tertiary",
+                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",
+                )}
+            >
+                <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",
+                )}
+            >
+                <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(
+                    "relative 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-account-breadcrumb.tsx b/src/components/base/dropdown/dropdown-account-breadcrumb.tsx
new file mode 100644
index 0000000..6f3ae86
--- /dev/null
+++ b/src/components/base/dropdown/dropdown-account-breadcrumb.tsx
@@ -0,0 +1,89 @@
+import { useState } from "react";
+import { ChevronSelectorVertical } from "@untitledui/icons";
+import { Button as AriaButton, MenuItem as AriaMenuItem } from "react-aria-components";
+import { Avatar } from "@/components/base/avatar/avatar";
+import { Dropdown } from "@/components/base/dropdown/dropdown";
+import { cx } from "@/utils/cx";
+import { RadioButtonBase } from "../radio-buttons/radio-buttons";
+
+const accounts = [
+    {
+        id: "caitlyn",
+        name: "Caitlyn King",
+        email: "caitlyn@untitledui.com",
+        avatar: "https://www.untitledui.com/images/avatars/caitlyn-king?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 DropdownAccountBreadcrumb = () => {
+    const [selectedAccountKey, setSelectedAccountKey] = useState<string>("caitlyn");
+
+    const selectedAccount = accounts.find((account) => account.id === selectedAccountKey);
+
+    return (
+        <Dropdown.Root>
+            <AriaButton
+                className={({ isPressed, isFocusVisible }) =>
+                    cx(
+                        "flex cursor-pointer items-center gap-1.5 rounded-lg outline-0 outline-offset-2 outline-focus-ring",
+                        (isPressed || isFocusVisible) && "outline-2",
+                    )
+                }
+            >
+                <div className="flex rounded-lg bg-primary p-0.5 ring-[0.5px] ring-secondary ring-inset">
+                    <Avatar size="xs" src={selectedAccount?.avatar} className="shadow-md" contentClassName="rounded-md before:hidden" />
+                </div>
+                <span className="text-sm font-semibold text-primary">{selectedAccount?.name}</span>
+
+                <ChevronSelectorVertical className="size-3 shrink-0 stroke-3 text-fg-quaternary" />
+            </AriaButton>
+
+            <Dropdown.Popover className="w-62" placement="bottom left">
+                <Dropdown.Menu
+                    disallowEmptySelection
+                    selectionMode="single"
+                    selectedKeys={[selectedAccountKey]}
+                    onSelectionChange={(keys) => setSelectedAccountKey(Array.from(keys).join())}
+                    className="flex flex-col gap-1 px-1.5 py-1.5"
+                >
+                    {accounts.map((account) => (
+                        <AriaMenuItem
+                            id={account.id}
+                            key={account.name}
+                            textValue={account.name}
+                            className={(state) =>
+                                cx(
+                                    "relative w-full cursor-pointer rounded-md px-2 py-2 text-left outline-focus-ring transition duration-100 ease-linear hover:bg-primary_hover focus:z-10 focus-visible:outline-2 focus-visible:outline-offset-2",
+                                    state.isSelected && "bg-primary_hover",
+                                )
+                            }
+                        >
+                            {({ isSelected }) => (
+                                <>
+                                    <figure className="group flex min-w-0 flex-1 items-center gap-1.5">
+                                        <div className="flex rounded-[10px] bg-primary p-0.5 ring-[0.5px] ring-secondary ring-inset">
+                                            <Avatar size="sm" src={account.avatar} className="shadow-md" contentClassName="rounded-lg before:hidden" />
+                                        </div>
+                                        <figcaption className="min-w-0 flex-1">
+                                            <p className="text-sm font-semibold text-primary">{account.name}</p>
+                                            <p className="truncate text-sm text-tertiary">{account.email}</p>
+                                        </figcaption>
+                                    </figure>
+                                    <RadioButtonBase isSelected={isSelected} className="absolute top-2 right-2" />
+                                </>
+                            )}
+                        </AriaMenuItem>
+                    ))}
+                </Dropdown.Menu>
+            </Dropdown.Popover>
+        </Dropdown.Root>
+    );
+};
diff --git a/src/components/base/dropdown/dropdown-account-button.tsx b/src/components/base/dropdown/dropdown-account-button.tsx
new file mode 100644
index 0000000..4e1b00c
--- /dev/null
+++ b/src/components/base/dropdown/dropdown-account-button.tsx
@@ -0,0 +1,72 @@
+import { useState } from "react";
+import { ChevronDown, HelpCircle, LogOut01, Moon01, Plus, Settings01, User01 } from "@untitledui/icons";
+import type { Selection } from "react-aria-components";
+import { SubmenuTrigger } from "react-aria-components";
+import { Button } from "@/components/base/buttons/button";
+import { Dropdown } from "@/components/base/dropdown/dropdown";
+
+export const DropdownAccountButton = () => {
+    const [selectedAccount, setSelectedAccount] = useState<Selection>(new Set(["olivia"]));
+    const [selectedTheme, setSelectedTheme] = useState<Selection>(new Set(["light-mode"]));
+
+    return (
+        <Dropdown.Root>
+            <Button
+                size="sm"
+                className="group"
+                color="secondary"
+                iconTrailing={(props) => <ChevronDown data-icon="trailing" {...props} className="size-4! stroke-[2.25px]!" />}
+            >
+                Account
+            </Button>
+
+            <Dropdown.Popover className="w-60 rounded-b-xl bg-secondary_alt">
+                <Dropdown.Menu className="rounded-b-xl bg-primary ring-1 ring-secondary">
+                    <Dropdown.Item icon={User01} addon="⌘K->P">
+                        View profile
+                    </Dropdown.Item>
+                    <Dropdown.Item icon={Settings01} addon="⌘S">
+                        Settings
+                    </Dropdown.Item>
+                    <Dropdown.Section selectionMode="single" selectedKeys={selectedTheme} onSelectionChange={setSelectedTheme}>
+                        <Dropdown.Item id="dark-mode" icon={Moon01} selectionIndicator="toggle">
+                            Dark mode
+                        </Dropdown.Item>
+                    </Dropdown.Section>
+                    <SubmenuTrigger>
+                        <Dropdown.Item icon={HelpCircle}>Support</Dropdown.Item>
+
+                        <Dropdown.Popover placement="right top" offset={-6}>
+                            <Dropdown.Menu>
+                                <Dropdown.Item>Help center</Dropdown.Item>
+                                <Dropdown.Item>Contact support</Dropdown.Item>
+                                <Dropdown.Item>Send feedback</Dropdown.Item>
+                            </Dropdown.Menu>
+                        </Dropdown.Popover>
+                    </SubmenuTrigger>
+
+                    <Dropdown.Separator />
+
+                    <Dropdown.Section selectionMode="single" selectedKeys={selectedAccount} onSelectionChange={setSelectedAccount}>
+                        <Dropdown.SectionHeader className="px-4 pt-1.5 pb-0.5 text-xs font-semibold text-brand-secondary">
+                            Switch Account
+                        </Dropdown.SectionHeader>
+
+                        <Dropdown.Item id="olivia" avatarUrl="https://www.untitledui.com/images/avatars/olivia-rhye?fm=webp&q=80" selectionIndicator="radio">
+                            Olivia Rhye
+                        </Dropdown.Item>
+                        <Dropdown.Item id="sienna" avatarUrl="https://www.untitledui.com/images/avatars/sienna-hewitt?fm=webp&q=80" selectionIndicator="radio">
+                            Sienna Hewitt
+                        </Dropdown.Item>
+                    </Dropdown.Section>
+                    <Dropdown.Item icon={Plus}>Add account</Dropdown.Item>
+                </Dropdown.Menu>
+                <div className="flex flex-col gap-3 p-3">
+                    <Button size="xs" color="secondary" iconLeading={LogOut01} className="text-center">
+                        Sign out
+                    </Button>
+                </div>
+            </Dropdown.Popover>
+        </Dropdown.Root>
+    );
+};
diff --git a/src/components/base/dropdown/dropdown-account-card-md.tsx b/src/components/base/dropdown/dropdown-account-card-md.tsx
new file mode 100644
index 0000000..b2be3fa
--- /dev/null
+++ b/src/components/base/dropdown/dropdown-account-card-md.tsx
@@ -0,0 +1,97 @@
+import { useState } from "react";
+import { ChevronSelectorVertical, HelpCircle, LogOut01, Moon01, Plus, Settings01, User01 } from "@untitledui/icons";
+import type { Selection } from "react-aria-components";
+import { Button as AriaButton, SubmenuTrigger } from "react-aria-components";
+import { Dropdown } from "@/components/base/dropdown/dropdown";
+import { cx } from "@/utils/cx";
+import { AvatarLabelGroup } from "../avatar/avatar-label-group";
+
+export const DropdownAccountCardMD = () => {
+    const [selectedAccount, setSelectedAccount] = useState<Selection>(new Set(["untitledui"]));
+    const [selectedTheme, setSelectedTheme] = useState<Selection>(new Set(["light-mode"]));
+
+    return (
+        <Dropdown.Root>
+            <AriaButton
+                className={({ isPressed, isFocusVisible }) =>
+                    cx(
+                        "relative w-60 cursor-pointer rounded-lg bg-primary_alt p-2 text-left inset-ring-1 inset-ring-border-secondary outline-offset-2 outline-focus-ring",
+                        (isPressed || isFocusVisible) && "outline-2",
+                    )
+                }
+            >
+                <AvatarLabelGroup
+                    size="md"
+                    src="https://www.untitledui.com/images/avatars/olivia-rhye?fm=webp&q=80"
+                    status="online"
+                    title="Olivia Rhye"
+                    subtitle="olivia@untitledui.com"
+                />
+
+                <div className="absolute top-2 right-2 flex size-7 items-center justify-center rounded-md">
+                    <ChevronSelectorVertical className="size-4 shrink-0 stroke-[2.25px] text-fg-quaternary" />
+                </div>
+            </AriaButton>
+
+            <Dropdown.Popover className="w-60">
+                <div className="flex flex-col border-b border-secondary px-4 py-3">
+                    <p className="text-sm font-semibold text-primary">PRO account</p>
+                    <p className="text-sm text-tertiary">Renews 10 August 2028</p>
+                </div>
+                <Dropdown.Menu>
+                    <Dropdown.Item icon={User01} addon="⌘K->P">
+                        View profile
+                    </Dropdown.Item>
+                    <Dropdown.Item icon={Settings01} addon="⌘S">
+                        Settings
+                    </Dropdown.Item>
+                    <Dropdown.Section selectionMode="single" selectedKeys={selectedTheme} onSelectionChange={setSelectedTheme}>
+                        <Dropdown.Item id="dark-mode" icon={Moon01} selectionIndicator="toggle">
+                            Dark mode
+                        </Dropdown.Item>
+                    </Dropdown.Section>
+
+                    <SubmenuTrigger>
+                        <Dropdown.Item icon={HelpCircle}>Support</Dropdown.Item>
+
+                        <Dropdown.Popover placement="right top" offset={-6}>
+                            <Dropdown.Menu>
+                                <Dropdown.Item>Help center</Dropdown.Item>
+                                <Dropdown.Item>Contact support</Dropdown.Item>
+                                <Dropdown.Item>Send feedback</Dropdown.Item>
+                            </Dropdown.Menu>
+                        </Dropdown.Popover>
+                    </SubmenuTrigger>
+
+                    <Dropdown.Separator />
+
+                    <Dropdown.Section selectionMode="single" selectedKeys={selectedAccount} onSelectionChange={setSelectedAccount}>
+                        <Dropdown.SectionHeader className="px-4 pt-1.5 pb-0.5 text-xs font-semibold text-brand-secondary">Company</Dropdown.SectionHeader>
+
+                        <Dropdown.Item id="untitledui">Untitled UI</Dropdown.Item>
+                        <Dropdown.Item id="sisyphus">Sisyphus Ventures</Dropdown.Item>
+                    </Dropdown.Section>
+
+                    <Dropdown.Item icon={Plus}>New company</Dropdown.Item>
+
+                    <Dropdown.Separator />
+
+                    <SubmenuTrigger>
+                        <Dropdown.Item icon={LogOut01}>Sign out</Dropdown.Item>
+
+                        <Dropdown.Popover placement="right top" offset={-6}>
+                            <Dropdown.Menu>
+                                <Dropdown.Item>Current device</Dropdown.Item>
+                                <Dropdown.Item>All devices</Dropdown.Item>
+                            </Dropdown.Menu>
+                        </Dropdown.Popover>
+                    </SubmenuTrigger>
+                </Dropdown.Menu>
+                <div className="flex justify-between border-t border-secondary px-4 py-3">
+                    <span className="truncate text-sm text-quaternary">&copy; Untitled UI</span>
+                    <span className="text-sm text-quaternary">v12.6.8</span>
+                </div>
+            </Dropdown.Popover>
+        </Dropdown.Root>
+    );
+};
diff --git a/src/components/base/dropdown/dropdown-account-card-sm.tsx b/src/components/base/dropdown/dropdown-account-card-sm.tsx
new file mode 100644
index 0000000..665f0af
--- /dev/null
+++ b/src/components/base/dropdown/dropdown-account-card-sm.tsx
@@ -0,0 +1,99 @@
+import { useState } from "react";
+import { ChevronDown, HelpCircle, LogOut01, Moon01, Plus, Settings01, User01 } from "@untitledui/icons";
+import type { Selection } from "react-aria-components";
+import { Button as AriaButton, SubmenuTrigger } from "react-aria-components";
+import { Avatar } from "@/components/base/avatar/avatar";
+import { Dropdown } from "@/components/base/dropdown/dropdown";
+import { cx } from "@/utils/cx";
+
+export const DropdownAccountCardSM = () => {
+    const [selectedAccount, setSelectedAccount] = useState<Selection>(new Set(["olivia"]));
+    const [selectedTheme, setSelectedTheme] = useState<Selection>(new Set(["light-mode"]));
+
+    return (
+        <Dropdown.Root>
+            <AriaButton
+                className={({ isPressed, isFocused }) =>
+                    cx(
+                        "relative flex w-42 cursor-pointer items-center gap-2 rounded-lg bg-primary_alt p-1.5 text-left inset-ring-1 inset-ring-border-secondary outline-offset-2 outline-focus-ring",
+                        (isPressed || isFocused) && "outline-2",
+                    )
+                }
+            >
+                <Avatar border size="sm" src="https://www.untitledui.com/images/avatars/olivia-rhye?fm=webp&q=80" status="online" />
+
+                <p className="text-sm font-semibold text-primary">Olivia Rhye</p>
+
+                <div className="absolute top-2 right-2 flex size-7 items-center justify-center rounded-md">
+                    <ChevronDown className="size-4 shrink-0 stroke-[2.25px] text-fg-quaternary" />
+                </div>
+            </AriaButton>
+
+            <Dropdown.Popover className="w-60">
+                <div className="flex flex-col border-b border-secondary px-4 py-3">
+                    <p className="text-sm font-semibold text-primary">PRO account</p>
+                    <p className="text-sm text-tertiary">olivia@untitledui.com</p>
+                </div>
+                <Dropdown.Menu>
+                    <Dropdown.Item icon={User01} addon="⌘K->P">
+                        View profile
+                    </Dropdown.Item>
+                    <Dropdown.Item icon={Settings01} addon="⌘S">
+                        Settings
+                    </Dropdown.Item>
+                    <Dropdown.Section selectionMode="single" selectedKeys={selectedTheme} onSelectionChange={setSelectedTheme}>
+                        <Dropdown.Item id="dark-mode" icon={Moon01} selectionIndicator="toggle">
+                            Dark mode
+                        </Dropdown.Item>
+                    </Dropdown.Section>
+
+                    <SubmenuTrigger>
+                        <Dropdown.Item icon={HelpCircle}>Support</Dropdown.Item>
+
+                        <Dropdown.Popover placement="right top" offset={-6}>
+                            <Dropdown.Menu>
+                                <Dropdown.Item>Help center</Dropdown.Item>
+                                <Dropdown.Item>Contact support</Dropdown.Item>
+                                <Dropdown.Item>Send feedback</Dropdown.Item>
+                            </Dropdown.Menu>
+                        </Dropdown.Popover>
+                    </SubmenuTrigger>
+
+                    <Dropdown.Separator />
+
+                    <Dropdown.Section selectionMode="single" selectedKeys={selectedAccount} onSelectionChange={setSelectedAccount}>
+                        <Dropdown.SectionHeader className="px-4 pt-1.5 pb-0.5 text-xs font-semibold text-brand-secondary">
+                            Switch Account
+                        </Dropdown.SectionHeader>
+
+                        <Dropdown.Item id="olivia" avatarUrl="https://www.untitledui.com/images/avatars/olivia-rhye?fm=webp&q=80" selectionIndicator="radio">
+                            Olivia Rhye
+                        </Dropdown.Item>
+                        <Dropdown.Item id="sienna" avatarUrl="https://www.untitledui.com/images/avatars/sienna-hewitt?fm=webp&q=80" selectionIndicator="radio">
+                            Sienna Hewitt
+                        </Dropdown.Item>
+                    </Dropdown.Section>
+
+                    <Dropdown.Item icon={Plus}>Add account</Dropdown.Item>
+
+                    <Dropdown.Separator />
+
+                    <SubmenuTrigger>
+                        <Dropdown.Item icon={LogOut01}>Sign out</Dropdown.Item>
+
+                        <Dropdown.Popover placement="right top" offset={-6}>
+                            <Dropdown.Menu>
+                                <Dropdown.Item>Current device</Dropdown.Item>
+                                <Dropdown.Item>All devices</Dropdown.Item>
+                            </Dropdown.Menu>
+                        </Dropdown.Popover>
+                    </SubmenuTrigger>
+                </Dropdown.Menu>
+                <div className="flex justify-between border-t border-secondary px-4 py-3">
+                    <span className="truncate text-sm text-quaternary">&copy; Untitled UI</span>
+                    <span className="text-sm text-quaternary">v12.6.8</span>
+                </div>
+            </Dropdown.Popover>
+        </Dropdown.Root>
+    );
+};
diff --git a/src/components/base/dropdown/dropdown-account-card-xs.tsx b/src/components/base/dropdown/dropdown-account-card-xs.tsx
new file mode 100644
index 0000000..0708b0a
--- /dev/null
+++ b/src/components/base/dropdown/dropdown-account-card-xs.tsx
@@ -0,0 +1,76 @@
+import { useState } from "react";
+import { ChevronDown, LogOut01, Moon01, Plus, Settings01 } from "@untitledui/icons";
+import type { Selection } from "react-aria-components";
+import { Button as AriaButton, SubmenuTrigger } from "react-aria-components";
+import { Avatar } from "@/components/base/avatar/avatar";
+import { Dropdown } from "@/components/base/dropdown/dropdown";
+import { cx } from "@/utils/cx";
+
+export const DropdownAccountCardXS = () => {
+    const [selectedAccount, setSelectedAccount] = useState<Selection>(new Set(["olivia"]));
+    const [selectedTheme, setSelectedTheme] = useState<Selection>(new Set(["light-mode"]));
+
+    return (
+        <Dropdown.Root>
+            <AriaButton
+                className={({ isPressed, isFocused }) =>
+                    cx(
+                        "relative flex w-38 cursor-pointer items-center gap-1.5 rounded-lg bg-primary_alt p-2 text-left inset-ring-1 inset-ring-border-secondary outline-offset-2 outline-focus-ring",
+                        (isPressed || isFocused) && "outline-2",
+                    )
+                }
+            >
+                <Avatar size="xs" src="https://www.untitledui.com/images/avatars/olivia-rhye?fm=webp&q=80" className="size-5" />
+
+                <p className="text-sm font-semibold text-primary">Olivia Rhye</p>
+
+                <div className="absolute top-1 right-1 flex size-7 items-center justify-center rounded-md">
+                    <ChevronDown className="size-4 shrink-0 stroke-[2.25px] text-fg-quaternary" />
+                </div>
+            </AriaButton>
+
+            <Dropdown.Popover className="w-50">
+                <Dropdown.Menu>
+                    <Dropdown.Item icon={Settings01} addon="⌘S">
+                        Settings
+                    </Dropdown.Item>
+                    <Dropdown.Section selectionMode="single" selectedKeys={selectedTheme} onSelectionChange={setSelectedTheme}>
+                        <Dropdown.Item id="dark-mode" icon={Moon01} selectionIndicator="toggle">
+                            Dark mode
+                        </Dropdown.Item>
+                    </Dropdown.Section>
+
+                    <Dropdown.Separator />
+
+                    <Dropdown.Section selectionMode="single" selectedKeys={selectedAccount} onSelectionChange={setSelectedAccount}>
+                        <Dropdown.SectionHeader className="px-4 pt-1.5 pb-0.5 text-xs font-semibold text-brand-secondary">
+                            Switch Account
+                        </Dropdown.SectionHeader>
+
+                        <Dropdown.Item id="olivia" avatarUrl="https://www.untitledui.com/images/avatars/olivia-rhye?fm=webp&q=80" selectionIndicator="radio">
+                            Olivia Rhye
+                        </Dropdown.Item>
+                        <Dropdown.Item id="sienna" avatarUrl="https://www.untitledui.com/images/avatars/sienna-hewitt?fm=webp&q=80" selectionIndicator="radio">
+                            Sienna Hewitt
+                        </Dropdown.Item>
+                    </Dropdown.Section>
+
+                    <Dropdown.Item icon={Plus}>Add account</Dropdown.Item>
+
+                    <Dropdown.Separator />
+
+                    <SubmenuTrigger>
+                        <Dropdown.Item icon={LogOut01}>Sign out</Dropdown.Item>
+
+                        <Dropdown.Popover placement="right top" offset={-6}>
+                            <Dropdown.Menu>
+                                <Dropdown.Item>Current device</Dropdown.Item>
+                                <Dropdown.Item>All devices</Dropdown.Item>
+                            </Dropdown.Menu>
+                        </Dropdown.Popover>
+                    </SubmenuTrigger>
+                </Dropdown.Menu>
+            </Dropdown.Popover>
+        </Dropdown.Root>
+    );
+};
diff --git a/src/components/base/dropdown/dropdown-avatar.tsx b/src/components/base/dropdown/dropdown-avatar.tsx
new file mode 100644
index 0000000..282eaf8
--- /dev/null
+++ b/src/components/base/dropdown/dropdown-avatar.tsx
@@ -0,0 +1,78 @@
+import { useState } from "react";
+import { Container, HelpCircle, LayersTwo01, LogOut01, Moon01, Settings01, User01 } from "@untitledui/icons";
+import type { Selection } from "react-aria-components";
+import { Button as AriaButton, SubmenuTrigger } from "react-aria-components";
+import { Avatar } from "@/components/base/avatar/avatar";
+import { Button } from "@/components/base/buttons/button";
+import { Dropdown } from "@/components/base/dropdown/dropdown";
+import { cx } from "@/utils/cx";
+import { AvatarLabelGroup } from "../avatar/avatar-label-group";
+
+export const DropdownAvatar = () => {
+    const [selectedTheme, setSelectedTheme] = useState<Selection>(new Set(["light-mode"]));
+
+    return (
+        <Dropdown.Root>
+            <AriaButton
+                className={({ isPressed, isFocusVisible }) =>
+                    cx(
+                        "group relative inline-flex cursor-pointer rounded-full outline-offset-2 outline-focus-ring",
+                        (isPressed || isFocusVisible) && "outline-2",
+                    )
+                }
+            >
+                <Avatar alt="Olivia Rhye" src="https://www.untitledui.com/images/avatars/olivia-rhye?fm=webp&q=80" size="sm" />
+            </AriaButton>
+
+            <Dropdown.Popover className="w-60">
+                <div className="flex gap-3 border-b border-secondary p-3">
+                    <AvatarLabelGroup
+                        size="md"
+                        src="https://www.untitledui.com/images/avatars/olivia-rhye?fm=webp&q=80"
+                        status="online"
+                        title="Olivia Rhye"
+                        subtitle="olivia@untitledui.com"
+                    />
+                </div>
+                <Dropdown.Menu>
+                    <Dropdown.Item icon={User01} addon="⌘K->P">
+                        View profile
+                    </Dropdown.Item>
+                    <Dropdown.Item icon={Settings01} addon="⌘S">
+                        Settings
+                    </Dropdown.Item>
+                    <Dropdown.Section selectionMode="single" selectedKeys={selectedTheme} onSelectionChange={setSelectedTheme}>
+                        <Dropdown.Item id="dark-mode" icon={Moon01} selectionIndicator="toggle">
+                            Dark mode
+                        </Dropdown.Item>
+                    </Dropdown.Section>
+
+                    <Dropdown.Separator />
+
+                    <Dropdown.Item icon={LayersTwo01} addon="⌘S">
+                        Changelog
+                    </Dropdown.Item>
+
+                    <SubmenuTrigger>
+                        <Dropdown.Item icon={HelpCircle}>Support</Dropdown.Item>
+
+                        <Dropdown.Popover placement="right top" offset={-6}>
+                            <Dropdown.Menu>
+                                <Dropdown.Item>Help center</Dropdown.Item>
+                                <Dropdown.Item>Contact support</Dropdown.Item>
+                                <Dropdown.Item>Send feedback</Dropdown.Item>
+                            </Dropdown.Menu>
+                        </Dropdown.Popover>
+                    </SubmenuTrigger>
+
+                    <Dropdown.Item icon={Container}>API</Dropdown.Item>
+                </Dropdown.Menu>
+                <div className="flex flex-col gap-3 border-t border-secondary p-3">
+                    <Button size="xs" color="secondary" iconLeading={LogOut01} className="text-center">
+                        Sign out
+                    </Button>
+                </div>
+            </Dropdown.Popover>
+        </Dropdown.Root>
+    );
+};
diff --git a/src/components/base/dropdown/dropdown-button-advanced.tsx b/src/components/base/dropdown/dropdown-button-advanced.tsx
new file mode 100644
index 0000000..20ff990
--- /dev/null
+++ b/src/components/base/dropdown/dropdown-button-advanced.tsx
@@ -0,0 +1,115 @@
+import { useState } from "react";
+import {
+    ArrowNarrowLeft,
+    ArrowNarrowRight,
+    ChevronDown,
+    Code02,
+    Copy01,
+    Cube01,
+    Download01,
+    Edit04,
+    RefreshCcw02,
+    Scissors01,
+    Star01,
+} from "@untitledui/icons";
+import type { Selection } from "react-aria-components";
+import { SubmenuTrigger } from "react-aria-components";
+import { Button } from "@/components/base/buttons/button";
+import { Dropdown } from "@/components/base/dropdown/dropdown";
+import { cx } from "@/utils/cx";
+
+const StatusDot = ({ status }: { status: "online" | "offline" }) => (
+    <span className="mr-2 inline-flex shrink-0 items-center justify-center p-[5px]">
+        <span className={cx("inline-block size-1.5 rounded-full", status === "online" ? "bg-fg-success-secondary" : "bg-utility-neutral-300")} />
+    </span>
+);
+
+export const DropdownButtonAdvanced = () => {
+    const [viewOptions, setViewOptions] = useState<Selection>(new Set(["show-bookmarks"]));
+
+    return (
+        <Dropdown.Root>
+            <Button
+                size="sm"
+                className="group"
+                color="secondary"
+                iconTrailing={(props) => <ChevronDown data-icon="trailing" {...props} className="size-4! stroke-[2.25px]!" />}
+            >
+                Actions
+            </Button>
+
+            <Dropdown.Popover className="w-60">
+                <Dropdown.Menu selectionMode="none">
+                    <Dropdown.Section>
+                        <Dropdown.Item icon={ArrowNarrowLeft}>Back</Dropdown.Item>
+                        <Dropdown.Item icon={ArrowNarrowRight}>Forward</Dropdown.Item>
+                        <Dropdown.Item addon="⌘R" icon={RefreshCcw02}>
+                            Reload
+                        </Dropdown.Item>
+                        <Dropdown.Item icon={Edit04}>Edit page</Dropdown.Item>
+                        <Dropdown.Item icon={Star01}>Add to favorites</Dropdown.Item>
+                    </Dropdown.Section>
+
+                    <Dropdown.Separator />
+
+                    <Dropdown.Section selectionMode="multiple" selectedKeys={viewOptions} onSelectionChange={setViewOptions}>
+                        <Dropdown.Item id="show-bookmarks">Show bookmarks</Dropdown.Item>
+                        <Dropdown.Item id="show-urls">Show full URLs</Dropdown.Item>
+                    </Dropdown.Section>
+
+                    <Dropdown.Separator />
+
+                    <Dropdown.Section>
+                        <Dropdown.Item id="olivia" icon={() => <StatusDot status="online" />}>
+                            Olivia Rhye
+                        </Dropdown.Item>
+                        <Dropdown.Item id="sienna" icon={() => <StatusDot status="offline" />}>
+                            Sienna Hewitt
+                        </Dropdown.Item>
+                    </Dropdown.Section>
+
+                    <Dropdown.Separator />
+
+                    <Dropdown.Section>
+                        <SubmenuTrigger>
+                            <Dropdown.Item icon={Cube01}>More tools</Dropdown.Item>
+                            <Dropdown.Popover placement="right top" offset={-6} className="w-50">
+                                <Dropdown.Menu selectionMode="none">
+                                    <SubmenuTrigger>
+                                        <Dropdown.Item icon={Download01}>Save as</Dropdown.Item>
+                                        <Dropdown.Popover placement="right top" offset={-6} className="w-50">
+                                            <Dropdown.Menu selectionMode="none">
+                                                <Dropdown.Item>PDF</Dropdown.Item>
+                                                <Dropdown.Item>HTML</Dropdown.Item>
+                                                <Dropdown.Item>Markdown</Dropdown.Item>
+                                            </Dropdown.Menu>
+                                        </Dropdown.Popover>
+                                    </SubmenuTrigger>
+                                    <Dropdown.Item addon="⌘X" icon={Scissors01}>
+                                        Cut
+                                    </Dropdown.Item>
+                                    <Dropdown.Item addon="⌘C" icon={Copy01}>
+                                        Copy
+                                    </Dropdown.Item>
+
+                                    <Dropdown.Separator />
+
+                                    <SubmenuTrigger>
+                                        <Dropdown.Item icon={Code02}>Developer</Dropdown.Item>
+                                        <Dropdown.Popover placement="right top" offset={-6} className="w-50">
+                                            <Dropdown.Menu selectionMode="none">
+                                                <Dropdown.Item>View source</Dropdown.Item>
+                                                <Dropdown.Item>Developer tools</Dropdown.Item>
+                                                <Dropdown.Item>Inspect elements</Dropdown.Item>
+                                            </Dropdown.Menu>
+                                        </Dropdown.Popover>
+                                    </SubmenuTrigger>
+                                </Dropdown.Menu>
+                            </Dropdown.Popover>
+                        </SubmenuTrigger>
+                    </Dropdown.Section>
+                </Dropdown.Menu>
+            </Dropdown.Popover>
+        </Dropdown.Root>
+    );
+};
diff --git a/src/components/base/dropdown/dropdown-button-link.tsx b/src/components/base/dropdown/dropdown-button-link.tsx
new file mode 100644
index 0000000..29c4bea
--- /dev/null
+++ b/src/components/base/dropdown/dropdown-button-link.tsx
@@ -0,0 +1,51 @@
+import { useState } from "react";
+import { ChevronDown, Trash01 } from "@untitledui/icons";
+import { Button as AriaButton } from "react-aria-components";
+import { Dropdown } from "@/components/base/dropdown/dropdown";
+import { cx } from "@/utils/cx";
+
+const permissions = [
+    { id: "owner", label: "Owner" },
+    { id: "can-edit", label: "Can edit" },
+    { id: "can-view", label: "Can view" },
+];
+
+export const DropdownButtonLink = () => {
+    const [selectedPermission, setSelectedPermission] = useState<string>(permissions[1].id);
+
+    return (
+        <Dropdown.Root>
+            <AriaButton
+                className={({ isPressed, isFocusVisible }) =>
+                    cx(
+                        "flex cursor-pointer items-center gap-1 rounded text-sm font-semibold text-tertiary outline-0 outline-offset-2 outline-focus-ring",
+                        (isPressed || isFocusVisible) && "outline-2",
+                    )
+                }
+            >
+                {permissions.find((permission) => permission.id === selectedPermission.toString())?.label}
+                <ChevronDown className="size-3 shrink-0 stroke-3 text-fg-quaternary" />
+            </AriaButton>
+
+            <Dropdown.Popover className="w-40">
+                <Dropdown.Menu>
+                    <Dropdown.Section
+                        selectionMode="single"
+                        selectedKeys={[selectedPermission]}
+                        onSelectionChange={(keys) => setSelectedPermission(typeof keys === "string" ? keys : (keys.keys().toArray()[0] as string))}
+                    >
+                        {permissions.map((permission) => (
+                            <Dropdown.Item key={permission.id} id={permission.id}>
+                                {permission.label}
+                            </Dropdown.Item>
+                        ))}
+                    </Dropdown.Section>
+                    <Dropdown.Separator />
+                    <Dropdown.Section>
+                        <Dropdown.Item icon={Trash01}>Delete</Dropdown.Item>
+                    </Dropdown.Section>
+                </Dropdown.Menu>
+            </Dropdown.Popover>
+        </Dropdown.Root>
+    );
+};
diff --git a/src/components/base/dropdown/dropdown-button-simple.tsx b/src/components/base/dropdown/dropdown-button-simple.tsx
new file mode 100644
index 0000000..509c519
--- /dev/null
+++ b/src/components/base/dropdown/dropdown-button-simple.tsx
@@ -0,0 +1,41 @@
+import { ChevronDown } from "@untitledui/icons";
+import { SubmenuTrigger } from "react-aria-components";
+import { Button } from "@/components/base/buttons/button";
+import { Dropdown } from "@/components/base/dropdown/dropdown";
+
+export const DropdownButtonSimple = () => (
+    <Dropdown.Root>
+        <Button size="sm" color="secondary" iconTrailing={ChevronDown} className="group *:data-icon:size-4 *:data-icon:stroke-[2.25px]!">
+            Account
+        </Button>
+
+        <Dropdown.Popover className="w-54">
+            <Dropdown.Menu>
+                <Dropdown.Section>
+                    <Dropdown.Item addon="⌘X">Cut</Dropdown.Item>
+                    <Dropdown.Item addon="⌘C">Copy</Dropdown.Item>
+                    <Dropdown.Item addon="⌘V">Paste</Dropdown.Item>
+                </Dropdown.Section>
+                <Dropdown.Separator />
+                <Dropdown.Section>
+                    <Dropdown.Item>Edit</Dropdown.Item>
+                    <Dropdown.Item>Duplicate</Dropdown.Item>
+                    <Dropdown.Item>Delete</Dropdown.Item>
+                </Dropdown.Section>
+                <Dropdown.Separator />
+                <Dropdown.Section>
+                    <SubmenuTrigger>
+                        <Dropdown.Item>View details</Dropdown.Item>
+                        <Dropdown.Popover placement="right top" offset={-6} className="w-50">
+                            <Dropdown.Menu>
+                                <Dropdown.Item>Share</Dropdown.Item>
+                                <Dropdown.Item>Save as</Dropdown.Item>
+                                <Dropdown.Item>Archive</Dropdown.Item>
+                            </Dropdown.Menu>
+                        </Dropdown.Popover>
+                    </SubmenuTrigger>
+                </Dropdown.Section>
+            </Dropdown.Menu>
+        </Dropdown.Popover>
+    </Dropdown.Root>
+);
diff --git a/src/components/base/dropdown/dropdown-icon-advanced.tsx b/src/components/base/dropdown/dropdown-icon-advanced.tsx
new file mode 100644
index 0000000..eb9ec61
--- /dev/null
+++ b/src/components/base/dropdown/dropdown-icon-advanced.tsx
@@ -0,0 +1,96 @@
+import { useState } from "react";
+import { ArrowNarrowLeft, ArrowNarrowRight, Code02, Copy01, Cube01, Download01, Edit04, RefreshCcw02, Scissors01, Star01 } from "@untitledui/icons";
+import type { Selection } from "react-aria-components";
+import { SubmenuTrigger } from "react-aria-components";
+import { Dropdown } from "@/components/base/dropdown/dropdown";
+import { cx } from "@/utils/cx";
+
+const StatusDot = ({ status }: { status: "online" | "offline" }) => (
+    <span className="mr-2 inline-flex shrink-0 items-center justify-center p-[5px]">
+        <span className={cx("inline-block size-1.5 rounded-full", status === "online" ? "bg-fg-success-secondary" : "bg-utility-neutral-300")} />
+    </span>
+);
+
+export const DropdownIconAdvanced = () => {
+    const [viewOptions, setViewOptions] = useState<Selection>(new Set(["show-bookmarks"]));
+
+    return (
+        <Dropdown.Root>
+            <Dropdown.DotsButton />
+
+            <Dropdown.Popover className="w-60">
+                <Dropdown.Menu selectionMode="none">
+                    <Dropdown.Section>
+                        <Dropdown.Item icon={ArrowNarrowLeft}>Back</Dropdown.Item>
+                        <Dropdown.Item icon={ArrowNarrowRight}>Forward</Dropdown.Item>
+                        <Dropdown.Item addon="⌘R" icon={RefreshCcw02}>
+                            Reload
+                        </Dropdown.Item>
+                    </Dropdown.Section>
+                    <Dropdown.Section>
+                        <Dropdown.Item icon={Edit04}>Edit page</Dropdown.Item>
+                        <Dropdown.Item icon={Star01}>Add to favorites</Dropdown.Item>
+                    </Dropdown.Section>
+
+                    <Dropdown.Separator />
+
+                    <Dropdown.Section selectionMode="multiple" selectedKeys={viewOptions} onSelectionChange={setViewOptions}>
+                        <Dropdown.Item id="show-bookmarks">Show bookmarks</Dropdown.Item>
+                        <Dropdown.Item id="show-urls">Show full URLs</Dropdown.Item>
+                    </Dropdown.Section>
+
+                    <Dropdown.Separator />
+
+                    <Dropdown.Section>
+                        <Dropdown.Item id="olivia" icon={() => <StatusDot status="online" />}>
+                            Olivia Rhye
+                        </Dropdown.Item>
+                        <Dropdown.Item id="sienna" icon={() => <StatusDot status="offline" />}>
+                            Sienna Hewitt
+                        </Dropdown.Item>
+                    </Dropdown.Section>
+                    <Dropdown.Separator />
+
+                    <Dropdown.Section>
+                        <SubmenuTrigger>
+                            <Dropdown.Item icon={Cube01}>More tools</Dropdown.Item>
+                            <Dropdown.Popover placement="right top" offset={-6} className="w-50">
+                                <Dropdown.Menu selectionMode="none">
+                                    <SubmenuTrigger>
+                                        <Dropdown.Item icon={Download01}>Save as</Dropdown.Item>
+                                        <Dropdown.Popover placement="right top" offset={-6} className="w-50">
+                                            <Dropdown.Menu selectionMode="none">
+                                                <Dropdown.Item>PDF</Dropdown.Item>
+                                                <Dropdown.Item>HTML</Dropdown.Item>
+                                                <Dropdown.Item>Markdown</Dropdown.Item>
+                                            </Dropdown.Menu>
+                                        </Dropdown.Popover>
+                                    </SubmenuTrigger>
+                                    <Dropdown.Item addon="⌘X" icon={Scissors01}>
+                                        Cut
+                                    </Dropdown.Item>
+                                    <Dropdown.Item addon="⌘C" icon={Copy01}>
+                                        Copy
+                                    </Dropdown.Item>
+
+                                    <Dropdown.Separator />
+
+                                    <SubmenuTrigger>
+                                        <Dropdown.Item icon={Code02}>Developer</Dropdown.Item>
+                                        <Dropdown.Popover placement="right top" offset={-6} className="w-50">
+                                            <Dropdown.Menu selectionMode="none">
+                                                <Dropdown.Item>View source</Dropdown.Item>
+                                                <Dropdown.Item>Developer tools</Dropdown.Item>
+                                                <Dropdown.Item>Inspect elements</Dropdown.Item>
+                                            </Dropdown.Menu>
+                                        </Dropdown.Popover>
+                                    </SubmenuTrigger>
+                                </Dropdown.Menu>
+                            </Dropdown.Popover>
+                        </SubmenuTrigger>
+                    </Dropdown.Section>
+                </Dropdown.Menu>
+            </Dropdown.Popover>
+        </Dropdown.Root>
+    );
+};
diff --git a/src/components/base/dropdown/dropdown-icon-simple.tsx b/src/components/base/dropdown/dropdown-icon-simple.tsx
new file mode 100644
index 0000000..c6dd4c1
--- /dev/null
+++ b/src/components/base/dropdown/dropdown-icon-simple.tsx
@@ -0,0 +1,37 @@
+import { SubmenuTrigger } from "react-aria-components";
+import { Dropdown } from "@/components/base/dropdown/dropdown";
+
+export const DropdownIconSimple = () => (
+    <Dropdown.Root>
+        <Dropdown.DotsButton />
+
+        <Dropdown.Popover className="w-54">
+            <Dropdown.Menu>
+                <Dropdown.Section>
+                    <Dropdown.Item addon="⌘X">Cut</Dropdown.Item>
+                    <Dropdown.Item addon="⌘C">Copy</Dropdown.Item>
+                    <Dropdown.Item addon="⌘V">Paste</Dropdown.Item>
+                </Dropdown.Section>
+                <Dropdown.Separator />
+                <Dropdown.Section>
+                    <Dropdown.Item>Edit</Dropdown.Item>
+                    <Dropdown.Item>Duplicate</Dropdown.Item>
+                    <Dropdown.Item>Delete</Dropdown.Item>
+                </Dropdown.Section>
+                <Dropdown.Separator />
+                <Dropdown.Section>
+                    <SubmenuTrigger>
+                        <Dropdown.Item>View details</Dropdown.Item>
+                        <Dropdown.Popover placement="right top" offset={-6} className="w-50">
+                            <Dropdown.Menu>
+                                <Dropdown.Item>Share</Dropdown.Item>
+                                <Dropdown.Item>Save as</Dropdown.Item>
+                                <Dropdown.Item>Archive</Dropdown.Item>
+                            </Dropdown.Menu>
+                        </Dropdown.Popover>
+                    </SubmenuTrigger>
+                </Dropdown.Section>
+            </Dropdown.Menu>
+        </Dropdown.Popover>
+    </Dropdown.Root>
+);
diff --git a/src/components/base/dropdown/dropdown-integration.tsx b/src/components/base/dropdown/dropdown-integration.tsx
new file mode 100644
index 0000000..7b6845c
--- /dev/null
+++ b/src/components/base/dropdown/dropdown-integration.tsx
@@ -0,0 +1,59 @@
+import { ChevronDown, Copy01, TerminalSquare } from "@untitledui/icons";
+import { Button } from "@/components/base/buttons/button";
+import { Dropdown } from "@/components/base/dropdown/dropdown";
+import {
+    BoltIcon,
+    ChatGPTIcon,
+    ClaudeIcon,
+    CursorIcon,
+    FigmaIcon,
+    GeminiIcon,
+    GitHubIcon,
+    LovableIcon,
+    PerplexityIcon,
+    V0Icon,
+} from "@/components/foundations/integration-icons";
+
+export const DropdownIntegration = () => {
+    return (
+        <Dropdown.Root>
+            <Button
+                size="sm"
+                className="group"
+                color="secondary"
+                iconTrailing={(props) => <ChevronDown data-icon="trailing" {...props} className="size-4! stroke-[2.25px]!" />}
+            >
+                Copy
+            </Button>
+
+            <Dropdown.Popover className="w-54">
+                <Dropdown.Menu selectionMode="none">
+                    <Dropdown.Section>
+                        <Dropdown.Item icon={TerminalSquare}>View as markdown</Dropdown.Item>
+                        <Dropdown.Item icon={Copy01}>Copy as markdown</Dropdown.Item>
+                    </Dropdown.Section>
+
+                    <Dropdown.Separator />
+
+                    <Dropdown.Section>
+                        <Dropdown.Item icon={() => <V0Icon grayscale className="mr-2 size-4 shrink-0" />}>Open in v0</Dropdown.Item>
+                        <Dropdown.Item icon={() => <ClaudeIcon grayscale className="mr-2 size-4 shrink-0" />}>Open in Claude</Dropdown.Item>
+                        <Dropdown.Item icon={() => <BoltIcon grayscale className="mr-2 size-4 shrink-0" />}>Open in Bolt</Dropdown.Item>
+                        <Dropdown.Item icon={() => <LovableIcon grayscale className="mr-2 size-4 shrink-0" />}>Open in Lovable</Dropdown.Item>
+                        <Dropdown.Item icon={() => <CursorIcon grayscale className="mr-2 size-4 shrink-0" />}>Open in Cursor</Dropdown.Item>
+                        <Dropdown.Item icon={() => <ChatGPTIcon grayscale className="mr-2 size-4 shrink-0" />}>Open in ChatGPT</Dropdown.Item>
+                        <Dropdown.Item icon={() => <PerplexityIcon grayscale className="mr-2 size-4 shrink-0" />}>Open in Perplexity</Dropdown.Item>
+                        <Dropdown.Item icon={() => <GeminiIcon grayscale className="mr-2 size-4 shrink-0" />}>Open in Gemini</Dropdown.Item>
+                    </Dropdown.Section>
+
+                    <Dropdown.Separator />
+
+                    <Dropdown.Section>
+                        <Dropdown.Item icon={() => <FigmaIcon grayscale className="mr-2 size-4 shrink-0" />}>Open in Figma</Dropdown.Item>
+                        <Dropdown.Item icon={() => <GitHubIcon grayscale className="mr-2 size-4 shrink-0" />}>Create GitHub Gist</Dropdown.Item>
+                    </Dropdown.Section>
+                </Dropdown.Menu>
+            </Dropdown.Popover>
+        </Dropdown.Root>
+    );
+};
diff --git a/src/components/base/dropdown/dropdown-search-advanced.tsx b/src/components/base/dropdown/dropdown-search-advanced.tsx
new file mode 100644
index 0000000..5ba96ca
--- /dev/null
+++ b/src/components/base/dropdown/dropdown-search-advanced.tsx
@@ -0,0 +1,93 @@
+import { useState } from "react";
+import { ChevronDown, Plus, SearchLg } from "@untitledui/icons";
+import type { Selection } from "react-aria-components";
+import { Autocomplete, SearchField, SubmenuTrigger, useFilter } from "react-aria-components";
+import { Button } from "@/components/base/buttons/button";
+import { Dropdown } from "@/components/base/dropdown/dropdown";
+import { InputBase } from "../input/input";
+
+export const DropdownSearchAdvanced = () => {
+    const [selectedUsers, setSelectedUsers] = useState<Selection>(new Set(["untitledui", "shutterframe"]));
+    let { contains } = useFilter({ sensitivity: "base" });
+
+    return (
+        <Dropdown.Root>
+            <Button
+                size="sm"
+                className="group"
+                color="secondary"
+                iconTrailing={(props) => <ChevronDown data-icon="trailing" {...props} className="size-4! stroke-[2.25px]!" />}
+            >
+                Manage access
+            </Button>
+
+            <Dropdown.Popover className="w-60">
+                <Autocomplete filter={contains}>
+                    <SearchField className="flex gap-3 border-b border-secondary p-3">
+                        <InputBase size="md" placeholder="Search" icon={SearchLg} />
+                    </SearchField>
+                    <Dropdown.Menu selectionMode="multiple" selectedKeys={selectedUsers} onSelectionChange={setSelectedUsers}>
+                        <SubmenuTrigger>
+                            <Dropdown.Item id="untitledui" textValue="Olivia Rhye" selectionIndicator="checkbox">
+                                Untitled UI
+                            </Dropdown.Item>
+                            <Dropdown.Popover placement="right top" offset={-6} className="w-50">
+                                <Dropdown.Menu selectionMode="multiple">
+                                    <Dropdown.Item
+                                        id="olivia"
+                                        selectionIndicator="checkbox"
+                                        avatarUrl="https://www.untitledui.com/images/avatars/olivia-rhye?fm=webp&q=80"
+                                    >
+                                        Olivia Rhye
+                                    </Dropdown.Item>
+                                    <Dropdown.Item
+                                        id="phoenix"
+                                        selectionIndicator="checkbox"
+                                        avatarUrl="https://www.untitledui.com/images/avatars/phoenix-baker?fm=webp&q=80"
+                                    >
+                                        Phoenix Baker
+                                    </Dropdown.Item>
+                                    <Dropdown.Item
+                                        id="lana"
+                                        selectionIndicator="checkbox"
+                                        avatarUrl="https://www.untitledui.com/images/avatars/lana-steiner?fm=webp&q=80"
+                                    >
+                                        Lana Steiner
+                                    </Dropdown.Item>
+                                    <Dropdown.Item
+                                        id="demi"
+                                        selectionIndicator="checkbox"
+                                        avatarUrl="https://www.untitledui.com/images/avatars/demi-wilkinson?fm=webp&q=80"
+                                    >
+                                        Demi Wilkinson
+                                    </Dropdown.Item>
+                                </Dropdown.Menu>
+                            </Dropdown.Popover>
+                        </SubmenuTrigger>
+
+                        <Dropdown.Item id="shutterframe" textValue="Phoenix Baker" selectionIndicator="checkbox">
+                            Shutterframe
+                        </Dropdown.Item>
+                        <Dropdown.Item id="warpspeed" textValue="Lana Steiner" selectionIndicator="checkbox">
+                            Warpspeed
+                        </Dropdown.Item>
+                        <Dropdown.Item id="contrastai" textValue="Demi Wilkinson" selectionIndicator="checkbox">
+                            ContrastAI
+                        </Dropdown.Item>
+                        <Dropdown.Item id="launchsimple" textValue="Candice Wu" selectionIndicator="checkbox">
+                            LaunchSimple
+                        </Dropdown.Item>
+                        <Dropdown.Item id="elasticware" textValue="Natali Craig" selectionIndicator="checkbox">
+                            Elasticware
+                        </Dropdown.Item>
+                    </Dropdown.Menu>
+                    <div className="flex flex-col gap-3 border-t border-secondary p-3">
+                        <Button size="xs" color="secondary" iconLeading={Plus}>
+                            Create team
+                        </Button>
+                    </div>
+                </Autocomplete>
+            </Dropdown.Popover>
+        </Dropdown.Root>
+    );
+};
diff --git a/src/components/base/dropdown/dropdown-search-simple.tsx b/src/components/base/dropdown/dropdown-search-simple.tsx
new file mode 100644
index 0000000..71cb6f5
--- /dev/null
+++ b/src/components/base/dropdown/dropdown-search-simple.tsx
@@ -0,0 +1,62 @@
+import { useState } from "react";
+import { ChevronDown, SearchLg } from "@untitledui/icons";
+import type { Selection } from "react-aria-components";
+import { Autocomplete, SearchField, useFilter } from "react-aria-components";
+import { Button } from "@/components/base/buttons/button";
+import { Dropdown } from "@/components/base/dropdown/dropdown";
+import { InputBase } from "../input/input";
+
+export const DropdownSearchSimple = () => {
+    const [selectedUsers, setSelectedUsers] = useState<Selection>(new Set(["olivia", "phoenix"]));
+    let { contains } = useFilter({ sensitivity: "base" });
+
+    return (
+        <Dropdown.Root>
+            <Button
+                size="sm"
+                className="group"
+                color="secondary"
+                iconTrailing={(props) => <ChevronDown data-icon="trailing" {...props} className="size-4! stroke-[2.25px]!" />}
+            >
+                Manage access
+            </Button>
+
+            <Dropdown.Popover className="w-60">
+                <Autocomplete filter={contains}>
+                    <SearchField className="flex gap-3 border-b border-secondary p-3">
+                        <InputBase size="md" placeholder="Search" icon={SearchLg} />
+                    </SearchField>
+                    <Dropdown.Menu selectionMode="multiple" selectedKeys={selectedUsers} onSelectionChange={setSelectedUsers}>
+                        <Dropdown.Item id="olivia" textValue="Olivia Rhye" selectionIndicator="checkbox">
+                            Olivia Rhye
+                        </Dropdown.Item>
+                        <Dropdown.Item id="phoenix" textValue="Phoenix Baker" selectionIndicator="checkbox">
+                            Phoenix Baker
+                        </Dropdown.Item>
+                        <Dropdown.Item id="lana" textValue="Lana Steiner" selectionIndicator="checkbox">
+                            Lana Steiner
+                        </Dropdown.Item>
+                        <Dropdown.Item id="demi" textValue="Demi Wilkinson" selectionIndicator="checkbox">
+                            Demi Wilkinson
+                        </Dropdown.Item>
+                        <Dropdown.Item id="candice" textValue="Candice Wu" selectionIndicator="checkbox">
+                            Candice Wu
+                        </Dropdown.Item>
+                        <Dropdown.Item id="natali" textValue="Natali Craig" selectionIndicator="checkbox">
+                            Natali Craig
+                        </Dropdown.Item>
+                        <Dropdown.Item id="drew" textValue="Drew Cano" selectionIndicator="checkbox">
+                            Drew Cano
+                        </Dropdown.Item>
+                        <Dropdown.Item id="orlando" textValue="Orlando Diggs" selectionIndicator="checkbox">
+                            Orlando Diggs
+                        </Dropdown.Item>
+                        <Dropdown.Item id="andi" textValue="Andi Lane" selectionIndicator="checkbox">
+                            Andi Lane
+                        </Dropdown.Item>
+                    </Dropdown.Menu>
+                </Autocomplete>
+            </Dropdown.Popover>
+        </Dropdown.Root>
+    );
+};
diff --git a/src/components/base/dropdown/dropdown.tsx b/src/components/base/dropdown/dropdown.tsx
new file mode 100644
index 0000000..646fe41
--- /dev/null
+++ b/src/components/base/dropdown/dropdown.tsx
@@ -0,0 +1,192 @@
+import { type FC, type RefAttributes, useCallback } from "react";
+import { Check, ChevronRight, DotsVertical } from "@untitledui/icons";
+import type {
+    ButtonProps as AriaButtonProps,
+    MenuItemProps as AriaMenuItemProps,
+    MenuProps as AriaMenuProps,
+    PopoverProps as AriaPopoverProps,
+    SeparatorProps as AriaSeparatorProps,
+    MenuItemRenderProps,
+} 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";
+import { Avatar } from "../avatar/avatar";
+import { CheckboxBase } from "../checkbox/checkbox";
+import { RadioButtonBase } from "../radio-buttons/radio-buttons";
+import { ToggleBase } from "../toggle/toggle";
+
+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 }>;
+    /** Avatar URL to be displayed on the left side of the item. */
+    avatarUrl?: string;
+    /** The selection indicator to be displayed on the item. */
+    selectionIndicator?: "checkmark" | "checkbox" | "radio" | "toggle" | "none";
+}
+
+const DropdownItem = ({ label, children, addon, icon: Icon, avatarUrl, unstyled, selectionIndicator = "checkmark", ...props }: DropdownItemProps) => {
+    const SelectionIndicator = useCallback(
+        (state: MenuItemRenderProps & { className?: string }) => {
+            if (selectionIndicator === "checkmark") {
+                return (
+                    <Check
+                        aria-hidden="true"
+                        className={cx("size-4 shrink-0 stroke-[2.25px] text-fg-brand-primary", !state.isSelected && "invisible", state.className)}
+                    />
+                );
+            }
+            if (selectionIndicator === "checkbox") {
+                return (
+                    <CheckboxBase
+                        isSelected={state.isSelected && !state.hasSubmenu}
+                        isIndeterminate={state.isSelected && state.hasSubmenu}
+                        size="sm"
+                        className={cx("shrink-0", state.className)}
+                    />
+                );
+            }
+            if (selectionIndicator === "radio") {
+                return <RadioButtonBase isSelected={state.isSelected} className={cx("shrink-0", state.className)} />;
+            }
+            if (selectionIndicator === "toggle") {
+                return <ToggleBase slim size="sm" isSelected={state.isSelected} className={cx("shrink-0", state.className)} />;
+            }
+            return null;
+        },
+        [selectionIndicator],
+    );
+
+    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 opacity-50",
+                    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",
+                        state.hasSubmenu && "pr-1.5",
+                    )}
+                >
+                    {state.selectionMode !== "none" && !avatarUrl && !Icon && <SelectionIndicator {...state} className="mr-2" />}
+
+                    {avatarUrl && (
+                        <div className="mr-2 flex size-4 items-center justify-center">
+                            <Avatar aria-hidden="true" size="xs" src={avatarUrl} alt={label} className="size-5" />
+                        </div>
+                    )}
+
+                    {Icon && <Icon aria-hidden="true" className="mr-2 size-4 shrink-0 stroke-[2.25px] text-fg-quaternary" />}
+
+                    <span className={cx("grow truncate text-sm font-semibold text-secondary", state.isFocused && "text-secondary_hover")}>
+                        {label || (typeof children === "function" ? children(state) : children)}
+                    </span>
+
+                    {addon && <span className="ml-1 shrink-0 pr-1 text-xs font-medium text-quaternary">{addon}</span>}
+
+                    {state.selectionMode !== "none" && (avatarUrl || Icon) && <SelectionIndicator {...state} className="ml-1" />}
+
+                    {state.hasSubmenu && <ChevronRight aria-hidden="true" className="ml-auto size-4 shrink-0 stroke-[2.25px] text-fg-quaternary" />}
+                </div>
+            )}
+        </AriaMenuItem>
+    );
+};
+
+interface DropdownMenuProps<T extends object> extends AriaMenuProps<T> {}
+
+const DropdownMenu = <T extends object>(props: DropdownMenuProps<T>) => {
+    return (
+        <AriaMenu
+            {...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/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..089a83d
--- /dev/null
+++ b/src/components/base/input/hint-text.tsx
@@ -0,0 +1,36 @@
+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>;
+    size?: "sm" | "md";
+    children: ReactNode;
+}
+
+export const HintText = ({ isInvalid, className, size = "md", ...props }: HintTextProps) => {
+    return (
+        <AriaText
+            {...props}
+            slot={isInvalid ? "errorMessage" : "description"}
+            className={cx(
+                "text-sm text-tertiary",
+
+                // Size
+                size === "sm" && "text-xs",
+                "in-data-[input-size=sm]:text-xs",
+
+                // Invalid state
+                isInvalid && "text-error-primary",
+                "group-invalid:text-error-primary",
+
+                className,
+            )}
+        />
+    );
+};
+
+HintText.displayName = "HintText";
diff --git a/src/components/base/input/input-date.tsx b/src/components/base/input/input-date.tsx
new file mode 100644
index 0000000..96e6739
--- /dev/null
+++ b/src/components/base/input/input-date.tsx
@@ -0,0 +1,263 @@
+import { type ComponentType, type HTMLAttributes, type ReactNode, type Ref, createContext, useContext } from "react";
+import { HelpCircle, InfoCircle } from "@untitledui/icons";
+import type { DateInputProps as AriaDateInputProps } from "react-aria-components";
+import {
+    DateField as AriaDateField,
+    type DateFieldProps as AriaDateFieldProps,
+    DateInput as AriaDateInput,
+    DateSegment as AriaDateSegment,
+    Group as AriaGroup,
+    type DateValue,
+} from "react-aria-components";
+import { cx, sortCx } from "@/utils/cx";
+import { Tooltip, TooltipTrigger } from "../tooltip/tooltip";
+import { HintText } from "./hint-text";
+import { Label } from "./label";
+
+const DateFieldContext = createContext<{
+    size?: "sm" | "md" | "lg";
+    wrapperClassName?: string;
+    iconClassName?: string;
+    tooltipClassName?: string;
+    inputClassName?: string;
+}>({});
+
+export interface InputDateBaseProps extends Omit<AriaDateInputProps, "children"> {
+    /** Tooltip message on hover. */
+    tooltip?: string;
+    /**
+     * Input size.
+     * @default "sm"
+     */
+    size?: "sm" | "md" | "lg";
+    /** Placeholder text. */
+    placeholder?: string;
+    /** Class name for the icon. */
+    iconClassName?: 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>>;
+    isInvalid?: boolean;
+    isDisabled?: boolean;
+}
+
+export const InputDateBase = ({
+    tooltip,
+    shortcut,
+    groupRef,
+    size = "md",
+    isInvalid,
+    isDisabled,
+    icon: Icon,
+    wrapperClassName,
+    tooltipClassName,
+    iconClassName,
+    ...inputProps
+}: Omit<InputDateBaseProps, "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(DateFieldContext);
+
+    const inputSize = context?.size || size;
+
+    const sizes = sortCx({
+        sm: {
+            root: cx("px-3 py-2 text-sm", hasTrailingIcon && "pr-9", hasLeadingIcon && "pl-8.5"),
+            iconLeading: "left-3 size-4 stroke-[2.25px]",
+            iconTrailing: "right-3",
+            shortcut: "pr-2.5",
+        },
+        md: {
+            root: cx("px-3 py-2 text-md", hasTrailingIcon && "pr-9", hasLeadingIcon && "pl-10"),
+            iconLeading: "left-3 size-5",
+            iconTrailing: "right-3",
+            shortcut: "pr-2.5",
+        },
+        lg: {
+            root: cx("px-3.5 py-2.5 text-md", hasTrailingIcon && "pr-9.5", hasLeadingIcon && "pl-10.5"),
+            iconLeading: "left-3.5 size-5",
+            iconTrailing: "right-3.5",
+            shortcut: "pr-3",
+        },
+    });
+
+    return (
+        <AriaGroup
+            {...{ isDisabled, isInvalid }}
+            ref={groupRef}
+            className={({ isFocusWithin, isDisabled, isInvalid }) =>
+                cx(
+                    "group/input 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 opacity-50 in-data-input-wrapper:opacity-100",
+                    "group-disabled:cursor-not-allowed group-disabled:opacity-50 in-data-input-wrapper:group-disabled:opacity-100",
+
+                    // 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 text-fg-quaternary", sizes[inputSize].iconLeading, context?.iconClassName, iconClassName)} />
+            )}
+
+            {/* Input field */}
+            <AriaDateInput {...inputProps} className={cx("flex w-full", sizes[size].root, typeof inputProps.className === "string" && inputProps.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>
+
+            {/* Tooltip and help icon */}
+            {tooltip && (
+                <Tooltip title={tooltip} placement="top">
+                    <TooltipTrigger
+                        className={cx(
+                            "absolute cursor-pointer text-fg-quaternary transition duration-200 group-invalid/input:hidden hover:text-fg-quaternary_hover focus:text-fg-quaternary_hover",
+                            sizes[inputSize].iconTrailing,
+                            context?.tooltipClassName,
+                            tooltipClassName,
+                        )}
+                    >
+                        <HelpCircle className="size-4 stroke-[2.25px]" />
+                    </TooltipTrigger>
+                </Tooltip>
+            )}
+
+            {/* Invalid icon */}
+            <InfoCircle
+                className={cx(
+                    "pointer-events-none absolute hidden size-4 stroke-[2.25px] text-fg-error-secondary group-invalid/input:block",
+                    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
+                        aria-hidden="true"
+                        className="pointer-events-none rounded px-1 py-px text-xs font-medium text-quaternary ring-1 ring-secondary select-none ring-inset"
+                    >
+                        {typeof shortcut === "string" ? shortcut : "⌘K"}
+                    </span>
+                </div>
+            )}
+        </AriaGroup>
+    );
+};
+
+interface InputProps
+    extends
+        AriaDateFieldProps<DateValue>,
+        Pick<
+            InputDateBaseProps,
+            "ref" | "size" | "placeholder" | "icon" | "shortcut" | "tooltip" | "groupRef" | "iconClassName" | "wrapperClassName" | "tooltipClassName"
+        > {
+    /** Label text for the input */
+    label?: string;
+    /** Helper text displayed below the input */
+    hint?: ReactNode;
+    /** Whether to hide required indicator from label */
+    hideRequiredIndicator?: boolean;
+    /** Class name for the input. */
+    inputClassName?: string;
+}
+
+export const InputDate = ({
+    size = "md",
+    placeholder,
+    icon: Icon,
+    label,
+    hint,
+    shortcut,
+    hideRequiredIndicator,
+    className,
+    ref,
+    groupRef,
+    tooltip,
+    iconClassName,
+    inputClassName,
+    wrapperClassName,
+    tooltipClassName,
+    ...props
+}: InputProps) => {
+    return (
+        <AriaDateField
+            {...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, state }) => (
+                <>
+                    {label && (
+                        <Label isRequired={hideRequiredIndicator ? !hideRequiredIndicator : state.isRequired} isInvalid={isInvalid}>
+                            {label}
+                        </Label>
+                    )}
+
+                    <InputDateBase
+                        className={inputClassName}
+                        {...{
+                            ref,
+                            groupRef,
+                            size,
+                            placeholder,
+                            icon: Icon,
+                            shortcut,
+                            iconClassName,
+                            wrapperClassName,
+                            tooltipClassName,
+                            tooltip,
+                        }}
+                    />
+
+                    {hint && (
+                        <HintText isInvalid={isInvalid} className={cx(size === "sm" && "text-xs")}>
+                            {hint}
+                        </HintText>
+                    )}
+                </>
+            )}
+        </AriaDateField>
+    );
+};
diff --git a/src/components/base/input/input-file.tsx b/src/components/base/input/input-file.tsx
new file mode 100644
index 0000000..a96dbd5
--- /dev/null
+++ b/src/components/base/input/input-file.tsx
@@ -0,0 +1,141 @@
+import type { ReactNode } from "react";
+import { useRef, useState } from "react";
+import { Button } from "@/components/base/buttons/button";
+import { InputBase } from "@/components/base/input/input";
+import { InputGroup } from "@/components/base/input/input-group";
+import { cx } from "@/utils/cx";
+
+interface InputFileProps {
+    /**
+     * The size of the input.
+     * @default "sm"
+     */
+    size?: "sm" | "md" | "lg";
+    /** Label text for the input. */
+    label?: string;
+    /** Helper text displayed below the input. */
+    hint?: ReactNode;
+    /** Placeholder text displayed when no file is selected. */
+    placeholder?: string;
+    /** Whether the input is disabled. */
+    isDisabled?: boolean;
+    /** Whether the input is invalid. */
+    isInvalid?: boolean;
+    /** Whether the input is required. */
+    isRequired?: boolean;
+    /** Whether to hide the required indicator from the label. */
+    hideRequiredIndicator?: boolean;
+    /** Specifies what mime type of files are allowed. */
+    acceptedFileTypes?: string[];
+    /** Whether multiple files can be selected. */
+    allowsMultiple?: boolean;
+    /** Whether the file is currently uploading. */
+    isLoading?: boolean;
+    /** Handler when a user selects files. */
+    onChange?: (files: FileList | null) => void;
+    /** The class name for the root element. */
+    className?: string;
+    /**
+     * The text of the upload button.
+     * @default "Upload"
+     */
+    buttonText?: string;
+}
+
+export const InputFile = ({
+    size = "sm",
+    label,
+    hint,
+    placeholder = "Choose a file",
+    isDisabled,
+    isInvalid,
+    isRequired,
+    hideRequiredIndicator,
+    isLoading,
+    acceptedFileTypes,
+    allowsMultiple,
+    onChange,
+    className,
+    buttonText = "Upload",
+}: InputFileProps) => {
+    const inputRef = useRef<HTMLInputElement>(null);
+    const [fileNames, setFileNames] = useState("");
+
+    const handleClick = () => {
+        if (inputRef.current?.value) {
+            inputRef.current.value = "";
+        }
+        inputRef.current?.click();
+    };
+
+    const handleChange = () => {
+        const files = inputRef.current?.files ?? null;
+        if (files && files.length > 0) {
+            setFileNames(
+                Array.from(files)
+                    .map((f) => f.name)
+                    .join(", "),
+            );
+        } else {
+            setFileNames("");
+        }
+        onChange?.(files);
+    };
+
+    return (
+        <>
+            <InputGroup
+                size={size}
+                label={label}
+                hint={hint}
+                isDisabled={isDisabled}
+                isInvalid={isInvalid}
+                isRequired={isRequired}
+                hideRequiredIndicator={hideRequiredIndicator}
+                className={className}
+                trailingAddon={
+                    <Button size={size} color="secondary" onClick={handleClick} isDisabled={isDisabled}>
+                        {buttonText}
+                    </Button>
+                }
+            >
+                <div className="relative flex min-w-0 flex-1">
+                    <InputBase
+                        placeholder={placeholder}
+                        value={fileNames}
+                        readOnly
+                        inputClassName={cx("cursor-pointer", isLoading && "pr-9")}
+                        wrapperClassName="cursor-pointer"
+                        onClick={handleClick}
+                    />
+                    {isLoading && (
+                        <svg fill="none" viewBox="0 0 16 16" className="pointer-events-none absolute top-1/2 right-3 z-20 size-4 -translate-y-1/2 text-fg-quaternary">
+                            <circle className="stroke-current opacity-30" cx="8" cy="8" r="6.5" strokeWidth="1.5" />
+                            <circle
+                                className="origin-center animate-spin stroke-current"
+                                cx="8"
+                                cy="8"
+                                r="6.5"
+                                strokeWidth="1.5"
+                                strokeDasharray="10 40"
+                                strokeLinecap="round"
+                            />
+                        </svg>
+                    )}
+                </div>
+            </InputGroup>
+
+            <input
+                ref={inputRef}
+                type="file"
+                className="hidden"
+                disabled={isDisabled}
+                accept={acceptedFileTypes?.toString()}
+                multiple={allowsMultiple}
+                onChange={handleChange}
+            />
+        </>
+    );
+};
+
+InputFile.displayName = "InputFile";
diff --git a/src/components/base/input/input-group.tsx b/src/components/base/input/input-group.tsx
new file mode 100644
index 0000000..2c1c85f
--- /dev/null
+++ b/src/components/base/input/input-group.tsx
@@ -0,0 +1,155 @@
+import { type HTMLAttributes, type ReactNode } from "react";
+import { HintText } from "@/components/base/input/hint-text";
+import type { TextFieldProps } 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";
+    /** Indicates that the prefix is disabled. */
+    isDisabled?: boolean;
+}
+
+export const InputPrefix = ({ children, ...props }: InputPrefixProps) => (
+    <span
+        {...props}
+        className={cx(
+            "flex 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",
+            // Default size styles
+            "px-3 py-2 text-md",
+            // Small size styles
+            "in-data-input-wrapper:in-data-[input-size=sm]:px-3 in-data-input-wrapper:in-data-[input-size=sm]:py-2 in-data-input-wrapper:in-data-[input-size=sm]:text-sm",
+            // Large size styles
+            "in-data-input-wrapper:in-data-[input-size=lg]:py-2.5 in-data-input-wrapper:in-data-[input-size=lg]:pr-3 in-data-input-wrapper:in-data-[input-size=lg]:pl-3.5",
+
+            props.className,
+        )}
+    >
+        {children}
+    </span>
+);
+
+// `${string}ClassName` is used to omit any className prop that ends with a `ClassName` suffix
+interface InputGroupProps extends TextFieldProps {
+    /** 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;
+    /** Label text for the input */
+    label?: string;
+    /** Helper text displayed below the input */
+    hint?: ReactNode;
+    /** Whether to hide the required indicator from the label. */
+    hideRequiredIndicator?: boolean;
+}
+
+export const InputGroup = ({ size = "md", prefix, leadingAddon, trailingAddon, label, hint, hideRequiredIndicator, 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]:pr-9 group-has-[&>select]:pl-2",
+                hasTrailing && (prefix ? "group-has-[&>select]:pr-6 group-has-[&>select]:pl-0" : "group-has-[&>select]:pr-6 group-has-[&>select]:pl-3"),
+            ),
+            leadingText: "pr-1.5 pl-3",
+        },
+        md: {
+            input: cx(
+                // Apply padding styles when select element is passed as a child
+                hasLeading && "group-has-[&>select]:pr-9 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: "pr-2 pl-3",
+        },
+        lg: {
+            input: cx(
+                // Apply padding styles when select element is passed as a child
+                hasLeading && "group-has-[&>select]:pr-9.5 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: "pr-2 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",
+            )}
+            {...props}
+        >
+            {({ isDisabled, isInvalid, isRequired }) => (
+                <>
+                    {label && <Label isRequired={hideRequiredIndicator ? false : isRequired}>{label}</Label>}
+
+                    <div
+                        // Used to apply styles based on the size of the input group within children
+                        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",
+                            isInvalid && "has-[&>select]:ring-border-error_subtle has-[&>select]:has-[input:focus]:ring-border-error",
+                        )}
+                    >
+                        {leadingAddon && (
+                            <section data-leading={hasLeading || undefined} className="group-disabled:opacity-50">
+                                {leadingAddon}
+                            </section>
+                        )}
+
+                        {prefix && (
+                            <span className={cx("my-auto grow group-disabled:opacity-50", paddings[size].leadingText)}>
+                                <p className={cx("text-md text-tertiary", size === "sm" && "text-sm")}>{prefix}</p>
+                            </span>
+                        )}
+
+                        {children}
+
+                        {trailingAddon && (
+                            <section data-trailing={hasTrailing || undefined} className="group-disabled:opacity-50">
+                                {trailingAddon}
+                            </section>
+                        )}
+                    </div>
+
+                    {hint && (
+                        <HintText isInvalid={isInvalid} className={cx(size === "sm" && "text-xs")}>
+                            {hint}
+                        </HintText>
+                    )}
+                </>
+            )}
+        </TextField>
+    );
+};
+
+InputGroup.Prefix = InputPrefix;
+
+InputGroup.displayName = "InputGroup";
diff --git a/src/components/base/input/input-number.tsx b/src/components/base/input/input-number.tsx
new file mode 100644
index 0000000..d9d53d3
--- /dev/null
+++ b/src/components/base/input/input-number.tsx
@@ -0,0 +1,195 @@
+import { type ReactNode, type Ref, createContext, useContext } from "react";
+import { ChevronDown, ChevronUp, Minus, Plus } from "@untitledui/icons";
+import {
+    Button as AriaButton,
+    type DateFieldProps as AriaDateFieldProps,
+    Group as AriaGroup,
+    Input as AriaInput,
+    type InputProps as AriaInputProps,
+    NumberField as AriaNumberField,
+    type NumberFieldProps as AriaNumberFieldProps,
+    type DateValue,
+} from "react-aria-components";
+import { cx } from "@/utils/cx";
+import { Button } from "../buttons/button";
+import { HintText } from "./hint-text";
+import { Label } from "./label";
+
+const NumberFieldContext = createContext<{
+    size?: "sm" | "md" | "lg";
+    wrapperClassName?: string;
+    iconClassName?: string;
+    tooltipClassName?: string;
+    inputClassName?: string;
+}>({});
+
+const styles = {
+    sm: "px-3 py-2 text-sm",
+    md: "px-3 py-2 text-md",
+    lg: "px-3.5 py-2.5 text-md",
+};
+
+export interface InputNumberBaseProps extends AriaNumberFieldProps {
+    /**
+     * Input size.
+     * @default "sm"
+     */
+    size?: "sm" | "md" | "lg";
+    /** Placeholder text. */
+    placeholder?: string;
+    /** Class name for the input. */
+    inputClassName?: string;
+    /** Class name for the input wrapper. */
+    wrapperClassName?: string;
+    ref?: Ref<HTMLInputElement>;
+    groupRef?: Ref<HTMLDivElement>;
+    /** Orientation of buttons. */
+    orientation?: "horizontal" | "vertical";
+}
+
+export const InputNumberBase = ({
+    ref,
+    groupRef,
+    size = "md",
+    isInvalid,
+    isDisabled,
+    placeholder,
+    wrapperClassName,
+    inputClassName,
+    orientation = "vertical",
+    // Omit this prop to avoid invalid HTML attribute warning
+    isRequired: _isRequired,
+    ...inputProps
+}: Omit<InputNumberBaseProps, "label" | "hint">) => {
+    // If the input is inside a `TextFieldContext`, use its context to simplify applying styles
+    const context = useContext(NumberFieldContext);
+
+    const inputSize = context?.size || size;
+
+    return (
+        <AriaGroup
+            {...{ isDisabled, isInvalid }}
+            ref={groupRef}
+            className={({ isFocusWithin, isDisabled, isInvalid }) =>
+                cx(
+                    "relative flex w-full flex-row items-stretch rounded-lg bg-primary shadow-xs outline-1 -outline-offset-1 outline-primary transition-all duration-100 ease-linear",
+
+                    isFocusWithin && !isDisabled && "outline-2 -outline-offset-2 outline-brand",
+
+                    // Disabled state styles
+                    isDisabled && "cursor-not-allowed opacity-50 in-data-input-wrapper:opacity-100",
+                    "group-disabled:cursor-not-allowed group-disabled:opacity-50 in-data-input-wrapper:group-disabled:opacity-100",
+
+                    // Invalid state styles
+                    isInvalid && "outline-error_subtle",
+                    "group-invalid:outline-error_subtle",
+
+                    // Invalid state with focus-within styles
+                    isInvalid && isFocusWithin && "outline-2 -outline-offset-2 outline-error",
+                    isFocusWithin && "group-invalid:outline-2 group-invalid:-outline-offset-2 group-invalid:outline-error",
+
+                    context?.wrapperClassName,
+                    wrapperClassName,
+                )
+            }
+        >
+            {orientation === "horizontal" && (
+                <Button size={size} iconLeading={Minus} slot="decrement" color="tertiary" className="static h-full rounded-r-none" />
+            )}
+
+            {/* Input field */}
+            <AriaInput
+                {...(inputProps as AriaInputProps)}
+                ref={ref}
+                placeholder={placeholder}
+                className={cx(
+                    "m-0 w-full bg-transparent text-primary ring-0 outline-hidden placeholder:text-placeholder autofill:rounded-lg autofill:text-primary disabled:cursor-not-allowed",
+                    styles[inputSize],
+                    context?.inputClassName,
+                    inputClassName,
+                )}
+            />
+
+            {orientation === "horizontal" && (
+                <Button size={size} iconLeading={Plus} slot="increment" color="tertiary" className="static h-full rounded-l-none" />
+            )}
+
+            {orientation === "vertical" && (
+                <div className={cx("flex w-7 shrink-0 flex-col border-l border-primary", size === "lg" && "w-7.5")}>
+                    <AriaButton
+                        slot="increment"
+                        className="flex flex-1 cursor-pointer items-center justify-center text-fg-quaternary outline-brand transition duration-100 ease-linear hover:bg-primary_hover hover:text-fg-quaternary_hover disabled:cursor-not-allowed disabled:opacity-50"
+                    >
+                        <ChevronUp className={cx("size-3 stroke-3", size === "lg" && "size-3.5 stroke-[2.57px]")} />
+                    </AriaButton>
+                    <AriaButton
+                        slot="decrement"
+                        className="flex flex-1 cursor-pointer items-center justify-center border-t border-primary text-fg-quaternary outline-brand transition duration-100 ease-linear hover:bg-primary_hover hover:text-fg-quaternary_hover disabled:cursor-not-allowed disabled:opacity-50"
+                    >
+                        <ChevronDown className={cx("size-3 stroke-3", size === "lg" && "size-3.5 stroke-[2.57px]")} />
+                    </AriaButton>
+                </div>
+            )}
+        </AriaGroup>
+    );
+};
+
+interface InputProps extends InputNumberBaseProps, Pick<AriaDateFieldProps<DateValue>, "granularity"> {
+    /** Label text for the input */
+    label?: string;
+    /** Helper text displayed below the input */
+    hint?: ReactNode;
+    hideRequiredIndicator?: boolean;
+}
+
+export const InputNumber = ({
+    size = "md",
+    placeholder,
+    label,
+    hint,
+    hideRequiredIndicator,
+    className,
+    ref,
+    groupRef,
+    inputClassName,
+    wrapperClassName,
+    orientation = "vertical",
+    ...props
+}: InputProps) => {
+    return (
+        <AriaNumberField
+            {...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} isInvalid={isInvalid}>
+                            {label}
+                        </Label>
+                    )}
+
+                    <InputNumberBase
+                        {...{
+                            ref,
+                            groupRef,
+                            size,
+                            placeholder,
+                            inputClassName,
+                            wrapperClassName,
+                            orientation,
+                        }}
+                    />
+
+                    {hint && (
+                        <HintText isInvalid={isInvalid} className={cx(size === "sm" && "text-xs")}>
+                            {hint}
+                        </HintText>
+                    )}
+                </>
+            )}
+        </AriaNumberField>
+    );
+};
diff --git a/src/components/base/input/input-tags-outer.tsx b/src/components/base/input/input-tags-outer.tsx
new file mode 100644
index 0000000..285b2c2
--- /dev/null
+++ b/src/components/base/input/input-tags-outer.tsx
@@ -0,0 +1,211 @@
+import type { Key, KeyboardEvent, ReactNode } from "react";
+import { useCallback, useRef, useState } from "react";
+import { HintText } from "@/components/base/input/hint-text";
+import { InputBase } from "@/components/base/input/input";
+import { Label } from "@/components/base/input/label";
+import { Tag, TagGroup, TagList } from "@/components/base/tags/tags";
+import { cx } from "@/utils/cx";
+
+interface TagEntry {
+    id: string;
+    label: string;
+}
+
+export interface InputTagsOuterProps {
+    /** Label text displayed above the input. */
+    label?: string;
+    /** Helper text displayed below the tags. */
+    hint?: ReactNode;
+    /** Tooltip message displayed via a help icon inside the input. */
+    tooltip?: string;
+    /**
+     * Input size variant.
+     * @default "sm"
+     */
+    size?: "sm" | "md" | "lg";
+    /** Placeholder text for the input field. */
+    placeholder?: string;
+    /** Whether the field is required. */
+    isRequired?: boolean;
+    /** Whether the field is disabled. */
+    isDisabled?: boolean;
+    /** Whether the field is in an invalid/error state. */
+    isInvalid?: boolean;
+    /**
+     * Whether to allow duplicate tag values.
+     * @default false
+     */
+    allowDuplicates?: boolean;
+    /** Maximum number of tags allowed. */
+    maxTags?: number;
+    /** Controlled value: array of tag strings. */
+    value?: string[];
+    /** Default tags for uncontrolled mode. */
+    defaultValue?: string[];
+    /** Called when the tags array changes. */
+    onChange?: (tags: string[]) => void;
+    /** Called when a tag is added. */
+    onTagAdded?: (tag: string) => void;
+    /** Called when a tag is removed. */
+    onTagRemoved?: (tag: string) => void;
+    /**
+     * Validation function for new tags.
+     * Return `true` to accept, `false` to reject.
+     */
+    validate?: (value: string) => boolean;
+    /** Optional className for the outer container. */
+    className?: string;
+    /** Whether to hide the required indicator from the label. */
+    hideRequiredIndicator?: boolean;
+}
+
+export const InputTagsOuter = ({
+    size = "md",
+    label,
+    hint,
+    tooltip,
+    placeholder,
+    isRequired,
+    isDisabled,
+    isInvalid,
+    allowDuplicates = false,
+    maxTags,
+    value,
+    defaultValue,
+    onChange,
+    onTagAdded,
+    onTagRemoved,
+    validate,
+    className,
+    hideRequiredIndicator,
+}: InputTagsOuterProps) => {
+    const isControlled = value !== undefined;
+    const idCounter = useRef(0);
+    const nextId = () => `tag-${idCounter.current++}`;
+
+    const [inputValue, setInputValue] = useState("");
+
+    const [internalEntries, setInternalEntries] = useState<TagEntry[]>(() => (defaultValue ?? []).map((label) => ({ id: nextId(), label })));
+
+    const prevControlledValue = useRef<string[]>([]);
+    const controlledEntries = useRef<TagEntry[]>([]);
+
+    const entries = (() => {
+        if (!isControlled) return internalEntries;
+
+        const prev = prevControlledValue.current;
+        if (prev === value) return controlledEntries.current;
+
+        const oldEntries = controlledEntries.current;
+        const newEntries: TagEntry[] = [];
+        const usedOldIndices = new Set<number>();
+
+        for (const label of value) {
+            const oldIndex = oldEntries.findIndex((e, i) => e.label === label && !usedOldIndices.has(i));
+            if (oldIndex !== -1) {
+                usedOldIndices.add(oldIndex);
+                newEntries.push(oldEntries[oldIndex]);
+            } else {
+                newEntries.push({ id: nextId(), label });
+            }
+        }
+
+        prevControlledValue.current = value;
+        controlledEntries.current = newEntries;
+        return newEntries;
+    })();
+
+    const tags = entries.map((e) => e.label);
+
+    const addTag = useCallback(
+        (text: string) => {
+            const trimmed = text.trim();
+            if (!trimmed) return false;
+            if (!allowDuplicates && tags.includes(trimmed)) return false;
+            if (maxTags && tags.length >= maxTags) return false;
+            if (validate && !validate(trimmed)) return false;
+
+            const newEntry: TagEntry = { id: nextId(), label: trimmed };
+            const newEntries = [...entries, newEntry];
+
+            if (!isControlled) {
+                setInternalEntries(newEntries);
+            }
+            onChange?.(newEntries.map((e) => e.label));
+            onTagAdded?.(trimmed);
+            return true;
+        },
+        [tags, entries, isControlled, allowDuplicates, maxTags, validate, onChange, onTagAdded],
+    );
+
+    const removeTag = useCallback(
+        (id: string) => {
+            const entry = entries.find((e) => e.id === id);
+            if (!entry) return;
+
+            const newEntries = entries.filter((e) => e.id !== id);
+
+            if (!isControlled) {
+                setInternalEntries(newEntries);
+            }
+            onChange?.(newEntries.map((e) => e.label));
+            onTagRemoved?.(entry.label);
+        },
+        [entries, isControlled, onChange, onTagRemoved],
+    );
+
+    const handleRemove = useCallback(
+        (keys: Set<Key>) => {
+            for (const key of keys) {
+                removeTag(key.toString());
+            }
+        },
+        [removeTag],
+    );
+
+    const handleInputKeyDown = (event: KeyboardEvent<HTMLInputElement>) => {
+        if (event.key === "Enter") {
+            event.preventDefault();
+            if (addTag(inputValue)) {
+                setInputValue("");
+            }
+        }
+    };
+
+    return (
+        <div className={cx("flex flex-col", size === "sm" ? "gap-1.5" : "gap-2", className)}>
+            <div className="flex flex-col gap-1.5">
+                {label && <Label isRequired={hideRequiredIndicator ? false : isRequired}>{label}</Label>}
+
+                <InputBase
+                    size={size}
+                    tooltip={tooltip}
+                    placeholder={placeholder}
+                    isInvalid={isInvalid}
+                    isDisabled={isDisabled}
+                    value={inputValue}
+                    onChange={(e) => setInputValue(e.currentTarget.value)}
+                    onKeyDown={handleInputKeyDown}
+                />
+            </div>
+
+            {entries.length > 0 && (
+                <TagGroup label={label || "Tags"} size={size === "lg" ? "md" : size} onRemove={handleRemove}>
+                    <TagList className="flex flex-wrap gap-1.5 focus:outline-hidden" items={entries}>
+                        {(item) => (
+                            <Tag id={item.id} isDisabled={isDisabled}>
+                                {item.label}
+                            </Tag>
+                        )}
+                    </TagList>
+                </TagGroup>
+            )}
+
+            {hint && tags.length === 0 && (
+                <HintText isInvalid={isInvalid} className={cx(size === "sm" && "text-xs")}>
+                    {hint}
+                </HintText>
+            )}
+        </div>
+    );
+};
diff --git a/src/components/base/input/input-tags.tsx b/src/components/base/input/input-tags.tsx
new file mode 100644
index 0000000..aeb413d
--- /dev/null
+++ b/src/components/base/input/input-tags.tsx
@@ -0,0 +1,321 @@
+import type { Key, KeyboardEvent, ReactNode } from "react";
+import { useCallback, useRef, useState } from "react";
+import { HelpCircle, InfoCircle } from "@untitledui/icons";
+import { Group as AriaGroup, Input as AriaInput } from "react-aria-components";
+import { HintText } from "@/components/base/input/hint-text";
+import { Label } from "@/components/base/input/label";
+import { Tag, TagGroup, TagList } from "@/components/base/tags/tags";
+import { Tooltip, TooltipTrigger } from "@/components/base/tooltip/tooltip";
+import { cx, sortCx } from "@/utils/cx";
+
+interface TagEntry {
+    id: number;
+    label: string;
+}
+
+export interface InputTagsProps {
+    /** Label text displayed above the input. */
+    label?: string;
+    /** Helper text displayed below the input. */
+    hint?: ReactNode;
+    /** Tooltip message displayed via a help icon inside the input. */
+    tooltip?: string;
+    /**
+     * Input size variant.
+     * @default "sm"
+     */
+    size?: "sm" | "md" | "lg";
+    /** Placeholder text for the input field. */
+    placeholder?: string;
+    /** Whether the field is required. */
+    isRequired?: boolean;
+    /** Whether the field is disabled. */
+    isDisabled?: boolean;
+    /** Whether the field is in an invalid/error state. */
+    isInvalid?: boolean;
+    /**
+     * Whether to allow duplicate tag values.
+     * @default false
+     */
+    allowDuplicates?: boolean;
+    /** Maximum number of tags allowed. */
+    maxTags?: number;
+    /** Controlled value: array of tag strings. */
+    value?: string[];
+    /** Default tags for uncontrolled mode. */
+    defaultValue?: string[];
+    /** Called when the tags array changes. */
+    onChange?: (tags: string[]) => void;
+    /** Called when a tag is added. */
+    onTagAdded?: (tag: string) => void;
+    /** Called when a tag is removed. */
+    onTagRemoved?: (tag: string) => void;
+    /**
+     * Validation function for new tags.
+     * Return `true` to accept, `false` to reject.
+     */
+    validate?: (value: string) => boolean;
+    /** Optional className for the outer container. */
+    className?: string;
+    /** Whether to hide the required indicator from the label. */
+    hideRequiredIndicator?: boolean;
+}
+
+export const InputTags = ({
+    size = "md",
+    label,
+    hint,
+    tooltip,
+    placeholder,
+    isRequired,
+    isDisabled,
+    isInvalid,
+    allowDuplicates = false,
+    maxTags,
+    value,
+    defaultValue,
+    onChange,
+    onTagAdded,
+    onTagRemoved,
+    validate,
+    className,
+    hideRequiredIndicator,
+}: InputTagsProps) => {
+    const isControlled = value !== undefined;
+    const idCounter = useRef(0);
+    const nextId = () => idCounter.current++;
+
+    const inputRef = useRef<HTMLInputElement>(null);
+    const tagGroupRef = useRef<HTMLDivElement>(null);
+    const [inputValue, setInputValue] = useState("");
+
+    const [internalEntries, setInternalEntries] = useState<TagEntry[]>(() => (defaultValue ?? []).map((label) => ({ id: nextId(), label })));
+
+    // For controlled mode, maintain stable IDs across renders so React keys don't shift
+    const prevControlledValue = useRef<string[]>([]);
+    const controlledEntries = useRef<TagEntry[]>([]);
+
+    const entries = (() => {
+        if (!isControlled) return internalEntries;
+
+        const prev = prevControlledValue.current;
+        if (prev === value) return controlledEntries.current;
+
+        // Reconcile: reuse existing IDs for tags that haven't changed position,
+        // assign new IDs only for genuinely new entries
+        const oldEntries = controlledEntries.current;
+        const newEntries: TagEntry[] = [];
+        const usedOldIndices = new Set<number>();
+
+        for (const label of value) {
+            // Try to find a matching old entry (same label, not yet used)
+            const oldIndex = oldEntries.findIndex((e, i) => e.label === label && !usedOldIndices.has(i));
+            if (oldIndex !== -1) {
+                usedOldIndices.add(oldIndex);
+                newEntries.push(oldEntries[oldIndex]);
+            } else {
+                newEntries.push({ id: nextId(), label });
+            }
+        }
+
+        prevControlledValue.current = value;
+        controlledEntries.current = newEntries;
+        return newEntries;
+    })();
+
+    const tags = entries.map((e) => e.label);
+
+    const addTag = useCallback(
+        (text: string) => {
+            const trimmed = text.trim();
+            if (!trimmed) return false;
+            if (!allowDuplicates && tags.includes(trimmed)) return false;
+            if (maxTags && tags.length >= maxTags) return false;
+            if (validate && !validate(trimmed)) return false;
+
+            const newEntry: TagEntry = { id: nextId(), label: trimmed };
+            const newEntries = [...entries, newEntry];
+
+            if (!isControlled) {
+                setInternalEntries(newEntries);
+            }
+            onChange?.(newEntries.map((e) => e.label));
+            onTagAdded?.(trimmed);
+            return true;
+        },
+        [tags, entries, isControlled, allowDuplicates, maxTags, validate, onChange, onTagAdded],
+    );
+
+    const removeTag = useCallback(
+        (id: number) => {
+            const entry = entries.find((e) => e.id === id);
+            if (!entry) return;
+
+            const newEntries = entries.filter((e) => e.id !== id);
+
+            if (!isControlled) {
+                setInternalEntries(newEntries);
+            }
+            onChange?.(newEntries.map((e) => e.label));
+            onTagRemoved?.(entry.label);
+        },
+        [entries, isControlled, onChange, onTagRemoved],
+    );
+
+    const handleRemove = useCallback(
+        (keys: Set<Key>) => {
+            for (const key of keys) {
+                removeTag(key as number);
+            }
+            if (entries.length - keys.size <= 0) {
+                setTimeout(() => inputRef.current?.focus(), 0);
+            }
+        },
+        [removeTag, entries.length],
+    );
+
+    const focusLastTag = useCallback(() => {
+        const tagEls = tagGroupRef.current?.querySelectorAll<HTMLElement>('[role="row"]');
+        if (tagEls && tagEls.length > 0) {
+            tagEls[tagEls.length - 1].focus();
+        }
+    }, []);
+
+    const handleInputKeyDown = (event: KeyboardEvent<HTMLInputElement>) => {
+        const input = event.currentTarget;
+        const isCaretAtStart = input.selectionStart === 0 && input.selectionEnd === 0;
+
+        switch (event.key) {
+            case "Enter":
+                event.preventDefault();
+                if (addTag(inputValue)) {
+                    setInputValue("");
+                }
+                break;
+            case "Backspace":
+                if (isCaretAtStart && inputValue === "") {
+                    focusLastTag();
+                }
+                break;
+            case "ArrowLeft":
+                if (isCaretAtStart) {
+                    focusLastTag();
+                }
+                break;
+        }
+    };
+
+    const handleTagGroupKeyDown = (event: KeyboardEvent<HTMLDivElement>) => {
+        if (event.key === "ArrowRight") {
+            const tagEls = tagGroupRef.current?.querySelectorAll<HTMLElement>('[role="row"]');
+            if (tagEls && tagEls.length > 0) {
+                const lastTag = tagEls[tagEls.length - 1];
+                if (document.activeElement === lastTag || lastTag.contains(document.activeElement)) {
+                    inputRef.current?.focus();
+                }
+            }
+        }
+    };
+
+    const isEmpty = entries.length === 0;
+    const hasTrailingIcon = tooltip || isInvalid;
+
+    const sizes = sortCx({
+        sm: {
+            root: cx("gap-2 px-3 py-2 text-sm", !isEmpty && "py-1.5 pl-2", hasTrailingIcon && "pr-9"),
+            iconTrailing: "right-3",
+        },
+        md: {
+            root: cx("gap-2 px-3 py-2 text-md", !isEmpty && "pl-2", hasTrailingIcon && "pr-9"),
+            iconTrailing: "right-3",
+        },
+        lg: {
+            root: cx("gap-2 px-3.5 py-2.5 text-md", !isEmpty && "pl-2.5", hasTrailingIcon && "pr-9.5"),
+            iconTrailing: "right-3.5",
+        },
+    });
+
+    return (
+        <div className={cx("flex flex-col gap-1.5", className)}>
+            {label && <Label isRequired={hideRequiredIndicator ? false : isRequired}>{label}</Label>}
+
+            <AriaGroup
+                isDisabled={isDisabled}
+                isInvalid={isInvalid}
+                className={({ isFocusWithin, isDisabled, isInvalid }) =>
+                    cx(
+                        "group/input relative flex w-full items-center rounded-lg bg-primary shadow-xs ring-1 ring-primary outline-hidden transition duration-100 ease-linear ring-inset",
+                        isDisabled && "cursor-not-allowed opacity-50",
+                        isFocusWithin && !isDisabled && "ring-2 ring-brand",
+                        isInvalid && !isFocusWithin && "ring-error_subtle",
+                        isInvalid && isFocusWithin && "ring-2 ring-error",
+                        sizes[size].root,
+                    )
+                }
+            >
+                {({ isDisabled }) => (
+                    <>
+                        <div className={cx("relative flex w-full flex-1 flex-row flex-wrap items-center justify-start", size === "sm" ? "gap-1.5" : "gap-2")}>
+                            {!isEmpty && (
+                                <div ref={tagGroupRef} onKeyDown={handleTagGroupKeyDown} className="contents">
+                                    <TagGroup label={label || "Tags"} size={size === "lg" ? "md" : size} onRemove={handleRemove} className="contents">
+                                        <TagList className="flex flex-wrap gap-1.5 focus:outline-hidden" items={entries}>
+                                            {(item) => (
+                                                <Tag
+                                                    id={item.id}
+                                                    isDisabled={isDisabled}
+                                                    className="focus-visible:ring-2 focus-visible:ring-focus-ring focus-visible:ring-offset-[-2px] focus-visible:outline-hidden"
+                                                >
+                                                    {item.label}
+                                                </Tag>
+                                            )}
+                                        </TagList>
+                                    </TagGroup>
+                                </div>
+                            )}
+
+                            <div className="relative flex min-w-[20%] flex-1 flex-row items-center">
+                                <AriaInput
+                                    ref={inputRef}
+                                    type="text"
+                                    value={inputValue}
+                                    disabled={isDisabled}
+                                    placeholder={isEmpty ? placeholder : undefined}
+                                    onChange={(e) => setInputValue(e.target.value)}
+                                    onKeyDown={handleInputKeyDown}
+                                    className="w-full flex-[1_0_0] appearance-none bg-transparent text-ellipsis text-primary caret-alpha-black/90 outline-hidden placeholder:text-placeholder focus:outline-hidden disabled:cursor-not-allowed"
+                                />
+                            </div>
+                        </div>
+
+                        {tooltip && (
+                            <Tooltip title={tooltip} placement="top">
+                                <TooltipTrigger
+                                    className={cx(
+                                        "absolute cursor-pointer text-fg-quaternary transition duration-100 ease-linear group-invalid/input:hidden hover:text-fg-quaternary_hover focus:text-fg-quaternary_hover",
+                                        sizes[size].iconTrailing,
+                                    )}
+                                >
+                                    <HelpCircle className="size-4 stroke-[2.25px]" />
+                                </TooltipTrigger>
+                            </Tooltip>
+                        )}
+
+                        <InfoCircle
+                            className={cx(
+                                "pointer-events-none absolute hidden size-4 stroke-[2.25px] text-fg-error-secondary group-invalid/input:block",
+                                sizes[size].iconTrailing,
+                            )}
+                        />
+                    </>
+                )}
+            </AriaGroup>
+
+            {hint && (
+                <HintText isInvalid={isInvalid} className={cx(size === "sm" && "text-xs")}>
+                    {hint}
+                </HintText>
+            )}
+        </div>
+    );
+};
diff --git a/src/components/base/input/input.tsx b/src/components/base/input/input.tsx
new file mode 100644
index 0000000..0b7118f
--- /dev/null
+++ b/src/components/base/input/input.tsx
@@ -0,0 +1,304 @@
+import { type ComponentType, type HTMLAttributes, type ReactNode, type Ref, createContext, useContext, useState } from "react";
+import { Eye, EyeOff, HelpCircle, InfoCircle } from "@untitledui/icons";
+import type { InputProps as AriaInputProps, TextFieldProps as AriaTextFieldProps } from "react-aria-components";
+import { Button as AriaButton, 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 Omit<AriaInputProps, "size"> {
+    /** Tooltip message on hover. */
+    tooltip?: string;
+    /** Whether the input is invalid. */
+    isInvalid?: boolean;
+    /** Whether the input is disabled. */
+    isDisabled?: boolean;
+    /** Whether the input is required. */
+    isRequired?: boolean;
+    /**
+     * Input size.
+     * @default "sm"
+     */
+    size?: "sm" | "md" | "lg";
+    /** 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 = "md",
+    isInvalid,
+    isDisabled,
+    isRequired,
+    icon: Icon,
+    placeholder,
+    wrapperClassName,
+    tooltipClassName,
+    inputClassName,
+    iconClassName,
+    type = "text",
+    ...inputProps
+}: InputBaseProps) => {
+    const [isPasswordVisible, setIsPasswordVisible] = useState(false);
+
+    // 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 text-sm", hasLeadingIcon && "pl-9", hasTrailingIcon && "pr-9"),
+            iconLeading: "left-3 size-4 stroke-[2.25px]",
+            iconTrailing: "right-3",
+            shortcut: "pr-1.5",
+        },
+        md: {
+            root: cx("px-3 py-2 text-md", hasLeadingIcon && "pl-10", hasTrailingIcon && "pr-9"),
+            iconLeading: "left-3 size-5",
+            iconTrailing: "right-3",
+            shortcut: "pr-2",
+        },
+        lg: {
+            root: cx("px-3.5 py-2.5 text-md", hasLeadingIcon && "pl-10.5", hasTrailingIcon && "pr-9.5"),
+            iconLeading: "left-3.5 size-5",
+            iconTrailing: "right-3.5",
+            shortcut: "pr-2.5",
+        },
+    });
+
+    return (
+        <AriaGroup
+            {...{ isDisabled, isInvalid }}
+            ref={groupRef}
+            className={({ isFocusWithin, isDisabled, isInvalid }) =>
+                cx(
+                    "group/input 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 opacity-50",
+                    "group-disabled:cursor-not-allowed group-disabled:opacity-50",
+
+                    // 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 text-fg-quaternary", sizes[inputSize].iconLeading, context?.iconClassName, iconClassName)} />
+            )}
+
+            {/* Input field */}
+            <AriaInput
+                {...(inputProps as AriaInputProps)}
+                ref={ref}
+                required={isRequired}
+                type={type === "password" && isPasswordVisible ? "text" : type}
+                placeholder={placeholder}
+                className={cx(
+                    "m-0 w-full bg-transparent text-primary ring-0 outline-hidden placeholder:text-placeholder autofill:rounded-lg autofill:text-primary disabled:cursor-not-allowed",
+                    sizes[inputSize].root,
+                    context?.inputClassName,
+                    inputClassName,
+                )}
+            />
+
+            {/* Tooltip and help icon */}
+            {tooltip && type !== "password" && (
+                <Tooltip title={tooltip} placement="top">
+                    <TooltipTrigger
+                        className={cx(
+                            "absolute cursor-pointer text-fg-quaternary transition duration-100 ease-linear group-invalid/input:hidden hover:text-fg-quaternary_hover focus:text-fg-quaternary_hover",
+                            sizes[inputSize].iconTrailing,
+                            context?.tooltipClassName,
+                            tooltipClassName,
+                        )}
+                    >
+                        <HelpCircle className="size-4 stroke-[2.25px]" />
+                    </TooltipTrigger>
+                </Tooltip>
+            )}
+
+            {/* Invalid icon */}
+            {type !== "password" && (
+                <InfoCircle
+                    className={cx(
+                        "pointer-events-none absolute hidden size-4 stroke-[2.25px] text-fg-error-secondary group-invalid/input:block",
+                        sizes[inputSize].iconTrailing,
+                        context?.tooltipClassName,
+                        tooltipClassName,
+                    )}
+                />
+            )}
+
+            {/* Password visibility toggle */}
+            {type === "password" && (
+                <AriaButton
+                    aria-label="Toggle password visibility"
+                    onClick={() => setIsPasswordVisible(!isPasswordVisible)}
+                    className={cx(
+                        "absolute flex cursor-pointer items-center justify-center text-fg-quaternary transition duration-100 ease-linear hover:text-fg-quaternary_hover focus:text-fg-quaternary_hover focus:outline-hidden",
+                        sizes[inputSize].iconTrailing,
+                    )}
+                >
+                    {isPasswordVisible ? <EyeOff className="size-4 stroke-[2.25px]" /> : <Eye className="size-4 stroke-[2.25px]" />}
+                </AriaButton>
+            )}
+
+            {/* Shortcut */}
+            {shortcut && (
+                <div
+                    className={cx(
+                        "pointer-events-none absolute inset-y-0.5 right-0.5 z-10 hidden items-center rounded-r-[inherit] bg-linear-to-r from-transparent to-bg-primary to-40% pl-8 md:flex",
+                        sizes[inputSize].shortcut,
+                    )}
+                >
+                    <span
+                        aria-hidden="true"
+                        className="pointer-events-none rounded px-1 py-px text-xs font-medium text-quaternary ring-1 ring-secondary select-none ring-inset"
+                    >
+                        {typeof shortcut === "string" ? shortcut : "⌘K"}
+                    </span>
+                </div>
+            )}
+        </AriaGroup>
+    );
+};
+
+InputBase.displayName = "InputBase";
+
+interface TextFieldContextProps extends Partial<Pick<InputBaseProps, "size" | "wrapperClassName" | "inputClassName" | "iconClassName" | "tooltipClassName">> {}
+
+const TextFieldContext = createContext<TextFieldContextProps>({});
+
+export interface TextFieldProps extends AriaTextFieldProps, TextFieldContextProps {}
+
+export const TextField = ({ className, size = "md", inputClassName, wrapperClassName, iconClassName, tooltipClassName, ...props }: TextFieldProps) => {
+    return (
+        <TextFieldContext.Provider value={{ inputClassName, wrapperClassName, iconClassName, tooltipClassName, size }}>
+            <AriaTextField
+                {...props}
+                data-input-wrapper
+                data-input-size={size}
+                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";
+
+export interface InputProps
+    extends
+        AriaTextFieldProps,
+        Pick<
+            InputBaseProps,
+            | "ref"
+            | "placeholder"
+            | "icon"
+            | "shortcut"
+            | "tooltip"
+            | "groupRef"
+            | "size"
+            | "wrapperClassName"
+            | "inputClassName"
+            | "iconClassName"
+            | "tooltipClassName"
+        > {
+    /** Label text for the input */
+    label?: string;
+    /** Helper text displayed below the input */
+    hint?: ReactNode;
+    /** Whether to hide required indicator from label */
+    hideRequiredIndicator?: boolean;
+}
+
+export const Input = ({
+    size = "md",
+    placeholder,
+    icon: Icon,
+    label,
+    hint,
+    shortcut,
+    hideRequiredIndicator,
+    className,
+    ref,
+    groupRef,
+    tooltip,
+    iconClassName,
+    inputClassName,
+    wrapperClassName,
+    tooltipClassName,
+    type = "text",
+    ...props
+}: InputProps) => {
+    return (
+        <TextField aria-label={!label ? placeholder : undefined} {...props} size={size} className={className}>
+            {({ isRequired, isInvalid }) => (
+                <>
+                    {label && (
+                        <Label isRequired={hideRequiredIndicator ? !hideRequiredIndicator : isRequired} isInvalid={isInvalid}>
+                            {label}
+                        </Label>
+                    )}
+
+                    <InputBase
+                        {...{
+                            ref,
+                            groupRef,
+                            size,
+                            placeholder,
+                            icon: Icon,
+                            shortcut,
+                            iconClassName,
+                            inputClassName,
+                            wrapperClassName,
+                            tooltipClassName,
+                            tooltip,
+                            type,
+                        }}
+                    />
+
+                    {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..d36fa55
--- /dev/null
+++ b/src/components/base/input/label.tsx
@@ -0,0 +1,60 @@
+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;
+    isInvalid?: boolean;
+    isRequired?: boolean;
+    tooltip?: string;
+    tooltipDescription?: string;
+    ref?: Ref<HTMLLabelElement>;
+}
+
+export const Label = ({ isInvalid, 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",
+
+                    isInvalid && "text-error-primary",
+                    typeof isInvalid === "undefined" && "group-invalid:text-error-primary",
+                )}
+            >
+                *
+            </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/input/pin-input.tsx b/src/components/base/input/pin-input.tsx
new file mode 100644
index 0000000..ccf32da
--- /dev/null
+++ b/src/components/base/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 { HintText } from "@/components/base/input/hint-text";
+import { Label as LabelBase } from "@/components/base/input/label";
+import { cx } from "@/utils/cx";
+
+type PinInputSize = "xxxs" | "xxs" | "xs" | "sm" | "md" | "lg";
+
+type PinInputContextType = {
+    size: PinInputSize;
+    disabled: boolean;
+    id: string;
+    invalid: boolean;
+};
+
+const PinInputContext = createContext<PinInputContextType>({
+    size: "sm",
+    id: "",
+    disabled: false,
+    invalid: 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?: PinInputSize;
+    disabled?: boolean;
+    invalid?: boolean;
+}
+
+const Root = ({ className, size = "md", disabled = false, invalid = false, ...props }: RootProps) => {
+    const id = useId();
+
+    return (
+        <PinInputContext.Provider value={{ size, disabled, id, invalid }}>
+            <div role="group" className={cx("flex h-max flex-col gap-1.5", className)} {...props} />
+        </PinInputContext.Provider>
+    );
+};
+Root.displayName = "Root";
+
+const styles = {
+    xxxs: { group: "gap-1.5 h-9", slot: "size-9 px-3 py-2 text-sm rounded-lg font-medium text-placeholder/50", caret: "text-sm font-medium" },
+    xxs: { group: "gap-2 h-10", slot: "size-10 px-3 py-2 text-md rounded-lg font-medium text-placeholder/50", caret: "text-md font-medium" },
+    xs: { group: "gap-2 h-11", slot: "size-11 px-3.5 py-2.5 text-md rounded-lg font-medium text-placeholder/50", caret: "text-md font-medium" },
+    sm: { group: "gap-2 h-16.5", slot: "size-16 px-2 py-0.5 text-display-lg font-medium", caret: "text-display-lg font-medium" },
+    md: { group: "gap-3 h-20.5", slot: "size-20 px-2 py-2.5 text-display-lg font-medium", caret: "text-display-lg font-medium" },
+    lg: { group: "gap-3 h-24.5", slot: "size-24 px-2 py-3 text-display-xl font-medium", caret: "text-display-xl font-medium" },
+};
+
+type GroupProps = ComponentPropsWithRef<typeof OTPInput> & {
+    width?: number;
+    inputClassName?: string;
+};
+
+const Group = ({ inputClassName, containerClassName, width, maxLength = 4, ...props }: GroupProps) => {
+    const { id, size, disabled } = usePinInputContext();
+
+    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", styles[size].group, containerClassName)}
+            className={cx("disabled:cursor-not-allowed", inputClassName)}
+        />
+    );
+};
+Group.displayName = "Group";
+
+const Slot = ({ index, className, ...props }: ComponentPropsWithRef<"div"> & { index: number }) => {
+    const { size, disabled, invalid } = usePinInputContext();
+    const { slots, isFocused } = useContext(OTPInputContext);
+
+    const slot = slots[index];
+
+    return (
+        <div
+            {...props}
+            aria-invalid={invalid}
+            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/40 shadow-xs ring-1 ring-primary transition-[box-shadow,background-color] duration-100 ease-linear ring-inset",
+                styles[size].slot,
+                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 && "opacity-50",
+                invalid && "text-error-primary ring-error_subtle",
+                className,
+            )}
+        >
+            {slot?.char ? slot.char : slot?.hasFakeCaret ? <FakeCaret size={size} /> : 0}
+        </div>
+    );
+};
+Slot.displayName = "Slot";
+
+const FakeCaret = ({ size = "md" }: { size?: PinInputSize }) => {
+    return <div className={cx("pointer-events-none h-[1em] w-0.5 animate-caret-blink bg-fg-brand-primary", styles[size].caret)} />;
+};
+
+const Separator = (props: ComponentPropsWithRef<"div">) => {
+    return (
+        <div role="separator" {...props} className={cx("text-center text-display-xl font-medium text-utility-neutral-300", props.className)}>
+            -
+        </div>
+    );
+};
+Separator.displayName = "Separator";
+
+const Label = (props: ComponentPropsWithRef<typeof LabelBase>) => {
+    const { id } = usePinInputContext();
+
+    return <LabelBase {...props} htmlFor={"pin-input-" + id} id={"pin-input-label-" + id} />;
+};
+Label.displayName = "Label";
+
+const Description = (props: ComponentPropsWithRef<typeof HintText>) => {
+    const { id, size } = usePinInputContext();
+
+    return <HintText {...props} id={"pin-input-description-" + id} role="description" className={cx(size === "xxxs" && "text-xs")} />;
+};
+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..ba72ef6
--- /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-2 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..aae2ad9
--- /dev/null
+++ b/src/components/base/radio-buttons/radio-buttons.tsx
@@ -0,0 +1,121 @@
+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 shrink-0 cursor-pointer appearance-none items-center justify-center rounded-full bg-primary ring-1 ring-primary ring-inset",
+                size === "md" && "size-5",
+                isSelected && "bg-brand-solid ring-brand-solid",
+                isDisabled && "cursor-not-allowed opacity-50",
+                isDisabled && !isSelected && "bg-tertiary",
+                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", 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={(state) =>
+                cx(
+                    "relative flex items-start",
+                    state.isDisabled && "cursor-not-allowed",
+                    sizes[size].root,
+                    typeof className === "function" ? className(state) : 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..fbdc73b
--- /dev/null
+++ b/src/components/base/select/combobox.tsx
@@ -0,0 +1,174 @@
+import type { FC, FocusEventHandler, PointerEventHandler, ReactNode, RefAttributes, RefObject } from "react";
+import { isValidElement, useCallback, useContext, useRef, useState } from "react";
+import { SearchLg } 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-shared";
+import { useResizeObserver } from "@/hooks/use-resize-observer";
+import { cx } from "@/utils/cx";
+import { isReactComponent } from "@/utils/is-react-component";
+
+interface ComboBoxProps extends Omit<AriaComboBoxProps<SelectItemType>, "children" | "items">, RefAttributes<HTMLDivElement>, CommonProps {
+    shortcut?: boolean;
+    items?: SelectItemType[];
+    popoverClassName?: string;
+    shortcutClassName?: string;
+    /** Leading icon component displayed before the input. */
+    icon?: FC | ReactNode;
+    children: AriaListBoxProps<SelectItemType>["children"];
+}
+
+interface ComboBoxValueProps extends AriaGroupProps {
+    size: "sm" | "md" | "lg";
+    shortcut: boolean;
+    placeholder?: string;
+    shortcutClassName?: string;
+    icon?: FC | ReactNode;
+    onFocus?: FocusEventHandler;
+    onPointerEnter?: PointerEventHandler;
+    ref?: RefObject<HTMLDivElement | null>;
+}
+
+const ComboBoxValue = ({ size, shortcut, placeholder, shortcutClassName, icon: IconProp, ...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 opacity-50",
+                    isFocusWithin && "ring-2 ring-brand",
+
+                    // Icon styles
+                    "*:data-icon:shrink-0 *:data-icon:text-fg-quaternary",
+
+                    sizes[size].root,
+                )
+            }
+        >
+            {isReactComponent(IconProp) ? (
+                <IconProp data-icon className="pointer-events-none" aria-hidden="true" />
+            ) : isValidElement(IconProp) ? (
+                IconProp
+            ) : (
+                <SearchLg data-icon className="pointer-events-none" aria-hidden="true" />
+            )}
+
+            <div className="relative flex w-full items-center">
+                {inputValue && (
+                    <span className={cx("absolute top-1/2 z-0 inline-flex w-full -translate-y-1/2 truncate", sizes[size].textContainer)} aria-hidden="true">
+                        <p className={cx("font-medium text-primary", sizes[size].text)}>{first}</p>
+                        {last && <p className={cx("-ml-0.75 text-tertiary", sizes[size].text)}>{last}</p>}
+                    </span>
+                )}
+
+                <AriaInput
+                    placeholder={placeholder}
+                    className={cx(
+                        "z-10 w-full appearance-none bg-transparent text-transparent caret-alpha-black/90 placeholder:text-placeholder focus:outline-hidden disabled:cursor-not-allowed",
+                        sizes[size].text,
+                    )}
+                />
+            </div>
+
+            {shortcut && (
+                <div
+                    className={cx(
+                        "absolute inset-y-0.5 right-0.5 z-10 hidden items-center rounded-r-[inherit] bg-linear-to-r from-transparent to-bg-primary to-40% pl-8 md:flex",
+                        sizes[size].shortcut,
+                        shortcutClassName,
+                    )}
+                >
+                    <span
+                        className="pointer-events-none rounded px-1 py-px text-xs font-medium text-quaternary ring-1 ring-secondary select-none ring-inset"
+                        aria-hidden="true"
+                    >
+                        ⌘K
+                    </span>
+                </div>
+            )}
+        </AriaGroup>
+    );
+};
+
+export const ComboBox = ({
+    placeholder = "Search",
+    shortcut = true,
+    size = "md",
+    children,
+    items,
+    shortcutClassName,
+    icon,
+    hideRequiredIndicator,
+    ...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={hideRequiredIndicator ? false : state.isRequired} tooltip={otherProps.tooltip}>
+                                {otherProps.label}
+                            </Label>
+                        )}
+
+                        <ComboBoxValue
+                            ref={placeholderRef}
+                            placeholder={placeholder}
+                            shortcut={shortcut}
+                            shortcutClassName={shortcutClassName}
+                            icon={icon}
+                            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} className={cx(size === "sm" && "text-xs")}>
+                                {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..a0d3875
--- /dev/null
+++ b/src/components/base/select/multi-select.tsx
@@ -0,0 +1,327 @@
+import type { ReactNode, RefAttributes } from "react";
+import { useCallback, useRef, useState } from "react";
+import { ChevronDown, SearchLg } from "@untitledui/icons";
+import { useFilter } from "react-aria";
+import type { Selection } from "react-aria-components";
+import {
+    Autocomplete as AriaAutocomplete,
+    Button as AriaButton,
+    Dialog as AriaDialog,
+    DialogTrigger as AriaDialogTrigger,
+    Input as AriaInput,
+    ListBox as AriaListBox,
+    Popover as AriaPopover,
+    SearchField as AriaSearchField,
+} from "react-aria-components";
+import { Button } from "@/components/base/buttons/button";
+import { HintText } from "@/components/base/input/hint-text";
+import { Label } from "@/components/base/input/label";
+import { FeaturedIcon } from "@/components/foundations/featured-icon/featured-icon";
+import { cx } from "@/utils/cx";
+import { SelectItem } from "./select-item";
+import { type CommonProps, SelectContext, type SelectItemType, sizes } from "./select-shared";
+
+const searchSizes = {
+    sm: { wrapper: "py-1", root: "px-3 py-2 gap-2 *:data-icon:size-4 *:data-icon:stroke-[2.25px]", text: "text-sm" },
+    md: { wrapper: "py-0.5", root: "px-3 py-2 gap-2 *:data-icon:size-5", text: "text-md" },
+    lg: { wrapper: "py-0.5", root: "px-3.5 py-2.5 gap-2 *:data-icon:size-5", text: "text-md" },
+};
+
+const footerButtonSize = {
+    sm: "xs" as const,
+    md: "sm" as const,
+    lg: "sm" as const,
+};
+
+const popoverMaxHeights = {
+    sm: "max-h-68",
+    md: "max-h-76",
+    lg: "max-h-92",
+};
+
+interface MultiSelectFooterProps {
+    /**
+     * The size of the footer buttons.
+     * @default "sm"
+     */
+    size?: "sm" | "md" | "lg";
+    /** Handler that is called when the reset button is clicked. */
+    onReset?: () => void;
+    /** Handler that is called when the select all button is clicked. */
+    onSelectAll?: () => void;
+    /** Additional class name. */
+    className?: string;
+}
+
+const MultiSelectFooter = ({ size = "sm", onReset, onSelectAll, className }: MultiSelectFooterProps) => {
+    const btnSize = footerButtonSize[size];
+
+    return (
+        <div className={cx("flex items-center justify-between border-t border-secondary p-3", className)}>
+            <Button size={btnSize} color="secondary" onClick={onReset}>
+                Reset
+            </Button>
+            <Button size={btnSize} color="secondary" onClick={onSelectAll}>
+                Select all
+            </Button>
+        </div>
+    );
+};
+
+interface MultiSelectEmptyStateProps {
+    /**
+     * The title to display.
+     * @default "No results found"
+     */
+    title?: string;
+    /**
+     * The description to display.
+     * @default "Please try a different search term."
+     */
+    description?: string;
+    /** Handler that is called when the clear search button is clicked. */
+    onClearSearch?: () => void;
+    /** Additional class name. */
+    className?: string;
+}
+
+const MultiSelectEmptyState = ({
+    title = "No results found",
+    description = "Please try a different search term.",
+    onClearSearch,
+    className,
+}: MultiSelectEmptyStateProps) => (
+    <div className={cx("flex flex-col items-center gap-3 px-4 py-4", className)}>
+        <div className="flex flex-col items-center gap-3">
+            <FeaturedIcon icon={SearchLg} size="sm" color="gray" theme="modern" />
+            <div className="flex flex-col items-center gap-0.5 text-center text-sm">
+                <p className="font-semibold text-primary">{title}</p>
+                <p className="text-tertiary">{description}</p>
+            </div>
+        </div>
+        {onClearSearch && (
+            <Button size="sm" color="link-color" onClick={onClearSearch}>
+                Clear search
+            </Button>
+        )}
+    </div>
+);
+
+interface MultiSelectProps extends RefAttributes<HTMLDivElement>, CommonProps {
+    /** The items to display in the listbox. */
+    items?: SelectItemType[];
+    /** The children to render for each item. */
+    children: ReactNode | ((item: SelectItemType) => ReactNode);
+    /** The currently selected keys (controlled). */
+    selectedKeys?: Selection;
+    /** The initial selected keys (uncontrolled). */
+    defaultSelectedKeys?: Selection;
+    /** Handler that is called when the selection changes. */
+    onSelectionChange?: (keys: Selection) => void;
+    /** Whether the select is disabled. */
+    isDisabled?: boolean;
+    /** Whether the select is required. */
+    isRequired?: boolean;
+    /** Whether the select is in an invalid state. */
+    isInvalid?: boolean;
+    /** Additional class name for the popover. */
+    popoverClassName?: string;
+    /** Additional class name for the root element. */
+    className?: string;
+    /** Handler that is called when the reset button is clicked. */
+    onReset?: () => void;
+    /** Handler that is called when the select all button is clicked. */
+    onSelectAll?: () => void;
+    /**
+     * Whether to show the footer with reset and select all buttons.
+     * @default true
+     */
+    showFooter?: boolean;
+    /**
+     * Whether to show the search input in the popover.
+     * @default true
+     */
+    showSearch?: boolean;
+    /** The title to display when no items match the search. */
+    emptyStateTitle?: string;
+    /** The description to display when no items match the search. */
+    emptyStateDescription?: string;
+    /** Custom formatter for the selected count text in the trigger. */
+    selectedCountFormatter?: (count: number) => ReactNode;
+    /** Supporting text displayed next to the selected count in the trigger. */
+    supportingText?: ReactNode;
+}
+
+const MultiSelectRoot = ({
+    items,
+    children,
+    size = "md",
+    selectedKeys,
+    defaultSelectedKeys,
+    onSelectionChange,
+    isDisabled,
+    isRequired,
+    isInvalid,
+    placeholder = "Select",
+    label,
+    hint,
+    tooltip,
+    hideRequiredIndicator,
+    popoverClassName,
+    className,
+    onReset,
+    onSelectAll,
+    showFooter = true,
+    showSearch = true,
+    emptyStateTitle,
+    emptyStateDescription,
+    selectedCountFormatter,
+    supportingText,
+}: MultiSelectProps) => {
+    const { contains } = useFilter({ sensitivity: "base" });
+    const [searchValue, setSearchValue] = useState("");
+
+    const triggerRef = useRef<HTMLButtonElement>(null);
+    const [popoverWidth, setPopoverWidth] = useState("");
+
+    const onResize = useCallback(() => {
+        if (!triggerRef.current) return;
+        const rect = triggerRef.current.getBoundingClientRect();
+        setPopoverWidth(rect.width + "px");
+    }, []);
+
+    const selectedCount = selectedKeys instanceof Set ? selectedKeys.size : selectedKeys === "all" ? (items?.length ?? 0) : 0;
+    const hasSelection = selectedCount > 0;
+
+    const handleClearSearch = useCallback(() => {
+        setSearchValue("");
+    }, []);
+
+    return (
+        <SelectContext.Provider value={{ size }}>
+            <div className={cx("flex flex-col gap-1.5", className)}>
+                {label && (
+                    <Label isRequired={hideRequiredIndicator ? false : isRequired} isInvalid={isInvalid} tooltip={tooltip}>
+                        {label}
+                    </Label>
+                )}
+
+                <AriaDialogTrigger>
+                    <AriaButton
+                        ref={triggerRef}
+                        isDisabled={isDisabled}
+                        onClick={onResize}
+                        className={(state) =>
+                            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",
+                                (state.isFocusVisible || state.isPressed) && "ring-2 ring-brand",
+                                state.isDisabled && "cursor-not-allowed opacity-50",
+                            )
+                        }
+                    >
+                        <span
+                            className={cx(
+                                "flex w-full items-center truncate text-left",
+                                sizes[size].root,
+                                "*:data-icon:shrink-0 *:data-icon:text-fg-quaternary",
+                            )}
+                        >
+                            {hasSelection ? (
+                                <span className={cx("flex items-center", sizes[size].textContainer)}>
+                                    <span className={cx("font-medium text-primary", sizes[size].text)}>
+                                        {selectedCountFormatter ? selectedCountFormatter(selectedCount) : `${selectedCount} selected`}
+                                    </span>
+                                    {supportingText && <span className={cx("text-tertiary", sizes[size].text)}>{supportingText}</span>}
+                                </span>
+                            ) : (
+                                <span className={cx("text-placeholder", sizes[size].text)}>{placeholder}</span>
+                            )}
+
+                            <ChevronDown
+                                aria-hidden="true"
+                                className={cx("ml-auto shrink-0 text-fg-quaternary", size === "lg" ? "size-5" : "size-4 stroke-[2.25px]")}
+                            />
+                        </span>
+                    </AriaButton>
+
+                    <AriaPopover
+                        placement="bottom"
+                        offset={4}
+                        containerPadding={0}
+                        style={{ width: popoverWidth || undefined }}
+                        className={(state) =>
+                            cx(
+                                "w-(--trigger-width) origin-(--trigger-anchor-point) overflow-hidden rounded-lg bg-primary shadow-lg ring-1 ring-secondary_alt outline-hidden will-change-transform",
+                                state.isEntering &&
+                                    "duration-150 ease-out animate-in fade-in 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-top:slide-out-to-bottom-0.5 placement-bottom:slide-out-to-top-0.5",
+                                popoverClassName,
+                            )
+                        }
+                    >
+                        <AriaDialog className="outline-hidden">
+                            <AriaAutocomplete filter={contains} inputValue={searchValue} onInputChange={setSearchValue}>
+                                {showSearch && (
+                                    <div className={cx("border-b border-secondary", searchSizes[size].wrapper)}>
+                                        <AriaSearchField aria-label="Search" value={searchValue} onChange={setSearchValue} autoFocus>
+                                            <div className={cx("flex items-center", searchSizes[size].root)}>
+                                                <SearchLg data-icon aria-hidden="true" className="shrink-0 text-fg-quaternary" />
+                                                <AriaInput
+                                                    placeholder="Search"
+                                                    className={cx(
+                                                        "w-full appearance-none bg-transparent text-primary caret-alpha-black/90 outline-hidden placeholder:text-placeholder",
+                                                        searchSizes[size].text,
+                                                    )}
+                                                />
+                                            </div>
+                                        </AriaSearchField>
+                                    </div>
+                                )}
+
+                                <AriaListBox
+                                    aria-label={label || "Options"}
+                                    items={items}
+                                    selectionMode="multiple"
+                                    selectedKeys={selectedKeys}
+                                    defaultSelectedKeys={defaultSelectedKeys}
+                                    onSelectionChange={onSelectionChange}
+                                    renderEmptyState={() => (
+                                        <MultiSelectEmptyState
+                                            title={emptyStateTitle}
+                                            description={emptyStateDescription}
+                                            onClearSearch={searchValue ? handleClearSearch : undefined}
+                                        />
+                                    )}
+                                    className={cx("overflow-y-auto py-1 outline-hidden", popoverMaxHeights[size])}
+                                >
+                                    {children}
+                                </AriaListBox>
+                            </AriaAutocomplete>
+
+                            {showFooter && <MultiSelectFooter size={size} onReset={onReset} onSelectAll={onSelectAll} />}
+                        </AriaDialog>
+                    </AriaPopover>
+                </AriaDialogTrigger>
+
+                {hint && (
+                    <HintText isInvalid={isInvalid} className={cx(size === "sm" && "text-xs")}>
+                        {hint}
+                    </HintText>
+                )}
+            </div>
+        </SelectContext.Provider>
+    );
+};
+
+const MultiSelect = MultiSelectRoot as typeof MultiSelectRoot & {
+    Item: typeof SelectItem;
+    Footer: typeof MultiSelectFooter;
+    EmptyState: typeof MultiSelectEmptyState;
+};
+
+MultiSelect.Item = SelectItem;
+MultiSelect.Footer = MultiSelectFooter;
+MultiSelect.EmptyState = MultiSelectEmptyState;
+
+export { MultiSelect };
diff --git a/src/components/base/select/popover.tsx b/src/components/base/select/popover.tsx
new file mode 100644
index 0000000..80477fb
--- /dev/null
+++ b/src/components/base/select/popover.tsx
@@ -0,0 +1,35 @@
+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" | "lg";
+}
+
+export const Popover = (props: PopoverProps) => {
+    return (
+        <AriaPopover
+            placement="bottom"
+            containerPadding={0}
+            offset={4}
+            {...props}
+            className={(state) =>
+                cx(
+                    "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 === "sm" && "max-h-56!",
+                    props.size === "md" && "max-h-64!",
+                    props.size === "lg" && "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..0bcf952
--- /dev/null
+++ b/src/components/base/select/select-item.tsx
@@ -0,0 +1,133 @@
+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 { CheckboxBase } from "@/components/base/checkbox/checkbox";
+import { cx } from "@/utils/cx";
+import { isReactComponent } from "@/utils/is-react-component";
+import type { SelectItemType } from "./select-shared";
+import { SelectContext } from "./select-shared";
+
+const sizes = {
+    sm: {
+        root: "p-2 pr-2.5 gap-2 *:data-icon:size-4 *:data-icon:stroke-[2.25px]",
+        text: "text-sm",
+        textContainer: "gap-x-1.5",
+        check: "size-4 stroke-[2.25px]",
+        checkbox: "sm" as const,
+    },
+    md: {
+        root: "p-2 pr-2.5 gap-2 *:data-icon:size-5",
+        text: "text-md",
+        textContainer: "gap-x-2",
+        check: "size-5",
+        checkbox: "sm" as const,
+    },
+    lg: {
+        root: "p-2.5 pl-2 gap-2 *:data-icon:size-5",
+        text: "text-md",
+        textContainer: "gap-x-2",
+        check: "size-5",
+        checkbox: "md" as const,
+    },
+};
+
+interface SelectItemProps extends Omit<AriaListBoxItemProps<SelectItemType>, "id">, SelectItemType {
+    /** The selection indicator to be displayed on the item. */
+    selectionIndicator?: "checkmark" | "checkbox" | "none";
+    /** The alignment of the selection indicator. */
+    selectionIndicatorAlign?: "left" | "right";
+}
+
+export const SelectItem = ({
+    label,
+    id,
+    value,
+    avatarUrl,
+    supportingText,
+    isDisabled,
+    icon: Icon,
+    className,
+    children,
+    selectionIndicator = "checkmark",
+    selectionIndicatorAlign = "right",
+    ...props
+}: SelectItemProps) => {
+    const { size } = useContext(SelectContext);
+
+    const labelOrChildren = label || (typeof children === "string" ? children : "");
+    const textValue = supportingText ? labelOrChildren + " " + supportingText : labelOrChildren;
+
+    const isLeft = selectionIndicatorAlign === "left";
+
+    return (
+        <AriaListBoxItem
+            id={id}
+            value={
+                value ?? {
+                    id,
+                    label: labelOrChildren,
+                    avatarUrl,
+                    supportingText,
+                    isDisabled,
+                    icon: Icon,
+                }
+            }
+            textValue={textValue}
+            isDisabled={isDisabled}
+            {...props}
+            className={(state) =>
+                cx("w-full py-px outline-hidden", size === "sm" ? "px-1" : "px-1.5", typeof className === "function" ? className(state) : className)
+            }
+        >
+            {(state) => (
+                <div
+                    className={cx(
+                        "flex cursor-pointer items-center rounded-md outline-hidden select-none",
+                        (state.isFocused || state.isHovered || (state.isSelected && selectionIndicator !== "checkbox")) && "bg-primary_hover",
+                        state.isDisabled && "cursor-not-allowed opacity-50",
+                        state.isFocusVisible && "ring-2 ring-focus-ring ring-inset",
+
+                        // Icon styles
+                        "*:data-icon:shrink-0 *:data-icon:text-fg-quaternary",
+
+                        sizes[size].root,
+                    )}
+                >
+                    {isLeft && selectionIndicator === "checkbox" && (
+                        <CheckboxBase size={sizes[size].checkbox} isSelected={state.isSelected} isDisabled={state.isDisabled} />
+                    )}
+
+                    {avatarUrl ? (
+                        <Avatar aria-hidden="true" size="xs" src={avatarUrl} alt={label} className={cx(size === "sm" && "size-5")} />
+                    ) : isReactComponent(Icon) ? (
+                        <Icon data-icon aria-hidden="true" />
+                    ) : isValidElement(Icon) ? (
+                        Icon
+                    ) : null}
+
+                    <div className={cx("flex w-full min-w-0 flex-1 flex-wrap", sizes[size].textContainer)}>
+                        <AriaText slot="label" className={cx("truncate font-medium whitespace-nowrap text-primary", sizes[size].text)}>
+                            {label || (typeof children === "function" ? children(state) : children)}
+                        </AriaText>
+
+                        {supportingText && (
+                            <AriaText slot="description" className={cx("whitespace-nowrap text-tertiary", sizes[size].text)}>
+                                {supportingText}
+                            </AriaText>
+                        )}
+                    </div>
+
+                    {state.isSelected && selectionIndicator === "checkmark" && (
+                        <Check aria-hidden="true" className={cx("ml-auto text-fg-brand-primary", sizes[size].check)} />
+                    )}
+
+                    {!isLeft && selectionIndicator === "checkbox" && (
+                        <CheckboxBase size={sizes[size].checkbox} isSelected={state.isSelected} isDisabled={state.isDisabled} className="ml-auto" />
+                    )}
+                </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..0d97319
--- /dev/null
+++ b/src/components/base/select/select-native.tsx
@@ -0,0 +1,95 @@
+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 Omit<SelectHTMLAttributes<HTMLSelectElement>, "size"> {
+    label?: string;
+    hint?: string;
+    selectClassName?: string;
+    size?: "sm" | "md" | "lg";
+    options: { label: string; value: string; disabled?: boolean }[];
+}
+
+const styles = {
+    sm: {
+        root: "py-2 pl-3 text-sm",
+        icon: "size-4 right-2.5 stroke-[2.25px]",
+    },
+    md: {
+        root: "py-2 pl-3 text-md",
+        icon: "size-4 stroke-[2.25px] right-3",
+    },
+    lg: {
+        root: "py-2.5 px-3.5 text-md",
+        icon: "size-5 right-3",
+    },
+};
+
+export const NativeSelect = ({ label, hint, options, className, selectClassName, size = "md", ...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 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:opacity-50",
+
+                        styles[size].root,
+
+                        // 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 in-data-input-wrapper:in-data-[size=sm]:text-sm",
+                        // 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",
+                        // 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=lg]:py-2.5 in-data-input-wrapper:in-data-[input-size=md]:py-2 in-data-input-wrapper:in-data-[input-size=md]:pl-3 in-data-input-wrapper:in-data-[input-size=sm]:text-sm",
+                        // For "leading" dropdown within `InputGroup`
+                        "in-data-input-wrapper:in-data-leading:pr-4.5 in-data-input-wrapper:in-data-leading:in-data-[input-size=lg]:pl-3.5 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=md]:pl-3 in-data-input-wrapper:in-data-leading:in-data-[input-size=sm]:pr-3.5",
+                        // For "trailing" dropdown within `InputGroup`
+                        "in-data-input-wrapper:in-data-trailing:in-data-[input-size=lg]:pr-8 in-data-input-wrapper:in-data-trailing:in-data-[input-size=md]:pr-7.5 in-data-input-wrapper:in-data-trailing:in-data-[input-size=sm]:pr-6.5",
+                        selectClassName,
+                    )}
+                >
+                    {options.map((opt) => (
+                        <option key={opt.value} value={opt.value}>
+                            {opt.label}
+                        </option>
+                    ))}
+                </select>
+
+                <ChevronDown
+                    aria-hidden="true"
+                    className={cx(
+                        "pointer-events-none absolute text-fg-quaternary",
+
+                        styles[size].icon,
+                        // Styles for the icon when the select is within an `InputGroup`
+                        "in-data-input-wrapper:right-0 in-data-input-wrapper:size-4 in-data-input-wrapper:stroke-[2.625px]",
+                        // For "trailing" dropdown within `InputGroup`
+                        "in-data-input-wrapper:in-data-trailing:in-data-[input-size=md]:right-3 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-shared.tsx b/src/components/base/select/select-shared.tsx
new file mode 100644
index 0000000..0163b47
--- /dev/null
+++ b/src/components/base/select/select-shared.tsx
@@ -0,0 +1,49 @@
+import type { FC, ReactNode } from "react";
+import { createContext } from "react";
+
+export type SelectItemType = {
+    /** Unique identifier for the item. */
+    id: string | number;
+    /** The primary display text. */
+    label?: string;
+    /** Avatar image URL. */
+    avatarUrl?: string;
+    /** Whether the item is disabled. */
+    isDisabled?: boolean;
+    /** Secondary text displayed alongside the label. */
+    supportingText?: string;
+    /** Leading icon component or element. */
+    icon?: FC | ReactNode;
+};
+
+export interface CommonProps {
+    /** Helper text displayed below the input. */
+    hint?: string;
+    /** Field label displayed above the input. */
+    label?: string;
+    /** Tooltip text for the help icon next to the label. */
+    tooltip?: string;
+    /**
+     * The size of the component.
+     * @default "md"
+     */
+    size?: "sm" | "md" | "lg";
+    /** Placeholder text when no value is selected. */
+    placeholder?: string;
+    /** Whether to hide the required indicator from the label. */
+    hideRequiredIndicator?: boolean;
+}
+
+export const sizes = {
+    sm: {
+        root: "py-2 pl-3 pr-2.5 gap-2 *:data-icon:size-4 *:data-icon:stroke-[2.25px]",
+        withIcon: "",
+        text: "text-sm",
+        textContainer: "gap-x-1.5",
+        shortcut: "pr-2.5",
+    },
+    md: { root: "py-2 px-3 gap-2 *:data-icon:size-5", withIcon: "", text: "text-md", textContainer: "gap-x-1.5", shortcut: "pr-2.5" },
+    lg: { root: "py-2.5 px-3.5 gap-2 *:data-icon:size-5", withIcon: "", text: "text-md", textContainer: "gap-x-1.5", shortcut: "pr-3" },
+};
+
+export const SelectContext = createContext<{ size: "sm" | "md" | "lg" }>({ size: "md" });
diff --git a/src/components/base/select/select.tsx b/src/components/base/select/select.tsx
new file mode 100644
index 0000000..be30cdb
--- /dev/null
+++ b/src/components/base/select/select.tsx
@@ -0,0 +1,134 @@
+import type { FC, ReactNode, Ref, RefAttributes } from "react";
+import { 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";
+import { type CommonProps, SelectContext, type SelectItemType, sizes } from "./select-shared";
+
+export { SelectContext, sizes, type CommonProps, type SelectItemType } from "./select-shared";
+
+export interface SelectProps extends Omit<AriaSelectProps<SelectItemType>, "children" | "items">, RefAttributes<HTMLDivElement>, CommonProps {
+    items?: SelectItemType[];
+    popoverClassName?: string;
+    icon?: FC | ReactNode;
+    children: ReactNode | ((item: SelectItemType) => ReactNode);
+}
+
+interface SelectValueProps {
+    isOpen: boolean;
+    size: "sm" | "md" | "lg";
+    isFocused: boolean;
+    isDisabled: boolean;
+    placeholder?: string;
+    ref?: Ref<HTMLButtonElement>;
+    icon?: FC | ReactNode;
+}
+
+const SelectValue = ({ isOpen, isFocused, isDisabled, size, placeholder, icon, 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 opacity-50",
+            )}
+        >
+            <AriaSelectValue<SelectItemType>
+                className={(state) =>
+                    cx(
+                        "flex h-max w-full items-center justify-start truncate text-left align-middle",
+
+                        sizes[size].root,
+
+                        // With icon
+                        (state.selectedItems[0]?.icon || icon) && sizes[size].withIcon,
+
+                        // Icon styles
+                        "*:data-icon:shrink-0 *:data-icon:text-fg-quaternary",
+                    )
+                }
+            >
+                {(state) => {
+                    const selectedItem = state.selectedItems[0];
+                    const Icon = selectedItem?.icon || icon;
+
+                    return (
+                        <>
+                            {selectedItem?.avatarUrl ? (
+                                <Avatar size="xs" src={selectedItem.avatarUrl} alt={selectedItem.label} className={cx(size === "sm" && "size-5")} />
+                            ) : isReactComponent(Icon) ? (
+                                <Icon data-icon aria-hidden="true" />
+                            ) : isValidElement(Icon) ? (
+                                Icon
+                            ) : null}
+
+                            {selectedItem ? (
+                                <section className={cx("flex w-full truncate", sizes[size].textContainer)}>
+                                    <p className={cx("truncate font-medium text-primary", sizes[size].text)}>{selectedItem?.label}</p>
+                                    {selectedItem?.supportingText && <p className={cx("text-tertiary", sizes[size].text)}>{selectedItem?.supportingText}</p>}
+                                </section>
+                            ) : (
+                                <p className={cx("text-placeholder", sizes[size].text)}>{placeholder}</p>
+                            )}
+
+                            <ChevronDown
+                                aria-hidden="true"
+                                className={cx("ml-auto shrink-0 text-fg-quaternary", size === "lg" ? "size-5" : "size-4 stroke-[2.25px]")}
+                            />
+                        </>
+                    );
+                }}
+            </AriaSelectValue>
+        </AriaButton>
+    );
+};
+
+const Select = ({ placeholder = "Select", icon, size = "md", children, items, label, hint, tooltip, hideRequiredIndicator, 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={hideRequiredIndicator ? false : state.isRequired} tooltip={tooltip}>
+                                {label}
+                            </Label>
+                        )}
+
+                        <SelectValue {...state} {...{ size, placeholder }} icon={icon} />
+
+                        <Popover size={size} className={rest.popoverClassName}>
+                            <AriaListBox items={items} className="size-full outline-hidden">
+                                {children}
+                            </AriaListBox>
+                        </Popover>
+
+                        {hint && (
+                            <HintText isInvalid={state.isInvalid} className={cx(size === "sm" && "text-xs")}>
+                                {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/select/tag-select.tsx b/src/components/base/select/tag-select.tsx
new file mode 100644
index 0000000..2b6332e
--- /dev/null
+++ b/src/components/base/select/tag-select.tsx
@@ -0,0 +1,401 @@
+import type { FocusEventHandler, KeyboardEvent, PointerEventHandler, RefAttributes, RefObject } from "react";
+import React, { 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-shared";
+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 TagSelectValueProps extends AriaGroupProps {
+    size: "sm" | "md" | "lg";
+    shortcut?: boolean;
+    isDisabled?: boolean;
+    placeholder?: string;
+    shortcutClassName?: string;
+    icon?: IconComponentType | null;
+    ref?: RefObject<HTMLDivElement | null>;
+    onFocus?: FocusEventHandler;
+    onPointerEnter?: PointerEventHandler;
+}
+
+const TagSelectContext = createContext<{
+    size: "sm" | "md" | "lg";
+    selectedKeys: Key[];
+    selectedItems: ListData<SelectItemType>;
+    onRemove: (keys: Set<Key>) => void;
+    onInputChange: (value: string) => void;
+    valueFormatter?: (item: SelectItemType) => string;
+}>({
+    size: "sm",
+    selectedKeys: [],
+    selectedItems: {} as ListData<SelectItemType>,
+    onRemove: () => {},
+    onInputChange: () => {},
+});
+
+interface TagSelectProps extends Omit<AriaComboBoxProps<SelectItemType>, "children" | "items">, RefAttributes<HTMLDivElement> {
+    hint?: string;
+    label?: string;
+    tooltip?: string;
+    size?: "sm" | "md" | "lg";
+    placeholder?: string;
+    shortcut?: boolean;
+    items?: SelectItemType[];
+    popoverClassName?: string;
+    shortcutClassName?: string;
+    selectedItems: ListData<SelectItemType>;
+    icon?: IconComponentType | null;
+    children: AriaListBoxProps<SelectItemType>["children"];
+    onItemCleared?: (key: Key) => void;
+    onItemInserted?: (key: Key) => void;
+    valueFormatter?: (item: SelectItemType) => string;
+}
+
+export const TagSelectBase = ({
+    items,
+    children,
+    size = "sm",
+    selectedItems,
+    onItemCleared,
+    onItemInserted,
+    valueFormatter,
+    shortcut,
+    placeholder = "Search",
+    icon,
+    // Omit name to avoid conflicts with the `Select` component
+    name: _name,
+    className,
+    ...props
+}: TagSelectProps) => {
+    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 (
+        <TagSelectContext.Provider
+            value={{
+                size,
+                selectedKeys,
+                selectedItems,
+                onInputChange,
+                onRemove,
+                valueFormatter,
+            }}
+        >
+            <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.
+                value={null}
+                onChange={onSelectionChange}
+                className={(state) => cx("flex flex-col gap-1.5", typeof className === "function" ? className(state) : className)}
+                {...props}
+            >
+                {(state) => (
+                    <>
+                        {props.label && (
+                            <Label isRequired={state.isRequired} tooltip={props.tooltip}>
+                                {props.label}
+                            </Label>
+                        )}
+
+                        <TagSelectTagsValue
+                            size={size}
+                            shortcut={shortcut}
+                            ref={placeholderRef}
+                            placeholder={placeholder}
+                            icon={icon}
+                            // 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={props?.popoverClassName}>
+                            <AriaListBox selectionMode="multiple" className="size-full outline-hidden">
+                                {children}
+                            </AriaListBox>
+                        </Popover>
+
+                        {props.hint && (
+                            <HintText isInvalid={state.isInvalid} className={cx(size === "sm" && "text-xs")}>
+                                {props.hint}
+                            </HintText>
+                        )}
+                    </>
+                )}
+            </AriaComboBox>
+        </TagSelectContext.Provider>
+    );
+};
+
+const InnerTagSelect = ({ isDisabled, shortcut, shortcutClassName, placeholder, size = "sm" }: Omit<TagSelectProps, "selectedItems" | "children">) => {
+    const focusManager = useFocusManager();
+    const tagSelectContext = useContext(TagSelectContext);
+    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 = tagSelectContext?.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 });
+                }
+
+                tagSelectContext.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 = tagSelectContext?.selectedItems?.items?.length === 0;
+
+    return (
+        <div className="relative flex w-full min-w-0 flex-1 flex-row flex-wrap items-center justify-start gap-1.5">
+            {!isSelectionEmpty &&
+                tagSelectContext?.selectedItems?.items?.map((value) => (
+                    <span
+                        key={value.id}
+                        className={cx(
+                            "flex min-w-0 items-center rounded-md bg-primary ring-1 ring-primary ring-inset",
+                            size === "sm" ? "px-1 py-0.75" : "py-0.5 pr-1 pl-1.25",
+                        )}
+                    >
+                        <Avatar size="xs" alt={value?.label} src={value?.avatarUrl} className="size-4" />
+
+                        <p
+                            className={cx(
+                                "truncate font-medium whitespace-nowrap text-secondary select-none",
+                                size === "sm" ? "ml-1 text-xs" : "ml-1.25 text-sm",
+                            )}
+                        >
+                            {tagSelectContext.valueFormatter ? tagSelectContext.valueFormatter(value) : value?.label}
+                        </p>
+
+                        <TagCloseX
+                            size={size === "sm" ? "sm" : "md"}
+                            isDisabled={isDisabled}
+                            className="ml-0.75"
+                            // For workaround, onKeyDown is added to the button
+                            onKeyDown={(event) => handleTagKeyDown(event, value.id)}
+                            onPress={() => tagSelectContext.onRemove(new Set([value.id]))}
+                        />
+                    </span>
+                ))}
+
+            <div className={cx("relative flex min-w-12 flex-1 flex-row items-center", !isSelectionEmpty && "ml-0.5", shortcut && "min-w-[30%]")}>
+                <AriaInput
+                    placeholder={placeholder}
+                    onKeyDown={handleInputKeyDown}
+                    onMouseDown={handleInputMouseDown}
+                    className={cx(
+                        "w-full flex-[1_0_0] appearance-none bg-transparent text-ellipsis text-primary caret-alpha-black/90 outline-hidden placeholder:text-placeholder focus:outline-hidden disabled:cursor-not-allowed",
+                        sizes[size].text,
+                    )}
+                />
+
+                {shortcut && (
+                    <div
+                        aria-hidden="true"
+                        className={cx(
+                            "absolute inset-y-0.5 right-0.5 z-10 hidden items-center rounded-r-[inherit] bg-linear-to-r from-transparent to-bg-primary to-40% pl-8 md:flex",
+                            shortcutClassName,
+                            sizes[size].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",
+                            )}
+                        >
+                            ⌘K
+                        </span>
+                    </div>
+                )}
+            </div>
+        </div>
+    );
+};
+
+export const TagSelectTagsValue = ({
+    size = "sm",
+    shortcut,
+    placeholder,
+    shortcutClassName,
+    icon: Icon = SearchLg,
+    // Omit this prop to avoid invalid HTML attribute warning
+    isDisabled: _isDisabled,
+    ...otherProps
+}: TagSelectValueProps) => {
+    const tagSelectContext = useContext(TagSelectContext);
+
+    const selectedItemsCount = tagSelectContext.selectedKeys.length;
+
+    return (
+        <AriaGroup
+            {...otherProps}
+            className={({ isFocusWithin, isDisabled }) =>
+                cx(
+                    "relative flex w-full items-center rounded-lg bg-primary shadow-xs ring-1 ring-primary outline-hidden transition duration-100 ease-linear ring-inset",
+                    isDisabled && "cursor-not-allowed opacity-50",
+                    isFocusWithin && "ring-2 ring-brand",
+
+                    // Icon styles
+                    "*:data-icon:shrink-0 *:data-icon:text-fg-quaternary",
+
+                    sizes[size].root,
+
+                    // Overwrite vertical padding for small size when there are selected items
+                    // to prevent height jump because the tags are taller than the input text.
+                    size === "sm" && selectedItemsCount > 0 && "py-1.5",
+                )
+            }
+        >
+            {({ isDisabled }) => (
+                <>
+                    {Icon && <Icon data-icon className="pointer-events-none" />}
+                    <FocusScope contain={false} autoFocus={false} restoreFocus={false}>
+                        <InnerTagSelect
+                            isDisabled={isDisabled}
+                            size={size}
+                            shortcut={shortcut}
+                            shortcutClassName={shortcutClassName}
+                            placeholder={placeholder}
+                        />
+                    </FocusScope>
+                </>
+            )}
+        </AriaGroup>
+    );
+};
+
+const TagSelect = TagSelectBase as typeof TagSelectBase & {
+    Item: typeof SelectItem;
+};
+
+TagSelect.Item = SelectItem;
+
+export { TagSelect };
diff --git a/src/components/base/slider/slider.tsx b/src/components/base/slider/slider.tsx
new file mode 100644
index 0000000..ce5575d
--- /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-2 py-1.5 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..d1caaac
--- /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-brand-solid",
+                isDisabled && "cursor-not-allowed opacity-50",
+                isDisabled && !isSelected && "bg-tertiary",
+                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",
+                )}
+            >
+                <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..9ad18ab
--- /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 stroke-[3.6px]" },
+    md: { root: "p-0.5", icon: "size-3 stroke-[2.86px]" },
+    lg: { root: "p-0.75", icon: "size-3.5 stroke-3" },
+};
+
+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)} />
+        </AriaButton>
+    );
+};
diff --git a/src/components/base/tags/tags.tsx b/src/components/base/tags/tags.tsx
new file mode 100644
index 0000000..63ce00d
--- /dev/null
+++ b/src/components/base/tags/tags.tsx
@@ -0,0 +1,183 @@
+import { type ImgHTMLAttributes, type PropsWithChildren, type RefAttributes, createContext, useContext, useState } from "react";
+import { User01 } from "@untitledui/icons";
+import {
+    Tag as AriaTag,
+    TagGroup as AriaTagGroup,
+    type TagGroupProps as AriaTagGroupProps,
+    TagList as AriaTagList,
+    type TagProps as AriaTagProps,
+} from "react-aria-components";
+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 const TagAvatar = ({ src, alt, contrastBorder = true, className }: ImgHTMLAttributes<HTMLImageElement> & { contrastBorder?: boolean }) => {
+    const [isFailed, setIsFailed] = useState(false);
+
+    return (
+        <div
+            className={cx(
+                "relative inline-flex size-4 shrink-0 items-center justify-center overflow-hidden rounded-full bg-tertiary",
+                contrastBorder && "outline-[0.5px] -outline-offset-[0.5px] outline-black/16",
+                className,
+            )}
+        >
+            {src && !isFailed ? (
+                <img data-avatar-img className="size-full object-cover" src={src} alt={alt} onError={() => setIsFailed(true)} />
+            ) : (
+                <User01 className="size-3 stroke-[2.25px] text-fg-quaternary" />
+            )}
+        </div>
+    );
+};
+
+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 = true,
+    dot,
+    dotClassName,
+    isDisabled,
+    count,
+    className,
+    children,
+    onClose,
+}: PropsWithChildren<TagProps>) => {
+    const context = useContext(TagGroupContext);
+
+    const leadingContent = avatarSrc ? (
+        <TagAvatar 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 outline-focus-ring transition duration-50 ease-linear ring-inset focus-visible:outline-2 focus-visible:outline-offset-2",
+                    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} excludeFromTabOrder={allowsRemoving} 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..7458715
--- /dev/null
+++ b/src/components/base/textarea/textarea.tsx
@@ -0,0 +1,120 @@
+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>;
+    size?: "sm" | "md";
+}
+
+export const TextAreaBase = ({ className, size = "md", ...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 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",
+
+                    size === "sm" && "p-3 text-sm",
+                    size === "md" && "px-3.5 py-3 text-md",
+
+                    // 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 opacity-50",
+                    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;
+    /** Textarea size. */
+    size?: TextAreaBaseProps["size"];
+    /** 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,
+    size = "md",
+    ...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} size={size} />
+
+                    {hint && (
+                        <HintText isInvalid={isInvalid} size={size}>
+                            {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..039ed38
--- /dev/null
+++ b/src/components/base/toggle/toggle.tsx
@@ -0,0 +1,137 @@
+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 ring-[0.5px] ring-secondary outline-focus-ring transition duration-150 ease-linear ring-inset",
+                isSelected && "bg-brand-solid",
+                isSelected && isHovered && "bg-brand-solid_hover",
+                isDisabled && "cursor-not-allowed opacity-50",
+                isFocusVisible && "outline-2 outline-offset-2",
+
+                slim && "ring-1",
+                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",
+
+                    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>
+    );
+};
+
+const styles = {
+    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",
+    },
+};
+
+interface ToggleProps extends AriaSwitchProps {
+    size?: "sm" | "md";
+    label?: string;
+    hint?: ReactNode;
+    slim?: boolean;
+}
+
+export const Toggle = ({ label, hint, className, size = "sm", slim, ...ariaSwitchProps }: ToggleProps) => {
+    return (
+        <AriaSwitch
+            {...ariaSwitchProps}
+            className={(state) =>
+                cx(
+                    "relative flex w-max items-start",
+                    state.isDisabled && "cursor-not-allowed",
+                    styles[size].root,
+                    typeof className === "function" ? className(state) : 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", styles[size].textWrapper)}>
+                            {label && <p className={cx("text-secondary select-none", styles[size].label)}>{label}</p>}
+                            {hint && (
+                                <span className={cx("text-tertiary", styles[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..664f763
--- /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 *:data-icon:stroke-[2.25px]",
+    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-neutral-200 before:bg-utility-neutral-50 after:bg-secondary-solid",
+            error: "before:border-utility-red-200 before:bg-utility-red-50 after:bg-error-solid",
+            warning: "before:border-utility-yellow-200 before:bg-utility-yellow-50 after:bg-warning-solid",
+            success: "before:border-utility-green-200 before:bg-utility-green-50 after:bg-success-solid",
+        },
+    },
+
+    dark: {
+        base: "text-fg-white shadow-xs-skeuomorphic 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-neutral-200/12",
+            error: "bg-error-solid before:border-utility-red-200/12",
+            warning: "bg-warning-solid before:border-utility-yellow-200/12",
+            success: "bg-success-solid before:border-utility-green-200/12",
+        },
+    },
+
+    modern: {
+        base: "bg-primary shadow-xs-skeuomorphic ring-1 ring-primary 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: "text-fg-brand-primary",
+            gray: "text-fg-secondary",
+            error: "text-fg-error-primary",
+            warning: "text-fg-warning-primary",
+            success: "text-fg-success-primary",
+        },
+    },
+    "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/integration-icons/bolt-icon.tsx b/src/components/foundations/integration-icons/bolt-icon.tsx
new file mode 100644
index 0000000..415192c
--- /dev/null
+++ b/src/components/foundations/integration-icons/bolt-icon.tsx
@@ -0,0 +1,16 @@
+import type { SVGProps } from "react";
+
+const BoltIcon = ({ grayscale, ...props }: SVGProps<SVGSVGElement> & { grayscale?: boolean }) => {
+    return (
+        <svg width="20" height="20" viewBox="0 0 20 20" fill="none" {...props}>
+            <path
+                fillRule="evenodd"
+                clipRule="evenodd"
+                d="M11.2 15.9872C10.075 15.9872 8.95 15.6122 8.35001 14.7122L8.12501 15.7622L4 17.9372L4.45 15.7622L7.44999 2.11218H11.125L10.075 6.91219C10.9 6.0122 11.725 5.63719 12.775 5.63719C15.025 5.63719 16.45 7.06219 16.45 9.7622C16.45 12.4622 14.725 15.9872 11.2 15.9872ZM12.625 10.5122C12.625 11.7872 11.725 12.7622 10.525 12.7622C9.32501 12.7622 9.25 12.5372 8.87499 12.0872L9.47501 9.61219C9.92499 9.16218 10.375 8.93717 10.975 8.93717C11.875 8.93717 12.625 9.61219 12.625 10.5872V10.5122Z"
+                className={grayscale ? "fill-fg-quaternary" : "fill-[#000]"}
+            />
+        </svg>
+    );
+};
+
+export default BoltIcon;
diff --git a/src/components/foundations/integration-icons/chatgpt-icon.tsx b/src/components/foundations/integration-icons/chatgpt-icon.tsx
new file mode 100644
index 0000000..29a0a46
--- /dev/null
+++ b/src/components/foundations/integration-icons/chatgpt-icon.tsx
@@ -0,0 +1,14 @@
+import type { SVGProps } from "react";
+
+const ChatGPTIcon = ({ grayscale, ...props }: SVGProps<SVGSVGElement> & { grayscale?: boolean }) => {
+    return (
+        <svg width="20" height="20" viewBox="0 0 20 20" fill="none" {...props}>
+            <path
+                d="M11.2097 18C10.6764 18 10.1697 17.8987 9.68969 17.696C9.20969 17.4933 8.78302 17.2107 8.40969 16.848C8.00435 16.9867 7.58302 17.056 7.14569 17.056C6.43102 17.056 5.76969 16.88 5.16169 16.528C4.55369 16.176 4.06302 15.696 3.68969 15.088C3.32702 14.48 3.14569 13.8027 3.14569 13.056C3.14569 12.7467 3.18835 12.4107 3.27369 12.048C2.84702 11.6533 2.51635 11.2 2.28169 10.688C2.04702 10.1653 1.92969 9.62133 1.92969 9.056C1.92969 8.48 2.05235 7.92533 2.29769 7.392C2.54302 6.85867 2.88435 6.4 3.32169 6.016C3.76969 5.62133 4.28702 5.34933 4.87369 5.2C4.99102 4.592 5.23635 4.048 5.60969 3.568C5.99369 3.07733 6.46302 2.69333 7.01769 2.416C7.57235 2.13867 8.16435 2 8.79369 2C9.32702 2 9.83369 2.10133 10.3137 2.304C10.7937 2.50667 11.2204 2.78933 11.5937 3.152C11.999 3.01333 12.4204 2.944 12.8577 2.944C13.5724 2.944 14.2337 3.12 14.8417 3.472C15.4497 3.824 15.935 4.304 16.2977 4.912C16.671 5.52 16.8577 6.19733 16.8577 6.944C16.8577 7.25333 16.815 7.58933 16.7297 7.952C17.1564 8.34667 17.487 8.80533 17.7217 9.328C17.9564 9.84 18.0737 10.3787 18.0737 10.944C18.0737 11.52 17.951 12.0747 17.7057 12.608C17.4604 13.1413 17.1137 13.6053 16.6657 14C16.2284 14.384 15.7164 14.6507 15.1297 14.8C15.0124 15.408 14.7617 15.952 14.3777 16.432C14.0044 16.9227 13.5404 17.3067 12.9857 17.584C12.431 17.8613 11.839 18 11.2097 18ZM7.25769 16C7.79102 16 8.25502 15.888 8.64969 15.664L11.6577 13.936C11.7644 13.8613 11.8177 13.76 11.8177 13.632V12.256L7.94569 14.48C7.71102 14.6187 7.47635 14.6187 7.24169 14.48L4.21769 12.736C4.21769 12.768 4.21235 12.8053 4.20169 12.848C4.20169 12.8907 4.20169 12.9547 4.20169 13.04C4.20169 13.584 4.32969 14.0853 4.58569 14.544C4.85235 14.992 5.22035 15.344 5.68969 15.6C6.15902 15.8667 6.68169 16 7.25769 16ZM7.41769 13.392C7.48169 13.424 7.54035 13.44 7.59369 13.44C7.64702 13.44 7.70035 13.424 7.75369 13.392L8.95369 12.704L5.09769 10.464C4.86302 10.3253 4.74569 10.1173 4.74569 9.84V6.368C4.21235 6.60267 3.78569 6.96533 3.46569 7.456C3.14569 7.936 2.98569 8.46933 2.98569 9.056C2.98569 9.57867 3.11902 10.08 3.38569 10.56C3.65235 11.04 3.99902 11.4027 4.42569 11.648L7.41769 13.392ZM11.2097 16.944C11.775 16.944 12.287 16.816 12.7457 16.56C13.2044 16.304 13.567 15.952 13.8337 15.504C14.1004 15.056 14.2337 14.5547 14.2337 14V10.544C14.2337 10.416 14.1804 10.32 14.0737 10.256L12.8577 9.552V14.016C12.8577 14.2933 12.7404 14.5013 12.5057 14.64L9.48169 16.384C10.0044 16.7573 10.5804 16.944 11.2097 16.944ZM11.8177 11.088V8.912L10.0097 7.888L8.18569 8.912V11.088L10.0097 12.112L11.8177 11.088ZM7.14569 5.984C7.14569 5.70667 7.26302 5.49867 7.49769 5.36L10.5217 3.616C9.99902 3.24267 9.42302 3.056 8.79369 3.056C8.22835 3.056 7.71635 3.184 7.25769 3.44C6.79902 3.696 6.43635 4.048 6.16969 4.496C5.91369 4.944 5.78569 5.44533 5.78569 6V9.44C5.78569 9.568 5.83902 9.66933 5.94569 9.744L7.14569 10.448V5.984ZM15.2737 13.632C15.807 13.3973 16.2284 13.0347 16.5377 12.544C16.8577 12.0533 17.0177 11.52 17.0177 10.944C17.0177 10.4213 16.8844 9.92 16.6177 9.44C16.351 8.96 16.0044 8.59733 15.5777 8.352L12.5857 6.624C12.5217 6.58133 12.463 6.56533 12.4097 6.576C12.3564 6.576 12.303 6.592 12.2497 6.624L11.0497 7.296L14.9217 9.552C15.039 9.616 15.1244 9.70133 15.1777 9.808C15.2417 9.904 15.2737 10.0213 15.2737 10.16V13.632ZM12.0577 5.504C12.2924 5.35467 12.527 5.35467 12.7617 5.504L15.8017 7.28C15.8017 7.20533 15.8017 7.10933 15.8017 6.992C15.8017 6.48 15.6737 5.99467 15.4177 5.536C15.1724 5.06667 14.815 4.69333 14.3457 4.416C13.887 4.13867 13.3537 4 12.7457 4C12.2124 4 11.7484 4.112 11.3537 4.336L8.34569 6.064C8.23902 6.13867 8.18569 6.24 8.18569 6.368V7.744L12.0577 5.504Z"
+                className={grayscale ? "fill-fg-quaternary" : "fill-[#000]"}
+            />
+        </svg>
+    );
+};
+
+export default ChatGPTIcon;
diff --git a/src/components/foundations/integration-icons/claude-icon.tsx b/src/components/foundations/integration-icons/claude-icon.tsx
new file mode 100644
index 0000000..01f797f
--- /dev/null
+++ b/src/components/foundations/integration-icons/claude-icon.tsx
@@ -0,0 +1,14 @@
+import type { SVGProps } from "react";
+
+const ClaudeIcon = ({ grayscale, ...props }: SVGProps<SVGSVGElement> & { grayscale?: boolean }) => {
+    return (
+        <svg width="20" height="20" viewBox="0 0 20 20" fill="none" {...props}>
+            <path
+                d="M4.68092 12.639L7.83292 10.879L7.88092 10.719L7.83292 10.639H7.67292L7.14492 10.607L5.35292 10.559L3.78492 10.479L2.26492 10.399L1.88092 10.319L1.54492 9.83902L1.57692 9.59902L1.89692 9.39102L2.36092 9.42302L3.36892 9.50302L4.88892 9.59902L5.99292 9.66302L7.62492 9.85502H7.88092L7.91292 9.74302L7.83292 9.67902L7.76892 9.61502L6.18492 8.55902L4.48892 7.43902L3.59292 6.78302L3.11292 6.46302L2.87292 6.14302L2.77692 5.47102L3.20892 4.99102L3.80092 5.03902L3.94492 5.07102L4.53692 5.53502L5.81692 6.51102L7.46492 7.75902L7.70492 7.95102L7.80092 7.88702L7.81692 7.83902L7.70492 7.66302L6.82492 5.99902L5.86492 4.33502L5.43292 3.64702L5.32092 3.23102C5.27292 3.07102 5.25692 2.91102 5.25692 2.75102L5.73692 2.07902L6.02492 1.99902L6.69692 2.09502L6.95292 2.31902L7.36892 3.27902L8.02492 4.76702L9.06492 6.78302L9.38492 7.39102L9.54492 7.93502L9.59292 8.09502H9.70492V8.01502L9.78492 6.86302L9.94492 5.47102L10.1049 3.67902L10.1529 3.16702L10.4089 2.55902L10.8889 2.23902L11.3049 2.41502L11.6249 2.87902L11.5769 3.16702L11.4009 4.39902L10.9849 6.33502L10.7449 7.64702H10.8889L11.0489 7.47102L11.7049 6.60702L12.8089 5.23102L13.2889 4.67102L13.8649 4.07902L14.2329 3.79102H14.9209L15.4169 4.54302L15.1929 5.32702L14.4889 6.22302L13.8969 6.97502L13.0489 8.11102L12.5369 9.02302L12.5849 9.08702H12.6969L14.6169 8.67102L15.6409 8.49502L16.8569 8.28702L17.4169 8.54302L17.4809 8.79902L17.2569 9.34302L15.9449 9.66302L14.4089 9.98302L12.1209 10.511L12.0889 10.527L12.1209 10.575L13.1449 10.671L13.5929 10.703H14.6809L16.6969 10.863L17.2249 11.183L17.5289 11.615L17.4809 11.935L16.6649 12.351L15.5769 12.095L13.0169 11.487L12.1529 11.279H12.0249V11.343L12.7609 12.063L14.0889 13.263L15.7849 14.815L15.8649 15.199L15.6569 15.519L15.4329 15.487L13.9609 14.367L13.3849 13.887L12.1049 12.799H12.0249V12.911L12.3129 13.343L13.8809 15.695L13.9609 16.415L13.8489 16.639L13.4329 16.799L13.0009 16.703L12.0729 15.423L11.1129 13.983L10.3609 12.671L10.2809 12.735L9.81692 17.567L9.60892 17.807L9.12892 17.999L8.72892 17.679L8.50492 17.199L8.72892 16.207L8.98492 14.927L9.19292 13.903L9.38492 12.639L9.49692 12.223V12.191H9.38492L8.42492 13.519L6.98492 15.487L5.83292 16.703L5.56092 16.815L5.08092 16.575L5.12892 16.127L5.38492 15.759L6.98492 13.711L7.94492 12.447L8.58492 11.711L8.56892 11.631H8.52092L4.29692 14.383L3.54492 14.479L3.22492 14.159L3.25692 13.679L3.41692 13.519L4.69692 12.639H4.68092Z"
+                className={grayscale ? "fill-fg-quaternary" : "fill-[#D97757]"}
+            />
+        </svg>
+    );
+};
+
+export default ClaudeIcon;
diff --git a/src/components/foundations/integration-icons/cursor-icon.tsx b/src/components/foundations/integration-icons/cursor-icon.tsx
new file mode 100644
index 0000000..1569172
--- /dev/null
+++ b/src/components/foundations/integration-icons/cursor-icon.tsx
@@ -0,0 +1,14 @@
+import type { SVGProps } from "react";
+
+const CursorIcon = ({ grayscale, ...props }: SVGProps<SVGSVGElement> & { grayscale?: boolean }) => {
+    return (
+        <svg width="20" height="20" viewBox="0 0 20 20" fill="none" {...props}>
+            <path
+                d="M16.9301 5.52368L10.1245 1.59453C9.90599 1.46833 9.63633 1.46833 9.4178 1.59453L2.61256 5.52368C2.42885 5.62975 2.31543 5.82592 2.31543 6.03838V13.9615C2.31543 14.174 2.42885 14.3702 2.61256 14.4762L9.41812 18.4054C9.63665 18.5316 9.90631 18.5316 10.1248 18.4054L16.9304 14.4762C17.1141 14.3702 17.2275 14.174 17.2275 13.9615V6.03838C17.2275 5.82592 17.1141 5.62975 16.9304 5.52368H16.9301ZM16.5026 6.35596L9.93283 17.7351C9.88842 17.8118 9.77116 17.7805 9.77116 17.6916V10.2407C9.77116 10.0918 9.69161 9.95411 9.56253 9.87935L3.11001 6.15404C3.03333 6.10963 3.06465 5.99237 3.15346 5.99237H16.293C16.4796 5.99237 16.5962 6.19461 16.5029 6.35628H16.5026V6.35596Z"
+                className={grayscale ? "fill-fg-quaternary" : "fill-[#000]"}
+            />
+        </svg>
+    );
+};
+
+export default CursorIcon;
diff --git a/src/components/foundations/integration-icons/figma-icon.tsx b/src/components/foundations/integration-icons/figma-icon.tsx
new file mode 100644
index 0000000..89c81e5
--- /dev/null
+++ b/src/components/foundations/integration-icons/figma-icon.tsx
@@ -0,0 +1,40 @@
+import type { SVGProps } from "react";
+
+const FigmaIcon = ({ grayscale, ...props }: SVGProps<SVGSVGElement> & { grayscale?: boolean }) => {
+    if (grayscale) {
+        return (
+            <svg width="20" height="20" viewBox="0 0 20 20" fill="none" {...props}>
+                <path
+                    fillRule="evenodd"
+                    clipRule="evenodd"
+                    d="M7.49967 3.33333C7.00867 3.33333 6.54071 3.52419 6.19799 3.8593C5.85577 4.19391 5.66634 4.64451 5.66634 5.11111C5.66634 5.57771 5.85577 6.02831 6.19799 6.36292C6.54071 6.69803 7.00867 6.88889 7.49967 6.88889H9.33301V3.33333H7.49967ZM10.6663 3.33333V6.88889H12.4997C12.7425 6.88889 12.9826 6.84211 13.2061 6.75157C13.4297 6.66105 13.6318 6.52874 13.8013 6.36292C13.9709 6.19714 14.1046 6.00114 14.1955 5.78651C14.2864 5.57192 14.333 5.34247 14.333 5.11111C14.333 4.87976 14.2864 4.6503 14.1955 4.43571C14.1046 4.22108 13.9709 4.02509 13.8013 3.8593C13.6318 3.69348 13.4297 3.56118 13.2061 3.47065C12.9826 3.38011 12.7425 3.33333 12.4997 3.33333H10.6663ZM14.4586 7.55556C14.5546 7.48127 14.6465 7.40141 14.7335 7.31627C15.0283 7.02807 15.2629 6.68513 15.4232 6.30661C15.5836 5.92805 15.6663 5.52177 15.6663 5.11111C15.6663 4.70045 15.5836 4.29417 15.4232 3.91561C15.2629 3.53709 15.0283 3.19415 14.7335 2.90596C14.4388 2.6178 14.0897 2.38999 13.7067 2.23483C13.3235 2.07967 12.9135 2 12.4997 2H7.49967C6.66459 2 5.86079 2.32422 5.26583 2.90596C4.67036 3.48819 4.33301 4.2811 4.33301 5.11111C4.33301 5.94113 4.67036 6.73403 5.26583 7.31627C5.35315 7.40165 5.44497 7.48148 5.54073 7.55555C5.44497 7.62963 5.35315 7.70947 5.26583 7.79485C4.67036 8.37708 4.33301 9.17 4.33301 10C4.33301 10.83 4.67036 11.6229 5.26583 12.2051C5.35315 12.2905 5.44497 12.3704 5.54073 12.4445C5.44497 12.5185 5.35315 12.5983 5.26583 12.6837C4.67036 13.266 4.33301 14.0589 4.33301 14.8889C4.33301 15.7189 4.67036 16.5118 5.26583 17.0941C5.86079 17.6758 6.66459 18 7.49967 18C8.33474 18 9.13854 17.6758 9.73354 17.0941C10.329 16.5118 10.6663 15.7189 10.6663 14.8889V12.5367C10.8611 12.6726 11.0712 12.7866 11.2927 12.8763C11.6758 13.0315 12.0859 13.1111 12.4997 13.1111C12.9135 13.1111 13.3235 13.0315 13.7067 12.8763C14.0897 12.7211 14.4388 12.4933 14.7335 12.2051C15.0283 11.9169 15.2629 11.574 15.4232 11.1955C15.5836 10.8169 15.6663 10.4107 15.6663 10C15.6663 9.58933 15.5836 9.18307 15.4232 8.80453C15.2629 8.42599 15.0283 8.08304 14.7335 7.79485C14.6465 7.70971 14.5546 7.62984 14.4586 7.55556ZM9.33301 11.7778V8.22222H7.49967C7.00867 8.22222 6.54071 8.41308 6.19799 8.7482C5.85577 9.0828 5.66634 9.5334 5.66634 10C5.66634 10.4666 5.85577 10.9172 6.19799 11.2518C6.54071 11.5869 7.00867 11.7778 7.49967 11.7778H9.33301ZM9.33301 13.1111H7.49967C7.00867 13.1111 6.54071 13.302 6.19799 13.6371C5.85577 13.9717 5.66634 14.4223 5.66634 14.8889C5.66634 15.3555 5.85577 15.8061 6.19799 16.1407C6.54071 16.4758 7.00867 16.6667 7.49967 16.6667C7.99068 16.6667 8.45861 16.4758 8.80134 16.1407C9.14361 15.8061 9.33301 15.3555 9.33301 14.8889V13.1111ZM12.4997 8.22222C12.2569 8.22222 12.0167 8.269 11.7932 8.35954C11.5697 8.45007 11.3675 8.58237 11.198 8.7482C11.0284 8.914 10.8947 9.11 10.8038 9.3246C10.7129 9.5392 10.6663 9.76867 10.6663 10C10.6663 10.2313 10.7129 10.4608 10.8038 10.6754C10.8947 10.89 11.0284 11.086 11.198 11.2518C11.3675 11.4176 11.5697 11.5499 11.7932 11.6405C12.0167 11.731 12.2569 11.7778 12.4997 11.7778C12.7425 11.7778 12.9826 11.731 13.2061 11.6405C13.4297 11.5499 13.6318 11.4176 13.8013 11.2518C13.9709 11.086 14.1046 10.89 14.1955 10.6754C14.2864 10.4608 14.333 10.2313 14.333 10C14.333 9.76867 14.2864 9.5392 14.1955 9.3246C14.1046 9.11 13.9709 8.914 13.8013 8.7482C13.6318 8.58237 13.4297 8.45007 13.2061 8.35954C12.9826 8.269 12.7425 8.22222 12.4997 8.22222Z"
+                    className="fill-fg-quaternary"
+                />
+            </svg>
+        );
+    }
+
+    return (
+        <svg width="20" height="20" viewBox="0 0 20 20" fill="none" {...props}>
+            <path
+                d="M7.3337 17.9999C8.80572 17.9999 10.0004 16.8053 10.0004 15.3333V12.6666H7.3337C5.86169 12.6666 4.66699 13.8613 4.66699 15.3333C4.66699 16.8053 5.86169 17.9999 7.3337 17.9999Z"
+                fill="#24CB71"
+            />
+            <path
+                d="M4.66699 10C4.66699 8.528 5.86169 7.33331 7.3337 7.33331H10.0004V12.6666H7.3337C5.86169 12.6667 4.66699 11.472 4.66699 10Z"
+                fill="#874FFF"
+            />
+            <path
+                d="M4.66699 4.66669C4.66699 3.19469 5.86169 2 7.3337 2H10.0004V7.33332H7.3337C5.86169 7.33332 4.66699 6.13869 4.66699 4.66669Z"
+                fill="#FF3737"
+            />
+            <path d="M10 2H12.6667C14.1387 2 15.3334 3.19469 15.3334 4.66669C15.3334 6.13869 14.1387 7.33332 12.6667 7.33332H10V2Z" fill="#FF7237" />
+            <path
+                d="M15.3334 10C15.3334 11.472 14.1387 12.6667 12.6667 12.6667C11.1947 12.6667 10 11.472 10 10C10 8.528 11.1947 7.33331 12.6667 7.33331C14.1387 7.33331 15.3334 8.528 15.3334 10Z"
+                fill="#00B6FF"
+            />
+        </svg>
+    );
+};
+
+export default FigmaIcon;
diff --git a/src/components/foundations/integration-icons/gemini-icon.tsx b/src/components/foundations/integration-icons/gemini-icon.tsx
new file mode 100644
index 0000000..afb8672
--- /dev/null
+++ b/src/components/foundations/integration-icons/gemini-icon.tsx
@@ -0,0 +1,240 @@
+import type { SVGProps } from "react";
+
+const GeminiIcon = ({ grayscale, ...props }: SVGProps<SVGSVGElement> & { grayscale?: boolean }) => {
+    if (grayscale) {
+        return (
+            <svg width="20" height="20" viewBox="0 0 20 20" fill="none" {...props}>
+                <path
+                    d="M9.81623 1.00006C10.005 1.00006 10.1692 1.12898 10.2152 1.3121C10.3564 1.87222 10.5405 2.41856 10.7697 2.95003C11.3666 4.33676 12.1857 5.55055 13.2256 6.59048C14.266 7.63039 15.4794 8.44948 16.8661 9.04643C17.398 9.27557 17.9439 9.45971 18.504 9.60089C18.6871 9.64693 18.816 9.81114 18.816 9.99988C18.816 10.1886 18.6871 10.3528 18.504 10.3988C17.9439 10.54 17.3975 10.7242 16.8661 10.9533C15.4793 11.5503 14.2655 12.3694 13.2256 13.4093C12.1857 14.4497 11.3666 15.663 10.7697 17.0497C10.5405 17.5817 10.3564 18.1276 10.2152 18.6876C10.1692 18.8708 10.005 18.9997 9.81623 18.9997C9.62748 18.9997 9.46328 18.8708 9.41724 18.6876C9.27606 18.1276 9.09191 17.5812 8.86278 17.0497C8.26583 15.663 7.44723 14.4492 6.40683 13.4093C5.36637 12.3694 4.15311 11.5503 2.76637 10.9533C2.23439 10.7242 1.68856 10.54 1.12844 10.3988C0.945322 10.3528 0.816406 10.1886 0.816406 9.99988C0.81643 9.81114 0.945334 9.64693 1.12844 9.60089C1.68857 9.45971 2.2349 9.27559 2.76637 9.04643C4.15314 8.44946 5.3669 7.63042 6.40683 6.59048C7.44676 5.55055 8.2658 4.33679 8.86278 2.95003C9.09194 2.41804 9.27606 1.87222 9.41724 1.3121C9.46328 1.12899 9.62748 1.00009 9.81623 1.00006Z"
+                    className="fill-fg-quaternary"
+                />
+            </svg>
+        );
+    }
+
+    return (
+        <svg width="20" height="20" viewBox="0 0 20 20" fill="none" {...props}>
+            <mask id="mask0_12464_573808" style={{ maskType: "alpha" }} maskUnits="userSpaceOnUse" x="0" y="1" width="19" height="18">
+                <path
+                    d="M9.81623 1.00006C10.005 1.00006 10.1692 1.12898 10.2152 1.3121C10.3564 1.87222 10.5405 2.41856 10.7697 2.95003C11.3666 4.33676 12.1857 5.55055 13.2256 6.59048C14.266 7.63039 15.4794 8.44948 16.8661 9.04643C17.398 9.27557 17.9439 9.45971 18.504 9.60089C18.6871 9.64693 18.816 9.81114 18.816 9.99988C18.816 10.1886 18.6871 10.3528 18.504 10.3988C17.9439 10.54 17.3975 10.7242 16.8661 10.9533C15.4793 11.5503 14.2655 12.3694 13.2256 13.4093C12.1857 14.4497 11.3666 15.663 10.7697 17.0497C10.5405 17.5817 10.3564 18.1276 10.2152 18.6876C10.1692 18.8708 10.005 18.9997 9.81623 18.9997C9.62748 18.9997 9.46328 18.8708 9.41724 18.6876C9.27606 18.1276 9.09191 17.5812 8.86278 17.0497C8.26583 15.663 7.44723 14.4492 6.40683 13.4093C5.36637 12.3694 4.15311 11.5503 2.76637 10.9533C2.23439 10.7242 1.68856 10.54 1.12844 10.3988C0.945322 10.3528 0.816406 10.1886 0.816406 9.99988C0.81643 9.81114 0.945334 9.64693 1.12844 9.60089C1.68857 9.45971 2.2349 9.27559 2.76637 9.04643C4.15314 8.44946 5.3669 7.63042 6.40683 6.59048C7.44676 5.55055 8.2658 4.33679 8.86278 2.95003C9.09194 2.41804 9.27606 1.87222 9.41724 1.3121C9.46328 1.12899 9.62748 1.00009 9.81623 1.00006Z"
+                    fill="white"
+                />
+            </mask>
+            <g mask="url(#mask0_12464_573808)">
+                <g filter="url(#filter0_f_12464_573808)">
+                    <path
+                        d="M-0.556829 15.0005C1.5229 15.7391 3.91327 14.3542 4.78221 11.9074C5.65115 9.46054 4.66962 6.87825 2.5899 6.13967C0.51017 5.4011 -1.8802 6.78593 -2.74914 9.23278C-3.61809 11.6796 -2.63655 14.2619 -0.556829 15.0005Z"
+                        fill="#FFE432"
+                    />
+                </g>
+                <g filter="url(#filter1_f_12464_573808)">
+                    <path
+                        d="M8.67823 6.93344C11.5354 6.93344 13.8516 4.56633 13.8516 1.64635C13.8516 -1.27363 11.5354 -3.64075 8.67823 -3.64075C5.82107 -3.64075 3.50488 -1.27363 3.50488 1.64635C3.50488 4.56633 5.82107 6.93344 8.67823 6.93344Z"
+                        fill="#FC413D"
+                    />
+                </g>
+                <g filter="url(#filter2_f_12464_573808)">
+                    <path
+                        d="M6.66738 23.8414C9.64993 23.6956 11.9147 20.4452 11.7258 16.5814C11.5369 12.7176 8.96594 9.70361 5.98339 9.84941C3.00084 9.99521 0.736124 13.2456 0.925003 17.1094C1.11388 20.9732 3.68483 23.9872 6.66738 23.8414Z"
+                        fill="#00B95C"
+                    />
+                </g>
+                <g filter="url(#filter3_f_12464_573808)">
+                    <path
+                        d="M6.66738 23.8414C9.64993 23.6956 11.9147 20.4452 11.7258 16.5814C11.5369 12.7176 8.96594 9.70361 5.98339 9.84941C3.00084 9.99521 0.736124 13.2456 0.925003 17.1094C1.11388 20.9732 3.68483 23.9872 6.66738 23.8414Z"
+                        fill="#00B95C"
+                    />
+                </g>
+                <g filter="url(#filter4_f_12464_573808)">
+                    <path
+                        d="M9.65501 21.5033C12.1554 19.982 12.8246 16.5172 11.1498 13.7645C9.47496 11.0118 6.09026 10.0136 3.58987 11.5349C1.08947 13.0562 0.420228 16.521 2.09507 19.2737C3.76991 22.0264 7.15461 23.0246 9.65501 21.5033Z"
+                        fill="#00B95C"
+                    />
+                </g>
+                <g filter="url(#filter5_f_12464_573808)">
+                    <path
+                        d="M19.7615 12.8537C22.5719 12.8537 24.8502 10.6598 24.8502 7.95354C24.8502 5.24724 22.5719 3.05334 19.7615 3.05334C16.9511 3.05334 14.6729 5.24724 14.6729 7.95354C14.6729 10.6598 16.9511 12.8537 19.7615 12.8537Z"
+                        fill="#3186FF"
+                    />
+                </g>
+                <g filter="url(#filter6_f_12464_573808)">
+                    <path
+                        d="M-2.5546 12.2848C0.0330789 14.2527 3.8134 13.6353 5.88898 10.9059C7.96457 8.17651 7.54944 4.36866 4.96177 2.40083C2.37409 0.433008 -1.40623 1.05038 -3.48181 3.77977C-5.5574 6.50916 -5.14227 10.317 -2.5546 12.2848Z"
+                        fill="#FBBC04"
+                    />
+                </g>
+                <g filter="url(#filter7_f_12464_573808)">
+                    <path
+                        d="M10.7045 15.1936C13.7931 17.3171 17.8873 16.7256 19.849 13.8723C21.8107 11.019 20.8971 6.98443 17.8084 4.86089C14.7197 2.73734 10.6256 3.32893 8.66386 6.18223C6.70216 9.03553 7.61577 13.0701 10.7045 15.1936Z"
+                        fill="#3186FF"
+                    />
+                </g>
+                <g filter="url(#filter8_f_12464_573808)">
+                    <path
+                        d="M16.32 0.2798C17.1058 1.34817 16.0961 3.42543 14.0648 4.91948C12.0335 6.41354 9.74972 6.75862 8.96394 5.69025C8.17813 4.62189 9.18786 2.54463 11.2192 1.05057C13.2505 -0.443482 15.5342 -0.788569 16.32 0.2798Z"
+                        fill="#749BFF"
+                    />
+                </g>
+                <g filter="url(#filter9_f_12464_573808)">
+                    <path
+                        d="M9.86869 5.39516C13.0101 2.48126 14.0884 -1.46398 12.277 -3.41679C10.4656 -5.3696 6.45061 -4.59048 3.30917 -1.67659C0.167732 1.23731 -0.910508 5.18255 0.900853 7.13536C2.71221 9.08817 6.72725 8.30905 9.86869 5.39516Z"
+                        fill="#FC413D"
+                    />
+                </g>
+                <g filter="url(#filter10_f_12464_573808)">
+                    <path
+                        d="M3.42971 15.861C5.29682 17.1973 7.44041 17.4004 8.21755 16.3146C8.99469 15.2288 8.1111 13.2652 6.24399 11.9289C4.37687 10.5926 2.23329 10.3895 1.45615 11.4753C0.679006 12.5611 1.5626 14.5247 3.42971 15.861Z"
+                        fill="#FFEE48"
+                    />
+                </g>
+            </g>
+            <defs>
+                <filter
+                    id="filter0_f_12464_573808"
+                    x="-4.42988"
+                    y="4.57659"
+                    width="10.893"
+                    height="11.987"
+                    filterUnits="userSpaceOnUse"
+                    colorInterpolationFilters="sRGB"
+                >
+                    <feFlood floodOpacity="0" result="BackgroundImageFix" />
+                    <feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape" />
+                    <feGaussianBlur stdDeviation="0.682227" result="effect1_foregroundBlur_12464_573808" />
+                </filter>
+                <filter
+                    id="filter1_f_12464_573808"
+                    x="-3.09152"
+                    y="-10.2372"
+                    width="23.5395"
+                    height="23.767"
+                    filterUnits="userSpaceOnUse"
+                    colorInterpolationFilters="sRGB"
+                >
+                    <feFlood floodOpacity="0" result="BackgroundImageFix" />
+                    <feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape" />
+                    <feGaussianBlur stdDeviation="3.2982" result="effect1_foregroundBlur_12464_573808" />
+                </filter>
+                <filter
+                    id="filter2_f_12464_573808"
+                    x="-4.69353"
+                    y="4.23677"
+                    width="22.0374"
+                    height="25.2173"
+                    filterUnits="userSpaceOnUse"
+                    colorInterpolationFilters="sRGB"
+                >
+                    <feFlood floodOpacity="0" result="BackgroundImageFix" />
+                    <feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape" />
+                    <feGaussianBlur stdDeviation="2.8038" result="effect1_foregroundBlur_12464_573808" />
+                </filter>
+                <filter
+                    id="filter3_f_12464_573808"
+                    x="-4.69353"
+                    y="4.23677"
+                    width="22.0374"
+                    height="25.2173"
+                    filterUnits="userSpaceOnUse"
+                    colorInterpolationFilters="sRGB"
+                >
+                    <feFlood floodOpacity="0" result="BackgroundImageFix" />
+                    <feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape" />
+                    <feGaussianBlur stdDeviation="2.8038" result="effect1_foregroundBlur_12464_573808" />
+                </filter>
+                <filter
+                    id="filter4_f_12464_573808"
+                    x="-4.43474"
+                    y="5.21571"
+                    width="22.1146"
+                    height="22.6068"
+                    filterUnits="userSpaceOnUse"
+                    colorInterpolationFilters="sRGB"
+                >
+                    <feFlood floodOpacity="0" result="BackgroundImageFix" />
+                    <feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape" />
+                    <feGaussianBlur stdDeviation="2.8038" result="effect1_foregroundBlur_12464_573808" />
+                </filter>
+                <filter
+                    id="filter5_f_12464_573808"
+                    x="9.344"
+                    y="-2.27551"
+                    width="20.8354"
+                    height="20.4581"
+                    filterUnits="userSpaceOnUse"
+                    colorInterpolationFilters="sRGB"
+                >
+                    <feFlood floodOpacity="0" result="BackgroundImageFix" />
+                    <feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape" />
+                    <feGaussianBlur stdDeviation="2.66443" result="effect1_foregroundBlur_12464_573808" />
+                </filter>
+                <filter
+                    id="filter6_f_12464_573808"
+                    x="-9.63221"
+                    y="-3.57959"
+                    width="21.6716"
+                    height="21.8449"
+                    filterUnits="userSpaceOnUse"
+                    colorInterpolationFilters="sRGB"
+                >
+                    <feFlood floodOpacity="0" result="BackgroundImageFix" />
+                    <feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape" />
+                    <feGaussianBlur stdDeviation="2.41474" result="effect1_foregroundBlur_12464_573808" />
+                </filter>
+                <filter
+                    id="filter7_f_12464_573808"
+                    x="3.31795"
+                    y="-0.726182"
+                    width="21.8778"
+                    height="21.5069"
+                    filterUnits="userSpaceOnUse"
+                    colorInterpolationFilters="sRGB"
+                >
+                    <feFlood floodOpacity="0" result="BackgroundImageFix" />
+                    <feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape" />
+                    <feGaussianBlur stdDeviation="2.15646" result="effect1_foregroundBlur_12464_573808" />
+                </filter>
+                <filter
+                    id="filter8_f_12464_573808"
+                    x="4.83801"
+                    y="-4.2002"
+                    width="15.6082"
+                    height="14.3704"
+                    filterUnits="userSpaceOnUse"
+                    colorInterpolationFilters="sRGB"
+                >
+                    <feFlood floodOpacity="0" result="BackgroundImageFix" />
+                    <feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape" />
+                    <feGaussianBlur stdDeviation="1.92963" result="effect1_foregroundBlur_12464_573808" />
+                </filter>
+                <filter
+                    id="filter9_f_12464_573808"
+                    x="-3.23813"
+                    y="-7.75229"
+                    width="19.654"
+                    height="19.2231"
+                    filterUnits="userSpaceOnUse"
+                    colorInterpolationFilters="sRGB"
+                >
+                    <feFlood floodOpacity="0" result="BackgroundImageFix" />
+                    <feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape" />
+                    <feGaussianBlur stdDeviation="1.62981" result="effect1_foregroundBlur_12464_573808" />
+                </filter>
+                <filter
+                    id="filter10_f_12464_573808"
+                    x="-2.8605"
+                    y="6.74284"
+                    width="15.3948"
+                    height="14.3042"
+                    filterUnits="userSpaceOnUse"
+                    colorInterpolationFilters="sRGB"
+                >
+                    <feFlood floodOpacity="0" result="BackgroundImageFix" />
+                    <feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape" />
+                    <feGaussianBlur stdDeviation="2.01716" result="effect1_foregroundBlur_12464_573808" />
+                </filter>
+            </defs>
+        </svg>
+    );
+};
+
+export default GeminiIcon;
diff --git a/src/components/foundations/integration-icons/github-icon.tsx b/src/components/foundations/integration-icons/github-icon.tsx
new file mode 100644
index 0000000..c1c1ad1
--- /dev/null
+++ b/src/components/foundations/integration-icons/github-icon.tsx
@@ -0,0 +1,16 @@
+import type { SVGProps } from "react";
+
+const GitHubIcon = ({ grayscale, ...props }: SVGProps<SVGSVGElement> & { grayscale?: boolean }) => {
+    return (
+        <svg width="20" height="20" viewBox="0 0 20 20" fill="none" {...props}>
+            <path
+                fillRule="evenodd"
+                clipRule="evenodd"
+                d="M10 1.95386C5.5816 1.95386 2 5.54106 2 9.96746C2 13.5075 4.292 16.5115 7.4712 17.5707C7.8712 17.6443 8.0168 17.3971 8.0168 17.1843C8.0168 16.9947 8.0104 16.4899 8.0064 15.8219C5.7808 16.3059 5.3112 14.7475 5.3112 14.7475C4.948 13.8211 4.4232 13.5747 4.4232 13.5747C3.6968 13.0787 4.4784 13.0883 4.4784 13.0883C5.2808 13.1443 5.7032 13.9139 5.7032 13.9139C6.4168 15.1379 7.576 14.7843 8.0312 14.5795C8.1048 14.0619 8.3112 13.7091 8.54 13.5091C6.764 13.3067 4.896 12.6187 4.896 9.54826C4.896 8.67386 5.208 7.95786 5.7192 7.39786C5.6368 7.19546 5.3624 6.38026 5.7976 5.27786C5.7976 5.27786 6.4696 5.06186 7.9976 6.09866C8.65021 5.92067 9.32355 5.83001 10 5.82906C10.68 5.83226 11.364 5.92106 12.0032 6.09866C13.5304 5.06186 14.2008 5.27706 14.2008 5.27706C14.6376 6.38026 14.3624 7.19546 14.2808 7.39786C14.7928 7.95786 15.1032 8.67386 15.1032 9.54826C15.1032 12.6267 13.232 13.3043 11.4504 13.5027C11.7376 13.7499 11.9928 14.2387 11.9928 14.9867C11.9928 16.0571 11.9832 16.9219 11.9832 17.1843C11.9832 17.3987 12.1272 17.6483 12.5336 17.5699C14.1266 17.0355 15.5115 16.0141 16.4924 14.6499C17.4733 13.2857 18.0007 11.6477 18 9.96746C18 5.54106 14.4176 1.95386 10 1.95386Z"
+                className={grayscale ? "fill-fg-quaternary" : "fill-[#000]"}
+            />
+        </svg>
+    );
+};
+
+export default GitHubIcon;
diff --git a/src/components/foundations/integration-icons/grok-icon.tsx b/src/components/foundations/integration-icons/grok-icon.tsx
new file mode 100644
index 0000000..2cec60a
--- /dev/null
+++ b/src/components/foundations/integration-icons/grok-icon.tsx
@@ -0,0 +1,16 @@
+import type { SVGProps } from "react";
+
+const GrokIcon = ({ grayscale, ...props }: SVGProps<SVGSVGElement> & { grayscale?: boolean }) => {
+    return (
+        <svg width="20" height="20" viewBox="0 0 20 20" fill="none" {...props}>
+            <path
+                fillRule="evenodd"
+                clipRule="evenodd"
+                d="M7.725 12.725L14.3733 7.81086C14.6992 7.56919 15.165 7.66336 15.3208 8.03752C16.1375 10.0117 15.7725 12.3834 14.1458 14.0117C12.52 15.64 10.2567 15.9967 8.18833 15.1834L5.92917 16.2309C9.17 18.4484 13.105 17.9 15.5642 15.4367C17.515 13.4834 18.1192 10.8209 17.5542 8.42002L17.5592 8.42586C16.74 4.89919 17.7608 3.48919 19.8508 0.606691C19.9008 0.538358 19.9508 0.470024 20 0.400024L17.2492 3.15419V3.14586L7.7225 12.7267M6.3525 13.9192C4.02583 11.6942 4.4275 8.25169 6.41167 6.26586C7.87917 4.79669 10.2842 4.19669 12.3833 5.07836L14.6375 4.03669C14.169 3.69204 13.6564 3.41176 13.1133 3.20336C11.7482 2.64461 10.2482 2.50202 8.80224 2.79353C7.35623 3.08505 6.02872 3.79764 4.98667 4.84169C2.87583 6.95502 2.21167 10.205 3.35167 12.9784C4.20333 15.0509 2.8075 16.5167 1.40167 17.9967C0.9025 18.5217 0.4025 19.0459 0 19.6009L6.35 13.9217"
+                className={grayscale ? "fill-fg-quaternary" : "fill-[#000]"}
+            />
+        </svg>
+    );
+};
+
+export default GrokIcon;
diff --git a/src/components/foundations/integration-icons/index.tsx b/src/components/foundations/integration-icons/index.tsx
new file mode 100644
index 0000000..2889026
--- /dev/null
+++ b/src/components/foundations/integration-icons/index.tsx
@@ -0,0 +1,16 @@
+export { default as BoltIcon } from "./bolt-icon";
+export { default as ChatGPTIcon } from "./chatgpt-icon";
+export { default as ClaudeIcon } from "./claude-icon";
+export { default as CursorIcon } from "./cursor-icon";
+export { default as FigmaIcon } from "./figma-icon";
+export { default as GeminiIcon } from "./gemini-icon";
+export { default as GitHubIcon } from "./github-icon";
+export { default as GrokIcon } from "./grok-icon";
+export { default as LovableIcon } from "./lovable-icon";
+export { default as NextjsIcon } from "./nextjs-icon";
+export { default as PerplexityIcon } from "./perplexity-icon";
+export { default as ReactIcon } from "./react-icon";
+export { default as ReplitIcon } from "./replit-icon";
+export { default as TailwindCSSIcon } from "./tailwind-css-icon";
+export { default as V0Icon } from "./v0-icon";
+export { default as ViteIcon } from "./vite-icon";
diff --git a/src/components/foundations/integration-icons/lovable-icon.tsx b/src/components/foundations/integration-icons/lovable-icon.tsx
new file mode 100644
index 0000000..c61d627
--- /dev/null
+++ b/src/components/foundations/integration-icons/lovable-icon.tsx
@@ -0,0 +1,123 @@
+import type { SVGProps } from "react";
+
+const LovableIcon = ({ grayscale, ...props }: SVGProps<SVGSVGElement> & { grayscale?: boolean }) => {
+    if (grayscale) {
+        return (
+            <svg width="20" height="20" viewBox="0 0 20 20" fill="none" {...props}>
+                <g clipPath="url(#clip0_12464_573798)">
+                    <path
+                        fillRule="evenodd"
+                        clipRule="evenodd"
+                        d="M7.63094 2.5C9.91191 2.5 11.7619 4.35417 11.7619 6.64214V8.21643H13.1367C15.4178 8.21643 17.2677 10.0706 17.2677 12.3585C17.2677 14.6452 15.4185 16.5 13.1367 16.5H3.5V6.64144C3.5 4.35417 5.34927 2.5 7.63094 2.5Z"
+                        className="fill-fg-quaternary"
+                    />
+                </g>
+                <defs>
+                    <clipPath id="clip0_12464_573798">
+                        <rect width="14" height="14" fill="white" transform="translate(3.5 2.5)" />
+                    </clipPath>
+                </defs>
+            </svg>
+        );
+    }
+
+    return (
+        <svg width="20" height="20" viewBox="0 0 20 20" fill="none" {...props}>
+            <g clipPath="url(#clip0_12464_573784)">
+                <mask id="mask0_12464_573784" style={{ maskType: "alpha" }} maskUnits="userSpaceOnUse" x="3" y="2" width="15" height="15">
+                    <path
+                        fillRule="evenodd"
+                        clipRule="evenodd"
+                        d="M7.63094 2.5C9.91191 2.5 11.7619 4.35417 11.7619 6.64214V8.21643H13.1367C15.4178 8.21643 17.2677 10.0706 17.2677 12.3585C17.2677 14.6452 15.4185 16.5 13.1367 16.5H3.5V6.64144C3.5 4.35417 5.34927 2.5 7.63094 2.5Z"
+                        fill="black"
+                    />
+                </mask>
+                <g mask="url(#mask0_12464_573784)">
+                    <g filter="url(#filter0_f_12464_573784)">
+                        <path
+                            d="M9.54051 19.2936C14.6877 19.2936 18.8603 15.121 18.8603 9.9738C18.8603 4.82661 14.6877 0.653992 9.54051 0.653992C4.39332 0.653992 0.220703 4.82661 0.220703 9.9738C0.220703 15.121 4.39332 19.2936 9.54051 19.2936Z"
+                            fill="#4B73FF"
+                        />
+                    </g>
+                    <g filter="url(#filter1_f_12464_573784)">
+                        <path
+                            d="M10.5639 14.1778C17.1559 14.1778 22.4998 10.0051 22.4998 4.85795C22.4998 -0.289241 17.1559 -4.46185 10.5639 -4.46185C3.97183 -4.46185 -1.37207 -0.289241 -1.37207 4.85795C-1.37207 10.0051 3.97183 14.1778 10.5639 14.1778Z"
+                            fill="#FF66F4"
+                        />
+                    </g>
+                    <g filter="url(#filter2_f_12464_573784)">
+                        <path
+                            d="M12.5102 11.2888C17.6574 11.2888 21.83 7.62426 21.83 3.10386C21.83 -1.41655 17.6574 -5.08105 12.5102 -5.08105C7.36305 -5.08105 3.19043 -1.41655 3.19043 3.10386C3.19043 7.62426 7.36305 11.2888 12.5102 11.2888Z"
+                            fill="#FF0105"
+                        />
+                    </g>
+                    <g filter="url(#filter3_f_12464_573784)">
+                        <path
+                            d="M10.7302 10.4605C13.8259 10.4605 16.3354 7.95102 16.3354 4.85536C16.3354 1.75971 13.8259 -0.749817 10.7302 -0.749817C7.63452 -0.749817 5.125 1.75971 5.125 4.85536C5.125 7.95102 7.63452 10.4605 10.7302 10.4605Z"
+                            fill="#FE7B02"
+                        />
+                    </g>
+                </g>
+            </g>
+            <defs>
+                <filter
+                    id="filter0_f_12464_573784"
+                    x="-3.01305"
+                    y="-2.57976"
+                    width="25.1072"
+                    height="25.1072"
+                    filterUnits="userSpaceOnUse"
+                    colorInterpolationFilters="sRGB"
+                >
+                    <feFlood floodOpacity="0" result="BackgroundImageFix" />
+                    <feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape" />
+                    <feGaussianBlur stdDeviation="1.61688" result="effect1_foregroundBlur_12464_573784" />
+                </filter>
+                <filter
+                    id="filter1_f_12464_573784"
+                    x="-4.60583"
+                    y="-7.69561"
+                    width="30.3396"
+                    height="25.1072"
+                    filterUnits="userSpaceOnUse"
+                    colorInterpolationFilters="sRGB"
+                >
+                    <feFlood floodOpacity="0" result="BackgroundImageFix" />
+                    <feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape" />
+                    <feGaussianBlur stdDeviation="1.61688" result="effect1_foregroundBlur_12464_573784" />
+                </filter>
+                <filter
+                    id="filter2_f_12464_573784"
+                    x="-0.0433259"
+                    y="-8.31481"
+                    width="25.1072"
+                    height="22.8373"
+                    filterUnits="userSpaceOnUse"
+                    colorInterpolationFilters="sRGB"
+                >
+                    <feFlood floodOpacity="0" result="BackgroundImageFix" />
+                    <feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape" />
+                    <feGaussianBlur stdDeviation="1.61688" result="effect1_foregroundBlur_12464_573784" />
+                </filter>
+                <filter
+                    id="filter3_f_12464_573784"
+                    x="1.89124"
+                    y="-3.98357"
+                    width="17.6775"
+                    height="17.6779"
+                    filterUnits="userSpaceOnUse"
+                    colorInterpolationFilters="sRGB"
+                >
+                    <feFlood floodOpacity="0" result="BackgroundImageFix" />
+                    <feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape" />
+                    <feGaussianBlur stdDeviation="1.61688" result="effect1_foregroundBlur_12464_573784" />
+                </filter>
+                <clipPath id="clip0_12464_573784">
+                    <rect width="14" height="14" fill="white" transform="translate(3.5 2.5)" />
+                </clipPath>
+            </defs>
+        </svg>
+    );
+};
+
+export default LovableIcon;
diff --git a/src/components/foundations/integration-icons/nextjs-icon.tsx b/src/components/foundations/integration-icons/nextjs-icon.tsx
new file mode 100644
index 0000000..61638e8
--- /dev/null
+++ b/src/components/foundations/integration-icons/nextjs-icon.tsx
@@ -0,0 +1,57 @@
+import type { SVGProps } from "react";
+
+const NextjsIcon = ({ grayscale, ...props }: SVGProps<SVGSVGElement> & { grayscale?: boolean }) => {
+    if (grayscale) {
+        return (
+            <svg width="20" height="20" viewBox="0 0 20 20" fill="none" {...props}>
+                <g clipPath="url(#clip0_nextjs_gray)">
+                    <path
+                        d="M19.2813 20.8035L6.42272 4.2403H4V15.7555H5.93818V6.70167L17.7598 21.9755C18.2933 21.6185 18.8014 21.2267 19.2813 20.8035Z"
+                        fill="url(#paint0_nextjs_gray)"
+                    />
+                    <path d="M15.6798 4.24017H13.7598V15.7602H15.6798V4.24017Z" fill="url(#paint1_nextjs_gray)" />
+                </g>
+                <defs>
+                    <linearGradient id="paint0_nextjs_gray" x1="12.8" y1="14.2403" x2="18.48" y2="21.2803" gradientUnits="userSpaceOnUse">
+                        <stop className="[stop-color:var(--color-fg-quaternary)]" />
+                        <stop offset="1" className="[stop-color:var(--color-fg-quaternary)]" stopOpacity="0" />
+                    </linearGradient>
+                    <linearGradient id="paint1_nextjs_gray" x1="14.7198" y1="4.24017" x2="14.6876" y2="12.7002" gradientUnits="userSpaceOnUse">
+                        <stop className="[stop-color:var(--color-fg-quaternary)]" />
+                        <stop offset="1" className="[stop-color:var(--color-fg-quaternary)]" stopOpacity="0" />
+                    </linearGradient>
+                    <clipPath id="clip0_nextjs_gray">
+                        <rect width="20" height="20" fill="white" />
+                    </clipPath>
+                </defs>
+            </svg>
+        );
+    }
+
+    return (
+        <svg width="20" height="20" viewBox="0 0 20 20" fill="none" {...props}>
+            <g clipPath="url(#clip0_nextjs)">
+                <path
+                    d="M19.2813 20.8035L6.42272 4.2403H4V15.7555H5.93818V6.70167L17.7598 21.9755C18.2933 21.6185 18.8014 21.2267 19.2813 20.8035Z"
+                    fill="url(#paint0_nextjs)"
+                />
+                <path d="M15.6798 4.24017H13.7598V15.7602H15.6798V4.24017Z" fill="url(#paint1_nextjs)" />
+            </g>
+            <defs>
+                <linearGradient id="paint0_nextjs" x1="12.8" y1="14.2403" x2="18.48" y2="21.2803" gradientUnits="userSpaceOnUse">
+                    <stop />
+                    <stop offset="1" stopOpacity="0" />
+                </linearGradient>
+                <linearGradient id="paint1_nextjs" x1="14.7198" y1="4.24017" x2="14.6876" y2="12.7002" gradientUnits="userSpaceOnUse">
+                    <stop />
+                    <stop offset="1" stopOpacity="0" />
+                </linearGradient>
+                <clipPath id="clip0_nextjs">
+                    <rect width="20" height="20" fill="white" />
+                </clipPath>
+            </defs>
+        </svg>
+    );
+};
+
+export default NextjsIcon;
diff --git a/src/components/foundations/integration-icons/perplexity-icon.tsx b/src/components/foundations/integration-icons/perplexity-icon.tsx
new file mode 100644
index 0000000..741541d
--- /dev/null
+++ b/src/components/foundations/integration-icons/perplexity-icon.tsx
@@ -0,0 +1,25 @@
+import type { SVGProps } from "react";
+
+const PerplexityIcon = ({ grayscale, ...props }: SVGProps<SVGSVGElement> & { grayscale?: boolean }) => {
+    if (grayscale) {
+        return (
+            <svg width="20" height="20" viewBox="0 0 20 20" fill="none" {...props}>
+                <path
+                    d="M17.5473 6.0119H15.6608V2.44739C15.6607 2.32801 15.6268 2.2111 15.563 2.11022C15.4992 2.00933 15.408 1.92862 15.3002 1.87743C15.1915 1.82854 15.0715 1.81046 14.9532 1.82517C14.835 1.83988 14.723 1.88681 14.6296 1.96084L10.6285 5.29066V1.62966C10.6285 1.28621 10.3439 1 9.99962 1C9.65617 1 9.36997 1.28621 9.36997 1.62966V5.29884L5.37042 1.96084C5.27905 1.88289 5.16683 1.83345 5.04765 1.81862C4.92847 1.8038 4.80756 1.82424 4.69988 1.87743C4.59203 1.92862 4.5009 2.00933 4.43707 2.11022C4.37324 2.2111 4.33932 2.32801 4.33926 2.44739V6.01272H2.4511C2.2848 6.01379 2.12559 6.08027 2.00792 6.1978C1.89024 6.31532 1.82355 6.47444 1.82227 6.64074V13.3503C1.82227 13.6937 2.10766 13.9799 2.45192 13.9799H4.33844V17.5444C4.33844 17.7873 4.48072 18.0138 4.69824 18.1144C4.78235 18.1548 4.87478 18.175 4.96809 18.1733C5.11413 18.1716 5.25543 18.1212 5.3696 18.0302L9.37078 14.7012V18.3703C9.37078 18.7138 9.65536 19 9.99962 19C10.3431 19 10.6293 18.7138 10.6293 18.3703V14.7012L14.6296 18.0302C14.744 18.1214 14.8856 18.1718 15.032 18.1733C15.1247 18.1748 15.2166 18.1546 15.3002 18.1144C15.408 18.0632 15.4992 17.9825 15.563 17.8816C15.6268 17.7807 15.6607 17.6638 15.6608 17.5444V13.9791H17.5481C17.8916 13.9791 18.177 13.6945 18.177 13.3503V6.64074C18.1757 6.47422 18.1089 6.31489 17.9911 6.19722C17.8733 6.07954 17.7138 6.01297 17.5473 6.0119ZM14.4031 3.7893V6.0119H11.7357L14.4031 3.7893ZM5.59612 3.7893L8.26357 6.0119H5.59612V3.7893ZM3.07994 12.7222V7.2704H8.4819L4.52325 11.2282C4.46468 11.2866 4.41821 11.3559 4.3865 11.4322C4.35478 11.5086 4.33845 11.5904 4.33844 11.6731V12.7214H3.07994V12.7222ZM5.59612 13.3519V11.9339L9.37078 8.16009V13.0583L5.59612 16.2033V13.3511V13.3519ZM14.4031 16.2033L10.6285 13.0575V8.15928L14.4031 11.9339V16.2033ZM16.9185 12.7222H15.6608V11.6739C15.6608 11.5063 15.5938 11.3468 15.476 11.2299L11.5182 7.27121H16.9193L16.9185 12.7222Z"
+                    className="fill-fg-quaternary"
+                />
+            </svg>
+        );
+    }
+
+    return (
+        <svg width="20" height="20" viewBox="0 0 20 20" fill="none" {...props}>
+            <path
+                d="M17.1288 6.23346H15.3471V2.86698C15.347 2.75423 15.315 2.64381 15.2547 2.54854C15.1944 2.45326 15.1083 2.37703 15.0065 2.32868C14.9038 2.28251 14.7905 2.26544 14.6788 2.27933C14.5671 2.29322 14.4614 2.33755 14.3732 2.40746L10.5943 5.55229V2.09468C10.5943 1.77031 10.3255 1.5 10.0004 1.5C9.67603 1.5 9.40573 1.77031 9.40573 2.09468V5.56001L5.62838 2.40746C5.54209 2.33384 5.4361 2.28714 5.32354 2.27314C5.21098 2.25914 5.09679 2.27845 4.99509 2.32868C4.89323 2.37703 4.80717 2.45326 4.74688 2.54854C4.6866 2.64381 4.65457 2.75423 4.6545 2.86698V6.23424H2.87125C2.71418 6.23525 2.56382 6.29804 2.45268 6.40903C2.34154 6.52002 2.27856 6.6703 2.27734 6.82737V13.1641C2.27734 13.4885 2.54688 13.7588 2.87202 13.7588H4.65373V17.1253C4.65373 17.3547 4.78811 17.5686 4.99354 17.6636C5.07298 17.7018 5.16027 17.7208 5.2484 17.7192C5.38633 17.7176 5.51978 17.6701 5.62761 17.584L9.4065 14.44V17.9053C9.4065 18.2297 9.67526 18.5 10.0004 18.5C10.3248 18.5 10.5951 18.2297 10.5951 17.9053V14.44L14.3732 17.584C14.4812 17.6702 14.615 17.7178 14.7532 17.7192C14.8408 17.7206 14.9275 17.7016 15.0065 17.6636C15.1083 17.6153 15.1944 17.539 15.2547 17.4437C15.315 17.3485 15.347 17.238 15.3471 17.1253V13.758H17.1296C17.4539 13.758 17.7235 13.4893 17.7235 13.1641V6.82737C17.7222 6.6701 17.6592 6.51962 17.5479 6.40848C17.4366 6.29735 17.2861 6.23447 17.1288 6.23346ZM14.1593 4.13434V6.23346H11.64L14.1593 4.13434ZM5.84154 4.13434L8.3608 6.23346H5.84154V4.13434ZM3.46515 12.571V7.42204H8.567L4.82827 11.16C4.77296 11.2151 4.72907 11.2806 4.69912 11.3527C4.66916 11.4248 4.65374 11.5021 4.65373 11.5801V12.5702H3.46515V12.571ZM5.84154 13.1657V11.8265L9.4065 8.26231V12.8884L5.84154 15.8587V13.1649V13.1657ZM14.1593 15.8587L10.5943 12.8877V8.26154L14.1593 11.8265V15.8587ZM16.5349 12.571H15.3471V11.5809C15.3471 11.4226 15.2837 11.272 15.1725 11.1615L11.4346 7.42281H16.5357L16.5349 12.571Z"
+                className="fill-[#000]"
+            />
+        </svg>
+    );
+};
+
+export default PerplexityIcon;
diff --git a/src/components/foundations/integration-icons/react-icon.tsx b/src/components/foundations/integration-icons/react-icon.tsx
new file mode 100644
index 0000000..7e82017
--- /dev/null
+++ b/src/components/foundations/integration-icons/react-icon.tsx
@@ -0,0 +1,22 @@
+import type { SVGProps } from "react";
+
+const ReactIcon = ({ grayscale, ...props }: SVGProps<SVGSVGElement> & { grayscale?: boolean }) => {
+    const fillClass = grayscale ? "fill-fg-quaternary" : "fill-[#23B2E7]";
+
+    return (
+        <svg width="20" height="20" viewBox="0 0 20 20" fill="none" {...props}>
+            <path
+                d="M11.5718 10.0002C11.5718 10.8693 10.8673 11.5738 9.99821 11.5738C9.12914 11.5738 8.42462 10.8693 8.42462 10.0002C8.42462 9.13113 9.12914 8.42661 9.99821 8.42661C10.8673 8.42661 11.5718 9.13113 11.5718 10.0002Z"
+                className={fillClass}
+            />
+            <path
+                fillRule="evenodd"
+                clipRule="evenodd"
+                d="M9.99816 3.90253C9.7672 3.6821 9.53702 3.4786 9.3091 3.29336C8.64616 2.75457 7.98064 2.35245 7.35201 2.14908C6.72345 1.94573 6.07526 1.92554 5.52108 2.24549C4.9669 2.56545 4.66029 3.1369 4.52212 3.78292C4.38392 4.42901 4.39941 5.20643 4.53455 6.04994C4.58102 6.33996 4.64216 6.64106 4.71758 6.95131C4.41118 7.04112 4.11984 7.13872 3.84543 7.24349C3.04736 7.54821 2.36635 7.92351 1.87591 8.36623C1.38553 8.80891 1.04395 9.36016 1.04395 10.0001C1.04395 10.64 1.38553 11.1912 1.87591 11.6339C2.36635 12.0766 3.04736 12.4519 3.84543 12.7567C4.11983 12.8614 4.41117 12.959 4.71757 13.0488C4.64216 13.359 4.58102 13.6601 4.53457 13.9501C4.39942 14.7936 4.38394 15.571 4.52213 16.2171C4.66031 16.8631 4.96692 17.4346 5.5211 17.7545C6.07527 18.0745 6.72347 18.0543 7.35203 17.8509C7.98066 17.6476 8.64618 17.2454 9.30911 16.7066C9.53703 16.5214 9.7672 16.3179 9.99816 16.0975C10.2291 16.3179 10.4593 16.5214 10.6872 16.7066C11.3501 17.2454 12.0156 17.6475 12.6443 17.8509C13.2728 18.0543 13.921 18.0745 14.4752 17.7545C15.0294 17.4345 15.336 16.8631 15.4742 16.2171C15.6124 15.571 15.5969 14.7936 15.4617 13.95C15.4153 13.6601 15.3541 13.359 15.2787 13.0488C15.5851 12.959 15.8764 12.8614 16.1507 12.7567C16.9488 12.4519 17.6298 12.0766 18.1202 11.6339C18.6106 11.1912 18.9522 10.64 18.9522 10.0001C18.9522 9.36016 18.6106 8.80891 18.1202 8.36623C17.6298 7.92351 16.9488 7.54821 16.1507 7.24349C15.8764 7.13873 15.5851 7.04115 15.2787 6.95135C15.3541 6.64109 15.4153 6.33998 15.4618 6.04995C15.5969 5.20644 15.6124 4.42902 15.4742 3.78293C15.336 3.1369 15.0294 2.56545 14.4752 2.2455C13.921 1.92555 13.2729 1.94574 12.6443 2.14909C12.0157 2.35245 11.3501 2.75457 10.6872 3.29337C10.4593 3.47861 10.2291 3.6821 9.99816 3.90253ZM7.03774 3.12052C6.57097 2.96951 6.2484 3.00453 6.03158 3.12971C5.81477 3.25489 5.62315 3.51674 5.52054 3.99647C5.41794 4.47614 5.4191 5.11695 5.5427 5.88842C5.58427 6.14788 5.63918 6.419 5.70722 6.69995C6.38878 6.55129 7.12455 6.43747 7.89867 6.36372C8.34962 5.73015 8.8161 5.14984 9.28565 4.63389C9.07637 4.4345 8.86904 4.2514 8.66514 4.08568C8.05882 3.5929 7.50444 3.2715 7.03774 3.12052ZM9.99816 5.36812C9.74346 5.65037 9.48834 5.9544 9.23537 6.27833C9.48693 6.26992 9.74133 6.26564 9.99807 6.26564C10.2549 6.26564 10.5093 6.26992 10.7609 6.27833C10.508 5.9544 10.2529 5.65037 9.99816 5.36812ZM7.15636 7.47864C6.74939 7.53575 6.35857 7.60467 5.98683 7.68411C6.1039 8.04577 6.23963 8.41869 6.39366 8.7997C6.51217 8.57762 6.63566 8.35515 6.76405 8.13279C6.89241 7.91045 7.02331 7.69229 7.15636 7.47864ZM6.92782 10C7.14503 9.55245 7.38536 9.09866 7.64826 8.64329C7.91116 8.18795 8.18397 7.75296 8.46295 7.34108C8.95914 7.30541 9.47228 7.28665 9.99807 7.28665C10.5239 7.28665 11.0371 7.30542 11.5334 7.34109C11.8123 7.75296 12.0852 8.18795 12.348 8.64328C12.6109 9.09866 12.8513 9.55244 13.0685 10C12.8513 10.4476 12.611 10.9014 12.3481 11.3567C12.0851 11.8121 11.8123 12.2471 11.5333 12.6591C11.0371 12.6947 10.5239 12.7135 9.99807 12.7135C9.47231 12.7135 8.9592 12.6947 8.46303 12.6591C8.18402 12.2472 7.91117 11.8121 7.64825 11.3567C7.38535 10.9014 7.14503 10.4476 6.92782 10ZM5.79926 10C5.47607 9.29273 5.20676 8.59863 4.99471 7.93404C4.71737 8.01559 4.45512 8.1036 4.20963 8.19733C3.47971 8.47603 2.92417 8.79543 2.56007 9.12412C2.19591 9.45285 2.06495 9.74972 2.06495 10.0001C2.06495 10.2504 2.19591 10.5473 2.56007 10.876C2.92417 11.2047 3.47971 11.5241 4.20963 11.8028C4.45511 11.8965 4.71735 11.9845 4.99468 12.0661C5.20673 11.4015 5.47605 10.7073 5.79926 10ZM5.9868 12.316C6.10388 11.9543 6.23962 11.5814 6.39366 11.2003C6.51216 11.4224 6.63565 11.6449 6.76403 11.8672C6.89243 12.0896 7.02336 12.3078 7.15645 12.5215C6.74943 12.4644 6.35858 12.3955 5.9868 12.316ZM5.7072 13.3002C5.63918 13.5811 5.58428 13.8522 5.54272 14.1116C5.41912 14.8831 5.41796 15.5239 5.52056 16.0035C5.62317 16.4833 5.81479 16.7451 6.0316 16.8703C6.24841 16.9955 6.57099 17.0305 7.03776 16.8795C7.50446 16.7285 8.05884 16.4071 8.66516 15.9143C8.86905 15.7486 9.07637 15.5655 9.28565 15.3661C8.81613 14.8502 8.34968 14.27 7.89876 13.6364C7.1246 13.5627 6.3888 13.4489 5.7072 13.3002ZM10.7107 15.3661C10.9199 15.5655 11.1273 15.7486 11.3311 15.9143C11.9375 16.4071 12.4918 16.7285 12.9585 16.8795C13.4253 17.0305 13.7479 16.9955 13.9647 16.8703C14.1815 16.7451 14.3731 16.4833 14.4757 16.0035C14.5783 15.5239 14.5772 14.883 14.4536 14.1116C14.412 13.8521 14.3571 13.5811 14.2891 13.3002C13.6075 13.4488 12.8717 13.5627 12.0976 13.6364C11.6466 14.2699 11.1802 14.8502 10.7107 15.3661ZM10.7608 13.7218C10.5079 14.0457 10.2528 14.3497 9.99815 14.6319C9.74349 14.3497 9.48841 14.0457 9.23547 13.7218C9.487 13.7302 9.74136 13.7345 9.99807 13.7345C10.2548 13.7345 10.5093 13.7302 10.7608 13.7218ZM12.8399 12.5215C13.2469 12.4644 13.6377 12.3955 14.0095 12.316C13.8924 11.9543 13.7567 11.5814 13.6026 11.2003C13.4841 11.4224 13.3607 11.6449 13.2323 11.8672C13.1039 12.0896 12.973 12.3078 12.8399 12.5215ZM14.1971 10C14.5202 10.7073 14.7896 11.4015 15.0016 12.0661C15.2789 11.9845 15.5411 11.8965 15.7865 11.8028C16.5164 11.5241 17.072 11.2047 17.4361 10.876C17.8002 10.5473 17.9312 10.2504 17.9312 10.0001C17.9312 9.74972 17.8002 9.45285 17.4361 9.12412C17.072 8.79543 16.5164 8.47603 15.7865 8.19733C15.5411 8.10362 15.2789 8.01562 15.0016 7.93408C14.7895 8.59866 14.5202 9.29274 14.1971 10ZM14.2891 6.69998C13.6075 6.55132 12.8718 6.43749 12.0977 6.36373C11.6467 5.73016 11.1802 5.14985 10.7107 4.63389C10.9199 4.43451 11.1273 4.25141 11.3312 4.08569C11.9375 3.59291 12.4919 3.27151 12.9586 3.12052C13.4253 2.96952 13.7479 3.00454 13.9647 3.12972C14.1815 3.2549 14.3732 3.51674 14.4758 3.99648C14.5784 4.47615 14.5772 5.11695 14.4536 5.88843C14.412 6.1479 14.3571 6.41902 14.2891 6.69998ZM14.0095 7.68414C13.8924 8.04579 13.7567 8.4187 13.6026 8.79969C13.4841 8.57761 13.3606 8.35515 13.2323 8.13278C13.1039 7.91045 12.973 7.69231 12.84 7.47867C13.2469 7.53578 13.6377 7.6047 14.0095 7.68414Z"
+                className={fillClass}
+            />
+        </svg>
+    );
+};
+
+export default ReactIcon;
diff --git a/src/components/foundations/integration-icons/replit-icon.tsx b/src/components/foundations/integration-icons/replit-icon.tsx
new file mode 100644
index 0000000..b95779a
--- /dev/null
+++ b/src/components/foundations/integration-icons/replit-icon.tsx
@@ -0,0 +1,24 @@
+import type { SVGProps } from "react";
+
+const ReplitIcon = ({ grayscale, ...props }: SVGProps<SVGSVGElement> & { grayscale?: boolean }) => {
+    const fillClass = grayscale ? "fill-fg-quaternary" : "fill-[#FD5402]";
+
+    return (
+        <svg width="20" height="20" viewBox="0 0 20 20" fill="none" {...props}>
+            <path
+                d="M10.0346 7.17324H4.4375C3.88634 7.17324 3.44922 6.73427 3.44922 6.20191V2.97035C3.44922 2.42865 3.89585 1.99902 4.4375 1.99902H9.04631C9.59746 1.99902 10.0346 2.43799 10.0346 2.97035V7.17324Z"
+                className={fillClass}
+            />
+            <path
+                d="M16.0376 12.8093H10.0407V7.16475H16.0376C16.618 7.16475 17.0965 7.64276 17.0965 8.22248V11.7517C17.0965 12.3415 16.618 12.8093 16.0376 12.8093Z"
+                className={fillClass}
+            />
+            <path
+                d="M9.04631 17.999H4.4375C3.89585 17.999 3.44922 17.5609 3.44922 17.0294V13.7944C3.44922 13.263 3.89585 12.8248 4.4375 12.8248H10.0346V17.0294C10.0346 17.5609 9.58796 17.999 9.04631 17.999Z"
+                className={fillClass}
+            />
+        </svg>
+    );
+};
+
+export default ReplitIcon;
diff --git a/src/components/foundations/integration-icons/tailwind-css-icon.tsx b/src/components/foundations/integration-icons/tailwind-css-icon.tsx
new file mode 100644
index 0000000..0ad9f81
--- /dev/null
+++ b/src/components/foundations/integration-icons/tailwind-css-icon.tsx
@@ -0,0 +1,14 @@
+import type { SVGProps } from "react";
+
+const TailwindCSSIcon = ({ grayscale, ...props }: SVGProps<SVGSVGElement> & { grayscale?: boolean }) => {
+    return (
+        <svg width="20" height="20" viewBox="0 0 20 20" fill="none" {...props}>
+            <path
+                d="M10.0006 4C7.33326 4 5.66698 5.33337 4.99942 8.00012C5.99988 6.66733 7.16622 6.1668 8.49959 6.50029C9.26027 6.69002 9.80445 7.24177 10.4057 7.85287C11.3863 8.8481 12.5212 9.99988 15 9.99988C17.6667 9.99988 19.333 8.66651 20 6.00035C19.0001 7.33314 17.8332 7.83366 16.5004 7.49959C15.7391 7.30986 15.195 6.75812 14.5938 6.14701C13.6131 5.15237 12.4782 4 10.0006 4ZM4.99942 9.99988C2.33384 9.99988 0.666395 11.3333 0 14C0.999884 12.6666 2.1668 12.1667 3.49959 12.5002C4.26085 12.6899 4.80503 13.2416 5.40624 13.8528C6.38692 14.848 7.52183 15.9998 10.0006 15.9998C12.6673 15.9998 14.3336 14.667 15 12.0002C14.0001 13.333 12.8338 13.8335 11.5004 13.5001C10.7397 13.3097 10.1956 12.7574 9.59376 12.1469C8.61366 11.1517 7.47817 9.99988 4.99942 9.99988Z"
+                className={grayscale ? "fill-fg-quaternary" : "fill-[#00BCFF]"}
+            />
+        </svg>
+    );
+};
+
+export default TailwindCSSIcon;
diff --git a/src/components/foundations/integration-icons/v0-icon.tsx b/src/components/foundations/integration-icons/v0-icon.tsx
new file mode 100644
index 0000000..fef4624
--- /dev/null
+++ b/src/components/foundations/integration-icons/v0-icon.tsx
@@ -0,0 +1,20 @@
+import type { SVGProps } from "react";
+
+const V0Icon = ({ grayscale, ...props }: SVGProps<SVGSVGElement> & { grayscale?: boolean }) => {
+    const fillClass = grayscale ? "fill-fg-quaternary" : "fill-[#000]";
+
+    return (
+        <svg width="20" height="20" viewBox="0 0 20 20" fill="none" {...props}>
+            <path
+                d="M11.7213 5.02356H16.4951C18.4308 5.02356 20 6.59277 20 8.52849V13.0812H18.0393V8.52849C18.0393 8.48185 18.0375 8.43554 18.0339 8.38965L13.2601 13.0804C13.2762 13.0809 13.2923 13.0812 13.3085 13.0812H18.0393V14.933H13.3085C11.3728 14.933 9.76054 13.3485 9.76054 11.4127V6.87216H11.7213V11.4127C11.7213 11.5002 11.7281 11.5866 11.7412 11.6713L16.6201 6.87731C16.5789 6.8739 16.5373 6.87216 16.4951 6.87216H11.7213V5.02356Z"
+                className={fillClass}
+            />
+            <path
+                d="M6.89927 14.5917L0 6.87101H2.77565L6.82628 11.4038V6.87101H8.8959V13.8295C8.8959 14.8797 7.59905 15.3747 6.89927 14.5917Z"
+                className={fillClass}
+            />
+        </svg>
+    );
+};
+
+export default V0Icon;
diff --git a/src/components/foundations/integration-icons/vite-icon.tsx b/src/components/foundations/integration-icons/vite-icon.tsx
new file mode 100644
index 0000000..71c665e
--- /dev/null
+++ b/src/components/foundations/integration-icons/vite-icon.tsx
@@ -0,0 +1,56 @@
+import type { SVGProps } from "react";
+
+const ViteIcon = ({ grayscale, ...props }: SVGProps<SVGSVGElement> & { grayscale?: boolean }) => {
+    if (grayscale) {
+        return (
+            <svg width="20" height="20" viewBox="0 0 20 20" fill="none" {...props}>
+                <g clipPath="url(#clip0_12464_573759)">
+                    <path
+                        d="M2.49069 3.92761L7.45162 4.81335L7.18307 9.35144C7.1552 9.82466 7.59019 10.1924 8.05221 10.0858L9.20748 9.81824L8.82467 11.6981C8.71708 12.2254 9.21196 12.6758 9.72701 12.5194L10.2456 12.3612L9.59127 15.5302C9.43205 16.3005 10.4564 16.7192 10.8833 16.0594L10.9682 15.9296L10.9829 15.9061L10.9956 15.8817L15.6645 6.56433C15.9283 6.03744 15.4721 5.43719 14.894 5.54871L13.7163 5.77527L14.0415 4.64636L17.9799 3.92957C18.3301 3.86576 18.597 4.23908 18.4233 4.54968L10.6801 18.3944C10.5203 18.6799 10.11 18.6815 9.94772 18.3973L2.05123 4.55066C1.87484 4.24092 2.13985 3.86546 2.49069 3.92761Z"
+                        className="fill-fg-quaternary"
+                    />
+                    <path
+                        d="M12.6245 5.953C12.4777 6.46264 12.921 6.94792 13.4419 6.84753L14.5063 6.64148L11.0044 13.6288L11.3237 12.0868C11.4323 11.5591 10.9367 11.1071 10.4214 11.2635L9.90084 11.4208L10.2788 9.57703C10.3754 9.10199 9.98068 8.68216 9.51608 8.72742L9.42233 8.74304L8.20358 9.02429L8.51998 3.68054L13.5649 2.69324L12.6245 5.953Z"
+                        className="fill-fg-quaternary"
+                    />
+                </g>
+                <defs>
+                    <clipPath id="clip0_12464_573759">
+                        <rect width="17" height="17" fill="white" transform="translate(1.77246 2.04596)" />
+                    </clipPath>
+                </defs>
+            </svg>
+        );
+    }
+
+    return (
+        <svg width="20" height="20" viewBox="0 0 20 20" fill="none" {...props}>
+            <g clipPath="url(#clip0_12464_573753)">
+                <path
+                    d="M18.4228 4.54918L10.6802 18.3941C10.5204 18.68 10.1097 18.6817 9.94742 18.3972L2.05142 4.55052C1.87465 4.24053 2.13972 3.86505 2.49099 3.92784L10.2418 5.31325C10.2912 5.32208 10.3418 5.322 10.3913 5.31299L17.98 3.92982C18.3301 3.86601 18.5964 4.23859 18.4228 4.54918Z"
+                    fill="url(#paint0_linear_12464_573753)"
+                />
+                <path
+                    d="M13.9337 2.11136L8.20405 3.23407C8.10988 3.25252 8.04015 3.33233 8.03447 3.4281L7.68202 9.38078C7.67372 9.52099 7.80249 9.62981 7.93933 9.59825L9.53455 9.23009C9.6838 9.19568 9.81867 9.32713 9.788 9.47722L9.31405 11.798C9.28216 11.9543 9.4288 12.0878 9.58135 12.0415L10.5666 11.7421C10.7194 11.6957 10.8661 11.8296 10.8338 11.986L10.0807 15.6314C10.0335 15.8595 10.3369 15.9838 10.4633 15.7883L10.5478 15.6577L15.2167 6.34022C15.2949 6.18421 15.16 6.00633 14.9887 6.03939L13.3467 6.3563C13.1923 6.38605 13.0611 6.24234 13.1046 6.09138L14.1764 2.37615C14.2199 2.22492 14.0882 2.0811 13.9337 2.11136Z"
+                    fill="url(#paint1_linear_12464_573753)"
+                />
+            </g>
+            <defs>
+                <linearGradient id="paint0_linear_12464_573753" x1="1.85863" y1="3.43304" x2="11.4947" y2="16.5197" gradientUnits="userSpaceOnUse">
+                    <stop stopColor="#41D1FF" />
+                    <stop offset="1" stopColor="#BD34FE" />
+                </linearGradient>
+                <linearGradient id="paint1_linear_12464_573753" x1="9.79675" y1="2.41618" x2="11.5399" y2="14.3739" gradientUnits="userSpaceOnUse">
+                    <stop stopColor="#FFEA83" />
+                    <stop offset="0.0833333" stopColor="#FFDD35" />
+                    <stop offset="1" stopColor="#FFA800" />
+                </linearGradient>
+                <clipPath id="clip0_12464_573753">
+                    <rect width="17" height="17" fill="white" transform="translate(1.77246 2.04596)" />
+                </clipPath>
+            </defs>
+        </svg>
+    );
+};
+
+export default ViteIcon;
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..fc28cff
--- /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="#000000"
+                        />
+                    </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="#000000"
+                    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 0 0 0 0 0 0 0 0 0 0 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 0 0 0 0 0 0 0 0 0 0 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 0 0 0 0 0 0 0 0 0 0 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 0 0 0 0 0 0 0 0 0 0 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 0 0 0 0 0 0 0 0 0 0 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 0 0 0 0 0 0 0 0 0 0 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="#000000" />
+                </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/affirm-icon.tsx b/src/components/foundations/payment-icons/affirm-icon.tsx
new file mode 100644
index 0000000..cc4684b
--- /dev/null
+++ b/src/components/foundations/payment-icons/affirm-icon.tsx
@@ -0,0 +1,28 @@
+import type { SVGProps } from "react";
+
+const AffirmIcon = (props: SVGProps<SVGSVGElement>) => {
+    return (
+        <svg width="34" height="24" viewBox="0 0 34 24" fill="none" {...props}>
+            <path
+                d="M4 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 20V4C0.5 2.067 2.067 0.5 4 0.5Z"
+                fill="white"
+            />
+            <path
+                d="M4 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 20V4C0.5 2.067 2.067 0.5 4 0.5Z"
+                className="stroke-border-secondary"
+            />
+            <path
+                d="M6.12988 11.8433C7.17302 11.8433 7.97349 12.3106 7.97363 13.4614V16.2485H6.83008V15.5835C6.57012 16.0336 6.02339 16.3745 5.41016 16.3745C4.55052 16.3744 4.00023 15.9068 4 15.1343C4 14.1591 4.99239 13.8099 6.25684 13.645C6.59566 13.6012 6.77531 13.4895 6.77539 13.2671C6.77539 12.938 6.50493 12.7739 6.01562 12.7739C5.50046 12.7739 4.9295 13.0503 4.57617 13.3735L4.17383 12.5269C4.61414 12.176 5.42519 11.8434 6.12988 11.8433ZM13.9746 9.82959C14.6617 9.82962 15.0435 10.0736 15.0527 10.0796L14.6758 10.9429C14.6758 10.9429 14.4357 10.8062 14.1279 10.8062C13.849 10.8062 13.5255 10.9679 13.5254 11.5337V11.9692H14.6348V12.9136H13.5254V16.2485H12.3027V12.9136H10.4463V16.2485H9.22266V12.9136H8.5127V11.9692H9.22266V11.6548C9.22266 10.2712 10.1125 9.82975 10.8945 9.82959C11.3856 9.82959 11.7483 9.94702 11.9736 10.0796L11.5957 10.9429C11.4194 10.8432 11.2063 10.8062 11.0479 10.8062C10.7695 10.8062 10.4464 10.9679 10.4463 11.5337V11.9692H12.3027V11.6548C12.3027 10.2709 13.1925 9.82959 13.9746 9.82959ZM16.5859 11.9692V16.2485H15.3643V11.9692H16.5859ZM20.043 11.8433C20.2049 11.8433 20.4028 11.8612 20.5918 11.9419L20.3691 13.0737C20.2251 12.966 20.0071 12.9185 19.8457 12.9185C19.4319 12.9185 18.8389 13.2066 18.8389 14.187V16.2485H17.6143V11.9692H18.7568V12.688C19.0179 12.1221 19.4137 11.8433 20.043 11.8433ZM26.2656 11.8433C27.0476 11.8433 27.6952 12.3288 27.6953 13.2905V16.2485H26.4717V13.6772C26.4716 13.1111 26.1308 12.8757 25.8076 12.8755C25.4031 12.8755 24.9982 13.2457 24.998 14.0454V16.2485H23.7754V13.686C23.7753 13.1023 23.4533 12.8755 23.1035 12.8755C22.7168 12.8755 22.3029 13.2543 22.3027 14.0454V16.2485H21.0781V11.9692H22.2578V12.6167C22.4647 12.2035 22.9125 11.8434 23.5596 11.8433C24.1527 11.8433 24.6488 12.1186 24.8828 12.5952C25.1347 12.2263 25.6184 11.8433 26.2656 11.8433ZM6.75 14.3091C5.76353 14.4134 5.22266 14.5791 5.22266 15.062C5.22276 15.3229 5.38357 15.481 5.70508 15.481C6.31361 15.4809 6.74997 14.9551 6.75 14.3091Z"
+                fill="#060809"
+            />
+            <path
+                fillRule="evenodd"
+                clipRule="evenodd"
+                d="M22.4943 6C19.1906 6 16.2459 8.29338 15.4102 11.2421H16.6079C17.3058 9.04612 19.6753 7.11873 22.4943 7.11873C25.9208 7.11873 28.8822 9.72739 28.8822 13.7885C28.8822 14.7003 28.7641 15.5222 28.5404 16.2484H29.7024L29.7139 16.2087C29.9041 15.4594 30.001 14.6456 30.001 13.7885C30.001 9.25937 26.7007 6 22.4943 6Z"
+                fill="#0FA0EA"
+            />
+        </svg>
+    );
+};
+
+export default AffirmIcon;
diff --git a/src/components/foundations/payment-icons/afterpay-icon.tsx b/src/components/foundations/payment-icons/afterpay-icon.tsx
new file mode 100644
index 0000000..67bcaa9
--- /dev/null
+++ b/src/components/foundations/payment-icons/afterpay-icon.tsx
@@ -0,0 +1,40 @@
+import type { SVGProps } from "react";
+
+const AfterpayIcon = (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="#B2FCE4" />
+            <path
+                d="M29.6045 10.7853L28.0273 9.88241C27.5022 9.58144 26.846 9.95935 26.846 10.5658V10.6677C26.846 10.7242 26.8754 10.7763 26.9252 10.8034L27.2941 11.0139C27.3959 11.0727 27.5226 10.9981 27.5226 10.8804V10.6382C27.5226 10.5183 27.6516 10.4436 27.7557 10.5025L28.4799 10.9189L29.2017 11.333C29.3058 11.3918 29.3058 11.5434 29.2017 11.6023L28.4799 12.0164L27.7557 12.4328C27.6516 12.4916 27.5226 12.4169 27.5226 12.297V12.1771C27.5226 11.5706 26.8664 11.1904 26.3413 11.4936L24.7641 12.3966C24.2368 12.6998 24.2368 13.4624 24.7641 13.7657L26.3413 14.6686C26.8664 14.9696 27.5226 14.5916 27.5226 13.9852V13.8833C27.5226 13.8268 27.4932 13.7747 27.4434 13.7476L27.0745 13.5371C26.9727 13.4783 26.846 13.5529 26.846 13.6706V13.9128C26.846 14.0327 26.717 14.1074 26.6129 14.0485L25.8888 13.6322L25.1669 13.218C25.0628 13.1592 25.0628 13.0076 25.1669 12.9487L25.8888 12.5346L26.6129 12.1182C26.717 12.0594 26.846 12.1341 26.846 12.254V12.3739C26.846 12.9804 27.5022 13.3606 28.0273 13.0574L29.6045 12.1544C30.1318 11.8489 30.1318 11.0886 29.6045 10.7853Z"
+                fill="black"
+            />
+            <path d="M24.4677 10.9344L22.6347 14.7203H21.8743L22.56 13.306L21.4806 10.9344H22.2613L22.9538 12.523L23.7096 10.9344H24.4677Z" fill="black" />
+            <path
+                d="M6.13851 12.2785C6.13851 11.8259 5.81037 11.5091 5.40757 11.5091C5.00476 11.5091 4.67663 11.8327 4.67663 12.2785C4.67663 12.7198 5.00476 13.0479 5.40757 13.0479C5.81037 13.0479 6.13851 12.7311 6.13851 12.2785ZM6.14529 13.6227V13.2742C5.94615 13.5164 5.6497 13.6657 5.29668 13.6657C4.55895 13.6657 4 13.0751 4 12.2785C4 11.4887 4.58158 10.8868 5.31252 10.8868C5.65649 10.8868 5.94615 11.0384 6.14529 11.2738V10.9343H6.80608V13.6227H6.14529Z"
+                fill="black"
+            />
+            <path
+                d="M10.0186 13.0256C9.78776 13.0256 9.72213 12.9396 9.72213 12.7133V11.5207H10.1476V10.9346H9.72213V10.2783H9.0455V10.9346H8.172V10.6675C8.172 10.4412 8.25799 10.3552 8.4956 10.3552H8.64496V9.83476H8.31909C7.76014 9.83476 7.49537 10.0181 7.49537 10.577V10.9368H7.11972V11.5207H7.49537V13.623H8.172V11.5207H9.0455V12.8377C9.0455 13.3854 9.25596 13.623 9.8036 13.623H10.1521V13.0256H10.0186Z"
+                fill="black"
+            />
+            <path
+                d="M12.4497 12.0363C12.4022 11.6878 12.1171 11.4773 11.7821 11.4773C11.4495 11.4773 11.1734 11.681 11.1055 12.0363H12.4497ZM11.0987 12.4549C11.1462 12.8532 11.4314 13.0795 11.7935 13.0795C12.0786 13.0795 12.2981 12.946 12.4271 12.731H13.1218C12.9611 13.3013 12.4497 13.6656 11.7776 13.6656C10.9652 13.6656 10.3949 13.0953 10.3949 12.2829C10.3949 11.4705 10.9969 10.8844 11.7935 10.8844C12.5945 10.8844 13.1761 11.475 13.1761 12.2829C13.1761 12.3418 13.1716 12.4006 13.1603 12.4549H11.0987Z"
+                fill="black"
+            />
+            <path
+                d="M17.4848 12.2784C17.4848 11.8439 17.1567 11.509 16.7539 11.509C16.3511 11.509 16.023 11.8326 16.023 12.2784C16.023 12.7197 16.3511 13.0478 16.7539 13.0478C17.1567 13.0478 17.4848 12.7151 17.4848 12.2784ZM15.3554 14.7201V10.9342H16.0162V11.2827C16.2153 11.036 16.5118 10.8844 16.8648 10.8844C17.5912 10.8844 18.1615 11.4818 18.1615 12.2716C18.1615 13.0614 17.5799 13.6633 16.8489 13.6633C16.5095 13.6633 16.2312 13.5298 16.0365 13.3035V14.7179H15.3554V14.7201Z"
+                fill="black"
+            />
+            <path
+                d="M20.5438 12.2785C20.5438 11.8259 20.2157 11.5091 19.8128 11.5091C19.41 11.5091 19.0819 11.8327 19.0819 12.2785C19.0819 12.7198 19.41 13.0479 19.8128 13.0479C20.2157 13.0479 20.5438 12.7311 20.5438 12.2785ZM20.5506 13.6227V13.2742C20.3514 13.5164 20.055 13.6657 19.702 13.6657C18.9642 13.6657 18.4053 13.0751 18.4053 12.2785C18.4053 11.4887 18.9869 10.8868 19.7178 10.8868C20.0618 10.8868 20.3514 11.0384 20.5506 11.2738V10.9343H21.2114V13.6227H20.5506Z"
+                fill="black"
+            />
+            <path
+                d="M14.1618 11.1967C14.1618 11.1967 14.3293 10.8844 14.7434 10.8844C14.9199 10.8844 15.0331 10.9455 15.0331 10.9455V11.6312C15.0331 11.6312 14.7842 11.4773 14.5556 11.509C14.327 11.5407 14.1822 11.7489 14.1822 12.0295V13.6203H13.4988V10.9342H14.1596V11.1967H14.1618Z"
+                fill="black"
+            />
+        </svg>
+    );
+};
+
+export default AfterpayIcon;
diff --git a/src/components/foundations/payment-icons/alipay-icon.tsx b/src/components/foundations/payment-icons/alipay-icon.tsx
new file mode 100644
index 0000000..b6b182d
--- /dev/null
+++ b/src/components/foundations/payment-icons/alipay-icon.tsx
@@ -0,0 +1,48 @@
+import type { SVGProps } from "react";
+
+const AlipayIcon = (props: SVGProps<SVGSVGElement>) => {
+    return (
+        <svg width="34" height="24" viewBox="0 0 34 24" fill="none" {...props}>
+            <path
+                d="M4 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 20V4C0.5 2.067 2.067 0.5 4 0.5Z"
+                fill="white"
+            />
+            <path
+                d="M4 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 20V4C0.5 2.067 2.067 0.5 4 0.5Z"
+                className="stroke-border-secondary"
+            />
+            <path
+                d="M8.8796 8.79834H4.12156C3.50193 8.79834 3 9.30489 3 9.92916V14.7275C3 15.3518 3.50193 15.8584 4.12156 15.8584H8.8796C9.49923 15.8584 10.0005 15.3518 10.0005 14.7275V9.92916C10.0012 9.30423 9.49923 8.79834 8.8796 8.79834Z"
+                fill="#1677FF"
+            />
+            <path
+                d="M8.76306 13.2317C8.48333 13.1372 8.10705 12.9923 7.68845 12.8396C7.93974 12.3985 8.14078 11.8966 8.27304 11.351H6.89291V10.8497H8.58319V10.57H6.89291V9.73413H6.20318C6.08216 9.73413 6.08216 9.85449 6.08216 9.85449V10.5693H4.3727V10.8491H6.08216V11.3503H4.67029V11.6301H7.40806C7.3082 11.9779 7.1733 12.3053 7.01393 12.6022C6.1258 12.3066 5.1775 12.0672 4.58234 12.2147C4.20143 12.3092 3.95609 12.4779 3.81192 12.6551C3.15063 13.4665 3.62478 14.6992 5.02144 14.6992C5.8474 14.6992 6.64294 14.2349 7.25927 13.4698C8.17913 13.9155 9.99968 14.6813 9.99968 14.6813V13.5902C10.0003 13.5902 9.77154 13.5716 8.76306 13.2317ZM4.89116 14.2276C3.802 14.2276 3.47995 13.3627 4.01825 12.8892C4.19812 12.7291 4.52613 12.6511 4.70071 12.6339C5.34746 12.5698 5.94659 12.8184 6.65352 13.1663C6.15689 13.8196 5.52402 14.2276 4.89116 14.2276Z"
+                fill="white"
+            />
+            <path
+                d="M18.2012 9.83199C18.2012 10.197 18.4683 10.443 18.8406 10.443C19.213 10.443 19.4801 10.197 19.4801 9.83199C19.4801 9.47356 19.213 9.22095 18.8406 9.22095C18.4683 9.22095 18.2012 9.47356 18.2012 9.83199Z"
+                fill="#1677FF"
+            />
+            <path d="M17.5276 9.375H16.418V14.5027H17.5276V9.375Z" fill="black" />
+            <path
+                d="M14.4701 9.5509H12.9809L11.3164 14.5034H12.3421L12.6231 13.5339H14.3861L14.6533 14.5034H15.9667L14.4701 9.5509ZM12.8546 12.7258L13.5146 10.443H13.5423L14.1673 12.7258H12.8546Z"
+                fill="black"
+            />
+            <path d="M19.3948 10.7379H18.2852V14.5033H19.3948V10.7379Z" fill="black" />
+            <path
+                d="M30.9948 10.7452L31.0014 10.7379H29.9552L29.2946 13.028H29.2596L28.5011 10.7379H27.2578L28.7537 14.5172L28.1287 15.6692V15.697H29.1048L30.9948 10.7452Z"
+                fill="black"
+            />
+            <path
+                d="M22.1564 10.6605C21.749 10.6605 21.4329 10.8153 21.0745 11.1102V10.7379H19.9648V15.697H21.0745V14.4676C21.2855 14.5238 21.4819 14.5523 21.7206 14.5523C22.7112 14.5523 23.6033 13.8215 23.6033 12.5221C23.6033 11.3562 22.9572 10.6605 22.1564 10.6605ZM21.4534 13.8566C21.3271 13.8566 21.2074 13.8427 21.0738 13.8004V11.7636C21.306 11.6022 21.4951 11.5248 21.7338 11.5248C22.1484 11.5248 22.4784 11.8548 22.4784 12.5578C22.4791 13.4565 21.9944 13.8566 21.4534 13.8566Z"
+                fill="black"
+            />
+            <path
+                d="M27.0385 13.5616V11.9884C27.0385 11.1314 26.5326 10.6605 25.6405 10.6605C25.0712 10.6605 24.6783 10.7591 23.9615 10.9766L24.1579 11.8409C24.8113 11.546 25.0989 11.4197 25.4011 11.4197C25.7662 11.4197 25.9282 11.6796 25.9282 12.0803V12.1081C24.6565 12.3468 24.263 12.4804 24.0177 12.7264C23.8352 12.9089 23.7578 13.1688 23.7578 13.471C23.7578 14.1945 24.3199 14.5807 24.8463 14.5807C25.2398 14.5807 25.5559 14.4332 25.9844 14.1098L26.0618 14.5033H27.1714L27.0385 13.5616ZM25.9289 13.5901C25.6339 13.7514 25.4653 13.8149 25.2689 13.8149C25.0017 13.8149 24.8331 13.639 24.8331 13.3586C24.8331 13.2535 24.8542 13.1477 24.9382 13.0637C25.0718 12.9301 25.3317 12.8316 25.9289 12.6914V13.5901Z"
+                fill="black"
+            />
+        </svg>
+    );
+};
+
+export default AlipayIcon;
diff --git a/src/components/foundations/payment-icons/amazon-icon.tsx b/src/components/foundations/payment-icons/amazon-icon.tsx
new file mode 100644
index 0000000..37a2bce
--- /dev/null
+++ b/src/components/foundations/payment-icons/amazon-icon.tsx
@@ -0,0 +1,28 @@
+import type { SVGProps } from "react";
+
+const AmazonIcon = (props: SVGProps<SVGSVGElement>) => {
+    return (
+        <svg width="34" height="24" viewBox="0 0 34 24" fill="none" {...props}>
+            <path
+                d="M4 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 20V4C0.5 2.067 2.067 0.5 4 0.5Z"
+                fill="white"
+            />
+            <path
+                d="M4 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 20V4C0.5 2.067 2.067 0.5 4 0.5Z"
+                className="stroke-border-secondary"
+            />
+            <path
+                d="M5.42285 9.01172C5.83247 9.01172 6.36772 9.12645 6.68945 9.45215C7.0668 9.82381 7.06505 10.3102 7.0625 10.8418C7.06229 10.8857 7.06152 10.9301 7.06152 10.9746V12.3516C7.06152 12.7224 7.19221 12.9073 7.33008 13.1016C7.34646 13.1246 7.36352 13.1482 7.37988 13.1719C7.43322 13.25 7.44511 13.3476 7.37988 13.4062C7.20785 13.5573 6.90195 13.8358 6.73438 13.9932L6.72754 13.9922C6.67217 14.0424 6.59304 14.0504 6.5293 14.0127C6.29108 13.8043 6.21871 13.6916 6.1084 13.5186C6.0895 13.4889 6.06906 13.4578 6.04688 13.4238C5.58465 13.9183 5.25782 14.0663 4.66016 14.0664C3.95189 14.0664 3.40039 13.6067 3.40039 12.6875C3.40042 11.9696 3.77268 11.4818 4.29395 11.2422C4.6789 11.0646 5.19266 11.0096 5.63672 10.9619C5.71928 10.9531 5.7995 10.9446 5.87598 10.9355V10.6055C5.87212 10.4545 5.85354 10.3014 5.77441 10.1787C5.67163 10.0159 5.47601 9.94922 5.30176 9.94922C4.9808 9.94922 4.69504 10.1227 4.625 10.4805C4.61613 10.5639 4.55457 10.631 4.47559 10.6436L3.66699 10.5498C3.62668 10.5437 3.59004 10.5212 3.56641 10.4863C3.54276 10.4514 3.53424 10.4073 3.54199 10.3652C3.72899 9.32581 4.62237 9.0118 5.42285 9.01172ZM16.4502 9.00879C16.859 9.00879 17.3943 9.12259 17.7168 9.44824C18.0952 9.81798 18.0928 10.3011 18.0898 10.8301C18.0896 10.8767 18.0889 10.9243 18.0889 10.9717V12.3496C18.0889 12.7196 18.2196 12.9044 18.3574 13.0986C18.3738 13.1217 18.3909 13.1443 18.4072 13.168C18.4638 13.2494 18.4756 13.3454 18.4033 13.3994C18.2313 13.5505 17.9254 13.8297 17.7578 13.9863C17.7021 14.0359 17.6233 14.0443 17.5596 14.0068C17.3203 13.7975 17.2496 13.686 17.1377 13.5107C17.119 13.4815 17.0991 13.4506 17.0771 13.417C16.6155 13.9117 16.286 14.0595 15.6904 14.0596C14.9822 14.0596 14.4307 13.6 14.4307 12.6816C14.4308 11.9632 14.801 11.4759 15.3281 11.2363C15.7139 11.0581 16.2304 11.0034 16.6758 10.9561C16.7566 10.9475 16.8352 10.9385 16.9102 10.9297V10.6025C16.9063 10.4517 16.8872 10.2989 16.8076 10.1768C16.7078 10.0139 16.5085 9.94629 16.335 9.94629C16.014 9.94631 15.7299 10.1198 15.6592 10.4775C15.65 10.5608 15.5886 10.6278 15.5098 10.6406L14.6943 10.5479C14.6537 10.542 14.6176 10.5185 14.5938 10.4834C14.5699 10.4483 14.5604 10.4046 14.5684 10.3623C14.756 9.3219 15.6496 9.00885 16.4502 9.00879ZM24.5801 9.00586C25.8288 9.00603 26.5039 10.1338 26.5039 11.5664C26.5039 12.9513 25.7596 14.0496 24.5801 14.0498C23.355 14.0498 22.6875 12.9223 22.6875 11.5186C22.6875 10.1148 23.3632 9.00586 24.5801 9.00586ZM12.3242 9.02246C12.7675 8.9504 13.213 9.13521 13.4902 9.50586C13.7575 9.88781 13.7032 10.445 13.7031 10.9287V13.7939C13.7023 13.8382 13.6847 13.8804 13.6543 13.9111C13.6239 13.9417 13.583 13.9589 13.541 13.958H12.6992C12.6168 13.9532 12.552 13.8817 12.5508 13.7949V11.3877C12.5508 11.1967 12.5667 10.72 12.5273 10.5381C12.4648 10.2327 12.2758 10.1465 12.0322 10.1465C11.8091 10.1537 11.6111 10.3002 11.5293 10.5186C11.4431 10.7487 11.4512 11.1295 11.4512 11.3877V13.7939C11.4504 13.8382 11.4326 13.8805 11.4023 13.9111C11.372 13.9418 11.3311 13.9588 11.2891 13.958H10.4463C10.3638 13.9531 10.2984 13.8817 10.2969 13.7949V11.3877C10.2969 10.8811 10.3711 10.1357 9.77539 10.1357C9.18008 10.1361 9.19531 10.8609 9.19531 11.3877V13.7939C9.19452 13.8382 9.1768 13.8805 9.14648 13.9111C9.11601 13.9418 9.07443 13.959 9.03223 13.958H8.19141C8.11341 13.9537 8.04962 13.8893 8.04199 13.8076V9.2666C8.04501 9.17579 8.11665 9.10359 8.20312 9.10449H8.9873C9.06757 9.10925 9.13131 9.17731 9.13574 9.26172V9.85449H9.15137C9.35539 9.28074 9.74061 9.01379 10.2588 9.01367C10.7771 9.01367 11.1145 9.28061 11.3506 9.85449C11.5082 9.41285 11.8808 9.09466 12.3242 9.02246ZM29.3984 9C29.7753 9.00002 30.1433 9.14372 30.3809 9.53516C30.6003 9.89835 30.6006 10.5092 30.6006 10.9482V13.8057C30.5883 13.889 30.5187 13.95 30.4385 13.9482H29.5928C29.5169 13.9448 29.4537 13.8848 29.4434 13.8057V10.9395C29.4316 10.5258 29.3532 10.1172 28.917 10.1172C28.7011 10.1278 28.5104 10.2697 28.4297 10.4805C28.3121 10.7576 28.2969 11.0349 28.2969 11.3418V13.7852C28.2936 13.8773 28.2205 13.95 28.1328 13.9482H27.2939C27.2112 13.9437 27.1456 13.8722 27.1445 13.7852V9.24414C27.1535 9.15798 27.2242 9.09357 27.3066 9.0957H28.0869C28.158 9.09814 28.2184 9.15009 28.2354 9.22266V9.91699H28.252C28.4873 9.29613 28.8175 9 29.3984 9ZM22.041 9.08789C22.0829 9.08653 22.1233 9.10302 22.1533 9.13379C22.1833 9.16462 22.2005 9.20687 22.2002 9.25098V9.80762C22.2002 9.90078 22.1255 10.0232 21.9922 10.2158L20.5596 12.3662C21.0912 12.3529 21.6535 12.436 22.1367 12.7217C22.2259 12.7717 22.2822 12.8684 22.2852 12.9746V13.6699C22.2852 13.7654 22.1861 13.8765 22.0811 13.8193C21.1639 13.3238 20.0756 13.3253 19.1602 13.8242C19.0641 13.8782 18.9629 13.7693 18.9629 13.6738V13.0127C18.9541 12.8568 18.9907 12.7017 19.0664 12.5674L20.7256 10.0615H19.2783C19.2362 10.0632 19.1953 10.0465 19.165 10.0156C19.1349 9.98481 19.1178 9.94262 19.1182 9.89844V9.25098C19.1163 9.20682 19.1322 9.16393 19.1621 9.13281C19.1921 9.10162 19.2333 9.0854 19.2754 9.08789H22.041ZM5.87988 11.6455C5.27148 11.6455 4.62891 11.783 4.62891 12.5361C4.62906 12.9194 4.8174 13.1776 5.13965 13.1777C5.37641 13.1777 5.58859 13.0242 5.72266 12.7754C5.88032 12.4806 5.88018 12.2044 5.87988 11.8789V11.6455ZM16.9111 11.6416C16.3028 11.6416 15.6602 11.7784 15.6602 12.5322C15.6603 12.9147 15.8487 13.1727 16.1709 13.1729C16.407 13.1729 16.6206 13.0197 16.7539 12.7715C16.9121 12.4752 16.9113 12.1977 16.9111 11.8682V11.6416ZM24.5889 9.93359C23.9686 9.93359 23.9287 10.8207 23.9287 11.375C23.9287 11.381 23.9287 11.3874 23.9287 11.3936C23.9286 11.9551 23.9283 13.1131 24.5801 13.1133C25.2391 13.1133 25.2637 12.1587 25.2637 11.5762C25.2637 11.1941 25.2479 10.7346 25.1377 10.3721C25.0431 10.0594 24.8551 9.93373 24.5889 9.93359Z"
+                fill="black"
+            />
+            <path
+                fillRule="evenodd"
+                clipRule="evenodd"
+                d="M20.5014 16.8449C20.6928 16.3446 21.1188 15.2234 20.9162 14.9518H20.9177C20.716 14.6795 19.584 14.8224 19.0748 14.8867L19.0737 14.8868C18.9188 14.9064 18.895 14.7647 19.0342 14.6621C19.9384 13.9943 21.4197 14.1853 21.5917 14.4108C21.7638 14.6363 21.5448 16.1974 20.698 16.9428C20.5677 17.0571 20.4433 16.996 20.5014 16.8449ZM14.418 17.6169C16.3871 17.6169 18.6802 16.9631 20.2598 15.7379V15.7402C20.5212 15.5335 20.2971 15.2297 20.0304 15.3487C18.3062 16.1133 16.4553 16.5124 14.584 16.5231C11.9878 16.5231 9.47649 15.7746 7.44479 14.5321C7.26679 14.4233 7.13423 14.6151 7.28318 14.7553C9.23913 16.6105 11.7836 17.631 14.418 17.6169Z"
+                fill="#FF9900"
+            />
+        </svg>
+    );
+};
+
+export default AmazonIcon;
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/ayden-icon.tsx b/src/components/foundations/payment-icons/ayden-icon.tsx
new file mode 100644
index 0000000..5168166
--- /dev/null
+++ b/src/components/foundations/payment-icons/ayden-icon.tsx
@@ -0,0 +1,35 @@
+import type { SVGProps } from "react";
+
+const AydenIcon = (props: SVGProps<SVGSVGElement>) => {
+    return (
+        <svg width="34" height="24" viewBox="0 0 34 24" fill="none" {...props}>
+            <path
+                d="M4 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 20V4C0.5 2.067 2.067 0.5 4 0.5Z"
+                fill="white"
+            />
+            <path
+                d="M4 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 20V4C0.5 2.067 2.067 0.5 4 0.5Z"
+                className="stroke-border-secondary"
+            />
+            <path
+                d="M4 9.88237H7.82358C8.24608 9.88237 8.58829 10.2246 8.58829 10.6471V14.4707H4.76472C4.34221 14.4707 4 14.1285 4 13.7059V11.7942H5.91179V13.3236H6.6765V11.0294H4V9.88237Z"
+                fill="#00D16A"
+            />
+            <path d="M25.4117 9.88239V14.4707H27.3235V11.0295H28.0882V14.4707H30V10.6471C30 10.2246 29.6578 9.88239 29.2353 9.88239H25.4117Z" fill="#00D16A" />
+            <path
+                d="M14.7062 16.3825H18.5298C18.9523 16.3825 19.2945 16.0403 19.2945 15.6178V9.88239H17.3828V13.3236H16.618V9.88239H14.7062V13.706C14.7062 14.1285 15.0485 14.4707 15.471 14.4707H17.3828V15.2354H14.7062V16.3825Z"
+                fill="#00D16A"
+            />
+            <path
+                d="M24.6473 14.4707H20.8237C20.4012 14.4707 20.059 14.1285 20.059 13.7059V9.88237H23.8826C24.3051 9.88237 24.6473 10.2246 24.6473 10.6471V12.5589H22.7355V11.0294H21.9708V13.3236H24.6473V14.4707Z"
+                fill="#00D16A"
+            />
+            <path
+                d="M13.941 7.97058V14.4707H10.1174C9.69494 14.4707 9.35273 14.1285 9.35273 13.7059V10.6471C9.35273 10.2246 9.69494 9.88237 10.1174 9.88237H11.2645V13.3236H12.0292V7.97058H13.941Z"
+                fill="#00D16A"
+            />
+        </svg>
+    );
+};
+
+export default AydenIcon;
diff --git a/src/components/foundations/payment-icons/bancontact-icon.tsx b/src/components/foundations/payment-icons/bancontact-icon.tsx
new file mode 100644
index 0000000..a198c60
--- /dev/null
+++ b/src/components/foundations/payment-icons/bancontact-icon.tsx
@@ -0,0 +1,32 @@
+import type { SVGProps } from "react";
+
+const BancontactIcon = (props: SVGProps<SVGSVGElement>) => {
+    return (
+        <svg width="34" height="24" viewBox="0 0 34 24" fill="none" {...props}>
+            <path
+                d="M4 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 20V4C0.5 2.067 2.067 0.5 4 0.5Z"
+                fill="white"
+            />
+            <path
+                d="M4 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 20V4C0.5 2.067 2.067 0.5 4 0.5Z"
+                className="stroke-border-secondary"
+            />
+            <path
+                d="M25.4911 7.43799H18.7193L18.0306 8.23717L15.7957 10.8303V10.8304L15.107 11.6295H8.42477L9.10282 10.8203L9.42376 10.4372L10.1018 9.62795H7.02279C6.46029 9.62795 6 10.1144 6 10.7088V12.9895C6 13.5841 6.46029 14.0705 7.02279 14.0705H18.8106C19.3731 14.0705 20.1415 13.7092 20.5182 13.2677L22.3013 11.1774L25.4911 7.43799Z"
+                fill="#005697"
+            />
+            <path
+                d="M26.8511 5C27.4136 5 27.8739 5.48643 27.8739 6.08098V8.36157C27.8739 8.95603 27.4136 9.44255 26.8511 9.44255H23.7821L24.4666 8.63935H24.4667L24.8061 8.24114L25.4905 7.43804H18.7188L15.1066 11.6326H8.38281L13.2047 6.01336L13.3872 5.8007C13.7652 5.3603 14.5346 5 15.0971 5H26.8511V5Z"
+                fill="#FBD500"
+            />
+            <path
+                fillRule="evenodd"
+                clipRule="evenodd"
+                d="M8.30498 17.9475C8.30498 17.7986 8.27088 17.6697 8.20285 17.5609C8.13473 17.4521 8.04515 17.369 7.93401 17.3117C8.04515 17.2545 8.13127 17.1699 8.19246 17.0582C8.25357 16.9465 8.28412 16.8206 8.28412 16.6803V16.6029C8.28412 16.431 8.25218 16.2879 8.18831 16.1733C8.12434 16.0588 8.03467 15.9671 7.91939 15.8984C7.8041 15.8296 7.66579 15.7803 7.50471 15.7501C7.34347 15.7201 7.1643 15.7051 6.96696 15.7051C6.90032 15.7051 6.83082 15.7065 6.75863 15.7094C6.68627 15.7122 6.61617 15.7158 6.54814 15.7201C6.48002 15.7243 6.41744 15.7294 6.36058 15.7351C6.30354 15.7409 6.25697 15.7466 6.22088 15.7523C6.1403 15.7667 6.08335 15.7924 6.05003 15.8296C6.0167 15.8669 6 15.9342 6 16.0316V18.6435C6 18.7409 6.01731 18.8081 6.0521 18.8453C6.08681 18.8826 6.14584 18.9083 6.22928 18.9227C6.27091 18.9312 6.32094 18.9384 6.37927 18.9442C6.43761 18.9499 6.50079 18.9549 6.56891 18.9592C6.63703 18.9634 6.70713 18.967 6.7794 18.9699C6.85168 18.9727 6.92248 18.9742 6.99198 18.9742C7.17261 18.9742 7.34277 18.9599 7.50264 18.9312C7.66233 18.9027 7.80124 18.8518 7.91939 18.7787C8.03753 18.7057 8.13127 18.6069 8.20077 18.4824C8.27018 18.3577 8.30498 18.2009 8.30498 18.0119V17.9475ZM7.59602 16.7146C7.59602 16.7605 7.5891 16.8042 7.57516 16.8457C7.56123 16.8871 7.53838 16.9229 7.50644 16.9532C7.47442 16.9831 7.4314 17.0075 7.37722 17.026C7.32304 17.0447 7.25423 17.054 7.17088 17.054H6.7041V16.3108C6.71795 16.3108 6.7395 16.3102 6.76867 16.3087C6.79784 16.3072 6.82839 16.3065 6.86033 16.3065H7.0208C7.23475 16.3065 7.38414 16.3344 7.46888 16.3903C7.55361 16.4461 7.59602 16.5327 7.59602 16.6501V16.7146ZM7.48974 18.274C7.5717 18.2082 7.61273 18.115 7.61273 17.9948V17.9475C7.61273 17.8444 7.58071 17.7549 7.51683 17.679C7.45287 17.6032 7.33758 17.5652 7.17088 17.5652H6.7041V18.3685H6.77698C6.80892 18.3685 6.84224 18.3694 6.87703 18.3707C6.91174 18.3721 6.94506 18.3729 6.97709 18.3729H7.04581C7.25977 18.3729 7.40777 18.3399 7.48974 18.274ZM10.5888 17.316C10.5888 17.1586 10.5659 17.0246 10.52 16.9144C10.4742 16.8042 10.4095 16.7139 10.3262 16.6437C10.2428 16.5736 10.1407 16.5221 10.0198 16.4891C9.89897 16.4562 9.76351 16.4397 9.61343 16.4397C9.47443 16.4397 9.33897 16.4498 9.20707 16.4698C9.07499 16.4898 8.97009 16.5099 8.89236 16.5299C8.83957 16.5443 8.81317 16.5757 8.81317 16.6243V16.9723C8.81317 17.0011 8.82009 17.0211 8.83403 17.0325C8.84788 17.044 8.86588 17.0498 8.88821 17.0498H8.90898L9.03405 17.039C9.08408 17.0347 9.14034 17.0312 9.20291 17.0282C9.2654 17.0254 9.33066 17.0233 9.39878 17.0218C9.46681 17.0203 9.53424 17.0196 9.60097 17.0196C9.69817 17.0196 9.77459 17.0383 9.83016 17.0755C9.88573 17.1127 9.91351 17.1929 9.91351 17.316V17.4707H9.68847C9.32997 17.4707 9.06945 17.5287 8.9069 17.6447C8.74436 17.7606 8.66309 17.9447 8.66309 18.1967V18.2355C8.66309 18.3757 8.68325 18.4931 8.7235 18.5876C8.76375 18.6821 8.81732 18.758 8.88397 18.8154C8.9507 18.8726 9.02635 18.9134 9.11117 18.9377C9.1959 18.962 9.28419 18.9743 9.37585 18.9743C9.50091 18.9743 9.60858 18.957 9.69886 18.9227C9.78913 18.8884 9.87456 18.8411 9.95523 18.781V18.8496C9.95523 18.8726 9.96354 18.8926 9.98024 18.9098C9.99695 18.927 10.0163 18.9355 10.0386 18.9355H10.5054C10.5276 18.9355 10.5471 18.927 10.5638 18.9098C10.5805 18.8926 10.5888 18.8726 10.5888 18.8496V17.316ZM9.76619 18.4221C9.82306 18.4036 9.87663 18.3813 9.92666 18.3556V17.8831H9.68907C9.6168 17.8831 9.55708 17.8895 9.50982 17.9023C9.46257 17.9153 9.425 17.9346 9.39731 17.9604C9.36952 17.9861 9.35005 18.0191 9.33897 18.0591C9.32781 18.0993 9.32227 18.145 9.32227 18.1966V18.2354C9.32227 18.3269 9.34373 18.3856 9.38683 18.4114C9.42994 18.4372 9.49589 18.45 9.58487 18.45C9.64874 18.45 9.70915 18.4408 9.76619 18.4221ZM13.1405 18.8454V17.4148C13.1405 17.2804 13.1301 17.1535 13.1093 17.0347C13.0884 16.916 13.0509 16.8127 12.9968 16.7253C12.9426 16.638 12.8675 16.5685 12.7716 16.517C12.6758 16.4655 12.5528 16.4397 12.4028 16.4397C12.2694 16.4397 12.1512 16.4563 12.0485 16.4895C11.9457 16.5227 11.8373 16.5811 11.7234 16.6648V16.5607C11.7234 16.5376 11.715 16.5174 11.6984 16.5001C11.6817 16.4828 11.6622 16.474 11.64 16.474H11.1732C11.1509 16.474 11.1315 16.4826 11.1149 16.4998C11.0982 16.517 11.0898 16.5371 11.0898 16.5599V18.8454C11.0898 18.8683 11.0988 18.8891 11.1169 18.9076C11.1349 18.9263 11.1551 18.9355 11.1773 18.9355H11.6817C11.7039 18.9355 11.7234 18.9263 11.74 18.9077C11.7567 18.8892 11.765 18.8685 11.765 18.8455V17.1567C11.8373 17.1168 11.9053 17.0839 11.9693 17.0582C12.0332 17.0325 12.0957 17.0196 12.1569 17.0196C12.2207 17.0196 12.2728 17.026 12.3132 17.039C12.3534 17.0518 12.3847 17.0739 12.4069 17.1055C12.4292 17.1368 12.4445 17.1782 12.4528 17.2296C12.4611 17.2811 12.4653 17.344 12.4653 17.4183V18.8455C12.4653 18.8685 12.4736 18.8892 12.4903 18.9077C12.507 18.9263 12.5264 18.9355 12.5487 18.9355H13.053C13.0752 18.9355 13.0954 18.9263 13.1134 18.9076C13.1315 18.8891 13.1405 18.8683 13.1405 18.8454ZM15.1912 18.4288V18.811C15.1912 18.8425 15.1842 18.8647 15.1703 18.8776C15.1564 18.8905 15.1342 18.9012 15.1036 18.9098C15.0453 18.9241 14.9695 18.9384 14.8765 18.9528C14.7834 18.967 14.6743 18.9743 14.5492 18.9743C14.2547 18.9743 14.0192 18.8812 13.8428 18.695C13.6663 18.5089 13.5781 18.2397 13.5781 17.8874V17.5266C13.5781 17.1743 13.6663 16.9051 13.8428 16.719C14.0192 16.5327 14.2547 16.4397 14.5492 16.4397C14.6743 16.4397 14.7834 16.4468 14.8765 16.4611C14.9695 16.4756 15.0453 16.4898 15.1036 16.5041C15.1342 16.5127 15.1564 16.5235 15.1703 16.5363C15.1842 16.5492 15.1912 16.5715 15.1912 16.6029V16.9853C15.1912 17.0082 15.1835 17.026 15.1683 17.039C15.1529 17.0518 15.1342 17.0582 15.112 17.0582H15.1036C15.0258 17.0498 14.9515 17.0425 14.8807 17.0368C14.8098 17.0312 14.7146 17.0282 14.5951 17.0282C14.5479 17.0282 14.5035 17.0361 14.4617 17.0518C14.42 17.0676 14.3839 17.0948 14.3534 17.1334C14.3227 17.1722 14.2985 17.2236 14.2804 17.2881C14.2623 17.3525 14.2533 17.432 14.2533 17.5266V17.8874C14.2533 17.9819 14.2623 18.0613 14.2804 18.1258C14.2985 18.1902 14.3227 18.2418 14.3534 18.2804C14.3839 18.3191 14.42 18.3463 14.4617 18.362C14.5035 18.3778 14.5479 18.3857 14.5951 18.3857C14.7146 18.3857 14.8098 18.3828 14.8807 18.3771C14.9515 18.3714 15.0258 18.3642 15.1036 18.3556H15.112C15.1342 18.3556 15.1529 18.362 15.1683 18.375C15.1835 18.3879 15.1912 18.4058 15.1912 18.4288ZM17.5046 17.5566C17.5046 17.3847 17.4816 17.2301 17.4356 17.0927C17.3897 16.9552 17.3228 16.8385 17.2352 16.7425C17.1475 16.6467 17.0389 16.5722 16.9095 16.5192C16.78 16.4663 16.6302 16.4397 16.4604 16.4397C16.2906 16.4397 16.141 16.4663 16.0115 16.5192C15.882 16.5722 15.7727 16.6467 15.6836 16.7425C15.5945 16.8385 15.527 16.9552 15.4811 17.0927C15.435 17.2301 15.4121 17.3847 15.4121 17.5566V17.8573C15.4121 18.0291 15.435 18.1838 15.4811 18.3213C15.527 18.4587 15.5945 18.5754 15.6836 18.6714C15.7727 18.7674 15.882 18.8418 16.0115 18.8948C16.141 18.9477 16.2906 18.9743 16.4604 18.9743C16.6302 18.9743 16.78 18.9477 16.9095 18.8948C17.0389 18.8418 17.1475 18.7674 17.2352 18.6714C17.3228 18.5754 17.3897 18.4587 17.4356 18.3213C17.4816 18.1838 17.5046 18.0291 17.5046 17.8573V17.5566ZM16.46 18.3856C16.7059 18.3856 16.8289 18.2095 16.8289 17.8573V17.5566C16.8289 17.2072 16.7059 17.0324 16.46 17.0324C16.3384 17.0324 16.2459 17.0761 16.1824 17.1635C16.1188 17.2509 16.087 17.3819 16.087 17.5566V17.8573C16.087 18.0319 16.1188 18.1637 16.1824 18.2525C16.2459 18.3413 16.3384 18.3856 16.46 18.3856ZM19.9844 18.8454V17.4148C19.9844 17.2804 19.9738 17.1535 19.9531 17.0347C19.9323 16.916 19.8947 16.8127 19.8404 16.7253C19.7862 16.638 19.7113 16.5685 19.6155 16.517C19.5196 16.4655 19.3966 16.4397 19.2466 16.4397C19.1132 16.4397 18.9951 16.4563 18.8922 16.4895C18.7894 16.5227 18.6811 16.5811 18.5672 16.6648V16.5607C18.5672 16.5376 18.5588 16.5174 18.5421 16.5001C18.5255 16.4828 18.506 16.474 18.4838 16.474H18.0169C17.9947 16.474 17.9753 16.4826 17.9586 16.4998C17.942 16.517 17.9336 16.5371 17.9336 16.5599V18.8454C17.9336 18.8683 17.9426 18.8891 17.9607 18.9076C17.9788 18.9263 17.9989 18.9355 18.0212 18.9355H18.5255C18.5477 18.9355 18.5672 18.9263 18.5839 18.9077C18.6005 18.8892 18.6089 18.8685 18.6089 18.8455V17.1567C18.6811 17.1168 18.7492 17.0839 18.8131 17.0582C18.877 17.0325 18.9395 17.0196 19.0007 17.0196C19.0646 17.0196 19.1167 17.026 19.1569 17.039C19.1972 17.0518 19.2285 17.0739 19.2507 17.1055C19.273 17.1368 19.2882 17.1782 19.2966 17.2296C19.3049 17.2811 19.3091 17.344 19.3091 17.4183V18.8455C19.3091 18.8685 19.3174 18.8892 19.3341 18.9077C19.3508 18.9263 19.3702 18.9355 19.3924 18.9355H19.8968C19.919 18.9355 19.9392 18.9263 19.9573 18.9076C19.9753 18.8891 19.9844 18.8683 19.9844 18.8454ZM21.8019 18.5224V18.8549C21.8019 18.9032 21.7755 18.9316 21.7227 18.94C21.6588 18.9514 21.6032 18.9599 21.556 18.9656C21.5088 18.9713 21.4545 18.9742 21.3935 18.9742C21.2801 18.9742 21.18 18.9648 21.093 18.9462C21.006 18.9276 20.9334 18.8911 20.8754 18.8367C20.8175 18.7823 20.7733 18.7071 20.7429 18.6111C20.7126 18.5152 20.6974 18.3915 20.6974 18.2396V16.9938L20.364 16.9379C20.3416 16.9322 20.3215 16.9215 20.3035 16.9057C20.2854 16.89 20.2764 16.8706 20.2764 16.8477V16.5641C20.2764 16.5413 20.2854 16.5205 20.3035 16.5019C20.3215 16.4833 20.3416 16.4739 20.364 16.4739H20.6974V16.1217C20.6974 16.0988 20.7057 16.0802 20.7222 16.0658C20.7386 16.0516 20.7581 16.0416 20.7803 16.0358L21.2857 15.9457H21.298C21.3201 15.9457 21.3381 15.952 21.352 15.9649C21.3657 15.9778 21.3726 15.9957 21.3726 16.0186V16.4739H21.7144C21.7366 16.4739 21.7561 16.4826 21.7728 16.4999C21.7895 16.5172 21.7978 16.5375 21.7978 16.5606V16.9114C21.7978 16.9346 21.7895 16.9548 21.7728 16.9721C21.7561 16.9894 21.7366 16.998 21.7144 16.998H21.3726V18.2481C21.3726 18.334 21.3796 18.3893 21.3935 18.4135C21.4073 18.4379 21.4462 18.45 21.5101 18.45H21.7144C21.7728 18.45 21.8019 18.4742 21.8019 18.5224ZM24.0272 17.316C24.0272 17.1585 24.0044 17.0246 23.9584 16.9143C23.9126 16.8041 23.8481 16.7139 23.7647 16.6437C23.6814 16.5735 23.5792 16.5221 23.4583 16.4891C23.3375 16.4561 23.202 16.4396 23.0519 16.4396C22.9129 16.4396 22.7775 16.4497 22.6456 16.4698C22.5135 16.4898 22.4086 16.5098 22.3309 16.5298C22.2779 16.5443 22.2517 16.5757 22.2517 16.6243V16.9723C22.2517 17.001 22.2585 17.0211 22.2724 17.0324C22.2864 17.0439 22.3044 17.0497 22.3266 17.0497H22.3475L22.4726 17.0389C22.5226 17.0346 22.5788 17.0312 22.6413 17.0281C22.7039 17.0254 22.7692 17.0232 22.8373 17.0217C22.9053 17.0203 22.9727 17.0196 23.0394 17.0196C23.1367 17.0196 23.2131 17.0382 23.2687 17.0754C23.3242 17.1127 23.352 17.1929 23.352 17.316V17.4707H23.127C22.7684 17.4707 22.508 17.5286 22.3454 17.6446C22.1829 17.7606 22.1016 17.9446 22.1016 18.1966V18.2354C22.1016 18.3756 22.1217 18.493 22.162 18.5875C22.2022 18.6821 22.2558 18.758 22.3225 18.8153C22.3892 18.8725 22.4649 18.9134 22.5497 18.9376C22.6344 18.962 22.7226 18.9742 22.8144 18.9742C22.9394 18.9742 23.047 18.957 23.1374 18.9226C23.2276 18.8883 23.313 18.841 23.3937 18.7809V18.8496C23.3937 18.8725 23.402 18.8926 23.4188 18.9097C23.4354 18.9269 23.4548 18.9355 23.4771 18.9355H23.944C23.9661 18.9355 23.9856 18.9269 24.0023 18.9097C24.0189 18.8926 24.0272 18.8725 24.0272 18.8496V17.316ZM23.2037 18.4221C23.2606 18.4036 23.3141 18.3813 23.3642 18.3556V17.8831H23.1266C23.0543 17.8831 22.9946 17.8895 22.9473 17.9023C22.9001 17.9153 22.8625 17.9346 22.8348 17.9604C22.8069 17.9861 22.7875 18.0191 22.7765 18.0591C22.7653 18.0993 22.7598 18.145 22.7598 18.1966V18.2354C22.7598 18.3269 22.7812 18.3856 22.8243 18.4114C22.8674 18.4372 22.9334 18.45 23.0224 18.45C23.0862 18.45 23.1466 18.4408 23.2037 18.4221ZM26.078 18.811V18.4287C26.078 18.4057 26.0703 18.3879 26.055 18.3749C26.0397 18.362 26.021 18.3556 25.9988 18.3556H25.9905C25.9127 18.3641 25.8383 18.3714 25.7674 18.3771C25.6966 18.3828 25.6014 18.3856 25.482 18.3856C25.4346 18.3856 25.3902 18.3778 25.3486 18.362C25.3069 18.3463 25.2707 18.3191 25.2402 18.2804C25.2096 18.2417 25.1853 18.1902 25.1673 18.1258C25.1491 18.0613 25.1402 17.9818 25.1402 17.8873V17.5265C25.1402 17.432 25.1491 17.3525 25.1673 17.2881C25.1853 17.2236 25.2096 17.1721 25.2402 17.1334C25.2707 17.0948 25.3069 17.0676 25.3486 17.0518C25.3902 17.0361 25.4346 17.0281 25.482 17.0281C25.6014 17.0281 25.6966 17.0312 25.7674 17.0368C25.8383 17.0425 25.9127 17.0497 25.9905 17.0582H25.9988C26.021 17.0582 26.0397 17.0518 26.055 17.0389C26.0703 17.026 26.078 17.0081 26.078 16.9852V16.6029C26.078 16.5714 26.0711 16.5492 26.0571 16.5363C26.0431 16.5234 26.021 16.5126 25.9905 16.504C25.9321 16.4898 25.8563 16.4755 25.7633 16.4611C25.6701 16.4468 25.5612 16.4396 25.4361 16.4396C25.1414 16.4396 24.9061 16.5327 24.7296 16.7189C24.5531 16.905 24.4649 17.1742 24.4649 17.5265V17.8873C24.4649 18.2396 24.5531 18.5088 24.7296 18.6949C24.9061 18.8812 25.1414 18.9742 25.4361 18.9742C25.5612 18.9742 25.6701 18.967 25.7633 18.9528C25.8563 18.9383 25.9321 18.9241 25.9905 18.9097C26.021 18.9011 26.0431 18.8904 26.0571 18.8775C26.0711 18.8647 26.078 18.8424 26.078 18.811ZM27.8744 18.5225V18.8549C27.8744 18.9032 27.8479 18.9316 27.7952 18.94C27.7312 18.9514 27.6757 18.9599 27.6285 18.9656C27.5812 18.9713 27.527 18.9742 27.466 18.9742C27.3526 18.9742 27.2524 18.9648 27.1655 18.9463C27.0784 18.9276 27.0059 18.8911 26.9479 18.8367C26.89 18.7823 26.8457 18.7071 26.8153 18.6111C26.7851 18.5152 26.7698 18.3915 26.7698 18.2396V16.9939L26.4364 16.9379C26.4141 16.9322 26.394 16.9215 26.3759 16.9057C26.3578 16.89 26.3488 16.8707 26.3488 16.8477V16.5642C26.3488 16.5413 26.3578 16.5205 26.3759 16.5019C26.394 16.4833 26.4141 16.474 26.4364 16.474H26.7698V16.1217C26.7698 16.0988 26.7781 16.0802 26.7947 16.0659C26.8111 16.0516 26.8305 16.0416 26.8527 16.0358L27.358 15.9457H27.3705C27.3926 15.9457 27.4106 15.952 27.4242 15.9649C27.4382 15.9778 27.4451 15.9958 27.4451 16.0186V16.474H27.7869C27.8091 16.474 27.8285 16.4826 27.8452 16.4999C27.8619 16.5172 27.8703 16.5376 27.8703 16.5606V16.9114C27.8703 16.9346 27.8619 16.9548 27.8452 16.9721C27.8285 16.9894 27.8091 16.9981 27.7869 16.9981H27.4451V18.2482C27.4451 18.3341 27.452 18.3893 27.466 18.4135C27.4798 18.4379 27.5187 18.45 27.5826 18.45H27.7869C27.8452 18.45 27.8744 18.4742 27.8744 18.5225Z"
+                fill="#005697"
+            />
+        </svg>
+    );
+};
+
+export default BancontactIcon;
diff --git a/src/components/foundations/payment-icons/binance-pay-icon.tsx b/src/components/foundations/payment-icons/binance-pay-icon.tsx
new file mode 100644
index 0000000..c84e7c0
--- /dev/null
+++ b/src/components/foundations/payment-icons/binance-pay-icon.tsx
@@ -0,0 +1,56 @@
+import type { SVGProps } from "react";
+
+const BinancePayIcon = (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="#FCD535" />
+            <path d="M5.9283 13.8692H5.9029L4.73638 12.7215L5.17973 12.2804L5.9156 13.0112L6.65122 12.2804L7.09457 12.7215L5.9283 13.8692Z" fill="#0B0B0B" />
+            <path d="M4 12.0026V11.9521L4.44056 11.5504L4.86055 11.9866L4.44056 12.4043L4 12.0026Z" fill="#0B0B0B" />
+            <path
+                d="M10.1117 11.9519C10.4098 11.7518 10.4789 11.2958 10.1749 11.0696C10.1264 11.0335 9.94918 10.9515 9.89611 10.9434H8.69124V13.0116H9.94689C9.98904 13.0116 10.2087 12.9199 10.2562 12.8904C10.6343 12.6551 10.5533 12.04 10.1117 11.9519ZM9.14779 11.3468H9.71861C9.95781 11.3468 9.95781 11.7757 9.71861 11.7757H9.14779V11.3468ZM9.98244 12.5174C9.96847 12.539 9.85751 12.6081 9.84532 12.6081H9.14779V12.1792H9.84532C9.99387 12.1792 10.0596 12.3976 9.98244 12.5174Z"
+                fill="#0B0B0B"
+            />
+            <path
+                d="M12.5125 10.9434L13.4891 12.2046V10.9434H13.9457V13.037H13.5777C13.4932 13.037 12.6951 11.8377 12.525 11.7252V13.0116H12.0684V10.9434H12.5125Z"
+                fill="#0B0B0B"
+            />
+            <path
+                d="M17.2924 10.9439C17.2952 10.9457 17.2965 10.984 17.3173 11.0063C17.653 11.3672 17.9203 11.839 18.2565 12.2051V10.9439H18.7131V13.0375H18.3452C18.3314 13.0375 18.2931 13.0078 18.2812 12.993L17.2924 11.726V13.0123H16.8358V10.9439C16.911 10.9599 17.2589 10.9223 17.2924 10.9439Z"
+                fill="#0B0B0B"
+            />
+            <path d="M23.0523 10.918V11.3468H21.936V11.7503H22.9253V12.1792H21.936V12.6081H23.0777V13.0116H21.4795V10.918H23.0523Z" fill="#0B0B0B" />
+            <path
+                d="M15.6154 10.9215L15.1994 10.9164L14.2744 13.0115H14.7436L14.931 12.5725C14.9376 12.5519 14.9544 12.5577 14.9709 12.556C15.0631 12.545 15.7515 12.5433 15.805 12.5615C15.8881 12.59 15.9477 12.9412 16.0374 13.0115H16.5069L15.6154 10.9215ZM15.1116 12.154L15.3655 11.4981C15.3965 11.5007 15.4082 11.5329 15.4208 11.5563C15.5105 11.72 15.5902 11.9745 15.6443 12.154H15.1116Z"
+                fill="#0B0B0B"
+            />
+            <path
+                d="M20.1548 10.9009C20.3303 10.8847 20.5583 10.9144 20.7251 10.9748C20.8021 11.0028 21.0743 11.1549 21.074 11.2341C21.074 11.2574 20.83 11.5403 20.8031 11.5454C20.7556 11.5545 20.669 11.4613 20.6175 11.4349C19.6569 10.9451 19.3039 12.3668 20.0784 12.6017C20.3407 12.6812 20.6246 12.5781 20.8069 12.3821C20.8457 12.4387 21.0898 12.6355 21.0969 12.6754C21.1141 12.7736 20.6962 12.9841 20.6027 13.011C18.9949 13.4729 18.5848 11.0467 20.1548 10.9009Z"
+                fill="#0B0B0B"
+            />
+            <path
+                d="M27.2247 10.9167C27.126 10.9357 26.9475 10.8773 26.8835 10.9586L25.993 13.0118H26.3736L26.5737 12.523C26.6044 12.4834 27.4358 12.5174 27.5617 12.5116C27.5937 12.574 27.7514 13.0118 27.7813 13.0118H28.1493L27.2247 10.9167ZM26.7286 12.1794L27.0711 11.372L27.4137 12.1794H26.7286Z"
+                fill="#0B0B0B"
+            />
+            <path
+                d="M25.6782 11.0434C25.6401 11.0218 25.4532 10.9434 25.4238 10.9434H24.3964V13.0116H24.7517V12.3559H25.2971C25.3331 12.3559 25.5251 12.2955 25.5728 12.277C26.1046 12.0687 26.1724 11.326 25.6782 11.0434ZM25.5495 11.8755C25.5223 11.91 25.3816 12.0027 25.3479 12.0027H24.7517V11.2712H25.2717C25.3044 11.2712 25.4515 11.3329 25.4883 11.3585C25.648 11.4702 25.6673 11.7265 25.5495 11.8755Z"
+                fill="#0B0B0B"
+            />
+            <path
+                d="M5.91535 10.0864L7.09457 11.2587L6.67305 11.6731L5.9156 10.9439L5.17643 11.6731C5.12869 11.6815 4.80545 11.311 4.73638 11.2587L5.91535 10.0864Z"
+                fill="#0B0B0B"
+            />
+            <path
+                d="M28.4272 10.9436L28.9729 11.8268L29.032 11.7846C29.111 11.6912 29.531 10.9436 29.5815 10.9436H30L29.1628 12.1921V13.0118H28.8076V12.2173L27.9704 10.9434L28.4272 10.9436Z"
+                fill="#0B0B0B"
+            />
+            <path d="M11.4585 10.9434H11.0019V13.0118H11.4585V10.9434Z" fill="#0B0B0B" />
+            <path d="M7.41299 11.5496C7.4658 11.6182 7.83831 11.9396 7.82968 11.9871L7.39115 12.4051L6.97091 11.9691L7.41299 11.5496Z" fill="#0B0B0B" />
+            <path
+                d="M5.91498 11.5496L6.33167 11.9688C6.34005 12.0163 5.96754 12.3378 5.91498 12.4063L5.49829 11.9871C5.48991 11.9396 5.86241 11.6182 5.91498 11.5496Z"
+                fill="#0B0B0B"
+            />
+        </svg>
+    );
+};
+
+export default BinancePayIcon;
diff --git a/src/components/foundations/payment-icons/bitcoin-cash-icon.tsx b/src/components/foundations/payment-icons/bitcoin-cash-icon.tsx
new file mode 100644
index 0000000..8d6d3e1
--- /dev/null
+++ b/src/components/foundations/payment-icons/bitcoin-cash-icon.tsx
@@ -0,0 +1,22 @@
+import type { SVGProps } from "react";
+
+const BitcoinCashIcon = (props: SVGProps<SVGSVGElement>) => {
+    return (
+        <svg width="34" height="24" viewBox="0 0 34 24" fill="none" {...props}>
+            <path
+                d="M4 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 20V4C0.5 2.067 2.067 0.5 4 0.5Z"
+                fill="white"
+            />
+            <path
+                d="M4 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 20V4C0.5 2.067 2.067 0.5 4 0.5Z"
+                className="stroke-border-secondary"
+            />
+            <path
+                d="M13.0968 4.69581C17.016 2.48348 21.987 3.86713 24.1996 7.78648C26.4122 11.706 25.0287 16.6777 21.1094 18.8902C17.1901 21.1027 12.2187 19.7182 10.0061 15.7987C7.7937 11.8791 9.17747 6.90823 13.0968 4.69581ZM14.8236 8.88515L13.027 9.38569L13.2886 10.3359C13.296 10.3337 13.9401 10.1414 13.9359 10.1555C14.2972 10.0557 14.473 10.2318 14.5566 10.4028L15.6578 14.4037C15.6729 14.521 15.6552 14.7204 15.4031 14.7908C15.4172 14.7973 14.7678 14.9671 14.7553 14.9703L14.8703 16.0818L16.6689 15.589L17.0756 17.0663L17.9666 16.819L17.5642 15.3573C17.8099 15.2941 18.0478 15.2312 18.2788 15.167L18.6782 16.6214L19.5696 16.375L19.1644 14.9003C20.6399 14.3986 21.5858 13.7307 21.3294 12.291C21.0802 11.331 20.4512 10.7758 19.5445 10.8079C19.9897 10.4021 20.1857 9.84976 19.8981 9.09999C19.5065 8.07541 18.4969 7.97515 17.3184 8.19338L16.9166 6.73251L16.0256 6.97979L16.4168 8.40184C16.1827 8.46672 15.9444 8.53818 15.7074 8.60937L15.3131 7.17786L14.4225 7.42381L14.8236 8.88515ZM16.7511 12.3197C17.3557 12.1522 19.2023 11.4538 19.5195 12.6051C19.8232 13.7087 17.8937 14.1087 17.2895 14.2766L16.7511 12.3197ZM16.0159 9.64858C16.5198 9.5093 18.0566 8.91185 18.3452 9.95865C18.6207 10.9623 17.0076 11.2838 16.5045 11.4239L16.0159 9.64858Z"
+                fill="#8FC258"
+            />
+        </svg>
+    );
+};
+
+export default BitcoinCashIcon;
diff --git a/src/components/foundations/payment-icons/bitcoin-icon.tsx b/src/components/foundations/payment-icons/bitcoin-icon.tsx
new file mode 100644
index 0000000..9da7fc4
--- /dev/null
+++ b/src/components/foundations/payment-icons/bitcoin-icon.tsx
@@ -0,0 +1,22 @@
+import type { SVGProps } from "react";
+
+const BitcoinIcon = (props: SVGProps<SVGSVGElement>) => {
+    return (
+        <svg width="34" height="24" viewBox="0 0 34 24" fill="none" {...props}>
+            <path
+                d="M4 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 20V4C0.5 2.067 2.067 0.5 4 0.5Z"
+                fill="white"
+            />
+            <path
+                d="M4 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 20V4C0.5 2.067 2.067 0.5 4 0.5Z"
+                className="stroke-border-secondary"
+            />
+            <path
+                d="M16.9346 4C21.3168 4 24.8699 7.55239 24.8701 11.9346C24.8701 16.3169 21.3169 19.8701 16.9346 19.8701C12.5524 19.8699 9 16.3168 9 11.9346C9.00023 7.55253 12.5525 4.00023 16.9346 4ZM16.3945 8.37891L14.6318 7.94434L14.3984 8.87402C14.4097 8.8766 15.038 9.02001 15.0342 9.03125C15.388 9.11962 15.4524 9.35309 15.4414 9.53809L14.46 13.458C14.4165 13.5646 14.3064 13.7247 14.0596 13.6641C14.0516 13.6715 13.443 13.5119 13.4238 13.5068L12.9893 14.5039L14.75 14.9463L14.3887 16.3936L15.2617 16.6104L15.6201 15.1787C15.8586 15.2427 16.0908 15.3033 16.3174 15.3594L15.96 16.7842L16.834 17.001L17.1963 15.5566C18.6874 15.8374 19.8085 15.724 20.2803 14.3809C20.5286 13.4475 20.2608 12.6754 19.4766 12.2686C20.0482 12.1376 20.4786 11.7633 20.5938 10.9902C20.7521 9.93415 19.9453 9.36634 18.8418 8.9873L19.1992 7.55566L18.3252 7.33887L17.9766 8.73242C17.7472 8.67543 17.5112 8.62139 17.2764 8.56836L17.627 7.16602L16.7529 6.94824L16.3945 8.37891ZM16.3857 12.2129C16.9789 12.3602 18.8782 12.6529 18.5967 13.7803C18.3259 14.8611 16.4982 14.2768 15.9053 14.1299L16.3857 12.2129ZM17.041 9.59668C17.535 9.71973 19.1231 9.94924 18.8672 10.9746C18.6202 11.9569 17.0992 11.4581 16.6055 11.3359L17.041 9.59668Z"
+                fill="#F7931A"
+            />
+        </svg>
+    );
+};
+
+export default BitcoinIcon;
diff --git a/src/components/foundations/payment-icons/bitpay-icon.tsx b/src/components/foundations/payment-icons/bitpay-icon.tsx
new file mode 100644
index 0000000..ad6b9a3
--- /dev/null
+++ b/src/components/foundations/payment-icons/bitpay-icon.tsx
@@ -0,0 +1,22 @@
+import type { SVGProps } from "react";
+
+const BitpayIcon = (props: SVGProps<SVGSVGElement>) => {
+    return (
+        <svg width="34" height="24" viewBox="0 0 34 24" fill="none" {...props}>
+            <path
+                d="M4 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 20V4C0.5 2.067 2.067 0.5 4 0.5Z"
+                fill="white"
+            />
+            <path
+                d="M4 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 20V4C0.5 2.067 2.067 0.5 4 0.5Z"
+                className="stroke-border-secondary"
+            />
+            <path
+                d="M27.0605 11.0842L26.6543 12.8508C26.6174 12.9981 26.5942 13.136 26.585 13.2639C26.5758 13.3919 26.5918 13.5023 26.6318 13.595C26.6718 13.6877 26.7406 13.7597 26.8389 13.8108C26.9371 13.8621 27.0729 13.8879 27.2451 13.8879C27.3925 13.8879 27.5357 13.8737 27.6738 13.845C27.7473 13.8296 27.8211 13.8091 27.8955 13.7874L28.0029 13.3196H28.001L28.7783 9.91626H30.1143L29.9385 10.6868C29.9395 10.6872 29.9403 10.6882 29.9414 10.6887L29.0176 14.7346C28.9278 15.1394 28.8095 15.4895 28.6631 15.7854C28.5164 16.0811 28.3336 16.3275 28.1152 16.5237C27.8968 16.7199 27.6352 16.8666 27.3301 16.9631C27.0249 17.0596 26.6685 17.1077 26.2617 17.1077C26.044 17.1077 25.8468 17.0955 25.6689 17.0715L25.9316 15.9192C26.0662 15.9386 26.2155 15.9485 26.3789 15.9485C26.7616 15.9484 27.0506 15.8604 27.2451 15.6829C27.4395 15.5054 27.5603 15.2776 27.6201 14.9973L27.6211 14.9944C27.6126 14.9966 27.6034 14.9992 27.5947 15.0012C27.3797 15.0524 27.1249 15.0783 26.8301 15.0784C26.4059 15.0784 26.0763 15.0121 25.8428 14.8811C25.6092 14.75 25.443 14.5711 25.3447 14.344C25.2464 14.117 25.2034 13.856 25.2158 13.5618C25.2281 13.2674 25.271 12.9565 25.3447 12.6301L25.9629 9.91333H27.3271L27.0605 11.0842ZM18.041 9.91626C18.3786 9.9163 18.6699 9.96976 18.9141 10.0764C19.1582 10.1832 19.3588 10.3289 19.5156 10.5139C19.6724 10.6992 19.7878 10.9164 19.8633 11.1643C19.9386 11.4125 19.9766 11.6777 19.9766 11.9602C19.9765 12.4185 19.9044 12.8374 19.7598 13.217C19.6151 13.5969 19.4144 13.9253 19.1582 14.2014C18.9018 14.4778 18.594 14.6931 18.2354 14.8469C17.8764 15.0007 17.4856 15.0774 17.0635 15.0774C16.8584 15.0774 16.6532 15.0594 16.4482 15.0217L16.041 16.7258H14.7021L16.2559 9.91626C16.482 9.91612 17.6791 9.91626 18.041 9.91626ZM10.6289 15.0793H9.29297L10.4727 9.91333H11.8086L10.6289 15.0793ZM13.9629 9.91431H15.4941L15.2178 11.0852H13.6963L13.29 12.8518C13.2531 12.9991 13.2299 13.137 13.2207 13.2649C13.2116 13.3928 13.2266 13.5033 13.2666 13.5959C13.3065 13.6888 13.3762 13.7606 13.4746 13.8118C13.5728 13.863 13.7079 13.8889 13.8799 13.8889C14.0273 13.8889 14.1704 13.8747 14.3086 13.8459C14.3991 13.8271 14.4935 13.8049 14.5869 13.7717L14.3086 14.9827C14.2867 14.9882 14.2527 14.9969 14.2305 15.0022C14.0152 15.0533 13.7598 15.0793 13.4648 15.0793C13.0408 15.0793 12.712 15.0131 12.4785 14.8821C12.2449 14.751 12.0787 14.5721 11.9805 14.345C11.8821 14.1179 11.8392 13.8571 11.8516 13.5627C11.8638 13.2685 11.9067 12.9575 11.9805 12.6311L12.8848 8.65649L14.3135 8.42603L13.9629 9.91431ZM6.77148 10.092C6.89121 10.0359 7.00411 9.99544 7.12402 9.96411C7.24391 9.93291 7.37368 9.91724 7.51172 9.91724C7.79944 9.91729 8.04787 9.97038 8.25781 10.0764C8.46769 10.1826 8.64224 10.326 8.78027 10.5071C8.91806 10.6882 9.01991 10.9003 9.08594 11.1438C9.15186 11.3873 9.18457 11.6499 9.18457 11.9309C9.18455 12.3618 9.10805 12.7695 8.95508 13.1536C8.80211 13.5374 8.59388 13.8715 8.33008 14.1555C8.06604 14.4397 7.75446 14.665 7.39453 14.8303C7.03466 14.9958 6.64443 15.0784 6.22461 15.0784C6.17067 15.0784 6.07627 15.0765 5.94141 15.0735C5.80643 15.0702 5.65146 15.0564 5.47754 15.0315C5.30372 15.0065 5.11944 14.9691 4.9248 14.9192C4.72978 14.8693 4.54499 14.8006 4.37109 14.7131L5.92773 7.90259L7.32227 7.67798L6.77148 10.092ZM24.5098 12.8235C24.4258 13.179 24.4016 13.5362 24.4375 13.8948C24.4736 14.2536 24.6059 14.8032 24.7344 15.0784H23.4414C23.2835 14.8003 23.2906 14.6697 23.2607 14.5823C23.0929 14.7258 22.9067 14.8442 22.7031 14.9377C22.4995 15.0312 22.272 15.0783 22.0205 15.0784C21.7209 15.0784 21.4645 15.0233 21.252 14.9143C21.0392 14.8052 20.8652 14.6589 20.7305 14.4749C20.5957 14.291 20.4982 14.0757 20.4385 13.8293C20.3785 13.583 20.3486 13.319 20.3486 13.0383C20.3486 12.6081 20.4216 12.2028 20.5684 11.8225C20.7151 11.4421 20.9191 11.1093 21.1797 10.8254C21.4402 10.5417 22.0695 9.91634 23.1016 9.91626H25.1748L24.5098 12.8235ZM16.6924 13.8909C16.7949 13.916 16.9215 13.929 17.0723 13.929C17.3075 13.929 17.5217 13.8833 17.7148 13.7922C17.9077 13.7012 18.0723 13.5737 18.208 13.4104C18.3436 13.2472 18.4489 13.0507 18.5244 12.8215C18.5996 12.5925 18.6377 12.3399 18.6377 12.0637C18.6377 11.7939 18.5803 11.5645 18.4658 11.3762C18.3512 11.1878 18.1497 11.0874 17.8662 11.0862C17.668 11.0854 17.3389 11.0852 17.3389 11.0852L16.6924 13.8909ZM7.15625 11.0852C7.07224 11.0852 6.9854 11.0941 6.85059 11.1252C6.71561 11.1566 6.59914 11.2217 6.49121 11.3215L5.9043 13.8909C6.07742 13.9224 6.13763 13.926 6.17969 13.926H6.3418C6.55162 13.926 6.74964 13.873 6.93555 13.7668C7.12129 13.6608 7.28208 13.5188 7.41699 13.3411C7.55186 13.1631 7.65831 12.9613 7.73633 12.7366C7.81422 12.5118 7.85352 12.2771 7.85352 12.0334C7.85348 11.734 7.80576 11.4998 7.70996 11.3313C7.61393 11.1626 7.41404 11.0852 7.15625 11.0852ZM23.5615 11.0852C22.939 11.0852 22.8194 11.0853 22.5645 11.2229C22.3833 11.3207 22.2333 11.4684 22.1016 11.6399C21.9697 11.8115 21.8658 12.0092 21.791 12.2336C21.716 12.4583 21.6787 12.6925 21.6787 12.9358C21.6787 13.235 21.7263 13.4722 21.8223 13.6467C21.9179 13.8214 22.095 13.9084 22.3525 13.9084C22.4902 13.9084 22.6147 13.8806 22.7256 13.8245C22.8364 13.7684 22.9553 13.6742 23.0811 13.5432C23.093 13.3875 23.1127 13.2235 23.1396 13.052C23.1665 12.8808 23.2005 12.7219 23.2305 12.5784L23.5615 11.0852ZM11.9473 9.31567H10.6113L10.8164 8.41821H12.1523L11.9473 9.31567Z"
+                fill="#002855"
+            />
+        </svg>
+    );
+};
+
+export default BitpayIcon;
diff --git a/src/components/foundations/payment-icons/braintree-icon.tsx b/src/components/foundations/payment-icons/braintree-icon.tsx
new file mode 100644
index 0000000..4223d3b
--- /dev/null
+++ b/src/components/foundations/payment-icons/braintree-icon.tsx
@@ -0,0 +1,107 @@
+import type { SVGProps } from "react";
+
+const BraintreeIcon = (props: SVGProps<SVGSVGElement>) => {
+    return (
+        <svg width="34" height="24" viewBox="0 0 34 24" fill="none" {...props}>
+            <path
+                d="M4 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 20V4C0.5 2.067 2.067 0.5 4 0.5Z"
+                fill="white"
+            />
+            <path
+                d="M4 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 20V4C0.5 2.067 2.067 0.5 4 0.5Z"
+                className="stroke-border-secondary"
+            />
+            <path
+                d="M16.7386 14.613L16.615 14.8411H16.4629L17.0048 13.8335H17.1378L17.3565 14.8411H17.2139L17.1664 14.613H16.7386ZM17.0428 14.0236L16.7956 14.4989H17.1473L17.0428 14.0236Z"
+                fill="black"
+            />
+            <path
+                d="M25.9981 14.7556C26.0551 14.7556 26.0932 14.7461 26.1312 14.7271C26.1692 14.708 26.1882 14.6795 26.2072 14.651C26.2263 14.6225 26.2358 14.5845 26.2358 14.5559C26.2358 14.5274 26.2263 14.4989 26.2072 14.4799C26.1882 14.4609 26.1597 14.4419 26.1217 14.4229L25.9981 14.3658C25.922 14.3373 25.8745 14.2993 25.846 14.2612C25.8175 14.2232 25.7985 14.1757 25.7985 14.1186C25.7985 14.0616 25.8175 14.0046 25.846 13.957C25.8745 13.9095 25.922 13.881 25.9696 13.8525C26.0266 13.824 26.0837 13.8144 26.1597 13.8144C26.2167 13.8144 26.2738 13.824 26.3118 13.843C26.3593 13.862 26.3974 13.881 26.4259 13.9095L26.4069 14.0426C26.3308 13.9761 26.2453 13.938 26.1407 13.938C26.0837 13.938 26.0266 13.957 25.9886 13.9856C25.9506 14.0141 25.9316 14.0521 25.9316 14.0996C25.9316 14.1282 25.9411 14.1472 25.9601 14.1662C25.9791 14.1852 26.0171 14.2042 26.0646 14.2327L26.1882 14.2898C26.2548 14.3183 26.3023 14.3563 26.3308 14.3943C26.3593 14.4324 26.3688 14.4799 26.3688 14.5369C26.3688 14.594 26.3593 14.651 26.3308 14.708C26.3023 14.7556 26.2643 14.8031 26.2072 14.8316C26.1502 14.8601 26.0742 14.8792 25.9791 14.8792C25.8555 14.8792 25.7509 14.8506 25.6844 14.7841L25.7034 14.6415C25.789 14.7176 25.884 14.7556 25.9981 14.7556Z"
+                fill="black"
+            />
+            <path
+                d="M27.091 14.1947C27.1386 14.2517 27.1671 14.3183 27.1671 14.4038C27.1671 14.4324 27.1671 14.4514 27.1671 14.4704C27.1671 14.4894 27.1576 14.5084 27.1481 14.5369H26.5967C26.5967 14.613 26.6157 14.67 26.6537 14.708C26.6918 14.7461 26.7488 14.7651 26.8249 14.7651C26.8724 14.7651 26.9199 14.7556 26.958 14.7461C26.996 14.7366 27.034 14.7176 27.072 14.689L27.053 14.8031C26.977 14.8506 26.8914 14.8792 26.7868 14.8792C26.7203 14.8792 26.6633 14.8601 26.6157 14.8316C26.5682 14.8031 26.5302 14.7651 26.5016 14.708C26.4731 14.6605 26.4636 14.6035 26.4636 14.5369C26.4636 14.4704 26.4826 14.4133 26.5112 14.3468C26.5397 14.2803 26.5872 14.2232 26.6537 14.1757C26.7203 14.1282 26.7963 14.1091 26.8914 14.1091C26.9675 14.1186 27.034 14.1377 27.091 14.1947ZM26.7013 14.2898C26.6537 14.3278 26.6252 14.3753 26.6062 14.4324H27.034C27.034 14.4229 27.034 14.4133 27.034 14.4038C27.034 14.3468 27.015 14.3088 26.9865 14.2708C26.958 14.2422 26.9199 14.2232 26.8629 14.2232C26.8058 14.2232 26.7488 14.2422 26.7013 14.2898Z"
+                fill="black"
+            />
+            <path
+                d="M27.6142 14.2517C27.5572 14.2517 27.5096 14.2707 27.4716 14.3183C27.4336 14.3563 27.4051 14.4228 27.3956 14.4989L27.3385 14.8601H27.1959L27.31 14.1472H27.4336L27.4146 14.2707C27.4716 14.1852 27.5477 14.1472 27.6237 14.1472C27.6427 14.1472 27.6617 14.1472 27.6807 14.1472L27.6617 14.2612C27.6522 14.2517 27.6332 14.2517 27.6142 14.2517Z"
+                fill="black"
+            />
+            <path d="M28.004 14.8507H27.8804L27.7093 14.1377H27.8424L27.966 14.6986L28.2607 14.1377H28.3938L28.004 14.8507Z" fill="black" />
+            <path
+                d="M28.4787 14.8507H28.3456L28.4597 14.1377H28.5928L28.4787 14.8507ZM28.4882 14.0046C28.4787 13.9951 28.4692 13.9761 28.4692 13.9571C28.4692 13.9285 28.4787 13.9095 28.4977 13.8905C28.5168 13.8715 28.5358 13.862 28.5643 13.862C28.5833 13.862 28.6023 13.8715 28.6118 13.881C28.6213 13.8905 28.6308 13.9095 28.6308 13.9285C28.6308 13.9571 28.6213 13.9761 28.6023 13.9951C28.5833 14.0141 28.5643 14.0236 28.5358 14.0236C28.5263 14.0236 28.5073 14.0141 28.4882 14.0046Z"
+                fill="black"
+            />
+            <path
+                d="M28.7834 14.8316C28.7359 14.8031 28.6978 14.7651 28.6693 14.7081C28.6408 14.6605 28.6313 14.6035 28.6313 14.5369C28.6313 14.4609 28.6503 14.3848 28.6788 14.3183C28.7168 14.2517 28.7644 14.1947 28.8309 14.1567C28.8975 14.1187 28.9735 14.0996 29.0591 14.0996C29.1446 14.0996 29.2112 14.1187 29.2682 14.1662L29.2492 14.2993C29.2017 14.2422 29.1351 14.2232 29.0496 14.2232C28.9925 14.2232 28.945 14.2422 28.8975 14.2708C28.8499 14.2993 28.8214 14.3373 28.7929 14.3848C28.7644 14.4324 28.7549 14.4799 28.7549 14.5369C28.7549 14.6035 28.7739 14.651 28.8119 14.6985C28.8499 14.7366 28.8975 14.7556 28.964 14.7556C29.002 14.7556 29.0401 14.7461 29.0876 14.7366C29.1256 14.7176 29.1636 14.6985 29.1922 14.67L29.1731 14.8031C29.1351 14.8316 29.0971 14.8506 29.0591 14.8602C29.021 14.8697 28.983 14.8792 28.9355 14.8792C28.888 14.8792 28.8309 14.8602 28.7834 14.8316Z"
+                fill="black"
+            />
+            <path
+                d="M29.9236 14.1947C29.9712 14.2518 29.9997 14.3183 29.9997 14.4039C29.9997 14.4324 29.9997 14.4514 29.9997 14.4704C29.9997 14.4894 29.9902 14.5084 29.9807 14.537H29.4293C29.4293 14.613 29.4483 14.67 29.4863 14.7081C29.5244 14.7461 29.5814 14.7651 29.6574 14.7651C29.705 14.7651 29.7525 14.7556 29.7905 14.7461C29.8286 14.7366 29.8666 14.7176 29.9046 14.6891L29.8856 14.8031C29.8095 14.8507 29.724 14.8792 29.6194 14.8792C29.5529 14.8792 29.4958 14.8602 29.4483 14.8316C29.4008 14.8031 29.3627 14.7651 29.3342 14.7081C29.3057 14.6605 29.2962 14.6035 29.2962 14.537C29.2962 14.4704 29.3152 14.4134 29.3437 14.3468C29.3723 14.2803 29.4198 14.2232 29.4863 14.1757C29.5529 14.1282 29.6289 14.1092 29.724 14.1092C29.8095 14.1187 29.8761 14.1377 29.9236 14.1947ZM29.5339 14.2898C29.4863 14.3278 29.4578 14.3753 29.4388 14.4324H29.8666C29.8666 14.4229 29.8666 14.4134 29.8666 14.4039C29.8666 14.3468 29.8476 14.3088 29.8191 14.2708C29.7905 14.2423 29.7525 14.2232 29.6955 14.2232C29.6384 14.2232 29.5814 14.2423 29.5339 14.2898Z"
+                fill="black"
+            />
+            <path
+                d="M22.8322 13.3106H22.2808C22.2428 13.3106 22.2143 13.3391 22.2048 13.3772L21.9766 14.8031C21.9766 14.8316 21.9956 14.8601 22.0241 14.8601H22.3093C22.3378 14.8601 22.3569 14.8411 22.3664 14.8126L22.4329 14.4133C22.4424 14.3753 22.4709 14.3468 22.509 14.3468H22.6801C23.0413 14.3468 23.26 14.1662 23.3075 13.824C23.336 13.6719 23.3075 13.5483 23.2409 13.4627C23.1649 13.3581 23.0223 13.3106 22.8322 13.3106ZM22.8987 13.8335C22.8702 14.0331 22.7181 14.0331 22.566 14.0331H22.4804L22.5375 13.6623C22.5375 13.6433 22.5565 13.6243 22.585 13.6243H22.623C22.7276 13.6243 22.8132 13.6243 22.8702 13.6814C22.8987 13.7099 22.9082 13.7574 22.8987 13.8335Z"
+                fill="black"
+            />
+            <path
+                d="M18.8775 13.3106H18.3261C18.2881 13.3106 18.2596 13.3391 18.2501 13.3772L18.0219 14.8031C18.0219 14.8316 18.041 14.8601 18.0695 14.8601H18.3357C18.3737 14.8601 18.4022 14.8316 18.4117 14.7936L18.4687 14.4133C18.4782 14.3753 18.5068 14.3468 18.5448 14.3468H18.7159C19.0771 14.3468 19.2958 14.1662 19.3433 13.824C19.3718 13.6719 19.3433 13.5483 19.2768 13.4627C19.2007 13.3581 19.0676 13.3106 18.8775 13.3106ZM18.9441 13.8335C18.9155 14.0331 18.7634 14.0331 18.6113 14.0331H18.5258L18.5828 13.6623C18.5828 13.6433 18.6018 13.6243 18.6303 13.6243H18.6684C18.7729 13.6243 18.8585 13.6243 18.9155 13.6814C18.9441 13.7099 18.9536 13.7574 18.9441 13.8335Z"
+                fill="black"
+            />
+            <path
+                d="M20.5414 13.824H20.2753C20.2563 13.824 20.2372 13.843 20.2277 13.862L20.2182 13.938L20.1992 13.9095C20.1422 13.824 20.0091 13.7955 19.8855 13.7955C19.5908 13.7955 19.3436 14.0141 19.2961 14.3278C19.2676 14.4799 19.3056 14.632 19.3912 14.7366C19.4767 14.8316 19.5908 14.8697 19.7239 14.8697C19.9616 14.8697 20.0946 14.7176 20.0946 14.7176L20.0851 14.7936C20.0851 14.8221 20.1042 14.8507 20.1327 14.8507H20.3703C20.4084 14.8507 20.4369 14.8221 20.4464 14.7841L20.589 13.8715C20.589 13.8525 20.57 13.824 20.5414 13.824ZM20.1707 14.3468C20.1422 14.4989 20.0281 14.6035 19.8665 14.6035C19.7904 14.6035 19.7239 14.575 19.6859 14.5274C19.6478 14.4799 19.6288 14.4134 19.6478 14.3373C19.6764 14.1852 19.7904 14.0806 19.9425 14.0806C20.0186 14.0806 20.0756 14.1092 20.1232 14.1567C20.1612 14.2042 20.1802 14.2708 20.1707 14.3468Z"
+                fill="black"
+            />
+            <path
+                d="M24.496 13.824H24.2299C24.2108 13.824 24.1918 13.843 24.1823 13.862L24.1728 13.938L24.1538 13.9095C24.0968 13.824 23.9637 13.7955 23.8401 13.7955C23.5454 13.7955 23.2982 14.0141 23.2507 14.3278C23.2222 14.4799 23.2602 14.632 23.3458 14.7366C23.4313 14.8316 23.5454 14.8697 23.6785 14.8697C23.9161 14.8697 24.0492 14.7176 24.0492 14.7176L24.0397 14.7936C24.0397 14.8221 24.0587 14.8507 24.0873 14.8507H24.3249C24.3629 14.8507 24.3915 14.8221 24.401 14.7841L24.5436 13.8715C24.5436 13.8525 24.5246 13.824 24.496 13.824ZM24.1253 14.3468C24.0968 14.4989 23.9827 14.6035 23.8211 14.6035C23.745 14.6035 23.6785 14.575 23.6405 14.5274C23.6024 14.4799 23.5834 14.4134 23.6024 14.3373C23.631 14.1852 23.745 14.0806 23.8971 14.0806C23.9732 14.0806 24.0302 14.1092 24.0778 14.1567C24.1253 14.2042 24.1348 14.2708 24.1253 14.3468Z"
+                fill="black"
+            />
+            <path
+                d="M21.9481 13.824H21.6819C21.6534 13.824 21.6344 13.8335 21.6154 13.862L21.2446 14.4038L21.0925 13.881C21.083 13.8525 21.0545 13.824 21.0165 13.824H20.7503C20.7218 13.824 20.6932 13.8525 20.7027 13.881L20.9974 14.7461L20.7218 15.1358C20.7027 15.1644 20.7218 15.2119 20.7598 15.2119H21.026C21.0545 15.2119 21.0735 15.2024 21.0925 15.1834L21.9766 13.9C22.0146 13.8715 21.9861 13.824 21.9481 13.824Z"
+                fill="black"
+            />
+            <path
+                d="M24.8095 13.3486L24.5814 14.8031C24.5814 14.8316 24.6004 14.8601 24.6289 14.8601H24.857C24.8951 14.8601 24.9236 14.8316 24.9331 14.7936L25.1612 13.3676C25.1612 13.3391 25.1422 13.3106 25.1137 13.3106H24.857C24.8285 13.3106 24.8095 13.3296 24.8095 13.3486Z"
+                fill="black"
+            />
+            <path
+                d="M4 12.5976V12.1413H4.35174V9.97386H4V9.51755H5.42596C6.0819 9.51755 6.48117 9.82176 6.48117 10.3446C6.48117 10.6868 6.28154 10.9055 6.02486 11.0006C6.39561 11.1051 6.65229 11.3618 6.65229 11.723C6.65229 12.2839 6.21499 12.5976 5.50201 12.5976H4ZM4.84607 9.97386V10.8104H5.37843C5.7777 10.8104 5.98684 10.6583 5.98684 10.3921C5.98684 10.1165 5.7777 9.97386 5.37843 9.97386H4.84607ZM4.84607 12.1508H5.45448C5.92029 12.1508 6.15795 11.9987 6.15795 11.6945C6.15795 11.3998 5.91079 11.2382 5.41645 11.2382H4.84607V12.1508Z"
+                fill="black"
+            />
+            <path
+                d="M9.22852 11.0006C9.17148 10.8199 9.03839 10.7154 8.86728 10.7154C8.4585 10.7154 8.06874 11.0196 8.06874 11.5709V12.1603H8.85777V12.6166H7.10859V12.1603H7.61243V10.7914H7.22267V10.3351H8.07824V10.7154C8.22084 10.4492 8.51554 10.2591 8.9053 10.2591C9.3426 10.2591 9.60878 10.5062 9.69433 10.8675L9.22852 11.0006Z"
+                fill="black"
+            />
+            <path
+                d="M11.6241 11.2857V11.1622C11.6241 10.8389 11.3675 10.7059 11.0918 10.7059C10.8351 10.7059 10.6069 10.8104 10.4263 10.9815L10.1221 10.6488C10.3313 10.4492 10.6355 10.2686 11.0918 10.2686C11.6622 10.2686 12.0995 10.5728 12.0995 11.1431V12.1508H12.4322V12.6071H11.6241V12.3695C11.5005 12.5691 11.1678 12.6832 10.8446 12.6832C10.3788 12.6832 9.97002 12.4455 9.97002 11.9702C9.97002 11.4093 10.5214 11.2002 11.0157 11.2002C11.2724 11.1907 11.472 11.2382 11.6241 11.2857ZM11.6241 11.685C11.472 11.628 11.2534 11.5899 11.0442 11.5899C10.7495 11.5899 10.4548 11.685 10.4548 11.9607C10.4548 12.1603 10.6355 12.2554 10.8826 12.2554C11.2249 12.2554 11.6146 12.0653 11.6146 11.7516V11.685H11.6241Z"
+                fill="black"
+            />
+            <path
+                d="M15.2746 12.1508V12.6071H12.9931V12.1508H13.9437V10.7914H13.2212V10.3351H14.4095V12.1508H15.2746ZM14.4 9.8883H13.8771V9.19434H14.4V9.8883Z"
+                fill="black"
+            />
+            <path
+                d="M16.1774 12.1508V10.7914H15.8542V10.3351H16.6432V10.6298C16.7858 10.4112 17.071 10.2591 17.4228 10.2591C17.9266 10.2591 18.2878 10.5823 18.2878 11.0956V12.1508H18.6301V12.6071H17.4513V12.1508H17.8125V11.2287C17.8125 10.839 17.5749 10.7249 17.3562 10.7249C17.0045 10.7249 16.6432 10.9911 16.6432 11.3998V12.1508H17.0045V12.6071H15.8257V12.1508H16.1774Z"
+                fill="black"
+            />
+            <path
+                d="M19.381 10.7914H18.7916V10.3351H19.381V9.51758H19.8468V10.3351H20.9496V10.7914H19.8468V11.7421C19.8468 12.0938 20.094 12.2364 20.3697 12.2364C20.6359 12.2364 20.8545 12.0843 21.0256 11.9227L21.3393 12.2459C21.1302 12.4646 20.8165 12.6737 20.3697 12.6737C19.7993 12.6737 19.3715 12.36 19.3715 11.7516V10.7914H19.381Z"
+                fill="black"
+            />
+            <path
+                d="M23.8965 11.0006C23.8395 10.8199 23.7064 10.7154 23.5353 10.7154C23.1265 10.7154 22.7367 11.0196 22.7367 11.5709V12.1603H23.5258V12.6166H21.7671V12.1603H22.2709V10.7914H21.8812V10.3351H22.7367V10.7154C22.8793 10.4492 23.174 10.2591 23.5638 10.2591C24.0011 10.2591 24.2673 10.5062 24.3528 10.8675L23.8965 11.0006Z"
+                fill="black"
+            />
+            <path
+                d="M27.0437 12.2554C26.8061 12.5026 26.3973 12.6737 25.9315 12.6737C25.171 12.6737 24.6386 12.1603 24.6386 11.4664C24.6386 10.7724 25.152 10.2591 25.8744 10.2591C26.5874 10.2591 27.0913 10.8104 27.0913 11.5519V11.628H25.1424C25.2185 12.0082 25.5322 12.2364 25.941 12.2364C26.2832 12.2364 26.5779 12.0938 26.73 11.9227L27.0437 12.2554ZM25.1615 11.2382H26.5589C26.4924 10.915 26.2072 10.6964 25.8839 10.6964C25.5132 10.6964 25.2375 10.915 25.1615 11.2382Z"
+                fill="black"
+            />
+            <path
+                d="M29.9525 12.2554C29.7148 12.5026 29.306 12.6737 28.8402 12.6737C28.0797 12.6737 27.5473 12.1603 27.5473 11.4664C27.5473 10.7724 28.0607 10.2591 28.7832 10.2591C29.4962 10.2591 30 10.8104 30 11.5519V11.628H28.0512C28.1272 12.0082 28.4409 12.2364 28.8497 12.2364C29.192 12.2364 29.4867 12.0938 29.6388 11.9227L29.9525 12.2554ZM28.0702 11.2382H29.4676C29.4011 10.915 29.1159 10.6963 28.7927 10.6963C28.4219 10.6963 28.1463 10.915 28.0702 11.2382Z"
+                fill="black"
+            />
+        </svg>
+    );
+};
+
+export default BraintreeIcon;
diff --git a/src/components/foundations/payment-icons/cash-app-pay-icon.tsx b/src/components/foundations/payment-icons/cash-app-pay-icon.tsx
new file mode 100644
index 0000000..55faa0a
--- /dev/null
+++ b/src/components/foundations/payment-icons/cash-app-pay-icon.tsx
@@ -0,0 +1,21 @@
+import type { SVGProps } from "react";
+
+const CashAppPayIcon = (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="black" />
+            <path
+                fillRule="evenodd"
+                clipRule="evenodd"
+                d="M14.5726 4.00062C12.9685 4.00062 12.1658 4.00062 11.3083 4.26715C10.3622 4.61001 9.61617 5.35606 9.2733 6.30339C9 7.16948 9 7.97092 9 9.57565V14.4176C9 16.031 9 16.8256 9.26653 17.6898C9.6094 18.6365 10.3554 19.3826 11.3015 19.7254C12.167 20 12.9685 20 14.5726 20H19.4194C21.0254 20 21.8263 20 22.6898 19.7254C23.6365 19.3826 24.382 18.6365 24.7248 17.6898C24.9981 16.8237 24.9981 16.0223 24.9981 14.4176V9.58245C24.9981 7.97584 24.9981 7.17439 24.7248 6.31016C24.382 5.36344 23.636 4.6174 22.6898 4.27454C21.8182 4 21.0254 4 19.4115 4L14.5726 4.00062Z"
+                fill="#00D633"
+            />
+            <path
+                d="M17.6474 11.2229C19.3331 11.5841 20.1037 12.2825 20.1037 13.4625C20.1037 14.9417 18.8992 16.0337 17.0188 16.1493L16.8353 17.0242C16.8174 17.1098 16.742 17.171 16.6546 17.171H15.208C15.0888 17.171 15.0008 17.0597 15.0283 16.9437L15.2605 15.9652C14.3284 15.7 13.5784 15.1841 13.1412 14.5474C13.0862 14.4672 13.1044 14.3577 13.1812 14.298L14.1923 13.5116C14.2756 13.4467 14.3951 13.4657 14.4567 13.5515C14.9924 14.2972 15.8144 14.7388 16.8046 14.7388C17.6956 14.7388 18.3698 14.3053 18.3698 13.6792C18.3698 13.1976 18.0327 12.9809 16.9009 12.74C14.9503 12.3307 14.1797 11.6082 14.1797 10.4282C14.1797 9.05912 15.3303 8.02489 17.0659 7.89057L17.2554 6.98686C17.2733 6.90133 17.3488 6.84009 17.4361 6.84009H18.8633C18.9811 6.84009 19.0687 6.94879 19.0438 7.06385L18.8244 8.07643C19.5713 8.30632 20.1794 8.71738 20.558 9.22462C20.6166 9.30327 20.6015 9.41457 20.5257 9.47677L19.6032 10.2332C19.523 10.299 19.406 10.2846 19.3408 10.204C18.872 9.62412 18.1339 9.29637 17.3343 9.29637C16.4433 9.29637 15.8895 9.68167 15.8895 10.2356C15.8895 10.6931 16.3229 10.9339 17.6474 11.2229Z"
+                fill="white"
+            />
+        </svg>
+    );
+};
+
+export default CashAppPayIcon;
diff --git a/src/components/foundations/payment-icons/citadele-icon.tsx b/src/components/foundations/payment-icons/citadele-icon.tsx
new file mode 100644
index 0000000..caf4940
--- /dev/null
+++ b/src/components/foundations/payment-icons/citadele-icon.tsx
@@ -0,0 +1,22 @@
+import type { SVGProps } from "react";
+
+const CitadeleIcon = (props: SVGProps<SVGSVGElement>) => {
+    return (
+        <svg width="34" height="24" viewBox="0 0 34 24" fill="none" {...props}>
+            <path
+                d="M4 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 20V4C0.5 2.067 2.067 0.5 4 0.5Z"
+                fill="white"
+            />
+            <path
+                d="M4 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 20V4C0.5 2.067 2.067 0.5 4 0.5Z"
+                className="stroke-border-secondary"
+            />
+            <path
+                d="M4.37903 10.8079C4.14422 10.8079 4.12106 10.7317 4.12106 10.1759V10.0811C4.12106 9.52343 4.14422 9.44794 4.37903 9.44794H9.74844C9.98406 9.44794 10.0072 9.52343 10.0072 10.0803V10.1752C10.0072 10.7317 9.98366 10.8075 9.74844 10.8075H4.37903V10.8079ZM4.37903 8.36073C4.14422 8.36073 4.12106 8.28486 4.12106 7.72835V7.63351C4.12106 7.07511 4.14422 7 4.37903 7H9.74844C9.98406 7 10.0072 7.07587 10.0072 7.63351V7.72835C10.0072 8.28486 9.98366 8.36073 9.74844 8.36073H4.37903ZM5.18341 15.6283C5.18341 14.7072 5.664 14.2008 6.38712 14.2008C6.66012 14.2008 6.87869 14.2752 7.15209 14.4022C7.25122 14.4493 7.33328 14.4303 7.46328 14.1424L7.55794 13.9467C7.65137 13.7107 7.65828 13.6132 7.54494 13.5609C7.20978 13.3776 6.691 13.2619 6.24291 13.2619C4.96606 13.2619 4 14.2065 4 15.6283C4 17.0497 4.96606 17.9943 6.2425 17.9943C6.691 17.9943 7.22156 17.879 7.55794 17.6946C7.67006 17.6434 7.66275 17.5448 7.57013 17.3088L7.47669 17.1021C7.34669 16.8138 7.26422 16.7975 7.16428 16.8422C6.89087 16.9701 6.66053 17.0444 6.38712 17.0444C5.664 17.0444 5.18463 16.549 5.18463 15.6283H5.18381H5.18341ZM20.3975 17.7766C20.3975 17.9017 20.3471 17.9359 19.9681 17.9359H19.9303C19.5309 17.9359 19.4753 17.9188 19.444 17.8274C19.4231 17.7653 19.4064 17.7021 19.394 17.6381C19.1828 17.8741 18.9281 18 18.5401 18C17.5992 18 17.0337 17.3551 17.0337 16.318C17.0337 15.197 17.663 14.5331 18.5962 14.5331C18.859 14.5331 19.1011 14.609 19.288 14.7471V13.2904C19.288 13.1929 19.3002 13.1523 19.8243 13.1523H19.862C20.3471 13.1523 20.3971 13.1929 20.3971 13.2904V17.7766H20.3975ZM19.2884 15.565C19.2243 15.4996 19.1464 15.4474 19.0595 15.4117C18.9726 15.3761 18.8787 15.3577 18.7838 15.3578C18.3662 15.3578 18.168 15.6966 18.168 16.3187C18.168 16.6753 18.2488 16.9018 18.3662 17.0205C18.4718 17.143 18.6343 17.1825 18.7908 17.1825C18.9837 17.1825 19.1328 17.1381 19.2019 17.0558C19.2632 16.9928 19.288 16.8953 19.288 16.6708V15.5646L19.2888 15.565H19.2884ZM26.0508 17.7993C26.0508 17.8961 26.0009 17.9359 25.5146 17.9359H25.4772C24.954 17.9359 24.943 17.8961 24.943 17.7993V13.2904C24.943 13.1929 24.954 13.1523 25.4768 13.1523H25.5142C26.0001 13.1523 26.0504 13.1929 26.0504 13.2904V17.7993H26.0508ZM22.1492 16.6006C22.211 17.0091 22.4848 17.2056 22.915 17.2056C23.2461 17.2056 23.5561 17.1374 23.9184 16.9928C23.994 16.9644 24.0618 16.9928 24.1419 17.2216L24.1987 17.3498C24.2788 17.5857 24.2719 17.6381 24.1858 17.6832C23.7551 17.9074 23.307 17.9992 22.8086 17.9992C21.7068 17.9992 21.0158 17.3733 21.0158 16.3017C21.0158 15.2596 21.6507 14.5331 22.7407 14.5331C23.8189 14.5331 24.3722 15.2478 24.3722 16.2379C24.3722 16.5664 24.3417 16.6006 24.217 16.6006H22.1492ZM23.2632 15.9621C23.2461 15.6177 23.0966 15.3172 22.7289 15.3172C22.41 15.3172 22.1793 15.5411 22.1358 15.9621H23.2632ZM27.7766 16.6006C27.8375 17.0091 28.1122 17.2056 28.5428 17.2056C28.871 17.2056 29.1838 17.1374 29.545 16.9928C29.6189 16.9644 29.6888 16.9928 29.7692 17.2216L29.8257 17.3498C29.9058 17.5857 29.8993 17.6381 29.8135 17.6832C29.3829 17.9074 28.934 17.9992 28.4351 17.9992C27.333 17.9992 26.6427 17.3733 26.6427 16.3017C26.6427 15.2596 27.2765 14.5331 28.3669 14.5331C29.4459 14.5331 30 15.2478 30 16.2379C30 16.5664 29.9687 16.6006 29.844 16.6006H27.7762H27.7766ZM28.8918 15.9621C28.8714 15.6177 28.7232 15.3172 28.3555 15.3172C28.0378 15.3172 27.8063 15.5411 27.7632 15.9621H28.8918ZM15.2608 15.5877C15.2047 15.5185 15.1323 15.4624 15.0491 15.4236C14.966 15.3848 14.8744 15.3643 14.7815 15.3639C14.3638 15.3639 14.1652 15.7034 14.1652 16.3073C14.1652 16.8195 14.3131 17.2 14.7681 17.2C14.9371 17.2 15.0606 17.1597 15.1487 17.0782C15.2292 16.9985 15.2608 16.8885 15.2608 16.648V15.5877ZM16.3821 17.7766C16.3821 17.9017 16.3329 17.9359 15.9531 17.9359H15.9019C15.5038 17.9359 15.4477 17.9188 15.4168 17.8274C15.3955 17.7655 15.3788 17.7022 15.3669 17.6381C15.1556 17.8741 14.8997 18 14.5129 18C13.6098 18 13.0301 17.3657 13.0301 16.3309C13.0301 15.1795 13.7467 14.5331 14.5942 14.5331C14.9371 14.5331 15.2352 14.6667 15.3977 14.8563L15.4168 14.7122C15.4221 14.6439 15.442 14.5984 15.8515 14.5984H15.8958C16.3199 14.5984 16.3813 14.6261 16.3813 14.7311V17.7766H16.3821ZM11.1825 13.6253C11.5993 13.6253 11.6245 13.6303 11.6245 13.757V14.5976H12.3415C12.4407 14.5976 12.4715 14.6147 12.4715 14.9311V14.9777C12.4715 15.2933 12.4407 15.3116 12.3415 15.3116H11.6245V16.8202C11.6245 17.0729 11.6737 17.2056 11.9227 17.2056C12.0527 17.2056 12.1664 17.1825 12.2786 17.1487C12.3964 17.1066 12.4411 17.1597 12.5215 17.4238L12.5402 17.4871C12.6271 17.7766 12.6015 17.7993 12.4906 17.8502C12.2664 17.948 11.9666 18 11.6867 18C10.8023 18 10.5532 17.5857 10.5532 16.865V15.3116H10.1356C10.03 15.3116 10.0036 15.2926 10.0036 14.9777V14.9311C10.0036 14.6147 10.0296 14.5984 10.1356 14.5984H10.6028C10.6536 14.3279 10.7397 13.947 10.7962 13.757C10.8274 13.6473 10.8461 13.6253 11.1825 13.6253ZM8.86525 14.5984C9.35153 14.5984 9.39459 14.6374 9.39459 14.7361V17.7993C9.39459 17.9017 9.35153 17.9359 8.86525 17.9359H8.83356C8.29853 17.9359 8.28634 17.9017 8.28634 17.7993V14.7361C8.28634 14.6374 8.29853 14.5984 8.83356 14.5984H8.86525ZM8.83356 13.1011C9.18456 13.1011 9.43888 13.3541 9.43888 13.6417C9.43731 13.7137 9.42041 13.7848 9.38917 13.8507C9.35792 13.9166 9.31295 13.976 9.25688 14.0256C9.14313 14.1261 8.99078 14.1807 8.83356 14.1773C8.48663 14.1773 8.22947 13.9243 8.22947 13.6417C8.22947 13.3533 8.48663 13.1011 8.83356 13.1011Z"
+                fill="#EE293D"
+            />
+        </svg>
+    );
+};
+
+export default CitadeleIcon;
diff --git a/src/components/foundations/payment-icons/coinbase-icon.tsx b/src/components/foundations/payment-icons/coinbase-icon.tsx
new file mode 100644
index 0000000..0851223
--- /dev/null
+++ b/src/components/foundations/payment-icons/coinbase-icon.tsx
@@ -0,0 +1,22 @@
+import type { SVGProps } from "react";
+
+const CoinbaseIcon = (props: SVGProps<SVGSVGElement>) => {
+    return (
+        <svg width="34" height="24" viewBox="0 0 34 24" fill="none" {...props}>
+            <path
+                d="M4 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 20V4C0.5 2.067 2.067 0.5 4 0.5Z"
+                fill="white"
+            />
+            <path
+                d="M4 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 20V4C0.5 2.067 2.067 0.5 4 0.5Z"
+                className="stroke-border-secondary"
+            />
+            <path
+                d="M9.24749 10.7326C8.30297 10.7326 7.56496 11.4496 7.56496 12.4094C7.56496 13.3693 8.28432 14.0802 9.24749 14.0802C10.2106 14.0802 10.9425 13.357 10.9425 12.4033C10.9425 11.4557 10.2232 10.7326 9.24749 10.7326ZM9.25386 13.3884C8.71599 13.3884 8.32185 12.9707 8.32185 12.4097C8.32185 11.8423 8.70961 11.4248 9.24749 11.4248C9.79173 11.4248 10.1856 11.8487 10.1856 12.4097C10.1856 12.9707 9.79173 13.3884 9.25386 13.3884ZM11.1488 11.4621H11.618V14.0181H12.3685V10.7949H11.1488V11.4621ZM5.67616 11.4245C6.0703 11.4245 6.38301 11.6676 6.50172 12.0292H7.29614C7.15217 11.2563 6.51423 10.7326 5.68253 10.7326C4.73801 10.7326 4 11.4496 4 12.4097C4 13.3698 4.71936 14.0804 5.68253 14.0804C6.49559 14.0804 7.14604 13.5567 7.29 12.7774H6.50172C6.38915 13.1389 6.07643 13.3884 5.68229 13.3884C5.13805 13.3884 4.75665 12.9707 4.75665 12.4097C4.75689 11.8423 5.13215 11.4245 5.67616 11.4245ZM25.4091 12.0979L24.8587 12.0169C24.596 11.9796 24.4084 11.8923 24.4084 11.6865C24.4084 11.4621 24.6524 11.35 24.9838 11.35C25.3466 11.35 25.5781 11.5057 25.6281 11.7613H26.3536C26.2722 11.113 25.7718 10.7328 25.0027 10.7328C24.2083 10.7328 23.6829 11.138 23.6829 11.7115C23.6829 12.26 24.027 12.5782 24.7211 12.6778L25.2715 12.7587C25.5406 12.796 25.6907 12.9022 25.6907 13.1016C25.6907 13.3572 25.428 13.4632 25.0652 13.4632C24.6211 13.4632 24.3709 13.2824 24.3334 13.0082H23.5953C23.6643 13.6379 24.1582 14.0804 25.0589 14.0804C25.8783 14.0804 26.4223 13.7063 26.4223 13.0641C26.4223 12.4906 26.0284 12.1914 25.4091 12.0979ZM11.9932 9.46707C11.7181 9.46707 11.5115 9.6665 11.5115 9.94074C11.5115 10.215 11.7178 10.4144 11.9932 10.4144C12.2684 10.4144 12.4749 10.215 12.4749 9.94074C12.4749 9.6665 12.2684 9.46707 11.9932 9.46707ZM23.0074 11.8985C23.0074 11.2003 22.5821 10.7328 21.6815 10.7328C20.8309 10.7328 20.3556 11.163 20.2617 11.8239H21.0061C21.0436 11.5683 21.2437 11.3563 21.669 11.3563C22.0507 11.3563 22.2383 11.5246 22.2383 11.7304C22.2383 11.9985 21.8942 12.067 21.4689 12.1106C20.8935 12.1729 20.1805 12.3724 20.1805 13.1205C20.1805 13.7004 20.6122 14.0743 21.3001 14.0743C21.838 14.0743 22.1757 13.8498 22.3447 13.4944C22.3697 13.8123 22.6074 14.0181 22.939 14.0181H23.3768V13.3511H23.0077L23.0074 11.8985ZM22.2694 12.7089C22.2694 13.1392 21.8942 13.4571 21.4375 13.4571C21.1559 13.4571 20.9183 13.3386 20.9183 13.0894C20.9183 12.7715 21.2999 12.6841 21.6501 12.6469C21.9879 12.6157 22.1755 12.5409 22.2694 12.3974V12.7089ZM18.2853 10.7326C17.8662 10.7326 17.5159 10.9072 17.2657 11.2001V9.43591H16.5152V14.0181H17.2532V13.5942C17.5034 13.8996 17.86 14.0804 18.2853 14.0804C19.1859 14.0804 19.8678 13.3698 19.8678 12.4097C19.8678 11.4496 19.1734 10.7326 18.2853 10.7326ZM18.1727 13.3884C17.6349 13.3884 17.2407 12.9707 17.2407 12.4097C17.2407 11.8487 17.641 11.4248 18.1789 11.4248C18.7231 11.4248 19.1045 11.8425 19.1045 12.4097C19.1045 12.9707 18.7106 13.3884 18.1727 13.3884ZM14.7201 10.7326C14.2323 10.7326 13.9132 10.932 13.7256 11.2126V10.7949H12.9812V14.0178H13.7317V12.2662C13.7317 11.7736 14.0444 11.4245 14.5072 11.4245C14.9389 11.4245 15.2077 11.7299 15.2077 12.1727V14.0181H15.9582V12.1168C15.9585 11.3061 15.5396 10.7326 14.7201 10.7326ZM30 12.3037C30 11.3811 29.3245 10.7328 28.4175 10.7328C27.4544 10.7328 26.7475 11.4559 26.7475 12.4097C26.7475 13.4134 27.5044 14.0804 28.43 14.0804C29.212 14.0804 29.8249 13.619 29.9811 12.9645H29.1992C29.0866 13.2513 28.8114 13.4134 28.4423 13.4134C27.9606 13.4134 27.5979 13.1142 27.5167 12.5904H29.9998L30 12.3037ZM27.5606 12.0542C27.6795 11.6053 28.0173 11.3873 28.405 11.3873C28.8303 11.3873 29.1556 11.6304 29.2306 12.0542H27.5606Z"
+                fill="#0052FF"
+            />
+        </svg>
+    );
+};
+
+export default CoinbaseIcon;
diff --git a/src/components/foundations/payment-icons/diners-club-icon.tsx b/src/components/foundations/payment-icons/diners-club-icon.tsx
new file mode 100644
index 0000000..fd7445f
--- /dev/null
+++ b/src/components/foundations/payment-icons/diners-club-icon.tsx
@@ -0,0 +1,24 @@
+import type { SVGProps } from "react";
+
+const DinersClubIcon = (props: SVGProps<SVGSVGElement>) => {
+    return (
+        <svg width="34" height="24" viewBox="0 0 34 24" fill="none" {...props}>
+            <path
+                d="M4 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 20V4C0.5 2.067 2.067 0.5 4 0.5Z"
+                fill="white"
+            />
+            <path
+                d="M4 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 20V4C0.5 2.067 2.067 0.5 4 0.5Z"
+                className="stroke-border-secondary"
+            />
+            <path
+                fillRule="evenodd"
+                clipRule="evenodd"
+                d="M18.4335 4.80088C22.4857 4.73789 25.7782 8.01561 25.8417 12.0499V12.1134C25.715 16.0848 22.4859 19.2999 18.4335 19.2999H15.8378C11.912 19.2369 8.74605 16.0218 8.74601 12.1134C8.61937 8.20493 11.6589 4.92696 15.5214 4.80088H18.4335ZM16.0282 6.06162C12.7358 6.06162 10.0128 8.77203 10.0126 12.0499C10.0127 15.3279 12.7357 18.0392 16.0282 18.0392C19.3206 18.0389 22.0428 15.3278 22.0429 12.0499C22.0426 8.77216 19.3205 6.06184 16.0282 6.06162ZM15.0771 16.0851C12.8612 15.5176 11.5319 13.2482 12.1015 11.0421C12.4813 9.59235 13.621 8.45757 15.0771 8.0792V16.0851ZM16.9775 8.0792C19.1935 8.64659 20.5862 10.8524 20.0165 13.0587C19.6366 14.5716 18.4971 15.7068 16.9775 16.0851V8.0792Z"
+                fill="#0079BE"
+            />
+        </svg>
+    );
+};
+
+export default DinersClubIcon;
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/elo-icon.tsx b/src/components/foundations/payment-icons/elo-icon.tsx
new file mode 100644
index 0000000..7bb7f42
--- /dev/null
+++ b/src/components/foundations/payment-icons/elo-icon.tsx
@@ -0,0 +1,36 @@
+import type { SVGProps } from "react";
+
+const EloIcon = (props: SVGProps<SVGSVGElement>) => {
+    return (
+        <svg width="34" height="24" viewBox="0 0 34 24" fill="none" {...props}>
+            <path
+                d="M4 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 20V4C0.5 2.067 2.067 0.5 4 0.5Z"
+                fill="white"
+            />
+            <path
+                d="M4 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 20V4C0.5 2.067 2.067 0.5 4 0.5Z"
+                className="stroke-border-secondary"
+            />
+            <path
+                d="M7.82406 9.49573C8.11175 9.40141 8.41952 9.35019 8.73975 9.35019C10.1373 9.35019 11.3031 10.3241 11.5705 11.6178L13.5509 11.2216C13.0965 9.0229 11.1154 7.3678 8.73975 7.3678C8.19585 7.3678 7.67231 7.45472 7.18359 7.61484L7.82406 9.49573Z"
+                fill="#FECA2F"
+            />
+            <path
+                d="M5.46727 15.8677L6.65306 14.3366C6.12376 13.8012 5.78968 13.0196 5.78968 12.1484C5.78968 11.2778 6.12344 10.4962 6.6526 9.96122L5.46618 8.4303C4.56678 9.33989 4 10.6686 4 12.1484C4 13.629 4.56761 14.9581 5.46727 15.8677Z"
+                fill="#1BA7DE"
+            />
+            <path
+                d="M11.5711 12.6802C11.3028 13.9737 10.1377 14.9463 8.74142 14.9463C8.42105 14.9463 8.11268 14.8949 7.82497 14.8003L7.18359 16.6822C7.67307 16.8431 8.19677 16.9301 8.74142 16.9301C11.1149 16.9301 13.0947 15.2762 13.5509 13.0783L11.5711 12.6802Z"
+                fill="#EC412A"
+            />
+            <path
+                fillRule="evenodd"
+                clipRule="evenodd"
+                d="M23.0803 8.4303V13.8716L24.0567 14.263L23.5948 15.3362L22.6292 14.948C22.412 14.857 22.2651 14.7183 22.1535 14.5616C22.0463 14.4013 21.9668 14.1822 21.9668 13.8865V8.4303H23.0803ZM15.6742 12.4744C15.6984 10.9184 17.0236 9.67629 18.6315 9.70012C19.9963 9.72082 21.1271 10.6452 21.4241 11.8746L16.1457 14.0562C15.8391 13.6029 15.6648 13.0576 15.6742 12.4744ZM16.8819 12.6926C16.8747 12.6273 16.8696 12.5603 16.8715 12.4928C16.8867 11.576 17.6668 10.8445 18.6142 10.8597C19.1298 10.8664 19.5877 11.0947 19.8972 11.4481L16.8819 12.6926ZM19.7861 13.7028C19.468 14.002 19.0366 14.1843 18.5603 14.1778C18.2338 14.1725 17.9312 14.078 17.674 13.9205L17.0364 14.903C17.4731 15.1699 17.988 15.3278 18.5431 15.3362C19.3512 15.3478 20.0877 15.0408 20.6232 14.534L19.7861 13.7028ZM27.1435 10.8596C26.9533 10.8596 26.7705 10.8894 26.5997 10.9448L26.2197 9.84384C26.5097 9.75021 26.8203 9.69934 27.1435 9.69934C28.5538 9.69934 29.7303 10.6681 30.0001 11.9549L28.8239 12.1868C28.6654 11.4294 27.9733 10.8596 27.1435 10.8596ZM25.2123 14.629L26.007 13.76C25.652 13.4561 25.4285 13.0123 25.4285 12.5177C25.4285 12.0235 25.652 11.5799 26.0066 11.2763L25.2113 10.4072C24.6084 10.9236 24.2285 11.6781 24.2285 12.5177C24.2285 13.3583 24.6087 14.1125 25.2123 14.629ZM27.1437 14.1763C27.9727 14.1763 28.6648 13.607 28.8242 12.8507L30 13.0836C29.7289 14.3691 28.5527 15.3365 27.1437 15.3365C26.8203 15.3365 26.5093 15.2854 26.2185 15.1914L26.5994 14.0908C26.7704 14.1461 26.9534 14.1763 27.1437 14.1763Z"
+                fill="black"
+            />
+        </svg>
+    );
+};
+
+export default EloIcon;
diff --git a/src/components/foundations/payment-icons/etherium-icon.tsx b/src/components/foundations/payment-icons/etherium-icon.tsx
new file mode 100644
index 0000000..1333d24
--- /dev/null
+++ b/src/components/foundations/payment-icons/etherium-icon.tsx
@@ -0,0 +1,25 @@
+import type { SVGProps } from "react";
+
+const EtheriumIcon = (props: SVGProps<SVGSVGElement>) => {
+    return (
+        <svg width="34" height="24" viewBox="0 0 34 24" fill="none" {...props}>
+            <path
+                d="M4 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 20V4C0.5 2.067 2.067 0.5 4 0.5Z"
+                fill="white"
+            />
+            <path
+                d="M4 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 20V4C0.5 2.067 2.067 0.5 4 0.5Z"
+                className="stroke-border-secondary"
+            />
+            <ellipse cx="16.935" cy="11.935" rx="7.935" ry="7.93499" fill="#6481E7" />
+            <path fillRule="evenodd" clipRule="evenodd" d="M13.4688 12.2578L17.0281 14.362V6.35181L13.4688 12.2578Z" fill="white" />
+            <path fillRule="evenodd" clipRule="evenodd" d="M17.0273 6.35181V14.362L20.5867 12.2578L17.0273 6.35181Z" fill="#C1CCF5" />
+            <path fillRule="evenodd" clipRule="evenodd" d="M17.0283 10.6401L13.4688 12.2577L17.0281 14.3619L20.5877 12.258L17.0283 10.6401Z" fill="#8299EC" />
+            <path fillRule="evenodd" clipRule="evenodd" d="M17.0283 10.6401L13.4688 12.2577L17.0281 14.3619L17.0283 10.6401Z" fill="#C1CCF5" />
+            <path fillRule="evenodd" clipRule="evenodd" d="M13.4688 12.9329L17.0281 17.9489V15.0359L13.4688 12.9329Z" fill="white" />
+            <path fillRule="evenodd" clipRule="evenodd" d="M17.0273 15.0359V17.9491L20.589 12.9329L17.0273 15.0359Z" fill="#C1CCF5" />
+        </svg>
+    );
+};
+
+export default EtheriumIcon;
diff --git a/src/components/foundations/payment-icons/forbrugsforeningen-icon.tsx b/src/components/foundations/payment-icons/forbrugsforeningen-icon.tsx
new file mode 100644
index 0000000..1e1fb01
--- /dev/null
+++ b/src/components/foundations/payment-icons/forbrugsforeningen-icon.tsx
@@ -0,0 +1,22 @@
+import type { SVGProps } from "react";
+
+const ForbrugsforeningenIcon = (props: SVGProps<SVGSVGElement>) => {
+    return (
+        <svg width="34" height="24" viewBox="0 0 34 24" fill="none" {...props}>
+            <path
+                d="M4 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 20V4C0.5 2.067 2.067 0.5 4 0.5Z"
+                fill="white"
+            />
+            <path
+                d="M4 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 20V4C0.5 2.067 2.067 0.5 4 0.5Z"
+                className="stroke-border-secondary"
+            />
+            <path
+                d="M20.2891 5.3418C22.6152 5.96129 23.6228 7.50981 23.8633 10.6904C23.9373 11.6668 23.9299 12.3209 23.9297 12.3359C23.9297 12.3359 23.9382 12.9946 23.8633 13.9824C23.5358 18.3119 21.7905 19.6193 17.2266 19.6719C17.1559 19.6723 16.7585 19.6723 16.6885 19.6719C15.8969 19.6626 15.1927 19.6151 14.5635 19.5215C14.5856 19.5213 14.6075 19.5211 14.6299 19.5195C15.4556 19.472 16.6049 18.8349 17.2891 17.3535C17.5879 16.7056 17.668 15.5488 17.668 15.5488V13.0898L17.6689 13.0889H20.29V10.6562H17.6689C17.6689 10.6562 17.6679 10.6529 17.667 10.6484L17.666 10.6445C17.6647 10.6403 17.6633 10.6358 17.6611 10.6289C17.6609 10.627 17.6604 10.6236 17.6602 10.6211C17.6583 10.6141 17.6566 10.607 17.6553 10.5977C17.6542 10.5938 17.6542 10.5885 17.6533 10.584C17.6516 10.5749 17.6499 10.5656 17.6484 10.5547C17.6472 10.5495 17.6469 10.5429 17.6465 10.5371C17.6447 10.5255 17.643 10.5142 17.6416 10.501C17.6412 10.4945 17.6412 10.4871 17.6406 10.4805C17.6397 10.4664 17.6389 10.4523 17.6387 10.4365V10.3623C17.6387 10.3549 17.6394 10.3459 17.6396 10.3379C17.6401 10.3184 17.6405 10.2989 17.6426 10.2773C17.643 10.271 17.6441 10.2637 17.6445 10.2568C17.6466 10.2333 17.6497 10.2089 17.6533 10.1836C17.6538 10.1789 17.6548 10.1735 17.6553 10.1689C17.6597 10.1404 17.6647 10.1115 17.6709 10.0811C17.6709 10.0804 17.6717 10.0791 17.6719 10.0781C17.7162 9.86556 17.8109 9.60399 18.001 9.30762C18.5123 8.51197 19.9642 8.54871 20.2432 8.56348C20.2703 8.56512 20.2866 8.56625 20.2891 8.56641V5.3418ZM14.6113 14.7969C14.6148 14.9325 14.58 15.3942 14.1826 15.8906C13.6715 16.5298 12.9371 16.4903 12.9199 16.4893V19.0996C11.0908 18.3612 10.2658 16.8215 10.0508 13.9824C10.0248 13.6405 10.0097 13.3399 10 13.0908L14.6289 13.0889C14.6285 13.1459 14.6098 14.756 14.6113 14.7969ZM17.2256 5C17.8021 5.00661 18.3337 5.03387 18.8232 5.08398C18.7875 5.08519 18.7522 5.08657 18.7129 5.09082C18.3121 5.13058 16.8034 5.06242 15.4355 6.71484C14.7012 7.60388 14.6289 10.6562 14.6289 10.6562H10.0537C10.3882 6.35434 12.1356 5.05236 16.6875 5H17.2256Z"
+                fill="#659AD2"
+            />
+        </svg>
+    );
+};
+
+export default ForbrugsforeningenIcon;
diff --git a/src/components/foundations/payment-icons/giropay-icon.tsx b/src/components/foundations/payment-icons/giropay-icon.tsx
new file mode 100644
index 0000000..41ca3fd
--- /dev/null
+++ b/src/components/foundations/payment-icons/giropay-icon.tsx
@@ -0,0 +1,30 @@
+import type { SVGProps } from "react";
+
+const GiropayIcon = (props: SVGProps<SVGSVGElement>) => {
+    return (
+        <svg width="34" height="24" viewBox="0 0 34 24" fill="none" {...props}>
+            <path
+                d="M4 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 20V4C0.5 2.067 2.067 0.5 4 0.5Z"
+                fill="white"
+            />
+            <path
+                d="M4 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 20V4C0.5 2.067 2.067 0.5 4 0.5Z"
+                className="stroke-border-secondary"
+            />
+            <path
+                d="M27.9199 7C28.9729 7.00018 29.8256 7.77741 29.8262 8.7373V15.3428C29.8258 16.3025 28.973 17.0797 27.9199 17.0801H6.18066C5.12746 17.0797 4.27384 16.3025 4.27344 15.3428V8.7373C4.274 7.7774 5.12756 7.00016 6.18066 7H27.9199ZM6.18066 7.74316C5.57796 7.74415 5.09025 8.18812 5.08887 8.7373V15.3428C5.09 15.8577 5.5189 16.2804 6.06934 16.332L6.18066 16.3379H17.54V7.74316H6.18066Z"
+                fill="#0F3365"
+            />
+            <path
+                d="M26.625 12.3744H26.6357L27.2021 10.7318H28.1562L27.1445 13.0746C26.8745 13.7068 26.6675 14.3207 25.793 14.3207C25.5916 14.3207 25.3954 14.3008 25.1992 14.2621L25.2637 13.601C25.3904 13.6398 25.507 13.6537 25.6396 13.6537C25.8725 13.6537 26.0526 13.5282 26.1211 13.306L25.0039 10.7318H26.0312L26.625 12.3744ZM20.3633 10.6742C21.1262 10.6742 21.5447 11.3355 21.5449 11.9437C21.5449 12.6874 21.1053 13.3059 20.2842 13.306C19.9504 13.306 19.5894 13.1953 19.4092 12.8959H19.3994V14.2621H18.4453V10.7318H19.3252V11.1859H19.3359C19.5267 10.8337 19.929 10.6743 20.3633 10.6742ZM23.4766 10.7562C24.1813 10.7562 24.791 11.0313 24.791 11.7992V12.7357C24.791 12.9338 24.8014 13.1325 24.8438 13.3304H23.9697C23.9646 13.1956 23.9482 13.0644 23.9482 12.934H23.9375C23.7204 13.2477 23.4556 13.3881 23.0635 13.3881C22.5177 13.388 22.0303 13.1419 22.0303 12.5961C22.0303 11.8283 22.9473 11.7367 23.4561 11.7367C23.6095 11.7367 23.7786 11.7504 23.9004 11.7699C23.8949 11.4273 23.614 11.3353 23.2695 11.3353C22.9626 11.3354 22.6556 11.3889 22.3906 11.5238L22.375 10.9349C22.7139 10.8092 23.0686 10.7563 23.4766 10.7562ZM23.498 12.2006C23.1748 12.2006 22.9199 12.2921 22.9199 12.5336C22.92 12.7071 23.0901 12.809 23.3125 12.809C23.6729 12.8087 23.9004 12.5086 23.9004 12.2142C23.7787 12.2095 23.641 12.2006 23.498 12.2006ZM19.9814 11.3402C19.6317 11.3403 19.3984 11.621 19.3984 11.9974C19.3985 12.3645 19.6635 12.6399 19.9814 12.64C20.3415 12.64 20.5596 12.3642 20.5596 11.9633C20.5594 11.63 20.3521 11.3402 19.9814 11.3402Z"
+                fill="#FFFFFE"
+            />
+            <path
+                d="M7.68652 10.6743C8.09443 10.6743 8.42357 10.8771 8.625 11.186H8.63477V10.7319H9.49902V12.9536C9.49902 13.9869 8.94773 14.3208 7.83496 14.3208C7.37935 14.3208 7.00289 14.2328 6.78027 14.1606L6.82812 13.4751C7.11946 13.6055 7.36336 13.6831 7.76074 13.6831C8.31189 13.6831 8.6084 13.4462 8.6084 12.9536V12.8179H8.59766C8.37 13.1128 8.05234 13.2475 7.6709 13.2476C6.91311 13.2476 6.44143 12.7269 6.44141 11.9829C6.44141 11.2343 6.82828 10.6743 7.68652 10.6743ZM15.4082 10.6743C16.3194 10.6743 17.0137 11.157 17.0137 11.9927C17.0137 12.8233 16.3194 13.3062 15.4082 13.3062C14.4969 13.3061 13.8027 12.8233 13.8027 11.9927C13.8027 11.157 14.4969 10.6743 15.4082 10.6743ZM11.1113 13.2476H10.1572V10.7319H11.1113V13.2476ZM13.4434 10.6743C13.5544 10.6743 13.6712 10.6884 13.7666 10.7026L13.7188 11.4272C13.613 11.3984 13.5065 11.3989 13.3955 11.3989C12.9507 11.3991 12.7021 11.6935 12.7021 12.186V13.2476H11.748V10.7319H12.6172V11.1958H12.6279C12.7922 10.8773 13.0303 10.6744 13.4434 10.6743ZM15.4082 11.2827C14.9684 11.2828 14.7881 11.616 14.7881 11.9927C14.7881 12.3645 14.9684 12.6977 15.4082 12.6978C15.8479 12.6978 16.0283 12.3645 16.0283 11.9927C16.0283 11.6159 15.848 11.2827 15.4082 11.2827ZM7.9668 11.3403C7.61208 11.3406 7.42678 11.6257 7.42676 11.9683C7.42676 12.3591 7.68086 12.5813 7.9668 12.5815C8.30579 12.5815 8.57617 12.3206 8.57617 11.9341C8.57599 11.654 8.39569 11.3403 7.9668 11.3403ZM11.1113 10.3218H10.1572V9.68408H11.1113V10.3218Z"
+                fill="#D8232A"
+            />
+        </svg>
+    );
+};
+
+export default GiropayIcon;
diff --git a/src/components/foundations/payment-icons/google-pay-icon.tsx b/src/components/foundations/payment-icons/google-pay-icon.tsx
new file mode 100644
index 0000000..bf7d315
--- /dev/null
+++ b/src/components/foundations/payment-icons/google-pay-icon.tsx
@@ -0,0 +1,40 @@
+import type { SVGProps } from "react";
+
+const GooglePayIcon = (props: SVGProps<SVGSVGElement>) => {
+    return (
+        <svg width="34" height="24" viewBox="0 0 34 24" fill="none" {...props}>
+            <path
+                d="M4 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 20V4C0.5 2.067 2.067 0.5 4 0.5Z"
+                fill="white"
+            />
+            <path
+                d="M4 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 20V4C0.5 2.067 2.067 0.5 4 0.5Z"
+                className="stroke-border-secondary"
+            />
+            <path
+                fillRule="evenodd"
+                clipRule="evenodd"
+                d="M26.7109 14.1301H26.7285L28.1465 10.5715H29.1426L26.0791 17.7062H25.1338L26.2725 15.2101L24.2627 10.5715H25.2588L26.7109 14.1301ZM21.916 10.4094C22.5934 10.4094 23.1286 10.5945 23.5215 10.9582C23.9143 11.3221 24.1084 11.8307 24.1084 12.4719V15.5275H23.2314V14.841H23.1914C22.8099 15.4068 22.3086 15.6896 21.6768 15.6896C21.1416 15.6896 20.6858 15.5277 20.3271 15.2043C19.9743 14.9039 19.7748 14.4591 19.7861 13.9914C19.7861 13.4774 19.98 13.0729 20.3613 12.7668C20.7428 12.4606 21.2558 12.3107 21.8936 12.3107C22.4401 12.3107 22.8843 12.4141 23.2373 12.6105V12.3967C23.2372 12.079 23.1004 11.7784 22.8613 11.5705C22.6165 11.3511 22.303 11.2297 21.9785 11.2297C21.4662 11.2298 21.0617 11.4499 20.7656 11.8888L19.957 11.3742C20.3898 10.733 21.0449 10.4094 21.916 10.4094ZM17.5723 8.28338C18.1586 8.2719 18.728 8.49746 19.1436 8.91326C19.9749 9.69891 20.0262 11.0221 19.2461 11.8713L19.1436 11.9748C18.7166 12.3849 18.1928 12.5929 17.5723 12.5929H16.0576V15.5275H15.1406V8.28338H17.5723ZM22.0352 13.0617C21.6652 13.0618 21.352 13.1542 21.1016 13.3332C20.8568 13.5122 20.7314 13.7375 20.7314 14.009C20.7315 14.2515 20.8454 14.4768 21.0332 14.6154C21.2382 14.7771 21.4889 14.8634 21.7451 14.8576C22.1324 14.8576 22.503 14.7023 22.7764 14.425C23.0781 14.1362 23.2313 13.7951 23.2314 13.4025C22.9467 13.1714 22.5477 13.0559 22.0352 13.0617ZM16.0576 11.7033H17.5947C17.9364 11.7149 18.2675 11.5767 18.501 11.3283C18.9793 10.8257 18.9671 10.0166 18.4717 9.53142C18.2382 9.30054 17.9249 9.17302 17.5947 9.17302H16.0576V11.7033Z"
+                fill="#3C4043"
+            />
+            <path
+                d="M12.8936 11.9579C12.8936 11.6748 12.8708 11.3917 12.8253 11.1144H8.95898V12.7146H11.174C11.0829 13.2288 10.7868 13.6909 10.354 13.9798V15.0196H11.6751C12.4495 14.2975 12.8936 13.2288 12.8936 11.9579Z"
+                fill="#4285F4"
+            />
+            <path
+                d="M8.95817 16.0248C10.0628 16.0248 10.9967 15.6551 11.6743 15.0196L10.3532 13.9798C9.98311 14.234 9.5105 14.3784 8.95817 14.3784C7.88768 14.3784 6.98232 13.6447 6.65776 12.6627H5.29688V13.7372C5.99155 15.1409 7.40938 16.0248 8.95817 16.0248Z"
+                fill="#34A853"
+            />
+            <path
+                d="M6.65846 12.6627C6.48761 12.1486 6.48761 11.5882 6.65846 11.0683V9.99957H5.29736C4.71078 11.1723 4.71078 12.5587 5.29736 13.7314L6.65846 12.6627Z"
+                fill="#FBBC04"
+            />
+            <path
+                d="M8.95817 9.35253C9.54466 9.34098 10.1084 9.56628 10.5297 9.97643L11.7027 8.7864C10.9568 8.08162 9.97741 7.69457 8.95817 7.70612C7.40938 7.70612 5.99155 8.59576 5.29688 9.99954L6.65776 11.074C6.98232 10.0862 7.88768 9.35253 8.95817 9.35253Z"
+                fill="#EA4335"
+            />
+        </svg>
+    );
+};
+
+export default GooglePayIcon;
diff --git a/src/components/foundations/payment-icons/ideal-icon.tsx b/src/components/foundations/payment-icons/ideal-icon.tsx
new file mode 100644
index 0000000..8105f1b
--- /dev/null
+++ b/src/components/foundations/payment-icons/ideal-icon.tsx
@@ -0,0 +1,28 @@
+import type { SVGProps } from "react";
+
+const IdealIcon = (props: SVGProps<SVGSVGElement>) => {
+    return (
+        <svg width="34" height="24" viewBox="0 0 34 24" fill="none" {...props}>
+            <path
+                d="M4 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 20V4C0.5 2.067 2.067 0.5 4 0.5Z"
+                fill="white"
+            />
+            <path
+                d="M4 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 20V4C0.5 2.067 2.067 0.5 4 0.5Z"
+                className="stroke-border-secondary"
+            />
+            <path
+                d="M17.333 4.95593C22.8305 4.95597 24.9432 8.04865 24.9434 11.9579C24.9434 16.6344 21.9905 18.9852 17.333 18.9852H9.24219V4.95593H17.333ZM10.0107 5.79675V18.1942H17.333C21.7504 18.1942 24.1513 16.0659 24.1514 11.9833C24.1514 7.77687 21.5584 5.79675 17.333 5.79675H10.0107ZM13.3477 12.8495V17.1542H10.9951V12.8495H13.3477ZM12.1719 9.18738C12.9804 9.18757 13.6356 9.86281 13.6357 10.6962C13.6357 11.5296 12.9805 12.2057 12.1719 12.2059C11.3631 12.2059 10.707 11.5298 10.707 10.6962C10.7072 9.86269 11.3631 9.18738 12.1719 9.18738Z"
+                fill="black"
+            />
+            <path
+                fillRule="evenodd"
+                clipRule="evenodd"
+                d="M21.4858 9.31079H22.158V11.3893H23.1423C22.8782 7.60349 19.9733 6.76221 17.3324 6.76221H14.5234V9.31079H14.9316C15.6998 9.31079 16.156 9.83041 16.156 10.6964C16.156 11.5625 15.6998 12.0821 14.9556 12.0821H14.5234V17.1545H17.3324C21.6298 17.1545 23.0943 15.1008 23.1663 12.0821H21.4858V9.31079ZM18.245 11.3893V12.0821H16.5645V9.31079H18.197V10.0036H17.2367V10.3253H18.149V11.0181H17.2607V11.3893H18.245ZM18.5322 12.0821L19.3485 9.31079H20.3088L21.1251 12.0821H20.4289L20.2848 11.5625H19.3965L19.2525 12.0821H18.5322ZM19.5966 10.8449H19.5891V10.8696L19.5966 10.8449ZM19.5966 10.8449H20.0693L19.8532 10.0778H19.8292L19.5966 10.8449ZM14.5234 11.3893V10.0036H14.9316C15.1957 10.0036 15.4838 10.0778 15.4838 10.6964C15.4838 11.315 15.2197 11.3893 14.9316 11.3893H14.5234Z"
+                fill="#D50072"
+            />
+        </svg>
+    );
+};
+
+export default IdealIcon;
diff --git a/src/components/foundations/payment-icons/index.tsx b/src/components/foundations/payment-icons/index.tsx
new file mode 100644
index 0000000..a5846c4
--- /dev/null
+++ b/src/components/foundations/payment-icons/index.tsx
@@ -0,0 +1,56 @@
+export { default as AffirmIcon } from "./affirm-icon";
+export { default as AfterpayIcon } from "./afterpay-icon";
+export { default as AlipayIcon } from "./alipay-icon";
+export { default as AmazonIcon } from "./amazon-icon";
+export { default as AmexIcon } from "./amex-icon";
+export { default as ApplePayIcon } from "./apple-pay-icon";
+export { default as AydenIcon } from "./ayden-icon";
+export { default as BancontactIcon } from "./bancontact-icon";
+export { default as BinancePayIcon } from "./binance-pay-icon";
+export { default as BitcoinCashIcon } from "./bitcoin-cash-icon";
+export { default as BitcoinIcon } from "./bitcoin-icon";
+export { default as BitpayIcon } from "./bitpay-icon";
+export { default as BraintreeIcon } from "./braintree-icon";
+export { default as CashAppPayIcon } from "./cash-app-pay-icon";
+export { default as CitadeleIcon } from "./citadele-icon";
+export { default as CoinbaseIcon } from "./coinbase-icon";
+export { default as DinersClubIcon } from "./diners-club-icon";
+export { default as DiscoverIcon } from "./discover-icon";
+export { default as EloIcon } from "./elo-icon";
+export { default as EtheriumIcon } from "./etherium-icon";
+export { default as ForbrugsforeningenIcon } from "./forbrugsforeningen-icon";
+export { default as GiropayIcon } from "./giropay-icon";
+export { default as GooglePayIcon } from "./google-pay-icon";
+export { default as IdealIcon } from "./ideal-icon";
+export { default as InteracIcon } from "./interac-icon";
+export { default as JCBIcon } from "./jcb-icon";
+export { default as KlarnaIcon } from "./klarna-icon";
+export { default as LightcoinIcon } from "./lightcoin-icon";
+export { default as MaestroIcon } from "./maestro-icon";
+export { default as MastercardIcon } from "./mastercard-icon";
+export { default as PayoneerIcon } from "./payoneer-icon";
+export { default as PayPalIcon } from "./paypal-icon";
+export { default as PaysafeIcon } from "./paysafe-icon";
+export { default as QiwiIcon } from "./qiwi-icon";
+export { default as RazorpayIcon } from "./razorpay-icon";
+export { default as RevolutIcon } from "./revolut-icon";
+export { default as RuPayIcon } from "./ru-pay-icon";
+export { default as SamsungPayIcon } from "./samsung-pay-icon";
+export { default as SEPAIcon } from "./sepa-icon";
+export { default as ShopeePayIcon } from "./shopee-pay-icon";
+export { default as ShopPayIcon } from "./shop-pay-icon";
+export { default as SkrillIcon } from "./skrill-icon";
+export { default as SofortIcon } from "./sofort-icon";
+export { default as StripeIcon } from "./stripe-icon";
+export { default as UnionPayIcon } from "./union-pay-icon";
+export { default as UPIIcon } from "./upi-icon";
+export { default as VenmoIcon } from "./venmo-icon";
+export { default as VerifoneIcon } from "./verifone-icon";
+export { default as VisaIcon } from "./visa-icon";
+export { default as WebmoneyIcon } from "./webmoney-icon";
+export { default as WeChatIcon } from "./we-chat-icon";
+export { default as WeChatPayIcon } from "./we-chat-pay-icon";
+export { default as WiseIcon } from "./wise-icon";
+export { default as YandexIcon } from "./yandex-icon";
+export { default as ZelleIcon } from "./zelle-icon";
+export { default as ZipPayIcon } from "./zip-pay-icon";
diff --git a/src/components/foundations/payment-icons/interac-icon.tsx b/src/components/foundations/payment-icons/interac-icon.tsx
new file mode 100644
index 0000000..3423309
--- /dev/null
+++ b/src/components/foundations/payment-icons/interac-icon.tsx
@@ -0,0 +1,37 @@
+import type { SVGProps } from "react";
+
+const InteracIcon = (props: SVGProps<SVGSVGElement>) => {
+    return (
+        <svg width="34" height="24" viewBox="0 0 34 24" fill="none" {...props}>
+            <path
+                d="M4 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 20V4C0.5 2.067 2.067 0.5 4 0.5Z"
+                fill="white"
+            />
+            <path
+                d="M4 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 20V4C0.5 2.067 2.067 0.5 4 0.5Z"
+                className="stroke-border-secondary"
+            />
+            <path
+                fillRule="evenodd"
+                clipRule="evenodd"
+                d="M24.951 18.6209C24.951 18.9731 24.8111 19.3109 24.562 19.5599C24.313 19.809 23.9752 19.9489 23.623 19.9489H10.3295C10.155 19.9491 9.98213 19.9149 9.82084 19.8482C9.65954 19.7816 9.51297 19.6838 9.38949 19.5604C9.26602 19.4371 9.16806 19.2906 9.10123 19.1294C9.0344 18.9682 9 18.7954 9 18.6209V5.32799C9 5.15347 9.0344 4.98066 9.10123 4.81944C9.16806 4.65823 9.26602 4.51176 9.38949 4.38843C9.51297 4.26509 9.65954 4.1673 9.82084 4.10065C9.98213 4.03401 10.155 3.9998 10.3295 4H23.6221C23.9743 4 24.3121 4.13991 24.5611 4.38896C24.8102 4.63801 24.9501 4.97579 24.9501 5.32799L24.951 18.6209Z"
+                fill="#EDAA00"
+            />
+            <path
+                d="M17.907 12.1466V9.29053L18.6528 9.11397V9.48792C18.6528 9.48792 18.8457 8.99566 19.2936 8.88127C19.4315 8.84656 19.5009 8.86738 19.5009 8.86738V9.59597C19.3667 9.5978 19.2341 9.62547 19.1104 9.67746C18.8339 9.78641 18.6951 10.0248 18.6951 10.387V11.964L17.907 12.1466ZM13.9771 13.0753C13.9771 13.0753 13.8564 12.8942 13.8564 12.2507V10.8289L13.4725 10.9194V10.3342L13.8567 10.2437V9.60502L14.6495 9.4179V10.055L15.2097 9.92223V10.5078L14.6495 10.6409V12.0896C14.6495 12.7478 14.8243 12.8743 14.8243 12.8743L13.9771 13.0753ZM15.2924 11.3764C15.2924 10.8684 15.3649 10.4981 15.52 10.2138C15.7044 9.87636 16.0077 9.65663 16.449 9.55613C17.3185 9.35844 17.6321 9.87334 17.6197 10.5633C17.6158 10.8099 17.6167 10.9303 17.6167 10.9303L16.0847 11.2904V11.3151C16.0847 11.798 16.1861 12.0265 16.4915 11.9613C16.7553 11.9058 16.8287 11.7404 16.8495 11.5363C16.8531 11.5028 16.8543 11.4192 16.8543 11.4192L17.5723 11.2472C17.5723 11.2472 17.5741 11.3061 17.5723 11.3716C17.5657 11.6459 17.486 12.3262 16.4885 12.5616C15.5438 12.7859 15.2915 12.2088 15.2915 11.3764H15.2924ZM16.4798 10.0879C16.2259 10.1456 16.0928 10.3946 16.0874 10.8072L16.8582 10.6237C16.8597 10.6049 16.8597 10.5633 16.8597 10.4993C16.8582 10.1881 16.762 10.0239 16.4801 10.0879H16.4798ZM22.1829 9.70613C22.1527 8.8363 22.3785 8.14574 23.3488 7.92542C23.9681 7.78477 24.2026 7.94534 24.3215 8.10077C24.4359 8.24927 24.48 8.44937 24.48 8.72976V8.78167L23.72 8.96276V8.85682C23.72 8.52482 23.6295 8.39806 23.388 8.45842C23.101 8.53056 22.9851 8.8028 22.9851 9.34486V9.59748C22.9851 10.1483 23.0606 10.4006 23.391 10.3312C23.6784 10.2708 23.7176 10.0197 23.723 9.79879C23.723 9.76408 23.7252 9.65301 23.7252 9.65301L24.4839 9.47434V9.59235C24.4818 10.3143 24.1012 10.7694 23.3877 10.9354C22.4059 11.166 22.2134 10.5977 22.1832 9.70613H22.1829ZM19.558 10.9237C19.558 10.2621 19.9461 10.0529 20.5295 9.81177C21.0538 9.59476 21.065 9.48701 21.0674 9.29868C21.0701 9.14023 20.9967 9.00411 20.7354 9.07081C20.4954 9.13117 20.4317 9.30562 20.4191 9.44446C20.4147 9.49322 20.413 9.54219 20.4142 9.59114L19.6787 9.76468C19.6738 9.61809 19.6909 9.47159 19.7294 9.33007C19.8471 8.93439 20.1963 8.66819 20.7981 8.52905C21.5805 8.34796 21.8415 8.69203 21.8427 9.22624V10.4912C21.8427 11.1029 21.9562 11.1923 21.9562 11.1923L21.234 11.3634C21.194 11.2799 21.1615 11.193 21.1368 11.1038C21.1368 11.1038 20.9789 11.5019 20.4339 11.6305C19.8604 11.7651 19.5586 11.4108 19.5586 10.924L19.558 10.9237ZM21.0631 10.0206C20.9413 10.106 20.8127 10.1812 20.6786 10.2455C20.4372 10.3635 20.3288 10.5084 20.3288 10.7317C20.3288 10.9252 20.4495 11.0525 20.6669 10.9982C20.9008 10.9397 21.0631 10.7214 21.0631 10.4187V10.0206ZM9.83256 15.0773C9.75014 15.0771 9.66929 15.0547 9.59851 15.0124C9.52774 14.9702 9.46967 14.9097 9.43041 14.8372C9.39114 14.7647 9.37214 14.683 9.37541 14.6006C9.37867 14.5183 9.40408 14.4383 9.44895 14.3692L9.45378 14.3629L9.46253 14.3607L10.54 14.1063V14.9251L10.5231 14.9291C10.2786 14.9879 9.98649 15.0546 9.92612 15.067C9.89522 15.0739 9.86363 15.0774 9.83196 15.0773H9.83256ZM9.83256 16.1249C9.71147 16.1249 9.59532 16.0769 9.50955 15.9914C9.42379 15.9059 9.37541 15.7899 9.37501 15.6688C9.37452 15.5804 9.40026 15.4939 9.44895 15.4201L9.45378 15.412L9.46253 15.4102L10.54 15.1557V15.9746L10.5231 15.9791C10.2786 16.0376 9.98649 16.1055 9.92612 16.1173C9.8951 16.1234 9.86357 16.1264 9.83196 16.1264L9.83256 16.1249ZM9.83256 17.1743C9.71118 17.1742 9.5948 17.1259 9.509 17.0401C9.4232 16.9542 9.37501 16.8378 9.37501 16.7164C9.37452 16.628 9.40026 16.5415 9.44895 16.4677L9.45378 16.4593L10.5403 16.2033V17.0222L10.5234 17.0264C10.2654 17.0886 9.97834 17.1534 9.92642 17.1652C9.89538 17.1711 9.86386 17.1742 9.83226 17.1743"
+                fill="#231F20"
+            />
+            <path d="M9.70538 14.0737L9.70508 9.49243L10.5402 9.29504V13.876L9.70538 14.0737Z" fill="#231F20" />
+            <path
+                d="M11.7846 13.6841C11.7814 13.5496 11.7256 13.4216 11.6293 13.3277C11.533 13.2337 11.4038 13.181 11.2693 13.181C11.1347 13.181 11.0055 13.2337 10.9092 13.3277C10.8129 13.4216 10.7572 13.5496 10.7539 13.6841V17.9662C10.7545 18.3361 10.9017 18.6905 11.1632 18.9521C11.4246 19.2136 11.7791 19.3608 12.1489 19.3615C12.5388 19.3615 13.6073 19.3597 13.6073 19.3597V15.5813C13.6075 15.4702 13.5802 15.3608 13.5279 15.2628C13.4756 15.1648 13.3999 15.0813 13.3076 15.0196L12.0073 14.1365V16.1418C12.0081 16.1568 12.0059 16.1718 12.0006 16.1859C11.9954 16.2 11.9874 16.2129 11.9771 16.2238C11.9667 16.2347 11.9543 16.2434 11.9405 16.2493C11.9266 16.2553 11.9118 16.2583 11.8967 16.2583C11.8817 16.2583 11.8668 16.2553 11.853 16.2493C11.8392 16.2434 11.8267 16.2347 11.8164 16.2238C11.806 16.2129 11.798 16.2 11.7928 16.1859C11.7876 16.1718 11.7853 16.1568 11.7861 16.1418C11.7861 16.1203 11.7834 13.9488 11.7834 13.6841H11.7846ZM12.4806 10.4894C12.3227 10.5258 12.1745 10.596 12.0462 10.6949C11.9178 10.7939 11.8124 10.9194 11.7369 11.0628V10.742L10.9851 10.92V12.9763C11.117 12.9243 11.2606 12.9097 11.4003 12.9341C11.5399 12.9586 11.6701 13.0211 11.7765 13.1149V11.7869C11.7765 11.469 11.9352 11.2149 12.161 11.1651C12.3315 11.1277 12.4734 11.1887 12.4734 11.4914V13.4287L13.265 13.2428V11.1938C13.265 10.6967 13.0743 10.3487 12.4803 10.4894H12.4806ZM23.9904 7.55721C23.8935 7.55727 23.7987 7.5286 23.7182 7.47482C23.6376 7.42105 23.5747 7.34458 23.5376 7.2551C23.5005 7.16561 23.4907 7.06713 23.5096 6.97209C23.5284 6.87706 23.575 6.78975 23.6435 6.7212C23.7119 6.65265 23.7992 6.60595 23.8942 6.58699C23.9892 6.56803 24.0877 6.57767 24.1772 6.61469C24.2668 6.65171 24.3433 6.71445 24.3972 6.79497C24.4511 6.87549 24.4798 6.97018 24.4799 7.06706C24.4797 7.19679 24.428 7.32114 24.3362 7.41285C24.2445 7.50456 24.1201 7.55615 23.9904 7.5563V7.55721ZM23.9904 6.63848C23.9057 6.63848 23.8229 6.66359 23.7525 6.71064C23.682 6.75768 23.6271 6.82455 23.5947 6.90279C23.5623 6.98103 23.5538 7.06713 23.5703 7.1502C23.5868 7.23327 23.6275 7.30958 23.6874 7.36949C23.7473 7.4294 23.8236 7.47021 23.9066 7.48677C23.9897 7.50333 24.0758 7.49489 24.154 7.46252C24.2323 7.43015 24.2992 7.37531 24.3463 7.30492C24.3934 7.23453 24.4186 7.15175 24.4186 7.06706C24.4185 6.9535 24.3733 6.84462 24.293 6.76429C24.2128 6.68396 24.1039 6.63872 23.9904 6.63848Z"
+                fill="#231F20"
+            />
+            <path
+                d="M23.8125 6.77576H24.0238C24.108 6.77576 24.1747 6.81771 24.1747 6.92908C24.1747 7.00665 24.1403 7.06641 24.0751 7.07667C24.1354 7.0827 24.1656 7.1153 24.1683 7.19951C24.1683 7.23723 24.1702 7.28432 24.172 7.32023C24.1719 7.33049 24.1745 7.34059 24.1795 7.34956C24.1845 7.35854 24.1916 7.36611 24.2003 7.37154H24.0929C24.0821 7.35607 24.0764 7.3376 24.0766 7.31872C24.073 7.28281 24.0736 7.24931 24.0724 7.20585C24.0724 7.14065 24.0509 7.11198 23.9851 7.11198H23.9094V7.37154H23.8137L23.8125 6.77576ZM23.9842 7.04196C23.9972 7.04316 24.0103 7.04145 24.0225 7.03697C24.0348 7.03248 24.0459 7.02533 24.055 7.01602C24.0641 7.00672 24.0711 6.99549 24.0753 6.98317C24.0796 6.97085 24.0811 6.95773 24.0796 6.94477C24.0796 6.88109 24.0524 6.84789 23.9891 6.84789H23.9094V7.04196H23.9842Z"
+                fill="#231F20"
+            />
+        </svg>
+    );
+};
+
+export default InteracIcon;
diff --git a/src/components/foundations/payment-icons/jcb-icon.tsx b/src/components/foundations/payment-icons/jcb-icon.tsx
new file mode 100644
index 0000000..c3451ee
--- /dev/null
+++ b/src/components/foundations/payment-icons/jcb-icon.tsx
@@ -0,0 +1,44 @@
+import type { SVGProps } from "react";
+
+const JCBIcon = (props: SVGProps<SVGSVGElement>) => {
+    return (
+        <svg width="34" height="24" viewBox="0 0 34 24" fill="none" {...props}>
+            <path
+                d="M4 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 20V4C0.5 2.067 2.067 0.5 4 0.5Z"
+                fill="white"
+            />
+            <path
+                d="M4 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 20V4C0.5 2.067 2.067 0.5 4 0.5Z"
+                className="stroke-border-secondary"
+            />
+            <path
+                d="M21.9818 11.9542C22.5131 11.9658 23.0473 11.9308 23.5765 11.9724C24.1123 12.0724 24.2415 12.8836 23.7654 13.1493C23.4406 13.3243 23.0547 13.2145 22.7025 13.2454H21.9818V11.9542ZM23.8837 10.4928C24.0017 10.9095 23.6001 11.2835 23.1988 11.2262H21.9818C21.9903 10.8333 21.9651 10.4068 21.9942 10.0346C22.4817 10.0484 22.9737 10.0066 23.4585 10.0564C23.6667 10.1088 23.841 10.28 23.8837 10.4928ZM26.8126 4.31448C26.8352 5.11012 26.8158 5.94781 26.8223 6.75959C26.8208 10.06 26.8255 13.3603 26.8198 16.6609C26.7984 17.8978 25.7022 18.9726 24.4739 18.9972C23.2443 19.0022 22.0146 18.998 20.7849 18.9994V14.0099C22.1247 14.003 23.4652 14.0239 24.8045 13.9994C25.4258 13.9604 26.1063 13.5505 26.1352 12.8668C26.2084 12.1801 25.561 11.7051 24.9463 11.6301C24.7101 11.624 24.717 11.5613 24.9463 11.5339C25.5326 11.4072 25.9929 10.8004 25.8204 10.1928C25.6735 9.55368 24.9671 9.30631 24.3795 9.30754C23.1815 9.2994 21.9832 9.30641 20.7852 9.30404C20.7929 8.37256 20.769 7.44008 20.798 6.50928C20.893 5.2947 22.0167 4.29307 23.2278 4.3148C24.4229 4.31462 25.6178 4.31462 26.8126 4.31457V4.31448Z"
+                fill="url(#paint0_linear_1107_66750)"
+            />
+            <path
+                d="M7.24671 6.63518C7.27731 5.40023 8.37818 4.33427 9.60494 4.31622C10.8299 4.31245 12.0551 4.31568 13.2801 4.31459C13.2767 8.44645 13.2867 12.5788 13.275 16.7104C13.2279 17.9303 12.139 18.976 10.9256 18.9976C9.69828 19.002 8.47083 18.9982 7.24348 18.9994V13.8417C8.43565 14.1234 9.68582 14.2432 10.902 14.0564C11.629 13.9395 12.4244 13.5824 12.6706 12.8282C12.8517 12.1831 12.7497 11.5041 12.7767 10.8419V9.30415H10.6719C10.6624 10.3212 10.6913 11.34 10.6567 12.3558C10.5999 12.9802 9.9816 13.3769 9.39272 13.3557C8.66241 13.3635 7.2152 12.8264 7.2152 12.8264C7.21157 10.9209 7.23639 8.53456 7.24671 6.63536V6.63518Z"
+                fill="url(#paint1_linear_1107_66750)"
+            />
+            <path
+                d="M14.0654 9.92439C13.9546 9.9479 14.0431 9.54701 14.0148 9.39494C14.0223 8.43341 13.999 7.47083 14.0276 6.50998C14.1223 5.29026 15.2547 4.28613 16.4707 4.31468H20.0517C20.0483 8.44654 20.0582 12.5789 20.0466 16.7105C19.9994 17.9304 18.9104 18.976 17.697 18.9977C16.4696 19.0023 15.2422 18.9984 14.0147 18.9996V13.3486C14.853 14.0364 15.9923 14.1435 17.0367 14.1453C17.824 14.145 18.6067 14.0237 19.3713 13.8421V12.8068C18.5097 13.2362 17.4968 13.509 16.5416 13.2623C15.8753 13.0965 15.3916 12.4525 15.4024 11.7649C15.3252 11.0498 15.7444 10.2949 16.4471 10.0823C17.3196 9.80915 18.2704 10.018 19.0883 10.3732C19.2635 10.4649 19.4413 10.5787 19.3713 10.2858V9.47209C18.0035 9.14667 16.5479 9.02692 15.1737 9.38094C14.776 9.49314 14.3885 9.6633 14.0654 9.92449V9.92439Z"
+                fill="url(#paint2_linear_1107_66750)"
+            />
+            <defs>
+                <linearGradient id="paint0_linear_1107_66750" x1="20.7437" y1="11.343" x2="26.7843" y2="11.343" gradientUnits="userSpaceOnUse">
+                    <stop stopColor="#58B03A" />
+                    <stop offset="1" stopColor="#55B330" />
+                </linearGradient>
+                <linearGradient id="paint1_linear_1107_66750" x1="7.11505" y1="11.7976" x2="13.1811" y2="11.7976" gradientUnits="userSpaceOnUse">
+                    <stop stopColor="#0F6EB6" />
+                    <stop offset="1" stopColor="#006DBA" />
+                </linearGradient>
+                <linearGradient id="paint2_linear_1107_66750" x1="14.0059" y1="11.4854" x2="20.0505" y2="11.4854" gradientUnits="userSpaceOnUse">
+                    <stop stopColor="#DE0D3D" />
+                    <stop offset="1" stopColor="#E30138" />
+                </linearGradient>
+            </defs>
+        </svg>
+    );
+};
+
+export default JCBIcon;
diff --git a/src/components/foundations/payment-icons/klarna-icon.tsx b/src/components/foundations/payment-icons/klarna-icon.tsx
new file mode 100644
index 0000000..8f8ee80
--- /dev/null
+++ b/src/components/foundations/payment-icons/klarna-icon.tsx
@@ -0,0 +1,15 @@
+import type { SVGProps } from "react";
+
+const KlarnaIcon = (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="#FEB4C7" />
+            <path
+                d="M13.6396 10.8447C14.0986 10.8447 14.5244 10.9945 14.877 11.249V10.9668H16.125V15.3779H14.877V15.0957C14.5244 15.3502 14.0986 15.5 13.6396 15.5C12.4252 15.5 11.4406 14.4581 11.4404 13.1729C11.4404 11.8874 12.425 10.8448 13.6396 10.8447ZM26.8047 10.8447C27.2637 10.8447 27.6895 10.9945 28.042 11.249V10.9668H29.29V15.3779H28.042V15.0957C27.6895 15.3502 27.2637 15.5 26.8047 15.5C25.5902 15.5 24.6057 14.4581 24.6055 13.1729C24.6055 11.8874 25.5901 10.8448 26.8047 10.8447ZM30.6143 13.8135C31.0466 13.8137 31.3975 14.185 31.3975 14.6426C31.3972 15.0999 31.0464 15.4705 30.6143 15.4707C30.1819 15.4707 29.8313 15.1 29.8311 14.6426C29.8311 14.1848 30.1818 13.8135 30.6143 13.8135ZM5.26855 9V15.3799H3.88477V9H5.26855ZM8.72266 9C8.72266 10.3811 8.21382 11.6661 7.30762 12.6211L9.21973 15.3799H7.51172L5.43359 12.3818L5.96973 11.957C6.85897 11.2521 7.36914 10.174 7.36914 9H8.72266ZM10.9287 15.3779H9.62207V9.00098H10.9287V15.3779ZM18.0547 11.541C18.3049 11.1965 18.7716 10.9668 19.2783 10.9668V12.251C19.2733 12.2509 19.2677 12.25 19.2627 12.25C18.769 12.2502 18.0577 12.6238 18.0576 13.3184V15.3779H16.7773V10.9668H18.0547V11.541ZM22.3877 10.8486C23.3929 10.8487 24.1641 11.5468 24.1641 12.5732V15.3779H22.918V13.0508C22.918 12.4074 22.6021 12.0605 22.0537 12.0605C21.5421 12.0606 21.1173 12.3891 21.1172 13.0596V15.3779H19.8594V10.9668H21.1016V11.4639C21.417 11.012 21.8892 10.8486 22.3877 10.8486ZM13.7422 12.0381C13.1177 12.0381 12.6113 12.5461 12.6113 13.1729C12.6115 13.7995 13.1179 14.3076 13.7422 14.3076C14.3666 14.3076 14.8729 13.7995 14.873 13.1729C14.873 12.5461 14.3667 12.0381 13.7422 12.0381ZM26.9072 12.0381C26.2827 12.0381 25.7764 12.5461 25.7764 13.1729C25.7766 13.7995 26.2828 14.3076 26.9072 14.3076C27.5316 14.3076 28.0379 13.7995 28.0381 13.1729C28.0381 12.5461 27.5317 12.0381 26.9072 12.0381Z"
+                fill="#17120F"
+            />
+        </svg>
+    );
+};
+
+export default KlarnaIcon;
diff --git a/src/components/foundations/payment-icons/lightcoin-icon.tsx b/src/components/foundations/payment-icons/lightcoin-icon.tsx
new file mode 100644
index 0000000..e438072
--- /dev/null
+++ b/src/components/foundations/payment-icons/lightcoin-icon.tsx
@@ -0,0 +1,24 @@
+import type { SVGProps } from "react";
+
+const LightcoinIcon = (props: SVGProps<SVGSVGElement>) => {
+    return (
+        <svg width="34" height="24" viewBox="0 0 34 24" fill="none" {...props}>
+            <path
+                d="M4 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 20V4C0.5 2.067 2.067 0.5 4 0.5Z"
+                fill="white"
+            />
+            <path
+                d="M4 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 20V4C0.5 2.067 2.067 0.5 4 0.5Z"
+                className="stroke-border-secondary"
+            />
+            <path
+                fillRule="evenodd"
+                clipRule="evenodd"
+                d="M25 12C25 16.4183 21.4183 20 17 20C12.5817 20 9 16.4183 9 12C9 7.58172 12.5817 4 17 4C21.4183 4 25 7.58172 25 12ZM14.8284 12.594L15.9562 8.3638H18.4004L17.5543 11.6541L18.6825 11.1841L18.4004 12.2179L17.2722 12.594L16.7083 14.6622H20.7507L20.3746 16.166H13.888L14.5462 13.6279L13.6063 14.0039L13.888 12.9701L14.8284 12.594Z"
+                fill="#A5A8A9"
+            />
+        </svg>
+    );
+};
+
+export default LightcoinIcon;
diff --git a/src/components/foundations/payment-icons/maestro-icon.tsx b/src/components/foundations/payment-icons/maestro-icon.tsx
new file mode 100644
index 0000000..c166d21
--- /dev/null
+++ b/src/components/foundations/payment-icons/maestro-icon.tsx
@@ -0,0 +1,32 @@
+import type { SVGProps } from "react";
+
+const MaestroIcon = (props: SVGProps<SVGSVGElement>) => {
+    return (
+        <svg width="34" height="24" viewBox="0 0 34 24" fill="none" {...props}>
+            <path
+                d="M4 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 20V4C0.5 2.067 2.067 0.5 4 0.5Z"
+                fill="white"
+            />
+            <path
+                d="M4 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 20V4C0.5 2.067 2.067 0.5 4 0.5Z"
+                className="stroke-border-secondary"
+            />
+            <path
+                d="M19.2576 11.7058C19.2576 15.4092 16.2898 18.4115 12.6288 18.4115C8.96782 18.4115 6 15.4092 6 11.7058C6 8.00227 8.96782 5 12.6288 5C16.2898 5 19.2576 8.00227 19.2576 11.7058Z"
+                fill="#ED0006"
+            />
+            <path
+                d="M27.8572 11.7058C27.8572 15.4092 24.8894 18.4115 21.2284 18.4115C17.5674 18.4115 14.5996 15.4092 14.5996 11.7058C14.5996 8.00227 17.5674 5 21.2284 5C24.8894 5 27.8572 8.00227 27.8572 11.7058Z"
+                fill="#0099DF"
+            />
+            <path
+                fillRule="evenodd"
+                clipRule="evenodd"
+                d="M16.9286 6.60193C18.3539 7.83189 19.2576 9.66205 19.2576 11.7057C19.2576 13.7494 18.3539 15.5796 16.9286 16.8096C15.5034 15.5796 14.5996 13.7494 14.5996 11.7057C14.5996 9.66205 15.5034 7.83189 16.9286 6.60193Z"
+                fill="#6C6BBD"
+            />
+        </svg>
+    );
+};
+
+export default MaestroIcon;
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/payoneer-icon.tsx b/src/components/foundations/payment-icons/payoneer-icon.tsx
new file mode 100644
index 0000000..d0538e0
--- /dev/null
+++ b/src/components/foundations/payment-icons/payoneer-icon.tsx
@@ -0,0 +1,30 @@
+import type { SVGProps } from "react";
+
+const PayoneerIcon = (props: SVGProps<SVGSVGElement>) => {
+    return (
+        <svg width="34" height="24" viewBox="0 0 34 24" fill="none" {...props}>
+            <path
+                d="M4 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 20V4C0.5 2.067 2.067 0.5 4 0.5Z"
+                fill="white"
+            />
+            <path
+                d="M4 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 20V4C0.5 2.067 2.067 0.5 4 0.5Z"
+                className="stroke-border-secondary"
+            />
+            <path
+                fillRule="evenodd"
+                clipRule="evenodd"
+                d="M25.0107 11.6877C25.4954 11.1732 26.0903 10.9907 26.7764 11.1799C27.195 11.2967 27.4191 11.5995 27.4443 12.0256C27.4695 12.4424 27.2802 12.7556 26.8867 12.9387C26.4903 13.1217 26.0685 13.15 25.6406 13.1594C25.5557 13.1563 25.4674 13.1565 25.373 13.1565C25.3449 13.4656 25.5649 13.702 25.9014 13.7463C26.2161 13.7842 26.5186 13.7374 26.8145 13.6301C26.8648 13.6112 26.9124 13.5919 26.9785 13.5667C26.9974 13.7717 27.0228 13.9641 27.0322 14.1565C27.0354 14.1944 26.9907 14.255 26.9561 14.2708C26.421 14.4917 25.87 14.567 25.3066 14.4124C24.8002 14.2734 24.5357 13.9045 24.4727 13.3997C24.394 12.7524 24.5606 12.1676 25.0107 11.6877ZM9.93262 11.1067C10.2001 11.1225 10.4649 11.186 10.7324 11.2239C10.8393 11.2397 10.8547 11.2995 10.8359 11.3909C10.7163 12.016 10.591 12.6388 10.4902 13.2639C10.4368 13.5953 10.4205 13.9362 10.3984 14.2708C10.3921 14.3716 10.3673 14.4125 10.2637 14.4094C10.0685 14.4031 9.87289 14.4031 9.67773 14.4094C9.57722 14.4125 9.54232 14.3744 9.55176 14.2766C9.56433 14.1252 9.57064 13.9673 9.58008 13.8001C9.42274 13.9642 9.29722 14.132 9.13672 14.2551C8.80634 14.5107 8.42857 14.5675 8.04785 14.3909C7.67024 14.2173 7.51582 13.8793 7.5 13.4817C7.46538 12.645 7.75802 11.9528 8.45996 11.4729C8.90047 11.17 9.40719 11.0783 9.93262 11.1067ZM22.0361 11.5266C22.5051 11.1257 23.0563 11 23.6543 11.1799C24.0539 11.2999 24.2773 11.5995 24.3057 12.0129C24.334 12.4201 24.1578 12.7327 23.7803 12.9221C23.4844 13.0705 23.166 13.1249 22.8418 13.1438C22.6405 13.1532 22.4361 13.1438 22.2285 13.1438C22.2066 13.472 22.4301 13.7053 22.7637 13.7463C23.0877 13.7842 23.3992 13.7341 23.7012 13.6174C23.7325 13.6049 23.7673 13.5919 23.8018 13.5793C23.808 13.5762 23.8178 13.5793 23.8428 13.5793C23.8616 13.7717 23.8841 13.9641 23.8936 14.1565C23.8967 14.1944 23.8522 14.255 23.8145 14.2708C23.2889 14.4853 22.7443 14.5612 22.1904 14.4192C21.6743 14.2866 21.3906 13.9137 21.334 13.3928C21.2522 12.6572 21.4664 12.0128 22.0361 11.5266ZM15.873 11.1194C16.2759 11.0752 16.6539 11.1261 16.9844 11.3723C17.2989 11.6059 17.4526 11.9343 17.4746 12.3225C17.4998 12.7266 17.431 13.112 17.2422 13.4719C16.8866 14.1411 16.3169 14.4658 15.7441 14.4817C14.9101 14.4817 14.4339 14.1729 14.2607 13.6174C13.9743 12.7018 14.5258 11.2709 15.873 11.1194ZM20.3203 11.1233C20.6603 11.1801 20.8968 11.4291 20.9346 11.7795C20.9786 12.171 20.8966 12.5501 20.8242 12.929C20.7361 13.3867 20.6508 13.8445 20.5596 14.2991C20.5501 14.3401 20.5032 14.4002 20.4717 14.4036C20.201 14.4099 19.9299 14.4067 19.6592 14.4036C19.6467 14.4035 19.6342 14.3936 19.6094 14.3811C19.6597 14.1192 19.7096 13.8541 19.7568 13.5891C19.8292 13.1819 19.899 12.7775 19.9619 12.3704C19.9745 12.3009 19.9675 12.2279 19.958 12.1584C19.9328 11.9154 19.7534 11.8046 19.5205 11.8772C19.2941 11.9499 19.1589 12.1269 19.0488 12.3225C18.8852 12.6097 18.8281 12.9285 18.7715 13.2473C18.7085 13.5978 18.6493 13.9457 18.5801 14.2961C18.5706 14.3372 18.5227 14.4004 18.4912 14.4036C18.2143 14.413 17.9343 14.4094 17.626 14.4094C17.8337 13.3234 18.0285 12.2592 18.2236 11.1858H19.0234C19.0109 11.3562 18.9981 11.5205 18.9824 11.6877C19.0737 11.6025 19.1562 11.5211 19.2412 11.4485C19.5528 11.177 19.908 11.057 20.3203 11.1233ZM4.91895 10.0081C5.50757 9.91966 6.09986 9.85674 6.68848 10.0051C7.20139 10.1315 7.56032 10.495 7.62012 10.9211C7.74266 11.7703 7.24795 12.4486 6.51465 12.6917C6.12766 12.8178 5.73453 12.8496 5.33496 12.8118C5.24058 12.8023 5.21203 12.8277 5.19629 12.9192C5.11132 13.3832 5.0229 13.8441 4.93164 14.3049C4.92538 14.3426 4.89119 14.4029 4.86914 14.4036C4.5827 14.4099 4.30218 14.4065 4 14.4065C4.04407 14.1697 4.07898 13.9515 4.12305 13.7336C4.34963 12.5373 4.57908 11.3441 4.80566 10.1477C4.82139 10.072 4.84351 10.0207 4.91895 10.0081ZM30 11.1106C29.9402 11.4104 29.8899 11.6886 29.8301 11.9631C29.8233 11.9852 29.7828 12.0127 29.7578 12.0159C29.1379 12.098 28.8769 12.3196 28.7227 12.9573C28.6157 13.3992 28.5434 13.8538 28.4521 14.302C28.4459 14.3399 28.4107 14.3997 28.3887 14.3997C28.0991 14.4091 27.8096 14.4065 27.498 14.4065C27.539 14.1729 27.5763 13.961 27.6172 13.7463C27.7808 12.9287 27.9483 12.1112 28.0176 11.2747C28.0207 11.24 28.0675 11.1834 28.0928 11.1799C28.3319 11.1736 28.5712 11.177 28.8291 11.177C28.8102 11.401 28.795 11.6124 28.7793 11.8206C29.0688 11.3945 29.4023 11.0477 30 11.1106ZM15.8574 11.8333C15.6938 11.8711 15.5712 11.9722 15.4736 12.1047C15.2564 12.4047 15.1676 12.7426 15.1582 13.1057C15.1582 13.1528 15.1551 13.2031 15.1582 13.2502C15.1834 13.5817 15.4198 13.7933 15.7314 13.7649C15.9046 13.7491 16.0404 13.6582 16.1475 13.5256C16.4276 13.1689 16.5339 12.7579 16.4961 12.3127C16.4645 11.9498 16.191 11.7575 15.8574 11.8333ZM9.80078 11.8489C9.49547 11.7636 9.2404 11.8242 9.02637 12.0042C8.62371 12.3451 8.44104 12.7867 8.47559 13.3137C8.48503 13.4747 8.54784 13.63 8.71777 13.6995C8.88775 13.7689 9.0426 13.7184 9.1748 13.6047C9.25347 13.5353 9.3291 13.4558 9.38574 13.3674C9.68455 12.9097 9.69064 12.3728 9.80078 11.8489ZM26.3398 11.802C25.9684 11.701 25.5058 12.0416 25.4648 12.4836C25.6662 12.471 25.8554 12.4679 26.041 12.4426C26.1668 12.4268 26.293 12.3888 26.4062 12.3352C26.5288 12.2815 26.5882 12.1673 26.5693 12.0286C26.5503 11.8963 26.4624 11.8336 26.3398 11.802ZM23.1885 11.802C22.8139 11.7104 22.3697 12.0384 22.3193 12.4583C22.5616 12.5087 23.0588 12.4488 23.251 12.3479C23.3831 12.2785 23.4497 12.1679 23.4277 12.0354C23.4057 11.8997 23.3143 11.8336 23.1885 11.802ZM6.35449 10.7219C6.13113 10.643 5.90153 10.6591 5.67188 10.6907C5.64358 10.6938 5.60499 10.7375 5.59863 10.7659C5.51994 11.1795 5.44165 11.5967 5.35352 12.0608C5.54552 12.0608 5.71891 12.0758 5.88574 12.0569C6.21293 12.0221 6.47417 11.8742 6.62207 11.5618C6.78889 11.2082 6.66924 10.8324 6.35449 10.7219Z"
+                fill="black"
+            />
+            <path
+                fillRule="evenodd"
+                clipRule="evenodd"
+                d="M19.2835 7.37688C19.2516 7.36845 19.2198 7.36001 19.1879 7.35291C19.0903 7.35291 18.9927 7.35291 18.8889 7.35606C18.8534 7.36318 18.8179 7.37094 18.7822 7.37876C18.7386 7.38829 18.6946 7.39791 18.6496 7.40658C18.168 7.49814 17.7148 7.66547 17.2773 7.88648C16.3298 8.36638 15.4799 8.98836 14.7182 9.724C14.2114 10.2102 13.7203 10.7185 13.245 11.2395C12.4109 12.1551 11.6964 13.1622 11.1266 14.2673C10.8339 14.8387 10.5695 15.4228 10.4499 16.0574C10.4279 16.1743 10.4656 16.31 10.5034 16.4268C10.5191 16.4742 10.6073 16.5089 10.6671 16.5279C10.6828 16.5342 10.73 16.4552 10.7521 16.411C10.7599 16.3939 10.7679 16.3764 10.7761 16.3584C10.9128 16.059 11.0976 15.654 11.258 15.3859C11.598 14.8176 11.8664 14.3778 12.2472 13.8379C12.8579 12.9696 13.5714 12.1178 14.3205 11.3663C15.0288 10.656 15.738 10.0208 16.6288 9.54088C17.038 9.32303 17.4567 9.10833 17.8848 8.93153C18.6245 8.62528 19.3957 8.4169 20.1889 8.30008C20.2739 8.28745 20.3872 8.22115 20.4155 8.15169C20.4407 8.08854 20.3809 7.96857 20.3211 7.90858C20.0787 7.65916 19.7954 7.46972 19.4429 7.41289C19.3898 7.405 19.3366 7.39094 19.2835 7.37688ZM12.0773 11.6846C12.2283 11.2742 12.3039 10.848 12.3133 10.406C12.3091 10.3586 12.3056 10.3112 12.3021 10.2639C12.2951 10.1692 12.2882 10.0745 12.2756 9.97973C12.1906 9.24725 11.8758 8.62527 11.3753 8.0917C11.3155 8.03171 11.2337 7.98435 11.1518 7.95594C11.07 7.92437 11.0165 7.97172 11.0228 8.06644C11.0229 8.06844 11.0231 8.07044 11.0232 8.07245C11.0294 8.15268 11.0357 8.23578 11.0511 8.31586C11.0732 8.44203 11.0952 8.56835 11.1172 8.69475C11.1953 9.14405 11.2736 9.59442 11.3596 10.0429C11.4446 10.4944 11.539 10.9427 11.6397 11.3879C11.6743 11.5299 11.731 11.672 11.8003 11.8046C11.8538 11.9057 11.9293 11.8962 11.9986 11.8046C12.03 11.7667 12.0615 11.7288 12.0773 11.6846Z"
+                fill="#FC461E"
+            />
+        </svg>
+    );
+};
+
+export default PayoneerIcon;
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/paysafe-icon.tsx b/src/components/foundations/payment-icons/paysafe-icon.tsx
new file mode 100644
index 0000000..e8bf322
--- /dev/null
+++ b/src/components/foundations/payment-icons/paysafe-icon.tsx
@@ -0,0 +1,30 @@
+import type { SVGProps } from "react";
+
+const PaysafeIcon = (props: SVGProps<SVGSVGElement>) => {
+    return (
+        <svg width="34" height="24" viewBox="0 0 34 24" fill="none" {...props}>
+            <path
+                d="M4 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 20V4C0.5 2.067 2.067 0.5 4 0.5Z"
+                fill="white"
+            />
+            <path
+                d="M4 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 20V4C0.5 2.067 2.067 0.5 4 0.5Z"
+                className="stroke-border-secondary"
+            />
+            <path
+                d="M29.2563 10.4743C29.6674 10.4743 30.0008 10.141 30.0008 9.72976C30.0008 9.31857 29.6674 8.98523 29.2563 8.98523C28.8451 8.98523 28.5117 9.31857 28.5117 9.72976C28.5117 10.141 28.8451 10.4743 29.2563 10.4743Z"
+                fill="#7887E6"
+            />
+            <path
+                d="M29.2563 12.8051C29.6674 12.8051 30.0008 12.4718 30.0008 12.0606C30.0008 11.6494 29.6674 11.316 29.2563 11.316C28.8451 11.316 28.5117 11.6494 28.5117 12.0606C28.5117 12.4718 28.8451 12.8051 29.2563 12.8051Z"
+                fill="#FF5073"
+            />
+            <path
+                d="M8.99121 16.949L9.4209 15.4451H10.0537C9.7193 16.4118 9.39279 17.3796 9.0625 18.3386H8.46582L8.80078 17.4744H8.60938C8.39434 16.7979 8.18348 16.1216 7.96484 15.4451H8.60938L8.99121 16.949ZM7.08887 15.3972C7.55851 15.3972 7.84847 15.6046 7.84863 16.0623V17.4744H7.26855L7.23242 17.2712C7.12077 17.3947 6.96954 17.5222 6.71484 17.5222C6.40059 17.5222 6.08223 17.3195 6.08203 16.9138C6.08214 16.4761 6.3647 16.185 7.21191 16.2009V16.0662C7.21178 15.911 7.08067 15.8591 6.93359 15.8591C6.72705 15.8591 6.48459 15.9507 6.36914 16.0027L6.19336 15.6404C6.38424 15.521 6.69488 15.3972 7.08887 15.3972ZM14.0889 15.3972C14.5584 15.3972 14.8485 15.6046 14.8486 16.0623V17.4744H14.2676L14.2314 17.2712C14.1198 17.3947 13.9694 17.5222 13.7148 17.5222C13.4006 17.5222 13.0822 17.3195 13.082 16.9138C13.0821 16.4761 13.3646 16.185 14.2119 16.2009V16.0662C14.2118 15.911 14.0806 15.8592 13.9336 15.8591C13.7268 15.8591 13.4835 15.9507 13.3682 16.0027L13.1934 15.6404C13.3843 15.521 13.6948 15.3972 14.0889 15.3972ZM17.5625 15.3972C17.9962 15.3973 18.4257 15.6324 18.4258 16.3484V16.5867H17.2246C17.2565 16.9211 17.4589 17.0564 17.7295 17.0564C17.9327 17.0564 18.1636 16.9734 18.2393 16.9255L18.418 17.323C18.2908 17.4187 17.96 17.5222 17.6338 17.5222C16.9732 17.5222 16.5596 17.112 16.5596 16.4714C16.5597 15.8469 16.9976 15.3972 17.5625 15.3972ZM16.0068 15.4451H16.3965V15.8796H16.0068V16.7791C16.0069 16.9855 16.0824 17.0496 16.2217 17.0496H16.3965V17.4753H15.9424V17.4744C15.7514 17.4743 15.374 17.4497 15.374 16.9207V15.8787H15.0635V15.4451H15.374V15.0593L16.0068 14.8406V15.4451ZM5.05957 14.7283C5.68776 14.7284 5.98605 15.0946 5.98633 15.5798C5.98633 16.1405 5.58883 16.4713 5.05957 16.4714H4.65723V17.4744H4.00488V14.7283H5.05957ZM11.8564 17.0007H12.9033V17.4744H11.2041V14.7292H11.8564V17.0007ZM19.9385 15.99C19.9025 15.9823 19.819 15.9822 19.7793 15.9822C19.6123 15.9822 19.433 16.0495 19.3213 16.1609V17.4744H18.6846V15.4451H19.29V15.8152C19.4213 15.5647 19.6643 15.3972 19.9385 15.3972V15.99ZM7.06934 16.5906C6.815 16.5906 6.69557 16.7025 6.69531 16.8689C6.69531 17.0161 6.80293 17.1082 6.96191 17.1082C7.06122 17.1082 7.1532 17.0718 7.21289 17.0281V16.6023C7.16093 16.5982 7.12078 16.5906 7.06934 16.5906ZM14.0693 16.5906C13.8149 16.5906 13.6956 16.7025 13.6953 16.8689C13.6953 17.0161 13.8029 17.1082 13.9619 17.1082C14.061 17.1081 14.1523 17.0717 14.2119 17.0281V16.6023C14.1602 16.5982 14.1206 16.5906 14.0693 16.5906ZM17.5547 15.8425C17.3798 15.8425 17.2489 15.9823 17.2246 16.2527H17.8408C17.8407 15.9782 17.7218 15.8425 17.5547 15.8425ZM4.6582 15.9939H4.98828C5.2068 15.9938 5.3534 15.8546 5.35352 15.6042C5.35343 15.3698 5.22275 15.2059 4.98828 15.2058H4.6582V15.9939ZM20.5742 14.6824H20.3789V15.1628H20.1885V14.6824H19.9824V14.5476H20.5527L20.5742 14.6824ZM21.0049 14.9841C21.0398 14.8383 21.0753 14.6945 21.1123 14.5486H21.3516L21.4004 15.1628H21.2305L21.208 14.7175C21.1684 14.8661 21.1286 15.0142 21.0869 15.1628H20.9199L20.7998 14.7175L20.7764 15.1628H20.6064C20.6249 14.9589 20.6413 14.7526 20.6572 14.5486H20.8965L21.0049 14.9841ZM12.041 9.07104L12.9443 11.2517L13.7314 9.07104H14.8691L13.0205 13.7429H11.9307L12.4131 12.5476L10.8691 9.07104H12.041ZM19.8838 8.98511C20.7281 8.98511 21.2505 9.35723 21.25 10.1794V12.7195H20.1055V12.5574C19.877 12.7009 19.578 12.8054 19.3027 12.8054C18.6051 12.8054 18.0742 12.2792 18.0742 11.6531C18.0742 11.012 18.5289 10.3183 20.1064 10.4304V10.1863C20.1062 9.90775 19.8698 9.81424 19.6055 9.81421C19.2336 9.81421 18.7973 9.97887 18.5898 10.072L18.2744 9.42163C18.6175 9.20711 19.176 8.9852 19.8838 8.98511ZM26.0029 8.98511C27.0185 8.98511 27.7664 9.76915 27.7666 10.8386V11.1248H25.3945C25.4125 11.312 25.4612 11.4652 25.5332 11.5867L25.5342 11.5886C25.5459 11.6075 25.5585 11.6259 25.5713 11.6433C25.579 11.654 25.5865 11.6643 25.5947 11.6746C25.5997 11.6806 25.6048 11.6871 25.6104 11.6931C25.6242 11.7096 25.6389 11.7261 25.6543 11.741L25.6562 11.7419C25.6943 11.7785 25.7369 11.8118 25.7842 11.8406C25.7851 11.841 25.7857 11.8411 25.7861 11.8416C25.8072 11.8544 25.8304 11.8664 25.8535 11.8777C25.858 11.8797 25.8622 11.8815 25.8662 11.8835C25.8801 11.8902 25.8952 11.8964 25.9102 11.9021C25.9235 11.9072 25.9369 11.9121 25.9502 11.9167C25.9599 11.9198 25.9703 11.9225 25.9805 11.9255C25.9995 11.9307 26.0185 11.9365 26.0381 11.9412C26.0447 11.9427 26.0519 11.9435 26.0586 11.9451C26.0775 11.9491 26.0968 11.9518 26.1162 11.9548C26.1216 11.9558 26.1265 11.9573 26.1318 11.9578C26.156 11.9609 26.1814 11.9631 26.2061 11.9646C26.2121 11.9651 26.2176 11.9651 26.2236 11.9656C26.2499 11.9671 26.2764 11.9685 26.3037 11.9685C26.6145 11.9685 26.9616 11.8812 27.3037 11.6873L27.6221 12.3962C27.1174 12.7459 26.4627 12.8054 26.1318 12.8054C24.9443 12.8054 24.2002 12.0683 24.2002 10.9167C24.2002 9.7936 24.9873 8.98519 26.0029 8.98511ZM9.43262 8.98511C10.2769 8.98515 10.7988 9.35677 10.7988 10.1794V12.7195H9.65332V12.5574C9.42492 12.7008 9.12571 12.8044 8.85059 12.8044C8.1531 12.8042 7.62305 12.2782 7.62305 11.6521C7.62327 11.0111 8.07713 10.3173 9.6543 10.4294V10.1863C9.6543 9.9074 9.41779 9.81421 9.15332 9.81421C8.78137 9.81429 8.345 9.97891 8.1377 10.072L7.82324 9.42065C8.16647 9.20616 8.72486 8.98511 9.43262 8.98511ZM16.4473 8.98413C16.9122 8.98413 17.3704 9.12693 17.6709 9.2771L17.3486 10.0291C17.1197 9.92928 16.8052 9.82107 16.5049 9.82104C16.2188 9.82104 16.0469 9.92849 16.0469 10.1003C16.0471 10.5864 17.7354 10.3868 17.7354 11.5886C17.7351 12.3756 17.0193 12.8044 16.1895 12.8044C15.7244 12.8044 15.2239 12.6974 14.7949 12.4685L15.1602 11.7322C15.4174 11.8612 15.7469 11.9753 16.0898 11.9753C16.4262 11.9753 16.626 11.8747 16.626 11.6746C16.6257 11.1387 14.91 11.3602 14.9102 10.1433C14.9102 9.37111 15.5959 8.98425 16.4473 8.98413ZM5.89551 7.78296C7.02594 7.78296 7.5625 8.44156 7.5625 9.31421C7.56241 10.3226 6.84682 10.9167 5.89551 10.9167H5.17285V12.7195H4V7.78296H5.89551ZM23.5957 7.48999C23.8034 7.48999 23.9823 7.51862 24.1396 7.56128V8.37671C24.047 8.34844 23.9112 8.3269 23.8037 8.3269C23.453 8.32701 23.3242 8.55567 23.3242 8.87769V9.07104H24.1113V9.85034H23.3242V12.7195H22.1865V9.85034H21.5781V9.07104H22.1865V8.92065C22.1865 8.05533 22.6729 7.49015 23.5957 7.48999ZM9.69629 11.1521C9.00367 11.0375 8.76682 11.3313 8.7666 11.6316C8.7666 11.896 8.96007 12.0612 9.24609 12.0613C9.42515 12.0613 9.58978 11.9964 9.69629 11.9177V11.1521ZM20.1055 11.1521C19.4128 11.0374 19.176 11.3313 19.1758 11.6316C19.1758 11.8961 19.3692 12.0613 19.6553 12.0613C19.8342 12.0613 19.9979 11.9964 20.1055 11.9177V11.1521ZM26.0029 9.78589C25.6881 9.78597 25.4377 10.0365 25.3945 10.5232H26.6113C26.5681 10.037 26.3178 9.78589 26.0029 9.78589ZM5.17285 8.64136V10.0574H5.7666C6.1772 10.0574 6.44801 9.78544 6.42383 9.29663C6.40511 8.92692 6.09 8.64143 5.71973 8.64136H5.17285Z"
+                fill="#2D2341"
+            />
+        </svg>
+    );
+};
+
+export default PaysafeIcon;
diff --git a/src/components/foundations/payment-icons/qiwi-icon.tsx b/src/components/foundations/payment-icons/qiwi-icon.tsx
new file mode 100644
index 0000000..0a52557
--- /dev/null
+++ b/src/components/foundations/payment-icons/qiwi-icon.tsx
@@ -0,0 +1,22 @@
+import type { SVGProps } from "react";
+
+const QiwiIcon = (props: SVGProps<SVGSVGElement>) => {
+    return (
+        <svg width="34" height="24" viewBox="0 0 34 24" fill="none" {...props}>
+            <path
+                d="M4 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 20V4C0.5 2.067 2.067 0.5 4 0.5Z"
+                fill="white"
+            />
+            <path
+                d="M4 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 20V4C0.5 2.067 2.067 0.5 4 0.5Z"
+                className="stroke-border-secondary"
+            />
+            <path
+                d="M16.5801 4.5C20.378 4.5 23.4453 7.65779 23.4453 11.5674C23.4453 12.883 23.0803 14.1233 22.4961 15.1758C22.4596 15.2134 22.4229 15.2138 22.4229 15.1387C22.1672 13.4095 21.1451 12.4697 19.6846 12.1689C19.5385 12.1314 19.5382 12.0557 19.7207 12.0557C20.1954 12.0181 20.8165 12.0186 21.1816 12.0938C21.2182 11.9058 21.2178 11.7177 21.2178 11.5674C21.2178 9.01111 19.1727 6.90625 16.6895 6.90625C14.2064 6.90645 12.1611 9.01123 12.1611 11.5674C12.1612 14.1235 14.2064 16.2283 16.6895 16.2285H16.9092C16.8362 15.8151 16.7994 15.4012 16.8359 14.9502C16.836 14.6499 16.9091 14.6124 17.0186 14.8379C17.6393 15.9655 18.5521 16.9429 20.3047 17.3564C21.7289 17.6948 23.1534 18.0711 24.7236 20.0635C24.8695 20.2513 24.6509 20.4389 24.5049 20.2891C22.9346 18.8606 21.51 18.3711 20.1953 18.3711C18.5521 18.4087 17.566 18.5967 16.5801 18.5967C12.7823 18.5966 9.71487 15.4393 9.71484 11.5674C9.71484 7.69544 12.7823 4.5001 16.5801 4.5ZM20.0498 15.627C20.1959 15.627 20.3789 15.7022 20.5615 15.8525C20.8536 16.1157 20.9625 16.417 20.8164 16.6426C20.7432 16.7552 20.561 16.8301 20.415 16.8301C20.2326 16.8301 20.05 16.7552 19.9404 16.6426C19.6483 16.3794 19.5752 16.0029 19.7578 15.7773C19.7945 15.7023 19.904 15.627 20.0498 15.627ZM21.5469 14.4619C21.8024 14.5748 21.9121 14.9507 21.9121 15.1387C21.9486 15.4394 21.8752 15.5898 21.7656 15.5898C21.6561 15.5897 21.5102 15.4768 21.3643 15.2139C21.2182 14.9508 21.1448 14.6875 21.2178 14.5371C21.3273 14.4619 21.4373 14.4243 21.5469 14.4619Z"
+                fill="#F28A1A"
+            />
+        </svg>
+    );
+};
+
+export default QiwiIcon;
diff --git a/src/components/foundations/payment-icons/razorpay-icon.tsx b/src/components/foundations/payment-icons/razorpay-icon.tsx
new file mode 100644
index 0000000..29ee68d
--- /dev/null
+++ b/src/components/foundations/payment-icons/razorpay-icon.tsx
@@ -0,0 +1,52 @@
+import type { SVGProps } from "react";
+
+const RazorpayIcon = (props: SVGProps<SVGSVGElement>) => {
+    return (
+        <svg width="34" height="24" viewBox="0 0 34 24" fill="none" {...props}>
+            <path
+                d="M4 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 20V4C0.5 2.067 2.067 0.5 4 0.5Z"
+                fill="white"
+            />
+            <path
+                d="M4 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 20V4C0.5 2.067 2.067 0.5 4 0.5Z"
+                className="stroke-border-secondary"
+            />
+            <path
+                d="M10.88 11.2005C10.9664 10.8767 10.9307 10.6289 10.7728 10.4572C10.6149 10.2855 10.3388 10.199 9.94461 10.1979H8.43405L7.52344 13.6144H8.25479L8.62306 12.2314H9.10603C9.19439 12.227 9.28243 12.245 9.36191 12.2839C9.39418 12.3041 9.42107 12.3317 9.44034 12.3645C9.45961 12.3973 9.47067 12.4343 9.47258 12.4723L9.60455 13.6144H10.3884L10.2604 12.5535C10.2351 12.3167 10.1261 12.1773 9.93711 12.1352C10.1658 12.0721 10.3745 11.9515 10.5434 11.7848C10.7066 11.6242 10.8229 11.4222 10.88 11.2005ZM10.1797 11.2126C10.1482 11.3527 10.0624 11.4746 9.94113 11.5515C9.82585 11.6241 9.65759 11.6598 9.44375 11.6598H8.76486L9.00344 10.7672H9.68295C9.89617 10.7672 10.0426 10.8035 10.1233 10.8755C10.2039 10.9476 10.2212 11.0617 10.1797 11.2126Z"
+                fill="#0C2651"
+            />
+            <path
+                d="M12.9906 11.1723L12.8978 11.518C12.8591 11.3945 12.7773 11.2889 12.6672 11.2207C12.5389 11.1437 12.3909 11.1056 12.2414 11.1112C12.0315 11.1113 11.8253 11.1661 11.6431 11.2702C11.4448 11.3839 11.2736 11.5392 11.1411 11.7255C10.9952 11.9268 10.8882 12.1537 10.8259 12.3945C10.7605 12.6088 10.7467 12.8354 10.7855 13.056C10.8152 13.2303 10.9085 13.3873 11.0472 13.4968C11.198 13.6047 11.3807 13.6586 11.5659 13.6501C11.7313 13.6505 11.8948 13.6151 12.0452 13.5464C12.1956 13.4776 12.3293 13.3772 12.4373 13.2519L12.3416 13.6127H13.0545L13.7046 11.1723H12.9906ZM12.6667 12.3824C12.6226 12.5811 12.5245 12.7638 12.3831 12.9102C12.3223 12.9698 12.2501 13.0167 12.171 13.0481C12.0918 13.0796 12.0072 13.095 11.9221 13.0935C11.7405 13.0935 11.6183 13.0358 11.5526 12.9131C11.487 12.7904 11.4852 12.6192 11.5452 12.3945C11.5907 12.194 11.6904 12.0099 11.8333 11.862C11.8944 11.8007 11.9671 11.7521 12.0471 11.7192C12.1272 11.6862 12.213 11.6695 12.2996 11.6702C12.4771 11.6702 12.5981 11.7318 12.6603 11.8546C12.7226 11.9773 12.7289 12.1507 12.6678 12.3818L12.6667 12.3824Z"
+                fill="#0C2651"
+            />
+            <path
+                d="M16.2488 11.174H14.1954L14.0438 11.7434H15.2391L13.6675 13.1142L13.5332 13.6173H15.6541L15.8056 13.048H14.5233L16.1209 11.6575L16.2488 11.174Z"
+                fill="#0C2651"
+            />
+            <path
+                d="M18.4943 11.2633C18.3036 11.1544 18.0861 11.1013 17.8666 11.1101C17.6191 11.1079 17.3742 11.1603 17.1491 11.2633C16.9302 11.3654 16.7379 11.5167 16.5872 11.7053C16.4298 11.9032 16.316 12.1322 16.2535 12.3772C16.1862 12.5951 16.1779 12.8269 16.2293 13.0491C16.2765 13.2335 16.3937 13.3923 16.5561 13.4917C16.7213 13.5935 16.9326 13.6444 17.19 13.6444C17.4349 13.6465 17.6772 13.5944 17.8995 13.4917C18.1177 13.3896 18.3091 13.2381 18.4585 13.0491C18.6163 12.8513 18.7302 12.6223 18.7928 12.3772C18.8602 12.1593 18.8684 11.9274 18.8164 11.7053C18.7711 11.5215 18.6554 11.3628 18.4943 11.2633ZM18.0781 12.3761C18.0142 12.6158 17.9202 12.7956 17.7934 12.9143C17.6711 13.0308 17.5077 13.0944 17.3387 13.0912C16.966 13.0912 16.8433 12.8528 16.9704 12.3761C17.0331 12.1394 17.1291 11.961 17.2586 11.8407C17.3825 11.7222 17.5482 11.6574 17.7197 11.6604C17.8972 11.6604 18.0182 11.718 18.0805 11.8407C18.1427 11.9635 18.141 12.1392 18.0781 12.3761Z"
+                fill="#0C2651"
+            />
+            <path
+                d="M26.2581 11.1723L26.1653 11.518C26.1267 11.3945 26.0449 11.2889 25.9348 11.2207C25.8067 11.143 25.6587 11.1043 25.5089 11.1095C25.2987 11.1099 25.0923 11.1654 24.9101 11.2703C24.7117 11.3839 24.5402 11.5392 24.4075 11.7255C24.2618 11.927 24.1549 12.1538 24.0923 12.3945C24.0275 12.6089 24.0136 12.8354 24.052 13.056C24.0817 13.2303 24.1749 13.3873 24.3136 13.4969C24.4664 13.6056 24.6514 13.6596 24.8386 13.6501C25.0003 13.6495 25.16 13.6146 25.3072 13.5476C25.459 13.4794 25.5939 13.3785 25.702 13.2519L25.6063 13.6127H26.3192L26.9699 11.1723H26.2581ZM25.9325 12.3824C25.8886 12.581 25.7907 12.7637 25.6495 12.9103C25.5886 12.9696 25.5164 13.0164 25.4373 13.0478C25.3582 13.0793 25.2736 13.0948 25.1885 13.0935C25.0063 13.0935 24.8842 13.0359 24.8185 12.9131C24.7528 12.7904 24.7516 12.6192 24.811 12.3945C24.8568 12.1941 24.9564 12.01 25.0992 11.8621C25.1604 11.8007 25.2332 11.7522 25.3133 11.7192C25.3934 11.6863 25.4793 11.6696 25.566 11.6702C25.7435 11.6702 25.8637 11.7316 25.9268 11.8546C25.9936 11.9738 25.9953 12.1513 25.9325 12.3824Z"
+                fill="#0C2651"
+            />
+            <path
+                d="M21.0328 11.8292L21.2149 11.1648C21.1381 11.13 21.0542 11.1137 20.9699 11.117C20.8052 11.1172 20.6433 11.1596 20.4997 11.2403C20.3687 11.312 20.255 11.4116 20.1666 11.5319L20.2605 11.174H19.5481L18.8923 13.6144H19.615L19.9545 12.3403C19.9942 12.1703 20.0873 12.0175 20.2202 11.9041C20.3567 11.7975 20.5264 11.7422 20.6996 11.748C20.8157 11.7475 20.93 11.7754 21.0328 11.8292Z"
+                fill="#0C2651"
+            />
+            <path
+                d="M23.5502 11.2755C23.4027 11.1628 23.2203 11.1055 23.0349 11.1135C22.8545 11.1137 22.6767 11.1568 22.5162 11.2392C22.3554 11.3182 22.2168 11.4361 22.1128 11.582L22.1157 11.5653L22.2373 11.174H21.5284L21.3474 11.8523C21.3474 11.8598 21.3434 11.8678 21.3417 11.8753L20.5982 14.6701H21.3244L21.6996 13.2618C21.7354 13.386 21.8181 13.4916 21.9301 13.5562C22.0601 13.6309 22.2085 13.6677 22.3583 13.6623C22.5688 13.6628 22.7761 13.6105 22.9612 13.5101C23.1581 13.4016 23.3281 13.2502 23.4585 13.067C23.602 12.8667 23.707 12.6413 23.768 12.4026C23.8339 12.1851 23.8489 11.9554 23.8118 11.7313C23.7815 11.5531 23.6887 11.3915 23.5502 11.2755ZM23.0367 12.3911C22.9924 12.5866 22.8948 12.7661 22.7548 12.9097C22.6309 13.0282 22.4652 13.0928 22.2938 13.0895C22.1151 13.0895 21.9941 13.0278 21.9301 12.9062C21.8662 12.7846 21.8627 12.6095 21.9255 12.3784C21.9704 12.1782 22.0702 11.9944 22.2137 11.8477C22.2746 11.7882 22.3467 11.7412 22.4258 11.7096C22.505 11.678 22.5895 11.6622 22.6747 11.6633C22.8476 11.6633 22.9681 11.7278 23.0309 11.8552C23.0937 11.9825 23.0977 12.1629 23.0367 12.3911Z"
+                fill="#0C2651"
+            />
+            <path
+                d="M30.0004 11.0928H29.2512L29.1359 11.3336C29.1267 11.3457 29.1181 11.3578 29.1077 11.3728L29.0956 11.3924L28.1735 12.682L27.9821 11.174H27.226L27.6104 13.487L26.7603 14.6701H27.4882L27.6986 14.3698C27.7049 14.3606 27.7113 14.3531 27.717 14.3434L27.9631 13.9924L27.9712 13.9832L29.0702 12.4152L30.0004 11.0928Z"
+                fill="#0C2651"
+            />
+            <path d="M5.67018 10.588L5.45117 11.3855L6.68682 10.584L5.87996 13.6144H6.69892L7.89134 9.13818L5.67018 10.588Z" fill="#3395FF" />
+            <path d="M4.34003 12.3398L4 13.6145H5.67999L6.36755 11.0214L4.34003 12.3398Z" fill="#0C2651" />
+        </svg>
+    );
+};
+
+export default RazorpayIcon;
diff --git a/src/components/foundations/payment-icons/revolut-icon.tsx b/src/components/foundations/payment-icons/revolut-icon.tsx
new file mode 100644
index 0000000..afbcf60
--- /dev/null
+++ b/src/components/foundations/payment-icons/revolut-icon.tsx
@@ -0,0 +1,24 @@
+import type { SVGProps } from "react";
+
+const RevolutIcon = (props: SVGProps<SVGSVGElement>) => {
+    return (
+        <svg width="34" height="24" viewBox="0 0 34 24" fill="none" {...props}>
+            <path
+                d="M4 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 20V4C0.5 2.067 2.067 0.5 4 0.5Z"
+                fill="white"
+            />
+            <path
+                d="M4 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 20V4C0.5 2.067 2.067 0.5 4 0.5Z"
+                className="stroke-border-secondary"
+            />
+            <path
+                fillRule="evenodd"
+                clipRule="evenodd"
+                d="M21.7369 8.66272H22.7621V14.3629H21.7369V8.66272ZM30 11.0665V10.1828H28.9483V9.0339H27.9232V13.2317C27.9232 13.6206 28.0204 13.9122 28.2148 14.1066C28.4092 14.3011 28.7009 14.3983 29.0986 14.3983H30V13.5145H29.3372C29.1958 13.5145 29.0897 13.4792 29.0279 13.4173C28.9748 13.3643 28.9395 13.214 28.9395 13.055V11.0665H30ZM14.7995 13.2494L15.8511 10.1739H16.9205L15.4004 14.3541H14.1897L12.6696 10.1828H13.739L14.7995 13.2494ZM26.2617 12.2684C26.2617 12.5336 26.2175 12.7633 26.1468 12.9489C26.0673 13.1345 25.9524 13.2847 25.811 13.382C25.6696 13.4792 25.4929 13.5234 25.2896 13.5234C24.998 13.5234 24.777 13.4261 24.6356 13.2406C24.4942 13.0461 24.4147 12.7633 24.4147 12.3833V10.1739H23.3895V12.4894C23.3895 12.8517 23.4337 13.161 23.5221 13.3996C23.6105 13.6471 23.7342 13.8415 23.8844 13.9917C24.0347 14.142 24.2114 14.248 24.4147 14.3099C24.6091 14.3718 24.8212 14.4071 25.0421 14.4071C25.3603 14.4071 25.6254 14.3452 25.8287 14.2392C26.0143 14.1331 26.1645 14.0094 26.2882 13.8769L26.3766 14.3629H27.2692V10.1828H26.2441V12.2684H26.2617ZM20.1727 10.3949C19.8545 10.2181 19.4657 10.1297 19.0415 10.1297C18.6173 10.1297 18.2373 10.2181 17.9103 10.3949C17.5833 10.5716 17.327 10.8279 17.1502 11.1461C16.9735 11.4642 16.8851 11.8442 16.8851 12.2684C16.8851 12.6926 16.9735 13.0638 17.1502 13.382C17.327 13.7001 17.5833 13.9564 17.9103 14.1331C18.2373 14.3099 18.6173 14.3983 19.0415 14.3983C19.4745 14.3983 19.8545 14.3099 20.1727 14.1331C20.4908 13.9564 20.7471 13.7001 20.9239 13.382C21.1006 13.0638 21.189 12.6838 21.189 12.2684C21.189 11.8442 21.1006 11.4642 20.9239 11.1461C20.7559 10.8279 20.4997 10.5805 20.1727 10.3949ZM19.6336 13.382C19.4657 13.488 19.2712 13.541 19.0415 13.541C18.8117 13.541 18.6173 13.488 18.4494 13.382C18.2814 13.2759 18.1489 13.1257 18.0605 12.9312C17.9721 12.7368 17.9191 12.5159 17.9191 12.2684C17.9191 12.0121 17.9633 11.7912 18.0605 11.6056C18.1489 11.42 18.2814 11.261 18.4494 11.1549C18.6173 11.0489 18.8117 10.987 19.0415 10.987C19.2712 10.987 19.4745 11.04 19.6336 11.1549C19.8015 11.261 19.9252 11.42 20.0224 11.6056C20.1108 11.7912 20.1638 12.021 20.1638 12.2684C20.1638 12.5159 20.1196 12.7368 20.0224 12.9312C19.9341 13.1257 19.8015 13.2759 19.6336 13.382ZM5.0605 10.0679H4V14.3541H5.0605V10.0679ZM8.39225 10.3153C8.39225 9.40507 7.6499 8.66272 6.73963 8.66272H4V9.58182H6.60707C7.02243 9.58182 7.35826 9.90881 7.3671 10.3065C7.3671 10.5098 7.2964 10.6954 7.155 10.8368C7.0136 10.9693 6.82801 11.0489 6.63358 11.0489H5.61727C5.58192 11.0489 5.5554 11.0754 5.5554 11.1107V11.9326C5.5554 11.9503 5.5554 11.9591 5.56424 11.968L7.28756 14.3541H8.55133L6.81917 11.9591C7.68525 11.9238 8.39225 11.1903 8.39225 10.3153ZM11.6533 10.3772C11.344 10.2181 10.9816 10.1297 10.5751 10.1297C10.1686 10.1297 9.79742 10.2181 9.4881 10.3949C9.16995 10.5716 8.93134 10.8279 8.75459 11.1461C8.57784 11.4642 8.4983 11.8442 8.4983 12.2773C8.4983 12.7015 8.58668 13.0726 8.76343 13.3908C8.94018 13.7089 9.19647 13.9652 9.51462 14.1331C9.8416 14.3099 10.2305 14.3983 10.6723 14.3983C11.0258 14.3983 11.3351 14.3364 11.6091 14.2038C11.8831 14.0713 12.104 13.8945 12.2631 13.6736C12.4222 13.4615 12.5282 13.2317 12.5812 12.9754L12.5901 12.9489H11.5561L11.5472 12.9666C11.4942 13.161 11.3793 13.3113 11.2291 13.4173C11.0612 13.5322 10.8491 13.5941 10.6105 13.5941C10.4072 13.5941 10.2216 13.5499 10.0625 13.4615C9.90347 13.3731 9.77974 13.2494 9.69137 13.0992C9.60299 12.9401 9.5588 12.7545 9.54113 12.5424V12.507H12.6077V12.4894C12.6166 12.4275 12.6254 12.3656 12.6254 12.3126C12.6254 12.2508 12.6254 12.1977 12.6254 12.1359C12.6166 11.7293 12.5282 11.3758 12.3603 11.0754C12.2012 10.7661 11.9538 10.5363 11.6533 10.3772ZM11.2821 11.1637C11.4589 11.314 11.5649 11.5172 11.6091 11.7824H9.58532C9.61183 11.6145 9.66485 11.4642 9.75323 11.3405C9.85044 11.2079 9.96533 11.1107 10.1156 11.04C10.257 10.9693 10.416 10.934 10.584 10.934C10.8668 10.934 11.0965 11.0135 11.2821 11.1637Z"
+                fill="black"
+            />
+        </svg>
+    );
+};
+
+export default RevolutIcon;
diff --git a/src/components/foundations/payment-icons/ru-pay-icon.tsx b/src/components/foundations/payment-icons/ru-pay-icon.tsx
new file mode 100644
index 0000000..bd08a84
--- /dev/null
+++ b/src/components/foundations/payment-icons/ru-pay-icon.tsx
@@ -0,0 +1,40 @@
+import type { SVGProps } from "react";
+
+const RuPayIcon = (props: SVGProps<SVGSVGElement>) => {
+    return (
+        <svg width="34" height="24" viewBox="0 0 34 24" fill="none" {...props}>
+            <path
+                d="M4 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 20V4C0.5 2.067 2.067 0.5 4 0.5Z"
+                fill="white"
+            />
+            <path
+                d="M4 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 20V4C0.5 2.067 2.067 0.5 4 0.5Z"
+                className="stroke-border-secondary"
+            />
+            <path d="M28.5327 9.49068L29.9996 12.4033L26.916 15.3173L28.5327 9.49068Z" fill="#008C44" />
+            <path d="M27.5172 9.49068L28.9819 12.4033L25.9004 15.3173L27.5172 9.49068Z" fill="#F47920" />
+            <path
+                d="M4 14.2573L5.46249 8.98828H7.80062C8.53136 8.98828 9.01949 9.10396 9.26783 9.34235C9.51439 9.57882 9.56189 9.9648 9.41327 10.5073C9.32338 10.8269 9.18676 11.0952 8.99906 11.3071C8.8129 11.5195 8.56736 11.6874 8.26501 11.8109C8.52152 11.8725 8.6847 11.995 8.75787 12.1786C8.83065 12.3622 8.82222 12.6299 8.73386 12.9809L8.556 13.7169L8.55549 13.7368C8.50416 13.9429 8.51935 14.0532 8.60299 14.0622L8.5491 14.2573H6.96736C6.97273 14.1333 6.98256 14.0225 6.99303 13.9294C7.00452 13.8341 7.01869 13.7603 7.03274 13.7096L7.18021 13.1834C7.25452 12.9098 7.25912 12.7189 7.19017 12.609C7.12058 12.4961 6.96481 12.4406 6.71889 12.4406H6.05417L5.54727 14.2573H4ZM6.38308 11.2533H7.09505C7.34454 11.2533 7.52866 11.2176 7.64217 11.144C7.75619 11.0696 7.84084 10.9441 7.89051 10.7626C7.94197 10.5779 7.92933 10.4492 7.85553 10.3761C7.78185 10.3018 7.60552 10.2656 7.32832 10.2656H6.65722L6.38308 11.2533Z"
+                fill="#1B3281"
+            />
+            <path
+                d="M13.755 10.3698L12.6768 14.2579H11.3667L11.5277 13.6883C11.2971 13.9148 11.0611 14.0868 10.8232 14.1967C10.5873 14.3086 10.3383 14.3636 10.0762 14.3636C9.85948 14.3636 9.67344 14.3243 9.52367 14.2462C9.37211 14.1685 9.25924 14.0503 9.18327 13.8943C9.11585 13.7579 9.08648 13.5893 9.09797 13.388C9.1101 13.1898 9.18007 12.8555 9.3098 12.3874L9.86854 10.3698H11.3017L10.7441 12.378C10.6626 12.6719 10.6432 12.8785 10.6829 12.991C10.7243 13.1045 10.8347 13.1631 11.014 13.1631C11.1945 13.1631 11.3463 13.0977 11.4717 12.9643C11.5989 12.832 11.6971 12.6348 11.7709 12.3722L12.3239 10.3698H13.755Z"
+                fill="#1B3281"
+            />
+            <path
+                d="M13.2342 14.2573L14.6951 8.98828H16.7049C17.1483 8.98828 17.4915 9.01446 17.7363 9.07191C17.9806 9.12695 18.1721 9.21632 18.3144 9.34235C18.4928 9.50719 18.6021 9.71122 18.6471 9.95599C18.6893 10.2008 18.6643 10.4859 18.5717 10.8207C18.408 11.4097 18.1211 11.861 17.7123 12.1764C17.3022 12.4877 16.7948 12.6441 16.1892 12.6441H15.2486L14.8019 14.2573H13.2342ZM15.6048 11.3573H16.1101C16.4369 11.3573 16.6666 11.317 16.8011 11.2391C16.9314 11.1602 17.024 11.02 17.0804 10.8207C17.1368 10.6187 17.1223 10.4775 17.037 10.3985C16.9549 10.32 16.7451 10.2803 16.4094 10.2803H15.9051L15.6048 11.3573Z"
+                fill="#1B3281"
+            />
+            <path
+                d="M20.2578 14.2584L20.2724 13.8891C20.0413 14.0621 19.8072 14.1929 19.5719 14.2746C19.3376 14.3578 19.0881 14.4001 18.8209 14.4001C18.415 14.4001 18.1319 14.2898 17.9682 14.0763C17.8065 13.8624 17.78 13.5553 17.8903 13.1636C17.9959 12.777 18.1837 12.4924 18.4547 12.3104C18.7241 12.1263 19.174 11.9945 19.8053 11.9103C19.8854 11.8972 19.9926 11.8868 20.1269 11.8705C20.5936 11.8165 20.8556 11.6922 20.9121 11.4893C20.9414 11.3782 20.9235 11.2962 20.8546 11.2459C20.7881 11.1937 20.6637 11.168 20.4842 11.168C20.3352 11.168 20.2153 11.1989 20.117 11.2632C20.0188 11.328 19.9455 11.4228 19.8958 11.5561H18.4986C18.6247 11.1184 18.8825 10.7877 19.2695 10.5665C19.6551 10.3415 20.1636 10.2333 20.7933 10.2333C21.0894 10.2333 21.3546 10.261 21.589 10.3211C21.8238 10.3787 21.9955 10.4608 22.1068 10.5601C22.2438 10.6841 22.3249 10.8255 22.348 10.9817C22.3747 11.1376 22.3454 11.3611 22.2637 11.6535L21.6627 13.8212C21.6434 13.8922 21.6397 13.9555 21.6502 14.0131C21.6627 14.068 21.6867 14.115 21.7291 14.1485L21.6968 14.2584H20.2578ZM20.6061 12.5222C20.4539 12.5834 20.2561 12.642 20.0104 12.7064C19.6244 12.8099 19.4072 12.9481 19.3602 13.119C19.3276 13.229 19.3408 13.3136 19.3945 13.378C19.4475 13.4391 19.5396 13.47 19.6693 13.47C19.9072 13.47 20.0982 13.4099 20.2406 13.2912C20.3833 13.1709 20.4901 12.982 20.5648 12.7216C20.5778 12.6661 20.5893 12.6263 20.5967 12.5966L20.6061 12.5222Z"
+                fill="#1B3281"
+            />
+            <path
+                d="M21.7082 15.7896L22.0263 14.6388H22.4364C22.5734 14.6388 22.6812 14.6117 22.7575 14.5624C22.835 14.5112 22.8878 14.4249 22.9182 14.3087C22.9334 14.2575 22.9427 14.2036 22.9491 14.1425C22.9531 14.0776 22.9531 14.009 22.9491 13.9296L22.7302 10.3694H24.1808L24.1584 12.7285L25.4247 10.3694H26.7737L24.5349 14.2387C24.2808 14.6712 24.0962 14.9683 23.979 15.1305C23.8633 15.2906 23.7535 15.4151 23.6469 15.4994C23.5087 15.6159 23.3545 15.6985 23.188 15.7467C23.0211 15.7958 22.767 15.8203 22.4254 15.8203C22.3271 15.8203 22.214 15.8184 22.0917 15.812C21.9702 15.8073 21.8406 15.8 21.7082 15.7896Z"
+                fill="#1B3281"
+            />
+        </svg>
+    );
+};
+
+export default RuPayIcon;
diff --git a/src/components/foundations/payment-icons/samsung-pay-icon.tsx b/src/components/foundations/payment-icons/samsung-pay-icon.tsx
new file mode 100644
index 0000000..cb0b989
--- /dev/null
+++ b/src/components/foundations/payment-icons/samsung-pay-icon.tsx
@@ -0,0 +1,52 @@
+import type { SVGProps } from "react";
+
+const SamsungPayIcon = (props: SVGProps<SVGSVGElement>) => {
+    return (
+        <svg width="34" height="24" viewBox="0 0 34 24" fill="none" {...props}>
+            <path
+                d="M4 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 20V4C0.5 2.067 2.067 0.5 4 0.5Z"
+                fill="white"
+            />
+            <path
+                d="M4 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 20V4C0.5 2.067 2.067 0.5 4 0.5Z"
+                className="stroke-border-secondary"
+            />
+            <path
+                d="M5.31244 14.9785H4.74647V13.5146H5.31244C5.7532 13.5146 6.05255 13.8412 6.05255 14.2438C6.05255 14.6521 5.7532 14.9785 5.31244 14.9785ZM5.36682 12.829H4.00636V16.8015H4.74647V15.6642H5.36136C6.1885 15.6642 6.79803 15.033 6.79803 14.2438C6.79803 13.4603 6.1885 12.829 5.36682 12.829Z"
+                fill="black"
+            />
+            <path
+                d="M8.68132 16.1919C8.13717 16.1919 7.71831 15.7566 7.71831 15.2017C7.71831 14.6521 8.13717 14.2222 8.68132 14.2222C9.22547 14.2222 9.63367 14.6629 9.63367 15.2017C9.63367 15.7513 9.22547 16.1919 8.68132 16.1919ZM9.59565 13.9991C9.36705 13.727 8.9915 13.5527 8.57264 13.5527C7.76716 13.5527 6.99449 14.1568 6.99449 15.2125C6.99449 16.252 7.79435 16.8668 8.56165 16.8668C8.98067 16.8668 9.36159 16.6818 9.59565 16.388V16.8015H10.3302V13.6181H9.59565V13.9991Z"
+                fill="black"
+            />
+            <path d="M12.2959 15.7621L11.409 13.6181H10.6253L11.9314 16.6437L11.2619 18.2708H12.0076L13.9067 13.6181H13.134L12.2959 15.7621Z" fill="black" />
+            <path
+                d="M25.5203 9.63212H25.4999L24.6459 6.71541H23.2667V10.3928H24.1806L24.1293 7.37544H24.1497L25.067 10.3928H26.3901V6.71541H25.4699L25.5203 9.63212Z"
+                fill="black"
+            />
+            <path d="M8.80196 7.05964L8.8227 7.05931L9.31809 10.431H10.3163L9.63141 6.71541H7.97829L7.28951 10.431H8.29384L8.80196 7.05964Z" fill="black" />
+            <path
+                d="M13.5931 6.71541L13.1348 9.55658H13.1136L12.656 6.71541H11.1404L11.0585 10.431H11.9886L12.0118 7.0908H12.0323L12.653 10.431H13.5958L14.2167 7.09113L14.2372 7.0908L14.2605 10.431H15.1899L15.108 6.71541H13.5931Z"
+                fill="black"
+            />
+            <path
+                d="M5.35046 10.5764C6.0228 10.5764 6.57554 10.3472 6.66389 9.72682C6.7091 9.40615 6.67588 9.19606 6.65993 9.11788C6.50306 8.33975 5.09334 8.10768 4.98813 7.67254C4.97045 7.59708 4.97474 7.51881 4.98417 7.47724C5.01045 7.35798 5.09119 7.22773 5.32352 7.22773C5.54121 7.22773 5.66873 7.36195 5.66873 7.56443V7.79461H6.59604V7.53286C6.59604 6.72358 5.86899 6.59705 5.3431 6.59705C4.68275 6.59705 4.14248 6.8159 4.04405 7.42187C4.01711 7.58758 4.01347 7.73593 4.05256 7.92304C4.21373 8.68249 5.53418 8.90192 5.7256 9.38293C5.76196 9.47276 5.75039 9.58797 5.73295 9.65773C5.7027 9.78153 5.61857 9.90782 5.37096 9.90782C5.13863 9.90782 4.99764 9.77327 4.99764 9.57087L4.99673 9.21077H4.00033L4 9.49714C4 10.3261 4.65217 10.5764 5.35046 10.5764Z"
+                fill="black"
+            />
+            <path
+                d="M17.0763 7.682C17.0582 7.60778 17.0628 7.53042 17.0716 7.4891C17.098 7.37108 17.1781 7.24207 17.4077 7.24207C17.6238 7.24207 17.7498 7.37447 17.7498 7.57538V7.80283H18.668V7.54414C18.668 6.74288 17.9479 6.61775 17.4273 6.61775C16.7739 6.61775 16.2389 6.83387 16.1416 7.43406C16.1147 7.59819 16.111 7.74506 16.1502 7.93002C16.3092 8.68236 17.6169 8.89948 17.8064 9.37578C17.8419 9.46503 17.8308 9.57851 17.8134 9.64793C17.7835 9.77025 17.7003 9.89488 17.4551 9.89488C17.2249 9.89488 17.0851 9.76223 17.0851 9.5614L17.0845 9.20527H16.0979L16.0976 9.48892C16.0976 10.3095 16.7437 10.5571 17.4349 10.5571C18.1005 10.5571 18.6478 10.3304 18.7352 9.71603C18.7798 9.39867 18.7471 9.19081 18.7312 9.11287C18.5757 8.34235 17.18 8.11284 17.0763 7.682Z"
+                fill="black"
+            />
+            <path
+                d="M22.2309 6.71477H21.2904V9.46362C21.2908 9.51131 21.2894 9.56545 21.2816 9.60553C21.2632 9.69694 21.1837 9.8748 20.9254 9.8748C20.6668 9.8748 20.5869 9.69694 20.5688 9.60553C20.5609 9.56545 20.559 9.51131 20.5599 9.46362V6.71477H19.6201V9.37891C19.6183 9.44743 19.6254 9.58718 19.6287 9.62347C19.6939 10.317 20.2421 10.5417 20.9254 10.5417C21.6084 10.5417 22.1566 10.317 22.2214 9.62347C22.2251 9.58718 22.2321 9.44743 22.2309 9.37891V6.71477Z"
+                fill="black"
+            />
+            <path
+                d="M28.6838 8.34421V8.88597H29.0647V9.42557C29.0653 9.4726 29.0635 9.52458 29.0558 9.56649C29.0391 9.66591 28.9452 9.83625 28.6761 9.83625C28.4074 9.83625 28.3136 9.66591 28.2961 9.56657C28.289 9.52467 28.2872 9.47268 28.2875 9.42557V7.72692C28.2875 7.66642 28.2918 7.59997 28.3025 7.55105C28.323 7.45939 28.4025 7.28145 28.6727 7.28145C28.9568 7.28145 29.0274 7.46914 29.0442 7.55105C29.0553 7.6046 29.0558 7.69262 29.0558 7.69262V7.90089H29.993V7.77709C29.993 7.77709 29.9963 7.6508 29.9844 7.53245C29.9159 6.83565 29.339 6.61432 28.6801 6.61432C28.0208 6.61432 27.4587 6.8378 27.3759 7.53245C27.3682 7.59452 27.3602 7.71105 27.3602 7.77709L27.3599 9.34028C27.3602 9.41028 27.3621 9.46136 27.3728 9.58492C27.4349 10.2618 28.0208 10.5033 28.6798 10.5033C29.3383 10.5033 29.9251 10.2617 29.9865 9.58492C29.9978 9.46136 29.9993 9.41028 30 9.34028V8.34421H28.6838Z"
+                fill="black"
+            />
+        </svg>
+    );
+};
+
+export default SamsungPayIcon;
diff --git a/src/components/foundations/payment-icons/sepa-icon.tsx b/src/components/foundations/payment-icons/sepa-icon.tsx
new file mode 100644
index 0000000..d81d251
--- /dev/null
+++ b/src/components/foundations/payment-icons/sepa-icon.tsx
@@ -0,0 +1,28 @@
+import type { SVGProps } from "react";
+
+const SEPAIcon = (props: SVGProps<SVGSVGElement>) => {
+    return (
+        <svg width="34" height="24" viewBox="0 0 34 24" fill="none" {...props}>
+            <path
+                d="M4 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 20V4C0.5 2.067 2.067 0.5 4 0.5Z"
+                fill="white"
+            />
+            <path
+                d="M4 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 20V4C0.5 2.067 2.067 0.5 4 0.5Z"
+                className="stroke-border-secondary"
+            />
+            <path
+                d="M8.17578 15.6562C8.28941 15.6563 8.38315 15.7077 8.45703 15.8105V15.6797H8.68359V16.5303C8.68359 16.6422 8.6742 16.726 8.65625 16.7812C8.63838 16.8367 8.61341 16.8806 8.58105 16.9121C8.54877 16.9435 8.50589 16.9685 8.45215 16.9863C8.39816 17.0042 8.32953 17.0127 8.24707 17.0127C8.09116 17.0127 7.98032 16.985 7.91504 16.9297C7.84979 16.8743 7.81738 16.8038 7.81738 16.7188C7.81739 16.7104 7.8178 16.7004 7.81836 16.6885L8.09473 16.7197C8.09939 16.7548 8.11033 16.7787 8.12695 16.792C8.15013 16.8109 8.1866 16.8203 8.23633 16.8203C8.3 16.8203 8.34801 16.8106 8.37988 16.791C8.40106 16.7779 8.41774 16.7565 8.42871 16.7275C8.43605 16.7066 8.43943 16.6685 8.43945 16.6133L8.44043 16.4746C8.36847 16.5756 8.27677 16.626 8.16602 16.626C8.04269 16.6259 7.9451 16.5724 7.87305 16.4648C7.81646 16.3797 7.78809 16.2733 7.78809 16.1465C7.78809 15.9875 7.82528 15.8662 7.89941 15.7822C7.97355 15.6983 8.06559 15.6562 8.17578 15.6562ZM18.5312 16.3516L18.7461 15.6797H18.9971L18.6152 16.7568C18.5938 16.8122 18.573 16.8546 18.5537 16.8838C18.5344 16.9129 18.5124 16.937 18.4873 16.9551C18.4622 16.9732 18.4311 16.987 18.3945 16.9971C18.3579 17.0072 18.3165 17.0127 18.2705 17.0127C18.2237 17.0127 18.1768 17.0072 18.1318 16.9971L18.1094 16.8008C18.1475 16.8087 18.1823 16.8125 18.2129 16.8125C18.2698 16.8125 18.3116 16.7953 18.3389 16.7607C18.3661 16.7261 18.3869 16.6823 18.4014 16.6289L18.0518 15.6797H18.3105L18.5312 16.3516ZM5.37402 15.2959C5.53262 15.296 5.65209 15.3316 5.73242 15.4033C5.81283 15.4754 5.85535 15.572 5.85938 15.6924L5.60254 15.7031C5.59159 15.6359 5.56829 15.5872 5.53223 15.5576C5.49625 15.5282 5.44211 15.5137 5.37012 15.5137C5.29583 15.5137 5.23738 15.529 5.19531 15.5605C5.16836 15.5807 5.15533 15.6079 5.15527 15.6416C5.15527 15.6726 5.168 15.6996 5.19336 15.7217C5.22575 15.7495 5.30391 15.7786 5.42773 15.8086C5.55208 15.8388 5.64446 15.8698 5.7041 15.9023C5.76352 15.9347 5.81004 15.9791 5.84375 16.0352C5.87736 16.0915 5.8945 16.1614 5.89453 16.2441C5.89453 16.3192 5.87429 16.3896 5.83398 16.4551C5.79364 16.5205 5.73674 16.5697 5.66309 16.6016C5.58928 16.6334 5.49691 16.6494 5.38672 16.6494C5.22649 16.6494 5.10353 16.6109 5.01758 16.5342C4.93171 16.4573 4.88003 16.3454 4.86328 16.1982L5.1123 16.1719C5.12727 16.2584 5.15736 16.3226 5.20312 16.3633C5.24893 16.4038 5.31101 16.4238 5.38867 16.4238C5.47092 16.4238 5.53334 16.406 5.5752 16.3701C5.61697 16.334 5.6377 16.2915 5.6377 16.2432C5.63769 16.2122 5.62879 16.1859 5.61133 16.1641C5.59375 16.1424 5.56308 16.1235 5.51953 16.1074C5.48942 16.0969 5.42138 16.0779 5.31543 16.0508C5.17856 16.0159 5.08255 15.9729 5.02734 15.9219C4.94976 15.8502 4.91113 15.7624 4.91113 15.6592C4.91116 15.5929 4.92922 15.5304 4.96582 15.4727C5.00235 15.4149 5.05532 15.371 5.12402 15.3408C5.19292 15.3106 5.27663 15.2959 5.37402 15.2959ZM9.87207 15.6562C10.0091 15.6562 10.1181 15.7033 10.1973 15.7969C10.2762 15.8906 10.314 16.0337 10.3105 16.2266H9.69922C9.70091 16.301 9.72102 16.3589 9.75879 16.4004C9.79662 16.4417 9.84389 16.4629 9.90039 16.4629C9.93869 16.4628 9.97096 16.452 9.99707 16.4307C10.0232 16.4094 10.0433 16.3753 10.0566 16.3281L10.2979 16.3691C10.2666 16.4603 10.2177 16.5304 10.1504 16.5781C10.0831 16.6259 9.99848 16.6494 9.89746 16.6494C9.73721 16.6494 9.61788 16.5953 9.54102 16.4873C9.48044 16.4009 9.45023 16.2918 9.4502 16.1602C9.4502 16.0028 9.49047 15.8793 9.57031 15.79C9.64996 15.701 9.75039 15.6564 9.87207 15.6562ZM12.5771 16.1152C12.5772 16.2479 12.5819 16.3293 12.5908 16.3594C12.5998 16.3896 12.616 16.414 12.6396 16.4316C12.6632 16.4489 12.6933 16.458 12.7295 16.458C12.7709 16.458 12.8081 16.4454 12.8408 16.4219C12.8736 16.3984 12.8961 16.3697 12.9082 16.335C12.9203 16.3002 12.9268 16.2147 12.9268 16.0791V15.6797H13.1709V16.626H12.9443V16.4844C12.9108 16.5349 12.8662 16.5747 12.8115 16.6045C12.7569 16.6341 12.6993 16.6494 12.6387 16.6494C12.5769 16.6494 12.5217 16.6353 12.4727 16.6074C12.4236 16.5795 12.3882 16.5398 12.3662 16.4893C12.3443 16.4386 12.333 16.3685 12.333 16.2793V15.6797H12.5771V16.1152ZM14.6309 15.6562C14.7697 15.6563 14.8839 15.7026 14.9727 15.7959C15.0614 15.8893 15.1055 16.0078 15.1055 16.1504C15.1054 16.294 15.0603 16.4133 14.9707 16.5078C14.8811 16.6022 14.7679 16.6494 14.6318 16.6494C14.5479 16.6494 14.4678 16.6299 14.3916 16.5908C14.3151 16.5514 14.2566 16.4931 14.2168 16.417C14.1771 16.341 14.1573 16.2487 14.1572 16.1396C14.1572 16.0562 14.177 15.9747 14.2168 15.8965C14.2565 15.8186 14.3129 15.7589 14.3857 15.7178C14.4587 15.6766 14.5409 15.6562 14.6309 15.6562ZM17.4893 15.6562C17.5974 15.6562 17.6784 15.6691 17.7314 15.6953C17.7845 15.722 17.8222 15.7561 17.8438 15.7969C17.8654 15.8376 17.876 15.9126 17.876 16.0215L17.874 16.3145C17.874 16.3978 17.878 16.4595 17.8857 16.499C17.8935 16.5385 17.9075 16.5809 17.9287 16.626H17.6875C17.6811 16.6097 17.6732 16.5856 17.6641 16.5537C17.6601 16.5391 17.6569 16.5292 17.6553 16.5244C17.6138 16.566 17.5696 16.5973 17.5225 16.6182C17.4752 16.639 17.4247 16.6494 17.3711 16.6494C17.2767 16.6494 17.2018 16.6232 17.1475 16.5703C17.0932 16.5173 17.0665 16.45 17.0664 16.3691C17.0664 16.3156 17.0788 16.2676 17.1035 16.2256C17.1284 16.1836 17.1633 16.1512 17.208 16.1289C17.2527 16.1067 17.3173 16.087 17.4014 16.0703C17.5148 16.0483 17.5939 16.0279 17.6377 16.0088V15.9834C17.6377 15.9347 17.6257 15.8997 17.6025 15.8789C17.5792 15.8582 17.535 15.8477 17.4707 15.8477C17.4275 15.8477 17.3934 15.8565 17.3691 15.874C17.3448 15.8917 17.3255 15.9235 17.3105 15.9678L17.0918 15.9258C17.1166 15.8342 17.1592 15.7667 17.2197 15.7227C17.2803 15.6786 17.37 15.6563 17.4893 15.6562ZM21.1846 15.6562C21.3216 15.6562 21.4306 15.7033 21.5098 15.7969C21.5887 15.8906 21.6265 16.0337 21.623 16.2266H21.0117C21.0135 16.301 21.0335 16.3589 21.0713 16.4004C21.109 16.4417 21.1563 16.4629 21.2129 16.4629C21.2512 16.4628 21.2835 16.4519 21.3096 16.4307C21.3358 16.4094 21.3558 16.3753 21.3691 16.3281L21.6104 16.3691C21.5791 16.4603 21.5302 16.5304 21.4629 16.5781C21.3955 16.6259 21.311 16.6493 21.21 16.6494C21.0498 16.6494 20.9305 16.5953 20.8535 16.4873C20.7929 16.4009 20.7627 16.2919 20.7627 16.1602C20.7627 16.0028 20.8031 15.8793 20.8828 15.79C20.9625 15.701 21.0628 15.6564 21.1846 15.6562ZM23.2617 15.6797H23.4277V15.8789H23.2617V16.2617C23.2617 16.3387 23.2635 16.3843 23.2666 16.3975C23.2697 16.4103 23.2771 16.4213 23.2881 16.4297C23.2991 16.4379 23.3124 16.4424 23.3281 16.4424C23.3503 16.4424 23.3828 16.434 23.4248 16.418L23.4453 16.6123C23.3892 16.6371 23.3257 16.6494 23.2549 16.6494C23.2112 16.6494 23.1717 16.6421 23.1367 16.627C23.1018 16.6118 23.076 16.5915 23.0596 16.5674C23.0433 16.5433 23.0316 16.5107 23.0254 16.4697C23.0202 16.4404 23.0186 16.3814 23.0186 16.293V15.8789H22.9072V15.6797H23.0186V15.4902L23.2617 15.3428V15.6797ZM23.9844 15.6562C24.1104 15.6563 24.2042 15.677 24.2656 15.7188C24.327 15.7607 24.3693 15.8232 24.3926 15.9053L24.1641 15.9492C24.1542 15.9125 24.1351 15.8838 24.1074 15.8643C24.0797 15.8447 24.0403 15.835 23.9893 15.835C23.9245 15.835 23.8775 15.8446 23.8496 15.8633C23.8311 15.8764 23.8223 15.8933 23.8223 15.9141C23.8223 15.932 23.8296 15.9474 23.8457 15.96C23.8677 15.9766 23.9442 16.0007 24.0742 16.0312C24.2041 16.0618 24.2951 16.0984 24.3467 16.1426C24.3975 16.1874 24.4228 16.2501 24.4229 16.3301C24.4229 16.4173 24.3877 16.4929 24.3174 16.5557C24.247 16.6184 24.1425 16.6494 24.0049 16.6494C23.8801 16.6494 23.7809 16.6233 23.708 16.5713C23.6353 16.5192 23.5879 16.4486 23.5654 16.3594L23.8096 16.3203C23.82 16.3686 23.8405 16.4056 23.8721 16.4307C23.9037 16.4557 23.9481 16.4677 24.0049 16.4678C24.0677 16.4678 24.1158 16.4555 24.1475 16.4316C24.1685 16.4148 24.1787 16.3923 24.1787 16.3643C24.1786 16.3454 24.1726 16.3297 24.1611 16.3174C24.1489 16.3054 24.1221 16.2943 24.0801 16.2842C23.883 16.2393 23.7577 16.1981 23.7051 16.1611C23.632 16.1099 23.5957 16.0383 23.5957 15.9473C23.5958 15.8651 23.6273 15.7961 23.6904 15.7402C23.7537 15.6843 23.8518 15.6562 23.9844 15.6562ZM27.6572 15.6562C27.7942 15.6562 27.9031 15.7033 27.9824 15.7969C28.0613 15.8906 28.0991 16.0337 28.0957 16.2266H27.4844C27.4861 16.3011 27.5062 16.3589 27.5439 16.4004C27.5819 16.4417 27.6291 16.4629 27.6855 16.4629C27.7239 16.4628 27.7561 16.4519 27.7822 16.4307C27.8083 16.4094 27.8284 16.3753 27.8418 16.3281L28.083 16.3691C28.0518 16.4603 28.0028 16.5304 27.9355 16.5781C27.8683 16.6259 27.7836 16.6494 27.6826 16.6494C27.5224 16.6494 27.403 16.5953 27.3262 16.4873C27.2656 16.4009 27.2354 16.2919 27.2354 16.1602C27.2354 16.0028 27.2756 15.8793 27.3555 15.79C27.435 15.701 27.5355 15.6564 27.6572 15.6562ZM28.7031 15.6562C28.8115 15.6562 28.8923 15.6699 28.9453 15.6963C28.9984 15.7229 29.036 15.7561 29.0576 15.7969C29.0793 15.8376 29.0898 15.9125 29.0898 16.0215L29.0879 16.3145C29.0879 16.3978 29.0919 16.4595 29.0996 16.499C29.1074 16.5385 29.1214 16.5809 29.1426 16.626H28.9014C28.895 16.6097 28.8872 16.5856 28.8779 16.5537C28.874 16.5391 28.8708 16.5292 28.8691 16.5244C28.8277 16.566 28.7835 16.5973 28.7363 16.6182C28.6891 16.639 28.6385 16.6494 28.585 16.6494C28.4906 16.6494 28.4157 16.6232 28.3613 16.5703C28.3071 16.5173 28.2803 16.45 28.2803 16.3691C28.2803 16.3156 28.2926 16.2676 28.3174 16.2256C28.3422 16.1836 28.3772 16.1512 28.4219 16.1289C28.4666 16.1067 28.5312 16.087 28.6152 16.0703C28.7287 16.0483 28.8077 16.0279 28.8516 16.0088V15.9834C28.8515 15.9347 28.8396 15.8997 28.8164 15.8789C28.7932 15.8582 28.7488 15.8477 28.6846 15.8477C28.6414 15.8477 28.6073 15.8565 28.583 15.874C28.5587 15.8917 28.5394 15.9235 28.5244 15.9678L28.3057 15.9258C28.3305 15.8342 28.3731 15.7667 28.4336 15.7227C28.4942 15.6786 28.5839 15.6563 28.7031 15.6562ZM6.40527 16.626H6.16113V15.6797H6.40527V16.626ZM7.23535 15.6562C7.2888 15.6563 7.3376 15.6667 7.38184 15.6865C7.42614 15.7064 7.45966 15.7318 7.48242 15.7627C7.50517 15.7936 7.52135 15.8289 7.53027 15.8682C7.53914 15.9073 7.54393 15.9633 7.54395 16.0361V16.626H7.2998V16.1416C7.29979 16.0395 7.29444 15.9734 7.28418 15.9434C7.2738 15.9133 7.25666 15.8897 7.2334 15.873C7.21018 15.8565 7.182 15.8477 7.14941 15.8477C7.10767 15.8477 7.07031 15.8601 7.03711 15.8838C7.0038 15.9076 6.98107 15.9392 6.96875 15.9785C6.95636 16.0178 6.9502 16.0903 6.9502 16.1963V16.626H6.70605V15.6797H6.93262V15.8184C7.01268 15.7102 7.1139 15.6562 7.23535 15.6562ZM9.21973 16.626H8.97559V15.3193H9.21973V16.626ZM12.0469 15.5391H11.3652V15.8301H11.999V16.0508H11.3652V16.4053H12.0723V16.626H11.1084V15.3193H12.0469V15.5391ZM13.8984 15.6562C13.9537 15.6562 14.0074 15.6717 14.0586 15.7031L13.9844 15.9229C13.9434 15.8956 13.9053 15.8819 13.8701 15.8818C13.8359 15.8818 13.8069 15.8919 13.7832 15.9111C13.7596 15.9306 13.7411 15.9653 13.7275 16.0156C13.7139 16.0661 13.707 16.172 13.707 16.333V16.626H13.4629V15.6797H13.6895V15.8145C13.728 15.7511 13.7622 15.7085 13.793 15.6875C13.8238 15.6667 13.8592 15.6563 13.8984 15.6562ZM16.3115 15.3193C16.4668 15.3193 16.568 15.3259 16.6152 15.3389C16.6878 15.3585 16.7488 15.4011 16.7979 15.4668C16.8468 15.5324 16.8711 15.6177 16.8711 15.7217C16.871 15.8017 16.8573 15.8691 16.8291 15.9238C16.801 15.9784 16.7651 16.0215 16.7217 16.0527C16.6782 16.084 16.6337 16.1041 16.5889 16.1143C16.5278 16.1268 16.4389 16.1338 16.3232 16.1338H16.1572V16.626H15.9004V15.3193H16.3115ZM20.2393 15.6562C20.3068 15.6563 20.3644 15.6699 20.4111 15.6982C20.4578 15.7264 20.4925 15.7684 20.5156 15.8232C20.5323 15.8636 20.541 15.9291 20.541 16.0195V16.626H20.2969V16.084C20.2969 15.9899 20.2881 15.9288 20.2715 15.9014C20.2489 15.8657 20.2144 15.8477 20.168 15.8477C20.1341 15.8477 20.1021 15.8586 20.0723 15.8799C20.0423 15.9014 20.02 15.9332 20.0068 15.9746C19.9936 16.016 19.9873 16.0817 19.9873 16.1709V16.626H19.7432V16.1064C19.7432 16.0143 19.7391 15.9547 19.7305 15.9277C19.7219 15.9011 19.7084 15.8813 19.6904 15.8682C19.6722 15.8551 19.6474 15.8477 19.6162 15.8477C19.579 15.8477 19.5454 15.8583 19.5156 15.8789C19.4857 15.8997 19.4642 15.9305 19.4512 15.9697C19.4382 16.0091 19.4316 16.074 19.4316 16.165V16.626H19.1875V15.6797H19.4111V15.8086C19.4915 15.7069 19.5873 15.6563 19.6982 15.6562C19.757 15.6562 19.8083 15.6685 19.8516 15.6934C19.8949 15.7184 19.9313 15.7562 19.959 15.8066C19.9993 15.7563 20.0433 15.7184 20.0898 15.6934C20.1366 15.6685 20.1863 15.6562 20.2393 15.6562ZM22.4004 15.6562C22.4538 15.6563 22.5027 15.6667 22.5469 15.6865C22.5912 15.7064 22.6247 15.7318 22.6475 15.7627C22.6702 15.7936 22.6864 15.8288 22.6953 15.8682C22.7043 15.9073 22.709 15.9633 22.709 16.0361V16.626H22.4648V16.1416C22.4648 16.0395 22.4594 15.9734 22.4492 15.9434C22.4388 15.9133 22.4217 15.8897 22.3984 15.873C22.3752 15.8565 22.347 15.8477 22.3145 15.8477C22.2728 15.8477 22.2353 15.8601 22.2021 15.8838C22.1688 15.9076 22.1462 15.9392 22.1338 15.9785C22.1215 16.0178 22.1152 16.0903 22.1152 16.1963V16.626H21.8711V15.6797H22.0977V15.8184C22.1778 15.7102 22.2789 15.6562 22.4004 15.6562ZM26.3779 16.626H26.1025L25.9922 16.3301H25.4814L25.377 16.626H25.1055L25.5967 15.3193H25.8662L26.3779 16.626ZM26.9883 15.6562C27.0435 15.6562 27.0972 15.6717 27.1484 15.7031L27.0742 15.9229C27.0332 15.8957 26.9951 15.8818 26.96 15.8818C26.9257 15.8818 26.8968 15.8919 26.873 15.9111C26.8494 15.9306 26.8309 15.9653 26.8174 16.0156C26.8037 16.0661 26.7969 16.172 26.7969 16.333V16.626H26.5527V15.6797H26.7793V15.8145C26.818 15.7509 26.8528 15.7084 26.8838 15.6875C26.9145 15.6668 26.9492 15.6563 26.9883 15.6562ZM17.4893 16.2109C17.4222 16.2258 17.378 16.2406 17.3574 16.2549C17.3259 16.2782 17.3105 16.3081 17.3105 16.3438C17.3107 16.3788 17.3235 16.409 17.3486 16.4346C17.374 16.4601 17.4062 16.4736 17.4453 16.4736C17.4889 16.4735 17.5307 16.4584 17.5703 16.4287C17.5996 16.406 17.6188 16.3776 17.6279 16.3447C17.6341 16.3232 17.6377 16.2825 17.6377 16.2227V16.1719C17.6065 16.1827 17.5565 16.196 17.4893 16.2109ZM28.7031 16.2109C28.6361 16.2258 28.5919 16.2406 28.5713 16.2549C28.5398 16.2782 28.5244 16.3081 28.5244 16.3438C28.5245 16.3788 28.5373 16.409 28.5625 16.4346C28.5878 16.4601 28.62 16.4736 28.6592 16.4736C28.7028 16.4736 28.7445 16.4584 28.7842 16.4287C28.8135 16.406 28.8326 16.3776 28.8418 16.3447C28.848 16.3232 28.8516 16.2825 28.8516 16.2227V16.1719C28.8205 16.1827 28.7704 16.196 28.7031 16.2109ZM14.6318 15.8613C14.5682 15.8613 14.5151 15.8864 14.4717 15.9365C14.4284 15.9865 14.4063 16.0584 14.4062 16.1523C14.4062 16.2467 14.4283 16.319 14.4717 16.3691C14.5151 16.4192 14.5682 16.4443 14.6318 16.4443C14.6954 16.4443 14.7489 16.4193 14.792 16.3691C14.8349 16.3191 14.8564 16.2465 14.8564 16.1514C14.8564 16.0585 14.8349 15.9866 14.792 15.9365C14.7489 15.8864 14.6954 15.8613 14.6318 15.8613ZM8.23633 15.8477C8.17854 15.8477 8.1302 15.8712 8.09277 15.918C8.05529 15.9649 8.03711 16.0369 8.03711 16.1328C8.03716 16.2331 8.05547 16.3068 8.09277 16.3535C8.13012 16.4003 8.17663 16.4237 8.23145 16.4238C8.29028 16.4238 8.34021 16.3995 8.38086 16.3516C8.42135 16.3036 8.44237 16.2328 8.44238 16.1387C8.44238 16.0406 8.4225 15.9677 8.38379 15.9199C8.34489 15.8723 8.2957 15.8477 8.23633 15.8477ZM25.5596 16.1104H25.9082L25.7305 15.625L25.5596 16.1104ZM9.88672 15.8477C9.83341 15.8477 9.78963 15.8688 9.75488 15.9092C9.72016 15.9495 9.70264 16.004 9.70312 16.0732H10.0684C10.0666 15.9998 10.0485 15.9436 10.0137 15.9053C9.97895 15.8671 9.9365 15.8477 9.88672 15.8477ZM21.1992 15.8477C21.1459 15.8477 21.1021 15.8688 21.0674 15.9092C21.0326 15.9495 21.0151 16.004 21.0156 16.0732H21.3809C21.379 15.9998 21.361 15.9436 21.3262 15.9053C21.2915 15.8671 21.249 15.8477 21.1992 15.8477ZM27.6719 15.8477C27.6184 15.8477 27.5748 15.8688 27.54 15.9092C27.5053 15.9495 27.4877 16.004 27.4883 16.0732H27.8535C27.8517 15.9998 27.8335 15.9436 27.7988 15.9053C27.764 15.8671 27.7216 15.8477 27.6719 15.8477ZM16.1572 15.9131H16.2969C16.3975 15.9131 16.4651 15.9064 16.499 15.8926C16.5329 15.8788 16.5589 15.8565 16.5781 15.8271C16.5973 15.798 16.6074 15.7643 16.6074 15.7256C16.6074 15.6777 16.5944 15.6376 16.5674 15.6064C16.5403 15.5753 16.5052 15.5566 16.4639 15.5488C16.4332 15.5429 16.372 15.5391 16.2803 15.5391H16.1572V15.9131ZM6.40527 15.5498H6.16113V15.3193H6.40527V15.5498ZM7.69336 8.03613C8.39034 8.03615 8.88745 8.07728 9.18359 8.15918C9.90628 8.35953 10.2676 8.92103 10.2676 9.84277C10.2676 9.91838 10.2617 10.0316 10.251 10.1826H8.58984C8.58984 9.9015 8.55789 9.71224 8.49414 9.61621C8.39508 9.47437 8.12194 9.40332 7.67578 9.40332C7.24233 9.40335 6.9547 9.44447 6.81445 9.52637C6.67442 9.60861 6.60449 9.78754 6.60449 10.0625C6.60455 10.3113 6.66653 10.4751 6.79102 10.5537C6.88028 10.6095 6.99845 10.6425 7.14551 10.6523L7.48047 10.6768C8.19794 10.7259 8.64617 10.7606 8.8252 10.7803C9.39297 10.8393 9.80515 10.9948 10.0605 11.2471C10.2614 11.4438 10.3807 11.7011 10.4189 12.0186C10.4413 12.2086 10.4531 12.4241 10.4531 12.6631C10.4531 13.2138 10.4019 13.6174 10.2998 13.873C10.1148 14.3419 9.69913 14.6383 9.05273 14.7627C8.78191 14.8153 8.36764 14.8418 7.81055 14.8418C6.88024 14.8418 6.2313 14.7847 5.86523 14.6699C5.41615 14.5293 5.11991 14.2442 4.97656 13.8154C4.89672 13.5766 4.85742 13.1787 4.85742 12.6221H6.51855C6.51855 12.6841 6.51855 12.732 6.51855 12.7646C6.51862 13.0615 6.60142 13.2529 6.7666 13.3379C6.88114 13.3966 7.02003 13.427 7.18262 13.4307H7.79297C8.10459 13.4307 8.30385 13.4139 8.38965 13.3809C8.54199 13.319 8.64255 13.2197 8.69043 13.082C8.71586 12.9971 8.72852 12.8864 8.72852 12.752C8.72843 12.451 8.62101 12.2679 8.4082 12.2021C8.32793 12.1762 7.95783 12.1396 7.29785 12.0938C6.76709 12.0547 6.39798 12.0169 6.19141 11.9805C5.64753 11.8756 5.28438 11.6605 5.10352 11.333C4.94457 11.0547 4.86524 10.6335 4.86523 10.0703C4.86523 9.64162 4.90835 9.29772 4.99414 9.03906C5.0801 8.78027 5.21899 8.58359 5.41016 8.44922C5.69014 8.243 6.04829 8.12214 6.48438 8.08594C6.84731 8.05332 7.2505 8.03613 7.69336 8.03613ZM20.8838 8C21.3397 8.00002 21.6876 8.03855 21.9268 8.11523C22.4739 8.29202 22.8413 8.65413 23.0293 9.20117C23.1263 9.48819 23.1748 9.9202 23.1748 10.4971C23.1748 11.191 23.1211 11.6905 23.0146 11.9941C22.8013 12.5942 22.3621 12.9396 21.6992 13.0293C21.6212 13.0427 21.2889 13.0548 20.7031 13.0645L20.4072 13.0752H19.3418V14.8418H17.5566V8H20.8838ZM29.1357 14.8418H27.3271L26.9863 13.6592H24.5986L24.2783 14.8418H22.4307L24.4238 8H27.1172L29.1357 14.8418ZM24.9834 12.3262H26.6318L25.7949 9.36035L24.9834 12.3262ZM19.3428 11.4883H20.4561C20.8085 11.4752 21.0231 11.447 21.1006 11.4033C21.2061 11.3435 21.2772 11.2235 21.3125 11.0439C21.335 10.9243 21.3467 10.746 21.3467 10.5098C21.3467 10.2207 21.3243 10.0063 21.2793 9.86621C21.2151 9.67004 21.0609 9.55026 20.8174 9.50684C20.7692 9.50028 20.6534 9.49707 20.4707 9.49707H19.3428V11.4883Z"
+                fill="#10298E"
+            />
+            <path
+                fillRule="evenodd"
+                clipRule="evenodd"
+                d="M15.0922 8.96253C15.8286 8.96253 16.4859 9.31236 16.918 9.86032L17.3029 9.00934C16.7009 8.42262 15.8816 8.06091 14.9779 8.06091C13.571 8.06091 12.3674 8.93713 11.8734 10.1775H11.1229L10.6797 11.1572H11.6452C11.638 11.2481 11.6333 11.339 11.6333 11.4318C11.6333 11.5441 11.639 11.6551 11.6498 11.7647H11.1645L10.7214 12.7448H11.8965C12.4045 13.9537 13.593 14.8025 14.9779 14.8025C15.6759 14.8025 16.3235 14.5868 16.8597 14.2185V13.0174C16.4279 13.5244 15.7963 13.8447 15.0922 13.8447C14.2691 13.8447 13.5451 13.4071 13.1235 12.7448H15.5841L16.0272 11.7647H12.7614C12.7446 11.6468 12.7356 11.5263 12.7356 11.4035C12.7356 11.3205 12.7398 11.2383 12.7475 11.1572H16.3018L16.7449 10.1775H13.0549C13.463 9.45122 14.2224 8.96253 15.0922 8.96253Z"
+                fill="#FFBE00"
+            />
+        </svg>
+    );
+};
+
+export default SEPAIcon;
diff --git a/src/components/foundations/payment-icons/shop-pay-icon.tsx b/src/components/foundations/payment-icons/shop-pay-icon.tsx
new file mode 100644
index 0000000..c7662af
--- /dev/null
+++ b/src/components/foundations/payment-icons/shop-pay-icon.tsx
@@ -0,0 +1,15 @@
+import type { SVGProps } from "react";
+
+const ShopPayIcon = (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="#5A31F4" />
+            <path
+                d="M19.27 10.9738C19.27 12.4699 18.2211 13.5379 16.7554 13.5379H15.3744C15.3592 13.5379 15.3441 13.5409 15.33 13.5467C15.3159 13.5526 15.3032 13.5612 15.2924 13.572C15.2816 13.5828 15.2731 13.5956 15.2673 13.6097C15.2616 13.6238 15.2586 13.6389 15.2587 13.6542V15.6205C15.2587 15.6512 15.2465 15.6807 15.2248 15.7025C15.2032 15.7243 15.1737 15.7366 15.143 15.7368H14.1767C14.1537 15.7367 14.1313 15.7298 14.1122 15.717C14.0931 15.7042 14.0782 15.6861 14.0694 15.6649C14.0635 15.651 14.0605 15.6361 14.0604 15.6211V8.52541C14.0603 8.51017 14.0632 8.49506 14.069 8.48095C14.0748 8.46684 14.0833 8.45402 14.0941 8.44321C14.1048 8.43241 14.1176 8.42383 14.1317 8.41798C14.1458 8.41213 14.1608 8.40912 14.1761 8.40912H16.7615C18.2211 8.40743 19.27 9.47543 19.27 10.9738ZM18.0649 10.9738C18.0649 10.1136 17.4784 9.48498 16.6829 9.48498H15.3744C15.3592 9.48498 15.3441 9.48799 15.33 9.49384C15.3159 9.4997 15.3032 9.50827 15.2924 9.51908C15.2816 9.52988 15.2731 9.54271 15.2673 9.55682C15.2616 9.57092 15.2586 9.58603 15.2587 9.60128V12.3395C15.2587 12.3702 15.2709 12.3997 15.2926 12.4214C15.3143 12.4431 15.3437 12.4553 15.3744 12.4553H16.6829C17.4784 12.4609 18.0649 11.8317 18.0649 10.9738ZM19.5565 14.3755C19.5465 14.1461 19.594 13.9178 19.6947 13.7113C19.7953 13.5049 19.946 13.3269 20.133 13.1935C20.5099 12.9098 21.0993 12.7631 21.9645 12.7328L22.8858 12.7002V12.4283C22.8858 11.8833 22.5206 11.653 21.9341 11.653C21.3476 11.653 20.9757 11.8609 20.8903 12.2008C20.8833 12.2247 20.8686 12.2456 20.8485 12.2602C20.8283 12.2749 20.8039 12.2824 20.779 12.2817H19.8689C19.8521 12.2821 19.8355 12.2789 19.8201 12.2722C19.8048 12.2655 19.7911 12.2554 19.78 12.2428C19.769 12.2302 19.7608 12.2153 19.7562 12.1992C19.7516 12.1831 19.7505 12.1662 19.7532 12.1496C19.888 11.344 20.5582 10.7316 21.9757 10.7316C23.4836 10.7316 24.028 11.4339 24.028 12.7744V15.6205C24.0277 15.6515 24.0151 15.6812 23.993 15.703C23.9709 15.7248 23.941 15.7369 23.91 15.7368H22.9926C22.9619 15.7367 22.9324 15.7246 22.9105 15.7031C22.8998 15.6923 22.8913 15.6795 22.8855 15.6654C22.8797 15.6514 22.8768 15.6363 22.8768 15.6211V15.4081C22.8772 15.3905 22.8722 15.3733 22.8625 15.3586C22.8528 15.3439 22.8389 15.3325 22.8226 15.3258C22.8063 15.3192 22.7883 15.3177 22.7712 15.3214C22.754 15.3252 22.7383 15.3341 22.7263 15.3469C22.451 15.6463 22.0066 15.8626 21.2948 15.8626C20.2476 15.8626 19.5565 15.3177 19.5565 14.3755ZM22.8858 13.7587V13.5379L21.6925 13.6008C21.0639 13.6328 20.6981 13.8941 20.6981 14.334C20.6981 14.7317 21.0335 14.9519 21.6195 14.9519C22.4156 14.9519 22.8858 14.5222 22.8858 13.7587ZM24.9493 17.8874V17.0627C24.9495 17.0454 24.9535 17.0283 24.961 17.0127C24.9685 16.9971 24.9793 16.9834 24.9927 16.9725C25.0061 16.9615 25.0218 16.9537 25.0385 16.9495C25.0553 16.9452 25.0728 16.9448 25.0898 16.9481C25.2302 16.9745 25.3735 16.9879 25.5168 16.9885C25.7631 17.0005 26.0062 16.9295 26.2074 16.7869C26.4086 16.6443 26.5561 16.4383 26.6263 16.202L26.6859 16.0121C26.6945 15.9866 26.6945 15.9589 26.6859 15.9334L24.7741 11.0232C24.7671 11.0054 24.7647 10.9862 24.7668 10.9672C24.769 10.9483 24.7757 10.9301 24.7864 10.9143C24.7971 10.8985 24.8115 10.8855 24.8284 10.8765C24.8452 10.8675 24.864 10.8627 24.883 10.8625H25.81C25.8337 10.8628 25.8568 10.8701 25.8762 10.8837C25.8957 10.8972 25.9106 10.9163 25.919 10.9384L27.2174 14.4014C27.2255 14.4244 27.2406 14.4443 27.2605 14.4584C27.2804 14.4725 27.3042 14.48 27.3286 14.48C27.353 14.48 27.3768 14.4725 27.3967 14.4584C27.4166 14.4443 27.4317 14.4244 27.4398 14.4014L28.5674 10.9479C28.5752 10.9243 28.5903 10.9038 28.6105 10.8893C28.6306 10.8747 28.6549 10.867 28.6798 10.867H29.6388C29.658 10.8671 29.6769 10.8719 29.6938 10.8809C29.7108 10.8899 29.7254 10.9029 29.7362 10.9187C29.7471 10.9346 29.754 10.9528 29.7563 10.9719C29.7586 10.991 29.7562 11.0103 29.7494 11.0283L27.7045 16.4812C27.2337 17.7486 26.4263 18.0728 25.5376 18.0728C25.369 18.0773 25.2005 18.0571 25.0375 18.0127C25.0105 18.0055 24.9868 17.989 24.9706 17.9661C24.9545 17.9432 24.947 17.9153 24.9493 17.8874ZM7.85069 8.00012C6.63273 7.99144 5.45776 8.44985 4.56748 9.28105C4.5294 9.31591 4.50567 9.3637 4.50089 9.41511C4.49612 9.46651 4.51064 9.51785 4.54163 9.55914L5.09277 10.312C5.11063 10.337 5.13378 10.3579 5.16057 10.373C5.18736 10.3882 5.21714 10.3973 5.24783 10.3997C5.27851 10.4021 5.30936 10.3978 5.33818 10.387C5.36701 10.3762 5.39312 10.3592 5.41468 10.3372C5.73481 10.0172 6.11551 9.76418 6.53454 9.59296C6.95358 9.42174 7.40254 9.33575 7.85518 9.34004C9.74511 9.34004 10.7322 10.7625 10.7322 12.1671C10.7322 13.6941 9.69511 14.7682 8.20463 14.7896C7.05292 14.7896 6.18492 14.0261 6.18492 13.0176C6.18612 12.7629 6.24384 12.5115 6.35391 12.2818C6.46399 12.052 6.62367 11.8495 6.82145 11.689C6.86327 11.654 6.8897 11.6041 6.89505 11.5499C6.90041 11.4957 6.88427 11.4415 6.85011 11.3991L6.27088 10.6676C6.25336 10.6455 6.23159 10.6271 6.20685 10.6135C6.18211 10.5999 6.15491 10.5915 6.12684 10.5886C6.09877 10.5857 6.07041 10.5885 6.04343 10.5967C6.01645 10.605 5.9914 10.6186 5.96975 10.6367C5.61402 10.9233 5.32696 11.2859 5.12961 11.6979C4.93227 12.1099 4.82965 12.5608 4.82928 13.0176C4.82928 14.7536 6.30459 16.1155 8.19452 16.1267H8.2198C10.4637 16.0975 12.0862 14.4356 12.0862 12.1642C12.0862 10.1474 10.6007 8.00012 7.85125 8.00012H7.85069Z"
+                fill="white"
+            />
+        </svg>
+    );
+};
+
+export default ShopPayIcon;
diff --git a/src/components/foundations/payment-icons/shopee-pay-icon.tsx b/src/components/foundations/payment-icons/shopee-pay-icon.tsx
new file mode 100644
index 0000000..f41cdbc
--- /dev/null
+++ b/src/components/foundations/payment-icons/shopee-pay-icon.tsx
@@ -0,0 +1,59 @@
+import type { SVGProps } from "react";
+
+const ShopeePayIcon = (props: SVGProps<SVGSVGElement>) => {
+    return (
+        <svg width="34" height="24" viewBox="0 0 34 24" fill="none" {...props}>
+            <path
+                d="M4 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 20V4C0.5 2.067 2.067 0.5 4 0.5Z"
+                fill="white"
+            />
+            <path
+                d="M4 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 20V4C0.5 2.067 2.067 0.5 4 0.5Z"
+                className="stroke-border-secondary"
+            />
+            <path
+                d="M12.1095 6.56665L4.3434 7.60168C4.3434 7.60168 4 7.64316 4 8.05505V15.4315C4 15.4315 4.04534 16.2948 5.0331 16.2948H13.8352C13.8352 16.2948 14.6194 16.1067 14.6194 15.3225V9.23381C14.6194 9.23381 14.6349 8.37048 13.5998 8.37048H5.1122C5.1122 8.37048 4.7823 8.3155 4.69838 7.96824C4.6733 7.83126 4.72732 7.81679 4.87298 7.81679H12.6671V6.97758C12.6671 6.97758 12.6401 6.52614 12.1105 6.56569L12.1095 6.56665Z"
+                fill="#ED4C2F"
+            />
+            <path
+                d="M9.46764 15.0418C8.82328 15.0418 8.34965 14.7794 7.65031 14.0868C7.52587 13.9633 7.52491 13.7627 7.64838 13.6373C7.77185 13.5129 7.97249 13.5119 8.09789 13.6354C8.83389 14.3637 9.17633 14.545 9.76474 14.3858C10.1062 14.2932 10.413 13.8572 10.4313 13.3576C10.4448 12.9688 10.1708 12.7151 9.61716 12.6042C8.62168 12.4055 8.03423 12.0245 7.87121 11.4727C7.74002 11.028 7.91172 10.5322 8.34387 10.1116L8.36123 10.0952C9.28919 9.31969 10.3667 9.89749 10.8065 10.3113C10.9339 10.4319 10.9406 10.6325 10.82 10.7608C10.7004 10.8882 10.4998 10.8949 10.3715 10.7753C10.3339 10.7406 9.50044 9.98334 8.77794 10.5756C8.531 10.8197 8.42007 11.0869 8.47988 11.2923C8.56862 11.5914 9.0162 11.8364 9.74063 11.9811C10.9724 12.227 11.0776 13.0412 11.066 13.3798C11.04 14.1167 10.4226 14.9424 9.84384 15.0157C9.71169 15.0321 9.58726 15.0418 9.46861 15.0418H9.46764Z"
+                fill="white"
+            />
+            <path
+                d="M17.887 8.32673C17.7616 8.25053 17.613 8.18107 17.4355 8.13284C17.1085 8.04024 16.8712 7.9187 16.7584 7.76629C16.6571 7.63317 16.6571 7.45954 16.7786 7.23768C16.8471 7.10456 17.0121 7.01968 17.2262 7.00424C17.4481 6.98784 17.7182 7.0409 18.0008 7.18559C18.0693 7.22225 18.158 7.19331 18.1947 7.12096C18.2313 7.05247 18.2024 6.96373 18.13 6.92707C17.7992 6.7573 17.4731 6.69364 17.2021 6.71293C16.8876 6.73705 16.6416 6.87402 16.5201 7.09588C16.3388 7.4306 16.3503 7.70455 16.5201 7.9351C16.6773 8.14056 16.9638 8.29779 17.3545 8.40679C17.5079 8.45117 17.6371 8.50808 17.7375 8.56788C17.8908 8.66049 17.9911 8.76949 18.0403 8.88621C18.0886 8.99521 18.0924 9.11578 18.0606 9.23347C18.0442 9.29038 18.0162 9.34633 17.9844 9.40324C17.9844 9.41096 17.9767 9.41964 17.968 9.43121C17.8513 9.60484 17.6612 9.69359 17.4317 9.69359C17.178 9.69359 16.8674 9.5923 16.5365 9.3907C16.4883 9.36273 16.4439 9.33379 16.4034 9.30581C16.3349 9.26144 16.2462 9.2817 16.2018 9.34633C16.1574 9.41482 16.1777 9.50356 16.2423 9.54793C16.2944 9.58459 16.3436 9.61256 16.3793 9.64439C16.7584 9.87397 17.1172 9.98683 17.424 9.98683C17.7548 9.98683 18.0288 9.85757 18.2024 9.60002C18.2063 9.5923 18.2149 9.57591 18.2265 9.55951C18.2747 9.4833 18.3114 9.39842 18.3355 9.31739C18.3876 9.1399 18.3799 8.95084 18.3037 8.7772C18.2313 8.60743 18.0944 8.4502 17.8879 8.32577L17.887 8.32673Z"
+                fill="#ED4C2F"
+            />
+            <path
+                d="M20.1079 8.00845C19.9583 7.96794 19.7857 7.9718 19.6082 8.02485C19.4403 8.07405 19.2696 8.16761 19.1085 8.30748V6.85091C19.1085 6.77471 19.0439 6.71394 18.9629 6.71394C18.8818 6.71394 18.8172 6.77471 18.8172 6.85091V9.84701C18.8172 9.92321 18.8818 9.98398 18.9629 9.98398C19.0439 9.98398 19.1085 9.92321 19.1085 9.84701V8.72516C19.1085 8.72516 19.1143 8.72034 19.1162 8.71744C19.2976 8.49558 19.4992 8.35861 19.6931 8.29784C19.8185 8.26118 19.9352 8.25732 20.0355 8.2853C20.132 8.31327 20.2091 8.36632 20.2651 8.44253C20.322 8.52356 20.3538 8.63159 20.3538 8.76953V9.84218C20.3538 9.92321 20.4185 9.98784 20.4995 9.98784C20.5805 9.98784 20.6452 9.92321 20.6452 9.84218V8.76953C20.6452 8.57179 20.5931 8.40684 20.4995 8.27758C20.403 8.1406 20.2661 8.05186 20.1079 8.00749V8.00845Z"
+                fill="#ED4C2F"
+            />
+            <path
+                d="M22.0686 7.98046C21.7946 7.98046 21.54 8.09332 21.3586 8.27467C21.1773 8.45602 21.0644 8.70585 21.0644 8.98462C21.0644 9.2634 21.1773 9.51323 21.3586 9.69458C21.54 9.87593 21.7898 9.98879 22.0686 9.98879C22.3474 9.98879 22.5972 9.87593 22.7785 9.69458C22.9599 9.51323 23.0727 9.2634 23.0727 8.98462C23.0727 8.70585 22.9599 8.45602 22.7785 8.27467C22.5972 8.09332 22.3474 7.98046 22.0686 7.98046ZM22.5769 9.49201C22.4438 9.62127 22.2663 9.70133 22.0686 9.70133C21.8708 9.70133 21.6895 9.62031 21.5602 9.49201C21.431 9.36275 21.3509 9.18141 21.3509 8.98366C21.3509 8.78591 21.4319 8.60457 21.5602 8.47531C21.6933 8.34605 21.8708 8.26599 22.0686 8.26599C22.2663 8.26599 22.4477 8.34701 22.5769 8.47531C22.7062 8.60457 22.7863 8.78591 22.7863 8.98366C22.7863 9.18141 22.7052 9.36275 22.5769 9.49201Z"
+                fill="#ED4C2F"
+            />
+            <path
+                d="M24.5175 7.98038C24.2397 7.98038 23.9889 8.09324 23.8075 8.27459C23.795 8.2823 23.7872 8.29484 23.7757 8.30642V8.12507C23.7757 8.04404 23.711 7.97941 23.63 7.97941C23.549 7.97941 23.4844 8.04404 23.4844 8.12507V10.9803C23.4844 11.0614 23.549 11.126 23.63 11.126C23.711 11.126 23.7757 11.0614 23.7757 10.9803V9.6617C23.7882 9.66942 23.7959 9.68196 23.8075 9.69353C23.9889 9.87488 24.2387 9.98774 24.5175 9.98774C24.7962 9.98774 25.0461 9.87488 25.2274 9.69353C25.4088 9.51219 25.5216 9.26235 25.5216 8.98358C25.5216 8.7048 25.4088 8.45497 25.2274 8.27362C25.0461 8.09227 24.7962 7.97941 24.5175 7.97941V7.98038ZM25.021 9.49193C24.8879 9.62119 24.7104 9.70125 24.5126 9.70125C24.3149 9.70125 24.1335 9.62022 24.0043 9.49193C23.875 9.36267 23.795 9.18132 23.795 8.98358C23.795 8.78583 23.876 8.60448 24.0043 8.47523C24.1374 8.34597 24.3149 8.2659 24.5126 8.2659C24.7104 8.2659 24.8917 8.34693 25.021 8.47523C25.1502 8.60352 25.2303 8.78583 25.2303 8.98358C25.2303 9.18132 25.1493 9.36267 25.021 9.49193Z"
+                fill="#ED4C2F"
+            />
+            <path
+                d="M27.5212 8.24565C27.3563 8.07588 27.1296 7.97941 26.8836 7.97941C26.6376 7.97941 26.4081 8.07202 26.246 8.24565C25.8987 8.62088 25.9036 9.02409 26.0405 9.43116C26.1013 9.61636 26.2296 9.74948 26.3791 9.84691C26.5286 9.94337 26.71 9.99256 26.9154 9.98774C27.117 9.98388 27.3428 9.93565 27.5849 9.83437C27.6572 9.80254 27.6939 9.71765 27.6611 9.6453C27.6293 9.57296 27.5444 9.5363 27.472 9.5691C27.2627 9.65784 27.0727 9.70222 26.9116 9.70222C26.7621 9.70222 26.6338 9.67038 26.5325 9.60575C26.436 9.54113 26.3589 9.44852 26.3068 9.32312C26.2788 9.24209 26.2547 9.15335 26.2421 9.05689H27.5772C27.6495 9.05689 27.8878 9.07329 27.7624 8.66526C27.7141 8.5196 27.6572 8.38262 27.5203 8.24565H27.5212ZM26.2595 8.76268C26.2962 8.6421 26.3646 8.53696 26.4486 8.45208C26.5653 8.33922 26.7187 8.27073 26.8846 8.27073C27.0505 8.27073 27.2029 8.33922 27.3206 8.45208C27.4055 8.53696 27.4701 8.64114 27.5145 8.76268H26.2595Z"
+                fill="#ED4C2F"
+            />
+            <path
+                d="M29.9644 8.66526C29.9162 8.5196 29.8593 8.38262 29.7223 8.24565C29.5573 8.07588 29.3306 7.97941 29.0847 7.97941C28.8387 7.97941 28.6091 8.07202 28.4471 8.24565C28.0998 8.62088 28.1046 9.02409 28.2416 9.43116C28.3024 9.61636 28.4307 9.74948 28.5802 9.84691C28.7297 9.94337 28.911 9.99256 29.1165 9.98774C29.3181 9.98388 29.5438 9.93565 29.7859 9.83437C29.8583 9.80254 29.8949 9.71765 29.8622 9.6453C29.8294 9.57296 29.7454 9.5363 29.6731 9.5691C29.4638 9.65784 29.2737 9.70222 29.1126 9.70222C28.9631 9.70222 28.8348 9.67038 28.7336 9.60575C28.6371 9.54113 28.5599 9.44852 28.5078 9.32312C28.4799 9.24209 28.4557 9.15335 28.4432 9.05689H29.7782C29.8506 9.05689 30.0888 9.07329 29.9634 8.66526H29.9644ZM28.4596 8.76268C28.4963 8.6421 28.5647 8.53696 28.6487 8.45208C28.7654 8.33922 28.9188 8.27073 29.0847 8.27073C29.2506 8.27073 29.403 8.33922 29.5207 8.45208C29.6056 8.53696 29.6702 8.64114 29.7146 8.76268H28.4596Z"
+                fill="#ED4C2F"
+            />
+            <path
+                d="M16.2781 10.7077V16.2929H17.1251V14.626H18.4572C18.9038 14.626 19.3466 14.518 19.7314 14.2913C20.1877 14.0202 20.6449 13.5437 20.6449 12.7199C20.6449 11.9473 20.2437 11.4572 19.8173 11.1544C19.3909 10.8515 18.8845 10.7077 18.3675 10.7077H16.2781ZM18.6318 13.7328H17.1251V11.5441H18.4852C18.5093 11.5441 18.5315 11.545 18.5556 11.5479C18.762 11.5711 19.6668 11.7273 19.6668 12.6977C19.6668 13.7337 18.6318 13.7337 18.6318 13.7337V13.7328Z"
+                fill="#ED4C2F"
+            />
+            <path
+                d="M24.0025 12.3245V12.7171C23.6591 12.4373 23.2221 12.2705 22.7456 12.2705C21.644 12.2705 20.7469 13.1666 20.7469 14.2682C20.7469 15.3698 21.644 16.2669 22.7456 16.2669C23.2221 16.2669 23.6591 16.1 24.0025 15.8202V16.2669H24.8494V12.3245H24.0025ZM22.7456 15.5251C22.052 15.5251 21.4887 14.9627 21.4887 14.2682C21.4887 13.5737 22.052 13.0123 22.7456 13.0123C23.4391 13.0123 24.0015 13.5737 24.0025 14.2663V14.2691C24.0025 14.9627 23.4401 15.5251 22.7456 15.5251Z"
+                fill="#ED4C2F"
+            />
+            <path d="M25.23 12.2705H26.3624L27.6926 14.8151L28.9756 12.2705H30L26.9509 17.9453H25.9534L27.1158 15.8386L25.23 12.2705Z" fill="#ED4C2F" />
+        </svg>
+    );
+};
+
+export default ShopeePayIcon;
diff --git a/src/components/foundations/payment-icons/skrill-icon.tsx b/src/components/foundations/payment-icons/skrill-icon.tsx
new file mode 100644
index 0000000..693522c
--- /dev/null
+++ b/src/components/foundations/payment-icons/skrill-icon.tsx
@@ -0,0 +1,22 @@
+import type { SVGProps } from "react";
+
+const SkrillIcon = (props: SVGProps<SVGSVGElement>) => {
+    return (
+        <svg width="34" height="24" viewBox="0 0 34 24" fill="none" {...props}>
+            <path
+                d="M4 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 20V4C0.5 2.067 2.067 0.5 4 0.5Z"
+                fill="white"
+            />
+            <path
+                d="M4 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 20V4C0.5 2.067 2.067 0.5 4 0.5Z"
+                className="stroke-border-secondary"
+            />
+            <path
+                d="M8.36816 8.45508C9.66362 8.45508 10.3623 8.66251 10.9639 8.87793L10.9941 8.88672V10.6533L10.9717 10.6475C10.7302 10.5428 10.4463 10.4395 10.4463 10.4395C9.93674 10.2832 9.22363 10.1172 8.67285 10.1172C8.35943 10.1172 7.52573 10.1175 7.52539 10.7617C7.52539 11.2962 8.10611 11.335 8.35645 11.3516C10.1922 11.4777 11.286 12.3984 11.2861 13.8145C11.2861 15.0641 10.3079 16.3242 8.125 16.3242C7.11294 16.3242 6.24928 16.2229 5.4834 16.0166V14.1973C5.99485 14.4127 6.83798 14.6387 7.70605 14.6387C8.49801 14.6386 8.96875 14.3702 8.96875 13.9141C8.96848 13.3621 8.39307 13.3281 8.17578 13.3145C5.61912 13.136 5.34375 11.5863 5.34375 10.9287C5.34394 9.78676 6.13526 8.45516 8.36816 8.45508ZM13.8291 12.5225C14.5965 11.5719 14.913 10.6544 14.957 10.54H17.2949C17.228 10.7589 16.8111 12.0738 15.8604 13.3086C15.8604 13.3086 16.92 15.2099 17.1621 16.2412H14.7129C14.7114 16.2342 14.4196 14.8693 13.8291 13.9619V16.2412H11.7842V8.86914L13.8291 8.45508V12.5225ZM20.332 10.4629C20.345 10.4624 20.6663 10.4505 20.8574 10.4922V12.1572C19.6972 12.1982 19.5694 12.627 19.5693 13.6279V16.2412H17.5713V13.0371C17.5714 11.3647 18.5018 10.5233 20.332 10.4629ZM23.4307 16.2412H21.4492V10.5459H23.4307V16.2412ZM26.251 16.2412H24.2705V8.81836L26.251 8.45508V16.2412ZM29.1436 16.2412H27.1621V8.81836L29.1436 8.45508V16.2412ZM22.4395 8C22.979 8.00005 23.4158 8.44786 23.416 9C23.416 9.55265 22.9791 9.99995 22.4395 10C21.9007 10 21.4629 9.55268 21.4629 9C21.4631 8.44783 21.9008 8 22.4395 8Z"
+                fill="#862165"
+            />
+        </svg>
+    );
+};
+
+export default SkrillIcon;
diff --git a/src/components/foundations/payment-icons/sofort-icon.tsx b/src/components/foundations/payment-icons/sofort-icon.tsx
new file mode 100644
index 0000000..d2a0d78
--- /dev/null
+++ b/src/components/foundations/payment-icons/sofort-icon.tsx
@@ -0,0 +1,17 @@
+import type { SVGProps } from "react";
+
+const SofortIcon = (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="#F884A1" />
+            <path
+                fillRule="evenodd"
+                clipRule="evenodd"
+                d="M11.0127 16.5826C11.4447 16.5827 11.8448 16.7908 12.0225 17.194L11.4521 17.5641C11.3431 17.3812 11.1941 17.2604 10.9922 17.2604C10.7539 17.2604 10.6045 17.4272 10.6045 17.6393C10.6047 17.8925 10.8228 17.9719 11.1699 18.0758C11.715 18.2421 12.1592 18.5203 12.1592 19.1647C12.1591 19.8589 11.6338 20.3326 10.9473 20.3326C10.4669 20.3325 10.0551 20.108 9.80078 19.7506L10.2734 19.2643C10.4148 19.4513 10.6491 19.6549 10.9561 19.6549C11.2426 19.6548 11.4404 19.4805 11.4404 19.1979C11.4404 18.8986 11.2063 18.8235 10.8389 18.7154C10.1644 18.5117 9.88965 18.1501 9.88965 17.6803C9.88971 17.09 10.3262 16.5826 11.0127 16.5826ZM13.7217 17.6803C14.4486 17.6803 15.038 18.279 15.0381 19.0065C15.0381 19.734 14.4486 20.3326 13.7217 20.3326C12.9948 20.3325 12.4053 19.7339 12.4053 19.0065C12.4053 18.279 12.9949 17.6804 13.7217 17.6803ZM18.2373 17.6803C18.9642 17.6803 19.5536 18.279 19.5537 19.0065C19.5537 19.734 18.9642 20.3326 18.2373 20.3326C17.5104 20.3325 16.9209 19.7339 16.9209 19.0065C16.921 18.279 17.5105 17.6804 18.2373 17.6803ZM23.8262 19.36C24.0805 19.36 24.2869 19.576 24.2871 19.8336C24.2871 20.0955 24.0766 20.3082 23.8262 20.3082C23.5719 20.308 23.3662 20.0954 23.3662 19.8336C23.3664 19.572 23.572 19.3602 23.8262 19.36ZM22.3447 17.3395C22.3447 17.6804 22.6158 17.9386 22.9873 17.9469V18.6158C22.7128 18.6158 22.4982 18.533 22.3447 18.3668V18.982C22.3449 19.4224 22.6234 19.6175 23.0068 19.6051V20.2701H22.9062C22.0662 20.2701 21.6582 19.6965 21.6582 19.0231V16.9449H22.3447V17.3395ZM16.7383 17.2936C16.3548 17.277 16.0762 17.477 16.0762 17.9176V18.1881C16.2296 18.0218 16.4482 17.9381 16.7188 17.9381V18.6119C16.3392 18.6202 16.0763 18.8693 16.0762 19.2184V20.2662H15.3896V17.8756C15.3898 17.2022 15.8018 16.6285 16.6377 16.6285H16.7383V17.2936ZM21.2617 18.4703C20.8498 18.4703 20.6114 18.7031 20.6113 19.1188V20.2662H19.9248V17.7506H20.5908V18.0377C20.7281 17.8091 20.9508 17.701 21.2617 17.7135V18.4703ZM13.7217 18.3453C13.3664 18.3455 13.0919 18.6325 13.0918 19.0065C13.0918 19.3847 13.3704 19.6675 13.7217 19.6676C14.073 19.6676 14.3516 19.3806 14.3516 19.0065C14.3515 18.6324 14.073 18.3453 13.7217 18.3453ZM18.2373 18.3453C17.8861 18.3454 17.6075 18.6324 17.6074 19.0065C17.6074 19.3847 17.886 19.6675 18.2373 19.6676C18.5927 19.6676 18.8672 19.3806 18.8672 19.0065C18.8671 18.6324 18.5886 18.3453 18.2373 18.3453ZM18.6895 4.16466C18.839 3.57454 19.4245 3.22509 20.0059 3.37462C20.5268 3.53257 20.8375 4.07741 20.7246 4.61778L19.7842 9.43517L20.1885 9.53185C20.3056 9.54855 20.4592 9.62399 20.6045 9.78185C20.8667 10.0687 20.992 10.5467 20.9355 11.2447C20.7566 13.4552 19.7121 14.9108 17.3359 14.9352C17.3167 14.9408 17.2964 14.9449 17.2754 14.9449C15.5215 14.9448 14.034 13.6262 13.9893 11.7438L13.5928 11.3365C13.1042 10.8336 13.0274 10.1312 13.4189 9.71544L13.459 9.66954C13.6272 9.49216 13.8489 9.39511 14.0752 9.38243C13.8021 8.82856 13.8871 8.22112 14.3115 7.92345L14.3721 7.88146C14.8381 7.60357 15.2397 7.7133 15.584 8.067L15.1875 4.71739C15.0545 4.13558 15.4018 3.49601 15.9346 3.3795C16.2052 3.3213 16.4925 3.37484 16.7227 3.53282C16.9527 3.69077 17.1135 3.93633 17.166 4.21056L17.8369 7.16564L18.6895 4.16466ZM17.4824 9.34923C17.3451 9.32429 17.2035 9.32013 17.0742 9.34923C16.8765 9.395 16.7511 9.50716 16.6865 9.72325C16.6 10.0202 16.6091 10.2454 16.7949 10.4264C16.8368 10.4436 16.8707 10.4725 16.8945 10.5084C17.022 10.5962 17.2019 10.6731 17.4463 10.7418L19.1221 11.1285C19.4006 11.1951 19.3118 11.623 19.0332 11.569L18.9805 11.5611C18.7705 11.5404 18.5325 11.5571 18.3145 11.6402C17.9066 11.7982 17.6525 12.1594 17.6201 12.8326C17.612 12.9573 17.5107 13.0486 17.3896 13.0445C17.2686 13.0362 17.1756 12.9328 17.1836 12.8082C17.2159 12.0641 17.4989 11.577 17.9512 11.3151L17.3408 11.1695C17.1288 11.1104 16.9509 11.0395 16.8027 10.9596C16.7319 11.0742 16.6433 11.1763 16.5332 11.2535L16.4844 11.2867C16.4562 11.3063 16.4268 11.3233 16.3975 11.3395C16.5937 11.7166 16.5436 12.1934 16.2422 12.5172L16.1973 12.5631C15.8177 12.9619 15.2003 12.9699 14.8086 12.5836L14.4814 12.2486C14.7438 13.5751 15.8789 14.4672 17.2168 14.4928C17.2204 14.4926 17.2239 14.4918 17.2275 14.4918C19.4164 14.5126 20.3373 13.2486 20.5029 11.2115C20.5514 10.6298 20.4546 10.2766 20.2852 10.0895C20.2409 10.0439 20.1965 10.0104 20.1562 9.99376L20.1074 9.97716L17.5635 9.36583C17.5514 9.36168 17.5228 9.35753 17.4824 9.34923ZM14.4131 9.92638C14.2163 9.78387 13.9427 9.80387 13.7744 9.98497L13.7344 10.0309C13.5244 10.2554 13.5681 10.68 13.9033 11.025L15.1152 12.2594C15.3293 12.4755 15.6728 12.4709 15.8828 12.2506L15.9229 12.2057C16.12 11.9988 16.126 11.6764 15.9492 11.4586C15.6313 11.4628 15.3173 11.3082 15.123 11.0162L14.4131 9.92638ZM15.4746 8.63439C15.1959 8.2145 14.9256 8.06913 14.6025 8.26036L14.5576 8.29357C14.3076 8.47244 14.275 8.89618 14.5332 9.30333L15.4863 10.7623C15.6559 11.02 15.9957 11.0872 16.2461 10.9127L16.2949 10.8834C16.3627 10.8378 16.4162 10.7732 16.4561 10.7008C16.219 10.4492 16.1596 10.1399 16.2246 9.78575L15.7393 9.04064C15.7251 9.02462 15.7132 9.00667 15.7041 8.98693L15.4746 8.63439ZM19.8887 3.80724C19.5495 3.72004 19.2022 3.93244 19.1094 4.28575L18.0234 8.11876C17.9911 8.23927 17.869 8.30533 17.752 8.27208C17.6615 8.24616 17.6027 8.16575 17.5957 8.07482L16.7383 4.30235C16.706 4.14022 16.6128 3.99831 16.4795 3.90685C16.3463 3.81564 16.1808 3.78671 16.0234 3.81993C15.7408 3.8824 15.5304 4.27351 15.6152 4.62267L15.6201 4.64708L16.1084 8.8004L16.418 9.27696C16.5525 9.08382 16.7454 8.96287 16.9775 8.9088C17.1712 8.86727 17.3689 8.87074 17.5586 8.90392C17.6149 8.91219 17.6556 8.92509 17.6719 8.92931L19.3594 9.33263L20.2969 4.52696C20.3615 4.21101 20.1794 3.8987 19.8887 3.80724Z"
+                fill="white"
+            />
+        </svg>
+    );
+};
+
+export default SofortIcon;
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/upi-icon.tsx b/src/components/foundations/payment-icons/upi-icon.tsx
new file mode 100644
index 0000000..f970827
--- /dev/null
+++ b/src/components/foundations/payment-icons/upi-icon.tsx
@@ -0,0 +1,110 @@
+import type { SVGProps } from "react";
+
+const UPIIcon = (props: SVGProps<SVGSVGElement>) => {
+    return (
+        <svg width="34" height="24" viewBox="0 0 34 24" fill="none" {...props}>
+            <path
+                d="M4 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 20V4C0.5 2.067 2.067 0.5 4 0.5Z"
+                fill="white"
+            />
+            <path
+                d="M4 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 20V4C0.5 2.067 2.067 0.5 4 0.5Z"
+                className="stroke-border-secondary"
+            />
+            <path
+                d="M4.20916 15.2498H4.40382L4.22294 16.0053C4.19609 16.1174 4.20115 16.2018 4.23826 16.2581C4.27522 16.3144 4.34402 16.3426 4.44458 16.3426C4.5445 16.3426 4.62644 16.3144 4.69046 16.2581C4.75455 16.2018 4.80001 16.1174 4.82686 16.0053L5.00767 15.2498H5.20485L5.01954 16.024C4.97928 16.1922 4.90753 16.3182 4.80479 16.4017C4.70198 16.4853 4.5672 16.527 4.40045 16.527C4.23355 16.527 4.11908 16.4853 4.05674 16.4021C3.99434 16.3189 3.98345 16.1928 4.02386 16.024L4.20916 15.2498Z"
+                fill="#696A6A"
+            />
+            <path
+                d="M5.17901 16.494L5.48863 15.2007L6.07694 15.9612C6.09268 15.9827 6.10857 16.0056 6.12424 16.03C6.13991 16.0544 6.15593 16.0818 6.17237 16.1124L6.3789 15.2499H6.56112L6.25171 16.5423L5.65102 15.7682C5.63493 15.7473 5.61996 15.7252 5.60598 15.702C5.59186 15.6787 5.57914 15.6543 5.56747 15.6289L5.36038 16.494H5.17901Z"
+                fill="#696A6A"
+            />
+            <path d="M6.54541 16.4942L6.84323 15.2501H7.04027L6.74253 16.4942H6.54541Z" fill="#696A6A" />
+            <path
+                d="M7.02463 16.494L7.32245 15.2499H7.99917L7.95806 15.4216H7.47845L7.40417 15.7317H7.88378L7.84134 15.9093H7.36166L7.22175 16.494H7.02463Z"
+                fill="#696A6A"
+            />
+            <path d="M7.91964 16.4942L8.21745 15.2501H8.41449L8.11675 16.4942H7.91964Z" fill="#696A6A" />
+            <path
+                d="M8.39893 16.494L8.69675 15.2499H9.37347L9.33236 15.4216H8.85275L8.77805 15.7334H9.25766L9.21522 15.9111H8.73561L8.63934 16.313H9.11894L9.07565 16.494H8.39893Z"
+                fill="#696A6A"
+            />
+            <path
+                d="M9.54274 16.3113H9.70844C9.79951 16.3113 9.86936 16.3051 9.91792 16.2926C9.96648 16.2802 10.011 16.2592 10.0519 16.2297C10.1073 16.1896 10.1536 16.1396 10.1909 16.0798C10.228 16.02 10.2562 15.9504 10.2752 15.8711C10.2941 15.7917 10.2993 15.7223 10.2907 15.6626C10.2821 15.6028 10.2597 15.5528 10.2235 15.5125C10.1963 15.4832 10.1604 15.4621 10.1156 15.4496C10.0707 15.4372 9.99761 15.4309 9.89599 15.4309H9.75348L9.54274 16.3113ZM9.30191 16.4941L9.59973 15.2499H9.86557C10.0384 15.2499 10.1579 15.2588 10.2241 15.2766C10.2902 15.2945 10.3448 15.3245 10.3877 15.3664C10.4447 15.4213 10.4809 15.4919 10.4965 15.5779C10.5121 15.664 10.5066 15.7623 10.4802 15.8728C10.4537 15.9833 10.4122 16.0812 10.3556 16.1664C10.2991 16.2517 10.229 16.3221 10.1457 16.3776C10.0826 16.4195 10.015 16.4494 9.94322 16.4673C9.87119 16.4851 9.76381 16.4941 9.62074 16.4941H9.30191Z"
+                fill="#696A6A"
+            />
+            <path
+                d="M11.4402 15.7703H11.4908C11.6 15.7703 11.6759 15.758 11.7182 15.7337C11.7605 15.7093 11.789 15.6663 11.8038 15.6045C11.8196 15.5382 11.8114 15.4914 11.779 15.4643C11.7465 15.4371 11.6782 15.4234 11.5738 15.4234H11.5232L11.4402 15.7703ZM11.3881 15.9358L11.2544 16.4943H11.0698L11.3677 15.2502H11.6658C11.7541 15.2502 11.818 15.2551 11.8574 15.265C11.8966 15.2748 11.929 15.2912 11.9546 15.3139C11.9857 15.3428 12.0061 15.3817 12.016 15.4307C12.0257 15.4798 12.0236 15.5337 12.0096 15.5925C11.9954 15.6515 11.9716 15.7059 11.9382 15.7558C11.9047 15.8056 11.8655 15.8448 11.8207 15.873C11.7843 15.8957 11.7442 15.9119 11.7002 15.9214C11.6561 15.9311 11.59 15.9358 11.5017 15.9358H11.3881Z"
+                fill="#696A6A"
+            />
+            <path
+                d="M12.2534 16.0054H12.5913L12.5349 15.7215C12.5322 15.7035 12.5297 15.6827 12.5275 15.6591C12.5255 15.6356 12.5241 15.6094 12.5232 15.5805C12.5101 15.6077 12.497 15.6331 12.4838 15.6566C12.4707 15.6801 12.458 15.7017 12.4455 15.7215L12.2534 16.0054ZM12.6815 16.494L12.6206 16.1737H12.1401L11.9226 16.494H11.7157L12.6124 15.2007L12.8894 16.494H12.6815Z"
+                fill="#696A6A"
+            />
+            <path
+                d="M13.1704 16.4942L13.3066 15.9248L13.0598 15.2501H13.2669L13.4201 15.6724C13.4236 15.6832 13.4278 15.6974 13.4327 15.7149C13.4376 15.7325 13.4424 15.7514 13.4469 15.7718C13.4592 15.752 13.4719 15.7332 13.4847 15.7157C13.4974 15.6981 13.5102 15.682 13.5232 15.6673L13.8839 15.2501H14.0811L13.5021 15.9248L13.3658 16.4942H13.1704Z"
+                fill="#696A6A"
+            />
+            <path
+                d="M15.0522 15.8799C15.0523 15.8703 15.0551 15.8437 15.0606 15.8001C15.0648 15.7638 15.0681 15.7338 15.0705 15.7099C15.0588 15.7383 15.0449 15.7667 15.0291 15.795C15.0131 15.8233 14.9948 15.8522 14.974 15.8817L14.498 16.5446L14.3427 15.8681C14.3361 15.8403 14.331 15.8134 14.3277 15.7874C14.3243 15.7613 14.322 15.7355 14.3209 15.7099C14.3141 15.7361 14.3055 15.7633 14.2951 15.792C14.2846 15.8206 14.2721 15.8505 14.2574 15.8817L13.9807 16.4944H13.7994L14.3963 15.1975L14.5662 15.9828C14.5687 15.9952 14.5723 16.016 14.5766 16.0449C14.581 16.0737 14.5861 16.1094 14.5921 16.1519C14.6122 16.1162 14.6412 16.0709 14.6792 16.016C14.6894 16.0012 14.6971 15.9899 14.7023 15.982L15.2397 15.1975L15.2224 16.4944H15.0393L15.0522 15.8799Z"
+                fill="#696A6A"
+            />
+            <path
+                d="M15.38 16.4942L15.6779 15.2501H16.3546L16.3135 15.4217H15.8338L15.7592 15.7335H16.2388L16.1963 15.9112H15.7167L15.6205 16.3131H16.1001L16.0566 16.4942H15.38Z"
+                fill="#696A6A"
+            />
+            <path
+                d="M16.2829 16.494L16.5925 15.2007L17.1809 15.9612C17.1966 15.9827 17.2125 16.0056 17.2281 16.03C17.2438 16.0544 17.2598 16.0818 17.2763 16.1124L17.4828 15.2499H17.6651L17.3556 16.5423L16.7549 15.7682C16.7388 15.7473 16.7239 15.7252 16.7099 15.702C16.6958 15.6787 16.683 15.6543 16.6714 15.6289L16.4643 16.494H16.2829Z"
+                fill="#696A6A"
+            />
+            <path d="M18.294 15.4216L18.0373 16.4941H17.8402L18.0968 15.4216H17.7746L17.8158 15.25H18.6556L18.6146 15.4216H18.294Z" fill="#696A6A" />
+            <path
+                d="M18.4984 16.245L18.6736 16.1703C18.6754 16.2257 18.6925 16.2681 18.7253 16.2973C18.758 16.3265 18.8053 16.341 18.8673 16.341C18.9258 16.341 18.9763 16.3243 19.0188 16.2909C19.0613 16.2575 19.0893 16.2127 19.1028 16.1566C19.1203 16.0835 19.0766 16.0184 18.9723 15.9612C18.9577 15.9527 18.9464 15.9465 18.9387 15.9425C18.821 15.8756 18.7463 15.8151 18.7149 15.761C18.6835 15.7069 18.677 15.6408 18.6957 15.5626C18.7199 15.4612 18.7732 15.3791 18.8553 15.3162C18.9375 15.2533 19.0329 15.2218 19.1418 15.2218C19.2312 15.2218 19.3018 15.2395 19.3535 15.2749C19.4052 15.3104 19.4347 15.3612 19.442 15.4275L19.2685 15.5091C19.2535 15.47 19.2337 15.4414 19.2091 15.4232C19.1844 15.4051 19.1532 15.396 19.1158 15.396C19.0628 15.396 19.0172 15.4103 18.9792 15.4385C18.9414 15.4669 18.9166 15.5048 18.9052 15.5524C18.8873 15.6272 18.9391 15.6969 19.0606 15.7614C19.07 15.7665 19.0773 15.7706 19.0825 15.7734C19.1889 15.83 19.258 15.8854 19.2897 15.9395C19.3215 15.9937 19.3277 16.0612 19.3082 16.1422C19.2801 16.2601 19.2215 16.3537 19.1326 16.423C19.0436 16.4924 18.9375 16.5271 18.8144 16.5271C18.7111 16.5271 18.6323 16.5028 18.578 16.454C18.5237 16.4053 18.4971 16.3357 18.4984 16.245Z"
+                fill="#696A6A"
+            />
+            <path d="M19.9551 16.494L20.2529 15.2499H20.4501L20.1522 16.494H19.9551Z" fill="#696A6A" />
+            <path
+                d="M20.4344 16.494L20.744 15.2007L21.3323 15.9612C21.3481 15.9827 21.364 16.0056 21.3796 16.03C21.3953 16.0544 21.4113 16.0818 21.4278 16.1124L21.6343 15.2499H21.8165L21.5071 16.5423L20.9064 15.7682C20.8903 15.7473 20.8753 15.7253 20.8613 15.702C20.8472 15.6787 20.8345 15.6543 20.8228 15.6289L20.6158 16.494H20.4344Z"
+                fill="#696A6A"
+            />
+            <path d="M22.4471 15.4218L22.1903 16.4943H21.9933L22.2499 15.4218H21.9277L21.9688 15.2502H22.8087L22.7677 15.4218H22.4471Z" fill="#696A6A" />
+            <path
+                d="M22.6609 16.4942L22.9587 15.2501H23.6354L23.5944 15.4217H23.1148L23.0401 15.7335H23.5197L23.4772 15.9112H22.9976L22.9014 16.3132H23.381L23.3376 16.4942H22.6609Z"
+                fill="#696A6A"
+            />
+            <path
+                d="M23.9318 15.7803H23.9675C24.0718 15.7803 24.1441 15.7679 24.1843 15.743C24.2245 15.718 24.2523 15.6739 24.2674 15.6104C24.2838 15.5418 24.2771 15.4935 24.2469 15.4655C24.2171 15.4374 24.1524 15.4234 24.053 15.4234H24.0173L23.9318 15.7803ZM23.8818 15.9375L23.7485 16.4942H23.5638L23.8617 15.2501H24.1367C24.2173 15.2501 24.2786 15.2554 24.3204 15.2662C24.3623 15.277 24.396 15.2948 24.4215 15.3198C24.4519 15.3497 24.4715 15.3887 24.4807 15.4362C24.4896 15.4837 24.4873 15.5359 24.4738 15.5924C24.45 15.6922 24.4078 15.7702 24.3474 15.8267C24.2869 15.8829 24.2095 15.9169 24.1151 15.9281L24.3972 16.4942H24.1743L23.9042 15.9375H23.8818Z"
+                fill="#696A6A"
+            />
+            <path
+                d="M24.5144 16.494L24.8123 15.2499H25.489L25.4479 15.4216H24.9683L24.894 15.7317H25.3737L25.3311 15.9093H24.8515L24.7116 16.494H24.5144Z"
+                fill="#696A6A"
+            />
+            <path
+                d="M25.7173 16.0056H26.0553L25.9989 15.7217C25.9961 15.7036 25.9937 15.6828 25.9915 15.6593C25.9895 15.6357 25.9881 15.6095 25.9871 15.5806C25.974 15.6078 25.9609 15.6332 25.9478 15.6567C25.9347 15.6802 25.9219 15.7018 25.9094 15.7217L25.7173 16.0056ZM26.1455 16.4942L26.0845 16.1738H25.6041L25.3866 16.4942H25.1796L26.0763 15.2008L26.3533 16.4942H26.1455Z"
+                fill="#696A6A"
+            />
+            <path
+                d="M27.6366 15.5525C27.5926 15.5038 27.5424 15.4672 27.486 15.4428C27.4298 15.4186 27.3674 15.4063 27.2989 15.4063C27.1664 15.4063 27.0481 15.4499 26.9442 15.5371C26.8401 15.6244 26.7715 15.7374 26.7383 15.8763C26.7062 16.0106 26.7201 16.1212 26.7802 16.2084C26.8402 16.2957 26.9318 16.3394 27.0549 16.3394C27.1267 16.3394 27.1981 16.3264 27.2693 16.3003C27.3404 16.2742 27.4121 16.2349 27.4843 16.1821L27.4295 16.4108C27.3672 16.4498 27.3025 16.4791 27.2355 16.4982C27.1685 16.5175 27.0986 16.5271 27.0257 16.5271C26.9329 16.5271 26.8509 16.5116 26.7797 16.4804C26.7084 16.4493 26.6502 16.4034 26.6051 16.3427C26.5603 16.2833 26.5315 16.2132 26.5192 16.1324C26.5067 16.0517 26.5114 15.9657 26.5332 15.8744C26.5551 15.7833 26.5916 15.6976 26.6425 15.6175C26.6934 15.5373 26.7563 15.4669 26.8309 15.4063C26.9058 15.3451 26.9859 15.2988 27.0712 15.2673C27.1566 15.2359 27.2447 15.2201 27.3352 15.2201C27.4065 15.2201 27.4719 15.2308 27.5314 15.2521C27.5909 15.2733 27.6458 15.3054 27.6964 15.3486L27.6366 15.5525Z"
+                fill="#696A6A"
+            />
+            <path
+                d="M27.6543 16.4941L27.9521 15.25H28.6288L28.5877 15.4216H28.1082L28.0335 15.7335H28.5131L28.4706 15.9112H27.991L27.8948 16.3131H28.3744L28.331 16.4941H27.6543Z"
+                fill="#696A6A"
+            />
+            <path d="M24.0608 14.1658H22.7058L24.5903 7.35962H25.9455L24.0608 14.1658Z" fill="#66686C" />
+            <path
+                d="M23.357 7.575C23.263 7.44549 23.1181 7.38014 22.9213 7.38014H15.4699L15.1009 8.7132L21.8795 8.71243L21.485 10.137H16.062L16.0625 10.134H14.7073L13.5824 14.1948H14.9384L15.6933 11.4693H21.7891C21.9795 11.4693 22.1586 11.4043 22.3272 11.2745C22.4953 11.1445 22.606 10.9842 22.6591 10.7928L23.4138 8.06663C23.4689 7.86881 23.4499 7.70466 23.357 7.575Z"
+                fill="#66686C"
+            />
+            <path
+                d="M12.793 13.741C12.7181 14.0105 12.4727 14.1969 12.193 14.1969H5.20153C5.01103 14.1969 4.86943 14.132 4.77632 14.0023C4.68328 13.8724 4.66332 13.7118 4.71652 13.5204L6.42244 7.37954H7.77876L6.25505 12.8643H11.6805L13.2042 7.37954H14.5602L12.793 13.741Z"
+                fill="#66686C"
+            />
+            <path d="M28.2835 7.37238L29.9991 10.7843L26.3926 14.1953L28.2835 7.37238Z" fill="#27803B" />
+            <path d="M27.0831 7.37238L28.7974 10.7843L25.1895 14.1953L27.0831 7.37238Z" fill="#E9661C" />
+        </svg>
+    );
+};
+
+export default UPIIcon;
diff --git a/src/components/foundations/payment-icons/venmo-icon.tsx b/src/components/foundations/payment-icons/venmo-icon.tsx
new file mode 100644
index 0000000..98182aa
--- /dev/null
+++ b/src/components/foundations/payment-icons/venmo-icon.tsx
@@ -0,0 +1,38 @@
+import type { SVGProps } from "react";
+
+const VenmoIcon = (props: SVGProps<SVGSVGElement>) => {
+    return (
+        <svg width="34" height="24" viewBox="0 0 34 24" fill="none" {...props}>
+            <path
+                d="M4 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 20V4C0.5 2.067 2.067 0.5 4 0.5Z"
+                fill="white"
+            />
+            <path
+                d="M4 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 20V4C0.5 2.067 2.067 0.5 4 0.5Z"
+                className="stroke-border-secondary"
+            />
+            <path
+                d="M8.27348 9.61118C8.44901 9.89123 8.52815 10.1797 8.52815 10.5441C8.52815 11.7062 7.5011 13.216 6.66752 14.2761H4.76359L4 9.86564L5.6671 9.71275L6.07082 12.8511C6.44805 12.2574 6.91355 11.3246 6.91355 10.6885C6.91355 10.3404 6.85181 10.1033 6.75531 9.90804L8.27348 9.61118Z"
+                fill="#008CFF"
+            />
+            <path
+                d="M10.4346 11.5534C10.7414 11.5534 11.5137 11.4179 11.5137 10.9939C11.5137 10.7903 11.3647 10.6887 11.189 10.6887C10.8818 10.6887 10.4786 11.0446 10.4346 11.5534ZM10.3995 12.3932C10.3995 12.911 10.6975 13.1141 11.0926 13.1141C11.5229 13.1141 11.9348 13.0125 12.4703 12.7497L12.2686 14.0726C11.8913 14.2506 11.3034 14.3694 10.7327 14.3694C9.28507 14.3694 8.76696 13.5214 8.76696 12.4612C8.76696 11.0871 9.60973 9.62809 11.3472 9.62809C12.3039 9.62809 12.8388 10.1458 12.8388 10.8667C12.8388 12.0288 11.2947 12.3848 10.3995 12.3932Z"
+                fill="#008CFF"
+            />
+            <path
+                d="M17.6492 10.6292C17.6492 10.7988 17.6227 11.0448 17.5961 11.2056L17.0959 14.2591H15.4726L15.9289 11.46C15.9375 11.3841 15.9641 11.2312 15.9641 11.1464C15.9641 10.9428 15.8325 10.892 15.6741 10.892C15.4638 10.892 15.253 10.9852 15.1127 11.0533L14.5951 14.2591H12.9627L13.7084 9.68748H15.1213L15.1392 10.0524C15.4725 9.84037 15.9115 9.61108 16.5342 9.61108C17.3593 9.611 17.6492 10.0183 17.6492 10.6292Z"
+                fill="#008CFF"
+            />
+            <path
+                d="M22.469 10.1286C22.9339 9.80658 23.3729 9.62809 23.9781 9.62809C24.8117 9.62809 25.1016 10.0353 25.1016 10.6463C25.1016 10.8159 25.075 11.0619 25.0486 11.2227L24.5489 14.2762H22.9251L23.3902 11.4179C23.3987 11.3415 23.4168 11.2483 23.4168 11.1892C23.4168 10.96 23.285 10.9091 23.1267 10.9091C22.9251 10.9091 22.7236 10.9939 22.5739 11.0704L22.0564 14.2763H20.4331L20.8981 11.418C20.9066 11.3416 20.9242 11.2484 20.9242 11.1893C20.9242 10.96 20.7923 10.9092 20.6346 10.9092C20.4239 10.9092 20.2135 11.0024 20.0731 11.0704L19.5551 14.2763H17.9232L18.669 9.70462H20.0646L20.1085 10.0863C20.4331 9.85756 20.8716 9.62827 21.4596 9.62827C21.9687 9.62809 22.3019 9.84014 22.469 10.1286Z"
+                fill="#008CFF"
+            />
+            <path
+                d="M28.3322 11.4602C28.3322 11.087 28.2356 10.8325 27.9463 10.8325C27.3057 10.8325 27.1741 11.9265 27.1741 12.4862C27.1741 12.9108 27.297 13.1736 27.5864 13.1736C28.1918 13.1736 28.3322 12.0198 28.3322 11.4602ZM25.5243 12.4187C25.5243 10.977 26.314 9.62794 28.1307 9.62794C29.4996 9.62794 30 10.4085 30 11.4858C30 12.9108 29.2189 14.3864 27.3583 14.3864C25.9806 14.3864 25.5243 13.5127 25.5243 12.4187Z"
+                fill="#008CFF"
+            />
+        </svg>
+    );
+};
+
+export default VenmoIcon;
diff --git a/src/components/foundations/payment-icons/verifone-icon.tsx b/src/components/foundations/payment-icons/verifone-icon.tsx
new file mode 100644
index 0000000..024db96
--- /dev/null
+++ b/src/components/foundations/payment-icons/verifone-icon.tsx
@@ -0,0 +1,30 @@
+import type { SVGProps } from "react";
+
+const VerifoneIcon = (props: SVGProps<SVGSVGElement>) => {
+    return (
+        <svg width="34" height="24" viewBox="0 0 34 24" fill="none" {...props}>
+            <path
+                d="M4 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 20V4C0.5 2.067 2.067 0.5 4 0.5Z"
+                fill="white"
+            />
+            <path
+                d="M4 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 20V4C0.5 2.067 2.067 0.5 4 0.5Z"
+                className="stroke-border-secondary"
+            />
+            <path
+                fillRule="evenodd"
+                clipRule="evenodd"
+                d="M14.5888 10.3052H15.6955L15.8734 9.39417H14.7666L14.5888 10.3052ZM14.4737 10.8911H15.5806L14.8775 14.4881C14.8262 14.5063 14.6677 14.5702 14.4489 14.5702C14.1537 14.5702 13.8828 14.4533 13.8828 14.0387C13.8828 13.9607 13.8917 13.8719 13.9114 13.771C14.1313 12.6486 14.4737 10.8911 14.4737 10.8911ZM25.4643 10.8089C24.7277 10.8089 24.4348 11.2473 24.2973 11.5142H24.2843L24.3268 10.8919H23.233C23.2258 11.0287 23.1785 11.4601 23.1084 11.8321C23.1084 11.8321 22.8558 13.1377 22.808 13.3877C22.7716 13.5787 22.705 13.861 22.705 14.0248C22.705 14.3737 22.8791 14.5703 23.2677 14.5703C23.4857 14.5703 23.6428 14.5098 23.7 14.4881L24.0658 12.6148C24.1672 12.0976 24.5354 11.7591 24.9732 11.7591C25.3264 11.7591 25.4952 12.0208 25.4952 12.2348C25.4952 12.421 25.4492 12.6274 25.4137 12.8099L25.2563 13.6121C25.2376 13.7084 25.1976 13.8934 25.1976 14.0385C25.1976 14.3931 25.3944 14.5703 25.7682 14.5703C25.9722 14.5703 26.1016 14.5185 26.1933 14.4881L26.5215 12.8088C26.5927 12.4293 26.6189 12.2294 26.6189 11.9878C26.6189 11.2924 26.2187 10.8089 25.4643 10.8089ZM20.5482 11.6787C19.9296 11.6787 19.5869 12.3213 19.5869 12.8942C19.5869 13.3773 19.8017 13.7008 20.2899 13.7008C20.8417 13.7008 21.2736 13.2237 21.2736 12.4093C21.2736 12.0366 21.0784 11.6787 20.5482 11.6787ZM20.2216 14.5704C19.0365 14.5704 18.4695 13.8483 18.4695 12.9278C18.4695 11.6649 19.323 10.8089 20.6419 10.8089C21.7862 10.8089 22.3939 11.513 22.3939 12.4171C22.3939 13.772 21.4823 14.5704 20.2216 14.5704ZM16.0767 13.7043C16.0515 13.8338 16.0355 13.9245 16.0355 14.0359C16.0355 14.4483 16.3068 14.5703 16.5942 14.5703C16.8241 14.5703 16.9663 14.5065 17.0184 14.4881L17.5505 11.7615L18.4111 11.7614L18.581 10.8911L17.7205 10.8912L17.7623 10.6768C17.8402 10.2748 18.0264 10.0981 18.3485 10.0981C18.5635 10.0981 18.7375 10.1369 18.798 10.153L18.96 9.32537C18.8909 9.30765 18.5729 9.22852 18.1023 9.22852C17.3523 9.22852 16.861 9.69136 16.7157 10.4368L16.6267 10.8911H16.0665L15.8965 11.7614H16.4571C16.4571 11.7614 16.236 12.8888 16.0767 13.7043ZM13.5291 10.809C12.9736 10.809 12.6681 11.201 12.5486 11.5136H12.5358L12.5786 10.8911H11.4843C11.4746 11.1069 11.4302 11.4717 11.3187 12.0454C11.2057 12.6267 11.0956 13.2065 10.982 13.7709C10.9625 13.8673 10.9539 13.9617 10.9539 14.0416C10.9539 14.3372 11.0976 14.57 11.5223 14.57C11.7327 14.57 11.8789 14.5145 11.949 14.4881L12.2745 12.8206C12.3918 12.1826 12.6048 11.7608 13.2228 11.7608C13.5039 11.7608 13.771 11.8217 13.827 11.8384L14.0143 10.879C13.9738 10.8648 13.8116 10.809 13.5291 10.809ZM29.5831 12.349C29.6424 12.0192 29.4536 11.6787 29.0269 11.6787C28.5058 11.6787 28.277 12.0404 28.1748 12.349H29.5831ZM30.0765 13.6875C30.0765 14.1878 29.5998 14.5714 28.7556 14.5714C27.5889 14.5714 27.0184 13.8329 27.0184 12.9288C27.0184 12.0313 27.6047 10.8099 29.0356 10.8099C29.9791 10.8099 30.6845 11.2862 30.6845 12.3766C30.6845 12.6448 30.6258 12.9363 30.6005 13.053H28.0927C28.0885 13.3147 28.3055 13.7681 29.1772 13.7681C29.5657 13.7681 30.0056 13.6286 30.0765 13.5931C30.0765 13.6203 30.0765 13.6695 30.0765 13.6875ZM9.58419 12.349C9.64334 12.0192 9.45454 11.6787 9.02785 11.6787C8.50681 11.6787 8.27805 12.0404 8.17578 12.349H9.58419ZM10.0784 13.6875C10.0784 14.1878 9.6017 14.5714 8.75764 14.5714C7.59084 14.5714 7.02043 13.8329 7.02043 12.9288C7.02043 12.0313 7.60658 10.8099 9.03763 10.8099C9.98107 10.8099 10.6865 11.2862 10.6865 12.3766C10.6865 12.6448 10.6278 12.9363 10.6024 13.053H8.09465C8.09046 13.3147 8.30739 13.7681 9.17911 13.7681C9.56761 13.7681 10.0075 13.6286 10.0784 13.5931C10.0784 13.6203 10.0784 13.6695 10.0784 13.6875ZM3.42773 9.6672H4.54116V13.2436C4.54116 13.7814 4.80457 14.0559 5.22744 14.0559C5.27057 14.0559 5.29599 14.0504 5.30438 14.0483C5.11902 14.3333 4.87871 14.5671 4.32694 14.5671C3.74312 14.5671 3.42773 14.1553 3.42773 13.5372V9.6672Z"
+                fill="#1A1919"
+            />
+            <path
+                fillRule="evenodd"
+                clipRule="evenodd"
+                d="M5.00556 12.6299C4.90495 12.7895 4.85156 12.9744 4.85156 13.1631V13.2496C4.85156 13.6122 5.04428 13.7421 5.25468 13.7421C5.46975 13.7421 5.58488 13.5939 5.6905 13.4254C5.86747 13.1433 8.03006 9.66724 8.03006 9.66724H6.87276L5.00556 12.6299Z"
+                fill="#00A3DA"
+            />
+        </svg>
+    );
+};
+
+export default VerifoneIcon;
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/payment-icons/we-chat-icon.tsx b/src/components/foundations/payment-icons/we-chat-icon.tsx
new file mode 100644
index 0000000..e8509b9
--- /dev/null
+++ b/src/components/foundations/payment-icons/we-chat-icon.tsx
@@ -0,0 +1,22 @@
+import type { SVGProps } from "react";
+
+const WeChatIcon = (props: SVGProps<SVGSVGElement>) => {
+    return (
+        <svg width="34" height="24" viewBox="0 0 34 24" fill="none" {...props}>
+            <path
+                d="M4 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 20V4C0.5 2.067 2.067 0.5 4 0.5Z"
+                fill="white"
+            />
+            <path
+                d="M4 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 20V4C0.5 2.067 2.067 0.5 4 0.5Z"
+                className="stroke-border-secondary"
+            />
+            <path
+                d="M15.1908 13.8559C15.1228 13.892 15.0463 13.9129 14.965 13.9129C14.7767 13.9129 14.6131 13.8038 14.5272 13.6423L14.4943 13.5664L13.1237 10.3968C13.1089 10.3623 13.0997 10.3233 13.0997 10.2854C13.0997 10.1393 13.2121 10.021 13.3507 10.021C13.4069 10.021 13.459 10.0406 13.5009 10.0734L15.1183 11.287C15.2364 11.3684 15.3776 11.4162 15.5294 11.4162C15.62 11.4162 15.7063 11.3984 15.7869 11.3675L23.393 7.80001C22.0296 6.10671 19.7842 5 17.2433 5C13.0853 5 9.71484 7.96007 9.71484 11.6118C9.71484 13.6038 10.7289 15.3971 12.3161 16.6093C12.4434 16.7051 12.5268 16.8625 12.5268 17.0401C12.5268 17.0989 12.5149 17.1525 12.5003 17.2085C12.3735 17.7068 12.1706 18.5049 12.1612 18.5423C12.1454 18.6048 12.1207 18.6702 12.1207 18.7356C12.1207 18.8817 12.233 19 12.3718 19C12.4262 19 12.4707 18.9786 12.5167 18.9508L14.1648 17.9479C14.2888 17.8727 14.42 17.8258 14.5647 17.8258C14.6416 17.8258 14.716 17.8384 14.7859 17.8609C15.5547 18.094 16.3843 18.2235 17.2433 18.2235C21.4011 18.2235 24.772 15.2633 24.772 11.6118C24.772 10.5057 24.461 9.46407 23.9143 8.54777L15.2459 13.8223L15.1908 13.8559Z"
+                fill="#1AAD19"
+            />
+        </svg>
+    );
+};
+
+export default WeChatIcon;
diff --git a/src/components/foundations/payment-icons/we-chat-pay-icon.tsx b/src/components/foundations/payment-icons/we-chat-pay-icon.tsx
new file mode 100644
index 0000000..2396fd5
--- /dev/null
+++ b/src/components/foundations/payment-icons/we-chat-pay-icon.tsx
@@ -0,0 +1,30 @@
+import type { SVGProps } from "react";
+
+const WeChatPayIcon = (props: SVGProps<SVGSVGElement>) => {
+    return (
+        <svg width="34" height="24" viewBox="0 0 34 24" fill="none" {...props}>
+            <path
+                d="M4 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 20V4C0.5 2.067 2.067 0.5 4 0.5Z"
+                fill="white"
+            />
+            <path
+                d="M4 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 20V4C0.5 2.067 2.067 0.5 4 0.5Z"
+                className="stroke-border-secondary"
+            />
+            <path
+                fillRule="evenodd"
+                clipRule="evenodd"
+                d="M28.8462 13.6811L29.1706 14.5564C29.2043 14.6544 29.241 14.7707 29.2655 14.8595H29.2716C29.2992 14.7707 29.3298 14.6574 29.3665 14.5503L29.6603 13.6811H29.9449L29.5409 14.737C29.3481 15.2451 29.2165 15.5052 29.0329 15.6644C28.9315 15.754 28.8301 15.8019 28.7581 15.8247C28.736 15.7851 28.635 15.6123 28.635 15.6123C28.7023 15.591 28.7911 15.5481 28.8707 15.4808C28.9441 15.4226 29.0359 15.3185 29.0971 15.1808C29.1094 15.1533 29.1186 15.1318 29.1186 15.1165C29.1186 15.1012 29.1125 15.0798 29.1002 15.0462L28.5523 13.6811H28.8462ZM22.6432 13.6474C23.0961 13.6474 23.2063 13.9565 23.2063 14.2534V14.8074C23.2063 14.9359 23.2124 15.0615 23.2308 15.1624H22.986L22.9645 14.9757H22.9553C22.8727 15.0921 22.7136 15.1961 22.5024 15.1961C22.2024 15.1961 22.0494 14.9849 22.0494 14.7707C22.0494 14.4126 22.3677 14.2167 22.94 14.2198V14.1891C22.94 14.0667 22.9064 13.8463 22.6034 13.8463C22.4787 13.8463 22.3491 13.8814 22.2485 13.938C22.2234 13.8948 22.1565 13.779 22.1565 13.779C22.2789 13.6994 22.4564 13.6474 22.6432 13.6474ZM27.6833 13.6474C28.1363 13.6474 28.2465 13.9565 28.2465 14.2534V14.8074C28.2465 14.9359 28.2526 15.0615 28.271 15.1624H28.0261L28.0047 14.9757H27.9955C27.9129 15.0921 27.7537 15.1961 27.5425 15.1961C27.2426 15.1961 27.0895 14.9849 27.0895 14.7707C27.0895 14.4126 27.4079 14.2167 27.9802 14.2198V14.1891C27.9802 14.0667 27.9465 13.8463 27.6435 13.8463C27.5189 13.8463 27.3893 13.8814 27.2887 13.938C27.2635 13.8948 27.1967 13.779 27.1967 13.779C27.3191 13.6994 27.4966 13.6474 27.6833 13.6474ZM19.4729 13.0659C19.73 13.0659 19.8922 13.1209 19.9626 13.1577C19.9626 13.1577 19.8812 13.2992 19.8479 13.353C19.7517 13.3155 19.6267 13.2893 19.4821 13.2893C18.9985 13.2893 18.6771 13.5984 18.6771 14.1402C18.6771 14.6452 18.9679 14.9696 19.4698 14.9696C19.6068 14.9696 19.746 14.9456 19.8505 14.9068C19.8747 14.9491 19.9595 15.0951 19.9595 15.0951C19.8616 15.1441 19.6657 15.1931 19.4147 15.1931C18.8332 15.1931 18.3955 14.8257 18.3955 14.1493C18.3955 13.5035 18.8332 13.0659 19.4729 13.0659ZM17.4715 13.6474C17.9551 13.6474 18.0836 14.0728 18.0836 14.3452C18.0836 14.4003 18.0775 14.4432 18.0745 14.4707H17.0338C17.0399 14.8349 17.2726 14.9849 17.5419 14.9849C17.7007 14.9849 17.8077 14.9621 17.8969 14.9301C17.9216 14.9708 17.9979 15.1012 17.9979 15.1012C17.9031 15.1441 17.7408 15.1931 17.5052 15.1931C17.0491 15.1931 16.7767 14.8931 16.7767 14.4462C16.7767 13.9994 17.0399 13.6474 17.4715 13.6474ZM24.0447 13.2556V13.6811H24.4304V13.8861H24.0447V14.685C24.0447 14.8686 24.0967 14.9727 24.2467 14.9727C24.2687 14.9727 24.289 14.9718 24.3074 14.9702C24.339 15.0234 24.415 15.1563 24.415 15.1563C24.363 15.1777 24.2804 15.1931 24.1763 15.1931C24.0508 15.1931 23.9499 15.1533 23.8856 15.0798C23.809 15.0002 23.7815 14.8686 23.7815 14.6941V13.8861H23.5519V13.6811H23.7815V13.2556H24.0447ZM26.0858 13.0843C26.3491 13.0843 26.5419 13.1455 26.6643 13.2556C26.7776 13.3536 26.8449 13.5036 26.8449 13.6872C26.8449 13.8739 26.7898 14.0208 26.6858 14.1279C26.545 14.2779 26.3154 14.3544 26.0552 14.3544C25.9757 14.3544 25.9022 14.3513 25.841 14.336V15.1624H25.5747V13.124C25.7033 13.1026 25.8716 13.0843 26.0858 13.0843ZM14.4081 13.0995L14.653 14.1432C14.7142 14.4003 14.7693 14.6574 14.806 14.8564H14.8121C14.8458 14.6513 14.9101 14.4065 14.9805 14.1402L15.2559 13.0995H15.5344L15.7854 14.1463C15.8436 14.3911 15.8987 14.636 15.9293 14.8533H15.9354C15.9782 14.6268 16.0364 14.3972 16.1007 14.1402L16.3731 13.0995H16.6455L16.0609 15.1624H15.7823L15.5222 14.0882C15.4579 13.8249 15.4151 13.6229 15.3875 13.4148H15.3814C15.3447 13.6199 15.2988 13.8219 15.2223 14.0882L14.9284 15.1624H14.6499L14.1265 13.0995H14.4081ZM20.6448 12.9894V13.9137H20.651C20.6938 13.8372 20.7612 13.7699 20.8438 13.7239C20.9234 13.678 21.0182 13.6474 21.1193 13.6474C21.3182 13.6474 21.6365 13.7699 21.6365 14.281V15.1624H21.3672V14.3116C21.3672 14.0729 21.2784 13.8708 21.0244 13.8708C20.8499 13.8708 20.7122 13.9932 20.6632 14.1402C20.6479 14.1769 20.6448 14.2167 20.6448 14.2687V15.1624H20.3755V12.9894H20.6448ZM22.3187 14.7401C22.3187 14.9145 22.435 14.9972 22.5728 14.9972C22.7656 14.9972 22.888 14.8747 22.9308 14.7493C22.94 14.7217 22.9461 14.6911 22.9461 14.6636V14.4065C22.6523 14.4003 22.3187 14.4523 22.3187 14.7401ZM27.3589 14.7401C27.3589 14.9145 27.4752 14.9972 27.6129 14.9972C27.8058 14.9972 27.9282 14.8747 27.971 14.7493C27.9802 14.7217 27.9863 14.6911 27.9863 14.6636V14.4065C27.6925 14.4003 27.3589 14.4523 27.3589 14.7401ZM17.4501 13.8402C17.1777 13.8402 17.0583 14.0912 17.0369 14.2779H17.8235C17.8265 14.1065 17.7531 13.8402 17.4501 13.8402ZM26.092 13.2955C25.9757 13.2955 25.8869 13.3046 25.841 13.3168V14.1188C25.8992 14.134 25.9726 14.1402 26.0614 14.1402C26.3828 14.1402 26.5786 13.9841 26.5786 13.6994C26.5786 13.4271 26.3858 13.2955 26.092 13.2955ZM24.2795 8.64478V9.18679H25.8825V9.46837H24.2795V10.0568H25.5733C25.5733 10.0568 25.4073 10.9023 24.4376 11.6142C24.8299 11.8208 25.3467 11.9672 25.9768 12.0658C25.9768 12.0658 25.8746 12.247 25.7875 12.3872C25.0984 12.2674 24.5597 12.0573 24.1378 11.8113C23.7127 12.0635 23.1627 12.2833 22.4517 12.407C22.4021 12.334 22.2674 12.0948 22.2674 12.0948C22.9118 11.9939 23.4426 11.8308 23.839 11.618C22.8644 10.9191 22.6769 10.0568 22.6769 10.0568H23.967V9.46837H22.3021V9.18679H23.967V8.64478H24.2795ZM14.784 9.68042L15.0339 9.81314C14.9153 10.0954 14.8046 10.2874 14.7743 10.3477V12.3952H14.4927V10.7899C14.3316 11.0061 14.237 11.1193 14.1899 11.1727C14.1567 11.1153 14.0312 10.8979 14.0312 10.8979C14.3336 10.5787 14.6001 10.1401 14.784 9.68042ZM27.1715 8.65605L27.4998 8.729L27.4897 8.7557C27.3567 9.10324 27.2322 9.39909 27.1196 9.63512V12.3952H26.8071V10.2294C26.6996 10.4051 26.5746 10.5847 26.4342 10.7652L26.261 10.4632C26.6292 9.96224 26.9391 9.35333 27.1645 8.67712L27.1715 8.65605ZM18.9511 8.65531L19.2471 8.72928C19.2471 8.72928 19.0586 9.32311 18.9145 9.63547L18.9152 12.3952H18.6026V10.2406C18.4774 10.4765 18.3935 10.6315 18.2873 10.7704L18.1181 10.4773C18.5566 9.92379 18.9511 8.65531 18.9511 8.65531ZM16.9607 8.6405L17.2423 8.69688L17.2357 8.72214C17.1777 8.94466 17.1135 9.16328 17.0447 9.37261H17.887V9.63873H17.684C17.6316 10.3945 17.4978 10.98 17.2864 11.3793C17.4541 11.7057 17.7776 12.0118 17.8687 12.0945C17.8483 12.1333 17.7075 12.3745 17.7075 12.3745C17.7075 12.3745 17.2394 11.895 17.1334 11.6631C17.0144 11.8631 16.7946 12.1225 16.4967 12.3884L16.3451 12.1238C16.3451 12.1238 16.7526 11.7856 16.9834 11.3776C16.8397 11.0108 16.7444 10.6171 16.6997 10.2058C16.6504 10.2927 16.6234 10.3394 16.5739 10.4138C16.5739 10.4138 16.4424 10.1853 16.4157 10.1425C16.652 9.72675 16.8293 9.23688 16.9555 8.66414L16.9607 8.6405ZM29.4575 8.67242V9.55844L30 9.55845V9.85554L29.4575 9.85552V11.7847C29.4575 12.0918 29.2077 12.3417 28.9006 12.3417H28.5364V12.0163H28.9006C29.0283 12.0163 29.1323 11.9124 29.1323 11.7847V9.85552L27.3955 9.85554V9.55845L29.1323 9.55844V8.67242H29.4575ZM21.6717 11.0296V12.3257H19.4698V11.0296H21.6717ZM16.2609 10.8748V11.5904C16.3135 11.5459 16.4748 11.404 16.529 11.3558L16.6586 11.5803L16.0644 12.082C16.0644 12.082 15.9387 11.8649 15.9133 11.8238C15.9483 11.785 15.9949 11.7046 15.9949 11.5515L15.9948 11.1409H15.4557C15.4557 11.753 15.4311 11.9747 15.0227 12.2939C15.0227 12.2939 14.9242 12.1202 14.8805 12.0475C15.2312 11.7704 15.1896 11.3918 15.1896 10.8748H16.2609ZM21.3746 11.3112H19.7824V12.0595H21.3746V11.3112ZM25.1358 10.3343H23.123C23.2382 10.574 23.5237 11.0368 24.139 11.4391C24.7513 11.0303 25.0282 10.5646 25.1358 10.3343ZM28.029 10.3151L28.596 11.2163L28.2999 11.3779L27.7681 10.4695L28.029 10.3151ZM17.4179 9.63873H16.9546C16.9499 9.65746 16.9061 9.76737 16.8964 9.78869C16.9541 10.343 17.0395 10.7678 17.1507 11.0528C17.2883 10.7225 17.3782 10.2473 17.4179 9.63873ZM21.7027 10.4102V10.6763H19.4389V10.4102H21.7027ZM16.4003 10.2708V10.5369H15.1276V10.2708H16.4003ZM21.7027 9.79074V10.0568H19.4389V9.79074H21.7027ZM15.9203 8.70672V9.68234H16.2078V8.98546H16.4584V9.93296H15.1008V9.00096H15.3669V9.68234H15.6541V8.70672H15.9203ZM14.7986 8.64202L15.0442 8.80291C14.8581 9.1961 14.5683 9.60238 14.2289 9.91251L14.0806 9.65563C14.3498 9.3959 14.6046 9.03011 14.7986 8.64202ZM20.5692 8.65532L20.7901 9.15582L21.9195 9.15583V9.43741H19.2376V9.15583L20.4767 9.15582L20.3159 8.76544L20.5692 8.65532Z"
+                fill="#4D4D4D"
+            />
+            <path
+                fillRule="evenodd"
+                clipRule="evenodd"
+                d="M7.15883 13.0314C7.11962 13.0512 7.0755 13.0627 7.02857 13.0627C6.91998 13.0627 6.82564 13.0029 6.776 12.9145L5.96643 11.1381C5.9579 11.1192 5.95262 11.0979 5.95262 11.0771C5.95262 10.9972 6.01743 10.9323 6.09738 10.9323C6.12985 10.9323 6.15984 10.9431 6.18396 10.9611L7.11696 11.6254C7.18511 11.6699 7.26654 11.6961 7.35414 11.6961C7.40637 11.6961 7.4562 11.6863 7.50259 11.6695L11.8901 9.71672C11.1036 8.78982 9.80842 8.18408 8.34268 8.18408C5.9442 8.18408 4 9.80432 4 11.8031C4 12.8935 4.58495 13.8751 5.5005 14.5386C5.57396 14.591 5.62204 14.6772 5.62204 14.7744C5.62204 14.8066 5.61518 14.836 5.60677 14.8666C5.53364 15.1394 5.41663 15.5762 5.41114 15.5967C5.40203 15.6309 5.38778 15.6666 5.38778 15.7025C5.38778 15.7824 5.45257 15.8472 5.53264 15.8472C5.56397 15.8472 5.58969 15.8355 5.61618 15.8203L6.56691 15.2714C6.63844 15.2301 6.71413 15.2045 6.79758 15.2045C6.84195 15.2045 6.88482 15.2114 6.92515 15.2237C7.36872 15.3513 7.84721 15.4222 8.34268 15.4222C10.7411 15.4222 12.6855 13.8018 12.6855 11.8031C12.6855 11.1977 12.5061 10.6276 12.1908 10.126L7.15883 13.0314Z"
+                fill="#1AAD19"
+            />
+        </svg>
+    );
+};
+
+export default WeChatPayIcon;
diff --git a/src/components/foundations/payment-icons/webmoney-icon.tsx b/src/components/foundations/payment-icons/webmoney-icon.tsx
new file mode 100644
index 0000000..a562732
--- /dev/null
+++ b/src/components/foundations/payment-icons/webmoney-icon.tsx
@@ -0,0 +1,26 @@
+import type { SVGProps } from "react";
+
+const WebmoneyIcon = (props: SVGProps<SVGSVGElement>) => {
+    return (
+        <svg width="34" height="24" viewBox="0 0 34 24" fill="none" {...props}>
+            <path
+                d="M4 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 20V4C0.5 2.067 2.067 0.5 4 0.5Z"
+                fill="white"
+            />
+            <path
+                d="M4 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 20V4C0.5 2.067 2.067 0.5 4 0.5Z"
+                className="stroke-border-secondary"
+            />
+            <path
+                d="M27.9365 17.8942H27.9678L28.5537 16.0533H29.1035L28.1729 18.5543C27.9159 19.2444 27.6022 19.6041 27.0117 19.6041V19.1949C27.361 19.1949 27.5767 18.9242 27.7002 18.5543L26.7139 16.0533H27.2793L27.9365 17.8942ZM10.5029 15.9684C11.145 15.9684 11.541 16.374 11.541 17.1891V17.3737H9.86621C9.86621 17.9737 10.1182 18.2389 10.6475 18.2389C10.9247 18.2388 11.1814 18.1441 11.4639 17.9791V18.359C11.2327 18.4892 10.9246 18.5894 10.5547 18.5895C9.69163 18.5895 9.33696 18.0692 9.33691 17.2789C9.33691 16.519 9.73246 15.9685 10.5029 15.9684ZM12.543 16.1539C12.697 16.0739 12.959 15.9685 13.2363 15.9684C13.8733 15.9684 14.2177 16.3985 14.2178 17.1989C14.2178 18.1339 13.7558 18.5895 13.0107 18.5895C12.7384 18.5895 12.3171 18.5046 12.0088 18.3444V14.8531L12.543 14.7281V16.1539ZM20.0547 15.9684C20.733 15.9684 21.2266 16.4037 21.2266 17.2789C21.2265 18.1342 20.7586 18.5895 20.0547 18.5895C19.351 18.5893 18.8839 18.134 18.8838 17.2789C18.8838 16.4039 19.3767 15.9686 20.0547 15.9684ZM25.5166 15.9684C26.159 15.9684 26.5547 16.374 26.5547 17.1891V17.3737H24.8799C24.8799 17.9737 25.132 18.2389 25.6611 18.2389C25.9384 18.2388 26.1953 18.1441 26.4775 17.9791V18.359C26.2465 18.4892 25.9384 18.5894 25.5684 18.5895C24.7054 18.5895 24.3506 18.0692 24.3506 17.2789C24.3506 16.5189 24.7461 15.9685 25.5166 15.9684ZM6.15137 17.6285H6.18652L6.85449 14.983H7.3125L8.02637 17.6285H8.0625L8.58594 14.983H9.1875L8.35547 18.5289H7.7998L7.10156 16.0338H7.06543L6.38672 18.5289H5.83203L5 14.983H5.5752L6.15137 17.6285ZM16.5557 17.7789H16.582L17.6816 14.983H18.3184V18.5289H17.7637V15.9586H17.7168L16.6689 18.5289H16.3398L15.292 16.0182H15.2461V18.5289H14.7832V14.983H15.4053L16.5557 17.7789ZM23.0244 15.9684C23.6412 15.9684 23.872 16.2034 23.8721 16.7184V18.5289H23.3379V16.8336C23.3379 16.4386 23.1379 16.3688 22.876 16.3688C22.6703 16.3688 22.4082 16.4586 22.249 16.5485V18.5289H21.7148V16.3385C21.9461 16.2034 22.4341 15.9685 23.0244 15.9684ZM13.0977 16.359C12.8923 16.3591 12.7435 16.4141 12.5381 16.524V18.1588C12.7024 18.2289 12.8823 18.2389 13.0107 18.2389C13.391 18.2389 13.6787 18.0088 13.6787 17.1989C13.6787 16.5636 13.4419 16.359 13.0977 16.359ZM20.0547 16.319C19.7156 16.319 19.4229 16.6039 19.4229 17.2789C19.4229 17.9642 19.6901 18.2388 20.0547 18.2389C20.4194 18.2389 20.6865 17.9642 20.6865 17.2789C20.6865 16.6038 20.404 16.319 20.0547 16.319ZM10.4883 16.3033C10.1747 16.3033 9.9333 16.5387 9.87695 17.0387H11.0537C11.0283 16.5135 10.7657 16.3034 10.4883 16.3033ZM25.502 16.3033C25.1884 16.3033 24.9472 16.5387 24.8906 17.0387H26.0674C26.0419 16.5136 25.7793 16.3034 25.502 16.3033Z"
+                fill="#0068A3"
+            />
+            <path
+                d="M16.7061 4.5C17.4131 4.5 18.0833 4.66076 18.6797 4.94531C18.7731 4.98846 18.8665 5.0355 18.96 5.08789L18.5459 5.44922L17.9229 4.82227L16.8721 5.73535L16.2471 5.07227L14.2891 6.79004L15.5449 8.13672L15.0508 8.55859L16.2881 9.9082L15.7969 10.3291L17.5645 12.2432L18.6133 11.3037L19.5195 12.3105C19.3392 12.447 19.1431 12.5757 18.9268 12.6943C18.271 13.0583 17.5126 13.2666 16.7061 13.2666C14.226 13.2664 12.2032 11.2976 12.2031 8.88379C12.2031 6.46936 14.2259 4.50016 16.7061 4.5ZM20.7441 11.2021L19.9404 11.9062L19.2178 11.124L20.0205 10.4199L20.7441 11.2021ZM18.6826 10.5117L17.6123 11.4502L16.6475 10.4072L17.7188 9.46875L18.6826 10.5117ZM20.0381 9.62305L19.2354 10.3271L18.5117 9.54492L19.3154 8.8418L20.0381 9.62305ZM17.9209 8.70996L16.8496 9.64844L15.8857 8.60645L16.9561 7.66797L17.9209 8.70996ZM21.2432 9.10547L20.708 9.5752L20.2256 9.05371L20.7607 8.58496L21.2432 9.10547ZM19.3516 7.9707L18.5488 8.6748L17.8252 7.89355L18.6279 7.18945L19.3516 7.9707ZM20.5586 7.55762L20.0234 8.02637L19.541 7.50488L20.0762 7.03613L20.5586 7.55762ZM17.1543 6.93066L16.083 7.86914L15.1191 6.82617L16.1904 5.8877L17.1543 6.93066ZM18.6113 6.39941L17.8076 7.10352L17.085 6.32129L17.8877 5.61719L18.6113 6.39941ZM19.875 6.00879L19.3398 6.47754L18.8574 5.95703L19.3926 5.4873L19.875 6.00879Z"
+                fill="#0068A3"
+            />
+        </svg>
+    );
+};
+
+export default WebmoneyIcon;
diff --git a/src/components/foundations/payment-icons/wise-icon.tsx b/src/components/foundations/payment-icons/wise-icon.tsx
new file mode 100644
index 0000000..927b69a
--- /dev/null
+++ b/src/components/foundations/payment-icons/wise-icon.tsx
@@ -0,0 +1,15 @@
+import type { SVGProps } from "react";
+
+const WiseIcon = (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="#9FE870" />
+            <path
+                d="M18.4852 9.11696H20.0828L19.2781 14.8684H17.6805L18.4852 9.11696ZM16.4615 9.11696L15.3846 12.4306L14.9112 9.11696H13.787L12.3669 12.4187L12.2012 9.12879H10.6391L11.1834 14.8803H12.4734L14.0592 11.2353L14.6154 14.8684H15.8817L17.9763 9.11696H16.4615ZM29.9172 12.4661H26.1183C26.142 13.2116 26.5799 13.7087 27.2426 13.7087C27.7396 13.7087 28.1302 13.4483 28.4379 12.9394L29.7278 13.5193C29.2663 14.3832 28.3432 14.9513 27.1953 14.9513C25.6331 14.9513 24.5917 13.898 24.5917 12.2057C24.5917 10.3477 25.8107 9.03412 27.5385 9.03412C29.0533 9.03412 30 10.0519 30 11.6495C30 11.9099 29.9763 12.182 29.9172 12.4661ZM28.4852 11.3655C28.4852 10.7028 28.1065 10.2767 27.5148 10.2767C26.8994 10.2767 26.3787 10.7146 26.2485 11.3655H28.4852ZM5.63314 10.8566L4 12.7619H6.92308L7.25444 11.8625H6L6.76923 10.9749V10.9513L6.27219 10.0992H8.50888L6.76923 14.8684H7.95266L10.0473 9.11696H4.63905L5.63314 10.8566ZM22.6864 10.2767C23.2544 10.2767 23.7515 10.5844 24.1775 11.1051L24.4024 9.48382C24 9.21163 23.4556 9.04595 22.7337 9.04595C21.3018 9.04595 20.497 9.88619 20.497 10.9513C20.497 11.685 20.9112 12.1465 21.5858 12.4306L21.9053 12.5726C22.5089 12.8329 22.6746 12.9631 22.6746 13.2353C22.6746 13.5193 22.4024 13.6968 21.9882 13.6968C21.3018 13.6968 20.7456 13.3536 20.3314 12.7501L20.0947 14.4069C20.568 14.7738 21.1834 14.9631 21.9882 14.9631C23.3491 14.9631 24.1894 14.182 24.1894 13.0815C24.1894 12.3359 23.858 11.8625 23.0296 11.4838L22.6746 11.3181C22.1775 11.1051 22.0118 10.9749 22.0118 10.7383C22.0237 10.4779 22.2485 10.2767 22.6864 10.2767Z"
+                fill="#163300"
+            />
+        </svg>
+    );
+};
+
+export default WiseIcon;
diff --git a/src/components/foundations/payment-icons/yandex-icon.tsx b/src/components/foundations/payment-icons/yandex-icon.tsx
new file mode 100644
index 0000000..0076ac8
--- /dev/null
+++ b/src/components/foundations/payment-icons/yandex-icon.tsx
@@ -0,0 +1,22 @@
+import type { SVGProps } from "react";
+
+const YandexIcon = (props: SVGProps<SVGSVGElement>) => {
+    return (
+        <svg width="34" height="24" viewBox="0 0 34 24" fill="none" {...props}>
+            <path
+                d="M4 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 20V4C0.5 2.067 2.067 0.5 4 0.5Z"
+                fill="white"
+            />
+            <path
+                d="M4 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 20V4C0.5 2.067 2.067 0.5 4 0.5Z"
+                className="stroke-border-secondary"
+            />
+            <path
+                d="M23.8007 10.7791C23.7306 10.3461 23.345 10.0574 22.8192 10.0574C22.6439 10.0574 22.5037 10.0574 22.3284 10.0574C22.0129 10.0213 21.9428 10.1296 21.9428 10.3822C21.9428 11.6451 21.9428 12.872 21.9428 14.135C21.9428 14.7845 21.3119 15.4701 20.5757 15.6145C18.2622 16.1557 15.9486 16.6609 13.6351 17.2022C13.3897 17.2744 13.1093 17.2744 12.8289 17.2744C12.7237 17.2744 12.5484 17.2022 12.5134 17.0939C12.4783 17.0218 12.5835 16.8774 12.6536 16.8053C12.7588 16.7331 12.899 16.6609 13.0392 16.5888C13.4598 16.4444 13.9155 16.3001 14.3362 16.1557C16.0538 15.5784 17.7714 15.001 19.4891 14.3876C20.2603 14.135 20.6809 13.5937 20.6809 12.9081C20.7159 10.743 20.6809 8.54186 20.6809 6.37678C20.6809 6.01593 20.5056 5.72725 20.12 5.58291C19.6643 5.40249 19.2437 5.54683 18.8581 5.72725C16.4043 6.91805 13.9856 8.10885 11.5319 9.29964C10.8308 9.66049 10.4102 10.1657 10.4102 10.8874C10.4102 12.9442 10.4102 15.001 10.4102 17.0579C10.4102 17.1661 10.4101 17.2744 10.4452 17.3465C10.6906 18.0321 11.3216 18.4652 12.1628 18.4652C13.8805 18.4652 15.5981 18.4652 17.3157 18.4652C19.0334 18.4652 20.7159 18.4652 22.4336 18.4652C22.8192 18.4652 23.1347 18.393 23.4151 18.1404C23.7656 17.8517 23.7656 17.4548 23.7656 17.0939C23.7656 15.3187 23.8007 10.7791 23.8007 10.7791ZM16.6497 10.1296C16.825 9.66049 17.2106 9.37181 17.7714 9.29964C18.157 9.26356 18.4725 9.48006 18.5426 9.84091C18.6127 10.3822 17.9818 11.0317 17.3157 11.0317C16.7899 11.0317 16.4744 10.6348 16.6497 10.1296Z"
+                fill="#FD6727"
+            />
+        </svg>
+    );
+};
+
+export default YandexIcon;
diff --git a/src/components/foundations/payment-icons/zelle-icon.tsx b/src/components/foundations/payment-icons/zelle-icon.tsx
new file mode 100644
index 0000000..a59647c
--- /dev/null
+++ b/src/components/foundations/payment-icons/zelle-icon.tsx
@@ -0,0 +1,39 @@
+import type { SVGProps } from "react";
+
+const ZelleIcon = (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="#6C1CD3" />
+            <path
+                d="M7.39478 7.89681L5.1462 7.8761L5.1462 9.36788H8.8727L5 14.3319V15.5943H7.39478V17.0483H8.83165V15.5943H11.2743C11.2949 15.5362 11.3021 15.3793 11.1721 15.2356C10.9565 14.9962 10.7851 14.7459 10.6277 14.4311C10.5559 14.2909 10.5013 14.1229 10.4808 14.1092C9.99978 14.0871 7.23249 14.0929 7.23398 14.0753L11.1101 9.08087V7.89681H8.83165V6.42572H7.39478V7.89681Z"
+                fill="white"
+            />
+            <path
+                d="M17.7714 7.20223C17.7372 7.21592 17.727 7.97198 17.727 10.8355C17.727 14.7048 17.7235 14.6397 17.8946 14.9716C18.0485 15.2692 18.4249 15.5361 18.8457 15.6456C19.0783 15.7071 19.7625 15.714 20.026 15.6592C20.3646 15.5874 20.4296 15.4848 20.2962 15.2213C20.2107 15.0571 20.0978 14.6979 20.0704 14.4995C20.0328 14.2634 19.9849 14.2258 19.6975 14.2326C19.5607 14.2361 19.4307 14.2258 19.4067 14.2121C19.2665 14.1232 19.2665 14.0992 19.2665 10.6336C19.2665 8.40647 19.2562 7.28776 19.2323 7.24328C19.198 7.1817 19.1536 7.17828 18.5036 7.1817C18.1238 7.1817 17.792 7.19197 17.7714 7.20223Z"
+                fill="white"
+            />
+            <path
+                d="M20.9076 7.21251C20.8632 7.23988 20.8563 7.67778 20.8563 10.8115C20.8563 14.1882 20.8597 14.3934 20.9213 14.6295C21.0376 15.0948 21.3011 15.3787 21.8006 15.5874C21.9921 15.6661 22.0777 15.6798 22.4643 15.6901C22.9808 15.7037 23.2443 15.6661 23.5077 15.5327C23.7677 15.4061 23.7745 15.3171 23.5522 14.9921C23.4632 14.8621 23.3264 14.6398 23.2511 14.4995L23.1143 14.2429L22.8645 14.2395C22.5532 14.2327 22.5224 14.219 22.4643 14.0719C22.4198 13.9726 22.4129 13.4629 22.4129 10.6336C22.4129 8.40648 22.4027 7.28778 22.3787 7.2433C22.3445 7.18172 22.3 7.1783 21.65 7.1783C21.2703 7.1783 20.935 7.19541 20.9076 7.21251Z"
+                fill="white"
+            />
+            <path
+                d="M30.0086 7.94802C29.7315 8.0746 29.5878 8.29355 29.5844 8.59803C29.5809 8.85803 29.687 9.05646 29.9025 9.19672C30.1694 9.37804 30.597 9.32673 30.8194 9.08725C31.1033 8.78277 31.0452 8.25592 30.6962 8.01986C30.5149 7.8967 30.1967 7.86591 30.0086 7.94802ZM30.556 8.0746C30.9426 8.2696 31.0007 8.76908 30.6723 9.05988C30.532 9.18304 30.4328 9.21041 30.2173 9.18988C29.622 9.13172 29.5057 8.29697 30.0599 8.04723C30.2104 7.97881 30.3849 7.98907 30.556 8.0746Z"
+                fill="white"
+            />
+            <path
+                d="M30.0325 8.22855C30.0086 8.2696 30.0051 8.90593 30.0291 8.97093C30.0394 9.00172 30.0701 9.02567 30.0975 9.02567C30.1317 9.02567 30.1454 8.97777 30.1454 8.85461C30.1454 8.70066 30.1523 8.68356 30.2241 8.68356C30.2788 8.68356 30.3267 8.73145 30.402 8.85461C30.4636 8.95725 30.5252 9.02567 30.5628 9.02567C30.6449 9.02567 30.6415 9.01198 30.5149 8.82724C30.4396 8.71777 30.4191 8.66645 30.4499 8.65619C30.5388 8.6254 30.6244 8.5125 30.6244 8.42697C30.6244 8.27302 30.5149 8.2046 30.2686 8.2046C30.1454 8.2046 30.0394 8.21486 30.0325 8.22855ZM30.4465 8.33802C30.4738 8.35171 30.4875 8.40302 30.4807 8.4475C30.4704 8.51934 30.4499 8.5296 30.3096 8.53987L30.1454 8.55013V8.43039C30.1454 8.31065 30.1488 8.30723 30.2754 8.30723C30.3438 8.30723 30.4225 8.32092 30.4465 8.33802Z"
+                fill="white"
+            />
+            <path
+                d="M13.4678 9.35072C13.4507 9.35756 13.3173 9.38835 13.177 9.41914C12.2978 9.62099 11.5212 10.295 11.1927 11.1502C11.0114 11.6223 10.9464 11.9884 10.943 12.5324C10.9396 13.2953 11.0935 13.8563 11.4459 14.39C11.8428 14.9887 12.4243 15.3958 13.177 15.6011C13.4336 15.6695 13.5465 15.6798 14.1349 15.6798C14.7165 15.6798 14.8362 15.6695 15.0791 15.6045C15.6813 15.4369 16.1944 15.1598 16.6084 14.7664C16.8718 14.52 16.8684 14.4516 16.6015 14.2463C16.4921 14.1608 16.2936 13.9761 16.1636 13.8324C15.9994 13.6579 15.9002 13.5758 15.8489 13.5758C15.801 13.5758 15.6915 13.6442 15.5855 13.7469C15.2194 14.0787 14.7576 14.2361 14.152 14.2327C13.5978 14.2292 13.1941 14.0856 12.9375 13.7913C12.8075 13.6442 12.6433 13.309 12.6091 13.1208L12.5886 12.9942H14.7199C15.8934 12.9942 16.8752 12.9805 16.8992 12.9634C17.0121 12.8916 17.0394 12.3955 16.9573 11.855C16.7623 10.5618 15.9892 9.69283 14.7747 9.40204C14.5591 9.35072 14.3812 9.33362 13.9981 9.33704C13.7244 9.33704 13.4883 9.34388 13.4678 9.35072ZM14.3812 10.6713C14.631 10.7226 14.9389 10.8936 15.0826 11.0579C15.216 11.2084 15.3528 11.4787 15.387 11.6531L15.411 11.7626H12.6228L12.6467 11.6531C12.7494 11.1913 13.1462 10.8047 13.6388 10.6815C13.8578 10.6268 14.152 10.6234 14.3812 10.6713Z"
+                fill="white"
+            />
+            <path
+                d="M25.9026 9.38151C24.6881 9.65178 23.867 10.5071 23.6104 11.7695C23.4565 12.5153 23.542 13.3842 23.8328 14.0069C24.2296 14.869 24.9515 15.4266 25.9368 15.6285C26.2481 15.6935 26.3713 15.7003 26.8605 15.6866C27.2744 15.673 27.4968 15.649 27.6884 15.5977C28.2734 15.4437 28.7866 15.1632 29.18 14.7869C29.4811 14.4961 29.4811 14.4824 29.1561 14.2121C29.0055 14.089 28.8037 13.894 28.7079 13.7811C28.4855 13.5245 28.4274 13.5211 28.1776 13.7469C27.8047 14.0856 27.36 14.2361 26.7407 14.2327C25.8718 14.2292 25.3655 13.8563 25.2012 13.1037L25.1773 13.0149H29.5119C29.659 12.9089 29.6042 11.7866 29.4263 11.2665C29.3921 11.1639 29.2997 10.9586 29.2245 10.815C28.8242 10.0486 28.1845 9.57309 27.295 9.38493C27.011 9.32335 26.1728 9.32335 25.9026 9.38151ZM26.97 10.6713C27.2026 10.7226 27.4421 10.8423 27.6131 10.9963C27.7568 11.1297 27.9895 11.5505 27.9895 11.6805V11.7626H25.2115L25.2355 11.6668C25.4133 10.9347 26.166 10.5002 26.97 10.6713Z"
+                fill="white"
+            />
+        </svg>
+    );
+};
+
+export default ZelleIcon;
diff --git a/src/components/foundations/payment-icons/zip-pay-icon.tsx b/src/components/foundations/payment-icons/zip-pay-icon.tsx
new file mode 100644
index 0000000..efce4d3
--- /dev/null
+++ b/src/components/foundations/payment-icons/zip-pay-icon.tsx
@@ -0,0 +1,43 @@
+import type { SVGProps } from "react";
+
+const ZipPayIcon = (props: SVGProps<SVGSVGElement>) => {
+    return (
+        <svg width="34" height="24" viewBox="0 0 34 24" fill="none" {...props}>
+            <path
+                d="M4 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 20V4C0.5 2.067 2.067 0.5 4 0.5Z"
+                fill="white"
+            />
+            <path
+                d="M4 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 20V4C0.5 2.067 2.067 0.5 4 0.5Z"
+                className="stroke-border-secondary"
+            />
+            <path
+                d="M28.9101 14.0256H27.7125L27.5444 12.6563L25.8496 10.5807H27.1587L28.0488 11.7098L28.6956 10.5807H29.9998L28.7425 12.6611L28.9101 14.0256Z"
+                fill="#AA8FFF"
+            />
+            <path
+                d="M25.0377 12.6179L24.4878 11.6137L24.1892 12.6179H25.0377ZM25.8069 14.0256L25.4822 13.4347H23.9501L23.7755 14.0256H22.5488L23.7015 10.5807H25.0348L27.0238 14.0256H25.8069Z"
+                fill="#AA8FFF"
+            />
+            <path
+                d="M22.5105 11.8209C22.415 11.0466 21.8067 10.5774 20.9801 10.5807H18.2266L18.6495 14.0256H19.8875L19.8028 13.3368H21.1136C22.1461 13.3365 22.6181 12.6936 22.5105 11.8209ZM20.9805 12.3708L19.6848 12.3721L19.5833 11.5453L20.8863 11.5464C21.1925 11.5501 21.3492 11.7225 21.3745 11.9585C21.3902 12.1106 21.3208 12.3708 20.9805 12.3708Z"
+                fill="#AA8FFF"
+            />
+            <path d="M8.61914 10.5807L9.04205 14.0255H13.1818L12.7586 10.5807H8.61914Z" fill="#AA8FFF" />
+            <path
+                d="M17.5211 11.8209C17.4256 11.0466 16.8173 10.5774 15.9906 10.5807H13.2363L13.6594 14.0256H14.898L14.8133 13.3368H16.1243C17.1566 13.3365 17.6292 12.6936 17.5211 11.8209ZM15.991 12.3708L14.6955 12.3721L14.5939 11.5453L15.8968 11.5464C16.203 11.5501 16.3597 11.7225 16.3851 11.9585C16.4007 12.1106 16.331 12.3708 15.991 12.3708Z"
+                fill="#1A0826"
+            />
+            <path
+                d="M9.87952 10.1383C10.099 9.90483 10.0628 9.51425 9.79858 9.26591C9.5344 9.01757 9.14232 9.00552 8.92285 9.23898C8.70338 9.47245 8.73962 9.86304 9.00379 10.1114C9.26797 10.3597 9.66005 10.3718 9.87952 10.1383Z"
+                fill="#1A0826"
+            />
+            <path
+                d="M4.30471 13.063L4.42291 14.0255H8.55945L8.42412 12.9232H6.49536L6.47861 12.7864L8.25492 11.5453L8.13635 10.5807H4L4.13532 11.683H6.06724L6.08418 11.8207L4.30471 13.063Z"
+                fill="#1A0826"
+            />
+        </svg>
+    );
+};
+
+export default ZipPayIcon;
diff --git a/src/components/foundations/play-button-icon.tsx b/src/components/foundations/play-button-icon.tsx
new file mode 100644
index 0000000..b42bb67
--- /dev/null
+++ b/src/components/foundations/play-button-icon.tsx
@@ -0,0 +1,45 @@
+import type { HTMLAttributes, SVGProps } from "react";
+import { cx } from "@/utils/cx";
+
+const PlayIcon = (props: SVGProps<SVGSVGElement>) => {
+    return (
+        <svg width="16" height="16" viewBox="0 0 16 16" fill="none" {...props}>
+            <path
+                d="M2.19995 2.86327C2.19995 1.61155 3.57248 0.844595 4.63851 1.50061L12.9856 6.63731C14.0009 7.26209 14.0009 8.73784 12.9856 9.36262L4.63851 14.4993C3.57247 15.1553 2.19995 14.3884 2.19995 13.1367V2.86327Z"
+                fill="currentColor"
+            />
+        </svg>
+    );
+};
+
+const PauseIcon = (props: SVGProps<SVGSVGElement>) => {
+    return (
+        <svg width="16" height="16" viewBox="0 0 16 16" fill="none" {...props}>
+            <path
+                d="M2.19995 2.5C2.19995 2.22386 2.42381 2 2.69995 2H5.19995C5.47609 2 5.69995 2.22386 5.69995 2.5V13.5C5.69995 13.7761 5.47609 14 5.19995 14H2.69995C2.42381 14 2.19995 13.7761 2.19995 13.5V2.5Z"
+                fill="currentColor"
+            />
+            <path
+                d="M10.2 2.5C10.2 2.22386 10.4238 2 10.7 2H13.2C13.4761 2 13.7 2.22386 13.7 2.5V13.5C13.7 13.7761 13.4761 14 13.2 14H10.7C10.4238 14 10.2 13.7761 10.2 13.5V2.5Z"
+                fill="currentColor"
+            />
+        </svg>
+    );
+};
+
+/**
+ * Rounded play icon with blurred background and a filled triangle in the middle.
+ */
+export const PlayButtonIcon = ({ isPlaying = false, ...props }: HTMLAttributes<HTMLDivElement> & { isPlaying?: boolean }) => {
+    return (
+        <div
+            {...props}
+            className={cx(
+                "flex size-20 items-center justify-center rounded-full bg-alpha-white/30 backdrop-blur transition duration-100 ease-linear group-hover:bg-alpha-white/50 hover:bg-alpha-white/50",
+                props.className,
+            )}
+        >
+            {isPlaying ? <PauseIcon className="size-5 text-white" /> : <PlayIcon className="size-5 text-white" />}
+        </div>
+    );
+};
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..a700a30
--- /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-yellow-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..b1f9b2d
--- /dev/null
+++ b/src/components/marketing/header-navigation/base-components/nav-menu-item.tsx
@@ -0,0 +1,40 @@
+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/credit-card/credit-card.tsx b/src/components/shared-assets/credit-card/credit-card.tsx
new file mode 100644
index 0000000..73e3f1d
--- /dev/null
+++ b/src/components/shared-assets/credit-card/credit-card.tsx
@@ -0,0 +1,235 @@
+import { useMemo } from "react";
+import { cx, sortCx } from "@/utils/cx";
+import { MastercardIcon, MastercardIconWhite, PaypassIcon } from "./icons";
+
+const styles = sortCx({
+    // Normal
+    transparent: {
+        root: "bg-black/10 bg-linear-to-br from-white/30 to-transparent backdrop-blur-[6px] before:pointer-events-none before:absolute before:inset-0 before:z-1 before:rounded-[inherit] before:mask-linear-135 before:mask-linear-to-white/20 before:ring-1 before:ring-white/30 before:ring-inset",
+        company: "text-white",
+        footerText: "text-white",
+        paypassIcon: "text-white",
+        cardTypeRoot: "bg-white/10",
+    },
+    "transparent-gradient": {
+        root: "bg-black/10 bg-linear-to-br from-white/30 to-transparent backdrop-blur-[6px] before:pointer-events-none before:absolute before:inset-0 before:z-1 before:rounded-[inherit] before:mask-linear-135 before:mask-linear-to-white/20 before:ring-1 before:ring-white/30 before:ring-inset",
+        company: "text-white",
+        footerText: "text-white",
+        paypassIcon: "text-white",
+        cardTypeRoot: "bg-white/10",
+    },
+    "brand-dark": {
+        root: "bg-linear-to-tr from-brand-900 to-brand-700 before:pointer-events-none before:absolute before:inset-0 before:z-1 before:rounded-[inherit] before:mask-linear-135 before:mask-linear-to-white/20 before:ring-1 before:ring-white/30 before:ring-inset",
+        company: "text-white",
+        footerText: "text-white",
+        paypassIcon: "text-white",
+        cardTypeRoot: "bg-white/10",
+    },
+    "brand-light": {
+        root: "bg-brand-100 before:pointer-events-none before:absolute before:inset-0 before:z-1 before:rounded-[inherit] before:mask-linear-135 before:mask-linear-to-white/20 before:ring-1 before:ring-black/10 before:ring-inset",
+        company: "text-neutral-700",
+        footerText: "text-neutral-700",
+        paypassIcon: "text-white",
+        cardTypeRoot: "bg-white",
+    },
+    "gray-dark": {
+        root: "bg-linear-to-tr from-neutral-900 to-neutral-700 before:pointer-events-none before:absolute before:inset-0 before:z-1 before:rounded-[inherit] before:mask-linear-135 before:mask-linear-to-white/20 before:ring-1 before:ring-white/30 before:ring-inset",
+        company: "text-white",
+        footerText: "text-white",
+        paypassIcon: "text-white",
+        cardTypeRoot: "bg-white/10",
+    },
+    "gray-light": {
+        root: "bg-neutral-100 before:pointer-events-none before:absolute before:inset-0 before:z-1 before:rounded-[inherit] before:mask-linear-135 before:mask-linear-to-white/20 before:ring-1 before:ring-black/10 before:ring-inset",
+        company: "text-neutral-700",
+        footerText: "text-neutral-700",
+        paypassIcon: "text-neutral-400",
+        cardTypeRoot: "bg-white",
+    },
+
+    // Strip
+    "transparent-strip": {
+        root: "bg-linear-to-br from-white/30 to-transparent backdrop-blur-[6px] before:pointer-events-none before:absolute before:inset-0 before:z-1 before:rounded-[inherit] before:mask-linear-135 before:mask-linear-to-white/20 before:ring-1 before:ring-white/30 before:ring-inset",
+        company: "text-white",
+        footerText: "text-white",
+        paypassIcon: "text-white",
+        cardTypeRoot: "bg-white/10",
+    },
+    "gray-strip": {
+        root: "bg-neutral-100 before:pointer-events-none before:absolute before:inset-0 before:z-1 before:rounded-[inherit] before:mask-linear-135 before:mask-linear-to-white/20 before:ring-1 before:ring-white/30 before:ring-inset",
+        company: "text-neutral-700",
+        footerText: "text-white",
+        paypassIcon: "text-neutral-400",
+        cardTypeRoot: "bg-white/10",
+    },
+    "gradient-strip": {
+        root: "bg-linear-to-b from-[#A5C0EE] to-[#FBC5EC] before:pointer-events-none before:absolute before:inset-0 before:z-1 before:rounded-[inherit] before:mask-linear-135 before:mask-linear-to-white/20 before:ring-1 before:ring-white/30 before:ring-inset",
+        company: "text-white",
+        footerText: "text-white",
+        paypassIcon: "text-white",
+        cardTypeRoot: "bg-white/10",
+    },
+    "salmon-strip": {
+        root: "bg-[#F4D9D0] before:pointer-events-none before:absolute before:inset-0 before:z-1 before:rounded-[inherit] before:mask-linear-135 before:mask-linear-to-white/20 before:ring-1 before:ring-white/30 before:ring-inset",
+        company: "text-neutral-700",
+        footerText: "text-white",
+        paypassIcon: "text-white",
+        cardTypeRoot: "bg-white/10",
+    },
+
+    // Vertical strip
+    "gray-strip-vertical": {
+        root: "bg-linear-to-br from-white/30 to-transparent before:pointer-events-none before:absolute before:inset-0 before:z-1 before:rounded-[inherit] before:mask-linear-135 before:mask-linear-to-white/20 before:ring-1 before:ring-white/30 before:ring-inset",
+        company: "text-white",
+        footerText: "text-white",
+        paypassIcon: "text-neutral-400",
+        cardTypeRoot: "bg-white/10",
+    },
+    "gradient-strip-vertical": {
+        root: "bg-linear-to-b from-[#FBC2EB] to-[#A18CD1] before:pointer-events-none before:absolute before:inset-0 before:z-1 before:rounded-[inherit] before:mask-linear-135 before:mask-linear-to-white/20 before:ring-1 before:ring-white/30 before:ring-inset",
+        company: "text-white",
+        footerText: "text-white",
+        paypassIcon: "text-white",
+        cardTypeRoot: "bg-white/10",
+    },
+    "salmon-strip-vertical": {
+        root: "bg-[#F4D9D0] before:pointer-events-none before:absolute before:inset-0 before:z-1 before:rounded-[inherit] before:mask-linear-135 before:mask-linear-to-white/20 before:ring-1 before:ring-white/30 before:ring-inset",
+        company: "text-white",
+        footerText: "text-white",
+        paypassIcon: "text-white",
+        cardTypeRoot: "bg-white/10",
+    },
+});
+
+const _NORMAL_TYPES = ["transparent", "transparent-gradient", "brand-dark", "brand-light", "gray-dark", "gray-light"] as const;
+const STRIP_TYPES = ["transparent-strip", "gray-strip", "gradient-strip", "salmon-strip"] as const;
+const VERTICAL_STRIP_TYPES = ["gray-strip-vertical", "gradient-strip-vertical", "salmon-strip-vertical"] as const;
+
+const CARD_WITH_COLOR_LOGO = ["brand-dark", "brand-light", "gray-dark", "gray-light"] as const;
+
+type CreditCardType = (typeof _NORMAL_TYPES)[number] | (typeof STRIP_TYPES)[number] | (typeof VERTICAL_STRIP_TYPES)[number];
+
+interface CreditCardProps {
+    company?: string;
+    cardNumber?: string;
+    cardHolder?: string;
+    cardExpiration?: string;
+    type?: CreditCardType;
+    className?: string;
+    width?: number;
+}
+
+const calculateScale = (desiredWidth: number, originalWidth: number, originalHeight: number) => {
+    // Calculate the scale factor
+    const scale = desiredWidth / originalWidth;
+
+    // Calculate the new dimensions
+    const scaledWidth = originalWidth * scale;
+    const scaledHeight = originalHeight * scale;
+
+    return {
+        scale: scale.toFixed(4), // Scale rounded to 4 decimal places
+        scaledWidth: scaledWidth.toFixed(2), // Width rounded to 2 decimal places
+        scaledHeight: scaledHeight.toFixed(2), // Height rounded to 2 decimal places
+    };
+};
+
+export const CreditCard = ({
+    company = "Untitled.",
+    cardNumber = "1234 1234 1234 1234",
+    cardHolder = "OLIVIA RHYE",
+    cardExpiration = "06/28",
+    type = "brand-dark",
+    className,
+    width,
+}: CreditCardProps) => {
+    const originalWidth = 316;
+    const originalHeight = 190;
+
+    const { scale, scaledWidth, scaledHeight } = useMemo(() => {
+        if (!width)
+            return {
+                scale: 1,
+                scaledWidth: originalWidth,
+                scaledHeight: originalHeight,
+            };
+
+        return calculateScale(width, originalWidth, originalHeight);
+    }, [width]);
+
+    return (
+        <div
+            style={{
+                width: `${scaledWidth}px`,
+                height: `${scaledHeight}px`,
+            }}
+            className={cx("relative flex", className)}
+        >
+            <div
+                style={{
+                    transform: `scale(${scale})`,
+                    width: `${originalWidth}px`,
+                    height: `${originalHeight}px`,
+                }}
+                className={cx("absolute top-0 left-0 flex origin-top-left flex-col justify-between overflow-hidden rounded-2xl p-4", styles[type].root)}
+            >
+                {/* Horizontal strip */}
+                {STRIP_TYPES.includes(type as (typeof STRIP_TYPES)[number]) && (
+                    <div className="pointer-events-none absolute inset-x-0 bottom-0 z-0 h-1/2 bg-neutral-800"></div>
+                )}
+                {/* Vertical stripe */}
+                {VERTICAL_STRIP_TYPES.includes(type as (typeof VERTICAL_STRIP_TYPES)[number]) && (
+                    <div className="pointer-events-none absolute inset-y-0 right-22 left-0 z-0 bg-neutral-800"></div>
+                )}
+                {/* Gradient diffusor */}
+                {type === "transparent-gradient" && (
+                    <div className="absolute -top-4 -left-4 grid grid-cols-2 blur-3xl">
+                        <div className="size-20 rounded-tl-full bg-pink-500 opacity-30 mix-blend-normal" />
+                        <div className="size-20 rounded-tr-full bg-orange-500 opacity-50 mix-blend-normal" />
+                        <div className="size-20 rounded-bl-full bg-blue-500 opacity-30 mix-blend-normal" />
+                        <div className="bg-green-500 size-20 rounded-br-full opacity-30 mix-blend-normal" />
+                    </div>
+                )}
+
+                <div className="relative flex items-start justify-between px-1 pt-1">
+                    <div className={cx("text-md leading-[normal] font-semibold", styles[type].company)}>{company}</div>
+
+                    <PaypassIcon className={styles[type].paypassIcon} />
+                </div>
+
+                <div className="relative flex items-end justify-between gap-3">
+                    <div className="flex min-w-0 flex-col gap-2">
+                        <div className="flex items-end gap-1">
+                            <p
+                                style={{
+                                    wordBreak: "break-word",
+                                }}
+                                className={cx("text-xs leading-snug font-semibold tracking-[0.6px] uppercase", styles[type].footerText)}
+                            >
+                                {cardHolder}
+                            </p>
+                            <p
+                                className={cx(
+                                    "ml-auto text-right text-xs leading-[normal] font-semibold tracking-[0.6px] tabular-nums",
+                                    styles[type].footerText,
+                                )}
+                            >
+                                {cardExpiration}
+                            </p>
+                        </div>
+                        <div className={cx("text-md leading-[normal] font-semibold tracking-[1px] tabular-nums", styles[type].footerText)}>
+                            {cardNumber}
+
+                            {/* This is just a placeholder to always keep the space for card number even if there's no card number yet. */}
+                            <span className="pointer-events-none invisible inline-block w-0 max-w-0 opacity-0">1</span>
+                        </div>
+                    </div>
+
+                    <div className={cx("flex h-8 w-11.5 shrink-0 items-center justify-center rounded", styles[type].cardTypeRoot)}>
+                        {CARD_WITH_COLOR_LOGO.includes(type as (typeof CARD_WITH_COLOR_LOGO)[number]) ? <MastercardIcon /> : <MastercardIconWhite />}
+                    </div>
+                </div>
+            </div>
+        </div>
+    );
+};
diff --git a/src/components/shared-assets/credit-card/icons.tsx b/src/components/shared-assets/credit-card/icons.tsx
new file mode 100644
index 0000000..49c3b6e
--- /dev/null
+++ b/src/components/shared-assets/credit-card/icons.tsx
@@ -0,0 +1,73 @@
+import type { SVGProps } from "react";
+
+export const PaypassIcon = (props: SVGProps<SVGSVGElement>) => {
+    return (
+        <svg width="20" height="24" viewBox="0 0 20 24" fill="none" {...props}>
+            <g clipPath="url(#clip0_1307_7682)">
+                <path
+                    d="M15.1429 1.28571C17.0236 4.54326 18.0138 8.23849 18.0138 12C18.0138 15.7615 17.0236 19.4567 15.1429 22.7143M10.4286 3.64285C11.8956 6.18374 12.6679 9.06602 12.6679 12C12.6679 14.934 11.8956 17.8162 10.4286 20.3571M5.92859 5.80713C6.98933 7.66394 7.54777 9.77022 7.54777 11.9143C7.54777 14.0583 6.98933 16.1646 5.92859 18.0214M1.42859 8.14285C2.19306 9.29983 2.59834 10.6362 2.59834 12C2.59834 13.3638 2.19306 14.7002 1.42859 15.8571"
+                    stroke="currentColor"
+                    strokeWidth="2.57143"
+                    strokeLinecap="round"
+                />
+            </g>
+            <defs>
+                <clipPath id="clip0_1307_7682">
+                    <rect width="20" height="24" fill="white" />
+                </clipPath>
+            </defs>
+        </svg>
+    );
+};
+
+export const MastercardIconWhite = (props: SVGProps<SVGSVGElement>) => {
+    return (
+        <svg width="30" height="19" viewBox="0 0 30 19" fill="none" {...props}>
+            <path
+                opacity="0.5"
+                fillRule="evenodd"
+                clipRule="evenodd"
+                d="M14.9053 16.4392C13.3266 17.7699 11.2787 18.5733 9.04092 18.5733C4.04776 18.5733 0 14.5737 0 9.63994C0 4.70619 4.04776 0.706604 9.04092 0.706604C11.2787 0.706604 13.3266 1.50993 14.9053 2.84066C16.484 1.50993 18.5319 0.706604 20.7697 0.706604C25.7629 0.706604 29.8106 4.70619 29.8106 9.63994C29.8106 14.5737 25.7629 18.5733 20.7697 18.5733C18.5319 18.5733 16.484 17.7699 14.9053 16.4392Z"
+                fill="white"
+            />
+            <path
+                opacity="0.5"
+                fillRule="evenodd"
+                clipRule="evenodd"
+                d="M14.9053 16.4392C16.8492 14.8007 18.0818 12.3625 18.0818 9.63994C18.0818 6.91733 16.8492 4.47919 14.9053 2.84066C16.484 1.50993 18.5319 0.706604 20.7697 0.706604C25.7628 0.706604 29.8106 4.70619 29.8106 9.63994C29.8106 14.5737 25.7628 18.5733 20.7697 18.5733C18.5319 18.5733 16.484 17.7699 14.9053 16.4392Z"
+                fill="white"
+            />
+            <path
+                fillRule="evenodd"
+                clipRule="evenodd"
+                d="M14.9053 16.4392C16.8492 14.8007 18.0818 12.3625 18.0818 9.63995C18.0818 6.91736 16.8492 4.47924 14.9053 2.8407C12.9614 4.47924 11.7288 6.91736 11.7288 9.63995C11.7288 12.3625 12.9614 14.8007 14.9053 16.4392Z"
+                fill="white"
+            />
+        </svg>
+    );
+};
+
+export const MastercardIcon = (props: SVGProps<SVGSVGElement>) => {
+    return (
+        <svg width="30" height="19" viewBox="0 0 30 19" fill="none" {...props}>
+            <path
+                fillRule="evenodd"
+                clipRule="evenodd"
+                d="M14.9053 16.4393C13.3266 17.77 11.2787 18.5733 9.04092 18.5733C4.04776 18.5733 0 14.5737 0 9.64C0 4.70625 4.04776 0.706665 9.04092 0.706665C11.2787 0.706665 13.3266 1.51 14.9053 2.84072C16.484 1.51 18.5319 0.706665 20.7697 0.706665C25.7629 0.706665 29.8106 4.70625 29.8106 9.64C29.8106 14.5737 25.7629 18.5733 20.7697 18.5733C18.5319 18.5733 16.484 17.77 14.9053 16.4393Z"
+                fill="#ED0006"
+            />
+            <path
+                fillRule="evenodd"
+                clipRule="evenodd"
+                d="M14.9053 16.4393C16.8492 14.8007 18.0818 12.3626 18.0818 9.64C18.0818 6.91739 16.8492 4.47925 14.9053 2.84072C16.484 1.50999 18.5319 0.706665 20.7697 0.706665C25.7628 0.706665 29.8106 4.70625 29.8106 9.64C29.8106 14.5737 25.7628 18.5733 20.7697 18.5733C18.5319 18.5733 16.484 17.77 14.9053 16.4393Z"
+                fill="#F9A000"
+            />
+            <path
+                fillRule="evenodd"
+                clipRule="evenodd"
+                d="M14.9053 16.4393C16.8492 14.8008 18.0818 12.3627 18.0818 9.64007C18.0818 6.91748 16.8492 4.47936 14.9053 2.84082C12.9614 4.47936 11.7288 6.91748 11.7288 9.64007C11.7288 12.3627 12.9614 14.8008 14.9053 16.4393Z"
+                fill="#FF5E00"
+            />
+        </svg>
+    );
+};
diff --git a/src/components/shared-assets/illustrations/box.tsx b/src/components/shared-assets/illustrations/box.tsx
new file mode 100644
index 0000000..ea8cdf0
--- /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-neutral-100" />
+                <circle cx="21" cy="27" r="5" className="fill-utility-neutral-100" />
+                <circle cx="18" cy="111" r="7" className="fill-utility-neutral-100" />
+                <circle cx="145" cy="43" r="7" className="fill-utility-neutral-100" />
+                <circle cx="134" cy="16" r="4" className="fill-utility-neutral-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-neutral-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-neutral-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-neutral-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-neutral-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-neutral-100" />
+                        <stop offset="1" stopColor="currentColor" className="text-utility-neutral-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-neutral-100" />
+                <circle cx="20" cy="30" r="6" className="fill-utility-neutral-100" />
+                <circle cx="17" cy="122" r="8" className="fill-utility-neutral-100" />
+                <circle cx="160" cy="46" r="8" className="fill-utility-neutral-100" />
+                <circle cx="149" cy="19" r="5" className="fill-utility-neutral-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-neutral-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-neutral-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-neutral-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-neutral-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-neutral-100" />
+                        <stop offset="1" stopColor="currentColor" className="text-utility-neutral-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-neutral-100" />
+                <circle cx="26" cy="30" r="8" className="fill-utility-neutral-100" />
+                <circle cx="198" cy="136" r="6" className="fill-utility-neutral-100" />
+                <circle cx="25" cy="148" r="10" className="fill-utility-neutral-100" />
+                <circle cx="210" cy="56" r="10" className="fill-utility-neutral-100" />
+                <circle cx="191" cy="21" r="7" className="fill-utility-neutral-100" />
+                <g filter="url(#box-shadow-lg)">
+                    <path d="M110.001 139.432L174 111V30L110.503 2L46 30V111L110.001 139.432Z" className="fill-utility-neutral-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-neutral-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-neutral-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-neutral-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-neutral-100" />
+                        <stop offset="1" stopColor="currentColor" className="text-utility-neutral-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..97f3d5f
--- /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-neutral-100" />
+
+                <circle cx="21" cy="19" r="5" className="fill-utility-neutral-100" />
+                <circle cx="18" cy="109" r="7" className="fill-utility-neutral-100" />
+                <circle cx="145" cy="35" r="7" className="fill-utility-neutral-100" />
+                <circle cx="134" cy="8" r="4" className="fill-utility-neutral-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-neutral-200" />
+                        <stop offset="0.350715" stopColor="currentColor" className="text-utility-neutral-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-neutral-200" />
+                        <stop offset="0.350715" stopColor="currentColor" className="text-utility-neutral-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-neutral-200" />
+                        <stop offset="0.350715" stopColor="currentColor" className="text-utility-neutral-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-neutral-100" />
+
+                <circle cx="25" cy="20" r="6" className="fill-utility-neutral-100" />
+                <circle cx="22" cy="112" r="8" className="fill-utility-neutral-100" />
+                <circle cx="165" cy="36" r="8" className="fill-utility-neutral-100" />
+                <circle cx="154" cy="9" r="5" className="fill-utility-neutral-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-neutral-200" />
+                        <stop offset="0.350715" stopColor="currentColor" className="text-utility-neutral-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-neutral-200" />
+                        <stop offset="0.350715" stopColor="currentColor" className="text-utility-neutral-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-neutral-200" />
+                        <stop offset="0.350715" stopColor="currentColor" className="text-utility-neutral-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-neutral-100" />
+                <circle cx="26" cy="20" r="8" className="fill-utility-neutral-100" />
+                <circle cx="198" cy="126" r="6" className="fill-utility-neutral-100" />
+                <circle cx="25" cy="138" r="10" className="fill-utility-neutral-100" />
+                <circle cx="210" cy="46" r="10" className="fill-utility-neutral-100" />
+                <circle cx="191" cy="11" r="7" className="fill-utility-neutral-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-neutral-200" />
+                        <stop offset="0.350715" stopColor="currentColor" className="text-utility-neutral-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-neutral-200" />
+                        <stop offset="0.350715" stopColor="currentColor" className="text-utility-neutral-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-neutral-200" />
+                        <stop offset="0.350715" stopColor="currentColor" className="text-utility-neutral-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..1f3612f
--- /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-neutral-100" />
+                <circle cx="18" cy="109" r="7" className="fill-utility-neutral-100" />
+                <circle cx="145" cy="35" r="7" className="fill-utility-neutral-100" />
+                <circle cx="134" cy="8" r="4" className="fill-utility-neutral-100" />
+                <circle cx="76" cy="52" r="52" className="fill-utility-neutral-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-neutral-200"
+                    />
+                    <circle cx="114.667" cy="32.3335" r="8.33333" className="fill-utility-neutral-300" />
+                    <circle cx="104.667" cy="32.3333" r="8.33333" className="fill-utility-neutral-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-neutral-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-neutral-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-neutral-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-neutral-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-neutral-100" />
+                        <stop offset="1" stopColor="currentColor" className="text-utility-neutral-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-neutral-100" />
+                <circle cx="24" cy="6" r="6" className="fill-utility-neutral-100" />
+                <circle cx="21" cy="112" r="8" className="fill-utility-neutral-100" />
+                <circle cx="164" cy="36" r="8" className="fill-utility-neutral-100" />
+                <circle cx="153" cy="9" r="5" className="fill-utility-neutral-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-neutral-200"
+                    />
+                    <circle cx="137" cy="42" r="10" className="fill-utility-neutral-300" />
+                    <circle cx="125" cy="42" r="10" className="fill-utility-neutral-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-neutral-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-neutral-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-neutral-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-neutral-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-neutral-100" />
+                        <stop offset="1" stopColor="currentColor" className="text-utility-neutral-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-neutral-100" />
+                <circle cx="18" cy="12" r="8" className="fill-utility-neutral-100" />
+                <circle cx="198" cy="142" r="6" className="fill-utility-neutral-100" />
+                <circle cx="25" cy="138" r="10" className="fill-utility-neutral-100" />
+                <circle cx="210" cy="46" r="10" className="fill-utility-neutral-100" />
+                <circle cx="191" cy="11" r="7" className="fill-utility-neutral-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-neutral-200"
+                    />
+                    <circle cx="166.837" cy="53.4419" r="12.093" className="fill-utility-neutral-300" />
+                    <circle cx="152.325" cy="53.4419" r="12.093" className="fill-utility-neutral-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-neutral-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-neutral-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-neutral-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-neutral-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-neutral-100" />
+                        <stop offset="1" stopColor="currentColor" className="text-utility-neutral-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..4355b9e
--- /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-neutral-100" />
+                <circle cx="24" cy="109" r="7" className="fill-utility-neutral-100" />
+                <circle cx="151" cy="35" r="7" className="fill-utility-neutral-100" />
+                <circle cx="140" cy="8" r="4" className="fill-utility-neutral-100" />
+                <circle cx="82" cy="52" r="52" className="fill-utility-neutral-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-neutral-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-neutral-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-neutral-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-neutral-100" />
+                        <stop offset="1" stopColor="currentColor" className="text-utility-neutral-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-neutral-100" />
+                        <stop offset="1" stopColor="currentColor" className="text-utility-neutral-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-neutral-100" />
+                        <stop offset="1" stopColor="currentColor" className="text-utility-neutral-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-neutral-100" />
+                <circle cx="29" cy="12" r="6" className="fill-utility-neutral-100" />
+                <circle cx="26" cy="112" r="8" className="fill-utility-neutral-100" />
+                <circle cx="173" cy="96" r="8" className="fill-utility-neutral-100" />
+                <circle cx="158" cy="9" r="5" className="fill-utility-neutral-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-neutral-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-neutral-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-neutral-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-neutral-100" />
+                        <stop offset="1" stopColor="currentColor" className="text-utility-neutral-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-neutral-100" />
+                        <stop offset="1" stopColor="currentColor" className="text-utility-neutral-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-neutral-100" />
+                        <stop offset="1" stopColor="currentColor" className="text-utility-neutral-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-neutral-100" />
+                <circle cx="34" cy="20" r="8" className="fill-utility-neutral-100" />
+                <circle cx="206" cy="126" r="6" className="fill-utility-neutral-100" />
+                <circle cx="33" cy="138" r="10" className="fill-utility-neutral-100" />
+                <circle cx="218" cy="38" r="10" className="fill-utility-neutral-100" />
+                <circle cx="199" cy="11" r="7" className="fill-utility-neutral-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-neutral-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-neutral-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-neutral-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-neutral-100" />
+                        <stop offset="1" stopColor="currentColor" className="text-utility-neutral-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-neutral-100" />
+                        <stop offset="1" stopColor="currentColor" className="text-utility-neutral-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-neutral-100" />
+                        <stop offset="1" stopColor="currentColor" className="text-utility-neutral-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/iphone-mockup.tsx b/src/components/shared-assets/iphone-mockup.tsx
new file mode 100644
index 0000000..6ec7cff
--- /dev/null
+++ b/src/components/shared-assets/iphone-mockup.tsx
@@ -0,0 +1,170 @@
+import type { SVGProps } from "react";
+import { useId } from "react";
+import { cx } from "@/utils/cx";
+
+interface IPhoneMockupProps extends SVGProps<SVGSVGElement> {
+    /**
+     * The image to display on the phone.
+     */
+    image: string;
+    /**
+     * The dark mode image to display in dark mode.
+     * If not provided, the light mode image will be used in dark mode.
+     */
+    imageDark?: string;
+    /**
+     * The theme of the phone.
+     * @default "light"
+     */
+    theme?: "light" | "dark";
+}
+
+export const IPhoneMockup = ({ image, imageDark, theme, className, ...svgProps }: IPhoneMockupProps) => {
+    // We need to use a unique ID because there might be
+    // multiple instances of this element in the same page.
+    const id = useId();
+
+    return (
+        <svg
+            width="314"
+            viewBox="0 0 314 640"
+            fill="none"
+            preserveAspectRatio="xMidYMin slice"
+            {...svgProps}
+            className={cx("h-auto", theme === undefined ? "text-black dark:text-white" : theme === "light" ? "text-black" : "text-white", className)}
+        >
+            <defs>
+                <pattern id={`screen-${id}`} patternContentUnits="objectBoundingBox" width="1" height="1">
+                    <use xlinkHref={`#screen-image-${id}`} className={cx(imageDark && "dark:hidden")} transform="scale(0.00133333 0.000615764)" />
+                    {imageDark && <use xlinkHref={`#screen-image-dark-${id}`} className="not-dark:hidden" transform="scale(0.00133333 0.000615764)" />}{" "}
+                </pattern>
+                <clipPath id="status-bar-box">
+                    <rect width="281.69" height="609.953" fill="white" transform="translate(15.7744 14.2725)" />
+                </clipPath>
+
+                {/* Light mode image (hidden in dark mode) */}
+                <image id={`screen-image-${id}`} width="750" height="1624" xlinkHref={image} className={cx(imageDark && "dark:hidden")} />
+                {/* Dark mode image (hidden in light mode) */}
+                {imageDark && <image id={`screen-image-dark-${id}`} width="750" height="1624" xlinkHref={imageDark} className="not-dark:hidden" />}
+            </defs>
+
+            {/* Status bar */}
+            <g clipPath="url(#status-bar-box)">
+                <rect
+                    width="281.69"
+                    height="609.953"
+                    transform="translate(15.7744 14.2725)"
+                    className={cx(theme === undefined ? "fill-white dark:fill-black" : theme === "light" ? "fill-white" : "fill-black")}
+                />
+                {/* The screen */}
+                <rect width="281.69" height="609.953" transform="translate(15.7744 38.3096)" fill={`url(#screen-${id})`} />
+                <path
+                    opacity="0.35"
+                    d="M268.545 29.2961C268.545 28.3972 269.273 27.6686 270.172 27.6686H282.692C283.591 27.6686 284.319 28.3972 284.319 29.2961V33.8031C284.319 34.702 283.591 35.4307 282.692 35.4307H270.172C269.273 35.4307 268.545 34.702 268.545 33.8031V29.2961Z"
+                    strokeWidth="0.751174"
+                    stroke="currentColor"
+                />
+                <path
+                    opacity="0.4"
+                    d="M285.446 30.0479V33.0525C286.05 32.7981 286.443 32.2061 286.443 31.5502C286.443 30.8943 286.05 30.3023 285.446 30.0479Z"
+                    fill="currentColor"
+                />
+                <path
+                    d="M269.671 29.7975C269.671 29.2443 270.12 28.7959 270.673 28.7959H282.191C282.744 28.7959 283.193 29.2443 283.193 29.7975V33.3029C283.193 33.8561 282.744 34.3045 282.191 34.3045H270.673C270.12 34.3045 269.671 33.8561 269.671 33.3029V29.7975Z"
+                    fill="currentColor"
+                />
+                <path
+                    fillRule="evenodd"
+                    clipRule="evenodd"
+                    d="M258.651 29.0017C260.316 29.0018 261.917 29.6413 263.123 30.7882C263.214 30.8768 263.359 30.8757 263.449 30.7857L264.317 29.9094C264.362 29.8637 264.388 29.802 264.387 29.7377C264.387 29.6734 264.361 29.6119 264.315 29.5668C261.149 26.5324 256.154 26.5324 252.987 29.5668C252.941 29.6119 252.915 29.6733 252.915 29.7376C252.915 29.8019 252.94 29.8637 252.985 29.9094L253.854 30.7857C253.943 30.8758 254.088 30.8769 254.179 30.7882C255.386 29.6413 256.987 29.0017 258.651 29.0017ZM258.651 31.8527C259.566 31.8527 260.448 32.1926 261.126 32.8065C261.218 32.8936 261.362 32.8917 261.451 32.8022L262.319 31.9258C262.364 31.8799 262.39 31.8175 262.389 31.7527C262.388 31.6879 262.362 31.6261 262.315 31.5811C260.251 29.6608 257.054 29.6608 254.989 31.5811C254.943 31.6261 254.916 31.688 254.916 31.7528C254.915 31.8176 254.94 31.8799 254.986 31.9258L255.853 32.8022C255.943 32.8917 256.087 32.8936 256.179 32.8065C256.856 32.193 257.738 31.8531 258.651 31.8527ZM260.389 33.7709C260.39 33.8359 260.365 33.8985 260.318 33.9441L258.818 35.4582C258.774 35.5027 258.714 35.5277 258.652 35.5277C258.589 35.5277 258.529 35.5027 258.485 35.4582L256.984 33.9441C256.938 33.8985 256.913 33.8358 256.914 33.7709C256.915 33.7059 256.943 33.6443 256.992 33.6008C257.95 32.7903 259.353 32.7903 260.311 33.6008C260.36 33.6444 260.388 33.7059 260.389 33.7709Z"
+                    fill="currentColor"
+                />
+                <path
+                    fillRule="evenodd"
+                    clipRule="evenodd"
+                    d="M248.388 27.5439H247.637C247.222 27.5439 246.886 27.8803 246.886 28.2951V34.8053C246.886 35.2202 247.222 35.5565 247.637 35.5565H248.388C248.803 35.5565 249.139 35.2202 249.139 34.8053V28.2951C249.139 27.8803 248.803 27.5439 248.388 27.5439ZM244.131 29.2964H244.883C245.297 29.2964 245.634 29.6328 245.634 30.0476V34.805C245.634 35.2199 245.297 35.5562 244.883 35.5562H244.131C243.717 35.5562 243.38 35.2199 243.38 34.805V30.0476C243.38 29.6328 243.717 29.2964 244.131 29.2964ZM241.377 31.0497H240.626C240.211 31.0497 239.874 31.386 239.874 31.8008V34.8055C239.874 35.2204 240.211 35.5567 240.626 35.5567H241.377C241.792 35.5567 242.128 35.2204 242.128 34.8055V31.8008C242.128 31.386 241.792 31.0497 241.377 31.0497ZM237.871 32.552H237.12C236.705 32.552 236.369 32.8883 236.369 33.3032V34.8055C236.369 35.2204 236.705 35.5567 237.12 35.5567H237.871C238.286 35.5567 238.623 35.2204 238.623 34.8055V33.3032C238.623 32.8883 238.286 32.552 237.871 32.552Z"
+                    fill="currentColor"
+                />
+                <path
+                    d="M43.8087 35.4986C45.8279 35.4986 47.0273 33.9196 47.0273 31.2457C47.0273 30.2389 46.8347 29.3917 46.4661 28.7369C45.9324 27.7191 45.0136 27.1689 43.8528 27.1689C42.1252 27.1689 40.9038 28.3298 40.9038 29.9583C40.9038 31.4878 42.0042 32.5992 43.5171 32.5992C44.4469 32.5992 45.2007 32.1645 45.5748 31.4108H45.5913C45.5913 31.4108 45.6133 31.4108 45.6188 31.4108C45.6298 31.4108 45.6683 31.4108 45.6683 31.4108C45.6683 33.2264 44.9806 34.3102 43.8197 34.3102C43.1375 34.3102 42.6094 33.9361 42.4278 33.3364H41.0138C41.2504 34.6403 42.3563 35.4986 43.8087 35.4986ZM43.8583 31.4713C42.945 31.4713 42.2958 30.8221 42.2958 29.9143C42.2958 29.0285 42.978 28.3518 43.8638 28.3518C44.7495 28.3518 45.4318 29.0395 45.4318 29.9363C45.4318 30.8221 44.766 31.4713 43.8583 31.4713Z"
+                    fill="currentColor"
+                />
+                <path
+                    d="M49.3492 35.4216C49.8719 35.4216 50.2295 35.0475 50.2295 34.5523C50.2295 34.0516 49.8719 33.683 49.3492 33.683C48.8321 33.683 48.4689 34.0516 48.4689 34.5523C48.4689 35.0475 48.8321 35.4216 49.3492 35.4216ZM49.3492 31.2953C49.8719 31.2953 50.2295 30.9266 50.2295 30.4315C50.2295 29.9308 49.8719 29.5622 49.3492 29.5622C48.8321 29.5622 48.4689 29.9308 48.4689 30.4315C48.4689 30.9266 48.8321 31.2953 49.3492 31.2953Z"
+                    fill="currentColor"
+                />
+                <path
+                    d="M55.3794 35.306H56.7383V33.8261H57.8112V32.6267H56.7383V27.367H54.7357C53.3327 29.4797 52.2159 31.2457 51.5006 32.5607V33.8261H55.3794V35.306ZM52.8156 32.5772C53.7399 30.9487 54.5651 29.6447 55.3244 28.5224H55.4014V32.6597H52.8156V32.5772Z"
+                    fill="currentColor"
+                />
+                <path d="M60.8373 35.306H62.2568V27.367H60.8428L58.7687 28.8195V30.1839L60.7438 28.7975H60.8373V35.306Z" fill="currentColor" />
+                <rect x="106.667" y="614.46" width="100.657" height="3.75587" rx="1.87793" fill="currentColor" />
+            </g>
+            <path
+                d="M311.294 163.718H312.406C313.02 163.718 313.517 164.218 313.517 164.834V237.763C313.517 238.379 313.02 238.879 312.406 238.879H311.294V163.718Z"
+                fill="#303030"
+            />
+            <path
+                d="M2.22266 254.506L1.11089 254.506C0.496874 254.506 -0.000880198 254.006 -0.000880144 253.39L-0.000876321 209.484C-0.000876268 208.867 0.496878 208.367 1.11089 208.367L2.22266 208.367L2.22266 254.506Z"
+                fill="#303030"
+            />
+            <path
+                d="M2.22266 193.484L1.11089 193.484C0.496874 193.484 -0.000880198 192.985 -0.000880144 192.368L-0.000876321 148.462C-0.000876268 147.846 0.496878 147.346 1.11089 147.346L2.22266 147.346L2.22266 193.484Z"
+                fill="#333333"
+            />
+            <path
+                d="M2.22266 125.021L1.11089 125.021C0.496878 125.021 -0.000877337 124.521 -0.000877283 123.904L-0.000875404 102.323C-0.00087535 101.707 0.496879 101.207 1.11089 101.207L2.22266 101.207L2.22266 125.021Z"
+                fill="#333333"
+            />
+            <path
+                fillRule="evenodd"
+                clipRule="evenodd"
+                d="M4.58058 33.4236C2.22266 40.7098 2.22266 49.713 2.22266 67.7195V570.778C2.22266 588.785 2.22266 597.788 4.58058 605.074C9.3461 619.8 20.8451 631.345 35.5118 636.13C42.7688 638.498 51.7358 638.498 69.6698 638.498H243.846C261.78 638.498 270.747 638.498 278.004 636.13C292.671 631.345 304.17 619.8 308.936 605.074C311.294 597.788 311.294 588.785 311.294 570.778V67.7194C311.294 49.713 311.294 40.7098 308.936 33.4236C304.17 18.6976 292.671 7.15221 278.004 2.36745C270.747 0 261.78 0 243.846 0H69.6698C51.7358 0 42.7688 0 35.5118 2.36745C20.8451 7.15221 9.3461 18.6976 4.58058 33.4236ZM80.7881 18.2322V21.5809L80.841 21.5793L80.7878 21.953C80.7878 30.7894 87.9223 37.9526 96.7231 37.9526H216.794C225.595 37.9526 232.729 30.7894 232.729 21.953L232.676 21.5793L232.729 21.5809V18.2322C232.729 15.9717 234.554 14.1392 236.805 14.1392L246.352 14.1392C261.276 14.1392 268.738 14.1392 274.69 16.3971C284.044 19.9461 291.428 27.36 294.963 36.7521C297.212 42.7274 297.212 50.2197 297.212 65.2041V573.294C297.212 588.278 297.212 595.77 294.963 601.746C291.428 611.138 284.044 618.552 274.69 622.101C268.738 624.358 261.276 624.358 246.352 624.358H67.165C52.2408 624.358 44.7787 624.358 38.8273 622.101C29.473 618.552 22.0889 611.138 18.5542 601.746C16.3054 595.77 16.3054 588.278 16.3054 573.294V65.2041C16.3054 50.2197 16.3054 42.7274 18.5542 36.7521C22.0889 27.36 29.473 19.9461 38.8273 16.3971C44.7787 14.1392 52.2408 14.1392 67.165 14.1392L76.7116 14.1392C78.963 14.1392 80.7881 15.9717 80.7881 18.2322Z"
+                fill="#333333"
+            />
+            <path
+                fillRule="evenodd"
+                clipRule="evenodd"
+                d="M244.144 1.48831H69.3739C51.6581 1.48831 42.9759 1.49749 35.9704 3.78291C21.7549 8.42045 10.6098 19.6106 5.99091 33.8835C3.71468 40.9173 3.70553 49.6344 3.70553 67.4217V571.076C3.70553 588.863 3.71468 597.58 5.99091 604.614C10.6098 618.887 21.7549 630.077 35.9704 634.715C42.9759 637 51.6581 637.009 69.3739 637.009H244.144C261.859 637.009 270.541 637 277.547 634.715C291.762 630.077 302.908 618.887 307.527 604.614C309.803 597.58 309.812 588.863 309.812 571.076V67.4217C309.812 49.6344 309.803 40.9173 307.527 33.8835C302.908 19.6106 291.762 8.42045 277.547 3.78291C270.541 1.49749 261.859 1.48831 244.144 1.48831ZM5.28601 33.6535C2.96436 40.8276 2.96436 49.6923 2.96436 67.4217V571.076C2.96436 588.805 2.96436 597.67 5.28601 604.844C9.97821 619.344 21.3003 630.711 35.7414 635.422C42.8867 637.753 51.7158 637.753 69.3739 637.753H244.144C261.802 637.753 270.631 637.753 277.776 635.422C292.217 630.711 303.539 619.344 308.231 604.844C310.553 597.67 310.553 588.805 310.553 571.076V67.4217C310.553 49.6923 310.553 40.8276 308.231 33.6535C303.539 19.1541 292.217 7.78631 277.776 3.07517C270.631 0.744141 261.802 0.744141 244.144 0.744141H69.3739C51.7158 0.744141 42.8867 0.744141 35.7414 3.07517C21.3003 7.78631 9.97821 19.1541 5.28601 33.6535Z"
+                fill="#303030"
+            />
+            <path
+                fillRule="evenodd"
+                clipRule="evenodd"
+                d="M8.10672 34.5732C5.93018 41.299 5.93018 49.6096 5.93018 66.231V572.266C5.93018 588.888 5.93018 597.198 8.10672 603.924C12.5057 617.517 23.1201 628.174 36.6586 632.591C43.3574 634.777 51.6346 634.777 68.1891 634.777H245.33C261.885 634.777 270.162 634.777 276.861 632.591C290.399 628.174 301.014 617.517 305.413 603.924C307.589 597.198 307.589 588.888 307.589 572.266V66.231C307.589 49.6096 307.589 41.299 305.413 34.5732C301.014 20.98 290.399 10.3227 276.861 5.90604C270.162 3.7207 261.885 3.7207 245.33 3.7207H68.1891C51.6346 3.7207 43.3574 3.7207 36.6586 5.90604C23.1201 10.3227 12.5057 20.98 8.10672 34.5732ZM80.7888 18.232V21.5808L80.8418 21.5791L80.7886 21.9528C80.7886 30.7892 87.9231 37.9525 96.7239 37.9525H216.795C225.596 37.9525 232.73 30.7892 232.73 21.9528L232.677 21.5791L232.73 21.5808V18.232C232.73 15.9716 234.555 14.1391 236.806 14.1391L246.353 14.1391C261.277 14.1391 268.739 14.1391 274.69 16.397C284.045 19.9459 291.429 27.3599 294.964 36.7519C297.212 42.7273 297.212 50.2195 297.212 65.204V573.293C297.212 588.278 297.212 595.77 294.964 601.745C291.429 611.137 284.045 618.551 274.69 622.1C268.739 624.358 261.277 624.358 246.353 624.358H67.1657C52.2415 624.358 44.7794 624.358 38.8281 622.1C29.4738 618.551 22.0897 611.137 18.555 601.745C16.3062 595.77 16.3062 588.278 16.3062 573.293V65.204C16.3062 50.2195 16.3062 42.7273 18.555 36.7519C22.0897 27.3599 29.4738 19.9459 38.8281 16.397C44.7794 14.1391 52.2415 14.1391 67.1658 14.1391L76.7124 14.1391C78.9638 14.1391 80.7888 15.9716 80.7888 18.232Z"
+                fill="#121515"
+            />
+            <rect x="245.33" width="4.44705" height="3.72085" fill="#414141" />
+            <rect x="307.588" y="63.999" width="3.70594" height="4.46502" fill="#414141" />
+            <rect x="2.22363" y="63.999" width="3.70589" height="4.46502" fill="#414141" />
+            <rect x="2.22363" y="570.033" width="3.70589" height="4.465" fill="#414141" />
+            <rect x="307.588" y="570.033" width="3.70594" height="4.465" fill="#414141" />
+            <rect x="63.7402" y="634.777" width="4.44707" height="3.72084" fill="#414141" />
+            <path
+                fillRule="evenodd"
+                clipRule="evenodd"
+                d="M188.259 29.7671C191.534 29.7671 194.188 27.1017 194.188 23.8137C194.188 20.5258 191.534 17.8604 188.259 17.8604C184.984 17.8604 182.33 20.5258 182.33 23.8137C182.33 27.1017 184.984 29.7671 188.259 29.7671Z"
+                fill="#262C2D"
+            />
+            <path
+                fillRule="evenodd"
+                clipRule="evenodd"
+                d="M188.259 27.5345C190.305 27.5345 191.965 25.8686 191.965 23.8136C191.965 21.7587 190.305 20.0928 188.259 20.0928C186.212 20.0928 184.553 21.7587 184.553 23.8136C184.553 25.8686 186.212 27.5345 188.259 27.5345Z"
+                fill="#121515"
+            />
+            <path
+                opacity="0.4"
+                fillRule="evenodd"
+                clipRule="evenodd"
+                d="M188.26 23.0701C188.67 23.0701 189.002 22.7368 189.002 22.3256C189.002 21.9144 188.67 21.5811 188.26 21.5811C187.851 21.5811 187.519 21.9144 187.519 22.3256C187.519 22.7368 187.851 23.0701 188.26 23.0701Z"
+                fill="#636F73"
+            />
+            <path
+                fillRule="evenodd"
+                clipRule="evenodd"
+                d="M138.601 23.8136C138.601 22.5806 139.6 21.5811 140.833 21.5811H172.686C173.919 21.5811 174.918 22.5806 174.918 23.8136C174.918 25.0465 173.919 26.0461 172.686 26.0461H140.833C139.6 26.0461 138.601 25.0465 138.601 23.8136Z"
+                fill="#262C2D"
+            />
+        </svg>
+    );
+};
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/features/editor-pane.tsx b/src/features/editor-pane.tsx
new file mode 100644
index 0000000..2b53926
--- /dev/null
+++ b/src/features/editor-pane.tsx
@@ -0,0 +1,49 @@
+import { markdown, markdownLanguage } from "@codemirror/lang-markdown";
+import { languages } from "@codemirror/language-data";
+import { githubDark, githubLight } from "@uiw/codemirror-theme-github";
+import CodeMirror, { EditorView } from "@uiw/react-codemirror";
+import { cx } from "@/utils/cx";
+
+const editorSetup = {
+    lineNumbers: true,
+    foldGutter: false,
+    highlightActiveLine: true,
+    highlightActiveLineGutter: true,
+    highlightSelectionMatches: false,
+} as const;
+
+const editorExtensions = [
+    markdown({ base: markdownLanguage, codeLanguages: languages }),
+    EditorView.lineWrapping,
+    EditorView.theme({
+        "&": { fontSize: "13.5px", height: "100%", backgroundColor: "transparent" },
+        ".cm-gutters": { backgroundColor: "transparent", borderRight: "none" },
+        ".cm-content": { padding: "16px 0" },
+        ".cm-line": { padding: "0 16px" },
+        "&.cm-focused": { outline: "none" },
+    }),
+];
+
+interface EditorPaneProps {
+    value: string;
+    onChange: (value: string) => void;
+    isDark: boolean;
+    className?: string;
+}
+
+export const EditorPane = ({ value, onChange, isDark, className }: EditorPaneProps) => {
+    return (
+        <div className={cx("h-full min-w-0 overflow-hidden bg-primary", className)}>
+            <CodeMirror
+                value={value}
+                onChange={onChange}
+                theme={isDark ? githubDark : githubLight}
+                extensions={editorExtensions}
+                basicSetup={editorSetup}
+                height="100%"
+                className="h-full [&_.cm-editor]:h-full"
+                aria-label="Markdown editor"
+            />
+        </div>
+    );
+};
diff --git a/src/features/header.tsx b/src/features/header.tsx
new file mode 100644
index 0000000..fd399b6
--- /dev/null
+++ b/src/features/header.tsx
@@ -0,0 +1,107 @@
+import { useRef } from "react";
+import { ChevronDown, Code01, Columns02, Download01, Eye, File04, FileCode01, Moon01, Printer, Sun, UploadCloud02, XClose } from "@untitledui/icons";
+import { ACCEPTED_EXTENSIONS } from "@/features/upload-zone";
+import { BadgeWithDot } from "@/components/base/badges/badges";
+import { ButtonGroup, ButtonGroupItem } from "@/components/base/button-group/button-group";
+import { Button } from "@/components/base/buttons/button";
+import { ButtonUtility } from "@/components/base/buttons/button-utility";
+import { Dropdown } from "@/components/base/dropdown/dropdown";
+import { useResolvedTheme } from "@/hooks/use-resolved-theme";
+import { useTheme } from "@/providers/theme-provider";
+
+export type ViewMode = "editor" | "split" | "preview";
+export type ExportFormat = "md" | "html" | "pdf";
+
+interface HeaderProps {
+    filename: string;
+    isDirty: boolean;
+    viewMode: ViewMode;
+    onViewModeChange: (mode: ViewMode) => void;
+    onOpenFiles: (files: FileList) => void;
+    onExport: (format: ExportFormat) => void;
+    onClose: () => void;
+}
+
+export const Header = ({ filename, isDirty, viewMode, onViewModeChange, onOpenFiles, onExport, onClose }: HeaderProps) => {
+    const fileInputRef = useRef<HTMLInputElement>(null);
+    const { setTheme } = useTheme();
+    const resolvedTheme = useResolvedTheme();
+    const isDark = resolvedTheme === "dark";
+
+    return (
+        <header className="flex flex-wrap items-center gap-x-4 gap-y-3 border-b border-secondary bg-primary px-4 py-3 lg:px-6">
+            <div className="flex min-w-0 items-center gap-3">
+                <div className="flex size-8 shrink-0 items-center justify-center rounded-lg bg-brand-solid text-white shadow-xs">
+                    <FileCode01 className="size-4.5" />
+                </div>
+                <span className="text-md font-semibold text-primary max-md:hidden">Markdown Studio</span>
+
+                <div className="flex min-w-0 items-center gap-1">
+                    <BadgeWithDot size="md" color={isDirty ? "warning" : "success"} type="modern" className="min-w-0 max-w-48">
+                        <span className="truncate" title={isDirty ? `${filename} — unsaved changes` : filename}>
+                            {filename}
+                        </span>
+                    </BadgeWithDot>
+                    <ButtonUtility color="tertiary" size="xs" tooltip="Close file" icon={XClose} onClick={onClose} />
+                </div>
+            </div>
+
+            <div className="ml-auto flex flex-wrap items-center gap-3">
+                <ButtonGroup
+                    size="sm"
+                    selectedKeys={[viewMode]}
+                    disallowEmptySelection
+                    onSelectionChange={(keys) => {
+                        const mode = [...keys][0] as ViewMode | undefined;
+                        if (mode) onViewModeChange(mode);
+                    }}
+                >
+                    <ButtonGroupItem id="editor" iconLeading={Code01}>
+                        <span className="max-lg:hidden">Editor</span>
+                    </ButtonGroupItem>
+                    <ButtonGroupItem id="split" iconLeading={Columns02}>
+                        <span className="max-lg:hidden">Split</span>
+                    </ButtonGroupItem>
+                    <ButtonGroupItem id="preview" iconLeading={Eye}>
+                        <span className="max-lg:hidden">Preview</span>
+                    </ButtonGroupItem>
+                </ButtonGroup>
+
+                <input
+                    ref={fileInputRef}
+                    type="file"
+                    accept={ACCEPTED_EXTENSIONS}
+                    className="sr-only"
+                    onChange={(event) => {
+                        if (event.target.files?.length) onOpenFiles(event.target.files);
+                        event.target.value = "";
+                    }}
+                />
+                <Button color="secondary" size="sm" iconLeading={UploadCloud02} onClick={() => fileInputRef.current?.click()}>
+                    <span className="max-lg:hidden">Open</span>
+                </Button>
+
+                <Dropdown.Root>
+                    <Button color="primary" size="sm" iconLeading={Download01} iconTrailing={ChevronDown}>
+                        Export
+                    </Button>
+                    <Dropdown.Popover className="w-55">
+                        <Dropdown.Menu onAction={(key) => onExport(key as ExportFormat)}>
+                            <Dropdown.Item id="md" label="Markdown (.md)" icon={File04} addon="⌘S" />
+                            <Dropdown.Item id="html" label="HTML (.html)" icon={Code01} />
+                            <Dropdown.Item id="pdf" label="PDF (print)" icon={Printer} />
+                        </Dropdown.Menu>
+                    </Dropdown.Popover>
+                </Dropdown.Root>
+
+                <ButtonUtility
+                    color="secondary"
+                    size="sm"
+                    tooltip={isDark ? "Switch to light mode" : "Switch to dark mode"}
+                    icon={isDark ? Sun : Moon01}
+                    onClick={() => setTheme(isDark ? "light" : "dark")}
+                />
+            </div>
+        </header>
+    );
+};
diff --git a/src/features/preview-pane.tsx b/src/features/preview-pane.tsx
new file mode 100644
index 0000000..a65b472
--- /dev/null
+++ b/src/features/preview-pane.tsx
@@ -0,0 +1,39 @@
+import { useEffect, useState } from "react";
+import Markdown from "react-markdown";
+import rehypeHighlight from "rehype-highlight";
+import remarkGfm from "remark-gfm";
+import { cx } from "@/utils/cx";
+
+const remarkPlugins = [remarkGfm];
+const rehypePlugins = [rehypeHighlight];
+
+/** Re-renders the (potentially large) markdown tree at most every `delay` ms while typing. */
+const useDebouncedValue = <T,>(value: T, delay: number): T => {
+    const [debounced, setDebounced] = useState(value);
+
+    useEffect(() => {
+        const timeout = setTimeout(() => setDebounced(value), delay);
+        return () => clearTimeout(timeout);
+    }, [value, delay]);
+
+    return debounced;
+};
+
+interface PreviewPaneProps {
+    content: string;
+    className?: string;
+}
+
+export const PreviewPane = ({ content, className }: PreviewPaneProps) => {
+    const debouncedContent = useDebouncedValue(content, 200);
+
+    return (
+        <div className={cx("h-full min-w-0 overflow-y-auto bg-primary", className)}>
+            <article className="markdown-preview prose prose-gray mx-auto max-w-3xl px-6 py-8 lg:px-10 dark:prose-invert">
+                <Markdown remarkPlugins={remarkPlugins} rehypePlugins={rehypePlugins}>
+                    {debouncedContent}
+                </Markdown>
+            </article>
+        </div>
+    );
+};
diff --git a/src/features/upload-zone.tsx b/src/features/upload-zone.tsx
new file mode 100644
index 0000000..94a1fb6
--- /dev/null
+++ b/src/features/upload-zone.tsx
@@ -0,0 +1,50 @@
+import { File02, FilePlus02 } from "@untitledui/icons";
+import { FileUpload } from "@/components/application/file-upload/file-upload-base";
+import { Button } from "@/components/base/buttons/button";
+import { FeaturedIcon } from "@/components/foundations/featured-icon/featured-icon";
+import { SAMPLE_FILENAME, SAMPLE_MARKDOWN } from "@/lib/sample";
+
+export const ACCEPTED_EXTENSIONS = ".md,.markdown,.mdown,.txt";
+
+interface UploadZoneProps {
+    onOpen: (content: string, filename: string) => void;
+}
+
+export const UploadZone = ({ onOpen }: UploadZoneProps) => {
+    const handleFiles = async (files: FileList) => {
+        const file = files[0];
+        if (!file) return;
+
+        onOpen(await file.text(), file.name);
+    };
+
+    return (
+        <main className="flex min-h-0 flex-1 items-center justify-center px-4 py-8">
+            <div className="flex w-full max-w-lg flex-col items-center">
+                <FeaturedIcon icon={File02} color="brand" theme="modern" size="xl" />
+
+                <h1 className="mt-6 text-center text-display-xs font-semibold text-primary">Markdown Studio</h1>
+                <p className="mt-2 max-w-sm text-center text-md text-tertiary">
+                    Upload a markdown file to edit it with a live preview, then export it as PDF, HTML, or Markdown.
+                </p>
+
+                <FileUpload.DropZone
+                    className="mt-8 w-full py-8"
+                    accept={ACCEPTED_EXTENSIONS}
+                    allowsMultiple={false}
+                    hint=".md, .markdown or .txt"
+                    onDropFiles={handleFiles}
+                />
+
+                <div className="mt-6 flex items-center gap-3">
+                    <Button color="secondary" size="md" iconLeading={FilePlus02} onClick={() => onOpen("", "untitled.md")}>
+                        Start blank
+                    </Button>
+                    <Button color="link-color" size="md" onClick={() => onOpen(SAMPLE_MARKDOWN, SAMPLE_FILENAME)}>
+                        Try the sample document
+                    </Button>
+                </div>
+            </div>
+        </main>
+    );
+};
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-document.ts b/src/hooks/use-document.ts
new file mode 100644
index 0000000..af969ae
--- /dev/null
+++ b/src/hooks/use-document.ts
@@ -0,0 +1,75 @@
+import { useCallback, useEffect, useState } from "react";
+
+const STORAGE_KEY = "md-studio:document";
+
+interface DocumentState {
+    /** Current editor content. */
+    content: string;
+    /** Name of the uploaded/created file, e.g. "notes.md". */
+    filename: string;
+    /** Content at the time of the last open or markdown download, used for the dirty flag. */
+    savedContent: string;
+}
+
+const loadStoredDocument = (): DocumentState | null => {
+    try {
+        const raw = localStorage.getItem(STORAGE_KEY);
+        if (!raw) return null;
+
+        const parsed = JSON.parse(raw);
+        if (typeof parsed?.content !== "string" || typeof parsed?.filename !== "string") return null;
+
+        return {
+            content: parsed.content,
+            filename: parsed.filename,
+            savedContent: typeof parsed.savedContent === "string" ? parsed.savedContent : parsed.content,
+        };
+    } catch {
+        return null;
+    }
+};
+
+export const useDocument = () => {
+    const [doc, setDoc] = useState<DocumentState | null>(loadStoredDocument);
+
+    useEffect(() => {
+        const timeout = setTimeout(() => {
+            try {
+                if (doc) {
+                    localStorage.setItem(STORAGE_KEY, JSON.stringify(doc));
+                } else {
+                    localStorage.removeItem(STORAGE_KEY);
+                }
+            } catch {
+                // Storage full or unavailable — autosave is best-effort.
+            }
+        }, 300);
+
+        return () => clearTimeout(timeout);
+    }, [doc]);
+
+    const openDocument = useCallback((content: string, filename: string) => {
+        setDoc({ content, filename, savedContent: content });
+    }, []);
+
+    const updateContent = useCallback((content: string) => {
+        setDoc((current) => (current ? { ...current, content } : current));
+    }, []);
+
+    const markSaved = useCallback(() => {
+        setDoc((current) => (current ? { ...current, savedContent: current.content } : current));
+    }, []);
+
+    const closeDocument = useCallback(() => {
+        setDoc(null);
+    }, []);
+
+    return {
+        doc,
+        isDirty: !!doc && doc.content !== doc.savedContent,
+        openDocument,
+        updateContent,
+        markSaved,
+        closeDocument,
+    };
+};
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/hooks/use-resolved-theme.ts b/src/hooks/use-resolved-theme.ts
new file mode 100644
index 0000000..13315c6
--- /dev/null
+++ b/src/hooks/use-resolved-theme.ts
@@ -0,0 +1,20 @@
+import { useEffect, useState } from "react";
+import { useTheme } from "@/providers/theme-provider";
+
+/** Resolves the "system" theme preference to the actual light/dark value, tracking OS changes. */
+export const useResolvedTheme = (): "light" | "dark" => {
+    const { theme } = useTheme();
+    const [systemTheme, setSystemTheme] = useState<"light" | "dark">(() =>
+        window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light",
+    );
+
+    useEffect(() => {
+        const mediaQuery = window.matchMedia("(prefers-color-scheme: dark)");
+        const handleChange = () => setSystemTheme(mediaQuery.matches ? "dark" : "light");
+
+        mediaQuery.addEventListener("change", handleChange);
+        return () => mediaQuery.removeEventListener("change", handleChange);
+    }, []);
+
+    return theme === "system" ? systemTheme : theme;
+};
diff --git a/src/lib/export.ts b/src/lib/export.ts
new file mode 100644
index 0000000..fb43d1b
--- /dev/null
+++ b/src/lib/export.ts
@@ -0,0 +1,142 @@
+import { baseFilename, renderMarkdownToHtml } from "@/lib/markdown";
+
+/**
+ * Self-contained stylesheet for exported documents (HTML download and PDF print).
+ * GitHub-flavored typography plus highlight.js token colors — no external requests,
+ * so the exported file renders correctly offline.
+ */
+const DOCUMENT_CSS = `
+:root { color-scheme: light; }
+* { box-sizing: border-box; }
+body {
+    margin: 0;
+    background: #ffffff;
+    color: #1f2328;
+    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans", Helvetica, Arial, sans-serif;
+    font-size: 16px;
+    line-height: 1.6;
+    -webkit-text-size-adjust: 100%;
+}
+.markdown-body { max-width: 820px; margin: 0 auto; padding: 48px 32px 64px; word-wrap: break-word; }
+.markdown-body > *:first-child { margin-top: 0; }
+h1, h2, h3, h4, h5, h6 { margin: 1.6em 0 0.6em; font-weight: 600; line-height: 1.25; }
+h1 { font-size: 2em; padding-bottom: 0.3em; border-bottom: 1px solid #d1d9e0; }
+h2 { font-size: 1.5em; padding-bottom: 0.3em; border-bottom: 1px solid #d1d9e0; }
+h3 { font-size: 1.25em; }
+h4 { font-size: 1em; }
+h5 { font-size: 0.875em; }
+h6 { font-size: 0.85em; color: #59636e; }
+p, ul, ol, dl, table, pre, blockquote { margin: 0 0 16px; }
+a { color: #0969da; text-decoration: none; }
+a:hover { text-decoration: underline; }
+strong { font-weight: 600; }
+hr { height: 1px; margin: 24px 0; border: 0; background-color: #d1d9e0; }
+ul, ol { padding-left: 2em; }
+li + li { margin-top: 0.25em; }
+li > input[type="checkbox"] { margin: 0 0.4em 0.2em -1.4em; vertical-align: middle; }
+li:has(> input[type="checkbox"]) { list-style: none; }
+blockquote { padding: 0 1em; color: #59636e; border-left: 4px solid #d1d9e0; }
+img { max-width: 100%; }
+code, kbd, pre { font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace; }
+code { padding: 0.2em 0.4em; font-size: 85%; background-color: rgba(129, 139, 152, 0.16); border-radius: 6px; }
+pre { padding: 16px; overflow: auto; font-size: 85%; line-height: 1.45; background-color: #f6f8fa; border-radius: 8px; }
+pre code { padding: 0; font-size: 100%; background: transparent; border-radius: 0; }
+table { display: block; width: max-content; max-width: 100%; overflow: auto; border-spacing: 0; border-collapse: collapse; }
+th, td { padding: 6px 13px; border: 1px solid #d1d9e0; }
+th { font-weight: 600; }
+tr:nth-child(2n) { background-color: #f6f8fa; }
+del { color: #59636e; }
+
+/* highlight.js tokens (GitHub light) */
+.hljs-comment, .hljs-quote { color: #6a737d; font-style: italic; }
+.hljs-keyword, .hljs-selector-tag, .hljs-doctag, .hljs-template-tag, .hljs-type { color: #d73a49; }
+.hljs-string, .hljs-regexp, .hljs-template-variable { color: #032f62; }
+.hljs-number, .hljs-literal, .hljs-variable, .hljs-attr, .hljs-attribute, .hljs-selector-attr, .hljs-selector-class, .hljs-selector-pseudo, .hljs-symbol { color: #005cc5; }
+.hljs-title, .hljs-section, .hljs-name { color: #6f42c1; }
+.hljs-built_in, .hljs-builtin-name { color: #e36209; }
+.hljs-meta, .hljs-bullet, .hljs-addition { color: #22863a; }
+.hljs-deletion { color: #b31d28; }
+.hljs-emphasis { font-style: italic; }
+.hljs-strong { font-weight: 700; }
+
+@media print {
+    @page { margin: 18mm 16mm; }
+    body { font-size: 12px; }
+    .markdown-body { max-width: none; padding: 0; }
+    pre, blockquote, table, img { break-inside: avoid; }
+    h1, h2, h3, h4 { break-after: avoid; }
+    a { color: inherit; }
+    pre { white-space: pre-wrap; word-break: break-word; }
+}
+`;
+
+const escapeHtml = (text: string): string =>
+    text.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;");
+
+/** Builds a fully self-contained HTML document from markdown. */
+export const buildStandaloneHtml = (markdown: string, title: string): string => {
+    const body = renderMarkdownToHtml(markdown);
+
+    return [
+        "<!doctype html>",
+        '<html lang="en">',
+        "<head>",
+        '<meta charset="utf-8" />',
+        '<meta name="viewport" content="width=device-width, initial-scale=1" />',
+        `<title>${escapeHtml(title)}</title>`,
+        `<style>${DOCUMENT_CSS}</style>`,
+        "</head>",
+        "<body>",
+        `<article class="markdown-body">${body}</article>`,
+        "</body>",
+        "</html>",
+    ].join("\n");
+};
+
+const downloadBlob = (content: string, filename: string, mimeType: string) => {
+    const blob = new Blob([content], { type: mimeType });
+    const url = URL.createObjectURL(blob);
+
+    const anchor = document.createElement("a");
+    anchor.href = url;
+    anchor.download = filename;
+    anchor.click();
+
+    // Give the browser a beat to start the download before revoking.
+    setTimeout(() => URL.revokeObjectURL(url), 1000);
+};
+
+export const exportMarkdown = (markdown: string, filename: string) => {
+    downloadBlob(markdown, `${baseFilename(filename)}.md`, "text/markdown;charset=utf-8");
+};
+
+export const exportHtml = (markdown: string, filename: string) => {
+    const title = baseFilename(filename);
+    downloadBlob(buildStandaloneHtml(markdown, title), `${title}.html`, "text/html;charset=utf-8");
+};
+
+/**
+ * Renders the document into a hidden iframe and opens the browser's print dialog,
+ * where the user picks "Save as PDF". Keeps the app fully static — no backend needed.
+ */
+export const exportPdf = (markdown: string, filename: string) => {
+    const iframe = document.createElement("iframe");
+    iframe.style.position = "fixed";
+    iframe.style.right = "0";
+    iframe.style.bottom = "0";
+    iframe.style.width = "0";
+    iframe.style.height = "0";
+    iframe.style.border = "0";
+    iframe.srcdoc = buildStandaloneHtml(markdown, baseFilename(filename));
+
+    iframe.onload = () => {
+        const win = iframe.contentWindow;
+        if (!win) return;
+
+        win.addEventListener("afterprint", () => iframe.remove());
+        win.focus();
+        win.print();
+    };
+
+    document.body.appendChild(iframe);
+};
diff --git a/src/lib/markdown.ts b/src/lib/markdown.ts
new file mode 100644
index 0000000..19d3a19
--- /dev/null
+++ b/src/lib/markdown.ts
@@ -0,0 +1,18 @@
+import rehypeHighlight from "rehype-highlight";
+import rehypeStringify from "rehype-stringify";
+import remarkGfm from "remark-gfm";
+import remarkParse from "remark-parse";
+import remarkRehype from "remark-rehype";
+import { unified } from "unified";
+
+const processor = unified().use(remarkParse).use(remarkGfm).use(remarkRehype).use(rehypeHighlight).use(rehypeStringify);
+
+/** Renders markdown to an HTML string using the same plugins as the live preview. */
+export const renderMarkdownToHtml = (markdown: string): string => {
+    return processor.processSync(markdown).toString();
+};
+
+/** Strips the extension from a filename, e.g. "notes.md" -> "notes". */
+export const baseFilename = (filename: string): string => {
+    return filename.replace(/\.[^.]+$/, "") || "document";
+};
diff --git a/src/lib/sample.ts b/src/lib/sample.ts
new file mode 100644
index 0000000..b1f5ad9
--- /dev/null
+++ b/src/lib/sample.ts
@@ -0,0 +1,52 @@
+export const SAMPLE_FILENAME = "welcome.md";
+
+export const SAMPLE_MARKDOWN = `# Markdown Studio
+
+Welcome! This is a **live playground** — edit the markdown on the left and watch the preview update on the right.
+
+## What you can do
+
+- Upload any \`.md\` file (drag & drop works too)
+- Switch between **Editor**, **Split**, and **Preview** layouts
+- Export your work as **Markdown**, **standalone HTML**, or **PDF**
+- Your work auto-saves locally, so a refresh won't lose anything
+
+## Formatting showcase
+
+### Code
+
+\`\`\`typescript
+interface Document {
+    filename: string;
+    content: string;
+}
+
+export const greet = (doc: Document): string => {
+    return \`Hello from \${doc.filename}!\`;
+};
+\`\`\`
+
+### Tables
+
+| Format   | Extension | Self-contained |
+| -------- | --------- | -------------- |
+| Markdown | \`.md\`   | ✅             |
+| HTML     | \`.html\` | ✅             |
+| PDF      | \`.pdf\`  | ✅             |
+
+### Task lists
+
+- [x] Set up the project
+- [x] Write some markdown
+- [ ] Export it as a PDF
+
+### Quotes & more
+
+> "The best way to predict the future is to invent it." — Alan Kay
+
+You can also use ~~strikethrough~~, *italics*, [links](https://example.com), and inline \`code\`.
+
+---
+
+Happy writing! ✍️
+`;
diff --git a/src/main.tsx b/src/main.tsx
new file mode 100644
index 0000000..bde8bd4
--- /dev/null
+++ b/src/main.tsx
@@ -0,0 +1,24 @@
+import { StrictMode } from "react";
+import { createRoot } from "react-dom/client";
+import { BrowserRouter, Route, Routes } from "react-router";
+import { MarkdownStudio } from "@/pages/markdown-studio";
+import { NotFound } from "@/pages/not-found";
+import { RouteProvider } from "@/providers/router-provider";
+import { ThemeProvider } from "@/providers/theme-provider";
+import "@fontsource-variable/inter/index.css";
+import "@/styles/globals.css";
+
+createRoot(document.getElementById("root")!).render(
+    <StrictMode>
+        <ThemeProvider>
+            <BrowserRouter>
+                <RouteProvider>
+                    <Routes>
+                        <Route path="/" element={<MarkdownStudio />} />
+                        <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/markdown-studio.tsx b/src/pages/markdown-studio.tsx
new file mode 100644
index 0000000..b568c12
--- /dev/null
+++ b/src/pages/markdown-studio.tsx
@@ -0,0 +1,154 @@
+import { useCallback, useEffect, useRef, useState } from "react";
+import { useHotkeys } from "react-hotkeys-hook";
+import { EditorPane } from "@/features/editor-pane";
+import { Header, type ExportFormat, type ViewMode } from "@/features/header";
+import { PreviewPane } from "@/features/preview-pane";
+import { UploadZone } from "@/features/upload-zone";
+import { useDocument } from "@/hooks/use-document";
+import { useResolvedTheme } from "@/hooks/use-resolved-theme";
+import { exportHtml, exportMarkdown, exportPdf } from "@/lib/export";
+import { cx } from "@/utils/cx";
+
+const VIEW_MODE_KEY = "md-studio:view-mode";
+const MIN_SPLIT = 0.25;
+const MAX_SPLIT = 0.75;
+
+const loadViewMode = (): ViewMode => {
+    const stored = localStorage.getItem(VIEW_MODE_KEY);
+    return stored === "editor" || stored === "preview" ? stored : "split";
+};
+
+export const MarkdownStudio = () => {
+    const { doc, isDirty, openDocument, updateContent, markSaved, closeDocument } = useDocument();
+    const [viewMode, setViewMode] = useState<ViewMode>(loadViewMode);
+    const [splitRatio, setSplitRatio] = useState(0.5);
+    const [isResizing, setIsResizing] = useState(false);
+    const mainRef = useRef<HTMLDivElement>(null);
+    const isDark = useResolvedTheme() === "dark";
+
+    useEffect(() => {
+        localStorage.setItem(VIEW_MODE_KEY, viewMode);
+    }, [viewMode]);
+
+    const handleOpenFiles = useCallback(
+        async (files: FileList) => {
+            const file = files[0];
+            if (!file) return;
+
+            if (isDirty && !window.confirm(`Replace "${doc?.filename}"? Unsaved changes will be lost.`)) return;
+
+            openDocument(await file.text(), file.name);
+        },
+        [isDirty, doc?.filename, openDocument],
+    );
+
+    const handleExport = useCallback(
+        (format: ExportFormat) => {
+            if (!doc) return;
+
+            if (format === "md") {
+                exportMarkdown(doc.content, doc.filename);
+                markSaved();
+            } else if (format === "html") {
+                exportHtml(doc.content, doc.filename);
+            } else {
+                exportPdf(doc.content, doc.filename);
+            }
+        },
+        [doc, markSaved],
+    );
+
+    const handleClose = useCallback(() => {
+        if (isDirty && !window.confirm(`Close "${doc?.filename}"? Unsaved changes will be lost.`)) return;
+        closeDocument();
+    }, [isDirty, doc?.filename, closeDocument]);
+
+    useHotkeys("mod+s", () => handleExport("md"), { preventDefault: true, enableOnFormTags: true, enableOnContentEditable: true }, [handleExport]);
+
+    // Drag the divider to resize the split view.
+    const handleResizeStart = useCallback((event: React.PointerEvent) => {
+        event.preventDefault();
+        setIsResizing(true);
+
+        const handleMove = (moveEvent: PointerEvent) => {
+            const rect = mainRef.current?.getBoundingClientRect();
+            if (!rect || rect.width === 0) return;
+
+            const ratio = (moveEvent.clientX - rect.left) / rect.width;
+            setSplitRatio(Math.min(MAX_SPLIT, Math.max(MIN_SPLIT, ratio)));
+        };
+        const handleUp = () => {
+            setIsResizing(false);
+            window.removeEventListener("pointermove", handleMove);
+            window.removeEventListener("pointerup", handleUp);
+        };
+
+        window.addEventListener("pointermove", handleMove);
+        window.addEventListener("pointerup", handleUp);
+    }, []);
+
+    // Allow dropping a markdown file anywhere in the app to open it.
+    const handleDrop = useCallback(
+        (event: React.DragEvent) => {
+            event.preventDefault();
+            const file = event.dataTransfer.files[0];
+            if (file && /\.(md|markdown|mdown|txt)$/i.test(file.name)) {
+                handleOpenFiles(event.dataTransfer.files);
+            }
+        },
+        [handleOpenFiles],
+    );
+
+    if (!doc) {
+        return (
+            <div className="flex h-dvh flex-col bg-secondary_subtle">
+                <UploadZone onOpen={openDocument} />
+            </div>
+        );
+    }
+
+    const showEditor = viewMode !== "preview";
+    const showPreview = viewMode !== "editor";
+    const isSplit = viewMode === "split";
+
+    return (
+        <div className="flex h-dvh flex-col bg-primary" onDragOver={(event) => event.preventDefault()} onDrop={handleDrop}>
+            <Header
+                filename={doc.filename}
+                isDirty={isDirty}
+                viewMode={viewMode}
+                onViewModeChange={setViewMode}
+                onOpenFiles={handleOpenFiles}
+                onExport={handleExport}
+                onClose={handleClose}
+            />
+
+            <main ref={mainRef} className={cx("flex min-h-0 flex-1", isResizing && "cursor-col-resize select-none")}>
+                {/* Both panes stay mounted so the editor keeps its undo history and the preview its scroll position. */}
+                <div
+                    className={cx("min-w-0", !showEditor && "hidden", isSplit ? "shrink-0 max-md:hidden" : "flex-1")}
+                    style={isSplit ? { width: `${splitRatio * 100}%` } : undefined}
+                >
+                    <EditorPane value={doc.content} onChange={updateContent} isDark={isDark} />
+                </div>
+
+                {isSplit && (
+                    <div
+                        role="separator"
+                        aria-orientation="vertical"
+                        className={cx(
+                            "relative w-px shrink-0 cursor-col-resize bg-border-secondary transition duration-100 max-md:hidden",
+                            "after:absolute after:inset-y-0 after:-inset-x-1 after:z-10",
+                            isResizing ? "bg-brand-solid" : "hover:bg-brand-solid",
+                        )}
+                        onPointerDown={handleResizeStart}
+                    />
+                )}
+
+                <div className={cx("min-w-0 flex-1", !showPreview && "hidden", isSplit && "border-l border-secondary max-md:border-l-0")}>
+                    <PreviewPane content={doc.content} />
+                </div>
+            </main>
+        </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..abead89
--- /dev/null
+++ b/src/styles/globals.css
@@ -0,0 +1,75 @@
+@import "tailwindcss";
+@import "./theme.css";
+@import "./typography.css";
+@import "./markdown.css";
+
+@plugin "@tailwindcss/typography";
+@plugin "tailwindcss-react-aria-components";
+@plugin "tailwindcss-animate";
+
+@custom-variant dark (&:where(.dark-mode, .dark-mode *));
+
+/* Self-hosted via @fontsource-variable/inter (imported in main.tsx). */
+:root {
+    --font-inter: "Inter Variable";
+}
+@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/markdown.css b/src/styles/markdown.css
new file mode 100644
index 0000000..af84488
--- /dev/null
+++ b/src/styles/markdown.css
@@ -0,0 +1,87 @@
+/* highlight.js token colors for the live preview — GitHub light, with dark overrides. */
+:root {
+    --hljs-comment: #6a737d;
+    --hljs-keyword: #d73a49;
+    --hljs-string: #032f62;
+    --hljs-literal: #005cc5;
+    --hljs-title: #6f42c1;
+    --hljs-builtin: #e36209;
+    --hljs-meta: #22863a;
+    --hljs-deletion: #b31d28;
+}
+
+.dark-mode {
+    --hljs-comment: #8b949e;
+    --hljs-keyword: #ff7b72;
+    --hljs-string: #a5d6ff;
+    --hljs-literal: #79c0ff;
+    --hljs-title: #d2a8ff;
+    --hljs-builtin: #ffa657;
+    --hljs-meta: #7ee787;
+    --hljs-deletion: #ffa198;
+}
+
+.hljs-comment,
+.hljs-quote {
+    color: var(--hljs-comment);
+    font-style: italic;
+}
+.hljs-keyword,
+.hljs-selector-tag,
+.hljs-doctag,
+.hljs-template-tag,
+.hljs-type {
+    color: var(--hljs-keyword);
+}
+.hljs-string,
+.hljs-regexp,
+.hljs-template-variable {
+    color: var(--hljs-string);
+}
+.hljs-number,
+.hljs-literal,
+.hljs-variable,
+.hljs-attr,
+.hljs-attribute,
+.hljs-selector-attr,
+.hljs-selector-class,
+.hljs-selector-pseudo,
+.hljs-symbol {
+    color: var(--hljs-literal);
+}
+.hljs-title,
+.hljs-section,
+.hljs-name {
+    color: var(--hljs-title);
+}
+.hljs-built_in,
+.hljs-builtin-name {
+    color: var(--hljs-builtin);
+}
+.hljs-meta,
+.hljs-bullet,
+.hljs-addition {
+    color: var(--hljs-meta);
+}
+.hljs-deletion {
+    color: var(--hljs-deletion);
+}
+.hljs-emphasis {
+    font-style: italic;
+}
+.hljs-strong {
+    font-weight: 700;
+}
+
+/* Small refinements to the preview typography. */
+.markdown-preview :where(pre) {
+    border: 1px solid var(--color-border-secondary, transparent);
+}
+.markdown-preview :where(li):has(> input[type="checkbox"]) {
+    list-style: none;
+    margin-left: -1.375em;
+}
+.markdown-preview :where(li) > input[type="checkbox"] {
+    margin-right: 0.5em;
+    vertical-align: middle;
+}
diff --git a/src/styles/theme.css b/src/styles/theme.css
new file mode 100644
index 0000000..0ae31cf
--- /dev/null
+++ b/src/styles/theme.css
@@ -0,0 +1,856 @@
+@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(0, 0, 0, 0.05);
+    --shadow-sm: 0px 1px 3px rgba(0, 0, 0, 0.1), 0px 1px 2px -1px rgba(0, 0, 0, 0.1);
+    --shadow-md: 0px 4px 6px -1px rgba(0, 0, 0, 0.1), 0px 2px 4px -2px rgba(0, 0, 0, 0.06);
+    --shadow-lg: 0px 12px 16px -4px rgba(0, 0, 0, 0.08), 0px 4px 6px -2px rgba(0, 0, 0, 0.03), 0px 2px 2px -1px rgba(0, 0, 0, 0.04);
+    --shadow-xl: 0px 20px 24px -4px rgba(0, 0, 0, 0.08), 0px 8px 8px -4px rgba(0, 0, 0, 0.03), 0px 3px 3px -1.5px rgba(0, 0, 0, 0.04);
+    --shadow-2xl: 0px 24px 48px -12px rgba(0, 0, 0, 0.18), 0px 4px 4px -2px rgba(0, 0, 0, 0.04);
+    --shadow-3xl: 0px 32px 64px -12px rgba(0, 0, 0, 0.14), 0px 5px 5px -2.5px rgba(0, 0, 0, 0.04);
+
+    --shadow-skeuomorphic: 0px 0px 0px 1px rgba(0, 0, 0, 0.18) inset, 0px -2px 0px 0px rgba(0, 0, 0, 0.05) inset;
+    --shadow-xs-skeuomorphic: var(--shadow-skeuomorphic), 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);
+
+    /* These will be inverted in dark mode. */
+    --color-alpha-white: rgb(255 255 255);
+    --color-alpha-black: rgb(0 0 0);
+
+    --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);
+
+    /* 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-neutral-50: var(--color-neutral-50);
+    --color-utility-neutral-100: var(--color-neutral-100);
+    --color-utility-neutral-200: var(--color-neutral-200);
+    --color-utility-neutral-300: var(--color-neutral-300);
+    --color-utility-neutral-400: var(--color-neutral-400);
+    --color-utility-neutral-500: var(--color-neutral-500);
+    --color-utility-neutral-600: var(--color-neutral-600);
+    --color-utility-neutral-700: var(--color-neutral-700);
+    --color-utility-neutral-800: var(--color-neutral-800);
+    --color-utility-neutral-900: var(--color-neutral-900);
+
+    --color-utility-red-50: var(--color-red-50);
+    --color-utility-red-100: var(--color-red-100);
+    --color-utility-red-200: var(--color-red-200);
+    --color-utility-red-300: var(--color-red-300);
+    --color-utility-red-400: var(--color-red-400);
+    --color-utility-red-500: var(--color-red-500);
+    --color-utility-red-600: var(--color-red-600);
+    --color-utility-red-700: var(--color-red-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);
+
+    --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-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-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-sky-50: var(--color-sky-50);
+    --color-utility-sky-100: var(--color-sky-100);
+    --color-utility-sky-200: var(--color-sky-200);
+    --color-utility-sky-300: var(--color-sky-300);
+    --color-utility-sky-400: var(--color-sky-400);
+    --color-utility-sky-500: var(--color-sky-500);
+    --color-utility-sky-600: var(--color-sky-600);
+    --color-utility-sky-700: var(--color-sky-700);
+
+    --color-utility-slate-50: var(--color-slate-50);
+    --color-utility-slate-100: var(--color-slate-100);
+    --color-utility-slate-200: var(--color-slate-200);
+    --color-utility-slate-300: var(--color-slate-300);
+    --color-utility-slate-400: var(--color-slate-400);
+    --color-utility-slate-500: var(--color-slate-500);
+    --color-utility-slate-600: var(--color-slate-600);
+    --color-utility-slate-700: var(--color-slate-700);
+
+    --color-utility-emerald-50: var(--color-emerald-50);
+    --color-utility-emerald-100: var(--color-emerald-100);
+    --color-utility-emerald-200: var(--color-emerald-200);
+    --color-utility-emerald-300: var(--color-emerald-300);
+    --color-utility-emerald-400: var(--color-emerald-400);
+    --color-utility-emerald-500: var(--color-emerald-500);
+    --color-utility-emerald-600: var(--color-emerald-600);
+    --color-utility-emerald-700: var(--color-emerald-700);
+
+    --color-utility-amber-50: var(--color-amber-50);
+    --color-utility-amber-100: var(--color-amber-100);
+    --color-utility-amber-200: var(--color-amber-200);
+    --color-utility-amber-300: var(--color-amber-300);
+    --color-utility-amber-400: var(--color-amber-400);
+    --color-utility-amber-500: var(--color-amber-500);
+    --color-utility-amber-600: var(--color-amber-600);
+    --color-utility-amber-700: var(--color-amber-700);
+
+    /* TEXT COLORS */
+    --color-text-primary: var(--color-neutral-900);
+    --color-text-tertiary: var(--color-neutral-600);
+    --color-text-error-primary: var(--color-red-600);
+    --color-text-warning-primary: var(--color-yellow-600);
+    --color-text-success-primary: var(--color-green-600);
+    --color-text-white: var(--color-white);
+    --color-text-secondary: var(--color-neutral-700);
+    --color-text-secondary_hover: var(--color-neutral-800);
+    --color-text-tertiary_hover: var(--color-neutral-700);
+    --color-text-brand-secondary: var(--color-brand-700);
+    --color-text-placeholder: var(--color-neutral-500);
+    --color-text-brand-tertiary: var(--color-brand-600);
+    --color-text-editor-icon-fg: var(--color-neutral-400);
+    --color-text-editor-icon-fg_active: var(--color-neutral-500);
+    --color-text-quaternary: var(--color-neutral-500);
+    --color-text-brand-primary: var(--color-brand-900);
+    --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-tertiary_alt: var(--color-brand-600);
+    --color-text-error-primary_hover: var(--color-red-700);
+    --color-text-brand-secondary_hover: var(--color-brand-800);
+
+    /* BORDER COLORS */
+    --color-border-primary: var(--color-neutral-300);
+    --color-border-secondary: var(--color-neutral-200);
+    --color-border-secondary_alt: rgb(0 0 0 / 0.1);
+    --color-border-tertiary: var(--color-neutral-100);
+    --color-border-error: var(--color-red-500);
+    --color-border-error_subtle: var(--color-red-300);
+    --color-border-brand: var(--color-brand-500);
+    --color-border-brand_alt: var(--color-brand-600);
+
+    /* FOREGROUND COLORS */
+    --color-fg-secondary: var(--color-neutral-700);
+    --color-fg-warning-primary: var(--color-yellow-600);
+    --color-fg-success-primary: var(--color-green-600);
+    --color-fg-white: var(--color-white);
+    --color-fg-success-secondary: var(--color-green-500);
+    --color-fg-secondary_hover: var(--color-neutral-800);
+    --color-fg-primary: var(--color-neutral-900);
+    --color-fg-brand-secondary: var(--color-brand-500);
+    --color-fg-brand-primary: var(--color-brand-600);
+    --color-fg-quaternary: var(--color-neutral-400);
+    --color-fg-quaternary_hover: var(--color-neutral-500);
+    --color-fg-error-primary: var(--color-red-600);
+    --color-fg-warning-secondary: var(--color-yellow-500);
+    --color-fg-error-secondary: var(--color-red-500);
+    --color-fg-tertiary: var(--color-neutral-600);
+    --color-fg-tertiary_hover: var(--color-neutral-700);
+    --color-fg-brand-primary_alt: var(--color-fg-brand-primary);
+    --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-tertiary: var(--color-neutral-100);
+    --color-bg-brand-primary: var(--color-brand-50);
+    --color-bg-error-secondary: var(--color-red-100);
+    --color-bg-warning-primary: var(--color-yellow-50);
+    --color-bg-warning-secondary: var(--color-yellow-100);
+    --color-bg-success-primary: var(--color-green-50);
+    --color-bg-success-secondary: var(--color-green-100);
+    --color-bg-brand-solid: var(--color-brand-600);
+    --color-bg-secondary-solid: var(--color-neutral-600);
+    --color-bg-error-solid: var(--color-red-600);
+    --color-bg-warning-solid: var(--color-yellow-600);
+    --color-bg-success-solid: var(--color-green-600);
+    --color-bg-secondary_hover: var(--color-neutral-100);
+    --color-bg-primary_hover: var(--color-neutral-50);
+    --color-bg-active: var(--color-neutral-50);
+    --color-bg-brand-solid_hover: var(--color-brand-700);
+    --color-bg-error-primary: var(--color-red-50);
+    --color-bg-brand-secondary: var(--color-brand-100);
+    --color-bg-secondary: var(--color-neutral-50);
+    --color-bg-quaternary: var(--color-neutral-200);
+    --color-bg-primary_alt: var(--color-white);
+    --color-bg-brand-primary_alt: var(--color-brand-50);
+    --color-bg-secondary_alt: var(--color-neutral-50);
+    --color-bg-overlay: var(--color-neutral-950);
+    --color-bg-brand-section: var(--color-brand-800);
+    --color-bg-brand-section_subtle: var(--color-brand-700);
+    --color-bg-primary-solid: var(--color-neutral-950);
+    --color-bg-error-solid_hover: var(--color-red-700);
+
+    /* COMPONENT COLORS */
+    --color-app-store-badge-border: 166 166 166 1;
+    --color-avatar-styles-bg-neutral: 224 224 224 1;
+    --color-featured-icon-light-fg-brand: var(--color-brand-600);
+    --color-featured-icon-light-fg-error: var(--color-red-600);
+    --color-featured-icon-light-fg-gray: var(--color-neutral-500);
+    --color-featured-icon-light-fg-success: var(--color-green-600);
+    --color-featured-icon-light-fg-warning: var(--color-yellow-600);
+    --color-focus-ring-error: var(--color-red-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-neutral-900);
+
+    --color-slider-handle-bg: var(--color-white);
+    --color-slider-handle-border: var(--color-brand-600);
+    --color-toggle-border: var(--color-neutral-300);
+    --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-neutral-300);
+
+    /* BACKGROUND PROPERTY COLORS */
+    --background-color-primary: var(--color-bg-primary);
+    --background-color-tertiary: var(--color-bg-tertiary);
+    --background-color-brand-primary: var(--color-bg-brand-primary);
+    --background-color-error-secondary: var(--color-bg-error-secondary);
+    --background-color-warning-primary: var(--color-bg-warning-primary);
+    --background-color-warning-secondary: var(--color-bg-warning-secondary);
+    --background-color-success-primary: var(--color-bg-success-primary);
+    --background-color-success-secondary: var(--color-bg-success-secondary);
+    --background-color-brand-solid: var(--color-bg-brand-solid);
+    --background-color-secondary-solid: var(--color-bg-secondary-solid);
+    --background-color-error-solid: var(--color-bg-error-solid);
+    --background-color-warning-solid: var(--color-bg-warning-solid);
+    --background-color-success-solid: var(--color-bg-success-solid);
+    --background-color-secondary_hover: var(--color-bg-secondary_hover);
+    --background-color-primary_hover: var(--color-bg-primary_hover);
+    --background-color-active: var(--color-bg-active);
+    --background-color-brand-solid_hover: var(--color-bg-brand-solid_hover);
+    --background-color-error-primary: var(--color-bg-error-primary);
+    --background-color-brand-secondary: var(--color-bg-brand-secondary);
+    --background-color-secondary: var(--color-bg-secondary);
+    --background-color-quaternary: var(--color-bg-quaternary);
+    --background-color-primary_alt: var(--color-bg-primary_alt);
+    --background-color-brand-primary_alt: var(--color-bg-brand-primary_alt);
+    --background-color-secondary_alt: var(--color-bg-secondary_alt);
+    --background-color-overlay: var(--color-bg-overlay);
+    --background-color-brand-section: var(--color-bg-brand-section);
+    --background-color-brand-section_subtle: var(--color-bg-brand-section_subtle);
+    --background-color-primary-solid: var(--color-bg-primary-solid);
+    --background-color-error-solid_hover: var(--color-bg-error-solid_hover);
+    --background-color-border-brand: var(--color-border-brand);
+    --background-color-border-brand_alt: var(--color-border-brand_alt);
+
+    /* TEXT PROPERTY COLORS */
+    --color-text-white: var(--color-white);
+    --text-color-primary: var(--color-text-primary);
+    --text-color-secondary: var(--color-text-secondary);
+    --text-color-secondary_hover: var(--color-text-secondary_hover);
+    --text-color-tertiary: var(--color-text-tertiary);
+    --text-color-tertiary_hover: var(--color-text-tertiary_hover);
+    --text-color-error-primary: var(--color-text-error-primary);
+    --text-color-warning-primary: var(--color-text-warning-primary);
+    --text-color-success-primary: var(--color-text-success-primary);
+    --text-color-brand-secondary: var(--color-text-brand-secondary);
+    --text-color-placeholder: var(--color-text-placeholder);
+    --text-color-brand-tertiary: var(--color-text-brand-tertiary);
+    --text-color-editor-icon-fg: var(--color-text-editor-icon-fg);
+    --text-color-editor-icon-fg_active: var(--color-text-editor-icon-fg_active);
+    --text-color-quaternary: var(--color-text-quaternary);
+    --text-color-brand-primary: var(--color-text-brand-primary);
+    --text-color-primary_on-brand: var(--color-text-primary_on-brand);
+    --text-color-secondary_on-brand: var(--color-text-secondary_on-brand);
+    --text-color-tertiary_on-brand: var(--color-text-tertiary_on-brand);
+    --text-color-quaternary_on-brand: var(--color-text-quaternary_on-brand);
+    --text-color-brand-tertiary_alt: var(--color-text-brand-tertiary_alt);
+    --text-color-error-primary_hover: var(--color-text-error-primary_hover);
+    --text-color-brand-secondary_hover: var(--color-text-brand-secondary_hover);
+    --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-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-brand: var(--color-border-brand);
+    --ring-color-brand_alt: var(--color-border-brand_alt);
+    --ring-color-brand-solid: var(--color-bg-brand-solid);
+    --ring-color-brand-solid_hover: var(--color-bg-brand-solid_hover);
+
+    /* 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-brand: var(--color-border-brand);
+    --outline-color-brand_alt: var(--color-border-brand_alt);
+    --outline-color-brand-solid: var(--color-bg-brand-solid);
+    --outline-color-brand-solid_hover: var(--color-bg-brand-solid_hover);
+}
+
+@layer base {
+    /* DARK MODE VARIABLES */
+
+    .dark-mode {
+        --color-alpha-white: rgb(12 14 18);
+        --color-alpha-black: rgb(255 255 255);
+
+        /* UTILITY COLORS */
+
+        --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-neutral-50);
+        --color-utility-brand-100: var(--color-brand-900);
+        --color-utility-brand-100_alt: var(--color-utility-neutral-100);
+        --color-utility-brand-200: var(--color-brand-800);
+        --color-utility-brand-200_alt: var(--color-utility-neutral-200);
+        --color-utility-brand-300: var(--color-brand-700);
+        --color-utility-brand-300_alt: var(--color-utility-neutral-300);
+        --color-utility-brand-400: var(--color-brand-600);
+        --color-utility-brand-400_alt: var(--color-utility-neutral-400);
+        --color-utility-brand-500: var(--color-brand-500);
+        --color-utility-brand-500_alt: var(--color-utility-neutral-500);
+        --color-utility-brand-600: var(--color-brand-400);
+        --color-utility-brand-600_alt: var(--color-utility-neutral-600);
+        --color-utility-brand-700: var(--color-brand-300);
+        --color-utility-brand-700_alt: var(--color-utility-neutral-700);
+        --color-utility-brand-800: var(--color-brand-200);
+        --color-utility-brand-800_alt: var(--color-utility-neutral-800);
+        --color-utility-brand-900: var(--color-brand-100);
+        --color-utility-brand-900_alt: var(--color-utility-neutral-900);
+
+        --color-utility-neutral-50: var(--color-neutral-900);
+        --color-utility-neutral-100: var(--color-neutral-800);
+        --color-utility-neutral-200: var(--color-neutral-700);
+        --color-utility-neutral-300: var(--color-neutral-700);
+        --color-utility-neutral-400: var(--color-neutral-600);
+        --color-utility-neutral-500: var(--color-neutral-500);
+        --color-utility-neutral-600: var(--color-neutral-400);
+        --color-utility-neutral-700: var(--color-neutral-300);
+        --color-utility-neutral-800: var(--color-neutral-200);
+        --color-utility-neutral-900: var(--color-neutral-100);
+
+        --color-utility-red-50: var(--color-red-950);
+        --color-utility-red-100: var(--color-red-900);
+        --color-utility-red-200: var(--color-red-800);
+        --color-utility-red-300: var(--color-red-700);
+        --color-utility-red-400: var(--color-red-600);
+        --color-utility-red-500: var(--color-red-500);
+        --color-utility-red-600: var(--color-red-400);
+        --color-utility-red-700: var(--color-red-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);
+
+        --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-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-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-sky-50: var(--color-sky-950);
+        --color-utility-sky-100: var(--color-sky-900);
+        --color-utility-sky-200: var(--color-sky-800);
+        --color-utility-sky-300: var(--color-sky-700);
+        --color-utility-sky-400: var(--color-sky-600);
+        --color-utility-sky-500: var(--color-sky-500);
+        --color-utility-sky-600: var(--color-sky-400);
+        --color-utility-sky-700: var(--color-sky-300);
+
+        --color-utility-slate-50: var(--color-slate-950);
+        --color-utility-slate-100: var(--color-slate-900);
+        --color-utility-slate-200: var(--color-slate-800);
+        --color-utility-slate-300: var(--color-slate-700);
+        --color-utility-slate-400: var(--color-slate-600);
+        --color-utility-slate-500: var(--color-slate-500);
+        --color-utility-slate-600: var(--color-slate-400);
+        --color-utility-slate-700: var(--color-slate-300);
+
+        --color-utility-emerald-50: var(--color-emerald-950);
+        --color-utility-emerald-100: var(--color-emerald-900);
+        --color-utility-emerald-200: var(--color-emerald-800);
+        --color-utility-emerald-300: var(--color-emerald-700);
+        --color-utility-emerald-400: var(--color-emerald-600);
+        --color-utility-emerald-500: var(--color-emerald-500);
+        --color-utility-emerald-600: var(--color-emerald-400);
+        --color-utility-emerald-700: var(--color-emerald-300);
+
+        --color-utility-amber-50: var(--color-amber-950);
+        --color-utility-amber-100: var(--color-amber-900);
+        --color-utility-amber-200: var(--color-amber-800);
+        --color-utility-amber-300: var(--color-amber-700);
+        --color-utility-amber-400: var(--color-amber-600);
+        --color-utility-amber-500: var(--color-amber-500);
+        --color-utility-amber-600: var(--color-amber-400);
+        --color-utility-amber-700: var(--color-amber-300);
+
+        --color-text-primary: var(--color-neutral-50);
+        --color-text-tertiary: var(--color-neutral-400);
+        --color-text-error-primary: var(--color-red-400);
+        --color-text-warning-primary: var(--color-yellow-400);
+        --color-text-success-primary: var(--color-green-400);
+        --color-text-white: var(--color-white);
+        --color-text-secondary: var(--color-neutral-300);
+        --color-text-secondary_hover: var(--color-neutral-200);
+        --color-text-tertiary_hover: var(--color-neutral-300);
+        --color-text-brand-secondary: var(--color-neutral-300);
+        --color-text-placeholder: var(--color-neutral-500);
+        --color-text-brand-tertiary: var(--color-neutral-400);
+        --color-text-editor-icon-fg: var(--color-neutral-400);
+        --color-text-editor-icon-fg_active: var(--color-white);
+        --color-text-quaternary: var(--color-neutral-400);
+        --color-text-brand-primary: var(--color-neutral-50);
+        --color-text-primary_on-brand: var(--color-neutral-50);
+        --color-text-secondary_on-brand: var(--color-neutral-300);
+        --color-text-tertiary_on-brand: var(--color-neutral-400);
+        --color-text-quaternary_on-brand: var(--color-neutral-400);
+        --color-text-brand-tertiary_alt: var(--color-neutral-50);
+        --color-text-error-primary_hover: var(--color-red-300);
+        --color-text-brand-secondary_hover: var(--color-neutral-200);
+
+        --color-border-secondary: var(--color-neutral-800);
+        --color-border-error_subtle: var(--color-red-500);
+        --color-border-primary: var(--color-neutral-700);
+        --color-border-brand: var(--color-brand-400);
+        --color-border-error: var(--color-red-400);
+        --color-border-tertiary: var(--color-neutral-800);
+        --color-border-brand_alt: var(--color-neutral-700);
+        --color-border-secondary_alt: var(--color-neutral-800);
+
+        --color-fg-secondary: var(--color-neutral-300);
+        --color-fg-warning-primary: var(--color-yellow-500);
+        --color-fg-success-primary: var(--color-green-500);
+        --color-fg-white: var(--color-white);
+        --color-fg-success-secondary: var(--color-green-400);
+        --color-fg-secondary_hover: var(--color-neutral-200);
+        --color-fg-primary: var(--color-white);
+        --color-fg-brand-secondary: var(--color-brand-500);
+        --color-fg-brand-primary: var(--color-brand-500);
+        --color-fg-quaternary: var(--color-neutral-600);
+        --color-fg-quaternary_hover: var(--color-neutral-500);
+        --color-fg-error-primary: var(--color-red-500);
+        --color-fg-warning-secondary: var(--color-yellow-400);
+        --color-fg-error-secondary: var(--color-red-400);
+        --color-fg-tertiary: var(--color-neutral-400);
+        --color-fg-tertiary_hover: var(--color-neutral-300);
+        --color-fg-brand-primary_alt: var(--color-neutral-300);
+        --color-fg-brand-secondary_alt: var(--color-neutral-600);
+        --color-fg-brand-secondary_hover: var(--color-neutral-500);
+
+        --color-bg-primary: var(--color-neutral-950);
+        --color-bg-tertiary: var(--color-neutral-800);
+        --color-bg-brand-primary: var(--color-brand-500);
+        --color-bg-error-secondary: var(--color-red-600);
+        --color-bg-warning-primary: var(--color-yellow-950);
+        --color-bg-warning-secondary: var(--color-yellow-600);
+        --color-bg-success-primary: var(--color-green-950);
+        --color-bg-success-secondary: var(--color-green-600);
+        --color-bg-brand-solid: var(--color-brand-600);
+        --color-bg-secondary-solid: var(--color-neutral-600);
+        --color-bg-error-solid: var(--color-red-600);
+        --color-bg-warning-solid: var(--color-yellow-600);
+        --color-bg-success-solid: var(--color-green-600);
+        --color-bg-secondary_hover: var(--color-neutral-800);
+        --color-bg-primary_hover: var(--color-neutral-900);
+        --color-bg-active: var(--color-neutral-800);
+        --color-bg-brand-solid_hover: var(--color-brand-500);
+        --color-bg-error-primary: var(--color-red-950);
+        --color-bg-brand-secondary: var(--color-brand-600);
+        --color-bg-secondary: var(--color-neutral-900);
+        --color-bg-quaternary: var(--color-neutral-700);
+        --color-bg-primary_alt: var(--color-bg-secondary);
+        --color-bg-brand-primary_alt: var(--color-bg-secondary);
+        --color-bg-secondary_alt: var(--color-bg-primary);
+        --color-bg-overlay: var(--color-neutral-800);
+        --color-bg-brand-section: var(--color-bg-secondary);
+        --color-bg-brand-section_subtle: var(--color-bg-primary);
+        --color-bg-primary-solid: var(--color-bg-secondary);
+        --color-bg-error-solid_hover: var(--color-red-500);
+
+        --color-app-store-badg-border: var(--color-white);
+        --color-avatar-styles-bg-neutral: 224 224 224 1;
+        --color-featured-icon-light-fg-brand: var(--color-brand-200);
+        --color-featured-icon-light-fg-error: var(--color-red-200);
+        --color-featured-icon-light-fg-gray: var(--color-neutral-200);
+        --color-featured-icon-light-fg-success: var(--color-green-200);
+        --color-featured-icon-light-fg-warning: var(--color-yellow-200);
+        --color-focus-ring-error: var(--color-red-500);
+        --color-focus-ring: var(--color-brand-500);
+        --color-footer-button-fg: var(--color-neutral-300);
+        --color-footer-button-fg_hover: var(--color-neutral-100);
+        --color-icon-fg-brand: var(--color-neutral-400);
+        --color-icon-fg-brand_on-brand: var(--color-neutral-400);
+        --color-screen-mockup-border: var(--color-neutral-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-slim-border_pressed-hover: var(--color-transparent);
+        --color-toggle-slim-border_pressed: var(--color-transparent);
+        --color-tooltip-supporting-text: var(--color-neutral-300);
+
+        /* BACKGROUND PROPERTY COLORS */
+        --background-color-primary: var(--color-bg-primary);
+        --background-color-tertiary: var(--color-bg-tertiary);
+        --background-color-brand-primary: var(--color-bg-brand-primary);
+        --background-color-error-secondary: var(--color-bg-error-secondary);
+        --background-color-warning-primary: var(--color-bg-warning-primary);
+        --background-color-warning-secondary: var(--color-bg-warning-secondary);
+        --background-color-success-primary: var(--color-bg-success-primary);
+        --background-color-success-secondary: var(--color-bg-success-secondary);
+        --background-color-brand-solid: var(--color-bg-brand-solid);
+        --background-color-secondary-solid: var(--color-bg-secondary-solid);
+        --background-color-error-solid: var(--color-bg-error-solid);
+        --background-color-warning-solid: var(--color-bg-warning-solid);
+        --background-color-success-solid: var(--color-bg-success-solid);
+        --background-color-secondary_hover: var(--color-bg-secondary_hover);
+        --background-color-primary_hover: var(--color-bg-primary_hover);
+        --background-color-active: var(--color-bg-active);
+        --background-color-brand-solid_hover: var(--color-bg-brand-solid_hover);
+        --background-color-error-primary: var(--color-bg-error-primary);
+        --background-color-brand-secondary: var(--color-bg-brand-secondary);
+        --background-color-secondary: var(--color-bg-secondary);
+        --background-color-quaternary: var(--color-bg-quaternary);
+        --background-color-primary_alt: var(--color-bg-primary_alt);
+        --background-color-brand-primary_alt: var(--color-bg-brand-primary_alt);
+        --background-color-secondary_alt: var(--color-bg-secondary_alt);
+        --background-color-overlay: var(--color-bg-overlay);
+        --background-color-brand-section: var(--color-bg-brand-section);
+        --background-color-brand-section_subtle: var(--color-bg-brand-section_subtle);
+        --background-color-primary-solid: var(--color-bg-primary-solid);
+        --background-color-error-solid_hover: var(--color-bg-error-solid_hover);
+
+        --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-tertiary: var(--color-text-tertiary);
+        --text-color-error-primary: var(--color-text-error-primary);
+        --text-color-warning-primary: var(--color-text-warning-primary);
+        --text-color-success-primary: var(--color-text-success-primary);
+        --text-color-white: var(--color-text-white);
+        --text-color-secondary: var(--color-text-secondary);
+        --text-color-secondary_hover: var(--color-text-secondary_hover);
+        --text-color-tertiary_hover: var(--color-text-tertiary_hover);
+        --text-color-brand-secondary: var(--color-text-brand-secondary);
+        --text-color-placeholder: var(--color-text-placeholder);
+        --text-color-brand-tertiary: var(--color-text-brand-tertiary);
+        --text-color-editor-icon-fg: var(--color-text-editor-icon-fg);
+        --text-color-editor-icon-fg_active: var(--color-text-editor-icon-fg_active);
+        --text-color-quaternary: var(--color-text-quaternary);
+        --text-color-brand-primary: var(--color-text-brand-primary);
+        --text-color-primary_on-brand: var(--color-text-primary_on-brand);
+        --text-color-secondary_on-brand: var(--color-text-secondary_on-brand);
+        --text-color-tertiary_on-brand: var(--color-text-tertiary_on-brand);
+        --text-color-quaternary_on-brand: var(--color-text-quaternary_on-brand);
+        --text-color-brand-tertiary_alt: var(--color-text-brand-tertiary_alt);
+        --text-color-error-primary_hover: var(--color-text-error-primary_hover);
+        --text-color-brand-secondary_hover: var(--color-text-brand-secondary_hover);
+        --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-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-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);
+
+        /* 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-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);
+    }
+}
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/countries.tsx b/src/utils/countries.tsx
new file mode 100644
index 0000000..3784270
--- /dev/null
+++ b/src/utils/countries.tsx
@@ -0,0 +1,1349 @@
+import type { HTMLAttributes } from "react";
+import type { SelectItemType } from "@/components/base/select/select";
+
+/**
+ * List of countries with their respective country code, flag, phone code, and phone mask.
+ */
+export const countries = [
+    {
+        name: "Afghanistan",
+        code: "AF",
+        flag: "https://www.untitledui.com/images/flags/AF.svg",
+        phoneCode: "93",
+        phoneMask: "+93-##-###-####",
+    },
+    {
+        name: "Albania",
+        code: "AL",
+        flag: "https://www.untitledui.com/images/flags/AL.svg",
+        phoneCode: "355",
+        phoneMask: "+355 (###) ###-###",
+    },
+    {
+        name: "Algeria",
+        code: "DZ",
+        flag: "https://www.untitledui.com/images/flags/DZ.svg",
+        phoneCode: "213",
+        phoneMask: "+213-##-###-####",
+    },
+    {
+        name: "Andorra",
+        code: "AD",
+        flag: "https://www.untitledui.com/images/flags/AD.svg",
+        phoneCode: "376",
+        phoneMask: "+376-###-###",
+    },
+    {
+        name: "Angola",
+        code: "AO",
+        flag: "https://www.untitledui.com/images/flags/AO.svg",
+        phoneCode: "244",
+        phoneMask: "+244 (###) ###-###",
+    },
+    {
+        name: "Antigua and Barbuda",
+        code: "AG",
+        flag: "https://www.untitledui.com/images/flags/AG.svg",
+        phoneCode: "+1-268",
+        phoneMask: "+1 (268) ###-####",
+    },
+    {
+        name: "Argentina",
+        code: "AR",
+        flag: "https://www.untitledui.com/images/flags/AR.svg",
+        phoneCode: "54",
+        phoneMask: "+54 (###) ###-####",
+    },
+    {
+        name: "Armenia",
+        code: "AM",
+        flag: "https://www.untitledui.com/images/flags/AM.svg",
+        phoneCode: "374",
+        phoneMask: "+374-##-###-###",
+    },
+    {
+        name: "Australia",
+        code: "AU",
+        flag: "https://www.untitledui.com/images/flags/AU.svg",
+        phoneCode: "61",
+        phoneMask: "+61-#-####-####",
+    },
+    {
+        name: "Austria",
+        code: "AT",
+        flag: "https://www.untitledui.com/images/flags/AT.svg",
+        phoneCode: "43",
+        phoneMask: "+43 (###) ###-####",
+    },
+    {
+        name: "Azerbaijan",
+        code: "AZ",
+        flag: "https://www.untitledui.com/images/flags/AZ.svg",
+        phoneCode: "994",
+        phoneMask: "+994-##-###-##-##",
+    },
+    {
+        name: "Bahamas",
+        code: "BS",
+        flag: "https://www.untitledui.com/images/flags/BS.svg",
+        phoneCode: "+1-242",
+        phoneMask: "+1 (242) ###-####",
+    },
+    {
+        name: "Bahrain",
+        code: "BH",
+        flag: "https://www.untitledui.com/images/flags/BH.svg",
+        phoneCode: "973",
+        phoneMask: "+973-####-####",
+    },
+    {
+        name: "Bangladesh",
+        code: "BD",
+        flag: "https://www.untitledui.com/images/flags/BD.svg",
+        phoneCode: "880",
+        phoneMask: "+880-##-###-###",
+    },
+    {
+        name: "Barbados",
+        code: "BB",
+        flag: "https://www.untitledui.com/images/flags/BB.svg",
+        phoneCode: "+1-246",
+        phoneMask: "+1 (246) ###-####",
+    },
+    {
+        name: "Belarus",
+        code: "BY",
+        flag: "https://www.untitledui.com/images/flags/BY.svg",
+        phoneCode: "375",
+        phoneMask: "+375 (##) ###-##-##",
+    },
+    {
+        name: "Belgium",
+        code: "BE",
+        flag: "https://www.untitledui.com/images/flags/BE.svg",
+        phoneCode: "32",
+        phoneMask: "+32 (###) ###-###",
+    },
+    {
+        name: "Belize",
+        code: "BZ",
+        flag: "https://www.untitledui.com/images/flags/BZ.svg",
+        phoneCode: "501",
+        phoneMask: "+501-###-####",
+    },
+    {
+        name: "Benin",
+        code: "BJ",
+        flag: "https://www.untitledui.com/images/flags/BJ.svg",
+        phoneCode: "229",
+        phoneMask: "+229-##-##-####",
+    },
+    {
+        name: "Bhutan",
+        code: "BT",
+        flag: "https://www.untitledui.com/images/flags/BT.svg",
+        phoneCode: "975",
+        phoneMask: "+975-#-###-###",
+    },
+    {
+        name: "Bolivia",
+        code: "BO",
+        flag: "https://www.untitledui.com/images/flags/BO.svg",
+        phoneCode: "591",
+        phoneMask: "+591-#-###-####",
+    },
+    {
+        name: "Bosnia and Herzegovina",
+        code: "BA",
+        flag: "https://www.untitledui.com/images/flags/BA.svg",
+        phoneCode: "387",
+        phoneMask: "+387-##-####",
+    },
+    {
+        name: "Botswana",
+        code: "BW",
+        flag: "https://www.untitledui.com/images/flags/BW.svg",
+        phoneCode: "267",
+        phoneMask: "+267-##-###-###",
+    },
+    {
+        name: "Brazil",
+        code: "BR",
+        flag: "https://www.untitledui.com/images/flags/BR.svg",
+        phoneCode: "55",
+        phoneMask: "+55 (##) 9####-####",
+    },
+    {
+        name: "Brunei",
+        code: "BN",
+        flag: "https://www.untitledui.com/images/flags/BN.svg",
+        phoneCode: "673",
+        phoneMask: "+673-###-####",
+    },
+    {
+        name: "Bulgaria",
+        code: "BG",
+        flag: "https://www.untitledui.com/images/flags/BG.svg",
+        phoneCode: "359",
+        phoneMask: "+359 (###) ###-###",
+    },
+    {
+        name: "Burkina Faso",
+        code: "BF",
+        flag: "https://www.untitledui.com/images/flags/BF.svg",
+        phoneCode: "226",
+        phoneMask: "+226-##-##-####",
+    },
+    {
+        name: "Burundi",
+        code: "BI",
+        flag: "https://www.untitledui.com/images/flags/BI.svg",
+        phoneCode: "257",
+        phoneMask: "+257-##-##-####",
+    },
+    {
+        name: "Cambodia",
+        code: "KH",
+        flag: "https://www.untitledui.com/images/flags/KH.svg",
+        phoneCode: "855",
+        phoneMask: "+855-##-###-###",
+    },
+    {
+        name: "Cameroon",
+        code: "CM",
+        flag: "https://www.untitledui.com/images/flags/CM.svg",
+        phoneCode: "237",
+        phoneMask: "+237-####-####",
+    },
+    {
+        name: "Canada",
+        code: "CA",
+        flag: "https://www.untitledui.com/images/flags/CA.svg",
+        phoneCode: "1",
+        phoneMask: "+1 (###) ###-####",
+    },
+    {
+        name: "Central African Republic",
+        code: "CF",
+        flag: "https://www.untitledui.com/images/flags/CF.svg",
+        phoneCode: "236",
+        phoneMask: "+236-##-##-####",
+    },
+    {
+        name: "Chad",
+        code: "TD",
+        flag: "https://www.untitledui.com/images/flags/TD.svg",
+        phoneCode: "235",
+        phoneMask: "+235-##-##-##-##",
+    },
+    {
+        name: "Chile",
+        code: "CL",
+        flag: "https://www.untitledui.com/images/flags/CL.svg",
+        phoneCode: "56",
+        phoneMask: "+56-#-####-####",
+    },
+    {
+        name: "China",
+        code: "CN",
+        flag: "https://www.untitledui.com/images/flags/CN.svg",
+        phoneCode: "86",
+        phoneMask: "+86-##-#####-#####",
+    },
+    {
+        name: "Colombia",
+        code: "CO",
+        flag: "https://www.untitledui.com/images/flags/CO.svg",
+        phoneCode: "57",
+        phoneMask: "+57 (###) ###-####",
+    },
+    {
+        name: "Comoros",
+        code: "KM",
+        flag: "https://www.untitledui.com/images/flags/KM.svg",
+        phoneCode: "269",
+        phoneMask: "+269-##-#####",
+    },
+    {
+        name: "Costa Rica",
+        code: "CR",
+        flag: "https://www.untitledui.com/images/flags/CR.svg",
+        phoneCode: "506",
+        phoneMask: "+506-####-####",
+    },
+    {
+        name: "Croatia",
+        code: "HR",
+        flag: "https://www.untitledui.com/images/flags/HR.svg",
+        phoneCode: "385",
+        phoneMask: "+385-##-###-###",
+    },
+    {
+        name: "Cuba",
+        code: "CU",
+        flag: "https://www.untitledui.com/images/flags/CU.svg",
+        phoneCode: "53",
+        phoneMask: "+53-#-###-####",
+    },
+    {
+        name: "Cyprus",
+        code: "CY",
+        flag: "https://www.untitledui.com/images/flags/CY.svg",
+        phoneCode: "357",
+        phoneMask: "+357-##-###-###",
+    },
+    {
+        name: "Czech Republic",
+        code: "CZ",
+        flag: "https://www.untitledui.com/images/flags/CZ.svg",
+        phoneCode: "420",
+        phoneMask: "+420 (###) ###-###",
+    },
+    {
+        name: "Democratic Republic of the Congo",
+        code: "CD",
+        flag: "https://www.untitledui.com/images/flags/CD.svg",
+        phoneCode: "243",
+        phoneMask: "+243 (###) ###-###",
+    },
+    {
+        name: "Denmark",
+        code: "DK",
+        flag: "https://www.untitledui.com/images/flags/DK.svg",
+        phoneCode: "45",
+        phoneMask: "+45-##-##-##-##",
+    },
+    {
+        name: "Djibouti",
+        code: "DJ",
+        flag: "https://www.untitledui.com/images/flags/DJ.svg",
+        phoneCode: "253",
+        phoneMask: "+253-##-##-##-##",
+    },
+    {
+        name: "Dominica",
+        code: "DM",
+        flag: "https://www.untitledui.com/images/flags/DM.svg",
+        phoneCode: "+1-767",
+        phoneMask: "+1 (767) ###-####",
+    },
+    {
+        name: "Dominican Republic",
+        code: "DO",
+        flag: "https://www.untitledui.com/images/flags/DO.svg",
+        phoneCode: "+1-809 and 1-829",
+        phoneMask: "+1 (849) ###-####",
+    },
+    {
+        name: "East Timor",
+        code: "TL",
+        flag: "https://www.untitledui.com/images/flags/TL.svg",
+        phoneCode: "670",
+        phoneMask: "+670-78#-#####",
+    },
+    {
+        name: "Ecuador",
+        code: "EC",
+        flag: "https://www.untitledui.com/images/flags/EC.svg",
+        phoneCode: "593",
+        phoneMask: "+593-#-###-####",
+    },
+    {
+        name: "Egypt",
+        code: "EG",
+        flag: "https://www.untitledui.com/images/flags/EG.svg",
+        phoneCode: "20",
+        phoneMask: "+20 (###) ###-####",
+    },
+    {
+        name: "El Salvador",
+        code: "SV",
+        flag: "https://www.untitledui.com/images/flags/SV.svg",
+        phoneCode: "503",
+        phoneMask: "+503-##-##-####",
+    },
+    {
+        name: "Equatorial Guinea",
+        code: "GQ",
+        flag: "https://www.untitledui.com/images/flags/GQ.svg",
+        phoneCode: "240",
+        phoneMask: "+240-##-###-####",
+    },
+    {
+        name: "Eritrea",
+        code: "ER",
+        flag: "https://www.untitledui.com/images/flags/ER.svg",
+        phoneCode: "291",
+        phoneMask: "+291-#-###-###",
+    },
+    {
+        name: "Estonia",
+        code: "EE",
+        flag: "https://www.untitledui.com/images/flags/EE.svg",
+        phoneCode: "372",
+        phoneMask: "+372-###-####",
+    },
+    {
+        name: "Eswatini",
+        code: "SZ",
+        flag: "https://www.untitledui.com/images/flags/SZ.svg",
+        phoneCode: "268",
+        phoneMask: "+268-##-##-####",
+    },
+    {
+        name: "Ethiopia",
+        code: "ET",
+        flag: "https://www.untitledui.com/images/flags/ET.svg",
+        phoneCode: "251",
+        phoneMask: "+251-##-###-####",
+    },
+    {
+        name: "Fiji",
+        code: "FJ",
+        flag: "https://www.untitledui.com/images/flags/FJ.svg",
+        phoneCode: "679",
+        phoneMask: "+679-##-#####",
+    },
+    {
+        name: "Finland",
+        code: "FI",
+        flag: "https://www.untitledui.com/images/flags/FI.svg",
+        phoneCode: "358",
+        phoneMask: "+358 (###) ###-##-##",
+    },
+    {
+        name: "France",
+        code: "FR",
+        flag: "https://www.untitledui.com/images/flags/FR.svg",
+        phoneCode: "33",
+        phoneMask: "+590 (###) ###-###",
+    },
+    {
+        name: "Gabon",
+        code: "GA",
+        flag: "https://www.untitledui.com/images/flags/GA.svg",
+        phoneCode: "241",
+        phoneMask: "+241-#-##-##-##",
+    },
+    {
+        name: "Gambia",
+        code: "GM",
+        flag: "https://www.untitledui.com/images/flags/GM.svg",
+        phoneCode: "220",
+        phoneMask: "+220 (###) ##-##",
+    },
+    {
+        name: "Georgia",
+        code: "GE",
+        flag: "https://www.untitledui.com/images/flags/GE.svg",
+        phoneCode: "995",
+        phoneMask: "+995 (###) ###-###",
+    },
+    {
+        name: "Germany",
+        code: "DE",
+        flag: "https://www.untitledui.com/images/flags/DE.svg",
+        phoneCode: "49",
+        phoneMask: "+49-###-###",
+    },
+    {
+        name: "Ghana",
+        code: "GH",
+        flag: "https://www.untitledui.com/images/flags/GH.svg",
+        phoneCode: "233",
+        phoneMask: "+233 (###) ###-###",
+    },
+    {
+        name: "Greece",
+        code: "GR",
+        flag: "https://www.untitledui.com/images/flags/GR.svg",
+        phoneCode: "30",
+        phoneMask: "+30 (###) ###-####",
+    },
+    {
+        name: "Grenada",
+        code: "GD",
+        flag: "https://www.untitledui.com/images/flags/GD.svg",
+        phoneCode: "+1-473",
+        phoneMask: "+1 (473) ###-####",
+    },
+    {
+        name: "Guatemala",
+        code: "GT",
+        flag: "https://www.untitledui.com/images/flags/GT.svg",
+        phoneCode: "502",
+        phoneMask: "+502-#-###-####",
+    },
+    {
+        name: "Guinea",
+        code: "GN",
+        flag: "https://www.untitledui.com/images/flags/GN.svg",
+        phoneCode: "224",
+        phoneMask: "+224-##-###-###",
+    },
+    {
+        name: "Guinea-Bissau",
+        code: "GW",
+        flag: "https://www.untitledui.com/images/flags/GW.svg",
+        phoneCode: "245",
+        phoneMask: "+245-#-######",
+    },
+    {
+        name: "Guyana",
+        code: "GY",
+        flag: "https://www.untitledui.com/images/flags/GY.svg",
+        phoneCode: "592",
+        phoneMask: "+592-###-####",
+    },
+    {
+        name: "Haiti",
+        code: "HT",
+        flag: "https://www.untitledui.com/images/flags/HT.svg",
+        phoneCode: "509",
+        phoneMask: "+509-##-##-####",
+    },
+    {
+        name: "Honduras",
+        code: "HN",
+        flag: "https://www.untitledui.com/images/flags/HN.svg",
+        phoneCode: "504",
+        phoneMask: "+504-####-####",
+    },
+    {
+        name: "Hungary",
+        code: "HU",
+        flag: "https://www.untitledui.com/images/flags/HU.svg",
+        phoneCode: "36",
+        phoneMask: "+36 (###) ###-###",
+    },
+    {
+        name: "Iceland",
+        code: "IS",
+        flag: "https://www.untitledui.com/images/flags/IS.svg",
+        phoneCode: "354",
+        phoneMask: "+354-###-####",
+    },
+    {
+        name: "India",
+        code: "IN",
+        flag: "https://www.untitledui.com/images/flags/IN.svg",
+        phoneCode: "91",
+        phoneMask: "+91 (####) ###-###",
+    },
+    {
+        name: "Indonesia",
+        code: "ID",
+        flag: "https://www.untitledui.com/images/flags/ID.svg",
+        phoneCode: "62",
+        phoneMask: "+62 (8##) ###-##-###",
+    },
+    {
+        name: "Iran",
+        code: "IR",
+        flag: "https://www.untitledui.com/images/flags/IR.svg",
+        phoneCode: "98",
+        phoneMask: "+98 (###) ###-####",
+    },
+    {
+        name: "Iraq",
+        code: "IQ",
+        flag: "https://www.untitledui.com/images/flags/IQ.svg",
+        phoneCode: "964",
+        phoneMask: "+964 (###) ###-####",
+    },
+    {
+        name: "Ireland",
+        code: "IE",
+        flag: "https://www.untitledui.com/images/flags/IE.svg",
+        phoneCode: "353",
+        phoneMask: "+353 (###) ###-###",
+    },
+    {
+        name: "Israel",
+        code: "IL",
+        flag: "https://www.untitledui.com/images/flags/IL.svg",
+        phoneCode: "972",
+        phoneMask: "+972-#-###-####",
+    },
+    {
+        name: "Italy",
+        code: "IT",
+        flag: "https://www.untitledui.com/images/flags/IT.svg",
+        phoneCode: "39",
+        phoneMask: "+39 (###) ####-###",
+    },
+    {
+        name: "Jamaica",
+        code: "JM",
+        flag: "https://www.untitledui.com/images/flags/JM.svg",
+        phoneCode: "+1-876",
+        phoneMask: "+1 (876) ###-####",
+    },
+    {
+        name: "Japan",
+        code: "JP",
+        flag: "https://www.untitledui.com/images/flags/JP.svg",
+        phoneCode: "81",
+        phoneMask: "+81 (###) ###-###",
+    },
+    {
+        name: "Jordan",
+        code: "JO",
+        flag: "https://www.untitledui.com/images/flags/JO.svg",
+        phoneCode: "962",
+        phoneMask: "+962-#-####-####",
+    },
+    {
+        name: "Kazakhstan",
+        code: "KZ",
+        flag: "https://www.untitledui.com/images/flags/KZ.svg",
+        phoneCode: "7",
+        phoneMask: "+7 (7##) ###-##-##",
+    },
+    {
+        name: "Kenya",
+        code: "KE",
+        flag: "https://www.untitledui.com/images/flags/KE.svg",
+        phoneCode: "254",
+        phoneMask: "+254-###-######",
+    },
+    {
+        name: "Kiribati",
+        code: "KI",
+        flag: "https://www.untitledui.com/images/flags/KI.svg",
+        phoneCode: "686",
+        phoneMask: "+686-##-###",
+    },
+    {
+        name: "Kuwait",
+        code: "KW",
+        flag: "https://www.untitledui.com/images/flags/KW.svg",
+        phoneCode: "965",
+        phoneMask: "+965-####-####",
+    },
+    {
+        name: "Kyrgyzstan",
+        code: "KG",
+        flag: "https://www.untitledui.com/images/flags/KG.svg",
+        phoneCode: "996",
+        phoneMask: "+996 (###) ###-###",
+    },
+    {
+        name: "Laos",
+        code: "LA",
+        flag: "https://www.untitledui.com/images/flags/LA.svg",
+        phoneCode: "856",
+        phoneMask: "+856-##-###-###",
+    },
+    {
+        name: "Latvia",
+        code: "LV",
+        flag: "https://www.untitledui.com/images/flags/LV.svg",
+        phoneCode: "371",
+        phoneMask: "+371-##-###-###",
+    },
+    {
+        name: "Lebanon",
+        code: "LB",
+        flag: "https://www.untitledui.com/images/flags/LB.svg",
+        phoneCode: "961",
+        phoneMask: "+961-#-###-###",
+    },
+    {
+        name: "Lesotho",
+        code: "LS",
+        flag: "https://www.untitledui.com/images/flags/LS.svg",
+        phoneCode: "266",
+        phoneMask: "+266-#-###-####",
+    },
+    {
+        name: "Liberia",
+        code: "LR",
+        flag: "https://www.untitledui.com/images/flags/LR.svg",
+        phoneCode: "231",
+        phoneMask: "+231-##-###-###",
+    },
+    {
+        name: "Libya",
+        code: "LY",
+        flag: "https://www.untitledui.com/images/flags/LY.svg",
+        phoneCode: "218",
+        phoneMask: "+218-21-###-####",
+    },
+    {
+        name: "Liechtenstein",
+        code: "LI",
+        flag: "https://www.untitledui.com/images/flags/LI.svg",
+        phoneCode: "423",
+        phoneMask: "+423 (###) ###-####",
+    },
+    {
+        name: "Lithuania",
+        code: "LT",
+        flag: "https://www.untitledui.com/images/flags/LT.svg",
+        phoneCode: "370",
+        phoneMask: "+370 (###) ##-###",
+    },
+    {
+        name: "Luxembourg",
+        code: "LU",
+        flag: "https://www.untitledui.com/images/flags/LU.svg",
+        phoneCode: "352",
+        phoneMask: "+352 (###) ###-###",
+    },
+    {
+        name: "Madagascar",
+        code: "MG",
+        flag: "https://www.untitledui.com/images/flags/MG.svg",
+        phoneCode: "261",
+        phoneMask: "+261-##-##-#####",
+    },
+    {
+        name: "Malawi",
+        code: "MW",
+        flag: "https://www.untitledui.com/images/flags/MW.svg",
+        phoneCode: "265",
+        phoneMask: "+265-#-####-####",
+    },
+    {
+        name: "Malaysia",
+        code: "MY",
+        flag: "https://www.untitledui.com/images/flags/MY.svg",
+        phoneCode: "60",
+        phoneMask: "+60-#-###-###",
+    },
+    {
+        name: "Maldives",
+        code: "MV",
+        flag: "https://www.untitledui.com/images/flags/MV.svg",
+        phoneCode: "960",
+        phoneMask: "+960-###-####",
+    },
+    {
+        name: "Mali",
+        code: "ML",
+        flag: "https://www.untitledui.com/images/flags/ML.svg",
+        phoneCode: "223",
+        phoneMask: "+223-##-##-####",
+    },
+    {
+        name: "Malta",
+        code: "MT",
+        flag: "https://www.untitledui.com/images/flags/MT.svg",
+        phoneCode: "356",
+        phoneMask: "+356-####-####",
+    },
+    {
+        name: "Marshall Islands",
+        code: "MH",
+        flag: "https://www.untitledui.com/images/flags/MH.svg",
+        phoneCode: "692",
+        phoneMask: "+692-###-####",
+    },
+    {
+        name: "Mauritania",
+        code: "MR",
+        flag: "https://www.untitledui.com/images/flags/MR.svg",
+        phoneCode: "222",
+        phoneMask: "+222-##-##-####",
+    },
+    {
+        name: "Mauritius",
+        code: "MU",
+        flag: "https://www.untitledui.com/images/flags/MU.svg",
+        phoneCode: "230",
+        phoneMask: "+230-###-####",
+    },
+    {
+        name: "Mexico",
+        code: "MX",
+        flag: "https://www.untitledui.com/images/flags/MX.svg",
+        phoneCode: "52",
+        phoneMask: "+52-##-##-####",
+    },
+    {
+        name: "Micronesia",
+        code: "FM",
+        flag: "https://www.untitledui.com/images/flags/FM.svg",
+        phoneCode: "691",
+        phoneMask: "+691-###-####",
+    },
+    {
+        name: "Moldova",
+        code: "MD",
+        flag: "https://www.untitledui.com/images/flags/MD.svg",
+        phoneCode: "373",
+        phoneMask: "+373-####-####",
+    },
+    {
+        name: "Monaco",
+        code: "MC",
+        flag: "https://www.untitledui.com/images/flags/MC.svg",
+        phoneCode: "377",
+        phoneMask: "+377-##-###-###",
+    },
+    {
+        name: "Mongolia",
+        code: "MN",
+        flag: "https://www.untitledui.com/images/flags/MN.svg",
+        phoneCode: "976",
+        phoneMask: "+976-##-##-####",
+    },
+    {
+        name: "Montenegro",
+        code: "ME",
+        flag: "https://www.untitledui.com/images/flags/ME.svg",
+        phoneCode: "382",
+        phoneMask: "+382-##-###-###",
+    },
+    {
+        name: "Morocco",
+        code: "MA",
+        flag: "https://www.untitledui.com/images/flags/MA.svg",
+        phoneCode: "212",
+        phoneMask: "+212-##-####-###",
+    },
+    {
+        name: "Mozambique",
+        code: "MZ",
+        flag: "https://www.untitledui.com/images/flags/MZ.svg",
+        phoneCode: "258",
+        phoneMask: "+258-##-###-###",
+    },
+    {
+        name: "Myanmar",
+        code: "MM",
+        flag: "https://www.untitledui.com/images/flags/MM.svg",
+        phoneCode: "95",
+        phoneMask: "+95-###-###",
+    },
+    {
+        name: "Namibia",
+        code: "NA",
+        flag: "https://www.untitledui.com/images/flags/NA.svg",
+        phoneCode: "264",
+        phoneMask: "+264-##-###-####",
+    },
+    {
+        name: "Nauru",
+        code: "NR",
+        flag: "https://www.untitledui.com/images/flags/NR.svg",
+        phoneCode: "674",
+        phoneMask: "+674-###-####",
+    },
+    {
+        name: "Nepal",
+        code: "NP",
+        flag: "https://www.untitledui.com/images/flags/NP.svg",
+        phoneCode: "977",
+        phoneMask: "+977-##-###-###",
+    },
+    {
+        name: "Netherlands",
+        code: "NL",
+        flag: "https://www.untitledui.com/images/flags/NL.svg",
+        phoneCode: "31",
+        phoneMask: "+31-##-###-####",
+    },
+    {
+        name: "New Zealand",
+        code: "NZ",
+        flag: "https://www.untitledui.com/images/flags/NZ.svg",
+        phoneCode: "64",
+        phoneMask: "+64 (###) ###-####",
+    },
+    {
+        name: "Nicaragua",
+        code: "NI",
+        flag: "https://www.untitledui.com/images/flags/NI.svg",
+        phoneCode: "505",
+        phoneMask: "+505-####-####",
+    },
+    {
+        name: "Niger",
+        code: "NE",
+        flag: "https://www.untitledui.com/images/flags/NE.svg",
+        phoneCode: "227",
+        phoneMask: "+227-##-##-####",
+    },
+    {
+        name: "Nigeria",
+        code: "NG",
+        flag: "https://www.untitledui.com/images/flags/NG.svg",
+        phoneCode: "234",
+        phoneMask: "+234 (###) ###-####",
+    },
+    {
+        name: "North Korea",
+        code: "KP",
+        flag: "https://www.untitledui.com/images/flags/KP.svg",
+        phoneCode: "850",
+        phoneMask: "+850-####-#############",
+    },
+    {
+        name: "North Macedonia",
+        code: "MK",
+        flag: "https://www.untitledui.com/images/flags/MK.svg",
+        phoneCode: "389",
+        phoneMask: "+389-##-###-###",
+    },
+    {
+        name: "Norway",
+        code: "NO",
+        flag: "https://www.untitledui.com/images/flags/NO.svg",
+        phoneCode: "47",
+        phoneMask: "+47 (###) ##-###",
+    },
+    {
+        name: "Oman",
+        code: "OM",
+        flag: "https://www.untitledui.com/images/flags/OM.svg",
+        phoneCode: "968",
+        phoneMask: "+968-##-###-###",
+    },
+    {
+        name: "Pakistan",
+        code: "PK",
+        flag: "https://www.untitledui.com/images/flags/PK.svg",
+        phoneCode: "92",
+        phoneMask: "+92 (###) ###-####",
+    },
+    {
+        name: "Palau",
+        code: "PW",
+        flag: "https://www.untitledui.com/images/flags/PW.svg",
+        phoneCode: "680",
+        phoneMask: "+680-###-####",
+    },
+    {
+        name: "Panama",
+        code: "PA",
+        flag: "https://www.untitledui.com/images/flags/PA.svg",
+        phoneCode: "507",
+        phoneMask: "+507-###-####",
+    },
+    {
+        name: "Papua New Guinea",
+        code: "PG",
+        flag: "https://www.untitledui.com/images/flags/PG.svg",
+        phoneCode: "675",
+        phoneMask: "+675 (###) ##-###",
+    },
+    {
+        name: "Paraguay",
+        code: "PY",
+        flag: "https://www.untitledui.com/images/flags/PY.svg",
+        phoneCode: "595",
+        phoneMask: "+595 (###) ###-###",
+    },
+    {
+        name: "Peru",
+        code: "PE",
+        flag: "https://www.untitledui.com/images/flags/PE.svg",
+        phoneCode: "51",
+        phoneMask: "+51 (###) ###-###",
+    },
+    {
+        name: "Philippines",
+        code: "PH",
+        flag: "https://www.untitledui.com/images/flags/PH.svg",
+        phoneCode: "63",
+        phoneMask: "+63 (###) ###-####",
+    },
+    {
+        name: "Poland",
+        code: "PL",
+        flag: "https://www.untitledui.com/images/flags/PL.svg",
+        phoneCode: "48",
+        phoneMask: "+48 (###) ###-###",
+    },
+    {
+        name: "Portugal",
+        code: "PT",
+        flag: "https://www.untitledui.com/images/flags/PT.svg",
+        phoneCode: "351",
+        phoneMask: "+351-##-###-####",
+    },
+    {
+        name: "Qatar",
+        code: "QA",
+        flag: "https://www.untitledui.com/images/flags/QA.svg",
+        phoneCode: "974",
+        phoneMask: "+974-####-####",
+    },
+    {
+        name: "Romania",
+        code: "RO",
+        flag: "https://www.untitledui.com/images/flags/RO.svg",
+        phoneCode: "40",
+        phoneMask: "+40-##-###-####",
+    },
+    {
+        name: "Russia",
+        code: "RU",
+        flag: "https://www.untitledui.com/images/flags/RU.svg",
+        phoneCode: "7",
+        phoneMask: "+7 (###) ###-##-##",
+    },
+    {
+        name: "Rwanda",
+        code: "RW",
+        flag: "https://www.untitledui.com/images/flags/RW.svg",
+        phoneCode: "250",
+        phoneMask: "+250 (###) ###-###",
+    },
+    {
+        name: "Saint Kitts and Nevis",
+        code: "KN",
+        flag: "https://www.untitledui.com/images/flags/KN.svg",
+        phoneCode: "+1-869",
+        phoneMask: "+1 (869) ###-####",
+    },
+    {
+        name: "Saint Lucia",
+        code: "LC",
+        flag: "https://www.untitledui.com/images/flags/LC.svg",
+        phoneCode: "+1-758",
+        phoneMask: "+1 (758) ###-####",
+    },
+    {
+        name: "Saint Vincent and the Grenadines",
+        code: "VC",
+        flag: "https://www.untitledui.com/images/flags/VC.svg",
+        phoneCode: "+1-784",
+        phoneMask: "+1 (784) ###-####",
+    },
+    {
+        name: "Samoa",
+        code: "WS",
+        flag: "https://www.untitledui.com/images/flags/WS.svg",
+        phoneCode: "685",
+        phoneMask: "+685-##-####",
+    },
+    {
+        name: "San Marino",
+        code: "SM",
+        flag: "https://www.untitledui.com/images/flags/SM.svg",
+        phoneCode: "378",
+        phoneMask: "+378-####-######",
+    },
+    {
+        name: "Sao Tome and Principe",
+        code: "ST",
+        flag: "https://www.untitledui.com/images/flags/ST.svg",
+        phoneCode: "239",
+        phoneMask: "+239-##-#####",
+    },
+    {
+        name: "Saudi Arabia",
+        code: "SA",
+        flag: "https://www.untitledui.com/images/flags/SA.svg",
+        phoneCode: "966",
+        phoneMask: "+966-#-###-####",
+    },
+    {
+        name: "Senegal",
+        code: "SN",
+        flag: "https://www.untitledui.com/images/flags/SN.svg",
+        phoneCode: "221",
+        phoneMask: "+221-##-###-####",
+    },
+    {
+        name: "Serbia",
+        code: "RS",
+        flag: "https://www.untitledui.com/images/flags/RS.svg",
+        phoneCode: "381",
+        phoneMask: "+381-##-###-####",
+    },
+    {
+        name: "Seychelles",
+        code: "SC",
+        flag: "https://www.untitledui.com/images/flags/SC.svg",
+        phoneCode: "248",
+        phoneMask: "+248-#-###-###",
+    },
+    {
+        name: "Sierra Leone",
+        code: "SL",
+        flag: "https://www.untitledui.com/images/flags/SL.svg",
+        phoneCode: "232",
+        phoneMask: "+232-##-######",
+    },
+    {
+        name: "Singapore",
+        code: "SG",
+        flag: "https://www.untitledui.com/images/flags/SG.svg",
+        phoneCode: "65",
+        phoneMask: "+65-####-####",
+    },
+    {
+        name: "Slovakia",
+        code: "SK",
+        flag: "https://www.untitledui.com/images/flags/SK.svg",
+        phoneCode: "421",
+        phoneMask: "+421 (###) ###-###",
+    },
+    {
+        name: "Slovenia",
+        code: "SI",
+        flag: "https://www.untitledui.com/images/flags/SI.svg",
+        phoneCode: "386",
+        phoneMask: "+386-##-###-###",
+    },
+    {
+        name: "Solomon Islands",
+        code: "SB",
+        flag: "https://www.untitledui.com/images/flags/SB.svg",
+        phoneCode: "677",
+        phoneMask: "+677-#####",
+    },
+    {
+        name: "Somalia",
+        code: "SO",
+        flag: "https://www.untitledui.com/images/flags/SO.svg",
+        phoneCode: "252",
+        phoneMask: "+252-#-###-###",
+    },
+    {
+        name: "South Africa",
+        code: "ZA",
+        flag: "https://www.untitledui.com/images/flags/ZA.svg",
+        phoneCode: "27",
+        phoneMask: "+27-##-###-####",
+    },
+    {
+        name: "South Korea",
+        code: "KR",
+        flag: "https://www.untitledui.com/images/flags/KR.svg",
+        phoneCode: "82",
+        phoneMask: "+82-##-###-####",
+    },
+    {
+        name: "South Sudan",
+        code: "SS",
+        flag: "https://www.untitledui.com/images/flags/SS.svg",
+        phoneCode: "211",
+        phoneMask: "+211-##-###-####",
+    },
+    {
+        name: "Spain",
+        code: "ES",
+        flag: "https://www.untitledui.com/images/flags/ES.svg",
+        phoneCode: "34",
+        phoneMask: "+34 (###) ###-###",
+    },
+    {
+        name: "Sri Lanka",
+        code: "LK",
+        flag: "https://www.untitledui.com/images/flags/LK.svg",
+        phoneCode: "94",
+        phoneMask: "+94-##-###-####",
+    },
+    {
+        name: "Suriname",
+        code: "SR",
+        flag: "https://www.untitledui.com/images/flags/SR.svg",
+        phoneCode: "597",
+        phoneMask: "+597-###-###",
+    },
+    {
+        name: "Sweden",
+        code: "SE",
+        flag: "https://www.untitledui.com/images/flags/SE.svg",
+        phoneCode: "46",
+        phoneMask: "+46-##-###-####",
+    },
+    {
+        name: "Switzerland",
+        code: "CH",
+        flag: "https://www.untitledui.com/images/flags/CH.svg",
+        phoneCode: "41",
+        phoneMask: "+41-##-###-####",
+    },
+    {
+        name: "Syria",
+        code: "SY",
+        flag: "https://www.untitledui.com/images/flags/SY.svg",
+        phoneCode: "963",
+        phoneMask: "+963-##-####-###",
+    },
+    {
+        name: "Tajikistan",
+        code: "TJ",
+        flag: "https://www.untitledui.com/images/flags/TJ.svg",
+        phoneCode: "992",
+        phoneMask: "+992-##-###-####",
+    },
+    {
+        name: "Tanzania",
+        code: "TZ",
+        flag: "https://www.untitledui.com/images/flags/TZ.svg",
+        phoneCode: "255",
+        phoneMask: "+255-##-###-####",
+    },
+    {
+        name: "Thailand",
+        code: "TH",
+        flag: "https://www.untitledui.com/images/flags/TH.svg",
+        phoneCode: "66",
+        phoneMask: "+66-##-###-###",
+    },
+    {
+        name: "Togo",
+        code: "TG",
+        flag: "https://www.untitledui.com/images/flags/TG.svg",
+        phoneCode: "228",
+        phoneMask: "+228-##-###-###",
+    },
+    {
+        name: "Tonga",
+        code: "TO",
+        flag: "https://www.untitledui.com/images/flags/TO.svg",
+        phoneCode: "676",
+        phoneMask: "+676-#####",
+    },
+    {
+        name: "Trinidad and Tobago",
+        code: "TT",
+        flag: "https://www.untitledui.com/images/flags/TT.svg",
+        phoneCode: "+1-868",
+        phoneMask: "+1 (868) ###-####",
+    },
+    {
+        name: "Tunisia",
+        code: "TN",
+        flag: "https://www.untitledui.com/images/flags/TN.svg",
+        phoneCode: "216",
+        phoneMask: "+216-##-###-###",
+    },
+    {
+        name: "Turkey",
+        code: "TR",
+        flag: "https://www.untitledui.com/images/flags/TR.svg",
+        phoneCode: "90",
+        phoneMask: "+90 (###) ###-####",
+    },
+    {
+        name: "Turkmenistan",
+        code: "TM",
+        flag: "https://www.untitledui.com/images/flags/TM.svg",
+        phoneCode: "993",
+        phoneMask: "+993-#-###-####",
+    },
+    {
+        name: "Tuvalu",
+        code: "TV",
+        flag: "https://www.untitledui.com/images/flags/TV.svg",
+        phoneCode: "688",
+        phoneMask: "+688-2####",
+    },
+    {
+        name: "Uganda",
+        code: "UG",
+        flag: "https://www.untitledui.com/images/flags/UG.svg",
+        phoneCode: "256",
+        phoneMask: "+256 (###) ###-###",
+    },
+    {
+        name: "Ukraine",
+        code: "UA",
+        flag: "https://www.untitledui.com/images/flags/UA.svg",
+        phoneCode: "380",
+        phoneMask: "+380 (##) ###-##-##",
+    },
+    {
+        name: "United Arab Emirates",
+        code: "AE",
+        flag: "https://www.untitledui.com/images/flags/AE.svg",
+        phoneCode: "971",
+        phoneMask: "+971-#-###-####",
+    },
+    {
+        name: "United Kingdom",
+        code: "GB",
+        flag: "https://www.untitledui.com/images/flags/GB.svg",
+        phoneCode: "44",
+    },
+    {
+        name: "United States",
+        code: "US",
+        flag: "https://www.untitledui.com/images/flags/US.svg",
+        phoneCode: "1",
+        phoneMask: "+1 (###) ###-####",
+    },
+    {
+        name: "Uruguay",
+        code: "UY",
+        flag: "https://www.untitledui.com/images/flags/UY.svg",
+        phoneCode: "598",
+        phoneMask: "+598-#-###-##-##",
+    },
+    {
+        name: "Uzbekistan",
+        code: "UZ",
+        flag: "https://www.untitledui.com/images/flags/UZ.svg",
+        phoneCode: "998",
+        phoneMask: "+998-##-###-####",
+    },
+    {
+        name: "Vanuatu",
+        code: "VU",
+        flag: "https://www.untitledui.com/images/flags/VU.svg",
+        phoneCode: "678",
+        phoneMask: "+678-#####",
+    },
+    {
+        name: "Venezuela",
+        code: "VE",
+        flag: "https://www.untitledui.com/images/flags/VE.svg",
+        phoneCode: "58",
+        phoneMask: "+58 (###) ###-####",
+    },
+    {
+        name: "Vietnam",
+        code: "VN",
+        flag: "https://www.untitledui.com/images/flags/VN.svg",
+        phoneCode: "84",
+        phoneMask: "+84 (###) ####-###",
+    },
+    {
+        name: "Yemen",
+        code: "YE",
+        flag: "https://www.untitledui.com/images/flags/YE.svg",
+        phoneCode: "967",
+        phoneMask: "+967-##-###-###",
+    },
+    {
+        name: "Zambia",
+        code: "ZM",
+        flag: "https://www.untitledui.com/images/flags/ZM.svg",
+        phoneCode: "260",
+        phoneMask: "+260-##-###-####",
+    },
+    {
+        name: "Zimbabwe",
+        code: "ZW",
+        flag: "https://www.untitledui.com/images/flags/ZW.svg",
+        phoneCode: "263",
+        phoneMask: "+263-#-######",
+    },
+];
+
+/**
+ * Phone code options for the select component.
+ */
+export const phoneCodeOptions: SelectItemType[] = countries.map((country) => ({
+    id: country.code,
+    label: country.code,
+}));
+
+/**
+ * Country options for the select component.
+ */
+export const countriesOptions: SelectItemType[] = countries.map((country) => ({
+    id: country.code,
+    label: country.name,
+    icon: (props: HTMLAttributes<HTMLImageElement>) => <img {...props} src={country.flag} alt={`${country.name} flag`} />,
+}));
+
+export default countries;
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/src/utils/timezones.tsx b/src/utils/timezones.tsx
new file mode 100644
index 0000000..6a34e38
--- /dev/null
+++ b/src/utils/timezones.tsx
@@ -0,0 +1,57 @@
+import { Clock } from "@untitledui/icons";
+import type { SelectItemType } from "@/components/base/select/select";
+
+/**
+ * List of timezones with their timezone value, code and name.
+ */
+const timezones = [
+    { value: "UTC−12:00", name: "IDLW", longName: "International Date Line West" },
+    { value: "UTC−11:00", name: "UTC−11", longName: "Coordinated Universal Time-11" },
+    { value: "UTC−10:00", name: "HST", longName: "Hawaii-Aleutian Standard Time" },
+    { value: "UTC−09:00", name: "AKST", longName: "Alaska Standard Time" },
+    { value: "UTC−08:00", name: "PST", longName: "Pacific Standard Time" },
+    { value: "UTC−07:00", name: "MST", longName: "Mountain Standard Time" },
+    { value: "UTC−06:00", name: "CST", longName: "Central Standard Time" },
+    { value: "UTC−05:00", name: "EST", longName: "Eastern Standard Time" },
+    { value: "UTC−04:00", name: "AST", longName: "Atlantic Standard Time" },
+    { value: "UTC−03:00", name: "ART", longName: "Argentina Time" },
+    { value: "UTC−02:00", name: "GST", longName: "South Georgia Time" },
+    { value: "UTC−01:00", name: "AZOT", longName: "Azores Standard Time" },
+    { value: "UTC+00:00", name: "GMT", longName: "Greenwich Mean Time" },
+    { value: "UTC+01:00", name: "CET", longName: "Central European Time" },
+    { value: "UTC+02:00", name: "EET", longName: "Eastern European Time" },
+    { value: "UTC+03:00", name: "MSK", longName: "Moscow Standard Time" },
+    { value: "UTC+03:30", name: "IRST", longName: "Iran Standard Time" },
+    { value: "UTC+04:00", name: "GST", longName: "Gulf Standard Time" },
+    { value: "UTC+05:00", name: "PKT", longName: "Pakistan Standard Time" },
+    { value: "UTC+05:30", name: "IST", longName: "Indian Standard Time" },
+    { value: "UTC+06:00", name: "BST", longName: "Bangladesh Standard Time" },
+    { value: "UTC+07:00", name: "ICT", longName: "Indochina Time" },
+    { value: "UTC+08:00", name: "CST", longName: "China Standard Time" },
+    { value: "UTC+09:00", name: "JST", longName: "Japan Standard Time" },
+    { value: "UTC+10:00", name: "AEST", longName: "Australian Eastern Standard Time" },
+    { value: "UTC+11:00", name: "SBT", longName: "Solomon Islands Time" },
+    { value: "UTC+12:00", name: "NZST", longName: "New Zealand Standard Time" },
+];
+
+/**
+ * Timezones options with timezone code as the label for the select component.
+ */
+export const timezonesOptions: SelectItemType[] = timezones.map((timezone) => ({
+    id: timezone.value,
+    label: timezone.name,
+    supportingText: timezone.value,
+    icon: Clock,
+}));
+
+/**
+ * Timezones options with full timezone name for the select component.
+ */
+export const timezonesOptionsWithLongName: SelectItemType[] = timezones.map((timezone) => ({
+    id: timezone.value,
+    label: `${timezone.longName} (${timezone.name})`,
+    supportingText: timezone.value,
+    icon: Clock,
+}));
+
+export default timezones;
diff --git a/tsconfig.app.json b/tsconfig.app.json
new file mode 100644
index 0000000..ae5410d
--- /dev/null
+++ b/tsconfig.app.json
@@ -0,0 +1,30 @@
+{
+  "compilerOptions": {
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
+    "target": "ES2020",
+    "useDefineForClassFields": true,
+    "lib": ["ESNext", "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..351568a
--- /dev/null
+++ b/vite.config.ts
@@ -0,0 +1,13 @@
+import tailwindcss from "@tailwindcss/vite";
+import react from "@vitejs/plugin-react";
+import path from "path";
+import { defineConfig } from "vite";
+
+export default defineConfig({
+    plugins: [react(), tailwindcss()],
+    resolve: {
+        alias: {
+            "@": path.resolve(__dirname, "./src"),
+        },
+    },
+});