diff --git a/.gitignore b/.gitignore
index 7d56cb7..313f539 100644
--- a/.gitignore
+++ b/.gitignore
@@ -8,6 +8,7 @@ tmp
 
 # dependencies
 node_modules
+example/node_modules/
 
 # Fix for issue when working on the repo in a dev container
 .pnpm-store
diff --git a/example/index.html b/example/index.html
index 886361a..15ed68d 100644
--- a/example/index.html
+++ b/example/index.html
@@ -2,114 +2,63 @@
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
-    <meta
-      name="viewport"
-      content="width=device-width, initial-scale=1.0" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>SortableTS Examples</title>
-    <link
-      rel="stylesheet"
-      href="./src/output.css" />
-    <link
-      rel="stylesheet"
-      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css" />
+    <link rel="stylesheet" href="./src/output.css" />
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css" />
     <script src="/dist/sortablets.js"></script>
   </head>
-  <body class="bg-gray-50 min-h-screen">
-    <a
-      href="https://github.com/SortableJS/Sortable"
-      class="fixed top-0 right-0 z-50">
-      <img
-        src="https://github.blog/wp-content/uploads/2008/12/forkme_right_darkblue_121621.png"
-        alt="Fork me on GitHub"
-        class="w-32" />
+  <body class="bg-gray-50 dark:bg-gray-800 min-h-screen">
+    <a href="https://github.com/SortableJS/Sortable" class="fixed top-0 right-0 z-50">
+      <img src="https://github.blog/wp-content/uploads/2008/12/forkme_right_darkblue_121621.png" alt="Fork me on GitHub" class="w-32" />
     </a>
 
     <div class="container max-w-[960px] mx-auto px-4 py-8">
       <!-- Header -->
       <div class="text-center mb-12">
-        <h1 class="text-4xl font-bold text-gray-900 mb-4">SortableTS</h1>
-        <p class="text-xl text-gray-600 mb-8">TypeScript library for reorderable drag-and-drop lists</p>
+        <h1 class="text-4xl font-bold text-gray-900 dark:text-gray-200 mb-4">SortableTS</h1>
+        <p class="text-xl text-gray-600 dark:text-gray-300 mb-8">TypeScript library for reorderable drag-and-drop lists</p>
 
         <!-- Navigation -->
-        <nav class="bg-white rounded-[5px] shadow-sm p-6 max-w-2xl mx-auto">
+        <nav class="bg-white dark:bg-gray-900 rounded-[5px] shadow-sm p-6 max-w-2xl mx-auto">
           <div class="grid md:grid-cols-2 gap-8">
             <div>
-              <h3 class="font-semibold text-gray-900 mb-3">Features</h3>
+              <h3 class="font-semibold text-gray-900 dark:text-gray-200 mb-3">Features</h3>
               <ul class="space-y-2">
                 <li>
-                  <a
-                    href="#simple-list"
-                    class="text-blue-600 hover:text-blue-800"
-                    >Simple list</a
-                  >
+                  <a href="#simple-list" class="text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-300">Simple list</a>
                 </li>
                 <li>
-                  <a
-                    href="#shared-lists"
-                    class="text-blue-600 hover:text-blue-800"
-                    >Shared lists</a
-                  >
+                  <a href="#shared-lists" class="text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-300">Shared lists</a>
                 </li>
                 <li>
-                  <a
-                    href="#cloning"
-                    class="text-blue-600 hover:text-blue-800"
-                    >Cloning</a
-                  >
+                  <a href="#cloning" class="text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-300">Cloning</a>
                 </li>
                 <li>
-                  <a
-                    href="#sorting-disabled"
-                    class="text-blue-600 hover:text-blue-800"
-                    >Disable sorting</a
-                  >
+                  <a href="#sorting-disabled" class="text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-300">Disable sorting</a>
                 </li>
                 <li>
-                  <a
-                    href="#handle"
-                    class="text-blue-600 hover:text-blue-800"
-                    >Handles</a
-                  >
+                  <a href="#handle" class="text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-300">Handles</a>
                 </li>
                 <li>
-                  <a
-                    href="#filter"
-                    class="text-blue-600 hover:text-blue-800"
-                    >Filter</a
-                  >
+                  <a href="#filter" class="text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-300">Filter</a>
                 </li>
               </ul>
             </div>
             <div>
-              <h3 class="font-semibold text-gray-900 mb-3">Examples</h3>
+              <h3 class="font-semibold text-gray-900 dark:text-gray-200 mb-3">Examples</h3>
               <ul class="space-y-2">
                 <li>
-                  <a
-                    href="#grid"
-                    class="text-blue-600 hover:text-blue-800"
-                    >Grid</a
-                  >
+                  <a href="#grid" class="text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-300">Grid</a>
                 </li>
                 <li>
-                  <a
-                    href="#nested"
-                    class="text-blue-600 hover:text-blue-800"
-                    >Nested sortables</a
-                  >
+                  <a href="#nested" class="text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-300">Nested sortables</a>
                 </li>
                 <li>
-                  <a
-                    href="#multi-drag"
-                    class="text-blue-600 hover:text-blue-800"
-                    >MultiDrag</a
-                  >
+                  <a href="#multi-drag" class="text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-300">MultiDrag</a>
                 </li>
                 <li>
-                  <a
-                    href="#swap"
-                    class="text-blue-600 hover:text-blue-800"
-                    >Swap</a
-                  >
+                  <a href="#swap" class="text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-300">Swap</a>
                 </li>
               </ul>
             </div>
@@ -119,72 +68,62 @@ <h3 class="font-semibold text-gray-900 mb-3">Examples</h3>
       <!-- features -->
       <div>
         <!-- Simple List -->
-        <section
-          id="simple-list"
-          class="mb-12">
-          <div class="bg-white rounded-[8px] shadow-sm p-6">
-            <h2 class="text-2xl font-semibold text-gray-900 mb-4">Simple List</h2>
-            <div
-              id="example1"
-              class="rounded-[5px] overflow-hidden">
-              <div class="px-4 py-3 bg-gray-50 border-b-[1px] border-gray-200 cursor-move hover:bg-gray-100 transition-colors">Item 1</div>
-              <div class="px-4 py-3 bg-gray-50 border-b-[1px] border-gray-200 cursor-move hover:bg-gray-100 transition-colors">Item 2</div>
-              <div class="px-4 py-3 bg-gray-50 border-b-[1px] border-gray-200 cursor-move hover:bg-gray-100 transition-colors">Item 3</div>
-              <div class="px-4 py-3 bg-gray-50 border-b-[1px] border-gray-200 cursor-move hover:bg-gray-100 transition-colors">Item 4</div>
-              <div class="px-4 py-3 bg-gray-50 border-gray-200 cursor-move hover:bg-gray-100 transition-colors">Item 5</div>
+        <section id="simple-list" class="mb-12">
+          <div class="bg-white dark:bg-gray-900 rounded-[8px] shadow-sm p-6">
+            <h2 class="text-2xl font-semibold text-gray-900 dark:text-gray-200 mb-4">Simple List</h2>
+            <div id="example1" class="rounded-[5px] overflow-hidden">
+              <div class="px-4 py-3 bg-gray-50 dark:bg-gray-700 border-b-[1px] border-gray-200 dark:border-gray-600 cursor-move hover:bg-gray-100 dark:hover:bg-gray-600 transition-colors text-gray-900 dark:text-gray-200">Item 1</div>
+              <div class="px-4 py-3 bg-gray-50 dark:bg-gray-700 border-b-[1px] border-gray-200 dark:border-gray-600 cursor-move hover:bg-gray-100 dark:hover:bg-gray-600 transition-colors text-gray-900 dark:text-gray-200">Item 2</div>
+              <div class="px-4 py-3 bg-gray-50 dark:bg-gray-700 border-b-[1px] border-gray-200 dark:border-gray-600 cursor-move hover:bg-gray-100 dark:hover:bg-gray-600 transition-colors text-gray-900 dark:text-gray-200">Item 3</div>
+              <div class="px-4 py-3 bg-gray-50 dark:bg-gray-700 border-b-[1px] border-gray-200 dark:border-gray-600 cursor-move hover:bg-gray-100 dark:hover:bg-gray-600 transition-colors text-gray-900 dark:text-gray-200">Item 4</div>
+              <div class="px-4 py-3 bg-gray-50 dark:bg-gray-700 border-gray-200 dark:border-gray-600 cursor-move hover:bg-gray-100 dark:hover:bg-gray-600 transition-colors text-gray-900 dark:text-gray-200">Item 5</div>
             </div>
-            <div class="mt-4 py-4 px-8 border-l-[1px]">
-              <code class="">
-                <p class=""><span class="text-style_blue">new</span> <span class="text-style_class">Sortable</span><span class="text-slate-300">(</span>example1, <span class="text-slate-300">{</span></p>
-                <p class="ml-6">animation: <span class="text-style_num">150</span>,</p>
-                <p class="ml-6">previewClass: <span class="text-style_str">'opacity-50'</span></p>
-                <p class="text-slate-300">});</p>
+            <div class="mt-4 py-4 px-8 border-l-[1px] border-gray-200 dark:border-gray-600">
+              <code class="text-gray-900 dark:text-gray-200">
+                <p class=""><span class="text-style_blue dark:text-style_blue_dark">new</span> <span class="text-style_class dark:text-style_class_dark">Sortable</span><span class="text-slate-300 dark:text-slate-500">(</span>example1, <span class="text-slate-300 dark:text-slate-500">{</span></p>
+                <p class="ml-6">animation: <span class="text-style_num dark:text-style_num_dark">150</span>,</p>
+                <p class="ml-6">ghostClass: <span class="text-style_str dark:text-style_str_dark">'opacity-50'</span></p>
+                <p class="text-slate-300 dark:text-slate-500">});</p>
               </code>
             </div>
           </div>
         </section>
 
         <!-- Shared Lists -->
-        <section
-          id="shared-lists"
-          class="mb-12">
-          <div class="bg-white rounded-[8px] shadow-sm p-6">
-            <h2 class="text-2xl font-semibold text-gray-900 mb-4">Shared Lists</h2>
+        <section id="shared-lists" class="mb-12">
+          <div class="bg-white dark:bg-gray-900 rounded-[8px] shadow-sm p-6">
+            <h2 class="text-2xl font-semibold text-gray-900 dark:text-gray-200 mb-4">Shared Lists</h2>
             <div class="flex w-full justify-between items-start gap-3">
-              <div
-                id="example2-left"
-                class="rounded-[5px] w-full overflow-hidden">
-                <div class="px-4 py-3 bg-gray-50 border-b-[1px] border-gray-200 cursor-move hover:bg-gray-100 transition-colors">Item 1</div>
-                <div class="px-4 py-3 bg-gray-50 border-b-[1px] border-gray-200 cursor-move hover:bg-gray-100 transition-colors">Item 2</div>
-                <div class="px-4 py-3 bg-gray-50 border-b-[1px] border-gray-200 cursor-move hover:bg-gray-100 transition-colors">Item 3</div>
-                <div class="px-4 py-3 bg-gray-50 border-b-[1px] border-gray-200 cursor-move hover:bg-gray-100 transition-colors">Item 4</div>
-                <div class="px-4 py-3 bg-gray-50 border-gray-200 cursor-move hover:bg-gray-100 transition-colors">Item 5</div>
+              <div id="example2-left" class="rounded-[5px] w-full overflow-hidden">
+                <div class="px-4 py-3 bg-gray-50 dark:bg-gray-700 border-b-[1px] border-gray-200 dark:border-gray-600 cursor-move hover:bg-gray-100 dark:hover:bg-gray-600 transition-colors text-gray-900 dark:text-gray-200">Item 1</div>
+                <div class="px-4 py-3 bg-gray-50 dark:bg-gray-700 border-b-[1px] border-gray-200 dark:border-gray-600 cursor-move hover:bg-gray-100 dark:hover:bg-gray-600 transition-colors text-gray-900 dark:text-gray-200">Item 2</div>
+                <div class="px-4 py-3 bg-gray-50 dark:bg-gray-700 border-b-[1px] border-gray-200 dark:border-gray-600 cursor-move hover:bg-gray-100 dark:hover:bg-gray-600 transition-colors text-gray-900 dark:text-gray-200">Item 3</div>
+                <div class="px-4 py-3 bg-gray-50 dark:bg-gray-700 border-b-[1px] border-gray-200 dark:border-gray-600 cursor-move hover:bg-gray-100 dark:hover:bg-gray-600 transition-colors text-gray-900 dark:text-gray-200">Item 4</div>
+                <div class="px-4 py-3 bg-gray-50 dark:bg-gray-700 border-gray-200 dark:border-gray-600 cursor-move hover:bg-gray-100 dark:hover:bg-gray-600 transition-colors text-gray-900 dark:text-gray-200">Item 5</div>
               </div>
-              <div
-                id="example2-right"
-                class="rounded-[5px] w-full overflow-hidden">
-                <div class="px-4 py-3 bg-blue-50 border-b-[1px] border-blue-200 cursor-move hover:bg-blue-100 transition-colors">Item 6</div>
-                <div class="px-4 py-3 bg-blue-50 border-b-[1px] border-blue-200 cursor-move hover:bg-blue-100 transition-colors">Item 7</div>
-                <div class="px-4 py-3 bg-blue-50 border-b-[1px] border-blue-200 cursor-move hover:bg-blue-100 transition-colors">Item 8</div>
-                <div class="px-4 py-3 bg-blue-50 border-b-[1px] border-blue-200 cursor-move hover:bg-blue-100 transition-colors">Item 9</div>
-                <div class="px-4 py-3 bg-blue-50 border-blue-200 cursor-move hover:bg-blue-100 transition-colors">Item 10</div>
+              <div id="example2-right" class="rounded-[5px] w-full overflow-hidden">
+                <div class="px-4 py-3 bg-blue-50 dark:bg-blue-900 border-b-[1px] border-blue-200 dark:border-blue-600 cursor-move hover:bg-blue-100 dark:hover:bg-blue-600 transition-colors text-gray-900 dark:text-gray-200">Item 6</div>
+                <div class="px-4 py-3 bg-blue-50 dark:bg-blue-900 border-b-[1px] border-blue-200 dark:border-blue-600 cursor-move hover:bg-blue-100 dark:hover:bg-blue-600 transition-colors text-gray-900 dark:text-gray-200">Item 7</div>
+                <div class="px-4 py-3 bg-blue-50 dark:bg-blue-900 border-b-[1px] border-blue-200 dark:border-blue-600 cursor-move hover:bg-blue-100 dark:hover:bg-blue-600 transition-colors text-gray-900 dark:text-gray-200">Item 8</div>
+                <div class="px-4 py-3 bg-blue-50 dark:bg-blue-900 border-b-[1px] border-blue-200 dark:border-blue-600 cursor-move hover:bg-blue-100 dark:hover:bg-blue-600 transition-colors text-gray-900 dark:text-gray-200">Item 9</div>
+                <div class="px-4 py-3 bg-blue-50 dark:bg-blue-900 border-blue-200 dark:border-blue-600 cursor-move hover:bg-blue-100 dark:hover:bg-blue-600 transition-colors text-gray-900 dark:text-gray-200">Item 10</div>
               </div>
             </div>
-            <div class="mt-4 py-4 px-8 border-l-[1px]">
+            <div class="mt-4 py-4 px-8 border-l-[1px] border-gray-200 dark:border-gray-600">
               <div>
-                <code class="">
-                  <p class=""><span class="text-style_blue">new</span> <span class="text-style_class">Sortable</span><span class="text-slate-300">(</span>example2Left, <span class="text-slate-300">{</span></p>
-                  <p class="ml-6"><span class="text-style_blue">group</span>: <span class="text-style_str">'shared'</span>, <span class="text-style_comment">// set both lists to same group</span></p>
-                  <p class="ml-6">animation: <span class="text-style_num">150</span></p>
-                  <p class="text-slate-300">});</p>
+                <code class="text-gray-900 dark:text-gray-200">
+                  <p class=""><span class="text-style_blue dark:text-style_blue_dark">new</span> <span class="text-style_class dark:text-style_class_dark">Sortable</span><span class="text-slate-300 dark:text-slate-500">(</span>example2Left, <span class="text-slate-300 dark:text-slate-500">{</span></p>
+                  <p class="ml-6"><span class="text-style_blue dark:text-style_blue_dark">group</span>: <span class="text-style_str dark:text-style_str_dark">'shared'</span>, <span class="text-style_comment dark:text-style_comment_dark">// set both lists to same group</span></p>
+                  <p class="ml-6">animation: <span class="text-style_num dark:text-style_num_dark">150</span></p>
+                  <p class="text-slate-300 dark:text-slate-500">});</p>
                 </code>
               </div>
               <div class="mt-3">
-                <code c>
-                  <p class=""><span class="text-style_blue">new</span> <span class="text-style_class">Sortable</span><span class="text-slate-300">(</span>example2Right, <span class="text-slate-300">{</span></p>
-                  <p class="ml-6"><span class="text-style_blue">group</span>: <span class="text-style_str">'shared'</span>,</p>
-                  <p class="ml-6">animation: <span class="text-style_num">150</span></p>
-                  <p class="text-slate-300">});</p>
+                <code class="text-gray-900 dark:text-gray-200">
+                  <p class=""><span class="text-style_blue dark:text-style_blue_dark">new</span> <span class="text-style_class dark:text-style_class_dark">Sortable</span><span class="text-slate-300 dark:text-slate-500">(</span>example2Right, <span class="text-slate-300 dark:text-slate-500">{</span></p>
+                  <p class="ml-6"><span class="text-style_blue dark:text-style_blue_dark">group</span>: <span class="text-style_str dark:text-style_str_dark">'shared'</span>,</p>
+                  <p class="ml-6">animation: <span class="text-style_num dark:text-style_num_dark">150</span></p>
+                  <p class="text-slate-300 dark:text-slate-500">});</p>
                 </code>
               </div>
             </div>
@@ -192,57 +131,51 @@ <h2 class="text-2xl font-semibold text-gray-900 mb-4">Shared Lists</h2>
         </section>
 
         <!-- Cloning -->
-        <section
-          id="cloning"
-          class="mb-12">
-          <div class="bg-white rounded-[8px] shadow-sm p-6">
-            <h2 class="text-2xl mb-3 font-semibold text-gray-900">Cloning</h2>
-            <p class="mb-8 opacity-80">Try dragging from one list to another. The item you drag will be cloned and the clone will stay in the original list.</p>
+        <section id="cloning" class="mb-12">
+          <div class="bg-white dark:bg-gray-900 rounded-[8px] shadow-sm p-6">
+            <h2 class="text-2xl mb-3 font-semibold text-gray-900 dark:text-gray-200">Cloning</h2>
+            <p class="mb-8 text-gray-900 dark:text-gray-200 opacity-80">Try dragging from one list to another. The item you drag will be cloned and the clone will stay in the original list.</p>
             <div class="flex w-full justify-between items-start gap-3">
-              <div
-                id="example2-left"
-                class="rounded-[5px] w-full overflow-hidden">
-                <div class="px-4 py-3 bg-gray-50 border-b-[1px] border-gray-200 cursor-move hover:bg-gray-100 transition-colors">Item 1</div>
-                <div class="px-4 py-3 bg-gray-50 border-b-[1px] border-gray-200 cursor-move hover:bg-gray-100 transition-colors">Item 2</div>
-                <div class="px-4 py-3 bg-gray-50 border-b-[1px] border-gray-200 cursor-move hover:bg-gray-100 transition-colors">Item 3</div>
-                <div class="px-4 py-3 bg-gray-50 border-b-[1px] border-gray-200 cursor-move hover:bg-gray-100 transition-colors">Item 4</div>
-                <div class="px-4 py-3 bg-gray-50 border-gray-200 cursor-move hover:bg-gray-100 transition-colors">Item 5</div>
+              <div id="example2-left" class="rounded-[5px] w-full overflow-hidden">
+                <div class="px-4 py-3 bg-gray-50 dark:bg-gray-700 border-b-[1px] border-gray-200 dark:border-gray-600 cursor-move hover:bg-gray-100 dark:hover:bg-gray-600 transition-colors text-gray-900 dark:text-gray-200">Item 1</div>
+                <div class="px-4 py-3 bg-gray-50 dark:bg-gray-700 border-b-[1px] border-gray-200 dark:border-gray-600 cursor-move hover:bg-gray-100 dark:hover:bg-gray-600 transition-colors text-gray-900 dark:text-gray-200">Item 2</div>
+                <div class="px-4 py-3 bg-gray-50 dark:bg-gray-700 border-b-[1px] border-gray-200 dark:border-gray-600 cursor-move hover:bg-gray-100 dark:hover:bg-gray-600 transition-colors text-gray-900 dark:text-gray-200">Item 3</div>
+                <div class="px-4 py-3 bg-gray-50 dark:bg-gray-700 border-b-[1px] border-gray-200 dark:border-gray-600 cursor-move hover:bg-gray-100 dark:hover:bg-gray-600 transition-colors text-gray-900 dark:text-gray-200">Item 4</div>
+                <div class="px-4 py-3 bg-gray-50 dark:bg-gray-700 border-gray-200 dark:border-gray-600 cursor-move hover:bg-gray-100 dark:hover:bg-gray-600 transition-colors text-gray-900 dark:text-gray-200">Item 5</div>
               </div>
-              <div
-                id="example2-right"
-                class="rounded-[5px] w-full overflow-hidden">
-                <div class="px-4 py-3 bg-blue-50 border-b-[1px] border-blue-200 cursor-move hover:bg-blue-100 transition-colors">Item 6</div>
-                <div class="px-4 py-3 bg-blue-50 border-b-[1px] border-blue-200 cursor-move hover:bg-blue-100 transition-colors">Item 7</div>
-                <div class="px-4 py-3 bg-blue-50 border-b-[1px] border-blue-200 cursor-move hover:bg-blue-100 transition-colors">Item 8</div>
-                <div class="px-4 py-3 bg-blue-50 border-b-[1px] border-blue-200 cursor-move hover:bg-blue-100 transition-colors">Item 9</div>
-                <div class="px-4 py-3 bg-blue-50 border-blue-200 cursor-move hover:bg-blue-100 transition-colors">Item 10</div>
+              <div id="example2-right" class="rounded-[5px] w-full overflow-hidden">
+                <div class="px-4 py-3 bg-blue-50 dark:bg-blue-900 border-b-[1px] border-blue-200 dark:border-blue-600 cursor-move hover:bg-blue-100 dark:hover:bg-blue-600 transition-colors text-gray-900 dark:text-gray-200">Item 6</div>
+                <div class="px-4 py-3 bg-blue-50 dark:bg-blue-900 border-b-[1px] border-blue-200 dark:border-blue-600 cursor-move hover:bg-blue-100 dark:hover:bg-blue-600 transition-colors text-gray-900 dark:text-gray-200">Item 7</div>
+                <div class="px-4 py-3 bg-blue-50 dark:bg-blue-900 border-b-[1px] border-blue-200 dark:border-blue-600 cursor-move hover:bg-blue-100 dark:hover:bg-blue-600 transition-colors text-gray-900 dark:text-gray-200">Item 8</div>
+                <div class="px-4 py-3 bg-blue-50 dark:bg-blue-900 border-b-[1px] border-blue-200 dark:border-blue-600 cursor-move hover:bg-blue-100 dark:hover:bg-blue-600 transition-colors text-gray-900 dark:text-gray-200">Item 9</div>
+                <div class="px-4 py-3 bg-blue-50 dark:bg-blue-900 border-blue-200 dark:border-blue-600 cursor-move hover:bg-blue-100 dark:hover:bg-blue-600 transition-colors text-gray-900 dark:text-gray-200">Item 10</div>
               </div>
             </div>
