alouette 19.0.0 → 19.2.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 (49) hide show
  1. package/CHANGELOG.md +22 -0
  2. package/dist/definitions/config/defaultColorScales.d.ts.map +1 -1
  3. package/dist/definitions/index.d.ts +2 -0
  4. package/dist/definitions/index.d.ts.map +1 -1
  5. package/dist/definitions/themeVariables.d.ts.map +1 -1
  6. package/dist/definitions/ui/actions/Button.d.ts +9 -0
  7. package/dist/definitions/ui/actions/Button.d.ts.map +1 -1
  8. package/dist/definitions/ui/actions/Button.stories.d.ts.map +1 -1
  9. package/dist/definitions/ui/actions/IconButton.d.ts.map +1 -1
  10. package/dist/definitions/ui/actions/IconButton.stories.d.ts.map +1 -1
  11. package/dist/definitions/ui/containers/Box.d.ts +1 -0
  12. package/dist/definitions/ui/containers/Box.d.ts.map +1 -1
  13. package/dist/definitions/ui/data/PressableBox.d.ts +1 -3
  14. package/dist/definitions/ui/data/PressableBox.d.ts.map +1 -1
  15. package/dist/definitions/ui/feedback/Badge.d.ts +119 -0
  16. package/dist/definitions/ui/feedback/Badge.d.ts.map +1 -0
  17. package/dist/definitions/ui/feedback/Badge.stories.d.ts +50 -0
  18. package/dist/definitions/ui/feedback/Badge.stories.d.ts.map +1 -0
  19. package/dist/definitions/ui/feedback/Message.d.ts.map +1 -1
  20. package/dist/definitions/ui/inputs/Switch.web.d.ts.map +1 -1
  21. package/dist/definitions/ui/primitives/ScrollView.d.ts +3 -2
  22. package/dist/definitions/ui/primitives/ScrollView.d.ts.map +1 -1
  23. package/dist/index-browser.es.js +343 -203
  24. package/dist/index-browser.es.js.map +1 -1
  25. package/dist/index-node22.cjs +318 -187
  26. package/dist/index-node22.cjs.map +1 -1
  27. package/dist/index-node22.mjs +319 -189
  28. package/dist/index-node22.mjs.map +1 -1
  29. package/dist/index-react-native.cjs.js +318 -187
  30. package/dist/index-react-native.cjs.js.map +1 -1
  31. package/dist/index-react-native.es.js +319 -189
  32. package/dist/index-react-native.es.js.map +1 -1
  33. package/package.json +1 -1
  34. package/src/config/defaultColorScales.ts +54 -55
  35. package/src/global.css +192 -179
  36. package/src/index.ts +2 -0
  37. package/src/themeVariables.ts +183 -171
  38. package/src/ui/actions/Button.stories.tsx +14 -24
  39. package/src/ui/actions/Button.tsx +16 -1
  40. package/src/ui/actions/IconButton.stories.tsx +20 -19
  41. package/src/ui/actions/IconButton.tsx +11 -0
  42. package/src/ui/containers/Box.tsx +24 -1
  43. package/src/ui/data/PressableBox.tsx +32 -9
  44. package/src/ui/data/PressableListItem.stories.tsx +1 -1
  45. package/src/ui/feedback/Badge.stories.tsx +83 -0
  46. package/src/ui/feedback/Badge.tsx +75 -0
  47. package/src/ui/feedback/Message.tsx +1 -2
  48. package/src/ui/inputs/Switch.web.tsx +24 -17
  49. package/src/ui/primitives/ScrollView.tsx +6 -6
