@bloomneo/uikit 1.5.0

package/bin/templates/single/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/single/index.html.template

@@ -0,0 +1,37 @@
+<!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>{{PROJECT_NAME}} - UIKit Showcase</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="{{PROJECT_NAME}} - UIKit Showcase">
+    <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="{{PROJECT_NAME}} - UIKit Showcase">
+    <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="#6366F1">
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>

package/bin/templates/single/package.json.template

@@ -0,0 +1,34 @@
+{
+  "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",
+    "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/single/public/favicon.svg

@@ -0,0 +1,10 @@
+<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(#bluePurpleGradient)"/>
+  <text x="16" y="20" font-family="Inter, system-ui, sans-serif" font-size="12" font-weight="900" text-anchor="middle" fill="white" letter-spacing="1px">ui</text>
+  <defs>
+    <linearGradient id="bluePurpleGradient" x1="0%" y1="0%" x2="100%" y2="100%">
+      <stop offset="0%" style="stop-color:#3B82F6;stop-opacity:1" />
+      <stop offset="100%" style="stop-color:#8B5CF6;stop-opacity:1" />
+    </linearGradient>
+  </defs>
+</svg>

package/bin/templates/single/public/hero.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="800.418" height="440.048" viewBox="0 0 800.418 440.048" xmlns:xlink="http://www.w3.org/1999/xlink" role="img" artist="Katerina Limpitsouni" source="https://undraw.co/"><g transform="translate(-560 -320)"><path d="M1028.793,687.166H230.949a1.287,1.287,0,1,1,0-2.573h797.844a1.287,1.287,0,1,1,0,2.573Z" transform="translate(330.338 68.211)" fill="#f2f2f2"/><path d="M369.349,520.9a131.885,131.885,0,0,1,10.915-41.624q2.464-5.5,5.423-10.764a.8.8,0,0,0-1.387-.811,133.708,133.708,0,0,0-14.878,41.046q-1.117,6.034-1.679,12.153C367.647,521.93,369.254,521.923,369.349,520.9Z" transform="translate(280.127 224.126)" fill="#3f3d56"/><path d="M370.269,519.746a85.561,85.561,0,0,1,7.081-27q1.6-3.57,3.518-6.983a.521.521,0,0,0-.9-.526,86.742,86.742,0,0,0-9.652,26.628q-.725,3.915-1.089,7.884C369.165,520.414,370.208,520.41,370.269,519.746Z" transform="translate(286.141 225.551)" fill="#3f3d56"/><circle cx="6.6" cy="6.6" r="6.6" transform="translate(662.934 699.781)" fill="#38bdf8"/><path d="M369.988,519.095a85.56,85.56,0,0,1-11.025-25.647q-.936-3.8-1.521-7.67a.521.521,0,0,0-1.033.139,86.742,86.742,0,0,0,8.768,26.933q1.836,3.532,3.99,6.887c.362.564,1.181-.08.822-.641Z" transform="translate(279.213 225.579)" fill="#3f3d56"/><circle cx="6.6" cy="6.6" r="6.6" transform="translate(629.013 699.318)" fill="#38bdf8"/><path d="M350.224,523.31V510.342a4.869,4.869,0,0,1,4.863-4.863h30.258a4.868,4.868,0,0,1,4.863,4.863V523.31a4.868,4.868,0,0,1-4.863,4.863H355.087a4.868,4.868,0,0,1-4.863-4.863Z" transform="translate(278.714 227.203)" fill="#ccc"/><g transform="translate(999.362 494.882)"><rect width="93.308" height="7.595" rx="3.5" transform="translate(0 59.673)" fill="#ccc"/><path d="M662.347,530.776H565.785a7.06,7.06,0,0,1-7.052-7.052V470.56a7.06,7.06,0,0,1,7.052-7.052h96.563a7.06,7.06,0,0,1,7.052,7.052v53.164a7.06,7.06,0,0,1-7.052,7.052Z" transform="translate(-515.333 -463.508)" fill="#ccc"/><ellipse cx="6.51" cy="6.51" rx="6.51" ry="6.51" transform="translate(92.223 27.124)" fill="#fff"/></g><path d="M803.228,524.508H326.518a7.785,7.785,0,0,0,0,15.571h13.774V709.563a7.785,7.785,0,1,0,15.571,0V555.039l87.282,158.2a7.785,7.785,0,0,0,13.485-7.785L365.39,540.079H782.267v.1L691.083,705.452a7.785,7.785,0,1,0,13.484,7.785l77.7-140.831V709.563a7.786,7.786,0,1,0,15.571,0V544.184l2.265-4.105h3.125a7.785,7.785,0,1,0,0-15.571Z" transform="translate(376.675 36.445)" fill="#d6d6e3"/><g transform="translate(741.666 359.926)"><path d="M514.616,98.226S484.5,89.742,475.59,130.889s-3.25,35.962-3.25,35.962L539.575,159S559.791,110.739,514.616,98.226Z" transform="translate(-366.786 -97.502)" fill="#090814"/><path d="M458.156,258.012s45.438,2.1,37.569,19.939q-.834,1.891-1.554,3.543a319,319,0,0,1-19.38,37.513l-27.927,46.271L436.7,359.632l28.6-74.338-25.7-2.1Z" transform="translate(-272.161 -81.597)" fill="#ed9da0"/><path d="M508.491,169.563s-4.2,22.032-7.869,25.179,27.8,7.869,27.8,7.869S523.7,187.4,529.473,179.53,508.491,169.563,508.491,169.563Z" transform="translate(-376.368 -123.112)" fill="#ed9da0"/><path d="M600.543,274.981l-14.688,32S574.839,318,562.773,362.061s-14.688,42.491-14.688,42.491l11.926,3.972,48.925-88.953,24.13-30.425-7.339-16.259Z" transform="translate(-534.351 -79.677)" fill="#ed9da0"/><path d="M491.029,243.541l-21.107,39.284s-38.687,77.252-33.741,76.94c5.56-.351,18.468,6.191,23.26,12.481,2.315,3.036,29.673-54.423,41.551-71L526.7,281.31s72.981,12.284,73.071,8.289c.044-1.957-17.292,33.735-12.325,31.655,5.659-2.371,16.427,10.681,22.3,8.294,2.422-.985,15.2-32.736,22.131-49.735a9.2,9.2,0,0,0-4.257-11.642c-5.205-2.71-77.527-19.221-77.527-19.221l1.265-6.46L546.11,232Z" transform="translate(-407.002 -84.956)" fill="#090814"/><ellipse cx="20.458" cy="20.458" rx="20.458" ry="20.458" transform="matrix(-0.16, -0.987, 0.987, -0.16, 130.584, 62.974)" fill="#ed9da0"/><path d="M479.84,256.65c-1.129,3.387,6.186,5.336,16.385,3.431,8.823-1.647,18.48-3.6,26.1-5.188,8.157-1.7,13.985-2.97,13.985-2.97s2.1,13.115,8.92,11.541c5.871-1.355,23.432-62.681,28.18-79.63a5.9,5.9,0,0,0-2.607-6.626l-24.114-14.725s-16.618-5.708-22.677-5.871-16.551-1.737-16.551-1.737-12.065,1.049-14.164,9.967-10.854,61.792-11.016,74.489C482.1,253.263,483.227,246.488,479.84,256.65Z" transform="translate(-397.723 -94.914)" fill="#38bdf8"/><path d="M0,0S8.484,22.482,29.269,31.814l3.394-19.941Z" transform="translate(130.95 12.636) rotate(-19)" fill="#090814"/><ellipse cx="2.885" cy="5.508" rx="2.885" ry="5.508" transform="translate(124.683 26.13)" fill="#ed9da0"/><path d="M484.385,300.763a10.315,10.315,0,0,1,2.258-15.655l18.244-92.165,20.952,8.017-24.523,88.071a10.371,10.371,0,0,1-16.937,11.73Z" transform="translate(-352.227 -89.999)" fill="#ed9da0"/><path d="M482.313,211.125l23.006,4.052a4.629,4.629,0,0,0,5.425-4.428l.635-23.281a12.846,12.846,0,0,0-25.315-4.382l-7.339,22.023a4.629,4.629,0,0,0,3.588,6.016Z" transform="translate(-334.271 -92.648)" fill="#38bdf8"/><path d="M535.482,299.43a10.316,10.316,0,0,1-2.882-15.552l-12.272-93.152,22.416.874,5.014,91.288a10.371,10.371,0,0,1-12.277,16.543Z" transform="translate(-420.963 -90.285)" fill="#ed9da0"/><path d="M528.641,209.938l23.091-3.539a4.629,4.629,0,0,0,3.719-5.935l-6.864-22.255a12.845,12.845,0,0,0-25.383,3.967l.113,23.213a4.629,4.629,0,0,0,5.326,4.548Z" transform="translate(-428.668 -93.304)" fill="#38bdf8"/><path d="M8.073,41.055s-10.3,1.527-7.631-7.631L5.784,15.112S-1.083-3.583,9.6.614s17.55,30.141,17.55,30.141,4.579,19.84,0,19.84-19.076,3.049-17.55,0S8.073,41.055,8.073,41.055Z" transform="translate(194.514 317.089) rotate(158)" fill="#090814"/><path d="M612.673,411.731s12-3.085,14.741,1.714,2.057,20.568,2.057,20.91-4.115,3.776-5.491,3.776-9.936,15.426-21.6,9.936S612.673,411.731,612.673,411.731Z" transform="translate(-598.97 -89.053)" fill="#090814"/></g><g transform="translate(1177.085 320)"><path d="M402.219,445.911s-13.584,28.3-4.528,29.433,11.32-25.471,11.32-25.471Z" transform="translate(-394.578 -232.742)" fill="#ed9da0"/><path d="M351.5,206.8h0a16.719,16.719,0,0,0-12.3,13.841l-8.075,57.477L319.8,323.961s-5.661,5.093-3.393,7.925-2.83,14.716-2.83,14.716l14.154,4.528s1.7-11.886,4.528-12.453c2.487-.5,30.329-74.873,37.04-92.891.925-2.484,1.449-3.9,1.449-3.9S369.614,203.966,351.5,206.8Z" transform="translate(-310.466 -128.905)" fill="#d6d6e3"/><path d="M185.733,724.945,174.691,745.9l18.4,5.364,3.919-18.95Z" transform="translate(-126.585 -330.651)" fill="#ed9da0"/><path d="M317.415,792.282l-19.45,9.951s-30.439,7.257-10.62,13.289,28.74,1.744,28.74,1.744,25.926,1.348,25.508-5.885-5.405-17.4-5.405-17.4S318.836,798.508,317.415,792.282Z" transform="translate(-268.517 -379.447)" fill="#090814"/><path d="M294.64,435.214l-8.49,102.731s-.283,61.413-9.339,73.3-9.339,17.83-9.339,17.83l-18.679-9.619s9.619-16.031,7.641-18.488a13.686,13.686,0,0,1-2.547-5.285l5.094-63.394-9.619-110.373Z" transform="translate(-195.304 -222.328)" fill="#090814"/><path d="M267.578,787.911" transform="translate(-181.26 -381.165)" fill="none" stroke="#3f3d56" stroke-miterlimit="10" stroke-width="1"/><path d="M113.155,723.209l7.924,20.943,22.64-8.49-14.154-14.716Z" transform="translate(-37.026 -328.916)" fill="#ed9da0"/><path d="M249.106,443.741l-4.528,94.524s22.074,62.827,41.319,73.016c0,0,0,12.453,4.528,14.716a11.369,11.369,0,0,1,5.66,6.793l24.9-6.226-11.32-18.113-24.9-60.563s-3.962-1.7-5.094-7.358-3.4-5.66,2.268-6.792,5.66-6.792,5.66-6.792l18.679-86.034Z" transform="translate(-221.654 -230.572)" fill="#090814"/><path d="M312.737,146.411s1.7,28.867,3.962,31.7-23.773,2.268-23.773,2.268,1.7-24.339,0-26.6S312.737,146.411,312.737,146.411Z" transform="translate(-244.815 -102.764)" fill="#ed9da0"/><circle cx="22.64" cy="22.64" r="22.64" transform="translate(25.187 19.592)" fill="#ed9da0"/><path d="M282.113,186.634s-21.505-2.268-29.433,4.528a58.239,58.239,0,0,1-8.106,5.8,16.626,16.626,0,0,0-8.067,13.763L232.3,339.458s63.96-5.66,75.846,0c0,0,.566-13.018,1.7-14.716.825-1.238,2.252-50.6,2.965-77.271a58.716,58.716,0,0,0-14.858-40.977c-3.431-3.8-7.263-6.98-11.311-8.537C286.638,197.954,287.77,187.2,282.113,186.634Z" transform="translate(-206.547 -120.063)" fill="#d6d6e3"/><path d="M348.322,268.411,314.078,361.05S347.19,298.41,348.322,268.411Z" transform="translate(-288.324 -155.71)" opacity="0.1"/><path d="M42.759,41.183c-1.915-.114-3.784.533-5.686.782A14.391,14.391,0,0,1,21.691,31.235a8.232,8.232,0,0,0-.787-2.563c-1.047-1.709-3.431-2.033-5.4-1.642s-3.832,1.313-5.831,1.418a8.928,8.928,0,0,1-7.705-4.361A14.788,14.788,0,0,1,.082,15.154L1.564,16.71a7.526,7.526,0,0,0,.671-4.091,4.747,4.747,0,0,1,4.5,1.15c1.307.139.321-2.424,1.291-3.309a2.245,2.245,0,0,1,1.58-.3c2.779.027,5.028-2.1,7.218-3.811A30.673,30.673,0,0,1,29.774.446,17.04,17.04,0,0,1,39.226.9,20.191,20.191,0,0,1,45.61,5.432c4.66,4.481,8.787,9.746,10.725,15.913a26.788,26.788,0,0,1,.128,15.534c-.782,2.637-3.135,11.666-6.582,11.876C45.549,49.026,48.149,41.507,42.759,41.183Z" transform="translate(35.824 0) rotate(20.972)" fill="#090814"/><path d="M239.765,780.645s-7.484-4.637-8.419-2.782-4.677,9.738-4.677,9.738l-4.209,11.593s-25.728,16.231-3.742,17.159,27.6-11.593,27.6-11.593S271.1,794.094,267.36,787.6s-16.838-13.226-16.838-13.226S243.974,785.746,239.765,780.645Z" transform="translate(-153.81 -376.354)" fill="#090814"/></g><path d="M554.668,602.33a6.519,6.519,0,0,0-9.219,9.219l9.219,9.219,9.219-9.219a6.519,6.519,0,0,0-9.219-9.219Z" transform="matrix(0.839, 0.545, -0.545, 0.839, 537.609, -129.14)" fill="#38bdf8"/></g></svg>