pelatform-ui 1.1.0

package/README.md

@@ -0,0 +1,259 @@
+# pelatform-ui
+
+A Modern and Minimal React UI Library built with TailwindCSS. The main package that provides access to all Pelatform UI components, hooks, and utilities through a unified interface. This package includes all the components, hooks, and utilities from the other Pelatform UI packages.
+
+## Installation
+
+```bash
+bun add pelatform-ui
+```
+
+### Peer Dependencies
+
+Make sure you have these installed:
+
+```bash
+bun add react react-dom @tanstack/react-query lucide-react motion next-themes sonner
+```
+
+### Import Styles
+
+```typescript
+import "pelatform-ui/css";
+```
+
+## Package Structure
+
+pelatform-ui is the main entry point that consolidates all Pelatform UI packages:
+
+- **@@pelatform/ui.general** - Core utilities and types
+- **@@pelatform/ui.hook** - React hooks (15 hooks)
+- **@@pelatform/ui.animation** - Animation components (14 components)
+- **@@pelatform/ui.aria** - Accessible ARIA components (2 components)
+- **@@pelatform/ui.base** - Base headless components (40+ components)
+- **@@pelatform/ui.default** - Styled default components (71 components)
+
+Plus additional ready-to-use components for layouts, navigation, and UI elements.
+
+## Import Paths
+
+```typescript
+// Main exports (utilities, types, icons)
+import { cn, cva, googleTrackEvent } from "pelatform-ui";
+
+// Hooks
+import { useHydrated, useMobile, useMediaQuery } from "pelatform-ui/hooks";
+
+// Animation components
+import {
+  ShimmeringText,
+  CountingNumber,
+  Marquee,
+} from "pelatform-ui/animation";
+
+// ARIA components
+import { DateField, ShowMore } from "pelatform-ui/aria";
+
+// Base components
+import { Button, Input, Select } from "pelatform-ui/base";
+
+// Default styled components
+import { Card, DataGrid, Kanban } from "pelatform-ui/default";
+
+// All components (base + default + custom)
+import { SiteHeader, SiteFooter, CommandMenu } from "pelatform-ui/components";
+
+// Styles
+import "pelatform-ui/css";
+```
+
+## Quick Start
+
+```typescript
+import { Button, Card, Input } from "pelatform-ui/default";
+import { useHydrated } from "pelatform-ui/hooks";
+import "pelatform-ui/css";
+
+function App() {
+  const hydrated = useHydrated();
+
+  if (!hydrated) return null;
+
+  return (
+    <Card>
+      <Input placeholder="Enter text" />
+      <Button>Submit</Button>
+    </Card>
+  );
+}
+```
+
+## Components
+
+### Layout Components
+
+- **Auth** - Authentication page layout
+- **Blank** - Minimal blank layout
+- **Body** - Main content body
+- **ComingSoon** - Coming soon page
+- **Error** - Error page layout
+- **Grid** - Grid-based layout
+- **Section** - Content section
+- **SiteHeader** - Sticky header with blur
+- **SiteFooter** - Site footer
+- **Wrapper** - Container wrapper
+
+### Navigation Components
+
+- **BackLink** - Back navigation link
+- **CommandMenu** - Command palette
+- **MainNav** - Main navigation menu
+- **MobileNav** - Mobile navigation
+
+### Feedback Components
+
+- **Alert** - Alert notifications
+- **AlertToast** - Toast notifications
+- **AlertNotification** - Notification alerts
+- **AlertComingsoon** - Coming soon alert
+- **Dialog** - Modal dialog
+- **ScreenLoader** - Loading screen
+
+### UI Components
+
+- **Announcement** - Announcement banner with tags
+- **BackgroundPaths** - Decorative backgrounds
+- **Book** - Book/document display
+- **DotsPattern** - Dot pattern background
+- **GridBackground** - Grid pattern background
+- **HexagonBadge** - Hexagon-shaped badge
+- **Icons** - Icon components
+- **ImageInput** - Image upload input
+- **LanguageSwitcher** - Language selector
+- **Logo** - Brand logo
+- **ModeSwitcher** - Theme mode toggle
+- **MovingBorder** - Animated border effect
+- **Subscribe** - Email subscription
+- **Toolbar** - Toolbar component
+- **UserAvatar** - User avatar display
+
+### Provider Components
+
+- **QueryProvider** - TanStack Query provider
+- **ThemeProvider** - Theme management (next-themes + tooltip)
+
+### MDX Components
+
+- **CodeDisplay** - Code snippet display
+- **Download** - Download link
+- **Link** - Custom link
+- **Video** - Video embed
+- **Wrapper** - MDX content wrapper
+- **YouTube** - YouTube embed
+
+### Utility Components
+
+- **Fonts** - Font configuration
+- **RecaptchaPopover** - reCAPTCHA integration
+- **Shared** - Shared utilities
+
+## Theme Management
+
+```typescript
+import { ThemeProvider } from "pelatform-ui/components";
+
+function App({ children }) {
+  return (
+    <ThemeProvider
+      attribute="class"
+      defaultTheme="system"
+      enableSystem
+      disableTransitionOnChange
+    >
+      {children}
+    </ThemeProvider>
+  );
+}
+```
+
+## Hooks
+
+15 production-ready hooks for common use cases:
+
+- **useAnalytics** - CRUD operation tracking
+- **useBodyClass** - Body class management
+- **useCopyToClipboard** - Clipboard operations
+- **useFileUpload** - File upload with drag & drop
+- **useHydrated** - SSR-safe hydration detection
+- **useMediaQuery** - Media query tracking
+- **useMenu** - Menu navigation state
+- **useMobile** - Mobile detection
+- **useMounted** - Mount state detection
+- **useMutationObserver** - DOM mutation observation
+- **useRecaptchaV2** - reCAPTCHA integration
+- **useRemoveGAParams** - GA parameter cleanup
+- **useScrollPosition** - Scroll tracking
+- **useSliderInput** - Slider input management
+- **useViewport** - Viewport dimensions
+
+## Styling
+
+The package uses Tailwind CSS with custom theme configuration. Import the CSS in your app:
+
+```typescript
+import "pelatform-ui/css";
+```
+
+CSS includes:
+
+- Theme variables
+- Component styles
+- Animation utilities
+- Pattern backgrounds
+- Custom transitions
+
+## TypeScript Support
+
+Full TypeScript support with comprehensive type definitions for all components and hooks.
+
+## Features
+
+- 100+ total components across all packages
+- 15 React hooks for common use cases
+- Full dark mode support
+- Responsive design
+- Accessibility (WCAG 2.1)
+- SSR-safe implementations
+- Tree-shakeable exports
+- TanStack Query integration
+- Next.js optimized
+- Tailwind CSS styling
+
+## Dependencies
+
+### Production Dependencies
+
+- `@radix-ui/react-dialog`
+- `radix-ui`
+- `tw-animate-css`
+
+### Peer Dependencies
+
+- `react`
+- `react-dom`
+- `@tanstack/react-query`
+- `lucide-react`
+- `motion`
+- `next-themes`
+- `sonner`
+
+## Links
+
+- [npm Package](https://www.npmjs.com/package/pelatform-ui)
+- [Contributing Guide](../../../CONTRIBUTING.md)
+- [Code of Conduct](../../../CODE_OF_CONDUCT.md)
+- [License](../../../LICENSE)
+
+## License
+
+MIT © [Pelatform Inc.](../../../LICENSE)

package/css/components/apexcharts.css

@@ -0,0 +1,101 @@
+@layer components {
+  .apexcharts-text,
+  .apexcharts-title-text,
+  .apexcharts-legend-text {
+    font-family: inherit !important;
+  }
+
+  .apexcharts-title-text {
+    font-weight: var(--font-weight-normal);
+  }
+
+  .apexcharts-pie-label {
+    @apply text-xs;
+  }
+
+  .apexcharts-toolbar {
+    text-align: start !important;
+  }
+
+  .apexcharts-menu {
+    border: 1px solid var(--color-border) !important;
+    box-shadow: var(--box-shadow-sm) !important;
+    background-color: var(--color-background) !important;
+    border-radius: 0.625rem !important;
+    padding: 0.5rem 0 !important;
+    overflow: hidden;
+    min-width: 10rem !important;
+  }
+
+  .apexcharts-menu .apexcharts-menu-item {
+    padding: 0.5rem 0.5rem !important;
+  }
+
+  .apexcharts-menu .apexcharts-menu-item:hover {
+    background-color: var(--gray-100) !important;
+  }
+
+  .apexcharts-tooltip {
+    border: 1px solid var(--color-border) !important;
+    box-shadow: var(--box-shadow-sm) !important;
+    background-color: var(--color-background) !important;
+    border-radius: 0.625rem !important;
+    color: var(--color-secondary-foreground) !important;
+  }
+
+  .apexcharts-tooltip .apexcharts-tooltip-title {
+    @apply text-foreground text-sm font-medium;
+    padding: 0.25rem 0.5rem !important;
+    background-color: transparent !important;
+    border-bottom: 1px solid var(--color-border) !important;
+  }
+
+  .apexcharts-xaxistooltip {
+    border: 1px solid var(--color-border) !important;
+    box-shadow: var(--box-shadow-sm) !important;
+    background-color: var(--color-background) !important;
+    border-radius: 0.625rem;
+    color: var(--color-foreground);
+  }
+
+  .apexcharts-xaxistooltip:before {
+    border-bottom: 0 !important;
+  }
+
+  .apexcharts-legend {
+    display: flex;
+    flex-direction: column;
+    @apply gap-2;
+  }
+
+  .apexcharts-legend .apexcharts-legend-series {
+    @apply gap-1;
+    display: flex;
+    align-items: center;
+  }
+
+  .apexcharts-legend .apexcharts-legend-series .apexcharts-legend-text {
+    @apply text-muted-foreground text-sm font-medium;
+  }
+
+  .apexcharts-card-rounded .apexcharts-canvas svg {
+    border-bottom-left-radius: var(--radius-xl);
+    border-bottom-right-radius: var(--radius-xl);
+  }
+
+  .apexcharts-rounded-sm .apexcharts-canvas svg {
+    border-radius: var(--radius-sm);
+  }
+
+  .apexcharts-rounded .apexcharts-canvas svg {
+    border-radius: var(--radius-md);
+  }
+
+  .apexcharts-rounded-lg .apexcharts-canvas svg {
+    border-radius: var(--radius-lg);
+  }
+
+  .apexcharts-rounded-xl .apexcharts-canvas svg {
+    border-radius: var(--radius-xl);
+  }
+}

package/css/components/book.css

@@ -0,0 +1,19 @@
+@layer components {
+  .bg-book-bind-bg {
+    background: linear-gradient(90deg, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0) 100%);
+  }
+
+  .bg-book-pages {
+    background: linear-gradient(90deg, #f1f1f1 0%, #ffffff 100%);
+  }
+
+  .shadow-book {
+    box-shadow:
+      0 4px 6px -1px rgba(0, 0, 0, 0.1),
+      0 2px 4px -1px rgba(0, 0, 0, 0.06);
+  }
+
+  .book-bg {
+    background-image: linear-gradient(to right, rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, 0) 100%);
+  }
+}

