@tribe-nest/forge 3.29.0 → 3.34.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 (58) hide show
  1. package/package.json +11 -3
  2. package/src/_tests/publishedResolvability.spec.ts +184 -0
  3. package/src/_tests/specsRunWorkspaceSource.spec.ts +116 -0
  4. package/src/_tests/workspaceAliases.ts +40 -0
  5. package/src/contexts/CartContext.tsx +17 -1
  6. package/src/contexts/PublicAuthContext.tsx +34 -5
  7. package/src/contexts/_tests/CartContext.spec.tsx +36 -0
  8. package/src/contexts/_tests/PublicAuthRefetch.spec.tsx +147 -0
  9. package/src/data/queries/useBroadcasts.ts +151 -0
  10. package/src/data/queries/useMyBookings.ts +18 -1
  11. package/src/i18n/_tests/translationKeys.spec.ts +15 -0
  12. package/src/i18n/de.json +97 -0
  13. package/src/i18n/en.json +97 -0
  14. package/src/ui/format/_tests/membershipPwyw.spec.ts +185 -0
  15. package/src/ui/format/_tests/pwyw.spec.ts +65 -8
  16. package/src/ui/format/membershipPwyw.ts +164 -0
  17. package/src/ui/format/pwyw.ts +37 -0
  18. package/src/ui/headless/broadcast/_tests/broadcastState.spec.ts +235 -0
  19. package/src/ui/headless/broadcast/broadcastState.ts +158 -0
  20. package/src/ui/headless/broadcast/useBroadcastWatch.ts +174 -21
  21. package/src/ui/headless/event/useEventCheckout.ts +8 -13
  22. package/src/ui/headless/index.ts +14 -0
  23. package/src/ui/headless/membership/useMembershipCheckout.ts +160 -32
  24. package/src/ui/index.ts +61 -0
  25. package/src/ui/media/BookingCallScreen.tsx +33 -0
  26. package/src/ui/media/CallHelpHint.tsx +87 -0
  27. package/src/ui/media/CallStage.tsx +633 -0
  28. package/src/ui/media/_tests/CallStage.spec.tsx +931 -0
  29. package/src/ui/media/_tests/bookingSession.spec.tsx +227 -0
  30. package/src/ui/media/_tests/callState.spec.ts +499 -0
  31. package/src/ui/media/_tests/fakeNode.ts +178 -0
  32. package/src/ui/media/bookingSession.tsx +182 -0
  33. package/src/ui/media/bookingWindow.ts +81 -0
  34. package/src/ui/media/callState.ts +360 -0
  35. package/src/ui/media/index.ts +135 -0
  36. package/src/ui/styled/AccountDashboard.tsx +193 -4
  37. package/src/ui/styled/BroadcastWatch.tsx +107 -0
  38. package/src/ui/styled/ForgotPasswordForm.tsx +5 -0
  39. package/src/ui/styled/LiveBroadcastList.tsx +171 -0
  40. package/src/ui/styled/LoginForm.tsx +10 -0
  41. package/src/ui/styled/MembershipCheckout.tsx +318 -45
  42. package/src/ui/styled/MembershipTiers.tsx +10 -3
  43. package/src/ui/styled/ResetPasswordForm.tsx +5 -0
  44. package/src/ui/styled/SignupForm.tsx +5 -0
  45. package/src/ui/styled/_tests/AccountDashboardBookingCall.spec.tsx +166 -0
  46. package/src/ui/styled/_tests/AccountDashboardCommunity.spec.tsx +134 -0
  47. package/src/ui/styled/_tests/BroadcastPassValidation.spec.tsx +125 -0
  48. package/src/ui/styled/_tests/MembershipCheckout.spec.tsx +364 -0
  49. package/src/ui/styled/broadcast/BroadcastPassValidation.tsx +187 -0
  50. package/src/ui/styled/broadcast/BroadcastPlayer.tsx +536 -0
  51. package/src/ui/styled/broadcast/BroadcastTicketPurchase.tsx +74 -0
  52. package/src/ui/styled/broadcast/EndedBroadcast.tsx +103 -0
  53. package/src/ui/styled/community/CommunityComposer.tsx +182 -3
  54. package/src/ui/styled/community/CommunityFeed.tsx +36 -51
  55. package/src/ui/styled/community/CommunityPostDetail.tsx +16 -2
  56. package/src/ui/styled/community/_tests/CommunityComposer.spec.tsx +281 -0
  57. package/src/ui/styled/community/_tests/CommunityPostDetail.spec.tsx +175 -0
  58. package/src/ui/styled/forge-utilities.css +832 -0
