@neo4j-ndl/base 3.7.34 → 3.7.36

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (13) hide show
  1. package/lib/cjs/tokens/js/storybook-design-token.js +1 -1
  2. package/lib/cjs/tokens/js/tokens-esm.js +1 -1
  3. package/lib/cjs/tokens/js/tokens.js +1 -1
  4. package/lib/esm/tokens/js/storybook-design-token.js +1 -1
  5. package/lib/esm/tokens/js/tokens-esm.js +1 -1
  6. package/lib/esm/tokens/js/tokens.js +1 -1
  7. package/lib/neo4j-ds-styles.css +78 -53
  8. package/lib/tokens/css/tokens.css +1 -1
  9. package/lib/tokens/js/tokens-raw.js +1 -1
  10. package/lib/tokens/js/tokens.js +1 -1
  11. package/lib/tokens/scss/tokens.scss +1 -1
  12. package/lib/types/tokens/js/storybook-design-token.d.ts +1 -1
  13. package/package.json +1 -1
package/lib/cjs/tokens/js/storybook-design-token.js CHANGED
@@ -22,7 +22,7 @@
22
22
  "use strict";
23
23
  /**
24
24
  * Do not edit directly
25
- * Generated on Tue, 14 Oct 2025 07:17:39 GMT
25
+ * Generated on Wed, 15 Oct 2025 11:05:37 GMT
26
26
  */
27
27
  Object.defineProperty(exports, "__esModule", { value: true });
28
28
  exports.tokens = void 0;
package/lib/cjs/tokens/js/tokens-esm.js CHANGED
@@ -22,7 +22,7 @@
22
22
  "use strict";
23
23
  /**
24
24
  * Do not edit directly
25
- * Generated on Tue, 14 Oct 2025 07:17:39 GMT
25
+ * Generated on Wed, 15 Oct 2025 11:05:38 GMT
26
26
  */
27
27
  Object.defineProperty(exports, "__esModule", { value: true });
28
28
  exports.tokens = void 0;
package/lib/cjs/tokens/js/tokens.js CHANGED
@@ -22,7 +22,7 @@
22
22
  "use strict";
23
23
  /**
24
24
  * Do not edit directly
25
- * Generated on Tue, 14 Oct 2025 07:17:38 GMT
25
+ * Generated on Wed, 15 Oct 2025 11:05:37 GMT
26
26
  */