package/css/components/extra.css

@@ -0,0 +1,12 @@
+@layer components {
+  .animate-move {
+    animation: move 0.6s ease-out forwards;
+    will-change: transform;
+  }
+
+  .grid-container {
+    @apply container max-w-7xl;
+    margin-inline: auto;
+    padding-inline: 0rem;
+  }
+}

package/css/components/image-input.css

@@ -0,0 +1,51 @@
+@layer components {
+  .pf-image-input {
+    @apply relative inline-flex size-20 cursor-pointer items-center justify-center;
+
+    input[type="file"] {
+      @apply absolute size-0 appearance-none opacity-0;
+    }
+  }
+
+  .pf-image-input-remove {
+    @apply bg-background border-border end-px top-px absolute z-1 flex size-5 cursor-pointer items-center justify-center rounded-full border shadow-sm;
+
+    i {
+      @apply text-muted-foreground text-[11px];
+    }
+
+    svg {
+      @apply text-muted-foreground size-3.25;
+    }
+
+    &:hover {
+      i {
+        @apply text-foreground;
+      }
+
+      svg {
+        @apply text-foreground;
+      }
+    }
+  }
+
+  .pf-image-input-placeholder {
+    @apply border-border pf-image-input-empty:border-border relative size-full overflow-hidden rounded-full border bg-cover bg-no-repeat;
+  }
+
+  .pf-image-input-preview {
+    @apply relative size-full overflow-hidden rounded-full bg-cover bg-no-repeat;
+  }
+}
+
+@custom-variant pf-image-input-empty {
+  [data-pf-image-input-initialized].empty & {
+    @slot;
+  }
+}
+
+@custom-variant image-input-changed {
+  [data-pf-image-input-initialized].changed & {
+    @slot;
+  }
+}

package/css/components/leaflet.css

@@ -0,0 +1,25 @@
+@layer components {
+  /* Base Leaflet container styles */
+  .leaflet-container {
+    /* Leaflet pane and control styles */
+    & .leaflet-pane,
+    & .leaflet-top,
+    & .leaflet-bottom,
+    & .leaflet-control {
+      z-index: 1 !important;
+    }
+
+    /* Leaflet popup content wrapper styles */
+    & .leaflet-popup-content-wrapper {
+      border-radius: var(--radius-md);
+      text-align: center;
+      background-color: var(--color-popover);
+
+      /* Leaflet popup content styles */
+      & .leaflet-popup-content {
+        font-family: inherit;
+        @apply text-xs;
+      }
+    }
+  }
+}

package/css/components/patterns.css

