From d1361f7dfcd87d2adec4bff0a06caca9ac74ba2f Mon Sep 17 00:00:00 2001
From: Nate Butler <iamnbutler@gmail.com>
Date: Sat, 16 Jul 2022 11:39:45 -0400
Subject: [PATCH 01/22] Add new icons

We will need to do an assets clean up soon, we are currently shipping assets we are not using in the app.
---
 assets/icons/Icon12CircleXMark.svg         | 3 +++
 assets/icons/Icon12FolderTree.svg          | 3 +++
 assets/icons/Icon16ArrowLeft.svg           | 3 +++
 assets/icons/Icon16ArrowRight.svg          | 3 +++
 assets/icons/Icon16CircleCheck.svg         | 3 +++
 assets/icons/Icon16CircleInfo.svg          | 3 +++
 assets/icons/Icon16CircleXMark.svg         | 3 +++
 assets/icons/Icon16FolderTree.svg          | 3 +++
 assets/icons/Icon16MagnifyingGlass.svg     | 3 +++
 assets/icons/Icon16TriangleExclamation.svg | 3 +++
 assets/icons/Icon16UserGroup.svg           | 3 +++
 assets/icons/split.svg                     | 6 ++++--
 12 files changed, 37 insertions(+), 2 deletions(-)
 create mode 100644 assets/icons/Icon12CircleXMark.svg
 create mode 100644 assets/icons/Icon12FolderTree.svg
 create mode 100644 assets/icons/Icon16ArrowLeft.svg
 create mode 100644 assets/icons/Icon16ArrowRight.svg
 create mode 100644 assets/icons/Icon16CircleCheck.svg
 create mode 100644 assets/icons/Icon16CircleInfo.svg
 create mode 100644 assets/icons/Icon16CircleXMark.svg
 create mode 100644 assets/icons/Icon16FolderTree.svg
 create mode 100644 assets/icons/Icon16MagnifyingGlass.svg
 create mode 100644 assets/icons/Icon16TriangleExclamation.svg
 create mode 100644 assets/icons/Icon16UserGroup.svg

diff --git a/assets/icons/Icon12CircleXMark.svg b/assets/icons/Icon12CircleXMark.svg
new file mode 100644
index 0000000000..cf4f783aa0
--- /dev/null
+++ b/assets/icons/Icon12CircleXMark.svg
@@ -0,0 +1,3 @@
+<svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M0 6C0 2.68594 2.68594 0 6 0C9.31406 0 12 2.68594 12 6C12 9.31406 9.31406 12 6 12C2.68594 12 0 9.31406 0 6ZM4.10156 4.87734L5.20547 5.97891L4.10156 7.10156C3.88359 7.32188 3.88359 7.67813 4.10156 7.87734C4.32188 8.11641 4.67813 8.11641 4.87734 7.87734L5.97891 6.79453L7.10156 7.87734C7.32188 8.11641 7.67813 8.11641 7.87734 7.87734C8.11641 7.67813 8.11641 7.32188 7.87734 7.10156L6.79453 5.97891L7.87734 4.87734C8.11641 4.67813 8.11641 4.32188 7.87734 4.10156C7.67813 3.88359 7.32188 3.88359 7.10156 4.10156L5.97891 5.20547L4.87734 4.10156C4.67813 3.88359 4.32188 3.88359 4.10156 4.10156C3.88359 4.32188 3.88359 4.67813 4.10156 4.87734Z" fill="#717171"/>
+</svg>
diff --git a/assets/icons/Icon12FolderTree.svg b/assets/icons/Icon12FolderTree.svg
new file mode 100644
index 0000000000..411b98d5b8
--- /dev/null
+++ b/assets/icons/Icon12FolderTree.svg
@@ -0,0 +1,3 @@
+<svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M11.3333 1.33332H9L8.33333 0.666656H6.66667C6.29958 0.666656 6 0.96624 6 1.33332V4.66666C6 5.03374 6.29958 5.33332 6.66667 5.33332H11.3333C11.7004 5.33332 12 5.03374 12 4.66666V1.99999C12 1.63291 11.7 1.33332 11.3333 1.33332ZM11.3333 7.33332H9L8.33333 6.66666H6.66667C6.29958 6.66666 6 6.96624 6 7.33332V10.6667C6 11.0337 6.29958 11.3333 6.66667 11.3333H11.3333C11.7004 11.3333 12 11.0337 12 10.6667V7.99999C12 7.63332 11.7 7.33332 11.3333 7.33332ZM1.33333 0.99999C1.33333 0.815094 1.185 0.666656 1 0.666656H0.333333C0.148438 0.666656 0 0.81499 0 0.99999V9.33332C0 9.70041 0.299583 9.99999 0.666667 9.99999H5.33333V8.66666H1.33333V3.99999H5.33333V2.66666H1.33333V0.99999Z" fill="#717171"/>
+</svg>
diff --git a/assets/icons/Icon16ArrowLeft.svg b/assets/icons/Icon16ArrowLeft.svg
new file mode 100644
index 0000000000..905d643f1b
--- /dev/null
+++ b/assets/icons/Icon16ArrowLeft.svg
@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M15 8C15 8.55424 14.5804 9.00202 14.0262 9.00202H4.42238L7.7228 12.3024C8.11421 12.6939 8.11421 13.3279 7.7228 13.7194C7.52553 13.9151 7.26876 14.0121 7.01199 14.0121C6.75522 14.0121 6.49908 13.9143 6.30368 13.7186L1.29356 8.70846C0.902146 8.31705 0.902146 7.68295 1.29356 7.29154L6.30368 2.28142C6.6951 1.89 7.32919 1.89 7.72061 2.28142C8.11202 2.67283 8.11202 3.30692 7.72061 3.69834L4.42238 6.99797H14.0262C14.5804 6.99797 15 7.44575 15 8Z" fill="white"/>
+</svg>
diff --git a/assets/icons/Icon16ArrowRight.svg b/assets/icons/Icon16ArrowRight.svg
new file mode 100644
index 0000000000..24cd660ab2
--- /dev/null
+++ b/assets/icons/Icon16ArrowRight.svg
@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M14.7071 8.70667L9.70681 13.707C9.51305 13.9039 9.25678 14.0008 9.00051 14.0008C8.74425 14.0008 8.48861 13.9031 8.29359 13.7078C7.90294 13.3171 7.90294 12.6843 8.29359 12.2936L11.5882 9.00044H2.00006C1.44784 9.00044 1 8.55353 1 8.00037C1 7.44721 1.44753 7.00031 1.99975 7.00031H11.5879L8.29391 3.70635C7.90326 3.3157 7.90326 2.68284 8.29391 2.29219C8.68456 1.90154 9.31741 1.90154 9.70806 2.29219L14.7084 7.29252C15.0975 7.68473 15.0975 8.31602 14.7068 8.70667H14.7071Z" fill="white"/>
+</svg>
diff --git a/assets/icons/Icon16CircleCheck.svg b/assets/icons/Icon16CircleCheck.svg
new file mode 100644
index 0000000000..0b01e957c5
--- /dev/null
+++ b/assets/icons/Icon16CircleCheck.svg
@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M1 8C1 4.13359 4.13359 1 8 1C11.8664 1 15 4.13359 15 8C15 11.8664 11.8664 15 8 15C4.13359 15 1 11.8664 1 8ZM11.1664 6.79141C11.4645 6.49336 11.4645 6.00664 11.1664 5.70859C10.8684 5.41055 10.3816 5.41055 10.0836 5.70859L7.125 8.66719L5.91641 7.45859C5.61836 7.16055 5.13164 7.16055 4.83359 7.45859C4.53555 7.75664 4.53555 8.24336 4.83359 8.54141L6.58359 10.2914C6.88164 10.5895 7.36836 10.5895 7.66641 10.2914L11.1664 6.79141Z" fill="white"/>
+</svg>
diff --git a/assets/icons/Icon16CircleInfo.svg b/assets/icons/Icon16CircleInfo.svg
new file mode 100644
index 0000000000..e7058a0645
--- /dev/null
+++ b/assets/icons/Icon16CircleInfo.svg
@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M8 1C4.13359 1 1 4.13359 1 8C1 11.8664 4.13359 15 8 15C11.8664 15 15 11.8664 15 8C15 4.13359 11.8664 1 8 1ZM8 4.5C8.48316 4.5 8.875 4.89184 8.875 5.375C8.875 5.85816 8.48316 6.25 8 6.25C7.51684 6.25 7.125 5.85898 7.125 5.375C7.125 4.89102 7.51602 4.5 8 4.5ZM9.09375 11.5H6.90625C6.54531 11.5 6.25 11.2074 6.25 10.8438C6.25 10.4801 6.54395 10.1875 6.90625 10.1875H7.34375V8.4375H7.125C6.7627 8.4375 6.46875 8.14355 6.46875 7.78125C6.46875 7.41895 6.76406 7.125 7.125 7.125H8C8.3623 7.125 8.65625 7.41895 8.65625 7.78125V10.1875H9.09375C9.45605 10.1875 9.75 10.4814 9.75 10.8438C9.75 11.2061 9.45742 11.5 9.09375 11.5Z" fill="white"/>
+</svg>
diff --git a/assets/icons/Icon16CircleXMark.svg b/assets/icons/Icon16CircleXMark.svg
new file mode 100644
index 0000000000..f9e82dd4b0
--- /dev/null
+++ b/assets/icons/Icon16CircleXMark.svg
@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M1 8C1 4.13359 4.13359 1 8 1C11.8664 1 15 4.13359 15 8C15 11.8664 11.8664 15 8 15C4.13359 15 1 11.8664 1 8ZM5.78516 6.69023L7.07305 7.97539L5.78516 9.28516C5.53086 9.54219 5.53086 9.95781 5.78516 10.1902C6.04219 10.4691 6.45781 10.4691 6.69023 10.1902L7.97539 8.92695L9.28516 10.1902C9.54219 10.4691 9.95781 10.4691 10.1902 10.1902C10.4691 9.95781 10.4691 9.54219 10.1902 9.28516L8.92695 7.97539L10.1902 6.69023C10.4691 6.45781 10.4691 6.04219 10.1902 5.78516C9.95781 5.53086 9.54219 5.53086 9.28516 5.78516L7.97539 7.07305L6.69023 5.78516C6.45781 5.53086 6.04219 5.53086 5.78516 5.78516C5.53086 6.04219 5.53086 6.45781 5.78516 6.69023Z" fill="white"/>
+</svg>
diff --git a/assets/icons/Icon16FolderTree.svg b/assets/icons/Icon16FolderTree.svg
new file mode 100644
index 0000000000..425bfa6c43
--- /dev/null
+++ b/assets/icons/Icon16FolderTree.svg
@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M14.2222 2.55555H11.5L10.7222 1.77777H8.77778C8.34951 1.77777 8 2.12728 8 2.55555V6.44444C8 6.8727 8.34951 7.22222 8.77778 7.22222H14.2222C14.6505 7.22222 15 6.8727 15 6.44444V3.33333C15 2.90506 14.65 2.55555 14.2222 2.55555ZM14.2222 9.55555H11.5L10.7222 8.77777H8.77778C8.34951 8.77777 8 9.12728 8 9.55555V13.4444C8 13.8727 8.34951 14.2222 8.77778 14.2222H14.2222C14.6505 14.2222 15 13.8727 15 13.4444V10.3333C15 9.90555 14.65 9.55555 14.2222 9.55555ZM2.55556 2.16666C2.55556 1.95095 2.3825 1.77777 2.16667 1.77777H1.38889C1.17318 1.77777 1 1.95083 1 2.16666V11.8889C1 12.3171 1.34951 12.6667 1.77778 12.6667H7.22222V11.1111H2.55556V5.66666H7.22222V4.1111H2.55556V2.16666Z" fill="white"/>
+</svg>
diff --git a/assets/icons/Icon16MagnifyingGlass.svg b/assets/icons/Icon16MagnifyingGlass.svg
new file mode 100644
index 0000000000..0f82f266ff
--- /dev/null
+++ b/assets/icons/Icon16MagnifyingGlass.svg
@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M14.6796 13.1313L11.4069 9.85858C12.1511 8.75373 12.5183 7.37329 12.3217 5.90235C11.9865 3.40037 9.93591 1.36429 7.43148 1.04714C3.70791 0.575777 0.576823 3.70687 1.04791 7.43051C1.36506 9.93604 3.40142 11.9883 5.90366 12.3218C7.37461 12.5181 8.75533 12.1512 9.8599 11.407L13.1326 14.6797C13.5597 15.1068 14.2522 15.1068 14.6793 14.6797C15.1058 14.2521 15.1058 13.5576 14.6793 13.1311L14.6796 13.1313ZM3.16355 6.68703C3.16352 4.75731 4.73347 3.18739 6.6632 3.18739C8.59292 3.18739 10.1628 4.75731 10.1628 6.68703C10.1628 8.61676 8.59292 10.1867 6.6632 10.1867C4.73347 10.1867 3.16355 8.6173 3.16355 6.68703V6.68703Z" fill="white"/>
+</svg>
diff --git a/assets/icons/Icon16TriangleExclamation.svg b/assets/icons/Icon16TriangleExclamation.svg
new file mode 100644
index 0000000000..86a41d8160
--- /dev/null
+++ b/assets/icons/Icon16TriangleExclamation.svg
@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M14.8437 12.4025L9.01107 2.44905C8.56454 1.6834 7.43766 1.6834 6.98812 2.44905L1.15823 12.4025C0.709505 13.1654 1.26816 14.1252 2.1678 14.1252H13.833C14.7288 14.1252 15.2894 13.1682 14.8437 12.4025ZM7.34305 5.59369C7.34305 5.23138 7.637 4.93742 7.99932 4.93742C8.36164 4.93742 8.65559 5.23274 8.65559 5.59369V9.09381C8.65559 9.45613 8.36164 9.75008 8.02393 9.75008C7.68622 9.75008 7.34305 9.45749 7.34305 9.09381V5.59369V5.59369ZM7.99932 12.3752C7.52462 12.3752 7.1396 11.9902 7.1396 11.5155C7.1396 11.0408 7.52434 10.6557 7.99932 10.6557C8.4743 10.6557 8.85904 11.0408 8.85904 11.5155C8.85794 11.9896 8.47512 12.3752 7.99932 12.3752Z" fill="white"/>
+</svg>
diff --git a/assets/icons/Icon16UserGroup.svg b/assets/icons/Icon16UserGroup.svg
new file mode 100644
index 0000000000..4f72d4b6b4
--- /dev/null
+++ b/assets/icons/Icon16UserGroup.svg
@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M5.9 8.00002C7.44656 8.00002 8.7 6.74637 8.7 5.20002C8.7 3.65368 7.44656 2.40002 5.9 2.40002C4.35344 2.40002 3.1 3.65368 3.1 5.20002C3.1 6.74637 4.35344 8.00002 5.9 8.00002ZM7.00906 9.05002H4.79094C2.69684 9.05002 1 10.7475 1 12.841C1 13.261 1.3395 13.6 1.75819 13.6H10.0409C10.4609 13.6 10.8 13.261 10.8 12.841C10.8 10.7475 9.1025 9.05002 7.00906 9.05002ZM11.4803 9.40002H9.86484C10.87 10.2247 11.5 11.4585 11.5 12.841C11.5 13.121 11.4169 13.3791 11.2812 13.6H14.3C14.6872 13.6 15 13.285 15 12.8803C15 10.9663 13.4337 9.40002 11.4803 9.40002ZM10.45 8.00002C11.8041 8.00002 12.9 6.90409 12.9 5.55002C12.9 4.19596 11.8041 3.10002 10.45 3.10002C9.90072 3.10002 9.39912 3.28716 8.9905 3.59243C9.2425 4.07631 9.4 4.61815 9.4 5.20002C9.4 5.97702 9.13903 6.69059 8.70897 7.27181C9.15281 7.72002 9.7675 8.00002 10.45 8.00002Z" fill="white"/>
+</svg>
diff --git a/assets/icons/split.svg b/assets/icons/split.svg
index 298de95092..9e7d3607eb 100644
--- a/assets/icons/split.svg
+++ b/assets/icons/split.svg
@@ -1,3 +1,5 @@
-<svg width="12" height="10" viewBox="0 0 12 10" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M10.8 0.800476C11.4619 0.800476 12 1.33766 12 2.00048V8.00048C12 8.66235 11.4619 9.20048 10.8 9.20048H1.2C0.537188 9.20048 0 8.66235 0 8.00048V2.00048C0 1.33766 0.537188 0.800476 1.2 0.800476H10.8ZM3.6 2.00048H1.2V8.00048H3.6V2.00048ZM4.8 8.00048H7.2V2.00048H4.8V8.00048ZM10.8 2.00048H8.4V8.00048H10.8V2.00048Z" fill="#8B8792"/>
+<svg width="11" height="12" viewBox="0 0 11 12" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="6" y="1" width="4" height="10" fill="white" fill-opacity="0.2"/>
+<rect x="0.5" y="0.5" width="10" height="11" rx="1.5" stroke="white"/>
+<rect x="5" y="1" width="1" height="10" fill="white"/>
 </svg>

From 4ca44493946bc174d99b242632d9c0e1a6fd1a45 Mon Sep 17 00:00:00 2001
From: Nate Butler <iamnbutler@gmail.com>
Date: Sat, 16 Jul 2022 11:51:10 -0400
Subject: [PATCH 02/22] Update icons in rust

Updated icons
- Diagnostic states
- Sidebar icons (project, contacts)
- Navigation arrows
---
 crates/diagnostics/src/items.rs | 6 +++---
 crates/workspace/src/toolbar.rs | 4 ++--
 crates/zed/src/zed.rs           | 4 ++--
 3 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/crates/diagnostics/src/items.rs b/crates/diagnostics/src/items.rs
index e2961ff3bd..498ea6616c 100644
--- a/crates/diagnostics/src/items.rs
+++ b/crates/diagnostics/src/items.rs
@@ -101,7 +101,7 @@ impl View for DiagnosticIndicator {
                 let mut summary_row = Flex::row();
                 if self.summary.error_count > 0 {
                     summary_row.add_children([
-                        Svg::new("icons/error-solid-14.svg")
+                        Svg::new("icons/Icon16CircleXMark.svg")
                             .with_color(style.icon_color_error)
                             .constrained()
                             .with_width(style.icon_width)
@@ -117,7 +117,7 @@ impl View for DiagnosticIndicator {
 
                 if self.summary.warning_count > 0 {
                     summary_row.add_children([
-                        Svg::new("icons/warning-solid-14.svg")
+                        Svg::new("icons/Icon16TriangleExclamation.svg")
                             .with_color(style.icon_color_warning)
                             .constrained()
                             .with_width(style.icon_width)
@@ -138,7 +138,7 @@ impl View for DiagnosticIndicator {
 
                 if self.summary.error_count == 0 && self.summary.warning_count == 0 {
                     summary_row.add_child(
-                        Svg::new("icons/no-error-solid-14.svg")
+                        Svg::new("icons/Icon16CircleCheck.svg")
                             .with_color(style.icon_color_ok)
                             .constrained()
                             .with_width(style.icon_width)
diff --git a/crates/workspace/src/toolbar.rs b/crates/workspace/src/toolbar.rs
index 636df9a039..de4a0083ac 100644
--- a/crates/workspace/src/toolbar.rs
+++ b/crates/workspace/src/toolbar.rs
@@ -118,7 +118,7 @@ impl View for Toolbar {
             .with_child(
                 Flex::row()
                     .with_child(nav_button(
-                        "icons/arrow-left.svg",
+                        "icons/Icon16ArrowLeft.svg",
                         button_style,
                         tooltip_style.clone(),
                         enable_go_backward,
@@ -131,7 +131,7 @@ impl View for Toolbar {
                         cx,
                     ))
                     .with_child(nav_button(
-                        "icons/arrow-right.svg",
+                        "icons/Icon16ArrowRight.svg",
                         button_style,
                         tooltip_style.clone(),
                         enable_go_forward,
diff --git a/crates/zed/src/zed.rs b/crates/zed/src/zed.rs
index d27a5b7c5b..e3304fe6e9 100644
--- a/crates/zed/src/zed.rs
+++ b/crates/zed/src/zed.rs
@@ -244,7 +244,7 @@ pub fn initialize_workspace(
 
     workspace.left_sidebar().update(cx, |sidebar, cx| {
         sidebar.add_item(
-            "icons/folder-tree-solid-14.svg",
+            "icons/Icon16FolderTree.svg",
             "Project Panel".to_string(),
             project_panel.into(),
             cx,
@@ -252,7 +252,7 @@ pub fn initialize_workspace(
     });
     workspace.right_sidebar().update(cx, |sidebar, cx| {
         sidebar.add_item(
-            "icons/contacts-solid-14.svg",
+            "icons/Icon16UserGroup.svg",
             "Contacts Panel".to_string(),
             contact_panel.into(),
             cx,

From 145d59d47a8955181c8e0e6130064274433774b8 Mon Sep 17 00:00:00 2001
From: Nate Butler <iamnbutler@gmail.com>
Date: Sat, 16 Jul 2022 11:51:59 -0400
Subject: [PATCH 03/22] Remove unneeded/state generated tokens

These will be located in a different repo going forwards since they are primarily for figma.
---
 styles/dist/cave-dark.json         |  519 ----
 styles/dist/cave-light.json        |  519 ----
 styles/dist/core.json              | 1181 --------
 styles/dist/solarized-dark.json    |  519 ----
 styles/dist/solarized-light.json   |  519 ----
 styles/dist/sulphurpool-dark.json  |  519 ----
 styles/dist/sulphurpool-light.json |  519 ----
 styles/dist/tokens.json            | 4297 ----------------------------
 8 files changed, 8592 deletions(-)
 delete mode 100644 styles/dist/cave-dark.json
 delete mode 100644 styles/dist/cave-light.json
 delete mode 100644 styles/dist/core.json
 delete mode 100644 styles/dist/solarized-dark.json
 delete mode 100644 styles/dist/solarized-light.json
 delete mode 100644 styles/dist/sulphurpool-dark.json
 delete mode 100644 styles/dist/sulphurpool-light.json
 delete mode 100644 styles/dist/tokens.json

diff --git a/styles/dist/cave-dark.json b/styles/dist/cave-dark.json
deleted file mode 100644
index 21daaf9731..0000000000
--- a/styles/dist/cave-dark.json
+++ /dev/null
@@ -1,519 +0,0 @@
-{
-  "meta": {
-    "themeName": "cave-dark"
-  },
-  "text": {
-    "primary": {
-      "value": "#e2dfe7",
-      "type": "color"
-    },
-    "secondary": {
-      "value": "#8b8792",
-      "type": "color"
-    },
-    "muted": {
-      "value": "#8b8792",
-      "type": "color"
-    },
-    "placeholder": {
-      "value": "#7e7887",
-      "type": "color"
-    },
-    "active": {
-      "value": "#efecf4",
-      "type": "color"
-    },
-    "feature": {
-      "value": "#576ddb",
-      "type": "color"
-    },
-    "ok": {
-      "value": "#2a9292",
-      "type": "color"
-    },
-    "error": {
-      "value": "#be4678",
-      "type": "color"
-    },
-    "warning": {
-      "value": "#a06e3b",
-      "type": "color"
-    },
-    "info": {
-      "value": "#576ddb",
-      "type": "color"
-    }
-  },
-  "icon": {
-    "primary": {
-      "value": "#e2dfe7",
-      "type": "color"
-    },
-    "secondary": {
-      "value": "#8b8792",
-      "type": "color"
-    },
-    "muted": {
-      "value": "#8b8792",
-      "type": "color"
-    },
-    "placeholder": {
-      "value": "#7e7887",
-      "type": "color"
-    },
-    "active": {
-      "value": "#efecf4",
-      "type": "color"
-    },
-    "feature": {
-      "value": "#576ddb",
-      "type": "color"
-    },
-    "ok": {
-      "value": "#2a9292",
-      "type": "color"
-    },
-    "error": {
-      "value": "#be4678",
-      "type": "color"
-    },
-    "warning": {
-      "value": "#a06e3b",
-      "type": "color"
-    },
-    "info": {
-      "value": "#576ddb",
-      "type": "color"
-    }
-  },
-  "background": {
-    "100": {
-      "base": {
-        "value": "#332f38",
-        "type": "color"
-      },
-      "hovered": {
-        "value": "#3f3b45",
-        "type": "color"
-      },
-      "active": {
-        "value": "#4c4653",
-        "type": "color"
-      }
-    },
-    "300": {
-      "base": {
-        "value": "#26232a",
-        "type": "color"
-      },
-      "hovered": {
-        "value": "#332f38",
-        "type": "color"
-      },
-      "active": {
-        "value": "#3f3b45",
-        "type": "color"
-      }
-    },
-    "500": {
-      "base": {
-        "value": "#19171c",
-        "type": "color"
-      },
-      "hovered": {
-        "value": "#1c1a20",
-        "type": "color"
-      },
-      "active": {
-        "value": "#201d23",
-        "type": "color"
-      }
-    },
-    "on300": {
-      "base": {
-        "value": "#19171c",
-        "type": "color"
-      },
-      "hovered": {
-        "value": "#1c1a20",
-        "type": "color"
-      },
-      "active": {
-        "value": "#201d23",
-        "type": "color"
-      }
-    },
-    "on500": {
-      "base": {
-        "value": "#332f38",
-        "type": "color"
-      },
-      "hovered": {
-        "value": "#3f3b45",
-        "type": "color"
-      },
-      "active": {
-        "value": "#4c4653",
-        "type": "color"
-      }
-    },
-    "ok": {
-      "base": {
-        "value": "#2a929226",
-        "type": "color"
-      },
-      "hovered": {
-        "value": "#2a929233",
-        "type": "color"
-      },
-      "active": {
-        "value": "#2a929240",
-        "type": "color"
-      }
-    },
-    "error": {
-      "base": {
-        "value": "#be467826",
-        "type": "color"
-      },
-      "hovered": {
-        "value": "#be467833",
-        "type": "color"
-      },
-      "active": {
-        "value": "#be467840",
-        "type": "color"
-      }
-    },
-    "warning": {
-      "base": {
-        "value": "#a06e3b26",
-        "type": "color"
-      },
-      "hovered": {
-        "value": "#a06e3b33",
-        "type": "color"
-      },
-      "active": {
-        "value": "#a06e3b40",
-        "type": "color"
-      }
-    },
-    "info": {
-      "base": {
-        "value": "#576ddb26",
-        "type": "color"
-      },
-      "hovered": {
-        "value": "#576ddb33",
-        "type": "color"
-      },
-      "active": {
-        "value": "#576ddb40",
-        "type": "color"
-      }
-    }
-  },
-  "border": {
-    "primary": {
-      "value": "#19171c",
-      "type": "color"
-    },
-    "secondary": {
-      "value": "#26232a",
-      "type": "color"
-    },
-    "muted": {
-      "value": "#655f6d",
-      "type": "color"
-    },
-    "active": {
-      "value": "#655f6d",
-      "type": "color"
-    },
-    "onMedia": {
-      "value": "#19171c1a",
-      "type": "color"
-    },
-    "ok": {
-      "value": "#2a929226",
-      "type": "color"
-    },
-    "error": {
-      "value": "#be467826",
-      "type": "color"
-    },
-    "warning": {
-      "value": "#a06e3b26",
-      "type": "color"
-    },
-    "info": {
-      "value": "#576ddb26",
-      "type": "color"
-    }
-  },
-  "editor": {
-    "background": {
-      "value": "#19171c",
-      "type": "color"
-    },
-    "indent_guide": {
-      "value": "#655f6d",
-      "type": "color"
-    },
-    "indent_guide_active": {
-      "value": "#26232a",
-      "type": "color"
-    },
-    "line": {
-      "active": {
-        "value": "#26232a",
-        "type": "color"
-      },
-      "highlighted": {
-        "value": "#332f38",
-        "type": "color"
-      }
-    },
-    "highlight": {
-      "selection": {
-        "value": "#576ddb3d",
-        "type": "color"
-      },
-      "occurrence": {
-        "value": "#5852603d",
-        "type": "color"
-      },
-      "activeOccurrence": {
-        "value": "#5852607a",
-        "type": "color"
-      },
-      "matchingBracket": {
-        "value": "#201d23",
-        "type": "color"
-      },
-      "match": {
-        "value": "#3d1576",
-        "type": "color"
-      },
-      "activeMatch": {
-        "value": "#782edf7a",
-        "type": "color"
-      },
-      "related": {
-        "value": "#1c1a20",
-        "type": "color"
-      }
-    },
-    "gutter": {
-      "primary": {
-        "value": "#7e7887",
-        "type": "color"
-      },
-      "active": {
-        "value": "#efecf4",
-        "type": "color"
-      }
-    }
-  },
-  "syntax": {
-    "primary": {
-      "value": "#efecf4",
-      "type": "color"
-    },
-    "comment": {
-      "value": "#8b8792",
-      "type": "color"
-    },
-    "keyword": {
-      "value": "#576ddb",
-      "type": "color"
-    },
-    "function": {
-      "value": "#a06e3b",
-      "type": "color"
-    },
-    "type": {
-      "value": "#398bc6",
-      "type": "color"
-    },
-    "variant": {
-      "value": "#576ddb",
-      "type": "color"
-    },
-    "property": {
-      "value": "#576ddb",
-      "type": "color"
-    },
-    "enum": {
-      "value": "#aa573c",
-      "type": "color"
-    },
-    "operator": {
-      "value": "#aa573c",
-      "type": "color"
-    },
-    "string": {
-      "value": "#aa573c",
-      "type": "color"
-    },
-    "number": {
-      "value": "#2a9292",
-      "type": "color"
-    },
-    "boolean": {
-      "value": "#2a9292",
-      "type": "color"
-    }
-  },
-  "player": {
-    "1": {
-      "baseColor": {
-        "value": "#576ddb",
-        "type": "color"
-      },
-      "cursorColor": {
-        "value": "#576ddb",
-        "type": "color"
-      },
-      "selectionColor": {
-        "value": "#576ddb3d",
-        "type": "color"
-      },
-      "borderColor": {
-        "value": "#576ddbcc",
-        "type": "color"
-      }
-    },
-    "2": {
-      "baseColor": {
-        "value": "#2a9292",
-        "type": "color"
-      },
-      "cursorColor": {
-        "value": "#2a9292",
-        "type": "color"
-      },
-      "selectionColor": {
-        "value": "#2a92923d",
-        "type": "color"
-      },
-      "borderColor": {
-        "value": "#2a9292cc",
-        "type": "color"
-      }
-    },
-    "3": {
-      "baseColor": {
-        "value": "#bf40bf",
-        "type": "color"
-      },
-      "cursorColor": {
-        "value": "#bf40bf",
-        "type": "color"
-      },
-      "selectionColor": {
-        "value": "#bf40bf3d",
-        "type": "color"
-      },
-      "borderColor": {
-        "value": "#bf40bfcc",
-        "type": "color"
-      }
-    },
-    "4": {
-      "baseColor": {
-        "value": "#aa573c",
-        "type": "color"
-      },
-      "cursorColor": {
-        "value": "#aa573c",
-        "type": "color"
-      },
-      "selectionColor": {
-        "value": "#aa573c3d",
-        "type": "color"
-      },
-      "borderColor": {
-        "value": "#aa573ccc",
-        "type": "color"
-      }
-    },
-    "5": {
-      "baseColor": {
-        "value": "#955ae7",
-        "type": "color"
-      },
-      "cursorColor": {
-        "value": "#955ae7",
-        "type": "color"
-      },
-      "selectionColor": {
-        "value": "#955ae73d",
-        "type": "color"
-      },
-      "borderColor": {
-        "value": "#955ae7cc",
-        "type": "color"
-      }
-    },
-    "6": {
-      "baseColor": {
-        "value": "#398bc6",
-        "type": "color"
-      },
-      "cursorColor": {
-        "value": "#398bc6",
-        "type": "color"
-      },
-      "selectionColor": {
-        "value": "#398bc63d",
-        "type": "color"
-      },
-      "borderColor": {
-        "value": "#398bc6cc",
-        "type": "color"
-      }
-    },
-    "7": {
-      "baseColor": {
-        "value": "#be4678",
-        "type": "color"
-      },
-      "cursorColor": {
-        "value": "#be4678",
-        "type": "color"
-      },
-      "selectionColor": {
-        "value": "#be46783d",
-        "type": "color"
-      },
-      "borderColor": {
-        "value": "#be4678cc",
-        "type": "color"
-      }
-    },
-    "8": {
-      "baseColor": {
-        "value": "#a06e3b",
-        "type": "color"
-      },
-      "cursorColor": {
-        "value": "#a06e3b",
-        "type": "color"
-      },
-      "selectionColor": {
-        "value": "#a06e3b3d",
-        "type": "color"
-      },
-      "borderColor": {
-        "value": "#a06e3bcc",
-        "type": "color"
-      }
-    }
-  },
-  "shadowAlpha": {
-    "value": 0.24,
-    "type": "number"
-  }
-}
\ No newline at end of file
diff --git a/styles/dist/cave-light.json b/styles/dist/cave-light.json
deleted file mode 100644
index 93ad50e8da..0000000000
--- a/styles/dist/cave-light.json
+++ /dev/null
@@ -1,519 +0,0 @@
-{
-  "meta": {
-    "themeName": "cave-light"
-  },
-  "text": {
-    "primary": {
-      "value": "#26232a",
-      "type": "color"
-    },
-    "secondary": {
-      "value": "#585260",
-      "type": "color"
-    },
-    "muted": {
-      "value": "#585260",
-      "type": "color"
-    },
-    "placeholder": {
-      "value": "#655f6d",
-      "type": "color"
-    },
-    "active": {
-      "value": "#19171c",
-      "type": "color"
-    },
-    "feature": {
-      "value": "#576ddb",
-      "type": "color"
-    },
-    "ok": {
-      "value": "#2a9292",
-      "type": "color"
-    },
-    "error": {
-      "value": "#be4678",
-      "type": "color"
-    },
-    "warning": {
-      "value": "#a06e3b",
-      "type": "color"
-    },
-    "info": {
-      "value": "#576ddb",
-      "type": "color"
-    }
-  },
-  "icon": {
-    "primary": {
-      "value": "#26232a",
-      "type": "color"
-    },
-    "secondary": {
-      "value": "#585260",
-      "type": "color"
-    },
-    "muted": {
-      "value": "#585260",
-      "type": "color"
-    },
-    "placeholder": {
-      "value": "#655f6d",
-      "type": "color"
-    },
-    "active": {
-      "value": "#19171c",
-      "type": "color"
-    },
-    "feature": {
-      "value": "#576ddb",
-      "type": "color"
-    },
-    "ok": {
-      "value": "#2a9292",
-      "type": "color"
-    },
-    "error": {
-      "value": "#be4678",
-      "type": "color"
-    },
-    "warning": {
-      "value": "#a06e3b",
-      "type": "color"
-    },
-    "info": {
-      "value": "#576ddb",
-      "type": "color"
-    }
-  },
-  "background": {
-    "100": {
-      "base": {
-        "value": "#ccc9d2",
-        "type": "color"
-      },
-      "hovered": {
-        "value": "#b7b3bd",
-        "type": "color"
-      },
-      "active": {
-        "value": "#a19da7",
-        "type": "color"
-      }
-    },
-    "300": {
-      "base": {
-        "value": "#e2dfe7",
-        "type": "color"
-      },
-      "hovered": {
-        "value": "#ccc9d2",
-        "type": "color"
-      },
-      "active": {
-        "value": "#b7b3bd",
-        "type": "color"
-      }
-    },
-    "500": {
-      "base": {
-        "value": "#efecf4",
-        "type": "color"
-      },
-      "hovered": {
-        "value": "#ece9f1",
-        "type": "color"
-      },
-      "active": {
-        "value": "#e9e6ee",
-        "type": "color"
-      }
-    },
-    "on300": {
-      "base": {
-        "value": "#efecf4",
-        "type": "color"
-      },
-      "hovered": {
-        "value": "#ece9f1",
-        "type": "color"
-      },
-      "active": {
-        "value": "#e9e6ee",
-        "type": "color"
-      }
-    },
-    "on500": {
-      "base": {
-        "value": "#ccc9d2",
-        "type": "color"
-      },
-      "hovered": {
-        "value": "#b7b3bd",
-        "type": "color"
-      },
-      "active": {
-        "value": "#a19da7",
-        "type": "color"
-      }
-    },
-    "ok": {
-      "base": {
-        "value": "#2a929226",
-        "type": "color"
-      },
-      "hovered": {
-        "value": "#2a929233",
-        "type": "color"
-      },
-      "active": {
-        "value": "#2a929240",
-        "type": "color"
-      }
-    },
-    "error": {
-      "base": {
-        "value": "#be467826",
-        "type": "color"
-      },
-      "hovered": {
-        "value": "#be467833",
-        "type": "color"
-      },
-      "active": {
-        "value": "#be467840",
-        "type": "color"
-      }
-    },
-    "warning": {
-      "base": {
-        "value": "#a06e3b26",
-        "type": "color"
-      },
-      "hovered": {
-        "value": "#a06e3b33",
-        "type": "color"
-      },
-      "active": {
-        "value": "#a06e3b40",
-        "type": "color"
-      }
-    },
-    "info": {
-      "base": {
-        "value": "#576ddb26",
-        "type": "color"
-      },
-      "hovered": {
-        "value": "#576ddb33",
-        "type": "color"
-      },
-      "active": {
-        "value": "#576ddb40",
-        "type": "color"
-      }
-    }
-  },
-  "border": {
-    "primary": {
-      "value": "#b7b3bd",
-      "type": "color"
-    },
-    "secondary": {
-      "value": "#ccc9d2",
-      "type": "color"
-    },
-    "muted": {
-      "value": "#e2dfe7",
-      "type": "color"
-    },
-    "active": {
-      "value": "#655f6d",
-      "type": "color"
-    },
-    "onMedia": {
-      "value": "#efecf41a",
-      "type": "color"
-    },
-    "ok": {
-      "value": "#2a929226",
-      "type": "color"
-    },
-    "error": {
-      "value": "#be467826",
-      "type": "color"
-    },
-    "warning": {
-      "value": "#a06e3b26",
-      "type": "color"
-    },
-    "info": {
-      "value": "#576ddb26",
-      "type": "color"
-    }
-  },
-  "editor": {
-    "background": {
-      "value": "#efecf4",
-      "type": "color"
-    },
-    "indent_guide": {
-      "value": "#e2dfe7",
-      "type": "color"
-    },
-    "indent_guide_active": {
-      "value": "#ccc9d2",
-      "type": "color"
-    },
-    "line": {
-      "active": {
-        "value": "#e2dfe7",
-        "type": "color"
-      },
-      "highlighted": {
-        "value": "#ccc9d2",
-        "type": "color"
-      }
-    },
-    "highlight": {
-      "selection": {
-        "value": "#576ddb3d",
-        "type": "color"
-      },
-      "occurrence": {
-        "value": "#8b87921f",
-        "type": "color"
-      },
-      "activeOccurrence": {
-        "value": "#8b87923d",
-        "type": "color"
-      },
-      "matchingBracket": {
-        "value": "#e9e6ee",
-        "type": "color"
-      },
-      "match": {
-        "value": "#d5bdfa",
-        "type": "color"
-      },
-      "activeMatch": {
-        "value": "#a775ee3d",
-        "type": "color"
-      },
-      "related": {
-        "value": "#ece9f1",
-        "type": "color"
-      }
-    },
-    "gutter": {
-      "primary": {
-        "value": "#655f6d",
-        "type": "color"
-      },
-      "active": {
-        "value": "#19171c",
-        "type": "color"
-      }
-    }
-  },
-  "syntax": {
-    "primary": {
-      "value": "#19171c",
-      "type": "color"
-    },
-    "comment": {
-      "value": "#585260",
-      "type": "color"
-    },
-    "keyword": {
-      "value": "#576ddb",
-      "type": "color"
-    },
-    "function": {
-      "value": "#a06e3b",
-      "type": "color"
-    },
-    "type": {
-      "value": "#398bc6",
-      "type": "color"
-    },
-    "variant": {
-      "value": "#576ddb",
-      "type": "color"
-    },
-    "property": {
-      "value": "#576ddb",
-      "type": "color"
-    },
-    "enum": {
-      "value": "#aa573c",
-      "type": "color"
-    },
-    "operator": {
-      "value": "#aa573c",
-      "type": "color"
-    },
-    "string": {
-      "value": "#aa573c",
-      "type": "color"
-    },
-    "number": {
-      "value": "#2a9292",
-      "type": "color"
-    },
-    "boolean": {
-      "value": "#2a9292",
-      "type": "color"
-    }
-  },
-  "player": {
-    "1": {
-      "baseColor": {
-        "value": "#576ddb",
-        "type": "color"
-      },
-      "cursorColor": {
-        "value": "#576ddb",
-        "type": "color"
-      },
-      "selectionColor": {
-        "value": "#576ddb3d",
-        "type": "color"
-      },
-      "borderColor": {
-        "value": "#576ddbcc",
-        "type": "color"
-      }
-    },
-    "2": {
-      "baseColor": {
-        "value": "#2a9292",
-        "type": "color"
-      },
-      "cursorColor": {
-        "value": "#2a9292",
-        "type": "color"
-      },
-      "selectionColor": {
-        "value": "#2a92923d",
-        "type": "color"
-      },
-      "borderColor": {
-        "value": "#2a9292cc",
-        "type": "color"
-      }
-    },
-    "3": {
-      "baseColor": {
-        "value": "#bf40bf",
-        "type": "color"
-      },
-      "cursorColor": {
-        "value": "#bf40bf",
-        "type": "color"
-      },
-      "selectionColor": {
-        "value": "#bf40bf3d",
-        "type": "color"
-      },
-      "borderColor": {
-        "value": "#bf40bfcc",
-        "type": "color"
-      }
-    },
-    "4": {
-      "baseColor": {
-        "value": "#aa573c",
-        "type": "color"
-      },
-      "cursorColor": {
-        "value": "#aa573c",
-        "type": "color"
-      },
-      "selectionColor": {
-        "value": "#aa573c3d",
-        "type": "color"
-      },
-      "borderColor": {
-        "value": "#aa573ccc",
-        "type": "color"
-      }
-    },
-    "5": {
-      "baseColor": {
-        "value": "#955ae7",
-        "type": "color"
-      },
-      "cursorColor": {
-        "value": "#955ae7",
-        "type": "color"
-      },
-      "selectionColor": {
-        "value": "#955ae73d",
-        "type": "color"
-      },
-      "borderColor": {
-        "value": "#955ae7cc",
-        "type": "color"
-      }
-    },
-    "6": {
-      "baseColor": {
-        "value": "#398bc6",
-        "type": "color"
-      },
-      "cursorColor": {
-        "value": "#398bc6",
-        "type": "color"
-      },
-      "selectionColor": {
-        "value": "#398bc63d",
-        "type": "color"
-      },
-      "borderColor": {
-        "value": "#398bc6cc",
-        "type": "color"
-      }
-    },
-    "7": {
-      "baseColor": {
-        "value": "#be4678",
-        "type": "color"
-      },
-      "cursorColor": {
-        "value": "#be4678",
-        "type": "color"
-      },
-      "selectionColor": {
-        "value": "#be46783d",
-        "type": "color"
-      },
-      "borderColor": {
-        "value": "#be4678cc",
-        "type": "color"
-      }
-    },
-    "8": {
-      "baseColor": {
-        "value": "#a06e3b",
-        "type": "color"
-      },
-      "cursorColor": {
-        "value": "#a06e3b",
-        "type": "color"
-      },
-      "selectionColor": {
-        "value": "#a06e3b3d",
-        "type": "color"
-      },
-      "borderColor": {
-        "value": "#a06e3bcc",
-        "type": "color"
-      }
-    }
-  },
-  "shadowAlpha": {
-    "value": 0.12,
-    "type": "number"
-  }
-}
\ No newline at end of file
diff --git a/styles/dist/core.json b/styles/dist/core.json
deleted file mode 100644
index 6540c809ac..0000000000
--- a/styles/dist/core.json
+++ /dev/null
@@ -1,1181 +0,0 @@
-{
-  "color": {
-    "neutral": {
-      "0": {
-        "value": "#ffffff",
-        "description": "Step: 0",
-        "type": "color"
-      },
-      "25": {
-        "value": "#f8f8f8",
-        "description": "Step: 25",
-        "type": "color"
-      },
-      "50": {
-        "value": "#f1f1f1",
-        "description": "Step: 50",
-        "type": "color"
-      },
-      "75": {
-        "value": "#eaeaea",
-        "description": "Step: 75",
-        "type": "color"
-      },
-      "100": {
-        "value": "#e3e3e3",
-        "description": "Step: 100",
-        "type": "color"
-      },
-      "125": {
-        "value": "#dcdcdc",
-        "description": "Step: 125",
-        "type": "color"
-      },
-      "150": {
-        "value": "#d5d5d5",
-        "description": "Step: 150",
-        "type": "color"
-      },
-      "175": {
-        "value": "#cdcdcd",
-        "description": "Step: 175",
-        "type": "color"
-      },
-      "200": {
-        "value": "#c6c6c6",
-        "description": "Step: 200",
-        "type": "color"
-      },
-      "225": {
-        "value": "#bfbfbf",
-        "description": "Step: 225",
-        "type": "color"
-      },
-      "250": {
-        "value": "#b8b8b8",
-        "description": "Step: 250",
-        "type": "color"
-      },
-      "275": {
-        "value": "#b1b1b1",
-        "description": "Step: 275",
-        "type": "color"
-      },
-      "300": {
-        "value": "#aaaaaa",
-        "description": "Step: 300",
-        "type": "color"
-      },
-      "325": {
-        "value": "#a3a3a3",
-        "description": "Step: 325",
-        "type": "color"
-      },
-      "350": {
-        "value": "#9c9c9c",
-        "description": "Step: 350",
-        "type": "color"
-      },
-      "375": {
-        "value": "#959595",
-        "description": "Step: 375",
-        "type": "color"
-      },
-      "400": {
-        "value": "#8e8e8e",
-        "description": "Step: 400",
-        "type": "color"
-      },
-      "425": {
-        "value": "#878787",
-        "description": "Step: 425",
-        "type": "color"
-      },
-      "450": {
-        "value": "#808080",
-        "description": "Step: 450",
-        "type": "color"
-      },
-      "475": {
-        "value": "#787878",
-        "description": "Step: 475",
-        "type": "color"
-      },
-      "500": {
-        "value": "#717171",
-        "description": "Step: 500",
-        "type": "color"
-      },
-      "525": {
-        "value": "#6a6a6a",
-        "description": "Step: 525",
-        "type": "color"
-      },
-      "550": {
-        "value": "#636363",
-        "description": "Step: 550",
-        "type": "color"
-      },
-      "575": {
-        "value": "#5c5c5c",
-        "description": "Step: 575",
-        "type": "color"
-      },
-      "600": {
-        "value": "#555555",
-        "description": "Step: 600",
-        "type": "color"
-      },
-      "625": {
-        "value": "#4e4e4e",
-        "description": "Step: 625",
-        "type": "color"
-      },
-      "650": {
-        "value": "#474747",
-        "description": "Step: 650",
-        "type": "color"
-      },
-      "675": {
-        "value": "#404040",
-        "description": "Step: 675",
-        "type": "color"
-      },
-      "700": {
-        "value": "#393939",
-        "description": "Step: 700",
-        "type": "color"
-      },
-      "725": {
-        "value": "#323232",
-        "description": "Step: 725",
-        "type": "color"
-      },
-      "750": {
-        "value": "#2b2b2b",
-        "description": "Step: 750",
-        "type": "color"
-      },
-      "775": {
-        "value": "#232323",
-        "description": "Step: 775",
-        "type": "color"
-      },
-      "800": {
-        "value": "#1c1c1c",
-        "description": "Step: 800",
-        "type": "color"
-      },
-      "825": {
-        "value": "#151515",
-        "description": "Step: 825",
-        "type": "color"
-      },
-      "850": {
-        "value": "#0e0e0e",
-        "description": "Step: 850",
-        "type": "color"
-      },
-      "875": {
-        "value": "#070707",
-        "description": "Step: 875",
-        "type": "color"
-      },
-      "900": {
-        "value": "#000000",
-        "description": "Step: 900",
-        "type": "color"
-      }
-    },
-    "rose": {
-      "0": {
-        "value": "#feecef",
-        "description": "Step: 0",
-        "type": "color"
-      },
-      "100": {
-        "value": "#fcc5cf",
-        "description": "Step: 100",
-        "type": "color"
-      },
-      "200": {
-        "value": "#fa9fae",
-        "description": "Step: 200",
-        "type": "color"
-      },
-      "300": {
-        "value": "#f8788e",
-        "description": "Step: 300",
-        "type": "color"
-      },
-      "400": {
-        "value": "#f5526e",
-        "description": "Step: 400",
-        "type": "color"
-      },
-      "500": {
-        "value": "#f0284a",
-        "description": "Step: 500",
-        "type": "color"
-      },
-      "600": {
-        "value": "#cd1434",
-        "description": "Step: 600",
-        "type": "color"
-      },
-      "700": {
-        "value": "#97142a",
-        "description": "Step: 700",
-        "type": "color"
-      },
-      "800": {
-        "value": "#64101e",
-        "description": "Step: 800",
-        "type": "color"
-      },
-      "900": {
-        "value": "#330a11",
-        "description": "Step: 900",
-        "type": "color"
-      }
-    },
-    "red": {
-      "0": {
-        "value": "#feecec",
-        "description": "Step: 0",
-        "type": "color"
-      },
-      "100": {
-        "value": "#fcc6c6",
-        "description": "Step: 100",
-        "type": "color"
-      },
-      "200": {
-        "value": "#f9a0a0",
-        "description": "Step: 200",
-        "type": "color"
-      },
-      "300": {
-        "value": "#f57b7b",
-        "description": "Step: 300",
-        "type": "color"
-      },
-      "400": {
-        "value": "#f15656",
-        "description": "Step: 400",
-        "type": "color"
-      },
-      "500": {
-        "value": "#eb2d2d",
-        "description": "Step: 500",
-        "type": "color"
-      },
-      "600": {
-        "value": "#c91818",
-        "description": "Step: 600",
-        "type": "color"
-      },
-      "700": {
-        "value": "#951515",
-        "description": "Step: 700",
-        "type": "color"
-      },
-      "800": {
-        "value": "#631111",
-        "description": "Step: 800",
-        "type": "color"
-      },
-      "900": {
-        "value": "#330a0a",
-        "description": "Step: 900",
-        "type": "color"
-      }
-    },
-    "orange": {
-      "0": {
-        "value": "#fef3ec",
-        "description": "Step: 0",
-        "type": "color"
-      },
-      "100": {
-        "value": "#fcd6bd",
-        "description": "Step: 100",
-        "type": "color"
-      },
-      "200": {
-        "value": "#fab98e",
-        "description": "Step: 200",
-        "type": "color"
-      },
-      "300": {
-        "value": "#f99d5f",
-        "description": "Step: 300",
-        "type": "color"
-      },
-      "400": {
-        "value": "#f9812e",
-        "description": "Step: 400",
-        "type": "color"
-      },
-      "500": {
-        "value": "#ee670a",
-        "description": "Step: 500",
-        "type": "color"
-      },
-      "600": {
-        "value": "#bb550e",
-        "description": "Step: 600",
-        "type": "color"
-      },
-      "700": {
-        "value": "#8b4210",
-        "description": "Step: 700",
-        "type": "color"
-      },
-      "800": {
-        "value": "#5d2f0e",
-        "description": "Step: 800",
-        "type": "color"
-      },
-      "900": {
-        "value": "#331b0a",
-        "description": "Step: 900",
-        "type": "color"
-      }
-    },
-    "amber": {
-      "0": {
-        "value": "#fef7ec",
-        "description": "Step: 0",
-        "type": "color"
-      },
-      "100": {
-        "value": "#fce2ba",
-        "description": "Step: 100",
-        "type": "color"
-      },
-      "200": {
-        "value": "#f9ce89",
-        "description": "Step: 200",
-        "type": "color"
-      },
-      "300": {
-        "value": "#f7bb57",
-        "description": "Step: 300",
-        "type": "color"
-      },
-      "400": {
-        "value": "#f6a724",
-        "description": "Step: 400",
-        "type": "color"
-      },
-      "500": {
-        "value": "#de900c",
-        "description": "Step: 500",
-        "type": "color"
-      },
-      "600": {
-        "value": "#b0740f",
-        "description": "Step: 600",
-        "type": "color"
-      },
-      "700": {
-        "value": "#845910",
-        "description": "Step: 700",
-        "type": "color"
-      },
-      "800": {
-        "value": "#5a3e0e",
-        "description": "Step: 800",
-        "type": "color"
-      },
-      "900": {
-        "value": "#33240a",
-        "description": "Step: 900",
-        "type": "color"
-      }
-    },
-    "yellow": {
-      "0": {
-        "value": "#fef9ec",
-        "description": "Step: 0",
-        "type": "color"
-      },
-      "100": {
-        "value": "#fce9b7",
-        "description": "Step: 100",
-        "type": "color"
-      },
-      "200": {
-        "value": "#f9da82",
-        "description": "Step: 200",
-        "type": "color"
-      },
-      "300": {
-        "value": "#f8cc4d",
-        "description": "Step: 300",
-        "type": "color"
-      },
-      "400": {
-        "value": "#f7bf17",
-        "description": "Step: 400",
-        "type": "color"
-      },
-      "500": {
-        "value": "#d3a20b",
-        "description": "Step: 500",
-        "type": "color"
-      },
-      "600": {
-        "value": "#a8820e",
-        "description": "Step: 600",
-        "type": "color"
-      },
-      "700": {
-        "value": "#7e630f",
-        "description": "Step: 700",
-        "type": "color"
-      },
-      "800": {
-        "value": "#58460e",
-        "description": "Step: 800",
-        "type": "color"
-      },
-      "900": {
-        "value": "#33290a",
-        "description": "Step: 900",
-        "type": "color"
-      }
-    },
-    "lime": {
-      "0": {
-        "value": "#f7feec",
-        "description": "Step: 0",
-        "type": "color"
-      },
-      "100": {
-        "value": "#dffab5",
-        "description": "Step: 100",
-        "type": "color"
-      },
-      "200": {
-        "value": "#c7f57f",
-        "description": "Step: 200",
-        "type": "color"
-      },
-      "300": {
-        "value": "#aeef4b",
-        "description": "Step: 300",
-        "type": "color"
-      },
-      "400": {
-        "value": "#96e818",
-        "description": "Step: 400",
-        "type": "color"
-      },
-      "500": {
-        "value": "#79ba16",
-        "description": "Step: 500",
-        "type": "color"
-      },
-      "600": {
-        "value": "#639714",
-        "description": "Step: 600",
-        "type": "color"
-      },
-      "700": {
-        "value": "#4e7412",
-        "description": "Step: 700",
-        "type": "color"
-      },
-      "800": {
-        "value": "#38530f",
-        "description": "Step: 800",
-        "type": "color"
-      },
-      "900": {
-        "value": "#23330a",
-        "description": "Step: 900",
-        "type": "color"
-      }
-    },
-    "green": {
-      "0": {
-        "value": "#ecfef2",
-        "description": "Step: 0",
-        "type": "color"
-      },
-      "100": {
-        "value": "#b7f9ce",
-        "description": "Step: 100",
-        "type": "color"
-      },
-      "200": {
-        "value": "#84f2ab",
-        "description": "Step: 200",
-        "type": "color"
-      },
-      "300": {
-        "value": "#54e989",
-        "description": "Step: 300",
-        "type": "color"
-      },
-      "400": {
-        "value": "#27dd69",
-        "description": "Step: 400",
-        "type": "color"
-      },
-      "500": {
-        "value": "#20b456",
-        "description": "Step: 500",
-        "type": "color"
-      },
-      "600": {
-        "value": "#1b9447",
-        "description": "Step: 600",
-        "type": "color"
-      },
-      "700": {
-        "value": "#157338",
-        "description": "Step: 700",
-        "type": "color"
-      },
-      "800": {
-        "value": "#105328",
-        "description": "Step: 800",
-        "type": "color"
-      },
-      "900": {
-        "value": "#0a3319",
-        "description": "Step: 900",
-        "type": "color"
-      }
-    },
-    "emerald": {
-      "0": {
-        "value": "#ecfef8",
-        "description": "Step: 0",
-        "type": "color"
-      },
-      "100": {
-        "value": "#b0fae1",
-        "description": "Step: 100",
-        "type": "color"
-      },
-      "200": {
-        "value": "#74f6cb",
-        "description": "Step: 200",
-        "type": "color"
-      },
-      "300": {
-        "value": "#39f0b3",
-        "description": "Step: 300",
-        "type": "color"
-      },
-      "400": {
-        "value": "#12d796",
-        "description": "Step: 400",
-        "type": "color"
-      },
-      "500": {
-        "value": "#10a977",
-        "description": "Step: 500",
-        "type": "color"
-      },
-      "600": {
-        "value": "#118a62",
-        "description": "Step: 600",
-        "type": "color"
-      },
-      "700": {
-        "value": "#106c4e",
-        "description": "Step: 700",
-        "type": "color"
-      },
-      "800": {
-        "value": "#0d4f3a",
-        "description": "Step: 800",
-        "type": "color"
-      },
-      "900": {
-        "value": "#0a3326",
-        "description": "Step: 900",
-        "type": "color"
-      }
-    },
-    "teal": {
-      "0": {
-        "value": "#ecfefc",
-        "description": "Step: 0",
-        "type": "color"
-      },
-      "100": {
-        "value": "#b1faf2",
-        "description": "Step: 100",
-        "type": "color"
-      },
-      "200": {
-        "value": "#76f5e7",
-        "description": "Step: 200",
-        "type": "color"
-      },
-      "300": {
-        "value": "#3eeeda",
-        "description": "Step: 300",
-        "type": "color"
-      },
-      "400": {
-        "value": "#16d6c1",
-        "description": "Step: 400",
-        "type": "color"
-      },
-      "500": {
-        "value": "#14a898",
-        "description": "Step: 500",
-        "type": "color"
-      },
-      "600": {
-        "value": "#138a7d",
-        "description": "Step: 600",
-        "type": "color"
-      },
-      "700": {
-        "value": "#116c62",
-        "description": "Step: 700",
-        "type": "color"
-      },
-      "800": {
-        "value": "#0e4f48",
-        "description": "Step: 800",
-        "type": "color"
-      },
-      "900": {
-        "value": "#0a332f",
-        "description": "Step: 900",
-        "type": "color"
-      }
-    },
-    "cyan": {
-      "0": {
-        "value": "#ecfcfe",
-        "description": "Step: 0",
-        "type": "color"
-      },
-      "100": {
-        "value": "#b2f3fb",
-        "description": "Step: 100",
-        "type": "color"
-      },
-      "200": {
-        "value": "#78eaf9",
-        "description": "Step: 200",
-        "type": "color"
-      },
-      "300": {
-        "value": "#3de2f8",
-        "description": "Step: 300",
-        "type": "color"
-      },
-      "400": {
-        "value": "#07d5f1",
-        "description": "Step: 400",
-        "type": "color"
-      },
-      "500": {
-        "value": "#09aac0",
-        "description": "Step: 500",
-        "type": "color"
-      },
-      "600": {
-        "value": "#0c8a9a",
-        "description": "Step: 600",
-        "type": "color"
-      },
-      "700": {
-        "value": "#0e6a75",
-        "description": "Step: 700",
-        "type": "color"
-      },
-      "800": {
-        "value": "#0d4c53",
-        "description": "Step: 800",
-        "type": "color"
-      },
-      "900": {
-        "value": "#0a2f33",
-        "description": "Step: 900",
-        "type": "color"
-      }
-    },
-    "sky": {
-      "0": {
-        "value": "#ecf8fe",
-        "description": "Step: 0",
-        "type": "color"
-      },
-      "100": {
-        "value": "#b9e5fb",
-        "description": "Step: 100",
-        "type": "color"
-      },
-      "200": {
-        "value": "#86d3f8",
-        "description": "Step: 200",
-        "type": "color"
-      },
-      "300": {
-        "value": "#53c1f5",
-        "description": "Step: 300",
-        "type": "color"
-      },
-      "400": {
-        "value": "#20b0f2",
-        "description": "Step: 400",
-        "type": "color"
-      },
-      "500": {
-        "value": "#1096d3",
-        "description": "Step: 500",
-        "type": "color"
-      },
-      "600": {
-        "value": "#1179a8",
-        "description": "Step: 600",
-        "type": "color"
-      },
-      "700": {
-        "value": "#115c7f",
-        "description": "Step: 700",
-        "type": "color"
-      },
-      "800": {
-        "value": "#0e4158",
-        "description": "Step: 800",
-        "type": "color"
-      },
-      "900": {
-        "value": "#0a2633",
-        "description": "Step: 900",
-        "type": "color"
-      }
-    },
-    "blue": {
-      "0": {
-        "value": "#ecf3fe",
-        "description": "Step: 0",
-        "type": "color"
-      },
-      "100": {
-        "value": "#c5dafc",
-        "description": "Step: 100",
-        "type": "color"
-      },
-      "200": {
-        "value": "#9ec1fa",
-        "description": "Step: 200",
-        "type": "color"
-      },
-      "300": {
-        "value": "#76a8f8",
-        "description": "Step: 300",
-        "type": "color"
-      },
-      "400": {
-        "value": "#4f8ff7",
-        "description": "Step: 400",
-        "type": "color"
-      },
-      "500": {
-        "value": "#2472f2",
-        "description": "Step: 500",
-        "type": "color"
-      },
-      "600": {
-        "value": "#135acd",
-        "description": "Step: 600",
-        "type": "color"
-      },
-      "700": {
-        "value": "#134697",
-        "description": "Step: 700",
-        "type": "color"
-      },
-      "800": {
-        "value": "#103063",
-        "description": "Step: 800",
-        "type": "color"
-      },
-      "900": {
-        "value": "#0a1a33",
-        "description": "Step: 900",
-        "type": "color"
-      }
-    },
-    "indigo": {
-      "0": {
-        "value": "#ececfe",
-        "description": "Step: 0",
-        "type": "color"
-      },
-      "100": {
-        "value": "#cdcdfc",
-        "description": "Step: 100",
-        "type": "color"
-      },
-      "200": {
-        "value": "#aeaff9",
-        "description": "Step: 200",
-        "type": "color"
-      },
-      "300": {
-        "value": "#9091f6",
-        "description": "Step: 300",
-        "type": "color"
-      },
-      "400": {
-        "value": "#7274f3",
-        "description": "Step: 400",
-        "type": "color"
-      },
-      "500": {
-        "value": "#484bed",
-        "description": "Step: 500",
-        "type": "color"
-      },
-      "600": {
-        "value": "#1b1edc",
-        "description": "Step: 600",
-        "type": "color"
-      },
-      "700": {
-        "value": "#1819a1",
-        "description": "Step: 700",
-        "type": "color"
-      },
-      "800": {
-        "value": "#121269",
-        "description": "Step: 800",
-        "type": "color"
-      },
-      "900": {
-        "value": "#0a0a33",
-        "description": "Step: 900",
-        "type": "color"
-      }
-    },
-    "violet": {
-      "0": {
-        "value": "#f1ecfe",
-        "description": "Step: 0",
-        "type": "color"
-      },
-      "100": {
-        "value": "#daccfc",
-        "description": "Step: 100",
-        "type": "color"
-      },
-      "200": {
-        "value": "#c3acfb",
-        "description": "Step: 200",
-        "type": "color"
-      },
-      "300": {
-        "value": "#ac8cf9",
-        "description": "Step: 300",
-        "type": "color"
-      },
-      "400": {
-        "value": "#966cf7",
-        "description": "Step: 400",
-        "type": "color"
-      },
-      "500": {
-        "value": "#7741f2",
-        "description": "Step: 500",
-        "type": "color"
-      },
-      "600": {
-        "value": "#5316e0",
-        "description": "Step: 600",
-        "type": "color"
-      },
-      "700": {
-        "value": "#3f15a3",
-        "description": "Step: 700",
-        "type": "color"
-      },
-      "800": {
-        "value": "#2b116a",
-        "description": "Step: 800",
-        "type": "color"
-      },
-      "900": {
-        "value": "#160a33",
-        "description": "Step: 900",
-        "type": "color"
-      }
-    },
-    "purple": {
-      "0": {
-        "value": "#f5ecfe",
-        "description": "Step: 0",
-        "type": "color"
-      },
-      "100": {
-        "value": "#e4cbfc",
-        "description": "Step: 100",
-        "type": "color"
-      },
-      "200": {
-        "value": "#d2a9fb",
-        "description": "Step: 200",
-        "type": "color"
-      },
-      "300": {
-        "value": "#c188f9",
-        "description": "Step: 300",
-        "type": "color"
-      },
-      "400": {
-        "value": "#b066f8",
-        "description": "Step: 400",
-        "type": "color"
-      },
-      "500": {
-        "value": "#993bf3",
-        "description": "Step: 500",
-        "type": "color"
-      },
-      "600": {
-        "value": "#7b14dd",
-        "description": "Step: 600",
-        "type": "color"
-      },
-      "700": {
-        "value": "#5c14a1",
-        "description": "Step: 700",
-        "type": "color"
-      },
-      "800": {
-        "value": "#3e1169",
-        "description": "Step: 800",
-        "type": "color"
-      },
-      "900": {
-        "value": "#1f0a33",
-        "description": "Step: 900",
-        "type": "color"
-      }
-    },
-    "fuschia": {
-      "0": {
-        "value": "#fdecfe",
-        "description": "Step: 0",
-        "type": "color"
-      },
-      "100": {
-        "value": "#f8c5fb",
-        "description": "Step: 100",
-        "type": "color"
-      },
-      "200": {
-        "value": "#f19ff6",
-        "description": "Step: 200",
-        "type": "color"
-      },
-      "300": {
-        "value": "#e87af0",
-        "description": "Step: 300",
-        "type": "color"
-      },
-      "400": {
-        "value": "#de57e8",
-        "description": "Step: 400",
-        "type": "color"
-      },
-      "500": {
-        "value": "#d430e0",
-        "description": "Step: 500",
-        "type": "color"
-      },
-      "600": {
-        "value": "#b31fbc",
-        "description": "Step: 600",
-        "type": "color"
-      },
-      "700": {
-        "value": "#87198e",
-        "description": "Step: 700",
-        "type": "color"
-      },
-      "800": {
-        "value": "#5c1260",
-        "description": "Step: 800",
-        "type": "color"
-      },
-      "900": {
-        "value": "#310a33",
-        "description": "Step: 900",
-        "type": "color"
-      }
-    },
-    "pink": {
-      "0": {
-        "value": "#feecf5",
-        "description": "Step: 0",
-        "type": "color"
-      },
-      "100": {
-        "value": "#fbc6e1",
-        "description": "Step: 100",
-        "type": "color"
-      },
-      "200": {
-        "value": "#f8a1cc",
-        "description": "Step: 200",
-        "type": "color"
-      },
-      "300": {
-        "value": "#f47db8",
-        "description": "Step: 300",
-        "type": "color"
-      },
-      "400": {
-        "value": "#ef59a3",
-        "description": "Step: 400",
-        "type": "color"
-      },
-      "500": {
-        "value": "#e8318c",
-        "description": "Step: 500",
-        "type": "color"
-      },
-      "600": {
-        "value": "#c71a71",
-        "description": "Step: 600",
-        "type": "color"
-      },
-      "700": {
-        "value": "#941756",
-        "description": "Step: 700",
-        "type": "color"
-      },
-      "800": {
-        "value": "#63113b",
-        "description": "Step: 800",
-        "type": "color"
-      },
-      "900": {
-        "value": "#330a1f",
-        "description": "Step: 900",
-        "type": "color"
-      }
-    }
-  },
-  "text": {
-    "family": {
-      "sans": {
-        "value": "Zed Sans",
-        "type": "fontFamily"
-      },
-      "mono": {
-        "value": "Zed Mono",
-        "type": "fontFamily"
-      }
-    },
-    "weight": {
-      "thin": {
-        "value": "thin",
-        "type": "fontWeight"
-      },
-      "extra_light": {
-        "value": "extra_light",
-        "type": "fontWeight"
-      },
-      "light": {
-        "value": "light",
-        "type": "fontWeight"
-      },
-      "normal": {
-        "value": "normal",
-        "type": "fontWeight"
-      },
-      "medium": {
-        "value": "medium",
-        "type": "fontWeight"
-      },
-      "semibold": {
-        "value": "semibold",
-        "type": "fontWeight"
-      },
-      "bold": {
-        "value": "bold",
-        "type": "fontWeight"
-      },
-      "extra_bold": {
-        "value": "extra_bold",
-        "type": "fontWeight"
-      },
-      "black": {
-        "value": "black",
-        "type": "fontWeight"
-      }
-    }
-  },
-  "size": {
-    "px": {
-      "value": 1,
-      "type": "size"
-    },
-    "xs": {
-      "value": 2,
-      "type": "size"
-    },
-    "sm": {
-      "value": 4,
-      "type": "size"
-    },
-    "md": {
-      "value": 6,
-      "type": "size"
-    },
-    "lg": {
-      "value": 8,
-      "type": "size"
-    },
-    "xl": {
-      "value": 12,
-      "type": "size"
-    }
-  },
-  "fontSize": {
-    "3xs": {
-      "value": 8,
-      "type": "fontSize"
-    },
-    "2xs": {
-      "value": 10,
-      "type": "fontSize"
-    },
-    "xs": {
-      "value": 12,
-      "type": "fontSize"
-    },
-    "sm": {
-      "value": 14,
-      "type": "fontSize"
-    },
-    "md": {
-      "value": 16,
-      "type": "fontSize"
-    },
-    "lg": {
-      "value": 18,
-      "type": "fontSize"
-    },
-    "xl": {
-      "value": 20,
-      "type": "fontSize"
-    }
-  }
-}
\ No newline at end of file
diff --git a/styles/dist/solarized-dark.json b/styles/dist/solarized-dark.json
deleted file mode 100644
index 68d97906bf..0000000000
--- a/styles/dist/solarized-dark.json
+++ /dev/null
@@ -1,519 +0,0 @@
-{
-  "meta": {
-    "themeName": "solarized-dark"
-  },
-  "text": {
-    "primary": {
-      "value": "#eee8d5",
-      "type": "color"
-    },
-    "secondary": {
-      "value": "#93a1a1",
-      "type": "color"
-    },
-    "muted": {
-      "value": "#93a1a1",
-      "type": "color"
-    },
-    "placeholder": {
-      "value": "#839496",
-      "type": "color"
-    },
-    "active": {
-      "value": "#fdf6e3",
-      "type": "color"
-    },
-    "feature": {
-      "value": "#268bd2",
-      "type": "color"
-    },
-    "ok": {
-      "value": "#859900",
-      "type": "color"
-    },
-    "error": {
-      "value": "#dc322f",
-      "type": "color"
-    },
-    "warning": {
-      "value": "#b58900",
-      "type": "color"
-    },
-    "info": {
-      "value": "#268bd2",
-      "type": "color"
-    }
-  },
-  "icon": {
-    "primary": {
-      "value": "#eee8d5",
-      "type": "color"
-    },
-    "secondary": {
-      "value": "#93a1a1",
-      "type": "color"
-    },
-    "muted": {
-      "value": "#93a1a1",
-      "type": "color"
-    },
-    "placeholder": {
-      "value": "#839496",
-      "type": "color"
-    },
-    "active": {
-      "value": "#fdf6e3",
-      "type": "color"
-    },
-    "feature": {
-      "value": "#268bd2",
-      "type": "color"
-    },
-    "ok": {
-      "value": "#859900",
-      "type": "color"
-    },
-    "error": {
-      "value": "#dc322f",
-      "type": "color"
-    },
-    "warning": {
-      "value": "#b58900",
-      "type": "color"
-    },
-    "info": {
-      "value": "#268bd2",
-      "type": "color"
-    }
-  },
-  "background": {
-    "100": {
-      "base": {
-        "value": "#1b444f",
-        "type": "color"
-      },
-      "hovered": {
-        "value": "#30525c",
-        "type": "color"
-      },
-      "active": {
-        "value": "#446068",
-        "type": "color"
-      }
-    },
-    "300": {
-      "base": {
-        "value": "#073642",
-        "type": "color"
-      },
-      "hovered": {
-        "value": "#1b444f",
-        "type": "color"
-      },
-      "active": {
-        "value": "#30525c",
-        "type": "color"
-      }
-    },
-    "500": {
-      "base": {
-        "value": "#002b36",
-        "type": "color"
-      },
-      "hovered": {
-        "value": "#022e39",
-        "type": "color"
-      },
-      "active": {
-        "value": "#04313c",
-        "type": "color"
-      }
-    },
-    "on300": {
-      "base": {
-        "value": "#002b36",
-        "type": "color"
-      },
-      "hovered": {
-        "value": "#022e39",
-        "type": "color"
-      },
-      "active": {
-        "value": "#04313c",
-        "type": "color"
-      }
-    },
-    "on500": {
-      "base": {
-        "value": "#1b444f",
-        "type": "color"
-      },
-      "hovered": {
-        "value": "#30525c",
-        "type": "color"
-      },
-      "active": {
-        "value": "#446068",
-        "type": "color"
-      }
-    },
-    "ok": {
-      "base": {
-        "value": "#85990026",
-        "type": "color"
-      },
-      "hovered": {
-        "value": "#85990033",
-        "type": "color"
-      },
-      "active": {
-        "value": "#85990040",
-        "type": "color"
-      }
-    },
-    "error": {
-      "base": {
-        "value": "#dc322f26",
-        "type": "color"
-      },
-      "hovered": {
-        "value": "#dc322f33",
-        "type": "color"
-      },
-      "active": {
-        "value": "#dc322f40",
-        "type": "color"
-      }
-    },
-    "warning": {
-      "base": {
-        "value": "#b5890026",
-        "type": "color"
-      },
-      "hovered": {
-        "value": "#b5890033",
-        "type": "color"
-      },
-      "active": {
-        "value": "#b5890040",
-        "type": "color"
-      }
-    },
-    "info": {
-      "base": {
-        "value": "#268bd226",
-        "type": "color"
-      },
-      "hovered": {
-        "value": "#268bd233",
-        "type": "color"
-      },
-      "active": {
-        "value": "#268bd240",
-        "type": "color"
-      }
-    }
-  },
-  "border": {
-    "primary": {
-      "value": "#002b36",
-      "type": "color"
-    },
-    "secondary": {
-      "value": "#073642",
-      "type": "color"
-    },
-    "muted": {
-      "value": "#657b83",
-      "type": "color"
-    },
-    "active": {
-      "value": "#657b83",
-      "type": "color"
-    },
-    "onMedia": {
-      "value": "#002b361a",
-      "type": "color"
-    },
-    "ok": {
-      "value": "#85990026",
-      "type": "color"
-    },
-    "error": {
-      "value": "#dc322f26",
-      "type": "color"
-    },
-    "warning": {
-      "value": "#b5890026",
-      "type": "color"
-    },
-    "info": {
-      "value": "#268bd226",
-      "type": "color"
-    }
-  },
-  "editor": {
-    "background": {
-      "value": "#002b36",
-      "type": "color"
-    },
-    "indent_guide": {
-      "value": "#657b83",
-      "type": "color"
-    },
-    "indent_guide_active": {
-      "value": "#073642",
-      "type": "color"
-    },
-    "line": {
-      "active": {
-        "value": "#073642",
-        "type": "color"
-      },
-      "highlighted": {
-        "value": "#1b444f",
-        "type": "color"
-      }
-    },
-    "highlight": {
-      "selection": {
-        "value": "#268bd23d",
-        "type": "color"
-      },
-      "occurrence": {
-        "value": "#586e753d",
-        "type": "color"
-      },
-      "activeOccurrence": {
-        "value": "#586e757a",
-        "type": "color"
-      },
-      "matchingBracket": {
-        "value": "#04313c",
-        "type": "color"
-      },
-      "match": {
-        "value": "#1b1f6b",
-        "type": "color"
-      },
-      "activeMatch": {
-        "value": "#434abc7a",
-        "type": "color"
-      },
-      "related": {
-        "value": "#022e39",
-        "type": "color"
-      }
-    },
-    "gutter": {
-      "primary": {
-        "value": "#839496",
-        "type": "color"
-      },
-      "active": {
-        "value": "#fdf6e3",
-        "type": "color"
-      }
-    }
-  },
-  "syntax": {
-    "primary": {
-      "value": "#fdf6e3",
-      "type": "color"
-    },
-    "comment": {
-      "value": "#93a1a1",
-      "type": "color"
-    },
-    "keyword": {
-      "value": "#268bd2",
-      "type": "color"
-    },
-    "function": {
-      "value": "#b58900",
-      "type": "color"
-    },
-    "type": {
-      "value": "#2aa198",
-      "type": "color"
-    },
-    "variant": {
-      "value": "#268bd2",
-      "type": "color"
-    },
-    "property": {
-      "value": "#268bd2",
-      "type": "color"
-    },
-    "enum": {
-      "value": "#cb4b16",
-      "type": "color"
-    },
-    "operator": {
-      "value": "#cb4b16",
-      "type": "color"
-    },
-    "string": {
-      "value": "#cb4b16",
-      "type": "color"
-    },
-    "number": {
-      "value": "#859900",
-      "type": "color"
-    },
-    "boolean": {
-      "value": "#859900",
-      "type": "color"
-    }
-  },
-  "player": {
-    "1": {
-      "baseColor": {
-        "value": "#268bd2",
-        "type": "color"
-      },
-      "cursorColor": {
-        "value": "#268bd2",
-        "type": "color"
-      },
-      "selectionColor": {
-        "value": "#268bd23d",
-        "type": "color"
-      },
-      "borderColor": {
-        "value": "#268bd2cc",
-        "type": "color"
-      }
-    },
-    "2": {
-      "baseColor": {
-        "value": "#859900",
-        "type": "color"
-      },
-      "cursorColor": {
-        "value": "#859900",
-        "type": "color"
-      },
-      "selectionColor": {
-        "value": "#8599003d",
-        "type": "color"
-      },
-      "borderColor": {
-        "value": "#859900cc",
-        "type": "color"
-      }
-    },
-    "3": {
-      "baseColor": {
-        "value": "#d33682",
-        "type": "color"
-      },
-      "cursorColor": {
-        "value": "#d33682",
-        "type": "color"
-      },
-      "selectionColor": {
-        "value": "#d336823d",
-        "type": "color"
-      },
-      "borderColor": {
-        "value": "#d33682cc",
-        "type": "color"
-      }
-    },
-    "4": {
-      "baseColor": {
-        "value": "#cb4b16",
-        "type": "color"
-      },
-      "cursorColor": {
-        "value": "#cb4b16",
-        "type": "color"
-      },
-      "selectionColor": {
-        "value": "#cb4b163d",
-        "type": "color"
-      },
-      "borderColor": {
-        "value": "#cb4b16cc",
-        "type": "color"
-      }
-    },
-    "5": {
-      "baseColor": {
-        "value": "#6c71c4",
-        "type": "color"
-      },
-      "cursorColor": {
-        "value": "#6c71c4",
-        "type": "color"
-      },
-      "selectionColor": {
-        "value": "#6c71c43d",
-        "type": "color"
-      },
-      "borderColor": {
-        "value": "#6c71c4cc",
-        "type": "color"
-      }
-    },
-    "6": {
-      "baseColor": {
-        "value": "#2aa198",
-        "type": "color"
-      },
-      "cursorColor": {
-        "value": "#2aa198",
-        "type": "color"
-      },
-      "selectionColor": {
-        "value": "#2aa1983d",
-        "type": "color"
-      },
-      "borderColor": {
-        "value": "#2aa198cc",
-        "type": "color"
-      }
-    },
-    "7": {
-      "baseColor": {
-        "value": "#dc322f",
-        "type": "color"
-      },
-      "cursorColor": {
-        "value": "#dc322f",
-        "type": "color"
-      },
-      "selectionColor": {
-        "value": "#dc322f3d",
-        "type": "color"
-      },
-      "borderColor": {
-        "value": "#dc322fcc",
-        "type": "color"
-      }
-    },
-    "8": {
-      "baseColor": {
-        "value": "#b58900",
-        "type": "color"
-      },
-      "cursorColor": {
-        "value": "#b58900",
-        "type": "color"
-      },
-      "selectionColor": {
-        "value": "#b589003d",
-        "type": "color"
-      },
-      "borderColor": {
-        "value": "#b58900cc",
-        "type": "color"
-      }
-    }
-  },
-  "shadowAlpha": {
-    "value": 0.24,
-    "type": "number"
-  }
-}
\ No newline at end of file
diff --git a/styles/dist/solarized-light.json b/styles/dist/solarized-light.json
deleted file mode 100644
index acd8d133df..0000000000
--- a/styles/dist/solarized-light.json
+++ /dev/null
@@ -1,519 +0,0 @@
-{
-  "meta": {
-    "themeName": "solarized-light"
-  },
-  "text": {
-    "primary": {
-      "value": "#073642",
-      "type": "color"
-    },
-    "secondary": {
-      "value": "#586e75",
-      "type": "color"
-    },
-    "muted": {
-      "value": "#586e75",
-      "type": "color"
-    },
-    "placeholder": {
-      "value": "#657b83",
-      "type": "color"
-    },
-    "active": {
-      "value": "#002b36",
-      "type": "color"
-    },
-    "feature": {
-      "value": "#268bd2",
-      "type": "color"
-    },
-    "ok": {
-      "value": "#859900",
-      "type": "color"
-    },
-    "error": {
-      "value": "#dc322f",
-      "type": "color"
-    },
-    "warning": {
-      "value": "#b58900",
-      "type": "color"
-    },
-    "info": {
-      "value": "#268bd2",
-      "type": "color"
-    }
-  },
-  "icon": {
-    "primary": {
-      "value": "#073642",
-      "type": "color"
-    },
-    "secondary": {
-      "value": "#586e75",
-      "type": "color"
-    },
-    "muted": {
-      "value": "#586e75",
-      "type": "color"
-    },
-    "placeholder": {
-      "value": "#657b83",
-      "type": "color"
-    },
-    "active": {
-      "value": "#002b36",
-      "type": "color"
-    },
-    "feature": {
-      "value": "#268bd2",
-      "type": "color"
-    },
-    "ok": {
-      "value": "#859900",
-      "type": "color"
-    },
-    "error": {
-      "value": "#dc322f",
-      "type": "color"
-    },
-    "warning": {
-      "value": "#b58900",
-      "type": "color"
-    },
-    "info": {
-      "value": "#268bd2",
-      "type": "color"
-    }
-  },
-  "background": {
-    "100": {
-      "base": {
-        "value": "#d7d6c8",
-        "type": "color"
-      },
-      "hovered": {
-        "value": "#c1c5bb",
-        "type": "color"
-      },
-      "active": {
-        "value": "#aab3ae",
-        "type": "color"
-      }
-    },
-    "300": {
-      "base": {
-        "value": "#eee8d5",
-        "type": "color"
-      },
-      "hovered": {
-        "value": "#d7d6c8",
-        "type": "color"
-      },
-      "active": {
-        "value": "#c1c5bb",
-        "type": "color"
-      }
-    },
-    "500": {
-      "base": {
-        "value": "#fdf6e3",
-        "type": "color"
-      },
-      "hovered": {
-        "value": "#f9f3e0",
-        "type": "color"
-      },
-      "active": {
-        "value": "#f6efdc",
-        "type": "color"
-      }
-    },
-    "on300": {
-      "base": {
-        "value": "#fdf6e3",
-        "type": "color"
-      },
-      "hovered": {
-        "value": "#f9f3e0",
-        "type": "color"
-      },
-      "active": {
-        "value": "#f6efdc",
-        "type": "color"
-      }
-    },
-    "on500": {
-      "base": {
-        "value": "#d7d6c8",
-        "type": "color"
-      },
-      "hovered": {
-        "value": "#c1c5bb",
-        "type": "color"
-      },
-      "active": {
-        "value": "#aab3ae",
-        "type": "color"
-      }
-    },
-    "ok": {
-      "base": {
-        "value": "#85990026",
-        "type": "color"
-      },
-      "hovered": {
-        "value": "#85990033",
-        "type": "color"
-      },
-      "active": {
-        "value": "#85990040",
-        "type": "color"
-      }
-    },
-    "error": {
-      "base": {
-        "value": "#dc322f26",
-        "type": "color"
-      },
-      "hovered": {
-        "value": "#dc322f33",
-        "type": "color"
-      },
-      "active": {
-        "value": "#dc322f40",
-        "type": "color"
-      }
-    },
-    "warning": {
-      "base": {
-        "value": "#b5890026",
-        "type": "color"
-      },
-      "hovered": {
-        "value": "#b5890033",
-        "type": "color"
-      },
-      "active": {
-        "value": "#b5890040",
-        "type": "color"
-      }
-    },
-    "info": {
-      "base": {
-        "value": "#268bd226",
-        "type": "color"
-      },
-      "hovered": {
-        "value": "#268bd233",
-        "type": "color"
-      },
-      "active": {
-        "value": "#268bd240",
-        "type": "color"
-      }
-    }
-  },
-  "border": {
-    "primary": {
-      "value": "#c1c5bb",
-      "type": "color"
-    },
-    "secondary": {
-      "value": "#d7d6c8",
-      "type": "color"
-    },
-    "muted": {
-      "value": "#eee8d5",
-      "type": "color"
-    },
-    "active": {
-      "value": "#657b83",
-      "type": "color"
-    },
-    "onMedia": {
-      "value": "#fdf6e31a",
-      "type": "color"
-    },
-    "ok": {
-      "value": "#85990026",
-      "type": "color"
-    },
-    "error": {
-      "value": "#dc322f26",
-      "type": "color"
-    },
-    "warning": {
-      "value": "#b5890026",
-      "type": "color"
-    },
-    "info": {
-      "value": "#268bd226",
-      "type": "color"
-    }
-  },
-  "editor": {
-    "background": {
-      "value": "#fdf6e3",
-      "type": "color"
-    },
-    "indent_guide": {
-      "value": "#eee8d5",
-      "type": "color"
-    },
-    "indent_guide_active": {
-      "value": "#d7d6c8",
-      "type": "color"
-    },
-    "line": {
-      "active": {
-        "value": "#eee8d5",
-        "type": "color"
-      },
-      "highlighted": {
-        "value": "#d7d6c8",
-        "type": "color"
-      }
-    },
-    "highlight": {
-      "selection": {
-        "value": "#268bd23d",
-        "type": "color"
-      },
-      "occurrence": {
-        "value": "#93a1a11f",
-        "type": "color"
-      },
-      "activeOccurrence": {
-        "value": "#93a1a13d",
-        "type": "color"
-      },
-      "matchingBracket": {
-        "value": "#f6efdc",
-        "type": "color"
-      },
-      "match": {
-        "value": "#bcc0f6",
-        "type": "color"
-      },
-      "activeMatch": {
-        "value": "#7f84d73d",
-        "type": "color"
-      },
-      "related": {
-        "value": "#f9f3e0",
-        "type": "color"
-      }
-    },
-    "gutter": {
-      "primary": {
-        "value": "#657b83",
-        "type": "color"
-      },
-      "active": {
-        "value": "#002b36",
-        "type": "color"
-      }
-    }
-  },
-  "syntax": {
-    "primary": {
-      "value": "#002b36",
-      "type": "color"
-    },
-    "comment": {
-      "value": "#586e75",
-      "type": "color"
-    },
-    "keyword": {
-      "value": "#268bd2",
-      "type": "color"
-    },
-    "function": {
-      "value": "#b58900",
-      "type": "color"
-    },
-    "type": {
-      "value": "#2aa198",
-      "type": "color"
-    },
-    "variant": {
-      "value": "#268bd2",
-      "type": "color"
-    },
-    "property": {
-      "value": "#268bd2",
-      "type": "color"
-    },
-    "enum": {
-      "value": "#cb4b16",
-      "type": "color"
-    },
-    "operator": {
-      "value": "#cb4b16",
-      "type": "color"
-    },
-    "string": {
-      "value": "#cb4b16",
-      "type": "color"
-    },
-    "number": {
-      "value": "#859900",
-      "type": "color"
-    },
-    "boolean": {
-      "value": "#859900",
-      "type": "color"
-    }
-  },
-  "player": {
-    "1": {
-      "baseColor": {
-        "value": "#268bd2",
-        "type": "color"
-      },
-      "cursorColor": {
-        "value": "#268bd2",
-        "type": "color"
-      },
-      "selectionColor": {
-        "value": "#268bd23d",
-        "type": "color"
-      },
-      "borderColor": {
-        "value": "#268bd2cc",
-        "type": "color"
-      }
-    },
-    "2": {
-      "baseColor": {
-        "value": "#859900",
-        "type": "color"
-      },
-      "cursorColor": {
-        "value": "#859900",
-        "type": "color"
-      },
-      "selectionColor": {
-        "value": "#8599003d",
-        "type": "color"
-      },
-      "borderColor": {
-        "value": "#859900cc",
-        "type": "color"
-      }
-    },
-    "3": {
-      "baseColor": {
-        "value": "#d33682",
-        "type": "color"
-      },
-      "cursorColor": {
-        "value": "#d33682",
-        "type": "color"
-      },
-      "selectionColor": {
-        "value": "#d336823d",
-        "type": "color"
-      },
-      "borderColor": {
-        "value": "#d33682cc",
-        "type": "color"
-      }
-    },
-    "4": {
-      "baseColor": {
-        "value": "#cb4b16",
-        "type": "color"
-      },
-      "cursorColor": {
-        "value": "#cb4b16",
-        "type": "color"
-      },
-      "selectionColor": {
-        "value": "#cb4b163d",
-        "type": "color"
-      },
-      "borderColor": {
-        "value": "#cb4b16cc",
-        "type": "color"
-      }
-    },
-    "5": {
-      "baseColor": {
-        "value": "#6c71c4",
-        "type": "color"
-      },
-      "cursorColor": {
-        "value": "#6c71c4",
-        "type": "color"
-      },
-      "selectionColor": {
-        "value": "#6c71c43d",
-        "type": "color"
-      },
-      "borderColor": {
-        "value": "#6c71c4cc",
-        "type": "color"
-      }
-    },
-    "6": {
-      "baseColor": {
-        "value": "#2aa198",
-        "type": "color"
-      },
-      "cursorColor": {
-        "value": "#2aa198",
-        "type": "color"
-      },
-      "selectionColor": {
-        "value": "#2aa1983d",
-        "type": "color"
-      },
-      "borderColor": {
-        "value": "#2aa198cc",
-        "type": "color"
-      }
-    },
-    "7": {
-      "baseColor": {
-        "value": "#dc322f",
-        "type": "color"
-      },
-      "cursorColor": {
-        "value": "#dc322f",
-        "type": "color"
-      },
-      "selectionColor": {
-        "value": "#dc322f3d",
-        "type": "color"
-      },
-      "borderColor": {
-        "value": "#dc322fcc",
-        "type": "color"
-      }
-    },
-    "8": {
-      "baseColor": {
-        "value": "#b58900",
-        "type": "color"
-      },
-      "cursorColor": {
-        "value": "#b58900",
-        "type": "color"
-      },
-      "selectionColor": {
-        "value": "#b589003d",
-        "type": "color"
-      },
-      "borderColor": {
-        "value": "#b58900cc",
-        "type": "color"
-      }
-    }
-  },
-  "shadowAlpha": {
-    "value": 0.12,
-    "type": "number"
-  }
-}
\ No newline at end of file
diff --git a/styles/dist/sulphurpool-dark.json b/styles/dist/sulphurpool-dark.json
deleted file mode 100644
index a2a6273bb9..0000000000
--- a/styles/dist/sulphurpool-dark.json
+++ /dev/null
@@ -1,519 +0,0 @@
-{
-  "meta": {
-    "themeName": "sulphurpool-dark"
-  },
-  "text": {
-    "primary": {
-      "value": "#dfe2f1",
-      "type": "color"
-    },
-    "secondary": {
-      "value": "#979db4",
-      "type": "color"
-    },
-    "muted": {
-      "value": "#979db4",
-      "type": "color"
-    },
-    "placeholder": {
-      "value": "#898ea4",
-      "type": "color"
-    },
-    "active": {
-      "value": "#f5f7ff",
-      "type": "color"
-    },
-    "feature": {
-      "value": "#3d8fd1",
-      "type": "color"
-    },
-    "ok": {
-      "value": "#ac9739",
-      "type": "color"
-    },
-    "error": {
-      "value": "#c94922",
-      "type": "color"
-    },
-    "warning": {
-      "value": "#c08b30",
-      "type": "color"
-    },
-    "info": {
-      "value": "#3d8fd1",
-      "type": "color"
-    }
-  },
-  "icon": {
-    "primary": {
-      "value": "#dfe2f1",
-      "type": "color"
-    },
-    "secondary": {
-      "value": "#979db4",
-      "type": "color"
-    },
-    "muted": {
-      "value": "#979db4",
-      "type": "color"
-    },
-    "placeholder": {
-      "value": "#898ea4",
-      "type": "color"
-    },
-    "active": {
-      "value": "#f5f7ff",
-      "type": "color"
-    },
-    "feature": {
-      "value": "#3d8fd1",
-      "type": "color"
-    },
-    "ok": {
-      "value": "#ac9739",
-      "type": "color"
-    },
-    "error": {
-      "value": "#c94922",
-      "type": "color"
-    },
-    "warning": {
-      "value": "#c08b30",
-      "type": "color"
-    },
-    "info": {
-      "value": "#3d8fd1",
-      "type": "color"
-    }
-  },
-  "background": {
-    "100": {
-      "base": {
-        "value": "#363f62",
-        "type": "color"
-      },
-      "hovered": {
-        "value": "#444c6f",
-        "type": "color"
-      },
-      "active": {
-        "value": "#51597b",
-        "type": "color"
-      }
-    },
-    "300": {
-      "base": {
-        "value": "#293256",
-        "type": "color"
-      },
-      "hovered": {
-        "value": "#363f62",
-        "type": "color"
-      },
-      "active": {
-        "value": "#444c6f",
-        "type": "color"
-      }
-    },
-    "500": {
-      "base": {
-        "value": "#202746",
-        "type": "color"
-      },
-      "hovered": {
-        "value": "#222a4a",
-        "type": "color"
-      },
-      "active": {
-        "value": "#252d4e",
-        "type": "color"
-      }
-    },
-    "on300": {
-      "base": {
-        "value": "#202746",
-        "type": "color"
-      },
-      "hovered": {
-        "value": "#222a4a",
-        "type": "color"
-      },
-      "active": {
-        "value": "#252d4e",
-        "type": "color"
-      }
-    },
-    "on500": {
-      "base": {
-        "value": "#363f62",
-        "type": "color"
-      },
-      "hovered": {
-        "value": "#444c6f",
-        "type": "color"
-      },
-      "active": {
-        "value": "#51597b",
-        "type": "color"
-      }
-    },
-    "ok": {
-      "base": {
-        "value": "#ac973926",
-        "type": "color"
-      },
-      "hovered": {
-        "value": "#ac973933",
-        "type": "color"
-      },
-      "active": {
-        "value": "#ac973940",
-        "type": "color"
-      }
-    },
-    "error": {
-      "base": {
-        "value": "#c9492226",
-        "type": "color"
-      },
-      "hovered": {
-        "value": "#c9492233",
-        "type": "color"
-      },
-      "active": {
-        "value": "#c9492240",
-        "type": "color"
-      }
-    },
-    "warning": {
-      "base": {
-        "value": "#c08b3026",
-        "type": "color"
-      },
-      "hovered": {
-        "value": "#c08b3033",
-        "type": "color"
-      },
-      "active": {
-        "value": "#c08b3040",
-        "type": "color"
-      }
-    },
-    "info": {
-      "base": {
-        "value": "#3d8fd126",
-        "type": "color"
-      },
-      "hovered": {
-        "value": "#3d8fd133",
-        "type": "color"
-      },
-      "active": {
-        "value": "#3d8fd140",
-        "type": "color"
-      }
-    }
-  },
-  "border": {
-    "primary": {
-      "value": "#202746",
-      "type": "color"
-    },
-    "secondary": {
-      "value": "#293256",
-      "type": "color"
-    },
-    "muted": {
-      "value": "#6b7394",
-      "type": "color"
-    },
-    "active": {
-      "value": "#6b7394",
-      "type": "color"
-    },
-    "onMedia": {
-      "value": "#2027461a",
-      "type": "color"
-    },
-    "ok": {
-      "value": "#ac973926",
-      "type": "color"
-    },
-    "error": {
-      "value": "#c9492226",
-      "type": "color"
-    },
-    "warning": {
-      "value": "#c08b3026",
-      "type": "color"
-    },
-    "info": {
-      "value": "#3d8fd126",
-      "type": "color"
-    }
-  },
-  "editor": {
-    "background": {
-      "value": "#202746",
-      "type": "color"
-    },
-    "indent_guide": {
-      "value": "#6b7394",
-      "type": "color"
-    },
-    "indent_guide_active": {
-      "value": "#293256",
-      "type": "color"
-    },
-    "line": {
-      "active": {
-        "value": "#293256",
-        "type": "color"
-      },
-      "highlighted": {
-        "value": "#363f62",
-        "type": "color"
-      }
-    },
-    "highlight": {
-      "selection": {
-        "value": "#3d8fd13d",
-        "type": "color"
-      },
-      "occurrence": {
-        "value": "#5e66873d",
-        "type": "color"
-      },
-      "activeOccurrence": {
-        "value": "#5e66877a",
-        "type": "color"
-      },
-      "matchingBracket": {
-        "value": "#252d4e",
-        "type": "color"
-      },
-      "match": {
-        "value": "#1a2a6d",
-        "type": "color"
-      },
-      "activeMatch": {
-        "value": "#3d56c47a",
-        "type": "color"
-      },
-      "related": {
-        "value": "#222a4a",
-        "type": "color"
-      }
-    },
-    "gutter": {
-      "primary": {
-        "value": "#898ea4",
-        "type": "color"
-      },
-      "active": {
-        "value": "#f5f7ff",
-        "type": "color"
-      }
-    }
-  },
-  "syntax": {
-    "primary": {
-      "value": "#f5f7ff",
-      "type": "color"
-    },
-    "comment": {
-      "value": "#979db4",
-      "type": "color"
-    },
-    "keyword": {
-      "value": "#3d8fd1",
-      "type": "color"
-    },
-    "function": {
-      "value": "#c08b30",
-      "type": "color"
-    },
-    "type": {
-      "value": "#22a2c9",
-      "type": "color"
-    },
-    "variant": {
-      "value": "#3d8fd1",
-      "type": "color"
-    },
-    "property": {
-      "value": "#3d8fd1",
-      "type": "color"
-    },
-    "enum": {
-      "value": "#c76b29",
-      "type": "color"
-    },
-    "operator": {
-      "value": "#c76b29",
-      "type": "color"
-    },
-    "string": {
-      "value": "#c76b29",
-      "type": "color"
-    },
-    "number": {
-      "value": "#ac9739",
-      "type": "color"
-    },
-    "boolean": {
-      "value": "#ac9739",
-      "type": "color"
-    }
-  },
-  "player": {
-    "1": {
-      "baseColor": {
-        "value": "#3d8fd1",
-        "type": "color"
-      },
-      "cursorColor": {
-        "value": "#3d8fd1",
-        "type": "color"
-      },
-      "selectionColor": {
-        "value": "#3d8fd13d",
-        "type": "color"
-      },
-      "borderColor": {
-        "value": "#3d8fd1cc",
-        "type": "color"
-      }
-    },
-    "2": {
-      "baseColor": {
-        "value": "#ac9739",
-        "type": "color"
-      },
-      "cursorColor": {
-        "value": "#ac9739",
-        "type": "color"
-      },
-      "selectionColor": {
-        "value": "#ac97393d",
-        "type": "color"
-      },
-      "borderColor": {
-        "value": "#ac9739cc",
-        "type": "color"
-      }
-    },
-    "3": {
-      "baseColor": {
-        "value": "#9c637a",
-        "type": "color"
-      },
-      "cursorColor": {
-        "value": "#9c637a",
-        "type": "color"
-      },
-      "selectionColor": {
-        "value": "#9c637a3d",
-        "type": "color"
-      },
-      "borderColor": {
-        "value": "#9c637acc",
-        "type": "color"
-      }
-    },
-    "4": {
-      "baseColor": {
-        "value": "#c76b29",
-        "type": "color"
-      },
-      "cursorColor": {
-        "value": "#c76b29",
-        "type": "color"
-      },
-      "selectionColor": {
-        "value": "#c76b293d",
-        "type": "color"
-      },
-      "borderColor": {
-        "value": "#c76b29cc",
-        "type": "color"
-      }
-    },
-    "5": {
-      "baseColor": {
-        "value": "#6679cc",
-        "type": "color"
-      },
-      "cursorColor": {
-        "value": "#6679cc",
-        "type": "color"
-      },
-      "selectionColor": {
-        "value": "#6679cc3d",
-        "type": "color"
-      },
-      "borderColor": {
-        "value": "#6679cccc",
-        "type": "color"
-      }
-    },
-    "6": {
-      "baseColor": {
-        "value": "#22a2c9",
-        "type": "color"
-      },
-      "cursorColor": {
-        "value": "#22a2c9",
-        "type": "color"
-      },
-      "selectionColor": {
-        "value": "#22a2c93d",
-        "type": "color"
-      },
-      "borderColor": {
-        "value": "#22a2c9cc",
-        "type": "color"
-      }
-    },
-    "7": {
-      "baseColor": {
-        "value": "#c94922",
-        "type": "color"
-      },
-      "cursorColor": {
-        "value": "#c94922",
-        "type": "color"
-      },
-      "selectionColor": {
-        "value": "#c949223d",
-        "type": "color"
-      },
-      "borderColor": {
-        "value": "#c94922cc",
-        "type": "color"
-      }
-    },
-    "8": {
-      "baseColor": {
-        "value": "#c08b30",
-        "type": "color"
-      },
-      "cursorColor": {
-        "value": "#c08b30",
-        "type": "color"
-      },
-      "selectionColor": {
-        "value": "#c08b303d",
-        "type": "color"
-      },
-      "borderColor": {
-        "value": "#c08b30cc",
-        "type": "color"
-      }
-    }
-  },
-  "shadowAlpha": {
-    "value": 0.24,
-    "type": "number"
-  }
-}
\ No newline at end of file
diff --git a/styles/dist/sulphurpool-light.json b/styles/dist/sulphurpool-light.json
deleted file mode 100644
index 779850149f..0000000000
--- a/styles/dist/sulphurpool-light.json
+++ /dev/null
@@ -1,519 +0,0 @@
-{
-  "meta": {
-    "themeName": "sulphurpool-light"
-  },
-  "text": {
-    "primary": {
-      "value": "#293256",
-      "type": "color"
-    },
-    "secondary": {
-      "value": "#5e6687",
-      "type": "color"
-    },
-    "muted": {
-      "value": "#5e6687",
-      "type": "color"
-    },
-    "placeholder": {
-      "value": "#6b7394",
-      "type": "color"
-    },
-    "active": {
-      "value": "#202746",
-      "type": "color"
-    },
-    "feature": {
-      "value": "#3d8fd1",
-      "type": "color"
-    },
-    "ok": {
-      "value": "#ac9739",
-      "type": "color"
-    },
-    "error": {
-      "value": "#c94922",
-      "type": "color"
-    },
-    "warning": {
-      "value": "#c08b30",
-      "type": "color"
-    },
-    "info": {
-      "value": "#3d8fd1",
-      "type": "color"
-    }
-  },
-  "icon": {
-    "primary": {
-      "value": "#293256",
-      "type": "color"
-    },
-    "secondary": {
-      "value": "#5e6687",
-      "type": "color"
-    },
-    "muted": {
-      "value": "#5e6687",
-      "type": "color"
-    },
-    "placeholder": {
-      "value": "#6b7394",
-      "type": "color"
-    },
-    "active": {
-      "value": "#202746",
-      "type": "color"
-    },
-    "feature": {
-      "value": "#3d8fd1",
-      "type": "color"
-    },
-    "ok": {
-      "value": "#ac9739",
-      "type": "color"
-    },
-    "error": {
-      "value": "#c94922",
-      "type": "color"
-    },
-    "warning": {
-      "value": "#c08b30",
-      "type": "color"
-    },
-    "info": {
-      "value": "#3d8fd1",
-      "type": "color"
-    }
-  },
-  "background": {
-    "100": {
-      "base": {
-        "value": "#cdd1e2",
-        "type": "color"
-      },
-      "hovered": {
-        "value": "#bbc0d3",
-        "type": "color"
-      },
-      "active": {
-        "value": "#a9aec3",
-        "type": "color"
-      }
-    },
-    "300": {
-      "base": {
-        "value": "#dfe2f1",
-        "type": "color"
-      },
-      "hovered": {
-        "value": "#cdd1e2",
-        "type": "color"
-      },
-      "active": {
-        "value": "#bbc0d3",
-        "type": "color"
-      }
-    },
-    "500": {
-      "base": {
-        "value": "#f5f7ff",
-        "type": "color"
-      },
-      "hovered": {
-        "value": "#f0f2fc",
-        "type": "color"
-      },
-      "active": {
-        "value": "#eaedf8",
-        "type": "color"
-      }
-    },
-    "on300": {
-      "base": {
-        "value": "#f5f7ff",
-        "type": "color"
-      },
-      "hovered": {
-        "value": "#f0f2fc",
-        "type": "color"
-      },
-      "active": {
-        "value": "#eaedf8",
-        "type": "color"
-      }
-    },
-    "on500": {
-      "base": {
-        "value": "#cdd1e2",
-        "type": "color"
-      },
-      "hovered": {
-        "value": "#bbc0d3",
-        "type": "color"
-      },
-      "active": {
-        "value": "#a9aec3",
-        "type": "color"
-      }
-    },
-    "ok": {
-      "base": {
-        "value": "#ac973926",
-        "type": "color"
-      },
-      "hovered": {
-        "value": "#ac973933",
-        "type": "color"
-      },
-      "active": {
-        "value": "#ac973940",
-        "type": "color"
-      }
-    },
-    "error": {
-      "base": {
-        "value": "#c9492226",
-        "type": "color"
-      },
-      "hovered": {
-        "value": "#c9492233",
-        "type": "color"
-      },
-      "active": {
-        "value": "#c9492240",
-        "type": "color"
-      }
-    },
-    "warning": {
-      "base": {
-        "value": "#c08b3026",
-        "type": "color"
-      },
-      "hovered": {
-        "value": "#c08b3033",
-        "type": "color"
-      },
-      "active": {
-        "value": "#c08b3040",
-        "type": "color"
-      }
-    },
-    "info": {
-      "base": {
-        "value": "#3d8fd126",
-        "type": "color"
-      },
-      "hovered": {
-        "value": "#3d8fd133",
-        "type": "color"
-      },
-      "active": {
-        "value": "#3d8fd140",
-        "type": "color"
-      }
-    }
-  },
-  "border": {
-    "primary": {
-      "value": "#bbc0d3",
-      "type": "color"
-    },
-    "secondary": {
-      "value": "#cdd1e2",
-      "type": "color"
-    },
-    "muted": {
-      "value": "#dfe2f1",
-      "type": "color"
-    },
-    "active": {
-      "value": "#6b7394",
-      "type": "color"
-    },
-    "onMedia": {
-      "value": "#f5f7ff1a",
-      "type": "color"
-    },
-    "ok": {
-      "value": "#ac973926",
-      "type": "color"
-    },
-    "error": {
-      "value": "#c9492226",
-      "type": "color"
-    },
-    "warning": {
-      "value": "#c08b3026",
-      "type": "color"
-    },
-    "info": {
-      "value": "#3d8fd126",
-      "type": "color"
-    }
-  },
-  "editor": {
-    "background": {
-      "value": "#f5f7ff",
-      "type": "color"
-    },
-    "indent_guide": {
-      "value": "#dfe2f1",
-      "type": "color"
-    },
-    "indent_guide_active": {
-      "value": "#cdd1e2",
-      "type": "color"
-    },
-    "line": {
-      "active": {
-        "value": "#dfe2f1",
-        "type": "color"
-      },
-      "highlighted": {
-        "value": "#cdd1e2",
-        "type": "color"
-      }
-    },
-    "highlight": {
-      "selection": {
-        "value": "#3d8fd13d",
-        "type": "color"
-      },
-      "occurrence": {
-        "value": "#979db41f",
-        "type": "color"
-      },
-      "activeOccurrence": {
-        "value": "#979db43d",
-        "type": "color"
-      },
-      "matchingBracket": {
-        "value": "#eaedf8",
-        "type": "color"
-      },
-      "match": {
-        "value": "#bcc6f7",
-        "type": "color"
-      },
-      "activeMatch": {
-        "value": "#7b8ddc3d",
-        "type": "color"
-      },
-      "related": {
-        "value": "#f0f2fc",
-        "type": "color"
-      }
-    },
-    "gutter": {
-      "primary": {
-        "value": "#6b7394",
-        "type": "color"
-      },
-      "active": {
-        "value": "#202746",
-        "type": "color"
-      }
-    }
-  },
-  "syntax": {
-    "primary": {
-      "value": "#202746",
-      "type": "color"
-    },
-    "comment": {
-      "value": "#5e6687",
-      "type": "color"
-    },
-    "keyword": {
-      "value": "#3d8fd1",
-      "type": "color"
-    },
-    "function": {
-      "value": "#c08b30",
-      "type": "color"
-    },
-    "type": {
-      "value": "#22a2c9",
-      "type": "color"
-    },
-    "variant": {
-      "value": "#3d8fd1",
-      "type": "color"
-    },
-    "property": {
-      "value": "#3d8fd1",
-      "type": "color"
-    },
-    "enum": {
-      "value": "#c76b29",
-      "type": "color"
-    },
-    "operator": {
-      "value": "#c76b29",
-      "type": "color"
-    },
-    "string": {
-      "value": "#c76b29",
-      "type": "color"
-    },
-    "number": {
-      "value": "#ac9739",
-      "type": "color"
-    },
-    "boolean": {
-      "value": "#ac9739",
-      "type": "color"
-    }
-  },
-  "player": {
-    "1": {
-      "baseColor": {
-        "value": "#3d8fd1",
-        "type": "color"
-      },
-      "cursorColor": {
-        "value": "#3d8fd1",
-        "type": "color"
-      },
-      "selectionColor": {
-        "value": "#3d8fd13d",
-        "type": "color"
-      },
-      "borderColor": {
-        "value": "#3d8fd1cc",
-        "type": "color"
-      }
-    },
-    "2": {
-      "baseColor": {
-        "value": "#ac9739",
-        "type": "color"
-      },
-      "cursorColor": {
-        "value": "#ac9739",
-        "type": "color"
-      },
-      "selectionColor": {
-        "value": "#ac97393d",
-        "type": "color"
-      },
-      "borderColor": {
-        "value": "#ac9739cc",
-        "type": "color"
-      }
-    },
-    "3": {
-      "baseColor": {
-        "value": "#9c637a",
-        "type": "color"
-      },
-      "cursorColor": {
-        "value": "#9c637a",
-        "type": "color"
-      },
-      "selectionColor": {
-        "value": "#9c637a3d",
-        "type": "color"
-      },
-      "borderColor": {
-        "value": "#9c637acc",
-        "type": "color"
-      }
-    },
-    "4": {
-      "baseColor": {
-        "value": "#c76b29",
-        "type": "color"
-      },
-      "cursorColor": {
-        "value": "#c76b29",
-        "type": "color"
-      },
-      "selectionColor": {
-        "value": "#c76b293d",
-        "type": "color"
-      },
-      "borderColor": {
-        "value": "#c76b29cc",
-        "type": "color"
-      }
-    },
-    "5": {
-      "baseColor": {
-        "value": "#6679cc",
-        "type": "color"
-      },
-      "cursorColor": {
-        "value": "#6679cc",
-        "type": "color"
-      },
-      "selectionColor": {
-        "value": "#6679cc3d",
-        "type": "color"
-      },
-      "borderColor": {
-        "value": "#6679cccc",
-        "type": "color"
-      }
-    },
-    "6": {
-      "baseColor": {
-        "value": "#22a2c9",
-        "type": "color"
-      },
-      "cursorColor": {
-        "value": "#22a2c9",
-        "type": "color"
-      },
-      "selectionColor": {
-        "value": "#22a2c93d",
-        "type": "color"
-      },
-      "borderColor": {
-        "value": "#22a2c9cc",
-        "type": "color"
-      }
-    },
-    "7": {
-      "baseColor": {
-        "value": "#c94922",
-        "type": "color"
-      },
-      "cursorColor": {
-        "value": "#c94922",
-        "type": "color"
-      },
-      "selectionColor": {
-        "value": "#c949223d",
-        "type": "color"
-      },
-      "borderColor": {
-        "value": "#c94922cc",
-        "type": "color"
-      }
-    },
-    "8": {
-      "baseColor": {
-        "value": "#c08b30",
-        "type": "color"
-      },
-      "cursorColor": {
-        "value": "#c08b30",
-        "type": "color"
-      },
-      "selectionColor": {
-        "value": "#c08b303d",
-        "type": "color"
-      },
-      "borderColor": {
-        "value": "#c08b30cc",
-        "type": "color"
-      }
-    }
-  },
-  "shadowAlpha": {
-    "value": 0.12,
-    "type": "number"
-  }
-}
\ No newline at end of file
diff --git a/styles/dist/tokens.json b/styles/dist/tokens.json
deleted file mode 100644
index 29cec82032..0000000000
--- a/styles/dist/tokens.json
+++ /dev/null
@@ -1,4297 +0,0 @@
-{
-  "core": {
-    "color": {
-      "neutral": {
-        "0": {
-          "value": "#ffffff",
-          "description": "Step: 0",
-          "type": "color"
-        },
-        "25": {
-          "value": "#f8f8f8",
-          "description": "Step: 25",
-          "type": "color"
-        },
-        "50": {
-          "value": "#f1f1f1",
-          "description": "Step: 50",
-          "type": "color"
-        },
-        "75": {
-          "value": "#eaeaea",
-          "description": "Step: 75",
-          "type": "color"
-        },
-        "100": {
-          "value": "#e3e3e3",
-          "description": "Step: 100",
-          "type": "color"
-        },
-        "125": {
-          "value": "#dcdcdc",
-          "description": "Step: 125",
-          "type": "color"
-        },
-        "150": {
-          "value": "#d5d5d5",
-          "description": "Step: 150",
-          "type": "color"
-        },
-        "175": {
-          "value": "#cdcdcd",
-          "description": "Step: 175",
-          "type": "color"
-        },
-        "200": {
-          "value": "#c6c6c6",
-          "description": "Step: 200",
-          "type": "color"
-        },
-        "225": {
-          "value": "#bfbfbf",
-          "description": "Step: 225",
-          "type": "color"
-        },
-        "250": {
-          "value": "#b8b8b8",
-          "description": "Step: 250",
-          "type": "color"
-        },
-        "275": {
-          "value": "#b1b1b1",
-          "description": "Step: 275",
-          "type": "color"
-        },
-        "300": {
-          "value": "#aaaaaa",
-          "description": "Step: 300",
-          "type": "color"
-        },
-        "325": {
-          "value": "#a3a3a3",
-          "description": "Step: 325",
-          "type": "color"
-        },
-        "350": {
-          "value": "#9c9c9c",
-          "description": "Step: 350",
-          "type": "color"
-        },
-        "375": {
-          "value": "#959595",
-          "description": "Step: 375",
-          "type": "color"
-        },
-        "400": {
-          "value": "#8e8e8e",
-          "description": "Step: 400",
-          "type": "color"
-        },
-        "425": {
-          "value": "#878787",
-          "description": "Step: 425",
-          "type": "color"
-        },
-        "450": {
-          "value": "#808080",
-          "description": "Step: 450",
-          "type": "color"
-        },
-        "475": {
-          "value": "#787878",
-          "description": "Step: 475",
-          "type": "color"
-        },
-        "500": {
-          "value": "#717171",
-          "description": "Step: 500",
-          "type": "color"
-        },
-        "525": {
-          "value": "#6a6a6a",
-          "description": "Step: 525",
-          "type": "color"
-        },
-        "550": {
-          "value": "#636363",
-          "description": "Step: 550",
-          "type": "color"
-        },
-        "575": {
-          "value": "#5c5c5c",
-          "description": "Step: 575",
-          "type": "color"
-        },
-        "600": {
-          "value": "#555555",
-          "description": "Step: 600",
-          "type": "color"
-        },
-        "625": {
-          "value": "#4e4e4e",
-          "description": "Step: 625",
-          "type": "color"
-        },
-        "650": {
-          "value": "#474747",
-          "description": "Step: 650",
-          "type": "color"
-        },
-        "675": {
-          "value": "#404040",
-          "description": "Step: 675",
-          "type": "color"
-        },
-        "700": {
-          "value": "#393939",
-          "description": "Step: 700",
-          "type": "color"
-        },
-        "725": {
-          "value": "#323232",
-          "description": "Step: 725",
-          "type": "color"
-        },
-        "750": {
-          "value": "#2b2b2b",
-          "description": "Step: 750",
-          "type": "color"
-        },
-        "775": {
-          "value": "#232323",
-          "description": "Step: 775",
-          "type": "color"
-        },
-        "800": {
-          "value": "#1c1c1c",
-          "description": "Step: 800",
-          "type": "color"
-        },
-        "825": {
-          "value": "#151515",
-          "description": "Step: 825",
-          "type": "color"
-        },
-        "850": {
-          "value": "#0e0e0e",
-          "description": "Step: 850",
-          "type": "color"
-        },
-        "875": {
-          "value": "#070707",
-          "description": "Step: 875",
-          "type": "color"
-        },
-        "900": {
-          "value": "#000000",
-          "description": "Step: 900",
-          "type": "color"
-        }
-      },
-      "rose": {
-        "0": {
-          "value": "#feecef",
-          "description": "Step: 0",
-          "type": "color"
-        },
-        "100": {
-          "value": "#fcc5cf",
-          "description": "Step: 100",
-          "type": "color"
-        },
-        "200": {
-          "value": "#fa9fae",
-          "description": "Step: 200",
-          "type": "color"
-        },
-        "300": {
-          "value": "#f8788e",
-          "description": "Step: 300",
-          "type": "color"
-        },
-        "400": {
-          "value": "#f5526e",
-          "description": "Step: 400",
-          "type": "color"
-        },
-        "500": {
-          "value": "#f0284a",
-          "description": "Step: 500",
-          "type": "color"
-        },
-        "600": {
-          "value": "#cd1434",
-          "description": "Step: 600",
-          "type": "color"
-        },
-        "700": {
-          "value": "#97142a",
-          "description": "Step: 700",
-          "type": "color"
-        },
-        "800": {
-          "value": "#64101e",
-          "description": "Step: 800",
-          "type": "color"
-        },
-        "900": {
-          "value": "#330a11",
-          "description": "Step: 900",
-          "type": "color"
-        }
-      },
-      "red": {
-        "0": {
-          "value": "#feecec",
-          "description": "Step: 0",
-          "type": "color"
-        },
-        "100": {
-          "value": "#fcc6c6",
-          "description": "Step: 100",
-          "type": "color"
-        },
-        "200": {
-          "value": "#f9a0a0",
-          "description": "Step: 200",
-          "type": "color"
-        },
-        "300": {
-          "value": "#f57b7b",
-          "description": "Step: 300",
-          "type": "color"
-        },
-        "400": {
-          "value": "#f15656",
-          "description": "Step: 400",
-          "type": "color"
-        },
-        "500": {
-          "value": "#eb2d2d",
-          "description": "Step: 500",
-          "type": "color"
-        },
-        "600": {
-          "value": "#c91818",
-          "description": "Step: 600",
-          "type": "color"
-        },
-        "700": {
-          "value": "#951515",
-          "description": "Step: 700",
-          "type": "color"
-        },
-        "800": {
-          "value": "#631111",
-          "description": "Step: 800",
-          "type": "color"
-        },
-        "900": {
-          "value": "#330a0a",
-          "description": "Step: 900",
-          "type": "color"
-        }
-      },
-      "orange": {
-        "0": {
-          "value": "#fef3ec",
-          "description": "Step: 0",
-          "type": "color"
-        },
-        "100": {
-          "value": "#fcd6bd",
-          "description": "Step: 100",
-          "type": "color"
-        },
-        "200": {
-          "value": "#fab98e",
-          "description": "Step: 200",
-          "type": "color"
-        },
-        "300": {
-          "value": "#f99d5f",
-          "description": "Step: 300",
-          "type": "color"
-        },
-        "400": {
-          "value": "#f9812e",
-          "description": "Step: 400",
-          "type": "color"
-        },
-        "500": {
-          "value": "#ee670a",
-          "description": "Step: 500",
-          "type": "color"
-        },
-        "600": {
-          "value": "#bb550e",
-          "description": "Step: 600",
-          "type": "color"
-        },
-        "700": {
-          "value": "#8b4210",
-          "description": "Step: 700",
-          "type": "color"
-        },
-        "800": {
-          "value": "#5d2f0e",
-          "description": "Step: 800",
-          "type": "color"
-        },
-        "900": {
-          "value": "#331b0a",
-          "description": "Step: 900",
-          "type": "color"
-        }
-      },
-      "amber": {
-        "0": {
-          "value": "#fef7ec",
-          "description": "Step: 0",
-          "type": "color"
-        },
-        "100": {
-          "value": "#fce2ba",
-          "description": "Step: 100",
-          "type": "color"
-        },
-        "200": {
-          "value": "#f9ce89",
-          "description": "Step: 200",
-          "type": "color"
-        },
-        "300": {
-          "value": "#f7bb57",
-          "description": "Step: 300",
-          "type": "color"
-        },
-        "400": {
-          "value": "#f6a724",
-          "description": "Step: 400",
-          "type": "color"
-        },
-        "500": {
-          "value": "#de900c",
-          "description": "Step: 500",
-          "type": "color"
-        },
-        "600": {
-          "value": "#b0740f",
-          "description": "Step: 600",
-          "type": "color"
-        },
-        "700": {
-          "value": "#845910",
-          "description": "Step: 700",
-          "type": "color"
-        },
-        "800": {
-          "value": "#5a3e0e",
-          "description": "Step: 800",
-          "type": "color"
-        },
-        "900": {
-          "value": "#33240a",
-          "description": "Step: 900",
-          "type": "color"
-        }
-      },
-      "yellow": {
-        "0": {
-          "value": "#fef9ec",
-          "description": "Step: 0",
-          "type": "color"
-        },
-        "100": {
-          "value": "#fce9b7",
-          "description": "Step: 100",
-          "type": "color"
-        },
-        "200": {
-          "value": "#f9da82",
-          "description": "Step: 200",
-          "type": "color"
-        },
-        "300": {
-          "value": "#f8cc4d",
-          "description": "Step: 300",
-          "type": "color"
-        },
-        "400": {
-          "value": "#f7bf17",
-          "description": "Step: 400",
-          "type": "color"
-        },
-        "500": {
-          "value": "#d3a20b",
-          "description": "Step: 500",
-          "type": "color"
-        },
-        "600": {
-          "value": "#a8820e",
-          "description": "Step: 600",
-          "type": "color"
-        },
-        "700": {
-          "value": "#7e630f",
-          "description": "Step: 700",
-          "type": "color"
-        },
-        "800": {
-          "value": "#58460e",
-          "description": "Step: 800",
-          "type": "color"
-        },
-        "900": {
-          "value": "#33290a",
-          "description": "Step: 900",
-          "type": "color"
-        }
-      },
-      "lime": {
-        "0": {
-          "value": "#f7feec",
-          "description": "Step: 0",
-          "type": "color"
-        },
-        "100": {
-          "value": "#dffab5",
-          "description": "Step: 100",
-          "type": "color"
-        },
-        "200": {
-          "value": "#c7f57f",
-          "description": "Step: 200",
-          "type": "color"
-        },
-        "300": {
-          "value": "#aeef4b",
-          "description": "Step: 300",
-          "type": "color"
-        },
-        "400": {
-          "value": "#96e818",
-          "description": "Step: 400",
-          "type": "color"
-        },
-        "500": {
-          "value": "#79ba16",
-          "description": "Step: 500",
-          "type": "color"
-        },
-        "600": {
-          "value": "#639714",
-          "description": "Step: 600",
-          "type": "color"
-        },
-        "700": {
-          "value": "#4e7412",
-          "description": "Step: 700",
-          "type": "color"
-        },
-        "800": {
-          "value": "#38530f",
-          "description": "Step: 800",
-          "type": "color"
-        },
-        "900": {
-          "value": "#23330a",
-          "description": "Step: 900",
-          "type": "color"
-        }
-      },
-      "green": {
-        "0": {
-          "value": "#ecfef2",
-          "description": "Step: 0",
-          "type": "color"
-        },
-        "100": {
-          "value": "#b7f9ce",
-          "description": "Step: 100",
-          "type": "color"
-        },
-        "200": {
-          "value": "#84f2ab",
-          "description": "Step: 200",
-          "type": "color"
-        },
-        "300": {
-          "value": "#54e989",
-          "description": "Step: 300",
-          "type": "color"
-        },
-        "400": {
-          "value": "#27dd69",
-          "description": "Step: 400",
-          "type": "color"
-        },
-        "500": {
-          "value": "#20b456",
-          "description": "Step: 500",
-          "type": "color"
-        },
-        "600": {
-          "value": "#1b9447",
-          "description": "Step: 600",
-          "type": "color"
-        },
-        "700": {
-          "value": "#157338",
-          "description": "Step: 700",
-          "type": "color"
-        },
-        "800": {
-          "value": "#105328",
-          "description": "Step: 800",
-          "type": "color"
-        },
-        "900": {
-          "value": "#0a3319",
-          "description": "Step: 900",
-          "type": "color"
-        }
-      },
-      "emerald": {
-        "0": {
-          "value": "#ecfef8",
-          "description": "Step: 0",
-          "type": "color"
-        },
-        "100": {
-          "value": "#b0fae1",
-          "description": "Step: 100",
-          "type": "color"
-        },
-        "200": {
-          "value": "#74f6cb",
-          "description": "Step: 200",
-          "type": "color"
-        },
-        "300": {
-          "value": "#39f0b3",
-          "description": "Step: 300",
-          "type": "color"
-        },
-        "400": {
-          "value": "#12d796",
-          "description": "Step: 400",
-          "type": "color"
-        },
-        "500": {
-          "value": "#10a977",
-          "description": "Step: 500",
-          "type": "color"
-        },
-        "600": {
-          "value": "#118a62",
-          "description": "Step: 600",
-          "type": "color"
-        },
-        "700": {
-          "value": "#106c4e",
-          "description": "Step: 700",
-          "type": "color"
-        },
-        "800": {
-          "value": "#0d4f3a",
-          "description": "Step: 800",
-          "type": "color"
-        },
-        "900": {
-          "value": "#0a3326",
-          "description": "Step: 900",
-          "type": "color"
-        }
-      },
-      "teal": {
-        "0": {
-          "value": "#ecfefc",
-          "description": "Step: 0",
-          "type": "color"
-        },
-        "100": {
-          "value": "#b1faf2",
-          "description": "Step: 100",
-          "type": "color"
-        },
-        "200": {
-          "value": "#76f5e7",
-          "description": "Step: 200",
-          "type": "color"
-        },
-        "300": {
-          "value": "#3eeeda",
-          "description": "Step: 300",
-          "type": "color"
-        },
-        "400": {
-          "value": "#16d6c1",
-          "description": "Step: 400",
-          "type": "color"
-        },
-        "500": {
-          "value": "#14a898",
-          "description": "Step: 500",
-          "type": "color"
-        },
-        "600": {
-          "value": "#138a7d",
-          "description": "Step: 600",
-          "type": "color"
-        },
-        "700": {
-          "value": "#116c62",
-          "description": "Step: 700",
-          "type": "color"
-        },
-        "800": {
-          "value": "#0e4f48",
-          "description": "Step: 800",
-          "type": "color"
-        },
-        "900": {
-          "value": "#0a332f",
-          "description": "Step: 900",
-          "type": "color"
-        }
-      },
-      "cyan": {
-        "0": {
-          "value": "#ecfcfe",
-          "description": "Step: 0",
-          "type": "color"
-        },
-        "100": {
-          "value": "#b2f3fb",
-          "description": "Step: 100",
-          "type": "color"
-        },
-        "200": {
-          "value": "#78eaf9",
-          "description": "Step: 200",
-          "type": "color"
-        },
-        "300": {
-          "value": "#3de2f8",
-          "description": "Step: 300",
-          "type": "color"
-        },
-        "400": {
-          "value": "#07d5f1",
-          "description": "Step: 400",
-          "type": "color"
-        },
-        "500": {
-          "value": "#09aac0",
-          "description": "Step: 500",
-          "type": "color"
-        },
-        "600": {
-          "value": "#0c8a9a",
-          "description": "Step: 600",
-          "type": "color"
-        },
-        "700": {
-          "value": "#0e6a75",
-          "description": "Step: 700",
-          "type": "color"
-        },
-        "800": {
-          "value": "#0d4c53",
-          "description": "Step: 800",
-          "type": "color"
-        },
-        "900": {
-          "value": "#0a2f33",
-          "description": "Step: 900",
-          "type": "color"
-        }
-      },
-      "sky": {
-        "0": {
-          "value": "#ecf8fe",
-          "description": "Step: 0",
-          "type": "color"
-        },
-        "100": {
-          "value": "#b9e5fb",
-          "description": "Step: 100",
-          "type": "color"
-        },
-        "200": {
-          "value": "#86d3f8",
-          "description": "Step: 200",
-          "type": "color"
-        },
-        "300": {
-          "value": "#53c1f5",
-          "description": "Step: 300",
-          "type": "color"
-        },
-        "400": {
-          "value": "#20b0f2",
-          "description": "Step: 400",
-          "type": "color"
-        },
-        "500": {
-          "value": "#1096d3",
-          "description": "Step: 500",
-          "type": "color"
-        },
-        "600": {
-          "value": "#1179a8",
-          "description": "Step: 600",
-          "type": "color"
-        },
-        "700": {
-          "value": "#115c7f",
-          "description": "Step: 700",
-          "type": "color"
-        },
-        "800": {
-          "value": "#0e4158",
-          "description": "Step: 800",
-          "type": "color"
-        },
-        "900": {
-          "value": "#0a2633",
-          "description": "Step: 900",
-          "type": "color"
-        }
-      },
-      "blue": {
-        "0": {
-          "value": "#ecf3fe",
-          "description": "Step: 0",
-          "type": "color"
-        },
-        "100": {
-          "value": "#c5dafc",
-          "description": "Step: 100",
-          "type": "color"
-        },
-        "200": {
-          "value": "#9ec1fa",
-          "description": "Step: 200",
-          "type": "color"
-        },
-        "300": {
-          "value": "#76a8f8",
-          "description": "Step: 300",
-          "type": "color"
-        },
-        "400": {
-          "value": "#4f8ff7",
-          "description": "Step: 400",
-          "type": "color"
-        },
-        "500": {
-          "value": "#2472f2",
-          "description": "Step: 500",
-          "type": "color"
-        },
-        "600": {
-          "value": "#135acd",
-          "description": "Step: 600",
-          "type": "color"
-        },
-        "700": {
-          "value": "#134697",
-          "description": "Step: 700",
-          "type": "color"
-        },
-        "800": {
-          "value": "#103063",
-          "description": "Step: 800",
-          "type": "color"
-        },
-        "900": {
-          "value": "#0a1a33",
-          "description": "Step: 900",
-          "type": "color"
-        }
-      },
-      "indigo": {
-        "0": {
-          "value": "#ececfe",
-          "description": "Step: 0",
-          "type": "color"
-        },
-        "100": {
-          "value": "#cdcdfc",
-          "description": "Step: 100",
-          "type": "color"
-        },
-        "200": {
-          "value": "#aeaff9",
-          "description": "Step: 200",
-          "type": "color"
-        },
-        "300": {
-          "value": "#9091f6",
-          "description": "Step: 300",
-          "type": "color"
-        },
-        "400": {
-          "value": "#7274f3",
-          "description": "Step: 400",
-          "type": "color"
-        },
-        "500": {
-          "value": "#484bed",
-          "description": "Step: 500",
-          "type": "color"
-        },
-        "600": {
-          "value": "#1b1edc",
-          "description": "Step: 600",
-          "type": "color"
-        },
-        "700": {
-          "value": "#1819a1",
-          "description": "Step: 700",
-          "type": "color"
-        },
-        "800": {
-          "value": "#121269",
-          "description": "Step: 800",
-          "type": "color"
-        },
-        "900": {
-          "value": "#0a0a33",
-          "description": "Step: 900",
-          "type": "color"
-        }
-      },
-      "violet": {
-        "0": {
-          "value": "#f1ecfe",
-          "description": "Step: 0",
-          "type": "color"
-        },
-        "100": {
-          "value": "#daccfc",
-          "description": "Step: 100",
-          "type": "color"
-        },
-        "200": {
-          "value": "#c3acfb",
-          "description": "Step: 200",
-          "type": "color"
-        },
-        "300": {
-          "value": "#ac8cf9",
-          "description": "Step: 300",
-          "type": "color"
-        },
-        "400": {
-          "value": "#966cf7",
-          "description": "Step: 400",
-          "type": "color"
-        },
-        "500": {
-          "value": "#7741f2",
-          "description": "Step: 500",
-          "type": "color"
-        },
-        "600": {
-          "value": "#5316e0",
-          "description": "Step: 600",
-          "type": "color"
-        },
-        "700": {
-          "value": "#3f15a3",
-          "description": "Step: 700",
-          "type": "color"
-        },
-        "800": {
-          "value": "#2b116a",
-          "description": "Step: 800",
-          "type": "color"
-        },
-        "900": {
-          "value": "#160a33",
-          "description": "Step: 900",
-          "type": "color"
-        }
-      },
-      "purple": {
-        "0": {
-          "value": "#f5ecfe",
-          "description": "Step: 0",
-          "type": "color"
-        },
-        "100": {
-          "value": "#e4cbfc",
-          "description": "Step: 100",
-          "type": "color"
-        },
-        "200": {
-          "value": "#d2a9fb",
-          "description": "Step: 200",
-          "type": "color"
-        },
-        "300": {
-          "value": "#c188f9",
-          "description": "Step: 300",
-          "type": "color"
-        },
-        "400": {
-          "value": "#b066f8",
-          "description": "Step: 400",
-          "type": "color"
-        },
-        "500": {
-          "value": "#993bf3",
-          "description": "Step: 500",
-          "type": "color"
-        },
-        "600": {
-          "value": "#7b14dd",
-          "description": "Step: 600",
-          "type": "color"
-        },
-        "700": {
-          "value": "#5c14a1",
-          "description": "Step: 700",
-          "type": "color"
-        },
-        "800": {
-          "value": "#3e1169",
-          "description": "Step: 800",
-          "type": "color"
-        },
-        "900": {
-          "value": "#1f0a33",
-          "description": "Step: 900",
-          "type": "color"
-        }
-      },
-      "fuschia": {
-        "0": {
-          "value": "#fdecfe",
-          "description": "Step: 0",
-          "type": "color"
-        },
-        "100": {
-          "value": "#f8c5fb",
-          "description": "Step: 100",
-          "type": "color"
-        },
-        "200": {
-          "value": "#f19ff6",
-          "description": "Step: 200",
-          "type": "color"
-        },
-        "300": {
-          "value": "#e87af0",
-          "description": "Step: 300",
-          "type": "color"
-        },
-        "400": {
-          "value": "#de57e8",
-          "description": "Step: 400",
-          "type": "color"
-        },
-        "500": {
-          "value": "#d430e0",
-          "description": "Step: 500",
-          "type": "color"
-        },
-        "600": {
-          "value": "#b31fbc",
-          "description": "Step: 600",
-          "type": "color"
-        },
-        "700": {
-          "value": "#87198e",
-          "description": "Step: 700",
-          "type": "color"
-        },
-        "800": {
-          "value": "#5c1260",
-          "description": "Step: 800",
-          "type": "color"
-        },
-        "900": {
-          "value": "#310a33",
-          "description": "Step: 900",
-          "type": "color"
-        }
-      },
-      "pink": {
-        "0": {
-          "value": "#feecf5",
-          "description": "Step: 0",
-          "type": "color"
-        },
-        "100": {
-          "value": "#fbc6e1",
-          "description": "Step: 100",
-          "type": "color"
-        },
-        "200": {
-          "value": "#f8a1cc",
-          "description": "Step: 200",
-          "type": "color"
-        },
-        "300": {
-          "value": "#f47db8",
-          "description": "Step: 300",
-          "type": "color"
-        },
-        "400": {
-          "value": "#ef59a3",
-          "description": "Step: 400",
-          "type": "color"
-        },
-        "500": {
-          "value": "#e8318c",
-          "description": "Step: 500",
-          "type": "color"
-        },
-        "600": {
-          "value": "#c71a71",
-          "description": "Step: 600",
-          "type": "color"
-        },
-        "700": {
-          "value": "#941756",
-          "description": "Step: 700",
-          "type": "color"
-        },
-        "800": {
-          "value": "#63113b",
-          "description": "Step: 800",
-          "type": "color"
-        },
-        "900": {
-          "value": "#330a1f",
-          "description": "Step: 900",
-          "type": "color"
-        }
-      }
-    },
-    "text": {
-      "family": {
-        "sans": {
-          "value": "Zed Sans",
-          "type": "fontFamily"
-        },
-        "mono": {
-          "value": "Zed Mono",
-          "type": "fontFamily"
-        }
-      },
-      "weight": {
-        "thin": {
-          "value": "thin",
-          "type": "fontWeight"
-        },
-        "extra_light": {
-          "value": "extra_light",
-          "type": "fontWeight"
-        },
-        "light": {
-          "value": "light",
-          "type": "fontWeight"
-        },
-        "normal": {
-          "value": "normal",
-          "type": "fontWeight"
-        },
-        "medium": {
-          "value": "medium",
-          "type": "fontWeight"
-        },
-        "semibold": {
-          "value": "semibold",
-          "type": "fontWeight"
-        },
-        "bold": {
-          "value": "bold",
-          "type": "fontWeight"
-        },
-        "extra_bold": {
-          "value": "extra_bold",
-          "type": "fontWeight"
-        },
-        "black": {
-          "value": "black",
-          "type": "fontWeight"
-        }
-      }
-    },
-    "size": {
-      "px": {
-        "value": 1,
-        "type": "size"
-      },
-      "xs": {
-        "value": 2,
-        "type": "size"
-      },
-      "sm": {
-        "value": 4,
-        "type": "size"
-      },
-      "md": {
-        "value": 6,
-        "type": "size"
-      },
-      "lg": {
-        "value": 8,
-        "type": "size"
-      },
-      "xl": {
-        "value": 12,
-        "type": "size"
-      }
-    },
-    "fontSize": {
-      "3xs": {
-        "value": 8,
-        "type": "fontSize"
-      },
-      "2xs": {
-        "value": 10,
-        "type": "fontSize"
-      },
-      "xs": {
-        "value": 12,
-        "type": "fontSize"
-      },
-      "sm": {
-        "value": 14,
-        "type": "fontSize"
-      },
-      "md": {
-        "value": 16,
-        "type": "fontSize"
-      },
-      "lg": {
-        "value": 18,
-        "type": "fontSize"
-      },
-      "xl": {
-        "value": 20,
-        "type": "fontSize"
-      }
-    }
-  },
-  "cave-dark": {
-    "meta": {
-      "themeName": "cave-dark"
-    },
-    "text": {
-      "primary": {
-        "value": "#e2dfe7",
-        "type": "color"
-      },
-      "secondary": {
-        "value": "#8b8792",
-        "type": "color"
-      },
-      "muted": {
-        "value": "#8b8792",
-        "type": "color"
-      },
-      "placeholder": {
-        "value": "#7e7887",
-        "type": "color"
-      },
-      "active": {
-        "value": "#efecf4",
-        "type": "color"
-      },
-      "feature": {
-        "value": "#576ddb",
-        "type": "color"
-      },
-      "ok": {
-        "value": "#2a9292",
-        "type": "color"
-      },
-      "error": {
-        "value": "#be4678",
-        "type": "color"
-      },
-      "warning": {
-        "value": "#a06e3b",
-        "type": "color"
-      },
-      "info": {
-        "value": "#576ddb",
-        "type": "color"
-      }
-    },
-    "icon": {
-      "primary": {
-        "value": "#e2dfe7",
-        "type": "color"
-      },
-      "secondary": {
-        "value": "#8b8792",
-        "type": "color"
-      },
-      "muted": {
-        "value": "#8b8792",
-        "type": "color"
-      },
-      "placeholder": {
-        "value": "#7e7887",
-        "type": "color"
-      },
-      "active": {
-        "value": "#efecf4",
-        "type": "color"
-      },
-      "feature": {
-        "value": "#576ddb",
-        "type": "color"
-      },
-      "ok": {
-        "value": "#2a9292",
-        "type": "color"
-      },
-      "error": {
-        "value": "#be4678",
-        "type": "color"
-      },
-      "warning": {
-        "value": "#a06e3b",
-        "type": "color"
-      },
-      "info": {
-        "value": "#576ddb",
-        "type": "color"
-      }
-    },
-    "background": {
-      "100": {
-        "base": {
-          "value": "#332f38",
-          "type": "color"
-        },
-        "hovered": {
-          "value": "#3f3b45",
-          "type": "color"
-        },
-        "active": {
-          "value": "#4c4653",
-          "type": "color"
-        }
-      },
-      "300": {
-        "base": {
-          "value": "#26232a",
-          "type": "color"
-        },
-        "hovered": {
-          "value": "#332f38",
-          "type": "color"
-        },
-        "active": {
-          "value": "#3f3b45",
-          "type": "color"
-        }
-      },
-      "500": {
-        "base": {
-          "value": "#19171c",
-          "type": "color"
-        },
-        "hovered": {
-          "value": "#1c1a20",
-          "type": "color"
-        },
-        "active": {
-          "value": "#201d23",
-          "type": "color"
-        }
-      },
-      "on300": {
-        "base": {
-          "value": "#19171c",
-          "type": "color"
-        },
-        "hovered": {
-          "value": "#1c1a20",
-          "type": "color"
-        },
-        "active": {
-          "value": "#201d23",
-          "type": "color"
-        }
-      },
-      "on500": {
-        "base": {
-          "value": "#332f38",
-          "type": "color"
-        },
-        "hovered": {
-          "value": "#3f3b45",
-          "type": "color"
-        },
-        "active": {
-          "value": "#4c4653",
-          "type": "color"
-        }
-      },
-      "ok": {
-        "base": {
-          "value": "#2a929226",
-          "type": "color"
-        },
-        "hovered": {
-          "value": "#2a929233",
-          "type": "color"
-        },
-        "active": {
-          "value": "#2a929240",
-          "type": "color"
-        }
-      },
-      "error": {
-        "base": {
-          "value": "#be467826",
-          "type": "color"
-        },
-        "hovered": {
-          "value": "#be467833",
-          "type": "color"
-        },
-        "active": {
-          "value": "#be467840",
-          "type": "color"
-        }
-      },
-      "warning": {
-        "base": {
-          "value": "#a06e3b26",
-          "type": "color"
-        },
-        "hovered": {
-          "value": "#a06e3b33",
-          "type": "color"
-        },
-        "active": {
-          "value": "#a06e3b40",
-          "type": "color"
-        }
-      },
-      "info": {
-        "base": {
-          "value": "#576ddb26",
-          "type": "color"
-        },
-        "hovered": {
-          "value": "#576ddb33",
-          "type": "color"
-        },
-        "active": {
-          "value": "#576ddb40",
-          "type": "color"
-        }
-      }
-    },
-    "border": {
-      "primary": {
-        "value": "#19171c",
-        "type": "color"
-      },
-      "secondary": {
-        "value": "#26232a",
-        "type": "color"
-      },
-      "muted": {
-        "value": "#655f6d",
-        "type": "color"
-      },
-      "active": {
-        "value": "#655f6d",
-        "type": "color"
-      },
-      "onMedia": {
-        "value": "#19171c1a",
-        "type": "color"
-      },
-      "ok": {
-        "value": "#2a929226",
-        "type": "color"
-      },
-      "error": {
-        "value": "#be467826",
-        "type": "color"
-      },
-      "warning": {
-        "value": "#a06e3b26",
-        "type": "color"
-      },
-      "info": {
-        "value": "#576ddb26",
-        "type": "color"
-      }
-    },
-    "editor": {
-      "background": {
-        "value": "#19171c",
-        "type": "color"
-      },
-      "indent_guide": {
-        "value": "#655f6d",
-        "type": "color"
-      },
-      "indent_guide_active": {
-        "value": "#26232a",
-        "type": "color"
-      },
-      "line": {
-        "active": {
-          "value": "#26232a",
-          "type": "color"
-        },
-        "highlighted": {
-          "value": "#332f38",
-          "type": "color"
-        }
-      },
-      "highlight": {
-        "selection": {
-          "value": "#576ddb3d",
-          "type": "color"
-        },
-        "occurrence": {
-          "value": "#5852603d",
-          "type": "color"
-        },
-        "activeOccurrence": {
-          "value": "#5852607a",
-          "type": "color"
-        },
-        "matchingBracket": {
-          "value": "#201d23",
-          "type": "color"
-        },
-        "match": {
-          "value": "#3d1576",
-          "type": "color"
-        },
-        "activeMatch": {
-          "value": "#782edf7a",
-          "type": "color"
-        },
-        "related": {
-          "value": "#1c1a20",
-          "type": "color"
-        }
-      },
-      "gutter": {
-        "primary": {
-          "value": "#7e7887",
-          "type": "color"
-        },
-        "active": {
-          "value": "#efecf4",
-          "type": "color"
-        }
-      }
-    },
-    "syntax": {
-      "primary": {
-        "value": "#efecf4",
-        "type": "color"
-      },
-      "comment": {
-        "value": "#8b8792",
-        "type": "color"
-      },
-      "keyword": {
-        "value": "#576ddb",
-        "type": "color"
-      },
-      "function": {
-        "value": "#a06e3b",
-        "type": "color"
-      },
-      "type": {
-        "value": "#398bc6",
-        "type": "color"
-      },
-      "variant": {
-        "value": "#576ddb",
-        "type": "color"
-      },
-      "property": {
-        "value": "#576ddb",
-        "type": "color"
-      },
-      "enum": {
-        "value": "#aa573c",
-        "type": "color"
-      },
-      "operator": {
-        "value": "#aa573c",
-        "type": "color"
-      },
-      "string": {
-        "value": "#aa573c",
-        "type": "color"
-      },
-      "number": {
-        "value": "#2a9292",
-        "type": "color"
-      },
-      "boolean": {
-        "value": "#2a9292",
-        "type": "color"
-      }
-    },
-    "player": {
-      "1": {
-        "baseColor": {
-          "value": "#576ddb",
-          "type": "color"
-        },
-        "cursorColor": {
-          "value": "#576ddb",
-          "type": "color"
-        },
-        "selectionColor": {
-          "value": "#576ddb3d",
-          "type": "color"
-        },
-        "borderColor": {
-          "value": "#576ddbcc",
-          "type": "color"
-        }
-      },
-      "2": {
-        "baseColor": {
-          "value": "#2a9292",
-          "type": "color"
-        },
-        "cursorColor": {
-          "value": "#2a9292",
-          "type": "color"
-        },
-        "selectionColor": {
-          "value": "#2a92923d",
-          "type": "color"
-        },
-        "borderColor": {
-          "value": "#2a9292cc",
-          "type": "color"
-        }
-      },
-      "3": {
-        "baseColor": {
-          "value": "#bf40bf",
-          "type": "color"
-        },
-        "cursorColor": {
-          "value": "#bf40bf",
-          "type": "color"
-        },
-        "selectionColor": {
-          "value": "#bf40bf3d",
-          "type": "color"
-        },
-        "borderColor": {
-          "value": "#bf40bfcc",
-          "type": "color"
-        }
-      },
-      "4": {
-        "baseColor": {
-          "value": "#aa573c",
-          "type": "color"
-        },
-        "cursorColor": {
-          "value": "#aa573c",
-          "type": "color"
-        },
-        "selectionColor": {
-          "value": "#aa573c3d",
-          "type": "color"
-        },
-        "borderColor": {
-          "value": "#aa573ccc",
-          "type": "color"
-        }
-      },
-      "5": {
-        "baseColor": {
-          "value": "#955ae7",
-          "type": "color"
-        },
-        "cursorColor": {
-          "value": "#955ae7",
-          "type": "color"
-        },
-        "selectionColor": {
-          "value": "#955ae73d",
-          "type": "color"
-        },
-        "borderColor": {
-          "value": "#955ae7cc",
-          "type": "color"
-        }
-      },
-      "6": {
-        "baseColor": {
-          "value": "#398bc6",
-          "type": "color"
-        },
-        "cursorColor": {
-          "value": "#398bc6",
-          "type": "color"
-        },
-        "selectionColor": {
-          "value": "#398bc63d",
-          "type": "color"
-        },
-        "borderColor": {
-          "value": "#398bc6cc",
-          "type": "color"
-        }
-      },
-      "7": {
-        "baseColor": {
-          "value": "#be4678",
-          "type": "color"
-        },
-        "cursorColor": {
-          "value": "#be4678",
-          "type": "color"
-        },
-        "selectionColor": {
-          "value": "#be46783d",
-          "type": "color"
-        },
-        "borderColor": {
-          "value": "#be4678cc",
-          "type": "color"
-        }
-      },
-      "8": {
-        "baseColor": {
-          "value": "#a06e3b",
-          "type": "color"
-        },
-        "cursorColor": {
-          "value": "#a06e3b",
-          "type": "color"
-        },
-        "selectionColor": {
-          "value": "#a06e3b3d",
-          "type": "color"
-        },
-        "borderColor": {
-          "value": "#a06e3bcc",
-          "type": "color"
-        }
-      }
-    },
-    "shadowAlpha": {
-      "value": 0.24,
-      "type": "number"
-    }
-  },
-  "cave-light": {
-    "meta": {
-      "themeName": "cave-light"
-    },
-    "text": {
-      "primary": {
-        "value": "#26232a",
-        "type": "color"
-      },
-      "secondary": {
-        "value": "#585260",
-        "type": "color"
-      },
-      "muted": {
-        "value": "#585260",
-        "type": "color"
-      },
-      "placeholder": {
-        "value": "#655f6d",
-        "type": "color"
-      },
-      "active": {
-        "value": "#19171c",
-        "type": "color"
-      },
-      "feature": {
-        "value": "#576ddb",
-        "type": "color"
-      },
-      "ok": {
-        "value": "#2a9292",
-        "type": "color"
-      },
-      "error": {
-        "value": "#be4678",
-        "type": "color"
-      },
-      "warning": {
-        "value": "#a06e3b",
-        "type": "color"
-      },
-      "info": {
-        "value": "#576ddb",
-        "type": "color"
-      }
-    },
-    "icon": {
-      "primary": {
-        "value": "#26232a",
-        "type": "color"
-      },
-      "secondary": {
-        "value": "#585260",
-        "type": "color"
-      },
-      "muted": {
-        "value": "#585260",
-        "type": "color"
-      },
-      "placeholder": {
-        "value": "#655f6d",
-        "type": "color"
-      },
-      "active": {
-        "value": "#19171c",
-        "type": "color"
-      },
-      "feature": {
-        "value": "#576ddb",
-        "type": "color"
-      },
-      "ok": {
-        "value": "#2a9292",
-        "type": "color"
-      },
-      "error": {
-        "value": "#be4678",
-        "type": "color"
-      },
-      "warning": {
-        "value": "#a06e3b",
-        "type": "color"
-      },
-      "info": {
-        "value": "#576ddb",
-        "type": "color"
-      }
-    },
-    "background": {
-      "100": {
-        "base": {
-          "value": "#ccc9d2",
-          "type": "color"
-        },
-        "hovered": {
-          "value": "#b7b3bd",
-          "type": "color"
-        },
-        "active": {
-          "value": "#a19da7",
-          "type": "color"
-        }
-      },
-      "300": {
-        "base": {
-          "value": "#e2dfe7",
-          "type": "color"
-        },
-        "hovered": {
-          "value": "#ccc9d2",
-          "type": "color"
-        },
-        "active": {
-          "value": "#b7b3bd",
-          "type": "color"
-        }
-      },
-      "500": {
-        "base": {
-          "value": "#efecf4",
-          "type": "color"
-        },
-        "hovered": {
-          "value": "#ece9f1",
-          "type": "color"
-        },
-        "active": {
-          "value": "#e9e6ee",
-          "type": "color"
-        }
-      },
-      "on300": {
-        "base": {
-          "value": "#efecf4",
-          "type": "color"
-        },
-        "hovered": {
-          "value": "#ece9f1",
-          "type": "color"
-        },
-        "active": {
-          "value": "#e9e6ee",
-          "type": "color"
-        }
-      },
-      "on500": {
-        "base": {
-          "value": "#ccc9d2",
-          "type": "color"
-        },
-        "hovered": {
-          "value": "#b7b3bd",
-          "type": "color"
-        },
-        "active": {
-          "value": "#a19da7",
-          "type": "color"
-        }
-      },
-      "ok": {
-        "base": {
-          "value": "#2a929226",
-          "type": "color"
-        },
-        "hovered": {
-          "value": "#2a929233",
-          "type": "color"
-        },
-        "active": {
-          "value": "#2a929240",
-          "type": "color"
-        }
-      },
-      "error": {
-        "base": {
-          "value": "#be467826",
-          "type": "color"
-        },
-        "hovered": {
-          "value": "#be467833",
-          "type": "color"
-        },
-        "active": {
-          "value": "#be467840",
-          "type": "color"
-        }
-      },
-      "warning": {
-        "base": {
-          "value": "#a06e3b26",
-          "type": "color"
-        },
-        "hovered": {
-          "value": "#a06e3b33",
-          "type": "color"
-        },
-        "active": {
-          "value": "#a06e3b40",
-          "type": "color"
-        }
-      },
-      "info": {
-        "base": {
-          "value": "#576ddb26",
-          "type": "color"
-        },
-        "hovered": {
-          "value": "#576ddb33",
-          "type": "color"
-        },
-        "active": {
-          "value": "#576ddb40",
-          "type": "color"
-        }
-      }
-    },
-    "border": {
-      "primary": {
-        "value": "#b7b3bd",
-        "type": "color"
-      },
-      "secondary": {
-        "value": "#ccc9d2",
-        "type": "color"
-      },
-      "muted": {
-        "value": "#e2dfe7",
-        "type": "color"
-      },
-      "active": {
-        "value": "#655f6d",
-        "type": "color"
-      },
-      "onMedia": {
-        "value": "#efecf41a",
-        "type": "color"
-      },
-      "ok": {
-        "value": "#2a929226",
-        "type": "color"
-      },
-      "error": {
-        "value": "#be467826",
-        "type": "color"
-      },
-      "warning": {
-        "value": "#a06e3b26",
-        "type": "color"
-      },
-      "info": {
-        "value": "#576ddb26",
-        "type": "color"
-      }
-    },
-    "editor": {
-      "background": {
-        "value": "#efecf4",
-        "type": "color"
-      },
-      "indent_guide": {
-        "value": "#e2dfe7",
-        "type": "color"
-      },
-      "indent_guide_active": {
-        "value": "#ccc9d2",
-        "type": "color"
-      },
-      "line": {
-        "active": {
-          "value": "#e2dfe7",
-          "type": "color"
-        },
-        "highlighted": {
-          "value": "#ccc9d2",
-          "type": "color"
-        }
-      },
-      "highlight": {
-        "selection": {
-          "value": "#576ddb3d",
-          "type": "color"
-        },
-        "occurrence": {
-          "value": "#8b87921f",
-          "type": "color"
-        },
-        "activeOccurrence": {
-          "value": "#8b87923d",
-          "type": "color"
-        },
-        "matchingBracket": {
-          "value": "#e9e6ee",
-          "type": "color"
-        },
-        "match": {
-          "value": "#d5bdfa",
-          "type": "color"
-        },
-        "activeMatch": {
-          "value": "#a775ee3d",
-          "type": "color"
-        },
-        "related": {
-          "value": "#ece9f1",
-          "type": "color"
-        }
-      },
-      "gutter": {
-        "primary": {
-          "value": "#655f6d",
-          "type": "color"
-        },
-        "active": {
-          "value": "#19171c",
-          "type": "color"
-        }
-      }
-    },
-    "syntax": {
-      "primary": {
-        "value": "#19171c",
-        "type": "color"
-      },
-      "comment": {
-        "value": "#585260",
-        "type": "color"
-      },
-      "keyword": {
-        "value": "#576ddb",
-        "type": "color"
-      },
-      "function": {
-        "value": "#a06e3b",
-        "type": "color"
-      },
-      "type": {
-        "value": "#398bc6",
-        "type": "color"
-      },
-      "variant": {
-        "value": "#576ddb",
-        "type": "color"
-      },
-      "property": {
-        "value": "#576ddb",
-        "type": "color"
-      },
-      "enum": {
-        "value": "#aa573c",
-        "type": "color"
-      },
-      "operator": {
-        "value": "#aa573c",
-        "type": "color"
-      },
-      "string": {
-        "value": "#aa573c",
-        "type": "color"
-      },
-      "number": {
-        "value": "#2a9292",
-        "type": "color"
-      },
-      "boolean": {
-        "value": "#2a9292",
-        "type": "color"
-      }
-    },
-    "player": {
-      "1": {
-        "baseColor": {
-          "value": "#576ddb",
-          "type": "color"
-        },
-        "cursorColor": {
-          "value": "#576ddb",
-          "type": "color"
-        },
-        "selectionColor": {
-          "value": "#576ddb3d",
-          "type": "color"
-        },
-        "borderColor": {
-          "value": "#576ddbcc",
-          "type": "color"
-        }
-      },
-      "2": {
-        "baseColor": {
-          "value": "#2a9292",
-          "type": "color"
-        },
-        "cursorColor": {
-          "value": "#2a9292",
-          "type": "color"
-        },
-        "selectionColor": {
-          "value": "#2a92923d",
-          "type": "color"
-        },
-        "borderColor": {
-          "value": "#2a9292cc",
-          "type": "color"
-        }
-      },
-      "3": {
-        "baseColor": {
-          "value": "#bf40bf",
-          "type": "color"
-        },
-        "cursorColor": {
-          "value": "#bf40bf",
-          "type": "color"
-        },
-        "selectionColor": {
-          "value": "#bf40bf3d",
-          "type": "color"
-        },
-        "borderColor": {
-          "value": "#bf40bfcc",
-          "type": "color"
-        }
-      },
-      "4": {
-        "baseColor": {
-          "value": "#aa573c",
-          "type": "color"
-        },
-        "cursorColor": {
-          "value": "#aa573c",
-          "type": "color"
-        },
-        "selectionColor": {
-          "value": "#aa573c3d",
-          "type": "color"
-        },
-        "borderColor": {
-          "value": "#aa573ccc",
-          "type": "color"
-        }
-      },
-      "5": {
-        "baseColor": {
-          "value": "#955ae7",
-          "type": "color"
-        },
-        "cursorColor": {
-          "value": "#955ae7",
-          "type": "color"
-        },
-        "selectionColor": {
-          "value": "#955ae73d",
-          "type": "color"
-        },
-        "borderColor": {
-          "value": "#955ae7cc",
-          "type": "color"
-        }
-      },
-      "6": {
-        "baseColor": {
-          "value": "#398bc6",
-          "type": "color"
-        },
-        "cursorColor": {
-          "value": "#398bc6",
-          "type": "color"
-        },
-        "selectionColor": {
-          "value": "#398bc63d",
-          "type": "color"
-        },
-        "borderColor": {
-          "value": "#398bc6cc",
-          "type": "color"
-        }
-      },
-      "7": {
-        "baseColor": {
-          "value": "#be4678",
-          "type": "color"
-        },
-        "cursorColor": {
-          "value": "#be4678",
-          "type": "color"
-        },
-        "selectionColor": {
-          "value": "#be46783d",
-          "type": "color"
-        },
-        "borderColor": {
-          "value": "#be4678cc",
-          "type": "color"
-        }
-      },
-      "8": {
-        "baseColor": {
-          "value": "#a06e3b",
-          "type": "color"
-        },
-        "cursorColor": {
-          "value": "#a06e3b",
-          "type": "color"
-        },
-        "selectionColor": {
-          "value": "#a06e3b3d",
-          "type": "color"
-        },
-        "borderColor": {
-          "value": "#a06e3bcc",
-          "type": "color"
-        }
-      }
-    },
-    "shadowAlpha": {
-      "value": 0.12,
-      "type": "number"
-    }
-  },
-  "solarized-dark": {
-    "meta": {
-      "themeName": "solarized-dark"
-    },
-    "text": {
-      "primary": {
-        "value": "#eee8d5",
-        "type": "color"
-      },
-      "secondary": {
-        "value": "#93a1a1",
-        "type": "color"
-      },
-      "muted": {
-        "value": "#93a1a1",
-        "type": "color"
-      },
-      "placeholder": {
-        "value": "#839496",
-        "type": "color"
-      },
-      "active": {
-        "value": "#fdf6e3",
-        "type": "color"
-      },
-      "feature": {
-        "value": "#268bd2",
-        "type": "color"
-      },
-      "ok": {
-        "value": "#859900",
-        "type": "color"
-      },
-      "error": {
-        "value": "#dc322f",
-        "type": "color"
-      },
-      "warning": {
-        "value": "#b58900",
-        "type": "color"
-      },
-      "info": {
-        "value": "#268bd2",
-        "type": "color"
-      }
-    },
-    "icon": {
-      "primary": {
-        "value": "#eee8d5",
-        "type": "color"
-      },
-      "secondary": {
-        "value": "#93a1a1",
-        "type": "color"
-      },
-      "muted": {
-        "value": "#93a1a1",
-        "type": "color"
-      },
-      "placeholder": {
-        "value": "#839496",
-        "type": "color"
-      },
-      "active": {
-        "value": "#fdf6e3",
-        "type": "color"
-      },
-      "feature": {
-        "value": "#268bd2",
-        "type": "color"
-      },
-      "ok": {
-        "value": "#859900",
-        "type": "color"
-      },
-      "error": {
-        "value": "#dc322f",
-        "type": "color"
-      },
-      "warning": {
-        "value": "#b58900",
-        "type": "color"
-      },
-      "info": {
-        "value": "#268bd2",
-        "type": "color"
-      }
-    },
-    "background": {
-      "100": {
-        "base": {
-          "value": "#1b444f",
-          "type": "color"
-        },
-        "hovered": {
-          "value": "#30525c",
-          "type": "color"
-        },
-        "active": {
-          "value": "#446068",
-          "type": "color"
-        }
-      },
-      "300": {
-        "base": {
-          "value": "#073642",
-          "type": "color"
-        },
-        "hovered": {
-          "value": "#1b444f",
-          "type": "color"
-        },
-        "active": {
-          "value": "#30525c",
-          "type": "color"
-        }
-      },
-      "500": {
-        "base": {
-          "value": "#002b36",
-          "type": "color"
-        },
-        "hovered": {
-          "value": "#022e39",
-          "type": "color"
-        },
-        "active": {
-          "value": "#04313c",
-          "type": "color"
-        }
-      },
-      "on300": {
-        "base": {
-          "value": "#002b36",
-          "type": "color"
-        },
-        "hovered": {
-          "value": "#022e39",
-          "type": "color"
-        },
-        "active": {
-          "value": "#04313c",
-          "type": "color"
-        }
-      },
-      "on500": {
-        "base": {
-          "value": "#1b444f",
-          "type": "color"
-        },
-        "hovered": {
-          "value": "#30525c",
-          "type": "color"
-        },
-        "active": {
-          "value": "#446068",
-          "type": "color"
-        }
-      },
-      "ok": {
-        "base": {
-          "value": "#85990026",
-          "type": "color"
-        },
-        "hovered": {
-          "value": "#85990033",
-          "type": "color"
-        },
-        "active": {
-          "value": "#85990040",
-          "type": "color"
-        }
-      },
-      "error": {
-        "base": {
-          "value": "#dc322f26",
-          "type": "color"
-        },
-        "hovered": {
-          "value": "#dc322f33",
-          "type": "color"
-        },
-        "active": {
-          "value": "#dc322f40",
-          "type": "color"
-        }
-      },
-      "warning": {
-        "base": {
-          "value": "#b5890026",
-          "type": "color"
-        },
-        "hovered": {
-          "value": "#b5890033",
-          "type": "color"
-        },
-        "active": {
-          "value": "#b5890040",
-          "type": "color"
-        }
-      },
-      "info": {
-        "base": {
-          "value": "#268bd226",
-          "type": "color"
-        },
-        "hovered": {
-          "value": "#268bd233",
-          "type": "color"
-        },
-        "active": {
-          "value": "#268bd240",
-          "type": "color"
-        }
-      }
-    },
-    "border": {
-      "primary": {
-        "value": "#002b36",
-        "type": "color"
-      },
-      "secondary": {
-        "value": "#073642",
-        "type": "color"
-      },
-      "muted": {
-        "value": "#657b83",
-        "type": "color"
-      },
-      "active": {
-        "value": "#657b83",
-        "type": "color"
-      },
-      "onMedia": {
-        "value": "#002b361a",
-        "type": "color"
-      },
-      "ok": {
-        "value": "#85990026",
-        "type": "color"
-      },
-      "error": {
-        "value": "#dc322f26",
-        "type": "color"
-      },
-      "warning": {
-        "value": "#b5890026",
-        "type": "color"
-      },
-      "info": {
-        "value": "#268bd226",
-        "type": "color"
-      }
-    },
-    "editor": {
-      "background": {
-        "value": "#002b36",
-        "type": "color"
-      },
-      "indent_guide": {
-        "value": "#657b83",
-        "type": "color"
-      },
-      "indent_guide_active": {
-        "value": "#073642",
-        "type": "color"
-      },
-      "line": {
-        "active": {
-          "value": "#073642",
-          "type": "color"
-        },
-        "highlighted": {
-          "value": "#1b444f",
-          "type": "color"
-        }
-      },
-      "highlight": {
-        "selection": {
-          "value": "#268bd23d",
-          "type": "color"
-        },
-        "occurrence": {
-          "value": "#586e753d",
-          "type": "color"
-        },
-        "activeOccurrence": {
-          "value": "#586e757a",
-          "type": "color"
-        },
-        "matchingBracket": {
-          "value": "#04313c",
-          "type": "color"
-        },
-        "match": {
-          "value": "#1b1f6b",
-          "type": "color"
-        },
-        "activeMatch": {
-          "value": "#434abc7a",
-          "type": "color"
-        },
-        "related": {
-          "value": "#022e39",
-          "type": "color"
-        }
-      },
-      "gutter": {
-        "primary": {
-          "value": "#839496",
-          "type": "color"
-        },
-        "active": {
-          "value": "#fdf6e3",
-          "type": "color"
-        }
-      }
-    },
-    "syntax": {
-      "primary": {
-        "value": "#fdf6e3",
-        "type": "color"
-      },
-      "comment": {
-        "value": "#93a1a1",
-        "type": "color"
-      },
-      "keyword": {
-        "value": "#268bd2",
-        "type": "color"
-      },
-      "function": {
-        "value": "#b58900",
-        "type": "color"
-      },
-      "type": {
-        "value": "#2aa198",
-        "type": "color"
-      },
-      "variant": {
-        "value": "#268bd2",
-        "type": "color"
-      },
-      "property": {
-        "value": "#268bd2",
-        "type": "color"
-      },
-      "enum": {
-        "value": "#cb4b16",
-        "type": "color"
-      },
-      "operator": {
-        "value": "#cb4b16",
-        "type": "color"
-      },
-      "string": {
-        "value": "#cb4b16",
-        "type": "color"
-      },
-      "number": {
-        "value": "#859900",
-        "type": "color"
-      },
-      "boolean": {
-        "value": "#859900",
-        "type": "color"
-      }
-    },
-    "player": {
-      "1": {
-        "baseColor": {
-          "value": "#268bd2",
-          "type": "color"
-        },
-        "cursorColor": {
-          "value": "#268bd2",
-          "type": "color"
-        },
-        "selectionColor": {
-          "value": "#268bd23d",
-          "type": "color"
-        },
-        "borderColor": {
-          "value": "#268bd2cc",
-          "type": "color"
-        }
-      },
-      "2": {
-        "baseColor": {
-          "value": "#859900",
-          "type": "color"
-        },
-        "cursorColor": {
-          "value": "#859900",
-          "type": "color"
-        },
-        "selectionColor": {
-          "value": "#8599003d",
-          "type": "color"
-        },
-        "borderColor": {
-          "value": "#859900cc",
-          "type": "color"
-        }
-      },
-      "3": {
-        "baseColor": {
-          "value": "#d33682",
-          "type": "color"
-        },
-        "cursorColor": {
-          "value": "#d33682",
-          "type": "color"
-        },
-        "selectionColor": {
-          "value": "#d336823d",
-          "type": "color"
-        },
-        "borderColor": {
-          "value": "#d33682cc",
-          "type": "color"
-        }
-      },
-      "4": {
-        "baseColor": {
-          "value": "#cb4b16",
-          "type": "color"
-        },
-        "cursorColor": {
-          "value": "#cb4b16",
-          "type": "color"
-        },
-        "selectionColor": {
-          "value": "#cb4b163d",
-          "type": "color"
-        },
-        "borderColor": {
-          "value": "#cb4b16cc",
-          "type": "color"
-        }
-      },
-      "5": {
-        "baseColor": {
-          "value": "#6c71c4",
-          "type": "color"
-        },
-        "cursorColor": {
-          "value": "#6c71c4",
-          "type": "color"
-        },
-        "selectionColor": {
-          "value": "#6c71c43d",
-          "type": "color"
-        },
-        "borderColor": {
-          "value": "#6c71c4cc",
-          "type": "color"
-        }
-      },
-      "6": {
-        "baseColor": {
-          "value": "#2aa198",
-          "type": "color"
-        },
-        "cursorColor": {
-          "value": "#2aa198",
-          "type": "color"
-        },
-        "selectionColor": {
-          "value": "#2aa1983d",
-          "type": "color"
-        },
-        "borderColor": {
-          "value": "#2aa198cc",
-          "type": "color"
-        }
-      },
-      "7": {
-        "baseColor": {
-          "value": "#dc322f",
-          "type": "color"
-        },
-        "cursorColor": {
-          "value": "#dc322f",
-          "type": "color"
-        },
-        "selectionColor": {
-          "value": "#dc322f3d",
-          "type": "color"
-        },
-        "borderColor": {
-          "value": "#dc322fcc",
-          "type": "color"
-        }
-      },
-      "8": {
-        "baseColor": {
-          "value": "#b58900",
-          "type": "color"
-        },
-        "cursorColor": {
-          "value": "#b58900",
-          "type": "color"
-        },
-        "selectionColor": {
-          "value": "#b589003d",
-          "type": "color"
-        },
-        "borderColor": {
-          "value": "#b58900cc",
-          "type": "color"
-        }
-      }
-    },
-    "shadowAlpha": {
-      "value": 0.24,
-      "type": "number"
-    }
-  },
-  "solarized-light": {
-    "meta": {
-      "themeName": "solarized-light"
-    },
-    "text": {
-      "primary": {
-        "value": "#073642",
-        "type": "color"
-      },
-      "secondary": {
-        "value": "#586e75",
-        "type": "color"
-      },
-      "muted": {
-        "value": "#586e75",
-        "type": "color"
-      },
-      "placeholder": {
-        "value": "#657b83",
-        "type": "color"
-      },
-      "active": {
-        "value": "#002b36",
-        "type": "color"
-      },
-      "feature": {
-        "value": "#268bd2",
-        "type": "color"
-      },
-      "ok": {
-        "value": "#859900",
-        "type": "color"
-      },
-      "error": {
-        "value": "#dc322f",
-        "type": "color"
-      },
-      "warning": {
-        "value": "#b58900",
-        "type": "color"
-      },
-      "info": {
-        "value": "#268bd2",
-        "type": "color"
-      }
-    },
-    "icon": {
-      "primary": {
-        "value": "#073642",
-        "type": "color"
-      },
-      "secondary": {
-        "value": "#586e75",
-        "type": "color"
-      },
-      "muted": {
-        "value": "#586e75",
-        "type": "color"
-      },
-      "placeholder": {
-        "value": "#657b83",
-        "type": "color"
-      },
-      "active": {
-        "value": "#002b36",
-        "type": "color"
-      },
-      "feature": {
-        "value": "#268bd2",
-        "type": "color"
-      },
-      "ok": {
-        "value": "#859900",
-        "type": "color"
-      },
-      "error": {
-        "value": "#dc322f",
-        "type": "color"
-      },
-      "warning": {
-        "value": "#b58900",
-        "type": "color"
-      },
-      "info": {
-        "value": "#268bd2",
-        "type": "color"
-      }
-    },
-    "background": {
-      "100": {
-        "base": {
-          "value": "#d7d6c8",
-          "type": "color"
-        },
-        "hovered": {
-          "value": "#c1c5bb",
-          "type": "color"
-        },
-        "active": {
-          "value": "#aab3ae",
-          "type": "color"
-        }
-      },
-      "300": {
-        "base": {
-          "value": "#eee8d5",
-          "type": "color"
-        },
-        "hovered": {
-          "value": "#d7d6c8",
-          "type": "color"
-        },
-        "active": {
-          "value": "#c1c5bb",
-          "type": "color"
-        }
-      },
-      "500": {
-        "base": {
-          "value": "#fdf6e3",
-          "type": "color"
-        },
-        "hovered": {
-          "value": "#f9f3e0",
-          "type": "color"
-        },
-        "active": {
-          "value": "#f6efdc",
-          "type": "color"
-        }
-      },
-      "on300": {
-        "base": {
-          "value": "#fdf6e3",
-          "type": "color"
-        },
-        "hovered": {
-          "value": "#f9f3e0",
-          "type": "color"
-        },
-        "active": {
-          "value": "#f6efdc",
-          "type": "color"
-        }
-      },
-      "on500": {
-        "base": {
-          "value": "#d7d6c8",
-          "type": "color"
-        },
-        "hovered": {
-          "value": "#c1c5bb",
-          "type": "color"
-        },
-        "active": {
-          "value": "#aab3ae",
-          "type": "color"
-        }
-      },
-      "ok": {
-        "base": {
-          "value": "#85990026",
-          "type": "color"
-        },
-        "hovered": {
-          "value": "#85990033",
-          "type": "color"
-        },
-        "active": {
-          "value": "#85990040",
-          "type": "color"
-        }
-      },
-      "error": {
-        "base": {
-          "value": "#dc322f26",
-          "type": "color"
-        },
-        "hovered": {
-          "value": "#dc322f33",
-          "type": "color"
-        },
-        "active": {
-          "value": "#dc322f40",
-          "type": "color"
-        }
-      },
-      "warning": {
-        "base": {
-          "value": "#b5890026",
-          "type": "color"
-        },
-        "hovered": {
-          "value": "#b5890033",
-          "type": "color"
-        },
-        "active": {
-          "value": "#b5890040",
-          "type": "color"
-        }
-      },
-      "info": {
-        "base": {
-          "value": "#268bd226",
-          "type": "color"
-        },
-        "hovered": {
-          "value": "#268bd233",
-          "type": "color"
-        },
-        "active": {
-          "value": "#268bd240",
-          "type": "color"
-        }
-      }
-    },
-    "border": {
-      "primary": {
-        "value": "#c1c5bb",
-        "type": "color"
-      },
-      "secondary": {
-        "value": "#d7d6c8",
-        "type": "color"
-      },
-      "muted": {
-        "value": "#eee8d5",
-        "type": "color"
-      },
-      "active": {
-        "value": "#657b83",
-        "type": "color"
-      },
-      "onMedia": {
-        "value": "#fdf6e31a",
-        "type": "color"
-      },
-      "ok": {
-        "value": "#85990026",
-        "type": "color"
-      },
-      "error": {
-        "value": "#dc322f26",
-        "type": "color"
-      },
-      "warning": {
-        "value": "#b5890026",
-        "type": "color"
-      },
-      "info": {
-        "value": "#268bd226",
-        "type": "color"
-      }
-    },
-    "editor": {
-      "background": {
-        "value": "#fdf6e3",
-        "type": "color"
-      },
-      "indent_guide": {
-        "value": "#eee8d5",
-        "type": "color"
-      },
-      "indent_guide_active": {
-        "value": "#d7d6c8",
-        "type": "color"
-      },
-      "line": {
-        "active": {
-          "value": "#eee8d5",
-          "type": "color"
-        },
-        "highlighted": {
-          "value": "#d7d6c8",
-          "type": "color"
-        }
-      },
-      "highlight": {
-        "selection": {
-          "value": "#268bd23d",
-          "type": "color"
-        },
-        "occurrence": {
-          "value": "#93a1a11f",
-          "type": "color"
-        },
-        "activeOccurrence": {
-          "value": "#93a1a13d",
-          "type": "color"
-        },
-        "matchingBracket": {
-          "value": "#f6efdc",
-          "type": "color"
-        },
-        "match": {
-          "value": "#bcc0f6",
-          "type": "color"
-        },
-        "activeMatch": {
-          "value": "#7f84d73d",
-          "type": "color"
-        },
-        "related": {
-          "value": "#f9f3e0",
-          "type": "color"
-        }
-      },
-      "gutter": {
-        "primary": {
-          "value": "#657b83",
-          "type": "color"
-        },
-        "active": {
-          "value": "#002b36",
-          "type": "color"
-        }
-      }
-    },
-    "syntax": {
-      "primary": {
-        "value": "#002b36",
-        "type": "color"
-      },
-      "comment": {
-        "value": "#586e75",
-        "type": "color"
-      },
-      "keyword": {
-        "value": "#268bd2",
-        "type": "color"
-      },
-      "function": {
-        "value": "#b58900",
-        "type": "color"
-      },
-      "type": {
-        "value": "#2aa198",
-        "type": "color"
-      },
-      "variant": {
-        "value": "#268bd2",
-        "type": "color"
-      },
-      "property": {
-        "value": "#268bd2",
-        "type": "color"
-      },
-      "enum": {
-        "value": "#cb4b16",
-        "type": "color"
-      },
-      "operator": {
-        "value": "#cb4b16",
-        "type": "color"
-      },
-      "string": {
-        "value": "#cb4b16",
-        "type": "color"
-      },
-      "number": {
-        "value": "#859900",
-        "type": "color"
-      },
-      "boolean": {
-        "value": "#859900",
-        "type": "color"
-      }
-    },
-    "player": {
-      "1": {
-        "baseColor": {
-          "value": "#268bd2",
-          "type": "color"
-        },
-        "cursorColor": {
-          "value": "#268bd2",
-          "type": "color"
-        },
-        "selectionColor": {
-          "value": "#268bd23d",
-          "type": "color"
-        },
-        "borderColor": {
-          "value": "#268bd2cc",
-          "type": "color"
-        }
-      },
-      "2": {
-        "baseColor": {
-          "value": "#859900",
-          "type": "color"
-        },
-        "cursorColor": {
-          "value": "#859900",
-          "type": "color"
-        },
-        "selectionColor": {
-          "value": "#8599003d",
-          "type": "color"
-        },
-        "borderColor": {
-          "value": "#859900cc",
-          "type": "color"
-        }
-      },
-      "3": {
-        "baseColor": {
-          "value": "#d33682",
-          "type": "color"
-        },
-        "cursorColor": {
-          "value": "#d33682",
-          "type": "color"
-        },
-        "selectionColor": {
-          "value": "#d336823d",
-          "type": "color"
-        },
-        "borderColor": {
-          "value": "#d33682cc",
-          "type": "color"
-        }
-      },
-      "4": {
-        "baseColor": {
-          "value": "#cb4b16",
-          "type": "color"
-        },
-        "cursorColor": {
-          "value": "#cb4b16",
-          "type": "color"
-        },
-        "selectionColor": {
-          "value": "#cb4b163d",
-          "type": "color"
-        },
-        "borderColor": {
-          "value": "#cb4b16cc",
-          "type": "color"
-        }
-      },
-      "5": {
-        "baseColor": {
-          "value": "#6c71c4",
-          "type": "color"
-        },
-        "cursorColor": {
-          "value": "#6c71c4",
-          "type": "color"
-        },
-        "selectionColor": {
-          "value": "#6c71c43d",
-          "type": "color"
-        },
-        "borderColor": {
-          "value": "#6c71c4cc",
-          "type": "color"
-        }
-      },
-      "6": {
-        "baseColor": {
-          "value": "#2aa198",
-          "type": "color"
-        },
-        "cursorColor": {
-          "value": "#2aa198",
-          "type": "color"
-        },
-        "selectionColor": {
-          "value": "#2aa1983d",
-          "type": "color"
-        },
-        "borderColor": {
-          "value": "#2aa198cc",
-          "type": "color"
-        }
-      },
-      "7": {
-        "baseColor": {
-          "value": "#dc322f",
-          "type": "color"
-        },
-        "cursorColor": {
-          "value": "#dc322f",
-          "type": "color"
-        },
-        "selectionColor": {
-          "value": "#dc322f3d",
-          "type": "color"
-        },
-        "borderColor": {
-          "value": "#dc322fcc",
-          "type": "color"
-        }
-      },
-      "8": {
-        "baseColor": {
-          "value": "#b58900",
-          "type": "color"
-        },
-        "cursorColor": {
-          "value": "#b58900",
-          "type": "color"
-        },
-        "selectionColor": {
-          "value": "#b589003d",
-          "type": "color"
-        },
-        "borderColor": {
-          "value": "#b58900cc",
-          "type": "color"
-        }
-      }
-    },
-    "shadowAlpha": {
-      "value": 0.12,
-      "type": "number"
-    }
-  },
-  "sulphurpool-dark": {
-    "meta": {
-      "themeName": "sulphurpool-dark"
-    },
-    "text": {
-      "primary": {
-        "value": "#dfe2f1",
-        "type": "color"
-      },
-      "secondary": {
-        "value": "#979db4",
-        "type": "color"
-      },
-      "muted": {
-        "value": "#979db4",
-        "type": "color"
-      },
-      "placeholder": {
-        "value": "#898ea4",
-        "type": "color"
-      },
-      "active": {
-        "value": "#f5f7ff",
-        "type": "color"
-      },
-      "feature": {
-        "value": "#3d8fd1",
-        "type": "color"
-      },
-      "ok": {
-        "value": "#ac9739",
-        "type": "color"
-      },
-      "error": {
-        "value": "#c94922",
-        "type": "color"
-      },
-      "warning": {
-        "value": "#c08b30",
-        "type": "color"
-      },
-      "info": {
-        "value": "#3d8fd1",
-        "type": "color"
-      }
-    },
-    "icon": {
-      "primary": {
-        "value": "#dfe2f1",
-        "type": "color"
-      },
-      "secondary": {
-        "value": "#979db4",
-        "type": "color"
-      },
-      "muted": {
-        "value": "#979db4",
-        "type": "color"
-      },
-      "placeholder": {
-        "value": "#898ea4",
-        "type": "color"
-      },
-      "active": {
-        "value": "#f5f7ff",
-        "type": "color"
-      },
-      "feature": {
-        "value": "#3d8fd1",
-        "type": "color"
-      },
-      "ok": {
-        "value": "#ac9739",
-        "type": "color"
-      },
-      "error": {
-        "value": "#c94922",
-        "type": "color"
-      },
-      "warning": {
-        "value": "#c08b30",
-        "type": "color"
-      },
-      "info": {
-        "value": "#3d8fd1",
-        "type": "color"
-      }
-    },
-    "background": {
-      "100": {
-        "base": {
-          "value": "#363f62",
-          "type": "color"
-        },
-        "hovered": {
-          "value": "#444c6f",
-          "type": "color"
-        },
-        "active": {
-          "value": "#51597b",
-          "type": "color"
-        }
-      },
-      "300": {
-        "base": {
-          "value": "#293256",
-          "type": "color"
-        },
-        "hovered": {
-          "value": "#363f62",
-          "type": "color"
-        },
-        "active": {
-          "value": "#444c6f",
-          "type": "color"
-        }
-      },
-      "500": {
-        "base": {
-          "value": "#202746",
-          "type": "color"
-        },
-        "hovered": {
-          "value": "#222a4a",
-          "type": "color"
-        },
-        "active": {
-          "value": "#252d4e",
-          "type": "color"
-        }
-      },
-      "on300": {
-        "base": {
-          "value": "#202746",
-          "type": "color"
-        },
-        "hovered": {
-          "value": "#222a4a",
-          "type": "color"
-        },
-        "active": {
-          "value": "#252d4e",
-          "type": "color"
-        }
-      },
-      "on500": {
-        "base": {
-          "value": "#363f62",
-          "type": "color"
-        },
-        "hovered": {
-          "value": "#444c6f",
-          "type": "color"
-        },
-        "active": {
-          "value": "#51597b",
-          "type": "color"
-        }
-      },
-      "ok": {
-        "base": {
-          "value": "#ac973926",
-          "type": "color"
-        },
-        "hovered": {
-          "value": "#ac973933",
-          "type": "color"
-        },
-        "active": {
-          "value": "#ac973940",
-          "type": "color"
-        }
-      },
-      "error": {
-        "base": {
-          "value": "#c9492226",
-          "type": "color"
-        },
-        "hovered": {
-          "value": "#c9492233",
-          "type": "color"
-        },
-        "active": {
-          "value": "#c9492240",
-          "type": "color"
-        }
-      },
-      "warning": {
-        "base": {
-          "value": "#c08b3026",
-          "type": "color"
-        },
-        "hovered": {
-          "value": "#c08b3033",
-          "type": "color"
-        },
-        "active": {
-          "value": "#c08b3040",
-          "type": "color"
-        }
-      },
-      "info": {
-        "base": {
-          "value": "#3d8fd126",
-          "type": "color"
-        },
-        "hovered": {
-          "value": "#3d8fd133",
-          "type": "color"
-        },
-        "active": {
-          "value": "#3d8fd140",
-          "type": "color"
-        }
-      }
-    },
-    "border": {
-      "primary": {
-        "value": "#202746",
-        "type": "color"
-      },
-      "secondary": {
-        "value": "#293256",
-        "type": "color"
-      },
-      "muted": {
-        "value": "#6b7394",
-        "type": "color"
-      },
-      "active": {
-        "value": "#6b7394",
-        "type": "color"
-      },
-      "onMedia": {
-        "value": "#2027461a",
-        "type": "color"
-      },
-      "ok": {
-        "value": "#ac973926",
-        "type": "color"
-      },
-      "error": {
-        "value": "#c9492226",
-        "type": "color"
-      },
-      "warning": {
-        "value": "#c08b3026",
-        "type": "color"
-      },
-      "info": {
-        "value": "#3d8fd126",
-        "type": "color"
-      }
-    },
-    "editor": {
-      "background": {
-        "value": "#202746",
-        "type": "color"
-      },
-      "indent_guide": {
-        "value": "#6b7394",
-        "type": "color"
-      },
-      "indent_guide_active": {
-        "value": "#293256",
-        "type": "color"
-      },
-      "line": {
-        "active": {
-          "value": "#293256",
-          "type": "color"
-        },
-        "highlighted": {
-          "value": "#363f62",
-          "type": "color"
-        }
-      },
-      "highlight": {
-        "selection": {
-          "value": "#3d8fd13d",
-          "type": "color"
-        },
-        "occurrence": {
-          "value": "#5e66873d",
-          "type": "color"
-        },
-        "activeOccurrence": {
-          "value": "#5e66877a",
-          "type": "color"
-        },
-        "matchingBracket": {
-          "value": "#252d4e",
-          "type": "color"
-        },
-        "match": {
-          "value": "#1a2a6d",
-          "type": "color"
-        },
-        "activeMatch": {
-          "value": "#3d56c47a",
-          "type": "color"
-        },
-        "related": {
-          "value": "#222a4a",
-          "type": "color"
-        }
-      },
-      "gutter": {
-        "primary": {
-          "value": "#898ea4",
-          "type": "color"
-        },
-        "active": {
-          "value": "#f5f7ff",
-          "type": "color"
-        }
-      }
-    },
-    "syntax": {
-      "primary": {
-        "value": "#f5f7ff",
-        "type": "color"
-      },
-      "comment": {
-        "value": "#979db4",
-        "type": "color"
-      },
-      "keyword": {
-        "value": "#3d8fd1",
-        "type": "color"
-      },
-      "function": {
-        "value": "#c08b30",
-        "type": "color"
-      },
-      "type": {
-        "value": "#22a2c9",
-        "type": "color"
-      },
-      "variant": {
-        "value": "#3d8fd1",
-        "type": "color"
-      },
-      "property": {
-        "value": "#3d8fd1",
-        "type": "color"
-      },
-      "enum": {
-        "value": "#c76b29",
-        "type": "color"
-      },
-      "operator": {
-        "value": "#c76b29",
-        "type": "color"
-      },
-      "string": {
-        "value": "#c76b29",
-        "type": "color"
-      },
-      "number": {
-        "value": "#ac9739",
-        "type": "color"
-      },
-      "boolean": {
-        "value": "#ac9739",
-        "type": "color"
-      }
-    },
-    "player": {
-      "1": {
-        "baseColor": {
-          "value": "#3d8fd1",
-          "type": "color"
-        },
-        "cursorColor": {
-          "value": "#3d8fd1",
-          "type": "color"
-        },
-        "selectionColor": {
-          "value": "#3d8fd13d",
-          "type": "color"
-        },
-        "borderColor": {
-          "value": "#3d8fd1cc",
-          "type": "color"
-        }
-      },
-      "2": {
-        "baseColor": {
-          "value": "#ac9739",
-          "type": "color"
-        },
-        "cursorColor": {
-          "value": "#ac9739",
-          "type": "color"
-        },
-        "selectionColor": {
-          "value": "#ac97393d",
-          "type": "color"
-        },
-        "borderColor": {
-          "value": "#ac9739cc",
-          "type": "color"
-        }
-      },
-      "3": {
-        "baseColor": {
-          "value": "#9c637a",
-          "type": "color"
-        },
-        "cursorColor": {
-          "value": "#9c637a",
-          "type": "color"
-        },
-        "selectionColor": {
-          "value": "#9c637a3d",
-          "type": "color"
-        },
-        "borderColor": {
-          "value": "#9c637acc",
-          "type": "color"
-        }
-      },
-      "4": {
-        "baseColor": {
-          "value": "#c76b29",
-          "type": "color"
-        },
-        "cursorColor": {
-          "value": "#c76b29",
-          "type": "color"
-        },
-        "selectionColor": {
-          "value": "#c76b293d",
-          "type": "color"
-        },
-        "borderColor": {
-          "value": "#c76b29cc",
-          "type": "color"
-        }
-      },
-      "5": {
-        "baseColor": {
-          "value": "#6679cc",
-          "type": "color"
-        },
-        "cursorColor": {
-          "value": "#6679cc",
-          "type": "color"
-        },
-        "selectionColor": {
-          "value": "#6679cc3d",
-          "type": "color"
-        },
-        "borderColor": {
-          "value": "#6679cccc",
-          "type": "color"
-        }
-      },
-      "6": {
-        "baseColor": {
-          "value": "#22a2c9",
-          "type": "color"
-        },
-        "cursorColor": {
-          "value": "#22a2c9",
-          "type": "color"
-        },
-        "selectionColor": {
-          "value": "#22a2c93d",
-          "type": "color"
-        },
-        "borderColor": {
-          "value": "#22a2c9cc",
-          "type": "color"
-        }
-      },
-      "7": {
-        "baseColor": {
-          "value": "#c94922",
-          "type": "color"
-        },
-        "cursorColor": {
-          "value": "#c94922",
-          "type": "color"
-        },
-        "selectionColor": {
-          "value": "#c949223d",
-          "type": "color"
-        },
-        "borderColor": {
-          "value": "#c94922cc",
-          "type": "color"
-        }
-      },
-      "8": {
-        "baseColor": {
-          "value": "#c08b30",
-          "type": "color"
-        },
-        "cursorColor": {
-          "value": "#c08b30",
-          "type": "color"
-        },
-        "selectionColor": {
-          "value": "#c08b303d",
-          "type": "color"
-        },
-        "borderColor": {
-          "value": "#c08b30cc",
-          "type": "color"
-        }
-      }
-    },
-    "shadowAlpha": {
-      "value": 0.24,
-      "type": "number"
-    }
-  },
-  "sulphurpool-light": {
-    "meta": {
-      "themeName": "sulphurpool-light"
-    },
-    "text": {
-      "primary": {
-        "value": "#293256",
-        "type": "color"
-      },
-      "secondary": {
-        "value": "#5e6687",
-        "type": "color"
-      },
-      "muted": {
-        "value": "#5e6687",
-        "type": "color"
-      },
-      "placeholder": {
-        "value": "#6b7394",
-        "type": "color"
-      },
-      "active": {
-        "value": "#202746",
-        "type": "color"
-      },
-      "feature": {
-        "value": "#3d8fd1",
-        "type": "color"
-      },
-      "ok": {
-        "value": "#ac9739",
-        "type": "color"
-      },
-      "error": {
-        "value": "#c94922",
-        "type": "color"
-      },
-      "warning": {
-        "value": "#c08b30",
-        "type": "color"
-      },
-      "info": {
-        "value": "#3d8fd1",
-        "type": "color"
-      }
-    },
-    "icon": {
-      "primary": {
-        "value": "#293256",
-        "type": "color"
-      },
-      "secondary": {
-        "value": "#5e6687",
-        "type": "color"
-      },
-      "muted": {
-        "value": "#5e6687",
-        "type": "color"
-      },
-      "placeholder": {
-        "value": "#6b7394",
-        "type": "color"
-      },
-      "active": {
-        "value": "#202746",
-        "type": "color"
-      },
-      "feature": {
-        "value": "#3d8fd1",
-        "type": "color"
-      },
-      "ok": {
-        "value": "#ac9739",
-        "type": "color"
-      },
-      "error": {
-        "value": "#c94922",
-        "type": "color"
-      },
-      "warning": {
-        "value": "#c08b30",
-        "type": "color"
-      },
-      "info": {
-        "value": "#3d8fd1",
-        "type": "color"
-      }
-    },
-    "background": {
-      "100": {
-        "base": {
-          "value": "#cdd1e2",
-          "type": "color"
-        },
-        "hovered": {
-          "value": "#bbc0d3",
-          "type": "color"
-        },
-        "active": {
-          "value": "#a9aec3",
-          "type": "color"
-        }
-      },
-      "300": {
-        "base": {
-          "value": "#dfe2f1",
-          "type": "color"
-        },
-        "hovered": {
-          "value": "#cdd1e2",
-          "type": "color"
-        },
-        "active": {
-          "value": "#bbc0d3",
-          "type": "color"
-        }
-      },
-      "500": {
-        "base": {
-          "value": "#f5f7ff",
-          "type": "color"
-        },
-        "hovered": {
-          "value": "#f0f2fc",
-          "type": "color"
-        },
-        "active": {
-          "value": "#eaedf8",
-          "type": "color"
-        }
-      },
-      "on300": {
-        "base": {
-          "value": "#f5f7ff",
-          "type": "color"
-        },
-        "hovered": {
-          "value": "#f0f2fc",
-          "type": "color"
-        },
-        "active": {
-          "value": "#eaedf8",
-          "type": "color"
-        }
-      },
-      "on500": {
-        "base": {
-          "value": "#cdd1e2",
-          "type": "color"
-        },
-        "hovered": {
-          "value": "#bbc0d3",
-          "type": "color"
-        },
-        "active": {
-          "value": "#a9aec3",
-          "type": "color"
-        }
-      },
-      "ok": {
-        "base": {
-          "value": "#ac973926",
-          "type": "color"
-        },
-        "hovered": {
-          "value": "#ac973933",
-          "type": "color"
-        },
-        "active": {
-          "value": "#ac973940",
-          "type": "color"
-        }
-      },
-      "error": {
-        "base": {
-          "value": "#c9492226",
-          "type": "color"
-        },
-        "hovered": {
-          "value": "#c9492233",
-          "type": "color"
-        },
-        "active": {
-          "value": "#c9492240",
-          "type": "color"
-        }
-      },
-      "warning": {
-        "base": {
-          "value": "#c08b3026",
-          "type": "color"
-        },
-        "hovered": {
-          "value": "#c08b3033",
-          "type": "color"
-        },
-        "active": {
-          "value": "#c08b3040",
-          "type": "color"
-        }
-      },
-      "info": {
-        "base": {
-          "value": "#3d8fd126",
-          "type": "color"
-        },
-        "hovered": {
-          "value": "#3d8fd133",
-          "type": "color"
-        },
-        "active": {
-          "value": "#3d8fd140",
-          "type": "color"
-        }
-      }
-    },
-    "border": {
-      "primary": {
-        "value": "#bbc0d3",
-        "type": "color"
-      },
-      "secondary": {
-        "value": "#cdd1e2",
-        "type": "color"
-      },
-      "muted": {
-        "value": "#dfe2f1",
-        "type": "color"
-      },
-      "active": {
-        "value": "#6b7394",
-        "type": "color"
-      },
-      "onMedia": {
-        "value": "#f5f7ff1a",
-        "type": "color"
-      },
-      "ok": {
-        "value": "#ac973926",
-        "type": "color"
-      },
-      "error": {
-        "value": "#c9492226",
-        "type": "color"
-      },
-      "warning": {
-        "value": "#c08b3026",
-        "type": "color"
-      },
-      "info": {
-        "value": "#3d8fd126",
-        "type": "color"
-      }
-    },
-    "editor": {
-      "background": {
-        "value": "#f5f7ff",
-        "type": "color"
-      },
-      "indent_guide": {
-        "value": "#dfe2f1",
-        "type": "color"
-      },
-      "indent_guide_active": {
-        "value": "#cdd1e2",
-        "type": "color"
-      },
-      "line": {
-        "active": {
-          "value": "#dfe2f1",
-          "type": "color"
-        },
-        "highlighted": {
-          "value": "#cdd1e2",
-          "type": "color"
-        }
-      },
-      "highlight": {
-        "selection": {
-          "value": "#3d8fd13d",
-          "type": "color"
-        },
-        "occurrence": {
-          "value": "#979db41f",
-          "type": "color"
-        },
-        "activeOccurrence": {
-          "value": "#979db43d",
-          "type": "color"
-        },
-        "matchingBracket": {
-          "value": "#eaedf8",
-          "type": "color"
-        },
-        "match": {
-          "value": "#bcc6f7",
-          "type": "color"
-        },
-        "activeMatch": {
-          "value": "#7b8ddc3d",
-          "type": "color"
-        },
-        "related": {
-          "value": "#f0f2fc",
-          "type": "color"
-        }
-      },
-      "gutter": {
-        "primary": {
-          "value": "#6b7394",
-          "type": "color"
-        },
-        "active": {
-          "value": "#202746",
-          "type": "color"
-        }
-      }
-    },
-    "syntax": {
-      "primary": {
-        "value": "#202746",
-        "type": "color"
-      },
-      "comment": {
-        "value": "#5e6687",
-        "type": "color"
-      },
-      "keyword": {
-        "value": "#3d8fd1",
-        "type": "color"
-      },
-      "function": {
-        "value": "#c08b30",
-        "type": "color"
-      },
-      "type": {
-        "value": "#22a2c9",
-        "type": "color"
-      },
-      "variant": {
-        "value": "#3d8fd1",
-        "type": "color"
-      },
-      "property": {
-        "value": "#3d8fd1",
-        "type": "color"
-      },
-      "enum": {
-        "value": "#c76b29",
-        "type": "color"
-      },
-      "operator": {
-        "value": "#c76b29",
-        "type": "color"
-      },
-      "string": {
-        "value": "#c76b29",
-        "type": "color"
-      },
-      "number": {
-        "value": "#ac9739",
-        "type": "color"
-      },
-      "boolean": {
-        "value": "#ac9739",
-        "type": "color"
-      }
-    },
-    "player": {
-      "1": {
-        "baseColor": {
-          "value": "#3d8fd1",
-          "type": "color"
-        },
-        "cursorColor": {
-          "value": "#3d8fd1",
-          "type": "color"
-        },
-        "selectionColor": {
-          "value": "#3d8fd13d",
-          "type": "color"
-        },
-        "borderColor": {
-          "value": "#3d8fd1cc",
-          "type": "color"
-        }
-      },
-      "2": {
-        "baseColor": {
-          "value": "#ac9739",
-          "type": "color"
-        },
-        "cursorColor": {
-          "value": "#ac9739",
-          "type": "color"
-        },
-        "selectionColor": {
-          "value": "#ac97393d",
-          "type": "color"
-        },
-        "borderColor": {
-          "value": "#ac9739cc",
-          "type": "color"
-        }
-      },
-      "3": {
-        "baseColor": {
-          "value": "#9c637a",
-          "type": "color"
-        },
-        "cursorColor": {
-          "value": "#9c637a",
-          "type": "color"
-        },
-        "selectionColor": {
-          "value": "#9c637a3d",
-          "type": "color"
-        },
-        "borderColor": {
-          "value": "#9c637acc",
-          "type": "color"
-        }
-      },
-      "4": {
-        "baseColor": {
-          "value": "#c76b29",
-          "type": "color"
-        },
-        "cursorColor": {
-          "value": "#c76b29",
-          "type": "color"
-        },
-        "selectionColor": {
-          "value": "#c76b293d",
-          "type": "color"
-        },
-        "borderColor": {
-          "value": "#c76b29cc",
-          "type": "color"
-        }
-      },
-      "5": {
-        "baseColor": {
-          "value": "#6679cc",
-          "type": "color"
-        },
-        "cursorColor": {
-          "value": "#6679cc",
-          "type": "color"
-        },
-        "selectionColor": {
-          "value": "#6679cc3d",
-          "type": "color"
-        },
-        "borderColor": {
-          "value": "#6679cccc",
-          "type": "color"
-        }
-      },
-      "6": {
-        "baseColor": {
-          "value": "#22a2c9",
-          "type": "color"
-        },
-        "cursorColor": {
-          "value": "#22a2c9",
-          "type": "color"
-        },
-        "selectionColor": {
-          "value": "#22a2c93d",
-          "type": "color"
-        },
-        "borderColor": {
-          "value": "#22a2c9cc",
-          "type": "color"
-        }
-      },
-      "7": {
-        "baseColor": {
-          "value": "#c94922",
-          "type": "color"
-        },
-        "cursorColor": {
-          "value": "#c94922",
-          "type": "color"
-        },
-        "selectionColor": {
-          "value": "#c949223d",
-          "type": "color"
-        },
-        "borderColor": {
-          "value": "#c94922cc",
-          "type": "color"
-        }
-      },
-      "8": {
-        "baseColor": {
-          "value": "#c08b30",
-          "type": "color"
-        },
-        "cursorColor": {
-          "value": "#c08b30",
-          "type": "color"
-        },
-        "selectionColor": {
-          "value": "#c08b303d",
-          "type": "color"
-        },
-        "borderColor": {
-          "value": "#c08b30cc",
-          "type": "color"
-        }
-      }
-    },
-    "shadowAlpha": {
-      "value": 0.12,
-      "type": "number"
-    }
-  }
-}
\ No newline at end of file

From ef2b42c3fbcc0e94872a3d067fe2a82a13d4e4c1 Mon Sep 17 00:00:00 2001
From: Nate Butler <iamnbutler@gmail.com>
Date: Sat, 16 Jul 2022 11:52:30 -0400
Subject: [PATCH 04/22] UI / Theme improvements

---
 styles/src/styleTree/app.ts        |  2 +-
 styles/src/styleTree/statusBar.ts  | 10 +++++-----
 styles/src/styleTree/tooltip.ts    |  2 +-
 styles/src/styleTree/workspace.ts  | 27 +++++++++++++++++----------
 styles/src/themes/common/base16.ts |  8 ++++----
 5 files changed, 28 insertions(+), 21 deletions(-)

diff --git a/styles/src/styleTree/app.ts b/styles/src/styleTree/app.ts
index fe67cf701d..33bcafcdae 100644
--- a/styles/src/styleTree/app.ts
+++ b/styles/src/styleTree/app.ts
@@ -17,7 +17,7 @@ import tooltip from "./tooltip";
 import terminal from "./terminal";
 
 export const panel = {
-  padding: { top: 12, bottom: 12 },
+  padding: { top: 12, bottom: 12 }
 };
 
 export default function app(theme: Theme): Object {
diff --git a/styles/src/styleTree/statusBar.ts b/styles/src/styleTree/statusBar.ts
index 47050fe3ca..549858dbef 100644
--- a/styles/src/styleTree/statusBar.ts
+++ b/styles/src/styleTree/statusBar.ts
@@ -35,7 +35,7 @@ export default function statusBar(theme: Theme) {
       iconColor: iconColor(theme, "muted"),
       hover: {
         message: text(theme, "sans", "primary"),
-        iconColor: iconColor(theme, "primary"),
+        iconColor: iconColor(theme, "active"),
         background: backgroundColor(theme, 300, "hovered"),
       }
     },
@@ -49,7 +49,7 @@ export default function statusBar(theme: Theme) {
     },
     diagnosticSummary: {
       height: 16,
-      iconWidth: 14,
+      iconWidth: 16,
       iconSpacing: 2,
       summarySpacing: 6,
       text: text(theme, "sans", "primary", { size: "sm" }),
@@ -71,7 +71,7 @@ export default function statusBar(theme: Theme) {
         border: border(theme, "error"),
       },
       hover: {
-        iconColorOk: iconColor(theme, "primary"),
+        iconColorOk: iconColor(theme, "active"),
         containerOk: {
           cornerRadius: 6,
           padding: { top: 3, bottom: 3, left: 7, right: 7 },
@@ -94,10 +94,10 @@ export default function statusBar(theme: Theme) {
       groupRight: {},
       item: {
         ...statusContainer,
-        iconSize: 14,
+        iconSize: 16,
         iconColor: iconColor(theme, "secondary"),
         hover: {
-          iconColor: iconColor(theme, "primary"),
+          iconColor: iconColor(theme, "active"),
           background: backgroundColor(theme, 300, "hovered"),
         },
         active: {
diff --git a/styles/src/styleTree/tooltip.ts b/styles/src/styleTree/tooltip.ts
index c395b9ff3d..0a4ab19d46 100644
--- a/styles/src/styleTree/tooltip.ts
+++ b/styles/src/styleTree/tooltip.ts
@@ -14,7 +14,7 @@ export default function tooltip(theme: Theme) {
       background: backgroundColor(theme, "on500"),
       cornerRadius: 4,
       margin: { left: 6 },
-      padding: { left: 3, right: 3 },
+      padding: { left: 4, right: 4 },
       ...text(theme, "mono", "muted", { size: "xs", weight: "bold" })
     },
     maxTextWidth: 200,
diff --git a/styles/src/styleTree/workspace.ts b/styles/src/styleTree/workspace.ts
index 36d47bed92..0e9762f321 100644
--- a/styles/src/styleTree/workspace.ts
+++ b/styles/src/styleTree/workspace.ts
@@ -60,7 +60,7 @@ export default function workspace(theme: Theme) {
       border: {
         ...tab.border
       },
-      iconWidth: 14,
+      iconWidth: 12,
       buttonWidth: tab.height,
       hover: {
         color: iconColor(theme, "active"),
@@ -110,17 +110,24 @@ export default function workspace(theme: Theme) {
       },
       border: border(theme, "primary", { bottom: true, overlay: true }),
       signInPrompt: {
-        border: border(theme, "primary"),
+        background: backgroundColor(theme, 100),
+        border: border(theme, "secondary"),
         cornerRadius: 6,
         margin: {
           top: 1,
         },
         padding: {
-          left: 6,
-          right: 6,
+          top: 1,
+          bottom: 1,
+          left: 7,
+          right: 7,
         },
         ...text(theme, "sans", "secondary", { size: "xs" }),
-        hover: text(theme, "sans", "active", { size: "xs" }),
+        hover: {
+          ...text(theme, "sans", "active", { size: "xs" }),
+          background: backgroundColor(theme, "on300", "hovered"),
+          border: border(theme, "primary"),
+        }
       },
       offlineIcon: {
         color: iconColor(theme, "secondary"),
@@ -152,9 +159,9 @@ export default function workspace(theme: Theme) {
       border: border(theme, "secondary", { bottom: true }),
       itemSpacing: 8,
       navButton: {
-        color: iconColor(theme, "secondary"),
-        iconWidth: 8,
-        buttonWidth: 18,
+        color: iconColor(theme, "primary"),
+        iconWidth: 12,
+        buttonWidth: 24,
         cornerRadius: 6,
         hover: {
           color: iconColor(theme, "active"),
@@ -164,7 +171,7 @@ export default function workspace(theme: Theme) {
           color: withOpacity(iconColor(theme, "muted"), 0.6),
         },
       },
-      padding: { left: 16, right: 8, top: 4, bottom: 4 },
+      padding: { left: 8, right: 8, top: 4, bottom: 4 },
     },
     breadcrumbs: {
       ...text(theme, "mono", "secondary"),
@@ -183,7 +190,7 @@ export default function workspace(theme: Theme) {
       shadow: modalShadow(theme),
     },
     notifications: {
-      width: 380,
+      width: 400,
       margin: { right: 10, bottom: 10 },
     }
   };
diff --git a/styles/src/themes/common/base16.ts b/styles/src/themes/common/base16.ts
index 729cf32ee5..e7b71a49bb 100644
--- a/styles/src/themes/common/base16.ts
+++ b/styles/src/themes/common/base16.ts
@@ -62,13 +62,13 @@ export function createTheme(
     },
     on300: {
       base: sample(ramps.neutral, 0),
-      hovered: sample(ramps.neutral, 0.25),
-      active: sample(ramps.neutral, 0.5),
+      hovered: sample(ramps.neutral, 0.5),
+      active: sample(ramps.neutral, 1),
     },
     on500: {
-      base: sample(ramps.neutral, 1.25),
+      base: sample(ramps.neutral, 1),
       hovered: sample(ramps.neutral, 1.5),
-      active: sample(ramps.neutral, 1.75),
+      active: sample(ramps.neutral, 2),
     },
     ok: {
       base: withOpacity(sample(ramps.green, 0.5), 0.15),

From 45ea412d2c92d94bb911179f2af45c0850e2f274 Mon Sep 17 00:00:00 2001
From: Nate Butler <iamnbutler@gmail.com>
Date: Sat, 16 Jul 2022 11:52:40 -0400
Subject: [PATCH 05/22] Add the One Dark/ One Light themes

---
 styles/src/themes/one-dark.ts  | 46 ++++++++++++++++++++++++++++++++++
 styles/src/themes/one-light.ts | 46 ++++++++++++++++++++++++++++++++++
 2 files changed, 92 insertions(+)
 create mode 100644 styles/src/themes/one-dark.ts
 create mode 100644 styles/src/themes/one-light.ts

diff --git a/styles/src/themes/one-dark.ts b/styles/src/themes/one-dark.ts
new file mode 100644
index 0000000000..8f65dffd76
--- /dev/null
+++ b/styles/src/themes/one-dark.ts
@@ -0,0 +1,46 @@
+import chroma from "chroma-js";
+import { colorRamp, createTheme } from "./common/base16";
+
+const name = "one";
+const author = "Chris Kempson (http://chriskempson.com)"
+const url = "https://github.com/chriskempson/base16-vim/blob/master/colors/base16-onedark.vim"
+
+const base00 = "#282c34"
+const base01 = "#353b45"
+const base02 = "#3e4451"
+const base03 = "#545862"
+const base04 = "#565c64"
+const base05 = "#abb2bf"
+const base06 = "#b6bdca"
+const base07 = "#c8ccd4"
+const base08 = "#e06c75"
+const base09 = "#d19a66"
+const base0A = "#e5c07b"
+const base0B = "#98c379"
+const base0C = "#56b6c2"
+const base0D = "#61afef"
+const base0E = "#c678dd"
+const base0F = "#be5046"
+
+const ramps = {
+  neutral: chroma.scale([
+    base00,
+    base01,
+    base02,
+    base03,
+    base04,
+    base05,
+    base06,
+    base07
+  ]),
+  red: colorRamp(chroma(base08)),
+  orange: colorRamp(chroma(base09)),
+  yellow: colorRamp(chroma(base0A)),
+  green: colorRamp(chroma(base0B)),
+  cyan: colorRamp(chroma(base0C)),
+  blue: colorRamp(chroma(base0D)),
+  violet: colorRamp(chroma(base0E)),
+  magenta: colorRamp(chroma(base0F)),
+};
+
+export const dark = createTheme(`${name}-dark`, false, ramps);
\ No newline at end of file
diff --git a/styles/src/themes/one-light.ts b/styles/src/themes/one-light.ts
new file mode 100644
index 0000000000..d78f00ff55
--- /dev/null
+++ b/styles/src/themes/one-light.ts
@@ -0,0 +1,46 @@
+import chroma from "chroma-js";
+import { colorRamp, createTheme } from "./common/base16";
+
+const name = "one";
+const author = "Daniel Pfeifer (http://github.com/purpleKarrot)"
+const url = "https://github.com/purpleKarrot/base16-one-light-scheme/blob/master/one-light.yaml"
+
+const base00 = "#090a0b"
+const base01 = "#202227"
+const base02 = "#383a42"
+const base03 = "#a0a1a7"
+const base04 = "#696c77"
+const base05 = "#a0a1a7"
+const base06 = "#e5e5e6"
+const base07 = "#f0f0f1"
+const base08 = "#fafafa"
+const base09 = "#d75f00"
+const base0A = "#c18401"
+const base0B = "#50a14f"
+const base0C = "#0184bc"
+const base0D = "#4078f2"
+const base0E = "#a626a4"
+const base0F = "#986801"
+
+const ramps = {
+  neutral: chroma.scale([
+    base00,
+    base01,
+    base02,
+    base03,
+    base04,
+    base05,
+    base06,
+    base07
+  ]),
+  red: colorRamp(chroma(base08)),
+  orange: colorRamp(chroma(base09)),
+  yellow: colorRamp(chroma(base0A)),
+  green: colorRamp(chroma(base0B)),
+  cyan: colorRamp(chroma(base0C)),
+  blue: colorRamp(chroma(base0D)),
+  violet: colorRamp(chroma(base0E)),
+  magenta: colorRamp(chroma(base0F)),
+};
+
+export const light = createTheme(`${name}-light`, true, ramps);
\ No newline at end of file

From 668af83cd600eea20a23575650cc8c3243f9e13c Mon Sep 17 00:00:00 2001
From: Nate Butler <iamnbutler@gmail.com>
Date: Sat, 16 Jul 2022 11:53:27 -0400
Subject: [PATCH 06/22] Format `styles` directory with prettier.

---
 styles/package-lock.json                    | 618 ++++++++++----------
 styles/package.json                         |  34 +-
 styles/src/buildThemes.ts                   |  10 +-
 styles/src/common.ts                        |   9 +-
 styles/src/styleTree/app.ts                 |   2 +-
 styles/src/styleTree/chatPanel.ts           |   2 +-
 styles/src/styleTree/commandPalette.ts      |   8 +-
 styles/src/styleTree/components.ts          |   7 +-
 styles/src/styleTree/contactFinder.ts       |   6 +-
 styles/src/styleTree/contactNotification.ts |  16 +-
 styles/src/styleTree/contactsPanel.ts       |  33 +-
 styles/src/styleTree/contextMenu.ts         |  16 +-
 styles/src/styleTree/editor.ts              |   4 +-
 styles/src/styleTree/hoverPopover.ts        |   8 +-
 styles/src/styleTree/picker.ts              |  10 +-
 styles/src/styleTree/projectDiagnostics.ts  |   7 +-
 styles/src/styleTree/projectPanel.ts        |   2 +-
 styles/src/styleTree/search.ts              |   3 +-
 styles/src/styleTree/statusBar.ts           |  20 +-
 styles/src/styleTree/terminal.ts            |   4 +-
 styles/src/styleTree/tooltip.ts             |   6 +-
 styles/src/styleTree/updateNotification.ts  |  16 +-
 styles/src/styleTree/workspace.ts           |  24 +-
 styles/src/themes/cave.ts                   |   2 +-
 styles/src/themes/common/base16.ts          |  30 +-
 styles/src/themes/common/theme.ts           |   4 +-
 styles/src/themes/one-dark.ts               |  41 +-
 styles/src/themes/one-light.ts              |  41 +-
 styles/src/utils/snakeCase.ts               |  18 +-
 styles/tsconfig.json                        |  22 +-
 30 files changed, 527 insertions(+), 496 deletions(-)

diff --git a/styles/package-lock.json b/styles/package-lock.json
index 2eb6d3a1bf..5499f1852c 100644
--- a/styles/package-lock.json
+++ b/styles/package-lock.json
@@ -1,315 +1,315 @@
 {
-    "name": "styles",
-    "version": "1.0.0",
-    "lockfileVersion": 2,
-    "requires": true,
-    "packages": {
-        "": {
-            "version": "1.0.0",
-            "license": "ISC",
-            "dependencies": {
-                "@types/chroma-js": "^2.1.3",
-                "@types/node": "^17.0.23",
-                "case-anything": "^2.1.10",
-                "chroma-js": "^2.4.2",
-                "ts-node": "^10.7.0"
-            }
-        },
-        "node_modules/@cspotcode/source-map-consumer": {
-            "version": "0.8.0",
-            "resolved": "https://registry.npmjs.org/@cspotcode/source-map-consumer/-/source-map-consumer-0.8.0.tgz",
-            "integrity": "sha512-41qniHzTU8yAGbCp04ohlmSrZf8bkf/iJsl3V0dRGsQN/5GFfx+LbCSsCpp2gqrqjTVg/K6O8ycoV35JIwAzAg==",
-            "engines": {
-                "node": ">= 12"
-            }
-        },
-        "node_modules/@cspotcode/source-map-support": {
-            "version": "0.7.0",
-            "resolved": "https://registry.npmjs.org/@cspotcode/source-map-support/-/source-map-support-0.7.0.tgz",
-            "integrity": "sha512-X4xqRHqN8ACt2aHVe51OxeA2HjbcL4MqFqXkrmQszJ1NOUuUu5u6Vqx/0lZSVNku7velL5FC/s5uEAj1lsBMhA==",
-            "dependencies": {
-                "@cspotcode/source-map-consumer": "0.8.0"
-            },
-            "engines": {
-                "node": ">=12"
-            }
-        },
-        "node_modules/@tsconfig/node10": {
-            "version": "1.0.8",
-            "resolved": "https://registry.npmjs.org/@tsconfig/node10/-/node10-1.0.8.tgz",
-            "integrity": "sha512-6XFfSQmMgq0CFLY1MslA/CPUfhIL919M1rMsa5lP2P097N2Wd1sSX0tx1u4olM16fLNhtHZpRhedZJphNJqmZg=="
-        },
-        "node_modules/@tsconfig/node12": {
-            "version": "1.0.9",
-            "resolved": "https://registry.npmjs.org/@tsconfig/node12/-/node12-1.0.9.tgz",
-            "integrity": "sha512-/yBMcem+fbvhSREH+s14YJi18sp7J9jpuhYByADT2rypfajMZZN4WQ6zBGgBKp53NKmqI36wFYDb3yaMPurITw=="
-        },
-        "node_modules/@tsconfig/node14": {
-            "version": "1.0.1",
-            "resolved": "https://registry.npmjs.org/@tsconfig/node14/-/node14-1.0.1.tgz",
-            "integrity": "sha512-509r2+yARFfHHE7T6Puu2jjkoycftovhXRqW328PDXTVGKihlb1P8Z9mMZH04ebyajfRY7dedfGynlrFHJUQCg=="
-        },
-        "node_modules/@tsconfig/node16": {
-            "version": "1.0.2",
-            "resolved": "https://registry.npmjs.org/@tsconfig/node16/-/node16-1.0.2.tgz",
-            "integrity": "sha512-eZxlbI8GZscaGS7kkc/trHTT5xgrjH3/1n2JDwusC9iahPKWMRvRjJSAN5mCXviuTGQ/lHnhvv8Q1YTpnfz9gA=="
-        },
-        "node_modules/@types/chroma-js": {
-            "version": "2.1.3",
-            "resolved": "https://registry.npmjs.org/@types/chroma-js/-/chroma-js-2.1.3.tgz",
-            "integrity": "sha512-1xGPhoSGY1CPmXLCBcjVZSQinFjL26vlR8ZqprsBWiFyED4JacJJ9zHhh5aaUXqbY9B37mKQ73nlydVAXmr1+g=="
-        },
-        "node_modules/@types/node": {
-            "version": "17.0.23",
-            "resolved": "https://registry.npmjs.org/@types/node/-/node-17.0.23.tgz",
-            "integrity": "sha512-UxDxWn7dl97rKVeVS61vErvw086aCYhDLyvRQZ5Rk65rZKepaFdm53GeqXaKBuOhED4e9uWq34IC3TdSdJJ2Gw=="
-        },
-        "node_modules/acorn": {
-            "version": "8.7.0",
-            "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.7.0.tgz",
-            "integrity": "sha512-V/LGr1APy+PXIwKebEWrkZPwoeoF+w1jiOBUmuxuiUIaOHtob8Qc9BTrYo7VuI5fR8tqsy+buA2WFooR5olqvQ==",
-            "bin": {
-                "acorn": "bin/acorn"
-            },
-            "engines": {
-                "node": ">=0.4.0"
-            }
-        },
-        "node_modules/acorn-walk": {
-            "version": "8.2.0",
-            "resolved": "https://registry.npmjs.org/acorn-walk/-/acorn-walk-8.2.0.tgz",
-            "integrity": "sha512-k+iyHEuPgSw6SbuDpGQM+06HQUa04DZ3o+F6CSzXMvvI5KMvnaEqXe+YVe555R9nn6GPt404fos4wcgpw12SDA==",
-            "engines": {
-                "node": ">=0.4.0"
-            }
-        },
-        "node_modules/arg": {
-            "version": "4.1.3",
-            "resolved": "https://registry.npmjs.org/arg/-/arg-4.1.3.tgz",
-            "integrity": "sha512-58S9QDqG0Xx27YwPSt9fJxivjYl432YCwfDMfZ+71RAqUrZef7LrKQZ3LHLOwCS4FLNBplP533Zx895SeOCHvA=="
-        },
-        "node_modules/case-anything": {
-            "version": "2.1.10",
-            "resolved": "https://registry.npmjs.org/case-anything/-/case-anything-2.1.10.tgz",
-            "integrity": "sha512-JczJwVrCP0jPKh05McyVsuOg6AYosrB9XWZKbQzXeDAm2ClE/PJE/BcrrQrVyGYH7Jg8V/LDupmyL4kFlVsVFQ==",
-            "engines": {
-                "node": ">=12.13"
-            },
-            "funding": {
-                "url": "https://github.com/sponsors/mesqueeb"
-            }
-        },
-        "node_modules/chroma-js": {
-            "version": "2.4.2",
-            "resolved": "https://registry.npmjs.org/chroma-js/-/chroma-js-2.4.2.tgz",
-            "integrity": "sha512-U9eDw6+wt7V8z5NncY2jJfZa+hUH8XEj8FQHgFJTrUFnJfXYf4Ml4adI2vXZOjqRDpFWtYVWypDfZwnJ+HIR4A=="
-        },
-        "node_modules/create-require": {
-            "version": "1.1.1",
-            "resolved": "https://registry.npmjs.org/create-require/-/create-require-1.1.1.tgz",
-            "integrity": "sha512-dcKFX3jn0MpIaXjisoRvexIJVEKzaq7z2rZKxf+MSr9TkdmHmsU4m2lcLojrj/FHl8mk5VxMmYA+ftRkP/3oKQ=="
-        },
-        "node_modules/diff": {
-            "version": "4.0.2",
-            "resolved": "https://registry.npmjs.org/diff/-/diff-4.0.2.tgz",
-            "integrity": "sha512-58lmxKSA4BNyLz+HHMUzlOEpg09FV+ev6ZMe3vJihgdxzgcwZ8VoEEPmALCZG9LmqfVoNMMKpttIYTVG6uDY7A==",
-            "engines": {
-                "node": ">=0.3.1"
-            }
-        },
-        "node_modules/make-error": {
-            "version": "1.3.6",
-            "resolved": "https://registry.npmjs.org/make-error/-/make-error-1.3.6.tgz",
-            "integrity": "sha512-s8UhlNe7vPKomQhC1qFelMokr/Sc3AgNbso3n74mVPA5LTZwkB9NlXf4XPamLxJE8h0gh73rM94xvwRT2CVInw=="
-        },
-        "node_modules/ts-node": {
-            "version": "10.7.0",
-            "resolved": "https://registry.npmjs.org/ts-node/-/ts-node-10.7.0.tgz",
-            "integrity": "sha512-TbIGS4xgJoX2i3do417KSaep1uRAW/Lu+WAL2doDHC0D6ummjirVOXU5/7aiZotbQ5p1Zp9tP7U6cYhA0O7M8A==",
-            "dependencies": {
-                "@cspotcode/source-map-support": "0.7.0",
-                "@tsconfig/node10": "^1.0.7",
-                "@tsconfig/node12": "^1.0.7",
-                "@tsconfig/node14": "^1.0.0",
-                "@tsconfig/node16": "^1.0.2",
-                "acorn": "^8.4.1",
-                "acorn-walk": "^8.1.1",
-                "arg": "^4.1.0",
-                "create-require": "^1.1.0",
-                "diff": "^4.0.1",
-                "make-error": "^1.1.1",
-                "v8-compile-cache-lib": "^3.0.0",
-                "yn": "3.1.1"
-            },
-            "bin": {
-                "ts-node": "dist/bin.js",
-                "ts-node-cwd": "dist/bin-cwd.js",
-                "ts-node-esm": "dist/bin-esm.js",
-                "ts-node-script": "dist/bin-script.js",
-                "ts-node-transpile-only": "dist/bin-transpile.js",
-                "ts-script": "dist/bin-script-deprecated.js"
-            },
-            "peerDependencies": {
-                "@swc/core": ">=1.2.50",
-                "@swc/wasm": ">=1.2.50",
-                "@types/node": "*",
-                "typescript": ">=2.7"
-            },
-            "peerDependenciesMeta": {
-                "@swc/core": {
-                    "optional": true
-                },
-                "@swc/wasm": {
-                    "optional": true
-                }
-            }
-        },
-        "node_modules/typescript": {
-            "version": "4.6.3",
-            "resolved": "https://registry.npmjs.org/typescript/-/typescript-4.6.3.tgz",
-            "integrity": "sha512-yNIatDa5iaofVozS/uQJEl3JRWLKKGJKh6Yaiv0GLGSuhpFJe7P3SbHZ8/yjAHRQwKRoA6YZqlfjXWmVzoVSMw==",
-            "peer": true,
-            "bin": {
-                "tsc": "bin/tsc",
-                "tsserver": "bin/tsserver"
-            },
-            "engines": {
-                "node": ">=4.2.0"
-            }
-        },
-        "node_modules/v8-compile-cache-lib": {
-            "version": "3.0.0",
-            "resolved": "https://registry.npmjs.org/v8-compile-cache-lib/-/v8-compile-cache-lib-3.0.0.tgz",
-            "integrity": "sha512-mpSYqfsFvASnSn5qMiwrr4VKfumbPyONLCOPmsR3A6pTY/r0+tSaVbgPWSAIuzbk3lCTa+FForeTiO+wBQGkjA=="
-        },
-        "node_modules/yn": {
-            "version": "3.1.1",
-            "resolved": "https://registry.npmjs.org/yn/-/yn-3.1.1.tgz",
-            "integrity": "sha512-Ux4ygGWsu2c7isFWe8Yu1YluJmqVhxqK2cLXNQA5AcC3QfbGNpM7fu0Y8b/z16pXLnFxZYvWhd3fhBY9DLmC6Q==",
-            "engines": {
-                "node": ">=6"
-            }
-        }
+  "name": "styles",
+  "version": "1.0.0",
+  "lockfileVersion": 2,
+  "requires": true,
+  "packages": {
+    "": {
+      "version": "1.0.0",
+      "license": "ISC",
+      "dependencies": {
+        "@types/chroma-js": "^2.1.3",
+        "@types/node": "^17.0.23",
+        "case-anything": "^2.1.10",
+        "chroma-js": "^2.4.2",
+        "ts-node": "^10.7.0"
+      }
     },
-    "dependencies": {
-        "@cspotcode/source-map-consumer": {
-            "version": "0.8.0",
-            "resolved": "https://registry.npmjs.org/@cspotcode/source-map-consumer/-/source-map-consumer-0.8.0.tgz",
-            "integrity": "sha512-41qniHzTU8yAGbCp04ohlmSrZf8bkf/iJsl3V0dRGsQN/5GFfx+LbCSsCpp2gqrqjTVg/K6O8ycoV35JIwAzAg=="
+    "node_modules/@cspotcode/source-map-consumer": {
+      "version": "0.8.0",
+      "resolved": "https://registry.npmjs.org/@cspotcode/source-map-consumer/-/source-map-consumer-0.8.0.tgz",
+      "integrity": "sha512-41qniHzTU8yAGbCp04ohlmSrZf8bkf/iJsl3V0dRGsQN/5GFfx+LbCSsCpp2gqrqjTVg/K6O8ycoV35JIwAzAg==",
+      "engines": {
+        "node": ">= 12"
+      }
+    },
+    "node_modules/@cspotcode/source-map-support": {
+      "version": "0.7.0",
+      "resolved": "https://registry.npmjs.org/@cspotcode/source-map-support/-/source-map-support-0.7.0.tgz",
+      "integrity": "sha512-X4xqRHqN8ACt2aHVe51OxeA2HjbcL4MqFqXkrmQszJ1NOUuUu5u6Vqx/0lZSVNku7velL5FC/s5uEAj1lsBMhA==",
+      "dependencies": {
+        "@cspotcode/source-map-consumer": "0.8.0"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@tsconfig/node10": {
+      "version": "1.0.8",
+      "resolved": "https://registry.npmjs.org/@tsconfig/node10/-/node10-1.0.8.tgz",
+      "integrity": "sha512-6XFfSQmMgq0CFLY1MslA/CPUfhIL919M1rMsa5lP2P097N2Wd1sSX0tx1u4olM16fLNhtHZpRhedZJphNJqmZg=="
+    },
+    "node_modules/@tsconfig/node12": {
+      "version": "1.0.9",
+      "resolved": "https://registry.npmjs.org/@tsconfig/node12/-/node12-1.0.9.tgz",
+      "integrity": "sha512-/yBMcem+fbvhSREH+s14YJi18sp7J9jpuhYByADT2rypfajMZZN4WQ6zBGgBKp53NKmqI36wFYDb3yaMPurITw=="
+    },
+    "node_modules/@tsconfig/node14": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/@tsconfig/node14/-/node14-1.0.1.tgz",
+      "integrity": "sha512-509r2+yARFfHHE7T6Puu2jjkoycftovhXRqW328PDXTVGKihlb1P8Z9mMZH04ebyajfRY7dedfGynlrFHJUQCg=="
+    },
+    "node_modules/@tsconfig/node16": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/@tsconfig/node16/-/node16-1.0.2.tgz",
+      "integrity": "sha512-eZxlbI8GZscaGS7kkc/trHTT5xgrjH3/1n2JDwusC9iahPKWMRvRjJSAN5mCXviuTGQ/lHnhvv8Q1YTpnfz9gA=="
+    },
+    "node_modules/@types/chroma-js": {
+      "version": "2.1.3",
+      "resolved": "https://registry.npmjs.org/@types/chroma-js/-/chroma-js-2.1.3.tgz",
+      "integrity": "sha512-1xGPhoSGY1CPmXLCBcjVZSQinFjL26vlR8ZqprsBWiFyED4JacJJ9zHhh5aaUXqbY9B37mKQ73nlydVAXmr1+g=="
+    },
+    "node_modules/@types/node": {
+      "version": "17.0.23",
+      "resolved": "https://registry.npmjs.org/@types/node/-/node-17.0.23.tgz",
+      "integrity": "sha512-UxDxWn7dl97rKVeVS61vErvw086aCYhDLyvRQZ5Rk65rZKepaFdm53GeqXaKBuOhED4e9uWq34IC3TdSdJJ2Gw=="
+    },
+    "node_modules/acorn": {
+      "version": "8.7.0",
+      "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.7.0.tgz",
+      "integrity": "sha512-V/LGr1APy+PXIwKebEWrkZPwoeoF+w1jiOBUmuxuiUIaOHtob8Qc9BTrYo7VuI5fR8tqsy+buA2WFooR5olqvQ==",
+      "bin": {
+        "acorn": "bin/acorn"
+      },
+      "engines": {
+        "node": ">=0.4.0"
+      }
+    },
+    "node_modules/acorn-walk": {
+      "version": "8.2.0",
+      "resolved": "https://registry.npmjs.org/acorn-walk/-/acorn-walk-8.2.0.tgz",
+      "integrity": "sha512-k+iyHEuPgSw6SbuDpGQM+06HQUa04DZ3o+F6CSzXMvvI5KMvnaEqXe+YVe555R9nn6GPt404fos4wcgpw12SDA==",
+      "engines": {
+        "node": ">=0.4.0"
+      }
+    },
+    "node_modules/arg": {
+      "version": "4.1.3",
+      "resolved": "https://registry.npmjs.org/arg/-/arg-4.1.3.tgz",
+      "integrity": "sha512-58S9QDqG0Xx27YwPSt9fJxivjYl432YCwfDMfZ+71RAqUrZef7LrKQZ3LHLOwCS4FLNBplP533Zx895SeOCHvA=="
+    },
+    "node_modules/case-anything": {
+      "version": "2.1.10",
+      "resolved": "https://registry.npmjs.org/case-anything/-/case-anything-2.1.10.tgz",
+      "integrity": "sha512-JczJwVrCP0jPKh05McyVsuOg6AYosrB9XWZKbQzXeDAm2ClE/PJE/BcrrQrVyGYH7Jg8V/LDupmyL4kFlVsVFQ==",
+      "engines": {
+        "node": ">=12.13"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/mesqueeb"
+      }
+    },
+    "node_modules/chroma-js": {
+      "version": "2.4.2",
+      "resolved": "https://registry.npmjs.org/chroma-js/-/chroma-js-2.4.2.tgz",
+      "integrity": "sha512-U9eDw6+wt7V8z5NncY2jJfZa+hUH8XEj8FQHgFJTrUFnJfXYf4Ml4adI2vXZOjqRDpFWtYVWypDfZwnJ+HIR4A=="
+    },
+    "node_modules/create-require": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/create-require/-/create-require-1.1.1.tgz",
+      "integrity": "sha512-dcKFX3jn0MpIaXjisoRvexIJVEKzaq7z2rZKxf+MSr9TkdmHmsU4m2lcLojrj/FHl8mk5VxMmYA+ftRkP/3oKQ=="
+    },
+    "node_modules/diff": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/diff/-/diff-4.0.2.tgz",
+      "integrity": "sha512-58lmxKSA4BNyLz+HHMUzlOEpg09FV+ev6ZMe3vJihgdxzgcwZ8VoEEPmALCZG9LmqfVoNMMKpttIYTVG6uDY7A==",
+      "engines": {
+        "node": ">=0.3.1"
+      }
+    },
+    "node_modules/make-error": {
+      "version": "1.3.6",
+      "resolved": "https://registry.npmjs.org/make-error/-/make-error-1.3.6.tgz",
+      "integrity": "sha512-s8UhlNe7vPKomQhC1qFelMokr/Sc3AgNbso3n74mVPA5LTZwkB9NlXf4XPamLxJE8h0gh73rM94xvwRT2CVInw=="
+    },
+    "node_modules/ts-node": {
+      "version": "10.7.0",
+      "resolved": "https://registry.npmjs.org/ts-node/-/ts-node-10.7.0.tgz",
+      "integrity": "sha512-TbIGS4xgJoX2i3do417KSaep1uRAW/Lu+WAL2doDHC0D6ummjirVOXU5/7aiZotbQ5p1Zp9tP7U6cYhA0O7M8A==",
+      "dependencies": {
+        "@cspotcode/source-map-support": "0.7.0",
+        "@tsconfig/node10": "^1.0.7",
+        "@tsconfig/node12": "^1.0.7",
+        "@tsconfig/node14": "^1.0.0",
+        "@tsconfig/node16": "^1.0.2",
+        "acorn": "^8.4.1",
+        "acorn-walk": "^8.1.1",
+        "arg": "^4.1.0",
+        "create-require": "^1.1.0",
+        "diff": "^4.0.1",
+        "make-error": "^1.1.1",
+        "v8-compile-cache-lib": "^3.0.0",
+        "yn": "3.1.1"
+      },
+      "bin": {
+        "ts-node": "dist/bin.js",
+        "ts-node-cwd": "dist/bin-cwd.js",
+        "ts-node-esm": "dist/bin-esm.js",
+        "ts-node-script": "dist/bin-script.js",
+        "ts-node-transpile-only": "dist/bin-transpile.js",
+        "ts-script": "dist/bin-script-deprecated.js"
+      },
+      "peerDependencies": {
+        "@swc/core": ">=1.2.50",
+        "@swc/wasm": ">=1.2.50",
+        "@types/node": "*",
+        "typescript": ">=2.7"
+      },
+      "peerDependenciesMeta": {
+        "@swc/core": {
+          "optional": true
         },
-        "@cspotcode/source-map-support": {
-            "version": "0.7.0",
-            "resolved": "https://registry.npmjs.org/@cspotcode/source-map-support/-/source-map-support-0.7.0.tgz",
-            "integrity": "sha512-X4xqRHqN8ACt2aHVe51OxeA2HjbcL4MqFqXkrmQszJ1NOUuUu5u6Vqx/0lZSVNku7velL5FC/s5uEAj1lsBMhA==",
-            "requires": {
-                "@cspotcode/source-map-consumer": "0.8.0"
-            }
-        },
-        "@tsconfig/node10": {
-            "version": "1.0.8",
-            "resolved": "https://registry.npmjs.org/@tsconfig/node10/-/node10-1.0.8.tgz",
-            "integrity": "sha512-6XFfSQmMgq0CFLY1MslA/CPUfhIL919M1rMsa5lP2P097N2Wd1sSX0tx1u4olM16fLNhtHZpRhedZJphNJqmZg=="
-        },
-        "@tsconfig/node12": {
-            "version": "1.0.9",
-            "resolved": "https://registry.npmjs.org/@tsconfig/node12/-/node12-1.0.9.tgz",
-            "integrity": "sha512-/yBMcem+fbvhSREH+s14YJi18sp7J9jpuhYByADT2rypfajMZZN4WQ6zBGgBKp53NKmqI36wFYDb3yaMPurITw=="
-        },
-        "@tsconfig/node14": {
-            "version": "1.0.1",
-            "resolved": "https://registry.npmjs.org/@tsconfig/node14/-/node14-1.0.1.tgz",
-            "integrity": "sha512-509r2+yARFfHHE7T6Puu2jjkoycftovhXRqW328PDXTVGKihlb1P8Z9mMZH04ebyajfRY7dedfGynlrFHJUQCg=="
-        },
-        "@tsconfig/node16": {
-            "version": "1.0.2",
-            "resolved": "https://registry.npmjs.org/@tsconfig/node16/-/node16-1.0.2.tgz",
-            "integrity": "sha512-eZxlbI8GZscaGS7kkc/trHTT5xgrjH3/1n2JDwusC9iahPKWMRvRjJSAN5mCXviuTGQ/lHnhvv8Q1YTpnfz9gA=="
-        },
-        "@types/chroma-js": {
-            "version": "2.1.3",
-            "resolved": "https://registry.npmjs.org/@types/chroma-js/-/chroma-js-2.1.3.tgz",
-            "integrity": "sha512-1xGPhoSGY1CPmXLCBcjVZSQinFjL26vlR8ZqprsBWiFyED4JacJJ9zHhh5aaUXqbY9B37mKQ73nlydVAXmr1+g=="
-        },
-        "@types/node": {
-            "version": "17.0.23",
-            "resolved": "https://registry.npmjs.org/@types/node/-/node-17.0.23.tgz",
-            "integrity": "sha512-UxDxWn7dl97rKVeVS61vErvw086aCYhDLyvRQZ5Rk65rZKepaFdm53GeqXaKBuOhED4e9uWq34IC3TdSdJJ2Gw=="
-        },
-        "acorn": {
-            "version": "8.7.0",
-            "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.7.0.tgz",
-            "integrity": "sha512-V/LGr1APy+PXIwKebEWrkZPwoeoF+w1jiOBUmuxuiUIaOHtob8Qc9BTrYo7VuI5fR8tqsy+buA2WFooR5olqvQ=="
-        },
-        "acorn-walk": {
-            "version": "8.2.0",
-            "resolved": "https://registry.npmjs.org/acorn-walk/-/acorn-walk-8.2.0.tgz",
-            "integrity": "sha512-k+iyHEuPgSw6SbuDpGQM+06HQUa04DZ3o+F6CSzXMvvI5KMvnaEqXe+YVe555R9nn6GPt404fos4wcgpw12SDA=="
-        },
-        "arg": {
-            "version": "4.1.3",
-            "resolved": "https://registry.npmjs.org/arg/-/arg-4.1.3.tgz",
-            "integrity": "sha512-58S9QDqG0Xx27YwPSt9fJxivjYl432YCwfDMfZ+71RAqUrZef7LrKQZ3LHLOwCS4FLNBplP533Zx895SeOCHvA=="
-        },
-        "case-anything": {
-            "version": "2.1.10",
-            "resolved": "https://registry.npmjs.org/case-anything/-/case-anything-2.1.10.tgz",
-            "integrity": "sha512-JczJwVrCP0jPKh05McyVsuOg6AYosrB9XWZKbQzXeDAm2ClE/PJE/BcrrQrVyGYH7Jg8V/LDupmyL4kFlVsVFQ=="
-        },
-        "chroma-js": {
-            "version": "2.4.2",
-            "resolved": "https://registry.npmjs.org/chroma-js/-/chroma-js-2.4.2.tgz",
-            "integrity": "sha512-U9eDw6+wt7V8z5NncY2jJfZa+hUH8XEj8FQHgFJTrUFnJfXYf4Ml4adI2vXZOjqRDpFWtYVWypDfZwnJ+HIR4A=="
-        },
-        "create-require": {
-            "version": "1.1.1",
-            "resolved": "https://registry.npmjs.org/create-require/-/create-require-1.1.1.tgz",
-            "integrity": "sha512-dcKFX3jn0MpIaXjisoRvexIJVEKzaq7z2rZKxf+MSr9TkdmHmsU4m2lcLojrj/FHl8mk5VxMmYA+ftRkP/3oKQ=="
-        },
-        "diff": {
-            "version": "4.0.2",
-            "resolved": "https://registry.npmjs.org/diff/-/diff-4.0.2.tgz",
-            "integrity": "sha512-58lmxKSA4BNyLz+HHMUzlOEpg09FV+ev6ZMe3vJihgdxzgcwZ8VoEEPmALCZG9LmqfVoNMMKpttIYTVG6uDY7A=="
-        },
-        "make-error": {
-            "version": "1.3.6",
-            "resolved": "https://registry.npmjs.org/make-error/-/make-error-1.3.6.tgz",
-            "integrity": "sha512-s8UhlNe7vPKomQhC1qFelMokr/Sc3AgNbso3n74mVPA5LTZwkB9NlXf4XPamLxJE8h0gh73rM94xvwRT2CVInw=="
-        },
-        "ts-node": {
-            "version": "10.7.0",
-            "resolved": "https://registry.npmjs.org/ts-node/-/ts-node-10.7.0.tgz",
-            "integrity": "sha512-TbIGS4xgJoX2i3do417KSaep1uRAW/Lu+WAL2doDHC0D6ummjirVOXU5/7aiZotbQ5p1Zp9tP7U6cYhA0O7M8A==",
-            "requires": {
-                "@cspotcode/source-map-support": "0.7.0",
-                "@tsconfig/node10": "^1.0.7",
-                "@tsconfig/node12": "^1.0.7",
-                "@tsconfig/node14": "^1.0.0",
-                "@tsconfig/node16": "^1.0.2",
-                "acorn": "^8.4.1",
-                "acorn-walk": "^8.1.1",
-                "arg": "^4.1.0",
-                "create-require": "^1.1.0",
-                "diff": "^4.0.1",
-                "make-error": "^1.1.1",
-                "v8-compile-cache-lib": "^3.0.0",
-                "yn": "3.1.1"
-            }
-        },
-        "typescript": {
-            "version": "4.6.3",
-            "resolved": "https://registry.npmjs.org/typescript/-/typescript-4.6.3.tgz",
-            "integrity": "sha512-yNIatDa5iaofVozS/uQJEl3JRWLKKGJKh6Yaiv0GLGSuhpFJe7P3SbHZ8/yjAHRQwKRoA6YZqlfjXWmVzoVSMw==",
-            "peer": true
-        },
-        "v8-compile-cache-lib": {
-            "version": "3.0.0",
-            "resolved": "https://registry.npmjs.org/v8-compile-cache-lib/-/v8-compile-cache-lib-3.0.0.tgz",
-            "integrity": "sha512-mpSYqfsFvASnSn5qMiwrr4VKfumbPyONLCOPmsR3A6pTY/r0+tSaVbgPWSAIuzbk3lCTa+FForeTiO+wBQGkjA=="
-        },
-        "yn": {
-            "version": "3.1.1",
-            "resolved": "https://registry.npmjs.org/yn/-/yn-3.1.1.tgz",
-            "integrity": "sha512-Ux4ygGWsu2c7isFWe8Yu1YluJmqVhxqK2cLXNQA5AcC3QfbGNpM7fu0Y8b/z16pXLnFxZYvWhd3fhBY9DLmC6Q=="
+        "@swc/wasm": {
+          "optional": true
         }
+      }
+    },
+    "node_modules/typescript": {
+      "version": "4.6.3",
+      "resolved": "https://registry.npmjs.org/typescript/-/typescript-4.6.3.tgz",
+      "integrity": "sha512-yNIatDa5iaofVozS/uQJEl3JRWLKKGJKh6Yaiv0GLGSuhpFJe7P3SbHZ8/yjAHRQwKRoA6YZqlfjXWmVzoVSMw==",
+      "peer": true,
+      "bin": {
+        "tsc": "bin/tsc",
+        "tsserver": "bin/tsserver"
+      },
+      "engines": {
+        "node": ">=4.2.0"
+      }
+    },
+    "node_modules/v8-compile-cache-lib": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/v8-compile-cache-lib/-/v8-compile-cache-lib-3.0.0.tgz",
+      "integrity": "sha512-mpSYqfsFvASnSn5qMiwrr4VKfumbPyONLCOPmsR3A6pTY/r0+tSaVbgPWSAIuzbk3lCTa+FForeTiO+wBQGkjA=="
+    },
+    "node_modules/yn": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/yn/-/yn-3.1.1.tgz",
+      "integrity": "sha512-Ux4ygGWsu2c7isFWe8Yu1YluJmqVhxqK2cLXNQA5AcC3QfbGNpM7fu0Y8b/z16pXLnFxZYvWhd3fhBY9DLmC6Q==",
+      "engines": {
+        "node": ">=6"
+      }
     }
+  },
+  "dependencies": {
+    "@cspotcode/source-map-consumer": {
+      "version": "0.8.0",
+      "resolved": "https://registry.npmjs.org/@cspotcode/source-map-consumer/-/source-map-consumer-0.8.0.tgz",
+      "integrity": "sha512-41qniHzTU8yAGbCp04ohlmSrZf8bkf/iJsl3V0dRGsQN/5GFfx+LbCSsCpp2gqrqjTVg/K6O8ycoV35JIwAzAg=="
+    },
+    "@cspotcode/source-map-support": {
+      "version": "0.7.0",
+      "resolved": "https://registry.npmjs.org/@cspotcode/source-map-support/-/source-map-support-0.7.0.tgz",
+      "integrity": "sha512-X4xqRHqN8ACt2aHVe51OxeA2HjbcL4MqFqXkrmQszJ1NOUuUu5u6Vqx/0lZSVNku7velL5FC/s5uEAj1lsBMhA==",
+      "requires": {
+        "@cspotcode/source-map-consumer": "0.8.0"
+      }
+    },
+    "@tsconfig/node10": {
+      "version": "1.0.8",
+      "resolved": "https://registry.npmjs.org/@tsconfig/node10/-/node10-1.0.8.tgz",
+      "integrity": "sha512-6XFfSQmMgq0CFLY1MslA/CPUfhIL919M1rMsa5lP2P097N2Wd1sSX0tx1u4olM16fLNhtHZpRhedZJphNJqmZg=="
+    },
+    "@tsconfig/node12": {
+      "version": "1.0.9",
+      "resolved": "https://registry.npmjs.org/@tsconfig/node12/-/node12-1.0.9.tgz",
+      "integrity": "sha512-/yBMcem+fbvhSREH+s14YJi18sp7J9jpuhYByADT2rypfajMZZN4WQ6zBGgBKp53NKmqI36wFYDb3yaMPurITw=="
+    },
+    "@tsconfig/node14": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/@tsconfig/node14/-/node14-1.0.1.tgz",
+      "integrity": "sha512-509r2+yARFfHHE7T6Puu2jjkoycftovhXRqW328PDXTVGKihlb1P8Z9mMZH04ebyajfRY7dedfGynlrFHJUQCg=="
+    },
+    "@tsconfig/node16": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/@tsconfig/node16/-/node16-1.0.2.tgz",
+      "integrity": "sha512-eZxlbI8GZscaGS7kkc/trHTT5xgrjH3/1n2JDwusC9iahPKWMRvRjJSAN5mCXviuTGQ/lHnhvv8Q1YTpnfz9gA=="
+    },
+    "@types/chroma-js": {
+      "version": "2.1.3",
+      "resolved": "https://registry.npmjs.org/@types/chroma-js/-/chroma-js-2.1.3.tgz",
+      "integrity": "sha512-1xGPhoSGY1CPmXLCBcjVZSQinFjL26vlR8ZqprsBWiFyED4JacJJ9zHhh5aaUXqbY9B37mKQ73nlydVAXmr1+g=="
+    },
+    "@types/node": {
+      "version": "17.0.23",
+      "resolved": "https://registry.npmjs.org/@types/node/-/node-17.0.23.tgz",
+      "integrity": "sha512-UxDxWn7dl97rKVeVS61vErvw086aCYhDLyvRQZ5Rk65rZKepaFdm53GeqXaKBuOhED4e9uWq34IC3TdSdJJ2Gw=="
+    },
+    "acorn": {
+      "version": "8.7.0",
+      "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.7.0.tgz",
+      "integrity": "sha512-V/LGr1APy+PXIwKebEWrkZPwoeoF+w1jiOBUmuxuiUIaOHtob8Qc9BTrYo7VuI5fR8tqsy+buA2WFooR5olqvQ=="
+    },
+    "acorn-walk": {
+      "version": "8.2.0",
+      "resolved": "https://registry.npmjs.org/acorn-walk/-/acorn-walk-8.2.0.tgz",
+      "integrity": "sha512-k+iyHEuPgSw6SbuDpGQM+06HQUa04DZ3o+F6CSzXMvvI5KMvnaEqXe+YVe555R9nn6GPt404fos4wcgpw12SDA=="
+    },
+    "arg": {
+      "version": "4.1.3",
+      "resolved": "https://registry.npmjs.org/arg/-/arg-4.1.3.tgz",
+      "integrity": "sha512-58S9QDqG0Xx27YwPSt9fJxivjYl432YCwfDMfZ+71RAqUrZef7LrKQZ3LHLOwCS4FLNBplP533Zx895SeOCHvA=="
+    },
+    "case-anything": {
+      "version": "2.1.10",
+      "resolved": "https://registry.npmjs.org/case-anything/-/case-anything-2.1.10.tgz",
+      "integrity": "sha512-JczJwVrCP0jPKh05McyVsuOg6AYosrB9XWZKbQzXeDAm2ClE/PJE/BcrrQrVyGYH7Jg8V/LDupmyL4kFlVsVFQ=="
+    },
+    "chroma-js": {
+      "version": "2.4.2",
+      "resolved": "https://registry.npmjs.org/chroma-js/-/chroma-js-2.4.2.tgz",
+      "integrity": "sha512-U9eDw6+wt7V8z5NncY2jJfZa+hUH8XEj8FQHgFJTrUFnJfXYf4Ml4adI2vXZOjqRDpFWtYVWypDfZwnJ+HIR4A=="
+    },
+    "create-require": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/create-require/-/create-require-1.1.1.tgz",
+      "integrity": "sha512-dcKFX3jn0MpIaXjisoRvexIJVEKzaq7z2rZKxf+MSr9TkdmHmsU4m2lcLojrj/FHl8mk5VxMmYA+ftRkP/3oKQ=="
+    },
+    "diff": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/diff/-/diff-4.0.2.tgz",
+      "integrity": "sha512-58lmxKSA4BNyLz+HHMUzlOEpg09FV+ev6ZMe3vJihgdxzgcwZ8VoEEPmALCZG9LmqfVoNMMKpttIYTVG6uDY7A=="
+    },
+    "make-error": {
+      "version": "1.3.6",
+      "resolved": "https://registry.npmjs.org/make-error/-/make-error-1.3.6.tgz",
+      "integrity": "sha512-s8UhlNe7vPKomQhC1qFelMokr/Sc3AgNbso3n74mVPA5LTZwkB9NlXf4XPamLxJE8h0gh73rM94xvwRT2CVInw=="
+    },
+    "ts-node": {
+      "version": "10.7.0",
+      "resolved": "https://registry.npmjs.org/ts-node/-/ts-node-10.7.0.tgz",
+      "integrity": "sha512-TbIGS4xgJoX2i3do417KSaep1uRAW/Lu+WAL2doDHC0D6ummjirVOXU5/7aiZotbQ5p1Zp9tP7U6cYhA0O7M8A==",
+      "requires": {
+        "@cspotcode/source-map-support": "0.7.0",
+        "@tsconfig/node10": "^1.0.7",
+        "@tsconfig/node12": "^1.0.7",
+        "@tsconfig/node14": "^1.0.0",
+        "@tsconfig/node16": "^1.0.2",
+        "acorn": "^8.4.1",
+        "acorn-walk": "^8.1.1",
+        "arg": "^4.1.0",
+        "create-require": "^1.1.0",
+        "diff": "^4.0.1",
+        "make-error": "^1.1.1",
+        "v8-compile-cache-lib": "^3.0.0",
+        "yn": "3.1.1"
+      }
+    },
+    "typescript": {
+      "version": "4.6.3",
+      "resolved": "https://registry.npmjs.org/typescript/-/typescript-4.6.3.tgz",
+      "integrity": "sha512-yNIatDa5iaofVozS/uQJEl3JRWLKKGJKh6Yaiv0GLGSuhpFJe7P3SbHZ8/yjAHRQwKRoA6YZqlfjXWmVzoVSMw==",
+      "peer": true
+    },
+    "v8-compile-cache-lib": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/v8-compile-cache-lib/-/v8-compile-cache-lib-3.0.0.tgz",
+      "integrity": "sha512-mpSYqfsFvASnSn5qMiwrr4VKfumbPyONLCOPmsR3A6pTY/r0+tSaVbgPWSAIuzbk3lCTa+FForeTiO+wBQGkjA=="
+    },
+    "yn": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/yn/-/yn-3.1.1.tgz",
+      "integrity": "sha512-Ux4ygGWsu2c7isFWe8Yu1YluJmqVhxqK2cLXNQA5AcC3QfbGNpM7fu0Y8b/z16pXLnFxZYvWhd3fhBY9DLmC6Q=="
+    }
+  }
 }
diff --git a/styles/package.json b/styles/package.json
index ccdaca0853..38412aa1da 100644
--- a/styles/package.json
+++ b/styles/package.json
@@ -1,19 +1,19 @@
 {
-    "name": "styles",
-    "version": "1.0.0",
-    "description": "",
-    "main": "index.js",
-    "scripts": {
-        "build": "npm run build-themes && npm run build-tokens",
-        "build-themes": "ts-node ./src/buildThemes.ts"
-    },
-    "author": "",
-    "license": "ISC",
-    "dependencies": {
-        "@types/chroma-js": "^2.1.3",
-        "@types/node": "^17.0.23",
-        "case-anything": "^2.1.10",
-        "chroma-js": "^2.4.2",
-        "ts-node": "^10.7.0"
-    }
+  "name": "styles",
+  "version": "1.0.0",
+  "description": "",
+  "main": "index.js",
+  "scripts": {
+    "build": "npm run build-themes && npm run build-tokens",
+    "build-themes": "ts-node ./src/buildThemes.ts"
+  },
+  "author": "",
+  "license": "ISC",
+  "dependencies": {
+    "@types/chroma-js": "^2.1.3",
+    "@types/node": "^17.0.23",
+    "case-anything": "^2.1.10",
+    "chroma-js": "^2.4.2",
+    "ts-node": "^10.7.0"
+  }
 }
diff --git a/styles/src/buildThemes.ts b/styles/src/buildThemes.ts
index c43be067a8..22178163b6 100644
--- a/styles/src/buildThemes.ts
+++ b/styles/src/buildThemes.ts
@@ -1,18 +1,18 @@
 import * as fs from "fs";
 import * as path from "path";
-import { tmpdir } from 'os';
+import { tmpdir } from "os";
 import app from "./styleTree/app";
 import themes from "./themes";
 import snakeCase from "./utils/snakeCase";
 
 const themeDirectory = `${__dirname}/../../assets/themes/`;
-const tempDirectory = fs.mkdtempSync(path.join(tmpdir(), 'build-themes'));
+const tempDirectory = fs.mkdtempSync(path.join(tmpdir(), "build-themes"));
 
 // Clear existing themes
 for (const file of fs.readdirSync(themeDirectory)) {
-  if (file.endsWith('.json')) {
-    const name = file.replace(/\.json$/, '');
-    if (!themes.find(theme => theme.name === name)) {
+  if (file.endsWith(".json")) {
+    const name = file.replace(/\.json$/, "");
+    if (!themes.find((theme) => theme.name === name)) {
       fs.unlinkSync(path.join(themeDirectory, file));
     }
   }
diff --git a/styles/src/common.ts b/styles/src/common.ts
index 713401f348..9f636596d4 100644
--- a/styles/src/common.ts
+++ b/styles/src/common.ts
@@ -1,7 +1,7 @@
 export const fontFamilies = {
   sans: "Zed Sans",
   mono: "Zed Mono",
-}
+};
 
 export const fontSizes = {
   "3xs": 8,
@@ -13,7 +13,8 @@ export const fontSizes = {
   xl: 20,
 };
 
-export type FontWeight = "thin"
+export type FontWeight =
+  | "thin"
   | "extra_light"
   | "light"
   | "normal"
@@ -31,7 +32,7 @@ export const fontWeights: { [key: string]: FontWeight } = {
   semibold: "semibold",
   bold: "bold",
   extra_bold: "extra_bold",
-  black: "black"
+  black: "black",
 };
 
 export const sizes = {
@@ -62,4 +63,4 @@ export const sizes = {
 //   purple: colorRamp("#A855F7FF"),
 //   fuschia: colorRamp("#D946E4FF"),
 //   pink: colorRamp("#EC4899FF"),
-// }
\ No newline at end of file
+// }
diff --git a/styles/src/styleTree/app.ts b/styles/src/styleTree/app.ts
index 33bcafcdae..fe67cf701d 100644
--- a/styles/src/styleTree/app.ts
+++ b/styles/src/styleTree/app.ts
@@ -17,7 +17,7 @@ import tooltip from "./tooltip";
 import terminal from "./terminal";
 
 export const panel = {
-  padding: { top: 12, bottom: 12 }
+  padding: { top: 12, bottom: 12 },
 };
 
 export default function app(theme: Theme): Object {
diff --git a/styles/src/styleTree/chatPanel.ts b/styles/src/styleTree/chatPanel.ts
index 103b8d2a3f..e2b83237dd 100644
--- a/styles/src/styleTree/chatPanel.ts
+++ b/styles/src/styleTree/chatPanel.ts
@@ -6,7 +6,7 @@ import {
   player,
   text,
   TextColor,
-  popoverShadow
+  popoverShadow,
 } from "./components";
 
 export default function chatPanel(theme: Theme) {
diff --git a/styles/src/styleTree/commandPalette.ts b/styles/src/styleTree/commandPalette.ts
index 7b94f1cfae..6d38051eb2 100644
--- a/styles/src/styleTree/commandPalette.ts
+++ b/styles/src/styleTree/commandPalette.ts
@@ -16,11 +16,11 @@ export default function commandPalette(theme: Theme) {
         right: 8,
       },
       margin: {
-        left: 2
+        left: 2,
       },
       active: {
         text: text(theme, "mono", "active", { size: "xs" }),
-      }
-    }
-  }
+      },
+    },
+  };
 }
diff --git a/styles/src/styleTree/components.ts b/styles/src/styleTree/components.ts
index 020005b301..10e70ba3ef 100644
--- a/styles/src/styleTree/components.ts
+++ b/styles/src/styleTree/components.ts
@@ -60,10 +60,7 @@ export interface Player {
     selection: string;
   };
 }
-export function player(
-  theme: Theme,
-  playerNumber: PlayerIndex,
-): Player {
+export function player(theme: Theme, playerNumber: PlayerIndex): Player {
   return {
     selection: {
       cursor: theme.player[playerNumber].cursorColor,
@@ -77,7 +74,7 @@ export type BackgroundState = keyof BackgroundColorSet;
 export function backgroundColor(
   theme: Theme,
   name: BackgroundColor,
-  state?: BackgroundState,
+  state?: BackgroundState
 ): string {
   return theme.backgroundColor[name][state || "base"];
 }
diff --git a/styles/src/styleTree/contactFinder.ts b/styles/src/styleTree/contactFinder.ts
index fdefa34b8a..e34fac4b2d 100644
--- a/styles/src/styleTree/contactFinder.ts
+++ b/styles/src/styleTree/contactFinder.ts
@@ -26,13 +26,13 @@ export default function contactFinder(theme: Theme) {
     contactButton: {
       ...contactButton,
       hover: {
-        background: backgroundColor(theme, 100, "hovered")
-      }
+        background: backgroundColor(theme, 100, "hovered"),
+      },
     },
     disabledContactButton: {
       ...contactButton,
       background: backgroundColor(theme, 100),
       color: iconColor(theme, "muted"),
     },
-  }
+  };
 }
diff --git a/styles/src/styleTree/contactNotification.ts b/styles/src/styleTree/contactNotification.ts
index 0ed9636399..8006a95541 100644
--- a/styles/src/styleTree/contactNotification.ts
+++ b/styles/src/styleTree/contactNotification.ts
@@ -13,7 +13,7 @@ export default function contactNotification(theme: Theme): Object {
     },
     headerMessage: {
       ...text(theme, "sans", "primary", { size: "xs" }),
-      margin: { left: headerPadding, right: headerPadding }
+      margin: { left: headerPadding, right: headerPadding },
     },
     headerHeight: 18,
     bodyMessage: {
@@ -27,8 +27,8 @@ export default function contactNotification(theme: Theme): Object {
       cornerRadius: 6,
       margin: { left: 6 },
       hover: {
-        background: backgroundColor(theme, "on300", "hovered")
-      }
+        background: backgroundColor(theme, "on300", "hovered"),
+      },
     },
     dismissButton: {
       color: iconColor(theme, "secondary"),
@@ -37,8 +37,8 @@ export default function contactNotification(theme: Theme): Object {
       buttonWidth: 8,
       buttonHeight: 8,
       hover: {
-        color: iconColor(theme, "primary")
-      }
-    }
-  }
-}
\ No newline at end of file
+        color: iconColor(theme, "primary"),
+      },
+    },
+  };
+}
diff --git a/styles/src/styleTree/contactsPanel.ts b/styles/src/styleTree/contactsPanel.ts
index 2bfa4e94e2..51e35c9003 100644
--- a/styles/src/styleTree/contactsPanel.ts
+++ b/styles/src/styleTree/contactsPanel.ts
@@ -1,6 +1,13 @@
 import Theme from "../themes/common/theme";
 import { panel } from "./app";
-import { backgroundColor, border, borderColor, iconColor, player, text } from "./components";
+import {
+  backgroundColor,
+  border,
+  borderColor,
+  iconColor,
+  player,
+  text,
+} from "./components";
 
 export default function contactsPanel(theme: Theme) {
   const nameMargin = 8;
@@ -24,7 +31,7 @@ export default function contactsPanel(theme: Theme) {
       margin: {
         left: nameMargin,
         right: nameMargin,
-      }
+      },
     },
     padding: {
       left: sidePadding,
@@ -59,7 +66,7 @@ export default function contactsPanel(theme: Theme) {
       margin: {
         left: sidePadding,
         right: sidePadding,
-      }
+      },
     },
     userQueryEditorHeight: 32,
     addContactButton: {
@@ -86,16 +93,16 @@ export default function contactsPanel(theme: Theme) {
       active: {
         ...text(theme, "mono", "primary", { size: "sm" }),
         background: backgroundColor(theme, 100, "active"),
-      }
+      },
     },
     contactRow: {
       padding: {
         left: sidePadding,
-        right: sidePadding
+        right: sidePadding,
       },
       active: {
         background: backgroundColor(theme, 100, "active"),
-      }
+      },
     },
     treeBranch: {
       color: borderColor(theme, "active"),
@@ -105,7 +112,7 @@ export default function contactsPanel(theme: Theme) {
       },
       active: {
         color: borderColor(theme, "active"),
-      }
+      },
     },
     contactAvatar: {
       cornerRadius: 10,
@@ -141,18 +148,18 @@ export default function contactsPanel(theme: Theme) {
       },
       active: {
         background: backgroundColor(theme, 300, "active"),
-      }
+      },
     },
     inviteRow: {
       padding: {
         left: sidePadding,
-        right: sidePadding
+        right: sidePadding,
       },
       border: { top: true, width: 1, color: borderColor(theme, "primary") },
       text: text(theme, "sans", "primary", { size: "sm" }),
       hover: {
-        text: text(theme, "sans", "primary", { size: "sm", underline: true })
-      }
-    }
-  }
+        text: text(theme, "sans", "primary", { size: "sm", underline: true }),
+      },
+    },
+  };
 }
diff --git a/styles/src/styleTree/contextMenu.ts b/styles/src/styleTree/contextMenu.ts
index 43b3a200b1..a7c69d7660 100644
--- a/styles/src/styleTree/contextMenu.ts
+++ b/styles/src/styleTree/contextMenu.ts
@@ -1,5 +1,11 @@
 import Theme from "../themes/common/theme";
-import { backgroundColor, border, borderColor, popoverShadow, text } from "./components";
+import {
+  backgroundColor,
+  border,
+  borderColor,
+  popoverShadow,
+  text,
+} from "./components";
 
 export default function contextMenu(theme: Theme) {
   return {
@@ -15,7 +21,7 @@ export default function contextMenu(theme: Theme) {
       label: text(theme, "sans", "secondary", { size: "sm" }),
       keystroke: {
         ...text(theme, "sans", "muted", { size: "sm", weight: "bold" }),
-        padding: { left: 3, right: 3 }
+        padding: { left: 3, right: 3 },
       },
       hover: {
         background: backgroundColor(theme, 300, "hovered"),
@@ -28,11 +34,11 @@ export default function contextMenu(theme: Theme) {
       activeHover: {
         background: backgroundColor(theme, 300, "hovered"),
         text: text(theme, "sans", "active", { size: "sm" }),
-      }
+      },
     },
     separator: {
       background: borderColor(theme, "primary"),
-      margin: { top: 2, bottom: 2 }
+      margin: { top: 2, bottom: 2 },
     },
-  }
+  };
 }
diff --git a/styles/src/styleTree/editor.ts b/styles/src/styleTree/editor.ts
index 8031a229c4..7e2c512a7c 100644
--- a/styles/src/styleTree/editor.ts
+++ b/styles/src/styleTree/editor.ts
@@ -6,7 +6,7 @@ import {
   player,
   popoverShadow,
   text,
-  TextColor
+  TextColor,
 } from "./components";
 import hoverPopover from "./hoverPopover";
 
@@ -157,7 +157,7 @@ export default function editor(theme: Theme) {
       hover: {
         color: iconColor(theme, "active"),
         background: backgroundColor(theme, "on500", "base"),
-      }
+      },
     },
     syntax,
   };
diff --git a/styles/src/styleTree/hoverPopover.ts b/styles/src/styleTree/hoverPopover.ts
index 353706d0a0..d6665cacff 100644
--- a/styles/src/styleTree/hoverPopover.ts
+++ b/styles/src/styleTree/hoverPopover.ts
@@ -10,7 +10,7 @@ export default function HoverPopover(theme: Theme) {
         left: 8,
         right: 8,
         top: 4,
-        bottom: 4
+        bottom: 4,
       },
       shadow: popoverShadow(theme),
       border: border(theme, "primary"),
@@ -21,7 +21,7 @@ export default function HoverPopover(theme: Theme) {
     block_style: {
       padding: { top: 4 },
     },
-    prose: text(theme, "sans", "primary", { "size": "sm" }),
+    prose: text(theme, "sans", "primary", { size: "sm" }),
     highlight: theme.editor.highlight.occurrence,
-  }
-}
\ No newline at end of file
+  };
+}
diff --git a/styles/src/styleTree/picker.ts b/styles/src/styleTree/picker.ts
index b3ff654e34..84a72aabcc 100644
--- a/styles/src/styleTree/picker.ts
+++ b/styles/src/styleTree/picker.ts
@@ -1,5 +1,11 @@
 import Theme from "../themes/common/theme";
-import { backgroundColor, border, player, modalShadow, text } from "./components";
+import {
+  backgroundColor,
+  border,
+  player,
+  modalShadow,
+  text,
+} from "./components";
 
 export default function picker(theme: Theme) {
   return {
@@ -22,7 +28,7 @@ export default function picker(theme: Theme) {
       },
       hover: {
         background: backgroundColor(theme, 300, "hovered"),
-      }
+      },
     },
     border: border(theme, "primary"),
     empty: {
diff --git a/styles/src/styleTree/projectDiagnostics.ts b/styles/src/styleTree/projectDiagnostics.ts
index fe2d3e5f3b..ca6eb7c808 100644
--- a/styles/src/styleTree/projectDiagnostics.ts
+++ b/styles/src/styleTree/projectDiagnostics.ts
@@ -1,8 +1,5 @@
 import Theme from "../themes/common/theme";
-import {
-  backgroundColor,
-  text,
-} from "./components";
+import { backgroundColor, text } from "./components";
 
 export default function projectDiagnostics(theme: Theme) {
   return {
@@ -11,5 +8,5 @@ export default function projectDiagnostics(theme: Theme) {
     tabIconWidth: 13,
     tabSummarySpacing: 10,
     emptyMessage: text(theme, "sans", "secondary", { size: "md" }),
-  }
+  };
 }
diff --git a/styles/src/styleTree/projectPanel.ts b/styles/src/styleTree/projectPanel.ts
index f68f69711c..7007a5da2d 100644
--- a/styles/src/styleTree/projectPanel.ts
+++ b/styles/src/styleTree/projectPanel.ts
@@ -24,7 +24,7 @@ export default function projectPanel(theme: Theme) {
       activeHover: {
         background: backgroundColor(theme, 300, "hovered"),
         text: text(theme, "mono", "active", { size: "sm" }),
-      }
+      },
     },
     cutEntryFade: 0.4,
     ignoredEntryFade: 0.6,
diff --git a/styles/src/styleTree/search.ts b/styles/src/styleTree/search.ts
index 989b9f6b7a..3e9c30d8d9 100644
--- a/styles/src/styleTree/search.ts
+++ b/styles/src/styleTree/search.ts
@@ -2,7 +2,6 @@ import Theme from "../themes/common/theme";
 import { backgroundColor, border, player, text } from "./components";
 
 export default function search(theme: Theme) {
-
   // Search input
   const editor = {
     background: backgroundColor(theme, 500),
@@ -51,7 +50,7 @@ export default function search(theme: Theme) {
         ...text(theme, "mono", "active"),
         background: backgroundColor(theme, "on500", "hovered"),
         border: border(theme, "muted"),
-      }
+      },
     },
     editor,
     invalidEditor: {
diff --git a/styles/src/styleTree/statusBar.ts b/styles/src/styleTree/statusBar.ts
index 549858dbef..d5d63fdadf 100644
--- a/styles/src/styleTree/statusBar.ts
+++ b/styles/src/styleTree/statusBar.ts
@@ -5,13 +5,13 @@ import { workspaceBackground } from "./workspace";
 export default function statusBar(theme: Theme) {
   const statusContainer = {
     cornerRadius: 6,
-    padding: { top: 3, bottom: 3, left: 6, right: 6 }
-  }
+    padding: { top: 3, bottom: 3, left: 6, right: 6 },
+  };
 
   const diagnosticStatusContainer = {
     cornerRadius: 6,
-    padding: { top: 1, bottom: 1, left: 6, right: 6 }
-  }
+    padding: { top: 1, bottom: 1, left: 6, right: 6 },
+  };
 
   return {
     height: 30,
@@ -37,7 +37,7 @@ export default function statusBar(theme: Theme) {
         message: text(theme, "sans", "primary"),
         iconColor: iconColor(theme, "active"),
         background: backgroundColor(theme, 300, "hovered"),
-      }
+      },
     },
     diagnosticMessage: {
       ...text(theme, "sans", "muted"),
@@ -86,7 +86,7 @@ export default function statusBar(theme: Theme) {
           ...diagnosticStatusContainer,
           background: backgroundColor(theme, "error", "hovered"),
           border: border(theme, "error"),
-        }
+        },
       },
     },
     sidebarButtons: {
@@ -103,7 +103,7 @@ export default function statusBar(theme: Theme) {
         active: {
           iconColor: iconColor(theme, "active"),
           background: backgroundColor(theme, 300, "active"),
-        }
+        },
       },
       badge: {
         cornerRadius: 3,
@@ -111,7 +111,7 @@ export default function statusBar(theme: Theme) {
         margin: { bottom: -1, right: -1 },
         border: { width: 1, color: workspaceBackground(theme) },
         background: iconColor(theme, "feature"),
-      }
-    }
-  }
+      },
+    },
+  };
 }
diff --git a/styles/src/styleTree/terminal.ts b/styles/src/styleTree/terminal.ts
index bc133f09c8..2868959b7c 100644
--- a/styles/src/styleTree/terminal.ts
+++ b/styles/src/styleTree/terminal.ts
@@ -44,6 +44,6 @@ export default function terminal(theme: Theme) {
       margin: 25,
       border: border(theme, "primary"),
       shadow: modalShadow(theme),
-    }
+    },
   };
-}
\ No newline at end of file
+}
diff --git a/styles/src/styleTree/tooltip.ts b/styles/src/styleTree/tooltip.ts
index 0a4ab19d46..8d1bb8078d 100644
--- a/styles/src/styleTree/tooltip.ts
+++ b/styles/src/styleTree/tooltip.ts
@@ -15,8 +15,8 @@ export default function tooltip(theme: Theme) {
       cornerRadius: 4,
       margin: { left: 6 },
       padding: { left: 4, right: 4 },
-      ...text(theme, "mono", "muted", { size: "xs", weight: "bold" })
+      ...text(theme, "mono", "muted", { size: "xs", weight: "bold" }),
     },
     maxTextWidth: 200,
-  }
-}
\ No newline at end of file
+  };
+}
diff --git a/styles/src/styleTree/updateNotification.ts b/styles/src/styleTree/updateNotification.ts
index 7a9ba196c0..53d8327331 100644
--- a/styles/src/styleTree/updateNotification.ts
+++ b/styles/src/styleTree/updateNotification.ts
@@ -7,14 +7,14 @@ export default function updateNotification(theme: Theme): Object {
   return {
     message: {
       ...text(theme, "sans", "primary", { size: "xs" }),
-      margin: { left: headerPadding, right: headerPadding }
+      margin: { left: headerPadding, right: headerPadding },
     },
     actionMessage: {
       ...text(theme, "sans", "secondary", { size: "xs" }),
       margin: { left: headerPadding, top: 6, bottom: 6 },
       hover: {
-        color: theme.textColor["active"]
-      }
+        color: theme.textColor["active"],
+      },
     },
     dismissButton: {
       color: iconColor(theme, "secondary"),
@@ -23,8 +23,8 @@ export default function updateNotification(theme: Theme): Object {
       buttonWidth: 8,
       buttonHeight: 8,
       hover: {
-        color: iconColor(theme, "primary")
-      }
-    }
-  }
-}
\ No newline at end of file
+        color: iconColor(theme, "primary"),
+      },
+    },
+  };
+}
diff --git a/styles/src/styleTree/workspace.ts b/styles/src/styleTree/workspace.ts
index 0e9762f321..6b0be34532 100644
--- a/styles/src/styleTree/workspace.ts
+++ b/styles/src/styleTree/workspace.ts
@@ -1,10 +1,16 @@
 import Theme from "../themes/common/theme";
 import { withOpacity } from "../utils/color";
-import { backgroundColor, border, iconColor, modalShadow, text } from "./components";
+import {
+  backgroundColor,
+  border,
+  iconColor,
+  modalShadow,
+  text,
+} from "./components";
 import statusBar from "./statusBar";
 
 export function workspaceBackground(theme: Theme) {
-  return backgroundColor(theme, 300)
+  return backgroundColor(theme, 300);
 }
 
 export default function workspace(theme: Theme) {
@@ -49,7 +55,7 @@ export default function workspace(theme: Theme) {
     },
     joiningProjectMessage: {
       padding: 12,
-      ...text(theme, "sans", "primary", { size: "lg" })
+      ...text(theme, "sans", "primary", { size: "lg" }),
     },
     leaderBorderOpacity: 0.7,
     leaderBorderWidth: 2.0,
@@ -58,21 +64,21 @@ export default function workspace(theme: Theme) {
     paneButton: {
       color: iconColor(theme, "secondary"),
       border: {
-        ...tab.border
+        ...tab.border,
       },
       iconWidth: 12,
       buttonWidth: tab.height,
       hover: {
         color: iconColor(theme, "active"),
         background: backgroundColor(theme, 300),
-      }
+      },
     },
     modal: {
       margin: {
         bottom: 52,
         top: 52,
       },
-      cursor: "Arrow"
+      cursor: "Arrow",
     },
     sidebarResizeHandle: {
       background: border(theme, "primary").color,
@@ -105,7 +111,7 @@ export default function workspace(theme: Theme) {
       avatarRibbon: {
         height: 3,
         width: 12,
-        // TODO: The background for this ideally should be 
+        // TODO: The background for this ideally should be
         // set with a token, not hardcoded in rust
       },
       border: border(theme, "primary", { bottom: true, overlay: true }),
@@ -127,7 +133,7 @@ export default function workspace(theme: Theme) {
           ...text(theme, "sans", "active", { size: "xs" }),
           background: backgroundColor(theme, "on300", "hovered"),
           border: border(theme, "primary"),
-        }
+        },
       },
       offlineIcon: {
         color: iconColor(theme, "secondary"),
@@ -192,6 +198,6 @@ export default function workspace(theme: Theme) {
     notifications: {
       width: 400,
       margin: { right: 10, bottom: 10 },
-    }
+    },
   };
 }
diff --git a/styles/src/themes/cave.ts b/styles/src/themes/cave.ts
index aab020d626..2e66f4baf4 100644
--- a/styles/src/themes/cave.ts
+++ b/styles/src/themes/cave.ts
@@ -25,4 +25,4 @@ const ramps = {
 };
 
 export const dark = createTheme(`${name}-dark`, false, ramps);
-export const light = createTheme(`${name}-light`, true, ramps);
\ No newline at end of file
+export const light = createTheme(`${name}-light`, true, ramps);
diff --git a/styles/src/themes/common/base16.ts b/styles/src/themes/common/base16.ts
index e7b71a49bb..a73ac7f0cf 100644
--- a/styles/src/themes/common/base16.ts
+++ b/styles/src/themes/common/base16.ts
@@ -1,5 +1,5 @@
 import chroma, { Color, Scale } from "chroma-js";
-import { fontWeights, } from "../../common";
+import { fontWeights } from "../../common";
 import { withOpacity } from "../../utils/color";
 import Theme, { buildPlayer, Syntax } from "./theme";
 
@@ -13,25 +13,33 @@ export function colorRamp(color: Color): Scale {
 export function createTheme(
   name: string,
   isLight: boolean,
-  color_ramps: { [rampName: string]: Scale },
+  color_ramps: { [rampName: string]: Scale }
 ): Theme {
   let ramps: typeof color_ramps = {};
   // Chromajs mutates the underlying ramp when you call domain. This causes problems because
-  // we now store the ramps object in the theme so that we can pull colors out of them. 
+  // we now store the ramps object in the theme so that we can pull colors out of them.
   // So instead of calling domain and storing the result, we have to construct new ramps for each
   // theme so that we don't modify the passed in ramps.
   // This combined with an error in the type definitions for chroma js means we have to cast the colors
   // function to any in order to get the colors back out from the original ramps.
   if (isLight) {
     for (var rampName in color_ramps) {
-      ramps[rampName] = chroma.scale((color_ramps[rampName].colors as any)()).domain([1, 0]);
+      ramps[rampName] = chroma
+        .scale((color_ramps[rampName].colors as any)())
+        .domain([1, 0]);
     }
-    ramps.neutral = chroma.scale((color_ramps.neutral.colors as any)()).domain([7, 0]);
+    ramps.neutral = chroma
+      .scale((color_ramps.neutral.colors as any)())
+      .domain([7, 0]);
   } else {
     for (var rampName in color_ramps) {
-      ramps[rampName] = chroma.scale((color_ramps[rampName].colors as any)()).domain([0, 1]);
+      ramps[rampName] = chroma
+        .scale((color_ramps[rampName].colors as any)())
+        .domain([0, 1]);
     }
-    ramps.neutral = chroma.scale((color_ramps.neutral.colors as any)()).domain([0, 7]);
+    ramps.neutral = chroma
+      .scale((color_ramps.neutral.colors as any)())
+      .domain([0, 7]);
   }
 
   let blend = isLight ? 0.12 : 0.24;
@@ -242,8 +250,12 @@ export function createTheme(
   };
 
   const shadow = withOpacity(
-    ramps.neutral(isLight ? 7 : 0).darken().hex(),
-    blend);
+    ramps
+      .neutral(isLight ? 7 : 0)
+      .darken()
+      .hex(),
+    blend
+  );
 
   return {
     name,
diff --git a/styles/src/themes/common/theme.ts b/styles/src/themes/common/theme.ts
index 7f32f48974..ac0902d8a2 100644
--- a/styles/src/themes/common/theme.ts
+++ b/styles/src/themes/common/theme.ts
@@ -61,7 +61,7 @@ export interface Syntax {
 
 export default interface Theme {
   name: string;
-  isLight: boolean,
+  isLight: boolean;
   backgroundColor: {
     // Basically just Title Bar
     // Lowest background level
@@ -155,7 +155,7 @@ export default interface Theme {
     6: Player;
     7: Player;
     8: Player;
-  },
+  };
   shadow: string;
   ramps: { [rampName: string]: Scale };
 }
diff --git a/styles/src/themes/one-dark.ts b/styles/src/themes/one-dark.ts
index 8f65dffd76..2fbabb5c80 100644
--- a/styles/src/themes/one-dark.ts
+++ b/styles/src/themes/one-dark.ts
@@ -2,25 +2,26 @@ import chroma from "chroma-js";
 import { colorRamp, createTheme } from "./common/base16";
 
 const name = "one";
-const author = "Chris Kempson (http://chriskempson.com)"
-const url = "https://github.com/chriskempson/base16-vim/blob/master/colors/base16-onedark.vim"
+const author = "Chris Kempson (http://chriskempson.com)";
+const url =
+  "https://github.com/chriskempson/base16-vim/blob/master/colors/base16-onedark.vim";
 
-const base00 = "#282c34"
-const base01 = "#353b45"
-const base02 = "#3e4451"
-const base03 = "#545862"
-const base04 = "#565c64"
-const base05 = "#abb2bf"
-const base06 = "#b6bdca"
-const base07 = "#c8ccd4"
-const base08 = "#e06c75"
-const base09 = "#d19a66"
-const base0A = "#e5c07b"
-const base0B = "#98c379"
-const base0C = "#56b6c2"
-const base0D = "#61afef"
-const base0E = "#c678dd"
-const base0F = "#be5046"
+const base00 = "#282c34";
+const base01 = "#353b45";
+const base02 = "#3e4451";
+const base03 = "#545862";
+const base04 = "#565c64";
+const base05 = "#abb2bf";
+const base06 = "#b6bdca";
+const base07 = "#c8ccd4";
+const base08 = "#e06c75";
+const base09 = "#d19a66";
+const base0A = "#e5c07b";
+const base0B = "#98c379";
+const base0C = "#56b6c2";
+const base0D = "#61afef";
+const base0E = "#c678dd";
+const base0F = "#be5046";
 
 const ramps = {
   neutral: chroma.scale([
@@ -31,7 +32,7 @@ const ramps = {
     base04,
     base05,
     base06,
-    base07
+    base07,
   ]),
   red: colorRamp(chroma(base08)),
   orange: colorRamp(chroma(base09)),
@@ -43,4 +44,4 @@ const ramps = {
   magenta: colorRamp(chroma(base0F)),
 };
 
-export const dark = createTheme(`${name}-dark`, false, ramps);
\ No newline at end of file
+export const dark = createTheme(`${name}-dark`, false, ramps);
diff --git a/styles/src/themes/one-light.ts b/styles/src/themes/one-light.ts
index d78f00ff55..7e468b9427 100644
--- a/styles/src/themes/one-light.ts
+++ b/styles/src/themes/one-light.ts
@@ -2,25 +2,26 @@ import chroma from "chroma-js";
 import { colorRamp, createTheme } from "./common/base16";
 
 const name = "one";
-const author = "Daniel Pfeifer (http://github.com/purpleKarrot)"
-const url = "https://github.com/purpleKarrot/base16-one-light-scheme/blob/master/one-light.yaml"
+const author = "Daniel Pfeifer (http://github.com/purpleKarrot)";
+const url =
+  "https://github.com/purpleKarrot/base16-one-light-scheme/blob/master/one-light.yaml";
 
-const base00 = "#090a0b"
-const base01 = "#202227"
-const base02 = "#383a42"
-const base03 = "#a0a1a7"
-const base04 = "#696c77"
-const base05 = "#a0a1a7"
-const base06 = "#e5e5e6"
-const base07 = "#f0f0f1"
-const base08 = "#fafafa"
-const base09 = "#d75f00"
-const base0A = "#c18401"
-const base0B = "#50a14f"
-const base0C = "#0184bc"
-const base0D = "#4078f2"
-const base0E = "#a626a4"
-const base0F = "#986801"
+const base00 = "#090a0b";
+const base01 = "#202227";
+const base02 = "#383a42";
+const base03 = "#a0a1a7";
+const base04 = "#696c77";
+const base05 = "#a0a1a7";
+const base06 = "#e5e5e6";
+const base07 = "#f0f0f1";
+const base08 = "#fafafa";
+const base09 = "#d75f00";
+const base0A = "#c18401";
+const base0B = "#50a14f";
+const base0C = "#0184bc";
+const base0D = "#4078f2";
+const base0E = "#a626a4";
+const base0F = "#986801";
 
 const ramps = {
   neutral: chroma.scale([
@@ -31,7 +32,7 @@ const ramps = {
     base04,
     base05,
     base06,
-    base07
+    base07,
   ]),
   red: colorRamp(chroma(base08)),
   orange: colorRamp(chroma(base09)),
@@ -43,4 +44,4 @@ const ramps = {
   magenta: colorRamp(chroma(base0F)),
 };
 
-export const light = createTheme(`${name}-light`, true, ramps);
\ No newline at end of file
+export const light = createTheme(`${name}-light`, true, ramps);
diff --git a/styles/src/utils/snakeCase.ts b/styles/src/utils/snakeCase.ts
index 85a038c663..b95c28d89f 100644
--- a/styles/src/utils/snakeCase.ts
+++ b/styles/src/utils/snakeCase.ts
@@ -3,21 +3,21 @@ import { snakeCase } from "case-anything";
 // https://stackoverflow.com/questions/60269936/typescript-convert-generic-object-from-snake-to-camel-case
 
 // Typescript magic to convert any string from camelCase to snake_case at compile time
-type SnakeCase<S> =
-  S extends string ?
-  S extends `${infer T}${infer U}` ?
-  `${T extends Capitalize<T> ? "_" : ""}${Lowercase<T>}${SnakeCase<U>}` :
-  S :
-  S;
+type SnakeCase<S> = S extends string
+  ? S extends `${infer T}${infer U}`
+    ? `${T extends Capitalize<T> ? "_" : ""}${Lowercase<T>}${SnakeCase<U>}`
+    : S
+  : S;
 
 type SnakeCased<Type> = {
-  [Property in keyof Type as SnakeCase<Property>]: SnakeCased<Type[Property]>
-}
+  [Property in keyof Type as SnakeCase<Property>]: SnakeCased<Type[Property]>;
+};
 
 export default function snakeCaseTree<T>(object: T): SnakeCased<T> {
   const snakeObject: any = {};
   for (const key in object) {
-    snakeObject[snakeCase(key, { keepSpecialCharacters: true })] = snakeCaseValue(object[key]);
+    snakeObject[snakeCase(key, { keepSpecialCharacters: true })] =
+      snakeCaseValue(object[key]);
   }
   return snakeObject;
 }
diff --git a/styles/tsconfig.json b/styles/tsconfig.json
index fa3e3062c9..fc09fdb0a4 100644
--- a/styles/tsconfig.json
+++ b/styles/tsconfig.json
@@ -1,14 +1,12 @@
 {
-    "compilerOptions": {
-        "target": "es2015",
-        "module": "commonjs",
-        "esModuleInterop": true,
-        "noImplicitAny": true,
-        "removeComments": true,
-        "preserveConstEnums": true,
-        "sourceMap": true
-    },
-    "exclude": [
-        "node_modules"
-    ]
+  "compilerOptions": {
+    "target": "es2015",
+    "module": "commonjs",
+    "esModuleInterop": true,
+    "noImplicitAny": true,
+    "removeComments": true,
+    "preserveConstEnums": true,
+    "sourceMap": true
+  },
+  "exclude": ["node_modules"]
 }

From 8add81350eeb37c8929a4aff78931b96276c71f2 Mon Sep 17 00:00:00 2001
From: K Simmons <keith@zed.dev>
Date: Sun, 17 Jul 2022 23:19:32 -0700
Subject: [PATCH 07/22] Rework presenter and MouseRegion to use Handler hashmap
 rather than individual fields

---
 .../src/activity_indicator.rs                 |   6 +-
 crates/auto_update/src/update_notification.rs |   8 +-
 crates/chat_panel/src/chat_panel.rs           |   6 +-
 crates/contacts_panel/src/contacts_panel.rs   |  29 +-
 crates/contacts_panel/src/notifications.rs    |  10 +-
 crates/context_menu/src/context_menu.rs       |  10 +-
 crates/diagnostics/src/items.rs               |  10 +-
 crates/editor/src/editor.rs                   |  10 +-
 crates/editor/src/element.rs                  |  12 +-
 crates/gpui/src/app.rs                        |   4 +-
 crates/gpui/src/elements/event_handler.rs     |  28 +-
 .../gpui/src/elements/mouse_event_handler.rs  |  93 ++-----
 crates/gpui/src/elements/tooltip.rs           |   6 +-
 crates/gpui/src/platform/event.rs             |  40 ++-
 crates/gpui/src/platform/mac/event.rs         |   8 +-
 crates/gpui/src/platform/mac/window.rs        |   4 +-
 crates/gpui/src/presenter.rs                  | 209 ++++++---------
 crates/gpui/src/scene.rs                      | 250 ++++++++++++++++--
 crates/gpui/src/views/select.rs               |  10 +-
 crates/picker/src/picker.rs                   |   8 +-
 crates/project_panel/src/project_panel.rs     |  54 ++--
 crates/search/src/buffer_search.rs            |  12 +-
 crates/search/src/project_search.rs           |  12 +-
 crates/terminal/src/terminal_element.rs       | 119 +++++----
 crates/workspace/src/pane.rs                  |  20 +-
 crates/workspace/src/sidebar.rs               |  38 +--
 crates/workspace/src/toolbar.rs               |   6 +-
 crates/workspace/src/workspace.rs             |  10 +-
 crates/zed/src/feedback.rs                    |   4 +-
 styles/package-lock.json                      |   1 +
 30 files changed, 616 insertions(+), 421 deletions(-)

diff --git a/crates/activity_indicator/src/activity_indicator.rs b/crates/activity_indicator/src/activity_indicator.rs
index 8bc84f911c..8de3ceda3c 100644
--- a/crates/activity_indicator/src/activity_indicator.rs
+++ b/crates/activity_indicator/src/activity_indicator.rs
@@ -3,7 +3,7 @@ use editor::Editor;
 use futures::StreamExt;
 use gpui::{
     actions, elements::*, platform::CursorStyle, Action, AppContext, Entity, ModelHandle,
-    MutableAppContext, RenderContext, View, ViewContext, ViewHandle,
+    MouseButton, MutableAppContext, RenderContext, View, ViewContext, ViewHandle,
 };
 use language::{LanguageRegistry, LanguageServerBinaryStatus};
 use project::{LanguageServerProgress, Project};
@@ -317,7 +317,9 @@ impl View for ActivityIndicator {
         if let Some(action) = action {
             element = element
                 .with_cursor_style(CursorStyle::PointingHand)
-                .on_click(move |_, _, cx| cx.dispatch_any_action(action.boxed_clone()));
+                .on_click(MouseButton::Left, move |_, cx| {
+                    cx.dispatch_any_action(action.boxed_clone())
+                });
         }
 
         element.boxed()
diff --git a/crates/auto_update/src/update_notification.rs b/crates/auto_update/src/update_notification.rs
index e9c73ef4bc..7863fe900d 100644
--- a/crates/auto_update/src/update_notification.rs
+++ b/crates/auto_update/src/update_notification.rs
@@ -2,7 +2,7 @@ use crate::ViewReleaseNotes;
 use gpui::{
     elements::{Flex, MouseEventHandler, Padding, ParentElement, Svg, Text},
     platform::{AppVersion, CursorStyle},
-    Element, Entity, View, ViewContext,
+    Element, Entity, MouseButton, View, ViewContext,
 };
 use menu::Cancel;
 use settings::Settings;
@@ -62,7 +62,7 @@ impl View for UpdateNotification {
                                     .boxed()
                             })
                             .with_padding(Padding::uniform(5.))
-                            .on_click(move |_, _, cx| cx.dispatch_action(Cancel))
+                            .on_click(MouseButton::Left, move |_, cx| cx.dispatch_action(Cancel))
                             .aligned()
                             .constrained()
                             .with_height(cx.font_cache().line_height(theme.message.text.font_size))
@@ -84,7 +84,9 @@ impl View for UpdateNotification {
                 .boxed()
         })
         .with_cursor_style(CursorStyle::PointingHand)
-        .on_click(|_, _, cx| cx.dispatch_action(ViewReleaseNotes))
+        .on_click(MouseButton::Left, |_, cx| {
+            cx.dispatch_action(ViewReleaseNotes)
+        })
         .boxed()
     }
 }
diff --git a/crates/chat_panel/src/chat_panel.rs b/crates/chat_panel/src/chat_panel.rs
index a8db280bf8..fa913971df 100644
--- a/crates/chat_panel/src/chat_panel.rs
+++ b/crates/chat_panel/src/chat_panel.rs
@@ -8,8 +8,8 @@ use gpui::{
     elements::*,
     platform::CursorStyle,
     views::{ItemType, Select, SelectStyle},
-    AppContext, Entity, ModelHandle, MutableAppContext, RenderContext, Subscription, Task, View,
-    ViewContext, ViewHandle,
+    AppContext, Entity, ModelHandle, MouseButton, MutableAppContext, RenderContext, Subscription,
+    Task, View, ViewContext, ViewHandle,
 };
 use menu::Confirm;
 use postage::prelude::Stream;
@@ -320,7 +320,7 @@ impl ChatPanel {
                 .boxed()
             })
             .with_cursor_style(CursorStyle::PointingHand)
-            .on_click(move |_, _, cx| {
+            .on_click(MouseButton::Left, move |_, cx| {
                 let rpc = rpc.clone();
                 let this = this.clone();
                 cx.spawn(|mut cx| async move {
diff --git a/crates/contacts_panel/src/contacts_panel.rs b/crates/contacts_panel/src/contacts_panel.rs
index f4010a1278..9fc8f5f22d 100644
--- a/crates/contacts_panel/src/contacts_panel.rs
+++ b/crates/contacts_panel/src/contacts_panel.rs
@@ -13,8 +13,9 @@ use gpui::{
     geometry::{rect::RectF, vector::vec2f},
     impl_actions, impl_internal_actions,
     platform::CursorStyle,
-    AppContext, ClipboardItem, Element, ElementBox, Entity, ModelHandle, MutableAppContext,
-    RenderContext, Subscription, View, ViewContext, ViewHandle, WeakModelHandle, WeakViewHandle,
+    AppContext, ClipboardItem, Element, ElementBox, Entity, ModelHandle, MouseButton,
+    MutableAppContext, RenderContext, Subscription, View, ViewContext, ViewHandle, WeakModelHandle,
+    WeakViewHandle,
 };
 use join_project_notification::JoinProjectNotification;
 use menu::{Confirm, SelectNext, SelectPrev};
@@ -310,7 +311,9 @@ impl ContactsPanel {
                 .boxed()
         })
         .with_cursor_style(CursorStyle::PointingHand)
-        .on_click(move |_, _, cx| cx.dispatch_action(ToggleExpanded(section)))
+        .on_click(MouseButton::Left, move |_, cx| {
+            cx.dispatch_action(ToggleExpanded(section))
+        })
         .boxed()
     }
 
@@ -445,7 +448,7 @@ impl ContactsPanel {
                                 Some(
                                     button
                                         .with_cursor_style(CursorStyle::PointingHand)
-                                        .on_click(move |_, _, cx| {
+                                        .on_click(MouseButton::Left, move |_, cx| {
                                             cx.dispatch_action(ToggleProjectOnline {
                                                 project: Some(open_project.clone()),
                                             })
@@ -499,7 +502,7 @@ impl ContactsPanel {
         } else {
             CursorStyle::Arrow
         })
-        .on_click(move |_, _, cx| {
+        .on_click(MouseButton::Left, move |_, cx| {
             if !is_host {
                 cx.dispatch_global_action(JoinProject {
                     contact: contact.clone(),
@@ -563,7 +566,7 @@ impl ContactsPanel {
                     } else {
                         button
                             .with_cursor_style(CursorStyle::PointingHand)
-                            .on_click(move |_, _, cx| {
+                            .on_click(MouseButton::Left, move |_, cx| {
                                 let project = project_handle.upgrade(cx.deref_mut());
                                 cx.dispatch_action(ToggleProjectOnline { project })
                             })
@@ -646,7 +649,7 @@ impl ContactsPanel {
                         .boxed()
                 })
                 .with_cursor_style(CursorStyle::PointingHand)
-                .on_click(move |_, _, cx| {
+                .on_click(MouseButton::Left, move |_, cx| {
                     cx.dispatch_action(RespondToContactRequest {
                         user_id,
                         accept: false,
@@ -668,7 +671,7 @@ impl ContactsPanel {
                         .boxed()
                 })
                 .with_cursor_style(CursorStyle::PointingHand)
-                .on_click(move |_, _, cx| {
+                .on_click(MouseButton::Left, move |_, cx| {
                     cx.dispatch_action(RespondToContactRequest {
                         user_id,
                         accept: true,
@@ -691,7 +694,9 @@ impl ContactsPanel {
                 })
                 .with_padding(Padding::uniform(2.))
                 .with_cursor_style(CursorStyle::PointingHand)
-                .on_click(move |_, _, cx| cx.dispatch_action(RemoveContact(user_id)))
+                .on_click(MouseButton::Left, move |_, cx| {
+                    cx.dispatch_action(RemoveContact(user_id))
+                })
                 .flex_float()
                 .boxed(),
             );
@@ -1078,7 +1083,9 @@ impl View for ContactsPanel {
                                     .boxed()
                             })
                             .with_cursor_style(CursorStyle::PointingHand)
-                            .on_click(|_, _, cx| cx.dispatch_action(contact_finder::Toggle))
+                            .on_click(MouseButton::Left, |_, cx| {
+                                cx.dispatch_action(contact_finder::Toggle)
+                            })
                             .boxed(),
                         )
                         .constrained()
@@ -1126,7 +1133,7 @@ impl View for ContactsPanel {
                                         },
                                     )
                                     .with_cursor_style(CursorStyle::PointingHand)
-                                    .on_click(move |_, _, cx| {
+                                    .on_click(MouseButton::Left, move |_, cx| {
                                         cx.write_to_clipboard(ClipboardItem::new(
                                             info.url.to_string(),
                                         ));
diff --git a/crates/contacts_panel/src/notifications.rs b/crates/contacts_panel/src/notifications.rs
index c02fd73b8f..a80dafdd22 100644
--- a/crates/contacts_panel/src/notifications.rs
+++ b/crates/contacts_panel/src/notifications.rs
@@ -3,7 +3,7 @@ use client::User;
 use gpui::{
     elements::{Flex, Image, Label, MouseEventHandler, Padding, ParentElement, Text},
     platform::CursorStyle,
-    Action, Element, ElementBox, RenderContext, View,
+    Action, Element, ElementBox, MouseButton, RenderContext, View,
 };
 use settings::Settings;
 use std::sync::Arc;
@@ -61,7 +61,9 @@ pub fn render_user_notification<V: View, A: Action + Clone>(
                     })
                     .with_cursor_style(CursorStyle::PointingHand)
                     .with_padding(Padding::uniform(5.))
-                    .on_click(move |_, _, cx| cx.dispatch_any_action(dismiss_action.boxed_clone()))
+                    .on_click(MouseButton::Left, move |_, cx| {
+                        cx.dispatch_any_action(dismiss_action.boxed_clone())
+                    })
                     .aligned()
                     .constrained()
                     .with_height(
@@ -96,7 +98,9 @@ pub fn render_user_notification<V: View, A: Action + Clone>(
                                     .boxed()
                             })
                             .with_cursor_style(CursorStyle::PointingHand)
-                            .on_click(move |_, _, cx| cx.dispatch_any_action(action.boxed_clone()))
+                            .on_click(MouseButton::Left, move |_, cx| {
+                                cx.dispatch_any_action(action.boxed_clone())
+                            })
                             .boxed()
                         },
                     ))
diff --git a/crates/context_menu/src/context_menu.rs b/crates/context_menu/src/context_menu.rs
index 39477bc927..7bfe3bb2e8 100644
--- a/crates/context_menu/src/context_menu.rs
+++ b/crates/context_menu/src/context_menu.rs
@@ -1,7 +1,7 @@
 use gpui::{
     elements::*, geometry::vector::Vector2F, impl_internal_actions, keymap, platform::CursorStyle,
-    Action, AppContext, Axis, Entity, MutableAppContext, RenderContext, SizeConstraint,
-    Subscription, View, ViewContext,
+    Action, AppContext, Axis, Entity, MouseButton, MutableAppContext, RenderContext,
+    SizeConstraint, Subscription, View, ViewContext,
 };
 use menu::*;
 use settings::Settings;
@@ -337,7 +337,7 @@ impl ContextMenu {
                                     .boxed()
                             })
                             .with_cursor_style(CursorStyle::PointingHand)
-                            .on_click(move |_, _, cx| {
+                            .on_click(MouseButton::Left, move |_, cx| {
                                 cx.dispatch_action(Clicked);
                                 cx.dispatch_any_action(action.boxed_clone());
                             })
@@ -355,7 +355,7 @@ impl ContextMenu {
                 .with_style(style.container)
                 .boxed()
         })
-        .on_mouse_down_out(|_, cx| cx.dispatch_action(Cancel))
-        .on_right_mouse_down_out(|_, cx| cx.dispatch_action(Cancel))
+        .on_mouse_down_out(MouseButton::Left, |_, cx| cx.dispatch_action(Cancel))
+        .on_mouse_down_out(MouseButton::Right, |_, cx| cx.dispatch_action(Cancel))
     }
 }
diff --git a/crates/diagnostics/src/items.rs b/crates/diagnostics/src/items.rs
index e2961ff3bd..b7c4b2a22d 100644
--- a/crates/diagnostics/src/items.rs
+++ b/crates/diagnostics/src/items.rs
@@ -1,8 +1,8 @@
 use collections::HashSet;
 use editor::{Editor, GoToNextDiagnostic};
 use gpui::{
-    elements::*, platform::CursorStyle, serde_json, Entity, ModelHandle, MutableAppContext,
-    RenderContext, Subscription, View, ViewContext, ViewHandle, WeakViewHandle,
+    elements::*, platform::CursorStyle, serde_json, Entity, ModelHandle, MouseButton,
+    MutableAppContext, RenderContext, Subscription, View, ViewContext, ViewHandle, WeakViewHandle,
 };
 use language::Diagnostic;
 use project::Project;
@@ -161,7 +161,7 @@ impl View for DiagnosticIndicator {
                     .boxed()
             })
             .with_cursor_style(CursorStyle::PointingHand)
-            .on_click(|_, _, cx| cx.dispatch_action(crate::Deploy))
+            .on_click(MouseButton::Left, |_, cx| cx.dispatch_action(crate::Deploy))
             .with_tooltip::<Summary, _>(
                 0,
                 "Project Diagnostics".to_string(),
@@ -201,7 +201,9 @@ impl View for DiagnosticIndicator {
                     .boxed()
                 })
                 .with_cursor_style(CursorStyle::PointingHand)
-                .on_click(|_, _, cx| cx.dispatch_action(GoToNextDiagnostic))
+                .on_click(MouseButton::Left, |_, cx| {
+                    cx.dispatch_action(GoToNextDiagnostic)
+                })
                 .boxed(),
             );
         }
diff --git a/crates/editor/src/editor.rs b/crates/editor/src/editor.rs
index 72ba6d60af..321c94e2bd 100644
--- a/crates/editor/src/editor.rs
+++ b/crates/editor/src/editor.rs
@@ -30,8 +30,8 @@ use gpui::{
     impl_actions, impl_internal_actions,
     platform::CursorStyle,
     text_layout, AppContext, AsyncAppContext, ClipboardItem, Element, ElementBox, Entity,
-    ModelHandle, MutableAppContext, RenderContext, Subscription, Task, View, ViewContext,
-    ViewHandle, WeakViewHandle,
+    ModelHandle, MouseButton, MutableAppContext, RenderContext, Subscription, Task, View,
+    ViewContext, ViewHandle, WeakViewHandle,
 };
 use highlight_matching_bracket::refresh_matching_bracket_highlights;
 use hover_popover::{hide_hover, HoverState};
@@ -707,7 +707,7 @@ impl CompletionsMenu {
                             },
                         )
                         .with_cursor_style(CursorStyle::PointingHand)
-                        .on_mouse_down(move |_, cx| {
+                        .on_mouse_down(MouseButton::Left, move |_, cx| {
                             cx.dispatch_action(ConfirmCompletion {
                                 item_ix: Some(item_ix),
                             });
@@ -840,7 +840,7 @@ impl CodeActionsMenu {
                                 .boxed()
                         })
                         .with_cursor_style(CursorStyle::PointingHand)
-                        .on_mouse_down(move |_, cx| {
+                        .on_mouse_down(MouseButton::Left, move |_, cx| {
                             cx.dispatch_action(ConfirmCodeAction {
                                 item_ix: Some(item_ix),
                             });
@@ -2674,7 +2674,7 @@ impl Editor {
                 })
                 .with_cursor_style(CursorStyle::PointingHand)
                 .with_padding(Padding::uniform(3.))
-                .on_mouse_down(|_, cx| {
+                .on_mouse_down(MouseButton::Left, |_, cx| {
                     cx.dispatch_action(ToggleCodeActions {
                         deployed_from_indicator: true,
                     });
diff --git a/crates/editor/src/element.rs b/crates/editor/src/element.rs
index 99d60ed9a2..013de1e7df 100644
--- a/crates/editor/src/element.rs
+++ b/crates/editor/src/element.rs
@@ -25,7 +25,7 @@ use gpui::{
     platform::CursorStyle,
     text_layout::{self, Line, RunStyle, TextLayoutCache},
     AppContext, Axis, Border, CursorRegion, Element, ElementBox, Event, EventContext, KeyDownEvent,
-    LayoutContext, ModifiersChangedEvent, MouseButton, MouseEvent, MouseMovedEvent,
+    LayoutContext, ModifiersChangedEvent, MouseButton, MouseButtonEvent, MouseMovedEvent,
     MutableAppContext, PaintContext, Quad, Scene, ScrollWheelEvent, SizeConstraint, ViewContext,
     WeakViewHandle,
 };
@@ -968,7 +968,9 @@ impl EditorElement {
                                     .boxed()
                             })
                             .with_cursor_style(CursorStyle::PointingHand)
-                            .on_click(move |_, _, cx| cx.dispatch_action(jump_action.clone()))
+                            .on_click(MouseButton::Left, move |_, cx| {
+                                cx.dispatch_action(jump_action.clone())
+                            })
                             .with_tooltip::<JumpIcon, _>(
                                 *key,
                                 "Jump to Buffer".to_string(),
@@ -1483,7 +1485,7 @@ impl Element for EditorElement {
         }
 
         match event {
-            Event::MouseDown(MouseEvent {
+            Event::MouseDown(MouseButtonEvent {
                 button: MouseButton::Left,
                 position,
                 cmd,
@@ -1501,12 +1503,12 @@ impl Element for EditorElement {
                 paint,
                 cx,
             ),
-            Event::MouseDown(MouseEvent {
+            Event::MouseDown(MouseButtonEvent {
                 button: MouseButton::Right,
                 position,
                 ..
             }) => self.mouse_right_down(*position, layout, paint, cx),
-            Event::MouseUp(MouseEvent {
+            Event::MouseUp(MouseButtonEvent {
                 button: MouseButton::Left,
                 position,
                 ..
diff --git a/crates/gpui/src/app.rs b/crates/gpui/src/app.rs
index 075339bba1..2cd6687bcb 100644
--- a/crates/gpui/src/app.rs
+++ b/crates/gpui/src/app.rs
@@ -5401,7 +5401,7 @@ impl RefCounts {
 #[cfg(test)]
 mod tests {
     use super::*;
-    use crate::{actions, elements::*, impl_actions, MouseButton, MouseEvent};
+    use crate::{actions, elements::*, impl_actions, MouseButton, MouseButtonEvent};
     use serde::Deserialize;
     use smol::future::poll_once;
     use std::{
@@ -5754,7 +5754,7 @@ mod tests {
         let presenter = cx.presenters_and_platform_windows[&window_id].0.clone();
         // Ensure window's root element is in a valid lifecycle state.
         presenter.borrow_mut().dispatch_event(
-            Event::MouseDown(MouseEvent {
+            Event::MouseDown(MouseButtonEvent {
                 position: Default::default(),
                 button: MouseButton::Left,
                 ctrl: false,
diff --git a/crates/gpui/src/elements/event_handler.rs b/crates/gpui/src/elements/event_handler.rs
index 1fec838788..55e4928ad8 100644
--- a/crates/gpui/src/elements/event_handler.rs
+++ b/crates/gpui/src/elements/event_handler.rs
@@ -1,11 +1,11 @@
 use crate::{
     geometry::vector::Vector2F, CursorRegion, DebugContext, Element, ElementBox, Event,
-    EventContext, LayoutContext, MouseButton, MouseEvent, MouseRegion, NavigationDirection,
+    EventContext, LayoutContext, MouseButton, MouseButtonEvent, MouseRegion, NavigationDirection,
     PaintContext, SizeConstraint,
 };
 use pathfinder_geometry::rect::RectF;
 use serde_json::json;
-use std::{any::TypeId, rc::Rc};
+use std::any::TypeId;
 
 pub struct EventHandler {
     child: ElementBox,
@@ -82,19 +82,11 @@ impl Element for EventHandler {
                 bounds: visible_bounds,
                 style: Default::default(),
             });
-            cx.scene.push_mouse_region(MouseRegion {
-                view_id: cx.current_view_id(),
-                discriminant: Some(discriminant),
-                bounds: visible_bounds,
-                hover: Some(Rc::new(|_, _, _| {})),
-                mouse_down: Some(Rc::new(|_, _| {})),
-                click: Some(Rc::new(|_, _, _| {})),
-                right_mouse_down: Some(Rc::new(|_, _| {})),
-                right_click: Some(Rc::new(|_, _, _| {})),
-                drag: Some(Rc::new(|_, _, _| {})),
-                mouse_down_out: Some(Rc::new(|_, _| {})),
-                right_mouse_down_out: Some(Rc::new(|_, _| {})),
-            });
+            cx.scene.push_mouse_region(MouseRegion::handle_all(
+                cx.current_view_id(),
+                Some(discriminant),
+                visible_bounds,
+            ));
             cx.scene.pop_stacking_context();
         }
         self.child.paint(bounds.origin(), visible_bounds, cx);
@@ -117,7 +109,7 @@ impl Element for EventHandler {
             true
         } else {
             match event {
-                Event::MouseDown(MouseEvent {
+                Event::MouseDown(MouseButtonEvent {
                     button: MouseButton::Left,
                     position,
                     ..
@@ -129,7 +121,7 @@ impl Element for EventHandler {
                     }
                     false
                 }
-                Event::MouseDown(MouseEvent {
+                Event::MouseDown(MouseButtonEvent {
                     button: MouseButton::Right,
                     position,
                     ..
@@ -141,7 +133,7 @@ impl Element for EventHandler {
                     }
                     false
                 }
-                Event::MouseDown(MouseEvent {
+                Event::MouseDown(MouseButtonEvent {
                     button: MouseButton::Navigate(direction),
                     position,
                     ..
diff --git a/crates/gpui/src/elements/mouse_event_handler.rs b/crates/gpui/src/elements/mouse_event_handler.rs
index 832aafaa9e..3a8a5f6d63 100644
--- a/crates/gpui/src/elements/mouse_event_handler.rs
+++ b/crates/gpui/src/elements/mouse_event_handler.rs
@@ -1,4 +1,4 @@
-use std::{any::TypeId, rc::Rc};
+use std::any::TypeId;
 
 use super::Padding;
 use crate::{
@@ -8,24 +8,16 @@ use crate::{
     },
     platform::CursorStyle,
     scene::CursorRegion,
-    DebugContext, Element, ElementBox, Event, EventContext, LayoutContext, MouseRegion, MouseState,
-    PaintContext, RenderContext, SizeConstraint, View,
+    DebugContext, Element, ElementBox, Event, EventContext, LayoutContext, MouseButton,
+    MouseButtonEvent, MouseMovedEvent, MouseRegion, MouseState, PaintContext, RenderContext,
+    SizeConstraint, View,
 };
 use serde_json::json;
 
 pub struct MouseEventHandler {
     child: ElementBox,
-    tag: TypeId,
-    id: usize,
     cursor_style: Option<CursorStyle>,
-    mouse_down: Option<Rc<dyn Fn(Vector2F, &mut EventContext)>>,
-    click: Option<Rc<dyn Fn(Vector2F, usize, &mut EventContext)>>,
-    right_mouse_down: Option<Rc<dyn Fn(Vector2F, &mut EventContext)>>,
-    right_click: Option<Rc<dyn Fn(Vector2F, usize, &mut EventContext)>>,
-    mouse_down_out: Option<Rc<dyn Fn(Vector2F, &mut EventContext)>>,
-    right_mouse_down_out: Option<Rc<dyn Fn(Vector2F, &mut EventContext)>>,
-    drag: Option<Rc<dyn Fn(Vector2F, Vector2F, &mut EventContext)>>,
-    hover: Option<Rc<dyn Fn(Vector2F, bool, &mut EventContext)>>,
+    region: MouseRegion,
     padding: Padding,
 }
 
@@ -37,18 +29,9 @@ impl MouseEventHandler {
         F: FnOnce(MouseState, &mut RenderContext<V>) -> ElementBox,
     {
         Self {
-            id,
-            tag: TypeId::of::<Tag>(),
             child: render_child(cx.mouse_state::<Tag>(id), cx),
             cursor_style: None,
-            mouse_down: None,
-            click: None,
-            right_mouse_down: None,
-            right_click: None,
-            mouse_down_out: None,
-            right_mouse_down_out: None,
-            drag: None,
-            hover: None,
+            region: MouseRegion::new(0, Some((TypeId::of::<Tag>(), id)), Default::default()),
             padding: Default::default(),
         }
     }
@@ -60,65 +43,45 @@ impl MouseEventHandler {
 
     pub fn on_mouse_down(
         mut self,
-        handler: impl Fn(Vector2F, &mut EventContext) + 'static,
+        button: MouseButton,
+        handler: impl Fn(MouseButtonEvent, &mut EventContext) + 'static,
     ) -> Self {
-        self.mouse_down = Some(Rc::new(handler));
+        self.region = self.region.on_down(button, handler);
         self
     }
 
     pub fn on_click(
         mut self,
-        handler: impl Fn(Vector2F, usize, &mut EventContext) + 'static,
+        button: MouseButton,
+        handler: impl Fn(MouseButtonEvent, &mut EventContext) + 'static,
     ) -> Self {
-        self.click = Some(Rc::new(handler));
-        self
-    }
-
-    pub fn on_right_mouse_down(
-        mut self,
-        handler: impl Fn(Vector2F, &mut EventContext) + 'static,
-    ) -> Self {
-        self.right_mouse_down = Some(Rc::new(handler));
-        self
-    }
-
-    pub fn on_right_click(
-        mut self,
-        handler: impl Fn(Vector2F, usize, &mut EventContext) + 'static,
-    ) -> Self {
-        self.right_click = Some(Rc::new(handler));
+        self.region = self.region.on_click(button, handler);
         self
     }
 
     pub fn on_mouse_down_out(
         mut self,
-        handler: impl Fn(Vector2F, &mut EventContext) + 'static,
+        button: MouseButton,
+        handler: impl Fn(MouseButtonEvent, &mut EventContext) + 'static,
     ) -> Self {
-        self.mouse_down_out = Some(Rc::new(handler));
-        self
-    }
-
-    pub fn on_right_mouse_down_out(
-        mut self,
-        handler: impl Fn(Vector2F, &mut EventContext) + 'static,
-    ) -> Self {
-        self.right_mouse_down_out = Some(Rc::new(handler));
+        self.region = self.region.on_down_out(button, handler);
         self
     }
 
     pub fn on_drag(
         mut self,
-        handler: impl Fn(Vector2F, Vector2F, &mut EventContext) + 'static,
+        button: MouseButton,
+        handler: impl Fn(Vector2F, MouseMovedEvent, &mut EventContext) + 'static,
     ) -> Self {
-        self.drag = Some(Rc::new(handler));
+        self.region = self.region.on_drag(button, handler);
         self
     }
 
     pub fn on_hover(
         mut self,
-        handler: impl Fn(Vector2F, bool, &mut EventContext) + 'static,
+        handler: impl Fn(bool, MouseMovedEvent, &mut EventContext) + 'static,
     ) -> Self {
-        self.hover = Some(Rc::new(handler));
+        self.region = self.region.on_hover(handler);
         self
     }
 
@@ -163,19 +126,9 @@ impl Element for MouseEventHandler {
             });
         }
 
-        cx.scene.push_mouse_region(MouseRegion {
-            view_id: cx.current_view_id(),
-            discriminant: Some((self.tag, self.id)),
-            bounds: hit_bounds,
-            hover: self.hover.clone(),
-            click: self.click.clone(),
-            mouse_down: self.mouse_down.clone(),
-            right_click: self.right_click.clone(),
-            right_mouse_down: self.right_mouse_down.clone(),
-            mouse_down_out: self.mouse_down_out.clone(),
-            right_mouse_down_out: self.right_mouse_down_out.clone(),
-            drag: self.drag.clone(),
-        });
+        self.region.view_id = cx.current_view_id();
+        self.region.bounds = hit_bounds;
+        cx.scene.push_mouse_region(self.region.clone());
 
         self.child.paint(bounds.origin(), visible_bounds, cx);
     }
diff --git a/crates/gpui/src/elements/tooltip.rs b/crates/gpui/src/elements/tooltip.rs
index 9a65b2661d..572d142521 100644
--- a/crates/gpui/src/elements/tooltip.rs
+++ b/crates/gpui/src/elements/tooltip.rs
@@ -6,8 +6,8 @@ use crate::{
     fonts::TextStyle,
     geometry::{rect::RectF, vector::Vector2F},
     json::json,
-    Action, Axis, ElementStateHandle, LayoutContext, PaintContext, RenderContext, SizeConstraint,
-    Task, View,
+    Action, Axis, ElementStateHandle, LayoutContext, MouseMovedEvent, PaintContext, RenderContext,
+    SizeConstraint, Task, View,
 };
 use serde::Deserialize;
 use std::{
@@ -91,7 +91,7 @@ impl Tooltip {
         };
         let child =
             MouseEventHandler::new::<MouseEventHandlerState<Tag>, _, _>(id, cx, |_, _| child)
-                .on_hover(move |position, hover, cx| {
+                .on_hover(move |hover, MouseMovedEvent { position, .. }, cx| {
                     let window_id = cx.window_id();
                     if let Some(view_id) = cx.view_id() {
                         if hover {
diff --git a/crates/gpui/src/platform/event.rs b/crates/gpui/src/platform/event.rs
index 90b5d21fc2..57e945175b 100644
--- a/crates/gpui/src/platform/event.rs
+++ b/crates/gpui/src/platform/event.rs
@@ -21,20 +21,26 @@ pub struct ModifiersChangedEvent {
     pub cmd: bool,
 }
 
-#[derive(Clone, Debug)]
+#[derive(Clone, Debug, Default)]
 pub struct ScrollWheelEvent {
     pub position: Vector2F,
     pub delta: Vector2F,
     pub precise: bool,
 }
 
-#[derive(Copy, Clone, Debug)]
+#[derive(Hash, PartialEq, Eq, Copy, Clone, Debug)]
 pub enum NavigationDirection {
     Back,
     Forward,
 }
 
-#[derive(Copy, Clone, Debug)]
+impl Default for NavigationDirection {
+    fn default() -> Self {
+        Self::Back
+    }
+}
+
+#[derive(Hash, PartialEq, Eq, Copy, Clone, Debug)]
 pub enum MouseButton {
     Left,
     Right,
@@ -42,8 +48,26 @@ pub enum MouseButton {
     Navigate(NavigationDirection),
 }
 
-#[derive(Clone, Debug)]
-pub struct MouseEvent {
+impl MouseButton {
+    pub fn all() -> Vec<Self> {
+        vec![
+            MouseButton::Left,
+            MouseButton::Right,
+            MouseButton::Middle,
+            MouseButton::Navigate(NavigationDirection::Back),
+            MouseButton::Navigate(NavigationDirection::Forward),
+        ]
+    }
+}
+
+impl Default for MouseButton {
+    fn default() -> Self {
+        Self::Left
+    }
+}
+
+#[derive(Clone, Debug, Default)]
+pub struct MouseButtonEvent {
     pub button: MouseButton,
     pub position: Vector2F,
     pub ctrl: bool,
@@ -53,7 +77,7 @@ pub struct MouseEvent {
     pub click_count: usize,
 }
 
-#[derive(Clone, Copy, Debug)]
+#[derive(Clone, Copy, Debug, Default)]
 pub struct MouseMovedEvent {
     pub position: Vector2F,
     pub pressed_button: Option<MouseButton>,
@@ -68,8 +92,8 @@ pub enum Event {
     KeyDown(KeyDownEvent),
     KeyUp(KeyUpEvent),
     ModifiersChanged(ModifiersChangedEvent),
-    MouseDown(MouseEvent),
-    MouseUp(MouseEvent),
+    MouseDown(MouseButtonEvent),
+    MouseUp(MouseButtonEvent),
     MouseMoved(MouseMovedEvent),
     ScrollWheel(ScrollWheelEvent),
 }
diff --git a/crates/gpui/src/platform/mac/event.rs b/crates/gpui/src/platform/mac/event.rs
index 5e23859675..209d8de766 100644
--- a/crates/gpui/src/platform/mac/event.rs
+++ b/crates/gpui/src/platform/mac/event.rs
@@ -2,8 +2,8 @@ use crate::{
     geometry::vector::vec2f,
     keymap::Keystroke,
     platform::{Event, NavigationDirection},
-    KeyDownEvent, KeyUpEvent, ModifiersChangedEvent, MouseButton, MouseEvent, MouseMovedEvent,
-    ScrollWheelEvent,
+    KeyDownEvent, KeyUpEvent, ModifiersChangedEvent, MouseButton, MouseButtonEvent,
+    MouseMovedEvent, ScrollWheelEvent,
 };
 use cocoa::{
     appkit::{NSEvent, NSEventModifierFlags, NSEventType},
@@ -126,7 +126,7 @@ impl Event {
                 let modifiers = native_event.modifierFlags();
 
                 window_height.map(|window_height| {
-                    Self::MouseDown(MouseEvent {
+                    Self::MouseDown(MouseButtonEvent {
                         button,
                         position: vec2f(
                             native_event.locationInWindow().x as f32,
@@ -155,7 +155,7 @@ impl Event {
 
                 window_height.map(|window_height| {
                     let modifiers = native_event.modifierFlags();
-                    Self::MouseUp(MouseEvent {
+                    Self::MouseUp(MouseButtonEvent {
                         button,
                         position: vec2f(
                             native_event.locationInWindow().x as f32,
diff --git a/crates/gpui/src/platform/mac/window.rs b/crates/gpui/src/platform/mac/window.rs
index 43ce09ffff..2680d9aa46 100644
--- a/crates/gpui/src/platform/mac/window.rs
+++ b/crates/gpui/src/platform/mac/window.rs
@@ -6,7 +6,7 @@ use crate::{
     },
     keymap::Keystroke,
     platform::{self, Event, WindowBounds, WindowContext},
-    KeyDownEvent, ModifiersChangedEvent, MouseButton, MouseEvent, MouseMovedEvent, Scene,
+    KeyDownEvent, ModifiersChangedEvent, MouseButton, MouseButtonEvent, MouseMovedEvent, Scene,
 };
 use block::ConcreteBlock;
 use cocoa::{
@@ -635,7 +635,7 @@ extern "C" fn handle_view_event(this: &Object, _: Sel, native_event: id) {
                     ))
                     .detach();
             }
-            Event::MouseUp(MouseEvent {
+            Event::MouseUp(MouseButtonEvent {
                 button: MouseButton::Left,
                 ..
             }) => {
diff --git a/crates/gpui/src/presenter.rs b/crates/gpui/src/presenter.rs
index 86a8c4cf30..243863149d 100644
--- a/crates/gpui/src/presenter.rs
+++ b/crates/gpui/src/presenter.rs
@@ -6,10 +6,10 @@ use crate::{
     json::{self, ToJson},
     keymap::Keystroke,
     platform::{CursorStyle, Event},
-    scene::CursorRegion,
+    scene::{CursorRegion, MouseRegionEvent},
     text_layout::TextLayoutCache,
     Action, AnyModelHandle, AnyViewHandle, AnyWeakModelHandle, AssetCache, ElementBox, Entity,
-    FontSystem, ModelHandle, MouseButton, MouseEvent, MouseMovedEvent, MouseRegion, MouseRegionId,
+    FontSystem, ModelHandle, MouseButtonEvent, MouseMovedEvent, MouseRegion, MouseRegionId,
     ReadModel, ReadView, RenderContext, RenderParams, Scene, UpgradeModelHandle, UpgradeViewHandle,
     View, ViewHandle, WeakModelHandle, WeakViewHandle,
 };
@@ -230,105 +230,58 @@ impl Presenter {
             let mut mouse_down_out_handlers = Vec::new();
             let mut mouse_down_region = None;
             let mut clicked_region = None;
-            let mut right_mouse_down_region = None;
-            let mut right_clicked_region = None;
             let mut dragged_region = None;
 
-            match event {
-                Event::MouseDown(MouseEvent {
-                    position,
-                    button: MouseButton::Left,
-                    ..
-                }) => {
+            match &event {
+                Event::MouseDown(
+                    e @ MouseButtonEvent {
+                        position, button, ..
+                    },
+                ) => {
                     let mut hit = false;
                     for (region, _) in self.mouse_regions.iter().rev() {
-                        if region.bounds.contains_point(position) {
+                        if region.bounds.contains_point(*position) {
                             if !hit {
                                 hit = true;
                                 invalidated_views.push(region.view_id);
-                                mouse_down_region = Some((region.clone(), position));
+                                mouse_down_region =
+                                    Some((region.clone(), MouseRegionEvent::Down(e.clone())));
                                 self.clicked_region = Some(region.clone());
-                                self.prev_drag_position = Some(position);
+                                self.prev_drag_position = Some(*position);
                             }
-                        } else if let Some(handler) = region.mouse_down_out.clone() {
-                            mouse_down_out_handlers.push((handler, region.view_id, position));
+                        } else if let Some(handler) = region
+                            .handlers
+                            .get(&(MouseRegionEvent::down_out_disc(), Some(*button)))
+                            .cloned()
+                        {
+                            mouse_down_out_handlers.push((
+                                handler,
+                                region.view_id,
+                                MouseRegionEvent::DownOut(e.clone()),
+                            ));
                         }
                     }
                 }
-                Event::MouseUp(MouseEvent {
-                    position,
-                    click_count,
-                    button: MouseButton::Left,
-                    ..
-                }) => {
+                Event::MouseUp(e @ MouseButtonEvent { position, .. }) => {
                     self.prev_drag_position.take();
                     if let Some(region) = self.clicked_region.take() {
                         invalidated_views.push(region.view_id);
-                        if region.bounds.contains_point(position) {
-                            clicked_region = Some((region, position, click_count));
+                        if region.bounds.contains_point(*position) {
+                            clicked_region = Some((region, MouseRegionEvent::Click(e.clone())));
                         }
                     }
                 }
-                Event::MouseDown(MouseEvent {
-                    position,
-                    button: MouseButton::Right,
-                    ..
-                }) => {
-                    let mut hit = false;
-                    for (region, _) in self.mouse_regions.iter().rev() {
-                        if region.bounds.contains_point(position) {
-                            if !hit {
-                                hit = true;
-                                invalidated_views.push(region.view_id);
-                                right_mouse_down_region = Some((region.clone(), position));
-                                self.right_clicked_region = Some(region.clone());
-                            }
-                        } else if let Some(handler) = region.right_mouse_down_out.clone() {
-                            mouse_down_out_handlers.push((handler, region.view_id, position));
-                        }
-                    }
-                }
-                Event::MouseUp(MouseEvent {
-                    position,
-                    click_count,
-                    button: MouseButton::Right,
-                    ..
-                }) => {
-                    if let Some(region) = self.right_clicked_region.take() {
-                        invalidated_views.push(region.view_id);
-                        if region.bounds.contains_point(position) {
-                            right_clicked_region = Some((region, position, click_count));
-                        }
-                    }
-                }
-                Event::MouseMoved(MouseMovedEvent {
-                    pressed_button,
-                    position,
-                    shift,
-                    ctrl,
-                    alt,
-                    cmd,
-                    ..
-                }) => {
-                    if let Some(MouseButton::Left) = pressed_button {
-                        if let Some((clicked_region, prev_drag_position)) = self
-                            .clicked_region
-                            .as_ref()
-                            .zip(self.prev_drag_position.as_mut())
-                        {
-                            dragged_region =
-                                Some((clicked_region.clone(), *prev_drag_position, position));
-                            *prev_drag_position = position;
-                        }
-
-                        self.last_mouse_moved_event = Some(Event::MouseMoved(MouseMovedEvent {
-                            position,
-                            pressed_button: Some(MouseButton::Left),
-                            shift,
-                            ctrl,
-                            alt,
-                            cmd,
-                        }));
+                Event::MouseMoved(e @ MouseMovedEvent { position, .. }) => {
+                    if let Some((clicked_region, prev_drag_position)) = self
+                        .clicked_region
+                        .as_ref()
+                        .zip(self.prev_drag_position.as_mut())
+                    {
+                        dragged_region = Some((
+                            clicked_region.clone(),
+                            MouseRegionEvent::Drag(*prev_drag_position, e.clone()),
+                        ));
+                        *prev_drag_position = *position;
                     }
 
                     self.last_mouse_moved_event = Some(event.clone());
@@ -339,51 +292,39 @@ impl Presenter {
             let (mut handled, mut event_cx) =
                 self.handle_hover_events(&event, &mut invalidated_views, cx);
 
-            for (handler, view_id, position) in mouse_down_out_handlers {
-                event_cx.with_current_view(view_id, |event_cx| handler(position, event_cx))
+            for (handler, view_id, region_event) in mouse_down_out_handlers {
+                event_cx.with_current_view(view_id, |event_cx| handler(region_event, event_cx))
             }
 
-            if let Some((mouse_down_region, position)) = mouse_down_region {
+            if let Some((mouse_down_region, region_event)) = mouse_down_region {
                 handled = true;
-                if let Some(mouse_down_callback) = mouse_down_region.mouse_down {
+                if let Some(mouse_down_callback) =
+                    mouse_down_region.handlers.get(&region_event.handler_key())
+                {
                     event_cx.with_current_view(mouse_down_region.view_id, |event_cx| {
-                        mouse_down_callback(position, event_cx);
+                        mouse_down_callback(region_event, event_cx);
                     })
                 }
             }
 
-            if let Some((clicked_region, position, click_count)) = clicked_region {
+            if let Some((clicked_region, region_event)) = clicked_region {
                 handled = true;
-                if let Some(click_callback) = clicked_region.click {
+                if let Some(click_callback) =
+                    clicked_region.handlers.get(&region_event.handler_key())
+                {
                     event_cx.with_current_view(clicked_region.view_id, |event_cx| {
-                        click_callback(position, click_count, event_cx);
+                        click_callback(region_event, event_cx);
                     })
                 }
             }
 
-            if let Some((right_mouse_down_region, position)) = right_mouse_down_region {
+            if let Some((dragged_region, region_event)) = dragged_region {
                 handled = true;
-                if let Some(right_mouse_down_callback) = right_mouse_down_region.right_mouse_down {
-                    event_cx.with_current_view(right_mouse_down_region.view_id, |event_cx| {
-                        right_mouse_down_callback(position, event_cx);
-                    })
-                }
-            }
-
-            if let Some((right_clicked_region, position, click_count)) = right_clicked_region {
-                handled = true;
-                if let Some(right_click_callback) = right_clicked_region.right_click {
-                    event_cx.with_current_view(right_clicked_region.view_id, |event_cx| {
-                        right_click_callback(position, click_count, event_cx);
-                    })
-                }
-            }
-
-            if let Some((dragged_region, prev_position, position)) = dragged_region {
-                handled = true;
-                if let Some(drag_callback) = dragged_region.drag {
+                if let Some(drag_callback) =
+                    dragged_region.handlers.get(&region_event.handler_key())
+                {
                     event_cx.with_current_view(dragged_region.view_id, |event_cx| {
-                        drag_callback(prev_position, position, event_cx);
+                        drag_callback(region_event, event_cx);
                     })
                 }
             }
@@ -420,14 +361,17 @@ impl Presenter {
         invalidated_views: &mut Vec<usize>,
         cx: &'a mut MutableAppContext,
     ) -> (bool, EventContext<'a>) {
-        let mut unhovered_regions = Vec::new();
-        let mut hovered_regions = Vec::new();
+        let mut hover_regions = Vec::new();
+        // let mut unhovered_regions = Vec::new();
+        // let mut hovered_regions = Vec::new();
 
-        if let Event::MouseMoved(MouseMovedEvent {
-            position,
-            pressed_button,
-            ..
-        }) = event
+        if let Event::MouseMoved(
+            e @ MouseMovedEvent {
+                position,
+                pressed_button,
+                ..
+            },
+        ) = event
         {
             if let None = pressed_button {
                 let mut style_to_assign = CursorStyle::Arrow;
@@ -448,7 +392,10 @@ impl Presenter {
                         if let Some(region_id) = region.id() {
                             if !self.hovered_region_ids.contains(&region_id) {
                                 invalidated_views.push(region.view_id);
-                                hovered_regions.push((region.clone(), position));
+                                hover_regions.push((
+                                    region.clone(),
+                                    MouseRegionEvent::Hover(true, e.clone()),
+                                ));
                                 self.hovered_region_ids.insert(region_id);
                             }
                         }
@@ -456,7 +403,10 @@ impl Presenter {
                         if let Some(region_id) = region.id() {
                             if self.hovered_region_ids.contains(&region_id) {
                                 invalidated_views.push(region.view_id);
-                                unhovered_regions.push((region.clone(), position));
+                                hover_regions.push((
+                                    region.clone(),
+                                    MouseRegionEvent::Hover(false, e.clone()),
+                                ));
                                 self.hovered_region_ids.remove(&region_id);
                             }
                         }
@@ -468,20 +418,11 @@ impl Presenter {
         let mut event_cx = self.build_event_context(cx);
         let mut handled = false;
 
-        for (unhovered_region, position) in unhovered_regions {
+        for (hover_region, region_event) in hover_regions {
             handled = true;
-            if let Some(hover_callback) = unhovered_region.hover {
-                event_cx.with_current_view(unhovered_region.view_id, |event_cx| {
-                    hover_callback(*position, false, event_cx);
-                })
-            }
-        }
-
-        for (hovered_region, position) in hovered_regions {
-            handled = true;
-            if let Some(hover_callback) = hovered_region.hover {
-                event_cx.with_current_view(hovered_region.view_id, |event_cx| {
-                    hover_callback(*position, true, event_cx);
+            if let Some(hover_callback) = hover_region.handlers.get(&region_event.handler_key()) {
+                event_cx.with_current_view(hover_region.view_id, |event_cx| {
+                    hover_callback(region_event, event_cx);
                 })
             }
         }
diff --git a/crates/gpui/src/scene.rs b/crates/gpui/src/scene.rs
index 769eabe7e5..f5577c5e5d 100644
--- a/crates/gpui/src/scene.rs
+++ b/crates/gpui/src/scene.rs
@@ -1,6 +1,7 @@
+use collections::HashMap;
 use serde::Deserialize;
 use serde_json::json;
-use std::{any::TypeId, borrow::Cow, rc::Rc, sync::Arc};
+use std::{any::TypeId, borrow::Cow, mem::Discriminant, rc::Rc, sync::Arc};
 
 use crate::{
     color::Color,
@@ -8,7 +9,7 @@ use crate::{
     geometry::{rect::RectF, vector::Vector2F},
     json::ToJson,
     platform::CursorStyle,
-    EventContext, ImageData, MouseEvent, MouseMovedEvent, ScrollWheelEvent,
+    EventContext, ImageData, MouseButton, MouseButtonEvent, MouseMovedEvent, ScrollWheelEvent,
 };
 
 pub struct Scene {
@@ -44,30 +45,247 @@ pub struct CursorRegion {
     pub style: CursorStyle,
 }
 
+#[derive(Debug)]
 pub enum MouseRegionEvent {
-    Moved(MouseMovedEvent),
-    Hover(MouseEvent),
-    Down(MouseEvent),
-    Up(MouseEvent),
-    Click(MouseEvent),
-    DownOut(MouseEvent),
+    Move(MouseMovedEvent),
+    Drag(Vector2F, MouseMovedEvent),
+    Hover(bool, MouseMovedEvent),
+    Down(MouseButtonEvent),
+    Up(MouseButtonEvent),
+    Click(MouseButtonEvent),
+    DownOut(MouseButtonEvent),
     ScrollWheel(ScrollWheelEvent),
 }
 
+impl MouseRegionEvent {
+    pub fn move_disc() -> Discriminant<MouseRegionEvent> {
+        std::mem::discriminant(&MouseRegionEvent::Move(Default::default()))
+    }
+    pub fn drag_disc() -> Discriminant<MouseRegionEvent> {
+        std::mem::discriminant(&MouseRegionEvent::Drag(
+            Default::default(),
+            Default::default(),
+        ))
+    }
+    pub fn hover_disc() -> Discriminant<MouseRegionEvent> {
+        std::mem::discriminant(&MouseRegionEvent::Hover(
+            Default::default(),
+            Default::default(),
+        ))
+    }
+    pub fn down_disc() -> Discriminant<MouseRegionEvent> {
+        std::mem::discriminant(&MouseRegionEvent::Down(Default::default()))
+    }
+    pub fn up_disc() -> Discriminant<MouseRegionEvent> {
+        std::mem::discriminant(&MouseRegionEvent::Up(Default::default()))
+    }
+    pub fn click_disc() -> Discriminant<MouseRegionEvent> {
+        std::mem::discriminant(&MouseRegionEvent::Click(Default::default()))
+    }
+    pub fn down_out_disc() -> Discriminant<MouseRegionEvent> {
+        std::mem::discriminant(&MouseRegionEvent::DownOut(Default::default()))
+    }
+    pub fn scroll_wheel_disc() -> Discriminant<MouseRegionEvent> {
+        std::mem::discriminant(&MouseRegionEvent::ScrollWheel(Default::default()))
+    }
+
+    pub fn handler_key(&self) -> (Discriminant<MouseRegionEvent>, Option<MouseButton>) {
+        match self {
+            MouseRegionEvent::Move(_) => (Self::move_disc(), None),
+            MouseRegionEvent::Drag(_, MouseMovedEvent { pressed_button, .. }) => {
+                (Self::drag_disc(), *pressed_button)
+            }
+            MouseRegionEvent::Hover(_, _) => (Self::hover_disc(), None),
+            MouseRegionEvent::Down(MouseButtonEvent { button, .. }) => {
+                (Self::down_disc(), Some(*button))
+            }
+            MouseRegionEvent::Up(MouseButtonEvent { button, .. }) => {
+                (Self::up_disc(), Some(*button))
+            }
+            MouseRegionEvent::Click(MouseButtonEvent { button, .. }) => {
+                (Self::click_disc(), Some(*button))
+            }
+            MouseRegionEvent::DownOut(MouseButtonEvent { button, .. }) => {
+                (Self::down_out_disc(), Some(*button))
+            }
+            MouseRegionEvent::ScrollWheel(_) => (Self::scroll_wheel_disc(), None),
+        }
+    }
+}
+
 #[derive(Clone, Default)]
 pub struct MouseRegion {
     pub view_id: usize,
     pub discriminant: Option<(TypeId, usize)>,
     pub bounds: RectF,
+    pub handlers: HashMap<
+        (Discriminant<MouseRegionEvent>, Option<MouseButton>),
+        Rc<dyn Fn(MouseRegionEvent, &mut EventContext)>,
+    >,
+}
 
-    pub hover: Option<Rc<dyn Fn(Vector2F, bool, &mut EventContext)>>,
-    pub mouse_down: Option<Rc<dyn Fn(Vector2F, &mut EventContext)>>,
-    pub click: Option<Rc<dyn Fn(Vector2F, usize, &mut EventContext)>>,
-    pub right_mouse_down: Option<Rc<dyn Fn(Vector2F, &mut EventContext)>>,
-    pub right_click: Option<Rc<dyn Fn(Vector2F, usize, &mut EventContext)>>,
-    pub drag: Option<Rc<dyn Fn(Vector2F, Vector2F, &mut EventContext)>>,
-    pub mouse_down_out: Option<Rc<dyn Fn(Vector2F, &mut EventContext)>>,
-    pub right_mouse_down_out: Option<Rc<dyn Fn(Vector2F, &mut EventContext)>>,
+impl MouseRegion {
+    pub fn new(view_id: usize, discriminant: Option<(TypeId, usize)>, bounds: RectF) -> Self {
+        Self {
+            view_id,
+            discriminant,
+            bounds,
+            handlers: Default::default(),
+        }
+    }
+
+    pub fn handle_all(
+        view_id: usize,
+        discriminant: Option<(TypeId, usize)>,
+        bounds: RectF,
+    ) -> Self {
+        let mut handlers: HashMap<
+            (Discriminant<MouseRegionEvent>, Option<MouseButton>),
+            Rc<dyn Fn(MouseRegionEvent, &mut EventContext)>,
+        > = Default::default();
+        handlers.insert((MouseRegionEvent::move_disc(), None), Rc::new(|_, _| {}));
+        handlers.insert((MouseRegionEvent::hover_disc(), None), Rc::new(|_, _| {}));
+        for button in MouseButton::all() {
+            handlers.insert(
+                (MouseRegionEvent::drag_disc(), Some(button)),
+                Rc::new(|_, _| {}),
+            );
+            handlers.insert(
+                (MouseRegionEvent::down_disc(), Some(button)),
+                Rc::new(|_, _| {}),
+            );
+            handlers.insert(
+                (MouseRegionEvent::up_disc(), Some(button)),
+                Rc::new(|_, _| {}),
+            );
+            handlers.insert(
+                (MouseRegionEvent::click_disc(), Some(button)),
+                Rc::new(|_, _| {}),
+            );
+            handlers.insert(
+                (MouseRegionEvent::down_out_disc(), Some(button)),
+                Rc::new(|_, _| {}),
+            );
+        }
+        handlers.insert(
+            (MouseRegionEvent::scroll_wheel_disc(), None),
+            Rc::new(|_, _| {}),
+        );
+
+        Self {
+            view_id,
+            discriminant,
+            bounds,
+            handlers,
+        }
+    }
+
+    pub fn on_down(
+        mut self,
+        button: MouseButton,
+        handler: impl Fn(MouseButtonEvent, &mut EventContext) + 'static,
+    ) -> Self {
+        self.handlers.insert((MouseRegionEvent::down_disc(), Some(button)),
+            Rc::new(move |region_event, cx| {
+                if let MouseRegionEvent::Down(mouse_button_event) = region_event {
+                    handler(mouse_button_event, cx);
+                } else {
+                    panic!(
+                        "Mouse Region Event incorrectly called with mismatched event type. Expected MouseRegionEvent::Down, found {:?}", 
+                        region_event);
+                }
+            }));
+        self
+    }
+
+    pub fn on_up(
+        mut self,
+        button: MouseButton,
+        handler: impl Fn(MouseButtonEvent, &mut EventContext) + 'static,
+    ) -> Self {
+        self.handlers.insert((MouseRegionEvent::up_disc(), Some(button)),
+            Rc::new(move |region_event, cx| {
+                if let MouseRegionEvent::Up(mouse_button_event) = region_event {
+                    handler(mouse_button_event, cx);
+                } else {
+                    panic!(
+                        "Mouse Region Event incorrectly called with mismatched event type. Expected MouseRegionEvent::Up, found {:?}", 
+                        region_event);
+                }
+            }));
+        self
+    }
+
+    pub fn on_click(
+        mut self,
+        button: MouseButton,
+        handler: impl Fn(MouseButtonEvent, &mut EventContext) + 'static,
+    ) -> Self {
+        self.handlers.insert((MouseRegionEvent::click_disc(), Some(button)),
+            Rc::new(move |region_event, cx| {
+                if let MouseRegionEvent::Click(mouse_button_event) = region_event {
+                    handler(mouse_button_event, cx);
+                } else {
+                    panic!(
+                        "Mouse Region Event incorrectly called with mismatched event type. Expected MouseRegionEvent::Click, found {:?}", 
+                        region_event);
+                }
+            }));
+        self
+    }
+
+    pub fn on_down_out(
+        mut self,
+        button: MouseButton,
+        handler: impl Fn(MouseButtonEvent, &mut EventContext) + 'static,
+    ) -> Self {
+        self.handlers.insert((MouseRegionEvent::down_out_disc(), Some(button)),
+            Rc::new(move |region_event, cx| {
+                if let MouseRegionEvent::DownOut(mouse_button_event) = region_event {
+                    handler(mouse_button_event, cx);
+                } else {
+                    panic!(
+                        "Mouse Region Event incorrectly called with mismatched event type. Expected MouseRegionEvent::DownOut, found {:?}", 
+                        region_event);
+                }
+            }));
+        self
+    }
+
+    pub fn on_drag(
+        mut self,
+        button: MouseButton,
+        handler: impl Fn(Vector2F, MouseMovedEvent, &mut EventContext) + 'static,
+    ) -> Self {
+        self.handlers.insert((MouseRegionEvent::drag_disc(), Some(button)),
+            Rc::new(move |region_event, cx| {
+                if let MouseRegionEvent::Drag(prev_drag_position, mouse_moved_event) = region_event {
+                    handler(prev_drag_position, mouse_moved_event, cx);
+                } else {
+                    panic!(
+                        "Mouse Region Event incorrectly called with mismatched event type. Expected MouseRegionEvent::Drag, found {:?}", 
+                        region_event);
+                }
+            }));
+        self
+    }
+
+    pub fn on_hover(
+        mut self,
+        handler: impl Fn(bool, MouseMovedEvent, &mut EventContext) + 'static,
+    ) -> Self {
+        self.handlers.insert((MouseRegionEvent::hover_disc(), None),
+            Rc::new(move |region_event, cx| {
+                if let MouseRegionEvent::Hover(hover, mouse_moved_event) = region_event {
+                    handler(hover, mouse_moved_event, cx);
+                } else {
+                    panic!(
+                        "Mouse Region Event incorrectly called with mismatched event type. Expected MouseRegionEvent::Hover, found {:?}", 
+                        region_event);
+                }
+            }));
+        self
+    }
 }
 
 #[derive(Copy, Clone, Eq, PartialEq, Hash)]
diff --git a/crates/gpui/src/views/select.rs b/crates/gpui/src/views/select.rs
index 21527a1f2c..1b57caf476 100644
--- a/crates/gpui/src/views/select.rs
+++ b/crates/gpui/src/views/select.rs
@@ -1,8 +1,8 @@
 use serde::Deserialize;
 
 use crate::{
-    actions, elements::*, impl_actions, AppContext, Entity, MutableAppContext, RenderContext, View,
-    ViewContext, WeakViewHandle,
+    actions, elements::*, impl_actions, AppContext, Entity, MouseButton, MutableAppContext,
+    RenderContext, View, ViewContext, WeakViewHandle,
 };
 
 pub struct Select {
@@ -119,7 +119,9 @@ impl View for Select {
                 .with_style(style.header)
                 .boxed()
             })
-            .on_click(move |_, _, cx| cx.dispatch_action(ToggleSelect))
+            .on_click(MouseButton::Left, move |_, cx| {
+                cx.dispatch_action(ToggleSelect)
+            })
             .boxed(),
         );
         if self.is_open {
@@ -151,7 +153,7 @@ impl View for Select {
                                                 )
                                             },
                                         )
-                                        .on_click(move |_, _, cx| {
+                                        .on_click(MouseButton::Left, move |_, cx| {
                                             cx.dispatch_action(SelectItem(ix))
                                         })
                                         .boxed()
diff --git a/crates/picker/src/picker.rs b/crates/picker/src/picker.rs
index 8f8e5d26b9..0b30583053 100644
--- a/crates/picker/src/picker.rs
+++ b/crates/picker/src/picker.rs
@@ -7,8 +7,8 @@ use gpui::{
     geometry::vector::{vec2f, Vector2F},
     keymap,
     platform::CursorStyle,
-    AppContext, Axis, Element, ElementBox, Entity, MouseState, MutableAppContext, RenderContext,
-    Task, View, ViewContext, ViewHandle, WeakViewHandle,
+    AppContext, Axis, Element, ElementBox, Entity, MouseButton, MouseState, MutableAppContext,
+    RenderContext, Task, View, ViewContext, ViewHandle, WeakViewHandle,
 };
 use menu::{Cancel, Confirm, SelectFirst, SelectIndex, SelectLast, SelectNext, SelectPrev};
 use settings::Settings;
@@ -90,7 +90,9 @@ impl<D: PickerDelegate> View for Picker<D> {
                                         .read(cx)
                                         .render_match(ix, state, ix == selected_ix, cx)
                                 })
-                                .on_mouse_down(move |_, cx| cx.dispatch_action(SelectIndex(ix)))
+                                .on_mouse_down(MouseButton::Left, move |_, cx| {
+                                    cx.dispatch_action(SelectIndex(ix))
+                                })
                                 .with_cursor_style(CursorStyle::PointingHand)
                                 .boxed()
                             }));
diff --git a/crates/project_panel/src/project_panel.rs b/crates/project_panel/src/project_panel.rs
index eaff23a476..8d9443de4f 100644
--- a/crates/project_panel/src/project_panel.rs
+++ b/crates/project_panel/src/project_panel.rs
@@ -11,8 +11,9 @@ use gpui::{
     geometry::vector::Vector2F,
     impl_internal_actions, keymap,
     platform::CursorStyle,
-    AppContext, ClipboardItem, Element, ElementBox, Entity, ModelHandle, MutableAppContext,
-    PromptLevel, RenderContext, Task, View, ViewContext, ViewHandle,
+    AppContext, ClipboardItem, Element, ElementBox, Entity, ModelHandle, MouseButton,
+    MouseButtonEvent, MutableAppContext, PromptLevel, RenderContext, Task, View, ViewContext,
+    ViewHandle,
 };
 use menu::{Confirm, SelectNext, SelectPrev};
 use project::{Entry, EntryKind, Project, ProjectEntryId, ProjectPath, Worktree, WorktreeId};
@@ -1054,19 +1055,25 @@ impl ProjectPanel {
                 .with_padding_left(padding)
                 .boxed()
         })
-        .on_click(move |_, click_count, cx| {
-            if kind == EntryKind::Dir {
-                cx.dispatch_action(ToggleExpanded(entry_id))
-            } else {
-                cx.dispatch_action(Open {
-                    entry_id,
-                    change_focus: click_count > 1,
-                })
-            }
-        })
-        .on_right_mouse_down(move |position, cx| {
-            cx.dispatch_action(DeployContextMenu { entry_id, position })
-        })
+        .on_click(
+            MouseButton::Left,
+            move |MouseButtonEvent { click_count, .. }, cx| {
+                if kind == EntryKind::Dir {
+                    cx.dispatch_action(ToggleExpanded(entry_id))
+                } else {
+                    cx.dispatch_action(Open {
+                        entry_id,
+                        change_focus: click_count > 1,
+                    })
+                }
+            },
+        )
+        .on_mouse_down(
+            MouseButton::Right,
+            move |MouseButtonEvent { position, .. }, cx| {
+                cx.dispatch_action(DeployContextMenu { entry_id, position })
+            },
+        )
         .with_cursor_style(CursorStyle::PointingHand)
         .boxed()
     }
@@ -1113,13 +1120,16 @@ impl View for ProjectPanel {
                     .expanded()
                     .boxed()
                 })
-                .on_right_mouse_down(move |position, cx| {
-                    // When deploying the context menu anywhere below the last project entry,
-                    // act as if the user clicked the root of the last worktree.
-                    if let Some(entry_id) = last_worktree_root_id {
-                        cx.dispatch_action(DeployContextMenu { entry_id, position })
-                    }
-                })
+                .on_mouse_down(
+                    MouseButton::Right,
+                    move |MouseButtonEvent { position, .. }, cx| {
+                        // When deploying the context menu anywhere below the last project entry,
+                        // act as if the user clicked the root of the last worktree.
+                        if let Some(entry_id) = last_worktree_root_id {
+                            cx.dispatch_action(DeployContextMenu { entry_id, position })
+                        }
+                    },
+                )
                 .boxed(),
             )
             .with_child(ChildView::new(&self.context_menu).boxed())
diff --git a/crates/search/src/buffer_search.rs b/crates/search/src/buffer_search.rs
index 5303c20e89..529da6f7b6 100644
--- a/crates/search/src/buffer_search.rs
+++ b/crates/search/src/buffer_search.rs
@@ -7,8 +7,8 @@ use collections::HashMap;
 use editor::{Anchor, Autoscroll, Editor};
 use gpui::{
     actions, elements::*, impl_actions, platform::CursorStyle, Action, AppContext, Entity,
-    MutableAppContext, RenderContext, Subscription, Task, View, ViewContext, ViewHandle,
-    WeakViewHandle,
+    MouseButton, MutableAppContext, RenderContext, Subscription, Task, View, ViewContext,
+    ViewHandle, WeakViewHandle,
 };
 use language::OffsetRangeExt;
 use project::search::SearchQuery;
@@ -285,7 +285,9 @@ impl BufferSearchBar {
                 .with_style(style.container)
                 .boxed()
         })
-        .on_click(move |_, _, cx| cx.dispatch_any_action(option.to_toggle_action()))
+        .on_click(MouseButton::Left, move |_, cx| {
+            cx.dispatch_any_action(option.to_toggle_action())
+        })
         .with_cursor_style(CursorStyle::PointingHand)
         .with_tooltip::<Self, _>(
             option as usize,
@@ -330,9 +332,9 @@ impl BufferSearchBar {
                 .with_style(style.container)
                 .boxed()
         })
-        .on_click({
+        .on_click(MouseButton::Left, {
             let action = action.boxed_clone();
-            move |_, _, cx| cx.dispatch_any_action(action.boxed_clone())
+            move |_, cx| cx.dispatch_any_action(action.boxed_clone())
         })
         .with_cursor_style(CursorStyle::PointingHand)
         .with_tooltip::<NavButton, _>(
diff --git a/crates/search/src/project_search.rs b/crates/search/src/project_search.rs
index 622b84633c..405dd2d334 100644
--- a/crates/search/src/project_search.rs
+++ b/crates/search/src/project_search.rs
@@ -7,8 +7,8 @@ use collections::HashMap;
 use editor::{Anchor, Autoscroll, Editor, MultiBuffer, SelectAll, MAX_TAB_TITLE_LEN};
 use gpui::{
     actions, elements::*, platform::CursorStyle, Action, AppContext, ElementBox, Entity,
-    ModelContext, ModelHandle, MutableAppContext, RenderContext, Subscription, Task, View,
-    ViewContext, ViewHandle, WeakModelHandle, WeakViewHandle,
+    ModelContext, ModelHandle, MouseButton, MutableAppContext, RenderContext, Subscription, Task,
+    View, ViewContext, ViewHandle, WeakModelHandle, WeakViewHandle,
 };
 use menu::Confirm;
 use project::{search::SearchQuery, Project};
@@ -735,9 +735,9 @@ impl ProjectSearchBar {
                 .with_style(style.container)
                 .boxed()
         })
-        .on_click({
+        .on_click(MouseButton::Left, {
             let action = action.boxed_clone();
-            move |_, _, cx| cx.dispatch_any_action(action.boxed_clone())
+            move |_, cx| cx.dispatch_any_action(action.boxed_clone())
         })
         .with_cursor_style(CursorStyle::PointingHand)
         .with_tooltip::<NavButton, _>(
@@ -770,7 +770,9 @@ impl ProjectSearchBar {
                 .with_style(style.container)
                 .boxed()
         })
-        .on_click(move |_, _, cx| cx.dispatch_any_action(option.to_toggle_action()))
+        .on_click(MouseButton::Left, move |_, cx| {
+            cx.dispatch_any_action(option.to_toggle_action())
+        })
         .with_cursor_style(CursorStyle::PointingHand)
         .with_tooltip::<Self, _>(
             option as usize,
diff --git a/crates/terminal/src/terminal_element.rs b/crates/terminal/src/terminal_element.rs
index 3406b4b9e1..f1ba70cab9 100644
--- a/crates/terminal/src/terminal_element.rs
+++ b/crates/terminal/src/terminal_element.rs
@@ -20,8 +20,8 @@ use gpui::{
     },
     json::json,
     text_layout::{Line, RunStyle},
-    Event, FontCache, KeyDownEvent, MouseRegion, PaintContext, Quad, ScrollWheelEvent,
-    SizeConstraint, TextLayoutCache, WeakModelHandle,
+    Event, FontCache, KeyDownEvent, MouseButton, MouseButtonEvent, MouseMovedEvent, MouseRegion,
+    PaintContext, Quad, ScrollWheelEvent, SizeConstraint, TextLayoutCache, WeakModelHandle,
 };
 use itertools::Itertools;
 use ordered_float::OrderedFloat;
@@ -29,7 +29,7 @@ use settings::Settings;
 use theme::TerminalStyle;
 use util::ResultExt;
 
-use std::{cmp::min, ops::Range, rc::Rc, sync::Arc};
+use std::{cmp::min, ops::Range, sync::Arc};
 use std::{fmt::Debug, ops::Sub};
 
 use crate::{color_translation::convert_color, connection::TerminalConnection, ZedListener};
@@ -594,63 +594,76 @@ fn attach_mouse_handlers(
     let drag_mutex = terminal_mutex.clone();
     let mouse_down_mutex = terminal_mutex.clone();
 
-    cx.scene.push_mouse_region(MouseRegion {
-        view_id,
-        mouse_down: Some(Rc::new(move |pos, _| {
-            let mut term = mouse_down_mutex.lock();
-            let (point, side) = mouse_to_cell_data(
-                pos,
-                origin,
-                cur_size,
-                term.renderable_content().display_offset,
-            );
-            term.selection = Some(Selection::new(SelectionType::Simple, point, side))
-        })),
-        click: Some(Rc::new(move |pos, click_count, cx| {
-            let mut term = click_mutex.lock();
+    cx.scene.push_mouse_region(
+        MouseRegion::new(view_id, None, visible_bounds)
+            .on_down(
+                MouseButton::Left,
+                move |MouseButtonEvent { position, .. }, _| {
+                    let mut term = mouse_down_mutex.lock();
 
-            let (point, side) = mouse_to_cell_data(
-                pos,
-                origin,
-                cur_size,
-                term.renderable_content().display_offset,
-            );
+                    let (point, side) = mouse_to_cell_data(
+                        position,
+                        origin,
+                        cur_size,
+                        term.renderable_content().display_offset,
+                    );
+                    term.selection = Some(Selection::new(SelectionType::Simple, point, side))
+                },
+            )
+            .on_click(
+                MouseButton::Left,
+                move |MouseButtonEvent {
+                          position,
+                          click_count,
+                          ..
+                      },
+                      cx| {
+                    let mut term = click_mutex.lock();
 
-            let selection_type = match click_count {
-                0 => return, //This is a release
-                1 => Some(SelectionType::Simple),
-                2 => Some(SelectionType::Semantic),
-                3 => Some(SelectionType::Lines),
-                _ => None,
-            };
+                    let (point, side) = mouse_to_cell_data(
+                        position,
+                        origin,
+                        cur_size,
+                        term.renderable_content().display_offset,
+                    );
 
-            let selection =
-                selection_type.map(|selection_type| Selection::new(selection_type, point, side));
+                    let selection_type = match click_count {
+                        0 => return, //This is a release
+                        1 => Some(SelectionType::Simple),
+                        2 => Some(SelectionType::Semantic),
+                        3 => Some(SelectionType::Lines),
+                        _ => None,
+                    };
 
-            term.selection = selection;
-            cx.focus_parent_view();
-            cx.notify();
-        })),
-        bounds: visible_bounds,
-        drag: Some(Rc::new(move |_delta, pos, cx| {
-            let mut term = drag_mutex.lock();
+                    let selection = selection_type
+                        .map(|selection_type| Selection::new(selection_type, point, side));
 
-            let (point, side) = mouse_to_cell_data(
-                pos,
-                origin,
-                cur_size,
-                term.renderable_content().display_offset,
-            );
+                    term.selection = selection;
+                    cx.focus_parent_view();
+                    cx.notify();
+                },
+            )
+            .on_drag(
+                MouseButton::Left,
+                move |_, MouseMovedEvent { position, .. }, cx| {
+                    let mut term = drag_mutex.lock();
 
-            if let Some(mut selection) = term.selection.take() {
-                selection.update(point, side);
-                term.selection = Some(selection);
-            }
+                    let (point, side) = mouse_to_cell_data(
+                        position,
+                        origin,
+                        cur_size,
+                        term.renderable_content().display_offset,
+                    );
 
-            cx.notify();
-        })),
-        ..Default::default()
-    });
+                    if let Some(mut selection) = term.selection.take() {
+                        selection.update(point, side);
+                        term.selection = Some(selection);
+                    }
+
+                    cx.notify();
+                },
+            ),
+    );
 }
 
 ///Copied (with modifications) from alacritty/src/input.rs > Processor::cell_side()
diff --git a/crates/workspace/src/pane.rs b/crates/workspace/src/pane.rs
index 4b231e03e7..657a9f0542 100644
--- a/crates/workspace/src/pane.rs
+++ b/crates/workspace/src/pane.rs
@@ -13,8 +13,9 @@ use gpui::{
     },
     impl_actions, impl_internal_actions,
     platform::{CursorStyle, NavigationDirection},
-    AppContext, AsyncAppContext, Entity, ModelHandle, MutableAppContext, PromptLevel, Quad,
-    RenderContext, Task, View, ViewContext, ViewHandle, WeakViewHandle,
+    AppContext, AsyncAppContext, Entity, ModelHandle, MouseButton, MouseButtonEvent,
+    MutableAppContext, PromptLevel, Quad, RenderContext, Task, View, ViewContext, ViewHandle,
+    WeakViewHandle,
 };
 use project::{Project, ProjectEntryId, ProjectPath};
 use serde::Deserialize;
@@ -955,9 +956,9 @@ impl Pane {
                                             )
                                             .with_padding(Padding::uniform(4.))
                                             .with_cursor_style(CursorStyle::PointingHand)
-                                            .on_click({
+                                            .on_click(MouseButton::Left, {
                                                 let pane = pane.clone();
-                                                move |_, _, cx| {
+                                                move |_, cx| {
                                                     cx.dispatch_action(CloseItem {
                                                         item_id,
                                                         pane: pane.clone(),
@@ -978,7 +979,7 @@ impl Pane {
                         .with_style(style.container)
                         .boxed()
                     })
-                    .on_mouse_down(move |_, cx| {
+                    .on_mouse_down(MouseButton::Left, move |_, cx| {
                         cx.dispatch_action(ActivateItem(ix));
                     })
                     .boxed()
@@ -1079,9 +1080,12 @@ impl View for Pane {
                                         },
                                     )
                                     .with_cursor_style(CursorStyle::PointingHand)
-                                    .on_mouse_down(|position, cx| {
-                                        cx.dispatch_action(DeploySplitMenu { position });
-                                    })
+                                    .on_mouse_down(
+                                        MouseButton::Left,
+                                        |MouseButtonEvent { position, .. }, cx| {
+                                            cx.dispatch_action(DeploySplitMenu { position });
+                                        },
+                                    )
                                     .boxed(),
                                 )
                                 .constrained()
diff --git a/crates/workspace/src/sidebar.rs b/crates/workspace/src/sidebar.rs
index a500f99492..cd4a009f2c 100644
--- a/crates/workspace/src/sidebar.rs
+++ b/crates/workspace/src/sidebar.rs
@@ -1,7 +1,7 @@
 use crate::StatusItemView;
 use gpui::{
     elements::*, impl_actions, platform::CursorStyle, AnyViewHandle, AppContext, Entity,
-    RenderContext, Subscription, View, ViewContext, ViewHandle,
+    MouseButton, MouseMovedEvent, RenderContext, Subscription, View, ViewContext, ViewHandle,
 };
 use serde::Deserialize;
 use settings::Settings;
@@ -187,19 +187,27 @@ impl Sidebar {
             ..Default::default()
         })
         .with_cursor_style(CursorStyle::ResizeLeftRight)
-        .on_mouse_down(|_, _| {}) // This prevents the mouse down event from being propagated elsewhere
-        .on_drag(move |old_position, new_position, cx| {
-            let delta = new_position.x() - old_position.x();
-            let prev_width = *actual_width.borrow();
-            *custom_width.borrow_mut() = 0f32
-                .max(match side {
-                    Side::Left => prev_width + delta,
-                    Side::Right => prev_width - delta,
-                })
-                .round();
+        .on_mouse_down(MouseButton::Left, |_, _| {}) // This prevents the mouse down event from being propagated elsewhere
+        .on_drag(
+            MouseButton::Left,
+            move |old_position,
+                  MouseMovedEvent {
+                      position: new_position,
+                      ..
+                  },
+                  cx| {
+                let delta = new_position.x() - old_position.x();
+                let prev_width = *actual_width.borrow();
+                *custom_width.borrow_mut() = 0f32
+                    .max(match side {
+                        Side::Left => prev_width + delta,
+                        Side::Right => prev_width - delta,
+                    })
+                    .round();
 
-            cx.notify();
-        })
+                cx.notify();
+            },
+        )
         .boxed()
     }
 }
@@ -314,9 +322,9 @@ impl View for SidebarButtons {
                             .boxed()
                     })
                     .with_cursor_style(CursorStyle::PointingHand)
-                    .on_click({
+                    .on_click(MouseButton::Left, {
                         let action = action.clone();
-                        move |_, _, cx| cx.dispatch_action(action.clone())
+                        move |_, cx| cx.dispatch_action(action.clone())
                     })
                     .with_tooltip::<Self, _>(
                         ix,
diff --git a/crates/workspace/src/toolbar.rs b/crates/workspace/src/toolbar.rs
index 636df9a039..6d8eefcc76 100644
--- a/crates/workspace/src/toolbar.rs
+++ b/crates/workspace/src/toolbar.rs
@@ -1,7 +1,7 @@
 use crate::{ItemHandle, Pane};
 use gpui::{
     elements::*, platform::CursorStyle, Action, AnyViewHandle, AppContext, ElementBox, Entity,
-    MutableAppContext, RenderContext, View, ViewContext, ViewHandle, WeakViewHandle,
+    MouseButton, MutableAppContext, RenderContext, View, ViewContext, ViewHandle, WeakViewHandle,
 };
 use settings::Settings;
 
@@ -191,7 +191,9 @@ fn nav_button<A: Action + Clone>(
     } else {
         CursorStyle::default()
     })
-    .on_click(move |_, _, cx| cx.dispatch_action(action.clone()))
+    .on_click(MouseButton::Left, move |_, cx| {
+        cx.dispatch_action(action.clone())
+    })
     .with_tooltip::<A, _>(
         0,
         action_name.to_string(),
diff --git a/crates/workspace/src/workspace.rs b/crates/workspace/src/workspace.rs
index f6c185a19f..3a30e0cee3 100644
--- a/crates/workspace/src/workspace.rs
+++ b/crates/workspace/src/workspace.rs
@@ -21,8 +21,8 @@ use gpui::{
     json::{self, ToJson},
     platform::{CursorStyle, WindowOptions},
     AnyModelHandle, AnyViewHandle, AppContext, AsyncAppContext, Border, Entity, ImageData,
-    ModelContext, ModelHandle, MutableAppContext, PathPromptOptions, PromptLevel, RenderContext,
-    Task, View, ViewContext, ViewHandle, WeakViewHandle,
+    ModelContext, ModelHandle, MouseButton, MutableAppContext, PathPromptOptions, PromptLevel,
+    RenderContext, Task, View, ViewContext, ViewHandle, WeakViewHandle,
 };
 use language::LanguageRegistry;
 use log::error;
@@ -1980,7 +1980,7 @@ impl Workspace {
                         .with_style(style.container)
                         .boxed()
                 })
-                .on_click(|_, _, cx| cx.dispatch_action(Authenticate))
+                .on_click(MouseButton::Left, |_, cx| cx.dispatch_action(Authenticate))
                 .with_cursor_style(CursorStyle::PointingHand)
                 .aligned()
                 .boxed(),
@@ -2031,7 +2031,9 @@ impl Workspace {
         if let Some((peer_id, peer_github_login)) = peer {
             MouseEventHandler::new::<ToggleFollow, _, _>(replica_id.into(), cx, move |_, _| content)
                 .with_cursor_style(CursorStyle::PointingHand)
-                .on_click(move |_, _, cx| cx.dispatch_action(ToggleFollow(peer_id)))
+                .on_click(MouseButton::Left, move |_, cx| {
+                    cx.dispatch_action(ToggleFollow(peer_id))
+                })
                 .with_tooltip::<ToggleFollow, _>(
                     peer_id.0 as usize,
                     if is_followed {
diff --git a/crates/zed/src/feedback.rs b/crates/zed/src/feedback.rs
index 9e7564f411..f4b67a12bd 100644
--- a/crates/zed/src/feedback.rs
+++ b/crates/zed/src/feedback.rs
@@ -2,7 +2,7 @@ use crate::OpenBrowser;
 use gpui::{
     elements::{MouseEventHandler, Text},
     platform::CursorStyle,
-    Element, Entity, RenderContext, View,
+    Element, Entity, MouseButton, RenderContext, View,
 };
 use settings::Settings;
 use workspace::StatusItemView;
@@ -32,7 +32,7 @@ impl View for FeedbackLink {
             .boxed()
         })
         .with_cursor_style(CursorStyle::PointingHand)
-        .on_click(|_, _, cx| {
+        .on_click(MouseButton::Left, |_, cx| {
             cx.dispatch_action(OpenBrowser {
                 url: NEW_ISSUE_URL.into(),
             })
diff --git a/styles/package-lock.json b/styles/package-lock.json
index 2eb6d3a1bf..49304dc2fa 100644
--- a/styles/package-lock.json
+++ b/styles/package-lock.json
@@ -5,6 +5,7 @@
     "requires": true,
     "packages": {
         "": {
+            "name": "styles",
             "version": "1.0.0",
             "license": "ISC",
             "dependencies": {

From aafaee7463d5802b6b7a71102183f00fcc9f8e25 Mon Sep 17 00:00:00 2001
From: Nate Butler <iamnbutler@gmail.com>
Date: Mon, 18 Jul 2022 12:05:27 -0400
Subject: [PATCH 08/22] Fix missing red/incorrect hex colors in `one-light`

---
 styles/src/themes/one-light.ts | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/styles/src/themes/one-light.ts b/styles/src/themes/one-light.ts
index 7e468b9427..c70fa2d131 100644
--- a/styles/src/themes/one-light.ts
+++ b/styles/src/themes/one-light.ts
@@ -9,12 +9,12 @@ const url =
 const base00 = "#090a0b";
 const base01 = "#202227";
 const base02 = "#383a42";
-const base03 = "#a0a1a7";
-const base04 = "#696c77";
-const base05 = "#a0a1a7";
-const base06 = "#e5e5e6";
-const base07 = "#f0f0f1";
-const base08 = "#fafafa";
+const base03 = "#696c77";
+const base04 = "#a0a1a7";
+const base05 = "#e5e5e6";
+const base06 = "#f0f0f1";
+const base07 = "#fafafa";
+const base08 = "#ca1243";
 const base09 = "#d75f00";
 const base0A = "#c18401";
 const base0B = "#50a14f";

From bb914920985bf5c69f70d00c06e5d1b7b481633e Mon Sep 17 00:00:00 2001
From: Nate Butler <iamnbutler@gmail.com>
Date: Mon, 18 Jul 2022 12:33:09 -0400
Subject: [PATCH 09/22] Fix missing red color in `sandcastle` theme

---
 styles/src/themes/sandcastle.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/styles/src/themes/sandcastle.ts b/styles/src/themes/sandcastle.ts
index 45e0be1623..7d08ec46db 100644
--- a/styles/src/themes/sandcastle.ts
+++ b/styles/src/themes/sandcastle.ts
@@ -14,7 +14,7 @@ const ramps = {
     "#d5c4a1",
     "#fdf4c1",
   ]),
-  red: colorRamp(chroma("#83a598")),
+  red: colorRamp(chroma("#B4637A")),
   orange: colorRamp(chroma("#a07e3b")),
   yellow: colorRamp(chroma("#a07e3b")),
   green: colorRamp(chroma("#528b8b")),

From ec25fa9260076ea57bff60bbe661cd8dfc405152 Mon Sep 17 00:00:00 2001
From: K Simmons <keith@zed.dev>
Date: Mon, 18 Jul 2022 09:54:48 -0700
Subject: [PATCH 10/22] Extract handler set from MouseRegion

---
 crates/gpui/src/presenter.rs          |   1 -
 crates/gpui/src/scene.rs              | 257 +-------------------
 crates/gpui/src/scene/mouse_region.rs | 327 ++++++++++++++++++++++++++
 3 files changed, 332 insertions(+), 253 deletions(-)
 create mode 100644 crates/gpui/src/scene/mouse_region.rs

diff --git a/crates/gpui/src/presenter.rs b/crates/gpui/src/presenter.rs
index 243863149d..a2b3230190 100644
--- a/crates/gpui/src/presenter.rs
+++ b/crates/gpui/src/presenter.rs
@@ -252,7 +252,6 @@ impl Presenter {
                         } else if let Some(handler) = region
                             .handlers
                             .get(&(MouseRegionEvent::down_out_disc(), Some(*button)))
-                            .cloned()
                         {
                             mouse_down_out_handlers.push((
                                 handler,
diff --git a/crates/gpui/src/scene.rs b/crates/gpui/src/scene.rs
index f5577c5e5d..a1f12b76d3 100644
--- a/crates/gpui/src/scene.rs
+++ b/crates/gpui/src/scene.rs
@@ -1,7 +1,8 @@
-use collections::HashMap;
+mod mouse_region;
+
 use serde::Deserialize;
 use serde_json::json;
-use std::{any::TypeId, borrow::Cow, mem::Discriminant, rc::Rc, sync::Arc};
+use std::{borrow::Cow, sync::Arc};
 
 use crate::{
     color::Color,
@@ -9,8 +10,9 @@ use crate::{
     geometry::{rect::RectF, vector::Vector2F},
     json::ToJson,
     platform::CursorStyle,
-    EventContext, ImageData, MouseButton, MouseButtonEvent, MouseMovedEvent, ScrollWheelEvent,
+    ImageData,
 };
+pub use mouse_region::*;
 
 pub struct Scene {
     scale_factor: f32,
@@ -45,255 +47,6 @@ pub struct CursorRegion {
     pub style: CursorStyle,
 }
 
-#[derive(Debug)]
-pub enum MouseRegionEvent {
-    Move(MouseMovedEvent),
-    Drag(Vector2F, MouseMovedEvent),
-    Hover(bool, MouseMovedEvent),
-    Down(MouseButtonEvent),
-    Up(MouseButtonEvent),
-    Click(MouseButtonEvent),
-    DownOut(MouseButtonEvent),
-    ScrollWheel(ScrollWheelEvent),
-}
-
-impl MouseRegionEvent {
-    pub fn move_disc() -> Discriminant<MouseRegionEvent> {
-        std::mem::discriminant(&MouseRegionEvent::Move(Default::default()))
-    }
-    pub fn drag_disc() -> Discriminant<MouseRegionEvent> {
-        std::mem::discriminant(&MouseRegionEvent::Drag(
-            Default::default(),
-            Default::default(),
-        ))
-    }
-    pub fn hover_disc() -> Discriminant<MouseRegionEvent> {
-        std::mem::discriminant(&MouseRegionEvent::Hover(
-            Default::default(),
-            Default::default(),
-        ))
-    }
-    pub fn down_disc() -> Discriminant<MouseRegionEvent> {
-        std::mem::discriminant(&MouseRegionEvent::Down(Default::default()))
-    }
-    pub fn up_disc() -> Discriminant<MouseRegionEvent> {
-        std::mem::discriminant(&MouseRegionEvent::Up(Default::default()))
-    }
-    pub fn click_disc() -> Discriminant<MouseRegionEvent> {
-        std::mem::discriminant(&MouseRegionEvent::Click(Default::default()))
-    }
-    pub fn down_out_disc() -> Discriminant<MouseRegionEvent> {
-        std::mem::discriminant(&MouseRegionEvent::DownOut(Default::default()))
-    }
-    pub fn scroll_wheel_disc() -> Discriminant<MouseRegionEvent> {
-        std::mem::discriminant(&MouseRegionEvent::ScrollWheel(Default::default()))
-    }
-
-    pub fn handler_key(&self) -> (Discriminant<MouseRegionEvent>, Option<MouseButton>) {
-        match self {
-            MouseRegionEvent::Move(_) => (Self::move_disc(), None),
-            MouseRegionEvent::Drag(_, MouseMovedEvent { pressed_button, .. }) => {
-                (Self::drag_disc(), *pressed_button)
-            }
-            MouseRegionEvent::Hover(_, _) => (Self::hover_disc(), None),
-            MouseRegionEvent::Down(MouseButtonEvent { button, .. }) => {
-                (Self::down_disc(), Some(*button))
-            }
-            MouseRegionEvent::Up(MouseButtonEvent { button, .. }) => {
-                (Self::up_disc(), Some(*button))
-            }
-            MouseRegionEvent::Click(MouseButtonEvent { button, .. }) => {
-                (Self::click_disc(), Some(*button))
-            }
-            MouseRegionEvent::DownOut(MouseButtonEvent { button, .. }) => {
-                (Self::down_out_disc(), Some(*button))
-            }
-            MouseRegionEvent::ScrollWheel(_) => (Self::scroll_wheel_disc(), None),
-        }
-    }
-}
-
-#[derive(Clone, Default)]
-pub struct MouseRegion {
-    pub view_id: usize,
-    pub discriminant: Option<(TypeId, usize)>,
-    pub bounds: RectF,
-    pub handlers: HashMap<
-        (Discriminant<MouseRegionEvent>, Option<MouseButton>),
-        Rc<dyn Fn(MouseRegionEvent, &mut EventContext)>,
-    >,
-}
-
-impl MouseRegion {
-    pub fn new(view_id: usize, discriminant: Option<(TypeId, usize)>, bounds: RectF) -> Self {
-        Self {
-            view_id,
-            discriminant,
-            bounds,
-            handlers: Default::default(),
-        }
-    }
-
-    pub fn handle_all(
-        view_id: usize,
-        discriminant: Option<(TypeId, usize)>,
-        bounds: RectF,
-    ) -> Self {
-        let mut handlers: HashMap<
-            (Discriminant<MouseRegionEvent>, Option<MouseButton>),
-            Rc<dyn Fn(MouseRegionEvent, &mut EventContext)>,
-        > = Default::default();
-        handlers.insert((MouseRegionEvent::move_disc(), None), Rc::new(|_, _| {}));
-        handlers.insert((MouseRegionEvent::hover_disc(), None), Rc::new(|_, _| {}));
-        for button in MouseButton::all() {
-            handlers.insert(
-                (MouseRegionEvent::drag_disc(), Some(button)),
-                Rc::new(|_, _| {}),
-            );
-            handlers.insert(
-                (MouseRegionEvent::down_disc(), Some(button)),
-                Rc::new(|_, _| {}),
-            );
-            handlers.insert(
-                (MouseRegionEvent::up_disc(), Some(button)),
-                Rc::new(|_, _| {}),
-            );
-            handlers.insert(
-                (MouseRegionEvent::click_disc(), Some(button)),
-                Rc::new(|_, _| {}),
-            );
-            handlers.insert(
-                (MouseRegionEvent::down_out_disc(), Some(button)),
-                Rc::new(|_, _| {}),
-            );
-        }
-        handlers.insert(
-            (MouseRegionEvent::scroll_wheel_disc(), None),
-            Rc::new(|_, _| {}),
-        );
-
-        Self {
-            view_id,
-            discriminant,
-            bounds,
-            handlers,
-        }
-    }
-
-    pub fn on_down(
-        mut self,
-        button: MouseButton,
-        handler: impl Fn(MouseButtonEvent, &mut EventContext) + 'static,
-    ) -> Self {
-        self.handlers.insert((MouseRegionEvent::down_disc(), Some(button)),
-            Rc::new(move |region_event, cx| {
-                if let MouseRegionEvent::Down(mouse_button_event) = region_event {
-                    handler(mouse_button_event, cx);
-                } else {
-                    panic!(
-                        "Mouse Region Event incorrectly called with mismatched event type. Expected MouseRegionEvent::Down, found {:?}", 
-                        region_event);
-                }
-            }));
-        self
-    }
-
-    pub fn on_up(
-        mut self,
-        button: MouseButton,
-        handler: impl Fn(MouseButtonEvent, &mut EventContext) + 'static,
-    ) -> Self {
-        self.handlers.insert((MouseRegionEvent::up_disc(), Some(button)),
-            Rc::new(move |region_event, cx| {
-                if let MouseRegionEvent::Up(mouse_button_event) = region_event {
-                    handler(mouse_button_event, cx);
-                } else {
-                    panic!(
-                        "Mouse Region Event incorrectly called with mismatched event type. Expected MouseRegionEvent::Up, found {:?}", 
-                        region_event);
-                }
-            }));
-        self
-    }
-
-    pub fn on_click(
-        mut self,
-        button: MouseButton,
-        handler: impl Fn(MouseButtonEvent, &mut EventContext) + 'static,
-    ) -> Self {
-        self.handlers.insert((MouseRegionEvent::click_disc(), Some(button)),
-            Rc::new(move |region_event, cx| {
-                if let MouseRegionEvent::Click(mouse_button_event) = region_event {
-                    handler(mouse_button_event, cx);
-                } else {
-                    panic!(
-                        "Mouse Region Event incorrectly called with mismatched event type. Expected MouseRegionEvent::Click, found {:?}", 
-                        region_event);
-                }
-            }));
-        self
-    }
-
-    pub fn on_down_out(
-        mut self,
-        button: MouseButton,
-        handler: impl Fn(MouseButtonEvent, &mut EventContext) + 'static,
-    ) -> Self {
-        self.handlers.insert((MouseRegionEvent::down_out_disc(), Some(button)),
-            Rc::new(move |region_event, cx| {
-                if let MouseRegionEvent::DownOut(mouse_button_event) = region_event {
-                    handler(mouse_button_event, cx);
-                } else {
-                    panic!(
-                        "Mouse Region Event incorrectly called with mismatched event type. Expected MouseRegionEvent::DownOut, found {:?}", 
-                        region_event);
-                }
-            }));
-        self
-    }
-
-    pub fn on_drag(
-        mut self,
-        button: MouseButton,
-        handler: impl Fn(Vector2F, MouseMovedEvent, &mut EventContext) + 'static,
-    ) -> Self {
-        self.handlers.insert((MouseRegionEvent::drag_disc(), Some(button)),
-            Rc::new(move |region_event, cx| {
-                if let MouseRegionEvent::Drag(prev_drag_position, mouse_moved_event) = region_event {
-                    handler(prev_drag_position, mouse_moved_event, cx);
-                } else {
-                    panic!(
-                        "Mouse Region Event incorrectly called with mismatched event type. Expected MouseRegionEvent::Drag, found {:?}", 
-                        region_event);
-                }
-            }));
-        self
-    }
-
-    pub fn on_hover(
-        mut self,
-        handler: impl Fn(bool, MouseMovedEvent, &mut EventContext) + 'static,
-    ) -> Self {
-        self.handlers.insert((MouseRegionEvent::hover_disc(), None),
-            Rc::new(move |region_event, cx| {
-                if let MouseRegionEvent::Hover(hover, mouse_moved_event) = region_event {
-                    handler(hover, mouse_moved_event, cx);
-                } else {
-                    panic!(
-                        "Mouse Region Event incorrectly called with mismatched event type. Expected MouseRegionEvent::Hover, found {:?}", 
-                        region_event);
-                }
-            }));
-        self
-    }
-}
-
-#[derive(Copy, Clone, Eq, PartialEq, Hash)]
-pub struct MouseRegionId {
-    pub view_id: usize,
-    pub discriminant: (TypeId, usize),
-}
-
 #[derive(Default, Debug)]
 pub struct Quad {
     pub bounds: RectF,
diff --git a/crates/gpui/src/scene/mouse_region.rs b/crates/gpui/src/scene/mouse_region.rs
new file mode 100644
index 0000000000..3d680876c7
--- /dev/null
+++ b/crates/gpui/src/scene/mouse_region.rs
@@ -0,0 +1,327 @@
+use std::{any::TypeId, mem::Discriminant, rc::Rc};
+
+use collections::HashMap;
+use pathfinder_geometry::{rect::RectF, vector::Vector2F};
+
+use crate::{EventContext, MouseButton, MouseButtonEvent, MouseMovedEvent, ScrollWheelEvent};
+
+#[derive(Clone, Default)]
+pub struct MouseRegion {
+    pub view_id: usize,
+    pub discriminant: Option<(TypeId, usize)>,
+    pub bounds: RectF,
+    pub handlers: HandlerSet,
+}
+
+impl MouseRegion {
+    pub fn new(view_id: usize, discriminant: Option<(TypeId, usize)>, bounds: RectF) -> Self {
+        Self {
+            view_id,
+            discriminant,
+            bounds,
+            handlers: Default::default(),
+        }
+    }
+
+    pub fn handle_all(
+        view_id: usize,
+        discriminant: Option<(TypeId, usize)>,
+        bounds: RectF,
+    ) -> Self {
+        Self {
+            view_id,
+            discriminant,
+            bounds,
+            handlers: HandlerSet::handle_all(),
+        }
+    }
+
+    pub fn on_down(
+        mut self,
+        button: MouseButton,
+        handler: impl Fn(MouseButtonEvent, &mut EventContext) + 'static,
+    ) -> Self {
+        self.handlers = self.handlers.on_down(button, handler);
+        self
+    }
+
+    pub fn on_up(
+        mut self,
+        button: MouseButton,
+        handler: impl Fn(MouseButtonEvent, &mut EventContext) + 'static,
+    ) -> Self {
+        self.handlers = self.handlers.on_up(button, handler);
+        self
+    }
+
+    pub fn on_click(
+        mut self,
+        button: MouseButton,
+        handler: impl Fn(MouseButtonEvent, &mut EventContext) + 'static,
+    ) -> Self {
+        self.handlers = self.handlers.on_click(button, handler);
+        self
+    }
+
+    pub fn on_down_out(
+        mut self,
+        button: MouseButton,
+        handler: impl Fn(MouseButtonEvent, &mut EventContext) + 'static,
+    ) -> Self {
+        self.handlers = self.handlers.on_down_out(button, handler);
+        self
+    }
+
+    pub fn on_drag(
+        mut self,
+        button: MouseButton,
+        handler: impl Fn(Vector2F, MouseMovedEvent, &mut EventContext) + 'static,
+    ) -> Self {
+        self.handlers = self.handlers.on_drag(button, handler);
+        self
+    }
+
+    pub fn on_hover(
+        mut self,
+        handler: impl Fn(bool, MouseMovedEvent, &mut EventContext) + 'static,
+    ) -> Self {
+        self.handlers = self.handlers.on_hover(handler);
+        self
+    }
+}
+
+#[derive(Copy, Clone, Eq, PartialEq, Hash)]
+pub struct MouseRegionId {
+    pub view_id: usize,
+    pub discriminant: (TypeId, usize),
+}
+
+#[derive(Clone, Default)]
+pub struct HandlerSet {
+    pub set: HashMap<
+        (Discriminant<MouseRegionEvent>, Option<MouseButton>),
+        Rc<dyn Fn(MouseRegionEvent, &mut EventContext)>,
+    >,
+}
+
+impl HandlerSet {
+    pub fn handle_all() -> Self {
+        let mut set: HashMap<
+            (Discriminant<MouseRegionEvent>, Option<MouseButton>),
+            Rc<dyn Fn(MouseRegionEvent, &mut EventContext)>,
+        > = Default::default();
+
+        set.insert((MouseRegionEvent::move_disc(), None), Rc::new(|_, _| {}));
+        set.insert((MouseRegionEvent::hover_disc(), None), Rc::new(|_, _| {}));
+        for button in MouseButton::all() {
+            set.insert(
+                (MouseRegionEvent::drag_disc(), Some(button)),
+                Rc::new(|_, _| {}),
+            );
+            set.insert(
+                (MouseRegionEvent::down_disc(), Some(button)),
+                Rc::new(|_, _| {}),
+            );
+            set.insert(
+                (MouseRegionEvent::up_disc(), Some(button)),
+                Rc::new(|_, _| {}),
+            );
+            set.insert(
+                (MouseRegionEvent::click_disc(), Some(button)),
+                Rc::new(|_, _| {}),
+            );
+            set.insert(
+                (MouseRegionEvent::down_out_disc(), Some(button)),
+                Rc::new(|_, _| {}),
+            );
+        }
+        set.insert(
+            (MouseRegionEvent::scroll_wheel_disc(), None),
+            Rc::new(|_, _| {}),
+        );
+
+        HandlerSet { set }
+    }
+
+    pub fn get(
+        &self,
+        key: &(Discriminant<MouseRegionEvent>, Option<MouseButton>),
+    ) -> Option<Rc<dyn Fn(MouseRegionEvent, &mut EventContext)>> {
+        self.set.get(key).cloned()
+    }
+
+    pub fn on_down(
+        mut self,
+        button: MouseButton,
+        handler: impl Fn(MouseButtonEvent, &mut EventContext) + 'static,
+    ) -> Self {
+        self.set.insert((MouseRegionEvent::down_disc(), Some(button)),
+            Rc::new(move |region_event, cx| {
+                if let MouseRegionEvent::Down(mouse_button_event) = region_event {
+                    handler(mouse_button_event, cx);
+                } else {
+                    panic!(
+                        "Mouse Region Event incorrectly called with mismatched event type. Expected MouseRegionEvent::Down, found {:?}", 
+                        region_event);
+                }
+            }));
+        self
+    }
+
+    pub fn on_up(
+        mut self,
+        button: MouseButton,
+        handler: impl Fn(MouseButtonEvent, &mut EventContext) + 'static,
+    ) -> Self {
+        self.set.insert((MouseRegionEvent::up_disc(), Some(button)),
+            Rc::new(move |region_event, cx| {
+                if let MouseRegionEvent::Up(mouse_button_event) = region_event {
+                    handler(mouse_button_event, cx);
+                } else {
+                    panic!(
+                        "Mouse Region Event incorrectly called with mismatched event type. Expected MouseRegionEvent::Up, found {:?}", 
+                        region_event);
+                }
+            }));
+        self
+    }
+
+    pub fn on_click(
+        mut self,
+        button: MouseButton,
+        handler: impl Fn(MouseButtonEvent, &mut EventContext) + 'static,
+    ) -> Self {
+        self.set.insert((MouseRegionEvent::click_disc(), Some(button)),
+            Rc::new(move |region_event, cx| {
+                if let MouseRegionEvent::Click(mouse_button_event) = region_event {
+                    handler(mouse_button_event, cx);
+                } else {
+                    panic!(
+                        "Mouse Region Event incorrectly called with mismatched event type. Expected MouseRegionEvent::Click, found {:?}", 
+                        region_event);
+                }
+            }));
+        self
+    }
+
+    pub fn on_down_out(
+        mut self,
+        button: MouseButton,
+        handler: impl Fn(MouseButtonEvent, &mut EventContext) + 'static,
+    ) -> Self {
+        self.set.insert((MouseRegionEvent::down_out_disc(), Some(button)),
+            Rc::new(move |region_event, cx| {
+                if let MouseRegionEvent::DownOut(mouse_button_event) = region_event {
+                    handler(mouse_button_event, cx);
+                } else {
+                    panic!(
+                        "Mouse Region Event incorrectly called with mismatched event type. Expected MouseRegionEvent::DownOut, found {:?}", 
+                        region_event);
+                }
+            }));
+        self
+    }
+
+    pub fn on_drag(
+        mut self,
+        button: MouseButton,
+        handler: impl Fn(Vector2F, MouseMovedEvent, &mut EventContext) + 'static,
+    ) -> Self {
+        self.set.insert((MouseRegionEvent::drag_disc(), Some(button)),
+            Rc::new(move |region_event, cx| {
+                if let MouseRegionEvent::Drag(prev_drag_position, mouse_moved_event) = region_event {
+                    handler(prev_drag_position, mouse_moved_event, cx);
+                } else {
+                    panic!(
+                        "Mouse Region Event incorrectly called with mismatched event type. Expected MouseRegionEvent::Drag, found {:?}", 
+                        region_event);
+                }
+            }));
+        self
+    }
+
+    pub fn on_hover(
+        mut self,
+        handler: impl Fn(bool, MouseMovedEvent, &mut EventContext) + 'static,
+    ) -> Self {
+        self.set.insert((MouseRegionEvent::hover_disc(), None),
+            Rc::new(move |region_event, cx| {
+                if let MouseRegionEvent::Hover(hover, mouse_moved_event) = region_event {
+                    handler(hover, mouse_moved_event, cx);
+                } else {
+                    panic!(
+                        "Mouse Region Event incorrectly called with mismatched event type. Expected MouseRegionEvent::Hover, found {:?}", 
+                        region_event);
+                }
+            }));
+        self
+    }
+}
+
+#[derive(Debug)]
+pub enum MouseRegionEvent {
+    Move(MouseMovedEvent),
+    Drag(Vector2F, MouseMovedEvent),
+    Hover(bool, MouseMovedEvent),
+    Down(MouseButtonEvent),
+    Up(MouseButtonEvent),
+    Click(MouseButtonEvent),
+    DownOut(MouseButtonEvent),
+    ScrollWheel(ScrollWheelEvent),
+}
+
+impl MouseRegionEvent {
+    pub fn move_disc() -> Discriminant<MouseRegionEvent> {
+        std::mem::discriminant(&MouseRegionEvent::Move(Default::default()))
+    }
+    pub fn drag_disc() -> Discriminant<MouseRegionEvent> {
+        std::mem::discriminant(&MouseRegionEvent::Drag(
+            Default::default(),
+            Default::default(),
+        ))
+    }
+    pub fn hover_disc() -> Discriminant<MouseRegionEvent> {
+        std::mem::discriminant(&MouseRegionEvent::Hover(
+            Default::default(),
+            Default::default(),
+        ))
+    }
+    pub fn down_disc() -> Discriminant<MouseRegionEvent> {
+        std::mem::discriminant(&MouseRegionEvent::Down(Default::default()))
+    }
+    pub fn up_disc() -> Discriminant<MouseRegionEvent> {
+        std::mem::discriminant(&MouseRegionEvent::Up(Default::default()))
+    }
+    pub fn click_disc() -> Discriminant<MouseRegionEvent> {
+        std::mem::discriminant(&MouseRegionEvent::Click(Default::default()))
+    }
+    pub fn down_out_disc() -> Discriminant<MouseRegionEvent> {
+        std::mem::discriminant(&MouseRegionEvent::DownOut(Default::default()))
+    }
+    pub fn scroll_wheel_disc() -> Discriminant<MouseRegionEvent> {
+        std::mem::discriminant(&MouseRegionEvent::ScrollWheel(Default::default()))
+    }
+
+    pub fn handler_key(&self) -> (Discriminant<MouseRegionEvent>, Option<MouseButton>) {
+        match self {
+            MouseRegionEvent::Move(_) => (Self::move_disc(), None),
+            MouseRegionEvent::Drag(_, MouseMovedEvent { pressed_button, .. }) => {
+                (Self::drag_disc(), *pressed_button)
+            }
+            MouseRegionEvent::Hover(_, _) => (Self::hover_disc(), None),
+            MouseRegionEvent::Down(MouseButtonEvent { button, .. }) => {
+                (Self::down_disc(), Some(*button))
+            }
+            MouseRegionEvent::Up(MouseButtonEvent { button, .. }) => {
+                (Self::up_disc(), Some(*button))
+            }
+            MouseRegionEvent::Click(MouseButtonEvent { button, .. }) => {
+                (Self::click_disc(), Some(*button))
+            }
+            MouseRegionEvent::DownOut(MouseButtonEvent { button, .. }) => {
+                (Self::down_out_disc(), Some(*button))
+            }
+            MouseRegionEvent::ScrollWheel(_) => (Self::scroll_wheel_disc(), None),
+        }
+    }
+}

From deeefed7ebaf196e03cb2b7141a70acbdb1b1091 Mon Sep 17 00:00:00 2001
From: K Simmons <keith@zed.dev>
Date: Mon, 18 Jul 2022 10:08:14 -0700
Subject: [PATCH 11/22] Change mouse_event_handler to use HandlerSet

---
 .../gpui/src/elements/mouse_event_handler.rs  | 27 +++++++++++--------
 crates/gpui/src/scene/mouse_region.rs         | 11 +++++++-
 2 files changed, 26 insertions(+), 12 deletions(-)

diff --git a/crates/gpui/src/elements/mouse_event_handler.rs b/crates/gpui/src/elements/mouse_event_handler.rs
index 3a8a5f6d63..40c35b80bc 100644
--- a/crates/gpui/src/elements/mouse_event_handler.rs
+++ b/crates/gpui/src/elements/mouse_event_handler.rs
@@ -7,7 +7,7 @@ use crate::{
         vector::{vec2f, Vector2F},
     },
     platform::CursorStyle,
-    scene::CursorRegion,
+    scene::{CursorRegion, HandlerSet},
     DebugContext, Element, ElementBox, Event, EventContext, LayoutContext, MouseButton,
     MouseButtonEvent, MouseMovedEvent, MouseRegion, MouseState, PaintContext, RenderContext,
     SizeConstraint, View,
@@ -16,8 +16,9 @@ use serde_json::json;
 
 pub struct MouseEventHandler {
     child: ElementBox,
+    discriminant: (TypeId, usize),
     cursor_style: Option<CursorStyle>,
-    region: MouseRegion,
+    handlers: HandlerSet,
     padding: Padding,
 }
 
@@ -31,7 +32,8 @@ impl MouseEventHandler {
         Self {
             child: render_child(cx.mouse_state::<Tag>(id), cx),
             cursor_style: None,
-            region: MouseRegion::new(0, Some((TypeId::of::<Tag>(), id)), Default::default()),
+            discriminant: (TypeId::of::<Tag>(), id),
+            handlers: Default::default(),
             padding: Default::default(),
         }
     }
@@ -46,7 +48,7 @@ impl MouseEventHandler {
         button: MouseButton,
         handler: impl Fn(MouseButtonEvent, &mut EventContext) + 'static,
     ) -> Self {
-        self.region = self.region.on_down(button, handler);
+        self.handlers = self.handlers.on_down(button, handler);
         self
     }
 
@@ -55,7 +57,7 @@ impl MouseEventHandler {
         button: MouseButton,
         handler: impl Fn(MouseButtonEvent, &mut EventContext) + 'static,
     ) -> Self {
-        self.region = self.region.on_click(button, handler);
+        self.handlers = self.handlers.on_click(button, handler);
         self
     }
 
@@ -64,7 +66,7 @@ impl MouseEventHandler {
         button: MouseButton,
         handler: impl Fn(MouseButtonEvent, &mut EventContext) + 'static,
     ) -> Self {
-        self.region = self.region.on_down_out(button, handler);
+        self.handlers = self.handlers.on_down_out(button, handler);
         self
     }
 
@@ -73,7 +75,7 @@ impl MouseEventHandler {
         button: MouseButton,
         handler: impl Fn(Vector2F, MouseMovedEvent, &mut EventContext) + 'static,
     ) -> Self {
-        self.region = self.region.on_drag(button, handler);
+        self.handlers = self.handlers.on_drag(button, handler);
         self
     }
 
@@ -81,7 +83,7 @@ impl MouseEventHandler {
         mut self,
         handler: impl Fn(bool, MouseMovedEvent, &mut EventContext) + 'static,
     ) -> Self {
-        self.region = self.region.on_hover(handler);
+        self.handlers = self.handlers.on_hover(handler);
         self
     }
 
@@ -126,9 +128,12 @@ impl Element for MouseEventHandler {
             });
         }
 
-        self.region.view_id = cx.current_view_id();
-        self.region.bounds = hit_bounds;
-        cx.scene.push_mouse_region(self.region.clone());
+        cx.scene.push_mouse_region(MouseRegion::from_handlers(
+            cx.current_view_id(),
+            Some(self.discriminant.clone()),
+            hit_bounds,
+            self.handlers.clone(),
+        ));
 
         self.child.paint(bounds.origin(), visible_bounds, cx);
     }
diff --git a/crates/gpui/src/scene/mouse_region.rs b/crates/gpui/src/scene/mouse_region.rs
index 3d680876c7..d3d788c466 100644
--- a/crates/gpui/src/scene/mouse_region.rs
+++ b/crates/gpui/src/scene/mouse_region.rs
@@ -15,11 +15,20 @@ pub struct MouseRegion {
 
 impl MouseRegion {
     pub fn new(view_id: usize, discriminant: Option<(TypeId, usize)>, bounds: RectF) -> Self {
+        Self::from_handlers(view_id, discriminant, bounds, Default::default())
+    }
+
+    pub fn from_handlers(
+        view_id: usize,
+        discriminant: Option<(TypeId, usize)>,
+        bounds: RectF,
+        handlers: HandlerSet,
+    ) -> Self {
         Self {
             view_id,
             discriminant,
             bounds,
-            handlers: Default::default(),
+            handlers,
         }
     }
 

From 46384e71b73716fe3c4abc5244e09348f7c50d08 Mon Sep 17 00:00:00 2001
From: Nate Butler <iamnbutler@gmail.com>
Date: Tue, 19 Jul 2022 17:11:15 -0400
Subject: [PATCH 12/22] Add icon sets for sizes 8, 12 and 16, remove old icons

---
 assets/icons/Icon12CircleXMark.svg             |  3 ---
 assets/icons/Icon12FolderTree.svg              |  3 ---
 assets/icons/Icon16ArrowLeft.svg               |  3 ---
 assets/icons/Icon16ArrowRight.svg              |  3 ---
 assets/icons/Icon16CircleCheck.svg             |  3 ---
 assets/icons/Icon16CircleInfo.svg              |  3 ---
 assets/icons/Icon16CircleXMark.svg             |  3 ---
 assets/icons/Icon16MagnifyingGlass.svg         |  3 ---
 assets/icons/Icon16TriangleExclamation.svg     |  3 ---
 assets/icons/accept.svg                        |  3 ---
 assets/icons/add-contact.svg                   |  3 ---
 assets/icons/arrow-left.svg                    |  3 ---
 assets/icons/arrow-right.svg                   |  3 ---
 assets/icons/arrow_down_12.svg                 |  3 +++
 assets/icons/arrow_down_16.svg                 |  3 +++
 assets/icons/{decline.svg => arrow_down_8.svg} |  2 +-
 assets/icons/arrow_left_12.svg                 |  3 +++
 assets/icons/arrow_left_16.svg                 |  3 +++
 assets/icons/arrow_left_8.svg                  |  3 +++
 assets/icons/arrow_right_12.svg                |  3 +++
 assets/icons/arrow_right_16.svg                |  3 +++
 assets/icons/arrow_right_8.svg                 |  3 +++
 assets/icons/arrow_up_12.svg                   |  3 +++
 assets/icons/arrow_up_16.svg                   |  3 +++
 assets/icons/arrow_up_8.svg                    |  3 +++
 assets/icons/arrow_up_right_8.svg              |  3 +++
 assets/icons/backspace _12.svg                 |  3 +++
 assets/icons/backspace _16.svg                 |  3 +++
 assets/icons/backspace _8.svg                  |  3 +++
 assets/icons/bolt_12.svg                       |  3 +++
 assets/icons/bolt_16.svg                       |  3 +++
 assets/icons/bolt_8.svg                        |  3 +++
 assets/icons/bolt_slash_12.svg                 |  3 +++
 assets/icons/bolt_slash_16.svg                 |  3 +++
 assets/icons/bolt_slash_8.svg                  | 10 ++++++++++
 assets/icons/caret_down_12.svg                 |  3 +++
 assets/icons/caret_down_16.svg                 |  3 +++
 assets/icons/caret_down_8.svg                  |  3 +++
 assets/icons/caret_left_12.svg                 |  3 +++
 assets/icons/caret_left_16.svg                 |  3 +++
 assets/icons/caret_left_8.svg                  |  3 +++
 assets/icons/caret_right_12.svg                |  3 +++
 assets/icons/caret_right_16.svg                |  3 +++
 assets/icons/caret_right_8.svg                 |  3 +++
 assets/icons/caret_up_12.svg                   |  3 +++
 assets/icons/caret_up_16.svg                   |  3 +++
 assets/icons/caret_up_8.svg                    |  3 +++
 assets/icons/check_12.svg                      |  3 +++
 assets/icons/check_16.svg                      |  3 +++
 assets/icons/check_8.svg                       |  3 +++
 assets/icons/chevron_down_12.svg               |  3 +++
 assets/icons/chevron_down_16.svg               |  3 +++
 assets/icons/chevron_down_8.svg                |  3 +++
 assets/icons/chevron_left_12.svg               |  3 +++
 assets/icons/chevron_left_16.svg               |  3 +++
 assets/icons/chevron_left_8.svg                |  3 +++
 assets/icons/chevron_right_12.svg              |  3 +++
 assets/icons/chevron_right_16.svg              |  3 +++
 assets/icons/chevron_right_8.svg               |  3 +++
 assets/icons/chevron_up_12.svg                 |  3 +++
 assets/icons/chevron_up_16.svg                 |  3 +++
 assets/icons/chevron_up_8.svg                  |  3 +++
 assets/icons/circle_check_12.svg               |  3 +++
 assets/icons/circle_check_16.svg               |  3 +++
 assets/icons/circle_check_8.svg                |  3 +++
 assets/icons/circle_info_12.svg                |  3 +++
 assets/icons/circle_info_16.svg                |  3 +++
 assets/icons/circle_info_8.svg                 |  3 +++
 assets/icons/circle_up_12.svg                  |  3 +++
 assets/icons/circle_up_16.svg                  |  3 +++
 assets/icons/circle_up_8.svg                   |  3 +++
 assets/icons/circle_x_mark_12.svg              |  3 +++
 assets/icons/circle_x_mark_16.svg              |  3 +++
 assets/icons/circle_x_mark_8.svg               |  3 +++
 assets/icons/cloud_12.svg                      |  3 +++
 assets/icons/cloud_8.svg                       |  3 +++
 assets/icons/cloud_slash_12.svg                |  3 +++
 assets/icons/cloud_slash_8.svg                 |  3 +++
 assets/icons/comment-16.svg                    |  3 ---
 assets/icons/contacts-solid-14.svg             |  3 ---
 assets/icons/diagnostic-error-10.svg           |  3 ---
 assets/icons/diagnostic-summary-error.svg      |  3 ---
 assets/icons/diagnostic-summary-warning.svg    |  3 ---
 assets/icons/diagnostic-warning-10.svg         |  3 ---
 assets/icons/disclosure-closed.svg             |  3 ---
 assets/icons/disclosure-open.svg               |  3 ---
 assets/icons/download-solid-14.svg             |  3 ---
 assets/icons/download_12.svg                   |  3 +++
 assets/icons/download_8.svg                    |  3 +++
 assets/icons/error-solid-14.svg                |  3 ---
 assets/icons/file-16.svg                       |  1 -
 assets/icons/file_12.svg                       |  4 ++++
 assets/icons/file_16.svg                       |  4 ++++
 assets/icons/file_8.svg                        |  4 ++++
 assets/icons/folder-tree-solid-14.svg          |  3 ---
 assets/icons/folder_tree_12.svg                |  3 +++
 ...Icon16FolderTree.svg => folder_tree_16.svg} |  0
 assets/icons/folder_tree_8.svg                 |  3 +++
 assets/icons/jump.svg                          |  3 ---
 assets/icons/lock-8.svg                        |  3 ---
 assets/icons/lock_8.svg                        |  3 +++
 assets/icons/magnifier.svg                     |  3 ---
 assets/icons/magnifying_glass_12.svg           |  3 +++
 assets/icons/magnifying_glass_16.svg           |  3 +++
 assets/icons/magnifying_glass_8.svg            |  3 +++
 assets/icons/no-error-solid-14.svg             |  3 ---
 assets/icons/offline-14.svg                    |  3 ---
 assets/icons/share.svg                         |  3 ---
 assets/icons/signed-out-12.svg                 |  3 ---
 assets/icons/split.svg                         |  5 -----
 assets/icons/split_12.svg                      |  5 +++++
 assets/icons/terminal-solid-14.svg             |  3 ---
 assets/icons/terminal_12.svg                   |  3 +++
 assets/icons/terminal_16.svg                   |  3 +++
 assets/icons/terminal_8.svg                    |  3 +++
 assets/icons/triangle_exclamation_12.svg       |  3 +++
 assets/icons/triangle_exclamation_16.svg       |  3 +++
 assets/icons/triangle_exclamation_8.svg        |  3 +++
 assets/icons/unlock_8.svg                      |  3 +++
 assets/icons/user_circle_12.svg                |  3 +++
 assets/icons/user_circle_8.svg                 |  3 +++
 assets/icons/user_group_12.svg                 |  3 +++
 .../{Icon16UserGroup.svg => user_group_16.svg} |  0
 assets/icons/user_group_8.svg                  |  3 +++
 assets/icons/user_plus_12.svg                  |  3 +++
 assets/icons/user_plus_16.svg                  |  3 +++
 assets/icons/user_plus_8.svg                   |  3 +++
 assets/icons/warning-solid-14.svg              |  3 ---
 assets/icons/x.svg                             |  3 ---
 assets/icons/x_mark_12.svg                     |  3 +++
 assets/icons/x_mark_16.svg                     |  3 +++
 assets/icons/x_mark_8.svg                      |  3 +++
 assets/icons/x_mark_thin_8.svg                 |  3 +++
 assets/icons/zap.svg                           |  3 ---
 .../src/activity_indicator.rs                  |  6 +++---
 crates/auto_update/src/update_notification.rs  |  2 +-
 crates/contacts_panel/src/contact_finder.rs    |  4 ++--
 crates/contacts_panel/src/contacts_panel.rs    | 18 +++++++++---------
 crates/contacts_panel/src/notifications.rs     |  2 +-
 crates/diagnostics/src/diagnostics.rs          |  8 ++++----
 crates/diagnostics/src/items.rs                |  6 +++---
 crates/editor/src/editor.rs                    |  2 +-
 crates/editor/src/element.rs                   |  2 +-
 crates/project_panel/src/project_panel.rs      |  4 ++--
 crates/search/src/project_search.rs            |  2 +-
 crates/terminal/src/terminal.rs                |  2 +-
 crates/workspace/src/pane.rs                   |  4 ++--
 crates/workspace/src/toolbar.rs                |  4 ++--
 crates/workspace/src/workspace.rs              |  2 +-
 crates/zed/src/zed.rs                          |  4 ++--
 150 files changed, 331 insertions(+), 148 deletions(-)
 delete mode 100644 assets/icons/Icon12CircleXMark.svg
 delete mode 100644 assets/icons/Icon12FolderTree.svg
 delete mode 100644 assets/icons/Icon16ArrowLeft.svg
 delete mode 100644 assets/icons/Icon16ArrowRight.svg
 delete mode 100644 assets/icons/Icon16CircleCheck.svg
 delete mode 100644 assets/icons/Icon16CircleInfo.svg
 delete mode 100644 assets/icons/Icon16CircleXMark.svg
 delete mode 100644 assets/icons/Icon16MagnifyingGlass.svg
 delete mode 100644 assets/icons/Icon16TriangleExclamation.svg
 delete mode 100644 assets/icons/accept.svg
 delete mode 100644 assets/icons/add-contact.svg
 delete mode 100644 assets/icons/arrow-left.svg
 delete mode 100644 assets/icons/arrow-right.svg
 create mode 100644 assets/icons/arrow_down_12.svg
 create mode 100644 assets/icons/arrow_down_16.svg
 rename assets/icons/{decline.svg => arrow_down_8.svg} (53%)
 create mode 100644 assets/icons/arrow_left_12.svg
 create mode 100644 assets/icons/arrow_left_16.svg
 create mode 100644 assets/icons/arrow_left_8.svg
 create mode 100644 assets/icons/arrow_right_12.svg
 create mode 100644 assets/icons/arrow_right_16.svg
 create mode 100644 assets/icons/arrow_right_8.svg
 create mode 100644 assets/icons/arrow_up_12.svg
 create mode 100644 assets/icons/arrow_up_16.svg
 create mode 100644 assets/icons/arrow_up_8.svg
 create mode 100644 assets/icons/arrow_up_right_8.svg
 create mode 100644 assets/icons/backspace _12.svg
 create mode 100644 assets/icons/backspace _16.svg
 create mode 100644 assets/icons/backspace _8.svg
 create mode 100644 assets/icons/bolt_12.svg
 create mode 100644 assets/icons/bolt_16.svg
 create mode 100644 assets/icons/bolt_8.svg
 create mode 100644 assets/icons/bolt_slash_12.svg
 create mode 100644 assets/icons/bolt_slash_16.svg
 create mode 100644 assets/icons/bolt_slash_8.svg
 create mode 100644 assets/icons/caret_down_12.svg
 create mode 100644 assets/icons/caret_down_16.svg
 create mode 100644 assets/icons/caret_down_8.svg
 create mode 100644 assets/icons/caret_left_12.svg
 create mode 100644 assets/icons/caret_left_16.svg
 create mode 100644 assets/icons/caret_left_8.svg
 create mode 100644 assets/icons/caret_right_12.svg
 create mode 100644 assets/icons/caret_right_16.svg
 create mode 100644 assets/icons/caret_right_8.svg
 create mode 100644 assets/icons/caret_up_12.svg
 create mode 100644 assets/icons/caret_up_16.svg
 create mode 100644 assets/icons/caret_up_8.svg
 create mode 100644 assets/icons/check_12.svg
 create mode 100644 assets/icons/check_16.svg
 create mode 100644 assets/icons/check_8.svg
 create mode 100644 assets/icons/chevron_down_12.svg
 create mode 100644 assets/icons/chevron_down_16.svg
 create mode 100644 assets/icons/chevron_down_8.svg
 create mode 100644 assets/icons/chevron_left_12.svg
 create mode 100644 assets/icons/chevron_left_16.svg
 create mode 100644 assets/icons/chevron_left_8.svg
 create mode 100644 assets/icons/chevron_right_12.svg
 create mode 100644 assets/icons/chevron_right_16.svg
 create mode 100644 assets/icons/chevron_right_8.svg
 create mode 100644 assets/icons/chevron_up_12.svg
 create mode 100644 assets/icons/chevron_up_16.svg
 create mode 100644 assets/icons/chevron_up_8.svg
 create mode 100644 assets/icons/circle_check_12.svg
 create mode 100644 assets/icons/circle_check_16.svg
 create mode 100644 assets/icons/circle_check_8.svg
 create mode 100644 assets/icons/circle_info_12.svg
 create mode 100644 assets/icons/circle_info_16.svg
 create mode 100644 assets/icons/circle_info_8.svg
 create mode 100644 assets/icons/circle_up_12.svg
 create mode 100644 assets/icons/circle_up_16.svg
 create mode 100644 assets/icons/circle_up_8.svg
 create mode 100644 assets/icons/circle_x_mark_12.svg
 create mode 100644 assets/icons/circle_x_mark_16.svg
 create mode 100644 assets/icons/circle_x_mark_8.svg
 create mode 100644 assets/icons/cloud_12.svg
 create mode 100644 assets/icons/cloud_8.svg
 create mode 100644 assets/icons/cloud_slash_12.svg
 create mode 100644 assets/icons/cloud_slash_8.svg
 delete mode 100644 assets/icons/comment-16.svg
 delete mode 100644 assets/icons/contacts-solid-14.svg
 delete mode 100644 assets/icons/diagnostic-error-10.svg
 delete mode 100644 assets/icons/diagnostic-summary-error.svg
 delete mode 100644 assets/icons/diagnostic-summary-warning.svg
 delete mode 100644 assets/icons/diagnostic-warning-10.svg
 delete mode 100644 assets/icons/disclosure-closed.svg
 delete mode 100644 assets/icons/disclosure-open.svg
 delete mode 100644 assets/icons/download-solid-14.svg
 create mode 100644 assets/icons/download_12.svg
 create mode 100644 assets/icons/download_8.svg
 delete mode 100644 assets/icons/error-solid-14.svg
 delete mode 100644 assets/icons/file-16.svg
 create mode 100644 assets/icons/file_12.svg
 create mode 100644 assets/icons/file_16.svg
 create mode 100644 assets/icons/file_8.svg
 delete mode 100644 assets/icons/folder-tree-solid-14.svg
 create mode 100644 assets/icons/folder_tree_12.svg
 rename assets/icons/{Icon16FolderTree.svg => folder_tree_16.svg} (100%)
 create mode 100644 assets/icons/folder_tree_8.svg
 delete mode 100644 assets/icons/jump.svg
 delete mode 100644 assets/icons/lock-8.svg
 create mode 100644 assets/icons/lock_8.svg
 delete mode 100644 assets/icons/magnifier.svg
 create mode 100644 assets/icons/magnifying_glass_12.svg
 create mode 100644 assets/icons/magnifying_glass_16.svg
 create mode 100644 assets/icons/magnifying_glass_8.svg
 delete mode 100644 assets/icons/no-error-solid-14.svg
 delete mode 100644 assets/icons/offline-14.svg
 delete mode 100644 assets/icons/share.svg
 delete mode 100644 assets/icons/signed-out-12.svg
 delete mode 100644 assets/icons/split.svg
 create mode 100644 assets/icons/split_12.svg
 delete mode 100644 assets/icons/terminal-solid-14.svg
 create mode 100644 assets/icons/terminal_12.svg
 create mode 100644 assets/icons/terminal_16.svg
 create mode 100644 assets/icons/terminal_8.svg
 create mode 100644 assets/icons/triangle_exclamation_12.svg
 create mode 100644 assets/icons/triangle_exclamation_16.svg
 create mode 100644 assets/icons/triangle_exclamation_8.svg
 create mode 100644 assets/icons/unlock_8.svg
 create mode 100644 assets/icons/user_circle_12.svg
 create mode 100644 assets/icons/user_circle_8.svg
 create mode 100644 assets/icons/user_group_12.svg
 rename assets/icons/{Icon16UserGroup.svg => user_group_16.svg} (100%)
 create mode 100644 assets/icons/user_group_8.svg
 create mode 100644 assets/icons/user_plus_12.svg
 create mode 100644 assets/icons/user_plus_16.svg
 create mode 100644 assets/icons/user_plus_8.svg
 delete mode 100644 assets/icons/warning-solid-14.svg
 delete mode 100644 assets/icons/x.svg
 create mode 100644 assets/icons/x_mark_12.svg
 create mode 100644 assets/icons/x_mark_16.svg
 create mode 100644 assets/icons/x_mark_8.svg
 create mode 100644 assets/icons/x_mark_thin_8.svg
 delete mode 100644 assets/icons/zap.svg

diff --git a/assets/icons/Icon12CircleXMark.svg b/assets/icons/Icon12CircleXMark.svg
deleted file mode 100644
index cf4f783aa0..0000000000
--- a/assets/icons/Icon12CircleXMark.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-<svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M0 6C0 2.68594 2.68594 0 6 0C9.31406 0 12 2.68594 12 6C12 9.31406 9.31406 12 6 12C2.68594 12 0 9.31406 0 6ZM4.10156 4.87734L5.20547 5.97891L4.10156 7.10156C3.88359 7.32188 3.88359 7.67813 4.10156 7.87734C4.32188 8.11641 4.67813 8.11641 4.87734 7.87734L5.97891 6.79453L7.10156 7.87734C7.32188 8.11641 7.67813 8.11641 7.87734 7.87734C8.11641 7.67813 8.11641 7.32188 7.87734 7.10156L6.79453 5.97891L7.87734 4.87734C8.11641 4.67813 8.11641 4.32188 7.87734 4.10156C7.67813 3.88359 7.32188 3.88359 7.10156 4.10156L5.97891 5.20547L4.87734 4.10156C4.67813 3.88359 4.32188 3.88359 4.10156 4.10156C3.88359 4.32188 3.88359 4.67813 4.10156 4.87734Z" fill="#717171"/>
-</svg>
diff --git a/assets/icons/Icon12FolderTree.svg b/assets/icons/Icon12FolderTree.svg
deleted file mode 100644
index 411b98d5b8..0000000000
--- a/assets/icons/Icon12FolderTree.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-<svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M11.3333 1.33332H9L8.33333 0.666656H6.66667C6.29958 0.666656 6 0.96624 6 1.33332V4.66666C6 5.03374 6.29958 5.33332 6.66667 5.33332H11.3333C11.7004 5.33332 12 5.03374 12 4.66666V1.99999C12 1.63291 11.7 1.33332 11.3333 1.33332ZM11.3333 7.33332H9L8.33333 6.66666H6.66667C6.29958 6.66666 6 6.96624 6 7.33332V10.6667C6 11.0337 6.29958 11.3333 6.66667 11.3333H11.3333C11.7004 11.3333 12 11.0337 12 10.6667V7.99999C12 7.63332 11.7 7.33332 11.3333 7.33332ZM1.33333 0.99999C1.33333 0.815094 1.185 0.666656 1 0.666656H0.333333C0.148438 0.666656 0 0.81499 0 0.99999V9.33332C0 9.70041 0.299583 9.99999 0.666667 9.99999H5.33333V8.66666H1.33333V3.99999H5.33333V2.66666H1.33333V0.99999Z" fill="#717171"/>
-</svg>
diff --git a/assets/icons/Icon16ArrowLeft.svg b/assets/icons/Icon16ArrowLeft.svg
deleted file mode 100644
index 905d643f1b..0000000000
--- a/assets/icons/Icon16ArrowLeft.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M15 8C15 8.55424 14.5804 9.00202 14.0262 9.00202H4.42238L7.7228 12.3024C8.11421 12.6939 8.11421 13.3279 7.7228 13.7194C7.52553 13.9151 7.26876 14.0121 7.01199 14.0121C6.75522 14.0121 6.49908 13.9143 6.30368 13.7186L1.29356 8.70846C0.902146 8.31705 0.902146 7.68295 1.29356 7.29154L6.30368 2.28142C6.6951 1.89 7.32919 1.89 7.72061 2.28142C8.11202 2.67283 8.11202 3.30692 7.72061 3.69834L4.42238 6.99797H14.0262C14.5804 6.99797 15 7.44575 15 8Z" fill="white"/>
-</svg>
diff --git a/assets/icons/Icon16ArrowRight.svg b/assets/icons/Icon16ArrowRight.svg
deleted file mode 100644
index 24cd660ab2..0000000000
--- a/assets/icons/Icon16ArrowRight.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M14.7071 8.70667L9.70681 13.707C9.51305 13.9039 9.25678 14.0008 9.00051 14.0008C8.74425 14.0008 8.48861 13.9031 8.29359 13.7078C7.90294 13.3171 7.90294 12.6843 8.29359 12.2936L11.5882 9.00044H2.00006C1.44784 9.00044 1 8.55353 1 8.00037C1 7.44721 1.44753 7.00031 1.99975 7.00031H11.5879L8.29391 3.70635C7.90326 3.3157 7.90326 2.68284 8.29391 2.29219C8.68456 1.90154 9.31741 1.90154 9.70806 2.29219L14.7084 7.29252C15.0975 7.68473 15.0975 8.31602 14.7068 8.70667H14.7071Z" fill="white"/>
-</svg>
diff --git a/assets/icons/Icon16CircleCheck.svg b/assets/icons/Icon16CircleCheck.svg
deleted file mode 100644
index 0b01e957c5..0000000000
--- a/assets/icons/Icon16CircleCheck.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M1 8C1 4.13359 4.13359 1 8 1C11.8664 1 15 4.13359 15 8C15 11.8664 11.8664 15 8 15C4.13359 15 1 11.8664 1 8ZM11.1664 6.79141C11.4645 6.49336 11.4645 6.00664 11.1664 5.70859C10.8684 5.41055 10.3816 5.41055 10.0836 5.70859L7.125 8.66719L5.91641 7.45859C5.61836 7.16055 5.13164 7.16055 4.83359 7.45859C4.53555 7.75664 4.53555 8.24336 4.83359 8.54141L6.58359 10.2914C6.88164 10.5895 7.36836 10.5895 7.66641 10.2914L11.1664 6.79141Z" fill="white"/>
-</svg>
diff --git a/assets/icons/Icon16CircleInfo.svg b/assets/icons/Icon16CircleInfo.svg
deleted file mode 100644
index e7058a0645..0000000000
--- a/assets/icons/Icon16CircleInfo.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M8 1C4.13359 1 1 4.13359 1 8C1 11.8664 4.13359 15 8 15C11.8664 15 15 11.8664 15 8C15 4.13359 11.8664 1 8 1ZM8 4.5C8.48316 4.5 8.875 4.89184 8.875 5.375C8.875 5.85816 8.48316 6.25 8 6.25C7.51684 6.25 7.125 5.85898 7.125 5.375C7.125 4.89102 7.51602 4.5 8 4.5ZM9.09375 11.5H6.90625C6.54531 11.5 6.25 11.2074 6.25 10.8438C6.25 10.4801 6.54395 10.1875 6.90625 10.1875H7.34375V8.4375H7.125C6.7627 8.4375 6.46875 8.14355 6.46875 7.78125C6.46875 7.41895 6.76406 7.125 7.125 7.125H8C8.3623 7.125 8.65625 7.41895 8.65625 7.78125V10.1875H9.09375C9.45605 10.1875 9.75 10.4814 9.75 10.8438C9.75 11.2061 9.45742 11.5 9.09375 11.5Z" fill="white"/>
-</svg>
diff --git a/assets/icons/Icon16CircleXMark.svg b/assets/icons/Icon16CircleXMark.svg
deleted file mode 100644
index f9e82dd4b0..0000000000
--- a/assets/icons/Icon16CircleXMark.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M1 8C1 4.13359 4.13359 1 8 1C11.8664 1 15 4.13359 15 8C15 11.8664 11.8664 15 8 15C4.13359 15 1 11.8664 1 8ZM5.78516 6.69023L7.07305 7.97539L5.78516 9.28516C5.53086 9.54219 5.53086 9.95781 5.78516 10.1902C6.04219 10.4691 6.45781 10.4691 6.69023 10.1902L7.97539 8.92695L9.28516 10.1902C9.54219 10.4691 9.95781 10.4691 10.1902 10.1902C10.4691 9.95781 10.4691 9.54219 10.1902 9.28516L8.92695 7.97539L10.1902 6.69023C10.4691 6.45781 10.4691 6.04219 10.1902 5.78516C9.95781 5.53086 9.54219 5.53086 9.28516 5.78516L7.97539 7.07305L6.69023 5.78516C6.45781 5.53086 6.04219 5.53086 5.78516 5.78516C5.53086 6.04219 5.53086 6.45781 5.78516 6.69023Z" fill="white"/>
-</svg>
diff --git a/assets/icons/Icon16MagnifyingGlass.svg b/assets/icons/Icon16MagnifyingGlass.svg
deleted file mode 100644
index 0f82f266ff..0000000000
--- a/assets/icons/Icon16MagnifyingGlass.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M14.6796 13.1313L11.4069 9.85858C12.1511 8.75373 12.5183 7.37329 12.3217 5.90235C11.9865 3.40037 9.93591 1.36429 7.43148 1.04714C3.70791 0.575777 0.576823 3.70687 1.04791 7.43051C1.36506 9.93604 3.40142 11.9883 5.90366 12.3218C7.37461 12.5181 8.75533 12.1512 9.8599 11.407L13.1326 14.6797C13.5597 15.1068 14.2522 15.1068 14.6793 14.6797C15.1058 14.2521 15.1058 13.5576 14.6793 13.1311L14.6796 13.1313ZM3.16355 6.68703C3.16352 4.75731 4.73347 3.18739 6.6632 3.18739C8.59292 3.18739 10.1628 4.75731 10.1628 6.68703C10.1628 8.61676 8.59292 10.1867 6.6632 10.1867C4.73347 10.1867 3.16355 8.6173 3.16355 6.68703V6.68703Z" fill="white"/>
-</svg>
diff --git a/assets/icons/Icon16TriangleExclamation.svg b/assets/icons/Icon16TriangleExclamation.svg
deleted file mode 100644
index 86a41d8160..0000000000
--- a/assets/icons/Icon16TriangleExclamation.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M14.8437 12.4025L9.01107 2.44905C8.56454 1.6834 7.43766 1.6834 6.98812 2.44905L1.15823 12.4025C0.709505 13.1654 1.26816 14.1252 2.1678 14.1252H13.833C14.7288 14.1252 15.2894 13.1682 14.8437 12.4025ZM7.34305 5.59369C7.34305 5.23138 7.637 4.93742 7.99932 4.93742C8.36164 4.93742 8.65559 5.23274 8.65559 5.59369V9.09381C8.65559 9.45613 8.36164 9.75008 8.02393 9.75008C7.68622 9.75008 7.34305 9.45749 7.34305 9.09381V5.59369V5.59369ZM7.99932 12.3752C7.52462 12.3752 7.1396 11.9902 7.1396 11.5155C7.1396 11.0408 7.52434 10.6557 7.99932 10.6557C8.4743 10.6557 8.85904 11.0408 8.85904 11.5155C8.85794 11.9896 8.47512 12.3752 7.99932 12.3752Z" fill="white"/>
-</svg>
diff --git a/assets/icons/accept.svg b/assets/icons/accept.svg
deleted file mode 100644
index 6a8a7d67a0..0000000000
--- a/assets/icons/accept.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-<svg width="8" height="6" viewBox="0 0 8 6" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M7.25 1L3.25 5L1 2.75" stroke="white" stroke-width="1.33333"/>
-</svg>
diff --git a/assets/icons/add-contact.svg b/assets/icons/add-contact.svg
deleted file mode 100644
index 4fc7790b9d..0000000000
--- a/assets/icons/add-contact.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-<svg width="12" height="10" viewBox="0 0 12 10" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M4.2 5.0002C5.52563 5.0002 6.6 3.92563 6.6 2.6002C6.6 1.27476 5.52563 0.200195 4.2 0.200195C2.87438 0.200195 1.8 1.27476 1.8 2.6002C1.8 3.92563 2.87438 5.0002 4.2 5.0002ZM5.15063 5.9002H3.24938C1.45519 5.9002 0 7.3552 0 9.14957C0 9.50957 0.291 9.8002 0.649875 9.8002H7.7505C8.10938 9.8002 8.4 9.50957 8.4 9.14957C8.4 7.3552 6.945 5.9002 5.15063 5.9002ZM11.55 3.9502H10.65V3.0502C10.65 2.8027 10.4494 2.6002 10.2 2.6002C9.95063 2.6002 9.75 2.80176 9.75 3.0502V3.9502H8.85C8.6025 3.9502 8.4 4.1527 8.4 4.4002C8.4 4.6477 8.60156 4.8502 8.85 4.8502H9.75V5.7502C9.75 5.99957 9.9525 6.2002 10.2 6.2002C10.4475 6.2002 10.65 5.99863 10.65 5.7502V4.8502H11.55C11.7994 4.8502 12 4.64957 12 4.4002C12 4.15082 11.7994 3.9502 11.55 3.9502Z" fill="#9C9C9C"/>
-</svg>
diff --git a/assets/icons/arrow-left.svg b/assets/icons/arrow-left.svg
deleted file mode 100644
index 904fdaa1a7..0000000000
--- a/assets/icons/arrow-left.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-<svg width="8" height="8" viewBox="0 0 8 8" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M8 3.99999C8 4.31671 7.76023 4.57258 7.44352 4.57258H1.95565L3.8416 6.45853C4.06527 6.6822 4.06527 7.04454 3.8416 7.2682C3.72887 7.38004 3.58215 7.43551 3.43542 7.43551C3.2887 7.43551 3.14233 7.37959 3.03068 7.26776L0.16775 4.40483C-0.0559165 4.18116 -0.0559165 3.81883 0.16775 3.59516L3.03068 0.732233C3.25434 0.508567 3.61668 0.508567 3.84035 0.732233C4.06401 0.955899 4.06401 1.31824 3.84035 1.5419L1.95565 3.42741H7.44352C7.76023 3.42741 8 3.68328 8 3.99999Z" fill="#839496"/>
-</svg>
diff --git a/assets/icons/arrow-right.svg b/assets/icons/arrow-right.svg
deleted file mode 100644
index b7e1bec6d8..0000000000
--- a/assets/icons/arrow-right.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-<svg width="8" height="8" viewBox="0 0 8 8" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M7.83265 4.40382L4.97532 7.26115C4.8646 7.37365 4.71816 7.42901 4.57172 7.42901C4.42528 7.42901 4.2792 7.37321 4.16777 7.26159C3.94454 7.03836 3.94454 6.67673 4.16777 6.4535L6.05039 4.57169H0.571465C0.255909 4.57169 0 4.31631 0 4.00022C0 3.68413 0.255731 3.42876 0.571287 3.42876H6.05021L4.16795 1.54649C3.94472 1.32326 3.94472 0.961634 4.16795 0.738405C4.39117 0.515177 4.75281 0.515177 4.97603 0.738405L7.83336 3.59573C8.0557 3.81985 8.0557 4.18059 7.83247 4.40382H7.83265Z" fill="#FDF6E3"/>
-</svg>
diff --git a/assets/icons/arrow_down_12.svg b/assets/icons/arrow_down_12.svg
new file mode 100644
index 0000000000..63cbe50997
--- /dev/null
+++ b/assets/icons/arrow_down_12.svg
@@ -0,0 +1,3 @@
+<svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M7.5 6L10.5 6V7.5L6 12L1.5 7.5V6H4.5V0L7.5 3.57746e-08V6Z" fill="white"/>
+</svg>
diff --git a/assets/icons/arrow_down_16.svg b/assets/icons/arrow_down_16.svg
new file mode 100644
index 0000000000..2e8a42a9ea
--- /dev/null
+++ b/assets/icons/arrow_down_16.svg
@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M9.75 8L13.25 8V9.75L8 15L2.75 9.75V8H6.25V1L9.75 1V8Z" fill="white"/>
+</svg>
diff --git a/assets/icons/decline.svg b/assets/icons/arrow_down_8.svg
similarity index 53%
rename from assets/icons/decline.svg
rename to assets/icons/arrow_down_8.svg
index e78f49a228..18ac436d2a 100644
--- a/assets/icons/decline.svg
+++ b/assets/icons/arrow_down_8.svg
@@ -1,3 +1,3 @@
 <svg width="8" height="8" viewBox="0 0 8 8" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M1 7L4 4M7 1L4 4M4 4L1 1M4 4L7 7" stroke="#9C9C9C" stroke-width="1.33333"/>
+<path d="M5 4L7 4V5L4 8L1 5V4H3V0L5 2.38498e-08V4Z" fill="white"/>
 </svg>
diff --git a/assets/icons/arrow_left_12.svg b/assets/icons/arrow_left_12.svg
new file mode 100644
index 0000000000..d7245fc106
--- /dev/null
+++ b/assets/icons/arrow_left_12.svg
@@ -0,0 +1,3 @@
+<svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M6 7.5L6 10.5H4.5L0 6L4.5 1.5L6 1.5V4.5L12 4.5V7.5L6 7.5Z" fill="white"/>
+</svg>
diff --git a/assets/icons/arrow_left_16.svg b/assets/icons/arrow_left_16.svg
new file mode 100644
index 0000000000..a313cf002e
--- /dev/null
+++ b/assets/icons/arrow_left_16.svg
@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M8 9.75L8 13.25H6.25L1 8L6.25 2.75L8 2.75V6.25L15 6.25V9.75L8 9.75Z" fill="white"/>
+</svg>
diff --git a/assets/icons/arrow_left_8.svg b/assets/icons/arrow_left_8.svg
new file mode 100644
index 0000000000..7851d9f219
--- /dev/null
+++ b/assets/icons/arrow_left_8.svg
@@ -0,0 +1,3 @@
+<svg width="8" height="8" viewBox="0 0 8 8" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M4 5L4 7H3L0 4L3 1L4 1V3L8 3V5L4 5Z" fill="white"/>
+</svg>
diff --git a/assets/icons/arrow_right_12.svg b/assets/icons/arrow_right_12.svg
new file mode 100644
index 0000000000..a38f55dcaf
--- /dev/null
+++ b/assets/icons/arrow_right_12.svg
@@ -0,0 +1,3 @@
+<svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M6 4.5L6 1.5L7.5 1.5L12 6L7.5 10.5H6V7.5H9.53595e-08L0 4.5L6 4.5Z" fill="white"/>
+</svg>
diff --git a/assets/icons/arrow_right_16.svg b/assets/icons/arrow_right_16.svg
new file mode 100644
index 0000000000..790a142162
--- /dev/null
+++ b/assets/icons/arrow_right_16.svg
@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M8 6.25L8 2.75L9.75 2.75L15 8L9.75 13.25H8V9.75H1L1 6.25L8 6.25Z" fill="white"/>
+</svg>
diff --git a/assets/icons/arrow_right_8.svg b/assets/icons/arrow_right_8.svg
new file mode 100644
index 0000000000..3115e0e669
--- /dev/null
+++ b/assets/icons/arrow_right_8.svg
@@ -0,0 +1,3 @@
+<svg width="8" height="8" viewBox="0 0 8 8" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M4 3L4 1L5 1L8 4L5 7H4V5H6.3573e-08L0 3L4 3Z" fill="white"/>
+</svg>
diff --git a/assets/icons/arrow_up_12.svg b/assets/icons/arrow_up_12.svg
new file mode 100644
index 0000000000..84bcc4ebd8
--- /dev/null
+++ b/assets/icons/arrow_up_12.svg
@@ -0,0 +1,3 @@
+<svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M4.5 6L1.5 6L1.5 4.5L6 0L10.5 4.5V6L7.5 6V12H4.5L4.5 6Z" fill="white"/>
+</svg>
diff --git a/assets/icons/arrow_up_16.svg b/assets/icons/arrow_up_16.svg
new file mode 100644
index 0000000000..63ea16b1d8
--- /dev/null
+++ b/assets/icons/arrow_up_16.svg
@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M6.25 8L2.75 8L2.75 6.25L8 1L13.25 6.25V8L9.75 8V15H6.25L6.25 8Z" fill="white"/>
+</svg>
diff --git a/assets/icons/arrow_up_8.svg b/assets/icons/arrow_up_8.svg
new file mode 100644
index 0000000000..24a040abbb
--- /dev/null
+++ b/assets/icons/arrow_up_8.svg
@@ -0,0 +1,3 @@
+<svg width="8" height="8" viewBox="0 0 8 8" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M3 4L1 4L1 3L4 0L7 3V4L5 4V8H3L3 4Z" fill="white"/>
+</svg>
diff --git a/assets/icons/arrow_up_right_8.svg b/assets/icons/arrow_up_right_8.svg
new file mode 100644
index 0000000000..c53175ea6b
--- /dev/null
+++ b/assets/icons/arrow_up_right_8.svg
@@ -0,0 +1,3 @@
+<svg width="8" height="8" viewBox="0 0 8 8" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M1.17314 8L5.89399 3.29329L6.20495 7.94346L8 6.14841L7.67491 0.339222L1.85159 0L0.0565371 1.79505L4.70671 2.12014L0 6.82685L1.17314 8Z" fill="white"/>
+</svg>
diff --git a/assets/icons/backspace _12.svg b/assets/icons/backspace _12.svg
new file mode 100644
index 0000000000..68bad3da26
--- /dev/null
+++ b/assets/icons/backspace _12.svg	
@@ -0,0 +1,3 @@
+<svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M12 8.66661C12 9.40202 11.4021 9.99992 10.6667 9.99992H4.27722C3.92306 9.99992 3.58348 9.86034 3.33348 9.61034L0.195413 6.47082C0.0702071 6.34582 0 6.17707 0 5.99999C0 5.82291 0.0702071 5.65416 0.195205 5.52917L3.33328 2.39068C3.58327 2.14048 3.92285 2.00006 4.27701 2.00006H10.6665C11.4019 2.00006 11.9998 2.59693 11.9998 3.33337V8.66661H12ZM5.64594 5.00209L6.62718 5.99999L5.64594 6.97914C5.4522 7.17497 5.4522 7.49163 5.64594 7.66871C5.84177 7.88121 6.15843 7.88121 6.33552 7.66871L7.33341 6.70623L8.31256 7.66871C8.50839 7.88121 8.82506 7.88121 9.00214 7.66871C9.21463 7.49163 9.21463 7.17497 9.00214 6.97914L8.03965 5.99999L9.00214 5.00209C9.21463 4.82501 9.21463 4.50835 9.00214 4.31252C8.82506 4.11877 8.50839 4.11877 8.31256 4.31252L7.33341 5.29375L6.33552 4.31252C6.15843 4.11877 5.84177 4.11877 5.64594 4.31252C5.4522 4.50835 5.4522 4.82501 5.64594 5.00209Z" fill="white"/>
+</svg>
diff --git a/assets/icons/backspace _16.svg b/assets/icons/backspace _16.svg
new file mode 100644
index 0000000000..965470690e
--- /dev/null
+++ b/assets/icons/backspace _16.svg	
@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M15 11.1111C15 11.969 14.3024 12.6666 13.4445 12.6666H5.99009C5.5769 12.6666 5.18073 12.5038 4.88906 12.2121L1.22798 8.54932C1.08191 8.40349 1 8.20661 1 8.00002C1 7.79343 1.08191 7.59656 1.22774 7.45072L4.88882 3.78916C5.18048 3.49725 5.57666 3.33344 5.98984 3.33344H13.4442C14.3022 3.33344 14.9998 4.02978 14.9998 4.88896V11.1111H15ZM7.58693 6.8358L8.73171 8.00002L7.58693 9.14236C7.3609 9.37083 7.3609 9.74027 7.58693 9.94686C7.8154 10.1948 8.18484 10.1948 8.39143 9.94686L9.55565 8.82396L10.698 9.94686C10.9265 10.1948 11.2959 10.1948 11.5025 9.94686C11.7504 9.74027 11.7504 9.37083 11.5025 9.14236L10.3796 8.00002L11.5025 6.8358C11.7504 6.62921 11.7504 6.25977 11.5025 6.0313C11.2959 5.80527 10.9265 5.80527 10.698 6.0313L9.55565 7.17608L8.39143 6.0313C8.18484 5.80527 7.8154 5.80527 7.58693 6.0313C7.3609 6.25977 7.3609 6.62921 7.58693 6.8358Z" fill="white"/>
+</svg>
diff --git a/assets/icons/backspace _8.svg b/assets/icons/backspace _8.svg
new file mode 100644
index 0000000000..60972007b6
--- /dev/null
+++ b/assets/icons/backspace _8.svg	
@@ -0,0 +1,3 @@
+<svg width="8" height="8" viewBox="0 0 8 8" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M8 5.77774C8 6.26801 7.6014 6.66661 7.11113 6.66661H2.85148C2.61537 6.66661 2.38899 6.57356 2.22232 6.4069L0.130276 4.31388C0.0468047 4.23055 0 4.11805 0 3.99999C0 3.88194 0.0468047 3.76944 0.130137 3.68611L2.22218 1.59379C2.38885 1.42698 2.61523 1.33337 2.85134 1.33337H7.11099C7.60126 1.33337 7.99986 1.73128 7.99986 2.22225V5.77774H8ZM3.76396 3.33473L4.41812 3.99999L3.76396 4.65276C3.6348 4.78331 3.6348 4.99442 3.76396 5.11247C3.89452 5.25414 4.10562 5.25414 4.22368 5.11247L4.88894 4.47082L5.54171 5.11247C5.67226 5.25414 5.88337 5.25414 6.00142 5.11247C6.14309 4.99442 6.14309 4.78331 6.00142 4.65276L5.35977 3.99999L6.00142 3.33473C6.14309 3.21667 6.14309 3.00557 6.00142 2.87501C5.88337 2.74585 5.67226 2.74585 5.54171 2.87501L4.88894 3.52917L4.22368 2.87501C4.10562 2.74585 3.89452 2.74585 3.76396 2.87501C3.6348 3.00557 3.6348 3.21667 3.76396 3.33473Z" fill="white"/>
+</svg>
diff --git a/assets/icons/bolt_12.svg b/assets/icons/bolt_12.svg
new file mode 100644
index 0000000000..bf529dec33
--- /dev/null
+++ b/assets/icons/bolt_12.svg
@@ -0,0 +1,3 @@
+<svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M7.14029 5.25005H9.75348C10.0652 5.25005 10.3464 5.44457 10.4355 5.73518C10.5644 6.02814 10.4824 6.3586 10.248 6.56484L4.24822 11.8146C3.98338 12.0443 3.59598 12.0631 3.31286 11.8568C3.02951 11.6506 2.92639 11.2756 3.06443 10.9545L4.86694 6.74999H2.23267C1.94135 6.74999 1.66152 6.55546 1.5516 6.26485C1.44171 5.97189 1.52465 5.64144 1.75986 5.43519L7.75893 0.185629C8.02376 -0.0449871 8.41046 -0.0625645 8.69405 0.143209C8.97763 0.349123 9.08075 0.723265 8.94248 1.04542L7.1402 5.24972L7.14029 5.25005Z" fill="white"/>
+</svg>
diff --git a/assets/icons/bolt_16.svg b/assets/icons/bolt_16.svg
new file mode 100644
index 0000000000..c3859443b2
--- /dev/null
+++ b/assets/icons/bolt_16.svg
@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M9.33035 7.12505H12.3791C12.7427 7.12505 13.0708 7.352 13.1747 7.69105C13.3251 8.03283 13.2294 8.41836 12.956 8.65898L5.95626 14.7837C5.64728 15.0517 5.19531 15.0736 4.86501 14.833C4.53443 14.5923 4.41413 14.1549 4.57517 13.7803L6.6781 8.87499H3.60478C3.26491 8.87499 2.93844 8.64804 2.8102 8.30899C2.68199 7.96721 2.77876 7.58168 3.05317 7.34106L10.0521 1.21657C10.3611 0.947515 10.8122 0.927008 11.1431 1.16708C11.4739 1.40731 11.5942 1.84381 11.4329 2.21966L9.33024 7.12467L9.33035 7.12505Z" fill="white"/>
+</svg>
diff --git a/assets/icons/bolt_8.svg b/assets/icons/bolt_8.svg
new file mode 100644
index 0000000000..2e431a0df1
--- /dev/null
+++ b/assets/icons/bolt_8.svg
@@ -0,0 +1,3 @@
+<svg width="8" height="8" viewBox="0 0 8 8" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M4.76019 3.50003H6.50231C6.71012 3.50003 6.89761 3.62971 6.95698 3.82346C7.04292 4.01876 6.98823 4.23906 6.83199 4.37656L2.83214 7.87643C2.65558 8.02954 2.39731 8.04204 2.20857 7.90455C2.01967 7.76705 1.95092 7.51706 2.04295 7.30301L3.24462 4.49999H1.48844C1.29423 4.49999 1.10767 4.37031 1.0344 4.17657C0.961132 3.98126 1.01643 3.76096 1.17323 3.62346L5.17261 0.123753C5.34917 -0.0299914 5.60697 -0.0417097 5.79603 0.0954726C5.98508 0.232749 6.05383 0.482177 5.96164 0.69695L4.76013 3.49981L4.76019 3.50003Z" fill="white"/>
+</svg>
diff --git a/assets/icons/bolt_slash_12.svg b/assets/icons/bolt_slash_12.svg
new file mode 100644
index 0000000000..c5d4a1c828
--- /dev/null
+++ b/assets/icons/bolt_slash_12.svg
@@ -0,0 +1,3 @@
+<svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M4.00788 3.83701L7.62903 0.754503C7.87479 0.546451 8.23364 0.530593 8.4968 0.716233C8.75996 0.901999 8.85565 1.23953 8.72734 1.53017L7.05487 5.3231H9.47984C9.7691 5.3231 10.0301 5.49859 10.1127 5.76077C10.2323 6.02506 10.1562 6.32318 9.93874 6.50925L8.79258 7.48396L11.7998 9.86631C12.026 10.0397 12.0673 10.3589 11.889 10.5788C11.7106 10.7987 11.3822 10.8389 11.156 10.6655L0.200158 2.51988C-0.0268974 2.34693 -0.0666975 2.02808 0.111206 1.80735C0.28911 1.58661 0.616862 1.54792 0.843918 1.72108L4.00788 3.83701ZM2.06138 5.49043L2.40718 5.17751L4.34064 6.67658H2.52027C2.23102 6.67658 1.97003 6.50109 1.86782 6.23891C1.76777 5.97461 1.84389 5.67649 2.06138 5.49043ZM3.27278 10.4697L4.79301 7.02333L7.18318 8.83533L4.37108 11.2457C4.12532 11.4529 3.76647 11.4698 3.50331 11.2837C3.24015 11.0977 3.14446 10.7594 3.27278 10.4697Z" fill="white"/>
+</svg>
diff --git a/assets/icons/bolt_slash_16.svg b/assets/icons/bolt_slash_16.svg
new file mode 100644
index 0000000000..9520a626c1
--- /dev/null
+++ b/assets/icons/bolt_slash_16.svg
@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M5.42392 5.20324L10.1066 1.21711C10.4244 0.948067 10.8885 0.92756 11.2288 1.16762C11.5691 1.40784 11.6928 1.84432 11.5269 2.22016L9.36412 7.12497H12.5C12.874 7.12497 13.2115 7.35191 13.3184 7.69094C13.4731 8.03271 13.3746 8.41823 13.0934 8.65883L11.6112 9.91928L15.5 13C15.7925 13.2242 15.8459 13.6371 15.6153 13.9214C15.3847 14.2058 14.96 14.2577 14.6675 14.0335L0.499984 3.5C0.206368 3.27635 0.1549 2.86403 0.384956 2.57859C0.615012 2.29314 1.03884 2.24311 1.33246 2.46703L5.42392 5.20324ZM2.90681 7.34135L3.35399 6.9367L5.85423 8.87522H3.50023C3.12618 8.87522 2.78869 8.64828 2.65651 8.30924C2.52714 7.96747 2.62557 7.58196 2.90681 7.34135ZM4.47333 13.7803L6.43921 9.32362L9.53006 11.6668L5.8936 14.7837C5.5758 15.0517 5.11175 15.0736 4.77144 14.8329C4.43114 14.5923 4.3074 14.1549 4.47333 13.7803Z" fill="white"/>
+</svg>
diff --git a/assets/icons/bolt_slash_8.svg b/assets/icons/bolt_slash_8.svg
new file mode 100644
index 0000000000..14a22ab8cd
--- /dev/null
+++ b/assets/icons/bolt_slash_8.svg
@@ -0,0 +1,10 @@
+<svg width="8" height="8" viewBox="0 0 8 8" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_430_1350)">
+<path d="M2.8102 2.0687L5.08603 0.503002C5.24987 0.364301 5.4891 0.353729 5.66454 0.477489C5.83998 0.601333 5.90377 0.826356 5.81823 1.02011L4.70325 3.54873H6.3199C6.51274 3.54873 6.68673 3.66573 6.74182 3.84051C6.82157 4.01671 6.77082 4.21546 6.62583 4.3395L6.22432 4.68222L8.0048 6.08823C8.15559 6.20381 8.18314 6.41666 8.06425 6.56325C7.94536 6.70985 7.72642 6.73663 7.57563 6.62104L0.271717 1.19061C0.120346 1.07531 0.093813 0.862748 0.212416 0.715589C0.331018 0.56843 0.54952 0.542635 0.70089 0.658079L2.8102 2.0687ZM1.37426 3.66029L1.60479 3.45167L2.89376 4.45105H1.68019C1.48735 4.45105 1.31336 4.33406 1.24521 4.15927C1.17852 3.98308 1.22927 3.78433 1.37426 3.66029ZM2.18186 6.97981L3.19534 4.68222L4.78879 5.89022L2.91406 7.49712C2.75022 7.63526 2.51099 7.64653 2.33555 7.52249C2.16011 7.39845 2.09631 7.17292 2.18186 6.97981Z" fill="white"/>
+</g>
+<defs>
+<clipPath id="clip0_430_1350">
+<rect width="8" height="8" fill="white"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/assets/icons/caret_down_12.svg b/assets/icons/caret_down_12.svg
new file mode 100644
index 0000000000..6208814bc2
--- /dev/null
+++ b/assets/icons/caret_down_12.svg
@@ -0,0 +1,3 @@
+<svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M11.6709 4.44444L6.89463 9.25449C6.62782 9.49123 6.31967 9.60772 6.01153 9.60772C5.70339 9.60772 5.39599 9.49029 5.16113 9.25542L0.384899 4.44537C0.00723509 4.10247 -0.09573 3.5837 0.0902836 3.13633C0.276448 2.68914 0.71529 2.39227 1.20118 2.39227H10.7875C11.2737 2.39227 11.7126 2.68463 11.899 3.13445C12.0854 3.58389 12.0163 4.1021 11.6706 4.44406L11.6709 4.44444Z" fill="white"/>
+</svg>
diff --git a/assets/icons/caret_down_16.svg b/assets/icons/caret_down_16.svg
new file mode 100644
index 0000000000..cba930287e
--- /dev/null
+++ b/assets/icons/caret_down_16.svg
@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M14.616 6.18521L9.04373 11.7969C8.73246 12.0731 8.37295 12.209 8.01345 12.209C7.65395 12.209 7.29533 12.072 7.02132 11.798L1.44905 6.1863C1.00844 5.78625 0.888315 5.18101 1.10533 4.65908C1.32252 4.13736 1.8345 3.79102 2.40138 3.79102H13.5854C14.1527 3.79102 14.6648 4.1321 14.8822 4.65689C15.0997 5.18123 15.019 5.78581 14.6156 6.18477L14.616 6.18521Z" fill="white"/>
+</svg>
diff --git a/assets/icons/caret_down_8.svg b/assets/icons/caret_down_8.svg
new file mode 100644
index 0000000000..10bd20eb7f
--- /dev/null
+++ b/assets/icons/caret_down_8.svg
@@ -0,0 +1,3 @@
+<svg width="8" height="8" viewBox="0 0 8 8" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M7.78057 2.96296L4.59642 6.16966C4.41855 6.32749 4.21312 6.40515 4.00769 6.40515C3.80226 6.40515 3.59733 6.32686 3.44075 6.17028L0.256599 2.96358C0.00482339 2.73498 -0.06382 2.38913 0.0601891 2.09088C0.184298 1.79276 0.47686 1.59485 0.800787 1.59485H7.19164C7.51582 1.59485 7.80843 1.78976 7.93269 2.08963C8.05695 2.38926 8.01085 2.73473 7.78037 2.96271L7.78057 2.96296Z" fill="white"/>
+</svg>
diff --git a/assets/icons/caret_left_12.svg b/assets/icons/caret_left_12.svg
new file mode 100644
index 0000000000..6b6c32513e
--- /dev/null
+++ b/assets/icons/caret_left_12.svg
@@ -0,0 +1,3 @@
+<svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M7.55575 11.671L2.74629 6.89533C2.51033 6.62855 2.3931 6.32045 2.3931 5.97853C2.3931 5.6366 2.51052 5.36307 2.74516 5.12823L7.55462 0.352587C7.89842 0.00841046 8.41544 -0.0945422 8.8652 0.0914486C9.31496 0.277439 9.60691 0.717805 9.60691 1.20251V10.7876C9.60691 11.2738 9.31421 11.7127 8.86482 11.899C8.41506 12.0854 7.8973 12.0163 7.55537 11.6706L7.55575 11.671Z" fill="white"/>
+</svg>
diff --git a/assets/icons/caret_left_16.svg b/assets/icons/caret_left_16.svg
new file mode 100644
index 0000000000..5ffd176c59
--- /dev/null
+++ b/assets/icons/caret_left_16.svg
@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M9.81503 14.6161L4.20399 9.04455C3.9287 8.73331 3.79193 8.37386 3.79193 7.97495C3.79193 7.57604 3.92892 7.25691 4.20268 6.98293L9.81371 1.41135C10.2148 1.00981 10.818 0.889701 11.3427 1.10669C11.8674 1.32368 12.208 1.83744 12.208 2.40293V13.5855C12.208 14.1528 11.8666 14.6648 11.3423 14.8822C10.8176 15.0996 10.2135 15.019 9.81459 14.6157L9.81503 14.6161Z" fill="white"/>
+</svg>
diff --git a/assets/icons/caret_left_8.svg b/assets/icons/caret_left_8.svg
new file mode 100644
index 0000000000..c02a5f3468
--- /dev/null
+++ b/assets/icons/caret_left_8.svg
@@ -0,0 +1,3 @@
+<svg width="8" height="8" viewBox="0 0 8 8" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M5.03717 7.78065L1.83086 4.59689C1.67355 4.41904 1.5954 4.21363 1.5954 3.98568C1.5954 3.75774 1.67368 3.57538 1.83011 3.41882L5.03641 0.235058C5.26562 0.00560697 5.61029 -0.0630281 5.91013 0.0609657C6.20997 0.18496 6.40461 0.478537 6.40461 0.801672V7.19174C6.40461 7.51588 6.20947 7.80845 5.90988 7.9327C5.61004 8.05694 5.26486 8.01085 5.03692 7.7804L5.03717 7.78065Z" fill="white"/>
+</svg>
diff --git a/assets/icons/caret_right_12.svg b/assets/icons/caret_right_12.svg
new file mode 100644
index 0000000000..6670b80cf8
--- /dev/null
+++ b/assets/icons/caret_right_12.svg
@@ -0,0 +1,3 @@
+<svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M4.43898 0.355319L9.26566 5.14806C9.50322 5.41579 9.62012 5.725 9.62012 6.00027C9.62012 6.27554 9.50228 6.61793 9.2666 6.85361L4.43992 11.6463C4.09451 11.9914 3.57602 12.0951 3.12465 11.908C2.67328 11.721 2.37991 11.3469 2.37991 10.8266V1.20715C2.37991 0.719205 2.67328 0.278771 3.12465 0.0917373C3.57565 -0.0952964 4.09565 0.0091557 4.43879 0.354942L4.43898 0.355319Z" fill="white"/>
+</svg>
diff --git a/assets/icons/caret_right_16.svg b/assets/icons/caret_right_16.svg
new file mode 100644
index 0000000000..da239b95d7
--- /dev/null
+++ b/assets/icons/caret_right_16.svg
@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M6.1788 1.41454L11.8099 7.00607C12.0871 7.31842 12.2235 7.67916 12.2235 8.00031C12.2235 8.32146 12.086 8.72092 11.811 8.99588L6.1799 14.5874C5.77692 14.9899 5.17201 15.1109 4.64542 14.8927C4.11882 14.6745 3.77655 14.2381 3.77655 13.631V2.40834C3.77655 1.83907 4.11882 1.32523 4.64542 1.10703C5.17157 0.888821 5.77824 1.01068 6.17858 1.4141L6.1788 1.41454Z" fill="white"/>
+</svg>
diff --git a/assets/icons/caret_right_8.svg b/assets/icons/caret_right_8.svg
new file mode 100644
index 0000000000..9a3f2166ef
--- /dev/null
+++ b/assets/icons/caret_right_8.svg
@@ -0,0 +1,3 @@
+<svg width="8" height="8" viewBox="0 0 8 8" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M2.95931 0.236879L6.17709 3.43204C6.33546 3.61052 6.4134 3.81666 6.4134 4.00018C6.4134 4.18369 6.33484 4.41195 6.17772 4.56907L2.95993 7.76423C2.72966 7.99425 2.384 8.06338 2.08309 7.93869C1.78217 7.81401 1.58659 7.56463 1.58659 7.21771V0.804768C1.58659 0.47947 1.78217 0.185847 2.08309 0.0611582C2.38375 -0.0635309 2.73042 0.0061038 2.95918 0.236628L2.95931 0.236879Z" fill="white"/>
+</svg>
diff --git a/assets/icons/caret_up_12.svg b/assets/icons/caret_up_12.svg
new file mode 100644
index 0000000000..9fe93c47ae
--- /dev/null
+++ b/assets/icons/caret_up_12.svg
@@ -0,0 +1,3 @@
+<svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M0.353682 7.55684L5.13301 2.74366C5.40037 2.50677 5.70871 2.3902 6.01705 2.3902C6.3254 2.3902 6.63299 2.50771 6.86801 2.74272L11.6473 7.5559C11.9914 7.89996 12.0948 8.41738 11.9083 8.86748C11.7218 9.31759 11.3149 9.60977 10.796 9.60977H1.20388C0.717302 9.60977 0.2781 9.31684 0.0915901 8.86711C-0.0949202 8.417 0.00886378 7.89883 0.353306 7.55665L0.353682 7.55684Z" fill="white"/>
+</svg>
diff --git a/assets/icons/caret_up_16.svg b/assets/icons/caret_up_16.svg
new file mode 100644
index 0000000000..10f45523a4
--- /dev/null
+++ b/assets/icons/caret_up_16.svg
@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M1.41263 9.81632L6.98851 4.20095C7.30043 3.92457 7.66016 3.78857 8.0199 3.78857C8.37963 3.78857 8.73849 3.92567 9.01268 4.19986L14.5886 9.81522C14.99 10.2166 15.1106 10.8203 14.893 11.3454C14.6754 11.8705 14.2007 12.2114 13.5953 12.2114H2.40453C1.83685 12.2114 1.32445 11.8697 1.10686 11.345C0.88926 10.8198 1.01034 10.2153 1.41219 9.8161L1.41263 9.81632Z" fill="white"/>
+</svg>
diff --git a/assets/icons/caret_up_8.svg b/assets/icons/caret_up_8.svg
new file mode 100644
index 0000000000..24c2db5129
--- /dev/null
+++ b/assets/icons/caret_up_8.svg
@@ -0,0 +1,3 @@
+<svg width="8" height="8" viewBox="0 0 8 8" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M0.235788 5.03793L3.42201 1.82915C3.60024 1.67122 3.80581 1.59351 4.01137 1.59351C4.21693 1.59351 4.42199 1.67185 4.57867 1.82852L7.76489 5.0373C7.99427 5.26668 8.06321 5.61163 7.93887 5.9117C7.81453 6.21177 7.54328 6.40655 7.19734 6.40655H0.802589C0.478202 6.40655 0.1854 6.21127 0.0610601 5.91145C-0.0632802 5.61137 0.00590919 5.26593 0.235538 5.03781L0.235788 5.03793Z" fill="white"/>
+</svg>
diff --git a/assets/icons/check_12.svg b/assets/icons/check_12.svg
new file mode 100644
index 0000000000..e4255646bb
--- /dev/null
+++ b/assets/icons/check_12.svg
@@ -0,0 +1,3 @@
+<svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M12 3.33519L4.38149 10.9537L0 6.57221L2.28892 4.28329L4.38149 6.37586L9.71108 1.04626L12 3.33519Z" fill="white"/>
+</svg>
diff --git a/assets/icons/check_16.svg b/assets/icons/check_16.svg
new file mode 100644
index 0000000000..0ebf3fe75e
--- /dev/null
+++ b/assets/icons/check_16.svg
@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M15 4.89105L6.11174 13.7793L1 8.66758L3.67041 5.99717L6.11174 8.4385L12.3296 2.22064L15 4.89105Z" fill="white"/>
+</svg>
diff --git a/assets/icons/check_8.svg b/assets/icons/check_8.svg
new file mode 100644
index 0000000000..7513909ce1
--- /dev/null
+++ b/assets/icons/check_8.svg
@@ -0,0 +1,3 @@
+<svg width="8" height="8" viewBox="0 0 8 8" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M8 2.22346L2.92099 7.30247L0 4.38148L1.52595 2.85553L2.92099 4.25057L6.47405 0.69751L8 2.22346Z" fill="white"/>
+</svg>
diff --git a/assets/icons/chevron_down_12.svg b/assets/icons/chevron_down_12.svg
new file mode 100644
index 0000000000..7bba37857a
--- /dev/null
+++ b/assets/icons/chevron_down_12.svg
@@ -0,0 +1,3 @@
+<svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M5.9996 9.42843C5.78023 9.42843 5.56087 9.34473 5.39373 9.17733L0.251105 4.0347C-0.0837016 3.69989 -0.0837016 3.15751 0.251105 2.8227C0.585911 2.48789 1.1283 2.48789 1.4631 2.8227L5.9996 7.36067L10.5369 2.82337C10.8717 2.48856 11.4141 2.48856 11.7489 2.82337C12.0837 3.15818 12.0837 3.70056 11.7489 4.03537L6.60627 9.178C6.43886 9.3454 6.21923 9.42843 5.9996 9.42843Z" fill="white"/>
+</svg>
diff --git a/assets/icons/chevron_down_16.svg b/assets/icons/chevron_down_16.svg
new file mode 100644
index 0000000000..cc7228cdc9
--- /dev/null
+++ b/assets/icons/chevron_down_16.svg
@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M7.99953 11.9998C7.74361 11.9998 7.48768 11.9022 7.29269 11.7069L1.29296 5.70714C0.902348 5.31653 0.902348 4.68375 1.29296 4.29314C1.68356 3.90253 2.31635 3.90253 2.70696 4.29314L7.99953 9.58743L13.293 4.29392C13.6837 3.90331 14.3164 3.90331 14.707 4.29392C15.0977 4.68453 15.0977 5.31731 14.707 5.70792L8.70731 11.7077C8.51201 11.903 8.25577 11.9998 7.99953 11.9998Z" fill="white"/>
+</svg>
diff --git a/assets/icons/chevron_down_8.svg b/assets/icons/chevron_down_8.svg
new file mode 100644
index 0000000000..fe60b4968a
--- /dev/null
+++ b/assets/icons/chevron_down_8.svg
@@ -0,0 +1,3 @@
+<svg width="8" height="8" viewBox="0 0 8 8" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M3.99973 6.28564C3.85349 6.28564 3.70725 6.22984 3.59582 6.11824L0.167403 2.68982C-0.0558011 2.46662 -0.0558011 2.10502 0.167403 1.88182C0.390608 1.65862 0.752199 1.65862 0.975403 1.88182L3.99973 4.90713L7.0246 1.88227C7.2478 1.65906 7.60939 1.65906 7.8326 1.88227C8.0558 2.10547 8.0558 2.46706 7.8326 2.69027L4.40418 6.11868C4.29258 6.23029 4.14615 6.28564 3.99973 6.28564Z" fill="white"/>
+</svg>
diff --git a/assets/icons/chevron_left_12.svg b/assets/icons/chevron_left_12.svg
new file mode 100644
index 0000000000..a230007c7b
--- /dev/null
+++ b/assets/icons/chevron_left_12.svg
@@ -0,0 +1,3 @@
+<svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M8.57103 12C8.35166 12 8.13228 11.9163 7.96514 11.7489L2.82228 6.60603C2.48746 6.27121 2.48746 5.72879 2.82228 5.39397L7.96514 0.251116C8.29996 -0.0837054 8.84237 -0.0837054 9.17719 0.251116C9.51202 0.585938 9.51202 1.12835 9.17719 1.46317L4.64023 6L9.17773 10.5375C9.51255 10.8723 9.51255 11.4147 9.17773 11.7496C9.01032 11.917 8.79068 12 8.57103 12Z" fill="white"/>
+</svg>
diff --git a/assets/icons/chevron_left_16.svg b/assets/icons/chevron_left_16.svg
new file mode 100644
index 0000000000..2cd1bbd4d2
--- /dev/null
+++ b/assets/icons/chevron_left_16.svg
@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M10.9995 15C10.7436 15 10.4877 14.9023 10.2927 14.707L4.29266 8.70703C3.90204 8.31641 3.90204 7.68359 4.29266 7.29297L10.2927 1.29297C10.6833 0.902344 11.3161 0.902344 11.7067 1.29297C12.0974 1.68359 12.0974 2.31641 11.7067 2.70703L6.4136 8L11.7074 13.2937C12.098 13.6844 12.098 14.3172 11.7074 14.7078C11.512 14.9031 11.2558 15 10.9995 15Z" fill="white"/>
+</svg>
diff --git a/assets/icons/chevron_left_8.svg b/assets/icons/chevron_left_8.svg
new file mode 100644
index 0000000000..88ca274f51
--- /dev/null
+++ b/assets/icons/chevron_left_8.svg
@@ -0,0 +1,3 @@
+<svg width="8" height="8" viewBox="0 0 8 8" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M5.71402 8C5.56777 8 5.42152 7.9442 5.31009 7.83259L1.88152 4.40402C1.65831 4.1808 1.65831 3.8192 1.88152 3.59598L5.31009 0.167411C5.53331 -0.0558036 5.89491 -0.0558036 6.11813 0.167411C6.34134 0.390625 6.34134 0.752232 6.11813 0.975446L3.09349 4L6.11849 7.025C6.3417 7.24821 6.3417 7.60982 6.11849 7.83304C6.00688 7.94464 5.86045 8 5.71402 8Z" fill="white"/>
+</svg>
diff --git a/assets/icons/chevron_right_12.svg b/assets/icons/chevron_right_12.svg
new file mode 100644
index 0000000000..b463182705
--- /dev/null
+++ b/assets/icons/chevron_right_12.svg
@@ -0,0 +1,3 @@
+<svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M3.4284 12C3.20902 12 2.98964 11.9163 2.8225 11.7489C2.48767 11.4141 2.48767 10.8716 2.8225 10.5368L7.36059 5.99993L2.8225 1.46319C2.48767 1.12836 2.48767 0.585944 2.8225 0.251119C3.15732 -0.0837063 3.69974 -0.0837063 4.03457 0.251119L9.17748 5.39403C9.51231 5.72886 9.51231 6.27128 9.17748 6.6061L4.03457 11.749C3.86769 11.917 3.64804 12 3.4284 12Z" fill="white"/>
+</svg>
diff --git a/assets/icons/chevron_right_16.svg b/assets/icons/chevron_right_16.svg
new file mode 100644
index 0000000000..3a2aafbcd6
--- /dev/null
+++ b/assets/icons/chevron_right_16.svg
@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M4.99982 15C4.74388 15 4.48794 14.9023 4.29294 14.707C3.90231 14.3164 3.90231 13.6836 4.29294 13.293L9.58738 7.99992L4.29294 2.70705C3.90231 2.31642 3.90231 1.6836 4.29294 1.29297C4.68357 0.902343 5.31639 0.902343 5.70702 1.29297L11.7071 7.29304C12.0977 7.68367 12.0977 8.31649 11.7071 8.70712L5.70702 14.7072C5.51233 14.9031 5.25608 15 4.99982 15Z" fill="white"/>
+</svg>
diff --git a/assets/icons/chevron_right_8.svg b/assets/icons/chevron_right_8.svg
new file mode 100644
index 0000000000..7349274681
--- /dev/null
+++ b/assets/icons/chevron_right_8.svg
@@ -0,0 +1,3 @@
+<svg width="8" height="8" viewBox="0 0 8 8" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M2.28561 8C2.13936 8 1.99311 7.9442 1.88168 7.83259C1.65846 7.60937 1.65846 7.24776 1.88168 7.02454L4.90707 3.99996L1.88168 0.975457C1.65846 0.752241 1.65846 0.390629 1.88168 0.167413C2.10489 -0.0558042 2.4665 -0.0558042 2.68972 0.167413L6.11833 3.59602C6.34155 3.81924 6.34155 4.18085 6.11833 4.40407L2.68972 7.83268C2.57847 7.94464 2.43204 8 2.28561 8Z" fill="white"/>
+</svg>
diff --git a/assets/icons/chevron_up_12.svg b/assets/icons/chevron_up_12.svg
new file mode 100644
index 0000000000..c6bbee4ff7
--- /dev/null
+++ b/assets/icons/chevron_up_12.svg
@@ -0,0 +1,3 @@
+<svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M11.1435 9.42655C10.9242 9.42655 10.7048 9.34284 10.5376 9.17543L6.00067 4.63994L1.46317 9.17744C1.12835 9.51226 0.585938 9.51226 0.251116 9.17744C-0.0837054 8.84262 -0.0837054 8.30021 0.251116 7.96538L5.39397 2.82253C5.72879 2.48771 6.27121 2.48771 6.60603 2.82253L11.7489 7.96538C12.0837 8.30021 12.0837 8.84262 11.7489 9.17744C11.5828 9.34351 11.3632 9.42655 11.1435 9.42655Z" fill="white"/>
+</svg>
diff --git a/assets/icons/chevron_up_16.svg b/assets/icons/chevron_up_16.svg
new file mode 100644
index 0000000000..ba2d4e6668
--- /dev/null
+++ b/assets/icons/chevron_up_16.svg
@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M14.0008 11.9977C13.7448 11.9977 13.4889 11.9 13.2939 11.7047L8.00078 6.41328L2.70703 11.707C2.31641 12.0977 1.68359 12.0977 1.29297 11.707C0.902344 11.3164 0.902344 10.6836 1.29297 10.293L7.29297 4.29297C7.68359 3.90234 8.31641 3.90234 8.70703 4.29297L14.707 10.293C15.0977 10.6836 15.0977 11.3164 14.707 11.707C14.5133 11.9008 14.257 11.9977 14.0008 11.9977Z" fill="white"/>
+</svg>
diff --git a/assets/icons/chevron_up_8.svg b/assets/icons/chevron_up_8.svg
new file mode 100644
index 0000000000..41525aa3ea
--- /dev/null
+++ b/assets/icons/chevron_up_8.svg
@@ -0,0 +1,3 @@
+<svg width="8" height="8" viewBox="0 0 8 8" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M7.42902 6.28438C7.28277 6.28438 7.13652 6.22858 7.02509 6.11697L4.00045 3.09331L0.975446 6.11831C0.752232 6.34153 0.390625 6.34153 0.167411 6.11831C-0.0558036 5.8951 -0.0558036 5.53349 0.167411 5.31028L3.59598 1.88171C3.8192 1.65849 4.1808 1.65849 4.40402 1.88171L7.83259 5.31028C8.0558 5.53349 8.0558 5.8951 7.83259 6.11831C7.72188 6.22903 7.57545 6.28438 7.42902 6.28438Z" fill="white"/>
+</svg>
diff --git a/assets/icons/circle_check_12.svg b/assets/icons/circle_check_12.svg
new file mode 100644
index 0000000000..0fbb051b84
--- /dev/null
+++ b/assets/icons/circle_check_12.svg
@@ -0,0 +1,3 @@
+<svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M6 12C9.31371 12 12 9.31371 12 6C12 2.68629 9.31371 0 6 0C2.68629 0 0 2.68629 0 6C0 9.31371 2.68629 12 6 12ZM9.53033 4.28033L8.46967 3.21967L4.875 6.81434L3.53033 5.46967L2.46967 6.53033L4.875 8.93566L9.53033 4.28033Z" fill="white"/>
+</svg>
diff --git a/assets/icons/circle_check_16.svg b/assets/icons/circle_check_16.svg
new file mode 100644
index 0000000000..adfc8cecca
--- /dev/null
+++ b/assets/icons/circle_check_16.svg
@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M8 15C11.866 15 15 11.866 15 8C15 4.13401 11.866 1 8 1C4.13401 1 1 4.13401 1 8C1 11.866 4.13401 15 8 15ZM12.1187 5.99372L10.8813 4.75628L6.6875 8.95006L5.11872 7.38128L3.88128 8.61872L6.6875 11.4249L12.1187 5.99372Z" fill="white"/>
+</svg>
diff --git a/assets/icons/circle_check_8.svg b/assets/icons/circle_check_8.svg
new file mode 100644
index 0000000000..b4d4d9e624
--- /dev/null
+++ b/assets/icons/circle_check_8.svg
@@ -0,0 +1,3 @@
+<svg width="8" height="8" viewBox="0 0 8 8" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M4 8C6.20914 8 8 6.20914 8 4C8 1.79086 6.20914 0 4 0C1.79086 0 0 1.79086 0 4C0 6.20914 1.79086 8 4 8ZM6.35355 2.85355L5.64645 2.14645L3.25 4.54289L2.35355 3.64645L1.64645 4.35355L3.25 5.95711L6.35355 2.85355Z" fill="white"/>
+</svg>
diff --git a/assets/icons/circle_info_12.svg b/assets/icons/circle_info_12.svg
new file mode 100644
index 0000000000..eec07e0abf
--- /dev/null
+++ b/assets/icons/circle_info_12.svg
@@ -0,0 +1,3 @@
+<svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M12 6C12 9.31371 9.31371 12 6 12C2.68629 12 0 9.31371 0 6C0 2.68629 2.68629 0 6 0C9.31371 0 12 2.68629 12 6ZM5.25 6H4.5V4.5H6.75V8.25H7.5V9.75H5.25V6ZM6.75 3.75V2.25H5.25V3.75H6.75Z" fill="white"/>
+</svg>
diff --git a/assets/icons/circle_info_16.svg b/assets/icons/circle_info_16.svg
new file mode 100644
index 0000000000..48bd4f79a8
--- /dev/null
+++ b/assets/icons/circle_info_16.svg
@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M15 8C15 11.866 11.866 15 8 15C4.13401 15 1 11.866 1 8C1 4.13401 4.13401 1 8 1C11.866 1 15 4.13401 15 8ZM7.125 8H6.25V6.25H8.875V10.625H9.75V12.375H7.125V8ZM8.875 5.375V3.625H7.125V5.375H8.875Z" fill="white"/>
+</svg>
diff --git a/assets/icons/circle_info_8.svg b/assets/icons/circle_info_8.svg
new file mode 100644
index 0000000000..1d7ac77dd2
--- /dev/null
+++ b/assets/icons/circle_info_8.svg
@@ -0,0 +1,3 @@
+<svg width="8" height="8" viewBox="0 0 8 8" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M8 4C8 6.20914 6.20914 8 4 8C1.79086 8 0 6.20914 0 4C0 1.79086 1.79086 0 4 0C6.20914 0 8 1.79086 8 4ZM3.5 4H3V3H4.5V5.5H5V6.5H3.5V4ZM4.5 2.5V1.5H3.5V2.5H4.5Z" fill="white"/>
+</svg>
diff --git a/assets/icons/circle_up_12.svg b/assets/icons/circle_up_12.svg
new file mode 100644
index 0000000000..c4b9677289
--- /dev/null
+++ b/assets/icons/circle_up_12.svg
@@ -0,0 +1,3 @@
+<svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M6 0C2.68594 0 0 2.68594 0 6C0 9.31406 2.68594 12 6 12C9.31406 12 12 9.31406 12 6C12 2.68594 9.31406 0 6 0ZM8.97187 5.76797C8.91328 5.90859 8.77734 6 8.625 6H7.125V8.25C7.125 8.66414 6.78914 9 6.375 9H5.625C5.21086 9 4.875 8.66414 4.875 8.25V6H3.375C3.22266 6 3.08672 5.90859 3.02812 5.76797C2.96953 5.62734 3.00234 5.46797 3.11016 5.36016L5.73516 2.73516C5.88141 2.58867 6.11906 2.58867 6.26531 2.73516L8.89031 5.36016C8.99766 5.46797 9.03047 5.62734 8.97187 5.76797Z" fill="white"/>
+</svg>
diff --git a/assets/icons/circle_up_16.svg b/assets/icons/circle_up_16.svg
new file mode 100644
index 0000000000..4eb3886fe4
--- /dev/null
+++ b/assets/icons/circle_up_16.svg
@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M8 1C4.13359 1 1 4.13359 1 8C1 11.8664 4.13359 15 8 15C11.8664 15 15 11.8664 15 8C15 4.13359 11.8664 1 8 1ZM11.4672 7.7293C11.3988 7.89336 11.2402 8 11.0625 8H9.3125V10.625C9.3125 11.1082 8.92066 11.5 8.4375 11.5H7.5625C7.07934 11.5 6.6875 11.1082 6.6875 10.625V8H4.9375C4.75977 8 4.60117 7.89336 4.53281 7.7293C4.46445 7.56523 4.50273 7.3793 4.62852 7.25352L7.69102 4.19102C7.86164 4.02012 8.13891 4.02012 8.30953 4.19102L11.372 7.25352C11.4973 7.3793 11.5355 7.56523 11.4672 7.7293Z" fill="white"/>
+</svg>
diff --git a/assets/icons/circle_up_8.svg b/assets/icons/circle_up_8.svg
new file mode 100644
index 0000000000..17abd30214
--- /dev/null
+++ b/assets/icons/circle_up_8.svg
@@ -0,0 +1,3 @@
+<svg width="8" height="8" viewBox="0 0 8 8" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M4 0C1.79063 0 0 1.79063 0 4C0 6.20937 1.79063 8 4 8C6.20937 8 8 6.20937 8 4C8 1.79063 6.20937 0 4 0ZM5.98125 3.84531C5.94219 3.93906 5.85156 4 5.75 4H4.75V5.5C4.75 5.77609 4.52609 6 4.25 6H3.75C3.47391 6 3.25 5.77609 3.25 5.5V4H2.25C2.14844 4 2.05781 3.93906 2.01875 3.84531C1.97969 3.75156 2.00156 3.64531 2.07344 3.57344L3.82344 1.82344C3.92094 1.72578 4.07938 1.72578 4.17688 1.82344L5.92688 3.57344C5.99844 3.64531 6.02031 3.75156 5.98125 3.84531Z" fill="white"/>
+</svg>
diff --git a/assets/icons/circle_x_mark_12.svg b/assets/icons/circle_x_mark_12.svg
new file mode 100644
index 0000000000..c648431dd4
--- /dev/null
+++ b/assets/icons/circle_x_mark_12.svg
@@ -0,0 +1,3 @@
+<svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M6 12C9.31371 12 12 9.31371 12 6C12 2.68629 9.31371 0 6 0C2.68629 0 0 2.68629 0 6C0 9.31371 2.68629 12 6 12ZM3.21967 4.28033L4.93934 6L3.21967 7.71967L4.28033 8.78033L6 7.06066L7.71967 8.78033L8.78033 7.71967L7.06066 6L8.78033 4.28033L7.71967 3.21967L6 4.93934L4.28033 3.21967L3.21967 4.28033Z" fill="white"/>
+</svg>
diff --git a/assets/icons/circle_x_mark_16.svg b/assets/icons/circle_x_mark_16.svg
new file mode 100644
index 0000000000..db3f401615
--- /dev/null
+++ b/assets/icons/circle_x_mark_16.svg
@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M8 15C11.866 15 15 11.866 15 8C15 4.13401 11.866 1 8 1C4.13401 1 1 4.13401 1 8C1 11.866 4.13401 15 8 15ZM4.75628 5.99372L6.76256 8L4.75628 10.0063L5.99372 11.2437L8 9.23744L10.0063 11.2437L11.2437 10.0063L9.23744 8L11.2437 5.99372L10.0063 4.75628L8 6.76256L5.99372 4.75628L4.75628 5.99372Z" fill="white"/>
+</svg>
diff --git a/assets/icons/circle_x_mark_8.svg b/assets/icons/circle_x_mark_8.svg
new file mode 100644
index 0000000000..f1323b9589
--- /dev/null
+++ b/assets/icons/circle_x_mark_8.svg
@@ -0,0 +1,3 @@
+<svg width="8" height="8" viewBox="0 0 8 8" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M4 8C6.20914 8 8 6.20914 8 4C8 1.79086 6.20914 0 4 0C1.79086 0 0 1.79086 0 4C0 6.20914 1.79086 8 4 8ZM2.14645 2.85355L3.29289 4L2.14645 5.14645L2.85355 5.85355L4 4.70711L5.14645 5.85355L5.85355 5.14645L4.70711 4L5.85355 2.85355L5.14645 2.14645L4 3.29289L2.85355 2.14645L2.14645 2.85355Z" fill="white"/>
+</svg>
diff --git a/assets/icons/cloud_12.svg b/assets/icons/cloud_12.svg
new file mode 100644
index 0000000000..2ed58f4966
--- /dev/null
+++ b/assets/icons/cloud_12.svg
@@ -0,0 +1,3 @@
+<svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M1.80375 4.95186C1.80131 4.90124 1.8 4.85061 1.8 4.79999C1.8 3.14249 3.1425 1.79999 4.8 1.79999C5.91188 1.79999 6.88125 2.40468 7.40063 3.30374C7.68563 3.09561 8.03063 2.99999 8.4 2.99999C9.39375 2.99999 10.2 3.78936 10.2 4.79999C10.2 5.02874 10.1569 5.24624 10.08 5.44874C11.175 5.66999 12 6.63936 12 7.79999C12 9.12561 10.9256 10.2 9.6 10.2H2.7C1.20881 10.2 0 8.99061 0 7.49999C0 6.32249 0.753187 5.32124 1.80375 4.95186Z" fill="white"/>
+</svg>
diff --git a/assets/icons/cloud_8.svg b/assets/icons/cloud_8.svg
new file mode 100644
index 0000000000..0e0337e7ab
--- /dev/null
+++ b/assets/icons/cloud_8.svg
@@ -0,0 +1,3 @@
+<svg width="8" height="8" viewBox="0 0 8 8" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M1.2025 3.30126C1.20087 3.26751 1.2 3.23376 1.2 3.20001C1.2 2.09501 2.095 1.20001 3.2 1.20001C3.94125 1.20001 4.5875 1.60314 4.93375 2.20251C5.12375 2.06376 5.35375 2.00001 5.6 2.00001C6.2625 2.00001 6.8 2.52626 6.8 3.20001C6.8 3.35251 6.77125 3.49751 6.72 3.63251C7.45 3.78001 8 4.42626 8 5.20001C8 6.08376 7.28375 6.80001 6.4 6.80001H1.8C0.805875 6.80001 0 5.99376 0 5.00001C0 4.21501 0.502125 3.54751 1.2025 3.30126Z" fill="white"/>
+</svg>
diff --git a/assets/icons/cloud_slash_12.svg b/assets/icons/cloud_slash_12.svg
new file mode 100644
index 0000000000..37d0ee904c
--- /dev/null
+++ b/assets/icons/cloud_slash_12.svg
@@ -0,0 +1,3 @@
+<svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M2.59892 2.76222C3.14641 2.17067 3.93013 1.80018 4.80011 1.80018C5.91195 1.80018 6.8813 2.40485 7.40066 3.30389C7.68565 3.09577 8.03064 3.00015 8.4 3.00015C9.39372 3.00015 10.1999 3.7895 10.1999 4.80009C10.1999 5.02884 10.1568 5.24633 10.08 5.44882C11.1749 5.67007 11.9999 6.63941 11.9999 7.80001C11.9999 8.48623 11.7112 9.10497 11.233 9.52683L11.8274 9.99557C12.0224 10.1493 12.058 10.4324 11.9043 10.6274C11.7505 10.8224 11.4674 10.858 11.2724 10.7043L0.172556 2.00436C-0.0231882 1.85099 -0.0574997 1.56825 0.0958708 1.37251C0.249241 1.17676 0.531795 1.14245 0.727671 1.29582L2.59868 2.76184L2.59892 2.76222ZM1.82213 4.43635L9.13873 10.1999H2.70017C1.20903 10.1999 0.000248596 8.99059 0.000248596 7.50001C0.000248596 6.32255 0.753414 5.32133 1.80395 4.95196C1.80151 4.90134 1.8002 4.85072 1.8002 4.80009C1.8002 4.67635 1.8077 4.55448 1.82213 4.43635Z" fill="white"/>
+</svg>
diff --git a/assets/icons/cloud_slash_8.svg b/assets/icons/cloud_slash_8.svg
new file mode 100644
index 0000000000..524012d31a
--- /dev/null
+++ b/assets/icons/cloud_slash_8.svg
@@ -0,0 +1,3 @@
+<svg width="8" height="8" viewBox="0 0 8 8" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M1.73261 1.8415C2.0976 1.44713 2.62009 1.20014 3.20007 1.20014C3.9413 1.20014 4.58753 1.60325 4.93377 2.20261C5.12376 2.06387 5.35376 2.00012 5.6 2.00012C6.26248 2.00012 6.79997 2.52635 6.79997 3.20008C6.79997 3.35258 6.77122 3.49757 6.71997 3.63257C7.44995 3.78007 7.99993 4.4263 7.99993 5.20002C7.99993 5.65751 7.80744 6.07 7.48869 6.35124L7.88493 6.66373C8.01493 6.76623 8.03868 6.95497 7.93618 7.08497C7.83368 7.21496 7.64494 7.23871 7.51494 7.13622L0.115037 1.33626C-0.0154588 1.23402 -0.0383331 1.04552 0.0639139 0.915025C0.166161 0.784529 0.35453 0.761655 0.485114 0.863902L1.73245 1.84125L1.73261 1.8415ZM1.21475 2.95759L6.09249 6.79998H1.80011C0.806017 6.79998 0.000165731 5.99375 0.000165731 5.00003C0.000165731 4.21505 0.502276 3.54757 1.20263 3.30133C1.20101 3.26758 1.20013 3.23383 1.20013 3.20008C1.20013 3.11759 1.20513 3.03634 1.21475 2.95759Z" fill="white"/>
+</svg>
diff --git a/assets/icons/comment-16.svg b/assets/icons/comment-16.svg
deleted file mode 100644
index 6316d3a4a9..0000000000
--- a/assets/icons/comment-16.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M8.01234 1.86426C4.13913 1.86426 1.00077 4.41444 1.00077 7.56176C1.00077 8.86644 1.54614 10.0613 2.45007 11.0186C2.04248 12.1006 1.19361 13.0149 1.17991 13.0251C0.998442 13.2168 0.950506 13.4976 1.05323 13.7373C1.15939 13.9769 1.39392 14.1358 1.65743 14.1358C3.34203 14.1358 4.64588 13.4305 5.46764 12.8689C6.23461 13.1168 7.11663 13.2593 8.01234 13.2593C11.8855 13.2593 15 10.7083 15 7.56176C15 4.41526 11.8855 1.86426 8.01234 1.86426ZM8.01508 11.9445C7.28235 11.9445 6.56002 11.8315 5.86811 11.6125L5.24494 11.4173L4.7108 11.7939C4.32047 12.0711 3.78276 12.3796 3.13577 12.5883C3.33778 12.2563 3.52939 11.883 3.68032 11.4858L3.97122 10.7188L3.4064 10.1198C2.91252 9.5915 2.31675 8.7177 2.31675 7.56176C2.31675 5.14443 4.87104 3.17907 8.01426 3.17907C11.1575 3.17907 13.7118 5.14443 13.7118 7.56176C13.7118 9.97909 11.1569 11.9445 8.01508 11.9445Z" fill="#7E7E83"/>
-</svg>
diff --git a/assets/icons/contacts-solid-14.svg b/assets/icons/contacts-solid-14.svg
deleted file mode 100644
index 05ad6ada71..0000000000
--- a/assets/icons/contacts-solid-14.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M5.2 7C6.52563 7 7.6 5.92544 7.6 4.6C7.6 3.27456 6.52563 2.2 5.2 2.2C3.87438 2.2 2.8 3.27456 2.8 4.6C2.8 5.92544 3.87438 7 5.2 7ZM6.15063 7.9H4.24938C2.45444 7.9 1 9.355 1 11.1494C1 11.5094 1.291 11.8 1.64988 11.8H8.74938C9.10938 11.8 9.4 11.5094 9.4 11.1494C9.4 9.355 7.945 7.9 6.15063 7.9ZM9.98313 8.2H8.59844C9.46 8.90688 10 9.96438 10 11.1494C10 11.3894 9.92875 11.6106 9.8125 11.8H12.4C12.7319 11.8 13 11.53 13 11.1831C13 9.5425 11.6575 8.2 9.98313 8.2ZM9.1 7C10.2606 7 11.2 6.06063 11.2 4.9C11.2 3.73938 10.2606 2.8 9.1 2.8C8.62919 2.8 8.19925 2.96041 7.849 3.22206C8.065 3.63681 8.2 4.10125 8.2 4.6C8.2 5.266 7.97631 5.87763 7.60769 6.37581C7.98813 6.76 8.515 7 9.1 7Z" fill="white"/>
-</svg>
diff --git a/assets/icons/diagnostic-error-10.svg b/assets/icons/diagnostic-error-10.svg
deleted file mode 100644
index d01bc3a23d..0000000000
--- a/assets/icons/diagnostic-error-10.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-<svg width="10" height="10" viewBox="0 0 10 10" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M5 10C7.76142 10 10 7.76142 10 5C10 2.23858 7.76142 0 5 0C2.23858 0 0 2.23858 0 5C0 7.76142 2.23858 10 5 10ZM2.68306 3.56694L4.11612 5L2.68306 6.43306L3.56694 7.31694L5 5.88388L6.43306 7.31694L7.31694 6.43306L5.88388 5L7.31694 3.56694L6.43306 2.68306L5 4.11612L3.56694 2.68306L2.68306 3.56694Z" fill="#EF4444"/>
-</svg>
diff --git a/assets/icons/diagnostic-summary-error.svg b/assets/icons/diagnostic-summary-error.svg
deleted file mode 100644
index 0180762a9e..0000000000
--- a/assets/icons/diagnostic-summary-error.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-<svg width="13" height="13" viewBox="0 0 13 13" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M6.5 13C10.0899 13 13 10.0899 13 6.5C13 2.91015 10.0899 0 6.5 0C2.91015 0 0 2.91015 0 6.5C0 10.0899 2.91015 13 6.5 13ZM3.48798 4.63702L5.35095 6.5L3.48798 8.36298L4.63702 9.51202L6.5 7.64905L8.36298 9.51202L9.51202 8.36298L7.64905 6.5L9.51202 4.63702L8.36298 3.48798L6.5 5.35095L4.63702 3.48798L3.48798 4.63702Z" fill="white" fill-opacity="0.6"/>
-</svg>
diff --git a/assets/icons/diagnostic-summary-warning.svg b/assets/icons/diagnostic-summary-warning.svg
deleted file mode 100644
index fead4db839..0000000000
--- a/assets/icons/diagnostic-summary-warning.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-<svg width="13" height="13" viewBox="0 0 13 13" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M13 13H0V10.4L5.6875 0H7.3125L13 10.4V13ZM5.6875 3.46667H7.3125V7.8H5.6875V3.46667ZM5.6875 9.53333H7.3125V11.2667H5.6875V9.53333Z" fill="white" fill-opacity="0.6"/>
-</svg>
diff --git a/assets/icons/diagnostic-warning-10.svg b/assets/icons/diagnostic-warning-10.svg
deleted file mode 100644
index bfd9ed7c6f..0000000000
--- a/assets/icons/diagnostic-warning-10.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-<svg width="10" height="10" viewBox="0 0 10 10" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M10 10H0V8L4.375 0H5.625L10 8V10ZM4.375 2.66667H5.625V6H4.375V2.66667ZM4.375 7.33333H5.625V8.66667H4.375V7.33333Z" fill="#FDE047"/>
-</svg>
diff --git a/assets/icons/disclosure-closed.svg b/assets/icons/disclosure-closed.svg
deleted file mode 100644
index 87a898787e..0000000000
--- a/assets/icons/disclosure-closed.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-<svg width="4" height="8" viewBox="0 0 4 8" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M0.923915 0.64914L3.7699 3.67213C3.85691 3.76411 3.9004 3.88214 3.9004 4.00028C3.9004 4.11835 3.85689 4.23635 3.7699 4.32843L0.923915 7.35142C0.742536 7.54234 0.440436 7.5503 0.249113 7.36932C0.0564376 7.18784 0.0496359 6.88444 0.230468 6.69431L2.7841 3.99948L0.230468 1.30465C0.0496359 1.11452 0.0563979 0.813217 0.249113 0.630446C0.440436 0.449663 0.742536 0.457618 0.923915 0.64914Z" fill="#66686A"/>
-</svg>
diff --git a/assets/icons/disclosure-open.svg b/assets/icons/disclosure-open.svg
deleted file mode 100644
index 3a76a74d31..0000000000
--- a/assets/icons/disclosure-open.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-<svg width="8" height="4" viewBox="0 0 8 4" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M7.35131 0.916948L4.32837 3.76288C4.23689 3.8663 4.11756 3.91005 4.00022 3.91005C3.88289 3.91005 3.76396 3.86654 3.67208 3.77955L0.649138 0.916948C0.457619 0.733981 0.449664 0.431687 0.630444 0.240765C0.812019 0.0478537 1.11531 0.0418875 1.30543 0.222866L4.00022 2.77446L6.69501 0.220877C6.88518 0.0400179 7.18723 0.0468593 7.37 0.239522C7.55019 0.431687 7.54223 0.733981 7.35131 0.916948Z" fill="#66686A"/>
-</svg>
diff --git a/assets/icons/download-solid-14.svg b/assets/icons/download-solid-14.svg
deleted file mode 100644
index e2e1cf5d02..0000000000
--- a/assets/icons/download-solid-14.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M4 10C3.58579 10 3.25 10.3358 3.25 10.75C3.25 11.1642 3.58579 11.5 4 11.5V10ZM10 11.5C10.4142 11.5 10.75 11.1642 10.75 10.75C10.75 10.3358 10.4142 10 10 10V11.5ZM7.75 3.5C7.75 3.08579 7.41421 2.75 7 2.75C6.58579 2.75 6.25 3.08579 6.25 3.5H7.75ZM7 8L6.51191 8.56944C6.79277 8.81019 7.20723 8.81019 7.48809 8.56944L7 8ZM9.23809 7.06944C9.55259 6.79988 9.58901 6.3264 9.31944 6.01191C9.04988 5.69741 8.5764 5.66099 8.26191 5.93056L9.23809 7.06944ZM5.73809 5.93056C5.4236 5.66099 4.95012 5.69741 4.68056 6.01191C4.41099 6.3264 4.44741 6.79988 4.76191 7.06944L5.73809 5.93056ZM4 11.5H10V10H4V11.5ZM6.25 3.5V8H7.75V3.5H6.25ZM7.48809 8.56944L9.23809 7.06944L8.26191 5.93056L6.51191 7.43056L7.48809 8.56944ZM7.48809 7.43056L5.73809 5.93056L4.76191 7.06944L6.51191 8.56944L7.48809 7.43056Z" fill="white"/>
-</svg>
diff --git a/assets/icons/download_12.svg b/assets/icons/download_12.svg
new file mode 100644
index 0000000000..8386cecbeb
--- /dev/null
+++ b/assets/icons/download_12.svg
@@ -0,0 +1,3 @@
+<svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M9.5 4.5L7 4.5V0H5V4.5H2.5V5.625L6 9L9.5 5.625V4.5ZM10 10H2V12H10V10Z" fill="white"/>
+</svg>
diff --git a/assets/icons/download_8.svg b/assets/icons/download_8.svg
new file mode 100644
index 0000000000..629ba0c620
--- /dev/null
+++ b/assets/icons/download_8.svg
@@ -0,0 +1,3 @@
+<svg width="8" height="8" viewBox="0 0 8 8" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M6.33333 3L4.66666 3V0H3.33333V3H1.66666V3.75L3.99999 6L6.33333 3.75V3ZM6.66666 6.66667H1.33333V8H6.66666V6.66667Z" fill="white"/>
+</svg>
diff --git a/assets/icons/error-solid-14.svg b/assets/icons/error-solid-14.svg
deleted file mode 100644
index a74b7e9419..0000000000
--- a/assets/icons/error-solid-14.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M7 11.5C9.48528 11.5 11.5 9.48528 11.5 7C11.5 4.51472 9.48528 2.5 7 2.5C4.51472 2.5 2.5 4.51472 2.5 7C2.5 9.48528 4.51472 11.5 7 11.5ZM4.91475 5.71025L6.2045 7L4.91475 8.28975L5.71025 9.08525L7 7.79549L8.28975 9.08525L9.08525 8.28975L7.79549 7L9.08525 5.71025L8.28975 4.91475L7 6.2045L5.71025 4.91475L4.91475 5.71025Z" fill="white"/>
-</svg>
diff --git a/assets/icons/file-16.svg b/assets/icons/file-16.svg
deleted file mode 100644
index b487e21e37..0000000000
--- a/assets/icons/file-16.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16"><path fill-rule="evenodd" d="M3.75 1.5a.25.25 0 00-.25.25v11.5c0 .138.112.25.25.25h8.5a.25.25 0 00.25-.25V6H9.75A1.75 1.75 0 018 4.25V1.5H3.75zm5.75.56v2.19c0 .138.112.25.25.25h2.19L9.5 2.06zM2 1.75C2 .784 2.784 0 3.75 0h5.086c.464 0 .909.184 1.237.513l3.414 3.414c.329.328.513.773.513 1.237v8.086A1.75 1.75 0 0112.25 15h-8.5A1.75 1.75 0 012 13.25V1.75z"/></svg>
\ No newline at end of file
diff --git a/assets/icons/file_12.svg b/assets/icons/file_12.svg
new file mode 100644
index 0000000000..191e3d7fae
--- /dev/null
+++ b/assets/icons/file_12.svg
@@ -0,0 +1,4 @@
+<svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M5.25 0H1.5V12H10.5V5.25H5.25V0Z" fill="white"/>
+<path d="M6.75 0V3.75H10.5L6.75 0Z" fill="white"/>
+</svg>
diff --git a/assets/icons/file_16.svg b/assets/icons/file_16.svg
new file mode 100644
index 0000000000..79fd1f81cb
--- /dev/null
+++ b/assets/icons/file_16.svg
@@ -0,0 +1,4 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M7.125 1H2.75V15H13.25V7.125H7.125V1Z" fill="white"/>
+<path d="M8.875 1V5.375H13.25L8.875 1Z" fill="white"/>
+</svg>
diff --git a/assets/icons/file_8.svg b/assets/icons/file_8.svg
new file mode 100644
index 0000000000..2e636bd3b3
--- /dev/null
+++ b/assets/icons/file_8.svg
@@ -0,0 +1,4 @@
+<svg width="8" height="8" viewBox="0 0 8 8" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M3.5 0H1V8H7V3.5H3.5V0Z" fill="white"/>
+<path d="M4.5 0V2.5H7L4.5 0Z" fill="white"/>
+</svg>
diff --git a/assets/icons/folder-tree-solid-14.svg b/assets/icons/folder-tree-solid-14.svg
deleted file mode 100644
index ecda94ca82..0000000000
--- a/assets/icons/folder-tree-solid-14.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M12.3333 2.33333H10L9.33333 1.66666H7.66667C7.29958 1.66666 7 1.96625 7 2.33333V5.66666C7 6.03375 7.29958 6.33333 7.66667 6.33333H12.3333C12.7004 6.33333 13 6.03375 13 5.66666V3C13 2.63291 12.7 2.33333 12.3333 2.33333ZM12.3333 8.33333H10L9.33333 7.66666H7.66667C7.29958 7.66666 7 7.96625 7 8.33333V11.6667C7 12.0337 7.29958 12.3333 7.66667 12.3333H12.3333C12.7004 12.3333 13 12.0337 13 11.6667V9C13 8.63333 12.7 8.33333 12.3333 8.33333ZM2.33333 2C2.33333 1.8151 2.185 1.66666 2 1.66666H1.33333C1.14844 1.66666 1 1.815 1 2V10.3333C1 10.7004 1.29958 11 1.66667 11H6.33333V9.66666H2.33333V5H6.33333V3.66666H2.33333V2Z" fill="white"/>
-</svg>
diff --git a/assets/icons/folder_tree_12.svg b/assets/icons/folder_tree_12.svg
new file mode 100644
index 0000000000..f11253aa4a
--- /dev/null
+++ b/assets/icons/folder_tree_12.svg
@@ -0,0 +1,3 @@
+<svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M11.3333 1.33335H9L8.33333 0.666687H6.66667C6.29958 0.666687 6 0.96627 6 1.33335V4.66669C6 5.03377 6.29958 5.33335 6.66667 5.33335H11.3333C11.7004 5.33335 12 5.03377 12 4.66669V2.00002C12 1.63294 11.7 1.33335 11.3333 1.33335ZM11.3333 7.33335H9L8.33333 6.66669H6.66667C6.29958 6.66669 6 6.96627 6 7.33335V10.6667C6 11.0338 6.29958 11.3334 6.66667 11.3334H11.3333C11.7004 11.3334 12 11.0338 12 10.6667V8.00002C12 7.63335 11.7 7.33335 11.3333 7.33335ZM1.33333 1.00002C1.33333 0.815125 1.185 0.666687 1 0.666687H0.333333C0.148438 0.666687 0 0.81502 0 1.00002V9.33335C0 9.70044 0.299583 10 0.666667 10H5.33333V8.66669H1.33333V4.00002H5.33333V2.66669H1.33333V1.00002Z" fill="white"/>
+</svg>
diff --git a/assets/icons/Icon16FolderTree.svg b/assets/icons/folder_tree_16.svg
similarity index 100%
rename from assets/icons/Icon16FolderTree.svg
rename to assets/icons/folder_tree_16.svg
diff --git a/assets/icons/folder_tree_8.svg b/assets/icons/folder_tree_8.svg
new file mode 100644
index 0000000000..758080a611
--- /dev/null
+++ b/assets/icons/folder_tree_8.svg
@@ -0,0 +1,3 @@
+<svg width="8" height="8" viewBox="0 0 8 8" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M7.55556 0.888902H6L5.55556 0.444458H4.44444C4.19972 0.444458 4 0.64418 4 0.888902V3.11112C4 3.35585 4.19972 3.55557 4.44444 3.55557H7.55556C7.80028 3.55557 8 3.35585 8 3.11112V1.33335C8 1.08862 7.8 0.888902 7.55556 0.888902ZM7.55556 4.8889H6L5.55556 4.44446H4.44444C4.19972 4.44446 4 4.64418 4 4.8889V7.11112C4 7.35585 4.19972 7.55557 4.44444 7.55557H7.55556C7.80028 7.55557 8 7.35585 8 7.11112V5.33335C8 5.0889 7.8 4.8889 7.55556 4.8889ZM0.888889 0.66668C0.888889 0.543416 0.79 0.444458 0.666667 0.444458H0.222222C0.0989583 0.444458 0 0.543347 0 0.66668V6.22224C0 6.46696 0.199722 6.66668 0.444444 6.66668H3.55556V5.77779H0.888889V2.66668H3.55556V1.77779H0.888889V0.66668Z" fill="white"/>
+</svg>
diff --git a/assets/icons/jump.svg b/assets/icons/jump.svg
deleted file mode 100644
index 4e89fc4339..0000000000
--- a/assets/icons/jump.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-<svg width="8" height="8" viewBox="0 0 8 8" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M7.5 1.02501V6.27499C7.5 6.56484 7.26484 6.79999 6.975 6.79999C6.68516 6.79999 6.45 6.56484 6.45 6.27499V2.29157L1.3969 7.34468C1.29365 7.44968 1.15934 7.49999 1.02503 7.49999C0.890713 7.49999 0.756401 7.44871 0.653808 7.34619C0.448731 7.14111 0.448731 6.80894 0.653808 6.60375L5.70844 1.55001H1.72502C1.43518 1.55001 1.20002 1.31595 1.20002 1.02501C1.20002 0.734077 1.43518 0.500015 1.72502 0.500015H6.975C7.26594 0.500015 7.5 0.736264 7.5 1.02501Z" fill="white" fill-opacity="0.6"/>
-</svg>
diff --git a/assets/icons/lock-8.svg b/assets/icons/lock-8.svg
deleted file mode 100644
index c98340b93a..0000000000
--- a/assets/icons/lock-8.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-<svg width="8" height="8" viewBox="0 0 8 8" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M1.75 3V2.25C1.75 1.00734 2.75781 0 4 0C5.24219 0 6.25 1.00734 6.25 2.25V3H6.5C7.05156 3 7.5 3.44844 7.5 4V7C7.5 7.55156 7.05156 8 6.5 8H1.5C0.947656 8 0.5 7.55156 0.5 7V4C0.5 3.44844 0.947656 3 1.5 3H1.75ZM2.75 3H5.25V2.25C5.25 1.55969 4.69063 1 4 1C3.30938 1 2.75 1.55969 2.75 2.25V3Z" fill="#8B8792"/>
-</svg>
diff --git a/assets/icons/lock_8.svg b/assets/icons/lock_8.svg
new file mode 100644
index 0000000000..8df83dc0b5
--- /dev/null
+++ b/assets/icons/lock_8.svg
@@ -0,0 +1,3 @@
+<svg width="8" height="8" viewBox="0 0 8 8" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M2 3V2C2 0.89543 2.89543 0 4 0C5.10457 0 6 0.895431 6 2V3H7V8H1V3H2ZM3 2C3 1.44772 3.44772 1 4 1C4.55228 1 5 1.44772 5 2V3H3V2ZM3.5 6.5V4.5H4.5V6.5H3.5Z" fill="white"/>
+</svg>
diff --git a/assets/icons/magnifier.svg b/assets/icons/magnifier.svg
deleted file mode 100644
index dc27a594ee..0000000000
--- a/assets/icons/magnifier.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-<svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M11.0893 10.4092L8.34129 7.66113C8.93602 6.93311 9.26414 6.01641 9.26414 5.01562C9.26414 2.65928 7.35425 0.75 4.99851 0.75C2.64278 0.75 0.751343 2.65989 0.751343 5.01562C0.751343 7.37136 2.66103 9.28125 4.99851 9.28125C5.99909 9.28125 6.91702 8.93446 7.64402 8.35758L10.3921 11.1056C10.5069 11.2028 10.6341 11.25 10.7592 11.25C10.8843 11.25 11.011 11.2019 11.1072 11.1058C11.2985 10.9137 11.2985 10.602 11.0893 10.4092ZM1.73572 5.01562C1.73572 3.20643 3.20777 1.73438 5.01697 1.73438C6.82617 1.73438 8.29822 3.20643 8.29822 5.01562C8.29822 6.82482 6.82617 8.29688 5.01697 8.29688C3.20777 8.29688 1.73572 6.82441 1.73572 5.01562Z" fill="white" fill-opacity="0.5"/>
-</svg>
diff --git a/assets/icons/magnifying_glass_12.svg b/assets/icons/magnifying_glass_12.svg
new file mode 100644
index 0000000000..b45c30172e
--- /dev/null
+++ b/assets/icons/magnifying_glass_12.svg
@@ -0,0 +1,3 @@
+<svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M11.8167 11.0391L8.67607 7.89844C9.35576 7.06641 9.73076 6.01875 9.73076 4.875C9.73076 2.18203 7.54802 0 4.85576 0C2.16349 0 0.00161743 2.18273 0.00161743 4.875C0.00161743 7.56727 2.18412 9.75 4.85552 9.75C5.99904 9.75 7.0481 9.35367 7.87896 8.69437L11.0196 11.835C11.1508 11.9461 11.2961 12 11.4391 12C11.5821 12 11.7269 11.9449 11.8369 11.835C12.0555 11.6154 12.0555 11.2591 11.8165 11.0388L11.8167 11.0391ZM1.12685 4.875C1.12685 2.80734 2.8092 1.125 4.87685 1.125C6.94451 1.125 8.62685 2.80734 8.62685 4.875C8.62685 6.94266 6.94451 8.625 4.87685 8.625C2.8092 8.625 1.12685 6.94219 1.12685 4.875Z" fill="white"/>
+</svg>
diff --git a/assets/icons/magnifying_glass_16.svg b/assets/icons/magnifying_glass_16.svg
new file mode 100644
index 0000000000..f35343e8d3
--- /dev/null
+++ b/assets/icons/magnifying_glass_16.svg
@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M14.7861 13.8789L11.1221 10.2148C11.915 9.24414 12.3525 8.02187 12.3525 6.6875C12.3525 3.5457 9.80602 1 6.66504 1C3.52406 1 1.00188 3.54652 1.00188 6.6875C1.00188 9.82848 3.54813 12.375 6.66477 12.375C7.99887 12.375 9.22278 11.9126 10.1921 11.1434L13.8562 14.8075C14.0093 14.9371 14.1788 15 14.3456 15C14.5124 15 14.6814 14.9357 14.8097 14.8075C15.0648 14.5513 15.0648 14.1357 14.7859 13.8786L14.7861 13.8789ZM2.31465 6.6875C2.31465 4.27523 4.27738 2.3125 6.68965 2.3125C9.10192 2.3125 11.0647 4.27523 11.0647 6.6875C11.0647 9.09977 9.10192 11.0625 6.68965 11.0625C4.27738 11.0625 2.31465 9.09922 2.31465 6.6875Z" fill="white"/>
+</svg>
diff --git a/assets/icons/magnifying_glass_8.svg b/assets/icons/magnifying_glass_8.svg
new file mode 100644
index 0000000000..00eb332440
--- /dev/null
+++ b/assets/icons/magnifying_glass_8.svg
@@ -0,0 +1,3 @@
+<svg width="8" height="8" viewBox="0 0 8 8" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M7.87779 7.35938L5.78404 5.26562C6.23716 4.71094 6.48716 4.0125 6.48716 3.25C6.48716 1.45469 5.03201 0 3.23716 0C1.44232 0 0.00106812 1.45516 0.00106812 3.25C0.00106812 5.04484 1.45607 6.5 3.23701 6.5C3.99935 6.5 4.69873 6.23578 5.25263 5.79625L7.34638 7.89C7.43388 7.96406 7.53076 8 7.62607 8C7.72138 8 7.81794 7.96328 7.89123 7.89C8.03701 7.74359 8.03701 7.50609 7.87763 7.35922L7.87779 7.35938ZM0.751224 3.25C0.751224 1.87156 1.87279 0.75 3.25122 0.75C4.62966 0.75 5.75123 1.87156 5.75123 3.25C5.75123 4.62844 4.62966 5.75 3.25122 5.75C1.87279 5.75 0.751224 4.62812 0.751224 3.25Z" fill="white"/>
+</svg>
diff --git a/assets/icons/no-error-solid-14.svg b/assets/icons/no-error-solid-14.svg
deleted file mode 100644
index 4d222aac73..0000000000
--- a/assets/icons/no-error-solid-14.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M7 11.5C9.48528 11.5 11.5 9.48528 11.5 7C11.5 4.51472 9.48528 2.5 7 2.5C4.51472 2.5 2.5 4.51472 2.5 7C2.5 9.48528 4.51472 11.5 7 11.5ZM9.64775 5.71025L8.85225 4.91475L6.15625 7.61076L5.14775 6.60225L4.35225 7.39775L6.15625 9.20174L9.64775 5.71025Z" fill="white"/>
-</svg>
diff --git a/assets/icons/offline-14.svg b/assets/icons/offline-14.svg
deleted file mode 100644
index 5349f65ead..0000000000
--- a/assets/icons/offline-14.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-<svg width="14" height="12" viewBox="0 0 14 12" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M3.14992 9.84972C1.99189 9.84972 1.04997 8.90759 1.04997 7.74977C1.04997 6.87042 1.61368 6.07944 2.45278 5.78173L3.15692 5.53193L3.15307 4.98616L2.15704 4.18643C2.12729 4.39861 2.10016 4.59111 2.1017 4.79235C0.880227 5.22546 0 6.38043 0 7.74977C0 9.48879 1.41024 10.8997 3.14992 10.8997H10.6988L9.3592 9.84972H3.14992ZM13.0569 10.0816C13.6343 9.5391 13.9996 8.77787 13.9996 7.92477C13.9996 6.58321 13.1056 5.46171 11.8855 5.09203C11.8888 5.04391 11.8997 4.99797 11.8997 4.94985C11.8997 3.59582 10.8038 2.49991 9.44976 2.49991C9.20017 2.49991 8.96436 2.54819 8.73752 2.61753C8.06948 1.70171 6.99544 1.09995 5.77485 1.09995C4.71394 1.09995 3.76678 1.55668 3.1018 2.27679L0.849166 0.51172C0.752699 0.436537 0.638515 0.399963 0.525643 0.399963C0.369897 0.399963 0.215398 0.468999 0.112194 0.600946C-0.0669139 0.82914 -0.0272556 1.15944 0.201048 1.33816L13.1509 11.4881C13.3806 11.6676 13.71 11.6265 13.8879 11.3989C14.067 11.1705 14.0273 10.8405 13.799 10.6617L13.0569 10.0816ZM12.2169 9.42317L3.92865 2.92427C4.40114 2.44916 5.05081 2.14992 5.77485 2.14992C6.61483 2.14992 7.38547 2.54585 7.88923 3.23642L8.32979 3.84016L9.04442 3.62167C10.1132 3.29487 10.8869 4.18078 10.8373 5.03039L10.7893 5.85549L11.58 6.09589C12.3984 6.34544 12.9497 7.08042 12.9497 7.92477C12.9497 8.53288 12.6609 9.0688 12.2169 9.42317Z" fill="#B3B3B3"/>
-</svg>
diff --git a/assets/icons/share.svg b/assets/icons/share.svg
deleted file mode 100644
index ee8ddfffc9..0000000000
--- a/assets/icons/share.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-<svg width="12" height="14" viewBox="0 0 12 14" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M6.0002 0.333344C2.77885 0.333344 0.16687 2.94532 0.16687 6.16668C0.16687 8.56824 1.61921 10.6302 3.69291 11.5234C3.60229 10.9831 3.53223 10.4404 3.51062 10.0091C2.25203 9.19011 1.41661 7.77605 1.41661 6.16668C1.41661 3.63933 3.4726 1.58334 5.99994 1.58334C8.52729 1.58334 10.5833 3.63933 10.5833 6.16668C10.5833 7.77579 9.74786 9.19011 8.48979 10.0104C8.46791 10.4401 8.39734 10.9836 8.30645 11.5253C10.38 10.6302 11.8331 8.56772 11.8331 6.16668C11.8331 2.94532 9.22117 0.333344 5.99981 0.333344H6.0002ZM6.0002 8.45834C5.14395 8.45834 4.33354 8.68295 4.33354 9.59767C4.33354 10.4604 4.66895 12.3138 4.87052 13.056C5.00541 13.5521 5.50802 13.6667 6.0002 13.6667C6.49239 13.6667 6.9963 13.5527 7.12989 13.0578C7.33093 12.3099 7.66687 10.4583 7.66687 9.59897C7.66687 8.6823 6.85697 8.45834 6.0002 8.45834ZM6.0002 7.62501C6.80619 7.62501 7.45854 6.97267 7.45854 6.16668C7.45854 5.36069 6.78406 4.70834 6.0002 4.70834C5.21635 4.70834 4.54187 5.35939 4.54187 6.16668C4.54187 6.97397 5.19291 7.62501 6.0002 7.62501ZM9.7502 6.16668C9.7502 4.09558 8.0713 2.41668 6.0002 2.41668C3.92911 2.41668 2.2502 4.09636 2.2502 6.16668C2.2502 7.33413 2.79499 8.36407 3.63145 9.05209C3.75776 8.72267 3.99942 8.37814 4.46609 8.13959C4.46635 8.13803 4.47416 8.13803 4.47937 8.13803C3.88822 7.6797 3.5002 6.97136 3.5002 6.16668C3.5002 4.78595 4.61947 3.66668 6.0002 3.66668C7.38093 3.66668 8.5002 4.78595 8.5002 6.16668C8.5002 6.97189 8.11296 7.68048 7.52182 8.13751C7.5252 8.13803 7.53484 8.13855 7.53406 8.13933C8.00098 8.37788 8.24213 8.72215 8.36869 9.05183C9.20567 8.36433 9.74994 7.33308 9.74994 6.16642L9.7502 6.16668Z" fill="white"/>
-</svg>
diff --git a/assets/icons/signed-out-12.svg b/assets/icons/signed-out-12.svg
deleted file mode 100644
index 3cecfe9dd3..0000000000
--- a/assets/icons/signed-out-12.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-<svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M6 3.04688C5.00332 3.04688 4.19531 3.85488 4.19531 4.85156C4.19531 5.84824 5.00332 6.65625 6 6.65625C6.99668 6.65625 7.80469 5.84824 7.80469 4.85156C7.80469 3.85488 6.99668 3.04688 6 3.04688ZM6 5.67188C5.5476 5.67188 5.17969 5.30376 5.17969 4.85156C5.17969 4.39834 5.54678 4.03125 6 4.03125C6.45322 4.03125 6.82031 4.39916 6.82031 4.85156C6.82031 5.30479 6.45322 5.67188 6 5.67188ZM6 0.75C3.1002 0.75 0.75 3.1002 0.75 6C0.75 8.8998 3.1002 11.25 6 11.25C8.8998 11.25 11.25 8.8998 11.25 6C11.25 3.1002 8.8998 0.75 6 0.75ZM6 10.2656C5.04167 10.2656 4.15922 9.94406 3.44678 9.4086C3.80156 8.72754 4.49062 8.29688 5.26582 8.29688H6.73603C7.5102 8.29688 8.19844 8.72774 8.55466 9.4086C7.8416 9.94365 6.95771 10.2656 6 10.2656ZM9.28535 8.71729C8.73164 7.85186 7.78828 7.3125 6.73418 7.3125H5.26582C4.21254 7.3125 3.26938 7.85083 2.71465 8.71688C2.1027 7.979 1.73438 7.03154 1.73438 6C1.73438 3.64775 3.64796 1.73438 6 1.73438C8.35204 1.73438 10.2656 3.64796 10.2656 6C10.2656 7.03154 9.89648 7.979 9.28535 8.71729Z" fill="white"/>
-</svg>
diff --git a/assets/icons/split.svg b/assets/icons/split.svg
deleted file mode 100644
index 9e7d3607eb..0000000000
--- a/assets/icons/split.svg
+++ /dev/null
@@ -1,5 +0,0 @@
-<svg width="11" height="12" viewBox="0 0 11 12" fill="none" xmlns="http://www.w3.org/2000/svg">
-<rect x="6" y="1" width="4" height="10" fill="white" fill-opacity="0.2"/>
-<rect x="0.5" y="0.5" width="10" height="11" rx="1.5" stroke="white"/>
-<rect x="5" y="1" width="1" height="10" fill="white"/>
-</svg>
diff --git a/assets/icons/split_12.svg b/assets/icons/split_12.svg
new file mode 100644
index 0000000000..8aeb3bcb4c
--- /dev/null
+++ b/assets/icons/split_12.svg
@@ -0,0 +1,5 @@
+<svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M11 1H6V11H11V1Z" fill="white" fill-opacity="0.2"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M2.1818 1C1.51237 1 1.04544 1.48778 1.04544 2V10C1.04544 10.5122 1.51237 11 2.1818 11H9.81817C10.4876 11 10.9545 10.5122 10.9545 10V2C10.9545 1.48778 10.4876 1 9.81817 1H2.1818ZM0.0454407 2C0.0454407 0.855367 1.04377 0 2.1818 0H9.81817C10.9562 0 11.9545 0.855367 11.9545 2V10C11.9545 11.1446 10.9562 12 9.81817 12H2.1818C1.04377 12 0.0454407 11.1446 0.0454407 10V2Z" fill="white"/>
+<path d="M6.09091 1H5V11H6.09091V1Z" fill="white"/>
+</svg>
diff --git a/assets/icons/terminal-solid-14.svg b/assets/icons/terminal-solid-14.svg
deleted file mode 100644
index b3bf68fb88..0000000000
--- a/assets/icons/terminal-solid-14.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M1 3.25C1 2.42148 1.67148 1.75 2.5 1.75H11.5C12.3273 1.75 13 2.42148 13 3.25V10.75C13 11.5773 12.3273 12.25 11.5 12.25H2.5C1.67148 12.25 1 11.5773 1 10.75V3.25ZM3.39766 4.55781C3.18789 4.7875 3.20336 5.14141 3.43281 5.35234L5.23047 7L3.43281 8.64766C3.20336 8.85859 3.18789 9.2125 3.39766 9.44219C3.60859 9.65078 3.9625 9.68594 4.19219 9.47734L6.44219 7.41484C6.55937 7.30703 6.625 7.15703 6.625 6.97891C6.625 6.84297 6.55937 6.69297 6.44219 6.58516L4.19219 4.52266C3.9625 4.31406 3.60859 4.32813 3.39766 4.55781V4.55781ZM6.8125 8.875C6.50078 8.875 6.25 9.12578 6.25 9.4375C6.25 9.74922 6.50078 10 6.8125 10H10.1875C10.4992 10 10.75 9.74922 10.75 9.4375C10.75 9.12578 10.4992 8.875 10.1875 8.875H6.8125Z" fill="white"/>
-</svg>
diff --git a/assets/icons/terminal_12.svg b/assets/icons/terminal_12.svg
new file mode 100644
index 0000000000..4c44e657e8
--- /dev/null
+++ b/assets/icons/terminal_12.svg
@@ -0,0 +1,3 @@
+<svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M0 2.25C0 1.42148 0.67148 0.75 1.5 0.75H10.5C11.3273 0.75 12 1.42148 12 2.25V9.75C12 10.5773 11.3273 11.25 10.5 11.25H1.5C0.67148 11.25 0 10.5773 0 9.75V2.25ZM2.39766 3.55781C2.18789 3.7875 2.20336 4.14141 2.43281 4.35234L4.23047 6L2.43281 7.64766C2.20336 7.85859 2.18789 8.2125 2.39766 8.44219C2.60859 8.65078 2.9625 8.68594 3.19219 8.47734L5.44219 6.41484C5.55937 6.30703 5.625 6.15703 5.625 5.97891C5.625 5.84297 5.55937 5.69297 5.44219 5.58516L3.19219 3.52266C2.9625 3.31406 2.60859 3.32813 2.39766 3.55781ZM5.8125 7.875C5.50078 7.875 5.25 8.12578 5.25 8.4375C5.25 8.74922 5.50078 9 5.8125 9H9.1875C9.4992 9 9.75 8.74922 9.75 8.4375C9.75 8.12578 9.4992 7.875 9.1875 7.875H5.8125Z" fill="white"/>
+</svg>
diff --git a/assets/icons/terminal_16.svg b/assets/icons/terminal_16.svg
new file mode 100644
index 0000000000..927982deee
--- /dev/null
+++ b/assets/icons/terminal_16.svg
@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M1 3.625C1 2.65839 1.78339 1.875 2.75 1.875H13.25C14.2152 1.875 15 2.65839 15 3.625V12.375C15 13.3402 14.2152 14.125 13.25 14.125H2.75C1.78339 14.125 1 13.3402 1 12.375V3.625ZM3.79727 5.15078C3.55254 5.41875 3.57059 5.83165 3.83828 6.07773L5.93555 8L3.83828 9.92227C3.57059 10.1684 3.55254 10.5812 3.79727 10.8492C4.04335 11.0926 4.45625 11.1336 4.72422 10.8902L7.34922 8.48398C7.48593 8.3582 7.5625 8.1832 7.5625 7.97539C7.5625 7.8168 7.48593 7.6418 7.34922 7.51602L4.72422 5.10977C4.45625 4.8664 4.04335 4.88282 3.79727 5.15078ZM7.78125 10.1875C7.41758 10.1875 7.125 10.4801 7.125 10.8437C7.125 11.2074 7.41758 11.5 7.78125 11.5H11.7187C12.0824 11.5 12.375 11.2074 12.375 10.8437C12.375 10.4801 12.0824 10.1875 11.7187 10.1875H7.78125Z" fill="white"/>
+</svg>
diff --git a/assets/icons/terminal_8.svg b/assets/icons/terminal_8.svg
new file mode 100644
index 0000000000..f3e26f12f9
--- /dev/null
+++ b/assets/icons/terminal_8.svg
@@ -0,0 +1,3 @@
+<svg width="8" height="8" viewBox="0 0 8 8" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M0 1.5C0 0.947653 0.447653 0.5 1 0.5H7C7.55153 0.5 8 0.947653 8 1.5V6.5C8 7.05153 7.55153 7.5 7 7.5H1C0.447653 7.5 0 7.05153 0 6.5V1.5ZM1.59844 2.37187C1.45859 2.525 1.46891 2.76094 1.62187 2.90156L2.82031 4L1.62187 5.09844C1.46891 5.23906 1.45859 5.475 1.59844 5.62813C1.73906 5.76719 1.975 5.79063 2.12813 5.65156L3.62813 4.27656C3.70625 4.20469 3.75 4.10469 3.75 3.98594C3.75 3.89531 3.70625 3.79531 3.62813 3.72344L2.12813 2.34844C1.975 2.20937 1.73906 2.21875 1.59844 2.37187ZM3.875 5.25C3.66719 5.25 3.5 5.41719 3.5 5.625C3.5 5.83281 3.66719 6 3.875 6H6.125C6.3328 6 6.5 5.83281 6.5 5.625C6.5 5.41719 6.3328 5.25 6.125 5.25H3.875Z" fill="white"/>
+</svg>
diff --git a/assets/icons/triangle_exclamation_12.svg b/assets/icons/triangle_exclamation_12.svg
new file mode 100644
index 0000000000..b06707e924
--- /dev/null
+++ b/assets/icons/triangle_exclamation_12.svg
@@ -0,0 +1,3 @@
+<svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M12 11.625H0V9.375L5.25 0.375H6.75L12 9.375V11.625ZM5.25 3.375H6.75V7.125H5.25V3.375ZM5.25 8.625H6.75V10.125H5.25V8.625Z" fill="white"/>
+</svg>
diff --git a/assets/icons/triangle_exclamation_16.svg b/assets/icons/triangle_exclamation_16.svg
new file mode 100644
index 0000000000..2df386203a
--- /dev/null
+++ b/assets/icons/triangle_exclamation_16.svg
@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M15 14.5625H1V11.9375L7.125 1.4375H8.875L15 11.9375V14.5625ZM7.125 4.9375H8.875V9.3125H7.125V4.9375ZM7.125 11.0625H8.875V12.8125H7.125V11.0625Z" fill="white"/>
+</svg>
diff --git a/assets/icons/triangle_exclamation_8.svg b/assets/icons/triangle_exclamation_8.svg
new file mode 100644
index 0000000000..166a62e532
--- /dev/null
+++ b/assets/icons/triangle_exclamation_8.svg
@@ -0,0 +1,3 @@
+<svg width="8" height="8" viewBox="0 0 8 8" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M8 7.75H0V6.25L3.5 0.25H4.5L8 6.25V7.75ZM3.5 2.25H4.5V4.75H3.5V2.25ZM3.5 5.75H4.5V6.75H3.5V5.75Z" fill="white"/>
+</svg>
diff --git a/assets/icons/unlock_8.svg b/assets/icons/unlock_8.svg
new file mode 100644
index 0000000000..d358182795
--- /dev/null
+++ b/assets/icons/unlock_8.svg
@@ -0,0 +1,3 @@
+<svg width="8" height="8" viewBox="0 0 8 8" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M5.75 1C5.33579 1 5 1.33579 5 1.75V3H6.5V8H0.5V3H4V1.75C4 0.783502 4.7835 0 5.75 0C6.7165 0 7.5 0.783502 7.5 1.75V2H6.5V1.75C6.5 1.33579 6.16421 1 5.75 1ZM4.5 5H2.5V6H4.5V5Z" fill="white"/>
+</svg>
diff --git a/assets/icons/user_circle_12.svg b/assets/icons/user_circle_12.svg
new file mode 100644
index 0000000000..eec0954ba0
--- /dev/null
+++ b/assets/icons/user_circle_12.svg
@@ -0,0 +1,3 @@
+<svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M6 0C2.68594 0 0 2.68594 0 6C0 9.31406 2.68594 12 6 12C9.31406 12 12 9.31406 12 6C12 2.68594 9.31406 0 6 0ZM6 3C6.93211 3 7.6875 3.75563 7.6875 4.6875C7.6875 5.61937 6.93281 6.375 6 6.375C5.06813 6.375 4.3125 5.61937 4.3125 4.6875C4.3125 3.75563 5.06719 3 6 3ZM6 10.5C4.75945 10.5 3.63516 9.99539 2.81953 9.1807C3.19922 8.20078 4.13672 7.5 5.25 7.5H6.75C7.86422 7.5 8.80172 8.20031 9.18047 9.1807C8.36484 9.99609 7.23984 10.5 6 10.5Z" fill="white"/>
+</svg>
diff --git a/assets/icons/user_circle_8.svg b/assets/icons/user_circle_8.svg
new file mode 100644
index 0000000000..4bbf9c0301
--- /dev/null
+++ b/assets/icons/user_circle_8.svg
@@ -0,0 +1,3 @@
+<svg width="8" height="8" viewBox="0 0 8 8" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M4 0C1.79063 0 0 1.79063 0 4C0 6.20937 1.79063 8 4 8C6.20937 8 8 6.20937 8 4C8 1.79063 6.20937 0 4 0ZM4 2C4.62141 2 5.125 2.50375 5.125 3.125C5.125 3.74625 4.62187 4.25 4 4.25C3.37875 4.25 2.875 3.74625 2.875 3.125C2.875 2.50375 3.37813 2 4 2ZM4 7C3.17297 7 2.42344 6.66359 1.87969 6.12047C2.13281 5.46719 2.75781 5 3.5 5H4.5C5.24281 5 5.86781 5.46687 6.12031 6.12047C5.57656 6.66406 4.82656 7 4 7Z" fill="white"/>
+</svg>
diff --git a/assets/icons/user_group_12.svg b/assets/icons/user_group_12.svg
new file mode 100644
index 0000000000..5eae1d55b7
--- /dev/null
+++ b/assets/icons/user_group_12.svg
@@ -0,0 +1,3 @@
+<svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M4.2 6.00001C5.52563 6.00001 6.6 4.92545 6.6 3.60001C6.6 2.27457 5.52563 1.20001 4.2 1.20001C2.87438 1.20001 1.8 2.27457 1.8 3.60001C1.8 4.92545 2.87438 6.00001 4.2 6.00001ZM5.15063 6.90001H3.24938C1.45444 6.90001 0 8.35501 0 10.1494C0 10.5094 0.291 10.8 0.649875 10.8H7.74938C8.10938 10.8 8.4 10.5094 8.4 10.1494C8.4 8.35501 6.945 6.90001 5.15063 6.90001ZM8.98313 7.20001H7.59844C8.46 7.90689 9 8.96439 9 10.1494C9 10.3894 8.92875 10.6106 8.8125 10.8H11.4C11.7319 10.8 12 10.53 12 10.1831C12 8.54251 10.6575 7.20001 8.98313 7.20001ZM8.1 6.00001C9.26063 6.00001 10.2 5.06064 10.2 3.90001C10.2 2.73939 9.26063 1.80001 8.1 1.80001C7.62919 1.80001 7.19925 1.96042 6.849 2.22207C7.065 2.63682 7.2 3.10126 7.2 3.60001C7.2 4.26601 6.97631 4.87764 6.60769 5.37582C6.98813 5.76001 7.515 6.00001 8.1 6.00001Z" fill="white"/>
+</svg>
diff --git a/assets/icons/Icon16UserGroup.svg b/assets/icons/user_group_16.svg
similarity index 100%
rename from assets/icons/Icon16UserGroup.svg
rename to assets/icons/user_group_16.svg
diff --git a/assets/icons/user_group_8.svg b/assets/icons/user_group_8.svg
new file mode 100644
index 0000000000..39058e51d4
--- /dev/null
+++ b/assets/icons/user_group_8.svg
@@ -0,0 +1,3 @@
+<svg width="8" height="8" viewBox="0 0 8 8" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M2.8 3.99999C3.68375 3.99999 4.4 3.28361 4.4 2.39999C4.4 1.51636 3.68375 0.799988 2.8 0.799988C1.91625 0.799988 1.2 1.51636 1.2 2.39999C1.2 3.28361 1.91625 3.99999 2.8 3.99999ZM3.43375 4.59999H2.16625C0.969625 4.59999 0 5.56999 0 6.76624C0 7.00624 0.194 7.19999 0.43325 7.19999H5.16625C5.40625 7.19999 5.6 7.00624 5.6 6.76624C5.6 5.56999 4.63 4.59999 3.43375 4.59999ZM5.98875 4.79999H5.06563C5.64 5.27124 6 5.97624 6 6.76624C6 6.92624 5.9525 7.07374 5.875 7.19999H7.6C7.82125 7.19999 8 7.01999 8 6.78874C8 5.69499 7.105 4.79999 5.98875 4.79999ZM5.4 3.99999C6.17375 3.99999 6.8 3.37374 6.8 2.59999C6.8 1.82624 6.17375 1.19999 5.4 1.19999C5.08613 1.19999 4.7995 1.30693 4.566 1.48136C4.71 1.75786 4.8 2.06749 4.8 2.39999C4.8 2.84399 4.65088 3.25174 4.40513 3.58386C4.65875 3.83999 5.01 3.99999 5.4 3.99999Z" fill="white"/>
+</svg>
diff --git a/assets/icons/user_plus_12.svg b/assets/icons/user_plus_12.svg
new file mode 100644
index 0000000000..61f61e3929
--- /dev/null
+++ b/assets/icons/user_plus_12.svg
@@ -0,0 +1,3 @@
+<svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M4.2 6.00001C5.52563 6.00001 6.6 4.92545 6.6 3.60001C6.6 2.27457 5.52563 1.20001 4.2 1.20001C2.87438 1.20001 1.8 2.27457 1.8 3.60001C1.8 4.92545 2.87438 6.00001 4.2 6.00001ZM5.15063 6.90001H3.24938C1.45519 6.90001 0 8.35501 0 10.1494C0 10.5094 0.291 10.8 0.649875 10.8H7.7505C8.10938 10.8 8.4 10.5094 8.4 10.1494C8.4 8.35501 6.945 6.90001 5.15063 6.90001ZM11.55 4.95001H10.65V4.05001C10.65 3.80251 10.4494 3.60001 10.2 3.60001C9.95063 3.60001 9.75 3.80157 9.75 4.05001V4.95001H8.85C8.6025 4.95001 8.4 5.15251 8.4 5.40001C8.4 5.64751 8.60156 5.85001 8.85 5.85001H9.75V6.75001C9.75 6.99939 9.9525 7.20001 10.2 7.20001C10.4475 7.20001 10.65 6.99845 10.65 6.75001V5.85001H11.55C11.7994 5.85001 12 5.64939 12 5.40001C12 5.15064 11.7994 4.95001 11.55 4.95001Z" fill="white"/>
+</svg>
diff --git a/assets/icons/user_plus_16.svg b/assets/icons/user_plus_16.svg
new file mode 100644
index 0000000000..213eb8f13b
--- /dev/null
+++ b/assets/icons/user_plus_16.svg
@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M5.9 8.00002C7.44656 8.00002 8.7 6.74637 8.7 5.20002C8.7 3.65368 7.44656 2.40002 5.9 2.40002C4.35344 2.40002 3.1 3.65368 3.1 5.20002C3.1 6.74637 4.35344 8.00002 5.9 8.00002ZM7.00906 9.05002H4.79094C2.69772 9.05002 1 10.7475 1 12.841C1 13.261 1.3395 13.6 1.75819 13.6H10.0422C10.4609 13.6 10.8 13.261 10.8 12.841C10.8 10.7475 9.1025 9.05002 7.00906 9.05002ZM14.475 6.77502H13.425V5.72502C13.425 5.43627 13.1909 5.20002 12.9 5.20002C12.6091 5.20002 12.375 5.43518 12.375 5.72502V6.77502H11.325C11.0362 6.77502 10.8 7.01127 10.8 7.30002C10.8 7.58877 11.0352 7.82502 11.325 7.82502H12.375V8.87502C12.375 9.16596 12.6112 9.40002 12.9 9.40002C13.1887 9.40002 13.425 9.16487 13.425 8.87502V7.82502H14.475C14.7659 7.82502 15 7.59096 15 7.30002C15 7.00909 14.7659 6.77502 14.475 6.77502Z" fill="white"/>
+</svg>
diff --git a/assets/icons/user_plus_8.svg b/assets/icons/user_plus_8.svg
new file mode 100644
index 0000000000..6b7179a139
--- /dev/null
+++ b/assets/icons/user_plus_8.svg
@@ -0,0 +1,3 @@
+<svg width="8" height="8" viewBox="0 0 8 8" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M2.8 3.99999C3.68375 3.99999 4.4 3.28361 4.4 2.39999C4.4 1.51636 3.68375 0.799988 2.8 0.799988C1.91625 0.799988 1.2 1.51636 1.2 2.39999C1.2 3.28361 1.91625 3.99999 2.8 3.99999ZM3.43375 4.59999H2.16625C0.970125 4.59999 0 5.56999 0 6.76624C0 7.00624 0.194 7.19999 0.43325 7.19999H5.167C5.40625 7.19999 5.6 7.00624 5.6 6.76624C5.6 5.56999 4.63 4.59999 3.43375 4.59999ZM7.7 3.29999H7.1V2.69999C7.1 2.53499 6.96625 2.39999 6.8 2.39999C6.63375 2.39999 6.5 2.53436 6.5 2.69999V3.29999H5.9C5.735 3.29999 5.6 3.43499 5.6 3.59999C5.6 3.76499 5.73438 3.89999 5.9 3.89999H6.5V4.49999C6.5 4.66624 6.635 4.79999 6.8 4.79999C6.965 4.79999 7.1 4.66561 7.1 4.49999V3.89999H7.7C7.86625 3.89999 8 3.76624 8 3.59999C8 3.43374 7.86625 3.29999 7.7 3.29999Z" fill="white"/>
+</svg>
diff --git a/assets/icons/warning-solid-14.svg b/assets/icons/warning-solid-14.svg
deleted file mode 100644
index 53dd5f7eae..0000000000
--- a/assets/icons/warning-solid-14.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M11.5 11.5H2.5V9.7L6.4375 2.5H7.5625L11.5 9.7V11.5ZM6.4375 4.9H7.5625V7.9H6.4375V4.9ZM6.4375 9.1H7.5625V10.3H6.4375V9.1Z" fill="white"/>
-</svg>
diff --git a/assets/icons/x.svg b/assets/icons/x.svg
deleted file mode 100644
index 89fcd64b79..0000000000
--- a/assets/icons/x.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M15.6066 13.957C16.0751 14.4242 16.0751 15.1823 15.6066 15.6496C15.1381 16.1168 14.378 16.1168 13.9094 15.6496L8.00082 9.71303L2.0502 15.6476C1.5817 16.1148 0.821573 16.1148 0.353024 15.6476C-0.115524 15.1803 -0.115474 14.4223 0.353024 13.955L6.30564 8.02244L0.351374 2.04303C-0.117125 1.5758 -0.117125 0.817724 0.351374 0.350443C0.819872 -0.116839 1.58 -0.116789 2.04855 0.350443L8.00082 6.33185L13.9514 0.39732C14.4199 -0.0699117 15.1801 -0.0699117 15.6486 0.39732C16.1172 0.864552 16.1171 1.62263 15.6486 2.08991L9.69599 8.02244L15.6066 13.957Z" fill="black"/>
-</svg>
diff --git a/assets/icons/x_mark_12.svg b/assets/icons/x_mark_12.svg
new file mode 100644
index 0000000000..aaa97312ac
--- /dev/null
+++ b/assets/icons/x_mark_12.svg
@@ -0,0 +1,3 @@
+<svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M3.71108 6L0 2.28892L2.28892 0L6 3.71108L9.71108 0L12 2.28892L8.28892 6L12 9.71108L9.71108 12L6 8.28892L2.28892 12L0 9.71108L3.71108 6Z" fill="white"/>
+</svg>
diff --git a/assets/icons/x_mark_16.svg b/assets/icons/x_mark_16.svg
new file mode 100644
index 0000000000..a33adcc403
--- /dev/null
+++ b/assets/icons/x_mark_16.svg
@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M5.32959 8L1 3.67041L3.67041 1L8 5.32959L12.3296 1L15 3.67041L10.6704 8L15 12.3296L12.3296 15L8 10.6704L3.67041 15L1 12.3296L5.32959 8Z" fill="white"/>
+</svg>
diff --git a/assets/icons/x_mark_8.svg b/assets/icons/x_mark_8.svg
new file mode 100644
index 0000000000..ef81658d61
--- /dev/null
+++ b/assets/icons/x_mark_8.svg
@@ -0,0 +1,3 @@
+<svg width="8" height="8" viewBox="0 0 8 8" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M2.47405 4L0 1.52595L1.52595 0L4 2.47405L6.47405 0L8 1.52595L5.52595 4L8 6.47405L6.47405 8L4 5.52595L1.52595 8L0 6.47405L2.47405 4Z" fill="white"/>
+</svg>
diff --git a/assets/icons/x_mark_thin_8.svg b/assets/icons/x_mark_thin_8.svg
new file mode 100644
index 0000000000..e5aa1b36e3
--- /dev/null
+++ b/assets/icons/x_mark_thin_8.svg
@@ -0,0 +1,3 @@
+<svg width="8" height="8" viewBox="0 0 8 8" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M7.76433 6.63513C8.0768 6.9476 8.0768 7.4538 7.76433 7.76627C7.60935 7.92251 7.40437 8 7.19939 8C6.99441 8 6.78992 7.92188 6.63394 7.76565L3.99969 5.13264L1.36568 7.7649C1.20945 7.92238 1.00472 7.99988 0.799986 7.99988C0.595255 7.99988 0.390774 7.92238 0.234414 7.7649C-0.0780566 7.45243 -0.0780566 6.94622 0.234414 6.63375L2.86917 3.999L0.234414 1.3655C-0.0780566 1.05303 -0.0780566 0.546824 0.234414 0.234353C0.546885 -0.0781177 1.05309 -0.0781177 1.36556 0.234353L3.99969 2.87023L6.63444 0.235478C6.94691 -0.0769928 7.45311 -0.0769928 7.76558 0.235478C8.07805 0.547949 8.07805 1.05415 7.76558 1.36662L5.13083 4.00138L7.76433 6.63488V6.63513Z" fill="white"/>
+</svg>
diff --git a/assets/icons/zap.svg b/assets/icons/zap.svg
deleted file mode 100644
index 8d517dcb53..0000000000
--- a/assets/icons/zap.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-<svg width="8" height="12" viewBox="0 0 8 12" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M2.00262 12L2.89358 7.9886C2.95207 7.71862 2.77658 7.49963 2.5021 7.49963H0.000671387L6.00037 0L5.10792 4.0108C5.04792 4.27929 5.22341 4.49828 5.4994 4.49828H7.99932L1.99962 11.9979L2.00262 12Z" fill="#FDE047"/>
-</svg>
diff --git a/crates/activity_indicator/src/activity_indicator.rs b/crates/activity_indicator/src/activity_indicator.rs
index 8bc84f911c..48a4614a06 100644
--- a/crates/activity_indicator/src/activity_indicator.rs
+++ b/crates/activity_indicator/src/activity_indicator.rs
@@ -15,9 +15,9 @@ use workspace::{ItemHandle, StatusItemView, Workspace};
 
 actions!(lsp_status, [ShowErrorMessage]);
 
-const DOWNLOAD_ICON: &'static str = "icons/download-solid-14.svg";
-const WARNING_ICON: &'static str = "icons/warning-solid-14.svg";
-const DONE_ICON: &'static str = "icons/accept.svg";
+const DOWNLOAD_ICON: &'static str = "icons/download_12.svg";
+const WARNING_ICON: &'static str = "icons/triangle_exclamation_12.svg";
+const DONE_ICON: &'static str = "icons/circle_check_12.svg";
 
 pub enum Event {
     ShowError { lsp_name: Arc<str>, error: String },
diff --git a/crates/auto_update/src/update_notification.rs b/crates/auto_update/src/update_notification.rs
index e9c73ef4bc..2db68815fe 100644
--- a/crates/auto_update/src/update_notification.rs
+++ b/crates/auto_update/src/update_notification.rs
@@ -49,7 +49,7 @@ impl View for UpdateNotification {
                         .with_child(
                             MouseEventHandler::new::<Cancel, _, _>(0, cx, |state, _| {
                                 let style = theme.dismiss_button.style_for(state, false);
-                                Svg::new("icons/decline.svg")
+                                Svg::new("icons/x_mark_thin_8.svg")
                                     .with_color(style.color)
                                     .constrained()
                                     .with_width(style.icon_width)
diff --git a/crates/contacts_panel/src/contact_finder.rs b/crates/contacts_panel/src/contact_finder.rs
index 244cfcad4a..4027160950 100644
--- a/crates/contacts_panel/src/contact_finder.rs
+++ b/crates/contacts_panel/src/contact_finder.rs
@@ -115,10 +115,10 @@ impl PickerDelegate for ContactFinder {
 
         let icon_path = match request_status {
             ContactRequestStatus::None | ContactRequestStatus::RequestReceived => {
-                "icons/accept.svg"
+                "icons/check_8.svg"
             }
             ContactRequestStatus::RequestSent | ContactRequestStatus::RequestAccepted => {
-                "icons/decline.svg"
+                "icons/x_mark_8.svg"
             }
         };
         let button_style = if self.user_store.read(cx).is_contact_request_pending(&user) {
diff --git a/crates/contacts_panel/src/contacts_panel.rs b/crates/contacts_panel/src/contacts_panel.rs
index f4010a1278..0dc714a532 100644
--- a/crates/contacts_panel/src/contacts_panel.rs
+++ b/crates/contacts_panel/src/contacts_panel.rs
@@ -281,9 +281,9 @@ impl ContactsPanel {
             Flex::row()
                 .with_child(
                     Svg::new(if is_collapsed {
-                        "icons/disclosure-closed.svg"
+                        "icons/chevron_right_8.svg"
                     } else {
-                        "icons/disclosure-open.svg"
+                        "icons/chevron_down_8.svg"
                     })
                     .with_color(header_style.text.color)
                     .constrained()
@@ -433,7 +433,7 @@ impl ContactsPanel {
                                     if is_going_offline {
                                         icon_style.color = theme.disabled_button.color;
                                     }
-                                    render_icon_button(&icon_style, "icons/lock-8.svg")
+                                    render_icon_button(&icon_style, "icons/lock_8.svg")
                                         .aligned()
                                         .boxed()
                                 },
@@ -551,7 +551,7 @@ impl ContactsPanel {
                             if is_going_online {
                                 style.color = theme.disabled_button.color;
                             }
-                            render_icon_button(&style, "icons/lock-8.svg")
+                            render_icon_button(&style, "icons/lock_8.svg")
                                 .aligned()
                                 .constrained()
                                 .with_width(host_avatar_height)
@@ -640,7 +640,7 @@ impl ContactsPanel {
                     } else {
                         &theme.contact_button.style_for(mouse_state, false)
                     };
-                    render_icon_button(button_style, "icons/decline.svg")
+                    render_icon_button(button_style, "icons/x_mark_8.svg")
                         .aligned()
                         // .flex_float()
                         .boxed()
@@ -662,7 +662,7 @@ impl ContactsPanel {
                     } else {
                         &theme.contact_button.style_for(mouse_state, false)
                     };
-                    render_icon_button(button_style, "icons/accept.svg")
+                    render_icon_button(button_style, "icons/check_8.svg")
                         .aligned()
                         .flex_float()
                         .boxed()
@@ -684,7 +684,7 @@ impl ContactsPanel {
                     } else {
                         &theme.contact_button.style_for(mouse_state, false)
                     };
-                    render_icon_button(button_style, "icons/decline.svg")
+                    render_icon_button(button_style, "icons/x_mark_8.svg")
                         .aligned()
                         .flex_float()
                         .boxed()
@@ -1068,10 +1068,10 @@ impl View for ContactsPanel {
                         )
                         .with_child(
                             MouseEventHandler::new::<AddContact, _, _>(0, cx, |_, _| {
-                                Svg::new("icons/add-contact.svg")
+                                Svg::new("icons/user_plus_16.svg")
                                     .with_color(theme.add_contact_button.color)
                                     .constrained()
-                                    .with_height(12.)
+                                    .with_height(16.)
                                     .contained()
                                     .with_style(theme.add_contact_button.container)
                                     .aligned()
diff --git a/crates/contacts_panel/src/notifications.rs b/crates/contacts_panel/src/notifications.rs
index c02fd73b8f..38262812fe 100644
--- a/crates/contacts_panel/src/notifications.rs
+++ b/crates/contacts_panel/src/notifications.rs
@@ -55,7 +55,7 @@ pub fn render_user_notification<V: View, A: Action + Clone>(
                     MouseEventHandler::new::<Dismiss, _, _>(user.id as usize, cx, |state, _| {
                         render_icon_button(
                             theme.dismiss_button.style_for(state, false),
-                            "icons/decline.svg",
+                            "icons/x_mark_thin_8.svg",
                         )
                         .boxed()
                     })
diff --git a/crates/diagnostics/src/diagnostics.rs b/crates/diagnostics/src/diagnostics.rs
index ecc1b2df68..51b0c2d422 100644
--- a/crates/diagnostics/src/diagnostics.rs
+++ b/crates/diagnostics/src/diagnostics.rs
@@ -621,10 +621,10 @@ fn diagnostic_header_renderer(diagnostic: Diagnostic) -> RenderBlock {
         let font_size = (style.text_scale_factor * settings.buffer_font_size).round();
         let icon_width = cx.em_width * style.icon_width_factor;
         let icon = if diagnostic.severity == DiagnosticSeverity::ERROR {
-            Svg::new("icons/diagnostic-error-10.svg")
+            Svg::new("icons/circle_x_mark_12.svg")
                 .with_color(theme.error_diagnostic.message.text.color)
         } else {
-            Svg::new("icons/diagnostic-warning-10.svg")
+            Svg::new("icons/triangle_exclamation_12.svg")
                 .with_color(theme.warning_diagnostic.message.text.color)
         };
 
@@ -677,7 +677,7 @@ pub(crate) fn render_summary(
         let summary_spacing = theme.tab_summary_spacing;
         Flex::row()
             .with_children([
-                Svg::new("icons/diagnostic-summary-error.svg")
+                Svg::new("icons/circle_x_mark_12.svg")
                     .with_color(text_style.color)
                     .constrained()
                     .with_width(icon_width)
@@ -694,7 +694,7 @@ pub(crate) fn render_summary(
                 )
                 .aligned()
                 .boxed(),
-                Svg::new("icons/diagnostic-summary-warning.svg")
+                Svg::new("icons/triangle_exclamation_12.svg")
                     .with_color(text_style.color)
                     .constrained()
                     .with_width(icon_width)
diff --git a/crates/diagnostics/src/items.rs b/crates/diagnostics/src/items.rs
index 498ea6616c..ddeabfda82 100644
--- a/crates/diagnostics/src/items.rs
+++ b/crates/diagnostics/src/items.rs
@@ -101,7 +101,7 @@ impl View for DiagnosticIndicator {
                 let mut summary_row = Flex::row();
                 if self.summary.error_count > 0 {
                     summary_row.add_children([
-                        Svg::new("icons/Icon16CircleXMark.svg")
+                        Svg::new("icons/circle_x_mark_16.svg")
                             .with_color(style.icon_color_error)
                             .constrained()
                             .with_width(style.icon_width)
@@ -117,7 +117,7 @@ impl View for DiagnosticIndicator {
 
                 if self.summary.warning_count > 0 {
                     summary_row.add_children([
-                        Svg::new("icons/Icon16TriangleExclamation.svg")
+                        Svg::new("icons/triangle_exclamation_16.svg")
                             .with_color(style.icon_color_warning)
                             .constrained()
                             .with_width(style.icon_width)
@@ -138,7 +138,7 @@ impl View for DiagnosticIndicator {
 
                 if self.summary.error_count == 0 && self.summary.warning_count == 0 {
                     summary_row.add_child(
-                        Svg::new("icons/Icon16CircleCheck.svg")
+                        Svg::new("icons/circle_check_16.svg")
                             .with_color(style.icon_color_ok)
                             .constrained()
                             .with_width(style.icon_width)
diff --git a/crates/editor/src/editor.rs b/crates/editor/src/editor.rs
index e58f1fc341..549288113d 100644
--- a/crates/editor/src/editor.rs
+++ b/crates/editor/src/editor.rs
@@ -2660,7 +2660,7 @@ impl Editor {
             enum Tag {}
             Some(
                 MouseEventHandler::new::<Tag, _, _>(0, cx, |_, _| {
-                    Svg::new("icons/zap.svg")
+                    Svg::new("icons/bolt_8.svg")
                         .with_color(style.code_actions_indicator)
                         .boxed()
                 })
diff --git a/crates/editor/src/element.rs b/crates/editor/src/element.rs
index 56f664566e..be5276539d 100644
--- a/crates/editor/src/element.rs
+++ b/crates/editor/src/element.rs
@@ -936,7 +936,7 @@ impl EditorElement {
                         cx.render(&editor, |_, cx| {
                             MouseEventHandler::new::<JumpIcon, _, _>(*key, cx, |state, _| {
                                 let style = style.jump_icon.style_for(state, false);
-                                Svg::new("icons/jump.svg")
+                                Svg::new("icons/arrow_up_right_8.svg")
                                     .with_color(style.color)
                                     .constrained()
                                     .with_width(style.icon_width)
diff --git a/crates/project_panel/src/project_panel.rs b/crates/project_panel/src/project_panel.rs
index eaff23a476..eab58ca688 100644
--- a/crates/project_panel/src/project_panel.rs
+++ b/crates/project_panel/src/project_panel.rs
@@ -1013,11 +1013,11 @@ impl ProjectPanel {
                 .with_child(
                     ConstrainedBox::new(if kind == EntryKind::Dir {
                         if details.is_expanded {
-                            Svg::new("icons/disclosure-open.svg")
+                            Svg::new("icons/chevron_right_8.svg")
                                 .with_color(style.icon_color)
                                 .boxed()
                         } else {
-                            Svg::new("icons/disclosure-closed.svg")
+                            Svg::new("icons/chevron_down_8.svg")
                                 .with_color(style.icon_color)
                                 .boxed()
                         }
diff --git a/crates/search/src/project_search.rs b/crates/search/src/project_search.rs
index e1acc6a771..fdef5133fa 100644
--- a/crates/search/src/project_search.rs
+++ b/crates/search/src/project_search.rs
@@ -225,7 +225,7 @@ impl Item for ProjectSearchView {
         let search_theme = &settings.theme.search;
         Flex::row()
             .with_child(
-                Svg::new("icons/magnifier.svg")
+                Svg::new("icons/magnifying_glass_12.svg")
                     .with_color(tab_theme.label.text.color)
                     .constrained()
                     .with_width(search_theme.tab_icon_width)
diff --git a/crates/terminal/src/terminal.rs b/crates/terminal/src/terminal.rs
index 12c092d6e6..fac5d3a686 100644
--- a/crates/terminal/src/terminal.rs
+++ b/crates/terminal/src/terminal.rs
@@ -332,7 +332,7 @@ impl Item for Terminal {
 
         if self.has_bell {
             flex.add_child(
-                Svg::new("icons/zap.svg") //TODO: Swap out for a better icon, or at least resize this
+                Svg::new("icons/bolt_12.svg") //TODO: Swap out for a better icon, or at least resize this
                     .with_color(tab_theme.label.text.color)
                     .constrained()
                     .with_width(search_theme.tab_icon_width)
diff --git a/crates/workspace/src/pane.rs b/crates/workspace/src/pane.rs
index 87b6ea7547..384c3f7e58 100644
--- a/crates/workspace/src/pane.rs
+++ b/crates/workspace/src/pane.rs
@@ -915,7 +915,7 @@ impl Pane {
                                         ConstrainedBox::new(if mouse_state.hovered {
                                             let item_id = item.id();
                                             enum TabCloseButton {}
-                                            let icon = Svg::new("icons/x.svg");
+                                            let icon = Svg::new("icons/x_mark_thin_8.svg");
                                             MouseEventHandler::new::<TabCloseButton, _, _>(
                                                 item_id,
                                                 cx,
@@ -1002,7 +1002,7 @@ impl View for Pane {
                                             let theme = &cx.global::<Settings>().theme.workspace;
                                             let style =
                                                 theme.pane_button.style_for(mouse_state, false);
-                                            Svg::new("icons/split.svg")
+                                            Svg::new("icons/split_12.svg")
                                                 .with_color(style.color)
                                                 .constrained()
                                                 .with_width(style.icon_width)
diff --git a/crates/workspace/src/toolbar.rs b/crates/workspace/src/toolbar.rs
index de4a0083ac..1fc70c1819 100644
--- a/crates/workspace/src/toolbar.rs
+++ b/crates/workspace/src/toolbar.rs
@@ -118,7 +118,7 @@ impl View for Toolbar {
             .with_child(
                 Flex::row()
                     .with_child(nav_button(
-                        "icons/Icon16ArrowLeft.svg",
+                        "icons/arrow_left_16.svg",
                         button_style,
                         tooltip_style.clone(),
                         enable_go_backward,
@@ -131,7 +131,7 @@ impl View for Toolbar {
                         cx,
                     ))
                     .with_child(nav_button(
-                        "icons/Icon16ArrowRight.svg",
+                        "icons/arrow_right_16.svg",
                         button_style,
                         tooltip_style.clone(),
                         enable_go_forward,
diff --git a/crates/workspace/src/workspace.rs b/crates/workspace/src/workspace.rs
index da62fe7e54..81d48a5e55 100644
--- a/crates/workspace/src/workspace.rs
+++ b/crates/workspace/src/workspace.rs
@@ -1795,7 +1795,7 @@ impl Workspace {
                 Container::new(
                     Align::new(
                         ConstrainedBox::new(
-                            Svg::new("icons/offline-14.svg")
+                            Svg::new("icons/cloud_slash_12.svg")
                                 .with_color(theme.workspace.titlebar.offline_icon.color)
                                 .boxed(),
                         )
diff --git a/crates/zed/src/zed.rs b/crates/zed/src/zed.rs
index e3304fe6e9..9d0d31f64b 100644
--- a/crates/zed/src/zed.rs
+++ b/crates/zed/src/zed.rs
@@ -244,7 +244,7 @@ pub fn initialize_workspace(
 
     workspace.left_sidebar().update(cx, |sidebar, cx| {
         sidebar.add_item(
-            "icons/Icon16FolderTree.svg",
+            "icons/folder_tree_16.svg",
             "Project Panel".to_string(),
             project_panel.into(),
             cx,
@@ -252,7 +252,7 @@ pub fn initialize_workspace(
     });
     workspace.right_sidebar().update(cx, |sidebar, cx| {
         sidebar.add_item(
-            "icons/Icon16UserGroup.svg",
+            "icons/user_group_16.svg",
             "Contacts Panel".to_string(),
             contact_panel.into(),
             cx,

From 9beeef63856c317a6c7cf1e07f9d2112ee14c50c Mon Sep 17 00:00:00 2001
From: Nate Butler <iamnbutler@gmail.com>
Date: Tue, 19 Jul 2022 17:11:26 -0400
Subject: [PATCH 13/22] Update some contact panel styling

---
 styles/src/styleTree/contactsPanel.ts | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/styles/src/styleTree/contactsPanel.ts b/styles/src/styleTree/contactsPanel.ts
index 51e35c9003..20fce729e4 100644
--- a/styles/src/styleTree/contactsPanel.ts
+++ b/styles/src/styleTree/contactsPanel.ts
@@ -72,11 +72,11 @@ export default function contactsPanel(theme: Theme) {
     addContactButton: {
       margin: { left: 6, right: 12 },
       color: iconColor(theme, "primary"),
-      buttonWidth: 8,
-      iconWidth: 8,
+      buttonWidth: 16,
+      iconWidth: 16,
     },
     privateButton: {
-      iconWidth: 8,
+      iconWidth: 12,
       color: iconColor(theme, "primary"),
       cornerRadius: 5,
       buttonWidth: 12,
@@ -128,7 +128,7 @@ export default function contactsPanel(theme: Theme) {
     contactButton: {
       ...contactButton,
       hover: {
-        background: backgroundColor(theme, 100, "hovered"),
+        background: backgroundColor(theme, "on300", "hovered"),
       },
     },
     disabledButton: {
@@ -156,9 +156,9 @@ export default function contactsPanel(theme: Theme) {
         right: sidePadding,
       },
       border: { top: true, width: 1, color: borderColor(theme, "primary") },
-      text: text(theme, "sans", "primary", { size: "sm" }),
+      text: text(theme, "sans", "secondary", { size: "sm" }),
       hover: {
-        text: text(theme, "sans", "primary", { size: "sm", underline: true }),
+        text: text(theme, "sans", "active", { size: "sm" }),
       },
     },
   };

From 5bf9db2e2138ad2c7a7477136eb9ba3b33d5a903 Mon Sep 17 00:00:00 2001
From: Nate Butler <iamnbutler@gmail.com>
Date: Tue, 19 Jul 2022 17:13:40 -0400
Subject: [PATCH 14/22] Fix incorrectly named icons

---
 assets/icons/{backspace _12.svg => delete_12.svg} | 0
 assets/icons/{backspace _16.svg => delete_16.svg} | 0
 assets/icons/{backspace _8.svg => delete_8.svg}   | 0
 3 files changed, 0 insertions(+), 0 deletions(-)
 rename assets/icons/{backspace _12.svg => delete_12.svg} (100%)
 rename assets/icons/{backspace _16.svg => delete_16.svg} (100%)
 rename assets/icons/{backspace _8.svg => delete_8.svg} (100%)

diff --git a/assets/icons/backspace _12.svg b/assets/icons/delete_12.svg
similarity index 100%
rename from assets/icons/backspace _12.svg
rename to assets/icons/delete_12.svg
diff --git a/assets/icons/backspace _16.svg b/assets/icons/delete_16.svg
similarity index 100%
rename from assets/icons/backspace _16.svg
rename to assets/icons/delete_16.svg
diff --git a/assets/icons/backspace _8.svg b/assets/icons/delete_8.svg
similarity index 100%
rename from assets/icons/backspace _8.svg
rename to assets/icons/delete_8.svg

From df0023ad655fe5f4c50b3fb56245bdafd0e22cc0 Mon Sep 17 00:00:00 2001
From: Nate Butler <iamnbutler@gmail.com>
Date: Tue, 19 Jul 2022 20:09:28 -0400
Subject: [PATCH 15/22] Update package-lock.json

---
 styles/package-lock.json | 1 +
 1 file changed, 1 insertion(+)

diff --git a/styles/package-lock.json b/styles/package-lock.json
index 5499f1852c..582f1c8496 100644
--- a/styles/package-lock.json
+++ b/styles/package-lock.json
@@ -5,6 +5,7 @@
   "requires": true,
   "packages": {
     "": {
+      "name": "styles",
       "version": "1.0.0",
       "license": "ISC",
       "dependencies": {

From 55dee53e805c68e022e2ce1abb9a36d767a2e2c4 Mon Sep 17 00:00:00 2001
From: Nate Butler <iamnbutler@gmail.com>
Date: Tue, 19 Jul 2022 20:12:50 -0400
Subject: [PATCH 16/22] Regenerate package-lock.json

---
 styles/package-lock.json | 208 +++------------------------------------
 1 file changed, 16 insertions(+), 192 deletions(-)

diff --git a/styles/package-lock.json b/styles/package-lock.json
index 433457fb58..582f1c8496 100644
--- a/styles/package-lock.json
+++ b/styles/package-lock.json
@@ -1,196 +1,20 @@
 {
-    "name": "styles",
-    "version": "1.0.0",
-    "lockfileVersion": 2,
-    "requires": true,
-    "packages": {
-        "": {
-            "name": "styles",
-            "version": "1.0.0",
-            "license": "ISC",
-            "dependencies": {
-                "@types/chroma-js": "^2.1.3",
-                "@types/node": "^17.0.23",
-                "case-anything": "^2.1.10",
-                "chroma-js": "^2.4.2",
-                "ts-node": "^10.7.0"
-            }
-        },
-        "node_modules/@cspotcode/source-map-consumer": {
-            "version": "0.8.0",
-            "resolved": "https://registry.npmjs.org/@cspotcode/source-map-consumer/-/source-map-consumer-0.8.0.tgz",
-            "integrity": "sha512-41qniHzTU8yAGbCp04ohlmSrZf8bkf/iJsl3V0dRGsQN/5GFfx+LbCSsCpp2gqrqjTVg/K6O8ycoV35JIwAzAg==",
-            "engines": {
-                "node": ">= 12"
-            }
-        },
-        "node_modules/@cspotcode/source-map-support": {
-            "version": "0.7.0",
-            "resolved": "https://registry.npmjs.org/@cspotcode/source-map-support/-/source-map-support-0.7.0.tgz",
-            "integrity": "sha512-X4xqRHqN8ACt2aHVe51OxeA2HjbcL4MqFqXkrmQszJ1NOUuUu5u6Vqx/0lZSVNku7velL5FC/s5uEAj1lsBMhA==",
-            "dependencies": {
-                "@cspotcode/source-map-consumer": "0.8.0"
-            },
-            "engines": {
-                "node": ">=12"
-            }
-        },
-        "node_modules/@tsconfig/node10": {
-            "version": "1.0.8",
-            "resolved": "https://registry.npmjs.org/@tsconfig/node10/-/node10-1.0.8.tgz",
-            "integrity": "sha512-6XFfSQmMgq0CFLY1MslA/CPUfhIL919M1rMsa5lP2P097N2Wd1sSX0tx1u4olM16fLNhtHZpRhedZJphNJqmZg=="
-        },
-        "node_modules/@tsconfig/node12": {
-            "version": "1.0.9",
-            "resolved": "https://registry.npmjs.org/@tsconfig/node12/-/node12-1.0.9.tgz",
-            "integrity": "sha512-/yBMcem+fbvhSREH+s14YJi18sp7J9jpuhYByADT2rypfajMZZN4WQ6zBGgBKp53NKmqI36wFYDb3yaMPurITw=="
-        },
-        "node_modules/@tsconfig/node14": {
-            "version": "1.0.1",
-            "resolved": "https://registry.npmjs.org/@tsconfig/node14/-/node14-1.0.1.tgz",
-            "integrity": "sha512-509r2+yARFfHHE7T6Puu2jjkoycftovhXRqW328PDXTVGKihlb1P8Z9mMZH04ebyajfRY7dedfGynlrFHJUQCg=="
-        },
-        "node_modules/@tsconfig/node16": {
-            "version": "1.0.2",
-            "resolved": "https://registry.npmjs.org/@tsconfig/node16/-/node16-1.0.2.tgz",
-            "integrity": "sha512-eZxlbI8GZscaGS7kkc/trHTT5xgrjH3/1n2JDwusC9iahPKWMRvRjJSAN5mCXviuTGQ/lHnhvv8Q1YTpnfz9gA=="
-        },
-        "node_modules/@types/chroma-js": {
-            "version": "2.1.3",
-            "resolved": "https://registry.npmjs.org/@types/chroma-js/-/chroma-js-2.1.3.tgz",
-            "integrity": "sha512-1xGPhoSGY1CPmXLCBcjVZSQinFjL26vlR8ZqprsBWiFyED4JacJJ9zHhh5aaUXqbY9B37mKQ73nlydVAXmr1+g=="
-        },
-        "node_modules/@types/node": {
-            "version": "17.0.23",
-            "resolved": "https://registry.npmjs.org/@types/node/-/node-17.0.23.tgz",
-            "integrity": "sha512-UxDxWn7dl97rKVeVS61vErvw086aCYhDLyvRQZ5Rk65rZKepaFdm53GeqXaKBuOhED4e9uWq34IC3TdSdJJ2Gw=="
-        },
-        "node_modules/acorn": {
-            "version": "8.7.0",
-            "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.7.0.tgz",
-            "integrity": "sha512-V/LGr1APy+PXIwKebEWrkZPwoeoF+w1jiOBUmuxuiUIaOHtob8Qc9BTrYo7VuI5fR8tqsy+buA2WFooR5olqvQ==",
-            "bin": {
-                "acorn": "bin/acorn"
-            },
-            "engines": {
-                "node": ">=0.4.0"
-            }
-        },
-        "node_modules/acorn-walk": {
-            "version": "8.2.0",
-            "resolved": "https://registry.npmjs.org/acorn-walk/-/acorn-walk-8.2.0.tgz",
-            "integrity": "sha512-k+iyHEuPgSw6SbuDpGQM+06HQUa04DZ3o+F6CSzXMvvI5KMvnaEqXe+YVe555R9nn6GPt404fos4wcgpw12SDA==",
-            "engines": {
-                "node": ">=0.4.0"
-            }
-        },
-        "node_modules/arg": {
-            "version": "4.1.3",
-            "resolved": "https://registry.npmjs.org/arg/-/arg-4.1.3.tgz",
-            "integrity": "sha512-58S9QDqG0Xx27YwPSt9fJxivjYl432YCwfDMfZ+71RAqUrZef7LrKQZ3LHLOwCS4FLNBplP533Zx895SeOCHvA=="
-        },
-        "node_modules/case-anything": {
-            "version": "2.1.10",
-            "resolved": "https://registry.npmjs.org/case-anything/-/case-anything-2.1.10.tgz",
-            "integrity": "sha512-JczJwVrCP0jPKh05McyVsuOg6AYosrB9XWZKbQzXeDAm2ClE/PJE/BcrrQrVyGYH7Jg8V/LDupmyL4kFlVsVFQ==",
-            "engines": {
-                "node": ">=12.13"
-            },
-            "funding": {
-                "url": "https://github.com/sponsors/mesqueeb"
-            }
-        },
-        "node_modules/chroma-js": {
-            "version": "2.4.2",
-            "resolved": "https://registry.npmjs.org/chroma-js/-/chroma-js-2.4.2.tgz",
-            "integrity": "sha512-U9eDw6+wt7V8z5NncY2jJfZa+hUH8XEj8FQHgFJTrUFnJfXYf4Ml4adI2vXZOjqRDpFWtYVWypDfZwnJ+HIR4A=="
-        },
-        "node_modules/create-require": {
-            "version": "1.1.1",
-            "resolved": "https://registry.npmjs.org/create-require/-/create-require-1.1.1.tgz",
-            "integrity": "sha512-dcKFX3jn0MpIaXjisoRvexIJVEKzaq7z2rZKxf+MSr9TkdmHmsU4m2lcLojrj/FHl8mk5VxMmYA+ftRkP/3oKQ=="
-        },
-        "node_modules/diff": {
-            "version": "4.0.2",
-            "resolved": "https://registry.npmjs.org/diff/-/diff-4.0.2.tgz",
-            "integrity": "sha512-58lmxKSA4BNyLz+HHMUzlOEpg09FV+ev6ZMe3vJihgdxzgcwZ8VoEEPmALCZG9LmqfVoNMMKpttIYTVG6uDY7A==",
-            "engines": {
-                "node": ">=0.3.1"
-            }
-        },
-        "node_modules/make-error": {
-            "version": "1.3.6",
-            "resolved": "https://registry.npmjs.org/make-error/-/make-error-1.3.6.tgz",
-            "integrity": "sha512-s8UhlNe7vPKomQhC1qFelMokr/Sc3AgNbso3n74mVPA5LTZwkB9NlXf4XPamLxJE8h0gh73rM94xvwRT2CVInw=="
-        },
-        "node_modules/ts-node": {
-            "version": "10.7.0",
-            "resolved": "https://registry.npmjs.org/ts-node/-/ts-node-10.7.0.tgz",
-            "integrity": "sha512-TbIGS4xgJoX2i3do417KSaep1uRAW/Lu+WAL2doDHC0D6ummjirVOXU5/7aiZotbQ5p1Zp9tP7U6cYhA0O7M8A==",
-            "dependencies": {
-                "@cspotcode/source-map-support": "0.7.0",
-                "@tsconfig/node10": "^1.0.7",
-                "@tsconfig/node12": "^1.0.7",
-                "@tsconfig/node14": "^1.0.0",
-                "@tsconfig/node16": "^1.0.2",
-                "acorn": "^8.4.1",
-                "acorn-walk": "^8.1.1",
-                "arg": "^4.1.0",
-                "create-require": "^1.1.0",
-                "diff": "^4.0.1",
-                "make-error": "^1.1.1",
-                "v8-compile-cache-lib": "^3.0.0",
-                "yn": "3.1.1"
-            },
-            "bin": {
-                "ts-node": "dist/bin.js",
-                "ts-node-cwd": "dist/bin-cwd.js",
-                "ts-node-esm": "dist/bin-esm.js",
-                "ts-node-script": "dist/bin-script.js",
-                "ts-node-transpile-only": "dist/bin-transpile.js",
-                "ts-script": "dist/bin-script-deprecated.js"
-            },
-            "peerDependencies": {
-                "@swc/core": ">=1.2.50",
-                "@swc/wasm": ">=1.2.50",
-                "@types/node": "*",
-                "typescript": ">=2.7"
-            },
-            "peerDependenciesMeta": {
-                "@swc/core": {
-                    "optional": true
-                },
-                "@swc/wasm": {
-                    "optional": true
-                }
-            }
-        },
-        "node_modules/typescript": {
-            "version": "4.6.3",
-            "resolved": "https://registry.npmjs.org/typescript/-/typescript-4.6.3.tgz",
-            "integrity": "sha512-yNIatDa5iaofVozS/uQJEl3JRWLKKGJKh6Yaiv0GLGSuhpFJe7P3SbHZ8/yjAHRQwKRoA6YZqlfjXWmVzoVSMw==",
-            "peer": true,
-            "bin": {
-                "tsc": "bin/tsc",
-                "tsserver": "bin/tsserver"
-            },
-            "engines": {
-                "node": ">=4.2.0"
-            }
-        },
-        "node_modules/v8-compile-cache-lib": {
-            "version": "3.0.0",
-            "resolved": "https://registry.npmjs.org/v8-compile-cache-lib/-/v8-compile-cache-lib-3.0.0.tgz",
-            "integrity": "sha512-mpSYqfsFvASnSn5qMiwrr4VKfumbPyONLCOPmsR3A6pTY/r0+tSaVbgPWSAIuzbk3lCTa+FForeTiO+wBQGkjA=="
-        },
-        "node_modules/yn": {
-            "version": "3.1.1",
-            "resolved": "https://registry.npmjs.org/yn/-/yn-3.1.1.tgz",
-            "integrity": "sha512-Ux4ygGWsu2c7isFWe8Yu1YluJmqVhxqK2cLXNQA5AcC3QfbGNpM7fu0Y8b/z16pXLnFxZYvWhd3fhBY9DLmC6Q==",
-            "engines": {
-                "node": ">=6"
-            }
-        }
+  "name": "styles",
+  "version": "1.0.0",
+  "lockfileVersion": 2,
+  "requires": true,
+  "packages": {
+    "": {
+      "name": "styles",
+      "version": "1.0.0",
+      "license": "ISC",
+      "dependencies": {
+        "@types/chroma-js": "^2.1.3",
+        "@types/node": "^17.0.23",
+        "case-anything": "^2.1.10",
+        "chroma-js": "^2.4.2",
+        "ts-node": "^10.7.0"
+      }
     },
     "node_modules/@cspotcode/source-map-consumer": {
       "version": "0.8.0",

From 1cfaac1bc57928c7c49369ae98fada907f638b40 Mon Sep 17 00:00:00 2001
From: K Simmons <keith@zed.dev>
Date: Mon, 18 Jul 2022 13:33:55 -0700
Subject: [PATCH 17/22] Fix clipping when dragging the mouse with vim-mode
 enabled and adjust single line editor selections

---
 crates/editor/src/element.rs       | 10 +++++-----
 crates/gpui/src/text_layout.rs     |  2 ++
 crates/vim/src/editor_events.rs    | 15 ++++++++-------
 crates/vim/src/insert.rs           |  2 +-
 crates/vim/src/normal.rs           | 10 +++++-----
 crates/vim/src/normal/change.rs    |  4 ++--
 crates/vim/src/vim.rs              | 26 ++++++++------------------
 crates/vim/src/vim_test_context.rs |  2 +-
 crates/vim/src/visual.rs           |  8 ++++----
 9 files changed, 36 insertions(+), 43 deletions(-)

diff --git a/crates/editor/src/element.rs b/crates/editor/src/element.rs
index 013de1e7df..63c7e0c69a 100644
--- a/crates/editor/src/element.rs
+++ b/crates/editor/src/element.rs
@@ -1643,12 +1643,12 @@ impl PaintState {
         } else {
             0
         };
-        let column_overshoot = (0f32.max(x - line.width()) / layout.em_advance) as u32;
 
-        (
-            DisplayPoint::new(row, column),
-            DisplayPoint::new(row_overshoot, column_overshoot),
-        )
+        let point = snapshot.clip_point(DisplayPoint::new(row, column), Bias::Left);
+        let mut column_overshoot = (0f32.max(x - line.width()) / layout.em_advance) as u32;
+        column_overshoot = column_overshoot + column - point.column();
+
+        (point, DisplayPoint::new(row_overshoot, column_overshoot))
     }
 }
 
diff --git a/crates/gpui/src/text_layout.rs b/crates/gpui/src/text_layout.rs
index 50f16cb995..5a256d271a 100644
--- a/crates/gpui/src/text_layout.rs
+++ b/crates/gpui/src/text_layout.rs
@@ -238,6 +238,8 @@ impl Line {
         None
     }
 
+    // If round_to_closest, find the closest index to the given x position
+    // If !round_to_closest, find the largest index before the given x position
     pub fn index_for_x(&self, x: f32) -> Option<usize> {
         if x >= self.layout.width {
             None
diff --git a/crates/vim/src/editor_events.rs b/crates/vim/src/editor_events.rs
index c68e5182b0..7b777a50ed 100644
--- a/crates/vim/src/editor_events.rs
+++ b/crates/vim/src/editor_events.rs
@@ -34,12 +34,13 @@ fn editor_focused(EditorFocused(editor): &EditorFocused, cx: &mut MutableAppCont
         }
 
         let editor = editor.read(cx);
-        if editor.selections.newest::<usize>(cx).is_empty() {
-            if editor.mode() != EditorMode::Full {
-                vim.switch_mode(Mode::Insert, cx);
-            }
-        } else {
-            vim.switch_mode(Mode::Visual { line: false }, cx);
+        let editor_mode = editor.mode();
+        let newest_selection_empty = editor.selections.newest::<usize>(cx).is_empty();
+
+        if editor_mode != EditorMode::Full {
+            vim.switch_mode(Mode::Insert, true, cx);
+        } else if !newest_selection_empty {
+            vim.switch_mode(Mode::Visual { line: false }, true, cx);
         }
     });
 }
@@ -69,7 +70,7 @@ fn editor_released(EditorReleased(editor): &EditorReleased, cx: &mut MutableAppC
 fn editor_local_selections_changed(newest_empty: bool, cx: &mut MutableAppContext) {
     Vim::update(cx, |vim, cx| {
         if vim.enabled && vim.state.mode == Mode::Normal && !newest_empty {
-            vim.switch_mode(Mode::Visual { line: false }, cx)
+            vim.switch_mode(Mode::Visual { line: false }, false, cx)
         }
     })
 }
diff --git a/crates/vim/src/insert.rs b/crates/vim/src/insert.rs
index 1e19b7d918..b8387e7165 100644
--- a/crates/vim/src/insert.rs
+++ b/crates/vim/src/insert.rs
@@ -20,7 +20,7 @@ fn normal_before(_: &mut Workspace, _: &NormalBefore, cx: &mut ViewContext<Works
                 });
             });
         });
-        state.switch_mode(Mode::Normal, cx);
+        state.switch_mode(Mode::Normal, false, cx);
     })
 }
 
diff --git a/crates/vim/src/normal.rs b/crates/vim/src/normal.rs
index c5fb044dd3..65909702ba 100644
--- a/crates/vim/src/normal.rs
+++ b/crates/vim/src/normal.rs
@@ -91,7 +91,7 @@ fn move_cursor(vim: &mut Vim, motion: Motion, cx: &mut MutableAppContext) {
 
 fn insert_after(_: &mut Workspace, _: &InsertAfter, cx: &mut ViewContext<Workspace>) {
     Vim::update(cx, |vim, cx| {
-        vim.switch_mode(Mode::Insert, cx);
+        vim.switch_mode(Mode::Insert, false, cx);
         vim.update_active_editor(cx, |editor, cx| {
             editor.change_selections(Some(Autoscroll::Fit), cx, |s| {
                 s.move_cursors_with(|map, cursor, goal| {
@@ -108,7 +108,7 @@ fn insert_first_non_whitespace(
     cx: &mut ViewContext<Workspace>,
 ) {
     Vim::update(cx, |vim, cx| {
-        vim.switch_mode(Mode::Insert, cx);
+        vim.switch_mode(Mode::Insert, false, cx);
         vim.update_active_editor(cx, |editor, cx| {
             editor.change_selections(Some(Autoscroll::Fit), cx, |s| {
                 s.move_cursors_with(|map, cursor, goal| {
@@ -121,7 +121,7 @@ fn insert_first_non_whitespace(
 
 fn insert_end_of_line(_: &mut Workspace, _: &InsertEndOfLine, cx: &mut ViewContext<Workspace>) {
     Vim::update(cx, |vim, cx| {
-        vim.switch_mode(Mode::Insert, cx);
+        vim.switch_mode(Mode::Insert, false, cx);
         vim.update_active_editor(cx, |editor, cx| {
             editor.change_selections(Some(Autoscroll::Fit), cx, |s| {
                 s.move_cursors_with(|map, cursor, goal| {
@@ -134,7 +134,7 @@ fn insert_end_of_line(_: &mut Workspace, _: &InsertEndOfLine, cx: &mut ViewConte
 
 fn insert_line_above(_: &mut Workspace, _: &InsertLineAbove, cx: &mut ViewContext<Workspace>) {
     Vim::update(cx, |vim, cx| {
-        vim.switch_mode(Mode::Insert, cx);
+        vim.switch_mode(Mode::Insert, false, cx);
         vim.update_active_editor(cx, |editor, cx| {
             editor.transact(cx, |editor, cx| {
                 let (map, old_selections) = editor.selections.all_display(cx);
@@ -166,7 +166,7 @@ fn insert_line_above(_: &mut Workspace, _: &InsertLineAbove, cx: &mut ViewContex
 
 fn insert_line_below(_: &mut Workspace, _: &InsertLineBelow, cx: &mut ViewContext<Workspace>) {
     Vim::update(cx, |vim, cx| {
-        vim.switch_mode(Mode::Insert, cx);
+        vim.switch_mode(Mode::Insert, false, cx);
         vim.update_active_editor(cx, |editor, cx| {
             editor.transact(cx, |editor, cx| {
                 let (map, old_selections) = editor.selections.all_display(cx);
diff --git a/crates/vim/src/normal/change.rs b/crates/vim/src/normal/change.rs
index 9f526744d0..55445c930e 100644
--- a/crates/vim/src/normal/change.rs
+++ b/crates/vim/src/normal/change.rs
@@ -31,7 +31,7 @@ pub fn change_over(vim: &mut Vim, motion: Motion, cx: &mut MutableAppContext) {
             editor.insert(&"", cx);
         });
     });
-    vim.switch_mode(Mode::Insert, cx)
+    vim.switch_mode(Mode::Insert, false, cx)
 }
 
 // From the docs https://vimhelp.org/change.txt.html#cw
@@ -70,7 +70,7 @@ fn change_word(
                 editor.insert(&"", cx);
             });
         });
-        vim.switch_mode(Mode::Insert, cx);
+        vim.switch_mode(Mode::Insert, false, cx);
     });
 }
 
diff --git a/crates/vim/src/vim.rs b/crates/vim/src/vim.rs
index 5655e51e29..b90dd4fcec 100644
--- a/crates/vim/src/vim.rs
+++ b/crates/vim/src/vim.rs
@@ -36,7 +36,7 @@ pub fn init(cx: &mut MutableAppContext) {
 
     // Vim Actions
     cx.add_action(|_: &mut Workspace, &SwitchMode(mode): &SwitchMode, cx| {
-        Vim::update(cx, |vim, cx| vim.switch_mode(mode, cx))
+        Vim::update(cx, |vim, cx| vim.switch_mode(mode, false, cx))
     });
     cx.add_action(
         |_: &mut Workspace, &PushOperator(operator): &PushOperator, cx| {
@@ -62,7 +62,7 @@ pub fn init(cx: &mut MutableAppContext) {
         if vim.state.mode != Mode::Normal || vim.active_operator().is_some() {
             MutableAppContext::defer(cx, |cx| {
                 Vim::update(cx, |state, cx| {
-                    state.switch_mode(Mode::Normal, cx);
+                    state.switch_mode(Mode::Normal, false, cx);
                 });
             });
         } else {
@@ -115,37 +115,27 @@ impl Vim {
             .map(|ae| ae.update(cx, update))
     }
 
-    fn switch_mode(&mut self, mode: Mode, cx: &mut MutableAppContext) {
-        let previous_mode = self.state.mode;
+    fn switch_mode(&mut self, mode: Mode, leave_selections: bool, cx: &mut MutableAppContext) {
         self.state.mode = mode;
         self.state.operator_stack.clear();
 
         // Sync editor settings like clip mode
         self.sync_vim_settings(cx);
 
+        if leave_selections {
+            return;
+        }
+
         // Adjust selections
         for editor in self.editors.values() {
             if let Some(editor) = editor.upgrade(cx) {
                 editor.update(cx, |editor, cx| {
                     editor.change_selections(None, cx, |s| {
                         s.move_with(|map, selection| {
-                            // If empty selections
                             if self.state.empty_selections_only() {
                                 let new_head = map.clip_point(selection.head(), Bias::Left);
                                 selection.collapse_to(new_head, selection.goal)
                             } else {
-                                if matches!(mode, Mode::Visual { line: false })
-                                    && !matches!(previous_mode, Mode::Visual { .. })
-                                    && !selection.reversed
-                                    && !selection.is_empty()
-                                {
-                                    // Mode wasn't visual mode before, but is now. We need to move the end
-                                    // back by one character so that the region to be modifed stays the same
-                                    *selection.end.column_mut() =
-                                        selection.end.column().saturating_sub(1);
-                                    selection.end = map.clip_point(selection.end, Bias::Left);
-                                }
-
                                 selection.set_head(
                                     map.clip_point(selection.head(), Bias::Left),
                                     selection.goal,
@@ -183,7 +173,7 @@ impl Vim {
             self.enabled = enabled;
             self.state = Default::default();
             if enabled {
-                self.switch_mode(Mode::Normal, cx);
+                self.switch_mode(Mode::Normal, false, cx);
             }
             self.sync_vim_settings(cx);
         }
diff --git a/crates/vim/src/vim_test_context.rs b/crates/vim/src/vim_test_context.rs
index e13f9fda51..dff0aaf375 100644
--- a/crates/vim/src/vim_test_context.rs
+++ b/crates/vim/src/vim_test_context.rs
@@ -119,7 +119,7 @@ impl<'a> VimTestContext<'a> {
     pub fn set_state(&mut self, text: &str, mode: Mode) {
         self.cx.update(|cx| {
             Vim::update(cx, |vim, cx| {
-                vim.switch_mode(mode, cx);
+                vim.switch_mode(mode, false, cx);
             })
         });
         self.cx.set_state(text);
diff --git a/crates/vim/src/visual.rs b/crates/vim/src/visual.rs
index 7028f00e92..fedb999cad 100644
--- a/crates/vim/src/visual.rs
+++ b/crates/vim/src/visual.rs
@@ -89,7 +89,7 @@ pub fn change(_: &mut Workspace, _: &VisualChange, cx: &mut ViewContext<Workspac
                 s.select_anchors(new_selections);
             });
         });
-        vim.switch_mode(Mode::Insert, cx);
+        vim.switch_mode(Mode::Insert, false, cx);
     });
 }
 
@@ -130,7 +130,7 @@ pub fn delete(_: &mut Workspace, _: &VisualDelete, cx: &mut ViewContext<Workspac
                 });
             });
         });
-        vim.switch_mode(Mode::Normal, cx);
+        vim.switch_mode(Mode::Normal, false, cx);
     });
 }
 
@@ -158,7 +158,7 @@ pub fn yank(_: &mut Workspace, _: &VisualYank, cx: &mut ViewContext<Workspace>)
                 });
             });
         });
-        vim.switch_mode(Mode::Normal, cx);
+        vim.switch_mode(Mode::Normal, false, cx);
     });
 }
 
@@ -266,7 +266,7 @@ pub fn paste(_: &mut Workspace, _: &VisualPaste, cx: &mut ViewContext<Workspace>
                 }
             });
         });
-        vim.switch_mode(Mode::Normal, cx);
+        vim.switch_mode(Mode::Normal, false, cx);
     });
 }
 

From a77cf914ec4f763a5a9f2e17c46b0f1a1aa914b1 Mon Sep 17 00:00:00 2001
From: K Simmons <keith@zed.dev>
Date: Tue, 19 Jul 2022 17:17:54 -0700
Subject: [PATCH 18/22] Fix failing test re mode switch in buffer search

---
 crates/vim/src/vim.rs | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/crates/vim/src/vim.rs b/crates/vim/src/vim.rs
index b90dd4fcec..56e2e599d8 100644
--- a/crates/vim/src/vim.rs
+++ b/crates/vim/src/vim.rs
@@ -266,7 +266,7 @@ mod test {
     }
 
     #[gpui::test]
-    async fn test_buffer_search_switches_mode(cx: &mut gpui::TestAppContext) {
+    async fn test_buffer_search(cx: &mut gpui::TestAppContext) {
         let mut cx = VimTestContext::new(cx, true).await;
 
         cx.set_state(
@@ -278,7 +278,8 @@ mod test {
         );
         cx.simulate_keystroke("/");
 
-        assert_eq!(cx.mode(), Mode::Visual { line: false });
+        // We now use a weird insert mode with selection when jumping to a single line editor
+        assert_eq!(cx.mode(), Mode::Insert);
 
         let search_bar = cx.workspace(|workspace, cx| {
             workspace

From 225055ed5d7b6aa6fc736f4d1a8779e7ecc83275 Mon Sep 17 00:00:00 2001
From: K Simmons <keith@zed.dev>
Date: Wed, 20 Jul 2022 18:52:32 -0700
Subject: [PATCH 19/22] Address some issues where panes don't get focused
 properly, make the focused pane more obvious, and prevent splitting of the
 pane with no items

---
 crates/context_menu/src/context_menu.rs       |   4 +-
 crates/editor/src/editor.rs                   |   6 +-
 crates/editor/src/link_go_to_definition.rs    |  11 +-
 crates/editor/src/mouse_context_menu.rs       |   7 +-
 .../gpui/src/elements/mouse_event_handler.rs  |   4 +-
 crates/picker/src/picker.rs                   |   2 +-
 crates/project_panel/src/project_panel.rs     |   4 +-
 crates/search/src/project_search.rs           |  23 ++--
 crates/theme/src/theme.rs                     |   6 +-
 crates/workspace/src/pane.rs                  | 102 ++++++++++++------
 crates/workspace/src/sidebar.rs               |   2 +-
 crates/workspace/src/workspace.rs             |  24 +++--
 styles/src/styleTree/workspace.ts             |  29 +++--
 13 files changed, 154 insertions(+), 70 deletions(-)

diff --git a/crates/context_menu/src/context_menu.rs b/crates/context_menu/src/context_menu.rs
index 7bfe3bb2e8..53f6bfe587 100644
--- a/crates/context_menu/src/context_menu.rs
+++ b/crates/context_menu/src/context_menu.rs
@@ -355,7 +355,7 @@ impl ContextMenu {
                 .with_style(style.container)
                 .boxed()
         })
-        .on_mouse_down_out(MouseButton::Left, |_, cx| cx.dispatch_action(Cancel))
-        .on_mouse_down_out(MouseButton::Right, |_, cx| cx.dispatch_action(Cancel))
+        .on_down_out(MouseButton::Left, |_, cx| cx.dispatch_action(Cancel))
+        .on_down_out(MouseButton::Right, |_, cx| cx.dispatch_action(Cancel))
     }
 }
diff --git a/crates/editor/src/editor.rs b/crates/editor/src/editor.rs
index 47501192b0..c814a508a9 100644
--- a/crates/editor/src/editor.rs
+++ b/crates/editor/src/editor.rs
@@ -707,7 +707,7 @@ impl CompletionsMenu {
                             },
                         )
                         .with_cursor_style(CursorStyle::PointingHand)
-                        .on_mouse_down(MouseButton::Left, move |_, cx| {
+                        .on_down(MouseButton::Left, move |_, cx| {
                             cx.dispatch_action(ConfirmCompletion {
                                 item_ix: Some(item_ix),
                             });
@@ -840,7 +840,7 @@ impl CodeActionsMenu {
                                 .boxed()
                         })
                         .with_cursor_style(CursorStyle::PointingHand)
-                        .on_mouse_down(MouseButton::Left, move |_, cx| {
+                        .on_down(MouseButton::Left, move |_, cx| {
                             cx.dispatch_action(ConfirmCodeAction {
                                 item_ix: Some(item_ix),
                             });
@@ -2674,7 +2674,7 @@ impl Editor {
                 })
                 .with_cursor_style(CursorStyle::PointingHand)
                 .with_padding(Padding::uniform(3.))
-                .on_mouse_down(MouseButton::Left, |_, cx| {
+                .on_down(MouseButton::Left, |_, cx| {
                     cx.dispatch_action(ToggleCodeActions {
                         deployed_from_indicator: true,
                     });
diff --git a/crates/editor/src/link_go_to_definition.rs b/crates/editor/src/link_go_to_definition.rs
index f034df64b6..32dae4ecee 100644
--- a/crates/editor/src/link_go_to_definition.rs
+++ b/crates/editor/src/link_go_to_definition.rs
@@ -7,7 +7,9 @@ use settings::Settings;
 use util::TryFutureExt;
 use workspace::Workspace;
 
-use crate::{Anchor, DisplayPoint, Editor, EditorSnapshot, GoToDefinition, Select, SelectPhase};
+use crate::{
+    Anchor, DisplayPoint, Editor, EditorSnapshot, Event, GoToDefinition, Select, SelectPhase,
+};
 
 #[derive(Clone, PartialEq)]
 pub struct UpdateGoToDefinitionLink {
@@ -276,6 +278,13 @@ pub fn go_to_fetched_definition(
     });
 
     if !definitions.is_empty() {
+        editor_handle.update(cx, |editor, cx| {
+            if !editor.focused {
+                cx.focus_self();
+                cx.emit(Event::Activate);
+            }
+        });
+
         Editor::navigate_to_definitions(workspace, editor_handle, definitions, cx);
     } else {
         editor_handle.update(cx, |editor, cx| {
diff --git a/crates/editor/src/mouse_context_menu.rs b/crates/editor/src/mouse_context_menu.rs
index f30bc0a678..ce2faf8fa6 100644
--- a/crates/editor/src/mouse_context_menu.rs
+++ b/crates/editor/src/mouse_context_menu.rs
@@ -2,7 +2,7 @@ use context_menu::ContextMenuItem;
 use gpui::{geometry::vector::Vector2F, impl_internal_actions, MutableAppContext, ViewContext};
 
 use crate::{
-    DisplayPoint, Editor, EditorMode, FindAllReferences, GoToDefinition, Rename, SelectMode,
+    DisplayPoint, Editor, EditorMode, Event, FindAllReferences, GoToDefinition, Rename, SelectMode,
     ToggleCodeActions,
 };
 
@@ -23,6 +23,11 @@ pub fn deploy_context_menu(
     &DeployMouseContextMenu { position, point }: &DeployMouseContextMenu,
     cx: &mut ViewContext<Editor>,
 ) {
+    if !editor.focused {
+        cx.focus_self();
+        cx.emit(Event::Activate);
+    }
+
     // Don't show context menu for inline editors
     if editor.mode() != EditorMode::Full {
         return;
diff --git a/crates/gpui/src/elements/mouse_event_handler.rs b/crates/gpui/src/elements/mouse_event_handler.rs
index 40c35b80bc..14ebb20de9 100644
--- a/crates/gpui/src/elements/mouse_event_handler.rs
+++ b/crates/gpui/src/elements/mouse_event_handler.rs
@@ -43,7 +43,7 @@ impl MouseEventHandler {
         self
     }
 
-    pub fn on_mouse_down(
+    pub fn on_down(
         mut self,
         button: MouseButton,
         handler: impl Fn(MouseButtonEvent, &mut EventContext) + 'static,
@@ -61,7 +61,7 @@ impl MouseEventHandler {
         self
     }
 
-    pub fn on_mouse_down_out(
+    pub fn on_down_out(
         mut self,
         button: MouseButton,
         handler: impl Fn(MouseButtonEvent, &mut EventContext) + 'static,
diff --git a/crates/picker/src/picker.rs b/crates/picker/src/picker.rs
index 0b30583053..6f247ebb6e 100644
--- a/crates/picker/src/picker.rs
+++ b/crates/picker/src/picker.rs
@@ -90,7 +90,7 @@ impl<D: PickerDelegate> View for Picker<D> {
                                         .read(cx)
                                         .render_match(ix, state, ix == selected_ix, cx)
                                 })
-                                .on_mouse_down(MouseButton::Left, move |_, cx| {
+                                .on_down(MouseButton::Left, move |_, cx| {
                                     cx.dispatch_action(SelectIndex(ix))
                                 })
                                 .with_cursor_style(CursorStyle::PointingHand)
diff --git a/crates/project_panel/src/project_panel.rs b/crates/project_panel/src/project_panel.rs
index fbd8c0631f..792d970fcd 100644
--- a/crates/project_panel/src/project_panel.rs
+++ b/crates/project_panel/src/project_panel.rs
@@ -1082,7 +1082,7 @@ impl ProjectPanel {
                 }
             },
         )
-        .on_mouse_down(
+        .on_down(
             MouseButton::Right,
             move |MouseButtonEvent { position, .. }, cx| {
                 cx.dispatch_action(DeployContextMenu { entry_id, position })
@@ -1134,7 +1134,7 @@ impl View for ProjectPanel {
                     .expanded()
                     .boxed()
                 })
-                .on_mouse_down(
+                .on_down(
                     MouseButton::Right,
                     move |MouseButtonEvent { position, .. }, cx| {
                         // When deploying the context menu anywhere below the last project entry,
diff --git a/crates/search/src/project_search.rs b/crates/search/src/project_search.rs
index 6d23042280..0becd0d184 100644
--- a/crates/search/src/project_search.rs
+++ b/crates/search/src/project_search.rs
@@ -147,6 +147,7 @@ impl ProjectSearch {
 
 pub enum ViewEvent {
     UpdateTab,
+    Activate,
     EditorEvent(editor::Event),
 }
 
@@ -162,7 +163,9 @@ impl View for ProjectSearchView {
     fn render(&mut self, cx: &mut RenderContext<Self>) -> ElementBox {
         let model = &self.model.read(cx);
         if model.match_ranges.is_empty() {
-            let theme = &cx.global::<Settings>().theme;
+            enum Status {}
+
+            let theme = cx.global::<Settings>().theme.clone();
             let text = if self.query_editor.read(cx).text(cx).is_empty() {
                 ""
             } else if model.pending_search.is_some() {
@@ -170,12 +173,18 @@ impl View for ProjectSearchView {
             } else {
                 "No results"
             };
-            Label::new(text.to_string(), theme.search.results_status.clone())
-                .aligned()
-                .contained()
-                .with_background_color(theme.editor.background)
-                .flex(1., true)
-                .boxed()
+            MouseEventHandler::new::<Status, _, _>(0, cx, |_, _| {
+                Label::new(text.to_string(), theme.search.results_status.clone())
+                    .aligned()
+                    .contained()
+                    .with_background_color(theme.editor.background)
+                    .flex(1., true)
+                    .boxed()
+            })
+            .on_down(MouseButton::Left, |_, cx| {
+                cx.focus_parent_view();
+            })
+            .boxed()
         } else {
             ChildView::new(&self.results_editor).flex(1., true).boxed()
         }
diff --git a/crates/theme/src/theme.rs b/crates/theme/src/theme.rs
index 2299bc3477..8c6a696d08 100644
--- a/crates/theme/src/theme.rs
+++ b/crates/theme/src/theme.rs
@@ -38,8 +38,10 @@ pub struct Theme {
 pub struct Workspace {
     pub background: Color,
     pub titlebar: Titlebar,
-    pub tab: Tab,
-    pub active_tab: Tab,
+    pub focused_active_tab: Tab,
+    pub focused_inactive_tab: Tab,
+    pub unfocused_active_tab: Tab,
+    pub unfocused_inactive_tab: Tab,
     pub pane_button: Interactive<IconButton>,
     pub pane_divider: Border,
     pub leader_border_opacity: f32,
diff --git a/crates/workspace/src/pane.rs b/crates/workspace/src/pane.rs
index 4b1a57621c..f3aeb94f16 100644
--- a/crates/workspace/src/pane.rs
+++ b/crates/workspace/src/pane.rs
@@ -1,5 +1,5 @@
 use super::{ItemHandle, SplitDirection};
-use crate::{toolbar::Toolbar, Item, WeakItemHandle, Workspace};
+use crate::{toolbar::Toolbar, Item, NewFile, WeakItemHandle, Workspace};
 use anyhow::Result;
 use collections::{HashMap, HashSet, VecDeque};
 use context_menu::{ContextMenu, ContextMenuItem};
@@ -136,6 +136,7 @@ pub enum Event {
 
 pub struct Pane {
     items: Vec<Box<dyn ItemHandle>>,
+    is_active: bool,
     active_item_index: usize,
     autoscroll: bool,
     nav_history: Rc<RefCell<NavHistory>>,
@@ -184,6 +185,7 @@ impl Pane {
         let split_menu = cx.add_view(|cx| ContextMenu::new(cx));
         Self {
             items: Vec::new(),
+            is_active: true,
             active_item_index: 0,
             autoscroll: false,
             nav_history: Rc::new(RefCell::new(NavHistory {
@@ -199,6 +201,11 @@ impl Pane {
         }
     }
 
+    pub fn set_active(&mut self, is_active: bool, cx: &mut ViewContext<Self>) {
+        self.is_active = is_active;
+        cx.notify();
+    }
+
     pub fn nav_history_for_item<T: Item>(&self, item: &ViewHandle<T>) -> ItemNavHistory {
         ItemNavHistory {
             history: self.nav_history.clone(),
@@ -865,26 +872,23 @@ impl Pane {
                 None
             };
 
+            let is_pane_active = self.is_active;
             let mut row = Flex::row().scrollable::<Tabs, _>(1, autoscroll, cx);
             for (ix, (item, detail)) in self.items.iter().zip(self.tab_details(cx)).enumerate() {
                 let detail = if detail == 0 { None } else { Some(detail) };
-                let is_active = ix == self.active_item_index;
+                let is_tab_active = ix == self.active_item_index;
 
                 row.add_child({
-                    let tab_style = if is_active {
-                        theme.workspace.active_tab.clone()
-                    } else {
-                        theme.workspace.tab.clone()
+                    let mut tab_style = match (is_pane_active, is_tab_active) {
+                        (true, true) => theme.workspace.focused_active_tab.clone(),
+                        (true, false) => theme.workspace.focused_inactive_tab.clone(),
+                        (false, true) => theme.workspace.unfocused_active_tab.clone(),
+                        (false, false) => theme.workspace.unfocused_inactive_tab.clone(),
                     };
                     let title = item.tab_content(detail, &tab_style, cx);
 
-                    let mut style = if is_active {
-                        theme.workspace.active_tab.clone()
-                    } else {
-                        theme.workspace.tab.clone()
-                    };
                     if ix == 0 {
-                        style.container.border.left = false;
+                        tab_style.container.border.left = false;
                     }
 
                     MouseEventHandler::new::<Tab, _, _>(ix, cx, |_, cx| {
@@ -894,9 +898,9 @@ impl Pane {
                                     Align::new({
                                         let diameter = 7.0;
                                         let icon_color = if item.has_conflict(cx) {
-                                            Some(style.icon_conflict)
+                                            Some(tab_style.icon_conflict)
                                         } else if item.is_dirty(cx) {
-                                            Some(style.icon_dirty)
+                                            Some(tab_style.icon_dirty)
                                         } else {
                                             None
                                         };
@@ -928,8 +932,8 @@ impl Pane {
                                     Container::new(Align::new(title).boxed())
                                         .with_style(ContainerStyle {
                                             margin: Margin {
-                                                left: style.spacing,
-                                                right: style.spacing,
+                                                left: tab_style.spacing,
+                                                right: tab_style.spacing,
                                                 ..Default::default()
                                             },
                                             ..Default::default()
@@ -947,10 +951,11 @@ impl Pane {
                                                 cx,
                                                 |mouse_state, _| {
                                                     if mouse_state.hovered {
-                                                        icon.with_color(style.icon_close_active)
+                                                        icon.with_color(tab_style.icon_close_active)
                                                             .boxed()
                                                     } else {
-                                                        icon.with_color(style.icon_close).boxed()
+                                                        icon.with_color(tab_style.icon_close)
+                                                            .boxed()
                                                     }
                                                 },
                                             )
@@ -969,27 +974,39 @@ impl Pane {
                                         } else {
                                             Empty::new().boxed()
                                         })
-                                        .with_width(style.icon_width)
+                                        .with_width(tab_style.icon_width)
                                         .boxed(),
                                     )
                                     .boxed(),
                                 )
                                 .boxed(),
                         )
-                        .with_style(style.container)
+                        .with_style(tab_style.container)
                         .boxed()
                     })
-                    .on_mouse_down(MouseButton::Left, move |_, cx| {
+                    .with_cursor_style(if is_tab_active && is_pane_active {
+                        CursorStyle::Arrow
+                    } else {
+                        CursorStyle::PointingHand
+                    })
+                    .on_down(MouseButton::Left, move |_, cx| {
                         cx.dispatch_action(ActivateItem(ix));
                     })
                     .boxed()
                 })
             }
 
+            let filler_style = if is_pane_active {
+                &theme.workspace.focused_inactive_tab
+            } else {
+                &theme.workspace.unfocused_inactive_tab
+            };
+
             row.add_child(
                 Empty::new()
                     .contained()
-                    .with_border(theme.workspace.tab.container.border)
+                    .with_style(filler_style.container)
+                    .with_border(theme.workspace.focused_active_tab.container.border)
                     .flex(0., true)
                     .named("filler"),
             );
@@ -1054,10 +1071,12 @@ impl View for Pane {
             .with_child(
                 EventHandler::new(if let Some(active_item) = self.active_item() {
                     Flex::column()
-                        .with_child(
-                            Flex::row()
-                                .with_child(self.render_tabs(cx).flex(1., true).named("tabs"))
-                                .with_child(
+                        .with_child({
+                            let mut tab_row = Flex::row()
+                                .with_child(self.render_tabs(cx).flex(1., true).named("tabs"));
+
+                            if self.is_active {
+                                tab_row.add_child(
                                     MouseEventHandler::new::<SplitIcon, _, _>(
                                         0,
                                         cx,
@@ -1080,7 +1099,7 @@ impl View for Pane {
                                         },
                                     )
                                     .with_cursor_style(CursorStyle::PointingHand)
-                                    .on_mouse_down(
+                                    .on_down(
                                         MouseButton::Left,
                                         |MouseButtonEvent { position, .. }, cx| {
                                             cx.dispatch_action(DeploySplitMenu { position });
@@ -1088,15 +1107,36 @@ impl View for Pane {
                                     )
                                     .boxed(),
                                 )
+                            }
+
+                            tab_row
                                 .constrained()
-                                .with_height(cx.global::<Settings>().theme.workspace.tab.height)
-                                .boxed(),
-                        )
+                                .with_height(
+                                    cx.global::<Settings>()
+                                        .theme
+                                        .workspace
+                                        .focused_active_tab
+                                        .height,
+                                )
+                                .boxed()
+                        })
                         .with_child(ChildView::new(&self.toolbar).boxed())
                         .with_child(ChildView::new(active_item).flex(1., true).boxed())
                         .boxed()
                 } else {
-                    Empty::new().boxed()
+                    enum EmptyPane {}
+                    let theme = cx.global::<Settings>().theme.clone();
+
+                    MouseEventHandler::new::<EmptyPane, _, _>(0, cx, |_, _| {
+                        Empty::new()
+                            .contained()
+                            .with_background_color(theme.editor.background)
+                            .boxed()
+                    })
+                    .on_down(MouseButton::Left, |_, cx| {
+                        cx.focus_parent_view();
+                    })
+                    .boxed()
                 })
                 .on_navigate_mouse_down(move |direction, cx| {
                     let this = this.clone();
diff --git a/crates/workspace/src/sidebar.rs b/crates/workspace/src/sidebar.rs
index cd4a009f2c..542cd51cb6 100644
--- a/crates/workspace/src/sidebar.rs
+++ b/crates/workspace/src/sidebar.rs
@@ -187,7 +187,7 @@ impl Sidebar {
             ..Default::default()
         })
         .with_cursor_style(CursorStyle::ResizeLeftRight)
-        .on_mouse_down(MouseButton::Left, |_, _| {}) // This prevents the mouse down event from being propagated elsewhere
+        .on_down(MouseButton::Left, |_, _| {}) // This prevents the mouse down event from being propagated elsewhere
         .on_drag(
             MouseButton::Left,
             move |old_position,
diff --git a/crates/workspace/src/workspace.rs b/crates/workspace/src/workspace.rs
index 8462967da5..cf535a5a31 100644
--- a/crates/workspace/src/workspace.rs
+++ b/crates/workspace/src/workspace.rs
@@ -1566,7 +1566,11 @@ impl Workspace {
 
     fn activate_pane(&mut self, pane: ViewHandle<Pane>, cx: &mut ViewContext<Self>) {
         if self.active_pane != pane {
+            self.active_pane
+                .update(cx, |pane, cx| pane.set_active(false, cx));
             self.active_pane = pane.clone();
+            self.active_pane
+                .update(cx, |pane, cx| pane.set_active(true, cx));
             self.status_bar.update(cx, |status_bar, cx| {
                 status_bar.set_active_pane(&self.active_pane, cx);
             });
@@ -1629,17 +1633,17 @@ impl Workspace {
         pane: ViewHandle<Pane>,
         direction: SplitDirection,
         cx: &mut ViewContext<Self>,
-    ) -> ViewHandle<Pane> {
-        let new_pane = self.add_pane(cx);
-        self.activate_pane(new_pane.clone(), cx);
-        if let Some(item) = pane.read(cx).active_item() {
+    ) -> Option<ViewHandle<Pane>> {
+        pane.read(cx).active_item().map(|item| {
+            let new_pane = self.add_pane(cx);
+            self.activate_pane(new_pane.clone(), cx);
             if let Some(clone) = item.clone_on_split(cx.as_mut()) {
                 Pane::add_item(self, new_pane.clone(), clone, true, true, cx);
             }
-        }
-        self.center.split(&pane, &new_pane, direction).unwrap();
-        cx.notify();
-        new_pane
+            self.center.split(&pane, &new_pane, direction).unwrap();
+            cx.notify();
+            new_pane
+        })
     }
 
     fn remove_pane(&mut self, pane: ViewHandle<Pane>, cx: &mut ViewContext<Self>) {
@@ -3045,7 +3049,9 @@ mod tests {
         //     multi-entry items:   (3, 4)
         let left_pane = workspace.update(cx, |workspace, cx| {
             let left_pane = workspace.active_pane().clone();
-            let right_pane = workspace.split_pane(left_pane.clone(), SplitDirection::Right, cx);
+            let right_pane = workspace
+                .split_pane(left_pane.clone(), SplitDirection::Right, cx)
+                .unwrap();
 
             workspace.activate_pane(left_pane.clone(), cx);
             workspace.add_item(Box::new(cx.add_view(|_| item_2_3.clone())), cx);
diff --git a/styles/src/styleTree/workspace.ts b/styles/src/styleTree/workspace.ts
index f41e2e8b0b..4e88aded04 100644
--- a/styles/src/styleTree/workspace.ts
+++ b/styles/src/styleTree/workspace.ts
@@ -14,7 +14,7 @@ export function workspaceBackground(theme: Theme) {
 }
 
 export default function workspace(theme: Theme) {
-  const tab = {
+  const focusedInactiveTab = {
     height: 32,
     background: workspaceBackground(theme),
     iconClose: iconColor(theme, "muted"),
@@ -39,16 +39,27 @@ export default function workspace(theme: Theme) {
     }
   };
 
-  const activeTab = {
-    ...tab,
+  const focusedActiveTab = {
+    ...focusedInactiveTab,
     background: backgroundColor(theme, 500),
     text: text(theme, "sans", "active", { size: "sm" }),
     border: {
-      ...tab.border,
+      ...focusedInactiveTab.border,
       bottom: false,
     },
   };
 
+  const unfocusedInactiveTab = {
+    ...focusedInactiveTab,
+    background: backgroundColor(theme, 100),
+    text: text(theme, "sans", "placeholder", { size: "sm" }),
+  };
+
+  const unfocusedActiveTab = {
+    ...focusedInactiveTab,
+    text: text(theme, "sans", "placeholder", { size: "sm" }),
+  }
+
   const titlebarPadding = 6;
 
   return {
@@ -63,15 +74,17 @@ export default function workspace(theme: Theme) {
     },
     leaderBorderOpacity: 0.7,
     leaderBorderWidth: 2.0,
-    tab,
-    activeTab,
+    focusedActiveTab,
+    focusedInactiveTab,
+    unfocusedActiveTab,
+    unfocusedInactiveTab,
     paneButton: {
       color: iconColor(theme, "secondary"),
       border: {
-        ...tab.border,
+        ...focusedActiveTab.border,
       },
       iconWidth: 12,
-      buttonWidth: tab.height,
+      buttonWidth: focusedActiveTab.height,
       hover: {
         color: iconColor(theme, "active"),
         background: backgroundColor(theme, 300),

From daceb1eb5fd6980e1c49bd0a9a2f27a69ab5a105 Mon Sep 17 00:00:00 2001
From: K Simmons <keith@zed.dev>
Date: Wed, 20 Jul 2022 19:02:12 -0700
Subject: [PATCH 20/22] Fix warning

---
 crates/workspace/src/pane.rs | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/crates/workspace/src/pane.rs b/crates/workspace/src/pane.rs
index f3aeb94f16..41869c2c24 100644
--- a/crates/workspace/src/pane.rs
+++ b/crates/workspace/src/pane.rs
@@ -1,5 +1,5 @@
 use super::{ItemHandle, SplitDirection};
-use crate::{toolbar::Toolbar, Item, NewFile, WeakItemHandle, Workspace};
+use crate::{toolbar::Toolbar, Item, WeakItemHandle, Workspace};
 use anyhow::Result;
 use collections::{HashMap, HashSet, VecDeque};
 use context_menu::{ContextMenu, ContextMenuItem};

From fb2fbf2ac78cfce5699084b96006f1fbb01fde99 Mon Sep 17 00:00:00 2001
From: K Simmons <keith@zed.dev>
Date: Wed, 20 Jul 2022 19:13:16 -0700
Subject: [PATCH 21/22] fix test failure

---
 crates/workspace/src/workspace.rs | 13 ++++++-------
 1 file changed, 6 insertions(+), 7 deletions(-)

diff --git a/crates/workspace/src/workspace.rs b/crates/workspace/src/workspace.rs
index cf535a5a31..587ad09cb5 100644
--- a/crates/workspace/src/workspace.rs
+++ b/crates/workspace/src/workspace.rs
@@ -3049,18 +3049,17 @@ mod tests {
         //     multi-entry items:   (3, 4)
         let left_pane = workspace.update(cx, |workspace, cx| {
             let left_pane = workspace.active_pane().clone();
-            let right_pane = workspace
-                .split_pane(left_pane.clone(), SplitDirection::Right, cx)
-                .unwrap();
-
-            workspace.activate_pane(left_pane.clone(), cx);
             workspace.add_item(Box::new(cx.add_view(|_| item_2_3.clone())), cx);
             for item in &single_entry_items {
                 workspace.add_item(Box::new(cx.add_view(|_| item.clone())), cx);
             }
+            left_pane.update(cx, |pane, cx| {
+                pane.activate_item(2, true, true, false, cx);
+            });
 
-            workspace.activate_pane(right_pane.clone(), cx);
-            workspace.add_item(Box::new(cx.add_view(|_| single_entry_items[1].clone())), cx);
+            workspace
+                .split_pane(left_pane.clone(), SplitDirection::Right, cx)
+                .unwrap();
             workspace.add_item(Box::new(cx.add_view(|_| item_3_4.clone())), cx);
 
             left_pane

From d6519ad2809ea2c562c9b9b0aaa935d588c08183 Mon Sep 17 00:00:00 2001
From: K Simmons <keith@zed.dev>
Date: Thu, 21 Jul 2022 14:56:17 -0700
Subject: [PATCH 22/22] Minor naming improvements and revert empty pane
 background color change

---
 crates/theme/src/theme.rs             |  8 ++++----
 crates/workspace/src/drag_and_drop.rs |  0
 crates/workspace/src/pane.rs          | 18 ++++++++---------
 styles/src/styleTree/workspace.ts     | 28 +++++++++++++--------------
 4 files changed, 27 insertions(+), 27 deletions(-)
 create mode 100644 crates/workspace/src/drag_and_drop.rs

diff --git a/crates/theme/src/theme.rs b/crates/theme/src/theme.rs
index 8c6a696d08..540c5bfd6c 100644
--- a/crates/theme/src/theme.rs
+++ b/crates/theme/src/theme.rs
@@ -38,10 +38,10 @@ pub struct Theme {
 pub struct Workspace {
     pub background: Color,
     pub titlebar: Titlebar,
-    pub focused_active_tab: Tab,
-    pub focused_inactive_tab: Tab,
-    pub unfocused_active_tab: Tab,
-    pub unfocused_inactive_tab: Tab,
+    pub active_pane_active_tab: Tab,
+    pub active_pane_inactive_tab: Tab,
+    pub inactive_pane_active_tab: Tab,
+    pub inactive_pane_inactive_tab: Tab,
     pub pane_button: Interactive<IconButton>,
     pub pane_divider: Border,
     pub leader_border_opacity: f32,
diff --git a/crates/workspace/src/drag_and_drop.rs b/crates/workspace/src/drag_and_drop.rs
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/crates/workspace/src/pane.rs b/crates/workspace/src/pane.rs
index 41869c2c24..c384748c3c 100644
--- a/crates/workspace/src/pane.rs
+++ b/crates/workspace/src/pane.rs
@@ -880,10 +880,10 @@ impl Pane {
 
                 row.add_child({
                     let mut tab_style = match (is_pane_active, is_tab_active) {
-                        (true, true) => theme.workspace.focused_active_tab.clone(),
-                        (true, false) => theme.workspace.focused_inactive_tab.clone(),
-                        (false, true) => theme.workspace.unfocused_active_tab.clone(),
-                        (false, false) => theme.workspace.unfocused_inactive_tab.clone(),
+                        (true, true) => theme.workspace.active_pane_active_tab.clone(),
+                        (true, false) => theme.workspace.active_pane_inactive_tab.clone(),
+                        (false, true) => theme.workspace.inactive_pane_active_tab.clone(),
+                        (false, false) => theme.workspace.inactive_pane_inactive_tab.clone(),
                     };
                     let title = item.tab_content(detail, &tab_style, cx);
 
@@ -997,16 +997,16 @@ impl Pane {
             }
 
             let filler_style = if is_pane_active {
-                &theme.workspace.focused_inactive_tab
+                &theme.workspace.active_pane_inactive_tab
             } else {
-                &theme.workspace.unfocused_inactive_tab
+                &theme.workspace.inactive_pane_inactive_tab
             };
 
             row.add_child(
                 Empty::new()
                     .contained()
                     .with_style(filler_style.container)
-                    .with_border(theme.workspace.focused_active_tab.container.border)
+                    .with_border(theme.workspace.active_pane_active_tab.container.border)
                     .flex(0., true)
                     .named("filler"),
             );
@@ -1115,7 +1115,7 @@ impl View for Pane {
                                     cx.global::<Settings>()
                                         .theme
                                         .workspace
-                                        .focused_active_tab
+                                        .active_pane_active_tab
                                         .height,
                                 )
                                 .boxed()
@@ -1130,7 +1130,7 @@ impl View for Pane {
                     MouseEventHandler::new::<EmptyPane, _, _>(0, cx, |_, _| {
                         Empty::new()
                             .contained()
-                            .with_background_color(theme.editor.background)
+                            .with_background_color(theme.workspace.background)
                             .boxed()
                     })
                     .on_down(MouseButton::Left, |_, cx| {
diff --git a/styles/src/styleTree/workspace.ts b/styles/src/styleTree/workspace.ts
index 4e88aded04..c86dce7226 100644
--- a/styles/src/styleTree/workspace.ts
+++ b/styles/src/styleTree/workspace.ts
@@ -14,7 +14,7 @@ export function workspaceBackground(theme: Theme) {
 }
 
 export default function workspace(theme: Theme) {
-  const focusedInactiveTab = {
+  const activePaneInactiveTab = {
     height: 32,
     background: workspaceBackground(theme),
     iconClose: iconColor(theme, "muted"),
@@ -39,24 +39,24 @@ export default function workspace(theme: Theme) {
     }
   };
 
-  const focusedActiveTab = {
-    ...focusedInactiveTab,
+  const activePaneActiveTab = {
+    ...activePaneInactiveTab,
     background: backgroundColor(theme, 500),
     text: text(theme, "sans", "active", { size: "sm" }),
     border: {
-      ...focusedInactiveTab.border,
+      ...activePaneInactiveTab.border,
       bottom: false,
     },
   };
 
-  const unfocusedInactiveTab = {
-    ...focusedInactiveTab,
+  const inactivePaneInactiveTab = {
+    ...activePaneInactiveTab,
     background: backgroundColor(theme, 100),
     text: text(theme, "sans", "placeholder", { size: "sm" }),
   };
 
-  const unfocusedActiveTab = {
-    ...focusedInactiveTab,
+  const inactivePaneActiveTab = {
+    ...activePaneInactiveTab,
     text: text(theme, "sans", "placeholder", { size: "sm" }),
   }
 
@@ -74,17 +74,17 @@ export default function workspace(theme: Theme) {
     },
     leaderBorderOpacity: 0.7,
     leaderBorderWidth: 2.0,
-    focusedActiveTab,
-    focusedInactiveTab,
-    unfocusedActiveTab,
-    unfocusedInactiveTab,
+    activePaneActiveTab,
+    activePaneInactiveTab,
+    inactivePaneActiveTab,
+    inactivePaneInactiveTab,
     paneButton: {
       color: iconColor(theme, "secondary"),
       border: {
-        ...focusedActiveTab.border,
+        ...activePaneActiveTab.border,
       },
       iconWidth: 12,
-      buttonWidth: focusedActiveTab.height,
+      buttonWidth: activePaneActiveTab.height,
       hover: {
         color: iconColor(theme, "active"),
         background: backgroundColor(theme, 300),