pelatform-ui 1.2.0 → 1.2.2

package/README.md

@@ -1,6 +1,9 @@
 # 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.
+[![Version](https://img.shields.io/npm/v/pelatform-ui.svg)](https://www.npmjs.com/package/pelatform-ui)
+[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)
+
+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.
 
 ## Installation
 
@@ -26,22 +29,20 @@ import "pelatform-ui/css";
 
 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.
+- **@pelatform/ui.components** - All UI components (172 components)
+  - Animation (18 components)
+  - Base (77 headless components)
+  - Radix (77 styled components)
+- **@pelatform/ui.hook** - React hooks (18 hooks)
+- **Custom components** - Ready-to-use layouts, navigation, providers, and utilities
 
 ## Import Paths
 
 ```typescript
 // Main exports (utilities, types, icons)
-import { cn, cva, googleTrackEvent } from "pelatform-ui";
+import { cn, cva } from "pelatform-ui";
 
-// Hooks
+// React hooks
 import { useHydrated, useMobile, useMediaQuery } from "pelatform-ui/hooks";
 
 // Animation components
@@ -51,16 +52,13 @@ import {
   Marquee,
 } from "pelatform-ui/animation";
 
-// ARIA components
-import { DateField, ShowMore } from "pelatform-ui/aria";
-
-// Base components
+// Base headless components (full styling control)
 import { Button, Input, Select } from "pelatform-ui/base";
 
-// Default styled components
-import { Card, DataGrid, Kanban } from "pelatform-ui/default";
+// Radix styled components (pre-styled)
+import { Card, DataGrid, Calendar } from "pelatform-ui/radix";
 
-// All components (base + default + custom)
+// Custom Pelatform components
 import { SiteHeader, SiteFooter, CommandMenu } from "pelatform-ui/components";
 
 // Styles
@@ -70,7 +68,7 @@ import "pelatform-ui/css";
 ## Quick Start
 
 ```typescript
-import { Button, Card, Input } from "pelatform-ui/default";
+import { Card, Button, Input } from "pelatform-ui/radix";
 import { useHydrated } from "pelatform-ui/hooks";
 import "pelatform-ui/css";
 
@@ -88,7 +86,7 @@ function App() {
 }
 ```
 
-## Components
+## Custom Components
 
 ### Layout Components
 
@@ -113,9 +111,6 @@ function App() {
 ### Feedback Components
 
 - **Alert** - Alert notifications
-- **AlertToast** - Toast notifications
-- **AlertNotification** - Notification alerts
-- **AlertComingsoon** - Coming soon alert
 - **Dialog** - Modal dialog
 - **ScreenLoader** - Loading screen
 
@@ -127,20 +122,18 @@ function App() {
 - **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)
+- **ThemeProvider** - Theme management (next-themes)
 
 ### MDX Components
 
@@ -154,7 +147,6 @@ function App() {
 ### Utility Components
 
 - **Fonts** - Font configuration
-- **RecaptchaPopover** - reCAPTCHA integration
 - **Shared** - Shared utilities
 
 ## Theme Management
@@ -178,23 +170,48 @@ function App({ children }) {
 
 ## Hooks
 
-15 production-ready hooks for common use cases:
+18 production-ready hooks for common use cases:
+
+### Analytics & Tracking
 
 - **useAnalytics** - CRUD operation tracking
-- **useBodyClass** - Body class management
-- **useCopyToClipboard** - Clipboard operations
-- **useFileUpload** - File upload with drag & drop
-- **useHydrated** - SSR-safe hydration detection
+
+### Responsive Design
+
 - **useMediaQuery** - Media query tracking
+- **useIsMobile** - Mobile detection
+- **useViewport** - Viewport dimensions
+- **useIntersectionObserver** - Intersection observation
+
+### Form & Input Management
+
+- **useFileUpload** - File upload with drag & drop
+- **useSliderInput** - Slider input management
+- **useCopyToClipboard** - Clipboard operations
+
+### Navigation & Scrolling
+
 - **useMenu** - Menu navigation state
-- **useMobile** - Mobile detection
-- **useMounted** - Mount state detection
+- **useScrollPosition** - Scroll tracking
+
+### DOM Management
+
+- **useBodyClass** - Body class management
 - **useMutationObserver** - DOM mutation observation
+
+### Platform Detection
+
+- **useIsMac** - macOS detection
+
+### Security
+
 - **useRecaptchaV2** - reCAPTCHA integration
+
+### Utilities
+
+- **useMounted** - Mount state detection
+- **useHydrated** - SSR-safe hydration detection
 - **useRemoveGAParams** - GA parameter cleanup
-- **useScrollPosition** - Scroll tracking
-- **useSliderInput** - Slider input management
-- **useViewport** - Viewport dimensions
 
 ## Styling
 
@@ -218,8 +235,8 @@ Full TypeScript support with comprehensive type definitions for all components a
 
 ## Features
 
-- 100+ total components across all packages
-- 15 React hooks for common use cases
+- 172+ total components across all packages
+- 18 React hooks for common use cases
 - Full dark mode support
 - Responsive design
 - Accessibility (WCAG 2.1)
@@ -233,9 +250,10 @@ Full TypeScript support with comprehensive type definitions for all components a
 
 ### Production Dependencies
 
-- `@radix-ui/react-dialog`
-- `radix-ui`
-- `tw-animate-css`
+- `class-variance-authority` - Component variants
+- `clsx` - Conditional className
+- `tailwind-merge` - Tailwind class merging
+- `tw-animate-css` - Animation utilities
 
 ### Peer Dependencies
 

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;
+  }
+}