@bundle-stats/ui 4.22.3 → 4.23.0-beta.2

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 (198) hide show
  1. package/lib/app/app.js +3 -0
  2. package/lib/app/app.js.map +1 -1
  3. package/lib/app/app.module.css +12 -2
  4. package/lib/chart-colors.json +58 -44
  5. package/lib/components/delta/delta.js +3 -13
  6. package/lib/components/delta/delta.js.map +1 -1
  7. package/lib/components/delta/delta.module.css +13 -12
  8. package/lib/components/delta/index.js.map +1 -1
  9. package/lib/components/entry-info/entry-info.js +1 -1
  10. package/lib/components/entry-info/entry-info.js.map +1 -1
  11. package/lib/components/entry-info/entry-info.module.css +1 -1
  12. package/lib/components/index.js +3 -1
  13. package/lib/components/index.js.map +1 -1
  14. package/lib/components/insight-icon/insight-icon.module.css +6 -6
  15. package/lib/components/job-name/job-name.js +1 -2
  16. package/lib/components/job-name/job-name.js.map +1 -1
  17. package/lib/components/metric-change-legend/index.js +18 -0
  18. package/lib/components/metric-change-legend/index.js.map +1 -0
  19. package/lib/components/metric-change-legend/metric-change-legend.js +91 -0
  20. package/lib/components/metric-change-legend/metric-change-legend.js.map +1 -0
  21. package/lib/components/metric-change-legend/metric-change-legend.module.css +80 -0
  22. package/lib/components/metric-run-info/metric-run-info.js +22 -7
  23. package/lib/components/metric-run-info/metric-run-info.js.map +1 -1
  24. package/lib/components/metrics-display-selector/metrics-display-selector.js +7 -9
  25. package/lib/components/metrics-display-selector/metrics-display-selector.js.map +1 -1
  26. package/lib/components/metrics-display-selector/metrics-display-selector.module.css +0 -25
  27. package/lib/components/metrics-table-header/metrics-table-header.js +6 -6
  28. package/lib/components/metrics-table-header/metrics-table-header.js.map +1 -1
  29. package/lib/components/metrics-table-header/metrics-table-header.module.css +8 -12
  30. package/lib/components/metrics-table-options/metrics-table-options.js +2 -3
  31. package/lib/components/metrics-table-options/metrics-table-options.js.map +1 -1
  32. package/lib/components/metrics-table-title/metrics-table-title.js +1 -1
  33. package/lib/components/metrics-table-title/metrics-table-title.js.map +1 -1
  34. package/lib/components/metrics-treemap/metrics-treemap.constants.js +3 -1
  35. package/lib/components/metrics-treemap/metrics-treemap.constants.js.map +1 -1
  36. package/lib/components/metrics-treemap/metrics-treemap.js +68 -57
  37. package/lib/components/metrics-treemap/metrics-treemap.js.map +1 -1
  38. package/lib/components/metrics-treemap/metrics-treemap.module.css +9 -16
  39. package/lib/components/metrics-treemap/metrics-treemap.utils.js +72 -16
  40. package/lib/components/metrics-treemap/metrics-treemap.utils.js.map +1 -1
  41. package/lib/components/run-info/run-info.js +26 -14
  42. package/lib/components/run-info/run-info.js.map +1 -1
  43. package/lib/components/run-info/run-info.module.css +35 -26
  44. package/lib/components/summary/summary.js +9 -10
  45. package/lib/components/summary/summary.js.map +1 -1
  46. package/lib/components/summary/summary.module.css +60 -10
  47. package/lib/constants.js +13 -1
  48. package/lib/constants.js.map +1 -1
  49. package/lib/css/variables.css +71 -58
  50. package/lib/ui/button/button.js +2 -2
  51. package/lib/ui/button/button.js.map +1 -1
  52. package/lib/ui/dialog/dialog.js +4 -2
  53. package/lib/ui/dialog/dialog.js.map +1 -1
  54. package/lib/ui/dialog/dialog.module.css +22 -0
  55. package/lib/ui/dropdown/dropdown.js +13 -4
  56. package/lib/ui/dropdown/dropdown.js.map +1 -1
  57. package/lib/ui/dropdown/dropdown.module.css +51 -6
  58. package/lib/ui/filters/filters.js +22 -11
  59. package/lib/ui/filters/filters.js.map +1 -1
  60. package/lib/ui/filters/filters.module.css +0 -14
  61. package/lib/ui/hover-card/hover-card.js +7 -1
  62. package/lib/ui/hover-card/hover-card.js.map +1 -1
  63. package/lib/ui/hover-card/hover-card.module.css +14 -0
  64. package/lib/ui/table/table.module.css +0 -1
  65. package/lib/ui/tooltip/tooltip.js +6 -1
  66. package/lib/ui/tooltip/tooltip.js.map +1 -1
  67. package/lib/ui/tooltip/tooltip.module.css +11 -0
  68. package/lib-esm/app/app.js +4 -1
  69. package/lib-esm/app/app.js.map +1 -1
  70. package/lib-esm/app/app.module.css +12 -2
  71. package/lib-esm/chart-colors.json +58 -44
  72. package/lib-esm/components/delta/delta.js +3 -13
  73. package/lib-esm/components/delta/delta.js.map +1 -1
  74. package/lib-esm/components/delta/delta.module.css +13 -12
  75. package/lib-esm/components/delta/index.js.map +1 -1
  76. package/lib-esm/components/entry-info/entry-info.js +1 -1
  77. package/lib-esm/components/entry-info/entry-info.js.map +1 -1
  78. package/lib-esm/components/entry-info/entry-info.module.css +1 -1
  79. package/lib-esm/components/index.js +1 -0
  80. package/lib-esm/components/index.js.map +1 -1
  81. package/lib-esm/components/insight-icon/insight-icon.module.css +6 -6
  82. package/lib-esm/components/job-name/job-name.js +1 -2
  83. package/lib-esm/components/job-name/job-name.js.map +1 -1
  84. package/lib-esm/components/metric-change-legend/index.js +2 -0
  85. package/lib-esm/components/metric-change-legend/index.js.map +1 -0
  86. package/lib-esm/components/metric-change-legend/metric-change-legend.js +84 -0
  87. package/lib-esm/components/metric-change-legend/metric-change-legend.js.map +1 -0
  88. package/lib-esm/components/metric-change-legend/metric-change-legend.module.css +80 -0
  89. package/lib-esm/components/metric-run-info/metric-run-info.js +22 -7
  90. package/lib-esm/components/metric-run-info/metric-run-info.js.map +1 -1
  91. package/lib-esm/components/metrics-display-selector/metrics-display-selector.js +7 -9
  92. package/lib-esm/components/metrics-display-selector/metrics-display-selector.js.map +1 -1
  93. package/lib-esm/components/metrics-display-selector/metrics-display-selector.module.css +0 -25
  94. package/lib-esm/components/metrics-table-header/metrics-table-header.js +6 -6
  95. package/lib-esm/components/metrics-table-header/metrics-table-header.js.map +1 -1
  96. package/lib-esm/components/metrics-table-header/metrics-table-header.module.css +8 -12
  97. package/lib-esm/components/metrics-table-options/metrics-table-options.js +3 -4
  98. package/lib-esm/components/metrics-table-options/metrics-table-options.js.map +1 -1
  99. package/lib-esm/components/metrics-table-title/metrics-table-title.js +1 -1
  100. package/lib-esm/components/metrics-table-title/metrics-table-title.js.map +1 -1
  101. package/lib-esm/components/metrics-treemap/metrics-treemap.constants.js +2 -0
  102. package/lib-esm/components/metrics-treemap/metrics-treemap.constants.js.map +1 -1
  103. package/lib-esm/components/metrics-treemap/metrics-treemap.js +74 -63
  104. package/lib-esm/components/metrics-treemap/metrics-treemap.js.map +1 -1
  105. package/lib-esm/components/metrics-treemap/metrics-treemap.module.css +9 -16
  106. package/lib-esm/components/metrics-treemap/metrics-treemap.utils.js +71 -17
  107. package/lib-esm/components/metrics-treemap/metrics-treemap.utils.js.map +1 -1
  108. package/lib-esm/components/run-info/run-info.js +26 -14
  109. package/lib-esm/components/run-info/run-info.js.map +1 -1
  110. package/lib-esm/components/run-info/run-info.module.css +35 -26
  111. package/lib-esm/components/summary/summary.js +10 -11
  112. package/lib-esm/components/summary/summary.js.map +1 -1
  113. package/lib-esm/components/summary/summary.module.css +60 -10
  114. package/lib-esm/constants.js +12 -0
  115. package/lib-esm/constants.js.map +1 -1
  116. package/lib-esm/css/variables.css +71 -58
  117. package/lib-esm/ui/button/button.js +2 -2
  118. package/lib-esm/ui/button/button.js.map +1 -1
  119. package/lib-esm/ui/dialog/dialog.js +4 -2
  120. package/lib-esm/ui/dialog/dialog.js.map +1 -1
  121. package/lib-esm/ui/dialog/dialog.module.css +22 -0
  122. package/lib-esm/ui/dropdown/dropdown.js +11 -3
  123. package/lib-esm/ui/dropdown/dropdown.js.map +1 -1
  124. package/lib-esm/ui/dropdown/dropdown.module.css +51 -6
  125. package/lib-esm/ui/filters/filters.js +23 -12
  126. package/lib-esm/ui/filters/filters.js.map +1 -1
  127. package/lib-esm/ui/filters/filters.module.css +0 -14
  128. package/lib-esm/ui/hover-card/hover-card.js +7 -1
  129. package/lib-esm/ui/hover-card/hover-card.js.map +1 -1
  130. package/lib-esm/ui/hover-card/hover-card.module.css +14 -0
  131. package/lib-esm/ui/table/table.module.css +0 -1
  132. package/lib-esm/ui/tooltip/tooltip.js +6 -1
  133. package/lib-esm/ui/tooltip/tooltip.js.map +1 -1
  134. package/lib-esm/ui/tooltip/tooltip.module.css +11 -0
  135. package/package.json +16 -16
  136. package/src/app/app.jsx +6 -1
  137. package/src/app/app.module.css +12 -2
  138. package/src/chart-colors.json +58 -44
  139. package/src/components/delta/delta.module.css +13 -12
  140. package/src/components/delta/delta.tsx +32 -0
  141. package/src/components/entry-info/entry-info.module.css +1 -1
  142. package/src/components/entry-info/entry-info.tsx +2 -2
  143. package/src/components/index.ts +3 -0
  144. package/src/components/insight-icon/insight-icon.module.css +6 -6
  145. package/src/components/job-name/job-name.jsx +2 -3
  146. package/src/components/metric-change-legend/index.ts +1 -0
  147. package/src/components/metric-change-legend/metric-change-legend.module.css +80 -0
  148. package/src/components/metric-change-legend/metric-change-legend.stories.tsx +13 -0
  149. package/src/components/metric-change-legend/metric-change-legend.tsx +148 -0
  150. package/src/components/metric-run-info/metric-run-info.tsx +32 -17
  151. package/src/components/metrics-display-selector/metrics-display-selector.module.css +0 -25
  152. package/src/components/metrics-display-selector/metrics-display-selector.tsx +25 -37
  153. package/src/components/metrics-table-header/metrics-table-header.module.css +8 -12
  154. package/src/components/metrics-table-header/metrics-table-header.tsx +5 -6
  155. package/src/components/metrics-table-options/metrics-table-options.tsx +5 -6
  156. package/src/components/metrics-table-title/metrics-table-title.jsx +1 -1
  157. package/src/components/metrics-treemap/metrics-treemap.constants.ts +8 -0
  158. package/src/components/metrics-treemap/metrics-treemap.module.css +9 -16
  159. package/src/components/metrics-treemap/metrics-treemap.tsx +160 -135
  160. package/src/components/metrics-treemap/metrics-treemap.utils.ts +141 -27
  161. package/src/components/run-info/run-info.module.css +35 -26
  162. package/src/components/run-info/run-info.stories.tsx +16 -10
  163. package/src/components/run-info/run-info.tsx +132 -73
  164. package/src/components/summary/summary.module.css +60 -10
  165. package/src/components/summary/summary.tsx +47 -50
  166. package/src/constants.ts +13 -0
  167. package/src/css/variables.css +71 -58
  168. package/src/ui/button/button.tsx +2 -1
  169. package/src/ui/dialog/dialog.module.css +22 -0
  170. package/src/ui/dialog/dialog.tsx +9 -2
  171. package/src/ui/dropdown/dropdown.module.css +51 -6
  172. package/src/ui/dropdown/dropdown.tsx +17 -2
  173. package/src/ui/filters/filters.module.css +0 -14
  174. package/src/ui/filters/filters.tsx +111 -47
  175. package/src/ui/hover-card/hover-card.module.css +14 -0
  176. package/src/ui/hover-card/hover-card.tsx +7 -1
  177. package/src/ui/table/table.module.css +0 -1
  178. package/src/ui/tooltip/tooltip.module.css +11 -0
  179. package/src/ui/tooltip/tooltip.tsx +6 -1
  180. package/types/components/delta/delta.d.ts +7 -21
  181. package/types/components/delta/index.d.ts +1 -1
  182. package/types/components/index.d.ts +3 -0
  183. package/types/components/metric-change-legend/index.d.ts +1 -0
  184. package/types/components/metric-change-legend/metric-change-legend.d.ts +4 -0
  185. package/types/components/metric-run-info/metric-run-info.d.ts +3 -6
  186. package/types/components/metrics-treemap/metrics-treemap.constants.d.ts +2 -0
  187. package/types/components/metrics-treemap/metrics-treemap.utils.d.ts +11 -5
  188. package/types/components/run-info/run-info.d.ts +16 -7
  189. package/types/constants.d.ts +12 -0
  190. package/types/ui/dialog/dialog.d.ts +3 -2
  191. package/types/ui/dropdown/dropdown.d.ts +4 -1
  192. package/types/ui/filters/filters.d.ts +2 -1
  193. package/vitest.config.ts +4 -0
  194. package/lib/components/metrics-table-options/metrics-table-options.module.css +0 -15
  195. package/lib-esm/components/metrics-table-options/metrics-table-options.module.css +0 -15
  196. package/src/components/delta/delta.jsx +0 -22
  197. package/src/components/metrics-table-options/metrics-table-options.module.css +0 -15
  198. /package/src/components/delta/{index.js → index.ts} +0 -0
