@neo4j-ndl/base 1.8.12 → 1.8.14

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # Change Log
 
+## 1.8.14
+
+### Patch Changes
+
+- aec8342: create scoping for codemirror styles
+
+## 1.8.13
+
+### Patch Changes
+
+- b881e85: more accessible help text color for text inputs
+
 ## 1.8.12
 
 ### Patch Changes

package/lib/cjs/tokens/js/storybook-design-token.js

@@ -1,7 +1,7 @@
 "use strict";
 /**
 * Do not edit directly
-* Generated on Mon, 24 Jul 2023 06:51:26 GMT
+* Generated on Tue, 25 Jul 2023 12:39:54 GMT
 */
 exports.__esModule = true;
 exports.tokens = void 0;

package/lib/cjs/tokens/js/tokens-esm.js

@@ -1,7 +1,7 @@
 "use strict";
 /**
 * Do not edit directly
-* Generated on Mon, 24 Jul 2023 06:51:26 GMT
+* Generated on Tue, 25 Jul 2023 12:39:54 GMT
 */
 exports.__esModule = true;
 exports.tokens = void 0;

package/lib/cjs/tokens/js/tokens.js

@@ -1,7 +1,7 @@
 "use strict";
 /**
 * Do not edit directly
-* Generated on Mon, 24 Jul 2023 06:51:26 GMT
+* Generated on Tue, 25 Jul 2023 12:39:54 GMT
 */
 module.exports = {
     "transitions": {

package/lib/esm/tokens/js/storybook-design-token.js

@@ -1,6 +1,6 @@
 /**
 * Do not edit directly
-* Generated on Mon, 24 Jul 2023 06:51:26 GMT
+* Generated on Tue, 25 Jul 2023 12:39:54 GMT
 */
 export const tokens = {
     "transitions": [

package/lib/esm/tokens/js/tokens-esm.js

@@ -1,6 +1,6 @@
 /**
 * Do not edit directly
-* Generated on Mon, 24 Jul 2023 06:51:26 GMT
+* Generated on Tue, 25 Jul 2023 12:39:54 GMT
 */
 export const tokens = {
     "transitions": {

package/lib/esm/tokens/js/tokens.js

@@ -1,7 +1,7 @@
 "use strict";
 /**
 * Do not edit directly
-* Generated on Mon, 24 Jul 2023 06:51:26 GMT
+* Generated on Tue, 25 Jul 2023 12:39:54 GMT
 */
 module.exports = {
     "transitions": {

package/lib/neo4j-ds-styles.css

@@ -459,7 +459,7 @@ video {
  */
 /**
  * Do not edit directly
- * Generated on Mon, 24 Jul 2023 06:51:26 GMT
+ * Generated on Tue, 25 Jul 2023 12:39:54 GMT
  */
 :root {
   --transitions-values-properties-default: all;
@@ -2232,7 +2232,7 @@ a.ndl-btn{
   gap: 0.25rem;
   font-size: 0.75rem;
   line-height: 1rem;
-  color: rgb(var(--palette-neutral-text-weaker));
+  color: rgb(var(--palette-neutral-text-weak));
 }
 .ndl-form-item .ndl-form-msg .ndl-error-text {
       display: inline-block;
@@ -4618,31 +4618,6 @@ a.ndl-btn{
  */
 /*
 /* 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);
@@ -4692,67 +4667,119 @@ a.ndl-btn{
 .ndl-cypher-code-block .cm-light {
   --background: var(--colors-neutral-20);
 }
-/** Cursor Colors */
-.cm-editor {
+/* Get this outside to avoid circular dependency: https://github.com/tailwindlabs/tailwindcss/issues/2807#issuecomment-730545363 */
+.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(--color));
+  color: rgb(var(--keyword));
 }
-.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));
+/*
+   ############
+    Generic Styles
+   ############
+ */
+.ndl-cypher-editor .cm-editor .cm-lineNumbers .cm-gutterElement, .ndl-codemirror-editor .cm-editor .cm-lineNumbers .cm-gutterElement {
+    font-family: 'Fira Code';
+    padding: 0 5px 0 5px;
   }
-.cm-editor .cm-string {
-    color: rgb(var(--string));
+.ndl-cypher-editor .cm-editor .cm-gutter, .ndl-codemirror-editor .cm-editor .cm-gutter {
+    width: 100%;
   }
-.cm-editor .cm-gutters {
-    background-color: rgb(var(--background));
+.ndl-cypher-editor .cm-editor .cm-content .cm-line, .ndl-codemirror-editor .cm-editor .cm-content .cm-line {
+    line-height: 1.4375;
+    font-family: 'Fira Code';
   }
-.cm-editor .cm-number {
-    color: rgb(var(--number));
+.ndl-cypher-editor .cm-editor .cm-scroller .cm-content,
+  .ndl-cypher-editor .cm-editor .cm-content,
+  .ndl-codemirror-editor .cm-editor .cm-scroller .cm-content,
+  .ndl-codemirror-editor .cm-editor .cm-content {
+    padding: 0;
   }
-.cm-editor .cm-variable {
-    color: rgb(var(--variable));
+.ndl-cypher-editor .cm-editor .cm-gutters, .ndl-codemirror-editor .cm-editor .cm-gutters {
+    border: none;
+    padding-left: 5px;
+    padding-right: 3px;
   }
-.cm-editor .cm-keyword {
-    color: rgb(var(--keyword));
+/** Cursor Colors */
+.ndl-cypher-editor .cm-editor, .ndl-codemirror-editor .cm-editor {
+    background-color: rgb(var(--background));
+    color: rgb(var(--color));
   }
-.cm-editor .cm-p-relationshipType .cm-variable,
-    .cm-editor .cm-p-relationshipType .cm-operator {
-      color: rgb(var(--relationship));
+.ndl-cypher-editor .cm-editor .cm-cursor, .ndl-codemirror-editor .cm-editor .cm-cursor {
+      z-index: 1;
+      border-left: 0.67em solid rgba(var(--cursor-color), 0.35);
+    }
+/** Selection Background */
+.ndl-cypher-editor .cm-editor.cm-focused .cm-selectionBackground,
+    .ndl-cypher-editor .cm-editor .cm-selectionBackground,
+    .ndl-codemirror-editor .cm-editor.cm-focused .cm-selectionBackground,
+    .ndl-codemirror-editor .cm-editor .cm-selectionBackground {
+      background: rgb(var(--selection-bg));
+    }
+.ndl-cypher-editor .cm-editor .cm-comment, .ndl-codemirror-editor .cm-editor .cm-comment {
+      color: rgb(var(--comment));
+    }
+.ndl-cypher-editor .cm-editor .cm-string, .ndl-codemirror-editor .cm-editor .cm-string {
+      color: rgb(var(--string));
+    }
+.ndl-cypher-editor .cm-editor .cm-gutters, .ndl-codemirror-editor .cm-editor .cm-gutters {
+      background-color: rgb(var(--background));
+    }
+.ndl-cypher-editor .cm-editor .cm-number, .ndl-codemirror-editor .cm-editor .cm-number {
+      color: rgb(var(--number));
+    }
+.ndl-cypher-editor .cm-editor .cm-variable, .ndl-codemirror-editor .cm-editor .cm-variable {
+      color: rgb(var(--variable));
+    }
+.ndl-cypher-editor .cm-editor .cm-keyword, .ndl-codemirror-editor .cm-editor .cm-keyword {
+      color: rgb(var(--keyword));
+    }
+.ndl-cypher-editor .cm-editor .cm-p-relationshipType .cm-variable,
+      .ndl-cypher-editor .cm-editor .cm-p-relationshipType .cm-operator,
+      .ndl-codemirror-editor .cm-editor .cm-p-relationshipType .cm-variable,
+      .ndl-codemirror-editor .cm-editor .cm-p-relationshipType .cm-operator {
+        color: rgb(var(--relationship));
+      }
+.ndl-cypher-editor .cm-editor .cm-p-procedure,
+    .ndl-cypher-editor .cm-editor .cm-p-procedure .cm-keyword,
+    .ndl-cypher-editor .cm-editor .cm-p-procedure .cm-variable,
+    .ndl-cypher-editor .cm-editor .cm-p-procedure .cm-operator,
+    .ndl-codemirror-editor .cm-editor .cm-p-procedure,
+    .ndl-codemirror-editor .cm-editor .cm-p-procedure .cm-keyword,
+    .ndl-codemirror-editor .cm-editor .cm-p-procedure .cm-variable,
+    .ndl-codemirror-editor .cm-editor .cm-p-procedure .cm-operator {
+      color: rgb(var(--procedure));
+    }
+.ndl-cypher-editor .cm-editor .cm-p-variable,
+    .ndl-cypher-editor .cm-editor .cm-p-variable .cm-keyword,
+    .ndl-codemirror-editor .cm-editor .cm-p-variable,
+    .ndl-codemirror-editor .cm-editor .cm-p-variable .cm-keyword {
+      color: rgb(var(--variable));
+    }
+.ndl-cypher-editor .cm-editor .cm-p-procedureOutput > :is(.cm-keyword, .cm-variable), .ndl-codemirror-editor .cm-editor .cm-p-procedureOutput > :is(.cm-keyword, .cm-variable) {
+      color: rgb(var(--variable));
+    }
+.ndl-cypher-editor .cm-editor .cm-p-property > :is(.cm-keyword, .cm-variable), .ndl-codemirror-editor .cm-editor .cm-p-property > :is(.cm-keyword, .cm-variable) {
+      color: rgb(var(--variable));
+    }
+.ndl-cypher-editor .cm-editor .cm-p-function > :is(.cm-keyword, .cm-variable), .ndl-codemirror-editor .cm-editor .cm-p-function > :is(.cm-keyword, .cm-variable) {
+      color: rgb(var(--function));
     }
-.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;
+.ndl-cypher-editor .cm-editor .cm-button, .ndl-codemirror-editor .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;
@@ -4764,19 +4791,19 @@ a.ndl-btn{
   outline: 2px solid transparent;
   outline-offset: 2px;
   --tw-ring-color: rgb(var(--palette-primary-focus));
-  }
-.cm-editor .cm-button:focus-visible{
+    }
+.ndl-cypher-editor .cm-editor .cm-button:focus-visible,   .ndl-codemirror-editor .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{
+.ndl-cypher-editor .cm-editor .cm-button.ndl-loading,   .ndl-codemirror-editor .cm-editor .cm-button.ndl-loading{
   cursor: default;
   vertical-align: middle;
   opacity: 0.5;
 }
-.cm-editor .cm-button.ndl-extra-small{
+.ndl-cypher-editor .cm-editor .cm-button.ndl-extra-small,   .ndl-codemirror-editor .cm-editor .cm-button.ndl-extra-small{
   height: 1.5rem;
   padding-left: 0.75rem;
   padding-right: 0.75rem;
@@ -4787,7 +4814,7 @@ a.ndl-btn{
   letter-spacing: 0;
   line-height: 1.25rem;
 }
-.cm-editor .cm-button.ndl-small{
+.ndl-cypher-editor .cm-editor .cm-button.ndl-small,   .ndl-codemirror-editor .cm-editor .cm-button.ndl-small{
   height: 1.75rem;
   padding-left: 0.75rem;
   padding-right: 0.75rem;
@@ -4798,7 +4825,7 @@ a.ndl-btn{
   letter-spacing: 0;
   line-height: 1.25rem;
 }
-.cm-editor .cm-button.ndl-medium{
+.ndl-cypher-editor .cm-editor .cm-button.ndl-medium,   .ndl-codemirror-editor .cm-editor .cm-button.ndl-medium{
   height: 2.25rem;
   padding-left: 1.5rem;
   padding-right: 1.5rem;
@@ -4809,7 +4836,7 @@ a.ndl-btn{
   letter-spacing: 0;
   line-height: 1.25rem;
 }
-.cm-editor .cm-button.ndl-large{
+.ndl-cypher-editor .cm-editor .cm-button.ndl-large,   .ndl-codemirror-editor .cm-editor .cm-button.ndl-large{
   height: 3rem;
   padding-left: 1.5rem;
   padding-right: 1.5rem;
@@ -4817,73 +4844,60 @@ a.ndl-btn{
   padding-bottom: 0.75rem;
 }
 
-.cm-editor .cm-button.ndl-large {
+.ndl-cypher-editor .cm-editor .cm-button.ndl-large, 
+  .ndl-codemirror-editor .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-disabled{
+.ndl-cypher-editor .cm-editor .cm-button.ndl-disabled,   .ndl-codemirror-editor .cm-editor .cm-button.ndl-disabled{
   cursor: not-allowed;
 }
-.cm-editor .cm-button.ndl-filled{
+.ndl-cypher-editor .cm-editor .cm-button.ndl-filled,   .ndl-codemirror-editor .cm-editor .cm-button.ndl-filled{
   border-width: 0px;
   color: rgb(var(--palette-neutral-text-inverse));
 }
-.cm-editor .cm-button.ndl-filled.ndl-disabled{
+.ndl-cypher-editor .cm-editor .cm-button.ndl-filled.ndl-disabled,   .ndl-codemirror-editor .cm-editor .cm-button.ndl-filled.ndl-disabled{
   background-color: rgb(var(--palette-neutral-bg-strong));
   color: rgb(var(--palette-neutral-text-weakest));
 }
-.cm-editor .cm-button.ndl-outlined{
+.ndl-cypher-editor .cm-editor .cm-button.ndl-outlined,   .ndl-codemirror-editor .cm-editor .cm-button.ndl-outlined{
   border-width: 1px;
   border-style: solid;
   background-color: rgb(var(--palette-neutral-bg-weak));
 }
-.cm-editor .cm-button.ndl-outlined.ndl-disabled{
+.ndl-cypher-editor .cm-editor .cm-button.ndl-outlined.ndl-disabled,   .ndl-codemirror-editor .cm-editor .cm-button.ndl-outlined.ndl-disabled{
   border-color: rgb(var(--palette-neutral-text-weakest));
   background-color: rgb(var(--palette-neutral-bg-weak));
   color: rgb(var(--palette-neutral-text-weakest));
 }
-.cm-editor .cm-button.ndl-text{
+.ndl-cypher-editor .cm-editor .cm-button.ndl-text,   .ndl-codemirror-editor .cm-editor .cm-button.ndl-text{
   border-style: none;
   background-color: transparent;
 }
-.cm-editor .cm-button.ndl-text.ndl-disabled{
+.ndl-cypher-editor .cm-editor .cm-button.ndl-text.ndl-disabled,   .ndl-codemirror-editor .cm-editor .cm-button.ndl-text.ndl-disabled{
   color: rgb(var(--palette-neutral-text-weakest));
 }
-.cm-editor .cm-button.ndl-floating-btn:not(.ndl-disabled):not(.ndl-text){
+.ndl-cypher-editor .cm-editor .cm-button.ndl-floating-btn:not(.ndl-disabled):not(.ndl-text),   .ndl-codemirror-editor .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{
+a.ndl-cypher-editor .cm-editor .cm-button,  a .ndl-codemirror-editor .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 {
+.ndl-cypher-editor .cm-completionLabel, .ndl-codemirror-editor .cm-completionLabel {
+    font-family: 'Fira Code';
+    font-weight: bold;
+    vertical-align: middle;
+  }
+.ndl-cypher-editor .cm-editor .cm-completionIcon, .ndl-codemirror-editor .cm-editor .cm-completionIcon {
+    vertical-align: middle;
+    width: 18px;
+    padding: 4px 6px 2px 2px;
+  }
+.ndl-cypher-editor .cm-editor .cm-completionIcon-keyword:after,  .ndl-codemirror-editor .cm-editor .cm-completionIcon-keyword:after {
   font-family: 'Fira Code';
   border-radius: 100%;
   border: 1px solid rgb(var(--ac-li-border));
@@ -4896,9 +4910,9 @@ a.cm-editor .cm-button{
   /** Share the same with all until we have a fixed set */
   background-color: rgb(var(--background));
   color: rgb(var(--keyword));
-    content: 'K';
+      content: 'K';
 }
-.cm-editor .cm-completionIcon-label:after {
+.ndl-cypher-editor .cm-editor .cm-completionIcon-label:after,  .ndl-codemirror-editor .cm-editor .cm-completionIcon-label:after {
   font-family: 'Fira Code';
   border-radius: 100%;
   border: 1px solid rgb(var(--ac-li-border));
@@ -4911,9 +4925,9 @@ a.cm-editor .cm-button{
   /** Share the same with all until we have a fixed set */
   background-color: rgb(var(--background));
   color: rgb(var(--keyword));
-    content: 'L';
+      content: 'L';
 }
-.cm-editor .cm-completionIcon-relationshipType:after {
+.ndl-cypher-editor .cm-editor .cm-completionIcon-relationshipType:after,  .ndl-codemirror-editor .cm-editor .cm-completionIcon-relationshipType:after {
   font-family: 'Fira Code';
   border-radius: 100%;
   border: 1px solid rgb(var(--ac-li-border));
@@ -4926,10 +4940,12 @@ a.cm-editor .cm-button{
   /** Share the same with all until we have a fixed set */
   background-color: rgb(var(--background));
   color: rgb(var(--keyword));
-    content: 'R';
+      content: 'R';
 }
-.cm-editor .cm-completionIcon-variable:after, 
-  .cm-editor .cm-completionIcon-procedureOutput:after {
+.ndl-cypher-editor .cm-editor .cm-completionIcon-variable:after, 
+    .ndl-cypher-editor .cm-editor .cm-completionIcon-procedureOutput:after, 
+    .ndl-codemirror-editor .cm-editor .cm-completionIcon-variable:after, 
+    .ndl-codemirror-editor .cm-editor .cm-completionIcon-procedureOutput:after {
   font-family: 'Fira Code';
   border-radius: 100%;
   border: 1px solid rgb(var(--ac-li-border));
@@ -4942,10 +4958,12 @@ a.cm-editor .cm-button{
   /** Share the same with all until we have a fixed set */
   background-color: rgb(var(--background));
   color: rgb(var(--keyword));
-    content: 'V';
+      content: 'V';
 }
-.cm-editor .cm-completionIcon-procedure:after, 
-  .cm-editor .cm-completionIcon-function:after {
+.ndl-cypher-editor .cm-editor .cm-completionIcon-procedure:after, 
+    .ndl-cypher-editor .cm-editor .cm-completionIcon-function:after, 
+    .ndl-codemirror-editor .cm-editor .cm-completionIcon-procedure:after, 
+    .ndl-codemirror-editor .cm-editor .cm-completionIcon-function:after {
   font-family: 'Fira Code';
   border-radius: 100%;
   border: 1px solid rgb(var(--ac-li-border));
@@ -4958,9 +4976,9 @@ a.cm-editor .cm-button{
   /** Share the same with all until we have a fixed set */
   background-color: rgb(var(--background));
   color: rgb(var(--keyword));
-    content: 'λ';
+      content: 'λ';
 }
-.cm-editor .cm-completionIcon-function:after {
+.ndl-cypher-editor .cm-editor .cm-completionIcon-function:after,  .ndl-codemirror-editor .cm-editor .cm-completionIcon-function:after {
   font-family: 'Fira Code';
   border-radius: 100%;
   border: 1px solid rgb(var(--ac-li-border));
@@ -4973,9 +4991,9 @@ a.cm-editor .cm-button{
   /** Share the same with all until we have a fixed set */
   background-color: rgb(var(--background));
   color: rgb(var(--keyword));
-    content: '$';
+      content: '$';
 }
-.cm-editor .cm-completionIcon-propertyKey:after {
+.ndl-cypher-editor .cm-editor .cm-completionIcon-propertyKey:after,  .ndl-codemirror-editor .cm-editor .cm-completionIcon-propertyKey:after {
   font-family: 'Fira Code';
   border-radius: 100%;
   border: 1px solid rgb(var(--ac-li-border));
@@ -4988,10 +5006,12 @@ a.cm-editor .cm-button{
   /** Share the same with all until we have a fixed set */
   background-color: rgb(var(--background));
   color: rgb(var(--keyword));
-    content: 'P';
+      content: 'P';
 }
-.cm-editor .cm-completionIcon-consoleCommand:after, 
-  .cm-editor .cm-completionIcon-consoleCommandSubcommand:after {
+.ndl-cypher-editor .cm-editor .cm-completionIcon-consoleCommand:after, 
+    .ndl-cypher-editor .cm-editor .cm-completionIcon-consoleCommandSubcommand:after, 
+    .ndl-codemirror-editor .cm-editor .cm-completionIcon-consoleCommand:after, 
+    .ndl-codemirror-editor .cm-editor .cm-completionIcon-consoleCommandSubcommand:after {
   font-family: 'Fira Code';
   border-radius: 100%;
   border: 1px solid rgb(var(--ac-li-border));
@@ -5004,30 +5024,30 @@ a.cm-editor .cm-button{
   /** Share the same with all until we have a fixed set */
   background-color: rgb(var(--background));
   color: rgb(var(--keyword));
-    content: 'C';
+      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 {
+.ndl-cypher-editor .cm-tooltip-autocomplete, .ndl-codemirror-editor .cm-tooltip-autocomplete {
     border-radius: var(--border-radius-sm);
-    color: rgb(var(--ac-li-text)) !important;
+    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:hover {
-      background-color: rgb(var(--ac-li-hover));
+.ndl-cypher-editor .cm-tooltip-autocomplete li, .ndl-codemirror-editor .cm-tooltip-autocomplete li {
+      border-radius: var(--border-radius-sm);
+      color: rgb(var(--ac-li-text)) !important;
     }
-.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%;
+.ndl-cypher-editor .cm-tooltip-autocomplete li:hover, .ndl-codemirror-editor .cm-tooltip-autocomplete li:hover {
+        background-color: rgb(var(--ac-li-hover));
+      }
+.ndl-cypher-editor .cm-tooltip-autocomplete li[aria-selected='true'], .ndl-codemirror-editor .cm-tooltip-autocomplete li[aria-selected='true'] {
+      background: rgb(var(--ac-li-selected)) !important;
+      color: rgb(var(--ac-li-text-selected)) !important;
     }
+.ndl-cypher-editor .cm-tooltip-autocomplete li[aria-selected='true'] > div, .ndl-codemirror-editor .cm-tooltip-autocomplete li[aria-selected='true'] > div {
+        opacity: 100%;
+      }
 /**
  *
  *  Copyright (c) "Neo4j"

package/lib/tokens/css/tokens.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Mon, 24 Jul 2023 06:51:26 GMT
+ * Generated on Tue, 25 Jul 2023 12:39:54 GMT
  */
 
 :root {

package/lib/tokens/js/tokens-raw.js

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Mon, 24 Jul 2023 06:51:26 GMT
+ * Generated on Tue, 25 Jul 2023 12:39:54 GMT
  */
 
 module.exports = {

package/lib/tokens/js/tokens.js

@@ -1,6 +1,6 @@
 /**
 * Do not edit directly
-* Generated on Mon, 24 Jul 2023 06:51:26 GMT
+* Generated on Tue, 25 Jul 2023 12:39:54 GMT
 */
 
 export const tokens = {

package/lib/tokens/scss/tokens.scss

@@ -1,6 +1,6 @@
 
 // Do not edit directly
-// Generated on Mon, 24 Jul 2023 06:51:26 GMT
+// Generated on Tue, 25 Jul 2023 12:39:54 GMT
 
 $transitions-values-properties-default: all;
 $transitions-values-duration-default: 100ms;

package/lib/types/tokens/js/storybook-design-token.d.ts

@@ -1,6 +1,6 @@
 /**
 * Do not edit directly
-* Generated on Mon, 24 Jul 2023 06:51:26 GMT
+* Generated on Tue, 25 Jul 2023 12:39:54 GMT
 */
 export const tokens: {
     transitions: {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@neo4j-ndl/base",
-  "version": "1.8.12",
+  "version": "1.8.14",
   "description": "Neo4j base package for the design system",
   "author": "Neo4j Inc.",
   "homepage": "",