@@ -0,0 +1,34 @@
+@layer utilities {
+  .bg-dashed {
+    background-image: linear-gradient(
+      45deg,
+      var(--color-border) 12.5%,
+      transparent 12.5%,
+      transparent 50%,
+      var(--color-border) 50%,
+      var(--color-border) 62.5%,
+      transparent 62.5%,
+      transparent 100%
+    );
+    background-size: 0.25rem 0.25rem;
+  }
+
+  .grid-magicpattern {
+    width: 100%;
+    height: 100%;
+    background-size: cover;
+    background-position: center center;
+    background-repeat: repeat;
+    background-image: url("data:image/svg+xml;utf8,%3Csvg viewBox=%220 0 2000 1400%22 xmlns=%22http:%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cmask id=%22b%22 x=%220%22 y=%220%22 width=%222000%22 height=%221400%22%3E%3Cpath fill=%22url(%23a)%22 d=%22M0 0h2000v1400H0z%22%2F%3E%3C%2Fmask%3E%3Cpath fill=%22%23fff%22 d=%22M0 0h2000v1400H0z%22%2F%3E%3Cg style=%22transform-origin:center center%22 stroke=%22%23d8d8d88f%22 stroke-width=%222%22 mask=%22url(%23b)%22%3E%3Cpath fill=%22none%22 d=%22M0 0h100v100H0zM100 0h100v100H100zM200 0h100v100H200zM300 0h100v100H300z%22%2F%3E%3Cpath fill=%22%23d8d8d878%22 d=%22M400 0h100v100H400z%22%2F%3E%3Cpath fill=%22%23d8d8d808%22 d=%22M500 0h100v100H500z%22%2F%3E%3Cpath fill=%22none%22 d=%22M600 0h100v100H600zM700 0h100v100H700zM800 0h100v100H800zM900 0h100v100H900z%22%2F%3E%3Cpath fill=%22%23d8d8d826%22 d=%22M1000 0h100v100h-100z%22%2F%3E%3Cpath fill=%22%23d8d8d852%22 d=%22M1100 0h100v100h-100z%22%2F%3E%3Cpath fill=%22%23d8d8d805%22 d=%22M1200 0h100v100h-100z%22%2F%3E%3Cpath fill=%22%23d8d8d888%22 d=%22M1300 0h100v100h-100z%22%2F%3E%3Cpath fill=%22none%22 d=%22M1400 0h100v100h-100zM1500 0h100v100h-100zM1600 0h100v100h-100zM1700 0h100v100h-100zM1800 0h100v100h-100z%22%2F%3E%3Cpath fill=%22%23d8d8d816%22 d=%22M1900 0h100v100h-100z%22%2F%3E%3Cpath fill=%22none%22 d=%22M0 100h100v100H0zM100 100h100v100H100z%22%2F%3E%3Cpath fill=%22%23d8d8d842%22 d=%22M200 100h100v100H200z%22%2F%3E%3Cpath fill=%22%23d8d8d87d%22 d=%22M300 100h100v100H300z%22%2F%3E%3Cpath fill=%22%23d8d8d836%22 d=%22M400 100h100v100H400z%22%2F%3E%3Cpath fill=%22%23d8d8d82e%22 d=%22M500 100h100v100H500z%22%2F%3E%3Cpath fill=%22%23d8d8d85b%22 d=%22M600 100h100v100H600z%22%2F%3E%3Cpath fill=%22%23d8d8d888%22 d=%22M700 100h100v100H700z%22%2F%3E%3Cpath fill=%22none%22 d=%22M800 100h100v100H800zM900 100h100v100H900z%22%2F%3E%3Cpath fill=%22%23d8d8d83a%22 d=%22M1000 100h100v100h-100z%22%2F%3E%3Cpath fill=%22none%22 d=%22M1100 100h100v100h-100z%22%2F%3E%3Cpath fill=%22%23d8d8d88e%22 d=%22M1200 100h100v100h-100z%22%2F%3E%3Cpath fill=%22none%22 d=%22M1300 100h100v100h-100z%22%2F%3E%3Cpath fill=%22%23d8d8d80c%22 d=%22M1400 100h100v100h-100z%22%2F%3E%3Cpath fill=%22none%22 d=%22M1500 100h100v100h-100zM1600 100h100v100h-100zM1700 100h100v100h-100z%22%2F%3E%3Cpath fill=%22%23d8d8d827%22 d=%22M1800 100h100v100h-100z%22%2F%3E%3Cpath fill=%22none%22 d=%22M1900 100h100v100h-100zM0 200h100v100H0zM100 200h100v100H100zM200 200h100v100H200zM300 200h100v100H300zM400 200h100v100H400zM500 200h100v100H500zM600 200h100v100H600zM700 200h100v100H700zM800 200h100v100H800zM900 200h100v100H900zM1000 200h100v100h-100zM1100 200h100v100h-100z%22%2F%3E%3Cpath fill=%22%23d8d8d838%22 d=%22M1200 200h100v100h-100z%22%2F%3E%3Cpath fill=%22none%22 d=%22M1300 200h100v100h-100zM1400 200h100v100h-100z%22%2F%3E%3Cpath fill=%22%23d8d8d818%22 d=%22M1500 200h100v100h-100z%22%2F%3E%3Cpath fill=%22none%22 d=%22M1600 200h100v100h-100z%22%2F%3E%3Cpath fill=%22%23d8d8d865%22 d=%22M1700 200h100v100h-100z%22%2F%3E%3Cpath fill=%22none%22 d=%22M1800 200h100v100h-100zM1900 200h100v100h-100zM0 300h100v100H0zM100 300h100v100H100zM200 300h100v100H200zM300 300h100v100H300zM400 300h100v100H400z%22%2F%3E%3Cpath fill=%22%23d8d8d85a%22 d=%22M500 300h100v100H500z%22%2F%3E%3Cpath fill=%22none%22 d=%22M600 300h100v100H600zM700 300h100v100H700z%22%2F%3E%3Cpath fill=%22%23d8d8d866%22 d=%22M800 300h100v100H800z%22%2F%3E%3Cpath fill=%22none%22 d=%22M900 300h100v100H900zM1000 300h100v100h-100z%22%2F%3E%3Cpath fill=%22%23d8d8d871%22 d=%22M1100 300h100v100h-100z%22%2F%3E%3Cpath fill=%22none%22 d=%22M1200 300h100v100h-100z%22%2F%3E%3Cpath fill=%22%23d8d8d872%22 d=%22M1300 300h100v100h-100z%22%2F%3E%3Cpath fill=%22none%22 d=%22M1400 300h100v100h-100zM1500 300h100v100h-100zM1600 300h100v100h-100zM1700 300h100v100h-100z%22%2F%3E%3Cpath fill=%22%23d8d8d80d%22 d=%22M1800 300h100v100h-100z%22%2F%3E%3Cpath fill=%22none%22 d=%22M1900 300h100v100h-100zM0 400h100v100H0zM100 400h100v100H100z%22%2F%3E%3Cpath fill=%22%23d8d8d838%22 d=%22M200 400h100v100H200z%22%2F%3E%3Cpath fill=%22none%22 d=%22M300 400h100v100H300z%22%2F%3E%3Cpath fill=%22%23d8d8d86f%22 d=%22M400 400h100v100H400z%22%2F%3E%3Cpath fill=%22%23d8d8d855%22 d=%22M500 400h100v100H500z%22%2F%3E%3Cpath fill=%22none%22 d=%22M600 400h100v100H600zM700 400h100v100H700zM800 400h100v100H800zM900 400h100v100H900zM1000 400h100v100h-100zM1100 400h100v100h-100zM1200 400h100v100h-100zM1300 400h100v100h-100zM1400 400h100v100h-100zM1500 400h100v100h-100zM1600 400h100v100h-100zM1700 400h100v100h-100zM1800 400h100v100h-100z%22%2F%3E%3Cpath fill=%22%23d8d8d826%22 d=%22M1900 400h100v100h-100z%22%2F%3E%3Cpath fill=%22none%22 d=%22M0 500h100v100H0z%22%2F%3E%3Cpath fill=%22%23d8d8d849%22 d=%22M100 500h100v100H100z%22%2F%3E%3Cpath fill=%22none%22 d=%22M200 500h100v100H200zM300 500h100v100H300z%22%2F%3E%3Cpath fill=%22%23d8d8d838%22 d=%22M400 500h100v100H400z%22%2F%3E%3Cpath fill=%22none%22 d=%22M500 500h100v100H500zM600 500h100v100H600zM700 500h100v100H700z%22%2F%3E%3Cpath fill=%22%23d8d8d811%22 d=%22M800 500h100v100H800z%22%2F%3E%3Cpath fill=%22none%22 d=%22M900 500h100v100H900z%22%2F%3E%3Cpath fill=%22%23d8d8d82d%22 d=%22M1000 500h100v100h-100z%22%2F%3E%3Cpath fill=%22none%22 d=%22M1100 500h100v100h-100z%22%2F%3E%3Cpath fill=%22%23d8d8d80b%22 d=%22M1200 500h100v100h-100z%22%2F%3E%3Cpath fill=%22none%22 d=%22M1300 500h100v100h-100zM1400 500h100v100h-100zM1500 500h100v100h-100zM1600 500h100v100h-100zM1700 500h100v100h-100zM1800 500h100v100h-100zM1900 500h100v100h-100zM0 600h100v100H0z%22%2F%3E%3Cpath fill=%22%23d8d8d85f%22 d=%22M100 600h100v100H100z%22%2F%3E%3Cpath fill=%22none%22 d=%22M200 600h100v100H200zM300 600h100v100H300zM400 600h100v100H400zM500 600h100v100H500zM600 600h100v100H600zM700 600h100v100H700zM800 600h100v100H800z%22%2F%3E%3Cpath fill=%22%23d8d8d854%22 d=%22M900 600h100v100H900z%22%2F%3E%3Cpath fill=%22none%22 d=%22M1000 600h100v100h-100z%22%2F%3E%3Cpath fill=%22%23d8d8d833%22 d=%22M1100 600h100v100h-100z%22%2F%3E%3Cpath fill=%22none%22 d=%22M1200 600h100v100h-100zM1300 600h100v100h-100z%22%2F%3E%3Cpath fill=%22%23d8d8d838%22 d=%22M1400 600h100v100h-100z%22%2F%3E%3Cpath fill=%22%23d8d8d84e%22 d=%22M1500 600h100v100h-100z%22%2F%3E%3Cpath fill=%22none%22 d=%22M1600 600h100v100h-100zM1700 600h100v100h-100z%22%2F%3E%3Cpath fill=%22%23d8d8d801%22 d=%22M1800 600h100v100h-100z%22%2F%3E%3Cpath fill=%22none%22 d=%22M1900 600h100v100h-100zM0 700h100v100H0zM100 700h100v100H100zM200 700h100v100H200z%22%2F%3E%3Cpath fill=%22%23d8d8d821%22 d=%22M300 700h100v100H300z%22%2F%3E%3Cpath fill=%22none%22 d=%22M400 700h100v100H400zM500 700h100v100H500zM600 700h100v100H600zM700 700h100v100H700z%22%2F%3E%3Cpath fill=%22%23d8d8d826%22 d=%22M800 700h100v100H800z%22%2F%3E%3Cpath fill=%22%23d8d8d86d%22 d=%22M900 700h100v100H900z%22%2F%3E%3Cpath fill=%22none%22 d=%22M1000 700h100v100h-100zM1100 700h100v100h-100z%22%2F%3E%3Cpath fill=%22%23d8d8d876%22 d=%22M1200 700h100v100h-100z%22%2F%3E%3Cpath fill=%22none%22 d=%22M1300 700h100v100h-100zM1400 700h100v100h-100zM1500 700h100v100h-100zM1600 700h100v100h-100zM1700 700h100v100h-100zM1800 700h100v100h-100zM1900 700h100v100h-100zM0 800h100v100H0zM100 800h100v100H100zM200 800h100v100H200z%22%2F%3E%3Cpath fill=%22%23d8d8d859%22 d=%22M300 800h100v100H300z%22%2F%3E%3Cpath fill=%22none%22 d=%22M400 800h100v100H400z%22%2F%3E%3Cpath fill=%22%23d8d8d889%22 d=%22M500 800h100v100H500z%22%2F%3E%3Cpath fill=%22%23d8d8d858%22 d=%22M600 800h100v100H600z%22%2F%3E%3Cpath fill=%22none%22 d=%22M700 800h100v100H700zM800 800h100v100H800zM900 800h100v100H900zM1000 800h100v100h-100zM1100 800h100v100h-100zM1200 800h100v100h-100zM1300 800h100v100h-100zM1400 800h100v100h-100zM1500 800h100v100h-100z%22%2F%3E%3Cpath fill=%22%23d8d8d831%22 d=%22M1600 800h100v100h-100z%22%2F%3E%3Cpath fill=%22none%22 d=%22M1700 800h100v100h-100zM1800 800h100v100h-100zM1900 800h100v100h-100zM0 900h100v100H0z%22%2F%3E%3Cpath fill=%22%23d8d8d816%22 d=%22M100 900h100v100H100z%22%2F%3E%3Cpath fill=%22none%22 d=%22M200 900h100v100H200zM300 900h100v100H300zM400 900h100v100H400zM500 900h100v100H500z%22%2F%3E%3Cpath fill=%22%23d8d8d869%22 d=%22M600 900h100v100H600z%22%2F%3E%3Cpath fill=%22%23d8d8d809%22 d=%22M700 900h100v100H700z%22%2F%3E%3Cpath fill=%22none%22 d=%22M800 900h100v100H800zM900 900h100v100H900zM1000 900h100v100h-100zM1100 900h100v100h-100z%22%2F%3E%3Cpath fill=%22%23d8d8d820%22 d=%22M1200 900h100v100h-100z%22%2F%3E%3Cpath fill=%22none%22 d=%22M1300 900h100v100h-100zM1400 900h100v100h-100z%22%2F%3E%3Cpath fill=%22%23d8d8d82c%22 d=%22M1500 900h100v100h-100z%22%2F%3E%3Cpath fill=%22none%22 d=%22M1600 900h100v100h-100zM1700 900h100v100h-100zM1800 900h100v100h-100zM1900 900h100v100h-100z%22%2F%3E%3Cpath fill=%22%23d8d8d82f%22 d=%22M0 1000h100v100H0z%22%2F%3E%3Cpath fill=%22%23d8d8d881%22 d=%22M100 1000h100v100H100z%22%2F%3E%3Cpath fill=%22none%22 d=%22M200 1000h100v100H200z%22%2F%3E%3Cpath fill=%22%23d8d8d85c%22 d=%22M300 1000h100v100H300z%22%2F%3E%3Cpath fill=%22none%22 d=%22M400 1000h100v100H400zM500 1000h100v100H500zM600 1000h100v100H600zM700 1000h100v100H700zM800 1000h100v100H800zM900 1000h100v100H900zM1000 1000h100v100h-100zM1100 1000h100v100h-100z%22%2F%3E%3Cpath fill=%22%23d8d8d85c%22 d=%22M1200 1000h100v100h-100z%22%2F%3E%3Cpath fill=%22%23d8d8d832%22 d=%22M1300 1000h100v100h-100z%22%2F%3E%3Cpath fill=%22none%22 d=%22M1400 1000h100v100h-100zM1500 1000h100v100h-100zM1600 1000h100v100h-100z%22%2F%3E%3Cpath fill=%22%23d8d8d81d%22 d=%22M1700 1000h100v100h-100z%22%2F%3E%3Cpath fill=%22none%22 d=%22M1800 1000h100v100h-100zM1900 1000h100v100h-100z%22%2F%3E%3Cpath fill=%22%23d8d8d853%22 d=%22M0 1100h100v100H0z%22%2F%3E%3Cpath fill=%22none%22 d=%22M100 1100h100v100H100z%22%2F%3E%3Cpath fill=%22%23d8d8d849%22 d=%22M200 1100h100v100H200z%22%2F%3E%3Cpath fill=%22none%22 d=%22M300 1100h100v100H300zM400 1100h100v100H400zM500 1100h100v100H500zM600 1100h100v100H600z%22%2F%3E%3Cpath fill=%22%23d8d8d81d%22 d=%22M700 1100h100v100H700z%22%2F%3E%3Cpath fill=%22none%22 d=%22M800 1100h100v100H800zM900 1100h100v100H900zM1000 1100h100v100h-100z%22%2F%3E%3Cpath fill=%22%23d8d8d863%22 d=%22M1100 1100h100v100h-100z%22%2F%3E%3Cpath fill=%22%23d8d8d83f%22 d=%22M1200 1100h100v100h-100z%22%2F%3E%3Cpath fill=%22none%22 d=%22M1300 1100h100v100h-100zM1400 1100h100v100h-100zM1500 1100h100v100h-100z%22%2F%3E%3Cpath fill=%22%23d8d8d824%22 d=%22M1600 1100h100v100h-100z%22%2F%3E%3Cpath fill=%22none%22 d=%22M1700 1100h100v100h-100zM1800 1100h100v100h-100zM1900 1100h100v100h-100zM0 1200h100v100H0z%22%2F%3E%3Cpath fill=%22%23d8d8d850%22 d=%22M100 1200h100v100H100z%22%2F%3E%3Cpath fill=%22%23d8d8d87f%22 d=%22M200 1200h100v100H200z%22%2F%3E%3Cpath fill=%22none%22 d=%22M300 1200h100v100H300zM400 1200h100v100H400zM500 1200h100v100H500zM600 1200h100v100H600zM700 1200h100v100H700zM800 1200h100v100H800zM900 1200h100v100H900zM1000 1200h100v100h-100zM1100 1200h100v100h-100zM1200 1200h100v100h-100z%22%2F%3E%3Cpath fill=%22%23d8d8d838%22 d=%22M1300 1200h100v100h-100z%22%2F%3E%3Cpath fill=%22%23d8d8d888%22 d=%22M1400 1200h100v100h-100z%22%2F%3E%3Cpath fill=%22none%22 d=%22M1500 1200h100v100h-100zM1600 1200h100v100h-100zM1700 1200h100v100h-100zM1800 1200h100v100h-100zM1900 1200h100v100h-100zM0 1300h100v100H0zM100 1300h100v100H100zM200 1300h100v100H200zM300 1300h100v100H300z%22%2F%3E%3Cpath fill=%22%23d8d8d838%22 d=%22M400 1300h100v100H400z%22%2F%3E%3Cpath fill=%22none%22 d=%22M500 1300h100v100H500zM600 1300h100v100H600zM700 1300h100v100H700zM800 1300h100v100H800z%22%2F%3E%3Cpath fill=%22%23d8d8d841%22 d=%22M900 1300h100v100H900z%22%2F%3E%3Cpath fill=%22none%22 d=%22M1000 1300h100v100h-100z%22%2F%3E%3Cpath fill=%22%23d8d8d862%22 d=%22M1100 1300h100v100h-100z%22%2F%3E%3Cpath fill=%22none%22 d=%22M1200 1300h100v100h-100z%22%2F%3E%3Cpath fill=%22%23d8d8d842%22 d=%22M1300 1300h100v100h-100z%22%2F%3E%3Cpath fill=%22%23d8d8d854%22 d=%22M1400 1300h100v100h-100z%22%2F%3E%3Cpath fill=%22none%22 d=%22M1500 1300h100v100h-100zM1600 1300h100v100h-100zM1700 1300h100v100h-100z%22%2F%3E%3Cpath fill=%22%23d8d8d840%22 d=%22M1800 1300h100v100h-100z%22%2F%3E%3Cpath fill=%22none%22 d=%22M1900 1300h100v100h-100z%22%2F%3E%3C%2Fg%3E%3Cdefs%3E%3CradialGradient id=%22a%22%3E%3Cstop offset=%220%22 stop-color=%22%23fff%22 stop-opacity=%22.838%22%2F%3E%3Cstop offset=%2286.5%25%22 stop-color=%22%23fff%22 stop-opacity=%220%22%2F%3E%3C%2FradialGradient%3E%3C%2Fdefs%3E%3C%2Fsvg%3E");
+  }
+  .dark {
+    .grid-magicpattern {
+      width: 100%;
+      height: 100%;
+      background-size: cover;
+      background-position: center center;
+      background-repeat: repeat;
+      background-image: url("data:image/svg+xml;utf8,%3Csvg viewBox=%220 0 2000 1400%22 xmlns=%22http:%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cmask id=%22b%22 x=%220%22 y=%220%22 width=%222000%22 height=%221400%22%3E%3Cpath fill=%22url(%23a)%22 d=%22M0 0h2000v1400H0z%22%2F%3E%3C%2Fmask%3E%3Cpath d=%22M0 0h2000v1400H0z%22%2F%3E%3Cg style=%22transform-origin:center center%22 stroke=%22%236565658f%22 stroke-width=%222%22 mask=%22url(%23b)%22%3E%3Cpath fill=%22none%22 d=%22M0 0h100v100H0zM100 0h100v100H100zM200 0h100v100H200z%22%2F%3E%3Cpath fill=%22%2365656582%22 d=%22M300 0h100v100H300z%22%2F%3E%3Cpath fill=%22none%22 d=%22M400 0h100v100H400zM500 0h100v100H500zM600 0h100v100H600zM700 0h100v100H700zM800 0h100v100H800zM900 0h100v100H900z%22%2F%3E%3Cpath fill=%22%2365656534%22 d=%22M1000 0h100v100h-100z%22%2F%3E%3Cpath fill=%22%2365656539%22 d=%22M1100 0h100v100h-100z%22%2F%3E%3Cpath fill=%22%2365656580%22 d=%22M1200 0h100v100h-100z%22%2F%3E%3Cpath fill=%22none%22 d=%22M1300 0h100v100h-100zM1400 0h100v100h-100z%22%2F%3E%3Cpath fill=%22%2365656567%22 d=%22M1500 0h100v100h-100z%22%2F%3E%3Cpath fill=%22%2365656574%22 d=%22M1600 0h100v100h-100z%22%2F%3E%3Cpath fill=%22none%22 d=%22M1700 0h100v100h-100z%22%2F%3E%3Cpath fill=%22%2365656584%22 d=%22M1800 0h100v100h-100z%22%2F%3E%3Cpath fill=%22none%22 d=%22M1900 0h100v100h-100z%22%2F%3E%3Cpath fill=%22%236565657b%22 d=%22M0 100h100v100H0z%22%2F%3E%3Cpath fill=%22none%22 d=%22M100 100h100v100H100zM200 100h100v100H200zM300 100h100v100H300z%22%2F%3E%3Cpath fill=%22%2365656555%22 d=%22M400 100h100v100H400z%22%2F%3E%3Cpath fill=%22none%22 d=%22M500 100h100v100H500zM600 100h100v100H600zM700 100h100v100H700z%22%2F%3E%3Cpath fill=%22%2365656504%22 d=%22M800 100h100v100H800z%22%2F%3E%3Cpath fill=%22none%22 d=%22M900 100h100v100H900zM1000 100h100v100h-100zM1100 100h100v100h-100z%22%2F%3E%3Cpath fill=%22%2365656515%22 d=%22M1200 100h100v100h-100z%22%2F%3E%3Cpath fill=%22%236565653f%22 d=%22M1300 100h100v100h-100z%22%2F%3E%3Cpath fill=%22none%22 d=%22M1400 100h100v100h-100zM1500 100h100v100h-100zM1600 100h100v100h-100zM1700 100h100v100h-100z%22%2F%3E%3Cpath fill=%22%2365656531%22 d=%22M1800 100h100v100h-100z%22%2F%3E%3Cpath fill=%22%236565657f%22 d=%22M1900 100h100v100h-100z%22%2F%3E%3Cpath fill=%22none%22 d=%22M0 200h100v100H0zM100 200h100v100H100z%22%2F%3E%3Cpath fill=%22%2365656550%22 d=%22M200 200h100v100H200z%22%2F%3E%3Cpath fill=%22none%22 d=%22M300 200h100v100H300z%22%2F%3E%3Cpath fill=%22%236565654a%22 d=%22M400 200h100v100H400z%22%2F%3E%3Cpath fill=%22none%22 d=%22M500 200h100v100H500zM600 200h100v100H600zM700 200h100v100H700zM800 200h100v100H800zM900 200h100v100H900z%22%2F%3E%3Cpath fill=%22%2365656563%22 d=%22M1000 200h100v100h-100z%22%2F%3E%3Cpath fill=%22%2365656540%22 d=%22M1100 200h100v100h-100z%22%2F%3E%3Cpath fill=%22none%22 d=%22M1200 200h100v100h-100zM1300 200h100v100h-100zM1400 200h100v100h-100zM1500 200h100v100h-100zM1600 200h100v100h-100zM1700 200h100v100h-100z%22%2F%3E%3Cpath fill=%22%2365656563%22 d=%22M1800 200h100v100h-100z%22%2F%3E%3Cpath fill=%22%236565657e%22 d=%22M1900 200h100v100h-100z%22%2F%3E%3Cpath fill=%22none%22 d=%22M0 300h100v100H0zM100 300h100v100H100zM200 300h100v100H200z%22%2F%3E%3Cpath fill=%22%2365656510%22 d=%22M300 300h100v100H300z%22%2F%3E%3Cpath fill=%22%2365656514%22 d=%22M400 300h100v100H400z%22%2F%3E%3Cpath fill=%22none%22 d=%22M500 300h100v100H500zM600 300h100v100H600z%22%2F%3E%3Cpath fill=%22%236565656a%22 d=%22M700 300h100v100H700z%22%2F%3E%3Cpath fill=%22%236565651e%22 d=%22M800 300h100v100H800z%22%2F%3E%3Cpath fill=%22none%22 d=%22M900 300h100v100H900zM1000 300h100v100h-100zM1100 300h100v100h-100z%22%2F%3E%3Cpath fill=%22%236565653d%22 d=%22M1200 300h100v100h-100z%22%2F%3E%3Cpath fill=%22%2365656572%22 d=%22M1300 300h100v100h-100z%22%2F%3E%3Cpath fill=%22none%22 d=%22M1400 300h100v100h-100zM1500 300h100v100h-100z%22%2F%3E%3Cpath fill=%22%2365656584%22 d=%22M1600 300h100v100h-100z%22%2F%3E%3Cpath fill=%22none%22 d=%22M1700 300h100v100h-100zM1800 300h100v100h-100z%22%2F%3E%3Cpath fill=%22%2365656562%22 d=%22M1900 300h100v100h-100z%22%2F%3E%3Cpath fill=%22%236565650b%22 d=%22M0 400h100v100H0z%22%2F%3E%3Cpath fill=%22%236565652e%22 d=%22M100 400h100v100H100z%22%2F%3E%3Cpath fill=%22none%22 d=%22M200 400h100v100H200zM300 400h100v100H300zM400 400h100v100H400z%22%2F%3E%3Cpath fill=%22%236565655a%22 d=%22M500 400h100v100H500z%22%2F%3E%3Cpath fill=%22none%22 d=%22M600 400h100v100H600z%22%2F%3E%3Cpath fill=%22%2365656541%22 d=%22M700 400h100v100H700z%22%2F%3E%3Cpath fill=%22none%22 d=%22M800 400h100v100H800zM900 400h100v100H900zM1000 400h100v100h-100z%22%2F%3E%3Cpath fill=%22%2365656557%22 d=%22M1100 400h100v100h-100z%22%2F%3E%3Cpath fill=%22none%22 d=%22M1200 400h100v100h-100z%22%2F%3E%3Cpath fill=%22%236565651a%22 d=%22M1300 400h100v100h-100z%22%2F%3E%3Cpath fill=%22%2365656503%22 d=%22M1400 400h100v100h-100z%22%2F%3E%3Cpath fill=%22none%22 d=%22M1500 400h100v100h-100zM1600 400h100v100h-100zM1700 400h100v100h-100zM1800 400h100v100h-100zM1900 400h100v100h-100z%22%2F%3E%3Cpath fill=%22%236565654b%22 d=%22M0 500h100v100H0z%22%2F%3E%3Cpath fill=%22none%22 d=%22M100 500h100v100H100zM200 500h100v100H200zM300 500h100v100H300zM400 500h100v100H400zM500 500h100v100H500zM600 500h100v100H600z%22%2F%3E%3Cpath fill=%22%236565656a%22 d=%22M700 500h100v100H700z%22%2F%3E%3Cpath fill=%22%2365656559%22 d=%22M800 500h100v100H800z%22%2F%3E%3Cpath fill=%22%2365656507%22 d=%22M900 500h100v100H900z%22%2F%3E%3Cpath fill=%22%2365656505%22 d=%22M1000 500h100v100h-100z%22%2F%3E%3Cpath fill=%22none%22 d=%22M1100 500h100v100h-100z%22%2F%3E%3Cpath fill=%22%2365656586%22 d=%22M1200 500h100v100h-100z%22%2F%3E%3Cpath fill=%22%2365656577%22 d=%22M1300 500h100v100h-100z%22%2F%3E%3Cpath fill=%22none%22 d=%22M1400 500h100v100h-100z%22%2F%3E%3Cpath fill=%22%2365656532%22 d=%22M1500 500h100v100h-100z%22%2F%3E%3Cpath fill=%22none%22 d=%22M1600 500h100v100h-100z%22%2F%3E%3Cpath fill=%22%2365656571%22 d=%22M1700 500h100v100h-100z%22%2F%3E%3Cpath fill=%22%2365656526%22 d=%22M1800 500h100v100h-100z%22%2F%3E%3Cpath fill=%22none%22 d=%22M1900 500h100v100h-100zM0 600h100v100H0zM100 600h100v100H100z%22%2F%3E%3Cpath fill=%22%2365656587%22 d=%22M200 600h100v100H200z%22%2F%3E%3Cpath fill=%22none%22 d=%22M300 600h100v100H300z%22%2F%3E%3Cpath fill=%22%2365656574%22 d=%22M400 600h100v100H400z%22%2F%3E%3Cpath fill=%22%2365656543%22 d=%22M500 600h100v100H500z%22%2F%3E%3Cpath fill=%22%2365656528%22 d=%22M600 600h100v100H600z%22%2F%3E%3Cpath fill=%22none%22 d=%22M700 600h100v100H700zM800 600h100v100H800zM900 600h100v100H900zM1000 600h100v100h-100zM1100 600h100v100h-100z%22%2F%3E%3Cpath fill=%22%2365656502%22 d=%22M1200 600h100v100h-100z%22%2F%3E%3Cpath fill=%22none%22 d=%22M1300 600h100v100h-100zM1400 600h100v100h-100zM1500 600h100v100h-100z%22%2F%3E%3Cpath fill=%22%236565656c%22 d=%22M1600 600h100v100h-100z%22%2F%3E%3Cpath fill=%22none%22 d=%22M1700 600h100v100h-100zM1800 600h100v100h-100z%22%2F%3E%3Cpath fill=%22%236565653d%22 d=%22M1900 600h100v100h-100z%22%2F%3E%3Cpath fill=%22none%22 d=%22M0 700h100v100H0zM100 700h100v100H100z%22%2F%3E%3Cpath fill=%22%236565655b%22 d=%22M200 700h100v100H200z%22%2F%3E%3Cpath fill=%22none%22 d=%22M300 700h100v100H300z%22%2F%3E%3Cpath fill=%22%2365656551%22 d=%22M400 700h100v100H400z%22%2F%3E%3Cpath fill=%22none%22 d=%22M500 700h100v100H500zM600 700h100v100H600zM700 700h100v100H700z%22%2F%3E%3Cpath fill=%22%2365656539%22 d=%22M800 700h100v100H800z%22%2F%3E%3Cpath fill=%22none%22 d=%22M900 700h100v100H900zM1000 700h100v100h-100zM1100 700h100v100h-100z%22%2F%3E%3Cpath fill=%22%2365656543%22 d=%22M1200 700h100v100h-100z%22%2F%3E%3Cpath fill=%22%2365656555%22 d=%22M1300 700h100v100h-100z%22%2F%3E%3Cpath fill=%22%2365656541%22 d=%22M1400 700h100v100h-100z%22%2F%3E%3Cpath fill=%22%2365656509%22 d=%22M1500 700h100v100h-100z%22%2F%3E%3Cpath fill=%22none%22 d=%22M1600 700h100v100h-100z%22%2F%3E%3Cpath fill=%22%2365656554%22 d=%22M1700 700h100v100h-100z%22%2F%3E%3Cpath fill=%22none%22 d=%22M1800 700h100v100h-100z%22%2F%3E%3Cpath fill=%22%2365656565%22 d=%22M1900 700h100v100h-100z%22%2F%3E%3Cpath fill=%22%236565654d%22 d=%22M0 800h100v100H0z%22%2F%3E%3Cpath fill=%22none%22 d=%22M100 800h100v100H100zM200 800h100v100H200zM300 800h100v100H300zM400 800h100v100H400zM500 800h100v100H500zM600 800h100v100H600zM700 800h100v100H700z%22%2F%3E%3Cpath fill=%22%2365656570%22 d=%22M800 800h100v100H800z%22%2F%3E%3Cpath fill=%22none%22 d=%22M900 800h100v100H900zM1000 800h100v100h-100zM1100 800h100v100h-100zM1200 800h100v100h-100z%22%2F%3E%3Cpath fill=%22%2365656555%22 d=%22M1300 800h100v100h-100z%22%2F%3E%3Cpath fill=%22none%22 d=%22M1400 800h100v100h-100zM1500 800h100v100h-100zM1600 800h100v100h-100z%22%2F%3E%3Cpath fill=%22%236565654b%22 d=%22M1700 800h100v100h-100z%22%2F%3E%3Cpath fill=%22none%22 d=%22M1800 800h100v100h-100zM1900 800h100v100h-100zM0 900h100v100H0zM100 900h100v100H100zM200 900h100v100H200zM300 900h100v100H300zM400 900h100v100H400zM500 900h100v100H500zM600 900h100v100H600zM700 900h100v100H700zM800 900h100v100H800z%22%2F%3E%3Cpath fill=%22%236565656e%22 d=%22M900 900h100v100H900z%22%2F%3E%3Cpath fill=%22%2365656577%22 d=%22M1000 900h100v100h-100z%22%2F%3E%3Cpath fill=%22none%22 d=%22M1100 900h100v100h-100z%22%2F%3E%3Cpath fill=%22%236565651c%22 d=%22M1200 900h100v100h-100z%22%2F%3E%3Cpath fill=%22none%22 d=%22M1300 900h100v100h-100zM1400 900h100v100h-100zM1500 900h100v100h-100zM1600 900h100v100h-100zM1700 900h100v100h-100z%22%2F%3E%3Cpath fill=%22%2365656516%22 d=%22M1800 900h100v100h-100z%22%2F%3E%3Cpath fill=%22none%22 d=%22M1900 900h100v100h-100zM0 1000h100v100H0z%22%2F%3E%3Cpath fill=%22%2365656576%22 d=%22M100 1000h100v100H100z%22%2F%3E%3Cpath fill=%22none%22 d=%22M200 1000h100v100H200zM300 1000h100v100H300zM400 1000h100v100H400zM500 1000h100v100H500z%22%2F%3E%3Cpath fill=%22%2365656555%22 d=%22M600 1000h100v100H600z%22%2F%3E%3Cpath fill=%22none%22 d=%22M700 1000h100v100H700zM800 1000h100v100H800z%22%2F%3E%3Cpath fill=%22%236565658c%22 d=%22M900 1000h100v100H900z%22%2F%3E%3Cpath fill=%22none%22 d=%22M1000 1000h100v100h-100zM1100 1000h100v100h-100zM1200 1000h100v100h-100zM1300 1000h100v100h-100zM1400 1000h100v100h-100z%22%2F%3E%3Cpath fill=%22%2365656549%22 d=%22M1500 1000h100v100h-100z%22%2F%3E%3Cpath fill=%22none%22 d=%22M1600 1000h100v100h-100zM1700 1000h100v100h-100z%22%2F%3E%3Cpath fill=%22%2365656553%22 d=%22M1800 1000h100v100h-100z%22%2F%3E%3Cpath fill=%22%2365656516%22 d=%22M1900 1000h100v100h-100z%22%2F%3E%3Cpath fill=%22none%22 d=%22M0 1100h100v100H0zM100 1100h100v100H100zM200 1100h100v100H200z%22%2F%3E%3Cpath fill=%22%236565657b%22 d=%22M300 1100h100v100H300z%22%2F%3E%3Cpath fill=%22%2365656556%22 d=%22M400 1100h100v100H400z%22%2F%3E%3Cpath fill=%22%2365656569%22 d=%22M500 1100h100v100H500z%22%2F%3E%3Cpath fill=%22%236565654a%22 d=%22M600 1100h100v100H600z%22%2F%3E%3Cpath fill=%22none%22 d=%22M700 1100h100v100H700z%22%2F%3E%3Cpath fill=%22%2365656503%22 d=%22M800 1100h100v100H800z%22%2F%3E%3Cpath fill=%22none%22 d=%22M900 1100h100v100H900zM1000 1100h100v100h-100zM1100 1100h100v100h-100zM1200 1100h100v100h-100zM1300 1100h100v100h-100zM1400 1100h100v100h-100z%22%2F%3E%3Cpath fill=%22%2365656518%22 d=%22M1500 1100h100v100h-100z%22%2F%3E%3Cpath fill=%22none%22 d=%22M1600 1100h100v100h-100zM1700 1100h100v100h-100z%22%2F%3E%3Cpath fill=%22%2365656564%22 d=%22M1800 1100h100v100h-100z%22%2F%3E%3Cpath fill=%22none%22 d=%22M1900 1100h100v100h-100zM0 1200h100v100H0zM100 1200h100v100H100zM200 1200h100v100H200zM300 1200h100v100H300zM400 1200h100v100H400zM500 1200h100v100H500z%22%2F%3E%3Cpath fill=%22%236565650a%22 d=%22M600 1200h100v100H600z%22%2F%3E%3Cpath fill=%22%2365656565%22 d=%22M700 1200h100v100H700z%22%2F%3E%3Cpath fill=%22none%22 d=%22M800 1200h100v100H800zM900 1200h100v100H900zM1000 1200h100v100h-100z%22%2F%3E%3Cpath fill=%22%2365656544%22 d=%22M1100 1200h100v100h-100z%22%2F%3E%3Cpath fill=%22none%22 d=%22M1200 1200h100v100h-100zM1300 1200h100v100h-100z%22%2F%3E%3Cpath fill=%22%2365656568%22 d=%22M1400 1200h100v100h-100z%22%2F%3E%3Cpath fill=%22none%22 d=%22M1500 1200h100v100h-100zM1600 1200h100v100h-100zM1700 1200h100v100h-100z%22%2F%3E%3Cpath fill=%22%2365656563%22 d=%22M1800 1200h100v100h-100z%22%2F%3E%3Cpath fill=%22none%22 d=%22M1900 1200h100v100h-100z%22%2F%3E%3Cpath fill=%22%2365656565%22 d=%22M0 1300h100v100H0z%22%2F%3E%3Cpath fill=%22none%22 d=%22M100 1300h100v100H100zM200 1300h100v100H200zM300 1300h100v100H300zM400 1300h100v100H400z%22%2F%3E%3Cpath fill=%22%2365656545%22 d=%22M500 1300h100v100H500z%22%2F%3E%3Cpath fill=%22%2365656549%22 d=%22M600 1300h100v100H600z%22%2F%3E%3Cpath fill=%22%236565651d%22 d=%22M700 1300h100v100H700z%22%2F%3E%3Cpath fill=%22%2365656585%22 d=%22M800 1300h100v100H800z%22%2F%3E%3Cpath fill=%22%2365656580%22 d=%22M900 1300h100v100H900z%22%2F%3E%3Cpath fill=%22none%22 d=%22M1000 1300h100v100h-100zM1100 1300h100v100h-100zM1200 1300h100v100h-100z%22%2F%3E%3Cpath fill=%22%236565652c%22 d=%22M1300 1300h100v100h-100z%22%2F%3E%3Cpath fill=%22none%22 d=%22M1400 1300h100v100h-100zM1500 1300h100v100h-100zM1600 1300h100v100h-100z%22%2F%3E%3Cpath fill=%22%2365656540%22 d=%22M1700 1300h100v100h-100z%22%2F%3E%3Cpath fill=%22none%22 d=%22M1800 1300h100v100h-100zM1900 1300h100v100h-100z%22%2F%3E%3C%2Fg%3E%3Cdefs%3E%3CradialGradient id=%22a%22%3E%3Cstop offset=%220%22 stop-color=%22%23fff%22 stop-opacity=%22.838%22%2F%3E%3Cstop offset=%2286.5%25%22 stop-color=%22%23fff%22 stop-opacity=%220%22%2F%3E%3C%2FradialGradient%3E%3C%2Fdefs%3E%3C%2Fsvg%3E");
+    }
+  }
+}