27
27
  module.exports = {
28
28
  "transitions": {
package/lib/esm/tokens/js/storybook-design-token.js CHANGED
@@ -21,7 +21,7 @@
21
21
 
22
22
  /**
23
23
  * Do not edit directly
24
- * Generated on Tue, 14 Oct 2025 07:17:39 GMT
24
+ * Generated on Wed, 15 Oct 2025 11:05:37 GMT
25
25
  */
26
26
  export const tokens = {
27
27
  "transitions": [
package/lib/esm/tokens/js/tokens-esm.js CHANGED
@@ -21,7 +21,7 @@
21
21
 
22
22
  /**
23
23
  * Do not edit directly
24
- * Generated on Tue, 14 Oct 2025 07:17:39 GMT
24
+ * Generated on Wed, 15 Oct 2025 11:05:38 GMT
25
25
  */
26
26
  export const tokens = {
27
27
  "transitions": {
package/lib/esm/tokens/js/tokens.js CHANGED
@@ -22,7 +22,7 @@
22
22
  "use strict";
23
23
  /**
24
24
  * Do not edit directly
25
- * Generated on Tue, 14 Oct 2025 07:17:38 GMT
25
+ * Generated on Wed, 15 Oct 2025 11:05:37 GMT
26
26
  */
27
27
  module.exports = {
28
28
  "transitions": {
package/lib/neo4j-ds-styles.css CHANGED
@@ -2747,14 +2747,14 @@ a.ndl-btn {
2747
2747
  letter-spacing:0.016rem;
2748
2748
  line-height:1.25rem;
2749
2749
  }
2750
- .ndl-datepicker .react-datepicker-wrapper:has(.ndl-fluid) {
2750
+ .ndl-datepicker .react-datepicker-wrapper:has(.ndl-fluid), .ndl-datepicker-popper .react-datepicker-wrapper:has(.ndl-fluid) {
2751
2751
  width:auto;
2752
2752
  }
2753
- .ndl-datepicker .react-datepicker-wrapper {
2753
+ .ndl-datepicker .react-datepicker-wrapper, .ndl-datepicker-popper .react-datepicker-wrapper {
2754
2754
  width:-moz-fit-content;
2755
2755
  width:fit-content;
2756
2756
  }
2757
- .ndl-datepicker .react-datepicker-popper {
2757
+ .ndl-datepicker.react-datepicker-popper, .ndl-datepicker-popper.react-datepicker-popper {
2758
2758
  z-index:10;
2759
2759
  display:flex;
2760
2760
  width:320px;
@@ -2768,14 +2768,14 @@ a.ndl-btn {
2768
2768
  --tw-shadow-colored:var(--theme-shadow-overlay);
2769
2769
  box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
2770
2770
  }
2771
- .ndl-datepicker .react-datepicker-popper .react-datepicker__aria-live {
2771
+ .ndl-datepicker.react-datepicker-popper .react-datepicker__aria-live, .ndl-datepicker-popper.react-datepicker-popper .react-datepicker__aria-live {
2772
2772
  display:none;
2773
2773
  }
2774
- .ndl-datepicker .react-datepicker {
2774
+ .ndl-datepicker .react-datepicker, .ndl-datepicker-popper .react-datepicker {
2775
2775
  width:100%;
2776
2776
  padding:24px;
2777
2777
  }
2778
- .ndl-datepicker .ndl-datepicker-header {
2778
+ .ndl-datepicker .ndl-datepicker-header, .ndl-datepicker-popper .ndl-datepicker-header {
2779
2779
  display:flex;
2780
2780
  height:32px;
2781
2781
  align-items:center;
@@ -2783,32 +2783,32 @@ a.ndl-btn {
2783
2783
  gap:8px;
2784
2784
  padding-left:8px;
2785
2785
  }
2786
- .ndl-datepicker .ndl-datepicker-header .ndl-datepicker-selects {
2786
+ .ndl-datepicker .ndl-datepicker-header .ndl-datepicker-selects, .ndl-datepicker-popper .ndl-datepicker-header .ndl-datepicker-selects {
2787
2787
  display:flex;
2788
2788
  gap:16px;
2789
2789
  }
2790
- .ndl-datepicker .ndl-datepicker-header .ndl-datepicker-selects button {
2790
+ .ndl-datepicker .ndl-datepicker-header .ndl-datepicker-selects button, .ndl-datepicker-popper .ndl-datepicker-header .ndl-datepicker-selects button {
2791
2791
  border-radius:4px;
2792
2792
  outline:2px solid transparent;
2793
2793
  outline-offset:2px;
2794
2794
  }
2795
- .ndl-datepicker .ndl-datepicker-header .ndl-datepicker-selects button:focus-visible {
2795
+ .ndl-datepicker .ndl-datepicker-header .ndl-datepicker-selects button:focus-visible, .ndl-datepicker-popper .ndl-datepicker-header .ndl-datepicker-selects button:focus-visible {
2796
2796
  outline-width:2px;
2797
2797
  outline-offset:2px;
2798
2798
  outline-color:rgb(var(--theme-palette-primary-focus));
2799
2799
  }
2800
- .ndl-datepicker .ndl-datepicker-header .ndl-datepicker-chevron {
2800
+ .ndl-datepicker .ndl-datepicker-header .ndl-datepicker-chevron, .ndl-datepicker-popper .ndl-datepicker-header .ndl-datepicker-chevron {
2801
2801
  width:16px;
2802
2802
  height:16px;
2803
2803
  color:rgb(var(--theme-palette-neutral-text-default));
2804
2804
  }
2805
- .ndl-datepicker .react-datepicker__day-names {
2805
+ .ndl-datepicker .react-datepicker__day-names, .ndl-datepicker-popper .react-datepicker__day-names {
2806
2806
  margin-top:16px;
2807
2807
  margin-bottom:8px;
2808
2808
  display:flex;
2809
2809
  gap:8px;
2810
2810
  }
2811
- .ndl-datepicker .react-datepicker__day-name {
2811
+ .ndl-datepicker .react-datepicker__day-name, .ndl-datepicker-popper .react-datepicker__day-name {
2812
2812
  width:32px;
2813
2813
  height:32px;
2814
2814
  text-align:center;
@@ -2819,24 +2819,24 @@ a.ndl-btn {
2819
2819
  letter-spacing:0.016rem;
2820
2820
  line-height:1.25rem;
2821
2821
  }
2822
- .ndl-datepicker .react-datepicker__day-name:first-child {
2822
+ .ndl-datepicker .react-datepicker__day-name:first-child, .ndl-datepicker-popper .react-datepicker__day-name:first-child {
2823
2823
  margin-left:0px;
2824
2824
  }
2825
- .ndl-datepicker .react-datepicker__day-name:last-child {
2825
+ .ndl-datepicker .react-datepicker__day-name:last-child, .ndl-datepicker-popper .react-datepicker__day-name:last-child {
2826
2826
  margin-right:0px;
2827
2827
  }
2828
- .ndl-datepicker .react-datepicker__day-name{
2828
+ .ndl-datepicker .react-datepicker__day-name, .ndl-datepicker-popper .react-datepicker__day-name{
2829
2829
  line-height:32px;
2830
2830
  }
2831
- .ndl-datepicker .react-datepicker__month {
2831
+ .ndl-datepicker .react-datepicker__month, .ndl-datepicker-popper .react-datepicker__month {
2832
2832
  display:flex;
2833
2833
  flex-direction:column;
2834
2834
  }
2835
- .ndl-datepicker .react-datepicker__week {
2835
+ .ndl-datepicker .react-datepicker__week, .ndl-datepicker-popper .react-datepicker__week {
2836
2836
  display:flex;
2837
2837
  width:100%;
2838
2838
  }
2839
- .ndl-datepicker .react-datepicker__week .ndl-datepicker-day {
2839
+ .ndl-datepicker .react-datepicker__week .ndl-datepicker-day, .ndl-datepicker-popper .react-datepicker__week .ndl-datepicker-day {
2840
2840
  margin:4px;
2841
2841
  display:flex;
2842
2842
  flex-grow:1;
@@ -2846,28 +2846,34 @@ a.ndl-btn {
2846
2846
  border-radius:8px;
2847
2847
  text-align:center;
2848
2848
  }
2849
- .ndl-datepicker .react-datepicker__week .ndl-datepicker-day:first-child {
2849
+ .ndl-datepicker .react-datepicker__week .ndl-datepicker-day:first-child, .ndl-datepicker-popper .react-datepicker__week .ndl-datepicker-day:first-child {
2850
2850
  margin-left:0px;
2851
2851
  }
2852
- .ndl-datepicker .react-datepicker__week .ndl-datepicker-day:last-child {
2852
+ .ndl-datepicker .react-datepicker__week .ndl-datepicker-day:last-child, .ndl-datepicker-popper .react-datepicker__week .ndl-datepicker-day:last-child {
2853
2853
  margin-right:0px;
2854
2854
  }
2855
- .ndl-datepicker .react-datepicker__week .ndl-datepicker-day{
2855
+ .ndl-datepicker .react-datepicker__week .ndl-datepicker-day, .ndl-datepicker-popper .react-datepicker__week .ndl-datepicker-day{
2856
2856
  line-height:32px;
2857
2857
  }
2858
- .ndl-datepicker .react-datepicker__week .ndl-datepicker-day:not(.react-datepicker__day--disabled) {
2858
+ .ndl-datepicker .react-datepicker__week .ndl-datepicker-day:not(.react-datepicker__day--disabled), .ndl-datepicker-popper .react-datepicker__week .ndl-datepicker-day:not(.react-datepicker__day--disabled) {
2859
2859
  cursor:pointer;
2860
2860
  }
2861
2861
  .ndl-datepicker .react-datepicker__week .ndl-datepicker-day:not(.react-datepicker__day--disabled):hover:not(.react-datepicker__day--selecting-range-start):not(
2862
2862
  .react-datepicker__day--selected
2863
2863
  ):not(.react-datepicker__day--range-start):not(
2864
2864
  .react-datepicker__day--range-end
2865
+ ), .ndl-datepicker-popper .react-datepicker__week .ndl-datepicker-day:not(.react-datepicker__day--disabled):hover:not(.react-datepicker__day--selecting-range-start):not(
2866
+ .react-datepicker__day--selected
2867
+ ):not(.react-datepicker__day--range-start):not(
2868
+ .react-datepicker__day--range-end
2865
2869
  ) {
2866
2870
  background-color:rgb(var(--theme-palette-neutral-hover));
2867
2871
  color:rgb(var(--theme-palette-neutral-text-default));
2868
2872
  }
2869
2873
  .ndl-datepicker .react-datepicker__week .ndl-datepicker-day:not(.react-datepicker__day--disabled):focus:not(.react-datepicker__day--selected),
2870
- .ndl-datepicker .react-datepicker__week .ndl-datepicker-day:not(.react-datepicker__day--disabled):focus-visible:not(.react-datepicker__day--selected) {
2874
+ .ndl-datepicker .react-datepicker__week .ndl-datepicker-day:not(.react-datepicker__day--disabled):focus-visible:not(.react-datepicker__day--selected),
2875
+ .ndl-datepicker-popper .react-datepicker__week .ndl-datepicker-day:not(.react-datepicker__day--disabled):focus:not(.react-datepicker__day--selected),
2876
+ .ndl-datepicker-popper .react-datepicker__week .ndl-datepicker-day:not(.react-datepicker__day--disabled):focus-visible:not(.react-datepicker__day--selected) {
2871
2877
  color:rgb(var(--theme-palette-primary-text));
2872
2878
  outline:2px solid transparent;
2873
2879
  outline-offset:2px;
@@ -2876,17 +2882,21 @@ a.ndl-btn {
2876
2882
  box-shadow:var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
2877
2883
  --tw-ring-color:rgb(var(--theme-palette-primary-bg-strong));
2878
2884
  }
2879
- .ndl-datepicker .react-datepicker__week .react-datepicker__day--outside-month {
2885
+ .ndl-datepicker .react-datepicker__week .react-datepicker__day--outside-month, .ndl-datepicker-popper .react-datepicker__week .react-datepicker__day--outside-month {
2880
2886
  visibility:hidden;
2881
2887
  }
2882
2888
  .ndl-datepicker .react-datepicker__week .react-datepicker__day--in-selecting-range:not(
2883
2889
  .react-datepicker__day--selected
2884
2890
  ):not(.react-datepicker__day--keyboard-selected):not(
2885
2891
  .react-datepicker__day--selecting-range-start
2892
+ ), .ndl-datepicker-popper .react-datepicker__week .react-datepicker__day--in-selecting-range:not(
2893
+ .react-datepicker__day--selected
2894
+ ):not(.react-datepicker__day--keyboard-selected):not(
2895
+ .react-datepicker__day--selecting-range-start
2886
2896
  ) {
2887
2897
  background-color:rgb(var(--theme-palette-primary-bg-weak));
2888
2898
  }
2889
- .ndl-datepicker .react-datepicker__week .react-datepicker__day--in-range {
2899
+ .ndl-datepicker .react-datepicker__week .react-datepicker__day--in-range, .ndl-datepicker-popper .react-datepicker__week .react-datepicker__day--in-range {
2890
2900
  margin-left:0px;
2891
2901
  margin-right:0px;
2892
2902
  border-radius:0px;
@@ -2895,17 +2905,19 @@ a.ndl-btn {
2895
2905
  padding-right:4px;
2896
2906
  color:rgb(var(--theme-palette-neutral-text-default));
2897
2907
  }
2898
- .ndl-datepicker .react-datepicker__week .react-datepicker__day--in-range:first-child {
2908
+ .ndl-datepicker .react-datepicker__week .react-datepicker__day--in-range:first-child, .ndl-datepicker-popper .react-datepicker__week .react-datepicker__day--in-range:first-child {
2899
2909
  padding-left:0px;
2900
2910
  }
2901
- .ndl-datepicker .react-datepicker__week .react-datepicker__day--in-range:last-child {
2911
+ .ndl-datepicker .react-datepicker__week .react-datepicker__day--in-range:last-child, .ndl-datepicker-popper .react-datepicker__week .react-datepicker__day--in-range:last-child {
2902
2912
  padding-right:0px;
2903
2913
  }
2904
- .ndl-datepicker .react-datepicker__week .react-datepicker__day--in-range:hover {
2914
+ .ndl-datepicker .react-datepicker__week .react-datepicker__day--in-range:hover, .ndl-datepicker-popper .react-datepicker__week .react-datepicker__day--in-range:hover {
2905
2915
  background-color:rgb(var(--theme-palette-primary-hover-weak));
2906
2916
  }
2907
2917
  .ndl-datepicker .react-datepicker__week .react-datepicker__day--keyboard-selected,
2908
- .ndl-datepicker .react-datepicker__week .react-datepicker__day--highlighted {
2918
+ .ndl-datepicker .react-datepicker__week .react-datepicker__day--highlighted,
2919
+ .ndl-datepicker-popper .react-datepicker__week .react-datepicker__day--keyboard-selected,
2920
+ .ndl-datepicker-popper .react-datepicker__week .react-datepicker__day--highlighted {
2909
2921
  color:rgb(var(--theme-palette-primary-text));
2910
2922
  outline:2px solid transparent;
2911
2923
  outline-offset:2px;
@@ -2914,49 +2926,53 @@ a.ndl-btn {
2914
2926
  box-shadow:var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
2915
2927
  --tw-ring-color:rgb(var(--theme-palette-primary-bg-strong));
2916
2928
  }
2917
- .ndl-datepicker .react-datepicker__week .react-datepicker__day--selected {
2929
+ .ndl-datepicker .react-datepicker__week .react-datepicker__day--selected, .ndl-datepicker-popper .react-datepicker__week .react-datepicker__day--selected {
2918
2930
  background-color:rgb(var(--theme-palette-primary-bg-strong));
2919
2931
  color:rgb(var(--theme-palette-neutral-text-inverse));
2920
2932
  }
2921
- .ndl-datepicker .react-datepicker__week .react-datepicker__day--selected:hover {
2933
+ .ndl-datepicker .react-datepicker__week .react-datepicker__day--selected:hover, .ndl-datepicker-popper .react-datepicker__week .react-datepicker__day--selected:hover {
2922
2934
  background-color:rgb(var(--theme-palette-primary-hover-strong));
2923
2935
  }
2924
2936
  .ndl-datepicker .react-datepicker__week .react-datepicker__day--selected:focus,
2925
- .ndl-datepicker .react-datepicker__week .react-datepicker__day--selected:focus-visible {
2937
+ .ndl-datepicker .react-datepicker__week .react-datepicker__day--selected:focus-visible,
2938
+ .ndl-datepicker-popper .react-datepicker__week .react-datepicker__day--selected:focus,
2939
+ .ndl-datepicker-popper .react-datepicker__week .react-datepicker__day--selected:focus-visible {
2926
2940
  outline:2px solid transparent;
2927
2941
  outline-offset:2px;
2928
2942
  }
2929
2943
  .ndl-datepicker .react-datepicker__week .react-datepicker__day--range-start,
2930
- .ndl-datepicker .react-datepicker__week .react-datepicker__day--selecting-range-start {
2944
+ .ndl-datepicker .react-datepicker__week .react-datepicker__day--selecting-range-start,
2945
+ .ndl-datepicker-popper .react-datepicker__week .react-datepicker__day--range-start,
2946
+ .ndl-datepicker-popper .react-datepicker__week .react-datepicker__day--selecting-range-start {
2931
2947
  border-top-left-radius:8px;
2932
2948
  border-bottom-left-radius:8px;
2933
2949
  background-color:rgb(var(--theme-palette-primary-bg-strong));
2934
2950
  color:rgb(var(--theme-palette-neutral-text-inverse));
2935
2951
  }
2936
- .ndl-datepicker .react-datepicker__week .react-datepicker__day--range-start:hover, .ndl-datepicker .react-datepicker__week .react-datepicker__day--selecting-range-start:hover {
2952
+ .ndl-datepicker .react-datepicker__week .react-datepicker__day--range-start:hover, .ndl-datepicker .react-datepicker__week .react-datepicker__day--selecting-range-start:hover, .ndl-datepicker-popper .react-datepicker__week .react-datepicker__day--range-start:hover, .ndl-datepicker-popper .react-datepicker__week .react-datepicker__day--selecting-range-start:hover {
2937
2953
  background-color:rgb(var(--theme-palette-primary-hover-strong));
2938
2954
  }
2939
- .ndl-datepicker .react-datepicker__week .react-datepicker__day--range-end {
2955
+ .ndl-datepicker .react-datepicker__week .react-datepicker__day--range-end, .ndl-datepicker-popper .react-datepicker__week .react-datepicker__day--range-end {
2940
2956
  border-top-right-radius:8px;
2941
2957
  border-bottom-right-radius:8px;
2942
2958
  background-color:rgb(var(--theme-palette-primary-bg-strong));
2943
2959
  color:rgb(var(--theme-palette-neutral-text-inverse));
2944
2960
  }
2945
- .ndl-datepicker .react-datepicker__week .react-datepicker__day--range-end:hover {
2961
+ .ndl-datepicker .react-datepicker__week .react-datepicker__day--range-end:hover, .ndl-datepicker-popper .react-datepicker__week .react-datepicker__day--range-end:hover {
2946
2962
  background-color:rgb(var(--theme-palette-primary-hover-strong));
2947
2963
  }
2948
- .ndl-datepicker .react-datepicker__monthPicker {
2964
+ .ndl-datepicker .react-datepicker__monthPicker, .ndl-datepicker-popper .react-datepicker__monthPicker {
2949
2965
  margin-top:8px;
2950
2966
  gap:8px;
2951
2967
  }
2952
- .ndl-datepicker .react-datepicker__month-wrapper {
2968
+ .ndl-datepicker .react-datepicker__month-wrapper, .ndl-datepicker-popper .react-datepicker__month-wrapper {
2953
2969
  display:grid;
2954
2970
  width:100%;
2955
2971
  grid-template-columns:repeat(3, minmax(0, 1fr));
2956
2972
  gap:8px;
2957
2973
  text-align:center;
2958
2974
  }
2959
- .ndl-datepicker .react-datepicker__month-text {
2975
+ .ndl-datepicker .react-datepicker__month-text, .ndl-datepicker-popper .react-datepicker__month-text {
2960
2976
  flex-grow:1;
2961
2977
  flex-basis:0px;
2962
2978
  cursor:pointer;
@@ -2970,7 +2986,10 @@ a.ndl-btn {
2970
2986
  }
2971
2987
  .ndl-datepicker .react-datepicker__month-text.react-datepicker__month-text--keyboard-selected,
2972
2988
  .ndl-datepicker .react-datepicker__month-text:focus,
2973
- .ndl-datepicker .react-datepicker__month-text:focus-visible {
2989
+ .ndl-datepicker .react-datepicker__month-text:focus-visible,
2990
+ .ndl-datepicker-popper .react-datepicker__month-text.react-datepicker__month-text--keyboard-selected,
2991
+ .ndl-datepicker-popper .react-datepicker__month-text:focus,
2992
+ .ndl-datepicker-popper .react-datepicker__month-text:focus-visible {
2974
2993
  color:rgb(var(--theme-palette-primary-text));
2975
2994
  outline:2px solid transparent;
2976
2995
  outline-offset:2px;
@@ -2979,17 +2998,17 @@ a.ndl-btn {
2979
2998
  box-shadow:var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
2980
2999
  --tw-ring-color:rgb(var(--theme-palette-primary-bg-strong));
2981
3000
  }
2982
- .ndl-datepicker .react-datepicker__month-text:hover {
3001
+ .ndl-datepicker .react-datepicker__month-text:hover, .ndl-datepicker-popper .react-datepicker__month-text:hover {
2983
3002
  background-color:rgb(var(--theme-palette-neutral-hover));
2984
3003
  }
2985
- .ndl-datepicker .react-datepicker__month-text.react-datepicker__month-text--selected {
3004
+ .ndl-datepicker .react-datepicker__month-text.react-datepicker__month-text--selected, .ndl-datepicker-popper .react-datepicker__month-text.react-datepicker__month-text--selected {
2986
3005
  background-color:rgb(var(--theme-palette-primary-bg-strong));
2987
3006
  color:rgb(var(--theme-palette-neutral-text-inverse));
2988
3007
  }
2989
- .ndl-datepicker .react-datepicker__month-text.react-datepicker__month-text--selected:hover {
3008
+ .ndl-datepicker .react-datepicker__month-text.react-datepicker__month-text--selected:hover, .ndl-datepicker-popper .react-datepicker__month-text.react-datepicker__month-text--selected:hover {
2990
3009
  background-color:rgb(var(--theme-palette-primary-hover-strong));
2991
3010
  }
2992
- .ndl-datepicker .react-datepicker__year-wrapper {
3011
+ .ndl-datepicker .react-datepicker__year-wrapper, .ndl-datepicker-popper .react-datepicker__year-wrapper {
2993
3012
  margin-top:16px;
2994
3013
  display:grid;
2995
3014
  width:100%;
@@ -2997,17 +3016,20 @@ a.ndl-btn {
2997
3016
  gap:8px;
2998
3017
  text-align:center;
2999
3018
  }
3000
- .ndl-datepicker .react-datepicker__year-text {
3019
+ .ndl-datepicker .react-datepicker__year-text, .ndl-datepicker-popper .react-datepicker__year-text {
3001
3020
  cursor:pointer;
3002
3021
  border-radius:8px;
3003
3022
  line-height:32px;
3004
3023
  }
3005
- .ndl-datepicker .react-datepicker__year-text:hover {
3024
+ .ndl-datepicker .react-datepicker__year-text:hover, .ndl-datepicker-popper .react-datepicker__year-text:hover {
3006
3025
  background-color:rgb(var(--theme-palette-neutral-hover));
3007
3026
  }
3008
3027
  .ndl-datepicker .react-datepicker__year-text:focus,
3009
3028
  .ndl-datepicker .react-datepicker__year-text:focus-visible,
3010
- .ndl-datepicker .react-datepicker__year-text.react-datepicker__year-text--keyboard-selected {
3029
+ .ndl-datepicker .react-datepicker__year-text.react-datepicker__year-text--keyboard-selected,
3030
+ .ndl-datepicker-popper .react-datepicker__year-text:focus,
3031
+ .ndl-datepicker-popper .react-datepicker__year-text:focus-visible,
3032
+ .ndl-datepicker-popper .react-datepicker__year-text.react-datepicker__year-text--keyboard-selected {
3011
3033
  color:rgb(var(--theme-palette-primary-text));
3012
3034
  outline:2px solid transparent;
3013
3035
  outline-offset:2px;
@@ -3016,26 +3038,29 @@ a.ndl-btn {
3016
3038
  box-shadow:var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
3017
3039
  --tw-ring-color:rgb(var(--theme-palette-primary-bg-strong));
3018
3040
  }
3019
- .ndl-datepicker .react-datepicker__year-text--selected {
3041
+ .ndl-datepicker .react-datepicker__year-text--selected, .ndl-datepicker-popper .react-datepicker__year-text--selected {
3020
3042
  background-color:rgb(var(--theme-palette-primary-bg-strong));
3021
3043
  color:rgb(var(--theme-palette-neutral-text-inverse));
3022
3044
  }
3023
- .ndl-datepicker .react-datepicker__year-text--selected:hover {
3045
+ .ndl-datepicker .react-datepicker__year-text--selected:hover, .ndl-datepicker-popper .react-datepicker__year-text--selected:hover {
3024
3046
  background-color:rgb(var(--theme-palette-primary-hover-strong));
3025
3047
  }
3026
- .ndl-datepicker .react-datepicker-time__caption {
3048
+ .ndl-datepicker .react-datepicker-time__caption, .ndl-datepicker-popper .react-datepicker-time__caption {
3027
3049
  display:none;
3028
3050
  }
3029
3051
  .ndl-datepicker .react-datepicker__day--disabled,
3030
3052
  .ndl-datepicker .react-datepicker__month-text--disabled,
3031
- .ndl-datepicker .react-datepicker__year-text--disabled {
3053
+ .ndl-datepicker .react-datepicker__year-text--disabled,
3054
+ .ndl-datepicker-popper .react-datepicker__day--disabled,
3055
+ .ndl-datepicker-popper .react-datepicker__month-text--disabled,
3056
+ .ndl-datepicker-popper .react-datepicker__year-text--disabled {
3032
3057
  cursor:not-allowed;
3033
3058
  color:rgb(var(--theme-palette-neutral-text-weakest));
3034
3059
  }
3035
- .ndl-datepicker .react-datepicker__day--disabled:hover, .ndl-datepicker .react-datepicker__month-text--disabled:hover, .ndl-datepicker .react-datepicker__year-text--disabled:hover {
3060
+ .ndl-datepicker .react-datepicker__day--disabled:hover, .ndl-datepicker .react-datepicker__month-text--disabled:hover, .ndl-datepicker .react-datepicker__year-text--disabled:hover, .ndl-datepicker-popper .react-datepicker__day--disabled:hover, .ndl-datepicker-popper .react-datepicker__month-text--disabled:hover, .ndl-datepicker-popper .react-datepicker__year-text--disabled:hover {
3036
3061
  background-color:transparent;
3037
3062
  }
3038
- .ndl-datepicker .react-datepicker__aria-live{
3063
+ .ndl-datepicker .react-datepicker__aria-live, .ndl-datepicker-popper .react-datepicker__aria-live{
3039
3064
  position:absolute;
3040
3065
  clip-path:circle(0);
3041
3066
  border:0;
package/lib/tokens/css/tokens.css CHANGED
@@ -21,7 +21,7 @@
21
21
 
22
22
  /**
23
23
  * Do not edit directly
24
- * Generated on Tue, 14 Oct 2025 07:17:38 GMT
24
+ * Generated on Wed, 15 Oct 2025 11:05:37 GMT
25
25
  */
26
26
 
27
27
  :root {
package/lib/tokens/js/tokens-raw.js CHANGED
@@ -21,7 +21,7 @@
21
21
 
22
22
  /**
23
23
  * Do not edit directly
24
- * Generated on Tue, 14 Oct 2025 07:17:38 GMT
24
+ * Generated on Wed, 15 Oct 2025 11:05:37 GMT
25
25
  */
26
26
 
27
27
  module.exports = {
package/lib/tokens/js/tokens.js CHANGED
@@ -21,7 +21,7 @@
21
21
 
22
22
  /**
23
23
  * Do not edit directly
24
- * Generated on Tue, 14 Oct 2025 07:17:39 GMT
24
+ * Generated on Wed, 15 Oct 2025 11:05:37 GMT
25
25
  */
26
26
 
27
27
  export const tokens = {
package/lib/tokens/scss/tokens.scss CHANGED
@@ -1,6 +1,6 @@
1
1
 
2
2
  // Do not edit directly
3
- // Generated on Tue, 14 Oct 2025 07:17:38 GMT
3
+ // Generated on Wed, 15 Oct 2025 11:05:37 GMT
4
4
 
5
5
  $transitions-values-properties-default: all;
6
6
  $transitions-values-duration-quick: 100ms;
package/lib/types/tokens/js/storybook-design-token.d.ts CHANGED
@@ -21,7 +21,7 @@
21
21
 
22
22
  /**
23
23
  * Do not edit directly
24
- * Generated on Tue, 14 Oct 2025 07:17:39 GMT
24
+ * Generated on Wed, 15 Oct 2025 11:05:37 GMT
25
25
  */
26
26
  export const tokens: {
27
27
  transitions: {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@neo4j-ndl/base",
3
- "version": "3.7.34",
3
+ "version": "3.7.36",
4
4
  "description": "Neo4j base package for the design system",
5
5
  "author": "Neo4j Inc.",
6
6
  "homepage": "https://www.neo4j.design",