@bitrise/bitkit-v2 0.3.475-beta.3009 → 0.3.475-beta.3014

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 (124) hide show
  1. package/dist/components/BitkitCalendar/BitkitCalendar.d.ts +12 -0
  2. package/dist/components/BitkitCalendar/BitkitCalendar.js +7 -1
  3. package/dist/components/BitkitCalendar/BitkitCalendar.js.map +1 -1
  4. package/dist/components/BitkitCalendar/components/CalendarContent.d.ts +5 -1
  5. package/dist/components/BitkitCalendar/components/CalendarContent.js +60 -43
  6. package/dist/components/BitkitCalendar/components/CalendarContent.js.map +1 -1
  7. package/dist/components/BitkitCalendar/components/CalendarMonth.d.ts +4 -2
  8. package/dist/components/BitkitCalendar/components/CalendarMonth.js +15 -5
  9. package/dist/components/BitkitCalendar/components/CalendarMonth.js.map +1 -1
  10. package/dist/components/BitkitCalendar/components/CalendarMonthSelect.d.ts +2 -1
  11. package/dist/components/BitkitCalendar/components/CalendarMonthSelect.js +3 -2
  12. package/dist/components/BitkitCalendar/components/CalendarMonthSelect.js.map +1 -1
  13. package/dist/components/BitkitCalendar/components/CalendarNextTrigger.d.ts +3 -1
  14. package/dist/components/BitkitCalendar/components/CalendarNextTrigger.js +3 -3
  15. package/dist/components/BitkitCalendar/components/CalendarNextTrigger.js.map +1 -1
  16. package/dist/components/BitkitCalendar/components/CalendarPrevTrigger.d.ts +3 -1
  17. package/dist/components/BitkitCalendar/components/CalendarPrevTrigger.js +3 -3
  18. package/dist/components/BitkitCalendar/components/CalendarPrevTrigger.js.map +1 -1
  19. package/dist/components/BitkitCalendar/components/CalendarSelect.d.ts +1 -0
  20. package/dist/components/BitkitCalendar/components/CalendarSelect.js +4 -2
  21. package/dist/components/BitkitCalendar/components/CalendarSelect.js.map +1 -1
  22. package/dist/components/BitkitCalendar/components/CalendarYearSelect.d.ts +2 -1
  23. package/dist/components/BitkitCalendar/components/CalendarYearSelect.js +3 -2
  24. package/dist/components/BitkitCalendar/components/CalendarYearSelect.js.map +1 -1
  25. package/dist/components/BitkitDatePicker/BitkitDatePicker.d.ts +2 -0
  26. package/dist/components/BitkitDatePicker/BitkitDatePicker.js +2 -1
  27. package/dist/components/BitkitDatePicker/BitkitDatePicker.js.map +1 -1
  28. package/dist/components/BitkitFilter/BitkitFilter.context.d.ts +65 -0
  29. package/dist/components/BitkitFilter/BitkitFilter.context.js +82 -0
  30. package/dist/components/BitkitFilter/BitkitFilter.context.js.map +1 -0
  31. package/dist/components/BitkitFilter/BitkitFilter.d.ts +55 -0
  32. package/dist/components/BitkitFilter/BitkitFilter.js +240 -0
  33. package/dist/components/BitkitFilter/BitkitFilter.js.map +1 -0
  34. package/dist/components/BitkitFilter/BitkitFilter.utils.d.ts +18 -0
  35. package/dist/components/BitkitFilter/BitkitFilter.utils.js +42 -0
  36. package/dist/components/BitkitFilter/BitkitFilter.utils.js.map +1 -0
  37. package/dist/components/BitkitFilter/BitkitFilterAdd.d.ts +18 -0
  38. package/dist/components/BitkitFilter/BitkitFilterAdd.js +188 -0
  39. package/dist/components/BitkitFilter/BitkitFilterAdd.js.map +1 -0
  40. package/dist/components/BitkitFilter/BitkitFilterDateRange.d.ts +26 -0
  41. package/dist/components/BitkitFilter/BitkitFilterDateRange.js +118 -0
  42. package/dist/components/BitkitFilter/BitkitFilterDateRange.js.map +1 -0
  43. package/dist/components/BitkitFilter/BitkitFilterSearch.d.ts +23 -0
  44. package/dist/components/BitkitFilter/BitkitFilterSearch.js +70 -0
  45. package/dist/components/BitkitFilter/BitkitFilterSearch.js.map +1 -0
  46. package/dist/components/BitkitFilter/BitkitFilterSelect.d.ts +61 -0
  47. package/dist/components/BitkitFilter/BitkitFilterSelect.js +140 -0
  48. package/dist/components/BitkitFilter/BitkitFilterSelect.js.map +1 -0
  49. package/dist/components/BitkitFilter/BitkitFilterSwitch.d.ts +28 -0
  50. package/dist/components/BitkitFilter/BitkitFilterSwitch.js +87 -0
  51. package/dist/components/BitkitFilter/BitkitFilterSwitch.js.map +1 -0
  52. package/dist/components/BitkitFilter/components/FilterChip.d.ts +23 -0
  53. package/dist/components/BitkitFilter/components/FilterChip.js +64 -0
  54. package/dist/components/BitkitFilter/components/FilterChip.js.map +1 -0
  55. package/dist/components/BitkitFilter/components/FilterField.d.ts +15 -0
  56. package/dist/components/BitkitFilter/components/FilterField.js +58 -0
  57. package/dist/components/BitkitFilter/components/FilterField.js.map +1 -0
  58. package/dist/components/BitkitFilter/components/FilterPanel.d.ts +42 -0
  59. package/dist/components/BitkitFilter/components/FilterPanel.js +126 -0
  60. package/dist/components/BitkitFilter/components/FilterPanel.js.map +1 -0
  61. package/dist/components/BitkitFilter/components/FilterSearchInput.d.ts +15 -0
  62. package/dist/components/BitkitFilter/components/FilterSearchInput.js +41 -0
  63. package/dist/components/BitkitFilter/components/FilterSearchInput.js.map +1 -0
  64. package/dist/components/BitkitFilter/components/FilterSelectForm.d.ts +41 -0
  65. package/dist/components/BitkitFilter/components/FilterSelectForm.js +307 -0
  66. package/dist/components/BitkitFilter/components/FilterSelectForm.js.map +1 -0
  67. package/dist/components/BitkitMarkdown/BitkitMarkdown.js +1 -1
  68. package/dist/components/BitkitNoteCard/BitkitNoteCard.js +1 -1
  69. package/dist/components/index.d.ts +6 -1
  70. package/dist/main.js +8 -9
  71. package/dist/theme/recipes/index.d.ts +525 -0
  72. package/dist/theme/recipes/index.js +1 -3
  73. package/dist/theme/recipes/index.js.map +1 -1
  74. package/dist/theme/slot-recipes/DatePicker.recipe.d.ts +15 -0
  75. package/dist/theme/slot-recipes/DatePicker.recipe.js +72 -22
  76. package/dist/theme/slot-recipes/DatePicker.recipe.js.map +1 -1
  77. package/dist/theme/slot-recipes/DatePickerSelect.recipe.d.ts +82 -0
  78. package/dist/theme/slot-recipes/DatePickerSelect.recipe.js +28 -10
  79. package/dist/theme/slot-recipes/DatePickerSelect.recipe.js.map +1 -1
  80. package/dist/theme/slot-recipes/Filter.recipe.d.ts +37 -0
  81. package/dist/theme/slot-recipes/Filter.recipe.js +636 -0
  82. package/dist/theme/slot-recipes/Filter.recipe.js.map +1 -0
  83. package/dist/theme/slot-recipes/Listbox.recipe.d.ts +22 -0
  84. package/dist/theme/slot-recipes/Listbox.recipe.js +92 -0
  85. package/dist/theme/slot-recipes/Listbox.recipe.js.map +1 -0
  86. package/dist/theme/slot-recipes/Menu.recipe.js +6 -1
  87. package/dist/theme/slot-recipes/Menu.recipe.js.map +1 -1
  88. package/dist/theme/slot-recipes/Tag.recipe.d.ts +1 -1
  89. package/dist/theme/slot-recipes/index.d.ts +155 -2
  90. package/dist/theme/slot-recipes/index.js +4 -2
  91. package/dist/theme/slot-recipes/index.js.map +1 -1
  92. package/dist/utilities/BitkitPortalContext.js +3 -2
  93. package/dist/utilities/BitkitPortalContext.js.map +1 -1
  94. package/docs/v1-to-v2-migration-guide.md +48 -1
  95. package/package.json +1 -1
  96. package/dist/components/BitkitUIHeader/BitkitUIHeader.d.ts +0 -37
  97. package/dist/components/BitkitUIHeader/BitkitUIHeader.js +0 -100
  98. package/dist/components/BitkitUIHeader/BitkitUIHeader.js.map +0 -1
  99. package/dist/components/BitkitUIHeader/BitriseLogo.d.ts +0 -10
  100. package/dist/components/BitkitUIHeader/BitriseLogo.js +0 -86
  101. package/dist/components/BitkitUIHeader/BitriseLogo.js.map +0 -1
  102. package/dist/components/BitkitUIHeader/UIHeaderAccount.d.ts +0 -19
  103. package/dist/components/BitkitUIHeader/UIHeaderAccount.js +0 -38
  104. package/dist/components/BitkitUIHeader/UIHeaderAccount.js.map +0 -1
  105. package/dist/components/BitkitUIHeader/UIHeaderButton.d.ts +0 -33
  106. package/dist/components/BitkitUIHeader/UIHeaderButton.js +0 -41
  107. package/dist/components/BitkitUIHeader/UIHeaderButton.js.map +0 -1
  108. package/dist/components/BitkitUIHeader/UIHeaderContext.d.ts +0 -12
  109. package/dist/components/BitkitUIHeader/UIHeaderContext.js +0 -11
  110. package/dist/components/BitkitUIHeader/UIHeaderContext.js.map +0 -1
  111. package/dist/components/BitkitUIHeader/UIHeaderControl.d.ts +0 -64
  112. package/dist/components/BitkitUIHeader/UIHeaderControl.js +0 -66
  113. package/dist/components/BitkitUIHeader/UIHeaderControl.js.map +0 -1
  114. package/dist/components/BitkitUIHeader/UIHeaderNavButton.d.ts +0 -20
  115. package/dist/components/BitkitUIHeader/UIHeaderNavButton.js +0 -47
  116. package/dist/components/BitkitUIHeader/UIHeaderNavButton.js.map +0 -1
  117. package/dist/components/BitkitUIHeader/UIHeaderSearch.d.ts +0 -32
  118. package/dist/components/BitkitUIHeader/UIHeaderSearch.js +0 -96
  119. package/dist/components/BitkitUIHeader/UIHeaderSearch.js.map +0 -1
  120. package/dist/theme/recipes/UIHeaderButton.recipe.js +0 -111
  121. package/dist/theme/recipes/UIHeaderButton.recipe.js.map +0 -1
  122. package/dist/theme/slot-recipes/UIHeader.recipe.d.ts +0 -11
  123. package/dist/theme/slot-recipes/UIHeader.recipe.js +0 -237
  124. package/dist/theme/slot-recipes/UIHeader.recipe.js.map +0 -1
