@common-origin/design-system 2.15.0 → 2.17.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 (53) hide show
  1. package/README.md +1 -1
  2. package/dist/client.esm.js +949 -649
  3. package/dist/client.esm.js.map +1 -1
  4. package/dist/client.js +951 -647
  5. package/dist/client.js.map +1 -1
  6. package/dist/components/atoms/Button/Button.d.ts +13 -1
  7. package/dist/components/atoms/CategoryBadge/CategoryBadge.d.ts +12 -52
  8. package/dist/components/atoms/CategoryBadge/index.d.ts +1 -1
  9. package/dist/components/atoms/CategoryLabel/CategoryLabel.d.ts +69 -0
  10. package/dist/components/atoms/CategoryLabel/index.d.ts +2 -0
  11. package/dist/components/atoms/Chip/BooleanChip.d.ts +6 -1
  12. package/dist/components/atoms/Chip/Chip.d.ts +17 -12
  13. package/dist/components/atoms/Chip/FilterChip.d.ts +10 -24
  14. package/dist/components/atoms/Chip/InputChip.d.ts +27 -0
  15. package/dist/components/atoms/Chip/index.d.ts +1 -0
  16. package/dist/components/atoms/Chip/shared/types.d.ts +15 -1
  17. package/dist/components/atoms/Chip/shared/utils.d.ts +1 -85
  18. package/dist/components/atoms/DateFormatter/DateFormatter.d.ts +11 -1
  19. package/dist/components/atoms/Icon/Icon.d.ts +11 -0
  20. package/dist/components/atoms/StatusBadge/StatusBadge.d.ts +9 -55
  21. package/dist/components/atoms/StatusBadge/index.d.ts +1 -1
  22. package/dist/components/atoms/StatusLabel/StatusLabel.d.ts +17 -0
  23. package/dist/components/atoms/StatusLabel/StatusLabelBase.d.ts +49 -0
  24. package/dist/components/atoms/StatusLabel/index.d.ts +2 -0
  25. package/dist/components/atoms/Tag/Tag.d.ts +5 -0
  26. package/dist/components/atoms/index.d.ts +2 -0
  27. package/dist/components/molecules/Alert/Alert.d.ts +15 -2
  28. package/dist/components/molecules/DateGroup/DateGroup.d.ts +4 -1
  29. package/dist/components/molecules/InlineAlert/InlineAlert.d.ts +54 -0
  30. package/dist/components/molecules/InlineAlert/index.d.ts +2 -0
  31. package/dist/components/molecules/List/List.d.ts +3 -2
  32. package/dist/components/molecules/List/ListContext.d.ts +6 -0
  33. package/dist/components/molecules/List/ListItem.d.ts +5 -4
  34. package/dist/components/molecules/Modal/Modal.d.ts +6 -2
  35. package/dist/components/molecules/TabBar/TabBar.d.ts +8 -5
  36. package/dist/components/molecules/index.d.ts +1 -0
  37. package/dist/data.esm.js +89 -11
  38. package/dist/data.esm.js.map +1 -1
  39. package/dist/data.js +89 -11
  40. package/dist/data.js.map +1 -1
  41. package/dist/index.esm.js +1 -1
  42. package/dist/index.js +4 -0
  43. package/dist/index.js.map +1 -1
  44. package/dist/styles/tokens.json +89 -11
  45. package/dist/tokens/index.esm.js +89 -11
  46. package/dist/tokens/index.esm.js.map +1 -1
  47. package/dist/tokens/index.js +89 -11
  48. package/dist/tokens/index.js.map +1 -1
  49. package/dist/tokens/types/tokens.d.ts +81 -3
  50. package/dist/tokens.css +769 -0
  51. package/dist/tokens.css.d.ts +4 -0
  52. package/dist/types/tokens.d.ts +81 -3
  53. package/package.json +18 -6
@@ -106,6 +106,7 @@ var base = {
106
106
  fit: "fit-content"
107
107
  },
108
108
  color: {
109
+ transparent: "transparent",
109
110
  neutral: {
110
111
  "100": "#f8f9fa",
111
112
  "200": "#e9ecef",
@@ -326,8 +327,7 @@ var base = {
326
327
  easeInBack: "cubic-bezier(0.36, 0, 0.66, -0.56)",
327
328
  easeOutBack: "cubic-bezier(0.34, 1.56, 0.64, 1)",
328
329
  easeInOutBack: "cubic-bezier(0.68, -0.6, 0.32, 1.6)"
329
- },
330
- $ref: "./base/index.json"
330
+ }
331
331
  };
