@neo4j-ndl/base 2.12.11 → 2.12.12

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

@@ -22,7 +22,7 @@
 "use strict";
 /**
 * Do not edit directly
-* Generated on Wed, 14 Aug 2024 11:27:31 GMT
+* Generated on Thu, 15 Aug 2024 10:20:30 GMT
 */
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.tokens = void 0;

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

@@ -22,7 +22,7 @@
 "use strict";
 /**
 * Do not edit directly
-* Generated on Wed, 14 Aug 2024 11:27:31 GMT
+* Generated on Thu, 15 Aug 2024 10:20:30 GMT
 */
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.tokens = void 0;

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

@@ -22,7 +22,7 @@
 "use strict";
 /**
 * Do not edit directly
-* Generated on Wed, 14 Aug 2024 11:27:31 GMT
+* Generated on Thu, 15 Aug 2024 10:20:30 GMT
 */
 module.exports = {
     "transitions": {

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

@@ -21,7 +21,7 @@
 
 /**
 * Do not edit directly
-* Generated on Wed, 14 Aug 2024 11:27:31 GMT
+* Generated on Thu, 15 Aug 2024 10:20:30 GMT
 */
 export const tokens = {
     "transitions": [

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

@@ -21,7 +21,7 @@
 
 /**
 * Do not edit directly
-* Generated on Wed, 14 Aug 2024 11:27:31 GMT
+* Generated on Thu, 15 Aug 2024 10:20:30 GMT
 */
 export const tokens = {
     "transitions": {

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

@@ -22,7 +22,7 @@
 "use strict";
 /**
 * Do not edit directly
-* Generated on Wed, 14 Aug 2024 11:27:31 GMT
+* Generated on Thu, 15 Aug 2024 10:20:30 GMT
 */
 module.exports = {
     "transitions": {

package/lib/neo4j-ds-styles.css

@@ -2824,7 +2824,11 @@ a.ndl-btn {
 }
 .ndl-datepicker .react-datepicker-popper {
   z-index:10;
-  margin-top:8px;
+  margin-top:4px;
+  display:flex;
+  width:320px;
+  align-items:center;
+  justify-content:center;
   border-radius:4px;
   border-width:1px;
   border-color:rgb(var(--theme-palette-neutral-border-strong));
@@ -2837,32 +2841,33 @@ a.ndl-btn {
 .ndl-datepicker .react-datepicker-popper .react-datepicker__aria-live {
   display:none;
 }
+.ndl-datepicker .react-datepicker {
+  width:100%;
+}
 .ndl-datepicker .ndl-datepicker-header {
   display:flex;
+  height:32px;
   align-items:center;
   justify-content:space-between;
   gap:8px;
+  padding-left:8px;
 }
 .ndl-datepicker .ndl-datepicker-header .ndl-datepicker-selects {
-  margin-left:4px;
   display:flex;
-}
-.ndl-datepicker .ndl-datepicker-header .ndl-datepicker-selects > :not([hidden]) ~ :not([hidden]) {
-  --tw-space-x-reverse:0;
-  margin-right:calc(8px * var(--tw-space-x-reverse));
-  margin-left:calc(8px * calc(1 - var(--tw-space-x-reverse)));
+  gap:16px;
 }
 .ndl-datepicker .ndl-datepicker-header .ndl-datepicker-chevron {
-  width:20px;
-  height:20px;
-  color:rgb(var(--theme-palette-neutral-text-weak));
+  width:16px;
+  height:16px;
+  color:rgb(var(--theme-palette-neutral-text-default));
 }
 .ndl-datepicker .react-datepicker__day-names {
   margin-top:16px;
+  margin-bottom:8px;
   display:flex;
+  gap:8px;
 }
 .ndl-datepicker .react-datepicker__day-name {
-  margin:4px;
   width:32px;
   height:32px;
   text-align:center;
@@ -2888,12 +2893,13 @@ a.ndl-btn {
 }
 .ndl-datepicker .react-datepicker__week {
   display:flex;
+  width:100%;
 }
 .ndl-datepicker .react-datepicker__week .ndl-datepicker-day {
   margin:4px;
   display:flex;
-  width:32px;
-  height:32px;
+  flex-grow:1;
+  flex-basis:0px;
   flex-direction:column;
   justify-content:center;
   border-radius:8px;
@@ -2913,22 +2919,24 @@ a.ndl-btn {
 }
 .ndl-datepicker .react-datepicker__week .ndl-datepicker-day:not(.react-datepicker__day--disabled):hover:not(.react-datepicker__day--selecting-range-start):not(
             .react-datepicker__day--selected
+          ):not(.react-datepicker__day--range-start):not(
+            .react-datepicker__day--range-end
           ) {
   background-color:rgb(var(--theme-palette-neutral-hover));
+  color:rgb(var(--theme-palette-neutral-text-default));
 }
-.ndl-datepicker .react-datepicker__week .react-datepicker__day--outside-month {
-  visibility:hidden;
-}
-.ndl-datepicker .react-datepicker__week .react-datepicker__day--highlighted {
+.ndl-datepicker .react-datepicker__week .ndl-datepicker-day:not(.react-datepicker__day--disabled):focus:not(.react-datepicker__day--selected),
+        .ndl-datepicker .react-datepicker__week .ndl-datepicker-day:not(.react-datepicker__day--disabled):focus-visible:not(.react-datepicker__day--selected) {
+  color:rgb(var(--theme-palette-primary-text));
+  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);
+  --tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(1px + 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-color:rgb(var(--theme-palette-neutral-bg-strongest));
-  font-family:var(--font-font-family-body-label), sans-serif;
-  font-size:var(--font-size-label);
-  font-weight:var(--font-weight-bold);
-  letter-spacing:0;
-  line-height:1.25rem;
+  --tw-ring-color:rgb(var(--theme-palette-primary-bg-strong));
+}
+.ndl-datepicker .react-datepicker__week .react-datepicker__day--outside-month {
+  visibility:hidden;
 }
 .ndl-datepicker .react-datepicker__week .react-datepicker__day--in-selecting-range:not(
         .react-datepicker__day--selected
@@ -2940,20 +2948,36 @@ a.ndl-btn {
 .ndl-datepicker .react-datepicker__week .react-datepicker__day--in-range {
   margin-left:0px;
   margin-right:0px;
-  width:40px;
   border-radius:0px;
   background-color:rgb(var(--theme-palette-primary-bg-weak));
+  padding-left:4px;
+  padding-right:4px;
   color:rgb(var(--theme-palette-neutral-text-default));
 }
+.ndl-datepicker .react-datepicker__week .react-datepicker__day--in-range:first-child {
+  padding-left:0px;
+}
+.ndl-datepicker .react-datepicker__week .react-datepicker__day--in-range:last-child {
+  padding-right:0px;
+}
 .ndl-datepicker .react-datepicker__week .react-datepicker__day--in-range:hover {
   background-color:rgb(var(--theme-palette-primary-hover-weak));
 }
-.ndl-datepicker .react-datepicker__week .react-datepicker__day--selected,
-    .ndl-datepicker .react-datepicker__week .react-datepicker__day--keyboard-selected {
+.ndl-datepicker .react-datepicker__week .react-datepicker__day--keyboard-selected,
+    .ndl-datepicker .react-datepicker__week .react-datepicker__day--highlighted {
+  color:rgb(var(--theme-palette-primary-text));
+  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(1px + 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-color:rgb(var(--theme-palette-primary-bg-strong));
+}
+.ndl-datepicker .react-datepicker__week .react-datepicker__day--selected {
   background-color:rgb(var(--theme-palette-primary-bg-strong));
   color:rgb(var(--theme-palette-neutral-text-inverse));
 }
-.ndl-datepicker .react-datepicker__week .react-datepicker__day--selected:hover, .ndl-datepicker .react-datepicker__week .react-datepicker__day--keyboard-selected:hover {
+.ndl-datepicker .react-datepicker__week .react-datepicker__day--selected:hover {
   background-color:rgb(var(--theme-palette-primary-hover-strong));
 }
 .ndl-datepicker .react-datepicker__week .react-datepicker__day--range-start,
@@ -2975,14 +2999,20 @@ a.ndl-btn {
 .ndl-datepicker .react-datepicker__week .react-datepicker__day--range-end:hover {
   background-color:rgb(var(--theme-palette-primary-hover-strong));
 }
+.ndl-datepicker .react-datepicker__monthPicker {
+  margin-top:8px;
+  gap:8px;
+}
 .ndl-datepicker .react-datepicker__month-wrapper {
   display:grid;
+  width:100%;
   grid-template-columns:repeat(3, minmax(0, 1fr));
+  gap:8px;
   text-align:center;
 }
 .ndl-datepicker .react-datepicker__month-text {
-  margin:4px;
-  width:64px;
+  flex-grow:1;
+  flex-basis:0px;
   cursor:pointer;
   border-radius:8px;
   font-family:var(--font-font-family-body-medium), sans-serif;
@@ -2992,24 +3022,36 @@ a.ndl-btn {
   line-height:1.25rem;
     line-height:32px;
 }
+.ndl-datepicker .react-datepicker__month-text.react-datepicker__month-text--keyboard-selected,
+    .ndl-datepicker .react-datepicker__month-text:focus,
+    .ndl-datepicker .react-datepicker__month-text:focus-visible {
+  color:rgb(var(--theme-palette-primary-text));
+  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(1px + 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-color:rgb(var(--theme-palette-primary-bg-strong));
+}
 .ndl-datepicker .react-datepicker__month-text:hover {
   background-color:rgb(var(--theme-palette-neutral-hover));
 }
-.ndl-datepicker .react-datepicker__month-text--selected {
+.ndl-datepicker .react-datepicker__month-text.react-datepicker__month-text--selected {
   background-color:rgb(var(--theme-palette-primary-bg-strong));
   color:rgb(var(--theme-palette-neutral-text-inverse));
 }
-.ndl-datepicker .react-datepicker__month-text--selected:hover {
+.ndl-datepicker .react-datepicker__month-text.react-datepicker__month-text--selected:hover {
   background-color:rgb(var(--theme-palette-primary-hover-strong));
 }
 .ndl-datepicker .react-datepicker__year-wrapper {
+  margin-top:16px;
   display:grid;
-  grid-template-columns:repeat(3, minmax(0, 1fr));
+  width:100%;
+  grid-template-columns:repeat(4, minmax(0, 1fr));
+  gap:8px;
   text-align:center;
 }
 .ndl-datepicker .react-datepicker__year-text {
-  margin:4px;
-  width:64px;
   cursor:pointer;
   border-radius:8px;
     line-height:32px;
@@ -3017,6 +3059,17 @@ a.ndl-btn {
 .ndl-datepicker .react-datepicker__year-text:hover {
   background-color:rgb(var(--theme-palette-neutral-hover));
 }
+.ndl-datepicker .react-datepicker__year-text:focus,
+    .ndl-datepicker .react-datepicker__year-text:focus-visible,
+    .ndl-datepicker .react-datepicker__year-text.react-datepicker__year-text--keyboard-selected {
+  color:rgb(var(--theme-palette-primary-text));
+  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(1px + 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-color:rgb(var(--theme-palette-primary-bg-strong));
+}
 .ndl-datepicker .react-datepicker__year-text--selected {
   background-color:rgb(var(--theme-palette-primary-bg-strong));
   color:rgb(var(--theme-palette-neutral-text-inverse));
@@ -4886,6 +4939,7 @@ a.ndl-btn {
   border-radius:8px;
   border-width:1px;
   padding-top:12px;
+  padding-bottom:4px;
 }
 .ndl-code-block-container .ndl-code-block-title {
   margin-left:12px;
@@ -4930,7 +4984,7 @@ a.ndl-btn {
 .ndl-code-block-container .ndl-code-content-container .ndl-highlight-wrapper {
   position:relative;
   width:100%;
-  overflow:auto;
+  overflow-y:auto;
 }
 .ndl-code-block-container .ndl-code-content-container .ndl-highlight-wrapper:focus {
   outline-color:rgb(var(--theme-palette-primary-focus));
@@ -7172,8 +7226,8 @@ a.ndl-cypher-editor .cm-editor .cm-button,a .ndl-codemirror-editor .cm-editor .c
 .n-w-48 {
   width:192px;
 }
-.n-w-64 {
-  width:256px;
+.n-w-\[300px\] {
+  width:300px;
 }
 .n-w-full {
   width:100%;
@@ -7311,6 +7365,9 @@ a.ndl-cypher-editor .cm-editor .cm-button,a .ndl-codemirror-editor .cm-editor .c
   margin-top:calc(12px * calc(1 - var(--tw-space-y-reverse)));
   margin-bottom:calc(12px * var(--tw-space-y-reverse));
 }
+.n-justify-self-end {
+  justify-self:end;
+}
 .n-overflow-auto {
   overflow:auto;
 }
@@ -34693,6 +34750,9 @@ a.ndl-cypher-editor .cm-editor .cm-button,a .ndl-codemirror-editor .cm-editor .c
 .n-pb-\[200px\] {
   padding-bottom:200px;
 }
+.n-pb-token-3 {
+  padding-bottom:4px;
+}
 .n-pb-token-6 {
   padding-bottom:16px;
 }
@@ -34721,6 +34781,9 @@ a.ndl-cypher-editor .cm-editor .cm-button,a .ndl-codemirror-editor .cm-editor .c
   font-size:0.75rem;
   line-height:1rem;
 }
+.n-font-bold {
+  font-weight:700;
+}
 .n-font-light {
   font-weight:300;
 }

package/lib/tokens/css/tokens.css

@@ -21,7 +21,7 @@
 
 /**
  * Do not edit directly
- * Generated on Wed, 14 Aug 2024 11:27:31 GMT
+ * Generated on Thu, 15 Aug 2024 10:20:30 GMT
  */
 
 :root {

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

@@ -21,7 +21,7 @@
 
 /**
  * Do not edit directly
- * Generated on Wed, 14 Aug 2024 11:27:31 GMT
+ * Generated on Thu, 15 Aug 2024 10:20:30 GMT
  */
 
 module.exports = {

package/lib/tokens/js/tokens.js

@@ -21,7 +21,7 @@
 
 /**
 * Do not edit directly
-* Generated on Wed, 14 Aug 2024 11:27:31 GMT
+* Generated on Thu, 15 Aug 2024 10:20:30 GMT
 */
 
 export const tokens = {

package/lib/tokens/scss/tokens.scss

@@ -1,6 +1,6 @@
 
 // Do not edit directly
-// Generated on Wed, 14 Aug 2024 11:27:31 GMT
+// Generated on Thu, 15 Aug 2024 10:20:30 GMT
 
 $transitions-values-properties-default: all;
 $transitions-values-duration-quick: 100ms;

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

@@ -21,7 +21,7 @@
 
 /**
 * Do not edit directly
-* Generated on Wed, 14 Aug 2024 11:27:31 GMT
+* Generated on Thu, 15 Aug 2024 10:20:30 GMT
 */
 export const tokens: {
     transitions: {

package/package.json

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