-            <div class="mt-4 py-4 px-8 border-l-[1px]">
+            <div class="mt-4 py-4 px-8 border-l-[1px] border-gray-200 dark:border-gray-600">
               <div>
-                <code class="">
-                  <p class=""><span class="text-style_blue">new</span> <span class="text-style_class">Sortable</span><span class="text-slate-300">(</span>example3Left, <span class="text-slate-300">{</span></p>
+                <code class="text-gray-900 dark:text-gray-200">
+                  <p class=""><span class="text-style_blue dark:text-style_blue_dark">new</span> <span class="text-style_class dark:text-style_class_dark">Sortable</span><span class="text-slate-300 dark:text-slate-500">(</span>example3Left, <span class="text-slate-300 dark:text-slate-500">{</span></p>
                   <div class="ml-6">
-                    <span class="text-style_blue">group</span>: <span class="text-slate-300">{</span>
-                    <p class="ml-6">name: <span class="text-style_str">'shared'</span>,</p>
-                    <p class="ml-6">pull: <span class="text-style_str">'clone'</span> <span class="text-style_comment">// To clone: set pull to 'clone'</span></p>
-                    <p><span class="text-slate-300"> }</span>,</p>
+                    <span class="text-style_blue dark:text-style_blue_dark">group</span>: <span class="text-slate-300 dark:text-slate-500">{</span>
+                    <p class="ml-6">name: <span class="text-style_str dark:text-style_str_dark">'shared'</span>,</p>
+                    <p class="ml-6">pull: <span class="text-style_str dark:text-style_str_dark">'clone'</span> <span class="text-style_comment dark:text-style_comment_dark">// To clone: set pull to 'clone'</span></p>
+                    <p><span class="text-slate-300 dark:text-slate-500"> }</span>,</p>
                   </div>
-                  <p class="ml-6">animation: <span class="text-style_num">150</span></p>
-                  <p class="text-slate-300">});</p>
+                  <p class="ml-6">animation: <span class="text-style_num dark:text-style_num_dark">150</span></p>
+                  <p class="text-slate-300 dark:text-slate-500">});</p>
                 </code>
               </div>
               <div class="mt-3">
-                <code class="">
-                  <p class=""><span class="text-style_blue">new</span> <span class="text-style_class">Sortable</span><span class="text-slate-300">(</span>example3Right, <span class="text-slate-300">{</span></p>
+                <code class="text-gray-900 dark:text-gray-200">
+                  <p class=""><span class="text-style_blue dark:text-style_blue_dark">new</span> <span class="text-style_class dark:text-style_class_dark">Sortable</span><span class="text-slate-300 dark:text-slate-500">(</span>example3Right, <span class="text-slate-300 dark:text-slate-500">{</span></p>
                   <div class="ml-6">
-                    <span class="text-style_blue">group</span>: <span class="text-slate-300">{</span>
-                    <p class="ml-6">name: <span class="text-style_str">'shared'</span>,</p>
-                    <p class="ml-6">pull: <span class="text-style_str">'clone'</span></p>
-                    <p><span class="text-slate-300"> }</span>,</p>
+                    <span class="text-style_blue dark:text-style_blue_dark">group</span>: <span class="text-slate-300 dark:text-slate-500">{</span>
+                    <p class="ml-6">name: <span class="text-style_str dark:text-style_str_dark">'shared'</span>,</p>
+                    <p class="ml-6">pull: <span class="text-style_str dark:text-style_str_dark">'clone'</span></p>
+                    <p><span class="text-slate-300 dark:text-slate-500"> }</span>,</p>
                   </div>
-                  <p class="ml-6">animation: <span class="text-style_num">150</span></p>
-                  <p class="text-slate-300">});</p>
+                  <p class="ml-6">animation: <span class="text-style_num dark:text-style_num_dark">150</span></p>
+                  <p class="text-slate-300 dark:text-slate-500">});</p>
                 </code>
               </div>
             </div>
@@ -250,54 +183,48 @@ <h2 class="text-2xl mb-3 font-semibold text-gray-900">Cloning</h2>
         </section>
 
         <!-- Disable Sorting -->
-        <section
-          id="sorting-disabled"
-          class="mb-12">
-          <div class="bg-white rounded-[8px] shadow-sm p-6">
-            <h2 class="text-2xl mb-3 font-semibold text-gray-900">Disabling Sorting</h2>
-            <p class="mb-8 opacity-80">Try sorting the list on the left. It is not possible because it has it's sort option set to false. However, you can still drag from the list on the left to the list on the right.</p>
+        <section id="sorting-disabled" class="mb-12">
+          <div class="bg-white dark:bg-gray-900 rounded-[8px] shadow-sm p-6">
+            <h2 class="text-2xl mb-3 font-semibold text-gray-900 dark:text-gray-200">Disabling Sorting</h2>
+            <p class="mb-8 text-gray-900 dark:text-gray-200 opacity-80">Try sorting the list on the left. It is not possible because it has it's sort option set to false. However, you can still drag from the list on the left to the list on the right.</p>
             <div class="flex w-full justify-between items-start gap-3">
-              <div
-                id="example2-left"
-                class="rounded-[5px] w-full overflow-hidden">
-                <div class="px-4 py-3 bg-gray-50 border-b-[1px] border-gray-200 cursor-move hover:bg-gray-100 transition-colors">Item 1</div>
-                <div class="px-4 py-3 bg-gray-50 border-b-[1px] border-gray-200 cursor-move hover:bg-gray-100 transition-colors">Item 2</div>
-                <div class="px-4 py-3 bg-gray-50 border-b-[1px] border-gray-200 cursor-move hover:bg-gray-100 transition-colors">Item 3</div>
-                <div class="px-4 py-3 bg-gray-50 border-b-[1px] border-gray-200 cursor-move hover:bg-gray-100 transition-colors">Item 4</div>
-                <div class="px-4 py-3 bg-gray-50 border-gray-200 cursor-move hover:bg-gray-100 transition-colors">Item 5</div>
+              <div id="example2-left" class="rounded-[5px] w-full overflow-hidden">
+                <div class="px-4 py-3 bg-gray-50 dark:bg-gray-700 border-b-[1px] border-gray-200 dark:border-gray-600 cursor-move hover:bg-gray-100 dark:hover:bg-gray-600 transition-colors text-gray-900 dark:text-gray-200">Item 1</div>
+                <div class="px-4 py-3 bg-gray-50 dark:bg-gray-700 border-b-[1px] border-gray-200 dark:border-gray-600 cursor-move hover:bg-gray-100 dark:hover:bg-gray-600 transition-colors text-gray-900 dark:text-gray-200">Item 2</div>
+                <div class="px-4 py-3 bg-gray-50 dark:bg-gray-700 border-b-[1px] border-gray-200 dark:border-gray-600 cursor-move hover:bg-gray-100 dark:hover:bg-gray-600 transition-colors text-gray-900 dark:text-gray-200">Item 3</div>
+                <div class="px-4 py-3 bg-gray-50 dark:bg-gray-700 border-b-[1px] border-gray-200 dark:border-gray-600 cursor-move hover:bg-gray-100 dark:hover:bg-gray-600 transition-colors text-gray-900 dark:text-gray-200">Item 4</div>
+                <div class="px-4 py-3 bg-gray-50 dark:bg-gray-700 border-gray-200 dark:border-gray-600 cursor-move hover:bg-gray-100 dark:hover:bg-gray-600 transition-colors text-gray-900 dark:text-gray-200">Item 5</div>
               </div>
-              <div
-                id="example2-right"
-                class="rounded-[5px] w-full overflow-hidden">
-                <div class="px-4 py-3 bg-blue-50 border-b-[1px] border-blue-200 cursor-move hover:bg-blue-100 transition-colors">Item 6</div>
-                <div class="px-4 py-3 bg-blue-50 border-b-[1px] border-blue-200 cursor-move hover:bg-blue-100 transition-colors">Item 7</div>
-                <div class="px-4 py-3 bg-blue-50 border-b-[1px] border-blue-200 cursor-move hover:bg-blue-100 transition-colors">Item 8</div>
-                <div class="px-4 py-3 bg-blue-50 border-b-[1px] border-blue-200 cursor-move hover:bg-blue-100 transition-colors">Item 9</div>
-                <div class="px-4 py-3 bg-blue-50 border-blue-200 cursor-move hover:bg-blue-100 transition-colors">Item 10</div>
+              <div id="example2-right" class="rounded-[5px] w-full overflow-hidden">
+                <div class="px-4 py-3 bg-blue-50 dark:bg-blue-900 border-b-[1px] border-blue-200 dark:border-blue-600 cursor-move hover:bg-blue-100 dark:hover:bg-blue-600 transition-colors text-gray-900 dark:text-gray-200">Item 6</div>
+                <div class="px-4 py-3 bg-blue-50 dark:bg-blue-900 border-b-[1px] border-blue-200 dark:border-blue-600 cursor-move hover:bg-blue-100 dark:hover:bg-blue-600 transition-colors text-gray-900 dark:text-gray-200">Item 7</div>
+                <div class="px-4 py-3 bg-blue-50 dark:bg-blue-900 border-b-[1px] border-blue-200 dark:border-blue-600 cursor-move hover:bg-blue-100 dark:hover:bg-blue-600 transition-colors text-gray-900 dark:text-gray-200">Item 8</div>
+                <div class="px-4 py-3 bg-blue-50 dark:bg-blue-900 border-b-[1px] border-blue-200 dark:border-blue-600 cursor-move hover:bg-blue-100 dark:hover:bg-blue-600 transition-colors text-gray-900 dark:text-gray-200">Item 9</div>
+                <div class="px-4 py-3 bg-blue-50 dark:bg-blue-900 border-blue-200 dark:border-blue-600 cursor-move hover:bg-blue-100 dark:hover:bg-blue-600 transition-colors text-gray-900 dark:text-gray-200">Item 10</div>
               </div>
             </div>
-            <div class="mt-4 py-4 px-8 border-l-[1px]">
+            <div class="mt-4 py-4 px-8 border-l-[1px] border-gray-200 dark:border-gray-600">
               <div>
-                <code class="">
-                  <p class=""><span class="text-style_blue">new</span> <span class="text-style_class">Sortable</span><span class="text-slate-300">(</span>example4Left, <span class="text-slate-300">{</span></p>
+                <code class="text-gray-900 dark:text-gray-200">
+                  <p class=""><span class="text-style_blue dark:text-style_blue_dark">new</span> <span class="text-style_class dark:text-style_class_dark">Sortable</span><span class="text-slate-300 dark:text-slate-500">(</span>example4Left, <span class="text-slate-300 dark:text-slate-500">{</span></p>
                   <div class="ml-6">
-                    <span class="text-style_blue">group</span>: <span class="text-slate-300">{</span>
-                    <p class="ml-6">name: <span class="text-style_str">'shared'</span>,</p>
-                    <p class="ml-6">pull: <span class="text-style_str">'clone'</span></p>
-                    <p class="ml-6">put: <span class="text-style_blue">false</span> <span class="text-style_comment">// Do not allow items to be put into this list</span></p>
-                    <p><span class="text-slate-300"> }</span>,</p>
+                    <span class="text-style_blue dark:text-style_blue_dark">group</span>: <span class="text-slate-300 dark:text-slate-500">{</span>
+                    <p class="ml-6">name: <span class="text-style_str dark:text-style_str_dark">'shared'</span>,</p>
+                    <p class="ml-6">pull: <span class="text-style_str dark:text-style_str_dark">'clone'</span></p>
+                    <p class="ml-6">put: <span class="text-style_blue dark:text-style_blue_dark">false</span> <span class="text-style_comment dark:text-style_comment_dark">// Do not allow items to be put into this list</span></p>
+                    <p><span class="text-slate-300 dark:text-slate-500"> }</span>,</p>
                   </div>
-                  <p class="ml-6">animation: <span class="text-style_num">150</span>,</p>
-                  <p class="ml-6">sort: <span class="text-style_blue">false</span> <span class="text-style_comment">// To disable sorting: set sort to false</span></p>
-                  <p class="text-slate-300">});</p>
+                  <p class="ml-6">animation: <span class="text-style_num dark:text-style_num_dark">150</span>,</p>
+                  <p class="ml-6">sort: <span class="text-style_blue dark:text-style_blue_dark">false</span> <span class="text-style_comment dark:text-style_comment_dark">// To disable sorting: set sort to false</span></p>
+                  <p class="text-slate-300 dark:text-slate-500">});</p>
                 </code>
               </div>
               <div class="mt-3">
-                <code class="">
-                  <p class=""><span class="text-style_blue">new</span> <span class="text-style_class">Sortable</span><span class="text-slate-300">(</span>example4Right, <span class="text-slate-300">{</span></p>
-                  <p class="ml-6"><span class="text-style_blue">group</span>: <span class="text-style_str">'shared'</span>,</p>
-                  <p class="ml-6">animation: <span class="text-style_num">150</span></p>
-                  <p class="text-slate-300">});</p>
+                <code class="text-gray-900 dark:text-gray-200">
+                  <p class=""><span class="text-style_blue dark:text-style_blue_dark">new</span> <span class="text-style_class dark:text-style_class_dark">Sortable</span><span class="text-slate-300 dark:text-slate-500">(</span>example4Right, <span class="text-slate-300 dark:text-slate-500">{</span></p>
+                  <p class="ml-6"><span class="text-style_blue dark:text-style_blue_dark">group</span>: <span class="text-style_str dark:text-style_str_dark">'shared'</span>,</p>
+                  <p class="ml-6">animation: <span class="text-style_num dark:text-style_num_dark">150</span></p>
+                  <p class="text-slate-300 dark:text-slate-500">});</p>
                 </code>
               </div>
             </div>
@@ -305,69 +232,107 @@ <h2 class="text-2xl mb-3 font-semibold text-gray-900">Disabling Sorting</h2>
         </section>
 
         <!-- Handle Example -->
-        <section
-          id="handle"
-          class="mb-12">
-          <div class="bg-white rounded-[5px] shadow-sm p-6">
-            <h2 class="text-2xl font-semibold text-gray-900 mb-4">Handle</h2>
-            <div
-              id="example5"
-              class="rounded-[5px] overflow-hidden">
-              <div class="px-4 py-3 bg-gray-50 border-b-[1px] border-gray-200 flex items-center">
-                <i class="fa-solid fa-arrows-up-down-left-right handle mr-3 text-black cursor-move"></i>
-                <span>Item 1</span>
+        <section id="handle" class="mb-12">
+          <div class="bg-white dark:bg-gray-900 rounded-[5px] shadow-sm p-6">
+            <h2 class="text-2xl font-semibold text-gray-900 dark:text-gray-200 mb-4">Handle</h2>
+            <div id="example5" class="rounded-[5px] overflow-hidden">
+              <div class="px-4 py-3 bg-gray-50 dark:bg-gray-700 border-b-[1px] border-gray-200 dark:border-gray-600 flex items-center">
+                <i class="fa-solid fa-arrows-up-down-left-right handle mr-3 text-black dark:text-white cursor-move"></i>
+                <span class="text-gray-900 dark:text-gray-200">Item 1</span>
               </div>
-              <div class="px-4 py-3 bg-gray-50 border-b-[1px] border-gray-200 flex items-center">
-                <i class="fa-solid fa-arrows-up-down-left-right handle mr-3 text-black cursor-move"></i>
-                <span>Item 2</span>
+              <div class="px-4 py-3 bg-gray-50 dark:bg-gray-700 border-b-[1px] border-gray-200 dark:border-gray-600 flex items-center">
+                <i class="fa-solid fa-arrows-up-down-left-right handle mr-3 text-black dark:text-white cursor-move"></i>
+                <span class="text-gray-900 dark:text-gray-200">Item 2</span>
               </div>
-              <div class="px-4 py-3 bg-gray-50 border-b-[1px] border-gray-200 flex items-center">
-                <i class="fa-solid fa-arrows-up-down-left-right handle mr-3 text-black cursor-move"></i>
-                <span>Item 3</span>
+              <div class="px-4 py-3 bg-gray-50 dark:bg-gray-700 border-b-[1px] border-gray-200 dark:border-gray-600 flex items-center">
+                <i class="fa-solid fa-arrows-up-down-left-right handle mr-3 text-black dark:text-white cursor-move"></i>
+                <span class="text-gray-900 dark:text-gray-200">Item 3</span>
               </div>
-              <div class="px-4 py-3 bg-gray-50 border-b-[1px] border-gray-200 flex items-center">
-                <i class="fa-solid fa-arrows-up-down-left-right handle mr-3 text-black cursor-move"></i>
-                <span>Item 4</span>
+              <div class="px-4 py-3 bg-gray-50 dark:bg-gray-700 border-b-[1px] border-gray-200 dark:border-gray-600 flex items-center">
+                <i class="fa-solid fa-arrows-up-down-left-right handle mr-3 text-black dark:text-white cursor-move"></i>
+                <span class="text-gray-900 dark:text-gray-200">Item 4</span>
               </div>
-              <div class="px-4 py-3 bg-gray-50 border-b-[1px] border-gray-200 flex items-center">
-                <i class="fa-solid fa-arrows-up-down-left-right handle mr-3 text-black cursor-move"></i>
-                <span>Item 5</span>
+              <div class="px-4 py-3 bg-gray-50 dark:bg-gray-700 border-b-[1px] border-gray-200 dark:border-gray-600 flex items-center">
+                <i class="fa-solid fa-arrows-up-down-left-right handle mr-3 text-black dark:text-white cursor-move"></i>
+                <span class="text-gray-900 dark:text-gray-200">Item 5</span>
               </div>
             </div>
-            <div class="mt-4 py-4 px-8 border-l-[1px]">
-              <code class="">
-                <p class=""><span class="text-style_blue">new</span> <span class="text-style_class">Sortable</span><span class="text-slate-300">(</span>example5, <span class="text-slate-300">{</span></p>
-                <p class="ml-6">handle: <span class="text-style_str">'.handle'</span>, <span class="text-style_comment">// handle's class</span></p>
-                <p class="ml-6">animation: <span class="text-style_num">150</span></p>
-                <p class="text-slate-300">});</p>
+            <div class="mt-4 py-4 px-8 border-l-[1px] border-gray-200 dark:border-gray-600">
+              <code class="text-gray-900 dark:text-gray-200">
+                <p class=""><span class="text-style_blue dark:text-style_blue_dark">new</span> <span class="text-style_class dark:text-style_class_dark">Sortable</span><span class="text-slate-300 dark:text-slate-500">(</span>example5, <span class="text-slate-300 dark:text-slate-500">{</span></p>
+                <p class="ml-6">handle: <span class="text-style_str dark:text-style_str_dark">'.handle'</span>, <span class="text-style_comment dark:text-style_comment_dark">// handle's class</span></p>
+                <p class="ml-6">animation: <span class="text-style_num dark:text-style_num_dark">150</span></p>
+                <p class="text-slate-300 dark:text-slate-500">});</p>
               </code>
             </div>
           </div>
         </section>
 
         <!-- Filtered Example -->
-        <section
-          id="filter"
-          class="">
-          <div class="bg-white rounded-[8px] shadow-sm p-6">
-            <h2 class="text-2xl font-semibold text-gray-900 mb-3">Filter</h2>
-            <p class="mb-8 opacity-80">Try dragging the item with a red background. It cannot be done, because that item is filtered out using the filter option.</p>
-            <div
-              id="example5"
-              class="rounded-[5px] overflow-hidden">
-              <div class="px-4 py-3 bg-gray-50 border-b-[1px] border-gray-200 flex items-center">Item 1</div>
-              <div class="px-4 py-3 bg-gray-50 border-b-[1px] border-gray-200 flex items-center">Item 2</div>
-              <div class="px-4 py-3 bg-gray-50 border-b-[1px] border-gray-200 flex items-center">Item 3</div>
-              <div class="px-4 py-3 bg-red-600 border-b-[1px] border-gray-200 flex items-center">Filtered</div>
-              <div class="px-4 py-3 bg-gray-50 border-b-[1px] border-gray-200 flex items-center">Item 4</div>
-              <div class="px-4 py-3 bg-gray-50 border-b-[1px] border-gray-200 flex items-center">Item 5</div>
+        <section id="filter" class="">
+          <div class="bg-white dark:bg-gray-900 rounded-[8px] shadow-sm p-6">
+            <h2 class="text-2xl font-semibold text-gray-900 dark:text-gray-200 mb-3">Filter</h2>
+            <p class="mb-8 text-gray-900 dark:text-gray-200 opacity-80">Try dragging the item with a red background. It cannot be done, because that item is filtered out using the filter option.</p>
+            <div id="example5" class="rounded-[5px] overflow-hidden">
+              <div class="px-4 py-3 bg-gray-50 dark:bg-gray-700 border-b-[1px] border-gray-200 dark:border-gray-600 flex items-center text-gray-900 dark:text-gray-200">Item 1</div>
+              <div class="px-4 py-3 bg-gray-50 dark:bg-gray-700 border-b-[1px] border-gray-200 dark:border-gray-600 flex items-center text-gray-900 dark:text-gray-200">Item 2</div>
+              <div class="px-4 py-3 bg-gray-50 dark:bg-gray-700 border-b-[1px] border-gray-200 dark:border-gray-600 flex items-center text-gray-900 dark:text-gray-200">Item 3</div>
+              <div class="px-4 py-3 bg-red-600 dark:bg-red-900 border-b-[1px] border-gray-200 dark:border-gray-600 flex items-center text-gray-900 dark:text-gray-200">Filtered</div>
+              <div class="px-4 py-3 bg-gray-50 dark:bg-gray-700 border-b-[1px] border-gray-200 dark:border-gray-600 flex items-center text-gray-900 dark:text-gray-200">Item 4</div>
+              <div class="px-4 py-3 bg-gray-50 dark:bg-gray-700 border-b-[1px] border-gray-200 dark:border-gray-600 flex items-center text-gray-900 dark:text-gray-200">Item 5</div>
             </div>
