maquina-components 0.1.2 → 0.3.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 61b5b2a30e1774c16e25bc87743e5b29e1e8ede10e55f76fbd0ab953108921f4
-  data.tar.gz: 7d932af15e3e997b0e369e54e5189c18f7ebb6ce407150957323444f70199aa5
+  metadata.gz: e04564783a082eb56e58395e1de24dc21deb1312c49ebc47e48428a4230e6925
+  data.tar.gz: 78630e11ca92ae6a964c2bc100a7357722d7618df3a5a0a7d0619bbc48eeb5d3
 SHA512:
-  metadata.gz: 4476d4fa6fa5cd882706e2a64a25ae8a5537b1f8d5d214f7d0960a7fc2b294f1d3f034b283be0979cd9e8f23290b4e7b46c2baf81c011727fa0b33551dea0a60
-  data.tar.gz: 53cd0563b8e6ce33ab34fd38ba19cec938514a1d0be558b4c6e95a36fffcd2068b25f9f7e07e2fde12f61c9a30e62f6e16f5b41bb56233b1b9fe5bd77a5adeee
+  metadata.gz: 225bbf4a0100ac2f80a03e3bcf38f6080365db13228fade762fa5c8378631b2f0aa5d45d71654e2ecfa6577fe88f9c317163a8c29b44f003657146870bd3c44f
+  data.tar.gz: f3b563c5a789cb8039fc5e30e5461114556ca37289bd2b9859b0516973f1c4d7f54204745ad48628271ae24574522784cae4e8865f83e596326b5707d903a4ea

data/README.md

@@ -1,214 +1,476 @@
 # Maquina Components
 
-Modern UI components for Ruby on Rails, powered by TailwindCSS and Stimulus
+UI components for Ruby on Rails, built with ERB, TailwindCSS 4.0, and Stimulus.
 
-![Dashboard Example](/imgs/home.png)
+---
 
-![Form Example](/imgs/new.png)
+## Why This Exists
 
