PageSourceSearch

https://railsblocks.com/docs/installation

html railsblocks.com collected 2026-09-25 20:22:07 UTC 558,144 bytes, 5,809 lines download raw bytes

1<!DOCTYPE html>
2<html lang="en" class="bg-[#FCFBF9] dark:bg-[#111111] text-neutral-800 dark:text-neutral-50">
3  <head>
4    <title>Rails Blocks | Installation instructions for Ruby on Rails components</title>
5<meta name="description" content="How to install Rails Blocks for your Ruby on Rails application. Simply copy and paste the code into your application and you&#39;re good to go." />
6<meta name="keywords" content="rails, ui, components, free, stimulus, controllers, ruby on rails, rails blocks, rails blocks ui, rails blocks components, rails blocks ui components, rails blocks free, rails blocks pro, rails blocks pro ui, rails blocks pro ui components, rails blocks pro ui components free, installation, install, how to install, how to install rails blocks, how to install rails blocks ui, how to install rails blocks components, how to install rails blocks ui components, how to install rails blocks free, how to install rails blocks pro, how to install rails blocks pro ui, how to install rails blocks pro ui components, how to install rails blocks pro ui components free" />
7    <meta name="viewport" content="width=device-width,initial-scale=1">
8    <meta charset="utf-8">
9
10    <!-- Theme initialization script to prevent FOUC -->
11    
11<script>
12      (function() {
13        function selectedPalette() {
14          const storedMode = localStorage.getItem("theme");
15
16          if (storedMode === "light" || storedMode === "dark") return storedMode;
17
18          return window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
19        }
20
21        function paintTheme(root) {
22          const palette = selectedPalette();
23          const dark = palette === "dark";
24
25          root.classList.toggle("dark", dark);
26          root.classList.toggle("sl-theme-dark", dark);
27          root.style.colorScheme = palette;
28          root.dataset.theme = palette;
29        }
30
31        paintTheme(document.documentElement);
32
33        document.addEventListener("turbo:before-render", function(event) {
34          paintTheme(event.detail.newBody.ownerDocument.documentElement);
35        });
36
37        document.addEventListener("turbo:render", function() {
38          paintTheme(document.documentElement);
39        });
40
41        document.addEventListener("turbo:load", function() {
42          paintTheme(document.documentElement);
43        });
44      })();
45    </script>
45
46
47    <!-- SEO Meta Tags -->
48    <meta name="author" content="Rails Blocks">
49    <meta name="robots" content="index, follow">
50
51    <!-- Open Graph / Facebook -->
52    <meta property="og:type" content="website">
53    <meta property="og:url" content="https://railsblocks.com/docs/installation">
54    <meta property="og:title" content="Rails Blocks - Rails UI Components using Tailwind CSS and Stimulus">
55    <meta property="og:description" content="Rails UI components for building modern web applications, simply copy and paste the code into your app or use our CLI &amp; MCP server.">
56    <meta property="og:image" content="https://railsblocks.com/assets/opengraph-eb5310cb5b513a6a434977993abdaa571cb7060821e56a1a482eaa5435b6aef4.png">
57
58    <!-- Twitter -->
59    <meta property="twitter:card" content="summary_large_image">
60    <meta property="twitter:url" content="https://railsblocks.com/docs/installation">
61    <meta property="twitter:title" content="Rails Blocks - Rails UI Components using Tailwind CSS and Stimulus">
62    <meta property="twitter:description" content="Rails UI components for building modern web applications, simply copy and paste the code into your app or use our CLI &amp; MCP server.">
63    <meta property="twitter:image" content="https://railsblocks.com/assets/opengraph-eb5310cb5b513a6a434977993abdaa571cb7060821e56a1a482eaa5435b6aef4.png">
64
65    <!-- Canonical URL -->
66    <link rel="canonical" href="https://railsblocks.com/docs/installation">
67
68    <!-- RSS Feed -->
69    <link rel="alternate" type="application/rss+xml" title="Rails Blocks - Component Updates" href="https://railsblocks.com/feeds/documentation.xml">
70
71    <meta name="csrf-param" content="authenticity_token" />
72<meta name="csrf-token" content="2-zvxsarrcbOjIKhULjPauDRcrkCSYY_7XJ6-gibonuVzlQKBVg3uKS0mzKiXuGv81WzVa-3x8YJZ2qH6PdlAA" />
73    
74
75    <!-- Inter font stylesheet -->
76    <link rel="preconnect" href="https://rsms.me" crossorigin>
77    <link rel="stylesheet" href="https://rsms.me/inter/inter.css" crossorigin="anonymous">
78
79    <!-- Preload Quincy font to prevent FOUT -->
80    <link rel="preload" href="/QuincyCF-Bold.woff" as="font" type="font/woff" crossorigin>
81
82    <!-- Geist Mono for code blocks (shadcn style) -->
83    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/fonts/geist-mono/style.min.css">
84
85    <!-- Air Datepicker CSS -->
86    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/air-datepicker.min.css">
87
88    <!-- PhotoSwipe CSS -->
89    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/photoswipe/dist/photoswipe.css">
90
91    <!--  -->
92    <link rel="stylesheet" href="/assets/application-4e2eb78ae7afb82739067fcdf95589ec6529fc31571e977ee8fc82478ac9c706.css" />
93    
93<script type="importmap" data-turbo-track="reload">{
94  "imports": {
95    "application": "/assets/application-ce2887f446009c0ecd8727deb726614ba1e3874296f9bb9ba2afbf7cdb0bc1de.js",
96    "@hotwired/stimulus": "/assets/stimulus-f75215805563870a61ee9dc5a207ce46d4675c7e667558a54344fd1e7baa697f.js",
97    "@hotwired/stimulus-loading": "/assets/stimulus-loading-3576ce92b149ad5d6959438c6f291e2426c86df3b874c525b30faad51b0d96b3.js",
98    "@hotwired/turbo-rails": "/assets/turbo.min-3e48f1801baf343469811ff2c47889596fb8b7eb6d8fa63c4d81d0b94dc8c16d.js",
99    "@rails/actioncable": "/assets/actioncable.esm-b66d83871f0a453b10ba8b4c147c2bafa655caaa5d13fa34e9bf361c1c2aedb7.js",
100    "chartkick": "/assets/chartkick-8eb76e6cbdb540d495739fce84049fd038e59e7fd55c9e08e47b0b5a74b62db4.js",
101    "Chart.bundle": "/assets/Chart.bundle-f9da773cb982870fc03e616b7bcbfcc56462d3b0188cd9e441f8d8398c7e9482.js",
102    "@rails/activestorage": "/assets/activestorage.esm-3f2e9c040e7870f701a98bbbb1c77c979bbbdab80af967b59174f14d9388a0c1.js",
103    "@activeadmin/activeadmin": "https://ga.jspm.io/npm:@activeadmin/[email protected]/dist/active_admin.js",
104    "@rails/ujs": "https://ga.jspm.io/npm:@rails/[email protected]/app/assets/javascripts/rails-ujs.esm.js",
105    "motion": "https://cdn.jsdelivr.net/npm/motion@latest/+esm",
106    "tom-select": "https://cdn.jsdelivr.net/npm/[email protected]/+esm",
107    "tailwindcss-stimulus-components": "https://cdn.jsdelivr.net/npm/[email protected]/+esm",
108    "@rails/request.js": "https://cdn.jsdelivr.net/npm/@rails/[email protected]/+esm",
109    "number-flow": "https://esm.sh/number-flow",
110    "number-flow/group": "https://esm.sh/number-flow/group",
111    "air-datepicker": "https://esm.sh/[email protected]",
112    "air-datepicker/locale/en": "https://esm.sh/[email protected]/locale/en",
113    "embla-carousel": "https://cdn.jsdelivr.net/npm/embla-carousel@latest/+esm",
114    "embla-carousel-wheel-gestures": "https://cdn.jsdelivr.net/npm/embla-carousel-wheel-gestures@latest/+esm",
115    "@floating-ui/dom": "https://cdn.jsdelivr.net/npm/@floating-ui/[email protected]/+esm",
116    "emoji-mart": "https://cdn.jsdelivr.net/npm/emoji-mart@latest/dist/browser.js",
117    "@emoji-mart/data": "https://cdn.jsdelivr.net/npm/@emoji-mart/data@latest/+esm",
118    "posthog-js": "https://cdn.jsdelivr.net/npm/posthog-js@latest/+esm",
119    "photoswipe": "https://cdn.jsdelivr.net/npm/photoswipe/dist/photoswipe.esm.js",
120    "prism": "/assets/prism-ee2a382b8379bfb08180c8374d286fd968aa297c26307217e2f9569cd2dfa857.js",
121    "lexxy_extensions": "/assets/lexxy_extensions-3a4f8ce2ad2947c7dde1befd2a3ff05fe20dbb90efe89e487ab212345ca90f20.js",
122    "lucide_callout_icons": "/assets/lucide_callout_icons-2ed2b2287453d7d7f526fa6b646eb164a21f45f0af46db464998ba162f6a5cc7.js",
123    "controllers/accordion_controller": "/assets/controllers/accordion_controller-68f918b7a16360dae870c023974f8241d23da31b691fe7a85fd105ef6bacd3e3.js",
124    "controllers/activity_stats_controller": "/assets/controllers/activity_stats_controller-2bf1f94be12f4d38e945e87992e089bb47096da3a1babd59b7a0bd53c0011a39.js",
125    "controllers/analytics_controller": "/assets/controllers/analytics_controller-2e76449d24f6e5675c20c0a447dc0187d26f88802eab3f9769e65f3171df85b1.js",
126    "controllers/animated_number_controller": "/assets/controllers/animated_number_controller-cc897cbf7500108d75b7410c4d8f99e89fed6834f5432fc3da637b3d23f1e8a8.js",
127    "controllers/animated_number_controller_basic": "/assets/controllers/animated_number_controller_basic-413bc082033e8d3cde1eff9c6ee43ba1c1b6ae49f9e97d29b69621cdf08121b4.js",
128    "controllers/application": "/assets/controllers/application-992de401b2daa10b774ececa0f4b3a9a17784229cf80053802bb0278bea09c8d.js",
129    "controllers/autocomplete_controller": "/assets/controllers/autocomplete_controller-61c12e18fdcf79da83234e4f312bf08e11db2a7cfd9a62f46df0ad26e0142cd4.js",
130    "controllers/autocomplete_fuzzy_search_controller": "/assets/controllers/autocomplete_fuzzy_search_controller-41616d489457167e6ae856554df9faf8f3cbbae4773ba34efb39e5129b2768fe.js",
131    "controllers/autocomplete_navigation_controller": "/assets/controllers/autocomplete_navigation_controller-92f7001ba93b8fb7cfe5a46e0c3d3f01e30b00d40955db7a3d3766fcdb19a7fc.js",
132    "controllers/autocomplete_recent_searches_controller": "/assets/controllers/autocomplete_recent_searches_controller-126a09f754580a64711526524116256d8227e895cf0b27ff6241d14e8f994795.js",
133    "controllers/autogrow_controller": "/assets/controllers/autogrow_controller-dc2f6c6542bb0c085cf6e42f4de74ed0e4d064eb86467f918cd1c4fc3a32db15.js",
134    "controllers/autosubmit_controller": "/assets/controllers/autosubmit_controller-4128b3047af7088a35b78209c4e5a5857a8cdf7e6db9c87266a1bfc006563423.js",
135    "controllers/banner_controller": "/assets/controllers/banner_controller-89c7dd5e101132f49513044f06948e33368ad440d5c4e3a45a82274105a599ac.js",
136    "controllers/black_hole_background_controller": "/assets/controllers/black_hole_background_controller-d7ea14388fc91359f527ab25db93e5f754606ce33dc7f3b0f38bb4ce7806e0f4.js",
137    "controllers/carousel_controller": "/assets/controllers/carousel_controller-7e335df24449025cf025c55e28e81452c6acc982061a726d42df0519d517e7f7.js",
138    "controllers/checkbox_select_all_controller": "/assets/controllers/checkbox_select_all_controller-47d9d094c1de4a2977ebc3995494b0fc0bf32b77bf2fa8153b38dfd5eb118992.js",
139    "controllers/clickable_animated_number_controller": "/assets/controllers/clickable_animated_number_controller-cf1c998aa0af94b43f0db582390ae1950468f67f061f9d9b7247f30668d899cd.js",
140    "controllers/clipboard_controller": "/assets/controllers/clipboard_controller-b0c3a4b7bc7c889ebdd1ceec1f605d2a69e65188d9f8aedde952f33c97e08452.js",
141    "controllers/code_filter_controller": "/assets/controllers/code_filter_controller-b78aa62f6f5dde0c534f96a2198b7c2c104e7b0765cef49eda95d4503f8220da.js",
142    "controllers/collapsible_controller": "/assets/controllers/collapsible_controller-a39d5b7ff31c5eb807b64d40a7e15546f97d3b7617c1c33990d1a482c26d3d13.js",
143    "controllers/component_search_controller": "/assets/controllers/component_search_controller-fa06589fe987df949cdcddb127a728c1da3d86ff278ee2d95f0bac0bdd567774.js",
144    "controllers/conditional_field_controller": "/assets/controllers/conditional_field_controller-97799033d1b51a7008e0d8e33c2fc61c70a8304ede19eb49fdd335f3d3035a63.js",
145    "controllers/confirmation_controller": "/assets/controllers/confirmation_controller-4a5132ce4df6e7eb2f80829c45a6e47571543645bada92ec0ec54d9044c77b3f.js",
146    "controllers/context_menu_controller": "/assets/controllers/context_menu_controller-77e47db59b27f9ec9fde1fcb9ca6466aee4076ab981924e779542c3454f3c93d.js",
147    "controllers/datatable_controller": "/assets/controllers/datatable_controller-f83ec938c9d9b27a981de4924f4bff7a1fbafae2904c98bcdfe48d5ca6fa393c.js",
148    "controllers/datatable_preview_controller": "/assets/controllers/datatable_preview_controller-c3f3a5cda07c2d66e871d16e1998b89b2eeb56c67a72a786bce23b39f48fa1ee.js",
149    "controllers/date_picker_controller": "/assets/controllers/date_picker_controller-253d8b524c4baff070b5e52ed868125b97bc24351fec1b787f90ce8ff2feb0c0.js",
150    "controllers/dock_controller": "/assets/controllers/dock_controller-ec5240a11befe00bce9599e61fd9cb94c79709b468e79b944c59f475f963055b.js",
151    "controllers/drawer_controller": "/assets/controllers/drawer_controller-b8666297ccaaac7a794d293f27cf2c4dff429d76f7d59d9d3900813c2a95f677.js",
152    "controllers/dropdown_popover_controller": "/assets/controllers/dropdown_popover_controller-dcfce815f3e53a50fe53ed7d2f36d49d04c89ba4afbe7b395d43340fe9c12bf9.js",
153    "controllers/emoji_picker_controller": "/assets/controllers/emoji_picker_controller-c056b2f8bb9032e3909380d4be0b521a9edfbe5a8d1c60d06e4e96e988b30962.js",
154    "controllers/feedback_controller": "/assets/controllers/feedback_controller-b3c361e5a39489c06cdc30cd9946bd4ab76d27b5eadc25aeadd9f46f9f14a3ae.js",
155    "controllers/header_controller": "/assets/controllers/header_controller-ad9c787275b782e8ae53ee6bb4c4e48e4aeec2378eb9505bfe3a0078fc5bddad.js",
156    "controllers/hello_controller": "/assets/controllers/hello_controller-7f59110cda0590e842fa21ec58f351ca3df8385326afb50f932d9e87d0bf5355.js",
157    "controllers/highlight_controller": "/assets/controllers/highlight_controller-2ee2d0fe0f95be1b8f24bf6a226811ca1d4d99ded02a416828bd0cd03d993b36.js",
158    "controllers/hotkey_controller": "/assets/controllers/hotkey_controller-4906788b99654b4bdebaff5ddb16cbd3023b5c9d88a279134af3cbe119992ddd.js",
159    "controllers/increment_controller": "/assets/controllers/increment_controller-9c6acdc5317e20cc593af2845447862f69efed2c875173fb3bcb9fbf6bd4aa9f.js",
160    "controllers": "/assets/controllers/index-ddceca80534a826b5fd4a98c6bb2e10f6e25d3c462fcaeb966f4ec51a349312e.js",
161    "controllers/infinite_scroll_controller": "/assets/controllers/infinite_scroll_controller-d794b664cbe6bd01f3f3bf4737e8bd396d2c65fffc1aed3f70e777ef82bfb24e.js",
162    "controllers/inline_edit_controller": "/assets/controllers/inline_edit_controller-1559f3f1eae67ab844b2ca5a8515fd2affb99a7dcdc48047fd78e7d1e35d5820.js",
163    "controllers/lightbox_controller": "/assets/controllers/lightbox_controller-70a04fdfe82959f273f2d153b68e8c49441b936e3f9d85de07c12ed4cd569ff5.js",
164    "controllers/marquee_controller": "/assets/controllers/marquee_controller-f62eea56769547d92df5fe25ab33e95d93223fd084e17b632ead8212e3298994.js",
165    "controllers/menu_controller": "/assets/controllers/menu_controller-8f656dcc8accdb5f52cabd89aa015721d737cd78e58b4d44725b91b27428be4f.js",
166    "controllers/modal_controller": "/assets/controllers/modal_controller-b0a1489a5d752ad768f2e5b7b8b3538db41092d719630c6ac1723224d4921732.js",
167    "controllers/navbar_controller": "/assets/controllers/navbar_controller-e2e93536f44ab12fb542e40b361a9e916e3a70f4d0a3d8a6da435c38faefd802.js",
168    "controllers/nested_form_controller": "/assets/controllers/nested_form_controller-b168b9a507594df9ce8c4d974d12397365b235b0f73371cae12b5a937804c972.js",
169    "controllers/newsletter_controller": "/assets/controllers/newsletter_controller-5f069f0e526e8ca1fb7e9cea5d3c537c306682a8e7911ec7ffd3f73c571f80de.js",
170    "controllers/onboarding_checklist_controller": "/assets/controllers/onboarding_checklist_controller-39dc6bf4879beb8690ffc064555e32e8f86b2cce939d7d3674d568bbe3db0aaf.js",
171    "controllers/os_detect_controller": "/assets/controllers/os_detect_controller-fdabd286329d2fcbc361cd807cea42ecae29e5274b63efb666e29b57e8215557.js",
172    "controllers/page_view_controller": "/assets/controllers/page_view_controller-f387290e103662ff4f8f0d30eb2a19fd78b0657d234018629d2e5eb06fd
1725e36d.js",
173    "controllers/password_controller": "/assets/controllers/password_controller-ff0f1a76b7c5eecd5b8118091db2df12bf3f17e7fdcf9c526c5555ef93a2f539.js",
174    "controllers/popover_controller": "/assets/controllers/popover_controller-1b1bea1bfe533d7aa2fb2dd4654c96abdf611cd9e554261ca3506fa8d19baee1.js",
175    "controllers/pricing_tabs_controller": "/assets/controllers/pricing_tabs_controller-ef4263b0b8f9c30dd8c0ea5e1efe413e3a83912d7e7fffe3b3609f8ac67bffd4.js",
176    "controllers/rainbow_button_controller": "/assets/controllers/rainbow_button_controller-5b51b4e14a1ca6e2d6b09fa42909695f780b5434f288f0d138bcadfd265d5d64.js",
177    "controllers/read_more_controller": "/assets/controllers/read_more_controller-85ad41396138e5bff247d29f97a423b274daf4c2f6db4496b16253e2f01492d9.js",
178    "controllers/scroll_area_controller": "/assets/controllers/scroll_area_controller-69635327e35071b6db15b22898c8d0dc8f7ce53a5a916c2f1906b0c9b02c41e9.js",
179    "controllers/scroll_preservation_controller": "/assets/controllers/scroll_preservation_controller-2b864175645163639087e02cf9f543233a9b6e77ac0d7b1d84c86631ba5b9d7c.js",
180    "controllers/searchable_dropdown_controller": "/assets/controllers/searchable_dropdown_controller-430e5f4fc4213d1b0f2c116117c21bc57e91713fec486e0a52765213712d6d3c.js",
181    "controllers/select_controller": "/assets/controllers/select_controller-74d1f70342c3770a333db97ce592c0cec58d74fdca287b0d8c9c6a5bdfb70410.js",
182    "controllers/setup_code_filter_controller": "/assets/controllers/setup_code_filter_controller-475bc53e471e0ba57fb81260231480539fcf0dfef1500e66cae2063b75d918d3.js",
183    "controllers/shoelace_color_picker_controller": "/assets/controllers/shoelace_color_picker_controller-fb2867531d003d3ee4f2199d292aef8152f7ac9dd0ab8123d6613a39ab813aa4.js",
184    "controllers/sidebar_controller": "/assets/controllers/sidebar_controller-22283653891c7def50a59bbc0cdd21077b4d025a78a82b1bf83013e38e506c3b.js",
185    "controllers/slideover_controller": "/assets/controllers/slideover_controller-d2784e5efe60760dfdfe1b45360606eeabe6ea17c63e1078d678bb3eb0fcdb8b.js",
186    "controllers/slider_number_flow_controller": "/assets/controllers/slider_number_flow_controller-7dd050abe7736568909063d3c668689012c736b45271025c17e280a90018c298.js",
187    "controllers/snippet_controller": "/assets/controllers/snippet_controller-ba0646ac1f8c7fea6e6a056e38781569afce34c48ec61e6100d7c8980305067c.js",
188    "controllers/stepper_controller": "/assets/controllers/stepper_controller-5f3f3249eea7190c323e5dfbcc0eaa71d044f1c4d200d669159edb93ab741a76.js",
189    "controllers/table_of_contents_controller": "/assets/controllers/table_of_contents_controller-3f096fbcf4c30a5a5536ec7b189890b9cfab901866edc5ad7ebf80b6e717537a.js",
190    "controllers/tabs_controller": "/assets/controllers/tabs_controller-4cdc2eb1b5c92d421f37f9dfd4bb69e9a3091ae1b1eebc0a9510073a5476a872.js",
191    "controllers/text_cycler_controller": "/assets/controllers/text_cycler_controller-68fe49e432b67f3ad3cae918b14cc8fb499cb792117d1808d6748beb735210e7.js",
192    "controllers/theme_builder_controller": "/assets/controllers/theme_builder_controller-14517cedf554a7a1de2e2f0a22ab918417c3e476d02f1700afa4277569b7faed.js",
193    "controllers/theme_controller": "/assets/controllers/theme_controller-92f859a51c4d051c21b1f8aeec06b5c71d50f5bcdcc3ba4431ba0f8cbaedeccf.js",
194    "controllers/toast_controller": "/assets/controllers/toast_controller-35d241a8c227f21dc898225e10b4e0cde9508a0a82c06756433cb0d2e7d68a0f.js",
195    "controllers/tooltip_controller": "/assets/controllers/tooltip_controller-a8c00f3a945fdd0ed6ff54b226a8c942400b7d9894d5c0d1f55d2d44ac848dd5.js",
196    "controllers/tree_view_controller": "/assets/controllers/tree_view_controller-9e6b47ec5b19a36c0ec6eacf8cac1e6e59fdb2b0bfdc28dd8edadc6a7c11a350.js",
197    "controllers/turnstile_controller": "/assets/controllers/turnstile_controller-c93aec3bd6a87f100d2382b76bc47805c17452f0fd05abd518b78c66e60b161e.js",
198    "controllers/two_factor_controller": "/assets/controllers/two_factor_controller-bebbef5416ed915b6d56ab303efaf880279af94ce63fe4334f160007f398975b.js",
199    "channels/consumer": "/assets/channels/consumer-e499b626f1d691b5bdf7d83ff61cee46531b74e527aa0c2b78a229dc34d465ab.js",
200    "channels": "/assets/channels/index-04024382391bb910584145d8113cf35ef376b55d125bb4516cebeb14ce788597.js"
201  }
202}</script>
202
203<link rel="modulepreload" href="/assets/application-ce2887f446009c0ecd8727deb726614ba1e3874296f9bb9ba2afbf7cdb0bc1de.js">
204<link rel="modulepreload" href="/assets/stimulus-f75215805563870a61ee9dc5a207ce46d4675c7e667558a54344fd1e7baa697f.js">
205<link rel="modulepreload" href="/assets/stimulus-loading-3576ce92b149ad5d6959438c6f291e2426c86df3b874c525b30faad51b0d96b3.js">
206<link rel="modulepreload" href="/assets/turbo.min-3e48f1801baf343469811ff2c47889596fb8b7eb6d8fa63c4d81d0b94dc8c16d.js">
207<link rel="modulepreload" href="/assets/actioncable.esm-b66d83871f0a453b10ba8b4c147c2bafa655caaa5d13fa34e9bf361c1c2aedb7.js">
208<link rel="modulepreload" href="/assets/chartkick-8eb76e6cbdb540d495739fce84049fd038e59e7fd55c9e08e47b0b5a74b62db4.js">
209<link rel="modulepreload" href="/assets/Chart.bundle-f9da773cb982870fc03e616b7bcbfcc56462d3b0188cd9e441f8d8398c7e9482.js">
210<link rel="modulepreload" href="/assets/activestorage.esm-3f2e9c040e7870f701a98bbbb1c77c979bbbdab80af967b59174f14d9388a0c1.js">
211<link rel="modulepreload" href="https://ga.jspm.io/npm:@activeadmin/[email protected]/dist/active_admin.js">
212<link rel="modulepreload" href="https://ga.jspm.io/npm:@rails/[email protected]/app/assets/javascripts/rails-ujs.esm.js">
213<link rel="modulepreload" href="https://cdn.jsdelivr.net/npm/motion@latest/+esm">
214<link rel="modulepreload" href="https://cdn.jsdelivr.net/npm/[email protected]/+esm">
215<link rel="modulepreload" href="https://cdn.jsdelivr.net/npm/[email protected]/+esm">
216<link rel="modulepreload" href="https://cdn.jsdelivr.net/npm/@rails/[email protected]/+esm">
217<link rel="modulepreload" href="https://esm.sh/number-flow">
218<link rel="modulepreload" href="https://esm.sh/number-flow/group">
219<link rel="modulepreload" href="https://esm.sh/[email protected]">
220<link rel="modulepreload" href="https://esm.sh/[email protected]/locale/en">
221<link rel="modulepreload" href="https://cdn.jsdelivr.net/npm/embla-carousel@latest/+esm">
222<link rel="modulepreload" href="https://cdn.jsdelivr.net/npm/embla-carousel-wheel-gestures@latest/+esm">
223<link rel="modulepreload" href="https://cdn.jsdelivr.net/npm/@floating-ui/[email protected]/+esm">
224<link rel="modulepreload" href="https://cdn.jsdelivr.net/npm/emoji-mart@latest/dist/browser.js">
225<link rel="modulepreload" href="https://cdn.jsdelivr.net/npm/@emoji-mart/data@latest/+esm">
226<link rel="modulepreload" href="https://cdn.jsdelivr.net/npm/posthog-js@latest/+esm">
227<link rel="modulepreload" href="https://cdn.jsdelivr.net/npm/photoswipe/dist/photoswipe.esm.js">
228<link rel="modulepreload" href="/assets/prism-ee2a382b8379bfb08180c8374d286fd968aa297c26307217e2f9569cd2dfa857.js">
229<link rel="modulepreload" href="/assets/lexxy_extensions-3a4f8ce2ad2947c7dde1befd2a3ff05fe20dbb90efe89e487ab212345ca90f20.js">
230<link rel="modulepreload" href="/assets/lucide_callout_icons-2ed2b2287453d7d7f526fa6b646eb164a21f45f0af46db464998ba162f6a5cc7.js">
231<link rel="modulepreload" href="/assets/controllers/accordion_controller-68f918b7a16360dae870c023974f8241d23da31b691fe7a85fd105ef6bacd3e3.js">
232<link rel="modulepreload" href="/assets/controllers/activity_stats_controller-2bf1f94be12f4d38e945e87992e089bb47096da3a1babd59b7a0bd53c0011a39.js">
233<link rel="modulepreload" href="/assets/controllers/analytics_controller-2e76449d24f6e5675c20c0a447dc0187d26f88802eab3f9769e65f3171df85b1.js">
234<link rel="modulepreload" href="/assets/controllers/animated_number_controller-cc897cbf7500108d75b7410c4d8f99e89fed6834f5432fc3da637b3d23f1e8a8.js">
235<link rel="modulepreload" href="/assets/controllers/animated_number_controller_basic-413bc082033e8d3cde1eff9c6ee43ba1c1b6ae49f9e97d29b69621cdf08121b4.js">
236<link rel="modulepreload" href="/assets/controllers/application-992de401b2daa10b774ececa0f4b3a9a17784229cf80053802bb0278bea09c8d.js">
237<link rel="modulepreload" href="/assets/controllers/autocomplete_controller-61c12e18fdcf79da83234e4f312bf08e11db2a7cfd9a62f46df0ad26e0142cd4.js">
238<link rel="modulepreload" href="/assets/controllers/autocomplete_fuzzy_search_controller-41616d489457167e6ae856554df9faf8f3cbbae4773ba34efb39e5129b2768fe.js">
239<link rel="modulepreload" href="/assets/controllers/autocomplete_navigation_controller-92f7001ba93b8fb7cfe5a46e0c3d3f01e30b00d40955db7a3d3766fcdb19a7fc.js">
240<link rel="modulepreload" href="/assets/controllers/autocomplete_recent_searches_controller-126a09f754580a64711526524116256d8227e895cf0b27ff6241d14e8f994795.js">
241<link rel="modulepreload" href="/assets/controllers/autogrow_controller-dc2f6c6542bb0c085cf6e42f4de74ed0e4d064eb86467f918cd1c4fc3a32db15.js">
242<link rel="modulepreload" href="/assets/controllers/autosubmit_controller-4128b3047af7088a35b78209c4e5a5857a8cdf7e6db9c87266a1bfc006563423.js">
243<link rel="modulepreload" href="/assets/controllers/banner_controller-89c7dd5e101132f49513044f06948e33368ad440d5c4e3a45a82274105a599ac.js">
244<link rel="modulepreload" href="/assets/controllers/black_hole_background_controller-d7ea14388fc91359f527ab25db93e5f754606ce33dc7f3b0f38bb4ce7806e0f4.js">
245<link rel="modulepreload" href="/assets/controllers/carousel_controller-7e335df24449025cf025c55e28e81452c6acc982061a726d42df0519d517e7f7.js">
246<link rel="modulepreload" href="/assets/controllers/checkbox_select_all_controller-47d9d094c1de4a2977ebc3995494b0fc0bf32b77bf2fa8153b38dfd5eb118992.js">
247<link rel="modulepreload" href="/assets/controllers/clickable_animated_number_controller-cf1c998aa0af94b43f0db582390ae1950468f67f061f9d9b7247f30668d899cd.js">
248<link rel="modulepreload" href="/assets/controllers/clipboard_controller-b0c3a4b7bc7c889ebdd1ceec1f605d2a69e65188d9f8aedde952f33c97e08452.js">
249<link rel="modulepreload" href="/assets/controllers/code_filter_controller-b78aa62f6f5dde0c534f96a2198b7c2c104e7b0765cef49eda95d4503f8220da.js">
250<link rel="modulepreload" href="/assets/controllers/collapsible_controller-a39d5b7ff31c5eb807b64d40a7e15546f97d3b7617c1c33990d1a482c26d3d13.js">
251<link rel="modulepreload" href="/assets/controllers/component_search_controller-fa06589fe987df949cdcddb127a728c1da3d86ff278ee2d95f0bac0bdd567774.js">
252<link rel="modulepreload" href="/assets/controllers/conditional_field_controller-97799033d1b51a7008e0d8e33c2fc61c70a8304ede19eb49fdd335f3d3035a63.js">
253<link rel="modulepreload" href="/assets/controllers/confirmation_controller-4a5132ce4df6e7eb2f80829c45a6e47571543645bada92ec0ec54d9044c77b3f.js">
254<link rel="modulepreload" href="/assets/controllers/context_menu_controller-77e47db59b27f9ec9fde1fcb9ca6466aee4076ab981924e779542c3454f3c93d.js">
255<link rel="modulepreload" href="/assets/controllers/datatable_controller-f83ec938c9d9b27a981de4924f4bff7a1fbafae2904c98bcdfe48d5ca6fa393c.js">
256<link rel="modulepreload" href="/assets/controllers/datatable_preview_controller-c3f3a5cda07c2d66e871d16e1998b89b2eeb56c67a72a786bce23b39f48fa1ee.js">
257<link rel="modulepreload" href="/assets/controllers/date_picker_controller-253d8b524c4baff070b5e52ed868125b97bc24351fec1b787f90ce8ff2feb0c0.js">
258<link rel="modulepreload" href="/assets/controllers/dock_controller-ec5240a11befe00bce9599e61fd9cb94c79709b468e79b944c59f475f963055b.js">
259<link rel="modulepreload" href="/assets/controllers/drawer_controller-b8666297ccaaac7a794d293f27cf2c4dff429d76f7d59d9d3900813c2a95f677.js">
260<link rel="modulepreload" href="/assets/controllers/dropdown_popover_controller-dcfce815f3e53a50fe53ed7d2f36d49d04c89ba4afbe7b395d43340fe9c12bf9.js">
261<link rel="modulepreload" href="/assets/controllers/emoji_picker_controller-c056b2f8bb9032e3909380d4be0b521a9edfbe5a8d1c60d06e4e96e988b30962.js">
262<link rel="modulepreload" href="/assets/controllers/feedback_controller-b3c361e5a39489c06cdc30cd9946bd4ab76d27b5eadc25aeadd9f46f9f14a3ae.js">
263<link rel="modulepreload" href="/assets/controllers/header_controller-ad9c787275b782e8ae53ee6bb4c4e48e4aeec2378eb9505bfe3a0078fc5bddad.js">
264<link rel="modulepreload" href="/assets/controllers/hello_controller-7f59110cda0590e842fa21ec58f351ca3df8385326afb50f932d9e87d0bf5355.js">
265<link rel="modulepreload" href="/assets/controllers/highlight_controller-2ee2d0fe0f95be1b8f24bf6a226811ca1d4d99ded02a416828bd0cd03d993b36.js">
266<link rel="modulepreload" href="/assets/controllers/hotkey_controller-4906788b99654b4bdebaff5ddb16cbd3023b5c9d88a279134af3cbe119992ddd.js">
267<link rel="modulepreload" href="/assets/controllers/increment_controller-9c6acdc5317e20cc593af2845447862f69efed2c875173fb3bcb9fbf6bd4aa9f.js">
268<link rel="modulepreload" href="/assets/controllers/index-ddceca80534a826b5fd4a98c6bb2e10f6e25d3c462fcaeb966f4ec51a349312e.js">
269<link rel="modulepreload" href="/assets/controllers/infinite_scroll_controller-d794b664cbe6bd01f3f3bf4737e8bd396d2c65fffc1aed3f70e777ef82bfb24e.js">
270<link rel="modulepreload" href="/assets/controllers/inline_edit_controller-1559f3f1eae67ab844b2ca5a8515fd2affb99a7dcdc48047fd78e7d1e35d5820.js">
271<link rel="modulepreload" href="/assets/controllers/lightbox_controller-70a04fdfe82959f273f2d153b68e8c49441b936e3f9d85de07c12ed4cd569ff5.js">
272<link rel="modulepreload" href="/assets/controllers/marquee_controller-f62eea56769547d92df5fe25ab33e95d93223fd084e17b632ead8212e3298994.js">
273<link rel="modulepreload" href="/assets/controllers/menu_controller-8f656dcc8accdb5f52cabd89aa015721d737cd78e58b4d44725b91b27428be4f.js">
274<link rel="modulepreload" href="/assets/controllers/modal_controller-b0a1489a5d752ad768f2e5b7b8b3538db41092d719630c6ac1723224d4921732.js">
275<link rel="modulepreload" href="/assets/controllers/navbar_controller-e2e93536f44ab12fb542e40b361a9e916e3a70f4d0a3d8a6da435c38faefd802.js">
276<link rel="modulepreload" href="/assets/controllers/nested_form_controller-b168b9a507594df9ce8c4d974d12397365b235b0f73371cae12b5a937804c972.js">
277<link rel="modulepreload" href="/assets/controllers/newsletter_controller-5f069f0e526e8ca1fb7e9cea5d3c537c306682a8e7911ec7ffd3f73c571f80de.js">
278<link rel="modulepreload" href="/assets/controllers/onboarding_checklist_controller-39dc6bf4879beb8690ffc064555e32e8f86b2cce939d7d3674d568bbe3db0aaf.js">
279<link rel="modulepreload" href="/assets/controllers/os_detect_controller-fdabd286329d2fcbc361cd807cea42ecae29e5274b63efb666e29b57e8215557.js">
280<link rel="modulepreload" href="/assets/controllers/page_view_controller-f387290e103662ff4f8f0d30eb2a19fd78b0657d234018629d2e5eb06fd
2805e36d.js">
281<link rel="modulepreload" href="/assets/controllers/password_controller-ff0f1a76b7c5eecd5b8118091db2df12bf3f17e7fdcf9c526c5555ef93a2f539.js">
282<link rel="modulepreload" href="/assets/controllers/popover_controller-1b1bea1bfe533d7aa2fb2dd4654c96abdf611cd9e554261ca3506fa8d19baee1.js">
283<link rel="modulepreload" href="/assets/controllers/pricing_tabs_controller-ef4263b0b8f9c30dd8c0ea5e1efe413e3a83912d7e7fffe3b3609f8ac67bffd4.js">
284<link rel="modulepreload" href="/assets/controllers/rainbow_button_controller-5b51b4e14a1ca6e2d6b09fa42909695f780b5434f288f0d138bcadfd265d5d64.js">
285<link rel="modulepreload" href="/assets/controllers/read_more_controller-85ad41396138e5bff247d29f97a423b274daf4c2f6db4496b16253e2f01492d9.js">
286<link rel="modulepreload" href="/assets/controllers/scroll_area_controller-69635327e35071b6db15b22898c8d0dc8f7ce53a5a916c2f1906b0c9b02c41e9.js">
287<link rel="modulepreload" href="/assets/controllers/scroll_preservation_controller-2b864175645163639087e02cf9f543233a9b6e77ac0d7b1d84c86631ba5b9d7c.js">
288<link rel="modulepreload" href="/assets/controllers/searchable_dropdown_controller-430e5f4fc4213d1b0f2c116117c21bc57e91713fec486e0a52765213712d6d3c.js">
289<link rel="modulepreload" href="/assets/controllers/select_controller-74d1f70342c3770a333db97ce592c0cec58d74fdca287b0d8c9c6a5bdfb70410.js">
290<link rel="modulepreload" href="/assets/controllers/setup_code_filter_controller-475bc53e471e0ba57fb81260231480539fcf0dfef1500e66cae2063b75d918d3.js">
291<link rel="modulepreload" href="/assets/controllers/shoelace_color_picker_controller-fb2867531d003d3ee4f2199d292aef8152f7ac9dd0ab8123d6613a39ab813aa4.js">
292<link rel="modulepreload" href="/assets/controllers/sidebar_controller-22283653891c7def50a59bbc0cdd21077b4d025a78a82b1bf83013e38e506c3b.js">
293<link rel="modulepreload" href="/assets/controllers/slideover_controller-d2784e5efe60760dfdfe1b45360606eeabe6ea17c63e1078d678bb3eb0fcdb8b.js">
294<link rel="modulepreload" href="/assets/controllers/slider_number_flow_controller-7dd050abe7736568909063d3c668689012c736b45271025c17e280a90018c298.js">
295<link rel="modulepreload" href="/assets/controllers/snippet_controller-ba0646ac1f8c7fea6e6a056e38781569afce34c48ec61e6100d7c8980305067c.js">
296<link rel="modulepreload" href="/assets/controllers/stepper_controller-5f3f3249eea7190c323e5dfbcc0eaa71d044f1c4d200d669159edb93ab741a76.js">
297<link rel="modulepreload" href="/assets/controllers/table_of_contents_controller-3f096fbcf4c30a5a5536ec7b189890b9cfab901866edc5ad7ebf80b6e717537a.js">
298<link rel="modulepreload" href="/assets/controllers/tabs_controller-4cdc2eb1b5c92d421f37f9dfd4bb69e9a3091ae1b1eebc0a9510073a5476a872.js">
299<link rel="modulepreload" href="/assets/controllers/text_cycler_controller-68fe49e432b67f3ad3cae918b14cc8fb499cb792117d1808d6748beb735210e7.js">
300<link rel="modulepreload" href="/assets/controllers/theme_builder_controller-14517cedf554a7a1de2e2f0a22ab918417c3e476d02f1700afa4277569b7faed.js">
301<link rel="modulepreload" href="/assets/controllers/theme_controller-92f859a51c4d051c21b1f8aeec06b5c71d50f5bcdcc3ba4431ba0f8cbaedeccf.js">
302<link rel="modulepreload" href="/assets/controllers/toast_controller-35d241a8c227f21dc898225e10b4e0cde9508a0a82c06756433cb0d2e7d68a0f.js">
303<link rel="modulepreload" href="/assets/controllers/tooltip_controller-a8c00f3a945fdd0ed6ff54b226a8c942400b7d9894d5c0d1f55d2d44ac848dd5.js">
304<link rel="modulepreload" href="/assets/controllers/tree_view_controller-9e6b47ec5b19a36c0ec6eacf8cac1e6e59fdb2b0bfdc28dd8edadc6a7c11a350.js">
305<link rel="modulepreload" href="/assets/controllers/turnstile_controller-c93aec3bd6a87f100d2382b76bc47805c17452f0fd05abd518b78c66e60b161e.js">
306<link rel="modulepreload" href="/assets/controllers/two_factor_controller-bebbef5416ed915b6d56ab303efaf880279af94ce63fe4334f160007f398975b.js">
307<link rel="modulepreload" href="/assets/channels/consumer-e499b626f1d691b5bdf7d83ff61cee46531b74e527aa0c2b78a229dc34d465ab.js">
308<link rel="modulepreload" href="/assets/channels/index-04024382391bb910584145d8113cf35ef376b55d125bb4516cebeb14ce788597.js">
309<script type="module">import "application"</script>
309
310
311    <!-- Prism.js Theme loaded via application.css (shadcn style) -->
312
313    
313<script type="module">import "prism"</script>
313
314
315    <!-- app styles -->
316
317    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/tom-select.css" rel="stylesheet">
318
319    <link rel="stylesheet" href="/assets/tailwind-8dd8a1967e9bfb39e33fd6b97de1fb9540804eb5e014bd755b551ab3b78c8f67.css" data-turbo-track="reload" />
320
321    <!-- Shoelace -->
322    
322<script type="module" src="https://cdn.jsdelivr.net/npm/@shoelace-style/[email protected]/cdn/components/color-picker/color-picker.js"></script>
322
323    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@shoelace-style/[email protected]/cdn/themes/light.css">
324    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@shoelace-style/[email protected]/cdn/themes/dark.css">
325
326    
327<link rel="icon" type="image/png" href="/favicon-96x96.png" sizes="96x96">
328<link rel="icon" type="image/svg+xml" href="/favicon.svg">
329<link rel="shortcut icon" href="/favicon.ico">
330<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
331<meta name="apple-mobile-web-app-title" content="Rails Blocks">
332<link rel="manifest" href="/site.webmanifest">
333
334  <!-- Fathom - beautiful, simple website analytics -->
335  
335<script src="https://cdn.usefathom.com/script.js" data-site="RGMCTRCC" defer></script>
335
336  
336<script>
337    // Defines the Fathom queue if it's not already defined
338    window.fathom = window.fathom || {};
339    window.fathom.trackEvent = window.fathom.trackEvent || function() {
340      (window.fathom.q = window.fathom.q || []).push(arguments);
341    };
342  </script>
342
343  <!-- / Fathom -->
344
345  
345<script>
346      !function(t,e){var o,n,p,r;e.__SV||(window.posthog=e,e._i=[],e.init=function(i,s,a){function g(t,e){var o=e.split(".");2==o.length&&(t=t[o[0]],e=o[1]),t[e]=function(){t.push([e].concat(Array.prototype.slice.call(arguments,0)))}}(p=t.createElement("script")).type="text/javascript",p.crossOrigin="anonymous",p.async=!0,p.src=s.api_host.replace(".i.posthog.com","-assets.i.posthog.com")+"/static/array.js",(r=t.getElementsByTagName("script")[0]).parentNode.insertBefore(p,r);var u=e;for(void 0!==a?u=e[a]=[]:a="posthog",u.people=u.people||[],u.toString=function(t){var e="posthog";return"posthog"!==a&&(e+="."+a),t||(e+=" (stub)"),e},u.people.toString=function(){return u.toString(1)+".people (stub)"},o="init Ie Ts Ms Ee Es Rs capture Ge calculateEventProperties Os register register_once register_for_session unregister unregister_for_session js getFeatureFlag getFeatureFlagPayload isFeatureEnabled reloadFeatureFlags updateEarlyAccessFeatureEnrollment getEarlyAccessFeatures on onFeatureFlags onSurveysLoaded onSessionId getSurveys getActiveMatchingSurveys renderSurvey canRenderSurvey canRenderSurveyAsync identify setPersonProperties group resetGroups setPersonPropertiesForFlags resetPersonPropertiesForFlags setGroupPropertiesForFlags resetGroupPropertiesForFlags reset get_distinct_id getGroups get_session_id get_session_replay_url alias set_config startSessionRecording stopSessionRecording sessionRecordingStarted captureException loadToolbar get_property getSessionProperty Ds Fs createPersonProfile Ls Ps opt_in_capturing opt_out_capturing has_opted_in_capturing has_opted_out_capturing clear_opt_in_out_capturing Cs debug I As getPageViewId captureTraceFeedback captureTraceMetric".split(" "),n=0;n<o.length;n++)g(u,o[n]);e._i.push([i,s,a])},e.__SV=1)}(document,window.posthog||[]);
347      posthog.init('phc_1peGskgJndUl9aKkfvJan2QftpxzdEl4tplxzntLjz3', {
348          api_host: 'https://f.railsblocks.com',
349          defaults: '2026-01-30',
350          person_profiles: 'identified_only', // or 'always' to create profiles for anonymous users as well
351      })
352  </script>
352
353
354
355    <!-- Cloudflare Turnstile -->
356    
356<script src="https://challenges.cloudflare.com/turnstile/v0/api.js" async defer></script>
356
357
358    <!-- JSON-LD Structured Data -->
359    
359<script type="application/ld+json">
360    {
361      "@context": "https://schema.org",
362      "@type": "WebSite",
363      "name": "Rails Blocks",
364      "url": "https://railsblocks.com/",
365      "description": "Rails UI components for building modern web applications, simply copy and paste the code into your app or use our CLI &amp; MCP server."
366    }
367    </script>
367
368
369    <meta name="sentry-trace" content="6c4f43e4c43d4ab6bf3de4e62bf4738a-50b21ad057224494-1">
370<meta name="baggage" content="sentry-trace_id=6c4f43e4c43d4ab6bf3de4e62bf4738a,sentry-sample_rate=1.0,sentry-sample_rand=0.728921,sentry-sampled=true,sentry-environment=production,sentry-release=c1339cab003834fc5d3ba9a59528fe484c754c35,sentry-public_key=75ec06e0a9c5a635bb41b06c332c1f78">
371  </head>
372
373  <body>
374    
375<header class="sticky z-50 top-0 h-14 w-full gap-3 mx-auto" data-controller="header">
376  <nav class="flex items-center justify-center flex-wrap w-full">
377    <div class="w-full border-b border-neutral-950/5 dark:border-white/10">
378      <div class="bg-white dark:bg-neutral-950">
379        <div class="flex h-14 items-center justify-between gap-2 md:gap-8 px-4 sm:px-6">
380          <div class="flex items-center gap-4">
381            <div class="w-full flex items-center shrink-0 justify-center gap-4">
382              <a class="flex items-center hover:opacity-80 gap-1.5" href="/">
383                <img class="size-6" alt="Rails Blocks Logo" src="/assets/avatar-a5d1ee3f447b7848722bb247deffa13b72e8bf5cd959b0b718eb7b43a75fed2a.webp" />
384                <span class="font-semibold shrink-0 text-lg md:text-xl text-neutral-900 dark:text-neutral-50">Rails Blocks</span>
385</a>              <div data-controller="modal os-detect" class="hidden md:block">
386  <button data-controller="hotkey"
387          data-action="click->modal#open:prevent keydown.meta+k@document->hotkey#click keydown.ctrl+k@document->hotkey#click"
388          class="flex items-center justify-center gap-1.5 rounded-lg bg-neutral-100/75 dark:bg-neutral-800 p-2.5 md:px-3 md:py-2 text-xs font-medium whitespace-nowrap text-neutral-500 hover:text-neutral-900 transition-all duration-100 ease-in-out select-none hover:bg-neutral-100 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-600 disabled:cursor-not-allowed disabled:opacity-50 dark:text-neutral-400 dark:hover:bg-neutral-600/50 dark:hover:text-white dark:focus-visible:outline-neutral-200 border border-black/10 dark:border-white/10">
389    <span class="hidden md:block">Search</span>
390    <div class="hidden md:flex items-center gap-0.5">
391      <kbd data-os-detect-target="mac" class="hidden"><svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-[0.6rem]" width="18" height="18" viewBox="0 0 18 18"><g fill="currentColor"><path d="M13.25,10.5h-1.25v-3h1.25c1.517,0,2.75-1.233,2.75-2.75s-1.233-2.75-2.75-2.75-2.75,1.233-2.75,2.75v1.25h-3v-1.25c0-1.517-1.233-2.75-2.75-2.75s-2.75,1.233-2.75,2.75,1.233,2.75,2.75,2.75h1.25v3h-1.25c-1.517,0-2.75,1.233-2.75,2.75s1.233,2.75,2.75,2.75,2.75-1.233,2.75-2.75v-1.25h3v1.25c0,1.517,1.233,2.75,2.75,2.75s2.75-1.233,2.75-2.75-1.233-2.75-2.75-2.75Zm-1.25-5.75c0-.689,.561-1.25,1.25-1.25s1.25,.561,1.25,1.25-.561,1.25-1.25,1.25h-1.25v-1.25Zm-8.5,0c0-.689,.561-1.25,1.25-1.25s1.25,.561,1.25,1.25v1.25h-1.25c-.689,0-1.25-.561-1.25-1.25Zm2.5,8.5c0,.689-.561,1.25-1.25,1.25s-1.25-.561-1.25-1.25,.561-1.25,1.25-1.25h1.25v1.25Zm1.5-5.75h3v3h-3v-3Zm5.75,7c-.689,0-1.25-.561-1.25-1.25v-1.25h1.25c.689,0,1.25,.561,1.25,1.25s-.561,1.25-1.25,1.25Z"></path></g></svg></kbd>
392      <kbd data-os-detect-target="nonMac" class="hidden">Ctrl</kbd>
393      <span>+</span>
394      <kbd>K</kbd>
395    </div>
396    <svg xmlns="http://www.w3.org/2000/svg" class="size-4 md:hidden" width="18" height="18" viewBox="0 0 18 18"><g fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" stroke="currentColor"><path d="M15.75 15.75L11.6386 11.6386"></path> <path d="M7.75 13.25C10.7875 13.25 13.25 10.7875 13.25 7.75C13.25 4.7125 10.7875 2.25 7.75 2.25C4.7125 2.25 2.25 4.7125 2.25 7.75C2.25 10.7875 4.7125 13.25 7.75 13.25Z"></path></g></svg>
397  </button>
398
399  <dialog class="modal max-w-[100vw-2rem] sm:max-w-md bg-transparent rounded-xl w-full z-50 border border-black/10 dark:border-white/10 bg-white dark:bg-neutral-900 small-scrollbar focus-visible:outline-neutral-600 dar
399k:focus-visible:outline-neutral-200" data-modal-target="dialog" data-action="mousedown->modal#backdropClose">
400    <div class="sm:max-w-md w-full">
401
402      <div class="sm:max-w-md mx-auto w-full">
403        <div class="relative"
404              data-controller="autocomplete"
405              data-autocomplete-delay-value="50"
406              data-autocomplete-submit-on-select-value="false" 
407              data-autocomplete-highlight-matches-value="false"
408              data-autocomplete-suggestion-class-value="border-l-3 border-transparent"
409              data-autocomplete-selected-class-value="bg-neutral-50 dark:bg-neutral-800 border-l-neutral-800 dark:border-l-neutral-200 selected"
410              data-autocomplete-anchor-value="form"
411              data-autocomplete-max-suggestions-value="50"
412              data-autocomplete-render-mode-value="inline"
413              data-autocomplete-always-show-value="true"
414              data-autocomplete-auto-select-first-value="true"
415              data-autocomplete-preserve-search-on-select-value="true" 
416              data-autocomplete-select-action-value="modal#close:prevent"
417              data-autocomplete-local-data-value="[{&quot;title&quot;:&quot;Installation&quot;,&quot;url&quot;:&quot;/docs/installation&quot;,&quot;customIcon&quot;:&quot;\u003csvg xmlns=\&quot;http://www.w3.org/2000/svg\&quot; class=\&quot;size-4 shrink-0\&quot; width=\&quot;18\&quot; height=\&quot;18\&quot;
417 viewBox=\&quot;0 0 18 18\&quot;\u003e\u003cg fill=\&quot;none\&quot; stroke-linecap=\&quot;round\&quot; stroke-linejoin=\&quot;round\&quot; stroke-width=\&quot;1.5\&quot; stroke=\&quot;currentColor\&quot;\u003e\u003cpath d=\&quot;m9,15.051c.17,0,.339-.045.494-.134.643-.371,1.732-.847,3.141-.845.899.001,1.667.197,2.27.435.648.255,1.344-.24,1.344-.937V4.487c0-.354-.181-.68-.486-.86-.637-.376-1.726-.863-3.14-.863-1.89,0-3.198.872-3.624,1.182\&quot;\u003e\u003c/path\u003e\u003cpath d=\&quot;m13.9962,6.9204c-.4133-.0954-.8729-.1564-1.3732-.1564s-.9599.0611-1.3731.1567\&quot;\u003e\u003c/path\u003e\u003cpath d=\&quot;m13.9962,10.4204c-.4133-.0954-.8729-.1564-1.3732-.1564s-.9599.0611-1.3731.1567\&quot;\u003e\u003c/path\u003e\u003cpath d=\&quot;m9,15.051c-.17,0-.339-.045-.494-.134-.643-.371-1.732-.847-3.141-.845-.899.001-1.667.197-2.27.435-.648.255-1.344-.237-1.344-.933V4.484c0-.354.181-.676.486-.856.637-.376,1.726-.863,3.14-.863,1.89,0,3.198.872,3.624,1.182h0v11.104h-.001Z\&quot;\u003e\u003c/path\u003e\u003c/g\u003e\u003c/svg\u003e&quot;},{&quot;title&quot;:&quot;View Components&quot;,&quot;url&quot;:&quot;/docs/view-components&quot;,&quot;customIcon&quot;:&quot;\u003csvg xmlns=\&quot;http://www.w3.org/2000/svg\&quot; class=\&quot;size-4 shrink-0\&quot; width=\&quot;18\&quot; height=\&quot;18\&quot;
417 viewBox=\&quot;0 0 18 18\&quot;\u003e\u003cg fill=\&quot;none\&quot; stroke-linecap=\&quot;round\&quot; stroke-linejoin=\&quot;round\&quot; stroke-width=\&quot;1.5\&quot; stroke=\&quot;currentColor\&quot;\u003e\u003cpath d=\&quot;m9,15.051c.17,0,.339-.045.494-.134.643-.371,1.732-.847,3.141-.845.899.001,1.667.197,2.27.435.648.255,1.344-.24,1.344-.937V4.487c0-.354-.181-.68-.486-.86-.637-.376-1.726-.863-3.14-.863-1.89,0-3.198.872-3.624,1.182\&quot;\u003e\u003c/path\u003e\u003cpath d=\&quot;m13.9962,6.9204c-.4133-.0954-.8729-.1564-1.3732-.1564s-.9599.0611-1.3731.1567\&quot;\u003e\u003c/path\u003e\u003cpath d=\&quot;m13.9962,10.4204c-.4133-.0954-.8729-.1564-1.3732-.1564s-.9599.0611-1.3731.1567\&quot;\u003e\u003c/path\u003e\u003cpath d=\&quot;m9,15.051c-.17,0-.339-.045-.494-.134-.643-.371-1.732-.847-3.141-.845-.899.001-1.667.197-2.27.435-.648.255-1.344-.237-1.344-.933V4.484c0-.354.181-.676.486-.856.637-.376,1.726-.863,3.14-.863,1.89,0,3.198.872,3.624,1.182h0v11.104h-.001Z\&quot;\u003e\u003c/path\u003e\u003c/g\u003e\u003c/svg\u003e&quot;},{&quot;title&quot;:&quot;Shared Partials&quot;,&quot;url&quot;:&quot;/docs/shared-partials&quot;,&quot;customIcon&quot;:&quot;\u003csvg xmlns=\&quot;http://www.w3.org/2000/svg\&quot; class=\&quot;size-4 shrink-0\&quot; width=\&quot;18\&quot; height=\&quot;18\&quot;
417 viewBox=\&quot;0 0 18 18\&quot;\u003e\u003cg fill=\&quot;none\&quot; stroke-linecap=\&quot;round\&quot; stroke-linejoin=\&quot;round\&quot; stroke-width=\&quot;1.5\&quot; stroke=\&quot;currentColor\&quot;\u003e\u003cpath d=\&quot;m9,15.051c.17,0,.339-.045.494-.134.643-.371,1.732-.847,3.141-.845.899.001,1.667.197,2.27.435.648.255,1.344-.24,1.344-.937V4.487c0-.354-.181-.68-.486-.86-.637-.376-1.726-.863-3.14-.863-1.89,0-3.198.872-3.624,1.182\&quot;\u003e\u003c/path\u003e\u003cpath d=\&quot;m13.9962,6.9204c-.4133-.0954-.8729-.1564-1.3732-.1564s-.9599.0611-1.3731.1567\&quot;\u003e\u003c/path\u003e\u003cpath d=\&quot;m13.9962,10.4204c-.4133-.0954-.8729-.1564-1.3732-.1564s-.9599.0611-1.3731.1567\&quot;\u003e\u003c/path\u003e\u003cpath d=\&quot;m9,15.051c-.17,0-.339-.045-.494-.134-.643-.371-1.732-.847-3.141-.845-.899.001-1.667.197-2.27.435-.648.255-1.344-.237-1.344-.933V4.484c0-.354.181-.676.486-.856.637-.376,1.726-.863,3.14-.863,1.89,0,3.198.872,3.624,1.182h0v11.104h-.001Z\&quot;\u003e\u003c/path\u003e\u003c/g\u003e\u003c/svg\u003e&quot;},{&quot;title&quot;:&quot;CLI&quot;,&quot;url&quot;:&quot;/docs/cli&quot;,&quot;customIcon&quot;:&quot;\u003csvg xmlns=\&quot;http://www.w3.org/2000/svg\&quot; class=\&quot;size-4 shrink-0\&quot; width=\&quot;18\&quot; height=\&quot;18\&quot;
417 viewBox=\&quot;0 0 18 18\&quot;\u003e\u003cg fill=\&quot;none\&quot; stroke-linecap=\&quot;round\&quot; stroke-linejoin=\&quot;round\&quot; stroke-width=\&quot;1.5\&quot; stroke=\&quot;currentColor\&quot;\u003e\u003cpath d=\&quot;m9,15.051c.17,0,.339-.045.494-.134.643-.371,1.732-.847,3.141-.845.899.001,1.667.197,2.27.435.648.255,1.344-.24,1.344-.937V4.487c0-.354-.181-.68-.486-.86-.637-.376-1.726-.863-3.14-.863-1.89,0-3.198.872-3.624,1.182\&quot;\u003e\u003c/path\u003e\u003cpath d=\&quot;m13.9962,6.9204c-.4133-.0954-.8729-.1564-1.3732-.1564s-.9599.0611-1.3731.1567\&quot;\u003e\u003c/path\u003e\u003cpath d=\&quot;m13.9962,10.4204c-.4133-.0954-.8729-.1564-1.3732-.1564s-.9599.0611-1.3731.1567\&quot;\u003e\u003c/path\u003e\u003cpath d=\&quot;m9,15.051c-.17,0-.339-.045-.494-.134-.643-.371-1.732-.847-3.141-.845-.899.001-1.667.197-2.27.435-.648.255-1.344-.237-1.344-.933V4.484c0-.354.181-.676.486-.856.637-.376,1.726-.863,3.14-.863,1.89,0,3.198.872,3.624,1.182h0v11.104h-.001Z\&quot;\u003e\u003c/path\u003e\u003c/g\u003e\u003c/svg\u003e&quot;},{&quot;title&quot;:&quot;MCP&quot;,&quot;url&quot;:&quot;/docs/mcp&quot;,&quot;customIcon&quot;:&quot;\u003csvg xmlns=\&quot;http://www.w3.org/2000/svg\&quot; class=\&quot;size-4 shrink-0\&quot; width=\&quot;18\&quot; height=\&quot;18\&quot;
417 viewBox=\&quot;0 0 18 18\&quot;\u003e\u003cg fill=\&quot;none\&quot; stroke-linecap=\&quot;round\&quot; stroke-linejoin=\&quot;round\&quot; stroke-width=\&quot;1.5\&quot; stroke=\&quot;currentColor\&quot;\u003e\u003cpath d=\&quot;m9,15.051c.17,0,.339-.045.494-.134.643-.371,1.732-.847,3.141-.845.899.001,1.667.197,2.27.435.648.255,1.344-.24,1.344-.937V4.487c0-.354-.181-.68-.486-.86-.637-.376-1.726-.863-3.14-.863-1.89,0-3.198.872-3.624,1.182\&quot;\u003e\u003c/path\u003e\u003cpath d=\&quot;m13.9962,6.9204c-.4133-.0954-.8729-.1564-1.3732-.1564s-.9599.0611-1.3731.1567\&quot;\u003e\u003c/path\u003e\u003cpath d=\&quot;m13.9962,10.4204c-.4133-.0954-.8729-.1564-1.3732-.1564s-.9599.0611-1.3731.1567\&quot;\u003e\u003c/path\u003e\u003cpath d=\&quot;m9,15.051c-.17,0-.339-.045-.494-.134-.643-.371-1.732-.847-3.141-.845-.899.001-1.667.197-2.27.435-.648.255-1.344-.237-1.344-.933V4.484c0-.354.181-.676.486-.856.637-.376,1.726-.863,3.14-.863,1.89,0,3.198.872,3.624,1.182h0v11.104h-.001Z\&quot;\u003e\u003c/path\u003e\u003c/g\u003e\u003c/svg\u003e&quot;},{&quot;title&quot;:&quot;Author&#39;s Note&quot;,&quot;url&quot;:&quot;/docs/authors-note&quot;,&quot;customIcon&quot;:&quot;\u003csvg xmlns=\&quot;http://www.w3.org/2000/svg\&quot; class=\&quot;size-4 shrink-0\&quot; width=\&quot;18\&quot; height=\&quot;18\&quot;
417 viewBox=\&quot;0 0 18 18\&quot;\u003e\u003cg fill=\&quot;none\&quot; stroke-linecap=\&quot;round\&quot; stroke-linejoin=\&quot;round\&quot; stroke-width=\&quot;1.5\&quot; stroke=\&quot;currentColor\&quot;\u003e\u003cpath d=\&quot;m9,15.051c.17,0,.339-.045.494-.134.643-.371,1.732-.847,3.141-.845.899.001,1.667.197,2.27.435.648.255,1.344-.24,1.344-.937V4.487c0-.354-.181-.68-.486-.86-.637-.376-1.726-.863-3.14-.863-1.89,0-3.198.872-3.624,1.182\&quot;\u003e\u003c/path\u003e\u003cpath d=\&quot;m13.9962,6.9204c-.4133-.0954-.8729-.1564-1.3732-.1564s-.9599.0611-1.3731.1567\&quot;\u003e\u003c/path\u003e\u003cpath d=\&quot;m13.9962,10.4204c-.4133-.0954-.8729-.1564-1.3732-.1564s-.9599.0611-1.3731.1567\&quot;\u003e\u003c/path\u003e\u003cpath d=\&quot;m9,15.051c-.17,0-.339-.045-.494-.134-.643-.371-1.732-.847-3.141-.845-.899.001-1.667.197-2.27.435-.648.255-1.344-.237-1.344-.933V4.484c0-.354.181-.676.486-.856.637-.376,1.726-.863,3.14-.863,1.89,0,3.198.872,3.624,1.182h0v11.104h-.001Z\&quot;\u003e\u003c/path\u003e\u003c/g\u003e\u003c/svg\u003e&quot;},{&quot;title&quot;:&quot;Accordion&quot;,&quot;url&quot;:&quot;/docs/accordion&quot;,&quot;customIcon&quot;:&quot;\u003csvg xmlns=\&quot;http://www.w3.org/2000/svg\&quot; class=\&quot;size-4\&quot; width=\&quot;18\&quot; height=\&quot;18\&quot;
417 viewBox=\&quot;0 0 18 18\&quot;\u003e\u003cg fill=\&quot;none\&quot; stroke-linecap=\&quot;round\&quot; stroke-linejoin=\&quot;round\&quot; stroke-width=\&quot;1.5\&quot; stroke=\&quot;currentColor\&quot;\u003e\u003cpolyline points=\&quot;14.983 5.53 9 9 3.017 5.53\&quot;\u003e\u003c/polyline\u003e\u003cline x1=\&quot;9\&quot; y1=\&quot;15.938\&quot; x2=\&quot;9\&quot; y2=\&quot;9\&quot;\u003e\u003c/line\u003e\u003cpath d=\&quot;M7.997,2.332L3.747,4.797c-.617,.358-.997,1.017-.997,1.73v4.946c0,.713,.38,1.372,.997,1.73l4.25,2.465c.621,.36,1.386,.36,2.007,0l4.25-2.465c.617-.358,.997-1.017,.997-1.73V6.527c0-.713-.38-1.372-.997-1.73l-4.25-2.465c-.621-.36-1.386-.36-2.007,0Z\&quot;\u003e\u003c/path\u003e\u003c/g\u003e\u003c/svg\u003e&quot;},{&quot;title&quot;:&quot;Alert&quot;,&quot;url&quot;:&quot;/docs/alert&quot;,&quot;customIcon&quot;:&quot;\u003csvg xmlns=\&quot;http://www.w3.org/2000/svg\&quot; class=\&quot;size-4\&quot; width=\&quot;18\&quot; height=\&quot;18\&quot; viewBox=\&quot;0 0 18 18\&quot;\u003e\u003cg fill=\&quot;none\&quot; stroke-linecap=\&quot;round\&quot; stroke-linejoin=\&quot;round\&quot; stroke-width=\&quot;1.5\&quot; stroke=\&quot;currentColor\&quot;\u003e\u003cpolyline points=\&quot;14.983 5.53 9 9 3.017 5.53\&quot;\u003e\u003c/polyline\u003e\u003cline x1=\&quot;9\&quot; y1=\&quot;15.938\&quot; x2=\&quot;9\&quot; y2=\&quot;9\&quot;\u003e\u003c/line\u003e\u003cpath d=\&quot;M7.997,2.332L3.747,4.797c-.617,.358-.997,1.017-.997,1.73v4.946c0,.713,.38,1.372,.997,1.73l4.25,2.465c.621,.36,1.386,.36,2.007,0l4.25-2.465c.617-.358,.997-1.017,.997-1.73V6.527c0-.713-.38-1.372-.997-1.73l-4.25-2.465c-.621-.36-1.386-.36-2.007,0Z\&quot;\u003e\u003c/path\u003e\u003c/g\u003e\u003c/svg\u003e&quot;},{&quot;title&quot;:&quot;Animated Number&quot;,&quot;url&quot;:&quot;/docs/animated-number&quot;,&quot;customIcon&quot;:&quot;\u003csvg xmlns=\&quot;http://www.w3.org/2000/svg\&quot; class=\&quot;size-4\&quot; width=\&quot;18\&quot; height=\&quot;18\&quot;
417 viewBox=\&quot;0 0 18 18\&quot;\u003e\u003cg fill=\&quot;none\&quot; stroke-linecap=\&quot;round\&quot; stroke-linejoin=\&quot;round\&quot; stroke-width=\&quot;1.5\&quot; stroke=\&quot;currentColor\&quot;\u003e\u003cpolyline points=\&quot;14.983 5.53 9 9 3.017 5.53\&quot;\u003e\u003c/polyline\u003e\u003cline x1=\&quot;9\&quot; y1=\&quot;15.938\&quot; x2=\&quot;9\&quot; y2=\&quot;9\&quot;\u003e\u003c/line\u003e\u003cpath d=\&quot;M7.997,2.332L3.747,4.797c-.617,.358-.997,1.017-.997,1.73v4.946c0,.713,.38,1.372,.997,1.73l4.25,2.465c.621,.36,1.386,.36,2.007,0l4.25-2.465c.617-.358,.997-1.017,.997-1.73V6.527c0-.713-.38-1.372-.997-1.73l-4.25-2.465c-.621-.36-1.386-.36-2.007,0Z\&quot;\u003e\u003c/path\u003e\u003c/g\u003e\u003c/svg\u003e&quot;},{&quot;title&quot;:&quot;Autocomplete Search&quot;,&quot;url&quot;:&quot;/docs/autocomplete&quot;,&quot;customIcon&quot;:&quot;\u003csvg xmlns=\&quot;http://www.w3.org/2000/svg\&quot; class=\&quot;size-4\&quot; width=\&quot;18\&quot; height=\&quot;18\&quot; viewBox=\&quot;0 0 18 18\&quot;\u003e\u003cg fill=\&quot;none\&quot; stroke-linecap=\&quot;round\&quot; stroke-linejoin=\&quot;round\&quot; stroke-width=\&quot;1.5\&quot; stroke=\&quot;currentColor\&quot;\u003e\u003cpolyline points=\&quot;14.983 5.53 9 9 3.017 5.53\&quot;\u003e\u003c/polyline\u003e\u003cline x1=\&quot;9\&quot; y1=\&quot;15.938\&quot; x2=\&quot;9\&quot; y2=\&quot;9\&quot;\u003e\u003c/line\u003e\u003cpath d=\&quot;M7.997,2.332L3.747,4.797c-.617,.358-.997,1.017-.997,1.73v4.946c0,.713,.38,1.372,.997,1.73l4.25,2.465c.621,.36,1.386,.36,2.007,0l4.25-2.465c.617-.358,.997-1.017,.997-1.73V6.527c0-.713-.38-1.372-.997-1.73l-4.25-2.465c-.621-.36-1.386-.36-2.007,0Z\&quot;\u003e\u003c/path\u003e\u003c/g\u003e\u003c/svg\u003e&quot;},{&quot;title&quot;:&quot;Autogrow&quot;,&quot;url&quot;:&quot;/docs/autogrow&quot;,&quot;customIcon&quot;:&quot;\u003csvg xmlns=\&quot;http://www.w3.org/2000/svg\&quot; class=\&quot;size-4\&quot; width=\&quot;18\&quot; height=\&quot;18\&quot;
417 viewBox=\&quot;0 0 18 18\&quot;\u003e\u003cg fill=\&quot;none\&quot; stroke-linecap=\&quot;round\&quot; stroke-linejoin=\&quot;round\&quot; stroke-width=\&quot;1.5\&quot; stroke=\&quot;currentColor\&quot;\u003e\u003cpolyline points=\&quot;14.983 5.53 9 9 3.017 5.53\&quot;\u003e\u003c/polyline\u003e\u003cline x1=\&quot;9\&quot; y1=\&quot;15.938\&quot; x2=\&quot;9\&quot; y2=\&quot;9\&quot;\u003e\u003c/line\u003e\u003cpath d=\&quot;M7.997,2.332L3.747,4.797c-.617,.358-.997,1.017-.997,1.73v4.946c0,.713,.38,1.372,.997,1.73l4.25,2.465c.621,.36,1.386,.36,2.007,0l4.25-2.465c.617-.358,.997-1.017,.997-1.73V6.527c0-.713-.38-1.372-.997-1.73l-4.25-2.465c-.621-.36-1.386-.36-2.007,0Z\&quot;\u003e\u003c/path\u003e\u003c/g\u003e\u003c/svg\u003e&quot;},{&quot;title&quot;:&quot;Avatar&quot;,&quot;url&quot;:&quot;/docs/avatar&quot;,&quot;customIcon&quot;:&quot;\u003csvg xmlns=\&quot;http://www.w3.org/2000/svg\&quot; class=\&quot;size-4\&quot; width=\&quot;18\&quot; height=\&quot;18\&quot; viewBox=\&quot;0 0 18 18\&quot;\u003e\u003cg fill=\&quot;none\&quot; stroke-linecap=\&quot;round\&quot; stroke-linejoin=\&quot;round\&quot; stroke-width=\&quot;1.5\&quot; stroke=\&quot;currentColor\&quot;\u003e\u003cpolyline points=\&quot;14.983 5.53 9 9 3.017 5.53\&quot;\u003e\u003c/polyline\u003e\u003cline x1=\&quot;9\&quot; y1=\&quot;15.938\&quot; x2=\&quot;9\&quot; y2=\&quot;9\&quot;\u003e\u003c/line\u003e\u003cpath d=\&quot;M7.997,2.332L3.747,4.797c-.617,.358-.997,1.017-.997,1.73v4.946c0,.713,.38,1.372,.997,1.73l4.25,2.465c.621,.36,1.386,.36,2.007,0l4.25-2.465c.617-.358,.997-1.017,.997-1.73V6.527c0-.713-.38-1.372-.997-1.73l-4.25-2.465c-.621-.36-1.386-.36-2.007,0Z\&quot;\u003e\u003c/path\u003e\u003c/g\u003e\u003c/svg\u003e&quot;},{&quot;title&quot;:&quot;Badge&quot;,&quot;url&quot;:&quot;/docs/badge&quot;,&quot;customIcon&quot;:&quot;\u003csvg xmlns=\&quot;http://www.w3.org/2000/svg\&quot; class=\&quot;size-4\&quot; width=\&quot;18\&quot; height=\&quot;18\&quot;
417 viewBox=\&quot;0 0 18 18\&quot;\u003e\u003cg fill=\&quot;none\&quot; stroke-linecap=\&quot;round\&quot; stroke-linejoin=\&quot;round\&quot; stroke-width=\&quot;1.5\&quot; stroke=\&quot;currentColor\&quot;\u003e\u003cpolyline points=\&quot;14.983 5.53 9 9 3.017 5.53\&quot;\u003e\u003c/polyline\u003e\u003cline x1=\&quot;9\&quot; y1=\&quot;15.938\&quot; x2=\&quot;9\&quot; y2=\&quot;9\&quot;\u003e\u003c/line\u003e\u003cpath d=\&quot;M7.997,2.332L3.747,4.797c-.617,.358-.997,1.017-.997,1.73v4.946c0,.713,.38,1.372,.997,1.73l4.25,2.465c.621,.36,1.386,.36,2.007,0l4.25-2.465c.617-.358,.997-1.017,.997-1.73V6.527c0-.713-.38-1.372-.997-1.73l-4.25-2.465c-.621-.36-1.386-.36-2.007,0Z\&quot;\u003e\u003c/path\u003e\u003c/g\u003e\u003c/svg\u003e&quot;},{&quot;title&quot;:&quot;Banner&quot;,&quot;url&quot;:&quot;/docs/banner&quot;,&quot;customIcon&quot;:&quot;\u003csvg xmlns=\&quot;http://www.w3.org/2000/svg\&quot; class=\&quot;size-4\&quot; width=\&quot;18\&quot; height=\&quot;18\&quot; viewBox=\&quot;0 0 18 18\&quot;\u003e\u003cg fill=\&quot;none\&quot; stroke-linecap=\&quot;round\&quot; stroke-linejoin=\&quot;round\&quot; stroke-width=\&quot;1.5\&quot; stroke=\&quot;currentColor\&quot;\u003e\u003cpolyline points=\&quot;14.983 5.53 9 9 3.017 5.53\&quot;\u003e\u003c/polyline\u003e\u003cline x1=\&quot;9\&quot; y1=\&quot;15.938\&quot; x2=\&quot;9\&quot; y2=\&quot;9\&quot;\u003e\u003c/line\u003e\u003cpath d=\&quot;M7.997,2.332L3.747,4.797c-.617,.358-.997,1.017-.997,1.73v4.946c0,.713,.38,1.372,.997,1.73l4.25,2.465c.621,.36,1.386,.36,2.007,0l4.25-2.465c.617-.358,.997-1.017,.997-1.73V6.527c0-.713-.38-1.372-.997-1.73l-4.25-2.465c-.621-.36-1.386-.36-2.007,0Z\&quot;\u003e\u003c/path\u003e\u003c/g\u003e\u003c/svg\u003e&quot;},{&quot;title&quot;:&quot;Breadcrumb&quot;,&quot;url&quot;:&quot;/docs/breadcrumb&quot;,&quot;customIcon&quot;:&quot;\u003csvg xmlns=\&quot;http://www.w3.org/2000/svg\&quot; class=\&quot;size-4\&quot; width=\&quot;18\&quot; height=\&quot;18\&quot;
417 viewBox=\&quot;0 0 18 18\&quot;\u003e\u003cg fill=\&quot;none\&quot; stroke-linecap=\&quot;round\&quot; stroke-linejoin=\&quot;round\&quot; stroke-width=\&quot;1.5\&quot; stroke=\&quot;currentColor\&quot;\u003e\u003cpolyline points=\&quot;14.983 5.53 9 9 3.017 5.53\&quot;\u003e\u003c/polyline\u003e\u003cline x1=\&quot;9\&quot; y1=\&quot;15.938\&quot; x2=\&quot;9\&quot; y2=\&quot;9\&quot;\u003e\u003c/line\u003e\u003cpath d=\&quot;M7.997,2.332L3.747,4.797c-.617,.358-.997,1.017-.997,1.73v4.946c0,.713,.38,1.372,.997,1.73l4.25,2.465c.621,.36,1.386,.36,2.007,0l4.25-2.465c.617-.358,.997-1.017,.997-1.73V6.527c0-.713-.38-1.372-.997-1.73l-4.25-2.465c-.621-.36-1.386-.36-2.007,0Z\&quot;\u003e\u003c/path\u003e\u003c/g\u003e\u003c/svg\u003e&quot;},{&quot;title&quot;:&quot;Buttons&quot;,&quot;url&quot;:&quot;/docs/buttons&quot;,&quot;customIcon&quot;:&quot;\u003csvg xmlns=\&quot;http://www.w3.org/2000/svg\&quot; class=\&quot;size-4\&quot; width=\&quot;18\&quot; height=\&quot;18\&quot; viewBox=\&quot;0 0 18 18\&quot;\u003e\u003cg fill=\&quot;none\&quot; stroke-linecap=\&quot;round\&quot; stroke-linejoin=\&quot;round\&quot; stroke-width=\&quot;1.5\&quot; stroke=\&quot;currentColor\&quot;\u003e\u003cpolyline points=\&quot;14.983 5.53 9 9 3.017 5.53\&quot;\u003e\u003c/polyline\u003e\u003cline x1=\&quot;9\&quot; y1=\&quot;15.938\&quot; x2=\&quot;9\&quot; y2=\&quot;9\&quot;\u003e\u003c/line\u003e\u003cpath d=\&quot;M7.997,2.332L3.747,4.797c-.617,.358-.997,1.017-.997,1.73v4.946c0,.713,.38,1.372,.997,1.73l4.25,2.465c.621,.36,1.386,.36,2.007,0l4.25-2.465c.617-.358,.997-1.017,.997-1.73V6.527c0-.713-.38-1.372-.997-1.73l-4.25-2.465c-.621-.36-1.386-.36-2.007,0Z\&quot;\u003e\u003c/path\u003e\u003c/g\u003e\u003c/svg\u003e&quot;},{&quot;title&quot;:&quot;Card&quot;,&quot;url&quot;:&quot;/docs/card&quot;,&quot;customIcon&quot;:&quot;\u003csvg xmlns=\&quot;http://www.w3.org/2000/svg\&quot; class=\&quot;size-4\&quot; width=\&quot;18\&quot; height=\&quot;18\&quot;
417 viewBox=\&quot;0 0 18 18\&quot;\u003e\u003cg fill=\&quot;none\&quot; stroke-linecap=\&quot;round\&quot; stroke-linejoin=\&quot;round\&quot; stroke-width=\&quot;1.5\&quot; stroke=\&quot;currentColor\&quot;\u003e\u003cpolyline points=\&quot;14.983 5.53 9 9 3.017 5.53\&quot;\u003e\u003c/polyline\u003e\u003cline x1=\&quot;9\&quot; y1=\&quot;15.938\&quot; x2=\&quot;9\&quot; y2=\&quot;9\&quot;\u003e\u003c/line\u003e\u003cpath d=\&quot;M7.997,2.332L3.747,4.797c-.617,.358-.997,1.017-.997,1.73v4.946c0,.713,.38,1.372,.997,1.73l4.25,2.465c.621,.36,1.386,.36,2.007,0l4.25-2.465c.617-.358,.997-1.017,.997-1.73V6.527c0-.713-.38-1.372-.997-1.73l-4.25-2.465c-.621-.36-1.386-.36-2.007,0Z\&quot;\u003e\u003c/path\u003e\u003c/g\u003e\u003c/svg\u003e&quot;},{&quot;title&quot;:&quot;Carousel&quot;,&quot;url&quot;:&quot;/docs/carousel&quot;,&quot;customIcon&quot;:&quot;\u003csvg xmlns=\&quot;http://www.w3.org/2000/svg\&quot; class=\&quot;size-4\&quot; width=\&quot;18\&quot; height=\&quot;18\&quot; viewBox=\&quot;0 0 18 18\&quot;\u003e\u003cg fill=\&quot;none\&quot; stroke-linecap=\&quot;round\&quot; stroke-linejoin=\&quot;round\&quot; stroke-width=\&quot;1.5\&quot; stroke=\&quot;currentColor\&quot;\u003e\u003cpolyline points=\&quot;14.983 5.53 9 9 3.017 5.53\&quot;\u003e\u003c/polyline\u003e\u003cline x1=\&quot;9\&quot; y1=\&quot;15.938\&quot; x2=\&quot;9\&quot; y2=\&quot;9\&quot;\u003e\u003c/line\u003e\u003cpath d=\&quot;M7.997,2.332L3.747,4.797c-.617,.358-.997,1.017-.997,1.73v4.946c0,.713,.38,1.372,.997,1.73l4.25,2.465c.621,.36,1.386,.36,2.007,0l4.25-2.465c.617-.358,.997-1.017,.997-1.73V6.527c0-.713-.38-1.372-.997-1.73l-4.25-2.465c-.621-.36-1.386-.36-2.007,0Z\&quot;\u003e\u003c/path\u003e\u003c/g\u003e\u003c/svg\u003e&quot;},{&quot;title&quot;:&quot;Checkbox&quot;,&quot;url&quot;:&quot;/docs/checkbox&quot;,&quot;customIcon&quot;:&quot;\u003csvg xmlns=\&quot;http://www.w3.org/2000/svg\&quot; class=\&quot;size-4\&quot; width=\&quot;18\&quot; height=\&quot;18\&quot;
417 viewBox=\&quot;0 0 18 18\&quot;\u003e\u003cg fill=\&quot;none\&quot; stroke-linecap=\&quot;round\&quot; stroke-linejoin=\&quot;round\&quot; stroke-width=\&quot;1.5\&quot; stroke=\&quot;currentColor\&quot;\u003e\u003cpolyline points=\&quot;14.983 5.53 9 9 3.017 5.53\&quot;\u003e\u003c/polyline\u003e\u003cline x1=\&quot;9\&quot; y1=\&quot;15.938\&quot; x2=\&quot;9\&quot; y2=\&quot;9\&quot;\u003e\u003c/line\u003e\u003cpath d=\&quot;M7.997,2.332L3.747,4.797c-.617,.358-.997,1.017-.997,1.73v4.946c0,.713,.38,1.372,.997,1.73l4.25,2.465c.621,.36,1.386,.36,2.007,0l4.25-2.465c.617-.358,.997-1.017,.997-1.73V6.527c0-.713-.38-1.372-.997-1.73l-4.25-2.465c-.621-.36-1.386-.36-2.007,0Z\&quot;\u003e\u003c/path\u003e\u003c/g\u003e\u003c/svg\u003e&quot;},{&quot;title&quot;:&quot;Checkbox Select All&quot;,&quot;url&quot;:&quot;/docs/checkbox-select-all&quot;,&quot;customIcon&quot;:&quot;\u003csvg xmlns=\&quot;http://www.w3.org/2000/svg\&quot; class=\&quot;size-4\&quot; width=\&quot;18\&quot; height=\&quot;18\&quot; viewBox=\&quot;0 0 18 18\&quot;\u003e\u003cg fill=\&quot;none\&quot; stroke-linecap=\&quot;round\&quot; stroke-linejoin=\&quot;round\&quot; stroke-width=\&quot;1.5\&quot; stroke=\&quot;currentColor\&quot;\u003e\u003cpolyline points=\&quot;14.983 5.53 9 9 3.017 5.53\&quot;\u003e\u003c/polyline\u003e\u003cline x1=\&quot;9\&quot; y1=\&quot;15.938\&quot; x2=\&quot;9\&quot; y2=\&quot;9\&quot;\u003e\u003c/line\u003e\u003cpath d=\&quot;M7.997,2.332L3.747,4.797c-.617,.358-.997,1.017-.997,1.73v4.946c0,.713,.38,1.372,.997,1.73l4.25,2.465c.621,.36,1.386,.36,2.007,0l4.25-2.465c.617-.358,.997-1.017,.997-1.73V6.527c0-.713-.38-1.372-.997-1.73l-4.25-2.465c-.621-.36-1.386-.36-2.007,0Z\&quot;\u003e\u003c/path\u003e\u003c/g\u003e\u003c/svg\u003e&quot;},{&quot;title&quot;:&quot;Clipboard&quot;,&quot;url&quot;:&quot;/docs/clipboard&quot;,&quot;customIcon&quot;:&quot;\u003csvg xmlns=\&quot;http://www.w3.org/2000/svg\&quot; class=\&quot;size-4\&quot; width=\&quot;18\&quot; height=\&quot;18\&quot;
417 viewBox=\&quot;0 0 18 18\&quot;\u003e\u003cg fill=\&quot;none\&quot; stroke-linecap=\&quot;round\&quot; stroke-linejoin=\&quot;round\&quot; stroke-width=\&quot;1.5\&quot; stroke=\&quot;currentColor\&quot;\u003e\u003cpolyline points=\&quot;14.983 5.53 9 9 3.017 5.53\&quot;\u003e\u003c/polyline\u003e\u003cline x1=\&quot;9\&quot; y1=\&quot;15.938\&quot; x2=\&quot;9\&quot; y2=\&quot;9\&quot;\u003e\u003c/line\u003e\u003cpath d=\&quot;M7.997,2.332L3.747,4.797c-.617,.358-.997,1.017-.997,1.73v4.946c0,.713,.38,1.372,.997,1.73l4.25,2.465c.621,.36,1.386,.36,2.007,0l4.25-2.465c.617-.358,.997-1.017,.997-1.73V6.527c0-.713-.38-1.372-.997-1.73l-4.25-2.465c-.621-.36-1.386-.36-2.007,0Z\&quot;\u003e\u003c/path\u003e\u003c/g\u003e\u003c/svg\u003e&quot;},{&quot;title&quot;:&quot;Collapsible&quot;,&quot;url&quot;:&quot;/docs/collapsible&quot;,&quot;customIcon&quot;:&quot;\u003csvg xmlns=\&quot;http://www.w3.org/2000/svg\&quot; class=\&quot;size-4\&quot; width=\&quot;18\&quot; height=\&quot;18\&quot; viewBox=\&quot;0 0 18 18\&quot;\u003e\u003cg fill=\&quot;none\&quot; stroke-linecap=\&quot;round\&quot; stroke-linejoin=\&quot;round\&quot; stroke-width=\&quot;1.5\&quot; stroke=\&quot;currentColor\&quot;\u003e\u003cpolyline points=\&quot;14.983 5.53 9 9 3.017 5.53\&quot;\u003e\u003c/polyline\u003e\u003cline x1=\&quot;9\&quot; y1=\&quot;15.938\&quot; x2=\&quot;9\&quot; y2=\&quot;9\&quot;\u003e\u003c/line\u003e\u003cpath d=\&quot;M7.997,2.332L3.747,4.797c-.617,.358-.997,1.017-.997,1.73v4.946c0,.713,.38,1.372,.997,1.73l4.25,2.465c.621,.36,1.386,.36,2.007,0l4.25-2.465c.617-.358,.997-1.017,.997-1.73V6.527c0-.713-.38-1.372-.997-1.73l-4.25-2.465c-.621-.36-1.386-.36-2.007,0Z\&quot;\u003e\u003c/path\u003e\u003c/g\u003e\u003c/svg\u003e&quot;},{&quot;title&quot;:&quot;Color Picker&quot;,&quot;url&quot;:&quot;/docs/color-picker&quot;,&quot;customIcon&quot;:&quot;\u003csvg xmlns=\&quot;http://www.w3.org/2000/svg\&quot; class=\&quot;size-4\&quot; width=\&quot;18\&quot; height=\&quot;18\&quot;
417 viewBox=\&quot;0 0 18 18\&quot;\u003e\u003cg fill=\&quot;none\&quot; stroke-linecap=\&quot;round\&quot; stroke-linejoin=\&quot;round\&quot; stroke-width=\&quot;1.5\&quot; stroke=\&quot;currentColor\&quot;\u003e\u003cpolyline points=\&quot;14.983 5.53 9 9 3.017 5.53\&quot;\u003e\u003c/polyline\u003e\u003cline x1=\&quot;9\&quot; y1=\&quot;15.938\&quot; x2=\&quot;9\&quot; y2=\&quot;9\&quot;\u003e\u003c/line\u003e\u003cpath d=\&quot;M7.997,2.332L3.747,4.797c-.617,.358-.997,1.017-.997,1.73v4.946c0,.713,.38,1.372,.997,1.73l4.25,2.465c.621,.36,1.386,.36,2.007,0l4.25-2.465c.617-.358,.997-1.017,.997-1.73V6.527c0-.713-.38-1.372-.997-1.73l-4.25-2.465c-.621-.36-1.386-.36-2.007,0Z\&quot;\u003e\u003c/path\u003e\u003c/g\u003e\u003c/svg\u003e&quot;},{&quot;title&quot;:&quot;Combobox&quot;,&quot;url&quot;:&quot;/docs/combobox&quot;,&quot;customIcon&quot;:&quot;\u003csvg xmlns=\&quot;http://www.w3.org/2000/svg\&quot; class=\&quot;size-4\&quot; width=\&quot;18\&quot; height=\&quot;18\&quot; viewBox=\&quot;0 0 18 18\&quot;\u003e\u003cg fill=\&quot;none\&quot; stroke-linecap=\&quot;round\&quot; stroke-linejoin=\&quot;round\&quot; stroke-width=\&quot;1.5\&quot; stroke=\&quot;currentColor\&quot;\u003e\u003cpolyline points=\&quot;14.983 5.53 9 9 3.017 5.53\&quot;\u003e\u003c/polyline\u003e\u003cline x1=\&quot;9\&quot; y1=\&quot;15.938\&quot; x2=\&quot;9\&quot; y2=\&quot;9\&quot;\u003e\u003c/line\u003e\u003cpath d=\&quot;M7.997,2.332L3.747,4.797c-.617,.358-.997,1.017-.997,1.73v4.946c0,.713,.38,1.372,.997,1.73l4.25,2.465c.621,.36,1.386,.36,2.007,0l4.25-2.465c.617-.358,.997-1.017,.997-1.73V6.527c0-.713-.38-1.372-.997-1.73l-4.25-2.465c-.621-.36-1.386-.36-2.007,0Z\&quot;\u003e\u003c/path\u003e\u003c/g\u003e\u003c/svg\u003e&quot;},{&quot;title&quot;:&quot;Command Palette&quot;,&quot;url&quot;:&quot;/docs/command-palette&quot;,&quot;customIcon&quot;:&quot;\u003csvg xmlns=\&quot;http://www.w3.org/2000/svg\&quot; class=\&quot;size-4\&quot; width=\&quot;18\&quot; height=\&quot;18\&quot;
417 viewBox=\&quot;0 0 18 18\&quot;\u003e\u003cg fill=\&quot;none\&quot; stroke-linecap=\&quot;round\&quot; stroke-linejoin=\&quot;round\&quot; stroke-width=\&quot;1.5\&quot; stroke=\&quot;currentColor\&quot;\u003e\u003cpolyline points=\&quot;14.983 5.53 9 9 3.017 5.53\&quot;\u003e\u003c/polyline\u003e\u003cline x1=\&quot;9\&quot; y1=\&quot;15.938\&quot; x2=\&quot;9\&quot; y2=\&quot;9\&quot;\u003e\u003c/line\u003e\u003cpath d=\&quot;M7.997,2.332L3.747,4.797c-.617,.358-.997,1.017-.997,1.73v4.946c0,.713,.38,1.372,.997,1.73l4.25,2.465c.621,.36,1.386,.36,2.007,0l4.25-2.465c.617-.358,.997-1.017,.997-1.73V6.527c0-.713-.38-1.372-.997-1.73l-4.25-2.465c-.621-.36-1.386-.36-2.007,0Z\&quot;\u003e\u003c/path\u003e\u003c/g\u003e\u003c/svg\u003e&quot;},{&quot;title&quot;:&quot;Confirmation&quot;,&quot;url&quot;:&quot;/docs/confirmation&quot;,&quot;customIcon&quot;:&quot;\u003csvg xmlns=\&quot;http://www.w3.org/2000/svg\&quot; class=\&quot;size-4\&quot; width=\&quot;18\&quot; height=\&quot;18\&quot; viewBox=\&quot;0 0 18 18\&quot;\u003e\u003cg fill=\&quot;none\&quot; stroke-linecap=\&quot;round\&quot; stroke-linejoin=\&quot;round\&quot; stroke-width=\&quot;1.5\&quot; stroke=\&quot;currentColor\&quot;\u003e\u003cpolyline points=\&quot;14.983 5.53 9 9 3.017 5.53\&quot;\u003e\u003c/polyline\u003e\u003cline x1=\&quot;9\&quot; y1=\&quot;15.938\&quot; x2=\&quot;9\&quot; y2=\&quot;9\&quot;\u003e\u003c/line\u003e\u003cpath d=\&quot;M7.997,2.332L3.747,4.797c-.617,.358-.997,1.017-.997,1.73v4.946c0,.713,.38,1.372,.997,1.73l4.25,2.465c.621,.36,1.386,.36,2.007,0l4.25-2.465c.617-.358,.997-1.017,.997-1.73V6.527c0-.713-.38-1.372-.997-1.73l-4.25-2.465c-.621-.36-1.386-.36-2.007,0Z\&quot;\u003e\u003c/path\u003e\u003c/g\u003e\u003c/svg\u003e&quot;},{&quot;title&quot;:&quot;Context Menu&quot;,&quot;url&quot;:&quot;/docs/context-menu&quot;,&quot;customIcon&quot;:&quot;\u003csvg xmlns=\&quot;http://www.w3.org/2000/svg\&quot; class=\&quot;size-4\&quot; width=\&quot;18\&quot; height=\&quot;18\&quot;
417 viewBox=\&quot;0 0 18 18\&quot;\u003e\u003cg fill=\&quot;none\&quot; stroke-linecap=\&quot;round\&quot; stroke-linejoin=\&quot;round\&quot; stroke-width=\&quot;1.5\&quot; stroke=\&quot;currentColor\&quot;\u003e\u003cpolyline points=\&quot;14.983 5.53 9 9 3.017 5.53\&quot;\u003e\u003c/polyline\u003e\u003cline x1=\&quot;9\&quot; y1=\&quot;15.938\&quot; x2=\&quot;9\&quot; y2=\&quot;9\&quot;\u003e\u003c/line\u003e\u003cpath d=\&quot;M7.997,2.332L3.747,4.797c-.617,.358-.997,1.017-.997,1.73v4.946c0,.713,.38,1.372,.997,1.73l4.25,2.465c.621,.36,1.386,.36,2.007,0l4.25-2.465c.617-.358,.997-1.017,.997-1.73V6.527c0-.713-.38-1.372-.997-1.73l-4.25-2.465c-.621-.36-1.386-.36-2.007,0Z\&quot;\u003e\u003c/path\u003e\u003c/g\u003e\u003c/svg\u003e&quot;},{&quot;title&quot;:&quot;Datatable&quot;,&quot;url&quot;:&quot;/docs/datatable&quot;,&quot;customIcon&quot;:&quot;\u003csvg xmlns=\&quot;http://www.w3.org/2000/svg\&quot; class=\&quot;size-4\&quot; width=\&quot;18\&quot; height=\&quot;18\&quot; viewBox=\&quot;0 0 18 18\&quot;\u003e\u003cg fill=\&quot;none\&quot; stroke-linecap=\&quot;round\&quot; stroke-linejoin=\&quot;round\&quot; stroke-width=\&quot;1.5\&quot; stroke=\&quot;currentColor\&quot;\u003e\u003cpolyline points=\&quot;14.983 5.53 9 9 3.017 5.53\&quot;\u003e\u003c/polyline\u003e\u003cline x1=\&quot;9\&quot; y1=\&quot;15.938\&quot; x2=\&quot;9\&quot; y2=\&quot;9\&quot;\u003e\u003c/line\u003e\u003cpath d=\&quot;M7.997,2.332L3.747,4.797c-.617,.358-.997,1.017-.997,1.73v4.946c0,.713,.38,1.372,.997,1.73l4.25,2.465c.621,.36,1.386,.36,2.007,0l4.25-2.465c.617-.358,.997-1.017,.997-1.73V6.527c0-.713-.38-1.372-.997-1.73l-4.25-2.465c-.621-.36-1.386-.36-2.007,0Z\&quot;\u003e\u003c/path\u003e\u003c/g\u003e\u003c/svg\u003e&quot;},{&quot;title&quot;:&quot;Date Picker&quot;,&quot;url&quot;:&quot;/docs/date-picker&quot;,&quot;customIcon&quot;:&quot;\u003csvg xmlns=\&quot;http://www.w3.org/2000/svg\&quot; class=\&quot;size-4\&quot; width=\&quot;18\&quot; height=\&quot;18\&quot;
417 viewBox=\&quot;0 0 18 18\&quot;\u003e\u003cg fill=\&quot;none\&quot; stroke-linecap=\&quot;round\&quot; stroke-linejoin=\&quot;round\&quot; stroke-width=\&quot;1.5\&quot; stroke=\&quot;currentColor\&quot;\u003e\u003cpolyline points=\&quot;14.983 5.53 9 9 3.017 5.53\&quot;\u003e\u003c/polyline\u003e\u003cline x1=\&quot;9\&quot; y1=\&quot;15.938\&quot; x2=\&quot;9\&quot; y2=\&quot;9\&quot;\u003e\u003c/line\u003e\u003cpath d=\&quot;M7.997,2.332L3.747,4.797c-.617,.358-.997,1.017-.997,1.73v4.946c0,.713,.38,1.372,.997,1.73l4.25,2.465c.621,.36,1.386,.36,2.007,0l4.25-2.465c.617-.358,.997-1.017,.997-1.73V6.527c0-.713-.38-1.372-.997-1.73l-4.25-2.465c-.621-.36-1.386-.36-2.007,0Z\&quot;\u003e\u003c/path\u003e\u003c/g\u003e\u003c/svg\u003e&quot;},{&quot;title&quot;:&quot;Dark Mode Switcher&quot;,&quot;url&quot;:&quot;/docs/dark-mode-switcher&quot;,&quot;customIcon&quot;:&quot;\u003csvg xmlns=\&quot;http://www.w3.org/2000/svg\&quot; class=\&quot;size-4\&quot; width=\&quot;18\&quot; height=\&quot;18\&quot; viewBox=\&quot;0 0 18 18\&quot;\u003e\u003cg fill=\&quot;none\&quot; stroke-linecap=\&quot;round\&quot; stroke-linejoin=\&quot;round\&quot; stroke-width=\&quot;1.5\&quot; stroke=\&quot;currentColor\&quot;\u003e\u003cpolyline points=\&quot;14.983 5.53 9 9 3.017 5.53\&quot;\u003e\u003c/polyline\u003e\u003cline x1=\&quot;9\&quot; y1=\&quot;15.938\&quot; x2=\&quot;9\&quot; y2=\&quot;9\&quot;\u003e\u003c/line\u003e\u003cpath d=\&quot;M7.997,2.332L3.747,4.797c-.617,.358-.997,1.017-.997,1.73v4.946c0,.713,.38,1.372,.997,1.73l4.25,2.465c.621,.36,1.386,.36,2.007,0l4.25-2.465c.617-.358,.997-1.017,.997-1.73V6.527c0-.713-.38-1.372-.997-1.73l-4.25-2.465c-.621-.36-1.386-.36-2.007,0Z\&quot;\u003e\u003c/path\u003e\u003c/g\u003e\u003c/svg\u003e&quot;},{&quot;title&quot;:&quot;Dock&quot;,&quot;url&quot;:&quot;/docs/dock&quot;,&quot;customIcon&quot;:&quot;\u003csvg xmlns=\&quot;http://www.w3.org/2000/svg\&quot; class=\&quot;size-4\&quot; width=\&quot;18\&quot; height=\&quot;18\&quot;
417 viewBox=\&quot;0 0 18 18\&quot;\u003e\u003cg fill=\&quot;none\&quot; stroke-linecap=\&quot;round\&quot; stroke-linejoin=\&quot;round\&quot; stroke-width=\&quot;1.5\&quot; stroke=\&quot;currentColor\&quot;\u003e\u003cpolyline points=\&quot;14.983 5.53 9 9 3.017 5.53\&quot;\u003e\u003c/polyline\u003e\u003cline x1=\&quot;9\&quot; y1=\&quot;15.938\&quot; x2=\&quot;9\&quot; y2=\&quot;9\&quot;\u003e\u003c/line\u003e\u003cpath d=\&quot;M7.997,2.332L3.747,4.797c-.617,.358-.997,1.017-.997,1.73v4.946c0,.713,.38,1.372,.997,1.73l4.25,2.465c.621,.36,1.386,.36,2.007,0l4.25-2.465c.617-.358,.997-1.017,.997-1.73V6.527c0-.713-.38-1.372-.997-1.73l-4.25-2.465c-.621-.36-1.386-.36-2.007,0Z\&quot;\u003e\u003c/path\u003e\u003c/g\u003e\u003c/svg\u003e&quot;},{&quot;title&quot;:&quot;Drawer&quot;,&quot;url&quot;:&quot;/docs/drawer&quot;,&quot;customIcon&quot;:&quot;\u003csvg xmlns=\&quot;http://www.w3.org/2000/svg\&quot; class=\&quot;size-4\&quot; width=\&quot;18\&quot; height=\&quot;18\&quot; viewBox=\&quot;0 0 18 18\&quot;\u003e\u003cg fill=\&quot;none\&quot; stroke-linecap=\&quot;round\&quot; stroke-linejoin=\&quot;round\&quot; stroke-width=\&quot;1.5\&quot; stroke=\&quot;currentColor\&quot;\u003e\u003cpolyline points=\&quot;14.983 5.53 9 9 3.017 5.53\&quot;\u003e\u003c/polyline\u003e\u003cline x1=\&quot;9\&quot; y1=\&quot;15.938\&quot; x2=\&quot;9\&quot; y2=\&quot;9\&quot;\u003e\u003c/line\u003e\u003cpath d=\&quot;M7.997,2.332L3.747,4.797c-.617,.358-.997,1.017-.997,1.73v4.946c0,.713,.38,1.372,.997,1.73l4.25,2.465c.621,.36,1.386,.36,2.007,0l4.25-2.465c.617-.358,.997-1.017,.997-1.73V6.527c0-.713-.38-1.372-.997-1.73l-4.25-2.465c-.621-.36-1.386-.36-2.007,0Z\&quot;\u003e\u003c/path\u003e\u003c/g\u003e\u003c/svg\u003e&quot;},{&quot;title&quot;:&quot;Dropdown&quot;,&quot;url&quot;:&quot;/docs/dropdown&quot;,&quot;customIcon&quot;:&quot;\u003csvg xmlns=\&quot;http://www.w3.org/2000/svg\&quot; class=\&quot;size-4\&quot; width=\&quot;18\&quot; height=\&quot;18\&quot;
417 viewBox=\&quot;0 0 18 18\&quot;\u003e\u003cg fill=\&quot;none\&quot; stroke-linecap=\&quot;round\&quot; stroke-linejoin=\&quot;round\&quot; stroke-width=\&quot;1.5\&quot; stroke=\&quot;currentColor\&quot;\u003e\u003cpolyline points=\&quot;14.983 5.53 9 9 3.017 5.53\&quot;\u003e\u003c/polyline\u003e\u003cline x1=\&quot;9\&quot; y1=\&quot;15.938\&quot; x2=\&quot;9\&quot; y2=\&quot;9\&quot;\u003e\u003c/line\u003e\u003cpath d=\&quot;M7.997,2.332L3.747,4.797c-.617,.358-.997,1.017-.997,1.73v4.946c0,.713,.38,1.372,.997,1.73l4.25,2.465c.621,.36,1.386,.36,2.007,0l4.25-2.465c.617-.358,.997-1.017,.997-1.73V6.527c0-.713-.38-1.372-.997-1.73l-4.25-2.465c-.621-.36-1.386-.36-2.007,0Z\&quot;\u003e\u003c/path\u003e\u003c/g\u003e\u003c/svg\u003e&quot;},{&quot;title&quot;:&quot;Emoji Picker&quot;,&quot;url&quot;:&quot;/docs/emoji-picker&quot;,&quot;customIcon&quot;:&quot;\u003csvg xmlns=\&quot;http://www.w3.org/2000/svg\&quot; class=\&quot;size-4\&quot; width=\&quot;18\&quot; height=\&quot;18\&quot; viewBox=\&quot;0 0 18 18\&quot;\u003e\u003cg fill=\&quot;none\&quot; stroke-linecap=\&quot;round\&quot; stroke-linejoin=\&quot;round\&quot; stroke-width=\&quot;1.5\&quot; stroke=\&quot;currentColor\&quot;\u003e\u003cpolyline points=\&quot;14.983 5.53 9 9 3.017 5.53\&quot;\u003e\u003c/polyline\u003e\u003cline x1=\&quot;9\&quot; y1=\&quot;15.938\&quot; x2=\&quot;9\&quot; y2=\&quot;9\&quot;\u003e\u003c/line\u003e\u003cpath d=\&quot;M7.997,2.332L3.747,4.797c-.617,.358-.997,1.017-.997,1.73v4.946c0,.713,.38,1.372,.997,1.73l4.25,2.465c.621,.36,1.386,.36,2.007,0l4.25-2.465c.617-.358,.997-1.017,.997-1.73V6.527c0-.713-.38-1.372-.997-1.73l-4.25-2.465c-.621-.36-1.386-.36-2.007,0Z\&quot;\u003e\u003c/path\u003e\u003c/g\u003e\u003c/svg\u003e&quot;},{&quot;title&quot;:&quot;Feedback&quot;,&quot;url&quot;:&quot;/docs/feedback&quot;,&quot;customIcon&quot;:&quot;\u003csvg xmlns=\&quot;http://www.w3.org/2000/svg\&quot; class=\&quot;size-4\&quot; width=\&quot;18\&quot; height=\&quot;18\&quot;
417 viewBox=\&quot;0 0 18 18\&quot;\u003e\u003cg fill=\&quot;none\&quot; stroke-linecap=\&quot;round\&quot; stroke-linejoin=\&quot;round\&quot; stroke-width=\&quot;1.5\&quot; stroke=\&quot;currentColor\&quot;\u003e\u003cpolyline points=\&quot;14.983 5.53 9 9 3.017 5.53\&quot;\u003e\u003c/polyline\u003e\u003cline x1=\&quot;9\&quot; y1=\&quot;15.938\&quot; x2=\&quot;9\&quot; y2=\&quot;9\&quot;\u003e\u003c/line\u003e\u003cpath d=\&quot;M7.997,2.332L3.747,4.797c-.617,.358-.997,1.017-.997,1.73v4.946c0,.713,.38,1.372,.997,1.73l4.25,2.465c.621,.36,1.386,.36,2.007,0l4.25-2.465c.617-.358,.997-1.017,.997-1.73V6.527c0-.713-.38-1.372-.997-1.73l-4.25-2.465c-.621-.36-1.386-.36-2.007,0Z\&quot;\u003e\u003c/path\u003e\u003c/g\u003e\u003c/svg\u003e&quot;},{&quot;title&quot;:&quot;Forms&quot;,&quot;url&quot;:&quot;/docs/forms&quot;,&quot;customIcon&quot;:&quot;\u003csvg xmlns=\&quot;http://www.w3.org/2000/svg\&quot; class=\&quot;size-4\&quot; width=\&quot;18\&quot; height=\&quot;18\&quot; viewBox=\&quot;0 0 18 18\&quot;\u003e\u003cg fill=\&quot;none\&quot; stroke-linecap=\&quot;round\&quot; stroke-linejoin=\&quot;round\&quot; stroke-width=\&quot;1.5\&quot; stroke=\&quot;currentColor\&quot;\u003e\u003cpolyline points=\&quot;14.983 5.53 9 9 3.017 5.53\&quot;\u003e\u003c/polyline\u003e\u003cline x1=\&quot;9\&quot; y1=\&quot;15.938\&quot; x2=\&quot;9\&quot; y2=\&quot;9\&quot;\u003e\u003c/line\u003e\u003cpath d=\&quot;M7.997,2.332L3.747,4.797c-.617,.358-.997,1.017-.997,1.73v4.946c0,.713,.38,1.372,.997,1.73l4.25,2.465c.621,.36,1.386,.36,2.007,0l4.25-2.465c.617-.358,.997-1.017,.997-1.73V6.527c0-.713-.38-1.372-.997-1.73l-4.25-2.465c-.621-.36-1.386-.36-2.007,0Z\&quot;\u003e\u003c/path\u003e\u003c/g\u003e\u003c/svg\u003e&quot;},{&quot;title&quot;:&quot;Infinite Scroll&quot;,&quot;url&quot;:&quot;/docs/infinite-scroll&quot;,&quot;customIcon&quot;:&quot;\u003csvg xmlns=\&quot;http://www.w3.org/2000/svg\&quot; class=\&quot;size-4\&quot; width=\&quot;18\&quot; height=\&quot;18\&quot;
417 viewBox=\&quot;0 0 18 18\&quot;\u003e\u003cg fill=\&quot;none\&quot; stroke-linecap=\&quot;round\&quot; stroke-linejoin=\&quot;round\&quot; stroke-width=\&quot;1.5\&quot; stroke=\&quot;currentColor\&quot;\u003e\u003cpolyline points=\&quot;14.983 5.53 9 9 3.017 5.53\&quot;\u003e\u003c/polyline\u003e\u003cline x1=\&quot;9\&quot; y1=\&quot;15.938\&quot; x2=\&quot;9\&quot; y2=\&quot;9\&quot;\u003e\u003c/line\u003e\u003cpath d=\&quot;M7.997,2.332L3.747,4.797c-.617,.358-.997,1.017-.997,1.73v4.946c0,.713,.38,1.372,.997,1.73l4.25,2.465c.621,.36,1.386,.36,2.007,0l4.25-2.465c.617-.358,.997-1.017,.997-1.73V6.527c0-.713-.38-1.372-.997-1.73l-4.25-2.465c-.621-.36-1.386-.36-2.007,0Z\&quot;\u003e\u003c/path\u003e\u003c/g\u003e\u003c/svg\u003e&quot;},{&quot;title&quot;:&quot;KBD \u0026 Hotkeys&quot;,&quot;url&quot;:&quot;/docs/kbd&quot;,&quot;customIcon&quot;:&quot;\u003csvg xmlns=\&quot;http://www.w3.org/2000/svg\&quot; class=\&quot;size-4\&quot; width=\&quot;18\&quot; height=\&quot;18\&quot; viewBox=\&quot;0 0 18 18\&quot;\u003e\u003cg fill=\&quot;none\&quot; stroke-linecap=\&quot;round\&quot; stroke-linejoin=\&quot;round\&quot; stroke-width=\&quot;1.5\&quot; stroke=\&quot;currentColor\&quot;\u003e\u003cpolyline points=\&quot;14.983 5.53 9 9 3.017 5.53\&quot;\u003e\u003c/polyline\u003e\u003cline x1=\&quot;9\&quot; y1=\&quot;15.938\&quot; x2=\&quot;9\&quot; y2=\&quot;9\&quot;\u003e\u003c/line\u003e\u003cpath d=\&quot;M7.997,2.332L3.747,4.797c-.617,.358-.997,1.017-.997,1.73v4.946c0,.713,.38,1.372,.997,1.73l4.25,2.465c.621,.36,1.386,.36,2.007,0l4.25-2.465c.617-.358,.997-1.017,.997-1.73V6.527c0-.713-.38-1.372-.997-1.73l-4.25-2.465c-.621-.36-1.386-.36-2.007,0Z\&quot;\u003e\u003c/path\u003e\u003c/g\u003e\u003c/svg\u003e&quot;},{&quot;title&quot;:&quot;Lightbox&quot;,&quot;url&quot;:&quot;/docs/lightbox&quot;,&quot;customIcon&quot;:&quot;\u003csvg xmlns=\&quot;http://www.w3.org/2000/svg\&quot; class=\&quot;size-4\&quot; width=\&quot;18\&quot; height=\&quot;18\&quot;
417 viewBox=\&quot;0 0 18 18\&quot;\u003e\u003cg fill=\&quot;none\&quot; stroke-linecap=\&quot;round\&quot; stroke-linejoin=\&quot;round\&quot; stroke-width=\&quot;1.5\&quot; stroke=\&quot;currentColor\&quot;\u003e\u003cpolyline points=\&quot;14.983 5.53 9 9 3.017 5.53\&quot;\u003e\u003c/polyline\u003e\u003cline x1=\&quot;9\&quot; y1=\&quot;15.938\&quot; x2=\&quot;9\&quot; y2=\&quot;9\&quot;\u003e\u003c/line\u003e\u003cpath d=\&quot;M7.997,2.332L3.747,4.797c-.617,.358-.997,1.017-.997,1.73v4.946c0,.713,.38,1.372,.997,1.73l4.25,2.465c.621,.36,1.386,.36,2.007,0l4.25-2.465c.617-.358,.997-1.017,.997-1.73V6.527c0-.713-.38-1.372-.997-1.73l-4.25-2.465c-.621-.36-1.386-.36-2.007,0Z\&quot;\u003e\u003c/path\u003e\u003c/g\u003e\u003c/svg\u003e&quot;},{&quot;title&quot;:&quot;Loading Indicator&quot;,&quot;url&quot;:&quot;/docs/loading-indicator&quot;,&quot;customIcon&quot;:&quot;\u003csvg xmlns=\&quot;http://www.w3.org/2000/svg\&quot; class=\&quot;size-4\&quot; width=\&quot;18\&quot; height=\&quot;18\&quot; viewBox=\&quot;0 0 18 18\&quot;\u003e\u003cg fill=\&quot;none\&quot; stroke-linecap=\&quot;round\&quot; stroke-linejoin=\&quot;round\&quot; stroke-width=\&quot;1.5\&quot; stroke=\&quot;currentColor\&quot;\u003e\u003cpolyline points=\&quot;14.983 5.53 9 9 3.017 5.53\&quot;\u003e\u003c/polyline\u003e\u003cline x1=\&quot;9\&quot; y1=\&quot;15.938\&quot; x2=\&quot;9\&quot; y2=\&quot;9\&quot;\u003e\u003c/line\u003e\u003cpath d=\&quot;M7.997,2.332L3.747,4.797c-.617,.358-.997,1.017-.997,1.73v4.946c0,.713,.38,1.372,.997,1.73l4.25,2.465c.621,.36,1.386,.36,2.007,0l4.25-2.465c.617-.358,.997-1.017,.997-1.73V6.527c0-.713-.38-1.372-.997-1.73l-4.25-2.465c-.621-.36-1.386-.36-2.007,0Z\&quot;\u003e\u003c/path\u003e\u003c/g\u003e\u003c/svg\u003e&quot;},{&quot;title&quot;:&quot;Marquee&quot;,&quot;url&quot;:&quot;/docs/marquee&quot;,&quot;customIcon&quot;:&quot;\u003csvg xmlns=\&quot;http://www.w3.org/2000/svg\&quot; class=\&quot;size-4\&quot; width=\&quot;18\&quot; height=\&quot;18\&quot;
417 viewBox=\&quot;0 0 18 18\&quot;\u003e\u003cg fill=\&quot;none\&quot; stroke-linecap=\&quot;round\&quot; stroke-linejoin=\&quot;round\&quot; stroke-width=\&quot;1.5\&quot; stroke=\&quot;currentColor\&quot;\u003e\u003cpolyline points=\&quot;14.983 5.53 9 9 3.017 5.53\&quot;\u003e\u003c/polyline\u003e\u003cline x1=\&quot;9\&quot; y1=\&quot;15.938\&quot; x2=\&quot;9\&quot; y2=\&quot;9\&quot;\u003e\u003c/line\u003e\u003cpath d=\&quot;M7.997,2.332L3.747,4.797c-.617,.358-.997,1.017-.997,1.73v4.946c0,.713,.38,1.372,.997,1.73l4.25,2.465c.621,.36,1.386,.36,2.007,0l4.25-2.465c.617-.358,.997-1.017,.997-1.73V6.527c0-.713-.38-1.372-.997-1.73l-4.25-2.465c-.621-.36-1.386-.36-2.007,0Z\&quot;\u003e\u003c/path\u003e\u003c/g\u003e\u003c/svg\u003e&quot;},{&quot;title&quot;:&quot;Modal&quot;,&quot;url&quot;:&quot;/docs/modal&quot;,&quot;customIcon&quot;:&quot;\u003csvg xmlns=\&quot;http://www.w3.org/2000/svg\&quot; class=\&quot;size-4\&quot; width=\&quot;18\&quot; height=\&quot;18\&quot; viewBox=\&quot;0 0 18 18\&quot;\u003e\u003cg fill=\&quot;none\&quot; stroke-linecap=\&quot;round\&quot; stroke-linejoin=\&quot;round\&quot; stroke-width=\&quot;1.5\&quot; stroke=\&quot;currentColor\&quot;\u003e\u003cpolyline points=\&quot;14.983 5.53 9 9 3.017 5.53\&quot;\u003e\u003c/polyline\u003e\u003cline x1=\&quot;9\&quot; y1=\&quot;15.938\&quot; x2=\&quot;9\&quot; y2=\&quot;9\&quot;\u003e\u003c/line\u003e\u003cpath d=\&quot;M7.997,2.332L3.747,4.797c-.617,.358-.997,1.017-.997,1.73v4.946c0,.713,.38,1.372,.997,1.73l4.25,2.465c.621,.36,1.386,.36,2.007,0l4.25-2.465c.617-.358,.997-1.017,.997-1.73V6.527c0-.713-.38-1.372-.997-1.73l-4.25-2.465c-.621-.36-1.386-.36-2.007,0Z\&quot;\u003e\u003c/path\u003e\u003c/g\u003e\u003c/svg\u003e&quot;},{&quot;title&quot;:&quot;Onboarding Checklist&quot;,&quot;url&quot;:&quot;/docs/onboarding-checklist&quot;,&quot;customIcon&quot;:&quot;\u003csvg xmlns=\&quot;http://www.w3.org/2000/svg\&quot; class=\&quot;size-4\&quot; width=\&quot;18\&quot; height=\&quot;18\&quot;
417 viewBox=\&quot;0 0 18 18\&quot;\u003e\u003cg fill=\&quot;none\&quot; stroke-linecap=\&quot;round\&quot; stroke-linejoin=\&quot;round\&quot; stroke-width=\&quot;1.5\&quot; stroke=\&quot;currentColor\&quot;\u003e\u003cpolyline points=\&quot;14.983 5.53 9 9 3.017 5.53\&quot;\u003e\u003c/polyline\u003e\u003cline x1=\&quot;9\&quot; y1=\&quot;15.938\&quot; x2=\&quot;9\&quot; y2=\&quot;9\&quot;\u003e\u003c/line\u003e\u003cpath d=\&quot;M7.997,2.332L3.747,4.797c-.617,.358-.997,1.017-.997,1.73v4.946c0,.713,.38,1.372,.997,1.73l4.25,2.465c.621,.36,1.386,.36,2.007,0l4.25-2.465c.617-.358,.997-1.017,.997-1.73V6.527c0-.713-.38-1.372-.997-1.73l-4.25-2.465c-.621-.36-1.386-.36-2.007,0Z\&quot;\u003e\u003c/path\u003e\u003c/g\u003e\u003c/svg\u003e&quot;},{&quot;title&quot;:&quot;Navbar&quot;,&quot;url&quot;:&quot;/docs/navbar&quot;,&quot;customIcon&quot;:&quot;\u003csvg xmlns=\&quot;http://www.w3.org/2000/svg\&quot; class=\&quot;size-4\&quot; width=\&quot;18\&quot; height=\&quot;18\&quot; viewBox=\&quot;0 0 18 18\&quot;\u003e\u003cg fill=\&quot;none\&quot; stroke-linecap=\&quot;round\&quot; stroke-linejoin=\&quot;round\&quot; stroke-width=\&quot;1.5\&quot; stroke=\&quot;currentColor\&quot;\u003e\u003cpolyline points=\&quot;14.983 5.53 9 9 3.017 5.53\&quot;\u003e\u003c/polyline\u003e\u003cline x1=\&quot;9\&quot; y1=\&quot;15.938\&quot; x2=\&quot;9\&quot; y2=\&quot;9\&quot;\u003e\u003c/line\u003e\u003cpath d=\&quot;M7.997,2.332L3.747,4.797c-.617,.358-.997,1.017-.997,1.73v4.946c0,.713,.38,1.372,.997,1.73l4.25,2.465c.621,.36,1.386,.36,2.007,0l4.25-2.465c.617-.358,.997-1.017,.997-1.73V6.527c0-.713-.38-1.372-.997-1.73l-4.25-2.465c-.621-.36-1.386-.36-2.007,0Z\&quot;\u003e\u003c/path\u003e\u003c/g\u003e\u003c/svg\u003e&quot;},{&quot;title&quot;:&quot;Password&quot;,&quot;url&quot;:&quot;/docs/password&quot;,&quot;customIcon&quot;:&quot;\u003csvg xmlns=\&quot;http://www.w3.org/2000/svg\&quot; class=\&quot;size-4\&quot; width=\&quot;18\&quot; height=\&quot;18\&quot;
417 viewBox=\&quot;0 0 18 18\&quot;\u003e\u003cg fill=\&quot;none\&quot; stroke-linecap=\&quot;round\&quot; stroke-linejoin=\&quot;round\&quot; stroke-width=\&quot;1.5\&quot; stroke=\&quot;currentColor\&quot;\u003e\u003cpolyline points=\&quot;14.983 5.53 9 9 3.017 5.53\&quot;\u003e\u003c/polyline\u003e\u003cline x1=\&quot;9\&quot; y1=\&quot;15.938\&quot; x2=\&quot;9\&quot; y2=\&quot;9\&quot;\u003e\u003c/line\u003e\u003cpath d=\&quot;M7.997,2.332L3.747,4.797c-.617,.358-.997,1.017-.997,1.73v4.946c0,.713,.38,1.372,.997,1.73l4.25,2.465c.621,.36,1.386,.36,2.007,0l4.25-2.465c.617-.358,.997-1.017,.997-1.73V6.527c0-.713-.38-1.372-.997-1.73l-4.25-2.465c-.621-.36-1.386-.36-2.007,0Z\&quot;\u003e\u003c/path\u003e\u003c/g\u003e\u003c/svg\u003e&quot;},{&quot;title&quot;:&quot;Pagination&quot;,&quot;url&quot;:&quot;/docs/pagination&quot;,&quot;customIcon&quot;:&quot;\u003csvg xmlns=\&quot;http://www.w3.org/2000/svg\&quot; class=\&quot;size-4\&quot; width=\&quot;18\&quot; height=\&quot;18\&quot; viewBox=\&quot;0 0 18 18\&quot;\u003e\u003cg fill=\&quot;none\&quot; stroke-linecap=\&quot;round\&quot; stroke-linejoin=\&quot;round\&quot; stroke-width=\&quot;1.5\&quot; stroke=\&quot;currentColor\&quot;\u003e\u003cpolyline points=\&quot;14.983 5.53 9 9 3.017 5.53\&quot;\u003e\u003c/polyline\u003e\u003cline x1=\&quot;9\&quot; y1=\&quot;15.938\&quot; x2=\&quot;9\&quot; y2=\&quot;9\&quot;\u003e\u003c/line\u003e\u003cpath d=\&quot;M7.997,2.332L3.747,4.797c-.617,.358-.997,1.017-.997,1.73v4.946c0,.713,.38,1.372,.997,1.73l4.25,2.465c.621,.36,1.386,.36,2.007,0l4.25-2.465c.617-.358,.997-1.017,.997-1.73V6.527c0-.713-.38-1.372-.997-1.73l-4.25-2.465c-.621-.36-1.386-.36-2.007,0Z\&quot;\u003e\u003c/path\u003e\u003c/g\u003e\u003c/svg\u003e&quot;},{&quot;title&quot;:&quot;Popover&quot;,&quot;url&quot;:&quot;/docs/popover&quot;,&quot;customIcon&quot;:&quot;\u003csvg xmlns=\&quot;http://www.w3.org/2000/svg\&quot; class=\&quot;size-4\&quot; width=\&quot;18\&quot; height=\&quot;18\&quot;
417 viewBox=\&quot;0 0 18 18\&quot;\u003e\u003cg fill=\&quot;none\&quot; stroke-linecap=\&quot;round\&quot; stroke-linejoin=\&quot;round\&quot; stroke-width=\&quot;1.5\&quot; stroke=\&quot;currentColor\&quot;\u003e\u003cpolyline points=\&quot;14.983 5.53 9 9 3.017 5.53\&quot;\u003e\u003c/polyline\u003e\u003cline x1=\&quot;9\&quot; y1=\&quot;15.938\&quot; x2=\&quot;9\&quot; y2=\&quot;9\&quot;\u003e\u003c/line\u003e\u003cpath d=\&quot;M7.997,2.332L3.747,4.797c-.617,.358-.997,1.017-.997,1.73v4.946c0,.713,.38,1.372,.997,1.73l4.25,2.465c.621,.36,1.386,.36,2.007,0l4.25-2.465c.617-.358,.997-1.017,.997-1.73V6.527c0-.713-.38-1.372-.997-1.73l-4.25-2.465c-.621-.36-1.386-.36-2.007,0Z\&quot;\u003e\u003c/path\u003e\u003c/g\u003e\u003c/svg\u003e&quot;},{&quot;title&quot;:&quot;Radio&quot;,&quot;url&quot;:&quot;/docs/radio&quot;,&quot;customIcon&quot;:&quot;\u003csvg xmlns=\&quot;http://www.w3.org/2000/svg\&quot; class=\&quot;size-4\&quot; width=\&quot;18\&quot; height=\&quot;18\&quot; viewBox=\&quot;0 0 18 18\&quot;\u003e\u003cg fill=\&quot;none\&quot; stroke-linecap=\&quot;round\&quot; stroke-linejoin=\&quot;round\&quot; stroke-width=\&quot;1.5\&quot; stroke=\&quot;currentColor\&quot;\u003e\u003cpolyline points=\&quot;14.983 5.53 9 9 3.017 5.53\&quot;\u003e\u003c/polyline\u003e\u003cline x1=\&quot;9\&quot; y1=\&quot;15.938\&quot; x2=\&quot;9\&quot; y2=\&quot;9\&quot;\u003e\u003c/line\u003e\u003cpath d=\&quot;M7.997,2.332L3.747,4.797c-.617,.358-.997,1.017-.997,1.73v4.946c0,.713,.38,1.372,.997,1.73l4.25,2.465c.621,.36,1.386,.36,2.007,0l4.25-2.465c.617-.358,.997-1.017,.997-1.73V6.527c0-.713-.38-1.372-.997-1.73l-4.25-2.465c-.621-.36-1.386-.36-2.007,0Z\&quot;\u003e\u003c/path\u003e\u003c/g\u003e\u003c/svg\u003e&quot;},{&quot;title&quot;:&quot;Scroll Area&quot;,&quot;url&quot;:&quot;/docs/scroll-area&quot;,&quot;customIcon&quot;:&quot;\u003csvg xmlns=\&quot;http://www.w3.org/2000/svg\&quot; class=\&quot;size-4\&quot; width=\&quot;18\&quot; height=\&quot;18\&quot;
417 viewBox=\&quot;0 0 18 18\&quot;\u003e\u003cg fill=\&quot;none\&quot; stroke-linecap=\&quot;round\&quot; stroke-linejoin=\&quot;round\&quot; stroke-width=\&quot;1.5\&quot; stroke=\&quot;currentColor\&quot;\u003e\u003cpolyline points=\&quot;14.983 5.53 9 9 3.017 5.53\&quot;\u003e\u003c/polyline\u003e\u003cline x1=\&quot;9\&quot; y1=\&quot;15.938\&quot; x2=\&quot;9\&quot; y2=\&quot;9\&quot;\u003e\u003c/line\u003e\u003cpath d=\&quot;M7.997,2.332L3.747,4.797c-.617,.358-.997,1.017-.997,1.73v4.946c0,.713,.38,1.372,.997,1.73l4.25,2.465c.621,.36,1.386,.36,2.007,0l4.25-2.465c.617-.358,.997-1.017,.997-1.73V6.527c0-.713-.38-1.372-.997-1.73l-4.25-2.465c-.621-.36-1.386-.36-2.007,0Z\&quot;\u003e\u003c/path\u003e\u003c/g\u003e\u003c/svg\u003e&quot;},{&quot;title&quot;:&quot;Select&quot;,&quot;url&quot;:&quot;/docs/select&quot;,&quot;customIcon&quot;:&quot;\u003csvg xmlns=\&quot;http://www.w3.org/2000/svg\&quot; class=\&quot;size-4\&quot; width=\&quot;18\&quot; height=\&quot;18\&quot; viewBox=\&quot;0 0 18 18\&quot;\u003e\u003cg fill=\&quot;none\&quot; stroke-linecap=\&quot;round\&quot; stroke-linejoin=\&quot;round\&quot; stroke-width=\&quot;1.5\&quot; stroke=\&quot;currentColor\&quot;\u003e\u003cpolyline points=\&quot;14.983 5.53 9 9 3.017 5.53\&quot;\u003e\u003c/polyline\u003e\u003cline x1=\&quot;9\&quot; y1=\&quot;15.938\&quot; x2=\&quot;9\&quot; y2=\&quot;9\&quot;\u003e\u003c/line\u003e\u003cpath d=\&quot;M7.997,2.332L3.747,4.797c-.617,.358-.997,1.017-.997,1.73v4.946c0,.713,.38,1.372,.997,1.73l4.25,2.465c.621,.36,1.386,.36,2.007,0l4.25-2.465c.617-.358,.997-1.017,.997-1.73V6.527c0-.713-.38-1.372-.997-1.73l-4.25-2.465c-.621-.36-1.386-.36-2.007,0Z\&quot;\u003e\u003c/path\u003e\u003c/g\u003e\u003c/svg\u003e&quot;},{&quot;title&quot;:&quot;Sidebar&quot;,&quot;url&quot;:&quot;/docs/sidebar&quot;,&quot;customIcon&quot;:&quot;\u003csvg xmlns=\&quot;http://www.w3.org/2000/svg\&quot; class=\&quot;size-4\&quot; width=\&quot;18\&quot; height=\&quot;18\&quot;
417 viewBox=\&quot;0 0 18 18\&quot;\u003e\u003cg fill=\&quot;none\&quot; stroke-linecap=\&quot;round\&quot; stroke-linejoin=\&quot;round\&quot; stroke-width=\&quot;1.5\&quot; stroke=\&quot;currentColor\&quot;\u003e\u003cpolyline points=\&quot;14.983 5.53 9 9 3.017 5.53\&quot;\u003e\u003c/polyline\u003e\u003cline x1=\&quot;9\&quot; y1=\&quot;15.938\&quot; x2=\&quot;9\&quot; y2=\&quot;9\&quot;\u003e\u003c/line\u003e\u003cpath d=\&quot;M7.997,2.332L3.747,4.797c-.617,.358-.997,1.017-.997,1.73v4.946c0,.713,.38,1.372,.997,1.73l4.25,2.465c.621,.36,1.386,.36,2.007,0l4.25-2.465c.617-.358,.997-1.017,.997-1.73V6.527c0-.713-.38-1.372-.997-1.73l-4.25-2.465c-.621-.36-1.386-.36-2.007,0Z\&quot;\u003e\u003c/path\u003e\u003c/g\u003e\u003c/svg\u003e&quot;},{&quot;title&quot;:&quot;Skeleton&quot;,&quot;url&quot;:&quot;/docs/skeleton&quot;,&quot;customIcon&quot;:&quot;\u003csvg xmlns=\&quot;http://www.w3.org/2000/svg\&quot; class=\&quot;size-4\&quot; width=\&quot;18\&quot; height=\&quot;18\&quot; viewBox=\&quot;0 0 18 18\&quot;\u003e\u003cg fill=\&quot;none\&quot; stroke-linecap=\&quot;round\&quot; stroke-linejoin=\&quot;round\&quot; stroke-width=\&quot;1.5\&quot; stroke=\&quot;currentColor\&quot;\u003e\u003cpolyline points=\&quot;14.983 5.53 9 9 3.017 5.53\&quot;\u003e\u003c/polyline\u003e\u003cline x1=\&quot;9\&quot; y1=\&quot;15.938\&quot; x2=\&quot;9\&quot; y2=\&quot;9\&quot;\u003e\u003c/line\u003e\u003cpath d=\&quot;M7.997,2.332L3.747,4.797c-.617,.358-.997,1.017-.997,1.73v4.946c0,.713,.38,1.372,.997,1.73l4.25,2.465c.621,.36,1.386,.36,2.007,0l4.25-2.465c.617-.358,.997-1.017,.997-1.73V6.527c0-.713-.38-1.372-.997-1.73l-4.25-2.465c-.621-.36-1.386-.36-2.007,0Z\&quot;\u003e\u003c/path\u003e\u003c/g\u003e\u003c/svg\u003e&quot;},{&quot;title&quot;:&quot;Slideover&quot;,&quot;url&quot;:&quot;/docs/slideover&quot;,&quot;customIcon&quot;:&quot;\u003csvg xmlns=\&quot;http://www.w3.org/2000/svg\&quot; class=\&quot;size-4\&quot; width=\&quot;18\&quot; height=\&quot;18\&quot;
417 viewBox=\&quot;0 0 18 18\&quot;\u003e\u003cg fill=\&quot;none\&quot; stroke-linecap=\&quot;round\&quot; stroke-linejoin=\&quot;round\&quot; stroke-width=\&quot;1.5\&quot; stroke=\&quot;currentColor\&quot;\u003e\u003cpolyline points=\&quot;14.983 5.53 9 9 3.017 5.53\&quot;\u003e\u003c/polyline\u003e\u003cline x1=\&quot;9\&quot; y1=\&quot;15.938\&quot; x2=\&quot;9\&quot; y2=\&quot;9\&quot;\u003e\u003c/line\u003e\u003cpath d=\&quot;M7.997,2.332L3.747,4.797c-.617,.358-.997,1.017-.997,1.73v4.946c0,.713,.38,1.372,.997,1.73l4.25,2.465c.621,.36,1.386,.36,2.007,0l4.25-2.465c.617-.358,.997-1.017,.997-1.73V6.527c0-.713-.38-1.372-.997-1.73l-4.25-2.465c-.621-.36-1.386-.36-2.007,0Z\&quot;\u003e\u003c/path\u003e\u003c/g\u003e\u003c/svg\u003e&quot;},{&quot;title&quot;:&quot;Stepper&quot;,&quot;url&quot;:&quot;/docs/stepper&quot;,&quot;customIcon&quot;:&quot;\u003csvg xmlns=\&quot;http://www.w3.org/2000/svg\&quot; class=\&quot;size-4\&quot; width=\&quot;18\&quot; height=\&quot;18\&quot; viewBox=\&quot;0 0 18 18\&quot;\u003e\u003cg fill=\&quot;none\&quot; stroke-linecap=\&quot;round\&quot; stroke-linejoin=\&quot;round\&quot; stroke-width=\&quot;1.5\&quot; stroke=\&quot;currentColor\&quot;\u003e\u003cpolyline points=\&quot;14.983 5.53 9 9 3.017 5.53\&quot;\u003e\u003c/polyline\u003e\u003cline x1=\&quot;9\&quot; y1=\&quot;15.938\&quot; x2=\&quot;9\&quot; y2=\&quot;9\&quot;\u003e\u003c/line\u003e\u003cpath d=\&quot;M7.997,2.332L3.747,4.797c-.617,.358-.997,1.017-.997,1.73v4.946c0,.713,.38,1.372,.997,1.73l4.25,2.465c.621,.36,1.386,.36,2.007,0l4.25-2.465c.617-.358,.997-1.017,.997-1.73V6.527c0-.713-.38-1.372-.997-1.73l-4.25-2.465c-.621-.36-1.386-.36-2.007,0Z\&quot;\u003e\u003c/path\u003e\u003c/g\u003e\u003c/svg\u003e&quot;},{&quot;title&quot;:&quot;Switch&quot;,&quot;url&quot;:&quot;/docs/switch&quot;,&quot;customIcon&quot;:&quot;\u003csvg xmlns=\&quot;http://www.w3.org/2000/svg\&quot; class=\&quot;size-4\&quot; width=\&quot;18\&quot; height=\&quot;18\&quot;
417 viewBox=\&quot;0 0 18 18\&quot;\u003e\u003cg fill=\&quot;none\&quot; stroke-linecap=\&quot;round\&quot; stroke-linejoin=\&quot;round\&quot; stroke-width=\&quot;1.5\&quot; stroke=\&quot;currentColor\&quot;\u003e\u003cpolyline points=\&quot;14.983 5.53 9 9 3.017 5.53\&quot;\u003e\u003c/polyline\u003e\u003cline x1=\&quot;9\&quot; y1=\&quot;15.938\&quot; x2=\&quot;9\&quot; y2=\&quot;9\&quot;\u003e\u003c/line\u003e\u003cpath d=\&quot;M7.997,2.332L3.747,4.797c-.617,.358-.997,1.017-.997,1.73v4.946c0,.713,.38,1.372,.997,1.73l4.25,2.465c.621,.36,1.386,.36,2.007,0l4.25-2.465c.617-.358,.997-1.017,.997-1.73V6.527c0-.713-.38-1.372-.997-1.73l-4.25-2.465c-.621-.36-1.386-.36-2.007,0Z\&quot;\u003e\u003c/path\u003e\u003c/g\u003e\u003c/svg\u003e&quot;},{&quot;title&quot;:&quot;Tabs&quot;,&quot;url&quot;:&quot;/docs/tabs&quot;,&quot;customIcon&quot;:&quot;\u003csvg xmlns=\&quot;http://www.w3.org/2000/svg\&quot; class=\&quot;size-4\&quot; width=\&quot;18\&quot; height=\&quot;18\&quot; viewBox=\&quot;0 0 18 18\&quot;\u003e\u003cg fill=\&quot;none\&quot; stroke-linecap=\&quot;round\&quot; stroke-linejoin=\&quot;round\&quot; stroke-width=\&quot;1.5\&quot; stroke=\&quot;currentColor\&quot;\u003e\u003cpolyline points=\&quot;14.983 5.53 9 9 3.017 5.53\&quot;\u003e\u003c/polyline\u003e\u003cline x1=\&quot;9\&quot; y1=\&quot;15.938\&quot; x2=\&quot;9\&quot; y2=\&quot;9\&quot;\u003e\u003c/line\u003e\u003cpath d=\&quot;M7.997,2.332L3.747,4.797c-.617,.358-.997,1.017-.997,1.73v4.946c0,.713,.38,1.372,.997,1.73l4.25,2.465c.621,.36,1.386,.36,2.007,0l4.25-2.465c.617-.358,.997-1.017,.997-1.73V6.527c0-.713-.38-1.372-.997-1.73l-4.25-2.465c-.621-.36-1.386-.36-2.007,0Z\&quot;\u003e\u003c/path\u003e\u003c/g\u003e\u003c/svg\u003e&quot;},{&quot;title&quot;:&quot;Table&quot;,&quot;url&quot;:&quot;/docs/table&quot;,&quot;customIcon&quot;:&quot;\u003csvg xmlns=\&quot;http://www.w3.org/2000/svg\&quot; class=\&quot;size-4\&quot; width=\&quot;18\&quot; height=\&quot;18\&quot;
417 viewBox=\&quot;0 0 18 18\&quot;\u003e\u003cg fill=\&quot;none\&quot; stroke-linecap=\&quot;round\&quot; stroke-linejoin=\&quot;round\&quot; stroke-width=\&quot;1.5\&quot; stroke=\&quot;currentColor\&quot;\u003e\u003cpolyline points=\&quot;14.983 5.53 9 9 3.017 5.53\&quot;\u003e\u003c/polyline\u003e\u003cline x1=\&quot;9\&quot; y1=\&quot;15.938\&quot; x2=\&quot;9\&quot; y2=\&quot;9\&quot;\u003e\u003c/line\u003e\u003cpath d=\&quot;M7.997,2.332L3.747,4.797c-.617,.358-.997,1.017-.997,1.73v4.946c0,.713,.38,1.372,.997,1.73l4.25,2.465c.621,.36,1.386,.36,2.007,0l4.25-2.465c.617-.358,.997-1.017,.997-1.73V6.527c0-.713-.38-1.372-.997-1.73l-4.25-2.465c-.621-.36-1.386-.36-2.007,0Z\&quot;\u003e\u003c/path\u003e\u003c/g\u003e\u003c/svg\u003e&quot;},{&quot;title&quot;:&quot;Testimonial&quot;,&quot;url&quot;:&quot;/docs/testimonial&quot;,&quot;customIcon&quot;:&quot;\u003csvg xmlns=\&quot;http://www.w3.org/2000/svg\&quot; class=\&quot;size-4\&quot; width=\&quot;18\&quot; height=\&quot;18\&quot; viewBox=\&quot;0 0 18 18\&quot;\u003e\u003cg fill=\&quot;none\&quot; stroke-linecap=\&quot;round\&quot; stroke-linejoin=\&quot;round\&quot; stroke-width=\&quot;1.5\&quot; stroke=\&quot;currentColor\&quot;\u003e\u003cpolyline points=\&quot;14.983 5.53 9 9 3.017 5.53\&quot;\u003e\u003c/polyline\u003e\u003cline x1=\&quot;9\&quot; y1=\&quot;15.938\&quot; x2=\&quot;9\&quot; y2=\&quot;9\&quot;\u003e\u003c/line\u003e\u003cpath d=\&quot;M7.997,2.332L3.747,4.797c-.617,.358-.997,1.017-.997,1.73v4.946c0,.713,.38,1.372,.997,1.73l4.25,2.465c.621,.36,1.386,.36,2.007,0l4.25-2.465c.617-.358,.997-1.017,.997-1.73V6.527c0-.713-.38-1.372-.997-1.73l-4.25-2.465c-.621-.36-1.386-.36-2.007,0Z\&quot;\u003e\u003c/path\u003e\u003c/g\u003e\u003c/svg\u003e&quot;},{&quot;title&quot;:&quot;Toast&quot;,&quot;url&quot;:&quot;/docs/toast&quot;,&quot;customIcon&quot;:&quot;\u003csvg xmlns=\&quot;http://www.w3.org/2000/svg\&quot; class=\&quot;size-4\&quot; width=\&quot;18\&quot; height=\&quot;18\&quot;
417 viewBox=\&quot;0 0 18 18\&quot;\u003e\u003cg fill=\&quot;none\&quot; stroke-linecap=\&quot;round\&quot; stroke-linejoin=\&quot;round\&quot; stroke-width=\&quot;1.5\&quot; stroke=\&quot;currentColor\&quot;\u003e\u003cpolyline points=\&quot;14.983 5.53 9 9 3.017 5.53\&quot;\u003e\u003c/polyline\u003e\u003cline x1=\&quot;9\&quot; y1=\&quot;15.938\&quot; x2=\&quot;9\&quot; y2=\&quot;9\&quot;\u003e\u003c/line\u003e\u003cpath d=\&quot;M7.997,2.332L3.747,4.797c-.617,.358-.997,1.017-.997,1.73v4.946c0,.713,.38,1.372,.997,1.73l4.25,2.465c.621,.36,1.386,.36,2.007,0l4.25-2.465c.617-.358,.997-1.017,.997-1.73V6.527c0-.713-.38-1.372-.997-1.73l-4.25-2.465c-.621-.36-1.386-.36-2.007,0Z\&quot;\u003e\u003c/path\u003e\u003c/g\u003e\u003c/svg\u003e&quot;},{&quot;title&quot;:&quot;Tooltip&quot;,&quot;url&quot;:&quot;/docs/tooltip&quot;,&quot;customIcon&quot;:&quot;\u003csvg xmlns=\&quot;http://www.w3.org/2000/svg\&quot; class=\&quot;size-4\&quot; width=\&quot;18\&quot; height=\&quot;18\&quot; viewBox=\&quot;0 0 18 18\&quot;\u003e\u003cg fill=\&quot;none\&quot; stroke-linecap=\&quot;round\&quot; stroke-linejoin=\&quot;round\&quot; stroke-width=\&quot;1.5\&quot; stroke=\&quot;currentColor\&quot;\u003e\u003cpolyline points=\&quot;14.983 5.53 9 9 3.017 5.53\&quot;\u003e\u003c/polyline\u003e\u003cline x1=\&quot;9\&quot; y1=\&quot;15.938\&quot; x2=\&quot;9\&quot; y2=\&quot;9\&quot;\u003e\u003c/line\u003e\u003cpath d=\&quot;M7.997,2.332L3.747,4.797c-.617,.358-.997,1.017-.997,1.73v4.946c0,.713,.38,1.372,.997,1.73l4.25,2.465c.621,.36,1.386,.36,2.007,0l4.25-2.465c.617-.358,.997-1.017,.997-1.73V6.527c0-.713-.38-1.372-.997-1.73l-4.25-2.465c-.621-.36-1.386-.36-2.007,0Z\&quot;\u003e\u003c/path\u003e\u003c/g\u003e\u003c/svg\u003e&quot;},{&quot;title&quot;:&quot;Tree View&quot;,&quot;url&quot;:&quot;/docs/tree-view&quot;,&quot;customIcon&quot;:&quot;\u003csvg xmlns=\&quot;http://www.w3.org/2000/svg\&quot; class=\&quot;size-4\&quot; width=\&quot;18\&quot; height=\&quot;18\&quot;
417 viewBox=\&quot;0 0 18 18\&quot;\u003e\u003cg fill=\&quot;none\&quot; stroke-linecap=\&quot;round\&quot; stroke-linejoin=\&quot;round\&quot; stroke-width=\&quot;1.5\&quot; stroke=\&quot;currentColor\&quot;\u003e\u003cpolyline points=\&quot;14.983 5.53 9 9 3.017 5.53\&quot;\u003e\u003c/polyline\u003e\u003cline x1=\&quot;9\&quot; y1=\&quot;15.938\&quot; x2=\&quot;9\&quot; y2=\&quot;9\&quot;\u003e\u003c/line\u003e\u003cpath d=\&quot;M7.997,2.332L3.747,4.797c-.617,.358-.997,1.017-.997,1.73v4.946c0,.713,.38,1.372,.997,1.73l4.25,2.465c.621,.36,1.386,.36,2.007,0l4.25-2.465c.617-.358,.997-1.017,.997-1.73V6.527c0-.713-.38-1.372-.997-1.73l-4.25-2.465c-.621-.36-1.386-.36-2.007,0Z\&quot;\u003e\u003c/path\u003e\u003c/g\u003e\u003c/svg\u003e&quot;},{&quot;title&quot;:&quot;Two Factor&quot;,&quot;url&quot;:&quot;/docs/two-factor&quot;,&quot;customIcon&quot;:&quot;\u003csvg xmlns=\&quot;http://www.w3.org/2000/svg\&quot; class=\&quot;size-4\&quot; width=\&quot;18\&quot; height=\&quot;18\&quot; viewBox=\&quot;0 0 18 18\&quot;\u003e\u003cg fill=\&quot;none\&quot; stroke-linecap=\&quot;round\&quot; stroke-linejoin=\&quot;round\&quot; stroke-width=\&quot;1.5\&quot; stroke=\&quot;currentColor\&quot;\u003e\u003cpolyline points=\&quot;14.983 5.53 9 9 3.017 5.53\&quot;\u003e\u003c/polyline\u003e\u003cline x1=\&quot;9\&quot; y1=\&quot;15.938\&quot; x2=\&quot;9\&quot; y2=\&quot;9\&quot;\u003e\u003c/line\u003e\u003cpath d=\&quot;M7.997,2.332L3.747,4.797c-.617,.358-.997,1.017-.997,1.73v4.946c0,.713,.38,1.372,.997,1.73l4.25,2.465c.621,.36,1.386,.36,2.007,0l4.25-2.465c.617-.358,.997-1.017,.997-1.73V6.527c0-.713-.38-1.372-.997-1.73l-4.25-2.465c-.621-.36-1.386-.36-2.007,0Z\&quot;\u003e\u003c/path\u003e\u003c/g\u003e\u003c/svg\u003e&quot;}]">
418
419          <div class="relative">
420            <input id="command_palette_search"
421                   autofocus
422                   required
423                   data-autocomplete-target="input"
424                   placeholder="Search documentation..."
425                   class="border-b border-black/10 dark:border-white/10 w-full outline-none py-4 px-4">
426
427            <!-- Clear Button -->
428            <button type="button"
429                    data-autocomplete-target="clearButton"
430                    data-action="click->autocomplete#clearInput"
431                    class="hidden absolute right-2 top-1/2 -translate-y-1/2 items-center justify-center size-8 mr-1 rounded-full hover:bg-neutral-100 transition-colors text-neutral-400 hover:text-neutral-500 dark:hover:bg-neutral-800 dark:text-neutral-500 dark:hover:text-neutral-300 focus-visible:outline-2 focus-visible:outline-offset-0 focus-visible:outline-neutral-600 dar
431k:focus-visible:outline-neutral-200">
432              <svg xmlns="http://www.w3.org/2000/svg" class="size-3.5" width="12" height="12" viewBox="0 0 12 12"><g fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" stroke="currentColor"><line x1="2.25" y1="9.75" x2="9.75" y2="2.25"></line><line x1="9.75" y1="9.75" x2="2.25" y2="2.25"></line></g></svg>
433            </button>
434          </div>
435
436          <div data-autocomplete-target="results"
437              class="small-scrollbar w-full bg-white dark:bg-neutral-900 max-h-[250px] overflow-y-auto"
438              role="listbox"
439              tabindex="-1">
440          </div>
441        </div>
442      </div>
443
444      <!-- Footer -->
445      <div class="hidden sm:flex flex-wrap gap-1 items-center bg-neutral-50 px-4 py-3 text-xs text-neutral-700 dark:bg-neutral-900 dark:text-neutral-300 border-t border-black/10 dark:border-white/10">
446        <div class="flex items-center gap-1">
447          <kbd class="px-1.5 py-0.5 text-xs font-mono bg-neutral-200 dark:bg-neutral-700 rounded">Esc</kbd>
448          <span>to close,</span>
449        </div>
450        <div class="flex items-center gap-1">
451          <kbd class="px-1.5 py-0.5 text-xs font-mono bg-neutral-200 dark:bg-neutral-700 rounded">Enter</kbd>
452          <span>to select,</span>
453        </div>
454        <div class="flex items-center gap-1">
455          <kbd class="px-1.5 py-0.5 text-xs font-mono bg-neutral-200 dark:bg-neutral-700 rounded">
456            <svg xmlns="http://www.w3.org/2000/svg" class="size-2.5" width="18" height="18" viewBox="0 0 18 18"><g fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" stroke="currentColor"><path d="M14.391,8.448L9.398,1.867c-.2-.264-.597-.264-.797,0L3.609,8.448c-.25,.329-.015,.802,.398,.802h2.743v6c0,.552,.448,1,1,1h2.5c.552,0,1-.448,1-1v-6h2.743c.413,0,.648-.473,.398-.802Z"></path></g></svg>
457          </kbd>
458          <kbd class="px-1.5 py-0.5 text-xs font-mono bg-neutral-200 dark:bg-neutral-700 rounded">
459            <svg xmlns="http://www.w3.org/2000/svg" class="size-2.5" width="18" height="18" viewBox="0 0 18 18"><g fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" stroke="currentColor"><path d="M3.609,9.552l4.993,6.581c.2,.264,.597,.264,.797,0l4.993-6.581c.25-.329,.015-.802-.398-.802h-2.743V2.75c0-.552-.448-1-1-1h-2.5c-.552,0-1,.448-1,1v6h-2.743c-.413,0-.648,.473-.398,.802Z"></path></g></svg>
460          </kbd>
461          <span>to navigate.</span>
462        </div>
463      </div>
464    </div>
465  </dialog>
466</div>
467
468            </div>
469          </div>
470          <div class="flex items-center gap-2 md:gap-6">
471            <div class="flex items-center gap-6">
472              <button type="button" class="hidden flex items-center gap-1 rounded-full bg-neutral-950/2 px-2 py-1 inset-ring inset-ring-neutral-950/8 dark:bg-white/5 dark:inset-ring-white/2">
473                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" class="-ml-0.5 size-4 fill-neutral-600 dar
473k:fill-neutral-500"><path fill-rule="evenodd" d="M9.965 11.026a5 5 0 1 1 1.06-1.06l2.755 2.754a.75.75 0 1 1-1.06 1.06l-2.755-2.754ZM10.5 7a3.5 3.5 0 1 1-7 0 3.5 3.5 0 0 1 7 0Z" clip-rule="evenodd"></path></svg><kbd class="[.os-macos_&amp;]:block hidden font-sans text-xs/4 text-neutral-500 dark:text-neutral-400">⌘K</kbd><kbd class="not-[.os-macos_&amp;]:block hidden font-sans text-xs/4 text-neutral-500 dark:text-neutral-400">Ctrl&nbsp;K</kbd>
474              </button>
475
476                <div data-controller="modal">
477  <button class="max-md:hidden text-sm/6 text-neutral-950 font-medium dark:text-white" data-action="click-&gt;modal#open:prevent">
478    Newsletter
479  </button>
480
481  <dialog class="modal max-w-[100vw-2rem] sm:max-w-md bg-transparent rounded-xl w-full lg:rounded-2xl z-50 border border-black/10 dark:border-white/10 bg-white dark:bg-neutral-800 small-scrollbar focus-visible:outline-neutral-600 dark:focus-visible:outline-neutral-200" data-modal-target="dialog" data-action="mousedown-&gt;modal#backdropClose">
482    <div class="sm:max-w-3xl row-start-2 w-full rounded-xl lg:rou
482nded-2xl bg-white p-6 dark:bg-neutral-800 forced-colors:outline">
483      <button type="button" data-action="modal#close:prevent" class="z-10 p-1.5 absolute right-4 top-5 rounded-full opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-hidden hover:bg-neutral-500/15 active:bg-neutral-500/25 disabled:pointer-events-none">
484        <svg xmlns="http://www.w3.org/2000/svg" class="size-4" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="18" x2="6" y1="6" y2="18"></line><line x1="6" x2="18" y1="6" y2="18"></line></svg>
485        <span class="sr-only">Close</span>
486      </button>
487
488      <div class="relative mt-8 mb-6">
489  <div class="mx-auto">
490    <div class="text-center max-w-sm mx-auto border bg-white border-black/10 dark:border-white/10 px-8 pt-8 pb-10 rounded-xl dark:bg-neutral-900">
491      <div data-controller="newsletter"
492           class="max-w-xs">
493        <div data-newsletter-target="form">
494          <form data-action="submit->newsletter#submit"
495                class="space-y-3">
496            <h2 class="text-lg sm:text-xl font-bold">Get notified when<br>new components come out</h2>
497            <input type="email"
498                  data-newsletter-target="email"
499                  placeholder="Enter your email..."
500                  class="form-control"
501                  autofocus
502                  required>
503            <div class="flex justify-center">
504              <div data-controller="turnstile" data-sitekey="0x4AAAAAAB8VraQb1T-uEO28" data-theme="auto" data-size="invisible" data-execution="execute" data-appearance="interaction-only"></div>
505            </div>
506            <button type="submit"
507                    data-newsletter-target="submitButton"
508                    class="w-full flex items-center justify-center gap-1.5 rounded-lg border border-neutral-400/30 bg-neutral-800 px-3.5 py-2.5 text-sm font-medium whitespace-nowrap text-white shadow-sm transition-all duration-100 ease-in-out select-none hover:bg-neutral-700 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-600 disabled:cursor-not-allowed disabled:opacity-50 dark:bg-white dark:text-neutral-800 dark:hover:bg-neutral-100 dark:focus-visible:outline-neutral-200">
509              Subscribe to the newsletter
510            </button>
511          </form>
512          <div class="absolute -mt-6 top-0 inset-x-0 bg-white dark:bg-neutral-800 flex justify-center mx-auto p-2 size-12 items-center border-black/10 dark:border-white/10 border-2 rounded-full animate-[wiggle_1s_ease-in-out_infinite]">
513            <img class="size-6" alt="Bell icon" src="/assets/bell-3c48d7f64c80b5bf8b4f5c3c1848855d5ee9850fa1b98a543ca20a0ab1249a3d.webp" />
514          </div>
515        </div>
516
517        <div data-newsletter-target="successMessage"
518             class="text-center py-4"
519             style="display: none;">
520          <div class="inline-flex items-center justify-center w-12 h-12 mx-auto mb-2.5 rounded-full bg-green-100 dark:bg-green-900/50">
521            <svg class="size-6 text-green-600 dark:text-green-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
522              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
523            </svg>
524          </div>
525          <h3 class="text-lg font-semibold text-neutral-900 dark:text-white mb-1">Thanks for subscribing!</h3>
526          <p class="text-sm text-neutral-600 dark:text-neutral-300">We'll notify you when new components are released.</p>
527        </div>
528      </div>
529    </div>
530  </div>
531</div>
532
533
534      <div class="mt-4 flex justify-center">
535        <a href="https://railsblocks.featurebase.app/roadmap" target="_blank" class="flex items-center justify-center gap-1.5 rounded-lg border border-black/10 bg-white/90 px-3.5 py-2 text-sm font-medium whitespace-nowrap text-neutral-800 shadow-xs transition-all duration-100 ease-in-out select-none hover:bg-neutral-50 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-600 disabled:cursor-not-allowed disabled:opacity-50 dark:border-white/10 dark:bg-neutral-700/50 dark:text-neutral-50 dark:hover:bg-neutral-700/75 dark:focus-visible:outline-neutral-200">
536          <svg xmlns="http://www.w3.org/2000/svg" class="size-4" width="18" height="18" viewBox="0 0 18 18"><g fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" stroke="currentColor"><line x1="6.25" y1="2.792" x2="6.25" y2="13.292"></line><line x1="11.75" y1="4.708" x2="11.75" y2="15.208"></line><path d="M2.533,3.576l3.432-.763c.186-.041,.38-.029,.559,.036l4.952,1.801c.179,.065,.373,.078,.559,.036l2.998-.666c.625-.139,1.217,.336,1.217,.976V13.448c0,.469-.326,.875-.783,.976l-3.432,.763c-.186,.041-.38,.029-.559-.036l-4.952-1.801c-.179-.065-.373-.078-.559-.036l-2.998,.666c-.625,.139-1.217-.336-1.217-.976V4.552c0-.469,.326-.875,.783-.976Z"></path></g></svg>
537          Component roadmap
538        </a>
539      </div>
540
541      <div class="mt-4 flex justify-center">
542        <a href="https://railsblocks.com/changelog" target="_blank" class="flex items-center justify-center gap-1.5 rounded-lg border border-black/10 bg-white/90 px-3.5 py-2 text-sm font-medium whitespace-nowrap text-neutral-800 shadow-xs transition-all duration-100 ease-in-out select-none hover:bg-neutral-50 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-600 disabled:cursor-not-allowed disabled:opacity-50 dark:border-white/10 dark:bg-neutral-700/50 dark:text-neutral-50 dark:hover:bg-neutral-700/75 dark:focus-visible:outline-neutral-200">
543          <svg xmlns="http://www.w3.org/2000/svg" class="size-4" width="18" height="18" viewBox="0 0 18 18"><g fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" stroke="currentColor"><path d="M3.75 1.75V7.25"></path> <path d="M3.75 16.25V10.75"></path> <path d="M14.25 2.75H8.75C8.198 2.75 7.75 3.2 7.75 3.75V6.25C7.75 6.8 8.198 7.25 8.75 7.25H14.25C14.802 7.25 15.25 6.8 15.25 6.25V3.75C15.25 3.2 14.802 2.75 14.25 2.75Z"></path> <path d="M3.75 10.75C4.716 10.75 5.5 9.97 5.5 9C5.5 8.03 4.716 7.25 3.75 7.25C2.784 7.25 2 8.03 2 9C2 9.97 2.784 10.75 3.75 10.75Z"></path> <path d="M14.25 10.75H8.75C8.198 10.75 7.75 11.2 7.75 11.75V14.25C7.75 14.8 8.198 15.25 8.75 15.25H14.25C14.802 15.25 15.25 14.8 15.25 14.25V11.75C15.25 11.2 14.802 10.75 14.25 10.75Z"></path></g></svg>
544          Changelog
545        </a>
546      </div>
547    </div>
548  </dialog>
549</div>
550
551
552              <a class="max-md:hidden text-sm/6 text-neutral-950 font-medium dark:text-white" href="/docs/installation">Installation</a>
553                <a class="max-md:hidden text-sm/6 text-neutral-950 font-medium dark:text-white" href="/themes">Themes</a>
554              <a class="max-md:hidden text-sm/6 text-neutral-950 font-medium dark:text-white" href="/docs/cli">CLI</a>
555              <a class="max-md:hidden text-sm/6 text-neutral-950 font-medium dark:text-white" href="/docs/mcp">MCP</a>
556
557                <div class="rainbow-button hover:opacity-80 transition-opacity duration-100 ease-in-out" data-controller="rainbow-button" data-rainbow-button-speed-value="2.5" data-rainbow-button-intensity-value="0.7">
558                  <a href="/pro" class="group relative text-red-900 dark:text-red-100 flex items-center justify-center gap-1.5 rounded-lg border border-neutral-200 bg-white/90 px-3.5 py-2 text-sm font-medium whitespace-nowrap shadow-xs transition-background transition-shadow duration-100 ease-in-out select-none hover:bg-neutral-50 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-600 disabled:cursor-not-allowed disabled:opacity-50 dark:border-neutral-700 dark:bg-neutral-800/50 dark:hover:bg-neutral-700/50 dark:focus-visible:outline-neutral-200">
559                    <svg xmlns="http://www.w3.org/2000/svg" class="size-4" width="18" height="18" viewBox="0 0 18 18"><g fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" stroke="currentColor"><polyline points="14.983 5.53 9 9 3.017 5.53"></polyline><line x1="9" y1="15.938" x2="9" y2="9"></line><path d="M7.997,2.332L3.747,4.797c-.617,.358-.997,1.017-.997,1.73v4.946c0,.713,.38,1.372,.997,1.73l4.25,2.465c.621,.36,1.386,.3
5596,2.007,0l4.25-2.465c.617-.358,.997-1.017,.997-1.73V6.527c0-.713-.38-1.372-.997-1.73l-4.25-2.465c-.621-.36-1.386-.36-2.007,0Z"></path></g></svg>
560                    Pro
561                  </a>
562                </div>
563
564              <div class="hidden md:block border-r border-neutral-200 dark:border-neutral-700 h-6"></div>
565
566              <a class="hidden" aria-label="GitHub" href="https://github.com">
567                <svg viewBox="0 0 20 20" class="size-5 fill-black/40 dark:fill-neutral-400 hover:opacity-75"><path d="M10 0C4.475 0 0 4.475 0 10a9.994 9.994 0 006.838 9.488c.5.087.687-.213.687-.476 0-.237-.013-1.024-.013-1.862-2.512.463-3.162-.612-3.362-1.175-.113-.287-.6-1.175-1.025-1.412-.35-.188-.85-.65-.013-.663.788-.013 1.35.725 1.538 1.025.9 1.512 2.337 1.087 2.912.825.088-.65.35-1.088.638-1.338-2.225-.25-4.55-1.112-4.55-4.937 0-1.088.387-1.987 1.025-2.688-.1-.25-.45-1.274.1-2.65 0 0 .837-.262 2.75 1.026a9.28 9.28 0 012.5-.338c.85 0 1.7.112 2.5.337 1.912-1.3 2.75-1.024 2.75-1.024.55 1.375.2 2.4.1 2.65.637.7 1.025 1.587 1.025 2.687 0 3.838-2.337 4.688-4.562 4.938.362.312.675.912.675 1.85 0 1.337-.013 2.412-.013 2.75 0 .262.188.574.688.474A10.016 10.016 0 0020 10c0-5.525-4.475-10-10-10z"></path></svg>
568              </a>
569                <div class="flex items-center gap-2 max-md:hidden">
570                  <a href="/login" class="flex items-center justify-center gap-1.5 rounded-lg border border-black/10 bg-white/90 px-3.5 py-2 text-sm font-medium whitespace-nowrap text-neutral-800 shadow-xs transition-all duration-100 ease-in-out select-none hover:bg-neutral-50 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-600 disabled:cursor-not-allowed disabled:opacity-50 dark:border-white/10 dark:bg-neutral-700/50 dark:text-neutral-50 dark:hover:bg-neutral-700/75 dark:focus-visible:outline-neutral-200">Login</a>
571                  <a href="/signup" class="flex items-center justify-center gap-1.5 rounded-lg border border-neutral-400/30 bg-neutral-800 px-3.5 py-2 text-sm font-medium whitespace-nowrap text-white shadow-sm transition-all duration-100 ease-in-out select-none hover:bg-neutral-700 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-600 disabled:cursor-not-allowed disabled:opacity-50 dark:bg-white dark:text-neutral-800 dark:hover:bg-neutral-100 dark:focus-visible:outline-neutral-200">Signup</a>
572                </div>
573            </div>
574            <div class="flex items-center gap-2.5 md:hidden">
575              <button type="button" aria-label="Search" class="hidden flex items-center justify-center gap-1.5 rounded-lg border border-black/10 bg-white/90 p-2.5 text-xs font-medium whitespace-nowrap text-neutral-800 shadow-xs transition-all duration-100 ease-in-out select-none hover:bg-neutral-50 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-600 disabled:cursor-not-allowed disabled:opacity-50 dark:border-white/10 dark:bg-neutral-700/50 dark:text-neutral-50 dark:hover:bg-neutral-700/75 dark:focus-visible:outline-neutral-200">
576                <svg viewBox="0 0 16 16" fill="currentColor" class="size-4"><path fill-rule="evenodd" d="M9.965 11.026a5 5 0 1 1 1.06-1.06l2.755 2.754a.75.75 0 1 1-1.06 1.06l-2.755-2.754ZM10.5 7a3.5 3.5 0 1 1-7 0 3.5 3.5 0 0 1 7 0Z" clip-rule="evenodd"></path></svg>
577              </button>
578              <div class="relative" data-controller="dropdown-popover" data-dropdown-popover-flip-class="translate-y-full" data-dropdown-popover-menubar-value="true" data-dropdown-popover-portal-value="false" data-dropdown-popover-placement-value="bottom-end top-end">
579                <button type="button" data-dropdown-popover-target="button" data-action="dropdown-popover#toggle" class="outline-hidden flex items-center justify-center gap-1.5 rounded-lg border border-black/10 bg-white/90 p-2.5 text-xs font-medium whitespace-nowrap text-neutral-800 shadow-xs transition-all duration-100 ease-in-out select-none hover:bg-neutral-50 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-600 disabled:cursor-not-allowed disabled:opacity-50 dark:border-white/10 dark:bg-neutral-700/50 dark:text-neutral-50 dark:hover:bg-neutral-700/75 dark:focus-visible:outline-neutral-200" aria-label="Navigation">
580                  <svg viewBox="0 0 16 16" fill="currentColor" class="size-4"><path d="M8 2a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3ZM8 6.5a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3ZM9.5 12.5a1.5 1.5 0 1 0-3 0 1.5 1.5 0 0 0 3 0Z"></path></svg>
581                </button>
582
583                <dialog
584                  class="outline-hidden absolute top-full z-10 mt-1 w-48 rounded-lg border border-neutral-200 bg-white text-neutral-900 shadow-md transition-opacity ease-out duration-150 opacity-0 dark:bg-neutral-800 dark:text-neutral-100 dar
584k:border-neutral-700/50"
585                  data-controller="menu"
586                  data-dropdown-popover-target="menu"
587                  data-action="click@document->dropdown-popover#closeOnClickOutside
588                              keydown.up->menu#prev keydown.down->menu#next
589                              keydown.up->menu#preventScroll keydown.down->menu#preventScroll"
590                >
591                  <div class="flex flex-col p-1" role="menu">
592                    <a href="/" class="text-left text-sm flex items-center gap-2 px-2 py-1.5 rounded-md text-neutral-700 focus:bg-neutral-100 focus:outline-hidden dark:text-neutral-100 dark:focus:bg-neutral-700/50 disabled:opacity-50 disabled:cursor-not-allowed" data-menu-target="item" role="menuitem">
593                      <span class="text-xs text-neutral-500 dark:text-neutral-400"><svg xmlns="http://www.w3.org/2000/svg" class="size-3.5 sm:size-4" width="18" height="18" viewBox="0 0 18 18"><g fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" stroke="currentColor"><path d="M14.855 5.95L9.605 1.96C9.247 1.688 8.752 1.688 8.395 1.96L3.145 5.95C2.896 6.139 2.75 6.434 2.75 6.747V14.251C2.75 15.356 3.645 16.251 4.75 16.251H7.25V12.251C7.25 11.699 7.698 11.251 8.25 11.251H9.75C10.302 11.251 10.75 11.699 10.75 12.251V16.251H13.25C14.355 16.251 15.25 15.356 15.25 14.251V6.746C15.25 6.433 15.104 6.14 14.855 5.95Z"></path></g></svg></span>
594                      Home
595                    </a>
596                    <a href="/docs/installation" class="md:hidden text-left text-sm flex items-center gap-2 px-2 py-1.5 rounded-md text-neutral-700 focus:bg-neutral-100 focus:outline-hidden dark:text-neutral-100 dark:focus:bg-neutral-700/50 disabled:opacity-50 disabled:cursor-not-allowed" data-menu-target="item" role="menuitem">
597                      <span class="text-xs text-neutral-500 dark:text-neutral-400"><svg xmlns="http://www.w3.org/2000/svg" class="size-3.5 sm:size-4" width="18" height="18" viewBox="0 0 18 18"><g fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" stroke="currentColor"><path d="M5.75 15.75C6.508 15.511 7.628 15.25 9 15.25C9.795 15.25 10.941 15.338 12.25 15.75"></path> <path d="M9 12.75V15.25"></path> <path d="M11.5 7.25L9 9.75L6.5 7.25"></path> <path d="M6 2.75H3.75C2.6454 2.75 1.75 3.645 1.75 4.75V10.75C1.75 11.855 2.6454 12.75 3.75 12.75H14.25C15.3546 12.75 16.25 11.855 16.25 10.75V4.75C16.25 3.645 15.3546 2.75 14.25 2.75H12"></path> <path d="M9 9.75V2.75"></path></g></svg></span>
598                      Installation
599                    </a>
600                      <a class="md:hidden text-left text-sm flex items-center gap-2 px-2 py-1.5 rounded-md text-neutral-700 focus:bg-neutral-100 focus:outline-hidden dark:text-neutral-100 dark:focus:bg-neutral-700/50" data-menu-target="item" role="menuitem" href="/themes">
601                        <span class="text-xs text-neutral-500 dark:text-neutral-400">
602                          <svg xmlns="http://www.w3.org/2000/svg" class="size-3.5 sm:size-4" width="18" height="18" viewBox="0 0 18 18"><g fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" stroke="currentColor"><path d="m8.3034,16.217c-3.7776-.3601-6.7098-3.619-6.5469-7.5271.157-3.7659,3.3501-6.8755,7.1188-6.9388,4.0612-.0683,7.3747,3.2034,7.3747,7.2489h0c0,1.5188-1.2312,2.75-2.75,2.75h-2.963c-1.0336,0-1.6928,1.1036-1.2027,2.0137l.2374.4409c.2597.4823.2062,1.0732-.1361,1.501h0c-.2736.342-.6962.553-1.1322.5115Z"></path><circle cx="9" cy="5" r="1" fill="currentColor" stroke-width="0"></circle><circle cx="6.1716" cy="6.1716" r="1" fill="currentColor" stroke-width="0"></circle><circle cx="11.8284" cy="6.1716" r="1" fill="currentColor" stroke-width="0"></circle><circle cx="5" cy="9" r="1" fill="currentColor" stroke-width="0"></circle></g></svg>
603                        </span>
604                        Themes
605</a>                    <a href="/docs/cli" class="md:hidden text-left text-sm flex items-center gap-2 px-2 py-1.5 rounded-md text-neutral-700 focus:bg-neutral-100 focus:outline-hidden dark:text-neutral-100 dar
605k:focus:bg-neutral-700/50 disabled:opacity-50 disabled:cursor-not-allowed" data-menu-target="item" role="menuitem">
606                      <span class="text-xs text-neutral-500 dark:text-neutral-400"><svg xmlns="http://www.w3.org/2000/svg" class="size-3.5 sm:size-4" width="18" height="18" viewBox="0 0 18 18"><g fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" stroke="currentColor"><rect x="2.75" y="2.75" width="12.5" height="12.5" rx="2" ry="2"></rect><line x1="9.75" y1="12.25" x2="12.25" y2="12.25"></line><polyline points="5.75 12.25 8.25 9.75 5.75 7.25"></polyline></g></svg></span>
607                      CLI
608                    </a>
609                    <a href="/docs/mcp" class="md:hidden text-left text-sm flex items-center gap-2 px-2 py-1.5 rounded-md text-neutral-700 focus:bg-neutral-100 focus:outline-hidden dark:text-neutral-100 dark:focus:bg-neutral-700/50 disabled:opacity-50 disabled:cursor-not-allowed" data-menu-target="item" role="menuitem">
610                      <span class="text-xs text-neutral-500 dark:text-neutral-400"><svg xmlns="http://www.w3.org/2000/svg" class="size-3.5 sm:size-4" fill="currentColor" fill-rule="evenodd" height="18" style="flex:none;line-height:1" viewBox="0 0 24 24" width="1em"><title>ModelContextProtocol</title> <path d="M15.688 2.343a2.588 2.588 0 00-3.61 0l-9.626 9.44a.863.863 0 01-1.203 0 .823.823 0 010-1.18l9.626-9.44a4.313 4.313 0 016.016 0 4.116 4.116 0 011.204 3.54 4.3 4.3 0 013.609 1.18l.05.05a4.115 4.115 0 010 5.9l-8.706 8.537a.274.274 0 000 .393l1.788 1.754a.823.823 0 010 1.18.863.863 0 01-1.203 0l-1.788-1.753a1.92 1.92 0 010-2.754l8.706-8.538a2.47 2.47 0 000-3.54l-.05-.049a2.588 2.588 0 00-3.607-.003l-7.172 7.034-.002.002-.098.097a.863.863 0 01-1.204 0 .823.823 0 010-1.18l7.273-7.133a2.47 2.47 0 00-.003-3.537z"></path> <path d="M14.485 4.703a.823.823 0 000-1.18.863.863 0 00-1.204 0l-7.119 6.982a4.115 4.115 0 000 5.9 4.314 4.314 0 006.016 0l7.12-6.982a.823.823 0 000-1.18.863.863 0 00-1.204 0l-7.119 6.982a2.588 2.588 0 01-3.61 0 2.47 2.47 0 010-3.54l7.12-6.982z"></path></svg></span>
611                      MCP
612                    </a>
613                    <a href="/docs/authors-note" class="text-left text-sm flex items-center gap-2 px-2 py-1.5 rounded-md text-neutral-700 focus:bg-neutral-100 focus:outline-hidden dark:text-neutral-100 dark:focus:bg-neutral-700/50 disabled:opacity-50 disabled:cursor-not-allowed" data-menu-target="item" role="menuitem">
614                      <span class="text-xs text-neutral-500 dark:text-neutral-400"><svg xmlns="http://www.w3.org/2000/svg" class="size-3.5 sm:size-4" width="18" height="18" viewBox="0 0 18 18"><g fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" stroke="currentColor"><path d="M10 9.54501L5.07001 14.475"></path> <path d="M1.86329 13.6331C1.06149 12.8389 0.825792 12.1376 0.776992 11.604C0.602992 9.68 2.75199 8.65301 2.73799 6.50601C2.72899 5.12901 1.83399 4.01499 1.10399 3.30399"></path> <path d="M15.241 8.05701L13.649 12.553C13.532 12.883 13.252 13.128 12.909 13.198L5.75203 14.679C5.22403 14.788 4.75603 14.321 4.86603 13.793L6.34703 6.63599C6.41803 6.29299 6.66303 6.013 6.99203 5.896L11.488 4.30399"></path> <path d="M11.496 2.29599L11.195 2.59698C10.804 2.98798 10.804 3.62099 11.195 4.01099L13.364 6.17999L15.533 8.349C15.924 8.74 16.557 8.74 16.947 8.349L17.248 8.048"></path> <path d="M10 10.295C10.4142 10.295 10.75 9.95901 10.75 9.54501C10.75 9.13101 10.4142 8.79501 10 8.79501C9.5858 8.79501 9.25 9.13101 9.25 9.54501C9.25 9.95901 9.5858 10.295 10 10.295Z" fill="currentColor"></path></g></svg></span>
615                      Author's note
616                    </a>
617                      <div class="border-t my-1 border-neutral-100 dark:border-neutral-700"></div>
618                      <a data-menu-target="item" role="menuitem" class="text-left text-sm flex items-center gap-2 px-2 py-1.5 rounded-md text-neutral-700 focus:bg-neutral-100 focus:outline-hidden dark:text-neutral-100 dark:focus:bg-neutral-700/50 disabled:opacity-50 disabled:cursor-not-allowed" href="/login">
619                        <span class="text-xs text-neutral-500 dark:text-neutral-400"><svg xmlns="http://www.w3.org/2000/svg" class="size-3.5 sm:size-4" width="18" height="18" viewBox="0 0 18 18"><g fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" stroke="currentColor"><path d="M9.75,2.75h3.5c1.105,0,2,.895,2,2V13.25c0,1.105-.895,2-2,2h-3.5"></path><polyline points="6.75 12.5 10.25 9 6.75 5.5"></polyline><line x1="10.25" y1="9" x2="2.75" y2="9"></line></g></svg></span>
620                        Login
621</a>                      <a data-menu-target="item" role="menuitem" class="text-left text-sm flex items-center gap-2 px-2 py-1.5 rounded-md text-neutral-700 focus:bg-neutral-100 focus:outline-hidden dark:text-neutral-100 dark:focus:bg-neutral-700/50 disabled:opacity-50 disabled:cursor-not-allowed" href="/signup">
622                        <span class="text-xs text-neutral-500 dark:text-neutral-400"><svg xmlns="http://www.w3.org/2000/svg" class="size-3.5 sm:size-4" width="18" height="18" viewBox="0 0 18 18"><g fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" stroke="currentColor"><path d="M9 7.2505C10.5188 7.2505 11.75 6.0195 11.75 4.5005C11.75 2.9815 10.5188 1.7505 9 1.7505C7.4812 1.7505 6.25 2.9815 6.25 4.5005C6.25 6.0195 7.4812 7.2505 9 7.2505Z"></path> <path d="M17.25 14.7505H12.25"></path> <path d="M14.75 12.2505V17.2505"></path> <path d="M12.2164 10.677C11.2752 10.102 10.1839 9.7505 8.99999 9.7505C6.44899 9.7505 4.26099 11.2805 3.29099 13.4705C2.92599 14.2955 3.37799 15.2444 4.23799 15.5154C5.46299 15.9014 7.08389 16.2495 8.99999 16.2495C9.22329 16.2495 9.43029 16.2319 9.64399 16.2214"></path></g></svg></span>
623                        Signup
624</a>                  </div>
625                </dialog>
626              </div>
627            </div>
628          </div>
629        </div>
630      </div>
631    </div>
632  </nav>
633</header>
634
635
636<!-- smooth scroll nav links -->
637<script type="text/javascript">
638  document.querySelectorAll('a[href^="#"]').forEach(anchor => {
639      anchor.addEventListener('click', function (e) {
640          e.preventDefault();
641
642          document.querySelector(this.getAttribute('href')).scrollIntoView({
643              behavior: 'smooth'
644          });
645      });
646  });
647</script>
647
648
649    <div class="fixed bottom-4 right-4 z-50" data-turbo-permanent id="theme-switcher">
650  <div
651    data-controller="theme"
652    data-theme-selected-class="bg-white ring-1 ring-neutral-950/10 dark:bg-neutral-700 dark:text-white dark:ring-white/20"
653    data-theme-unselected-class="hover:bg-neutral-950/5 dark:hover:bg-white/5">
654    <div class="opacity-0 transition-opacity duration-200 relative z-0 inline-grid p-0.5 grid-cols-3 rounded-full bg-white/80 backdrop-blur-md text-neutral-950 border border-black/10 dark:border-white/10 dark:bg-neutral-800/80 dark:text-white shadow-xs" data-theme-target="picker" role="radiogroup" aria-label="Theme selection">
655      <button
656        class="rounded-full flex items-center justify-center p-2 m-0.5 outline-hidden focus-visible:ring-2 focus-visible:ring-neutral-950/20 dark:focus-visible:ring-white/20"
657        aria-label="System theme"
658        data-controller="tooltip"
659        data-tooltip-content="System"
660        data-tooltip-animation-value="fade origin"
661        data-tooltip-delay-value="500"
662        data-theme-target="option"
663        data-action="click->theme#choose keydown->theme#navigate"
664        data-theme-mode="system"
665        type="button"
666        role="radio"
667        aria-checked="true"
668        tabindex="0"
669        id="theme-option-system">
670        <svg xmlns="http://www.w3.org/2000/svg" class="size-3.5" width="18" height="18" viewBox="0 0 18 18" aria-hidden="true"><g fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" stroke="currentColor"><path d="M5.75 15.75C6.508 15.511 7.628 15.25 9 15.25C9.795 15.25 10.941 15.338 12.25 15.75"></path> <path d="M9 12.75V15.25"></path> <path d="M14.25 2.75H3.75C2.64543 2.75 1.75 3.64543 1.75 4.75V10.75C1.75 11.8546 2.64543 12.75 3.75 12.75H14.25C15.3546 12.75 16.25 11.8546 16.25 10.75V4.75C16.25 3.64543 15.3546 2.75 14.25 2.75Z"></path></g></svg>
671      </button>
672      <button
673        class="rounded-full flex items-center justify-center p-2 m-0.5 outline-hidden focus-visible:ring-2 focus-visible:ring-neutral-950/20 dark:focus-visible:ring-white/20"
674        aria-label="Light theme"
675        data-controller="tooltip"
676        data-tooltip-content="Light mode"
677        data-tooltip-animation-value="fade origin"
678        data-tooltip-delay-value="500"
679        data-theme-target="option"
680        data-action="click->theme#choose keydown->theme#navigate"
681        data-theme-mode="light"
682        type="button"
683        role="radio"
684        aria-checked="false"
685        tabindex="-1"
686        id="theme-option-light">
687        <svg xmlns="http://www.w3.org/2000/svg" class="size-3.5" width="18" height="18" viewBox="0 0 18 18" aria-hidden="true"><g fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" stroke="currentColor"><line x1="9" y1="1.25" x2="9" y2="2.25"></line><line x1="14.48" y1="3.52" x2="13.773" y2="4.227"></line><line x1="16.75" y1="9" x2="15.75" y2="9"></line><line x1="14.48" y1="14.48" x2="13.773" y2="13.773"></line><line x1="9" y1="16.75" x2="9" y2="15.75"></line><line x1="3.52" y1="14.48" x2="4.227" y2="13.773"></line><line x1="1.25" y1="9" x2="2.25" y2="9"></line><line x1="3.52" y1="3.52" x2="4.227" y2="4.227"></line><circle cx="9" cy="9" r="4.25"></circle></g></svg>
688      </button>
689      <button
690        class="rounded-full flex items-center justify-center p-2 m-0.5 outline-hidden focus-visible:ring-2 focus-visible:ring-neutral-950/20 dark:focus-visible:ring-white/20"
691        aria-label="Dark theme"
692        data-controller="tooltip"
693        data-tooltip-content="Dark mode"
694        data-tooltip-animation-value="fade origin"
695        data-tooltip-delay-value="500"
696        data-theme-target="option"
697        data-action="click->theme#choose keydown->theme#navigate"
698        data-theme-mode="dark"
699        type="button"
700        role="radio"
701        aria-checked="false"
702        tabindex="-1"
703        id="theme-option-dark">
704        <svg xmlns="http://www.w3.org/2000/svg" class="size-3.5" width="18" height="18" viewBox="0 0 18 18" aria-hidden="true"><g fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" stroke="currentColor"><path d="M13,11.75c-3.452,0-6.25-2.798-6.25-6.25,0-1.352,.433-2.599,1.162-3.622-3.364,.628-5.912,3.575-5.912,7.122,0,4.004,3.246,7.25,7.25,7.25,3.372,0,6.198-2.306,7.009-5.424-.95,.583-2.063,.924-3.259,.924Z"></path><path d="M12.743,4.492l-.946-.315-.316-.947c-.102-.306-.609-.306-.711,0l-.316,.947-.946,.315c-.153,.051-.257,.194-.257,.356s.
704104,.305,.257,.356l.946,.315,.316,.947c.051,.153,.194,.256,.355,.256s.305-.104,.355-.256l.316-.947,.946-.315c.153-.051,.257-.194,.257-.356s-.104-.305-.257-.356Z" fill="currentColor" data-stroke="none" stroke="none"></path><circle cx="14.25" cy="7.75" r=".75" fill="currentColor" data-stroke="none" stroke="none"></circle></g></svg>
705      </button>
706    </div>
707  </div>
708</div>
709
710
711    <main class="mx-auto ">
712      
713      <div data-controller="toast"
714     id="toast_triggers"
715     data-toast-position-value="top-center"
716     data-toast-layout-value="default"> 
717  <ul
718    data-toast-target="container"
719    data-action="mouseenter->toast#handleMouseEnter mouseleave->toast#handleMouseLeave"
720    class="fixed block w-full group z-[99] max-w-[300px] sm:max-w-xs left-1/2 -translate-x-1/2 top-0 overflow-visible"
721    style="transition: height 300ms ease;"
722  >
723  </ul>
724</div>
725
726      
727
728
729
730      
731      <div class="isolate" data-controller="scroll-preservation">
732  <div>
733    <div class="grid min-h-dvh grid-cols-1 -mt-2 grid-rows-[1fr_1px_auto_1px_auto] lg:grid-cols-[var(--container-2xs)_2.5rem_minmax(0,1fr)_2.5rem] xl:grid-cols-[var(--container-2xs)_2.5rem_minmax(0,1fr)_2.5rem]">
734      <div class="relative col-start-1 row-span-full row-start-1 max-lg:hidden">
735        <div class="absolute inset-0">
736          <div id="docs-sidebar" class="small-scrollbar sticky top-14.25 bottom-0 left-0 h-full max-h-[calc(100dvh-(var(--spacing)*14.25))] overflow-y-auto px-6 pr-2" data-preserve-scroll>
737            <div class="w-full -mx-6 h-6 z-10 pointer-events-none sticky top-0 inset-x-0 bg-gradient-to-b from-[#FCFBF9] dark:from-[#111111] to-transparent"></div>
738            <div>
739              <nav class="flex flex-col gap-8">
740                <div class="flex flex-col gap-3" data-autoscroll="true">
741                  <p class="flex items-center gap-1.5 uppercase text-sm/6 text-neutral-500 sm:text-xs/6 dark:text-neutral-400">
742                    <svg xmlns="http://www.w3.org/2000/svg" class="size-4" width="18" height="18" viewBox="0 0 18 18"><g fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" stroke="currentColor"><path d="m9,15.051c.17,0,.339-.045.494-.134.643-.371,1.732-.847,3.141-.845.899.001,1.667.197,2.27.435.648.255,1.344-.24,1.344-.937V4.487c0-.354-.181-.68-.486-.86-.637-.376-1.726-.863-3.14-.863-1.89,0-3.198.872-3.624,1.182"></path><path d="m13.9962,6.9204c-.4133-.0954-.8729-.1564-1.3732-.1564s-.9599.0611-1.3731.1567"></path><path d="m13.9962,10.4204c-.4133-.0954-.8729-.1564-1.3732-.1564s-.9599.0611-1.3731.1567"></path><path d="m9,15.051c-.17,0-.339-.045-.494-.134-.643-.371-1.732-.847-3.141-.845-.899.001-1.667.197-2.27.435-.648.255-1.344-.237-1.344-.933V4.484c0-.354.181-.676.486-.856.637-.376,1.726-.863,3.14-.863,1.89,0,3.198.872,3.624,1.182h0v11.104h-.001Z"></path></g></svg>
743                    Getting started
744                  </p>
745                  <ul class="flex flex-col gap-2 border-l border-[color-mix(in_oklab,_var(--color-neutral-950),white_90%)] dark:border-[color-mix(in_oklab,_var(--color-neutral-950),white_20%)]">
746                    <li class="-ml-px flex items-start gap-2"><a class="inline-block border-l border-transparent pl-5 text-base/8 text-neutral-600 hover:border-neutral-950/25 hover:text-neutral-950 aria-[current]:border-neutral-950 aria-[current]:text-neutral-950 sm:pl-4 sm:text-sm/6 dark:text-neutral-300 dark:hover:border-white/25 dark:hover:text-white dark:aria-[current]:border-white dark:aria-[current]:text-white" type="button" href="/docs/installation" aria-current=&#39;page&#39;>Installation</a></li>
747                    <li class="-ml-px flex items-start gap-2"><a class="inline-block border-l border-transparent pl-5 text-base/8 text-neutral-600 hover:border-neutral-950/25 hover:text-neutral-950 aria-[current]:border-neutral-950 aria-[current]:text-neutral-950 sm:pl-4 sm:text-sm/6 dark:text-neutral-300 dark:hover:border-white/25 dark:hover:text-white dark:aria-[current]:border-white dark:aria-[current]:text-white" type="button" href="/docs/view-components" >View Components</a></li>
748                    <li class="-ml-px flex items-start gap-2"><a class="inline-block border-l border-transparent pl-5 text-base/8 text-neutral-600 hover:border-neutral-950/25 hover:text-neutral-950 aria-[current]:border-neutral-950 aria-[current]:text-neutral-950 sm:pl-4 sm:text-sm/6 dark:text-neutral-300 dark:hover:border-white/25 dark:hover:text-white dark:aria-[current]:border-white dark:aria-[current]:text-white" type="button" href="/docs/shared-partials" >Shared Partials</a></li>
749                    <li class="-ml-px flex items-start gap-2"><a class="inline-block border-l border-transparent pl-5 text-base/8 text-neutral-600 hover:border-neutral-950/25 hover:text-neutral-950 aria-[current]:border-neutral-950 aria-[current]:text-neutral-950 sm:pl-4 sm:text-sm/6 dark:text-neutral-300 dark:hover:border-white/25 dark:hover:text-white dark:aria-[current]:border-white dark:aria-[current]:text-white" type="button" href="/docs/cli" >CLI</a></li>
750                    <li class="-ml-px flex items-start gap-2"><a class="inline-block border-l border-transparent pl-5 text-base/8 text-neutral-600 hover:border-neutral-950/25 hover:text-neutral-950 aria-[current]:border-neutral-950 aria-[current]:text-neutral-950 sm:pl-4 sm:text-sm/6 dark:text-neutral-300 dark:hover:border-white/25 dark:hover:text-white dark:aria-[current]:border-white dark:aria-[current]:text-white" type="button" href="/docs/mcp" >MCP</a></li>
751                    <li class="-ml-px flex items-start gap-2"><a class="inline-block border-l border-transparent pl-5 text-base/8 text-neutral-600 hover:border-neutral-950/25 hover:text-neutral-950 aria-[current]:border-neutral-950 aria-[current]:text-neutral-950 sm:pl-4 sm:text-sm/6 dark:text-neutral-300 dark:hover:border-white/25 dark:hover:text-white dark:aria-[current]:border-white dark:aria-[current]:text-white" type="button" href="/docs/authors-note" >Author's note</a></li>
752                  </ul>
753                </div>
754                <div class="flex flex-col gap-3" data-autoscroll="true">
755                  <p class="flex items-center gap-1.5 uppercase text-sm/6 text-neutral-500 sm:text-xs/6 dark:text-neutral-400">
756                    <svg xmlns="http://www.w3.org/2000/svg" class="size-4" width="18" height="18" viewBox="0 0 18 18"><g fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" stroke="currentColor"><polyline points="14.983 5.53 9 9 3.017 5.53"></polyline><line x1="9" y1="15.938" x2="9" y2="9"></line><path d="M7.997,2.332L3.747,4.797c-.617,.358-.997,1.017-.997,1.73v4.946c0,.713,.38,1.372,.997,1.73l4.25,2.465c.621,.36,1.386,.3
7566,2.007,0l4.25-2.465c.617-.358,.997-1.017,.997-1.73V6.527c0-.713-.38-1.372-.997-1.73l-4.25-2.465c-.621-.36-1.386-.36-2.007,0Z"></path></g></svg>
757                    Components
758                  </p>
759                  <ul class="flex flex-col gap-2 border-l border-[color-mix(in_oklab,_var(--color-neutral-950),white_90%)] dark:border-[color-mix(in_oklab,_var(--color-neutral-950),white_20%)]">
760                    <li class="-ml-px flex items-start gap-2"><a class="inline-block border-l border-transparent pl-5 text-base/8 text-neutral-600 hover:border-neutral-950/25 hover:text-neutral-950 aria-[current]:border-neutral-950 aria-[current]:text-neutral-950 sm:pl-4 sm:text-sm/6 dark:text-neutral-300 dark:hover:border-white/25 dark:hover:text-white dark:aria-[current]:border-white dark:aria-[current]:text-white" href="/docs/accordion"  >Accordion</a></li>
761                    <li class="-ml-px flex items-start gap-2"><a class="inline-block border-l border-transparent pl-5 text-base/8 text-neutral-600 hover:border-neutral-950/25 hover:text-neutral-950 aria-[current]:border-neutral-950 aria-[current]:text-neutral-950 sm:pl-4 sm:text-sm/6 dark:text-neutral-300 dark:hover:border-white/25 dark:hover:text-white dark:aria-[current]:border-white dark:aria-[current]:text-white" href="/docs/alert"  >Alert</a></li>
762                    <li class="-ml-px flex items-start gap-2"><a class="inline-block border-l border-transparent pl-5 text-base/8 text-neutral-600 hover:border-neutral-950/25 hover:text-neutral-950 aria-[current]:border-neutral-950 aria-[current]:text-neutral-950 sm:pl-4 sm:text-sm/6 dark:text-neutral-300 dark:hover:border-white/25 dark:hover:text-white dark:aria-[current]:border-white dark:aria-[current]:text-white" href="/docs/animated-number"  >Animated Number</a></li>
763                    <li class="-ml-px flex items-start gap-2"><a class="inline-block border-l border-transparent pl-5 text-base/8 text-neutral-600 hover:border-neutral-950/25 hover:text-neutral-950 aria-[current]:border-neutral-950 aria-[current]:text-neutral-950 sm:pl-4 sm:text-sm/6 dark:text-neutral-300 dark:hover:border-white/25 dark:hover:text-white dark:aria-[current]:border-white dark:aria-[current]:text-white" href="/docs/autocomplete"  >Autocomplete</a>  <div class="inline relative">
764    <div class="rainbow-button hover:opacity-80 transition-opacity duration-100 ease-in-out" data-controller="rainbow-button" data-rainbow-button-speed-value="2.5" data-rainbow-button-intensity-value="0.7">
765      <a href="/pro" data-turbo-frame="_top" class="group relative text-red-900 dark:text-red-100 flex items-center justify-center gap-1 rounded-md border border-neutral-200 bg-white/90 px-1 py-0.5 text-xs font-medium whitespace-nowrap shadow-xs transition-background transition-shadow duration-100 ease-in-out select-none hover:bg-neutral-50 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-600 disabled:cursor-not-allowed disabled:opacity-50 dark:border-neutral-700 dark:bg-neutral-800/50 dark:hover:bg-neutral-700/50 dark:focus-visible:outline-neutral-200">
766        <svg xmlns="http://www.w3.org/2000/svg" class="size-3" width="18" height="18" viewBox="0 0 18 18"><g fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" stroke="currentColor"><polyline points="14.983 5.53 9 9 3.017 5.53"></polyline><line x1="9" y1="15.938" x2="9" y2="9"></line><path d="M7.997,2.332L3.747,4.797c-.617,.358-.997,1.017-.997,1.73v4.946c0,.713,.38,1.372,.997,1.73l4.25,2.465c.621,.36,1.386,.36,2.007,0l4.25-2.465c.617-.358,.997-1.017,.997-1.73V6.527c0-.713-.38-1.372-.997-1.73l-4.25-2.465c-.621-.36-1.386-.36-2.007,0Z"></path></g></svg>
767        Pro
768      </a>
769    </div>
770  </div>
771</li> 
772                    <li class="-ml-px flex items-start gap-2"><a class="inline-block border-l border-transparent pl-5 text-base/8 text-neutral-600 hover:border-neutral-950/25 hover:text-neutral-950 aria-[current]:border-neutral-950 aria-[current]:text-neutral-950 sm:pl-4 sm:text-sm/6 dark:text-neutral-300 dark:hover:border-white/25 dark:hover:text-white dark:aria-[current]:border-white dark:aria-[current]:text-white" href="/docs/autogrow"  >Autogrow</a></li>
773                    <li class="-ml-px flex items-start gap-2"><a class="inline-block border-l border-transparent pl-5 text-base/8 text-neutral-600 hover:border-neutral-950/25 hover:text-neutral-950 aria-[current]:border-neutral-950 aria-[current]:text-neutral-950 sm:pl-4 sm:text-sm/6 dark:text-neutral-300 dark:hover:border-white/25 dark:hover:text-white dark:aria-[current]:border-white dark:aria-[current]:text-white" href="/docs/avatar"  >
773Avatar</a><div class="inline relative">
774  <div class="transition-opacity duration-100 ease-in-out" data-controller="rainbow-button" data-rainbow-button-speed-value="2.5" data-rainbow-button-intensity-value="0.7">
775    <div class="group relative text-red-900 dark:text-red-100 flex items-center justify-center gap-1 rounded-md border border-neutral-200 bg-white/90 px-1 py-0.5 text-xs font-medium whitespace-nowrap shadow-xs transition-background transition-shadow duration-100 ease-in-out select-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-600 disabled:cursor-not-allowed disabled:opacity-50 dark:border-neutral-700 dark:bg-neutral-800/50 dark:focus-visible:outline-neutral-200">
776      <svg xmlns="http://www.w3.org/2000/svg" class="size-3" width="18" height="18" viewBox="0 0 18 18"><g fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" stroke="currentColor"><path d="M5.658,2.99l-1.263-.421-.421-1.263c-.137-.408-.812-.408-.949,0l-.421,1.263-1.263,.421c-.204,.068-.342,.259-.342,.474s.138,.406,.342,.474l1.263,.421,.421,1.263c.068,.204,.26,.342,.475,.342s.406-.138,.475-.342l.421-1.263,1.263-.421c.204-.068,.342-.259,.342-.474s-.138-.406-.342-.474Z" fill="currentColor" data-stroke="none" stroke="none"></path><polygon points="9.5 2.75 11.412 7.587 16.25 9.5 11.412 11.413 9.5 16.25 7.587 11.413 2.75 9.5 7.587 7.587 9.5 2.75"></polygon></g></svg>
777      New
778    </div>
779  </div>
780</div>
781</li>
782                    <li class="-ml-px flex items-start gap-2"><a class="inline-block border-l border-transparent pl-5 text-base/8 text-neutral-600 hover:border-neutral-950/25 hover:text-neutral-950 aria-[current]:border-neutral-950 aria-[current]:text-neutral-950 sm:pl-4 sm:text-sm/6 dark:text-neutral-300 dark:hover:border-white/25 dark:hover:text-white dark:aria-[current]:border-white dark:aria-[current]:text-white" href="/docs/badge"  >Badge</a></li>
783                    <li class="-ml-px flex items-start gap-2"><a class="inline-block border-l border-transparent pl-5 text-base/8 text-neutral-600 hover:border-neutral-950/25 hover:text-neutral-950 aria-[current]:border-neutral-950 aria-[current]:text-neutral-950 sm:pl-4 sm:text-sm/6 dark:text-neutral-300 dark:hover:border-white/25 dark:hover:text-white dark:aria-[current]:border-white dark:aria-[current]:text-white" href="/docs/banner"  >Banner</a></li>
784                    <li class="-ml-px flex items-start gap-2"><a class="inline-block border-l border-transparent pl-5 text-base/8 text-neutral-600 hover:border-neutral-950/25 hover:text-neutral-950 aria-[current]:border-neutral-950 aria-[current]:text-neutral-950 sm:pl-4 sm:text-sm/6 dark:text-neutral-300 dark:hover:border-white/25 dark:hover:text-white dark:aria-[current]:border-white dark:aria-[current]:text-white" href="/docs/breadcrumb"  >Breadcrumb</a></li>
785                    <li class="-ml-px flex items-start gap-2"><a class="inline-block border-l border-transparent pl-5 text-base/8 text-neutral-600 hover:border-neutral-950/25 hover:text-neutral-950 aria-[current]:border-neutral-950 aria-[current]:text-neutral-950 sm:pl-4 sm:text-sm/6 dark:text-neutral-300 dark:hover:border-white/25 dark:hover:text-white dark:aria-[current]:border-white dark:aria-[current]:text-white" href="/docs/buttons"  >Buttons</a></li>
786                    <li class="-ml-px flex items-start gap-2"><a class="inline-block border-l border-transparent pl-5 text-base/8 text-neutral-600 hover:border-neutral-950/25 hover:text-neutral-950 aria-[current]:border-neutral-950 aria-[current]:text-neutral-950 sm:pl-4 sm:text-sm/6 dark:text-neutral-300 dark:hover:border-white/25 dark:hover:text-white dark:aria-[current]:border-white dark:aria-[current]:text-white" href="/docs/card"  >Card</a></li>
787                    <li class="-ml-px flex items-start gap-2"><a class="inline-block border-l border-transparent pl-5 text-base/8 text-neutral-600 hover:border-neutral-950/25 hover:text-neutral-950 aria-[current]:border-neutral-950 aria-[current]:text-neutral-950 sm:pl-4 sm:text-sm/6 dark:text-neutral-300 dark:hover:border-white/25 dark:hover:text-white dark:aria-[current]:border-white dark:aria-[current]:text-white" href="/docs/carou
787sel"  >Carousel</a></li>
788                    <li class="-ml-px flex items-start gap-2"><a class="inline-block border-l border-transparent pl-5 text-base/8 text-neutral-600 hover:border-neutral-950/25 hover:text-neutral-950 aria-[current]:border-neutral-950 aria-[current]:text-neutral-950 sm:pl-4 sm:text-sm/6 dark:text-neutral-300 dark:hover:border-white/25 dark:hover:text-white dark:aria-[current]:border-white dark:aria-[current]:text-white" href="/docs/checkbox"  >Checkbox</a></li>
789                    <li class="-ml-px flex items-start gap-2"><a class="inline-block border-l border-transparent pl-5 text-base/8 text-neutral-600 hover:border-neutral-950/25 hover:text-neutral-950 aria-[current]:border-neutral-950 aria-[current]:text-neutral-950 sm:pl-4 sm:text-sm/6 dark:text-neutral-300 dark:hover:border-white/25 dark:hover:text-white dark:aria-[current]:border-white dark:aria-[current]:text-white" href="/docs/checkbox-select-all"  >Checkbox Select All</a></li>
790                    <li class="-ml-px flex items-start gap-2"><a class="inline-block border-l border-transparent pl-5 text-base/8 text-neutral-600 hover:border-neutral-950/25 hover:text-neutral-950 aria-[current]:border-neutral-950 aria-[current]:text-neutral-950 sm:pl-4 sm:text-sm/6 dark:text-neutral-300 dark:hover:border-white/25 dark:hover:text-white dark:aria-[current]:border-white dark:aria-[current]:text-white" href="/docs/clipboard"  >Clipboard</a></li>
791                    <li class="-ml-px flex items-start gap-2"><a class="inline-block border-l border-transparent pl-5 text-base/8 text-neutral-600 hover:border-neutral-950/25 hover:text-neutral-950 aria-[current]:border-neutral-950 aria-[current]:text-neutral-950 sm:pl-4 sm:text-sm/6 dark:text-neutral-300 dark:hover:border-white/25 dark:hover:text-white dark:aria-[current]:border-white dark:aria-[current]:text-white" href="/docs/collapsible"  >Collapsible</a></li>
792                    <li class="-ml-px flex items-start gap-2"><a class="inline-block border-l border-transparent pl-5 text-base/8 text-neutral-600 hover:border-neutral-950/25 hover:text-neutral-950 aria-[current]:border-neutral-950 aria-[current]:text-neutral-950 sm:pl-4 sm:text-sm/6 dark:text-neutral-300 dark:hover:border-white/25 dark:hover:text-white dark:aria-[current]:border-white dark:aria-[current]:text-white" href="/docs/color-picker"  >Color Picker</a></li>
793                    <li class="-ml-px flex items-start gap-2"><a class="inline-block border-l border-transparent pl-5 text-base/8 text-neutral-600 hover:border-neutral-950/25 hover:text-neutral-950 aria-[current]:border-neutral-950 aria-[current]:text-neutral-950 sm:pl-4 sm:text-sm/6 dark:text-neutral-300 dark:hover:border-white/25 dark:hover:text-white dark:aria-[current]:border-white dark:aria-[current]:text-white" href="/docs/combobox"  >Combobox (Multi-select)</a></li>
794                    <li class="-ml-px flex items-start gap-2"><a class="inline-block border-l border-transparent pl-5 text-base/8 text-neutral-600 hover:border-neutral-950/25 hover:text-neutral-950 aria-[current]:border-neutral-950 aria-[current]:text-neutral-950 sm:pl-4 sm:text-sm/6 dark:text-neutral-300 dark:hover:border-white/25 dark:hover:text-white dark:aria-[current]:border-white dark:aria-[current]:text-white" href="/docs/command-palette"  >Command Palette</a>  <div class="inline relative">
795    <div class="rainbow-button hover:opacity-80 transition-opacity duration-100 ease-in-out" data-controller="rainbow-button" data-rainbow-button-speed-value="2.5" data-rainbow-button-intensity-value="0.7">
796      <a href="/pro" data-turbo-frame="_top" class="group relative text-red-900 dark:text-red-100 flex items-center justify-center gap-1 rounded-md border border-neutral-200 bg-white/90 px-1 py-0.5 text-xs font-medium whitespace-nowrap shadow-xs transition-background transition-shadow duration-100 ease-in-out select-none hover:bg-neutral-50 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-600 disabled:cursor-not-allowed disabled:opacity-50 dark:border-neutral-700 dark:bg-neutral-800/50 dark:hover:bg-neutral-700/50 dark:focus-visible:outline-neutral-200">
797        <svg xmlns="http://www.w3.org/2000/svg" class="size-3" width="18" height="18" viewBox="0 0 18 18"><g fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" stroke="currentColor"><polyline points="14.983 5.53 9 9 3.017 5.53"></polyline><line x1="9" y1="15.938" x2="9" y2="9"></line><path d="M7.997,2.332L3.747,4.797c-.617,.358-.997,1.017-.997,1.73v4.946c0,.713,.38,1.372,.997,1.73l4.25,2.465c.621,.36,1.386,.3
7976,2.007,0l4.25-2.465c.617-.358,.997-1.017,.997-1.73V6.527c0-.713-.38-1.372-.997-1.73l-4.25-2.465c-.621-.36-1.386-.36-2.007,0Z"></path></g></svg>
798        Pro
799      </a>
800    </div>
801  </div>
802</li>
803                    <li class="-ml-px flex items-start gap-2"><a class="inline-block border-l border-transparent pl-5 text-base/8 text-neutral-600 hover:border-neutral-950/25 hover:text-neutral-950 aria-[current]:border-neutral-950 aria-[current]:text-neutral-950 sm:pl-4 sm:text-sm/6 dark:text-neutral-300 dark:hover:border-white/25 dark:hover:text-white dark:aria-[current]:border-white dark:aria-[current]:text-white" href="/docs/confirmation"  >Confirmation</a></li>
804                    <li class="-ml-px flex items-start gap-2"><a class="inline-block border-l border-transparent pl-5 text-base/8 text-neutral-600 hover:border-neutral-950/25 hover:text-neutral-950 aria-[current]:border-neutral-950 aria-[current]:text-neutral-950 sm:pl-4 sm:text-sm/6 dark:text-neutral-300 dark:hover:border-white/25 dark:hover:text-white dark:aria-[current]:border-white dark:aria-[current]:text-white" href="/docs/context-menu"  >Context Menu</a>  <div class="inline relative">
805    <div class="rainbow-button hover:opacity-80 transition-opacity duration-100 ease-in-out" data-controller="rainbow-button" data-rainbow-button-speed-value="2.5" data-rainbow-button-intensity-value="0.7">
806      <a href="/pro" data-turbo-frame="_top" class="group relative text-red-900 dark:text-red-100 flex items-center justify-center gap-1 rounded-md border border-neutral-200 bg-white/90 px-1 py-0.5 text-xs font-medium whitespace-nowrap shadow-xs transition-background transition-shadow duration-100 ease-in-out select-none hover:bg-neutral-50 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-600 disabled:cursor-not-allowed disabled:opacity-50 dark:border-neutral-700 dark:bg-neutral-800/50 dark:hover:bg-neutral-700/50 dark:focus-visible:outline-neutral-200">
807        <svg xmlns="http://www.w3.org/2000/svg" class="size-3" width="18" height="18" viewBox="0 0 18 18"><g fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" stroke="currentColor"><polyline points="14.983 5.53 9 9 3.017 5.53"></polyline><line x1="9" y1="15.938" x2="9" y2="9"></line><path d="M7.997,2.332L3.747,4.797c-.617,.358-.997,1.017-.997,1.73v4.946c0,.713,.38,1.372,.997,1.73l4.25,2.465c.621,.36,1.386,.36,2.007,0l4.25-2.465c.617-.358,.997-1.017,.997-1.73V6.527c0-.713-.38-1.372-.997-1.73l-4.25-2.465c-.621-.36-1.386-.36-2.007,0Z"></path></g></svg>
808        Pro
809      </a>
810    </div>
811  </div>
812</li>
813                    <li class="-ml-px flex items-start gap-2"><a class="inline-block border-l border-transparent pl-5 text-base/8 text-neutral-600 hover:border-neutral-950/25 hover:text-neutral-950 aria-[current]:border-neutral-950 aria-[current]:text-neutral-950 sm:pl-4 sm:text-sm/6 dark:text-neutral-300 dark:hover:border-white/25 dark:hover:text-white dark:aria-[current]:border-white dark:aria-[current]:text-white" href="/docs/datatable"  >Datatable</a>  <div class="inline relative">
814    <div class="rainbow-button hover:opacity-80 transition-opacity duration-100 ease-in-out" data-controller="rainbow-button" data-rainbow-button-speed-value="2.5" data-rainbow-button-intensity-value="0.7">
815      <a href="/pro" data-turbo-frame="_top" class="group relative text-red-900 dark:text-red-100 flex items-center justify-center gap-1 rounded-md border border-neutral-200 bg-white/90 px-1 py-0.5 text-xs font-medium whitespace-nowrap shadow-xs transition-background transition-shadow duration-100 ease-in-out select-none hover:bg-neutral-50 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-600 disabled:cursor-not-allowed disabled:opacity-50 dark:border-neutral-700 dark:bg-neutral-800/50 dark:hover:bg-neutral-700/50 dark:focus-visible:outline-neutral-200">
816        <svg xmlns="http://www.w3.org/2000/svg" class="size-3" width="18" height="18" viewBox="0 0 18 18"><g fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" stroke="currentColor"><polyline points="14.983 5.53 9 9 3.017 5.53"></polyline><line x1="9" y1="15.938" x2="9" y2="9"></line><path d="M7.997,2.332L3.747,4.797c-.617,.358-.997,1.017-.997,1.73v4.946c0,.713,.38,1.372,.997,1.73l4.25,2.465c.621,.36,1.386,.3
8166,2.007,0l4.25-2.465c.617-.358,.997-1.017,.997-1.73V6.527c0-.713-.38-1.372-.997-1.73l-4.25-2.465c-.621-.36-1.386-.36-2.007,0Z"></path></g></svg>
817        Pro
818      </a>
819    </div>
820  </div>
821</li>
822                    <li class="-ml-px flex items-start gap-2"><a class="inline-block border-l border-transparent pl-5 text-base/8 text-neutral-600 hover:border-neutral-950/25 hover:text-neutral-950 aria-[current]:border-neutral-950 aria-[current]:text-neutral-950 sm:pl-4 sm:text-sm/6 dark:text-neutral-300 dark:hover:border-white/25 dark:hover:text-white dark:aria-[current]:border-white dark:aria-[current]:text-white" href="/docs/date-picker"  >Date Picker</a></li>
823                    <li class="-ml-px flex items-start gap-2"><a class="inline-block border-l border-transparent pl-5 text-base/8 text-neutral-600 hover:border-neutral-950/25 hover:text-neutral-950 aria-[current]:border-neutral-950 aria-[current]:text-neutral-950 sm:pl-4 sm:text-sm/6 dark:text-neutral-300 dark:hover:border-white/25 dark:hover:text-white dark:aria-[current]:border-white dark:aria-[current]:text-white" href="/docs/dark-mode-switcher"  >Dark Mode Switcher</a><div class="inline relative">
824  <div class="transition-opacity duration-100 ease-in-out" data-controller="rainbow-button" data-rainbow-button-speed-value="2.5" data-rainbow-button-intensity-value="0.7">
825    <div class="group relative text-red-900 dark:text-red-100 flex items-center justify-center gap-1 rounded-md border border-neutral-200 bg-white/90 px-1 py-0.5 text-xs font-medium whitespace-nowrap shadow-xs transition-background transition-shadow duration-100 ease-in-out select-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-600 disabled:cursor-not-allowed disabled:opacity-50 dark:border-neutral-700 dark:bg-neutral-800/50 dark:focus-visible:outline-neutral-200">
826      <svg xmlns="http://www.w3.org/2000/svg" class="size-3" width="18" height="18" viewBox="0 0 18 18"><g fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" stroke="currentColor"><path d="M5.658,2.99l-1.263-.421-.421-1.263c-.137-.408-.812-.408-.949,0l-.421,1.263-1.263,.421c-.204,.068-.342,.259-.342,.474s.138,.406,.342,.474l1.263,.421,.421,1.263c.068,.204,.26,.342,.475,.342s.406-.138,.475-.342l.421-1.263,1.263-.421c.204-.068,.342-.259,.342-.474s-.138-.406-.342-.474Z" fill="currentColor" data-stroke="none" stroke="none"></path><polygon points="9.5 2.75 11.412 7.587 16.25 9.5 11.412 11.413 9.5 16.25 7.587 11.413 2.75 9.5 7.587 7.587 9.5 2.75"></polygon></g></svg>
827      New
828    </div>
829  </div>
830</div>
831</li>
832                    <li class="-ml-px flex items-start gap-2"><a class="inline-block border-l border-transparent pl-5 text-base/8 text-neutral-600 hover:border-neutral-950/25 hover:text-neutral-950 aria-[current]:border-neutral-950 aria-[current]:text-neutral-950 sm:pl-4 sm:text-sm/6 dark:text-neutral-300 dark:hover:border-white/25 dark:hover:text-white dark:aria-[current]:border-white dark:aria-[current]:text-white" href="/docs/dock"  >Dock</a></li>
833                    <li class="-ml-px flex items-start gap-2"><a class="inline-block border-l border-transparent pl-5 text-base/8 text-neutral-600 hover:border-neutral-950/25 hover:text-neutral-950 aria-[current]:border-neutral-950 aria-[current]:text-neutral-950 sm:pl-4 sm:text-sm/6 dark:text-neutral-300 dark:hover:border-white/25 dark:hover:text-white dark:aria-[current]:border-white dark:aria-[current]:text-white" href="/docs/drawer"  >Drawer</a>  <div class="inline relative">
834    <div class="rainbow-button hover:opacity-80 transition-opacity duration-100 ease-in-out" data-controller="rainbow-button" data-rainbow-button-speed-value="2.5" data-rainbow-button-intensity-value="0.7">
835      <a href="/pro" data-turbo-frame="_top" class="group relative text-red-900 dark:text-red-100 flex items-center justify-center gap-1 rounded-md border border-neutral-200 bg-white/90 px-1 py-0.5 text-xs font-medium whitespace-nowrap shadow-xs transition-background transition-shadow duration-100 ease-in-out select-none hover:bg-neutral-50 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-600 disabled:cursor-not-allowed disabled:opacity-50 dark:border-neutral-700 dark:bg-neutral-800/50 dark:hover:bg-neutral-700/50 dark:focus-visible:outline-neutral-200">
836        <svg xmlns="http://www.w3.org/2000/svg" class="size-3" width="18" height="18" viewBox="0 0 18 18"><g fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" stroke="currentColor"><polyline points="14.983 5.53 9 9 3.017 5.53"></polyline><line x1="9" y1="15.938" x2="9" y2="9"></line><path d="M7.997,2.332L3.747,4.797c-.617,.358-.997,1.017-.997,1.73v4.946c0,.713,.38,1.372,.997,1.73l4.25,2.465c.621,.36,1.386,.3
8366,2.007,0l4.25-2.465c.617-.358,.997-1.017,.997-1.73V6.527c0-.713-.38-1.372-.997-1.73l-4.25-2.465c-.621-.36-1.386-.36-2.007,0Z"></path></g></svg>
837        Pro
838      </a>
839    </div>
840  </div>
841</li>
842                    <li class="-ml-px flex items-start gap-2"><a class="inline-block border-l border-transparent pl-5 text-base/8 text-neutral-600 hover:border-neutral-950/25 hover:text-neutral-950 aria-[current]:border-neutral-950 aria-[current]:text-neutral-950 sm:pl-4 sm:text-sm/6 dark:text-neutral-300 dark:hover:border-white/25 dark:hover:text-white dark:aria-[current]:border-white dark:aria-[current]:text-white" href="/docs/dropdown"  >Dropdown</a>  <div class="inline relative">
843    <div class="rainbow-button hover:opacity-80 transition-opacity duration-100 ease-in-out" data-controller="rainbow-button" data-rainbow-button-speed-value="2.5" data-rainbow-button-intensity-value="0.7">
844      <a href="/pro" data-turbo-frame="_top" class="group relative text-red-900 dark:text-red-100 flex items-center justify-center gap-1 rounded-md border border-neutral-200 bg-white/90 px-1 py-0.5 text-xs font-medium whitespace-nowrap shadow-xs transition-background transition-shadow duration-100 ease-in-out select-none hover:bg-neutral-50 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-600 disabled:cursor-not-allowed disabled:opacity-50 dark:border-neutral-700 dark:bg-neutral-800/50 dark:hover:bg-neutral-700/50 dark:focus-visible:outline-neutral-200">
845        <svg xmlns="http://www.w3.org/2000/svg" class="size-3" width="18" height="18" viewBox="0 0 18 18"><g fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" stroke="currentColor"><polyline points="14.983 5.53 9 9 3.017 5.53"></polyline><line x1="9" y1="15.938" x2="9" y2="9"></line><path d="M7.997,2.332L3.747,4.797c-.617,.358-.997,1.017-.997,1.73v4.946c0,.713,.38,1.372,.997,1.73l4.25,2.465c.621,.36,1.386,.36,2.007,0l4.25-2.465c.617-.358,.997-1.017,.997-1.73V6.527c0-.713-.38-1.372-.997-1.73l-4.25-2.465c-.621-.36-1.386-.36-2.007,0Z"></path></g></svg>
846        Pro
847      </a>
848    </div>
849  </div>
850</li>
851                    <li class="-ml-px flex items-start gap-2"><a class="inline-block border-l border-transparent pl-5 text-base/8 text-neutral-600 hover:border-neutral-950/25 hover:text-neutral-950 aria-[current]:border-neutral-950 aria-[current]:text-neutral-950 sm:pl-4 sm:text-sm/6 dark:text-neutral-300 dark:hover:border-white/25 dark:hover:text-white dark:aria-[current]:border-white dark:aria-[current]:text-white" href="/docs/emoji-picker"  >Emoji Picker</a></li>
852                    <li class="-ml-px flex items-start gap-2"><a class="inline-block border-l border-transparent pl-5 text-base/8 text-neutral-600 hover:border-neutral-950/25 hover:text-neutral-950 aria-[current]:border-neutral-950 aria-[current]:text-neutral-950 sm:pl-4 sm:text-sm/6 dark:text-neutral-300 dark:hover:border-white/25 dark:hover:text-white dark:aria-[current]:border-white dark:aria-[current]:text-white" href="/docs/feedback"  >Feedback</a></li>
853                    <li class="-ml-px flex items-start gap-2"><a class="inline-block border-l border-transparent pl-5 text-base/8 text-neutral-600 hover:border-neutral-950/25 hover:text-neutral-950 aria-[current]:border-neutral-950 aria-[current]:text-neutral-950 sm:pl-4 sm:text-sm/6 dark:text-neutral-300 dark:hover:border-white/25 dark:hover:text-white dark:aria-[current]:border-white dark:aria-[current]:text-white" href="/docs/forms"  >Forms</a></li>
854                    <li class="-ml-px flex items-start gap-2"><a class="inline-block border-l border-transparent pl-5 text-base/8 text-neutral-600 hover:border-neutral-950/25 hover:text-neutral-950 aria-[current]:border-neutral-950 aria-[current]:text-neutral-950 sm:pl-4 sm:text-sm/6 dark:text-neutral-300 dark:hover:border-white/25 dark:hover:text-white dark:aria-[current]:border-white dark:aria-[current]:text-white" href="/docs/infinite-scroll"  >Infinite Scroll</a><div class="inline relative">
855  <div class="transition-opacity duration-100 ease-in-out" data-controller="rainbow-button" data-rainbow-button-speed-value="2.5" data-rainbow-button-intensity-value="0.7">
856    <div class="group relative text-red-900 dark:text-red-100 flex items-center justify-center gap-1 rounded-md border border-neutral-200 bg-white/90 px-1 py-0.5 text-xs font-medium whitespace-nowrap shadow-xs transition-background transition-shadow duration-100 ease-in-out select-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-600 disabled:cursor-not-allowed disabled:opacity-50 dark:border-neutral-700 dark:bg-neutral-800/50 dark:focus-visible:outline-neutral-200">
857      <svg xmlns="http://www.w3.org/2000/svg" class="size-3" width="18" height="18" viewBox="0 0 18 18"><g fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" stroke="currentColor">
857<path d="M5.658,2.99l-1.263-.421-.421-1.263c-.137-.408-.812-.408-.949,0l-.421,1.263-1.263,.421c-.204,.068-.342,.259-.342,.474s.138,.406,.342,.474l1.263,.421,.421,1.263c.068,.204,.26,.342,.475,.342s.406-.138,.475-.342l.421-1.263,1.263-.421c.204-.068,.342-.259,.342-.474s-.138-.406-.342-.474Z" fill="currentColor" data-stroke="none" stroke="none"></path><polygon points="9.5 2.75 11.412 7.587 16.25 9.5 11.412 11.413 9.5 16.25 7.587 11.413 2.75 9.5 7.587 7.587 9.5 2.75"></polygon></g></svg>
858      New
859    </div>
860  </div>
861</div>
862</li>
863                    <li class="-ml-px flex items-start gap-2"><a class="inline-block border-l border-transparent pl-5 text-base/8 text-neutral-600 hover:border-neutral-950/25 hover:text-neutral-950 aria-[current]:border-neutral-950 aria-[current]:text-neutral-950 sm:pl-4 sm:text-sm/6 dark:text-neutral-300 dark:hover:border-white/25 dark:hover:text-white dark:aria-[current]:border-white dark:aria-[current]:text-white" href="/docs/kbd"  >KBD & Hotkey</a></li>
864                    <li class="-ml-px flex items-start gap-2"><a class="inline-block border-l border-transparent pl-5 text-base/8 text-neutral-600 hover:border-neutral-950/25 hover:text-neutral-950 aria-[current]:border-neutral-950 aria-[current]:text-neutral-950 sm:pl-4 sm:text-sm/6 dark:text-neutral-300 dark:hover:border-white/25 dark:hover:text-white dark:aria-[current]:border-white dark:aria-[current]:text-white" href="/docs/lightbox"  >Lightbox</a></li>
865                    <li class="-ml-px flex items-start gap-2"><a class="inline-block border-l border-transparent pl-5 text-base/8 text-neutral-600 hover:border-neutral-950/25 hover:text-neutral-950 aria-[current]:border-neutral-950 aria-[current]:text-neutral-950 sm:pl-4 sm:text-sm/6 dark:text-neutral-300 dark:hover:border-white/25 dark:hover:text-white dark:aria-[current]:border-white dark:aria-[current]:text-white" href="/docs/loading-indicator"  >Loading Indicator</a></li>
866                    <li class="-ml-px flex items-start gap-2"><a class="inline-block border-l border-transparent pl-5 text-base/8 text-neutral-600 hover:border-neutral-950/25 hover:text-neutral-950 aria-[current]:border-neutral-950 aria-[current]:text-neutral-950 sm:pl-4 sm:text-sm/6 dark:text-neutral-300 dark:hover:border-white/25 dark:hover:text-white dark:aria-[current]:border-white dark:aria-[current]:text-white" href="/docs/marquee"  >Marquee</a></li>
867                    <li class="-ml-px flex items-start gap-2"><a class="inline-block border-l border-transparent pl-5 text-base/8 text-neutral-600 hover:border-neutral-950/25 hover:text-neutral-950 aria-[current]:border-neutral-950 aria-[current]:text-neutral-950 sm:pl-4 sm:text-sm/6 dark:text-neutral-300 dark:hover:border-white/25 dark:hover:text-white dark:aria-[current]:border-white dark:aria-[current]:text-white" href="/docs/modal"  >Modal</a>  <div class="inline relative">
868    <div class="rainbow-button hover:opacity-80 transition-opacity duration-100 ease-in-out" data-controller="rainbow-button" data-rainbow-button-speed-value="2.5" data-rainbow-button-intensity-value="0.7">
869      <a href="/pro" data-turbo-frame="_top" class="group relative text-red-900 dark:text-red-100 flex items-center justify-center gap-1 rounded-md border border-neutral-200 bg-white/90 px-1 py-0.5 text-xs font-medium whitespace-nowrap shadow-xs transition-background transition-shadow duration-100 ease-in-out select-none hover:bg-neutral-50 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-600 disabled:cursor-not-allowed disabled:opacity-50 dark:border-neutral-700 dark:bg-neutral-800/50 dark:hover:bg-neutral-700/50 dark:focus-visible:outline-neutral-200">
870        <svg xmlns="http://www.w3.org/2000/svg" class="size-3" width="18" height="18" viewBox="0 0 18 18"><g fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" stroke="currentColor"><polyline points="14.983 5.53 9 9 3.017 5.53"></polyline><line x1="9" y1="15.938" x2="9" y2="9"></line><path d="M7.997,2.332L3.747,4.797c-.617,.358-.997,1.017-.997,1.73v4.946c0,.713,.38,1.372,.997,1.73l4.25,2.465c.621,.36,1.386,.3
8706,2.007,0l4.25-2.465c.617-.358,.997-1.017,.997-1.73V6.527c0-.713-.38-1.372-.997-1.73l-4.25-2.465c-.621-.36-1.386-.36-2.007,0Z"></path></g></svg>
871        Pro
872      </a>
873    </div>
874  </div>
875</li>
876                    <li class="-ml-px flex items-start gap-2"><a class="inline-block border-l border-transparent pl-5 text-base/8 text-neutral-600 hover:border-neutral-950/25 hover:text-neutral-950 aria-[current]:border-neutral-950 aria-[current]:text-neutral-950 sm:pl-4 sm:text-sm/6 dark:text-neutral-300 dark:hover:border-white/25 dark:hover:text-white dark:aria-[current]:border-white dark:aria-[current]:text-white" href="/docs/onboarding-checklist"  >Onboarding Checklist</a>  <div class="inline relative">
877    <div class="rainbow-button hover:opacity-80 transition-opacity duration-100 ease-in-out" data-controller="rainbow-button" data-rainbow-button-speed-value="2.5" data-rainbow-button-intensity-value="0.7">
878      <a href="/pro" data-turbo-frame="_top" class="group relative text-red-900 dark:text-red-100 flex items-center justify-center gap-1 rounded-md border border-neutral-200 bg-white/90 px-1 py-0.5 text-xs font-medium whitespace-nowrap shadow-xs transition-background transition-shadow duration-100 ease-in-out select-none hover:bg-neutral-50 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-600 disabled:cursor-not-allowed disabled:opacity-50 dark:border-neutral-700 dark:bg-neutral-800/50 dark:hover:bg-neutral-700/50 dark:focus-visible:outline-neutral-200">
879        <svg xmlns="http://www.w3.org/2000/svg" class="size-3" width="18" height="18" viewBox="0 0 18 18"><g fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" stroke="currentColor"><polyline points="14.983 5.53 9 9 3.017 5.53"></polyline><line x1="9" y1="15.938" x2="9" y2="9"></line><path d="M7.997,2.332L3.747,4.797c-.617,.358-.997,1.017-.997,1.73v4.946c0,.713,.38,1.372,.997,1.73l4.25,2.465c.621,.36,1.386,.36,2.007,0l4.25-2.465c.617-.358,.997-1.017,.997-1.73V6.527c0-.713-.38-1.372-.997-1.73l-4.25-2.465c-.621-.36-1.386-.36-2.007,0Z"></path></g></svg>
880        Pro
881      </a>
882    </div>
883  </div>
884</li>
885                    <li class="-ml-px flex items-start gap-2"><a class="inline-block border-l border-transparent pl-5 text-base/8 text-neutral-600 hover:border-neutral-950/25 hover:text-neutral-950 aria-[current]:border-neutral-950 aria-[current]:text-neutral-950 sm:pl-4 sm:text-sm/6 dark:text-neutral-300 dark:hover:border-white/25 dark:hover:text-white dark:aria-[current]:border-white dark:aria-[current]:text-white" href="/docs/navbar"  >Navbar</a></li>
886                    <li class="-ml-px flex items-start gap-2"><a class="inline-block border-l border-transparent pl-5 text-base/8 text-neutral-600 hover:border-neutral-950/25 hover:text-neutral-950 aria-[current]:border-neutral-950 aria-[current]:text-neutral-950 sm:pl-4 sm:text-sm/6 dark:text-neutral-300 dark:hover:border-white/25 dark:hover:text-white dark:aria-[current]:border-white dark:aria-[current]:text-white" href="/docs/password"  >Password</a></li>
887                    <li class="-ml-px flex items-start gap-2"><a class="inline-block border-l border-transparent pl-5 text-base/8 text-neutral-600 hover:border-neutral-950/25 hover:text-neutral-950 aria-[current]:border-neutral-950 aria-[current]:text-neutral-950 sm:pl-4 sm:text-sm/6 dark:text-neutral-300 dark:hover:border-white/25 dark:hover:text-white dark:aria-[current]:border-white dark:aria-[current]:text-white" href="/docs/pagination"  >Pagination</a></li>
888                    <li class="-ml-px flex items-start gap-2"><a class="inline-block border-l border-transparent pl-5 text-base/8 text-neutral-600 hover:border-neutral-950/25 hover:text-neutral-950 aria-[current]:border-neutral-950 aria-[current]:text-neutral-950 sm:pl-4 sm:text-sm/6 dark:text-neutral-300 dark:hover:border-white/25 dark:hover:text-white dark:aria-[current]:border-white dark:aria-[current]:text-white" href="/docs/popover"  >Popover</a></li>
889                    <li class="-ml-px flex items-start gap-2"><a class="inline-block border-l border-transparent pl-5 text-base/8 text-neutral-600 hover:border-neutral-950/25 hover:text-neutral-950 aria-[current]:border-neutral-950 aria-[current]:text-neutral-950 sm:pl-4 sm:text-sm/6 dark:text-neutral-300 dark:hover:border-white/25 dark:hover:text-white dark:aria-[current]:border-white dark:aria-[current]:text-white" href="/docs/radio"  >Radio</a></li>
890                    <li class="-ml-px flex items-start gap-2"><a class="inline-block border-l border-transparent pl-5 text-base/8 text-neutral-600 hover:border-neutral-950/25 hover:text-neutral-950 aria-[current]:border-neutral-950 aria-[current]:text-neutral-950 sm:pl-4 sm:text-sm/6 dark:text-neutral-300 dark:hover:border-white/25 dark:hover:text-white dark:aria-[current]:border-white dark:aria-[current]:text-white" href="/docs/scroll-area"  >Scroll Area</a></li>
891                    <li class="-ml-px flex items-start gap-2"><a class="inline-block border-l border-transparent pl-5 text-base/8 text-neutral-600 hover:border-neutral-950/25 hover:text-neutral-950 aria-[current]:border-neutral-950 aria-[current]:text-neutral-950 sm:pl-4 sm:text-sm/6 dark:text-neutral-300 dark:hover:border-white/25 dark:hover:text-white dark:aria-[current]:border-white dark:aria-[current]:text-white" href="/docs/select"  >Select</a></li>
892                    <li class="-ml-px flex items-start gap-2"><a class="inline-block border-l border-transparent pl-5 text-base/8 text-neutral-600 hover:border-neutral-950/25 hover:text-neutral-950 aria-[current]:border-neutral-950 aria-[current]:text-neutral-950 sm:pl-4 sm:text-sm/6 dark:text-neutral-300 dark:hover:border-white/25 dark:hover:text-white dark:aria-[current]:border-white dark:aria-[current]:text-white" href="/docs/sidebar"  >Sidebar</a></li>
893                    <li class="-ml-px flex items-start gap-2"><a class="inline-block border-l border-transparent pl-5 text-base/8 text-neutral-600 hover:border-neutral-950/25 hover:text-neutral-950 aria-[current]:border-neutral-950 aria-[current]:text-neutral-950 sm:pl-4 sm:text-sm/6 dark:text-neutral-300 dark:hover:border-white/25 dark:hover:text-white dark:aria-[current]:border-white dark:aria-[current]:text-white" href="/docs/skeleton"  >Skeleton</a></li>
894                    <li class="-ml-px flex items-start gap-2"><a class="inline-block border-l border-transparent pl-5 text-base/8 text-neutral-600 hover:border-neutral-950/25 hover:text-neutral-950 aria-[current]:border-neutral-950 aria-[current]:text-neutral-950 sm:pl-4 sm:text-sm/6 dark:text-neutral-300 dark:hover:border-white/25 dark:hover:text-white dark:aria-[current]:border-white dark:aria-[current]:text-white" href="/docs/slideover"  >Slideover</a>  <div class="inline relative">
895    <div class="rainbow-button hover:opacity-80 transition-opacity duration-100 ease-in-out" data-controller="rainbow-button" data-rainbow-button-speed-value="2.5" data-rainbow-button-intensity-value="0.7">
896      <a href="/pro" data-turbo-frame="_top" class="group relative text-red-900 dark:text-red-100 flex items-center justify-center gap-1 rounded-md border border-neutral-200 bg-white/90 px-1 py-0.5 text-xs font-medium whitespace-nowrap shadow-xs transition-background transition-shadow duration-100 ease-in-out select-none hover:bg-neutral-50 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-600 disabled:cursor-not-allowed disabled:opacity-50 dark:border-neutral-700 dark:bg-neutral-800/50 dark:hover:bg-neutral-700/50 dark:focus-visible:outline-neutral-200">
897        <svg xmlns="http://www.w3.org/2000/svg" class="size-3" width="18" height="18" viewBox="0 0 18 18"><g fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" stroke="currentColor"><polyline points="14.983 5.53 9 9 3.017 5.53"></polyline><line x1="9" y1="15.938" x2="9" y2="9"></line><path d="M7.997,2.332L3.747,4.797c-.617,.358-.997,1.017-.997,1.73v4.946c0,.713,.38,1.372,.997,1.73l4.25,2.465c.621,.36,1.386,.3
8976,2.007,0l4.25-2.465c.617-.358,.997-1.017,.997-1.73V6.527c0-.713-.38-1.372-.997-1.73l-4.25-2.465c-.621-.36-1.386-.36-2.007,0Z"></path></g></svg>
898        Pro
899      </a>
900    </div>
901  </div>
902</li>
903                    <li class="-ml-px flex items-start gap-2"><a class="inline-block border-l border-transparent pl-5 text-base/8 text-neutral-600 hover:border-neutral-950/25 hover:text-neutral-950 aria-[current]:border-neutral-950 aria-[current]:text-neutral-950 sm:pl-4 sm:text-sm/6 dark:text-neutral-300 dark:hover:border-white/25 dark:hover:text-white dark:aria-[current]:border-white dark:aria-[current]:text-white" href="/docs/stepper"  >Stepper</a>  <div class="inline relative">
904    <div class="rainbow-button hover:opacity-80 transition-opacity duration-100 ease-in-out" data-controller="rainbow-button" data-rainbow-button-speed-value="2.5" data-rainbow-button-intensity-value="0.7">
905      <a href="/pro" data-turbo-frame="_top" class="group relative text-red-900 dark:text-red-100 flex items-center justify-center gap-1 rounded-md border border-neutral-200 bg-white/90 px-1 py-0.5 text-xs font-medium whitespace-nowrap shadow-xs transition-background transition-shadow duration-100 ease-in-out select-none hover:bg-neutral-50 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-600 disabled:cursor-not-allowed disabled:opacity-50 dark:border-neutral-700 dark:bg-neutral-800/50 dark:hover:bg-neutral-700/50 dark:focus-visible:outline-neutral-200">
906        <svg xmlns="http://www.w3.org/2000/svg" class="size-3" width="18" height="18" viewBox="0 0 18 18"><g fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" stroke="currentColor"><polyline points="14.983 5.53 9 9 3.017 5.53"></polyline><line x1="9" y1="15.938" x2="9" y2="9"></line><path d="M7.997,2.332L3.747,4.797c-.617,.358-.997,1.017-.997,1.73v4.946c0,.713,.38,1.372,.997,1.73l4.25,2.465c.621,.36,1.386,.36,2.007,0l4.25-2.465c.617-.358,.997-1.017,.997-1.73V6.527c0-.713-.38-1.372-.997-1.73l-4.25-2.465c-.621-.36-1.386-.36-2.007,0Z"></path></g></svg>
907        Pro
908      </a>
909    </div>
910  </div>
911</li>
912                    <li class="-ml-px flex items-start gap-2"><a class="inline-block border-l border-transparent pl-5 text-base/8 text-neutral-600 hover:border-neutral-950/25 hover:text-neutral-950 aria-[current]:border-neutral-950 aria-[current]:text-neutral-950 sm:pl-4 sm:text-sm/6 dark:text-neutral-300 dark:hover:border-white/25 dark:hover:text-white dark:aria-[current]:border-white dark:aria-[current]:text-white" href="/docs/switch"  >Switch</a></li>
913                    <li class="-ml-px flex items-start gap-2"><a class="inline-block border-l border-transparent pl-5 text-base/8 text-neutral-600 hover:border-neutral-950/25 hover:text-neutral-950 aria-[current]:border-neutral-950 aria-[current]:text-neutral-950 sm:pl-4 sm:text-sm/6 dark:text-neutral-300 dark:hover:border-white/25 dark:hover:text-white dark:aria-[current]:border-white dark:aria-[current]:text-white" href="/docs/tabs"  >Tabs</a>  <div class="inline relative">
914    <div class="rainbow-button hover:opacity-80 transition-opacity duration-100 ease-in-out" data-controller="rainbow-button" data-rainbow-button-speed-value="2.5" data-rainbow-button-intensity-value="0.7">
915      <a href="/pro" data-turbo-frame="_top" class="group relative text-red-900 dark:text-red-100 flex items-center justify-center gap-1 rounded-md border border-neutral-200 bg-white/90 px-1 py-0.5 text-xs font-medium whitespace-nowrap shadow-xs transition-background transition-shadow duration-100 ease-in-out select-none hover:bg-neutral-50 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-600 disabled:cursor-not-allowed disabled:opacity-50 dark:border-neutral-700 dark:bg-neutral-800/50 dark:hover:bg-neutral-700/50 dark:focus-visible:outline-neutral-200">
916        <svg xmlns="http://www.w3.org/2000/svg" class="size-3" width="18" height="18" viewBox="0 0 18 18"><g fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" stroke="currentColor"><polyline points="14.983 5.53 9 9 3.017 5.53"></polyline><line x1="9" y1="15.938" x2="9" y2="9"></line><path d="M7.997,2.332L3.747,4.797c-.617,.358-.997,1.017-.997,1.73v4.946c0,.713,.38,1.372,.997,1.73l4.25,2.465c.621,.36,1.386,.3
9166,2.007,0l4.25-2.465c.617-.358,.997-1.017,.997-1.73V6.527c0-.713-.38-1.372-.997-1.73l-4.25-2.465c-.621-.36-1.386-.36-2.007,0Z"></path></g></svg>
917        Pro
918      </a>
919    </div>
920  </div>
921</li>
922                    <li class="-ml-px flex items-start gap-2"><a class="inline-block border-l border-transparent pl-5 text-base/8 text-neutral-600 hover:border-neutral-950/25 hover:text-neutral-950 aria-[current]:border-neutral-950 aria-[current]:text-neutral-950 sm:pl-4 sm:text-sm/6 dark:text-neutral-300 dark:hover:border-white/25 dark:hover:text-white dark:aria-[current]:border-white dark:aria-[current]:text-white" href="/docs/table"  >Table</a></li>
923                    <li class="-ml-px flex items-start gap-2"><a class="inline-block border-l border-transparent pl-5 text-base/8 text-neutral-600 hover:border-neutral-950/25 hover:text-neutral-950 aria-[current]:border-neutral-950 aria-[current]:text-neutral-950 sm:pl-4 sm:text-sm/6 dark:text-neutral-300 dark:hover:border-white/25 dark:hover:text-white dark:aria-[current]:border-white dark:aria-[current]:text-white" href="/docs/testimonial"  >Testimonial</a></li>
924                    <li class="-ml-px flex items-start gap-2"><a class="inline-block border-l border-transparent pl-5 text-base/8 text-neutral-600 hover:border-neutral-950/25 hover:text-neutral-950 aria-[current]:border-neutral-950 aria-[current]:text-neutral-950 sm:pl-4 sm:text-sm/6 dark:text-neutral-300 dark:hover:border-white/25 dark:hover:text-white dark:aria-[current]:border-white dark:aria-[current]:text-white" href="/docs/toast"  >Toast</a></li>
925                    <li class="-ml-px flex items-start gap-2"><a class="inline-block border-l border-transparent pl-5 text-base/8 text-neutral-600 hover:border-neutral-950/25 hover:text-neutral-950 aria-[current]:border-neutral-950 aria-[current]:text-neutral-950 sm:pl-4 sm:text-sm/6 dark:text-neutral-300 dark:hover:border-white/25 dark:hover:text-white dark:aria-[current]:border-white dark:aria-[current]:text-white" href="/docs/tooltip"  >Tooltip</a></li>
926                    <li class="-ml-px flex items-start gap-2"><a class="inline-block border-l border-transparent pl-5 text-base/8 text-neutral-600 hover:border-neutral-950/25 hover:text-neutral-950 aria-[current]:border-neutral-950 aria-[current]:text-neutral-950 sm:pl-4 sm:text-sm/6 dark:text-neutral-300 dark:hover:border-white/25 dark:hover:text-white dark:aria-[current]:border-white dark:aria-[current]:text-white" href="/docs/tree-view"  >Tree View</a></li>
927                    <li class="-ml-px flex items-start gap-2"><a class="inline-block border-l border-transparent pl-5 text-base/8 text-neutral-600 hover:border-neutral-950/25 hover:text-neutral-950 aria-[current]:border-neutral-950 aria-[current]:text-neutral-950 sm:pl-4 sm:text-sm/6 dark:text-neutral-300 dark:hover:border-white/25 dark:hover:text-white dark:aria-[current]:border-white dark:aria-[current]:text-white" href="/docs/two-factor"  >Two Factor</a></li>
928                  </ul>
929                </div>
930              </nav>
931            </div>
932            <div class="w-full -mx-6 h-6 z-10 pointer-events-none sticky bottom-0 inset-x-0 bg-gradient-to-t from-[#FCFBF9] dark:from-[#111111] to-transparent"></div>
933          </div>
934        </div>
935      </div>
936      <div class="col-start-2 rounded-b-xl row-span-5 row-start-1 border-x border-b border-neutral-950/5 dark:border-white/10 max-lg:hidden relative overflow-hidden" style="
937        background-color: rgba(200, 200, 200, 0.01);
938        background-image: radial-gradient(
939            circle at 50% 50%,
940            rgba(102, 102, 102, 0.1) 1px,
941            transparent 0
942          ),
943          linear-gradient(rgba(102, 102, 102, 0.05) 1px, transparent 0),
944          linear-gradient(90deg, rgba(102, 102, 102, 0.05) 1px, transparent 0);
945        background-size:
946          40px 40px,
947          20px 20px,
948          20px 20px;
949      ">
950        <div class="absolute top-0 left-0 w-full h-full z-[1]" style="
951          background: repeating-linear-gradient(
952            45deg,
953            transparent,
954            transparent 10px,
955            rgba(102, 102, 102, 0.1) 10px,
956            rgba(102, 102, 102, 0.1) 20px
957          );
958        "></div>
959        <div class="absolute top-0 left-0 w-full h-full opacity-60 z-[2]" style="
960          background: radial-gradient(
961            circle,
962            rgba(102, 102, 102, 0.1) 1px,
963            transparent 1px
964          );
965          background-size: 60px 60px;
966        "></div>
967      </div>
968      <div class="relative row-start-1 grid grid-cols-subgrid lg:col-start-3">
969        <div hidden></div>
970        <div class="mx-auto grid w-full max-w-2xl grid-cols-1 gap-10 xl:max-w-5xl xl:grid-cols-[minmax(0,1fr)_var(--container-2xs)]">
971          <div class="px-4 pt-13 pb-12 sm:px-6 xl:pr-0" data-table-of-contents-target="content">
972            <!-- Previous/Next navigation -->
973
974            <div class="justify-end gap-2 items-center mb-6 pb-4 border-b border-neutral-950/20 dark:border-white/20 flex">
975      
976
977
978
979
980
981
982<div class="relative flex" data-controller="dropdown-popover" data-dropdown-popover-placement-value="bottom-end top-end" data-dropdown-popover-auto-close-value="false">
983  <button
984    type="button"
985    class="flex items-center justify-center gap-1.5 rounded-l-lg relative z-10 border border-black/10 bg-white/90 px-2 sm:px-2.5 py-2 text-sm font-medium whitespace-nowrap text-neutral-800 shadow-xs transition-all duration-100 ease-in-out select-none hover:bg-neutral-50 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-600 disabled:cursor-not-allowed disabled:opacity-50 dark:border-white/10 dark:bg-neutral-700/50 dark:text-neutral-50 dark:hover:bg-neutral-700/75 dark:focus-visible:outline-neutral-200"
986    data-controller="clipboard"
987    data-clipboard-text="# Installation Documentation Index
988
989Use this index first. Load only the section markdown route you need.
990
991Full reference: `/docs/installation.md`
992Suggested first section route: `/docs/installation/1-dependencies.md`
993
994## Sections
995- [1. Dependencies](/docs/installation/1-dependencies.md)
996- [2. Stimulus Controllers](/docs/installation/2-stimulus-controllers.md)
997- [3. Custom CSS](/docs/installation/3-custom-css.md)"
998    data-clipboard-error-message-value="Copy failed"
999    data-clipboard-show-tooltip-value="false"
1000    data-clipboard-tooltip-duration-value="1500"
1001  >
1002    <span data-clipboard-target="copyContent" class="flex items-center gap-1.5">
1003      <svg xmlns="http://www.w3.org/2000/svg" class="size-4" width="18" height="18" viewBox="0 0 18 18"><g fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" stroke="currentColor"><rect x="1.75" y="1.75" width="11" height="11" rx="2" ry="2" transform="translate(14.5 14.5) rotate(-180)"></rect><path d="M15.199,6.002l1.029,6.924c.162,1.093-.592,2.11-1.684,2.272l-6.924,1.029c-.933,.139-1.81-.39-2.148-1.228"></path><line x1="7.25" y1="9.75" x2="7.25" y2="4.75"></line><line x1="4.75" y1="7.25" x2="9.75" y2="7.25"></line></g></svg>
1004      <span class="hidden md:inline">Copy for LLMs</span>
1005    </span>
1006    <span data-clipboard-target="copiedContent" class="flex items-center gap-1.5 text-green-500 hidden">
1007      <svg xmlns="http://www.w3.org/2000/svg" class="size-4" width="18" height="18" viewBox="0 0 18 18"><g fill="currentColor"><path d="M6.75,15h-.002c-.227,0-.442-.104-.583-.281L2.165,9.719c-.259-.324-.207-.795,.117-1.054,.325-.259,.796-.206,1.054,.117l3.418,4.272L14.667,3.278c.261-.322,.732-.373,1.055-.111,.322,.261,.372,.733,.111,1.055L7.333,14.722c-.143,.176-.357,.278-.583,.278Z" fill="currentColor"></path></g></svg>
1008      <span class="hidden md:inline">Copy for LLMs</span>
1009    </span>
1010  </button>
1011
1012  <button type="button" class="flex items-center justify-center gap-1.5 rounded-r-lg border border-l-0 border-black/10 bg-white/90 p-2 text-sm font-medium whitespace-nowrap text-neutral-800 shadow-xs transition-all duration-100 ease-in-out outline-none select-none hover:bg-neutral-50 focus-visible:bg-neutral-50 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-600 disabled:cursor-not-allowed disabled:opacity-50 data-[state=open]:bg-neutral-100 dark:border-white/10 dark:bg-neutral-700/50 dark:text-neutral-50 dark:hover:bg-neutral-700/75 dark:focus:bg-neutral-700 dark:focus-visible:bg-neutral-700/50 dark:data-[state=open]:bg-neutral-700" data-dropdown-popover-target="button" data-action="dropdown-popover#toggle" aria-haspopup="menu">
1013    <svg xmlns="http://www.w3.org/2000/svg" class="size-4" width="18" height="18" viewBox="0 0 18 18"><path fill="currentColor" d="M8.99999 13.5C8.80799 13.5 8.61599 13.4271 8.46999 13.2801L2.21999 7.03005C1.92699 6.73705 1.92699 6.26202 2.21999 5.96902C2.51299 5.67602 2.98799 5.67602 3.28099 5.96902L9.00099 11.689L14.721 5.96902C15.014 5.67602 15.489 5.67602 15.782 5.96902C16.075 6.26202 16.075 6.73705 15.782 7.03005L9.53199 13.2801C9.38599 13.4261 9.19399 13.5 9.00199 13.5H8.99999Z" /></svg>
1014  </button>
1015
1016  <dialog
1017    class="absolute z-50 min-w-[200px] rounded-lg border border-black/10 bg-white text-neutral-900 opacity-0 shadow-xs transition-opacity duration-150 ease-out outline-hidden dark:border-white/10 dark:bg-neutral-800 dark:text-neutral-100"
1018    data-controller="menu"
1019    data-dropdown-popover-target="menu"
1020    data-action="click@document->dropdown-popover#closeOnClickOutside
1021                close->menu#reset
1022                keydown.up->menu#prev keydown.down->menu#next
1023                keydown.up->menu#preventScroll keydown.down->menu#preventScroll"
1024  >
1025    <div class="flex flex-col p-1" role="menu">
1026        <a
1027          href="/docs/installation/toc.md"
1028          target="_blank"
1029          class="flex items-center gap-2.5 rounded-md px-2.5 py-2 text-left text-sm text-neutral-700 hover:bg-neutral-100 focus:bg-neutral-100 focus:outline-hidden dark:text-neutral-200 dark:hover:bg-neutral-700/50 dark:focus:bg-neutral-700/50"
1030          data-menu-target="item"
1031          role="menuitem"
1032          tabindex="-1"
1033        >
1034          <svg xmlns="http://www.w3.org/2000/svg" class="size-4 text-neutral-500 dark:text-neutral-400" width="18" height="18" viewBox="0 0 18 18"><g fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" stroke="currentColor"><rect x=".75" y="3.75" width="16.5" height="10.5" rx="2" ry="2"></rect><polyline points="8.75 11.25 8.75 6.75 8.356 6.75 6.25 9.5 4.144 6.75 3.75 6.75 3.75 11.25"></polyline><polyline points="11.5 9.5 13.25 11.25 15 9.5"></polyline><line x1="13.25" y1="11.25" x2="13.25" y2="6.75"></line></g></svg>
1035          View TOC Markdown
1036        </a>
1037
1038      <a
1039        href="/docs/installation.md"
1040        target="_blank"
1041        class="flex items-center gap-2.5 rounded-md px-2.5 py-2 text-left text-sm text-neutral-700 hover:bg-neutral-100 focus:bg-neutral-100 focus:outline-hidden dark:text-neutral-200 dark:hover:bg-neutral-700/50 dark:focus:bg-neutral-700/50"
1042        data-menu-target="item"
1043        role="menuitem"
1044        tabindex="-1"
1045      >
1046        <svg xmlns="http://www.w3.org/2000/svg" class="size-4 text-neutral-500 dark:text-neutral-400" width="18" height="18" viewBox="0 0 18 18"><g fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" stroke="currentColor"><rect x=".75" y="3.75" width="16.5" height="10.5" rx="2" ry="2"></rect><polyline points="8.75 11.25 8.75 6.75 8.356 6.75 6.25 9.5 4.144 6.75 3.75 6.75 3.75 11.25"></polyline><polyline points="11.5 9.5 13.25 11.25 15 9.5"></polyline><line x1="13.25" y1="11.25" x2="13.25" y2="6.75"></line></g></svg>
1047        View Full Markdown
1048      </a>
1049
1050      <div class="my-1 border-t border-neutral-100 dark:border-neutral-700"></div>
1051
1052      <a
1053        href="https://chatgpt.com/?q=I%27m%20looking%20at%20this%20Rails%20Blocks%20documentation%20index%3A%20https%3A%2F%2Frailsblocks.com%2Fdocs%2Finstallation%2Ftoc.md%0A%0AStart%20with%20the%20index%20and%20only%20load%20section%20markdown%20routes%20when%20needed.%20Help%20me%20implement%20this%20component%20with%20minimal%20context."
1054        target="_blank"
1055        rel="noopener noreferrer"
1056        class="flex items-center gap-2.5 rounded-md px-2.5 py-2 text-left text-sm text-neutral-700 hover:bg-neutral-100 focus:bg-neutral-100 focus:outline-hidden dark:text-neutral-200 dark:hover:bg-neutral-700/50 dark:focus:bg-neutral-700/50"
1057        data-menu-target="item"
1058        role="menuitem"
1059        tabindex="-1"
1060      >
1061        <svg xmlns="http://www.w3.org/2000/svg" class="size-4 text-neutral-500 dark:text-neutral-400" fill="currentColor" fill-rule="evenodd" height="1em" style="flex:none;line-height:1" viewBox="0 0 24 24"><path d="M21.55 10.004a5.416 5.416 0 00-.478-4.501c-1.217-2.09-3.662-3.166-6.05-2.66A5.59 5.59 0 0010.831 1C8.39.995 6.224 2.546 5.473 4.838A5.553 5.553 0 001.76 7.496a5.487 5.487 0 00.691 6.5 5.416 5.416 0 00.477 4.502c1.217 2.09 3.662 3.165 6.05 2.66A5.586 5.586 0 0013.168 23c2.443.006 4.61-1.546 5.361-3.84a5.553 5.553 0 003.715-2.66 5.488 5.488 0 00-.693-6.497v.001zm-8.381 11.558a4.199 4.199 0 01-2.675-.954c.034-.018.093-.05.132-.074l4.44-2.53a.71.71 0 00.364-.623v-6.176l1.877 1.069c.02.01.033.029.036.05v5.115c-.003 2.274-1.87 4.118-4.174 4.123zM4.192 17.78a4.059 4.059 0 01-.498-2.763c.032.02.09.055.131.078l4.44 2.53c.225.13.504.13.73 0l5.42-3.088v2.138a.068.068 0 01-.027.057L9.9 19.288c-1.999 1.136-4.552.46-5.707-1.51h-.001zM3.023 8.216A4.15 4.15 0 015.198 6.41l-.002.151v5.06a.711.711 0 00.364.624l5.42 3.087-1.876 1.07a.067.067 0 01-.063.005l-4.489-2.559c-1.995-1.14-2.679-3.658-1.53-5.63h.001zm15.417 3.54l-5.42-3.088L14.896 7.6a.067.067 0 01.063-.006l4.489 2.557c1.998 1.14 2.683 3.662 1.529 5.633a4.163 4.163 0 01-2.174 1.807V12.38a.71.71 0 00-.363-.623zm1.867-2.773a6.04 6.04 0 00-.132-.078l-4.44-2.53a.731.731 0 00-.729 0l-5.42 3.088V7.325a.068.068 0 01.027-.057L14.1 4.713c2-1.137 4.555-.46 5.707 1.513.487.833.664 1.809.499 2.757h.001zm-11.741 3.81l-1.877-1.068a.065.065 0 01-.036-.051V6.559c.001-2.277 1.873-4.122 4.181-4.12.976 0 1.92.338 2.671.954-.034.018-.092.05-.131.073l-4.44 2.53a.71.71 0 00-.365.623l-.003 6.173v.002zm1.02-2.168L12 9.25l2.414 1.375v2.75L12 14.75l-2.415-1.375v-2.75z"/></svg>
1062        Open in ChatGPT
1063      </a>
1064
1065      <a
1066        href="https://claude.ai/new?q=I%27m%20looking%20at%20this%20Rails%20Blocks%20documentation%20index%3A%20https%3A%2F%2Frailsblocks.com%2Fdocs%2Finstallation%2Ftoc.md%0A%0AStart%20with%20the%20index%20and%20
1066only%20load%20section%20markdown%20routes%20when%20needed.%20Help%20me%20implement%20this%20component%20with%20minimal%20context."
1067        target="_blank"
1068        rel="noopener noreferrer"
1069        class="flex items-center gap-2.5 rounded-md px-2.5 py-2 text-left text-sm text-neutral-700 hover:bg-neutral-100 focus:bg-neutral-100 focus:outline-hidden dark:text-neutral-200 dark:hover:bg-neutral-700/50 dark:focus:bg-neutral-700/50"
1070        data-menu-target="item"
1071        role="menuitem"
1072        tabindex="-1"
1073      >
1074        <svg xmlns="http://www.w3.org/2000/svg" class="size-4 text-neutral-500 dark:text-neutral-400" fill="currentColor" fill-rule="evenodd" style="flex:none;line-height:1" viewBox="0 0 24 24" width="1em"><title>Claude</title><path d="M4.709 15.955l4.72-2.647.08-.23-.08-.128H9.2l-.79-.048-2.698-.073-2.339-.097-2.266-.122-.571-.121L0 11.784l.055-.352.48-.321.686.06 1.52.103 2.278.158 1.652.097 2.449.255h.389l.055-.157-.134-.098-.103-.097-2.358-1.596-2.552-1.688-1.336-.972-.724-.491-.364-.462-.158-1.008.656-.722.881.06.225.061.893.686 1.908 1.476 2.491 1.833.365.304.145-.103.019-.073-.164-.274-1.355-2.446-1.446-2.49-.644-1.032-.17-.619a2.97 2.97 0 01-.104-.729L6.283.134 6.696 0l.996.134.42.364.62 1.414 1.002 2.229 1.555 3.03.456.898.243.832.091.255h.158V9.01l.128-1.706.237-2.095.23-2.695.08-.76.376-.91.747-.492.584.28.48.685-.067.444-.286 1.851-.559 2.903-.364 1.942h.212l.243-.242.985-1.306 1.652-2.064.73-.82.85-.904.547-.431h1.033l.76 1.129-.34 1.166-1.064 1.347-.881 1.142-1.264 1.7-.79 1.36.073.11.188-.02 2.856-.606 1.543-.28 1.841-.315.833.388.091.395-.328.807-1.969.486-2.309.462-3.439.813-.042.03.049.061 1.549.146.662.036h1.622l3.02.225.79.522.474.638-.079.485-1.215.62-1.64-.389-3.829-.91-1.312-.329h-.182v.11l1.093 1.068 2.006 1.81 2.509 2.33.127.578-.322.455-.34-.049-2.205-1.657-.851-.747-1.926-1.62h-.128v.17l.444.649 2.345 3.521.122 1.08-.17.353-.608.213-.668-.122-1.374-1.925-1.415-2.167-1.143-1.943-.14.08-.674 7.254-.316.37-.729.28-.607-.461-.322-.747.322-1.476.389-1.924.315-1.53.286-1.9.17-.632-.012-.042-.14.018-1.434 1.967-2.18 2.945-1.726 1.845-.414.164-.717-.37.067-.662.401-.589 2.388-3.036 1.44-1.882.93-1.086-.006-.158h-.055L4.132 18.56l-1.13.146-.487-.456.061-.746.231-.243 1.908-1.312-.006.006z"/></svg>
1075        Open in Claude
1076      </a>
1077    </div>
1078  </dialog>
1079</div>
1080
1081    <div></div>
1082
1083    <a href="/docs/view-components" class="flex items-center justify-center gap-1.5 rounded-lg border border-black/10 bg-white/90 p-2.5 text-xs font-medium whitespace-nowrap text-neutral-800 shadow-xs transition-all duration-100 ease-in-out select-none hover:bg-neutral-50 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-600 disabled:cursor-not-allowed disabled:opacity-50 dark:border-white/10 dark:bg-neutral-700/50 dark:text-neutral-50 dark:hover:bg-neutral-700/75 dark:focus-visible:outline-neutral-200">
1084      <svg xmlns="http://www.w3.org/2000/svg" class="size-4 transition-transform group-hover:translate-x-1" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
1085        <path stroke-linecap="round" stroke-linejoin="round" d="M9 5l7 7-7 7" />
1086      </svg>
1087    </a>
1088</div>
1089
1090
1091            
1092<h1 class="text-3xl font-bold mb-4">Installation</h1>
1093<p class="mb-4">Rails Blocks lets you add individual components to your v7+ Rails application by copying and pasting the code into your application.</p>
1094<p>This approach gives you full control and the ability to easily extend components.</p>
1095
1096
1097<div  class="group text-2xl font-bold mb-4 mt-12 flex gap-1.5 justify-between items-center pb-4 border-b border-neutral-950/20 dark:border-white/20">
1098  <div class="flex gap-1.5 items-center">
1099    <h2 id="1-dependencies">1. Dependencies</h2>
1100    <a class="hidden align-middle group-hover:inline-block" href="#1-dependencies">
1101      <svg xmlns="http://www.w3.org/2000/svg" class="text-neutral-500 dark:text-neutral-400 size-5" width="18" height="18" viewBox="0 0 18 18"><g stroke-width="1.5" fill="none" stroke="currentColor"><path d="M8.5,6.827c-.352,.168-.682,.398-.973,.69l-.01,.01c-1.381,1.381-1.381,3.619,0,5l2.175,2.175c1.381,1.381,3.619,1.381,5,0l.01-.01c1.381-1.381,1.381-3.619,0-5l-.931-.931" stroke-linecap="round" stroke-linejoin="round" stroke="currentColor"></path><path d="M9.5,11.173c.352-.168,.682-.398,.973-.69l.01-.01c1.381-1.381,1.381-3.619,0-5l-2.175-2.175c-1.381-1.381-3.619-1.381-5,0l-.01,.01c-1.381,1.381-1.381,3.619,0,5l.931,.931" stroke-linecap="round" stroke-linejoin="round"></path></g></svg>
1102    </a>
1103  </div>
1104
1105</div>
1106
1107<p class="mb-4 text-sm text-neutral-500 dark:text-neutral-400">Rails Blocks is built with Tailwind CSS V4+ and a few other dependencies. If you want to use all components, here's how to install all dependencies.</p>
1108<p class="mb-4 text-sm text-neutral-500 dark:text-neutral-400 hidden">If you want to only use a few components, you can install them individually once Tailwind CSS & Stimulus are installed.</p>
1109
1110
1111<div class="mb-6" data-controller="tabs" data-tabs-active-tab-class="bg-neutral-900 text-white shadow-sm dark:bg-white dark:text-neutral-900 dark:shadow-sm hover:ring-neutral-800 dark:hover:bg-neutral-50 dark:hover:ring-white hover:text-white dark:hover:text-neutral-900" data-tabs-inactive-tab-class="hover:bg-white/75 ring-1 ring-transparent hover:ring-white dark:hover:bg-neutral-700 dark:hover:ring-neutral-600 text-neutral-600 dar
1111k:text-neutral-400 hover:text-neutral-900 dark:hover:text-neutral-200" data-tabs-index-value="0">
1112  <!-- Tab Controls -->
1113  <div class="opacity-0 transition-opacity duration-200 relative inline-flex items-center gap-2 justify-center p-1 bg-neutral-100 border border-neutral-200 rounded-xl select-none dark:bg-neutral-800 dark:border-neutral-700 mb-4" data-tabs-target="tabList" role="tablist">
1114    <button class="rounded-lg whitespace-nowrap text-xs font-medium transition flex gap-x-2 items-center justify-center py-2.5 px-3 w-full text-center text-current hover:text-current dark:text-current dark:hover:text-current focus-visible:outline-offset-2 focus-visible:outline-neutral-600 dark:focus-visible:outline-neutral-200" tabindex="0" data-tabs-target="tab" data-action="click->tabs#change:prevent" role="tab">
1115      Quick dependency install
1116    </button>
1117    <button class="rounded-lg whitespace-nowrap text-xs font-medium transition flex gap-x-2 items-center justify-center py-2.5 px-3 w-full text-center text-current hover:text-current dark:text-current dark:hover:text-current focus-visible:outline-offset-2 focus-visible:outline-neutral-600 dar
1117k:focus-visible:outline-neutral-200" tabindex="0" data-tabs-target="tab" data-action="click->tabs#change:prevent" role="tab">
1118      Granular installation
1119    </button>
1120  </div>
1121
1122  <!-- Quick install Panel -->
1123  <div data-tabs-target="panel" role="tabpanel" class="p-4 bg-white dark:bg-neutral-800 border border-black/10 dark:border-white/10 rounded-xl">
1124    
1125<p class="mb-2 text-lg font-semibold text-neutral-900 dark:text-white">Install all dependencies in one go</p>
1126<p class="mb-4 text-sm text-neutral-600 dark:text-neutral-400">
1127  Once you have <a href="https://tailwindcss.com/docs/installation/framework-guides/ruby-on-rails" target="_blank" class="text-neutral-900 dark:text-white underline hover:opacity-80">Tailwind CSS</a> & <a href="https://stimulus.hotwired.dev/reference/installation" target="_blank" class="text-neutral-900 dark:text-white underline hover:opacity-80">Stimulus</a> installed, you can install all dependencies easily:
1128</p>
1129
1130<div class="mb-6" data-controller="tabs" data-tabs-active-tab-class="bg-neutral-900 text-white shadow-sm dark:bg-white dark:text-neutral-900 dark:shadow-sm hover:ring-neutral-800 dark:hover:bg-neutral-50 dark:hover:ring-white hover:text-white dark:hover:text-neutral-900" data-tabs-inactive-tab-class="hover:bg-white/75 ring-1 ring-transparent hover:ring-white dark:hover:bg-neutral-700 dark:hover:ring-neutral-600 text-neutral-600 dar
1130k:text-neutral-400 hover:text-neutral-900 dark:hover:text-neutral-200" data-tabs-index-value="0">
1131  <!-- Tab Controls -->
1132  <div class="opacity-0 transition-opacity duration-200 relative inline-flex items-center gap-2 justify-center p-1 bg-neutral-100 border border-neutral-200 rounded-xl select-none dark:bg-neutral-900/50 dark:border-neutral-700 mb-4" data-tabs-target="tabList" role="tablist">
1133    <button class="rounded-lg whitespace-nowrap text-xs font-medium transition flex gap-x-2 items-center justify-center py-2.5 px-3 w-full text-center text-current hover:text-current dark:text-current dark:hover:text-current focus-visible:outline-offset-2 focus-visible:outline-neutral-600 dark:focus-visible:outline-neutral-200" tabindex="0" data-tabs-target="tab" data-action="click->tabs#change:prevent" role="tab">
1134      Importmap
1135    </button>
1136    <button class="rounded-lg whitespace-nowrap text-xs font-medium transition flex gap-x-2 items-center justify-center py-2.5 px-3 w-full text-center text-current hover:text-current dark:text-current dark:hover:text-current focus-visible:outline-offset-2 focus-visible:outline-neutral-600 dar
1136k:focus-visible:outline-neutral-200" tabindex="0" data-tabs-target="tab" data-action="click->tabs#change:prevent" role="tab">
1137      NPM
1138    </button>
1139    <button class="rounded-lg whitespace-nowrap text-xs font-medium transition flex gap-x-2 items-center justify-center py-2.5 px-3 w-full text-center text-current hover:text-current dark:text-current dark:hover:text-current focus-visible:outline-offset-2 focus-visible:outline-neutral-600 dark:focus-visible:outline-neutral-200" tabindex="0" data-tabs-target="tab" data-action="click->tabs#change:prevent" role="tab">
1140      Yarn
1141    </button>
1142  </div>
1143
1144  <!-- Importmap Panel -->
1145  <div data-tabs-target="panel" role="tabpanel">
1146    <div class="rounded-t-xl overflow-hidden border-t border-x border-[#2D2D2D] max-h-lg">
1147      <div class="p-1 text-sm bg-neutral-900">
1148        <button type="button" class="px-2 pt-2 pb-1.5 text-xs text-neutral-400 dark:text-white/50 flex items-center gap-1" data-controller="clipboard" data-clipboard-text="config/importmap.rb" data-clipboard-success-message-value="Controller Copied" data-clipboard-error-message-value="Copy Failed!" data-clipboard-show-tooltip-value="false" data-clipboard-tooltip-duration-value="1500">
1149          <span data-clipboard-target="copyContent" class="flex items-center gap-1.5">
1150            <svg xmlns="http://www.w3.org/2000/svg" class="size-4" width="18" height="18" viewBox="0 0 18 18"><g fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" stroke="currentColor"><path d="M8.0425 15.75H4.75C3.645 15.75 2.75 14.855 2.75 13.75V3.75C2.75 2.645 3.645 1.75 4.75 1.75H12.75C13.855 1.75 14.75 2.645 14.75 3.75V7.1048"></path> <path d="M5.75 5.75H11.75"></path> <path d="M5.75 8.75H11.75"></path> <path d="M5.75 11.75H8.25"></path> <path d="M13.7959 15.4542L16.9571 12.293C17.3476 11.9025 17.3476 11.2693 16.9571 10.8788L16.3713 10.293C15.9808 9.9025 15.3476 9.9025 14.9571 10.293L11.7959 13.4542L11.0001 16.2501L13.7959 15.4542Z"></path></g></svg>
1151            Add to config/importmap.rb
1152          </span>
1153          <span data-clipboard-target="copiedContent" class="hidden flex items-center gap-1.5 text-green-400">
1154            <svg xmlns="http://www.w3.org/2000/svg" class="size-4" width="18" height="18" viewBox="0 0 18 18"><g fill="currentColor"><path d="M6.75,15h-.002c-.227,0-.442-.104-.583-.281L2.165,9.719c-.259-.324-.207-.795,.117-1.054,.325-.259,.796-.206,1.054,.117l3.418,4.272L14.667,3.278c.261-.322,.732-.373,1.055-.111,.322,.261,.372,.733,.111,1.055L7.333,14.722c-.143,.176-.357,.278-.583,.278Z" fill="currentColor"></path></g></svg>
1155            Add to config/importmap.rb
1156          </span>
1157        </button>
1158      </div>
1159    </div>
1160    <div class="relative">
1161      <pre data-controller="highlight" class="language-ruby !mb-6 !bg-neutral-900 rounded-b-xl overflow-hidden border border-[#2D2D2D]"><code class="language-ruby !bg-neutral-900 max-h-[300px] !overflow-y-scroll !overflow-x-scroll text-sm small-scrollbar">pin &quot;@floating-ui/dom&quot;, to: &quot;https://cdn.jsdelivr.net/npm/@floating-ui/[email protected]/+esm&quot;
1162pin &quot;number-flow&quot;, to: &quot;https://esm.sh/number-flow&quot;
1163pin &quot;number-flow/group&quot;, to: &quot;https://esm.sh/number-flow/group&quot;
1164pin &quot;embla-carousel&quot;, to: &quot;https://cdn.jsdelivr.net/npm/embla-carousel/embla-carousel.esm.js&quot;
1165pin &quot;embla-carousel-wheel-gestures&quot;, to: &quot;https://cdn.jsdelivr.net/npm/embla-carousel-wheel-gestures@latest/+esm&quot;
1166pin &quot;tom-select&quot;, to: &quot;https://cdn.jsdelivr.net/npm/[email protected]/+esm&quot;
1167pin &quot;air-datepicker&quot;, to: &quot;https://esm.sh/[email protected]&quot;
1168pin &quot;air-datepicker/locale/en&quot;, to: &quot;https://esm.sh/[email protected]/locale/en&quot;
1169pin &quot;emoji-mart&quot;, to: &quot;https://cdn.jsdelivr.net/npm/emoji-mart@latest/dist/browser.js&quot;
1170pin &quot;@emoji-mart/data&quot;, to: &quot;https://cdn.jsdelivr.net/npm/@emoji-mart/data@latest/+esm&quot;
1171pin &quot;photoswipe&quot;, to: &quot;https://cdn.jsdelivr.net/npm/photoswipe/dist/photoswipe.esm.js&quot;
1172pin &quot;motion&quot;, to: &quot;https://cdn.jsdelivr.net/npm/motion@latest/+esm&quot;
1173</code></pre>
1174      <button type="button" class="absolute top-2 right-4 flex items-center gap-1.5 rounded-lg px-3.5 py-2 text-sm font-medium shadow-xs focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-600 bg-neutral-800/50 text-neutral-50 hover:bg-neutral-700/50 dark:focus-visible:outline-neutral-200 border border-neutral-700"
1175              data-controller="clipboard analytics"
1176              data-action="click->
1176analytics#track"
1177              data-analytics-event-name-value="installation copied depencency importmap code"
1178              data-clipboard-text="pin &quot;@floating-ui/dom&quot;, to: &quot;https://cdn.jsdelivr.net/npm/@floating-ui/[email protected]/+esm&quot;
1179pin &quot;number-flow&quot;, to: &quot;https://esm.sh/number-flow&quot;
1180pin &quot;number-flow/group&quot;, to: &quot;https://esm.sh/number-flow/group&quot;
1181pin &quot;embla-carousel&quot;, to: &quot;https://cdn.jsdelivr.net/npm/embla-carousel/embla-carousel.esm.js&quot;
1182pin &quot;embla-carousel-wheel-gestures&quot;, to: &quot;https://cdn.jsdelivr.net/npm/embla-carousel-wheel-gestures@latest/+esm&quot;
1183pin &quot;tom-select&quot;, to: &quot;https://cdn.jsdelivr.net/npm/[email protected]/+esm&quot;
1184pin &quot;air-datepicker&quot;, to: &quot;https://esm.sh/[email protected]&quot;
1185pin &quot;air-datepicker/locale/en&quot;, to: &quot;https://esm.sh/[email protected]/locale/en&quot;
1186pin &quot;emoji-mart&quot;, to: &quot;https://cdn.jsdelivr.net/npm/emoji-mart@latest/dist/browser.js&quot;
1187pin &quot;@emoji-mart/data&quot;, to: &quot;https://cdn.jsdelivr.net/npm/@emoji-mart/data@latest/+esm&quot;
1188pin &quot;photoswipe&quot;, to: &quot;https://cdn.jsdelivr.net/npm/photoswipe/dist/photoswipe.esm.js&quot;
1189pin &quot;motion&quot;, to: &quot;https://cdn.jsdelivr.net/npm/motion@latest/+esm&quot;
1190"
1191              data-clipboard-error-message-value="Copy Failed!"
1192              data-clipboard-show-tooltip-value="false"
1193              data-clipboard-tooltip-duration-value="1500">
1194        <span data-clipboard-target="copyContent" class="flex items-center gap-1.5">
1195          <svg xmlns="http://www.w3.org/2000/svg" class="size-4" width="18" height="18" viewBox="0 0 18 18"><g fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" stroke="currentColor"><rect x="1.75" y="1.75" width="11" height="11" rx="2" ry="2" transform="translate(14.5 14.5) rotate(-180)"></rect><path d="M15.199,6.002l1.029,6.924c.162,1.093-.592,2.11-1.684,2.272l-6.924,1.029c-.933,.139-1.81-.39-2.148-1.228"></path><line x1="7.25" y1="9.75" x2="7.25" y2="4.75"></line><line x1="4.75" y1="7.25" x2="9.75" y2="7.25"></line></g></svg>
1196          Copy
1197        </span>
1198        <span data-clipboard-target="copiedContent" class="hidden flex items-center gap-1.5 text-green-400">
1199          <svg xmlns="http://www.w3.org/2000/svg" class="size-4" width="18" height="18" viewBox="0 0 18 18"><g fill="currentColor"><path d="M6.75,15h-.002c-.227,0-.442-.104-.583-.281L2.165,9.719c-.259-.324-.207-.795,.117-1.054,.325-.259,.796-.206,1.054,.117l3.418,4.272L14.667,3.278c.261-.322,.732-.373,1.055-.111,.322,.261,.372,.733,.111,1.055L7.333,14.722c-.143,.176-.357,.278-.583,.278Z" fill="currentColor"></path></g></svg>
1200          Copied!
1201        </span>
1202      </button>
1203    </div>
1204  </div>
1205
1206  <!-- NPM Panel -->
1207  <div data-tabs-target="panel" role="tabpanel">
1208    <div class="rounded-t-xl overflow-hidden border-t border-x border-[#2D2D2D] max-h-lg">
1209      <div class="p-1 text-sm bg-neutral-900">
1210        <div class="px-2 pt-2 pb-1.5 text-xs text-neutral-400 dark:text-white/50 flex items-center gap-1">
1211          <svg xmlns="http://www.w3.org/2000/svg" class="size-4" width="18" height="18" viewBox="0 0 18 18"><g fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" stroke="currentColor"><rect x="2.75" y="2.75" width="12.5" height="12.5" rx="2" ry="2"></rect><line x1="9.75" y1="12.25" x2="12.25" y2="12.25"></line><polyline points="5.75 12.25 8.25 9.75 5.75 7.25"></polyline></g></svg>
1212          Terminal
1213        </div>
1214      </div>
1215    </div>
1216    <div class="relative">
1217      <pre data-controller="highlight" class="language-bash !mb-6 !bg-neutral-900 rounded-b-xl overflow-hidden border border-[#2D2D2D]"><code class="language-bash !bg-neutral-900 max-h-[300px] !overflow-y-scroll !overflow-x-scroll text-sm small-scrollbar">npm install @floating-ui/dom number-flow embla-carousel embla-carousel-wheel-gestures tom-select air-datepicker emoji-mart @emoji-mart/data photoswipe motion</code></pre>
1218      <button type="button" class="absolute top-2 right-4 flex items-center gap-1.5 rounded-lg px-3.5 py-2 text-sm font-medium shadow-xs focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-600 bg-neutral-800/50 text-neutral-50 hover:bg-neutral-700/50 dark:focus-visible:outline-neutral-200 border border-neutral-700"
1219              data-controller="clipboard analytics"
1220              data-action="click->
1220analytics#track"
1221              data-analytics-event-name-value="installation copied depencency npm code"
1222              data-clipboard-text="npm install @floating-ui/dom number-flow embla-carousel embla-carousel-wheel-gestures tom-select air-datepicker emoji-mart @emoji-mart/data photoswipe motion"
1223              data-clipboard-error-message-value="Copy Failed!"
1224              data-clipboard-show-tooltip-value="false"
1225              data-clipboard-tooltip-duration-value="1500">
1226        <span data-clipboard-target="copyContent" class="flex items-center gap-1.5">
1227          <svg xmlns="http://www.w3.org/2000/svg" class="size-4" width="18" height="18" viewBox="0 0 18 18"><g fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" stroke="currentColor"><rect x="1.75" y="1.75" width="11" height="11" rx="2" ry="2" transform="translate(14.5 14.5) rotate(-180)"></rect><path d="M15.199,6.002l1.029,6.924c.162,1.093-.592,2.11-1.684,2.272l-6.924,1.029c-.933,.139-1.81-.39-2.148-1.228"></path><line x1="7.25" y1="9.75" x2="7.25" y2="4.75"></line><line x1="4.75" y1="7.25" x2="9.75" y2="7.25"></line></g></svg>
1228          Copy
1229        </span>
1230        <span data-clipboard-target="copiedContent" class="hidden flex items-center gap-1.5 text-green-400">
1231          <svg xmlns="http://www.w3.org/2000/svg" class="size-4" width="18" height="18" viewBox="0 0 18 18"><g fill="currentColor"><path d="M6.75,15h-.002c-.227,0-.442-.104-.583-.281L2.165,9.719c-.259-.324-.207-.795,.117-1.054,.325-.259,.796-.206,1.054,.117l3.418,4.272L14.667,3.278c.261-.322,.732-.373,1.055-.111,.322,.261,.372,.733,.111,1.055L7.333,14.722c-.143,.176-.357,.278-.583,.278Z" fill="currentColor"></path></g></svg>
1232          Copied!
1233        </span>
1234      </button>
1235    </div>
1236  </div>
1237
1238  <!-- Yarn Panel -->
1239  <div data-tabs-target="panel" role="tabpanel">
1240    <div class="rounded-t-xl overflow-hidden border-t border-x border-[#2D2D2D] max-h-lg">
1241      <div class="p-1 text-sm bg-neutral-900">
1242        <div class="px-2 pt-2 pb-1.5 text-xs text-neutral-400 dark:text-white/50 flex items-center gap-1">
1243          <svg xmlns="http://www.w3.org/2000/svg" class="size-4" width="18" height="18" viewBox="0 0 18 18"><g fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" stroke="currentColor"><rect x="2.75" y="2.75" width="12.5" height="12.5" rx="2" ry="2"></rect><line x1="9.75" y1="12.25" x2="12.25" y2="12.25"></line><polyline points="5.75 12.25 8.25 9.75 5.75 7.25"></polyline></g></svg>
1244          Terminal
1245        </div>
1246      </div>
1247    </div>
1248    <div class="relative">
1249      <pre data-controller="highlight" class="language-bash !mb-6 !bg-neutral-900 rounded-b-xl overflow-hidden border border-[#2D2D2D]"><code class="language-bash !bg-neutral-900 max-h-[300px] !overflow-y-scroll !overflow-x-scroll text-sm small-scrollbar">yarn add @floating-ui/dom number-flow embla-carousel embla-carousel-wheel-gestures tom-select air-datepicker emoji-mart @emoji-mart/data photoswipe motion</code></pre>
1250      <button type="button" class="absolute top-2 right-4 flex items-center gap-1.5 rounded-lg px-3.5 py-2 text-sm font-medium shadow-xs focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-600 bg-neutral-800/50 text-neutral-50 hover:bg-neutral-700/50 dark:focus-visible:outline-neutral-200 border border-neutral-700"
1251              data-controller="clipboard analytics"
1252              data-action="click->analytics#track"
1253              data-analytics-event-name-value="installation copied depencency yarn code"
1254              data-clipboard-text="yarn add @floating-ui/dom number-flow embla-carousel embla-carousel-wheel-gestures tom-select air-datepicker emoji-mart @emoji-mart/data photoswipe motion"
1255              data-clipboard-error-message-value="Copy Failed!"
1256              data-clipboard-show-tooltip-value="false"
1257              data-clipboard-tooltip-duration-value="1500">
1258        <span data-clipboard-target="copyContent" class="flex items-center gap-1.5">
1259          <svg xmlns="http://www.w3.org/2000/svg" class="size-4" width="18" height="18" viewBox="0 0 18 18"><g fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" stroke="currentColor"><rect x="1.75" y="1.75" width="11" height="11" rx="2" ry="2" transform="translate(14.5 14.5) rotate(-180)"></rect><path d="M15.199,6.002l1.029,6.924c.162,1.093-.592,2.11-1.684,2.272l-6.924,1.029c-.933,.139-1.81-.39-2.148-1.228"></path><line x1="7.25" y1="9.75" x2="7.25" y2="4.75"></line><line x1="4.75" y1="7.25" x2="9.75" y2="7.25"></line></g></svg>
1260          Copy
1261        </span>
1262        <span data-clipboard-target="copiedContent" class="hidden flex items-center gap-1.5 text-green-400">
1263          <svg xmlns="http://www.w3.org/2000/svg" class="size-4" width="18" height="18" viewBox="0 0 18 18"><g fill="currentColor"><path d="M6.75,15h-.002c-.227,0-.442-.104-.583-.281L2.165,9.719c-.259-.324-.207-.795,.117-1.054,.325-.259,.796-.206,1.054,.117l3.418,4.272L14.667,3.278c.261-.322,.732-.373,1.055-.111,.322,.261,.372,.733,.111,1.055L7.333,14.722c-.143,.176-.357,.278-.583,.278Z" fill="currentColor"></path></g></svg>
1264          Copied!
1265        </span>
1266      </button>
1267    </div>
1268  </div>
1269</div>
1270
1271<p class="mb-4 text-sm text-neutral-500 dark:text-neutral-400">And add this to your <code class="code-inline-text">&lt;head&gt;</code> HTML tag:</p>
1272
1273<div class="mt-4 rounded-t-xl overflow-hidden border-t border-x border-[#2D2D2D] max-h-lg">
1274  <div class="p-1 text-sm bg-neutral-900">
1275    <button type="button" class="px-2 pt-2 pb-1.5 text-xs text-neutral-400 dark:text-white/50 flex items-center gap-1"
1276          data-controller="clipboard"
1277          data-clipboard-text="application.html.erb"
1278          data-clipboard-success-message-value="Controller Copied"
1279          data-clipboard-error-message-value="Copy Failed!"
1280          data-clipboard-show-tooltip-value="false"
1281          data-clipboard-tooltip-duration-value="1500">
1282      <span data-clipboard-target="copyContent" class="flex items-center gap-1.5">
1283        <svg xmlns="http://www.w3.org/2000/svg" class="size-4" width="18" height="18" viewBox="0 0 18 18"><g fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" stroke="currentColor"><path d="M8.0425 15.75H4.75C3.645 15.75 2.75 14.855 2.75 13.75V3.75C2.75 2.645 3.645 1.75 4.75 1.75H12.75C13.855 1.75 14.75 2.645 14.75 3.75V7.1048"></path> <path d="M5.75 5.75H11.75"></path> <path d="M5.75 8.75H11.75"></path> <path d="M5.75 11.75H8.25"></path> <path d="M13.7959 15.4542L16.9571 12.293C17.3476 11.9025 17.3476 11.2693 16.9571 10.8788L16.3713 10.293C15.9808 9.9025 15.3476 9.9025 14.9571 10.293L11.7959 13.4542L11.0001 16.2501L13.7959 15.4542Z"></path></g></svg>
1284        application.html.erb
1285      </span>
1286      <span data-clipboard-target="copiedContent" class="hidden flex items-center gap-1.5 text-green-400">
1287        <svg xmlns="http://www.w3.org/2000/svg" class="size-4" width="18" height="18" viewBox="0 0 18 18"><g fill="currentColor"><path d="M6.75,15h-.002c-.227,0-.442-.104-.583-.281L2.165,9.719c-.259-.324-.207-.795,.117-1.054,.325-.259,.796-.206,1.054,.117l3.418,4.272L14.667,3.278c.261-.322,.732-.373,1.055-.111,.322,.261,.372,.733,.111,1.055L7.333,14.722c-.143,.176-.357,.278-.583,.278Z" fill="currentColor"></path></g></svg>
1288        application.html.erb
1289      </span>
1290    </button>
1291  </div>
1292</div>
1293<div class="relative">
1294  <pre data-controller="highlight" class="language-erb !mb-4 !bg-neutral-900 rounded-b-xl overflow-hidden border border-[#2D2D2D]"><code class="language-erb !bg-neutral-900 max-h-[300px] !overflow-y-scroll !overflow-x-scroll text-sm small-scrollbar">&lt;!-- Shoelace --&gt;
1295&lt;script type=&quot;module&quot; src=&quot;https://cdn.jsdelivr.net/npm/@shoelace-style/[email protected]/cdn/components/color-picker/color-picker.js&quot;&gt;&lt;/script&gt;
1296&lt;link
1297  rel=&quot;stylesheet&quot;
1298  href=&quot;https://cdn.jsdelivr.net/npm/@shoelace-style/[email protected]/cdn/themes/light.css&quot;
1299/&gt;
1300&lt;link
1301  rel=&quot;stylesheet&quot;
1302  href=&quot;https://cdn.jsdelivr.net/npm/@shoelace-style/[email protected]/cdn/themes/dark.css&quot;
1303/&gt;
1304
1305&lt;!-- Tom Select --&gt;
1306&lt;link href=&quot;https://cdn.jsdelivr.net/npm/[email protected]/dist/css/tom-select.css&quot; rel=&quot;stylesheet&quot;&gt;
1307
1308&lt;!-- Air Datepicker --&gt;
1309&lt;link rel=&quot;stylesheet&quot; href=&quot;https://cdn.jsdelivr.net/npm/[email protected]/air-datepicker.min.css&quot;&gt;
1310
1311&lt;!-- Photoswipe --&gt;
1312&lt;link rel=&quot;stylesheet&quot; href=&quot;https://cdn.jsdelivr.net/npm/photoswipe/dist/photoswipe.css&quot;&gt;
1313</code></pre>
1314   <button type="button" class="absolute top-2 right-4 flex items-center gap-1.5 rounded-lg px-3.5 py-2 text-sm font-medium shadow-xs focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-600 bg-neutral-800/50 text-neutral-50 hover:bg-neutral-700/50 dark:focus-visible:outline-neutral-200 border border-neutral-700"
1315          data-controller="clipboard analytics"
1316          data-action="click->
1316analytics#track"
1317          data-analytics-event-name-value="installation copied depencency css imports copy"
1318          data-clipboard-text="&lt;!-- Shoelace --&gt;
1319&lt;script type=&quot;module&quot; src=&quot;https://cdn.jsdelivr.net/npm/@shoelace-style/[email protected]/cdn/components/color-picker/color-picker.js&quot;&gt;&lt;/script&gt;
1320&lt;link
1321  rel=&quot;stylesheet&quot;
1322  href=&quot;https://cdn.jsdelivr.net/npm/@shoelace-style/[email protected]/cdn/themes/light.css&quot;
1323/&gt;
1324&lt;link
1325  rel=&quot;stylesheet&quot;
1326  href=&quot;https://cdn.jsdelivr.net/npm/@shoelace-style/[email protected]/cdn/themes/dark.css&quot;
1327/&gt;
1328
1329&lt;!-- Tom Select --&gt;
1330&lt;link href=&quot;https://cdn.jsdelivr.net/npm/[email protected]/dist/css/tom-select.css&quot; rel=&quot;stylesheet&quot;&gt;
1331
1332&lt;!-- Air Datepicker --&gt;
1333&lt;link rel=&quot;stylesheet&quot; href=&quot;https://cdn.jsdelivr.net/npm/[email protected]/air-datepicker.min.css&quot;&gt;
1334
1335&lt;!-- Photoswipe --&gt;
1336&lt;link rel=&quot;stylesheet&quot; href=&quot;https://cdn.jsdelivr.net/npm/photoswipe/dist/photoswipe.css&quot;&gt;
1337"
1338          data-clipboard-success-message-value="CSS Copied"
1339          data-clipboard-error-message-value="Copy Failed!"
1340          data-clipboard-show-tooltip-value="false"
1341          data-clipboard-tooltip-duration-value="1500">
1342    <span data-clipboard-target="copyContent" class="flex items-center gap-1.5">
1343      <svg xmlns="http://www.w3.org/2000/svg" class="size-4" width="18" height="18" viewBox="0 0 18 18"><g fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" stroke="currentColor"><rect x="1.75" y="1.75" width="11" height="11" rx="2" ry="2" transform="translate(14.5 14.5) rotate(-180)"></rect><path d="M15.199,6.002l1.029,6.924c.162,1.093-.592,2.11-1.684,2.272l-6.924,1.029c-.933,.139-1.81-.39-2.148-1.228"></path><line x1="7.25" y1="9.75" x2="7.25" y2="4.75"></line><line x1="4.75" y1="7.25" x2="9.75" y2="7.25"></line></g></svg>
1344      Copy
1345    </span>
1346    <span data-clipboard-target="copiedContent" class="hidden flex items-center gap-1.5 text-green-400">
1347      <svg xmlns="http://www.w3.org/2000/svg" class="size-4" width="18" height="18" viewBox="0 0 18 18"><g fill="currentColor"><path d="M6.75,15h-.002c-.227,0-.442-.104-.583-.281L2.165,9.719c-.259-.324-.207-.795,.117-1.054,.325-.259,.796-.206,1.054,.117l3.418,4.272L14.667,3.278c.261-.322,.732-.373,1.055-.111,.322,.261,.372,.733,.111,1.055L7.333,14.722c-.143,.176-.357,.278-.583,.278Z" fill="currentColor"></path></g></svg>
1348      Copied!
1349    </span>
1350  </button>
1351</div>
1352
1353  </div>
1354
1355  <!-- Full install Panel -->
1356  <div data-tabs-target="panel" role="tabpanel" class="p-4 bg-white dark:bg-neutral-800 border border-black/10 dark:border-white/10 rounded-xl">
1357    <p class="mb-2 text-lg font-semibold text-neutral-900 dark:text-white">Install each dependency individually</p>
1358<p class="mb-4 text-sm text-neutral-600 dark:text-neutral-400">
1359  If you want to install each dependency individually, you can do so here:
1360</p>
1361<div class="w-full flex flex-col gap-2" data-controller="accordion">
1362  <div data-accordion-target="item" data-state="closed"class="overflow-hidden bg-neutral-100/60 dark:bg-neutral-700/75 border border-black/10 dark:border-white/10 items-center justify-between font-semibold transition-all hover:bg-neutral-100 dark:hover:bg-neutral-700/50 rounded-lg">
1363    <p data-state="closed" class="flex text-base font-semibold mt-0 mb-0">
1364      <button type="button" data-accordion-target="trigger" data-action="click->accordion#toggle" aria-controls="accordion-content-0" aria-expanded="false" data-state="closed" id="accordion-trigger-0" class="w-full rounded-lg flex flex-1 p-3 items-center justify-between font-medium transition-all [&[data-state=open]>svg]:rotate-180 focus:outline-neutral-700 dark:focus:outline-white focus:-outline-offset-1">
1365        <span class="flex items-center gap-2">
1366          1.1. Tailwind CSS
1367          <svg viewBox="0 0 35 21" class="size-3.5" fill="none"><path class="fill-sky-400" d="M17.183 0C12.6 0 9.737 2.291 8.59 6.873c1.719-2.29 3.723-3.15 6.014-2.577 1.307.326 2.242 1.274 3.275 2.324 1.685 1.71 3.635 3.689 7.894 3.689 4.582 0 7.445-2.291 8.591-6.872-1.718 2.29-3.723 3.15-6.013 2.576-1.308-.326-2.243-1.274-3.276-2.324C23.39 1.98 21.44 0 17.183 0ZM8.59 10.309C4.01 10.309 1.145 12.6 0 17.182c1.718-2.291 3.723-3.15 6.013-2.577 1.308.326 2.243 1.274 3.276 2.324 1.685 1.71 3.635 3.689 7.894 3.689 4.582 0 7.445-2.29 8.59-6.872-1.718 2.29-3.722 3.15-6.013 2.577-1.307-.327-2.242-1.276-3.276-2.325-1.684-1.71-3.634-3.689-7.893-3.689Z"></path></svg>
1368          (required)
1369        </span>
1370        <svg xmlns="http://www.w3.org/2000/svg" data-accordion-target="icon" class="size-4 shrink-0 transition-transform duration-300" width="18" height="18" viewBox="0 0 18 18"><g fill="currentColor"><path d="M8.99999 13.5C8.80799 13.5 8.61599 13.4271 8.46999 13.2801L2.21999 7.03005C1.92699 6.73705 1.92699 6.26202 2.21999 5.96902C2.51299 5.67602 2.98799 5.67602 3.28099 5.96902L9.00099 11.689L14.721 5.96902C15.014 5.67602 15.489 5.67602 15.782 5.96902C16.075 6.26202 16.075 6.73705 15.782 7.03005L9.53199 13.2801C9.38599 13.4261 9.19399 13.5 9.00199 13.5H8.99999Z"></path></g></svg>
1371      </button>
1372    </p>
1373    <div data-accordion-target="content" data-state="closed" id="accordion-content-0" role="region" aria-labelledby="accordion-trigger-0" class="grid transition-[grid-template-rows] duration-300 ease-in-out data-[state=open]:grid-rows-[1fr] data-[state=closed]:grid-rows-[0fr]" hidden>
1374      <div class="overflow-hidden min-h-0">
1375        <div class="opacity-0 transition-opacity duration-300 data-[state=open]:opacity-100" data-state="closed">
1376          <p class="px-4 py-3 bg-white dark:bg-neutral-700/50 text-sm font-normal">
1377            Tailwind CSS is a utility-first CSS framework that allows you to build custom designs inside your views easily. Go to the <a href="https://tailwindcss.com/docs/installation/framework-guides/ruby-on-rails" target="_blank" class="text-neutral-900 dark:text-white underline hover:opacity-80">tailwindcss documentation</a> and follow the instructions to install it in your Rails application.
1378          </p>
1379        </div>
1380      </div>
1381    </div>
1382  </div>
1383
1384  <div data-accordion-target="item" data-state="closed"class="overflow-hidden bg-neutral-100/60 dark:bg-neutral-700/75 border border-black/10 dark:border-white/10 items-center justify-between font-semibold transition-all hover:bg-neutral-100 dark:hover:bg-neutral-700/50 rounded-lg">
1385    <p data-state="closed" class="flex text-base font-semibold mt-0 mb-0">
1386      <button type="button" data-accordion-target="trigger" data-action="click->accordion#toggle" aria-controls="accordion-content-1" aria-expanded="false" data-state="closed" id="accordion-trigger-1" class="w-full rounded-lg flex flex-1 p-3 items-center justify-between font-medium transition-all [&[data-state=open]>svg]:rotate-180 focus:outline-neutral-700 dark:focus:outline-white focus:-outline-offset-1">
1387        <span class="flex items-center gap-2">
1388          1.2. Stimulus
1389          <svg class="size-3.5 rounded-sm" width="60" height="60" viewBox="0 0 60 60" xmlns="http://www.w3.org/2000/svg">
1390            <g class="fill-neutral-800 dark:fill-white">
1391              <path d="M1.76 1.85885e-08H58.2399C58.7016 -6.70275e-05 59.1447 0.181237 59.474 0.50484C59.8032 0.828443 59.9921 1.26844 59.9999 1.73V7.37823C59.9999 7.87239 59.9999 8.11947 59.9038 8.30822C59.8192 8.47424 59.6842 8.60923 59.5182 8.69382C59.3294 8.78999 59.0823 8.78999 58.5882 8.78999H45.92C44.7722 8.83556 43.6502 9.14343 42.64 9.68999L15.64 25.55C14.6261 26.0964 13.5008 26.4042 12.35 26.45H1.41176C0.9176 26.45 0.670518 26.45 0.481773 26.3538C0.315747 26.2692 0.180765 26.1342 0.0961706 25.9682C0 25.7795 0 25.5324 0 25.0382V17.2717C0 16.7776 0 16.5305 0.0961706 16.3418C0.180765 16.1757 0.315747 16.0408 0.481773 15.9562C0.670518 15.86 0.9176 15.86 1.41176 15.86H12.35C13.5001 15.9106 14.6243 16.2181 15.64 16.76L18.64 18.51C19.1037 18.7494 19.6181 18.8743 20.14 18.8743C20.6619 18.8743 21.1762 18.7494 21.64 18.51L25.48 16.25C25.6438 16.1661 25.7812 16.0386 25.8772 15.8815C25.9732 15.7245 26.024 15.544 26.024 15.36C26.024 15.1759 25.9732 14.9955 25.8772 14.8384C25.7812 14.6814 25.6438 14.5539 25.48 14.47L17.4 9.71999C16.3879 9.17798 15.2669 8.8704 14.12 8.81999H1.41176C0.9176 8.81999 0.670518 8.81999 0.481773 8.72382C0.315747 8.63923 0.180765 8.50424 0.0961706 8.33822C0 8.14947 0 7.90239 0 7.40823V1.76C0 1.29322 0.185428 0.845555 0.515492 0.515492C0.845555 0.185428 1.29322 1.85885e-08 1.76 1.85885e-08Z"></path>
1392              <path d="M47.65 15.8799C46.4998 15.9305 45.3757 16.238 44.36 16.7799L17.36 32.6499C16.3479 33.1919 15.2269 33.4994 14.08 33.5499H1.41176C0.9176 33.5499 0.670518 33.5499 0.481773 33.646C0.315747 33.7306 0.180765 33.8656 0.0961706 34.0316C0 34.2204 0 34.4674 0 34.9616V42.7281C0 43.2222 0 43.4693 0.0961706 43.6581C0.180765 43.8241 0.315747 43.9591 0.481773 44.0437C0.670518 44.1398 0.9176 44.1398 1.41176 44.1398H12.35C13.5001 44.0892 14.6243 43.7817 15.64 43.2398L42.64 27.3699C43.652 26.8278 44.773 26.5203 45.92 26.4699H58.5882C59.0823 26.4699 59.3294 26.4699 59.5182 26.3737C59.6842 26.2891 59.8192 26.1541 59.9038 25.9881C59.9999 25.7993 59.9999 25.5523 59.9999 25.0581V17.2916C59.9999 16.7975 59.9999 16.5504 59.9038 16.3616C59.8192 16.1956 59.6842 16.0606 59.5182 15.976C59.3294 15.8799 59.0823 15.8799 58.5882 15.8799H47.65Z"></path>
1393              <path d="M47.65 33.56C46.4998 33.6106 45.3757 33.9182 44.36 34.46L17.36 50.32C16.3497 50.8666 15.2277 51.1744 14.08 51.22H1.41176C0.9176 51.22 0.670518 51.22 0.481773 51.3162C0.315747 51.4008 0.180765 51.5358 0.0961706 51.7018C0 51.8905 0 52.1376 0 52.6318V58.28C0.0129646 58.739 0.203789 59.175 0.532182 59.4959C0.860576 59.8168 1.30083 59.9976 1.76 60H58.2399C58.7042 59.9974 59.1488 59.8125 59.4781 59.4852C59.8073 59.1578 59.9947 58.7142 59.9999 58.25V52.6018C59.9999 52.1076 59.9999 51.8605 59.9038 51.6718C59.8192 51.5058 59.6842 51.3708 59.5182 51.2862C59.3294 51.19 59.0823 51.19 58.5882 51.19H45.88C44.7322 51.1444 43.6102 50.8366 42.6 50.29L34.52 45.55C34.3536 45.4671 34.2136 45.3394 34.1157 45.1813C34.0179 45.0232 33.966 44.8409 33.966 44.655C33.966 44.4691 34.0179 44.2868 34.1157 44.1287C34.2136 43.9706 34.3536 43.843 34.52 43.76L38.36 41.51C38.8237 41.2706 39.3381 41.1457 39.86 41.1457C40.3819 41.1457 40.8962 41.2706 41.36 41.51L44.36 43.25C45.3739 43.7964 46.4991 44.1042 47.65 44.15H58.5882C59.0823 44.15 59.3294 44.15 59.5182 44.0538C59.6842 43.9693 59.8192 43.8343 59.9038 43.6682C59.9999 43.4795 59.9999 43.2324 59.9999 42.7383V34.9718C59.9999 34.4776 59.9999 34.2305 59.9038 34.0418C59.8192 33.8758 59.6842 33.7408 59.5182 33.6562C59.3294 33.56 59.0823 33.56 58.5882 33.56H47.65Z"></path>
1394            </g>
1395          </svg>
1396          (required)
1397        </span>
1398        <svg xmlns="http://www.w3.org/2000/svg" data-accordion-target="icon" class="size-4 shrink-0 transition-transform duration-300" width="18" height="18" viewBox="0 0 18 18"><g fill="currentColor"><path d="M8.99999 13.5C8.80799 13.5 8.61599 13.4271 8.46999 13.2801L2.21999 7.03005C1.92699 6.73705 1.92699 6.26202 2.21999 5.96902C2.51299 5.67602 2.98799 5.67602 3.28099 5.96902L9.00099 11.689L14.721 5.96902C15.014 5.67602 15.489 5.67602 15.782 5.96902C16.075 6.26202 16.075 6.73705 15.782 7.03005L9.53199 13.2801C9.38599 13.4261 9.19399 13.5 9.00199 13.5H8.99999Z"></path></g></svg>
1399      </button>
1400    </p>
1401    <div data-accordion-target="content" data-state="closed" id="accordion-content-1" role="region" aria-labelledby="accordion-trigger-1" class="grid transition-[grid-template-rows] duration-300 ease-in-out data-[state=open]:grid-rows-[1fr] data-[state=closed]:grid-rows-[0fr]" hidden>
1402      <div class="overflow-hidden min-h-0">
1403        <div class="opacity-0 transition-opacity duration-300 data-[state=open]:opacity-100" data-state="closed">
1404          <p class="px-4 py-3 bg-white dark:bg-neutral-700/50 text-sm font-normal">
1405            Stimulus is a lightweight JavaScript framework for making your Rails application interactive easily. It should normally already be installed in your Rails v7+ a
1405pplication by default.
1406          </p>
1407        </div>
1408      </div>
1409    </div>
1410  </div>
1411
1412  <div data-accordion-target="item" data-state="closed"class="overflow-hidden bg-neutral-100/60 dark:bg-neutral-700/75 border border-black/10 dark:border-white/10 items-center justify-between font-semibold transition-all hover:bg-neutral-100 dark:hover:bg-neutral-700/50 rounded-lg">
1413    <p data-state="closed" class="flex text-base font-semibold mt-0 mb-0">
1414      <button type="button" data-accordion-target="trigger" data-action="click->accordion#toggle" aria-controls="accordion-content-2" aria-expanded="false" data-state="closed" id="accordion-trigger-2" class="w-full rounded-lg flex flex-1 p-3 items-center justify-between font-medium transition-all [&[data-state=open]>svg]:rotate-180 focus:outline-neutral-700 dark:focus:outline-white focus:-outline-offset-1">
1415        <span class="flex items-center gap-2">
1416          1.3. Floating UI
1417          <img alt="Floating UI" class="size-3.5" src="/assets/floating-ui-logo-bae347c136bfb528676d22bc47bd65d76062683c0849f2da6388092d835d3078.webp" />
1418        </span>
1419        <svg xmlns="http://www.w3.org/2000/svg" data-accordion-target="icon" class="size-4 shrink-0 transition-transform duration-300" width="18" height="18" viewBox="0 0 18 18"><g fill="currentColor"><path d="M8.99999 13.5C8.80799 13.5 8.61599 13.4271 8.46999 13.2801L2.21999 7.03005C1.92699 6.73705 1.92699 6.26202 2.21999 5.96902C2.51299 5.67602 2.98799 5.67602 3.28099 5.96902L9.00099 11.689L14.721 5.96902C15.014 5.67602 15.489 5.67602 15.782 5.96902C16.075 6.26202 16.075 6.73705 15.782 7.03005L9.53199 13.2801C9.38599 13.4261 9.19399 13.5 9.00199 13.5H8.99999Z"></path></g></svg>
1420      </button>
1421    </p>
1422    <div data-accordion-target="content" data-state="closed" id="accordion-content-2" role="region" aria-labelledby="accordion-trigger-2" class="grid transition-[grid-template-rows] duration-300 ease-in-out data-[state=open]:grid-rows-[1fr] data-[state=closed]:grid-rows-[0fr]" hidden>
1423      <div class="overflow-hidden min-h-0">
1424        <div class="opacity-0 transition-opacity duration-300 data-[state=open]:opacity-100" data-state="closed">
1425          <p class="px-4 py-3 bg-white dark:bg-neutral-700/50 text-sm font-normal">
1426            <a href="https://floating-ui.com/" class="text-neutral-900 dark:text-white underline hover:opacity-80" target="_blank">Floating UI</a> is a library for creating floating elements in your application and positioning them. It is used to create the dropdowns, popovers, tooltips, and a few other Rails Blocks components.
1427          </p>
1428          <div class="px-4 py-3 bg-white dark:bg-neutral-700/50 text-sm font-normal">
1429            <div class="mb-6" data-controller="tabs" data-tabs-active-tab-class="bg-neutral-900 text-white shadow-sm dark:bg-white dark:text-neutral-900 dark:shadow-sm hover:ring-neutral-800 dark:hover:bg-neutral-50 dark:hover:ring-white hover:text-white dark:hover:text-neutral-900" data-tabs-inactive-tab-class="hover:bg-white/75 ring-1 ring-transparent hover:ring-white dark:hover:bg-neutral-700 dark:hover:ring-neutral-600 text-neutral-600 dar
1429k:text-neutral-400 hover:text-neutral-900 dark:hover:text-neutral-200" data-tabs-index-value="0">
1430  <!-- Tab Controls -->
1431  <div class="opacity-0 transition-opacity duration-200 relative inline-grid items-center gap-2 justify-center grid-cols-3 p-1 mb-4 bg-neutral-100 border border-neutral-200 rounded-xl select-none dark:bg-neutral-800 dark:border-neutral-700" data-tabs-target="tabList" role="tablist">
1432    <button class="rounded-lg whitespace-nowrap text-xs font-medium transition flex gap-x-2 items-center justify-center py-2.5 px-3 w-full text-center text-current hover:text-current dark:text-current dark:hover:text-current focus-visible:outline-offset-2 focus-visible:outline-neutral-600 dark:focus-visible:outline-neutral-200" tabindex="0" data-tabs-target="tab" data-action="click->tabs#change:prevent" role="tab">
1433      Importmap
1434    </button>
1435    <button class="rounded-lg whitespace-nowrap text-xs font-medium transition flex gap-x-2 items-center justify-center py-2.5 px-3 w-full text-center text-current hover:text-current dark:text-current dark:hover:text-current focus-visible:outline-offset-2 focus-visible:outline-neutral-600 dar
1435k:focus-visible:outline-neutral-200" tabindex="0" data-tabs-target="tab" data-action="click->tabs#change:prevent" role="tab">
1436      NPM
1437    </button>
1438    <button class="rounded-lg whitespace-nowrap text-xs font-medium transition flex gap-x-2 items-center justify-center py-2.5 px-3 w-full text-center text-current hover:text-current dark:text-current dark:hover:text-current focus-visible:outline-offset-2 focus-visible:outline-neutral-600 dark:focus-visible:outline-neutral-200" tabindex="0" data-tabs-target="tab" data-action="click->tabs#change:prevent" role="tab">
1439      Yarn
1440    </button>
1441  </div>
1442
1443  <!-- Importmap Panel -->
1444  <div data-tabs-target="panel" role="tabpanel">
1445    <div class="rounded-t-xl overflow-hidden border-t border-x border-[#2D2D2D] max-h-lg">
1446      <div class="p-1 text-sm bg-neutral-900">
1447        <button type="button" class="px-2 pt-2 pb-1.5 text-xs text-neutral-400 dark:text-white/50 flex items-center gap-1" data-controller="clipboard" data-clipboard-text="config/importmap.rb" data-clipboard-success-message-value="Controller Copied" data-clipboard-error-message-value="Copy Failed!" data-clipboard-show-tooltip-value="false" data-clipboard-tooltip-duration-value="1500">
1448          <span data-clipboard-target="copyContent" class="flex items-center gap-1.5">
1449            <svg xmlns="http://www.w3.org/2000/svg" class="size-4" width="18" height="18" viewBox="0 0 18 18"><g fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" stroke="currentColor"><path d="M8.0425 15.75H4.75C3.645 15.75 2.75 14.855 2.75 13.75V3.75C2.75 2.645 3.645 1.75 4.75 1.75H12.75C13.855 1.75 14.75 2.645 14.75 3.75V7.1048"></path> <path d="M5.75 5.75H11.75"></path> <path d="M5.75 8.75H11.75"></path> <path d="M5.75 11.75H8.25"></path> <path d="M13.7959 15.4542L16.9571 12.293C17.3476 11.9025 17.3476 11.2693 16.9571 10.8788L16.3713 10.293C15.9808 9.9025 15.3476 9.9025 14.9571 10.293L11.7959 13.4542L11.0001 16.2501L13.7959 15.4542Z"></path></g></svg>
1450            Add to config/importmap.rb
1451          </span>
1452          <span data-clipboard-target="copiedContent" class="hidden flex items-center gap-1.5 text-green-400">
1453            <svg xmlns="http://www.w3.org/2000/svg" class="size-4" width="18" height="18" viewBox="0 0 18 18"><g fill="currentColor"><path d="M6.75,15h-.002c-.227,0-.442-.104-.583-.281L2.165,9.719c-.259-.324-.207-.795,.117-1.054,.325-.259,.796-.206,1.054,.117l3.418,4.272L14.667,3.278c.261-.322,.732-.373,1.055-.111,.322,.261,.372,.733,.111,1.055L7.333,14.722c-.143,.176-.357,.278-.583,.278Z" fill="currentColor"></path></g></svg>
1454            Add to config/importmap.rb
1455          </span>
1456        </button>
1457      </div>
1458    </div>
1459    <div class="relative">
1460      <pre data-controller="highlight" class="language-ruby !mb-6 !bg-neutral-900 rounded-b-xl overflow-hidden border border-[#2D2D2D]"><code class="language-ruby !bg-neutral-900 max-h-[300px] !overflow-y-scroll !overflow-x-scroll text-sm small-scrollbar">pin "@floating-ui/dom", to: "https://cdn.jsdelivr.net/npm/@floating-ui/[email protected]/+esm"</code></pre>
1461      <button type="button" class="absolute top-2 right-4 flex items-center gap-1.5 rounded-lg px-3.5 py-2 text-sm font-medium shadow-xs focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-600 bg-neutral-800/50 text-neutral-50 hover:bg-neutral-700/50 dark:focus-visible:outline-neutral-200 border border-neutral-700"
1462              data-controller="clipboard"
1463              data-clipboard-text='pin "@floating-ui/dom", to: "https://cdn.jsdelivr.net/npm/@floating-ui/[email protected]/+esm"'
1464              data-clipboard-error-message-value="Copy Failed!"
1465              data-clipboard-show-tooltip-value="false"
1466              data-clipboard-tooltip-duration-value="1500">
1467        <span data-clipboard-target="copyContent" class="flex items-center gap-1.5">
1468          <svg xmlns="http://www.w3.org/2000/svg" class="size-4" width="18" height="18" viewBox="0 0 18 18"><g fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" stroke="currentColor"><rect x="1.75" y="1.75" width="11" height="11" rx="2" ry="2" transform="translate(14.5 14.5) rotate(-180)"></rect><path d="M15.199,6.002l1.029,6.924c.162,1.093-.592,2.11-1.684,2.272l-6.924,1.029c-.933,.139-1.81-.39-2.148-1.228"></path><line x1="7.25" y1="9.75" x2="7.25" y2="4.75"></line><line x1="4.75" y1="7.25" x2="9.75" y2="7.25"></line></g></svg>
1469          Copy
1470        </span>
1471        <span data-clipboard-target="copiedContent" class="hidden flex items-center gap-1.5 text-green-400">
1472          <svg xmlns="http://www.w3.org/2000/svg" class="size-4" width="18" height="18" viewBox="0 0 18 18"><g fill="currentColor"><path d="M6.75,15h-.002c-.227,0-.442-.104-.583-.281L2.165,9.719c-.259-.324-.207-.795,.117-1.054,.325-.259,.796-.206,1.054,.117l3.418,4.272L14.667,3.278c.261-.322,.732-.373,1.055-.111,.322,.261,.372,.733,.111,1.055L7.333,14.722c-.143,.176-.357,.278-.583,.278Z" fill="currentColor"></path></g></svg>
1473          Copied!
1474        </span>
1475      </button>
1476    </div>
1477  </div>
1478
1479  <!-- NPM Panel -->
1480  <div data-tabs-target="panel" role="tabpanel">
1481    <div class="rounded-t-xl overflow-hidden border-t border-x border-[#2D2D2D] max-h-lg">
1482      <div class="p-1 text-sm bg-neutral-900">
1483        <div class="px-2 pt-2 pb-1.5 text-xs text-neutral-400 dark:text-white/50 flex items-center gap-1">
1484          <svg xmlns="http://www.w3.org/2000/svg" class="size-4" width="18" height="18" viewBox="0 0 18 18"><g fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" stroke="currentColor"><rect x="2.75" y="2.75" width="12.5" height="12.5" rx="2" ry="2"></rect><line x1="9.75" y1="12.25" x2="12.25" y2="12.25"></line><polyline points="5.75 12.25 8.25 9.75 5.75 7.25"></polyline></g></svg>
1485          Terminal
1486        </div>
1487      </div>
1488    </div>
1489    <div class="relative">
1490      <pre data-controller="highlight" class="language-bash !mb-6 !bg-neutral-900 rounded-b-xl overflow-hidden border border-[#2D2D2D]"><code class="language-bash !bg-neutral-900 max-h-[300px] !overflow-y-scroll !overflow-x-scroll text-sm small-scrollbar">npm install @floating-ui/dom</code></pre>
1491      <button type="button" class="absolute top-2 right-4 flex items-center gap-1.5 rounded-lg px-3.5 py-2 text-sm font-medium shadow-xs focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-600 bg-neutral-800/50 text-neutral-50 hover:bg-neutral-700/50 dark:focus-visible:outline-neutral-200 border border-neutral-700"
1492              data-controller="clipboard"
1493              data-clipboard-text="npm install @floating-ui/dom"
1494              data-clipboard-error-message-value="Copy Failed!"
1495              data-clipboard-show-tooltip-value="false"
1496              data-clipboard-tooltip-duration-value="1500">
1497        <span data-clipboard-target="copyContent" class="flex items-center gap-1.5">
1498          <svg xmlns="http://www.w3.org/2000/svg" class="size-4" width="18" height="18" viewBox="0 0 18 18"><g fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" stroke="currentColor"><rect x="1.75" y="1.75" width="11" height="11" rx="2" ry="2" transform="translate(14.5 14.5) rotate(-180)"></rect><path d="M15.199,6.002l1.029,6.924c.162,1.093-.592,2.11-1.684,2.272l-6.924,1.029c-.933,.139-1.81-.39-2.148-1.228"></path><line x1="7.25" y1="9.75" x2="7.25" y2="4.75"></line><line x1="4.75" y1="7.25" x2="9.75" y2="7.25"></line></g></svg>
1499          Copy
1500        </span>
1501        <span data-clipboard-target="copiedContent" class="hidden flex items-center gap-1.5 text-green-400">
1502          <svg xmlns="http://www.w3.org/2000/svg" class="size-4" width="18" height="18" viewBox="0 0 18 18"><g fill="currentColor"><path d="M6.75,15h-.002c-.227,0-.442-.104-.583-.281L2.165,9.719c-.259-.324-.207-.795,.117-1.054,.325-.259,.796-.206,1.054,.117l3.418,4.272L14.667,3.278c.261-.322,.732-.373,1.055-.111,.322,.261,.372,.733,.111,1.055L7.333,14.722c-.143,.176-.357,.278-.583,.278Z" fill="currentColor"></path></g></svg>
1503          Copied!
1504        </span>
1505      </button>
1506    </div>
1507  </div>
1508
1509  <!-- Yarn Panel -->
1510  <div data-tabs-target="panel" role="tabpanel">
1511    <div class="rounded-t-xl overflow-hidden border-t border-x border-[#2D2D2D] max-h-lg">
1512      <div class="p-1 text-sm bg-neutral-900">
1513        <div class="px-2 pt-2 pb-1.5 text-xs text-neutral-400 dark:text-white/50 flex items-center gap-1">
1514          <svg xmlns="http://www.w3.org/2000/svg" class="size-4" width="18" height="18" viewBox="0 0 18 18"><g fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" stroke="currentColor"><rect x="2.75" y="2.75" width="12.5" height="12.5" rx="2" ry="2"></rect><line x1="9.75" y1="12.25" x2="12.25" y2="12.25"></line><polyline points="5.75 12.25 8.25 9.75 5.75 7.25"></polyline></g></svg>
1515          Terminal
1516        </div>
1517      </div>
1518    </div>
1519    <div class="relative">
1520      <pre data-controller="highlight" class="language-bash !mb-6 !bg-neutral-900 rounded-b-xl overflow-hidden border border-[#2D2D2D]"><code class="language-bash !bg-neutral-900 max-h-[300px] !overflow-y-scroll !overflow-x-scroll text-sm small-scrollbar">yarn add @floating-ui/dom</code></pre>
1521      <button type="button" class="absolute top-2 right-4 flex items-center gap-1.5 rounded-lg px-3.5 py-2 text-sm font-medium shadow-xs focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-600 bg-neutral-800/50 text-neutral-50 hover:bg-neutral-700/50 dark:focus-visible:outline-neutral-200 border border-neutral-700"
1522              data-controller="clipboard"
1523              data-clipboard-text="yarn add @floating-ui/dom"
1524              data-clipboard-error-message-value="Copy Failed!"
1525              data-clipboard-show-tooltip-value="false"
1526              data-clipboard-tooltip-duration-value="1500">
1527        <span data-clipboard-target="copyContent" class="flex items-center gap-1.5">
1528          <svg xmlns="http://www.w3.org/2000/svg" class="size-4" width="18" height="18" viewBox="0 0 18 18"><g fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" stroke="currentColor"><rect x="1.75" y="1.75" width="11" height="11" rx="2" ry="2" transform="translate(14.5 14.5) rotate(-180)"></rect><path d="M15.199,6.002l1.029,6.924c.162,1.093-.592,2.11-1.684,2.272l-6.924,1.029c-.933,.139-1.81-.39-2.148-1.228"></path><line x1="7.25" y1="9.75" x2="7.25" y2="4.75"></line><line x1="4.75" y1="7.25" x2="9.75" y2="7.25"></line></g></svg>
1529          Copy
1530        </span>
1531        <span data-clipboard-target="copiedContent" class="hidden flex items-center gap-1.5 text-green-400">
1532          <svg xmlns="http://www.w3.org/2000/svg" class="size-4" width="18" height="18" viewBox="0 0 18 18"><g fill="currentColor"><path d="M6.75,15h-.002c-.227,0-.442-.104-.583-.281L2.165,9.719c-.259-.324-.207-.795,.117-1.054,.325-.259,.796-.206,1.054,.117l3.418,4.272L14.667,3.278c.261-.322,.732-.373,1.055-.111,.322,.261,.372,.733,.111,1.055L7.333,14.722c-.143,.176-.357,.278-.583,.278Z" fill="currentColor"></path></g></svg>
1533          Copied!
1534        </span>
1535      </button>
1536    </div>
1537  </div>
1538</div>
1539
1540          </div>
1541        </div>
1542      </div>
1543    </div>
1544  </div>
1545
1546  <div data-accordion-target="item" data-state="closed"class="overflow-hidden bg-neutral-100/60 dark:bg-neutral-700/75 border border-black/10 dark:border-white/10 items-center justify-between font-semibold transition-all hover:bg-neutral-100 dark:hover:bg-neutral-700/50 rounded-lg">
1547    <p data-state="closed" class="flex text-base font-semibold mt-0 mb-0">
1548      <button type="button" data-accordion-target="trigger" data-action="click->accordion#toggle" aria-controls="accordion-content-3" aria-expanded="false" data-state="closed" id="accordion-trigger-4" class="w-full rounded-lg flex flex-1 p-3 items-center justify-between font-medium transition-all [&[data-state=open]>svg]:rotate-180 focus:outline-neutral-700 dark:focus:outline-white focus:-outline-offset-1">
1549        <span class="flex items-center gap-2">
1550          1.4. Number Flow
1551          <img alt="Number Flow" class="size-3.5" src="/assets/number-flow-logo-1481f4d9eea3e4ac4b9095aa058736fd961b80f3d38a78225792a19db464308f.webp" />
1552        </span>
1553        <svg xmlns="http://www.w3.org/2000/svg" data-accordion-target="icon" class="size-4 shrink-0 transition-transform duration-300" width="18" height="18" viewBox="0 0 18 18"><g fill="currentColor"><path d="M8.99999 13.5C8.80799 13.5 8.61599 13.4271 8.46999 13.2801L2.21999 7.03005C1.92699 6.73705 1.92699 6.26202 2.21999 5.96902C2.51299 5.67602 2.98799 5.67602 3.28099 5.96902L9.00099 11.689L14.721 5.96902C15.014 5.67602 15.489 5.67602 15.782 5.96902C16.075 6.26202 16.075 6.73705 15.782 7.03005L9.53199 13.2801C9.38599 13.4261 9.19399 13.5 9.00199 13.5H8.99999Z"></path></g></svg>
1554      </button>
1555    </p>
1556    <div data-accordion-target="content" data-state="closed" id="accordion-content-3" role="region" aria-labelledby="accordion-trigger-4" class="grid transition-[grid-template-rows] duration-300 ease-in-out data-[state=open]:grid-rows-[1fr] data-[state=closed]:grid-rows-[0fr]" hidden>
1557      <div class="overflow-hidden min-h-0">
1558        <div class="opacity-0 transition-opacity duration-300 data-[state=open]:opacity-100" data-state="closed">
1559          <p class="px-4 py-3 bg-white dark:bg-neutral-700/50 text-sm font-normal">
1560            <a href="https://number-flow.barvian.me/vanilla" class="text-neutral-900 dark:text-white underline hover:opacity-80" target="_blank">Number Flow</a> is a library for animating numbers in your application. It is used to animate the numbers in the animated number component.
1561          </p>
1562          <div class="px-4 py-3 bg-white dark:bg-neutral-700/50 text-sm font-normal">
1563            <div class="mb-6" data-controller="tabs" data-tabs-active-tab-class="bg-neutral-900 text-white shadow-sm dark:bg-white dark:text-neutral-900 dark:shadow-sm hover:ring-neutral-800 dark:hover:bg-neutral-50 dark:hover:ring-white hover:text-white dark:hover:text-neutral-900" data-tabs-inactive-tab-class="hover:bg-white/75 ring-1 ring-transparent hover:ring-white dark:hover:bg-neutral-700 dark:hover:ring-neutral-600 text-neutral-600 dar
1563k:text-neutral-400 hover:text-neutral-900 dark:hover:text-neutral-200" data-tabs-index-value="0">
1564  <!-- Tab Controls -->
1565  <div class="opacity-0 transition-opacity duration-200 relative inline-grid items-center gap-2 justify-center grid-cols-3 p-1 mb-4 bg-neutral-100 border border-neutral-200 rounded-xl select-none dark:bg-neutral-800 dark:border-neutral-700" data-tabs-target="tabList" role="tablist">
1566    <button class="rounded-lg whitespace-nowrap text-xs font-medium transition flex gap-x-2 items-center justify-center py-2.5 px-3 w-full text-center text-current hover:text-current dark:text-current dark:hover:text-current focus-visible:outline-offset-2 focus-visible:outline-neutral-600 dark:focus-visible:outline-neutral-200" tabindex="0" data-tabs-target="tab" data-action="click->tabs#change:prevent" role="tab">
1567      Importmap
1568    </button>
1569    <button class="rounded-lg whitespace-nowrap text-xs font-medium transition flex gap-x-2 items-center justify-center py-2.5 px-3 w-full text-center text-current hover:text-current dark:text-current dark:hover:text-current focus-visible:outline-offset-2 focus-visible:outline-neutral-600 dar
1569k:focus-visible:outline-neutral-200" tabindex="0" data-tabs-target="tab" data-action="click->tabs#change:prevent" role="tab">
1570      NPM
1571    </button>
1572    <button class="rounded-lg whitespace-nowrap text-xs font-medium transition flex gap-x-2 items-center justify-center py-2.5 px-3 w-full text-center text-current hover:text-current dark:text-current dark:hover:text-current focus-visible:outline-offset-2 focus-visible:outline-neutral-600 dark:focus-visible:outline-neutral-200" tabindex="0" data-tabs-target="tab" data-action="click->tabs#change:prevent" role="tab">
1573      Yarn
1574    </button>
1575  </div>
1576
1577  <!-- Importmap Panel -->
1578  <div data-tabs-target="panel" role="tabpanel">
1579    <div class="rounded-t-xl overflow-hidden border-t border-x border-[#2D2D2D] max-h-lg">
1580      <div class="p-1 text-sm bg-neutral-900">
1581        <button type="button" class="px-2 pt-2 pb-1.5 text-xs text-neutral-400 dark:text-white/50 flex items-center gap-1" data-controller="clipboard" data-clipboard-text="config/importmap.rb" data-clipboard-success-message-value="Controller Copied" data-clipboard-error-message-value="Copy Failed!" data-clipboard-show-tooltip-value="false" data-clipboard-tooltip-duration-value="1500">
1582          <span data-clipboard-target="copyContent" class="flex items-center gap-1.5">
1583            <svg xmlns="http://www.w3.org/2000/svg" class="size-4" width="18" height="18" viewBox="0 0 18 18"><g fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" stroke="currentColor"><path d="M8.0425 15.75H4.75C3.645 15.75 2.75 14.855 2.75 13.75V3.75C2.75 2.645 3.645 1.75 4.75 1.75H12.75C13.855 1.75 14.75 2.645 14.75 3.75V7.1048"></path> <path d="M5.75 5.75H11.75"></path> <path d="M5.75 8.75H11.75"></path> <path d="M5.75 11.75H8.25"></path> <path d="M13.7959 15.4542L16.9571 12.293C17.3476 11.9025 17.3476 11.2693 16.9571 10.8788L16.3713 10.293C15.9808 9.9025 15.3476 9.9025 14.9571 10.293L11.7959 13.4542L11.0001 16.2501L13.7959 15.4542Z"></path></g></svg>
1584            Add to config/importmap.rb
1585          </span>
1586          <span data-clipboard-target="copiedContent" class="hidden flex items-center gap-1.5 text-green-400">
1587            <svg xmlns="http://www.w3.org/2000/svg" class="size-4" width="18" height="18" viewBox="0 0 18 18"><g fill="currentColor"><path d="M6.75,15h-.002c-.227,0-.442-.104-.583-.281L2.165,9.719c-.259-.324-.207-.795,.117-1.054,.325-.259,.796-.206,1.054,.117l3.418,4.272L14.667,3.278c.261-.322,.732-.373,1.055-.111,.322,.261,.372,.733,.111,1.055L7.333,14.722c-.143,.176-.357,.278-.583,.278Z" fill="currentColor"></path></g></svg>
1588            Add to config/importmap.rb
1589          </span>
1590        </button>
1591      </div>
1592    </div>
1593    <div class="relative">
1594      <pre data-controller="highlight" class="language-ruby !mb-6 !bg-neutral-900 rounded-b-xl overflow-hidden border border-[#2D2D2D]"><code class="language-ruby !bg-neutral-900 max-h-[300px] !overflow-y-scroll !overflow-x-scroll text-sm small-scrollbar">pin "number-flow", to: "https://esm.sh/number-flow"
1595pin "number-flow/group", to: "https://esm.sh/number-flow/group"</code></pre>
1596      <button type="button" class="absolute top-2 right-4 flex items-center gap-1.5 rounded-lg px-3.5 py-2 text-sm font-medium shadow-xs focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-600 bg-neutral-800/50 text-neutral-50 hover:bg-neutral-700/50 dark:focus-visible:outline-neutral-200 border border-neutral-700"
1597              data-controller="clipboard"
1598              data-clipboard-text='pin "number-flow", to: "https://esm.sh/number-flow"
1599pin "number-flow/group", to: "https://esm.sh/number-flow/group"'
1600              data-clipboard-error-message-value="Copy Failed!"
1601              data-clipboard-show-tooltip-value="false"
1602              data-clipboard-tooltip-duration-value="1500">
1603        <span data-clipboard-target="copyContent" class="flex items-center gap-1.5">
1604          <svg xmlns="http://www.w3.org/2000/svg" class="size-4" width="18" height="18" viewBox="0 0 18 18"><g fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" stroke="currentColor"><rect x="1.75" y="1.75" width="11" height="11" rx="2" ry="2" transform="translate(14.5 14.5) rotate(-180)"></rect><path d="M15.199,6.002l1.029,6.924c.162,1.093-.592,2.11-1.684,2.272l-6.924,1.029c-.933,.139-1.81-.39-2.148-1.228"></path><line x1="7.25" y1="9.75" x2="7.25" y2="4.75"></line><line x1="4.75" y1="7.25" x2="9.75" y2="7.25"></line></g></svg>
1605          Copy
1606        </span>
1607        <span data-clipboard-target="copiedContent" class="hidden flex items-center gap-1.5 text-green-400">
1608          <svg xmlns="http://www.w3.org/2000/svg" class="size-4" width="18" height="18" viewBox="0 0 18 18"><g fill="currentColor"><path d="M6.75,15h-.002c-.227,0-.442-.104-.583-.281L2.165,9.719c-.259-.324-.207-.795,.117-1.054,.325-.259,.796-.206,1.054,.117l3.418,4.272L14.667,3.278c-.261-.322,.732-.373,1.055-.111,.322,.261,.372,.733,.111,1.055L7.333,14.722c-.143,.176-.357,.278-.583,.278Z" fill="currentColor"></path></g></svg>
1609          Copied!
1610        </span>
1611      </button>
1612    </div>
1613  </div>
1614
1615  <!-- NPM Panel -->
1616  <div data-tabs-target="panel" role="tabpanel">
1617    <div class="rounded-t-xl overflow-hidden border-t border-x border-[#2D2D2D] max-h-lg">
1618      <div class="p-1 text-sm bg-neutral-900">
1619        <div class="px-2 pt-2 pb-1.5 text-xs text-neutral-400 dark:text-white/50 flex items-center gap-1">
1620          <svg xmlns="http://www.w3.org/2000/svg" class="size-4" width="18" height="18" viewBox="0 0 18 18"><g fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" stroke="currentColor"><rect x="2.75" y="2.75" width="12.5" height="12.5" rx="2" ry="2"></rect><line x1="9.75" y1="12.25" x2="12.25" y2="12.25"></line><polyline points="5.75 12.25 8.25 9.75 5.75 7.25"></polyline></g></svg>
1621          Terminal
1622        </div>
1623      </div>
1624    </div>
1625    <div class="relative">
1626      <pre data-controller="highlight" class="language-bash !mb-6 !bg-neutral-900 rounded-b-xl overflow-hidden border border-[#2D2D2D]"><code class="language-bash !bg-neutral-900 max-h-[300px] !overflow-y-scroll !overflow-x-scroll text-sm small-scrollbar">npm install number-flow</code></pre>
1627      <button type="button" class="absolute top-2 right-4 flex items-center gap-1.5 rounded-lg px-3.5 py-2 text-sm font-medium shadow-xs focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-600 bg-neutral-800/50 text-neutral-50 hover:bg-neutral-700/50 dark:focus-visible:outline-neutral-200 border border-neutral-700"
1628              data-controller="clipboard"
1629              data-clipboard-text="npm install number-flow"
1630              data-clipboard-error-message-value="Copy Failed!"
1631              data-clipboard-show-tooltip-value="false"
1632              data-clipboard-tooltip-duration-value="1500">
1633        <span data-clipboard-target="copyContent" class="flex items-center gap-1.5">
1634          <svg xmlns="http://www.w3.org/2000/svg" class="size-4" width="18" height="18" viewBox="0 0 18 18"><g fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" stroke="currentColor"><rect x="1.75" y="1.75" width="11" height="11" rx="2" ry="2" transform="translate(14.5 14.5) rotate(-180)"></rect><path d="M15.199,6.002l1.029,6.924c.162,1.093-.592,2.11-1.684,2.272l-6.924,1.029c-.933,.139-1.81-.39-2.148-1.228"></path><line x1="7.25" y1="9.75" x2="7.25" y2="4.75"></line><line x1="4.75" y1="7.25" x2="9.75" y2="7.25"></line></g></svg>
1635          Copy
1636        </span>
1637        <span data-clipboard-target="copiedContent" class="hidden flex items-center gap-1.5 text-green-400">
1638          <svg xmlns="http://www.w3.org/2000/svg" class="size-4" width="18" height="18" viewBox="0 0 18 18"><g fill="currentColor"><path d="M6.75,15h-.002c-.227,0-.442-.104-.583-.281L2.165,9.719c-.259-.324-.207-.795,.117-1.054,.325-.259,.796-.206,1.054,.117l3.418,4.272L14.667,3.278c-.261-.322,.732-.373,1.055-.111,.322,.261,.372,.733,.111,1.055L7.333,14.722c-.143,.176-.357,.278-.583,.278Z" fill="currentColor"></path></g></svg>
1639          Copied!
1640        </span>
1641      </button>
1642    </div>
1643  </div>
1644
1645  <!-- Yarn Panel -->
1646  <div data-tabs-target="panel" role="tabpanel">
1647    <div class="rounded-t-xl overflow-hidden border-t border-x border-[#2D2D2D] max-h-lg">
1648      <div class="p-1 text-sm bg-neutral-900">
1649        <div class="px-2 pt-2 pb-1.5 text-xs text-neutral-400 dark:text-white/50 flex items-center gap-1">
1650          <svg xmlns="http://www.w3.org/2000/svg" class="size-4" width="18" height="18" viewBox="0 0 18 18"><g fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" stroke="currentColor"><rect x="2.75" y="2.75" width="12.5" height="12.5" rx="2" ry="2"></rect><line x1="9.75" y1="12.25" x2="12.25" y2="12.25"></line><polyline points="5.75 12.25 8.25 9.75 5.75 7.25"></polyline></g></svg>
1651          Terminal
1652        </div>
1653      </div>
1654    </div>
1655    <div class="relative">
1656      <pre data-controller="highlight" class="language-bash !mb-6 !bg-neutral-900 rounded-b-xl overflow-hidden border border-[#2D2D2D]"><code class="language-bash !bg-neutral-900 max-h-[300px] !overflow-y-scroll !overflow-x-scroll text-sm small-scrollbar">yarn add number-flow</code></pre>
1657      <button type="button" class="absolute top-2 right-4 flex items-center gap-1.5 rounded-lg px-3.5 py-2 text-sm font-medium shadow-xs focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-600 bg-neutral-800/50 text-neutral-50 hover:bg-neutral-700/50 dark:focus-visible:outline-neutral-200 border border-neutral-700"
1658              data-controller="clipboard"
1659              data-clipboard-text="yarn add number-flow"
1660              data-clipboard-error-message-value="Copy Failed!"
1661              data-clipboard-show-tooltip-value="false"
1662              data-clipboard-tooltip-duration-value="1500">
1663        <span data-clipboard-target="copyContent" class="flex items-center gap-1.5">
1664          <svg xmlns="http://www.w3.org/2000/svg" class="size-4" width="18" height="18" viewBox="0 0 18 18"><g fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" stroke="currentColor"><rect x="1.75" y="1.75" width="11" height="11" rx="2" ry="2" transform="translate(14.5 14.5) rotate(-180)"></rect><path d="M15.199,6.002l1.029,6.924c.162,1.093-.592,2.11-1.684,2.272l-6.924,1.029c-.933,.139-1.81-.39-2.148-1.228"></path><line x1="7.25" y1="9.75" x2="7.25" y2="4.75"></line><line x1="4.75" y1="7.25" x2="9.75" y2="7.25"></line></g></svg>
1665          Copy
1666        </span>
1667        <span data-clipboard-target="copiedContent" class="hidden flex items-center gap-1.5 text-green-400">
1668          <svg xmlns="http://www.w3.org/2000/svg" class="size-4" width="18" height="18" viewBox="0 0 18 18"><g fill="currentColor"><path d="M6.75,15h-.002c-.227,0-.442-.104-.583-.281L2.165,9.719c-.259-.324-.207-.795,.117-1.054,.325-.259,.796-.206,1.054,.117l3.418,4.272L14.667,3.278c-.261-.322,.732-.373,1.055-.111,.322,.261,.372,.733,.111,1.055L7.333,14.722c-.143,.176-.357,.278-.583,.278Z" fill="currentColor"></path></g></svg>
1669          Copied!
1670        </span>
1671      </button>
1672    </div>
1673  </div>
1674</div>
1675
1676          </div>
1677        </div>
1678      </div>
1679    </div>
1680  </div>
1681
1682  <div data-accordion-target="item" data-state="closed"class="overflow-hidden bg-neutral-100/60 dark:bg-neutral-700/75 border border-black/10 dark:border-white/10 items-center justify-between font-semibold transition-all hover:bg-neutral-100 dark:hover:bg-neutral-700/50 rounded-lg">
1683    <p data-state="closed" class="flex text-base font-semibold mt-0 mb-0">
1684      <button type="button" data-accordion-target="trigger" data-action="click->accordion#toggle" aria-controls="accordion-content-5" aria-expanded="false" data-state="closed" id="accordion-trigger-5" class="w-full rounded-lg flex flex-1 p-3 items-center justify-between font-medium transition-all [&[data-state=open]>svg]:rotate-180 focus:outline-neutral-700 dark:focus:outline-white focus:-outline-offset-1">
1685        <span class="flex items-center gap-2">
1686          1.5. Embla Carousel
1687          <svg xmlns="http://www.w3.org/2000/svg" class="size-3.5" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="-5 -5 160 160"><defs><linearGradient id="light-theme-gradient" x1="0%" y1="0%" x2="100%" y2="0%"><stop offset="0%" stop-color="#2f71c1"/><stop offset="100%" stop-color="#7561c3"/></linearGradient><path id="light-theme-logo" d="M93 .03l.46.06.47.08.24.05.23.05.23.07.24.07.47.16.23.1.24.1.45.2.23.1.44.24.44.26L98 2l.6.48.38.34.36.36.17.2.1.12.1.13.1.12.1.14.1.12.2.26.1.14.1.13.17.27.18.3.16.3.16.32.08.17.15.36.07.2.1.2.07.2.08.2.07.23.08.23.07.23.16.5.08.26.08.28.1.3.63 2.35.1.4.14.54.13.55.24 1.13.1.58.12.57.1.6.18 1.2.1.6.08.63.07.62.07.64.06.64.06.65.05.65.04.67.05.67.1 2.06.04 2.87-.03 2.23-.06 1.53-.02.78-.05.78-.04.8-.1 1.6-.07.82-.06.82-.26 2.8-.02.26-.03.26-.02.27-.04.52-.04.5-.02.24-.03.48-.02.22-.01.23v.23l-.02.2-.01.22v.4l-.03.37v.17l-.01.18-.02.32v.3.13.25l-.01.2.01.1V46v.08.06.05.05l.01.03.01.02h.01.02l.03.01h.67l.13-.01h.14.15.16l.34-.02.37-.02.2-.01h.42l.46-.04h.24l.23-.02.25-.02.26-.02.27-.02h.27l.26-.02.28-.02.3-.03.3-.02h.28l.6-.04.3-.03.62-.05.3-.03 1.4-.1 1.37-.1 1.36-.08 2.64-.1 1.3-.03 1.26-.02h1.25 1.22l1.2.02 1.17.03 2.27.1 1.1.08 1.07.08 1.05.1 1.03.1 1 .12.97.13.94.15.93.16.88.17.87.2.83.2.8.2.78.22.75.24.72.24.7.26.67.27.63.28.6.3.58.3.54.32.5.33.5.35.45.35.42.36.38.38.36.4.14.17.27.33.12.16.12.17.1.17.1.16.2.3.1.17.25.47.08.16.07.15.06.17.16.47.1.33.06.33.03.16.02.18.02.16v.17l.02.36v.18l-.02.36-.01.2-.02.2-.01.2-.06.4-.04.2-.04.22-.03.2-.08.35-.1.35-.12.36-.13.36-.15.37-.17.38-.18.37-.2.4-.22.38-.24.4-.25.4-.26.4-.6.8-.64.82-.36.4-.35.42-1.18 1.24-.42.43-.88.84-.46.43-.96.84-.5.43-1.03.84-.53.43-.55.4-1.7 1.25-.6.4-1.22.8-.62.4-.63.4-.38.24-.4.24-.42.25-.42.26-.45.26-.46.26-.96.54-.5.3-.5.27-.5.28-.5.3-1.03.56-.52.27-.5.28-.52.27-1 .53-.5.26-.5.25-.48.25-.92.46-.86.42-.42.2-.38.2-.37.17-.35.17-.32.15-.3.13-.27.1-.26.1-.2.1-.2.06-.17.06-.12.03-.1.02-.05-.02-.04-.04-.04-.06-.03-.08-.03
1687-.1-.02-.1-.01-.13-.02-.14v-.15l.01-.17v-.2l.01-.18.02-.2.01-.2.05-.44.03-.22.1-.7.04-.24.1-.47.05-.24.1-.45.06-.22.05-.22.07-.2.05-.2.07-.2.07-.18.12-.32.06-.15.07-.13.07-.12.06-.1.07-.1.06-.06.06-.05.1-.04.1-.05.05-.04.07-.04.06-.03.07-.03.08-.04.16-.1.18-.08.1-.06.1-.04.2-.12.32-.16.22-.12.23-.13.24-.12.37-.2.12-.07.25-.13.13-.07.25-.13.14-.06.12-.07.13-.06.13-.07.13-.06 1.37-.7.67-.36.67-.38.66-.36.65-.36.64-.37 1.26-.75.6-.36 1.2-.75.58-.38.57-.36.57-.38.55-.37.54-.38.53-.36.52-.37 1-.74.47-.35.46-.37.45-.36.44-.36.84-.7.4-.35.74-.68.67-.67.6-.65.28-.32.27-.3.24-.3.23-.3.2-.3.36-.58.14-.28.14-.3.12-.27.1-.27.08-.27.06-.26.04-.26.02-.26v-.5l-.03-.25-.05-.24-.07-.22-.08-.23-.1-.23-.12-.22-.14-.2-.32-.42-.4-.4-.48-.38-.26-.18-.28-.18-.6-.34-.68-.33-.37-.15-.4-.15-.4-.14-.42-.14-.43-.14-.46-.14-.47-.13-.5-.12-.5-.1-.52-.1-.47-.1-.5-.1-.53-.08-.58-.06-.6-.08-.63-.06-.65-.06-.67-.05-.7-.05-.72-.05-.74-.04-1.52-.06-.8-.03-.8-.02h-.8l-1.67-.02-.83.01h-.85l-2.57.03-.85.03-.86.03-.86.02-.84.05-.85.03-.84.06-.82.05-.83.06-.8.05-1.57.14-.76.07-.75.08-.72.08-1.4.2-.65.1-3.42.52-1.4 7.83-1.46 7.83 6.8 7.94 1.04 1.25 1.03 1.23 1 1.2.98 1.2.95 1.2.93 1.18.9 1.16.88 1.15.87 1.13.84 1.13.82 1.1.8 1.1.78 1.1.75 1.07.73 1.07 1.4 2.1.67 1.03.65 1.02.62 1 .6 1 .58.98.56.98.54.95.52.96.5.95.48.93.45.92.43.9.42.9.4.9.37.88.36.9.33.86.32.86.3.86.28.84.25.83.23.83.15.52.12.5.14.5.1.48.1.46.1.45.1.44.08.44.08.4.06.4.07.4.04.4.04.37.03.37.02.36.02.34v.67l-.03.64-.03.3-.04.3-.05.3-.12.58-.08.27-.1.28-.2.52-.12.26-.12.25-.13.26-.14.25-.3.5-.17.24-.18.24-.2.24-.2.23-.2.24-.3.33-.3.3-.32.3-.34.26-.35.24-.36.23-.38.2-.4.2-.4.17-.42.14-.43.13-.92.2-.5.07-.5.05h-.5-1.08l-.56-.04-.57-.04-.6-.08-.6-.1-.62-.1-.66-.13-.65-.15-.68-.16-1.4-.4-.73-.22-.75-.25-.77-.26-.78-.3-.8-.3-.82-.32-.84-.34-.86-.37-1.8-.8-.92-.43-.93-.45-.33-.15-.34-.17-.37-.2-.4-.2-.42-.22-.43-.25-.45-.25-.46-.26-.48-.28-1.5-.9-.5-.32-.53-.3-1.04-.65-.53-.32-.53-.33-.5-.34-.52-.32-1-.64-.5-.33-.47-.3-.46-.3-.45-.3-.42-.3-.4-.28-.4-.27-.36-.24-.34-.25-.3-.23-.3-.2-.25-.2-.22-.17-.18-.17-.16-.13-.1-.12-.08-.1-.04-.07h0l.01-.04.02-.06.05-.05v-.04l.06-.06.1-.07.2-.16.06-.04.07-.05.06-.04.07-.04.07-.05.08-.05.08-.04.07-.05.16-.1.1-.05.1-.04.08-.06.4-.2.1-.06.1-.05.1-.04.22-.1.2-.1 2.62-1.1 9.13 5.35.92.52.9.5.88.5.87.47.84.44.83.43 1.6.8.78.37.74.34.74.33.72.3.7.28.68.27.66.24.63.22.63.2.6.18.58.16.56.14.54.12.52.1.5.08.48.07.46.03h.43.43l.4-.03.38-.04.35-.06.34-.1.32-.1.3-.13.27-.15.25-.17.23-.18.2-.22.18-.23.16-.26.22-.44.16-.5.1-.53.06-.6.02-.63-.03-.7-.08-.72-.12-.78-.18-.8-.2-.86-.26-.9-.3-.93-.35-.97-.38-1-.43-1.04-.47-1.07-.5-1.1-.55-1.14-.6-1.17-.63-1.18-.66-1.23-.7-1.24-.74-1.27-.77-1.3-1.64-2.65-.87-1.35-.9-1.37-.93-1.4-.97-1.4-2.03-2.84-1.05-1.43-1.1-1.46-1.1-1.45-1.15-1.48-1.16-1.47-1.2-1.48-1.22-1.48-1.23-1.5-4.17-4.9-2.05 7.54-.74 2.67-.76 2.65-.78 2.62-.8 2.57-.8 2.55-.84 2.5-.84 2.46-.87 2.43-.88 2.38-.88 2.35-.9 2.3-.9 2.25-.92 2.2-.94 2.14-.93 2.1-.95 2.05-.96 1.98-.96 1.93-.98 1.88-.96 1.82-.98 1.74-.98 1.7-.98 1.63-.98 1.56-1 1.5-.97 1.42-.98 1.35-.97 1.28-.98 1.2-.97 1.13-.96 1.05-.95.97-.96.88-.94.8-.93.73-.92.64-.92.55-.9.46-.88.37-.88.28-.2.05-.42.08-.22.02-.43.04h-.68l-.23-.02-.24-.02-.23-.03-.23-.04-.47-.1-.23-.06-.24-.06-.23-.08-.23-.07-.47-.18-.7-.3-.44-.22-.23-.12-.65-.4-.2-.14-.6-.45-.57-.5-.18-.17-.34-.38-.18-.2-.2-.25-.18-.26-.17-.28-.2-.3-.17-.32-.18-.33-.18-.36-.34-.76-.34-.82-.16-.43-.32-.9-.32-.94-.14-.5-.15-.5-.28-1.02-.26-1.06-.13-.54-.23-1.1-.22-1.12-.1-.56-.18-1.12-.08-.57-.14-1.12-.05-.56-.1-1.13-.08-1.1-.01-.54-.02-.4-.02-.44v-4.98l.03-1.26.01-.64.02-.64.01-.65.06-1.92.05-1.25.03-.6.02-.6.03-.58.02-.56.04-.54.06-1 .03-.47.03-.43.03-.4.03-.37.04-.34.03-.3.03-.26.04-.22.03-.18.03-.13.03-.08.03-.04.02.01.02-.01.03.02h.03l.03.02.03.01.1.05.03.03.16.1.05.03.12.08.07.04.07.05.3.2.1.06.07.05.1.06.1.07.08.05.2.14.1.06.3.2.3.22.2.14.2.16 2.5 1.85-.24 5.9-.03.64-.01.66v.65l-.02 1.3v1.3l.03 1.93.04 1.28.03.63.02.62.04.6.04.62.12 1.8.1 1.14.06.56.05.55.13 1.06.14 1.02.08.48.07.47.08.46.08.43.1.44.1.4.08.4.1.37.1.36.1.34.2.6.2.55.22.52.2.5.22.45.23.42.24.38.24.36.24.32.26.3.26.26.28.22.27.2.28.15.3.13.3.08.3.06.3.02h.33l.33-.05.34-.08.36-.12.35-.
168714.38-.18.38-.22.4-.24.4-.3.42-.32.42-.35.44-.4.44-.42.45-.46.47-.5.48-.53.5-.56.5-.6.5-.63.53-.67.55-.7.55-.73.57-.77.6-.87.63-.9.62-.95.63-.97.62-1.02.63-1.05.64-1.1.63-1.13.64-1.15.63-1.2.63-1.23.64-1.26 1.25-2.6.63-1.35.63-1.37.63-1.4.63-1.42.62-1.46.62-1.47.6-1.5.6-1.52.6-1.54.6-1.56 1.2-3.2.6-1.62.57-1.64.58-1.64.57-1.67.56-1.67.55-1.7.54-1.7.53-1.7.52-1.73.52-1.74.5-1.74.5-1.75.96-3.52 2.2-8.17-5.1-5.15-2.6-2.6-.4-.38-.18-.2-.2-.18-.2-.2-.18-.17-.18-.2-.36-.35-.16-.17-.66-.62-.14-.14-.14-.15-.28-.26-.12-.13-.12-.12-.12-.1-.3-.3-.1-.08-2.14-1.95-18.45 5.42-1.48.46-1.46.44-1.43.46-1.4.44-1.38.45-1.36.44-1.34.45-1.32.45-1.3.45-2.52.88-1.23.46-1.2.44-1.2.45-1.18.46-1.15.45-1.14.46-1.13.47-2.2.92-1.08.47-1.06.47-1.05.47-2.06.96-2 1-1.96 1-1.92 1.02-.95.52-.93.5-.93.54-1.97.98-.9.55-.9.56-.86.53-.82.53-.8.53-.76.52-.72.5-.7.5-.68.5-.63.5-.6.48-.58.5-.54.48-.5.46-.48.47-.45.45-.4.45-.4.44-.35.43-.32.43-.3.42-.26.4-.22.4-.2.4-.16.4-.13.38-.1.36-.07.36-.04.35v.35l.03.33.07.33.1.3.13.3.17.3.2.3.23.28.26.26.3.25.33.25.36.24.4.22.3.16.32.15.35.15.36.15.37.13.4.14.42.13.42.12.45.13.47.12.48.1 1 .2.52.1.54.1.56.1.57.08.58.08.6.08.6.07 1.25.13.64.05 1.32.1.67.04.68.03.7.04.7.02.72.02 1.44.02h2.22l.75-.02.76-.01.76-.02.77-.03.78-.04.14-.01.15-.01h.14l.15-.01.28-.02.28-.01h.15.56.13l.14-.01.52-.01.12-.01h.26l.1-.01h.24l.1-.01h.1l.2-.01.1-.01.1.01h.08l.08-.01h.5l.1.03.1.04.1.06.1.07.12.08.12.1.14.1.15.1.14.12.15.14.16.15.63.63.16.17.48.54.16.2.3.37.14.18.28.35.12.18.12.17.22.32.1.16.1.14.13.26.05.12.04.1.03.1.01.1v.07l-.02.06-.03.03-.25.07h-.08l-.2.02-.3.06h-.13l-.28.03-.14.02-.16.01-.16.02h-.17l-.35.03-.37.04-.2.01-.2.03-.62.04-.22.02-.45.04h-.23l-.23.02-.72.04h-.25l-.23.01-.25.02-1.03.05-1 .06-1 .03-.98.04-.97.03-1.9.02H26.3l-.9-.02h-.9l-.87-.04-.87-.03-1.67-.1-.82-.07-.8-.06-.8-.08-1.54-.18-1.48-.2-.7-.1-1.4-.26-.67-.14-.66-.15-.63-.15-.63-.17-1.2-.34-.58-.2-.55-.2-.54-.2-.53-.2-.52-.22-.5-.23-.48-.22-.46-.24-.45-.26-.4-.23-.4-.25-.38-.25-.35-.25-.34-.25-.33-.27-.6-.52-.28-.27-.25-.27-.24-.28-.23-.28-.4-.6-.18-.3-.16-.3-.14-.3-.13-.3-.1-.3-.17-.63-.05-.32-.05-.33-.03-.34-.01-.33.01-.35.02-.35.04-.34.05-.36.07-.36.08-.37.1-.37.12-.37.13-.38.15-.4.17-.4.18-.4.4-.8.22-.4.74-1.17.4-.57.44-.6.47-.58.5-.6.53-.6 1.14-1.18.62-.6.64-.6.68-.6.7-.6.73-.6.76-.6 1.6-1.2.84-.6.9-.6 1.83-1.2.96-.6 1-.6 1.02-.6 1.04-.6 1.08-.6 1.1-.6 1.13-.6 1.15-.6 1.2-.6 1.22-.6 1.23-.6 1.27-.6 1.3-.6 1.32-.6 1.35-.6 1.38-.6 1.4-.6 1.43-.6 1.46-.6.65-.27.7-.28.77-.3 1.67-.62.9-.34 1.9-.7 1-.35 1.03-.37 1.07-.37 1.07-.38 1.1-.37 1.1-.38 1.12-.38 1.14-.38 1.13-.38 2.26-.75 5.45-1.76 1.04-.32 1-.3.96-.3 1.83-.55.85-.25.8-.23.75-.2.7-.2.63-.17.58-.14.5-.13.44-.1.37-.08.3-.05.22-.01 1.55-.03-1.57-1.52-.26-.24-.3-.28-.32-.28-.36-.3-.38-.34-.4-.35-.45-.38-.46-.4-.5-.4-.5-.42-.54-.43-.54-.45-.58-.46-1.2-.94-.6-.48-1.28-1-.65-.5-1.32-1.02-1.34-1.02-.7-.5-.67-.5-.68-.5-1.34-1-.66-.5-.66-.48-.65-.47-.64-.46-.63-.46-.6-.43-.6-.42-.58-.42-.56-.4-.56-.38-.52-.36-.52-.34-1.54-1-.78-.5-.76-.48-1.54-.92-.77-.45-.76-.43-1.52-.84-.75-.4-.74-.4-.74-.38-.72-.36-1.44-.68-.7-.32-1.38-.6-.67-.27-.66-.27-.65-.25-.64-.23-.6-.22-1.2-.4-.58-.17-.55-.15-.54-.14-.53-.12-.5-.1-.48-.08-.48-.07-.44-.05-.43-.03h-.78l-.36.03-.34.04-.3.07-.35.1-.33.14-.3.2-.27.22-.23.25-.2.28-.18.32-.15.35-.13.38-.1.42-.06.44-.04.48-.01.5.02.53.05.56.06.6.1.62.12.63.15.67.18.7.2.73.22.73.55 1.57.3.8.33.83.36.86.4.88.4.9.43.9.47.94.48.94.5.97.53.98.56 1 .58 1.02.6 1.03.64 1.04.65 1.06.67 1.07 2.8 4.43-1.25 2.86-.05.12-.1.22-.05.13-.1.23-.06.1-.05.12-.05.1-.05.12-.04.1-.1.2-.04.1-.1.2-.03.1-.05.1-.1.24-.05.08-.03.07-.13.26-.1.16-.02.04-.03.04-.05.1-.07.07h-.05l-.16-.16-.12-.13-.13-.18-.16-.2-.18-.24-.2-.28-.22-.3-.23-.33-.5-.75-.27-.4-.28-.43-.3-.45L30 56l-.63-1-.66-1.03-1-1.6-.34-.56-.33-.55-.34-.54-.65-1.1-.33-.54-.3-.53-.32-.53-.58-1-.28-.5-.27-.47-.25-.46-.25-.43-.22-.4-.4-.76-.26-.48-.25-.5-.24-.5-.48-1.02-.22-.52-.45-1.05-.6-1.6-.2-.54-.18-.53-.2-.53-.34-1.06-.16-.54-.3-1.04-.28-1.03-.24-1-.1-.5-.2-.96-.08-.47-.14-.9-.06-.43-.04-.42-.04-.4-.02-.4v-.38l-.01-.36.01-.36v-.33l.06-.62.05-.27.1-.5.07-.24.08-.24.08-.25.08-.23.2-.48.2-.46.24-.46.12-.2.27-.44.14-.2.44-.6.16-.2.32-.37.17-.17.17-.18.17-.16.18-.17.37-.3.18-.14.2-.14L22 19l.38-.24.6-.3.4-.16.4-.13.73-.15.77-.1.8-.07.86-.01.9.03.94.1.96.13 1 .2 1.04.22 1.07.27 1.12.33 1.14.36 1.17.42 1.2.44 1.24.5 1.26.54 1.3.6 1.3.63 1.34.66 1.37.7 1.38.74 1.4.78 1.43.83 1.45.86 1.46.9 1.48.94 1.5.98 1.5 1 1.53 1.05 1.54 1.08 1.55 1.12 1.56 1.15 1.58 1.17 1.58 1.22 1.6 1.25 1.6 1.28 1.6 1.3 1.6 1.34 1.6 1.37 1.6 1.4 5.42 4.82L88.7 49l1.12-.2 1.07-.2.52-.1.75-.15.24-.03.46-.1.22-.04.43-.07.4-.07.2-.03.18-.03.35-.05.16-.02.15-.03.15-.02.27-.04.12-.01
1687h.1.56l.08-.02.1-.04.08-.04.1-.06.16-.16.07-.1.08-.1.07-.13.07-.15.06-.16.08-.18.07-.2.06-.22.06-.23.06-.25.06-.27.07-.28.05-.3.06-.32.05-.34.06-.36.05-.4.06-.4.05-.43.05-.44.06-.47.05-.5.04-.5.05-.53.05-.56.05-.58.05-.6.05-.63.04-.65.05-.68.05-.7.05-.73.04-.75.06-1.1.05-1.1.04-1.06.06-2.1v-3l-.02-.97-.02-.96-.08-1.85-.05-.9-.07-.88-.07-.86-.08-.84-.1-.82-.1-.8-.1-.77-.1-.75-.13-.72-.12-.7-.14-.67-.15-.65-.15-.62-.16-.6-.17-.57-.17-.54-.2-.52-.2-.48-.2-.47-.2-.42-.22-.4-.22-.37-.23-.34-.23-.3-.24-.27-.25-.24-.25-.2-.27-.17-.26-.13-.3-.1-.3-.11-.3-.05-.3-.02-.3.01L92 6l-.33.05-.34.1-.34.12-.35.14-.72.4-.37.24-.38.26-.38.3-.4.32-.4.35-.4.38-.4.4-.4.44-.44.46-.43.48-.44.5-.45.55-.46.56-.45.6-.47.62-.48.64-.47.7-.5.7-.5.72-.5.77-.5.78-.5.8-.5.84-.53.86-1.06 1.8-.54.95-4.72 8.25-3.1.4-.1.01-.12.01h-.1-.12-.1-.1-.1-.8-.08-.07l-.1-.01h-.07l-.07-.01-.2-.04h-.1l-.1-.04h-.04l-.1-.06-.03-.02-.01-.03-.02-.02-.01-.04v-.03l.02-.12.03-.15.06-.2.07-.22.1-.24.1-.28.12-.3.15-.32L68 29l.17-.37.18-.4.2-.4.2-.43.2-.44.22-.45.24-.47.47-.98.5-1 .26-.5.26-.52.8-1.52.28-.5.27-.5.26-.5.28-.5.52-.94.26-.45.25-.44.25-.42.25-.4.23-.4.22-.36.22-.34.2-.33.2-.3.44-.65.88-1.27.43-.6.86-1.18.83-1.1.42-.54 1.22-1.53.4-.48.4-.46.4-.45.4-.43.78-.82.4-.4.76-.74.38-.34.74-.66.74-.6.37-.28.36-.27L87 2l.7-.45.36-.2.35-.2.35-.18.34-.16.36-.15.33-.15.34-.12.34-.1.33-.1.42-.1.22-.04.2-.02.22-.02.44-.02h.23l.23.01.22.02zM93.4 54l-1.16.23-1.25.3-1.2.35-1 .34-.76.3-.45.26-.08.2 1.14 1.27 1.7 1.75 1.82 1.78 1.48 1.37.7.54.16-.26.22-.63.26-.95.3-1.2.28-1.37.28-1.57.15-1.23v-.87l-.13-.56-.27-.24-.44-.04-.75.06-1 .15zm-48.7-.1l-4.34 1.68 1.3-2.42c1.68-3.17 5.8-7.83 9.24-10.44.18-.15 1.08-.86 2.72-2.15l2.32 1.64c1.27.9 2.35 1.77 2.4 2 .05.18-.83 1-1.94 1.7-1.16.76-3.28 2.5-4.73 3.86-1.84 1.8-3.86 2.98-6.97 4.14zm24.9 58.64c-10.8-1.44-21.16-8-27.37-17.4-2.63-4.02-5.8-12.95-6-16.85-.12-2.35.07-2.6 2.43-3.7 1.4-.63 2.62-1.1 2.76-1.06.1.1.5 2.38.8 5.16 1.1 8.96 6.72 17.88 14.56 22.95 4.32 2.86 10.6 5 15.18 5.26 1.78.1 3.3.4 3.33.6.07.25-.43 1.54-1.1 2.95l-1.18 2.6-3.43-.5zm4.3-76.72c-1.95-1.94 9.3-.5 15.27 2 3.42 1.4 3.68 1.6 3.44 3.15-.18 1.3-5.97 1.87-9.46.92-2.5-.68-6.43-3.26-9.25-6.06zm24.78 60.43c1.57-1.66 3.27-3.8 3.7-4.6 1.06-2.1 1.5-2.1 2.76-.36.56.88 1.35 1.9 1.74 2.45.5.64.01 1.67-1.63 3.8-3.97 5.2-13.04 12.18-12.28 9.44 1.38-4.5 3.2-8.05 5.72-10.72zm11.5-24.45c-1.94-2.4-2.9-4.28-3.57-6.82-1.68-6.27.9-12.08 3.24-7.47 1.32 2.5 3.28 10.33 3.57 14.07.17 1.83.08 3.4-.1 3.46-.24.06-1.6-1.45-3.13-3.24z"/></defs><g fill="url(#light-theme-gradient)"><use xlink:href="#light-theme-logo"/></g></svg>
1688        </span>
1689        <svg xmlns="http://www.w3.org/2000/svg" data-accordion-target="icon" class="size-4 shrink-0 transition-transform duration-300" width="18" height="18" viewBox="0 0 18 18"><g fill="currentColor"><path d="M8.99999 13.5C8.80799 13.5 8.61599 13.4271 8.46999 13.2801L2.21999 7.03005C1.92699 6.73705 1.92699 6.26202 2.21999 5.96902C2.51299 5.67602 2.98799 5.67602 3.28099 5.96902L9.00099 11.689L14.721 5.96902C15.014 5.67602 15.489 5.67602 15.782 5.96902C16.075 6.26202 16.075 6.73705 15.782 7.03005L9.53199 13.2801C9.38599 13.4261 9.19399 13.5 9.00199 13.5H8.99999Z"></path></g></svg>
1690      </button>
1691    </p>
1692    <div data-accordion-target="content" data-state="closed" id="accordion-content-5" role="region" aria-labelledby="accordion-trigger-5" class="grid transition-[grid-template-rows] duration-300 ease-in-out data-[state=open]:grid-rows-[1fr] data-[state=closed]:grid-rows-[0fr]" hidden>
1693      <div class="overflow-hidden min-h-0">
1694        <div class="opacity-0 transition-opacity duration-300 data-[state=open]:opacity-100" data-state="closed">
1695          <p class="px-4 py-3 bg-white dark:bg-neutral-700/50 text-sm font-normal">
1696            <a href="https://www.embla-carousel.com/get-started/cdn/" class="text-neutral-900 dark:text-white underline hover:opacity-80" target="_blank">Embla Carousel</a> is a lightweight carousel library with fluid motion and swipe gestures. It is used for the carousel component.
1697          </p>
1698          <div class="px-4 py-3 bg-white dark:bg-neutral-700/50 text-sm font-normal">
1699            <div class="mb-6" data-controller="tabs" data-tabs-active-tab-class="bg-neutral-900 text-white shadow-sm dark:bg-white dark:text-neutral-900 dark:shadow-sm hover:ring-neutral-800 dark:hover:bg-neutral-50 dark:hover:ring-white hover:text-white dark:hover:text-neutral-900" data-tabs-inactive-tab-class="hover:bg-white/75 ring-1 ring-transparent hover:ring-white dark:hover:bg-neutral-700 dark:hover:ring-neutral-600 text-neutral-600 dar
1699k:text-neutral-400 hover:text-neutral-900 dark:hover:text-neutral-200" data-tabs-index-value="0">
1700  <!-- Tab Controls -->
1701  <div class="opacity-0 transition-opacity duration-200 relative inline-grid items-center gap-2 justify-center grid-cols-3 p-1 mb-4 bg-neutral-100 border border-neutral-200 rounded-xl select-none dark:bg-neutral-800 dark:border-neutral-700" data-tabs-target="tabList" role="tablist">
1702    <button class="rounded-lg whitespace-nowrap text-xs font-medium transition flex gap-x-2 items-center justify-center py-2.5 px-3 w-full text-center text-current hover:text-current dark:text-current dark:hover:text-current focus-visible:outline-offset-2 focus-visible:outline-neutral-600 dark:focus-visible:outline-neutral-200" tabindex="0" data-tabs-target="tab" data-action="click->tabs#change:prevent" role="tab">
1703      Importmap
1704    </button>
1705    <button class="rounded-lg whitespace-nowrap text-xs font-medium transition flex gap-x-2 items-center justify-center py-2.5 px-3 w-full text-center text-current hover:text-current dark:text-current dark:hover:text-current focus-visible:outline-offset-2 focus-visible:outline-neutral-600 dar
1705k:focus-visible:outline-neutral-200" tabindex="0" data-tabs-target="tab" data-action="click->tabs#change:prevent" role="tab">
1706      NPM
1707    </button>
1708    <button class="rounded-lg whitespace-nowrap text-xs font-medium transition flex gap-x-2 items-center justify-center py-2.5 px-3 w-full text-center text-current hover:text-current dark:text-current dark:hover:text-current focus-visible:outline-offset-2 focus-visible:outline-neutral-600 dark:focus-visible:outline-neutral-200" tabindex="0" data-tabs-target="tab" data-action="click->tabs#change:prevent" role="tab">
1709      Yarn
1710    </button>
1711  </div>
1712
1713  <!-- Importmap Panel -->
1714  <div data-tabs-target="panel" role="tabpanel">
1715    <div class="rounded-t-xl overflow-hidden border-t border-x border-[#2D2D2D] max-h-lg">
1716      <div class="p-1 text-sm bg-neutral-900">
1717        <button type="button" class="px-2 pt-2 pb-1.5 text-xs text-neutral-400 dark:text-white/50 flex items-center gap-1" data-controller="clipboard" data-clipboard-text="config/importmap.rb" data-clipboard-success-message-value="Controller Copied" data-clipboard-error-message-value="Copy Failed!" data-clipboard-show-tooltip-value="false" data-clipboard-tooltip-duration-value="1500">
1718          <span data-clipboard-target="copyContent" class="flex items-center gap-1.5">
1719            <svg xmlns="http://www.w3.org/2000/svg" class="size-4" width="18" height="18" viewBox="0 0 18 18"><g fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" stroke="currentColor"><path d="M8.0425 15.75H4.75C3.645 15.75 2.75 14.855 2.75 13.75V3.75C2.75 2.645 3.645 1.75 4.75 1.75H12.75C13.855 1.75 14.75 2.645 14.75 3.75V7.1048"></path> <path d="M5.75 5.75H11.75"></path> <path d="M5.75 8.75H11.75"></path> <path d="M5.75 11.75H8.25"></path> <path d="M13.7959 15.4542L16.9571 12.293C17.3476 11.9025 17.3476 11.2693 16.9571 10.8788L16.3713 10.293C15.9808 9.9025 15.3476 9.9025 14.9571 10.293L11.7959 13.4542L11.0001 16.2501L13.7959 15.4542Z"></path></g></svg>
1720            Add to config/importmap.rb
1721          </span>
1722          <span data-clipboard-target="copiedContent" class="hidden flex items-center gap-1.5 text-green-400">
1723            <svg xmlns="http://www.w3.org/2000/svg" class="size-4" width="18" height="18" viewBox="0 0 18 18"><g fill="currentColor"><path d="M6.75,15h-.002c-.227,0-.442-.104-.583-.281L2.165,9.719c-.259-.324-.207-.795,.117-1.054,.325-.259,.796-.206,1.054,.117l3.418,4.272L14.667,3.278c.261-.322,.732-.373,1.055-.111,.322,.261,.372,.733,.111,1.055L7.333,14.722c-.143,.176-.357,.278-.583,.278Z" fill="currentColor"></path></g></svg>
1724            Add to config/importmap.rb
1725          </span>
1726        </button>
1727      </div>
1728    </div>
1729    <div class="relative">
1730      <pre data-controller="highlight" class="language-ruby !mb-6 !bg-neutral-900 rounded-b-xl overflow-hidden border border-[#2D2D2D]"><code class="language-ruby !bg-neutral-900 max-h-[300px] !overflow-y-scroll !overflow-x-scroll text-sm small-scrollbar">pin "embla-carousel", to: "https://cdn.jsdelivr.net/npm/embla-carousel/embla-carousel.esm.js"
1731pin "embla-carousel-wheel-gestures", to: "https://cdn.jsdelivr.net/npm/embla-carousel-wheel-gestures@latest/+esm"</code></pre>
1732      <button type="button" class="absolute top-2 right-4 flex items-center gap-1.5 rounded-lg px-3.5 py-2 text-sm font-medium shadow-xs focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-600 bg-neutral-800/50 text-neutral-50 hover:bg-neutral-700/50 dark:focus-visible:outline-neutral-200 border border-neutral-700"
1733              data-controller="clipboard"
1734              data-clipboard-text='pin "embla-carousel", to: "https://cdn.jsdelivr.net/npm/embla-carousel/embla-carousel.esm.js"
1735pin "embla-carousel-wheel-gestures", to: "https://cdn.jsdelivr.net/npm/embla-carousel-wheel-gestures@latest/+esm"'
1736              data-clipboard-error-message-value="Copy Failed!"
1737              data-clipboard-show-tooltip-value="false"
1738              data-clipboard-tooltip-duration-value="1500">
1739        <span data-clipboard-target="copyContent" class="flex items-center gap-1.5">
1740          <svg xmlns="http://www.w3.org/2000/svg" class="size-4" width="18" height="18" viewBox="0 0 18 18"><g fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" stroke="currentColor"><rect x="1.75" y="1.75" width="11" height="11" rx="2" ry="2" transform="translate(14.5 14.5) rotate(-180)"></rect><path d="M15.199,6.002l1.029,6.924c.162,1.093-.592,2.11-1.684,2.272l-6.924,1.029c-.933,.139-1.81-.39-2.148-1.228"></path><line x1="7.25" y1="9.75" x2="7.25" y2="4.75"></line><line x1="4.75" y1="7.25" x2="9.75" y2="7.25"></line></g></svg>
1741          Copy
1742        </span>
1743        <span data-clipboard-target="copiedContent" class="hidden flex items-center gap-1.5 text-green-400">
1744          <svg xmlns="http://www.w3.org/2000/svg" class="size-4" width="18" height="18" viewBox="0 0 18 18"><g fill="currentColor"><path d="M6.75,15h-.002c-.227,0-.442-.104-.583-.281L2.165,9.719c-.259-.324-.207-.795,.117-1.054,.325-.259,.796-.206,1.054,.117l3.418,4.272L14.667,3.278c.261-.322,.732-.373,1.055-.111,.322,.261,.372,.733,.111,1.055L7.333,14.722c-.143,.176-.357,.278-.583,.278Z" fill="currentColor"></path></g></svg>
1745          Copied!
1746        </span>
1747      </button>
1748    </div>
1749  </div>
1750
1751  <!-- NPM Panel -->
1752  <div data-tabs-target="panel" role="tabpanel">
1753    <div class="rounded-t-xl overflow-hidden border-t border-x border-[#2D2D2D] max-h-lg">
1754      <div class="p-1 text-sm bg-neutral-900">
1755        <div class="px-2 pt-2 pb-1.5 text-xs text-neutral-400 dark:text-white/50 flex items-center gap-1">
1756          <svg xmlns="http://www.w3.org/2000/svg" class="size-4" width="18" height="18" viewBox="0 0 18 18"><g fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" stroke="currentColor"><rect x="2.75" y="2.75" width="12.5" height="12.5" rx="2" ry="2"></rect><line x1="9.75" y1="12.25" x2="12.25" y2="12.25"></line><polyline points="5.75 12.25 8.25 9.75 5.75 7.25"></polyline></g></svg>
1757          Terminal
1758        </div>
1759      </div>
1760    </div>
1761    <div class="relative">
1762      <pre data-controller="highlight" class="language-bash !mb-6 !bg-neutral-900 rounded-b-xl overflow-hidden border border-[#2D2D2D]"><code class="language-bash !bg-neutral-900 max-h-[300px] !overflow-y-scroll !overflow-x-scroll text-sm small-scrollbar">npm install embla-carousel
1763npm install embla-carousel-wheel-gestures</code></pre>
1764      <button type="button" class="absolute top-2 right-4 flex items-center gap-1.5 rounded-lg px-3.5 py-2 text-sm font-medium shadow-xs focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-600 bg-neutral-800/50 text-neutral-50 hover:bg-neutral-700/50 dark:focus-visible:outline-neutral-200 border border-neutral-700"
1765              data-controller="clipboard"
1766              data-clipboard-text="npm install embla-carousel
1767npm install embla-carousel-wheel-gestures"
1768              data-clipboard-error-message-value="Copy Failed!"
1769              data-clipboard-show-tooltip-value="false"
1770              data-clipboard-tooltip-duration-value="1500">
1771        <span data-clipboard-target="copyContent" class="flex items-center gap-1.5">
1772          <svg xmlns="http://www.w3.org/2000/svg" class="size-4" width="18" height="18" viewBox="0 0 18 18"><g fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" stroke="currentColor"><rect x="1.75" y="1.75" width="11" height="11" rx="2" ry="2" transform="translate(14.5 14.5) rotate(-180)"></rect><path d="M15.199,6.002l1.029,6.924c.162,1.093-.592,2.11-1.684,2.272l-6.924,1.029c-.933,.139-1.81-.39-2.148-1.228"></path><line x1="7.25" y1="9.75" x2="7.25" y2="4.75"></line><line x1="4.75" y1="7.25" x2="9.75" y2="7.25"></line></g></svg>
1773          Copy
1774        </span>
1775        <span data-clipboard-target="copiedContent" class="hidden flex items-center gap-1.5 text-green-400">
1776          <svg xmlns="http://www.w3.org/2000/svg" class="size-4" width="18" height="18" viewBox="0 0 18 18"><g fill="currentColor"><path d="M6.75,15h-.002c-.227,0-.442-.104-.583-.281L2.165,9.719c-.259-.324-.207-.795,.117-1.054,.325-.259,.796-.206,1.054,.117l3.418,4.272L14.667,3.278c.261-.322,.732-.373,1.055-.111,.322,.261,.372,.733,.111,1.055L7.333,14.722c-.143,.176-.357,.278-.583,.278Z" fill="currentColor"></path></g></svg>
1777          Copied!
1778        </span>
1779      </button>
1780    </div>
1781  </div>
1782
1783  <!-- Yarn Panel -->
1784  <div data-tabs-target="panel" role="tabpanel">
1785    <div class="rounded-t-xl overflow-hidden border-t border-x border-[#2D2D2D] max-h-lg">
1786      <div class="p-1 text-sm bg-neutral-900">
1787        <div class="px-2 pt-2 pb-1.5 text-xs text-neutral-400 dark:text-white/50 flex items-center gap-1">
1788          <svg xmlns="http://www.w3.org/2000/svg" class="size-4" width="18" height="18" viewBox="0 0 18 18"><g fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" stroke="currentColor"><rect x="2.75" y="2.75" width="12.5" height="12.5" rx="2" ry="2"></rect><line x1="9.75" y1="12.25" x2="12.25" y2="12.25"></line><polyline points="5.75 12.25 8.25 9.75 5.75 7.25"></polyline></g></svg>
1789          Terminal
1790        </div>
1791      </div>
1792    </div>
1793    <div class="relative">
1794      <pre data-controller="highlight" class="language-bash !mb-6 !bg-neutral-900 rounded-b-xl overflow-hidden border border-[#2D2D2D]"><code class="language-bash !bg-neutral-900 max-h-[300px] !overflow-y-scroll !overflow-x-scroll text-sm small-scrollbar">yarn add embla-carousel
1795yarn add embla-carousel-wheel-gestures</code></pre>
1796      <button type="button" class="absolute top-2 right-4 flex items-center gap-1.5 rounded-lg px-3.5 py-2 text-sm font-medium shadow-xs focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-600 bg-neutral-800/50 text-neutral-50 hover:bg-neutral-700/50 dark:focus-visible:outline-neutral-200 border border-neutral-700"
1797              data-controller="clipboard"
1798              data-clipboard-text="yarn add embla-carousel
1799yarn add embla-carousel-wheel-gestures"
1800              data-clipboard-error-message-value="Copy Failed!"
1801              data-clipboard-show-tooltip-value="false"
1802              data-clipboard-tooltip-duration-value="1500">
1803        <span data-clipboard-target="copyContent" class="flex items-center gap-1.5">
1804          <svg xmlns="http://www.w3.org/2000/svg" class="size-4" width="18" height="18" viewBox="0 0 18 18"><g fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" stroke="currentColor"><rect x="1.75" y="1.75" width="11" height="11" rx="2" ry="2" transform="translate(14.5 14.5) rotate(-180)"></rect><path d="M15.199,6.002l1.029,6.924c.162,1.093-.592,2.11-1.684,2.272l-6.924,1.029c-.933,.139-1.81-.39-2.148-1.228"></path><line x1="7.25" y1="9.75" x2="7.25" y2="4.75"></line><line x1="4.75" y1="7.25" x2="9.75" y2="7.25"></line></g></svg>
1805          Copy
1806        </span>
1807        <span data-clipboard-target="copiedContent" class="hidden flex items-center gap-1.5 text-green-400">
1808          <svg xmlns="http://www.w3.org/2000/svg" class="size-4" width="18" height="18" viewBox="0 0 18 18"><g fill="currentColor"><path d="M6.75,15h-.002c-.227,0-.442-.104-.583-.281L2.165,9.719c-.259-.324-.207-.795,.117-1.054,.325-.259,.796-.206,1.054,.117l3.418,4.272L14.667,3.278c.261-.322,.732-.373,1.055-.111,.322,.261,.372,.733,.111,1.055L7.333,14.722c-.143,.176-.357,.278-.583,.278Z" fill="currentColor"></path></g></svg>
1809          Copied!
1810        </span>
1811      </button>
1812    </div>
1813  </div>
1814</div>
1815
1816          </div>
1817        </div>
1818      </div>
1819    </div>
1820  </div>
1821
1822  <div data-accordion-target="item" data-state="closed"class="overflow-hidden bg-neutral-100/60 dark:bg-neutral-700/75 border border-black/10 dark:border-white/10 items-center justify-between font-semibold transition-all hover:bg-neutral-100 dark:hover:bg-neutral-700/50 rounded-lg">
1823    <p data-state="closed" class="flex text-base font-semibold mt-0 mb-0">
1824      <button type="button" data-accordion-target="trigger" data-action="click->accordion#toggle" aria-controls="accordion-content-6" aria-expanded="false" data-state="closed" id="accordion-trigger-6" class="w-full rounded-lg flex flex-1 p-3 items-center justify-between font-medium transition-all [&[data-state=open]>svg]:rotate-180 focus:outline-neutral-700 dark:focus:outline-white focus:-outline-offset-1">
1825        <span class="flex items-center gap-2">
1826          1.6. Shoelace color picker
1827          <svg class="size-3.5" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 127 141" version="1.1">
1828            <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
1829              <g fill-rule="nonzero" fill="#0ea5e9">
1830                <path d="M102.375,90.85 C102.979,90.557 103.57,90.215 104.15,89.826 L106.425,88.501 C106.848,88.19 107.64,87.573 108.8,86.65 L108.95,86.501 C109.883,85.567 110.916,85.117 112.05,85.15 C112.55,85.15 113.133,85.284 113.8,85.55 L122.3,78 C122.533,77.8 122.767,77.633 123,77.5 L123.05,77.5 C123.95,76.967 124.7,77 125.3,77.6 C126.367,78.166 126.45,79.133 125.55,80.5 L116.65,88.399 C116.717,88.533 116.75,88.666 116.75,88.799 C116.883,89.399 116.833,89.999 116.6,90.599 C116.4,90.999 116.117,91.382 115.75,91.749 C115.379,92.145 114.996,92.528 114.6,92.898 L109.45,96.648 C108.99,96.97 108.523,97.27 108.05,97.548 C107.46,97.906 106.86,98.232 106.25,98.523 C105.985,98.644 105.718,98.76 105.45,98.874 C103.841,99.559 102.174,100.017 100.45,100.249 C99.65,106.982 97.35,113.183 93.55,118.849 C88.75,125.915 82.183,131.299 73.85,134.999 C65.55,138.699 56.567,140.549 46.9,140.549 C33.567,140.415 22.75,137.415 14.45,131.549 C4.817,124.75 0,115.7 0,104.399 L0,102.849 C0.333,95.149 2.6,87.849 6.8,80.95 C10.933,74.116 16.983,69.5 24.95,67.1 C29.05,65.9 33.166,65.3 37.3,65.3 C41.567,65.3 45.967,66.083 50.5,67.65 C55.033,69.216 60.15,71.916 65.85,75.75 L80.7,85.7 C84.833,88.399 88.6,90.233 92,91.2 C91.3,84.3 88.8,78.399 84.5,73.5 C80.2,68.533 74.717,64.9 68.05,62.6 L61.65,60.4 C55.783,58.333 51.417,56.3 48.55,54.3 C40.817,49.067 36.517,41.883 35.65,32.75 L35.5,30.05 C35.5,21.25 39.067,13.883 46.2,7.95 C52.567,2.65 60.133,0 68.9,0 C75.5,0 81.417,1.9 86.65,5.7 C91.917,9.533 94.9,14.967 95.6,22 L95.75,24.75 C95.75,29.85 94.433,34.216 91.8,37.85 C89.1,41.483 86.717,43.3 84.65,43.3 C84.21,43.269 83.802,43.21 83.425,43.125 L74.1,51.9 C72.6,52.733 71.583,52.583 71.05,51.45 C70.517,50.85 70.567,50.1 71.2,49.2 L71.25,49.15 C71.383,48.95 71.567,48.733 71.8,48.5 L80.475,40.275 C80.376,39.872 80.318,39.431 80.3,38.95 C80.3,37.817 80.75,36.867 81.65,36.1 C85.45,32.7 87.35,28.784 87.35,24.35 C87.35,19.95 85.683,16.25 82.35,13.25 C79.017,10.25 74.467,8.716 68.7,8.65 C61.5,8.65 55.583,10.817 50.95,15.15 C46.317,19.483 44,24.683 44,30.75 C44,35.65 45.883,40.066 49.65,44 C53.383,47.9 59.15,50.966 66.95,53.2 C77.883,56.367 86.233,61.7 92,69.2 C97.133,75.833 100,83.283 100.6,91.55 C101.199,91.365 101.791,91.132 102.375,90.85 Z M71.95,49.05 C71.95,49.35 72.117,49.5 72.45,49.5 C72.483,49.5 75.117,47.066 80.35,42.2 C80.35,41.533 78.95,42.45 76.15,44.95 C73.35,47.483 71.95,48.85 71.95,49.05 Z M74.15,50.8 C74.15,50.533 74.017,50.4 73.7
18305,50.4 C73.45,50.4 73.183,50.55 72.95,50.85 C72.416,50.817 72.033,50.884 71.8,51.05 C71.7,51.117 71.65,51.183 71.65,51.25 C71.65,51.45 71.783,51.6 72.05,51.7 L72.95,51.7 C73.75,51.4 74.15,51.1 74.15,50.8 Z M80.35,45.35 C80.35,44.583 79.9,44.583 79,45.35 C78.567,45.75 78.017,46.317 77.35,47.05 C77.117,47.217 76.633,47.667 75.9,48.4 C75.133,49.2 74.75,49.683 74.75,49.85 L74.8,50.2 C75,50.267 75.133,50.3 75.2,50.3 C75.233,50.3 76.1,49.5 77.8,47.9 C79.5,46.3 80.35,45.45 80.35,45.35 Z M124.2,78.3 L115.8,85.7 C116.3,85.967 116.667,86.349 116.9,86.849 L125.2,79.45 C125.266,79.116 125.217,78.849 125.05,78.649 C124.883,78.517 124.6,78.399 124.2,78.3 Z M123.75,78.05 L123.55,77.85 L116.15,83.85 L116.6,84.4 L123.75,78.05 Z M91.85,99.899 C89.65,99.333 87.617,98.649 85.75,97.849 C81.55,96.149 76.333,93.183 70.1,88.95 L59.85,82 C55.517,79.233 51.567,77.166 48,75.8 C44.4,74.467 40.867,73.8 37.4,73.8 L35.9,73.8 C27.067,74.267 20.2,77.583 15.3,83.75 C10.734,89.45 8.45,96.184 8.45,103.95 C8.45,112.683 11.95,119.516 18.95,124.45 C25.916,129.416 35.467,131.899 47.6,131.899 C57.133,131.899 65.166,130.2 71.7,126.799 C78.2,123.399 83.25,118.899 86.85,113.299 C89.55,109.033 91.217,104.566 91.85,99.899 Z"/>
1831              </g>
1832            </g>
1833          </svg>
1834        </span>
1835        <svg xmlns="http://www.w3.org/2000/svg" data-accordion-target="icon" class="size-4 shrink-0 transition-transform duration-300" width="18" height="18" viewBox="0 0 18 18"><g fill="currentColor"><path d="M8.99999 13.5C8.80799 13.5 8.61599 13.4271 8.46999 13.2801L2.21999 7.03005C1.92699 6.73705 1.92699 6.26202 2.21999 5.96902C2.51299 5.67602 2.98799 5.67602 3.28099 5.96902L9.00099 11.689L14.721 5.96902C15.014 5.67602 15.489 5.67602 15.782 5.96902C16.075 6.26202 16.075 6.73705 15.782 7.03005L9.53199 13.2801C9.38599 13.4261 9.19399 13.5 9.00199 13.5H8.99999Z"></path></g></svg>
1836      </button>
1837    </p>
1838    <div data-accordion-target="content" data-state="closed" id="accordion-content-6" role="region" aria-labelledby="accordion-trigger-6" class="grid transition-[grid-template-rows] duration-300 ease-in-out data-[state=open]:grid-rows-[1fr] data-[state=closed]:grid-rows-[0fr]" hidden>
1839      <div class="overflow-hidden min-h-0">
1840        <div class="opacity-0 transition-opacity duration-300 data-[state=open]:opacity-100" data-state="closed">
1841          <p class="px-4 py-3 bg-white dark:bg-neutral-700/50 text-sm font-normal">
1842            <a href="https://shoelace.style/components/color-picker" class="text-neutral-900 dark:text-white underline hover:opacity-80" target="_blank">Shoelace color picker</a> is a lightweight color picker with custom styling. We use it in the color picker component.
1843          </p>
1844          <div class="px-4 py-3 bg-white dark:bg-neutral-700/50 text-sm font-normal">
1845            <div>
1846  <div class="rounded-t-xl overflow-hidden border-t border-x border-[#2D2D2D] max-h-lg">
1847    <div class="p-1 text-sm bg-neutral-900">
1848      <button type="button" class="px-2 pt-2 pb-1.5 text-xs text-neutral-400 dark:text-white/50 flex items-center gap-1" data-controller="clipboard" data-clipboard-text="app/views/layouts/application.html.erb" data-clipboard-success-message-value="Controller Copied" data-clipboard-error-message-value="Copy Failed!" data-clipboard-show-tooltip-value="false" data-clipboard-tooltip-duration-value="1500">
1849        <span data-clipboard-target="copyContent" class="flex items-center gap-1.5">
1850          <svg xmlns="http://www.w3.org/2000/svg" class="size-4" width="18" height="18" viewBox="0 0 18 18"><g fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" stroke="currentColor"><path d="M8.0425 15.75H4.75C3.645 15.75 2.75 14.855 2.75 13.75V3.75C2.75 2.645 3.645 1.75 4.75 1.75H12.75C13.855 1.75 14.75 2.645 14.75 3.75V7.1048"></path> <path d="M5.75 5.75H11.75"></path> <path d="M5.75 8.75H11.75"></path> <path d="M5.75 11.75H8.25"></path> <path d="M13.7959 15.4542L16.9571 12.293C17.3476 11.9025 17.3476 11.2693 16.9571 10.8788L16.3713 10.293C15.9808 9.9025 15.3476 9.9025 14.9571 10.293L11.7959 13.4542L11.0001 16.2501L13.7959 15.4542Z"></path></g></svg>
1851          Add to your layout's &lt;head&gt; section
1852        </span>
1853        <span data-clipboard-target="copiedContent" class="hidden flex items-center gap-1.5 text-green-400">
1854          <svg xmlns="http://www.w3.org/2000/svg" class="size-4" width="18" height="18" viewBox="0 0 18 18"><g fill="currentColor"><path d="M6.75,15h-.002c-.227,0-.442-.104-.583-.281L2.165,9.719c-.259-.324-.207-.795,.117-1.054,.325-.259,.796-.206,1.054,.117l3.418,4.272L14.667,3.278c.261-.322,.732-.373,1.055-.111,.322,.261,.372,.733,.111,1.055L7.333,14.722c-.143,.176-.357,.278-.583,.278Z" fill="currentColor"></path></g></svg>
1855          Add to your layout's &lt;head&gt; section
1856        </span>
1857      </button>
1858    </div>
1859  </div>
1860  <div class="relative">
1861    <pre data-controller="highlight" class="language-erb !mb-6 !bg-neutral-900 rounded-b-xl overflow-hidden border border-[#2D2D2D]"><code class="language-erb !bg-neutral-900 max-h-[300px] !overflow-y-scroll !overflow-x-scroll text-sm small-scrollbar">&lt;!-- Shoelace --&gt;
1862&lt;script type=&quot;module&quot; src=&quot;https://cdn.jsdelivr.net/npm/@shoelace-style/[email protected]/cdn/components/color-picker/color-picker.js&quot;&gt;&lt;/script&gt;
1863&lt;link
1864  rel=&quot;stylesheet&quot;
1865  href=&quot;https://cdn.jsdelivr.net/npm/@shoelace-style/[email protected]/cdn/themes/light.css&quot;
1866/&gt;
1867&lt;link
1868  rel=&quot;stylesheet&quot;
1869  href=&quot;https://cdn.jsdelivr.net/npm/@shoelace-style/[email protected]/cdn/themes/dark.css&quot;
1870/&gt;
1871</code></pre>
1872    <button type="button" class="absolute top-2 right-4 flex items-center gap-1.5 rounded-lg px-3.5 py-2 text-sm font-medium shadow-xs focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-600 bg-neutral-800/50 text-neutral-50 hover:bg-neutral-700/50 dark:focus-visible:outline-neutral-200 border border-neutral-700"
1873            data-controller="clipboard"
1874            data-clipboard-text='&lt;!-- Shoelace --&gt;
1875&lt;script type=&quot;module&quot; src=&quot;https://cdn.jsdelivr.net/npm/@shoelace-style/[email protected]/cdn/components/color-picker/color-picker.js&quot;&gt;&lt;/script&gt;
1876&lt;link
1877  rel=&quot;stylesheet&quot;
1878  href=&quot;https://cdn.jsdelivr.net/npm/@shoelace-style/[email protected]/cdn/themes/light.css&quot;
1879/&gt;
1880&lt;link
1881  rel=&quot;stylesheet&quot;
1882  href=&quot;https://cdn.jsdelivr.net/npm/@shoelace-style/[email protected]/cdn/themes/dark.css&quot;
1883/&gt;
1884'
1885            data-clipboard-error-message-value="Copy Failed!"
1886            data-clipboard-show-tooltip-value="false"
1887            data-clipboard-tooltip-duration-value="1500">
1888      <span data-clipboard-target="copyContent" class="flex items-center gap-1.5">
1889        <svg xmlns="http://www.w3.org/2000/svg" class="size-4" width="18" height="18" viewBox="0 0 18 18"><g fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" stroke="currentColor"><rect x="1.75" y="1.75" width="11" height="11" rx="2" ry="2" transform="translate(14.5 14.5) rotate(-180)"></rect><path d="M15.199,6.002l1.029,6.924c.162,1.093-.592,2.11-1.684,2.272l-6.924,1.029c-.933,.139-1.81-.39-2.148-1.228"></path><line x1="7.25" y1="9.75" x2="7.25" y2="4.75"></line><line x1="4.75" y1="7.25" x2="9.75" y2="7.25"></line></g></svg>
1890        Copy
1891      </span>
1892      <span data-clipboard-target="copiedContent" class="hidden flex items-center gap-1.5 text-green-400">
1893        <svg xmlns="http://www.w3.org/2000/svg" class="size-4" width="18" height="18" viewBox="0 0 18 18"><g fill="currentColor"><path d="M6.75,15h-.002c-.227,0-.442-.104-.583-.281L2.165,9.719c-.259-.324-.207-.795,.117-1.054,.325-.259,.796-.206,1.054,.117l3.418,4.272L14.667,3.278c.261-.322,.732-.373,1.055-.111,.322,.261,.372,.733,.111,1.055L7.333,14.722c-.143,.176-.357,.278-.583,.278Z" fill="currentColor"></path></g></svg>
1894        Copied!
1895      </span>
1896    </button>
1897  </div>
1898</div>
1899
1900          </div>
1901        </div>
1902      </div>
1903    </div>
1904  </div>
1905
1906  <div data-accordion-target="item" data-state="closed"class="overflow-hidden bg-neutral-100/60 dark:bg-neutral-700/75 border border-black/10 dark:border-white/10 items-center justify-between font-semibold transition-all hover:bg-neutral-100 dark:hover:bg-neutral-700/50 rounded-lg">
1907    <p data-state="closed" class="flex text-base font-semibold mt-0 mb-0">
1908      <button type="button" data-accordion-target="trigger" data-action="click->
1908accordion#toggle" aria-controls="accordion-content-7" aria-expanded="false" data-state="closed" id="accordion-trigger-7" class="w-full rounded-lg flex flex-1 p-3 items-center justify-between font-medium transition-all [&[data-state=open]>svg]:rotate-180 focus:outline-neutral-700 dark:focus:outline-white focus:-outline-offset-1">
1909        <span class="flex items-center gap-2">
1910          1.7. Tom Select
1911          <svg xmlns="http://www.w3.org/2000/svg" class="size-3.5" width="18" height="18" viewBox="0 0 18 18"><g fill="currentColor"><path d="M14.25,13H3.75c-.414,0-.75-.336-.75-.75s.336-.75,.75-.75H14.25c.414,0,.75,.336,.75,.75s-.336,.75-.75,.75Z"></path><path d="M14.25,16H3.75c-.414,0-.75-.336-.75-.75s.336-.75,.75-.75H14.25c.414,0,.75,.336,.75,.75s-.336,.75-.75,.75Z"></path><path d="M14.25,2H3.75c-1.517,0-2.75,1.233-2.75,2.75v2.5c0,1.517,1.233,2.75,2.75,2.75H14.25c1.517,0,2.75-1.233,2.75-2.75v-2.5c0-1.517-1.233-2.75-2.75-2.75Zm-5.75,6.5H3.75c-.689,0-1.25-.561-1.25-1.25v-2.5c0-.689,.561-1.25,1.25-1.25h4.75v5Zm5.833-2.833l-1.25,1.667c-.078,.105-.202,.167-.333,.167s-.255-.062-.333-.167l-1.25-1.667c-.095-.126-.11-.295-.039-.436,.071-.141,.215-.23,.373-.23h2.5c.158,0,.302,.089,.373,.23,.07,.141,.055,.31-.039,.436Z"></path></g></svg>
1912        </span>
1913        <svg xmlns="http://www.w3.org/2000/svg" data-accordion-target="icon" class="size-4 shrink-0 transition-transform duration-300" width="18" height="18" viewBox="0 0 18 18"><g fill="currentColor"><path d="M8.99999 13.5C8.80799 13.5 8.61599 13.4271 8.46999 13.2801L2.21999 7.03005C1.92699 6.73705 1.92699 6.26202 2.21999 5.96902C2.51299 5.67602 2.98799 5.67602 3.28099 5.96902L9.00099 11.689L14.721 5.96902C15.014 5.67602 15.489 5.67602 15.782 5.96902C16.075 6.26202 16.075 6.73705 15.782 7.03005L9.53199 13.2801C9.38599 13.4261 9.19399 13.5 9.00199 13.5H8.99999Z"></path></g></svg>
1914      </button>
1915    </p>
1916    <div data-accordion-target="content" data-state="closed" id="accordion-content-7" role="region" aria-labelledby="accordion-trigger-7" class="grid transition-[grid-template-rows] duration-300 ease-in-out data-[state=open]:grid-rows-[1fr] data-[state=closed]:grid-rows-[0fr]" hidden>
1917      <div class="overflow-hidden min-h-0">
1918        <div class="opacity-0 transition-opacity duration-300 data-[state=open]:opacity-100" data-state="closed">
1919          <p class="px-4 py-3 bg-white dark:bg-neutral-700/50 text-sm font-normal">
1920            <a href="https://tom-select.js.org/" class="text-neutral-900 dark:text-white underline hover:opacity-80" target="_blank">Tom Select</a> is a custom select component. We use it in the select & combobox components.
1921          </p>
1922          <div class="px-4 py-3 bg-white dark:bg-neutral-700/50 text-sm font-normal">
1923            <div class="mb-6" data-controller="tabs" data-tabs-active-tab-class="bg-neutral-900 text-white shadow-sm dark:bg-white dark:text-neutral-900 dark:shadow-sm hover:ring-neutral-800 dark:hover:bg-neutral-50 dark:hover:ring-white hover:text-white dark:hover:text-neutral-900" data-tabs-inactive-tab-class="hover:bg-white/75 ring-1 ring-transparent hover:ring-white dark:hover:bg-neutral-700 dark:hover:ring-neutral-600 text-neutral-600 dar
1923k:text-neutral-400 hover:text-neutral-900 dark:hover:text-neutral-200" data-tabs-index-value="0">
1924  <!-- Tab Controls -->
1925  <div class="opacity-0 transition-opacity duration-200 relative inline-grid items-center gap-2 justify-center grid-cols-3 p-1 mb-4 bg-neutral-100 border border-neutral-200 rounded-xl select-none dark:bg-neutral-800 dark:border-neutral-700" data-tabs-target="tabList" role="tablist">
1926    <button class="rounded-lg whitespace-nowrap text-xs font-medium transition flex gap-x-2 items-center justify-center py-2.5 px-3 w-full text-center text-current hover:text-current dark:text-current dark:hover:text-current focus-visible:outline-offset-2 focus-visible:outline-neutral-600 dark:focus-visible:outline-neutral-200" tabindex="0" data-tabs-target="tab" data-action="click->tabs#change:prevent" role="tab">
1927      Importmap
1928    </button>
1929    <button class="rounded-lg whitespace-nowrap text-xs font-medium transition flex gap-x-2 items-center justify-center py-2.5 px-3 w-full text-center text-current hover:text-current dark:text-current dark:hover:text-current focus-visible:outline-offset-2 focus-visible:outline-neutral-600 dar
1929k:focus-visible:outline-neutral-200" tabindex="0" data-tabs-target="tab" data-action="click->tabs#change:prevent" role="tab">
1930      NPM
1931    </button>
1932    <button class="rounded-lg whitespace-nowrap text-xs font-medium transition flex gap-x-2 items-center justify-center py-2.5 px-3 w-full text-center text-current hover:text-current dark:text-current dark:hover:text-current focus-visible:outline-offset-2 focus-visible:outline-neutral-600 dark:focus-visible:outline-neutral-200" tabindex="0" data-tabs-target="tab" data-action="click->tabs#change:prevent" role="tab">
1933      Yarn
1934    </button>
1935  </div>
1936
1937  <!-- Importmap Panel -->
1938  <div data-tabs-target="panel" role="tabpanel">
1939    <div class="rounded-t-xl overflow-hidden border-t border-x border-[#2D2D2D] max-h-lg">
1940      <div class="p-1 text-sm bg-neutral-900">
1941        <button type="button" class="px-2 pt-2 pb-1.5 text-xs text-neutral-400 dark:text-white/50 flex items-center gap-1" data-controller="clipboard" data-clipboard-text="config/importmap.rb" data-clipboard-success-message-value="Controller Copied" data-clipboard-error-message-value="Copy Failed!" data-clipboard-show-tooltip-value="false" data-clipboard-tooltip-duration-value="1500">
1942          <span data-clipboard-target="copyContent" class="flex items-center gap-1.5">
1943            <svg xmlns="http://www.w3.org/2000/svg" class="size-4" width="18" height="18" viewBox="0 0 18 18"><g fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" stroke="currentColor"><path d="M8.0425 15.75H4.75C3.645 15.75 2.75 14.855 2.75 13.75V3.75C2.75 2.645 3.645 1.75 4.75 1.75H12.75C13.855 1.75 14.75 2.645 14.75 3.75V7.1048"></path> <path d="M5.75 5.75H11.75"></path> <path d="M5.75 8.75H11.75"></path> <path d="M5.75 11.75H8.25"></path> <path d="M13.7959 15.4542L16.9571 12.293C17.3476 11.9025 17.3476 11.2693 16.9571 10.8788L16.3713 10.293C15.9808 9.9025 15.3476 9.9025 14.9571 10.293L11.7959 13.4542L11.0001 16.2501L13.7959 15.4542Z"></path></g></svg>
1944            Add to config/importmap.rb
1945          </span>
1946          <span data-clipboard-target="copiedContent" class="hidden flex items-center gap-1.5 text-green-400">
1947            <svg xmlns="http://www.w3.org/2000/svg" class="size-4" width="18" height="18" viewBox="0 0 18 18"><g fill="currentColor"><path d="M6.75,15h-.002c-.227,0-.442-.104-.583-.281L2.165,9.719c-.259-.324-.207-.795,.117-1.054,.325-.259,.796-.206,1.054,.117l3.418,4.272L14.667,3.278c.261-.322,.732-.373,1.055-.111,.322,.261,.372,.733,.111,1.055L7.333,14.722c-.143,.176-.357,.278-.583,.278Z" fill="currentColor"></path></g></svg>
1948            Add to config/importmap.rb
1949          </span>
1950        </button>
1951      </div>
1952    </div>
1953    <div class="relative">
1954      <pre data-controller="highlight" class="language-ruby !mb-6 !bg-neutral-900 rounded-b-xl overflow-hidden border border-[#2D2D2D]"><code class="language-ruby !bg-neutral-900 max-h-[300px] !overflow-y-scroll !overflow-x-scroll text-sm small-scrollbar">pin "tom-select", to: "https://cdn.jsdelivr.net/npm/[email protected]/+esm"</code></pre>
1955      <button type="button" class="absolute top-2 right-4 flex items-center gap-1.5 rounded-lg px-3.5 py-2 text-sm font-medium shadow-xs focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-600 bg-neutral-800/50 text-neutral-50 hover:bg-neutral-700/50 dark:focus-visible:outline-neutral-200 border border-neutral-700"
1956              data-controller="clipboard"
1957              data-clipboard-text='pin "tom-select", to: "https://cdn.jsdelivr.net/npm/[email protected]/+esm"'
1958              data-clipboard-error-message-value="Copy Failed!"
1959              data-clipboard-show-tooltip-value="false"
1960              data-clipboard-tooltip-duration-value="1500">
1961        <span data-clipboard-target="copyContent" class="flex items-center gap-1.5">
1962          <svg xmlns="http://www.w3.org/2000/svg" class="size-4" width="18" height="18" viewBox="0 0 18 18"><g fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" stroke="currentColor"><rect x="1.75" y="1.75" width="11" height="11" rx="2" ry="2" transform="translate(14.5 14.5) rotate(-180)"></rect><path d="M15.199,6.002l1.029,6.924c.162,1.093-.592,2.11-1.684,2.272l-6.924,1.029c-.933,.139-1.81-.39-2.148-1.228"></path><line x1="7.25" y1="9.75" x2="7.25" y2="4.75"></line><line x1="4.75" y1="7.25" x2="9.75" y2="7.25"></line></g></svg>
1963          Copy
1964        </span>
1965        <span data-clipboard-target="copiedContent" class="hidden flex items-center gap-1.5 text-green-400">
1966          <svg xmlns="http://www.w3.org/2000/svg" class="size-4" width="18" height="18" viewBox="0 0 18 18"><g fill="currentColor"><path d="M6.75,15h-.002c-.227,0-.442-.104-.583-.281L2.165,9.719c-.259-.324-.207-.795,.117-1.054,.325-.259,.796-.206,1.054,.117l3.418,4.272L14.667,3.278c.261-.322,.732-.373,1.055-.111,.322,.261,.372,.733,.111,1.055L7.333,14.722c-.143,.176-.357,.278-.583,.278Z" fill="currentColor"></path></g></svg>
1967          Copied!
1968        </span>
1969      </button>
1970    </div>
1971  </div>
1972
1973  <!-- NPM Panel -->
1974  <div data-tabs-target="panel" role="tabpanel">
1975    <div class="rounded-t-xl overflow-hidden border-t border-x border-[#2D2D2D] max-h-lg">
1976      <div class="p-1 text-sm bg-neutral-900">
1977        <div class="px-2 pt-2 pb-1.5 text-xs text-neutral-400 dark:text-white/50 flex items-center gap-1">
1978          <svg xmlns="http://www.w3.org/2000/svg" class="size-4" width="18" height="18" viewBox="0 0 18 18"><g fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" stroke="currentColor"><rect x="2.75" y="2.75" width="12.5" height="12.5" rx="2" ry="2"></rect><line x1="9.75" y1="12.25" x2="12.25" y2="12.25"></line><polyline points="5.75 12.25 8.25 9.75 5.75 7.25"></polyline></g></svg>
1979          Terminal
1980        </div>
1981      </div>
1982    </div>
1983    <div class="relative">
1984      <pre data-controller="highlight" class="language-bash !mb-6 !bg-neutral-900 rounded-b-xl overflow-hidden border border-[#2D2D2D]"><code class="language-bash !bg-neutral-900 max-h-[300px] !overflow-y-scroll !overflow-x-scroll text-sm small-scrollbar">npm install tom-select</code></pre>
1985      <button type="button" class="absolute top-2 right-4 flex items-center gap-1.5 rounded-lg px-3.5 py-2 text-sm font-medium shadow-xs focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-600 bg-neutral-800/50 text-neutral-50 hover:bg-neutral-700/50 dark:focus-visible:outline-neutral-200 border border-neutral-700"
1986              data-controller="clipboard"
1987              data-clipboard-text="npm install tom-select"
1988              data-clipboard-error-message-value="Copy Failed!"
1989              data-clipboard-show-tooltip-value="false"
1990              data-clipboard-tooltip-duration-value="1500">
1991        <span data-clipboard-target="copyContent" class="flex items-center gap-1.5">
1992          <svg xmlns="http://www.w3.org/2000/svg" class="size-4" width="18" height="18" viewBox="0 0 18 18"><g fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" stroke="currentColor"><rect x="1.75" y="1.75" width="11" height="11" rx="2" ry="2" transform="translate(14.5 14.5) rotate(-180)"></rect><path d="M15.199,6.002l1.029,6.924c.162,1.093-.592,2.11-1.684,2.272l-6.924,1.029c-.933,.139-1.81-.39-2.148-1.228"></path><line x1="7.25" y1="9.75" x2="7.25" y2="4.75"></line><line x1="4.75" y1="7.25" x2="9.75" y2="7.25"></line></g></svg>
1993          Copy
1994        </span>
1995        <span data-clipboard-target="copiedContent" class="hidden flex items-center gap-1.5 text-green-400">
1996          <svg xmlns="http://www.w3.org/2000/svg" class="size-4" width="18" height="18" viewBox="0 0 18 18"><g fill="currentColor"><path d="M6.75,15h-.002c-.227,0-.442-.104-.583-.281L2.165,9.719c-.259-.324-.207-.795,.117-1.054,.325-.259,.796-.206,1.054,.117l3.418,4.272L14.667,3.278c.261-.322,.732-.373,1.055-.111,.322,.261,.372,.733,.111,1.055L7.333,14.722c-.143,.176-.357,.278-.583,.278Z" fill="currentColor"></path></g></svg>
1997          Copied!
1998        </span>
1999      </button>
2000    </div>
2001  </div>
2002
2003  <!-- Yarn Panel -->
2004  <div data-tabs-target="panel" role="tabpanel">
2005    <div class="rounded-t-xl overflow-hidden border-t border-x border-[#2D2D2D] max-h-lg">
2006      <div class="p-1 text-sm bg-neutral-900">
2007        <div class="px-2 pt-2 pb-1.5 text-xs text-neutral-400 dark:text-white/50 flex items-center gap-1">
2008          <svg xmlns="http://www.w3.org/2000/svg" class="size-4" width="18" height="18" viewBox="0 0 18 18"><g fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" stroke="currentColor"><rect x="2.75" y="2.75" width="12.5" height="12.5" rx="2" ry="2"></rect><line x1="9.75" y1="12.25" x2="12.25" y2="12.25"></line><polyline points="5.75 12.25 8.25 9.75 5.75 7.25"></polyline></g></svg>
2009          Terminal
2010        </div>
2011      </div>
2012    </div>
2013    <div class="relative">
2014      <pre data-controller="highlight" class="language-bash !mb-6 !bg-neutral-900 rounded-b-xl overflow-hidden border border-[#2D2D2D]"><code class="language-bash !bg-neutral-900 max-h-[300px] !overflow-y-scroll !overflow-x-scroll text-sm small-scrollbar">yarn add tom-select</code></pre>
2015      <button type="button" class="absolute top-2 right-4 flex items-center gap-1.5 rounded-lg px-3.5 py-2 text-sm font-medium shadow-xs focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-600 bg-neutral-800/50 text-neutral-50 hover:bg-neutral-700/50 dark:focus-visible:outline-neutral-200 border border-neutral-700"
2016              data-controller="clipboard"
2017              data-clipboard-text="yarn add tom-select"
2018              data-clipboard-error-message-value="Copy Failed!"
2019              data-clipboard-show-tooltip-value="false"
2020              data-clipboard-tooltip-duration-value="1500">
2021        <span data-clipboard-target="copyContent" class="flex items-center gap-1.5">
2022          <svg xmlns="http://www.w3.org/2000/svg" class="size-4" width="18" height="18" viewBox="0 0 18 18"><g fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" stroke="currentColor"><rect x="1.75" y="1.75" width="11" height="11" rx="2" ry="2" transform="translate(14.5 14.5) rotate(-180)"></rect><path d="M15.199,6.002l1.029,6.924c.162,1.093-.592,2.11-1.684,2.272l-6.924,1.029c-.933,.139-1.81-.39-2.148-1.228"></path><line x1="7.25" y1="9.75" x2="7.25" y2="4.75"></line><line x1="4.75" y1="7.25" x2="9.75" y2="7.25"></line></g></svg>
2023          Copy
2024        </span>
2025        <span data-clipboard-target="copiedContent" class="hidden flex items-center gap-1.5 text-green-400">
2026          <svg xmlns="http://www.w3.org/2000/svg" class="size-4" width="18" height="18" viewBox="0 0 18 18"><g fill="currentColor"><path d="M6.75,15h-.002c-.227,0-.442-.104-.583-.281L2.165,9.719c-.259-.324-.207-.795,.117-1.054,.325-.259,.796-.206,1.054,.117l3.418,4.272L14.667,3.278c.261-.322,.732-.373,1.055-.111,.322,.261,.372,.733,.111,1.055L7.333,14.722c-.143,.176-.357,.278-.583,.278Z" fill="currentColor"></path></g></svg>
2027          Copied!
2028        </span>
2029      </button>
2030    </div>
2031  </div>
2032</div>
2033
2034<p class="mb-4 text-sm text-neutral-500 dark:text-neutral-400">And add this to your <code class="code-inline-text">&lt;head&gt;</code> HTML tag:</p>
2035
2036<div class="mt-4 rounded-t-xl overflow-hidden border-t border-x border-[#2D2D2D] max-h-lg">
2037  <div class="p-1 text-sm bg-neutral-900">
2038    <button type="button" class="px-2 pt-2 pb-1.5 text-xs text-neutral-400 dark:text-white/50 flex items-center gap-1"
2039          data-controller="clipboard"
2040          data-clipboard-text="application.html.erb"
2041          data-clipboard-success-message-value="Controller Copied"
2042          data-clipboard-error-message-value="Copy Failed!"
2043          data-clipboard-show-tooltip-value="false"
2044          data-clipboard-tooltip-duration-value="1500">
2045      <span data-clipboard-target="copyContent" class="flex items-center gap-1.5">
2046        <svg xmlns="http://www.w3.org/2000/svg" class="size-4" width="18" height="18" viewBox="0 0 18 18"><g fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" stroke="currentColor"><path d="M8.0425 15.75H4.75C3.645 15.75 2.75 14.855 2.75 13.75V3.75C2.75 2.645 3.645 1.75 4.75 1.75H12.75C13.855 1.75 14.75 2.645 14.75 3.75V7.1048"></path> <path d="M5.75 5.75H11.75"></path> <path d="M5.75 8.75H11.75"></path> <path d="M5.75 11.75H8.25"></path> <path d="M13.7959 15.4542L16.9571 12.293C17.3476 11.9025 17.3476 11.2693 16.9571 10.8788L16.3713 10.293C15.9808 9.9025 15.3476 9.9025 14.9571 10.293L11.7959 13.4542L11.0001 16.2501L13.7959 15.4542Z"></path></g></svg>
2047        application.html.erb
2048      </span>
2049      <span data-clipboard-target="copiedContent" class="hidden flex items-center gap-1.5 text-green-400">
2050        <svg xmlns="http://www.w3.org/2000/svg" class="size-4" width="18" height="18" viewBox="0 0 18 18"><g fill="currentColor"><path d="M6.75,15h-.002c-.227,0-.442-.104-.583-.281L2.165,9.719c-.259-.324-.207-.795,.117-1.054,.325-.259,.796-.206,1.054,.117l3.418,4.272L14.667,3.278c.261-.322,.732-.373,1.055-.111,.322,.261,.372,.733,.111,1.055L7.333,14.722c-.143,.176-.357,.278-.583,.278Z" fill="currentColor"></path></g></svg>
2051        application.html.erb
2052      </span>
2053    </button>
2054  </div>
2055</div>
2056<div class="relative">
2057  <pre data-controller="highlight" class="language-erb !mb-4 !bg-neutral-900 rounded-b-xl overflow-hidden border border-[#2D2D2D]"><code class="language-erb !bg-neutral-900 max-h-[300px] !overflow-y-scroll !overflow-x-scroll text-sm small-scrollbar">&lt;link href=&quot;https://cdn.jsdelivr.net/npm/[email protected]/dist/css/tom-select.css&quot; rel=&quot;stylesheet&quot;&gt;</code></pre>
2058  <button type="button" class="absolute top-2 right-4 flex items-center gap-1.5 rounded-lg px-3.5 py-2 text-sm font-medium shadow-xs focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-600 bg-neutral-800/50 text-neutral-50 hover:bg-neutral-700/50 dark:focus-visible:outline-neutral-200 border border-neutral-700"
2059          data-controller="clipboard"
2060          data-clipboard-text='<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/tom-select.css" rel="stylesheet">'
2061          data-clipboard-success-message-value="CSS Copied"
2062          data-clipboard-error-message-value="Copy Failed!"
2063          data-clipboard-show-tooltip-value="false"
2064          data-clipboard-tooltip-duration-value="1500">
2065    <span data-clipboard-target="copyContent" class="flex items-center gap-1.5">
2066      <svg xmlns="http://www.w3.org/2000/svg" class="size-4" width="18" height="18" viewBox="0 0 18 18"><g fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" stroke="currentColor"><rect x="1.75" y="1.75" width="11" height="11" rx="2" ry="2" transform="translate(14.5 14.5) rotate(-180)"></rect><path d="M15.199,6.002l1.029,6.924c.162,1.093-.592,2.11-1.684,2.272l-6.924,1.029c-.933,.139-1.81-.39-2.148-1.228"></path><line x1="7.25" y1="9.75" x2="7.25" y2="4.75"></line><line x1="4.75" y1="7.25" x2="9.75" y2="7.25"></line></g></svg>
2067      Copy
2068    </span>
2069    <span data-clipboard-target="copiedContent" class="hidden flex items-center gap-1.5 text-green-400">
2070      <svg xmlns="http://www.w3.org/2000/svg" class="size-4" width="18" height="18" viewBox="0 0 18 18"><g fill="currentColor"><path d="M6.75,15h-.002c-.227,0-.442-.104-.583-.281L2.165,9.719c-.259-.324-.207-.795,.117-1.054,.325-.259,.796-.206,1.054,.117l3.418,4.272L14.667,3.278c.261-.322,.732-.373,1.055-.111,.322,.261,.372,.733,.111,1.055L7.333,14.722c-.143,.176-.357,.278-.583,.278Z" fill="currentColor"></path></g></svg>
2071      Copied!
2072    </span>
2073  </button>
2074</div>
2075
2076          </div>
2077        </div>
2078      </div>
2079    </div>
2080  </div>
2081
2082  <div data-accordion-target="item" data-state="closed"class="overflow-hidden bg-neutral-100/60 dark:bg-neutral-700/75 border border-black/10 dark:border-white/10 items-center justify-between font-semibold transition-all hover:bg-neutral-100 dark:hover:bg-neutral-700/50 rounded-lg">
2083    <p data-state="closed" class="flex text-base font-semibold mt-0 mb-0">
2084      <button type="button" data-accordion-target="trigger" data-action="click->accordion#toggle" aria-controls="accordion-content-8" aria-expanded="false" data-state="closed" id="accordion-trigger-8" class="w-full rounded-lg flex flex-1 p-3 items-center justify-between font-medium transition-all [&[data-state=open]>svg]:rotate-180 focus:outline-neutral-700 dark:focus:outline-white focus:-outline-offset-1">
2085        <span class="flex items-center gap-2">
2086          1.8. Air Datepicker
2087          <img alt="Air Datepicker" class="size-3.5" src="/assets/air-datepicker-logo-dd6584168d2424bb14484ea9e38af898c268776ac0ecacca5e8937f5c4b5966e.webp" />
2088        </span>
2089        <svg xmlns="http://www.w3.org/2000/svg" data-accordion-target="icon" class="size-4 shrink-0 transition-transform duration-300" width="18" height="18" viewBox="0 0 18 18"><g fill="currentColor"><path d="M8.99999 13.5C8.80799 13.5 8.61599 13.4271 8.46999 13.2801L2.21999 7.03005C1.92699 6.73705 1.92699 6.26202 2.21999 5.96902C2.51299 5.67602 2.98799 5.67602 3.28099 5.96902L9.00099 11.689L14.721 5.96902C15.014 5.67602 15.489 5.67602 15.782 5.96902C16.075 6.26202 16.075 6.73705 15.782 7.03005L9.53199 13.2801C9.38599 13.4261 9.19399 13.5 9.00199 13.5H8.99999Z"></path></g></svg>
2090      </button>
2091    </p>
2092    <div data-accordion-target="content" data-state="closed" id="accordion-content-8" role="region" aria-labelledby="accordion-trigger-8" class="grid transition-[grid-template-rows] duration-300 ease-in-out data-[state=open]:grid-rows-[1fr] data-[state=closed]:grid-rows-[0fr]" hidden>
2093      <div class="overflow-hidden min-h-0">
2094        <div class="opacity-0 transition-opacity duration-300 data-[state=open]:opacity-100" data-state="closed">
2095          <p class="px-4 py-3 bg-white dark:bg-neutral-700/50 text-sm font-normal">
2096            <a href="https://air-datepicker.com/" class="text-neutral-900 dark:text-white underline hover:opacity-80" target="_blank">Air Datepicker</a> is a date picker component. We use it in the date picker component.
2097          </p>
2098          <div class="px-4 py-3 bg-white dark:bg-neutral-700/50 text-sm font-normal">
2099            
2100<div class="mb-6" data-controller="tabs" data-tabs-active-tab-class="bg-neutral-900 text-white shadow-sm dark:bg-white dark:text-neutral-900 dark:shadow-sm hover:ring-neutral-800 dark:hover:bg-neutral-50 dark:hover:ring-white hover:text-white dark:hover:text-neutral-900" data-tabs-inactive-tab-class="hover:bg-white/75 ring-1 ring-transparent hover:ring-white dark:hover:bg-neutral-700 dark:hover:ring-neutral-600 text-neutral-600 dar
2100k:text-neutral-400 hover:text-neutral-900 dark:hover:text-neutral-200" data-tabs-index-value="0">
2101  <!-- Tab Controls -->
2102  <div class="opacity-0 transition-opacity duration-200 relative inline-grid items-center gap-2 justify-center grid-cols-3 p-1 mb-4 bg-neutral-100 border border-neutral-200 rounded-xl select-none dark:bg-neutral-800 dark:border-neutral-700" data-tabs-target="tabList" role="tablist">
2103    <button class="rounded-lg whitespace-nowrap text-xs font-medium transition flex gap-x-2 items-center justify-center py-2.5 px-3 w-full text-center text-current hover:text-current dark:text-current dark:hover:text-current focus-visible:outline-offset-2 focus-visible:outline-neutral-600 dark:focus-visible:outline-neutral-200" tabindex="0" data-tabs-target="tab" data-action="click->tabs#change:prevent" role="tab">
2104      Importmap
2105    </button>
2106    <button class="rounded-lg whitespace-nowrap text-xs font-medium transition flex gap-x-2 items-center justify-center py-2.5 px-3 w-full text-center text-current hover:text-current dark:text-current dark:hover:text-current focus-visible:outline-offset-2 focus-visible:outline-neutral-600 dar
2106k:focus-visible:outline-neutral-200" tabindex="0" data-tabs-target="tab" data-action="click->tabs#change:prevent" role="tab">
2107      NPM
2108    </button>
2109    <button class="rounded-lg whitespace-nowrap text-xs font-medium transition flex gap-x-2 items-center justify-center py-2.5 px-3 w-full text-center text-current hover:text-current dark:text-current dark:hover:text-current focus-visible:outline-offset-2 focus-visible:outline-neutral-600 dark:focus-visible:outline-neutral-200" tabindex="0" data-tabs-target="tab" data-action="click->tabs#change:prevent" role="tab">
2110      Yarn
2111    </button>
2112  </div>
2113
2114  <!-- Importmap Panel -->
2115  <div data-tabs-target="panel" role="tabpanel">
2116    <div class="rounded-t-xl overflow-hidden border-t border-x border-[#2D2D2D] max-h-lg">
2117      <div class="p-1 text-sm bg-neutral-900">
2118        <button type="button" class="px-2 pt-2 pb-1.5 text-xs text-neutral-400 dark:text-white/50 flex items-center gap-1" data-controller="clipboard" data-clipboard-text="config/importmap.rb" data-clipboard-success-message-value="Controller Copied" data-clipboard-error-message-value="Copy Failed!" data-clipboard-show-tooltip-value="false" data-clipboard-tooltip-duration-value="1500">
2119          <span data-clipboard-target="copyContent" class="flex items-center gap-1.5">
2120            <svg xmlns="http://www.w3.org/2000/svg" class="size-4" width="18" height="18" viewBox="0 0 18 18"><g fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" stroke="currentColor"><path d="M8.0425 15.75H4.75C3.645 15.75 2.75 14.855 2.75 13.75V3.75C2.75 2.645 3.645 1.75 4.75 1.75H12.75C13.855 1.75 14.75 2.645 14.75 3.75V7.1048"></path> <path d="M5.75 5.75H11.75"></path> <path d="M5.75 8.75H11.75"></path> <path d="M5.75 11.75H8.25"></path> <path d="M13.7959 15.4542L16.9571 12.293C17.3476 11.9025 17.3476 11.2693 16.9571 10.8788L16.3713 10.293C15.9808 9.9025 15.3476 9.9025 14.9571 10.293L11.7959 13.4542L11.0001 16.2501L13.7959 15.4542Z"></path></g></svg>
2121            Add to config/importmap.rb
2122          </span>
2123          <span data-clipboard-target="copiedContent" class="hidden flex items-center gap-1.5 text-green-400">
2124            <svg xmlns="http://www.w3.org/2000/svg" class="size-4" width="18" height="18" viewBox="0 0 18 18"><g fill="currentColor"><path d="M6.75,15h-.002c-.227,0-.442-.104-.583-.281L2.165,9.719c-.259-.324-.207-.795,.117-1.054,.325-.259,.796-.206,1.054,.117l3.418,4.272L14.667,3.278c.261-.322,.732-.373,1.055-.111,.322,.261,.372,.733,.111,1.055L7.333,14.722c-.143,.176-.357,.278-.583,.278Z" fill="currentColor"></path></g></svg>
2125            Add to config/importmap.rb
2126          </span>
2127        </button>
2128      </div>
2129    </div>
2130    <div class="relative">
2131      <pre data-controller="highlight" class="language-ruby !mb-6 !bg-neutral-900 rounded-b-xl overflow-hidden border border-[#2D2D2D]"><code class="language-ruby !bg-neutral-900 max-h-[300px] !overflow-y-scroll !overflow-x-scroll text-sm small-scrollbar">pin &quot;air-datepicker&quot;, to: &quot;https://esm.sh/[email protected]&quot;
2132pin &quot;air-datepicker/locale/en&quot;, to: &quot;https://esm.sh/[email protected]/locale/en&quot;
2133</code></pre>
2134      <button type="button" class="absolute top-2 right-4 flex items-center gap-1.5 rounded-lg px-3.5 py-2 text-sm font-medium shadow-xs focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-600 bg-neutral-800/50 text-neutral-50 hover:bg-neutral-700/50 dark:focus-visible:outline-neutral-200 border border-neutral-700"
2135              data-controller="clipboard"
2136              data-clipboard-text='pin &quot;air-datepicker&quot;, to: &quot;https://esm.sh/[email protected]&quot;
2137pin &quot;air-datepicker/locale/en&quot;, to: &quot;https://esm.sh/[email protected]/locale/en&quot;
2138'
2139              data-clipboard-error-message-value="Copy Failed!"
2140              data-clipboard-show-tooltip-value="false"
2141              data-clipboard-tooltip-duration-value="1500">
2142        <span data-clipboard-target="copyContent" class="flex items-center gap-1.5">
2143          <svg xmlns="http://www.w3.org/2000/svg" class="size-4" width="18" height="18" viewBox="0 0 18 18"><g fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" stroke="currentColor"><rect x="1.75" y="1.75" width="11" height="11" rx="2" ry="2" transform="translate(14.5 14.5) rotate(-180)"></rect><path d="M15.199,6.002l1.029,6.924c.162,1.093-.592,2.11-1.684,2.272l-6.924,1.029c-.933,.139-1.81-.39-2.148-1.228"></path><line x1="7.25" y1="9.75" x2="7.25" y2="4.75"></line><line x1="4.75" y1="7.25" x2="9.75" y2="7.25"></line></g></svg>
2144          Copy
2145        </span>
2146        <span data-clipboard-target="copiedContent" class="hidden flex items-center gap-1.5 text-green-400">
2147          <svg xmlns="http://www.w3.org/2000/svg" class="size-4" width="18" height="18" viewBox="0 0 18 18"><g fill="currentColor"><path d="M6.75,15h-.002c-.227,0-.442-.104-.583-.281L2.165,9.719c-.259-.324-.207-.795,.117-1.054,.325-.259,.796-.206,1.054,.117l3.418,4.272L14.667,3.278c.261-.322,.732-.373,1.055-.111,.322,.261,.372,.733,.111,1.055L7.333,14.722c-.143,.176-.357,.278-.583,.278Z" fill="currentColor"></path></g></svg>
2148          Copied!
2149        </span>
2150      </button>
2151    </div>
2152  </div>
2153
2154  <!-- NPM Panel -->
2155  <div data-tabs-target="panel" role="tabpanel">
2156    <div class="rounded-t-xl overflow-hidden border-t border-x border-[#2D2D2D] max-h-lg">
2157      <div class="p-1 text-sm bg-neutral-900">
2158        <div class="px-2 pt-2 pb-1.5 text-xs text-neutral-400 dark:text-white/50 flex items-center gap-1">
2159          <svg xmlns="http://www.w3.org/2000/svg" class="size-4" width="18" height="18" viewBox="0 0 18 18"><g fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" stroke="currentColor"><rect x="2.75" y="2.75" width="12.5" height="12.5" rx="2" ry="2"></rect><line x1="9.75" y1="12.25" x2="12.25" y2="12.25"></line><polyline points="5.75 12.25 8.25 9.75 5.75 7.25"></polyline></g></svg>
2160          Terminal
2161        </div>
2162      </div>
2163    </div>
2164    <div class="relative">
2165      <pre data-controller="highlight" class="language-bash !mb-6 !bg-neutral-900 rounded-b-xl overflow-hidden border border-[#2D2D2D]"><code class="language-bash !bg-neutral-900 max-h-[300px] !overflow-y-scroll !overflow-x-scroll text-sm small-scrollbar">npm install air-datepicker</code></pre>
2166      <button type="button" class="absolute top-2 right-4 flex items-center gap-1.5 rounded-lg px-3.5 py-2 text-sm font-medium shadow-xs focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-600 bg-neutral-800/50 text-neutral-50 hover:bg-neutral-700/50 dark:focus-visible:outline-neutral-200 border border-neutral-700"
2167              data-controller="clipboard"
2168              data-clipboard-text="npm install air-datepicker"
2169              data-clipboard-error-message-value="Copy Failed!"
2170              data-clipboard-show-tooltip-value="false"
2171              data-clipboard-tooltip-duration-value="1500">
2172        <span data-clipboard-target="copyContent" class="flex items-center gap-1.5">
2173          <svg xmlns="http://www.w3.org/2000/svg" class="size-4" width="18" height="18" viewBox="0 0 18 18"><g fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" stroke="currentColor"><rect x="1.75" y="1.75" width="11" height="11" rx="2" ry="2" transform="translate(14.5 14.5) rotate(-180)"></rect><path d="M15.199,6.002l1.029,6.924c.162,1.093-.592,2.11-1.684,2.272l-6.924,1.029c-.933,.139-1.81-.39-2.148-1.228"></path><line x1="7.25" y1="9.75" x2="7.25" y2="4.75"></line><line x1="4.75" y1="7.25" x2="9.75" y2="7.25"></line></g></svg>
2174          Copy
2175        </span>
2176        <span data-clipboard-target="copiedContent" class="hidden flex items-center gap-1.5 text-green-400">
2177          <svg xmlns="http://www.w3.org/2000/svg" class="size-4" width="18" height="18" viewBox="0 0 18 18"><g fill="currentColor"><path d="M6.75,15h-.002c-.227,0-.442-.104-.583-.281L2.165,9.719c-.259-.324-.207-.795,.117-1.054,.325-.259,.796-.206,1.054,.117l3.418,4.272L14.667,3.278c.261-.322,.732-.373,1.055-.111,.322,.261,.372,.733,.111,1.055L7.333,14.722c-.143,.176-.357,.278-.583,.278Z" fill="currentColor"></path></g></svg>
2178          Copied!
2179        </span>
2180      </button>
2181    </div>
2182  </div>
2183
2184  <!-- Yarn Panel -->
2185  <div data-tabs-target="panel" role="tabpanel">
2186    <div class="rounded-t-xl overflow-hidden border-t border-x border-[#2D2D2D] max-h-lg">
2187      <div class="p-1 text-sm bg-neutral-900">
2188        <div class="px-2 pt-2 pb-1.5 text-xs text-neutral-400 dark:text-white/50 flex items-center gap-1">
2189          <svg xmlns="http://www.w3.org/2000/svg" class="size-4" width="18" height="18" viewBox="0 0 18 18"><g fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" stroke="currentColor"><rect x="2.75" y="2.75" width="12.5" height="12.5" rx="2" ry="2"></rect><line x1="9.75" y1="12.25" x2="12.25" y2="12.25"></line><polyline points="5.75 12.25 8.25 9.75 5.75 7.25"></polyline></g></svg>
2190          Terminal
2191        </div>
2192      </div>
2193    </div>
2194    <div class="relative">
2195      <pre data-controller="highlight" class="language-bash !mb-6 !bg-neutral-900 rounded-b-xl overflow-hidden border border-[#2D2D2D]"><code class="language-bash !bg-neutral-900 max-h-[300px] !overflow-y-scroll !overflow-x-scroll text-sm small-scrollbar">yarn add air-datepicker</code></pre>
2196      <button type="button" class="absolute top-2 right-4 flex items-center gap-1.5 rounded-lg px-3.5 py-2 text-sm font-medium shadow-xs focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-600 bg-neutral-800/50 text-neutral-50 hover:bg-neutral-700/50 dark:focus-visible:outline-neutral-200 border border-neutral-700"
2197              data-controller="clipboard"
2198              data-clipboard-text="yarn add air-datepicker"
2199              data-clipboard-error-message-value="Copy Failed!"
2200              data-clipboard-show-tooltip-value="false"
2201              data-clipboard-tooltip-duration-value="1500">
2202        <span data-clipboard-target="copyContent" class="flex items-center gap-1.5">
2203          <svg xmlns="http://www.w3.org/2000/svg" class="size-4" width="18" height="18" viewBox="0 0 18 18"><g fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" stroke="currentColor"><rect x="1.75" y="1.75" width="11" height="11" rx="2" ry="2" transform="translate(14.5 14.5) rotate(-180)"></rect><path d="M15.199,6.002l1.029,6.924c.162,1.093-.592,2.11-1.684,2.272l-6.924,1.029c-.933,.139-1.81-.39-2.148-1.228"></path><line x1="7.25" y1="9.75" x2="7.25" y2="4.75"></line><line x1="4.75" y1="7.25" x2="9.75" y2="7.25"></line></g></svg>
2204          Copy
2205        </span>
2206        <span data-clipboard-target="copiedContent" class="hidden flex items-center gap-1.5 text-green-400">
2207          <svg xmlns="http://www.w3.org/2000/svg" class="size-4" width="18" height="18" viewBox="0 0 18 18"><g fill="currentColor"><path d="M6.75,15h-.002c-.227,0-.442-.104-.583-.281L2.165,9.719c-.259-.324-.207-.795,.117-1.054,.325-.259,.796-.206,1.054,.117l3.418,4.272L14.667,3.278c.261-.322,.732-.373,1.055-.111,.322,.261,.372,.733,.111,1.055L7.333,14.722c-.143,.176-.357,.278-.583,.278Z" fill="currentColor"></path></g></svg>
2208          Copied!
2209        </span>
2210      </button>
2211    </div>
2212  </div>
2213</div>
2214
2215<p class="mb-4 text-sm text-neutral-500 dark:text-neutral-400">And add this to your <code class="code-inline-text">&lt;head&gt;</code> HTML tag:</p>
2216
2217<div class="mt-4 rounded-t-xl overflow-hidden border-t border-x border-[#2D2D2D] max-h-lg">
2218  <div class="p-1 text-sm bg-neutral-900">
2219    <button type="button" class="px-2 pt-2 pb-1.5 text-xs text-neutral-400 dark:text-white/50 flex items-center gap-1"
2220          data-controller="clipboard"
2221          data-clipboard-text="application.html.erb"
2222          data-clipboard-success-message-value="Controller Copied"
2223          data-clipboard-error-message-value="Copy Failed!"
2224          data-clipboard-show-tooltip-value="false"
2225          data-clipboard-tooltip-duration-value="1500">
2226      <span data-clipboard-target="copyContent" class="flex items-center gap-1.5">
2227        <svg xmlns="http://www.w3.org/2000/svg" class="size-4" width="18" height="18" viewBox="0 0 18 18"><g fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" stroke="currentColor"><path d="M8.0425 15.75H4.75C3.645 15.75 2.75 14.855 2.75 13.75V3.75C2.75 2.645 3.645 1.75 4.75 1.75H12.75C13.855 1.75 14.75 2.645 14.75 3.75V7.1048"></path> <path d="M5.75 5.75H11.75"></path> <path d="M5.75 8.75H11.75"></path> <path d="M5.75 11.75H8.25"></path> <path d="M13.7959 15.4542L16.9571 12.293C17.3476 11.9025 17.3476 11.2693 16.9571 10.8788L16.3713 10.293C15.9808 9.9025 15.3476 9.9025 14.9571 10.293L11.7959 13.4542L11.0001 16.2501L13.7959 15.4542Z"></path></g></svg>
2228        application.html.erb
2229      </span>
2230      <span data-clipboard-target="copiedContent" class="hidden flex items-center gap-1.5 text-green-400">
2231        <svg xmlns="http://www.w3.org/2000/svg" class="size-4" width="18" height="18" viewBox="0 0 18 18"><g fill="currentColor"><path d="M6.75,15h-.002c-.227,0-.442-.104-.583-.281L2.165,9.719c-.259-.324-.207-.795,.117-1.054,.325-.259,.796-.206,1.054,.117l3.418,4.272L14.667,3.278c.261-.322,.732-.373,1.055-.111,.322,.261,.372,.733,.111,1.055L7.333,14.722c-.143,.176-.357,.278-.583,.278Z" fill="currentColor"></path></g></svg>
2232        application.html.erb
2233      </span>
2234    </button>
2235  </div>
2236</div>
2237<div class="relative">
2238  <pre data-controller="highlight" class="language-erb !mb-4 !bg-neutral-900 rounded-b-xl overflow-hidden border border-[#2D2D2D]"><code class="language-erb !bg-neutral-900 max-h-[300px] !overflow-y-scroll !overflow-x-scroll text-sm small-scrollbar">&lt;link rel=&quot;stylesheet&quot; href=&quot;https://cdn.jsdelivr.net/npm/[email protected]/air-datepicker.min.css&quot;&gt;</code></pre>
2239  <button type="button" class="absolute top-2 right-4 flex items-center gap-1.5 rounded-lg px-3.5 py-2 text-sm font-medium shadow-xs focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-600 bg-neutral-800/50 text-neutral-50 hover:bg-neutral-700/50 dark:focus-visible:outline-neutral-200 border border-neutral-700"
2240          data-controller="clipboard"
2241          data-clipboard-text='<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/air-datepicker.min.css">'
2242          data-clipboard-success-message-value="CSS Copied"
2243          data-clipboard-error-message-value="Copy Failed!"
2244          data-clipboard-show-tooltip-value="false"
2245          data-clipboard-tooltip-duration-value="1500">
2246    <span data-clipboard-target="copyContent" class="flex items-center gap-1.5">
2247      <svg xmlns="http://www.w3.org/2000/svg" class="size-4" width="18" height="18" viewBox="0 0 18 18"><g fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" stroke="currentColor"><rect x="1.75" y="1.75" width="11" height="11" rx="2" ry="2" transform="translate(14.5 14.5) rotate(-180)"></rect><path d="M15.199,6.002l1.029,6.924c.162,1.093-.592,2.11-1.684,2.272l-6.924,1.029c-.933,.139-1.81-.39-2.148-1.228"></path><line x1="7.25" y1="9.75" x2="7.25" y2="4.75"></line><line x1="4.75" y1="7.25" x2="9.75" y2="7.25"></line></g></svg>
2248      Copy
2249    </span>
2250    <span data-clipboard-target="copiedContent" class="hidden flex items-center gap-1.5 text-green-400">
2251      <svg xmlns="http://www.w3.org/2000/svg" class="size-4" width="18" height="18" viewBox="0 0 18 18"><g fill="currentColor"><path d="M6.75,15h-.002c-.227,0-.442-.104-.583-.281L2.165,9.719c-.259-.324-.207-.795,.117-1.054,.325-.259,.796-.206,1.054,.117l3.418,4.272L14.667,3.278c.261-.322,.732-.373,1.055-.111,.322,.261,.372,.733,.111,1.055L7.333,14.722c-.143,.176-.357,.278-.583,.278Z" fill="currentColor"></path></g></svg>
2252      Copied!
2253    </span>
2254  </button>
2255</div>
2256
2257          </div>
2258        </div>
2259      </div>
2260    </div>
2261  </div>
2262
2263  <div data-accordion-target="item" data-state="closed"class="overflow-hidden bg-neutral-100/60 dark:bg-neutral-700/75 border border-black/10 dark:border-white/10 items-center justify-between font-semibold transition-all hover:bg-neutral-100 dark:hover:bg-neutral-700/50 rounded-lg">
2264    <p data-state="closed" class="flex text-base font-semibold mt-0 mb-0">
2265      <button type="button" data-accordion-target="trigger" data-action="click->accordion#toggle" aria-controls="accordion-content-9" aria-expanded="false" data-state="closed" id="accordion-trigger-9" class="w-full rounded-lg flex flex-1 p-3 items-center justify-between font-medium transition-all [&[data-state=open]>svg]:rotate-180 focus:outline-neutral-700 dark:focus:outline-white focus:-outline-offset-1">
2266        <span class="flex items-center gap-2">
2267          1.9. Emoji Mart
2268          <img alt="Emoji Mart by Missive" class="size-3.5" src="/assets/missive-logo-96e2465ff6c400fbfc640f66b1bd8db700e2e9b5115026543035b7afb534a531.webp" />
2269        </span>
2270        <svg xmlns="http://www.w3.org/2000/svg" data-accordion-target="icon" class="size-4 shrink-0 transition-transform duration-300" width="18" height="18" viewBox="0 0 18 18"><g fill="currentColor"><path d="M8.99999 13.5C8.80799 13.5 8.61599 13.4271 8.46999 13.2801L2.21999 7.03005C1.92699 6.73705 1.92699 6.26202 2.21999 5.96902C2.51299 5.67602 2.98799 5.67602 3.28099 5.96902L9.00099 11.689L14.721 5.96902C15.014 5.67602 15.489 5.67602 15.782 5.96902C16.075 6.26202 16.075 6.73705 15.782 7.03005L9.53199 13.2801C9.38599 13.4261 9.19399 13.5 9.00199 13.5H8.99999Z"></path></g></svg>
2271      </button>
2272    </p>
2273    <div data-accordion-target="content" data-state="closed" id="accordion-content-9" role="region" aria-labelledby="accordion-trigger-9" class="grid transition-[grid-template-rows] duration-300 ease-in-out data-[state=open]:grid-rows-[1fr] data-[state=closed]:grid-rows-[0fr]" hidden>
2274      <div class="overflow-hidden min-h-0">
2275        <div class="opacity-0 transition-opacity duration-300 data-[state=open]:opacity-100" data-state="closed">
2276          <p class="px-4 py-3 bg-white dark:bg-neutral-700/50 text-sm font-normal">
2277            <a href="https://learn.missiveapp.com/open/emoji-mart" class="text-neutral-900 dark:text-white underline hover:opacity-80" target="_blank">Emoji Mart by Missive</a> is a emoji picker component. We use it in the emoji picker component.
2278          </p>
2279          <div class="px-4 py-3 bg-white dark:bg-neutral-700/50 text-sm font-normal">
2280            <div class="mb-6" data-controller="tabs" data-tabs-active-tab-class="bg-neutral-900 text-white shadow-sm dark:bg-white dark:text-neutral-900 dark:shadow-sm hover:ring-neutral-800 dark:hover:bg-neutral-50 dark:hover:ring-white hover:text-white dark:hover:text-neutral-900" data-tabs-inactive-tab-class="hover:bg-white/75 ring-1 ring-transparent hover:ring-white dark:hover:bg-neutral-700 dark:hover:ring-neutral-600 text-neutral-600 dar
2280k:text-neutral-400 hover:text-neutral-900 dark:hover:text-neutral-200" data-tabs-index-value="0">
2281  <!-- Tab Controls -->
2282  <div class="opacity-0 transition-opacity duration-200 relative inline-grid items-center gap-2 justify-center grid-cols-3 p-1 mb-4 bg-neutral-100 border border-neutral-200 rounded-xl select-none dark:bg-neutral-800 dark:border-neutral-700" data-tabs-target="tabList" role="tablist">
2283    <button class="rounded-lg whitespace-nowrap text-xs font-medium transition flex gap-x-2 items-center justify-center py-2.5 px-3 w-full text-center text-current hover:text-current dark:text-current dark:hover:text-current focus-visible:outline-offset-2 focus-visible:outline-neutral-600 dark:focus-visible:outline-neutral-200" tabindex="0" data-tabs-target="tab" data-action="click->tabs#change:prevent" role="tab">
2284      Importmap
2285    </button>
2286    <button class="rounded-lg whitespace-nowrap text-xs font-medium transition flex gap-x-2 items-center justify-center py-2.5 px-3 w-full text-center text-current hover:text-current dark:text-current dark:hover:text-current focus-visible:outline-offset-2 focus-visible:outline-neutral-600 dar
2286k:focus-visible:outline-neutral-200" tabindex="0" data-tabs-target="tab" data-action="click->tabs#change:prevent" role="tab">
2287      NPM
2288    </button>
2289    <button class="rounded-lg whitespace-nowrap text-xs font-medium transition flex gap-x-2 items-center justify-center py-2.5 px-3 w-full text-center text-current hover:text-current dark:text-current dark:hover:text-current focus-visible:outline-offset-2 focus-visible:outline-neutral-600 dark:focus-visible:outline-neutral-200" tabindex="0" data-tabs-target="tab" data-action="click->tabs#change:prevent" role="tab">
2290      Yarn
2291    </button>
2292  </div>
2293
2294  <!-- Importmap Panel -->
2295  <div data-tabs-target="panel" role="tabpanel">
2296    <div class="rounded-t-xl overflow-hidden border-t border-x border-[#2D2D2D] max-h-lg">
2297      <div class="p-1 text-sm bg-neutral-900">
2298        <div class="px-2 pt-2 pb-1.5 text-xs text-neutral-400 dark:text-white/50 flex items-center gap-1">
2299          <svg xmlns="http://www.w3.org/2000/svg" class="size-4" width="18" height="18" viewBox="0 0 18 18"><g fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" stroke="currentColor"><rect x="2.75" y="2.75" width="12.5" height="12.5" rx="2" ry="2"></rect><line x1="9.75" y1="12.25" x2="12.25" y2="12.25"></line><polyline points="5.75 12.25 8.25 9.75 5.75 7.25"></polyline></g></svg>
2300          config/importmap.rb
2301        </div>
2302      </div>
2303    </div>
2304    <div class="relative">
2305      <pre data-controller="highlight" class="language-ruby !mb-6 !bg-neutral-900 rounded-b-xl overflow-hidden border border-[#2D2D2D]"><code class="language-ruby !bg-neutral-900 max-h-[300px] !overflow-y-scroll !overflow-x-scroll text-sm small-scrollbar">pin "emoji-mart", to: "https://cdn.jsdelivr.net/npm/emoji-mart@latest/dist/browser.js"
2306pin "@emoji-mart/data", to: "https://cdn.jsdelivr.net/npm/@emoji-mart/data@latest/+esm"</code></pre>
2307      <button type="button" class="absolute top-2 right-4 flex items-center gap-1.5 rounded-lg px-3.5 py-2 text-sm font-medium shadow-xs focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-600 bg-neutral-800/50 text-neutral-50 hover:bg-neutral-700/50 dark:focus-visible:outline-neutral-200 border border-neutral-700"
2308              data-controller="clipboard"
2309              data-clipboard-text='pin "emoji-mart", to: "https://cdn.jsdelivr.net/npm/emoji-mart@latest/dist/browser.js"
2310pin "@emoji-mart/data", to: "https://cdn.jsdelivr.net/npm/@emoji-mart/data@latest/+esm"'
2311              data-clipboard-error-message-value="Copy Failed!"
2312              data-clipboard-show-tooltip-value="false"
2313              data-clipboard-tooltip-duration-value="1500">
2314        <span data-clipboard-target="copyContent" class="flex items-center gap-1.5">
2315          <svg xmlns="http://www.w3.org/2000/svg" class="size-4" width="18" height="18" viewBox="0 0 18 18"><g fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" stroke="currentColor"><rect x="1.75" y="1.75" width="11" height="11" rx="2" ry="2" transform="translate(14.5 14.5) rotate(-180)"></rect><path d="M15.199,6.002l1.029,6.924c.162,1.093-.592,2.11-1.684,2.272l-6.924,1.029c-.933,.139-1.81-.39-2.148-1.228"></path><line x1="7.25" y1="9.75" x2="7.25" y2="4.75"></line><line x1="4.75" y1="7.25" x2="9.75" y2="7.25"></line></g></svg>
2316          Copy
2317        </span>
2318        <span data-clipboard-target="copiedContent" class="hidden flex items-center gap-1.5 text-green-400">
2319          <svg xmlns="http://www.w3.org/2000/svg" class="size-4" width="18" height="18" viewBox="0 0 18 18"><g fill="currentColor"><path d="M6.75,15h-.002c-.227,0-.442-.104-.583-.281L2.165,9.719c-.259-.324-.207-.795,.117-1.054,.325-.259,.796-.206,1.054,.117l3.418,4.272L14.667,3.278c.261-.322,.732-.373,1.055-.111,.322,.261,.372,.733,.111,1.055L7.333,14.722c-.143,.176-.357,.278-.583,.278Z" fill="currentColor"></path></g></svg>
2320          Copied!
2321        </span>
2322      </button>
2323    </div>
2324  </div>
2325
2326  <!-- NPM Panel -->
2327  <div data-tabs-target="panel" role="tabpanel">
2328    <div class="rounded-t-xl overflow-hidden border-t border-x border-[#2D2D2D] max-h-lg">
2329      <div class="p-1 text-sm bg-neutral-900">
2330        <div class="px-2 pt-2 pb-1.5 text-xs text-neutral-400 dark:text-white/50 flex items-center gap-1">
2331          <svg xmlns="http://www.w3.org/2000/svg" class="size-4" width="18" height="18" viewBox="0 0 18 18"><g fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" stroke="currentColor"><rect x="2.75" y="2.75" width="12.5" height="12.5" rx="2" ry="2"></rect><line x1="9.75" y1="12.25" x2="12.25" y2="12.25"></line><polyline points="5.75 12.25 8.25 9.75 5.75 7.25"></polyline></g></svg>
2332          Terminal
2333        </div>
2334      </div>
2335    </div>
2336    <div class="relative">
2337      <pre data-controller="highlight" class="language-bash !mb-6 !bg-neutral-900 rounded-b-xl overflow-hidden border border-[#2D2D2D]"><code class="language-bash !bg-neutral-900 max-h-[300px] !overflow-y-scroll !overflow-x-scroll text-sm small-scrollbar">npm install emoji-mart @emoji-mart/data</code></pre>
2338      <button type="button" class="absolute top-2 right-4 flex items-center gap-1.5 rounded-lg px-3.5 py-2 text-sm font-medium shadow-xs focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-600 bg-neutral-800/50 text-neutral-50 hover:bg-neutral-700/50 dark:focus-visible:outline-neutral-200 border border-neutral-700"
2339              data-controller="clipboard"
2340              data-clipboard-text="npm install emoji-mart @emoji-mart/data"
2341              data-clipboard-error-message-value="Copy Failed!"
2342              data-clipboard-show-tooltip-value="false"
2343              data-clipboard-tooltip-duration-value="1500">
2344        <span data-clipboard-target="copyContent" class="flex items-center gap-1.5">
2345          <svg xmlns="http://www.w3.org/2000/svg" class="size-4" width="18" height="18" viewBox="0 0 18 18"><g fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" stroke="currentColor"><rect x="1.75" y="1.75" width="11" height="11" rx="2" ry="2" transform="translate(14.5 14.5) rotate(-180)"></rect><path d="M15.199,6.002l1.029,6.924c.162,1.093-.592,2.11-1.684,2.272l-6.924,1.029c-.933,.139-1.81-.39-2.148-1.228"></path><line x1="7.25" y1="9.75" x2="7.25" y2="4.75"></line><line x1="4.75" y1="7.25" x2="9.75" y2="7.25"></line></g></svg>
2346          Copy
2347        </span>
2348        <span data-clipboard-target="copiedContent" class="hidden flex items-center gap-1.5 text-green-400">
2349          <svg xmlns="http://www.w3.org/2000/svg" class="size-4" width="18" height="18" viewBox="0 0 18 18"><g fill="currentColor"><path d="M6.75,15h-.002c-.227,0-.442-.104-.583-.281L2.165,9.719c-.259-.324-.207-.795,.117-1.054,.325-.259,.796-.206,1.054,.117l3.418,4.272L14.667,3.278c.261-.322,.732-.373,1.055-.111,.322,.261,.372,.733,.111,1.055L7.333,14.722c-.143,.176-.357,.278-.583,.278Z" fill="currentColor"></path></g></svg>
2350          Copied!
2351        </span>
2352      </button>
2353    </div>
2354  </div>
2355
2356  <!-- Yarn Panel -->
2357  <div data-tabs-target="panel" role="tabpanel">
2358    <div class="rounded-t-xl overflow-hidden border-t border-x border-[#2D2D2D] max-h-lg">
2359      <div class="p-1 text-sm bg-neutral-900">
2360        <div class="px-2 pt-2 pb-1.5 text-xs text-neutral-400 dark:text-white/50 flex items-center gap-1">
2361          <svg xmlns="http://www.w3.org/2000/svg" class="size-4" width="18" height="18" viewBox="0 0 18 18"><g fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" stroke="currentColor"><rect x="2.75" y="2.75" width="12.5" height="12.5" rx="2" ry="2"></rect><line x1="9.75" y1="12.25" x2="12.25" y2="12.25"></line><polyline points="5.75 12.25 8.25 9.75 5.75 7.25"></polyline></g></svg>
2362          Terminal
2363        </div>
2364      </div>
2365    </div>
2366    <div class="relative">
2367      <pre data-controller="highlight" class="language-bash !mb-6 !bg-neutral-900 rounded-b-xl overflow-hidden border border-[#2D2D2D]"><code class="language-bash !bg-neutral-900 max-h-[300px] !overflow-y-scroll !overflow-x-scroll text-sm small-scrollbar">yarn add emoji-mart @emoji-mart/data</code></pre>
2368      <button type="button" class="absolute top-2 right-4 flex items-center gap-1.5 rounded-lg px-3.5 py-2 text-sm font-medium shadow-xs focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-600 bg-neutral-800/50 text-neutral-50 hover:bg-neutral-700/50 dark:focus-visible:outline-neutral-200 border border-neutral-700"
2369              data-controller="clipboard"
2370              data-clipboard-text="yarn add emoji-mart @emoji-mart/data"
2371              data-clipboard-error-message-value="Copy Failed!"
2372              data-clipboard-show-tooltip-value="false"
2373              data-clipboard-tooltip-duration-value="1500">
2374        <span data-clipboard-target="copyContent" class="flex items-center gap-1.5">
2375          <svg xmlns="http://www.w3.org/2000/svg" class="size-4" width="18" height="18" viewBox="0 0 18 18"><g fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" stroke="currentColor"><rect x="1.75" y="1.75" width="11" height="11" rx="2" ry="2" transform="translate(14.5 14.5) rotate(-180)"></rect><path d="M15.199,6.002l1.029,6.924c.162,1.093-.592,2.11-1.684,2.272l-6.924,1.029c-.933,.139-1.81-.39-2.148-1.228"></path><line x1="7.25" y1="9.75" x2="7.25" y2="4.75"></line><line x1="4.75" y1="7.25" x2="9.75" y2="7.25"></line></g></svg>
2376          Copy
2377        </span>
2378        <span data-clipboard-target="copiedContent" class="hidden flex items-center gap-1.5 text-green-400">
2379          <svg xmlns="http://www.w3.org/2000/svg" class="size-4" width="18" height="18" viewBox="0 0 18 18"><g fill="currentColor"><path d="M6.75,15h-.002c-.227,0-.442-.104-.583-.281L2.165,9.719c-.259-.324-.207-.795,.117-1.054,.325-.259,.796-.206,1.054,.117l3.418,4.272L14.667,3.278c.261-.322,.732-.373,1.055-.111,.322,.261,.372,.733,.111,1.055L7.333,14.722c-.143,.176-.357,.278-.583,.278Z" fill="currentColor"></path></g></svg>
2380          Copied!
2381        </span>
2382      </button>
2383    </div>
2384  </div>
2385</div>
2386
2387          </div>
2388        </div>
2389      </div>
2390    </div>
2391  </div>
2392
2393  <div data-accordion-target="item" data-state="closed"class="overflow-hidden bg-neutral-100/60 dark:bg-neutral-700/75 border border-black/10 dark:border-white/10 items-center justify-between font-semibold transition-all hover:bg-neutral-100 dar
2393k:hover:bg-neutral-700/50 rounded-lg">
2394    <p data-state="closed" class="flex text-base font-semibold mt-0 mb-0">
2395      <button type="button" data-accordion-target="trigger" data-action="click->accordion#toggle" aria-controls="accordion-content-9" aria-expanded="false" data-state="closed" id="accordion-trigger-9" class="w-full rounded-lg flex flex-1 p-3 items-center justify-between font-medium transition-all [&[data-state=open]>svg]:rotate-180 focus:outline-neutral-700 dark:focus:outline-white focus:-outline-offset-1">
2396        <span class="flex items-center gap-2">
2397          1.10. PhotoSwipe
2398          <img alt="PhotoSwipe" class="size-3.5 rounded" src="/assets/photoswipe-logo-b3e92230fc472dfc24be0c4c595b1988efbbfdc9db889d7e9e9fc4f02c5c41c6.webp" />
2399        </span>
2400        <svg xmlns="http://www.w3.org/2000/svg" data-accordion-target="icon" class="size-4 shrink-0 transition-transform duration-300" width="18" height="18" viewBox="0 0 18 18"><g fill="currentColor"><path d="M8.99999 13.5C8.80799 13.5 8.61599 13.4271 8.46999 13.2801L2.21999 7.03005C1.92699 6.73705 1.92699 6.26202 2.21999 5.96902C2.51299 5.67602 2.98799 5.67602 3.28099 5.96902L9.00099 11.689L14.721 5.96902C15.014 5.67602 15.489 5.67602 15.782 5.96902C16.075 6.26202 16.075 6.73705 15.782 7.03005L9.53199 13.2801C9.38599 13.4261 9.19399 13.5 9.00199 13.5H8.99999Z"></path></g></svg>
2401      </button>
2402    </p>
2403    <div data-accordion-target="content" data-state="closed" id="accordion-content-9" role="region" aria-labelledby="accordion-trigger-9" class="grid transition-[grid-template-rows] duration-300 ease-in-out data-[state=open]:grid-rows-[1fr] data-[state=closed]:grid-rows-[0fr]" hidden>
2404      <div class="overflow-hidden min-h-0">
2405        <div class="opacity-0 transition-opacity duration-300 data-[state=open]:opacity-100" data-state="closed">
2406          <p class="px-4 py-3 bg-white dark:bg-neutral-700/50 text-sm font-normal">
2407            <a href="https://photoswipe.com/" class="text-neutral-900 dark:text-white underline hover:opacity-80" target="_blank">PhotoSwipe</a> is a image gallery component. We use it in the lightbox component.
2408          </p>
2409          <div class="px-4 py-3 bg-white dark:bg-neutral-700/50 text-sm font-normal">
2410            <div class="mb-6" data-controller="tabs" data-tabs-active-tab-class="bg-neutral-900 text-white shadow-sm dark:bg-white dark:text-neutral-900 dark:shadow-sm hover:ring-neutral-800 dark:hover:bg-neutral-50 dark:hover:ring-white hover:text-white dark:hover:text-neutral-900" data-tabs-inactive-tab-class="hover:bg-white/75 ring-1 ring-transparent hover:ring-white dark:hover:bg-neutral-700 dark:hover:ring-neutral-600 text-neutral-600 dar
2410k:text-neutral-400 hover:text-neutral-900 dark:hover:text-neutral-200" data-tabs-index-value="0">
2411  <!-- Tab Controls -->
2412  <div class="opacity-0 transition-opacity duration-200 relative inline-grid items-center gap-2 justify-center grid-cols-3 p-1 mb-4 bg-neutral-100 border border-neutral-200 rounded-xl select-none dark:bg-neutral-800 dark:border-neutral-700" data-tabs-target="tabList" role="tablist">
2413    <button class="rounded-lg whitespace-nowrap text-xs font-medium transition flex gap-x-2 items-center justify-center py-2.5 px-3 w-full text-center text-current hover:text-current dark:text-current dark:hover:text-current focus-visible:outline-offset-2 focus-visible:outline-neutral-600 dark:focus-visible:outline-neutral-200" tabindex="0" data-tabs-target="tab" data-action="click->tabs#change:prevent" role="tab">
2414      Importmap
2415    </button>
2416    <button class="rounded-lg whitespace-nowrap text-xs font-medium transition flex gap-x-2 items-center justify-center py-2.5 px-3 w-full text-center text-current hover:text-current dark:text-current dark:hover:text-current focus-visible:outline-offset-2 focus-visible:outline-neutral-600 dar
2416k:focus-visible:outline-neutral-200" tabindex="0" data-tabs-target="tab" data-action="click->tabs#change:prevent" role="tab">
2417      NPM
2418    </button>
2419    <button class="rounded-lg whitespace-nowrap text-xs font-medium transition flex gap-x-2 items-center justify-center py-2.5 px-3 w-full text-center text-current hover:text-current dark:text-current dark:hover:text-current focus-visible:outline-offset-2 focus-visible:outline-neutral-600 dark:focus-visible:outline-neutral-200" tabindex="0" data-tabs-target="tab" data-action="click->tabs#change:prevent" role="tab">
2420      Yarn
2421    </button>
2422  </div>
2423
2424  <!-- Importmap Panel -->
2425  <div data-tabs-target="panel" role="tabpanel">
2426    <div class="rounded-t-xl overflow-hidden border-t border-x border-[#2D2D2D] max-h-lg">
2427      <div class="p-1 text-sm bg-neutral-900">
2428        <button type="button" class="px-2 pt-2 pb-1.5 text-xs text-neutral-400 dark:text-white/50 flex items-center gap-1" data-controller="clipboard" data-clipboard-text="config/importmap.rb" data-clipboard-success-message-value="Controller Copied" data-clipboard-error-message-value="Copy Failed!" data-clipboard-show-tooltip-value="false" data-clipboard-tooltip-duration-value="1500">
2429          <span data-clipboard-target="copyContent" class="flex items-center gap-1.5">
2430            <svg xmlns="http://www.w3.org/2000/svg" class="size-4" width="18" height="18" viewBox="0 0 18 18"><g fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" stroke="currentColor"><path d="M8.0425 15.75H4.75C3.645 15.75 2.75 14.855 2.75 13.75V3.75C2.75 2.645 3.645 1.75 4.75 1.75H12.75C13.855 1.75 14.75 2.645 14.75 3.75V7.1048"></path> <path d="M5.75 5.75H11.75"></path> <path d="M5.75 8.75H11.75"></path> <path d="M5.75 11.75H8.25"></path> <path d="M13.7959 15.4542L16.9571 12.293C17.3476 11.9025 17.3476 11.2693 16.9571 10.8788L16.3713 10.293C15.9808 9.9025 15.3476 9.9025 14.9571 10.293L11.7959 13.4542L11.0001 16.2501L13.7959 15.4542Z"></path></g></svg>
2431            Add to config/importmap.rb
2432          </span>
2433          <span data-clipboard-target="copiedContent" class="hidden flex items-center gap-1.5 text-green-400">
2434            <svg xmlns="http://www.w3.org/2000/svg" class="size-4" width="18" height="18" viewBox="0 0 18 18"><g fill="currentColor"><path d="M6.75,15h-.002c-.227,0-.442-.104-.583-.281L2.165,9.719c-.259-.324-.207-.795,.117-1.054,.325-.259,.796-.206,1.054,.117l3.418,4.272L14.667,3.278c.261-.322,.732-.373,1.055-.111,.322,.261,.372,.733,.111,1.055L7.333,14.722c-.143,.176-.357,.278-.583,.278Z" fill="currentColor"></path></g></svg>
2435            Add to config/importmap.rb
2436          </span>
2437        </button>
2438      </div>
2439    </div>
2440    <div class="relative">
2441      <pre data-controller="highlight" class="language-ruby !mb-6 !bg-neutral-900 rounded-b-xl overflow-hidden border border-[#2D2D2D]"><code class="language-ruby !bg-neutral-900 max-h-[300px] !overflow-y-scroll !overflow-x-scroll text-sm small-scrollbar">pin "photoswipe", to: "https://cdn.jsdelivr.net/npm/photoswipe/dist/photoswipe.esm.js"</code></pre>
2442      <button type="button" class="absolute top-2 right-4 flex items-center gap-1.5 rounded-lg px-3.5 py-2 text-sm font-medium shadow-xs focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-600 bg-neutral-800/50 text-neutral-50 hover:bg-neutral-700/50 dark:focus-visible:outline-neutral-200 border border-neutral-700"
2443              data-controller="clipboard"
2444              data-clipboard-text='pin "photoswipe", to: "https://cdn.jsdelivr.net/npm/photoswipe/dist/photoswipe.esm.js"'
2445              data-clipboard-error-message-value="Copy Failed!"
2446              data-clipboard-show-tooltip-value="false"
2447              data-clipboard-tooltip-duration-value="1500">
2448        <span data-clipboard-target="copyContent" class="flex items-center gap-1.5">
2449          <svg xmlns="http://www.w3.org/2000/svg" class="size-4" width="18" height="18" viewBox="0 0 18 18"><g fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" stroke="currentColor"><rect x="1.75" y="1.75" width="11" height="11" rx="2" ry="2" transform="translate(14.5 14.5) rotate(-180)"></rect><path d="M15.199,6.002l1.029,6.924c.162,1.093-.592,2.11-1.684,2.272l-6.924,1.029c-.933,.139-1.81-.39-2.148-1.228"></path><line x1="7.25" y1="9.75" x2="7.25" y2="4.75"></line><line x1="4.75" y1="7.25" x2="9.75" y2="7.25"></line></g></svg>
2450          Copy
2451        </span>
2452        <span data-clipboard-target="copiedContent" class="hidden flex items-center gap-1.5 text-green-400">
2453          <svg xmlns="http://www.w3.org/2000/svg" class="size-4" width="18" height="18" viewBox="0 0 18 18"><g fill="currentColor"><path d="M6.75,15h-.002c-.227,0-.442-.104-.583-.281L2.165,9.719c-.259-.324-.207-.795,.117-1.054,.325-.259,.796-.206,1.054,.117l3.418,4.272L14.667,3.278c.261-.322,.732-.373,1.055-.111,.322,.261,.372,.733,.111,1.055L7.333,14.722c-.143,.176-.357,.278-.583,.278Z" fill="currentColor"></path></g></svg>
2454          Copied!
2455        </span>
2456      </button>
2457    </div>
2458  </div>
2459
2460  <!-- NPM Panel -->
2461  <div data-tabs-target="panel" role="tabpanel">
2462    <div class="rounded-t-xl overflow-hidden border-t border-x border-[#2D2D2D] max-h-lg">
2463      <div class="p-1 text-sm bg-neutral-900">
2464        <div class="px-2 pt-2 pb-1.5 text-xs text-neutral-400 dark:text-white/50 flex items-center gap-1">
2465          <svg xmlns="http://www.w3.org/2000/svg" class="size-4" width="18" height="18" viewBox="0 0 18 18"><g fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" stroke="currentColor"><rect x="2.75" y="2.75" width="12.5" height="12.5" rx="2" ry="2"></rect><line x1="9.75" y1="12.25" x2="12.25" y2="12.25"></line><polyline points="5.75 12.25 8.25 9.75 5.75 7.25"></polyline></g></svg>
2466          Terminal
2467        </div>
2468      </div>
2469    </div>
2470    <div class="relative">
2471      <pre data-controller="highlight" class="language-bash !mb-6 !bg-neutral-900 rounded-b-xl overflow-hidden border border-[#2D2D2D]"><code class="language-bash !bg-neutral-900 max-h-[300px] !overflow-y-scroll !overflow-x-scroll text-sm small-scrollbar">npm install photoswipe</code></pre>
2472      <button type="button" class="absolute top-2 right-4 flex items-center gap-1.5 rounded-lg px-3.5 py-2 text-sm font-medium shadow-xs focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-600 bg-neutral-800/50 text-neutral-50 hover:bg-neutral-700/50 dark:focus-visible:outline-neutral-200 border border-neutral-700"
2473              data-controller="clipboard"
2474              data-clipboard-text="npm install photoswipe"
2475              data-clipboard-error-message-value="Copy Failed!"
2476              data-clipboard-show-tooltip-value="false"
2477              data-clipboard-tooltip-duration-value="1500">
2478        <span data-clipboard-target="copyContent" class="flex items-center gap-1.5">
2479          <svg xmlns="http://www.w3.org/2000/svg" class="size-4" width="18" height="18" viewBox="0 0 18 18"><g fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" stroke="currentColor"><rect x="1.75" y="1.75" width="11" height="11" rx="2" ry="2" transform="translate(14.5 14.5) rotate(-180)"></rect><path d="M15.199,6.002l1.029,6.924c.162,1.093-.592,2.11-1.684,2.272l-6.924,1.029c-.933,.139-1.81-.39-2.148-1.228"></path><line x1="7.25" y1="9.75" x2="7.25" y2="4.75"></line><line x1="4.75" y1="7.25" x2="9.75" y2="7.25"></line></g></svg>
2480          Copy
2481        </span>
2482        <span data-clipboard-target="copiedContent" class="hidden flex items-center gap-1.5 text-green-400">
2483          <svg xmlns="http://www.w3.org/2000/svg" class="size-4" width="18" height="18" viewBox="0 0 18 18"><g fill="currentColor"><path d="M6.75,15h-.002c-.227,0-.442-.104-.583-.281L2.165,9.719c-.259-.324-.207-.795,.117-1.054,.325-.259,.796-.206,1.054,.117l3.418,4.272L14.667,3.278c.261-.322,.732-.373,1.055-.111,.322,.261,.372,.733,.111,1.055L7.333,14.722c-.143,.176-.357,.278-.583,.278Z" fill="currentColor"></path></g></svg>
2484          Copied!
2485        </span>
2486      </button>
2487    </div>
2488  </div>
2489
2490  <!-- Yarn Panel -->
2491  <div data-tabs-target="panel" role="tabpanel">
2492    <div class="rounded-t-xl overflow-hidden border-t border-x border-[#2D2D2D] max-h-lg">
2493      <div class="p-1 text-sm bg-neutral-900">
2494        <div class="px-2 pt-2 pb-1.5 text-xs text-neutral-400 dark:text-white/50 flex items-center gap-1">
2495          <svg xmlns="http://www.w3.org/2000/svg" class="size-4" width="18" height="18" viewBox="0 0 18 18"><g fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" stroke="currentColor"><rect x="2.75" y="2.75" width="12.5" height="12.5" rx="2" ry="2"></rect><line x1="9.75" y1="12.25" x2="12.25" y2="12.25"></line><polyline points="5.75 12.25 8.25 9.75 5.75 7.25"></polyline></g></svg>
2496          Terminal
2497        </div>
2498      </div>
2499    </div>
2500    <div class="relative">
2501      <pre data-controller="highlight" class="language-bash !mb-6 !bg-neutral-900 rounded-b-xl overflow-hidden border border-[#2D2D2D]"><code class="language-bash !bg-neutral-900 max-h-[300px] !overflow-y-scroll !overflow-x-scroll text-sm small-scrollbar">yarn add photoswipe</code></pre>
2502      <button type="button" class="absolute top-2 right-4 flex items-center gap-1.5 rounded-lg px-3.5 py-2 text-sm font-medium shadow-xs focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-600 bg-neutral-800/50 text-neutral-50 hover:bg-neutral-700/50 dark:focus-visible:outline-neutral-200 border border-neutral-700"
2503              data-controller="clipboard"
2504              data-clipboard-text="yarn add photoswipe"
2505              data-clipboard-error-message-value="Copy Failed!"
2506              data-clipboard-show-tooltip-value="false"
2507              data-clipboard-tooltip-duration-value="1500">
2508        <span data-clipboard-target="copyContent" class="flex items-center gap-1.5">
2509          <svg xmlns="http://www.w3.org/2000/svg" class="size-4" width="18" height="18" viewBox="0 0 18 18"><g fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" stroke="currentColor"><rect x="1.75" y="1.75" width="11" height="11" rx="2" ry="2" transform="translate(14.5 14.5) rotate(-180)"></rect><path d="M15.199,6.002l1.029,6.924c.162,1.093-.592,2.11-1.684,2.272l-6.924,1.029c-.933,.139-1.81-.39-2.148-1.228"></path><line x1="7.25" y1="9.75" x2="7.25" y2="4.75"></line><line x1="4.75" y1="7.25" x2="9.75" y2="7.25"></line></g></svg>
2510          Copy
2511        </span>
2512        <span data-clipboard-target="copiedContent" class="hidden flex items-center gap-1.5 text-green-400">
2513          <svg xmlns="http://www.w3.org/2000/svg" class="size-4" width="18" height="18" viewBox="0 0 18 18"><g fill="currentColor"><path d="M6.75,15h-.002c-.227,0-.442-.104-.583-.281L2.165,9.719c-.259-.324-.207-.795,.117-1.054,.325-.259,.796-.206,1.054,.117l3.418,4.272L14.667,3.278c.261-.322,.732-.373,1.055-.111,.322,.261,.372,.733,.111,1.055L7.333,14.722c-.143,.176-.357,.278-.583,.278Z" fill="currentColor"></path></g></svg>
2514          Copied!
2515        </span>
2516      </button>
2517    </div>
2518  </div>
2519</div>
2520
2521<p class="mb-4 text-sm text-neutral-500 dark:text-neutral-400">And add this to your <code class="code-inline-text">&lt;head&gt;</code> HTML tag:</p>
2522
2523<div class="mt-4 rounded-t-xl overflow-hidden border-t border-x border-[#2D2D2D] max-h-lg">
2524  <div class="p-1 text-sm bg-neutral-900">
2525    <button type="button" class="px-2 pt-2 pb-1.5 text-xs text-neutral-400 dark:text-white/50 flex items-center gap-1"
2526          data-controller="clipboard"
2527          data-clipboard-text="application.html.erb"
2528          data-clipboard-success-message-value="Controller Copied"
2529          data-clipboard-error-message-value="Copy Failed!"
2530          data-clipboard-show-tooltip-value="false"
2531          data-clipboard-tooltip-duration-value="1500">
2532      <span data-clipboard-target="copyContent" class="flex items-center gap-1.5">
2533        <svg xmlns="http://www.w3.org/2000/svg" class="size-4" width="18" height="18" viewBox="0 0 18 18"><g fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" stroke="currentColor"><path d="M8.0425 15.75H4.75C3.645 15.75 2.75 14.855 2.75 13.75V3.75C2.75 2.645 3.645 1.75 4.75 1.75H12.75C13.855 1.75 14.75 2.645 14.75 3.75V7.1048"></path> <path d="M5.75 5.75H11.75"></path> <path d="M5.75 8.75H11.75"></path> <path d="M5.75 11.75H8.25"></path> <path d="M13.7959 15.4542L16.9571 12.293C17.3476 11.9025 17.3476 11.2693 16.9571 10.8788L16.3713 10.293C15.9808 9.9025 15.3476 9.9025 14.9571 10.293L11.7959 13.4542L11.0001 16.2501L13.7959 15.4542Z"></path></g></svg>
2534        application.html.erb
2535      </span>
2536      <span data-clipboard-target="copiedContent" class="hidden flex items-center gap-1.5 text-green-400">
2537        <svg xmlns="http://www.w3.org/2000/svg" class="size-4" width="18" height="18" viewBox="0 0 18 18"><g fill="currentColor"><path d="M6.75,15h-.002c-.227,0-.442-.104-.583-.281L2.165,9.719c-.259-.324-.207-.795,.117-1.054,.325-.259,.796-.206,1.054,.117l3.418,4.272L14.667,3.278c.261-.322,.732-.373,1.055-.111,.322,.261,.372,.733,.111,1.055L7.333,14.722c-.143,.176-.357,.278-.583,.278Z" fill="currentColor"></path></g></svg>
2538        application.html.erb
2539      </span>
2540    </button>
2541  </div>
2542</div>
2543<div class="relative">
2544  <pre data-controller="highlight" class="language-erb !mb-4 !bg-neutral-900 rounded-b-xl overflow-hidden border border-[#2D2D2D]"><code class="language-erb !bg-neutral-900 max-h-[300px] !overflow-y-scroll !overflow-x-scroll text-sm small-scrollbar">&lt;link rel=&quot;stylesheet&quot; href=&quot;https://cdn.jsdelivr.net/npm/photoswipe/dist/photoswipe.css&quot;&gt;</code></pre>
2545  <button type="button" class="absolute top-2 right-4 flex items-center gap-1.5 rounded-lg px-3.5 py-2 text-sm font-medium shadow-xs focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-600 bg-neutral-800/50 text-neutral-50 hover:bg-neutral-700/50 dark:focus-visible:outline-neutral-200 border border-neutral-700"
2546          data-controller="clipboard"
2547          data-clipboard-text='<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/photoswipe/dist/photoswipe.css">'
2548          data-clipboard-success-message-value="CSS Copied"
2549          data-clipboard-error-message-value="Copy Failed!"
2550          data-clipboard-show-tooltip-value="false"
2551          data-clipboard-tooltip-duration-value="1500">
2552    <span data-clipboard-target="copyContent" class="flex items-center gap-1.5">
2553      <svg xmlns="http://www.w3.org/2000/svg" class="size-4" width="18" height="18" viewBox="0 0 18 18"><g fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" stroke="currentColor"><rect x="1.75" y="1.75" width="11" height="11" rx="2" ry="2" transform="translate(14.5 14.5) rotate(-180)"></rect><path d="M15.199,6.002l1.029,6.924c.162,1.093-.592,2.11-1.684,2.272l-6.924,1.029c-.933,.139-1.81-.39-2.148-1.228"></path><line x1="7.25" y1="9.75" x2="7.25" y2="4.75"></line><line x1="4.75" y1="7.25" x2="9.75" y2="7.25"></line></g></svg>
2554      Copy
2555    </span>
2556    <span data-clipboard-target="copiedContent" class="hidden flex items-center gap-1.5 text-green-400">
2557      <svg xmlns="http://www.w3.org/2000/svg" class="size-4" width="18" height="18" viewBox="0 0 18 18"><g fill="currentColor"><path d="M6.75,15h-.002c-.227,0-.442-.104-.583-.281L2.165,9.719c-.259-.324-.207-.795,.117-1.054,.325-.259,.796-.206,1.054,.117l3.418,4.272L14.667,3.278c.261-.322,.732-.373,1.055-.111,.322,.261,.372,.733,.111,1.055L7.333,14.722c-.143,.176-.357,.278-.583,.278Z" fill="currentColor"></path></g></svg>
2558      Copied!
2559    </span>
2560  </button>
2561</div>
2562
2563          </div>
2564        </div>
2565      </div>
2566    </div>
2567  </div>
2568
2569  <div data-accordion-target="item" data-state="closed"class="overflow-hidden bg-neutral-100/60 dark:bg-neutral-700/75 border border-black/10 dark:border-white/10 items-center justify-between font-semibold transition-all hover:bg-neutral-100 dark:hover:bg-neutral-700/50 rounded-lg">
2570    <p data-state="closed" class="flex text-base font-semibold mt-0 mb-0">
2571      <button type="button" data-accordion-target="trigger" data-action="click->accordion#toggle" aria-controls="accordion-content-9" aria-expanded="false" data-state="closed" id="accordion-trigger-9" class="w-full rounded-lg flex flex-1 p-3 items-center justify-between font-medium transition-all [&[data-state=open]>svg]:rotate-180 focus:outline-neutral-700 dark:focus:outline-white focus:-outline-offset-1">
2572        <span class="flex items-center gap-2">
2573          1.11. Motion.dev
2574          <img alt="PhotoSwipe" class="size-3.5 rounded" src="/assets/motion-logo-71de01e6dc648733f140f03b8ad7cccea76573339eb6a40f1bf1c400aafdebbd.webp" />
2575        </span>
2576        <svg xmlns="http://www.w3.org/2000/svg" data-accordion-target="icon" class="size-4 shrink-0 transition-transform duration-300" width="18" height="18" viewBox="0 0 18 18"><g fill="currentColor"><path d="M8.99999 13.5C8.80799 13.5 8.61599 13.4271 8.46999 13.2801L2.21999 7.03005C1.92699 6.73705 1.92699 6.26202 2.21999 5.96902C2.51299 5.67602 2.98799 5.67602 3.28099 5.96902L9.00099 11.689L14.721 5.96902C15.014 5.67602 15.489 5.67602 15.782 5.96902C16.075 6.26202 16.075 6.73705 15.782 7.03005L9.53199 13.2801C9.38599 13.4261 9.19399 13.5 9.00199 13.5H8.99999Z"></path></g></svg>
2577      </button>
2578    </p>
2579    <div data-accordion-target="content" data-state="closed" id="accordion-content-9" role="region" aria-labelledby="accordion-trigger-9" class="grid transition-[grid-template-rows] duration-300 ease-in-out data-[state=open]:grid-rows-[1fr] data-[state=closed]:grid-rows-[0fr]" hidden>
2580      <div class="overflow-hidden min-h-0">
2581        <div class="opacity-0 transition-opacity duration-300 data-[state=open]:opacity-100" data-state="closed">
2582          <p class="px-4 py-3 bg-white dark:bg-neutral-700/50 text-sm font-normal">
2583            <a href="https://motion.dev/" class="text-neutral-900 dark:text-white underline hover:opacity-80" target="_blank">Motion.dev</a> is a animation library. We use it in the feedback component.
2584          </p>
2585          <div class="px-4 py-3 bg-white dark:bg-neutral-700/50 text-sm font-normal">
2586            <div class="mb-6" data-controller="tabs" data-tabs-active-tab-class="bg-neutral-900 text-white shadow-sm dark:bg-white dark:text-neutral-900 dark:shadow-sm hover:ring-neutral-800 dark:hover:bg-neutral-50 dark:hover:ring-white hover:text-white dark:hover:text-neutral-900" data-tabs-inactive-tab-class="hover:bg-white/75 ring-1 ring-transparent hover:ring-white dark:hover:bg-neutral-700 dark:hover:ring-neutral-600 text-neutral-600 dar
2586k:text-neutral-400 hover:text-neutral-900 dark:hover:text-neutral-200" data-tabs-index-value="0">
2587  <!-- Tab Controls -->
2588  <div class="opacity-0 transition-opacity duration-200 relative inline-grid items-center gap-2 justify-center grid-cols-3 p-1 mb-4 bg-neutral-100 border border-neutral-200 rounded-xl select-none dark:bg-neutral-800 dark:border-neutral-700" data-tabs-target="tabList" role="tablist">
2589    <button class="rounded-lg whitespace-nowrap text-xs font-medium transition flex gap-x-2 items-center justify-center py-2.5 px-3 w-full text-center text-current hover:text-current dark:text-current dark:hover:text-current focus-visible:outline-offset-2 focus-visible:outline-neutral-600 dark:focus-visible:outline-neutral-200" tabindex="0" data-tabs-target="tab" data-action="click->tabs#change:prevent" role="tab">
2590      Importmap
2591    </button>
2592    <button class="rounded-lg whitespace-nowrap text-xs font-medium transition flex gap-x-2 items-center justify-center py-2.5 px-3 w-full text-center text-current hover:text-current dark:text-current dark:hover:text-current focus-visible:outline-offset-2 focus-visible:outline-neutral-600 dar
2592k:focus-visible:outline-neutral-200" tabindex="0" data-tabs-target="tab" data-action="click->tabs#change:prevent" role="tab">
2593      NPM
2594    </button>
2595    <button class="rounded-lg whitespace-nowrap text-xs font-medium transition flex gap-x-2 items-center justify-center py-2.5 px-3 w-full text-center text-current hover:text-current dark:text-current dark:hover:text-current focus-visible:outline-offset-2 focus-visible:outline-neutral-600 dark:focus-visible:outline-neutral-200" tabindex="0" data-tabs-target="tab" data-action="click->tabs#change:prevent" role="tab">
2596      Yarn
2597    </button>
2598  </div>
2599
2600  <!-- Importmap Panel -->
2601  <div data-tabs-target="panel" role="tabpanel">
2602    <div class="rounded-t-xl overflow-hidden border-t border-x border-[#2D2D2D] max-h-lg">
2603      <div class="p-1 text-sm bg-neutral-900">
2604        <button type="button" class="px-2 pt-2 pb-1.5 text-xs text-neutral-400 dark:text-white/50 flex items-center gap-1" data-controller="clipboard" data-clipboard-text="config/importmap.rb" data-clipboard-success-message-value="Path Copied" data-clipboard-error-message-value="Copy Failed!" data-clipboard-show-tooltip-value="false" data-clipboard-tooltip-duration-value="1500">
2605          <span data-clipboard-target="copyContent" class="flex items-center gap-1.5">
2606            <svg xmlns="http://www.w3.org/2000/svg" class="size-4" width="18" height="18" viewBox="0 0 18 18"><g fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" stroke="currentColor"><path d="M8.0425 15.75H4.75C3.645 15.75 2.75 14.855 2.75 13.75V3.75C2.75 2.645 3.645 1.75 4.75 1.75H12.75C13.855 1.75 14.75 2.645 14.75 3.75V7.1048"></path> <path d="M5.75 5.75H11.75"></path> <path d="M5.75 8.75H11.75"></path> <path d="M5.75 11.75H8.25"></path> <path d="M13.7959 15.4542L16.9571 12.293C17.3476 11.9025 17.3476 11.2693 16.9571 10.8788L16.3713 10.293C15.9808 9.9025 15.3476 9.9025 14.9571 10.293L11.7959 13.4542L11.0001 16.2501L13.7959 15.4542Z"></path></g></svg>
2607            Add to config/importmap.rb
2608          </span>
2609          <span data-clipboard-target="copiedContent" class="hidden flex items-center gap-1.5 text-green-400">
2610            <svg xmlns="http://www.w3.org/2000/svg" class="size-4" width="18" height="18" viewBox="0 0 18 18"><g fill="currentColor"><path d="M6.75,15h-.002c-.227,0-.442-.104-.583-.281L2.165,9.719c-.259-.324-.207-.795,.117-1.054,.325-.259,.796-.206,1.054,.117l3.418,4.272L14.667,3.278c.261-.322,.732-.373,1.055-.111,.322,.261,.372,.733,.111,1.055L7.333,14.722c-.143,.176-.357,.278-.583,.278Z" fill="currentColor"></path></g></svg>
2611            Path Copied
2612          </span>
2613        </button>
2614      </div>
2615    </div>
2616    <div class="relative">
2617      <pre data-controller="highlight" class="language-ruby !mb-6 !bg-neutral-900 rounded-b-xl overflow-hidden border border-[#2D2D2D]"><code class="language-ruby !bg-neutral-900 max-h-[300px] !overflow-y-scroll !overflow-x-scroll text-sm small-scrollbar">pin "motion", to: "https://cdn.jsdelivr.net/npm/motion@latest/+esm"</code></pre>
2618      <button type="button" class="absolute top-2 right-4 flex items-center gap-1.5 rounded-lg px-3.5 py-2 text-sm font-medium shadow-xs focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-600 bg-neutral-800/50 text-neutral-50 hover:bg-neutral-700/50 dark:focus-visible:outline-neutral-200 border border-neutral-700"
2619            data-controller="clipboard"
2620            data-clipboard-text='pin "motion", to: "https://cdn.jsdelivr.net/npm/motion@latest/+esm"'
2621            data-clipboard-success-message-value="Code Copied"
2622            data-clipboard-error-message-value="Copy Failed!"
2623            data-clipboard-show-tooltip-value="false"
2624            data-clipboard-tooltip-duration-value="1500">
2625        <span data-clipboard-target="copyContent" class="flex items-center gap-1.5">
2626          <svg xmlns="http://www.w3.org/2000/svg" class="size-4" width="18" height="18" viewBox="0 0 18 18"><g fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" stroke="currentColor"><rect x="1.75" y="1.75" width="11" height="11" rx="2" ry="2" transform="translate(14.5 14.5) rotate(-180)"></rect><path d="M15.199,6.002l1.029,6.924c.162,1.093-.592,2.11-1.684,2.272l-6.924,1.029c-.933,.139-1.81-.39-2.148-1.228"></path><line x1="7.25" y1="9.75" x2="7.25" y2="4.75"></line><line x1="4.75" y1="7.25" x2="9.75" y2="7.25"></line></g></svg>
2627          Copy
2628        </span>
2629        <span data-clipboard-target="copiedContent" class="hidden flex items-center gap-1.5 text-green-400">
2630          <svg xmlns="http://www.w3.org/2000/svg" class="size-4" width="18" height="18" viewBox="0 0 18 18"><g fill="currentColor"><path d="M6.75,15h-.002c-.227,0-.442-.104-.583-.281L2.165,9.719c-.259-.324-.207-.795,.117-1.054,.325-.259,.796-.206,1.054,.117l3.418,4.272L14.667,3.278c-.261-.322,.732-.373,1.055-.111,.322,.261,.372,.733,.111,1.055L7.333,14.722c-.143,.176-.357,.278-.583,.278Z" fill="currentColor"></path></g></svg>
2631          Copied!
2632        </span>
2633      </button>
2634    </div>
2635  </div>
2636
2637  <!-- NPM Panel -->
2638  <div data-tabs-target="panel" role="tabpanel">
2639    <div class="rounded-t-xl overflow-hidden border-t border-x border-[#2D2D2D] max-h-lg">
2640      <div class="p-1 text-sm bg-neutral-900">
2641        <div class="px-2 pt-2 pb-1.5 text-xs text-neutral-400 dark:text-white/50 flex items-center gap-1">
2642          <svg xmlns="http://www.w3.org/2000/svg" class="size-4" width="18" height="18" viewBox="0 0 18 18"><g fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" stroke="currentColor"><rect x="2.75" y="2.75" width="12.5" height="12.5" rx="2" ry="2"></rect><line x1="9.75" y1="12.25" x2="12.25" y2="12.25"></line><polyline points="5.75 12.25 8.25 9.75 5.75 7.25"></polyline></g></svg>
2643          Terminal
2644        </div>
2645      </div>
2646    </div>
2647    <div class="relative">
2648      <pre data-controller="highlight" class="language-bash !mb-6 !bg-neutral-900 rounded-b-xl overflow-hidden border border-[#2D2D2D]"><code class="language-bash !bg-neutral-900 max-h-[300px] !overflow-y-scroll !overflow-x-scroll text-sm small-scrollbar">npm install motion</code></pre>
2649      <button type="button" class="absolute top-2 right-4 flex items-center gap-1.5 rounded-lg px-3.5 py-2 text-sm font-medium shadow-xs focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-600 bg-neutral-800/50 text-neutral-50 hover:bg-neutral-700/50 dark:focus-visible:outline-neutral-200 border border-neutral-700"
2650            data-controller="clipboard"
2651            data-clipboard-text="npm install motion"
2652            data-clipboard-success-message-value="Command Copied"
2653            data-clipboard-error-message-value="Copy Failed!"
2654            data-clipboard-show-tooltip-value="false"
2655            data-clipboard-tooltip-duration-value="1500">
2656        <span data-clipboard-target="copyContent" class="flex items-center gap-1.5">
2657          <svg xmlns="http://www.w3.org/2000/svg" class="size-4" width="18" height="18" viewBox="0 0 18 18"><g fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" stroke="currentColor"><rect x="1.75" y="1.75" width="11" height="11" rx="2" ry="2" transform="translate(14.5 14.5) rotate(-180)"></rect><path d="M15.199,6.002l1.029,6.924c.162,1.093-.592,2.11-1.684,2.272l-6.924,1.029c-.933,.139-1.81-.39-2.148-1.228"></path><line x1="7.25" y1="9.75" x2="7.25" y2="4.75"></line><line x1="4.75" y1="7.25" x2="9.75" y2="7.25"></line></g></svg>
2658          Copy
2659        </span>
2660        <span data-clipboard-target="copiedContent" class="hidden flex items-center gap-1.5 text-green-400">
2661          <svg xmlns="http://www.w3.org/2000/svg" class="size-4" width="18" height="18" viewBox="0 0 18 18"><g fill="currentColor"><path d="M6.75,15h-.002c-.227,0-.442-.104-.583-.281L2.165,9.719c-.259-.324-.207-.795,.117-1.054,.325-.259,.796-.206,1.054,.117l3.418,4.272L14.667,3.278c-.261-.322,.732-.373,1.055-.111,.322,.261,.372,.733,.111,1.055L7.333,14.722c-.143,.176-.357,.278-.583,.278Z" fill="currentColor"></path></g></svg>
2662          Copied!
2663        </span>
2664      </button>
2665    </div>
2666  </div>
2667
2668  <!-- Yarn Panel -->
2669  <div data-tabs-target="panel" role="tabpanel">
2670    <div class="rounded-t-xl overflow-hidden border-t border-x border-[#2D2D2D] max-h-lg">
2671      <div class="p-1 text-sm bg-neutral-900">
2672        <div class="px-2 pt-2 pb-1.5 text-xs text-neutral-400 dark:text-white/50 flex items-center gap-1">
2673          <svg xmlns="http://www.w3.org/2000/svg" class="size-4" width="18" height="18" viewBox="0 0 18 18"><g fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" stroke="currentColor"><rect x="2.75" y="2.75" width="12.5" height="12.5" rx="2" ry="2"></rect><line x1="9.75" y1="12.25" x2="12.25" y2="12.25"></line><polyline points="5.75 12.25 8.25 9.75 5.75 7.25"></polyline></g></svg>
2674          Terminal
2675        </div>
2676      </div>
2677    </div>
2678    <div class="relative">
2679      <pre data-controller="highlight" class="language-bash !mb-6 !bg-neutral-900 rounded-b-xl overflow-hidden border border-[#2D2D2D]"><code class="language-bash !bg-neutral-900 max-h-[300px] !overflow-y-scroll !overflow-x-scroll text-sm small-scrollbar">yarn add motion</code></pre>
2680      <button type="button" class="absolute top-2 right-4 flex items-center gap-1.5 rounded-lg px-3.5 py-2 text-sm font-medium shadow-xs focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-600 bg-neutral-800/50 text-neutral-50 hover:bg-neutral-700/50 dark:focus-visible:outline-neutral-200 border border-neutral-700"
2681            data-controller="clipboard"
2682            data-clipboard-text="yarn add motion"
2683            data-clipboard-success-message-value="Command Copied"
2684            data-clipboard-error-message-value="Copy Failed!"
2685            data-clipboard-show-tooltip-value="false"
2686            data-clipboard-tooltip-duration-value="1500">
2687        <span data-clipboard-target="copyContent" class="flex items-center gap-1.5">
2688          <svg xmlns="http://www.w3.org/2000/svg" class="size-4" width="18" height="18" viewBox="0 0 18 18"><g fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" stroke="currentColor"><rect x="1.75" y="1.75" width="11" height="11" rx="2" ry="2" transform="translate(14.5 14.5) rotate(-180)"></rect><path d="M15.199,6.002l1.029,6.924c.162,1.093-.592,2.11-1.684,2.272l-6.924,1.029c-.933,.139-1.81-.39-2.148-1.228"></path><line x1="7.25" y1="9.75" x2="7.25" y2="4.75"></line><line x1="4.75" y1="7.25" x2="9.75" y2="7.25"></line></g></svg>
2689          Copy
2690        </span>
2691        <span data-clipboard-target="copiedContent" class="hidden flex items-center gap-1.5 text-green-400">
2692          <svg xmlns="http://www.w3.org/2000/svg" class="size-4" width="18" height="18" viewBox="0 0 18 18"><g fill="currentColor"><path d="M6.75,15h-.002c-.227,0-.442-.104-.583-.281L2.165,9.719c-.259-.324-.207-.795,.117-1.054,.325-.259,.796-.206,1.054,.117l3.418,4.272L14.667,3.278c-.261-.322,.732-.373,1.055-.111,.322,.261,.372,.733,.111,1.055L7.333,14.722c-.143,.176-.357,.278-.583,.278Z" fill="currentColor"></path></g></svg>
2693          Copied!
2694        </span>
2695      </button>
2696    </div>
2697  </div>
2698</div>
2699
2700          </div>
2701        </div>
2702      </div>
2703    </div>
2704  </div>
2705</div>
2706
2707  </div>
2708</div>
2709
2710<h2 id="2-stimulus-controllers" class="group text-2xl font-bold mb-4 mt-12 flex gap-1.5 items-center pb-4 border-b border-neutral-950/20 dark:border-white/20"><span>2. Stimulus controllers</span><a class="hidden align-middle group-hover:inline-block" href="#2-stimulus-controllers"><svg xmlns="http://www.w3.org/2000/svg" class="text-neutral-500 dark:text-neutral-400 size-5" width="18" height="18" viewBox="0 0 18 18"><g stroke-width="1.5" fill="none" stroke="currentColor"><path d="M8.5,6.827c-.352,.168-.682,.398-.973,.69l-.01,.01c-1.381,1.381-1.381,3.619,0,5l2.175,2.175c1.381,1.381,3.619,1.381,5,0l.01-.01c1.381-1.381,1.381-3.619,0-5l-.931-.931" stroke-linecap="round" stroke-linejoin="round" stroke="currentColor"></path><path d="M9.5,11.173c.352-.168,.682-.398,.973-.69l.01-.01c1.381-1.381,1.381-3.619,0-5l-2.175-2.175c-1.381-1.381-3.619-1.381-5,0l-.01,.01c-1.381,1.381-1.381,3.619,0,5l.931,.931" stroke-linecap="round" stroke-linejoin="round"></path></g></svg>
2711</a></h2>
2712<p class="mb-4 text-sm text-neutral-500 dark:text-neutral-400">Rails Blocks components are powered by <a href="https://stimulus.hotwired.dev/reference/controllers" class="text-neutral-900 dark:text-white underline hover:opacity-80" target="_blank">Stimulus controllers</a>. Each component has its own controller(s) that you'll need to copy to your application.</p>
2713<p class="mb-4 text-sm text-neutral-500 dark:text-neutral-400">To ensure all Stimulus controllers are automatically loaded, you need to configure your <code class="code-inline-text">app/javascript/controllers/index.js</code>:</p>
2714
2715<div class="rounded-t-xl overflow-hidden border-t border-x border-[#2D2D2D] max-h-lg">
2716  <div class="p-1 text-sm bg-neutral-900">
2717    <button type="button" class="px-2 pt-2 pb-1.5 text-xs text-neutral-400 dark:text-white/50 flex items-center gap-1"
2718          data-controller="clipboard analytics"
2719          data-action="click->analytics#track"
2720          data-analytics-event-name-value="installation copied stimulus index"
2721          data-clipboard-text="app/javascript/controllers/index.js"
2722          data-clipboard-success-message-value="File Copied"
2723          data-clipboard-error-message-value="Copy Failed!"
2724          data-clipboard-show-tooltip-value="false"
2725          data-clipboard-tooltip-duration-value="1500">
2726      <span data-clipboard-target="copyContent" class="flex items-center gap-1.5">
2727        <svg xmlns="http://www.w3.org/2000/svg" class="size-4" width="18" height="18" viewBox="0 0 18 18"><g fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" stroke="currentColor"><path d="M8.0425 15.75H4.75C3.645 15.75 2.75 14.855 2.75 13.75V3.75C2.75 2.645 3.645 1.75 4.75 1.75H12.75C13.855 1.75 14.75 2.645 14.75 3.75V7.1048"></path> <path d="M5.75 5.75H11.75"></path> <path d="M5.75 8.75H11.75"></path> <path d="M5.75 11.75H8.25"></path> <path d="M13.7959 15.4542L16.9571 12.293C17.3476 11.9025 17.3476 11.2693 16.9571 10.8788L16.3713 10.293C15.9808 9.9025 15.3476 9.9025 14.9571 10.293L11.7959 13.4542L11.0001 16.2501L13.7959 15.4542Z"></path></g></svg>
2728        app/javascript/controllers/index.js
2729      </span>
2730      <span data-clipboard-target="copiedContent" class="hidden flex items-center gap-1.5 text-green-400">
2731        <svg xmlns="http://www.w3.org/2000/svg" class="size-4" width="18" height="18" viewBox="0 0 18 18"><g fill="currentColor"><path d="M6.75,15h-.002c-.227,0-.442-.104-.583-.281L2.165,9.719c-.259-.324-.207-.795,.117-1.054,.325-.259,.796-.206,1.054,.117l3.418,4.272L14.667,3.278c.261-.322,.732-.373,1.055-.111,.322,.261,.372,.733,.111,1.055L7.333,14.722c-.143,.176-.357,.278-.583,.278Z" fill="currentColor"></path></g></svg>
2732        app/javascript/controllers/index.js
2733      </span>
2734    </button>
2735  </div>
2736</div>
2737<div class="relative">
2738  <pre data-controller="highlight" class="language-javascript !mb-4 !bg-neutral-900 rounded-b-xl overflow-hidden border border-[#2D2D2D]"><code class="language-javascript !bg-neutral-900 max-h-[300px] !overflow-y-scroll !overflow-x-scroll text-sm small-scrollbar">// Import and register all your controllers from the importmap under controllers/*
2739
2740import { application } from &quot;controllers/application&quot;;
2741
2742// Eager load all controllers defined in the import map under controllers/**/*_controller
2743import { eagerLoadControllersFrom } from &quot;@hotwired/stimulus-loading&quot;;
2744eagerLoadControllersFrom(&quot;controllers&quot;, application);
2745</code></pre>
2746  <button type="button" class="absolute top-2 right-4 flex items-center gap-1.5 rounded-lg px-3.5 py-2 text-sm font-medium shadow-xs focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-600 bg-neutral-800/50 text-neutral-50 hover:bg-neutral-700/50 dark:focus-visible:outline-neutral-200 border border-neutral-700"
2747          data-controller="clipboard analytics"
2748          data-action="click->analytics#track"
2749          data-analytics-event-name-value="installation copied stimulus index code"
2750          data-clipboard-text="// Import and register all your controllers from the importmap under controllers/*
2751
2752import { application } from &quot;controllers/application&quot;;
2753
2754// Eager load all controllers defined in the import map under controllers/**/*_controller
2755import { eagerLoadControllersFrom } from &quot;@hotwired/stimulus-loading&quot;;
2756eagerLoadControllersFrom(&quot;controllers&quot;, application);
2757"
2758          data-clipboard-success-message-value="Code Copied"
2759          data-clipboard-error-message-value="Copy Failed!"
2760          data-clipboard-show-tooltip-value="false"
2761          data-clipboard-tooltip-duration-value="1500">
2762    <span data-clipboard-target="copyContent" class="flex items-center gap-1.5">
2763      <svg xmlns="http://www.w3.org/2000/svg" class="size-4" width="18" height="18" viewBox="0 0 18 18"><g fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" stroke="currentColor"><rect x="1.75" y="1.75" width="11" height="11" rx="2" ry="2" transform="translate(14.5 14.5) rotate(-180)"></rect><path d="M15.199,6.002l1.029,6.924c.162,1.093-.592,2.11-1.684,2.272l-6.924,1.029c-.933,.139-1.81-.39-2.148-1.228"></path><line x1="7.25" y1="9.75" x2="7.25" y2="4.75"></line><line x1="4.75" y1="7.25" x2="9.75" y2="7.25"></line></g></svg>
2764      Copy
2765    </span>
2766    <span data-clipboard-target="copiedContent" class="hidden flex items-center gap-1.5 text-green-400">
2767      <svg xmlns="http://www.w3.org/2000/svg" class="size-4" width="18" height="18" viewBox="0 0 18 18"><g fill="currentColor"><path d="M6.75,15h-.002c-.227,0-.442-.104-.583-.281L2.165,9.719c-.259-.324-.207-.795,.117-1.054,.325-.259,.796-.206,1.054,.117l3.418,4.272L14.667,3.278c-.261-.322,.732-.373,1.055-.111,.322,.261,.372,.733,.111,1.055L7.333,14.722c-.143,.176-.357,.278-.583,.278Z" fill="currentColor"></path></g></svg>
2768      Copied!
2769    </span>
2770  </button>
2771</div>
2772
2773<p class="mb-4 text-sm text-neutral-500 dark:text-neutral-400">Also update your <code class="code-inline-text">config/importmap.rb</code>:</p>
2774
2775<div class="rounded-t-xl overflow-hidden border-t border-x border-[#2D2D2D] max-h-lg">
2776  <div class="p-1 text-sm bg-neutral-900">
2777    <button type="button" class="px-2 pt-2 pb-1.5 text-xs text-neutral-400 dark:text-white/50 flex items-center gap-1"
2778          data-controller="clipboard analytics"
2779          data-action="click->
2779analytics#track"
2780          data-analytics-event-name-value="installation copied stimulus importmap"
2781          data-clipboard-text="config/importmap.rb"
2782          data-clipboard-success-message-value="File Copied"
2783          data-clipboard-error-message-value="Copy Failed!"
2784          data-clipboard-show-tooltip-value="false"
2785          data-clipboard-tooltip-duration-value="1500">
2786      <span data-clipboard-target="copyContent" class="flex items-center gap-1.5">
2787        <svg xmlns="http://www.w3.org/2000/svg" class="size-4" width="18" height="18" viewBox="0 0 18 18"><g fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" stroke="currentColor"><path d="M8.0425 15.75H4.75C3.645 15.75 2.75 14.855 2.75 13.75V3.75C2.75 2.645 3.645 1.75 4.75 1.75H12.75C13.855 1.75 14.75 2.645 14.75 3.75V7.1048"></path> <path d="M5.75 5.75H11.75"></path> <path d="M5.75 8.75H11.75"></path> <path d="M5.75 11.75H8.25"></path> <path d="M13.7959 15.4542L16.9571 12.293C17.3476 11.9025 17.3476 11.2693 16.9571 10.8788L16.3713 10.293C15.9808 9.9025 15.3476 9.9025 14.9571 10.293L11.7959 13.4542L11.0001 16.2501L13.7959 15.4542Z"></path></g></svg>
2788        config/importmap.rb
2789      </span>
2790      <span data-clipboard-target="copiedContent" class="hidden flex items-center gap-1.5 text-green-400">
2791        <svg xmlns="http://www.w3.org/2000/svg" class="size-4" width="18" height="18" viewBox="0 0 18 18"><g fill="currentColor"><path d="M6.75,15h-.002c-.227,0-.442-.104-.583-.281L2.165,9.719c-.259-.324-.207-.795,.117-1.054,.325-.259,.796-.206,1.054,.117l3.418,4.272L14.667,3.278c-.261-.322,.732-.373,1.055-.111,.322,.261,.372,.733,.111,1.055L7.333,14.722c-.143,.176-.357,.278-.583,.278Z" fill="currentColor"></path></g></svg>
2792        config/importmap.rb
2793      </span>
2794    </button>
2795  </div>
2796</div>
2797<div class="relative">
2798  <pre data-controller="highlight" class="language-ruby !mb-4 !bg-neutral-900 rounded-b-xl overflow-hidden border border-[#2D2D2D]"><code class="language-ruby !bg-neutral-900 max-h-[300px] !overflow-y-scroll !overflow-x-scroll text-sm small-scrollbar"># Make sure these lines are in your importmap:
2799pin &quot;@hotwired/stimulus-loading&quot;, to: &quot;stimulus-loading.js&quot;
2800pin_all_from &quot;app/javascript/controllers&quot;, under: &quot;controllers&quot;
2801</code></pre>
2802  <button type="button" class="absolute top-2 right-4 flex items-center gap-1.5 rounded-lg px-3.5 py-2 text-sm font-medium shadow-xs focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-600 bg-neutral-800/50 text-neutral-50 hover:bg-neutral-700/50 dark:focus-visible:outline-neutral-200 border border-neutral-700"
2803          data-controller="clipboard analytics"
2804          data-action="click->analytics#track"
2805          data-analytics-event-name-value="installation copied stimulus importmap code"
2806          data-clipboard-text="# Make sure these lines are in your importmap:
2807pin &quot;@hotwired/stimulus-loading&quot;, to: &quot;stimulus-loading.js&quot;
2808pin_all_from &quot;app/javascript/controllers&quot;, under: &quot;controllers&quot;
2809"
2810          data-clipboard-success-message-value="Code Copied"
2811          data-clipboard-error-message-value="Copy Failed!"
2812          data-clipboard-show-tooltip-value="false"
2813          data-clipboard-tooltip-duration-value="1500">
2814    <span data-clipboard-target="copyContent" class="flex items-center gap-1.5">
2815      <svg xmlns="http://www.w3.org/2000/svg" class="size-4" width="18" height="18" viewBox="0 0 18 18"><g fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" stroke="currentColor"><rect x="1.75" y="1.75" width="11" height="11" rx="2" ry="2" transform="translate(14.5 14.5) rotate(-180)"></rect><path d="M15.199,6.002l1.029,6.924c.162,1.093-.592,2.11-1.684,2.272l-6.924,1.029c-.933,.139-1.81-.39-2.148-1.228"></path><line x1="7.25" y1="9.75" x2="7.25" y2="4.75"></line><line x1="4.75" y1="7.25" x2="9.75" y2="7.25"></line></g></svg>
2816      Copy
2817    </span>
2818    <span data-clipboard-target="copiedContent" class="hidden flex items-center gap-1.5 text-green-400">
2819      <svg xmlns="http://www.w3.org/2000/svg" class="size-4" width="18" height="18" viewBox="0 0 18 18"><g fill="currentColor"><path d="M6.75,15h-.002c-.227,0-.442-.104-.583-.281L2.165,9.719c-.259-.324-.207-.795,.117-1.054,.325-.259,.796-.206,1.054,.117l3.418,4.272L14.667,3.278c-.261-.322,.732-.373,1.055-.111,.322,.261,.372,.733,.111,1.055L7.333,14.722c-.143,.176-.357,.278-.583,.278Z" fill="currentColor"></path></g></svg>
2820      Copied!
2821    </span>
2822  </button>
2823</div>
2824
2825<div class="mb-6" data-controller="tabs" data-tabs-active-tab-class="bg-neutral-900 text-white shadow-sm dark:bg-white dark:text-neutral-900 dark:shadow-sm hover:ring-neutral-800 dark:hover:bg-neutral-50 dark:hover:ring-white hover:text-white dark:hover:text-neutral-900" data-tabs-inactive-tab-class="hover:bg-white/75 ring-1 ring-transparent hover:ring-white dark:hover:bg-neutral-700 dark:hover:ring-neutral-600 text-neutral-600 dar
2825k:text-neutral-400 hover:text-neutral-900 dark:hover:text-neutral-200" data-tabs-index-value="0">
2826  <!-- Tab Controls -->
2827  <div class="opacity-0 transition-opacity duration-200 relative inline-flex items-center gap-2 justify-center p-1 bg-neutral-100 border border-neutral-200 rounded-xl select-none dark:bg-neutral-800 dark:border-neutral-700 mb-4" data-tabs-target="tabList" role="tablist">
2828    <button class="rounded-lg whitespace-nowrap text-xs font-medium transition flex gap-x-2 items-center justify-center py-2.5 px-3 w-full text-center text-current hover:text-current dark:text-current dark:hover:text-current focus-visible:outline-offset-2 focus-visible:outline-neutral-600 dark:focus-visible:outline-neutral-200" tabindex="0" data-tabs-target="tab" data-action="click->tabs#change:prevent" role="tab">
2829      Quick Stimulus install
2830    </button>
2831    <button class="rounded-lg whitespace-nowrap text-xs font-medium transition flex gap-x-2 items-center justify-center py-2.5 px-3 w-full text-center text-current hover:text-current dark:text-current dark:hover:text-current focus-visible:outline-offset-2 focus-visible:outline-neutral-600 dar
2831k:focus-visible:outline-neutral-200" tabindex="0" data-tabs-target="tab" data-action="click->tabs#change:prevent" role="tab">
2832      Granular installation
2833    </button>
2834  </div>
2835
2836  <!-- Quick install Panel -->
2837  <div data-tabs-target="panel" role="tabpanel" class="p-4 bg-white dark:bg-neutral-800 border border-black/10 dark:border-white/10 rounded-xl">
2838    <div class="flex flex-col gap-6">
2839  <div class="flex flex-col items-start gap-4">
2840    <p class="text-sm text-neutral-500 dark:text-neutral-400">
2841      You can download all the Stimulus controllers as a ZIP file.
2842        This includes controllers for all free components.
2843    </p>
2844
2845      <div class="flex flex-col gap-2">
2846        <a class="flex items-center justify-center gap-1.5 rounded-lg border border-neutral-400/30 bg-neutral-800 px-3.5 py-2 text-sm font-medium whitespace-nowrap text-white shadow-sm transition-all duration-100 ease-in-out select-none hover:bg-neutral-700 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-600 disabled:cursor-not-allowed disabled:opacity-50 dark:bg-white dark:text-neutral-800 dark:hover:bg-neutral-100 dark:focus-visible:outline-neutral-200" data-turbo="false" data-controller="analytics" data-action="click-&gt;analytics#track" data-analytics-event-name-value="downloaded free stimulus controllers" href="/downloads/stimulus_controllers?type=free">
2847          <svg xmlns="http://www.w3.org/2000/svg" class="size-3.5 sm:size-4" width="18" height="18" viewBox="0 0 18 18"><g fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" stroke="currentColor"><path d="M15.25 11.75V13.25C15.25 14.355 14.355 15.25 13.25 15.25H4.75C3.645 15.25 2.75 14.355 2.75 13.25V11.75"></path> <path d="M5.5 6.75L9 10.25L12.5 6.75"></path> <path d="M9 10.25V2.75"></path></g></svg>
2848          Download free controllers (ZIP)
2849</a>
2850        <div class="flex items-center gap-1 text-xs text-neutral-500 dark:text-neutral-400">
2851          Want the pro controllers?
2852        </div>
2853        <div class="inline relative">
2854    <div class="rainbow-button hover:opacity-80 transition-opacity duration-100 ease-in-out" data-controller="rainbow-button" data-rainbow-button-speed-value="2.5" data-rainbow-button-intensity-value="0.7">
2855      <a href="/pro" data-turbo-frame="_top" class="group relative text-red-900 dark:text-red-100 flex items-center justify-center gap-1 rounded-md border border-neutral-200 bg-white/90 px-1 py-0.5 text-xs font-medium whitespace-nowrap shadow-xs transition-background transition-shadow duration-100 ease-in-out select-none hover:bg-neutral-50 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-600 disabled:cursor-not-allowed disabled:opacity-50 dark:border-neutral-700 dark:bg-neutral-800/50 dark:hover:bg-neutral-700/50 dark:focus-visible:outline-neutral-200">
2856        <svg xmlns="http://www.w3.org/2000/svg" class="size-3" width="18" height="18" viewBox="0 0 18 18"><g fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" stroke="currentColor"><polyline points="14.983 5.53 9 9 3.017 5.53"></polyline><line x1="9" y1="15.938" x2="9" y2="9"></line><path d="M7.997,2.332L3.747,4.797c-.617,.358-.997,1.017-.997,1.73v4.946c0,.713,.38,1.372,.997,1.73l4.25,2.465c.621,.36,1.386,.36,2.007,0l4.25-2.465c.617-.358,.997-1.017,.997-1.73V6.527c0-.713-.38-1.372-.997-1.73l-4.25-2.465c-.621-.36-1.386-.36-2.007,0Z"></path></g></svg>
2857        Get pro access
2858      </a>
2859    </div>
2860  </div>
2861
2862      </div>
2863  </div>
2864
2865  <div class="rounded-xl border border-blue-200/50 bg-blue-50 p-4 dark:border-blue-800/50 dark:bg-blue-900/20 text-blue-900 dark:text-blue-200">
2866    <div class="grid grid-cols-[auto_1fr] gap-2 items-start">
2867      <div class="flex items-center h-full">
2868        <svg xmlns="http://www.w3.org/2000/svg" class="text-blue-500 dark:text-blue-400" width="18" height="18" viewBox="0 0 18 18"><g fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" stroke="currentColor"><path d="M9 16.25C13.004 16.25 16.25 13.004 16.25 9C16.25 4.996 13.004 1.75 9 1.75C4.996 1.75 1.75 4.996 1.75 9C1.75 13.004 4.996 16.25 9 16.25Z"></path> <path d="M9 12.75V9.25C9 8.9739 8.7761 8.75 8.5 8.75H7.75"></path> <path d="M9 6.75C8.448 6.75 8 6.301 8 5.75C8 5.199 8.448 4.75 9 4.75C9.552 4.75 10 5.199 10 5.75C10 6.301 9.552 6.75 9 6.75Z" fill="currentColor" data-stroke="none" stroke="none"></path></g></svg>
2869      </div>
2870      <p class="text-sm font-semibold">
2871        How to install all controllers
2872      </p>
2873      <div></div>
2874      <div class="text-sm space-y-2">
2875        <p>After downloading, unzip the file and copy the contents to your application's <code class="code-inline-text">app/javascript/controllers/</code> directory.</p>
2876        <p>Make sure to run <code class="code-inline-text">bin/dev</code> or restart your server to pick up the new files.</p>
2877      </div>
2878    </div>
2879  </div>
2880</div>
2881
2882  </div>
2883
2884  <!-- Full install Panel -->
2885  <div data-tabs-target="panel" role="tabpanel" class="p-4 bg-white dark:bg-neutral-800 border border-black/10 dark:border-white/10 rounded-xl">
2886    <div class="rounded-xl border border-blue-200/50 bg-blue-50 p-4 dark:border-blue-800/50 dark:bg-blue-900/20 text-blue-900 dark:text-blue-200">
2887  <div class="grid grid-cols-[auto_1fr] gap-2 items-start">
2888    <div class="flex items-center h-full">
2889      <svg xmlns="http://www.w3.org/2000/svg" class="text-blue-500 dark:text-blue-400" width="18" height="18" viewBox="0 0 18 18"><g fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" stroke="currentColor"><path d="M9 16.25C13.004 16.25 16.25 13.004 16.25 9C16.25 4.996 13.004 1.75 9 1.75C4.996 1.75 1.75 4.996 1.75 9C1.75 13.004 4.996 16.25 9 16.25Z"></path> <path d="M9 12.75V9.25C9 8.9739 8.7761 8.75 8.5 8.75H7.75"></path> <path d="M9 6.75C8.448 6.75 8 6.301 8 5.75C8 5.199 8.448 4.75 9 4.75C9.552 4.75 10 5.199 10 5.75C10 6.301 9.552 6.75 9 6.75Z" fill="currentColor" data-stroke="none" stroke="none"></path></g></svg>
2890    </div>
2891    <p class="text-sm font-semibold">
2892      How to install Stimulus controllers for each component
2893    </p>
2894    <div></div>
2895    <div class="text-sm space-y-2">
2896      <ol class="list-decimal list-inside space-y-1">
2897        <li>Navigate to the component page you want to use (e.g., <a target="_blank" class="text-blue-700 dark:text-blue-100 underline" href="/docs/combobox">Combobox</a>, <a target="_blank" class="text-blue-700 dark:text-blue-100 underline" href="/docs/modal">Modal</a>, <a target="_blank" class="text-blue-700 dark:text-blue-100 underline" href="/docs/dropdown">Dropdown</a>, etc.)</li>
2898        <li>Look for the <strong>"Stimulus Controller Setup"</strong> section</li>
2899        <li>Copy the Stimulus controller(s) code</li>
2900        <li>Create a new file in your <code class="code-inline-text">app/javascript/controllers/</code> directory with the indicated controller name(s)</li>
2901        <li>Paste the controller code and save the file(s)</li>
2902      </ol>
2903    </div>
2904  </div>
2905</div>
2906
2907  </div>
2908</div>
2909
2910<p class="text-sm text-neutral-600 dark:text-neutral-400">Each component page includes the complete Stimulus controller code along with usage examples and configuration options.</p>
2911
2912<h2 id="3-custom-css" class="group text-2xl font-bold mb-4 mt-12 flex gap-1.5 items-center pb-4 border-b border-neutral-950/20 dark:border-white/20"><span>3. Custom CSS</span><a class="hidden align-middle group-hover:inline-block" href="#3-custom-css"><svg xmlns="http://www.w3.org/2000/svg" class="text-neutral-500 dark:text-neutral-400 size-5" width="18" height="18" viewBox="0 0 18 18"><g stroke-width="1.5" fill="none" stroke="currentColor"><path d="M8.5,6.827c-.352,.168-.682,.398-.973,.69l-.01,.01c-1.381,1.381-1.381,3.619,0,5l2.175,2.175c1.381,1.381,3.619,1.381,5,0l.01-.01c1.381-1.381,1.381-3.619,0-5l-.931-.931" stroke-linecap="round" stroke-linejoin="round" stroke="currentColor"></path><path d="M9.5,11.173c.352-.168,.682-.398,.973-.69l.01-.01c1.381-1.381,1.381-3.619,0-5l-2.175-2.175c-1.381-1.381-3.619-1.381-5,0l-.01,.01c-1.381,1.381-1.381,3.619,0,5l.931,.931" stroke-linecap="round" stroke-linejoin="round"></path></g></svg>
2913</a></h2>
2914
2915  <span class="text-sm text-neutral-500 dark:text-neutral-400">The full list of custom CSS classes is available to   <div class="inline relative">
2916    <div class="rainbow-button hover:opacity-80 transition-opacity duration-100 ease-in-out" data-controller="rainbow-button" data-rainbow-button-speed-value="2.5" data-rainbow-button-intensity-value="0.7">
2917      <a href="/pro" data-turbo-frame="_top" class="group relative text-red-900 dark:text-red-100 flex items-center justify-center gap-1 rounded-md border border-neutral-200 bg-white/90 px-1 py-0.5 text-xs font-medium whitespace-nowrap shadow-xs transition-background transition-shadow duration-100 ease-in-out select-none hover:bg-neutral-50 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-600 disabled:cursor-not-allowed disabled:opacity-50 dark:border-neutral-700 dark:bg-neutral-800/50 dark:hover:bg-neutral-700/50 dark:focus-visible:outline-neutral-200">
2918        <svg xmlns="http://www.w3.org/2000/svg" class="size-3" width="18" height="18" viewBox="0 0 18 18"><g fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" stroke="currentColor"><polyline points="14.983 5.53 9 9 3.017 5.53"></polyline><line x1="9" y1="15.938" x2="9" y2="9"></line><path d="M7.997,2.332L3.747,4.797c-.617,.358-.997,1.017-.997,1.73v4.946c0,.713,.38,1.372,.997,1.73l4.25,2.465c.621,.36,1.386,.36,2.007,0l4.25-2.465c.617-.358,.997-1.017,.997-1.73V6.527c0-.713-.38-1.372-.997-1.73l-4.25-2.465c-.621-.36-1.386-.36-2.007,0Z"></path></g></svg>
2919        Pro
2920      </a>
2921    </div>
2922  </div>
2923 users only. If you don't have a pro licence, you will only have access to custom CSS for free components.</span>
2924
2925<div class="mt-4 mb-6" data-controller="tabs" data-tabs-active-tab-class="bg-neutral-900 text-white shadow-sm dark:bg-white dark:text-neutral-900 dark:shadow-sm hover:ring-neutral-800 dark:hover:bg-neutral-50 dark:hover:ring-white hover:text-white dark:hover:text-neutral-900" data-tabs-inactive-tab-class="hover:bg-white/75 ring-1 ring-transparent hover:ring-white dark:hover:bg-neutral-700 dark:hover:ring-neutral-600 text-neutral-600 dar
2925k:text-neutral-400 hover:text-neutral-900 dark:hover:text-neutral-200" data-tabs-index-value="0">
2926  <!-- Tab Controls -->
2927  <div class="opacity-0 transition-opacity duration-200 relative inline-flex items-center gap-2 justify-center p-1 bg-neutral-100 border border-neutral-200 rounded-xl select-none dark:bg-neutral-800 dark:border-neutral-700 mb-4" data-tabs-target="tabList" role="tablist">
2928    <button class="rounded-lg whitespace-nowrap text-xs font-medium transition flex gap-x-2 items-center justify-center py-2.5 px-3 w-full text-center text-current hover:text-current dark:text-current dark:hover:text-current focus-visible:outline-offset-2 focus-visible:outline-neutral-600 dark:focus-visible:outline-neutral-200" tabindex="0" data-tabs-target="tab" data-action="click->tabs#change:prevent" role="tab">
2929      Quick CSS install
2930    </button>
2931    <button class="rounded-lg whitespace-nowrap text-xs font-medium transition flex gap-x-2 items-center justify-center py-2.5 px-3 w-full text-center text-current hover:text-current dark:text-current dark:hover:text-current focus-visible:outline-offset-2 focus-visible:outline-neutral-600 dar
2931k:focus-visible:outline-neutral-200" tabindex="0" data-tabs-target="tab" data-action="click->tabs#change:prevent" role="tab">
2932      Granular installation
2933    </button>
2934  </div>
2935
2936  <!-- Quick install Panel -->
2937  <div data-tabs-target="panel" data-controller="setup-code-filter" data-setup-code-filter-include-dark-value="true" role="tabpanel" class="p-4 bg-white dark:bg-neutral-800 border border-black/10 dark:border-white/10 rounded-xl">
2938    <p class="mb-4 text-sm text-neutral-500 dark:text-neutral-400">Here are the custom CSS classes that we used on Rails Blocks to style all the components. You can copy and paste these into your own CSS file to style & personalize your application.</p>
2939
2940<div class="mt-4 rounded-t-xl overflow-hidden border-t border-x border-[#2D2D2D] max-h-lg">
2941  <div class="p-1 text-sm bg-neutral-900 flex items-center justify-between">
2942    <button type="button" class="px-2 pt-2 pb-1.5 text-xs text-neutral-400 dark:text-white/50 flex items-center gap-1"
2943          data-controller="clipboard"
2944          data-clipboard-text="application.css"
2945          data-clipboard-success-message-value="Controller Copied"
2946          data-clipboard-error-message-value="Copy Failed!"
2947          data-clipboard-show-tooltip-value="false"
2948          data-clipboard-tooltip-duration-value="1500">
2949      <span data-clipboard-target="copyContent" class="flex items-center gap-1.5">
2950        <svg xmlns="http://www.w3.org/2000/svg" class="size-4" width="18" height="18" viewBox="0 0 18 18"><g fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" stroke="currentColor"><path d="M8.0425 15.75H4.75C3.645 15.75 2.75 14.855 2.75 13.75V3.75C2.75 2.645 3.645 1.75 4.75 1.75H12.75C13.855 1.75 14.75 2.645 14.75 3.75V7.1048"></path> <path d="M5.75 5.75H11.75"></path> <path d="M5.75 8.75H11.75"></path> <path d="M5.75 11.75H8.25"></path> <path d="M13.7959 15.4542L16.9571 12.293C17.3476 11.9025 17.3476 11.2693 16.9571 10.8788L16.3713 10.293C15.9808 9.9025 15.3476 9.9025 14.9571 10.293L11.7959 13.4542L11.0001 16.2501L13.7959 15.4542Z"></path></g></svg>
2951        application.css
2952      </span>
2953      <span data-clipboard-target="copiedContent" class="hidden flex items-center gap-1.5 text-green-400">
2954        <svg xmlns="http://www.w3.org/2000/svg" class="size-4" width="18" height="18" viewBox="0 0 18 18"><g fill="currentColor"><path d="M6.75,15h-.002c-.227,0-.442-.104-.583-.281L2.165,9.719c-.259-.324-.207-.795,.117-1.054,.325-.259,.796-.206,1.054,.117l3.418,4.272L14.667,3.278c.261-.322,.732-.373,1.055-.111,.322,.261,.372,.733,.111,1.055L7.333,14.722c-.143,.176-.357,.278-.583,.278Z" fill="currentColor"></path></g></svg>
2955        application.css
2956      </span>
2957    </button>
2958    <label class="hidden sm:flex group items-center gap-2 cursor-pointer px-2 py-1.5" title="Include dark mode classes">
2959      <span class="text-xs text-neutral-400 hidden sm:block">Include <span class="inline items-center justify-center rounded-md border px-1 py-0.5 font-mono text-[11px] border-white/10 bg-neutral-900 text-neutral-200">:dark</span> classes</span>
2960      <div class="relative">
2961        <input type="checkbox" class="sr-only peer" checked data-setup-code-filter-target="checkbox" data-action="change->setup-code-filter#toggle">
2962        <!-- Background element -->
2963        <div class="w-10 h-6 bg-neutral-200 border border-black/10 rounded-full transition-all duration-150 ease-in-out cursor-pointer group-hover:bg-[#dcdcdb] peer-checked:bg-[#404040] peer-checked:group-hover:bg-neutral-600 peer-checked:border-white/10 peer-focus-visible:outline-2 peer-focus-visible:outline-offset-2 peer-focus-visible:outline-neutral-600"></div>
2964        <!-- Round element with icons inside -->
2965        <div class="absolute top-[3px] left-[3px] w-[18px] h-[18px] bg-white rounded-full shadow-sm transition-all duration-150 ease-in-out peer-checked:translate-x-4 flex items-center justify-center">
2966          <!-- X icon for unchecked state -->
2967          <svg xmlns="http://www.w3.org/2000/svg" class="size-4 text-neutral-400 transition-all duration-150 ease-in-out group-has-[:checked]:opacity-0" width="20" height="20" viewBox="0 0 20 20"><g fill="currentColor"><line x1="7" y1="7" x2="13" y2="13" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></line><line x1="7" y1="13" x2="13" y2="7" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></line></g></svg>
2968          <!-- Checkmark icon for checked state -->
2969          <svg xmlns="http://www.w3.org/2000/svg" class="absolute size-4 text-neutral-700 transition-all duration-150 ease-in-out opacity-0 group-has-[:checked]:opacity-100" width="20" height="20" viewBox="0 0 20 20"><g fill="currentColor"><polyline points="6.5 10.5 8.75 13 13.5 7" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></polyline></g></svg>
2970        </div>
2971      </div>
2972    </label>
2973  </div>
2974</div>
2975<div class="relative">
2976  <pre data-controller="highlight" class="language-css !mb-4 !bg-neutral-900 rounded-b-xl overflow-hidden border border-[#2D2D2D]"><code class="language-css !bg-neutral-900 max-h-[300px] !overflow-y-scroll !overflow-x-scroll text-sm small-scrollbar" data-setup-code-filter-target="code">/* Semantic theme tokens. Custom themes override the --rb-* variables. */
2977@theme inline {
2978  --color-primary: var(--rb-primary, var(--color-neutral-800));
2979  --color-primary-hover: var(--rb-primary-hover, var(--color-neutral-700));
2980  --color-primary-content: var(--rb-primary-content, var(--color-neutral-800));
2981  --color-primary-foreground: var(--rb-primary-foreground, var(--color-white));
2982  --color-accent: var(--rb-primary, var(--color-neutral-800));
2983}
2984
2985:root {
2986  accent-color: var(--color-accent);
2987}
2988
2989kbd {
2990  @apply rounded-md border border-black/10 bg-white px-1 font-mono text-[11px] text-neutral-800 shadow-[0px_1.5px_0px_0px_rgba(0,0,0,0.05)] dark:border-white/10 dark:bg-neutral-900 dark:text-neutral-200 dark:shadow-[0px_1px_0px_0px_rgba(255,255,255,0.1)];
2991}
2992
2993/* Forms */
2994
2995label,
2996.label {
2997  @apply text-sm font-medium text-neutral-700 dark:text-neutral-100;
2998}
2999
3000.form-input[disabled] {
3001  @apply cursor-not-allowed bg-neutral-200;
3002}
3003
3004/* Custom search input clear button styling */
3005input[type=&quot;search&quot;]::-webkit-search-cancel-button {
3006  -webkit-appearance: none;
3007  appearance: none;
3008  height: 16px;
3009  width: 16px;
3010  cursor: pointer;
3011  background-image: url(&quot;data:image/svg+xml,%3Csvg xmlns=&#39;http://www.w3.org/2000/svg&#39; width=&#39;12&#39; height=&#39;12&#39;
3011 viewBox=&#39;0 0 12 12&#39;%3E%3Cg fill=&#39;%236b7280&#39;%3E%3Cpath d=&#39;m2.25,10.5c-.192,0-.384-.073-.53-.22-.293-.293-.293-.768,0-1.061L9.22,1.72c.293-.293.768-.293,1.061,0s.293.768,0,1.061l-7.5,7.5c-.146.146-.338.22-.53.22Z&#39; stroke-width=&#39;0&#39;%3E%3C/path%3E%3Cpath d=&#39;m9.75,10.5c-.192,0-.384-.073-.53-.22L1.72,2.78c-.293-.293-.293-.768,0-1.061s.768-.293,1.061,0l7.5,7.5c.293.293.293.768,0,1.061-.146.146-.338.22-.53.22Z&#39; stroke-width=&#39;0&#39;%3E%3C/path%3E%3C/g%3E%3C/svg%3E&quot;);
3012  background-size: 12px 12px;
3013  background-repeat: no-repeat;
3014  background-position: center;
3015}
3016
3017input[type=&quot;search&quot;]::-webkit-search-cancel-button:hover {
3018  background-image: url(&quot;data:image/svg+xml,%3Csvg xmlns=&#39;http://www.w3.org/2000/svg&#39; width=&#39;12&#39; height=&#39;12&#39; viewBox=&#39;0 0 12 12&#39;%3E%3Cg fill=&#39;%23374151&#39;%3E%3Cpath d=&#39;m2.25,10.5c-.192,0-.384-.073-.53-.22-.293-.293-.293-.768,0-1.061L9.22,1.72c.293-.293.768-.293,1.061,0s.293.768,0,1.061l-7.5,7.5c-.146.146-.338.22-.53.22Z&#39; stroke-width=&#39;0&#39;%3E%3C/path%3E%3Cpath d=&#39;m9.75,10.5c-.192,0-.384-.073-.53-.22L1.72,2.78c-.293-.293-.293-.768,0-1.061s.768-.293,1.061,0l7.5,7.5c.293.293.293.768,0,1.061-.146.146-.338.22-.53.22Z&#39; stroke-width=&#39;0&#39;%3E%3C/path%3E%3C/g%3E%3C/svg%3E&quot;);
3019}
3020
3021.dark input[type=&quot;search&quot;]::-webkit-search-cancel-button {
3022  background-image: url(&quot;data:image/svg+xml,%3Csvg xmlns=&#39;http://www.w3.org/2000/svg&#39; width=&#39;12&#39; height=&#39;12&#39; viewBox=&#39;0 0 12 12&#39;%3E%3Cg fill=&#39;%23d1d5db&#39;%3E%3Cpath d=&#39;m2.25,10.5c-.192,0-.384-.073-.53-.22-.293-.293-.293-.768,0-1.061L9.22,1.72c.293-.293.768-.293,1.061,0s.293.768,0,1.061l-7.5,7.5c-.146.146-.338.22-.53.22Z&#39; stroke-width=&#39;0&#39;%3E%3C/path%3E%3Cpath d=&#39;m9.75,10.5c-.192,0-.384-.073-.53-.22L1.72,2.78c-.293-.293-.293-.768,0-1.061s.768-.293,1.061,0l7.5,7.5c.293.293.293.768,0,1.061-.146.146-.338.22-.53.22Z&#39; stroke-width=&#39;0&#39;%3E%3C/path%3E%3C/g%3E%3C/svg%3E&quot;);
3023}
3024
3025.dark input[type=&quot;search&quot;]::-webkit-search-cancel-button:hover {
3026  background-image: url(&quot;data:image/svg+xml,%3Csvg xmlns=&#39;http://www.w3.org/2000/svg&#39; width=&#39;12&#39; height=&#39;12&#39; viewBox=&#39;0 0 12 12&#39;%3E%3Cg fill=&#39;%23f3f4f6&#39;%3E%3Cpath d=&#39;m2.25,10.5c-.192,0-.384-.073-.53-.22-.293-.293-.293-.768,0-1.061L9.22,1.72c.293-.293.768-.293,1.061,0s.293.768,0,1.061l-7.5,7.5c-.146.146-.338.22-.53.22Z&#39; stroke-width=&#39;0&#39;%3E%3C/path%3E%3Cpath d=&#39;m9.75,10.5c-.192,0-.384-.073-.53-.22L1.72,2.78c-.293-.293-.293-.768,0-1.061s.768-.293,1.061,0l7.5,7.5c.293.293.293.768,0,1.061-.146.146-.338.22-.53.22Z&#39; stroke-width=&#39;0&#39;%3E%3C/path%3E%3C/g%3E%3C/svg%3E&quot;);
3027}
3028
3029/* non-input elements (like the Stripe card form) can be styled to look like an input */
3030div.form-control {
3031  -webkit-appearance: none;
3032  -moz-appearance: none;
3033  appearance: none;
3034  background-color: #fff;
3035  border-width: 1px;
3036  padding-top: 0.5rem;
3037  padding-right: 0.75rem;
3038  padding-bottom: 0.5rem;
3039  padding-left: 0.75rem;
3040  font-size: 1rem;
3041  line-height: 1.5rem;
3042}
3043
3044.form-control {
3045  @apply block w-full rounded-lg bg-white border-0 px-3 py-2 text-base/6 text-neutral-900 shadow-xs ring-1 ring-neutral-300 outline-hidden ring-inset placeholder:text-neutral-500 focus:ring-2 focus:ring-neutral-600 dar
3045k:bg-neutral-700 dark:text-white dark:placeholder-neutral-300 dark:ring-neutral-600 dark:focus:ring-neutral-500;
3046}
3047
3048@media (min-width: 640px) {
3049  .form-control {
3050    font-size: 0.875rem; /* text-sm equivalent (14px) for larger screens */
3051  }
3052}
3053
3054.form-control[disabled] {
3055  @apply cursor-not-allowed bg-neutral-100 dark:bg-neutral-600;
3056}
3057
3058.form-control.error {
3059  @apply border-red-400 ring-red-300 focus:ring-red-500 dark:border-red-600 dark:ring-red-500;
3060}
3061
3062select:not([multiple]) {
3063  @apply w-full appearance-none rounded-lg border-0 bg-white px-3 py-2 text-base/6 text-neutral-900 shadow-xs ring-1 ring-neutral-300 outline-hidden ring-inset focus:ring-2 focus:ring-neutral-600;
3064
3065  /* Custom dropdown arrow */
3066  background-image: url(&quot;data:image/svg+xml,%3csvg xmlns=&#39;http://www.w3.org/2000/svg&#39; fill=&#39;none&#39; viewBox=&#39;0 0 20 20&#39;%3e%3cpath stroke=&#39;%23737373&#39; stroke-linecap=&#39;round&#39; stroke-linejoin=&#39;round&#39; stroke-width=&#39;1.5&#39; d=&#39;M6 8l4 4 4-4&#39;/%3e%3c/svg%3e&quot;);
3067  background-position: right 0.75rem center;
3068  background-repeat: no-repeat;
3069  background-size: 1.25em 1.25em;
3070  padding-right: 2.5rem;
3071}
3072
3073@media (min-width: 640px) {
3074  select:not([multiple]) {
3075    font-size: 0.875rem; /* text-sm equivalent (14px) for larger screens */
3076  }
3077}
3078
3079/* Dark mode styling for single select */
3080.dark {
3081  select:not([multiple]) {
3082    @apply dark:bg-neutral-700 dark:text-white dark:ring-neutral-600 dar
3082k:focus:ring-neutral-500;
3083    background-image: url(&quot;data:image/svg+xml,%3csvg xmlns=&#39;http://www.w3.org/2000/svg&#39; fill=&#39;none&#39; viewBox=&#39;0 0 20 20&#39;%3e%3cpath stroke=&#39;%23A1A1AA&#39; stroke-linecap=&#39;round&#39; stroke-linejoin=&#39;round&#39; stroke-width=&#39;1.5&#39; d=&#39;M6 8l4 4 4-4&#39;/%3e%3c/svg%3e&quot;);
3084  }
3085}
3086
3087select:not([multiple])[disabled] {
3088  @apply cursor-not-allowed bg-neutral-100 opacity-75 ring-neutral-200 dark:bg-neutral-600 dark:ring-neutral-500;
3089}
3090
3091select[multiple] {
3092  @apply w-full rounded-lg rounded-r-none border-0 bg-white px-3 py-2.5 text-base/6 text-neutral-900 shadow-xs outline-1 -outline-offset-1 outline-neutral-300 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-neutral-600 dark:outline-neutral-600;
3093  min-height: 120px;
3094}
3095
3096select[multiple] option {
3097  @apply rounded-md;
3098}
3099
3100@media (min-width: 640px) {
3101  select[multiple] {
3102    font-size: 0.875rem; /* text-sm equivalent (14px) for larger screens */
3103  }
3104}
3105
3106/* Dark mode styling for multiple select */
3107.dark {
3108  select[multiple] {
3109    @apply dark:bg-neutral-700 dark:text-white dark:ring-neutral-600 dar
3109k:focus:ring-neutral-500;
3110  }
3111}
3112
3113select[multiple][disabled] {
3114  @apply cursor-not-allowed bg-neutral-100 opacity-75 ring-neutral-200 dark:bg-neutral-600 dark:ring-neutral-500;
3115}
3116
3117option {
3118  @apply bg-white px-3 py-2 text-sm text-neutral-900 dark:bg-neutral-700 dark:text-neutral-100;
3119}
3120
3121option:checked {
3122  @apply bg-neutral-100 dark:bg-neutral-600;
3123}
3124
3125option:hover {
3126  @apply bg-neutral-50 dark:bg-neutral-600;
3127}
3128
3129.caret {
3130  @apply pointer-events-none absolute inset-y-0 right-0 flex items-center px-2 text-neutral-800;
3131}
3132
3133[type=&quot;checkbox&quot;] {
3134  @apply size-4 cursor-pointer appearance-none rounded-sm border border-neutral-300 bg-white accent-primary checked:border-primary checked:bg-primary focus:outline-2 focus:outline-offset-2 focus:outline-primary-content focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-content disabled:border-neutral-300 disabled:bg-neutral-100 disabled:checked:bg-neutral-100 dark:border-white/20 dark:bg-neutral-800 dark:checked:border-primary dark:checked:bg-primary dark:focus:outline-primary-content dark:focus-visible:outline-primary-content dark:disabled:border-neutral-500 dark:disabled:bg-neutral-400 dark:disabled:checked:bg-neutral-500 forced-colors:appearance-auto;
3135}
3136
3137.dark [type=&quot;checkbox&quot;]:focus {
3138  outline-color: var(--color-primary-content);
3139}
3140
3141/* Default primary flips light without overwriting a generated theme. */
3142.dark {
3143  --color-primary: var(--rb-primary, var(--color-neutral-100));
3144  --color-primary-hover: var(--rb-primary-hover, var(--color-white));
3145  --color-primary-content: var(--rb-primary-content, var(--color-white));
3146  --color-primary-foreground: var(--rb-primary-foreground, var(--color-neutral-900));
3147  --color-accent: var(--rb-primary, var(--color-neutral-100));
3148}
3149
3150[type=&quot;checkbox&quot;]:checked {
3151  border-color: var(--color-primary);
3152  background-color: var(--color-primary);
3153  background-image: url(&quot;data:image/svg+xml,%3csvg viewBox=&#39;0 0 16 16&#39; fill=&#39;white&#39; xmlns=&#39;http://www.w3.org/2000/svg&#39;%3e%3cpath d=&#39;M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z&#39;/%3e%3c/svg%3e&quot;);
3154  background-size: 100% 100%;
3155  background-position: center;
3156  background-repeat: no-repeat;
3157}
3158
3159/* Dark marks when primary-foreground is dark (amber, yellow, white primary in dark mode).
3160   Theme preview opts out with data-primary-mark=&quot;light&quot; for colored primaries. */
3161:where([data-primary-mark=&quot;dark&quot;]) [type=&quot;checkbox&quot;]:checked,
3162.dark:where(:not([data-primary-mark=&quot;light&quot;])) [type=&quot;checkbox&quot;]:checked {
3163  background-image: url(&quot;data:image/svg+xml,%3csvg viewBox=&#39;0 0 16 16&#39; fill=&#39;%23171717&#39; xmlns=&#39;http://www.w3.org/2000/svg&#39;%3e%3cpath d=&#39;M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z&#39;/%3e%3c/svg%3e&quot;);
3164}
3165
3166[type=&quot;checkbox&quot;]:indeterminate {
3167  border-color: var(--color-primary);
3168  background-color: var(--color-primary);
3169  background-image: url(&quot;data:image/svg+xml,%3csvg xmlns=&#39;http://www.w3.org/2000/svg&#39; width=&#39;12&#39; height=&#39;12&#39; viewBox=&#39;0 0 12 12&#39;%3e%3cg fill=&#39;none&#39; stroke=&#39;%23fff&#39; stroke-linecap=&#39;round&#39; stroke-linejoin=&#39;round&#39; stroke-width=&#39;1.5&#39; %3e%3cline x1=&#39;10.75&#39; y1=&#39;6&#39; x2=&#39;1.25&#39; y2=&#39;6&#39;%3e%3c/line%3e%3c/g%3e%3c/svg%3e&quot;);
3170  background-size: 75% 75%;
3171  background-position: center;
3172  background-repeat: no-repeat;
3173}
3174
3175:where([data-primary-mark=&quot;dark&quot;]) [type=&quot;checkbox&quot;]:indeterminate,
3176.dark:where(:not([data-primary-mark=&quot;light&quot;])) [type=&quot;checkbox&quot;]:indeterminate {
3177  background-image: url(&quot;data:image/svg+xml,%3csvg xmlns=&#39;http://www.w3.org/2000/svg&#39; width=&#39;12&#39; height=&#39;12&#39; viewBox=&#39;0 0 12 12&#39;%3e%3cg fill=&#39;none&#39; stroke=&#39;%23171717&#39; stroke-linecap=&#39;round&#39; stroke-linejoin=&#39;round&#39; stroke-width=&#39;1.5&#39; %3e%3cline x1=&#39;10.75&#39; y1=&#39;6&#39; x2=&#39;1.25&#39; y2=&#39;6&#39;%3e%3c/line%3e%3c/g%3e%3c/svg%3e&quot;);
3178}
3179
3180[type=&quot;checkbox&quot;]:disabled {
3181  @apply cursor-not-allowed border-neutral-300 bg-neutral-200 text-neutral-400 opacity-75 hover:text-neutral-300 dark:border-neutral-600 dar
3181k:bg-neutral-700 dark:text-neutral-300 dark:hover:text-neutral-500;
3182}
3183
3184[type=&quot;checkbox&quot;]:disabled:checked {
3185  @apply border-neutral-300 bg-neutral-200 dark:border-neutral-600 dark:bg-neutral-600;
3186}
3187
3188/* Anchor indicator for shift-click range selection */
3189[type=&quot;checkbox&quot;].checkbox-anchor {
3190  outline: 2px dashed currentColor;
3191  outline-offset: 2px;
3192  @apply outline-neutral-600 dark:outline-neutral-200;
3193}
3194
3195[type=&quot;radio&quot;] {
3196  @apply size-4 cursor-pointer appearance-none rounded-full border border-neutral-300 bg-white accent-primary checked:border-primary checked:bg-primary focus:outline-2 focus:outline-offset-2 focus:outline-primary-content focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-content disabled:border-neutral-300 disabled:bg-neutral-100 disabled:checked:bg-neutral-100 dark:border-white/20 dark:bg-neutral-800 dark:checked:border-primary dark:checked:bg-primary dark:focus:outline-primary-content dark:focus-visible:outline-primary-content dark:disabled:border-neutral-500 dark:disabled:bg-neutral-400 dark:disabled:checked:bg-neutral-500 forced-colors:appearance-auto;
3197}
3198
3199.dark [type=&quot;radio&quot;]:focus {
3200  outline-color: var(--color-primary-content);
3201}
3202
3203[type=&quot;radio&quot;]:checked {
3204  border-color: var(--color-primary);
3205  background-color: var(--color-primary);
3206  background-image: url(&quot;data:image/svg+xml,%3csvg viewBox=&#39;0 0 16 16&#39; fill=&#39;white&#39; xmlns=&#39;http://www.w3.org/2000/svg&#39;%3e%3ccircle cx=&#39;8&#39; cy=&#39;8&#39; r=&#39;3&#39;/%3e%3c/svg%3e&quot;);
3207  background-size: 100% 100%;
3208  background-position: center;
3209  background-repeat: no-repeat;
3210}
3211
3212:where([data-primary-mark=&quot;dark&quot;]) [type=&quot;radio&quot;]:checked,
3213.dark:where(:not([data-primary-mark=&quot;light&quot;])) [type=&quot;radio&quot;]:checked {
3214  background-image: url(&quot;data:image/svg+xml,%3csvg viewBox=&#39;0 0 16 16&#39; fill=&#39;%23171717&#39; xmlns=&#39;http://www.w3.org/2000/svg&#39;%3e%3ccircle cx=&#39;8&#39; cy=&#39;8&#39; r=&#39;3&#39;/%3e%3c/svg%3e&quot;);
3215}
3216
3217[type=&quot;radio&quot;]:disabled {
3218  @apply cursor-not-allowed border-neutral-300 bg-neutral-300 text-neutral-400 opacity-75 hover:text-neutral-300 dark:border-neutral-600 dar
3218k:bg-neutral-700 dark:text-neutral-300 dark:hover:text-neutral-500;
3219}
3220
3221[type=&quot;radio&quot;]:disabled:checked {
3222  @apply border-neutral-300 dark:border-neutral-600 dark:bg-neutral-600;
3223}
3224
3225/* Datalist styling */
3226input[list] {
3227  -webkit-appearance: none;
3228  -moz-appearance: none;
3229  appearance: none;
3230}
3231
3232/* Replace default datalist arrow in WebKit browsers */
3233input[list].replace-default-datalist-arrow::-webkit-calendar-picker-indicator {
3234  display: none !important;
3235  -webkit-appearance: none !important;
3236}
3237
3238input[list].replace-default-datalist-arrow {
3239  padding-right: 2.5rem;
3240  background-image: url(&quot;data:image/svg+xml,%3csvg xmlns=&#39;http://www.w3.org/2000/svg&#39; fill=&#39;none&#39; viewBox=&#39;0 0 20 20&#39;%3e%3cpath stroke=&#39;%23737373&#39; stroke-linecap=&#39;round&#39; stroke-linejoin=&#39;round&#39; stroke-width=&#39;1.5&#39; d=&#39;M6 8l4 4 4-4&#39;/%3e%3c/svg%3e&quot;);
3241  background-position: right 0.75rem center;
3242  background-repeat: no-repeat;
3243  background-size: 1.25em 1.25em;
3244}
3245
3246/* Dark mode datalist arrow */
3247.dark {
3248  input[list].replace-default-datalist-arrow {
3249    background-image: url(&quot;data:image/svg+xml,%3csvg xmlns=&#39;http://www.w3.org/2000/svg&#39; fill=&#39;none&#39; viewBox=&#39;0 0 20 20&#39;%3e%3cpath stroke=&#39;%23A1A1AA&#39; stroke-linecap=&#39;round&#39; stroke-linejoin=&#39;round&#39; stroke-width=&#39;1.5&#39; d=&#39;M6 8l4 4 4-4&#39;/%3e%3c/svg%3e&quot;);
3250  }
3251}
3252
3253/* Tom Select */
3254
3255select[multiple][data-controller=&quot;select&quot;] {
3256  @apply invisible;
3257}
3258
3259.dropdown-input {
3260  @apply !border-neutral-300 !bg-white text-base !px-3 !py-2.5 placeholder:!text-neutral-500 dark:!border-neutral-600 dar
3260k:!bg-neutral-700 dark:!placeholder-neutral-300;
3261}
3262
3263@media (min-width: 640px) {
3264  .plugin-dropdown_input .dropdown-input {
3265    font-size: 0.875rem; /* text-sm equivalent (14px) for larger screens */
3266  }
3267}
3268
3269.plugin-dropdown_input.focus.dropdown-active .ts-control {
3270  @apply !border-none;
3271}
3272
3273.ts-dropdown-content {
3274  @apply py-1.5 space-y-0.5;
3275  max-height: 240px;
3276  scroll-behavior: auto;
3277}
3278
3279.ts-dropdown-content {
3280  scrollbar-width: thin;
3281  scrollbar-color: #a2a2a270 #7878780b;
3282}
3283
3284.ts-dropdown-content::-webkit-scrollbar {
3285  width: 6px;
3286}
3287
3288.ts-dropdown-content::-webkit-scrollbar-track {
3289  background: #78787879;
3290}
3291
3292.ts-dropdown-content::-webkit-scrollbar-thumb {
3293  background-color: #a2a2a270;
3294  border-radius: 3px;
3295}
3296
3297.ts-control {
3298  @apply flex min-h-10 w-full px-3 py-2 cursor-default rounded-lg border-0 text-base/6 text-neutral-900 shadow-xs ring-1 placeholder:text-neutral-500 ring-neutral-300 outline-hidden ring-inset focus:ring-neutral-600 dark:bg-neutral-700 dark:text-white dark:placeholder-neutral-300 dark:ring-neutral-600 dar
3298k:focus:ring-neutral-500;
3299
3300  &amp;[disabled] {
3301    @apply cursor-not-allowed bg-neutral-100 dark:bg-neutral-600;
3302  }
3303
3304  &amp;.error {
3305    @apply border-red-400 outline-red-300 focus:outline-red-500 dark:border-red-600 dark:outline-red-500;
3306  }
3307}
3308
3309.plugin-dropdown_input .dropdown-input {
3310  @apply outline-hidden;
3311}
3312
3313/* Ensure items-placeholder is visible when no items are selected */
3314.plugin-dropdown_input .items-placeholder {
3315  display: block !important;
3316}
3317
3318/* Only hide items-placeholder when items are actually selected */
3319.plugin-dropdown_input.has-items .items-placeholder {
3320  display: none !important;
3321}
3322
3323/* Override the dropdown-active rule to keep placeholder visible when no items selected */
3324.plugin-dropdown_input.dropdown-active:not(.has-items) .items-placeholder {
3325  display: block !important;
3326}
3327
3328.ts-dropdown .active.create {
3329  @apply cursor-pointer bg-neutral-100 text-neutral-900 dark:bg-neutral-700 dark:text-white;
3330}
3331
3332.loading-more-results {
3333  @apply !cursor-default;
3334}
3335
3336.disabled .ts-control {
3337  cursor: not-allowed !important;
3338}
3339
3340@media (min-width: 640px) {
3341  .ts-control {
3342    font-size: 0.875rem; /* text-sm equivalent (14px) for larger screens */
3343  }
3344}
3345
3346.full .ts-control {
3347  @apply dark:bg-neutral-700;
3348}
3349
3350.ts-wrapper.single .ts-control,
3351.ts-wrapper.single .ts-control input,
3352.ts-control,
3353.ts-wrapper.single.input-active .ts-control {
3354  @apply cursor-text;
3355}
3356
3357.ts-dropdown [data-selectable] .highlight {
3358  @apply bg-orange-500/20 dark:bg-yellow-500/20;
3359}
3360
3361.ts-control,
3362.ts-wrapper.single.input-active .ts-control {
3363  @apply bg-white dark:bg-neutral-700;
3364}
3365
3366.input-active {
3367  @apply shadow rounded-lg ring-2 ring-inset ring-neutral-600 dar
3367k:ring-neutral-500;
3368}
3369
3370.ts-wrapper {
3371  @apply bg-white dark:bg-neutral-700 rounded-lg;
3372}
3373
3374.ts-control,
3375.ts-wrapper.single.input-active .ts-control {
3376  @apply bg-transparent dark:bg-transparent;
3377}
3378
3379.ts-control input {
3380  @apply !m-0 bg-white text-base placeholder:text-neutral-500 read-only:!cursor-pointer dark:bg-neutral-800 dark:text-white dark:placeholder-neutral-300;
3381}
3382
3383@media (min-width: 640px) {
3384  .ts-control input {
3385    font-size: 0.875rem; /* text-sm equivalent (14px) for larger screens */
3386  }
3387}
3388
3389.ts-wrapper:not(trix-toolbar .trix-input--dialog):not(.form-select).single .ts-control {
3390  @apply !pr-8;
3391}
3392
3393.ts-wrapper.plugin-remove_button .item {
3394  @apply rounded-md;
3395}
3396
3397.ts-wrapper.plugin-remove_button .item .remove {
3398  @apply rounded-r-lg border-none py-1 text-lg leading-none;
3399}
3400
3401.ts-wrapper.plugin-remove_button .item .remove::before {
3402  content: &quot;&quot;;
3403  background-image: url(&quot;data:image/svg+xml,%3Csvg xmlns=&#39;http://www.w3.org/2000/svg&#39; width=&#39;12&#39; height=&#39;12&#39; viewBox=&#39;0 0 12 12&#39;%3E%3Ctitle%3Exmark%3C/title%3E%3Cg fill=&#39;%23737373&#39;%3E%3Cpath d=&#39;m2.25,10.5c-.192,0-.384-.073-.53-.22-.293-.293-.293-.768,0-1.061L9.22,1.72c.293-.293.768-.293,1.061,0s.293.768,0,1.061l-7.5,7.5c-.146.146-.338.22-.53.22Z&#39; stroke-width=&#39;0&#39;%3E%3C/path%3E%3Cpath d=&#39;m9.75,10.5c-.192,0-.384-.073-.53-.22L1.72,2.78c-.293-.293-.293-.768,0-1.061s.768-.293,1.061,0l7.5,7.5c.293.293.293.768,0,1.061-.146.146-.338.22-.53.22Z&#39; stroke-width=&#39;0&#39;%3E%3C/path%3E%3C/g%3E%3C/svg%3E&quot;);
3404  @apply block size-4 bg-center bg-no-repeat;
3405}
3406
3407/* Red remove button for flagged items */
3408.ts-wrapper.plugin-remove_button .item[data-flag=&quot;true&quot;] .remove::before {
3409  background-image: url(&quot;data:image/svg+xml,%3Csvg xmlns=&#39;http://www.w3.org/2000/svg&#39; width=&#39;12&#39; height=&#39;12&#39; viewBox=&#39;0 0 12 12&#39;%3E%3Ctitle%3Exmark%3C/title%3E%3Cg fill=&#39;%23991B1B&#39;%3E%3Cpath d=&#39;m2.25,10.5c-.192,0-.384-.073-.53-.22-.293-.293-.293-.768,0-1.061L9.22,1.72c.293-.293.768-.293,1.061,0s.293.768,0,1.061l-7.5,7.5c-.146.146-.338.22-.53.22Z&#39; stroke-width=&#39;0&#39;%3E%3C/path%3E%3Cpath d=&#39;m9.75,10.5c-.192,0-.384-.073-.53-.22L1.72,2.78c-.293-.293-.293-.768,0-1.061s.768-.293,1.061,0l7.5,7.5c.293.293.293.768,0,1.061-.146.146-.338.22-.53.22Z&#39; stroke-width=&#39;0&#39;%3E%3C/path%3E%3C/g%3E%3C/svg%3E&quot;);
3410}
3411
3412.dark .ts-wrapper.plugin-remove_button .item[data-flag=&quot;true&quot;] .remove::before {
3413  background-image: url(&quot;data:image/svg+xml,%3Csvg xmlns=&#39;http://www.w3.org/2000/svg&#39; width=&#39;12&#39; height=&#39;12&#39; viewBox=&#39;0 0 12 12&#39;%3E%3Ctitle%3Exmark%3C/title%3E%3Cg fill=&#39;%23FCA5A5&#39;%3E%3Cpath d=&#39;m2.25,10.5c-.192,0-.384-.073-.53-.22-.293-.293-.293-.768,0-1.061L9.22,1.72c.293-.293.768-.293,1.061,0s.293.768,0,1.061l-7.5,7.5c-.146.146-.338.22-.53.22Z&#39; stroke-width=&#39;0&#39;%3E%3C/path%3E%3Cpath d=&#39;m9.75,10.5c-.192,0-.384-.073-.53-.22L1.72,2.78c-.293-.293-.293-.768,0-1.061s.768-.293,1.061,0l7.5,7.5c.293.293.293.768,0,1.061-.146.146-.338.22-.53.22Z&#39; stroke-width=&#39;0&#39;%3E%3C/path%3E%3C/g%3E%3C/svg%3E&quot;);
3414}
3415
3416/* Add separate dark mode version */
3417.dark {
3418  .ts-wrapper.plugin-remove_button .item .remove::before {
3419    background-image: url(&quot;data:image/svg+xml,%3Csvg xmlns=&#39;http://www.w3.org/2000/svg&#39; width=&#39;12&#39; height=&#39;12&#39; viewBox=&#39;0 0 12 12&#39;%3E%3Ctitle%3Exmark%3C/title%3E%3Cg fill=&#39;%23A1A1A1&#39;%3E%3Cpath d=&#39;m2.25,10.5c-.192,0-.384-.073-.53-.22-.293-.293-.293-.768,0-1.061L9.22,1.72c.293-.293.768-.293,1.061,0s.293.768,0,1.061l-7.5,7.5c-.146.146-.338.22-.53.22Z&#39; stroke-width=&#39;0&#39;%3E%3C/path%3E%3Cpath d=&#39;m9.75,10.5c-.192,0-.384-.073-.53-.22L1.72,2.78c-.293-.293-.293-.768,0-1.061s.768-.293,1.061,0l7.5,7.5c.293.293.293.768,0,1.061-.146.146-.338.22-.53.22Z&#39; stroke-width=&#39;0&#39;%3E%3C/path%3E%3C/g%3E%3C/svg%3E&quot;);
3420  }
3421}
3422
3423.ts-wrapper.plugin-remove_button .item .remove {
3424  font-size: 0 !important;
3425  @apply my-0.5 mr-1 !ml-0.5 flex size-[18px] items-center justify-center rounded !border-0 !p-1 !leading-none text-neutral-500 dark:text-neutral-400 dark:hover:bg-neutral-700;
3426}
3427
3428/* Red remove button styling for flagged items inside input */
3429.ts-wrapper.plugin-remove_button .item[data-flag=&quot;true&quot;] .remove {
3430  @apply text-red-700 hover:bg-red-200 hover:text-red-900 dark:text-[#FCA5A5] dark:hover:bg-red-100/10 dark:hover:text-red-200;
3431}
3432
3433/* Flag toggle button styling */
3434.ts-wrapper.plugin-remove_button .item .flag-toggle {
3435  @apply text-neutral-400 dark:text-neutral-400;
3436}
3437
3438.ts-wrapper.plugin-remove_button .item[data-flag=&quot;true&quot;] .flag-toggle {
3439  @apply flex size-[18px] items-center justify-center rounded hover:bg-red-200 dark:hover:bg-red-100/10 text-red-800 dark:text-[#FCA5A5];
3440}
3441
3442.ts-dropdown {
3443  @apply z-40 m-0 overflow-hidden rounded-lg border border-t border-solid border-neutral-300 shadow-xs dark:border-neutral-600 dar
3443k:bg-neutral-800 dark:text-white;
3444}
3445
3446.ts-dropdown .create {
3447  @apply mx-1.5 cursor-default rounded-md px-2.5 py-2 text-sm dark:text-neutral-400;
3448}
3449
3450.ts-dropdown [data-selectable].option,
3451.ts-dropdown .no-results {
3452  @apply mx-1.5 cursor-default rounded-md px-2.5 py-2 text-sm;
3453}
3454
3455.ts-dropdown .option,
3456.ts-dropdown [data-disabled],
3457.ts-dropdown [data-disabled] [data-selectable].option {
3458  @apply mx-1.5 cursor-not-allowed rounded-md px-2.5 py-2 text-sm;
3459}
3460
3461.ts-dropdown [data-selectable].option,
3462.ts-dropdown .ts-dropdown .create {
3463  @apply cursor-pointer;
3464}
3465
3466/* Focused/hover state - lighter background */
3467.ts-dropdown .active {
3468  @apply bg-neutral-100 text-neutral-900 dark:bg-neutral-600/50 dark:text-white;
3469}
3470
3471/* Selected state - darker/more prominent */
3472.ts-dropdown .selected {
3473  @apply bg-neutral-200 text-black dark:bg-neutral-500/50 dark:text-white;
3474}
3475
3476/* When an option is both selected AND focused, prioritize the selected styling but add a subtle ring */
3477.ts-dropdown .selected.active {
3478  @apply bg-neutral-200 text-black dark:bg-neutral-500/50 dark:text-white;
3479}
3480
3481.ts-dropdown .spinner {
3482  @apply h-auto w-auto;
3483}
3484
3485.ts-dropdown .spinner:after {
3486  @apply mt-1 mb-0 inline-block size-4 border-2 p-0;
3487}
3488
3489.ts-wrapper:not(.form-control):not(.form-select).single .ts-control {
3490  background-image: url(&quot;data:image/svg+xml,%3csvg xmlns=&#39;http://www.w3.org/2000/svg&#39; fill=&#39;none&#39; viewBox=&#39;0 0 20 20&#39;%3e%3cpath stroke=&#39;%23737373&#39; stroke-linecap=&#39;round&#39; stroke-linejoin=&#39;round&#39; stroke-width=&#39;1.5&#39; d=&#39;M6 8l4 4 4-4&#39;/%3e%3c/svg%3e&quot;);
3491  background-position: right 0.5rem center;
3492  background-repeat: no-repeat;
3493  background-size: 1.5em 1.5em;
3494  print-color-adjust: exact;
3495}
3496
3497/* Dark mode arrow for single select */
3498.dark {
3499  .ts-wrapper:not(.form-control):not(.form-select).single .ts-control {
3500    background-image: url(&quot;data:image/svg+xml,%3csvg xmlns=&#39;http://www.w3.org/2000/svg&#39; fill=&#39;none&#39; viewBox=&#39;0 0 20 20&#39;%3e%3cpath stroke=&#39;%23A1A1AA&#39; stroke-linecap=&#39;round&#39; stroke-linejoin=&#39;round&#39; stroke-width=&#39;1.5&#39; d=&#39;M6 8l4 4 4-4&#39;/%3e%3c/svg%3e&quot;);
3501  }
3502}
3503
3504/* Add dropdown arrow to multiselect elements */
3505.ts-wrapper:not(.form-control):not(.form-select).multi .ts-control {
3506  background-image: url(&quot;data:image/svg+xml,%3csvg xmlns=&#39;http://www.w3.org/2000/svg&#39; fill=&#39;none&#39; viewBox=&#39;0 0 20 20&#39;%3e%3cpath stroke=&#39;%23737373&#39; stroke-linecap=&#39;round&#39; stroke-linejoin=&#39;round&#39; stroke-width=&#39;1.5&#39; d=&#39;M6 6l4-4 4 4M6 14l4 4 4-4&#39;/%3e%3c/svg%3e&quot;);
3507  background-position: right 0.6rem center;
3508  background-repeat: no-repeat;
3509  background-size: 1.25em 1.25em;
3510  print-color-adjust: exact;
3511  padding-right: 2rem !important;
3512}
3513
3514/* Dark mode arrow for multiselect */
3515.dark {
3516  .ts-wrapper:not(.form-control):not(.form-select).multi .ts-control {
3517    background-image: url(&quot;data:image/svg+xml,%3csvg xmlns=&#39;http://www.w3.org/2000/svg&#39; fill=&#39;none&#39; viewBox=&#39;0 0 20 20&#39;%3e%3cpath stroke=&#39;%23A1A1AA&#39; stroke-linecap=&#39;round&#39; stroke-linejoin=&#39;round&#39; stroke-width=&#39;1.5&#39; d=&#39;M6 6l4-4 4 4M6 14l4 4 4-4&#39;/%3e%3c/svg%3e&quot;);
3518  }
3519}
3520.ts-wrapper.multi .ts-control &gt; div {
3521  @apply mr-1 inline-flex items-center justify-center rounded-md bg-neutral-100 px-2 text-xs leading-none font-medium text-neutral-900 dark:bg-neutral-900 dark:text-neutral-100;
3522}
3523
3524/* Ensure items don&#39;t overlap with the dropdown arrow */
3525.ts-wrapper.multi.has-items .ts-control {
3526  @apply !pt-[7px] !pr-8 !pb-[4px];
3527}
3528
3529.ts-wrapper.plugin-remove_button:not(.rtl) .item {
3530  @apply cursor-default;
3531}
3532
3533.ts-wrapper.plugin-remove_button:not(.rtl) .item .remove {
3534  @apply !-ml-0.5 cursor-pointer border-none;
3535}
3536
3537.ts-wrapper.plugin-remove_button .item .remove {
3538  @apply my-0.5 mr-1 !ml-0.5 flex size-[18px] items-center justify-center rounded border-0 text-lg leading-none text-neutral-900/60 hover:text-neutral-900 dark:text-neutral-100/60 dark:hover:bg-neutral-700 dark:hover:text-neutral-100;
3539}
3540
3541.ts-dropdown .optgroup-header {
3542  @apply border-t border-neutral-300 bg-white font-semibold text-neutral-900 dark:border-neutral-600 dar
3542k:bg-neutral-800 dark:text-neutral-100;
3543}
3544
3545.ts-dropdown.plugin-optgroup_columns .optgroup {
3546  height: fit-content;
3547  @apply !mt-0;
3548}
3549
3550.optgroup {
3551  @apply mt-1.5 first:mt-0;
3552}
3553
3554.dark .ts-dropdown.plugin-optgroup_columns .optgroup {
3555  border-right: 1px solid #525252;
3556}
3557
3558.ts-wrapper.multi.has-items .ts-control &gt; input {
3559  @apply !mb-[3px];
3560}
3561
3562.tomselect-checkbox {
3563  @apply !mr-0;
3564}
3565
3566.input-hidden.focus {
3567  @apply !rounded-lg border  border-neutral-300 dark:border-neutral-600;
3568}
3569
3570/* Replace the previous attempt with this updated selector */
3571select[data-select-disable-typing-value=&quot;true&quot;] + .ts-wrapper .ts-control,
3572select[data-select-disable-typing-value=&quot;true&quot;] + .ts-wrapper.single .ts-control,
3573select[data-select-disable-typing-value=&quot;true&quot;] + .ts-wrapper.single .ts-control input,
3574select[data-select-disable-typing-value=&quot;true&quot;] + .ts-wrapper.single.input-active .ts-control {
3575  @apply cursor-default;
3576}
3577
3578.ts-dropdown-content.is-loading-more .option {
3579  pointer-events: none !important;
3580}
3581
3582/* Count display for multi-select */
3583.ts-count-display {
3584  @apply mr-auto !my-0.5 !bg-transparent !px-0 !text-sm !font-normal pointer-events-none;
3585  display: none;
3586}
3587
3588/* Hide count display when not active (explicit rule) */
3589.ts-control:not(.count-active) .ts-count-display {
3590  display: none !important;
3591}
3592
3593/* Hide items and input when count is active */
3594.ts-control.count-active .item {
3595  display: none !important;
3596  visibility: hidden !important;
3597  width: 0 !important;
3598  height: 0 !important;
3599  margin: 0 !important;
3600  padding: 0 !important;
3601}
3602
3603/* Keep input technically visible for keyboard navigation but make it invisible */
3604.ts-control.count-active input {
3605  position: absolute !important;
3606  opacity: 0 !important;
3607  width: 0 !important;
3608  height: 0 !important;
3609  padding: 0 !important;
3610  margin: 0 !important;
3611}
3612
3613/* Ensure proper spacing when count is displayed */
3614.ts-wrapper.multi.has-items .ts-control:has(.ts-count-display) {
3615  @apply !py-[5px];
3616}
3617
3618/* External tags styles - hide tags inside control */
3619.ts-control.external-tags-active .item {
3620  display: none !important;
3621  visibility: hidden !important;
3622  width: 0 !important;
3623  height: 0 !important;
3624  margin: 0 !important;
3625  padding: 0 !important;
3626}
3627
3628/* Reset padding when external tags are active */
3629.ts-wrapper.multi.has-items .ts-control.external-tags-active {
3630  @apply !py-2;
3631}
3632
3633/* Keep placeholder visible when external tags are active */
3634.plugin-dropdown_input.has-items .ts-control.external-tags-active .items-placeholder {
3635  display: block !important;
3636}
3637
3638/* Reset input margins when external tags are active */
3639.ts-wrapper.multi.has-items .ts-control.external-tags-active &gt; input {
3640  margin: 0 !important;
3641}
3642
3643/* Emoji picker */
3644
3645em-emoji-picker {
3646  --color-border-over: rgba(0, 0, 0, 0.1);
3647  --color-border: rgba(0, 0, 0, 0.05);
3648  --font-family: &quot;Inter&quot;, sans-serif;
3649  --rgb-accent: 155, 155, 155;
3650
3651  position: absolute;
3652  z-index: 1000;
3653  max-width: 400px;
3654  min-width: 318px;
3655  resize: horizontal;
3656  overflow: auto;
3657}
3658
3659@media (max-width: 768px) {
3660  em-emoji-picker {
3661    max-width: 80vw;
3662  }
3663}
3664
3665.dark {
3666  em-emoji-picker {
3667    border: 1px solid #353535;
3668    --color-border: rgba(255, 255, 255, 0.1);
3669    --color-border-over: rgba(255, 255, 255, 0.2);
3670  }
3671}
3672
3673/* Shoelace Neutral styles */
3674:root {
3675  --sl-color-primary-50: var(--sl-color-neutral-50) !important;
3676  --sl-color-primary-100: var(--sl-color-neutral-100) !important;
3677  --sl-color-primary-200: var(--sl-color-neutral-200) !important;
3678  --sl-color-primary-300: var(--sl-color-neutral-300) !important;
3679  --sl-color-primary-400: var(--sl-color-neutral-400) !important;
3680  --sl-color-primary-500: var(--sl-color-neutral-500) !important;
3681  --sl-color-primary-600: var(--sl-color-neutral-600) !important;
3682  --sl-color-primary-700: var(--sl-color-neutral-700) !important;
3683  --sl-color-primary-800: var(--sl-color-neutral-800) !important;
3684  --sl-color-primary-900: var(--sl-color-neutral-900) !important;
3685  --sl-color-primary-950: var(--sl-color-neutral-950) !important;
3686
3687  --sl-input-focus-ring-color: hsla(0, 0%, 81%, 0.4) !important;
3688
3689  --sl-border-radius-medium: 0.5rem !important;
3690  --sl-border-radius-large: 0.75rem !important;
3691}
3692
3693/* air-datepicker */
3694
3695.air-datepicker {
3696  --adp-font-family: -apple-system, BlinkMacSystemFont, &quot;Segoe UI&quot;, Roboto, Helvetica, Arial, sans-serif,
3697    &quot;Apple Color Emoji&quot;, &quot;Segoe UI Emoji&quot;, &quot;Segoe UI Symbol&quot;;
3698  --adp-font-size: 14px;
3699  --adp-width: 246px;
3700  --adp-z-index: 40;
3701  --adp-padding: 4px;
3702  --adp-grid-areas: &quot;nav&quot; &quot;body&quot; &quot;timepicker&quot; &quot;buttons&quot;;
3703  --adp-transition-duration: 0.3s;
3704  --adp-transition-ease: ease-out;
3705  --adp-transition-offset: 8px;
3706  --adp-background-color: #fff;
3707  --adp-background-color-hover: #f0f0f0;
3708  --adp-background-color-active: #eaeaea;
3709  --adp-background-color-in-range: rgba(16, 16, 16, 0.1);
3710  --adp-background-color-in-range-focused: rgba(236, 236, 236, 0.2);
3711  --adp-background-color-selected-other-month-focused: #f1f1f1;
3712  --adp-background-color-selected-other-month: #e6e6e6;
3713  --adp-color: #4a4a4a;
3714  --adp-color-secondary: #9c9c9c;
3715  --adp-accent-color: #0a0a0a;
3716  --adp-color-current-date: var(--adp-accent-color);
3717  --adp-color-other-month: #dedede;
3718  --adp-color-disabled: #aeaeae;
3719  --adp-color-disabled-in-range: #939393;
3720  --adp-color-other-month-hover: #c5c5c5;
3721  --adp-border-color: rgba(0, 0, 0, 0.1);
3722  --adp-border-color-inner: #efefef;
3723  --adp-border-radius: 8px;
3724  --adp-border-color-inline: #d7d7d7;
3725  --adp-nav-height: 32px;
3726  --adp-nav-arrow-color: var(--adp-color-secondary);
3727  --adp-nav-action-size: 32px;
3728  --adp-nav-color-secondary: var(--adp-color-secondary);
3729  --adp-day-name-color: #464646;
3730  --adp-day-name-color-hover: #f1f1f1;
3731  --adp-day-cell-width: 1fr;
3732  --adp-day-cell-height: 32px;
3733  --adp-month-cell-height: 42px;
3734  --adp-year-cell-height: 56px;
3735  --adp-pointer-size: 10px;
3736  --adp-poiner-border-radius: 2px;
3737  --adp-pointer-offset: 14px;
3738  --adp-cell-border-radius: 4px;
3739  --adp-cell-background-color-hover: var(--adp-background-color-hover);
3740  --adp-cell-background-color-selected: #1d1d1d;
3741  --adp-cell-background-color-selected-hover: #303030;
3742  --adp-cell-background-color-in-range: rgba(38, 38, 38, 0.1);
3743  --adp-cell-background-color-in-range-hover: rgba(44, 44, 44, 0.2);
3744  --adp-cell-border-color-in-range: var(--adp-cell-background-color-selected);
3745  --adp-btn-height: 32px;
3746  --adp-btn-color: var(--adp-accent-color);
3747  --adp-btn-color-hover: var(--adp-color);
3748  --adp-btn-border-radius: var(--adp-border-radius);
3749  --adp-btn-background-color-hover: var(--adp-background-color-hover);
3750  --adp-btn-background-color-active: var(--adp-background-color-active);
3751  --adp-time-track-height: 1px;
3752  --adp-time-track-color: #dedede;
3753  --adp-time-track-color-hover: #b1b1b1;
3754  --adp-time-thumb-size: 12px;
3755  --adp-time-padding-inner: 10px;
3756  --adp-time-day-period-color: var(--adp-color-secondary);
3757  --adp-mobile-font-size: 16px;
3758  --adp-mobile-nav-height: 40px;
3759  --adp-mobile-width: 320px;
3760  --adp-mobile-day-cell-height: 38px;
3761  --adp-mobile-month-cell-height: 48px;
3762  --adp-mobile-year-cell-height: 64px;
3763}
3764.air-datepicker-overlay {
3765  --adp-overlay-background-color: rgba(0, 0, 0, 0.3);
3766  --adp-overlay-transition-duration: 0.3s;
3767  --adp-overlay-transition-ease: ease-out;
3768  --adp-overlay-z-index: 99;
3769}
3770
3771.air-datepicker-cell.-selected-.-day- {
3772  color: #ffffff; /* Ensure selected cell text is also light in dark mode */
3773  background: var(--adp-cell-background-color-selected);
3774}
3775
3776.air-datepicker-cell.-selected-.-year- {
3777  color: #ffffff; /* Ensure selected cell text is also light in dark mode */
3778  background: var(--adp-cell-background-color-selected);
3779}
3780
3781.air-datepicker-cell.-selected-.-month- {
3782  color: #ffffff; /* Ensure selected cell text is also light in dark mode */
3783  background: var(--adp-cell-background-color-selected);
3784}
3785
3786.air-datepicker-cell.-selected- {
3787  color: #ffffff; /* Ensure selected cell text is also light in dark mode */
3788  background: var(--adp-cell-background-color-selected);
3789}
3790
3791.air-datepicker-cell.-selected-.-current- {
3792  color: #ffffff; /* Ensure selected cell text is also light in dark mode */
3793  background: var(--adp-cell-background-color-selected);
3794}
3795
3796.air-datepicker-cell.-current- {
3797  border: 1px solid #bdbdbd !important;
3798}
3799
3800.air-datepicker-cell.-selected-.-day-.-other-month- {
3801  color: #cccccc; /* Ensure selected cell text is also light in dark mode */
3802  background: #7e7e7e;
3803}
3804
3805.dark {
3806  .air-datepicker {
3807    --adp-background-color: #2d2d2d; /* Dark background */
3808    --adp-background-color-hover: #3a3a3a;
3809    --adp-background-color-active: #4a4a4a;
3810    --adp-background-color-in-range: rgba(196, 196, 196, 0.2);
3811    --adp-background-color-in-range-focused: rgba(196, 196, 196, 0.3);
3812    --adp-background-color-selected-other-month-focused: #333;
3813    --adp-background-color-selected-other-month: #444;
3814    --adp-color: #e0e0e0; /* Light text color */
3815    --adp-color-secondary: #a0a0a0;
3816    --adp-accent-color: #ffffff; /* A light accent color for dark mode */
3817    --adp-color-other-month: #555;
3818    --adp-color-disabled: #777;
3819    --adp-color-disabled-in-range: #888;
3820    --adp-color-other-month-hover: #666;
3821    --adp-border-color: #ffffff1a; /* Lighter border for dark mode */
3822    --adp-border-color-inner: #444;
3823    --adp-border-color-inline: #444444;
3824    --adp-nav-arrow-color: var(--adp-color-secondary);
3825    --adp-day-name-color: #c0c0c0;
3826    --adp-day-name-color-hover: #3a3a3a;
3827    --adp-cell-background-color-hover: var(--adp-background-color-hover);
3828    --adp-cell-background-color-selected: #ffffff;
3829    --adp-cell-background-color-selected-hover: #e9e9e9;
3830    --adp-cell-background-color-in-range: rgba(175, 175, 175, 0.2);
3831    --adp-cell-background-color-in-range-hover: rgba(169, 169, 169, 0.3);
3832    --adp-btn-color: var(--adp-accent-color);
3833    --adp-btn-color-hover: var(--adp-color);
3834    --adp-btn-background-color-hover: var(--adp-background-color-hover);
3835    --adp-btn-background-color-active: var(--adp-background-color-active);
3836    --adp-time-track-color: #555;
3837    --adp-time-track-color-hover: #777;
3838    --adp-time-day-period-color: var(--adp-color-secondary);
3839  }
3840
3841  .air-datepicker-overlay {
3842    --adp-overlay-background-color: rgba(255, 255, 255, 0.1); /* Lighter overlay for dark mode */
3843  }
3844
3845  .air-datepicker-cell.-selected-.-day- {
3846    color: #1d1d1d; /* Ensure selected cell text is also light in dark mode */
3847    background: var(--adp-cell-background-color-selected);
3848  }
3849
3850  .air-datepicker-cell.-selected-.-year- {
3851    color: #1d1d1d; /* Ensure selected cell text is also light in dark mode */
3852    background: var(--adp-cell-background-color-selected);
3853  }
3854
3855  .air-datepicker-cell.-selected-.-month- {
3856    color: #1d1d1d; /* Ensure selected cell text is also light in dark mode */
3857    background: var(--adp-cell-background-color-selected);
3858  }
3859
3860  .air-datepicker-cell.-selected- {
3861    color: #1d1d1d; /* Ensure selected cell text is also light in dark mode */
3862    background: var(--adp-cell-background-color-selected);
3863  }
3864
3865  .air-datepicker-cell.-selected-.-current- {
3866    color: #1d1d1d; /* Ensure selected cell text is also light in dark mode */
3867    background: var(--adp-cell-background-color-selected);
3868  }
3869
3870  .air-datepicker-cell.-current- {
3871    border: 1px solid #505050 !important;
3872  }
3873
3874  .air-datepicker-cell.-selected-.-day-.-other-month- {
3875    color: #cccccc; /* Ensure selected cell text is also light in dark mode */
3876    background: #7e7e7e;
3877  }
3878}
3879
3880.air-datepicker--navigation {
3881  width: 100%;
3882}
3883.air-datepicker--pointer {
3884  opacity: 0;
3885}
3886.air-datepicker {
3887  background: var(--adp-background-color);
3888  border: 1px solid var(--adp-border-color);
3889  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
3890  border-radius: var(--adp-border-radius);
3891  box-sizing: content-box;
3892  display: grid;
3893  grid-template-columns: 1fr;
3894  grid-template-rows: repeat(4, max-content);
3895  grid-template-areas: var(--adp-grid-areas);
3896  font-family: var(--adp-font-family), sans-serif;
3897  font-size: var(--adp-font-size);
3898  color: var(--adp-color);
3899  width: var(--adp-width);
3900  position: absolute;
3901  transition: opacity var(--adp-transition-duration) var(--adp-transition-ease),
3902    transform var(--adp-transition-duration) var(--adp-transition-ease);
3903  z-index: var(--adp-z-index);
3904}
3905
3906.air-datepicker-cell.-selected- {
3907  color: #1d1d1d;
3908  border: none;
3909  background: var(--adp-cell-background-color-selected);
3910}
3911
3912.air-datepicker-cell.-disabled- {
3913  cursor: not-allowed;
3914}
3915
3916/* Add a new rule for dark mode selected cells if needed, or adjust the general .air-datepicker-cell.-selected- inside the dark mode media query */
3917.dark {
3918  .air-datepicker-cell.-selected- {
3919    color: #e0e0e0; /* Example: light text for selected cells in dark mode */
3920    /* background: var(--adp-cell-background-color-selected); Is already set within .air-datepicker dark vars */
3921  }
3922}
3923
3924/* Time-only picker styles */
3925.air-datepicker.only-timepicker .air-datepicker--navigation {
3926  display: none;
3927}
3928
3929.air-datepicker.only-timepicker .air-datepicker--content {
3930  display: none;
3931}
3932
3933.air-datepicker.only-timepicker .air-datepicker--time {
3934  border-top: none;
3935}
3936
3937/* Scrollbar */
3938
3939.small-scrollbar {
3940  scrollbar-width: thin;
3941  scrollbar-color: #a2a2a270 #7878780b;
3942}
3943
3944.small-scrollbar::-webkit-scrollbar {
3945  width: 6px;
3946}
3947
3948.small-scrollbar::-webkit-scrollbar-track {
3949  background: #7878780b;
3950}
3951
3952.small-scrollbar::-webkit-scrollbar-thumb {
3953  background-color: #a2a2a270;
3954  border-radius: 3px;
3955}
3956
3957/* Hide scrollbar for scroll area component */
3958.scrollbar-hide {
3959  -ms-overflow-style: none; /* IE and Edge */
3960  scrollbar-width: none; /* Firefox */
3961}
3962
3963.scrollbar-hide::-webkit-scrollbar {
3964  display: none; /* Chrome, Safari and Opera */
3965}
3966
3967/* Scroll Area Fade Effects - Register custom properties for animation */
3968@property --fade-start-opacity {
3969  syntax: &#39;&lt;number&gt;&#39;;
3970  initial-value: 1;
3971  inherits: false;
3972}
3973
3974@property --fade-end-opacity {
3975  syntax: &#39;&lt;number&gt;&#39;;
3976  initial-value: 1;
3977  inherits: false;
3978}
3979
3980@property --fade-start-x-opacity {
3981  syntax: &#39;&lt;number&gt;&#39;;
3982  initial-value: 1;
3983  inherits: false;
3984}
3985
3986@property --fade-end-x-opacity {
3987  syntax: &#39;&lt;number&gt;&#39;;
3988  initial-value: 1;
3989  inherits: false;
3990}
3991
3992@property --fade-start-y-opacity {
3993  syntax: &#39;&lt;number&gt;&#39;;
3994  initial-value: 1;
3995  inherits: false;
3996}
3997
3998@property --fade-end-y-opacity {
3999  syntax: &#39;&lt;number&gt;&#39;;
4000  initial-value: 1;
4001  inherits: false;
4002}
4003
4004/* Scroll Area Fade Effects */
4005.scroll-fade-x {
4006  --fade-start-opacity: 1;
4007  --fade-end-opacity: 1;
4008  --fade-size: 25px;
4009
4010  mask-image:
4011    linear-gradient(to right,
4012      hsl(0 0% 0% / var(--fade-start-opacity)),
4013      black var(--fade-size),
4014      black calc(100% - var(--fade-size)),
4015      hsl(0 0% 0% / var(--fade-end-opacity))
4016    );
4017  -webkit-mask-image:
4018    linear-gradient(to right,
4019      hsl(0 0% 0% / var(--fade-start-opacity)),
4020      black var(--fade-size),
4021      black calc(100% - var(--fade-size)),
4022      hsl(0 0% 0% / var(--fade-end-opacity))
4023    );
4024
4025  transition: --fade-start-opacity 300ms ease-out, --fade-end-opacity 300ms ease-out;
4026}
4027
4028.scroll-fade-y {
4029  --fade-start-opacity: 1;
4030  --fade-end-opacity: 1;
4031  --fade-size: 40px;
4032
4033  mask-image:
4034    linear-gradient(to bottom,
4035      hsl(0 0% 0% / var(--fade-start-opacity)),
4036      black var(--fade-size),
4037      black calc(100% - var(--fade-size)),
4038      hsl(0 0% 0% / var(--fade-end-opacity))
4039    );
4040  -webkit-mask-image:
4041    linear-gradient(to bottom,
4042      hsl(0 0% 0% / var(--fade-start-opacity)),
4043      black var(--fade-size),
4044      black calc(100% - var(--fade-size)),
4045      hsl(0 0% 0% / var(--fade-end-opacity))
4046    );
4047
4048  transition: --fade-start-opacity 300ms ease-out, --fade-end-opacity 300ms ease-out;
4049}
4050
4051.scroll-fade-both {
4052  --fade-start-x-opacity: 1;
4053  --fade-end-x-opacity: 1;
4054  --fade-start-y-opacity: 1;
4055  --fade-end-y-opacity: 1;
4056  --fade-size: 40px;
4057  --fade-top-offset: 0px; /* Offset from top to skip header areas */
4058  --fade-left-offset: 0px; /* Offset from left to skip sticky columns */
4059
4060  mask-image:
4061    linear-gradient(to right,
4062      black var(--fade-left-offset),
4063      hsl(0 0% 0% / var(--fade-start-x-opacity)) var(--fade-left-offset),
4064      black calc(var(--fade-left-offset) + var(--fade-size)),
4065      black calc(100% - var(--fade-size)),
4066      hsl(0 0% 0% / var(--fade-end-x-opacity))
4067    ),
4068    linear-gradient(to bottom,
4069      black var(--fade-top-offset),
4070      hsl(0 0% 0% / var(--fade-start-y-opacity)) var(--fade-top-offset),
4071      black calc(var(--fade-top-offset) + var(--fade-size)),
4072      black calc(100% - var(--fade-size)),
4073      hsl(0 0% 0% / var(--fade-end-y-opacity))
4074    );
4075  -webkit-mask-image:
4076    linear-gradient(to right,
4077      black var(--fade-left-offset),
4078      hsl(0 0% 0% / var(--fade-start-x-opacity)) var(--fade-left-offset),
4079      black calc(var(--fade-left-offset) + var(--fade-size)),
4080      black calc(100% - var(--fade-size)),
4081      hsl(0 0% 0% / var(--fade-end-x-opacity))
4082    ),
4083    linear-gradient(to bottom,
4084      black var(--fade-top-offset),
4085      hsl(0 0% 0% / var(--fade-start-y-opacity)) var(--fade-top-offset),
4086      black calc(var(--fade-top-offset) + var(--fade-size)),
4087      black calc(100% - var(--fade-size)),
4088      hsl(0 0% 0% / var(--fade-end-y-opacity))
4089    );
4090  mask-composite: intersect;
4091  -webkit-mask-composite: source-in;
4092
4093  transition: --fade-start-x-opacity 300ms ease-out, --fade-end-x-opacity 300ms ease-out,
4094              --fade-start-y-opacity 300ms ease-out, --fade-end-y-opacity 300ms ease-out;
4095}
4096
4097/* Update fade opacity when scrolled - fade appears when there&#39;s overflow */
4098[data-overflow-x-start] .scroll-fade-x,
4099[data-overflow-x-start] .scroll-fade-both {
4100  --fade-start-opacity: 0;
4101  --fade-start-x-opacity: 0;
4102}
4103
4104[data-overflow-x-end] .scroll-fade-x,
4105[data-overflow-x-end] .scroll-fade-both {
4106  --fade-end-opacity: 0;
4107  --fade-end-x-opacity: 0;
4108}
4109
4110[data-overflow-y-start] .scroll-fade-y,
4111[data-overflow-y-start] .scroll-fade-both {
4112  --fade-start-opacity: 0;
4113  --fade-start-y-opacity: 0;
4114}
4115
4116[data-overflow-y-end] .scroll-fade-y,
4117[data-overflow-y-end] .scroll-fade-both {
4118  --fade-end-opacity: 0;
4119  --fade-end-y-opacity: 0;
4120}
4121
4122/* Cursor pointer for buttons */
4123
4124@layer base {
4125  button:not(:disabled),
4126  [role=&quot;button&quot;]:not(:disabled) {
4127    cursor: pointer;
4128  }
4129}
4130
4131/* Toast Notifications */
4132.toast-item {
4133  @apply absolute w-full left-0 select-none;
4134  z-index: var(--toast-z-index, 100);
4135
4136  /* Position based on data attributes */
4137  top: var(--toast-top, auto);
4138  bottom: var(--toast-bottom, auto);
4139  transform: var(--toast-transform, translateY(0));
4140  scale: var(--toast-scale, 100%);
4141  opacity: var(--toast-opacity, 1);
4142
4143  /* Separate transitions for better control - like Sonner */
4144  transition: transform 400ms ease, opacity 400ms ease, scale 400ms ease, top 400ms ease, bottom 400ms ease,
4145    height 200ms ease;
4146}
4147
4148/* Initial hidden state for enter animation */
4149.toast-item[data-mounted=&quot;false&quot;] {
4150  opacity: 0;
4151}
4152
4153.toast-item[data-mounted=&quot;false&quot;][data-position*=&quot;bottom&quot;] {
4154  transform: translateY(100%);
4155}
4156
4157.toast-item[data-mounted=&quot;false&quot;][data-position*=&quot;top&quot;] {
4158  transform: translateY(-100%);
4159}
4160
4161/* Removed state for exit animation */
4162.toast-item[data-removed=&quot;true&quot;] {
4163  opacity: 0;
4164  scale: 95%;
4165  pointer-events: none;
4166}
4167
4168/* In stacked mode, removed toasts should slide away */
4169.toast-item[data-removed=&quot;true&quot;][data-expanded=&quot;false&quot;][data-position*=&quot;bottom&quot;] {
4170  transform: translateY(calc(var(--toast-index) * 14px + 5%));
4171}
4172
4173.toast-item[data-removed=&quot;true&quot;][data-expanded=&quot;false&quot;][data-position*=&quot;top&quot;] {
4174  transform: translateY(calc(-1 * (var(--toast-index) * 14px + 5%)));
4175}
4176
4177/* Overflow toasts (removed due to limit) slide in opposite direction */
4178.toast-item[data-removed=&quot;true&quot;][data-overflow=&quot;true&quot;][data-expanded=&quot;false&quot;][data-position*=&quot;bottom&quot;] {
4179  transform: translateY(calc(-1 * (var(--toast-index) * 14px + 25%)));
4180  scale: 78%;
4181}
4182
4183.toast-item[data-removed=&quot;true&quot;][data-overflow=&quot;true&quot;][data-expanded=&quot;false&quot;][data-position*=&quot;top&quot;] {
4184  transform: translateY(calc(var(--toast-index) * 14px + 25%));
4185  scale: 78%;
4186}
4187
4188/* Pointer events based on visibility */
4189.toast-item[data-visible=&quot;false&quot;] {
4190  pointer-events: none;
4191}
4192
4193/* Expanded mode styles */
4194.toast-item[data-expanded=&quot;true&quot;] {
4195  --toast-scale: 100%;
4196  height: var(--initial-height);
4197}
4198
4199.toast-item[data-expanded=&quot;true&quot;][data-position*=&quot;bottom&quot;] {
4200  --toast-top: auto;
4201  --toast-bottom: var(--toast-offset, 0px);
4202  --toast-transform: translateY(0);
4203}
4204
4205.toast-item[data-expanded=&quot;true&quot;][data-position*=&quot;top&quot;] {
4206  --toast-top: var(--toast-offset, 0px);
4207  --toast-bottom: auto;
4208  --toast-transform: translateY(0);
4209}
4210
4211/* Stacked mode styles */
4212.toast-item[data-expanded=&quot;false&quot;][data-front=&quot;true&quot;] {
4213  --toast-scale: 100%;
4214  --toast-opacity: 1;
4215  height: var(--initial-height);
4216}
4217
4218.toast-item[data-expanded=&quot;false&quot;][data-front=&quot;true&quot;][data-position*=&quot;bottom&quot;] {
4219  --toast-top: auto;
4220  --toast-bottom: 0px;
4221  --toast-transform: translateY(0);
4222}
4223
4224.toast-item[data-expanded=&quot;false&quot;][data-front=&quot;true&quot;][data-position*=&quot;top&quot;] {
4225  --toast-top: 0px;
4226  --toast-bottom: auto;
4227  --toast-transform: translateY(0);
4228}
4229
4230/* Non-front toasts in stack - Sonner approach */
4231.toast-item[data-expanded=&quot;false&quot;]:not([data-front=&quot;true&quot;]) {
4232  height: var(--front-toast-height);
4233  overflow: hidden;
4234  --toast-scale: calc(100% - (var(--toast-index) * 6%));
4235  display: flex;
4236  flex-direction: column;
4237}
4238
4239.toast-item[data-expanded=&quot;false&quot;]:not([data-front=&quot;true&quot;])[data-position*=&quot;bottom&quot;] {
4240  --toast-top: auto;
4241  --toast-bottom: 0px;
4242  --toast-transform: translateY(calc(-1 * var(--toast-index) * 14px));
4243  justify-content: flex-start; /* Content at top, bottom gets cut */
4244}
4245
4246.toast-item[data-expanded=&quot;false&quot;]:not([data-front=&quot;true&quot;])[data-position*=&quot;top&quot;] {
4247  --toast-top: 0px;
4248  --toast-bottom: auto;
4249  --toast-transform: translateY(calc(var(--toast-index) * 14px));
4250  justify-content: flex-end; /* Content at bottom, top gets cut */
4251}
4252
4253/* Hidden toasts (beyond 3rd) */
4254.toast-item[data-expanded=&quot;false&quot;][data-visible=&quot;false&quot;] {
4255  --toast-opacity: 0;
4256  --toast-scale: 82%;
4257}
4258
4259.toast-item[data-expanded=&quot;false&quot;][data-visible=&quot;false&quot;][data-position*=&quot;bottom&quot;] {
4260  --toast-top: auto;
4261  --toast-bottom: -200px;
4262  --toast-transform: translateY(0);
4263}
4264
4265.toast-item[data-expanded=&quot;false&quot;][data-visible=&quot;false&quot;][data-position*=&quot;top&quot;] {
4266  --toast-top: -200px;
4267  --toast-bottom: auto;
4268  --toast-transform: translateY(0);
4269}
4270</code></pre>
4271  <button type="button" class="absolute top-2 right-4 flex items-center gap-1.5 rounded-lg px-3.5 py-2 text-sm font-medium shadow-xs focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-600 bg-neutral-800/50 text-neutral-50 hover:bg-neutral-700/50 dark:focus-visible:outline-neutral-200 border border-neutral-700"
4272          data-setup-code-filter-target="copyButton"
4273          data-controller="clipboard analytics"
4274          data-action="click->
4274analytics#track"
4275          data-analytics-event-name-value="installation copied custom css"
4276          data-clipboard-text='/* Semantic theme tokens. Custom themes override the --rb-* variables. */
4277@theme inline {
4278  --color-primary: var(--rb-primary, var(--color-neutral-800));
4279  --color-primary-hover: var(--rb-primary-hover, var(--color-neutral-700));
4280  --color-primary-content: var(--rb-primary-content, var(--color-neutral-800));
4281  --color-primary-foreground: var(--rb-primary-foreground, var(--color-white));
4282  --color-accent: var(--rb-primary, var(--color-neutral-800));
4283}
4284
4285:root {
4286  accent-color: var(--color-accent);
4287}
4288
4289kbd {
4290  @apply rounded-md border border-black/10 bg-white px-1 font-mono text-[11px] text-neutral-800 shadow-[0px_1.5px_0px_0px_rgba(0,0,0,0.05)] dark:border-white/10 dark:bg-neutral-900 dark:text-neutral-200 dark:shadow-[0px_1px_0px_0px_rgba(255,255,255,0.1)];
4291}
4292
4293/* Forms */
4294
4295label,
4296.label {
4297  @apply text-sm font-medium text-neutral-700 dark:text-neutral-100;
4298}
4299
4300.form-input[disabled] {
4301  @apply cursor-not-allowed bg-neutral-200;
4302}
4303
4304/* Custom search input clear button styling */
4305input[type=&quot;search&quot;]::-webkit-search-cancel-button {
4306  -webkit-appearance: none;
4307  appearance: none;
4308  height: 16px;
4309  width: 16px;
4310  cursor: pointer;
4311  background-image: url(&quot;data:image/svg+xml,%3Csvg xmlns=&#39;http://www.w3.org/2000/svg&#39; width=&#39;12&#39; height=&#39;12&#39; viewBox=&#39;0 0 12 12&#39;%3E%3Cg fill=&#39;%236b7280&#39;%3E%3Cpath d=&#39;m2.25,10.5c-.192,0-.384-.073-.53-.22-.293-.293-.293-.768,0-1.061L9.22,1.72c.293-.293.768-.293,1.061,0s.293.768,0,1.061l-7.5,7.5c-.146.146-.338.22-.53.22Z&#39; stroke-width=&#39;0&#39;%3E%3C/path%3E%3Cpath d=&#39;m9.75,10.5c-.192,0-.384-.073-.53-.22L1.72,2.78c-.293-.293-.293-.768,0-1.061s.768-.293,1.061,0l7.5,7.5c.293.293.293.768,0,1.061-.146.146-.338.22-.53.22Z&#39; stroke-width=&#39;0&#39;%3E%3C/path%3E%3C/g%3E%3C/svg%3E&quot;);
4312  background-size: 12px 12px;
4313  background-repeat: no-repeat;
4314  background-position: center;
4315}
4316
4317input[type=&quot;search&quot;]::-webkit-search-cancel-button:hover {
4318  background-image: url(&quot;data:image/svg+xml,%3Csvg xmlns=&#39;http://www.w3.org/2000/svg&#39; width=&#39;12&#39; height=&#39;12&#39; viewBox=&#39;0 0 12 12&#39;%3E%3Cg fill=&#39;%23374151&#39;%3E%3Cpath d=&#39;m2.25,10.5c-.192,0-.384-.073-.53-.22-.293-.293-.293-.768,0-1.061L9.22,1.72c.293-.293.768-.293,1.061,0s.293.768,0,1.061l-7.5,7.5c-.146.146-.338.22-.53.22Z&#39; stroke-width=&#39;0&#39;%3E%3C/path%3E%3Cpath d=&#39;m9.75,10.5c-.192,0-.384-.073-.53-.22L1.72,2.78c-.293-.293-.293-.768,0-1.061s.768-.293,1.061,0l7.5,7.5c.293.293.293.768,0,1.061-.146.146-.338.22-.53.22Z&#39; stroke-width=&#39;0&#39;%3E%3C/path%3E%3C/g%3E%3C/svg%3E&quot;);
4319}
4320
4321.dark input[type=&quot;search&quot;]::-webkit-search-cancel-button {
4322  background-image: url(&quot;data:image/svg+xml,%3Csvg xmlns=&#39;http://www.w3.org/2000/svg&#39; width=&#39;12&#39; height=&#39;12&#39; viewBox=&#39;0 0 12 12&#39;%3E%3Cg fill=&#39;%23d1d5db&#39;%3E%3Cpath d=&#39;m2.25,10.5c-.192,0-.384-.073-.53-.22-.293-.293-.293-.768,0-1.061L9.22,1.72c.293-.293.768-.293,1.061,0s.293.768,0,1.061l-7.5,7.5c-.146.146-.338.22-.53.22Z&#39; stroke-width=&#39;0&#39;%3E%3C/path%3E%3Cpath d=&#39;m9.75,10.5c-.192,0-.384-.073-.53-.22L1.72,2.78c-.293-.293-.293-.768,0-1.061s.768-.293,1.061,0l7.5,7.5c.293.293.293.768,0,1.061-.146.146-.338.22-.53.22Z&#39; stroke-width=&#39;0&#39;%3E%3C/path%3E%3C/g%3E%3C/svg%3E&quot;);
4323}
4324
4325.dark input[type=&quot;search&quot;]::-webkit-search-cancel-button:hover {
4326  background-image: url(&quot;data:image/svg+xml,%3Csvg xmlns=&#39;http://www.w3.org/2000/svg&#39; width=&#39;12&#39; height=&#39;12&#39; viewBox=&#39;0 0 12 12&#39;%3E%3Cg fill=&#39;%23f3f4f6&#39;%3E%3Cpath d=&#39;m2.25,10.5c-.192,0-.384-.073-.53-.22-.293-.293-.293-.768,0-1.061L9.22,1.72c.293-.293.768-.293,1.061,0s.293.768,0,1.061l-7.5,7.5c-.146.146-.338.22-.53.22Z&#39; stroke-width=&#39;0&#39;%3E%3C/path%3E%3Cpath d=&#39;m9.75,10.5c-.192,0-.384-.073-.53-.22L1.72,2.78c-.293-.293-.293-.768,0-1.061s.768-.293,1.061,0l7.5,7.5c.293.293.293.768,0,1.061-.146.146-.338.22-.53.22Z&#39; stroke-width=&#39;0&#39;%3E%3C/path%3E%3C/g%3E%3C/svg%3E&quot;);
4327}
4328
4329/* non-input elements (like the Stripe card form) can be styled to look like an input */
4330div.form-control {
4331  -webkit-appearance: none;
4332  -moz-appearance: none;
4333  appearance: none;
4334  background-color: #fff;
4335  border-width: 1px;
4336  padding-top: 0.5rem;
4337  padding-right: 0.75rem;
4338  padding-bottom: 0.5rem;
4339  padding-left: 0.75rem;
4340  font-size: 1rem;
4341  line-height: 1.5rem;
4342}
4343
4344.form-control {
4345  @apply block w-full rounded-lg bg-white border-0 px-3 py-2 text-base/6 text-neutral-900 shadow-xs ring-1 ring-neutral-300 outline-hidden ring-inset placeholder:text-neutral-500 focus:ring-2 focus:ring-neutral-600 dar
4345k:bg-neutral-700 dark:text-white dark:placeholder-neutral-300 dark:ring-neutral-600 dark:focus:ring-neutral-500;
4346}
4347
4348@media (min-width: 640px) {
4349  .form-control {
4350    font-size: 0.875rem; /* text-sm equivalent (14px) for larger screens */
4351  }
4352}
4353
4354.form-control[disabled] {
4355  @apply cursor-not-allowed bg-neutral-100 dark:bg-neutral-600;
4356}
4357
4358.form-control.error {
4359  @apply border-red-400 ring-red-300 focus:ring-red-500 dark:border-red-600 dark:ring-red-500;
4360}
4361
4362select:not([multiple]) {
4363  @apply w-full appearance-none rounded-lg border-0 bg-white px-3 py-2 text-base/6 text-neutral-900 shadow-xs ring-1 ring-neutral-300 outline-hidden ring-inset focus:ring-2 focus:ring-neutral-600;
4364
4365  /* Custom dropdown arrow */
4366  background-image: url(&quot;data:image/svg+xml,%3csvg xmlns=&#39;http://www.w3.org/2000/svg&#39; fill=&#39;none&#39; viewBox=&#39;0 0 20 20&#39;%3e%3cpath stroke=&#39;%23737373&#39; stroke-linecap=&#39;round&#39; stroke-linejoin=&#39;round&#39; stroke-width=&#39;1.5&#39; d=&#39;M6 8l4 4 4-4&#39;/%3e%3c/svg%3e&quot;);
4367  background-position: right 0.75rem center;
4368  background-repeat: no-repeat;
4369  background-size: 1.25em 1.25em;
4370  padding-right: 2.5rem;
4371}
4372
4373@media (min-width: 640px) {
4374  select:not([multiple]) {
4375    font-size: 0.875rem; /* text-sm equivalent (14px) for larger screens */
4376  }
4377}
4378
4379/* Dark mode styling for single select */
4380.dark {
4381  select:not([multiple]) {
4382    @apply dark:bg-neutral-700 dark:text-white dark:ring-neutral-600 dar
4382k:focus:ring-neutral-500;
4383    background-image: url(&quot;data:image/svg+xml,%3csvg xmlns=&#39;http://www.w3.org/2000/svg&#39; fill=&#39;none&#39; viewBox=&#39;0 0 20 20&#39;%3e%3cpath stroke=&#39;%23A1A1AA&#39; stroke-linecap=&#39;round&#39; stroke-linejoin=&#39;round&#39; stroke-width=&#39;1.5&#39; d=&#39;M6 8l4 4 4-4&#39;/%3e%3c/svg%3e&quot;);
4384  }
4385}
4386
4387select:not([multiple])[disabled] {
4388  @apply cursor-not-allowed bg-neutral-100 opacity-75 ring-neutral-200 dark:bg-neutral-600 dark:ring-neutral-500;
4389}
4390
4391select[multiple] {
4392  @apply w-full rounded-lg rounded-r-none border-0 bg-white px-3 py-2.5 text-base/6 text-neutral-900 shadow-xs outline-1 -outline-offset-1 outline-neutral-300 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-neutral-600 dark:outline-neutral-600;
4393  min-height: 120px;
4394}
4395
4396select[multiple] option {
4397  @apply rounded-md;
4398}
4399
4400@media (min-width: 640px) {
4401  select[multiple] {
4402    font-size: 0.875rem; /* text-sm equivalent (14px) for larger screens */
4403  }
4404}
4405
4406/* Dark mode styling for multiple select */
4407.dark {
4408  select[multiple] {
4409    @apply dark:bg-neutral-700 dark:text-white dark:ring-neutral-600 dar
4409k:focus:ring-neutral-500;
4410  }
4411}
4412
4413select[multiple][disabled] {
4414  @apply cursor-not-allowed bg-neutral-100 opacity-75 ring-neutral-200 dark:bg-neutral-600 dark:ring-neutral-500;
4415}
4416
4417option {
4418  @apply bg-white px-3 py-2 text-sm text-neutral-900 dark:bg-neutral-700 dark:text-neutral-100;
4419}
4420
4421option:checked {
4422  @apply bg-neutral-100 dark:bg-neutral-600;
4423}
4424
4425option:hover {
4426  @apply bg-neutral-50 dark:bg-neutral-600;
4427}
4428
4429.caret {
4430  @apply pointer-events-none absolute inset-y-0 right-0 flex items-center px-2 text-neutral-800;
4431}
4432
4433[type=&quot;checkbox&quot;] {
4434  @apply size-4 cursor-pointer appearance-none rounded-sm border border-neutral-300 bg-white accent-primary checked:border-primary checked:bg-primary focus:outline-2 focus:outline-offset-2 focus:outline-primary-content focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-content disabled:border-neutral-300 disabled:bg-neutral-100 disabled:checked:bg-neutral-100 dark:border-white/20 dark:bg-neutral-800 dark:checked:border-primary dark:checked:bg-primary dark:focus:outline-primary-content dark:focus-visible:outline-primary-content dark:disabled:border-neutral-500 dark:disabled:bg-neutral-400 dark:disabled:checked:bg-neutral-500 forced-colors:appearance-auto;
4435}
4436
4437.dark [type=&quot;checkbox&quot;]:focus {
4438  outline-color: var(--color-primary-content);
4439}
4440
4441/* Default primary flips light without overwriting a generated theme. */
4442.dark {
4443  --color-primary: var(--rb-primary, var(--color-neutral-100));
4444  --color-primary-hover: var(--rb-primary-hover, var(--color-white));
4445  --color-primary-content: var(--rb-primary-content, var(--color-white));
4446  --color-primary-foreground: var(--rb-primary-foreground, var(--color-neutral-900));
4447  --color-accent: var(--rb-primary, var(--color-neutral-100));
4448}
4449
4450[type=&quot;checkbox&quot;]:checked {
4451  border-color: var(--color-primary);
4452  background-color: var(--color-primary);
4453  background-image: url(&quot;data:image/svg+xml,%3csvg viewBox=&#39;0 0 16 16&#39; fill=&#39;white&#39; xmlns=&#39;http://www.w3.org/2000/svg&#39;%3e%3cpath d=&#39;M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z&#39;/%3e%3c/svg%3e&quot;);
4454  background-size: 100% 100%;
4455  background-position: center;
4456  background-repeat: no-repeat;
4457}
4458
4459/* Dark marks when primary-foreground is dark (amber, yellow, white primary in dark mode).
4460   Theme preview opts out with data-primary-mark=&quot;light&quot; for colored primaries. */
4461:where([data-primary-mark=&quot;dark&quot;]) [type=&quot;checkbox&quot;]:checked,
4462.dark:where(:not([data-primary-mark=&quot;light&quot;])) [type=&quot;checkbox&quot;]:checked {
4463  background-image: url(&quot;data:image/svg+xml,%3csvg viewBox=&#39;0 0 16 16&#39; fill=&#39;%23171717&#39; xmlns=&#39;http://www.w3.org/2000/svg&#39;%3e%3cpath d=&#39;M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z&#39;/%3e%3c/svg%3e&quot;);
4464}
4465
4466[type=&quot;checkbox&quot;]:indeterminate {
4467  border-color: var(--color-primary);
4468  background-color: var(--color-primary);
4469  background-image: url(&quot;data:image/svg+xml,%3csvg xmlns=&#39;http://www.w3.org/2000/svg&#39; width=&#39;12&#39; height=&#39;12&#39; viewBox=&#39;0 0 12 12&#39;%3e%3cg fill=&#39;none&#39; stroke=&#39;%23fff&#39; stroke-linecap=&#39;round&#39; stroke-linejoin=&#39;round&#39; stroke-width=&#39;1.5&#39; %3e%3cline x1=&#39;10.75&#39; y1=&#39;6&#39; x2=&#39;1.25&#39; y2=&#39;6&#39;%3e%3c/line%3e%3c/g%3e%3c/svg%3e&quot;);
4470  background-size: 75% 75%;
4471  background-position: center;
4472  background-repeat: no-repeat;
4473}
4474
4475:where([data-primary-mark=&quot;dark&quot;]) [type=&quot;checkbox&quot;]:indeterminate,
4476.dark:where(:not([data-primary-mark=&quot;light&quot;])) [type=&quot;checkbox&quot;]:indeterminate {
4477  background-image: url(&quot;data:image/svg+xml,%3csvg xmlns=&#39;http://www.w3.org/2000/svg&#39; width=&#39;12&#39; height=&#39;12&#39; viewBox=&#39;0 0 12 12&#39;%3e%3cg fill=&#39;none&#39; stroke=&#39;%23171717&#39; stroke-linecap=&#39;round&#39; stroke-linejoin=&#39;round&#39; stroke-width=&#39;1.5&#39; %3e%3cline x1=&#39;10.75&#39; y1=&#39;6&#39; x2=&#39;1.25&#39; y2=&#39;6&#39;%3e%3c/line%3e%3c/g%3e%3c/svg%3e&quot;);
4478}
4479
4480[type=&quot;checkbox&quot;]:disabled {
4481  @apply cursor-not-allowed border-neutral-300 bg-neutral-200 text-neutral-400 opacity-75 hover:text-neutral-300 dark:border-neutral-600 dar
4481k:bg-neutral-700 dark:text-neutral-300 dark:hover:text-neutral-500;
4482}
4483
4484[type=&quot;checkbox&quot;]:disabled:checked {
4485  @apply border-neutral-300 bg-neutral-200 dark:border-neutral-600 dark:bg-neutral-600;
4486}
4487
4488/* Anchor indicator for shift-click range selection */
4489[type=&quot;checkbox&quot;].checkbox-anchor {
4490  outline: 2px dashed currentColor;
4491  outline-offset: 2px;
4492  @apply outline-neutral-600 dark:outline-neutral-200;
4493}
4494
4495[type=&quot;radio&quot;] {
4496  @apply size-4 cursor-pointer appearance-none rounded-full border border-neutral-300 bg-white accent-primary checked:border-primary checked:bg-primary focus:outline-2 focus:outline-offset-2 focus:outline-primary-content focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-content disabled:border-neutral-300 disabled:bg-neutral-100 disabled:checked:bg-neutral-100 dark:border-white/20 dark:bg-neutral-800 dark:checked:border-primary dark:checked:bg-primary dark:focus:outline-primary-content dark:focus-visible:outline-primary-content dark:disabled:border-neutral-500 dark:disabled:bg-neutral-400 dark:disabled:checked:bg-neutral-500 forced-colors:appearance-auto;
4497}
4498
4499.dark [type=&quot;radio&quot;]:focus {
4500  outline-color: var(--color-primary-content);
4501}
4502
4503[type=&quot;radio&quot;]:checked {
4504  border-color: var(--color-primary);
4505  background-color: var(--color-primary);
4506  background-image: url(&quot;data:image/svg+xml,%3csvg viewBox=&#39;0 0 16 16&#39; fill=&#39;white&#39; xmlns=&#39;http://www.w3.org/2000/svg&#39;%3e%3ccircle cx=&#39;8&#39; cy=&#39;8&#39; r=&#39;3&#39;/%3e%3c/svg%3e&quot;);
4507  background-size: 100% 100%;
4508  background-position: center;
4509  background-repeat: no-repeat;
4510}
4511
4512:where([data-primary-mark=&quot;dark&quot;]) [type=&quot;radio&quot;]:checked,
4513.dark:where(:not([data-primary-mark=&quot;light&quot;])) [type=&quot;radio&quot;]:checked {
4514  background-image: url(&quot;data:image/svg+xml,%3csvg viewBox=&#39;0 0 16 16&#39; fill=&#39;%23171717&#39; xmlns=&#39;http://www.w3.org/2000/svg&#39;%3e%3ccircle cx=&#39;8&#39; cy=&#39;8&#39; r=&#39;3&#39;/%3e%3c/svg%3e&quot;);
4515}
4516
4517[type=&quot;radio&quot;]:disabled {
4518  @apply cursor-not-allowed border-neutral-300 bg-neutral-300 text-neutral-400 opacity-75 hover:text-neutral-300 dark:border-neutral-600 dar
4518k:bg-neutral-700 dark:text-neutral-300 dark:hover:text-neutral-500;
4519}
4520
4521[type=&quot;radio&quot;]:disabled:checked {
4522  @apply border-neutral-300 dark:border-neutral-600 dark:bg-neutral-600;
4523}
4524
4525/* Datalist styling */
4526input[list] {
4527  -webkit-appearance: none;
4528  -moz-appearance: none;
4529  appearance: none;
4530}
4531
4532/* Replace default datalist arrow in WebKit browsers */
4533input[list].replace-default-datalist-arrow::-webkit-calendar-picker-indicator {
4534  display: none !important;
4535  -webkit-appearance: none !important;
4536}
4537
4538input[list].replace-default-datalist-arrow {
4539  padding-right: 2.5rem;
4540  background-image: url(&quot;data:image/svg+xml,%3csvg xmlns=&#39;http://www.w3.org/2000/svg&#39; fill=&#39;none&#39; viewBox=&#39;0 0 20 20&#39;%3e%3cpath stroke=&#39;%23737373&#39; stroke-linecap=&#39;round&#39; stroke-linejoin=&#39;round&#39; stroke-width=&#39;1.5&#39; d=&#39;M6 8l4 4 4-4&#39;/%3e%3c/svg%3e&quot;);
4541  background-position: right 0.75rem center;
4542  background-repeat: no-repeat;
4543  background-size: 1.25em 1.25em;
4544}
4545
4546/* Dark mode datalist arrow */
4547.dark {
4548  input[list].replace-default-datalist-arrow {
4549    background-image: url(&quot;data:image/svg+xml,%3csvg xmlns=&#39;http://www.w3.org/2000/svg&#39; fill=&#39;none&#39; viewBox=&#39;0 0 20 20&#39;%3e%3cpath stroke=&#39;%23A1A1AA&#39; stroke-linecap=&#39;round&#39; stroke-linejoin=&#39;round&#39; stroke-width=&#39;1.5&#39; d=&#39;M6 8l4 4 4-4&#39;/%3e%3c/svg%3e&quot;);
4550  }
4551}
4552
4553/* Tom Select */
4554
4555select[multiple][data-controller=&quot;select&quot;] {
4556  @apply invisible;
4557}
4558
4559.dropdown-input {
4560  @apply !border-neutral-300 !bg-white text-base !px-3 !py-2.5 placeholder:!text-neutral-500 dark:!border-neutral-600 dar
4560k:!bg-neutral-700 dark:!placeholder-neutral-300;
4561}
4562
4563@media (min-width: 640px) {
4564  .plugin-dropdown_input .dropdown-input {
4565    font-size: 0.875rem; /* text-sm equivalent (14px) for larger screens */
4566  }
4567}
4568
4569.plugin-dropdown_input.focus.dropdown-active .ts-control {
4570  @apply !border-none;
4571}
4572
4573.ts-dropdown-content {
4574  @apply py-1.5 space-y-0.5;
4575  max-height: 240px;
4576  scroll-behavior: auto;
4577}
4578
4579.ts-dropdown-content {
4580  scrollbar-width: thin;
4581  scrollbar-color: #a2a2a270 #7878780b;
4582}
4583
4584.ts-dropdown-content::-webkit-scrollbar {
4585  width: 6px;
4586}
4587
4588.ts-dropdown-content::-webkit-scrollbar-track {
4589  background: #78787879;
4590}
4591
4592.ts-dropdown-content::-webkit-scrollbar-thumb {
4593  background-color: #a2a2a270;
4594  border-radius: 3px;
4595}
4596
4597.ts-control {
4598  @apply flex min-h-10 w-full px-3 py-2 cursor-default rounded-lg border-0 text-base/6 text-neutral-900 shadow-xs ring-1 placeholder:text-neutral-500 ring-neutral-300 outline-hidden ring-inset focus:ring-neutral-600 dark:bg-neutral-700 dark:text-white dark:placeholder-neutral-300 dark:ring-neutral-600 dar
4598k:focus:ring-neutral-500;
4599
4600  &amp;[disabled] {
4601    @apply cursor-not-allowed bg-neutral-100 dark:bg-neutral-600;
4602  }
4603
4604  &amp;.error {
4605    @apply border-red-400 outline-red-300 focus:outline-red-500 dark:border-red-600 dark:outline-red-500;
4606  }
4607}
4608
4609.plugin-dropdown_input .dropdown-input {
4610  @apply outline-hidden;
4611}
4612
4613/* Ensure items-placeholder is visible when no items are selected */
4614.plugin-dropdown_input .items-placeholder {
4615  display: block !important;
4616}
4617
4618/* Only hide items-placeholder when items are actually selected */
4619.plugin-dropdown_input.has-items .items-placeholder {
4620  display: none !important;
4621}
4622
4623/* Override the dropdown-active rule to keep placeholder visible when no items selected */
4624.plugin-dropdown_input.dropdown-active:not(.has-items) .items-placeholder {
4625  display: block !important;
4626}
4627
4628.ts-dropdown .active.create {
4629  @apply cursor-pointer bg-neutral-100 text-neutral-900 dark:bg-neutral-700 dark:text-white;
4630}
4631
4632.loading-more-results {
4633  @apply !cursor-default;
4634}
4635
4636.disabled .ts-control {
4637  cursor: not-allowed !important;
4638}
4639
4640@media (min-width: 640px) {
4641  .ts-control {
4642    font-size: 0.875rem; /* text-sm equivalent (14px) for larger screens */
4643  }
4644}
4645
4646.full .ts-control {
4647  @apply dark:bg-neutral-700;
4648}
4649
4650.ts-wrapper.single .ts-control,
4651.ts-wrapper.single .ts-control input,
4652.ts-control,
4653.ts-wrapper.single.input-active .ts-control {
4654  @apply cursor-text;
4655}
4656
4657.ts-dropdown [data-selectable] .highlight {
4658  @apply bg-orange-500/20 dark:bg-yellow-500/20;
4659}
4660
4661.ts-control,
4662.ts-wrapper.single.input-active .ts-control {
4663  @apply bg-white dark:bg-neutral-700;
4664}
4665
4666.input-active {
4667  @apply shadow rounded-lg ring-2 ring-inset ring-neutral-600 dar
4667k:ring-neutral-500;
4668}
4669
4670.ts-wrapper {
4671  @apply bg-white dark:bg-neutral-700 rounded-lg;
4672}
4673
4674.ts-control,
4675.ts-wrapper.single.input-active .ts-control {
4676  @apply bg-transparent dark:bg-transparent;
4677}
4678
4679.ts-control input {
4680  @apply !m-0 bg-white text-base placeholder:text-neutral-500 read-only:!cursor-pointer dark:bg-neutral-800 dark:text-white dark:placeholder-neutral-300;
4681}
4682
4683@media (min-width: 640px) {
4684  .ts-control input {
4685    font-size: 0.875rem; /* text-sm equivalent (14px) for larger screens */
4686  }
4687}
4688
4689.ts-wrapper:not(trix-toolbar .trix-input--dialog):not(.form-select).single .ts-control {
4690  @apply !pr-8;
4691}
4692
4693.ts-wrapper.plugin-remove_button .item {
4694  @apply rounded-md;
4695}
4696
4697.ts-wrapper.plugin-remove_button .item .remove {
4698  @apply rounded-r-lg border-none py-1 text-lg leading-none;
4699}
4700
4701.ts-wrapper.plugin-remove_button .item .remove::before {
4702  content: &quot;&quot;;
4703  background-image: url(&quot;data:image/svg+xml,%3Csvg xmlns=&#39;http://www.w3.org/2000/svg&#39; width=&#39;12&#39; height=&#39;12&#39; viewBox=&#39;0 0 12 12&#39;%3E%3Ctitle%3Exmark%3C/title%3E%3Cg fill=&#39;%23737373&#39;%3E%3Cpath d=&#39;m2.25,10.5c-.192,0-.384-.073-.53-.22-.293-.293-.293-.768,0-1.061L9.22,1.72c.293-.293.768-.293,1.061,0s.293.768,0,1.061l-7.5,7.5c-.146.146-.338.22-.53.22Z&#39; stroke-width=&#39;0&#39;%3E%3C/path%3E%3Cpath d=&#39;m9.75,10.5c-.192,0-.384-.073-.53-.22L1.72,2.78c-.293-.293-.293-.768,0-1.061s.768-.293,1.061,0l7.5,7.5c.293.293.293.768,0,1.061-.146.146-.338.22-.53.22Z&#39; stroke-width=&#39;0&#39;%3E%3C/path%3E%3C/g%3E%3C/svg%3E&quot;);
4704  @apply block size-4 bg-center bg-no-repeat;
4705}
4706
4707/* Red remove button for flagged items */
4708.ts-wrapper.plugin-remove_button .item[data-flag=&quot;true&quot;] .remove::before {
4709  background-image: url(&quot;data:image/svg+xml,%3Csvg xmlns=&#39;http://www.w3.org/2000/svg&#39; width=&#39;12&#39; height=&#39;12&#39; viewBox=&#39;0 0 12 12&#39;%3E%3Ctitle%3Exmark%3C/title%3E%3Cg fill=&#39;%23991B1B&#39;%3E%3Cpath d=&#39;m2.25,10.5c-.192,0-.384-.073-.53-.22-.293-.293-.293-.768,0-1.061L9.22,1.72c.293-.293.768-.293,1.061,0s.293.768,0,1.061l-7.5,7.5c-.146.146-.338.22-.53.22Z&#39; stroke-width=&#39;0&#39;%3E%3C/path%3E%3Cpath d=&#39;m9.75,10.5c-.192,0-.384-.073-.53-.22L1.72,2.78c-.293-.293-.293-.768,0-1.061s.768-.293,1.061,0l7.5,7.5c.293.293.293.768,0,1.061-.146.146-.338.22-.53.22Z&#39; stroke-width=&#39;0&#39;%3E%3C/path%3E%3C/g%3E%3C/svg%3E&quot;);
4710}
4711
4712.dark .ts-wrapper.plugin-remove_button .item[data-flag=&quot;true&quot;] .remove::before {
4713  background-image: url(&quot;data:image/svg+xml,%3Csvg xmlns=&#39;http://www.w3.org/2000/svg&#39; width=&#39;12&#39; height=&#39;12&#39; viewBox=&#39;0 0 12 12&#39;%3E%3Ctitle%3Exmark%3C/title%3E%3Cg fill=&#39;%23FCA5A5&#39;%3E%3Cpath d=&#39;m2.25,10.5c-.192,0-.384-.073-.53-.22-.293-.293-.293-.768,0-1.061L9.22,1.72c.293-.293.768-.293,1.061,0s.293.768,0,1.061l-7.5,7.5c-.146.146-.338.22-.53.22Z&#39; stroke-width=&#39;0&#39;%3E%3C/path%3E%3Cpath d=&#39;m9.75,10.5c-.192,0-.384-.073-.53-.22L1.72,2.78c-.293-.293-.293-.768,0-1.061s.768-.293,1.061,0l7.5,7.5c.293.293.293.768,0,1.061-.146.146-.338.22-.53.22Z&#39; stroke-width=&#39;0&#39;%3E%3C/path%3E%3C/g%3E%3C/svg%3E&quot;);
4714}
4715
4716/* Add separate dark mode version */
4717.dark {
4718  .ts-wrapper.plugin-remove_button .item .remove::before {
4719    background-image: url(&quot;data:image/svg+xml,%3Csvg xmlns=&#39;http://www.w3.org/2000/svg&#39; width=&#39;12&#39; height=&#39;12&#39; viewBox=&#39;0 0 12 12&#39;%3E%3Ctitle%3Exmark%3C/title%3E%3Cg fill=&#39;%23A1A1A1&#39;%3E%3Cpath d=&#39;m2.25,10.5c-.192,0-.384-.073-.53-.22-.293-.293-.293-.768,0-1.061L9.22,1.72c.293-.293.768-.293,1.061,0s.293.768,0,1.061l-7.5,7.5c-.146.146-.338.22-.53.22Z&#39; stroke-width=&#39;0&#39;%3E%3C/path%3E%3Cpath d=&#39;m9.75,10.5c-.192,0-.384-.073-.53-.22L1.72,2.78c-.293-.293-.293-.768,0-1.061s.768-.293,1.061,0l7.5,7.5c.293.293.293.768,0,1.061-.146.146-.338.22-.53.22Z&#39; stroke-width=&#39;0&#39;%3E%3C/path%3E%3C/g%3E%3C/svg%3E&quot;);
4720  }
4721}
4722
4723.ts-wrapper.plugin-remove_button .item .remove {
4724  font-size: 0 !important;
4725  @apply my-0.5 mr-1 !ml-0.5 flex size-[18px] items-center justify-center rounded !border-0 !p-1 !leading-none text-neutral-500 dark:text-neutral-400 dark:hover:bg-neutral-700;
4726}
4727
4728/* Red remove button styling for flagged items inside input */
4729.ts-wrapper.plugin-remove_button .item[data-flag=&quot;true&quot;] .remove {
4730  @apply text-red-700 hover:bg-red-200 hover:text-red-900 dark:text-[#FCA5A5] dark:hover:bg-red-100/10 dark:hover:text-red-200;
4731}
4732
4733/* Flag toggle button styling */
4734.ts-wrapper.plugin-remove_button .item .flag-toggle {
4735  @apply text-neutral-400 dark:text-neutral-400;
4736}
4737
4738.ts-wrapper.plugin-remove_button .item[data-flag=&quot;true&quot;] .flag-toggle {
4739  @apply flex size-[18px] items-center justify-center rounded hover:bg-red-200 dark:hover:bg-red-100/10 text-red-800 dark:text-[#FCA5A5];
4740}
4741
4742.ts-dropdown {
4743  @apply z-40 m-0 overflow-hidden rounded-lg border border-t border-solid border-neutral-300 shadow-xs dark:border-neutral-600 dar
4743k:bg-neutral-800 dark:text-white;
4744}
4745
4746.ts-dropdown .create {
4747  @apply mx-1.5 cursor-default rounded-md px-2.5 py-2 text-sm dark:text-neutral-400;
4748}
4749
4750.ts-dropdown [data-selectable].option,
4751.ts-dropdown .no-results {
4752  @apply mx-1.5 cursor-default rounded-md px-2.5 py-2 text-sm;
4753}
4754
4755.ts-dropdown .option,
4756.ts-dropdown [data-disabled],
4757.ts-dropdown [data-disabled] [data-selectable].option {
4758  @apply mx-1.5 cursor-not-allowed rounded-md px-2.5 py-2 text-sm;
4759}
4760
4761.ts-dropdown [data-selectable].option,
4762.ts-dropdown .ts-dropdown .create {
4763  @apply cursor-pointer;
4764}
4765
4766/* Focused/hover state - lighter background */
4767.ts-dropdown .active {
4768  @apply bg-neutral-100 text-neutral-900 dark:bg-neutral-600/50 dark:text-white;
4769}
4770
4771/* Selected state - darker/more prominent */
4772.ts-dropdown .selected {
4773  @apply bg-neutral-200 text-black dark:bg-neutral-500/50 dark:text-white;
4774}
4775
4776/* When an option is both selected AND focused, prioritize the selected styling but add a subtle ring */
4777.ts-dropdown .selected.active {
4778  @apply bg-neutral-200 text-black dark:bg-neutral-500/50 dark:text-white;
4779}
4780
4781.ts-dropdown .spinner {
4782  @apply h-auto w-auto;
4783}
4784
4785.ts-dropdown .spinner:after {
4786  @apply mt-1 mb-0 inline-block size-4 border-2 p-0;
4787}
4788
4789.ts-wrapper:not(.form-control):not(.form-select).single .ts-control {
4790  background-image: url(&quot;data:image/svg+xml,%3csvg xmlns=&#39;http://www.w3.org/2000/svg&#39; fill=&#39;none&#39; viewBox=&#39;0 0 20 20&#39;%3e%3cpath stroke=&#39;%23737373&#39; stroke-linecap=&#39;round&#39; stroke-linejoin=&#39;round&#39; stroke-width=&#39;1.5&#39; d=&#39;M6 8l4 4 4-4&#39;/%3e%3c/svg%3e&quot;);
4791  background-position: right 0.5rem center;
4792  background-repeat: no-repeat;
4793  background-size: 1.5em 1.5em;
4794  print-color-adjust: exact;
4795}
4796
4797/* Dark mode arrow for single select */
4798.dark {
4799  .ts-wrapper:not(.form-control):not(.form-select).single .ts-control {
4800    background-image: url(&quot;data:image/svg+xml,%3csvg xmlns=&#39;http://www.w3.org/2000/svg&#39; fill=&#39;none&#39; viewBox=&#39;0 0 20 20&#39;%3e%3cpath stroke=&#39;%23A1A1AA&#39; stroke-linecap=&#39;round&#39; stroke-linejoin=&#39;round&#39; stroke-width=&#39;1.5&#39; d=&#39;M6 8l4 4 4-4&#39;/%3e%3c/svg%3e&quot;);
4801  }
4802}
4803
4804/* Add dropdown arrow to multiselect elements */
4805.ts-wrapper:not(.form-control):not(.form-select).multi .ts-control {
4806  background-image: url(&quot;data:image/svg+xml,%3csvg xmlns=&#39;http://www.w3.org/2000/svg&#39; fill=&#39;none&#39; viewBox=&#39;0 0 20 20&#39;%3e%3cpath stroke=&#39;%23737373&#39; stroke-linecap=&#39;round&#39; stroke-linejoin=&#39;round&#39; stroke-width=&#39;1.5&#39; d=&#39;M6 6l4-4 4 4M6 14l4 4 4-4&#39;/%3e%3c/svg%3e&quot;);
4807  background-position: right 0.6rem center;
4808  background-repeat: no-repeat;
4809  background-size: 1.25em 1.25em;
4810  print-color-adjust: exact;
4811  padding-right: 2rem !important;
4812}
4813
4814/* Dark mode arrow for multiselect */
4815.dark {
4816  .ts-wrapper:not(.form-control):not(.form-select).multi .ts-control {
4817    background-image: url(&quot;data:image/svg+xml,%3csvg xmlns=&#39;http://www.w3.org/2000/svg&#39; fill=&#39;none&#39; viewBox=&#39;0 0 20 20&#39;%3e%3cpath stroke=&#39;%23A1A1AA&#39; stroke-linecap=&#39;round&#39; stroke-linejoin=&#39;round&#39; stroke-width=&#39;1.5&#39; d=&#39;M6 6l4-4 4 4M6 14l4 4 4-4&#39;/%3e%3c/svg%3e&quot;);
4818  }
4819}
4820.ts-wrapper.multi .ts-control &gt; div {
4821  @apply mr-1 inline-flex items-center justify-center rounded-md bg-neutral-100 px-2 text-xs leading-none font-medium text-neutral-900 dark:bg-neutral-900 dark:text-neutral-100;
4822}
4823
4824/* Ensure items don&#39;t overlap with the dropdown arrow */
4825.ts-wrapper.multi.has-items .ts-control {
4826  @apply !pt-[7px] !pr-8 !pb-[4px];
4827}
4828
4829.ts-wrapper.plugin-remove_button:not(.rtl) .item {
4830  @apply cursor-default;
4831}
4832
4833.ts-wrapper.plugin-remove_button:not(.rtl) .item .remove {
4834  @apply !-ml-0.5 cursor-pointer border-none;
4835}
4836
4837.ts-wrapper.plugin-remove_button .item .remove {
4838  @apply my-0.5 mr-1 !ml-0.5 flex size-[18px] items-center justify-center rounded border-0 text-lg leading-none text-neutral-900/60 hover:text-neutral-900 dark:text-neutral-100/60 dark:hover:bg-neutral-700 dark:hover:text-neutral-100;
4839}
4840
4841.ts-dropdown .optgroup-header {
4842  @apply border-t border-neutral-300 bg-white font-semibold text-neutral-900 dark:border-neutral-600 dar
4842k:bg-neutral-800 dark:text-neutral-100;
4843}
4844
4845.ts-dropdown.plugin-optgroup_columns .optgroup {
4846  height: fit-content;
4847  @apply !mt-0;
4848}
4849
4850.optgroup {
4851  @apply mt-1.5 first:mt-0;
4852}
4853
4854.dark .ts-dropdown.plugin-optgroup_columns .optgroup {
4855  border-right: 1px solid #525252;
4856}
4857
4858.ts-wrapper.multi.has-items .ts-control &gt; input {
4859  @apply !mb-[3px];
4860}
4861
4862.tomselect-checkbox {
4863  @apply !mr-0;
4864}
4865
4866.input-hidden.focus {
4867  @apply !rounded-lg border  border-neutral-300 dark:border-neutral-600;
4868}
4869
4870/* Replace the previous attempt with this updated selector */
4871select[data-select-disable-typing-value=&quot;true&quot;] + .ts-wrapper .ts-control,
4872select[data-select-disable-typing-value=&quot;true&quot;] + .ts-wrapper.single .ts-control,
4873select[data-select-disable-typing-value=&quot;true&quot;] + .ts-wrapper.single .ts-control input,
4874select[data-select-disable-typing-value=&quot;true&quot;] + .ts-wrapper.single.input-active .ts-control {
4875  @apply cursor-default;
4876}
4877
4878.ts-dropdown-content.is-loading-more .option {
4879  pointer-events: none !important;
4880}
4881
4882/* Count display for multi-select */
4883.ts-count-display {
4884  @apply mr-auto !my-0.5 !bg-transparent !px-0 !text-sm !font-normal pointer-events-none;
4885  display: none;
4886}
4887
4888/* Hide count display when not active (explicit rule) */
4889.ts-control:not(.count-active) .ts-count-display {
4890  display: none !important;
4891}
4892
4893/* Hide items and input when count is active */
4894.ts-control.count-active .item {
4895  display: none !important;
4896  visibility: hidden !important;
4897  width: 0 !important;
4898  height: 0 !important;
4899  margin: 0 !important;
4900  padding: 0 !important;
4901}
4902
4903/* Keep input technically visible for keyboard navigation but make it invisible */
4904.ts-control.count-active input {
4905  position: absolute !important;
4906  opacity: 0 !important;
4907  width: 0 !important;
4908  height: 0 !important;
4909  padding: 0 !important;
4910  margin: 0 !important;
4911}
4912
4913/* Ensure proper spacing when count is displayed */
4914.ts-wrapper.multi.has-items .ts-control:has(.ts-count-display) {
4915  @apply !py-[5px];
4916}
4917
4918/* External tags styles - hide tags inside control */
4919.ts-control.external-tags-active .item {
4920  display: none !important;
4921  visibility: hidden !important;
4922  width: 0 !important;
4923  height: 0 !important;
4924  margin: 0 !important;
4925  padding: 0 !important;
4926}
4927
4928/* Reset padding when external tags are active */
4929.ts-wrapper.multi.has-items .ts-control.external-tags-active {
4930  @apply !py-2;
4931}
4932
4933/* Keep placeholder visible when external tags are active */
4934.plugin-dropdown_input.has-items .ts-control.external-tags-active .items-placeholder {
4935  display: block !important;
4936}
4937
4938/* Reset input margins when external tags are active */
4939.ts-wrapper.multi.has-items .ts-control.external-tags-active &gt; input {
4940  margin: 0 !important;
4941}
4942
4943/* Emoji picker */
4944
4945em-emoji-picker {
4946  --color-border-over: rgba(0, 0, 0, 0.1);
4947  --color-border: rgba(0, 0, 0, 0.05);
4948  --font-family: &quot;Inter&quot;, sans-serif;
4949  --rgb-accent: 155, 155, 155;
4950
4951  position: absolute;
4952  z-index: 1000;
4953  max-width: 400px;
4954  min-width: 318px;
4955  resize: horizontal;
4956  overflow: auto;
4957}
4958
4959@media (max-width: 768px) {
4960  em-emoji-picker {
4961    max-width: 80vw;
4962  }
4963}
4964
4965.dark {
4966  em-emoji-picker {
4967    border: 1px solid #353535;
4968    --color-border: rgba(255, 255, 255, 0.1);
4969    --color-border-over: rgba(255, 255, 255, 0.2);
4970  }
4971}
4972
4973/* Shoelace Neutral styles */
4974:root {
4975  --sl-color-primary-50: var(--sl-color-neutral-50) !important;
4976  --sl-color-primary-100: var(--sl-color-neutral-100) !important;
4977  --sl-color-primary-200: var(--sl-color-neutral-200) !important;
4978  --sl-color-primary-300: var(--sl-color-neutral-300) !important;
4979  --sl-color-primary-400: var(--sl-color-neutral-400) !important;
4980  --sl-color-primary-500: var(--sl-color-neutral-500) !important;
4981  --sl-color-primary-600: var(--sl-color-neutral-600) !important;
4982  --sl-color-primary-700: var(--sl-color-neutral-700) !important;
4983  --sl-color-primary-800: var(--sl-color-neutral-800) !important;
4984  --sl-color-primary-900: var(--sl-color-neutral-900) !important;
4985  --sl-color-primary-950: var(--sl-color-neutral-950) !important;
4986
4987  --sl-input-focus-ring-color: hsla(0, 0%, 81%, 0.4) !important;
4988
4989  --sl-border-radius-medium: 0.5rem !important;
4990  --sl-border-radius-large: 0.75rem !important;
4991}
4992
4993/* air-datepicker */
4994
4995.air-datepicker {
4996  --adp-font-family: -apple-system, BlinkMacSystemFont, &quot;Segoe UI&quot;, Roboto, Helvetica, Arial, sans-serif,
4997    &quot;Apple Color Emoji&quot;, &quot;Segoe UI Emoji&quot;, &quot;Segoe UI Symbol&quot;;
4998  --adp-font-size: 14px;
4999  --adp-width: 246px;
5000  --adp-z-index: 40;
5001  --adp-padding: 4px;
5002  --adp-grid-areas: &quot;nav&quot; &quot;body&quot; &quot;timepicker&quot; &quot;buttons&quot;;
5003  --adp-transition-duration: 0.3s;
5004  --adp-transition-ease: ease-out;
5005  --adp-transition-offset: 8px;
5006  --adp-background-color: #fff;
5007  --adp-background-color-hover: #f0f0f0;
5008  --adp-background-color-active: #eaeaea;
5009  --adp-background-color-in-range: rgba(16, 16, 16, 0.1);
5010  --adp-background-color-in-range-focused: rgba(236, 236, 236, 0.2);
5011  --adp-background-color-selected-other-month-focused: #f1f1f1;
5012  --adp-background-color-selected-other-month: #e6e6e6;
5013  --adp-color: #4a4a4a;
5014  --adp-color-secondary: #9c9c9c;
5015  --adp-accent-color: #0a0a0a;
5016  --adp-color-current-date: var(--adp-accent-color);
5017  --adp-color-other-month: #dedede;
5018  --adp-color-disabled: #aeaeae;
5019  --adp-color-disabled-in-range: #939393;
5020  --adp-color-other-month-hover: #c5c5c5;
5021  --adp-border-color: rgba(0, 0, 0, 0.1);
5022  --adp-border-color-inner: #efefef;
5023  --adp-border-radius: 8px;
5024  --adp-border-color-inline: #d7d7d7;
5025  --adp-nav-height: 32px;
5026  --adp-nav-arrow-color: var(--adp-color-secondary);
5027  --adp-nav-action-size: 32px;
5028  --adp-nav-color-secondary: var(--adp-color-secondary);
5029  --adp-day-name-color: #464646;
5030  --adp-day-name-color-hover: #f1f1f1;
5031  --adp-day-cell-width: 1fr;
5032  --adp-day-cell-height: 32px;
5033  --adp-month-cell-height: 42px;
5034  --adp-year-cell-height: 56px;
5035  --adp-pointer-size: 10px;
5036  --adp-poiner-border-radius: 2px;
5037  --adp-pointer-offset: 14px;
5038  --adp-cell-border-radius: 4px;
5039  --adp-cell-background-color-hover: var(--adp-background-color-hover);
5040  --adp-cell-background-color-selected: #1d1d1d;
5041  --adp-cell-background-color-selected-hover: #303030;
5042  --adp-cell-background-color-in-range: rgba(38, 38, 38, 0.1);
5043  --adp-cell-background-color-in-range-hover: rgba(44, 44, 44, 0.2);
5044  --adp-cell-border-color-in-range: var(--adp-cell-background-color-selected);
5045  --adp-btn-height: 32px;
5046  --adp-btn-color: var(--adp-accent-color);
5047  --adp-btn-color-hover: var(--adp-color);
5048  --adp-btn-border-radius: var(--adp-border-radius);
5049  --adp-btn-background-color-hover: var(--adp-background-color-hover);
5050  --adp-btn-background-color-active: var(--adp-background-color-active);
5051  --adp-time-track-height: 1px;
5052  --adp-time-track-color: #dedede;
5053  --adp-time-track-color-hover: #b1b1b1;
5054  --adp-time-thumb-size: 12px;
5055  --adp-time-padding-inner: 10px;
5056  --adp-time-day-period-color: var(--adp-color-secondary);
5057  --adp-mobile-font-size: 16px;
5058  --adp-mobile-nav-height: 40px;
5059  --adp-mobile-width: 320px;
5060  --adp-mobile-day-cell-height: 38px;
5061  --adp-mobile-month-cell-height: 48px;
5062  --adp-mobile-year-cell-height: 64px;
5063}
5064.air-datepicker-overlay {
5065  --adp-overlay-background-color: rgba(0, 0, 0, 0.3);
5066  --adp-overlay-transition-duration: 0.3s;
5067  --adp-overlay-transition-ease: ease-out;
5068  --adp-overlay-z-index: 99;
5069}
5070
5071.air-datepicker-cell.-selected-.-day- {
5072  color: #ffffff; /* Ensure selected cell text is also light in dark mode */
5073  background: var(--adp-cell-background-color-selected);
5074}
5075
5076.air-datepicker-cell.-selected-.-year- {
5077  color: #ffffff; /* Ensure selected cell text is also light in dark mode */
5078  background: var(--adp-cell-background-color-selected);
5079}
5080
5081.air-datepicker-cell.-selected-.-month- {
5082  color: #ffffff; /* Ensure selected cell text is also light in dark mode */
5083  background: var(--adp-cell-background-color-selected);
5084}
5085
5086.air-datepicker-cell.-selected- {
5087  color: #ffffff; /* Ensure selected cell text is also light in dark mode */
5088  background: var(--adp-cell-background-color-selected);
5089}
5090
5091.air-datepicker-cell.-selected-.-current- {
5092  color: #ffffff; /* Ensure selected cell text is also light in dark mode */
5093  background: var(--adp-cell-background-color-selected);
5094}
5095
5096.air-datepicker-cell.-current- {
5097  border: 1px solid #bdbdbd !important;
5098}
5099
5100.air-datepicker-cell.-selected-.-day-.-other-month- {
5101  color: #cccccc; /* Ensure selected cell text is also light in dark mode */
5102  background: #7e7e7e;
5103}
5104
5105.dark {
5106  .air-datepicker {
5107    --adp-background-color: #2d2d2d; /* Dark background */
5108    --adp-background-color-hover: #3a3a3a;
5109    --adp-background-color-active: #4a4a4a;
5110    --adp-background-color-in-range: rgba(196, 196, 196, 0.2);
5111    --adp-background-color-in-range-focused: rgba(196, 196, 196, 0.3);
5112    --adp-background-color-selected-other-month-focused: #333;
5113    --adp-background-color-selected-other-month: #444;
5114    --adp-color: #e0e0e0; /* Light text color */
5115    --adp-color-secondary: #a0a0a0;
5116    --adp-accent-color: #ffffff; /* A light accent color for dark mode */
5117    --adp-color-other-month: #555;
5118    --adp-color-disabled: #777;
5119    --adp-color-disabled-in-range: #888;
5120    --adp-color-other-month-hover: #666;
5121    --adp-border-color: #ffffff1a; /* Lighter border for dark mode */
5122    --adp-border-color-inner: #444;
5123    --adp-border-color-inline: #444444;
5124    --adp-nav-arrow-color: var(--adp-color-secondary);
5125    --adp-day-name-color: #c0c0c0;
5126    --adp-day-name-color-hover: #3a3a3a;
5127    --adp-cell-background-color-hover: var(--adp-background-color-hover);
5128    --adp-cell-background-color-selected: #ffffff;
5129    --adp-cell-background-color-selected-hover: #e9e9e9;
5130    --adp-cell-background-color-in-range: rgba(175, 175, 175, 0.2);
5131    --adp-cell-background-color-in-range-hover: rgba(169, 169, 169, 0.3);
5132    --adp-btn-color: var(--adp-accent-color);
5133    --adp-btn-color-hover: var(--adp-color);
5134    --adp-btn-background-color-hover: var(--adp-background-color-hover);
5135    --adp-btn-background-color-active: var(--adp-background-color-active);
5136    --adp-time-track-color: #555;
5137    --adp-time-track-color-hover: #777;
5138    --adp-time-day-period-color: var(--adp-color-secondary);
5139  }
5140
5141  .air-datepicker-overlay {
5142    --adp-overlay-background-color: rgba(255, 255, 255, 0.1); /* Lighter overlay for dark mode */
5143  }
5144
5145  .air-datepicker-cell.-selected-.-day- {
5146    color: #1d1d1d; /* Ensure selected cell text is also light in dark mode */
5147    background: var(--adp-cell-background-color-selected);
5148  }
5149
5150  .air-datepicker-cell.-selected-.-year- {
5151    color: #1d1d1d; /* Ensure selected cell text is also light in dark mode */
5152    background: var(--adp-cell-background-color-selected);
5153  }
5154
5155  .air-datepicker-cell.-selected-.-month- {
5156    color: #1d1d1d; /* Ensure selected cell text is also light in dark mode */
5157    background: var(--adp-cell-background-color-selected);
5158  }
5159
5160  .air-datepicker-cell.-selected- {
5161    color: #1d1d1d; /* Ensure selected cell text is also light in dark mode */
5162    background: var(--adp-cell-background-color-selected);
5163  }
5164
5165  .air-datepicker-cell.-selected-.-current- {
5166    color: #1d1d1d; /* Ensure selected cell text is also light in dark mode */
5167    background: var(--adp-cell-background-color-selected);
5168  }
5169
5170  .air-datepicker-cell.-current- {
5171    border: 1px solid #505050 !important;
5172  }
5173
5174  .air-datepicker-cell.-selected-.-day-.-other-month- {
5175    color: #cccccc; /* Ensure selected cell text is also light in dark mode */
5176    background: #7e7e7e;
5177  }
5178}
5179
5180.air-datepicker--navigation {
5181  width: 100%;
5182}
5183.air-datepicker--pointer {
5184  opacity: 0;
5185}
5186.air-datepicker {
5187  background: var(--adp-background-color);
5188  border: 1px solid var(--adp-border-color);
5189  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
5190  border-radius: var(--adp-border-radius);
5191  box-sizing: content-box;
5192  display: grid;
5193  grid-template-columns: 1fr;
5194  grid-template-rows: repeat(4, max-content);
5195  grid-template-areas: var(--adp-grid-areas);
5196  font-family: var(--adp-font-family), sans-serif;
5197  font-size: var(--adp-font-size);
5198  color: var(--adp-color);
5199  width: var(--adp-width);
5200  position: absolute;
5201  transition: opacity var(--adp-transition-duration) var(--adp-transition-ease),
5202    transform var(--adp-transition-duration) var(--adp-transition-ease);
5203  z-index: var(--adp-z-index);
5204}
5205
5206.air-datepicker-cell.-selected- {
5207  color: #1d1d1d;
5208  border: none;
5209  background: var(--adp-cell-background-color-selected);
5210}
5211
5212.air-datepicker-cell.-disabled- {
5213  cursor: not-allowed;
5214}
5215
5216/* Add a new rule for dark mode selected cells if needed, or adjust the general .air-datepicker-cell.-selected- inside the dark mode media query */
5217.dark {
5218  .air-datepicker-cell.-selected- {
5219    color: #e0e0e0; /* Example: light text for selected cells in dark mode */
5220    /* background: var(--adp-cell-background-color-selected); Is already set within .air-datepicker dark vars */
5221  }
5222}
5223
5224/* Time-only picker styles */
5225.air-datepicker.only-timepicker .air-datepicker--navigation {
5226  display: none;
5227}
5228
5229.air-datepicker.only-timepicker .air-datepicker--content {
5230  display: none;
5231}
5232
5233.air-datepicker.only-timepicker .air-datepicker--time {
5234  border-top: none;
5235}
5236
5237/* Scrollbar */
5238
5239.small-scrollbar {
5240  scrollbar-width: thin;
5241  scrollbar-color: #a2a2a270 #7878780b;
5242}
5243
5244.small-scrollbar::-webkit-scrollbar {
5245  width: 6px;
5246}
5247
5248.small-scrollbar::-webkit-scrollbar-track {
5249  background: #7878780b;
5250}
5251
5252.small-scrollbar::-webkit-scrollbar-thumb {
5253  background-color: #a2a2a270;
5254  border-radius: 3px;
5255}
5256
5257/* Hide scrollbar for scroll area component */
5258.scrollbar-hide {
5259  -ms-overflow-style: none; /* IE and Edge */
5260  scrollbar-width: none; /* Firefox */
5261}
5262
5263.scrollbar-hide::-webkit-scrollbar {
5264  display: none; /* Chrome, Safari and Opera */
5265}
5266
5267/* Scroll Area Fade Effects - Register custom properties for animation */
5268@property --fade-start-opacity {
5269  syntax: &#39;&lt;number&gt;&#39;;
5270  initial-value: 1;
5271  inherits: false;
5272}
5273
5274@property --fade-end-opacity {
5275  syntax: &#39;&lt;number&gt;&#39;;
5276  initial-value: 1;
5277  inherits: false;
5278}
5279
5280@property --fade-start-x-opacity {
5281  syntax: &#39;&lt;number&gt;&#39;;
5282  initial-value: 1;
5283  inherits: false;
5284}
5285
5286@property --fade-end-x-opacity {
5287  syntax: &#39;&lt;number&gt;&#39;;
5288  initial-value: 1;
5289  inherits: false;
5290}
5291
5292@property --fade-start-y-opacity {
5293  syntax: &#39;&lt;number&gt;&#39;;
5294  initial-value: 1;
5295  inherits: false;
5296}
5297
5298@property --fade-end-y-opacity {
5299  syntax: &#39;&lt;number&gt;&#39;;
5300  initial-value: 1;
5301  inherits: false;
5302}
5303
5304/* Scroll Area Fade Effects */
5305.scroll-fade-x {
5306  --fade-start-opacity: 1;
5307  --fade-end-opacity: 1;
5308  --fade-size: 25px;
5309
5310  mask-image:
5311    linear-gradient(to right,
5312      hsl(0 0% 0% / var(--fade-start-opacity)),
5313      black var(--fade-size),
5314      black calc(100% - var(--fade-size)),
5315      hsl(0 0% 0% / var(--fade-end-opacity))
5316    );
5317  -webkit-mask-image:
5318    linear-gradient(to right,
5319      hsl(0 0% 0% / var(--fade-start-opacity)),
5320      black var(--fade-size),
5321      black calc(100% - var(--fade-size)),
5322      hsl(0 0% 0% / var(--fade-end-opacity))
5323    );
5324
5325  transition: --fade-start-opacity 300ms ease-out, --fade-end-opacity 300ms ease-out;
5326}
5327
5328.scroll-fade-y {
5329  --fade-start-opacity: 1;
5330  --fade-end-opacity: 1;
5331  --fade-size: 40px;
5332
5333  mask-image:
5334    linear-gradient(to bottom,
5335      hsl(0 0% 0% / var(--fade-start-opacity)),
5336      black var(--fade-size),
5337      black calc(100% - var(--fade-size)),
5338      hsl(0 0% 0% / var(--fade-end-opacity))
5339    );
5340  -webkit-mask-image:
5341    linear-gradient(to bottom,
5342      hsl(0 0% 0% / var(--fade-start-opacity)),
5343      black var(--fade-size),
5344      black calc(100% - var(--fade-size)),
5345      hsl(0 0% 0% / var(--fade-end-opacity))
5346    );
5347
5348  transition: --fade-start-opacity 300ms ease-out, --fade-end-opacity 300ms ease-out;
5349}
5350
5351.scroll-fade-both {
5352  --fade-start-x-opacity: 1;
5353  --fade-end-x-opacity: 1;
5354  --fade-start-y-opacity: 1;
5355  --fade-end-y-opacity: 1;
5356  --fade-size: 40px;
5357  --fade-top-offset: 0px; /* Offset from top to skip header areas */
5358  --fade-left-offset: 0px; /* Offset from left to skip sticky columns */
5359
5360  mask-image:
5361    linear-gradient(to right,
5362      black var(--fade-left-offset),
5363      hsl(0 0% 0% / var(--fade-start-x-opacity)) var(--fade-left-offset),
5364      black calc(var(--fade-left-offset) + var(--fade-size)),
5365      black calc(100% - var(--fade-size)),
5366      hsl(0 0% 0% / var(--fade-end-x-opacity))
5367    ),
5368    linear-gradient(to bottom,
5369      black var(--fade-top-offset),
5370      hsl(0 0% 0% / var(--fade-start-y-opacity)) var(--fade-top-offset),
5371      black calc(var(--fade-top-offset) + var(--fade-size)),
5372      black calc(100% - var(--fade-size)),
5373      hsl(0 0% 0% / var(--fade-end-y-opacity))
5374    );
5375  -webkit-mask-image:
5376    linear-gradient(to right,
5377      black var(--fade-left-offset),
5378      hsl(0 0% 0% / var(--fade-start-x-opacity)) var(--fade-left-offset),
5379      black calc(var(--fade-left-offset) + var(--fade-size)),
5380      black calc(100% - var(--fade-size)),
5381      hsl(0 0% 0% / var(--fade-end-x-opacity))
5382    ),
5383    linear-gradient(to bottom,
5384      black var(--fade-top-offset),
5385      hsl(0 0% 0% / var(--fade-start-y-opacity)) var(--fade-top-offset),
5386      black calc(var(--fade-top-offset) + var(--fade-size)),
5387      black calc(100% - var(--fade-size)),
5388      hsl(0 0% 0% / var(--fade-end-y-opacity))
5389    );
5390  mask-composite: intersect;
5391  -webkit-mask-composite: source-in;
5392
5393  transition: --fade-start-x-opacity 300ms ease-out, --fade-end-x-opacity 300ms ease-out,
5394              --fade-start-y-opacity 300ms ease-out, --fade-end-y-opacity 300ms ease-out;
5395}
5396
5397/* Update fade opacity when scrolled - fade appears when there&#39;s overflow */
5398[data-overflow-x-start] .scroll-fade-x,
5399[data-overflow-x-start] .scroll-fade-both {
5400  --fade-start-opacity: 0;
5401  --fade-start-x-opacity: 0;
5402}
5403
5404[data-overflow-x-end] .scroll-fade-x,
5405[data-overflow-x-end] .scroll-fade-both {
5406  --fade-end-opacity: 0;
5407  --fade-end-x-opacity: 0;
5408}
5409
5410[data-overflow-y-start] .scroll-fade-y,
5411[data-overflow-y-start] .scroll-fade-both {
5412  --fade-start-opacity: 0;
5413  --fade-start-y-opacity: 0;
5414}
5415
5416[data-overflow-y-end] .scroll-fade-y,
5417[data-overflow-y-end] .scroll-fade-both {
5418  --fade-end-opacity: 0;
5419  --fade-end-y-opacity: 0;
5420}
5421
5422/* Cursor pointer for buttons */
5423
5424@layer base {
5425  button:not(:disabled),
5426  [role=&quot;button&quot;]:not(:disabled) {
5427    cursor: pointer;
5428  }
5429}
5430
5431/* Toast Notifications */
5432.toast-item {
5433  @apply absolute w-full left-0 select-none;
5434  z-index: var(--toast-z-index, 100);
5435
5436  /* Position based on data attributes */
5437  top: var(--toast-top, auto);
5438  bottom: var(--toast-bottom, auto);
5439  transform: var(--toast-transform, translateY(0));
5440  scale: var(--toast-scale, 100%);
5441  opacity: var(--toast-opacity, 1);
5442
5443  /* Separate transitions for better control - like Sonner */
5444  transition: transform 400ms ease, opacity 400ms ease, scale 400ms ease, top 400ms ease, bottom 400ms ease,
5445    height 200ms ease;
5446}
5447
5448/* Initial hidden state for enter animation */
5449.toast-item[data-mounted=&quot;false&quot;] {
5450  opacity: 0;
5451}
5452
5453.toast-item[data-mounted=&quot;false&quot;][data-position*=&quot;bottom&quot;] {
5454  transform: translateY(100%);
5455}
5456
5457.toast-item[data-mounted=&quot;false&quot;][data-position*=&quot;top&quot;] {
5458  transform: translateY(-100%);
5459}
5460
5461/* Removed state for exit animation */
5462.toast-item[data-removed=&quot;true&quot;] {
5463  opacity: 0;
5464  scale: 95%;
5465  pointer-events: none;
5466}
5467
5468/* In stacked mode, removed toasts should slide away */
5469.toast-item[data-removed=&quot;true&quot;][data-expanded=&quot;false&quot;][data-position*=&quot;bottom&quot;] {
5470  transform: translateY(calc(var(--toast-index) * 14px + 5%));
5471}
5472
5473.toast-item[data-removed=&quot;true&quot;][data-expanded=&quot;false&quot;][data-position*=&quot;top&quot;] {
5474  transform: translateY(calc(-1 * (var(--toast-index) * 14px + 5%)));
5475}
5476
5477/* Overflow toasts (removed due to limit) slide in opposite direction */
5478.toast-item[data-removed=&quot;true&quot;][data-overflow=&quot;true&quot;][data-expanded=&quot;false&quot;][data-position*=&quot;bottom&quot;] {
5479  transform: translateY(calc(-1 * (var(--toast-index) * 14px + 25%)));
5480  scale: 78%;
5481}
5482
5483.toast-item[data-removed=&quot;true&quot;][data-overflow=&quot;true&quot;][data-expanded=&quot;false&quot;][data-position*=&quot;top&quot;] {
5484  transform: translateY(calc(var(--toast-index) * 14px + 25%));
5485  scale: 78%;
5486}
5487
5488/* Pointer events based on visibility */
5489.toast-item[data-visible=&quot;false&quot;] {
5490  pointer-events: none;
5491}
5492
5493/* Expanded mode styles */
5494.toast-item[data-expanded=&quot;true&quot;] {
5495  --toast-scale: 100%;
5496  height: var(--initial-height);
5497}
5498
5499.toast-item[data-expanded=&quot;true&quot;][data-position*=&quot;bottom&quot;] {
5500  --toast-top: auto;
5501  --toast-bottom: var(--toast-offset, 0px);
5502  --toast-transform: translateY(0);
5503}
5504
5505.toast-item[data-expanded=&quot;true&quot;][data-position*=&quot;top&quot;] {
5506  --toast-top: var(--toast-offset, 0px);
5507  --toast-bottom: auto;
5508  --toast-transform: translateY(0);
5509}
5510
5511/* Stacked mode styles */
5512.toast-item[data-expanded=&quot;false&quot;][data-front=&quot;true&quot;] {
5513  --toast-scale: 100%;
5514  --toast-opacity: 1;
5515  height: var(--initial-height);
5516}
5517
5518.toast-item[data-expanded=&quot;false&quot;][data-front=&quot;true&quot;][data-position*=&quot;bottom&quot;] {
5519  --toast-top: auto;
5520  --toast-bottom: 0px;
5521  --toast-transform: translateY(0);
5522}
5523
5524.toast-item[data-expanded=&quot;false&quot;][data-front=&quot;true&quot;][data-position*=&quot;top&quot;] {
5525  --toast-top: 0px;
5526  --toast-bottom: auto;
5527  --toast-transform: translateY(0);
5528}
5529
5530/* Non-front toasts in stack - Sonner approach */
5531.toast-item[data-expanded=&quot;false&quot;]:not([data-front=&quot;true&quot;]) {
5532  height: var(--front-toast-height);
5533  overflow: hidden;
5534  --toast-scale: calc(100% - (var(--toast-index) * 6%));
5535  display: flex;
5536  flex-direction: column;
5537}
5538
5539.toast-item[data-expanded=&quot;false&quot;]:not([data-front=&quot;true&quot;])[data-position*=&quot;bottom&quot;] {
5540  --toast-top: auto;
5541  --toast-bottom: 0px;
5542  --toast-transform: translateY(calc(-1 * var(--toast-index) * 14px));
5543  justify-content: flex-start; /* Content at top, bottom gets cut */
5544}
5545
5546.toast-item[data-expanded=&quot;false&quot;]:not([data-front=&quot;true&quot;])[data-position*=&quot;top&quot;] {
5547  --toast-top: 0px;
5548  --toast-bottom: auto;
5549  --toast-transform: translateY(calc(var(--toast-index) * 14px));
5550  justify-content: flex-end; /* Content at bottom, top gets cut */
5551}
5552
5553/* Hidden toasts (beyond 3rd) */
5554.toast-item[data-expanded=&quot;false&quot;][data-visible=&quot;false&quot;] {
5555  --toast-opacity: 0;
5556  --toast-scale: 82%;
5557}
5558
5559.toast-item[data-expanded=&quot;false&quot;][data-visible=&quot;false&quot;][data-position*=&quot;bottom&quot;] {
5560  --toast-top: auto;
5561  --toast-bottom: -200px;
5562  --toast-transform: translateY(0);
5563}
5564
5565.toast-item[data-expanded=&quot;false&quot;][data-visible=&quot;false&quot;][data-position*=&quot;top&quot;] {
5566  --toast-top: -200px;
5567  --toast-bottom: auto;
5568  --toast-transform: translateY(0);
5569}
5570'
5571          data-clipboard-success-message-value="CSS Copied"
5572          data-clipboard-error-message-value="Copy Failed!"
5573          data-clipboard-show-tooltip-value="false"
5574          data-clipboard-tooltip-duration-value="1500">
5575    <span data-clipboard-target="copyContent" class="flex items-center gap-1.5">
5576      <svg xmlns="http://www.w3.org/2000/svg" class="size-4" width="18" height="18" viewBox="0 0 18 18"><g fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" stroke="currentColor"><rect x="1.75" y="1.75" width="11" height="11" rx="2" ry="2" transform="translate(14.5 14.5) rotate(-180)"></rect><path d="M15.199,6.002l1.029,6.924c.162,1.093-.592,2.11-1.684,2.272l-6.924,1.029c-.933,.139-1.81-.39-2.148-1.228"></path><line x1="7.25" y1="9.75" x2="7.25" y2="4.75"></line><line x1="4.75" y1="7.25" x2="9.75" y2="7.25"></line></g></svg>
5577      Copy
5578    </span>
5579    <span data-clipboard-target="copiedContent" class="hidden flex items-center gap-1.5 text-green-400">
5580      <svg xmlns="http://www.w3.org/2000/svg" class="size-4" width="18" height="18" viewBox="0 0 18 18"><g fill="currentColor"><path d="M6.75,15h-.002c-.227,0-.442-.104-.583-.281L2.165,9.719c-.259-.324-.207-.795,.117-1.054,.325-.259,.796-.206,1.054,.117l3.418,4.272L14.667,3.278c-.261-.322,.732-.373,1.055-.111,.322,.261,.372,.733,.111,1.055L7.333,14.722c-.143,.176-.357,.278-.583,.278Z" fill="currentColor"></path></g></svg>
5581      Copied!
5582    </span>
5583  </button>
5584</div>
5585
5586  </div>
5587
5588  <!-- Full install Panel -->
5589  <div data-tabs-target="panel" role="tabpanel" class="p-4 bg-white dark:bg-neutral-800 border border-black/10 dark:border-white/10 rounded-xl">
5590    <div class="rounded-xl border border-blue-200/50 bg-blue-50 p-4 dark:border-blue-800/50 dark:bg-blue-900/20 text-blue-900 dark:text-blue-200">
5591  <div class="grid grid-cols-[auto_1fr] gap-2 items-start">
5592    <div class="flex items-center h-full">
5593      <svg xmlns="http://www.w3.org/2000/svg" class="text-blue-500 dark:text-blue-400" width="18" height="18" viewBox="0 0 18 18"><g fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" stroke="currentColor"><path d="M9 16.25C13.004 16.25 16.25 13.004 16.25 9C16.25 4.996 13.004 1.75 9 1.75C4.996 1.75 1.75 4.996 1.75 9C1.75 13.004 4.996 16.25 9 16.25Z"></path> <path d="M9 12.75V9.25C9 8.9739 8.7761 8.75 8.5 8.75H7.75"></path> <path d="M9 6.75C8.448 6.75 8 6.301 8 5.75C8 5.199 8.448 4.75 9 4.75C9.552 4.75 10 5.199 10 5.75C10 6.301 9.552 6.75 9 6.75Z" fill="currentColor" data-stroke="none" stroke="none"></path></g></svg>
5594    </div>
5595    <p class="text-sm font-semibold">
5596      How to install custom CSS for each component
5597    </p>
5598    <div></div>
5599    <div class="text-sm space-y-2">
5600      <ol class="list-decimal list-inside space-y-1">
5601        <li>Navigate to the component page you want to use (e.g., <a target="_blank" class="text-blue-700 dark:text-blue-100 underline" href="/docs/combobox">Combobox</a>, <a target="_blank" class="text-blue-700 dark:text-blue-100 underline" href="/docs/modal">Modal</a>, <a target="_blank" class="text-blue-700 dark:text-blue-100 underline" href="/docs/emoji-picker">Emoji Picker</a>, etc.)</li>
5602        <li>Look for the <strong>"Custom CSS"</strong> section</li>
5603        <li>Copy the CSS code for that component</li>
5604        <li>Paste it into your main CSS file (typically <code class="code-inline-text">app/assets/stylesheets/application.css</code> or your Tailwind CSS file)</li>
5605        <li>Save the file and restart your Rails server if needed</li>
5606      </ol>
5607    </div>
5608  </div>
5609</div>
5610
5611  </div>
5612</div>
5613
5614<div class="hidden bg-blue-50 dark:bg-blue-950/30 border border-blue-200 dark:border-blue-900 rounded-xl p-4 mb-4">
5615  <div class="flex items-start gap-3">
5616    <svg xmlns="http://www.w3.org/2000/svg" class="size-5 text-blue-600 dark:text-blue-400 mt-0.5 flex-shrink-0" width="18" height="18" viewBox="0 0 18 18"><g fill="currentColor"><path d="M9,1C4.589,1,1,4.589,1,9s3.589,8,8,8,8-3.589,8-8S13.411,1,9,1Zm0,14.5c-3.584,0-6.5-2.916-6.5-6.5S5.416,2.5,9,2.5s6.5,2.916,6.5,6.5-2.916,6.5-6.5,6.5Z"></path><circle cx="9" cy="5.5" r="1"></circle><path d="M9,7.5c-.414,0-.75,.336-.75,.75v4.5c0,.414,.336,.75,.75,.75s.75-.336,.75-.75v-4.5c0-.414-.336-.75-.75-.75Z"></path></g></svg>
5617    <div class="text-sm">
5618      <p class="font-semibold text-blue-900 dark:text-blue-100 mb-1">A Note on Tailwind Verbosity</p>
5619      <p class="text-blue-800 dark:text-blue-200 mb-4">
5619When browsing the components, if you find the verbose inline Tailwind CSS classes overwhelming, that's completely understandable and a valid concern. I've provided the elements with Tailwind classes directly applied to components for maximum flexibility, allowing you to modify them as you wish.</p>
5620      <p class="text-blue-800 dark:text-blue-200">If you want to increase maintainability and reusability, one solution is to use Tailwind's <code class="code-inline-text">@apply</code> directive to extract styles into reusable CSS classes. Additionally, you can build partials or view components in Rails to encapsulate markup and styles. For an even more structured approach, you can use tools like <a href="https://github.com/ViewComponent/view_component" target="_blank" class="underline hover:text-blue-900 dark:hover:text-blue-100">ViewComponent</a> or <a href="https://github.com/phlex-ruby/phlex" target="_blank" class="underline hover:text-blue-900 dark:hover:text-blue-100">Phlex</a>, which allows you to create components in pure Ruby, making them easier to maintain and reuse across your application.</p>
5621    </div>
5622  </div>
5623</div>
5624
5625
5626            <div class="mt-16 flex items-center justify-between border-t border-neutral-200 pt-6 dark:border-neutral-800">
5627                <div></div>
5628
5629                <a href="/docs/view-components" class="group flex items-center gap-2 text-sm font-medium text-neutral-600 hover:text-neutral-900 dark:text-neutral-400 dark:hover:text-white">
5630                  <div class="flex flex-col text-right">
5631                    <span>View Components</span>
5632                  </div>
5633                  <svg xmlns="http://www.w3.org/2000/svg" class="size-4 transition-transform group-hover:translate-x-1" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
5634                    <path stroke-linecap="round" stroke-linejoin="round" d="M9 5l7 7-7 7" />
5635                  </svg>
5636                </a>
5637            </div>
5638          </div>
5639          <div class="max-xl:hidden">
5640            <div class="small-scrollbar sticky top-14 max-h-[calc(100svh-3.5rem)] px-6 pt-10 pb-24" data-controller="table-of-contents" data-table-of-contents-exclude-selector-value=".border.mb-8.bg-white, .not-prose, pre, code, .border.border-neutral-200">
5641              <div class="flex flex-col gap-3">
5642                <h3 class="flex items-center gap-1.5 uppercase text-sm/6 text-neutral-500 sm:text-xs/6 dark:text-neutral-400">
5643                  <svg xmlns="http://www.w3.org/2000/svg" class="size-4" width="18" height="18" viewBox="0 0 18 18"><g fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" stroke="currentColor"><line x1="1.75" y1="14.75" x2="12.25" y2="14.75"></line><line x1="1.75" y1="10.75" x2="5.25" y2="10.75"></line><line x1="1.75" y1="6.75" x2="5.25" y2="6.75"></line><line x1="1.75" y1="2.75" x2="12.25" y2="2.75"></line><circle cx="11.25" cy="8.75" r="3"></circle><line x1="13.371" y1="10.871" x2="16.25" y2="13.75"></line></g></svg>
5644                  Table of contents
5645                </h3>
5646                <div data-table-of-contents-target="container">
5647                  <!-- Table of contents will be generated automatically -->
5648                </div>
5649                
5650                  <div class="relative mt-4">
5651  <div class="mx-auto">
5652    <div class="text-center max-w-sm mx-auto border bg-white border-black/10 dark:border-white/10 p-4 rounded-xl dark:bg-neutral-800">
5653      <div data-controller="newsletter"
5654           class="max-w-xs">
5655        <div data-newsletter-target="form">
5656          <form data-action="submit->newsletter#submit"
5657                class="space-y-3">
5658            <h2 class="text-base font-semibold">Get notified when new components come out</h2>
5659            <input type="email"
5660                  data-newsletter-target="email"
5661                  placeholder="Enter your email..."
5662                  class="form-control"
5663                  required>
5664            <div class="flex justify-center absolute bottom-0 left-0 right-0 -mb-20">
5665              <div data-controller="turnstile" data-sitekey="0x4AAAAAAB8VraQb1T-uEO28" data-theme="auto" data-size="invisible" data-execution="execute" data-appearance="interaction-only"></div>
5666            </div>
5667            <button type="submit"
5668                    data-newsletter-target="submitButton"
5669                    class="w-full flex items-center justify-center gap-1.5 rounded-lg border border-neutral-400/30 bg-neutral-800 px-3.5 py-2.5 text-sm font-medium whitespace-nowrap text-white shadow-sm transition-all duration-100 ease-in-out select-none hover:bg-neutral-700 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-600 disabled:cursor-not-allowed disabled:opacity-50 dark:bg-white dark:text-neutral-800 dark:hover:bg-neutral-100 dar
5669k:focus-visible:outline-neutral-200">
5670              Subscribe
5671            </button>
5672          </form>
5673        </div>
5674
5675        <div data-newsletter-target="successMessage"
5676             class="text-center py-4"
5677             style="display: none;">
5678          <div class="inline-flex items-center justify-center size-10 mx-auto mb-2.5 rounded-full bg-green-100 dark:bg-green-900/50">
5679            <svg class="size-5 text-green-600 dark:text-green-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
5680              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
5681            </svg>
5682          </div>
5683          <h3 class="text-base font-semibold text-neutral-900 dark:text-white mb-1">Thanks for subscribing!</h3>
5684          <p class="text-sm text-neutral-600 dark:text-neutral-300">We'll notify you when new components are released.</p>
5685        </div>
5686      </div>
5687    </div>
5688  </div>
5689</div>
5690
5691              </div>
5692            </div>
5693          </div>
5694        </div>
5695      </div>
5696    </div>
5697  </div>
5698</div>
5699
5700
5701    </main>
5702    
5703<div class="hidden rotate-45 text-red-500 bg-red-100 dark:text-red-400 dark:bg-red-900/50 text-green-500 bg-green-100 dark:text-green-400 dark:bg-green-900/50 scheme-light scheme-dark scheme-light-dark"></div>
5704
5705<footer class="mt-24 bg-white border-t border-neutral-200 dark:bg-neutral-900 dark:border-neutral-700">
5706  <div class="max-w-5xl mx-auto w-full pb-8 pt-10 lg:pt-20 px-4 sm:px-6 lg:px-8">
5707
5708    <!-- Grid -->
5709    <div class="flex flex-col justify-between md:flex-row gap-5 mb-14">
5710
5711      <div>
5712        <h4 class="mb-3 font-medium text-sm text-neutral-800 dark:text-neutral-200">Popular Components</h4>
5713
5714        <ul class="grid space-y-2">
5715          <li><a class="text-sm text-neutral-500 underline-offset-4 hover:underline hover:text-neutral-800 focus:outline-hidden focus:underline focus:text-neutral-800 dark:text-neutral-400 dark:hover:text-neutral-200 dark:focus:text-neutral-200" href="/docs/combobox">Combobox</a></li>
5716          <li><a class="text-sm text-neutral-500 underline-offset-4 hover:underline hover:text-neutral-800 focus:outline-hidden focus:underline focus:text-neutral-800 dark:text-neutral-400 dark:hover:text-neutral-200 dark:focus:text-neutral-200" href="/docs/toast">Toast</a></li>
5717          <li><a class="text-sm text-neutral-500 underline-offset-4 hover:underline hover:text-neutral-800 focus:outline-hidden focus:underline focus:text-neutral-800 dark:text-neutral-400 dark:hover:text-neutral-200 dark:focus:text-neutral-200" href="/docs/sidebar">Sidebar</a></li>
5718          <li><a class="text-sm text-neutral-500 underline-offset-4 hover:underline hover:text-neutral-800 focus:outline-hidden focus:underline focus:text-neutral-800 dark:text-neutral-400 dark:hover:text-neutral-200 dark:focus:text-neutral-200" href="/docs/datatable">Datatable</a></li>
5719        </ul>
5720      </div>
5721      <!-- End Col -->
5722
5723      <div>
5724        <h4 class="mb-3 font-medium text-sm text-neutral-800 dark:text-neutral-200">Company</h4>
5725
5726        <ul class="grid space-y-2">
5727          <li><a class="text-sm text-neutral-500 underline-offset-4 hover:underline hover:text-neutral-800 focus:outline-hidden focus:underline focus:text-neutral-800 dark:text-neutral-400 dark:hover:text-neutral-200 dark:focus:text-neutral-200" href="/changelog">Changelog</a></li>
5728            <li><a class="text-sm text-neutral-500 underline-offset-4 hover:underline hover:text-neutral-800 focus:outline-hidden focus:underline focus:text-neutral-800 dark:text-neutral-400 dark:hover:text-neutral-200 dark:focus:text-neutral-200" href="/themes">Themes</a></li>
5729          <li><a class="text-sm text-neutral-500 underline-offset-4 hover:underline hover:text-neutral-800 focus:outline-hidden focus:underline focus:text-neutral-800 dark:text-neutral-400 dark:hover:text-neutral-200 dark:focus:text-neutral-200" target="_blank" href="https://railsblocks.featurebase.app/roadmap">Roadmap</a></li>
5730          <li><a class="text-sm text-neutral-500 underline-offset-4 hover:underline hover:text-neutral-800 focus:outline-hidden focus:underline focus:text-neutral-800 dark:text-neutral-400 dark:hover:text-neutral-200 dark:focus:text-neutral-200" href="/docs/authors-note">About</a></li>
5731          <li><a class="text-sm text-neutral-500 underline-offset-4 hover:underline hover:text-neutral-800 focus:outline-hidden focu
5731s:underline focus:text-neutral-800 dark:text-neutral-400 dark:hover:text-neutral-200 dark:focus:text-neutral-200" href="https://github.com/Rails-Blocks/components" target="_blank">Open Source</a></li>
5732          <li><a class="hidden text-sm text-neutral-500 underline-offset-4 hover:underline hover:text-neutral-800 focus:outline-hidden focus:underline focus:text-neutral-800 dark:text-neutral-400 dark:hover:text-neutral-200 dark:focus:text-neutral-200" href="/blog">Blog</a></li>
5733        </ul>
5734      </div>
5735      <!-- End Col -->
5736
5737      <div>
5738        <h4 class="mb-3 font-medium text-sm text-neutral-800 dark:text-neutral-200">Pricing</h4>
5739
5740        <ul class="grid space-y-2">
5741          <li><a class="text-sm text-neutral-500 underline-offset-4 hover:underline hover:text-neutral-800 focus:outline-hidden focus:underline focus:text-neutral-800 dark:text-neutral-400 dark:hover:text-neutral-200 dark:focus:text-neutral-200" href="/pro">Pro Access</a></li>
5742          <li><a class="text-sm text-neutral-500 underline-offset-4 hover:underline hover:text-neutral-800 focus:outline-hidden focus:underline focus:text-neutral-800 dark:text-neutral-400 dark:hover:text-neutral-200 dark:focus:text-neutral-200" href="/discount">Student Discount</a></li>
5743        </ul>
5744      </div>
5745      <!-- End Col -->
5746
5747      <div>
5748        <h4 class="mb-3 font-medium text-sm text-neutral-800 dark:text-neutral-200">Legal</h4>
5749
5750        <ul class="grid space-y-2">
5751          <li><a class="text-sm text-neutral-500 underline-offset-4 hover:underline hover:text-neutral-800 focus:outline-hidden focus:underline focus:text-neutral-800 dark:text-neutral-400 dark:hover:text-neutral-200 dark:focus:text-neutral-200" href="/terms">Terms</a></li>
5752          <li><a class="text-sm text-neutral-500 underline-offset-4 hover:underline hover:text-neutral-800 focus:outline-hidden focus:underline focus:text-neutral-800 dark:text-neutral-400 dark:hover:text-neutral-200 dark:focus:text-neutral-200" href="/privacy">Privacy</a></li>
5753          <li><a class="text-sm text-neutral-500 underline-offset-4 hover:underline hover:text-neutral-800 focus:outline-hidden focus:underline focus:text-neutral-800 dark:text-neutral-400 dark:hover:text-neutral-200 dark:focus:text-neutral-200" href="/license">License</a></li>
5754        </ul>
5755      </div>
5756      <!-- End Col -->
5757    </div>
5758
5759    <div class="mt-8 pt-8 border-t border-neutral-200 dark:border-neutral-800">
5760      <div class="flex flex-col md:flex-row-reverse md:justify-between md:items-center gap-6 items-center text-center md:text-left">
5761
5762        <nav class="flex flex-col sm:flex-row items-center gap-3">
5763          <div class="flex items-center">
5764            <div class="text-sm group relative bg-neutral-50 text-neutral-700 border border-neutral-200 px-2.5 py-1.5 rounded-md dark:bg-neutral-800 dark:border-neutral-700 dark:text-neutral-100">
5765              <div class="absolute w-full pr-8 pointer-events-none opacity-0 group-hover:opacity-100 transition duration-300 ease-in-out transform -translate-y-6 group-hover:-translate-y-8">
5766                <img class="rounded-full mx-auto size-8" alt="Sandu" src="/assets/founder-avatar-da341a93ca736fdd7217be943b75af4bdf1bf0c14ee149b5f11324eb98a5c6dc.webp" />
5767              </div>
5768              Built by
5769              <a href="https://alexglv.com" target="_blank" class="text-neutral-700 hover:opacity-80 transition font-semibold dark:text-neutral-50 hover:text-neutral-800 dark:hover:text-neutral-50">
5770                Sandu
5771              </a>
5772              in Paris 🥐
5773            </div>
5774          </div>
5775
5776          <div class="flex items-center gap-3">
5777            <a href="https://x.com/alexandruglv" target="_blank" data-controller="tooltip" data-tooltip-animation-value="fade origin" data-tooltip-content="Go to my 𝕏 account" data-tooltip-delay-value="500" class="text-neutral-400 hover:text-neutral-800 dark:hover:text-white" aria-label="Follow Sandu on X (formerly Twitter)">
5778              <span class="sr-only">Follow Sandu on X (formerly Twitter)</span>
5779              <svg class="inline-block size-5 pb-0.5" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 16 16" aria-hidden="true">
5780                <path d="M12.6.75h2.454l-5.36 6.142L16 15.25h-4.937l-3.867-5.07-4.425 5.07H.316l5.733-6.57L0 .75h5.063l3.495 4.633L12.601.75Zm-.86 13.028h1.36L4.323 2.145H2.865l8.875 11.633Z">
5781              </svg>
5782            </a>
5783            <a href="https://www.youtube.com/channel/UCNRPTZcDwaEkoPQsLURm6WQ" data-controller="tooltip" data-tooltip-animation-value="fade origin" data-tooltip-content="Go to my YouTube channel" data-tooltip-delay-value="500" target="_blank" class="text-neutral-400 hover:text-neutral-800 dark:hover:text-white" aria-label="Follow Sandu on YouTube">
5784              <span class="sr-only">Follow Sandu on YouTube</span>
5785              <svg xmlns="http://www.w3.org/2000/svg" class="size-6 pb-0.5" width="18" height="18" viewBox="0 0 18 18"><g fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" stroke="currentColor"><path d="M11.652,8.568l-3.651-2.129c-.333-.194-.752,.046-.752,.432v4.259c0,.386,.419,.626,.752,.432l3.651-2.129c.331-.193,.331-.671,0-.864Z"></path><circle cx="9" cy="9" r="7.25"></circle></g></svg>
5786            </a>
5787            <a class="text-neutral-400 hover:text-neutral-800 dark:hover:text-white" data-controller="tooltip" data-tooltip-animation-value="fade origin" data-tooltip-content="Send me an email" data-tooltip-delay-value="500" href="mailto:[email protected]" aria-label="Send me an email">
5788              <span class="sr-only">Send me an email</span>
5789              <svg xmlns="http://www.w3.org/2000/svg" class="size-6 pb-0.5" width="18" height="18" viewBox="0 0 18 18"><g fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" stroke="currentColor"><path d="M1.75,5.75l6.767,3.733c.301,.166,.665,.166,.966,0l6.767-3.733"></path><rect x="1.75" y="3.25" width="14.5" height="11.5" rx="2" ry="2" transform="translate(18 18) rotate(180)"></rect></g></svg>
5790            </a>
5791            <a href="/feeds/documentation.xml" target="_blank" data-controller="tooltip" data-tooltip-animation-value="fade origin" data-tooltip-content="Subscribe to RSS feed" data-tooltip-delay-value="500" class="text-neutral-400 hover:text-neutral-800 dark:hover:text-white" aria-label="RSS Feed">
5792              <span class="sr-only">RSS Feed</span>
5793              <svg xmlns="http://www.w3.org/2000/svg" class="size-6 pb-0.5" width="18" height="18" viewBox="0 0 18 18"><g fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" stroke="currentColor"><path d="M3.5 3.5a11 11 0 0 1 11 11M3.5 7.5a7 7 0 0 1 7 7M4.5 13.5a1 1 0 1 0 0 2 1 1 0 0 0 0-2z"></path></g></svg>
5794            </a>
5795          </div>
5796        </nav>
5797
5798        <div class="text-sm text-neutral-600 dark:text-neutral-400">
5799          © 2026 Rails Blocks
5800        </div>
5801      </div>
5802    </div>
5803    <!-- End Grid -->
5804  </div>
5805</footer>
5806
5807  
5807<script type="module" src="https://static.cloudflareinsights.com/beacon.min.js/v31edd6df95cf4e85bb4c19e7a9bdbcba1788362987495" integrity="sha512-iIg7k2xntmwu6/uSb5tpc/hySgZc4eoL31yB29W6tJFo2akwjPWcEqnCEdJvGexCL0KEQwVYv5BlowfhVz26hg==" data-cf-beacon='{"version":"2024.11.0","token":"dd73a264958e4d48a84300a88963d377","r":1,"spa":2}' crossorigin="anonymous"></script>
5807
5808</body>
5809</html>

Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.