-            <div class="mt-4 py-4 px-8 border-l-[1px]">
-              <code class="">
-                <p class=""><span class="text-style_blue">new</span> <span class="text-style_class">Sortable</span><span class="text-slate-300">(</span>example5, <span class="text-slate-300">{</span></p>
-                <p class="ml-6">handle: <span class="text-style_str">'.handle'</span>, <span class="text-style_comment">// handle's class</span></p>
-                <p class="ml-6">animation: <span class="text-style_num">150</span></p>
-                <p class="text-slate-300">});</p>
+            <div class="mt-4 py-4 px-8 border-l-[1px] border-gray-200 dark:border-gray-600">
+              <code class="text-gray-900 dark:text-gray-200">
+                <p class=""><span class="text-style_blue dark:text-style_blue_dark">new</span> <span class="text-style_class dark:text-style_class_dark">Sortable</span><span class="text-slate-300 dark:text-slate-500">(</span>example5, <span class="text-slate-300 dark:text-slate-500">{</span></p>
+                <p class="ml-6">handle: <span class="text-style_str dark:text-style_str_dark">'.handle'</span>, <span class="text-style_comment dark:text-style_comment_dark">// handle's class</span></p>
+                <p class="ml-6">animation: <span class="text-style_num dark:text-style_num_dark">150</span></p>
+                <p class="text-slate-300 dark:text-slate-500">});</p>
+              </code>
+            </div>
+          </div>
+        </section>
+
+        <!-- Threshold -->
+        <section id="threshold" class="">
+          <div class="bg-white dark:bg-gray-900 rounded-[8px] shadow-sm p-6">
+            <h2 class="text-2xl font-semibold text-gray-900 dark:text-gray-200 mb-3">Thresholds</h2>
+            <p class="mb-8 text-gray-900 dark:text-gray-200 opacity-80">Try modifying the inputs below to affect the swap thresholds. You can see the swap zones of the squares colored in dark blue, while the "dead zones" (that do not cause a swap) are colored in light blue.</p>
+            <div id="example5" class="rounded-[5px] bg-gray-100 dark:bg-gray-700 p-8 overflow-hidden">
+              <div class="flex gap-8">
+                <div class="px-4 py-3 h-[250px] justify-center text-4xl text-white w-[250px] bg-blue-500 dark:bg-blue-900 border-b-[1px] border-blue-200 dark:border-blue-600 flex items-center">1</div>
+                <div class="px-4 py-3 h-[250px] justify-center text-4xl text-white w-[250px] bg-blue-500 dark:bg-blue-900 border-b-[1px] border-gray-200 dark:border-gray-600 flex items-center">2</div>
+              </div>
+              <div class="mt-6">
+                <div class="flex mb-3 items-center gap-2 justify-start">
+                  <h3 class="w-[20%] text-sm text-gray-900 dark:text-gray-200">Swap Threshold</h3>
+                  <div class="h-5 w-[60%]">
+                    <input min="0" max="1" value="1" step="0.01" type="range" class="form-control-range w-full" id="example7SwapThresholdInput" />
+                  </div>
+                </div>
+                <div class="flex mb-3 items-center gap-2 justify-start">
+                  <h3 class="w-[20%] text-sm text-gray-900 dark:text-gray-200">Invert Swap</h3>
+                  <div class="h-5">
+                    <input type="checkbox" />
+                  </div>
+                </div>
+                <div class="flex mb-3 items-center gap-2 justify-start">
+                  <h3 class="w-[20%] text-sm text-gray-900 dark:text-gray-200">Direction</h3>
+                  <div class="h-8">
+                    <select name="" id="" class="w-[200px] h-8 focus:outline-0 border-[1px] text-gray-900 dark:text-gray-200 bg-white dark:bg-gray-800">
+                      <option value="" class="text-gray-900 dark:text-gray-200">Vertical</option>
+                      <option value="" class="text-gray-900 dark:text-gray-200">Horizontal</option>
+                    </select>
+                  </div>
+                </div>
+              </div>
+            </div>
+            <div class="mt-4 py-4 px-8 border-l-[1px] border-gray-200 dark:border-gray-600">
+              <code class="text-gray-900 dark:text-gray-200">
+                <p class=""><span class="text-style_blue dark:text-style_blue_dark">new</span> <span class="text-style_class dark:text-style_class_dark">Sortable</span><span class="text-slate-300 dark:text-slate-500">(</span>example7, <span class="text-slate-300 dark:text-slate-500">{</span></p>
+                <p class="ml-6">swapThreshold: <span class="text-style_num dark:text-style_num_dark">1</span>,</p>
+                <p class="ml-6">invertSwap: <span class="text-style_blue dark:text-style_blue_dark">true</span>,</p>
+                <p class="ml-6">animation: <span class="text-style_num dark:text-style_num_dark">150</span></p>
+                <p class="text-slate-300 dark:text-slate-500">});</p>
               </code>
             </div>
           </div>
@@ -376,103 +341,96 @@ <h2 class="text-2xl font-semibold text-gray-900 mb-3">Filter</h2>
 
       <!-- Examples -->
       <div class="mt-6">
-        <h3 class="text-3xl mb-6 pb-4 border-b-[1px]">Examples</h3>
+        <h3 class="text-3xl text-gray-900 dark:text-gray-200 mb-6 pb-4 border-b-[1px] border-gray-200 dark:border-gray-600">Examples</h3>
         <!-- Grid Example -->
-        <section
-          id="grid"
-          class="mb-12">
-          <div class="bg-white rounded-[5px] shadow-sm p-6">
-            <h2 class="text-2xl font-semibold text-gray-900 mb-4">Grid Example</h2>
-            <div
-              id="gridDemo"
-              class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-8 gap-4">
-              <div class="p-4 h-20 text-sm bg-gray-50 border border-gray-200 cursor-move hover:bg-gray-100 transition-colors text-center">Item 1</div>
-              <div class="p-4 h-20 text-sm bg-gray-50 border border-gray-200 cursor-move hover:bg-gray-100 transition-colors text-center">Item 2</div>
-              <div class="p-4 h-20 text-sm bg-gray-50 border border-gray-200 cursor-move hover:bg-gray-100 transition-colors text-center">Item 3</div>
-              <div class="p-4 h-20 text-sm bg-gray-50 border border-gray-200 cursor-move hover:bg-gray-100 transition-colors text-center">Item 4</div>
-              <div class="p-4 h-20 text-sm bg-gray-50 border border-gray-200 cursor-move hover:bg-gray-100 transition-colors text-center">Item 5</div>
-              <div class="p-4 h-20 text-sm bg-gray-50 border border-gray-200 cursor-move hover:bg-gray-100 transition-colors text-center">Item 6</div>
-              <div class="p-4 h-20 text-sm bg-gray-50 border border-gray-200 cursor-move hover:bg-gray-100 transition-colors text-center">Item 7</div>
-              <div class="p-4 h-20 text-sm bg-gray-50 border border-gray-200 cursor-move hover:bg-gray-100 transition-colors text-center">Item 8</div>
-              <div class="p-4 h-20 text-sm bg-gray-50 border border-gray-200 cursor-move hover:bg-gray-100 transition-colors text-center">Item 9</div>
-              <div class="p-4 h-20 text-sm bg-gray-50 border border-gray-200 cursor-move hover:bg-gray-100 transition-colors text-center">Item 10</div>
-              <div class="p-4 h-20 text-sm bg-gray-50 border border-gray-200 cursor-move hover:bg-gray-100 transition-colors text-center">Item 11</div>
-              <div class="p-4 h-20 text-sm bg-gray-50 border border-gray-200 cursor-move hover:bg-gray-100 transition-colors text-center">Item 12</div>
-              <div class="p-4 h-20 text-sm bg-gray-50 border border-gray-200 cursor-move hover:bg-gray-100 transition-colors text-center">Item 13</div>
-              <div class="p-4 h-20 text-sm bg-gray-50 border border-gray-200 cursor-move hover:bg-gray-100 transition-colors text-center">Item 14</div>
-              <div class="p-4 h-20 text-sm bg-gray-50 border border-gray-200 cursor-move hover:bg-gray-100 transition-colors text-center">Item 15</div>
-              <div class="p-4 h-20 text-sm bg-gray-50 border border-gray-200 cursor-move hover:bg-gray-100 transition-colors text-center">Item 16</div>
-              <div class="p-4 h-20 text-sm bg-gray-50 border border-gray-200 cursor-move hover:bg-gray-100 transition-colors text-center">Item 17</div>
-              <div class="p-4 h-20 text-sm bg-gray-50 border border-gray-200 cursor-move hover:bg-gray-100 transition-colors text-center">Item 18</div>
-              <div class="p-4 h-20 text-sm bg-gray-50 border border-gray-200 cursor-move hover:bg-gray-100 transition-colors text-center">Item 19</div>
-              <div class="p-4 h-20 text-sm bg-gray-50 border border-gray-200 cursor-move hover:bg-gray-100 transition-colors text-center">Item 20</div>
-              <div class="p-4 h-20 text-sm bg-gray-50 border border-gray-200 cursor-move hover:bg-gray-100 transition-colors text-center">Item 21</div>
-              <div class="p-4 h-20 text-sm bg-gray-50 border border-gray-200 cursor-move hover:bg-gray-100 transition-colors text-center">Item 22</div>
-              <div class="p-4 h-20 text-sm bg-gray-50 border border-gray-200 cursor-move hover:bg-gray-100 transition-colors text-center">Item 23</div>
-              <div class="p-4 h-20 text-sm bg-gray-50 border border-gray-200 cursor-move hover:bg-gray-100 transition-colors text-center">Item 24</div>
+        <section id="grid" class="mb-12">
+          <div class="bg-white dark:bg-gray-900 rounded-[5px] shadow-sm p-6">
+            <h2 class="text-2xl font-semibold text-gray-900 dark:text-gray-200 mb-4">Grid Example</h2>
+            <div id="gridDemo" class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-8 gap-4">
+              <div class="p-4 h-20 text-sm bg-gray-50 dark:bg-gray-700 border border-gray-200 dark:border-gray-600 cursor-move hover:bg-gray-100 dark:hover:bg-gray-600 transition-colors text-center text-gray-900 dark:text-gray-200">Item 1</div>
+              <div class="p-4 h-20 text-sm bg-gray-50 dark:bg-gray-700 border border-gray-200 dark:border-gray-600 cursor-move hover:bg-gray-100 dark:hover:bg-gray-600 transition-colors text-center text-gray-900 dark:text-gray-200">Item 2</div>
+              <div class="p-4 h-20 text-sm bg-gray-50 dark:bg-gray-700 border border-gray-200 dark:border-gray-600 cursor-move hover:bg-gray-100 dark:hover:bg-gray-600 transition-colors text-center text-gray-900 dark:text-gray-200">Item 3</div>
+              <div class="p-4 h-20 text-sm bg-gray-50 dark:bg-gray-700 border border-gray-200 dark:border-gray-600 cursor-move hover:bg-gray-100 dark:hover:bg-gray-600 transition-colors text-center text-gray-900 dark:text-gray-200">Item 4</div>
+              <div class="p-4 h-20 text-sm bg-gray-50 dark:bg-gray-700 border border-gray-200 dark:border-gray-600 cursor-move hover:bg-gray-100 dark:hover:bg-gray-600 transition-colors text-center text-gray-900 dark:text-gray-200">Item 5</div>
+              <div class="p-4 h-20 text-sm bg-gray-50 dark:bg-gray-700 border border-gray-200 dark:border-gray-600 cursor-move hover:bg-gray-100 dark:hover:bg-gray-600 transition-colors text-center text-gray-900 dark:text-gray-200">Item 6</div>
+              <div class="p-4 h-20 text-sm bg-gray-50 dark:bg-gray-700 border border-gray-200 dark:border-gray-600 cursor-move hover:bg-gray-100 dark:hover:bg-gray-600 transition-colors text-center text-gray-900 dark:text-gray-200">Item 7</div>
+              <div class="p-4 h-20 text-sm bg-gray-50 dark:bg-gray-700 border border-gray-200 dark:border-gray-600 cursor-move hover:bg-gray-100 dark:hover:bg-gray-600 transition-colors text-center text-gray-900 dark:text-gray-200">Item 8</div>
+              <div class="p-4 h-20 text-sm bg-gray-50 dark:bg-gray-700 border border-gray-200 dark:border-gray-600 cursor-move hover:bg-gray-100 dark:hover:bg-gray-600 transition-colors text-center text-gray-900 dark:text-gray-200">Item 9</div>
+              <div class="p-4 h-20 text-sm bg-gray-50 dark:bg-gray-700 border border-gray-200 dark:border-gray-600 cursor-move hover:bg-gray-100 dark:hover:bg-gray-600 transition-colors text-center text-gray-900 dark:text-gray-200">Item 10</div>
+              <div class="p-4 h-20 text-sm bg-gray-50 dark:bg-gray-700 border border-gray-200 dark:border-gray-600 cursor-move hover:bg-gray-100 dark:hover:bg-gray-600 transition-colors text-center text-gray-900 dark:text-gray-200">Item 11</div>
+              <div class="p-4 h-20 text-sm bg-gray-50 dark:bg-gray-700 border border-gray-200 dark:border-gray-600 cursor-move hover:bg-gray-100 dark:hover:bg-gray-600 transition-colors text-center text-gray-900 dark:text-gray-200">Item 12</div>
+              <div class="p-4 h-20 text-sm bg-gray-50 dark:bg-gray-700 border border-gray-200 dark:border-gray-600 cursor-move hover:bg-gray-100 dark:hover:bg-gray-600 transition-colors text-center text-gray-900 dark:text-gray-200">Item 13</div>
+              <div class="p-4 h-20 text-sm bg-gray-50 dark:bg-gray-700 border border-gray-200 dark:border-gray-600 cursor-move hover:bg-gray-100 dark:hover:bg-gray-600 transition-colors text-center text-gray-900 dark:text-gray-200">Item 14</div>
+              <div class="p-4 h-20 text-sm bg-gray-50 dark:bg-gray-700 border border-gray-200 dark:border-gray-600 cursor-move hover:bg-gray-100 dark:hover:bg-gray-600 transition-colors text-center text-gray-900 dark:text-gray-200">Item 15</div>
+              <div class="p-4 h-20 text-sm bg-gray-50 dark:bg-gray-700 border border-gray-200 dark:border-gray-600 cursor-move hover:bg-gray-100 dark:hover:bg-gray-600 transition-colors text-center text-gray-900 dark:text-gray-200">Item 16</div>
+              <div class="p-4 h-20 text-sm bg-gray-50 dark:bg-gray-700 border border-gray-200 dark:border-gray-600 cursor-move hover:bg-gray-100 dark:hover:bg-gray-600 transition-colors text-center text-gray-900 dark:text-gray-200">Item 17</div>
+              <div class="p-4 h-20 text-sm bg-gray-50 dark:bg-gray-700 border border-gray-200 dark:border-gray-600 cursor-move hover:bg-gray-100 dark:hover:bg-gray-600 transition-colors text-center text-gray-900 dark:text-gray-200">Item 18</div>
+              <div class="p-4 h-20 text-sm bg-gray-50 dark:bg-gray-700 border border-gray-200 dark:border-gray-600 cursor-move hover:bg-gray-100 dark:hover:bg-gray-600 transition-colors text-center text-gray-900 dark:text-gray-200">Item 19</div>
+              <div class="p-4 h-20 text-sm bg-gray-50 dark:bg-gray-700 border border-gray-200 dark:border-gray-600 cursor-move hover:bg-gray-100 dark:hover:bg-gray-600 transition-colors text-center text-gray-900 dark:text-gray-200">Item 20</div>
+              <div class="p-4 h-20 text-sm bg-gray-50 dark:bg-gray-700 border border-gray-200 dark:border-gray-600 cursor-move hover:bg-gray-100 dark:hover:bg-gray-600 transition-colors text-center text-gray-900 dark:text-gray-200">Item 21</div>
+              <div class="p-4 h-20 text-sm bg-gray-50 dark:bg-gray-700 border border-gray-200 dark:border-gray-600 cursor-move hover:bg-gray-100 dark:hover:bg-gray-600 transition-colors text-center text-gray-900 dark:text-gray-200">Item 22</div>
+              <div class="p-4 h-20 text-sm bg-gray-50 dark:bg-gray-700 border border-gray-200 dark:border-gray-600 cursor-move hover:bg-gray-100 dark:hover:bg-gray-600 transition-colors text-center text-gray-900 dark:text-gray-200">Item 23</div>
+              <div class="p-4 h-20 text-sm bg-gray-50 dark:bg-gray-700 border border-gray-200 dark:border-gray-600 cursor-move hover:bg-gray-100 dark:hover:bg-gray-600 transition-colors text-center text-gray-900 dark:text-gray-200">Item 24</div>
             </div>
           </div>
         </section>
         <!-- Nested Sortables -->
-        <section
-          id="nested"
-          class="mb-12">
-          <div class="bg-white rounded-[5px] shadow-sm p-6">
-            <h2 class="text-2xl font-semibold text-gray-900 mb-4">Nested Sortables</h2>
-            <p class="text-gray-600 mb-4">
-              NOTE: When using nested Sortables with animation, it is recommended that the fallbackOnBody option is set to true. It is also always recommended that either the invertSwap option is set to true, or the swapThreshold option is lower than the default value of 1 (eg 0.65).
+        <section id="nested" class="mb-12">
+          <div class="bg-white dark:bg-gray-900 rounded-[5px] shadow-sm p-6">
+            <h2 class="text-2xl font-semibold text-gray-900 dark:text-gray-200 mb-4">Nested Sortables</h2>
+            <p class="text-gray-600 dark:text-gray-300 text-sm mb-4">
+              NOTE: When using nested Sortables with animation, it is recommended that the <span class="text-style_class">fallbackOnBody</span> option is set to true. It is also always recommended that either the <span class="text-style_class">invertSwap</span> option is set to true, or the
+              <span class="text-style_class">swapThreshold</span> option is lower than the default value of 1 (eg <span class="text-style_class">0.65</span>).
             </p>
-            <div
-              id="nestedDemo"
-              class="space-y-1">
-              <div class="p-4 bg-gray-50 rounded-[5px] border border-gray-200">
-                <div class="font-medium mb-2">Item 1.1</div>
+            <div id="nestedDemo" class="space-y-1">
+              <div class="p-4 bg-gray-50 dark:bg-gray-700 rounded-[5px] border border-gray-200 dark:border-gray-600">
+                <div class="font-medium mb-2 text-gray-900 dark:text-gray-200">Item 1.1</div>
                 <div class="space-y-2">
-                  <div class="p-3 bg-blue-50 rounded border border-blue-200 cursor-move">Item 2.1</div>
-                  <div class="p-3 bg-blue-50 rounded px-4 border border-blue-200">
-                    <div class="font-medium mb-2">Item 2.2</div>
+                  <div class="p-3 bg-blue-50 dark:bg-blue-900 rounded border border-blue-200 dark:border-blue-600 cursor-move text-gray-900 dark:text-gray-200">Item 2.1</div>
+                  <div class="p-3 bg-blue-50 dark:bg-blue-900 rounded px-4 border border-blue-200 dark:border-blue-600 text-gray-900 dark:text-gray-200">
+                    <div class="font-medium mb-2 text-gray-900 dark:text-gray-200">Item 2.2</div>
                     <div class="space-y-2">
-                      <div class="p-2 bg-green-50 rounded border border-green-200 cursor-move">Item 3.1</div>
-                      <div class="p-2 bg-green-50 rounded border border-green-200 cursor-move">Item 3.2</div>
-                      <div class="p-2 bg-green-50 rounded border border-green-200 cursor-move">Item 3.3</div>
-                      <div class="p-2 bg-green-50 rounded border border-green-200 cursor-move">Item 3.4</div>
+                      <div class="p-2 bg-green-50 dark:bg-green-900 rounded border border-green-200 dark:border-green-600 cursor-move text-gray-900 dark:text-gray-200">Item 3.1</div>
+                      <div class="p-2 bg-green-50 dark:bg-green-900 rounded border border-green-200 dark:border-green-600 cursor-move text-gray-900 dark:text-gray-200">Item 3.2</div>
+                      <div class="p-2 bg-green-50 dark:bg-green-900 rounded border border-green-200 dark:border-green-600 cursor-move text-gray-900 dark:text-gray-200">Item 3.3</div>
+                      <div class="p-2 bg-green-50 dark:bg-green-900 rounded border border-green-200 dark:border-green-600 cursor-move text-gray-900 dark:text-gray-200">Item 3.4</div>
                     </div>
                   </div>
                 </div>
               </div>
-              <div class="p-4 bg-gray-50 rounded-[5px] border border-gray-200">
-                <div class="font-medium">Item 1.2</div>
+              <div class="p-4 bg-gray-50 dark:bg-gray-700 rounded-[5px] border border-gray-200 dark:border-gray-600">
+                <div class="font-medium text-gray-900 dark:text-gray-200">Item 1.2</div>
               </div>
-              <div class="p-4 bg-gray-50 rounded-[5px] border border-gray-200">
-                <div class="font-medium">Item 1.3</div>
+              <div class="p-4 bg-gray-50 dark:bg-gray-700 rounded-[5px] border border-gray-200 dark:border-gray-600">
+                <div class="font-medium text-gray-900 dark:text-gray-200">Item 1.3</div>
               </div>
-              <div class="p-4 bg-gray-50 rounded-[5px] border border-gray-200">
-                <div class="font-medium mb-2">Item 1.4</div>
+              <div class="p-4 bg-gray-50 dark:bg-gray-700 rounded-[5px] border border-gray-200 dark:border-gray-600">
+                <div class="font-medium mb-2 text-gray-900 dark:text-gray-200">Item 1.4</div>
                 <div class="space-y-2">
