@pandacss/eslint-plugin 0.3.2 → 2.0.0-beta.10

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.
@@ -1,4090 +0,0 @@
1
- import {
2
- init_esm_shims
3
- } from "../chunk-KBOB3H6E.mjs";
4
-
5
- // src/utils/worker.ts
6
- init_esm_shims();
7
- import { Generator as Generator2 } from "@pandacss/generator";
8
- import { runAsWorker } from "synckit";
9
-
10
- // ../fixture/src/index.ts
11
- init_esm_shims();
12
-
13
- // ../fixture/src/config.ts
14
- init_esm_shims();
15
-
16
- // ../node_modules/.pnpm/@pandacss+preset-base@0.40.1/node_modules/@pandacss/preset-base/dist/index.mjs
17
- init_esm_shims();
18
- var conditions = {
19
- hover: "&:is(:hover, [data-hover])",
20
- focus: "&:is(:focus, [data-focus])",
21
- focusWithin: "&:focus-within",
22
- focusVisible: "&:is(:focus-visible, [data-focus-visible])",
23
- disabled: "&:is(:disabled, [disabled], [data-disabled])",
24
- active: "&:is(:active, [data-active])",
25
- visited: "&:visited",
26
- target: "&:target",
27
- readOnly: "&:is(:read-only, [data-read-only])",
28
- readWrite: "&:read-write",
29
- empty: "&:is(:empty, [data-empty])",
30
- checked: '&:is(:checked, [data-checked], [aria-checked=true], [data-state="checked"])',
31
- enabled: "&:enabled",
32
- expanded: '&:is([aria-expanded=true], [data-expanded], [data-state="expanded"])',
33
- highlighted: "&[data-highlighted]",
34
- before: "&::before",
35
- after: "&::after",
36
- firstLetter: "&::first-letter",
37
- firstLine: "&::first-line",
38
- marker: "&::marker",
39
- selection: "&::selection",
40
- file: "&::file-selector-button",
41
- backdrop: "&::backdrop",
42
- first: "&:first-child",
43
- last: "&:last-child",
44
- only: "&:only-child",
45
- even: "&:nth-child(even)",
46
- odd: "&:nth-child(odd)",
47
- firstOfType: "&:first-of-type",
48
- lastOfType: "&:last-of-type",
49
- onlyOfType: "&:only-of-type",
50
- peerFocus: ".peer:is(:focus, [data-focus]) ~ &",
51
- peerHover: ".peer:is(:hover, [data-hover]) ~ &",
52
- peerActive: ".peer:is(:active, [data-active]) ~ &",
53
- peerFocusWithin: ".peer:focus-within ~ &",
54
- peerFocusVisible: ".peer:is(:focus-visible, [data-focus-visible]) ~ &",
55
- peerDisabled: ".peer:is(:disabled, [disabled], [data-disabled]) ~ &",
56
- peerChecked: '.peer:is(:checked, [data-checked], [aria-checked=true], [data-state="checked"]) ~ &',
57
- peerInvalid: ".peer:is(:invalid, [data-invalid], [aria-invalid=true]) ~ &",
58
- peerExpanded: '.peer:is([aria-expanded=true], [data-expanded], [data-state="expanded"]) ~ &',
59
- peerPlaceholderShown: ".peer:placeholder-shown ~ &",
60
- groupFocus: ".group:is(:focus, [data-focus]) &",
61
- groupHover: ".group:is(:hover, [data-hover]) &",
62
- groupActive: ".group:is(:active, [data-active]) &",
63
- groupFocusWithin: ".group:focus-within &",
64
- groupFocusVisible: ".group:is(:focus-visible, [data-focus-visible]) &",
65
- groupDisabled: ".group:is(:disabled, [disabled], [data-disabled]) &",
66
- groupChecked: '.group:is(:checked, [data-checked], [aria-checked=true], [data-state="checked"]) &',
67
- groupExpanded: '.group:is([aria-expanded=true], [data-expanded], [data-state="expanded"]) &',
68
- groupInvalid: ".group:invalid &",
69
- indeterminate: '&:is(:indeterminate, [data-indeterminate], [aria-checked=mixed], [data-state="indeterminate"])',
70
- required: "&:is(:required, [data-required], [aria-required=true])",
71
- valid: "&:is(:valid, [data-valid])",
72
- invalid: "&:is(:invalid, [data-invalid])",
73
- autofill: "&:autofill",
74
- inRange: "&:in-range",
75
- outOfRange: "&:out-of-range",
76
- placeholder: "&::placeholder, &[data-placeholder]",
77
- placeholderShown: "&:is(:placeholder-shown, [data-placeholder-shown])",
78
- pressed: "&:is([aria-pressed=true], [data-pressed])",
79
- selected: "&:is([aria-selected=true], [data-selected])",
80
- default: "&:default",
81
- optional: "&:optional",
82
- open: '&:is([open], [data-open], [data-state="open"])',
83
- closed: '&:is([closed], [data-closed], [data-state="closed"])',
84
- fullscreen: "&:fullscreen",
85
- loading: "&:is([data-loading], [aria-busy=true])",
86
- currentPage: "&[aria-current=page]",
87
- currentStep: "&[aria-current=step]",
88
- motionReduce: "@media (prefers-reduced-motion: reduce)",
89
- motionSafe: "@media (prefers-reduced-motion: no-preference)",
90
- print: "@media print",
91
- landscape: "@media (orientation: landscape)",
92
- portrait: "@media (orientation: portrait)",
93
- dark: ".dark &",
94
- light: ".light &",
95
- osDark: "@media (prefers-color-scheme: dark)",
96
- osLight: "@media (prefers-color-scheme: light)",
97
- highContrast: "@media (forced-colors: active)",
98
- lessContrast: "@media (prefers-contrast: less)",
99
- moreContrast: "@media (prefers-contrast: more)",
100
- ltr: "[dir=ltr] &",
101
- rtl: "[dir=rtl] &",
102
- scrollbar: "&::-webkit-scrollbar",
103
- scrollbarThumb: "&::-webkit-scrollbar-thumb",
104
- scrollbarTrack: "&::-webkit-scrollbar-track",
105
- horizontal: "&[data-orientation=horizontal]",
106
- vertical: "&[data-orientation=vertical]",
107
- starting: "@starting-style"
108
- };
109
- var EMPTY = "/*-*/ /*-*/";
110
- var globalCss = {
111
- "*, ::before, ::after, ::backdrop": {
112
- "--blur": EMPTY,
113
- "--brightness": EMPTY,
114
- "--contrast": EMPTY,
115
- "--grayscale": EMPTY,
116
- "--hue-rotate": EMPTY,
117
- "--invert": EMPTY,
118
- "--saturate": EMPTY,
119
- "--sepia": EMPTY,
120
- "--drop-shadow": EMPTY,
121
- "--backdrop-blur": EMPTY,
122
- "--backdrop-brightness": EMPTY,
123
- "--backdrop-contrast": EMPTY,
124
- "--backdrop-grayscale": EMPTY,
125
- "--backdrop-hue-rotate": EMPTY,
126
- "--backdrop-invert": EMPTY,
127
- "--backdrop-opacity": EMPTY,
128
- "--backdrop-saturate": EMPTY,
129
- "--backdrop-sepia": EMPTY,
130
- "--gradient-from-position": EMPTY,
131
- "--gradient-to-position": EMPTY,
132
- "--gradient-via-position": EMPTY,
133
- "--scroll-snap-strictness": "proximity",
134
- "--border-spacing-x": 0,
135
- "--border-spacing-y": 0,
136
- "--translate-x": 0,
137
- "--translate-y": 0,
138
- "--rotate": 0,
139
- "--rotate-x": 0,
140
- "--rotate-y": 0,
141
- "--skew-x": 0,
142
- "--skew-y": 0,
143
- "--scale-x": 1,
144
- "--scale-y": 1
145
- }
146
- };
147
- function definePattern(config2) {
148
- return config2;
149
- }
150
- var box = definePattern({
151
- transform(props) {
152
- return props;
153
- }
154
- });
155
- var flex = definePattern({
156
- properties: {
157
- align: { type: "property", value: "alignItems" },
158
- justify: { type: "property", value: "justifyContent" },
159
- direction: { type: "property", value: "flexDirection" },
160
- wrap: { type: "property", value: "flexWrap" },
161
- basis: { type: "property", value: "flexBasis" },
162
- grow: { type: "property", value: "flexGrow" },
163
- shrink: { type: "property", value: "flexShrink" }
164
- },
165
- transform(props) {
166
- const { direction, align, justify, wrap: wrap2, basis, grow, shrink, ...rest } = props;
167
- return {
168
- display: "flex",
169
- flexDirection: direction,
170
- alignItems: align,
171
- justifyContent: justify,
172
- flexWrap: wrap2,
173
- flexBasis: basis,
174
- flexGrow: grow,
175
- flexShrink: shrink,
176
- ...rest
177
- };
178
- }
179
- });
180
- var stack = definePattern({
181
- properties: {
182
- align: { type: "property", value: "alignItems" },
183
- justify: { type: "property", value: "justifyContent" },
184
- direction: { type: "property", value: "flexDirection" },
185
- gap: { type: "property", value: "gap" }
186
- },
187
- defaultValues: {
188
- direction: "column",
189
- gap: "10px"
190
- },
191
- transform(props) {
192
- const { align, justify, direction, gap, ...rest } = props;
193
- return {
194
- display: "flex",
195
- flexDirection: direction,
196
- alignItems: align,
197
- justifyContent: justify,
198
- gap,
199
- ...rest
200
- };
201
- }
202
- });
203
- var vstack = definePattern({
204
- jsxName: "VStack",
205
- properties: {
206
- justify: { type: "property", value: "justifyContent" },
207
- gap: { type: "property", value: "gap" }
208
- },
209
- defaultValues: {
210
- gap: "10px"
211
- },
212
- transform(props) {
213
- const { justify, gap, ...rest } = props;
214
- return {
215
- display: "flex",
216
- alignItems: "center",
217
- justifyContent: justify,
218
- gap,
219
- flexDirection: "column",
220
- ...rest
221
- };
222
- }
223
- });
224
- var hstack = definePattern({
225
- jsxName: "HStack",
226
- properties: {
227
- justify: { type: "property", value: "justifyContent" },
228
- gap: { type: "property", value: "gap" }
229
- },
230
- defaultValues: {
231
- gap: "10px"
232
- },
233
- transform(props) {
234
- const { justify, gap, ...rest } = props;
235
- return {
236
- display: "flex",
237
- alignItems: "center",
238
- justifyContent: justify,
239
- gap,
240
- flexDirection: "row",
241
- ...rest
242
- };
243
- }
244
- });
245
- var spacer = definePattern({
246
- properties: {
247
- size: { type: "token", value: "spacing" }
248
- },
249
- transform(props, { map }) {
250
- const { size, ...rest } = props;
251
- return {
252
- alignSelf: "stretch",
253
- justifySelf: "stretch",
254
- flex: map(size, (v) => v == null ? "1" : `0 0 ${v}`),
255
- ...rest
256
- };
257
- }
258
- });
259
- var circle = definePattern({
260
- properties: {
261
- size: { type: "property", value: "width" }
262
- },
263
- transform(props) {
264
- const { size, ...rest } = props;
265
- return {
266
- display: "flex",
267
- alignItems: "center",
268
- justifyContent: "center",
269
- flex: "0 0 auto",
270
- width: size,
271
- height: size,
272
- borderRadius: "9999px",
273
- ...rest
274
- };
275
- }
276
- });
277
- var square = definePattern({
278
- properties: {
279
- size: { type: "property", value: "width" }
280
- },
281
- transform(props) {
282
- const { size, ...rest } = props;
283
- return {
284
- display: "flex",
285
- alignItems: "center",
286
- justifyContent: "center",
287
- flex: "0 0 auto",
288
- width: size,
289
- height: size,
290
- ...rest
291
- };
292
- }
293
- });
294
- var grid = definePattern({
295
- properties: {
296
- gap: { type: "property", value: "gap" },
297
- columnGap: { type: "property", value: "gap" },
298
- rowGap: { type: "property", value: "gap" },
299
- columns: { type: "number" },
300
- minChildWidth: { type: "token", value: "sizes", property: "width" }
301
- },
302
- defaultValues(props) {
303
- return { gap: props.columnGap || props.rowGap ? void 0 : "10px" };
304
- },
305
- transform(props, { map, isCssUnit }) {
306
- const { columnGap, rowGap, gap, columns, minChildWidth, ...rest } = props;
307
- const getValue = (v) => isCssUnit(v) ? v : `token(sizes.${v}, ${v})`;
308
- return {
309
- display: "grid",
310
- gridTemplateColumns: columns != null ? map(columns, (v) => `repeat(${v}, minmax(0, 1fr))`) : minChildWidth != null ? map(minChildWidth, (v) => `repeat(auto-fit, minmax(${getValue(v)}, 1fr))`) : void 0,
311
- gap,
312
- columnGap,
313
- rowGap,
314
- ...rest
315
- };
316
- }
317
- });
318
- var gridItem = definePattern({
319
- properties: {
320
- colSpan: { type: "number" },
321
- rowSpan: { type: "number" },
322
- colStart: { type: "number" },
323
- rowStart: { type: "number" },
324
- colEnd: { type: "number" },
325
- rowEnd: { type: "number" }
326
- },
327
- transform(props, { map }) {
328
- const { colSpan, rowSpan, colStart, rowStart, colEnd, rowEnd, ...rest } = props;
329
- const spanFn = (v) => v === "auto" ? v : `span ${v}`;
330
- return {
331
- gridColumn: colSpan != null ? map(colSpan, spanFn) : void 0,
332
- gridRow: rowSpan != null ? map(rowSpan, spanFn) : void 0,
333
- gridColumnStart: colStart,
334
- gridColumnEnd: colEnd,
335
- gridRowStart: rowStart,
336
- gridRowEnd: rowEnd,
337
- ...rest
338
- };
339
- }
340
- });
341
- var wrap = definePattern({
342
- properties: {
343
- gap: { type: "property", value: "gap" },
344
- rowGap: { type: "property", value: "gap" },
345
- columnGap: { type: "property", value: "gap" },
346
- align: { type: "property", value: "alignItems" },
347
- justify: { type: "property", value: "justifyContent" }
348
- },
349
- transform(props) {
350
- const { columnGap, rowGap, gap = columnGap || rowGap ? void 0 : "10px", align, justify, ...rest } = props;
351
- return {
352
- display: "flex",
353
- flexWrap: "wrap",
354
- alignItems: align,
355
- justifyContent: justify,
356
- gap,
357
- columnGap,
358
- rowGap,
359
- ...rest
360
- };
361
- }
362
- });
363
- var container = definePattern({
364
- transform(props) {
365
- return {
366
- position: "relative",
367
- maxWidth: "8xl",
368
- mx: "auto",
369
- px: { base: "4", md: "6", lg: "8" },
370
- ...props
371
- };
372
- }
373
- });
374
- var center = definePattern({
375
- properties: {
376
- inline: { type: "boolean" }
377
- },
378
- transform(props) {
379
- const { inline, ...rest } = props;
380
- return {
381
- display: inline ? "inline-flex" : "flex",
382
- alignItems: "center",
383
- justifyContent: "center",
384
- ...rest
385
- };
386
- }
387
- });
388
- var aspectRatio = definePattern({
389
- properties: {
390
- ratio: { type: "number" }
391
- },
392
- blocklist: ["aspectRatio"],
393
- transform(props, { map }) {
394
- const { ratio = 4 / 3, ...rest } = props;
395
- return {
396
- position: "relative",
397
- _before: {
398
- content: `""`,
399
- display: "block",
400
- height: "0",
401
- paddingBottom: map(ratio, (r) => `${1 / r * 100}%`)
402
- },
403
- "&>*": {
404
- display: "flex",
405
- justifyContent: "center",
406
- alignItems: "center",
407
- overflow: "hidden",
408
- position: "absolute",
409
- inset: "0",
410
- width: "100%",
411
- height: "100%"
412
- },
413
- "&>img, &>video": {
414
- objectFit: "cover"
415
- },
416
- ...rest
417
- };
418
- }
419
- });
420
- var divider = definePattern({
421
- properties: {
422
- orientation: { type: "enum", value: ["horizontal", "vertical"] },
423
- thickness: { type: "token", value: "sizes", property: "borderWidth" },
424
- color: { type: "token", value: "colors", property: "borderColor" }
425
- },
426
- defaultValues: {
427
- orientation: "horizontal",
428
- thickness: "1px"
429
- },
430
- transform(props, { map }) {
431
- const { orientation, thickness, color, ...rest } = props;
432
- return {
433
- "--thickness": thickness,
434
- width: map(orientation, (v) => v === "vertical" ? void 0 : "100%"),
435
- height: map(orientation, (v) => v === "horizontal" ? void 0 : "100%"),
436
- borderBlockEndWidth: map(orientation, (v) => v === "horizontal" ? "var(--thickness)" : void 0),
437
- borderInlineEndWidth: map(orientation, (v) => v === "vertical" ? "var(--thickness)" : void 0),
438
- borderColor: color,
439
- ...rest
440
- };
441
- }
442
- });
443
- var linkOverlay = definePattern({
444
- jsxElement: "a",
445
- transform(props) {
446
- return {
447
- _before: {
448
- content: '""',
449
- position: "absolute",
450
- inset: "0",
451
- zIndex: "0",
452
- ...props["_before"]
453
- },
454
- ...props
455
- };
456
- }
457
- });
458
- var float = definePattern({
459
- properties: {
460
- offsetX: { type: "token", value: "spacing", property: "left" },
461
- offsetY: { type: "token", value: "spacing", property: "top" },
462
- offset: { type: "token", value: "spacing", property: "top" },
463
- placement: {
464
- type: "enum",
465
- value: [
466
- "bottom-end",
467
- "bottom-start",
468
- "top-end",
469
- "top-start",
470
- "bottom-center",
471
- "top-center",
472
- "middle-center",
473
- "middle-end",
474
- "middle-start"
475
- ]
476
- }
477
- },
478
- defaultValues(props) {
479
- const offset = props.offset || "0";
480
- return { offset, offsetX: offset, offsetY: offset, placement: "top-end" };
481
- },
482
- transform(props, { map }) {
483
- const { offset, offsetX, offsetY, placement, ...rest } = props;
484
- return {
485
- display: "inline-flex",
486
- justifyContent: "center",
487
- alignItems: "center",
488
- position: "absolute",
489
- insetBlockStart: map(placement, (v) => {
490
- const [side] = v.split("-");
491
- const map2 = { top: offsetY, middle: "50%", bottom: "auto" };
492
- return map2[side];
493
- }),
494
- insetBlockEnd: map(placement, (v) => {
495
- const [side] = v.split("-");
496
- const map2 = { top: "auto", middle: "50%", bottom: offsetY };
497
- return map2[side];
498
- }),
499
- insetInlineStart: map(placement, (v) => {
500
- const [, align] = v.split("-");
501
- const map2 = { start: offsetX, center: "50%", end: "auto" };
502
- return map2[align];
503
- }),
504
- insetInlineEnd: map(placement, (v) => {
505
- const [, align] = v.split("-");
506
- const map2 = { start: "auto", center: "50%", end: offsetX };
507
- return map2[align];
508
- }),
509
- translate: map(placement, (v) => {
510
- const [side, align] = v.split("-");
511
- const mapX = { start: "-50%", center: "-50%", end: "50%" };
512
- const mapY = { top: "-50%", middle: "-50%", bottom: "50%" };
513
- return `${mapX[align]} ${mapY[side]}`;
514
- }),
515
- ...rest
516
- };
517
- }
518
- });
519
- var bleed = definePattern({
520
- properties: {
521
- inline: { type: "property", value: "marginInline" },
522
- block: { type: "property", value: "marginBlock" }
523
- },
524
- defaultValues: {
525
- inline: "0",
526
- block: "0"
527
- },
528
- transform(props, { map, isCssUnit, isCssVar }) {
529
- const { inline, block, ...rest } = props;
530
- const valueFn = (v) => isCssUnit(v) || isCssVar(v) ? v : `token(spacing.${v}, ${v})`;
531
- return {
532
- "--bleed-x": map(inline, valueFn),
533
- "--bleed-y": map(block, valueFn),
534
- marginInline: "calc(var(--bleed-x, 0) * -1)",
535
- marginBlock: "calc(var(--bleed-y, 0) * -1)",
536
- ...rest
537
- };
538
- }
539
- });
540
- var visuallyHidden = definePattern({
541
- transform(props) {
542
- return {
543
- srOnly: true,
544
- ...props
545
- };
546
- }
547
- });
548
- var cq = definePattern({
549
- properties: {
550
- name: { type: "token", value: "containerNames", property: "containerName" },
551
- type: { type: "property", value: "containerType" }
552
- },
553
- defaultValues: {
554
- type: "inline-size"
555
- },
556
- transform(props) {
557
- const { name, type, ...rest } = props;
558
- return {
559
- containerType: type,
560
- containerName: name,
561
- ...rest
562
- };
563
- }
564
- });
565
- var patterns = {
566
- box,
567
- flex,
568
- stack,
569
- vstack,
570
- hstack,
571
- spacer,
572
- square,
573
- circle,
574
- center,
575
- linkOverlay,
576
- aspectRatio,
577
- grid,
578
- gridItem,
579
- wrap,
580
- container,
581
- divider,
582
- float,
583
- bleed,
584
- visuallyHidden,
585
- cq
586
- };
587
- var createColorMixTransform = (prop) => (value, args) => {
588
- const mix = args.utils.colorMix(value);
589
- if (mix.invalid)
590
- return { [prop]: value };
591
- const cssVar = "--mix-" + prop;
592
- return {
593
- [cssVar]: mix.value,
594
- [prop]: `var(${cssVar}, ${mix.color})`
595
- };
596
- };
597
- var background = {
598
- backgroundPosition: {
599
- shorthand: "bgPosition",
600
- className: "bg-pos",
601
- group: "Background"
602
- },
603
- backgroundPositionX: {
604
- shorthand: "bgPositionX",
605
- className: "bg-pos-x",
606
- group: "Background"
607
- },
608
- backgroundPositionY: {
609
- shorthand: "bgPositionY",
610
- className: "bg-pos-y",
611
- group: "Background"
612
- },
613
- backgroundAttachment: {
614
- shorthand: "bgAttachment",
615
- className: "bg-attach",
616
- group: "Background"
617
- },
618
- backgroundClip: {
619
- shorthand: "bgClip",
620
- className: "bg-clip",
621
- group: "Background",
622
- transform(value) {
623
- return {
624
- backgroundClip: value,
625
- WebkitBackgroundClip: value
626
- };
627
- }
628
- },
629
- background: {
630
- shorthand: "bg",
631
- className: "bg",
632
- values: "colors",
633
- group: "Background",
634
- transform: createColorMixTransform("background")
635
- },
636
- backgroundColor: {
637
- shorthand: "bgColor",
638
- className: "bg",
639
- values: "colors",
640
- group: "Background",
641
- transform: createColorMixTransform("backgroundColor")
642
- },
643
- backgroundOrigin: {
644
- shorthand: "bgOrigin",
645
- className: "bg-origin",
646
- group: "Background"
647
- },
648
- backgroundImage: {
649
- shorthand: "bgImage",
650
- className: "bg-img",
651
- values: "assets",
652
- group: "Background"
653
- },
654
- backgroundRepeat: {
655
- shorthand: "bgRepeat",
656
- className: "bg-repeat",
657
- group: "Background"
658
- },
659
- backgroundBlendMode: {
660
- shorthand: "bgBlendMode",
661
- className: "bg-blend",
662
- group: "Background"
663
- },
664
- backgroundSize: {
665
- shorthand: "bgSize",
666
- className: "bg-size",
667
- group: "Background"
668
- }
669
- };
670
- var border = {
671
- borderRadius: {
672
- className: "rounded",
673
- shorthand: "rounded",
674
- values: "radii",
675
- group: "Border Radius"
676
- },
677
- borderTopLeftRadius: {
678
- className: "rounded-tl",
679
- shorthand: "roundedTopLeft",
680
- values: "radii",
681
- group: "Border Radius"
682
- },
683
- borderTopRightRadius: {
684
- className: "rounded-tr",
685
- shorthand: "roundedTopRight",
686
- values: "radii",
687
- group: "Border Radius"
688
- },
689
- borderBottomRightRadius: {
690
- className: "rounded-br",
691
- shorthand: "roundedBottomRight",
692
- values: "radii",
693
- group: "Border Radius"
694
- },
695
- borderBottomLeftRadius: {
696
- className: "rounded-bl",
697
- shorthand: "roundedBottomLeft",
698
- values: "radii",
699
- group: "Border Radius"
700
- },
701
- borderTopRadius: {
702
- className: "rounded-t",
703
- shorthand: "roundedTop",
704
- property: "borderRadius",
705
- values: "radii",
706
- group: "Border Radius",
707
- transform(value) {
708
- return {
709
- borderTopLeftRadius: value,
710
- borderTopRightRadius: value
711
- };
712
- }
713
- },
714
- borderRightRadius: {
715
- className: "rounded-r",
716
- shorthand: "roundedRight",
717
- property: "borderRadius",
718
- values: "radii",
719
- group: "Border Radius",
720
- transform(value) {
721
- return {
722
- borderTopRightRadius: value,
723
- borderBottomRightRadius: value
724
- };
725
- }
726
- },
727
- borderBottomRadius: {
728
- className: "rounded-b",
729
- shorthand: "roundedBottom",
730
- property: "borderRadius",
731
- values: "radii",
732
- group: "Border Radius",
733
- transform(value) {
734
- return {
735
- borderBottomLeftRadius: value,
736
- borderBottomRightRadius: value
737
- };
738
- }
739
- },
740
- borderLeftRadius: {
741
- className: "rounded-l",
742
- shorthand: "roundedLeft",
743
- values: "radii",
744
- property: "borderRadius",
745
- group: "Border Radius",
746
- transform(value) {
747
- return {
748
- borderTopLeftRadius: value,
749
- borderBottomLeftRadius: value
750
- };
751
- }
752
- },
753
- borderStartStartRadius: {
754
- className: "rounded-ss",
755
- shorthand: "roundedStartStart",
756
- values: "radii",
757
- group: "Border Radius"
758
- },
759
- borderStartEndRadius: {
760
- className: "rounded-se",
761
- shorthand: "roundedStartEnd",
762
- values: "radii",
763
- group: "Border Radius"
764
- },
765
- borderStartRadius: {
766
- className: "rounded-s",
767
- values: "radii",
768
- property: "borderRadius",
769
- shorthand: "roundedStart",
770
- group: "Border Radius",
771
- transform(value) {
772
- return {
773
- borderStartStartRadius: value,
774
- borderEndStartRadius: value
775
- };
776
- }
777
- },
778
- borderEndStartRadius: {
779
- className: "rounded-es",
780
- shorthand: "roundedEndStart",
781
- values: "radii",
782
- group: "Border Radius"
783
- },
784
- borderEndEndRadius: {
785
- className: "rounded-ee",
786
- shorthand: "roundedEndEnd",
787
- values: "radii",
788
- group: "Border Radius"
789
- },
790
- borderEndRadius: {
791
- className: "rounded-e",
792
- shorthand: "roundedEnd",
793
- property: "borderRadius",
794
- values: "radii",
795
- group: "Border Radius",
796
- transform(value) {
797
- return {
798
- borderStartEndRadius: value,
799
- borderEndEndRadius: value
800
- };
801
- }
802
- },
803
- border: {
804
- className: "border",
805
- values: "borders",
806
- group: "Border"
807
- },
808
- borderWidth: {
809
- className: "border-w",
810
- values: "borderWidths",
811
- group: "Border Radius"
812
- },
813
- borderTopWidth: {
814
- className: "border-tw",
815
- values: "borderWidths",
816
- group: "Border"
817
- },
818
- borderLeftWidth: {
819
- className: "border-lw",
820
- values: "borderWidths",
821
- group: "Border"
822
- },
823
- borderRightWidth: {
824
- className: "border-rw",
825
- values: "borderWidths",
826
- group: "Border"
827
- },
828
- borderBottomWidth: {
829
- className: "border-bw",
830
- values: "borderWidths",
831
- group: "Border"
832
- },
833
- borderColor: {
834
- className: "border",
835
- values: "colors",
836
- group: "Border",
837
- transform: createColorMixTransform("borderColor")
838
- },
839
- borderInline: {
840
- className: "border-x",
841
- values: "borders",
842
- group: "Border",
843
- shorthand: "borderX"
844
- },
845
- borderInlineWidth: {
846
- className: "border-x",
847
- values: "borderWidths",
848
- group: "Border",
849
- shorthand: "borderXWidth"
850
- },
851
- borderInlineColor: {
852
- className: "border-x",
853
- values: "colors",
854
- group: "Border",
855
- shorthand: "borderXColor",
856
- transform: createColorMixTransform("borderInlineColor")
857
- },
858
- borderBlock: {
859
- className: "border-y",
860
- values: "borders",
861
- group: "Border",
862
- shorthand: "borderY"
863
- },
864
- borderBlockWidth: {
865
- className: "border-y",
866
- values: "borderWidths",
867
- group: "Border",
868
- shorthand: "borderYWidth"
869
- },
870
- borderBlockColor: {
871
- className: "border-y",
872
- values: "colors",
873
- group: "Border",
874
- shorthand: "borderYColor",
875
- transform: createColorMixTransform("borderBlockColor")
876
- },
877
- borderLeft: {
878
- className: "border-l",
879
- values: "borders",
880
- group: "Border"
881
- },
882
- borderLeftColor: {
883
- className: "border-l",
884
- values: "colors",
885
- group: "Border",
886
- transform: createColorMixTransform("borderLeftColor")
887
- },
888
- borderInlineStart: {
889
- className: "border-s",
890
- values: "borders",
891
- group: "Border",
892
- shorthand: "borderStart"
893
- },
894
- borderInlineStartWidth: {
895
- className: "border-s",
896
- values: "borderWidths",
897
- group: "Border",
898
- shorthand: "borderStartWidth"
899
- },
900
- borderInlineStartColor: {
901
- className: "border-s",
902
- values: "colors",
903
- group: "Border",
904
- shorthand: "borderStartColor",
905
- transform: createColorMixTransform("borderInlineStartColor")
906
- },
907
- borderRight: {
908
- className: "border-r",
909
- values: "borders",
910
- group: "Border"
911
- },
912
- borderRightColor: {
913
- className: "border-r",
914
- values: "colors",
915
- group: "Border",
916
- transform: createColorMixTransform("borderRightColor")
917
- },
918
- borderInlineEnd: {
919
- className: "border-e",
920
- values: "borders",
921
- group: "Border",
922
- shorthand: "borderEnd"
923
- },
924
- borderInlineEndWidth: {
925
- className: "border-e",
926
- values: "borderWidths",
927
- group: "Border",
928
- shorthand: "borderEndWidth"
929
- },
930
- borderInlineEndColor: {
931
- className: "border-e",
932
- values: "colors",
933
- group: "Border",
934
- shorthand: "borderEndColor",
935
- transform: createColorMixTransform("borderInlineEndColor")
936
- },
937
- borderTop: {
938
- className: "border-t",
939
- values: "borders",
940
- group: "Border"
941
- },
942
- borderTopColor: {
943
- className: "border-t",
944
- values: "colors",
945
- group: "Border",
946
- transform: createColorMixTransform("borderTopColor")
947
- },
948
- borderBottom: {
949
- className: "border-b",
950
- values: "borders",
951
- group: "Border"
952
- },
953
- borderBottomColor: {
954
- className: "border-b",
955
- values: "colors",
956
- group: "Border",
957
- transform: createColorMixTransform("borderBottomColor")
958
- },
959
- borderBlockEnd: {
960
- className: "border-be",
961
- values: "borders",
962
- group: "Border"
963
- },
964
- borderBlockEndColor: {
965
- className: "border-be",
966
- values: "colors",
967
- group: "Border",
968
- transform: createColorMixTransform("borderBlockEndColor")
969
- },
970
- borderBlockStart: {
971
- className: "border-bs",
972
- values: "borders",
973
- group: "Border"
974
- },
975
- borderBlockStartColor: {
976
- className: "border-bs",
977
- values: "colors",
978
- group: "Border",
979
- transform: createColorMixTransform("borderBlockStartColor")
980
- }
981
- };
982
- var container2 = {
983
- container: {
984
- className: "cq",
985
- group: "Container"
986
- },
987
- containerName: {
988
- className: "cq-name",
989
- property: "containerName",
990
- values: "containerNames",
991
- group: "Container"
992
- },
993
- containerType: {
994
- className: "cq-type",
995
- group: "Container"
996
- }
997
- };
998
- var display = {
999
- display: {
1000
- className: "d",
1001
- group: "Display"
1002
- },
1003
- hideFrom: {
1004
- className: "hide",
1005
- values: "breakpoints",
1006
- group: "Display",
1007
- transform(value, { raw, token }) {
1008
- const bp = token.raw(`breakpoints.${raw}`);
1009
- const media = bp ? `@breakpoint ${raw}` : `@media screen and (min-width: ${value})`;
1010
- return {
1011
- [media]: {
1012
- display: "none"
1013
- }
1014
- };
1015
- }
1016
- },
1017
- hideBelow: {
1018
- className: "show",
1019
- values: "breakpoints",
1020
- group: "Display",
1021
- transform(value, { raw, token }) {
1022
- const bp = token.raw(`breakpoints.${raw}`);
1023
- const media = bp ? `@breakpoint ${raw}Down` : `@media screen and (max-width: ${value})`;
1024
- return {
1025
- [media]: {
1026
- display: "none"
1027
- }
1028
- };
1029
- }
1030
- }
1031
- };
1032
- var divideColor = createColorMixTransform("borderColor");
1033
- var divide = {
1034
- divideX: {
1035
- className: "divide-x",
1036
- values: "borderWidths",
1037
- group: "Border",
1038
- transform(value) {
1039
- return {
1040
- "& > :not([hidden]) ~ :not([hidden])": {
1041
- borderInlineStartWidth: value,
1042
- borderInlineEndWidth: "0px"
1043
- }
1044
- };
1045
- }
1046
- },
1047
- divideY: {
1048
- className: "divide-y",
1049
- values: "borderWidths",
1050
- group: "Border",
1051
- transform(value) {
1052
- return {
1053
- "& > :not([hidden]) ~ :not([hidden])": {
1054
- borderTopWidth: value,
1055
- borderBottomWidth: "0px"
1056
- }
1057
- };
1058
- }
1059
- },
1060
- divideColor: {
1061
- className: "divide-color",
1062
- values: "colors",
1063
- group: "Border",
1064
- transform(value, args) {
1065
- return {
1066
- "& > :not([hidden]) ~ :not([hidden])": divideColor(value, args)
1067
- };
1068
- }
1069
- },
1070
- divideStyle: {
1071
- className: "divide-style",
1072
- property: "borderStyle",
1073
- group: "Border",
1074
- transform(value) {
1075
- return {
1076
- "& > :not([hidden]) ~ :not([hidden])": {
1077
- borderStyle: value
1078
- }
1079
- };
1080
- }
1081
- }
1082
- };
1083
- var effects = {
1084
- opacity: {
1085
- values: "opacity",
1086
- group: "Background"
1087
- },
1088
- boxShadow: {
1089
- shorthand: "shadow",
1090
- className: "shadow",
1091
- values: "shadows",
1092
- group: "Shadow"
1093
- },
1094
- boxShadowColor: {
1095
- shorthand: "shadowColor",
1096
- className: "shadow-color",
1097
- values: "colors",
1098
- transform: createColorMixTransform("--shadow-color"),
1099
- group: "Color"
1100
- },
1101
- mixBlendMode: {
1102
- className: "mix-blend",
1103
- group: "Effect"
1104
- },
1105
- filter: {
1106
- className: "filter",
1107
- group: "Effect",
1108
- values: {
1109
- auto: "var(--blur, ) var(--brightness, ) var(--contrast, ) var(--grayscale, ) var(--hue-rotate, ) var(--invert, ) var(--saturate, ) var(--sepia, ) var(--drop-shadow, )"
1110
- }
1111
- },
1112
- brightness: {
1113
- className: "brightness",
1114
- group: "Effect",
1115
- transform(value) {
1116
- return {
1117
- "--brightness": `brightness(${value})`
1118
- };
1119
- }
1120
- },
1121
- contrast: {
1122
- className: "contrast",
1123
- group: "Effect",
1124
- transform(value) {
1125
- return {
1126
- "--contrast": `contrast(${value})`
1127
- };
1128
- }
1129
- },
1130
- grayscale: {
1131
- className: "grayscale",
1132
- group: "Effect",
1133
- transform(value) {
1134
- return {
1135
- "--grayscale": `grayscale(${value})`
1136
- };
1137
- }
1138
- },
1139
- hueRotate: {
1140
- className: "hue-rotate",
1141
- group: "Effect",
1142
- transform(value) {
1143
- return {
1144
- "--hue-rotate": `hue-rotate(${value})`
1145
- };
1146
- }
1147
- },
1148
- invert: {
1149
- className: "invert",
1150
- group: "Effect",
1151
- transform(value) {
1152
- return {
1153
- "--invert": `invert(${value})`
1154
- };
1155
- }
1156
- },
1157
- saturate: {
1158
- className: "saturate",
1159
- group: "Effect",
1160
- transform(value) {
1161
- return {
1162
- "--saturate": `saturate(${value})`
1163
- };
1164
- }
1165
- },
1166
- sepia: {
1167
- className: "sepia",
1168
- group: "Effect",
1169
- transform(value) {
1170
- return {
1171
- "--sepia": `sepia(${value})`
1172
- };
1173
- }
1174
- },
1175
- dropShadow: {
1176
- className: "drop-shadow",
1177
- group: "Effect",
1178
- values: "dropShadows",
1179
- transform(value) {
1180
- return {
1181
- "--drop-shadow": value
1182
- };
1183
- }
1184
- },
1185
- blur: {
1186
- className: "blur",
1187
- group: "Effect",
1188
- values: "blurs",
1189
- transform(value) {
1190
- return {
1191
- "--blur": `blur(${value})`
1192
- };
1193
- }
1194
- },
1195
- backdropFilter: {
1196
- className: "backdrop",
1197
- group: "Effect",
1198
- values: {
1199
- auto: "var(--backdrop-blur, ) var(--backdrop-brightness, ) var(--backdrop-contrast, ) var(--backdrop-grayscale, ) var(--backdrop-hue-rotate, ) var(--backdrop-invert, ) var(--backdrop-opacity, ) var(--backdrop-saturate, ) var(--backdrop-sepia, )"
1200
- },
1201
- transform(value) {
1202
- return {
1203
- backdropFilter: value,
1204
- WebkitBackdropFilter: value
1205
- };
1206
- }
1207
- },
1208
- backdropBlur: {
1209
- className: "backdrop-blur",
1210
- group: "Effect",
1211
- values: "blurs",
1212
- transform(value) {
1213
- return {
1214
- "--backdrop-blur": `blur(${value})`
1215
- };
1216
- }
1217
- },
1218
- backdropBrightness: {
1219
- className: "backdrop-brightness",
1220
- group: "Effect",
1221
- transform(value) {
1222
- return {
1223
- "--backdrop-brightness": `brightness(${value})`
1224
- };
1225
- }
1226
- },
1227
- backdropContrast: {
1228
- className: "backdrop-contrast",
1229
- group: "Effect",
1230
- transform(value) {
1231
- return {
1232
- "--backdrop-contrast": `contrast(${value})`
1233
- };
1234
- }
1235
- },
1236
- backdropGrayscale: {
1237
- className: "backdrop-grayscale",
1238
- group: "Effect",
1239
- transform(value) {
1240
- return {
1241
- "--backdrop-grayscale": `grayscale(${value})`
1242
- };
1243
- }
1244
- },
1245
- backdropHueRotate: {
1246
- className: "backdrop-hue-rotate",
1247
- group: "Effect",
1248
- transform(value) {
1249
- return {
1250
- "--backdrop-hue-rotate": `hue-rotate(${value})`
1251
- };
1252
- }
1253
- },
1254
- backdropInvert: {
1255
- className: "backdrop-invert",
1256
- group: "Effect",
1257
- transform(value) {
1258
- return {
1259
- "--backdrop-invert": `invert(${value})`
1260
- };
1261
- }
1262
- },
1263
- backdropOpacity: {
1264
- className: "backdrop-opacity",
1265
- group: "Effect",
1266
- transform(value) {
1267
- return {
1268
- "--backdrop-opacity": value
1269
- };
1270
- }
1271
- },
1272
- backdropSaturate: {
1273
- className: "backdrop-saturate",
1274
- group: "Effect",
1275
- transform(value) {
1276
- return {
1277
- "--backdrop-saturate": `saturate(${value})`
1278
- };
1279
- }
1280
- },
1281
- backdropSepia: {
1282
- className: "backdrop-sepia",
1283
- group: "Effect",
1284
- transform(value) {
1285
- return {
1286
- "--backdrop-sepia": `sepia(${value})`
1287
- };
1288
- }
1289
- }
1290
- };
1291
- var flexGrid = {
1292
- flexBasis: {
1293
- className: "basis",
1294
- group: "Flex Layout",
1295
- values(theme2) {
1296
- return {
1297
- ...theme2("spacing"),
1298
- "1/2": "50%",
1299
- "1/3": "33.333333%",
1300
- "2/3": "66.666667%",
1301
- "1/4": "25%",
1302
- "2/4": "50%",
1303
- "3/4": "75%",
1304
- "1/5": "20%",
1305
- "2/5": "40%",
1306
- "3/5": "60%",
1307
- "4/5": "80%",
1308
- "1/6": "16.666667%",
1309
- "2/6": "33.333333%",
1310
- "3/6": "50%",
1311
- "4/6": "66.666667%",
1312
- "5/6": "83.333333%",
1313
- "1/12": "8.333333%",
1314
- "2/12": "16.666667%",
1315
- "3/12": "25%",
1316
- "4/12": "33.333333%",
1317
- "5/12": "41.666667%",
1318
- "6/12": "50%",
1319
- "7/12": "58.333333%",
1320
- "8/12": "66.666667%",
1321
- "9/12": "75%",
1322
- "10/12": "83.333333%",
1323
- "11/12": "91.666667%",
1324
- full: "100%"
1325
- };
1326
- }
1327
- },
1328
- flex: {
1329
- className: "flex",
1330
- group: "Flex Layout",
1331
- values: {
1332
- "1": "1 1 0%",
1333
- auto: "1 1 auto",
1334
- initial: "0 1 auto",
1335
- none: "none"
1336
- }
1337
- },
1338
- flexDirection: {
1339
- className: "flex",
1340
- group: "Flex Layout",
1341
- shorthand: "flexDir"
1342
- },
1343
- flexGrow: {
1344
- className: "grow",
1345
- group: "Flex Layout"
1346
- },
1347
- flexShrink: {
1348
- className: "shrink",
1349
- group: "Flex Layout"
1350
- },
1351
- gridTemplateColumns: {
1352
- className: "grid-cols",
1353
- group: "Grid Layout",
1354
- values: {
1355
- "1": "repeat(1, minmax(0, 1fr))",
1356
- "2": "repeat(2, minmax(0, 1fr))",
1357
- "3": "repeat(3, minmax(0, 1fr))",
1358
- "4": "repeat(4, minmax(0, 1fr))",
1359
- "5": "repeat(5, minmax(0, 1fr))",
1360
- "6": "repeat(6, minmax(0, 1fr))",
1361
- "7": "repeat(7, minmax(0, 1fr))",
1362
- "8": "repeat(8, minmax(0, 1fr))",
1363
- "9": "repeat(9, minmax(0, 1fr))",
1364
- "10": "repeat(10, minmax(0, 1fr))",
1365
- "11": "repeat(11, minmax(0, 1fr))",
1366
- "12": "repeat(12, minmax(0, 1fr))"
1367
- }
1368
- },
1369
- gridTemplateRows: {
1370
- className: "grid-rows",
1371
- group: "Grid Layout",
1372
- values: {
1373
- "1": "repeat(1, minmax(0, 1fr))",
1374
- "2": "repeat(2, minmax(0, 1fr))",
1375
- "3": "repeat(3, minmax(0, 1fr))",
1376
- "4": "repeat(4, minmax(0, 1fr))",
1377
- "5": "repeat(5, minmax(0, 1fr))",
1378
- "6": "repeat(6, minmax(0, 1fr))",
1379
- "7": "repeat(7, minmax(0, 1fr))",
1380
- "8": "repeat(8, minmax(0, 1fr))",
1381
- "9": "repeat(9, minmax(0, 1fr))",
1382
- "10": "repeat(10, minmax(0, 1fr))",
1383
- "11": "repeat(11, minmax(0, 1fr))",
1384
- "12": "repeat(12, minmax(0, 1fr))"
1385
- }
1386
- },
1387
- gridColumn: {
1388
- className: "col-span",
1389
- group: "Grid Layout",
1390
- values: {
1391
- full: "1 / -1",
1392
- "1": "span 1 / span 1",
1393
- "2": "span 2 / span 2",
1394
- "3": "span 3 / span 3",
1395
- "4": "span 4 / span 4",
1396
- "5": "span 5 / span 5",
1397
- "6": "span 6 / span 6",
1398
- "7": "span 7 / span 7",
1399
- "8": "span 8 / span 8",
1400
- "9": "span 9 / span 9",
1401
- "10": "span 10 / span 10",
1402
- "11": "span 11 / span 11",
1403
- "12": "span 12 / span 12"
1404
- }
1405
- },
1406
- gridRow: {
1407
- className: "row-span",
1408
- group: "Grid Layout",
1409
- values: {
1410
- full: "1 / -1",
1411
- "1": "span 1 / span 1",
1412
- "2": "span 2 / span 2",
1413
- "3": "span 3 / span 3",
1414
- "4": "span 4 / span 4",
1415
- "5": "span 5 / span 5",
1416
- "6": "span 6 / span 6",
1417
- "7": "span 7 / span 7",
1418
- "8": "span 8 / span 8",
1419
- "9": "span 9 / span 9",
1420
- "10": "span 10 / span 10",
1421
- "11": "span 11 / span 11",
1422
- "12": "span 12 / span 12"
1423
- }
1424
- },
1425
- gridColumnStart: {
1426
- className: "col-start",
1427
- group: "Grid Layout"
1428
- },
1429
- gridColumnEnd: {
1430
- className: "col-end",
1431
- group: "Grid Layout"
1432
- },
1433
- gridAutoFlow: {
1434
- className: "grid-flow",
1435
- group: "Grid Layout"
1436
- },
1437
- gridAutoColumns: {
1438
- className: "auto-cols",
1439
- group: "Grid Layout",
1440
- values: {
1441
- min: "min-content",
1442
- max: "max-content",
1443
- fr: "minmax(0, 1fr)"
1444
- }
1445
- },
1446
- gridAutoRows: {
1447
- className: "auto-rows",
1448
- group: "Grid Layout",
1449
- values: {
1450
- min: "min-content",
1451
- max: "max-content",
1452
- fr: "minmax(0, 1fr)"
1453
- }
1454
- },
1455
- gap: {
1456
- className: "gap",
1457
- group: "Flex Layout",
1458
- values: "spacing"
1459
- },
1460
- gridGap: {
1461
- className: "gap",
1462
- group: "Grid Layout",
1463
- values: "spacing"
1464
- },
1465
- gridRowGap: {
1466
- className: "gap-x",
1467
- group: "Grid Layout",
1468
- values: "spacing"
1469
- },
1470
- gridColumnGap: {
1471
- className: "gap-y",
1472
- group: "Grid Layout",
1473
- values: "spacing"
1474
- },
1475
- rowGap: {
1476
- className: "gap-x",
1477
- group: "Grid Layout",
1478
- values: "spacing"
1479
- },
1480
- columnGap: {
1481
- className: "gap-y",
1482
- group: "Grid Layout",
1483
- values: "spacing"
1484
- },
1485
- justifyContent: {
1486
- className: "justify",
1487
- group: "Flex Layout"
1488
- },
1489
- alignContent: {
1490
- className: "content",
1491
- group: "Flex Layout"
1492
- },
1493
- alignItems: {
1494
- className: "items",
1495
- group: "Flex Layout"
1496
- },
1497
- alignSelf: {
1498
- className: "self",
1499
- group: "Flex Layout"
1500
- }
1501
- };
1502
- var gradientVia = createColorMixTransform("--gradient-via");
1503
- var gradientTemplate = {
1504
- "to-t": "linear-gradient(to top, var(--gradient))",
1505
- "to-tr": "linear-gradient(to top right, var(--gradient))",
1506
- "to-r": "linear-gradient(to right, var(--gradient))",
1507
- "to-br": "linear-gradient(to bottom right, var(--gradient))",
1508
- "to-b": "linear-gradient(to bottom, var(--gradient))",
1509
- "to-bl": "linear-gradient(to bottom left, var(--gradient))",
1510
- "to-l": "linear-gradient(to left, var(--gradient))",
1511
- "to-tl": "linear-gradient(to top left, var(--gradient))"
1512
- };
1513
- var gradientVars = {
1514
- "--gradient-stops": "var(--gradient-via-stops, var(--gradient-from) var(--gradient-from-position), var(--gradient-to) var(--gradient-to-position))",
1515
- "--gradient": "var(--gradient-via-stops, var(--gradient-stops))"
1516
- };
1517
- var backgroundGradients = {
1518
- backgroundGradient: {
1519
- shorthand: "bgGradient",
1520
- className: "bg-gradient",
1521
- group: "Background Gradient",
1522
- values(theme2) {
1523
- return {
1524
- ...theme2("gradients"),
1525
- ...gradientTemplate
1526
- };
1527
- },
1528
- transform(value) {
1529
- return {
1530
- ...gradientVars,
1531
- backgroundImage: value
1532
- };
1533
- }
1534
- },
1535
- textGradient: {
1536
- className: "text-gradient",
1537
- group: "Background Gradient",
1538
- values(theme2) {
1539
- return {
1540
- ...theme2("gradients"),
1541
- ...gradientTemplate
1542
- };
1543
- },
1544
- transform(value) {
1545
- return {
1546
- ...gradientVars,
1547
- backgroundImage: value,
1548
- WebkitBackgroundClip: "text",
1549
- color: "transparent"
1550
- };
1551
- }
1552
- },
1553
- gradientFromPosition: {
1554
- className: "gradient-from-pos",
1555
- group: "Background Gradient",
1556
- transform(value) {
1557
- return {
1558
- "--gradient-from-position": value
1559
- };
1560
- }
1561
- },
1562
- gradientToPosition: {
1563
- className: "gradient-to-pos",
1564
- group: "Background Gradient",
1565
- transform(value) {
1566
- return {
1567
- "--gradient-to-position": value
1568
- };
1569
- }
1570
- },
1571
- gradientFrom: {
1572
- className: "gradient-from",
1573
- values: "colors",
1574
- group: "Background Gradient",
1575
- transform: createColorMixTransform("--gradient-from")
1576
- },
1577
- gradientTo: {
1578
- className: "gradient-to",
1579
- values: "colors",
1580
- group: "Background Gradient",
1581
- transform: createColorMixTransform("--gradient-to")
1582
- },
1583
- gradientVia: {
1584
- className: "gradient-via",
1585
- values: "colors",
1586
- group: "Background Gradient",
1587
- transform(value, args) {
1588
- const transformed = gradientVia(value, args);
1589
- return {
1590
- ...transformed,
1591
- "--gradient-stops": "var(--gradient-from) var(--gradient-from-position), var(--gradient-via) var(--gradient-via-position), var(--gradient-to) var(--gradient-to-position)"
1592
- };
1593
- }
1594
- },
1595
- gradientViaPosition: {
1596
- className: "gradient-via-pos",
1597
- group: "Background Gradient",
1598
- transform(value) {
1599
- return {
1600
- "--gradient-via-position": value
1601
- };
1602
- }
1603
- }
1604
- };
1605
- var srMapping = {
1606
- true: {
1607
- position: "absolute",
1608
- width: "1px",
1609
- height: "1px",
1610
- padding: "0",
1611
- margin: "-1px",
1612
- overflow: "hidden",
1613
- clip: "rect(0, 0, 0, 0)",
1614
- whiteSpace: "nowrap",
1615
- borderWidth: "0"
1616
- },
1617
- false: {
1618
- position: "static",
1619
- width: "auto",
1620
- height: "auto",
1621
- padding: "0",
1622
- margin: "0",
1623
- overflow: "visible",
1624
- clip: "auto",
1625
- whiteSpace: "normal"
1626
- }
1627
- };
1628
- var helpers = {
1629
- srOnly: {
1630
- className: "sr",
1631
- values: { type: "boolean" },
1632
- group: "Other",
1633
- transform(value) {
1634
- return srMapping[value] || {};
1635
- }
1636
- },
1637
- debug: {
1638
- className: "debug",
1639
- values: { type: "boolean" },
1640
- group: "Other",
1641
- transform(value) {
1642
- if (!value)
1643
- return {};
1644
- return {
1645
- outline: "1px solid blue !important",
1646
- "&>*": {
1647
- outline: "1px solid red !important"
1648
- }
1649
- };
1650
- }
1651
- }
1652
- };
1653
- var interactivity = {
1654
- accentColor: {
1655
- className: "accent",
1656
- values: "colors",
1657
- transform: createColorMixTransform("accentColor"),
1658
- group: "Color"
1659
- },
1660
- caretColor: {
1661
- className: "caret",
1662
- values: "colors",
1663
- group: "Color",
1664
- transform: createColorMixTransform("caretColor")
1665
- },
1666
- scrollBehavior: {
1667
- className: "scroll",
1668
- group: "Scroll"
1669
- },
1670
- scrollbar: {
1671
- className: "scrollbar",
1672
- values: ["visible", "hidden"],
1673
- group: "Scroll",
1674
- transform(value) {
1675
- if (value === "visible") {
1676
- return {
1677
- msOverflowStyle: "auto",
1678
- scrollbarWidth: "auto",
1679
- "&::-webkit-scrollbar": {
1680
- display: "block"
1681
- }
1682
- };
1683
- }
1684
- if (value === "hidden") {
1685
- return {
1686
- msOverflowStyle: "none",
1687
- scrollbarWidth: "none",
1688
- "&::-webkit-scrollbar": {
1689
- display: "none"
1690
- }
1691
- };
1692
- }
1693
- }
1694
- },
1695
- scrollMargin: {
1696
- className: "scroll-m",
1697
- values: "spacing",
1698
- group: "Scroll"
1699
- },
1700
- scrollMarginLeft: {
1701
- className: "scroll-ml",
1702
- values: "spacing",
1703
- group: "Scroll"
1704
- },
1705
- scrollMarginRight: {
1706
- className: "scroll-mr",
1707
- values: "spacing",
1708
- group: "Scroll"
1709
- },
1710
- scrollMarginTop: {
1711
- className: "scroll-mt",
1712
- values: "spacing",
1713
- group: "Scroll"
1714
- },
1715
- scrollMarginBottom: {
1716
- className: "scroll-mb",
1717
- values: "spacing",
1718
- group: "Scroll"
1719
- },
1720
- scrollMarginBlock: {
1721
- className: "scroll-my",
1722
- values: "spacing",
1723
- group: "Scroll",
1724
- shorthand: ["scrollMarginY"]
1725
- },
1726
- scrollMarginBlockEnd: {
1727
- className: "scroll-mb",
1728
- values: "spacing",
1729
- group: "Scroll"
1730
- },
1731
- scrollMarginBlockStart: {
1732
- className: "scroll-mt",
1733
- values: "spacing",
1734
- group: "Scroll"
1735
- },
1736
- scrollMarginInline: {
1737
- className: "scroll-mx",
1738
- values: "spacing",
1739
- group: "Scroll",
1740
- shorthand: ["scrollMarginX"]
1741
- },
1742
- scrollMarginInlineEnd: {
1743
- className: "scroll-me",
1744
- values: "spacing",
1745
- group: "Scroll"
1746
- },
1747
- scrollMarginInlineStart: {
1748
- className: "scroll-ms",
1749
- values: "spacing",
1750
- group: "Scroll"
1751
- },
1752
- scrollPadding: {
1753
- className: "scroll-p",
1754
- values: "spacing",
1755
- group: "Scroll"
1756
- },
1757
- scrollPaddingBlock: {
1758
- className: "scroll-pb",
1759
- values: "spacing",
1760
- group: "Scroll",
1761
- shorthand: ["scrollPaddingY"]
1762
- },
1763
- scrollPaddingBlockStart: {
1764
- className: "scroll-pt",
1765
- values: "spacing",
1766
- group: "Scroll"
1767
- },
1768
- scrollPaddingBlockEnd: {
1769
- className: "scroll-pb",
1770
- values: "spacing",
1771
- group: "Scroll"
1772
- },
1773
- scrollPaddingInline: {
1774
- className: "scroll-px",
1775
- values: "spacing",
1776
- group: "Scroll",
1777
- shorthand: ["scrollPaddingX"]
1778
- },
1779
- scrollPaddingInlineEnd: {
1780
- className: "scroll-pe",
1781
- values: "spacing",
1782
- group: "Scroll"
1783
- },
1784
- scrollPaddingInlineStart: {
1785
- className: "scroll-ps",
1786
- values: "spacing",
1787
- group: "Scroll"
1788
- },
1789
- scrollPaddingLeft: {
1790
- className: "scroll-pl",
1791
- values: "spacing",
1792
- group: "Scroll"
1793
- },
1794
- scrollPaddingRight: {
1795
- className: "scroll-pr",
1796
- values: "spacing",
1797
- group: "Scroll"
1798
- },
1799
- scrollPaddingTop: {
1800
- className: "scroll-pt",
1801
- values: "spacing",
1802
- group: "Scroll"
1803
- },
1804
- scrollPaddingBottom: {
1805
- className: "scroll-pb",
1806
- values: "spacing",
1807
- group: "Scroll"
1808
- },
1809
- scrollSnapAlign: {
1810
- className: "snap-align",
1811
- group: "Scroll"
1812
- },
1813
- scrollSnapStop: {
1814
- className: "snap-stop",
1815
- group: "Scroll"
1816
- },
1817
- scrollSnapType: {
1818
- className: "snap-type",
1819
- group: "Scroll",
1820
- values: {
1821
- none: "none",
1822
- x: "x var(--scroll-snap-strictness)",
1823
- y: "y var(--scroll-snap-strictness)",
1824
- both: "both var(--scroll-snap-strictness)"
1825
- }
1826
- },
1827
- scrollSnapStrictness: {
1828
- className: "snap-strictness",
1829
- values: ["mandatory", "proximity"],
1830
- group: "Scroll",
1831
- transform(value) {
1832
- return {
1833
- "--scroll-snap-strictness": value
1834
- };
1835
- }
1836
- },
1837
- scrollSnapMargin: {
1838
- className: "snap-m",
1839
- values: "spacing",
1840
- group: "Scroll"
1841
- },
1842
- scrollSnapMarginTop: {
1843
- className: "snap-mt",
1844
- values: "spacing",
1845
- group: "Scroll"
1846
- },
1847
- scrollSnapMarginBottom: {
1848
- className: "snap-mb",
1849
- values: "spacing",
1850
- group: "Scroll"
1851
- },
1852
- scrollSnapMarginLeft: {
1853
- className: "snap-ml",
1854
- values: "spacing",
1855
- group: "Scroll"
1856
- },
1857
- scrollSnapMarginRight: {
1858
- className: "snap-mr",
1859
- values: "spacing",
1860
- group: "Scroll"
1861
- },
1862
- touchAction: {
1863
- className: "touch",
1864
- group: "Interactivity"
1865
- },
1866
- userSelect: {
1867
- className: "select",
1868
- group: "Interactivity",
1869
- transform(value) {
1870
- return {
1871
- WebkitUserSelect: value,
1872
- userSelect: value
1873
- };
1874
- }
1875
- }
1876
- };
1877
- var layout = {
1878
- aspectRatio: {
1879
- className: "aspect",
1880
- values: "aspectRatios",
1881
- group: "Layout"
1882
- },
1883
- boxDecorationBreak: {
1884
- className: "decoration",
1885
- group: "Layout",
1886
- transform(value) {
1887
- return {
1888
- boxDecorationBreak: value,
1889
- WebkitBoxDecorationBreak: value
1890
- };
1891
- }
1892
- },
1893
- zIndex: {
1894
- className: "z",
1895
- values: "zIndex",
1896
- group: "Visibility"
1897
- },
1898
- boxSizing: {
1899
- className: "box",
1900
- group: "System"
1901
- },
1902
- objectPosition: {
1903
- className: "obj-pos",
1904
- group: "Layout"
1905
- },
1906
- objectFit: {
1907
- className: "obj-fit",
1908
- group: "Layout"
1909
- },
1910
- overscrollBehavior: {
1911
- className: "overscroll",
1912
- group: "Scroll"
1913
- },
1914
- overscrollBehaviorX: {
1915
- className: "overscroll-x",
1916
- group: "Scroll"
1917
- },
1918
- overscrollBehaviorY: {
1919
- className: "overscroll-y",
1920
- group: "Scroll"
1921
- },
1922
- position: {
1923
- className: "pos",
1924
- shorthand: "pos",
1925
- group: "Position"
1926
- },
1927
- top: {
1928
- className: "top",
1929
- values: "spacing",
1930
- group: "Position"
1931
- },
1932
- left: {
1933
- className: "left",
1934
- values: "spacing",
1935
- group: "Position"
1936
- },
1937
- insetInline: {
1938
- className: "inset-x",
1939
- values: "spacing",
1940
- group: "Position",
1941
- shorthand: ["insetX"]
1942
- },
1943
- insetBlock: {
1944
- className: "inset-y",
1945
- values: "spacing",
1946
- group: "Position",
1947
- shorthand: ["insetY"]
1948
- },
1949
- inset: {
1950
- className: "inset",
1951
- group: "Position",
1952
- values: (theme2) => ({
1953
- auto: "auto",
1954
- ...theme2("spacing")
1955
- })
1956
- },
1957
- insetBlockEnd: {
1958
- className: "inset-b",
1959
- values: "spacing",
1960
- group: "Position"
1961
- },
1962
- insetBlockStart: {
1963
- className: "inset-t",
1964
- values: "spacing",
1965
- group: "Position"
1966
- },
1967
- insetInlineEnd: {
1968
- className: "end",
1969
- values: "spacing",
1970
- group: "Position",
1971
- shorthand: ["insetEnd", "end"]
1972
- },
1973
- insetInlineStart: {
1974
- className: "start",
1975
- values: "spacing",
1976
- group: "Position",
1977
- shorthand: ["insetStart", "start"]
1978
- },
1979
- right: {
1980
- className: "right",
1981
- values: "spacing",
1982
- group: "Position"
1983
- },
1984
- bottom: {
1985
- className: "bottom",
1986
- values: "spacing",
1987
- group: "Position"
1988
- },
1989
- float: {
1990
- className: "float",
1991
- values: ["start", "end"],
1992
- property: "float",
1993
- group: "Position",
1994
- transform(value) {
1995
- if (value === "start") {
1996
- return {
1997
- float: "left",
1998
- '[dir="rtl"] &': {
1999
- float: "right"
2000
- }
2001
- };
2002
- }
2003
- if (value === "end") {
2004
- return {
2005
- float: "right",
2006
- '[dir="rtl"] &': {
2007
- float: "left"
2008
- }
2009
- };
2010
- }
2011
- return {
2012
- float: value
2013
- };
2014
- }
2015
- },
2016
- visibility: {
2017
- className: "vis",
2018
- group: "Visibility"
2019
- }
2020
- };
2021
- var list = {
2022
- listStyleType: {
2023
- className: "list-type",
2024
- group: "List"
2025
- },
2026
- listStylePosition: {
2027
- className: "list-pos",
2028
- group: "List"
2029
- },
2030
- listStyleImage: {
2031
- className: "list-img",
2032
- group: "List",
2033
- values: "assets"
2034
- }
2035
- };
2036
- var outline = {
2037
- outlineWidth: {
2038
- className: "ring-width",
2039
- shorthand: "ringWidth",
2040
- values: "borderWidths",
2041
- group: "Border"
2042
- },
2043
- outlineColor: {
2044
- className: "ring-color",
2045
- values: "colors",
2046
- group: "Color",
2047
- shorthand: "ringColor",
2048
- transform: createColorMixTransform("outlineColor")
2049
- },
2050
- outline: {
2051
- className: "ring",
2052
- shorthand: "ring",
2053
- values: "borders",
2054
- group: "Border",
2055
- transform(value) {
2056
- if (value === "none") {
2057
- return { outline: "2px solid transparent", outlineOffset: "2px" };
2058
- }
2059
- return { outline: value };
2060
- }
2061
- },
2062
- outlineOffset: {
2063
- className: "ring-offset",
2064
- shorthand: "ringOffset",
2065
- values: "spacing",
2066
- group: "Border"
2067
- }
2068
- };
2069
- var polyfill = {
2070
- appearance: {
2071
- className: "appearance",
2072
- group: "Visibility",
2073
- transform(value) {
2074
- return { appearance: value, WebkitAppearance: value };
2075
- }
2076
- },
2077
- backfaceVisibility: {
2078
- className: "backface",
2079
- group: "Visibility",
2080
- transform(value) {
2081
- return { backfaceVisibility: value, WebkitBackfaceVisibility: value };
2082
- }
2083
- },
2084
- clipPath: {
2085
- className: "clip-path",
2086
- group: "Other",
2087
- transform(value) {
2088
- return { clipPath: value, WebkitClipPath: value };
2089
- }
2090
- },
2091
- hyphens: {
2092
- className: "hyphens",
2093
- group: "Other",
2094
- transform(value) {
2095
- return { hyphens: value, WebkitHyphens: value };
2096
- }
2097
- },
2098
- mask: {
2099
- className: "mask",
2100
- group: "Other",
2101
- transform(value) {
2102
- return { mask: value, WebkitMask: value };
2103
- }
2104
- },
2105
- maskImage: {
2106
- className: "mask-image",
2107
- group: "Other",
2108
- transform(value) {
2109
- return { maskImage: value, WebkitMaskImage: value };
2110
- }
2111
- },
2112
- maskSize: {
2113
- className: "mask-size",
2114
- group: "Other",
2115
- transform(value) {
2116
- return { maskSize: value, WebkitMaskSize: value };
2117
- }
2118
- },
2119
- textSizeAdjust: {
2120
- className: "text-adjust",
2121
- group: "Typography",
2122
- transform(value) {
2123
- return { textSizeAdjust: value, WebkitTextSizeAdjust: value };
2124
- }
2125
- }
2126
- };
2127
- var widthValues = (theme2) => ({
2128
- auto: "auto",
2129
- ...theme2("sizes"),
2130
- "1/2": "50%",
2131
- "1/3": "33.333333%",
2132
- "2/3": "66.666667%",
2133
- "1/4": "25%",
2134
- "2/4": "50%",
2135
- "3/4": "75%",
2136
- "1/5": "20%",
2137
- "2/5": "40%",
2138
- "3/5": "60%",
2139
- "4/5": "80%",
2140
- "1/6": "16.666667%",
2141
- "2/6": "33.333333%",
2142
- "3/6": "50%",
2143
- "4/6": "66.666667%",
2144
- "5/6": "83.333333%",
2145
- "1/12": "8.333333%",
2146
- "2/12": "16.666667%",
2147
- "3/12": "25%",
2148
- "4/12": "33.333333%",
2149
- "5/12": "41.666667%",
2150
- "6/12": "50%",
2151
- "7/12": "58.333333%",
2152
- "8/12": "66.666667%",
2153
- "9/12": "75%",
2154
- "10/12": "83.333333%",
2155
- "11/12": "91.666667%",
2156
- screen: "100vw"
2157
- });
2158
- var heightValues = (theme2) => ({
2159
- auto: "auto",
2160
- ...theme2("sizes"),
2161
- svh: "100svh",
2162
- lvh: "100lvh",
2163
- dvh: "100dvh",
2164
- screen: "100vh",
2165
- "1/2": "50%",
2166
- "1/3": "33.333333%",
2167
- "2/3": "66.666667%",
2168
- "1/4": "25%",
2169
- "2/4": "50%",
2170
- "3/4": "75%",
2171
- "1/5": "20%",
2172
- "2/5": "40%",
2173
- "3/5": "60%",
2174
- "4/5": "80%",
2175
- "1/6": "16.666667%",
2176
- "2/6": "33.333333%",
2177
- "3/6": "50%",
2178
- "4/6": "66.666667%",
2179
- "5/6": "83.333333%"
2180
- });
2181
- var sizing = {
2182
- width: {
2183
- shorthand: "w",
2184
- className: "w",
2185
- group: "Width",
2186
- values: widthValues
2187
- },
2188
- inlineSize: {
2189
- className: "w",
2190
- group: "Width",
2191
- values: widthValues
2192
- },
2193
- minWidth: {
2194
- shorthand: "minW",
2195
- className: "min-w",
2196
- group: "Width",
2197
- values: widthValues
2198
- },
2199
- minInlineSize: {
2200
- className: "min-w",
2201
- group: "Width",
2202
- values: widthValues
2203
- },
2204
- maxWidth: {
2205
- shorthand: "maxW",
2206
- className: "max-w",
2207
- group: "Width",
2208
- values: widthValues
2209
- },
2210
- maxInlineSize: {
2211
- className: "max-w",
2212
- group: "Width",
2213
- values: widthValues
2214
- },
2215
- height: {
2216
- shorthand: "h",
2217
- className: "h",
2218
- group: "Height",
2219
- values: heightValues
2220
- },
2221
- blockSize: {
2222
- className: "h",
2223
- group: "Height",
2224
- values: heightValues
2225
- },
2226
- minHeight: {
2227
- shorthand: "minH",
2228
- className: "min-h",
2229
- group: "Height",
2230
- values: heightValues
2231
- },
2232
- minBlockSize: {
2233
- className: "min-h",
2234
- group: "Height",
2235
- values: heightValues
2236
- },
2237
- maxHeight: {
2238
- shorthand: "maxH",
2239
- className: "max-h",
2240
- group: "Height",
2241
- values: heightValues
2242
- },
2243
- maxBlockSize: {
2244
- className: "max-b",
2245
- group: "Height",
2246
- values: heightValues
2247
- }
2248
- };
2249
- var marginValues = (theme2) => ({
2250
- auto: "auto",
2251
- ...theme2("spacing")
2252
- });
2253
- var spacing = {
2254
- padding: {
2255
- className: "p",
2256
- shorthand: "p",
2257
- values: "spacing",
2258
- group: "Padding"
2259
- },
2260
- paddingLeft: {
2261
- className: "pl",
2262
- shorthand: "pl",
2263
- values: "spacing",
2264
- group: "Padding"
2265
- },
2266
- paddingRight: {
2267
- className: "pr",
2268
- shorthand: "pr",
2269
- values: "spacing",
2270
- group: "Padding"
2271
- },
2272
- paddingTop: {
2273
- className: "pt",
2274
- shorthand: "pt",
2275
- values: "spacing",
2276
- group: "Padding"
2277
- },
2278
- paddingBottom: {
2279
- className: "pb",
2280
- shorthand: "pb",
2281
- values: "spacing",
2282
- group: "Padding"
2283
- },
2284
- paddingBlock: {
2285
- className: "py",
2286
- values: "spacing",
2287
- group: "Padding",
2288
- shorthand: ["py", "paddingY"]
2289
- },
2290
- paddingBlockEnd: {
2291
- className: "pb",
2292
- values: "spacing",
2293
- group: "Padding"
2294
- },
2295
- paddingBlockStart: {
2296
- className: "pt",
2297
- values: "spacing",
2298
- group: "Padding"
2299
- },
2300
- paddingInline: {
2301
- className: "px",
2302
- values: "spacing",
2303
- group: "Padding",
2304
- shorthand: ["paddingX", "px"]
2305
- },
2306
- paddingInlineEnd: {
2307
- className: "pe",
2308
- shorthand: ["pe", "paddingEnd"],
2309
- values: "spacing",
2310
- group: "Padding"
2311
- },
2312
- paddingInlineStart: {
2313
- className: "ps",
2314
- shorthand: ["ps", "paddingStart"],
2315
- values: "spacing",
2316
- group: "Padding"
2317
- },
2318
- marginLeft: {
2319
- className: "ml",
2320
- shorthand: "ml",
2321
- values: marginValues,
2322
- group: "Margin"
2323
- },
2324
- marginRight: {
2325
- className: "mr",
2326
- shorthand: "mr",
2327
- values: marginValues,
2328
- group: "Margin"
2329
- },
2330
- marginTop: {
2331
- className: "mt",
2332
- shorthand: "mt",
2333
- values: marginValues,
2334
- group: "Margin"
2335
- },
2336
- marginBottom: {
2337
- className: "mb",
2338
- shorthand: "mb",
2339
- values: marginValues,
2340
- group: "Margin"
2341
- },
2342
- margin: {
2343
- className: "m",
2344
- shorthand: "m",
2345
- values: marginValues,
2346
- group: "Margin"
2347
- },
2348
- marginBlock: {
2349
- className: "my",
2350
- values: marginValues,
2351
- group: "Margin",
2352
- shorthand: ["my", "marginY"]
2353
- },
2354
- marginBlockEnd: {
2355
- className: "mb",
2356
- values: marginValues,
2357
- group: "Margin"
2358
- },
2359
- marginBlockStart: {
2360
- className: "mt",
2361
- values: marginValues,
2362
- group: "Margin"
2363
- },
2364
- marginInline: {
2365
- className: "mx",
2366
- values: marginValues,
2367
- group: "Margin",
2368
- shorthand: ["mx", "marginX"]
2369
- },
2370
- marginInlineEnd: {
2371
- className: "me",
2372
- shorthand: ["me", "marginEnd"],
2373
- values: marginValues,
2374
- group: "Margin"
2375
- },
2376
- marginInlineStart: {
2377
- className: "ms",
2378
- shorthand: ["ms", "marginStart"],
2379
- values: marginValues,
2380
- group: "Margin"
2381
- },
2382
- spaceX: {
2383
- className: "space-x",
2384
- values: marginValues,
2385
- property: "marginInlineStart",
2386
- group: "Margin",
2387
- transform(value) {
2388
- return {
2389
- "& > :not([hidden]) ~ :not([hidden])": {
2390
- marginInlineStart: value,
2391
- marginInlineEnd: "0px"
2392
- }
2393
- };
2394
- }
2395
- },
2396
- spaceY: {
2397
- className: "space-y",
2398
- values: marginValues,
2399
- property: "marginBlockStart",
2400
- group: "Margin",
2401
- transform(value) {
2402
- return {
2403
- "& > :not([hidden]) ~ :not([hidden])": {
2404
- marginTop: value,
2405
- marginBottom: "0px"
2406
- }
2407
- };
2408
- }
2409
- }
2410
- };
2411
- var svg = {
2412
- fill: {
2413
- className: "fill",
2414
- values: "colors",
2415
- group: "Color",
2416
- transform: createColorMixTransform("fill")
2417
- },
2418
- stroke: {
2419
- className: "stroke",
2420
- values: "colors",
2421
- group: "Color",
2422
- transform: createColorMixTransform("stroke")
2423
- },
2424
- strokeWidth: {
2425
- className: "stroke-w",
2426
- values: "borderWidths",
2427
- group: "Border"
2428
- }
2429
- };
2430
- var tables = {
2431
- borderCollapse: {
2432
- className: "border",
2433
- group: "Table"
2434
- },
2435
- borderSpacing: {
2436
- className: "border-spacing",
2437
- group: "Table",
2438
- values(theme2) {
2439
- return {
2440
- ...theme2("spacing"),
2441
- auto: "var(--border-spacing-x) var(--border-spacing-y)"
2442
- };
2443
- }
2444
- },
2445
- borderSpacingX: {
2446
- className: "border-spacing-x",
2447
- values: "spacing",
2448
- group: "Table",
2449
- transform(value) {
2450
- return {
2451
- "--border-spacing-x": value
2452
- };
2453
- }
2454
- },
2455
- borderSpacingY: {
2456
- className: "border-spacing-y",
2457
- values: "spacing",
2458
- group: "Table",
2459
- transform(value) {
2460
- return {
2461
- "--border-spacing-y": value
2462
- };
2463
- }
2464
- },
2465
- tableLayout: {
2466
- className: "table",
2467
- group: "Table"
2468
- }
2469
- };
2470
- var positiveFractions = {
2471
- "1/2": "50%",
2472
- "1/3": "33.333333%",
2473
- "2/3": "66.666667%",
2474
- "1/4": "25%",
2475
- "2/4": "50%",
2476
- "3/4": "75%",
2477
- full: "100%"
2478
- };
2479
- var negativeFractions = Object.fromEntries(
2480
- Object.entries(positiveFractions).map(([key, value]) => [`-${key}`, `-${value}`])
2481
- );
2482
- var fractions = { ...positiveFractions, ...negativeFractions };
2483
- var transforms = {
2484
- transformOrigin: {
2485
- className: "origin",
2486
- group: "Transform"
2487
- },
2488
- rotate: {
2489
- className: "rotate",
2490
- group: "Transform",
2491
- property: "rotate",
2492
- values: {
2493
- auto: "var(--rotate-x) var(--rotate-y)",
2494
- "auto-3d": "var(--rotate-x) var(--rotate-y) var(--rotate-z)"
2495
- }
2496
- },
2497
- rotateX: {
2498
- className: "rotate-x",
2499
- group: "Transform",
2500
- property: "rotate",
2501
- transform(value) {
2502
- return {
2503
- "--rotate-x": value
2504
- };
2505
- }
2506
- },
2507
- rotateY: {
2508
- className: "rotate-y",
2509
- group: "Transform",
2510
- property: "rotate",
2511
- transform(value) {
2512
- return {
2513
- "--rotate-y": value
2514
- };
2515
- }
2516
- },
2517
- rotateZ: {
2518
- className: "rotate-z",
2519
- group: "Transform",
2520
- property: "rotate",
2521
- transform(value) {
2522
- return {
2523
- "--rotate-z": value
2524
- };
2525
- }
2526
- },
2527
- scale: {
2528
- className: "scale",
2529
- group: "Transform",
2530
- property: "scale",
2531
- values: {
2532
- auto: "var(--scale-x) var(--scale-y)"
2533
- }
2534
- },
2535
- scaleX: {
2536
- className: "scale-x",
2537
- group: "Transform",
2538
- transform(value) {
2539
- return {
2540
- "--scale-x": value
2541
- };
2542
- }
2543
- },
2544
- scaleY: {
2545
- className: "scale-y",
2546
- group: "Transform",
2547
- transform(value) {
2548
- return {
2549
- "--scale-y": value
2550
- };
2551
- }
2552
- },
2553
- translate: {
2554
- className: "translate",
2555
- group: "Transform",
2556
- property: "translate",
2557
- values: {
2558
- auto: "var(--translate-x) var(--translate-y)",
2559
- "auto-3d": "var(--translate-x) var(--translate-y) var(--translate-z)"
2560
- }
2561
- },
2562
- translateX: {
2563
- shorthand: "x",
2564
- className: "translate-x",
2565
- group: "Transform",
2566
- values(theme2) {
2567
- return {
2568
- ...theme2("spacing"),
2569
- ...fractions
2570
- };
2571
- },
2572
- transform(value) {
2573
- return {
2574
- "--translate-x": value
2575
- };
2576
- }
2577
- },
2578
- translateY: {
2579
- shorthand: "y",
2580
- className: "translate-y",
2581
- group: "Transform",
2582
- values(theme2) {
2583
- return {
2584
- ...theme2("spacing"),
2585
- ...fractions
2586
- };
2587
- },
2588
- transform(value) {
2589
- return {
2590
- "--translate-y": value
2591
- };
2592
- }
2593
- },
2594
- translateZ: {
2595
- shorthand: "z",
2596
- className: "translate-z",
2597
- group: "Transform",
2598
- values(theme2) {
2599
- return {
2600
- ...theme2("spacing"),
2601
- ...fractions
2602
- };
2603
- },
2604
- transform(value) {
2605
- return {
2606
- "--translate-z": value
2607
- };
2608
- }
2609
- }
2610
- };
2611
- var createTransition = (value) => ({
2612
- transitionProperty: `var(--transition-prop, ${value})`,
2613
- transitionTimingFunction: "var(--transition-easing, cubic-bezier(0.4, 0, 0.2, 1))",
2614
- transitionDuration: "var(--transition-duration, 150ms)"
2615
- });
2616
- var transitionMap = {
2617
- all: createTransition("all"),
2618
- common: createTransition(
2619
- "color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter"
2620
- ),
2621
- background: createTransition("background, background-color"),
2622
- colors: createTransition("color, background-color, border-color, outline-color, text-decoration-color, fill, stroke"),
2623
- opacity: createTransition("opacity"),
2624
- shadow: createTransition("box-shadow"),
2625
- transform: createTransition("transform")
2626
- };
2627
- var transitions = {
2628
- transitionTimingFunction: {
2629
- className: "ease",
2630
- values: "easings",
2631
- group: "Transition",
2632
- transform(value) {
2633
- return {
2634
- "--transition-easing": value,
2635
- transitionTimingFunction: value
2636
- };
2637
- }
2638
- },
2639
- transitionDelay: {
2640
- className: "delay",
2641
- values: "durations",
2642
- group: "Transition"
2643
- },
2644
- transitionDuration: {
2645
- className: "duration",
2646
- values: "durations",
2647
- group: "Transition",
2648
- transform(value) {
2649
- return {
2650
- "--transition-duration": value,
2651
- transitionDuration: value
2652
- };
2653
- }
2654
- },
2655
- transitionProperty: {
2656
- className: "transition-prop",
2657
- group: "Transition",
2658
- transform(value) {
2659
- return {
2660
- "--transition-prop": value,
2661
- transitionProperty: value
2662
- };
2663
- }
2664
- },
2665
- transition: {
2666
- className: "transition",
2667
- values: Object.keys(transitionMap),
2668
- group: "Transition",
2669
- transform(value) {
2670
- return transitionMap[value] ?? { transition: value };
2671
- }
2672
- },
2673
- animation: {
2674
- className: "animation",
2675
- values: "animations",
2676
- group: "Transition"
2677
- },
2678
- animationName: {
2679
- className: "animation-name",
2680
- values: "keyframes",
2681
- group: "Transition"
2682
- },
2683
- animationTimingFunction: {
2684
- className: "animation-ease",
2685
- values: "easings",
2686
- group: "Transition"
2687
- },
2688
- animationDuration: {
2689
- className: "animation-duration",
2690
- values: "durations",
2691
- group: "Transition"
2692
- },
2693
- animationDelay: {
2694
- className: "animation-delay",
2695
- values: "durations",
2696
- group: "Transition"
2697
- }
2698
- };
2699
- var typography = {
2700
- color: {
2701
- className: "text",
2702
- values: "colors",
2703
- group: "Color",
2704
- transform: createColorMixTransform("color")
2705
- },
2706
- fontFamily: {
2707
- className: "font",
2708
- values: "fonts",
2709
- group: "Typography"
2710
- },
2711
- fontSize: {
2712
- className: "fs",
2713
- values: "fontSizes",
2714
- group: "Typography"
2715
- },
2716
- fontWeight: {
2717
- className: "fw",
2718
- values: "fontWeights",
2719
- group: "Typography"
2720
- },
2721
- fontSmoothing: {
2722
- className: "smoothing",
2723
- group: "Typography",
2724
- values: {
2725
- antialiased: "antialiased",
2726
- "subpixel-antialiased": "auto"
2727
- },
2728
- transform(value) {
2729
- return {
2730
- WebkitFontSmoothing: value
2731
- };
2732
- }
2733
- },
2734
- fontVariantNumeric: {
2735
- className: "numeric",
2736
- group: "Typography"
2737
- },
2738
- letterSpacing: {
2739
- className: "tracking",
2740
- values: "letterSpacings",
2741
- group: "Typography"
2742
- },
2743
- lineHeight: {
2744
- className: "leading",
2745
- values: "lineHeights",
2746
- group: "Typography"
2747
- },
2748
- textAlign: {
2749
- className: "text-align",
2750
- group: "Typography"
2751
- },
2752
- textDecoration: {
2753
- className: "text-decor",
2754
- group: "Typography"
2755
- },
2756
- textDecorationColor: {
2757
- className: "text-decor-color",
2758
- values: "colors",
2759
- transform: createColorMixTransform("textDecorationColor"),
2760
- group: "Typography"
2761
- },
2762
- textEmphasisColor: {
2763
- className: "text-emphasis-color",
2764
- values: "colors",
2765
- transform: createColorMixTransform("textEmphasisColor"),
2766
- group: "Typography"
2767
- },
2768
- textDecorationStyle: {
2769
- className: "decoration-style",
2770
- group: "Typography"
2771
- },
2772
- textDecorationThickness: {
2773
- className: "decoration-thickness",
2774
- group: "Typography"
2775
- },
2776
- textUnderlineOffset: {
2777
- className: "underline-offset",
2778
- group: "Typography"
2779
- },
2780
- textTransform: {
2781
- className: "text-transform",
2782
- group: "Typography"
2783
- },
2784
- textIndent: {
2785
- className: "indent",
2786
- group: "Typography",
2787
- values: "spacing"
2788
- },
2789
- textShadow: {
2790
- className: "text-shadow",
2791
- values: "shadows",
2792
- group: "Typography"
2793
- },
2794
- textShadowColor: {
2795
- shorthand: "textShadowColor",
2796
- className: "text-shadow",
2797
- values: "colors",
2798
- transform: createColorMixTransform("--text-shadow-color"),
2799
- group: "Typography"
2800
- },
2801
- textOverflow: {
2802
- className: "text-overflow",
2803
- group: "Typography"
2804
- },
2805
- verticalAlign: {
2806
- className: "v-align",
2807
- group: "Typography"
2808
- },
2809
- wordBreak: {
2810
- className: "break",
2811
- group: "Typography"
2812
- },
2813
- textWrap: {
2814
- className: "text-wrap",
2815
- values: ["wrap", "balance", "nowrap"],
2816
- group: "Typography",
2817
- transform(value) {
2818
- return { textWrap: value };
2819
- }
2820
- },
2821
- truncate: {
2822
- className: "truncate",
2823
- values: { type: "boolean" },
2824
- group: "Typography",
2825
- transform(value) {
2826
- if (!value)
2827
- return {};
2828
- return {
2829
- overflow: "hidden",
2830
- textOverflow: "ellipsis",
2831
- whiteSpace: "nowrap"
2832
- };
2833
- }
2834
- },
2835
- lineClamp: {
2836
- className: "clamp",
2837
- group: "Typography",
2838
- transform(value) {
2839
- if (value === "none") {
2840
- return {
2841
- WebkitLineClamp: "unset"
2842
- };
2843
- }
2844
- return {
2845
- overflow: "hidden",
2846
- display: "-webkit-box",
2847
- WebkitLineClamp: value,
2848
- WebkitBoxOrient: "vertical"
2849
- };
2850
- }
2851
- }
2852
- };
2853
- var utilities = Object.assign(
2854
- {},
2855
- layout,
2856
- display,
2857
- flexGrid,
2858
- spacing,
2859
- outline,
2860
- divide,
2861
- sizing,
2862
- typography,
2863
- list,
2864
- background,
2865
- backgroundGradients,
2866
- border,
2867
- effects,
2868
- tables,
2869
- transitions,
2870
- transforms,
2871
- interactivity,
2872
- svg,
2873
- helpers,
2874
- polyfill,
2875
- container2
2876
- );
2877
- var definePreset = (preset22) => preset22;
2878
- var preset = definePreset({
2879
- conditions,
2880
- utilities,
2881
- patterns,
2882
- // globalVars,
2883
- globalCss
2884
- });
2885
- var src_default = preset;
2886
-
2887
- // ../node_modules/.pnpm/@pandacss+preset-panda@0.40.1/node_modules/@pandacss/preset-panda/dist/index.mjs
2888
- init_esm_shims();
2889
- var breakpoints = {
2890
- sm: "640px",
2891
- md: "768px",
2892
- lg: "1024px",
2893
- xl: "1280px",
2894
- "2xl": "1536px"
2895
- };
2896
- var containerSizes = {
2897
- xs: "320px",
2898
- sm: "384px",
2899
- md: "448px",
2900
- lg: "512px",
2901
- xl: "576px",
2902
- "2xl": "672px",
2903
- "3xl": "768px",
2904
- "4xl": "896px",
2905
- "5xl": "1024px",
2906
- "6xl": "1152px",
2907
- "7xl": "1280px",
2908
- "8xl": "1440px"
2909
- };
2910
- var keyframes = {
2911
- spin: {
2912
- to: {
2913
- transform: "rotate(360deg)"
2914
- }
2915
- },
2916
- ping: {
2917
- "75%, 100%": {
2918
- transform: "scale(2)",
2919
- opacity: "0"
2920
- }
2921
- },
2922
- pulse: {
2923
- "50%": {
2924
- opacity: ".5"
2925
- }
2926
- },
2927
- bounce: {
2928
- "0%, 100%": {
2929
- transform: "translateY(-25%)",
2930
- animationTimingFunction: "cubic-bezier(0.8,0,1,1)"
2931
- },
2932
- "50%": {
2933
- transform: "none",
2934
- animationTimingFunction: "cubic-bezier(0,0,0.2,1)"
2935
- }
2936
- }
2937
- };
2938
- var animations = {
2939
- spin: { value: "spin 1s linear infinite" },
2940
- ping: { value: "ping 1s cubic-bezier(0, 0, 0.2, 1) infinite" },
2941
- pulse: { value: "pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite" },
2942
- bounce: { value: "bounce 1s infinite" }
2943
- };
2944
- var aspectRatios = {
2945
- square: { value: "1 / 1" },
2946
- landscape: { value: "4 / 3" },
2947
- portrait: { value: "3 / 4" },
2948
- wide: { value: "16 / 9" },
2949
- ultrawide: { value: "18 / 5" },
2950
- golden: { value: "1.618 / 1" }
2951
- };
2952
- var borders = {
2953
- none: { value: "none" }
2954
- };
2955
- var colors = {
2956
- current: { value: "currentColor" },
2957
- black: { value: "#000" },
2958
- white: { value: "#fff" },
2959
- transparent: { value: "rgb(0 0 0 / 0)" },
2960
- rose: {
2961
- 50: { value: "#fff1f2" },
2962
- 100: { value: "#ffe4e6" },
2963
- 200: { value: "#fecdd3" },
2964
- 300: { value: "#fda4af" },
2965
- 400: { value: "#fb7185" },
2966
- 500: { value: "#f43f5e" },
2967
- 600: { value: "#e11d48" },
2968
- 700: { value: "#be123c" },
2969
- 800: { value: "#9f1239" },
2970
- 900: { value: "#881337" },
2971
- 950: { value: "#4c0519" }
2972
- },
2973
- pink: {
2974
- 50: { value: "#fdf2f8" },
2975
- 100: { value: "#fce7f3" },
2976
- 200: { value: "#fbcfe8" },
2977
- 300: { value: "#f9a8d4" },
2978
- 400: { value: "#f472b6" },
2979
- 500: { value: "#ec4899" },
2980
- 600: { value: "#db2777" },
2981
- 700: { value: "#be185d" },
2982
- 800: { value: "#9d174d" },
2983
- 900: { value: "#831843" },
2984
- 950: { value: "#500724" }
2985
- },
2986
- fuchsia: {
2987
- 50: { value: "#fdf4ff" },
2988
- 100: { value: "#fae8ff" },
2989
- 200: { value: "#f5d0fe" },
2990
- 300: { value: "#f0abfc" },
2991
- 400: { value: "#e879f9" },
2992
- 500: { value: "#d946ef" },
2993
- 600: { value: "#c026d3" },
2994
- 700: { value: "#a21caf" },
2995
- 800: { value: "#86198f" },
2996
- 900: { value: "#701a75" },
2997
- 950: { value: "#4a044e" }
2998
- },
2999
- purple: {
3000
- 50: { value: "#faf5ff" },
3001
- 100: { value: "#f3e8ff" },
3002
- 200: { value: "#e9d5ff" },
3003
- 300: { value: "#d8b4fe" },
3004
- 400: { value: "#c084fc" },
3005
- 500: { value: "#a855f7" },
3006
- 600: { value: "#9333ea" },
3007
- 700: { value: "#7e22ce" },
3008
- 800: { value: "#6b21a8" },
3009
- 900: { value: "#581c87" },
3010
- 950: { value: "#3b0764" }
3011
- },
3012
- violet: {
3013
- 50: { value: "#f5f3ff" },
3014
- 100: { value: "#ede9fe" },
3015
- 200: { value: "#ddd6fe" },
3016
- 300: { value: "#c4b5fd" },
3017
- 400: { value: "#a78bfa" },
3018
- 500: { value: "#8b5cf6" },
3019
- 600: { value: "#7c3aed" },
3020
- 700: { value: "#6d28d9" },
3021
- 800: { value: "#5b21b6" },
3022
- 900: { value: "#4c1d95" },
3023
- 950: { value: "#2e1065" }
3024
- },
3025
- indigo: {
3026
- 50: { value: "#eef2ff" },
3027
- 100: { value: "#e0e7ff" },
3028
- 200: { value: "#c7d2fe" },
3029
- 300: { value: "#a5b4fc" },
3030
- 400: { value: "#818cf8" },
3031
- 500: { value: "#6366f1" },
3032
- 600: { value: "#4f46e5" },
3033
- 700: { value: "#4338ca" },
3034
- 800: { value: "#3730a3" },
3035
- 900: { value: "#312e81" },
3036
- 950: { value: "#1e1b4b" }
3037
- },
3038
- blue: {
3039
- 50: { value: "#eff6ff" },
3040
- 100: { value: "#dbeafe" },
3041
- 200: { value: "#bfdbfe" },
3042
- 300: { value: "#93c5fd" },
3043
- 400: { value: "#60a5fa" },
3044
- 500: { value: "#3b82f6" },
3045
- 600: { value: "#2563eb" },
3046
- 700: { value: "#1d4ed8" },
3047
- 800: { value: "#1e40af" },
3048
- 900: { value: "#1e3a8a" },
3049
- 950: { value: "#172554" }
3050
- },
3051
- sky: {
3052
- 50: { value: "#f0f9ff" },
3053
- 100: { value: "#e0f2fe" },
3054
- 200: { value: "#bae6fd" },
3055
- 300: { value: "#7dd3fc" },
3056
- 400: { value: "#38bdf8" },
3057
- 500: { value: "#0ea5e9" },
3058
- 600: { value: "#0284c7" },
3059
- 700: { value: "#0369a1" },
3060
- 800: { value: "#075985" },
3061
- 900: { value: "#0c4a6e" },
3062
- 950: { value: "#082f49" }
3063
- },
3064
- cyan: {
3065
- 50: { value: "#ecfeff" },
3066
- 100: { value: "#cffafe" },
3067
- 200: { value: "#a5f3fc" },
3068
- 300: { value: "#67e8f9" },
3069
- 400: { value: "#22d3ee" },
3070
- 500: { value: "#06b6d4" },
3071
- 600: { value: "#0891b2" },
3072
- 700: { value: "#0e7490" },
3073
- 800: { value: "#155e75" },
3074
- 900: { value: "#164e63" },
3075
- 950: { value: "#083344" }
3076
- },
3077
- teal: {
3078
- 50: { value: "#f0fdfa" },
3079
- 100: { value: "#ccfbf1" },
3080
- 200: { value: "#99f6e4" },
3081
- 300: { value: "#5eead4" },
3082
- 400: { value: "#2dd4bf" },
3083
- 500: { value: "#14b8a6" },
3084
- 600: { value: "#0d9488" },
3085
- 700: { value: "#0f766e" },
3086
- 800: { value: "#115e59" },
3087
- 900: { value: "#134e4a" },
3088
- 950: { value: "#042f2e" }
3089
- },
3090
- emerald: {
3091
- 50: { value: "#ecfdf5" },
3092
- 100: { value: "#d1fae5" },
3093
- 200: { value: "#a7f3d0" },
3094
- 300: { value: "#6ee7b7" },
3095
- 400: { value: "#34d399" },
3096
- 500: { value: "#10b981" },
3097
- 600: { value: "#059669" },
3098
- 700: { value: "#047857" },
3099
- 800: { value: "#065f46" },
3100
- 900: { value: "#064e3b" },
3101
- 950: { value: "#022c22" }
3102
- },
3103
- green: {
3104
- 50: { value: "#f0fdf4" },
3105
- 100: { value: "#dcfce7" },
3106
- 200: { value: "#bbf7d0" },
3107
- 300: { value: "#86efac" },
3108
- 400: { value: "#4ade80" },
3109
- 500: { value: "#22c55e" },
3110
- 600: { value: "#16a34a" },
3111
- 700: { value: "#15803d" },
3112
- 800: { value: "#166534" },
3113
- 900: { value: "#14532d" },
3114
- 950: { value: "#052e16" }
3115
- },
3116
- lime: {
3117
- 50: { value: "#f7fee7" },
3118
- 100: { value: "#ecfccb" },
3119
- 200: { value: "#d9f99d" },
3120
- 300: { value: "#bef264" },
3121
- 400: { value: "#a3e635" },
3122
- 500: { value: "#84cc16" },
3123
- 600: { value: "#65a30d" },
3124
- 700: { value: "#4d7c0f" },
3125
- 800: { value: "#3f6212" },
3126
- 900: { value: "#365314" },
3127
- 950: { value: "#1a2e05" }
3128
- },
3129
- yellow: {
3130
- 50: { value: "#fefce8" },
3131
- 100: { value: "#fef9c3" },
3132
- 200: { value: "#fef08a" },
3133
- 300: { value: "#fde047" },
3134
- 400: { value: "#facc15" },
3135
- 500: { value: "#eab308" },
3136
- 600: { value: "#ca8a04" },
3137
- 700: { value: "#a16207" },
3138
- 800: { value: "#854d0e" },
3139
- 900: { value: "#713f12" },
3140
- 950: { value: "#422006" }
3141
- },
3142
- amber: {
3143
- 50: { value: "#fffbeb" },
3144
- 100: { value: "#fef3c7" },
3145
- 200: { value: "#fde68a" },
3146
- 300: { value: "#fcd34d" },
3147
- 400: { value: "#fbbf24" },
3148
- 500: { value: "#f59e0b" },
3149
- 600: { value: "#d97706" },
3150
- 700: { value: "#b45309" },
3151
- 800: { value: "#92400e" },
3152
- 900: { value: "#78350f" },
3153
- 950: { value: "#451a03" }
3154
- },
3155
- orange: {
3156
- 50: { value: "#fff7ed" },
3157
- 100: { value: "#ffedd5" },
3158
- 200: { value: "#fed7aa" },
3159
- 300: { value: "#fdba74" },
3160
- 400: { value: "#fb923c" },
3161
- 500: { value: "#f97316" },
3162
- 600: { value: "#ea580c" },
3163
- 700: { value: "#c2410c" },
3164
- 800: { value: "#9a3412" },
3165
- 900: { value: "#7c2d12" },
3166
- 950: { value: "#431407" }
3167
- },
3168
- red: {
3169
- 50: { value: "#fef2f2" },
3170
- 100: { value: "#fee2e2" },
3171
- 200: { value: "#fecaca" },
3172
- 300: { value: "#fca5a5" },
3173
- 400: { value: "#f87171" },
3174
- 500: { value: "#ef4444" },
3175
- 600: { value: "#dc2626" },
3176
- 700: { value: "#b91c1c" },
3177
- 800: { value: "#991b1b" },
3178
- 900: { value: "#7f1d1d" },
3179
- 950: { value: "#450a0a" }
3180
- },
3181
- neutral: {
3182
- 50: { value: "#fafafa" },
3183
- 100: { value: "#f5f5f5" },
3184
- 200: { value: "#e5e5e5" },
3185
- 300: { value: "#d4d4d4" },
3186
- 400: { value: "#a3a3a3" },
3187
- 500: { value: "#737373" },
3188
- 600: { value: "#525252" },
3189
- 700: { value: "#404040" },
3190
- 800: { value: "#262626" },
3191
- 900: { value: "#171717" },
3192
- 950: { value: "#0a0a0a" }
3193
- },
3194
- stone: {
3195
- 50: { value: "#fafaf9" },
3196
- 100: { value: "#f5f5f4" },
3197
- 200: { value: "#e7e5e4" },
3198
- 300: { value: "#d6d3d1" },
3199
- 400: { value: "#a8a29e" },
3200
- 500: { value: "#78716c" },
3201
- 600: { value: "#57534e" },
3202
- 700: { value: "#44403c" },
3203
- 800: { value: "#292524" },
3204
- 900: { value: "#1c1917" },
3205
- 950: { value: "#0c0a09" }
3206
- },
3207
- zinc: {
3208
- 50: { value: "#fafafa" },
3209
- 100: { value: "#f4f4f5" },
3210
- 200: { value: "#e4e4e7" },
3211
- 300: { value: "#d4d4d8" },
3212
- 400: { value: "#a1a1aa" },
3213
- 500: { value: "#71717a" },
3214
- 600: { value: "#52525b" },
3215
- 700: { value: "#3f3f46" },
3216
- 800: { value: "#27272a" },
3217
- 900: { value: "#18181b" },
3218
- 950: { value: "#09090b" }
3219
- },
3220
- gray: {
3221
- 50: { value: "#f9fafb" },
3222
- 100: { value: "#f3f4f6" },
3223
- 200: { value: "#e5e7eb" },
3224
- 300: { value: "#d1d5db" },
3225
- 400: { value: "#9ca3af" },
3226
- 500: { value: "#6b7280" },
3227
- 600: { value: "#4b5563" },
3228
- 700: { value: "#374151" },
3229
- 800: { value: "#1f2937" },
3230
- 900: { value: "#111827" },
3231
- 950: { value: "#030712" }
3232
- },
3233
- slate: {
3234
- 50: { value: "#f8fafc" },
3235
- 100: { value: "#f1f5f9" },
3236
- 200: { value: "#e2e8f0" },
3237
- 300: { value: "#cbd5e1" },
3238
- 400: { value: "#94a3b8" },
3239
- 500: { value: "#64748b" },
3240
- 600: { value: "#475569" },
3241
- 700: { value: "#334155" },
3242
- 800: { value: "#1e293b" },
3243
- 900: { value: "#0f172a" },
3244
- 950: { value: "#020617" }
3245
- }
3246
- };
3247
- var shadows = {
3248
- xs: { value: "0 1px 2px 0 rgb(0 0 0 / 0.05)" },
3249
- sm: { value: ["0 1px 3px 0 rgb(0 0 0 / 0.1)", "0 1px 2px -1px rgb(0 0 0 / 0.1)"] },
3250
- md: { value: ["0 4px 6px -1px rgb(0 0 0 / 0.1)", "0 2px 4px -2px rgb(0 0 0 / 0.1)"] },
3251
- lg: { value: ["0 10px 15px -3px rgb(0 0 0 / 0.1)", "0 4px 6px -4px rgb(0 0 0 / 0.1)"] },
3252
- xl: { value: ["0 20px 25px -5px rgb(0 0 0 / 0.1)", "0 8px 10px -6px rgb(0 0 0 / 0.1)"] },
3253
- "2xl": { value: "0 25px 50px -12px rgb(0 0 0 / 0.25)" },
3254
- inner: { value: "inset 0 2px 4px 0 rgb(0 0 0 / 0.05)" }
3255
- };
3256
- var spacing2 = {
3257
- 0: { value: "0rem" },
3258
- 0.5: { value: "0.125rem" },
3259
- 1: { value: "0.25rem" },
3260
- 1.5: { value: "0.375rem" },
3261
- 2: { value: "0.5rem" },
3262
- 2.5: { value: "0.625rem" },
3263
- 3: { value: "0.75rem" },
3264
- 3.5: { value: "0.875rem" },
3265
- 4: { value: "1rem" },
3266
- 5: { value: "1.25rem" },
3267
- 6: { value: "1.5rem" },
3268
- 7: { value: "1.75rem" },
3269
- 8: { value: "2rem" },
3270
- 9: { value: "2.25rem" },
3271
- 10: { value: "2.5rem" },
3272
- 11: { value: "2.75rem" },
3273
- 12: { value: "3rem" },
3274
- 14: { value: "3.5rem" },
3275
- 16: { value: "4rem" },
3276
- 20: { value: "5rem" },
3277
- 24: { value: "6rem" },
3278
- 28: { value: "7rem" },
3279
- 32: { value: "8rem" },
3280
- 36: { value: "9rem" },
3281
- 40: { value: "10rem" },
3282
- 44: { value: "11rem" },
3283
- 48: { value: "12rem" },
3284
- 52: { value: "13rem" },
3285
- 56: { value: "14rem" },
3286
- 60: { value: "15rem" },
3287
- 64: { value: "16rem" },
3288
- 72: { value: "18rem" },
3289
- 80: { value: "20rem" },
3290
- 96: { value: "24rem" }
3291
- };
3292
- var largeSizes = {
3293
- xs: { value: "20rem" },
3294
- sm: { value: "24rem" },
3295
- md: { value: "28rem" },
3296
- lg: { value: "32rem" },
3297
- xl: { value: "36rem" },
3298
- "2xl": { value: "42rem" },
3299
- "3xl": { value: "48rem" },
3300
- "4xl": { value: "56rem" },
3301
- "5xl": { value: "64rem" },
3302
- "6xl": { value: "72rem" },
3303
- "7xl": { value: "80rem" },
3304
- "8xl": { value: "90rem" },
3305
- prose: { value: "65ch" }
3306
- };
3307
- var sizes = {
3308
- ...spacing2,
3309
- ...largeSizes,
3310
- full: { value: "100%" },
3311
- min: { value: "min-content" },
3312
- max: { value: "max-content" },
3313
- fit: { value: "fit-content" }
3314
- };
3315
- var fontSizes = {
3316
- "2xs": { value: "0.5rem" },
3317
- xs: { value: "0.75rem" },
3318
- sm: { value: "0.875rem" },
3319
- md: { value: "1rem" },
3320
- lg: { value: "1.125rem" },
3321
- xl: { value: "1.25rem" },
3322
- "2xl": { value: "1.5rem" },
3323
- "3xl": { value: "1.875rem" },
3324
- "4xl": { value: "2.25rem" },
3325
- "5xl": { value: "3rem" },
3326
- "6xl": { value: "3.75rem" },
3327
- "7xl": { value: "4.5rem" },
3328
- "8xl": { value: "6rem" },
3329
- "9xl": { value: "8rem" }
3330
- };
3331
- var fontWeights = {
3332
- thin: { value: "100" },
3333
- extralight: { value: "200" },
3334
- light: { value: "300" },
3335
- normal: { value: "400" },
3336
- medium: { value: "500" },
3337
- semibold: { value: "600" },
3338
- bold: { value: "700" },
3339
- extrabold: { value: "800" },
3340
- black: { value: "900" }
3341
- };
3342
- var letterSpacings = {
3343
- tighter: { value: "-0.05em" },
3344
- tight: { value: "-0.025em" },
3345
- normal: { value: "0em" },
3346
- wide: { value: "0.025em" },
3347
- wider: { value: "0.05em" },
3348
- widest: { value: "0.1em" }
3349
- };
3350
- var lineHeights = {
3351
- none: { value: "1" },
3352
- tight: { value: "1.25" },
3353
- snug: { value: "1.375" },
3354
- normal: { value: "1.5" },
3355
- relaxed: { value: "1.625" },
3356
- loose: { value: "2" }
3357
- };
3358
- var fonts = {
3359
- sans: {
3360
- value: [
3361
- "ui-sans-serif",
3362
- "system-ui",
3363
- "-apple-system",
3364
- "BlinkMacSystemFont",
3365
- '"Segoe UI"',
3366
- "Roboto",
3367
- '"Helvetica Neue"',
3368
- "Arial",
3369
- '"Noto Sans"',
3370
- "sans-serif",
3371
- '"Apple Color Emoji"',
3372
- '"Segoe UI Emoji"',
3373
- '"Segoe UI Symbol"',
3374
- '"Noto Color Emoji"'
3375
- ]
3376
- },
3377
- serif: {
3378
- value: ["ui-serif", "Georgia", "Cambria", '"Times New Roman"', "Times", "serif"]
3379
- },
3380
- mono: {
3381
- value: [
3382
- "ui-monospace",
3383
- "SFMono-Regular",
3384
- "Menlo",
3385
- "Monaco",
3386
- "Consolas",
3387
- '"Liberation Mono"',
3388
- '"Courier New"',
3389
- "monospace"
3390
- ]
3391
- }
3392
- };
3393
- var textStyles = {
3394
- xs: {
3395
- value: {
3396
- fontSize: "0.75rem",
3397
- lineHeight: "1rem"
3398
- }
3399
- },
3400
- sm: {
3401
- value: {
3402
- fontSize: "0.875rem",
3403
- lineHeight: "1.25rem"
3404
- }
3405
- },
3406
- md: {
3407
- value: {
3408
- fontSize: "1rem",
3409
- lineHeight: "1.5rem"
3410
- }
3411
- },
3412
- lg: {
3413
- value: {
3414
- fontSize: "1.125rem",
3415
- lineHeight: "1.75rem"
3416
- }
3417
- },
3418
- xl: {
3419
- value: {
3420
- fontSize: "1.25rem",
3421
- lineHeight: "1.75rem"
3422
- }
3423
- },
3424
- "2xl": {
3425
- value: {
3426
- fontSize: "1.5rem",
3427
- lineHeight: "2rem"
3428
- }
3429
- },
3430
- "3xl": {
3431
- value: {
3432
- fontSize: "1.875rem",
3433
- lineHeight: "2.25rem"
3434
- }
3435
- },
3436
- "4xl": {
3437
- value: {
3438
- fontSize: "2.25rem",
3439
- lineHeight: "2.5rem"
3440
- }
3441
- },
3442
- "5xl": {
3443
- value: {
3444
- fontSize: "3rem",
3445
- lineHeight: "1"
3446
- }
3447
- },
3448
- "6xl": {
3449
- value: {
3450
- fontSize: "3.75rem",
3451
- lineHeight: "1"
3452
- }
3453
- },
3454
- "7xl": {
3455
- value: {
3456
- fontSize: "4.5rem",
3457
- lineHeight: "1"
3458
- }
3459
- },
3460
- "8xl": {
3461
- value: {
3462
- fontSize: "6rem",
3463
- lineHeight: "1"
3464
- }
3465
- },
3466
- "9xl": {
3467
- value: {
3468
- fontSize: "8rem",
3469
- lineHeight: "1"
3470
- }
3471
- }
3472
- };
3473
- var defineTokens = (v) => v;
3474
- var tokens = defineTokens({
3475
- aspectRatios,
3476
- borders,
3477
- easings: {
3478
- default: { value: "cubic-bezier(0.4, 0, 0.2, 1)" },
3479
- linear: { value: "linear" },
3480
- in: { value: "cubic-bezier(0.4, 0, 1, 1)" },
3481
- out: { value: "cubic-bezier(0, 0, 0.2, 1)" },
3482
- "in-out": { value: "cubic-bezier(0.4, 0, 0.2, 1)" }
3483
- },
3484
- durations: {
3485
- fastest: { value: "50ms" },
3486
- faster: { value: "100ms" },
3487
- fast: { value: "150ms" },
3488
- normal: { value: "200ms" },
3489
- slow: { value: "300ms" },
3490
- slower: { value: "400ms" },
3491
- slowest: { value: "500ms" }
3492
- },
3493
- radii: {
3494
- xs: { value: "0.125rem" },
3495
- sm: { value: "0.25rem" },
3496
- md: { value: "0.375rem" },
3497
- lg: { value: "0.5rem" },
3498
- xl: { value: "0.75rem" },
3499
- "2xl": { value: "1rem" },
3500
- "3xl": { value: "1.5rem" },
3501
- full: { value: "9999px" }
3502
- },
3503
- fontWeights,
3504
- lineHeights,
3505
- fonts,
3506
- letterSpacings,
3507
- fontSizes,
3508
- shadows,
3509
- colors,
3510
- blurs: {
3511
- sm: { value: "4px" },
3512
- base: { value: "8px" },
3513
- md: { value: "12px" },
3514
- lg: { value: "16px" },
3515
- xl: { value: "24px" },
3516
- "2xl": { value: "40px" },
3517
- "3xl": { value: "64px" }
3518
- },
3519
- spacing: spacing2,
3520
- sizes,
3521
- animations
3522
- });
3523
- var definePreset2 = (config2) => config2;
3524
- var preset2 = definePreset2({
3525
- theme: {
3526
- keyframes,
3527
- breakpoints,
3528
- tokens,
3529
- textStyles,
3530
- containerSizes
3531
- }
3532
- });
3533
- var src_default2 = preset2;
3534
-
3535
- // ../fixture/src/recipes.ts
3536
- init_esm_shims();
3537
- var recipes = {
3538
- textStyle: {
3539
- className: "textStyle",
3540
- base: {
3541
- fontFamily: "mono",
3542
- divideX: "20px"
3543
- },
3544
- variants: {
3545
- size: {
3546
- h1: {
3547
- fontSize: "5rem",
3548
- lineHeight: "1em",
3549
- fontWeight: 800
3550
- },
3551
- h2: {
3552
- fontSize: "3rem",
3553
- lineHeight: "1.2em",
3554
- fontWeight: 700,
3555
- letterSpacing: "-0.03em"
3556
- }
3557
- }
3558
- }
3559
- },
3560
- tooltipStyle: {
3561
- className: "tooltipStyle",
3562
- base: {
3563
- "&[data-tooltip], & [data-tooltip]": {
3564
- color: { _dark: "red" }
3565
- }
3566
- }
3567
- },
3568
- cardStyle: {
3569
- className: "card",
3570
- variants: {
3571
- rounded: {
3572
- true: {
3573
- borderRadius: "0.375rem"
3574
- }
3575
- }
3576
- }
3577
- },
3578
- buttonStyle: {
3579
- className: "buttonStyle",
3580
- base: {
3581
- display: "inline-flex",
3582
- alignItems: "center",
3583
- justifyContent: "center",
3584
- _hover: {
3585
- backgroundColor: "red.200",
3586
- fontSize: "3xl",
3587
- color: "white"
3588
- }
3589
- },
3590
- variants: {
3591
- size: {
3592
- sm: {
3593
- height: "2.5rem",
3594
- minWidth: "2.5rem",
3595
- padding: "0 0.5rem"
3596
- },
3597
- md: {
3598
- height: "3rem",
3599
- minWidth: "3rem",
3600
- padding: "0 0.75rem"
3601
- }
3602
- },
3603
- variant: {
3604
- solid: {
3605
- backgroundColor: "blue",
3606
- color: "white",
3607
- _hover: {
3608
- backgroundColor: "darkblue"
3609
- },
3610
- "&[data-disabled]": {
3611
- backgroundColor: "gray",
3612
- color: "black",
3613
- fontSize: "2xl"
3614
- }
3615
- },
3616
- outline: {
3617
- backgroundColor: "transparent",
3618
- border: "1px solid blue",
3619
- color: "blue",
3620
- _hover: {
3621
- backgroundColor: "blue",
3622
- color: "white"
3623
- },
3624
- "&[data-disabled]": {
3625
- backgroundColor: "transparent",
3626
- border: "1px solid gray",
3627
- color: "gray"
3628
- }
3629
- }
3630
- }
3631
- },
3632
- defaultVariants: {
3633
- size: "md",
3634
- variant: "solid"
3635
- }
3636
- }
3637
- };
3638
-
3639
- // ../fixture/src/slot-recipes.ts
3640
- init_esm_shims();
3641
- var slotRecipes = {
3642
- checkbox: {
3643
- className: "checkbox",
3644
- slots: ["root", "control", "label"],
3645
- base: {
3646
- root: { display: "flex", alignItems: "center", gap: "2" },
3647
- control: { borderWidth: "1px", borderRadius: "sm" },
3648
- label: { marginStart: "2" }
3649
- },
3650
- variants: {
3651
- size: {
3652
- sm: {
3653
- control: { textStyle: "headline.h1", width: "8", height: "8" },
3654
- label: { fontSize: "sm" }
3655
- },
3656
- md: {
3657
- control: { width: "10", height: "10" },
3658
- label: { fontSize: "md" }
3659
- },
3660
- lg: {
3661
- control: { width: "12", height: "12" },
3662
- label: { fontSize: "lg" }
3663
- }
3664
- }
3665
- },
3666
- defaultVariants: {
3667
- size: "sm"
3668
- }
3669
- },
3670
- badge: {
3671
- className: "badge",
3672
- slots: ["title", "body"],
3673
- base: {
3674
- title: { bg: "red.300", rounded: "sm" }
3675
- },
3676
- variants: {
3677
- size: {
3678
- sm: {
3679
- title: { px: "4" },
3680
- body: { color: "red" }
3681
- }
3682
- },
3683
- raised: {
3684
- true: {
3685
- title: { shadow: "md" }
3686
- }
3687
- }
3688
- },
3689
- compoundVariants: [
3690
- {
3691
- raised: true,
3692
- size: "sm",
3693
- css: {
3694
- title: { color: "ButtonHighlight" }
3695
- }
3696
- }
3697
- ]
3698
- }
3699
- };
3700
-
3701
- // ../fixture/src/semantic-tokens.ts
3702
- init_esm_shims();
3703
- var semanticTokens = {
3704
- colors: {
3705
- primary: { value: { base: "{colors.red.500}", _dark: "{colors.red.400}" } },
3706
- secondary: { value: { base: "{colors.red.800}", _dark: "{colors.red.700}" } },
3707
- complex: { value: { base: "{colors.red.800}", _dark: { _highContrast: "{colors.red.700}" } } },
3708
- surface: {
3709
- value: {
3710
- _materialTheme: { base: "#m-b", _dark: "#m-d" },
3711
- _pastelTheme: { base: "#p-b", _dark: { md: "#p-d" } }
3712
- }
3713
- },
3714
- button: {
3715
- thick: {
3716
- value: { base: "#fff", _dark: "#000" }
3717
- },
3718
- card: {
3719
- body: {
3720
- value: { base: "#fff", _dark: "#000" }
3721
- },
3722
- heading: {
3723
- value: { base: "#fff", _dark: "#000" }
3724
- }
3725
- }
3726
- }
3727
- },
3728
- spacing: {
3729
- gutter: { value: { base: "{spacing.4}", lg: "{spacing.5}" } }
3730
- }
3731
- };
3732
-
3733
- // ../fixture/src/config.ts
3734
- var conditions2 = {
3735
- ...src_default.conditions,
3736
- materialTheme: "[data-color=material] &",
3737
- pastelTheme: "[data-color=pastel] &",
3738
- dark: "[data-theme=dark] &, .dark &, &.dark, &[data-theme=dark]",
3739
- light: "[data-theme=light] &, .light &, &.light, &[data-theme=light]"
3740
- };
3741
- var theme = src_default2.theme;
3742
- var tokens2 = {
3743
- ...theme.tokens,
3744
- colors: {
3745
- ...theme.tokens?.colors,
3746
- deep: {
3747
- test: {
3748
- yam: {
3749
- value: "%555"
3750
- },
3751
- pool: {
3752
- poller: {
3753
- value: "#fff"
3754
- },
3755
- tall: {
3756
- value: "$dfdf"
3757
- }
3758
- }
3759
- }
3760
- }
3761
- }
3762
- };
3763
- var textStyles2 = {
3764
- headline: {
3765
- h1: {
3766
- value: {
3767
- fontSize: "2rem",
3768
- fontWeight: "bold"
3769
- }
3770
- },
3771
- h2: {
3772
- value: {
3773
- fontSize: { base: "1.5rem", lg: "2rem" },
3774
- fontWeight: "bold"
3775
- }
3776
- }
3777
- }
3778
- };
3779
- var fixturePreset = {
3780
- ...src_default,
3781
- conditions: conditions2,
3782
- theme: {
3783
- ...theme,
3784
- textStyles: textStyles2,
3785
- tokens: tokens2,
3786
- semanticTokens,
3787
- recipes,
3788
- slotRecipes
3789
- }
3790
- };
3791
-
3792
- // ../fixture/src/create-context.ts
3793
- init_esm_shims();
3794
- import { mergeConfigs } from "@pandacss/config";
3795
- import { Generator } from "@pandacss/generator";
3796
- import { stringifyJson, parseJson } from "@pandacss/shared";
3797
-
3798
- // ../sandbox/v9/panda.config.ts
3799
- init_esm_shims();
3800
-
3801
- // ../node_modules/.pnpm/@pandacss+dev@1.8.2_typescript@5.7.3/node_modules/@pandacss/dev/dist/index.mjs
3802
- init_esm_shims();
3803
- import { PandaError } from "@pandacss/shared";
3804
- function defineConfig(config2) {
3805
- return Object.assign(config2, { name: "__panda.config__" });
3806
- }
3807
-
3808
- // ../sandbox/v9/panda.config.ts
3809
- var panda_config_default = defineConfig({
3810
- preflight: true,
3811
- include: ["./src/**/*.{tsx,jsx}", "./pages/**/*.{jsx,tsx}"],
3812
- exclude: [],
3813
- outdir: "styled-system",
3814
- jsxFactory: "panda",
3815
- jsxFramework: "react",
3816
- theme: {
3817
- extend: {
3818
- tokens: {
3819
- colors: {
3820
- red: {
3821
- 400: {
3822
- value: "#ff0000",
3823
- description: "red color",
3824
- deprecated: true
3825
- }
3826
- }
3827
- }
3828
- },
3829
- semanticTokens: {
3830
- colors: {
3831
- text: { value: { base: "{colors.gray.600}", _osDark: "{colors.gray.400}" } },
3832
- bg: { value: { base: "{colors.gray.600}", _osDark: "{colors.gray.400}" } }
3833
- }
3834
- },
3835
- recipes: {
3836
- button: {
3837
- className: "button",
3838
- jsx: ["Button", "ListedButton", /WithRegex$/, "PrimaryButtonLike"],
3839
- description: "A button styles",
3840
- base: {
3841
- fontSize: "lg"
3842
- },
3843
- variants: {
3844
- size: {
3845
- sm: {
3846
- padding: "2",
3847
- borderRadius: "sm"
3848
- },
3849
- md: {
3850
- padding: "4",
3851
- borderRadius: "md"
3852
- }
3853
- },
3854
- variant: {
3855
- primary: {
3856
- color: "white",
3857
- backgroundColor: "blue.500"
3858
- },
3859
- danger: {
3860
- color: "white",
3861
- backgroundColor: "red.500"
3862
- },
3863
- secondary: {
3864
- color: "pink.300",
3865
- backgroundColor: "green.500"
3866
- },
3867
- purple: {
3868
- color: "amber.300",
3869
- backgroundColor: "purple.500"
3870
- }
3871
- },
3872
- state: {
3873
- focused: {
3874
- color: "green"
3875
- },
3876
- hovered: {
3877
- color: "pink.400"
3878
- }
3879
- },
3880
- rounded: {
3881
- true: {
3882
- borderRadius: "md"
3883
- }
3884
- }
3885
- },
3886
- compoundVariants: [
3887
- {
3888
- size: "sm",
3889
- variant: "primary",
3890
- css: {
3891
- fontSize: "12px"
3892
- }
3893
- },
3894
- {
3895
- variant: ["primary", "danger"],
3896
- state: "focused",
3897
- css: {
3898
- padding: 4,
3899
- fontWeight: "bold",
3900
- fontSize: "24px"
3901
- }
3902
- }
3903
- ]
3904
- }
3905
- }
3906
- }
3907
- },
3908
- globalCss: {
3909
- "*": {
3910
- fontFamily: "Inter",
3911
- margin: "0"
3912
- },
3913
- a: {
3914
- color: "inherit",
3915
- textDecoration: "none"
3916
- }
3917
- }
3918
- });
3919
-
3920
- // ../fixture/src/create-context.ts
3921
- var config = {
3922
- ...fixturePreset,
3923
- optimize: true,
3924
- cwd: "",
3925
- outdir: "styled-system",
3926
- include: [],
3927
- //
3928
- cssVarRoot: ":where(html)",
3929
- jsxFramework: "react"
3930
- };
3931
- var fixtureDefaults = {
3932
- dependencies: [],
3933
- config,
3934
- path: "",
3935
- hooks: {},
3936
- serialized: stringifyJson(config),
3937
- deserialize: () => parseJson(stringifyJson(config))
3938
- };
3939
- var createGeneratorContext = (userConfig) => {
3940
- const resolvedConfig = userConfig ? mergeConfigs([fixtureDefaults.config, userConfig]) : fixtureDefaults.config;
3941
- return new Generator({ ...fixtureDefaults, config: resolvedConfig });
3942
- };
3943
-
3944
- // ../fixture/src/layers.ts
3945
- init_esm_shims();
3946
-
3947
- // src/utils/worker.ts
3948
- import { resolveTsPathPattern } from "@pandacss/config/ts-path";
3949
- import { findConfig, loadConfig } from "@pandacss/config";
3950
- import path from "path";
3951
- import micromatch from "micromatch";
3952
- var contextCache = {};
3953
- async function _getContext(configPath) {
3954
- if (!configPath) throw new Error("Invalid config path");
3955
- const cwd = path.dirname(configPath);
3956
- const conf = await loadConfig({ file: configPath, cwd });
3957
- const ctx = new Generator2(conf);
3958
- return ctx;
3959
- }
3960
- async function getContext(opts) {
3961
- if (process.env.NODE_ENV === "test") {
3962
- const ctx = createGeneratorContext({
3963
- ...panda_config_default,
3964
- include: ["**/*"],
3965
- exclude: ["**/Invalid.tsx", "**/panda.config.ts"],
3966
- importMap: "./panda",
3967
- jsxFactory: "styled"
3968
- });
3969
- return ctx;
3970
- } else {
3971
- const configPath = findConfig({ cwd: opts.configPath ?? opts.currentFile });
3972
- if (!contextCache[configPath]) {
3973
- contextCache[configPath] = _getContext(configPath);
3974
- }
3975
- return contextCache[configPath];
3976
- }
3977
- }
3978
- async function filterInvalidTokens(ctx, paths) {
3979
- const invalid = paths.filter((path2) => !ctx.utility.tokens.view.get(path2));
3980
- if (invalid.length > 0) {
3981
- console.error("filterInvalidTokens", { paths, invalid });
3982
- }
3983
- return invalid;
3984
- }
3985
- async function filterDeprecatedTokens(ctx, tokens3) {
3986
- return tokens3.filter((token) => {
3987
- const value = typeof token === "string" ? token : token.category + "." + token.value;
3988
- return ctx.utility.tokens.isDeprecated(value);
3989
- });
3990
- }
3991
- async function isColorToken(ctx, value) {
3992
- return !!ctx.utility.tokens.view.categoryMap.get("colors")?.get(value);
3993
- }
3994
- async function getPropCategory(ctx, _attr) {
3995
- const longhand = await resolveLongHand(ctx, _attr);
3996
- const attr = longhand || _attr;
3997
- const attrConfig = ctx.utility.config[attr];
3998
- return typeof attrConfig?.values === "string" ? attrConfig.values : void 0;
3999
- }
4000
- async function isColorAttribute(ctx, _attr) {
4001
- const category = await getPropCategory(ctx, _attr);
4002
- return category === "colors";
4003
- }
4004
- async function isValidFile(ctx, fileName) {
4005
- const { include, exclude } = ctx.config;
4006
- const cwd = ctx.config.cwd || process.cwd();
4007
- const relativePath = path.isAbsolute(fileName) ? path.relative(cwd, fileName) : fileName;
4008
- return micromatch.isMatch(relativePath, include, { ignore: exclude, dot: true });
4009
- }
4010
- async function resolveShorthands(ctx, name) {
4011
- return ctx.utility.getPropShorthandsMap().get(name);
4012
- }
4013
- var reverseLonghandCache = /* @__PURE__ */ new WeakMap();
4014
- async function resolveLongHand(ctx, name) {
4015
- let reverseMap = reverseLonghandCache.get(ctx);
4016
- if (!reverseMap) {
4017
- reverseMap = /* @__PURE__ */ new Map();
4018
- for (const [key, values] of ctx.utility.getPropShorthandsMap()) {
4019
- for (const value of values) {
4020
- reverseMap.set(value, key);
4021
- }
4022
- }
4023
- reverseLonghandCache.set(ctx, reverseMap);
4024
- }
4025
- return reverseMap.get(name);
4026
- }
4027
- async function isValidProperty(ctx, name, patternName) {
4028
- const isValid = ctx.isValidProperty(name);
4029
- if (isValid) return true;
4030
- if (!patternName) return false;
4031
- if (patternName === ctx.config.jsxFactory) {
4032
- return false;
4033
- }
4034
- const pattern = ctx.patterns.details.find((p) => p.baseName === patternName || p.jsx.includes(patternName))?.config.properties;
4035
- if (!pattern) return false;
4036
- return Object.keys(pattern).includes(name);
4037
- }
4038
- async function matchFile(ctx, name, imports) {
4039
- const file = ctx.imports.file(imports);
4040
- return file.match(name);
4041
- }
4042
- async function matchImports(ctx, result) {
4043
- const isMatch = ctx.imports.match(result, (mod) => {
4044
- const { tsOptions } = ctx.parserOptions;
4045
- if (!tsOptions?.pathMappings) return;
4046
- return resolveTsPathPattern(tsOptions.pathMappings, mod);
4047
- });
4048
- return isMatch;
4049
- }
4050
- async function getJsxFactory(ctx) {
4051
- return ctx.config.jsxFactory;
4052
- }
4053
- async function runAsync(action, opts, ...args) {
4054
- const ctx = await getContext(opts);
4055
- switch (action) {
4056
- case "matchImports":
4057
- return matchImports(ctx, ...args);
4058
- case "matchFile":
4059
- return matchFile(ctx, ...args);
4060
- case "isValidProperty":
4061
- return isValidProperty(ctx, ...args);
4062
- case "resolveLongHand":
4063
- return resolveLongHand(ctx, ...args);
4064
- case "resolveShorthands":
4065
- return resolveShorthands(ctx, ...args);
4066
- case "isValidFile":
4067
- return isValidFile(ctx, opts.currentFile);
4068
- case "isColorAttribute":
4069
- return isColorAttribute(ctx, ...args);
4070
- case "isColorToken":
4071
- return isColorToken(ctx, ...args);
4072
- case "filterInvalidTokens":
4073
- return filterInvalidTokens(ctx, ...args);
4074
- case "getPropCategory":
4075
- return getPropCategory(ctx, ...args);
4076
- case "getJsxFactory":
4077
- return getJsxFactory(ctx);
4078
- case "filterDeprecatedTokens":
4079
- return filterDeprecatedTokens(ctx, ...args);
4080
- }
4081
- }
4082
- function run(action, opts, ...args) {
4083
- return runAsync(action, opts, ...args);
4084
- }
4085
- runAsWorker(run);
4086
- export {
4087
- getContext,
4088
- run,
4089
- runAsync
4090
- };