@common-origin/design-system 2.23.0 → 3.0.0

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 (116) hide show
  1. package/README.md +2 -2
  2. package/dist/client.js +184 -479
  3. package/dist/client.js.map +1 -1
  4. package/dist/components/atoms/Badge/Badge.d.mts +5 -12
  5. package/dist/components/atoms/Badge/Badge.d.ts +5 -12
  6. package/dist/components/atoms/Badge/Badge.mjs +0 -7
  7. package/dist/components/atoms/Badge/index.d.mts +1 -1
  8. package/dist/components/atoms/Badge/index.d.ts +1 -1
  9. package/dist/components/atoms/Box/Box.d.mts +22 -34
  10. package/dist/components/atoms/Box/Box.d.ts +22 -34
  11. package/dist/components/atoms/Box/Box.mjs +8 -11
  12. package/dist/components/atoms/Button/Button.d.mts +1 -4
  13. package/dist/components/atoms/Button/Button.d.ts +1 -4
  14. package/dist/components/atoms/Button/Button.mjs +3 -10
  15. package/dist/components/atoms/CategoryLabel/CategoryLabel.d.mts +4 -12
  16. package/dist/components/atoms/CategoryLabel/CategoryLabel.d.ts +4 -12
  17. package/dist/components/atoms/CategoryLabel/CategoryLabel.mjs +5 -16
  18. package/dist/components/atoms/Chip/Chip.d.mts +8 -20
  19. package/dist/components/atoms/Chip/Chip.d.ts +8 -20
  20. package/dist/components/atoms/Chip/Chip.mjs +20 -46
  21. package/dist/components/atoms/Chip/Chip.mjs.map +1 -1
  22. package/dist/components/atoms/Chip/FilterChip.d.mts +22 -10
  23. package/dist/components/atoms/Chip/FilterChip.d.ts +22 -10
  24. package/dist/components/atoms/Chip/FilterChip.mjs +66 -6
  25. package/dist/components/atoms/Chip/FilterChip.mjs.map +1 -1
  26. package/dist/components/atoms/Chip/InputChip.mjs +4 -6
  27. package/dist/components/atoms/Chip/InputChip.mjs.map +1 -1
  28. package/dist/components/atoms/Chip/index.d.mts +0 -1
  29. package/dist/components/atoms/Chip/index.d.ts +0 -1
  30. package/dist/components/atoms/Chip/shared/types.d.mts +9 -19
  31. package/dist/components/atoms/Chip/shared/types.d.ts +9 -19
  32. package/dist/components/atoms/Chip/shared/utils.d.mts +3 -3
  33. package/dist/components/atoms/Chip/shared/utils.d.ts +3 -3
  34. package/dist/components/atoms/Chip/shared/utils.mjs +4 -8
  35. package/dist/components/atoms/Chip/shared/utils.mjs.map +1 -1
  36. package/dist/components/atoms/DateFormatter/DateFormatter.d.mts +2 -5
  37. package/dist/components/atoms/DateFormatter/DateFormatter.d.ts +2 -5
  38. package/dist/components/atoms/DateFormatter/DateFormatter.mjs +0 -1
  39. package/dist/components/atoms/StatusLabel/StatusLabel.mjs +1 -4
  40. package/dist/components/atoms/StatusLabel/StatusLabel.mjs.map +1 -1
  41. package/dist/components/atoms/StatusLabel/StatusLabelBase.d.mts +5 -7
  42. package/dist/components/atoms/StatusLabel/StatusLabelBase.d.ts +5 -7
  43. package/dist/components/atoms/StatusLabel/StatusLabelBase.mjs +10 -12
  44. package/dist/components/atoms/Tag/Tag.d.mts +2 -4
  45. package/dist/components/atoms/Tag/Tag.d.ts +2 -4
  46. package/dist/components/atoms/Tag/Tag.mjs +0 -24
  47. package/dist/components/atoms/index.d.mts +0 -2
  48. package/dist/components/atoms/index.d.ts +0 -2
  49. package/dist/components/layout/GridSystem/GridSystem.d.mts +23 -18
  50. package/dist/components/layout/GridSystem/GridSystem.d.ts +23 -18
  51. package/dist/components/layout/GridSystem/GridSystem.mjs +7 -5
  52. package/dist/components/molecules/AgentInput/AgentInput.d.mts +5 -0
  53. package/dist/components/molecules/AgentInput/AgentInput.d.ts +5 -0
  54. package/dist/components/molecules/AgentInput/AgentInput.mjs +1 -1
  55. package/dist/components/molecules/Alert/Alert.d.mts +1 -9
  56. package/dist/components/molecules/Alert/Alert.d.ts +1 -9
  57. package/dist/components/molecules/Alert/Alert.mjs +13 -26
  58. package/dist/components/molecules/ChipGroup/ChipGroup.d.mts +0 -1
  59. package/dist/components/molecules/ChipGroup/ChipGroup.d.ts +0 -1
  60. package/dist/components/molecules/ChipGroup/ChipGroup.mjs +1 -6
  61. package/dist/components/molecules/DateGroup/DateGroup.d.mts +1 -2
  62. package/dist/components/molecules/DateGroup/DateGroup.d.ts +1 -2
  63. package/dist/components/molecules/Modal/Modal.d.mts +0 -1
  64. package/dist/components/molecules/Modal/Modal.d.ts +0 -1
  65. package/dist/components/molecules/TabBar/TabBar.d.mts +0 -13
  66. package/dist/components/molecules/TabBar/TabBar.d.ts +0 -13
  67. package/dist/components/molecules/TabBar/TabBar.mjs +2 -4
  68. package/dist/components/molecules/TabBar/index.d.mts +1 -1
  69. package/dist/components/molecules/TabBar/index.d.ts +1 -1
  70. package/dist/components/molecules/index.d.mts +0 -1
  71. package/dist/components/molecules/index.d.ts +0 -1
  72. package/dist/data.js +13 -556
  73. package/dist/data.js.map +1 -1
  74. package/dist/index.js +0 -5
  75. package/dist/index.js.map +1 -1
  76. package/dist/index.mjs +1 -5
  77. package/dist/index.mjs.map +1 -1
  78. package/dist/lib/tokenAliases.d.mts +11 -11
  79. package/dist/lib/tokenAliases.d.ts +11 -11
  80. package/dist/lib/tokenAliases.mjs +13 -88
  81. package/dist/lib/tokenAliases.mjs.map +1 -1
  82. package/dist/styles/tokens.d.mts +3 -2347
  83. package/dist/styles/tokens.d.ts +3 -2347
  84. package/dist/styles/tokens.json +13 -556
  85. package/dist/styles/tokens.json.mjs +13 -556
  86. package/dist/styles/tokens.json.mjs.map +1 -1
  87. package/dist/tokens/index.js +13 -556
  88. package/dist/tokens/index.js.map +1 -1
  89. package/dist/tokens/index.mjs +13 -556
  90. package/dist/tokens/index.mjs.map +1 -1
  91. package/dist/tokens/styles/tokens.d.mts +3 -2347
  92. package/dist/tokens/styles/tokens.d.ts +3 -2347
  93. package/dist/tokens.css +6 -478
  94. package/package.json +2 -2
  95. package/dist/components/atoms/CategoryBadge/CategoryBadge.d.mts +0 -29
  96. package/dist/components/atoms/CategoryBadge/CategoryBadge.d.ts +0 -29
  97. package/dist/components/atoms/CategoryBadge/CategoryBadge.mjs +0 -29
  98. package/dist/components/atoms/CategoryBadge/CategoryBadge.mjs.map +0 -1
  99. package/dist/components/atoms/CategoryBadge/index.d.mts +0 -2
  100. package/dist/components/atoms/CategoryBadge/index.d.ts +0 -2
  101. package/dist/components/atoms/Chip/BooleanChip.d.mts +0 -28
  102. package/dist/components/atoms/Chip/BooleanChip.d.ts +0 -28
  103. package/dist/components/atoms/Chip/BooleanChip.mjs +0 -76
  104. package/dist/components/atoms/Chip/BooleanChip.mjs.map +0 -1
  105. package/dist/components/atoms/StatusBadge/StatusBadge.d.mts +0 -24
  106. package/dist/components/atoms/StatusBadge/StatusBadge.d.ts +0 -24
  107. package/dist/components/atoms/StatusBadge/StatusBadge.mjs +0 -18
  108. package/dist/components/atoms/StatusBadge/StatusBadge.mjs.map +0 -1
  109. package/dist/components/atoms/StatusBadge/index.d.mts +0 -2
  110. package/dist/components/atoms/StatusBadge/index.d.ts +0 -2
  111. package/dist/components/molecules/PageTitle/PageTitle.d.mts +0 -21
  112. package/dist/components/molecules/PageTitle/PageTitle.d.ts +0 -21
  113. package/dist/components/molecules/PageTitle/PageTitle.mjs +0 -77
  114. package/dist/components/molecules/PageTitle/PageTitle.mjs.map +0 -1
  115. package/dist/components/molecules/PageTitle/index.d.mts +0 -1
  116. package/dist/components/molecules/PageTitle/index.d.ts +0 -1