-                  <div class="p-3 bg-blue-50 rounded-[5px] border border-blue-200 cursor-move">Nested Item 2.1</div>
-                  <div class="p-3 bg-blue-50 rounded-[5px] border border-blue-200 cursor-move">Nested Item 2.2</div>
-                  <div class="p-3 bg-blue-50 rounded-[5px] border border-blue-200 cursor-move">Nested Item 2.3</div>
-                  <div class="p-3 bg-blue-50 rounded-[5px] border border-blue-200 cursor-move">Nested Item 2.4</div>
+                  <div class="p-3 bg-blue-50 dark:bg-blue-900 rounded-[5px] border border-blue-200 dark:border-blue-600 cursor-move text-gray-900 dark:text-gray-200">Nested Item 2.1</div>
+                  <div class="p-3 bg-blue-50 dark:bg-blue-900 rounded-[5px] border border-blue-200 dark:border-blue-600 cursor-move text-gray-900 dark:text-gray-200">Nested Item 2.2</div>
+                  <div class="p-3 bg-blue-50 dark:bg-blue-900 rounded-[5px] border border-blue-200 dark:border-blue-600 cursor-move text-gray-900 dark:text-gray-200">Nested Item 2.3</div>
+                  <div class="p-3 bg-blue-50 dark:bg-blue-900 rounded-[5px] border border-blue-200 dark:border-blue-600 cursor-move text-gray-900 dark:text-gray-200">Nested Item 2.4</div>
                 </div>
               </div>
             </div>
-            <div class="mt-4 py-4 px-8 border-l-[1px]">
+            <div class="mt-4 py-4 px-8 border-l-[1px] border-gray-200 dark:border-gray-600">
               <div>
-                <code class="">
-                  <p><span class="text-style_comment">// Loop through each nested sortable element</span></p>
+                <code class="text-gray-900 dark:text-gray-200">
+                  <p><span class="text-style_comment dark:text-style_comment_dark">// Loop through each nested sortable element</span></p>
                   <p class="">
-                    <span class="text-style_blue">for</span> <span class="text-slate-300">(</span>var i = <span class="text-style_num">0</span>; i <span class="text-gray-300">&lt;</span> nestedSortables.length; i++ <span class="text-slate-300">)</span> <span class="text-slate-300">{</span>
+                    <span class="text-style_blue dark:text-style_blue_dark">for</span> <span class="text-slate-300 dark:text-slate-500">(</span>var i = <span class="text-style_num dark:text-style_num_dark">0</span>; i <span class="text-gray-300 dark:text-gray-400">&lt;</span> nestedSortables.length; i++ <span class="text-slate-300 dark:text-slate-500">)</span> <span class="text-slate-300 dark:text-slate-500">{</span>
                   </p>
                   <div class="ml-6">
-                    <p><span class="text-style_blue">new </span> <span class="text-style_class">Sortable</span> <span class="text-gray-300">(</span>nestedSortables[i],<span class="text-slate-300"> {</span></p>
-                    <p class="ml-6">group: <span class="text-style_str">'nested'</span>,</p>
-                    <p class="ml-6">animation: <span class="text-style_num">150</span>,</p>
+                    <p><span class="text-style_blue dark:text-style_blue_dark">new </span> <span class="text-style_class dark:text-style_class_dark">Sortable</span> <span class="text-gray-300 dark:text-gray-400">(</span>nestedSortables[i],<span class="text-slate-300 dark:text-slate-500"> {</span></p>
+                    <p class="ml-6">group: <span class="text-style_str dark:text-style_str_dark">'nested'</span>,</p>
+                    <p class="ml-6">animation: <span class="text-style_num dark:text-style_num_dark">150</span>,</p>
 
-                    <p class="ml-6">fallbackOnBody: <span class="text-style_blue">true</span>,</p>
-                    <p class="ml-6">swapThreshold: <span class="text-style_num">0.89</span></p>
-                    <p><span class="text-slate-300"> });</span></p>
+                    <p class="ml-6">fallbackOnBody: <span class="text-style_blue dark:text-style_blue_dark">true</span>,</p>
+                    <p class="ml-6">swapThreshold: <span class="text-style_num dark:text-style_num_dark">0.89</span></p>
+                    <p><span class="text-slate-300 dark:text-slate-500"> });</span></p>
                   </div>
-                  <p class="text-slate-300">}</p>
+                  <p class="text-slate-300 dark:text-slate-500">}</p>
                 </code>
               </div>
             </div>
@@ -481,8 +439,7 @@ <h2 class="text-2xl font-semibold text-gray-900 mb-4">Nested Sortables</h2>
       </div>
     </div>
 
-    <script
-      type="module"
-      src="/src/main.ts"></script>
+    <script type="module" src="./dist/main.js"></script>
+
   </body>
 </html>