@@ -55,6 +55,7 @@ const themeVariables = {
55
55
  "--color-screen": "#EBEBEB",
56
56
  "--color-surface": "#F5F5F5",
57
57
  "--color-highlight": "#FFFFFF",
58
+ "--color-enabled": "#C7C7C7",
58
59
  "--color-highlight-accent": "#E0E0E0",
59
60
  "--color-lowered": "#E0E0E0",
60
61
  "--color-screen-gradient-start": "#E0E0E0",
@@ -63,17 +64,17 @@ const themeVariables = {
63
64
  "--color-border-muted": "#8F8F8F",
64
65
  "--color-border-sharp": "#616161",
65
66
  "--color-interactive-contained-pressable": "#FFFFFF",
66
- "--color-interactive-contained-hover": "#E0E0E0",
67
- "--color-interactive-contained-focus": "#E0E0E0",
68
- "--color-interactive-contained-active": "#C7C7C7",
69
- "--color-interactive-outlined-pressable": "#8F8F8F",
70
- "--color-interactive-outlined-hover": "#616161",
71
- "--color-interactive-outlined-focus": "#616161",
72
- "--color-interactive-outlined-active": "#616161",
67
+ "--color-interactive-contained-hover": "#F5F5F5",
68
+ "--color-interactive-contained-focus": "#F5F5F5",
69
+ "--color-interactive-contained-active": "#EBEBEB",
70
+ "--color-interactive-outlined-pressable": "#616161",
71
+ "--color-interactive-outlined-hover": "#8F8F8F",
72
+ "--color-interactive-outlined-focus": "#8F8F8F",
73
+ "--color-interactive-outlined-active": "#8F8F8F",
73
74
  "--color-interactive-outlined-outline-focus": "#8F8F8F",
74
75
  "--color-interactive-active": "#616161",
75
76
  "--color-interactive-pressable": "#474747",
76
- "--color-interactive-hover": "#2E2E2E",
77
+ "--color-interactive-hover": "#141414",
77
78
  "--color-sharp": "#141414",
78
79
  "--color-accent": "#141414",
79
80
  "--color-accent-muted": "#616161",
@@ -102,6 +103,7 @@ const themeVariables = {
102
103
  "--color-screen": "#1F1F1F",
103
104
  "--color-surface": "#292929",
104
105
  "--color-highlight": "#333333",
106
+ "--color-enabled": "#525252",
105
107
  "--color-highlight-accent": "#333333",
106
108
  "--color-lowered": "#0F0F0F",
107
109
  "--color-screen-gradient-start": "#292929",
@@ -109,10 +111,10 @@ const themeVariables = {
109
111
  "--color-screen-gradient-end": "#0F0F0F",
110
112
  "--color-border-muted": "#525252",
111
113
  "--color-border-sharp": "#A8A8A8",
112
- "--color-interactive-contained-pressable": "#333333",
113
- "--color-interactive-contained-hover": "#474747",
114
- "--color-interactive-contained-focus": "#474747",
115
- "--color-interactive-contained-active": "#474747",
114
+ "--color-interactive-contained-pressable": "#474747",
115
+ "--color-interactive-contained-hover": "#525252",
116
+ "--color-interactive-contained-focus": "#525252",
117
+ "--color-interactive-contained-active": "#525252",
116
118
  "--color-interactive-outlined-pressable": "#525252",
117
119
  "--color-interactive-outlined-hover": "#A8A8A8",
118
120
  "--color-interactive-outlined-focus": "#A8A8A8",
@@ -120,7 +122,7 @@ const themeVariables = {
120
122
  "--color-interactive-outlined-outline-focus": "#525252",
121
123
  "--color-interactive-active": "#A8A8A8",
122
124
  "--color-interactive-pressable": "#C2C2C2",
123
- "--color-interactive-hover": "#DBDBDB",
125
+ "--color-interactive-hover": "#F5F5F5",
124
126
  "--color-sharp": "#F5F5F5",
125
127
  "--color-accent": "#F5F5F5",
126
128
  "--color-accent-muted": "#C2C2C2",
@@ -149,30 +151,31 @@ const themeVariables = {
149
151
  "--color-screen": "#DFF1F6",
150
152
  "--color-surface": "#EFF8FB",
151
153
  "--color-highlight": "#F7FBFD",
154
+ "--color-enabled": "#99DFF5",
152
155
  "--color-highlight-accent": "#C7EEF9",
153
156
  "--color-lowered": "#C7EEF9",
154
157
  "--color-screen-gradient-start": "#C7EEF9",
155
158
  "--color-screen-gradient-middle": "#99DFF5",
156
159
  "--color-screen-gradient-end": "#7DD7F2",
157
160
  "--color-border-muted": "#23C8FB",
158
- "--color-border-sharp": "#0493BE",
159
- "--color-interactive-contained-pressable": "#F7FBFD",
160
- "--color-interactive-contained-hover": "#C7EEF9",
161
- "--color-interactive-contained-focus": "#C7EEF9",
162
- "--color-interactive-contained-active": "#99DFF5",
163
- "--color-interactive-outlined-pressable": "#23C8FB",
164
- "--color-interactive-outlined-hover": "#0493BE",
165
- "--color-interactive-outlined-focus": "#0493BE",
166
- "--color-interactive-outlined-active": "#0493BE",
161
+ "--color-border-sharp": "#037496",
162
+ "--color-interactive-contained-pressable": "#037496",
163
+ "--color-interactive-contained-hover": "#049AC8",
164
+ "--color-interactive-contained-focus": "#049AC8",
165
+ "--color-interactive-contained-active": "#23C8FB",
166
+ "--color-interactive-outlined-pressable": "#037496",
167
+ "--color-interactive-outlined-hover": "#23C8FB",
168
+ "--color-interactive-outlined-focus": "#23C8FB",
169
+ "--color-interactive-outlined-active": "#23C8FB",
167
170
  "--color-interactive-outlined-outline-focus": "#23C8FB",
168
- "--color-interactive-active": "#0493BE",
171
+ "--color-interactive-active": "#037496",
169
172
  "--color-interactive-pressable": "#024D64",
170
- "--color-interactive-hover": "#012732",
173
+ "--color-interactive-hover": "#011F28",
171
174
  "--color-sharp": "#011F28",
172
175
  "--color-accent": "#024D64",
173
- "--color-accent-muted": "#0493BE",
174
- "--color-on-accent": "#024D64",
175
- "--color-on-accent-muted": "#7DD7F2",
176
+ "--color-accent-muted": "#037496",
177
+ "--color-on-accent": "#FFFFFF",
178
+ "--color-on-accent-muted": "#C7EEF9",
176
179
  "--color-selection": "#024D6440",
177
180
  "--color-interactive-accent-contained-bg": "#DFF1F6",
178
181
  "--color-interactive-accent-contained-bg-hover": "#EFF8FB",
@@ -196,30 +199,31 @@ const themeVariables = {
196
199
  "--color-screen": "#DFF0F6",
197
200
  "--color-surface": "#EFF8FB",
198
201
  "--color-highlight": "#F7FBFD",
202
+ "--color-enabled": "#99DEF5",
199
203
  "--color-highlight-accent": "#C7EDF9",
200
204
  "--color-lowered": "#C7EDF9",
201
205
  "--color-screen-gradient-start": "#C7EDF9",
202
206
  "--color-screen-gradient-middle": "#99DEF5",
203
207
  "--color-screen-gradient-end": "#7DD5F2",
204
208
  "--color-border-muted": "#23C5FB",
205
- "--color-border-sharp": "#048FBE",
206
- "--color-interactive-contained-pressable": "#F7FBFD",
207
- "--color-interactive-contained-hover": "#C7EDF9",
208
- "--color-interactive-contained-focus": "#C7EDF9",
209
- "--color-interactive-contained-active": "#99DEF5",
210
- "--color-interactive-outlined-pressable": "#23C5FB",
211
- "--color-interactive-outlined-hover": "#048FBE",
212
- "--color-interactive-outlined-focus": "#048FBE",
213
- "--color-interactive-outlined-active": "#048FBE",
209
+ "--color-border-sharp": "#037196",
210
+ "--color-interactive-contained-pressable": "#037196",
211
+ "--color-interactive-contained-hover": "#0497C8",
212
+ "--color-interactive-contained-focus": "#0497C8",
213
+ "--color-interactive-contained-active": "#23C5FB",
214
+ "--color-interactive-outlined-pressable": "#037196",
215
+ "--color-interactive-outlined-hover": "#23C5FB",
216
+ "--color-interactive-outlined-focus": "#23C5FB",
217
+ "--color-interactive-outlined-active": "#23C5FB",
214
218
  "--color-interactive-outlined-outline-focus": "#23C5FB",
215
- "--color-interactive-active": "#048FBE",
219
+ "--color-interactive-active": "#037196",
216
220
  "--color-interactive-pressable": "#024B64",
217
- "--color-interactive-hover": "#012632",
221
+ "--color-interactive-hover": "#011E28",
218
222
  "--color-sharp": "#011E28",
219
223
  "--color-accent": "#024B64",
220
- "--color-accent-muted": "#048FBE",
221
- "--color-on-accent": "#024B64",
222
- "--color-on-accent-muted": "#7DD5F2",
224
+ "--color-accent-muted": "#037196",
225
+ "--color-on-accent": "#FFFFFF",
226
+ "--color-on-accent-muted": "#C7EDF9",
223
227
  "--color-selection": "#024B6440",
224
228
  "--color-interactive-accent-contained-bg": "#DFF0F6",
225
229
  "--color-interactive-accent-contained-bg-hover": "#EFF8FB",
@@ -243,31 +247,32 @@ const themeVariables = {
243
247
  "--color-screen": "#DFF6DF",
244
248
  "--color-surface": "#EFFBEF",
245
249
  "--color-highlight": "#F7FDF7",
246
- "--color-highlight-accent": "#C7F9C7",
247
- "--color-lowered": "#C7F9C7",
248
- "--color-screen-gradient-start": "#C7F9C7",
249
- "--color-screen-gradient-middle": "#99F599",
250
- "--color-screen-gradient-end": "#7DF27D",
251
- "--color-border-muted": "#23FB23",
252
- "--color-border-sharp": "#04BE04",
253
- "--color-interactive-contained-pressable": "#F7FDF7",
254
- "--color-interactive-contained-hover": "#C7F9C7",
255
- "--color-interactive-contained-focus": "#C7F9C7",
256
- "--color-interactive-contained-active": "#99F599",
257
- "--color-interactive-outlined-pressable": "#23FB23",
258
- "--color-interactive-outlined-hover": "#04BE04",
259
- "--color-interactive-outlined-focus": "#04BE04",
260
- "--color-interactive-outlined-active": "#04BE04",
261
- "--color-interactive-outlined-outline-focus": "#23FB23",
262
- "--color-interactive-active": "#04BE04",
263
- "--color-interactive-pressable": "#025002",
264
- "--color-interactive-hover": "#011E01",
250
+ "--color-enabled": "#91F391",
251
+ "--color-highlight-accent": "#BFF8BF",
252
+ "--color-lowered": "#BFF8BF",
253
+ "--color-screen-gradient-start": "#BFF8BF",
254
+ "--color-screen-gradient-middle": "#91F391",
255
+ "--color-screen-gradient-end": "#75F075",
256
+ "--color-border-muted": "#19FA19",
257
+ "--color-border-sharp": "#027802",
258
+ "--color-interactive-contained-pressable": "#027802",
259
+ "--color-interactive-contained-hover": "#03AA03",
260
+ "--color-interactive-contained-focus": "#03AA03",
261
+ "--color-interactive-contained-active": "#19FA19",
262
+ "--color-interactive-outlined-pressable": "#027802",
263
+ "--color-interactive-outlined-hover": "#19FA19",
264
+ "--color-interactive-outlined-focus": "#19FA19",
265
+ "--color-interactive-outlined-active": "#19FA19",
266
+ "--color-interactive-outlined-outline-focus": "#19FA19",
267
+ "--color-interactive-active": "#027802",
268
+ "--color-interactive-pressable": "#014601",
269
+ "--color-interactive-hover": "#012801",
265
270
  "--color-sharp": "#012801",
266
- "--color-accent": "#025002",
267
- "--color-accent-muted": "#04BE04",
268
- "--color-on-accent": "#025002",
269
- "--color-on-accent-muted": "#7DF27D",
270
- "--color-selection": "#02500240",
271
+ "--color-accent": "#014601",
272
+ "--color-accent-muted": "#027802",
273
+ "--color-on-accent": "#FFFFFF",
274
+ "--color-on-accent-muted": "#BFF8BF",
275
+ "--color-selection": "#01460140",
271
276
  "--color-interactive-accent-contained-bg": "#DFF6DF",
272
277
  "--color-interactive-accent-contained-bg-hover": "#EFFBEF",
273
278
  "--color-interactive-accent-contained-bg-focus": "#EFFBEF",
@@ -290,31 +295,32 @@ const themeVariables = {
290
295
  "--color-screen": "#F6EEDF",
291
296
  "--color-surface": "#FBF7EF",
292
297
  "--color-highlight": "#FDFBF7",
293
- "--color-highlight-accent": "#F6E1B6",
294
- "--color-lowered": "#F6E1B6",
295
- "--color-screen-gradient-start": "#F6E1B6",
296
- "--color-screen-gradient-middle": "#F0CE89",
297
- "--color-screen-gradient-end": "#EDC36E",
298
- "--color-border-muted": "#FAAC0F",
299
- "--color-border-sharp": "#AA7203",
300
- "--color-interactive-contained-pressable": "#FDFBF7",
301
- "--color-interactive-contained-hover": "#F6E1B6",
302
- "--color-interactive-contained-focus": "#F6E1B6",
303
- "--color-interactive-contained-active": "#F0CE89",
304
- "--color-interactive-outlined-pressable": "#FAAC0F",
305
- "--color-interactive-outlined-hover": "#AA7203",
306
- "--color-interactive-outlined-focus": "#AA7203",
307
- "--color-interactive-outlined-active": "#AA7203",
308
- "--color-interactive-outlined-outline-focus": "#FAAC0F",
309
- "--color-interactive-active": "#AA7203",
310
- "--color-interactive-pressable": "#281B01",
311
- "--color-interactive-hover": "#F6F900",
298
+ "--color-enabled": "#F3D291",
299
+ "--color-highlight-accent": "#F8E5BF",
300
+ "--color-lowered": "#F8E5BF",
301
+ "--color-screen-gradient-start": "#F8E5BF",
302
+ "--color-screen-gradient-middle": "#F3D291",
303
+ "--color-screen-gradient-end": "#F0C775",
304
+ "--color-border-muted": "#FAAF19",
305
+ "--color-border-sharp": "#8C5E03",
306
+ "--color-interactive-contained-pressable": "#8C5E03",
307
+ "--color-interactive-contained-hover": "#BE8004",
308
+ "--color-interactive-contained-focus": "#BE8004",
309
+ "--color-interactive-contained-active": "#FAAF19",
310
+ "--color-interactive-outlined-pressable": "#8C5E03",
311
+ "--color-interactive-outlined-hover": "#FAAF19",
312
+ "--color-interactive-outlined-focus": "#FAAF19",
313
+ "--color-interactive-outlined-active": "#FAAF19",
314
+ "--color-interactive-outlined-outline-focus": "#FAAF19",
315
+ "--color-interactive-active": "#8C5E03",
316
+ "--color-interactive-pressable": "#5A3D02",
317
+ "--color-interactive-hover": "#281B01",
312
318
  "--color-sharp": "#281B01",
313
- "--color-accent": "#281B01",
314
- "--color-accent-muted": "#AA7203",
315
- "--color-on-accent": "#281B01",
316
- "--color-on-accent-muted": "#EDC36E",
317
- "--color-selection": "#281B0140",
319
+ "--color-accent": "#5A3D02",
320
+ "--color-accent-muted": "#8C5E03",
321
+ "--color-on-accent": "#FFFFFF",
322
+ "--color-on-accent-muted": "#F8E5BF",
323
+ "--color-selection": "#5A3D0240",
318
324
  "--color-interactive-accent-contained-bg": "#F6EEDF",
319
325
  "--color-interactive-accent-contained-bg-hover": "#FBF7EF",
320
326
  "--color-interactive-accent-contained-bg-focus": "#FBF7EF",
@@ -337,30 +343,31 @@ const themeVariables = {
337
343
  "--color-screen": "#F6E0DF",
338
344
  "--color-surface": "#FBEFEF",
339
345
  "--color-highlight": "#FDF7F7",
346
+ "--color-enabled": "#F7A4A1",
340
347
  "--color-highlight-accent": "#FBD2D0",
341
348
  "--color-lowered": "#FBD2D0",
342
349
  "--color-screen-gradient-start": "#FBD2D0",
343
350
  "--color-screen-gradient-middle": "#F7A4A1",
344
351
  "--color-screen-gradient-end": "#F48985",
345
352
  "--color-border-muted": "#FB342D",
346
- "--color-border-sharp": "#C80B04",
347
- "--color-interactive-contained-pressable": "#FDF7F7",
348
- "--color-interactive-contained-hover": "#FBD2D0",
349
- "--color-interactive-contained-focus": "#FBD2D0",
350
- "--color-interactive-contained-active": "#F7A4A1",
351
- "--color-interactive-outlined-pressable": "#FB342D",
352
- "--color-interactive-outlined-hover": "#C80B04",
353
- "--color-interactive-outlined-focus": "#C80B04",
354
- "--color-interactive-outlined-active": "#C80B04",
353
+ "--color-border-sharp": "#A00803",
354
+ "--color-interactive-contained-pressable": "#A00803",
355
+ "--color-interactive-contained-hover": "#D20B04",
356
+ "--color-interactive-contained-focus": "#D20B04",
357
+ "--color-interactive-contained-active": "#FB342D",
358
+ "--color-interactive-outlined-pressable": "#A00803",
359
+ "--color-interactive-outlined-hover": "#FB342D",
360
+ "--color-interactive-outlined-focus": "#FB342D",
361
+ "--color-interactive-outlined-active": "#FB342D",
355
362
  "--color-interactive-outlined-outline-focus": "#FB342D",
356
- "--color-interactive-active": "#C80B04",
363
+ "--color-interactive-active": "#A00803",
357
364
  "--color-interactive-pressable": "#6E0602",
358
- "--color-interactive-hover": "#3C0301",
365
+ "--color-interactive-hover": "#280201",
359
366
  "--color-sharp": "#280201",
360
367
  "--color-accent": "#6E0602",
361
- "--color-accent-muted": "#C80B04",
362
- "--color-on-accent": "#6E0602",
363
- "--color-on-accent-muted": "#F48985",
368
+ "--color-accent-muted": "#A00803",
369
+ "--color-on-accent": "#FFFFFF",
370
+ "--color-on-accent-muted": "#FBD2D0",
364
371
  "--color-selection": "#6E060240",
365
372
  "--color-interactive-accent-contained-bg": "#F6E0DF",
366
373
  "--color-interactive-accent-contained-bg-hover": "#FBEFEF",
@@ -384,6 +391,7 @@ const themeVariables = {
384
391
  "--color-screen": "#0D2830",
385
392
  "--color-surface": "#123540",
386
393
  "--color-highlight": "#104E60",
394
+ "--color-enabled": "#1E94B8",
387
395
  "--color-highlight-accent": "#104E60",
388
396
  "--color-lowered": "#071418",
389
397
  "--color-screen-gradient-start": "#123540",
@@ -391,10 +399,10 @@ const themeVariables = {
391
399
  "--color-screen-gradient-end": "#071418",
392
400
  "--color-border-muted": "#1E94B8",
393
401
  "--color-border-sharp": "#5CD1F5",
394
- "--color-interactive-contained-pressable": "#104E60",
395
- "--color-interactive-contained-hover": "#156A84",
396
- "--color-interactive-contained-focus": "#156A84",
397
- "--color-interactive-contained-active": "#156A84",
402
+ "--color-interactive-contained-pressable": "#156A84",
403
+ "--color-interactive-contained-hover": "#1E94B8",
404
+ "--color-interactive-contained-focus": "#1E94B8",
405
+ "--color-interactive-contained-active": "#1E94B8",
398
406
  "--color-interactive-outlined-pressable": "#1E94B8",
399
407
  "--color-interactive-outlined-hover": "#5CD1F5",
400
408
  "--color-interactive-outlined-focus": "#5CD1F5",
@@ -402,11 +410,11 @@ const themeVariables = {
402
410
  "--color-interactive-outlined-outline-focus": "#1E94B8",
403
411
  "--color-interactive-active": "#5CD1F5",
404
412
  "--color-interactive-pressable": "#8CDFF8",
405
- "--color-interactive-hover": "#BCECFB",
413
+ "--color-interactive-hover": "#D9F4FD",
406
414
  "--color-sharp": "#D9F4FD",
407
415
  "--color-accent": "#8CDFF8",
408
416
  "--color-accent-muted": "#8CDFF8",
409
- "--color-on-accent": "#D9F4FD",
417
+ "--color-on-accent": "#F5F5F5",
410
418
  "--color-on-accent-muted": "#8CDFF8",
411
419
  "--color-selection": "#8CDFF840",
412
420
  "--color-interactive-accent-contained-bg": "#156A84",
@@ -431,6 +439,7 @@ const themeVariables = {
431
439
  "--color-screen": "#0D2730",
432
440
  "--color-surface": "#123440",
433
441
  "--color-highlight": "#104C60",
442
+ "--color-enabled": "#1E92B8",
434
443
  "--color-highlight-accent": "#104C60",
435
444
  "--color-lowered": "#071418",
436
445
  "--color-screen-gradient-start": "#123440",
@@ -438,10 +447,10 @@ const themeVariables = {
438
447
  "--color-screen-gradient-end": "#071418",
439
448
  "--color-border-muted": "#1E92B8",
440
449
  "--color-border-sharp": "#5CCEF5",
441
- "--color-interactive-contained-pressable": "#104C60",
442
- "--color-interactive-contained-hover": "#156884",
443
- "--color-interactive-contained-focus": "#156884",
444
- "--color-interactive-contained-active": "#156884",
450
+ "--color-interactive-contained-pressable": "#156884",
451
+ "--color-interactive-contained-hover": "#1E92B8",
452
+ "--color-interactive-contained-focus": "#1E92B8",
453
+ "--color-interactive-contained-active": "#1E92B8",
445
454
  "--color-interactive-outlined-pressable": "#1E92B8",
446
455
  "--color-interactive-outlined-hover": "#5CCEF5",
447
456
  "--color-interactive-outlined-focus": "#5CCEF5",
@@ -449,11 +458,11 @@ const themeVariables = {
449
458
  "--color-interactive-outlined-outline-focus": "#1E92B8",
450
459
  "--color-interactive-active": "#5CCEF5",
451
460
  "--color-interactive-pressable": "#8CDDF8",
452
- "--color-interactive-hover": "#BCEBFB",
461
+ "--color-interactive-hover": "#D9F4FD",
453
462
  "--color-sharp": "#D9F4FD",
454
463
  "--color-accent": "#8CDDF8",
455
464
  "--color-accent-muted": "#8CDDF8",
456
- "--color-on-accent": "#D9F4FD",
465
+ "--color-on-accent": "#F5F5F5",
457
466
  "--color-on-accent-muted": "#8CDDF8",
458
467
  "--color-selection": "#8CDDF840",
459
468
  "--color-interactive-accent-contained-bg": "#156884",
@@ -477,36 +486,37 @@ const themeVariables = {
477
486
  "--color-interactive-accent-outlined-disabled": "#474747",
478
487
  "--color-screen": "#0D300D",
479
488
  "--color-surface": "#124012",
480
- "--color-highlight": "#106010",
481
- "--color-highlight-accent": "#106010",
489
+ "--color-highlight": "#0F570F",
490
+ "--color-enabled": "#1FAD1F",
491
+ "--color-highlight-accent": "#0F570F",
482
492
  "--color-lowered": "#071807",
483
493
  "--color-screen-gradient-start": "#124012",
484
494
  "--color-screen-gradient-middle": "#0D300D",
485
495
  "--color-screen-gradient-end": "#071807",
486
- "--color-border-muted": "#1EB81E",
487
- "--color-border-sharp": "#5CF55C",
488
- "--color-interactive-contained-pressable": "#106010",
489
- "--color-interactive-contained-hover": "#158415",
490
- "--color-interactive-contained-focus": "#158415",
491
- "--color-interactive-contained-active": "#158415",
492
- "--color-interactive-outlined-pressable": "#1EB81E",
493
- "--color-interactive-outlined-hover": "#5CF55C",
494
- "--color-interactive-outlined-focus": "#5CF55C",
495
- "--color-interactive-outlined-active": "#5CF55C",
496
- "--color-interactive-outlined-outline-focus": "#1EB81E",
497
- "--color-interactive-active": "#5CF55C",
498
- "--color-interactive-pressable": "#8CF88C",
499
- "--color-interactive-hover": "#BCFBBC",
496
+ "--color-border-muted": "#1FAD1F",
497
+ "--color-border-sharp": "#52F452",
498
+ "--color-interactive-contained-pressable": "#157915",
499
+ "--color-interactive-contained-hover": "#1FAD1F",
500
+ "--color-interactive-contained-focus": "#1FAD1F",
501
+ "--color-interactive-contained-active": "#1FAD1F",
502
+ "--color-interactive-outlined-pressable": "#1FAD1F",
503
+ "--color-interactive-outlined-hover": "#52F452",
504
+ "--color-interactive-outlined-focus": "#52F452",
505
+ "--color-interactive-outlined-active": "#52F452",
506
+ "--color-interactive-outlined-outline-focus": "#1FAD1F",
507
+ "--color-interactive-active": "#52F452",
508
+ "--color-interactive-pressable": "#82F782",
509
+ "--color-interactive-hover": "#D9FDD9",
500
510
  "--color-sharp": "#D9FDD9",
501
- "--color-accent": "#8CF88C",
502
- "--color-accent-muted": "#8CF88C",
503
- "--color-on-accent": "#D9FDD9",
504
- "--color-on-accent-muted": "#8CF88C",
505
- "--color-selection": "#8CF88C40",
506
- "--color-interactive-accent-contained-bg": "#158415",
507
- "--color-interactive-accent-contained-bg-hover": "#1EB81E",
508
- "--color-interactive-accent-contained-bg-focus": "#1EB81E",
509
- "--color-interactive-accent-contained-bg-active": "#1EB81E"
511
+ "--color-accent": "#82F782",
512
+ "--color-accent-muted": "#82F782",
513
+ "--color-on-accent": "#F5F5F5",
514
+ "--color-on-accent-muted": "#82F782",
515
+ "--color-selection": "#82F78240",
516
+ "--color-interactive-accent-contained-bg": "#157915",
517
+ "--color-interactive-accent-contained-bg-hover": "#1FAD1F",
518
+ "--color-interactive-accent-contained-bg-focus": "#1FAD1F",
519
+ "--color-interactive-accent-contained-bg-active": "#1FAD1F"
510
520
  },
511
521
  "dark_warning": {
512
522
  "--color-translucent": "#1f1e1e55",
@@ -524,36 +534,37 @@ const themeVariables = {
524
534
  "--color-interactive-accent-outlined-disabled": "#474747",
525
535
  "--color-screen": "#30240D",
526
536
  "--color-surface": "#403012",
527
- "--color-highlight": "#4F390D",
528
- "--color-highlight-accent": "#4F390D",
537
+ "--color-highlight": "#583F0E",
538
+ "--color-enabled": "#AF7E1D",
539
+ "--color-highlight-accent": "#583F0E",
529
540
  "--color-lowered": "#181207",
530
541
  "--color-screen-gradient-start": "#403012",
531
542
  "--color-screen-gradient-middle": "#30240D",
532
543
  "--color-screen-gradient-end": "#181207",
533
- "--color-border-muted": "#A7781B",
534
- "--color-border-sharp": "#F3BB49",
535
- "--color-interactive-contained-pressable": "#4F390D",
536
- "--color-interactive-contained-hover": "#725213",
537
- "--color-interactive-contained-focus": "#725213",
538
- "--color-interactive-contained-active": "#725213",
539
- "--color-interactive-outlined-pressable": "#A7781B",
540
- "--color-interactive-outlined-hover": "#F3BB49",
541
- "--color-interactive-outlined-focus": "#F3BB49",
542
- "--color-interactive-outlined-active": "#F3BB49",
543
- "--color-interactive-outlined-outline-focus": "#A7781B",
544
- "--color-interactive-active": "#F3BB49",
545
- "--color-interactive-pressable": "#F6CD79",
546
- "--color-interactive-hover": "#F9DFA9",
544
+ "--color-border-muted": "#AF7E1D",
545
+ "--color-border-sharp": "#F4BE52",
546
+ "--color-interactive-contained-pressable": "#7B5914",
547
+ "--color-interactive-contained-hover": "#AF7E1D",
548
+ "--color-interactive-contained-focus": "#AF7E1D",
549
+ "--color-interactive-contained-active": "#AF7E1D",
550
+ "--color-interactive-outlined-pressable": "#AF7E1D",
551
+ "--color-interactive-outlined-hover": "#F4BE52",
552
+ "--color-interactive-outlined-focus": "#F4BE52",
553
+ "--color-interactive-outlined-active": "#F4BE52",
554
+ "--color-interactive-outlined-outline-focus": "#AF7E1D",
555
+ "--color-interactive-active": "#F4BE52",
556
+ "--color-interactive-pressable": "#F7D082",
557
+ "--color-interactive-hover": "#FDF1D9",
547
558
  "--color-sharp": "#FDF1D9",
548
- "--color-accent": "#F6CD79",
549
- "--color-accent-muted": "#F6CD79",
550
- "--color-on-accent": "#FDF1D9",
551
- "--color-on-accent-muted": "#F6CD79",
552
- "--color-selection": "#F6CD7940",
553
- "--color-interactive-accent-contained-bg": "#725213",
554
- "--color-interactive-accent-contained-bg-hover": "#A7781B",
555
- "--color-interactive-accent-contained-bg-focus": "#A7781B",
556
- "--color-interactive-accent-contained-bg-active": "#A7781B"
559
+ "--color-accent": "#F7D082",
560
+ "--color-accent-muted": "#F7D082",
561
+ "--color-on-accent": "#F5F5F5",
562
+ "--color-on-accent-muted": "#F7D082",
563
+ "--color-selection": "#F7D08240",
564
+ "--color-interactive-accent-contained-bg": "#7B5914",
565
+ "--color-interactive-accent-contained-bg-hover": "#AF7E1D",
566
+ "--color-interactive-accent-contained-bg-focus": "#AF7E1D",
567
+ "--color-interactive-accent-contained-bg-active": "#AF7E1D"
557
568
  },
558
569
  "dark_danger": {
559
570
  "--color-translucent": "#1f1e1e55",
@@ -572,6 +583,7 @@ const themeVariables = {
572
583
  "--color-screen": "#300F0D",
573
584
  "--color-surface": "#401312",
574
585
  "--color-highlight": "#691411",
586
+ "--color-enabled": "#C1251F",
575
587
  "--color-highlight-accent": "#691411",
576
588
  "--color-lowered": "#180707",
577
589
  "--color-screen-gradient-start": "#401312",
@@ -579,10 +591,10 @@ const themeVariables = {
579
591
  "--color-screen-gradient-end": "#180707",
580
592
  "--color-border-muted": "#C1251F",
581
593
  "--color-border-sharp": "#F56A66",
582
- "--color-interactive-contained-pressable": "#691411",
583
- "--color-interactive-contained-hover": "#8C1B17",
584
- "--color-interactive-contained-focus": "#8C1B17",
585
- "--color-interactive-contained-active": "#8C1B17",
594
+ "--color-interactive-contained-pressable": "#8C1B17",
595
+ "--color-interactive-contained-hover": "#C1251F",
596
+ "--color-interactive-contained-focus": "#C1251F",
597
+ "--color-interactive-contained-active": "#C1251F",
586
598
  "--color-interactive-outlined-pressable": "#C1251F",
587
599
  "--color-interactive-outlined-hover": "#F56A66",
588
600
  "--color-interactive-outlined-focus": "#F56A66",
@@ -590,11 +602,11 @@ const themeVariables = {
590
602
  "--color-interactive-outlined-outline-focus": "#C1251F",
591
603
  "--color-interactive-active": "#F56A66",
592
604
  "--color-interactive-pressable": "#F89996",
593
- "--color-interactive-hover": "#FBC7C5",
605
+ "--color-interactive-hover": "#FDDAD9",
594
606
  "--color-sharp": "#FDDAD9",
595
607
  "--color-accent": "#F89996",
596
608
  "--color-accent-muted": "#F89996",
597
- "--color-on-accent": "#FDDAD9",
609
+ "--color-on-accent": "#F5F5F5",
598
610
  "--color-on-accent-muted": "#F89996",
599
611
  "--color-selection": "#F8999640",
600
612
  "--color-interactive-accent-contained-bg": "#8C1B17",
@@ -689,11 +701,10 @@ const Paragraph = react.forwardRef(
689
701
  }
690
702
  );
691
703
 
692
- const ScrollView = react.forwardRef(
693
- (props, ref) => {
694
- return /* @__PURE__ */ jsxRuntime.jsx(reactNative.ScrollView, { ref, ...props });
695
- }
696
- );
704
+ const ScrollView = nativewind.styled(reactNative.ScrollView, {
705
+ className: "style",
706
+ contentContainerClassName: "contentContainerStyle"
707
+ });
697
708
 
698
709
  const FlatList = nativewind.styled(reactNative.FlatList, {
699
710
  className: "style",
@@ -792,6 +803,26 @@ const InteractiveBox = react.forwardRef(
792
803
  }
793
804
  )
794
805
  );
806
+ react.forwardRef(
807
+ ({ withFocusVisibleOutline, children, className, ...rest }, ref) => {
808
+ const child = react.Children.only(children);
809
+ return /* @__PURE__ */ jsxRuntime.jsx(
810
+ reactNative.Pressable,
811
+ {
812
+ ref,
813
+ pointerEvents: "auto",
814
+ className: `flex-center ${className ?? ""}`,
815
+ ...rest,
816
+ children: react.cloneElement(child, {
817
+ className: interactiveBoxVariants({
818
+ withFocusVisibleOutline,
819
+ className: child.props.className
820
+ })
821
+ })
822
+ }
823
+ );
824
+ }
825
+ );
795
826
  const SafeAreaBox = react.forwardRef(
796
827
  (props, ref) => {
797
828
  const insets = reactNativeSafeAreaContext.useSafeAreaInsets();
@@ -1249,18 +1280,23 @@ const pressableBoxVariants = tailwindVariants.tv(
1249
1280
  "focus-visible:outline-border-muted"
1250
1281
  ].join(" "),
1251
1282
  outlined: [
1252
- "border",
1283
+ "border bg-highlight",
1253
1284
  process.env.EXPO_PUBLIC_STORYBOOK_ENABLED ? "" : "border-interactive-outlined-pressable",
1254
1285
  "hover:border-interactive-outlined-hover",
1255
1286
  "focus:border-interactive-outlined-focus",
1256
1287
  "active:border-interactive-outlined-active",
1257
1288
  "disabled:border-interactive-outlined-disabled",
1258
1289
  "focus-visible:outline-interactive-outlined-outline-focus"
1290
+ ].join(" "),
1291
+ ghost: [
1292
+ "border border-transparent",
1293
+ "hover:border hover:border-interactive-outlined-hover",
1294
+ "focus:border focus:border-interactive-outlined-focus",
1295
+ "active:border active:border-interactive-outlined-active",
1296
+ "disabled:border-interactive-outlined-disabled",
1297
+ "focus-visible:outline-interactive-outlined-outline-focus"
1259
1298
  ].join(" ")
1260
1299
  },
1261
- ghost: {
1262
- true: "bg-transparent border-transparent shadow-none"
1263
- },
1264
1300
  forceStyle: {
1265
1301
  hover: "",
1266
1302
  focus: "",
@@ -1311,6 +1347,27 @@ const pressableBoxVariants = tailwindVariants.tv(
1311
1347
  variant: "outlined",
1312
1348
  forceStyle: "press",
1313
1349
  className: "border-interactive-outlined-active"
1350
+ },
1351
+ /* ghost */
1352
+ {
1353
+ variant: "ghost",
1354
+ forceStyle: void 0,
1355
+ className: "border-transparent"
1356
+ },
1357
+ {
1358
+ variant: "ghost",
1359
+ forceStyle: "hover",
1360
+ className: "border-interactive-outlined-hover"
1361
+ },
1362
+ {
1363
+ variant: "ghost",
1364
+ forceStyle: "focus",
1365
+ className: "border-interactive-outlined-focus"
1366
+ },
1367
+ {
1368
+ variant: "ghost",
1369
+ forceStyle: "press",
1370
+ className: "border-interactive-outlined-active"
1314
1371
  }
1315
1372
  ] : void 0,
1316
1373
  defaultVariants: {
@@ -1320,7 +1377,7 @@ const pressableBoxVariants = tailwindVariants.tv(
1320
1377
  { twMerge: false }
1321
1378
  );
1322
1379
  const PressableBox = react.forwardRef(
1323
- ({ className, variant, ghost = false, forceStyle, accent, ...props }, ref) => {
1380
+ ({ className, variant, forceStyle, accent, ...props }, ref) => {
1324
1381
  return /* @__PURE__ */ jsxRuntime.jsx(AccentScope, { accent, children: /* @__PURE__ */ jsxRuntime.jsx(
1325
1382
  InteractiveBox,
1326
1383
  {
@@ -1329,7 +1386,6 @@ const PressableBox = react.forwardRef(
1329
1386
  role: "button",
1330
1387
  className: pressableBoxVariants({
1331
1388
  variant,
1332
- ghost,
1333
1389
  className,
1334
1390
  forceStyle
1335
1391
  }),
@@ -1363,7 +1419,8 @@ const buttonVariants = tailwindVariants.tv(
1363
1419
  },
1364
1420
  variant: {
1365
1421
  contained: { text: "text-on-accent" },
1366
- outlined: { text: "text-sharp" }
1422
+ outlined: { text: "text-sharp" },
1423
+ ghost: { text: "text-sharp" }
1367
1424
  },
1368
1425
  disabled: { true: {}, false: {} }
1369
1426
  },
@@ -1371,8 +1428,18 @@ const buttonVariants = tailwindVariants.tv(
1371
1428
  {
1372
1429
  variant: "contained",
1373
1430
  disabled: false,
1431
+ ghost: false,
1374
1432
  class: { icon: "text-on-accent" }
1375
1433
  },
1434
+ {
1435
+ variant: "contained",
1436
+ disabled: false,
1437
+ ghost: true,
1438
+ class: {
1439
+ text: "text-sharp hover:text-on-accent",
1440
+ icon: "text-sharp hover:text-on-accent"
1441
+ }
1442
+ },
1376
1443
  { variant: "outlined", disabled: false, class: { icon: "text-sharp" } },
1377
1444
  {
1378
1445
  variant: "contained",
@@ -1399,7 +1466,11 @@ function Button({
1399
1466
  className,
1400
1467
  ...pressableProps
1401
1468
  }) {
1402
- const styles = buttonVariants({ size, variant, disabled: disabled === true });
1469
+ const styles = buttonVariants({
1470
+ size,
1471
+ variant,
1472
+ disabled: disabled === true
1473
+ });
1403
1474
  return /* @__PURE__ */ jsxRuntime.jsxs(
1404
1475
  PressableBox,
1405
1476
  {
@@ -1460,7 +1531,8 @@ const iconButtonVariants = tailwindVariants.tv(
1460
1531
  variants: {
1461
1532
  variant: {
1462
1533
  contained: {},
1463
- outlined: {}
1534
+ outlined: {},
1535
+ ghost: {}
1464
1536
  },
1465
1537
  disabled: {
1466
1538
  true: {},
@@ -1478,6 +1550,11 @@ const iconButtonVariants = tailwindVariants.tv(
1478
1550
  disabled: false,
1479
1551
  class: { icon: "text-sharp" }
1480
1552
  },
1553
+ {
1554
+ variant: "ghost",
1555
+ disabled: false,
1556
+ class: { icon: "text-sharp" }
1557
+ },
1481
1558
  {
1482
1559
  variant: "contained",
1483
1560
  disabled: true,
@@ -1487,6 +1564,11 @@ const iconButtonVariants = tailwindVariants.tv(
1487
1564
  variant: "outlined",
1488
1565
  disabled: true,
1489
1566
  class: { icon: "text-disabled-muted" }
1567
+ },
1568
+ {
1569
+ variant: "ghost",
1570
+ disabled: true,
1571
+ class: { icon: "text-disabled-muted" }
1490
1572
  }
1491
1573
  ],
1492
1574
  defaultVariants: { variant: "contained" }
@@ -1661,6 +1743,55 @@ function Switch({ accent, ...rest }) {
1661
1743
  return /* @__PURE__ */ jsxRuntime.jsx(AccentScope, { accent, children: /* @__PURE__ */ jsxRuntime.jsx(SwitchInner, { ...rest }) });
1662
1744
  }
1663
1745
 
1746
+ const badgeVariants = tailwindVariants.tv(
1747
+ {
1748
+ slots: {
1749
+ frame: "flex-row items-center self-start rounded-full",
1750
+ text: "font-body-bold",
1751
+ icon: ""
1752
+ },
1753
+ variants: {
1754
+ size: {
1755
+ sm: { frame: "gap-xxs px-xs py-xxs", text: "text-xs", icon: "" },
1756
+ md: { frame: "gap-xs px-sm py-xxs", text: "text-sm", icon: "" }
1757
+ },
1758
+ variant: {
1759
+ solid: {
1760
+ frame: "bg-highlight-accent",
1761
+ text: "text-sharp",
1762
+ icon: "text-sharp"
1763
+ },
1764
+ "solid.enabled": {
1765
+ frame: "bg-enabled",
1766
+ text: "text-sharp",
1767
+ icon: "text-sharp"
1768
+ },
1769
+ outlined: {
1770
+ frame: "border border-accent",
1771
+ text: "text-accent",
1772
+ icon: "text-accent"
1773
+ }
1774
+ }
1775
+ },
1776
+ defaultVariants: { size: "md", variant: "solid" }
1777
+ },
1778
+ { twMerge: false }
1779
+ );
1780
+ const ICON_SIZE$1 = { sm: 12, md: 16 };
1781
+ function Badge({
1782
+ accent = "brand",
1783
+ size = "md",
1784
+ variant = "solid",
1785
+ icon,
1786
+ children
1787
+ }) {
1788
+ const styles = badgeVariants({ size, variant });
1789
+ return /* @__PURE__ */ jsxRuntime.jsx(AccentScope, { accent, children: /* @__PURE__ */ jsxRuntime.jsxs(Box, { className: styles.frame(), children: [
1790
+ icon ? /* @__PURE__ */ jsxRuntime.jsx(Icon, { icon, size: ICON_SIZE$1[size], className: styles.icon() }) : null,
1791
+ /* @__PURE__ */ jsxRuntime.jsx(Text, { className: styles.text(), children })
1792
+ ] }) });
1793
+ }
1794
+
1664
1795
  const messageFrameVariants = tailwindVariants.tv(
1665
1796
  {
1666
1797
  base: "flex-row items-center bg-highlight-accent overflow-hidden",
@@ -1701,11 +1832,10 @@ function Message({
1701
1832
  children: /* @__PURE__ */ jsxRuntime.jsx(
1702
1833
  IconButton,
1703
1834
  {
1704
- ghost: true,
1705
1835
  icon: /* @__PURE__ */ jsxRuntime.jsx(XRegularIcon.XRegularIcon, {}),
1706
1836
  iconSize: size === "sm" ? "fill" : void 0,
1707
1837
  size: dismissDiameter,
1708
- variant: "outlined",
1838
+ variant: "ghost",
1709
1839
  "aria-label": dismissIconAriaLabel,
1710
1840
  onPress: onDismiss
1711
1841
  }
@@ -1945,6 +2075,7 @@ exports.useSafeAreaInsets = reactNativeSafeAreaContext.useSafeAreaInsets;
1945
2075
  exports.AccentScope = AccentScope;
1946
2076
  exports.AlouetteDecorator = AlouetteDecorator;
1947
2077
  exports.AlouetteProvider = AlouetteProvider;
2078
+ exports.Badge = Badge;
1948
2079
  exports.Box = Box;
1949
2080
  exports.BreakpointNameEnum = BreakpointNameEnum;
1950
2081
  exports.Breakpoints = Breakpoints;