@@ -0,0 +1,636 @@
1
+ import { rem } from "../themeUtils.js";
2
+ import { defineSlotRecipe } from "@chakra-ui/react/styled-system";
3
+ //#region lib/theme/slot-recipes/Filter.recipe.ts
4
+ var chipButton = {
5
+ alignItems: "center",
6
+ alignSelf: "stretch",
7
+ display: "flex",
8
+ _hover: {
9
+ background: "background/hover",
10
+ _active: { background: "background/active" }
11
+ },
12
+ _active: { background: "background/active" },
13
+ _disabled: {
14
+ cursor: "not-allowed",
15
+ "& :is(span, svg)": { color: "text/disabled" },
16
+ _hover: { background: "transparent" }
17
+ }
18
+ };
19
+ var wrapperFocusRing = {
20
+ outlineColor: "var(--focus-ring-color)",
21
+ outlineOffset: "var(--focus-ring-offset)",
22
+ outlineStyle: "var(--focus-ring-style)",
23
+ outlineWidth: "var(--focus-ring-width)"
24
+ };
25
+ var filterSlotRecipe = defineSlotRecipe({
26
+ className: "filter",
27
+ slots: [
28
+ "root",
29
+ "content",
30
+ "filters",
31
+ "icon",
32
+ "items",
33
+ "searchBlock",
34
+ "search",
35
+ "searchInput",
36
+ "switch",
37
+ "switchItem",
38
+ "switchItemText",
39
+ "chip",
40
+ "chipTrigger",
41
+ "chipLabel",
42
+ "chipValue",
43
+ "chipIcon",
44
+ "chipChevron",
45
+ "chipRemove",
46
+ "popoverContent",
47
+ "addMenu",
48
+ "addMenuItem",
49
+ "addMenuLabel",
50
+ "addMenuIcon",
51
+ "addSheetBackdrop",
52
+ "addSheetPositioner",
53
+ "addSheet",
54
+ "addSheetItem",
55
+ "addSheetItemReason",
56
+ "calendarFooter",
57
+ "popoverSearch",
58
+ "popoverBody",
59
+ "popoverFooter",
60
+ "popoverFooterStart",
61
+ "checkboxList",
62
+ "listHelperText",
63
+ "loading",
64
+ "pattern",
65
+ "patternResults",
66
+ "patternResultsLabel",
67
+ "mobileBar",
68
+ "mobileTrigger",
69
+ "mobileSearch",
70
+ "mobileSearchInput",
71
+ "mobileHeader",
72
+ "mobileTitle",
73
+ "mobilePanelHeader",
74
+ "mobilePanelOverline",
75
+ "mobilePanelTitle",
76
+ "mobileBody",
77
+ "mobileFooter",
78
+ "mobileListCheck",
79
+ "mobileListCheckbox",
80
+ "field",
81
+ "fieldLabel",
82
+ "fieldControl",
83
+ "fieldTrigger",
84
+ "fieldIcon",
85
+ "fieldValue",
86
+ "fieldChevron",
87
+ "fieldRemove"
88
+ ],
89
+ base: {
90
+ root: {
91
+ background: "background/primary",
92
+ display: "flex",
93
+ justifyContent: "center",
94
+ paddingBlock: "12",
95
+ paddingInline: "16"
96
+ },
97
+ content: {
98
+ alignItems: "flex-start",
99
+ display: "flex",
100
+ flex: "1",
101
+ gap: "16",
102
+ minWidth: 0
103
+ },
104
+ filters: {
105
+ alignItems: "flex-start",
106
+ display: "flex",
107
+ flex: "1",
108
+ gap: "12",
109
+ minWidth: 0,
110
+ paddingBlock: "4"
111
+ },
112
+ icon: {
113
+ color: "icon/tertiary",
114
+ display: "flex",
115
+ flexShrink: 0,
116
+ padding: "4"
117
+ },
118
+ items: {
119
+ alignItems: "center",
120
+ display: "flex",
121
+ flex: "1",
122
+ flexWrap: "wrap",
123
+ gap: "12",
124
+ minWidth: 0
125
+ },
126
+ searchBlock: {
127
+ alignSelf: "stretch",
128
+ borderColor: "border/minimal",
129
+ borderInlineStartWidth: "1",
130
+ display: "flex",
131
+ flexShrink: 0,
132
+ paddingInlineStart: "16"
133
+ },
134
+ search: {
135
+ alignItems: "center",
136
+ background: "background/primary",
137
+ borderRadius: "4",
138
+ color: "icon/tertiary",
139
+ display: "flex",
140
+ gap: "8",
141
+ height: "40",
142
+ paddingInline: "8",
143
+ width: rem(148),
144
+ _hover: { background: "background/secondary" },
145
+ "&:has(input:focus-visible)": wrapperFocusRing
146
+ },
147
+ searchInput: {
148
+ background: "transparent",
149
+ color: "input/text/inputValue",
150
+ flex: "1",
151
+ minWidth: 0,
152
+ outline: "none",
153
+ textStyle: "body/md/regular",
154
+ _placeholder: { color: "input/text/placeholder" },
155
+ "&::-webkit-search-cancel-button": { appearance: "none" }
156
+ },
157
+ switch: {
158
+ background: "background/secondary",
159
+ borderRadius: "4",
160
+ display: "inline-flex",
161
+ flexShrink: 0,
162
+ position: "relative"
163
+ },
164
+ switchItem: {
165
+ alignItems: "center",
166
+ borderRadius: "4",
167
+ color: "text/secondary",
168
+ cursor: "pointer",
169
+ display: "flex",
170
+ gap: "4",
171
+ height: "32",
172
+ paddingInline: "8",
173
+ position: "relative",
174
+ textStyle: "body/md/regular",
175
+ whiteSpace: "nowrap",
176
+ "& svg:not([data-own-color])": { color: "icon/tertiary" },
177
+ _after: {
178
+ background: "border/regular",
179
+ content: "\"\"",
180
+ height: "16",
181
+ insetInlineEnd: 0,
182
+ position: "absolute",
183
+ top: "8",
184
+ width: "1"
185
+ },
186
+ "&:last-of-type, &[data-state=checked], &:hover, &:has(+ [data-state=checked]), &:has(+ :hover)": { _after: { display: "none" } },
187
+ "&:has(input:focus-visible)": wrapperFocusRing,
188
+ _hover: {
189
+ background: "background/hover",
190
+ color: "text/primary",
191
+ "& svg:not([data-own-color])": { color: "icon/secondary" },
192
+ _active: { background: "background/active" }
193
+ },
194
+ _active: {
195
+ background: "background/active",
196
+ color: "text/primary"
197
+ },
198
+ _checked: {
199
+ background: "background/primary",
200
+ boxShadow: "inset 0 0 0 1px var(--colors-border\\/strong)",
201
+ color: "text/primary",
202
+ "& svg:not([data-own-color])": { color: "icon/secondary" },
203
+ _hover: { background: "background/primary" }
204
+ },
205
+ "&:is([data-disabled], [data-readonly])": {
206
+ color: "text/disabled",
207
+ cursor: "not-allowed",
208
+ "& svg": { color: "icon/disabled" },
209
+ _hover: {
210
+ background: "transparent",
211
+ color: "text/disabled"
212
+ },
213
+ _checked: { _hover: { background: "background/primary" } }
214
+ }
215
+ },
216
+ switchItemText: { paddingInline: "4" },
217
+ chip: {
218
+ alignItems: "center",
219
+ background: "background/primary",
220
+ borderColor: "border/strong",
221
+ borderRadius: "4",
222
+ borderWidth: "1",
223
+ display: "inline-flex",
224
+ height: "32",
225
+ maxWidth: rem(320),
226
+ minWidth: 0,
227
+ overflow: "hidden",
228
+ textStyle: "body/md/regular",
229
+ "&:has(button:is(:disabled, [aria-disabled=true]))": { borderColor: "border/disabled" },
230
+ "&:has([aria-expanded=true])": {
231
+ boxShadow: "0 0 0 0.125rem var(--focus-ring-color)",
232
+ "& button, & button:hover": { background: "background/primary" }
233
+ },
234
+ "& [data-scope=date-picker]:is([data-part=root], [data-part=control])": {
235
+ alignSelf: "stretch",
236
+ flex: "1",
237
+ minWidth: 0
238
+ }
239
+ },
240
+ chipTrigger: {
241
+ ...chipButton,
242
+ flex: "1",
243
+ gap: "4",
244
+ minWidth: 0,
245
+ paddingInlineEnd: "8",
246
+ paddingInlineStart: "12",
247
+ whiteSpace: "nowrap",
248
+ "&:has([data-chip-icon])": { paddingInlineStart: "8" },
249
+ "&:is(:hover, :active) [data-chip-icon]": { color: "icon/secondary" }
250
+ },
251
+ chipLabel: {
252
+ color: "text/secondary",
253
+ flexShrink: 0
254
+ },
255
+ chipValue: {
256
+ color: "text/body",
257
+ minWidth: 0,
258
+ truncate: true
259
+ },
260
+ chipIcon: {
261
+ color: "icon/tertiary",
262
+ flexShrink: 0,
263
+ marginInlineEnd: "4"
264
+ },
265
+ chipChevron: {
266
+ color: "icon/primary",
267
+ flexShrink: 0,
268
+ marginInlineStart: "8"
269
+ },
270
+ chipRemove: {
271
+ ...chipButton,
272
+ color: "icon/primary",
273
+ flexShrink: 0,
274
+ paddingInlineEnd: "8",
275
+ paddingInlineStart: "4"
276
+ },
277
+ popoverContent: { width: rem(480) },
278
+ addMenu: {
279
+ background: "background/primary",
280
+ borderRadius: "8",
281
+ boxShadow: "elevation/lg",
282
+ display: "flex",
283
+ flexDirection: "column",
284
+ maxHeight: "var(--available-height)",
285
+ outline: "none",
286
+ overflowY: "auto",
287
+ paddingBlock: "8",
288
+ width: rem(240),
289
+ zIndex: "popover"
290
+ },
291
+ addMenuItem: {
292
+ alignItems: "center",
293
+ color: "text/body",
294
+ cursor: "pointer",
295
+ display: "flex",
296
+ gap: "4",
297
+ minHeight: "40",
298
+ paddingBlock: "8",
299
+ paddingInline: "16",
300
+ textStyle: "body/md/regular",
301
+ userSelect: "none",
302
+ _highlighted: {
303
+ background: "background/hover",
304
+ _active: { background: "background/active" }
305
+ },
306
+ _active: { background: "background/active" },
307
+ _disabled: {
308
+ color: "text/disabled",
309
+ cursor: "not-allowed",
310
+ _highlighted: { background: "transparent" },
311
+ "&[data-not-applicable]": {
312
+ color: "text/tertiary",
313
+ _highlighted: { background: "background/hover" }
314
+ }
315
+ },
316
+ "&:not([data-highlighted]) [data-add-chevron]": { visibility: "hidden" }
317
+ },
318
+ addMenuLabel: {
319
+ color: "text/tertiary",
320
+ paddingBlock: "8",
321
+ paddingInline: "16",
322
+ textStyle: "heading/h6"
323
+ },
324
+ addMenuIcon: {
325
+ color: "icon/tertiary",
326
+ flexShrink: 0,
327
+ marginInlineStart: "auto"
328
+ },
329
+ addSheetBackdrop: {
330
+ background: "utilities/overlay-light",
331
+ inset: 0,
332
+ position: "fixed",
333
+ zIndex: "calc({zIndex.dialogOverlay} + var(--layer-index, 0))"
334
+ },
335
+ addSheetPositioner: {
336
+ alignItems: "flex-end",
337
+ display: "flex",
338
+ inset: 0,
339
+ justifyContent: "stretch",
340
+ padding: "16",
341
+ position: "fixed",
342
+ zIndex: "calc({zIndex.dialog} + var(--layer-index, 0))"
343
+ },
344
+ addSheet: {
345
+ background: "background/primary",
346
+ borderRadius: "8",
347
+ boxShadow: "elevation/lg",
348
+ display: "flex",
349
+ flex: "1",
350
+ flexDirection: "column",
351
+ maxHeight: "80dvh",
352
+ outline: "none",
353
+ overflowY: "auto",
354
+ paddingBlock: "8"
355
+ },
356
+ addSheetItem: {
357
+ ...chipButton,
358
+ alignSelf: "auto",
359
+ color: "text/body",
360
+ gap: "12",
361
+ minHeight: "48",
362
+ paddingBlock: "8",
363
+ paddingInline: "16",
364
+ textAlign: "start",
365
+ textStyle: "body/lg/regular",
366
+ _disabled: {
367
+ color: "text/disabled",
368
+ cursor: "not-allowed",
369
+ _hover: { background: "transparent" },
370
+ "&[data-not-applicable]": {
371
+ color: "text/tertiary",
372
+ "& :is(span, svg)": { color: "text/tertiary" }
373
+ }
374
+ }
375
+ },
376
+ addSheetItemReason: {
377
+ color: "text/tertiary",
378
+ textStyle: "body/sm/regular"
379
+ },
380
+ calendarFooter: {
381
+ alignItems: "center",
382
+ display: "flex",
383
+ gap: "8",
384
+ marginBlockStart: "24"
385
+ },
386
+ popoverSearch: {
387
+ flexShrink: 0,
388
+ paddingBlockEnd: "8",
389
+ paddingBlockStart: "8",
390
+ paddingInline: "12"
391
+ },
392
+ popoverBody: {
393
+ display: "flex",
394
+ flexDirection: "column",
395
+ minHeight: 0,
396
+ "& > *, & [data-scope=listbox]:is([data-part=root], [data-part=content])": { minHeight: 0 },
397
+ "& [data-scope=listbox][data-part=root]": {
398
+ display: "flex",
399
+ flexDirection: "column"
400
+ }
401
+ },
402
+ popoverFooter: {
403
+ alignItems: "center",
404
+ display: "flex",
405
+ gap: "8",
406
+ paddingBlockEnd: "16",
407
+ paddingBlockStart: "24",
408
+ paddingInlineEnd: "24",
409
+ paddingInlineStart: "16"
410
+ },
411
+ popoverFooterStart: { flex: "1" },
412
+ checkboxList: {
413
+ maxHeight: rem(200),
414
+ overflowY: "auto",
415
+ paddingBlockEnd: "16",
416
+ paddingBlockStart: "8",
417
+ paddingInline: "20"
418
+ },
419
+ listHelperText: {
420
+ color: "text/secondary",
421
+ textStyle: "body/sm/regular"
422
+ },
423
+ loading: {
424
+ paddingBlock: "8",
425
+ paddingInline: "16"
426
+ },
427
+ pattern: {
428
+ display: "flex",
429
+ flexDirection: "column",
430
+ gap: "24",
431
+ paddingBlockStart: "8",
432
+ paddingInline: "16"
433
+ },
434
+ patternResults: {
435
+ display: "flex",
436
+ flexDirection: "column",
437
+ gap: "8",
438
+ maxHeight: rem(176),
439
+ minHeight: 0,
440
+ overflowY: "auto"
441
+ },
442
+ patternResultsLabel: {
443
+ color: "text/primary",
444
+ textStyle: "comp/input/label"
445
+ },
446
+ mobileBar: {
447
+ alignItems: "center",
448
+ borderBlockEndWidth: "1",
449
+ borderColor: "border/minimal",
450
+ display: "flex",
451
+ gap: "12",
452
+ justifyContent: "space-between",
453
+ padding: "16"
454
+ },
455
+ mobileTrigger: {
456
+ ...chipButton,
457
+ alignSelf: "auto",
458
+ background: "background/primary",
459
+ borderColor: "border/strong",
460
+ borderRadius: "4",
461
+ borderWidth: "1",
462
+ color: "text/primary",
463
+ gap: "8",
464
+ height: "32",
465
+ paddingInline: "8",
466
+ textStyle: "comp/button/sm",
467
+ _icon: { color: "icon/primary" },
468
+ _disabled: {
469
+ borderColor: "border/disabled",
470
+ color: "text/disabled",
471
+ _icon: { color: "icon/disabled" }
472
+ }
473
+ },
474
+ mobileSearch: {
475
+ alignItems: "center",
476
+ borderBlockEndWidth: "1",
477
+ borderColor: "border/minimal",
478
+ color: "icon/tertiary",
479
+ display: "flex",
480
+ gap: "12",
481
+ height: rem(56),
482
+ paddingInline: "16",
483
+ "&:has(input:focus-visible)": {
484
+ ...wrapperFocusRing,
485
+ outlineOffset: "calc(var(--focus-ring-width) * -1)"
486
+ }
487
+ },
488
+ mobileSearchInput: {
489
+ background: "transparent",
490
+ color: "input/text/inputValue",
491
+ flex: "1",
492
+ minWidth: 0,
493
+ outline: "none",
494
+ textStyle: "body/lg/regular",
495
+ _placeholder: { color: "input/text/placeholder" },
496
+ "&::-webkit-search-cancel-button": { appearance: "none" }
497
+ },
498
+ mobileHeader: {
499
+ alignItems: "center",
500
+ borderBlockEndWidth: "1",
501
+ borderColor: "border/minimal",
502
+ display: "flex",
503
+ flexShrink: 0,
504
+ gap: "12",
505
+ paddingBlock: "16",
506
+ paddingInline: {
507
+ base: "16",
508
+ tablet: "24"
509
+ }
510
+ },
511
+ mobileTitle: {
512
+ color: "text/primary",
513
+ flex: "1",
514
+ textStyle: "heading/mobile/h2"
515
+ },
516
+ mobilePanelHeader: {
517
+ alignItems: "center",
518
+ borderBlockEndWidth: "1",
519
+ borderColor: "border/minimal",
520
+ display: "flex",
521
+ flexShrink: 0,
522
+ gap: "12",
523
+ paddingBlock: "12",
524
+ paddingInline: {
525
+ base: "16",
526
+ tablet: "24"
527
+ }
528
+ },
529
+ mobilePanelOverline: {
530
+ color: "text/tertiary",
531
+ textStyle: "heading/h6"
532
+ },
533
+ mobilePanelTitle: {
534
+ color: "text/primary",
535
+ textStyle: "heading/mobile/h3"
536
+ },
537
+ mobileBody: {
538
+ display: "flex",
539
+ flexDirection: "column",
540
+ gap: "16"
541
+ },
542
+ mobileFooter: {
543
+ display: "flex",
544
+ gap: "12",
545
+ "& > *": { flex: "1" }
546
+ },
547
+ mobileListCheck: {
548
+ color: "icon/interactive",
549
+ display: "flex",
550
+ flexShrink: 0,
551
+ "&[data-state=unchecked]": { visibility: "hidden" }
552
+ },
553
+ mobileListCheckbox: { flexShrink: 0 },
554
+ field: {
555
+ display: "flex",
556
+ flexDirection: "column",
557
+ gap: "8"
558
+ },
559
+ fieldLabel: {
560
+ color: "text/primary",
561
+ textStyle: "comp/input/label"
562
+ },
563
+ fieldControl: {
564
+ background: "background/primary",
565
+ borderColor: "border/strong",
566
+ borderRadius: "4",
567
+ borderWidth: "1",
568
+ display: "flex",
569
+ height: "48",
570
+ overflow: "hidden",
571
+ "&:has(button:is(:disabled, [aria-disabled=true]))": { borderColor: "border/disabled" }
572
+ },
573
+ fieldTrigger: {
574
+ ...chipButton,
575
+ flex: "1",
576
+ gap: "8",
577
+ minWidth: 0,
578
+ paddingInline: "16",
579
+ textAlign: "start",
580
+ textStyle: "body/lg/regular"
581
+ },
582
+ fieldIcon: {
583
+ color: "icon/secondary",
584
+ flexShrink: 0
585
+ },
586
+ fieldValue: {
587
+ color: "text/body",
588
+ flex: "1",
589
+ minWidth: 0,
590
+ truncate: true
591
+ },
592
+ fieldChevron: {
593
+ color: "icon/primary",
594
+ flexShrink: 0
595
+ },
596
+ fieldRemove: {
597
+ ...chipButton,
598
+ color: "icon/primary",
599
+ flexShrink: 0,
600
+ justifyContent: "center",
601
+ width: "48"
602
+ }
603
+ },
604
+ variants: {
605
+ pageLayout: {
606
+ capped: { root: {
607
+ borderBlockEndWidth: "1",
608
+ borderColor: "border/regular",
609
+ paddingInline: {
610
+ base: "16",
611
+ tablet: "32"
612
+ }
613
+ } },
614
+ full: { root: {
615
+ borderBlockEndWidth: "1",
616
+ borderColor: "border/regular",
617
+ paddingInlineEnd: {
618
+ base: "16",
619
+ tablet: "32"
620
+ },
621
+ paddingInlineStart: {
622
+ base: "16",
623
+ tablet: "24"
624
+ }
625
+ } }
626
+ },
627
+ contentAlign: {
628
+ center: {},
629
+ start: { root: { justifyContent: "flex-start" } }
630
+ }
631
+ }
632
+ });
633
+ //#endregion
634
+ export { filterSlotRecipe as default };
635
+
636
+ //# sourceMappingURL=Filter.recipe.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"Filter.recipe.js","names":[],"sources":["../../../lib/theme/slot-recipes/Filter.recipe.ts"],"sourcesContent":["import { defineSlotRecipe, type SystemStyleObject } from '@chakra-ui/react/styled-system';\n\nimport { rem } from '../themeUtils';\n\nconst chipButton: SystemStyleObject = {\n alignItems: 'center',\n alignSelf: 'stretch',\n display: 'flex',\n _hover: {\n background: 'background/hover',\n _active: {\n background: 'background/active',\n },\n },\n _active: {\n background: 'background/active',\n },\n _disabled: {\n cursor: 'not-allowed',\n '& :is(span, svg)': {\n color: 'text/disabled',\n },\n _hover: {\n background: 'transparent',\n },\n },\n};\n\n// The keyboard focus ring for a wrapper whose input has no outline of its own. Chakra's `focusRing`\n// only fires on the focused element itself, so the global ring variables are applied directly.\nconst wrapperFocusRing: SystemStyleObject = {\n outlineColor: 'var(--focus-ring-color)',\n outlineOffset: 'var(--focus-ring-offset)',\n outlineStyle: 'var(--focus-ring-style)',\n outlineWidth: 'var(--focus-ring-width)',\n};\n\nconst filterSlotRecipe = defineSlotRecipe({\n className: 'filter',\n slots: [\n 'root',\n 'content',\n 'filters',\n 'icon',\n 'items',\n 'searchBlock',\n 'search',\n 'searchInput',\n 'switch',\n 'switchItem',\n 'switchItemText',\n 'chip',\n 'chipTrigger',\n 'chipLabel',\n 'chipValue',\n 'chipIcon',\n 'chipChevron',\n 'chipRemove',\n 'popoverContent',\n 'addMenu',\n 'addMenuItem',\n 'addMenuLabel',\n 'addMenuIcon',\n 'addSheetBackdrop',\n 'addSheetPositioner',\n 'addSheet',\n 'addSheetItem',\n 'addSheetItemReason',\n 'calendarFooter',\n 'popoverSearch',\n 'popoverBody',\n 'popoverFooter',\n 'popoverFooterStart',\n 'checkboxList',\n 'listHelperText',\n 'loading',\n 'pattern',\n 'patternResults',\n 'patternResultsLabel',\n 'mobileBar',\n 'mobileTrigger',\n 'mobileSearch',\n 'mobileSearchInput',\n 'mobileHeader',\n 'mobileTitle',\n 'mobilePanelHeader',\n 'mobilePanelOverline',\n 'mobilePanelTitle',\n 'mobileBody',\n 'mobileFooter',\n 'mobileListCheck',\n 'mobileListCheckbox',\n 'field',\n 'fieldLabel',\n 'fieldControl',\n 'fieldTrigger',\n 'fieldIcon',\n 'fieldValue',\n 'fieldChevron',\n 'fieldRemove',\n ],\n base: {\n root: {\n background: 'background/primary',\n display: 'flex',\n justifyContent: 'center',\n paddingBlock: '12',\n paddingInline: '16',\n },\n content: {\n alignItems: 'flex-start',\n display: 'flex',\n flex: '1',\n gap: '16',\n minWidth: 0,\n },\n filters: {\n alignItems: 'flex-start',\n display: 'flex',\n flex: '1',\n gap: '12',\n minWidth: 0,\n paddingBlock: '4',\n },\n icon: {\n color: 'icon/tertiary',\n // Flex, so the inline svg's line box adds no extra height.\n display: 'flex',\n flexShrink: 0,\n padding: '4',\n },\n items: {\n alignItems: 'center',\n display: 'flex',\n flex: '1',\n flexWrap: 'wrap',\n gap: '12',\n minWidth: 0,\n },\n searchBlock: {\n alignSelf: 'stretch',\n borderColor: 'border/minimal',\n borderInlineStartWidth: '1',\n display: 'flex',\n flexShrink: 0,\n paddingInlineStart: '16',\n },\n search: {\n alignItems: 'center',\n background: 'background/primary',\n borderRadius: '4',\n color: 'icon/tertiary',\n display: 'flex',\n gap: '8',\n height: '40',\n paddingInline: '8',\n width: rem(148),\n _hover: {\n background: 'background/secondary',\n },\n '&:has(input:focus-visible)': wrapperFocusRing,\n },\n searchInput: {\n background: 'transparent',\n color: 'input/text/inputValue',\n flex: '1',\n minWidth: 0,\n outline: 'none',\n textStyle: 'body/md/regular',\n _placeholder: {\n color: 'input/text/placeholder',\n },\n // The clear button replaces the native cancel glyph of `type=\"search\"`.\n '&::-webkit-search-cancel-button': {\n appearance: 'none',\n },\n },\n switch: {\n background: 'background/secondary',\n borderRadius: '4',\n display: 'inline-flex',\n flexShrink: 0,\n position: 'relative',\n },\n switchItem: {\n alignItems: 'center',\n borderRadius: '4',\n color: 'text/secondary',\n cursor: 'pointer',\n display: 'flex',\n gap: '4',\n height: '32',\n paddingInline: '8',\n position: 'relative',\n textStyle: 'body/md/regular',\n whiteSpace: 'nowrap',\n // An item's own `iconColor` is left alone, except when disabled.\n '& svg:not([data-own-color])': {\n color: 'icon/tertiary',\n },\n // Divider after an unselected item, hidden next to the selected or hovered one.\n _after: {\n background: 'border/regular',\n content: '\"\"',\n height: '16',\n insetInlineEnd: 0,\n position: 'absolute',\n top: '8',\n width: '1',\n },\n '&:last-of-type, &[data-state=checked], &:hover, &:has(+ [data-state=checked]), &:has(+ :hover)': {\n _after: {\n display: 'none',\n },\n },\n '&:has(input:focus-visible)': wrapperFocusRing,\n _hover: {\n background: 'background/hover',\n color: 'text/primary',\n '& svg:not([data-own-color])': {\n color: 'icon/secondary',\n },\n _active: {\n background: 'background/active',\n },\n },\n _active: {\n background: 'background/active',\n color: 'text/primary',\n },\n _checked: {\n background: 'background/primary',\n // Inset, so the selected item is no taller than the others.\n boxShadow: 'inset 0 0 0 1px var(--colors-border\\\\/strong)',\n color: 'text/primary',\n '& svg:not([data-own-color])': {\n color: 'icon/secondary',\n },\n _hover: {\n background: 'background/primary',\n },\n },\n // Read-only while the page loads, so the selected item keeps a focus handed to it; it looks disabled.\n '&:is([data-disabled], [data-readonly])': {\n color: 'text/disabled',\n cursor: 'not-allowed',\n '& svg': {\n color: 'icon/disabled',\n },\n _hover: {\n background: 'transparent',\n color: 'text/disabled',\n },\n _checked: {\n _hover: {\n background: 'background/primary',\n },\n },\n },\n },\n switchItemText: {\n paddingInline: '4',\n },\n chip: {\n alignItems: 'center',\n background: 'background/primary',\n borderColor: 'border/strong',\n borderRadius: '4',\n borderWidth: '1',\n display: 'inline-flex',\n height: '32',\n maxWidth: rem(320),\n minWidth: 0,\n overflow: 'hidden',\n textStyle: 'body/md/regular',\n '&:has(button:is(:disabled, [aria-disabled=true]))': {\n borderColor: 'border/disabled',\n },\n // The chip's popover is open: Zag marks the trigger inside it as expanded.\n '&:has([aria-expanded=true])': {\n boxShadow: '0 0 0 0.125rem var(--focus-ring-color)',\n // Figma's selected chip stays white, even under the pointer that just opened it.\n '& button, & button:hover': {\n background: 'background/primary',\n },\n },\n // The date chip's trigger sits inside the calendar's root and control divs; they stretch like a direct child would.\n '& [data-scope=date-picker]:is([data-part=root], [data-part=control])': {\n alignSelf: 'stretch',\n flex: '1',\n minWidth: 0,\n },\n },\n chipTrigger: {\n ...chipButton,\n flex: '1',\n gap: '4',\n minWidth: 0,\n paddingInlineEnd: '8',\n paddingInlineStart: '12',\n whiteSpace: 'nowrap',\n '&:has([data-chip-icon])': {\n paddingInlineStart: '8',\n },\n '&:is(:hover, :active) [data-chip-icon]': {\n color: 'icon/secondary',\n },\n },\n chipLabel: {\n color: 'text/secondary',\n flexShrink: 0,\n },\n chipValue: {\n color: 'text/body',\n minWidth: 0,\n truncate: true,\n },\n chipIcon: {\n color: 'icon/tertiary',\n flexShrink: 0,\n marginInlineEnd: '4',\n },\n chipChevron: {\n color: 'icon/primary',\n flexShrink: 0,\n marginInlineStart: '8',\n },\n chipRemove: {\n ...chipButton,\n color: 'icon/primary',\n flexShrink: 0,\n paddingInlineEnd: '8',\n paddingInlineStart: '4',\n },\n popoverContent: {\n width: rem(480),\n },\n addMenu: {\n background: 'background/primary',\n borderRadius: '8',\n boxShadow: 'elevation/lg',\n display: 'flex',\n flexDirection: 'column',\n maxHeight: 'var(--available-height)',\n outline: 'none',\n overflowY: 'auto',\n paddingBlock: '8',\n width: rem(240),\n zIndex: 'popover',\n },\n addMenuItem: {\n alignItems: 'center',\n color: 'text/body',\n cursor: 'pointer',\n display: 'flex',\n gap: '4',\n minHeight: '40',\n paddingBlock: '8',\n paddingInline: '16',\n textStyle: 'body/md/regular',\n userSelect: 'none',\n _highlighted: {\n background: 'background/hover',\n _active: {\n background: 'background/active',\n },\n },\n _active: {\n background: 'background/active',\n },\n _disabled: {\n color: 'text/disabled',\n cursor: 'not-allowed',\n _highlighted: {\n background: 'transparent',\n },\n // Not applicable yet: `aria-disabled` but reachable, so the keyboard highlight still shows.\n '&[data-not-applicable]': {\n color: 'text/tertiary',\n _highlighted: {\n background: 'background/hover',\n },\n },\n },\n // The chevron only shows on the row under the pointer or keyboard.\n '&:not([data-highlighted]) [data-add-chevron]': {\n visibility: 'hidden',\n },\n },\n addMenuLabel: {\n color: 'text/tertiary',\n paddingBlock: '8',\n paddingInline: '16',\n textStyle: 'heading/h6',\n },\n addMenuIcon: {\n color: 'icon/tertiary',\n flexShrink: 0,\n marginInlineStart: 'auto',\n },\n addSheetBackdrop: {\n background: 'utilities/overlay-light',\n inset: 0,\n position: 'fixed',\n zIndex: 'calc({zIndex.dialogOverlay} + var(--layer-index, 0))',\n },\n addSheetPositioner: {\n alignItems: 'flex-end',\n display: 'flex',\n inset: 0,\n justifyContent: 'stretch',\n padding: '16',\n position: 'fixed',\n zIndex: 'calc({zIndex.dialog} + var(--layer-index, 0))',\n },\n addSheet: {\n background: 'background/primary',\n borderRadius: '8',\n boxShadow: 'elevation/lg',\n display: 'flex',\n flex: '1',\n flexDirection: 'column',\n maxHeight: '80dvh',\n outline: 'none',\n overflowY: 'auto',\n paddingBlock: '8',\n },\n addSheetItem: {\n ...chipButton,\n alignSelf: 'auto',\n color: 'text/body',\n gap: '12',\n minHeight: '48',\n paddingBlock: '8',\n paddingInline: '16',\n textAlign: 'start',\n textStyle: 'body/lg/regular',\n _disabled: {\n color: 'text/disabled',\n cursor: 'not-allowed',\n _hover: {\n background: 'transparent',\n },\n '&[data-not-applicable]': {\n color: 'text/tertiary',\n '& :is(span, svg)': {\n color: 'text/tertiary',\n },\n },\n },\n },\n addSheetItemReason: {\n color: 'text/tertiary',\n textStyle: 'body/sm/regular',\n },\n calendarFooter: {\n alignItems: 'center',\n display: 'flex',\n gap: '8',\n marginBlockStart: '24',\n },\n popoverSearch: {\n flexShrink: 0,\n paddingBlockEnd: '8',\n paddingBlockStart: '8',\n paddingInline: '12',\n },\n // When the popover is capped by the space available, the list (or pattern results) gives way and\n // scrolls on its own, rather than running under the footer: every part may shrink below its content.\n popoverBody: {\n display: 'flex',\n flexDirection: 'column',\n minHeight: 0,\n '& > *, & [data-scope=listbox]:is([data-part=root], [data-part=content])': {\n minHeight: 0,\n },\n '& [data-scope=listbox][data-part=root]': {\n display: 'flex',\n flexDirection: 'column',\n },\n },\n popoverFooter: {\n alignItems: 'center',\n display: 'flex',\n gap: '8',\n paddingBlockEnd: '16',\n paddingBlockStart: '24',\n paddingInlineEnd: '24',\n paddingInlineStart: '16',\n },\n popoverFooterStart: {\n flex: '1',\n },\n checkboxList: {\n maxHeight: rem(200),\n overflowY: 'auto',\n paddingBlockEnd: '16',\n paddingBlockStart: '8',\n paddingInline: '20',\n },\n listHelperText: {\n color: 'text/secondary',\n textStyle: 'body/sm/regular',\n },\n loading: {\n paddingBlock: '8',\n paddingInline: '16',\n },\n pattern: {\n display: 'flex',\n flexDirection: 'column',\n gap: '24',\n paddingBlockStart: '8',\n paddingInline: '16',\n },\n patternResults: {\n display: 'flex',\n flexDirection: 'column',\n gap: '8',\n maxHeight: rem(176),\n minHeight: 0,\n overflowY: 'auto',\n },\n patternResultsLabel: {\n color: 'text/primary',\n textStyle: 'comp/input/label',\n },\n mobileBar: {\n alignItems: 'center',\n borderBlockEndWidth: '1',\n borderColor: 'border/minimal',\n display: 'flex',\n gap: '12',\n justifyContent: 'space-between',\n padding: '16',\n },\n mobileTrigger: {\n ...chipButton,\n alignSelf: 'auto',\n background: 'background/primary',\n borderColor: 'border/strong',\n borderRadius: '4',\n borderWidth: '1',\n color: 'text/primary',\n gap: '8',\n height: '32',\n paddingInline: '8',\n textStyle: 'comp/button/sm',\n _icon: {\n color: 'icon/primary',\n },\n _disabled: {\n borderColor: 'border/disabled',\n color: 'text/disabled',\n _icon: {\n color: 'icon/disabled',\n },\n },\n },\n mobileSearch: {\n alignItems: 'center',\n borderBlockEndWidth: '1',\n borderColor: 'border/minimal',\n color: 'icon/tertiary',\n display: 'flex',\n gap: '12',\n height: rem(56),\n paddingInline: '16',\n // Drawn inside, since the row runs edge to edge.\n '&:has(input:focus-visible)': {\n ...wrapperFocusRing,\n outlineOffset: 'calc(var(--focus-ring-width) * -1)',\n },\n },\n mobileSearchInput: {\n background: 'transparent',\n color: 'input/text/inputValue',\n flex: '1',\n minWidth: 0,\n outline: 'none',\n textStyle: 'body/lg/regular',\n _placeholder: {\n color: 'input/text/placeholder',\n },\n '&::-webkit-search-cancel-button': {\n appearance: 'none',\n },\n },\n mobileHeader: {\n alignItems: 'center',\n borderBlockEndWidth: '1',\n borderColor: 'border/minimal',\n display: 'flex',\n flexShrink: 0,\n gap: '12',\n // Matches the docked drawer's body and footer inset.\n paddingBlock: '16',\n paddingInline: { base: '16', tablet: '24' },\n },\n mobileTitle: {\n color: 'text/primary',\n flex: '1',\n textStyle: 'heading/mobile/h2',\n },\n mobilePanelHeader: {\n alignItems: 'center',\n borderBlockEndWidth: '1',\n borderColor: 'border/minimal',\n display: 'flex',\n flexShrink: 0,\n gap: '12',\n paddingBlock: '12',\n // Matches the docked drawer's footer inset.\n paddingInline: { base: '16', tablet: '24' },\n },\n mobilePanelOverline: {\n color: 'text/tertiary',\n textStyle: 'heading/h6',\n },\n mobilePanelTitle: {\n color: 'text/primary',\n textStyle: 'heading/mobile/h3',\n },\n // The docked drawer pads the body and footer itself.\n mobileBody: {\n display: 'flex',\n flexDirection: 'column',\n gap: '16',\n },\n mobileFooter: {\n display: 'flex',\n gap: '12',\n '& > *': {\n flex: '1',\n },\n },\n // Drawn in front of the label on mobile, with its column kept on unselected rows so the labels line up.\n mobileListCheck: {\n color: 'icon/interactive',\n display: 'flex',\n flexShrink: 0,\n '&[data-state=unchecked]': {\n visibility: 'hidden',\n },\n },\n mobileListCheckbox: {\n flexShrink: 0,\n },\n field: {\n display: 'flex',\n flexDirection: 'column',\n gap: '8',\n },\n fieldLabel: {\n color: 'text/primary',\n textStyle: 'comp/input/label',\n },\n fieldControl: {\n background: 'background/primary',\n borderColor: 'border/strong',\n borderRadius: '4',\n borderWidth: '1',\n display: 'flex',\n height: '48',\n overflow: 'hidden',\n '&:has(button:is(:disabled, [aria-disabled=true]))': {\n borderColor: 'border/disabled',\n },\n },\n fieldTrigger: {\n ...chipButton,\n flex: '1',\n gap: '8',\n minWidth: 0,\n paddingInline: '16',\n textAlign: 'start',\n textStyle: 'body/lg/regular',\n },\n fieldIcon: {\n color: 'icon/secondary',\n flexShrink: 0,\n },\n fieldValue: {\n color: 'text/body',\n flex: '1',\n minWidth: 0,\n truncate: true,\n },\n fieldChevron: {\n color: 'icon/primary',\n flexShrink: 0,\n },\n fieldRemove: {\n ...chipButton,\n color: 'icon/primary',\n flexShrink: 0,\n justifyContent: 'center',\n width: '48',\n },\n },\n variants: {\n // Under a page header: a bottom border and the page's inline padding. `capped` is the centred\n // column, `full` the full-width one, which starts at 24 like the default `BitkitPageHeader`.\n pageLayout: {\n capped: {\n root: {\n borderBlockEndWidth: '1',\n borderColor: 'border/regular',\n paddingInline: { base: '16', tablet: '32' },\n },\n },\n full: {\n root: {\n borderBlockEndWidth: '1',\n borderColor: 'border/regular',\n paddingInlineEnd: { base: '16', tablet: '32' },\n paddingInlineStart: { base: '16', tablet: '24' },\n },\n },\n },\n contentAlign: {\n center: {},\n start: {\n root: {\n justifyContent: 'flex-start',\n },\n },\n },\n },\n});\n\nexport default filterSlotRecipe;\n"],"mappings":";;;AAIA,IAAM,aAAgC;CACpC,YAAY;CACZ,WAAW;CACX,SAAS;CACT,QAAQ;EACN,YAAY;EACZ,SAAS,EACP,YAAY,oBACd;CACF;CACA,SAAS,EACP,YAAY,oBACd;CACA,WAAW;EACT,QAAQ;EACR,oBAAoB,EAClB,OAAO,gBACT;EACA,QAAQ,EACN,YAAY,cACd;CACF;AACF;AAIA,IAAM,mBAAsC;CAC1C,cAAc;CACd,eAAe;CACf,cAAc;CACd,cAAc;AAChB;AAEA,IAAM,mBAAmB,iBAAiB;CACxC,WAAW;CACX,OAAO;EACL;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CACF;CACA,MAAM;EACJ,MAAM;GACJ,YAAY;GACZ,SAAS;GACT,gBAAgB;GAChB,cAAc;GACd,eAAe;EACjB;EACA,SAAS;GACP,YAAY;GACZ,SAAS;GACT,MAAM;GACN,KAAK;GACL,UAAU;EACZ;EACA,SAAS;GACP,YAAY;GACZ,SAAS;GACT,MAAM;GACN,KAAK;GACL,UAAU;GACV,cAAc;EAChB;EACA,MAAM;GACJ,OAAO;GAEP,SAAS;GACT,YAAY;GACZ,SAAS;EACX;EACA,OAAO;GACL,YAAY;GACZ,SAAS;GACT,MAAM;GACN,UAAU;GACV,KAAK;GACL,UAAU;EACZ;EACA,aAAa;GACX,WAAW;GACX,aAAa;GACb,wBAAwB;GACxB,SAAS;GACT,YAAY;GACZ,oBAAoB;EACtB;EACA,QAAQ;GACN,YAAY;GACZ,YAAY;GACZ,cAAc;GACd,OAAO;GACP,SAAS;GACT,KAAK;GACL,QAAQ;GACR,eAAe;GACf,OAAO,IAAI,GAAG;GACd,QAAQ,EACN,YAAY,uBACd;GACA,8BA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W;GACX,SAAS;GACT,WAAW;GACX,cAAc;EAChB;EACA,cAAc;GACZ,GAAG;GACH,WAAW;GACX,OAAO;GACP,KAAK;GACL,WAAW;GACX,cAAc;GACd,eAAe;GACf,WAAW;GACX,WAAW;GACX,WAAW;IACT,OAAO;IACP,QAAQ;IACR,QAAQ,EACN,YAAY,cACd;IACA,0BAA0B;KACxB,OAAO;KACP,oBAAoB,EAClB,OAAO,gBACT;IACF;GACF;EACF;EACA,oBAAoB;GAClB,OAAO;GACP,WAAW;EACb;EACA,gBAAgB;GACd,YAAY;GACZ,SAAS;GACT,KAAK;GACL,kBAAkB;EACpB;EACA,eAAe;GACb,YAAY;GACZ,iBAAiB;GACjB,mBAAmB;GACnB,eAAe;EACjB;EAGA,aAAa;GACX,SAAS;GACT,eAAe;GACf,WAAW;GACX,2EAA2E,EACzE,WAAW,EACb;GACA,0CAA0C;IACxC,SAAS;IACT,eAAe;GACjB;EACF;EACA,eAAe;GACb,YAAY;GACZ,SAAS;GACT,KAAK;GACL,iBAAiB;GACjB,mBAAmB;GACnB,kBAAkB;GAClB,oBAAoB;EACtB;EACA,oBAAoB,EAClB,MAAM,IACR;EACA,cAAc;GACZ,WAAW,IAAI,GAAG;GAClB,WAAW;GACX,iBAAiB;GACjB,mBAAmB;GACnB,eAAe;EACjB;EACA,gBAAgB;GACd,OAAO;GACP,WAAW;EACb;EACA,SAAS;GACP,cAAc;GACd,eAAe;EACjB;EACA,SAAS;GACP,SAAS;GACT,eAAe;GACf,KAAK;GACL,mBAAmB;GACnB,eAAe;EACjB;EACA,gBAAgB;GACd,SAAS;GACT,eAAe;GACf,KAAK;GACL,WAAW,IAAI,GAAG;GAClB,WAAW;GACX,WAAW;EACb;EACA,qBAAqB;GACnB,OAAO;GACP,WAAW;EACb;EACA,WAAW;GACT,YAAY;GACZ,qBAAqB;GACrB,aAAa;GACb,SAAS;GACT,KAAK;GACL,gBAAgB;GAChB,SAAS;EACX;EACA,eAAe;GACb,GAAG;GACH,WAAW;GACX,YAAY;GACZ,aAAa;GACb,cAAc;GACd,aAAa;GACb,OAAO;GACP,KAAK;GACL,QAAQ;GACR,eAAe;GACf,WAAW;GACX,OAAO,EACL,OAAO,eACT;GACA,WAAW;IACT,aAAa;IACb,OAAO;IACP,OAAO,EACL,OAAO,gBACT;GACF;EACF;EACA,cAAc;GACZ,YAAY;GACZ,qBAAqB;GACrB,aAAa;GACb,OAAO;GACP,SAAS;GACT,KAAK;GACL,QAAQ,IAAI,EAAE;GACd,eAAe;GAEf,8BAA8B;IAC5B,GAAG;IACH,eAAe;GACjB;EACF;EACA,mBAAmB;GACjB,YAAY;GACZ,OAAO;GACP,MAAM;GACN,UAAU;GACV,SAAS;GACT,WAAW;GACX,cAAc,EACZ,OAAO,yBACT;GACA,mCAAmC,EACjC,YAAY,OACd;EACF;EACA,cAAc;GACZ,YAAY;GACZ,qBAAqB;GACrB,aAAa;GACb,SAAS;GACT,YAAY;GACZ,KAAK;GAEL,cAAc;GACd,eAAe;IAAE,MAAM;IAAM,QAAQ;GAAK;EAC5C;EACA,aAAa;GACX,OAAO;GACP,MAAM;GACN,WAAW;EACb;EACA,mBAAmB;GACjB,YAAY;GACZ,qBAAqB;GACrB,aAAa;GACb,SAAS;GACT,YAAY;GACZ,KAAK;GACL,cAAc;GAEd,eAAe;IAAE,MAAM;IAAM,QAAQ;GAAK;EAC5C;EACA,qBAAqB;GACnB,OAAO;GACP,WAAW;EACb;EACA,kBAAkB;GAChB,OAAO;GACP,WAAW;EACb;EAEA,YAAY;GACV,SAAS;GACT,eAAe;GACf,KAAK;EACP;EACA,cAAc;GACZ,SAAS;GACT,KAAK;GACL,SAAS,EACP,MAAM,IACR;EACF;EAEA,iBAAiB;GACf,OAAO;GACP,SAAS;GACT,YAAY;GACZ,2BAA2B,EACzB,YAAY,SACd;EACF;EACA,oBAAoB,EAClB,YAAY,EACd;EACA,OAAO;GACL,SAAS;GACT,eAAe;GACf,KAAK;EACP;EACA,YAAY;GACV,OAAO;GACP,WAAW;EACb;EACA,cAAc;GACZ,YAAY;GACZ,aAAa;GACb,cAAc;GACd,aAAa;GACb,SAAS;GACT,QAAQ;GACR,UAAU;GACV,qDAAqD,EACnD,aAAa,kBACf;EACF;EACA,cAAc;GACZ,GAAG;GACH,MAAM;GACN,KAAK;GACL,UAAU;GACV,eAAe;GACf,WAAW;GACX,WAAW;EACb;EACA,WAAW;GACT,OAAO;GACP,YAAY;EACd;EACA,YAAY;GACV,OAAO;GACP,MAAM;GACN,UAAU;GACV,UAAU;EACZ;EACA,cAAc;GACZ,OAAO;GACP,YAAY;EACd;EACA,aAAa;GACX,GAAG;GACH,OAAO;GACP,YAAY;GACZ,gBAAgB;GAChB,OAAO;EACT;CACF;CACA,UAAU;EAGR,YAAY;GACV,QAAQ,EACN,MAAM;IACJ,qBAAqB;IACrB,aAAa;IACb,eAAe;KAAE,MAAM;KAAM,QAAQ;IAAK;GAC5C,EACF;GACA,MAAM,EACJ,MAAM;IACJ,qBAAqB;IACrB,aAAa;IACb,kBAAkB;KAAE,MAAM;KAAM,QAAQ;IAAK;IAC7C,oBAAoB;KAAE,MAAM;KAAM,QAAQ;IAAK;GACjD,EACF;EACF;EACA,cAAc;GACZ,QAAQ,CAAC;GACT,OAAO,EACL,MAAM,EACJ,gBAAgB,aAClB,EACF;EACF;CACF;AACF,CAAC"}