diff --git a/example/package-lock.json b/example/package-lock.json
new file mode 100644
index 0000000..1c18999
--- /dev/null
+++ b/example/package-lock.json
@@ -0,0 +1,2170 @@
+{
+    "name": "sortablets-examples",
+    "version": "1.0.0",
+    "lockfileVersion": 3,
+    "requires": true,
+    "packages": {
+        "": {
+            "name": "sortablets-examples",
+            "version": "1.0.0",
+            "devDependencies": {
+                "autoprefixer": "^10.4.17",
+                "postcss": "^8.4.35",
+                "tailwindcss": "^3.4.1",
+                "typescript": "^5.0.2",
+                "vite": "^4.4.5"
+            }
+        },
+        "node_modules/@alloc/quick-lru": {
+            "version": "5.2.0",
+            "resolved": "https://registry.npmjs.org/@alloc/quick-lru/-/quick-lru-5.2.0.tgz",
+            "integrity": "sha512-UrcABB+4bUrFABwbluTIBErXwvbsU/V7TZWfmbgJfbkwiBuziS9gxdODUyuiecfdGQ85jglMW6juS3+z5TsKLw==",
+            "dev": true,
+            "license": "MIT",
+            "engines": {
+                "node": ">=10"
+            },
+            "funding": {
+                "url": "https://github.com/sponsors/sindresorhus"
+            }
+        },
+        "node_modules/@esbuild/android-arm": {
+            "version": "0.18.20",
+            "resolved": "https://registry.npmjs.org/@esbuild/android-arm/-/android-arm-0.18.20.tgz",
+            "integrity": "sha512-fyi7TDI/ijKKNZTUJAQqiG5T7YjJXgnzkURqmGj13C6dCqckZBLdl4h7bkhHt/t0WP+zO9/zwroDvANaOqO5Sw==",
+            "cpu": [
+                "arm"
+            ],
+            "dev": true,
+            "license": "MIT",
+            "optional": true,
+            "os": [
+                "android"
+            ],
+            "engines": {
+                "node": ">=12"
+            }
+        },
+        "node_modules/@esbuild/android-arm64": {
+            "version": "0.18.20",
+            "resolved": "https://registry.npmjs.org/@esbuild/android-arm64/-/android-arm64-0.18.20.tgz",
+            "integrity": "sha512-Nz4rJcchGDtENV0eMKUNa6L12zz2zBDXuhj/Vjh18zGqB44Bi7MBMSXjgunJgjRhCmKOjnPuZp4Mb6OKqtMHLQ==",
+            "cpu": [
+                "arm64"
+            ],
+            "dev": true,
+            "license": "MIT",
+            "optional": true,
+            "os": [
+                "android"
+            ],
+            "engines": {
+                "node": ">=12"
+            }
+        },
+        "node_modules/@esbuild/android-x64": {
+            "version": "0.18.20",
+            "resolved": "https://registry.npmjs.org/@esbuild/android-x64/-/android-x64-0.18.20.tgz",
+            "integrity": "sha512-8GDdlePJA8D6zlZYJV/jnrRAi6rOiNaCC/JclcXpB+KIuvfBN4owLtgzY2bsxnx666XjJx2kDPUmnTtR8qKQUg==",
+            "cpu": [
+                "x64"
+            ],
+            "dev": true,
+            "license": "MIT",
+            "optional": true,
+            "os": [
+                "android"
+            ],
+            "engines": {
+                "node": ">=12"
+            }
+        },
+        "node_modules/@esbuild/darwin-arm64": {
+            "version": "0.18.20",
+            "resolved": "https://registry.npmjs.org/@esbuild/darwin-arm64/-/darwin-arm64-0.18.20.tgz",
+            "integrity": "sha512-bxRHW5kHU38zS2lPTPOyuyTm+S+eobPUnTNkdJEfAddYgEcll4xkT8DB9d2008DtTbl7uJag2HuE5NZAZgnNEA==",
+            "cpu": [
+                "arm64"
+            ],
+            "dev": true,
+            "license": "MIT",
+            "optional": true,
+            "os": [
+                "darwin"
+            ],
+            "engines": {
+                "node": ">=12"
+            }
+        },
+        "node_modules/@esbuild/darwin-x64": {
+            "version": "0.18.20",
+            "resolved": "https://registry.npmjs.org/@esbuild/darwin-x64/-/darwin-x64-0.18.20.tgz",
+            "integrity": "sha512-pc5gxlMDxzm513qPGbCbDukOdsGtKhfxD1zJKXjCCcU7ju50O7MeAZ8c4krSJcOIJGFR+qx21yMMVYwiQvyTyQ==",
+            "cpu": [
+                "x64"
+            ],
+            "dev": true,
+            "license": "MIT",
+            "optional": true,
+            "os": [
+                "darwin"
+            ],
+            "engines": {
+                "node": ">=12"
+            }
+        },
+        "node_modules/@esbuild/freebsd-arm64": {
+            "version": "0.18.20",
+            "resolved": "https://registry.npmjs.org/@esbuild/freebsd-arm64/-/freebsd-arm64-0.18.20.tgz",
+            "integrity": "sha512-yqDQHy4QHevpMAaxhhIwYPMv1NECwOvIpGCZkECn8w2WFHXjEwrBn3CeNIYsibZ/iZEUemj++M26W3cNR5h+Tw==",
+            "cpu": [
+                "arm64"
+            ],
+            "dev": true,
+            "license": "MIT",
+            "optional": true,
+            "os": [
+                "freebsd"
+            ],
+            "engines": {
+                "node": ">=12"
+            }
+        },
+        "node_modules/@esbuild/freebsd-x64": {
+            "version": "0.18.20",
+            "resolved": "https://registry.npmjs.org/@esbuild/freebsd-x64/-/freebsd-x64-0.18.20.tgz",
+            "integrity": "sha512-tgWRPPuQsd3RmBZwarGVHZQvtzfEBOreNuxEMKFcd5DaDn2PbBxfwLcj4+aenoh7ctXcbXmOQIn8HI6mCSw5MQ==",
+            "cpu": [
+                "x64"
+            ],
+            "dev": true,
+            "license": "MIT",
+            "optional": true,
+            "os": [
+                "freebsd"
+            ],
+            "engines": {
+                "node": ">=12"
+            }
+        },
+        "node_modules/@esbuild/linux-arm": {
+            "version": "0.18.20",
+            "resolved": "https://registry.npmjs.org/@esbuild/linux-arm/-/linux-arm-0.18.20.tgz",
+            "integrity": "sha512-/5bHkMWnq1EgKr1V+Ybz3s1hWXok7mDFUMQ4cG10AfW3wL02PSZi5kFpYKrptDsgb2WAJIvRcDm+qIvXf/apvg==",
+            "cpu": [
+                "arm"
+            ],
+            "dev": true,
+            "license": "MIT",
+            "optional": true,
+            "os": [
+                "linux"
+            ],
+            "engines": {
+                "node": ">=12"
+            }
+        },
+        "node_modules/@esbuild/linux-arm64": {
+            "version": "0.18.20",
+            "resolved": "https://registry.npmjs.org/@esbuild/linux-arm64/-/linux-arm64-0.18.20.tgz",
+            "integrity": "sha512-2YbscF+UL7SQAVIpnWvYwM+3LskyDmPhe31pE7/aoTMFKKzIc9lLbyGUpmmb8a8AixOL61sQ/mFh3jEjHYFvdA==",
+            "cpu": [
+                "arm64"
+            ],
+            "dev": true,
+            "license": "MIT",
+            "optional": true,
+            "os": [
+                "linux"
+            ],
+            "engines": {
+                "node": ">=12"
+            }
+        },
+        "node_modules/@esbuild/linux-ia32": {
+            "version": "0.18.20",
+            "resolved": "https://registry.npmjs.org/@esbuild/linux-ia32/-/linux-ia32-0.18.20.tgz",
+            "integrity": "sha512-P4etWwq6IsReT0E1KHU40bOnzMHoH73aXp96Fs8TIT6z9Hu8G6+0SHSw9i2isWrD2nbx2qo5yUqACgdfVGx7TA==",
+            "cpu": [
+                "ia32"
+            ],
+            "dev": true,
+            "license": "MIT",
+            "optional": true,
+            "os": [
+                "linux"
+            ],
+            "engines": {
+                "node": ">=12"
+            }
+        },
+        "node_modules/@esbuild/linux-loong64": {
+            "version": "0.18.20",
+            "resolved": "https://registry.npmjs.org/@esbuild/linux-loong64/-/linux-loong64-0.18.20.tgz",
+            "integrity": "sha512-nXW8nqBTrOpDLPgPY9uV+/1DjxoQ7DoB2N8eocyq8I9XuqJ7BiAMDMf9n1xZM9TgW0J8zrquIb/A7s3BJv7rjg==",
+            "cpu": [
+                "loong64"
+            ],
+            "dev": true,
+            "license": "MIT",
+            "optional": true,
+            "os": [
+                "linux"
+            ],
+            "engines": {
+                "node": ">=12"
+            }
+        },
+        "node_modules/@esbuild/linux-mips64el": {
+            "version": "0.18.20",
+            "resolved": "https://registry.npmjs.org/@esbuild/linux-mips64el/-/linux-mips64el-0.18.20.tgz",
+            "integrity": "sha512-d5NeaXZcHp8PzYy5VnXV3VSd2D328Zb+9dEq5HE6bw6+N86JVPExrA6O68OPwobntbNJ0pzCpUFZTo3w0GyetQ==",
+            "cpu": [
+                "mips64el"
+            ],
+            "dev": true,
+            "license": "MIT",
+            "optional": true,
+            "os": [
+                "linux"
+            ],
+            "engines": {
+                "node": ">=12"
+            }
+        },
+        "node_modules/@esbuild/linux-ppc64": {
+            "version": "0.18.20",
+            "resolved": "https://registry.npmjs.org/@esbuild/linux-ppc64/-/linux-ppc64-0.18.20.tgz",
+            "integrity": "sha512-WHPyeScRNcmANnLQkq6AfyXRFr5D6N2sKgkFo2FqguP44Nw2eyDlbTdZwd9GYk98DZG9QItIiTlFLHJHjxP3FA==",
+            "cpu": [
+                "ppc64"
+            ],
+            "dev": true,
+            "license": "MIT",
+            "optional": true,
+            "os": [
+                "linux"
+            ],
+            "engines": {
+                "node": ">=12"
+            }
+        },
+        "node_modules/@esbuild/linux-riscv64": {
+            "version": "0.18.20",
+            "resolved": "https://registry.npmjs.org/@esbuild/linux-riscv64/-/linux-riscv64-0.18.20.tgz",
+            "integrity": "sha512-WSxo6h5ecI5XH34KC7w5veNnKkju3zBRLEQNY7mv5mtBmrP/MjNBCAlsM2u5hDBlS3NGcTQpoBvRzqBcRtpq1A==",
+            "cpu": [
+                "riscv64"
+            ],
+            "dev": true,
+            "license": "MIT",
+            "optional": true,
+            "os": [
+                "linux"
+            ],
+            "engines": {
+                "node": ">=12"
+            }
+        },
+        "node_modules/@esbuild/linux-s390x": {
+            "version": "0.18.20",
+            "resolved": "https://registry.npmjs.org/@esbuild/linux-s390x/-/linux-s390x-0.18.20.tgz",
+            "integrity": "sha512-+8231GMs3mAEth6Ja1iK0a1sQ3ohfcpzpRLH8uuc5/KVDFneH6jtAJLFGafpzpMRO6DzJ6AvXKze9LfFMrIHVQ==",
+            "cpu": [
+                "s390x"
+            ],
+            "dev": true,
+            "license": "MIT",
+            "optional": true,
+            "os": [
+                "linux"
+            ],
+            "engines": {
+                "node": ">=12"
+            }
+        },
+        "node_modules/@esbuild/linux-x64": {
+            "version": "0.18.20",
+            "resolved": "https://registry.npmjs.org/@esbuild/linux-x64/-/linux-x64-0.18.20.tgz",
+            "integrity": "sha512-UYqiqemphJcNsFEskc73jQ7B9jgwjWrSayxawS6UVFZGWrAAtkzjxSqnoclCXxWtfwLdzU+vTpcNYhpn43uP1w==",
+            "cpu": [
+                "x64"
+            ],
+            "dev": true,
+            "license": "MIT",
+            "optional": true,
+            "os": [
+                "linux"
+            ],
+            "engines": {
+                "node": ">=12"
+            }
+        },
+        "node_modules/@esbuild/netbsd-x64": {
+            "version": "0.18.20",
+            "resolved": "https://registry.npmjs.org/@esbuild/netbsd-x64/-/netbsd-x64-0.18.20.tgz",
+            "integrity": "sha512-iO1c++VP6xUBUmltHZoMtCUdPlnPGdBom6IrO4gyKPFFVBKioIImVooR5I83nTew5UOYrk3gIJhbZh8X44y06A==",
+            "cpu": [
+                "x64"
+            ],
+            "dev": true,
+            "license": "MIT",
+            "optional": true,
+            "os": [
+                "netbsd"
+            ],
+            "engines": {
+                "node": ">=12"
+            }
+        },
+        "node_modules/@esbuild/openbsd-x64": {
+            "version": "0.18.20",
+            "resolved": "https://registry.npmjs.org/@esbuild/openbsd-x64/-/openbsd-x64-0.18.20.tgz",
+            "integrity": "sha512-e5e4YSsuQfX4cxcygw/UCPIEP6wbIL+se3sxPdCiMbFLBWu0eiZOJ7WoD+ptCLrmjZBK1Wk7I6D/I3NglUGOxg==",
+            "cpu": [
+                "x64"
+            ],
+            "dev": true,
+            "license": "MIT",
+            "optional": true,
+            "os": [
+                "openbsd"
+            ],
+            "engines": {
+                "node": ">=12"
+            }
+        },
+        "node_modules/@esbuild/sunos-x64": {
+            "version": "0.18.20",
+            "resolved": "https://registry.npmjs.org/@esbuild/sunos-x64/-/sunos-x64-0.18.20.tgz",
+            "integrity": "sha512-kDbFRFp0YpTQVVrqUd5FTYmWo45zGaXe0X8E1G/LKFC0v8x0vWrhOWSLITcCn63lmZIxfOMXtCfti/RxN/0wnQ==",
+            "cpu": [
+                "x64"
+            ],
+            "dev": true,
+            "license": "MIT",
+            "optional": true,
+            "os": [
+                "sunos"
+            ],
+            "engines": {
+                "node": ">=12"
+            }
+        },
+        "node_modules/@esbuild/win32-arm64": {
+            "version": "0.18.20",
+            "resolved": "https://registry.npmjs.org/@esbuild/win32-arm64/-/win32-arm64-0.18.20.tgz",
+            "integrity": "sha512-ddYFR6ItYgoaq4v4JmQQaAI5s7npztfV4Ag6NrhiaW0RrnOXqBkgwZLofVTlq1daVTQNhtI5oieTvkRPfZrePg==",
+            "cpu": [
+                "arm64"
+            ],
+            "dev": true,
+            "license": "MIT",
+            "optional": true,
+            "os": [
+                "win32"
+            ],
+            "engines": {
+                "node": ">=12"
+            }
+        },
+        "node_modules/@esbuild/win32-ia32": {
+            "version": "0.18.20",
+            "resolved": "https://registry.npmjs.org/@esbuild/win32-ia32/-/win32-ia32-0.18.20.tgz",
+            "integrity": "sha512-Wv7QBi3ID/rROT08SABTS7eV4hX26sVduqDOTe1MvGMjNd3EjOz4b7zeexIR62GTIEKrfJXKL9LFxTYgkyeu7g==",
+            "cpu": [
+                "ia32"
+            ],
+            "dev": true,
+            "license": "MIT",
+            "optional": true,
+            "os": [
+                "win32"
+            ],
+            "engines": {
+                "node": ">=12"
+            }
+        },
+        "node_modules/@esbuild/win32-x64": {
+            "version": "0.18.20",
+            "resolved": "https://registry.npmjs.org/@esbuild/win32-x64/-/win32-x64-0.18.20.tgz",
+            "integrity": "sha512-kTdfRcSiDfQca/y9QIkng02avJ+NCaQvrMejlsB3RRv5sE9rRoeBPISaZpKxHELzRxZyLvNts1P27W3wV+8geQ==",
+            "cpu": [
+                "x64"
+            ],
+            "dev": true,
+            "license": "MIT",
+            "optional": true,
+            "os": [
+                "win32"
+            ],
+            "engines": {
+                "node": ">=12"
+            }
+        },
+        "node_modules/@isaacs/cliui": {
+            "version": "8.0.2",
+            "resolved": "https://registry.npmjs.org/@isaacs/cliui/-/cliui-8.0.2.tgz",
+            "integrity": "sha512-O8jcjabXaleOG9DQ0+ARXWZBTfnP4WNAqzuiJK7ll44AmxGKv/J2M4TPjxjY3znBCfvBXFzucm1twdyFybFqEA==",
+            "dev": true,
+            "license": "ISC",
+            "dependencies": {
+                "string-width": "^5.1.2",
+                "string-width-cjs": "npm:string-width@^4.2.0",
+                "strip-ansi": "^7.0.1",
+                "strip-ansi-cjs": "npm:strip-ansi@^6.0.1",
+                "wrap-ansi": "^8.1.0",
+                "wrap-ansi-cjs": "npm:wrap-ansi@^7.0.0"
+            },
+            "engines": {
+                "node": ">=12"
+            }
+        },
+        "node_modules/@jridgewell/gen-mapping": {
+            "version": "0.3.8",
+            "resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.3.8.tgz",
+            "integrity": "sha512-imAbBGkb+ebQyxKgzv5Hu2nmROxoDOXHh80evxdoXNOrvAnVx7zimzc1Oo5h9RlfV4vPXaE2iM5pOFbvOCClWA==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "@jridgewell/set-array": "^1.2.1",
+                "@jridgewell/sourcemap-codec": "^1.4.10",
+                "@jridgewell/trace-mapping": "^0.3.24"
+            },
+            "engines": {
+                "node": ">=6.0.0"
+            }
+        },
+        "node_modules/@jridgewell/resolve-uri": {
+            "version": "3.1.2",
+            "resolved": "https://registry.npmjs.org/@jridgewell/resolve-uri/-/resolve-uri-3.1.2.tgz",
+            "integrity": "sha512-bRISgCIjP20/tbWSPWMEi54QVPRZExkuD9lJL+UIxUKtwVJA8wW1Trb1jMs1RFXo1CBTNZ/5hpC9QvmKWdopKw==",
+            "dev": true,
+            "license": "MIT",
+            "engines": {
+                "node": ">=6.0.0"
+            }
+        },
+        "node_modules/@jridgewell/set-array": {
+            "version": "1.2.1",
+            "resolved": "https://registry.npmjs.org/@jridgewell/set-array/-/set-array-1.2.1.tgz",
+            "integrity": "sha512-R8gLRTZeyp03ymzP/6Lil/28tGeGEzhx1q2k703KGWRAI1VdvPIXdG70VJc2pAMw3NA6JKL5hhFu1sJX0Mnn/A==",
+            "dev": true,
+            "license": "MIT",
+            "engines": {
+                "node": ">=6.0.0"
+            }
+        },
+        "node_modules/@jridgewell/sourcemap-codec": {
+            "version": "1.5.0",
+            "resolved": "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.5.0.tgz",
+            "integrity": "sha512-gv3ZRaISU3fjPAgNsriBRqGWQL6quFx04YMPW/zD8XMLsU32mhCCbfbO6KZFLjvYpCZ8zyDEgqsgf+PwPaM7GQ==",
+            "dev": true,
+            "license": "MIT"
+        },
+        "node_modules/@jridgewell/trace-mapping": {
+            "version": "0.3.25",
+            "resolved": "https://registry.npmjs.org/@jridgewell/trace-mapping/-/trace-mapping-0.3.25.tgz",
+            "integrity": "sha512-vNk6aEwybGtawWmy/PzwnGDOjCkLWSD2wqvjGGAgOAwCGWySYXfYoxt00IJkTF+8Lb57DwOb3Aa0o9CApepiYQ==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "@jridgewell/resolve-uri": "^3.1.0",
+                "@jridgewell/sourcemap-codec": "^1.4.14"
+            }
+        },
+        "node_modules/@nodelib/fs.scandir": {
+            "version": "2.1.5",
+            "resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz",
+            "integrity": "sha512-vq24Bq3ym5HEQm2NKCr3yXDwjc7vTsEThRDnkp2DK9p1uqLR+DHurm/NOTo0KG7HYHU7eppKZj3MyqYuMBf62g==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "@nodelib/fs.stat": "2.0.5",
+                "run-parallel": "^1.1.9"
+            },
+            "engines": {
+                "node": ">= 8"
+            }
+        },
+        "node_modules/@nodelib/fs.stat": {
+            "version": "2.0.5",
+            "resolved": "https://registry.npmjs.org/@nodelib/fs.stat/-/fs.stat-2.0.5.tgz",
+            "integrity": "sha512-RkhPPp2zrqDAQA/2jNhnztcPAlv64XdhIp7a7454A5ovI7Bukxgt7MX7udwAu3zg1DcpPU0rz3VV1SeaqvY4+A==",
+            "dev": true,
+            "license": "MIT",
+            "engines": {
+                "node": ">= 8"
+            }
+        },
+        "node_modules/@nodelib/fs.walk": {
+            "version": "1.2.8",
+            "resolved": "https://registry.npmjs.org/@nodelib/fs.walk/-/fs.walk-1.2.8.tgz",
+            "integrity": "sha512-oGB+UxlgWcgQkgwo8GcEGwemoTFt3FIO9ababBmaGwXIoBKZ+GTy0pP185beGg7Llih/NSHSV2XAs1lnznocSg==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "@nodelib/fs.scandir": "2.1.5",
+                "fastq": "^1.6.0"
+            },
+            "engines": {
+                "node": ">= 8"
+            }
+        },
+        "node_modules/@pkgjs/parseargs": {
+            "version": "0.11.0",
+            "resolved": "https://registry.npmjs.org/@pkgjs/parseargs/-/parseargs-0.11.0.tgz",
+            "integrity": "sha512-+1VkjdD0QBLPodGrJUeqarH8VAIvQODIbwh9XpP5Syisf7YoQgsJKPNFoqqLQlu+VQ/tVSshMR6loPMn8U+dPg==",
+            "dev": true,
+            "license": "MIT",
+            "optional": true,
+            "engines": {
+                "node": ">=14"
+            }
+        },
+        "node_modules/ansi-regex": {
+            "version": "6.1.0",
+            "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-6.1.0.tgz",
+            "integrity": "sha512-7HSX4QQb4CspciLpVFwyRe79O3xsIZDDLER21kERQ71oaPodF8jL725AgJMFAYbooIqolJoRLuM81SpeUkpkvA==",
+            "dev": true,
+            "license": "MIT",
+            "engines": {
+                "node": ">=12"
+            },
+            "funding": {
+                "url": "https://github.com/chalk/ansi-regex?sponsor=1"
+            }
+        },
+        "node_modules/ansi-styles": {
+            "version": "6.2.1",
+            "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-6.2.1.tgz",
+            "integrity": "sha512-bN798gFfQX+viw3R7yrGWRqnrN2oRkEkUjjl4JNn4E8GxxbjtG3FbrEIIY3l8/hrwUwIeCZvi4QuOTP4MErVug==",
+            "dev": true,
+            "license": "MIT",
+            "engines": {
+                "node": ">=12"
+            },
+            "funding": {
+                "url": "https://github.com/chalk/ansi-styles?sponsor=1"
+            }
+        },
+        "node_modules/any-promise": {
+            "version": "1.3.0",
+            "resolved": "https://registry.npmjs.org/any-promise/-/any-promise-1.3.0.tgz",
+            "integrity": "sha512-7UvmKalWRt1wgjL1RrGxoSJW/0QZFIegpeGvZG9kjp8vrRu55XTHbwnqq2GpXm9uLbcuhxm3IqX9OB4MZR1b2A==",
+            "dev": true,
+            "license": "MIT"
+        },
+        "node_modules/anymatch": {
+            "version": "3.1.3",
+            "resolved": "https://registry.npmjs.org/anymatch/-/anymatch-3.1.3.tgz",
+            "integrity": "sha512-KMReFUr0B4t+D+OBkjR3KYqvocp2XaSzO55UcB6mgQMd3KbcE+mWTyvVV7D/zsdEbNnV6acZUutkiHQXvTr1Rw==",
+            "dev": true,
+            "license": "ISC",
+            "dependencies": {
+                "normalize-path": "^3.0.0",
+                "picomatch": "^2.0.4"
+            },
+            "engines": {
+                "node": ">= 8"
+            }
+        },
+        "node_modules/arg": {
+            "version": "5.0.2",
+            "resolved": "https://registry.npmjs.org/arg/-/arg-5.0.2.tgz",
+            "integrity": "sha512-PYjyFOLKQ9y57JvQ6QLo8dAgNqswh8M1RMJYdQduT6xbWSgK36P/Z/v+p888pM69jMMfS8Xd8F6I1kQ/I9HUGg==",
+            "dev": true,
+            "license": "MIT"
+        },
+        "node_modules/autoprefixer": {
+            "version": "10.4.20",
+            "resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-10.4.20.tgz",
+            "integrity": "sha512-XY25y5xSv/wEoqzDyXXME4AFfkZI0P23z6Fs3YgymDnKJkCGOnkL0iTxCa85UTqaSgfcqyf3UA6+c7wUvx/16g==",
+            "dev": true,
+            "funding": [
+                {
+                    "type": "opencollective",
+                    "url": "https://opencollective.com/postcss/"
+                },
+                {
+                    "type": "tidelift",
+                    "url": "https://tidelift.com/funding/github/npm/autoprefixer"
+                },
+                {
+                    "type": "github",
+                    "url": "https://github.com/sponsors/ai"
+                }
+            ],
+            "license": "MIT",
+            "dependencies": {
+                "browserslist": "^4.23.3",
+                "caniuse-lite": "^1.0.30001646",
+                "fraction.js": "^4.3.7",
+                "normalize-range": "^0.1.2",
+                "picocolors": "^1.0.1",
+                "postcss-value-parser": "^4.2.0"
+            },
+            "bin": {
+                "autoprefixer": "bin/autoprefixer"
+            },
+            "engines": {
+                "node": "^10 || ^12 || >=14"
+            },
+            "peerDependencies": {
+                "postcss": "^8.1.0"
+            }
+        },
+        "node_modules/balanced-match": {
+            "version": "1.0.2",
+            "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.2.tgz",
+            "integrity": "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==",
+            "dev": true,
+            "license": "MIT"
+        },
+        "node_modules/binary-extensions": {
+            "version": "2.3.0",
+            "resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-2.3.0.tgz",
+            "integrity": "sha512-Ceh+7ox5qe7LJuLHoY0feh3pHuUDHAcRUeyL2VYghZwfpkNIy/+8Ocg0a3UuSoYzavmylwuLWQOf3hl0jjMMIw==",
+            "dev": true,
+            "license": "MIT",
+            "engines": {
+                "node": ">=8"
+            },
+            "funding": {
+                "url": "https://github.com/sponsors/sindresorhus"
+            }
+        },
+        "node_modules/brace-expansion": {
+            "version": "2.0.1",
+            "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-2.0.1.tgz",
+            "integrity": "sha512-XnAIvQ8eM+kC6aULx6wuQiwVsnzsi9d3WxzV3FpWTGA19F621kwdbsAcFKXgKUHZWsy+mY6iL1sHTxWEFCytDA==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "balanced-match": "^1.0.0"
+            }
+        },
+        "node_modules/braces": {
+            "version": "3.0.3",
+            "resolved": "https://registry.npmjs.org/braces/-/braces-3.0.3.tgz",
+            "integrity": "sha512-yQbXgO/OSZVD2IsiLlro+7Hf6Q18EJrKSEsdoMzKePKXct3gvD8oLcOQdIzGupr5Fj+EDe8gO/lxc1BzfMpxvA==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "fill-range": "^7.1.1"
+            },
+            "engines": {
+                "node": ">=8"
+            }
+        },
+        "node_modules/browserslist": {
+            "version": "4.24.4",
+            "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.24.4.tgz",
+            "integrity": "sha512-KDi1Ny1gSePi1vm0q4oxSF8b4DR44GF4BbmS2YdhPLOEqd8pDviZOGH/GsmRwoWJ2+5Lr085X7naowMwKHDG1A==",
+            "dev": true,
+            "funding": [
+                {
+                    "type": "opencollective",
+                    "url": "https://opencollective.com/browserslist"
+                },
+                {
+                    "type": "tidelift",
+                    "url": "https://tidelift.com/funding/github/npm/browserslist"
+                },
+                {
+                    "type": "github",
+                    "url": "https://github.com/sponsors/ai"
+                }
+            ],
+            "license": "MIT",
+            "dependencies": {
+                "caniuse-lite": "^1.0.30001688",
+                "electron-to-chromium": "^1.5.73",
+                "node-releases": "^2.0.19",
+                "update-browserslist-db": "^1.1.1"
+            },
+            "bin": {
+                "browserslist": "cli.js"
+            },
+            "engines": {
+                "node": "^6 || ^7 || ^8 || ^9 || ^10 || ^11 || ^12 || >=13.7"
+            }
+        },
+        "node_modules/camelcase-css": {
+            "version": "2.0.1",
+            "resolved": "https://registry.npmjs.org/camelcase-css/-/camelcase-css-2.0.1.tgz",
+            "integrity": "sha512-QOSvevhslijgYwRx6Rv7zKdMF8lbRmx+uQGx2+vDc+KI/eBnsy9kit5aj23AgGu3pa4t9AgwbnXWqS+iOY+2aA==",
+            "dev": true,
+            "license": "MIT",
+            "engines": {
+                "node": ">= 6"
+            }
+        },
+        "node_modules/caniuse-lite": {
+            "version": "1.0.30001699",
+            "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001699.tgz",
+            "integrity": "sha512-b+uH5BakXZ9Do9iK+CkDmctUSEqZl+SP056vc5usa0PL+ev5OHw003rZXcnjNDv3L8P5j6rwT6C0BPKSikW08w==",
+            "dev": true,
+            "funding": [
+                {
+                    "type": "opencollective",
+                    "url": "https://opencollective.com/browserslist"
+                },
+                {
+                    "type": "tidelift",
+                    "url": "https://tidelift.com/funding/github/npm/caniuse-lite"
+                },
+                {
+                    "type": "github",
+                    "url": "https://github.com/sponsors/ai"
+                }
+            ],
+            "license": "CC-BY-4.0"
+        },
+        "node_modules/chokidar": {
+            "version": "3.6.0",
+            "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.6.0.tgz",
+            "integrity": "sha512-7VT13fmjotKpGipCW9JEQAusEPE+Ei8nl6/g4FBAmIm0GOOLMua9NDDo/DWp0ZAxCr3cPq5ZpBqmPAQgDda2Pw==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "anymatch": "~3.1.2",
+                "braces": "~3.0.2",
+                "glob-parent": "~5.1.2",
+                "is-binary-path": "~2.1.0",
+                "is-glob": "~4.0.1",
+                "normalize-path": "~3.0.0",
+                "readdirp": "~3.6.0"
+            },
+            "engines": {
+                "node": ">= 8.10.0"
+            },
+            "funding": {
+                "url": "https://paulmillr.com/funding/"
+            },
+            "optionalDependencies": {
+                "fsevents": "~2.3.2"
+            }
+        },
+        "node_modules/chokidar/node_modules/glob-parent": {
+            "version": "5.1.2",
+            "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz",
+            "integrity": "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==",
+            "dev": true,
+            "license": "ISC",
+            "dependencies": {
+                "is-glob": "^4.0.1"
+            },
+            "engines": {
+                "node": ">= 6"
+            }
+        },
+        "node_modules/color-convert": {
+            "version": "2.0.1",
+            "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
+            "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "color-name": "~1.1.4"
+            },
+            "engines": {
+                "node": ">=7.0.0"
+            }
+        },
+        "node_modules/color-name": {
+            "version": "1.1.4",
+            "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
+            "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
+            "dev": true,
+            "license": "MIT"
+        },
+        "node_modules/commander": {
+            "version": "4.1.1",
+            "resolved": "https://registry.npmjs.org/commander/-/commander-4.1.1.tgz",
+            "integrity": "sha512-NOKm8xhkzAjzFx8B2v5OAHT+u5pRQc2UCa2Vq9jYL/31o2wi9mxBA7LIFs3sV5VSC49z6pEhfbMULvShKj26WA==",
+            "dev": true,
+            "license": "MIT",
+            "engines": {
+                "node": ">= 6"
+            }
+        },
+        "node_modules/cross-spawn": {
+            "version": "7.0.6",
+            "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.6.tgz",
+            "integrity": "sha512-uV2QOWP2nWzsy2aMp8aRibhi9dlzF5Hgh5SHaB9OiTGEyDTiJJyx0uy51QXdyWbtAHNua4XJzUKca3OzKUd3vA==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "path-key": "^3.1.0",
+                "shebang-command": "^2.0.0",
+                "which": "^2.0.1"
+            },
+            "engines": {
+                "node": ">= 8"
+            }
+        },
+        "node_modules/cssesc": {
+            "version": "3.0.0",
+            "resolved": "https://registry.npmjs.org/cssesc/-/cssesc-3.0.0.tgz",
+            "integrity": "sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg==",
+            "dev": true,
+            "license": "MIT",
+            "bin": {
+                "cssesc": "bin/cssesc"
+            },
+            "engines": {
+                "node": ">=4"
+            }
+        },
+        "node_modules/didyoumean": {
+            "version": "1.2.2",
+            "resolved": "https://registry.npmjs.org/didyoumean/-/didyoumean-1.2.2.tgz",
+            "integrity": "sha512-gxtyfqMg7GKyhQmb056K7M3xszy/myH8w+B4RT+QXBQsvAOdc3XymqDDPHx1BgPgsdAA5SIifona89YtRATDzw==",
+            "dev": true,
+            "license": "Apache-2.0"
+        },
+        "node_modules/dlv": {
+            "version": "1.1.3",
+            "resolved": "https://registry.npmjs.org/dlv/-/dlv-1.1.3.tgz",
+            "integrity": "sha512-+HlytyjlPKnIG8XuRG8WvmBP8xs8P71y+SKKS6ZXWoEgLuePxtDoUEiH7WkdePWrQ5JBpE6aoVqfZfJUQkjXwA==",
+            "dev": true,
+            "license": "MIT"
+        },
+        "node_modules/eastasianwidth": {
+            "version": "0.2.0",
+            "resolved": "https://registry.npmjs.org/eastasianwidth/-/eastasianwidth-0.2.0.tgz",
+            "integrity": "sha512-I88TYZWc9XiYHRQ4/3c5rjjfgkjhLyW2luGIheGERbNQ6OY7yTybanSpDXZa8y7VUP9YmDcYa+eyq4ca7iLqWA==",
+            "dev": true,
+            "license": "MIT"
+        },
+        "node_modules/electron-to-chromium": {
+            "version": "1.5.96",
+            "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.5.96.tgz",
+            "integrity": "sha512-8AJUW6dh75Fm/ny8+kZKJzI1pgoE8bKLZlzDU2W1ENd+DXKJrx7I7l9hb8UWR4ojlnb5OlixMt00QWiYJoVw1w==",
+            "dev": true,
+            "license": "ISC"
+        },
+        "node_modules/emoji-regex": {
+            "version": "9.2.2",
+            "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-9.2.2.tgz",
+            "integrity": "sha512-L18DaJsXSUk2+42pv8mLs5jJT2hqFkFE4j21wOmgbUqsZ2hL72NsUU785g9RXgo3s0ZNgVl42TiHp3ZtOv/Vyg==",
+            "dev": true,
+            "license": "MIT"
+        },
+        "node_modules/esbuild": {
+            "version": "0.18.20",
+            "resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.18.20.tgz",
+            "integrity": "sha512-ceqxoedUrcayh7Y7ZX6NdbbDzGROiyVBgC4PriJThBKSVPWnnFHZAkfI1lJT8QFkOwH4qOS2SJkS4wvpGl8BpA==",
+            "dev": true,
+            "hasInstallScript": true,
+            "license": "MIT",
+            "bin": {
+                "esbuild": "bin/esbuild"
+            },
+            "engines": {
+                "node": ">=12"
+            },
+            "optionalDependencies": {
+                "@esbuild/android-arm": "0.18.20",
+                "@esbuild/android-arm64": "0.18.20",
+                "@esbuild/android-x64": "0.18.20",
+                "@esbuild/darwin-arm64": "0.18.20",
+                "@esbuild/darwin-x64": "0.18.20",
+                "@esbuild/freebsd-arm64": "0.18.20",
+                "@esbuild/freebsd-x64": "0.18.20",
+                "@esbuild/linux-arm": "0.18.20",
+                "@esbuild/linux-arm64": "0.18.20",
+                "@esbuild/linux-ia32": "0.18.20",
+                "@esbuild/linux-loong64": "0.18.20",
+                "@esbuild/linux-mips64el": "0.18.20",
+                "@esbuild/linux-ppc64": "0.18.20",
+                "@esbuild/linux-riscv64": "0.18.20",
+                "@esbuild/linux-s390x": "0.18.20",
+                "@esbuild/linux-x64": "0.18.20",
+                "@esbuild/netbsd-x64": "0.18.20",
+                "@esbuild/openbsd-x64": "0.18.20",
+                "@esbuild/sunos-x64": "0.18.20",
+                "@esbuild/win32-arm64": "0.18.20",
+                "@esbuild/win32-ia32": "0.18.20",
+                "@esbuild/win32-x64": "0.18.20"
+            }
+        },
+        "node_modules/escalade": {
+            "version": "3.2.0",
+            "resolved": "https://registry.npmjs.org/escalade/-/escalade-3.2.0.tgz",
+            "integrity": "sha512-WUj2qlxaQtO4g6Pq5c29GTcWGDyd8itL8zTlipgECz3JesAiiOKotd8JU6otB3PACgG6xkJUyVhboMS+bje/jA==",
+            "dev": true,
+            "license": "MIT",
+            "engines": {
+                "node": ">=6"
+            }
+        },
+        "node_modules/fast-glob": {
+            "version": "3.3.3",
+            "resolved": "https://registry.npmjs.org/fast-glob/-/fast-glob-3.3.3.tgz",
+            "integrity": "sha512-7MptL8U0cqcFdzIzwOTHoilX9x5BrNqye7Z/LuC7kCMRio1EMSyqRK3BEAUD7sXRq4iT4AzTVuZdhgQ2TCvYLg==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "@nodelib/fs.stat": "^2.0.2",
+                "@nodelib/fs.walk": "^1.2.3",
+                "glob-parent": "^5.1.2",
+                "merge2": "^1.3.0",
+                "micromatch": "^4.0.8"
+            },
+            "engines": {
+                "node": ">=8.6.0"
+            }
+        },
+        "node_modules/fast-glob/node_modules/glob-parent": {
+            "version": "5.1.2",
+            "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz",
+            "integrity": "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==",
+            "dev": true,
+            "license": "ISC",
+            "dependencies": {
+                "is-glob": "^4.0.1"
+            },
+            "engines": {
+                "node": ">= 6"
+            }
+        },
+        "node_modules/fastq": {
+            "version": "1.19.0",
+            "resolved": "https://registry.npmjs.org/fastq/-/fastq-1.19.0.tgz",
+            "integrity": "sha512-7SFSRCNjBQIZH/xZR3iy5iQYR8aGBE0h3VG6/cwlbrpdciNYBMotQav8c1XI3HjHH+NikUpP53nPdlZSdWmFzA==",
+            "dev": true,
+            "license": "ISC",
+            "dependencies": {
+                "reusify": "^1.0.4"
+            }
+        },
+        "node_modules/fill-range": {
+            "version": "7.1.1",
+            "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.1.1.tgz",
+            "integrity": "sha512-YsGpe3WHLK8ZYi4tWDg2Jy3ebRz2rXowDxnld4bkQB00cc/1Zw9AWnC0i9ztDJitivtQvaI9KaLyKrc+hBW0yg==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "to-regex-range": "^5.0.1"
+            },
+            "engines": {
+                "node": ">=8"
+            }
+        },
+        "node_modules/foreground-child": {
+            "version": "3.3.0",
+            "resolved": "https://registry.npmjs.org/foreground-child/-/foreground-child-3.3.0.tgz",
+            "integrity": "sha512-Ld2g8rrAyMYFXBhEqMz8ZAHBi4J4uS1i/CxGMDnjyFWddMXLVcDp051DZfu+t7+ab7Wv6SMqpWmyFIj5UbfFvg==",
+            "dev": true,
+            "license": "ISC",
+            "dependencies": {
+                "cross-spawn": "^7.0.0",
+                "signal-exit": "^4.0.1"
+            },
+            "engines": {
+                "node": ">=14"
+            },
+            "funding": {
+                "url": "https://github.com/sponsors/isaacs"
+            }
+        },
+        "node_modules/fraction.js": {
+            "version": "4.3.7",
+            "resolved": "https://registry.npmjs.org/fraction.js/-/fraction.js-4.3.7.tgz",
+            "integrity": "sha512-ZsDfxO51wGAXREY55a7la9LScWpwv9RxIrYABrlvOFBlH/ShPnrtsXeuUIfXKKOVicNxQ+o8JTbJvjS4M89yew==",
+            "dev": true,
+            "license": "MIT",
+            "engines": {
+                "node": "*"
+            },
+            "funding": {
+                "type": "patreon",
+                "url": "https://github.com/sponsors/rawify"
+            }
+        },
+        "node_modules/fsevents": {
+            "version": "2.3.3",
+            "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.3.tgz",
+            "integrity": "sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==",
+            "dev": true,
+            "hasInstallScript": true,
+            "license": "MIT",
+            "optional": true,
+            "os": [
+                "darwin"
+            ],
+            "engines": {
+                "node": "^8.16.0 || ^10.6.0 || >=11.0.0"
+            }
+        },
+        "node_modules/function-bind": {
+            "version": "1.1.2",
+            "resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.2.tgz",
+            "integrity": "sha512-7XHNxH7qX9xG5mIwxkhumTox/MIRNcOgDrxWsMt2pAr23WHp6MrRlN7FBSFpCpr+oVO0F744iUgR82nJMfG2SA==",
+            "dev": true,
+            "license": "MIT",
+            "funding": {
+                "url": "https://github.com/sponsors/ljharb"
+            }
+        },
+        "node_modules/glob": {
+            "version": "10.4.5",
+            "resolved": "https://registry.npmjs.org/glob/-/glob-10.4.5.tgz",
+            "integrity": "sha512-7Bv8RF0k6xjo7d4A/PxYLbUCfb6c+Vpd2/mB2yRDlew7Jb5hEXiCD9ibfO7wpk8i4sevK6DFny9h7EYbM3/sHg==",
+            "dev": true,
+            "license": "ISC",
+            "dependencies": {
+                "foreground-child": "^3.1.0",
+                "jackspeak": "^3.1.2",
+                "minimatch": "^9.0.4",
+                "minipass": "^7.1.2",
+                "package-json-from-dist": "^1.0.0",
+                "path-scurry": "^1.11.1"
+            },
+            "bin": {
+                "glob": "dist/esm/bin.mjs"
+            },
+            "funding": {
+                "url": "https://github.com/sponsors/isaacs"
+            }
+        },
+        "node_modules/glob-parent": {
+            "version": "6.0.2",
+            "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-6.0.2.tgz",
+            "integrity": "sha512-XxwI8EOhVQgWp6iDL+3b0r86f4d6AX6zSU55HfB4ydCEuXLXc5FcYeOu+nnGftS4TEju/11rt4KJPTMgbfmv4A==",
+            "dev": true,
+            "license": "ISC",
+            "dependencies": {
+                "is-glob": "^4.0.3"
+            },
+            "engines": {
+                "node": ">=10.13.0"
+            }
+        },
+        "node_modules/hasown": {
+            "version": "2.0.2",
+            "resolved": "https://registry.npmjs.org/hasown/-/hasown-2.0.2.tgz",
+            "integrity": "sha512-0hJU9SCPvmMzIBdZFqNPXWa6dqh7WdH0cII9y+CyS8rG3nL48Bclra9HmKhVVUHyPWNH5Y7xDwAB7bfgSjkUMQ==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "function-bind": "^1.1.2"
+            },
+            "engines": {
+                "node": ">= 0.4"
+            }
+        },
+        "node_modules/is-binary-path": {
+            "version": "2.1.0",
+            "resolved": "https://registry.npmjs.org/is-binary-path/-/is-binary-path-2.1.0.tgz",
+            "integrity": "sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "binary-extensions": "^2.0.0"
+            },
+            "engines": {
+                "node": ">=8"
+            }
+        },
+        "node_modules/is-core-module": {
+            "version": "2.16.1",
+            "resolved": "https://registry.npmjs.org/is-core-module/-/is-core-module-2.16.1.tgz",
+            "integrity": "sha512-UfoeMA6fIJ8wTYFEUjelnaGI67v6+N7qXJEvQuIGa99l4xsCruSYOVSQ0uPANn4dAzm8lkYPaKLrrijLq7x23w==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "hasown": "^2.0.2"
+            },
+            "engines": {
+                "node": ">= 0.4"
+            },
+            "funding": {
+                "url": "https://github.com/sponsors/ljharb"
+            }
+        },
+        "node_modules/is-extglob": {
+            "version": "2.1.1",
+            "resolved": "https://registry.npmjs.org/is-extglob/-/is-extglob-2.1.1.tgz",
+            "integrity": "sha512-SbKbANkN603Vi4jEZv49LeVJMn4yGwsbzZworEoyEiutsN3nJYdbO36zfhGJ6QEDpOZIFkDtnq5JRxmvl3jsoQ==",
+            "dev": true,
+            "license": "MIT",
+            "engines": {
+                "node": ">=0.10.0"
+            }
+        },
+        "node_modules/is-fullwidth-code-point": {
+            "version": "3.0.0",
+            "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-3.0.0.tgz",
+            "integrity": "sha512-zymm5+u+sCsSWyD9qNaejV3DFvhCKclKdizYaJUuHA83RLjb7nSuGnddCHGv0hk+KY7BMAlsWeK4Ueg6EV6XQg==",
+            "dev": true,
+            "license": "MIT",
+            "engines": {
+                "node": ">=8"
+            }
+        },
+        "node_modules/is-glob": {
+            "version": "4.0.3",
+            "resolved": "https://registry.npmjs.org/is-glob/-/is-glob-4.0.3.tgz",
+            "integrity": "sha512-xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxhLSnrwRr4elSSg==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "is-extglob": "^2.1.1"
+            },
+            "engines": {
+                "node": ">=0.10.0"
+            }
+        },
+        "node_modules/is-number": {
+            "version": "7.0.0",
+            "resolved": "https://registry.npmjs.org/is-number/-/is-number-7.0.0.tgz",
+            "integrity": "sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==",
+            "dev": true,
+            "license": "MIT",
+            "engines": {
+                "node": ">=0.12.0"
+            }
+        },
+        "node_modules/isexe": {
+            "version": "2.0.0",
+            "resolved": "https://registry.npmjs.org/isexe/-/isexe-2.0.0.tgz",
+            "integrity": "sha512-RHxMLp9lnKHGHRng9QFhRCMbYAcVpn69smSGcq3f36xjgVVWThj4qqLbTLlq7Ssj8B+fIQ1EuCEGI2lKsyQeIw==",
+            "dev": true,
+            "license": "ISC"
+        },
+        "node_modules/jackspeak": {
+            "version": "3.4.3",
+            "resolved": "https://registry.npmjs.org/jackspeak/-/jackspeak-3.4.3.tgz",
+            "integrity": "sha512-OGlZQpz2yfahA/Rd1Y8Cd9SIEsqvXkLVoSw/cgwhnhFMDbsQFeZYoJJ7bIZBS9BcamUW96asq/npPWugM+RQBw==",
+            "dev": true,
+            "license": "BlueOak-1.0.0",
+            "dependencies": {
+                "@isaacs/cliui": "^8.0.2"
+            },
+            "funding": {
+                "url": "https://github.com/sponsors/isaacs"
+            },
+            "optionalDependencies": {
+                "@pkgjs/parseargs": "^0.11.0"
+            }
+        },
+        "node_modules/jiti": {
+            "version": "1.21.7",
+            "resolved": "https://registry.npmjs.org/jiti/-/jiti-1.21.7.tgz",
+            "integrity": "sha512-/imKNG4EbWNrVjoNC/1H5/9GFy+tqjGBHCaSsN+P2RnPqjsLmv6UD3Ej+Kj8nBWaRAwyk7kK5ZUc+OEatnTR3A==",
+            "dev": true,
+            "license": "MIT",
+            "bin": {
+                "jiti": "bin/jiti.js"
+            }
+        },
+        "node_modules/lilconfig": {
+            "version": "3.1.3",
+            "resolved": "https://registry.npmjs.org/lilconfig/-/lilconfig-3.1.3.tgz",
+            "integrity": "sha512-/vlFKAoH5Cgt3Ie+JLhRbwOsCQePABiU3tJ1egGvyQ+33R/vcwM2Zl2QR/LzjsBeItPt3oSVXapn+m4nQDvpzw==",
+            "dev": true,
+            "license": "MIT",
+            "engines": {
+                "node": ">=14"
+            },
+            "funding": {
+                "url": "https://github.com/sponsors/antonk52"
+            }
+        },
+        "node_modules/lines-and-columns": {
+            "version": "1.2.4",
+            "resolved": "https://registry.npmjs.org/lines-and-columns/-/lines-and-columns-1.2.4.tgz",
+            "integrity": "sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg==",
+            "dev": true,
+            "license": "MIT"
+        },
+        "node_modules/lru-cache": {
+            "version": "10.4.3",
+            "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-10.4.3.tgz",
+            "integrity": "sha512-JNAzZcXrCt42VGLuYz0zfAzDfAvJWW6AfYlDBQyDV5DClI2m5sAmK+OIO7s59XfsRsWHp02jAJrRadPRGTt6SQ==",
+            "dev": true,
+            "license": "ISC"
+        },
+        "node_modules/merge2": {
+            "version": "1.4.1",
+            "resolved": "https://registry.npmjs.org/merge2/-/merge2-1.4.1.tgz",
+            "integrity": "sha512-8q7VEgMJW4J8tcfVPy8g09NcQwZdbwFEqhe/WZkoIzjn/3TGDwtOCYtXGxA3O8tPzpczCCDgv+P2P5y00ZJOOg==",
+            "dev": true,
+            "license": "MIT",
+            "engines": {
+                "node": ">= 8"
+            }
+        },
+        "node_modules/micromatch": {
+            "version": "4.0.8",
+            "resolved": "https://registry.npmjs.org/micromatch/-/micromatch-4.0.8.tgz",
+            "integrity": "sha512-PXwfBhYu0hBCPw8Dn0E+WDYb7af3dSLVWKi3HGv84IdF4TyFoC0ysxFd0Goxw7nSv4T/PzEJQxsYsEiFCKo2BA==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "braces": "^3.0.3",
+                "picomatch": "^2.3.1"
+            },
+            "engines": {
+                "node": ">=8.6"
+            }
+        },
+        "node_modules/minimatch": {
+            "version": "9.0.5",
+            "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-9.0.5.tgz",
+            "integrity": "sha512-G6T0ZX48xgozx7587koeX9Ys2NYy6Gmv//P89sEte9V9whIapMNF4idKxnW2QtCcLiTWlb/wfCabAtAFWhhBow==",
+            "dev": true,
+            "license": "ISC",
+            "dependencies": {
+                "brace-expansion": "^2.0.1"
+            },
+            "engines": {
+                "node": ">=16 || 14 >=14.17"
+            },
+            "funding": {
+                "url": "https://github.com/sponsors/isaacs"
+            }
+        },
+        "node_modules/minipass": {
+            "version": "7.1.2",
+            "resolved": "https://registry.npmjs.org/minipass/-/minipass-7.1.2.tgz",
+            "integrity": "sha512-qOOzS1cBTWYF4BH8fVePDBOO9iptMnGUEZwNc/cMWnTV2nVLZ7VoNWEPHkYczZA0pdoA7dl6e7FL659nX9S2aw==",
+            "dev": true,
+            "license": "ISC",
+            "engines": {
+                "node": ">=16 || 14 >=14.17"
+            }
+        },
+        "node_modules/mz": {
+            "version": "2.7.0",
+            "resolved": "https://registry.npmjs.org/mz/-/mz-2.7.0.tgz",
+            "integrity": "sha512-z81GNO7nnYMEhrGh9LeymoE4+Yr0Wn5McHIZMK5cfQCl+NDX08sCZgUc9/6MHni9IWuFLm1Z3HTCXu2z9fN62Q==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "any-promise": "^1.0.0",
+                "object-assign": "^4.0.1",
+                "thenify-all": "^1.0.0"
+            }
+        },
+        "node_modules/nanoid": {
+            "version": "3.3.8",
+            "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.8.tgz",
+            "integrity": "sha512-WNLf5Sd8oZxOm+TzppcYk8gVOgP+l58xNy58D0nbUnOxOWRWvlcCV4kUF7ltmI6PsrLl/BgKEyS4mqsGChFN0w==",
+            "dev": true,
+            "funding": [
+                {
+                    "type": "github",
+                    "url": "https://github.com/sponsors/ai"
+                }
+            ],
+            "license": "MIT",
+            "bin": {
+                "nanoid": "bin/nanoid.cjs"
+            },
+            "engines": {
+                "node": "^10 || ^12 || ^13.7 || ^14 || >=15.0.1"
+            }
+        },
+        "node_modules/node-releases": {
+            "version": "2.0.19",
+            "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-2.0.19.tgz",
+            "integrity": "sha512-xxOWJsBKtzAq7DY0J+DTzuz58K8e7sJbdgwkbMWQe8UYB6ekmsQ45q0M/tJDsGaZmbC+l7n57UV8Hl5tHxO9uw==",
+            "dev": true,
+            "license": "MIT"
+        },
+        "node_modules/normalize-path": {
+            "version": "3.0.0",
+            "resolved": "https://registry.npmjs.org/normalize-path/-/normalize-path-3.0.0.tgz",
+            "integrity": "sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==",
+            "dev": true,
+            "license": "MIT",
+            "engines": {
+                "node": ">=0.10.0"
+            }
+        },
+        "node_modules/normalize-range": {
+            "version": "0.1.2",
+            "resolved": "https://registry.npmjs.org/normalize-range/-/normalize-range-0.1.2.tgz",
+            "integrity": "sha512-bdok/XvKII3nUpklnV6P2hxtMNrCboOjAcyBuQnWEhO665FwrSNRxU+AqpsyvO6LgGYPspN+lu5CLtw4jPRKNA==",
+            "dev": true,
+            "license": "MIT",
+            "engines": {
+                "node": ">=0.10.0"
+            }
+        },
+        "node_modules/object-assign": {
+            "version": "4.1.1",
+            "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
+            "integrity": "sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==",
+            "dev": true,
+            "license": "MIT",
+            "engines": {
+                "node": ">=0.10.0"
+            }
+        },
+        "node_modules/object-hash": {
+            "version": "3.0.0",
+            "resolved": "https://registry.npmjs.org/object-hash/-/object-hash-3.0.0.tgz",
+            "integrity": "sha512-RSn9F68PjH9HqtltsSnqYC1XXoWe9Bju5+213R98cNGttag9q9yAOTzdbsqvIa7aNm5WffBZFpWYr2aWrklWAw==",
+            "dev": true,
+            "license": "MIT",
+            "engines": {
+                "node": ">= 6"
+            }
+        },
+        "node_modules/package-json-from-dist": {
+            "version": "1.0.1",
+            "resolved": "https://registry.npmjs.org/package-json-from-dist/-/package-json-from-dist-1.0.1.tgz",
+            "integrity": "sha512-UEZIS3/by4OC8vL3P2dTXRETpebLI2NiI5vIrjaD/5UtrkFX/tNbwjTSRAGC/+7CAo2pIcBaRgWmcBBHcsaCIw==",
+            "dev": true,
+            "license": "BlueOak-1.0.0"
+        },
+        "node_modules/path-key": {
+            "version": "3.1.1",
+            "resolved": "https://registry.npmjs.org/path-key/-/path-key-3.1.1.tgz",
+            "integrity": "sha512-ojmeN0qd+y0jszEtoY48r0Peq5dwMEkIlCOu6Q5f41lfkswXuKtYrhgoTpLnyIcHm24Uhqx+5Tqm2InSwLhE6Q==",
+            "dev": true,
+            "license": "MIT",
+            "engines": {
+                "node": ">=8"
+            }
+        },
+        "node_modules/path-parse": {
+            "version": "1.0.7",
+            "resolved": "https://registry.npmjs.org/path-parse/-/path-parse-1.0.7.tgz",
+            "integrity": "sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw==",
+            "dev": true,
+            "license": "MIT"
+        },
+        "node_modules/path-scurry": {
+            "version": "1.11.1",
+            "resolved": "https://registry.npmjs.org/path-scurry/-/path-scurry-1.11.1.tgz",
+            "integrity": "sha512-Xa4Nw17FS9ApQFJ9umLiJS4orGjm7ZzwUrwamcGQuHSzDyth9boKDaycYdDcZDuqYATXw4HFXgaqWTctW/v1HA==",
+            "dev": true,
+            "license": "BlueOak-1.0.0",
+            "dependencies": {
+                "lru-cache": "^10.2.0",
+                "minipass": "^5.0.0 || ^6.0.2 || ^7.0.0"
+            },
+            "engines": {
+                "node": ">=16 || 14 >=14.18"
+            },
+            "funding": {
+                "url": "https://github.com/sponsors/isaacs"
+            }
+        },
+        "node_modules/picocolors": {
+            "version": "1.1.1",
+            "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.1.1.tgz",
+            "integrity": "sha512-xceH2snhtb5M9liqDsmEw56le376mTZkEX/jEb/RxNFyegNul7eNslCXP9FDj/Lcu0X8KEyMceP2ntpaHrDEVA==",
+            "dev": true,
+            "license": "ISC"
+        },
+        "node_modules/picomatch": {
+            "version": "2.3.1",
+            "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.1.tgz",
+            "integrity": "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==",
+            "dev": true,
+            "license": "MIT",
+            "engines": {
+                "node": ">=8.6"
+            },
+            "funding": {
+                "url": "https://github.com/sponsors/jonschlinkert"
+            }
+        },
+        "node_modules/pify": {
+            "version": "2.3.0",
+            "resolved": "https://registry.npmjs.org/pify/-/pify-2.3.0.tgz",
+            "integrity": "sha512-udgsAY+fTnvv7kI7aaxbqwWNb0AHiB0qBO89PZKPkoTmGOgdbrHDKD+0B2X4uTfJ/FT1R09r9gTsjUjNJotuog==",
+            "dev": true,
+            "license": "MIT",
+            "engines": {
+                "node": ">=0.10.0"
+            }
+        },
+        "node_modules/pirates": {
+            "version": "4.0.6",
+            "resolved": "https://registry.npmjs.org/pirates/-/pirates-4.0.6.tgz",
+            "integrity": "sha512-saLsH7WeYYPiD25LDuLRRY/i+6HaPYr6G1OUlN39otzkSTxKnubR9RTxS3/Kk50s1g2JTgFwWQDQyplC5/SHZg==",
+            "dev": true,
+            "license": "MIT",
+            "engines": {
+                "node": ">= 6"
+            }
+        },
+        "node_modules/postcss": {
+            "version": "8.5.1",
+            "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.5.1.tgz",
+            "integrity": "sha512-6oz2beyjc5VMn/KV1pPw8fliQkhBXrVn1Z3TVyqZxU8kZpzEKhBdmCFqI6ZbmGtamQvQGuU1sgPTk8ZrXDD7jQ==",
+            "dev": true,
+            "funding": [
+                {
+                    "type": "opencollective",
+                    "url": "https://opencollective.com/postcss/"
+                },
+                {
+                    "type": "tidelift",
+                    "url": "https://tidelift.com/funding/github/npm/postcss"
+                },
+                {
+                    "type": "github",
+                    "url": "https://github.com/sponsors/ai"
+                }
+            ],
+            "license": "MIT",
+            "dependencies": {
+                "nanoid": "^3.3.8",
+                "picocolors": "^1.1.1",
+                "source-map-js": "^1.2.1"
+            },
+            "engines": {
+                "node": "^10 || ^12 || >=14"
+            }
+        },
+        "node_modules/postcss-import": {
+            "version": "15.1.0",
+            "resolved": "https://registry.npmjs.org/postcss-import/-/postcss-import-15.1.0.tgz",
+            "integrity": "sha512-hpr+J05B2FVYUAXHeK1YyI267J/dDDhMU6B6civm8hSY1jYJnBXxzKDKDswzJmtLHryrjhnDjqqp/49t8FALew==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "postcss-value-parser": "^4.0.0",
+                "read-cache": "^1.0.0",
+                "resolve": "^1.1.7"
+            },
+            "engines": {
+                "node": ">=14.0.0"
+            },
+            "peerDependencies": {
+                "postcss": "^8.0.0"
+            }
+        },
+        "node_modules/postcss-js": {
+            "version": "4.0.1",
+            "resolved": "https://registry.npmjs.org/postcss-js/-/postcss-js-4.0.1.tgz",
+            "integrity": "sha512-dDLF8pEO191hJMtlHFPRa8xsizHaM82MLfNkUHdUtVEV3tgTp5oj+8qbEqYM57SLfc74KSbw//4SeJma2LRVIw==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "camelcase-css": "^2.0.1"
+            },
+            "engines": {
+                "node": "^12 || ^14 || >= 16"
+            },
+            "funding": {
+                "type": "opencollective",
+                "url": "https://opencollective.com/postcss/"
+            },
+            "peerDependencies": {
+                "postcss": "^8.4.21"
+            }
+        },
+        "node_modules/postcss-load-config": {
+            "version": "4.0.2",
+            "resolved": "https://registry.npmjs.org/postcss-load-config/-/postcss-load-config-4.0.2.tgz",
+            "integrity": "sha512-bSVhyJGL00wMVoPUzAVAnbEoWyqRxkjv64tUl427SKnPrENtq6hJwUojroMz2VB+Q1edmi4IfrAPpami5VVgMQ==",
+            "dev": true,
+            "funding": [
+                {
+                    "type": "opencollective",
+                    "url": "https://opencollective.com/postcss/"
+                },
+                {
+                    "type": "github",
+                    "url": "https://github.com/sponsors/ai"
+                }
+            ],
+            "license": "MIT",
+            "dependencies": {
+                "lilconfig": "^3.0.0",
+                "yaml": "^2.3.4"
+            },
+            "engines": {
+                "node": ">= 14"
+            },
+            "peerDependencies": {
+                "postcss": ">=8.0.9",
+                "ts-node": ">=9.0.0"
+            },
+            "peerDependenciesMeta": {
+                "postcss": {
+                    "optional": true
+                },
+                "ts-node": {
+                    "optional": true
+                }
+            }
+        },
+        "node_modules/postcss-nested": {
+            "version": "6.2.0",
+            "resolved": "https://registry.npmjs.org/postcss-nested/-/postcss-nested-6.2.0.tgz",
+            "integrity": "sha512-HQbt28KulC5AJzG+cZtj9kvKB93CFCdLvog1WFLf1D+xmMvPGlBstkpTEZfK5+AN9hfJocyBFCNiqyS48bpgzQ==",
+            "dev": true,
+            "funding": [
+                {
+                    "type": "opencollective",
+                    "url": "https://opencollective.com/postcss/"
+                },
+                {
+                    "type": "github",
+                    "url": "https://github.com/sponsors/ai"
+                }
+            ],
+            "license": "MIT",
+            "dependencies": {
+                "postcss-selector-parser": "^6.1.1"
+            },
+            "engines": {
+                "node": ">=12.0"
+            },
+            "peerDependencies": {
+                "postcss": "^8.2.14"
+            }
+        },
+        "node_modules/postcss-selector-parser": {
+            "version": "6.1.2",
+            "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-6.1.2.tgz",
+            "integrity": "sha512-Q8qQfPiZ+THO/3ZrOrO0cJJKfpYCagtMUkXbnEfmgUjwXg6z/WBeOyS9APBBPCTSiDV+s4SwQGu8yFsiMRIudg==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "cssesc": "^3.0.0",
+                "util-deprecate": "^1.0.2"
+            },
+            "engines": {
+                "node": ">=4"
+            }
+        },
+        "node_modules/postcss-value-parser": {
+            "version": "4.2.0",
+            "resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-4.2.0.tgz",
+            "integrity": "sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==",
+            "dev": true,
+            "license": "MIT"
+        },
+        "node_modules/queue-microtask": {
+            "version": "1.2.3",
+            "resolved": "https://registry.npmjs.org/queue-microtask/-/queue-microtask-1.2.3.tgz",
+            "integrity": "sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A==",
+            "dev": true,
+            "funding": [
+                {
+                    "type": "github",
+                    "url": "https://github.com/sponsors/feross"
+                },
+                {
+                    "type": "patreon",
+                    "url": "https://www.patreon.com/feross"
+                },
+                {
+                    "type": "consulting",
+                    "url": "https://feross.org/support"
+                }
+            ],
+            "license": "MIT"
+        },
+        "node_modules/read-cache": {
+            "version": "1.0.0",
+            "resolved": "https://registry.npmjs.org/read-cache/-/read-cache-1.0.0.tgz",
+            "integrity": "sha512-Owdv/Ft7IjOgm/i0xvNDZ1LrRANRfew4b2prF3OWMQLxLfu3bS8FVhCsrSCMK4lR56Y9ya+AThoTpDCTxCmpRA==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "pify": "^2.3.0"
+            }
+        },
+        "node_modules/readdirp": {
+            "version": "3.6.0",
+            "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-3.6.0.tgz",
+            "integrity": "sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "picomatch": "^2.2.1"
+            },
+            "engines": {
+                "node": ">=8.10.0"
+            }
+        },
+        "node_modules/resolve": {
+            "version": "1.22.10",
+            "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.10.tgz",
+            "integrity": "sha512-NPRy+/ncIMeDlTAsuqwKIiferiawhefFJtkNSW0qZJEqMEb+qBt/77B/jGeeek+F0uOeN05CDa6HXbbIgtVX4w==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "is-core-module": "^2.16.0",
+                "path-parse": "^1.0.7",
+                "supports-preserve-symlinks-flag": "^1.0.0"
+            },
+            "bin": {
+                "resolve": "bin/resolve"
+            },
+            "engines": {
+                "node": ">= 0.4"
+            },
+            "funding": {
+                "url": "https://github.com/sponsors/ljharb"
+            }
+        },
+        "node_modules/reusify": {
+            "version": "1.0.4",
+            "resolved": "https://registry.npmjs.org/reusify/-/reusify-1.0.4.tgz",
+            "integrity": "sha512-U9nH88a3fc/ekCF1l0/UP1IosiuIjyTh7hBvXVMHYgVcfGvt897Xguj2UOLDeI5BG2m7/uwyaLVT6fbtCwTyzw==",
+            "dev": true,
+            "license": "MIT",
+            "engines": {
+                "iojs": ">=1.0.0",
+                "node": ">=0.10.0"
+            }
+        },
+        "node_modules/rollup": {
+            "version": "3.29.5",
+            "resolved": "https://registry.npmjs.org/rollup/-/rollup-3.29.5.tgz",
+            "integrity": "sha512-GVsDdsbJzzy4S/v3dqWPJ7EfvZJfCHiDqe80IyrF59LYuP+e6U1LJoUqeuqRbwAWoMNoXivMNeNAOf5E22VA1w==",
+            "dev": true,
+            "license": "MIT",
+            "bin": {
+                "rollup": "dist/bin/rollup"
+            },
+            "engines": {
+                "node": ">=14.18.0",
+                "npm": ">=8.0.0"
+            },
+            "optionalDependencies": {
+                "fsevents": "~2.3.2"
+            }
+        },
+        "node_modules/run-parallel": {
+            "version": "1.2.0",
+            "resolved": "https://registry.npmjs.org/run-parallel/-/run-parallel-1.2.0.tgz",
+            "integrity": "sha512-5l4VyZR86LZ/lDxZTR6jqL8AFE2S0IFLMP26AbjsLVADxHdhB/c0GUsH+y39UfCi3dzz8OlQuPmnaJOMoDHQBA==",
+            "dev": true,
+            "funding": [
+                {
+                    "type": "github",
+                    "url": "https://github.com/sponsors/feross"
+                },
+                {
+                    "type": "patreon",
+                    "url": "https://www.patreon.com/feross"
+                },
+                {
+                    "type": "consulting",
+                    "url": "https://feross.org/support"
+                }
+            ],
+            "license": "MIT",
+            "dependencies": {
+                "queue-microtask": "^1.2.2"
+            }
+        },
+        "node_modules/shebang-command": {
+            "version": "2.0.0",
+            "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz",
+            "integrity": "sha512-kHxr2zZpYtdmrN1qDjrrX/Z1rR1kG8Dx+gkpK1G4eXmvXswmcE1hTWBWYUzlraYw1/yZp6YuDY77YtvbN0dmDA==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "shebang-regex": "^3.0.0"
+            },
+            "engines": {
+                "node": ">=8"
+            }
+        },
+        "node_modules/shebang-regex": {
+            "version": "3.0.0",
+            "resolved": "https://registry.npmjs.org/shebang-regex/-/shebang-regex-3.0.0.tgz",
+            "integrity": "sha512-7++dFhtcx3353uBaq8DDR4NuxBetBzC7ZQOhmTQInHEd6bSrXdiEyzCvG07Z44UYdLShWUyXt5M/yhz8ekcb1A==",
+            "dev": true,
+            "license": "MIT",
+            "engines": {
+                "node": ">=8"
+            }
+        },
+        "node_modules/signal-exit": {
+            "version": "4.1.0",
+            "resolved": "https://registry.npmjs.org/signal-exit/-/signal-exit-4.1.0.tgz",
+            "integrity": "sha512-bzyZ1e88w9O1iNJbKnOlvYTrWPDl46O1bG0D3XInv+9tkPrxrN8jUUTiFlDkkmKWgn1M6CfIA13SuGqOa9Korw==",
+            "dev": true,
+            "license": "ISC",
+            "engines": {
+                "node": ">=14"
+            },
+            "funding": {
+                "url": "https://github.com/sponsors/isaacs"
+            }
+        },
+        "node_modules/source-map-js": {
+            "version": "1.2.1",
+            "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.1.tgz",
+            "integrity": "sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA==",
+            "dev": true,
+            "license": "BSD-3-Clause",
+            "engines": {
+                "node": ">=0.10.0"
+            }
+        },
+        "node_modules/string-width": {
+            "version": "5.1.2",
+            "resolved": "https://registry.npmjs.org/string-width/-/string-width-5.1.2.tgz",
+            "integrity": "sha512-HnLOCR3vjcY8beoNLtcjZ5/nxn2afmME6lhrDrebokqMap+XbeW8n9TXpPDOqdGK5qcI3oT0GKTW6wC7EMiVqA==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "eastasianwidth": "^0.2.0",
+                "emoji-regex": "^9.2.2",
+                "strip-ansi": "^7.0.1"
+            },
+            "engines": {
+                "node": ">=12"
+            },
+            "funding": {
+                "url": "https://github.com/sponsors/sindresorhus"
+            }
+        },
+        "node_modules/string-width-cjs": {
+            "name": "string-width",
+            "version": "4.2.3",
+            "resolved": "https://registry.npmjs.org/string-width/-/string-width-4.2.3.tgz",
+            "integrity": "sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "emoji-regex": "^8.0.0",
+                "is-fullwidth-code-point": "^3.0.0",
+                "strip-ansi": "^6.0.1"
+            },
+            "engines": {
+                "node": ">=8"
+            }
+        },
+        "node_modules/string-width-cjs/node_modules/ansi-regex": {
+            "version": "5.0.1",
+            "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.1.tgz",
+            "integrity": "sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==",
+            "dev": true,
+            "license": "MIT",
+            "engines": {
+                "node": ">=8"
+            }
+        },
+        "node_modules/string-width-cjs/node_modules/emoji-regex": {
+            "version": "8.0.0",
+            "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-8.0.0.tgz",
+            "integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==",
+            "dev": true,
+            "license": "MIT"
+        },
+        "node_modules/string-width-cjs/node_modules/strip-ansi": {
+            "version": "6.0.1",
+            "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz",
+            "integrity": "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "ansi-regex": "^5.0.1"
+            },
+            "engines": {
+                "node": ">=8"
+            }
+        },
+        "node_modules/strip-ansi": {
+            "version": "7.1.0",
+            "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-7.1.0.tgz",
+            "integrity": "sha512-iq6eVVI64nQQTRYq2KtEg2d2uU7LElhTJwsH4YzIHZshxlgZms/wIc4VoDQTlG/IvVIrBKG06CrZnp0qv7hkcQ==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "ansi-regex": "^6.0.1"
+            },
+            "engines": {
+                "node": ">=12"
+            },
+            "funding": {
+                "url": "https://github.com/chalk/strip-ansi?sponsor=1"
+            }
+        },
+        "node_modules/strip-ansi-cjs": {
+            "name": "strip-ansi",
+            "version": "6.0.1",
+            "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz",
+            "integrity": "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "ansi-regex": "^5.0.1"
+            },
+            "engines": {
+                "node": ">=8"
+            }
+        },
+        "node_modules/strip-ansi-cjs/node_modules/ansi-regex": {
+            "version": "5.0.1",
+            "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.1.tgz",
+            "integrity": "sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==",
+            "dev": true,
+            "license": "MIT",
+            "engines": {
+                "node": ">=8"
+            }
+        },
+        "node_modules/sucrase": {
+            "version": "3.35.0",
+            "resolved": "https://registry.npmjs.org/sucrase/-/sucrase-3.35.0.tgz",
+            "integrity": "sha512-8EbVDiu9iN/nESwxeSxDKe0dunta1GOlHufmSSXxMD2z2/tMZpDMpvXQGsc+ajGo8y2uYUmixaSRUc/QPoQ0GA==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "@jridgewell/gen-mapping": "^0.3.2",
+                "commander": "^4.0.0",
+                "glob": "^10.3.10",
+                "lines-and-columns": "^1.1.6",
+                "mz": "^2.7.0",
+                "pirates": "^4.0.1",
+                "ts-interface-checker": "^0.1.9"
+            },
+            "bin": {
+                "sucrase": "bin/sucrase",
+                "sucrase-node": "bin/sucrase-node"
+            },
+            "engines": {
+                "node": ">=16 || 14 >=14.17"
+            }
+        },
+        "node_modules/supports-preserve-symlinks-flag": {
+            "version": "1.0.0",
+            "resolved": "https://registry.npmjs.org/supports-preserve-symlinks-flag/-/supports-preserve-symlinks-flag-1.0.0.tgz",
+            "integrity": "sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==",
+            "dev": true,
+            "license": "MIT",
+            "engines": {
+                "node": ">= 0.4"
+            },
+            "funding": {
+                "url": "https://github.com/sponsors/ljharb"
+            }
+        },
+        "node_modules/tailwindcss": {
+            "version": "3.4.17",
+            "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.4.17.tgz",
+            "integrity": "sha512-w33E2aCvSDP0tW9RZuNXadXlkHXqFzSkQew/aIa2i/Sj8fThxwovwlXHSPXTbAHwEIhBFXAedUhP2tueAKP8Og==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "@alloc/quick-lru": "^5.2.0",
+                "arg": "^5.0.2",
+                "chokidar": "^3.6.0",
+                "didyoumean": "^1.2.2",
+                "dlv": "^1.1.3",
+                "fast-glob": "^3.3.2",
+                "glob-parent": "^6.0.2",
+                "is-glob": "^4.0.3",
+                "jiti": "^1.21.6",
+                "lilconfig": "^3.1.3",
+                "micromatch": "^4.0.8",
+                "normalize-path": "^3.0.0",
+                "object-hash": "^3.0.0",
+                "picocolors": "^1.1.1",
+                "postcss": "^8.4.47",
+                "postcss-import": "^15.1.0",
+                "postcss-js": "^4.0.1",
+                "postcss-load-config": "^4.0.2",
+                "postcss-nested": "^6.2.0",
+                "postcss-selector-parser": "^6.1.2",
+                "resolve": "^1.22.8",
+                "sucrase": "^3.35.0"
+            },
+            "bin": {
+                "tailwind": "lib/cli.js",
+                "tailwindcss": "lib/cli.js"
+            },
+            "engines": {
+                "node": ">=14.0.0"
+            }
+        },
+        "node_modules/thenify": {
+            "version": "3.3.1",
+            "resolved": "https://registry.npmjs.org/thenify/-/thenify-3.3.1.tgz",
+            "integrity": "sha512-RVZSIV5IG10Hk3enotrhvz0T9em6cyHBLkH/YAZuKqd8hRkKhSfCGIcP2KUY0EPxndzANBmNllzWPwak+bheSw==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "any-promise": "^1.0.0"
+            }
+        },
+        "node_modules/thenify-all": {
+            "version": "1.6.0",
+            "resolved": "https://registry.npmjs.org/thenify-all/-/thenify-all-1.6.0.tgz",
+            "integrity": "sha512-RNxQH/qI8/t3thXJDwcstUO4zeqo64+Uy/+sNVRBx4Xn2OX+OZ9oP+iJnNFqplFra2ZUVeKCSa2oVWi3T4uVmA==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "thenify": ">= 3.1.0 < 4"
+            },
+            "engines": {
+                "node": ">=0.8"
+            }
+        },
+        "node_modules/to-regex-range": {
+            "version": "5.0.1",
+            "resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz",
+            "integrity": "sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "is-number": "^7.0.0"
+            },
+            "engines": {
+                "node": ">=8.0"
+            }
+        },
+        "node_modules/ts-interface-checker": {
+            "version": "0.1.13",
+            "resolved": "https://registry.npmjs.org/ts-interface-checker/-/ts-interface-checker-0.1.13.tgz",
+            "integrity": "sha512-Y/arvbn+rrz3JCKl9C4kVNfTfSm2/mEp5FSz5EsZSANGPSlQrpRI5M4PKF+mJnE52jOO90PnPSc3Ur3bTQw0gA==",
+            "dev": true,
+            "license": "Apache-2.0"
+        },
+        "node_modules/typescript": {
+            "version": "5.7.3",
+            "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.7.3.tgz",
+            "integrity": "sha512-84MVSjMEHP+FQRPy3pX9sTVV/INIex71s9TL2Gm5FG/WG1SqXeKyZ0k7/blY/4FdOzI12CBy1vGc4og/eus0fw==",
+            "dev": true,
+            "license": "Apache-2.0",
+            "bin": {
+                "tsc": "bin/tsc",
+                "tsserver": "bin/tsserver"
+            },
+            "engines": {
+                "node": ">=14.17"
+            }
+        },
+        "node_modules/update-browserslist-db": {
+            "version": "1.1.2",
+            "resolved": "https://registry.npmjs.org/update-browserslist-db/-/update-browserslist-db-1.1.2.tgz",
+            "integrity": "sha512-PPypAm5qvlD7XMZC3BujecnaOxwhrtoFR+Dqkk5Aa/6DssiH0ibKoketaj9w8LP7Bont1rYeoV5plxD7RTEPRg==",
+            "dev": true,
+            "funding": [
+                {
+                    "type": "opencollective",
+                    "url": "https://opencollective.com/browserslist"
+                },
+                {
+                    "type": "tidelift",
+                    "url": "https://tidelift.com/funding/github/npm/browserslist"
+                },
+                {
+                    "type": "github",
+                    "url": "https://github.com/sponsors/ai"
+                }
+            ],
+            "license": "MIT",
+            "dependencies": {
+                "escalade": "^3.2.0",
+                "picocolors": "^1.1.1"
+            },
+            "bin": {
+                "update-browserslist-db": "cli.js"
+            },
+            "peerDependencies": {
+                "browserslist": ">= 4.21.0"
+            }
+        },
+        "node_modules/util-deprecate": {
+            "version": "1.0.2",
+            "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",
+            "integrity": "sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==",
+            "dev": true,
+            "license": "MIT"
+        },
+        "node_modules/vite": {
+            "version": "4.5.9",
+            "resolved": "https://registry.npmjs.org/vite/-/vite-4.5.9.tgz",
+            "integrity": "sha512-qK9W4xjgD3gXbC0NmdNFFnVFLMWSNiR3swj957yutwzzN16xF/E7nmtAyp1rT9hviDroQANjE4HK3H4WqWdFtw==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "esbuild": "^0.18.10",
+                "postcss": "^8.4.27",
+                "rollup": "^3.27.1"
+            },
+            "bin": {
+                "vite": "bin/vite.js"
+            },
+            "engines": {
+                "node": "^14.18.0 || >=16.0.0"
+            },
+            "funding": {
+                "url": "https://github.com/vitejs/vite?sponsor=1"
+            },
+            "optionalDependencies": {
+                "fsevents": "~2.3.2"
+            },
+            "peerDependencies": {
+                "@types/node": ">= 14",
+                "less": "*",
+                "lightningcss": "^1.21.0",
+                "sass": "*",
+                "stylus": "*",
+                "sugarss": "*",
+                "terser": "^5.4.0"
+            },
+            "peerDependenciesMeta": {
+                "@types/node": {
+                    "optional": true
+                },
+                "less": {
+                    "optional": true
+                },
+                "lightningcss": {
+                    "optional": true
+                },
+                "sass": {
+                    "optional": true
+                },
+                "stylus": {
+                    "optional": true
+                },
+                "sugarss": {
+                    "optional": true
+                },
+                "terser": {
+                    "optional": true
+                }
+            }
+        },
+        "node_modules/which": {
+            "version": "2.0.2",
+            "resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz",
+            "integrity": "sha512-BLI3Tl1TW3Pvl70l3yq3Y64i+awpwXqsGBYWkkqMtnbXgrMD+yj7rhW0kuEDxzJaYXGjEW5ogapKNMEKNMjibA==",
+            "dev": true,
+            "license": "ISC",
+            "dependencies": {
+                "isexe": "^2.0.0"
+            },
+            "bin": {
+                "node-which": "bin/node-which"
+            },
+            "engines": {
+                "node": ">= 8"
+            }
+        },
+        "node_modules/wrap-ansi": {
+            "version": "8.1.0",
+            "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-8.1.0.tgz",
+            "integrity": "sha512-si7QWI6zUMq56bESFvagtmzMdGOtoxfR+Sez11Mobfc7tm+VkUckk9bW2UeffTGVUbOksxmSw0AA2gs8g71NCQ==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "ansi-styles": "^6.1.0",
+                "string-width": "^5.0.1",
+                "strip-ansi": "^7.0.1"
+            },
+            "engines": {
+                "node": ">=12"
+            },
+            "funding": {
+                "url": "https://github.com/chalk/wrap-ansi?sponsor=1"
+            }
+        },
+        "node_modules/wrap-ansi-cjs": {
+            "name": "wrap-ansi",
+            "version": "7.0.0",
+            "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-7.0.0.tgz",
+            "integrity": "sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "ansi-styles": "^4.0.0",
+                "string-width": "^4.1.0",
+                "strip-ansi": "^6.0.0"
+            },
+            "engines": {
+                "node": ">=10"
+            },
+            "funding": {
+                "url": "https://github.com/chalk/wrap-ansi?sponsor=1"
+            }
+        },
+        "node_modules/wrap-ansi-cjs/node_modules/ansi-regex": {
+            "version": "5.0.1",
+            "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.1.tgz",
+            "integrity": "sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==",
+            "dev": true,
+            "license": "MIT",
+            "engines": {
+                "node": ">=8"
+            }
+        },
+        "node_modules/wrap-ansi-cjs/node_modules/ansi-styles": {
+            "version": "4.3.0",
+            "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
+            "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "color-convert": "^2.0.1"
+            },
+            "engines": {
+                "node": ">=8"
+            },
+            "funding": {
+                "url": "https://github.com/chalk/ansi-styles?sponsor=1"
+            }
+        },
+        "node_modules/wrap-ansi-cjs/node_modules/emoji-regex": {
+            "version": "8.0.0",
+            "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-8.0.0.tgz",
+            "integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==",
+            "dev": true,
+            "license": "MIT"
+        },
+        "node_modules/wrap-ansi-cjs/node_modules/string-width": {
+            "version": "4.2.3",
+            "resolved": "https://registry.npmjs.org/string-width/-/string-width-4.2.3.tgz",
+            "integrity": "sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "emoji-regex": "^8.0.0",
+                "is-fullwidth-code-point": "^3.0.0",
+                "strip-ansi": "^6.0.1"
+            },
+            "engines": {
+                "node": ">=8"
+            }
+        },
+        "node_modules/wrap-ansi-cjs/node_modules/strip-ansi": {
+            "version": "6.0.1",
+            "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz",
+            "integrity": "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "ansi-regex": "^5.0.1"
+            },
+            "engines": {
+                "node": ">=8"
+            }
+        },
+        "node_modules/yaml": {
+            "version": "2.7.0",
+            "resolved": "https://registry.npmjs.org/yaml/-/yaml-2.7.0.tgz",
+            "integrity": "sha512-+hSoy/QHluxmC9kCIJyL/uyFmLmc+e5CFR5Wa+bpIhIj85LVb9ZH2nVnqrHoSvKogwODv0ClqZkmiSSaIH5LTA==",
+            "dev": true,
+            "license": "ISC",
+            "bin": {
+                "yaml": "bin.mjs"
+            },
+            "engines": {
+                "node": ">= 14"
+            }
+        }
+    }
+}
diff --git a/example/package.json b/example/package.json
new file mode 100644
index 0000000..9ad93dc
--- /dev/null
+++ b/example/package.json
@@ -0,0 +1,21 @@
+{
+    "name": "sortablets-examples",
+    "version": "1.0.0",
+    "description": "Examples for SortableTS",
+    "type": "module",
+    "scripts": {
+      "build": "tsc",
+      "watch": "tsc -w",
+      "dev": "vite",
+      "build-vite": "vite build",
+      "preview": "vite preview",
+    "styles": "npx tailwindcss -i ./src/style.css -o ./src/output.css -w"
+    },
+    "devDependencies": {
+      "typescript": "^5.0.2",
+      "vite": "^4.4.5",
+      "autoprefixer": "^10.4.17",
+      "tailwindcss": "^3.4.1",
+      "postcss": "^8.4.35"
+    }
+  }
\ No newline at end of file
diff --git a/postcss.config.js b/example/postcss.config.js
similarity index 100%
rename from postcss.config.js
rename to example/postcss.config.js
diff --git a/example/src/main.ts b/example/src/main.ts
index 7541dfa..e69de29 100644
--- a/example/src/main.ts
+++ b/example/src/main.ts
@@ -1,53 +0,0 @@
-import { Sortable } from '../../dist/index.mjs';
-import './style.css';
-
-// Simple List
-const example1 = document.getElementById('example1') as HTMLElement;
-new Sortable(example1, {
-  animation: 150,
-  previewClass: 'opacity-50',
-  onStart: (evt: { item: HTMLElement; oldIndex: number }) => {
-    console.log('Started dragging:', evt.item);
-  },
-  onEnd: (evt: { item: HTMLElement; newIndex: number }) => {
-    console.log('Ended dragging:', evt.item);
-  },
-});
-
-// Shared Lists
-const example2Left = document.getElementById('example2-left') as HTMLElement;
-const example2Right = document.getElementById('example2-right') as HTMLElement;
-
-new Sortable(example2Left, {
-  group: 'shared',
-  animation: 150,
-  previewClass: 'opacity-50',
-  onAdd: (evt: { item: HTMLElement; newIndex: number; from: HTMLElement }) => {
-    console.log('Item added from another list:', evt.item);
-  },
-});
-
-new Sortable(example2Right, {
-  group: 'shared',
-  animation: 150,
-  previewClass: 'opacity-50',
-  onAdd: (evt: { item: HTMLElement; newIndex: number; from: HTMLElement }) => {
-    console.log('Item added from another list:', evt.item);
-  },
-});
-
-// Handle Example
-const example5 = document.getElementById('example5') as HTMLElement;
-new Sortable(example5, {
-  handle: '.handle',
-  animation: 150,
-  previewClass: 'opacity-50',
-});
-
-// Grid Example
-const gridDemo = document.getElementById('gridDemo') as HTMLElement;
-new Sortable(gridDemo, {
-  animation: 150,
-  previewClass: 'opacity-50',
-  draggable: '.grid-item',
-});
diff --git a/example/src/output.css b/example/src/output.css
index b977af5..7b40955 100644
--- a/example/src/output.css
+++ b/example/src/output.css
@@ -625,6 +625,10 @@ video {
   margin-bottom: 1rem;
 }
 
