From ea23d4623b297d4a3aa74278cfd64987d1c9a919 Mon Sep 17 00:00:00 2001
From: luckyklyist <puspaanupam@gmail.com>
Date: Wed, 13 Sep 2023 10:57:15 +0545
Subject: [PATCH 1/4] feat: Remove deprecated node-sass package, migrated to
 Sass #2392

---
 client/styles/abstracts/_placeholders.scss    |  30 +-
 client/styles/base/_base.scss                 |  14 +-
 client/styles/components/_about.scss          |  42 +-
 client/styles/components/_account.scss        |  12 +-
 client/styles/components/_api-key.scss        |  24 +-
 client/styles/components/_asset-list.scss     |  30 +-
 client/styles/components/_asset-size.scss     |  12 +-
 .../styles/components/_collection-create.scss |   4 +-
 client/styles/components/_collection.scss     |  38 +-
 client/styles/components/_console-input.scss  |   8 +-
 client/styles/components/_console.scss        |  28 +-
 client/styles/components/_copyable-input.scss |  18 +-
 .../styles/components/_dashboard-header.scss  |  30 +-
 client/styles/components/_editable-input.scss |   4 +-
 client/styles/components/_editor.scss         |  86 +--
 client/styles/components/_error-modal.scss    |  14 +-
 client/styles/components/_feedback.scss       |  22 +-
 client/styles/components/_form-container.scss |   8 +-
 client/styles/components/_forms.scss          |  36 +-
 client/styles/components/_hints.scss          |  16 +-
 .../components/_keyboard-shortcuts.scss       |  24 +-
 client/styles/components/_loader.scss         |   6 +-
 client/styles/components/_modal.scss          |  18 +-
 client/styles/components/_nav.scss            |  28 +-
 client/styles/components/_new-password.scss   |   6 +-
 client/styles/components/_overlay.scss        |  10 +-
 .../_p5-contrast-codemirror-theme.scss        |   4 +-
 client/styles/components/_preferences.scss    |  63 +-
 client/styles/components/_preview-frame.scss  |  12 +-
 client/styles/components/_preview-nav.scss    |   8 +-
 client/styles/components/_quick-add.scss      |  16 +-
 client/styles/components/_reset-password.scss |  12 +-
 client/styles/components/_searchbar.scss      |  26 +-
 client/styles/components/_share.scss          |  12 +-
 client/styles/components/_sidebar.scss        |  74 +-
 client/styles/components/_sketch-list.scss    |  50 +-
 client/styles/components/_tabs.scss           |  22 +-
 client/styles/components/_timer.scss          |   6 +-
 client/styles/components/_toast.scss          |  12 +-
 client/styles/components/_toolbar.scss        |  38 +-
 client/styles/layout/_dashboard.scss          |   4 +-
 client/styles/main.scss                       |  10 +-
 package-lock.json                             | 710 ++++++++++++++++--
 package.json                                  |   5 +-
 44 files changed, 1140 insertions(+), 512 deletions(-)

diff --git a/client/styles/abstracts/_placeholders.scss b/client/styles/abstracts/_placeholders.scss
index a6016e122a..65e115a38a 100644
--- a/client/styles/abstracts/_placeholders.scss
+++ b/client/styles/abstracts/_placeholders.scss
@@ -1,8 +1,10 @@
+@use "sass:math";
+
 %toolbar-button {
 	@include themify() {
 		display: inline-block;
-		height: #{44 / $base-font-size}rem;
-		width: #{44 / $base-font-size}rem;
+		height: #{math.div(44, $base-font-size)}rem;
+		width: #{math.div(44, $base-font-size)}rem;
 		text-align: center;
 		border-radius: 100%;
 		cursor: pointer;
@@ -81,7 +83,7 @@
 		cursor: pointer;
 		border: 2px solid getThemifyVariable('button-border-color');
 		border-radius: 2px;
-		padding: #{10 / $base-font-size}rem #{30 / $base-font-size}rem;
+		padding: #{math.div(10, $base-font-size)}rem #{math.div(30, $base-font-size)}rem;
 		& g, & path {
 			fill: getThemifyVariable('button-color');
 			opacity: 1;
@@ -111,8 +113,8 @@
 		color: getThemifyVariable('primary-text-color');
 		background-color: getThemifyVariable('preferences-button-background-color');
 		padding: 0;
-		margin-bottom: #{28 / $base-font-size}rem;
-		line-height: #{50 / $base-font-size}rem;
+		margin-bottom: #{math.div(28, $base-font-size)}rem;
+		line-height: #{math.div(50, $base-font-size)}rem;
 		& g, & path {
 			fill: getThemifyVariable('modal-button-color');
 		}
@@ -138,12 +140,12 @@
 			color: getThemifyVariable('heavy-text-color');
 		}
 	}
-	font-size: #{12 / $base-font-size}rem;
+	font-size: #{math.div(12, $base-font-size)}rem;
 	cursor: pointer;
 	text-align: left;
 	padding: 0;
-	margin-bottom: #{5 / $base-font-size}rem;
-	padding-right: #{5 / $base-font-size}rem;
+	margin-bottom: #{math.div(5, $base-font-size)}rem;
+	padding-right: #{math.div(5, $base-font-size)}rem;
 	border: 0;
 	list-style-type: none;
 }
@@ -194,19 +196,19 @@
     color: getThemifyVariable('primary-text-color');
 	}
 	text-align: left;
-	width: #{180 / $base-font-size}rem;
+	width: #{math.div(180, $base-font-size)}rem;
 	display: flex;
 	position: absolute;
 	flex-direction: column;
 	top: 95%;
 	height: auto;
 	z-index: 9999;
-	border-radius: #{6 / $base-font-size}rem;
+	border-radius: #{math.div(6, $base-font-size)}rem;
 	& li:first-child {
-		border-radius: #{5 / $base-font-size}rem #{5 / $base-font-size}rem 0 0;
+		border-radius: #{math.div(5, $base-font-size)}rem #{math.div(5, $base-font-size)}rem 0 0;
 	}
 	& li:last-child {
-		border-radius: 0 0 #{5 / $base-font-size}rem #{5 / $base-font-size}rem;
+		border-radius: 0 0 #{math.div(5, $base-font-size)}rem #{math.div(5, $base-font-size)}rem;
 	}
 	& li {
 		& button,
@@ -216,9 +218,9 @@
 			}
 			width: 100%;
 			text-align: left;
-			padding: #{8 / $base-font-size}rem #{16 / $base-font-size}rem;
+			padding: #{math.div(8, $base-font-size)}rem #{math.div(16, $base-font-size)}rem;
 		}
-		height: #{35 / $base-font-size}rem;
+		height: #{math.div(35, $base-font-size)}rem;
 		cursor: pointer;
 		display: flex;
 		align-items: center;
diff --git a/client/styles/base/_base.scss b/client/styles/base/_base.scss
index 1d4a99f60e..3e283d7ab9 100644
--- a/client/styles/base/_base.scss
+++ b/client/styles/base/_base.scss
@@ -1,3 +1,5 @@
+@use "sass:math";
+
 * {
 	box-sizing: border-box;
 }
