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