@@ -0,0 +1,832 @@
1
+ /*! tailwindcss v4.1.11 | MIT License | https://tailwindcss.com */
2
+
3
+ /* Wrapped by scripts/wrapForgeCss.mjs. See that file: this layer is what stops
4
+ Forge's utilities from overriding the app or site that imports them. */
5
+ @layer forge-utilities {
6
+ @layer properties;
7
+ @layer theme, base, components, utilities;
8
+ @layer theme {
9
+ :root, :host {
10
+ --color-red-500: oklch(63.7% 0.237 25.331);
11
+ --spacing: 0.25rem;
12
+ --container-4xl: 56rem;
13
+ --container-6xl: 72rem;
14
+ --text-xs: 0.75rem;
15
+ --text-xs--line-height: calc(1 / 0.75);
16
+ --text-sm: 0.875rem;
17
+ --text-sm--line-height: calc(1.25 / 0.875);
18
+ --text-lg: 1.125rem;
19
+ --text-lg--line-height: calc(1.75 / 1.125);
20
+ --text-xl: 1.25rem;
21
+ --text-xl--line-height: calc(1.75 / 1.25);
22
+ --text-2xl: 1.5rem;
23
+ --text-2xl--line-height: calc(2 / 1.5);
24
+ --font-weight-medium: 500;
25
+ --font-weight-semibold: 600;
26
+ --font-weight-bold: 700;
27
+ --radius-md: 0.375rem;
28
+ --radius-lg: 0.5rem;
29
+ --ease-out: cubic-bezier(0, 0, 0.2, 1);
30
+ --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
31
+ --default-transition-duration: 150ms;
32
+ --default-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
33
+ }
34
+ }
35
+ @layer utilities {
36
+ .collapse {
37
+ visibility: collapse;
38
+ }
39
+ .invisible {
40
+ visibility: hidden;
41
+ }
42
+ .visible {
43
+ visibility: visible;
44
+ }
45
+ .absolute {
46
+ position: absolute;
47
+ }
48
+ .fixed {
49
+ position: fixed;
50
+ }
51
+ .relative {
52
+ position: relative;
53
+ }
54
+ .static {
55
+ position: static;
56
+ }
57
+ .sticky {
58
+ position: sticky;
59
+ }
60
+ .inset-0 {
61
+ inset: calc(var(--spacing) * 0);
62
+ }
63
+ .top-4 {
64
+ top: calc(var(--spacing) * 4);
65
+ }
66
+ .top-6 {
67
+ top: calc(var(--spacing) * 6);
68
+ }
69
+ .right-0 {
70
+ right: calc(var(--spacing) * 0);
71
+ }
72
+ .bottom-0 {
73
+ bottom: calc(var(--spacing) * 0);
74
+ }
75
+ .left-0 {
76
+ left: calc(var(--spacing) * 0);
77
+ }
78
+ .z-40 {
79
+ z-index: 40;
80
+ }
81
+ .z-50 {
82
+ z-index: 50;
83
+ }
84
+ .order-1 {
85
+ order: 1;
86
+ }
87
+ .container {
88
+ width: 100%;
89
+ @media (width >= 40rem) {
90
+ max-width: 40rem;
91
+ }
92
+ @media (width >= 48rem) {
93
+ max-width: 48rem;
94
+ }
95
+ @media (width >= 64rem) {
96
+ max-width: 64rem;
97
+ }
98
+ @media (width >= 80rem) {
99
+ max-width: 80rem;
100
+ }
101
+ @media (width >= 96rem) {
102
+ max-width: 96rem;
103
+ }
104
+ }
105
+ .m-1 {
106
+ margin: calc(var(--spacing) * 1);
107
+ }
108
+ .mx-auto {
109
+ margin-inline: auto;
110
+ }
111
+ .mt-1 {
112
+ margin-top: calc(var(--spacing) * 1);
113
+ }
114
+ .mt-4 {
115
+ margin-top: calc(var(--spacing) * 4);
116
+ }
117
+ .mt-6 {
118
+ margin-top: calc(var(--spacing) * 6);
119
+ }
120
+ .mb-1 {
121
+ margin-bottom: calc(var(--spacing) * 1);
122
+ }
123
+ .mb-2 {
124
+ margin-bottom: calc(var(--spacing) * 2);
125
+ }
126
+ .mb-3 {
127
+ margin-bottom: calc(var(--spacing) * 3);
128
+ }
129
+ .mb-4 {
130
+ margin-bottom: calc(var(--spacing) * 4);
131
+ }
132
+ .mb-6 {
133
+ margin-bottom: calc(var(--spacing) * 6);
134
+ }
135
+ .mb-8 {
136
+ margin-bottom: calc(var(--spacing) * 8);
137
+ }
138
+ .ml-2 {
139
+ margin-left: calc(var(--spacing) * 2);
140
+ }
141
+ .block {
142
+ display: block;
143
+ }
144
+ .contents {
145
+ display: contents;
146
+ }
147
+ .flex {
148
+ display: flex;
149
+ }
150
+ .grid {
151
+ display: grid;
152
+ }
153
+ .hidden {
154
+ display: none;
155
+ }
156
+ .inline {
157
+ display: inline;
158
+ }
159
+ .inline-block {
160
+ display: inline-block;
161
+ }
162
+ .inline-flex {
163
+ display: inline-flex;
164
+ }
165
+ .table {
166
+ display: table;
167
+ }
168
+ .h-0\.5 {
169
+ height: calc(var(--spacing) * 0.5);
170
+ }
171
+ .h-4 {
172
+ height: calc(var(--spacing) * 4);
173
+ }
174
+ .h-8 {
175
+ height: calc(var(--spacing) * 8);
176
+ }
177
+ .w-4 {
178
+ width: calc(var(--spacing) * 4);
179
+ }
180
+ .w-8 {
181
+ width: calc(var(--spacing) * 8);
182
+ }
183
+ .w-52 {
184
+ width: calc(var(--spacing) * 52);
185
+ }
186
+ .w-full {
187
+ width: 100%;
188
+ }
189
+ .max-w-4xl {
190
+ max-width: var(--container-4xl);
191
+ }
192
+ .max-w-6xl {
193
+ max-width: var(--container-6xl);
194
+ }
195
+ .min-w-0 {
196
+ min-width: calc(var(--spacing) * 0);
197
+ }
198
+ .flex-1 {
199
+ flex: 1;
200
+ }
201
+ .shrink {
202
+ flex-shrink: 1;
203
+ }
204
+ .shrink-0 {
205
+ flex-shrink: 0;
206
+ }
207
+ .transform {
208
+ transform: var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,);
209
+ }
210
+ .cursor-pointer {
211
+ cursor: pointer;
212
+ }
213
+ .resize {
214
+ resize: both;
215
+ }
216
+ .grid-cols-1 {
217
+ grid-template-columns: repeat(1, minmax(0, 1fr));
218
+ }
219
+ .grid-cols-2 {
220
+ grid-template-columns: repeat(2, minmax(0, 1fr));
221
+ }
222
+ .flex-col {
223
+ flex-direction: column;
224
+ }
225
+ .flex-wrap {
226
+ flex-wrap: wrap;
227
+ }
228
+ .items-center {
229
+ align-items: center;
230
+ }
231
+ .items-end {
232
+ align-items: flex-end;
233
+ }
234
+ .items-start {
235
+ align-items: flex-start;
236
+ }
237
+ .justify-between {
238
+ justify-content: space-between;
239
+ }
240
+ .justify-center {
241
+ justify-content: center;
242
+ }
243
+ .gap-1 {
244
+ gap: calc(var(--spacing) * 1);
245
+ }
246
+ .gap-2 {
247
+ gap: calc(var(--spacing) * 2);
248
+ }
249
+ .gap-3 {
250
+ gap: calc(var(--spacing) * 3);
251
+ }
252
+ .gap-4 {
253
+ gap: calc(var(--spacing) * 4);
254
+ }
255
+ .gap-6 {
256
+ gap: calc(var(--spacing) * 6);
257
+ }
258
+ .gap-8 {
259
+ gap: calc(var(--spacing) * 8);
260
+ }
261
+ .space-y-2 {
262
+ :where(& > :not(:last-child)) {
263
+ --tw-space-y-reverse: 0;
264
+ margin-block-start: calc(calc(var(--spacing) * 2) * var(--tw-space-y-reverse));
265
+ margin-block-end: calc(calc(var(--spacing) * 2) * calc(1 - var(--tw-space-y-reverse)));
266
+ }
267
+ }
268
+ .space-y-4 {
269
+ :where(& > :not(:last-child)) {
270
+ --tw-space-y-reverse: 0;
271
+ margin-block-start: calc(calc(var(--spacing) * 4) * var(--tw-space-y-reverse));
272
+ margin-block-end: calc(calc(var(--spacing) * 4) * calc(1 - var(--tw-space-y-reverse)));
273
+ }
274
+ }
275
+ .space-y-6 {
276
+ :where(& > :not(:last-child)) {
277
+ --tw-space-y-reverse: 0;
278
+ margin-block-start: calc(calc(var(--spacing) * 6) * var(--tw-space-y-reverse));
279
+ margin-block-end: calc(calc(var(--spacing) * 6) * calc(1 - var(--tw-space-y-reverse)));
280
+ }
281
+ }
282
+ .space-x-4 {
283
+ :where(& > :not(:last-child)) {
284
+ --tw-space-x-reverse: 0;
285
+ margin-inline-start: calc(calc(var(--spacing) * 4) * var(--tw-space-x-reverse));
286
+ margin-inline-end: calc(calc(var(--spacing) * 4) * calc(1 - var(--tw-space-x-reverse)));
287
+ }
288
+ }
289
+ .overflow-x-auto {
290
+ overflow-x: auto;
291
+ }
292
+ .rounded {
293
+ border-radius: 0.25rem;
294
+ }
295
+ .rounded-full {
296
+ border-radius: calc(infinity * 1px);
297
+ }
298
+ .rounded-lg {
299
+ border-radius: var(--radius-lg);
300
+ }
301
+ .rounded-md {
302
+ border-radius: var(--radius-md);
303
+ }
304
+ .border {
305
+ border-style: var(--tw-border-style);
306
+ border-width: 1px;
307
+ }
308
+ .border-2 {
309
+ border-style: var(--tw-border-style);
310
+ border-width: 2px;
311
+ }
312
+ .p-3 {
313
+ padding: calc(var(--spacing) * 3);
314
+ }
315
+ .p-4 {
316
+ padding: calc(var(--spacing) * 4);
317
+ }
318
+ .p-6 {
319
+ padding: calc(var(--spacing) * 6);
320
+ }
321
+ .px-4 {
322
+ padding-inline: calc(var(--spacing) * 4);
323
+ }
324
+ .py-3 {
325
+ padding-block: calc(var(--spacing) * 3);
326
+ }
327
+ .py-12 {
328
+ padding-block: calc(var(--spacing) * 12);
329
+ }
330
+ .pt-2 {
331
+ padding-top: calc(var(--spacing) * 2);
332
+ }
333
+ .pt-4 {
334
+ padding-top: calc(var(--spacing) * 4);
335
+ }
336
+ .pt-6 {
337
+ padding-top: calc(var(--spacing) * 6);
338
+ }
339
+ .pb-4 {
340
+ padding-bottom: calc(var(--spacing) * 4);
341
+ }
342
+ .pb-6 {
343
+ padding-bottom: calc(var(--spacing) * 6);
344
+ }
345
+ .pb-32 {
346
+ padding-bottom: calc(var(--spacing) * 32);
347
+ }
348
+ .text-center {
349
+ text-align: center;
350
+ }
351
+ .text-right {
352
+ text-align: right;
353
+ }
354
+ .text-2xl {
355
+ font-size: var(--text-2xl);
356
+ line-height: var(--tw-leading, var(--text-2xl--line-height));
357
+ }
358
+ .text-lg {
359
+ font-size: var(--text-lg);
360
+ line-height: var(--tw-leading, var(--text-lg--line-height));
361
+ }
362
+ .text-sm {
363
+ font-size: var(--text-sm);
364
+ line-height: var(--tw-leading, var(--text-sm--line-height));
365
+ }
366
+ .text-xl {
367
+ font-size: var(--text-xl);
368
+ line-height: var(--tw-leading, var(--text-xl--line-height));
369
+ }
370
+ .text-xs {
371
+ font-size: var(--text-xs);
372
+ line-height: var(--tw-leading, var(--text-xs--line-height));
373
+ }
374
+ .font-bold {
375
+ --tw-font-weight: var(--font-weight-bold);
376
+ font-weight: var(--font-weight-bold);
377
+ }
378
+ .font-medium {
379
+ --tw-font-weight: var(--font-weight-medium);
380
+ font-weight: var(--font-weight-medium);
381
+ }
382
+ .font-semibold {
383
+ --tw-font-weight: var(--font-weight-semibold);
384
+ font-weight: var(--font-weight-semibold);
385
+ }
386
+ .break-all {
387
+ word-break: break-all;
388
+ }
389
+ .text-red-500 {
390
+ color: var(--color-red-500);
391
+ }
392
+ .capitalize {
393
+ text-transform: capitalize;
394
+ }
395
+ .lowercase {
396
+ text-transform: lowercase;
397
+ }
398
+ .uppercase {
399
+ text-transform: uppercase;
400
+ }
401
+ .italic {
402
+ font-style: italic;
403
+ }
404
+ .tabular-nums {
405
+ --tw-numeric-spacing: tabular-nums;
406
+ font-variant-numeric: var(--tw-ordinal,) var(--tw-slashed-zero,) var(--tw-numeric-figure,) var(--tw-numeric-spacing,) var(--tw-numeric-fraction,);
407
+ }
408
+ .line-through {
409
+ text-decoration-line: line-through;
410
+ }
411
+ .underline {
412
+ text-decoration-line: underline;
413
+ }
414
+ .shadow {
415
+ --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
416
+ box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
417
+ }
418
+ .shadow-md {
419
+ --tw-shadow: 0 4px 6px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 2px 4px -2px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
420
+ box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
421
+ }
422
+ .ring {
423
+ --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
424
+ box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
425
+ }
426
+ .outline {
427
+ outline-style: var(--tw-outline-style);
428
+ outline-width: 1px;
429
+ }
430
+ .blur {
431
+ --tw-blur: blur(8px);
432
+ filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);
433
+ }
434
+ .filter {
435
+ filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);
436
+ }
437
+ .transition {
438
+ transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, visibility, content-visibility, overlay, pointer-events;
439
+ transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
440
+ transition-duration: var(--tw-duration, var(--default-transition-duration));
441
+ }
442
+ .transition-colors {
443
+ transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
444
+ transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
445
+ transition-duration: var(--tw-duration, var(--default-transition-duration));
446
+ }
447
+ .ease-in-out {
448
+ --tw-ease: var(--ease-in-out);
449
+ transition-timing-function: var(--ease-in-out);
450
+ }
451
+ .ease-out {
452
+ --tw-ease: var(--ease-out);
453
+ transition-timing-function: var(--ease-out);
454
+ }
455
+ .sm\:grid-cols-2 {
456
+ @media (width >= 40rem) {
457
+ grid-template-columns: repeat(2, minmax(0, 1fr));
458
+ }
459
+ }
460
+ .md\:static {
461
+ @media (width >= 48rem) {
462
+ position: static;
463
+ }
464
+ }
465
+ .md\:sticky {
466
+ @media (width >= 48rem) {
467
+ position: sticky;
468
+ }
469
+ }
470
+ .md\:top-4 {
471
+ @media (width >= 48rem) {
472
+ top: calc(var(--spacing) * 4);
473
+ }
474
+ }
475
+ .md\:right-auto {
476
+ @media (width >= 48rem) {
477
+ right: auto;
478
+ }
479
+ }
480
+ .md\:bottom-auto {
481
+ @media (width >= 48rem) {
482
+ bottom: auto;
483
+ }
484
+ }
485
+ .md\:left-auto {
486
+ @media (width >= 48rem) {
487
+ left: auto;
488
+ }
489
+ }
490
+ .md\:z-auto {
491
+ @media (width >= 48rem) {
492
+ z-index: auto;
493
+ }
494
+ }
495
+ .md\:flex {
496
+ @media (width >= 48rem) {
497
+ display: flex;
498
+ }
499
+ }
500
+ .md\:hidden {
501
+ @media (width >= 48rem) {
502
+ display: none;
503
+ }
504
+ }
505
+ .md\:h-64 {
506
+ @media (width >= 48rem) {
507
+ height: calc(var(--spacing) * 64);
508
+ }
509
+ }
510
+ .md\:w-64 {
511
+ @media (width >= 48rem) {
512
+ width: calc(var(--spacing) * 64);
513
+ }
514
+ }
515
+ .md\:w-\[260px\] {
516
+ @media (width >= 48rem) {
517
+ width: 260px;
518
+ }
519
+ }
520
+ .md\:w-\[300px\] {
521
+ @media (width >= 48rem) {
522
+ width: 300px;
523
+ }
524
+ }
525
+ .md\:w-\[360px\] {
526
+ @media (width >= 48rem) {
527
+ width: 360px;
528
+ }
529
+ }
530
+ .md\:shrink-0 {
531
+ @media (width >= 48rem) {
532
+ flex-shrink: 0;
533
+ }
534
+ }
535
+ .md\:grid-cols-2 {
536
+ @media (width >= 48rem) {
537
+ grid-template-columns: repeat(2, minmax(0, 1fr));
538
+ }
539
+ }
540
+ .md\:grid-cols-4 {
541
+ @media (width >= 48rem) {
542
+ grid-template-columns: repeat(4, minmax(0, 1fr));
543
+ }
544
+ }
545
+ .md\:flex-row {
546
+ @media (width >= 48rem) {
547
+ flex-direction: row;
548
+ }
549
+ }
550
+ .md\:items-start {
551
+ @media (width >= 48rem) {
552
+ align-items: flex-start;
553
+ }
554
+ }
555
+ .lg\:col-span-1 {
556
+ @media (width >= 64rem) {
557
+ grid-column: span 1 / span 1;
558
+ }
559
+ }
560
+ .lg\:col-span-2 {
561
+ @media (width >= 64rem) {
562
+ grid-column: span 2 / span 2;
563
+ }
564
+ }
565
+ .lg\:flex {
566
+ @media (width >= 64rem) {
567
+ display: flex;
568
+ }
569
+ }
570
+ .lg\:hidden {
571
+ @media (width >= 64rem) {
572
+ display: none;
573
+ }
574
+ }
575
+ .lg\:grid-cols-3 {
576
+ @media (width >= 64rem) {
577
+ grid-template-columns: repeat(3, minmax(0, 1fr));
578
+ }
579
+ }
580
+ .lg\:flex-row {
581
+ @media (width >= 64rem) {
582
+ flex-direction: row;
583
+ }
584
+ }
585
+ .lg\:items-start {
586
+ @media (width >= 64rem) {
587
+ align-items: flex-start;
588
+ }
589
+ }
590
+ .lg\:gap-8 {
591
+ @media (width >= 64rem) {
592
+ gap: calc(var(--spacing) * 8);
593
+ }
594
+ }
595
+ }
596
+ @layer properties {
597
+ @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) {
598
+ *, ::before, ::after, ::backdrop {
599
+ --tw-rotate-x: initial;
600
+ --tw-rotate-y: initial;
601
+ --tw-rotate-z: initial;
602
+ --tw-skew-x: initial;
603
+ --tw-skew-y: initial;
604
+ --tw-space-y-reverse: 0;
605
+ --tw-space-x-reverse: 0;
606
+ --tw-border-style: solid;
607
+ --tw-font-weight: initial;
608
+ --tw-ordinal: initial;
609
+ --tw-slashed-zero: initial;
610
+ --tw-numeric-figure: initial;
611
+ --tw-numeric-spacing: initial;
612
+ --tw-numeric-fraction: initial;
613
+ --tw-shadow: 0 0 #0000;
614
+ --tw-shadow-color: initial;
615
+ --tw-shadow-alpha: 100%;
616
+ --tw-inset-shadow: 0 0 #0000;
617
+ --tw-inset-shadow-color: initial;
618
+ --tw-inset-shadow-alpha: 100%;
619
+ --tw-ring-color: initial;
620
+ --tw-ring-shadow: 0 0 #0000;
621
+ --tw-inset-ring-color: initial;
622
+ --tw-inset-ring-shadow: 0 0 #0000;
623
+ --tw-ring-inset: initial;
624
+ --tw-ring-offset-width: 0px;
625
+ --tw-ring-offset-color: #fff;
626
+ --tw-ring-offset-shadow: 0 0 #0000;
627
+ --tw-outline-style: solid;
628
+ --tw-blur: initial;
629
+ --tw-brightness: initial;
630
+ --tw-contrast: initial;
631
+ --tw-grayscale: initial;
632
+ --tw-hue-rotate: initial;
633
+ --tw-invert: initial;
634
+ --tw-opacity: initial;
635
+ --tw-saturate: initial;
636
+ --tw-sepia: initial;
637
+ --tw-drop-shadow: initial;
638
+ --tw-drop-shadow-color: initial;
639
+ --tw-drop-shadow-alpha: 100%;
640
+ --tw-drop-shadow-size: initial;
641
+ --tw-ease: initial;
642
+ }
643
+ }
644
+ }
645
+ }
646
+
647
+ @property --tw-rotate-x {
648
+ syntax: "*";
649
+ inherits: false;
650
+ }
651
+ @property --tw-rotate-y {
652
+ syntax: "*";
653
+ inherits: false;
654
+ }
655
+ @property --tw-rotate-z {
656
+ syntax: "*";
657
+ inherits: false;
658
+ }
659
+ @property --tw-skew-x {
660
+ syntax: "*";
661
+ inherits: false;
662
+ }
663
+ @property --tw-skew-y {
664
+ syntax: "*";
665
+ inherits: false;
666
+ }
667
+ @property --tw-space-y-reverse {
668
+ syntax: "*";
669
+ inherits: false;
670
+ initial-value: 0;
671
+ }
672
+ @property --tw-space-x-reverse {
673
+ syntax: "*";
674
+ inherits: false;
675
+ initial-value: 0;
676
+ }
677
+ @property --tw-border-style {
678
+ syntax: "*";
679
+ inherits: false;
680
+ initial-value: solid;
681
+ }
682
+ @property --tw-font-weight {
683
+ syntax: "*";
684
+ inherits: false;
685
+ }
686
+ @property --tw-ordinal {
687
+ syntax: "*";
688
+ inherits: false;
689
+ }
690
+ @property --tw-slashed-zero {
691
+ syntax: "*";
692
+ inherits: false;
693
+ }
694
+ @property --tw-numeric-figure {
695
+ syntax: "*";
696
+ inherits: false;
697
+ }
698
+ @property --tw-numeric-spacing {
699
+ syntax: "*";
700
+ inherits: false;
701
+ }
702
+ @property --tw-numeric-fraction {
703
+ syntax: "*";
704
+ inherits: false;
705
+ }
706
+ @property --tw-shadow {
707
+ syntax: "*";
708
+ inherits: false;
709
+ initial-value: 0 0 #0000;
710
+ }
711
+ @property --tw-shadow-color {
712
+ syntax: "*";
713
+ inherits: false;
714
+ }
715
+ @property --tw-shadow-alpha {
716
+ syntax: "<percentage>";
717
+ inherits: false;
718
+ initial-value: 100%;
719
+ }
720
+ @property --tw-inset-shadow {
721
+ syntax: "*";
722
+ inherits: false;
723
+ initial-value: 0 0 #0000;
724
+ }
725
+ @property --tw-inset-shadow-color {
726
+ syntax: "*";
727
+ inherits: false;
728
+ }
729
+ @property --tw-inset-shadow-alpha {
730
+ syntax: "<percentage>";
731
+ inherits: false;
732
+ initial-value: 100%;
733
+ }
734
+ @property --tw-ring-color {
735
+ syntax: "*";
736
+ inherits: false;
737
+ }
738
+ @property --tw-ring-shadow {
739
+ syntax: "*";
740
+ inherits: false;
741
+ initial-value: 0 0 #0000;
742
+ }
743
+ @property --tw-inset-ring-color {
744
+ syntax: "*";
745
+ inherits: false;
746
+ }
747
+ @property --tw-inset-ring-shadow {
748
+ syntax: "*";
749
+ inherits: false;
750
+ initial-value: 0 0 #0000;
751
+ }
752
+ @property --tw-ring-inset {
753
+ syntax: "*";
754
+ inherits: false;
755
+ }
756
+ @property --tw-ring-offset-width {
757
+ syntax: "<length>";
758
+ inherits: false;
759
+ initial-value: 0px;
760
+ }
761
+ @property --tw-ring-offset-color {
762
+ syntax: "*";
763
+ inherits: false;
764
+ initial-value: #fff;
765
+ }
766
+ @property --tw-ring-offset-shadow {
767
+ syntax: "*";
768
+ inherits: false;
769
+ initial-value: 0 0 #0000;
770
+ }
771
+ @property --tw-outline-style {
772
+ syntax: "*";
773
+ inherits: false;
774
+ initial-value: solid;
775
+ }
776
+ @property --tw-blur {
777
+ syntax: "*";
778
+ inherits: false;
779
+ }
780
+ @property --tw-brightness {
781
+ syntax: "*";
782
+ inherits: false;
783
+ }
784
+ @property --tw-contrast {
785
+ syntax: "*";
786
+ inherits: false;
787
+ }
788
+ @property --tw-grayscale {
789
+ syntax: "*";
790
+ inherits: false;
791
+ }
792
+ @property --tw-hue-rotate {
793
+ syntax: "*";
794
+ inherits: false;
795
+ }
796
+ @property --tw-invert {
797
+ syntax: "*";
798
+ inherits: false;
799
+ }
800
+ @property --tw-opacity {
801
+ syntax: "*";
802
+ inherits: false;
803
+ }
804
+ @property --tw-saturate {
805
+ syntax: "*";
806
+ inherits: false;
807
+ }
808
+ @property --tw-sepia {
809
+ syntax: "*";
810
+ inherits: false;
811
+ }
812
+ @property --tw-drop-shadow {
813
+ syntax: "*";
814
+ inherits: false;
815
+ }
816
+ @property --tw-drop-shadow-color {
817
+ syntax: "*";
818
+ inherits: false;
819
+ }
820
+ @property --tw-drop-shadow-alpha {
821
+ syntax: "<percentage>";
822
+ inherits: false;
823
+ initial-value: 100%;
824
+ }
825
+ @property --tw-drop-shadow-size {
826
+ syntax: "*";
827
+ inherits: false;
828
+ }
829
+ @property --tw-ease {
830
+ syntax: "*";
831
+ inherits: false;
832
+ }