package/css/components/rating.css

@@ -0,0 +1,89 @@
+@layer components {
+  /* Base pf-rating styles */
+  .pf-rating {
+    display: inline-flex;
+    align-items: stretch;
+
+    & input {
+      appearance: none;
+      position: absolute;
+      inset-inline-start: 9999px;
+
+      &[disabled] {
+        display: none;
+      }
+    }
+  }
+
+  /* pf-rating on state */
+  .pf-rating-on {
+    @apply text-yellow-400;
+  }
+
+  /* pf-rating off state */
+  .pf-rating-off {
+    @apply text-muted-foreground;
+  }
+
+  /* pf-rating label base styles */
+  .pf-rating-label {
+    display: inline-flex !important;
+    align-items: center;
+
+    & .pf-rating-on {
+      display: none !important;
+    }
+
+    & .pf-rating-off {
+      display: inline-flex !important;
+    }
+  }
+
+  /* Hover and checked states for pf-rating label */
+  .pf-rating:hover label.pf-rating-label,
+  label.pf-rating-label,
+  label.pf-rating-label.checked,
+  div.pf-rating-label.checked {
+    & .pf-rating-on {
+      display: inline-flex !important;
+    }
+
+    & .pf-rating-off {
+      display: none !important;
+    }
+  }
+
+  /* Sibling hover and checked states */
+  label.pf-rating-label:hover ~ label.pf-rating-label,
+  .pf-rating-input:checked ~ .pf-rating-label {
+    & .pf-rating-on {
+      display: none !important;
+    }
+
+    & .pf-rating-off {
+      display: inline-flex !important;
+    }
+  }
+
+  /* Indeterminate pf-rating label state */
+  .pf-rating-label.indeterminate {
+    position: relative;
+
+    & .pf-rating-on {
+      display: inline-flex !important;
+      position: absolute;
+      z-index: 1;
+      overflow: hidden;
+      inset-inline-start: 0;
+    }
+
+    & .pf-rating-off {
+      display: inline-flex !important;
+    }
+  }
+
+  /* Cursor for label */
+  label.pf-rating-label {
+    cursor: pointer;
+  }
+}