@@ -102,40 +102,6 @@ var base = {
102
102
  "192": "48rem"
103
103
  },
104
104
  size: {
105
- "0": "0",
106
- "1": "0.25rem",
107
- "2": "0.5rem",
108
- "3": "0.75rem",
109
- "4": "1rem",
110
- "5": "1.25rem",
111
- "6": "1.5rem",
112
- "7": "1.75rem",
113
- "8": "2rem",
114
- "9": "2.25rem",
115
- "10": "2.5rem",
116
- "11": "2.75rem",
117
- "12": "3rem",
118
- "14": "3.5rem",
119
- "15": "3.75rem",
120
- "16": "4rem",
121
- "18": "4.5rem",
122
- "20": "5rem",
123
- "24": "6rem",
124
- "28": "7rem",
125
- "30": "7.5rem",
126
- "32": "8rem",
127
- "40": "10rem",
128
- "45": "11.25rem",
129
- "48": "12rem",
130
- "50": "12.5rem",
131
- "56": "14rem",
132
- "64": "16rem",
133
- "75": "18.75rem",
134
- "90": "22.5rem",
135
- "100": "25rem",
136
- "140": "35rem",
137
- "180": "45rem",
138
- "192": "48rem",
139
105
  auto: "auto",
140
106
  full: "100%",
141
107
  screen: "100vh",
@@ -453,149 +419,9 @@ var base = {
453
419
  "1000": "rgba(215, 0, 212, 1)",
454
420
  "1100": "rgba(177, 0, 175, 1)",
455
421
  "1200": "rgba(37, 0, 35, 0.918)"
456
- },
457
- neutral: {
458
- "100": "#f8f9fa",
459
- "200": "#e9ecef",
460
- "300": "#dee2e6",
461
- "400": "#ced4da",
462
- "500": "#adb5bd",
463
- "600": "#6c757d",
464
- "700": "#495057",
465
- "800": "#343a40",
466
- "900": "#212529",
467
- "1000": "#16191C",
468
- "000": "#ffffff"
469
- },
470
- green: {
471
- "100": "#CEF8E0",
472
- "200": "#ADF4CE",
473
- "300": "#89ECBC",
474
- "400": "#67DEA8",
475
- "500": "#49CC93",
476
- "600": "#2FB880",
477
- "700": "#15A46E",
478
- "800": "#008F5D",
479
- "900": "#007A4D",
480
- "1000": "#00653E",
481
- "1100": "#005132",
482
- "1200": "#053F27",
483
- "1300": "#0A2E1D"
484
- },
485
- orange: {
486
- "100": "#FFECCC",
487
- "200": "#FFDFAD",
488
- "300": "#FDD291",
489
- "400": "#FFBB63",
490
- "500": "#FFA037",
491
- "600": "#F68511",
492
- "700": "#E46F00",
493
- "800": "#CB5D00",
494
- "900": "#B14C00",
495
- "1000": "#953D00",
496
- "1100": "#7A2F00",
497
- "1200": "#612300",
498
- "1300": "#491901"
499
- },
500
- red: {
501
- "100": "#FFEBE7",
502
- "200": "#FFDDD6",
503
- "300": "#FFCDC3",
504
- "400": "#FFB7A9",
505
- "500": "#FF9B88",
506
- "600": "#FF7C65",
507
- "700": "#F75C46",
508
- "800": "#EA3829",
509
- "900": "#D31510",
510
- "1000": "#B40000",
511
- "1100": "#930000",
512
- "1200": "#740000",
513
- "1300": "#590000"
514
- },
515
- blue: {
516
- "100": "#E0F2FF",
517
- "200": "#CAE8FF",
518
- "300": "#B5DEFF",
519
- "400": "#96CEFD",
520
- "500": "#78BBFA",
521
- "600": "#59A7F6",
522
- "700": "#3892F3",
523
- "800": "#147AF3",
524
- "900": "#0265DC",
525
- "1000": "#0054B6",
526
- "1100": "#004491",
527
- "1200": "#003571",
528
- "1300": "#002754"
529
- },
530
- purple: {
531
- "100": "#F9F0FF",
532
- "200": "#F4E1FF",
533
- "300": "#EDD0FF",
534
- "400": "#E3B8FF",
535
- "500": "#D59DFF",
536
- "600": "#C27EF7",
537
- "700": "#AD5FE8",
538
- "800": "#9644D4",
539
- "900": "#7E2EBD",
540
- "1000": "#67229F",
541
- "1100": "#511882",
542
- "1200": "#3D1066",
543
- "1300": "#2B0A4D"
544
- },
545
- pink: {
546
- "100": "#FFEFF9",
547
- "200": "#FFDFF4",
548
- "300": "#FFCBED",
549
- "400": "#FFB0E3",
550
- "500": "#FF8ED4",
551
- "600": "#FF69C1",
552
- "700": "#FF42AB",
553
- "800": "#F31A93",
554
- "900": "#DC007B",
555
- "1000": "#B90064",
556
- "1100": "#97004E",
557
- "1200": "#78003A",
558
- "1300": "#5C0029"
559
- },
560
- yellow: {
561
- "100": "#FFF3D6",
562
- "200": "#FFE9B3",
563
- "300": "#FFDE8F",
564
- "400": "#FFD162",
565
- "500": "#FFC233",
566
- "600": "#EDAD0A",
567
- "700": "#D39700",
568
- "800": "#B88100",
569
- "900": "#9D6C00",
570
- "1000": "#825800",
571
- "1100": "#694600",
572
- "1200": "#523600",
573
- "1300": "#3D2800"
574
422
  }
575
423
  },