@@ -32,22 +32,21 @@
32
32
  --line-height-number: 1.2em;
33
33
 
34
34
  /*
35
- * Color scheme:
36
- * https://coolors.co/287acc-da444e-55b950-efcc1a-192339
37
- * http://mcg.mbitson.com/#!?mcgpalette0=%23da444e&mcgpalette1=%2355b950&mcgpalette2=%23ebc013&mcgpalette3=%232a2933&mcgpalette4=%23287acc&themename=bundle-stats
38
- * https://hihayk.github.io/scale/#4/5/50/90/-51/0/0/14/353138/53/49/56/white
35
+ * Color scheme: https://coolors.co/287acc-da444e-55b950-e5c110-192339-353538
39
36
  */
40
- --color-gray-25: #f9f9f9;
41
- --color-gray-50: #e5e5e7;
42
- --color-gray-100: #d2d2d4;
43
- --color-gray-200: #959499;
44
- --color-gray-300: #6a6970;
45
- --color-gray-400: #4a4952;
46
- --color-gray-500: #2a2933;
47
- --color-gray-600: #25242e;
48
- --color-gray-700: #1f1f27;
49
- --color-gray-800: #191920;
50
- --color-gray-900: #0f0f14;
37
+
38
+ --color-gray-25: #f9f9f9;
39
+ /** https://hihayk.github.io/scale/#4/5/60/90/0/-0/0/0/3F3F47/63/63/71/white */
40
+ --color-gray-50: #ececed;
41
+ --color-gray-100: #c9c9cc;
42
+ --color-gray-200: #a7a7aa;
43
+ --color-gray-300: #848489;
44
+ --color-gray-400: #626268;
45
+ --color-gray-500: #3f3f47;
46
+ --color-gray-600: #36363c;
47
+ --color-gray-700: #2c2c32;
48
+ --color-gray-800: #232327;
49
+ --color-gray-900: #19191c;
51
50
 
52
51
  --color-gray-ultra-light: var(--color-gray-200);
53
52
  --color-gray-light: var(--color-gray-300);
@@ -56,16 +55,17 @@
56
55
  --color-gray-ultra-dark: var(--color-gray-900);
57
56
 
58
57
  --color-red-25: #fdf5f6;
59
- --color-red-50: #fbe9ea;
60
- --color-red-100: #f4c7ca;
61
- --color-red-200: #eda2a7;
62
- --color-red-300: #e57c83;
63
- --color-red-400: #e06069;
58
+ /* https://hihayk.github.io/scale/#4/5/60/90/0/-0/0/100/DA444E/218/68/78/white */
59
+ --color-red-50: #fbeced;
60
+ --color-red-100: #f5cbcd;
61
+ --color-red-200: #eea9ae;
62
+ --color-red-300: #e7878e;
63
+ --color-red-400: #e1666e;
64
64
  --color-red-500: #da444e;
65
- --color-red-600: #d63e47;
66
- --color-red-700: #d0353d;
67
- --color-red-800: #cb2d35;
68
- --color-red-900: #c21f25;
65
+ --color-red-600: #c92a35;
66
+ --color-red-700: #b31520;
67
+ --color-red-800: #8c0710;
68
+ --color-red-900: #660005;
69
69
  --color-red-ultra-light: var(--color-red-100);
70
70
  --color-red-light: var(--color-red-300);
71
71
  --color-red: var(--color-red-500);
@@ -73,16 +73,17 @@
73
73
  --color-red-ultra-dark: var(--color-red-900);
74
74
 
75
75
  --color-blue-25: #f3f8fd;
76
- --color-blue-50: #e5eff9;
77
- --color-blue-100: #bfd7f0;
78
- --color-blue-200: #94bde6;
79
- --color-blue-300: #69a2db;
80
- --color-blue-400: #488ed4;
76
+ /* https://hihayk.github.io/scale/#4/5/60/90/0/-0/0/100/287ACC/40/122/204/white */
77
+ --color-blue-50: #eaf2fa;
78
+ --color-blue-100: #c3daf1;
79
+ --color-blue-200: #9cc2e8;
80
+ --color-blue-300: #75aade;
81
+ --color-blue-400: #4f92d5;
81
82
  --color-blue-500: #287acc;
