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