+.mb-6 {
+  margin-bottom: 1.5rem;
+}
+
 .mb-8 {
   margin-bottom: 2rem;
 }
@@ -649,10 +653,6 @@ video {
   margin-top: 1.5rem;
 }
 
-.mb-6 {
-  margin-bottom: 1.5rem;
-}
-
 .flex {
   display: flex;
 }
@@ -661,16 +661,20 @@ video {
   display: grid;
 }
 
-.h-12 {
-  height: 3rem;
+.h-20 {
+  height: 5rem;
+}
+
+.h-5 {
+  height: 1.25rem;
 }
 
-.h-24 {
-  height: 6rem;
+.h-8 {
+  height: 2rem;
 }
 
-.h-20 {
-  height: 5rem;
+.h-\[250px\] {
+  height: 250px;
 }
 
 .min-h-screen {
@@ -681,6 +685,22 @@ video {
   width: 8rem;
 }
 
+.w-\[20\%\] {
+  width: 20%;
+}
+
+.w-\[200px\] {
+  width: 200px;
+}
+
+.w-\[250px\] {
+  width: 250px;
+}
+
+.w-\[60\%\] {
+  width: 60%;
+}
+
 .w-full {
   width: 100%;
 }
@@ -709,10 +729,22 @@ video {
   align-items: center;
 }
 
+.justify-start {
+  justify-content: flex-start;
+}
+
+.justify-center {
+  justify-content: center;
+}
+
 .justify-between {
   justify-content: space-between;
 }
 
+.gap-2 {
+  gap: 0.5rem;
+}
+
 .gap-3 {
   gap: 0.75rem;
 }
@@ -721,32 +753,22 @@ video {
   gap: 1rem;
 }
 
-.gap-6 {
-  gap: 1.5rem;
-}
-
 .gap-8 {
   gap: 2rem;
 }
 
-.space-y-2 > :not([hidden]) ~ :not([hidden]) {
-  --tw-space-y-reverse: 0;
-  margin-top: calc(0.5rem * calc(1 - var(--tw-space-y-reverse)));
-  margin-bottom: calc(0.5rem * var(--tw-space-y-reverse));
-}
-
-.space-y-4 > :not([hidden]) ~ :not([hidden]) {
-  --tw-space-y-reverse: 0;
-  margin-top: calc(1rem * calc(1 - var(--tw-space-y-reverse)));
-  margin-bottom: calc(1rem * var(--tw-space-y-reverse));
-}
-
 .space-y-1 > :not([hidden]) ~ :not([hidden]) {
   --tw-space-y-reverse: 0;
   margin-top: calc(0.25rem * calc(1 - var(--tw-space-y-reverse)));
   margin-bottom: calc(0.25rem * var(--tw-space-y-reverse));
 }
 
+.space-y-2 > :not([hidden]) ~ :not([hidden]) {
+  --tw-space-y-reverse: 0;
+  margin-top: calc(0.5rem * calc(1 - var(--tw-space-y-reverse)));
+  margin-bottom: calc(0.5rem * var(--tw-space-y-reverse));
+}
+
 .overflow-hidden {
   overflow: hidden;
 }
@@ -763,11 +785,11 @@ video {
   border-radius: 8px;
 }
 
-.rounded-lg {
-  border-radius: 0.5rem;
+.border {
+  border-width: 1px;
 }
 
-.border {
+.border-\[1px\] {
   border-width: 1px;
 }
 
@@ -794,39 +816,34 @@ video {
   border-color: rgb(187 247 208 / var(--tw-border-opacity, 1));
 }
 
-.border-red-200 {
-  --tw-border-opacity: 1;
-  border-color: rgb(254 202 202 / var(--tw-border-opacity, 1));
-}
-
 .bg-blue-50 {
   --tw-bg-opacity: 1;
   background-color: rgb(239 246 255 / var(--tw-bg-opacity, 1));
 }
 
-.bg-gray-50 {
+.bg-blue-500 {
   --tw-bg-opacity: 1;
-  background-color: rgb(249 250 251 / var(--tw-bg-opacity, 1));
+  background-color: rgb(59 130 246 / var(--tw-bg-opacity, 1));
 }
 
-.bg-gray-800 {
+.bg-gray-100 {
   --tw-bg-opacity: 1;
-  background-color: rgb(31 41 55 / var(--tw-bg-opacity, 1));
+  background-color: rgb(243 244 246 / var(--tw-bg-opacity, 1));
 }
 
-.bg-green-50 {
+.bg-gray-50 {
   --tw-bg-opacity: 1;
-  background-color: rgb(240 253 244 / var(--tw-bg-opacity, 1));
+  background-color: rgb(249 250 251 / var(--tw-bg-opacity, 1));
 }
 
-.bg-red-100 {
+.bg-green-50 {
   --tw-bg-opacity: 1;
-  background-color: rgb(254 226 226 / var(--tw-bg-opacity, 1));
+  background-color: rgb(240 253 244 / var(--tw-bg-opacity, 1));
 }
 
-.bg-red-900 {
+.bg-red-600 {
   --tw-bg-opacity: 1;
-  background-color: rgb(127 29 29 / var(--tw-bg-opacity, 1));
+  background-color: rgb(220 38 38 / var(--tw-bg-opacity, 1));
 }
 
 .bg-white {
@@ -834,21 +851,6 @@ video {
   background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
 }
 
-.bg-red-500 {
-  --tw-bg-opacity: 1;
-  background-color: rgb(239 68 68 / var(--tw-bg-opacity, 1));
-}
-
-.bg-red-400 {
-  --tw-bg-opacity: 1;
-  background-color: rgb(248 113 113 / var(--tw-bg-opacity, 1));
-}
-
-.bg-red-600 {
-  --tw-bg-opacity: 1;
-  background-color: rgb(220 38 38 / var(--tw-bg-opacity, 1));
-}
-
 .p-2 {
   padding: 0.5rem;
 }
@@ -865,6 +867,10 @@ video {
   padding: 1.5rem;
 }
 
+.p-8 {
+  padding: 2rem;
+}
+
 .px-4 {
   padding-left: 1rem;
   padding-right: 1rem;
@@ -890,15 +896,6 @@ video {
   padding-bottom: 2rem;
 }
 
-.px-3 {
-  padding-left: 0.75rem;
-  padding-right: 0.75rem;
-}
-
-.pl-4 {
-  padding-left: 1rem;
-}
-
 .pb-4 {
   padding-bottom: 1rem;
 }
@@ -912,26 +909,26 @@ video {
   line-height: 2rem;
 }
 
-.text-4xl {
-  font-size: 2.25rem;
-  line-height: 2.5rem;
-}
-
-.text-xl {
-  font-size: 1.25rem;
-  line-height: 1.75rem;
-}
-
 .text-3xl {
   font-size: 1.875rem;
   line-height: 2.25rem;
 }
 
+.text-4xl {
+  font-size: 2.25rem;
+  line-height: 2.5rem;
+}
+
 .text-sm {
   font-size: 0.875rem;
   line-height: 1.25rem;
 }
 
+.text-xl {
+  font-size: 1.25rem;
+  line-height: 1.75rem;
+}
+
 .font-bold {
   font-weight: 700;
 }
@@ -954,9 +951,9 @@ video {
   color: rgb(37 99 235 / var(--tw-text-opacity, 1));
 }
 
-.text-gray-100 {
+.text-gray-300 {
   --tw-text-opacity: 1;
-  color: rgb(243 244 246 / var(--tw-text-opacity, 1));
+  color: rgb(209 213 219 / var(--tw-text-opacity, 1));
 }
 
 .text-gray-600 {
@@ -979,6 +976,11 @@ video {
   color: rgb(0 0 136 / var(--tw-text-opacity, 1));
 }
 
+.text-style_blue_dark {
+  --tw-text-opacity: 1;
+  color: rgb(136 0 255 / var(--tw-text-opacity, 1));
+}
+
 .text-style_class {
   --tw-text-opacity: 1;
   color: rgb(102 0 102 / var(--tw-text-opacity, 1));
@@ -999,9 +1001,9 @@ video {
   color: rgb(0 136 0 / var(--tw-text-opacity, 1));
 }
 
-.text-gray-300 {
+.text-white {
   --tw-text-opacity: 1;
-  color: rgb(209 213 219 / var(--tw-text-opacity, 1));
+  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
 }
 
 .opacity-50 {
@@ -1097,6 +1099,10 @@ code {
   color: rgb(30 64 175 / var(--tw-text-opacity, 1));
 }
 
+.focus\:outline-0:focus {
+  outline-width: 0px;
+}
+
 @media (min-width: 640px) {
   .sm\:grid-cols-3 {
     grid-template-columns: repeat(3, minmax(0, 1fr));
@@ -1108,15 +1114,124 @@ code {
     grid-template-columns: repeat(2, minmax(0, 1fr));
   }
 
-  .md\:grid-cols-4 {
-    grid-template-columns: repeat(4, minmax(0, 1fr));
+  .md\:grid-cols-8 {
+    grid-template-columns: repeat(8, minmax(0, 1fr));
   }
+}
 
-  .md\:grid-cols-6 {
-    grid-template-columns: repeat(6, minmax(0, 1fr));
+@media (prefers-color-scheme: dark) {
+  .dark\:border-blue-600 {
+    --tw-border-opacity: 1;
+    border-color: rgb(37 99 235 / var(--tw-border-opacity, 1));
   }
 
-  .md\:grid-cols-8 {
-    grid-template-columns: repeat(8, minmax(0, 1fr));
+  .dark\:border-gray-600 {
+    --tw-border-opacity: 1;
+    border-color: rgb(75 85 99 / var(--tw-border-opacity, 1));
+  }
+
+  .dark\:border-green-600 {
+    --tw-border-opacity: 1;
+    border-color: rgb(22 163 74 / var(--tw-border-opacity, 1));
+  }
+
+  .dark\:bg-blue-900 {
+    --tw-bg-opacity: 1;
+    background-color: rgb(30 58 138 / var(--tw-bg-opacity, 1));
+  }
+
+  .dark\:bg-gray-700 {
+    --tw-bg-opacity: 1;
+    background-color: rgb(55 65 81 / var(--tw-bg-opacity, 1));
+  }
+
+  .dark\:bg-gray-800 {
+    --tw-bg-opacity: 1;
+    background-color: rgb(31 41 55 / var(--tw-bg-opacity, 1));
+  }
+
+  .dark\:bg-gray-900 {
+    --tw-bg-opacity: 1;
+    background-color: rgb(17 24 39 / var(--tw-bg-opacity, 1));
+  }
+
+  .dark\:bg-green-900 {
+    --tw-bg-opacity: 1;
+    background-color: rgb(20 83 45 / var(--tw-bg-opacity, 1));
+  }
+
+  .dark\:bg-red-900 {
+    --tw-bg-opacity: 1;
+    background-color: rgb(127 29 29 / var(--tw-bg-opacity, 1));
+  }
+
+  .dark\:text-blue-400 {
+    --tw-text-opacity: 1;
+    color: rgb(96 165 250 / var(--tw-text-opacity, 1));
+  }
+
+  .dark\:text-gray-200 {
+    --tw-text-opacity: 1;
+    color: rgb(229 231 235 / var(--tw-text-opacity, 1));
+  }
+
+  .dark\:text-gray-300 {
+    --tw-text-opacity: 1;
+    color: rgb(209 213 219 / var(--tw-text-opacity, 1));
+  }
+
+  .dark\:text-gray-400 {
+    --tw-text-opacity: 1;
+    color: rgb(156 163 175 / var(--tw-text-opacity, 1));
+  }
+
+  .dark\:text-slate-500 {
+    --tw-text-opacity: 1;
+    color: rgb(100 116 139 / var(--tw-text-opacity, 1));
+  }
+
+  .dark\:text-style_blue_dark {
+    --tw-text-opacity: 1;
+    color: rgb(136 0 255 / var(--tw-text-opacity, 1));
+  }
+
+  .dark\:text-style_class_dark {
+    --tw-text-opacity: 1;
+    color: rgb(255 0 255 / var(--tw-text-opacity, 1));
+  }
+
+  .dark\:text-style_comment_dark {
+    --tw-text-opacity: 1;
+    color: rgb(255 128 0 / var(--tw-text-opacity, 1));
+  }
+
+  .dark\:text-style_num_dark {
+    --tw-text-opacity: 1;
+    color: rgb(0 255 255 / var(--tw-text-opacity, 1));
+  }
+
+  .dark\:text-style_str_dark {
+    --tw-text-opacity: 1;
+    color: rgb(0 255 0 / var(--tw-text-opacity, 1));
+  }
+
+  .dark\:text-white {
+    --tw-text-opacity: 1;
+    color: rgb(255 255 255 / var(--tw-text-opacity, 1));
+  }
+
+  .dark\:hover\:bg-blue-600:hover {
+    --tw-bg-opacity: 1;
+    background-color: rgb(37 99 235 / var(--tw-bg-opacity, 1));
+  }
+
+  .dark\:hover\:bg-gray-600:hover {
+    --tw-bg-opacity: 1;
+    background-color: rgb(75 85 99 / var(--tw-bg-opacity, 1));
+  }
+
+  .dark\:hover\:text-blue-300:hover {
+    --tw-text-opacity: 1;
+    color: rgb(147 197 253 / var(--tw-text-opacity, 1));
   }
 }
diff --git a/example/styles.css b/example/styles.css
deleted file mode 100644
index b05f787..0000000
--- a/example/styles.css
+++ /dev/null
@@ -1,164 +0,0 @@
-* {
-  padding: 0;
-  margin: 0;
-  box-sizing: border-box;
-  font-family: 'Helvetica Neue', Helvetica, Arial;
-  font-weight: 300;
-}
-body {
-  background-color: rgb(244, 215, 201);
-  padding: 20px;
-  color: #212529;
-}
-body .container {
-  max-width: 1140px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  flex-direction: column;
-  margin: 0 auto;
-}
-
-.logo {
-  display: flex;
-  align-items: center;
-  flex-direction: column;
-}
-.logo .image {
-  width: 200px;
-  height: 100px;
-  background-color: green;
-}
-
-.logo h3 {
-  font-weight: 300;
-  font-size: 40px;
-}
-
-.desc {
-  font-weight: normal;
-}
-
-#features_examples_plugins {
-  width: 45%;
-  max-width: 720px;
-  padding: 30px;
-  height: auto;
-  border: 1px solid #444;
-  background-color: rgb(255, 255, 255, 0.5);
-  margin-top: 20px;
-}
-#features_examples_plugins > div {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  flex-direction: column;
-}
-
-#features_examples_plugins > div > h3 {
-  margin-bottom: 10px;
-  font-weight: 300;
-}
-#features_examples_plugins > div > a {
-  display: block;
-  color: #007bff;
-  text-decoration: none;
-  font-weight: 300;
-  margin-bottom: 8px;
-}
-
-#features {
-  width: 100%;
-  margin-top: 20px;
-}
-
-#features > h3 {
-  padding: 0 0 10px 0;
-  font-size: 32px;
-}
-#features .feature h3 {
-  padding: 20px 10px;
-  font-size: 24px;
-  border-top: 1px solid rgba(0, 0, 0, 0.125);
-}
-#features .feature .feature_desc {
-  padding: 0px 0 20px 10px;
-}
-
-#features .feature .double {
-  display: flex;
-  align-items: flex-start;
-  justify-content: space-between;
-  gap: 10px;
-}
-
-#features .feature > div > p {
-  font-size: 20px;
-}
-
-#features .feature ul {
-  width: 100%;
-  list-style-type: none;
-  border-radius: 5px;
-  overflow: hidden;
-}
-#features .feature ul li {
-  width: full;
-  background-color: white;
-  padding: 15px;
-  border-bottom: 1px solid rgba(0, 0, 0, 0.125);
-  display: flex;
-  align-items: center;
-  gap: 8px;
-}
-#features .feature ul.exampleRight li {
-  background-color: #fff6b2;
-}
-#features .feature .code {
-  padding: 5px 20px;
-  margin: 10px 0;
-  border-left: 1px solid #888;
-  display: flex;
-  flex-direction: column;
-  gap: 12px;
-}
-#features .feature .code .style,
-#features .feature .code {
-  font-size: 14px;
-  color: #000000;
-}
-
-#features .feature .code .new,
-#features .feature .code .group {
-  color: #000088;
-}
-#features .feature .code .class {
-  color: #660066;
-}
-#features .feature .code .symbol {
-  color: #660;
-}
-#features .feature .code .style_num {
-  color: #006666;
-}
-#features .feature .code .comment {
-  color: #800;
-}
-#features .feature .code .style_str {
-  color: #008800;
-}
-#features .feature .code .style_bool {
-  color: #000088;
-}
-#features .feature .code .style {
-  padding: 5px 0px 0 20px;
-}
-#features .feature ul li button {
-  width: 24px;
-  height: 24px;
-  background-color: red;
-  border: 0;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
diff --git a/tailwind.config.js b/example/tailwind.config.js
similarity index 54%
rename from tailwind.config.js
rename to example/tailwind.config.js
index 3998927..e1d2794 100644
--- a/tailwind.config.js
+++ b/example/tailwind.config.js
@@ -1,6 +1,7 @@
 /** @type {import('tailwindcss').Config} */
 export default {
-  content: ['./example/*.html', './example/**/*.html'],
+  content: ['./*.html', './**/*.html'],
+  darkMode: 'media',
   theme: {
     extend: {
       colors: {
@@ -9,7 +10,13 @@ export default {
         style_num: '#006666',
         style_class: '#660066',
         style_comment: '#800',
+        style_blue_dark: '#8800ff',
+        style_class_dark: '#ff00ff',
+        style_str_dark: '#00ff00',
+        style_num_dark: '#00ffff',
+        style_comment_dark: '#ff8000',
       },
+      
     },
   },
   plugins: [],
diff --git a/example/tsconfig.json b/example/tsconfig.json
new file mode 100644
index 0000000..60905f6
--- /dev/null
+++ b/example/tsconfig.json
@@ -0,0 +1,24 @@
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "module": "ESNext",
+    "lib": ["ES2020", "DOM", "DOM.Iterable"],
+    "skipLibCheck": true,
+    "moduleResolution": "bundler",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": false,
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true,
+    "outDir": "./dist",
+    "rootDir": "./src",
+    "baseUrl": ".",
+    "paths": {
+      "@/*": ["./src/*"]
+    }
+  },
+  "include": ["src/**/*.ts", "src/**/*.d.ts"],
+  "exclude": ["node_modules"]
+}
\ No newline at end of file
diff --git a/package.json b/package.json
index 5a43b91..dcdebdb 100644
--- a/package.json
+++ b/package.json
@@ -12,16 +12,12 @@
     "build": "vite build && rollup -c",
     "preview": "vite preview",
     "clean": "rimraf dist",
-    "example": "npm run build && vite example",
-    "styles": "npx tailwindcss -i ./example/src/style.css -o ./example/src/output.css -w"
+    "example": "npm run build && vite example"
   },
   "devDependencies": {
     "@rollup/plugin-typescript": "^12.1.2",
     "@types/node": "^22.13.1",
-    "autoprefixer": "^10.4.17",
-    "postcss": "^8.4.35",
     "rollup": "^4.34.5",
-    "tailwindcss": "^3.4.1",
     "typescript": "^5.7.3",
     "vite": "^6.1.0",
     "vite-plugin-dts": "^4.5.0"