82
- --color-blue-600: #2472c7;
83
- --color-blue-700: #1e67c0;
84
- --color-blue-800: #185db9;
85
- --color-blue-900: #0f4aad;
83
+ --color-blue-600: #1168bf;
84
+ --color-blue-700: #0055ac;
85
+ --color-blue-800: #00438c;
86
+ --color-blue-900: #003166;
86
87
 
87
88
  --color-blue-ultra-light: var(--color-blue-100);
88
89
  --color-blue-light: var(--color-blue-300);
@@ -91,16 +92,17 @@
91
92
  --color-blue-ultra-dark: var(--color-blue-900);
92
93
 
93
94
  --color-green-25: #f6fbf6;
94
- --color-green-50: #ebf7ea;
95
- --color-green-100: #cceacb;
96
- --color-green-200: #aadca8;
97
- --color-green-300: #88ce85;
98
- --color-green-400: #6fc46a;
99
- --color-green-500: #55b950;
100
- --color-green-600: #4eb249;
101
- --color-green-700: #44aa40;
102
- --color-green-800: #3ba237;
103
- --color-green-900: #2a9327;
95
+ /* https://hihayk.github.io/scale/#4/5/60/90/0/-0/0/100/55b950/85/185/80/white */
96
+ --color-green-50: #eef8ee;
97
+ --color-green-100: #cfebce;
98
+ --color-green-200: #b1dfaf;
99
+ --color-green-300: #92d28f;
100
+ --color-green-400: #74c670;
101
+ --color-green-500: #55B950;
102
+ --color-green-600: #3ea839;
103
+ --color-green-700: #2b9426;
104
+ --color-green-800: #1b7b16;
105
+ --color-green-900: #0f5f0b;
104
106
 
105
107
  --color-green-ultra-light: var(--color-green-100);
106
108
  --color-green-light: var(--color-green-300);
@@ -109,18 +111,18 @@
109
111
  --color-green-ultra-dark: var(--color-green-900);
110
112
 
111
113
  --color-yellow-25: #fffdf2;
112
- --color-yellow-50: #fdf7e3;
113
- --color-yellow-100: #f9ecb8;
114
- --color-yellow-200: #f5e089;
115
- --color-yellow-300: #f1d35a;
116
- --color-yellow-400: #eec936;
117
- --color-yellow-500: #ebc013;
118
- --color-yellow-600: #e9ba11;
119
- --color-yellow-700: #e5b20e;
120
- --color-yellow-800: #e2aa0b;
121
- --color-yellow-900: #dd9c06;
122
-
123
- --color-yellow-light-background: var(--color-yellow-25);
114
+ /* https://hihayk.github.io/scale/#4/5/40/80/0/-0/0/0/E5C110/229/193/16/white */
115
+ --color-yellow-50: #faf3cf;
116
+ --color-yellow-100: #f6e9a9;
117
+ --color-yellow-200: #f2df83;
118
+ --color-yellow-300: #edd55d;
119
+ --color-yellow-400: #e9cb36;
120
+ --color-yellow-500: #e5c110;
121
+ --color-yellow-600: #ceae0e;
122
+ --color-yellow-700: #b79a0d;
123
+ --color-yellow-800: #a0870b;
124
+ --color-yellow-900: #89740a;
125
+
124
126
  --color-yellow-ultra-light: var(--color-yellow-100);
125
127
  --color-yellow-light: var(--color-yellow-300);
126
128
  --color-yellow: var(--color-yellow-500);
@@ -130,11 +132,13 @@
130
132
  --color-dark: #111;
131
133
  --color-light: #fff;
132
134
 
133
- /* Functional color variables */
134
135
  --color-branding-light: #2b76d4;
135
136
  --color-branding: #1a477f;
136
137
  --color-branding-dark: #09182a;
138
+ }
137
139
 
140
+ body {
141
+ /* Functional color variables */
138
142
  --color-text-ultra-light: var(--color-gray-ultra-light);
139
143
  --color-text-light: var(--color-gray-light);
140
144
  --color-text: var(--color-gray);
@@ -183,8 +187,8 @@
183
187
  --color-backdrop: rgba(0, 0, 0, 0.05);
184
188
  --color-shadow: rgba(0, 0, 0, 0.25);
185
189
 
186
- --transition-duration-in: 0.2s;
187
- --transition-duration-out: 0.17s;
190
+ --transition-duration-in: 0.16s;
191
+ --transition-duration-out: 0.10s;
188
192
  --transition-in: all var(--transition-duration-in) ease-in;
189
193
  --transition-out: all var(--transition-duration-out) ease-out;
190
194
 
@@ -219,3 +223,12 @@
219
223
  --entry-info-width: 64rem;
220
224
  --entry-info-top: var(--header-height);
221
225
  }
226
+
227
+ @media (prefers-reduced-motion: reduce) {
228
+ * {
229
+ animation-duration: 0s !important;
230
+ animation-delay: 0s !important;
231
+ transition-duration: 0s !important;
232
+ transition-delay: 0s !important;
233
+ }
234
+ }
@@ -17,13 +17,13 @@ export const BUTTON_KIND = {
17
17
  SUCCES: 'success',
18
18
  };
19
19
  export const BUTTON_GLYPHS = BaseIcon.ICONS;