576
424
  spacing: {
577
- "0": "0",
578
- "1": "0.25rem",
579
- "2": "0.5rem",
580
- "3": "0.75rem",
581
- "4": "1rem",
582
- "5": "1.25rem",
583
- "6": "1.5rem",
584
- "7": "1.75rem",
585
- "8": "2rem",
586
- "9": "2.25rem",
587
- "10": "2.5rem",
588
- "12": "3rem",
589
- "14": "3.5rem",
590
- "16": "4rem",
591
- "20": "5rem",
592
- "24": "6rem",
593
- "28": "7rem",
594
- "32": "8rem",
595
- "40": "10rem",
596
- "48": "12rem",
597
- "56": "14rem",
598
- "64": "16rem",
599
425
  auto: "auto"
600
426
  },
601
427
  fontFamily: {
@@ -682,7 +508,6 @@ var component = {
682
508
  backgroundColor: "#222222",
683
509
  textColor: "#fcfcfc",
684
510
  borderRadius: "0.25rem",
685
- padding: "0.75rem 1rem",
686
511
  font: "500 1rem/1.5rem 'Inter', sans-serif"
687
512
  },
688
513
  hover: {
@@ -692,8 +517,7 @@ var component = {
692
517
  backgroundColor: "color-mix(in srgb, #222222, #fcfcfc calc(0.12 * 100%))"
693
518
  },
694
519
  focus: {
695
- outline: "0.125rem solid #222222",
696
- outlineOffset: "2px"
520
+ outline: "0.125rem solid #222222"
697
521
  },
698
522
  disabled: {
699
523
  backgroundColor: "#f2f2f2",
@@ -742,20 +566,6 @@ var component = {
742
566
  textColor: "rgba(34, 34, 34, 0.208)"
743
567
  }
744
568
  },
745
- emphasis: {
746
- backgroundColor: "#0162bf",
747
- textColor: "#fcfcfc",
748
- hover: {
749
- backgroundColor: "color-mix(in srgb, #0162bf, #fcfcfc calc(0.08 * 100%))"
750
- },
751
- active: {
752
- backgroundColor: "color-mix(in srgb, #0162bf, #fcfcfc calc(0.12 * 100%))"
753
- },
754
- disabled: {
755
- backgroundColor: "#f2f2f2",
756
- textColor: "rgba(34, 34, 34, 0.208)"
757
- }
758
- },
759
569
  danger: {
760
570
  backgroundColor: "#c90002",
761
571
  textColor: "#fcfcfc",
@@ -773,16 +583,13 @@ var component = {
773
583
  },
774
584
  sizes: {
775
585
  small: {
776
- padding: "0.5rem 0.75rem",
777
586
  font: "400 0.75rem/1rem 'Inter', sans-serif",
778
587
  fontWeight: "500"
779
588
  },
780
589
  medium: {
781
- padding: "0.5rem 1rem",
782
590
  font: "500 0.875rem/1.5rem 'Inter', sans-serif"
783
591
  },
784
592
  large: {
785
- padding: "0.75rem 1rem",
786
593
  font: "500 1rem/1.5rem 'Inter', sans-serif"
787
594
  }
788
595
  }
@@ -795,38 +602,16 @@ var component = {
795
602
  backgroundColor: "#f2f2f2",
796
603
  textColor: "#222222",
797
604
  borderRadius: "0.75rem",
798
- padding: "2px 0.5rem",
799
605
  font: "400 1rem/1.5rem 'Inter', sans-serif"
800
606
  },
801
- hover: {
802
- backgroundColor: "#ebebeb"
803
- },
804
- active: {
805
- backgroundColor: "#e4e4e4"
806
- },
807
607
  focus: {
808
- outline: "0.125rem solid #222222",
809
- outlineOffset: "2px"
608
+ outline: "0.125rem solid #222222"
810
609
  },
811
610
  disabled: {
812
611
  backgroundColor: "#f2f2f2",
813
612
  textColor: "rgba(34, 34, 34, 0.208)"
814
613
  },
815
614
  variants: {
816
- emphasis: {
817
- backgroundColor: "#222222",
818
- textColor: "#fcfcfc",
819
- hover: {
820
- backgroundColor: "color-mix(in srgb, #222222, #fcfcfc calc(0.08 * 100%))"
821
- },
822
- active: {
823
- backgroundColor: "color-mix(in srgb, #222222, #fcfcfc calc(0.12 * 100%))"
824
- },
825
- disabled: {
826
- backgroundColor: "#f2f2f2",
827
- textColor: "rgba(34, 34, 34, 0.208)"
828
- }
829
- },
830
615
  subtle: {
831
616
  backgroundColor: "#ffffff",
832
617
  textColor: "#222222",
@@ -840,139 +625,38 @@ var component = {
840
625
  backgroundColor: "#ffffff",
841
626
  textColor: "rgba(34, 34, 34, 0.208)"
842
627
  }
843
- },
844
- interactive: {
845
- backgroundColor: "#0162bf",
846
- textColor: "#fcfcfc",
847
- hover: {
848
- backgroundColor: "color-mix(in srgb, #0162bf, #fcfcfc calc(0.08 * 100%))"
849
- },
850
- active: {
851
- backgroundColor: "color-mix(in srgb, #0162bf, #fcfcfc calc(0.12 * 100%))"
852
- },
853
- disabled: {
854
- backgroundColor: "#f2f2f2",
855
- textColor: "rgba(34, 34, 34, 0.208)"
856
- }
857
628
  }
858
629
  },
859
630
  sizes: {
860
- small: {
861
- padding: "2px 0.5rem",
862
- font: "400 0.75rem/1rem 'Inter', sans-serif"
863
- },
864
631
  medium: {
865
- padding: "2px 0.5rem",
866
632
  font: "400 0.875rem/1.25rem 'Inter', sans-serif"
867
- },
868
- large: {
869
- padding: "0.5rem 0.75rem",
870
- font: "400 1rem/1.5rem 'Inter', sans-serif"
871
633
  }
872
634
  }
873
635
  },
874
636
  iconButton: {
875
637
  primary: {
876
- backgroundColor: "#222222",
877
- borderRadius: "0.25rem",
878
- minWidth: "40px",
879
- minHeight: "40px",
880
- display: "flex",
881
- alignItems: "center",
882
- justifyContent: "center"
883
- },
884
- hover: {
885
- backgroundColor: "color-mix(in srgb, #222222, #fcfcfc calc(0.08 * 100%))"
886
- },
887
- active: {
888
- backgroundColor: "color-mix(in srgb, #222222, #fcfcfc calc(0.12 * 100%))"
638
+ borderRadius: "0.25rem"
889
639
  },
890
640
  focus: {
891
- outline: "0.125rem solid #222222",
892
- outlineOffset: "2px"
893
- },
894
- disabled: {
895
- backgroundColor: "#f2f2f2"
896
- },
897
- variants: {
898
- secondary: {
899
- backgroundColor: "#f2f2f2",
900
- hover: {
901
- backgroundColor: "#f2f2f2"
902
- },
903
- active: {
904
- backgroundColor: "#fcfcfc"
905
- },
906
- disabled: {
907
- backgroundColor: "#f2f2f2"
908
- }
909
- },
910
- naked: {
911
- backgroundColor: "transparent",
912
- hover: {
913
- backgroundColor: "#f2f2f2"
914
- },
915
- active: {
916
- backgroundColor: "#f2f2f2"
917
- },
918
- disabled: {
919
- backgroundColor: "transparent"
920
- }
921
- }
922
- },
923
- sizes: {
924
- small: {
925
- minWidth: "32px",
926
- minHeight: "32px",
927
- padding: "0.25rem"
928
- },
929
- medium: {
930
- minWidth: "40px",
931
- minHeight: "40px",
932
- padding: "0.5rem"
933
- },
934
- large: {
935
- minWidth: "48px",
936
- minHeight: "48px",
937
- padding: "0.75rem"
938
- }
641
+ outline: "0.125rem solid #222222"
939
642
  }
940
643
  },
941
644
  separator: {
942
645
  border: "0.0625rem solid #d1d1d1",
943
- margin: "2rem 0",
944
646
  variants: {
945
647
  "default": {
946
- border: "0.0625rem solid #d1d1d1",
947
- margin: "2rem 0"
648
+ border: "0.0625rem solid #d1d1d1"
948
649
  },
949
650
  strong: {
950
- border: "0.0625rem solid #636363",
951
- margin: "2rem 0"
651
+ border: "0.0625rem solid #636363"
952
652
  },
953
653
  minimal: {
954
- border: "0.0625rem solid #d1d1d1",
955
- margin: "1.5rem 0"
956
- }
957
- },
958
- sizes: {
959
- small: {
960
- margin: "1rem 0"
961
- },
962
- medium: {
963
- margin: "1.5rem 0"
964
- },
965
- large: {
966
- margin: "2rem 0"
967
- },
968
- xlarge: {
969
- margin: "3rem 0"
654
+ border: "0.0625rem solid #d1d1d1"
970
655
  }
971
656
  }
972
657
  },
973
658
  progressBar: {
974
659
  backgroundColor: "#f2f2f2",
975
- borderRadius: "0.25rem",
976
660
  sizes: {
977
661
  sm: {
978
662
  height: "0.25rem"
@@ -995,8 +679,6 @@ var component = {
995
679
  borderColor: "#909090",
996
680
  borderRadius: "0.25rem",
997
681
  borderWidth: "0.0625rem",
998
- paddingY: "11px",
999
- paddingX: "1rem",
1000
682
  font: "400 1rem/1.5rem 'Inter', sans-serif"
1001
683
  },
1002
684
  placeholder: {
@@ -1007,15 +689,13 @@ var component = {
1007
689
  },
1008
690
  focus: {
1009
691
  borderColor: "#222222",
1010
- outline: "0.125rem solid #222222",
1011
- outlineOffset: "2px"
692
+ outline: "0.125rem solid #222222"
1012
693
  },
1013
694
  error: {
1014
695
  borderColor: "#ff5444",
1015
696
  focus: {
1016
697
  borderColor: "#ff5444",
1017
- outline: "0.125rem solid #222222",
1018
- outlineOffset: "2px"
698
+ outline: "0.125rem solid #222222"
1019
699
  },
1020
700
  hover: {
1021
701
  borderColor: "#ff5444"
@@ -1024,8 +704,7 @@ var component = {
1024
704
  disabled: {
1025
705
  backgroundColor: "#f2f2f2",
1026
706
  textColor: "rgba(34, 34, 34, 0.208)",
1027
- borderColor: "#d1d1d1",
1028
- cursor: "not-allowed"
707
+ borderColor: "#d1d1d1"
1029
708
  },
1030
709
  textarea: {
1031
710
  minHeight: "7.5rem"
@@ -1038,7 +717,6 @@ var component = {
1038
717
  count: {
1039
718
  minWidth: "1rem",
1040
719
  height: "1rem",
1041
- paddingX: "0.25rem",
1042
720
  lineHeight: "1"
1043
721
  },
1044
722
  ring: {
@@ -1054,12 +732,10 @@ var component = {
1054
732
  }
1055
733
  },
1056
734
  field: {
1057
- gap: "0.5rem",
1058
735
  label: {
1059
736
  typography: "600 0.875rem/1.25rem 'Inter', sans-serif",
1060
737
  color: "#222222",
1061
- colorDisabled: "rgba(34, 34, 34, 0.208)",
1062
- gap: "0.25rem"
738
+ colorDisabled: "rgba(34, 34, 34, 0.208)"
1063
739
  },
1064
740
  requiredIndicator: {
1065
741
  color: "#c90002",
@@ -1172,8 +848,7 @@ var component = {
1172
848
  breadcrumbs: {
1173
849
  item: {
1174
850
  maxWidth: "11.25rem"
1175
- },
1176
- font: "400 0.75rem/1rem 'Inter', sans-serif"
851
+ }
1177
852
  },
1178
853
  cardLarge: {
1179
854
  maxWidth: "48rem"
@@ -1235,19 +910,8 @@ var component = {
1235
910
  background: "#f2f2f2"
1236
911
  }
1237
912
  },
1238
- transaction: {
1239
- credit: "#009762",
1240
- "credit-hover": "#009762",
1241
- debit: "#ff2b21",
1242
- "debit-hover": "#ff2b21",
1243
- pending: "#636363",
1244
- neutral: "#636363"
1245
- },
1246
913
  track: {
1247
914
  background: "#f2f2f2"
1248
- },
1249
- tooltip: {
1250
- border: "0.0625rem solid #d1d1d1"
1251
915
  }
1252
916
  };
1253
917
  var semantic = {
@@ -1305,35 +969,14 @@ var semantic = {
1305
969
  semibold: "600",
1306
970
  bold: "700"
1307
971
  },
1308
- zIndex: {
1309
- sticky: "10",
1310
- dropdown: "1000",
1311
- overlay: "1010",
1312
- modal: "1020"
1313
- },
1314
972
  border: {
1315
973
  "default": "0.0625rem solid #d1d1d1",
1316
- subtle: "0.0625rem solid #d1d1d1",
1317
- strong: "0.0625rem solid #636363",
1318
974
  focus: "0.125rem solid #222222",
1319
- tooltip: "0.0625rem solid #d1d1d1",
1320
975
  width: {
1321
976
  thin: "0.0625rem",
1322
977
  thick: "0.125rem"
1323
978
  },
1324
979
  focusOffset: "0.125rem",
1325
- radius: {
1326
- none: "0",
1327
- xs: "0.125rem",
1328
- sm: "0.25rem",
1329
- md: "0.5rem",
1330
- lg: "0.75rem",
1331
- xl: "1rem",
1332
- "2xl": "1.5rem",
1333
- "3xl": "2rem",
1334
- circle: "10rem"
1335
- },
1336
- emphasis: "0.0625rem solid #d1d1d1",
1337
980
  "input-hover": "0.0625rem solid #636363"
1338
981
  },
1339
982
  size: {
@@ -1374,25 +1017,6 @@ var semantic = {
1374
1017
  menu: {
1375
1018
  maxHeight: "18.75rem"
1376
1019
  },
1377
- dimension: {
1378
- "1": "0.25rem",
1379
- "2": "0.5rem",
1380
- "4": "1rem",
1381
- "5": "1.25rem",
1382
- "6": "1.5rem",
1383
- "8": "2rem",
1384
- "12": "3rem",
1385
- "15": "3.75rem",
1386
- "18": "4.5rem",
1387
- "20": "5rem",
1388
- "30": "7.5rem",
1389
- "45": "11.25rem",
1390
- "50": "12.5rem",
1391
- "75": "18.75rem",
1392
- "90": "22.5rem",
1393
- "100": "25rem",
1394
- "192": "48rem"
1395
- },
1396
1020
  icon: {
1397
1021
  xs: "0.75rem",
1398
1022
  sm: "1rem",
@@ -1410,106 +1034,28 @@ var semantic = {
1410
1034
  }
1411
1035
  },
1412
1036
  spacing: {
1413
- separator: {
1414
- sm: "1rem",
1415
- md: "1.5rem",
1416
- lg: "2rem",
1417
- xl: "3rem"
1418
- },
1419
- component: {
1420
- xs: "0.25rem",
1421
- sm: "0.5rem",
1422
- md: "0.75rem",
1423
- lg: "1rem",
1424
- xl: "1.25rem",
1425
- "2xl": "1.5rem"
1426
- },
1427
1037
  layout: {
1428
- none: "0",
1429
- xs: "0.25rem",
1430
- sm: "0.5rem",
1431
- md: "0.75rem",
1432
- lg: "1rem",
1433
- xl: "1.25rem",
1434
- "2xl": "1.5rem",
1435
- "3xl": "1.75rem",
1436
- "4xl": "2rem",
1437
- "5xl": "2.25rem",
1438
- "6xl": "2.5rem",
1439
- "7xl": "3rem",
1440
- "8xl": "3.5rem",
1441
- "9xl": "4rem",
1442
- "10xl": "5rem",
1443
- "11xl": "6rem",
1444
1038
  auto: "auto"
1445
1039
  }
1446
1040
  },
1447
1041
  color: {
1448
1042
  text: {
1449
1043
  "default": "#222222",
1450
- emphasis: "#222222",
1451
- subdued: "#636363",
1452
1044
  inverse: "#fcfcfc",
1453
1045
  disabled: "rgba(34, 34, 34, 0.208)",
1454
- interactive: "#0162bf",
1455
- "interactive-hover": "#0162bf",
1456
- "interactive-active": "#0162bf",
1457
- error: "#c90002",
1458
1046
  success: "#017249",
1459
1047
  warning: "#835c00",
1460
1048
  muted: "#636363",
1461
1049
  accent: "#0162bf",
1462
- "accent-hover": "#0162bf",
1463
- "accent-pressed": "#0162bf",
1464
1050
  danger: "#c90002",
1465
1051
  ai: "#9602eb",
1466
1052
  serious: "#a54703"
1467
1053
  },
1468
- background: {
1469
- "default": "#fcfcfc",
1470
- subtle: "#ffffff",
1471
- emphasis: "#222222",
1472
- "emphasis-hover": "#343a40",
1473
- "emphasis-active": "#16191C",
1474
- surface: "#f2f2f2",
1475
- inverse: "#222222",
1476
- interactive: "#0162bf",
1477
- "interactive-subtle": "#edf3fa",
1478
- "interactive-subtle-hover": "#e3ecf8",
1479
- "interactive-subtle-active": "#d8e5f6",
1480
- "interactive-hover": "color-mix(in srgb, #0162bf, #fcfcfc calc(0.08 * 100%))",
1481
- "interactive-active": "color-mix(in srgb, #0162bf, #fcfcfc calc(0.12 * 100%))",
1482
- error: "#c90002",
1483
- "error-hover": "color-mix(in srgb, #c90002, #fcfcfc calc(0.08 * 100%))",
1484
- "error-active": "color-mix(in srgb, #c90002, #fcfcfc calc(0.12 * 100%))",
1485
- "error-subtle": "#faf0ee",
1486
- success: "#017249",
1487
- "success-subtle": "#dbf9e8",
1488
- warning: "#835c00",
1489
- "warning-subtle": "#faf1e3",
1490
- disabled: "#f2f2f2",
1491
- neutral: "#f2f2f2",
1492
- "neutral-hover": "#ebebeb",
1493
- "neutral-active": "#e4e4e4",
1494
- transparent: "transparent",
1495
- progressTrack: "#f2f2f2",
1496
- page: "#fcfcfc",
1497
- overlay: "rgba(34, 34, 34, 0.5)",
1498
- "hover-overlay": "rgba(34, 34, 34, 0.1)",
1499
- "active-overlay": "rgba(34, 34, 34, 0.15)",
1500
- "inverse-overlay": "rgba(255, 255, 255, 0.2)"
1501
- },
1502
1054
  border: {
1503
1055
  "default": "#d1d1d1",
1504
- subtle: "#d1d1d1",
1505
- control: "#909090",
1506
- strong: "#343a40",
1507
- interactive: "#3190fe",
1508
- error: "#ff5444",
1509
1056
  success: "#02a56c",
1510
1057
  warning: "#bd8600",
1511
1058
  none: "transparent",
1512
- emphasis: "#d1d1d1",
1513
1059
  input: "#909090",
1514
1060
  "input-hover": "#636363",
1515
1061
  focus: "#222222",
@@ -1520,80 +1066,20 @@ var semantic = {
1520
1066
  },
1521
1067
  icon: {
1522
1068
  "default": "#222222",
1523
- emphasis: "#222222",
1524
- subdued: "#636363",
1525
1069
  disabled: "rgba(34, 34, 34, 0.208)",
1526
1070
  inverse: "#fcfcfc",
1527
- interactive: "#0162bf",
1528
- "interactive-hover": "#0162bf",
1529
- "interactive-active": "#0162bf",
1530
- error: "#c90002",
1531
1071
  success: "#017249",
1532
1072
  warning: "#835c00",
1533
1073
  muted: "#636363",
1534
1074
  accent: "#0162bf",
1535
- "accent-hover": "#0162bf",
1536
- "accent-pressed": "#0162bf",
1537
1075
  danger: "#c90002",
1538
1076
  ai: "#9602eb",
1539
1077
  serious: "#a54703"
1540
1078
  },
1541
- financial: {
1542
- credit: "#009762",
1543
- "credit-hover": "#009762",
1544
- debit: "#ff2b21",
1545
- "debit-hover": "#ff2b21",
1546
- pending: "#636363",
1547
- neutral: "#636363"
1548
- },
1549
1079
  category: {
1550
- blue: "#7a84ff",
1551
- "blue-strong": "#533eff",
1552
- "blue-emphasis": "#533eff",
1553
- "blue-subtle": "#f0f2fa",
1554
- purple: "#fd00fa",
1555
- "purple-strong": "#b100af",
1556
- "purple-emphasis": "#b100af",
1557
- "purple-subtle": "#faeff9",
1558
- pink: "#ff4989",
1559
- "pink-strong": "#c4005d",
1560
- "pink-emphasis": "#c4005d",
1561
- "pink-subtle": "#faeff1",
1562
- yellow: "#889903",
1563
- "yellow-strong": "#5d6900",
1564
- "yellow-emphasis": "#5d6900",
1565
- "yellow-subtle": "#eff6d4",
1566
- green: "#889903",
1567
- "green-strong": "#5d6900",
1568
- "green-emphasis": "#5d6900",
1569
- "green-subtle": "#eff6d4",
1570
- red: "#ff4989",
1571
- "red-strong": "#c4005d",
1572
- "red-emphasis": "#c4005d",
1573
- "red-subtle": "#faeff1",
1574
- orange: "#ff4989",
1575
- "orange-strong": "#c4005d",
1576
- "orange-emphasis": "#c4005d",
1577
- "orange-subtle": "#faeff1",
1578
1080
  gray: "#909090",
1579
1081
  "gray-strong": "#636363",
1580
- "gray-emphasis": "#636363",
1581
- "gray-subtle": "#f2f2f2",
1582
- "blue-text": "#533eff",
1583
- "purple-text": "#b100af",
1584
- "pink-text": "#c4005d",
1585
- "yellow-text": "#5d6900",
1586
- "green-text": "#5d6900",
1587
- "red-text": "#c4005d",
1588
- "orange-text": "#c4005d",
1589
1082
  "gray-text": "#636363",
1590
- "blue-muted": "#f0f2fa",
1591
- "purple-muted": "#faeff9",
1592
- "pink-muted": "#faeff1",
1593
- "yellow-muted": "#eff6d4",
1594
- "green-muted": "#eff6d4",
1595
- "red-muted": "#faeff1",
1596
- "orange-muted": "#faeff1",
1597
1083
  "gray-muted": "#f2f2f2",
1598
1084
  olive: "#889903",
1599
1085
  "olive-strong": "#5d6900",
@@ -1612,24 +1098,8 @@ var semantic = {
1612
1098
  "magenta-text": "#b100af",
1613
1099
  "magenta-muted": "#faeff9"
1614
1100
  },
1615
- status: {
1616
- pending: "#636363",
1617
- "pending-bg": "#f2f2f2",
1618
- completed: "#017249",
1619
- "completed-bg": "#dbf9e8",
1620
- failed: "#c90002",
1621
- "failed-bg": "#faf0ee",
1622
- cancelled: "#636363",
1623
- "cancelled-bg": "#f2f2f2",
1624
- processing: "#0162bf",
1625
- "processing-bg": "#edf3fa",
1626
- scheduled: "#636363",
1627
- "scheduled-bg": "#f2f2f2"
1628
- },
1629
1101
  fill: {
1630
1102
  emphasis: "#222222",
1631
- "emphasis-hover": "#343a40",
1632
- "emphasis-pressed": "#16191C",
1633
1103
  muted: "#f2f2f2",
1634
1104
  inverse: "#222222",
1635
1105
  accent: "#0162bf",
@@ -1701,38 +1171,25 @@ var semantic = {
1701
1171
  small: "400 0.875rem/1.25rem 'Inter', sans-serif",
1702
1172
  overline: "700 0.75rem/1rem 'Inter', sans-serif",
1703
1173
  caption: "400 0.75rem/1rem 'Inter', sans-serif",
1704
- button1: "500 1rem/1.5rem 'Inter', sans-serif",
1705
- button2: "500 0.875rem/1.5rem 'Inter', sans-serif",
1706
- button3: "400 0.75rem/1rem 'Inter', sans-serif",
1707
- label: "600 0.875rem/1.25rem 'Inter', sans-serif",
1708
- breadcrumb: "400 0.75rem/1rem 'Inter', sans-serif"
1174
+ label: "600 0.875rem/1.25rem 'Inter', sans-serif"
1709
1175
  },
1710
1176
  motion: {
1711
1177
  duration: {
1712
- normal: "200ms",
1713
1178
  fast: "150ms",
1714
1179
  slow: "300ms",
1715
1180
  instant: "0ms",
1716
1181
  moderate: "200ms"
1717
1182
  },
1718
1183
  easing: {
1719
- easeInOut: "ease-in-out",
1720
- easeOut: "ease-out",
1721
1184
  standard: "ease-in-out",
1722
1185
  decelerate: "ease-out",
1723
1186
  accelerate: "ease-in"
1724
1187
  },
1725
1188
  transition: {
1726
- fast: "all 150ms ease-out",
1727
- normal: "all 200ms ease-in-out",
1728
- slow: "all 300ms ease-in-out",
1729
1189
  feedback: "background-color 150ms ease-out, color 150ms ease-out",
1730
1190
  focus: "outline 150ms ease-out, outline-offset 150ms ease-out",
1731
1191
  press: "transform 150ms ease-out, opacity 150ms ease-out"
1732
1192
  },
1733
- hover: "background-color 150ms ease-out, color 150ms ease-out",
1734
- focus: "outline 150ms ease-out, outline-offset 150ms ease-out",
1735
- interactive: "transform 150ms ease-out, opacity 150ms ease-out",
1736
1193
  distance: {
1737
1194
  sm: "0.5rem"
1738
1195
  }