added a hideUI option to hide buttons. fixed a mess of runtime warnings mostly related to how scss files can be included in each other

20 files changed, 1168 insertions, 1179 deletions

diff --git a/packages/components/src/components/Button/Button.scss b/packages/components/src/components/Button/Button.scss
index a31923e6d..bbe2e2470 100644
--- a/packages/components/src/components/Button/Button.scss
+++ b/packages/components/src/components/Button/Button.scss
@@ -1,118 +1,118 @@
-@import '../../global/globalCssVariables.scss';
+@use '../../global/globalCssVariables.scss' as global;
 
 .button-container {
-  position: relative;
-  width: fit-content;
-  padding: $padding;
-  cursor: pointer;
-  overflow: hidden;
-  user-select: none;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  gap: 5px;
-  font-family: $default-font;
-  border-radius: $standard-border-radius;
-  white-space: nowrap;
-  transition: 0.4s;
-  border: solid 1px;
-  border-color: transparent;
-  pointer-events: all;
-
-  &.icon {
-    padding: 0;
-    gap: 0;
-  }
-
-  .button-content {
+    position: relative;
+    width: fit-content;
+    padding: global.$padding;
+    cursor: pointer;
+    overflow: hidden;
+    user-select: none;
     display: flex;
     justify-content: center;
     align-items: center;
-    width: fit-content;
-    height: 100%;
-    z-index: 1;
     gap: 5px;
+    font-family: global.$default-font;
+    border-radius: global.$standard-border-radius;
+    white-space: nowrap;
+    transition: 0.4s;
+    border: solid 1px;
+    border-color: transparent;
+    pointer-events: all;
 
-    .icon {
-      display: flex;
-      justify-content: center;
-      align-items: center;
+    &.icon {
+        padding: 0;
+        gap: 0;
     }
-  }
-
-  .background {
-    width: 100%;
-    height: 100%;
-    z-index: 0;
-    left: 0;
-    top: 0;
-    position: absolute;
-    transition: 0.4s;
-  }
 
-  &.inactive {
-    &:hover {
-      .background {
-        filter: opacity(0) !important;
-      }
+    .button-content {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        width: fit-content;
+        height: 100%;
+        z-index: 1;
+        gap: 5px;
+
+        .icon {
+            display: flex;
+            justify-content: center;
+            align-items: center;
+        }
     }
-  }
 
-  &.primary {
     .background {
-      filter: opacity(0);
-
-      &.active {
-        filter: opacity(0.2) !important;
-      }
+        width: 100%;
+        height: 100%;
+        z-index: 0;
+        left: 0;
+        top: 0;
+        position: absolute;
+        transition: 0.4s;
     }
 
-    &:hover{
-      .background {
-        filter: opacity(0.2)
-      }
+    &.inactive {
+        &:hover {
+            .background {
+                filter: opacity(0) !important;
+            }
+        }
     }
-  }
 
-  &.secondary {
-    .background {
-      filter: opacity(0);
+    &.primary {
+        .background {
+            filter: opacity(0);
 
-      &.active {
-        filter: opacity(0.2) !important;
-      }
-    }
+            &.active {
+                filter: opacity(0.2) !important;
+            }
+        }
 
-    &:hover{
-      .background {
-        filter: opacity(0.2)
-      }
+        &:hover {
+            .background {
+                filter: opacity(0.2);
+            }
+        }
     }
-  }
 
-  &.tertiary {
-    &:hover{
-      box-shadow: $standard-shadow;
-    }
+    &.secondary {
+        .background {
+            filter: opacity(0);
 
-    .background {
-      filter: opacity(1) !important;
+            &.active {
+                filter: opacity(0.2) !important;
+            }
+        }
+
+        &:hover {
+            .background {
+                filter: opacity(0.2);
+            }
+        }
     }
 
-    &:hover{
-      .background {
-        filter: brightness(0.8);
-      }
+    &.tertiary {
+        &:hover {
+            box-shadow: global.$standard-shadow;
+        }
+
+        .background {
+            filter: opacity(1) !important;
+        }
+
+        &:hover {
+            .background {
+                filter: brightness(0.8);
+            }
+        }
     }
-  }
 
-  .label {
-    position: absolute;
-    bottom: 0;
-    width: 100%;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    font-size: $xsmall-fontSize;
-  }
+    .label {
+        position: absolute;
+        bottom: 0;
+        width: 100%;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        font-size: global.$xsmall-fontSize;
+    }
 }
diff --git a/packages/components/src/components/ColorPicker/ColorPicker.scss b/packages/components/src/components/ColorPicker/ColorPicker.scss
index e3ed32a45..32b912fe5 100644
--- a/packages/components/src/components/ColorPicker/ColorPicker.scss
+++ b/packages/components/src/components/ColorPicker/ColorPicker.scss
@@ -1,23 +1,23 @@
-@import '../../global/globalCssVariables.scss';
+@use '../../global/globalCssVariables.scss' as global;
 
 .colorPicker-container {
-  display: flex;
-  border-radius: $standard-border-radius;
-  width: fit-content;
-  height: fit-content;
-  position: relative;
-
-  .colorPicker-toggle {
-    width: 100%;
-    height: 100%;
-    position: relative;
-    cursor: pointer;
-  }
-
-  .colorPicker-popup {
-    position: absolute;
-    top: calc(100% + 5px);
+    display: flex;
+    border-radius: global.$standard-border-radius;
     width: fit-content;
     height: fit-content;
-  }
+    position: relative;
+
+    .colorPicker-toggle {
+        width: 100%;
+        height: 100%;
+        position: relative;
+        cursor: pointer;
+    }
+
+    .colorPicker-popup {
+        position: absolute;
+        top: calc(100% + 5px);
+        width: fit-content;
+        height: fit-content;
+    }
 }
diff --git a/packages/components/src/components/Dropdown/Dropdown.scss b/packages/components/src/components/Dropdown/Dropdown.scss
index 34ed84004..f9ea2711a 100644
--- a/packages/components/src/components/Dropdown/Dropdown.scss
+++ b/packages/components/src/components/Dropdown/Dropdown.scss
@@ -1,135 +1,136 @@
-@import '../../global/globalCssVariables.scss';
+@use '../../global/globalCssVariables.scss' as global;
 
 .dropdown {
-  margin-top: 10px;
+    margin-top: 10px;
 }
 
 .divider {
-  height: 1px;
-  width: 100%;
-  background: $medium-gray;
+    height: 1px;
+    width: 100%;
+    background: global.$medium-gray;
 }
 
 .dropdown-container {
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  min-width: fit-content;
-  width: 100%;
-  border-radius: $standard-border-radius;
-  height: 100%;
-  position: relative;
-  transition: 0.4s;
-
-  .dropdown-list {
-    position: absolute;
-    top: 100%;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    min-width: fit-content;
     width: 100%;
-  }
-  .dropdown-toggle-mini,
-  .dropdown-toggle {
-    width: calc(100% - 2px);
-    display: grid;
-    grid-template-columns: calc(100% - 30px) 30px;
-    grid-template-areas: 'button end';
-    grid-template-rows: 1fr;
+    border-radius: global.$standard-border-radius;
+    height: 100%;
     position: relative;
-    align-items: center;
-    border: solid 1px;
-    border-color: transparent;
-    border-radius: $standard-border-radius;
-    overflow: hidden;
-
-    &.inactive {
-      filter: opacity(0.5);
-      pointer-events: none;
-      cursor: not-allowed;
-    }
+    transition: 0.4s;
 
-    .background {
-      width: 100%;
-      height: 100%;
-      z-index: 0;
-      position: absolute;
-      transition: 0.4s;
+    .dropdown-list {
+        position: absolute;
+        top: 100%;
+        width: 100%;
     }
+    .dropdown-toggle-mini,
+    .dropdown-toggle {
+        width: calc(100% - 2px);
+        display: grid;
+        grid-template-columns: calc(100% - 30px) 30px;
+        grid-template-areas: 'button end';
+        grid-template-rows: 1fr;
+        position: relative;
+        align-items: center;
+        border: solid 1px;
+        border-color: transparent;
+        border-radius: global.$standard-border-radius;
+        overflow: hidden;
 
-    &.inactive {
-      &:hover {
-        .background {
-          filter: opacity(0) !important;
+        &.inactive {
+            filter: opacity(0.5);
+            pointer-events: none;
+            cursor: not-allowed;
         }
-      }
-    }
-  
-    &.primary {
-      .background {
-        filter: opacity(0);
-  
-        &.active {
-          filter: opacity(0.2) !important;
-        }
-      }
-  
-      &:hover{
+
         .background {
-          filter: opacity(0.2)
+            width: 100%;
+            height: 100%;
+            z-index: 0;
+            position: absolute;
+            transition: 0.4s;
         }
-      }
-    }
-  
-    &.secondary {
-      .background {
-        filter: opacity(0);
-  
-        &.active {
-          filter: opacity(0.2) !important;
+
+        &.inactive {
+            &:hover {
+                .background {
+                    filter: opacity(0) !important;
+                }
+            }
         }
-      }
-  
-      &:hover{
-        .background {
-          filter: opacity(0.2)
+
+        &.primary {
+            .background {
+                filter: opacity(0);
+
+                &.active {
+                    filter: opacity(0.2) !important;
+                }
+            }
+
+            &:hover {
+                .background {
+                    filter: opacity(0.2);
+                }
+            }
         }
-      }
-    }
-  
-    &.tertiary {  
-      &:hover{
-        box-shadow: $standard-button-shadow;
-      }
-  
-      &:hover{
-        .background {
-          filter: brightness(0.8);
+
+        &.secondary {
+            .background {
+                filter: opacity(0);
+
+                &.active {
+                    filter: opacity(0.2) !important;
+                }
+            }
+
+            &:hover {
+                .background {
+                    filter: opacity(0.2);
+                }
+            }
         }
-      }
-    }
 
-    .toggle-button {
-      grid-area: button;
-      display: flex;
-      justify-content: center;
-      align-items: center;
-      width: 100%;
-      height: 100%;
-      min-width: 70px;
-      justify-self: center;
-    }
+        &.tertiary {
+            &:hover {
+                box-shadow: global.$standard-button-shadow;
+            }
 
-    .toggle-caret {
-      cursor: pointer;
-      grid-area: end;
-      display: flex;
-      justify-content: flex-end;
-      align-items: center;
-      justify-self: center;
+            &:hover {
+                .background {
+                    filter: brightness(0.8);
+                }
+            }
+        }
+
+        .toggle-button {
+            grid-area: button;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            width: 100%;
+            height: 100%;
+            min-width: 70px;
+            justify-self: center;
+        }
+
+        .toggle-caret {
+            cursor: pointer;
+            grid-area: end;
+            display: flex;
+            justify-content: flex-end;
+            align-items: center;
+            justify-self: center;
+        }
     }
-  }
-  .dropdown-toggle-mini {
-    .toggle-caret {
-      position: absolute;
-      top:0; left:0;
+    .dropdown-toggle-mini {
+        .toggle-caret {
+            position: absolute;
+            top: 0;
+            left: 0;
+        }
     }
-  }
 }
diff --git a/packages/components/src/components/DropdownSearch/DropdownSearch.scss b/packages/components/src/components/DropdownSearch/DropdownSearch.scss
index e111c822b..d937df540 100644
--- a/packages/components/src/components/DropdownSearch/DropdownSearch.scss
+++ b/packages/components/src/components/DropdownSearch/DropdownSearch.scss
@@ -1,123 +1,122 @@
-@import '../../global/globalCssVariables.scss';
+@use '../../global/globalCssVariables.scss' as global;
 
 .dropdownsearch {
-  margin-top: 10px;
+    margin-top: 10px;
 }
 
 .divider {
-  height: 1px;
-  width: 100%;
-  background: $medium-gray;
+    height: 1px;
+    width: 100%;
+    background: global.$medium-gray;
 }
 
 .dropdownsearch-container {
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  min-width: fit-content;
-  border-radius: $standard-border-radius;
-  height: 100%;
-  position: relative;
-  transition: 0.4s;
-
-  .dropdownsearch-list {
-    position: absolute;
-    top: 100%;
-    width: 100%;
-  }
-
-  .dropdownsearch-toggle {
-    width: 100%;
-    display: grid;
-    grid-template-columns: calc(100% - 30px) 30px;
-    grid-template-areas: 'button end';
-    grid-template-rows: 1fr;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    min-width: fit-content;
+    border-radius: global.$standard-border-radius;
+    height: 100%;
     position: relative;
-    align-items: center;
-    border: solid 1px;
-    border-color: transparent;
-    border-radius: $standard-border-radius;
-    overflow: hidden;
-
-    .toggle-background {
-      width: 100%;
-      height: 100%;
-      z-index: 0;
-      position: absolute;
-      transition: 0.4s;
-
-      &.active {
-        filter: opacity(0.2) !important;
-      }
+    transition: 0.4s;
+
+    .dropdownsearch-list {
+        position: absolute;
+        top: 100%;
+        width: 100%;
     }
 
-    &.primary {
-      color: $medium-blue;
-      .toggle-background {
-        background: $medium-blue;
-        filter: opacity(0);
-      }
-  
-      &:hover{
+    .dropdownsearch-toggle {
+        width: 100%;
+        display: grid;
+        grid-template-columns: calc(100% - 30px) 30px;
+        grid-template-areas: 'button end';
+        grid-template-rows: 1fr;
+        position: relative;
+        align-items: center;
+        border: solid 1px;
+        border-color: transparent;
+        border-radius: global.$standard-border-radius;
+        overflow: hidden;
+
         .toggle-background {
-          filter: opacity(0.2)
+            width: 100%;
+            height: 100%;
+            z-index: 0;
+            position: absolute;
+            transition: 0.4s;
+
+            &.active {
+                filter: opacity(0.2) !important;
+            }
         }
-      }
-  
-    }
-  
-    &.secondary {
-      .toggle-background {
-        background: $medium-blue;
-        filter: opacity(0);
-      }
-  
-      border: solid 1px $medium-blue;
-      color: $medium-blue;
-  
-      &:hover{
-        .toggle-background {
-          filter: opacity(0.2)
+
+        &.primary {
+            color: global.$medium-blue;
+            .toggle-background {
+                background: global.$medium-blue;
+                filter: opacity(0);
+            }
+
+            &:hover {
+                .toggle-background {
+                    filter: opacity(0.2);
+                }
+            }
         }
-      }
-    }
-  
-    &.tertiary {
-      color: white;
-  
-      .toggle-background {
-        background: $medium-blue;
-      }
-  
-      &:hover{
-        box-shadow: $standard-button-shadow;
-      }
-  
-      &:hover{
-        .toggle-background {
-          filter: brightness(0.8);
+
+        &.secondary {
+            .toggle-background {
+                background: global.$medium-blue;
+                filter: opacity(0);
+            }
+
+            border: solid 1px global.$medium-blue;
+            color: global.$medium-blue;
+
+            &:hover {
+                .toggle-background {
+                    filter: opacity(0.2);
+                }
+            }
         }
-      }
-    }
 
-    .toggle-button {
-      grid-area: button;
-      display: flex;
-      justify-content: center;
-      align-items: center;
-      width: 100%;
-      height: 100%;
-      min-width: 70px;
-      justify-self: center;
-    }
+        &.tertiary {
+            color: white;
+
+            .toggle-background {
+                background: global.$medium-blue;
+            }
 
-    .toggle-caret {
-      cursor: pointer;
-      grid-area: end;
-      display: flex;
-      justify-content: flex-end;
-      align-items: center;
-      justify-self: center;
+            &:hover {
+                box-shadow: global.$standard-button-shadow;
+            }
+
+            &:hover {
+                .toggle-background {
+                    filter: brightness(0.8);
+                }
+            }
+        }
+
+        .toggle-button {
+            grid-area: button;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            width: 100%;
+            height: 100%;
+            min-width: 70px;
+            justify-self: center;
+        }
+
+        .toggle-caret {
+            cursor: pointer;
+            grid-area: end;
+            display: flex;
+            justify-content: flex-end;
+            align-items: center;
+            justify-self: center;
+        }
     }
-  }
 }
diff --git a/packages/components/src/components/EditableText/EditableText.scss b/packages/components/src/components/EditableText/EditableText.scss
index 19e5af2cd..15965e97e 100644
--- a/packages/components/src/components/EditableText/EditableText.scss
+++ b/packages/components/src/components/EditableText/EditableText.scss
@@ -1,131 +1,129 @@
-@import '../../global/globalCssVariables.scss';
+@use '../../global/globalCssVariables.scss' as global;
 
 .editableText-container {
-  position: relative;
-  width: fit-content;
-  border: solid 1px;
-  border-color: transparent;
-  border-radius: $standard-border-radius;
-  font-family: $default-font;
-  overflow: hidden;
-  padding: $padding;
-
-  .password {
-    position: absolute;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    height: 100%;
-    right: 0;
-    top: 0;
-  }
-
-  .editableText-background {
-    width: 100%;
-    height: 100%;
-    z-index: -1;
-    position: absolute;
-    transition: 0.4s;
-    top: 0;
-    left: 0;
-  }
-
-  &.primary {
-
-    &:focus-within {
-      .editableText-background {
-        filter: opacity(0.2) !important;
-      }
+    position: relative;
+    width: fit-content;
+    border: solid 1px;
+    border-color: transparent;
+    border-radius: global.$standard-border-radius;
+    font-family: global.$default-font;
+    overflow: hidden;
+    padding: global.$padding;
+
+    .password {
+        position: absolute;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        height: 100%;
+        right: 0;
+        top: 0;
     }
 
     .editableText-background {
-      filter: opacity(0);
-
-      &.active {
-        filter: opacity(0.2) !important;
-      }
+        width: 100%;
+        height: 100%;
+        z-index: -1;
+        position: absolute;
+        transition: 0.4s;
+        top: 0;
+        left: 0;
     }
 
-    &:hover{
-      .editableText-background {
-        filter: opacity(0.2)
-      }
+    &.primary {
+        &:focus-within {
+            .editableText-background {
+                filter: opacity(0.2) !important;
+            }
+        }
+
+        .editableText-background {
+            filter: opacity(0);
+
+            &.active {
+                filter: opacity(0.2) !important;
+            }
+        }
+
+        &:hover {
+            .editableText-background {
+                filter: opacity(0.2);
+            }
+        }
     }
-  }
-
-  &.secondary {
-    &:focus-within {
-      .editableText-background {
-        filter: opacity(0.2) !important;
-      }
-    }
-
-    .editableText-background {
-      filter: opacity(0);
 
-      &.active {
-        filter: opacity(0.2) !important;
-      }
+    &.secondary {
+        &:focus-within {
+            .editableText-background {
+                filter: opacity(0.2) !important;
+            }
+        }
+
+        .editableText-background {
+            filter: opacity(0);
+
+            &.active {
+                filter: opacity(0.2) !important;
+            }
+        }
+
+        &:hover {
+            .editableText-background {
+                filter: opacity(0.2);
+            }
+        }
     }
 
-    &:hover{
-      .editableText-background {
-        filter: opacity(0.2)
-      }
-    }
-  }
+    &.tertiary {
+        &:hover {
+            box-shadow: global.$standard-shadow;
+        }
 
-  &.tertiary {
-    &:hover{
-      box-shadow: $standard-shadow;
+        &:hover {
+            .editableText-background {
+                filter: brightness(0.8);
+            }
+        }
     }
 
-    &:hover{
-      .editableText-background {
-        filter: brightness(0.8);
-      }
+    .editableText {
+        -webkit-appearance: none;
+        overflow: hidden;
+        white-space: nowrap;
+        text-overflow: ellipsis;
+        font-size: inherit;
+        border: none;
+        outline: none;
+        margin: 0px !important;
+        padding: 0px !important;
+        box-shadow: none !important;
+        background: transparent;
+        color: inherit;
+        z-index: 1;
+
+        &.center {
+            display: flex;
+            justify-content: center;
+            align-items: center;
+        }
     }
-  }
 
-  .editableText {
-    -webkit-appearance: none;
-    overflow: hidden;
-    white-space: nowrap;
-    text-overflow: ellipsis;
-    font-size: inherit;
-    border: none;
-    outline: none;
-    margin: 0px !important;
-    padding: 0px !important;
-    box-shadow: none !important;
-    background: transparent;
-    color: inherit;
-    z-index: 1;
-
-    &.center {
-      display: flex;
-      justify-content: center;
-      align-items: center;
+    .displayText {
+        cursor: text !important;
+        width: 100%;
+        height: 100%;
+        white-space: nowrap;
+        text-overflow: ellipsis;
+        display: flex;
+        align-items: center;
+        font-size: inherit;
+        color: inherit;
+        z-index: 1;
+
+        &.center {
+            display: flex;
+            justify-content: center;
+            align-items: center;
+        }
     }
-  }
-  
-  .displayText {
-    cursor: text !important;
-    width: 100%;
-    height: 100%;
-    white-space: nowrap;
-    text-overflow: ellipsis;
-    display: flex;
-    align-items: center;
-    font-size: inherit;
-    color: inherit;
-    z-index: 1;
-
-    &.center {
-      display: flex;
-      justify-content: center;
-      align-items: center;
-    }
-  }
 }
-
diff --git a/packages/components/src/components/FormInput/FormInput.scss b/packages/components/src/components/FormInput/FormInput.scss
index db04ff8cf..2554cbd01 100644
--- a/packages/components/src/components/FormInput/FormInput.scss
+++ b/packages/components/src/components/FormInput/FormInput.scss
@@ -1,69 +1,69 @@
-@import '../../global/globalCssVariables.scss';
+@use '../../global/globalCssVariables.scss' as global;
 
 .formInput-container {
-  display: flex;
-  flex-direction: column;
-  width: 100%;
-  height: fit-content;
-  position: relative;
-  margin-top: 20px;
-
-  .formInput {
-    font-family: inherit;
+    display: flex;
+    flex-direction: column;
     width: 100%;
-    border: 0;
-    border-bottom: 2px solid black;
-    outline: 0;
-    font-size: 1rem;
-    color: black;
-    padding: 7px 0;
-    background: transparent;
-    transition: border-color 0.2s;
-
-    &::placeholder {
-      color: transparent;
-    }
+    height: fit-content;
+    position: relative;
+    margin-top: 20px;
 
-    &:focus {
-      ~ .formInput-label {
-        position: absolute;
-        transform: translate(0px, -13px);
-        display: block;
-        transition: 0.2s;
+    .formInput {
+        font-family: inherit;
+        width: 100%;
+        border: 0;
+        border-bottom: 2px solid black;
+        outline: 0;
         font-size: 1rem;
-        font-weight: 700;
-      }
-      padding-bottom: 6px;
-      font-weight: 700;
-      border-width: 3px;
-      border-image: linear-gradient(to right, black, white);
-      border-image-slice: 1;
+        color: black;
+        padding: 7px 0;
+        background: transparent;
+        transition: border-color 0.2s;
+
+        &::placeholder {
+            color: transparent;
+        }
+
+        &:focus {
+            ~ .formInput-label {
+                position: absolute;
+                transform: translate(0px, -13px);
+                display: block;
+                transition: 0.2s;
+                font-size: 1rem;
+                font-weight: 700;
+            }
+            padding-bottom: 6px;
+            font-weight: 700;
+            border-width: 3px;
+            border-image: linear-gradient(to right, black, white);
+            border-image-slice: 1;
+        }
+
+        &:valid {
+            ~ .formInput-label {
+                position: absolute;
+                transform: translate(0px, -13px);
+                display: block;
+                transition: 0.2s;
+                font-size: 1rem;
+            }
+        }
+
+        &:required,
+        &:invalid {
+            box-shadow: none;
+        }
     }
 
-    &:valid {
-      ~ .formInput-label {
+    .formInput-label {
         position: absolute;
-        transform: translate(0px, -13px);
+        top: 0;
+        transform: translate(0px, 8px);
         display: block;
         transition: 0.2s;
         font-size: 1rem;
-      }
+        color: gray;
+        pointer-events: none;
     }
-
-    &:required,
-    &:invalid {
-      box-shadow: none;
-    }
-  }
-
-  .formInput-label {
-    position: absolute;
-    top: 0;
-    transform: translate(0px, 8px);
-    display: block;
-    transition: 0.2s;
-    font-size: 1rem;
-    color: gray;
-    pointer-events: none;
-  }
 }
diff --git a/packages/components/src/components/Group/Group.scss b/packages/components/src/components/Group/Group.scss
index 885472a5d..7cd3dfd9e 100644
--- a/packages/components/src/components/Group/Group.scss
+++ b/packages/components/src/components/Group/Group.scss
@@ -1,16 +1,15 @@
-@import '../../global/globalCssVariables.scss';
+@use '../../global/globalCssVariables.scss' as global;
 
 .group-wrapper {
-  overflow: hidden;
+    overflow: hidden;
 
-  .group-container {
-    width: fit-content;
-    display: flex;
-    flex-flow: row wrap;
-    height: fit-content;
-    flex-flow: row;
-    justify-content: flex-start;
-    align-items: center;
-  }
+    .group-container {
+        width: fit-content;
+        display: flex;
+        flex-flow: row wrap;
+        height: fit-content;
+        flex-flow: row;
+        justify-content: flex-start;
+        align-items: center;
+    }
 }
-
diff --git a/packages/components/src/components/IconButton/IconButton.scss b/packages/components/src/components/IconButton/IconButton.scss
index 9a0b53c0f..f899dc50f 100644
--- a/packages/components/src/components/IconButton/IconButton.scss
+++ b/packages/components/src/components/IconButton/IconButton.scss
@@ -1,121 +1,119 @@
-@import '../../global/globalCssVariables.scss';
+@use '../../global/globalCssVariables.scss' as global;
 
 .iconButton-container {
-  position: relative;
-  cursor: pointer;
-  overflow: hidden;
-  user-select: none;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  font-family: $default-font;
-  border-radius: $standard-border-radius;
-  white-space: nowrap;
-  transition: 0.4s;
-  border: solid 1px;
-  border-color: transparent;
-  pointer-events: all;
-
-
-  .iconButton-content {
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    align-items: center;
-    height: 100%;
-    width: 100%;
-    z-index: 1;
-    font-family: Verdana, sans-serif;
-    font-weight: 500;
-  }
-
-  .icon {
-    z-index: 1;
+    position: relative;
+    cursor: pointer;
+    overflow: hidden;
+    user-select: none;
     display: flex;
     justify-content: center;
     align-items: center;
-  }
-
-  .background {
-    width: 100%;
-    height: 100%;
-    z-index: 0;
-    position: absolute;
+    font-family: global.$default-font;
+    border-radius: global.$standard-border-radius;
+    white-space: nowrap;
     transition: 0.4s;
-  }
+    border: solid 1px;
+    border-color: transparent;
+    pointer-events: all;
+
+    .iconButton-content {
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        align-items: center;
+        height: 100%;
+        width: 100%;
+        z-index: 1;
+        font-family: Verdana, sans-serif;
+        font-weight: 500;
+    }
 
-  &.inactive {
-    .background {
-      filter: opacity(0) !important;
+    .icon {
+        z-index: 1;
+        display: flex;
+        justify-content: center;
+        align-items: center;
     }
-  }
 
-  &.primary {
     .background {
-      filter: opacity(0);
-
-      &.active {
-        filter: opacity(0.2) !important;
-      }
+        width: 100%;
+        height: 100%;
+        z-index: 0;
+        position: absolute;
+        transition: 0.4s;
     }
 
-    &:hover{
-      .background {
-        filter: opacity(0.2)
-      }
+    &.inactive {
+        .background {
+            filter: opacity(0) !important;
+        }
     }
 
-  }
+    &.primary {
+        .background {
+            filter: opacity(0);
 
-  &.secondary {
-    .background {
-      filter: opacity(0);
+            &.active {
+                filter: opacity(0.2) !important;
+            }
+        }
 
-      &.active {
-        filter: opacity(0.2) !important;
-      }
+        &:hover {
+            .background {
+                filter: opacity(0.2);
+            }
+        }
     }
 
-    &:hover{
-      .background {
-        filter: opacity(0.2)
-      }
-    }
-  }
+    &.secondary {
+        .background {
+            filter: opacity(0);
+
+            &.active {
+                filter: opacity(0.2) !important;
+            }
+        }
 
-  &.tertiary {
-    &:hover{
-      box-shadow: $standard-button-shadow;
+        &:hover {
+            .background {
+                filter: opacity(0.2);
+            }
+        }
     }
 
-    &:hover{
-      .background {
-        filter: brightness(0.8);
-      }
+    &.tertiary {
+        &:hover {
+            box-shadow: global.$standard-button-shadow;
+        }
+
+        &:hover {
+            .background {
+                filter: brightness(0.8);
+            }
+        }
     }
-  }
 
-  .color {
-    position: relative;
-    width: 70%;
-    height: 15%;
-    z-index: 3;
-    margin-top: 2px;
-    border-radius: 10px;
-    outline: solid 0.3px;
-    outline-offset: -0.3px;
-  }
+    .color {
+        position: relative;
+        width: 70%;
+        height: 15%;
+        z-index: 3;
+        margin-top: 2px;
+        border-radius: 10px;
+        outline: solid 0.3px;
+        outline-offset: -0.3px;
+    }
 
-  .iconButton-label {
-    position: relative;
-    z-index: 2;
-    max-width: 100%;
-    overflow: hidden;
-    white-space: normal;
-    display: flex;
-    text-align: center;
-    justify-content: center;
-    align-items: center;
-    font-size: $xsmall-fontSize;
-  }
+    .iconButton-label {
+        position: relative;
+        z-index: 2;
+        max-width: 100%;
+        overflow: hidden;
+        white-space: normal;
+        display: flex;
+        text-align: center;
+        justify-content: center;
+        align-items: center;
+        font-size: global.$xsmall-fontSize;
+    }
 }
diff --git a/packages/components/src/components/ListBox/ListBox.scss b/packages/components/src/components/ListBox/ListBox.scss
index dc449c943..dc2a44513 100644
--- a/packages/components/src/components/ListBox/ListBox.scss
+++ b/packages/components/src/components/ListBox/ListBox.scss
@@ -1,4 +1,4 @@
-@import '../../global/globalCssVariables.scss';
+@use '../../global/globalCssVariables.scss' as global;
 
 .listBox-container {
     position: relative;
@@ -13,4 +13,4 @@
     max-width: 300px;
     padding: 5px;
     gap: 2px;
-}
\ No newline at end of file
+}
diff --git a/packages/components/src/components/ListItem/ListItem.scss b/packages/components/src/components/ListItem/ListItem.scss
index 736078360..8d46605d0 100644
--- a/packages/components/src/components/ListItem/ListItem.scss
+++ b/packages/components/src/components/ListItem/ListItem.scss
@@ -1,78 +1,78 @@
-@import '../../global/globalCssVariables.scss';
+@use '../../global/globalCssVariables.scss' as global;
 
 .listItem-container {
-  position: relative;
-  width: 100%;
-  border-radius: $standard-border-radius;
-  display: flex;
-  justify-content: center;
-  align-items: flex-start;
-  flex-direction: column;
-  cursor: pointer;
-  font-family: Verdana, sans-serif;
-  overflow: hidden;
-  text-align: left;
-
-  .listItem-background {
-    position: absolute;
+    position: relative;
     width: 100%;
-    height: 100%;
-    background: $medium-blue;
-    filter: opacity(0);
-    transition: 0.4s;
-  }
-
-  .listItem-top {
+    border-radius: global.$standard-border-radius;
     display: flex;
-    height: 30px;
-    width: 100%;
-    justify-content: space-between;
-    align-items: center;
-    gap: 20px;
+    justify-content: center;
+    align-items: flex-start;
+    flex-direction: column;
+    cursor: pointer;
+    font-family: Verdana, sans-serif;
+    overflow: hidden;
+    text-align: left;
 
-    .content {
-      display: flex;
-      justify-content: flex-start;
-      align-items: center;
-      padding: $padding;
-      width: 100%;
-      height: 100%;
-      z-index: 1;
-      gap: 5px;
-      font-weight: 500;
-
-      .text {
-        white-space: nowrap;
-        overflow: hidden;
-        text-overflow: ellipsis;
+    .listItem-background {
+        position: absolute;
         width: 100%;
-      }
+        height: 100%;
+        background: global.$medium-blue;
+        filter: opacity(0);
+        transition: 0.4s;
     }
 
-    .shortcut {
-      grid-area: end;
-      padding: $padding;
-      display: flex;
-      justify-content: center;
-      align-items: center;
-      font-size: $xsmall-fontSize;
-      font-family: $default-font;
-    }
+    .listItem-top {
+        display: flex;
+        height: 30px;
+        width: 100%;
+        justify-content: space-between;
+        align-items: center;
+        gap: 20px;
 
-    .caret {
-      grid-area: end;
-      display: flex;
-      justify-content: flex-end;
-      align-items: center;
-      justify-self: center;
+        .content {
+            display: flex;
+            justify-content: flex-start;
+            align-items: center;
+            padding: global.$padding;
+            width: 100%;
+            height: 100%;
+            z-index: 1;
+            gap: 5px;
+            font-weight: 500;
+
+            .text {
+                white-space: nowrap;
+                overflow: hidden;
+                text-overflow: ellipsis;
+                width: 100%;
+            }
+        }
+
+        .shortcut {
+            grid-area: end;
+            padding: global.$padding;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            font-size: global.$xsmall-fontSize;
+            font-family: global.$default-font;
+        }
+
+        .caret {
+            grid-area: end;
+            display: flex;
+            justify-content: flex-end;
+            align-items: center;
+            justify-self: center;
+        }
     }
-  }
 
-  .listItem-description {
-    font-size: $small-fontSize;
-    display: flex;
-    padding: 0px 5px 10px 5px;
-    justify-content: flex-start;
-    width: calc(100% - 10px);
-  }
+    .listItem-description {
+        font-size: global.$small-fontSize;
+        display: flex;
+        padding: 0px 5px 10px 5px;
+        justify-content: flex-start;
+        width: calc(100% - 10px);
+    }
 }
diff --git a/packages/components/src/components/Modal/Modal.scss b/packages/components/src/components/Modal/Modal.scss
index c0667ed26..a5698432d 100644
--- a/packages/components/src/components/Modal/Modal.scss
+++ b/packages/components/src/components/Modal/Modal.scss
@@ -1,46 +1,46 @@
-@import '../../global/globalCssVariables.scss';
+@use '../../global/globalCssVariables.scss' as global;
 
 .modal-container {
-  top: 0px;
-  left: 0px;
-  width: 100vw;
-  height: 100vh;
-  position: fixed;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  z-index: 100;
-
-  .modal-popup {
-    position: relative;
+    top: 0px;
+    left: 0px;
+    width: 100vw;
+    height: 100vh;
+    position: fixed;
     display: flex;
-    flex-direction: column;
-    align-items: left;
-    z-index: 10;
-    width: 400px;
-    height: fit-content;
-    padding: 20px;
-    border-radius: $standard-border-radius;
-    font-weight: bold;
-    font-size: 1.5rem;
+    justify-content: center;
+    align-items: center;
+    z-index: 100;
+
+    .modal-popup {
+        position: relative;
+        display: flex;
+        flex-direction: column;
+        align-items: left;
+        z-index: 10;
+        width: 400px;
+        height: fit-content;
+        padding: 20px;
+        border-radius: global.$standard-border-radius;
+        font-weight: bold;
+        font-size: 1.5rem;
 
-    .modal-closeButton {
-      top: -15px;
-      right: -15px;
-      position: absolute;
-      width: fit-content;
-      height: fit-content;
+        .modal-closeButton {
+            top: -15px;
+            right: -15px;
+            position: absolute;
+            width: fit-content;
+            height: fit-content;
+        }
     }
-  }
 }
 
 .modal-background {
-  z-index: 9;
-  position: absolute;
-  top: -10vh;
-  left: -10vw;
-  backdrop-filter: blur(15px);
-  width: 200vw;
-  height: 200vh;
-  background: $modal-background;
+    z-index: 9;
+    position: absolute;
+    top: -10vh;
+    left: -10vw;
+    backdrop-filter: blur(15px);
+    width: 200vw;
+    height: 200vh;
+    background: global.$modal-background;
 }
diff --git a/packages/components/src/components/MultiToggle/MultiToggle.scss b/packages/components/src/components/MultiToggle/MultiToggle.scss
index 2522549e9..854abdca0 100644
--- a/packages/components/src/components/MultiToggle/MultiToggle.scss
+++ b/packages/components/src/components/MultiToggle/MultiToggle.scss
@@ -1,5 +1 @@
-@import '../../global/globalCssVariables.scss';
-
-.multiToggle-container {
-    
-}
\ No newline at end of file
+@use '../../global/globalCssVariables.scss' as global;
diff --git a/packages/components/src/components/NumberDropdown/NumberDropdown.scss b/packages/components/src/components/NumberDropdown/NumberDropdown.scss
index 4ed5855d9..b3111623b 100644
--- a/packages/components/src/components/NumberDropdown/NumberDropdown.scss
+++ b/packages/components/src/components/NumberDropdown/NumberDropdown.scss
@@ -1,7 +1,4 @@
-@import '../../global/globalCssVariables.scss';
-
-.numberDropdown-container {
-}
+@use '../../global/globalCssVariables.scss' as global;
 
 .form-wrapper {
     .iconButton-label {
@@ -14,6 +11,6 @@
         text-align: center;
         justify-content: center;
         align-items: center;
-        font-size: $xsmall-fontSize !important;
+        font-size: global.$xsmall-fontSize !important;
     }
 }
diff --git a/packages/components/src/components/NumberInput/NumberInput.scss b/packages/components/src/components/NumberInput/NumberInput.scss
index 2a562d395..887d64857 100644
--- a/packages/components/src/components/NumberInput/NumberInput.scss
+++ b/packages/components/src/components/NumberInput/NumberInput.scss
@@ -1,5 +1,5 @@
-@import '../../global/globalCssVariables.scss';
+@use '../../global/globalCssVariables.scss' as global;
 
 .numberInput-container {
     width: 100%;
-}
\ No newline at end of file
+}
diff --git a/packages/components/src/components/Popup/Popup.scss b/packages/components/src/components/Popup/Popup.scss
index 39dd2c947..3087293f1 100644
--- a/packages/components/src/components/Popup/Popup.scss
+++ b/packages/components/src/components/Popup/Popup.scss
@@ -1,30 +1,30 @@
-@import '../../global/globalCssVariables.scss';
+@use '../../global/globalCssVariables.scss' as global;
 
 .popup-wrapper {
-  width: fit-content;
-
-  &.fillWidth {
-    width: 100%;
-  }
-  
-  .trigger-container {
     width: fit-content;
-    height: fit-content;
 
     &.fillWidth {
-      width: 100%;
+        width: 100%;
+    }
+
+    .trigger-container {
+        width: fit-content;
+        height: fit-content;
+
+        &.fillWidth {
+            width: 100%;
+        }
     }
-  }
 }
 
 .popup-container {
-  display: flex;
-  height: fit-content;
-  min-width: fit-content;
-  width: fit-content;
-  position: relative;
-  border: solid 1px $black;
-  border-radius: $standard-border-radius;
-  overflow: hidden;
-  background: $white;
+    display: flex;
+    height: fit-content;
+    min-width: fit-content;
+    width: fit-content;
+    position: relative;
+    border: solid 1px global.$black;
+    border-radius: global.$standard-border-radius;
+    overflow: hidden;
+    background: global.$white;
 }
diff --git a/packages/components/src/components/Slider/Slider.scss b/packages/components/src/components/Slider/Slider.scss
index 9a9fc6172..a653f024f 100644
--- a/packages/components/src/components/Slider/Slider.scss
+++ b/packages/components/src/components/Slider/Slider.scss
@@ -1,168 +1,163 @@
-@import '../../global/globalCssVariables.scss';
+@use '../../global/globalCssVariables.scss' as global;
 
 .slider-container {
-  display: flex;
-  position: relative;
-  justify-content: center;
-  align-items: center;
-  min-width: 200px;
-  width: 100%;
-  height: 100%;
-  font-family: $default-font;
-
-  .selected-range {
-    width: 100%;
-    background: $medium-blue;
-  }
-
-  .range {
-    position: absolute;
-    background: $light-gray;
-  }
-
-  .box-minmax{
-    width: 100%;
     display: flex;
-    justify-content: space-between;
-    font-size: 20px;
-    color: $medium-blue;
-    position: absolute;
-    top: 110%;
-  }
-  .range-slider {
-    margin: 0px;
-    position: absolute;
+    position: relative;
+    justify-content: center;
+    align-items: center;
+    min-width: 200px;
     width: 100%;
     height: 100%;
-    top: 0px;
-    left: 0px;
-
-    .rs-label-container {
-      display: flex;
-      position: absolute;
-      justify-content: center;
-      align-items: center;
-      overflow: visible;
-      border-radius: $standard-border-radius;
-      z-index: 45;
-      pointer-events: none;
-
-      .rs-label {
-        display: flex;
-        font-size: smaller;
-        white-space: nowrap;
-        border-radius: 100%;
-        text-align: center;
-        text-wrap: wrap;
-        word-break: break-all;
-        justify-content: center;
-        align-items: center;
-        font-family: $default-font;
-        user-select: none;
-        pointer-events: none;
-        top: 0px;
-        width: fit-content;
-        border-radius: $standard-border-radius;
-        z-index: 40;
-      }
-
-    }
-  
-    .rs-range {
-      width: 100%;
-      position: relative;
-      background: transparent;
-      pointer-events: none;
-      -webkit-appearance: none;
-      margin: 0px;
-      z-index: 20;
-  
-      &:focus {
-        outline: none;
-      }
-  
-      &::-webkit-slider-runnable-track {
-          width: 100%;
-          background: none;
-          cursor: pointer;
-          box-shadow: none;
-          -webkit-appearance: none;
-          pointer-events: none;
-      }
-      &::-moz-range-track {
-          width: 100%;
-          cursor: pointer;
-          box-shadow: none;
-          -webkit-appearance: none;
-          pointer-events: none;
-      }
-    
-    &::-webkit-slider-thumb {
-          cursor: ew-resize;
-          -webkit-appearance: none;
-          pointer-events: auto;
-    }
-    &::-moz-range-thumb {
-          cursor: pointer;
-          -webkit-appearance: none;
-          pointer-events: auto;
-    }
-
-    &::-moz-focus-outer {
-      border: 0;
-    }
-
-    &.xsmall {
-    &::-webkit-slider-runnable-track {
-        height: $xsmall;
-      }
+    font-family: global.$default-font;
 
-      &::-webkit-slider-thumb {
-        height: $xsmall;
-        width: $xsmall;
-        border-radius: $xsmall;
-      }
+    .selected-range {
+        width: 100%;
+        background: global.$medium-blue;
     }
 
-    &.small {
-      &::-webkit-slider-runnable-track {
-        height: $small;
-      }
-
-      &::-webkit-slider-thumb {
-        height: $small;
-        width: $small;
-        border-radius: $small;
-      }
+    .range {
+        position: absolute;
+        background: global.$light-gray;
     }
 
-    &.medium {
-      &::-webkit-slider-runnable-track {
-        height: $medium;
-      }
-
-      &::-webkit-slider-thumb {
-        height: $medium;
-        width: $medium;
-        border-radius: $medium;
-      }
+    .box-minmax {
+        width: 100%;
+        display: flex;
+        justify-content: space-between;
+        font-size: 20px;
+        color: global.$medium-blue;
+        position: absolute;
+        top: 110%;
     }
-
-    &.large {
-      &::-webkit-slider-runnable-track {
-        height: $large;
-      }
-
-      &::-webkit-slider-thumb {
-        height: $large;
-        width: $large;
-        border-radius: $large;
-      }
+    .range-slider {
+        margin: 0px;
+        position: absolute;
+        width: 100%;
+        height: 100%;
+        top: 0px;
+        left: 0px;
+
+        .rs-label-container {
+            display: flex;
+            position: absolute;
+            justify-content: center;
+            align-items: center;
+            overflow: visible;
+            border-radius: global.$standard-border-radius;
+            z-index: 45;
+            pointer-events: none;
+
+            .rs-label {
+                display: flex;
+                font-size: smaller;
+                white-space: nowrap;
+                border-radius: 100%;
+                text-align: center;
+                text-wrap: wrap;
+                word-break: break-all;
+                justify-content: center;
+                align-items: center;
+                font-family: global.$default-font;
+                user-select: none;
+                pointer-events: none;
+                top: 0px;
+                width: fit-content;
+                border-radius: global.$standard-border-radius;
+                z-index: 40;
+            }
+        }
+
+        .rs-range {
+            width: 100%;
+            position: relative;
+            background: transparent;
+            pointer-events: none;
+            -webkit-appearance: none;
+            margin: 0px;
+            z-index: 20;
+
+            &:focus {
+                outline: none;
+            }
+
+            &::-webkit-slider-runnable-track {
+                width: 100%;
+                background: none;
+                cursor: pointer;
+                box-shadow: none;
+                -webkit-appearance: none;
+                pointer-events: none;
+            }
+            &::-moz-range-track {
+                width: 100%;
+                cursor: pointer;
+                box-shadow: none;
+                -webkit-appearance: none;
+                pointer-events: none;
+            }
+
+            &::-webkit-slider-thumb {
+                cursor: ew-resize;
+                -webkit-appearance: none;
+                pointer-events: auto;
+            }
+            &::-moz-range-thumb {
+                cursor: pointer;
+                -webkit-appearance: none;
+                pointer-events: auto;
+            }
+
+            &::-moz-focus-outer {
+                border: 0;
+            }
+
+            &.xsmall {
+                &::-webkit-slider-runnable-track {
+                    height: global.$xsmall;
+                }
+
+                &::-webkit-slider-thumb {
+                    height: global.$xsmall;
+                    width: global.$xsmall;
+                    border-radius: global.$xsmall;
+                }
+            }
+
+            &.small {
+                &::-webkit-slider-runnable-track {
+                    height: global.$small;
+                }
+
+                &::-webkit-slider-thumb {
+                    height: global.$small;
+                    width: global.$small;
+                    border-radius: global.$small;
+                }
+            }
+
+            &.medium {
+                &::-webkit-slider-runnable-track {
+                    height: global.$medium;
+                }
+
+                &::-webkit-slider-thumb {
+                    height: global.$medium;
+                    width: global.$medium;
+                    border-radius: global.$medium;
+                }
+            }
+
+            &.large {
+                &::-webkit-slider-runnable-track {
+                    height: global.$large;
+                }
+
+                &::-webkit-slider-thumb {
+                    height: global.$large;
+                    width: global.$large;
+                    border-radius: global.$large;
+                }
+            }
+        }
     }
-  }
-  }
-  
 }
-
-
-
diff --git a/packages/components/src/components/Slider/Slider.tsx b/packages/components/src/components/Slider/Slider.tsx
index 3ca51efed..f6f53799c 100644
--- a/packages/components/src/components/Slider/Slider.tsx
+++ b/packages/components/src/components/Slider/Slider.tsx
@@ -1,178 +1,188 @@
-import React, { useEffect, useRef, useState } from 'react'
-import { Colors, getFontSize, getHeight, IGlobalProps, Size , getFormLabelSize, isDark, INumberProps } from '../../global'
-import './Slider.scss'
+import React, { useState } from 'react';
+import { Colors, getFontSize, getHeight, Size, getFormLabelSize, isDark, INumberProps } from '../../global';
+import './Slider.scss';
 
 export interface ISliderProps extends INumberProps {
-  multithumb: boolean
-  autorangeMinVal?: number // minimimum value that min can have when autoranging
-  autorangeMinSize?: number // minimum difference between min and max when autoranging
-  autorange?: number        // automatically adjust min/max to be +/- autorange/2 around the current value when the thumb is 15% from the min/max, or when the multithumbs are within 20% of the range and the range is bigger than autorange
-  endNumber?: number
-  setEndNumber?: (newVal: number) => void
-  setFinalNumber?: (newVal: number) => void
-  setFinalEndNumber?: (newVal: number) => void
-  decimals?: number; 
-  step?: number
-  minDiff?: number
+    multithumb: boolean;
+    autorangeMinVal?: number; // minimimum value that min can have when autoranging
+    autorangeMinSize?: number; // minimum difference between min and max when autoranging
+    autorange?: number; // automatically adjust min/max to be +/- autorange/2 around the current value when the thumb is 15% from the min/max, or when the multithumbs are within 20% of the range and the range is bigger than autorange
+    endNumber?: number;
+    setEndNumber?: (newVal: number) => void;
+    setFinalNumber?: (newVal: number) => void;
+    setFinalEndNumber?: (newVal: number) => void;
+    decimals?: number;
+    step?: number;
+    minDiff?: number;
 }
 
-let lastVal = 0;  // bcz: WHY do I have to do this??  the pointerdown event locks in the value of 'valLoc' when it's created so need some other way to get the current value to that old handler...
+let lastVal = 0; // bcz: WHY do I have to do this??  the pointerdown event locks in the value of 'valLoc' when it's created so need some other way to get the current value to that old handler...
 let lastEndVal = 0;
 
 export const Slider = (props: ISliderProps) => {
-  const [width, setWidth] = useState<number>(100);
-  const [valLoc, setNumberLoc] = useState<number>(props.number??(props.min + (props.max-props.min)/2));
-  const [endNumberLoc, setEndNumberLoc] = useState<number>(props.endNumber??(props.min + 2*(props.max-props.min)/3));
-  const [min, setMin] = useState<number>(props.min);
-  const [max, setMax] = useState<number>(props.max);
-  const { 
-    formLabel, 
-    formLabelPlacement, 
-    multithumb, 
-    autorange,
-    autorangeMinVal,
-    autorangeMinSize,
-    decimals,
-    step = 1, 
-    number = valLoc, 
-    endNumber = endNumberLoc, 
-    minDiff = (max-min)/20, 
-    size = Size.SMALL, 
-    height, 
-    unit, 
-    onPointerDown, 
-    setNumber, 
-    setEndNumber,
-    setFinalNumber, 
-    setFinalEndNumber,
-    color = Colors.MEDIUM_BLUE,
-    fillWidth
-  } = props
+    const [width, setWidth] = useState<number>(100);
+    const [valLoc, setNumberLoc] = useState<number>(props.number ?? props.min + (props.max - props.min) / 2);
+    const [endNumberLoc, setEndNumberLoc] = useState<number>(props.endNumber ?? props.min + (2 * (props.max - props.min)) / 3);
+    const [min, setMin] = useState<number>(props.min);
+    const [max, setMax] = useState<number>(props.max);
+    const {
+        formLabel,
+        formLabelPlacement,
+        multithumb,
+        autorange,
+        autorangeMinVal,
+        autorangeMinSize,
+        decimals,
+        step = 1,
+        number = valLoc,
+        endNumber = endNumberLoc,
+        minDiff = (max - min) / 20,
+        size = Size.SMALL,
+        height,
+        unit,
+        onPointerDown,
+        setNumber,
+        setEndNumber,
+        setFinalNumber,
+        setFinalEndNumber,
+        color = Colors.MEDIUM_BLUE,
+        fillWidth,
+    } = props;
 
-  const toDecimal = (num:number) => decimals !== undefined ? Math.round(num*Math.pow(10,decimals))/Math.pow(10,decimals): num;
+    const toDecimal = (num: number) => (decimals !== undefined ? Math.round(num * Math.pow(10, decimals)) / Math.pow(10, decimals) : num);
 
-  const getLeftPos = (locVal: number) => {
-    const dragger = getHeight(height,size)
-    return (((locVal-min)/ (max-min)) * (width-dragger))
-  }
+    const getLeftPos = (locVal: number) => {
+        const dragger = getHeight(+(height || 0), size);
+        return ((locVal - min) / (max - min)) * (width - dragger);
+    };
 
-  const getValueLabel = (locVal: number): JSX.Element => {
-    return (<div className="rs-label-container" 
-            style={{
-              left: `${getLeftPos(locVal)}px`,
-              background: color,
-              color: isDark(color) ? Colors.LIGHT_GRAY : Colors.DARK_GRAY,
-              fontSize: getFontSize(size),
-              height: getHeight(height, size),
-              width: getHeight(height, size),
-              top: 0
-            }}
-            >
-            <span className="rs-label">
-              {toDecimal(locVal)}
-            </span>
-          </div>)
-  }
-  const checkAutorange = () => {
-    if (autorange) {
-      const minval = multithumb ? Math.min(lastVal, lastEndVal) : lastVal;
-      const maxval = multithumb ? Math.max(lastVal, lastEndVal) : lastVal;
-      const autosize = Math.max(autorangeMinSize??0,(autorange ?? (maxval-minval)))/2;
-      if ((Math.abs((minval - min)/(max-min)) < .15) || (Math.abs((max - maxval)/(max-min)) < .15) ||
-          (multithumb && maxval - minval < (max-min)/5 && autosize < max-min)
-       ) {
-        const newminval = autorangeMinVal !== undefined && minval-autosize < autorangeMinVal? autorangeMinVal : minval-autosize;
-        setMin(newminval)
-        setMax(newminval !== minval ? Math.max(maxval + autosize, newminval +autosize): maxval+autosize )
-      }
-    }
-  }
+    const getValueLabel = (locVal: number): JSX.Element => {
+        return (
+            <div
+                className="rs-label-container"
+                style={{
+                    left: `${getLeftPos(locVal)}px`,
+                    background: color,
+                    color: isDark(color) ? Colors.LIGHT_GRAY : Colors.DARK_GRAY,
+                    fontSize: getFontSize(size),
+                    height: getHeight(+(height || 0), size),
+                    width: getHeight(+(height || 0), size),
+                    top: 0,
+                }}>
+                <span className="rs-label">{toDecimal(locVal)}</span>
+            </div>
+        );
+    };
+    const checkAutorange = () => {
+        if (autorange) {
+            const minval = multithumb ? Math.min(lastVal, lastEndVal) : lastVal;
+            const maxval = multithumb ? Math.max(lastVal, lastEndVal) : lastVal;
+            const autosize = Math.max(autorangeMinSize ?? 0, autorange ?? maxval - minval) / 2;
+            if (Math.abs((minval - min) / (max - min)) < 0.15 || Math.abs((max - maxval) / (max - min)) < 0.15 || (multithumb && maxval - minval < (max - min) / 5 && autosize < max - min)) {
+                const newminval = autorangeMinVal !== undefined && minval - autosize < autorangeMinVal ? autorangeMinVal : minval - autosize;
+                setMin(newminval);
+                setMax(newminval !== minval ? Math.max(maxval + autosize, newminval + autosize) : maxval + autosize);
+            }
+        }
+    };
 
-  const valSlider = (which: string, val:number, onchange: (val:number) => void, setFinal: () => void) => {
-    const valPointerup = (e:PointerEvent) => {
-        document.removeEventListener('pointerup', valPointerup, true)
-        setFinal();
-        checkAutorange();
-    }
-    return (<div key={which} className={`range-slider ${size}`}>
-          {getValueLabel(val)}
-          <input
-            className={`rs-range ${size}`}
-            type="range"
-            color={color}
-            min={min}
-            max={max}
-            step={step}
-            value={val}
-            onPointerDown={e => document.addEventListener('pointerup', valPointerup, true)}
-            onChange={e => {
-              onchange(+e.target.value);
-              e.stopPropagation();
-            }}
-          />
-      </div>);
-  }
-  const onchange = (val:number) => {
-      if (autorangeMinVal && val < autorangeMinVal) val = autorangeMinVal;
-      setNumber?.(lastVal = Math.min(multithumb ? endNumber - (minDiff??0):Number.MAX_VALUE, val))
-      setNumberLoc(lastVal = Math.min(multithumb ? endNumber - (minDiff??0):Number.MAX_VALUE, val))
-  }
-  const onendchange = (val:number) => {
-    setEndNumber?.(lastEndVal = Math.max(number + (minDiff??0), val))
-    setEndNumberLoc(lastEndVal = Math.max(number + (minDiff??0), val))
-  }
-  const Slider:(JSX.Element|null)[] = [
-      !multithumb ? (null) : valSlider("end", endNumberLoc,onendchange, () => setFinalEndNumber?.(lastEndVal)),
-      valSlider("start", valLoc, onchange, () => setFinalNumber?.(lastVal))
-  ];
+    const valSlider = (which: string, val: number, onchange: (val: number) => void, setFinal: () => void) => {
+        const valPointerup = () => {
+            document.removeEventListener('pointerup', valPointerup, true);
+            setFinal();
+            checkAutorange();
+        };
+        return (
+            <div key={which} className={`range-slider ${size}`}>
+                {getValueLabel(val)}
+                <input
+                    className={`rs-range ${size}`}
+                    type="range"
+                    color={color}
+                    min={min}
+                    max={max}
+                    step={step}
+                    value={val}
+                    onPointerDown={() => document.addEventListener('pointerup', valPointerup, true)}
+                    onChange={e => {
+                        onchange(+e.target.value);
+                        e.stopPropagation();
+                    }}
+                />
+            </div>
+        );
+    };
+    const onchange = (val: number) => {
+        // eslint-disable-next-line no-param-reassign
+        if (autorangeMinVal && val < autorangeMinVal) val = autorangeMinVal;
+        setNumber?.((lastVal = Math.min(multithumb ? endNumber - (minDiff ?? 0) : Number.MAX_VALUE, val)));
+        setNumberLoc((lastVal = Math.min(multithumb ? endNumber - (minDiff ?? 0) : Number.MAX_VALUE, val)));
+    };
+    const onendchange = (val: number) => {
+        setEndNumber?.((lastEndVal = Math.max(number + (minDiff ?? 0), val)));
+        setEndNumberLoc((lastEndVal = Math.max(number + (minDiff ?? 0), val)));
+    };
+    const Slider: (JSX.Element | null)[] = [!multithumb ? null : valSlider('end', endNumberLoc, onendchange, () => setFinalEndNumber?.(lastEndVal)), valSlider('start', valLoc, onchange, () => setFinalNumber?.(lastVal))];
 
-  const slider: JSX.Element = (
-    <div className={`slider-wrapper`} 
-      onPointerEnter={e => {
-        lastVal = valLoc;
-        lastEndVal = endNumberLoc;
-      }}
-      style={{
-        padding: `5px 0px ${getHeight(height, size)}px 0px`,
-        width: fillWidth ? '100%' : 'fit-content'
-      }}>
-      <div className="slider-container" 
-            ref={r => {
-              r && new ResizeObserver(() => setWidth(+(r?.clientWidth??100))).observe(r);
-              setWidth(+(r?.clientWidth??100));
-            }} 
-            style={{height: getHeight(height, size)}}
-            onPointerDown={onPointerDown}
-      >
-          {Slider}
-          <div className="selected-range" style={{
-            height: getHeight(height, size) / 10,
-            background: multithumb ? Colors.LIGHT_GRAY : color
-
-          }}/>
-          <div className="range" style={{
-            height: getHeight(height, size) / 10,
-            width: getLeftPos(endNumber) - getLeftPos(number),
-            left: getLeftPos(number) + getHeight(height, size),
-            display: multithumb ? undefined: 'none',
-            background: color,
-          }}/>
-          <div className="box-minmax" style={{ fontSize: getFontSize(size), color }}>
-          <span>{toDecimal(min)}{unit}</span>
-          <span>{toDecimal(max)}{unit}</span>
+    const slider: JSX.Element = (
+        <div
+            className={`slider-wrapper`}
+            onPointerEnter={() => {
+                lastVal = valLoc;
+                lastEndVal = endNumberLoc;
+            }}
+            style={{
+                padding: `5px 0px ${getHeight(+(height || 0), size)}px 0px`,
+                width: fillWidth ? '100%' : 'fit-content',
+            }}>
+            <div
+                className="slider-container"
+                ref={r => {
+                    r && new ResizeObserver(() => setWidth(+(r?.clientWidth ?? 100))).observe(r);
+                    setWidth(+(r?.clientWidth ?? 100));
+                }}
+                style={{ height: getHeight(+(height || 0), size) }}
+                onPointerDown={onPointerDown}>
+                {Slider}
+                <div
+                    className="selected-range"
+                    style={{
+                        height: getHeight(+(height || 0), size) / 10,
+                        background: multithumb ? Colors.LIGHT_GRAY : color,
+                    }}
+                />
+                <div
+                    className="range"
+                    style={{
+                        height: getHeight(+(height || 0), size) / 10,
+                        width: getLeftPos(endNumber) - getLeftPos(number),
+                        left: getLeftPos(number) + getHeight(+(height || 0), size),
+                        display: multithumb ? undefined : 'none',
+                        background: color,
+                    }}
+                />
+                <div className="box-minmax" style={{ fontSize: getFontSize(size), color }}>
+                    <span>
+                        {toDecimal(min)}
+                        {unit}
+                    </span>
+                    <span>
+                        {toDecimal(max)}
+                        {unit}
+                    </span>
+                </div>
+            </div>
         </div>
-      </div>
-    </div>
-  )
-
-  return (
-    formLabel ? 
-    <div  className={`form-wrapper ${formLabelPlacement}`}>
-        <div className={'formLabel'} style={{fontSize: getFormLabelSize(size)}}>{formLabel}</div>
-        {slider}
-    </div>
-    :
-    slider
-)
-}
+    );
 
+    return formLabel ? (
+        <div className={`form-wrapper ${formLabelPlacement}`}>
+            <div className={'formLabel'} style={{ fontSize: getFormLabelSize(size) }}>
+                {formLabel}
+            </div>
+            {slider}
+        </div>
+    ) : (
+        slider
+    );
+};
diff --git a/packages/components/src/components/Template/Template.scss b/packages/components/src/components/Template/Template.scss
index c91147200..854abdca0 100644
--- a/packages/components/src/components/Template/Template.scss
+++ b/packages/components/src/components/Template/Template.scss
@@ -1,5 +1 @@
-@import '../../global/globalCssVariables.scss';
-
-.template-container {
-    
-}
\ No newline at end of file
+@use '../../global/globalCssVariables.scss' as global;
diff --git a/packages/components/src/components/Toggle/Toggle.scss b/packages/components/src/components/Toggle/Toggle.scss
index b2faa8d99..d65cb8e23 100644
--- a/packages/components/src/components/Toggle/Toggle.scss
+++ b/packages/components/src/components/Toggle/Toggle.scss
@@ -1,77 +1,77 @@
-@import '../../global/globalCssVariables.scss';
+@use '../../global/globalCssVariables.scss' as global;
 
 .toggle-label {
-  position: relative;
-  bottom: 0;
-  width: 100%;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  font-size: $xsmall-fontSize;
+    position: relative;
+    bottom: 0;
+    width: 100%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    font-size: global.$xsmall-fontSize;
 }
 
 .toggle-container {
-  position: relative;
-  width: fit-content;
-  cursor: pointer;
-  overflow: hidden;
-  user-select: none;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  gap: 5px;
-  font-family: $default-font;
-  font-size: $medium-fontSize;
-  border-radius: 100px;
-  white-space: nowrap;
-  transition: 0.4s ease;
-  border: solid 1px;
-  border-color: $medium-blue;
+    position: relative;
+    width: fit-content;
+    cursor: pointer;
+    overflow: hidden;
+    user-select: none;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    gap: 5px;
+    font-family: global.$default-font;
+    font-size: global.$medium-fontSize;
+    border-radius: 100px;
+    white-space: nowrap;
+    transition: 0.4s ease;
+    border: solid 1px;
+    border-color: global.$medium-blue;
 
-  &:hover {
-    .toggle-background {
-      filter: opacity(0.2);
+    &:hover {
+        .toggle-background {
+            filter: opacity(0.2);
+        }
     }
-  }
 
-  &.switch {
-    &:hover {
-      .toggle-background {
-        filter: opacity(0);
-      }
+    &.switch {
+        &:hover {
+            .toggle-background {
+                filter: opacity(0);
+            }
+        }
     }
-  }
 
-  .toggle-content {
-    position: absolute;
-    display: flex;
-    align-items: center;
-    width: 100%;
-    height: 100%;
-    z-index: 1;
-    text-transform: uppercase;
-    font-family: Verdana, sans-serif;
-    font-weight: 500;
-    transition: 0.4s;
+    .toggle-content {
+        position: absolute;
+        display: flex;
+        align-items: center;
+        width: 100%;
+        height: 100%;
+        z-index: 1;
+        text-transform: uppercase;
+        font-family: Verdana, sans-serif;
+        font-weight: 500;
+        transition: 0.4s;
 
-    .toggle-switch {
-      background: $medium-blue;
-      transition: 0.4s;
-      border-radius: 100px;
+        .toggle-switch {
+            background: global.$medium-blue;
+            transition: 0.4s;
+            border-radius: 100px;
+        }
     }
-  }
 
-  .toggle-background {
-    width: 100%;
-    height: 100%;
-    z-index: 0;
-    position: absolute;
-    background: $medium-blue;
-    transition: 0.4s ease;
-    filter: opacity(0);
+    .toggle-background {
+        width: 100%;
+        height: 100%;
+        z-index: 0;
+        position: absolute;
+        background: global.$medium-blue;
+        transition: 0.4s ease;
+        filter: opacity(0);
 
-    &.active {
-      filter: opacity(0.4) !important;
+        &.active {
+            filter: opacity(0.4) !important;
+        }
     }
-  }
 }
diff --git a/packages/components/src/global/globalCssVariables.scss b/packages/components/src/global/globalCssVariables.scss
index 1ac2ef45c..ebc44106d 100644
--- a/packages/components/src/global/globalCssVariables.scss
+++ b/packages/components/src/global/globalCssVariables.scss
@@ -75,8 +75,10 @@ $standard-border-radius: 5px;
 
 // shadow
 $standard-shadow: 0px 3px 4px rgba(0, 0, 0, 0.3);
-$standard-button-shadow: rgb(0 0 0 / 20%) 0px 2px 4px -1px,
-  rgb(0 0 0 / 14%) 0px 4px 5px 0px, rgb(0 0 0 / 12%) 0px 1px 10px 0px;
+$standard-button-shadow:
+    rgb(0 0 0 / 20%) 0px 2px 4px -1px,
+    rgb(0 0 0 / 14%) 0px 4px 5px 0px,
+    rgb(0 0 0 / 12%) 0px 1px 10px 0px;
 
 $dashboardselector-height: 32px;
 $mainTextInput-zindex: 999; // then text input overlay so that it's context menu will appear over decorations, etc
@@ -91,70 +93,68 @@ $LEFT_MENU_WIDTH: 60px;
 $TREE_BULLET_WIDTH: 20px;
 
 :export {
-  contextMenuZindex: $contextMenu-zindex;
-  SCHEMA_DIVIDER_WIDTH: $SCHEMA_DIVIDER_WIDTH;
-  COLLECTION_BORDER_WIDTH: $COLLECTION_BORDER_WIDTH;
-  MINIMIZED_ICON_SIZE: $MINIMIZED_ICON_SIZE;
-  MAX_ROW_HEIGHT: $MAX_ROW_HEIGHT;
-  SEARCH_THUMBNAIL_SIZE: $search-thumnail-size;
-  ANTIMODEMENU_HEIGHT: $antimodemenu-height;
-  DASHBOARD_SELECTOR_HEIGHT: $dashboardselector-height;
-  DFLT_IMAGE_NATIVE_DIM: $DFLT_IMAGE_NATIVE_DIM;
-  LEFT_MENU_WIDTH: $LEFT_MENU_WIDTH;
-  TREE_BULLET_WIDTH: $TREE_BULLET_WIDTH;
+    contextMenuZindex: $contextMenu-zindex;
+    SCHEMA_DIVIDER_WIDTH: $SCHEMA_DIVIDER_WIDTH;
+    COLLECTION_BORDER_WIDTH: $COLLECTION_BORDER_WIDTH;
+    MINIMIZED_ICON_SIZE: $MINIMIZED_ICON_SIZE;
+    MAX_ROW_HEIGHT: $MAX_ROW_HEIGHT;
+    SEARCH_THUMBNAIL_SIZE: $search-thumnail-size;
+    ANTIMODEMENU_HEIGHT: $antimodemenu-height;
+    DASHBOARD_SELECTOR_HEIGHT: $dashboardselector-height;
+    DFLT_IMAGE_NATIVE_DIM: $DFLT_IMAGE_NATIVE_DIM;
+    LEFT_MENU_WIDTH: $LEFT_MENU_WIDTH;
+    TREE_BULLET_WIDTH: $TREE_BULLET_WIDTH;
 }
 
 .form-wrapper {
-  display: flex;
-  flex-direction: column;
-  justify-content: flex-start;
-  align-items: flex-start;
-  gap: 0px;
-  padding-bottom: 5px;
-
-
-  .formLabel {
     display: flex;
-    font-family: $default-font;
-    text-transform: uppercase;
-    opacity: 0.8;
-    min-width: 'fit-content'
-  }
-
-  &.left {
-    flex-direction: row;
-    align-items: center;
-    gap: 3px;
+    flex-direction: column;
+    justify-content: flex-start;
+    align-items: flex-start;
+    gap: 0px;
+    padding-bottom: 5px;
 
     .formLabel {
-      text-align: left;
+        display: flex;
+        font-family: $default-font;
+        text-transform: uppercase;
+        opacity: 0.8;
+        min-width: 'fit-content';
     }
-  }
 
-  &.right {
-    flex-direction: row-reverse;
-    justify-content: flex-end;
-    align-items: center;
-    gap: 3px;
+    &.left {
+        flex-direction: row;
+        align-items: center;
+        gap: 3px;
 
-    .formLabel {
-      text-align: right;
+        .formLabel {
+            text-align: left;
+        }
     }
-  }
 
-  &.top {
-    flex-direction: column;
-    gap: 1px;
-  }
+    &.right {
+        flex-direction: row-reverse;
+        justify-content: flex-end;
+        align-items: center;
+        gap: 3px;
 
-  &.top-start {
-    flex-direction: column;
-    align-items: flex-start;
-  }
+        .formLabel {
+            text-align: right;
+        }
+    }
 
-  &.top-end {
-    flex-direction: column;
-    align-items: flex-end;
-  }
-}
+    &.top {
+        flex-direction: column;
+        gap: 1px;
+    }
 
+    &.top-start {
+        flex-direction: column;
+        align-items: flex-start;
+    }
+
+    &.top-end {
+        flex-direction: column;
+        align-items: flex-end;
+    }
+}