@neo4j-ndl/base 0.1.2 → 0.2.0

package/lib/neo4j-ds-styles.css

@@ -1,6 +1,6 @@
 
 
-@import url('https://fonts.googleapis.com/css2?family=Fira+Code:wght@500&family=Nunito+Sans:wght@400;500;600;700&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Fira+Code:wght@500&family=Nunito+Sans:wght@300;400;500;600;700&display=swap');
 /**
  *
  *  Copyright (c) "Neo4j"
@@ -21,7 +21,7 @@
  *  You should have received a copy of the GNU General Public License
  *  along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
-/*! tailwindcss v3.0.16 | MIT License | https://tailwindcss.com
+/*! tailwindcss v3.0.23 | MIT License | https://tailwindcss.com
  */
 /*
 1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4)
@@ -420,7 +420,7 @@ Ensure the default browser behavior of the `hidden` attribute.
  */
 /**
  * Do not edit directly
- * Generated on Mon, 14 Mar 2022 15:40:41 GMT
+ * Generated on Tue, 19 Apr 2022 13:44:29 GMT
  */
 :root {
   --border-radius-sm: 4px;
@@ -432,7 +432,13 @@ Ensure the default browser behavior of the `hidden` attribute.
   --border-radius-3xl: 16px;
   --border-radius-4xl: 18px;
   --border-radius-5xl: 20px;
-  --border-radius-full: 9999px;;
+  --border-radius-full: 9999px;
+  --breakpoints-xs: 450px; /* Extra small screen / phone, only one not included with Tailwind CSS */
+  --breakpoints-sm: 640px; /* Check here: https://tailwindcss.com/docs/responsive-design */
+  --breakpoints-md: 768px;
+  --breakpoints-lg: 1024px;
+  --breakpoints-xl: 1280px;
+  --breakpoints-2xl: 1536px;
   --colors-primary-10: 230, 248, 255 /* #e6f8ff */; /* lighest shade of brand primary color */
   --colors-primary-20: 163, 226, 255 /* #a3e2ff */;
   --colors-primary-30: 122, 209, 255 /* #7ad1ff */;
@@ -575,7 +581,7 @@ h1,
 .h1 {
   font-size: var(--font-size-h1);
   font-weight: var(--font-weight-bold);
-  letter-spacing: 0.25px;
+  letter-spacing: -0.25px;
   line-height: 60px;
 }
 h2,
@@ -583,7 +589,7 @@ h2,
   font-size: var(--font-size-h2);
   font-weight: var(--font-weight-bold);
   letter-spacing: 0px;
-  line-height: 60px;
+  line-height: 48px;
 }
 h3,
 .h3 {
@@ -827,9 +833,11 @@ a.ndl-btn{
   max-width: max-content;
   flex-direction: column;
   justify-content: center;
-  border-radius: 9999px;;
+  border-radius: 9999px;
   padding-left: 0.5rem;
   padding-right: 0.5rem;
+  padding-top: 0.125rem;
+  padding-bottom: 0.125rem;
   font-weight: 700;
   text-transform: capitalize;
   line-height: 1.25rem;
@@ -848,14 +856,18 @@ a.ndl-btn{
   height: 0.5rem;
   width: 0.5rem;
 }
+.ndl-label.clean .label-text{
+  --tw-text-opacity: 1;
+  color: rgb(21 30 41 / var(--tw-text-opacity));
+}
 .ndl-label.outlined{
-  border-width: 1px;
+  border-width: 0.5px;
   border-style: solid;
   --tw-bg-opacity: 1;
   background-color: rgb(255 255 255 / var(--tw-bg-opacity));
 }
 .ndl-label.semi-filled{
-  border-width: 1px;
+  border-width: 0.5px;
   border-style: solid;
 }
 /**
@@ -880,15 +892,37 @@ a.ndl-btn{
  */
 .ndl-tabs.underline {
     border-bottom-style: solid;
-    --tw-border-opacity: 1;
-    border-bottom-color: rgb(238 241 246 / var(--tw-border-opacity));
+    /* @apply n-border-b-light-neutral-border-weak n-text-light-neutral-text-weak n-relative; */
+    position: relative;
   }
-.ndl-tabs.underline.small {
-      border-bottom-width: 1px;
-    }
-.ndl-tabs.underline.large {
-      border-bottom-width: 2px;
-    }
+/**
+    * We use an :after pseudo element to draw the
+    * underline inside the component
+    */
+.ndl-tabs.underline.small:after {
+        content: '';
+        position: absolute;
+        width: 100%;
+        height: 1px;
+        bottom: 0px;
+        /* Hack to not be visible beneath the bottom blue border */
+        left: 1px;
+        z-index: 0;
+        --tw-bg-opacity: 1;
+        background-color: rgb(238 241 246 / var(--tw-bg-opacity));
+      }
+.ndl-tabs.underline.large:after {
+        content: '';
+        position: absolute;
+        width: 100%;
+        height: 2px;
+        bottom: 0px;
+        /* Hack to not be visible beneath the bottom blue border */
+        left: 1px;
+        z-index: 0;
+        --tw-bg-opacity: 1;
+        background-color: rgb(238 241 246 / var(--tw-bg-opacity));
+      }
 .ndl-tabs .tab {
     font-weight: 600;
     background: none;
@@ -931,16 +965,37 @@ a.ndl-btn{
   --tw-text-opacity: 1;
   color: rgb(178 183 189 / var(--tw-text-opacity));
 }
-.ndl-tabs .tab.underline.small > .tab-underline {
-        bottom: -1px;
+.ndl-tabs .tab.underline {
+      /* To be always above bottom border */
+      z-index: 1;
+    }
+.ndl-tabs .tab.underline:not(.selected){
+  --tw-text-opacity: 1;
+  color: rgb(83 91 102 / var(--tw-text-opacity));
+}
+.ndl-tabs .tab.underline.disabled{
+  --tw-text-opacity: 1;
+  color: rgb(178 183 189 / var(--tw-text-opacity));
+}
+.ndl-tabs .tab.underline.small {
+        /* We need to have a total of 36px in Height */
+        padding-bottom: 12px;
       }
-.ndl-tabs .tab.underline.large > .tab-underline {
-        bottom: -2px;
+.ndl-tabs .tab.underline.small .tab-underline {
+          height: 2px;
+        }
+.ndl-tabs .tab.underline.large {
+        /* We need to have a total of 46px in Height */
+        padding-bottom: 14px;
       }
+.ndl-tabs .tab.underline.large .tab-underline {
+          height: 4px;
+        }
 .ndl-tabs .tab.underline .tab-underline {
         height: 4px;
         position: absolute;
         left: 0px;
+        bottom: 0px;
         width: 100%;
         border-top-left-radius: 4px;
         border-top-right-radius: 4px;
@@ -955,13 +1010,11 @@ a.ndl-btn{
 }
 .ndl-tabs .tab.underline:hover:not(.disabled):not(.selected) .tab-underline{
   --tw-bg-opacity: 1;
-  background-color: rgb(113 119 128 / var(--tw-bg-opacity));
-  opacity: 0.1;
+  background-color: rgb(230 233 238 / var(--tw-bg-opacity));
 }
 .ndl-tabs .tab.underline:active:not(.disabled):not(.selected) .tab-underline{
   --tw-bg-opacity: 1;
-  background-color: rgb(113 119 128 / var(--tw-bg-opacity));
-  opacity: 0.2;
+  background-color: rgb(230 233 238 / var(--tw-bg-opacity));
 }
 .ndl-tabs .tab.underline.selected:not(.disabled){
   --tw-text-opacity: 1;
@@ -979,6 +1032,12 @@ a.ndl-btn{
   border-radius: 4px;
   padding-top: 0.25rem;
   padding-bottom: 0.25rem;
+  --tw-text-opacity: 1;
+  color: rgb(83 91 102 / var(--tw-text-opacity));
+}
+.ndl-tabs .tab.filled.disabled{
+  --tw-text-opacity: 1;
+  color: rgb(178 183 189 / var(--tw-text-opacity));
 }
 .ndl-tabs .tab.filled:focus-visible {
         outline: none;
@@ -1039,10 +1098,6 @@ a.ndl-btn{
 }
 .ndl-alert.with-description .alert-title{
   margin: 0px;
-  font-size: var(--font-size-h5);
-  font-weight: var(--font-weight-bold);
-  letter-spacing: 0.25px;
-  line-height: 28px;
 }
 .ndl-alert .alert-icon{
   height: 1.5rem;
@@ -1057,7 +1112,7 @@ a.ndl-btn{
   margin-top: 0.5rem;
 }
 .ndl-alert .alert-actions{
-  margin-top: 1.25rem;
+  margin-top: 1rem;
   display: flex;
   -moz-column-gap: 1rem;
        column-gap: 1rem;
@@ -1262,7 +1317,7 @@ a.ndl-btn{
 .ndl-form-item{
   cursor: pointer;
 }
-.ndl-form-item input[type='checkbox'], .ndl-form-item input[type='radio']{
+.ndl-form-item input[type='checkbox'][role='checkbox'], .ndl-form-item input[type='radio']{
   cursor: pointer;
   position: relative;
   height: 1rem;
@@ -1270,59 +1325,84 @@ a.ndl-btn{
   border-width: 1px;
   border-style: solid;
   --tw-border-opacity: 1;
-  border-color: rgb(196 200 205 / var(--tw-border-opacity));
+  border-color: rgb(113 119 128 / var(--tw-border-opacity));
   border-radius: 4px;
   -webkit-appearance: none;
      -moz-appearance: none;
           appearance: none;
 }
-.ndl-form-item input[type='checkbox']:hover:enabled, .ndl-form-item input[type='radio']:hover:enabled{
-  outline-style: solid;
-  outline-width: 10px;
-  outline-offset: 0px;
-  outline-color: rgb(196 200 205 / 0.1);
-}
-.ndl-form-item input[type='checkbox']:focus:enabled, .ndl-form-item input[type='radio']:focus:enabled{
+.ndl-form-item input[type='checkbox'][role='checkbox']:not(:disabled):hover:before, .ndl-form-item input[type='radio']:not(:disabled):hover:before {
+      content: '';
+      position: absolute;
+      width: calc(100% + 22px);
+      height: calc(100% + 22px);
+      border-radius: 100%;
+      top: -11px;
+      left: -11px;
+      z-index: 1;
+      background-color: rgba(113,119,128,0.1);
+    }
+.ndl-form-item input[type='checkbox'][role='checkbox']:active:before, .ndl-form-item input[type='radio']:active:before {
+      content: '';
+      position: absolute;
+      width: calc(100% + 22px);
+      height: calc(100% + 22px);
+      border-radius: 100%;
+      top: -11px;
+      left: -11px;
+      z-index: 1;
+      background-color: rgba(113,119,128,0.2);
+    }
+.ndl-form-item input[type='checkbox'][role='checkbox']:focus-visible, .ndl-form-item input[type='radio']:focus-visible{
   outline-style: solid;
   outline-width: 2px;
   outline-offset: 1px;
-  outline-color: #006FD6;
-}
-.ndl-form-item input[type='checkbox']:active:enabled, .ndl-form-item input[type='radio']:active:enabled{
-  outline-style: solid;
-  outline-width: 10px;
-  outline-offset: 0px;
-  outline-color: rgb(196 200 205 / 0.2);
+  outline-color: #018bff;
 }
-.ndl-form-item input[type='checkbox']:checked, .ndl-form-item input[type='radio']:checked{
+.ndl-form-item input[type='checkbox'][role='checkbox']:checked, .ndl-form-item input[type='radio']:checked{
   --tw-border-opacity: 1;
   border-color: rgb(0 111 214 / var(--tw-border-opacity));
   --tw-bg-opacity: 1;
   background-color: rgb(0 111 214 / var(--tw-bg-opacity));
 }
-.ndl-form-item input[type='checkbox']:checked:hover, .ndl-form-item input[type='radio']:checked:hover{
-  outline-color: rgb(0 111 214 / 0.1);
-}
-.ndl-form-item input[type='checkbox']:checked:active, .ndl-form-item input[type='radio']:checked:active{
-  outline-style: solid;
-  outline-color: rgb(0 111 214 / 0.2);
-}
-.ndl-form-item input[type='checkbox']:disabled, .ndl-form-item input[type='radio']:disabled{
+.ndl-form-item input[type='checkbox'][role='checkbox']:checked:not(:disabled):hover:before, .ndl-form-item input[type='radio']:checked:not(:disabled):hover:before {
+        content: '';
+        position: absolute;
+        width: calc(100% + 22px);
+        height: calc(100% + 22px);
+        border-radius: 100%;
+        top: -11px;
+        left: -11px;
+        z-index: 1;
+        background-color: rgba(1,139,255,0.08);
+      }
+.ndl-form-item input[type='checkbox'][role='checkbox']:checked:active:before, .ndl-form-item input[type='radio']:checked:active:before {
+        content: '';
+        position: absolute;
+        width: calc(100% + 22px);
+        height: calc(100% + 22px);
+        border-radius: 100%;
+        top: -11px;
+        left: -11px;
+        z-index: 1;
+        background-color: rgba(1,139,255,0.12);
+      }
+.ndl-form-item input[type='checkbox'][role='checkbox']:disabled, .ndl-form-item input[type='radio']:disabled{
   cursor: not-allowed;
   --tw-border-opacity: 1;
-  border-color: rgb(230 233 238 / var(--tw-border-opacity));
+  border-color: rgb(178 183 189 / var(--tw-border-opacity));
 }
-.ndl-form-item input[type='checkbox']:disabled:checked, .ndl-form-item input[type='radio']:disabled:checked{
+.ndl-form-item input[type='checkbox'][role='checkbox']:disabled:checked, .ndl-form-item input[type='radio']:disabled:checked{
   --tw-bg-opacity: 1;
-  background-color: rgb(230 233 238 / var(--tw-bg-opacity));
+  background-color: rgb(178 183 189 / var(--tw-bg-opacity));
 }
 /* Checkbox */
 .ndl-form-item input[type='checkbox']::after {
       font-size: 14px;
       width: 100%;
       position: absolute;
-      top: 0;
-      left: 0;
+      top: -0.5px;
+      left: 0.5px;
       color: #fff;
     }
 .ndl-form-item input[type='checkbox']:checked::after {
@@ -1339,20 +1419,25 @@ a.ndl-btn{
       }
 .ndl-form-item input[type='checkbox']:disabled{
   --tw-border-opacity: 1;
-  border-color: rgb(230 233 238 / var(--tw-border-opacity));
-  --tw-bg-opacity: 1;
-  background-color: rgb(230 233 238 / var(--tw-bg-opacity));
+  border-color: rgb(178 183 189 / var(--tw-border-opacity));
 }
 /* Switch */
 .ndl-form-item input[type='checkbox'][role='switch'] {
     --thumb-size: 1rem;
     --track-size: calc(var(--thumb-size) * 2);
-    border-radius: 9999px;;
-    --tw-bg-opacity: 1;
-    background-color: rgb(230 233 238 / var(--tw-bg-opacity));
-    border-style: none;
+    position: relative;
     display: grid;
+    height: 1rem;
+    width: 1rem;
+    cursor: pointer;
+    -webkit-appearance: none;
+       -moz-appearance: none;
+            appearance: none;
     align-items: center;
+    border-radius: 9999px;
+    border-style: none;
+    --tw-bg-opacity: 1;
+    background-color: rgb(178 183 189 / var(--tw-bg-opacity));
 
     grid: [track] 1fr / [track] 1fr;
     padding: 2px;
@@ -1363,18 +1448,34 @@ a.ndl-btn{
     box-sizing: content-box;
     transition: background-color 0.25s ease;
   }
-.ndl-form-item input[type='checkbox'][role='switch']:hover:enabled{
+.ndl-form-item input[type='checkbox'][role='switch']:hover:checked:not(:disabled){
+  outline-style: solid;
+  outline-width: 3px;
+  outline-color: rgba(1,139,255,0.08);
+}
+.ndl-form-item input[type='checkbox'][role='switch']:hover:not(:checked):not(:disabled){
+  outline-style: solid;
+  outline-width: 3px;
+  outline-color: rgba(113,119,128,0.1);
+}
+.ndl-form-item input[type='checkbox'][role='switch']:active:checked{
+  outline-style: solid;
+  outline-width: 3px;
+  outline-color: rgba(1,139,255,0.12);
+}
+.ndl-form-item input[type='checkbox'][role='switch']:active:not(:checked){
+  outline-style: solid;
   outline-width: 3px;
-  outline-offset: 0px;
+  outline-color: rgba(113,119,128,0.2);
 }
-.ndl-form-item input[type='checkbox'][role='switch']:focus:enabled{
+.ndl-form-item input[type='checkbox'][role='switch']:focus-visible:enabled{
   outline-width: 2px;
   outline-offset: 1px;
 }
 .ndl-form-item input[type='checkbox'][role='switch']::before {
       inline-size: var(--thumb-size);
       block-size: var(--thumb-size);
-      border-radius: 9999px;;
+      border-radius: 9999px;
 
       transition: transform 0.25s ease, box-shadow 0.25s ease;
       content: '';
@@ -1382,6 +1483,12 @@ a.ndl-btn{
       transform: translateX(0);
       --tw-bg-opacity: 1;
       background-color: rgb(255 255 255 / var(--tw-bg-opacity));
+      --tw-shadow: 0px 1px 2px 0px rgba(12, 26, 37, 0.18);
+      --tw-shadow-colored: 0px 1px 2px 0px var(--tw-shadow-color);
+      box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+    }
+.ndl-form-item input[type='checkbox'][role='switch']:disabled::before {
+      box-shadow: none;
     }
 .ndl-form-item input[type='checkbox'][role='switch']::after {
       content: '';
@@ -1408,12 +1515,12 @@ a.ndl-btn{
 }
 /* Radio */
 .ndl-form-item input[type='radio']{
-  border-radius: 9999px;;
+  border-radius: 9999px;
 }
 .ndl-form-item input[type='radio']:checked{
   border-width: 2px;
 }
-.ndl-form-item input[type='radio']:checked::before {
+.ndl-form-item input[type='radio']:checked::after {
       content: '';
       border: 2px solid white;
       width: 100%;
@@ -1429,6 +1536,10 @@ a.ndl-btn{
   align-items: center;
   -moz-column-gap: 0.75rem;
        column-gap: 0.75rem;
+  font-size: var(--font-size-body-medium);
+  font-weight: var(--font-weight-normal);
+  letter-spacing: 0.25px;
+  line-height: 20px;
 }
 .ndl-form-item .form-item-label.fluid{
   display: flex;
@@ -1440,7 +1551,7 @@ a.ndl-btn{
 .ndl-form-item.disabled .form-item-label{
   cursor: not-allowed;
   --tw-text-opacity: 1;
-  color: rgb(230 233 238 / var(--tw-text-opacity));
+  color: rgb(178 183 189 / var(--tw-text-opacity));
 }
 /**
  *
@@ -1546,6 +1657,7 @@ a.ndl-btn{
 }
 .ndl-progress-bar-wrapper .details .estimated-time-heading{
   margin-right: 5px;
+  font-weight: 300;
 }
 .ndl-progress-bar-wrapper .details .estimated-time{
   font-weight: 600;
@@ -1628,7 +1740,7 @@ a.ndl-btn{
   padding-top: 0.5rem;
   padding-bottom: 0.5rem;
   --tw-bg-opacity: 1;
-  background-color: rgb(245 247 250 / var(--tw-bg-opacity));
+  background-color: rgb(238 241 246 / var(--tw-bg-opacity));
   font-size: var(--font-size-body-medium);
   font-weight: var(--font-weight-normal);
   letter-spacing: 0.25px;
@@ -1890,16 +2002,16 @@ a.ndl-btn{
 .ndl-view-selector > button{
   cursor: pointer;
   border-radius: 8px;
-  --tw-ring-inset: inset;
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(1 139 255 / var(--tw-ring-opacity));
 }
-.ndl-view-selector > button:focus{
+.ndl-view-selector > button :focus-visible{
   outline: 2px solid transparent;
   outline-offset: 2px;
   --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
   --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
   box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
+  --tw-ring-inset: inset;
+  --tw-ring-opacity: 1;
+  --tw-ring-color: rgb(1 139 255 / var(--tw-ring-opacity));
 }
 .ndl-view-selector > button:hover{
   background-color: rgba(113,119,128,0.1);
@@ -2030,8 +2142,117 @@ a.ndl-btn{
     border-style: solid;
     border-color: rgb(230 233 238 / var(--tw-border-opacity));
     --tw-border-opacity: 1;
-    border-bottom-color: rgb(0 111 214 / var(--tw-border-opacity));
+    border-bottom-color: rgb(1 139 255 / var(--tw-border-opacity));
   }
+/**
+ *
+ *  Copyright (c) "Neo4j"
+ *  Neo4j Sweden AB [http://neo4j.com]
+ *
+ *  This file is part of Neo4j.
+ *
+ *  Neo4j is free software: you can redistribute it and/or modify
+ *  it under the terms of the GNU General Public License as published by
+ *  the Free Software Foundation, either version 3 of the License, or
+ *  (at your option) any later version.
+ *
+ *  This program is distributed in the hope that it will be useful,
+ *  but WITHOUT ANY WARRANTY; without even the implied warranty of
+ *  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ *  GNU General Public License for more details.
+ *
+ *  You should have received a copy of the GNU General Public License
+ *  along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ */
+.ndl-drag-and-drop {
+  /* Border generated as BG image using - https://kovart.github.io/dashed-border-generator/ */
+  background-image: url("data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' fill='none' rx='8' ry='8' stroke='%23C4C8CD' stroke-width='1.5' stroke-dasharray='8' stroke-dashoffset='0' stroke-linecap='square'/%3e%3c/svg%3e");
+  border-radius: 8px;
+  --tw-border-opacity: 1;
+  border-color: rgb(196 200 205 / var(--tw-border-opacity));
+}
+.ndl-drag-and-drop > div{
+  padding-top: 2rem;
+  padding-bottom: 2rem;
+}
+.ndl-drag-and-drop .ndl-drag-and-drop-inner {
+    width: 320px;
+    margin-left: auto;
+    margin-right: auto;
+  }
+.ndl-drag-and-drop svg{
+  margin-left: auto;
+  margin-right: auto;
+}
+.ndl-drag-and-drop.drag-active{
+  --tw-bg-opacity: 1;
+  background-color: rgb(230 248 255 / var(--tw-bg-opacity));
+    
+    /* Border generated as BG image using - https://kovart.github.io/dashed-border-generator/ */
+    background-image: url("data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' fill='none' rx='8' ry='8' stroke='%23018BFF' stroke-width='2' stroke-dasharray='8' stroke-dashoffset='0' stroke-linecap='square'/%3e%3c/svg%3e");
+}
+.ndl-drag-and-drop .ndl-drag-and-drop-header{
+  margin-bottom: 1.5rem;
+  display: flex;
+  flex-direction: column;
+  row-gap: 1.5rem;
+  text-align: center;
+}
+.ndl-drag-and-drop .ndl-drag-and-drop-header .dnd-title{
+  margin-bottom: 0.25rem;
+}
+.ndl-drag-and-drop .ndl-drag-and-drop-header .dnd-subtitle{
+  font-weight: 400;
+}
+.ndl-drag-and-drop .ndl-drag-and-drop-header .dnd-browse-link{
+  --tw-text-opacity: 1;
+  color: rgb(0 86 179 / var(--tw-text-opacity));
+  font-size: var(--font-size-subheading-small);
+  font-weight: var(--font-weight-semibold);
+  letter-spacing: 0.25px;
+  line-height: 20px;
+}
+.ndl-drag-and-drop .ndl-drag-and-drop-header .upload-img-wrapper{
+  position: relative;
+  display: inline-block;
+}
+.ndl-drag-and-drop .ndl-drag-and-drop-header .upload-img-label{
+  position: absolute;
+  border-radius: 4px;
+  --tw-bg-opacity: 1;
+  background-color: rgb(1 139 255 / var(--tw-bg-opacity));
+  padding-left: 0.25rem;
+  padding-right: 0.25rem;
+  --tw-text-opacity: 1;
+  color: rgb(255 255 255 / var(--tw-text-opacity));
+  font-size: var(--font-size-body-small);
+  font-weight: var(--font-weight-normal);
+  letter-spacing: 0.25px;
+  line-height: 20px;
+
+      /* @apply -n-translate-x-full; does not seem to work with postcss error */
+      transform: translate(-100%, 0.5rem);
+}
+.ndl-drag-and-drop .ndl-drag-and-drop-footer{
+  text-align: center;
+}
+.ndl-drag-and-drop .ndl-drag-and-drop-footer .ndl-file-support-text{
+  --tw-text-opacity: 1;
+  color: rgb(113 119 128 / var(--tw-text-opacity));
+  font-size: var(--font-size-body-medium);
+  font-weight: var(--font-weight-normal);
+  letter-spacing: 0.25px;
+  line-height: 20px;
+}
+.ndl-drag-and-drop.drag-active.file-invalid{
+  --tw-bg-opacity: 1;
+  background-color: rgb(255 230 233 / var(--tw-bg-opacity));
+    background-image: url("data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' fill='none' rx='8' ry='8' stroke='%23ED1252' stroke-width='2' stroke-dasharray='8' stroke-dashoffset='0' stroke-linecap='square'/%3e%3c/svg%3e");
+}
+.ndl-drag-and-drop.drag-active.file-invalid .upload-img-label{
+  --tw-bg-opacity: 1;
+  background-color: rgb(237 18 82 / var(--tw-bg-opacity));
+}
 .n-m-auto{
   margin: auto;
 }
@@ -2076,12 +2297,12 @@ a.ndl-btn{
 .n-h-4{
   height: 1rem;
 }
-.n-h-10{
-  height: 2.5rem;
-}
 .n-h-6{
   height: 1.5rem;
 }
+.n-h-10{
+  height: 2.5rem;
+}
 .n-h-full{
   height: 100%;
 }
@@ -2097,12 +2318,12 @@ a.ndl-btn{
 .n-w-4{
   width: 1rem;
 }
-.n-w-10{
-  width: 2.5rem;
-}
 .n-w-6{
   width: 1.5rem;
 }
+.n-w-10{
+  width: 2.5rem;
+}
 .n-w-full{
   width: 100%;
 }
@@ -2112,6 +2333,9 @@ a.ndl-btn{
 .n-w-36{
   width: 9rem;
 }
+.n-table-auto{
+  table-layout: auto;
+}
 .n-transform{
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
 }
@@ -2130,19 +2354,25 @@ a.ndl-btn{
 .n-items-center{
   align-items: center;
 }
+.n-justify-center{
+  justify-content: center;
+}
 .n-justify-between{
   justify-content: space-between;
 }
+.n-gap-6{
+  gap: 1.5rem;
+}
 .n-gap-12{
   gap: 3rem;
 }
+.n-gap-y-2{
+  row-gap: 0.5rem;
+}
 .n-gap-x-12{
   -moz-column-gap: 3rem;
        column-gap: 3rem;
 }
-.n-gap-y-2{
-  row-gap: 0.5rem;
-}
 .n-space-y-3 > :not([hidden]) ~ :not([hidden]){
   --tw-space-y-reverse: 0;
   margin-top: calc(0.75rem * calc(1 - var(--tw-space-y-reverse)));
@@ -2168,14 +2398,194 @@ a.ndl-btn{
 .n-rounded-md{
   border-radius: 6px;
 }
-.n-border-neutral-70{
+.n-border-b-2{
+  border-bottom-width: 2px;
+}
+.n-border-b{
+  border-bottom-width: 1px;
+}
+.n-border-light-neutral-text-weakest{
+  --tw-border-opacity: 1;
+  border-color: rgb(178 183 189 / var(--tw-border-opacity));
+}
+.n-border-light-neutral-text-weaker{
   --tw-border-opacity: 1;
   border-color: rgb(113 119 128 / var(--tw-border-opacity));
 }
-.n-border-neutral-60{
+.n-border-light-neutral-text-weak{
+  --tw-border-opacity: 1;
+  border-color: rgb(83 91 102 / var(--tw-border-opacity));
+}
+.n-border-light-neutral-text-default{
+  --tw-border-opacity: 1;
+  border-color: rgb(21 30 41 / var(--tw-border-opacity));
+}
+.n-border-light-neutral-text-inverse{
+  --tw-border-opacity: 1;
+  border-color: rgb(255 255 255 / var(--tw-border-opacity));
+}
+.n-border-light-neutral-bg-weak{
+  --tw-border-opacity: 1;
+  border-color: rgb(255 255 255 / var(--tw-border-opacity));
+}
+.n-border-light-neutral-bg-default{
+  --tw-border-opacity: 1;
+  border-color: rgb(245 247 250 / var(--tw-border-opacity));
+}
+.n-border-light-neutral-bg-strong{
+  --tw-border-opacity: 1;
+  border-color: rgb(230 233 238 / var(--tw-border-opacity));
+}
+.n-border-light-neutral-bg-strongest{
+  --tw-border-opacity: 1;
+  border-color: rgb(83 91 102 / var(--tw-border-opacity));
+}
+.n-border-light-neutral-border-weak{
+  --tw-border-opacity: 1;
+  border-color: rgb(238 241 246 / var(--tw-border-opacity));
+}
+.n-border-light-neutral-border-strong{
   --tw-border-opacity: 1;
   border-color: rgb(178 183 189 / var(--tw-border-opacity));
 }
+.n-border-light-neutral-hover{
+  border-color: rgba(113,119,128,0.1);
+}
+.n-border-light-neutral-pressed{
+  border-color: rgba(113,119,128,0.2);
+}
+.n-border-light-primary-text{
+  --tw-border-opacity: 1;
+  border-color: rgb(0 111 214 / var(--tw-border-opacity));
+}
+.n-border-light-primary-icon{
+  --tw-border-opacity: 1;
+  border-color: rgb(0 111 214 / var(--tw-border-opacity));
+}
+.n-border-light-primary-bg-strong{
+  --tw-border-opacity: 1;
+  border-color: rgb(0 111 214 / var(--tw-border-opacity));
+}
+.n-border-light-primary-bg-weak{
+  --tw-border-opacity: 1;
+  border-color: rgb(230 248 255 / var(--tw-border-opacity));
+}
+.n-border-light-primary-border-strong{
+  --tw-border-opacity: 1;
+  border-color: rgb(0 111 214 / var(--tw-border-opacity));
+}
+.n-border-light-primary-border-weak{
+  --tw-border-opacity: 1;
+  border-color: rgb(122 209 255 / var(--tw-border-opacity));
+}
+.n-border-light-primary-focus{
+  --tw-border-opacity: 1;
+  border-color: rgb(1 139 255 / var(--tw-border-opacity));
+}
+.n-border-light-primary-hover-weak{
+  border-color: rgba(1,139,255,0.08);
+}
+.n-border-light-primary-hover-strong{
+  --tw-border-opacity: 1;
+  border-color: rgb(0 86 179 / var(--tw-border-opacity));
+}
+.n-border-light-primary-pressed-weak{
+  border-color: rgba(1,139,255,0.12);
+}
+.n-border-light-primary-pressed-strong{
+  --tw-border-opacity: 1;
+  border-color: rgb(0 64 146 / var(--tw-border-opacity));
+}
+.n-border-light-danger-text{
+  --tw-border-opacity: 1;
+  border-color: rgb(204 37 75 / var(--tw-border-opacity));
+}
+.n-border-light-danger-icon{
+  --tw-border-opacity: 1;
+  border-color: rgb(204 37 75 / var(--tw-border-opacity));
+}
+.n-border-light-danger-bg-strong{
+  --tw-border-opacity: 1;
+  border-color: rgb(204 37 75 / var(--tw-border-opacity));
+}
+.n-border-light-danger-bg-weak{
+  --tw-border-opacity: 1;
+  border-color: rgb(255 230 233 / var(--tw-border-opacity));
+}
+.n-border-light-danger-border-strong{
+  --tw-border-opacity: 1;
+  border-color: rgb(204 37 75 / var(--tw-border-opacity));
+}
+.n-border-light-danger-border-weak{
+  --tw-border-opacity: 1;
+  border-color: rgb(255 184 196 / var(--tw-border-opacity));
+}
+.n-border-light-danger-hover-weak{
+  border-color: rgba(237,18,82,0.08);
+}
+.n-border-light-danger-hover-strong{
+  --tw-border-opacity: 1;
+  border-color: rgb(161 0 59 / var(--tw-border-opacity));
+}
+.n-border-light-danger-pressed-weak{
+  border-color: rgba(237,18,82,0.12);
+}
+.n-border-light-danger-pressed-strong{
+  --tw-border-opacity: 1;
+  border-color: rgb(122 0 49 / var(--tw-border-opacity));
+}
+.n-border-light-warning-text{
+  --tw-border-opacity: 1;
+  border-color: rgb(150 108 46 / var(--tw-border-opacity));
+}
+.n-border-light-warning-icon{
+  --tw-border-opacity: 1;
+  border-color: rgb(150 108 46 / var(--tw-border-opacity));
+}
+.n-border-light-warning-bg-strong{
+  --tw-border-opacity: 1;
+  border-color: rgb(150 108 46 / var(--tw-border-opacity));
+}
+.n-border-light-warning-bg-weak{
+  --tw-border-opacity: 1;
+  border-color: rgb(255 251 222 / var(--tw-border-opacity));
+}
+.n-border-light-warning-border-strong{
+  --tw-border-opacity: 1;
+  border-color: rgb(150 108 46 / var(--tw-border-opacity));
+}
+.n-border-light-warning-border-weak{
+  --tw-border-opacity: 1;
+  border-color: rgb(255 234 140 / var(--tw-border-opacity));
+}
+.n-border-light-success-text{
+  --tw-border-opacity: 1;
+  border-color: rgb(50 125 96 / var(--tw-border-opacity));
+}
+.n-border-light-success-icon{
+  --tw-border-opacity: 1;
+  border-color: rgb(50 125 96 / var(--tw-border-opacity));
+}
+.n-border-light-success-bg-strong{
+  --tw-border-opacity: 1;
+  border-color: rgb(50 125 96 / var(--tw-border-opacity));
+}
+.n-border-light-success-bg-weak{
+  --tw-border-opacity: 1;
+  border-color: rgb(225 250 239 / var(--tw-border-opacity));
+}
+.n-border-light-success-border-strong{
+  --tw-border-opacity: 1;
+  border-color: rgb(50 125 96 / var(--tw-border-opacity));
+}
+.n-border-light-success-border-weak{
+  --tw-border-opacity: 1;
+  border-color: rgb(152 237 203 / var(--tw-border-opacity));
+}
+.n-border-neutral-70{
+  --tw-border-opacity: 1;
+  border-color: rgb(113 119 128 / var(--tw-border-opacity));
+}
 .n-border-b-neutral-40{
   --tw-border-opacity: 1;
   border-bottom-color: rgb(230 233 238 / var(--tw-border-opacity));
@@ -2571,6 +2981,10 @@ a.ndl-btn{
 .n-p-14{
   padding: 3.5rem;
 }
+.n-py-1{
+  padding-top: 0.25rem;
+  padding-bottom: 0.25rem;
+}
 .n-px-3{
   padding-left: 0.75rem;
   padding-right: 0.75rem;
@@ -2583,6 +2997,9 @@ a.ndl-btn{
   padding-left: 2.5rem;
   padding-right: 2.5rem;
 }
+.n-text-left{
+  text-align: left;
+}
 .n-font-sans{
   font-family: "Nunito Sans";
 }
@@ -2590,6 +3007,9 @@ a.ndl-btn{
   font-size: 0.75rem;
   line-height: 1rem;
 }
+.n-font-light{
+  font-weight: 300;
+}
 .n-font-semibold{
   font-weight: 600;
 }
@@ -3004,11 +3424,13 @@ a.ndl-btn{
 .n-ease-in-out{
   transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
 }
-.\[http\:\/\/neo4j\.com\]{
-  http: //neo4j.com;
-}
-body, html {
+body,
+html {
   font-family: 'Nunito Sans', sans-serif;
+  /* Ensure all the products will have antialiasing when using Needle */
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  text-rendering: optimizeLegibility;
 }
 .first\:n-rounded-t-sm:first-child{
   border-top-left-radius: 4px;
@@ -3022,6 +3444,184 @@ body, html {
   --tw-rotate: 12deg;
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
 }
+.hover\:n-border-light-neutral-text-weakest:hover{
+  --tw-border-opacity: 1;
+  border-color: rgb(178 183 189 / var(--tw-border-opacity));
+}
+.hover\:n-border-light-neutral-text-weaker:hover{
+  --tw-border-opacity: 1;
+  border-color: rgb(113 119 128 / var(--tw-border-opacity));
+}
+.hover\:n-border-light-neutral-text-weak:hover{
+  --tw-border-opacity: 1;
+  border-color: rgb(83 91 102 / var(--tw-border-opacity));
+}
+.hover\:n-border-light-neutral-text-default:hover{
+  --tw-border-opacity: 1;
+  border-color: rgb(21 30 41 / var(--tw-border-opacity));
+}
+.hover\:n-border-light-neutral-text-inverse:hover{
+  --tw-border-opacity: 1;
+  border-color: rgb(255 255 255 / var(--tw-border-opacity));
+}
+.hover\:n-border-light-neutral-bg-weak:hover{
+  --tw-border-opacity: 1;
+  border-color: rgb(255 255 255 / var(--tw-border-opacity));
+}
+.hover\:n-border-light-neutral-bg-default:hover{
+  --tw-border-opacity: 1;
+  border-color: rgb(245 247 250 / var(--tw-border-opacity));
+}
+.hover\:n-border-light-neutral-bg-strong:hover{
+  --tw-border-opacity: 1;
+  border-color: rgb(230 233 238 / var(--tw-border-opacity));
+}
+.hover\:n-border-light-neutral-bg-strongest:hover{
+  --tw-border-opacity: 1;
+  border-color: rgb(83 91 102 / var(--tw-border-opacity));
+}
+.hover\:n-border-light-neutral-border-weak:hover{
+  --tw-border-opacity: 1;
+  border-color: rgb(238 241 246 / var(--tw-border-opacity));
+}
+.hover\:n-border-light-neutral-border-strong:hover{
+  --tw-border-opacity: 1;
+  border-color: rgb(178 183 189 / var(--tw-border-opacity));
+}
+.hover\:n-border-light-neutral-hover:hover{
+  border-color: rgba(113,119,128,0.1);
+}
+.hover\:n-border-light-neutral-pressed:hover{
+  border-color: rgba(113,119,128,0.2);
+}
+.hover\:n-border-light-primary-text:hover{
+  --tw-border-opacity: 1;
+  border-color: rgb(0 111 214 / var(--tw-border-opacity));
+}
+.hover\:n-border-light-primary-icon:hover{
+  --tw-border-opacity: 1;
+  border-color: rgb(0 111 214 / var(--tw-border-opacity));
+}
+.hover\:n-border-light-primary-bg-strong:hover{
+  --tw-border-opacity: 1;
+  border-color: rgb(0 111 214 / var(--tw-border-opacity));
+}
+.hover\:n-border-light-primary-bg-weak:hover{
+  --tw-border-opacity: 1;
+  border-color: rgb(230 248 255 / var(--tw-border-opacity));
+}
+.hover\:n-border-light-primary-border-strong:hover{
+  --tw-border-opacity: 1;
+  border-color: rgb(0 111 214 / var(--tw-border-opacity));
+}
+.hover\:n-border-light-primary-border-weak:hover{
+  --tw-border-opacity: 1;
+  border-color: rgb(122 209 255 / var(--tw-border-opacity));
+}
+.hover\:n-border-light-primary-focus:hover{
+  --tw-border-opacity: 1;
+  border-color: rgb(1 139 255 / var(--tw-border-opacity));
+}
+.hover\:n-border-light-primary-hover-weak:hover{
+  border-color: rgba(1,139,255,0.08);
+}
+.hover\:n-border-light-primary-hover-strong:hover{
+  --tw-border-opacity: 1;
+  border-color: rgb(0 86 179 / var(--tw-border-opacity));
+}
+.hover\:n-border-light-primary-pressed-weak:hover{
+  border-color: rgba(1,139,255,0.12);
+}
+.hover\:n-border-light-primary-pressed-strong:hover{
+  --tw-border-opacity: 1;
+  border-color: rgb(0 64 146 / var(--tw-border-opacity));
+}
+.hover\:n-border-light-danger-text:hover{
+  --tw-border-opacity: 1;
+  border-color: rgb(204 37 75 / var(--tw-border-opacity));
+}
+.hover\:n-border-light-danger-icon:hover{
+  --tw-border-opacity: 1;
+  border-color: rgb(204 37 75 / var(--tw-border-opacity));
+}
+.hover\:n-border-light-danger-bg-strong:hover{
+  --tw-border-opacity: 1;
+  border-color: rgb(204 37 75 / var(--tw-border-opacity));
+}
+.hover\:n-border-light-danger-bg-weak:hover{
+  --tw-border-opacity: 1;
+  border-color: rgb(255 230 233 / var(--tw-border-opacity));
+}
+.hover\:n-border-light-danger-border-strong:hover{
+  --tw-border-opacity: 1;
+  border-color: rgb(204 37 75 / var(--tw-border-opacity));
+}
+.hover\:n-border-light-danger-border-weak:hover{
+  --tw-border-opacity: 1;
+  border-color: rgb(255 184 196 / var(--tw-border-opacity));
+}
+.hover\:n-border-light-danger-hover-weak:hover{
+  border-color: rgba(237,18,82,0.08);
+}
+.hover\:n-border-light-danger-hover-strong:hover{
+  --tw-border-opacity: 1;
+  border-color: rgb(161 0 59 / var(--tw-border-opacity));
+}
+.hover\:n-border-light-danger-pressed-weak:hover{
+  border-color: rgba(237,18,82,0.12);
+}
+.hover\:n-border-light-danger-pressed-strong:hover{
+  --tw-border-opacity: 1;
+  border-color: rgb(122 0 49 / var(--tw-border-opacity));
+}
+.hover\:n-border-light-warning-text:hover{
+  --tw-border-opacity: 1;
+  border-color: rgb(150 108 46 / var(--tw-border-opacity));
+}
+.hover\:n-border-light-warning-icon:hover{
+  --tw-border-opacity: 1;
+  border-color: rgb(150 108 46 / var(--tw-border-opacity));
+}
+.hover\:n-border-light-warning-bg-strong:hover{
+  --tw-border-opacity: 1;
+  border-color: rgb(150 108 46 / var(--tw-border-opacity));
+}
+.hover\:n-border-light-warning-bg-weak:hover{
+  --tw-border-opacity: 1;
+  border-color: rgb(255 251 222 / var(--tw-border-opacity));
+}
+.hover\:n-border-light-warning-border-strong:hover{
+  --tw-border-opacity: 1;
+  border-color: rgb(150 108 46 / var(--tw-border-opacity));
+}
+.hover\:n-border-light-warning-border-weak:hover{
+  --tw-border-opacity: 1;
+  border-color: rgb(255 234 140 / var(--tw-border-opacity));
+}
+.hover\:n-border-light-success-text:hover{
+  --tw-border-opacity: 1;
+  border-color: rgb(50 125 96 / var(--tw-border-opacity));
+}
+.hover\:n-border-light-success-icon:hover{
+  --tw-border-opacity: 1;
+  border-color: rgb(50 125 96 / var(--tw-border-opacity));
+}
+.hover\:n-border-light-success-bg-strong:hover{
+  --tw-border-opacity: 1;
+  border-color: rgb(50 125 96 / var(--tw-border-opacity));
+}
+.hover\:n-border-light-success-bg-weak:hover{
+  --tw-border-opacity: 1;
+  border-color: rgb(225 250 239 / var(--tw-border-opacity));
+}
+.hover\:n-border-light-success-border-strong:hover{
+  --tw-border-opacity: 1;
+  border-color: rgb(50 125 96 / var(--tw-border-opacity));
+}
+.hover\:n-border-light-success-border-weak:hover{
+  --tw-border-opacity: 1;
+  border-color: rgb(152 237 203 / var(--tw-border-opacity));
+}
 .hover\:n-bg-primary-10:hover{
   --tw-bg-opacity: 1;
   background-color: rgb(230 248 255 / var(--tw-bg-opacity));
@@ -3798,3 +4398,9 @@ body, html {
     margin-left: calc(1rem * calc(1 - var(--tw-space-x-reverse)));
   }
 }
+@media (min-width: 768px){
+  .md\:n-bg-primary-50{
+    --tw-bg-opacity: 1;
+    background-color: rgb(0 111 214 / var(--tw-bg-opacity));
+  }
+}