332
332
  var component = {
333
333
  button: {
@@ -381,6 +381,20 @@ var component = {
381
381
  textColor: "#adb5bd"
382
382
  }
383
383
  },
384
+ accent: {
385
+ backgroundColor: "#0265DC",
386
+ textColor: "#ffffff",
387
+ hover: {
388
+ backgroundColor: "#0054B6"
389
+ },
390
+ active: {
391
+ backgroundColor: "#004491"
392
+ },
393
+ disabled: {
394
+ backgroundColor: "#dee2e6",
395
+ textColor: "#adb5bd"
396
+ }
397
+ },
384
398
  emphasis: {
385
399
  backgroundColor: "#0265DC",
386
400
  textColor: "#ffffff",
@@ -630,7 +644,7 @@ var component = {
630
644
  "default": {
631
645
  backgroundColor: "#ffffff",
632
646
  textColor: "#212529",
633
- borderColor: "#dee2e6",
647
+ borderColor: "#6c757d",
634
648
  borderRadius: "0.25rem",
635
649
  borderWidth: "0.0625rem",
636
650
  paddingY: "11px",
@@ -638,7 +652,7 @@ var component = {
638
652
  font: "400 1rem/1.5rem 'Inter', sans-serif"
639
653
  },
640
654
  placeholder: {
641
- textColor: "#adb5bd"
655
+ textColor: "#495057"
642
656
  },
643
657
  hover: {
644
658
  borderColor: "#343a40"
@@ -710,6 +724,42 @@ var component = {
710
724
  }
711
725
  },
712
726
  alert: {
727
+ severity: {
728
+ error: {
729
+ background: "#FFEBE7",
730
+ text: "#D31510"
731
+ },
732
+ warning: {
733
+ background: "#FFECCC",
734
+ text: "#B14C00"
735
+ },
736
+ info: {
737
+ background: "#E0F2FF",
738
+ text: "#0265DC"
739
+ },
740
+ success: {
741
+ background: "#CEF8E0",
742
+ text: "#007A4D"
743
+ }
744
+ },
745
+ appearance: {
746
+ outlined: {
747
+ borderColor: {
748
+ error: "#D31510",
749
+ warning: "#B14C00",
750
+ info: "#0265DC",
751
+ success: "#007A4D"
752
+ }
753
+ },
754
+ borderless: {
755
+ borderColor: {
756
+ error: "transparent",
757
+ warning: "transparent",
758
+ info: "transparent",
759
+ success: "transparent"
760
+ }
761
+ }
762
+ },
713
763
  title: {
714
764
  typography: "500 1.125rem/1.5rem 'Inter', sans-serif",
715
765
  fontWeight: "600",
@@ -808,8 +858,7 @@ var component = {
808
858
  },
809
859
  transactionListItem: {
810
860
  minHeight: "4.5rem"
811
- },
812
- $ref: "./component/index.json"
861
+ }
813
862
  };
814
863
  var semantic = {
815
864
  elevation: {
@@ -896,12 +945,20 @@ var semantic = {
896
945
  md: "35rem",
897
946
  lg: "45rem"
898
947
  },
948
+ label: {
949
+ small: "1.25rem",
950
+ medium: "1.5rem",
951
+ large: "2rem"
952
+ },
899
953
  menu: {
900
954
  maxHeight: "18.75rem"
901
955
  },
902
956
  dimension: {
903
957
  "1": "0.25rem",
958
+ "2": "0.5rem",
959
+ "4": "1rem",
904
960
  "5": "1.25rem",
961
+ "6": "1.5rem",
905
962
  "8": "2rem",
906
963
  "12": "3rem",
907
964
  "15": "3.75rem",
@@ -974,6 +1031,8 @@ var semantic = {
974
1031
  inverse: "#ffffff",
975
1032
  disabled: "#adb5bd",
976
1033
  interactive: "#0265DC",
1034
+ "interactive-hover": "#0054B6",
1035
+ "interactive-active": "#004491",
977
1036
  error: "#D31510",
978
1037
  success: "#007A4D",
979
1038
  warning: "#B14C00"
@@ -982,19 +1041,29 @@ var semantic = {
982
1041
  "default": "#f8f9fa",
983
1042
  subtle: "#ffffff",
984
1043
  emphasis: "#212529",
1044
+ "emphasis-hover": "#343a40",
1045
+ "emphasis-active": "#16191C",
985
1046
  surface: "#e9ecef",
986
1047
  inverse: "#343a40",
987
1048
  interactive: "#0265DC",
988
1049
  "interactive-subtle": "#E0F2FF",
1050
+ "interactive-subtle-hover": "#CAE8FF",
1051
+ "interactive-subtle-active": "#B5DEFF",
989
1052
  "interactive-hover": "#0054B6",
990
1053
  "interactive-active": "#004491",
991
1054
  error: "#D31510",
1055
+ "error-hover": "#B40000",
1056
+ "error-active": "#930000",
992
1057
  "error-subtle": "#FFEBE7",
993
1058
  success: "#007A4D",
994
1059
  "success-subtle": "#CEF8E0",
995
1060
  warning: "#B14C00",
996
1061
  "warning-subtle": "#FFECCC",
997
1062
  disabled: "#dee2e6",
1063
+ neutral: "#dee2e6",
1064
+ "neutral-hover": "#ced4da",
1065
+ "neutral-active": "#adb5bd",
1066
+ transparent: "transparent",
998
1067
  progressTrack: "#dee2e6",
999
1068
  page: "#f8f9fa",
1000
1069
  overlay: "rgba(33, 37, 41, 0.5)",
@@ -1005,11 +1074,13 @@ var semantic = {
1005
1074
  border: {
1006
1075
  "default": "#e9ecef",
1007
1076
  subtle: "#dee2e6",
1077
+ control: "#6c757d",
1008
1078
  strong: "#343a40",
1009
1079
  interactive: "#0265DC",
1010
1080
  error: "#D31510",
1011
1081
  success: "#007A4D",
1012
- warning: "#B14C00"
1082
+ warning: "#B14C00",
1083
+ none: "transparent"
1013
1084
  },
1014
1085
  icon: {
1015
1086
  "default": "#212529",
@@ -1056,10 +1127,18 @@ var semantic = {
1056
1127
  "orange-subtle": "#FFECCC",
1057
1128
  gray: "#495057",
1058
1129
  "gray-emphasis": "#212529",
1059
- "gray-subtle": "#e9ecef"
1130
+ "gray-subtle": "#e9ecef",
1131
+ "blue-text": "#0265DC",
1132
+ "purple-text": "#7E2EBD",
1133
+ "pink-text": "#B90064",
1134
+ "yellow-text": "#825800",
1135
+ "green-text": "#007A4D",
1136
+ "red-text": "#D31510",
1137
+ "orange-text": "#B14C00",
1138
+ "gray-text": "#212529"
1060
1139
  },
1061
1140
  status: {
1062
- pending: "#D39700",
1141
+ pending: "#825800",
1063
1142
  "pending-bg": "#FFF3D6",
1064
1143
  completed: "#007A4D",
1065
1144
  "completed-bg": "#CEF8E0",
@@ -1110,8 +1189,7 @@ var semantic = {
1110
1189
  hover: "background-color 150ms ease-out, color 150ms ease-out",
1111
1190
  focus: "outline 150ms ease-out, outline-offset 150ms ease-out",
1112
1191
  interactive: "transform 150ms ease-out, opacity 150ms ease-out"
1113
- },
1114
- $ref: "./semantic/index.json"
1192
+ }
1115
1193
  };
1116
1194
  var tokensJson = {
1117
1195
  base: base,
@@ -1 +1 @@
1
- {"version":3,"file":"index.esm.js","sources":["../../src/types/tokens.ts","../../src/tokens.ts"],"sourcesContent":["import tokensJson from '../styles/tokens.json'\n\n// Re-declared as a const so emitted .d.ts files inline the token shape instead of importing JSON,\n// which consumers can only resolve with `resolveJsonModule`.\nexport const tokens = tokensJson\n\nexport type Tokens = typeof tokens\nexport type TokensBase = Tokens['base']\nexport type TokensSemantic = Tokens['semantic']\nexport type TokensComponent = Tokens['component']\n","// Tokens-only export for standalone usage\nimport { tokens } from './types/tokens'\n\nexport { tokens }\nexport default tokens\n\nexport type {\n Tokens,\n TokensBase,\n TokensSemantic,\n TokensComponent\n} from './types/tokens'\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAEA;AACA;AACO,IAAM,MAAM,GAAG;;ACJtB;;;;"}
1
+ {"version":3,"file":"index.esm.js","sources":["../../src/types/tokens.ts","../../src/tokens.ts"],"sourcesContent":["import tokensJson from '../styles/tokens.json'\n\n// Re-declared as a const so emitted .d.ts files inline the token shape instead of importing JSON,\n// which consumers can only resolve with `resolveJsonModule`.\nexport const tokens = tokensJson\n\nexport type Tokens = typeof tokens\nexport type TokensBase = Tokens['base']\nexport type TokensSemantic = Tokens['semantic']\nexport type TokensComponent = Tokens['component']\n","// Tokens-only export for standalone usage\nimport { tokens } from './types/tokens'\n\nexport { tokens }\nexport default tokens\n\nexport type {\n Tokens,\n TokensBase,\n TokensSemantic,\n TokensComponent\n} from './types/tokens'\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAEA;AACA;AACO,IAAM,MAAM,GAAG;;ACJtB;;;;"}
@@ -110,6 +110,7 @@ var base = {
110
110
  fit: "fit-content"
111
111
  },
112
112
  color: {
113
+ transparent: "transparent",
113
114
  neutral: {
114
115
  "100": "#f8f9fa",
115
116
  "200": "#e9ecef",
@@ -330,8 +331,7 @@ var base = {
330
331
  easeInBack: "cubic-bezier(0.36, 0, 0.66, -0.56)",
331
332
  easeOutBack: "cubic-bezier(0.34, 1.56, 0.64, 1)",
332
333
  easeInOutBack: "cubic-bezier(0.68, -0.6, 0.32, 1.6)"
333
- },
334
- $ref: "./base/index.json"
334
+ }
335
335
  };
336
336
  var component = {
337
337
  button: {
@@ -385,6 +385,20 @@ var component = {
385
385
  textColor: "#adb5bd"
386
386
  }
387
387
  },
388
+ accent: {
389
+ backgroundColor: "#0265DC",
390
+ textColor: "#ffffff",
391
+ hover: {
392
+ backgroundColor: "#0054B6"
393
+ },
394
+ active: {
395
+ backgroundColor: "#004491"
396
+ },
397
+ disabled: {
398
+ backgroundColor: "#dee2e6",
399
+ textColor: "#adb5bd"
400
+ }
401
+ },
388
402
  emphasis: {
389
403
  backgroundColor: "#0265DC",
390
404
  textColor: "#ffffff",
@@ -634,7 +648,7 @@ var component = {
634
648
  "default": {
635
649
  backgroundColor: "#ffffff",
636
650
  textColor: "#212529",
637
- borderColor: "#dee2e6",
651
+ borderColor: "#6c757d",
638
652
  borderRadius: "0.25rem",
639
653
  borderWidth: "0.0625rem",
640
654
  paddingY: "11px",
@@ -642,7 +656,7 @@ var component = {
642
656
  font: "400 1rem/1.5rem 'Inter', sans-serif"
643
657
  },
644
658
  placeholder: {
645
- textColor: "#adb5bd"
659
+ textColor: "#495057"
646
660
  },
647
661
  hover: {
648
662
  borderColor: "#343a40"
@@ -714,6 +728,42 @@ var component = {
714
728
  }
715
729
  },
716
730
  alert: {
731
+ severity: {
732
+ error: {
733
+ background: "#FFEBE7",
734
+ text: "#D31510"
735
+ },
736
+ warning: {
737
+ background: "#FFECCC",
738
+ text: "#B14C00"
739
+ },
740
+ info: {
741
+ background: "#E0F2FF",
742
+ text: "#0265DC"
743
+ },
744
+ success: {
745
+ background: "#CEF8E0",
746
+ text: "#007A4D"
747
+ }
748
+ },
749
+ appearance: {
750
+ outlined: {
751
+ borderColor: {
752
+ error: "#D31510",
753
+ warning: "#B14C00",
754
+ info: "#0265DC",
755
+ success: "#007A4D"
756
+ }
757
+ },
758
+ borderless: {
759
+ borderColor: {
760
+ error: "transparent",
761
+ warning: "transparent",
762
+ info: "transparent",
763
+ success: "transparent"
764
+ }
765
+ }
766
+ },
717
767
  title: {
718
768
  typography: "500 1.125rem/1.5rem 'Inter', sans-serif",
719
769
  fontWeight: "600",
@@ -812,8 +862,7 @@ var component = {
812
862
  },
813
863
  transactionListItem: {
814
864
  minHeight: "4.5rem"
815
- },
816
- $ref: "./component/index.json"
865
+ }
817
866
  };
818
867
  var semantic = {
819
868
  elevation: {
@@ -900,12 +949,20 @@ var semantic = {
900
949
  md: "35rem",
901
950
  lg: "45rem"
902
951
  },
952
+ label: {
953
+ small: "1.25rem",
954
+ medium: "1.5rem",
955
+ large: "2rem"
956
+ },
903
957
  menu: {
904
958
  maxHeight: "18.75rem"
905
959
  },
906
960
  dimension: {
907
961
  "1": "0.25rem",
962
+ "2": "0.5rem",
963
+ "4": "1rem",
908
964
  "5": "1.25rem",
965
+ "6": "1.5rem",
909
966
  "8": "2rem",
910
967
  "12": "3rem",
911
968
  "15": "3.75rem",
@@ -978,6 +1035,8 @@ var semantic = {
978
1035
  inverse: "#ffffff",
979
1036
  disabled: "#adb5bd",
980
1037
  interactive: "#0265DC",
1038
+ "interactive-hover": "#0054B6",
1039
+ "interactive-active": "#004491",
981
1040
  error: "#D31510",
982
1041
  success: "#007A4D",
983
1042
  warning: "#B14C00"
@@ -986,19 +1045,29 @@ var semantic = {
986
1045
  "default": "#f8f9fa",
987
1046
  subtle: "#ffffff",
988
1047
  emphasis: "#212529",
1048
+ "emphasis-hover": "#343a40",
1049
+ "emphasis-active": "#16191C",
989
1050
  surface: "#e9ecef",
990
1051
  inverse: "#343a40",
991
1052
  interactive: "#0265DC",
992
1053
  "interactive-subtle": "#E0F2FF",
1054
+ "interactive-subtle-hover": "#CAE8FF",
1055
+ "interactive-subtle-active": "#B5DEFF",
993
1056
  "interactive-hover": "#0054B6",
994
1057
  "interactive-active": "#004491",
995
1058
  error: "#D31510",
1059
+ "error-hover": "#B40000",
1060
+ "error-active": "#930000",
996
1061
  "error-subtle": "#FFEBE7",
997
1062
  success: "#007A4D",
998
1063
  "success-subtle": "#CEF8E0",
999
1064
  warning: "#B14C00",
1000
1065
  "warning-subtle": "#FFECCC",
1001
1066
  disabled: "#dee2e6",
1067
+ neutral: "#dee2e6",
1068
+ "neutral-hover": "#ced4da",
1069
+ "neutral-active": "#adb5bd",
1070
+ transparent: "transparent",
1002
1071
  progressTrack: "#dee2e6",
1003
1072
  page: "#f8f9fa",
1004
1073
  overlay: "rgba(33, 37, 41, 0.5)",
@@ -1009,11 +1078,13 @@ var semantic = {
1009
1078
  border: {
1010
1079
  "default": "#e9ecef",
1011
1080
  subtle: "#dee2e6",
1081
+ control: "#6c757d",
1012
1082
  strong: "#343a40",
1013
1083
  interactive: "#0265DC",
1014
1084
  error: "#D31510",
1015
1085
  success: "#007A4D",
1016
- warning: "#B14C00"
1086
+ warning: "#B14C00",
1087
+ none: "transparent"
1017
1088
  },
1018
1089
  icon: {
1019
1090
  "default": "#212529",
@@ -1060,10 +1131,18 @@ var semantic = {
1060
1131
  "orange-subtle": "#FFECCC",
1061
1132
  gray: "#495057",
1062
1133
  "gray-emphasis": "#212529",
1063
- "gray-subtle": "#e9ecef"
1134
+ "gray-subtle": "#e9ecef",
1135
+ "blue-text": "#0265DC",
1136
+ "purple-text": "#7E2EBD",
1137
+ "pink-text": "#B90064",
1138
+ "yellow-text": "#825800",
1139
+ "green-text": "#007A4D",
1140
+ "red-text": "#D31510",
1141
+ "orange-text": "#B14C00",
1142
+ "gray-text": "#212529"
1064
1143
  },
1065
1144
  status: {
1066
- pending: "#D39700",
1145
+ pending: "#825800",
1067
1146
  "pending-bg": "#FFF3D6",
1068
1147
  completed: "#007A4D",
1069
1148
  "completed-bg": "#CEF8E0",
@@ -1114,8 +1193,7 @@ var semantic = {
1114
1193
  hover: "background-color 150ms ease-out, color 150ms ease-out",
1115
1194
  focus: "outline 150ms ease-out, outline-offset 150ms ease-out",
1116
1195
  interactive: "transform 150ms ease-out, opacity 150ms ease-out"
1117
- },
1118
- $ref: "./semantic/index.json"
1196
+ }
1119
1197
  };
1120
1198
  var tokensJson = {
1121
1199
  base: base,
@@ -1 +1 @@
1
- {"version":3,"file":"index.js","sources":["../../src/types/tokens.ts","../../src/tokens.ts"],"sourcesContent":["import tokensJson from '../styles/tokens.json'\n\n// Re-declared as a const so emitted .d.ts files inline the token shape instead of importing JSON,\n// which consumers can only resolve with `resolveJsonModule`.\nexport const tokens = tokensJson\n\nexport type Tokens = typeof tokens\nexport type TokensBase = Tokens['base']\nexport type TokensSemantic = Tokens['semantic']\nexport type TokensComponent = Tokens['component']\n","// Tokens-only export for standalone usage\nimport { tokens } from './types/tokens'\n\nexport { tokens }\nexport default tokens\n\nexport type {\n Tokens,\n TokensBase,\n TokensSemantic,\n TokensComponent\n} from './types/tokens'\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAEA;AACA;AACO,IAAM,MAAM,GAAG;;ACJtB;;;;;"}
1
+ {"version":3,"file":"index.js","sources":["../../src/types/tokens.ts","../../src/tokens.ts"],"sourcesContent":["import tokensJson from '../styles/tokens.json'\n\n// Re-declared as a const so emitted .d.ts files inline the token shape instead of importing JSON,\n// which consumers can only resolve with `resolveJsonModule`.\nexport const tokens = tokensJson\n\nexport type Tokens = typeof tokens\nexport type TokensBase = Tokens['base']\nexport type TokensSemantic = Tokens['semantic']\nexport type TokensComponent = Tokens['component']\n","// Tokens-only export for standalone usage\nimport { tokens } from './types/tokens'\n\nexport { tokens }\nexport default tokens\n\nexport type {\n Tokens,\n TokensBase,\n TokensSemantic,\n TokensComponent\n} from './types/tokens'\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAEA;AACA;AACO,IAAM,MAAM,GAAG;;ACJtB;;;;;"}
@@ -107,6 +107,7 @@ export declare const tokens: {
107
107
  fit: string;
108
108
  };
109
109
  color: {
110
+ transparent: string;
110
111
  neutral: {
111
112
  "100": string;
112
113
  "200": string;
@@ -328,7 +329,6 @@ export declare const tokens: {
328
329
  easeOutBack: string;
329
330
  easeInOutBack: string;
330
331
  };
331
- $ref: string;
332
332
  };
333
333
  component: {
334
334
  button: {
@@ -382,6 +382,20 @@ export declare const tokens: {
382
382
  textColor: string;
383
383
  };
384
384
  };
385
+ accent: {
386
+ backgroundColor: string;
387
+ textColor: string;
388
+ hover: {
389
+ backgroundColor: string;
390
+ };
391
+ active: {
392
+ backgroundColor: string;
393
+ };
394
+ disabled: {
395
+ backgroundColor: string;
396
+ textColor: string;
397
+ };
398
+ };
385
399
  emphasis: {
386
400
  backgroundColor: string;
387
401
  textColor: string;
@@ -711,6 +725,42 @@ export declare const tokens: {
711
725
  };
712
726
  };
713
727
  alert: {
728
+ severity: {
729
+ error: {
730
+ background: string;
731
+ text: string;
732
+ };
733
+ warning: {
734
+ background: string;
735
+ text: string;
736
+ };
737
+ info: {
738
+ background: string;
739
+ text: string;
740
+ };
741
+ success: {
742
+ background: string;
743
+ text: string;
744
+ };
745
+ };
746
+ appearance: {
747
+ outlined: {
748
+ borderColor: {
749
+ error: string;
750
+ warning: string;
751
+ info: string;
752
+ success: string;
753
+ };
754
+ };
755
+ borderless: {
756
+ borderColor: {
757
+ error: string;
758
+ warning: string;
759
+ info: string;
760
+ success: string;
761
+ };
762
+ };
763
+ };
714
764
  title: {
715
765
  typography: string;
716
766
  fontWeight: string;
@@ -810,7 +860,6 @@ export declare const tokens: {
810
860
  transactionListItem: {
811
861
  minHeight: string;
812
862
  };
813
- $ref: string;
814
863
  };
815
864
  semantic: {
816
865
  elevation: {
@@ -897,12 +946,20 @@ export declare const tokens: {
897
946
  md: string;
898
947
  lg: string;
899
948
  };
949
+ label: {
950
+ small: string;
951
+ medium: string;
952
+ large: string;
953
+ };
900
954
  menu: {
901
955
  maxHeight: string;
902
956
  };
903
957
  dimension: {
904
958
  "1": string;
959
+ "2": string;
960
+ "4": string;
905
961
  "5": string;
962
+ "6": string;
906
963
  "8": string;
907
964
  "12": string;
908
965
  "15": string;
@@ -975,6 +1032,8 @@ export declare const tokens: {
975
1032
  inverse: string;
976
1033
  disabled: string;
977
1034
  interactive: string;
1035
+ "interactive-hover": string;
1036
+ "interactive-active": string;
978
1037
  error: string;
979
1038
  success: string;
980
1039
  warning: string;
@@ -983,19 +1042,29 @@ export declare const tokens: {
983
1042
  default: string;
984
1043
  subtle: string;
985
1044
  emphasis: string;
1045
+ "emphasis-hover": string;
1046
+ "emphasis-active": string;
986
1047
  surface: string;
987
1048
  inverse: string;
988
1049
  interactive: string;
989
1050
  "interactive-subtle": string;
1051
+ "interactive-subtle-hover": string;
1052
+ "interactive-subtle-active": string;
990
1053
  "interactive-hover": string;
991
1054
  "interactive-active": string;
992
1055
  error: string;
1056
+ "error-hover": string;
1057
+ "error-active": string;
993
1058
  "error-subtle": string;
994
1059
  success: string;
995
1060
  "success-subtle": string;
996
1061
  warning: string;
997
1062
  "warning-subtle": string;
998
1063
  disabled: string;
1064
+ neutral: string;
1065
+ "neutral-hover": string;
1066
+ "neutral-active": string;
1067
+ transparent: string;
999
1068
  progressTrack: string;
1000
1069
  page: string;
1001
1070
  overlay: string;
@@ -1006,11 +1075,13 @@ export declare const tokens: {
1006
1075
  border: {
1007
1076
  default: string;
1008
1077
  subtle: string;
1078
+ control: string;
1009
1079
  strong: string;
1010
1080
  interactive: string;
1011
1081
  error: string;
1012
1082
  success: string;
1013
1083
  warning: string;
1084
+ none: string;
1014
1085
  };
1015
1086
  icon: {
1016
1087
  default: string;
@@ -1058,6 +1129,14 @@ export declare const tokens: {
1058
1129
  gray: string;
1059
1130
  "gray-emphasis": string;
1060
1131
  "gray-subtle": string;
1132
+ "blue-text": string;
1133
+ "purple-text": string;
1134
+ "pink-text": string;
1135
+ "yellow-text": string;
1136
+ "green-text": string;
1137
+ "red-text": string;
1138
+ "orange-text": string;
1139
+ "gray-text": string;
1061
1140
  };
1062
1141
  status: {
1063
1142
  pending: string;
@@ -1112,7 +1191,6 @@ export declare const tokens: {
1112
1191
  focus: string;
1113
1192
  interactive: string;
1114
1193
  };
1115
- $ref: string;
1116
1194
  };
1117
1195
  };
1118
1196
  export type Tokens = typeof tokens;