@@ -65,10 +67,10 @@ button {
 
 input,
 textarea {
-	padding: #{5 / $base-font-size}rem;
+	padding: #{math.div(5, $base-font-size)}rem;
 	border: 1px solid;
 	border-radius: 2px;
-	padding: #{10 / $base-font-size}rem;
+	padding: #{math.div(10, $base-font-size)}rem;
 	@include themify() {
 		color: getThemifyVariable("input-text-color");
 		background-color: getThemifyVariable("input-background-color");
@@ -105,23 +107,23 @@ button {
 }
 
 h1 {
-	font-size: #{21 / $base-font-size}em;
+	font-size: #{math.div(21, $base-font-size)}em;
 }
 
 h2 {
-	font-size: #{21 / $base-font-size}em;
+	font-size: #{math.div(21, $base-font-size)}em;
 }
 
 h3 {
 	font-weight: normal;
-	font-size: #{16 / $base-font-size}rem;
+	font-size: #{math.div(16, $base-font-size)}rem;
 }
 h4 {
 	font-weight: normal;
 }
 h6 {
 	font-weight: normal;
-	font-size: #{12 / $base-font-size}rem;
+	font-size: #{math.div(12, $base-font-size)}rem;
 }
 thead {
 	text-align: left;
diff --git a/client/styles/components/_about.scss b/client/styles/components/_about.scss
index 161ecb1bf8..c21939e6fe 100644
--- a/client/styles/components/_about.scss
+++ b/client/styles/components/_about.scss
@@ -1,3 +1,5 @@
+@use "sass:math";
+
 .about__logo {
   @include themify() {
     & path {
@@ -11,11 +13,11 @@
   flex-direction: row;
   justify-content: space-between;
   flex-wrap: wrap;
-  padding-top: #{17 / $base-font-size}rem;
-  padding-right: #{78 / $base-font-size}rem;
-  padding-bottom: #{20 / $base-font-size}rem;
-  padding-left: #{20 / $base-font-size}rem;
-  width: #{720 / $base-font-size}rem;
+  padding-top: #{math.div(17, $base-font-size)}rem;
+  padding-right: #{math.div(78, $base-font-size)}rem;
+  padding-bottom: #{math.div(20, $base-font-size)}rem;
+  padding-left: #{math.div(20, $base-font-size)}rem;
+  width: #{math.div(720, $base-font-size)}rem;
 }
 
 .about__content-column {
@@ -36,18 +38,18 @@
 
   .about__footer {
     flex-direction: column;
-    padding-left: #{20 / $base-font-size}rem;
-    padding-right: #{20 / $base-font-size}rem;
+    padding-left: #{math.div(20, $base-font-size)}rem;
+    padding-right: #{math.div(20, $base-font-size)}rem;
   }
 }
 
 .about__content-column-title {
-  font-size: #{21 / $base-font-size}rem;
-  padding-left: #{17 / $base-font-size}rem;
+  font-size: #{math.div(21, $base-font-size)}rem;
+  padding-left: #{math.div(17, $base-font-size)}rem;
 }
 
 .about__content-column-asterisk {
-  padding-right: #{5 / $base-font-size}rem;
+  padding-right: #{math.div(5, $base-font-size)}rem;
   @include themify() {
     & path {
       fill: getThemifyVariable('logo-color');
@@ -58,20 +60,20 @@
 
 .about__content-column-list {
   @include themify() {
-    padding-top: #{10 / $base-font-size}rem;
-    font-size: #{16 / $base-font-size}rem;
+    padding-top: #{math.div(10, $base-font-size)}rem;
+    font-size: #{math.div(16, $base-font-size)}rem;
   }
 }
 
 .about__version-info {
   @include themify() {
-    padding-top: #{8 / $base-font-size}rem;
-    font-size: #{16 / $base-font-size}rem;
+    padding-top: #{math.div(8, $base-font-size)}rem;
+    font-size: #{math.div(16, $base-font-size)}rem;
     span {
       color: getThemifyVariable('logo-color');
     }
     &:first-child {
-      padding-top: #{30 /$base-font-size}rem;
+      padding-top: #{math.div(30, $base-font-size)}rem;
     }
   }
   // span {
@@ -84,13 +86,13 @@
 .about__footer {
   display: flex;
   justify-content: space-between;
-  padding-top: #{18 / $base-font-size}rem;
-  padding-right: #{20 / $base-font-size}rem;
-  padding-bottom: #{21 / $base-font-size}rem;
-  padding-left: #{20 / $base-font-size}rem;
+  padding-top: #{math.div(18, $base-font-size)}rem;
+  padding-right: #{math.div(20, $base-font-size)}rem;
+  padding-bottom: #{math.div(21, $base-font-size)}rem;
+  padding-left: #{math.div(20, $base-font-size)}rem;
   width: 100%;
 }
 
 .about__footer-list {
-  padding-top: #{12 / $base-font-size}rem;
+  padding-top: #{math.div(12, $base-font-size)}rem;
 }
diff --git a/client/styles/components/_account.scss b/client/styles/components/_account.scss
index a70f346067..a304f9f3af 100644
--- a/client/styles/components/_account.scss
+++ b/client/styles/components/_account.scss
@@ -1,3 +1,5 @@
+@use "sass:math";
+
 .account-settings__container {
   @include themify() {
     color: getThemifyVariable('primary-text-color');
@@ -7,18 +9,18 @@
 }
 
 .account-settings {
-  max-width: #{700 / $base-font-size}rem;
+  max-width: #{math.div(700, $base-font-size)}rem;
   align-self: center;
-  padding: 0 #{10 / $base-font-size}rem;
+  padding: 0 #{math.div(10, $base-font-size)}rem;
   margin: 0 auto;
 }
 
 .account__tabs {
-  padding-top: #{20 / $base-font-size}rem;
+  padding-top: #{math.div(20, $base-font-size)}rem;
 }
 
 .account__social-text {
-  padding-bottom: #{15 / $base-font-size}rem;
+  padding-bottom: #{math.div(15, $base-font-size)}rem;
 }
 
 
@@ -27,5 +29,5 @@
 }
 
 .account__social-stack > * {
-  margin-right: #{15 / $base-font-size}rem;
+  margin-right: #{math.div(15, $base-font-size)}rem;
 }
diff --git a/client/styles/components/_api-key.scss b/client/styles/components/_api-key.scss
index f3565d506e..7e4e2af471 100644
--- a/client/styles/components/_api-key.scss
+++ b/client/styles/components/_api-key.scss
@@ -1,14 +1,16 @@
+@use "sass:math";
+
 .api-key-form__summary {
-  padding-top: #{25 / $base-font-size}rem;
+  padding-top: #{math.div(25, $base-font-size)}rem;
 }
 
 .api-key-form__section {
-  padding-bottom: #{15 / $base-font-size}rem;
+  padding-bottom: #{math.div(15, $base-font-size)}rem;
 }
 
 .api-key-form__title {
-  padding: #{15 / $base-font-size}rem 0;
-  font-size: #{21 / $base-font-size}rem;
+  padding: #{math.div(15, $base-font-size)}rem 0;
+  font-size: #{math.div(21, $base-font-size)}rem;
   font-weight: bold;
 }
 
@@ -27,11 +29,11 @@
   }
 
   th {
-    padding: #{5 / $base-font-size}rem;
+    padding: #{math.div(5, $base-font-size)}rem;
   }
 
   td {
-    padding: #{15 / $base-font-size}rem #{5 / $base-font-size}rem;
+    padding: #{math.div(15, $base-font-size)}rem #{math.div(5, $base-font-size)}rem;
   }
 
   tbody tr:nth-child(odd) {
@@ -46,8 +48,8 @@
 }
 
 .api-key-list__delete-button {
-    width:#{20 / $base-font-size}rem;
-    height:#{20 / $base-font-size}rem;
+    width:#{math.div(20, $base-font-size)}rem;
+    height:#{math.div(20, $base-font-size)}rem;
 
     text-align: center;
 
@@ -76,11 +78,11 @@
 }
 
 .api-key-form__new-token__title {
-  margin-bottom: #{10 / $base-font-size}rem;
-  font-size: #{18 / $base-font-size}rem;
+  margin-bottom: #{math.div(10, $base-font-size)}rem;
+  font-size: #{math.div(18, $base-font-size)}rem;
   font-weight: bold;
 }
 
 .api-key-form__new-token__info {
-  padding: #{10 / $base-font-size}rem 0;
+  padding: #{math.div(10, $base-font-size)}rem 0;
 }
diff --git a/client/styles/components/_asset-list.scss b/client/styles/components/_asset-list.scss
index 6f7c035993..7690424571 100644
--- a/client/styles/components/_asset-list.scss
+++ b/client/styles/components/_asset-list.scss
@@ -1,3 +1,5 @@
+@use "sass:math";
+
 .asset-table-container {
   overflow-y: auto;
   max-width: 100%;
@@ -11,13 +13,13 @@
   border-spacing: 0;
   position: relative;
   & .asset-table__dropdown-column {
-    width: #{60 / $base-font-size}rem;
+    width: #{math.div(60, $base-font-size)}rem;
     position: relative;
   }
 }
 
 .asset-table thead th {
-  height: #{32 / $base-font-size}rem;
+  height: #{math.div(32, $base-font-size)}rem;
   position: sticky;
   top: 0;
   @include themify() {
@@ -26,13 +28,13 @@
 }
 
 .asset-table thead th:nth-child(1){
-  padding-left: #{12 / $base-font-size}rem;
+  padding-left: #{math.div(12, $base-font-size)}rem;
 }
 
 .asset-table__row {
-  margin: #{10 / $base-font-size}rem;
-  height: #{72 / $base-font-size}rem;
-  font-size: #{16 / $base-font-size}rem;
+  margin: #{math.div(10, $base-font-size)}rem;
+  height: #{math.div(72, $base-font-size)}rem;
+  font-size: #{math.div(16, $base-font-size)}rem;
 }
 
 .asset-table__row:nth-child(odd) {
@@ -42,7 +44,7 @@
 }
 
 .asset-table__row > th:nth-child(1) {
-  padding-left: #{12 / $base-font-size}rem;
+  padding-left: #{math.div(12, $base-font-size)}rem;
 }
 
 .asset-table__row a {
@@ -52,7 +54,7 @@
 }
 
 .asset-table thead {
-  font-size: #{12 / $base-font-size}rem;
+  font-size: #{math.div(12, $base-font-size)}rem;
   @include themify() {
     color: getThemifyVariable('inactive-text-color')
   }
@@ -64,12 +66,12 @@
 
 .asset-table__empty {
   text-align: center;
-  font-size: #{16 / $base-font-size}rem;
-  padding: #{42 / $base-font-size}rem 0;
+  font-size: #{math.div(16, $base-font-size)}rem;
+  padding: #{math.div(42, $base-font-size)}rem 0;
 }
 
 .asset-table__total {
-  padding: 0 #{20 / $base-font-size}rem;
+  padding: 0 #{math.div(20, $base-font-size)}rem;
   position: sticky;
   top: 0; 
   @include themify() {
@@ -78,8 +80,8 @@
 }
 
 .asset-table__dropdown-button {
-  width:#{25 / $base-font-size}rem;
-  height:#{25 / $base-font-size}rem;
+  width:#{math.div(25, $base-font-size)}rem;
+  height:#{math.div(25, $base-font-size)}rem;
 
   @include themify() {
     & polygon, & path {
@@ -95,5 +97,5 @@
 }
 
 .asset-table__action-option {
-  font-size: #{12 / $base-font-size}rem;
+  font-size: #{math.div(12, $base-font-size)}rem;
 }
diff --git a/client/styles/components/_asset-size.scss b/client/styles/components/_asset-size.scss
index 2c4b062895..d664415c37 100644
--- a/client/styles/components/_asset-size.scss
+++ b/client/styles/components/_asset-size.scss
@@ -1,8 +1,10 @@
+@use "sass:math";
+
 .asset-size {
   position: relative;
   flex: 1;
-  margin-bottom: #{18 / $base-font-size}rem;
-  font-size: #{14 / $base-font-size}rem;
+  margin-bottom: #{math.div(18, $base-font-size)}rem;
+  font-size: #{math.div(14, $base-font-size)}rem;
 }
 
 .asset-size-bar {
@@ -12,7 +14,7 @@
   width: 200px;
   height: 20px;
 
-  border-radius: #{3 / $base-font-size}rem;
+  border-radius: #{math.div(3, $base-font-size)}rem;
   border: 1px solid transparent;
   overflow: hidden;
 
@@ -37,12 +39,12 @@
 
 .asset-current {
   position: absolute;
-  top: #{28 / $base-font-size}rem;
+  top: #{math.div(28, $base-font-size)}rem;
   left: 0;
 }
 
 .asset-max {
   position: absolute;
   top: 0;
-  left: #{210 / $base-font-size}rem;
+  left: #{math.div(210, $base-font-size)}rem;
 }
diff --git a/client/styles/components/_collection-create.scss b/client/styles/components/_collection-create.scss
index 63cd4546b1..093b96b84f 100644
--- a/client/styles/components/_collection-create.scss
+++ b/client/styles/components/_collection-create.scss
@@ -1,3 +1,5 @@
+@use "sass:math";
+
 .collection-create {
-  padding: #{24 / $base-font-size}rem;
+  padding: #{math.div(24, $base-font-size)}rem;
 }
diff --git a/client/styles/components/_collection.scss b/client/styles/components/_collection.scss
index a616154ba5..c5a977e430 100644
--- a/client/styles/components/_collection.scss
+++ b/client/styles/components/_collection.scss
@@ -1,5 +1,7 @@
+@use "sass:math";
+
 .collection-container {
-  padding: #{24 / $base-font-size}rem #{66 / $base-font-size}rem;
+  padding: #{math.div(24, $base-font-size)}rem #{math.div(66, $base-font-size)}rem;
   position: relative;
   flex: 1;
   overflow: hidden;
@@ -18,10 +20,10 @@
 }
 
 .collection-metadata {
-  max-width: #{1012 / $base-font-size}rem;
+  max-width: #{math.div(1012, $base-font-size)}rem;
   width: 100%;
   margin: 0 auto;
-  margin-bottom: #{24 / $base-font-size}rem;
+  margin-bottom: #{math.div(24, $base-font-size)}rem;
 }
 
 .collection-metadata__columns {
@@ -45,7 +47,7 @@
 }
 
 .collection-metadata__column--right > * {
-  margin-left: #{10 / $base-font-size}rem;
+  margin-left: #{math.div(10, $base-font-size)}rem;
 }
 
 .collection-metadata__name {
@@ -53,7 +55,7 @@
 }
 
 .collection-metadata__name .editable-input__label {
-  padding: 0.83333rem #{7 / $base-font-size}rem;
+  padding: 0.83333rem #{math.div(7, $base-font-size)}rem;
 }
 
 .collection-metadata__name,
@@ -63,18 +65,18 @@
 }
 
 .collection-metadata__user {
-  padding-top: #{8 / $base-font-size}rem;
+  padding-top: #{math.div(8, $base-font-size)}rem;
   font-size: 14px;
 }
 
 .collection-metadata--is-owner .collection-metadata__user {
-  padding-left: #{8 / $base-font-size}rem;
+  padding-left: #{math.div(8, $base-font-size)}rem;
 }
 
 .collection-metadata__description {
-  padding-top: #{8 / $base-font-size}rem;
+  padding-top: #{math.div(8, $base-font-size)}rem;
   text-align: left;
-  font-size: #{14 / $base-font-size}rem;
+  font-size: #{math.div(14, $base-font-size)}rem;
 }
 
 .collection-metadata__description .editable-input__label {
@@ -102,8 +104,8 @@
 
 .collection__share-dropdown {
   @extend %dropdown-open-right;
-  padding: #{20 / $base-font-size}rem;
-  width: #{350 / $base-font-size}rem;
+  padding: #{math.div(20, $base-font-size)}rem;
+  width: #{math.div(350, $base-font-size)}rem;
 }
 
 .collection-content {
@@ -111,7 +113,7 @@
   flex-direction: column;
   flex: 1;
   overflow: hidden;
-  max-width: #{1012 / $base-font-size}rem;
+  max-width: #{math.div(1012, $base-font-size)}rem;
   margin: 0 auto;
   width: 100%;
 
@@ -136,18 +138,18 @@
 
 .collection-empty-message {
   text-align: center;
-  font-size: #{16 / $base-font-size}rem;
+  font-size: #{math.div(16, $base-font-size)}rem;
 }
 
 .collection-row__action-column {
-  width: #{60 / $base-font-size}rem;
+  width: #{math.div(60, $base-font-size)}rem;
   position: relative;
 }
 
 .collection-row__remove-button {
   display: inline-block;
-  width:#{35 / $base-font-size}rem;
-  height:#{35 / $base-font-size}rem;
+  width:#{math.div(35, $base-font-size)}rem;
+  height:#{math.div(35, $base-font-size)}rem;
   @include icon();
   @include themify() {
     // icon graphic
@@ -161,8 +163,8 @@
     }
 
     & svg {
-      width:#{35 / $base-font-size}rem;
-      height:#{35 / $base-font-size}rem;
+      width:#{math.div(35, $base-font-size)}rem;
+      height:#{math.div(35, $base-font-size)}rem;
     }
 
     &:hover,
diff --git a/client/styles/components/_console-input.scss b/client/styles/components/_console-input.scss
index 84db1f3387..9efe857216 100644
--- a/client/styles/components/_console-input.scss
+++ b/client/styles/components/_console-input.scss
@@ -1,3 +1,5 @@
+@use "sass:math";
+
 .console__input {
   width: 100%;
   display: flex;
@@ -23,17 +25,17 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  margin-left: #{10 / $base-font-size}rem;
+  margin-left: #{math.div(10, $base-font-size)}rem;
 }
 
 .console__editor {
-  margin-left: #{15 / $base-font-size}rem;
+  margin-left: #{math.div(15, $base-font-size)}rem;
   flex: 1;
   & .CodeMirror {
     height: auto;
   }
   & .CodeMirror-lines {
-    padding-top: #{2 / $base-font-size}rem;
+    padding-top: #{math.div(2, $base-font-size)}rem;
   }
 }
 
diff --git a/client/styles/components/_console.scss b/client/styles/components/_console.scss
index d8882df67a..f37eb50d5f 100644
--- a/client/styles/components/_console.scss
+++ b/client/styles/components/_console.scss
@@ -1,20 +1,22 @@
+@use "sass:math";
+
 .preview-console {
 	@include themify() {
 		background: getThemifyVariable('console-background-color');
 		border-color: getThemifyVariable('ide-border-color');
 	}
-	border-left: #{1 / $base-font-size}rem solid;
-	border-right: #{1 / $base-font-size}rem solid;
+	border-left: math.div(1, $base-font-size)rem solid;
+	border-right: math.div(1, $base-font-size)rem solid;
 	width: 100%;
 	height: 100%;
 	z-index: 1000;
 	display: flex;
 	flex-direction: column;
 
-	& > {
-		position:relative;
-		text-align:left;
-	}
+	& > * {
+		position: relative;
+		text-align: left;
+	  }
 }
 
 .preview-console__header {
@@ -22,15 +24,15 @@
 		background-color: getThemifyVariable('console-header-background-color');
 		color: getThemifyVariable('console-header-color');
 	}
-	min-height: #{30 / $base-font-size}rem;
-	padding: #{5 / $base-font-size}rem;
+	min-height: #{math.div(30, $base-font-size)}rem;
+	padding: #{math.div(5, $base-font-size)}rem;
 	display: flex;
 	justify-content: space-between;
 	align-items: center;
 }
 
 .preview-console__header-title {
-	font-size: #{12 / $base-font-size}rem;
+	font-size: #{math.div(12, $base-font-size)}rem;
 	font-weight: normal;
 }
 
@@ -47,7 +49,7 @@
 }
 
 .preview-console__collapse {
-	padding-top: #{3 / $base-font-size}rem;
+	padding-top: #{math.div(3, $base-font-size)}rem;
 	@include icon();
 	@include themify() {
 		& g,
@@ -62,7 +64,7 @@
 }
 
 .preview-console__expand {
-	padding-top: #{3 / $base-font-size}rem;
+	padding-top: #{math.div(3, $base-font-size)}rem;
 	@include icon();
 	@include themify() {
 		& g,
@@ -92,7 +94,7 @@
 	}
 	background: transparent;
 	border: none;
-	padding-right: #{10 / $base-font-size}rem;
+	padding-right: #{math.div(10, $base-font-size)}rem;
 	.preview-console--collapsed & {
 		display: none;
 	}
@@ -101,5 +103,5 @@
 .preview-console__body {
 	display: flex;
 	flex-direction: column;
-	height: calc(100% - #{30 / $base-font-size}rem);
+	height: calc(100% - #{math.div(30, $base-font-size)}rem);
 }
diff --git a/client/styles/components/_copyable-input.scss b/client/styles/components/_copyable-input.scss
index 6ca78acbca..4db7690f9b 100644
--- a/client/styles/components/_copyable-input.scss
+++ b/client/styles/components/_copyable-input.scss
@@ -1,10 +1,12 @@
+@use "sass:math";
+
 .copyable-input__value-container {
   position: relative;
 }
 
 .copyable-input__value {
   width: 100%;
-  font-size: #{16 / $base-font-size}rem;
+  font-size: #{math.div(16, $base-font-size)}rem;
   .copyable-input--with-preview & {
     border-radius: 2px 0 0 2px;
   }
@@ -12,8 +14,8 @@
 
 .copyable-input__label {
   width: 100%;
-  font-size: #{12 / $base-font-size}rem;
-  padding-bottom: #{5 / $base-font-size}rem;
+  font-size: #{math.div(12, $base-font-size)}rem;
+  padding-bottom: #{math.div(5, $base-font-size)}rem;
   @include themify() {
     color: getThemifyVariable('inactive-text-color');
   }
@@ -25,7 +27,7 @@
 }
 
 .copyable-input {
-  padding-bottom: #{30 / $base-font-size}rem;
+  padding-bottom: #{math.div(30, $base-font-size)}rem;
   display: flex;
 }
 
@@ -39,7 +41,7 @@
     color: getThemifyVariable('button-hover-color');
   }
   font-family: Montserrat, sans-serif;
-  font-size: #{12 / $base-font-size}rem;
+  font-size: #{math.div(12, $base-font-size)}rem;
 }
 
 .tooltipped-n::before,
@@ -56,10 +58,10 @@
   @include themify() {
     align-self: flex-end;
     border-radius: 0 2px 2px 0;
-    padding: #{2 / $base-font-size}rem 0;
+    padding: #{math.div(2, $base-font-size)}rem 0;
   }
   & svg {
-    height: #{30 / $base-font-size}rem;
-    width: #{30 / $base-font-size}rem;
+    height: #{math.div(30, $base-font-size)}rem;
+    width: #{math.div(30, $base-font-size)}rem;
   }
 }
diff --git a/client/styles/components/_dashboard-header.scss b/client/styles/components/_dashboard-header.scss
index 7f10210d50..0d87354706 100644
--- a/client/styles/components/_dashboard-header.scss
+++ b/client/styles/components/_dashboard-header.scss
@@ -1,5 +1,7 @@
+@use "sass:math";
+
 .dashboard-header {
-  padding: #{24 / $base-font-size}rem #{66 / $base-font-size}rem;
+  padding: #{math.div(24, $base-font-size)}rem #{math.div(66, $base-font-size)}rem;
   position: relative;
   flex: 1;
   overflow: hidden;
@@ -12,16 +14,16 @@
     .dashboard-header__nav {
       display: flex;
       flex-direction: column;
-      padding: #{10 / $base-font-size}rem #{16 / $base-font-size}rem;
-      gap: #{10 / $base-font-size}rem;
+      padding: #{math.div(10, $base-font-size)}rem #{math.div(16, $base-font-size)}rem;
+      gap: #{math.div(10, $base-font-size)}rem;
 
       .dashboard-header__tabs {
         border-bottom: none;
-        padding-top: #{12 / $base-font-size}rem;
+        padding-top: #{math.div(12, $base-font-size)}rem;
       }
       .dashboard-header__tab__title {
         font-weight: bold;
-        font-size: #{15 / $base-font-size}rem;
+        font-size: #{math.div(15, $base-font-size)}rem;
 
         @include themify() {
           color: getThemifyVariable("inactive-text-color");
@@ -63,7 +65,7 @@
 }
 
 .dashboard-header__header {
-  max-width: #{1012 / $base-font-size}rem;
+  max-width: #{math.div(1012, $base-font-size)}rem;
   margin: 0 auto;
   width: 100%;
 }
@@ -77,7 +79,7 @@
 
 .dashboard-header__tabs {
   display: flex;
-  padding-top: #{24 / $base-font-size}rem;
+  padding-top: #{math.div(24, $base-font-size)}rem;
   width: 100%;
 
   @include themify() {
@@ -88,10 +90,10 @@
 .dashboard-header__tab {
   @include themify() {
     color: getThemifyVariable("inactive-text-color");
-    border-bottom: #{4 / $base-font-size}rem solid transparent;
+    border-bottom: #{math.div(4, $base-font-size)}rem solid transparent;
 
     padding: 0;
-    margin-right: #{26 / $base-font-size}rem;
+    margin-right: #{math.div(26, $base-font-size)}rem;
 
     &:hover,
     &:focus,
@@ -102,11 +104,11 @@
     }
 
     @media (max-width: 770px) {
-      margin-right: #{20 / $base-font-size}rem;
+      margin-right: #{math.div(20, $base-font-size)}rem;
     }
   }
 
-  font-size: #{12 / $base-font-size}rem;
+  font-size: #{math.div(12, $base-font-size)}rem;
 }
 
 .dashboard-header__tab--selected {
@@ -124,16 +126,16 @@
 
 .dashboard-header__tab__title > * {
   display: inline-block;
-  padding: 0 #{5 / $base-font-size}rem #{5 / $base-font-size}rem;
+  padding: 0 #{math.div(5, $base-font-size)}rem #{math.div(5, $base-font-size)}rem;
 }
 
 .dashboard-header__actions {
   display: flex;
   align-items: center;
-  padding: #{24 / $base-font-size}rem 0;
+  padding: #{math.div(24, $base-font-size)}rem 0;
   justify-content: space-between;
 }
 
 .dashboard-header__actions > *:not(:first-child) {
-  margin-left: #{15 / $base-font-size}rem;
+  margin-left: #{math.div(15, $base-font-size)}rem;
 }
diff --git a/client/styles/components/_editable-input.scss b/client/styles/components/_editable-input.scss
index 07e157b613..2c6589d385 100644
--- a/client/styles/components/_editable-input.scss
+++ b/client/styles/components/_editable-input.scss
@@ -1,3 +1,5 @@
+@use "sass:math";
+
 .editable-input {
   height: 70%;
   display: flex;
@@ -21,7 +23,7 @@ button.editable-input__label {
     }
   }
   cursor: pointer;
-  line-height: #{18 / $base-font-size}rem;
+  line-height: #{math.div(18, $base-font-size)}rem;
 
   font-size: unset;
   font-weight: unset;
diff --git a/client/styles/components/_editor.scss b/client/styles/components/_editor.scss
index 59446aeeed..56c4e50f09 100644
--- a/client/styles/components/_editor.scss
+++ b/client/styles/components/_editor.scss
@@ -1,26 +1,28 @@
+@use "sass:math";
+
 .CodeMirror {
   font-family: Inconsolata, monospace;
   height: 100%;
 }
 
 .CodeMirror-linenumbers {
-  padding-right: #{10 / $base-font-size}rem;
+  padding-right: #{math.div(10, $base-font-size)}rem;
 }
 
 .CodeMirror-linenumber {
-  width: #{32 / $base-font-size}rem;
-  left: #{-3 / $base-font-size}rem !important;
+  width: #{math.div(32, $base-font-size)}rem;
+  left: #{math.div(-3, $base-font-size)}rem !important;
   @include themify() {
     color: getThemifyVariable("inactive-text-color");
   }
 }
 
 .CodeMirror-lines {
-  padding-top: #{25 / $base-font-size}rem;
+  padding-top: #{math.div(25, $base-font-size)}rem;
 }
 
 pre.CodeMirror-line {
-  padding-left: #{5 / $base-font-size}rem;
+  padding-left: #{math.div(5, $base-font-size)}rem;
 }
 
 .CodeMirror-gutter-wrapper {
@@ -33,7 +35,7 @@ pre.CodeMirror-line {
 .CodeMirror-lint-marker-error,
 .CodeMirror-lint-marker-multiple {
   background-image: none;
-  width: #{49 / $base-font-size}rem;
+  width: #{math.div(49, $base-font-size)}rem;
   position: absolute;
   height: 100%;
   right: 100%;
@@ -55,7 +57,7 @@ pre.CodeMirror-line {
 
 .CodeMirror-gutter-elt:not(.CodeMirror-linenumber) {
   opacity: 0.2;
-  width: #{49 / $base-font-size}rem !important;
+  width: #{math.div(49, $base-font-size)}rem !important;
   height: 100%;
   left: 49px !important;
   // background-color: rgb(255, 95, 82);
@@ -78,7 +80,7 @@ pre.CodeMirror-line {
     border-color: getThemifyVariable("ide-border-color");
   }
   // left: 0 !important;
-  width: #{48 / $base-font-size}rem;
+  width: #{math.div(48, $base-font-size)}rem;
 }
 
 /*
@@ -89,8 +91,8 @@ pre.CodeMirror-line {
   position: fixed;
   top: 0;
   left: 50%;
-  margin-left: -#{552/2 / $base-font-size}rem;
-
+  margin-left: math.div(552 * 0.5, $base-font-size);
+  
   @media (max-width: 770px) {
     left: 0;
     right: 0;
@@ -103,7 +105,7 @@ pre.CodeMirror-line {
   width: 580px;
   font-family: Montserrat, sans-serif;
 
-  padding: #{8 / $base-font-size}rem #{10 / $base-font-size}rem #{5 / $base-font-size}rem #{9 / $base-font-size}rem;
+  padding: #{math.div(8, $base-font-size)}rem #{math.div(10, $base-font-size)}rem #{math.div(5, $base-font-size)}rem #{math.div(9, $base-font-size)}rem;
 
   border-radius: 2px;
 
@@ -121,7 +123,7 @@ pre.CodeMirror-line {
 }
 
 .Toggle-replace-btn-div {
-  height: #{40 / $base-font-size}rem;
+  height: #{math.div(40, $base-font-size)}rem;
   padding: 0;
 }
 
@@ -131,9 +133,9 @@ pre.CodeMirror-line {
 }
 
 .CodeMirror-search-results {
-  margin: 0 #{20 / $base-font-size}rem;
-  width: #{75 / $base-font-size}rem;
-  font-size: #{12 / $base-font-size}rem;
+  margin: 0 #{math.div(20, $base-font-size)}rem;
+  width: #{math.div(75, $base-font-size)}rem;
+  font-size: #{math.div(12, $base-font-size)}rem;
 }
 
 .CodeMirror-find-controls {
@@ -156,33 +158,33 @@ pre.CodeMirror-line {
 }
 .CodeMirror-replace-controls {
   display: flex;
-  margin-left: #{10 / $base-font-size}rem;
+  margin-left: #{math.div(10, $base-font-size)}rem;
 }
 
 .CodeMirror-replace-options {
-  width: #{552 / $base-font-size}rem;
-  height: #{65 / $base-font-size}rem;
+  width: #{math.div(552, $base-font-size)}rem;
+  height: #{math.div(65, $base-font-size)}rem;
   display: flex;
   justify-content: center;
   align-items: center;
 }
 .CodeMirror-replace-options button {
-  width: #{200 / $base-font-size}rem;
+  width: #{math.div(200, $base-font-size)}rem;
 }
 
 .CodeMirror-search-title {
   display: block;
-  margin-bottom: #{12 / $base-font-size}rem;
+  margin-bottom: #{math.div(12, $base-font-size)}rem;
 
-  font-size: #{21 / $base-font-size}rem;
+  font-size: #{math.div(21, $base-font-size)}rem;
   font-weight: bold;
 }
 
 .CodeMirror-search-field {
   display: block;
   width: 100%;
-  max-width: #{166 / $base-font-size}rem;
-  margin-bottom: #{4 / $base-font-size}rem;
+  max-width: #{math.div(166, $base-font-size)}rem;
+  margin-bottom: #{math.div(4, $base-font-size)}rem;
   @include themify() {
     color: getThemifyVariable("input-text-color");
     background-color: getThemifyVariable("input-secondary-background-color");
@@ -200,7 +202,7 @@ pre.CodeMirror-line {
 
 .CodeMirror-search-count {
   display: block;
-  height: #{20 / $base-font-size}rem;
+  height: #{math.div(20, $base-font-size)}rem;
   text-align: right;
 }
 
@@ -213,7 +215,7 @@ pre.CodeMirror-line {
   display: flex;
   justify-content: flex-end;
   align-items: center;
-  margin-left: #{10 / $base-font-size}rem;
+  margin-left: #{math.div(10, $base-font-size)}rem;
 
   @media (max-width: 579px) {
     display: none;
@@ -225,17 +227,17 @@ pre.CodeMirror-line {
 .CodeMirror-word-button {
   @include themify() {
     // @extend %button;
-    padding: #{2 / $base-font-size}rem #{7 / $base-font-size}rem;
+    padding: #{math.div(2, $base-font-size)}rem #{math.div(7, $base-font-size)}rem;
     border: 2px solid transparent;
     &:hover {
       border-color: getThemifyVariable("button-border-color");
     }
   }
-  width: #{35 / $base-font-size}rem;
-  height: #{35 / $base-font-size}rem;
+  width: #{math.div(35, $base-font-size)}rem;
+  height: #{math.div(35, $base-font-size)}rem;
 
   & + & {
-    margin-left: #{3 / $base-font-size}rem;
+    margin-left: #{math.div(3, $base-font-size)}rem;
   }
 
   word-break: keep-all;
@@ -266,13 +268,13 @@ pre.CodeMirror-line {
 }
 
 .CodeMirror-search-button {
-  margin-right: #{10 / $base-font-size}rem;
+  margin-right: #{math.div(10, $base-font-size)}rem;
 }
 
 .CodeMirror-search-match {
   background: gold;
-  border-top: #{1 / $base-font-size}rem solid orange;
-  border-bottom: #{1 / $base-font-size}rem solid orange;
+  border-top: #{math.div(1, $base-font-size)}rem solid orange;
+  border-bottom: #{math.div(1, $base-font-size)}rem solid orange;
   box-sizing: border-box;
   opacity: 0.5;
 }
@@ -354,7 +356,7 @@ pre.CodeMirror-line {
   vertical-align: middle;
   height: 0.85em;
   line-height: 0.7;
-  padding: 0 #{5 / $base-font-size}rem;
+  padding: 0 #{math.div(5, $base-font-size)}rem;
   font-family: serif;
 }
 
@@ -369,7 +371,7 @@ pre.CodeMirror-line {
 }
 
 .editor-holder {
-  height: calc(100% - #{29 / $base-font-size}rem);
+  height: calc(100% - #{math.div(29, $base-font-size)}rem);
   width: 100%;
   position: absolute;
   @include themify() {
@@ -381,23 +383,23 @@ pre.CodeMirror-line {
 }
 
 .editor__header {
-  height: #{29 / $base-font-size}rem;
+  height: #{math.div(29, $base-font-size)}rem;
 }
 
 .editor__file-name {
   @include themify() {
     color: getThemifyVariable("primary-text-color");
   }
-  height: #{29 / $base-font-size}rem;
-  padding-top: #{7 / $base-font-size}rem;
-  padding-left: #{56 / $base-font-size}rem;
-  font-size: #{12 / $base-font-size}rem;
+  height: #{math.div(29, $base-font-size)}rem;
+  padding-top: #{math.div(7, $base-font-size)}rem;
+  padding-left: #{math.div(56, $base-font-size)}rem;
+  font-size: #{math.div(12, $base-font-size)}rem;
   display: flex;
   justify-content: space-between;
 }
 
 .editor__unsaved-changes {
-  margin-left: #{2 / $base-font-size}rem;
+  margin-left: #{math.div(2, $base-font-size)}rem;
 }
 
 /** Inline abbreviation preview */
@@ -413,8 +415,8 @@ pre.CodeMirror-line {
   }
   & .CodeMirror {
     height: auto;
-    max-width: #{400 / $base-font-size}rem;
-    max-height: #{300 / $base-font-size}rem;
+    max-width: #{math.div(400, $base-font-size)}rem;
+    max-height: #{math.div(300, $base-font-size)}rem;
     border: none;
   }
 }
diff --git a/client/styles/components/_error-modal.scss b/client/styles/components/_error-modal.scss
index aac87d1b12..c834b68c2a 100644
--- a/client/styles/components/_error-modal.scss
+++ b/client/styles/components/_error-modal.scss
@@ -1,3 +1,5 @@
+@use "sass:math";
+
 .error-modal {
   @extend %modal;
   display: flex;
@@ -8,7 +10,7 @@
 .error-modal__header {
   display: flex;
   justify-content: space-between;
-  padding: #{20 / $base-font-size}rem;
+  padding: #{math.div(20, $base-font-size)}rem;
 }
 
 .error-modal__exit-button {
@@ -16,11 +18,11 @@
 }
 
 .error-modal__content {
-  padding: #{20 / $base-font-size}rem;
-  padding-top: #{40 / $base-font-size}rem;
-  padding-bottom: #{60 / $base-font-size}rem;
-  max-width: #{500 / $base-font-size}rem;
+  padding: #{math.div(20, $base-font-size)}rem;
+  padding-top: #{math.div(40, $base-font-size)}rem;
+  padding-bottom: #{math.div(60, $base-font-size)}rem;
+  max-width: #{math.div(500, $base-font-size)}rem;
   & p {
-    font-size: #{16 / $base-font-size}rem;
+    font-size: #{math.div(16, $base-font-size)}rem;
   }
 }
diff --git a/client/styles/components/_feedback.scss b/client/styles/components/_feedback.scss
index 8fad23ab38..47039b1dba 100644
--- a/client/styles/components/_feedback.scss
+++ b/client/styles/components/_feedback.scss
@@ -1,30 +1,32 @@
+@use "sass:math";
+
 .feedback__content {
   display: flex;
-  width: #{650 / $base-font-size}rem;
-  padding-top: #{17 / $base-font-size}rem;
-  padding-right: #{20 / $base-font-size}rem;
-  padding-bottom: #{20 / $base-font-size}rem;
-  padding-left: #{20 / $base-font-size}rem;
+  width: #{math.div(650, $base-font-size)}rem;
+  padding-top: #{math.div(17, $base-font-size)}rem;
+  padding-right: #{math.div(20, $base-font-size)}rem;
+  padding-bottom: #{math.div(20, $base-font-size)}rem;
+  padding-left: #{math.div(20, $base-font-size)}rem;
 }
 
 .feedback__content-pane {
   flex: 1;
   & + & {
-    margin-left: #{20 / $base-font-size}rem;
+    margin-left: #{math.div(20, $base-font-size)}rem;
   }
 }
 
 .feedback__content-pane-header {
-  margin-bottom: #{20 / $base-font-size}rem;
+  margin-bottom: #{math.div(20, $base-font-size)}rem;
 }
 
 .feedback__content-pane-copy {
-  margin-bottom: #{20 / $base-font-size}rem;
+  margin-bottom: #{math.div(20, $base-font-size)}rem;
 }
 
 .feedback__github-logo svg {
-  width: #{12 / $base-font-size}rem;
-  height: #{12 / $base-font-size}rem;
+  width: #{math.div(12, $base-font-size)}rem;
+  height: #{math.div(12, $base-font-size)}rem;
   @include themify() {
     fill: getThemifyVariable('inactive-text-color');
   }
diff --git a/client/styles/components/_form-container.scss b/client/styles/components/_form-container.scss
index 53835c3eed..d8e4f40cf1 100644
--- a/client/styles/components/_form-container.scss
+++ b/client/styles/components/_form-container.scss
@@ -1,3 +1,5 @@
+@use "sass:math";
+
 .form-container {
 	text-align: center;
 	display: flex;
@@ -22,7 +24,7 @@
 
 .form-container__header {
 	width: 100%;
-	padding: #{15 / $base-font-size}rem #{34 / $base-font-size}rem;
+	padding: #{math.div(15, $base-font-size)}rem #{math.div(34, $base-font-size)}rem;
 	display: flex;
 	justify-content: space-between;
 }
@@ -57,7 +59,7 @@
 }
 
 .form-container__divider {
-	padding: #{20 / $base-font-size}rem 0;
+	padding: #{math.div(20, $base-font-size)}rem 0;
 }
 
 .form-container__logo-button {
@@ -69,5 +71,5 @@
 }
 
 .form-container__stack > * + * {
-	margin-top: #{10 / $base-font-size}rem;
+	margin-top: #{math.div(10, $base-font-size)}rem;
 }
diff --git a/client/styles/components/_forms.scss b/client/styles/components/_forms.scss
index d5eca026d8..f6c2b6bfb9 100644
--- a/client/styles/components/_forms.scss
+++ b/client/styles/components/_forms.scss
@@ -1,8 +1,10 @@
+@use "sass:math";
+
 .form-error {
   display: block;
-  padding-top: #{4 / $base-font-size}rem;
-  width: #{300 / $base-font-size}rem;
-  font-size: #{12 / $base-font-size}rem;
+  padding-top: #{math.div(4, $base-font-size)}rem;
+  width: #{math.div(300, $base-font-size)}rem;
+  font-size: #{math.div(12, $base-font-size)}rem;
   text-align: left;
   @include themify() {
     color: getThemifyVariable("error-color");
@@ -10,7 +12,7 @@
 }
 
 .form > * + * {
-  margin-top: #{12 / $base-font-size}rem;
+  margin-top: #{math.div(12, $base-font-size)}rem;
 }
 
 .form--inline {
@@ -19,32 +21,32 @@
 }
 
 .form__cancel-button {
-  margin-top: #{10 / $base-font-size}rem;
-  font-size: #{12 / $base-font-size}rem;
+  margin-top: #{math.div(10, $base-font-size)}rem;
+  font-size: #{math.div(12, $base-font-size)}rem;
 }
 
 .form__navigation-options {
-  margin-top: #{16 / $base-font-size}rem;
-  font-size: #{12 / $base-font-size}rem;
+  margin-top: #{math.div(16, $base-font-size)}rem;
+  font-size: #{math.div(12, $base-font-size)}rem;
   @include themify() {
     color: getThemifyVariable("form-navigation-options-color");
   }
 
   @media (max-width: 550px) {
     text-align: center;
-    margin: #{12 / $base-font-size}rem;
+    margin: #{math.div(12, $base-font-size)}rem;
   }
 }
 
 .form__legend {
-  font-size: #{21 / $base-font-size}rem;
+  font-size: #{math.div(21, $base-font-size)}rem;
   font-weight: bold;
 }
 
 .form__label {
-  font-size: #{12 / $base-font-size}rem;
-  margin-top: #{25 / $base-font-size}rem;
-  margin-bottom: #{7 / $base-font-size}rem;
+  font-size: #{math.div(12, $base-font-size)}rem;
+  margin-top: #{math.div(25, $base-font-size)}rem;
+  margin-bottom: #{math.div(7, $base-font-size)}rem;
   display: block;
   @include themify() {
     color: getThemifyVariable("form-secondary-title-color");
@@ -57,9 +59,9 @@
 
 .form__input {
   max-width: 90vw;
-  width: #{360 / $base-font-size}rem;
-  height: #{40 / $base-font-size}rem;
-  font-size: #{16 / $base-font-size}rem;
+  width: #{math.div(360, $base-font-size)}rem;
+  height: #{math.div(40, $base-font-size)}rem;
+  font-size: #{math.div(16, $base-font-size)}rem;
   @include themify() {
     color: getThemifyVariable("form-input-text-color");
     background-color: getThemifyVariable("input-background-color");
@@ -78,7 +80,7 @@
 
 .form__context {
   text-align: left;
-  margin-top: #{15 / $base-font-size}rem;
+  margin-top: #{math.div(15, $base-font-size)}rem;
 }
 
 .form__status {
diff --git a/client/styles/components/_hints.scss b/client/styles/components/_hints.scss
index 4503a44f24..6c01abb721 100644
--- a/client/styles/components/_hints.scss
+++ b/client/styles/components/_hints.scss
@@ -1,3 +1,5 @@
+@use "sass:math";
+
 .CodeMirror-hints {
   position: absolute;
   z-index: 10;
@@ -7,8 +9,8 @@
   margin: 0;
   padding: 0;
 
-  box-shadow: 0 0 #{18 / $base-font-size}rem 0 rgba(0, 0, 0, 0.16);
-  border: #{1 / $base-font-size}rem solid #A6A6A6;
+  box-shadow: 0 0 #{math.div(18, $base-font-size)}rem 0 rgba(0, 0, 0, 0.16);
+  border: #{math.div(1, $base-font-size)}rem solid #A6A6A6;
 
   font-size: 100%;
   font-family: Inconsolata, monospace;
@@ -24,7 +26,7 @@
 
     .CodeMirror-hint {
       color: getThemifyVariable('hint-text-color');
-      border-bottom: #{1 / $base-font-size}rem solid getThemifyVariable('hint-item-border-bottom-color');
+      border-bottom: #{math.div(1, $base-font-size)}rem solid getThemifyVariable('hint-item-border-bottom-color');
     }
 
     .hint-name {
@@ -45,7 +47,7 @@
   
     .hint-type {
       color: getThemifyVariable('hint-type-text-color');
-      margin-right: #{10 / $base-font-size}rem;
+      margin-right: #{math.div(10, $base-font-size)}rem;
     }
   
     a {
@@ -57,8 +59,8 @@
       }
 
       &.focused-hint-link {
-        outline: #{3 / $base-font-size}rem solid getThemifyVariable('hint-arrow-focus-outline-color');
-        outline-offset: #{-3 / $base-font-size}rem;
+        outline: #{math.div(3, $base-font-size)}rem solid getThemifyVariable('hint-arrow-focus-outline-color');
+        outline-offset: #{math.div(-3, $base-font-size)}rem;
       }
     }
 
@@ -158,7 +160,7 @@
       top: 0;
       right: 0;
       height: 100%;
-      width: calc(2rem - #{1 / $base-font-size}rem);
+      width: calc(2rem - #{math.div(1, $base-font-size)}rem);
       margin: 0;
       padding-top: 0.4rem;
       font-size: 1.2rem;
diff --git a/client/styles/components/_keyboard-shortcuts.scss b/client/styles/components/_keyboard-shortcuts.scss
index 1b621d7b94..4d54a096be 100644
--- a/client/styles/components/_keyboard-shortcuts.scss
+++ b/client/styles/components/_keyboard-shortcuts.scss
@@ -1,8 +1,10 @@
+@use "sass:math";
+
 .keyboard-shortcuts {
-  padding: #{20 / $base-font-size}rem;
-  margin-right: #{20 / $base-font-size}rem;
-  padding-bottom: #{40 / $base-font-size}rem;
-  width: #{450 / $base-font-size}rem;
+  padding: #{math.div(20, $base-font-size)}rem;
+  margin-right: #{math.div(20, $base-font-size)}rem;
+  padding-bottom: #{math.div(40, $base-font-size)}rem;
+  width: #{math.div(450, $base-font-size)}rem;
   overflow-y: auto;
 }
 
@@ -14,7 +16,7 @@
 .keyboard-shortcut-item {
   display: flex;
   & + & {
-    margin-top: #{10 / $base-font-size}rem;
+    margin-top: #{math.div(10, $base-font-size)}rem;
   }
   align-items: baseline;
 }
@@ -22,8 +24,8 @@
 .keyboard-shortcut__command {
   font-weight: bold;
   text-align: right;
-  margin-right: #{10 / $base-font-size}rem;
-  padding: #{3 / $base-font-size}rem;
+  margin-right: #{math.div(10, $base-font-size)}rem;
+  padding: #{math.div(3, $base-font-size)}rem;
   @include themify {
     border: 1px solid getThemifyVariable("button-border-color");
     border-radius: 3px;
@@ -31,20 +33,20 @@
 }
 
 .keyboard-shortcuts__title {
-  padding-bottom: #{10 / $base-font-size}rem;
+  padding-bottom: #{math.div(10, $base-font-size)}rem;
 }
 
 .keyboard-shortcuts__description {
-  padding-bottom: #{10 / $base-font-size}rem;
+  padding-bottom: #{math.div(10, $base-font-size)}rem;
 }
 
 .keyboard-shortcuts__list:not(:last-of-type) {
-  padding-bottom: #{10 / $base-font-size}rem;
+  padding-bottom: #{math.div(10, $base-font-size)}rem;
 }
 
 .keyboard-shortcuts__title:not(:first-of-type) {
   @include themify() {
     border-top: 1px dashed getThemifyVariable("button-border-color");
-    padding-top: #{10 / $base-font-size}rem;
+    padding-top: #{math.div(10, $base-font-size)}rem;
   }
 }
diff --git a/client/styles/components/_loader.scss b/client/styles/components/_loader.scss
index 31af13942d..b49160ec63 100644
--- a/client/styles/components/_loader.scss
+++ b/client/styles/components/_loader.scss
@@ -1,3 +1,5 @@
+@use "sass:math";
+
 .loader-container {
 	width: 100%;
 	height: 100%;
@@ -11,8 +13,8 @@
 
 
 .loader {
-	width: #{80 / $base-font-size }rem;
-	height: #{80 /  $base-font-size}rem;
+	width: #{math.div(80, $base-font-size) }rem;
+	height: #{math.div(80, $base-font-size)}rem;
 
 	position: relative;
 }
diff --git a/client/styles/components/_modal.scss b/client/styles/components/_modal.scss
index 752b443462..6d64b9974f 100644
--- a/client/styles/components/_modal.scss
+++ b/client/styles/components/_modal.scss
@@ -1,6 +1,8 @@
+@use "sass:math";
+
 .modal {
   position: absolute;
-  top: #{60 / $base-font-size}rem;
+  top: #{math.div(60, $base-font-size)}rem;
   right: 50%;
   transform: translate(50%, 0);
   z-index: 100;
@@ -9,9 +11,9 @@
 
 .modal-content {
   @extend %modal;
-  min-height: #{150 / $base-font-size}rem;
-  width: #{500 / $base-font-size}rem;
-  padding: #{20 / $base-font-size}rem;
+  min-height: #{math.div(150, $base-font-size)}rem;
+  width: #{math.div(500, $base-font-size)}rem;
+  padding: #{math.div(20, $base-font-size)}rem;
   .modal--reduced & {
     //min-height: #{150 / $base-font-size}rem;
   }
@@ -19,7 +21,7 @@
 
 .modal-content-folder {
   @extend .modal-content;
-  height: #{150 / $base-font-size}rem;
+  height: #{math.div(150, $base-font-size)}rem;
 }
 
 .modal__exit-button {
@@ -29,7 +31,7 @@
 .modal__header {
   display: flex;
   justify-content: space-between;
-  margin-bottom: #{20 / $base-font-size}rem;
+  margin-bottom: #{math.div(20, $base-font-size)}rem;
 }
 
 .new-folder-form__input-wrapper, .new-file-form__input-wrapper {
@@ -41,11 +43,11 @@
 }
 
 .new-file-form__name-input, .new-folder-form__name-input {
-  margin-right: #{10 / $base-font-size}rem;
+  margin-right: #{math.div(10, $base-font-size)}rem;
   flex: 1;
 }
 
 .modal__divider {
   text-align: center;
-  margin: #{20 / $base-font-size}rem 0;
+  margin: #{math.div(20, $base-font-size)}rem 0;
 }
diff --git a/client/styles/components/_nav.scss b/client/styles/components/_nav.scss
index 2d3e25844f..0cd1318b04 100644
--- a/client/styles/components/_nav.scss
+++ b/client/styles/components/_nav.scss
@@ -1,5 +1,7 @@
+@use "sass:math";
+
 .nav {
-  height: #{42 / $base-font-size}rem;
+  height: #{math.div(42, $base-font-size)}rem;
   display: flex;
   flex-direction: row;
   justify-content: space-between;
@@ -44,12 +46,12 @@
   height: 100%;
 
   & button {
-    padding: #{12 / $base-font-size}rem #{10 / $base-font-size}rem;
+    padding: #{math.div(12, $base-font-size)}rem #{math.div(10, $base-font-size)}rem;
   }
 }
 
 .nav__item--no-icon {
-  padding-left: #{15 / $base-font-size}rem;
+  padding-left: #{math.div(15, $base-font-size)}rem;
 }
 
 .nav__item-header-triangle polygon,
@@ -92,7 +94,7 @@
 }
 
 .nav__item-header-triangle {
-	margin-left: #{5 / $base-font-size}rem;
+	margin-left: #{math.div(5, $base-font-size)}rem;
 }
 
 .nav__dropdown {
@@ -102,7 +104,7 @@
 }
 
 .nav__item-header-triangle {
-	margin-left: #{5 / $base-font-size}rem;
+	margin-left: #{math.div(5, $base-font-size)}rem;
 }
 
 .nav__dropdown {
@@ -114,17 +116,17 @@
 }
 
 .nav__items-right {
-  padding-right: #{20 / $base-font-size}rem;
+  padding-right: #{math.div(20, $base-font-size)}rem;
 
   & .nav__dropdown {
-    width: #{125 / $base-font-size}rem;
+    width: #{math.div(125, $base-font-size)}rem;
   }
 }
 
 .nav__item-spacer {
   @include themify() {
     color: map-get($theme-map, 'inactive-text-color');
-    margin-left: #{8 / $base-font-size}rem;
+    margin-left: #{math.div(8, $base-font-size)}rem;
   }
 }
 
@@ -135,7 +137,7 @@
 }
 
 .nav__auth-button {
-  padding: #{10 / $base-font-size}rem;
+  padding: #{math.div(10, $base-font-size)}rem;
 }
 
 // .nav__dropdown button {
@@ -155,8 +157,8 @@
 
 .nav__item-logo {
   position: relative;
-  height: #{42 / $base-font-size}rem;
-  width: #{56 / $base-font-size}rem;
+  height: #{math.div(42, $base-font-size)}rem;
+  width: #{math.div(56, $base-font-size)}rem;
 
   & span {
     position: absolute;
@@ -178,7 +180,7 @@
 }
 
 .nav__keyboard-shortcut {
-  font-size: #{12 / $base-font-size}rem;
+  font-size: #{math.div(12, $base-font-size)}rem;
   font-family: Inconsololata, monospace;
 
   @include themify() {
@@ -199,7 +201,7 @@
       fill: getThemifyVariable('inactive-text-color');
     }
   }
-  margin-right: #{5 / $base-font-size}rem;
+  margin-right: #{math.div(5, $base-font-size)}rem;
 }
 
 .nav__back-link {
diff --git a/client/styles/components/_new-password.scss b/client/styles/components/_new-password.scss
index fcd3a83931..735e0ff76d 100644
--- a/client/styles/components/_new-password.scss
+++ b/client/styles/components/_new-password.scss
@@ -1,3 +1,5 @@
+@use "sass:math";
+
 .new-password-form {
   .new-password--invalid & {
     display: none;
@@ -8,8 +10,8 @@
   display: none;
   .new-password--invalid & {
     display: block;
-    margin-top: #{40 / $base-font-size}rem;
-    margin-bottom: #{80 / $base-font-size}rem;
+    margin-top: #{math.div(40, $base-font-size)}rem;
+    margin-bottom: #{math.div(80, $base-font-size)}rem;
     @include themify() {
       color: getThemifyVariable('form-navigation-options-color');
     }
diff --git a/client/styles/components/_overlay.scss b/client/styles/components/_overlay.scss
index 089fa4d824..8c6c2da757 100644
--- a/client/styles/components/_overlay.scss
+++ b/client/styles/components/_overlay.scss
@@ -1,3 +1,5 @@
+@use "sass:math";
+
 .overlay {
   position: fixed;
   top: 0;
@@ -25,7 +27,7 @@
   max-height: 80%;
   max-width: 80%;
   position: relative;
-  padding-bottom: #{25 / $base-font-size}rem;
+  padding-bottom: #{math.div(25, $base-font-size)}rem;
 
   @media (max-width: 650px) {
     max-width: 100%;
@@ -38,7 +40,7 @@
 .overlay__header {
   display: flex;
   justify-content: space-between;
-  padding: #{20 / $base-font-size}rem;
+  padding: #{math.div(20, $base-font-size)}rem;
 }
 
 .overlay__actions {
@@ -46,12 +48,12 @@
 }
 
 .overlay__title {
-  font-size: #{21 / $base-font-size}rem;
+  font-size: #{math.div(21, $base-font-size)}rem;
 }
 
 .overlay__close-button {
   @include icon();
-  padding: #{3 / $base-font-size}rem 0 #{3 / $base-font-size}rem #{10 / $base-font-size}rem;
+  padding: #{math.div(3, $base-font-size)}rem 0 #{math.div(3, $base-font-size)}rem #{math.div(10, $base-font-size)}rem;
 }
 
 /* Fixed height overlay */
diff --git a/client/styles/components/_p5-contrast-codemirror-theme.scss b/client/styles/components/_p5-contrast-codemirror-theme.scss
index b5ae00d991..6aae60e051 100644
--- a/client/styles/components/_p5-contrast-codemirror-theme.scss
+++ b/client/styles/components/_p5-contrast-codemirror-theme.scss
@@ -10,6 +10,8 @@
 //light gray: #f4f4f4
 //dark gray: #b5b5b5
 
+@use "sass:math";
+
 $p5-contrast-black: #1C1C1C;
 $p5-contrast-gray: #A0A0A0;
 $p5-contrast-white: #FDFDFD;
@@ -143,5 +145,5 @@ $p5-contrast-activeline: #999999;
 
 .cm-s-p5-contrast .cm-searching.CodeMirror-selectedtext {
   // background-color: $medium-dark;
-  outline: #{1 / $base-font-size}rem solid $p5-contrast-white;
+  outline: #{math.div(1, $base-font-size)}rem solid $p5-contrast-white;
 }
diff --git a/client/styles/components/_preferences.scss b/client/styles/components/_preferences.scss
index 5decad9abe..8b6193f2d5 100644
--- a/client/styles/components/_preferences.scss
+++ b/client/styles/components/_preferences.scss
@@ -1,16 +1,17 @@
+@use "sass:math";
+
 .preferences {
   width: 100%;
-  width: #{640 / $base-font-size}rem;
+  width: #{math.div(640, $base-font-size)}rem;
   max-width: 100%;
   max-height: 100%;
   z-index: 9999;
-  padding: 0 #{20 / $base-font-size}rem #{2 / $base-font-size}rem #{20 /
-    $base-font-size}rem;
+  padding: 0 #{math.div(20, $base-font-size)}rem #{math.div(2, $base-font-size)}rem #{math.div(20, $base-font-size)}rem;
   display: flex;
   flex-direction: column;
   outline: none;
-  height: calc(80vh - #{65 / $base-font-size}rem);
-  max-height: #{460 / $base-font-size}rem;
+  height: calc(80vh - #{math.div(65, $base-font-size)}rem);
+  max-height: #{math.div(460, $base-font-size)}rem;
   & .react-tabs {
     max-height: 100%;
     display: flex;
@@ -25,13 +26,13 @@
 .preference__plus-button {
   @include themify() {
     @extend %preferences-button;
-    width: #{32 / $base-font-size}rem;
-    height: #{32 / $base-font-size}rem;
-    margin-left: #{6 / $base-font-size}rem;
-    margin-right: #{10 / $base-font-size}rem;
-    line-height: #{40 / $base-font-size}rem;
+    width: #{math.div(32, $base-font-size)}rem;
+    height: #{math.div(32, $base-font-size)}rem;
+    margin-left: #{math.div(6, $base-font-size)}rem;
+    margin-right: #{math.div(10, $base-font-size)}rem;
+    line-height: #{math.div(40, $base-font-size)}rem;
     & svg {
-      width: #{10 / $base-font-size}rem;
+      width: #{math.div(10, $base-font-size)}rem;
     }
   }
 }
@@ -39,7 +40,7 @@
 .preference {
   display: flex;
   flex-wrap: wrap;
-  padding-bottom: #{12 / $base-font-size}rem;
+  padding-bottom: #{math.div(12, $base-font-size)}rem;
   & + & {
     @include themify() {
       border-top: 1px dashed getThemifyVariable("button-border-color");
@@ -49,9 +50,9 @@
 
 .preference__title {
   width: 100%;
-  font-size: #{16 / $base-font-size}rem;
-  margin-top: #{13 / $base-font-size}rem;
-  margin-bottom: #{7 / $base-font-size}rem;
+  font-size: #{math.div(16, $base-font-size)}rem;
+  margin-top: #{math.div(13, $base-font-size)}rem;
+  margin-bottom: #{math.div(7, $base-font-size)}rem;
 }
 
 .preference__subtitle {
@@ -59,13 +60,13 @@
     color: getThemifyVariable("inactive-text-color");
   }
   width: 100%;
-  margin-bottom: #{10 / $base-font-size}rem;
+  margin-bottom: #{math.div(10, $base-font-size)}rem;
   margin-top: 0;
 }
 
 .preference__value {
   @include themify() {
-    border: #{1 / $base-font-size}rem solid
+    border: #{math.div(1, $base-font-size)}rem solid
       getThemifyVariable("button-border-color");
     // background-color: getThemifyVariable("button-background-color");
     color: getThemifyVariable("input-text-color");
@@ -74,11 +75,11 @@
   text-align: center;
   border-radius: 0%;
   outline: none;
-  width: #{44 / $base-font-size}rem;
-  height: #{40 / $base-font-size}rem;
-  margin: 0 #{20 / $base-font-size}rem;
+  width: #{math.div(44, $base-font-size)}rem;
+  height: #{math.div(40, $base-font-size)}rem;
+  margin: 0 #{math.div(20, $base-font-size)}rem;
   padding: 0;
-  font-size: #{16 / $base-font-size}rem;
+  font-size: #{math.div(16, $base-font-size)}rem;
   font-family: Inconsolata;
 }
 
@@ -89,14 +90,14 @@
       color: getThemifyVariable("heavy-text-color");
     }
   }
-  margin: #{-15 / $base-font-size}rem 0 0 #{-5 / $base-font-size}rem;
-  font-size: #{9 / $base-font-size}rem;
-  width: #{44 / $base-font-size}rem;
+  margin: #{math.div(-15, $base-font-size)}rem 0 0 #{math.div(-5, $base-font-size)}rem;
+  font-size: #{math.div(9, $base-font-size)}rem;
+  width: #{math.div(44, $base-font-size)}rem;
 }
 
 .react-tabs__tab--selected {
   @include themify() {
-    border-bottom: #{4 / $base-font-size}rem solid
+    border-bottom: #{math.div(4, $base-font-size)}rem solid
       getThemifyVariable("button-background-hover-color");
   }
 }
@@ -112,13 +113,13 @@
   color: black;
   display: flex;
   align-items: center;
-  border-bottom: #{4 / $base-font-size}rem solid transparent;
+  border-bottom: #{math.div(4, $base-font-size)}rem solid transparent;
   & + & {
-    margin-left: #{45 / $base-font-size}rem;
+    margin-left: #{math.div(45, $base-font-size)}rem;
   }
   &:hover {
     @include themify() {
-      border-bottom: #{4 / $base-font-size}rem solid
+      border-bottom: #{math.div(4, $base-font-size)}rem solid
         getThemifyVariable("button-background-hover-color");
     }
   }
@@ -137,7 +138,7 @@ input[type="number"]::-webkit-outer-spin-button {
 .preference__option {
   @include themify() {
     @extend %preference-option;
-    margin-right: #{25 / $base-font-size}rem;
+    margin-right: #{math.div(25, $base-font-size)}rem;
   }
   display: flex;
   flex-wrap: wrap;
@@ -155,7 +156,7 @@ input[type="number"]::-webkit-outer-spin-button {
       color: getThemifyVariable("button-background-hover-color");
     }
   }
-  margin-left: #{30 / $base-font-size}rem;
+  margin-left: #{math.div(30, $base-font-size)}rem;
 }
 
 .preference__options {
@@ -176,6 +177,6 @@ input[type="number"]::-webkit-outer-spin-button {
 }
 
 .preference__option.preference__canvas:not(:last-child) {
-  padding-right: #{14 / $base-font-size}rem;
+  padding-right: #{math.div(14, $base-font-size)}rem;
 }
 
diff --git a/client/styles/components/_preview-frame.scss b/client/styles/components/_preview-frame.scss
index 9de4ec7d8c..f56a0d9d27 100644
--- a/client/styles/components/_preview-frame.scss
+++ b/client/styles/components/_preview-frame.scss
@@ -1,3 +1,5 @@
+@use "sass:math";
+
 .preview-frame-holder {
   display: flex;
   flex-direction: column;
@@ -13,17 +15,17 @@
 }
 
 .preview-frame__header {
-  height: #{29 / $base-font-size}rem;
+  height: #{math.div(29, $base-font-size)}rem;
 }
 
 .preview-frame__title {
   @include themify() {
     color: getThemifyVariable('secondary-text-color');
   }
-  height: #{29 / $base-font-size}rem;
-  padding-top: #{7 / $base-font-size}rem;
-  padding-left: #{5 / $base-font-size}rem;
-  font-size: #{12 / $base-font-size}rem;
+  height: #{math.div(29, $base-font-size)}rem;
+  padding-top: #{math.div(7, $base-font-size)}rem;
+  padding-left: #{math.div(5, $base-font-size)}rem;
+  font-size: #{math.div(12, $base-font-size)}rem;
   font-weight: normal;
 }
 
diff --git a/client/styles/components/_preview-nav.scss b/client/styles/components/_preview-nav.scss
index 47b39437f4..82cb626cc5 100644
--- a/client/styles/components/_preview-nav.scss
+++ b/client/styles/components/_preview-nav.scss
@@ -1,7 +1,9 @@
+@use "sass:math";
+
 .preview-nav__editor-svg {
   & svg {
-    width: #{22 / $base-font-size}rem;
-    height: #{22 / $base-font-size}rem;
+    width: #{math.div(22, $base-font-size)}rem;
+    height: #{math.div(22, $base-font-size)}rem;
     @include themify() {
         fill: getThemifyVariable('button-nav-inactive-color');
     }
@@ -15,6 +17,6 @@
 
 .preview-nav {
   .nav__item {
-    margin-left: #{5 / $base-font-size}rem;
+    margin-left: #{math.div(5, $base-font-size)}rem;
   }
 }
diff --git a/client/styles/components/_quick-add.scss b/client/styles/components/_quick-add.scss
index 70a097fa1e..1a47b992c5 100644
--- a/client/styles/components/_quick-add.scss
+++ b/client/styles/components/_quick-add.scss
@@ -1,3 +1,5 @@
+@use "sass:math";
+
 .quick-add {
   width: auto;
   overflow-y: auto;
@@ -10,8 +12,8 @@
 .quick-add__item {
   display: flex;
   align-items: center;
-  height: #{64 / $base-font-size}rem;
-  padding-right: #{24 / $base-font-size}rem;
+  height: #{math.div(64, $base-font-size)}rem;
+  padding-right: #{math.div(24, $base-font-size)}rem;
 
   button, a {
     @include themify() {
@@ -37,9 +39,9 @@
 
 .quick-add__icon {
   display: inline-block;
-  margin-right:#{15 / $base-font-size}rem;
-  width:#{35 / $base-font-size}rem;
-  height:#{35 / $base-font-size}rem;
+  margin-right:#{math.div(15, $base-font-size)}rem;
+  width:#{math.div(35, $base-font-size)}rem;
+  height:#{math.div(35, $base-font-size)}rem;
   @include icon();
   @include themify() {
     // icon graphic
@@ -53,8 +55,8 @@
     }
 
     & svg {
-      width:#{35 / $base-font-size}rem;
-      height:#{35 / $base-font-size}rem;
+      width:#{math.div(35, $base-font-size)}rem;
+      height:#{math.div(35, $base-font-size)}rem;
     }
   }
 }
diff --git a/client/styles/components/_reset-password.scss b/client/styles/components/_reset-password.scss
index 47109a3af9..de0af012f2 100644
--- a/client/styles/components/_reset-password.scss
+++ b/client/styles/components/_reset-password.scss
@@ -1,14 +1,16 @@
+@use "sass:math";
+
 .reset-password__submitted {
-  width: #{360 / $base-font-size}rem;
+  width: #{math.div(360, $base-font-size)}rem;
   display: none;
   text-align: left;
-  font-size: #{12 / $base-font-size}rem;
-  margin-top: #{10 / $base-font-size}rem;
+  font-size: #{math.div(12, $base-font-size)}rem;
+  margin-top: #{math.div(10, $base-font-size)}rem;
   @include themify() {
     color: getThemifyVariable('form-navigation-options-color');
   }
-  padding-right: #{30 / $base-font-size}rem;
-  padding-left: #{39 / $base-font-size}rem;
+  padding-right: #{math.div(30, $base-font-size)}rem;
+  padding-left: #{math.div(39, $base-font-size)}rem;
   .reset-password--submitted & {
     display: block;
   }
diff --git a/client/styles/components/_searchbar.scss b/client/styles/components/_searchbar.scss
index 962542d559..78e065ab41 100644
--- a/client/styles/components/_searchbar.scss
+++ b/client/styles/components/_searchbar.scss
@@ -1,14 +1,16 @@
+@use "sass:math";
+
 .searchbar {
   position: relative;
   display: flex;
 }
 
 .searchbar__input {
-  width: #{240 / $base-font-size}rem;
-  height: #{36 / $base-font-size}rem;
+  width: #{math.div(240, $base-font-size)}rem;
+  height: #{math.div(36, $base-font-size)}rem;
   border: solid 0.5px;
-  padding-left: #{36 / $base-font-size}rem;
-  padding-right: #{38 / $base-font-size}rem;
+  padding-left: #{math.div(36, $base-font-size)}rem;
+  padding-right: #{math.div(38, $base-font-size)}rem;
   @include themify() {
     border-color: getThemifyVariable('input-border-color');
     background-color: getThemifyVariable('input-background-color');
@@ -17,8 +19,8 @@
 
 div.searchbar__button {
   background-color: unset;
-  width: #{31 / $base-font-size}rem;
-  height: #{36 / $base-font-size}rem;
+  width: #{math.div(31, $base-font-size)}rem;
+  height: #{math.div(36, $base-font-size)}rem;
   position: absolute;
   display: flex;
   justify-content: center;
@@ -34,10 +36,10 @@ div.searchbar__button {
 .searchbar__icon {
   display: inline-block;
   & svg {
-    width: #{22 / $base-font-size}rem;
-    height: #{27 / $base-font-size}rem;
+    width: #{math.div(22, $base-font-size)}rem;
+    height: #{math.div(27, $base-font-size)}rem;
     transform: scaleX(-1);
-    padding-top: #{3 / $base-font-size}rem;
+    padding-top: #{math.div(3, $base-font-size)}rem;
   }
   & path {
     @include themify() {
@@ -48,13 +50,13 @@ div.searchbar__button {
 
 .searchbar__clear-button {
   font-weight: bold;
-  font-size: #{10 / $base-font-size}rem;
+  font-size: #{math.div(10, $base-font-size)}rem;
   text-align: center;
   border-radius: 2px;
   align-self: center;
   position: absolute;
-  padding: #{3 / $base-font-size}rem #{4 / $base-font-size}rem;
-  right: #{7 / $base-font-size}rem;
+  padding: #{math.div(3, $base-font-size)}rem #{math.div(4, $base-font-size)}rem;
+  right: #{math.div(7, $base-font-size)}rem;
   @include themify() {
     color: getThemifyVariable('primary-text-color');
     background-color: getThemifyVariable('search-clear-background-color');
diff --git a/client/styles/components/_share.scss b/client/styles/components/_share.scss
index 8004ac5b60..074fa22f2c 100644
--- a/client/styles/components/_share.scss
+++ b/client/styles/components/_share.scss
@@ -1,13 +1,15 @@
+@use "sass:math";
+
 .share-modal {
-  padding: #{20 / $base-font-size}rem;
+  padding: #{math.div(20, $base-font-size)}rem;
   padding-top: 0;
-  width: #{500 / $base-font-size}rem;
+  width: #{math.div(500, $base-font-size)}rem;
   max-width: 100%;
 }
 
 .share-modal__project-name {
-  padding-bottom: #{30 / $base-font-size}rem;
-  font-size: #{16 / $base-font-size}rem;
+  padding-bottom: #{math.div(30, $base-font-size)}rem;
+  font-size: #{math.div(16, $base-font-size)}rem;
 }
 
 .share-modal__header {
@@ -19,5 +21,5 @@
   width: 100%;
   display: flex;
   flex-wrap: wrap;
-  padding: #{10 / $base-font-size}rem 0;
+  padding: #{math.div(10, $base-font-size)}rem 0;
 }
\ No newline at end of file
diff --git a/client/styles/components/_sidebar.scss b/client/styles/components/_sidebar.scss
index 1e398fe875..1f1d5972e6 100644
--- a/client/styles/components/_sidebar.scss
+++ b/client/styles/components/_sidebar.scss
@@ -1,19 +1,21 @@
+@use "sass:math";
+
 .sidebar {
   display: flex;
   flex-flow: column;
 }
 
 .sidebar__header {
-  padding: #{8 / $base-font-size}rem #{12 / $base-font-size}rem;
+  padding: #{math.div(8, $base-font-size)}rem #{math.div(12, $base-font-size)}rem;
   display: flex;
   justify-content: space-between;
   align-items: center;
-  min-height: #{29 / $base-font-size}rem;
+  min-height: #{math.div(29, $base-font-size)}rem;
   position: relative;
 }
 
 .sidebar__title {
-  font-size: #{16 / $base-font-size}rem;
+  font-size: #{math.div(16, $base-font-size)}rem;
   font-weight: 500;
   display: inline-block;
   .sidebar--contracted & {
@@ -24,13 +26,13 @@
 }
 
 .sidebar__add {
-  padding: #{2 / $base-font-size}rem;
+  padding: #{math.div(2, $base-font-size)}rem;
   display: flex;
   align-items: center;
   justify-content: center;
   & svg {
-    width: #{18 / $base-font-size}rem;
-    height: #{18 / $base-font-size}rem;
+    width: #{math.div(18, $base-font-size)}rem;
+    height: #{math.div(18, $base-font-size)}rem;
   }
   @include themify() {
     background-color: getThemifyVariable('ide-border-color');
@@ -54,7 +56,7 @@
 .sidebar__root-item {
   position: relative;
   overflow-y: auto;
-  padding-top: #{6 / $base-font-size}rem;
+  padding-top: #{math.div(6, $base-font-size)}rem;
   flex: 1 1 auto;
   @media (min-width: 770px) {
     @include themify() {
@@ -69,11 +71,11 @@
 .file-item__children {
   display: flex;
   flex-direction: column;
-  gap: #{4 / $base-font-size}rem;
+  gap: #{math.div(4, $base-font-size)}rem;
 }
 
 .sidebar__file-item {
-  font-size: #{12 / $base-font-size}rem;
+  font-size: #{math.div(12, $base-font-size)}rem;
   cursor: pointer;
   position: relative;
   @include themify() {
@@ -90,7 +92,7 @@
   display: flex;
   align-items: center;
   > button {
-    padding-left: #{1 / $base-font-size}rem;
+    padding-left: #{math.div(1, $base-font-size)}rem;
   }
 }
 
@@ -100,15 +102,15 @@
 .file-item__spacer {
   flex-shrink: 0;
   .sidebar__file-item & {
-    width: #{19 / $base-font-size}rem;
+    width: #{math.div(19, $base-font-size)}rem;
     .sidebar__file-item & {
-      width: #{39 / $base-font-size}rem;
+      width: #{math.div(39, $base-font-size)}rem;
       .sidebar__file-item & {
-        width: #{59 / $base-font-size}rem;
+        width: #{math.div(59, $base-font-size)}rem;
         .sidebar__file-item & {
-          width: #{79 / $base-font-size}rem;
+          width: #{math.div(79, $base-font-size)}rem;
           .sidebar__file-item & {
-            width: #{99 / $base-font-size}rem;
+            width: #{math.div(99, $base-font-size)}rem;
           }
         }
       }
@@ -133,7 +135,7 @@
   overflow-x: hidden;
   white-space: nowrap;
   text-overflow: ellipsis;
-  min-width: #{7 / $base-font-size}rem;
+  min-width: #{math.div(7, $base-font-size)}rem;
   white-space: pre;
 }
 
@@ -141,16 +143,16 @@
   display: flex;
   width: 100%;
   overflow: hidden;
-  min-width: #{50 / $base-font-size}rem;
+  min-width: #{math.div(50, $base-font-size)}rem;
   white-space: nowrap;
   text-align: left;
 }
 
 .sidebar__file-item-name {
-  padding: #{4 / $base-font-size}rem 0;
-  padding-right: #{25 / $base-font-size}rem;
+  padding: #{math.div(4, $base-font-size)}rem 0;
+  padding-right: #{math.div(25, $base-font-size)}rem;
   font-family: Inconsolata, monospace;
-  font-size: #{15 / $base-font-size}rem;
+  font-size: #{math.div(15, $base-font-size)}rem;
   overflow: hidden;
   .sidebar__file-item--editing & {
     display: none;
@@ -170,11 +172,11 @@
 }
 
 .sidebar__file-item-show-options {
-  width: #{20 / $base-font-size}rem;
-  height: #{20 / $base-font-size}rem;
+  width: #{math.div(20, $base-font-size)}rem;
+  height: #{math.div(20, $base-font-size)}rem;
   @include icon();
   @include themify() {
-    margin-right: #{5 / $base-font-size}rem;
+    margin-right: #{math.div(5, $base-font-size)}rem;
   }
   display: none;
   position: absolute;
@@ -192,7 +194,7 @@
     }
   }
   & svg {
-    width: #{10 / $base-font-size}rem;
+    width: #{math.div(10, $base-font-size)}rem;
   }
   .sidebar__file-item--open > .file-item__content & {
     display: inline-block;
@@ -203,7 +205,7 @@
   @extend %dropdown-open-right;
   display: none;
   width: 100%;
-  max-width: #{180 / $base-font-size}rem;
+  max-width: #{math.div(180, $base-font-size)}rem;
   .sidebar__file-item--open > .file-item__content & {
     display: flex;
   }
@@ -213,9 +215,9 @@
   display: none;
   padding: 0;
   border: 0;
-  width: calc(100% - #{63 / $base-font-size}rem);
+  width: calc(100% - #{math.div(63, $base-font-size)}rem);
   font-family: Inconsolata, monospace;
-  font-size: #{14 / $base-font-size}rem;
+  font-size: #{math.div(14, $base-font-size)}rem;
   .sidebar__file-item--editing & {
     display: inline-block;
   }
@@ -225,10 +227,10 @@
 .sidebar__contract {
   @include icon();
   position: absolute;
-  top: #{2 / $base-font-size}rem;
-  left: #{0 / $base-font-size}rem;
-  height: #{25 / $base-font-size}rem;
-  width: #{49 / $base-font-size}rem;
+  top: #{math.div(2, $base-font-size)}rem;
+  left: #{math.div(0, $base-font-size)}rem;
+  height: #{math.div(25, $base-font-size)}rem;
+  width: #{math.div(49, $base-font-size)}rem;
   border-radius: 2px;
   display: flex;
   justify-content: center;
@@ -276,20 +278,20 @@
 }
 
 .sidebar__folder-icon {
-  padding: #{4 / $base-font-size}rem 0;
-  margin-right: #{5 / $base-font-size}rem;
+  padding: #{math.div(4, $base-font-size)}rem 0;
+  margin-right: #{math.div(5, $base-font-size)}rem;
   & path {
     @include themify() {
       fill: map-get($theme-map, 'primary-text-color');
     }
   }
   & svg {
-    width: #{10 / $base-font-size}rem;
+    width: #{math.div(10, $base-font-size)}rem;
   }
 }
 
 .sidebar__file-item-icon {
-  margin-right: #{5 / $base-font-size}rem;
+  margin-right: #{math.div(5, $base-font-size)}rem;
   display: flex;
   align-items: center;
   & path {
@@ -325,7 +327,7 @@
   @extend %dropdown-open-right;
   display: none;
   width: 100%;
-  max-width: #{180 / $base-font-size}rem;
+  max-width: #{math.div(180, $base-font-size)}rem;
   .sidebar--project-options & {
     display: flex;
   }
diff --git a/client/styles/components/_sketch-list.scss b/client/styles/components/_sketch-list.scss
index 69d41bdca4..b46ffe025a 100644
--- a/client/styles/components/_sketch-list.scss
+++ b/client/styles/components/_sketch-list.scss
@@ -1,3 +1,5 @@
+@use "sass:math";
+
 .sketches-table-container {
   overflow-y: auto;
   max-width: 100%;
@@ -11,7 +13,7 @@
     .sketches-table {
       display: flex;
       flex-direction: column;
-      padding: #{16 / $base-font-size}rem;
+      padding: #{math.div(16, $base-font-size)}rem;
       height: 100%;
       overflow-y: auto;
 
@@ -22,16 +24,16 @@
       tbody {
         display: flex;
         flex-direction: column;
-        gap: #{12 / $base-font-size}rem;
+        gap: #{math.div(12, $base-font-size)}rem;
 
         .sketches-table__row {
           margin: 0;
           position: relative;
           display: flex;
           flex-wrap: wrap;
-          padding: #{15 / $base-font-size}rem;
+          padding: #{math.div(15, $base-font-size)}rem;
           height: fit-content;
-          gap: #{8 / $base-font-size}rem;
+          gap: #{math.div(8, $base-font-size)}rem;
 
           @include themify() {
             border: 1px solid getThemifyVariable("modal-border-color");
@@ -42,13 +44,13 @@
             padding-left: 0;
             width: 100%;
             font-weight: bold;
-            margin-bottom: #{6 / $base-font-size}rem;
+            margin-bottom: #{math.div(6, $base-font-size)}rem;
           }
 
           > td {
             padding-left: 0;
             width: 30%;
-            font-size: #{14 / $base-font-size}rem;
+            font-size: #{math.div(14, $base-font-size)}rem;
 
             @include themify() {
               color: getThemifyVariable("modal-border-color");
@@ -60,7 +62,7 @@
             top: 0;
             right: 0;
             width: auto;
-            margin: #{8 / $base-font-size}rem;
+            margin: #{math.div(8, $base-font-size)}rem;
 
             .sketch-list__dropdown-button {
               transform: rotateZ(90deg) translateX(-30%);
@@ -79,13 +81,13 @@
   max-height: 100%;
   border-spacing: 0;
   & .sketch-list__dropdown-column {
-    width: #{60 / $base-font-size}rem;
+    width: #{math.div(60, $base-font-size)}rem;
     position: relative;
   }
 }
 
 .sketches-table thead th {
-  height: #{32 / $base-font-size}rem;
+  height: #{math.div(32, $base-font-size)}rem;
   position: sticky;
   top: 0;
   z-index: 1;
@@ -97,10 +99,10 @@
 .sketch-list__sort-button {
   display: flex;
   align-items: center;
-  height: #{35 / $base-font-size}rem;
+  height: #{math.div(35, $base-font-size)}rem;
 
   & .isvg {
-    margin-left: #{8 / $base-font-size}rem;
+    margin-left: #{math.div(8, $base-font-size)}rem;
   }
 
   & svg {
@@ -112,7 +114,7 @@
 
 .sketches-table__header {
   border-bottom: 2px dashed transparent;
-  padding: #{3 / $base-font-size}rem 0;
+  padding: #{math.div(3, $base-font-size)}rem 0;
   @include themify() {
     color: getThemifyVariable("inactive-text-color");
   }
@@ -125,13 +127,13 @@
 }
 
 .sketches-table thead th:nth-child(1) {
-  padding-left: #{12 / $base-font-size}rem;
+  padding-left: #{math.div(12, $base-font-size)}rem;
 }
 
 .sketches-table__row {
-  margin: #{10 / $base-font-size}rem;
-  height: #{72 / $base-font-size}rem;
-  font-size: #{16 / $base-font-size}rem;
+  margin: #{math.div(10, $base-font-size)}rem;
+  height: #{math.div(72, $base-font-size)}rem;
+  font-size: #{math.div(16, $base-font-size)}rem;
 }
 
 .sketches-table__row:nth-child(odd) {
@@ -141,11 +143,11 @@
 }
 
 .sketches-table__row > th:nth-child(1) {
-  padding-left: #{12 / $base-font-size}rem;
+  padding-left: #{math.div(12, $base-font-size)}rem;
 }
 
 .sketches-table__row > td {
-  padding-left: #{8 / $base-font-size}rem;
+  padding-left: #{math.div(8, $base-font-size)}rem;
 }
 
 .sketches-table__row a {
@@ -159,7 +161,7 @@
 }
 
 .sketches-table thead {
-  font-size: #{12 / $base-font-size}rem;
+  font-size: #{math.div(12, $base-font-size)}rem;
   @include themify() {
     color: getThemifyVariable("inactive-text-color");
   }
@@ -170,8 +172,8 @@
 }
 
 .sketch-list__dropdown-button {
-  width: #{25 / $base-font-size}rem;
-  height: #{25 / $base-font-size}rem;
+  width: #{math.div(25, $base-font-size)}rem;
+  height: #{math.div(25, $base-font-size)}rem;
   @include themify() {
     & polygon,
     & path {
@@ -186,7 +188,7 @@
 }
 
 .sketches-table__icon-cell {
-  width: #{35 / $base-font-size}rem;
+  width: #{math.div(35, $base-font-size)}rem;
 }
 
 .sketch-list__action-dialogue {
@@ -197,6 +199,6 @@
 
 .sketches-table__empty {
   text-align: center;
-  font-size: #{16 / $base-font-size}rem;
-  padding: #{42 / $base-font-size}rem 0;
+  font-size: #{math.div(16, $base-font-size)}rem;
+  padding: #{math.div(42, $base-font-size)}rem 0;
 }
diff --git a/client/styles/components/_tabs.scss b/client/styles/components/_tabs.scss
index 444b7186c0..7f2d953237 100644
--- a/client/styles/components/_tabs.scss
+++ b/client/styles/components/_tabs.scss
@@ -1,7 +1,9 @@
+@use "sass:math";
+
 .tabs__titles {
   display: flex;
   flex-wrap: wrap;
-  padding-bottom: #{0.1 / $base-font-size}rem;
+  padding-bottom: #{math.div(0.1, $base-font-size)}rem;
   @include themify() {
     border-bottom: 1px solid getThemifyVariable('button-border-color');
   }
@@ -19,16 +21,16 @@
       cursor: pointer; 
     }
   }
-  font-size: #{12 / $base-font-size}rem;
-  height: #{20 / $base-font-size}rem;
+  font-size: #{math.div(12, $base-font-size)}rem;
+  height: #{math.div(20, $base-font-size)}rem;
   width: 100%;
   margin: 0;
-  padding: 0 #{5 /$base-font-size}rem;
+  padding: 0 #{math.div(5, $base-font-size)}rem;
 }
 
 .react-tabs__tab--selected {
   @include themify() {
-    border-bottom: #{4 / $base-font-size}rem solid getThemifyVariable('button-background-hover-color');
+    border-bottom: #{math.div(4, $base-font-size)}rem solid getThemifyVariable('button-background-hover-color');
   }
 }
 
@@ -43,9 +45,9 @@
   color: black;
   display: flex;
   align-items: center;
-  border-bottom: #{4 / $base-font-size}rem solid transparent;
+  border-bottom: #{math.div(4, $base-font-size)}rem solid transparent;
   & + & {
-    margin-left: #{45 / $base-font-size}rem;
+    margin-left: #{math.div(45, $base-font-size)}rem;
   }
 }
 
@@ -61,9 +63,9 @@
       cursor: pointer; 
     }
   }
-  font-size: #{12 / $base-font-size}rem;
-  height: #{20 / $base-font-size}rem;
+  font-size: #{math.div(12, $base-font-size)}rem;
+  height: #{math.div(20, $base-font-size)}rem;
   width: 100%;
   margin: 0;
-  padding: 0 #{5 /$base-font-size}rem;
+  padding: 0 #{math.div(5, $base-font-size)}rem;
 }
diff --git a/client/styles/components/_timer.scss b/client/styles/components/_timer.scss
index 1c377e121d..c258bf5bf0 100644
--- a/client/styles/components/_timer.scss
+++ b/client/styles/components/_timer.scss
@@ -1,9 +1,11 @@
+@use "sass:math";
+
 .timer__saved-time {
   @include themify() {
     color: getThemifyVariable('inactive-text-color');
   }
-  font-size: #{12 / $base-font-size}rem;
-  padding-right: #{30 / $base-font-size}rem;
+  font-size: #{math.div(12, $base-font-size)}rem;
+  padding-right: #{math.div(30, $base-font-size)}rem;
   &.timer__saved-time--notOwner {
     display: none;
   }
diff --git a/client/styles/components/_toast.scss b/client/styles/components/_toast.scss
index 2b3c0db50f..c52793c5cb 100644
--- a/client/styles/components/_toast.scss
+++ b/client/styles/components/_toast.scss
@@ -1,13 +1,15 @@
+@use "sass:math";
+
 .toast {
   background-color: $toast-background-color;
   color: $toast-text-color;
-  padding: #{10 / $base-font-size}rem;
+  padding: #{math.div(10, $base-font-size)}rem;
   position: fixed;
   top: 0;
   left: 50%;
   transform: translate(-50%, 0);
-  min-width: #{375 / $base-font-size}rem; //500px
-  font-size: #{20 / $base-font-size}rem;
+  min-width: #{math.div(375, $base-font-size)}rem; //500px
+  font-size: #{math.div(20, $base-font-size)}rem;
   display: flex;
   z-index: 9999;
   align-items: center;
@@ -19,6 +21,6 @@
   @include themify() {
     @extend %icon-toast;
   }
-  padding-top: #{10 / $base-font-size}rem;
-  margin-left: #{40 / $base-font-size}rem;
+  padding-top: #{math.div(10, $base-font-size)}rem;
+  margin-left: #{math.div(40, $base-font-size)}rem;
 }
\ No newline at end of file
diff --git a/client/styles/components/_toolbar.scss b/client/styles/components/_toolbar.scss
index e4b9b86742..1d40c06779 100644
--- a/client/styles/components/_toolbar.scss
+++ b/client/styles/components/_toolbar.scss
@@ -1,10 +1,12 @@
+@use "sass:math";
+
 .toolbar__play-button {
 	@include themify() {
 		@extend %toolbar-button;
 		display: flex;
 		justify-content: center;
 		align-items: center;
-		padding: 0 0 0 #{3 / $base-font-size}rem;
+		padding: 0 0 0 #{math.div(3, $base-font-size)}rem;
 		&--selected {
 			@extend %toolbar-button--selected;
 		}
@@ -21,14 +23,14 @@
 			}
 	    }
 	}
-	margin-right: #{15 / $base-font-size}rem;
+	margin-right: #{math.div(15, $base-font-size)}rem;
 	span {
-		padding-left: #{4 / $base-font-size}rem;
+		padding-left: #{math.div(4, $base-font-size)}rem;
 		display: flex;
 		align-items: center;
 		justify-content: center;
-		width: #{20 / $base-font-size}rem;
-		height: #{20 / $base-font-size}rem;
+		width: #{math.div(20, $base-font-size)}rem;
+		height: #{math.div(20, $base-font-size)}rem;
 	}
 }
 
@@ -42,7 +44,7 @@
 		display: flex;
 		justify-content: center;
 		align-items: center;
-		margin-right: #{15 / $base-font-size}rem;
+		margin-right: #{math.div(15, $base-font-size)}rem;
 		padding: 0;
 		&--selected {
 			@extend %toolbar-button--selected;
@@ -52,8 +54,8 @@
 		display: flex;
 		align-items: center;
 		justify-content: center;
-		width: #{20 / $base-font-size}rem;
-		height: #{20 / $base-font-size}rem;
+		width: #{math.div(20, $base-font-size)}rem;
+		height: #{math.div(20, $base-font-size)}rem;
 	}
 }
 
@@ -70,17 +72,17 @@
 	}
 	margin-left: auto;
 	& span {
-		padding-left: #{1 / $base-font-size}rem;
+		padding-left: #{math.div(1, $base-font-size)}rem;
 		display: flex;
 		align-items: center;
 		justify-content: center;
-		width: #{20 / $base-font-size}rem;
-		height: #{20 / $base-font-size}rem;
+		width: #{math.div(20, $base-font-size)}rem;
+		height: #{math.div(20, $base-font-size)}rem;
 	}
 }
 
 .toolbar__logo {
-	margin-right: #{30 / $base-font-size}rem;
+	margin-right: #{math.div(30, $base-font-size)}rem;
 	@include themify() {
 		& g, & path {
 			fill: getThemifyVariable('logo-color');
@@ -89,7 +91,7 @@
 }
 
 .toolbar {
-	padding: #{10 / $base-font-size}rem #{20 / $base-font-size}rem;
+	padding: #{math.div(10, $base-font-size)}rem #{math.div(20, $base-font-size)}rem;
 	display: flex;
 	align-items: center;
 	@include themify() {
@@ -98,8 +100,8 @@
 }
 
 .toolbar__project-name-container {
-	margin-left: #{10 / $base-font-size}rem;
-	padding-left: #{10 / $base-font-size}rem;
+	margin-left: #{math.div(10, $base-font-size)}rem;
+	padding-left: #{math.div(10, $base-font-size)}rem;
   display: flex;
   align-items: center;
 }
@@ -118,7 +120,7 @@
 }
 
 .toolbar__project-owner {
-	margin-left: #{5 / $base-font-size}rem;
+	margin-left: #{math.div(5, $base-font-size)}rem;
 	@include themify() {
 		color: getThemifyVariable('secondary-text-color');
 	}
@@ -128,8 +130,8 @@
 	@include themify() {
 		color: getThemifyVariable('secondary-text-color');
 	}
-	margin-left: #{5 / $base-font-size}rem;
-	font-size: #{12 / $base-font-size}rem;
+	margin-left: #{math.div(5, $base-font-size)}rem;
+	font-size: #{math.div(12, $base-font-size)}rem;
 }
 
 .toolbar__autorefresh {
diff --git a/client/styles/layout/_dashboard.scss b/client/styles/layout/_dashboard.scss
index 6a5a374fe2..fea65f2809 100644
--- a/client/styles/layout/_dashboard.scss
+++ b/client/styles/layout/_dashboard.scss
@@ -1,9 +1,11 @@
+@use "sass:math";
+
 .dashboard-content {
   display: flex;
   flex-direction: column;
   flex: 1;
   overflow: hidden;
-  max-width: #{1012 / $base-font-size}rem;
+  max-width: #{math.div(1012, $base-font-size)}rem;
   margin: 0 auto;
   width: 100%;
 
diff --git a/client/styles/main.scss b/client/styles/main.scss
index 9018fe6273..dbef1e9920 100644
--- a/client/styles/main.scss
+++ b/client/styles/main.scss
@@ -6,11 +6,11 @@
 @import 'base/reset';
 @import 'base/base';
 
-@import 'node_modules/codemirror/lib/codemirror';
-@import 'node_modules/codemirror/addon/lint/lint';
-@import 'node_modules/codemirror-colorpicker/addon/codemirror-colorpicker';
-@import 'node_modules/dropzone/dist/dropzone';
-@import 'node_modules/primer-tooltips/build/build';
+@import '../../node_modules/codemirror/lib/codemirror';
+@import '../../node_modules/codemirror/addon/lint/lint';
+@import '../../node_modules/codemirror-colorpicker/addon/codemirror-colorpicker';
+@import '../../node_modules/dropzone/dist/dropzone';
+@import '../../node_modules/primer-tooltips/build/build';
 
 @import 'components/p5-light-codemirror-theme';
 @import 'components/p5-dark-codemirror-theme';
diff --git a/package-lock.json b/package-lock.json
index 7d314d654b..008a8a3f87 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -170,7 +170,6 @@
         "lint-staged": "^10.5.4",
         "mini-css-extract-plugin": "^1.6.2",
         "msw": "^0.35.0",
-        "node-sass": "^7.0.1",
         "nodemon": "^2.0.22",
         "os-browserify": "^0.3.0",
         "postcss": "^8.4.12",
@@ -180,6 +179,7 @@
         "react-test-renderer": "^16.14.0",
         "redux-mock-store": "^1.5.4",
         "rimraf": "^2.7.1",
+        "sass": "^1.66.1",
         "sass-loader": "^12.6.0",
         "storybook": "^7.0.27",
         "storybook-addon-theme-playground": "^2.2.0",
@@ -3673,7 +3673,9 @@
       "version": "1.1.3",
       "resolved": "https://registry.npmjs.org/@gar/promisify/-/promisify-1.1.3.tgz",
       "integrity": "sha512-k2Ty1JcVojjJFwrg/ThKi2ujJ7XNLYaFGNB/bWT9wGR+oSMJHMa5w+CUq6p/pVrKeNNgA7pCqEcjSnHVoqJQFw==",
-      "dev": true
+      "dev": true,
+      "optional": true,
+      "peer": true
     },
     "node_modules/@gatsbyjs/webpack-hot-middleware": {
       "version": "2.25.3",
@@ -5653,6 +5655,8 @@
       "resolved": "https://registry.npmjs.org/@npmcli/fs/-/fs-1.1.1.tgz",
       "integrity": "sha512-8KG5RD0GVP4ydEzRn/I4BNDuxDtqVbOdm8675T49OIG/NGhaK0pjPX7ZcDlvKYbA+ulvVK3ztfcF4uBdOxuJbQ==",
       "dev": true,
+      "optional": true,
+      "peer": true,
       "dependencies": {
         "@gar/promisify": "^1.0.1",
         "semver": "^7.3.5"
@@ -5663,6 +5667,8 @@
       "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-6.0.0.tgz",
       "integrity": "sha512-Jo6dJ04CmSjuznwJSS3pUeWmd/H0ffTlkXXgwZi+eq1UCmqQwCh+eLsYOYCwY991i2Fah4h1BEMCx4qThGbsiA==",
       "dev": true,
+      "optional": true,
+      "peer": true,
       "dependencies": {
         "yallist": "^4.0.0"
       },
@@ -5675,6 +5681,8 @@
       "resolved": "https://registry.npmjs.org/semver/-/semver-7.3.7.tgz",
       "integrity": "sha512-QlYTucUYOews+WeEujDoEGziz4K6c47V/Bd+LjSSYcA94p+DmINdf7ncaUinThfvZyu13lN9OY1XDxt8C0Tw0g==",
       "dev": true,
+      "optional": true,
+      "peer": true,
       "dependencies": {
         "lru-cache": "^6.0.0"
       },
@@ -5689,13 +5697,17 @@
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/yallist/-/yallist-4.0.0.tgz",
       "integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==",
-      "dev": true
+      "dev": true,
+      "optional": true,
+      "peer": true
     },
     "node_modules/@npmcli/move-file": {
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/@npmcli/move-file/-/move-file-1.1.2.tgz",
       "integrity": "sha512-1SUf/Cg2GzGDyaf15aR9St9TWlb+XvbZXWpDx8YKs7MLzMH/BCeopv+y9vzrzgkfykCGuWOlSu3mZhj2+FQcrg==",
       "dev": true,
+      "optional": true,
+      "peer": true,
       "dependencies": {
         "mkdirp": "^1.0.4",
         "rimraf": "^3.0.2"
@@ -5709,6 +5721,8 @@
       "resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-1.0.4.tgz",
       "integrity": "sha512-vVqVZQyf3WLx2Shd0qJ9xuvqgAyKPLAiqITEtqW0oIUjzo3PePDd6fW9iFz30ef7Ysp/oiWqbhszeGWW2T6Gzw==",
       "dev": true,
+      "optional": true,
+      "peer": true,
       "bin": {
         "mkdirp": "bin/cmd.js"
       },
@@ -5721,6 +5735,8 @@
       "resolved": "https://registry.npmjs.org/rimraf/-/rimraf-3.0.2.tgz",
       "integrity": "sha512-JZkJMZkAGFFPP2YqXZXPbMlMBgsxzE8ILs4lMIX/2o0L9UBw9O/Y3o6wFw/i9YLapcUJWwqbi3kdxIPdC62TIA==",
       "dev": true,
+      "optional": true,
+      "peer": true,
       "dependencies": {
         "glob": "^7.1.3"
       },
@@ -15818,7 +15834,9 @@
       "version": "1.2.2",
       "resolved": "https://registry.npmjs.org/@types/minimist/-/minimist-1.2.2.tgz",
       "integrity": "sha512-jhuKLIRrhvCPLqwPcx6INqmKeiA5EWrsCOPhrlFSrbrmU4ZMPjj5Ul/oLCMDO98XRUIwVm78xICz4EPCektzeQ==",
-      "dev": true
+      "dev": true,
+      "optional": true,
+      "peer": true
     },
     "node_modules/@types/mongodb": {
       "version": "3.6.20",
@@ -16512,6 +16530,8 @@
       "resolved": "https://registry.npmjs.org/agentkeepalive/-/agentkeepalive-4.2.1.tgz",
       "integrity": "sha512-Zn4cw2NEqd+9fiSVWMscnjyQ1a8Yfoc5oBajLeo5w+YBHgDUcEBY2hS4YpTz6iN5f/2zQiktcuM6tS8x1p9dpA==",
       "dev": true,
+      "optional": true,
+      "peer": true,
       "dependencies": {
         "debug": "^4.1.0",
         "depd": "^1.1.2",
@@ -16985,6 +17005,8 @@
       "resolved": "https://registry.npmjs.org/arrify/-/arrify-1.0.1.tgz",
       "integrity": "sha1-iYUI2iIm84DfkEcoRWhJwVAaSw0=",
       "dev": true,
+      "optional": true,
+      "peer": true,
       "engines": {
         "node": ">=0.10.0"
       }
@@ -16994,6 +17016,8 @@
       "resolved": "https://registry.npmjs.org/asn1/-/asn1-0.2.4.tgz",
       "integrity": "sha512-jxwzQpLQjSmWXgwaCZE9Nz+glAG01yF1QnWgbhGwHI5A6FRIEY6IVqtHhIepHqI7/kyEyQEagBC5mBEFlIYvdg==",
       "dev": true,
+      "optional": true,
+      "peer": true,
       "dependencies": {
         "safer-buffer": "~2.1.0"
       }
@@ -17015,6 +17039,8 @@
       "resolved": "https://registry.npmjs.org/assert-plus/-/assert-plus-1.0.0.tgz",
       "integrity": "sha1-8S4PPF13sLHN2RRpQuTpbB5N1SU=",
       "dev": true,
+      "optional": true,
+      "peer": true,
       "engines": {
         "node": ">=0.8"
       }
@@ -17061,6 +17087,8 @@
       "resolved": "https://registry.npmjs.org/async-foreach/-/async-foreach-0.1.3.tgz",
       "integrity": "sha1-NhIfhFwFeBct5Bmpfb6x0W7DRUI=",
       "dev": true,
+      "optional": true,
+      "peer": true,
       "engines": {
         "node": "*"
       }
@@ -17230,6 +17258,8 @@
       "resolved": "https://registry.npmjs.org/aws-sign2/-/aws-sign2-0.7.0.tgz",
       "integrity": "sha1-tG6JCTSpWR8tL2+G1+ap8bP+dqg=",
       "dev": true,
+      "optional": true,
+      "peer": true,
       "engines": {
         "node": "*"
       }
@@ -17238,7 +17268,9 @@
       "version": "1.9.1",
       "resolved": "https://registry.npmjs.org/aws4/-/aws4-1.9.1.tgz",
       "integrity": "sha512-wMHVg2EOHaMRxbzgFJ9gtjOOCrI80OHLG14rxi28XwOW8ux6IiEbRCGGGqCtdAIg4FQCbW20k9RsT4y3gJlFug==",
-      "dev": true
+      "dev": true,
+      "optional": true,
+      "peer": true
     },
     "node_modules/axe-core": {
       "version": "4.3.1",
@@ -17975,6 +18007,8 @@
       "resolved": "https://registry.npmjs.org/bcrypt-pbkdf/-/bcrypt-pbkdf-1.0.2.tgz",
       "integrity": "sha1-pDAdOJtqQ/m2f/PKEaP2Y342Dp4=",
       "dev": true,
+      "optional": true,
+      "peer": true,
       "dependencies": {
         "tweetnacl": "^0.14.3"
       }
@@ -18462,6 +18496,8 @@
       "resolved": "https://registry.npmjs.org/camelcase-keys/-/camelcase-keys-6.2.2.tgz",
       "integrity": "sha512-YrwaA0vEKazPBkn0ipTiMpSajYDSe+KjQfrjhcBMxJt/znbvlHd8Pw/Vamaz5EB4Wfhs3SUR3Z9mwRu/P3s3Yg==",
       "dev": true,
+      "optional": true,
+      "peer": true,
       "dependencies": {
         "camelcase": "^5.3.1",
         "map-obj": "^4.0.0",
@@ -18523,7 +18559,9 @@
       "version": "0.12.0",
       "resolved": "https://registry.npmjs.org/caseless/-/caseless-0.12.0.tgz",
       "integrity": "sha1-G2gcIf+EAzyCZUMJBolCDRhxUdw=",
-      "dev": true
+      "dev": true,
+      "optional": true,
+      "peer": true
     },
     "node_modules/chalk": {
       "version": "2.4.2",
@@ -21076,6 +21114,8 @@
       "resolved": "https://registry.npmjs.org/dashdash/-/dashdash-1.14.1.tgz",
       "integrity": "sha1-hTz6D3y+L+1d4gMmuN1YEDX24vA=",
       "dev": true,
+      "optional": true,
+      "peer": true,
       "dependencies": {
         "assert-plus": "^1.0.0"
       },
@@ -21183,6 +21223,8 @@
       "resolved": "https://registry.npmjs.org/decamelize/-/decamelize-1.2.0.tgz",
       "integrity": "sha1-9lNNFRSCabIDUue+4m9QH5oZEpA=",
       "dev": true,
+      "optional": true,
+      "peer": true,
       "engines": {
         "node": ">=0.10.0"
       }
@@ -21192,6 +21234,8 @@
       "resolved": "https://registry.npmjs.org/decamelize-keys/-/decamelize-keys-1.1.0.tgz",
       "integrity": "sha1-0XGoeTMlKAfrPLYdwcFEXQeN8tk=",
       "dev": true,
+      "optional": true,
+      "peer": true,
       "dependencies": {
         "decamelize": "^1.1.0",
         "map-obj": "^1.0.0"
@@ -21205,6 +21249,8 @@
       "resolved": "https://registry.npmjs.org/map-obj/-/map-obj-1.0.1.tgz",
       "integrity": "sha1-2TPOuSBdgr3PSIb2dCvcK03qFG0=",
       "dev": true,
+      "optional": true,
+      "peer": true,
       "engines": {
         "node": ">=0.10.0"
       }
@@ -21411,6 +21457,8 @@
       "resolved": "https://registry.npmjs.org/depd/-/depd-1.1.2.tgz",
       "integrity": "sha1-m81S4UwJd2PnSbJ0xDRu0uVgtak=",
       "dev": true,
+      "optional": true,
+      "peer": true,
       "engines": {
         "node": ">= 0.6"
       }
@@ -21691,6 +21739,8 @@
       "resolved": "https://registry.npmjs.org/ecc-jsbn/-/ecc-jsbn-0.1.2.tgz",
       "integrity": "sha1-OoOpBOVDUyh4dMVkt1SThoSamMk=",
       "dev": true,
+      "optional": true,
+      "peer": true,
       "dependencies": {
         "jsbn": "~0.1.0",
         "safer-buffer": "^2.1.0"
@@ -21782,6 +21832,7 @@
       "resolved": "https://registry.npmjs.org/encoding/-/encoding-0.1.12.tgz",
       "integrity": "sha1-U4tm8+5izRq1HsMjgp0flIDHS+s=",
       "optional": true,
+      "peer": true,
       "dependencies": {
         "iconv-lite": "~0.4.13"
       }
@@ -21850,6 +21901,8 @@
       "resolved": "https://registry.npmjs.org/env-paths/-/env-paths-2.2.1.tgz",
       "integrity": "sha512-+h1lkLKhZMTYjog1VEpJNG7NZJWcuc2DDk/qsqSTRRCOXiLjeQ1d1/udrUGhqMxUgAlwKNZ0cf2uqan5GLuS2A==",
       "dev": true,
+      "optional": true,
+      "peer": true,
       "engines": {
         "node": ">=6"
       }
@@ -21870,7 +21923,9 @@
       "version": "2.0.3",
       "resolved": "https://registry.npmjs.org/err-code/-/err-code-2.0.3.tgz",
       "integrity": "sha512-2bmlRpNKBxT/CRmPOlyISQpNj+qSeYvcym/uT0Jx2bMOlKLtSy1ZmLuVxSEKKyor/N5yhvp/ZiG1oE3DEYMSFA==",
-      "dev": true
+      "dev": true,
+      "optional": true,
+      "peer": true
     },
     "node_modules/error-ex": {
       "version": "1.3.2",
@@ -23792,7 +23847,9 @@
       "dev": true,
       "engines": [
         "node >=0.6.0"
-      ]
+      ],
+      "optional": true,
+      "peer": true
     },
     "node_modules/fast-deep-equal": {
       "version": "3.1.3",
@@ -24307,6 +24364,8 @@
       "resolved": "https://registry.npmjs.org/forever-agent/-/forever-agent-0.6.1.tgz",
       "integrity": "sha1-+8cfDEGt6zf5bFd60e1C2P2sypE=",
       "dev": true,
+      "optional": true,
+      "peer": true,
       "engines": {
         "node": "*"
       }
@@ -24476,6 +24535,8 @@
       "resolved": "https://registry.npmjs.org/form-data/-/form-data-2.3.3.tgz",
       "integrity": "sha512-1lLKB2Mu3aGP1Q/2eCOx0fNbRMe7XdwktwOruhfqqd0rIJWwN4Dh+E3hrPSlDCXnSR7UtZ1N38rVXm+6+MEhJQ==",
       "dev": true,
+      "optional": true,
+      "peer": true,
       "dependencies": {
         "asynckit": "^0.4.0",
         "combined-stream": "^1.0.6",
@@ -24622,6 +24683,8 @@
       "resolved": "https://registry.npmjs.org/gaze/-/gaze-1.1.3.tgz",
       "integrity": "sha512-BRdNm8hbWzFzWHERTrejLqwHDfS4GibPoq5wjTPIoJHoBtKGPg3xAFfxmM+9ztbXelxcf2hwQcaz1PtmFeue8g==",
       "dev": true,
+      "optional": true,
+      "peer": true,
       "dependencies": {
         "globule": "^1.0.0"
       },
@@ -24699,6 +24762,8 @@
       "resolved": "https://registry.npmjs.org/get-stdin/-/get-stdin-4.0.1.tgz",
       "integrity": "sha1-uWjGsKBDhDJJAui/Gl3zJXmkUP4=",
       "dev": true,
+      "optional": true,
+      "peer": true,
       "engines": {
         "node": ">=0.10.0"
       }
@@ -24720,6 +24785,8 @@
       "resolved": "https://registry.npmjs.org/getpass/-/getpass-0.1.7.tgz",
       "integrity": "sha1-Xv+OPmhNVprkyysSgmBOi6YhSfo=",
       "dev": true,
+      "optional": true,
+      "peer": true,
       "dependencies": {
         "assert-plus": "^1.0.0"
       }
@@ -24842,6 +24909,8 @@
       "resolved": "https://registry.npmjs.org/globule/-/globule-1.3.2.tgz",
       "integrity": "sha512-7IDTQTIu2xzXkT+6mlluidnWo+BypnbSoEVVQCGfzqnl5Ik8d3e1d4wycb8Rj9tWW+Z39uPWsdlquqiqPCd/pA==",
       "dev": true,
+      "optional": true,
+      "peer": true,
       "dependencies": {
         "glob": "~7.1.1",
         "lodash": "~4.17.10",
@@ -24942,6 +25011,8 @@
       "resolved": "https://registry.npmjs.org/har-schema/-/har-schema-2.0.0.tgz",
       "integrity": "sha1-qUwiJOvKwEeCoNkDVSHyRzW37JI=",
       "dev": true,
+      "optional": true,
+      "peer": true,
       "engines": {
         "node": ">=4"
       }
@@ -24952,6 +25023,8 @@
       "integrity": "sha512-sNvOCzEQNr/qrvJgc3UG/kD4QtlHycrzwS+6mfTrrSq97BvaYcPZZI1ZSqGSPR73Cxn4LKTD4PttRwfU7jWq5g==",
       "deprecated": "this library is no longer supported",
       "dev": true,
+      "optional": true,
+      "peer": true,
       "dependencies": {
         "ajv": "^6.5.5",
         "har-schema": "^2.0.0"
@@ -24965,6 +25038,8 @@
       "resolved": "https://registry.npmjs.org/hard-rejection/-/hard-rejection-2.1.0.tgz",
       "integrity": "sha512-VIZB+ibDhx7ObhAe7OVtoEbuP4h/MuOTHJ+J8h/eBXotJYl0fBgR72xDFCKgIh22OJZIOVNxBMWuhAr10r8HdA==",
       "dev": true,
+      "optional": true,
+      "peer": true,
       "engines": {
         "node": ">=6"
       }
@@ -25471,7 +25546,9 @@
       "version": "4.1.1",
       "resolved": "https://registry.npmjs.org/http-cache-semantics/-/http-cache-semantics-4.1.1.tgz",
       "integrity": "sha512-er295DKPVsV82j5kw1Gjt+ADA/XYHsajl82cGNQG2eyoPkvgUhX+nDIyelzhIWbbsXP39EHcI6l5tYs2FYqYXQ==",
-      "dev": true
+      "dev": true,
+      "optional": true,
+      "peer": true
     },
     "node_modules/http-errors": {
       "version": "2.0.0",
@@ -25515,6 +25592,8 @@
       "resolved": "https://registry.npmjs.org/http-signature/-/http-signature-1.2.0.tgz",
       "integrity": "sha1-muzZJRFHcvPZW2WmCruPfBj7rOE=",
       "dev": true,
+      "optional": true,
+      "peer": true,
       "dependencies": {
         "assert-plus": "^1.0.0",
         "jsprim": "^1.2.2",
@@ -25551,6 +25630,8 @@
       "resolved": "https://registry.npmjs.org/humanize-ms/-/humanize-ms-1.2.1.tgz",
       "integrity": "sha1-xG4xWaKT9riW2ikxbYtv6Lt5u+0=",
       "dev": true,
+      "optional": true,
+      "peer": true,
       "dependencies": {
         "ms": "^2.0.0"
       }
@@ -25805,6 +25886,12 @@
       "resolved": "https://registry.npmjs.org/immediate/-/immediate-3.0.6.tgz",
       "integrity": "sha1-nbHb0Pr43m++D13V5Wu2BigN5ps="
     },
+    "node_modules/immutable": {
+      "version": "4.3.4",
+      "resolved": "https://registry.npmjs.org/immutable/-/immutable-4.3.4.tgz",
+      "integrity": "sha512-fsXeu4J4i6WNWSikpI88v/PcVflZz+6kMhUfIwc5SY+poQRPnaf5V7qds6SUyUN3cVxEzuCab7QIoLOQ+DQ1wA==",
+      "dev": true
+    },
     "node_modules/import-fresh": {
       "version": "3.3.0",
       "resolved": "https://registry.npmjs.org/import-fresh/-/import-fresh-3.3.0.tgz",
@@ -25929,7 +26016,9 @@
       "version": "1.0.4",
       "resolved": "https://registry.npmjs.org/infer-owner/-/infer-owner-1.0.4.tgz",
       "integrity": "sha512-IClj+Xz94+d7irH5qRyfJonOdfTzuDaifE6ZPWfx0N0+/ATZCbuTPq2prFl526urkQd90WyUKIh1DfBQ2hMz9A==",
-      "dev": true
+      "dev": true,
+      "optional": true,
+      "peer": true
     },
     "node_modules/inflight": {
       "version": "1.0.6",
@@ -25990,7 +26079,9 @@
       "version": "1.1.5",
       "resolved": "https://registry.npmjs.org/ip/-/ip-1.1.5.tgz",
       "integrity": "sha1-vd7XARQpCCjAoDnnLvJfWq7ENUo=",
-      "dev": true
+      "dev": true,
+      "optional": true,
+      "peer": true
     },
     "node_modules/ipaddr.js": {
       "version": "1.9.1",
@@ -26227,7 +26318,9 @@
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/is-lambda/-/is-lambda-1.0.1.tgz",
       "integrity": "sha1-PZh3iZ5qU+/AFgUEzeFfgubwYdU=",
-      "dev": true
+      "dev": true,
+      "optional": true,
+      "peer": true
     },
     "node_modules/is-nan": {
       "version": "1.3.2",
@@ -26505,7 +26598,9 @@
       "version": "0.1.2",
       "resolved": "https://registry.npmjs.org/isstream/-/isstream-0.1.2.tgz",
       "integrity": "sha1-R+Y/evVa+m+S4VAOaQ64uFKcCZo=",
-      "dev": true
+      "dev": true,
+      "optional": true,
+      "peer": true
     },
     "node_modules/istanbul-lib-coverage": {
       "version": "3.2.0",
@@ -31401,7 +31496,9 @@
       "version": "2.6.4",
       "resolved": "https://registry.npmjs.org/js-base64/-/js-base64-2.6.4.tgz",
       "integrity": "sha512-pZe//GGmwJndub7ZghVHz7vjb2LgC1m8B07Au3eYqeqv9emhESByMXxaEgkUkEqJe87oBbSniGYoQNIBklc7IQ==",
-      "dev": true
+      "dev": true,
+      "optional": true,
+      "peer": true
     },
     "node_modules/js-beautify": {
       "version": "1.14.8",
@@ -31508,7 +31605,9 @@
       "version": "0.1.1",
       "resolved": "https://registry.npmjs.org/jsbn/-/jsbn-0.1.1.tgz",
       "integrity": "sha1-peZUwuWi3rXyAdls77yoDA7y9RM=",
-      "dev": true
+      "dev": true,
+      "optional": true,
+      "peer": true
     },
     "node_modules/jscodeshift": {
       "version": "0.14.0",
@@ -31932,7 +32031,9 @@
       "version": "0.4.0",
       "resolved": "https://registry.npmjs.org/json-schema/-/json-schema-0.4.0.tgz",
       "integrity": "sha512-es94M3nTIfsEPisRafak+HDLfHXnKBhV3vU5eqPcS3flIWqcxJWgXHXiey3YrpaNsanY5ei1VoYEbOzijuq9BA==",
-      "dev": true
+      "dev": true,
+      "optional": true,
+      "peer": true
     },
     "node_modules/json-schema-traverse": {
       "version": "0.4.1",
@@ -31948,7 +32049,9 @@
       "version": "5.0.1",
       "resolved": "https://registry.npmjs.org/json-stringify-safe/-/json-stringify-safe-5.0.1.tgz",
       "integrity": "sha1-Epai1Y/UXxmg9s4B1lcB4sc1tus=",
-      "dev": true
+      "dev": true,
+      "optional": true,
+      "peer": true
     },
     "node_modules/json5": {
       "version": "2.2.3",
@@ -31987,6 +32090,8 @@
       "resolved": "https://registry.npmjs.org/jsprim/-/jsprim-1.4.2.tgz",
       "integrity": "sha512-P2bSOMAc/ciLz6DzgjVlGJP9+BrJWu5UDGK70C2iweC5QBIeFf0ZXRvGjEj2uYgrY2MkAAhsSWHDWlFtEroZWw==",
       "dev": true,
+      "optional": true,
+      "peer": true,
       "dependencies": {
         "assert-plus": "1.0.0",
         "extsprintf": "1.3.0",
@@ -32825,6 +32930,8 @@
       "resolved": "https://registry.npmjs.org/make-fetch-happen/-/make-fetch-happen-9.1.0.tgz",
       "integrity": "sha512-+zopwDy7DNknmwPQplem5lAZX/eCOzSvSNNcSKm5eVwTkOBzoktEfXsa9L23J/GIRhxRsaxzkPEhrJEpE2F4Gg==",
       "dev": true,
+      "optional": true,
+      "peer": true,
       "dependencies": {
         "agentkeepalive": "^4.1.3",
         "cacache": "^15.2.0",
@@ -32852,6 +32959,8 @@
       "resolved": "https://registry.npmjs.org/cacache/-/cacache-15.3.0.tgz",
       "integrity": "sha512-VVdYzXEn+cnbXpFgWs5hTT7OScegHVmLhJIR8Ufqk3iFD6A6j5iSX1KuBTfNEv4tdJWE2PzA6IVFtcLC7fN9wQ==",
       "dev": true,
+      "optional": true,
+      "peer": true,
       "dependencies": {
         "@npmcli/fs": "^1.0.0",
         "@npmcli/move-file": "^1.0.1",
@@ -32881,6 +32990,8 @@
       "resolved": "https://registry.npmjs.org/chownr/-/chownr-2.0.0.tgz",
       "integrity": "sha512-bIomtDF5KGpdogkLd9VspvFzk9KfpyyGlS8YFVZl7TGPBHL5snIOnxeshwVgPteQ9b4Eydl+pVbIyE1DcvCWgQ==",
       "dev": true,
+      "optional": true,
+      "peer": true,
       "engines": {
         "node": ">=10"
       }
@@ -32890,6 +33001,8 @@
       "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-6.0.0.tgz",
       "integrity": "sha512-Jo6dJ04CmSjuznwJSS3pUeWmd/H0ffTlkXXgwZi+eq1UCmqQwCh+eLsYOYCwY991i2Fah4h1BEMCx4qThGbsiA==",
       "dev": true,
+      "optional": true,
+      "peer": true,
       "dependencies": {
         "yallist": "^4.0.0"
       },
@@ -32902,6 +33015,8 @@
       "resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-1.0.4.tgz",
       "integrity": "sha512-vVqVZQyf3WLx2Shd0qJ9xuvqgAyKPLAiqITEtqW0oIUjzo3PePDd6fW9iFz30ef7Ysp/oiWqbhszeGWW2T6Gzw==",
       "dev": true,
+      "optional": true,
+      "peer": true,
       "bin": {
         "mkdirp": "bin/cmd.js"
       },
@@ -32914,6 +33029,8 @@
       "resolved": "https://registry.npmjs.org/rimraf/-/rimraf-3.0.2.tgz",
       "integrity": "sha512-JZkJMZkAGFFPP2YqXZXPbMlMBgsxzE8ILs4lMIX/2o0L9UBw9O/Y3o6wFw/i9YLapcUJWwqbi3kdxIPdC62TIA==",
       "dev": true,
+      "optional": true,
+      "peer": true,
       "dependencies": {
         "glob": "^7.1.3"
       },
@@ -32929,6 +33046,8 @@
       "resolved": "https://registry.npmjs.org/ssri/-/ssri-8.0.1.tgz",
       "integrity": "sha512-97qShzy1AiyxvPNIkLWoGua7xoQzzPjQ0HAH4B0rWKo7SZ6USuPcrUiAFrws0UH8RrbWmgq3LMTObhPIHbbBeQ==",
       "dev": true,
+      "optional": true,
+      "peer": true,
       "dependencies": {
         "minipass": "^3.1.1"
       },
@@ -32940,7 +33059,9 @@
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/yallist/-/yallist-4.0.0.tgz",
       "integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==",
-      "dev": true
+      "dev": true,
+      "optional": true,
+      "peer": true
     },
     "node_modules/makeerror": {
       "version": "1.0.12",
@@ -32956,6 +33077,8 @@
       "resolved": "https://registry.npmjs.org/map-obj/-/map-obj-4.3.0.tgz",
       "integrity": "sha512-hdN1wVrZbb29eBGiGjJbeP8JbKjq1urkHJ/LIP/NY48MZ1QVXUsQBV1G1zvYFHn1XE06cwjBsOI2K3Ulnj1YXQ==",
       "dev": true,
+      "optional": true,
+      "peer": true,
       "engines": {
         "node": ">=8"
       },
@@ -33090,6 +33213,8 @@
       "resolved": "https://registry.npmjs.org/meow/-/meow-9.0.0.tgz",
       "integrity": "sha512-+obSblOQmRhcyBt62furQqRAQpNyWXo8BuQ5bN7dG8wmwQ+vwHKp/rCFD4CrTP8CsDQD1sjoZ94K417XEUk8IQ==",
       "dev": true,
+      "optional": true,
+      "peer": true,
       "dependencies": {
         "@types/minimist": "^1.2.0",
         "camelcase-keys": "^6.2.2",
@@ -33116,6 +33241,8 @@
       "resolved": "https://registry.npmjs.org/hosted-git-info/-/hosted-git-info-4.0.2.tgz",
       "integrity": "sha512-c9OGXbZ3guC/xOlCg1Ci/VgWlwsqDv1yMQL1CWqXDL0hDjXuNcq0zuR4xqPSuasI3kqFDhqSyTjREz5gzq0fXg==",
       "dev": true,
+      "optional": true,
+      "peer": true,
       "dependencies": {
         "lru-cache": "^6.0.0"
       },
@@ -33128,6 +33255,8 @@
       "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-6.0.0.tgz",
       "integrity": "sha512-Jo6dJ04CmSjuznwJSS3pUeWmd/H0ffTlkXXgwZi+eq1UCmqQwCh+eLsYOYCwY991i2Fah4h1BEMCx4qThGbsiA==",
       "dev": true,
+      "optional": true,
+      "peer": true,
       "dependencies": {
         "yallist": "^4.0.0"
       },
@@ -33140,6 +33269,8 @@
       "resolved": "https://registry.npmjs.org/normalize-package-data/-/normalize-package-data-3.0.3.tgz",
       "integrity": "sha512-p2W1sgqij3zMMyRC067Dg16bfzVH+w7hyegmpIvZ4JNjqtGOVAIvLmjBx3yP7YTe9vKJgkoNOPjwQGogDoMXFA==",
       "dev": true,
+      "optional": true,
+      "peer": true,
       "dependencies": {
         "hosted-git-info": "^4.0.1",
         "is-core-module": "^2.5.0",
@@ -33155,6 +33286,8 @@
       "resolved": "https://registry.npmjs.org/semver/-/semver-7.3.5.tgz",
       "integrity": "sha512-PoeGJYh8HK4BTO/a9Tf6ZG3veo/A7ZVsYrSA6J8ny9nb3B1VrpkuN+z9OE5wfE5p6H4LchYZsegiQgbJD94ZFQ==",
       "dev": true,
+      "optional": true,
+      "peer": true,
       "dependencies": {
         "lru-cache": "^6.0.0"
       },
@@ -33170,6 +33303,8 @@
       "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-0.18.1.tgz",
       "integrity": "sha512-OIAYXk8+ISY+qTOwkHtKqzAuxchoMiD9Udx+FSGQDuiRR+PJKJHc2NJAXlbhkGwTt/4/nKZxELY1w3ReWOL8mw==",
       "dev": true,
+      "optional": true,
+      "peer": true,
       "engines": {
         "node": ">=10"
       },
@@ -33181,13 +33316,17 @@
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/yallist/-/yallist-4.0.0.tgz",
       "integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==",
-      "dev": true
+      "dev": true,
+      "optional": true,
+      "peer": true
     },
     "node_modules/meow/node_modules/yargs-parser": {
       "version": "20.2.9",
       "resolved": "https://registry.npmjs.org/yargs-parser/-/yargs-parser-20.2.9.tgz",
       "integrity": "sha512-y11nGElTIV+CT3Zv9t7VKl+Q3hTQoT9a1Qzezhhl6Rp21gJ/IVTW7Z3y9EWXhuUBC2Shnf+DX0antecpAwSP8w==",
       "dev": true,
+      "optional": true,
+      "peer": true,
       "engines": {
         "node": ">=10"
       }
@@ -33364,6 +33503,8 @@
       "resolved": "https://registry.npmjs.org/minimist-options/-/minimist-options-4.1.0.tgz",
       "integrity": "sha512-Q4r8ghd80yhO/0j1O3B2BjweX3fiHg9cdOwjJd2J76Q135c+NDxGCqdYKQ1SKBuFfgWbAUzBfvYjPUEeNgqN1A==",
       "dev": true,
+      "optional": true,
+      "peer": true,
       "dependencies": {
         "arrify": "^1.0.1",
         "is-plain-obj": "^1.1.0",
@@ -33378,6 +33519,8 @@
       "resolved": "https://registry.npmjs.org/is-plain-obj/-/is-plain-obj-1.1.0.tgz",
       "integrity": "sha1-caUMhCnfync8kqOQpKA7OfzVHT4=",
       "dev": true,
+      "optional": true,
+      "peer": true,
       "engines": {
         "node": ">=0.10.0"
       }
@@ -33387,6 +33530,8 @@
       "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-6.0.3.tgz",
       "integrity": "sha512-dcS1ul+9tmeD95T+x28/ehLgd9mENa3LsvDTtzm3vyBEO7RPptvAD+t44WVXaUjTBRcrpFeFlC8WCruUR456hw==",
       "dev": true,
+      "optional": true,
+      "peer": true,
       "engines": {
         "node": ">=0.10.0"
       }
@@ -33408,6 +33553,8 @@
       "resolved": "https://registry.npmjs.org/minipass-collect/-/minipass-collect-1.0.2.tgz",
       "integrity": "sha512-6T6lH0H8OG9kITm/Jm6tdooIbogG9e0tLgpY6mphXSm/A9u8Nq1ryBG+Qspiub9LjWlBPsPS3tWQ/Botq4FdxA==",
       "dev": true,
+      "optional": true,
+      "peer": true,
       "dependencies": {
         "minipass": "^3.0.0"
       },
@@ -33420,6 +33567,8 @@
       "resolved": "https://registry.npmjs.org/minipass-fetch/-/minipass-fetch-1.4.1.tgz",
       "integrity": "sha512-CGH1eblLq26Y15+Azk7ey4xh0J/XfJfrCox5LDJiKqI2Q2iwOLOKrlmIaODiSQS8d18jalF6y2K2ePUm0CmShw==",
       "dev": true,
+      "optional": true,
+      "peer": true,
       "dependencies": {
         "minipass": "^3.1.0",
         "minipass-sized": "^1.0.3",
@@ -33437,6 +33586,8 @@
       "resolved": "https://registry.npmjs.org/minipass-flush/-/minipass-flush-1.0.5.tgz",
       "integrity": "sha512-JmQSYYpPUqX5Jyn1mXaRwOda1uQ8HP5KAT/oDSLCzt1BYRhQU0/hDtsB1ufZfEEzMZ9aAVmsBw8+FWsIXlClWw==",
       "dev": true,
+      "optional": true,
+      "peer": true,
       "dependencies": {
         "minipass": "^3.0.0"
       },
@@ -33449,6 +33600,8 @@
       "resolved": "https://registry.npmjs.org/minipass-pipeline/-/minipass-pipeline-1.2.4.tgz",
       "integrity": "sha512-xuIq7cIOt09RPRJ19gdi4b+RiNvDFYe5JH+ggNvBqGqpQXcru3PcRmOZuHBKWK1Txf9+cQ+HMVN4d6z46LZP7A==",
       "dev": true,
+      "optional": true,
+      "peer": true,
       "dependencies": {
         "minipass": "^3.0.0"
       },
@@ -33461,6 +33614,8 @@
       "resolved": "https://registry.npmjs.org/minipass-sized/-/minipass-sized-1.0.3.tgz",
       "integrity": "sha512-MbkQQ2CTiBMlA2Dm/5cY+9SWFEN8pzzOXi6rlM5Xxq0Yqbda5ZQy9sU75a673FE9ZK0Zsbr6Y5iP6u9nktfg2g==",
       "dev": true,
+      "optional": true,
+      "peer": true,
       "dependencies": {
         "minipass": "^3.0.0"
       },
@@ -34423,7 +34578,9 @@
       "version": "2.14.0",
       "resolved": "https://registry.npmjs.org/nan/-/nan-2.14.0.tgz",
       "integrity": "sha512-INOFj37C7k3AfaNTtX8RhsTw7qRy7eLET14cROi9+5HAVbbHuIWUHEauBv5qT4Av2tWasiTY1Jw6puUNqRJXQg==",
-      "dev": true
+      "dev": true,
+      "optional": true,
+      "peer": true
     },
     "node_modules/nanoid": {
       "version": "3.3.6",
@@ -34577,6 +34734,8 @@
       "resolved": "https://registry.npmjs.org/node-gyp/-/node-gyp-8.4.1.tgz",
       "integrity": "sha512-olTJRgUtAb/hOXG0E93wZDs5YiJlgbXxTwQAFHyNlRsXQnYzUaF2aGgujZbw+hR8aF4ZG/rST57bWMWD16jr9w==",
       "dev": true,
+      "optional": true,
+      "peer": true,
       "dependencies": {
         "env-paths": "^2.2.0",
         "glob": "^7.1.4",
@@ -34601,6 +34760,8 @@
       "resolved": "https://registry.npmjs.org/are-we-there-yet/-/are-we-there-yet-3.0.0.tgz",
       "integrity": "sha512-0GWpv50YSOcLXaN6/FAKY3vfRbllXWV2xvfA/oKJF8pzFhWXPV+yjhJXDBbjscDYowv7Yw1A3uigpzn5iEGTyw==",
       "dev": true,
+      "optional": true,
+      "peer": true,
       "dependencies": {
         "delegates": "^1.0.0",
         "readable-stream": "^3.6.0"
@@ -34614,6 +34775,8 @@
       "resolved": "https://registry.npmjs.org/gauge/-/gauge-4.0.4.tgz",
       "integrity": "sha512-f9m+BEN5jkg6a0fZjleidjN51VE1X+mPFQ2DJ0uv1V39oCLCbsGe6yjbBnp7eK7z/+GAon99a3nHuqbuuthyPg==",
       "dev": true,
+      "optional": true,
+      "peer": true,
       "dependencies": {
         "aproba": "^1.0.3 || ^2.0.0",
         "color-support": "^1.1.3",
@@ -34633,6 +34796,8 @@
       "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-6.0.0.tgz",
       "integrity": "sha512-Jo6dJ04CmSjuznwJSS3pUeWmd/H0ffTlkXXgwZi+eq1UCmqQwCh+eLsYOYCwY991i2Fah4h1BEMCx4qThGbsiA==",
       "dev": true,
+      "optional": true,
+      "peer": true,
       "dependencies": {
         "yallist": "^4.0.0"
       },
@@ -34645,6 +34810,8 @@
       "resolved": "https://registry.npmjs.org/nopt/-/nopt-5.0.0.tgz",
       "integrity": "sha512-Tbj67rffqceeLpcRXrT7vKAN8CwfPeIBgM7E6iBkmKLV7bEMwpGgYLGv0jACUsECaa/vuxP0IjEont6umdMgtQ==",
       "dev": true,
+      "optional": true,
+      "peer": true,
       "dependencies": {
         "abbrev": "1"
       },
@@ -34660,6 +34827,8 @@
       "resolved": "https://registry.npmjs.org/npmlog/-/npmlog-6.0.2.tgz",
       "integrity": "sha512-/vBvz5Jfr9dT/aFWd0FIRf+T/Q2WBsLENygUaFUqstqsycmZAP/t5BvFJTK0viFmSUxiUKTUplWy5vt+rvKIxg==",
       "dev": true,
+      "optional": true,
+      "peer": true,
       "dependencies": {
         "are-we-there-yet": "^3.0.0",
         "console-control-strings": "^1.1.0",
@@ -34675,6 +34844,8 @@
       "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-3.6.0.tgz",
       "integrity": "sha512-BViHy7LKeTz4oNnkcLJ+lVSL6vpiFeX6/d3oSH8zCW7UxP2onchk+vTGB143xuFjHS3deTgkKoXXymXqymiIdA==",
       "dev": true,
+      "optional": true,
+      "peer": true,
       "dependencies": {
         "inherits": "^2.0.3",
         "string_decoder": "^1.1.1",
@@ -34689,6 +34860,8 @@
       "resolved": "https://registry.npmjs.org/rimraf/-/rimraf-3.0.2.tgz",
       "integrity": "sha512-JZkJMZkAGFFPP2YqXZXPbMlMBgsxzE8ILs4lMIX/2o0L9UBw9O/Y3o6wFw/i9YLapcUJWwqbi3kdxIPdC62TIA==",
       "dev": true,
+      "optional": true,
+      "peer": true,
       "dependencies": {
         "glob": "^7.1.3"
       },
@@ -34704,6 +34877,8 @@
       "resolved": "https://registry.npmjs.org/semver/-/semver-7.3.7.tgz",
       "integrity": "sha512-QlYTucUYOews+WeEujDoEGziz4K6c47V/Bd+LjSSYcA94p+DmINdf7ncaUinThfvZyu13lN9OY1XDxt8C0Tw0g==",
       "dev": true,
+      "optional": true,
+      "peer": true,
       "dependencies": {
         "lru-cache": "^6.0.0"
       },
@@ -34719,6 +34894,8 @@
       "resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz",
       "integrity": "sha512-BLI3Tl1TW3Pvl70l3yq3Y64i+awpwXqsGBYWkkqMtnbXgrMD+yj7rhW0kuEDxzJaYXGjEW5ogapKNMEKNMjibA==",
       "dev": true,
+      "optional": true,
+      "peer": true,
       "dependencies": {
         "isexe": "^2.0.0"
       },
@@ -34733,7 +34910,9 @@
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/yallist/-/yallist-4.0.0.tgz",
       "integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==",
-      "dev": true
+      "dev": true,
+      "optional": true,
+      "peer": true
     },
     "node_modules/node-int64": {
       "version": "0.4.0",
@@ -34758,6 +34937,8 @@
       "integrity": "sha512-uMy+Xt29NlqKCFdFRZyXKOTqGt+QaKHexv9STj2WeLottnlqZEEWx6Bj0MXNthmFRRdM/YwyNo/8Tr46TOM0jQ==",
       "dev": true,
       "hasInstallScript": true,
+      "optional": true,
+      "peer": true,
       "dependencies": {
         "async-foreach": "^0.1.3",
         "chalk": "^4.1.2",
@@ -34787,6 +34968,8 @@
       "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
       "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
       "dev": true,
+      "optional": true,
+      "peer": true,
       "dependencies": {
         "color-convert": "^2.0.1"
       },
@@ -34802,6 +34985,8 @@
       "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
       "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==",
       "dev": true,
+      "optional": true,
+      "peer": true,
       "dependencies": {
         "ansi-styles": "^4.1.0",
         "supports-color": "^7.1.0"
@@ -34818,6 +35003,8 @@
       "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
       "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
       "dev": true,
+      "optional": true,
+      "peer": true,
       "dependencies": {
         "color-name": "~1.1.4"
       },
@@ -34829,13 +35016,17 @@
       "version": "1.1.4",
       "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
       "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
-      "dev": true
+      "dev": true,
+      "optional": true,
+      "peer": true
     },
     "node_modules/node-sass/node_modules/cross-spawn": {
       "version": "7.0.3",
       "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.3.tgz",
       "integrity": "sha512-iRDPJKUPVEND7dHPO8rkbOnPpyDygcDFtWjpeWNCgy8WP2rXcxXL8TskReQl6OrB2G7+UJrags1q15Fudc7G6w==",
       "dev": true,
+      "optional": true,
+      "peer": true,
       "dependencies": {
         "path-key": "^3.1.0",
         "shebang-command": "^2.0.0",
@@ -34850,6 +35041,8 @@
       "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
       "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
       "dev": true,
+      "optional": true,
+      "peer": true,
       "engines": {
         "node": ">=8"
       }
@@ -34859,6 +35052,8 @@
       "resolved": "https://registry.npmjs.org/path-key/-/path-key-3.1.1.tgz",
       "integrity": "sha512-ojmeN0qd+y0jszEtoY48r0Peq5dwMEkIlCOu6Q5f41lfkswXuKtYrhgoTpLnyIcHm24Uhqx+5Tqm2InSwLhE6Q==",
       "dev": true,
+      "optional": true,
+      "peer": true,
       "engines": {
         "node": ">=8"
       }
@@ -34868,6 +35063,8 @@
       "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz",
       "integrity": "sha512-kHxr2zZpYtdmrN1qDjrrX/Z1rR1kG8Dx+gkpK1G4eXmvXswmcE1hTWBWYUzlraYw1/yZp6YuDY77YtvbN0dmDA==",
       "dev": true,
+      "optional": true,
+      "peer": true,
       "dependencies": {
         "shebang-regex": "^3.0.0"
       },
@@ -34880,6 +35077,8 @@
       "resolved": "https://registry.npmjs.org/shebang-regex/-/shebang-regex-3.0.0.tgz",
       "integrity": "sha512-7++dFhtcx3353uBaq8DDR4NuxBetBzC7ZQOhmTQInHEd6bSrXdiEyzCvG07Z44UYdLShWUyXt5M/yhz8ekcb1A==",
       "dev": true,
+      "optional": true,
+      "peer": true,
       "engines": {
         "node": ">=8"
       }
@@ -34889,6 +35088,8 @@
       "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
       "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
       "dev": true,
+      "optional": true,
+      "peer": true,
       "dependencies": {
         "has-flag": "^4.0.0"
       },
@@ -34901,6 +35102,8 @@
       "resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz",
       "integrity": "sha512-BLI3Tl1TW3Pvl70l3yq3Y64i+awpwXqsGBYWkkqMtnbXgrMD+yj7rhW0kuEDxzJaYXGjEW5ogapKNMEKNMjibA==",
       "dev": true,
+      "optional": true,
+      "peer": true,
       "dependencies": {
         "isexe": "^2.0.0"
       },
@@ -35121,6 +35324,8 @@
       "resolved": "https://registry.npmjs.org/oauth-sign/-/oauth-sign-0.9.0.tgz",
       "integrity": "sha512-fexhUFFPTGV8ybAtSIGbV6gOkSv8UtRbDBnAyLQw4QPKkgNlsH2ByPGtMUqdWkos6YCRmAqViwgZrJc/mRDzZQ==",
       "dev": true,
+      "optional": true,
+      "peer": true,
       "engines": {
         "node": "*"
       }
@@ -35962,7 +36167,9 @@
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/performance-now/-/performance-now-2.1.0.tgz",
       "integrity": "sha1-Ywn04OX6kT7BxpMHrjZLSzd8nns=",
-      "dev": true
+      "dev": true,
+      "optional": true,
+      "peer": true
     },
     "node_modules/picocolors": {
       "version": "1.0.0",
@@ -37669,13 +37876,17 @@
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/promise-inflight/-/promise-inflight-1.0.1.tgz",
       "integrity": "sha1-mEcocL8igTL8vdhoEputEsPAKeM=",
-      "dev": true
+      "dev": true,
+      "optional": true,
+      "peer": true
     },
     "node_modules/promise-retry": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/promise-retry/-/promise-retry-2.0.1.tgz",
       "integrity": "sha512-y+WKFlBR8BGXnsNlIHFGPZmyDf3DFMoLhaflAnyZgV6rG6xu+JwesTo2Q9R6XwYmtmwAFCkAk3e35jEdoeh/3g==",
       "dev": true,
+      "optional": true,
+      "peer": true,
       "dependencies": {
         "err-code": "^2.0.2",
         "retry": "^0.12.0"
@@ -37942,6 +38153,8 @@
       "resolved": "https://registry.npmjs.org/quick-lru/-/quick-lru-4.0.1.tgz",
       "integrity": "sha512-ARhCpm70fzdcvNQfPoy49IaanKkTlRWF2JMzqhcJbhSFRZv7nPTvZJdcY7301IPmvW+/p0RgIWnQDLJxifsQ7g==",
       "dev": true,
+      "optional": true,
+      "peer": true,
       "engines": {
         "node": ">=8"
       }
@@ -39081,6 +39294,8 @@
       "integrity": "sha512-MsvtOrfG9ZcrOwAW+Qi+F6HbD0CWXEh9ou77uOb7FM2WPhwT7smM833PzanhJLsgXjN89Ir6V2PczXNnMpwKhw==",
       "deprecated": "request has been deprecated, see https://github.com/request/request/issues/3142",
       "dev": true,
+      "optional": true,
+      "peer": true,
       "dependencies": {
         "aws-sign2": "~0.7.0",
         "aws4": "^1.8.0",
@@ -39112,6 +39327,8 @@
       "resolved": "https://registry.npmjs.org/qs/-/qs-6.5.3.tgz",
       "integrity": "sha512-qxXIEh4pCGfHICj1mAJQ2/2XVZkjCDTcEgfoSQxc/fYivUZxTkk7L3bDBJSoNrEzXI17oUO5Dp07ktqE5KzczA==",
       "dev": true,
+      "optional": true,
+      "peer": true,
       "engines": {
         "node": ">=0.6"
       }
@@ -39121,6 +39338,8 @@
       "resolved": "https://registry.npmjs.org/tough-cookie/-/tough-cookie-2.5.0.tgz",
       "integrity": "sha512-nlLsUzgm1kfLXSXfRZMc1KLAugd4hqJHDTvc2hDIwS3mZAfMEuMbc03SujMF+GEcpaX/qboeycw6iO8JwVv2+g==",
       "dev": true,
+      "optional": true,
+      "peer": true,
       "dependencies": {
         "psl": "^1.1.28",
         "punycode": "^2.1.1"
@@ -39135,6 +39354,8 @@
       "integrity": "sha512-HjSDRw6gZE5JMggctHBcjVak08+KEVhSIiDzFnT9S9aegmp85S/bReBVTb4QTFaRNptJ9kuYaNhnbNEOkbKb/A==",
       "deprecated": "Please upgrade  to version 7 or higher.  Older versions may use Math.random() in certain circumstances, which is known to be problematic.  See https://v8.dev/blog/math-random for details.",
       "dev": true,
+      "optional": true,
+      "peer": true,
       "bin": {
         "uuid": "bin/uuid"
       }
@@ -39259,6 +39480,8 @@
       "resolved": "https://registry.npmjs.org/retry/-/retry-0.12.0.tgz",
       "integrity": "sha1-G0KmJmoh8HQh0bC1S33BZ7AcATs=",
       "dev": true,
+      "optional": true,
+      "peer": true,
       "engines": {
         "node": ">= 4"
       }
@@ -39368,11 +39591,30 @@
         "node": ">=6"
       }
     },
+    "node_modules/sass": {
+      "version": "1.66.1",
+      "resolved": "https://registry.npmjs.org/sass/-/sass-1.66.1.tgz",
+      "integrity": "sha512-50c+zTsZOJVgFfTgwwEzkjA3/QACgdNsKueWPyAR0mRINIvLAStVQBbPg14iuqEQ74NPDbXzJARJ/O4SI1zftA==",
+      "dev": true,
+      "dependencies": {
+        "chokidar": ">=3.0.0 <4.0.0",
+        "immutable": "^4.0.0",
+        "source-map-js": ">=0.6.2 <2.0.0"
+      },
+      "bin": {
+        "sass": "sass.js"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      }
+    },
     "node_modules/sass-graph": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/sass-graph/-/sass-graph-4.0.0.tgz",
       "integrity": "sha512-WSO/MfXqKH7/TS8RdkCX3lVkPFQzCgbqdGsmSKq6tlPU+GpGEsa/5aW18JqItnqh+lPtcjifqdZ/VmiILkKckQ==",
       "dev": true,
+      "optional": true,
+      "peer": true,
       "dependencies": {
         "glob": "^7.0.0",
         "lodash": "^4.17.11",
@@ -39391,6 +39633,8 @@
       "resolved": "https://registry.npmjs.org/y18n/-/y18n-5.0.8.tgz",
       "integrity": "sha512-0pfFzegeDWJHJIAmTLRP2DwHjdF5s7jo9tuztdQxAhINCdvS+3nGINqPd00AphqJR/0LhANUS6/+7SCb98YOfA==",
       "dev": true,
+      "optional": true,
+      "peer": true,
       "engines": {
         "node": ">=10"
       }
@@ -39400,6 +39644,8 @@
       "resolved": "https://registry.npmjs.org/yargs/-/yargs-17.4.1.tgz",
       "integrity": "sha512-WSZD9jgobAg3ZKuCQZSa3g9QOJeCCqLoLAykiWgmXnDo9EPnn4RPf5qVTtzgOx66o6/oqhcA5tHtJXpG8pMt3g==",
       "dev": true,
+      "optional": true,
+      "peer": true,
       "dependencies": {
         "cliui": "^7.0.2",
         "escalade": "^3.1.1",
@@ -39499,6 +39745,8 @@
       "resolved": "https://registry.npmjs.org/scss-tokenizer/-/scss-tokenizer-0.3.0.tgz",
       "integrity": "sha512-14Zl9GcbBvOT9057ZKjpz5yPOyUWG2ojd9D5io28wHRYsOrs7U95Q+KNL87+32p8rc+LvDpbu/i9ZYjM9Q+FsQ==",
       "dev": true,
+      "optional": true,
+      "peer": true,
       "dependencies": {
         "js-base64": "^2.4.3",
         "source-map": "^0.7.1"
@@ -39509,6 +39757,8 @@
       "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.7.3.tgz",
       "integrity": "sha512-CkCj6giN3S+n9qrYiBTX5gystlENnRW5jZeNLHpe6aue+SrHcG5VYwujhW9s4dY31mEGsxBDrHR6oI69fTXsaQ==",
       "dev": true,
+      "optional": true,
+      "peer": true,
       "engines": {
         "node": ">= 8"
       }
@@ -39937,6 +40187,8 @@
       "resolved": "https://registry.npmjs.org/smart-buffer/-/smart-buffer-4.2.0.tgz",
       "integrity": "sha512-94hK0Hh8rPqQl2xXc3HsaBoOXKV20MToPkcXvwbISWLEs+64sBq5kFgn2kJDHb1Pry9yrP0dxrCI9RRci7RXKg==",
       "dev": true,
+      "optional": true,
+      "peer": true,
       "engines": {
         "node": ">= 6.0.0",
         "npm": ">= 3.0.0"
@@ -39947,6 +40199,8 @@
       "resolved": "https://registry.npmjs.org/socks/-/socks-2.6.2.tgz",
       "integrity": "sha512-zDZhHhZRY9PxRruRMR7kMhnf3I8hDs4S3f9RecfnGxvcBHQcKcIH/oUcEWffsfl1XxdYlA7nnlGbbTvPz9D8gA==",
       "dev": true,
+      "optional": true,
+      "peer": true,
       "dependencies": {
         "ip": "^1.1.5",
         "smart-buffer": "^4.2.0"
@@ -39961,6 +40215,8 @@
       "resolved": "https://registry.npmjs.org/socks-proxy-agent/-/socks-proxy-agent-6.2.0.tgz",
       "integrity": "sha512-wWqJhjb32Q6GsrUqzuFkukxb/zzide5quXYcMVpIjxalDBBYy2nqKCFQ/9+Ie4dvOYSQdOk3hUlZSdzZOd3zMQ==",
       "dev": true,
+      "optional": true,
+      "peer": true,
       "dependencies": {
         "agent-base": "^6.0.2",
         "debug": "^4.3.3",
@@ -40078,6 +40334,8 @@
       "resolved": "https://registry.npmjs.org/sshpk/-/sshpk-1.16.1.tgz",
       "integrity": "sha512-HXXqVUq7+pcKeLqqZj6mHFUMvXtOJt1uoUx09pFW6011inTMxqI8BA8PM95myrIyyKwdnzjdFjLiE6KBPVtJIg==",
       "dev": true,
+      "optional": true,
+      "peer": true,
       "dependencies": {
         "asn1": "~0.2.3",
         "assert-plus": "^1.0.0",
@@ -40157,6 +40415,8 @@
       "resolved": "https://registry.npmjs.org/stdout-stream/-/stdout-stream-1.4.1.tgz",
       "integrity": "sha512-j4emi03KXqJWcIeF8eIXkjMFN1Cmb8gUlDYGeBALLPo5qdyTfA9bOtl8m33lRoC+vFMkP3gl0WsDr6+gzxbbTA==",
       "dev": true,
+      "optional": true,
+      "peer": true,
       "dependencies": {
         "readable-stream": "^2.0.1"
       }
@@ -41254,6 +41514,8 @@
       "resolved": "https://registry.npmjs.org/trim-newlines/-/trim-newlines-3.0.1.tgz",
       "integrity": "sha512-c1PTsA3tYrIsLGkJkzHF+w9F2EyxfXGo4UyJc4pFL++FMjnq0HJS69T3M7d//gKrFKwy429bouPescbjecU+Zw==",
       "dev": true,
+      "optional": true,
+      "peer": true,
       "engines": {
         "node": ">=8"
       }
@@ -41272,6 +41534,8 @@
       "resolved": "https://registry.npmjs.org/true-case-path/-/true-case-path-1.0.3.tgz",
       "integrity": "sha512-m6s2OdQe5wgpFMC+pAJ+q9djG82O2jcHPOI6RNg1yy9rCYR+WD6Nbpl32fDpfC56nirdRy+opFa/Vk7HYhqaew==",
       "dev": true,
+      "optional": true,
+      "peer": true,
       "dependencies": {
         "glob": "^7.1.2"
       }
@@ -41321,6 +41585,8 @@
       "resolved": "https://registry.npmjs.org/tunnel-agent/-/tunnel-agent-0.6.0.tgz",
       "integrity": "sha1-J6XeoGs2sEoKmWZ3SykIaPD8QP0=",
       "dev": true,
+      "optional": true,
+      "peer": true,
       "dependencies": {
         "safe-buffer": "^5.0.1"
       },
@@ -41332,7 +41598,9 @@
       "version": "0.14.5",
       "resolved": "https://registry.npmjs.org/tweetnacl/-/tweetnacl-0.14.5.tgz",
       "integrity": "sha1-WuaBd/GS1EViadEIr6k/+HQ/T2Q=",
-      "dev": true
+      "dev": true,
+      "optional": true,
+      "peer": true
     },
     "node_modules/type-check": {
       "version": "0.3.2",
@@ -41552,6 +41820,8 @@
       "resolved": "https://registry.npmjs.org/unique-filename/-/unique-filename-1.1.1.tgz",
       "integrity": "sha512-Vmp0jIp2ln35UTXuryvjzkjGdRyf9b2lTXuSYUiPmzRcl3FDtYqAwOnTJkAngD9SWhnoJzDbTKwaOrZ+STtxNQ==",
       "dev": true,
+      "optional": true,
+      "peer": true,
       "dependencies": {
         "unique-slug": "^2.0.0"
       }
@@ -41561,6 +41831,8 @@
       "resolved": "https://registry.npmjs.org/unique-slug/-/unique-slug-2.0.2.tgz",
       "integrity": "sha512-zoWr9ObaxALD3DOPfjPSqxt4fnZiWblxHIgeWqW8x7UqDzEtHEQLzji2cuJYQFCU6KmoJikOYAZlrTHHebjx2w==",
       "dev": true,
+      "optional": true,
+      "peer": true,
       "dependencies": {
         "imurmurhash": "^0.1.4"
       }
@@ -41924,6 +42196,8 @@
       "engines": [
         "node >=0.6.0"
       ],
+      "optional": true,
+      "peer": true,
       "dependencies": {
         "assert-plus": "^1.0.0",
         "core-util-is": "1.0.2",
@@ -42816,6 +43090,8 @@
       "resolved": "https://registry.npmjs.org/yargs-parser/-/yargs-parser-21.0.1.tgz",
       "integrity": "sha512-9BK1jFpLzJROCI5TzwZL/TU4gqjK5xiHV/RfWLOahrjAko/e4DJkRDZQXfvqAsiZzzYhgAzbgz6lg48jcm4GLg==",
       "dev": true,
+      "optional": true,
+      "peer": true,
       "engines": {
         "node": ">=12"
       }
@@ -45308,7 +45584,9 @@
       "version": "1.1.3",
       "resolved": "https://registry.npmjs.org/@gar/promisify/-/promisify-1.1.3.tgz",
       "integrity": "sha512-k2Ty1JcVojjJFwrg/ThKi2ujJ7XNLYaFGNB/bWT9wGR+oSMJHMa5w+CUq6p/pVrKeNNgA7pCqEcjSnHVoqJQFw==",
-      "dev": true
+      "dev": true,
+      "optional": true,
+      "peer": true
     },
     "@gatsbyjs/webpack-hot-middleware": {
       "version": "2.25.3",
@@ -46875,6 +47153,8 @@
       "resolved": "https://registry.npmjs.org/@npmcli/fs/-/fs-1.1.1.tgz",
       "integrity": "sha512-8KG5RD0GVP4ydEzRn/I4BNDuxDtqVbOdm8675T49OIG/NGhaK0pjPX7ZcDlvKYbA+ulvVK3ztfcF4uBdOxuJbQ==",
       "dev": true,
+      "optional": true,
+      "peer": true,
       "requires": {
         "@gar/promisify": "^1.0.1",
         "semver": "^7.3.5"
@@ -46885,6 +47165,8 @@
           "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-6.0.0.tgz",
           "integrity": "sha512-Jo6dJ04CmSjuznwJSS3pUeWmd/H0ffTlkXXgwZi+eq1UCmqQwCh+eLsYOYCwY991i2Fah4h1BEMCx4qThGbsiA==",
           "dev": true,
+          "optional": true,
+          "peer": true,
           "requires": {
             "yallist": "^4.0.0"
           }
@@ -46894,6 +47176,8 @@
           "resolved": "https://registry.npmjs.org/semver/-/semver-7.3.7.tgz",
           "integrity": "sha512-QlYTucUYOews+WeEujDoEGziz4K6c47V/Bd+LjSSYcA94p+DmINdf7ncaUinThfvZyu13lN9OY1XDxt8C0Tw0g==",
           "dev": true,
+          "optional": true,
+          "peer": true,
           "requires": {
             "lru-cache": "^6.0.0"
           }
@@ -46902,7 +47186,9 @@
           "version": "4.0.0",
           "resolved": "https://registry.npmjs.org/yallist/-/yallist-4.0.0.tgz",
           "integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==",
-          "dev": true
+          "dev": true,
+          "optional": true,
+          "peer": true
         }
       }
     },
@@ -46911,6 +47197,8 @@
       "resolved": "https://registry.npmjs.org/@npmcli/move-file/-/move-file-1.1.2.tgz",
       "integrity": "sha512-1SUf/Cg2GzGDyaf15aR9St9TWlb+XvbZXWpDx8YKs7MLzMH/BCeopv+y9vzrzgkfykCGuWOlSu3mZhj2+FQcrg==",
       "dev": true,
+      "optional": true,
+      "peer": true,
       "requires": {
         "mkdirp": "^1.0.4",
         "rimraf": "^3.0.2"
@@ -46920,13 +47208,17 @@
           "version": "1.0.4",
           "resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-1.0.4.tgz",
           "integrity": "sha512-vVqVZQyf3WLx2Shd0qJ9xuvqgAyKPLAiqITEtqW0oIUjzo3PePDd6fW9iFz30ef7Ysp/oiWqbhszeGWW2T6Gzw==",
-          "dev": true
+          "dev": true,
+          "optional": true,
+          "peer": true
         },
         "rimraf": {
           "version": "3.0.2",
           "resolved": "https://registry.npmjs.org/rimraf/-/rimraf-3.0.2.tgz",
           "integrity": "sha512-JZkJMZkAGFFPP2YqXZXPbMlMBgsxzE8ILs4lMIX/2o0L9UBw9O/Y3o6wFw/i9YLapcUJWwqbi3kdxIPdC62TIA==",
           "dev": true,
+          "optional": true,
+          "peer": true,
           "requires": {
             "glob": "^7.1.3"
           }
@@ -54210,7 +54502,9 @@
       "version": "1.2.2",
       "resolved": "https://registry.npmjs.org/@types/minimist/-/minimist-1.2.2.tgz",
       "integrity": "sha512-jhuKLIRrhvCPLqwPcx6INqmKeiA5EWrsCOPhrlFSrbrmU4ZMPjj5Ul/oLCMDO98XRUIwVm78xICz4EPCektzeQ==",
-      "dev": true
+      "dev": true,
+      "optional": true,
+      "peer": true
     },
     "@types/mongodb": {
       "version": "3.6.20",
@@ -54814,6 +55108,8 @@
       "resolved": "https://registry.npmjs.org/agentkeepalive/-/agentkeepalive-4.2.1.tgz",
       "integrity": "sha512-Zn4cw2NEqd+9fiSVWMscnjyQ1a8Yfoc5oBajLeo5w+YBHgDUcEBY2hS4YpTz6iN5f/2zQiktcuM6tS8x1p9dpA==",
       "dev": true,
+      "optional": true,
+      "peer": true,
       "requires": {
         "debug": "^4.1.0",
         "depd": "^1.1.2",
@@ -55162,13 +55458,17 @@
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/arrify/-/arrify-1.0.1.tgz",
       "integrity": "sha1-iYUI2iIm84DfkEcoRWhJwVAaSw0=",
-      "dev": true
+      "dev": true,
+      "optional": true,
+      "peer": true
     },
     "asn1": {
       "version": "0.2.4",
       "resolved": "https://registry.npmjs.org/asn1/-/asn1-0.2.4.tgz",
       "integrity": "sha512-jxwzQpLQjSmWXgwaCZE9Nz+glAG01yF1QnWgbhGwHI5A6FRIEY6IVqtHhIepHqI7/kyEyQEagBC5mBEFlIYvdg==",
       "dev": true,
+      "optional": true,
+      "peer": true,
       "requires": {
         "safer-buffer": "~2.1.0"
       }
@@ -55189,7 +55489,9 @@
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/assert-plus/-/assert-plus-1.0.0.tgz",
       "integrity": "sha1-8S4PPF13sLHN2RRpQuTpbB5N1SU=",
-      "dev": true
+      "dev": true,
+      "optional": true,
+      "peer": true
     },
     "ast-types": {
       "version": "0.16.1",
@@ -55228,7 +55530,9 @@
       "version": "0.1.3",
       "resolved": "https://registry.npmjs.org/async-foreach/-/async-foreach-0.1.3.tgz",
       "integrity": "sha1-NhIfhFwFeBct5Bmpfb6x0W7DRUI=",
-      "dev": true
+      "dev": true,
+      "optional": true,
+      "peer": true
     },
     "async-limiter": {
       "version": "1.0.1",
@@ -55357,13 +55661,17 @@
       "version": "0.7.0",
       "resolved": "https://registry.npmjs.org/aws-sign2/-/aws-sign2-0.7.0.tgz",
       "integrity": "sha1-tG6JCTSpWR8tL2+G1+ap8bP+dqg=",
-      "dev": true
+      "dev": true,
+      "optional": true,
+      "peer": true
     },
     "aws4": {
       "version": "1.9.1",
       "resolved": "https://registry.npmjs.org/aws4/-/aws4-1.9.1.tgz",
       "integrity": "sha512-wMHVg2EOHaMRxbzgFJ9gtjOOCrI80OHLG14rxi28XwOW8ux6IiEbRCGGGqCtdAIg4FQCbW20k9RsT4y3gJlFug==",
-      "dev": true
+      "dev": true,
+      "optional": true,
+      "peer": true
     },
     "axe-core": {
       "version": "4.3.1",
@@ -55936,6 +56244,8 @@
       "resolved": "https://registry.npmjs.org/bcrypt-pbkdf/-/bcrypt-pbkdf-1.0.2.tgz",
       "integrity": "sha1-pDAdOJtqQ/m2f/PKEaP2Y342Dp4=",
       "dev": true,
+      "optional": true,
+      "peer": true,
       "requires": {
         "tweetnacl": "^0.14.3"
       }
@@ -56304,6 +56614,8 @@
       "resolved": "https://registry.npmjs.org/camelcase-keys/-/camelcase-keys-6.2.2.tgz",
       "integrity": "sha512-YrwaA0vEKazPBkn0ipTiMpSajYDSe+KjQfrjhcBMxJt/znbvlHd8Pw/Vamaz5EB4Wfhs3SUR3Z9mwRu/P3s3Yg==",
       "dev": true,
+      "optional": true,
+      "peer": true,
       "requires": {
         "camelcase": "^5.3.1",
         "map-obj": "^4.0.0",
@@ -56342,7 +56654,9 @@
       "version": "0.12.0",
       "resolved": "https://registry.npmjs.org/caseless/-/caseless-0.12.0.tgz",
       "integrity": "sha1-G2gcIf+EAzyCZUMJBolCDRhxUdw=",
-      "dev": true
+      "dev": true,
+      "optional": true,
+      "peer": true
     },
     "chalk": {
       "version": "2.4.2",
@@ -58156,6 +58470,8 @@
       "resolved": "https://registry.npmjs.org/dashdash/-/dashdash-1.14.1.tgz",
       "integrity": "sha1-hTz6D3y+L+1d4gMmuN1YEDX24vA=",
       "dev": true,
+      "optional": true,
+      "peer": true,
       "requires": {
         "assert-plus": "^1.0.0"
       }
@@ -58233,13 +58549,17 @@
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/decamelize/-/decamelize-1.2.0.tgz",
       "integrity": "sha1-9lNNFRSCabIDUue+4m9QH5oZEpA=",
-      "dev": true
+      "dev": true,
+      "optional": true,
+      "peer": true
     },
     "decamelize-keys": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/decamelize-keys/-/decamelize-keys-1.1.0.tgz",
       "integrity": "sha1-0XGoeTMlKAfrPLYdwcFEXQeN8tk=",
       "dev": true,
+      "optional": true,
+      "peer": true,
       "requires": {
         "decamelize": "^1.1.0",
         "map-obj": "^1.0.0"
@@ -58249,7 +58569,9 @@
           "version": "1.0.1",
           "resolved": "https://registry.npmjs.org/map-obj/-/map-obj-1.0.1.tgz",
           "integrity": "sha1-2TPOuSBdgr3PSIb2dCvcK03qFG0=",
-          "dev": true
+          "dev": true,
+          "optional": true,
+          "peer": true
         }
       }
     },
@@ -58409,7 +58731,9 @@
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/depd/-/depd-1.1.2.tgz",
       "integrity": "sha1-m81S4UwJd2PnSbJ0xDRu0uVgtak=",
-      "dev": true
+      "dev": true,
+      "optional": true,
+      "peer": true
     },
     "dequal": {
       "version": "2.0.3",
@@ -58653,6 +58977,8 @@
       "resolved": "https://registry.npmjs.org/ecc-jsbn/-/ecc-jsbn-0.1.2.tgz",
       "integrity": "sha1-OoOpBOVDUyh4dMVkt1SThoSamMk=",
       "dev": true,
+      "optional": true,
+      "peer": true,
       "requires": {
         "jsbn": "~0.1.0",
         "safer-buffer": "^2.1.0"
@@ -58719,6 +59045,7 @@
       "resolved": "https://registry.npmjs.org/encoding/-/encoding-0.1.12.tgz",
       "integrity": "sha1-U4tm8+5izRq1HsMjgp0flIDHS+s=",
       "optional": true,
+      "peer": true,
       "requires": {
         "iconv-lite": "~0.4.13"
       }
@@ -58776,7 +59103,9 @@
       "version": "2.2.1",
       "resolved": "https://registry.npmjs.org/env-paths/-/env-paths-2.2.1.tgz",
       "integrity": "sha512-+h1lkLKhZMTYjog1VEpJNG7NZJWcuc2DDk/qsqSTRRCOXiLjeQ1d1/udrUGhqMxUgAlwKNZ0cf2uqan5GLuS2A==",
-      "dev": true
+      "dev": true,
+      "optional": true,
+      "peer": true
     },
     "envinfo": {
       "version": "7.8.1",
@@ -58788,7 +59117,9 @@
       "version": "2.0.3",
       "resolved": "https://registry.npmjs.org/err-code/-/err-code-2.0.3.tgz",
       "integrity": "sha512-2bmlRpNKBxT/CRmPOlyISQpNj+qSeYvcym/uT0Jx2bMOlKLtSy1ZmLuVxSEKKyor/N5yhvp/ZiG1oE3DEYMSFA==",
-      "dev": true
+      "dev": true,
+      "optional": true,
+      "peer": true
     },
     "error-ex": {
       "version": "1.3.2",
@@ -60209,7 +60540,9 @@
       "version": "1.3.0",
       "resolved": "https://registry.npmjs.org/extsprintf/-/extsprintf-1.3.0.tgz",
       "integrity": "sha1-lpGEQOMEGnpBT4xS48V06zw+HgU=",
-      "dev": true
+      "dev": true,
+      "optional": true,
+      "peer": true
     },
     "fast-deep-equal": {
       "version": "3.1.3",
@@ -60606,7 +60939,9 @@
       "version": "0.6.1",
       "resolved": "https://registry.npmjs.org/forever-agent/-/forever-agent-0.6.1.tgz",
       "integrity": "sha1-+8cfDEGt6zf5bFd60e1C2P2sypE=",
-      "dev": true
+      "dev": true,
+      "optional": true,
+      "peer": true
     },
     "fork-ts-checker-webpack-plugin": {
       "version": "7.3.0",
@@ -60725,6 +61060,8 @@
       "resolved": "https://registry.npmjs.org/form-data/-/form-data-2.3.3.tgz",
       "integrity": "sha512-1lLKB2Mu3aGP1Q/2eCOx0fNbRMe7XdwktwOruhfqqd0rIJWwN4Dh+E3hrPSlDCXnSR7UtZ1N38rVXm+6+MEhJQ==",
       "dev": true,
+      "optional": true,
+      "peer": true,
       "requires": {
         "asynckit": "^0.4.0",
         "combined-stream": "^1.0.6",
@@ -60839,6 +61176,8 @@
       "resolved": "https://registry.npmjs.org/gaze/-/gaze-1.1.3.tgz",
       "integrity": "sha512-BRdNm8hbWzFzWHERTrejLqwHDfS4GibPoq5wjTPIoJHoBtKGPg3xAFfxmM+9ztbXelxcf2hwQcaz1PtmFeue8g==",
       "dev": true,
+      "optional": true,
+      "peer": true,
       "requires": {
         "globule": "^1.0.0"
       }
@@ -60891,7 +61230,9 @@
       "version": "4.0.1",
       "resolved": "https://registry.npmjs.org/get-stdin/-/get-stdin-4.0.1.tgz",
       "integrity": "sha1-uWjGsKBDhDJJAui/Gl3zJXmkUP4=",
-      "dev": true
+      "dev": true,
+      "optional": true,
+      "peer": true
     },
     "get-stream": {
       "version": "6.0.1",
@@ -60904,6 +61245,8 @@
       "resolved": "https://registry.npmjs.org/getpass/-/getpass-0.1.7.tgz",
       "integrity": "sha1-Xv+OPmhNVprkyysSgmBOi6YhSfo=",
       "dev": true,
+      "optional": true,
+      "peer": true,
       "requires": {
         "assert-plus": "^1.0.0"
       }
@@ -61009,6 +61352,8 @@
       "resolved": "https://registry.npmjs.org/globule/-/globule-1.3.2.tgz",
       "integrity": "sha512-7IDTQTIu2xzXkT+6mlluidnWo+BypnbSoEVVQCGfzqnl5Ik8d3e1d4wycb8Rj9tWW+Z39uPWsdlquqiqPCd/pA==",
       "dev": true,
+      "optional": true,
+      "peer": true,
       "requires": {
         "glob": "~7.1.1",
         "lodash": "~4.17.10",
@@ -61087,13 +61432,17 @@
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/har-schema/-/har-schema-2.0.0.tgz",
       "integrity": "sha1-qUwiJOvKwEeCoNkDVSHyRzW37JI=",
-      "dev": true
+      "dev": true,
+      "optional": true,
+      "peer": true
     },
     "har-validator": {
       "version": "5.1.3",
       "resolved": "https://registry.npmjs.org/har-validator/-/har-validator-5.1.3.tgz",
       "integrity": "sha512-sNvOCzEQNr/qrvJgc3UG/kD4QtlHycrzwS+6mfTrrSq97BvaYcPZZI1ZSqGSPR73Cxn4LKTD4PttRwfU7jWq5g==",
       "dev": true,
+      "optional": true,
+      "peer": true,
       "requires": {
         "ajv": "^6.5.5",
         "har-schema": "^2.0.0"
@@ -61103,7 +61452,9 @@
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/hard-rejection/-/hard-rejection-2.1.0.tgz",
       "integrity": "sha512-VIZB+ibDhx7ObhAe7OVtoEbuP4h/MuOTHJ+J8h/eBXotJYl0fBgR72xDFCKgIh22OJZIOVNxBMWuhAr10r8HdA==",
-      "dev": true
+      "dev": true,
+      "optional": true,
+      "peer": true
     },
     "has": {
       "version": "1.0.3",
@@ -61479,7 +61830,9 @@
       "version": "4.1.1",
       "resolved": "https://registry.npmjs.org/http-cache-semantics/-/http-cache-semantics-4.1.1.tgz",
       "integrity": "sha512-er295DKPVsV82j5kw1Gjt+ADA/XYHsajl82cGNQG2eyoPkvgUhX+nDIyelzhIWbbsXP39EHcI6l5tYs2FYqYXQ==",
-      "dev": true
+      "dev": true,
+      "optional": true,
+      "peer": true
     },
     "http-errors": {
       "version": "2.0.0",
@@ -61516,6 +61869,8 @@
       "resolved": "https://registry.npmjs.org/http-signature/-/http-signature-1.2.0.tgz",
       "integrity": "sha1-muzZJRFHcvPZW2WmCruPfBj7rOE=",
       "dev": true,
+      "optional": true,
+      "peer": true,
       "requires": {
         "assert-plus": "^1.0.0",
         "jsprim": "^1.2.2",
@@ -61542,6 +61897,8 @@
       "resolved": "https://registry.npmjs.org/humanize-ms/-/humanize-ms-1.2.1.tgz",
       "integrity": "sha1-xG4xWaKT9riW2ikxbYtv6Lt5u+0=",
       "dev": true,
+      "optional": true,
+      "peer": true,
       "requires": {
         "ms": "^2.0.0"
       }
@@ -61724,6 +62081,12 @@
       "resolved": "https://registry.npmjs.org/immediate/-/immediate-3.0.6.tgz",
       "integrity": "sha1-nbHb0Pr43m++D13V5Wu2BigN5ps="
     },
+    "immutable": {
+      "version": "4.3.4",
+      "resolved": "https://registry.npmjs.org/immutable/-/immutable-4.3.4.tgz",
+      "integrity": "sha512-fsXeu4J4i6WNWSikpI88v/PcVflZz+6kMhUfIwc5SY+poQRPnaf5V7qds6SUyUN3cVxEzuCab7QIoLOQ+DQ1wA==",
+      "dev": true
+    },
     "import-fresh": {
       "version": "3.3.0",
       "resolved": "https://registry.npmjs.org/import-fresh/-/import-fresh-3.3.0.tgz",
@@ -61816,7 +62179,9 @@
       "version": "1.0.4",
       "resolved": "https://registry.npmjs.org/infer-owner/-/infer-owner-1.0.4.tgz",
       "integrity": "sha512-IClj+Xz94+d7irH5qRyfJonOdfTzuDaifE6ZPWfx0N0+/ATZCbuTPq2prFl526urkQd90WyUKIh1DfBQ2hMz9A==",
-      "dev": true
+      "dev": true,
+      "optional": true,
+      "peer": true
     },
     "inflight": {
       "version": "1.0.6",
@@ -61871,7 +62236,9 @@
       "version": "1.1.5",
       "resolved": "https://registry.npmjs.org/ip/-/ip-1.1.5.tgz",
       "integrity": "sha1-vd7XARQpCCjAoDnnLvJfWq7ENUo=",
-      "dev": true
+      "dev": true,
+      "optional": true,
+      "peer": true
     },
     "ipaddr.js": {
       "version": "1.9.1",
@@ -62029,7 +62396,9 @@
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/is-lambda/-/is-lambda-1.0.1.tgz",
       "integrity": "sha1-PZh3iZ5qU+/AFgUEzeFfgubwYdU=",
-      "dev": true
+      "dev": true,
+      "optional": true,
+      "peer": true
     },
     "is-nan": {
       "version": "1.3.2",
@@ -62222,7 +62591,9 @@
       "version": "0.1.2",
       "resolved": "https://registry.npmjs.org/isstream/-/isstream-0.1.2.tgz",
       "integrity": "sha1-R+Y/evVa+m+S4VAOaQ64uFKcCZo=",
-      "dev": true
+      "dev": true,
+      "optional": true,
+      "peer": true
     },
     "istanbul-lib-coverage": {
       "version": "3.2.0",
@@ -66045,7 +66416,9 @@
       "version": "2.6.4",
       "resolved": "https://registry.npmjs.org/js-base64/-/js-base64-2.6.4.tgz",
       "integrity": "sha512-pZe//GGmwJndub7ZghVHz7vjb2LgC1m8B07Au3eYqeqv9emhESByMXxaEgkUkEqJe87oBbSniGYoQNIBklc7IQ==",
-      "dev": true
+      "dev": true,
+      "optional": true,
+      "peer": true
     },
     "js-beautify": {
       "version": "1.14.8",
@@ -66125,7 +66498,9 @@
       "version": "0.1.1",
       "resolved": "https://registry.npmjs.org/jsbn/-/jsbn-0.1.1.tgz",
       "integrity": "sha1-peZUwuWi3rXyAdls77yoDA7y9RM=",
-      "dev": true
+      "dev": true,
+      "optional": true,
+      "peer": true
     },
     "jscodeshift": {
       "version": "0.14.0",
@@ -66449,7 +66824,9 @@
       "version": "0.4.0",
       "resolved": "https://registry.npmjs.org/json-schema/-/json-schema-0.4.0.tgz",
       "integrity": "sha512-es94M3nTIfsEPisRafak+HDLfHXnKBhV3vU5eqPcS3flIWqcxJWgXHXiey3YrpaNsanY5ei1VoYEbOzijuq9BA==",
-      "dev": true
+      "dev": true,
+      "optional": true,
+      "peer": true
     },
     "json-schema-traverse": {
       "version": "0.4.1",
@@ -66465,7 +66842,9 @@
       "version": "5.0.1",
       "resolved": "https://registry.npmjs.org/json-stringify-safe/-/json-stringify-safe-5.0.1.tgz",
       "integrity": "sha1-Epai1Y/UXxmg9s4B1lcB4sc1tus=",
-      "dev": true
+      "dev": true,
+      "optional": true,
+      "peer": true
     },
     "json5": {
       "version": "2.2.3",
@@ -66495,6 +66874,8 @@
       "resolved": "https://registry.npmjs.org/jsprim/-/jsprim-1.4.2.tgz",
       "integrity": "sha512-P2bSOMAc/ciLz6DzgjVlGJP9+BrJWu5UDGK70C2iweC5QBIeFf0ZXRvGjEj2uYgrY2MkAAhsSWHDWlFtEroZWw==",
       "dev": true,
+      "optional": true,
+      "peer": true,
       "requires": {
         "assert-plus": "1.0.0",
         "extsprintf": "1.3.0",
@@ -67143,6 +67524,8 @@
       "resolved": "https://registry.npmjs.org/make-fetch-happen/-/make-fetch-happen-9.1.0.tgz",
       "integrity": "sha512-+zopwDy7DNknmwPQplem5lAZX/eCOzSvSNNcSKm5eVwTkOBzoktEfXsa9L23J/GIRhxRsaxzkPEhrJEpE2F4Gg==",
       "dev": true,
+      "optional": true,
+      "peer": true,
       "requires": {
         "agentkeepalive": "^4.1.3",
         "cacache": "^15.2.0",
@@ -67167,6 +67550,8 @@
           "resolved": "https://registry.npmjs.org/cacache/-/cacache-15.3.0.tgz",
           "integrity": "sha512-VVdYzXEn+cnbXpFgWs5hTT7OScegHVmLhJIR8Ufqk3iFD6A6j5iSX1KuBTfNEv4tdJWE2PzA6IVFtcLC7fN9wQ==",
           "dev": true,
+          "optional": true,
+          "peer": true,
           "requires": {
             "@npmcli/fs": "^1.0.0",
             "@npmcli/move-file": "^1.0.1",
@@ -67192,13 +67577,17 @@
           "version": "2.0.0",
           "resolved": "https://registry.npmjs.org/chownr/-/chownr-2.0.0.tgz",
           "integrity": "sha512-bIomtDF5KGpdogkLd9VspvFzk9KfpyyGlS8YFVZl7TGPBHL5snIOnxeshwVgPteQ9b4Eydl+pVbIyE1DcvCWgQ==",
-          "dev": true
+          "dev": true,
+          "optional": true,
+          "peer": true
         },
         "lru-cache": {
           "version": "6.0.0",
           "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-6.0.0.tgz",
           "integrity": "sha512-Jo6dJ04CmSjuznwJSS3pUeWmd/H0ffTlkXXgwZi+eq1UCmqQwCh+eLsYOYCwY991i2Fah4h1BEMCx4qThGbsiA==",
           "dev": true,
+          "optional": true,
+          "peer": true,
           "requires": {
             "yallist": "^4.0.0"
           }
@@ -67207,13 +67596,17 @@
           "version": "1.0.4",
           "resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-1.0.4.tgz",
           "integrity": "sha512-vVqVZQyf3WLx2Shd0qJ9xuvqgAyKPLAiqITEtqW0oIUjzo3PePDd6fW9iFz30ef7Ysp/oiWqbhszeGWW2T6Gzw==",
-          "dev": true
+          "dev": true,
+          "optional": true,
+          "peer": true
         },
         "rimraf": {
           "version": "3.0.2",
           "resolved": "https://registry.npmjs.org/rimraf/-/rimraf-3.0.2.tgz",
           "integrity": "sha512-JZkJMZkAGFFPP2YqXZXPbMlMBgsxzE8ILs4lMIX/2o0L9UBw9O/Y3o6wFw/i9YLapcUJWwqbi3kdxIPdC62TIA==",
           "dev": true,
+          "optional": true,
+          "peer": true,
           "requires": {
             "glob": "^7.1.3"
           }
@@ -67223,6 +67616,8 @@
           "resolved": "https://registry.npmjs.org/ssri/-/ssri-8.0.1.tgz",
           "integrity": "sha512-97qShzy1AiyxvPNIkLWoGua7xoQzzPjQ0HAH4B0rWKo7SZ6USuPcrUiAFrws0UH8RrbWmgq3LMTObhPIHbbBeQ==",
           "dev": true,
+          "optional": true,
+          "peer": true,
           "requires": {
             "minipass": "^3.1.1"
           }
@@ -67231,7 +67626,9 @@
           "version": "4.0.0",
           "resolved": "https://registry.npmjs.org/yallist/-/yallist-4.0.0.tgz",
           "integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==",
-          "dev": true
+          "dev": true,
+          "optional": true,
+          "peer": true
         }
       }
     },
@@ -67248,7 +67645,9 @@
       "version": "4.3.0",
       "resolved": "https://registry.npmjs.org/map-obj/-/map-obj-4.3.0.tgz",
       "integrity": "sha512-hdN1wVrZbb29eBGiGjJbeP8JbKjq1urkHJ/LIP/NY48MZ1QVXUsQBV1G1zvYFHn1XE06cwjBsOI2K3Ulnj1YXQ==",
-      "dev": true
+      "dev": true,
+      "optional": true,
+      "peer": true
     },
     "map-or-similar": {
       "version": "1.5.0",
@@ -67352,6 +67751,8 @@
       "resolved": "https://registry.npmjs.org/meow/-/meow-9.0.0.tgz",
       "integrity": "sha512-+obSblOQmRhcyBt62furQqRAQpNyWXo8BuQ5bN7dG8wmwQ+vwHKp/rCFD4CrTP8CsDQD1sjoZ94K417XEUk8IQ==",
       "dev": true,
+      "optional": true,
+      "peer": true,
       "requires": {
         "@types/minimist": "^1.2.0",
         "camelcase-keys": "^6.2.2",
@@ -67372,6 +67773,8 @@
           "resolved": "https://registry.npmjs.org/hosted-git-info/-/hosted-git-info-4.0.2.tgz",
           "integrity": "sha512-c9OGXbZ3guC/xOlCg1Ci/VgWlwsqDv1yMQL1CWqXDL0hDjXuNcq0zuR4xqPSuasI3kqFDhqSyTjREz5gzq0fXg==",
           "dev": true,
+          "optional": true,
+          "peer": true,
           "requires": {
             "lru-cache": "^6.0.0"
           }
@@ -67381,6 +67784,8 @@
           "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-6.0.0.tgz",
           "integrity": "sha512-Jo6dJ04CmSjuznwJSS3pUeWmd/H0ffTlkXXgwZi+eq1UCmqQwCh+eLsYOYCwY991i2Fah4h1BEMCx4qThGbsiA==",
           "dev": true,
+          "optional": true,
+          "peer": true,
           "requires": {
             "yallist": "^4.0.0"
           }
@@ -67390,6 +67795,8 @@
           "resolved": "https://registry.npmjs.org/normalize-package-data/-/normalize-package-data-3.0.3.tgz",
           "integrity": "sha512-p2W1sgqij3zMMyRC067Dg16bfzVH+w7hyegmpIvZ4JNjqtGOVAIvLmjBx3yP7YTe9vKJgkoNOPjwQGogDoMXFA==",
           "dev": true,
+          "optional": true,
+          "peer": true,
           "requires": {
             "hosted-git-info": "^4.0.1",
             "is-core-module": "^2.5.0",
@@ -67402,6 +67809,8 @@
           "resolved": "https://registry.npmjs.org/semver/-/semver-7.3.5.tgz",
           "integrity": "sha512-PoeGJYh8HK4BTO/a9Tf6ZG3veo/A7ZVsYrSA6J8ny9nb3B1VrpkuN+z9OE5wfE5p6H4LchYZsegiQgbJD94ZFQ==",
           "dev": true,
+          "optional": true,
+          "peer": true,
           "requires": {
             "lru-cache": "^6.0.0"
           }
@@ -67410,19 +67819,25 @@
           "version": "0.18.1",
           "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-0.18.1.tgz",
           "integrity": "sha512-OIAYXk8+ISY+qTOwkHtKqzAuxchoMiD9Udx+FSGQDuiRR+PJKJHc2NJAXlbhkGwTt/4/nKZxELY1w3ReWOL8mw==",
-          "dev": true
+          "dev": true,
+          "optional": true,
+          "peer": true
         },
         "yallist": {
           "version": "4.0.0",
           "resolved": "https://registry.npmjs.org/yallist/-/yallist-4.0.0.tgz",
           "integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==",
-          "dev": true
+          "dev": true,
+          "optional": true,
+          "peer": true
         },
         "yargs-parser": {
           "version": "20.2.9",
           "resolved": "https://registry.npmjs.org/yargs-parser/-/yargs-parser-20.2.9.tgz",
           "integrity": "sha512-y11nGElTIV+CT3Zv9t7VKl+Q3hTQoT9a1Qzezhhl6Rp21gJ/IVTW7Z3y9EWXhuUBC2Shnf+DX0antecpAwSP8w==",
-          "dev": true
+          "dev": true,
+          "optional": true,
+          "peer": true
         }
       }
     },
@@ -67544,6 +67959,8 @@
       "resolved": "https://registry.npmjs.org/minimist-options/-/minimist-options-4.1.0.tgz",
       "integrity": "sha512-Q4r8ghd80yhO/0j1O3B2BjweX3fiHg9cdOwjJd2J76Q135c+NDxGCqdYKQ1SKBuFfgWbAUzBfvYjPUEeNgqN1A==",
       "dev": true,
+      "optional": true,
+      "peer": true,
       "requires": {
         "arrify": "^1.0.1",
         "is-plain-obj": "^1.1.0",
@@ -67554,13 +67971,17 @@
           "version": "1.1.0",
           "resolved": "https://registry.npmjs.org/is-plain-obj/-/is-plain-obj-1.1.0.tgz",
           "integrity": "sha1-caUMhCnfync8kqOQpKA7OfzVHT4=",
-          "dev": true
+          "dev": true,
+          "optional": true,
+          "peer": true
         },
         "kind-of": {
           "version": "6.0.3",
           "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-6.0.3.tgz",
           "integrity": "sha512-dcS1ul+9tmeD95T+x28/ehLgd9mENa3LsvDTtzm3vyBEO7RPptvAD+t44WVXaUjTBRcrpFeFlC8WCruUR456hw==",
-          "dev": true
+          "dev": true,
+          "optional": true,
+          "peer": true
         }
       }
     },
@@ -67586,6 +68007,8 @@
       "resolved": "https://registry.npmjs.org/minipass-collect/-/minipass-collect-1.0.2.tgz",
       "integrity": "sha512-6T6lH0H8OG9kITm/Jm6tdooIbogG9e0tLgpY6mphXSm/A9u8Nq1ryBG+Qspiub9LjWlBPsPS3tWQ/Botq4FdxA==",
       "dev": true,
+      "optional": true,
+      "peer": true,
       "requires": {
         "minipass": "^3.0.0"
       }
@@ -67595,6 +68018,8 @@
       "resolved": "https://registry.npmjs.org/minipass-fetch/-/minipass-fetch-1.4.1.tgz",
       "integrity": "sha512-CGH1eblLq26Y15+Azk7ey4xh0J/XfJfrCox5LDJiKqI2Q2iwOLOKrlmIaODiSQS8d18jalF6y2K2ePUm0CmShw==",
       "dev": true,
+      "optional": true,
+      "peer": true,
       "requires": {
         "encoding": "^0.1.12",
         "minipass": "^3.1.0",
@@ -67607,6 +68032,8 @@
       "resolved": "https://registry.npmjs.org/minipass-flush/-/minipass-flush-1.0.5.tgz",
       "integrity": "sha512-JmQSYYpPUqX5Jyn1mXaRwOda1uQ8HP5KAT/oDSLCzt1BYRhQU0/hDtsB1ufZfEEzMZ9aAVmsBw8+FWsIXlClWw==",
       "dev": true,
+      "optional": true,
+      "peer": true,
       "requires": {
         "minipass": "^3.0.0"
       }
@@ -67616,6 +68043,8 @@
       "resolved": "https://registry.npmjs.org/minipass-pipeline/-/minipass-pipeline-1.2.4.tgz",
       "integrity": "sha512-xuIq7cIOt09RPRJ19gdi4b+RiNvDFYe5JH+ggNvBqGqpQXcru3PcRmOZuHBKWK1Txf9+cQ+HMVN4d6z46LZP7A==",
       "dev": true,
+      "optional": true,
+      "peer": true,
       "requires": {
         "minipass": "^3.0.0"
       }
@@ -67625,6 +68054,8 @@
       "resolved": "https://registry.npmjs.org/minipass-sized/-/minipass-sized-1.0.3.tgz",
       "integrity": "sha512-MbkQQ2CTiBMlA2Dm/5cY+9SWFEN8pzzOXi6rlM5Xxq0Yqbda5ZQy9sU75a673FE9ZK0Zsbr6Y5iP6u9nktfg2g==",
       "dev": true,
+      "optional": true,
+      "peer": true,
       "requires": {
         "minipass": "^3.0.0"
       }
@@ -68425,7 +68856,9 @@
       "version": "2.14.0",
       "resolved": "https://registry.npmjs.org/nan/-/nan-2.14.0.tgz",
       "integrity": "sha512-INOFj37C7k3AfaNTtX8RhsTw7qRy7eLET14cROi9+5HAVbbHuIWUHEauBv5qT4Av2tWasiTY1Jw6puUNqRJXQg==",
-      "dev": true
+      "dev": true,
+      "optional": true,
+      "peer": true
     },
     "nanoid": {
       "version": "3.3.6",
@@ -68554,6 +68987,8 @@
       "resolved": "https://registry.npmjs.org/node-gyp/-/node-gyp-8.4.1.tgz",
       "integrity": "sha512-olTJRgUtAb/hOXG0E93wZDs5YiJlgbXxTwQAFHyNlRsXQnYzUaF2aGgujZbw+hR8aF4ZG/rST57bWMWD16jr9w==",
       "dev": true,
+      "optional": true,
+      "peer": true,
       "requires": {
         "env-paths": "^2.2.0",
         "glob": "^7.1.4",
@@ -68572,6 +69007,8 @@
           "resolved": "https://registry.npmjs.org/are-we-there-yet/-/are-we-there-yet-3.0.0.tgz",
           "integrity": "sha512-0GWpv50YSOcLXaN6/FAKY3vfRbllXWV2xvfA/oKJF8pzFhWXPV+yjhJXDBbjscDYowv7Yw1A3uigpzn5iEGTyw==",
           "dev": true,
+          "optional": true,
+          "peer": true,
           "requires": {
             "delegates": "^1.0.0",
             "readable-stream": "^3.6.0"
@@ -68582,6 +69019,8 @@
           "resolved": "https://registry.npmjs.org/gauge/-/gauge-4.0.4.tgz",
           "integrity": "sha512-f9m+BEN5jkg6a0fZjleidjN51VE1X+mPFQ2DJ0uv1V39oCLCbsGe6yjbBnp7eK7z/+GAon99a3nHuqbuuthyPg==",
           "dev": true,
+          "optional": true,
+          "peer": true,
           "requires": {
             "aproba": "^1.0.3 || ^2.0.0",
             "color-support": "^1.1.3",
@@ -68598,6 +69037,8 @@
           "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-6.0.0.tgz",
           "integrity": "sha512-Jo6dJ04CmSjuznwJSS3pUeWmd/H0ffTlkXXgwZi+eq1UCmqQwCh+eLsYOYCwY991i2Fah4h1BEMCx4qThGbsiA==",
           "dev": true,
+          "optional": true,
+          "peer": true,
           "requires": {
             "yallist": "^4.0.0"
           }
@@ -68607,6 +69048,8 @@
           "resolved": "https://registry.npmjs.org/nopt/-/nopt-5.0.0.tgz",
           "integrity": "sha512-Tbj67rffqceeLpcRXrT7vKAN8CwfPeIBgM7E6iBkmKLV7bEMwpGgYLGv0jACUsECaa/vuxP0IjEont6umdMgtQ==",
           "dev": true,
+          "optional": true,
+          "peer": true,
           "requires": {
             "abbrev": "1"
           }
@@ -68616,6 +69059,8 @@
           "resolved": "https://registry.npmjs.org/npmlog/-/npmlog-6.0.2.tgz",
           "integrity": "sha512-/vBvz5Jfr9dT/aFWd0FIRf+T/Q2WBsLENygUaFUqstqsycmZAP/t5BvFJTK0viFmSUxiUKTUplWy5vt+rvKIxg==",
           "dev": true,
+          "optional": true,
+          "peer": true,
           "requires": {
             "are-we-there-yet": "^3.0.0",
             "console-control-strings": "^1.1.0",
@@ -68628,6 +69073,8 @@
           "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-3.6.0.tgz",
           "integrity": "sha512-BViHy7LKeTz4oNnkcLJ+lVSL6vpiFeX6/d3oSH8zCW7UxP2onchk+vTGB143xuFjHS3deTgkKoXXymXqymiIdA==",
           "dev": true,
+          "optional": true,
+          "peer": true,
           "requires": {
             "inherits": "^2.0.3",
             "string_decoder": "^1.1.1",
@@ -68639,6 +69086,8 @@
           "resolved": "https://registry.npmjs.org/rimraf/-/rimraf-3.0.2.tgz",
           "integrity": "sha512-JZkJMZkAGFFPP2YqXZXPbMlMBgsxzE8ILs4lMIX/2o0L9UBw9O/Y3o6wFw/i9YLapcUJWwqbi3kdxIPdC62TIA==",
           "dev": true,
+          "optional": true,
+          "peer": true,
           "requires": {
             "glob": "^7.1.3"
           }
@@ -68648,6 +69097,8 @@
           "resolved": "https://registry.npmjs.org/semver/-/semver-7.3.7.tgz",
           "integrity": "sha512-QlYTucUYOews+WeEujDoEGziz4K6c47V/Bd+LjSSYcA94p+DmINdf7ncaUinThfvZyu13lN9OY1XDxt8C0Tw0g==",
           "dev": true,
+          "optional": true,
+          "peer": true,
           "requires": {
             "lru-cache": "^6.0.0"
           }
@@ -68657,6 +69108,8 @@
           "resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz",
           "integrity": "sha512-BLI3Tl1TW3Pvl70l3yq3Y64i+awpwXqsGBYWkkqMtnbXgrMD+yj7rhW0kuEDxzJaYXGjEW5ogapKNMEKNMjibA==",
           "dev": true,
+          "optional": true,
+          "peer": true,
           "requires": {
             "isexe": "^2.0.0"
           }
@@ -68665,7 +69118,9 @@
           "version": "4.0.0",
           "resolved": "https://registry.npmjs.org/yallist/-/yallist-4.0.0.tgz",
           "integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==",
-          "dev": true
+          "dev": true,
+          "optional": true,
+          "peer": true
         }
       }
     },
@@ -68691,6 +69146,8 @@
       "resolved": "https://registry.npmjs.org/node-sass/-/node-sass-7.0.1.tgz",
       "integrity": "sha512-uMy+Xt29NlqKCFdFRZyXKOTqGt+QaKHexv9STj2WeLottnlqZEEWx6Bj0MXNthmFRRdM/YwyNo/8Tr46TOM0jQ==",
       "dev": true,
+      "optional": true,
+      "peer": true,
       "requires": {
         "async-foreach": "^0.1.3",
         "chalk": "^4.1.2",
@@ -68714,6 +69171,8 @@
           "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
           "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
           "dev": true,
+          "optional": true,
+          "peer": true,
           "requires": {
             "color-convert": "^2.0.1"
           }
@@ -68723,6 +69182,8 @@
           "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
           "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==",
           "dev": true,
+          "optional": true,
+          "peer": true,
           "requires": {
             "ansi-styles": "^4.1.0",
             "supports-color": "^7.1.0"
@@ -68733,6 +69194,8 @@
           "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
           "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
           "dev": true,
+          "optional": true,
+          "peer": true,
           "requires": {
             "color-name": "~1.1.4"
           }
@@ -68741,13 +69204,17 @@
           "version": "1.1.4",
           "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
           "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
-          "dev": true
+          "dev": true,
+          "optional": true,
+          "peer": true
         },
         "cross-spawn": {
           "version": "7.0.3",
           "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.3.tgz",
           "integrity": "sha512-iRDPJKUPVEND7dHPO8rkbOnPpyDygcDFtWjpeWNCgy8WP2rXcxXL8TskReQl6OrB2G7+UJrags1q15Fudc7G6w==",
           "dev": true,
+          "optional": true,
+          "peer": true,
           "requires": {
             "path-key": "^3.1.0",
             "shebang-command": "^2.0.0",
@@ -68758,19 +69225,25 @@
           "version": "4.0.0",
           "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
           "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
-          "dev": true
+          "dev": true,
+          "optional": true,
+          "peer": true
         },
         "path-key": {
           "version": "3.1.1",
           "resolved": "https://registry.npmjs.org/path-key/-/path-key-3.1.1.tgz",
           "integrity": "sha512-ojmeN0qd+y0jszEtoY48r0Peq5dwMEkIlCOu6Q5f41lfkswXuKtYrhgoTpLnyIcHm24Uhqx+5Tqm2InSwLhE6Q==",
-          "dev": true
+          "dev": true,
+          "optional": true,
+          "peer": true
         },
         "shebang-command": {
           "version": "2.0.0",
           "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz",
           "integrity": "sha512-kHxr2zZpYtdmrN1qDjrrX/Z1rR1kG8Dx+gkpK1G4eXmvXswmcE1hTWBWYUzlraYw1/yZp6YuDY77YtvbN0dmDA==",
           "dev": true,
+          "optional": true,
+          "peer": true,
           "requires": {
             "shebang-regex": "^3.0.0"
           }
@@ -68779,13 +69252,17 @@
           "version": "3.0.0",
           "resolved": "https://registry.npmjs.org/shebang-regex/-/shebang-regex-3.0.0.tgz",
           "integrity": "sha512-7++dFhtcx3353uBaq8DDR4NuxBetBzC7ZQOhmTQInHEd6bSrXdiEyzCvG07Z44UYdLShWUyXt5M/yhz8ekcb1A==",
-          "dev": true
+          "dev": true,
+          "optional": true,
+          "peer": true
         },
         "supports-color": {
           "version": "7.2.0",
           "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
           "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
           "dev": true,
+          "optional": true,
+          "peer": true,
           "requires": {
             "has-flag": "^4.0.0"
           }
@@ -68795,6 +69272,8 @@
           "resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz",
           "integrity": "sha512-BLI3Tl1TW3Pvl70l3yq3Y64i+awpwXqsGBYWkkqMtnbXgrMD+yj7rhW0kuEDxzJaYXGjEW5ogapKNMEKNMjibA==",
           "dev": true,
+          "optional": true,
+          "peer": true,
           "requires": {
             "isexe": "^2.0.0"
           }
@@ -68970,7 +69449,9 @@
       "version": "0.9.0",
       "resolved": "https://registry.npmjs.org/oauth-sign/-/oauth-sign-0.9.0.tgz",
       "integrity": "sha512-fexhUFFPTGV8ybAtSIGbV6gOkSv8UtRbDBnAyLQw4QPKkgNlsH2ByPGtMUqdWkos6YCRmAqViwgZrJc/mRDzZQ==",
-      "dev": true
+      "dev": true,
+      "optional": true,
+      "peer": true
     },
     "object-assign": {
       "version": "4.1.1",
@@ -69601,7 +70082,9 @@
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/performance-now/-/performance-now-2.1.0.tgz",
       "integrity": "sha1-Ywn04OX6kT7BxpMHrjZLSzd8nns=",
-      "dev": true
+      "dev": true,
+      "optional": true,
+      "peer": true
     },
     "picocolors": {
       "version": "1.0.0",
@@ -70871,13 +71354,17 @@
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/promise-inflight/-/promise-inflight-1.0.1.tgz",
       "integrity": "sha1-mEcocL8igTL8vdhoEputEsPAKeM=",
-      "dev": true
+      "dev": true,
+      "optional": true,
+      "peer": true
     },
     "promise-retry": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/promise-retry/-/promise-retry-2.0.1.tgz",
       "integrity": "sha512-y+WKFlBR8BGXnsNlIHFGPZmyDf3DFMoLhaflAnyZgV6rG6xu+JwesTo2Q9R6XwYmtmwAFCkAk3e35jEdoeh/3g==",
       "dev": true,
+      "optional": true,
+      "peer": true,
       "requires": {
         "err-code": "^2.0.2",
         "retry": "^0.12.0"
@@ -71081,7 +71568,9 @@
       "version": "4.0.1",
       "resolved": "https://registry.npmjs.org/quick-lru/-/quick-lru-4.0.1.tgz",
       "integrity": "sha512-ARhCpm70fzdcvNQfPoy49IaanKkTlRWF2JMzqhcJbhSFRZv7nPTvZJdcY7301IPmvW+/p0RgIWnQDLJxifsQ7g==",
-      "dev": true
+      "dev": true,
+      "optional": true,
+      "peer": true
     },
     "ramda": {
       "version": "0.29.0",
@@ -71973,6 +72462,8 @@
       "resolved": "https://registry.npmjs.org/request/-/request-2.88.2.tgz",
       "integrity": "sha512-MsvtOrfG9ZcrOwAW+Qi+F6HbD0CWXEh9ou77uOb7FM2WPhwT7smM833PzanhJLsgXjN89Ir6V2PczXNnMpwKhw==",
       "dev": true,
+      "optional": true,
+      "peer": true,
       "requires": {
         "aws-sign2": "~0.7.0",
         "aws4": "^1.8.0",
@@ -72000,13 +72491,17 @@
           "version": "6.5.3",
           "resolved": "https://registry.npmjs.org/qs/-/qs-6.5.3.tgz",
           "integrity": "sha512-qxXIEh4pCGfHICj1mAJQ2/2XVZkjCDTcEgfoSQxc/fYivUZxTkk7L3bDBJSoNrEzXI17oUO5Dp07ktqE5KzczA==",
-          "dev": true
+          "dev": true,
+          "optional": true,
+          "peer": true
         },
         "tough-cookie": {
           "version": "2.5.0",
           "resolved": "https://registry.npmjs.org/tough-cookie/-/tough-cookie-2.5.0.tgz",
           "integrity": "sha512-nlLsUzgm1kfLXSXfRZMc1KLAugd4hqJHDTvc2hDIwS3mZAfMEuMbc03SujMF+GEcpaX/qboeycw6iO8JwVv2+g==",
           "dev": true,
+          "optional": true,
+          "peer": true,
           "requires": {
             "psl": "^1.1.28",
             "punycode": "^2.1.1"
@@ -72016,7 +72511,9 @@
           "version": "3.4.0",
           "resolved": "https://registry.npmjs.org/uuid/-/uuid-3.4.0.tgz",
           "integrity": "sha512-HjSDRw6gZE5JMggctHBcjVak08+KEVhSIiDzFnT9S9aegmp85S/bReBVTb4QTFaRNptJ9kuYaNhnbNEOkbKb/A==",
-          "dev": true
+          "dev": true,
+          "optional": true,
+          "peer": true
         }
       }
     },
@@ -72111,7 +72608,9 @@
       "version": "0.12.0",
       "resolved": "https://registry.npmjs.org/retry/-/retry-0.12.0.tgz",
       "integrity": "sha1-G0KmJmoh8HQh0bC1S33BZ7AcATs=",
-      "dev": true
+      "dev": true,
+      "optional": true,
+      "peer": true
     },
     "reusify": {
       "version": "1.0.4",
@@ -72190,11 +72689,24 @@
         "sparse-bitfield": "^3.0.3"
       }
     },
+    "sass": {
+      "version": "1.66.1",
+      "resolved": "https://registry.npmjs.org/sass/-/sass-1.66.1.tgz",
+      "integrity": "sha512-50c+zTsZOJVgFfTgwwEzkjA3/QACgdNsKueWPyAR0mRINIvLAStVQBbPg14iuqEQ74NPDbXzJARJ/O4SI1zftA==",
+      "dev": true,
+      "requires": {
+        "chokidar": ">=3.0.0 <4.0.0",
+        "immutable": "^4.0.0",
+        "source-map-js": ">=0.6.2 <2.0.0"
+      }
+    },
     "sass-graph": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/sass-graph/-/sass-graph-4.0.0.tgz",
       "integrity": "sha512-WSO/MfXqKH7/TS8RdkCX3lVkPFQzCgbqdGsmSKq6tlPU+GpGEsa/5aW18JqItnqh+lPtcjifqdZ/VmiILkKckQ==",
       "dev": true,
+      "optional": true,
+      "peer": true,
       "requires": {
         "glob": "^7.0.0",
         "lodash": "^4.17.11",
@@ -72206,13 +72718,17 @@
           "version": "5.0.8",
           "resolved": "https://registry.npmjs.org/y18n/-/y18n-5.0.8.tgz",
           "integrity": "sha512-0pfFzegeDWJHJIAmTLRP2DwHjdF5s7jo9tuztdQxAhINCdvS+3nGINqPd00AphqJR/0LhANUS6/+7SCb98YOfA==",
-          "dev": true
+          "dev": true,
+          "optional": true,
+          "peer": true
         },
         "yargs": {
           "version": "17.4.1",
           "resolved": "https://registry.npmjs.org/yargs/-/yargs-17.4.1.tgz",
           "integrity": "sha512-WSZD9jgobAg3ZKuCQZSa3g9QOJeCCqLoLAykiWgmXnDo9EPnn4RPf5qVTtzgOx66o6/oqhcA5tHtJXpG8pMt3g==",
           "dev": true,
+          "optional": true,
+          "peer": true,
           "requires": {
             "cliui": "^7.0.2",
             "escalade": "^3.1.1",
@@ -72273,6 +72789,8 @@
       "resolved": "https://registry.npmjs.org/scss-tokenizer/-/scss-tokenizer-0.3.0.tgz",
       "integrity": "sha512-14Zl9GcbBvOT9057ZKjpz5yPOyUWG2ojd9D5io28wHRYsOrs7U95Q+KNL87+32p8rc+LvDpbu/i9ZYjM9Q+FsQ==",
       "dev": true,
+      "optional": true,
+      "peer": true,
       "requires": {
         "js-base64": "^2.4.3",
         "source-map": "^0.7.1"
@@ -72282,7 +72800,9 @@
           "version": "0.7.3",
           "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.7.3.tgz",
           "integrity": "sha512-CkCj6giN3S+n9qrYiBTX5gystlENnRW5jZeNLHpe6aue+SrHcG5VYwujhW9s4dY31mEGsxBDrHR6oI69fTXsaQ==",
-          "dev": true
+          "dev": true,
+          "optional": true,
+          "peer": true
         }
       }
     },
@@ -72641,13 +73161,17 @@
       "version": "4.2.0",
       "resolved": "https://registry.npmjs.org/smart-buffer/-/smart-buffer-4.2.0.tgz",
       "integrity": "sha512-94hK0Hh8rPqQl2xXc3HsaBoOXKV20MToPkcXvwbISWLEs+64sBq5kFgn2kJDHb1Pry9yrP0dxrCI9RRci7RXKg==",
-      "dev": true
+      "dev": true,
+      "optional": true,
+      "peer": true
     },
     "socks": {
       "version": "2.6.2",
       "resolved": "https://registry.npmjs.org/socks/-/socks-2.6.2.tgz",
       "integrity": "sha512-zDZhHhZRY9PxRruRMR7kMhnf3I8hDs4S3f9RecfnGxvcBHQcKcIH/oUcEWffsfl1XxdYlA7nnlGbbTvPz9D8gA==",
       "dev": true,
+      "optional": true,
+      "peer": true,
       "requires": {
         "ip": "^1.1.5",
         "smart-buffer": "^4.2.0"
@@ -72658,6 +73182,8 @@
       "resolved": "https://registry.npmjs.org/socks-proxy-agent/-/socks-proxy-agent-6.2.0.tgz",
       "integrity": "sha512-wWqJhjb32Q6GsrUqzuFkukxb/zzide5quXYcMVpIjxalDBBYy2nqKCFQ/9+Ie4dvOYSQdOk3hUlZSdzZOd3zMQ==",
       "dev": true,
+      "optional": true,
+      "peer": true,
       "requires": {
         "agent-base": "^6.0.2",
         "debug": "^4.3.3",
@@ -72758,6 +73284,8 @@
       "resolved": "https://registry.npmjs.org/sshpk/-/sshpk-1.16.1.tgz",
       "integrity": "sha512-HXXqVUq7+pcKeLqqZj6mHFUMvXtOJt1uoUx09pFW6011inTMxqI8BA8PM95myrIyyKwdnzjdFjLiE6KBPVtJIg==",
       "dev": true,
+      "optional": true,
+      "peer": true,
       "requires": {
         "asn1": "~0.2.3",
         "assert-plus": "^1.0.0",
@@ -72825,6 +73353,8 @@
       "resolved": "https://registry.npmjs.org/stdout-stream/-/stdout-stream-1.4.1.tgz",
       "integrity": "sha512-j4emi03KXqJWcIeF8eIXkjMFN1Cmb8gUlDYGeBALLPo5qdyTfA9bOtl8m33lRoC+vFMkP3gl0WsDr6+gzxbbTA==",
       "dev": true,
+      "optional": true,
+      "peer": true,
       "requires": {
         "readable-stream": "^2.0.1"
       }
@@ -73681,7 +74211,9 @@
       "version": "3.0.1",
       "resolved": "https://registry.npmjs.org/trim-newlines/-/trim-newlines-3.0.1.tgz",
       "integrity": "sha512-c1PTsA3tYrIsLGkJkzHF+w9F2EyxfXGo4UyJc4pFL++FMjnq0HJS69T3M7d//gKrFKwy429bouPescbjecU+Zw==",
-      "dev": true
+      "dev": true,
+      "optional": true,
+      "peer": true
     },
     "trough": {
       "version": "1.0.5",
@@ -73693,6 +74225,8 @@
       "resolved": "https://registry.npmjs.org/true-case-path/-/true-case-path-1.0.3.tgz",
       "integrity": "sha512-m6s2OdQe5wgpFMC+pAJ+q9djG82O2jcHPOI6RNg1yy9rCYR+WD6Nbpl32fDpfC56nirdRy+opFa/Vk7HYhqaew==",
       "dev": true,
+      "optional": true,
+      "peer": true,
       "requires": {
         "glob": "^7.1.2"
       }
@@ -73733,6 +74267,8 @@
       "resolved": "https://registry.npmjs.org/tunnel-agent/-/tunnel-agent-0.6.0.tgz",
       "integrity": "sha1-J6XeoGs2sEoKmWZ3SykIaPD8QP0=",
       "dev": true,
+      "optional": true,
+      "peer": true,
       "requires": {
         "safe-buffer": "^5.0.1"
       }
@@ -73741,7 +74277,9 @@
       "version": "0.14.5",
       "resolved": "https://registry.npmjs.org/tweetnacl/-/tweetnacl-0.14.5.tgz",
       "integrity": "sha1-WuaBd/GS1EViadEIr6k/+HQ/T2Q=",
-      "dev": true
+      "dev": true,
+      "optional": true,
+      "peer": true
     },
     "type-check": {
       "version": "0.3.2",
@@ -73896,6 +74434,8 @@
       "resolved": "https://registry.npmjs.org/unique-filename/-/unique-filename-1.1.1.tgz",
       "integrity": "sha512-Vmp0jIp2ln35UTXuryvjzkjGdRyf9b2lTXuSYUiPmzRcl3FDtYqAwOnTJkAngD9SWhnoJzDbTKwaOrZ+STtxNQ==",
       "dev": true,
+      "optional": true,
+      "peer": true,
       "requires": {
         "unique-slug": "^2.0.0"
       }
@@ -73905,6 +74445,8 @@
       "resolved": "https://registry.npmjs.org/unique-slug/-/unique-slug-2.0.2.tgz",
       "integrity": "sha512-zoWr9ObaxALD3DOPfjPSqxt4fnZiWblxHIgeWqW8x7UqDzEtHEQLzji2cuJYQFCU6KmoJikOYAZlrTHHebjx2w==",
       "dev": true,
+      "optional": true,
+      "peer": true,
       "requires": {
         "imurmurhash": "^0.1.4"
       }
@@ -74169,6 +74711,8 @@
       "resolved": "https://registry.npmjs.org/verror/-/verror-1.10.0.tgz",
       "integrity": "sha1-OhBcoXBTr1XW4nDB+CiGguGNpAA=",
       "dev": true,
+      "optional": true,
+      "peer": true,
       "requires": {
         "assert-plus": "^1.0.0",
         "core-util-is": "1.0.2",
@@ -74842,7 +75386,9 @@
       "version": "21.0.1",
       "resolved": "https://registry.npmjs.org/yargs-parser/-/yargs-parser-21.0.1.tgz",
       "integrity": "sha512-9BK1jFpLzJROCI5TzwZL/TU4gqjK5xiHV/RfWLOahrjAko/e4DJkRDZQXfvqAsiZzzYhgAzbgz6lg48jcm4GLg==",
-      "dev": true
+      "dev": true,
+      "optional": true,
+      "peer": true
     },
     "yauzl": {
       "version": "2.10.0",
diff --git a/package.json b/package.json
index 569631aef2..dad49cfb36 100644
--- a/package.json
+++ b/package.json
@@ -23,7 +23,8 @@
     "update-syntax-highlighting": "node ./server/scripts/update-syntax-highlighting.js",
     "update-p5-hinter": "node ./server/scripts/update-p5-hinter.js",
     "heroku-postbuild": "touch .env; npm run build",
-    "storybook:build:css": "node-sass client/styles/main.scss client/styles/storybook.css",
+    "storybook:build:css": "sass client/styles/main.scss client/styles/storybook.css",
+    "migrate-sass": "sass-migrator division 'client/styles/**/*.scss'",
     "storybook": "npm run storybook:build:css && storybook dev -p 6006",
     "build-storybook": "storybook build"
   },
@@ -130,7 +131,6 @@
     "lint-staged": "^10.5.4",
     "mini-css-extract-plugin": "^1.6.2",
     "msw": "^0.35.0",
-    "node-sass": "^7.0.1",
     "nodemon": "^2.0.22",
     "os-browserify": "^0.3.0",
     "postcss": "^8.4.12",
@@ -140,6 +140,7 @@
     "react-test-renderer": "^16.14.0",
     "redux-mock-store": "^1.5.4",
     "rimraf": "^2.7.1",
+    "sass": "^1.66.1",
     "sass-loader": "^12.6.0",
     "storybook": "^7.0.27",
     "storybook-addon-theme-playground": "^2.2.0",

From 913d582da8482844a172ee1eeac2aa2d0c1ed07b Mon Sep 17 00:00:00 2001
From: luckyklyist <puspaanupam@gmail.com>
Date: Thu, 14 Sep 2023 15:21:30 +0545
Subject: [PATCH 2/4] removed the sass-migrator from the package.json after
 migration from node-sass

---
 package.json | 1 -
 1 file changed, 1 deletion(-)

diff --git a/package.json b/package.json
index dad49cfb36..a0f9606ecd 100644
--- a/package.json
+++ b/package.json
@@ -24,7 +24,6 @@
     "update-p5-hinter": "node ./server/scripts/update-p5-hinter.js",
     "heroku-postbuild": "touch .env; npm run build",
     "storybook:build:css": "sass client/styles/main.scss client/styles/storybook.css",
-    "migrate-sass": "sass-migrator division 'client/styles/**/*.scss'",
     "storybook": "npm run storybook:build:css && storybook dev -p 6006",
     "build-storybook": "storybook build"
   },

From f2332daa154619ca007bddea0bf9c968b0d21c9a Mon Sep 17 00:00:00 2001
From: luckyklyist <puspaanupam@gmail.com>
Date: Sat, 23 Sep 2023 23:47:47 +0545
Subject: [PATCH 3/4] remove the node-sass rebuild command from the dockerFile

---
 Dockerfile | 2 --
 1 file changed, 2 deletions(-)

diff --git a/Dockerfile b/Dockerfile
index 3d1e5435db..4e25bed7c5 100644
--- a/Dockerfile
+++ b/Dockerfile
@@ -10,7 +10,6 @@ FROM base as development
 ENV NODE_ENV development
 COPY package.json package-lock.json ./
 RUN npm install
-RUN npm rebuild node-sass
 COPY .babelrc index.js nodemon.json ./
 COPY ./webpack ./webpack
 COPY client ./client
@@ -27,6 +26,5 @@ FROM base as production
 ENV NODE_ENV=production
 COPY package.json package-lock.json index.js ./
 RUN npm install --production
-RUN npm rebuild node-sass
 COPY --from=build $APP_HOME/dist ./dist
 CMD ["npm", "run", "start:prod"]

From 2505fdda269100e4d61ec8fb27ff83f5f9140d4d Mon Sep 17 00:00:00 2001
From: Keshav <keshav2021csds116@abesit.edu.in>
Date: Sun, 4 Feb 2024 20:42:49 +0530
Subject: [PATCH 4/4] Fixed Upload Modal

---
 client/styles/components/_uploader.scss | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/client/styles/components/_uploader.scss b/client/styles/components/_uploader.scss
index d1f4abf5a7..f3cb3135fc 100644
--- a/client/styles/components/_uploader.scss
+++ b/client/styles/components/_uploader.scss
@@ -2,5 +2,7 @@
   @include themify() {
     background-color: getThemifyVariable('input-secondary-background-color');
     color: getThemifyVariable('input-text-color');
+    max-height: 70vh;
+    overflow-y: auto;
   }
 }