20
- const ButtonComponent = (props) => {
20
+ const ButtonComponent = (props, ref) => {
21
21
  const { className = '', outline = false, solid = false, active = false, kind = 'default', size = 'medium', radius = '', padding = '', as: Component = ButtonBaseComponent, children = null, Icon = BaseIcon, glyph, rightGlyph, ...restProps } = props;
22
22
  const resolvedPadding = padding || ((outline || solid) && size);
23
23
  const resolvedRadius = radius || ((outline || solid) && size);
24
24
  const resolvedSize = Object.values(BUTTON_SIZE).includes(size) ? size : BUTTON_SIZE.MEDIUM;
25
25
  const rootClassName = cx(css.root, kind && css[kind], css[resolvedSize], outline && css.outline, outline && css[`outline--${kind}`], solid && css.solid, solid && css[`solid--${kind}`], resolvedPadding && css.padding, resolvedRadius && css[`radius--${resolvedRadius}`], active && css.active, active && outline && css[`active-outline-${kind}`], className);
26
- return (React.createElement(Component, { ...restProps, className: rootClassName },
26
+ return (React.createElement(Component, { ...restProps, ref: ref, className: rootClassName },
27
27
  glyph && React.createElement(Icon, { glyph: glyph, className: css.glyph }),
28
28
  children && React.createElement("span", { className: css.content }, children),
29
29
  rightGlyph && React.createElement(Icon, { glyph: rightGlyph, className: css.glyph })));
@@ -1 +1 @@
1
- {"version":3,"file":"button.js","sourceRoot":"","sources":["../../../src/ui/button/button.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,MAAM,YAAY,CAAC;AAC5B,OAAO,EAAE,MAAM,IAAI,mBAAmB,EAAE,MAAM,gBAAgB,CAAC;AAE/D,OAAO,EAAE,IAAI,IAAI,QAAQ,EAAE,MAAM,SAAS,CAAC;AAC3C,OAAO,GAAG,MAAM,qBAAqB,CAAC;AAEtC,MAAM,CAAC,MAAM,WAAW,GAAG;IACzB,KAAK,EAAE,OAAO;IACd,MAAM,EAAE,QAAQ;IAChB,KAAK,EAAE,OAAO;CACN,CAAC;AAEX,MAAM,CAAC,MAAM,WAAW,GAAG;IACzB,OAAO,EAAE,SAAS;IAClB,SAAS,EAAE,WAAW;IACtB,KAAK,EAAE,QAAQ;IACf,OAAO,EAAE,SAAS;IAClB,IAAI,EAAE,MAAM;IACZ,MAAM,EAAE,SAAS;CACT,CAAC;AAEX,MAAM,CAAC,MAAM,aAAa,GAAG,QAAQ,CAAC,KAAK,CAAC;AAmB5C,MAAM,eAAe,GAAG,CACtB,KAAqF,EACrF,EAAE;IACF,MAAM,EACJ,SAAS,GAAG,EAAE,EACd,OAAO,GAAG,KAAK,EACf,KAAK,GAAG,KAAK,EACb,MAAM,GAAG,KAAK,EACd,IAAI,GAAG,SAAS,EAChB,IAAI,GAAG,QAAQ,EACf,MAAM,GAAG,EAAE,EACX,OAAO,GAAG,EAAE,EACZ,EAAE,EAAE,SAAS,GAAG,mBAAmB,EACnC,QAAQ,GAAG,IAAI,EACf,IAAI,GAAG,QAAQ,EACf,KAAK,EACL,UAAU,EACV,GAAG,SAAS,EACb,GAAG,KAAK,CAAC;IAGV,MAAM,eAAe,GAAG,OAAO,IAAI,CAAC,CAAC,OAAO,IAAI,KAAK,CAAC,IAAI,IAAI,CAAC,CAAC;IAChE,MAAM,cAAc,GAAG,MAAM,IAAI,CAAC,CAAC,OAAO,IAAI,KAAK,CAAC,IAAI,IAAI,CAAC,CAAC;IAE9D,MAAM,YAAY,GAAG,MAAM,CAAC,MAAM,CAAC,WAAW,CAAC,CAAC,QAAQ,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,WAAW,CAAC,MAAM,CAAC;IAE3F,MAAM,aAAa,GAAG,EAAE,CACtB,GAAG,CAAC,IAAI,EACR,IAAI,IAAI,GAAG,CAAC,IAAI,CAAC,EACjB,GAAG,CAAC,YAAY,CAAC,EAEjB,OAAO,IAAI,GAAG,CAAC,OAAO,EACtB,OAAO,IAAI,GAAG,CAAC,YAAY,IAAI,EAAE,CAAC,EAElC,KAAK,IAAI,GAAG,CAAC,KAAK,EAClB,KAAK,IAAI,GAAG,CAAC,UAAU,IAAI,EAAE,CAAC,EAE9B,eAAe,IAAI,GAAG,CAAC,OAAO,EAC9B,cAAc,IAAI,GAAG,CAAC,WAAW,cAAc,EAAE,CAAC,EAElD,MAAM,IAAI,GAAG,CAAC,MAAM,EACpB,MAAM,IAAI,OAAO,IAAI,GAAG,CAAC,kBAAkB,IAAI,EAAE,CAAC,EAElD,SAAS,CACV,CAAC;IAEF,OAAO,CACL,oBAAC,SAAS,OAAK,SAAS,EAAE,SAAS,EAAE,aAAa;QAC/C,KAAK,IAAI,oBAAC,IAAI,IAAC,KAAK,EAAE,KAAK,EAAE,SAAS,EAAE,GAAG,CAAC,KAAK,GAAI;QACrD,QAAQ,IAAI,8BAAM,SAAS,EAAE,GAAG,CAAC,OAAO,IAAG,QAAQ,CAAQ;QAC3D,UAAU,IAAI,oBAAC,IAAI,IAAC,KAAK,EAAE,UAAU,EAAE,SAAS,EAAE,GAAG,CAAC,KAAK,GAAI,CACtD,CACb,CAAC;AACJ,CAAC,CAAC;AAKF,MAAM,CAAC,MAAM,MAAM,GAAG,KAAK,CAAC,UAAU,CAAC,eAAe,CAIxB,CAAC"}
1
+ {"version":3,"file":"button.js","sourceRoot":"","sources":["../../../src/ui/button/button.tsx"],"names":[],"mappings":"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"}
@@ -1,10 +1,12 @@
1
1
  import React from 'react';
2
2
  import cx from 'classnames';
3
- import { Dialog as AriakitDialog, DialogDismiss as AriakitDialogDismiss } from 'ariakit/dialog';
3
+ import { Dialog as AriakitDialog, DialogDismiss as AriakitDialogDismiss, useDialogState as useAriakitDialogState, } from 'ariakit/dialog';
4
4
  import { Stack } from '../../layout/stack';
5
5
  import { BUTTON_GLYPHS, Button } from '../button';
6
6
  import css from './dialog.module.css';
7
- export { useDialogState } from 'ariakit/dialog';
7
+ export const useDialogState = (options = {}) => {
8
+ return useAriakitDialogState({ animated: true, ...options });
9
+ };
8
10
  export const Dialog = (props) => {
9
11
  const { state, className = '', title = '', width = 'medium', center = false, modal = false, children, } = props;
10
12
  const rootClassName = cx(css.dialog, width && css[`width--${width}`], center && css.center);
@@ -1 +1 @@
1
- {"version":3,"file":"dialog.js","sourceRoot":"","sources":["../../../src/ui/dialog/dialog.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,MAAM,YAAY,CAAC;AAC5B,OAAO,EAAE,MAAM,IAAI,aAAa,EAAE,aAAa,IAAI,oBAAoB,EAAE,MAAM,gBAAgB,CAAC;AAEhG,OAAO,EAAE,KAAK,EAAE,MAAM,oBAAoB,CAAC;AAC3C,OAAO,EAAE,aAAa,EAAE,MAAM,EAAE,MAAM,WAAW,CAAC;AAClD,OAAO,GAAG,MAAM,qBAAqB,CAAC;AAEtC,OAAO,EAAE,cAAc,EAAE,MAAM,gBAAgB,CAAC;AAYhD,MAAM,CAAC,MAAM,MAAM,GAAG,CAAC,KAAkB,EAAE,EAAE;IAC3C,MAAM,EACJ,KAAK,EACL,SAAS,GAAG,EAAE,EACd,KAAK,GAAG,EAAE,EACV,KAAK,GAAG,QAAQ,EAChB,MAAM,GAAG,KAAK,EACd,KAAK,GAAG,KAAK,EACb,QAAQ,GACT,GAAG,KAAK,CAAC;IAEV,MAAM,aAAa,GAAG,EAAE,CAAC,GAAG,CAAC,MAAM,EAAE,KAAK,IAAI,GAAG,CAAC,UAAU,KAAK,EAAE,CAAC,EAAE,MAAM,IAAI,GAAG,CAAC,MAAM,CAAC,CAAC;IAE5F,OAAO,CACL,oBAAC,aAAa,IACZ,KAAK,EAAE,KAAK,EACZ,KAAK,EAAE,KAAK,EACZ,QAAQ,QACR,aAAa,EAAE;YACb,SAAS,EAAE,GAAG,CAAC,QAAQ;SACxB,EACD,MAAM,QACN,SAAS,EAAE,aAAa;QAEvB,CAAC,KAAK,IAAI,CACT,oBAAC,oBAAoB,IAAC,EAAE,EAAE,MAAM,EAAE,KAAK,EAAE,aAAa,CAAC,KAAK,EAAE,SAAS,EAAE,GAAG,CAAC,WAAW,IAErF,IAAI,CACgB,CACxB;QACD,oBAAC,KAAK,IAAC,KAAK,EAAC,QAAQ;YAClB,KAAK,IAAI,CACR,gCAAQ,SAAS,EAAE,GAAG,CAAC,MAAM,IAC1B,OAAO,KAAK,KAAK,QAAQ,CAAC,CAAC,CAAC,4BAAI,SAAS,EAAE,GAAG,CAAC,WAAW,IAAG,KAAK,CAAM,CAAC,CAAC,CAAC,KAAK,CAC1E,CACV;YACD,6BAAK,SAAS,EAAE,EAAE,CAAC,GAAG,CAAC,OAAO,EAAE,SAAS,CAAC,IAAG,QAAQ,CAAO,CACtD,CACM,CACjB,CAAC;AACJ,CAAC,CAAC"}
1
+ {"version":3,"file":"dialog.js","sourceRoot":"","sources":["../../../src/ui/dialog/dialog.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,MAAM,YAAY,CAAC;AAC5B,OAAO,EACL,MAAM,IAAI,aAAa,EACvB,aAAa,IAAI,oBAAoB,EACrC,cAAc,IAAI,qBAAqB,GAExC,MAAM,gBAAgB,CAAC;AAExB,OAAO,EAAE,KAAK,EAAE,MAAM,oBAAoB,CAAC;AAC3C,OAAO,EAAE,aAAa,EAAE,MAAM,EAAE,MAAM,WAAW,CAAC;AAClD,OAAO,GAAG,MAAM,qBAAqB,CAAC;AAEtC,MAAM,CAAC,MAAM,cAAc,GAAG,CAAC,UAA4B,EAAE,EAAE,EAAE;IAC/D,OAAO,qBAAqB,CAAC,EAAE,QAAQ,EAAE,IAAI,EAAE,GAAG,OAAO,EAAE,CAAC,CAAC;AAC/D,CAAC,CAAC;AAYF,MAAM,CAAC,MAAM,MAAM,GAAG,CAAC,KAAkB,EAAE,EAAE;IAC3C,MAAM,EACJ,KAAK,EACL,SAAS,GAAG,EAAE,EACd,KAAK,GAAG,EAAE,EACV,KAAK,GAAG,QAAQ,EAChB,MAAM,GAAG,KAAK,EACd,KAAK,GAAG,KAAK,EACb,QAAQ,GACT,GAAG,KAAK,CAAC;IAEV,MAAM,aAAa,GAAG,EAAE,CAAC,GAAG,CAAC,MAAM,EAAE,KAAK,IAAI,GAAG,CAAC,UAAU,KAAK,EAAE,CAAC,EAAE,MAAM,IAAI,GAAG,CAAC,MAAM,CAAC,CAAC;IAE5F,OAAO,CACL,oBAAC,aAAa,IACZ,KAAK,EAAE,KAAK,EACZ,KAAK,EAAE,KAAK,EACZ,QAAQ,QACR,aAAa,EAAE;YACb,SAAS,EAAE,GAAG,CAAC,QAAQ;SACxB,EACD,MAAM,QACN,SAAS,EAAE,aAAa;QAEvB,CAAC,KAAK,IAAI,CACT,oBAAC,oBAAoB,IAAC,EAAE,EAAE,MAAM,EAAE,KAAK,EAAE,aAAa,CAAC,KAAK,EAAE,SAAS,EAAE,GAAG,CAAC,WAAW,IAErF,IAAI,CACgB,CACxB;QACD,oBAAC,KAAK,IAAC,KAAK,EAAC,QAAQ;YAClB,KAAK,IAAI,CACR,gCAAQ,SAAS,EAAE,GAAG,CAAC,MAAM,IAC1B,OAAO,KAAK,KAAK,QAAQ,CAAC,CAAC,CAAC,4BAAI,SAAS,EAAE,GAAG,CAAC,WAAW,IAAG,KAAK,CAAM,CAAC,CAAC,CAAC,KAAK,CAC1E,CACV;YACD,6BAAK,SAAS,EAAE,EAAE,CAAC,GAAG,CAAC,OAAO,EAAE,SAAS,CAAC,IAAG,QAAQ,CAAO,CACtD,CACM,CACjB,CAAC;AACJ,CAAC,CAAC"}
@@ -3,6 +3,17 @@
3
3
  align-items: center;
4
4
  justify-content: center;
5
5
  z-index: var(--layer-xxhigh);
6
+ opacity: 0;
7
+ transition: var(--transition-out);
8
+ }
9
+
10
+ .backdrop[data-enter] {
11
+ opacity: 1;
12
+ transition: var(--transition-in);
13
+ }
14
+
15
+ .backdrop[data-leave] {
16
+ pointer-events: none;
6
17
  }
7
18
 
8
19
  .backdrop::before {
@@ -27,6 +38,17 @@
27
38
  background: var(--color-background);
28
39
  box-shadow: 0 0 var(--space-medium) var(--color-shadow);
29
40
  z-index: var(--layer-xxhigh);
41
+ opacity: 0;
42
+ transition: var(--transition-out);
43
+ }
44
+
45
+ .dialog[data-enter] {
46
+ opacity: 1;
47
+ transition: var(--transition-in);
48
+ }
49
+
50
+ .digalog[data-leave] {
51
+ pointer-events: none;
30
52
  }
31
53
 
32
54
  .header {
@@ -1,18 +1,26 @@
1
1
  import React from 'react';
2
2
  import cx from 'classnames';
3
3
  import { Menu, MenuButton, MenuItem, useMenuState } from 'ariakit/menu';
4
+ import isNull from 'lodash/isNull';
5
+ import isUndefined from 'lodash/isUndefined';
4
6
  import { Button, BUTTON_SIZE } from '../button';
5
7
  import css from './dropdown.module.css';
8
+ import { Icon } from '../icon';
9
+ export const DropdownGroup = (props) => {
10
+ const { className, ...restProps } = props;
11
+ return React.createElement("div", { className: cx(css.group, className), ...restProps });
12
+ };
6
13
  export const DropdownItem = (props) => {
7
14
  const { className = '', isActive = false, ...restProps } = props;
8
15
  return (React.createElement(MenuItem, { className: cx(css.item, className, isActive && css.itemActive), ...restProps }));
9
16
  };
10
17
  export const Dropdown = (props) => {
11
- const { className = '', dropdownClassName = '', label = null, ariaLabel = '', glyph = '', disabled = false, placement, gutter = 4, shift, children, } = props;
18
+ const { className = '', dropdownClassName = '', label = null, ariaLabel = '', glyph = '', showChevron: initialShowChevron, disabled = false, placement, gutter = 4, shift, children, } = props;
12
19
  const dropdownAriaLabel = ariaLabel || (typeof label === 'string' ? label : '');
13
- const menuState = useMenuState({ placement, gutter, shift });
20
+ const menuState = useMenuState({ animated: true, placement, gutter, shift });
21
+ const showChevron = isUndefined(initialShowChevron) ? !isNull(label) : initialShowChevron;
14
22
  return (React.createElement(React.Fragment, null,
15
- React.createElement(MenuButton, { as: Button, outline: true, size: BUTTON_SIZE.SMALL, glyph: glyph, disabled: disabled, state: menuState, tabIndex: null, className: cx(css.button, className) }, label),
23
+ React.createElement(MenuButton, { as: Button, outline: true, size: BUTTON_SIZE.SMALL, glyph: glyph, rightGlyph: showChevron ? Icon.ICONS.CHEVRON_DOWN : undefined, disabled: disabled, state: menuState, toggleOnClick: true, tabIndex: null, className: cx(css.button, className) }, label),
16
24
  React.createElement(Menu, { portal: true, state: menuState, "aria-label": dropdownAriaLabel, className: cx(css.dropdown, dropdownClassName) }, children)));
17
25
  };
18
26
  //# sourceMappingURL=dropdown.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"dropdown.js","sourceRoot":"","sources":["../../../src/ui/dropdown/dropdown.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,MAAM,YAAY,CAAC;AAC5B,OAAO,EAAE,IAAI,EAAE,UAAU,EAAE,QAAQ,EAAkB,YAAY,EAAE,MAAM,cAAc,CAAC;AAExF,OAAO,EAAE,MAAM,EAAE,WAAW,EAAE,MAAM,WAAW,CAAC;AAChD,OAAO,GAAG,MAAM,uBAAuB,CAAC;AAMxC,MAAM,CAAC,MAAM,YAAY,GAAG,CAAC,KAAgE,EAAE,EAAE;IAC/F,MAAM,EAAE,SAAS,GAAG,EAAE,EAAE,QAAQ,GAAG,KAAK,EAAE,GAAG,SAAS,EAAE,GAAG,KAAK,CAAC;IAEjE,OAAO,CACL,oBAAC,QAAQ,IAAC,SAAS,EAAE,EAAE,CAAC,GAAG,CAAC,IAAI,EAAE,SAAS,EAAE,QAAQ,IAAI,GAAG,CAAC,UAAU,CAAC,KAAM,SAAS,GAAI,CAC5F,CAAC;AACJ,CAAC,CAAC;AAaF,MAAM,CAAC,MAAM,QAAQ,GAAG,CAAC,KAAkD,EAAE,EAAE;IAC7E,MAAM,EACJ,SAAS,GAAG,EAAE,EACd,iBAAiB,GAAG,EAAE,EACtB,KAAK,GAAG,IAAI,EACZ,SAAS,GAAG,EAAE,EACd,KAAK,GAAG,EAAE,EACV,QAAQ,GAAG,KAAK,EAChB,SAAS,EACT,MAAM,GAAG,CAAC,EACV,KAAK,EACL,QAAQ,GACT,GAAG,KAAK,CAAC;IAEV,MAAM,iBAAiB,GAAG,SAAS,IAAI,CAAC,OAAO,KAAK,KAAK,QAAQ,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC;IAChF,MAAM,SAAS,GAAG,YAAY,CAAC,EAAE,SAAS,EAAE,MAAM,EAAE,KAAK,EAAE,CAAC,CAAC;IAE7D,OAAO,CACL;QACE,oBAAC,UAAU,IACT,EAAE,EAAE,MAAM,EACV,OAAO,QACP,IAAI,EAAE,WAAW,CAAC,KAAK,EACvB,KAAK,EAAE,KAAK,EACZ,QAAQ,EAAE,QAAQ,EAClB,KAAK,EAAE,SAAS,EAChB,QAAQ,EAAE,IAAI,EACd,SAAS,EAAE,EAAE,CAAC,GAAG,CAAC,MAAM,EAAE,SAAS,CAAC,IAEnC,KAAK,CACK;QACb,oBAAC,IAAI,IACH,MAAM,QACN,KAAK,EAAE,SAAS,gBACJ,iBAAiB,EAC7B,SAAS,EAAE,EAAE,CAAC,GAAG,CAAC,QAAQ,EAAE,iBAAiB,CAAC,IAE7C,QAAQ,CACJ,CACN,CACJ,CAAC;AACJ,CAAC,CAAC"}
1
+ {"version":3,"file":"dropdown.js","sourceRoot":"","sources":["../../../src/ui/dropdown/dropdown.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAyB,MAAM,OAAO,CAAC;AAC9C,OAAO,EAAE,MAAM,YAAY,CAAC;AAC5B,OAAO,EAAE,IAAI,EAAE,UAAU,EAAE,QAAQ,EAAkB,YAAY,EAAE,MAAM,cAAc,CAAC;AACxF,OAAO,MAAM,MAAM,eAAe,CAAC;AACnC,OAAO,WAAW,MAAM,oBAAoB,CAAC;AAE7C,OAAO,EAAE,MAAM,EAAE,WAAW,EAAE,MAAM,WAAW,CAAC;AAChD,OAAO,GAAG,MAAM,uBAAuB,CAAC;AACxC,OAAO,EAAE,IAAI,EAAE,MAAM,SAAS,CAAC;AAI/B,MAAM,CAAC,MAAM,aAAa,GAAG,CAAC,KAAyB,EAAE,EAAE;IACzD,MAAM,EAAE,SAAS,EAAE,GAAG,SAAS,EAAE,GAAG,KAAK,CAAC;IAC1C,OAAO,6BAAK,SAAS,EAAE,EAAE,CAAC,GAAG,CAAC,KAAK,EAAE,SAAS,CAAC,KAAM,SAAS,GAAI,CAAC;AACrE,CAAC,CAAC;AAMF,MAAM,CAAC,MAAM,YAAY,GAAG,CAAC,KAAgE,EAAE,EAAE;IAC/F,MAAM,EAAE,SAAS,GAAG,EAAE,EAAE,QAAQ,GAAG,KAAK,EAAE,GAAG,SAAS,EAAE,GAAG,KAAK,CAAC;IAEjE,OAAO,CACL,oBAAC,QAAQ,IAAC,SAAS,EAAE,EAAE,CAAC,GAAG,CAAC,IAAI,EAAE,SAAS,EAAE,QAAQ,IAAI,GAAG,CAAC,UAAU,CAAC,KAAM,SAAS,GAAI,CAC5F,CAAC;AACJ,CAAC,CAAC;AAcF,MAAM,CAAC,MAAM,QAAQ,GAAG,CAAC,KAAkD,EAAE,EAAE;IAC7E,MAAM,EACJ,SAAS,GAAG,EAAE,EACd,iBAAiB,GAAG,EAAE,EACtB,KAAK,GAAG,IAAI,EACZ,SAAS,GAAG,EAAE,EACd,KAAK,GAAG,EAAE,EACV,WAAW,EAAE,kBAAkB,EAC/B,QAAQ,GAAG,KAAK,EAChB,SAAS,EACT,MAAM,GAAG,CAAC,EACV,KAAK,EACL,QAAQ,GACT,GAAG,KAAK,CAAC;IAEV,MAAM,iBAAiB,GAAG,SAAS,IAAI,CAAC,OAAO,KAAK,KAAK,QAAQ,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC;IAChF,MAAM,SAAS,GAAG,YAAY,CAAC,EAAE,QAAQ,EAAE,IAAI,EAAE,SAAS,EAAE,MAAM,EAAE,KAAK,EAAE,CAAC,CAAC;IAC7E,MAAM,WAAW,GAAG,WAAW,CAAC,kBAAkB,CAAC,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,kBAAkB,CAAC;IAE1F,OAAO,CACL;QACE,oBAAC,UAAU,IACT,EAAE,EAAE,MAAM,EACV,OAAO,QACP,IAAI,EAAE,WAAW,CAAC,KAAK,EACvB,KAAK,EAAE,KAAK,EACZ,UAAU,EAAE,WAAW,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,YAAY,CAAC,CAAC,CAAC,SAAS,EAC7D,QAAQ,EAAE,QAAQ,EAClB,KAAK,EAAE,SAAS,EAChB,aAAa,QACb,QAAQ,EAAE,IAAI,EACd,SAAS,EAAE,EAAE,CAAC,GAAG,CAAC,MAAM,EAAE,SAAS,CAAC,IAEnC,KAAK,CACK;QACb,oBAAC,IAAI,IACH,MAAM,QACN,KAAK,EAAE,SAAS,gBACJ,iBAAiB,EAC7B,SAAS,EAAE,EAAE,CAAC,GAAG,CAAC,QAAQ,EAAE,iBAAiB,CAAC,IAE7C,QAAQ,CACJ,CACN,CACJ,CAAC;AACJ,CAAC,CAAC"}
@@ -13,9 +13,23 @@
13
13
  border-radius: var(--radius-small);
14
14
  box-shadow: var(--shadow-layer);
15
15
  background: var(--color-background);
16
- min-width: 12em;
16
+ min-width: 16em;
17
17
  z-index: var(--layer-high);
18
- padding: calc(var(--space-xxxsmall) / 2);
18
+ padding: var(--space-xxxsmall);
19
+ color: var(--color-text-light);
20
+ font-size: var(--size-small);
21
+ line-height: var(--line-height);
22
+ opacity: 0;
23
+ transition: var(--transition-out);
24
+ }
25
+
26
+ .dropdown[data-enter] {
27
+ opacity: 1;
28
+ transition: var(--transition-in);
29
+ }
30
+
31
+ .dropdown[data-leave] {
32
+ pointer-events: none;
19
33
  }
20
34
 
21
35
  .dropdown:focus {
@@ -29,12 +43,9 @@
29
43
  outline: none;
30
44
  border: 0;
31
45
  border-radius: var(--radius-small);
32
- padding: calc(var(--space-xxxsmall) + var(--space-xxxsmall) / 2);
46
+ padding: var(--space-xxxsmall);
33
47
  background: none;
34
48
  text-align: left;
35
- color: var(--color-text-light);
36
- font-size: var(--size-small);
37
- line-height: var(--line-height);
38
49
  text-decoration: none;
39
50
  cursor: default;
40
51
  }
@@ -58,3 +69,37 @@
58
69
  background: var(--color-highlight-info);
59
70
  color: var(--color-primary-dark);
60
71
  }
72
+
73
+
74
+ .group {
75
+ position: relative;
76
+ padding: calc(var(--space-xxxsmall) / 2 + 1px) 0 calc(var(--space-xxxsmall) / 2);
77
+ }
78
+
79
+ .group::before {
80
+ content: " ";
81
+ display: block;
82
+ position: absolute;
83
+ left: var(--space-xxxsmall);
84
+ right: var(--space-xxxsmall);
85
+ top: 0px;
86
+ height: 1px;
87
+ border: none;
88
+ background: var(--color-outline);
89
+ }
90
+
91
+ .group:first-child {
92
+ padding-top: 0;
93
+ }
94
+
95
+ .group:first-child::before {
96
+ display: none;
97
+ }
98
+
99
+ .group:last-child {
100
+ padding-bottom: 0;
101
+ }
102
+
103
+ .group:empty {
104
+ display: none;
105
+ }
@@ -4,7 +4,7 @@ import { FlexStack } from '../../layout/flex-stack';
4
4
  import { Stack } from '../../layout/stack';
5
5
  import { Button } from '../button';
6
6
  import { ControlGroup } from '../control-group';
7
- import { Dropdown, DropdownItem } from '../dropdown';
7
+ import { Dropdown, DropdownGroup, DropdownItem } from '../dropdown';
8
8
  import { InputSearch } from '../input-search';
9
9
  import * as I18N from './filters.i18n';
10
10
  import { getGroupFiltersLabelSuffix, LABELS } from './filters.utils';
@@ -15,6 +15,20 @@ const Filter = (props) => {
15
15
  React.createElement("input", { type: "checkbox", id: `filter-${name}`, name: name, ...inputProps, className: css.filterControl }),
16
16
  React.createElement("span", { title: label, className: css.filterLabel }, label)));
17
17
  };
18
+ const getGroupItemKey = (groupKey, itemKey) => `${groupKey}.${itemKey}`;
19
+ const FilterDropdownItem = (props) => {
20
+ const { className, id, label, checked, disabled, onChange, toggleFilters, getOnGroupCheck } = props;
21
+ const onItemClick = useCallback((event) => {
22
+ if (disabled || event.target !== event.currentTarget) {
23
+ return;
24
+ }
25
+ toggleFilters({ [id]: !checked });
26
+ }, [disabled, toggleFilters, id, checked]);
27
+ const onOnlyClick = useCallback(() => getOnGroupCheck(false, { [id]: true })(), [getOnGroupCheck, id]);
28
+ return (React.createElement(DropdownItem, { onClick: onItemClick, hideOnClick: false, className: cx(css.filterGroupItem, className) },
29
+ React.createElement(Filter, { label: label, name: id, onChange: onChange, checked: checked, disabled: disabled, className: css.filterGroupItemFilter }),
30
+ React.createElement(Button, { kind: "info", solid: true, size: "small", type: "button", onClick: onOnlyClick, disabled: disabled, className: css.filterGroupOnlyButton }, I18N.ONLY)));
31
+ };
18
32
  const FilterGroup = (props) => {
19
33
  const { className = '', groupKey, data, values, onCheckboxChange, toggleFilters } = props;
20
34
  const { label: groupLabel, children: groupItems } = data;
@@ -28,16 +42,16 @@ const FilterGroup = (props) => {
28
42
  `${groupLabel}:`,
29
43
  "\u00A0",
30
44
  React.createElement("span", { className: cx(hasCustomFilterSuffix && css.filterGroupLabelSuffixCustom) }, filterSuffix)));
31
- const getOnGroupCheck = (value, overrides = {}) => () => {
45
+ const getOnGroupCheck = useCallback((value, overrides = {}) => () => {
32
46
  const newFilters = groupItems.reduce((agg, { key: itemKey }) => ({
33
47
  ...agg,
34
- [`${groupKey}.${itemKey}`]: value,
48
+ [getGroupItemKey(groupKey, itemKey)]: value,
35
49
  }), {});
36
50
  toggleFilters({
37
51
  ...newFilters,
38
52
  ...overrides,
39
53
  });
40
- };
54
+ }, [groupItems, groupKey, toggleFilters]);
41
55
  const filteredGroupItems = useMemo(() => {
42
56
  if (!search) {
43
57
  return groupItems;
@@ -45,21 +59,18 @@ const FilterGroup = (props) => {
45
59
  return groupItems.filter((item) => item.label.match(new RegExp(`${search}`, 'i')));
46
60
  }, [search, groupItems]);
47
61
  return (React.createElement(Dropdown, { className: className, label: dropdownLabel, ariaLabel: `${groupLabel}: ${filterSuffix}` },
48
- groupItems.length > 10 && (React.createElement("div", { className: css.filterGroupSearchWrapper },
62
+ groupItems.length > 10 && (React.createElement(DropdownGroup, null,
49
63
  React.createElement(InputSearch, { defaultValue: search, onChange: setSearch, placeholder: I18N.GROUP_SEARCH, debounceWait: 0 }))),
50
- React.createElement("div", { className: css.filterGroupItems },
64
+ React.createElement(DropdownGroup, { className: css.filterGroupItems },
51
65
  filteredGroupItems.length === 0 && (React.createElement(Stack, { className: css.filterGroupSearchNotFound },
52
66
  React.createElement("p", null, I18N.GROUP_NOT_FOUND),
53
67
  React.createElement("div", null,
54
68
  React.createElement(Button, { size: "small", kind: "primary", type: "button", onClick: () => setSearch(''), className: css.filterGroupSearchNotFoundClear }, I18N.GROUP_SEARCH_CLEAR)))),
55
69
  filteredGroupItems.map(({ key: itemKey, ...itemData }) => {
56
- const id = [groupKey, itemKey].join('.');
57
- const getOnOnlyClick = () => getOnGroupCheck(false, { [id]: true });
58
- return (React.createElement(DropdownItem, { key: id, className: css.filterGroupItem },
59
- React.createElement(Filter, { label: itemData.label, name: id, onChange: onCheckboxChange, checked: values[id], disabled: itemData.disabled, className: css.filterGroupItemFilter }),
60
- React.createElement(Button, { kind: "info", solid: true, size: "small", type: "button", onClick: getOnOnlyClick(), disabled: itemData.disabled, className: css.filterGroupOnlyButton }, I18N.ONLY)));
70
+ const id = getGroupItemKey(groupKey, itemKey);
71
+ return (React.createElement(FilterDropdownItem, { key: id, id: id, label: itemData.label, checked: values[id], disabled: itemData.disabled, onChange: onCheckboxChange, toggleFilters: toggleFilters, getOnGroupCheck: getOnGroupCheck }));
61
72
  })),
62
- filteredGroupItems.length !== 0 && (React.createElement("div", { className: css.filterGroupActions }, areAllGroupItemsChecked ? (React.createElement(DropdownItem, { id: "clear-all", onClick: getOnGroupCheck(false), role: "button" }, I18N.CLEAR)) : (React.createElement(DropdownItem, { id: "clear-all", onClick: getOnGroupCheck(true), role: "button" }, I18N.CHECK))))));
73
+ filteredGroupItems.length !== 0 && (React.createElement(DropdownGroup, { className: css.filterGroupActions }, areAllGroupItemsChecked ? (React.createElement(DropdownItem, { id: "clear-all", onClick: getOnGroupCheck(false), role: "button" }, I18N.CLEAR)) : (React.createElement(DropdownItem, { id: "clear-all", onClick: getOnGroupCheck(true), role: "button" }, I18N.CHECK))))));
63
74
  };
64
75
  export const Filters = (props) => {
65
76
  const { className = '', values, filters, toggleFilter, toggleFilters } = props;
@@ -1 +1 @@
1
- {"version":3,"file":"filters.js","sourceRoot":"","sources":["../../../src/ui/filters/filters.tsx"],"names":[],"mappings":"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"}
1
+ {"version":3,"file":"filters.js","sourceRoot":"","sources":["../../../src/ui/filters/filters.tsx"],"names":[],"mappings":"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"}
@@ -101,23 +101,9 @@
101
101
  text-transform: lowercase;
102
102
  }
103
103
 
104
- .filterGroupSearchWrapper {
105
- padding-bottom: var(--space-xxxsmall);
106
- margin-bottom: var(--space-xxxsmall);
107
- border-bottom: 1px solid var(--color-outline);
108
- }
109
-
110
104
  .filterGroupSearchNotFound {
111
105
  padding: var(--space-xxsmall) 0;
112
106
  text-align: center;
113
107
  font-size: var(--size-small);
114
108
  color: var(--color-text-light);
115
109
  }
116
-
117
- .filterGroupActions {
118
- margin-top: var(--space-xxxsmall);
119
- padding-top: var(--space-xxxsmall);
120
- padding-bottom: var(--space-xxxsmall);
121
- margin-bottom: calc(0px - var(--space-xxxsmall));
122
- border-top: 1px solid var(--color-outline);
123
- }
@@ -4,7 +4,13 @@ import { Hovercard, HovercardAnchor, HovercardArrow, useHovercard, useHovercardS
4
4
  import css from './hover-card.module.css';
5
5
  export const HoverCard = (props) => {
6
6
  const { className = '', anchorClassName = '', hoverCardClassName = '', href = '', as = null, label, children, } = props;
7
- const state = useHovercardState({ gutter: 8, timeout: 300, placement: 'top' });
7
+ const state = useHovercardState({
8
+ animated: true,
9
+ gutter: 8,
10
+ timeout: 300,
11
+ overflowPadding: 48,
12
+ placement: 'top',
13
+ });
8
14
  const hovercardProps = useHovercard({ state, portal: true });
9
15
  const Component = useMemo(() => {
10
16
  if (as) {
@@ -1 +1 @@
1
- {"version":3,"file":"hover-card.js","sourceRoot":"","sources":["../../../src/ui/hover-card/hover-card.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,OAAO,EAAE,MAAM,OAAO,CAAC;AACvC,OAAO,EAAE,MAAM,YAAY,CAAC;AAC5B,OAAO,EACL,SAAS,EACT,eAAe,EACf,cAAc,EACd,YAAY,EACZ,iBAAiB,GAClB,MAAM,mBAAmB,CAAC;AAE3B,OAAO,GAAG,MAAM,yBAAyB,CAAC;AAY1C,MAAM,CAAC,MAAM,SAAS,GAAG,CAAC,KAAqB,EAAE,EAAE;IACjD,MAAM,EACJ,SAAS,GAAG,EAAE,EACd,eAAe,GAAG,EAAE,EACpB,kBAAkB,GAAG,EAAE,EACvB,IAAI,GAAG,EAAE,EACT,EAAE,GAAG,IAAI,EACT,KAAK,EACL,QAAQ,GACT,GAAG,KAAK,CAAC;IAEV,MAAM,KAAK,GAAG,iBAAiB,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE,OAAO,EAAE,GAAG,EAAE,SAAS,EAAE,KAAK,EAAE,CAAC,CAAC;IAC/E,MAAM,cAAc,GAAG,YAAY,CAAC,EAAE,KAAK,EAAE,MAAM,EAAE,IAAI,EAAE,CAAC,CAAC;IAG7D,MAAM,SAAS,GAAG,OAAO,CAAC,GAAG,EAAE;QAC7B,IAAI,EAAE,EAAE,CAAC;YACP,OAAO,EAAE,CAAC;QACZ,CAAC;QAED,IAAI,IAAI,EAAE,CAAC;YACT,OAAO,GAAG,CAAC;QACb,CAAC;QAED,OAAO,MAAM,CAAC;IAChB,CAAC,EAAE,CAAC,EAAE,EAAE,IAAI,CAAC,CAAC,CAAC;IAEf,OAAO,CACL,6BAAK,SAAS,EAAE,EAAE,CAAC,GAAG,CAAC,IAAI,EAAE,SAAS,CAAC;QACrC,oBAAC,eAAe,IACd,KAAK,EAAE,KAAK,EACZ,IAAI,EAAE,IAAI,EACV,SAAS,EAAE,EAAE,CAAC,GAAG,CAAC,MAAM,EAAE,eAAe,CAAC,EAC1C,EAAE,EAAE,SAAS,mBACE,KAAK,CAAC,IAAI,CAAC,CAAC,CAAC,cAAc,CAAC,EAAE,CAAC,CAAC,CAAC,EAAE,IAEjD,KAAK,CACU;QAClB,oBAAC,SAAS,OACJ,cAAc,EAClB,KAAK,EAAE,KAAK,EACZ,SAAS,EAAE,EAAE,CAAC,GAAG,CAAC,SAAS,EAAE,kBAAkB,CAAC;YAEhD,oBAAC,cAAc,IAAC,IAAI,EAAE,EAAE,GAAI;YAC3B,OAAO,QAAQ,KAAK,UAAU,CAAC,CAAC,CAAC,QAAQ,CAAC,EAAE,KAAK,EAAE,KAAK,CAAC,IAAI,EAAE,CAAC,CAAC,CAAC,CAAC,QAAQ,CAClE,CACR,CACP,CAAC;AACJ,CAAC,CAAC"}
1
+ {"version":3,"file":"hover-card.js","sourceRoot":"","sources":["../../../src/ui/hover-card/hover-card.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,OAAO,EAAE,MAAM,OAAO,CAAC;AACvC,OAAO,EAAE,MAAM,YAAY,CAAC;AAC5B,OAAO,EACL,SAAS,EACT,eAAe,EACf,cAAc,EACd,YAAY,EACZ,iBAAiB,GAClB,MAAM,mBAAmB,CAAC;AAE3B,OAAO,GAAG,MAAM,yBAAyB,CAAC;AAY1C,MAAM,CAAC,MAAM,SAAS,GAAG,CAAC,KAAqB,EAAE,EAAE;IACjD,MAAM,EACJ,SAAS,GAAG,EAAE,EACd,eAAe,GAAG,EAAE,EACpB,kBAAkB,GAAG,EAAE,EACvB,IAAI,GAAG,EAAE,EACT,EAAE,GAAG,IAAI,EACT,KAAK,EACL,QAAQ,GACT,GAAG,KAAK,CAAC;IAEV,MAAM,KAAK,GAAG,iBAAiB,CAAC;QAC9B,QAAQ,EAAE,IAAI;QACd,MAAM,EAAE,CAAC;QACT,OAAO,EAAE,GAAG;QACZ,eAAe,EAAE,EAAE;QACnB,SAAS,EAAE,KAAK;KACjB,CAAC,CAAC;IACH,MAAM,cAAc,GAAG,YAAY,CAAC,EAAE,KAAK,EAAE,MAAM,EAAE,IAAI,EAAE,CAAC,CAAC;IAG7D,MAAM,SAAS,GAAG,OAAO,CAAC,GAAG,EAAE;QAC7B,IAAI,EAAE,EAAE,CAAC;YACP,OAAO,EAAE,CAAC;QACZ,CAAC;QAED,IAAI,IAAI,EAAE,CAAC;YACT,OAAO,GAAG,CAAC;QACb,CAAC;QAED,OAAO,MAAM,CAAC;IAChB,CAAC,EAAE,CAAC,EAAE,EAAE,IAAI,CAAC,CAAC,CAAC;IAEf,OAAO,CACL,6BAAK,SAAS,EAAE,EAAE,CAAC,GAAG,CAAC,IAAI,EAAE,SAAS,CAAC;QACrC,oBAAC,eAAe,IACd,KAAK,EAAE,KAAK,EACZ,IAAI,EAAE,IAAI,EACV,SAAS,EAAE,EAAE,CAAC,GAAG,CAAC,MAAM,EAAE,eAAe,CAAC,EAC1C,EAAE,EAAE,SAAS,mBACE,KAAK,CAAC,IAAI,CAAC,CAAC,CAAC,cAAc,CAAC,EAAE,CAAC,CAAC,CAAC,EAAE,IAEjD,KAAK,CACU;QAClB,oBAAC,SAAS,OACJ,cAAc,EAClB,KAAK,EAAE,KAAK,EACZ,SAAS,EAAE,EAAE,CAAC,GAAG,CAAC,SAAS,EAAE,kBAAkB,CAAC;YAEhD,oBAAC,cAAc,IAAC,IAAI,EAAE,EAAE,GAAI;YAC3B,OAAO,QAAQ,KAAK,UAAU,CAAC,CAAC,CAAC,QAAQ,CAAC,EAAE,KAAK,EAAE,KAAK,CAAC,IAAI,EAAE,CAAC,CAAC,CAAC,CAAC,QAAQ,CAClE,CACR,CACP,CAAC;AACJ,CAAC,CAAC"}
@@ -5,11 +5,14 @@
5
5
  .anchor {
6
6
  display: inline-block;
7
7
  color: inherit;
8
+ cursor: default;
8
9
  text-decoration: none;
10
+ transition: var(--transition-out);
9
11
  }
10
12
 
11
13
  .anchor:hover {
12
14
  color: var(--color-primary);
15
+ transition: var(--transition-in);
13
16
  }
14
17
 
15
18
  .anchor:focus {
@@ -27,4 +30,15 @@
27
30
  will-change: filter;
28
31
  background: var(--color-light);
29
32
  font-size: var(--size-small);
33
+ opacity: 0;
34
+ transition: var(--transition-out);
35
+ }
36
+
37
+ .hoverCard[data-enter] {
38
+ opacity: 1;
39
+ transition: var(--transition-in);
40
+ }
41
+
42
+ .hoverCard[data-leave] {
43
+ pointer-events: none;
30
44
  }
@@ -16,7 +16,6 @@
16
16
 
17
17
  .root thead th {
18
18
  border-width: 0 0 1px;
19
- text-transform: uppercase;
20
19
  vertical-align: top;
21
20
  background: var(--color-highlight);
22
21
  }
@@ -5,7 +5,12 @@ import css from './tooltip.module.css';
5
5
  export const Tooltip = (props) => {
6
6
  var _a;
7
7
  const { className = '', tooltipClassName = '', title = '', as: Component = 'span', containerRef: ref, ...restProps } = props;
8
- const tooltip = useTooltipState({ placement: 'top', timeout: 300 });
8
+ const tooltip = useTooltipState({
9
+ animated: true,
10
+ placement: 'top',
11
+ overflowPadding: 48,
12
+ timeout: 300,
13
+ });
9
14
  return (React.createElement(React.Fragment, null,
10
15
  React.createElement(UITooltipAnchor, { as: Component, className: cx(css.root, className), state: tooltip, "aria-controls": tooltip.open ? (_a = tooltip.contentElement) === null || _a === void 0 ? void 0 : _a.id : '', ...(ref ? { ref } : {}), ...restProps }),
11
16
  title && (React.createElement(UITooltip, { state: tooltip, className: cx(css.tooltip, tooltipClassName) },
@@ -1 +1 @@
1
- {"version":3,"file":"tooltip.js","sourceRoot":"","sources":["../../../src/ui/tooltip/tooltip.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,MAAM,YAAY,CAAC;AAC5B,OAAO,EACL,OAAO,IAAI,SAAS,EACpB,aAAa,IAAI,eAAe,EAChC,YAAY,IAAI,cAAc,EAC9B,eAAe,GAChB,MAAM,iBAAiB,CAAC;AAEzB,OAAO,GAAG,MAAM,sBAAsB,CAAC;AAUvC,MAAM,CAAC,MAAM,OAAO,GAAG,CACrB,KAA6E,EAC7E,EAAE;;IACF,MAAM,EACJ,SAAS,GAAG,EAAE,EACd,gBAAgB,GAAG,EAAE,EACrB,KAAK,GAAG,EAAE,EACV,EAAE,EAAE,SAAS,GAAG,MAAM,EACtB,YAAY,EAAE,GAAG,EACjB,GAAG,SAAS,EACb,GAAG,KAAK,CAAC;IAEV,MAAM,OAAO,GAAG,eAAe,CAAC,EAAE,SAAS,EAAE,KAAK,EAAE,OAAO,EAAE,GAAG,EAAE,CAAC,CAAC;IAEpE,OAAO,CACL;QACE,oBAAC,eAAe,IACd,EAAE,EAAE,SAA8B,EAClC,SAAS,EAAE,EAAE,CAAC,GAAG,CAAC,IAAI,EAAE,SAAS,CAAC,EAClC,KAAK,EAAE,OAAO,mBACC,OAAO,CAAC,IAAI,CAAC,CAAC,CAAC,MAAA,OAAO,CAAC,cAAc,0CAAE,EAAE,CAAC,CAAC,CAAC,EAAE,KACzD,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,GAAG,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC,KACpB,SAAS,GACb;QACD,KAAK,IAAI,CACR,oBAAC,SAAS,IAAC,KAAK,EAAE,OAAO,EAAE,SAAS,EAAE,EAAE,CAAC,GAAG,CAAC,OAAO,EAAE,gBAAgB,CAAC;YACrE,oBAAC,cAAc,IAAC,KAAK,EAAE,OAAO,EAAE,SAAS,EAAE,GAAG,CAAC,KAAK,EAAE,IAAI,EAAE,EAAE,GAAI;YACjE,KAAK,CACI,CACb,CACA,CACJ,CAAC;AACJ,CAAC,CAAC"}
1
+ {"version":3,"file":"tooltip.js","sourceRoot":"","sources":["../../../src/ui/tooltip/tooltip.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,MAAM,YAAY,CAAC;AAC5B,OAAO,EACL,OAAO,IAAI,SAAS,EACpB,aAAa,IAAI,eAAe,EAChC,YAAY,IAAI,cAAc,EAC9B,eAAe,GAChB,MAAM,iBAAiB,CAAC;AAEzB,OAAO,GAAG,MAAM,sBAAsB,CAAC;AAUvC,MAAM,CAAC,MAAM,OAAO,GAAG,CACrB,KAA6E,EAC7E,EAAE;;IACF,MAAM,EACJ,SAAS,GAAG,EAAE,EACd,gBAAgB,GAAG,EAAE,EACrB,KAAK,GAAG,EAAE,EACV,EAAE,EAAE,SAAS,GAAG,MAAM,EACtB,YAAY,EAAE,GAAG,EACjB,GAAG,SAAS,EACb,GAAG,KAAK,CAAC;IAEV,MAAM,OAAO,GAAG,eAAe,CAAC;QAC9B,QAAQ,EAAE,IAAI;QACd,SAAS,EAAE,KAAK;QAChB,eAAe,EAAE,EAAE;QACnB,OAAO,EAAE,GAAG;KACb,CAAC,CAAC;IAEH,OAAO,CACL;QACE,oBAAC,eAAe,IACd,EAAE,EAAE,SAA8B,EAClC,SAAS,EAAE,EAAE,CAAC,GAAG,CAAC,IAAI,EAAE,SAAS,CAAC,EAClC,KAAK,EAAE,OAAO,mBACC,OAAO,CAAC,IAAI,CAAC,CAAC,CAAC,MAAA,OAAO,CAAC,cAAc,0CAAE,EAAE,CAAC,CAAC,CAAC,EAAE,KACzD,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,GAAG,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC,KACpB,SAAS,GACb;QACD,KAAK,IAAI,CACR,oBAAC,SAAS,IAAC,KAAK,EAAE,OAAO,EAAE,SAAS,EAAE,EAAE,CAAC,GAAG,CAAC,OAAO,EAAE,gBAAgB,CAAC;YACrE,oBAAC,cAAc,IAAC,KAAK,EAAE,OAAO,EAAE,SAAS,EAAE,GAAG,CAAC,KAAK,EAAE,IAAI,EAAE,EAAE,GAAI;YACjE,KAAK,CACI,CACb,CACA,CACJ,CAAC;AACJ,CAAC,CAAC"}