@neo4j-ndl/base 1.0.2 → 1.1.0

package/lib/neo4j-ds-styles.css

@@ -459,7 +459,7 @@ video {
  */
 /**
  * Do not edit directly
- * Generated on Tue, 14 Mar 2023 15:52:14 GMT
+ * Generated on Mon, 03 Apr 2023 15:46:06 GMT
  */
 :root {
   --transitions-values-properties-default: all;
@@ -535,25 +535,52 @@ video {
   --colors-neutral-70: 113, 119, 128 /* #717780 */;
   --colors-neutral-80: 83, 91, 102 /* #535B66 */;
   --colors-neutral-90: 21, 30, 41 /* #151E29 */;
-  --font-size-h1: 3rem;
-  --font-size-h2: 2.5rem;
-  --font-size-h3: 1.875rem;
-  --font-size-h4: 1.5rem;
-  --font-size-h5: 1.25rem;
-  --font-size-h6: 1rem;
-  --font-size-subheading-large: 1.25rem;
-  --font-size-subheading-medium: 1rem;
-  --font-size-subheading-small: 0.875rem;
-  --font-size-body-large: 1rem;
-  --font-size-body-medium: 0.875rem;
-  --font-size-body-small: 0.75rem;
-  --font-size-code: 0.875rem;
-  --font-size-label: 0.875rem;
-  --font-weight-bold: 700;
-  --font-weight-semibold: 600;
-  --font-weight-normal: 400;
-  --font-weight-medium: 500;
-  --font-weight-light: 300;
+  --palette-dark-neutral-text-weakest: 113, 119, 128 /* #717780 */;
+  --palette-dark-neutral-text-weaker: 178, 183, 189 /* #B2B7BD */;
+  --palette-dark-neutral-text-weak: 196, 200, 205 /* #C4C8CD */;
+  --palette-dark-neutral-text-default: 245, 247, 250 /* #F5F7FA */;
+  --palette-dark-neutral-text-inverse: 21, 30, 41 /* #151E29 */;
+  --palette-dark-neutral-bg-weak: 29, 38, 49; /* This is a beta version of the dark palette design tokens. Will be officially supported in Needle v2 */
+  --palette-dark-neutral-bg-default: 21, 30, 41 /* #151E29 */;
+  --palette-dark-neutral-bg-strong: 45, 53, 63; /* This is a beta version of the dark palette design tokens. Will be officially supported in Needle v2 */
+  --palette-dark-neutral-bg-strongest: 255, 255, 255 /* #FFFFFF */;
+  --palette-dark-neutral-border-weak: 37, 47, 59; /* This is a beta version of the dark palette design tokens. Will be officially supported in Needle v2 */
+  --palette-dark-neutral-border-strong: 113, 119, 128 /* #717780 */;
+  --palette-dark-neutral-hover: rgba(196, 200, 205,0.1);
+  --palette-dark-neutral-pressed: rgba(196, 200, 205,0.2);
+  --palette-dark-primary-text: 163, 226, 255 /* #a3e2ff */;
+  --palette-dark-primary-icon: 163, 226, 255 /* #a3e2ff */;
+  --palette-dark-primary-bg-strong: 163, 226, 255 /* #a3e2ff */;
+  --palette-dark-primary-bg-weak: 49, 69, 84; /* This is a beta version of the dark palette design tokens. Will be officially supported in Needle v2 */
+  --palette-dark-primary-border-strong: 163, 226, 255 /* #a3e2ff */;
+  --palette-dark-primary-border-weak: 78, 108, 126; /* This is a beta version of the dark palette design tokens. Will be officially supported in Needle v2 */
+  --palette-dark-primary-focus: 122, 209, 255 /* #7ad1ff */;
+  --palette-dark-primary-hover-weak: rgba(122, 209, 255,0.08);
+  --palette-dark-primary-hover-strong: 122, 209, 255 /* #7ad1ff */;
+  --palette-dark-primary-pressed-weak: rgba(122, 209, 255,0.12);
+  --palette-dark-primary-pressed-strong: 122, 209, 255 /* #7ad1ff */;
+  --palette-dark-danger-text: 255, 184, 196 /* #ffb8c4 */;
+  --palette-dark-danger-icon: 255, 184, 196 /* #ffb8c4 */;
+  --palette-dark-danger-bg-strong: 255, 184, 196 /* #ffb8c4 */;
+  --palette-dark-danger-bg-weak: 68, 61, 72; /* This is a beta version of the dark palette design tokens. Will be officially supported in Needle v2 */
+  --palette-dark-danger-border-strong: 255, 184, 196 /* #ffb8c4 */;
+  --palette-dark-danger-border-weak: 114, 91, 103; /* This is a beta version of the dark palette design tokens. Will be officially supported in Needle v2 */
+  --palette-dark-danger-hover-weak: rgba(255, 102, 138,0.08);
+  --palette-dark-danger-hover-strong: 255, 102, 138 /* #ff668a */;
+  --palette-dark-danger-pressed-weak: rgba(255, 102, 138,0.12);
+  --palette-dark-danger-pressed-strong: 255, 102, 138 /* #ff668a */;
+  --palette-dark-warning-text: 255, 234, 140 /* #FFEA8C */;
+  --palette-dark-warning-icon: 255, 234, 140 /* #FFEA8C */;
+  --palette-dark-warning-bg-strong: 255, 234, 140 /* #FFEA8C */;
+  --palette-dark-warning-bg-weak: 68, 71, 60; /* This is a beta version of the dark palette design tokens. Will be officially supported in Needle v2 */
+  --palette-dark-warning-border-strong: 255, 234, 140 /* #FFEA8C */;
+  --palette-dark-warning-border-weak: 114, 111, 80; /* This is a beta version of the dark palette design tokens. Will be officially supported in Needle v2 */
+  --palette-dark-success-text: 152, 237, 203 /* #98EDCB */;
+  --palette-dark-success-icon: 152, 237, 203 /* #98EDCB */;
+  --palette-dark-success-bg-strong: 152, 237, 203 /* #98EDCB */;
+  --palette-dark-success-bg-weak: 47, 71, 73;
+  --palette-dark-success-border-strong: 152, 237, 203 /* #98EDCB */;
+  --palette-dark-success-border-weak: 73, 113, 106; /* This is a beta version of the dark palette design tokens. Will be officially supported in Needle v2 */
   --palette-light-neutral-text-weakest: 178, 183, 189 /* #B2B7BD */;
   --palette-light-neutral-text-weaker: 113, 119, 128 /* #717780 */;
   --palette-light-neutral-text-weak: 83, 91, 102 /* #535B66 */;
@@ -600,6 +627,25 @@ video {
   --palette-light-success-bg-weak: 225, 250, 239 /* #E1FAEF */;
   --palette-light-success-border-strong: 50, 125, 96 /* #327D60 */;
   --palette-light-success-border-weak: 152, 237, 203 /* #98EDCB */;
+  --font-size-h1: 3rem;
+  --font-size-h2: 2.5rem;
+  --font-size-h3: 1.875rem;
+  --font-size-h4: 1.5rem;
+  --font-size-h5: 1.25rem;
+  --font-size-h6: 1rem;
+  --font-size-subheading-large: 1.25rem;
+  --font-size-subheading-medium: 1rem;
+  --font-size-subheading-small: 0.875rem;
+  --font-size-body-large: 1rem;
+  --font-size-body-medium: 0.875rem;
+  --font-size-body-small: 0.75rem;
+  --font-size-code: 0.875rem;
+  --font-size-label: 0.875rem;
+  --font-weight-bold: 700;
+  --font-weight-semibold: 600;
+  --font-weight-normal: 400;
+  --font-weight-medium: 500;
+  --font-weight-light: 300;
   --box-shadow-l2: 0px 1px 2px 0px rgba(12, 26, 37, 0.18);
   --box-shadow-l3: 0px 4px 8px 0px rgba(12, 26, 37, 0.04);
   --box-shadow-l4: 0px 4px 8px 0px rgba(12, 26, 37, 0.08);
@@ -2845,8 +2891,9 @@ a.ndl-btn{
     }
 /* Table body */
 .ndl-table-root .ndl-div-table .ndl-table-tbody {
+      position: relative;
       background-color: rgb(var(--palette-light-neutral-bg-weak));
-      overflow-y: scroll;
+      overflow-y: auto;
     }
 /* Table body - Single row, multiple columns */
 .ndl-table-root .ndl-div-table .ndl-table-tbody .ndl-table-tr:not(:last-child):after {
@@ -3897,16 +3944,16 @@ a.ndl-btn{
   pointer-events: none;
   opacity: 0.5;
 }
-.ndl-code-block-container .ndl-highlight-wrapper{
-  position: relative;
-}
-.ndl-code-block-container .ndl-highlight-wrapper.ndl-focused{
-  overflow-y: auto;
+.ndl-code-block-container .ndl-code-content-container{
+  display: flex;
+  flex-shrink: 0;
+  flex-grow: 1;
+    width: calc(100% - 4px);
 }
-.ndl-code-block-container .ndl-highlight-wrapper:not(.ndl-focused){
-  overflow-y: hidden;
+.ndl-code-block-container .ndl-code-content-container.ndl-disabled{
+  opacity: 0.5;
 }
-.ndl-code-block-container .ndl-highlight-wrapper:after{
+.ndl-code-block-container .ndl-code-content-container:after{
   position: absolute;
   top: 0px;
   right: 4px;
@@ -3921,6 +3968,21 @@ a.ndl-btn{
   --tw-content: "";
   content: var(--tw-content);
 }
+/* Pseudo element on the left and right to steal the editor focus when clicking outside */
+.ndl-code-block-container .ndl-code-content-container .ndl-code-pseudo-element{
+  height: 100%;
+  width: 1px;
+}
+.ndl-code-block-container .ndl-code-content-container .ndl-highlight-wrapper{
+  position: relative;
+  width: 100%;
+}
+.ndl-code-block-container .ndl-code-content-container .ndl-highlight-wrapper.ndl-focused{
+  overflow-y: auto;
+}
+.ndl-code-block-container .ndl-code-content-container .ndl-highlight-wrapper:not(.ndl-focused){
+  overflow-y: hidden;
+}
 /* Component's header icons */
 .ndl-code-block-container .ndl-code-block-actions{
   position: absolute;
@@ -3949,6 +4011,448 @@ a.ndl-btn{
 .ndl-code-block-container .ndl-linenumber {
     min-width: 32px !important;
   }
+/* Pseudo element on the top to steal the editor focus when clicking outside */
+.ndl-code-block-container::before {
+  display: block;
+  height: 1px;
+  content: '';
+}
+/* Pseudo element on the bottom to steal the editor focus when clicking outside */
+.ndl-code-block-container::after {
+  display: block;
+  height: 1px;
+  content: '';
+}
+/**
+ *
+ *  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/>.
+ */
+/*
+/* Needle Overrides */
+/*
+   ############
+    Generic Styles
+   ############
+ */
+.cm-editor .cm-lineNumbers .cm-gutterElement {
+  font-family: 'Fira Code';
+  padding: 0 5px 0 5px;
+}
+.cm-editor .cm-gutter {
+  width: 100%;
+}
+.cm-editor .cm-content .cm-line {
+  line-height: 1.4375;
+  font-family: 'Fira Code';
+}
+.cm-editor .cm-scroller .cm-content,
+.cm-editor .cm-content {
+  padding: 0;
+}
+.cm-editor .cm-gutters {
+  border: none;
+  padding-left: 5px;
+  padding-right: 3px;
+}
+/* Theme Variables */
+.cm-light {
+  --background: var(--palette-light-neutral-bg-weak);
+  --color: var(--palette-light-neutral-text-default);
+  --cursor-color: var(--colors-neutral-70);
+  --selection-bg: var(--colors-neutral-40);
+  --comment: var(--colors-neutral-60);
+  --function: var(--colors-primary-50);
+  --keyword: var(--colors-success-50);
+  --relationship: var(--colors-success-50);
+  --string: var(--colors-warning-60);
+  --number: var(--colors-blueberry-50);
+  --variable: var(--colors-blueberry-50);
+  --button: var(--colors-primary-40);
+  --procedure: var(--colors-primary-50);
+  --ac-li-border: var(--colors-neutral-50);
+  --ac-li-selected: var(--colors-primary-50);
+  --ac-li-text: var(--colors-neutral-90);
+  --ac-li-hover: var(--palette-light-neutral-bg-default);
+  --ac-li-text-selected: var(--colors-neutral-10);
+  --ac-tooltip-border: var(--colors-neutral-50);
+  --ac-tooltip-background: var(--palette-light-neutral-bg-weak);
+}
+.cm-dark {
+  --background: var(--colors-neutral-90);
+  --color: var(--colors-neutral-50);
+  --cursor-color: var(--colors-neutral-50);
+  --selection-bg: var(--colors-neutral-80);
+  --comment: var(--colors-neutral-40);
+  --function: var(--colors-primary-30);
+  --keyword: var(--colors-success-30);
+  --relationship: var(--colors-success-20);
+  --string: var(--colors-warning-30);
+  --number: var(--colors-blueberry-40);
+  --variable: var(--colors-blueberry-30);
+  --button: var(--colors-primary-30);
+  --procedure: var(--colors-primary-30);
+  --ac-li-border: var(--colors-neutral-50);
+  --ac-li-selected: var(--colors-primary-30);
+  --ac-li-text: var(--colors-neutral-10);
+  --ac-li-hover: var(--colors-neutral-80);
+  --ac-li-text-selected: var(--colors-neutral-90);
+  --ac-tooltip-border: var(--colors-neutral-80);
+  /* TODO: This will be added to the dark theme palette soon */
+  --ac-tooltip-background: 45, 53, 63;
+}
+.ndl-cypher-code-block .cm-light {
+  --background: var(--colors-neutral-20);
+}
+/** Cursor Colors */
+.cm-editor {
+  background-color: rgb(var(--background));
+  color: rgb(var(--color));
+}
+.cm-editor .cm-cursor {
+    z-index: 1;
+    border-left: 0.67em solid rgba(var(--cursor-color), 0.35);
+  }
+/** Selection Background */
+.cm-editor.cm-focused .cm-selectionBackground,
+  .cm-editor .cm-selectionBackground {
+    background: rgb(var(--selection-bg));
+  }
+.cm-editor .cm-comment {
+    color: rgb(var(--comment));
+  }
+.cm-editor .cm-string {
+    color: rgb(var(--string));
+  }
+.cm-editor .cm-gutters {
+    background-color: rgb(var(--background));
+  }
+.cm-editor .cm-number {
+    color: rgb(var(--number));
+  }
+.cm-editor .cm-variable {
+    color: rgb(var(--variable));
+  }
+.cm-editor .cm-keyword {
+    color: rgb(var(--keyword));
+  }
+.cm-editor .cm-p-relationshipType .cm-variable,
+    .cm-editor .cm-p-relationshipType .cm-operator {
+      color: rgb(var(--relationship));
+    }
+.cm-editor .cm-p-procedure,
+  .cm-editor .cm-p-procedure .cm-keyword,
+  .cm-editor .cm-p-procedure .cm-variable,
+  .cm-editor .cm-p-procedure .cm-operator {
+    color: rgb(var(--procedure));
+  }
+.cm-editor .cm-p-variable,
+  .cm-editor .cm-p-variable .cm-keyword {
+    color: rgb(var(--variable));
+  }
+.cm-editor .cm-p-procedureOutput > :is(.cm-keyword, .cm-variable) {
+    color: rgb(var(--variable));
+  }
+.cm-editor .cm-p-property > :is(.cm-keyword, .cm-variable) {
+    color: rgb(var(--variable));
+  }
+.cm-editor .cm-p-function > :is(.cm-keyword, .cm-variable) {
+    color: rgb(var(--function));
+  }
+/* Search Controls */
+.cm-editor .cm-button {
+    background-color: rgb(var(--button));
+    background-image: none;
+    color: white;
+    border: none;
+  transition: background-color var(--transitions-stripped);
+  display: inline-flex;
+  cursor: pointer;
+  align-items: center;
+  justify-content: center;
+  gap: 0.125rem;
+  border-radius: 4px;
+  font-weight: 700;
+  outline: 2px solid transparent;
+  outline-offset: 2px;
+  --tw-ring-opacity: 1;
+  --tw-ring-color: rgb(1 139 255 / var(--tw-ring-opacity));
+  }
+.cm-editor .cm-button:focus-visible{
+  --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-offset-width: 2px;
+}
+.cm-editor .cm-button.ndl-loading{
+  cursor: default;
+  vertical-align: middle;
+  opacity: 0.5;
+}
+.cm-editor .cm-button.ndl-small{
+  height: 1.75rem;
+  padding-left: 0.75rem;
+  padding-right: 0.75rem;
+  padding-top: 0.25rem;
+  padding-bottom: 0.25rem;
+  font-size: var(--font-size-label);
+  font-weight: var(--font-weight-bold);
+  letter-spacing: 0;
+  line-height: 1.25rem;
+}
+.cm-editor .cm-button.ndl-medium{
+  height: 2.25rem;
+  padding-left: 1.5rem;
+  padding-right: 1.5rem;
+  padding-top: 0.5rem;
+  padding-bottom: 0.5rem;
+  font-size: var(--font-size-label);
+  font-weight: var(--font-weight-bold);
+  letter-spacing: 0;
+  line-height: 1.25rem;
+}
+.cm-editor .cm-button.ndl-large{
+  height: 3rem;
+  padding-left: 1.5rem;
+  padding-right: 1.5rem;
+  padding-top: 0.75rem;
+  padding-bottom: 0.75rem;
+}
+
+.cm-editor .cm-button.ndl-large {
+  font-size: var(--font-size-h6);
+  font-weight: var(--font-weight-bold);
+  letter-spacing: 0.016rem;
+  line-height: 1.5rem;
+}
+.cm-editor .cm-button.ndl-filled{
+  border-width: 0px;
+  --tw-text-opacity: 1;
+  color: rgb(255 255 255 / var(--tw-text-opacity));
+}
+.cm-editor .cm-button.ndl-filled.ndl-disabled{
+  cursor: default;
+  --tw-bg-opacity: 1;
+  background-color: rgb(230 233 238 / var(--tw-bg-opacity));
+  --tw-text-opacity: 1;
+  color: rgb(178 183 189 / var(--tw-text-opacity));
+}
+.cm-editor .cm-button.ndl-outlined{
+  border-width: 1px;
+  border-style: solid;
+  --tw-bg-opacity: 1;
+  background-color: rgb(255 255 255 / var(--tw-bg-opacity));
+}
+.cm-editor .cm-button.ndl-outlined.ndl-disabled{
+  cursor: default;
+  --tw-border-opacity: 1;
+  border-color: rgb(178 183 189 / var(--tw-border-opacity));
+  --tw-bg-opacity: 1;
+  background-color: rgb(255 255 255 / var(--tw-bg-opacity));
+  --tw-text-opacity: 1;
+  color: rgb(178 183 189 / var(--tw-text-opacity));
+}
+.cm-editor .cm-button.ndl-text{
+  border-style: none;
+  background-color: transparent;
+}
+.cm-editor .cm-button.ndl-text.ndl-disabled{
+  cursor: default;
+  --tw-text-opacity: 1;
+  color: rgb(178 183 189 / var(--tw-text-opacity));
+}
+.cm-editor .cm-button.ndl-floating-btn:not(.ndl-disabled):not(.ndl-text){
+  --tw-shadow: 0px 4px 8px 0px rgba(12, 26, 37, 0.08);
+  --tw-shadow-colored: 0px 4px 8px 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);
+}
+a.cm-editor .cm-button{
+  text-decoration-line: none;
+}
+.cm-completionLabel {
+  font-family: 'Fira Code';
+  font-weight: bold;
+  vertical-align: middle;
+}
+.cm-editor .cm-completionIcon {
+  vertical-align: middle;
+  width: 18px;
+  padding: 4px 6px 2px 2px;
+}
+.autocomplete-icon-shared {
+  font-family: 'Fira Code';
+  border-radius: 100%;
+  border: 1px solid rgb(var(--ac-li-border));
+  width: 20px;
+  height: 20px;
+  display: block;
+  line-height: 19px;
+  /* If overflow is not defined, it causes a flickering effect in Chrome (bug) */
+  overflow: hidden;
+  /** Share the same with all until we have a fixed set */
+  background-color: rgb(var(--background));
+  color: rgb(var(--keyword));
+}
+.cm-editor .cm-completionIcon-keyword:after {
+  font-family: 'Fira Code';
+  border-radius: 100%;
+  border: 1px solid rgb(var(--ac-li-border));
+  width: 20px;
+  height: 20px;
+  display: block;
+  line-height: 19px;
+  /* If overflow is not defined, it causes a flickering effect in Chrome (bug) */
+  overflow: hidden;
+  /** Share the same with all until we have a fixed set */
+  background-color: rgb(var(--background));
+  color: rgb(var(--keyword));
+    content: 'K';
+}
+.cm-editor .cm-completionIcon-label:after {
+  font-family: 'Fira Code';
+  border-radius: 100%;
+  border: 1px solid rgb(var(--ac-li-border));
+  width: 20px;
+  height: 20px;
+  display: block;
+  line-height: 19px;
+  /* If overflow is not defined, it causes a flickering effect in Chrome (bug) */
+  overflow: hidden;
+  /** Share the same with all until we have a fixed set */
+  background-color: rgb(var(--background));
+  color: rgb(var(--keyword));
+    content: 'L';
+}
+.cm-editor .cm-completionIcon-relationshipType:after {
+  font-family: 'Fira Code';
+  border-radius: 100%;
+  border: 1px solid rgb(var(--ac-li-border));
+  width: 20px;
+  height: 20px;
+  display: block;
+  line-height: 19px;
+  /* If overflow is not defined, it causes a flickering effect in Chrome (bug) */
+  overflow: hidden;
+  /** Share the same with all until we have a fixed set */
+  background-color: rgb(var(--background));
+  color: rgb(var(--keyword));
+    content: 'R';
+}
+.cm-editor .cm-completionIcon-variable:after, 
+  .cm-editor .cm-completionIcon-procedureOutput:after {
+  font-family: 'Fira Code';
+  border-radius: 100%;
+  border: 1px solid rgb(var(--ac-li-border));
+  width: 20px;
+  height: 20px;
+  display: block;
+  line-height: 19px;
+  /* If overflow is not defined, it causes a flickering effect in Chrome (bug) */
+  overflow: hidden;
+  /** Share the same with all until we have a fixed set */
+  background-color: rgb(var(--background));
+  color: rgb(var(--keyword));
+    content: 'V';
+}
+.cm-editor .cm-completionIcon-procedure:after, 
+  .cm-editor .cm-completionIcon-function:after {
+  font-family: 'Fira Code';
+  border-radius: 100%;
+  border: 1px solid rgb(var(--ac-li-border));
+  width: 20px;
+  height: 20px;
+  display: block;
+  line-height: 19px;
+  /* If overflow is not defined, it causes a flickering effect in Chrome (bug) */
+  overflow: hidden;
+  /** Share the same with all until we have a fixed set */
+  background-color: rgb(var(--background));
+  color: rgb(var(--keyword));
+    content: 'λ';
+}
+.cm-editor .cm-completionIcon-function:after {
+  font-family: 'Fira Code';
+  border-radius: 100%;
+  border: 1px solid rgb(var(--ac-li-border));
+  width: 20px;
+  height: 20px;
+  display: block;
+  line-height: 19px;
+  /* If overflow is not defined, it causes a flickering effect in Chrome (bug) */
+  overflow: hidden;
+  /** Share the same with all until we have a fixed set */
+  background-color: rgb(var(--background));
+  color: rgb(var(--keyword));
+    content: '$';
+}
+.cm-editor .cm-completionIcon-propertyKey:after {
+  font-family: 'Fira Code';
+  border-radius: 100%;
+  border: 1px solid rgb(var(--ac-li-border));
+  width: 20px;
+  height: 20px;
+  display: block;
+  line-height: 19px;
+  /* If overflow is not defined, it causes a flickering effect in Chrome (bug) */
+  overflow: hidden;
+  /** Share the same with all until we have a fixed set */
+  background-color: rgb(var(--background));
+  color: rgb(var(--keyword));
+    content: 'P';
+}
+.cm-editor .cm-completionIcon-consoleCommand:after, 
+  .cm-editor .cm-completionIcon-consoleCommandSubcommand:after {
+  font-family: 'Fira Code';
+  border-radius: 100%;
+  border: 1px solid rgb(var(--ac-li-border));
+  width: 20px;
+  height: 20px;
+  display: block;
+  line-height: 19px;
+  /* If overflow is not defined, it causes a flickering effect in Chrome (bug) */
+  overflow: hidden;
+  /** Share the same with all until we have a fixed set */
+  background-color: rgb(var(--background));
+  color: rgb(var(--keyword));
+    content: 'C';
+}
+.cm-tooltip-autocomplete {
+  border-radius: var(--border-radius-sm);
+  border: 1px solid rgb(var(--ac-tooltip-border)) !important;
+  background-color: rgb(var(--ac-tooltip-background)) !important;
+  overflow: hidden;
+  margin-top: 4px;
+  padding: 7px;
+}
+.cm-tooltip-autocomplete li {
+    border-radius: var(--border-radius-sm);
+    color: rgb(var(--ac-li-text)) !important;
+  }
+.cm-tooltip-autocomplete li:hover {
+      background-color: rgb(var(--ac-li-hover));
+    }
+.cm-tooltip-autocomplete li[aria-selected='true'] {
+    background: rgb(var(--ac-li-selected)) !important;
+    color: rgb(var(--ac-li-text-selected)) !important;
+  }
+.cm-tooltip-autocomplete li[aria-selected='true'] > div {
+      opacity: 100%;
+    }
 /**
  *
  *  Copyright (c) "Neo4j"
@@ -4343,6 +4847,9 @@ a.ndl-btn{
 .n-mt-2{
   margin-top: 0.5rem;
 }
+.n-mt-token-8{
+  margin-top: 32px;
+}
 .n-mt-4{
   margin-top: 1rem;
 }
@@ -4504,6 +5011,9 @@ a.ndl-btn{
 .n-gap-4{
   gap: 1rem;
 }
+.n-gap-token-8{
+  gap: 32px;
+}
 .n-gap-1{
   gap: 0.25rem;
 }
@@ -4587,6 +5097,9 @@ a.ndl-btn{
 .n-rounded-5xl{
   border-radius: 20px;
 }
+.n-rounded-1xl{
+  border-radius: 12px;
+}
 .n-rounded-2xl{
   border-radius: 14px;
 }
@@ -11632,6 +12145,9 @@ a.ndl-btn{
 .n-p-2{
   padding: 0.5rem;
 }
+.n-p-token-8{
+  padding: 32px;
+}
 .n-p-14{
   padding: 3.5rem;
 }