@neo4j-ndl/base 0.1.0 → 0.1.3

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.
@@ -1,6 +1,6 @@
1
1
 
2
2
 
3
- @import url('https://fonts.googleapis.com/css2?family=Fira+Code:wght@500&family=Nunito+Sans:wght@400;500;600;700&display=swap');
3
+ @import url('https://fonts.googleapis.com/css2?family=Fira+Code:wght@500&family=Nunito+Sans:wght@300;400;500;600;700&display=swap');
4
4
  /**
5
5
  *
6
6
  * Copyright (c) "Neo4j"
@@ -418,89 +418,242 @@ Ensure the default browser behavior of the `hidden` attribute.
418
418
  * You should have received a copy of the GNU General Public License
419
419
  * along with this program. If not, see <http://www.gnu.org/licenses/>.
420
420
  */
421
- code{
422
- font-family: "Fira Code";
423
- font-size: 14px;
424
- line-height: 20px;
421
+ /**
422
+ * Do not edit directly
423
+ * Generated on Mon, 04 Apr 2022 08:54:08 GMT
424
+ */
425
+ :root {
426
+ --border-radius-sm: 4px;
427
+ --border-radius-md: 6px;
428
+ --border-radius-lg: 8px;
429
+ --border-radius-xl: 10px;
430
+ --border-radius-1xl: 12px;
431
+ --border-radius-2xl: 14px;
432
+ --border-radius-3xl: 16px;
433
+ --border-radius-4xl: 18px;
434
+ --border-radius-5xl: 20px;
435
+ --border-radius-full: 9999px;;
436
+ --colors-primary-10: 230, 248, 255 /* #e6f8ff */; /* lighest shade of brand primary color */
437
+ --colors-primary-20: 163, 226, 255 /* #a3e2ff */;
438
+ --colors-primary-30: 122, 209, 255 /* #7ad1ff */;
439
+ --colors-primary-40: 1, 139, 255 /* #018bff */;
440
+ --colors-primary-50: 0, 111, 214 /* #006FD6 */;
441
+ --colors-primary-60: 0, 86, 179 /* #0056b3 */;
442
+ --colors-primary-70: 0, 64, 146 /* #004092 */;
443
+ --colors-danger-10: 255, 230, 233 /* #ffe6e9 */;
444
+ --colors-danger-20: 255, 184, 196 /* #ffb8c4 */;
445
+ --colors-danger-30: 255, 102, 138 /* #ff668a */;
446
+ --colors-danger-40: 237, 18, 82 /* #ed1252 */;
447
+ --colors-danger-50: 204, 37, 75 /* #cc254b */;
448
+ --colors-danger-60: 161, 0, 59 /* #a1003b */;
449
+ --colors-danger-70: 122, 0, 49 /* #7a0031 */;
450
+ --colors-success-10: 225, 250, 239 /* #E1FAEF */;
451
+ --colors-success-20: 152, 237, 203 /* #98EDCB */;
452
+ --colors-success-30: 68, 212, 164 /* #44D4A4 */;
453
+ --colors-success-40: 0, 186, 136 /* #00BA88 */;
454
+ --colors-success-50: 50, 125, 96 /* #327D60 */;
455
+ --colors-success-60: 0, 110, 88 /* #006E58 */;
456
+ --colors-success-70: 0, 71, 59 /* #00473B */;
457
+ --colors-warning-10: 255, 251, 222 /* #FFFBDE */;
458
+ --colors-warning-20: 255, 244, 181 /* #FFF4B5 */;
459
+ --colors-warning-30: 255, 234, 140 /* #FFEA8C */;
460
+ --colors-warning-40: 255, 222, 99 /* #FFDE63 */;
461
+ --colors-warning-50: 217, 181, 74 /* #D9B54A */;
462
+ --colors-warning-60: 150, 108, 46 /* #966c2e */;
463
+ --colors-warning-70: 102, 72, 23 /* #664817 */;
464
+ --colors-blueberry-10: 232, 235, 246 /* #E8EBF6 */;
465
+ --colors-blueberry-20: 196, 204, 233 /* #C4CCE9 */;
466
+ --colors-blueberry-30: 157, 171, 217 /* #9DABD9 */;
467
+ --colors-blueberry-40: 118, 138, 202 /* #768ACA */;
468
+ --colors-blueberry-50: 53, 87, 180 /* #3557B4 */;
469
+ --colors-blueberry-60: 37, 69, 158 /* #25459E */;
470
+ --colors-blueberry-70: 11, 41, 125 /* #0B297D */;
471
+ --colors-mint-10: 240, 255, 250 /* #F0FFFA */;
472
+ --colors-mint-20: 209, 255, 244 /* #D1FFF4 */;
473
+ --colors-mint-30: 168, 255, 238 /* #A8FFEE */;
474
+ --colors-mint-40: 85, 249, 226 /* #55F9E2 */;
475
+ --colors-mint-50: 61, 212, 197 /* #3DD4C5 */;
476
+ --colors-mint-60: 42, 173, 165 /* #2AADA5 */;
477
+ --colors-mint-70: 17, 97, 97 /* #116161 */;
478
+ --colors-neutral-10: 255, 255, 255 /* #FFFFFF */;
479
+ --colors-neutral-20: 245, 247, 250 /* #F5F7FA */;
480
+ --colors-neutral-30: 238, 241, 246 /* #EEF1F6 */;
481
+ --colors-neutral-40: 230, 233, 238 /* #E6E9EE */;
482
+ --colors-neutral-50: 196, 200, 205 /* #C4C8CD */;
483
+ --colors-neutral-60: 178, 183, 189 /* #B2B7BD */;
484
+ --colors-neutral-70: 113, 119, 128 /* #717780 */;
485
+ --colors-neutral-80: 83, 91, 102 /* #535B66 */;
486
+ --colors-neutral-90: 21, 30, 41 /* #151E29 */;
487
+ --font-size-h1: 48px;
488
+ --font-size-h2: 40px;
489
+ --font-size-h3: 30px;
490
+ --font-size-h4: 24px;
491
+ --font-size-h5: 20px;
492
+ --font-size-h6: 16px;
493
+ --font-size-subheading-large: 20px;
494
+ --font-size-subheading-medium: 16px;
495
+ --font-size-subheading-small: 14px;
496
+ --font-size-body-large: 16px;
497
+ --font-size-body-medium: 14px;
498
+ --font-size-body-small: 12px;
499
+ --font-size-code: 14px;
500
+ --font-size-label: 14px;
501
+ --font-weight-bold: 700;
502
+ --font-weight-semibold: 600;
503
+ --font-weight-normal: 400;
504
+ --font-weight-light: 300;
505
+ --palette-light-neutral-text-weakest: 178, 183, 189 /* #B2B7BD */;
506
+ --palette-light-neutral-text-weaker: 113, 119, 128 /* #717780 */;
507
+ --palette-light-neutral-text-weak: 83, 91, 102 /* #535B66 */;
508
+ --palette-light-neutral-text-default: 21, 30, 41 /* #151E29 */;
509
+ --palette-light-neutral-text-inverse: 255, 255, 255 /* #FFFFFF */;
510
+ --palette-light-neutral-bg-weak: 255, 255, 255 /* #FFFFFF */;
511
+ --palette-light-neutral-bg-default: 245, 247, 250 /* #F5F7FA */;
512
+ --palette-light-neutral-bg-strong: 230, 233, 238 /* #E6E9EE */;
513
+ --palette-light-neutral-bg-strongest: 83, 91, 102 /* #535B66 */;
514
+ --palette-light-neutral-border-weak: 238, 241, 246 /* #EEF1F6 */;
515
+ --palette-light-neutral-border-strong: 178, 183, 189 /* #B2B7BD */;
516
+ --palette-light-neutral-hover: rgba(113,119,128,0.1);
517
+ --palette-light-neutral-pressed: rgba(113,119,128,0.2);
518
+ --palette-light-primary-text: 0, 111, 214 /* #006FD6 */;
519
+ --palette-light-primary-icon: 0, 111, 214 /* #006FD6 */;
520
+ --palette-light-primary-bg-strong: 0, 111, 214 /* #006FD6 */;
521
+ --palette-light-primary-bg-weak: 230, 248, 255 /* #e6f8ff */;
522
+ --palette-light-primary-border-strong: 0, 111, 214 /* #006FD6 */;
523
+ --palette-light-primary-border-weak: 122, 209, 255 /* #7ad1ff */;
524
+ --palette-light-primary-focus: 1, 139, 255 /* #018bff */;
525
+ --palette-light-primary-hover-weak: rgba(1,139,255,0.08);
526
+ --palette-light-primary-hover-strong: 0, 86, 179 /* #0056b3 */;
527
+ --palette-light-primary-pressed-weak: rgba(1,139,255,0.12);
528
+ --palette-light-primary-pressed-strong: 0, 64, 146 /* #004092 */;
529
+ --palette-light-danger-text: 204, 37, 75 /* #cc254b */;
530
+ --palette-light-danger-icon: 204, 37, 75 /* #cc254b */;
531
+ --palette-light-danger-bg-strong: 204, 37, 75 /* #cc254b */;
532
+ --palette-light-danger-bg-weak: 255, 230, 233 /* #ffe6e9 */;
533
+ --palette-light-danger-border-strong: 204, 37, 75 /* #cc254b */;
534
+ --palette-light-danger-border-weak: 255, 184, 196 /* #ffb8c4 */;
535
+ --palette-light-danger-hover-weak: rgba(237,18,82,0.08);
536
+ --palette-light-danger-hover-strong: 161, 0, 59 /* #a1003b */;
537
+ --palette-light-danger-pressed-weak: rgba(237,18,82,0.12);
538
+ --palette-light-danger-pressed-strong: 122, 0, 49 /* #7a0031 */;
539
+ --palette-light-warning-text: 150, 108, 46 /* #966c2e */;
540
+ --palette-light-warning-icon: 150, 108, 46 /* #966c2e */;
541
+ --palette-light-warning-bg-strong: 150, 108, 46 /* #966c2e */;
542
+ --palette-light-warning-bg-weak: 255, 251, 222 /* #FFFBDE */;
543
+ --palette-light-warning-border-strong: 150, 108, 46 /* #966c2e */;
544
+ --palette-light-warning-border-weak: 255, 234, 140 /* #FFEA8C */;
545
+ --palette-light-success-text: 50, 125, 96 /* #327D60 */;
546
+ --palette-light-success-icon: 50, 125, 96 /* #327D60 */;
547
+ --palette-light-success-bg-strong: 50, 125, 96 /* #327D60 */;
548
+ --palette-light-success-bg-weak: 225, 250, 239 /* #E1FAEF */;
549
+ --palette-light-success-border-strong: 50, 125, 96 /* #327D60 */;
550
+ --palette-light-success-border-weak: 152, 237, 203 /* #98EDCB */;
551
+ --box-shadow-l2: 0px 1px 2px 0px rgba(12, 26, 37, 0.18);
552
+ --box-shadow-l3: 0px 4px 8px 0px rgba(12, 26, 37, 0.04);
553
+ --box-shadow-l4: 0px 4px 8px 0px rgba(12, 26, 37, 0.08);
554
+ --box-shadow-l5: 0px 8px 20px 0px rgba(12, 26, 37, 0.12);
555
+ --space-1: 0.25rem;
556
+ --space-2: 0.5rem;
557
+ --space-3: 0.75rem;
558
+ --space-4: 1rem;
559
+ --space-6: 1.5rem;
560
+ --space-8: 2rem;
561
+ --space-12: 3rem;
562
+ --space-16: 4rem;
563
+ --space-20: 5rem;
564
+ --space-24: 6rem;
565
+ --space-32: 8rem;
566
+ }
567
+ code,
568
+ .code {
569
+ font-size: var(--font-size-code);
570
+ font-weight: var(--font-weight-normal);
425
571
  letter-spacing: 0px;
572
+ line-height: 20px;
426
573
  }
427
- h1{
428
- font-size: 48px;
429
- line-height: 60px;
574
+ h1,
575
+ .h1 {
576
+ font-size: var(--font-size-h1);
577
+ font-weight: var(--font-weight-bold);
430
578
  letter-spacing: -0.25px;
431
- font-weight: 700;
579
+ line-height: 60px;
432
580
  }
433
- h2{
434
- font-size: 40px;
435
- line-height: 48px;
581
+ h2,
582
+ .h2 {
583
+ font-size: var(--font-size-h2);
584
+ font-weight: var(--font-weight-bold);
436
585
  letter-spacing: 0px;
437
- font-weight: 700;
586
+ line-height: 48px;
438
587
  }
439
- h3{
440
- font-size: 30px;
441
- line-height: 40px;
588
+ h3,
589
+ .h3 {
590
+ font-size: var(--font-size-h3);
591
+ font-weight: var(--font-weight-bold);
442
592
  letter-spacing: 0.25px;
443
- font-weight: 700;
593
+ line-height: 40px;
444
594
  }
445
- h4{
446
- font-size: 24px;
447
- line-height: 32px;
595
+ h4,
596
+ .h4 {
597
+ font-size: var(--font-size-h4);
598
+ font-weight: var(--font-weight-bold);
448
599
  letter-spacing: 0.25px;
449
- font-weight: 700;
600
+ line-height: 32px;
450
601
  }
451
- h5{
452
- font-size: 20px;
453
- line-height: 28px;
602
+ h5,
603
+ .h5 {
604
+ font-size: var(--font-size-h5);
605
+ font-weight: var(--font-weight-bold);
454
606
  letter-spacing: 0.25px;
455
- font-weight: 700;
607
+ line-height: 28px;
456
608
  }
457
- h6{
458
- font-size: 16px;
459
- line-height: 24px;
609
+ h6,
610
+ .h6 {
611
+ font-size: var(--font-size-h6);
612
+ font-weight: var(--font-weight-bold);
460
613
  letter-spacing: 0.25px;
461
- font-weight: 700;
614
+ line-height: 24px;
462
615
  }
463
- .subheading-large{
464
- font-size: 20px;
465
- line-height: 28px;
616
+ .subheading-large {
617
+ font-size: var(--font-size-subheading-large);
618
+ font-weight: var(--font-weight-semibold);
466
619
  letter-spacing: 0.25px;
467
- font-weight: 600;
620
+ line-height: 28px;
468
621
  }
469
- .subheading-medium{
470
- font-size: 16px;
471
- line-height: 24px;
622
+ .subheading-medium {
623
+ font-size: var(--font-size-subheading-medium);
624
+ font-weight: var(--font-weight-semibold);
472
625
  letter-spacing: 0.25px;
473
- font-weight: 600;
626
+ line-height: 24px;
474
627
  }
475
- .subheading-small{
476
- font-size: 14px;
628
+ .subheading-small {
629
+ font-size: var(--font-size-subheading-small);
630
+ font-weight: var(--font-weight-semibold);
631
+ letter-spacing: 0.25px;
477
632
  line-height: 20px;
478
- letter-spacing: 0px;
479
- font-weight: 600;
480
633
  }
481
- .body-large{
482
- font-size: 16px;
634
+ .body-large {
635
+ font-size: var(--font-size-body-large);
636
+ font-weight: var(--font-weight-normal);
637
+ letter-spacing: 0.25px;
483
638
  line-height: 24px;
484
- letter-spacing: 0px;
485
- font-weight: 400;
486
639
  }
487
- .body-medium{
488
- font-size: 14px;
640
+ .body-medium {
641
+ font-size: var(--font-size-body-medium);
642
+ font-weight: var(--font-weight-normal);
643
+ letter-spacing: 0.25px;
489
644
  line-height: 20px;
490
- letter-spacing: 0px;
491
- font-weight: 400;
492
645
  }
493
- .body-small{
494
- font-size: 12px;
646
+ .body-small {
647
+ font-size: var(--font-size-body-small);
648
+ font-weight: var(--font-weight-normal);
649
+ letter-spacing: 0.25px;
495
650
  line-height: 20px;
496
- letter-spacing: 0px;
497
- font-weight: 400;
498
651
  }
499
- .label{
500
- font-size: 14px;
501
- line-height: 20px;
652
+ .label {
653
+ font-size: var(--font-size-label);
654
+ font-weight: var(--font-weight-bold);
502
655
  letter-spacing: 0px;
503
- font-weight: 700;
656
+ line-height: 20px;
504
657
  }
505
658
  /**
506
659
  *
@@ -572,9 +725,10 @@ h6{
572
725
  padding-right: 0.75rem;
573
726
  padding-top: 0.25rem;
574
727
  padding-bottom: 0.25rem;
575
- font-size: 14px;
576
- line-height: 20px;
728
+ font-size: var(--font-size-label);
729
+ font-weight: var(--font-weight-bold);
577
730
  letter-spacing: 0px;
731
+ line-height: 20px;
578
732
  }
579
733
  .ndl-btn.regular{
580
734
  height: 2.25rem;
@@ -582,9 +736,10 @@ h6{
582
736
  padding-right: 1.5rem;
583
737
  padding-top: 0.5rem;
584
738
  padding-bottom: 0.5rem;
585
- font-size: 14px;
586
- line-height: 20px;
739
+ font-size: var(--font-size-label);
740
+ font-weight: var(--font-weight-bold);
587
741
  letter-spacing: 0px;
742
+ line-height: 20px;
588
743
  }
589
744
  .ndl-btn.large{
590
745
  height: 3rem;
@@ -592,17 +747,25 @@ h6{
592
747
  padding-right: 1.5rem;
593
748
  padding-top: 0.75rem;
594
749
  padding-bottom: 0.75rem;
595
- font-size: 16px;
750
+ font-size: var(--font-size-h6);
751
+ font-weight: var(--font-weight-bold);
752
+ letter-spacing: 0.25px;
596
753
  line-height: 24px;
597
- letter-spacing: 0px;
598
754
  }
599
755
  .ndl-btn.rectangle{
600
756
  border-radius: 6px;
601
757
  }
602
- .ndl-btn.small.rectangle{
603
- width: 1.75rem;
604
- padding: 0.5rem;
605
- }
758
+ .ndl-btn.small.rectangle {
759
+ /* This padding value is important as it provides
760
+ 14px of space on small icon buttons for the icons
761
+ to render. This 14px of space is important as the
762
+ loading-spinner is hardcoded to 14px for its
763
+ small size, meaning we need 14px of space minimum
764
+ otherwise it overflows and is off center
765
+ */
766
+ padding: 0.375rem;
767
+ width: 1.75rem;
768
+ }
606
769
  .ndl-btn.regular.rectangle{
607
770
  width: 2.25rem;
608
771
  padding: 0.5rem;
@@ -667,32 +830,38 @@ a.ndl-btn{
667
830
  border-radius: 9999px;;
668
831
  padding-left: 0.5rem;
669
832
  padding-right: 0.5rem;
670
- font-size: 14px;
671
- line-height: 20px;
672
- letter-spacing: 0px;
833
+ padding-top: 0.125rem;
834
+ padding-bottom: 0.125rem;
673
835
  font-weight: 700;
674
836
  text-transform: capitalize;
675
837
  line-height: 1.25rem;
838
+ font-size: var(--font-size-label);
839
+ font-weight: var(--font-weight-bold);
840
+ letter-spacing: 0px;
841
+ line-height: 20px;
676
842
  }
677
843
  .ndl-label .label-content{
678
844
  display: flex;
679
845
  flex-direction: row;
680
846
  align-items: center;
681
847
  gap: 0.25rem;
682
- font-family: "Nunito Sans";
683
848
  }
684
849
  .ndl-label .label-content svg{
685
850
  height: 0.5rem;
686
851
  width: 0.5rem;
687
852
  }
853
+ .ndl-label.clean .label-text{
854
+ --tw-text-opacity: 1;
855
+ color: rgb(21 30 41 / var(--tw-text-opacity));
856
+ }
688
857
  .ndl-label.outlined{
689
- border-width: 1px;
858
+ border-width: 0.5px;
690
859
  border-style: solid;
691
860
  --tw-bg-opacity: 1;
692
861
  background-color: rgb(255 255 255 / var(--tw-bg-opacity));
693
862
  }
694
863
  .ndl-label.semi-filled{
695
- border-width: 1px;
864
+ border-width: 0.5px;
696
865
  border-style: solid;
697
866
  }
698
867
  /**
@@ -716,11 +885,38 @@ a.ndl-btn{
716
885
  * along with this program. If not, see <http://www.gnu.org/licenses/>.
717
886
  */
718
887
  .ndl-tabs.underline {
719
- border-bottom-width: 1px;
720
888
  border-bottom-style: solid;
721
- --tw-border-opacity: 1;
722
- border-bottom-color: rgb(238 241 246 / var(--tw-border-opacity));
889
+ /* @apply n-border-b-light-neutral-border-weak n-text-light-neutral-text-weak n-relative; */
890
+ position: relative;
723
891
  }
892
+ /**
893
+ * We use an :after pseudo element to draw the
894
+ * underline inside the component
895
+ */
896
+ .ndl-tabs.underline.small:after {
897
+ content: '';
898
+ position: absolute;
899
+ width: 100%;
900
+ height: 1px;
901
+ bottom: 0px;
902
+ /* Hack to not be visible beneath the bottom blue border */
903
+ left: 1px;
904
+ z-index: 0;
905
+ --tw-bg-opacity: 1;
906
+ background-color: rgb(238 241 246 / var(--tw-bg-opacity));
907
+ }
908
+ .ndl-tabs.underline.large:after {
909
+ content: '';
910
+ position: absolute;
911
+ width: 100%;
912
+ height: 2px;
913
+ bottom: 0px;
914
+ /* Hack to not be visible beneath the bottom blue border */
915
+ left: 1px;
916
+ z-index: 0;
917
+ --tw-bg-opacity: 1;
918
+ background-color: rgb(238 241 246 / var(--tw-bg-opacity));
919
+ }
724
920
  .ndl-tabs .tab {
725
921
  font-weight: 600;
726
922
  background: none;
@@ -731,18 +927,20 @@ a.ndl-btn{
731
927
  padding-right: 1rem;
732
928
  padding-top: 0.5rem;
733
929
  padding-bottom: 0.5rem;
734
- font-size: 16px;
735
- line-height: 24px;
736
- letter-spacing: 0px;
930
+ font-size: var(--font-size-subheading-medium);
931
+ font-weight: var(--font-weight-semibold);
932
+ letter-spacing: 0.25px;
933
+ line-height: 24px;
737
934
  }
738
935
  .ndl-tabs .tab.small{
739
936
  padding-left: 0.5rem;
740
937
  padding-right: 0.5rem;
741
938
  padding-top: 0.25rem;
742
939
  padding-bottom: 0.25rem;
743
- font-size: 14px;
940
+ font-size: var(--font-size-subheading-small);
941
+ font-weight: var(--font-weight-semibold);
942
+ letter-spacing: 0.25px;
744
943
  line-height: 20px;
745
- letter-spacing: 0px;
746
944
  }
747
945
  .ndl-tabs .tab.small:not(:first-child){
748
946
  margin-left: 0.25rem;
@@ -761,11 +959,37 @@ a.ndl-btn{
761
959
  --tw-text-opacity: 1;
762
960
  color: rgb(178 183 189 / var(--tw-text-opacity));
763
961
  }
962
+ .ndl-tabs .tab.underline {
963
+ /* To be always above bottom border */
964
+ z-index: 1;
965
+ }
966
+ .ndl-tabs .tab.underline:not(.selected){
967
+ --tw-text-opacity: 1;
968
+ color: rgb(83 91 102 / var(--tw-text-opacity));
969
+ }
970
+ .ndl-tabs .tab.underline.disabled{
971
+ --tw-text-opacity: 1;
972
+ color: rgb(178 183 189 / var(--tw-text-opacity));
973
+ }
974
+ .ndl-tabs .tab.underline.small {
975
+ /* We need to have a total of 36px in Height */
976
+ padding-bottom: 12px;
977
+ }
978
+ .ndl-tabs .tab.underline.small .tab-underline {
979
+ height: 2px;
980
+ }
981
+ .ndl-tabs .tab.underline.large {
982
+ /* We need to have a total of 46px in Height */
983
+ padding-bottom: 14px;
984
+ }
985
+ .ndl-tabs .tab.underline.large .tab-underline {
986
+ height: 4px;
987
+ }
764
988
  .ndl-tabs .tab.underline .tab-underline {
765
- bottom: -1px;
766
989
  height: 4px;
767
990
  position: absolute;
768
991
  left: 0px;
992
+ bottom: 0px;
769
993
  width: 100%;
770
994
  border-top-left-radius: 4px;
771
995
  border-top-right-radius: 4px;
@@ -780,13 +1004,11 @@ a.ndl-btn{
780
1004
  }
781
1005
  .ndl-tabs .tab.underline:hover:not(.disabled):not(.selected) .tab-underline{
782
1006
  --tw-bg-opacity: 1;
783
- background-color: rgb(113 119 128 / var(--tw-bg-opacity));
784
- opacity: 0.1;
1007
+ background-color: rgb(230 233 238 / var(--tw-bg-opacity));
785
1008
  }
786
1009
  .ndl-tabs .tab.underline:active:not(.disabled):not(.selected) .tab-underline{
787
1010
  --tw-bg-opacity: 1;
788
- background-color: rgb(113 119 128 / var(--tw-bg-opacity));
789
- opacity: 0.2;
1011
+ background-color: rgb(230 233 238 / var(--tw-bg-opacity));
790
1012
  }
791
1013
  .ndl-tabs .tab.underline.selected:not(.disabled){
792
1014
  --tw-text-opacity: 1;
@@ -804,6 +1026,12 @@ a.ndl-btn{
804
1026
  border-radius: 4px;
805
1027
  padding-top: 0.25rem;
806
1028
  padding-bottom: 0.25rem;
1029
+ --tw-text-opacity: 1;
1030
+ color: rgb(83 91 102 / var(--tw-text-opacity));
1031
+ }
1032
+ .ndl-tabs .tab.filled.disabled{
1033
+ --tw-text-opacity: 1;
1034
+ color: rgb(178 183 189 / var(--tw-text-opacity));
807
1035
  }
808
1036
  .ndl-tabs .tab.filled:focus-visible {
809
1037
  outline: none;
@@ -864,10 +1092,10 @@ a.ndl-btn{
864
1092
  }
865
1093
  .ndl-alert.with-description .alert-title{
866
1094
  margin: 0px;
867
- font-size: 20px;
868
- line-height: 28px;
1095
+ font-size: var(--font-size-h5);
1096
+ font-weight: var(--font-weight-bold);
869
1097
  letter-spacing: 0.25px;
870
- font-weight: 700;
1098
+ line-height: 28px;
871
1099
  }
872
1100
  .ndl-alert .alert-icon{
873
1101
  height: 1.5rem;
@@ -889,12 +1117,12 @@ a.ndl-btn{
889
1117
  }
890
1118
  .ndl-alert .alert-actions a{
891
1119
  cursor: pointer;
892
- font-size: 16px;
893
- line-height: 24px;
894
- letter-spacing: 0px;
895
- font-weight: 700;
896
1120
  -webkit-text-decoration-line: underline;
897
1121
  text-decoration-line: underline;
1122
+ font-size: var(--font-size-label);
1123
+ font-weight: var(--font-weight-bold);
1124
+ letter-spacing: 0px;
1125
+ line-height: 20px;
898
1126
  }
899
1127
  .ndl-alert.info{
900
1128
  --tw-bg-opacity: 1;
@@ -981,11 +1209,12 @@ a.ndl-btn{
981
1209
  padding-right: 0.5rem;
982
1210
  padding-top: 0.75rem;
983
1211
  padding-bottom: 0.75rem;
984
- font-size: 12px;
985
- line-height: 20px;
986
- letter-spacing: 0px;
987
1212
  --tw-text-opacity: 1;
988
1213
  color: rgb(255 255 255 / var(--tw-text-opacity));
1214
+ font-size: var(--font-size-body-small);
1215
+ font-weight: var(--font-weight-normal);
1216
+ letter-spacing: 0.25px;
1217
+ line-height: 20px;
989
1218
  }
990
1219
  .ndl-tooltip-wrapper .tooltip-triangle{
991
1220
  position: absolute;
@@ -1086,7 +1315,7 @@ a.ndl-btn{
1086
1315
  .ndl-form-item{
1087
1316
  cursor: pointer;
1088
1317
  }
1089
- .ndl-form-item input[type='checkbox'], .ndl-form-item input[type='radio']{
1318
+ .ndl-form-item input[type='checkbox'][role='checkbox'], .ndl-form-item input[type='radio']{
1090
1319
  cursor: pointer;
1091
1320
  position: relative;
1092
1321
  height: 1rem;
@@ -1094,59 +1323,84 @@ a.ndl-btn{
1094
1323
  border-width: 1px;
1095
1324
  border-style: solid;
1096
1325
  --tw-border-opacity: 1;
1097
- border-color: rgb(196 200 205 / var(--tw-border-opacity));
1326
+ border-color: rgb(113 119 128 / var(--tw-border-opacity));
1098
1327
  border-radius: 4px;
1099
1328
  -webkit-appearance: none;
1100
1329
  -moz-appearance: none;
1101
1330
  appearance: none;
1102
1331
  }
1103
- .ndl-form-item input[type='checkbox']:hover:enabled, .ndl-form-item input[type='radio']:hover:enabled{
1104
- outline-style: solid;
1105
- outline-width: 10px;
1106
- outline-offset: 0px;
1107
- outline-color: rgb(196 200 205 / 0.1);
1108
- }
1109
- .ndl-form-item input[type='checkbox']:focus:enabled, .ndl-form-item input[type='radio']:focus:enabled{
1332
+ .ndl-form-item input[type='checkbox'][role='checkbox']:not(:disabled):hover:before, .ndl-form-item input[type='radio']:not(:disabled):hover:before {
1333
+ content: '';
1334
+ position: absolute;
1335
+ width: calc(100% + 22px);
1336
+ height: calc(100% + 22px);
1337
+ border-radius: 100%;
1338
+ top: -11px;
1339
+ left: -11px;
1340
+ z-index: 1;
1341
+ background-color: rgba(113,119,128,0.1);
1342
+ }
1343
+ .ndl-form-item input[type='checkbox'][role='checkbox']:active:before, .ndl-form-item input[type='radio']:active:before {
1344
+ content: '';
1345
+ position: absolute;
1346
+ width: calc(100% + 22px);
1347
+ height: calc(100% + 22px);
1348
+ border-radius: 100%;
1349
+ top: -11px;
1350
+ left: -11px;
1351
+ z-index: 1;
1352
+ background-color: rgba(113,119,128,0.2);
1353
+ }
1354
+ .ndl-form-item input[type='checkbox'][role='checkbox']:focus-visible, .ndl-form-item input[type='radio']:focus-visible{
1110
1355
  outline-style: solid;
1111
1356
  outline-width: 2px;
1112
1357
  outline-offset: 1px;
1113
- outline-color: #006FD6;
1114
- }
1115
- .ndl-form-item input[type='checkbox']:active:enabled, .ndl-form-item input[type='radio']:active:enabled{
1116
- outline-style: solid;
1117
- outline-width: 10px;
1118
- outline-offset: 0px;
1119
- outline-color: rgb(196 200 205 / 0.2);
1358
+ outline-color: #018bff;
1120
1359
  }
1121
- .ndl-form-item input[type='checkbox']:checked, .ndl-form-item input[type='radio']:checked{
1360
+ .ndl-form-item input[type='checkbox'][role='checkbox']:checked, .ndl-form-item input[type='radio']:checked{
1122
1361
  --tw-border-opacity: 1;
1123
1362
  border-color: rgb(0 111 214 / var(--tw-border-opacity));
1124
1363
  --tw-bg-opacity: 1;
1125
1364
  background-color: rgb(0 111 214 / var(--tw-bg-opacity));
1126
1365
  }
1127
- .ndl-form-item input[type='checkbox']:checked:hover, .ndl-form-item input[type='radio']:checked:hover{
1128
- outline-color: rgb(0 111 214 / 0.1);
1129
- }
1130
- .ndl-form-item input[type='checkbox']:checked:active, .ndl-form-item input[type='radio']:checked:active{
1131
- outline-style: solid;
1132
- outline-color: rgb(0 111 214 / 0.2);
1133
- }
1134
- .ndl-form-item input[type='checkbox']:disabled, .ndl-form-item input[type='radio']:disabled{
1366
+ .ndl-form-item input[type='checkbox'][role='checkbox']:checked:not(:disabled):hover:before, .ndl-form-item input[type='radio']:checked:not(:disabled):hover:before {
1367
+ content: '';
1368
+ position: absolute;
1369
+ width: calc(100% + 22px);
1370
+ height: calc(100% + 22px);
1371
+ border-radius: 100%;
1372
+ top: -11px;
1373
+ left: -11px;
1374
+ z-index: 1;
1375
+ background-color: rgba(1,139,255,0.08);
1376
+ }
1377
+ .ndl-form-item input[type='checkbox'][role='checkbox']:checked:active:before, .ndl-form-item input[type='radio']:checked:active:before {
1378
+ content: '';
1379
+ position: absolute;
1380
+ width: calc(100% + 22px);
1381
+ height: calc(100% + 22px);
1382
+ border-radius: 100%;
1383
+ top: -11px;
1384
+ left: -11px;
1385
+ z-index: 1;
1386
+ background-color: rgba(1,139,255,0.12);
1387
+ }
1388
+ .ndl-form-item input[type='checkbox'][role='checkbox']:disabled, .ndl-form-item input[type='radio']:disabled{
1135
1389
  cursor: not-allowed;
1136
1390
  --tw-border-opacity: 1;
1137
- border-color: rgb(230 233 238 / var(--tw-border-opacity));
1391
+ border-color: rgb(178 183 189 / var(--tw-border-opacity));
1138
1392
  }
1139
- .ndl-form-item input[type='checkbox']:disabled:checked, .ndl-form-item input[type='radio']:disabled:checked{
1393
+ .ndl-form-item input[type='checkbox'][role='checkbox']:disabled:checked, .ndl-form-item input[type='radio']:disabled:checked{
1140
1394
  --tw-bg-opacity: 1;
1141
- background-color: rgb(230 233 238 / var(--tw-bg-opacity));
1395
+ background-color: rgb(178 183 189 / var(--tw-bg-opacity));
1142
1396
  }
1143
1397
  /* Checkbox */
1144
1398
  .ndl-form-item input[type='checkbox']::after {
1145
1399
  font-size: 14px;
1146
1400
  width: 100%;
1147
1401
  position: absolute;
1148
- top: 0;
1149
- left: 0;
1402
+ top: -0.5px;
1403
+ left: 0.5px;
1150
1404
  color: #fff;
1151
1405
  }
1152
1406
  .ndl-form-item input[type='checkbox']:checked::after {
@@ -1163,20 +1417,25 @@ a.ndl-btn{
1163
1417
  }
1164
1418
  .ndl-form-item input[type='checkbox']:disabled{
1165
1419
  --tw-border-opacity: 1;
1166
- border-color: rgb(230 233 238 / var(--tw-border-opacity));
1167
- --tw-bg-opacity: 1;
1168
- background-color: rgb(230 233 238 / var(--tw-bg-opacity));
1420
+ border-color: rgb(178 183 189 / var(--tw-border-opacity));
1169
1421
  }
1170
1422
  /* Switch */
1171
1423
  .ndl-form-item input[type='checkbox'][role='switch'] {
1172
1424
  --thumb-size: 1rem;
1173
1425
  --track-size: calc(var(--thumb-size) * 2);
1174
- border-radius: 9999px;;
1175
- --tw-bg-opacity: 1;
1176
- background-color: rgb(230 233 238 / var(--tw-bg-opacity));
1177
- border-style: none;
1426
+ position: relative;
1178
1427
  display: grid;
1428
+ height: 1rem;
1429
+ width: 1rem;
1430
+ cursor: pointer;
1431
+ -webkit-appearance: none;
1432
+ -moz-appearance: none;
1433
+ appearance: none;
1179
1434
  align-items: center;
1435
+ border-radius: 9999px;;
1436
+ border-style: none;
1437
+ --tw-bg-opacity: 1;
1438
+ background-color: rgb(178 183 189 / var(--tw-bg-opacity));
1180
1439
 
1181
1440
  grid: [track] 1fr / [track] 1fr;
1182
1441
  padding: 2px;
@@ -1187,11 +1446,27 @@ a.ndl-btn{
1187
1446
  box-sizing: content-box;
1188
1447
  transition: background-color 0.25s ease;
1189
1448
  }
1190
- .ndl-form-item input[type='checkbox'][role='switch']:hover:enabled{
1449
+ .ndl-form-item input[type='checkbox'][role='switch']:hover:checked:not(:disabled){
1450
+ outline-style: solid;
1451
+ outline-width: 3px;
1452
+ outline-color: rgba(1,139,255,0.08);
1453
+ }
1454
+ .ndl-form-item input[type='checkbox'][role='switch']:hover:not(:checked):not(:disabled){
1455
+ outline-style: solid;
1456
+ outline-width: 3px;
1457
+ outline-color: rgba(113,119,128,0.1);
1458
+ }
1459
+ .ndl-form-item input[type='checkbox'][role='switch']:active:checked{
1460
+ outline-style: solid;
1461
+ outline-width: 3px;
1462
+ outline-color: rgba(1,139,255,0.12);
1463
+ }
1464
+ .ndl-form-item input[type='checkbox'][role='switch']:active:not(:checked){
1465
+ outline-style: solid;
1191
1466
  outline-width: 3px;
1192
- outline-offset: 0px;
1467
+ outline-color: rgba(113,119,128,0.2);
1193
1468
  }
1194
- .ndl-form-item input[type='checkbox'][role='switch']:focus:enabled{
1469
+ .ndl-form-item input[type='checkbox'][role='switch']:focus-visible:enabled{
1195
1470
  outline-width: 2px;
1196
1471
  outline-offset: 1px;
1197
1472
  }
@@ -1206,6 +1481,12 @@ a.ndl-btn{
1206
1481
  transform: translateX(0);
1207
1482
  --tw-bg-opacity: 1;
1208
1483
  background-color: rgb(255 255 255 / var(--tw-bg-opacity));
1484
+ --tw-shadow: 0px 1px 2px 0px rgba(12, 26, 37, 0.18);
1485
+ --tw-shadow-colored: 0px 1px 2px 0px var(--tw-shadow-color);
1486
+ box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
1487
+ }
1488
+ .ndl-form-item input[type='checkbox'][role='switch']:disabled::before {
1489
+ box-shadow: none;
1209
1490
  }
1210
1491
  .ndl-form-item input[type='checkbox'][role='switch']::after {
1211
1492
  content: '';
@@ -1237,7 +1518,7 @@ a.ndl-btn{
1237
1518
  .ndl-form-item input[type='radio']:checked{
1238
1519
  border-width: 2px;
1239
1520
  }
1240
- .ndl-form-item input[type='radio']:checked::before {
1521
+ .ndl-form-item input[type='radio']:checked::after {
1241
1522
  content: '';
1242
1523
  border: 2px solid white;
1243
1524
  width: 100%;
@@ -1253,6 +1534,10 @@ a.ndl-btn{
1253
1534
  align-items: center;
1254
1535
  -moz-column-gap: 0.75rem;
1255
1536
  column-gap: 0.75rem;
1537
+ font-size: var(--font-size-body-medium);
1538
+ font-weight: var(--font-weight-normal);
1539
+ letter-spacing: 0.25px;
1540
+ line-height: 20px;
1256
1541
  }
1257
1542
  .ndl-form-item .form-item-label.fluid{
1258
1543
  display: flex;
@@ -1264,7 +1549,7 @@ a.ndl-btn{
1264
1549
  .ndl-form-item.disabled .form-item-label{
1265
1550
  cursor: not-allowed;
1266
1551
  --tw-text-opacity: 1;
1267
- color: rgb(230 233 238 / var(--tw-text-opacity));
1552
+ color: rgb(178 183 189 / var(--tw-text-opacity));
1268
1553
  }
1269
1554
  /**
1270
1555
  *
@@ -1370,49 +1655,56 @@ a.ndl-btn{
1370
1655
  }
1371
1656
  .ndl-progress-bar-wrapper .details .estimated-time-heading{
1372
1657
  margin-right: 5px;
1658
+ font-weight: 300;
1373
1659
  }
1374
1660
  .ndl-progress-bar-wrapper .details .estimated-time{
1375
1661
  font-weight: 600;
1376
1662
  }
1377
- .ndl-progress-bar-wrapper.large .heading{
1378
- font-size: 16px;
1663
+ .ndl-progress-bar-wrapper.large .heading {
1664
+ font-size: var(--font-size-body-large);
1665
+ font-weight: var(--font-weight-normal);
1666
+ letter-spacing: 0.25px;
1379
1667
  line-height: 24px;
1380
- letter-spacing: 0px;
1381
1668
  }
1382
- .ndl-progress-bar-wrapper.large .progress-number{
1383
- font-size: 16px;
1384
- line-height: 24px;
1669
+ .ndl-progress-bar-wrapper.large .progress-number {
1670
+ font-size: var(--font-size-h6);
1671
+ font-weight: var(--font-weight-bold);
1385
1672
  letter-spacing: 0.25px;
1673
+ line-height: 24px;
1386
1674
  }
1387
1675
  .ndl-progress-bar-wrapper.large .progress-bar-container, .ndl-progress-bar-wrapper.large .progress-bar{
1388
1676
  height: 0.5rem;
1389
1677
  min-width: 3%;
1390
1678
  border-radius: 6px;
1391
1679
  }
1392
- .ndl-progress-bar-wrapper.large .details{
1393
- font-size: 14px;
1680
+ .ndl-progress-bar-wrapper.large .details {
1681
+ font-size: var(--font-size-body-medium);
1682
+ font-weight: var(--font-weight-normal);
1683
+ letter-spacing: 0.25px;
1394
1684
  line-height: 20px;
1395
- letter-spacing: 0px;
1396
1685
  }
1397
- .ndl-progress-bar-wrapper.small .heading{
1398
- font-size: 14px;
1686
+ .ndl-progress-bar-wrapper.small .heading {
1687
+ font-size: var(--font-size-body-medium);
1688
+ font-weight: var(--font-weight-normal);
1689
+ letter-spacing: 0.25px;
1399
1690
  line-height: 20px;
1400
- letter-spacing: 0px;
1401
1691
  }
1402
- .ndl-progress-bar-wrapper.small .progress-number{
1403
- font-size: 14px;
1692
+ .ndl-progress-bar-wrapper.small .progress-number {
1693
+ font-size: var(--font-size-body-medium);
1694
+ font-weight: var(--font-weight-normal);
1695
+ letter-spacing: 0.25px;
1404
1696
  line-height: 20px;
1405
- letter-spacing: 0px;
1406
1697
  }
1407
1698
  .ndl-progress-bar-wrapper.small .progress-bar-container, .ndl-progress-bar-wrapper.small .progress-bar{
1408
1699
  height: 0.25rem;
1409
1700
  min-width: 2%;
1410
1701
  border-radius: 4px;
1411
1702
  }
1412
- .ndl-progress-bar-wrapper.small .details{
1413
- font-size: 12px;
1703
+ .ndl-progress-bar-wrapper.small .details {
1704
+ font-size: var(--font-size-body-small);
1705
+ font-weight: var(--font-weight-normal);
1706
+ letter-spacing: 0.25px;
1414
1707
  line-height: 20px;
1415
- letter-spacing: 0px;
1416
1708
  }
1417
1709
  /**
1418
1710
  *
@@ -1446,10 +1738,11 @@ a.ndl-btn{
1446
1738
  padding-top: 0.5rem;
1447
1739
  padding-bottom: 0.5rem;
1448
1740
  --tw-bg-opacity: 1;
1449
- background-color: rgb(245 247 250 / var(--tw-bg-opacity));
1450
- font-size: 14px;
1741
+ background-color: rgb(238 241 246 / var(--tw-bg-opacity));
1742
+ font-size: var(--font-size-body-medium);
1743
+ font-weight: var(--font-weight-normal);
1744
+ letter-spacing: 0.25px;
1451
1745
  line-height: 20px;
1452
- letter-spacing: 0px;
1453
1746
  }
1454
1747
  .ndl-tag .remove-icon{
1455
1748
  height: 1rem;
@@ -1494,15 +1787,17 @@ a.ndl-btn{
1494
1787
  }
1495
1788
  .ndl-menu.large .menu-item-title{
1496
1789
  width: 100%;
1497
- font-size: 16px;
1498
- line-height: 24px;
1790
+ font-size: var(--font-size-h6);
1791
+ font-weight: var(--font-weight-bold);
1499
1792
  letter-spacing: 0.25px;
1793
+ line-height: 24px;
1500
1794
  }
1501
1795
  .ndl-menu.large .menu-item-description{
1502
1796
  padding-top: 0.25rem;
1503
- font-size: 14px;
1797
+ font-size: var(--font-size-body-medium);
1798
+ font-weight: var(--font-weight-normal);
1799
+ letter-spacing: 0.25px;
1504
1800
  line-height: 20px;
1505
- letter-spacing: 0px;
1506
1801
  }
1507
1802
  .ndl-menu.large .menu-item-icon{
1508
1803
  height: 1rem;
@@ -1512,20 +1807,23 @@ a.ndl-btn{
1512
1807
  padding-left: 1.25rem;
1513
1808
  padding-right: 1.25rem;
1514
1809
  padding-top: 0.75rem;
1515
- font-size: 16px;
1516
- line-height: 24px;
1810
+ font-size: var(--font-size-h6);
1811
+ font-weight: var(--font-weight-bold);
1517
1812
  letter-spacing: 0.25px;
1813
+ line-height: 24px;
1518
1814
  }
1519
- .ndl-menu.large .menu-header .menu-header-title{
1520
- font-size: 20px;
1521
- line-height: 28px;
1815
+ .ndl-menu.large .menu-header .menu-header-title {
1816
+ font-size: var(--font-size-h5);
1817
+ font-weight: var(--font-weight-bold);
1522
1818
  letter-spacing: 0.25px;
1819
+ line-height: 28px;
1523
1820
  }
1524
1821
  .ndl-menu.large .menu-header .menu-header-description{
1525
1822
  padding-top: 0.25rem;
1526
- font-size: 14px;
1823
+ font-size: var(--font-size-body-medium);
1824
+ font-weight: var(--font-weight-normal);
1825
+ letter-spacing: 0.25px;
1527
1826
  line-height: 20px;
1528
- letter-spacing: 0px;
1529
1827
  }
1530
1828
  .ndl-menu.large .menu-header .menu-header-icon {
1531
1829
  width: 22px;
@@ -1541,11 +1839,12 @@ a.ndl-btn{
1541
1839
  z-index: 2;
1542
1840
  cursor: pointer;
1543
1841
  padding: 0.5rem;
1544
- font-size: 14px;
1545
- line-height: 20px;
1546
- letter-spacing: 0px;
1547
1842
  outline: 2px solid transparent;
1548
1843
  outline-offset: 2px;
1844
+ font-size: var(--font-size-body-medium);
1845
+ font-weight: var(--font-weight-normal);
1846
+ letter-spacing: 0.25px;
1847
+ line-height: 20px;
1549
1848
  }
1550
1849
  .ndl-menu .menu-item:hover:not(.disabled), .ndl-menu .menu-item:focus-visible{
1551
1850
  border-radius: 8px;
@@ -1565,16 +1864,18 @@ a.ndl-btn{
1565
1864
  }
1566
1865
  .ndl-menu .menu-item-title{
1567
1866
  width: 100%;
1568
- font-size: 14px;
1867
+ font-size: var(--font-size-body-medium);
1868
+ font-weight: var(--font-weight-normal);
1869
+ letter-spacing: 0.25px;
1569
1870
  line-height: 20px;
1570
- letter-spacing: 0px;
1571
1871
  }
1572
1872
  .ndl-menu .menu-item-description{
1573
- font-size: 12px;
1574
- line-height: 20px;
1575
- letter-spacing: 0px;
1576
1873
  --tw-text-opacity: 1;
1577
1874
  color: rgb(113 119 128 / var(--tw-text-opacity));
1875
+ font-size: var(--font-size-body-small);
1876
+ font-weight: var(--font-weight-normal);
1877
+ letter-spacing: 0.25px;
1878
+ line-height: 20px;
1578
1879
  }
1579
1880
  .ndl-menu .menu-item-icon{
1580
1881
  margin-right: 0.5rem;
@@ -1588,17 +1889,19 @@ a.ndl-btn{
1588
1889
  padding-top: 0.5rem;
1589
1890
  }
1590
1891
  .ndl-menu .menu-header .menu-header-title{
1591
- font-size: 16px;
1592
- line-height: 24px;
1593
- letter-spacing: 0.25px;
1594
1892
  font-weight: 700;
1893
+ font-size: var(--font-size-h6);
1894
+ font-weight: var(--font-weight-bold);
1895
+ letter-spacing: 0.25px;
1896
+ line-height: 24px;
1595
1897
  }
1596
1898
  .ndl-menu .menu-header .menu-header-description{
1597
- font-size: 12px;
1598
- line-height: 20px;
1599
- letter-spacing: 0px;
1600
1899
  --tw-text-opacity: 1;
1601
1900
  color: rgb(113 119 128 / var(--tw-text-opacity));
1901
+ font-size: var(--font-size-body-small);
1902
+ font-weight: var(--font-weight-normal);
1903
+ letter-spacing: 0.25px;
1904
+ line-height: 20px;
1602
1905
  }
1603
1906
  .ndl-menu .menu-header .menu-header-icon {
1604
1907
  width: 17px;
@@ -1697,16 +2000,16 @@ a.ndl-btn{
1697
2000
  .ndl-view-selector > button{
1698
2001
  cursor: pointer;
1699
2002
  border-radius: 8px;
1700
- --tw-ring-inset: inset;
1701
- --tw-ring-opacity: 1;
1702
- --tw-ring-color: rgb(1 139 255 / var(--tw-ring-opacity));
1703
2003
  }
1704
- .ndl-view-selector > button:focus{
2004
+ .ndl-view-selector > button :focus-visible{
1705
2005
  outline: 2px solid transparent;
1706
2006
  outline-offset: 2px;
1707
2007
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
1708
2008
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
1709
2009
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
2010
+ --tw-ring-inset: inset;
2011
+ --tw-ring-opacity: 1;
2012
+ --tw-ring-color: rgb(1 139 255 / var(--tw-ring-opacity));
1710
2013
  }
1711
2014
  .ndl-view-selector > button:hover{
1712
2015
  background-color: rgba(113,119,128,0.1);
@@ -1729,9 +2032,10 @@ a.ndl-btn{
1729
2032
  }
1730
2033
  .ndl-view-selector.large{
1731
2034
  height: 3rem;
1732
- font-size: 16px;
1733
- line-height: 24px;
2035
+ font-size: var(--font-size-subheading-medium);
2036
+ font-weight: var(--font-weight-semibold);
1734
2037
  letter-spacing: 0.25px;
2038
+ line-height: 24px;
1735
2039
  }
1736
2040
  .ndl-view-selector.large .selector-item{
1737
2041
  padding-left: 1rem;
@@ -1747,9 +2051,10 @@ a.ndl-btn{
1747
2051
  }
1748
2052
  .ndl-view-selector.small{
1749
2053
  height: 2.25rem;
1750
- font-size: 14px;
2054
+ font-size: var(--font-size-subheading-small);
2055
+ font-weight: var(--font-weight-semibold);
2056
+ letter-spacing: 0.25px;
1751
2057
  line-height: 20px;
1752
- letter-spacing: 0px;
1753
2058
  }
1754
2059
  .ndl-view-selector.small .selector-item{
1755
2060
  padding-left: 0.75rem;
@@ -1835,7 +2140,7 @@ a.ndl-btn{
1835
2140
  border-style: solid;
1836
2141
  border-color: rgb(230 233 238 / var(--tw-border-opacity));
1837
2142
  --tw-border-opacity: 1;
1838
- border-bottom-color: rgb(0 111 214 / var(--tw-border-opacity));
2143
+ border-bottom-color: rgb(1 139 255 / var(--tw-border-opacity));
1839
2144
  }
1840
2145
  .n-m-auto{
1841
2146
  margin: auto;
@@ -1844,6 +2149,10 @@ a.ndl-btn{
1844
2149
  margin-top: 0.5rem;
1845
2150
  margin-bottom: 0.5rem;
1846
2151
  }
2152
+ .n-my-auto{
2153
+ margin-top: auto;
2154
+ margin-bottom: auto;
2155
+ }
1847
2156
  .n-mx-4{
1848
2157
  margin-left: 1rem;
1849
2158
  margin-right: 1rem;
@@ -1852,6 +2161,10 @@ a.ndl-btn{
1852
2161
  margin-top: 1.25rem;
1853
2162
  margin-bottom: 1.25rem;
1854
2163
  }
2164
+ .n-mx-3{
2165
+ margin-left: 0.75rem;
2166
+ margin-right: 0.75rem;
2167
+ }
1855
2168
  .n-mr-1{
1856
2169
  margin-right: 0.25rem;
1857
2170
  }
@@ -1870,38 +2183,44 @@ a.ndl-btn{
1870
2183
  .n-h-5{
1871
2184
  height: 1.25rem;
1872
2185
  }
1873
- .n-h-10{
1874
- height: 2.5rem;
2186
+ .n-h-4{
2187
+ height: 1rem;
1875
2188
  }
1876
2189
  .n-h-6{
1877
2190
  height: 1.5rem;
1878
2191
  }
2192
+ .n-h-10{
2193
+ height: 2.5rem;
2194
+ }
1879
2195
  .n-h-full{
1880
2196
  height: 100%;
1881
2197
  }
1882
2198
  .n-h-12{
1883
2199
  height: 3rem;
1884
2200
  }
1885
- .n-h-52{
1886
- height: 13rem;
2201
+ .n-h-36{
2202
+ height: 9rem;
1887
2203
  }
1888
2204
  .n-w-5{
1889
2205
  width: 1.25rem;
1890
2206
  }
1891
- .n-w-10{
1892
- width: 2.5rem;
2207
+ .n-w-4{
2208
+ width: 1rem;
1893
2209
  }
1894
2210
  .n-w-6{
1895
2211
  width: 1.5rem;
1896
2212
  }
2213
+ .n-w-10{
2214
+ width: 2.5rem;
2215
+ }
1897
2216
  .n-w-full{
1898
2217
  width: 100%;
1899
2218
  }
1900
- .n-w-60{
1901
- width: 15rem;
2219
+ .n-w-48{
2220
+ width: 12rem;
1902
2221
  }
1903
- .n-w-52{
1904
- width: 13rem;
2222
+ .n-w-36{
2223
+ width: 9rem;
1905
2224
  }
1906
2225
  .n-transform{
1907
2226
  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));
@@ -1924,12 +2243,12 @@ a.ndl-btn{
1924
2243
  .n-justify-between{
1925
2244
  justify-content: space-between;
1926
2245
  }
2246
+ .n-gap-6{
2247
+ gap: 1.5rem;
2248
+ }
1927
2249
  .n-gap-12{
1928
2250
  gap: 3rem;
1929
2251
  }
1930
- .n-gap-2{
1931
- gap: 0.5rem;
1932
- }
1933
2252
  .n-gap-x-12{
1934
2253
  -moz-column-gap: 3rem;
1935
2254
  column-gap: 3rem;
@@ -1953,30 +2272,210 @@ a.ndl-btn{
1953
2272
  .n-whitespace-nowrap{
1954
2273
  white-space: nowrap;
1955
2274
  }
2275
+ .n-rounded-sm{
2276
+ border-radius: 4px;
2277
+ }
1956
2278
  .n-rounded-lg{
1957
2279
  border-radius: 8px;
1958
2280
  }
1959
- .n-border-neutral-70{
2281
+ .n-rounded-md{
2282
+ border-radius: 6px;
2283
+ }
2284
+ .n-border-light-neutral-text-weakest{
2285
+ --tw-border-opacity: 1;
2286
+ border-color: rgb(178 183 189 / var(--tw-border-opacity));
2287
+ }
2288
+ .n-border-light-neutral-text-weaker{
1960
2289
  --tw-border-opacity: 1;
1961
2290
  border-color: rgb(113 119 128 / var(--tw-border-opacity));
1962
2291
  }
1963
- .n-border-neutral-60{
2292
+ .n-border-light-neutral-text-weak{
1964
2293
  --tw-border-opacity: 1;
1965
- border-color: rgb(178 183 189 / var(--tw-border-opacity));
2294
+ border-color: rgb(83 91 102 / var(--tw-border-opacity));
1966
2295
  }
1967
- .n-border-b-neutral-40{
2296
+ .n-border-light-neutral-text-default{
1968
2297
  --tw-border-opacity: 1;
1969
- border-bottom-color: rgb(230 233 238 / var(--tw-border-opacity));
2298
+ border-color: rgb(21 30 41 / var(--tw-border-opacity));
1970
2299
  }
1971
- .n-bg-primary-10{
1972
- --tw-bg-opacity: 1;
1973
- background-color: rgb(230 248 255 / var(--tw-bg-opacity));
2300
+ .n-border-light-neutral-text-inverse{
2301
+ --tw-border-opacity: 1;
2302
+ border-color: rgb(255 255 255 / var(--tw-border-opacity));
1974
2303
  }
1975
- .n-bg-primary-20{
1976
- --tw-bg-opacity: 1;
1977
- background-color: rgb(163 226 255 / var(--tw-bg-opacity));
2304
+ .n-border-light-neutral-bg-weak{
2305
+ --tw-border-opacity: 1;
2306
+ border-color: rgb(255 255 255 / var(--tw-border-opacity));
1978
2307
  }
1979
- .n-bg-primary-30{
2308
+ .n-border-light-neutral-bg-default{
2309
+ --tw-border-opacity: 1;
2310
+ border-color: rgb(245 247 250 / var(--tw-border-opacity));
2311
+ }
2312
+ .n-border-light-neutral-bg-strong{
2313
+ --tw-border-opacity: 1;
2314
+ border-color: rgb(230 233 238 / var(--tw-border-opacity));
2315
+ }
2316
+ .n-border-light-neutral-bg-strongest{
2317
+ --tw-border-opacity: 1;
2318
+ border-color: rgb(83 91 102 / var(--tw-border-opacity));
2319
+ }
2320
+ .n-border-light-neutral-border-weak{
2321
+ --tw-border-opacity: 1;
2322
+ border-color: rgb(238 241 246 / var(--tw-border-opacity));
2323
+ }
2324
+ .n-border-light-neutral-border-strong{
2325
+ --tw-border-opacity: 1;
2326
+ border-color: rgb(178 183 189 / var(--tw-border-opacity));
2327
+ }
2328
+ .n-border-light-neutral-hover{
2329
+ border-color: rgba(113,119,128,0.1);
2330
+ }
2331
+ .n-border-light-neutral-pressed{
2332
+ border-color: rgba(113,119,128,0.2);
2333
+ }
2334
+ .n-border-light-primary-text{
2335
+ --tw-border-opacity: 1;
2336
+ border-color: rgb(0 111 214 / var(--tw-border-opacity));
2337
+ }
2338
+ .n-border-light-primary-icon{
2339
+ --tw-border-opacity: 1;
2340
+ border-color: rgb(0 111 214 / var(--tw-border-opacity));
2341
+ }
2342
+ .n-border-light-primary-bg-strong{
2343
+ --tw-border-opacity: 1;
2344
+ border-color: rgb(0 111 214 / var(--tw-border-opacity));
2345
+ }
2346
+ .n-border-light-primary-bg-weak{
2347
+ --tw-border-opacity: 1;
2348
+ border-color: rgb(230 248 255 / var(--tw-border-opacity));
2349
+ }
2350
+ .n-border-light-primary-border-strong{
2351
+ --tw-border-opacity: 1;
2352
+ border-color: rgb(0 111 214 / var(--tw-border-opacity));
2353
+ }
2354
+ .n-border-light-primary-border-weak{
2355
+ --tw-border-opacity: 1;
2356
+ border-color: rgb(122 209 255 / var(--tw-border-opacity));
2357
+ }
2358
+ .n-border-light-primary-focus{
2359
+ --tw-border-opacity: 1;
2360
+ border-color: rgb(1 139 255 / var(--tw-border-opacity));
2361
+ }
2362
+ .n-border-light-primary-hover-weak{
2363
+ border-color: rgba(1,139,255,0.08);
2364
+ }
2365
+ .n-border-light-primary-hover-strong{
2366
+ --tw-border-opacity: 1;
2367
+ border-color: rgb(0 86 179 / var(--tw-border-opacity));
2368
+ }
2369
+ .n-border-light-primary-pressed-weak{
2370
+ border-color: rgba(1,139,255,0.12);
2371
+ }
2372
+ .n-border-light-primary-pressed-strong{
2373
+ --tw-border-opacity: 1;
2374
+ border-color: rgb(0 64 146 / var(--tw-border-opacity));
2375
+ }
2376
+ .n-border-light-danger-text{
2377
+ --tw-border-opacity: 1;
2378
+ border-color: rgb(204 37 75 / var(--tw-border-opacity));
2379
+ }
2380
+ .n-border-light-danger-icon{
2381
+ --tw-border-opacity: 1;
2382
+ border-color: rgb(204 37 75 / var(--tw-border-opacity));
2383
+ }
2384
+ .n-border-light-danger-bg-strong{
2385
+ --tw-border-opacity: 1;
2386
+ border-color: rgb(204 37 75 / var(--tw-border-opacity));
2387
+ }
2388
+ .n-border-light-danger-bg-weak{
2389
+ --tw-border-opacity: 1;
2390
+ border-color: rgb(255 230 233 / var(--tw-border-opacity));
2391
+ }
2392
+ .n-border-light-danger-border-strong{
2393
+ --tw-border-opacity: 1;
2394
+ border-color: rgb(204 37 75 / var(--tw-border-opacity));
2395
+ }
2396
+ .n-border-light-danger-border-weak{
2397
+ --tw-border-opacity: 1;
2398
+ border-color: rgb(255 184 196 / var(--tw-border-opacity));
2399
+ }
2400
+ .n-border-light-danger-hover-weak{
2401
+ border-color: rgba(237,18,82,0.08);
2402
+ }
2403
+ .n-border-light-danger-hover-strong{
2404
+ --tw-border-opacity: 1;
2405
+ border-color: rgb(161 0 59 / var(--tw-border-opacity));
2406
+ }
2407
+ .n-border-light-danger-pressed-weak{
2408
+ border-color: rgba(237,18,82,0.12);
2409
+ }
2410
+ .n-border-light-danger-pressed-strong{
2411
+ --tw-border-opacity: 1;
2412
+ border-color: rgb(122 0 49 / var(--tw-border-opacity));
2413
+ }
2414
+ .n-border-light-warning-text{
2415
+ --tw-border-opacity: 1;
2416
+ border-color: rgb(150 108 46 / var(--tw-border-opacity));
2417
+ }
2418
+ .n-border-light-warning-icon{
2419
+ --tw-border-opacity: 1;
2420
+ border-color: rgb(150 108 46 / var(--tw-border-opacity));
2421
+ }
2422
+ .n-border-light-warning-bg-strong{
2423
+ --tw-border-opacity: 1;
2424
+ border-color: rgb(150 108 46 / var(--tw-border-opacity));
2425
+ }
2426
+ .n-border-light-warning-bg-weak{
2427
+ --tw-border-opacity: 1;
2428
+ border-color: rgb(255 251 222 / var(--tw-border-opacity));
2429
+ }
2430
+ .n-border-light-warning-border-strong{
2431
+ --tw-border-opacity: 1;
2432
+ border-color: rgb(150 108 46 / var(--tw-border-opacity));
2433
+ }
2434
+ .n-border-light-warning-border-weak{
2435
+ --tw-border-opacity: 1;
2436
+ border-color: rgb(255 234 140 / var(--tw-border-opacity));
2437
+ }
2438
+ .n-border-light-success-text{
2439
+ --tw-border-opacity: 1;
2440
+ border-color: rgb(50 125 96 / var(--tw-border-opacity));
2441
+ }
2442
+ .n-border-light-success-icon{
2443
+ --tw-border-opacity: 1;
2444
+ border-color: rgb(50 125 96 / var(--tw-border-opacity));
2445
+ }
2446
+ .n-border-light-success-bg-strong{
2447
+ --tw-border-opacity: 1;
2448
+ border-color: rgb(50 125 96 / var(--tw-border-opacity));
2449
+ }
2450
+ .n-border-light-success-bg-weak{
2451
+ --tw-border-opacity: 1;
2452
+ border-color: rgb(225 250 239 / var(--tw-border-opacity));
2453
+ }
2454
+ .n-border-light-success-border-strong{
2455
+ --tw-border-opacity: 1;
2456
+ border-color: rgb(50 125 96 / var(--tw-border-opacity));
2457
+ }
2458
+ .n-border-light-success-border-weak{
2459
+ --tw-border-opacity: 1;
2460
+ border-color: rgb(152 237 203 / var(--tw-border-opacity));
2461
+ }
2462
+ .n-border-neutral-70{
2463
+ --tw-border-opacity: 1;
2464
+ border-color: rgb(113 119 128 / var(--tw-border-opacity));
2465
+ }
2466
+ .n-border-b-neutral-40{
2467
+ --tw-border-opacity: 1;
2468
+ border-bottom-color: rgb(230 233 238 / var(--tw-border-opacity));
2469
+ }
2470
+ .n-bg-primary-10{
2471
+ --tw-bg-opacity: 1;
2472
+ background-color: rgb(230 248 255 / var(--tw-bg-opacity));
2473
+ }
2474
+ .n-bg-primary-20{
2475
+ --tw-bg-opacity: 1;
2476
+ background-color: rgb(163 226 255 / var(--tw-bg-opacity));
2477
+ }
2478
+ .n-bg-primary-30{
1980
2479
  --tw-bg-opacity: 1;
1981
2480
  background-color: rgb(122 209 255 / var(--tw-bg-opacity));
1982
2481
  }
@@ -2172,6 +2671,187 @@ a.ndl-btn{
2172
2671
  --tw-bg-opacity: 1;
2173
2672
  background-color: rgb(21 30 41 / var(--tw-bg-opacity));
2174
2673
  }
2674
+ .n-bg-light-neutral-text-weakest{
2675
+ --tw-bg-opacity: 1;
2676
+ background-color: rgb(178 183 189 / var(--tw-bg-opacity));
2677
+ }
2678
+ .n-bg-light-neutral-text-weaker{
2679
+ --tw-bg-opacity: 1;
2680
+ background-color: rgb(113 119 128 / var(--tw-bg-opacity));
2681
+ }
2682
+ .n-bg-light-neutral-text-weak{
2683
+ --tw-bg-opacity: 1;
2684
+ background-color: rgb(83 91 102 / var(--tw-bg-opacity));
2685
+ }
2686
+ .n-bg-light-neutral-text-default{
2687
+ --tw-bg-opacity: 1;
2688
+ background-color: rgb(21 30 41 / var(--tw-bg-opacity));
2689
+ }
2690
+ .n-bg-light-neutral-text-inverse{
2691
+ --tw-bg-opacity: 1;
2692
+ background-color: rgb(255 255 255 / var(--tw-bg-opacity));
2693
+ }
2694
+ .n-bg-light-neutral-bg-weak{
2695
+ --tw-bg-opacity: 1;
2696
+ background-color: rgb(255 255 255 / var(--tw-bg-opacity));
2697
+ }
2698
+ .n-bg-light-neutral-bg-default{
2699
+ --tw-bg-opacity: 1;
2700
+ background-color: rgb(245 247 250 / var(--tw-bg-opacity));
2701
+ }
2702
+ .n-bg-light-neutral-bg-strong{
2703
+ --tw-bg-opacity: 1;
2704
+ background-color: rgb(230 233 238 / var(--tw-bg-opacity));
2705
+ }
2706
+ .n-bg-light-neutral-bg-strongest{
2707
+ --tw-bg-opacity: 1;
2708
+ background-color: rgb(83 91 102 / var(--tw-bg-opacity));
2709
+ }
2710
+ .n-bg-light-neutral-border-weak{
2711
+ --tw-bg-opacity: 1;
2712
+ background-color: rgb(238 241 246 / var(--tw-bg-opacity));
2713
+ }
2714
+ .n-bg-light-neutral-border-strong{
2715
+ --tw-bg-opacity: 1;
2716
+ background-color: rgb(178 183 189 / var(--tw-bg-opacity));
2717
+ }
2718
+ .n-bg-light-neutral-hover{
2719
+ background-color: rgba(113,119,128,0.1);
2720
+ }
2721
+ .n-bg-light-neutral-pressed{
2722
+ background-color: rgba(113,119,128,0.2);
2723
+ }
2724
+ .n-bg-light-primary-text{
2725
+ --tw-bg-opacity: 1;
2726
+ background-color: rgb(0 111 214 / var(--tw-bg-opacity));
2727
+ }
2728
+ .n-bg-light-primary-icon{
2729
+ --tw-bg-opacity: 1;
2730
+ background-color: rgb(0 111 214 / var(--tw-bg-opacity));
2731
+ }
2732
+ .n-bg-light-primary-bg-strong{
2733
+ --tw-bg-opacity: 1;
2734
+ background-color: rgb(0 111 214 / var(--tw-bg-opacity));
2735
+ }
2736
+ .n-bg-light-primary-bg-weak{
2737
+ --tw-bg-opacity: 1;
2738
+ background-color: rgb(230 248 255 / var(--tw-bg-opacity));
2739
+ }
2740
+ .n-bg-light-primary-border-strong{
2741
+ --tw-bg-opacity: 1;
2742
+ background-color: rgb(0 111 214 / var(--tw-bg-opacity));
2743
+ }
2744
+ .n-bg-light-primary-border-weak{
2745
+ --tw-bg-opacity: 1;
2746
+ background-color: rgb(122 209 255 / var(--tw-bg-opacity));
2747
+ }
2748
+ .n-bg-light-primary-focus{
2749
+ --tw-bg-opacity: 1;
2750
+ background-color: rgb(1 139 255 / var(--tw-bg-opacity));
2751
+ }
2752
+ .n-bg-light-primary-hover-weak{
2753
+ background-color: rgba(1,139,255,0.08);
2754
+ }
2755
+ .n-bg-light-primary-hover-strong{
2756
+ --tw-bg-opacity: 1;
2757
+ background-color: rgb(0 86 179 / var(--tw-bg-opacity));
2758
+ }
2759
+ .n-bg-light-primary-pressed-weak{
2760
+ background-color: rgba(1,139,255,0.12);
2761
+ }
2762
+ .n-bg-light-primary-pressed-strong{
2763
+ --tw-bg-opacity: 1;
2764
+ background-color: rgb(0 64 146 / var(--tw-bg-opacity));
2765
+ }
2766
+ .n-bg-light-danger-text{
2767
+ --tw-bg-opacity: 1;
2768
+ background-color: rgb(204 37 75 / var(--tw-bg-opacity));
2769
+ }
2770
+ .n-bg-light-danger-icon{
2771
+ --tw-bg-opacity: 1;
2772
+ background-color: rgb(204 37 75 / var(--tw-bg-opacity));
2773
+ }
2774
+ .n-bg-light-danger-bg-strong{
2775
+ --tw-bg-opacity: 1;
2776
+ background-color: rgb(204 37 75 / var(--tw-bg-opacity));
2777
+ }
2778
+ .n-bg-light-danger-bg-weak{
2779
+ --tw-bg-opacity: 1;
2780
+ background-color: rgb(255 230 233 / var(--tw-bg-opacity));
2781
+ }
2782
+ .n-bg-light-danger-border-strong{
2783
+ --tw-bg-opacity: 1;
2784
+ background-color: rgb(204 37 75 / var(--tw-bg-opacity));
2785
+ }
2786
+ .n-bg-light-danger-border-weak{
2787
+ --tw-bg-opacity: 1;
2788
+ background-color: rgb(255 184 196 / var(--tw-bg-opacity));
2789
+ }
2790
+ .n-bg-light-danger-hover-weak{
2791
+ background-color: rgba(237,18,82,0.08);
2792
+ }
2793
+ .n-bg-light-danger-hover-strong{
2794
+ --tw-bg-opacity: 1;
2795
+ background-color: rgb(161 0 59 / var(--tw-bg-opacity));
2796
+ }
2797
+ .n-bg-light-danger-pressed-weak{
2798
+ background-color: rgba(237,18,82,0.12);
2799
+ }
2800
+ .n-bg-light-danger-pressed-strong{
2801
+ --tw-bg-opacity: 1;
2802
+ background-color: rgb(122 0 49 / var(--tw-bg-opacity));
2803
+ }
2804
+ .n-bg-light-warning-text{
2805
+ --tw-bg-opacity: 1;
2806
+ background-color: rgb(150 108 46 / var(--tw-bg-opacity));
2807
+ }
2808
+ .n-bg-light-warning-icon{
2809
+ --tw-bg-opacity: 1;
2810
+ background-color: rgb(150 108 46 / var(--tw-bg-opacity));
2811
+ }
2812
+ .n-bg-light-warning-bg-strong{
2813
+ --tw-bg-opacity: 1;
2814
+ background-color: rgb(150 108 46 / var(--tw-bg-opacity));
2815
+ }
2816
+ .n-bg-light-warning-bg-weak{
2817
+ --tw-bg-opacity: 1;
2818
+ background-color: rgb(255 251 222 / var(--tw-bg-opacity));
2819
+ }
2820
+ .n-bg-light-warning-border-strong{
2821
+ --tw-bg-opacity: 1;
2822
+ background-color: rgb(150 108 46 / var(--tw-bg-opacity));
2823
+ }
2824
+ .n-bg-light-warning-border-weak{
2825
+ --tw-bg-opacity: 1;
2826
+ background-color: rgb(255 234 140 / var(--tw-bg-opacity));
2827
+ }
2828
+ .n-bg-light-success-text{
2829
+ --tw-bg-opacity: 1;
2830
+ background-color: rgb(50 125 96 / var(--tw-bg-opacity));
2831
+ }
2832
+ .n-bg-light-success-icon{
2833
+ --tw-bg-opacity: 1;
2834
+ background-color: rgb(50 125 96 / var(--tw-bg-opacity));
2835
+ }
2836
+ .n-bg-light-success-bg-strong{
2837
+ --tw-bg-opacity: 1;
2838
+ background-color: rgb(50 125 96 / var(--tw-bg-opacity));
2839
+ }
2840
+ .n-bg-light-success-bg-weak{
2841
+ --tw-bg-opacity: 1;
2842
+ background-color: rgb(225 250 239 / var(--tw-bg-opacity));
2843
+ }
2844
+ .n-bg-light-success-border-strong{
2845
+ --tw-bg-opacity: 1;
2846
+ background-color: rgb(50 125 96 / var(--tw-bg-opacity));
2847
+ }
2848
+ .n-bg-light-success-border-weak{
2849
+ --tw-bg-opacity: 1;
2850
+ background-color: rgb(152 237 203 / var(--tw-bg-opacity));
2851
+ }
2852
+ .n-bg-transparent{
2853
+ background-color: transparent;
2854
+ }
2175
2855
  .n-p-4{
2176
2856
  padding: 1rem;
2177
2857
  }
@@ -2186,17 +2866,29 @@ a.ndl-btn{
2186
2866
  padding-left: 2rem;
2187
2867
  padding-right: 2rem;
2188
2868
  }
2869
+ .n-px-10{
2870
+ padding-left: 2.5rem;
2871
+ padding-right: 2.5rem;
2872
+ }
2189
2873
  .n-font-sans{
2190
2874
  font-family: "Nunito Sans";
2191
2875
  }
2192
- .n-text-body-medium{
2193
- font-size: 14px;
2194
- line-height: 20px;
2195
- letter-spacing: 0px;
2876
+ .n-text-xs{
2877
+ font-size: 0.75rem;
2878
+ line-height: 1rem;
2879
+ }
2880
+ .n-font-semibold{
2881
+ font-weight: 600;
2882
+ }
2883
+ .n-uppercase{
2884
+ text-transform: uppercase;
2196
2885
  }
2197
2886
  .n-capitalize{
2198
2887
  text-transform: capitalize;
2199
2888
  }
2889
+ .n-tracking-wide{
2890
+ letter-spacing: 0.025em;
2891
+ }
2200
2892
  .n-text-primary-10{
2201
2893
  --tw-text-opacity: 1;
2202
2894
  color: rgb(230 248 255 / var(--tw-text-opacity));
@@ -2401,21 +3093,404 @@ a.ndl-btn{
2401
3093
  --tw-text-opacity: 1;
2402
3094
  color: rgb(21 30 41 / var(--tw-text-opacity));
2403
3095
  }
2404
- .n-duration-200{
2405
- transition-duration: 200ms;
3096
+ .n-text-light-neutral-text-weakest{
3097
+ --tw-text-opacity: 1;
3098
+ color: rgb(178 183 189 / var(--tw-text-opacity));
2406
3099
  }
2407
- .n-ease-in-out{
2408
- transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
3100
+ .n-text-light-neutral-text-weaker{
3101
+ --tw-text-opacity: 1;
3102
+ color: rgb(113 119 128 / var(--tw-text-opacity));
2409
3103
  }
2410
- .\[http\:\/\/neo4j\.com\]{
2411
- http: //neo4j.com;
3104
+ .n-text-light-neutral-text-weak{
3105
+ --tw-text-opacity: 1;
3106
+ color: rgb(83 91 102 / var(--tw-text-opacity));
2412
3107
  }
2413
- * {
2414
- font-family: 'Nunito Sans', sans-serif;
3108
+ .n-text-light-neutral-text-default{
3109
+ --tw-text-opacity: 1;
3110
+ color: rgb(21 30 41 / var(--tw-text-opacity));
2415
3111
  }
2416
- .hover\:n-rotate-12:hover{
2417
- --tw-rotate: 12deg;
2418
- 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));
3112
+ .n-text-light-neutral-text-inverse{
3113
+ --tw-text-opacity: 1;
3114
+ color: rgb(255 255 255 / var(--tw-text-opacity));
3115
+ }
3116
+ .n-text-light-neutral-bg-weak{
3117
+ --tw-text-opacity: 1;
3118
+ color: rgb(255 255 255 / var(--tw-text-opacity));
3119
+ }
3120
+ .n-text-light-neutral-bg-default{
3121
+ --tw-text-opacity: 1;
3122
+ color: rgb(245 247 250 / var(--tw-text-opacity));
3123
+ }
3124
+ .n-text-light-neutral-bg-strong{
3125
+ --tw-text-opacity: 1;
3126
+ color: rgb(230 233 238 / var(--tw-text-opacity));
3127
+ }
3128
+ .n-text-light-neutral-bg-strongest{
3129
+ --tw-text-opacity: 1;
3130
+ color: rgb(83 91 102 / var(--tw-text-opacity));
3131
+ }
3132
+ .n-text-light-neutral-border-weak{
3133
+ --tw-text-opacity: 1;
3134
+ color: rgb(238 241 246 / var(--tw-text-opacity));
3135
+ }
3136
+ .n-text-light-neutral-border-strong{
3137
+ --tw-text-opacity: 1;
3138
+ color: rgb(178 183 189 / var(--tw-text-opacity));
3139
+ }
3140
+ .n-text-light-neutral-hover{
3141
+ color: rgba(113,119,128,0.1);
3142
+ }
3143
+ .n-text-light-neutral-pressed{
3144
+ color: rgba(113,119,128,0.2);
3145
+ }
3146
+ .n-text-light-primary-text{
3147
+ --tw-text-opacity: 1;
3148
+ color: rgb(0 111 214 / var(--tw-text-opacity));
3149
+ }
3150
+ .n-text-light-primary-icon{
3151
+ --tw-text-opacity: 1;
3152
+ color: rgb(0 111 214 / var(--tw-text-opacity));
3153
+ }
3154
+ .n-text-light-primary-bg-strong{
3155
+ --tw-text-opacity: 1;
3156
+ color: rgb(0 111 214 / var(--tw-text-opacity));
3157
+ }
3158
+ .n-text-light-primary-bg-weak{
3159
+ --tw-text-opacity: 1;
3160
+ color: rgb(230 248 255 / var(--tw-text-opacity));
3161
+ }
3162
+ .n-text-light-primary-border-strong{
3163
+ --tw-text-opacity: 1;
3164
+ color: rgb(0 111 214 / var(--tw-text-opacity));
3165
+ }
3166
+ .n-text-light-primary-border-weak{
3167
+ --tw-text-opacity: 1;
3168
+ color: rgb(122 209 255 / var(--tw-text-opacity));
3169
+ }
3170
+ .n-text-light-primary-focus{
3171
+ --tw-text-opacity: 1;
3172
+ color: rgb(1 139 255 / var(--tw-text-opacity));
3173
+ }
3174
+ .n-text-light-primary-hover-weak{
3175
+ color: rgba(1,139,255,0.08);
3176
+ }
3177
+ .n-text-light-primary-hover-strong{
3178
+ --tw-text-opacity: 1;
3179
+ color: rgb(0 86 179 / var(--tw-text-opacity));
3180
+ }
3181
+ .n-text-light-primary-pressed-weak{
3182
+ color: rgba(1,139,255,0.12);
3183
+ }
3184
+ .n-text-light-primary-pressed-strong{
3185
+ --tw-text-opacity: 1;
3186
+ color: rgb(0 64 146 / var(--tw-text-opacity));
3187
+ }
3188
+ .n-text-light-danger-text{
3189
+ --tw-text-opacity: 1;
3190
+ color: rgb(204 37 75 / var(--tw-text-opacity));
3191
+ }
3192
+ .n-text-light-danger-icon{
3193
+ --tw-text-opacity: 1;
3194
+ color: rgb(204 37 75 / var(--tw-text-opacity));
3195
+ }
3196
+ .n-text-light-danger-bg-strong{
3197
+ --tw-text-opacity: 1;
3198
+ color: rgb(204 37 75 / var(--tw-text-opacity));
3199
+ }
3200
+ .n-text-light-danger-bg-weak{
3201
+ --tw-text-opacity: 1;
3202
+ color: rgb(255 230 233 / var(--tw-text-opacity));
3203
+ }
3204
+ .n-text-light-danger-border-strong{
3205
+ --tw-text-opacity: 1;
3206
+ color: rgb(204 37 75 / var(--tw-text-opacity));
3207
+ }
3208
+ .n-text-light-danger-border-weak{
3209
+ --tw-text-opacity: 1;
3210
+ color: rgb(255 184 196 / var(--tw-text-opacity));
3211
+ }
3212
+ .n-text-light-danger-hover-weak{
3213
+ color: rgba(237,18,82,0.08);
3214
+ }
3215
+ .n-text-light-danger-hover-strong{
3216
+ --tw-text-opacity: 1;
3217
+ color: rgb(161 0 59 / var(--tw-text-opacity));
3218
+ }
3219
+ .n-text-light-danger-pressed-weak{
3220
+ color: rgba(237,18,82,0.12);
3221
+ }
3222
+ .n-text-light-danger-pressed-strong{
3223
+ --tw-text-opacity: 1;
3224
+ color: rgb(122 0 49 / var(--tw-text-opacity));
3225
+ }
3226
+ .n-text-light-warning-text{
3227
+ --tw-text-opacity: 1;
3228
+ color: rgb(150 108 46 / var(--tw-text-opacity));
3229
+ }
3230
+ .n-text-light-warning-icon{
3231
+ --tw-text-opacity: 1;
3232
+ color: rgb(150 108 46 / var(--tw-text-opacity));
3233
+ }
3234
+ .n-text-light-warning-bg-strong{
3235
+ --tw-text-opacity: 1;
3236
+ color: rgb(150 108 46 / var(--tw-text-opacity));
3237
+ }
3238
+ .n-text-light-warning-bg-weak{
3239
+ --tw-text-opacity: 1;
3240
+ color: rgb(255 251 222 / var(--tw-text-opacity));
3241
+ }
3242
+ .n-text-light-warning-border-strong{
3243
+ --tw-text-opacity: 1;
3244
+ color: rgb(150 108 46 / var(--tw-text-opacity));
3245
+ }
3246
+ .n-text-light-warning-border-weak{
3247
+ --tw-text-opacity: 1;
3248
+ color: rgb(255 234 140 / var(--tw-text-opacity));
3249
+ }
3250
+ .n-text-light-success-text{
3251
+ --tw-text-opacity: 1;
3252
+ color: rgb(50 125 96 / var(--tw-text-opacity));
3253
+ }
3254
+ .n-text-light-success-icon{
3255
+ --tw-text-opacity: 1;
3256
+ color: rgb(50 125 96 / var(--tw-text-opacity));
3257
+ }
3258
+ .n-text-light-success-bg-strong{
3259
+ --tw-text-opacity: 1;
3260
+ color: rgb(50 125 96 / var(--tw-text-opacity));
3261
+ }
3262
+ .n-text-light-success-bg-weak{
3263
+ --tw-text-opacity: 1;
3264
+ color: rgb(225 250 239 / var(--tw-text-opacity));
3265
+ }
3266
+ .n-text-light-success-border-strong{
3267
+ --tw-text-opacity: 1;
3268
+ color: rgb(50 125 96 / var(--tw-text-opacity));
3269
+ }
3270
+ .n-text-light-success-border-weak{
3271
+ --tw-text-opacity: 1;
3272
+ color: rgb(152 237 203 / var(--tw-text-opacity));
3273
+ }
3274
+ .n-underline{
3275
+ -webkit-text-decoration-line: underline;
3276
+ text-decoration-line: underline;
3277
+ }
3278
+ .n-shadow-l2{
3279
+ --tw-shadow: 0px 1px 2px 0px rgba(12, 26, 37, 0.18);
3280
+ --tw-shadow-colored: 0px 1px 2px 0px var(--tw-shadow-color);
3281
+ box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
3282
+ }
3283
+ .n-shadow-l4{
3284
+ --tw-shadow: 0px 4px 8px 0px rgba(12, 26, 37, 0.08);
3285
+ --tw-shadow-colored: 0px 4px 8px 0px var(--tw-shadow-color);
3286
+ box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
3287
+ }
3288
+ .n-duration-200{
3289
+ transition-duration: 200ms;
3290
+ }
3291
+ .n-ease-in-out{
3292
+ transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
3293
+ }
3294
+ .\[http\:\/\/neo4j\.com\]{
3295
+ http: //neo4j.com;
3296
+ }
3297
+ body,
3298
+ html {
3299
+ font-family: 'Nunito Sans', sans-serif;
3300
+ /* Ensure all the products will have antialiasing when using Needle */
3301
+ -webkit-font-smoothing: antialiased;
3302
+ -moz-osx-font-smoothing: grayscale;
3303
+ text-rendering: optimizeLegibility;
3304
+ }
3305
+ .first\:n-rounded-t-sm:first-child{
3306
+ border-top-left-radius: 4px;
3307
+ border-top-right-radius: 4px;
3308
+ }
3309
+ .last\:n-rounded-b-sm:last-child{
3310
+ border-bottom-right-radius: 4px;
3311
+ border-bottom-left-radius: 4px;
3312
+ }
3313
+ .hover\:n-rotate-12:hover{
3314
+ --tw-rotate: 12deg;
3315
+ 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));
3316
+ }
3317
+ .hover\:n-border-light-neutral-text-weakest:hover{
3318
+ --tw-border-opacity: 1;
3319
+ border-color: rgb(178 183 189 / var(--tw-border-opacity));
3320
+ }
3321
+ .hover\:n-border-light-neutral-text-weaker:hover{
3322
+ --tw-border-opacity: 1;
3323
+ border-color: rgb(113 119 128 / var(--tw-border-opacity));
3324
+ }
3325
+ .hover\:n-border-light-neutral-text-weak:hover{
3326
+ --tw-border-opacity: 1;
3327
+ border-color: rgb(83 91 102 / var(--tw-border-opacity));
3328
+ }
3329
+ .hover\:n-border-light-neutral-text-default:hover{
3330
+ --tw-border-opacity: 1;
3331
+ border-color: rgb(21 30 41 / var(--tw-border-opacity));
3332
+ }
3333
+ .hover\:n-border-light-neutral-text-inverse:hover{
3334
+ --tw-border-opacity: 1;
3335
+ border-color: rgb(255 255 255 / var(--tw-border-opacity));
3336
+ }
3337
+ .hover\:n-border-light-neutral-bg-weak:hover{
3338
+ --tw-border-opacity: 1;
3339
+ border-color: rgb(255 255 255 / var(--tw-border-opacity));
3340
+ }
3341
+ .hover\:n-border-light-neutral-bg-default:hover{
3342
+ --tw-border-opacity: 1;
3343
+ border-color: rgb(245 247 250 / var(--tw-border-opacity));
3344
+ }
3345
+ .hover\:n-border-light-neutral-bg-strong:hover{
3346
+ --tw-border-opacity: 1;
3347
+ border-color: rgb(230 233 238 / var(--tw-border-opacity));
3348
+ }
3349
+ .hover\:n-border-light-neutral-bg-strongest:hover{
3350
+ --tw-border-opacity: 1;
3351
+ border-color: rgb(83 91 102 / var(--tw-border-opacity));
3352
+ }
3353
+ .hover\:n-border-light-neutral-border-weak:hover{
3354
+ --tw-border-opacity: 1;
3355
+ border-color: rgb(238 241 246 / var(--tw-border-opacity));
3356
+ }
3357
+ .hover\:n-border-light-neutral-border-strong:hover{
3358
+ --tw-border-opacity: 1;
3359
+ border-color: rgb(178 183 189 / var(--tw-border-opacity));
3360
+ }
3361
+ .hover\:n-border-light-neutral-hover:hover{
3362
+ border-color: rgba(113,119,128,0.1);
3363
+ }
3364
+ .hover\:n-border-light-neutral-pressed:hover{
3365
+ border-color: rgba(113,119,128,0.2);
3366
+ }
3367
+ .hover\:n-border-light-primary-text:hover{
3368
+ --tw-border-opacity: 1;
3369
+ border-color: rgb(0 111 214 / var(--tw-border-opacity));
3370
+ }
3371
+ .hover\:n-border-light-primary-icon:hover{
3372
+ --tw-border-opacity: 1;
3373
+ border-color: rgb(0 111 214 / var(--tw-border-opacity));
3374
+ }
3375
+ .hover\:n-border-light-primary-bg-strong:hover{
3376
+ --tw-border-opacity: 1;
3377
+ border-color: rgb(0 111 214 / var(--tw-border-opacity));
3378
+ }
3379
+ .hover\:n-border-light-primary-bg-weak:hover{
3380
+ --tw-border-opacity: 1;
3381
+ border-color: rgb(230 248 255 / var(--tw-border-opacity));
3382
+ }
3383
+ .hover\:n-border-light-primary-border-strong:hover{
3384
+ --tw-border-opacity: 1;
3385
+ border-color: rgb(0 111 214 / var(--tw-border-opacity));
3386
+ }
3387
+ .hover\:n-border-light-primary-border-weak:hover{
3388
+ --tw-border-opacity: 1;
3389
+ border-color: rgb(122 209 255 / var(--tw-border-opacity));
3390
+ }
3391
+ .hover\:n-border-light-primary-focus:hover{
3392
+ --tw-border-opacity: 1;
3393
+ border-color: rgb(1 139 255 / var(--tw-border-opacity));
3394
+ }
3395
+ .hover\:n-border-light-primary-hover-weak:hover{
3396
+ border-color: rgba(1,139,255,0.08);
3397
+ }
3398
+ .hover\:n-border-light-primary-hover-strong:hover{
3399
+ --tw-border-opacity: 1;
3400
+ border-color: rgb(0 86 179 / var(--tw-border-opacity));
3401
+ }
3402
+ .hover\:n-border-light-primary-pressed-weak:hover{
3403
+ border-color: rgba(1,139,255,0.12);
3404
+ }
3405
+ .hover\:n-border-light-primary-pressed-strong:hover{
3406
+ --tw-border-opacity: 1;
3407
+ border-color: rgb(0 64 146 / var(--tw-border-opacity));
3408
+ }
3409
+ .hover\:n-border-light-danger-text:hover{
3410
+ --tw-border-opacity: 1;
3411
+ border-color: rgb(204 37 75 / var(--tw-border-opacity));
3412
+ }
3413
+ .hover\:n-border-light-danger-icon:hover{
3414
+ --tw-border-opacity: 1;
3415
+ border-color: rgb(204 37 75 / var(--tw-border-opacity));
3416
+ }
3417
+ .hover\:n-border-light-danger-bg-strong:hover{
3418
+ --tw-border-opacity: 1;
3419
+ border-color: rgb(204 37 75 / var(--tw-border-opacity));
3420
+ }
3421
+ .hover\:n-border-light-danger-bg-weak:hover{
3422
+ --tw-border-opacity: 1;
3423
+ border-color: rgb(255 230 233 / var(--tw-border-opacity));
3424
+ }
3425
+ .hover\:n-border-light-danger-border-strong:hover{
3426
+ --tw-border-opacity: 1;
3427
+ border-color: rgb(204 37 75 / var(--tw-border-opacity));
3428
+ }
3429
+ .hover\:n-border-light-danger-border-weak:hover{
3430
+ --tw-border-opacity: 1;
3431
+ border-color: rgb(255 184 196 / var(--tw-border-opacity));
3432
+ }
3433
+ .hover\:n-border-light-danger-hover-weak:hover{
3434
+ border-color: rgba(237,18,82,0.08);
3435
+ }
3436
+ .hover\:n-border-light-danger-hover-strong:hover{
3437
+ --tw-border-opacity: 1;
3438
+ border-color: rgb(161 0 59 / var(--tw-border-opacity));
3439
+ }
3440
+ .hover\:n-border-light-danger-pressed-weak:hover{
3441
+ border-color: rgba(237,18,82,0.12);
3442
+ }
3443
+ .hover\:n-border-light-danger-pressed-strong:hover{
3444
+ --tw-border-opacity: 1;
3445
+ border-color: rgb(122 0 49 / var(--tw-border-opacity));
3446
+ }
3447
+ .hover\:n-border-light-warning-text:hover{
3448
+ --tw-border-opacity: 1;
3449
+ border-color: rgb(150 108 46 / var(--tw-border-opacity));
3450
+ }
3451
+ .hover\:n-border-light-warning-icon:hover{
3452
+ --tw-border-opacity: 1;
3453
+ border-color: rgb(150 108 46 / var(--tw-border-opacity));
3454
+ }
3455
+ .hover\:n-border-light-warning-bg-strong:hover{
3456
+ --tw-border-opacity: 1;
3457
+ border-color: rgb(150 108 46 / var(--tw-border-opacity));
3458
+ }
3459
+ .hover\:n-border-light-warning-bg-weak:hover{
3460
+ --tw-border-opacity: 1;
3461
+ border-color: rgb(255 251 222 / var(--tw-border-opacity));
3462
+ }
3463
+ .hover\:n-border-light-warning-border-strong:hover{
3464
+ --tw-border-opacity: 1;
3465
+ border-color: rgb(150 108 46 / var(--tw-border-opacity));
3466
+ }
3467
+ .hover\:n-border-light-warning-border-weak:hover{
3468
+ --tw-border-opacity: 1;
3469
+ border-color: rgb(255 234 140 / var(--tw-border-opacity));
3470
+ }
3471
+ .hover\:n-border-light-success-text:hover{
3472
+ --tw-border-opacity: 1;
3473
+ border-color: rgb(50 125 96 / var(--tw-border-opacity));
3474
+ }
3475
+ .hover\:n-border-light-success-icon:hover{
3476
+ --tw-border-opacity: 1;
3477
+ border-color: rgb(50 125 96 / var(--tw-border-opacity));
3478
+ }
3479
+ .hover\:n-border-light-success-bg-strong:hover{
3480
+ --tw-border-opacity: 1;
3481
+ border-color: rgb(50 125 96 / var(--tw-border-opacity));
3482
+ }
3483
+ .hover\:n-border-light-success-bg-weak:hover{
3484
+ --tw-border-opacity: 1;
3485
+ border-color: rgb(225 250 239 / var(--tw-border-opacity));
3486
+ }
3487
+ .hover\:n-border-light-success-border-strong:hover{
3488
+ --tw-border-opacity: 1;
3489
+ border-color: rgb(50 125 96 / var(--tw-border-opacity));
3490
+ }
3491
+ .hover\:n-border-light-success-border-weak:hover{
3492
+ --tw-border-opacity: 1;
3493
+ border-color: rgb(152 237 203 / var(--tw-border-opacity));
2419
3494
  }
2420
3495
  .hover\:n-bg-primary-10:hover{
2421
3496
  --tw-bg-opacity: 1;
@@ -2621,6 +3696,184 @@ a.ndl-btn{
2621
3696
  --tw-bg-opacity: 1;
2622
3697
  background-color: rgb(21 30 41 / var(--tw-bg-opacity));
2623
3698
  }
3699
+ .hover\:n-bg-light-neutral-text-weakest:hover{
3700
+ --tw-bg-opacity: 1;
3701
+ background-color: rgb(178 183 189 / var(--tw-bg-opacity));
3702
+ }
3703
+ .hover\:n-bg-light-neutral-text-weaker:hover{
3704
+ --tw-bg-opacity: 1;
3705
+ background-color: rgb(113 119 128 / var(--tw-bg-opacity));
3706
+ }
3707
+ .hover\:n-bg-light-neutral-text-weak:hover{
3708
+ --tw-bg-opacity: 1;
3709
+ background-color: rgb(83 91 102 / var(--tw-bg-opacity));
3710
+ }
3711
+ .hover\:n-bg-light-neutral-text-default:hover{
3712
+ --tw-bg-opacity: 1;
3713
+ background-color: rgb(21 30 41 / var(--tw-bg-opacity));
3714
+ }
3715
+ .hover\:n-bg-light-neutral-text-inverse:hover{
3716
+ --tw-bg-opacity: 1;
3717
+ background-color: rgb(255 255 255 / var(--tw-bg-opacity));
3718
+ }
3719
+ .hover\:n-bg-light-neutral-bg-weak:hover{
3720
+ --tw-bg-opacity: 1;
3721
+ background-color: rgb(255 255 255 / var(--tw-bg-opacity));
3722
+ }
3723
+ .hover\:n-bg-light-neutral-bg-default:hover{
3724
+ --tw-bg-opacity: 1;
3725
+ background-color: rgb(245 247 250 / var(--tw-bg-opacity));
3726
+ }
3727
+ .hover\:n-bg-light-neutral-bg-strong:hover{
3728
+ --tw-bg-opacity: 1;
3729
+ background-color: rgb(230 233 238 / var(--tw-bg-opacity));
3730
+ }
3731
+ .hover\:n-bg-light-neutral-bg-strongest:hover{
3732
+ --tw-bg-opacity: 1;
3733
+ background-color: rgb(83 91 102 / var(--tw-bg-opacity));
3734
+ }
3735
+ .hover\:n-bg-light-neutral-border-weak:hover{
3736
+ --tw-bg-opacity: 1;
3737
+ background-color: rgb(238 241 246 / var(--tw-bg-opacity));
3738
+ }
3739
+ .hover\:n-bg-light-neutral-border-strong:hover{
3740
+ --tw-bg-opacity: 1;
3741
+ background-color: rgb(178 183 189 / var(--tw-bg-opacity));
3742
+ }
3743
+ .hover\:n-bg-light-neutral-hover:hover{
3744
+ background-color: rgba(113,119,128,0.1);
3745
+ }
3746
+ .hover\:n-bg-light-neutral-pressed:hover{
3747
+ background-color: rgba(113,119,128,0.2);
3748
+ }
3749
+ .hover\:n-bg-light-primary-text:hover{
3750
+ --tw-bg-opacity: 1;
3751
+ background-color: rgb(0 111 214 / var(--tw-bg-opacity));
3752
+ }
3753
+ .hover\:n-bg-light-primary-icon:hover{
3754
+ --tw-bg-opacity: 1;
3755
+ background-color: rgb(0 111 214 / var(--tw-bg-opacity));
3756
+ }
3757
+ .hover\:n-bg-light-primary-bg-strong:hover{
3758
+ --tw-bg-opacity: 1;
3759
+ background-color: rgb(0 111 214 / var(--tw-bg-opacity));
3760
+ }
3761
+ .hover\:n-bg-light-primary-bg-weak:hover{
3762
+ --tw-bg-opacity: 1;
3763
+ background-color: rgb(230 248 255 / var(--tw-bg-opacity));
3764
+ }
3765
+ .hover\:n-bg-light-primary-border-strong:hover{
3766
+ --tw-bg-opacity: 1;
3767
+ background-color: rgb(0 111 214 / var(--tw-bg-opacity));
3768
+ }
3769
+ .hover\:n-bg-light-primary-border-weak:hover{
3770
+ --tw-bg-opacity: 1;
3771
+ background-color: rgb(122 209 255 / var(--tw-bg-opacity));
3772
+ }
3773
+ .hover\:n-bg-light-primary-focus:hover{
3774
+ --tw-bg-opacity: 1;
3775
+ background-color: rgb(1 139 255 / var(--tw-bg-opacity));
3776
+ }
3777
+ .hover\:n-bg-light-primary-hover-weak:hover{
3778
+ background-color: rgba(1,139,255,0.08);
3779
+ }
3780
+ .hover\:n-bg-light-primary-hover-strong:hover{
3781
+ --tw-bg-opacity: 1;
3782
+ background-color: rgb(0 86 179 / var(--tw-bg-opacity));
3783
+ }
3784
+ .hover\:n-bg-light-primary-pressed-weak:hover{
3785
+ background-color: rgba(1,139,255,0.12);
3786
+ }
3787
+ .hover\:n-bg-light-primary-pressed-strong:hover{
3788
+ --tw-bg-opacity: 1;
3789
+ background-color: rgb(0 64 146 / var(--tw-bg-opacity));
3790
+ }
3791
+ .hover\:n-bg-light-danger-text:hover{
3792
+ --tw-bg-opacity: 1;
3793
+ background-color: rgb(204 37 75 / var(--tw-bg-opacity));
3794
+ }
3795
+ .hover\:n-bg-light-danger-icon:hover{
3796
+ --tw-bg-opacity: 1;
3797
+ background-color: rgb(204 37 75 / var(--tw-bg-opacity));
3798
+ }
3799
+ .hover\:n-bg-light-danger-bg-strong:hover{
3800
+ --tw-bg-opacity: 1;
3801
+ background-color: rgb(204 37 75 / var(--tw-bg-opacity));
3802
+ }
3803
+ .hover\:n-bg-light-danger-bg-weak:hover{
3804
+ --tw-bg-opacity: 1;
3805
+ background-color: rgb(255 230 233 / var(--tw-bg-opacity));
3806
+ }
3807
+ .hover\:n-bg-light-danger-border-strong:hover{
3808
+ --tw-bg-opacity: 1;
3809
+ background-color: rgb(204 37 75 / var(--tw-bg-opacity));
3810
+ }
3811
+ .hover\:n-bg-light-danger-border-weak:hover{
3812
+ --tw-bg-opacity: 1;
3813
+ background-color: rgb(255 184 196 / var(--tw-bg-opacity));
3814
+ }
3815
+ .hover\:n-bg-light-danger-hover-weak:hover{
3816
+ background-color: rgba(237,18,82,0.08);
3817
+ }
3818
+ .hover\:n-bg-light-danger-hover-strong:hover{
3819
+ --tw-bg-opacity: 1;
3820
+ background-color: rgb(161 0 59 / var(--tw-bg-opacity));
3821
+ }
3822
+ .hover\:n-bg-light-danger-pressed-weak:hover{
3823
+ background-color: rgba(237,18,82,0.12);
3824
+ }
3825
+ .hover\:n-bg-light-danger-pressed-strong:hover{
3826
+ --tw-bg-opacity: 1;
3827
+ background-color: rgb(122 0 49 / var(--tw-bg-opacity));
3828
+ }
3829
+ .hover\:n-bg-light-warning-text:hover{
3830
+ --tw-bg-opacity: 1;
3831
+ background-color: rgb(150 108 46 / var(--tw-bg-opacity));
3832
+ }
3833
+ .hover\:n-bg-light-warning-icon:hover{
3834
+ --tw-bg-opacity: 1;
3835
+ background-color: rgb(150 108 46 / var(--tw-bg-opacity));
3836
+ }
3837
+ .hover\:n-bg-light-warning-bg-strong:hover{
3838
+ --tw-bg-opacity: 1;
3839
+ background-color: rgb(150 108 46 / var(--tw-bg-opacity));
3840
+ }
3841
+ .hover\:n-bg-light-warning-bg-weak:hover{
3842
+ --tw-bg-opacity: 1;
3843
+ background-color: rgb(255 251 222 / var(--tw-bg-opacity));
3844
+ }
3845
+ .hover\:n-bg-light-warning-border-strong:hover{
3846
+ --tw-bg-opacity: 1;
3847
+ background-color: rgb(150 108 46 / var(--tw-bg-opacity));
3848
+ }
3849
+ .hover\:n-bg-light-warning-border-weak:hover{
3850
+ --tw-bg-opacity: 1;
3851
+ background-color: rgb(255 234 140 / var(--tw-bg-opacity));
3852
+ }
3853
+ .hover\:n-bg-light-success-text:hover{
3854
+ --tw-bg-opacity: 1;
3855
+ background-color: rgb(50 125 96 / var(--tw-bg-opacity));
3856
+ }
3857
+ .hover\:n-bg-light-success-icon:hover{
3858
+ --tw-bg-opacity: 1;
3859
+ background-color: rgb(50 125 96 / var(--tw-bg-opacity));
3860
+ }
3861
+ .hover\:n-bg-light-success-bg-strong:hover{
3862
+ --tw-bg-opacity: 1;
3863
+ background-color: rgb(50 125 96 / var(--tw-bg-opacity));
3864
+ }
3865
+ .hover\:n-bg-light-success-bg-weak:hover{
3866
+ --tw-bg-opacity: 1;
3867
+ background-color: rgb(225 250 239 / var(--tw-bg-opacity));
3868
+ }
3869
+ .hover\:n-bg-light-success-border-strong:hover{
3870
+ --tw-bg-opacity: 1;
3871
+ background-color: rgb(50 125 96 / var(--tw-bg-opacity));
3872
+ }
3873
+ .hover\:n-bg-light-success-border-weak:hover{
3874
+ --tw-bg-opacity: 1;
3875
+ background-color: rgb(152 237 203 / var(--tw-bg-opacity));
3876
+ }
2624
3877
  .hover\:n-text-primary-10:hover{
2625
3878
  --tw-text-opacity: 1;
2626
3879
  color: rgb(230 248 255 / var(--tw-text-opacity));
@@ -2825,6 +4078,184 @@ a.ndl-btn{
2825
4078
  --tw-text-opacity: 1;
2826
4079
  color: rgb(21 30 41 / var(--tw-text-opacity));
2827
4080
  }
4081
+ .hover\:n-text-light-neutral-text-weakest:hover{
4082
+ --tw-text-opacity: 1;
4083
+ color: rgb(178 183 189 / var(--tw-text-opacity));
4084
+ }
4085
+ .hover\:n-text-light-neutral-text-weaker:hover{
4086
+ --tw-text-opacity: 1;
4087
+ color: rgb(113 119 128 / var(--tw-text-opacity));
4088
+ }
4089
+ .hover\:n-text-light-neutral-text-weak:hover{
4090
+ --tw-text-opacity: 1;
4091
+ color: rgb(83 91 102 / var(--tw-text-opacity));
4092
+ }
4093
+ .hover\:n-text-light-neutral-text-default:hover{
4094
+ --tw-text-opacity: 1;
4095
+ color: rgb(21 30 41 / var(--tw-text-opacity));
4096
+ }
4097
+ .hover\:n-text-light-neutral-text-inverse:hover{
4098
+ --tw-text-opacity: 1;
4099
+ color: rgb(255 255 255 / var(--tw-text-opacity));
4100
+ }
4101
+ .hover\:n-text-light-neutral-bg-weak:hover{
4102
+ --tw-text-opacity: 1;
4103
+ color: rgb(255 255 255 / var(--tw-text-opacity));
4104
+ }
4105
+ .hover\:n-text-light-neutral-bg-default:hover{
4106
+ --tw-text-opacity: 1;
4107
+ color: rgb(245 247 250 / var(--tw-text-opacity));
4108
+ }
4109
+ .hover\:n-text-light-neutral-bg-strong:hover{
4110
+ --tw-text-opacity: 1;
4111
+ color: rgb(230 233 238 / var(--tw-text-opacity));
4112
+ }
4113
+ .hover\:n-text-light-neutral-bg-strongest:hover{
4114
+ --tw-text-opacity: 1;
4115
+ color: rgb(83 91 102 / var(--tw-text-opacity));
4116
+ }
4117
+ .hover\:n-text-light-neutral-border-weak:hover{
4118
+ --tw-text-opacity: 1;
4119
+ color: rgb(238 241 246 / var(--tw-text-opacity));
4120
+ }
4121
+ .hover\:n-text-light-neutral-border-strong:hover{
4122
+ --tw-text-opacity: 1;
4123
+ color: rgb(178 183 189 / var(--tw-text-opacity));
4124
+ }
4125
+ .hover\:n-text-light-neutral-hover:hover{
4126
+ color: rgba(113,119,128,0.1);
4127
+ }
4128
+ .hover\:n-text-light-neutral-pressed:hover{
4129
+ color: rgba(113,119,128,0.2);
4130
+ }
4131
+ .hover\:n-text-light-primary-text:hover{
4132
+ --tw-text-opacity: 1;
4133
+ color: rgb(0 111 214 / var(--tw-text-opacity));
4134
+ }
4135
+ .hover\:n-text-light-primary-icon:hover{
4136
+ --tw-text-opacity: 1;
4137
+ color: rgb(0 111 214 / var(--tw-text-opacity));
4138
+ }
4139
+ .hover\:n-text-light-primary-bg-strong:hover{
4140
+ --tw-text-opacity: 1;
4141
+ color: rgb(0 111 214 / var(--tw-text-opacity));
4142
+ }
4143
+ .hover\:n-text-light-primary-bg-weak:hover{
4144
+ --tw-text-opacity: 1;
4145
+ color: rgb(230 248 255 / var(--tw-text-opacity));
4146
+ }
4147
+ .hover\:n-text-light-primary-border-strong:hover{
4148
+ --tw-text-opacity: 1;
4149
+ color: rgb(0 111 214 / var(--tw-text-opacity));
4150
+ }
4151
+ .hover\:n-text-light-primary-border-weak:hover{
4152
+ --tw-text-opacity: 1;
4153
+ color: rgb(122 209 255 / var(--tw-text-opacity));
4154
+ }
4155
+ .hover\:n-text-light-primary-focus:hover{
4156
+ --tw-text-opacity: 1;
4157
+ color: rgb(1 139 255 / var(--tw-text-opacity));
4158
+ }
4159
+ .hover\:n-text-light-primary-hover-weak:hover{
4160
+ color: rgba(1,139,255,0.08);
4161
+ }
4162
+ .hover\:n-text-light-primary-hover-strong:hover{
4163
+ --tw-text-opacity: 1;
4164
+ color: rgb(0 86 179 / var(--tw-text-opacity));
4165
+ }
4166
+ .hover\:n-text-light-primary-pressed-weak:hover{
4167
+ color: rgba(1,139,255,0.12);
4168
+ }
4169
+ .hover\:n-text-light-primary-pressed-strong:hover{
4170
+ --tw-text-opacity: 1;
4171
+ color: rgb(0 64 146 / var(--tw-text-opacity));
4172
+ }
4173
+ .hover\:n-text-light-danger-text:hover{
4174
+ --tw-text-opacity: 1;
4175
+ color: rgb(204 37 75 / var(--tw-text-opacity));
4176
+ }
4177
+ .hover\:n-text-light-danger-icon:hover{
4178
+ --tw-text-opacity: 1;
4179
+ color: rgb(204 37 75 / var(--tw-text-opacity));
4180
+ }
4181
+ .hover\:n-text-light-danger-bg-strong:hover{
4182
+ --tw-text-opacity: 1;
4183
+ color: rgb(204 37 75 / var(--tw-text-opacity));
4184
+ }
4185
+ .hover\:n-text-light-danger-bg-weak:hover{
4186
+ --tw-text-opacity: 1;
4187
+ color: rgb(255 230 233 / var(--tw-text-opacity));
4188
+ }
4189
+ .hover\:n-text-light-danger-border-strong:hover{
4190
+ --tw-text-opacity: 1;
4191
+ color: rgb(204 37 75 / var(--tw-text-opacity));
4192
+ }
4193
+ .hover\:n-text-light-danger-border-weak:hover{
4194
+ --tw-text-opacity: 1;
4195
+ color: rgb(255 184 196 / var(--tw-text-opacity));
4196
+ }
4197
+ .hover\:n-text-light-danger-hover-weak:hover{
4198
+ color: rgba(237,18,82,0.08);
4199
+ }
4200
+ .hover\:n-text-light-danger-hover-strong:hover{
4201
+ --tw-text-opacity: 1;
4202
+ color: rgb(161 0 59 / var(--tw-text-opacity));
4203
+ }
4204
+ .hover\:n-text-light-danger-pressed-weak:hover{
4205
+ color: rgba(237,18,82,0.12);
4206
+ }
4207
+ .hover\:n-text-light-danger-pressed-strong:hover{
4208
+ --tw-text-opacity: 1;
4209
+ color: rgb(122 0 49 / var(--tw-text-opacity));
4210
+ }
4211
+ .hover\:n-text-light-warning-text:hover{
4212
+ --tw-text-opacity: 1;
4213
+ color: rgb(150 108 46 / var(--tw-text-opacity));
4214
+ }
4215
+ .hover\:n-text-light-warning-icon:hover{
4216
+ --tw-text-opacity: 1;
4217
+ color: rgb(150 108 46 / var(--tw-text-opacity));
4218
+ }
4219
+ .hover\:n-text-light-warning-bg-strong:hover{
4220
+ --tw-text-opacity: 1;
4221
+ color: rgb(150 108 46 / var(--tw-text-opacity));
4222
+ }
4223
+ .hover\:n-text-light-warning-bg-weak:hover{
4224
+ --tw-text-opacity: 1;
4225
+ color: rgb(255 251 222 / var(--tw-text-opacity));
4226
+ }
4227
+ .hover\:n-text-light-warning-border-strong:hover{
4228
+ --tw-text-opacity: 1;
4229
+ color: rgb(150 108 46 / var(--tw-text-opacity));
4230
+ }
4231
+ .hover\:n-text-light-warning-border-weak:hover{
4232
+ --tw-text-opacity: 1;
4233
+ color: rgb(255 234 140 / var(--tw-text-opacity));
4234
+ }
4235
+ .hover\:n-text-light-success-text:hover{
4236
+ --tw-text-opacity: 1;
4237
+ color: rgb(50 125 96 / var(--tw-text-opacity));
4238
+ }
4239
+ .hover\:n-text-light-success-icon:hover{
4240
+ --tw-text-opacity: 1;
4241
+ color: rgb(50 125 96 / var(--tw-text-opacity));
4242
+ }
4243
+ .hover\:n-text-light-success-bg-strong:hover{
4244
+ --tw-text-opacity: 1;
4245
+ color: rgb(50 125 96 / var(--tw-text-opacity));
4246
+ }
4247
+ .hover\:n-text-light-success-bg-weak:hover{
4248
+ --tw-text-opacity: 1;
4249
+ color: rgb(225 250 239 / var(--tw-text-opacity));
4250
+ }
4251
+ .hover\:n-text-light-success-border-strong:hover{
4252
+ --tw-text-opacity: 1;
4253
+ color: rgb(50 125 96 / var(--tw-text-opacity));
4254
+ }
4255
+ .hover\:n-text-light-success-border-weak:hover{
4256
+ --tw-text-opacity: 1;
4257
+ color: rgb(152 237 203 / var(--tw-text-opacity));
4258
+ }
2828
4259
  @media (min-width: 640px){
2829
4260
  .sm\:n-space-y-0 > :not([hidden]) ~ :not([hidden]){
2830
4261
  --tw-space-y-reverse: 0;