@bloomneo/uikit 1.5.0

package/bin/templates/spa/docs/UIKIT_THEME_GUIDE.md

@@ -0,0 +1,359 @@
+# UIKit Theme Guide
+
+**Transform your UIKit applications with beautiful, brand-consistent themes that work seamlessly across all components and layouts.**
+
+## 🎨 Understanding UIKit Theming
+
+UIKit is built on **ShadCN components** and **Tailwind CSS v4**, enhanced with a powerful semantic color system that automatically adapts to your brand. Instead of hardcoded colors like `bg-white` or `text-black`, UIKit uses semantic classes like `bg-background`, `text-foreground`, and `border-border` that intelligently change based on your selected theme.
+
+**How it works:**
+- **Semantic colors** automatically map to your theme's values
+- **29 color variables** control the entire design system (backgrounds, text, borders, charts, sidebar)
+- **Light/dark modes** are handled automatically with proper contrast ratios
+- **All components** inherit your theme without any code changes
+
+**The result:** Change one theme file, transform your entire application instantly.
+
+## 🎯 How Semantic Colors Work
+
+### Primary Color Impact
+When you set `primary: '#3B82F6'` (blue) in your theme, it automatically affects these classes across your entire application:
+
+```jsx
+// Button components
+<Button className="bg-primary text-primary-foreground">  // Blue button with white text
+<Button variant="outline" className="border-primary text-primary">  // Blue outline with blue text
+
+// Form elements
+<Input className="focus:ring-primary" />  // Blue focus ring
+<Checkbox className="data-[state=checked]:bg-primary" />  // Blue when checked
+
+// Links and accents
+<a className="text-primary hover:text-primary/80">Link</a>  // Blue link
+<Badge className="bg-primary text-primary-foreground">New</Badge>  // Blue badge
+
+// Charts and data visualization
+<BarChart colors={['var(--primary)']} />  // Blue charts
+```
+
+### Core Color Relationships
+
+**Background Colors Hierarchy:**
+```jsx
+// Page structure
+<div className="bg-background">           // Main page (white/dark)
+  <Card className="bg-card">              // Elevated content (white/slightly lighter)
+    <div className="bg-muted">            // Subtle sections (light gray/darker)
+      <div className="bg-accent">         // Interactive areas (very light/subtle)
+```
+
+**Text Color Hierarchy:**
+```jsx
+<h1 className="text-foreground">         // Primary headings (dark/light)
+<p className="text-muted-foreground">    // Secondary text (gray)
+<span className="text-primary">          // Brand/link text (your brand color)
+```
+
+**Border System:**
+```jsx
+<div className="border-border">          // Standard borders (light gray)
+<input className="border-input">         // Form borders (same as border)
+<div className="ring-ring">              // Focus rings (usually primary color)
+```
+
+## 🎨 Color Selection Guide
+
+### ✅ **Good Color Choices**
+
+**Primary Color (Your Brand):**
+- Use your actual brand color
+- Ensure good contrast with white text
+- Test in both light and dark modes
+```javascript
+// Good examples
+primary: '#1E40AF',  // Professional blue
+primary: '#059669',  // Trust green
+primary: '#7C3AED',  // Creative purple
+```
+
+**Background Colors:**
+- Light mode: Pure white or very light grays
+- Dark mode: True darks, avoid pure black
+```javascript
+// Light mode
+background: '#FFFFFF',     // Pure white
+card: '#FFFFFF',          // Same as background for clean look
+muted: '#F8FAFC',         // Very light gray for subtle sections
+
+// Dark mode
+background: '#0F172A',     // Dark blue-gray (not pure black)
+card: '#1E293B',          // Slightly lighter than background
+muted: '#334155',         // Lighter gray for contrast
+```
+
+### ❌ **Avoid These Mistakes**
+
+**Don't use low-contrast colors:**
+```javascript
+// ❌ Bad - poor readability
+primary: '#FFEB3B',           // Yellow on white background
+foreground: '#9CA3AF',        // Light gray text on white
+
+// ✅ Good - high contrast
+primary: '#1D4ED8',           // Dark blue
+foreground: '#1F2937',        // Dark gray/black
+```
+
+**Don't ignore dark mode:**
+```javascript
+// ❌ Bad - same colors for both modes
+light: { primary: '#1E40AF' },
+dark: { primary: '#1E40AF' },   // Too dark for dark backgrounds
+
+// ✅ Good - adjusted for dark mode
+light: { primary: '#1E40AF' },
+dark: { primary: '#60A5FA' },   // Lighter version for dark mode
+```
+
+**Don't use pure black/white in dark mode:**
+```javascript
+// ❌ Bad - harsh contrast
+dark: {
+  background: '#000000',      // Pure black is too harsh
+  foreground: '#FFFFFF'       // Pure white is too bright
+}
+
+// ✅ Good - softer contrast
+dark: {
+  background: '#0F172A',      // Dark blue-gray
+  foreground: '#F8FAFC'       // Off-white
+}
+```
+
+## 🚀 Why Custom Themes?
+
+Go beyond UIKit's 5 built-in themes and create professional design systems that:
+
+- **Match your brand identity** - Use your exact brand colors and design tokens
+- **Work everywhere** - Automatic application across all 40+ components and 5 layouts
+- **Support both modes** - One theme definition, light/dark modes handled automatically
+- **Maintain accessibility** - Built-in contrast and readability optimization
+- **Scale seamlessly** - From simple apps to enterprise applications
+
+**Best part?** You can create and deploy a complete custom theme in under 5 minutes.
+
+## 🚀 Quick Start (Recommended)
+
+### Step 1: Generate Your Theme
+```bash
+# Create a new custom theme automatically
+npx uikit generate theme brand
+
+# This automatically:
+# ✅ Creates theme file with all required colors
+# ✅ Updates your main.tsx with the new theme
+# ✅ Adds proper imports and configuration
+# ✅ Works with SPA, Multi, and FBCA projects
+```
+
+### Step 2: Customize Your Colors
+Edit the generated theme file to match your brand:
+
+```javascript
+// src/themes/presets/theme-brand.js (or src/web/themes/presets/ for FBCA)
+const themeBrand = {
+  id: 'brand',
+  name: 'Brand Theme',
+
+  light: {
+    // Main brand color - change this to your brand color
+    primary: '#3B82F6',              // Your brand blue
+    primaryForeground: '#FFFFFF',
+
+    // Backgrounds
+    background: '#FFFFFF',           // Page background
+    card: '#FFFFFF',                 // Card backgrounds
+
+    // Text colors
+    foreground: '#1F2937',           // Main text
+    mutedForeground: '#6B7280',      // Secondary text
+
+    // Other colors (can keep as-is initially)
+    secondary: '#F3F4F6',
+    secondaryForeground: '#374151',
+    accent: '#F3F4F6',
+    accentForeground: '#374151',
+    destructive: '#EF4444',
+    destructiveForeground: '#FFFFFF',
+    border: '#E5E7EB',
+    input: '#E5E7EB',
+    ring: '#3B82F6',
+
+    // ... more colors (see complete reference below)
+  },
+
+  dark: {
+    // Dark mode versions of above colors
+    primary: '#60A5FA',              // Lighter version for dark mode
+    primaryForeground: '#1E293B',
+    background: '#0F172A',
+    foreground: '#F8FAFC',
+    // ... complete dark palette
+  }
+};
+
+export default themeBrand;
+```
+
+### Step 3: Bundle and Use
+```bash
+# Generate CSS from your theme
+npx uikit bundle
+
+# Your theme is now ready to use!
+# It's already configured in your main.tsx
+```
+
+---
+
+## 🔧 Development Workflow
+
+### Watch Mode for Live Updates
+```bash
+# Start theme development with live reload
+npx uikit bundle --watch
+
+# In another terminal, start your app
+npm run dev
+
+# Now edit your theme file and see changes instantly!
+```
+
+### Testing Your Theme
+1. **Switch between light/dark modes** - Ensure both look good
+2. **Test different layouts** - AdminLayout, PageLayout, AuthLayout
+3. **Check form components** - Buttons, inputs, alerts
+4. **Verify accessibility** - Good contrast ratios
+
+---
+
+## 📋 Complete Color Reference
+
+### Core Colors (Required)
+```javascript
+light: {
+  // Backgrounds
+  background: '#FFFFFF',           // Main page background
+  foreground: '#1F2937',           // Primary text
+  card: '#FFFFFF',                 // Card backgrounds
+  cardForeground: '#1F2937',       // Text on cards
+  popover: '#FFFFFF',              // Dropdown backgrounds
+  popoverForeground: '#1F2937',    // Text in dropdowns
+
+  // Brand & Actions
+  primary: '#3B82F6',              // Your brand color
+  primaryForeground: '#FFFFFF',    // Text on brand elements
+  secondary: '#F3F4F6',            // Secondary buttons
+  secondaryForeground: '#374151',  // Text on secondary elements
+  destructive: '#EF4444',          // Error/danger actions
+  destructiveForeground: '#FFFFFF', // Text on error elements
+
+  // Supporting Colors
+  muted: '#F9FAFB',               // Subtle backgrounds
+  mutedForeground: '#6B7280',     // Secondary text
+  accent: '#F3F4F6',              // Accent elements
+  accentForeground: '#374151',    // Text on accents
+
+  // Borders & Focus
+  border: '#E5E7EB',              // Standard borders
+  input: '#E5E7EB',               // Input borders
+  ring: '#3B82F6',                // Focus rings
+
+  // Chart Colors (for data visualization)
+  chart1: '#3B82F6',              // Primary data
+  chart2: '#10B981',              // Secondary data
+  chart3: '#F59E0B',              // Tertiary data
+  chart4: '#EF4444',              // Warning data
+  chart5: '#8B5CF6',              // Additional data
+
+  // Sidebar Colors (for AdminLayout)
+  sidebar: '#F8FAFC',
+  sidebarForeground: '#334155',
+  sidebarPrimary: '#3B82F6',
+  sidebarPrimaryForeground: '#FFFFFF',
+  sidebarAccent: '#F1F5F9',
+  sidebarAccentForeground: '#334155',
+  sidebarBorder: '#E2E8F0',
+  sidebarRing: '#3B82F6',
+}
+```
+
+### Dark Mode Colors
+```javascript
+dark: {
+  // Invert backgrounds, adjust brand colors for dark mode
+  background: '#0F172A',
+  foreground: '#F8FAFC',
+  primary: '#60A5FA',              // Lighter version of brand color
+  // ... all other colors adjusted for dark mode
+}
+```
+
+---
+
+## 💡 Quick Tips
+
+### Color Selection
+- **Start simple**: Focus on primary, background, and foreground colors first
+- **Brand first**: Use your existing brand colors as the foundation
+- **Test contrast**: Ensure text is readable (use tools like [contrast-ratio.com](https://contrast-ratio.com))
+- **Dark mode**: Make colors lighter/softer for dark backgrounds
+
+### Common Patterns
+```javascript
+// Corporate/Professional
+primary: '#1E40AF',    // Professional blue
+secondary: '#F1F5F9',  // Light gray
+
+// Creative/Modern
+primary: '#8B5CF6',    // Purple
+accent: '#F59E0B',     // Orange
+
+// E-commerce
+primary: '#059669',    // Trust green
+destructive: '#DC2626', // Clear red
+```
+
+### Project Structure
+- **SPA/Multi projects**: `src/themes/presets/theme-{name}.js`
+- **FBCA projects**: `src/web/themes/presets/theme-{name}.js`
+- **CSS output**: Auto-generated in `globals.css`
+
+---
+
+## 🛠️ CLI Commands
+
+```bash
+# Theme Management
+npx uikit generate theme <name>    # Create new theme
+npx uikit bundle                   # Generate CSS
+npx uikit bundle --watch           # Development mode
+
+# Example Workflow
+npx uikit generate theme brand     # 1. Generate
+npx uikit bundle --watch          # 2. Start development
+# Edit theme file                 # 3. Customize colors
+# See changes live in browser     # 4. Iterate
+```
+
+---
+
+## 🎯 Next Steps
+
+1. **Generate your theme**: `npx uikit generate theme brand`
+2. **Customize primary color**: Edit the `primary` value to match your brand
+3. **Test in both modes**: Switch between light and dark mode
+4. **Refine gradually**: Adjust other colors as needed
+5. **Share and iterate**: Get feedback and refine your theme
+
+**Happy theming!** ✨

package/bin/templates/spa/hooks/useSEO.ts.template

@@ -0,0 +1,38 @@
+/**
+ * Simple SEO Hook
+ * Manages page title and meta description using native document API
+ */
+
+import { useEffect } from 'react';
+
+interface SEOOptions {
+  title?: string;
+  description?: string;
+}
+
+export const useSEO = ({
+  title = 'UIKit SPA Demo',
+  description = 'Professional React components with stunning themes and SPA routing'
+}: SEOOptions = {}) => {
+  useEffect(() => {
+    // Set page title
+    document.title = title;
+
+    // Set meta description
+    let meta = document.querySelector('meta[name="description"]');
+    if (!meta) {
+      meta = document.createElement('meta');
+      meta.setAttribute('name', 'description');
+      document.head.appendChild(meta);
+    }
+    meta.setAttribute('content', description);
+
+    // Set viewport if not already present
+    if (!document.querySelector('meta[name="viewport"]')) {
+      const viewport = document.createElement('meta');
+      viewport.setAttribute('name', 'viewport');
+      viewport.setAttribute('content', 'width=device-width, initial-scale=1.0');
+      document.head.appendChild(viewport);
+    }
+  }, [title, description]);
+};

package/bin/templates/spa/index.html.template

@@ -0,0 +1,58 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>UIKit SPA Template</title>
+    
+    <!-- SEO Optimizations -->
+    <meta name="description" content="Professional React UI components with beautiful themes and OKLCH color science. Built with @bloomneo/uikit.">
+    <meta name="keywords" content="react, ui components, themes, design system, tailwind css, typescript">
+    <meta name="author" content="@bloomneo/uikit">
+    
+    <!-- Open Graph -->
+    <meta property="og:type" content="website">
+    <meta property="og:title" content="UIKit Single-Page App">
+    <meta property="og:description" content="Professional React UI components with beautiful themes">
+    <meta property="og:site_name" content="@bloomneo/uikit">
+    
+    <!-- Twitter Cards -->
+    <meta name="twitter:card" content="summary_large_image">
+    <meta name="twitter:title" content="UIKit Single-Page App">
+    <meta name="twitter:description" content="Professional React UI components with beautiful themes">
+    
+    <!-- Performance -->
+    <meta name="robots" content="index,follow">
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="dns-prefetch" href="https://fonts.gstatic.com">
+    
+    <!-- Theme color -->
+    <meta name="theme-color" content="#10B981">
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+    
+    <!-- Structured Data -->
+    <script type="application/ld+json">
+    {
+      "@context": "https://schema.org",
+      "@type": "WebApplication",
+      "name": "UIKit Single-Page App",
+      "description": "Professional React UI components with beautiful themes",
+      "applicationCategory": "DesignApplication",
+      "operatingSystem": "Web",
+      "offers": {
+        "@type": "Offer",
+        "price": "0",
+        "priceCurrency": "USD"
+      },
+      "author": {
+        "@type": "Organization",
+        "name": "@bloomneo/uikit"
+      }
+    }
+    </script>
+  </body>
+</html>

package/bin/templates/spa/package.json.template

@@ -0,0 +1,35 @@
+{
+  "name": "{{PROJECT_NAME}}",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc && vite build",
+    "preview": "vite preview",
+    "bundle": "npx uikit bundle",
+    "serve": "npx uikit serve",
+    "deploy": "npx uikit deploy",
+    "deploy:gh": "npm run build && gh-pages -d dist",
+    "prerender": "npx uikit prerender",
+    "optimize": "npx uikit optimize"
+  },
+  "dependencies": {
+    "@tailwindcss/vite": "^4.1.13",
+    "@bloomneo/uikit": "latest",
+    "react": "^19.1.0",
+    "react-dom": "^19.1.0",
+    "react-router-dom": "^7.0.0",
+    "lucide-react": "latest"
+  },
+  "devDependencies": {
+    "@types/node": "^24.0.0",
+    "@types/react": "^19.1.0",
+    "@types/react-dom": "^19.1.0",
+    "@vitejs/plugin-react": "^4.2.1",
+    "typescript": "^5.8.0",
+    "vite": "^7.0.0",
+    "tailwindcss": "^4.1.8",
+    "gh-pages": "^6.3.0"
+  }
+}

package/bin/templates/spa/public/favicon.svg

@@ -0,0 +1,15 @@
+<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <rect width="32" height="32" rx="8" fill="url(#rainbowGradient)"/>
+  <text x="16" y="20" font-family="Inter, system-ui, sans-serif" font-size="12" font-weight="900" text-anchor="middle" fill="black" letter-spacing="1px">UI</text>
+  <defs>
+    <linearGradient id="rainbowGradient" x1="0%" y1="0%" x2="100%" y2="100%">
+      <stop offset="0%" style="stop-color:#FF6B9D;stop-opacity:1" />
+      <stop offset="16%" style="stop-color:#FF8A65;stop-opacity:1" />
+      <stop offset="32%" style="stop-color:#FFD54F;stop-opacity:1" />
+      <stop offset="48%" style="stop-color:#81C784;stop-opacity:1" />
+      <stop offset="64%" style="stop-color:#64B5F6;stop-opacity:1" />
+      <stop offset="80%" style="stop-color:#9575CD;stop-opacity:1" />
+      <stop offset="100%" style="stop-color:#F06292;stop-opacity:1" />
+    </linearGradient>
+  </defs>
+</svg>

package/bin/templates/spa/public/hero_spa.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="740.67538" height="473.94856" viewBox="0 0 740.67538 473.94856" xmlns:xlink="http://www.w3.org/1999/xlink" role="img" artist="Katerina Limpitsouni" source="https://undraw.co/"><path d="M341.17319,342.44851a122.0417,122.0417,0,0,1,10.10051-38.51722q2.27961-5.09249,5.01812-9.96076a.7438.7438,0,0,0-1.28353-.75026,123.72825,123.72825,0,0,0-13.7678,37.98231q-1.03367,5.58356-1.55378,11.24593c-.08811.95214,1.39893.94613,1.48648,0Z" transform="translate(-229.66231 -213.02572)" fill="#e6e6e6"/><circle cx="130.22983" cy="73.9144" r="9.4144" fill="#e6e6e6"/><path d="M342.13622,342.69855a79.17409,79.17409,0,0,1,6.55267-24.98792q1.47889-3.30372,3.25549-6.462a.48254.48254,0,0,0-.83269-.48673,80.26843,80.26843,0,0,0-8.93181,24.64089q-.67059,3.6223-1.008,7.29576c-.05716.6177.90755.6138.96435,0Z" transform="translate(-229.66231 -213.02572)" fill="#e6e6e6"/><circle cx="124.61776" cy="93.66195" r="6.10756" fill="#e6e6e6"/><path d="M340.91907,342.122a79.17418,79.17418,0,0,1-10.20241-23.73277q-.86592-3.51453-1.40763-7.09749a.48254.48254,0,0,0-.95593.12838,80.26861,80.26861,0,0,0,8.11306,24.92246q1.6992,3.26858,3.69253,6.37255c.33485.5222,1.09311-.07423.76038-.59313Z" transform="translate(-229.66231 -213.02572)" fill="#e6e6e6"/><circle cx="98.68311" cy="93.23322" r="6.10756" fill="#e6e6e6"/><path d="M322.16929,347.52572v-12a4.50508,4.50508,0,0,1,4.5-4.5h28a4.50508,4.50508,0,0,1,4.5,4.5v12a4.50508,4.50508,0,0,1-4.5,4.5h-28A4.50508,4.50508,0,0,1,322.16929,347.52572Z" transform="translate(-229.66231 -213.02572)" fill="#f2f2f2" style="isolation:isolate"/><path d="M353.66929,271.02572h-12a4.50508,4.50508,0,0,1-4.5-4.5v-49a4.50508,4.50508,0,0,1,4.5-4.5h12a4.50508,4.50508,0,0,1,4.5,4.5v49A4.50508,4.50508,0,0,1,353.66929,271.02572Z" transform="translate(-229.66231 -213.02572)" fill="#f2f2f2" style="isolation:isolate"/><rect x="108.00698" y="9.5" width="20" height="4" fill="#ccc"/><rect x="108.00698" y="40.5" width="20" height="4" fill="#ccc"/><path d="M383.66929,271.02572h-12a4.50508,4.50508,0,0,1-4.5-4.5v-49a4.50508,4.50508,0,0,1,4.5-4.5h12a4.50508,4.50508,0,0,1,4.5,4.5v49A4.50508,4.50508,0,0,1,383.66929,271.02572Z" transform="translate(-229.66231 -213.02572)" fill="#f2f2f2" style="isolation:isolate"/><rect x="138.00698" y="9.5" width="20" height="4" fill="#ccc"/><rect x="138.00698" y="40.5" width="20" height="4" fill="#ccc"/><path d="M413.66929,271.02572h-12a4.50508,4.50508,0,0,1-4.5-4.5v-49a4.50508,4.50508,0,0,1,4.5-4.5h12a4.50508,4.50508,0,0,1,4.5,4.5v49A4.50508,4.50508,0,0,1,413.66929,271.02572Z" transform="translate(-229.66231 -213.02572)" fill="#f2f2f2" style="isolation:isolate"/><rect x="168.00698" y="9.5" width="20" height="4" fill="#ccc"/><rect x="168.00698" y="40.5" width="20" height="4" fill="#ccc"/><path d="M429.66929,352.02572h-12a4.50508,4.50508,0,0,1-4.5-4.5v-49a4.50508,4.50508,0,0,1,4.5-4.5h12a4.50508,4.50508,0,0,1,4.5,4.5v49A4.50508,4.50508,0,0,1,429.66929,352.02572Z" transform="translate(-229.66231 -213.02572)" fill="#f2f2f2" style="isolation:isolate"/><rect x="184.00698" y="90.5" width="20" height="4" fill="#ccc"/><rect x="184.00698" y="121.5" width="20" height="4" fill="#ccc"/><path d="M459.66929,352.02572h-12a4.50508,4.50508,0,0,1-4.5-4.5v-49a4.50508,4.50508,0,0,1,4.5-4.5h12a4.50508,4.50508,0,0,1,4.5,4.5v49A4.50508,4.50508,0,0,1,459.66929,352.02572Z" transform="translate(-229.66231 -213.02572)" fill="#f2f2f2" style="isolation:isolate"/><rect x="214.00698" y="90.5" width="20" height="4" fill="#ccc"/><rect x="214.00698" y="121.5" width="20" height="4" fill="#ccc"/><path d="M489.66929,352.02572h-12a4.50508,4.50508,0,0,1-4.5-4.5v-49a4.50508,4.50508,0,0,1,4.5-4.5h12a4.50508,4.50508,0,0,1,4.5,4.5v49A4.50508,4.50508,0,0,1,489.66929,352.02572Z" transform="translate(-229.66231 -213.02572)" fill="#f2f2f2" style="isolation:isolate"/><rect x="244.00698" y="90.5" width="20" height="4" fill="#ccc"/><rect x="244.00698" y="121.5" width="20" height="4" fill="#ccc"/><path d="M350.66929,433.02572h-12a4.50508,4.50508,0,0,1-4.5-4.5v-49a4.50508,4.50508,0,0,1,4.5-4.5h12a4.50508,4.50508,0,0,1,4.5,4.5v49A4.50508,4.50508,0,0,1,350.66929,433.02572Z" transform="translate(-229.66231 -213.02572)" fill="#f2f2f2" style="isolation:isolate"/><rect x="105.00698" y="171.5" width="20" height="4" fill="#ccc"/><rect x="105.00698" y="202.5" width="20" height="4" fill="#ccc"/><path d="M380.66929,433.02572h-12a4.50508,4.50508,0,0,1-4.5-4.5v-49a4.50508,4.50508,0,0,1,4.5-4.5h12a4.50508,4.50508,0,0,1,4.5,4.5v49A4.50508,4.50508,0,0,1,380.66929,433.02572Z" transform="translate(-229.66231 -213.02572)" fill="#f2f2f2" style="isolation:isolate"/><rect x="135.00698" y="171.5" width="20" height="4" fill="#ccc"/><rect x="135.00698" y="202.5" width="20" height="4" fill="#ccc"/><path d="M410.66929,433.02572h-12a4.50508,4.50508,0,0,1-4.5-4.5v-49a4.50508,4.50508,0,0,1,4.5-4.5h12a4.50508,4.50508,0,0,1,4.5,4.5v49A4.50508,4.50508,0,0,1,410.66929,433.02572Z" transform="translate(-229.66231 -213.02572)" fill="#f2f2f2" style="isolation:isolate"/><rect x="165.00698" y="171.5" width="20" height="4" fill="#ccc"/><rect x="165.00698" y="202.5" width="20" height="4" fill="#ccc"/><path d="M443.66929,271.02572h-12a4.50508,4.50508,0,0,1-4.5-4.5v-49a4.50508,4.50508,0,0,1,4.5-4.5h12a4.50508,4.50508,0,0,1,4.5,4.5v49A4.50508,4.50508,0,0,1,443.66929,271.02572Z" transform="translate(-229.66231 -213.02572)" fill="#f2f2f2" style="isolation:isolate"/><rect x="198.00698" y="9.5" width="20" height="4" fill="#ccc"/><rect x="198.00698" y="40.5" width="20" height="4" fill="#ccc"/><path d="M473.66929,271.02572h-12a4.50508,4.50508,0,0,1-4.5-4.5v-49a4.50508,4.50508,0,0,1,4.5-4.5h12a4.50508,4.50508,0,0,1,4.5,4.5v49A4.50508,4.50508,0,0,1,473.66929,271.02572Z" transform="translate(-229.66231 -213.02572)" fill="#f2f2f2" style="isolation:isolate"/><rect x="228.00698" y="9.5" width="20" height="4" fill="#ccc"/><rect x="228.00698" y="40.5" width="20" height="4" fill="#ccc"/><path d="M503.66929,271.02572h-12a4.50508,4.50508,0,0,1-4.5-4.5v-49a4.50508,4.50508,0,0,1,4.5-4.5h12a4.50508,4.50508,0,0,1,4.5,4.5v49A4.50508,4.50508,0,0,1,503.66929,271.02572Z" transform="translate(-229.66231 -213.02572)" fill="#f2f2f2" style="isolation:isolate"/><rect x="258.00698" y="9.5" width="20" height="4" fill="#ccc"/><rect x="258.00698" y="40.5" width="20" height="4" fill="#ccc"/><path d="M533.66929,271.02572h-12a4.50508,4.50508,0,0,1-4.5-4.5v-49a4.50508,4.50508,0,0,1,4.5-4.5h12a4.50508,4.50508,0,0,1,4.5,4.5v49A4.50508,4.50508,0,0,1,533.66929,271.02572Z" transform="translate(-229.66231 -213.02572)" fill="#f2f2f2" style="isolation:isolate"/><rect x="288.00698" y="9.5" width="20" height="4" fill="#ccc"/><rect x="288.00698" y="40.5" width="20" height="4" fill="#ccc"/><path d="M578.61024,272.52572h-285a1,1,0,0,1,0-2h285a1,1,0,0,1,0,2Z" transform="translate(-229.66231 -213.02572)" fill="#ccc"/><path d="M578.61024,353.52572h-285a1,1,0,0,1,0-2h285a1,1,0,0,1,0,2Z" transform="translate(-229.66231 -213.02572)" fill="#ccc"/><path d="M578.61024,434.52572h-285a1,1,0,0,1,0-2h285a1,1,0,0,1,0,2Z" transform="translate(-229.66231 -213.02572)" fill="#ccc"/><path d="M561.73228,591.508c0-7.732-29.10156-14-65-14s-65,6.268-65,14c0,4.95545,11.96436,9.30622,30,11.79432V680.008a6.5,6.5,0,0,0,13,0V604.684c6.87207.53241,14.27686.824,22,.824s15.12793-.29162,22-.824v75.324a6.5,6.5,0,0,0,13,0V603.30232C549.76793,600.81422,561.73228,596.46345,561.73228,591.508Z" transform="translate(-229.66231 -213.02572)" fill="#ccc"/><polygon points="319.563 460.906 331.823 460.906 337.655 413.618 319.561 413.618 319.563 460.906" fill="#a0616a"/><path d="M546.59844,670.42825h38.53073a0,0,0,0,1,0,0v14.88687a0,0,0,0,1,0,0H561.4853a14.88686,14.88686,0,0,1-14.88686-14.88686v0A0,0,0,0,1,546.59844,670.42825Z" transform="translate(902.09624 1142.69183) rotate(179.99738)" fill="#2f2e41"/><polygon points="338.701 454.064 350.398 450.393 341.806 403.528 324.542 408.945 338.701 454.064" fill="#a0616a"/><path d="M566.15243,658.42388h38.53073a0,0,0,0,1,0,0v14.88687a0,0,0,0,1,0,0H581.03928a14.88686,14.88686,0,0,1-14.88686-14.88686v0A0,0,0,0,1,566.15243,658.42388Z" transform="translate(1113.68794 912.87602) rotate(162.57738)" fill="#2f2e41"/><path d="M560.16112,645.32445l-22.42725-58.87109c-5.03149,1.18164-47.22656,10.51855-61.35889-4.52832-4.84326-5.15723-5.78784-12.62891-2.80761-22.208l8.24756-10.36426.25634.01367c3.11841.16406,76.43531,4.27344,81.46119,26.38867,4.23754,18.64454,11.97656,53.40528,14.24731,63.61524a4.51573,4.51573,0,0,1-2.814,5.18359l-9.01928,3.38184a4.46228,4.46228,0,0,1-1.572.28613A4.51293,4.51293,0,0,1,560.16112,645.32445Z" transform="translate(-229.66231 -213.02572)" fill="#2f2e41"/><path d="M547.16112,652.32445l-22.42725-58.87109c-5.03174,1.18164-47.22656,10.51757-61.35889-4.52832-4.84326-5.15723-5.78784-12.62891-2.80761-22.208l8.24756-10.36426.25634.01367c3.11841.16406,76.43531,4.27344,81.46119,26.38867,4.23754,18.64454,11.97656,53.40528,14.24731,63.61524a4.51573,4.51573,0,0,1-2.814,5.18359l-9.01928,3.38184a4.46228,4.46228,0,0,1-1.572.28613A4.51293,4.51293,0,0,1,547.16112,652.32445Z" transform="translate(-229.66231 -213.02572)" fill="#2f2e41"/><path d="M577.46925,511.20192a10.52657,10.52657,0,0,0-.88488,1.40152l-49.32026,5.19623-7.09959-9.734-16.09071,8.79449,13.94447,23.62125,60.48739-15.42252a10.49579,10.49579,0,1,0-1.03642-13.857Z" transform="translate(-229.66231 -213.02572)" fill="#a0616a"/><path d="M460.25023,569.82543a4.50694,4.50694,0,0,1-1.81861-4.34864c2.78248-18.34277-.41894-44.61914-3.59472-63.43261a24.79543,24.79543,0,0,1,27.55932-28.76172,79.86459,79.86459,0,0,1,9.91285,1.9541h0a24.59626,24.59626,0,0,1,18.582,24.46777c-.47486,18.1543,3.21142,40.80567,4.81836,49.70117a4.51862,4.51862,0,0,1-.83374,3.51075,4.39229,4.39229,0,0,1-3.09546,1.75c-17.80811,1.81738-37.01221,10.50195-46.87451,15.5166a4.50062,4.50062,0,0,1-2.04956.501A4.42884,4.42884,0,0,1,460.25023,569.82543Z" transform="translate(-229.66231 -213.02572)" fill="#38bdf8"/><path d="M508.321,522.5139a4.47083,4.47083,0,0,1-2.47363-2.39746l-9.9314-22.94238a11.49973,11.49973,0,1,1,21.10718-9.13574l9.93164,22.94238a4.5057,4.5057,0,0,1-2.342,5.917l-12.8479,5.56153a4.46857,4.46857,0,0,1-3.44385.05468Z" transform="translate(-229.66231 -213.02572)" fill="#38bdf8"/><path d="M530.46925,509.20192a10.52657,10.52657,0,0,0-.88488,1.40152l-49.32026,5.19623-7.09959-9.734-16.09071,8.79449,13.94447,23.62125,60.48739-15.42252a10.49579,10.49579,0,1,0-1.03642-13.857Z" transform="translate(-229.66231 -213.02572)" fill="#a0616a"/><path d="M461.321,523.5139a4.47083,4.47083,0,0,1-2.47363-2.39746l-9.9314-22.94238a11.49973,11.49973,0,1,1,21.10718-9.13574l9.93164,22.94238a4.5057,4.5057,0,0,1-2.342,5.917l-12.8479,5.56153a4.46857,4.46857,0,0,1-3.44385.05468Z" transform="translate(-229.66231 -213.02572)" fill="#38bdf8"/><circle cx="250.90622" cy="227.89093" r="24.56103" fill="#a0616a"/><path d="M463.008,457.77336a2.13481,2.13481,0,0,1,1.85636-2.81906,4.93049,4.93049,0,0,1,3.4761,1.715,13.83414,13.83414,0,0,0,3.07115,2.63711c1.18812.59889,2.79953.51354,3.47686-.62825.636-1.0722.20022-2.508-.18483-3.75346a36.90711,36.90711,0,0,1-1.62991-9.77c-.11092-3.70031.41115-7.562,2.45972-10.44806,2.64387-3.72476,7.37142-5.13883,11.84544-5.03631s8.87547,1.48363,13.30714,2.35666c1.52991.30139,3.32825.45549,4.35152-.73025,1.08805-1.26082.68844-3.3014.22563-5.00376-1.20094-4.41743-2.475-8.98461-5.26525-12.55225a18.89838,18.89838,0,0,0-12.06081-6.79013,28.93848,28.93848,0,0,0-13.46236,1.52838,36.09622,36.09622,0,0,0-17.68285,12.3186,29.23591,29.23591,0,0,0-5.57809,21.60019,26.66717,26.66717,0,0,0,9.88579,16.85462Z" transform="translate(-229.66231 -213.02572)" fill="#2f2e41"/><path d="M369.22831,516.90206a122.0417,122.0417,0,0,1,10.10051-38.51722q2.27961-5.09249,5.01812-9.96076a.7438.7438,0,0,0-1.28353-.75026,123.72825,123.72825,0,0,0-13.7678,37.98231q-1.03368,5.58355-1.55378,11.24593c-.08812.95214,1.39892.94613,1.48648,0Z" transform="translate(-229.66231 -213.02572)" fill="#3f3d56"/><circle cx="158.28495" cy="248.36795" r="9.4144" fill="#38bdf8"/><path d="M370.19134,517.1521a79.17409,79.17409,0,0,1,6.55267-24.98792q1.47889-3.30372,3.25549-6.462a.48254.48254,0,0,0-.83269-.48673,80.26817,80.26817,0,0,0-8.93181,24.64089q-.67059,3.62231-1.008,7.29576c-.05716.6177.90755.6138.96435,0Z" transform="translate(-229.66231 -213.02572)" fill="#3f3d56"/><circle cx="152.67288" cy="268.1155" r="6.10756" fill="#38bdf8"/><path d="M368.97418,516.57556a79.17415,79.17415,0,0,1-10.2024-23.73277q-.86592-3.51453-1.40763-7.09749a.48254.48254,0,0,0-.95593.12838,80.26861,80.26861,0,0,0,8.11306,24.92246q1.69919,3.26857,3.69253,6.37255c.33485.5222,1.09311-.07423.76037-.59313Z" transform="translate(-229.66231 -213.02572)" fill="#3f3d56"/><circle cx="126.73823" cy="267.68677" r="6.10756" fill="#38bdf8"/><path d="M350.22441,521.97927v-12a4.50508,4.50508,0,0,1,4.5-4.5h28a4.50508,4.50508,0,0,1,4.5,4.5v12a4.50508,4.50508,0,0,1-4.5,4.5h-28A4.50508,4.50508,0,0,1,350.22441,521.97927Z" transform="translate(-229.66231 -213.02572)" fill="#ccc"/><rect x="289.06998" y="305.48228" width="86" height="7" rx="3.5" fill="#ccc"/><path d="M654.23228,525.508h-89a6.50736,6.50736,0,0,1-6.5-6.5v-49a6.50737,6.50737,0,0,1,6.5-6.5h89a6.50737,6.50737,0,0,1,6.5,6.5v49A6.50736,6.50736,0,0,1,654.23228,525.508Z" transform="translate(-229.66231 -213.02572)" fill="#ccc"/><circle cx="380.06998" cy="281.48228" r="6" fill="#fff"/><path d="M880.73228,591.508c0-7.732-29.10156-14-65-14s-65,6.268-65,14c0,4.95545,11.96436,9.30622,30,11.79432V680.008a6.5,6.5,0,0,0,13,0V604.684c6.87207.53241,14.27686.824,22,.824s15.12793-.29162,22-.824v75.324a6.5,6.5,0,0,0,13,0V603.30232C868.76793,600.81422,880.73228,596.46345,880.73228,591.508Z" transform="translate(-229.66231 -213.02572)" fill="#ccc"/><circle cx="593.25735" cy="222.33974" r="28" fill="#2f2e41"/><polygon points="523.577 461.906 511.317 461.906 505.485 414.618 523.579 414.618 523.577 461.906" fill="#ffb8b8"/><path d="M502.56,458.40253h23.64387a0,0,0,0,1,0,0v14.88687a0,0,0,0,1,0,0H487.67309a0,0,0,0,1,0,0v0A14.88686,14.88686,0,0,1,502.56,458.40253Z" fill="#2f2e41"/><polygon points="504.439 455.064 492.742 451.393 501.334 404.528 518.598 409.945 504.439 455.064" fill="#ffb8b8"/><path d="M712.66827,659.42388h23.64387a0,0,0,0,1,0,0v14.88687a0,0,0,0,1,0,0H697.78141a0,0,0,0,1,0,0v0A14.88686,14.88686,0,0,1,712.66827,659.42388Z" transform="translate(2.90601 -397.12769) rotate(17.42262)" fill="#2f2e41"/><path d="M738.09007,649.22191a4.46224,4.46224,0,0,1-1.572-.28613l-9.01929-3.38184a4.51573,4.51573,0,0,1-2.814-5.18359c2.27075-10.21,10.00976-44.9707,14.24731-63.61524,5.02588-22.11523,78.34278-26.22461,81.46118-26.38867l.25635-.01367L828.8972,560.717c2.98022,9.5791,2.03564,17.05078-2.80762,22.208-14.13232,15.04687-56.32739,5.71-61.35888,4.52832l-22.42725,58.87109A4.51293,4.51293,0,0,1,738.09007,649.22191Z" transform="translate(-229.66231 -213.02572)" fill="#2f2e41"/><path d="M751.09007,656.22191a4.46224,4.46224,0,0,1-1.572-.28613l-9.01929-3.38184a4.51573,4.51573,0,0,1-2.814-5.18359c2.27075-10.21,10.00976-44.9707,14.24731-63.61524,5.02588-22.11523,78.34278-26.22461,81.46118-26.38867l.25635-.01367L841.8972,567.717c2.98022,9.5791,2.03564,17.05078-2.80762,22.208-14.13232,15.04589-56.32715,5.71-61.35888,4.52832l-22.42725,58.87109A4.51293,4.51293,0,0,1,751.09007,656.22191Z" transform="translate(-229.66231 -213.02572)" fill="#2f2e41"/><path d="M724.99531,512.20192a10.52563,10.52563,0,0,1,.88489,1.40152l49.32026,5.19623,7.09959-9.734,16.09071,8.79449-13.94447,23.62125L723.9589,526.05891a10.4958,10.4958,0,1,1,1.03641-13.857Z" transform="translate(-229.66231 -213.02572)" fill="#ffb8b8"/><path d="M839.60838,571.68383a4.50062,4.50062,0,0,1-2.04956-.501c-9.8623-5.01465-29.06641-13.69922-46.87451-15.5166a4.39229,4.39229,0,0,1-3.09546-1.75,4.51858,4.51858,0,0,1-.83374-3.51075c1.60693-8.8955,5.29321-31.54687,4.81836-49.70117a24.59626,24.59626,0,0,1,18.582-24.46777h0a79.86445,79.86445,0,0,1,9.91284-1.9541,24.79544,24.79544,0,0,1,27.55933,28.76172c-3.17578,18.81347-6.3772,45.08984-3.59473,63.43261a4.50694,4.50694,0,0,1-1.8186,4.34864A4.42884,4.42884,0,0,1,839.60838,571.68383Z" transform="translate(-229.66231 -213.02572)" fill="#38bdf8"/><path d="M792.48631,523.83226a4.49628,4.49628,0,0,1-1.78662-.373l-12.8479-5.56153a4.50569,4.50569,0,0,1-2.342-5.917l9.93164-22.94238a11.49973,11.49973,0,1,1,21.10718,9.13574l-9.9314,22.94238a4.51063,4.51063,0,0,1-4.13086,2.71582Z" transform="translate(-229.66231 -213.02572)" fill="#38bdf8"/><circle cx="592.23373" cy="228.89093" r="24.56103" fill="#ffb8b8"/><path d="M796.89293,429.84957A88.59059,88.59059,0,0,0,835.21911,442.478l-4.03992-4.84061a29.68817,29.68817,0,0,0,9.17074,1.82105c3.13021-.04875,6.40987-1.254,8.18642-3.83171a9.342,9.342,0,0,0,.62531-8.62974,17.694,17.694,0,0,0-5.56636-6.96014,33.13951,33.13951,0,0,0-30.84447-5.51248,19.80609,19.80609,0,0,0-9.21238,5.90943c-2.32838,2.87238-6.81094,5.43156-5.61879,8.93167Z" transform="translate(-229.66231 -213.02572)" fill="#2f2e41"/><path d="M826.02581,410.0287a75.48471,75.48471,0,0,0-27.463-17.7592c-6.63872-2.45941-13.86459-3.97895-20.80509-2.58225s-13.50411,6.19807-15.44041,13.00778c-1.58332,5.56836.05158,11.56379,2.50871,16.80555s5.73758,10.10247,7.72463,15.53985a35.46793,35.46793,0,0,1-35.689,47.56227c6.81938.91437,13.10515,4.119,19.77076,5.82483s14.53281,1.59011,19.48624-3.18519c5.24091-5.05244,5.34584-13.26718,5.09245-20.54249l-1.13-32.445c-.1921-5.51543-.35615-11.20763,1.63288-16.35551s6.71617-9.65569,12.23475-9.60885c4.18253.0355,7.88442,2.56926,11.23865,5.068s6.90446,5.16474,11.0706,5.53641,8.92293-2.71144,8.61118-6.88249" transform="translate(-229.66231 -213.02572)" fill="#2f2e41"/><polygon points="482.197 281.087 538.75 282.422 546.943 342.878 494.716 344.05 482.197 281.087" fill="#e6e6e6"/><path d="M771.99531,510.20192a10.52563,10.52563,0,0,1,.88489,1.40152l49.32026,5.19623,7.09959-9.734,16.09071,8.79449-13.94447,23.62125L770.9589,524.05891a10.4958,10.4958,0,1,1,1.03641-13.857Z" transform="translate(-229.66231 -213.02572)" fill="#ffb8b8"/><path d="M839.48631,524.83226a4.49628,4.49628,0,0,1-1.78662-.373l-12.8479-5.56153a4.50569,4.50569,0,0,1-2.342-5.917l9.93164-22.94238a11.49973,11.49973,0,1,1,21.10718,9.13574l-9.9314,22.94238a4.51063,4.51063,0,0,1-4.13086,2.71582Z" transform="translate(-229.66231 -213.02572)" fill="#38bdf8"/><path d="M723.23228,524.508h-398a6.5,6.5,0,1,0,0,13h11.5v141.5a6.5,6.5,0,0,0,13,0V549.99806l72.8711,132.07788a6.5,6.5,0,0,0,11.2583-6.5L357.6859,537.508H705.73228v.08417l-76.1289,137.98377a6.49977,6.49977,0,1,0,11.25781,6.5l64.87109-117.57813V679.008a6.5,6.5,0,0,0,13,0V540.93537l1.89112-3.42737h2.60888a6.5,6.5,0,0,0,0-13Z" transform="translate(-229.66231 -213.02572)" fill="#3f3d56"/><path d="M969.147,686.97428H230.853a1.19069,1.19069,0,0,1,0-2.38137H969.147a1.19068,1.19068,0,0,1,0,2.38137Z" transform="translate(-229.66231 -213.02572)" fill="#3f3d56"/></svg>