-## Overview
+I started building components inspired by [shadcn/ui](https://ui.shadcn.com/) for production Rails applications—mainly dashboards and admin interfaces. Over time, I iterated on these components across multiple projects, and they became inconsistent: different APIs, different styling approaches, different levels of completeness.
 
-Maquina Components provides a collection of ready-to-use UI components for Ruby on Rails applications. Built with ERB,
-TailwindCSS 4.0, and Stimulus, it offers a modern and maintainable approach to building beautiful user interfaces
-without the complexity of JavaScript frameworks.
+It was time to extract the elements I use most and give them a **cohesive API and consistent styling**.
 
-### Key Features
+### The Technical Choices
 
-- 🎨 Pre-built UI components based on shadcn/ui design system
-- ⚡️ Powered by TailwindCSS 4.0
-- 🧩 Seamless Rails integration with ERB partials
-- 📱 Fully responsive components
-- 🎯 Interactive behaviors with Stimulus controllers
-- 🌙 Dark mode support out of the box
-- ♿️ Accessibility-first components
+I chose **ERB partials** with **TailwindCSS** and **Stimulus controllers** for interactive elements. For static components like form inputs, pure CSS with data attributes is enough.
 
-## Installation
+I'm aware of alternatives like [ViewComponent](https://viewcomponent.org/) and [Phlex](https://www.phlex.fun/). The projects I extracted these components from didn't use them. I see the benefits of using a Ruby class to render the UI, but bringing in any of these libraries into a project is a big commitment, and not all projects and teams are open to doing it. The reason is not technical; it is the feeling of moving away from "the Rails way." So I kept it simple: ERB partials that any Rails developer can understand immediately.
 
-Add this line to your application's Gemfile:
+### Composability Over Convenience
+
+These components are built to be **composable**. They are built of many small ERB partials to render. But that's intentional—you can take these partials and compose them into larger, application-specific components. There are no limits, and you have a standard API to guide you.
+
+I didn't copy shadcn/ui one-to-one. I extracted only the components I actually use in my applications. This is a practical toolkit, not a complete port.
+
+### One Approach Among Many
+
+There's no single UI kit that rules Rails development. If this approach doesn't resonate with you, here are excellent alternatives:
+
+- [RailsUI](https://railsui.com) — Premium UI templates and components
+- [RailsBlocks](https://railsblocks.com) — Copy-paste components for Rails
+- [shadcn-rails](https://shadcn.rails-components.com) — Another shadcn/ui port for Rails
+- [Inertia Rails + shadcn Starter](https://evilmartians.com/opensource/inertia-rails-shadcn-starter) — React/Vue components with Inertia
+
+If you're open to trying maquina_components and providing feedback, you're welcome to do so. If this isn't for you, that's okay too.
+
+---
+
+## Features
+
+- **ERB partials** with strict locals (`locals:` magic comments)
+- **TailwindCSS 4.0** with CSS custom properties for theming
+- **Data attributes** (`data-component`, `data-*-part`) for CSS styling
+- **Stimulus controllers** only used where interactivity is needed
+- **Dark mode** support via CSS variables
+- **shadcn/ui theming** convention (works with their color system)
+- **Composable** — small partials you can combine freely
+
+![Test dummy app with light mode](/imgs/light.png)
+
+![Test dummy app with dark mode](/imgs/dark.png)
+
+---
+
+## Quick Start
+
+### 1. Add the Gem
 
 ```ruby
-gem 'maquina-components'
+# Gemfile
+gem "maquina-components"
 ```
 
-Then execute:
-
 ```bash
 bundle install
 ```
 
-### Setup
+### 2. Run the Install Generator
 
-1. Install TailwindCSS 4.0 in your Rails application
-2. Add the required Stimulus controllers to your application
-3. Use Shadcn/UI standard color variables:
+```bash
+bin/rails generate maquina_components:install
+```
 
-```css
-/* app/assets/stylesheets/application.css */
+This will:
 
-@theme {
-  /* Default background color of <body />...etc */
-  --color-background: var(--background);
-  --color-foreground: var(--foreground);
+- Add the engine CSS import to your Tailwind file
+- Add theme variables (light + dark mode)
+- Create a helper file for icon customization
+
+### 3. Use Components
+
+```erb
+<%= render "components/card" do %>
+  <%= render "components/card/header" do %>
+    <%= render "components/card/title", text: "Account Settings" %>
+    <%= render "components/card/description", text: "Manage your preferences" %>
+  <% end %>
+  <%= render "components/card/content" do %>
+    <!-- Your content -->
+  <% end %>
+<% end %>
+```
 
-  /* Primary colors for Button */
-  --color-primary: var(--primary-color);
-  --color-primary-foreground: var(--primary-foreground-color);
+For form elements, use data attributes with Rails helpers:
 
-  /* Muted colors */
-  --color-muted: var(--muted);
-  --color-muted-foreground: var(--muted-foreground);
+```erb
+<%= form_with model: @user do |f| %>
+  <%= f.text_field :name, data: { component: "input" } %>
+  <%= f.email_field :email, data: { component: "input" } %>
+  <%= f.submit "Save", data: { component: "button", variant: "primary" } %>
+<% end %>
+```
 
-  /* Secondary colors */
-  --color-secondary: var(--secondary);
-  --color-secondary-foreground: var(--secondary-foreground);
+**[Full Getting Started Guide](https://maquina.app/documentation/components/)**
 
-  /* Accent colors */
-  --color-accent: var(--accent);
-  --color-accent-foreground: var(--accent-foreground);
+---
 
-  /* Destructive colors */
-  --color-destructive: var(--destructive);
-  --color-destructive-foreground: var(--destructive-foreground);
+## Generator Options
 
-  /* Default input color */
-  --color-input: var(--input);
+```bash
+# Default: adds everything
+bin/rails generate maquina_components:install
 
-  /* Default border color */
-  --color-border: var(--border);
+# Skip theme variables (if you have your own)
+bin/rails generate maquina_components:install --skip-theme
 
-  /* Default ring color */
-  --color-ring: var(--ring);
-  --color-ring-destructive: var(--destructive);
+# Skip helper file
+bin/rails generate maquina_components:install --skip-helper
+```
 
-  /* Background color for Card */
-  --color-card: var(--card);
-  --color-card-foreground: var(--card-foreground);
+**Prerequisite:** [tailwindcss-rails](https://github.com/rails/tailwindcss-rails) must be installed first.
 
-  /* Sidebar colors */
-  --color-sidebar: var(--sidebar-background);
-  --color-sidebar-foreground: var(--sidebar-foreground);
+---
 
-  --color-sidebar-primary: var(--sidebar-primary);
-  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
+## Available Components
 
-  --color-sidebar-accent: var(--sidebar-accent);
-  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
+### Layout Components
 
-  --color-sidebar-ring: var(--sidebar-ring);
-  --color-sidebar-border: var(--sidebar-border);
-}
+| Component | Description | Documentation |
+|-----------|-------------|---------------|
+| **Sidebar** | Collapsible navigation with cookie persistence | [Sidebar](https://maquina.app/documentation/components/sidebar/) |
+| **Header** | Top navigation bar | [Header](https://maquina.app/documentation/components/header/) |
+
+### Content Components
+
+| Component | Description | Documentation |
+|-----------|-------------|---------------|
+| **Card** | Content container with header, content, footer | [Card](https://maquina.app/documentation/components/card/) |
+| **Alert** | Callout messages (info, warning, error) | [Alert](https://maquina.app/documentation/components/alert/) |
+| **Badge** | Status indicators and labels | [Badge](https://maquina.app/documentation/components/badge/) |
+| **Table** | Data tables with sorting support | [Table](https://maquina.app/documentation/components/table/) |
+| **Empty State** | Placeholder for empty lists | [Empty State](https://maquina.app/documentation/components/empty/) |
+
+### Navigation Components
+
+| Component | Description | Documentation |
+|-----------|-------------|---------------|
+| **Breadcrumbs** | Navigation trail with overflow handling | [Breadcrumbs](https://maquina.app/documentation/components/breadcrumbs/) |
+| **Dropdown Menu** | Accessible dropdown with keyboard navigation | [Dropdown Menu](https://maquina.app/documentation/components/dropdown-menu/) |
+| **Pagination** | Page navigation with Pagy integration | [Pagination](https://maquina.app/documentation/components/pagination/) |
+
+### Interactive Components
+
+| Component | Description | Documentation |
+|-----------|-------------|---------------|
+| **Combobox** | Searchable dropdown with keyboard navigation | [Combobox](https://maquina.app/documentation/components/combobox/) |
+| **Toggle Group** | Single/multiple selection button group | [Toggle Group](https://maquina.app/documentation/components/toggle-group/) |
+
+### Feedback Components
+
+| Component | Description | Documentation |
+|-----------|-------------|---------------|
+| **Toast** | Non-intrusive notifications with auto-dismiss | [Toast](https://maquina.app/documentation/components/toast/) |
+
+### Form Components
+
+| Component | Data Attribute | Variants |
+|-----------|----------------|----------|
+| **Button** | `data-component="button"` | default, primary, secondary, destructive, outline, ghost, link |
+| **Input** | `data-component="input"` | — |
+| **Textarea** | `data-component="textarea"` | — |
+| **Select** | `data-component="select"` | — |
+| **Checkbox** | `data-component="checkbox"` | — |
+| **Radio** | `data-component="radio"` | — |
+| **Switch** | `data-component="switch"` | — |
+
+**[Form Components Guide](https://maquina.app/documentation/components/form/)**
+
+---
+
+## Examples
+
+### Cards with Actions
+
+```erb
+<%= render "components/card" do %>
+  <%= render "components/card/header", layout: :row do %>
+    <div>
+      <%= render "components/card/title", text: "Team Members" %>
+      <%= render "components/card/description", text: "Manage your team" %>
+    </div>
+    <%= render "components/card/action" do %>
+      <%= link_to "Add Member", new_member_path,
+        data: { component: "button", variant: "primary", size: "sm" } %>
+    <% end %>
+  <% end %>
+  <%= render "components/card/content" do %>
+    <!-- Table or list -->
+  <% end %>
+<% end %>
 ```
 
-## Usage
+### Alerts
 
-### Basic Layout Example
+```erb
+<%= render "components/alert", variant: :destructive do %>
+  <%= render "components/alert/title", text: "Error" %>
+  <%= render "components/alert/description" do %>
+    Your session has expired. Please log in again.
+  <% end %>
+<% end %>
+```
+
+### Badges
 
 ```erb
-<%# app/views/layouts/application.html.erb %>
-<body class="bg-background text-primary font-display antialiased">
-  <div class="flex min-h-screen">
-    <%= render "components/sidebar" do %>
-      <%= render "components/sidebar_header" do %>
-        <%= render "shared/ui/menu_button",
-          title: "My App",
-          subtitle: "Dashboard",
-          text_icon: "MA" %>
-      <% end %>
+<%= render "components/badge", variant: :success do %>Active<% end %>
+<%= render "components/badge", variant: :warning do %>Pending<% end %>
+<%= render "components/badge", variant: :destructive do %>Failed<% end %>
+```
 
-      <%= render "components/sidebar_content" do %>
-        <!-- Sidebar content here -->
-      <% end %>
-    <% end %>
+### Toggle Group
 
-    <main class="flex-1 pl-(--sidebar-width)">
-      <%= yield %>
-    </main>
-  </div>
-</body>
+```erb
+<%= render "components/toggle_group", type: :single, variant: :outline do %>
+  <%= render "components/toggle_group/item", value: "left", aria_label: "Align left" do %>
+    <%= icon_for :align_left %>
+  <% end %>
+  <%= render "components/toggle_group/item", value: "center", aria_label: "Align center" do %>
+    <%= icon_for :align_center %>
+  <% end %>
+  <%= render "components/toggle_group/item", value: "right", aria_label: "Align right" do %>
+    <%= icon_for :align_right %>
+  <% end %>
+<% end %>
 ```
 
-### Components
+### Dropdown Menu
 
-#### Cards
+```erb
+<%= render "components/dropdown_menu" do %>
+  <%= render "components/dropdown_menu/trigger" do %>Options<% end %>
+  <%= render "components/dropdown_menu/content" do %>
+    <%= render "components/dropdown_menu/item", href: profile_path do %>
+      <%= icon_for :user %>
+      Profile
+    <% end %>
+    <%= render "components/dropdown_menu/separator" %>
+    <%= render "components/dropdown_menu/item", href: logout_path, method: :delete, variant: :destructive do %>
+      <%= icon_for :log_out %>
+      Logout
+    <% end %>
+  <% end %>
+<% end %>
+```
+
+### Pagination
 
 ```erb
-<%= render "components/card" do %>
-  <%= render "components/card_header",
-    title: "Account Balance",
-    icon: :dollar %>
-
-  <%= render "components/card_content" do %>
-    <p class="text-2xl font-bold">
-      <%= number_to_currency(@balance) %>
-    </p>
-    <p class="text-xs text-muted-foreground">
-      Current balance
-    </p>
+<%= pagination_nav(@pagy, :users_path) %>
+```
+
+### Combobox
+
+```erb
+<%= render "components/combobox", placeholder: "Select framework..." do |combobox_id| %>
+  <%= render "components/combobox/trigger", for_id: combobox_id, placeholder: "Select framework..." %>
+  <%= render "components/combobox/content", id: combobox_id do %>
+    <%= render "components/combobox/input", placeholder: "Search..." %>
+    <%= render "components/combobox/list" do %>
+      <%= render "components/combobox/option", value: "rails" do %>Ruby on Rails<% end %>
+      <%= render "components/combobox/option", value: "hanami" do %>Hanami<% end %>
+      <%= render "components/combobox/option", value: "sinatra" do %>Sinatra<% end %>
+    <% end %>
+    <%= render "components/combobox/empty" %>
   <% end %>
 <% end %>
 ```
 
-#### Buttons
+### Toast Notifications
 
 ```erb
-<%= link_to new_transaction_path, class: "button-primary" do %>
-  New Transaction
-  <%= icon_for(:money) %>
+<%# Add toaster to your layout %>
+<%= render "components/toaster", position: :bottom_right do %>
+  <%= toast_flash_messages %>
 <% end %>
+
+<%# In your controller %>
+flash[:success] = "Changes saved successfully!"
+
+<%# Or use the JavaScript API %>
+<script>
+  Toast.success("Profile updated!")
+  Toast.error("Something went wrong", { description: "Please try again." })
+</script>
 ```
 
-## Available Components
+### Tables
+
+```erb
+<%= render "components/table" do %>
+  <%= render "components/table/header" do %>
+    <%= render "components/table/row" do %>
+      <%= render "components/table/head" do %>Name<% end %>
+      <%= render "components/table/head" do %>Email<% end %>
+      <%= render "components/table/head" do %>Role<% end %>
+    <% end %>
+  <% end %>
+  <%= render "components/table/body" do %>
+    <% @users.each do |user| %>
+      <%= render "components/table/row" do %>
+        <%= render "components/table/cell" do %><%= user.name %><% end %>
+        <%= render "components/table/cell" do %><%= user.email %><% end %>
+        <%= render "components/table/cell" do %>
+          <%= render "components/badge", variant: :outline do %><%= user.role %><% end %>
+        <% end %>
+      <% end %>
+    <% end %>
+  <% end %>
+<% end %>
+```
+
+### Sidebar Layout
 
-Work in progress...
+```erb
+<%= render "components/sidebar/provider", default_open: app_sidebar_open? do %>
+  <%= render "components/sidebar" do %>
+    <%= render "components/sidebar/header" do %>
+      <span class="font-semibold">My App</span>
+    <% end %>
+    
+    <%= render "components/sidebar/content" do %>
+      <%= render "components/sidebar/group", title: "Navigation" do %>
+        <%= render "components/sidebar/menu" do %>
+          <%= render "components/sidebar/menu_item" do %>
+            <%= render "components/sidebar/menu_button",
+              title: "Dashboard",
+              url: dashboard_path,
+              icon_name: :home,
+              active: current_page?(dashboard_path) %>
+          <% end %>
+        <% end %>
+      <% end %>
+    <% end %>
+  <% end %>
 
-- Layout
-  - Sidebar
-  - Card
-- Navigation
-  - Menu Button
-  - Navigation Menu
-- Elements
-  - Button
-  - Alert
-  - Badge
-- Forms
-  - Input
-  - Select
-  - Checkbox
-  - Radio
+  <%= render "components/sidebar/inset" do %>
+    <%= render "components/header" do %>
+      <%= render "components/sidebar/trigger", icon_name: :panel_left %>
+    <% end %>
+    
+    <main class="flex-1 p-6">
+      <%= yield %>
+    </main>
+  <% end %>
+<% end %>
+```
 
-## Customization
+---
 
-### Theme Configuration
+## Theming
 
-Customize the look and feel of your components by modifying the theme variables:
+Components use CSS variables following the [shadcn/ui theming convention](https://ui.shadcn.com/docs/theming).
+
+The install generator adds default theme variables. Customize them in `app/assets/tailwind/application.css`:
 
 ```css
+:root {
+  /* Change primary to blue */
+  --primary: oklch(0.488 0.243 264.376);
+  --primary-foreground: oklch(0.985 0 0);
+  
+  /* Add custom colors */
+  --success: oklch(0.6 0.2 145);
+  --success-foreground: oklch(0.985 0 0);
+}
+
 @theme {
-  /* Colors */
-  --color-primary: oklch(21.34% 0 0);
-  --color-primary-foreground: oklch(98.48% 0 0);
+  --color-success: var(--success);
+  --color-success-foreground: var(--success-foreground);
+}
+```
 
-  /* Typography */
-  --font-display: "Inter var", "sans-serif";
+---
 
-  /* Spacing */
-  --sidebar-width: 16rem;
+## Helper Methods
 
-  /* ... other customizations ... */
-}
+| Helper | Purpose |
+|--------|---------|
+| `icon_for(name, options)` | Render an SVG icon |
+| `sidebar_state(cookie_name)` | Get sidebar state (`:expanded` or `:collapsed`) |
+| `sidebar_open?(cookie_name)` | Check if the sidebar is expanded |
+| `pagination_nav(pagy, route)` | Render pagination from Pagy object |
+| `pagination_simple(pagy, route)` | Render simple Previous/Next pagination |
+| `toast_flash_messages` | Render all flash messages as toasts |
+| `toast(variant, title, **options)` | Render a single toast notification |
+| `combobox(placeholder:, **options, &block)` | Builder pattern for combobox |
+| `combobox_simple(options:, **options)` | Data-driven simple combobox |
+
+---
+
+## Documentation
+
+### Getting Started
+
+- **[Getting Started](https://maquina.app/documentation/components/)** — Installation and setup
+
+### Layout
+
+- **[Sidebar](https://maquina.app/documentation/components/sidebar/)** — Navigation sidebar
+- **[Header](https://maquina.app/documentation/components/header/)** — Top navigation bar
+
+### Content
+
+- **[Card](https://maquina.app/documentation/components/card/)** — Content containers
+- **[Alert](https://maquina.app/documentation/components/alert/)** — Callout messages
+- **[Badge](https://maquina.app/documentation/components/badge/)** — Status indicators
+- **[Table](https://maquina.app/documentation/components/table/)** — Data tables
+- **[Empty State](https://maquina.app/documentation/components/empty/)** — Empty state placeholders
+
+### Navigation
+
+- **[Breadcrumbs](https://maquina.app/documentation/components/breadcrumbs/)** — Navigation trails
+- **[Dropdown Menu](https://maquina.app/documentation/components/dropdown-menu/)** — Dropdown menus
+- **[Pagination](https://maquina.app/documentation/components/pagination/)** — Page navigation
+
+### Interactive
+
+- **[Combobox](https://maquina.app/documentation/components/combobox/)** — Searchable dropdown selection
+- **[Toggle Group](https://maquina.app/documentation/components/toggle-group/)** — Toggle button groups
+
+### Feedback
+
+- **[Toast](https://maquina.app/documentation/components/toast/)** — Toast notifications
+
+### Forms
+
+- **[Form Components](https://maquina.app/documentation/components/form/)** — Buttons, inputs, and form styling
+
+---
+
+## Development
+
+Run the dummy app:
+
+```bash
+cd test/dummy
+bin/rails server
 ```
 
+Run tests:
+
+```bash
+bin/rails test
+```
+
+---
+
 ## Contributing
 
-Bug reports and pull requests are welcome on GitHub at <https://github.com/maquina-app/maquina_components>.
+Bug reports and pull requests are welcome on GitHub at [github.com/maquina-app/maquina_components](https://github.com/maquina-app/maquina_components).
+
+---
 
 ## License
 
-The gem is available as open source under the terms of the [MIT License](https://opensource.org/licenses/MIT).
+Copyright (c) [Mario Alberto Chávez Cárdenas](https://mariochavez.io)
+
+The gem is available as open source under the terms of the [MIT License](MIT-LICENSE).
+
+---
 
-## Acknowledgments
+## Credits
 
-- Design system inspired by [shadcn/ui](https://ui.shadcn.com/)
+- Design patterns from [shadcn/ui](https://ui.shadcn.com/)
 - Built with [TailwindCSS](https://tailwindcss.com/)
 - Powered by [Ruby on Rails](https://rubyonrails.org/)

data/app/assets/images/maquina.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="1268" height="326"><defs><linearGradient id="b" x1="21.152%" x2="100%" y1="21.848%" y2="93.468%"><stop offset="0%" stop-color="#50B1FD" stop-opacity=".96"/><stop offset="100%" stop-color="#DE77DE" stop-opacity=".96"/></linearGradient><filter id="a" width="109.8%" height="109.8%" x="-4.9%" y="-4.3%" filterUnits="objectBoundingBox"><feOffset dy="2" in="SourceAlpha" result="shadowOffsetOuter1"/><feGaussianBlur in="shadowOffsetOuter1" result="shadowBlurOuter1" stdDeviation="5"/><feColorMatrix in="shadowBlurOuter1" result="shadowMatrixOuter1" values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.5 0"/><feMerge><feMergeNode in="shadowMatrixOuter1"/><feMergeNode in="SourceGraphic"/></feMerge></filter></defs><g fill="none" fill-rule="evenodd"><g fill="url(#b)" filter="url(#a)"><path d="M163 0c90.022 0 163 72.978 163 163s-72.978 163-163 163S0 253.022 0 163 72.978 0 163 0Zm-3.035 32.001-2.3.033C82.529 33.836 7.373 106.038 39.71 209.826l.128-.06.17-.085c.666-.337 2.097-1.105 4.294-2.305l.648-.355c7.567-4.142 23.12-12.79 46.658-25.942 8.07 31.143 36.39 54.144 70.088 54.144 11.29 0 21.975-2.582 31.498-7.186l38.287 21.06c-67.582 40.567-122.657 31.134-165.224-28.3l-17.485 10.496c38.51 66.185 141.812 96.167 215.685 13.364-1.55-1.057-18.929-11.076-52.136-30.058 13.432-13.13 21.768-31.441 21.768-51.698 0-24.865-12.561-46.8-31.69-59.816l-.125-44.132c68.28 39.383 86.722 92.078 55.326 158.086l17.666 10.189c39.273-65.736 15.44-170.532-92.866-194.936-.176 1.88-.526 22.209-1.052 60.983a72.517 72.517 0 0 0-19.652-2.696c-38.356 0-69.744 29.799-72.234 67.487L52.886 179.3c0-78.766 36.46-121.07 109.378-126.91V32.012l-2.3-.01Zm2.067 100.096c17.214 0 31.17 13.941 31.17 31.139 0 17.197-13.956 31.138-31.17 31.138-17.215 0-31.17-13.94-31.17-31.138s13.955-31.139 31.17-31.139Z"/></g><g fill="#50B1FD" fill-rule="nonzero"><path d="M424.59 217V102.97h23.1v48.93h-2.1c0-11.48 1.47-21.105 4.41-28.875 2.94-7.77 7.315-13.65 13.125-17.64S476.18 99.4 484.86 99.4h1.26c8.82 0 16.135 1.995 21.945 5.985 5.81 3.99 10.15 9.87 13.02 17.64 2.87 7.77 4.305 17.395 4.305 28.875h-7.35c0-11.48 1.505-21.105 4.515-28.875s7.42-13.65 13.23-17.64c5.81-3.99 13.055-5.985 21.735-5.985h1.26c8.82 0 16.17 1.995 22.05 5.985 5.88 3.99 10.325 9.87 13.335 17.64 3.01 7.77 4.515 17.395 4.515 28.875V217h-29.19v-67.83c0-7.14-1.82-12.845-5.46-17.115-3.64-4.27-8.82-6.405-15.54-6.405-6.72 0-12.11 2.205-16.17 6.615-4.06 4.41-6.09 10.325-6.09 17.745V217h-29.19v-67.83c0-7.14-1.82-12.845-5.46-17.115-3.64-4.27-8.82-6.405-15.54-6.405-6.72 0-12.11 2.205-16.17 6.615-4.06 4.41-6.09 10.325-6.09 17.745V217h-29.19ZM688.56 217v-33.81h-4.83V145.6c0-6.58-1.61-11.48-4.83-14.7-3.22-3.22-8.19-4.83-14.91-4.83-3.5 0-7.7.07-12.6.21-4.9.14-9.835.315-14.805.525-4.97.21-9.415.455-13.335.735v-24.78c3.22-.28 6.86-.56 10.92-.84 4.06-.28 8.225-.455 12.495-.525s8.295-.105 12.075-.105c11.76 0 21.525 1.54 29.295 4.62 7.77 3.08 13.65 7.91 17.64 14.49s5.985 15.19 5.985 25.83V217h-23.1Zm-36.75 2.94c-8.26 0-15.505-1.47-21.735-4.41-6.23-2.94-11.06-7.14-14.49-12.6-3.43-5.46-5.145-12.04-5.145-19.74 0-8.4 2.065-15.26 6.195-20.58 4.13-5.32 9.94-9.31 17.43-11.97s16.275-3.99 26.355-3.99h26.46v17.43H660c-6.72 0-11.865 1.645-15.435 4.935-3.57 3.29-5.355 7.525-5.355 12.705s1.785 9.38 5.355 12.6c3.57 3.22 8.715 4.83 15.435 4.83 4.06 0 7.805-.735 11.235-2.205 3.43-1.47 6.3-3.99 8.61-7.56 2.31-3.57 3.605-8.435 3.885-14.595l7.14 8.19c-.7 7.98-2.625 14.7-5.775 20.16-3.15 5.46-7.49 9.625-13.02 12.495-5.53 2.87-12.285 4.305-20.265 4.305ZM816.87 259v-75.81l8.61-13.44c-.42 10.92-2.66 20.195-6.72 27.825-4.06 7.63-9.52 13.405-16.38 17.325-6.86 3.92-14.77 5.88-23.73 5.88-8.12 0-15.47-1.505-22.05-4.515s-12.215-7.21-16.905-12.6c-4.69-5.39-8.33-11.62-10.92-18.69-2.59-7.07-3.885-14.735-3.885-22.995v-4.41c0-8.12 1.33-15.715 3.99-22.785s6.405-13.23 11.235-18.48c4.83-5.25 10.57-9.38 17.22-12.39 6.65-3.01 14.105-4.515 22.365-4.515 9.52 0 17.78 2.03 24.78 6.09 7 4.06 12.495 9.975 16.485 17.745 3.99 7.77 6.195 17.255 6.615 28.455h-4.62v-48.72h23.1V259h-29.19Zm-30.66-63.21c5.74 0 10.99-1.295 15.75-3.885s8.575-6.37 11.445-11.34c2.87-4.97 4.305-10.815 4.305-17.535v-8.4c0-6.72-1.47-12.355-4.41-16.905-2.94-4.55-6.79-8.05-11.55-10.5-4.76-2.45-9.94-3.675-15.54-3.675-6.3 0-11.865 1.505-16.695 4.515s-8.61 7.28-11.34 12.81c-2.73 5.53-4.095 11.865-4.095 19.005 0 7.14 1.4 13.405 4.2 18.795 2.8 5.39 6.615 9.59 11.445 12.6s10.325 4.515 16.485 4.515ZM907.59 220.57c-13.16 0-23.345-4.34-30.555-13.02-7.21-8.68-10.815-21.56-10.815-38.64v-66.15h29.19v68.67c0 7 1.96 12.565 5.88 16.695 3.92 4.13 9.24 6.195 15.96 6.195 6.72 0 12.215-2.17 16.485-6.51s6.405-10.22 6.405-17.64v-67.41h29.19V217h-23.1v-48.51h2.31c0 11.48-1.47 21.07-4.41 28.77-2.94 7.7-7.35 13.51-13.23 17.43-5.88 3.92-13.23 5.88-22.05 5.88h-1.26ZM997.89 217V102.97h29.19V217h-29.19Zm-15.96-92.19v-21.84h45.15v21.84h-45.15Zm26.67-35.49c-5.74 0-9.975-1.505-12.705-4.515-2.73-3.01-4.095-6.825-4.095-11.445s1.365-8.4 4.095-11.34c2.73-2.94 6.965-4.41 12.705-4.41s9.94 1.47 12.6 4.41c2.66 2.94 3.99 6.72 3.99 11.34s-1.33 8.435-3.99 11.445-6.86 4.515-12.6 4.515ZM1050.18 217V102.97h23.1v48.93h-2.1c0-11.62 1.54-21.315 4.62-29.085s7.665-13.615 13.755-17.535c6.09-3.92 13.685-5.88 22.785-5.88h1.26c13.58 0 23.87 4.375 30.87 13.125s10.5 21.805 10.5 39.165V217h-29.19v-67.83c0-7-1.995-12.67-5.985-17.01-3.99-4.34-9.485-6.51-16.485-6.51-7.14 0-12.915 2.205-17.325 6.615s-6.615 10.325-6.615 17.745V217h-29.19ZM1244.85 217v-33.81h-4.83V145.6c0-6.58-1.61-11.48-4.83-14.7-3.22-3.22-8.19-4.83-14.91-4.83-3.5 0-7.7.07-12.6.21-4.9.14-9.835.315-14.805.525-4.97.21-9.415.455-13.335.735v-24.78c3.22-.28 6.86-.56 10.92-.84 4.06-.28 8.225-.455 12.495-.525s8.295-.105 12.075-.105c11.76 0 21.525 1.54 29.295 4.62 7.77 3.08 13.65 7.91 17.64 14.49s5.985 15.19 5.985 25.83V217h-23.1Zm-36.75 2.94c-8.26 0-15.505-1.47-21.735-4.41-6.23-2.94-11.06-7.14-14.49-12.6-3.43-5.46-5.145-12.04-5.145-19.74 0-8.4 2.065-15.26 6.195-20.58 4.13-5.32 9.94-9.31 17.43-11.97s16.275-3.99 26.355-3.99h26.46v17.43h-26.88c-6.72 0-11.865 1.645-15.435 4.935-3.57 3.29-5.355 7.525-5.355 12.705s1.785 9.38 5.355 12.6c3.57 3.22 8.715 4.83 15.435 4.83 4.06 0 7.805-.735 11.235-2.205 3.43-1.47 6.3-3.99 8.61-7.56 2.31-3.57 3.605-8.435 3.885-14.595l7.14 8.19c-.7 7.98-2.625 14.7-5.775 20.16-3.15 5.46-7.49 9.625-13.02 12.495-5.53 2.87-12.285 4.305-20.265 4.305Z"/></g></g></svg>