@nimbus-ds/styles 6.13.0-rc.1 → 6.13.0-rc.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (5) hide show
  1. package/CHANGELOG.md +3 -1
  2. package/dist/index.css +1706 -1143
  3. package/dist/index.d.ts +263 -187
  4. package/dist/index.js +1 -1
  5. package/package.json +2 -2
package/dist/index.d.ts CHANGED
@@ -254,6 +254,11 @@ export interface BoxSprinkle {
254
254
  transitionDelay?: string | BoxConditions<string>;
255
255
  transitionDuration?: TransitionDurationProperties | BoxConditions<TransitionDurationProperties>;
256
256
  zIndex?: number | BoxConditions<number>;
257
+ backgroundImage?: string | BoxConditions<string>;
258
+ backgroundPosition?: string | BoxConditions<string>;
259
+ backgroundBlendMode?: string | BoxConditions<string>;
260
+ backgroundRepeat?: string | BoxConditions<string>;
261
+ backgroundSize?: string | BoxConditions<string>;
257
262
  }
258
263
  export declare const box: {
259
264
  sprinkle: import("rainbow-sprinkles/dist/declarations/src/createRuntimeFn").SprinklesFn<[
@@ -263,27 +268,27 @@ export declare const box: {
263
268
  values: {
264
269
  grid: {
265
270
  default: string;
266
- conditions: Record<"xs" | "md" | "lg" | "focus" | "active" | "disabled" | "hover", string>;
271
+ conditions: Record<"xs" | "md" | "lg" | "xl" | "focus" | "active" | "disabled" | "hover", string>;
267
272
  };
268
273
  none: {
269
274
  default: string;
270
- conditions: Record<"xs" | "md" | "lg" | "focus" | "active" | "disabled" | "hover", string>;
275
+ conditions: Record<"xs" | "md" | "lg" | "xl" | "focus" | "active" | "disabled" | "hover", string>;
271
276
  };
272
277
  flex: {
273
278
  default: string;
274
- conditions: Record<"xs" | "md" | "lg" | "focus" | "active" | "disabled" | "hover", string>;
279
+ conditions: Record<"xs" | "md" | "lg" | "xl" | "focus" | "active" | "disabled" | "hover", string>;
275
280
  };
276
281
  block: {
277
282
  default: string;
278
- conditions: Record<"xs" | "md" | "lg" | "focus" | "active" | "disabled" | "hover", string>;
283
+ conditions: Record<"xs" | "md" | "lg" | "xl" | "focus" | "active" | "disabled" | "hover", string>;
279
284
  };
280
285
  "inline-flex": {
281
286
  default: string;
282
- conditions: Record<"xs" | "md" | "lg" | "focus" | "active" | "disabled" | "hover", string>;
287
+ conditions: Record<"xs" | "md" | "lg" | "xl" | "focus" | "active" | "disabled" | "hover", string>;
283
288
  };
284
289
  "inline-grid": {
285
290
  default: string;
286
- conditions: Record<"xs" | "md" | "lg" | "focus" | "active" | "disabled" | "hover", string>;
291
+ conditions: Record<"xs" | "md" | "lg" | "xl" | "focus" | "active" | "disabled" | "hover", string>;
287
292
  };
288
293
  };
289
294
  staticScale: Display[];
@@ -293,19 +298,19 @@ export declare const box: {
293
298
  values: {
294
299
  row: {
295
300
  default: string;
296
- conditions: Record<"xs" | "md" | "lg" | "focus" | "active" | "disabled" | "hover", string>;
301
+ conditions: Record<"xs" | "md" | "lg" | "xl" | "focus" | "active" | "disabled" | "hover", string>;
297
302
  };
298
303
  column: {
299
304
  default: string;
300
- conditions: Record<"xs" | "md" | "lg" | "focus" | "active" | "disabled" | "hover", string>;
305
+ conditions: Record<"xs" | "md" | "lg" | "xl" | "focus" | "active" | "disabled" | "hover", string>;
301
306
  };
302
307
  "column-reverse": {
303
308
  default: string;
304
- conditions: Record<"xs" | "md" | "lg" | "focus" | "active" | "disabled" | "hover", string>;
309
+ conditions: Record<"xs" | "md" | "lg" | "xl" | "focus" | "active" | "disabled" | "hover", string>;
305
310
  };
306
311
  "row-reverse": {
307
312
  default: string;
308
- conditions: Record<"xs" | "md" | "lg" | "focus" | "active" | "disabled" | "hover", string>;
313
+ conditions: Record<"xs" | "md" | "lg" | "xl" | "focus" | "active" | "disabled" | "hover", string>;
309
314
  };
310
315
  };
311
316
  staticScale: FlexDirection[];
@@ -315,15 +320,15 @@ export declare const box: {
315
320
  values: {
316
321
  nowrap: {
317
322
  default: string;
318
- conditions: Record<"xs" | "md" | "lg" | "focus" | "active" | "disabled" | "hover", string>;
323
+ conditions: Record<"xs" | "md" | "lg" | "xl" | "focus" | "active" | "disabled" | "hover", string>;
319
324
  };
320
325
  wrap: {
321
326
  default: string;
322
- conditions: Record<"xs" | "md" | "lg" | "focus" | "active" | "disabled" | "hover", string>;
327
+ conditions: Record<"xs" | "md" | "lg" | "xl" | "focus" | "active" | "disabled" | "hover", string>;
323
328
  };
324
329
  "wrap-reverse": {
325
330
  default: string;
326
- conditions: Record<"xs" | "md" | "lg" | "focus" | "active" | "disabled" | "hover", string>;
331
+ conditions: Record<"xs" | "md" | "lg" | "xl" | "focus" | "active" | "disabled" | "hover", string>;
327
332
  };
328
333
  };
329
334
  staticScale: FlexWrap[];
@@ -333,27 +338,27 @@ export declare const box: {
333
338
  values: {
334
339
  center: {
335
340
  default: string;
336
- conditions: Record<"xs" | "md" | "lg" | "focus" | "active" | "disabled" | "hover", string>;
341
+ conditions: Record<"xs" | "md" | "lg" | "xl" | "focus" | "active" | "disabled" | "hover", string>;
337
342
  };
338
343
  "flex-end": {
339
344
  default: string;
340
- conditions: Record<"xs" | "md" | "lg" | "focus" | "active" | "disabled" | "hover", string>;
345
+ conditions: Record<"xs" | "md" | "lg" | "xl" | "focus" | "active" | "disabled" | "hover", string>;
341
346
  };
342
347
  "flex-start": {
343
348
  default: string;
344
- conditions: Record<"xs" | "md" | "lg" | "focus" | "active" | "disabled" | "hover", string>;
349
+ conditions: Record<"xs" | "md" | "lg" | "xl" | "focus" | "active" | "disabled" | "hover", string>;
345
350
  };
346
351
  "space-around": {
347
352
  default: string;
348
- conditions: Record<"xs" | "md" | "lg" | "focus" | "active" | "disabled" | "hover", string>;
353
+ conditions: Record<"xs" | "md" | "lg" | "xl" | "focus" | "active" | "disabled" | "hover", string>;
349
354
  };
350
355
  "space-between": {
351
356
  default: string;
352
- conditions: Record<"xs" | "md" | "lg" | "focus" | "active" | "disabled" | "hover", string>;
357
+ conditions: Record<"xs" | "md" | "lg" | "xl" | "focus" | "active" | "disabled" | "hover", string>;
353
358
  };
354
359
  "space-evenly": {
355
360
  default: string;
356
- conditions: Record<"xs" | "md" | "lg" | "focus" | "active" | "disabled" | "hover", string>;
361
+ conditions: Record<"xs" | "md" | "lg" | "xl" | "focus" | "active" | "disabled" | "hover", string>;
357
362
  };
358
363
  };
359
364
  staticScale: JustifyContent[];
@@ -363,23 +368,23 @@ export declare const box: {
363
368
  values: {
364
369
  center: {
365
370
  default: string;
366
- conditions: Record<"xs" | "md" | "lg" | "focus" | "active" | "disabled" | "hover", string>;
371
+ conditions: Record<"xs" | "md" | "lg" | "xl" | "focus" | "active" | "disabled" | "hover", string>;
367
372
  };
368
373
  "flex-end": {
369
374
  default: string;
370
- conditions: Record<"xs" | "md" | "lg" | "focus" | "active" | "disabled" | "hover", string>;
375
+ conditions: Record<"xs" | "md" | "lg" | "xl" | "focus" | "active" | "disabled" | "hover", string>;
371
376
  };
372
377
  "flex-start": {
373
378
  default: string;
374
- conditions: Record<"xs" | "md" | "lg" | "focus" | "active" | "disabled" | "hover", string>;
379
+ conditions: Record<"xs" | "md" | "lg" | "xl" | "focus" | "active" | "disabled" | "hover", string>;
375
380
  };
376
381
  baseline: {
377
382
  default: string;
378
- conditions: Record<"xs" | "md" | "lg" | "focus" | "active" | "disabled" | "hover", string>;
383
+ conditions: Record<"xs" | "md" | "lg" | "xl" | "focus" | "active" | "disabled" | "hover", string>;
379
384
  };
380
385
  stretch: {
381
386
  default: string;
382
- conditions: Record<"xs" | "md" | "lg" | "focus" | "active" | "disabled" | "hover", string>;
387
+ conditions: Record<"xs" | "md" | "lg" | "xl" | "focus" | "active" | "disabled" | "hover", string>;
383
388
  };
384
389
  };
385
390
  staticScale: AlignItems[];
@@ -389,47 +394,47 @@ export declare const box: {
389
394
  values: {
390
395
  inherit: {
391
396
  default: string;
392
- conditions: Record<"xs" | "md" | "lg" | "focus" | "active" | "disabled" | "hover", string>;
397
+ conditions: Record<"xs" | "md" | "lg" | "xl" | "focus" | "active" | "disabled" | "hover", string>;
393
398
  };
394
399
  none: {
395
400
  default: string;
396
- conditions: Record<"xs" | "md" | "lg" | "focus" | "active" | "disabled" | "hover", string>;
401
+ conditions: Record<"xs" | "md" | "lg" | "xl" | "focus" | "active" | "disabled" | "hover", string>;
397
402
  };
398
403
  all: {
399
404
  default: string;
400
- conditions: Record<"xs" | "md" | "lg" | "focus" | "active" | "disabled" | "hover", string>;
405
+ conditions: Record<"xs" | "md" | "lg" | "xl" | "focus" | "active" | "disabled" | "hover", string>;
401
406
  };
402
407
  fill: {
403
408
  default: string;
404
- conditions: Record<"xs" | "md" | "lg" | "focus" | "active" | "disabled" | "hover", string>;
409
+ conditions: Record<"xs" | "md" | "lg" | "xl" | "focus" | "active" | "disabled" | "hover", string>;
405
410
  };
406
411
  stroke: {
407
412
  default: string;
408
- conditions: Record<"xs" | "md" | "lg" | "focus" | "active" | "disabled" | "hover", string>;
413
+ conditions: Record<"xs" | "md" | "lg" | "xl" | "focus" | "active" | "disabled" | "hover", string>;
409
414
  };
410
415
  auto: {
411
416
  default: string;
412
- conditions: Record<"xs" | "md" | "lg" | "focus" | "active" | "disabled" | "hover", string>;
417
+ conditions: Record<"xs" | "md" | "lg" | "xl" | "focus" | "active" | "disabled" | "hover", string>;
413
418
  };
414
419
  visible: {
415
420
  default: string;
416
- conditions: Record<"xs" | "md" | "lg" | "focus" | "active" | "disabled" | "hover", string>;
421
+ conditions: Record<"xs" | "md" | "lg" | "xl" | "focus" | "active" | "disabled" | "hover", string>;
417
422
  };
418
423
  painted: {
419
424
  default: string;
420
- conditions: Record<"xs" | "md" | "lg" | "focus" | "active" | "disabled" | "hover", string>;
425
+ conditions: Record<"xs" | "md" | "lg" | "xl" | "focus" | "active" | "disabled" | "hover", string>;
421
426
  };
422
427
  visibleFill: {
423
428
  default: string;
424
- conditions: Record<"xs" | "md" | "lg" | "focus" | "active" | "disabled" | "hover", string>;
429
+ conditions: Record<"xs" | "md" | "lg" | "xl" | "focus" | "active" | "disabled" | "hover", string>;
425
430
  };
426
431
  visiblePainted: {
427
432
  default: string;
428
- conditions: Record<"xs" | "md" | "lg" | "focus" | "active" | "disabled" | "hover", string>;
433
+ conditions: Record<"xs" | "md" | "lg" | "xl" | "focus" | "active" | "disabled" | "hover", string>;
429
434
  };
430
435
  visibleStroke: {
431
436
  default: string;
432
- conditions: Record<"xs" | "md" | "lg" | "focus" | "active" | "disabled" | "hover", string>;
437
+ conditions: Record<"xs" | "md" | "lg" | "xl" | "focus" | "active" | "disabled" | "hover", string>;
433
438
  };
434
439
  };
435
440
  staticScale: PointerEvents[];
@@ -439,23 +444,23 @@ export declare const box: {
439
444
  values: {
440
445
  hidden: {
441
446
  default: string;
442
- conditions: Record<"xs" | "md" | "lg" | "focus" | "active" | "disabled" | "hover", string>;
447
+ conditions: Record<"xs" | "md" | "lg" | "xl" | "focus" | "active" | "disabled" | "hover", string>;
443
448
  };
444
449
  none: {
445
450
  default: string;
446
- conditions: Record<"xs" | "md" | "lg" | "focus" | "active" | "disabled" | "hover", string>;
451
+ conditions: Record<"xs" | "md" | "lg" | "xl" | "focus" | "active" | "disabled" | "hover", string>;
447
452
  };
448
453
  dashed: {
449
454
  default: string;
450
- conditions: Record<"xs" | "md" | "lg" | "focus" | "active" | "disabled" | "hover", string>;
455
+ conditions: Record<"xs" | "md" | "lg" | "xl" | "focus" | "active" | "disabled" | "hover", string>;
451
456
  };
452
457
  dotted: {
453
458
  default: string;
454
- conditions: Record<"xs" | "md" | "lg" | "focus" | "active" | "disabled" | "hover", string>;
459
+ conditions: Record<"xs" | "md" | "lg" | "xl" | "focus" | "active" | "disabled" | "hover", string>;
455
460
  };
456
461
  solid: {
457
462
  default: string;
458
- conditions: Record<"xs" | "md" | "lg" | "focus" | "active" | "disabled" | "hover", string>;
463
+ conditions: Record<"xs" | "md" | "lg" | "xl" | "focus" | "active" | "disabled" | "hover", string>;
459
464
  };
460
465
  };
461
466
  staticScale: BorderStyle[];
@@ -465,11 +470,11 @@ export declare const box: {
465
470
  values: {
466
471
  "border-box": {
467
472
  default: string;
468
- conditions: Record<"xs" | "md" | "lg" | "focus" | "active" | "disabled" | "hover", string>;
473
+ conditions: Record<"xs" | "md" | "lg" | "xl" | "focus" | "active" | "disabled" | "hover", string>;
469
474
  };
470
475
  "content-box": {
471
476
  default: string;
472
- conditions: Record<"xs" | "md" | "lg" | "focus" | "active" | "disabled" | "hover", string>;
477
+ conditions: Record<"xs" | "md" | "lg" | "xl" | "focus" | "active" | "disabled" | "hover", string>;
473
478
  };
474
479
  };
475
480
  staticScale: BoxSizing[];
@@ -479,23 +484,23 @@ export declare const box: {
479
484
  values: {
480
485
  inherit: {
481
486
  default: string;
482
- conditions: Record<"xs" | "md" | "lg" | "focus" | "active" | "disabled" | "hover", string>;
487
+ conditions: Record<"xs" | "md" | "lg" | "xl" | "focus" | "active" | "disabled" | "hover", string>;
483
488
  };
484
489
  auto: {
485
490
  default: string;
486
- conditions: Record<"xs" | "md" | "lg" | "focus" | "active" | "disabled" | "hover", string>;
491
+ conditions: Record<"xs" | "md" | "lg" | "xl" | "focus" | "active" | "disabled" | "hover", string>;
487
492
  };
488
493
  grab: {
489
494
  default: string;
490
- conditions: Record<"xs" | "md" | "lg" | "focus" | "active" | "disabled" | "hover", string>;
495
+ conditions: Record<"xs" | "md" | "lg" | "xl" | "focus" | "active" | "disabled" | "hover", string>;
491
496
  };
492
497
  "not-allowed": {
493
498
  default: string;
494
- conditions: Record<"xs" | "md" | "lg" | "focus" | "active" | "disabled" | "hover", string>;
499
+ conditions: Record<"xs" | "md" | "lg" | "xl" | "focus" | "active" | "disabled" | "hover", string>;
495
500
  };
496
501
  pointer: {
497
502
  default: string;
498
- conditions: Record<"xs" | "md" | "lg" | "focus" | "active" | "disabled" | "hover", string>;
503
+ conditions: Record<"xs" | "md" | "lg" | "xl" | "focus" | "active" | "disabled" | "hover", string>;
499
504
  };
500
505
  };
501
506
  staticScale: Cursor[];
@@ -505,23 +510,23 @@ export declare const box: {
505
510
  values: {
506
511
  fixed: {
507
512
  default: string;
508
- conditions: Record<"xs" | "md" | "lg" | "focus" | "active" | "disabled" | "hover", string>;
513
+ conditions: Record<"xs" | "md" | "lg" | "xl" | "focus" | "active" | "disabled" | "hover", string>;
509
514
  };
510
515
  absolute: {
511
516
  default: string;
512
- conditions: Record<"xs" | "md" | "lg" | "focus" | "active" | "disabled" | "hover", string>;
517
+ conditions: Record<"xs" | "md" | "lg" | "xl" | "focus" | "active" | "disabled" | "hover", string>;
513
518
  };
514
519
  relative: {
515
520
  default: string;
516
- conditions: Record<"xs" | "md" | "lg" | "focus" | "active" | "disabled" | "hover", string>;
521
+ conditions: Record<"xs" | "md" | "lg" | "xl" | "focus" | "active" | "disabled" | "hover", string>;
517
522
  };
518
523
  static: {
519
524
  default: string;
520
- conditions: Record<"xs" | "md" | "lg" | "focus" | "active" | "disabled" | "hover", string>;
525
+ conditions: Record<"xs" | "md" | "lg" | "xl" | "focus" | "active" | "disabled" | "hover", string>;
521
526
  };
522
527
  sticky: {
523
528
  default: string;
524
- conditions: Record<"xs" | "md" | "lg" | "focus" | "active" | "disabled" | "hover", string>;
529
+ conditions: Record<"xs" | "md" | "lg" | "xl" | "focus" | "active" | "disabled" | "hover", string>;
525
530
  };
526
531
  };
527
532
  staticScale: Position[];
@@ -531,19 +536,19 @@ export declare const box: {
531
536
  values: {
532
537
  hidden: {
533
538
  default: string;
534
- conditions: Record<"xs" | "md" | "lg" | "focus" | "active" | "disabled" | "hover", string>;
539
+ conditions: Record<"xs" | "md" | "lg" | "xl" | "focus" | "active" | "disabled" | "hover", string>;
535
540
  };
536
541
  auto: {
537
542
  default: string;
538
- conditions: Record<"xs" | "md" | "lg" | "focus" | "active" | "disabled" | "hover", string>;
543
+ conditions: Record<"xs" | "md" | "lg" | "xl" | "focus" | "active" | "disabled" | "hover", string>;
539
544
  };
540
545
  visible: {
541
546
  default: string;
542
- conditions: Record<"xs" | "md" | "lg" | "focus" | "active" | "disabled" | "hover", string>;
547
+ conditions: Record<"xs" | "md" | "lg" | "xl" | "focus" | "active" | "disabled" | "hover", string>;
543
548
  };
544
549
  scroll: {
545
550
  default: string;
546
- conditions: Record<"xs" | "md" | "lg" | "focus" | "active" | "disabled" | "hover", string>;
551
+ conditions: Record<"xs" | "md" | "lg" | "xl" | "focus" | "active" | "disabled" | "hover", string>;
547
552
  };
548
553
  };
549
554
  staticScale: Overflow[];
@@ -553,19 +558,19 @@ export declare const box: {
553
558
  values: {
554
559
  hidden: {
555
560
  default: string;
556
- conditions: Record<"xs" | "md" | "lg" | "focus" | "active" | "disabled" | "hover", string>;
561
+ conditions: Record<"xs" | "md" | "lg" | "xl" | "focus" | "active" | "disabled" | "hover", string>;
557
562
  };
558
563
  auto: {
559
564
  default: string;
560
- conditions: Record<"xs" | "md" | "lg" | "focus" | "active" | "disabled" | "hover", string>;
565
+ conditions: Record<"xs" | "md" | "lg" | "xl" | "focus" | "active" | "disabled" | "hover", string>;
561
566
  };
562
567
  visible: {
563
568
  default: string;
564
- conditions: Record<"xs" | "md" | "lg" | "focus" | "active" | "disabled" | "hover", string>;
569
+ conditions: Record<"xs" | "md" | "lg" | "xl" | "focus" | "active" | "disabled" | "hover", string>;
565
570
  };
566
571
  scroll: {
567
572
  default: string;
568
- conditions: Record<"xs" | "md" | "lg" | "focus" | "active" | "disabled" | "hover", string>;
573
+ conditions: Record<"xs" | "md" | "lg" | "xl" | "focus" | "active" | "disabled" | "hover", string>;
569
574
  };
570
575
  };
571
576
  staticScale: Overflow[];
@@ -575,19 +580,19 @@ export declare const box: {
575
580
  values: {
576
581
  hidden: {
577
582
  default: string;
578
- conditions: Record<"xs" | "md" | "lg" | "focus" | "active" | "disabled" | "hover", string>;
583
+ conditions: Record<"xs" | "md" | "lg" | "xl" | "focus" | "active" | "disabled" | "hover", string>;
579
584
  };
580
585
  auto: {
581
586
  default: string;
582
- conditions: Record<"xs" | "md" | "lg" | "focus" | "active" | "disabled" | "hover", string>;
587
+ conditions: Record<"xs" | "md" | "lg" | "xl" | "focus" | "active" | "disabled" | "hover", string>;
583
588
  };
584
589
  visible: {
585
590
  default: string;
586
- conditions: Record<"xs" | "md" | "lg" | "focus" | "active" | "disabled" | "hover", string>;
591
+ conditions: Record<"xs" | "md" | "lg" | "xl" | "focus" | "active" | "disabled" | "hover", string>;
587
592
  };
588
593
  scroll: {
589
594
  default: string;
590
- conditions: Record<"xs" | "md" | "lg" | "focus" | "active" | "disabled" | "hover", string>;
595
+ conditions: Record<"xs" | "md" | "lg" | "xl" | "focus" | "active" | "disabled" | "hover", string>;
591
596
  };
592
597
  };
593
598
  staticScale: Overflow[];
@@ -597,31 +602,31 @@ export declare const box: {
597
602
  values: {
598
603
  ease: {
599
604
  default: string;
600
- conditions: Record<"xs" | "md" | "lg" | "focus" | "active" | "disabled" | "hover", string>;
605
+ conditions: Record<"xs" | "md" | "lg" | "xl" | "focus" | "active" | "disabled" | "hover", string>;
601
606
  };
602
607
  "ease-in": {
603
608
  default: string;
604
- conditions: Record<"xs" | "md" | "lg" | "focus" | "active" | "disabled" | "hover", string>;
609
+ conditions: Record<"xs" | "md" | "lg" | "xl" | "focus" | "active" | "disabled" | "hover", string>;
605
610
  };
606
611
  "ease-in-out": {
607
612
  default: string;
608
- conditions: Record<"xs" | "md" | "lg" | "focus" | "active" | "disabled" | "hover", string>;
613
+ conditions: Record<"xs" | "md" | "lg" | "xl" | "focus" | "active" | "disabled" | "hover", string>;
609
614
  };
610
615
  "ease-out": {
611
616
  default: string;
612
- conditions: Record<"xs" | "md" | "lg" | "focus" | "active" | "disabled" | "hover", string>;
617
+ conditions: Record<"xs" | "md" | "lg" | "xl" | "focus" | "active" | "disabled" | "hover", string>;
613
618
  };
614
619
  "step-end": {
615
620
  default: string;
616
- conditions: Record<"xs" | "md" | "lg" | "focus" | "active" | "disabled" | "hover", string>;
621
+ conditions: Record<"xs" | "md" | "lg" | "xl" | "focus" | "active" | "disabled" | "hover", string>;
617
622
  };
618
623
  "step-start": {
619
624
  default: string;
620
- conditions: Record<"xs" | "md" | "lg" | "focus" | "active" | "disabled" | "hover", string>;
625
+ conditions: Record<"xs" | "md" | "lg" | "xl" | "focus" | "active" | "disabled" | "hover", string>;
621
626
  };
622
627
  linear: {
623
628
  default: string;
624
- conditions: Record<"xs" | "md" | "lg" | "focus" | "active" | "disabled" | "hover", string>;
629
+ conditions: Record<"xs" | "md" | "lg" | "xl" | "focus" | "active" | "disabled" | "hover", string>;
625
630
  };
626
631
  };
627
632
  staticScale: TransitionTiming[];
@@ -633,259 +638,319 @@ export declare const box: {
633
638
  width: {
634
639
  dynamic: {
635
640
  default: string;
636
- conditions: Record<"xs" | "md" | "lg" | "focus" | "active" | "disabled" | "hover", string>;
641
+ conditions: Record<"xs" | "md" | "lg" | "xl" | "focus" | "active" | "disabled" | "hover", string>;
637
642
  };
638
643
  dynamicScale: true;
639
644
  name: "width";
640
645
  vars: {
641
646
  default: string;
642
- conditions: Record<"xs" | "md" | "lg" | "focus" | "active" | "disabled" | "hover", string>;
647
+ conditions: Record<"xs" | "md" | "lg" | "xl" | "focus" | "active" | "disabled" | "hover", string>;
643
648
  };
644
649
  };
645
650
  height: {
646
651
  dynamic: {
647
652
  default: string;
648
- conditions: Record<"xs" | "md" | "lg" | "focus" | "active" | "disabled" | "hover", string>;
653
+ conditions: Record<"xs" | "md" | "lg" | "xl" | "focus" | "active" | "disabled" | "hover", string>;
649
654
  };
650
655
  dynamicScale: true;
651
656
  name: "height";
652
657
  vars: {
653
658
  default: string;
654
- conditions: Record<"xs" | "md" | "lg" | "focus" | "active" | "disabled" | "hover", string>;
659
+ conditions: Record<"xs" | "md" | "lg" | "xl" | "focus" | "active" | "disabled" | "hover", string>;
655
660
  };
656
661
  };
657
662
  maxWidth: {
658
663
  dynamic: {
659
664
  default: string;
660
- conditions: Record<"xs" | "md" | "lg" | "focus" | "active" | "disabled" | "hover", string>;
665
+ conditions: Record<"xs" | "md" | "lg" | "xl" | "focus" | "active" | "disabled" | "hover", string>;
661
666
  };
662
667
  dynamicScale: true;
663
668
  name: "maxWidth";
664
669
  vars: {
665
670
  default: string;
666
- conditions: Record<"xs" | "md" | "lg" | "focus" | "active" | "disabled" | "hover", string>;
671
+ conditions: Record<"xs" | "md" | "lg" | "xl" | "focus" | "active" | "disabled" | "hover", string>;
667
672
  };
668
673
  };
669
674
  maxHeight: {
670
675
  dynamic: {
671
676
  default: string;
672
- conditions: Record<"xs" | "md" | "lg" | "focus" | "active" | "disabled" | "hover", string>;
677
+ conditions: Record<"xs" | "md" | "lg" | "xl" | "focus" | "active" | "disabled" | "hover", string>;
673
678
  };
674
679
  dynamicScale: true;
675
680
  name: "maxHeight";
676
681
  vars: {
677
682
  default: string;
678
- conditions: Record<"xs" | "md" | "lg" | "focus" | "active" | "disabled" | "hover", string>;
683
+ conditions: Record<"xs" | "md" | "lg" | "xl" | "focus" | "active" | "disabled" | "hover", string>;
679
684
  };
680
685
  };
681
686
  minWidth: {
682
687
  dynamic: {
683
688
  default: string;
684
- conditions: Record<"xs" | "md" | "lg" | "focus" | "active" | "disabled" | "hover", string>;
689
+ conditions: Record<"xs" | "md" | "lg" | "xl" | "focus" | "active" | "disabled" | "hover", string>;
685
690
  };
686
691
  dynamicScale: true;
687
692
  name: "minWidth";
688
693
  vars: {
689
694
  default: string;
690
- conditions: Record<"xs" | "md" | "lg" | "focus" | "active" | "disabled" | "hover", string>;
695
+ conditions: Record<"xs" | "md" | "lg" | "xl" | "focus" | "active" | "disabled" | "hover", string>;
691
696
  };
692
697
  };
693
698
  minHeight: {
694
699
  dynamic: {
695
700
  default: string;
696
- conditions: Record<"xs" | "md" | "lg" | "focus" | "active" | "disabled" | "hover", string>;
701
+ conditions: Record<"xs" | "md" | "lg" | "xl" | "focus" | "active" | "disabled" | "hover", string>;
697
702
  };
698
703
  dynamicScale: true;
699
704
  name: "minHeight";
700
705
  vars: {
701
706
  default: string;
702
- conditions: Record<"xs" | "md" | "lg" | "focus" | "active" | "disabled" | "hover", string>;
707
+ conditions: Record<"xs" | "md" | "lg" | "xl" | "focus" | "active" | "disabled" | "hover", string>;
703
708
  };
704
709
  };
705
710
  bottom: {
706
711
  dynamic: {
707
712
  default: string;
708
- conditions: Record<"xs" | "md" | "lg" | "focus" | "active" | "disabled" | "hover", string>;
713
+ conditions: Record<"xs" | "md" | "lg" | "xl" | "focus" | "active" | "disabled" | "hover", string>;
709
714
  };
710
715
  dynamicScale: true;
711
716
  name: "bottom";
712
717
  vars: {
713
718
  default: string;
714
- conditions: Record<"xs" | "md" | "lg" | "focus" | "active" | "disabled" | "hover", string>;
719
+ conditions: Record<"xs" | "md" | "lg" | "xl" | "focus" | "active" | "disabled" | "hover", string>;
715
720
  };
716
721
  };
717
722
  left: {
718
723
  dynamic: {
719
724
  default: string;
720
- conditions: Record<"xs" | "md" | "lg" | "focus" | "active" | "disabled" | "hover", string>;
725
+ conditions: Record<"xs" | "md" | "lg" | "xl" | "focus" | "active" | "disabled" | "hover", string>;
721
726
  };
722
727
  dynamicScale: true;
723
728
  name: "left";
724
729
  vars: {
725
730
  default: string;
726
- conditions: Record<"xs" | "md" | "lg" | "focus" | "active" | "disabled" | "hover", string>;
731
+ conditions: Record<"xs" | "md" | "lg" | "xl" | "focus" | "active" | "disabled" | "hover", string>;
727
732
  };
728
733
  };
729
734
  right: {
730
735
  dynamic: {
731
736
  default: string;
732
- conditions: Record<"xs" | "md" | "lg" | "focus" | "active" | "disabled" | "hover", string>;
737
+ conditions: Record<"xs" | "md" | "lg" | "xl" | "focus" | "active" | "disabled" | "hover", string>;
733
738
  };
734
739
  dynamicScale: true;
735
740
  name: "right";
736
741
  vars: {
737
742
  default: string;
738
- conditions: Record<"xs" | "md" | "lg" | "focus" | "active" | "disabled" | "hover", string>;
743
+ conditions: Record<"xs" | "md" | "lg" | "xl" | "focus" | "active" | "disabled" | "hover", string>;
739
744
  };
740
745
  };
741
746
  top: {
742
747
  dynamic: {
743
748
  default: string;
744
- conditions: Record<"xs" | "md" | "lg" | "focus" | "active" | "disabled" | "hover", string>;
749
+ conditions: Record<"xs" | "md" | "lg" | "xl" | "focus" | "active" | "disabled" | "hover", string>;
745
750
  };
746
751
  dynamicScale: true;
747
752
  name: "top";
748
753
  vars: {
749
754
  default: string;
750
- conditions: Record<"xs" | "md" | "lg" | "focus" | "active" | "disabled" | "hover", string>;
755
+ conditions: Record<"xs" | "md" | "lg" | "xl" | "focus" | "active" | "disabled" | "hover", string>;
751
756
  };
752
757
  };
753
758
  flex: {
754
759
  dynamic: {
755
760
  default: string;
756
- conditions: Record<"xs" | "md" | "lg" | "focus" | "active" | "disabled" | "hover", string>;
761
+ conditions: Record<"xs" | "md" | "lg" | "xl" | "focus" | "active" | "disabled" | "hover", string>;
757
762
  };
758
763
  dynamicScale: true;
759
764
  name: "flex";
760
765
  vars: {
761
766
  default: string;
762
- conditions: Record<"xs" | "md" | "lg" | "focus" | "active" | "disabled" | "hover", string>;
767
+ conditions: Record<"xs" | "md" | "lg" | "xl" | "focus" | "active" | "disabled" | "hover", string>;
763
768
  };
764
769
  };
765
770
  gridTemplateAreas: {
766
771
  dynamic: {
767
772
  default: string;
768
- conditions: Record<"xs" | "md" | "lg" | "focus" | "active" | "disabled" | "hover", string>;
773
+ conditions: Record<"xs" | "md" | "lg" | "xl" | "focus" | "active" | "disabled" | "hover", string>;
769
774
  };
770
775
  dynamicScale: true;
771
776
  name: "gridTemplateAreas";
772
777
  vars: {
773
778
  default: string;
774
- conditions: Record<"xs" | "md" | "lg" | "focus" | "active" | "disabled" | "hover", string>;
779
+ conditions: Record<"xs" | "md" | "lg" | "xl" | "focus" | "active" | "disabled" | "hover", string>;
775
780
  };
776
781
  };
777
782
  gridTemplateColumns: {
778
783
  dynamic: {
779
784
  default: string;
780
- conditions: Record<"xs" | "md" | "lg" | "focus" | "active" | "disabled" | "hover", string>;
785
+ conditions: Record<"xs" | "md" | "lg" | "xl" | "focus" | "active" | "disabled" | "hover", string>;
781
786
  };
782
787
  dynamicScale: true;
783
788
  name: "gridTemplateColumns";
784
789
  vars: {
785
790
  default: string;
786
- conditions: Record<"xs" | "md" | "lg" | "focus" | "active" | "disabled" | "hover", string>;
791
+ conditions: Record<"xs" | "md" | "lg" | "xl" | "focus" | "active" | "disabled" | "hover", string>;
787
792
  };
788
793
  };
789
794
  gridTemplateRows: {
790
795
  dynamic: {
791
796
  default: string;
792
- conditions: Record<"xs" | "md" | "lg" | "focus" | "active" | "disabled" | "hover", string>;
797
+ conditions: Record<"xs" | "md" | "lg" | "xl" | "focus" | "active" | "disabled" | "hover", string>;
793
798
  };
794
799
  dynamicScale: true;
795
800
  name: "gridTemplateRows";
796
801
  vars: {
797
802
  default: string;
798
- conditions: Record<"xs" | "md" | "lg" | "focus" | "active" | "disabled" | "hover", string>;
803
+ conditions: Record<"xs" | "md" | "lg" | "xl" | "focus" | "active" | "disabled" | "hover", string>;
799
804
  };
800
805
  };
801
806
  gridArea: {
802
807
  dynamic: {
803
808
  default: string;
804
- conditions: Record<"xs" | "md" | "lg" | "focus" | "active" | "disabled" | "hover", string>;
809
+ conditions: Record<"xs" | "md" | "lg" | "xl" | "focus" | "active" | "disabled" | "hover", string>;
805
810
  };
806
811
  dynamicScale: true;
807
812
  name: "gridArea";
808
813
  vars: {
809
814
  default: string;
810
- conditions: Record<"xs" | "md" | "lg" | "focus" | "active" | "disabled" | "hover", string>;
815
+ conditions: Record<"xs" | "md" | "lg" | "xl" | "focus" | "active" | "disabled" | "hover", string>;
811
816
  };
812
817
  };
813
818
  flexShrink: {
814
819
  dynamic: {
815
820
  default: string;
816
- conditions: Record<"xs" | "md" | "lg" | "focus" | "active" | "disabled" | "hover", string>;
821
+ conditions: Record<"xs" | "md" | "lg" | "xl" | "focus" | "active" | "disabled" | "hover", string>;
817
822
  };
818
823
  dynamicScale: true;
819
824
  name: "flexShrink";
820
825
  vars: {
821
826
  default: string;
822
- conditions: Record<"xs" | "md" | "lg" | "focus" | "active" | "disabled" | "hover", string>;
827
+ conditions: Record<"xs" | "md" | "lg" | "xl" | "focus" | "active" | "disabled" | "hover", string>;
823
828
  };
824
829
  };
825
830
  borderRadius: {
826
831
  dynamic: {
827
832
  default: string;
828
- conditions: Record<"xs" | "md" | "lg" | "focus" | "active" | "disabled" | "hover", string>;
833
+ conditions: Record<"xs" | "md" | "lg" | "xl" | "focus" | "active" | "disabled" | "hover", string>;
829
834
  };
830
835
  dynamicScale: true;
831
836
  name: "borderRadius";
832
837
  vars: {
833
838
  default: string;
834
- conditions: Record<"xs" | "md" | "lg" | "focus" | "active" | "disabled" | "hover", string>;
839
+ conditions: Record<"xs" | "md" | "lg" | "xl" | "focus" | "active" | "disabled" | "hover", string>;
835
840
  };
836
841
  };
837
842
  borderWidth: {
838
843
  dynamic: {
839
844
  default: string;
840
- conditions: Record<"xs" | "md" | "lg" | "focus" | "active" | "disabled" | "hover", string>;
845
+ conditions: Record<"xs" | "md" | "lg" | "xl" | "focus" | "active" | "disabled" | "hover", string>;
841
846
  };
842
847
  dynamicScale: true;
843
848
  name: "borderWidth";
844
849
  vars: {
845
850
  default: string;
846
- conditions: Record<"xs" | "md" | "lg" | "focus" | "active" | "disabled" | "hover", string>;
851
+ conditions: Record<"xs" | "md" | "lg" | "xl" | "focus" | "active" | "disabled" | "hover", string>;
847
852
  };
848
853
  };
849
854
  zIndex: {
850
855
  dynamic: {
851
856
  default: string;
852
- conditions: Record<"xs" | "md" | "lg" | "focus" | "active" | "disabled" | "hover", string>;
857
+ conditions: Record<"xs" | "md" | "lg" | "xl" | "focus" | "active" | "disabled" | "hover", string>;
853
858
  };
854
859
  dynamicScale: true;
855
860
  name: "zIndex";
856
861
  vars: {
857
862
  default: string;
858
- conditions: Record<"xs" | "md" | "lg" | "focus" | "active" | "disabled" | "hover", string>;
863
+ conditions: Record<"xs" | "md" | "lg" | "xl" | "focus" | "active" | "disabled" | "hover", string>;
859
864
  };
860
865
  };
861
866
  transitionDelay: {
862
867
  dynamic: {
863
868
  default: string;
864
- conditions: Record<"xs" | "md" | "lg" | "focus" | "active" | "disabled" | "hover", string>;
869
+ conditions: Record<"xs" | "md" | "lg" | "xl" | "focus" | "active" | "disabled" | "hover", string>;
865
870
  };
866
871
  dynamicScale: true;
867
872
  name: "transitionDelay";
868
873
  vars: {
869
874
  default: string;
870
- conditions: Record<"xs" | "md" | "lg" | "focus" | "active" | "disabled" | "hover", string>;
875
+ conditions: Record<"xs" | "md" | "lg" | "xl" | "focus" | "active" | "disabled" | "hover", string>;
871
876
  };
872
877
  };
873
878
  transitionProperty: {
874
879
  dynamic: {
875
880
  default: string;
876
- conditions: Record<"xs" | "md" | "lg" | "focus" | "active" | "disabled" | "hover", string>;
881
+ conditions: Record<"xs" | "md" | "lg" | "xl" | "focus" | "active" | "disabled" | "hover", string>;
877
882
  };
878
883
  dynamicScale: true;
879
884
  name: "transitionProperty";
880
885
  vars: {
881
886
  default: string;
882
- conditions: Record<"xs" | "md" | "lg" | "focus" | "active" | "disabled" | "hover", string>;
887
+ conditions: Record<"xs" | "md" | "lg" | "xl" | "focus" | "active" | "disabled" | "hover", string>;
888
+ };
889
+ };
890
+ backgroundImage: {
891
+ dynamic: {
892
+ default: string;
893
+ conditions: Record<"xs" | "md" | "lg" | "xl" | "focus" | "active" | "disabled" | "hover", string>;
894
+ };
895
+ dynamicScale: true;
896
+ name: "backgroundImage";
897
+ vars: {
898
+ default: string;
899
+ conditions: Record<"xs" | "md" | "lg" | "xl" | "focus" | "active" | "disabled" | "hover", string>;
900
+ };
901
+ };
902
+ backgroundPosition: {
903
+ dynamic: {
904
+ default: string;
905
+ conditions: Record<"xs" | "md" | "lg" | "xl" | "focus" | "active" | "disabled" | "hover", string>;
906
+ };
907
+ dynamicScale: true;
908
+ name: "backgroundPosition";
909
+ vars: {
910
+ default: string;
911
+ conditions: Record<"xs" | "md" | "lg" | "xl" | "focus" | "active" | "disabled" | "hover", string>;
912
+ };
913
+ };
914
+ backgroundBlendMode: {
915
+ dynamic: {
916
+ default: string;
917
+ conditions: Record<"xs" | "md" | "lg" | "xl" | "focus" | "active" | "disabled" | "hover", string>;
918
+ };
919
+ dynamicScale: true;
920
+ name: "backgroundBlendMode";
921
+ vars: {
922
+ default: string;
923
+ conditions: Record<"xs" | "md" | "lg" | "xl" | "focus" | "active" | "disabled" | "hover", string>;
924
+ };
925
+ };
926
+ backgroundRepeat: {
927
+ dynamic: {
928
+ default: string;
929
+ conditions: Record<"xs" | "md" | "lg" | "xl" | "focus" | "active" | "disabled" | "hover", string>;
930
+ };
931
+ dynamicScale: true;
932
+ name: "backgroundRepeat";
933
+ vars: {
934
+ default: string;
935
+ conditions: Record<"xs" | "md" | "lg" | "xl" | "focus" | "active" | "disabled" | "hover", string>;
936
+ };
937
+ };
938
+ backgroundSize: {
939
+ dynamic: {
940
+ default: string;
941
+ conditions: Record<"xs" | "md" | "lg" | "xl" | "focus" | "active" | "disabled" | "hover", string>;
942
+ };
943
+ dynamicScale: true;
944
+ name: "backgroundSize";
945
+ vars: {
946
+ default: string;
947
+ conditions: Record<"xs" | "md" | "lg" | "xl" | "focus" | "active" | "disabled" | "hover", string>;
883
948
  };
884
949
  };
885
950
  transitionDuration: {
886
951
  dynamic: {
887
952
  default: string;
888
- conditions: Record<"xs" | "md" | "lg" | "focus" | "active" | "disabled" | "hover", string>;
953
+ conditions: Record<"xs" | "md" | "lg" | "xl" | "focus" | "active" | "disabled" | "hover", string>;
889
954
  };
890
955
  dynamicScale: {
891
956
  base: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
@@ -896,13 +961,13 @@ export declare const box: {
896
961
  name: "transitionDuration";
897
962
  vars: {
898
963
  default: string;
899
- conditions: Record<"xs" | "md" | "lg" | "focus" | "active" | "disabled" | "hover", string>;
964
+ conditions: Record<"xs" | "md" | "lg" | "xl" | "focus" | "active" | "disabled" | "hover", string>;
900
965
  };
901
966
  };
902
967
  backgroundColor: {
903
968
  dynamic: {
904
969
  default: string;
905
- conditions: Record<"xs" | "md" | "lg" | "focus" | "active" | "disabled" | "hover", string>;
970
+ conditions: Record<"xs" | "md" | "lg" | "xl" | "focus" | "active" | "disabled" | "hover", string>;
906
971
  };
907
972
  dynamicScale: {
908
973
  "primary.interactive": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
@@ -932,13 +997,13 @@ export declare const box: {
932
997
  name: "backgroundColor";
933
998
  vars: {
934
999
  default: string;
935
- conditions: Record<"xs" | "md" | "lg" | "focus" | "active" | "disabled" | "hover", string>;
1000
+ conditions: Record<"xs" | "md" | "lg" | "xl" | "focus" | "active" | "disabled" | "hover", string>;
936
1001
  };
937
1002
  };
938
1003
  borderColor: {
939
1004
  dynamic: {
940
1005
  default: string;
941
- conditions: Record<"xs" | "md" | "lg" | "focus" | "active" | "disabled" | "hover", string>;
1006
+ conditions: Record<"xs" | "md" | "lg" | "xl" | "focus" | "active" | "disabled" | "hover", string>;
942
1007
  };
943
1008
  dynamicScale: {
944
1009
  "primary.interactive": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
@@ -961,13 +1026,13 @@ export declare const box: {
961
1026
  name: "borderColor";
962
1027
  vars: {
963
1028
  default: string;
964
- conditions: Record<"xs" | "md" | "lg" | "focus" | "active" | "disabled" | "hover", string>;
1029
+ conditions: Record<"xs" | "md" | "lg" | "xl" | "focus" | "active" | "disabled" | "hover", string>;
965
1030
  };
966
1031
  };
967
1032
  boxShadow: {
968
1033
  dynamic: {
969
1034
  default: string;
970
- conditions: Record<"xs" | "md" | "lg" | "focus" | "active" | "disabled" | "hover", string>;
1035
+ conditions: Record<"xs" | "md" | "lg" | "xl" | "focus" | "active" | "disabled" | "hover", string>;
971
1036
  };
972
1037
  dynamicScale: {
973
1038
  card: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
@@ -978,13 +1043,13 @@ export declare const box: {
978
1043
  name: "boxShadow";
979
1044
  vars: {
980
1045
  default: string;
981
- conditions: Record<"xs" | "md" | "lg" | "focus" | "active" | "disabled" | "hover", string>;
1046
+ conditions: Record<"xs" | "md" | "lg" | "xl" | "focus" | "active" | "disabled" | "hover", string>;
982
1047
  };
983
1048
  };
984
1049
  padding: {
985
1050
  dynamic: {
986
1051
  default: string;
987
- conditions: Record<"xs" | "md" | "lg" | "focus" | "active" | "disabled" | "hover", string>;
1052
+ conditions: Record<"xs" | "md" | "lg" | "xl" | "focus" | "active" | "disabled" | "hover", string>;
988
1053
  };
989
1054
  dynamicScale: {
990
1055
  none: string;
@@ -1005,13 +1070,13 @@ export declare const box: {
1005
1070
  name: "padding";
1006
1071
  vars: {
1007
1072
  default: string;
1008
- conditions: Record<"xs" | "md" | "lg" | "focus" | "active" | "disabled" | "hover", string>;
1073
+ conditions: Record<"xs" | "md" | "lg" | "xl" | "focus" | "active" | "disabled" | "hover", string>;
1009
1074
  };
1010
1075
  };
1011
1076
  paddingTop: {
1012
1077
  dynamic: {
1013
1078
  default: string;
1014
- conditions: Record<"xs" | "md" | "lg" | "focus" | "active" | "disabled" | "hover", string>;
1079
+ conditions: Record<"xs" | "md" | "lg" | "xl" | "focus" | "active" | "disabled" | "hover", string>;
1015
1080
  };
1016
1081
  dynamicScale: {
1017
1082
  none: string;
@@ -1032,13 +1097,13 @@ export declare const box: {
1032
1097
  name: "paddingTop";
1033
1098
  vars: {
1034
1099
  default: string;
1035
- conditions: Record<"xs" | "md" | "lg" | "focus" | "active" | "disabled" | "hover", string>;
1100
+ conditions: Record<"xs" | "md" | "lg" | "xl" | "focus" | "active" | "disabled" | "hover", string>;
1036
1101
  };
1037
1102
  };
1038
1103
  paddingBottom: {
1039
1104
  dynamic: {
1040
1105
  default: string;
1041
- conditions: Record<"xs" | "md" | "lg" | "focus" | "active" | "disabled" | "hover", string>;
1106
+ conditions: Record<"xs" | "md" | "lg" | "xl" | "focus" | "active" | "disabled" | "hover", string>;
1042
1107
  };
1043
1108
  dynamicScale: {
1044
1109
  none: string;
@@ -1059,13 +1124,13 @@ export declare const box: {
1059
1124
  name: "paddingBottom";
1060
1125
  vars: {
1061
1126
  default: string;
1062
- conditions: Record<"xs" | "md" | "lg" | "focus" | "active" | "disabled" | "hover", string>;
1127
+ conditions: Record<"xs" | "md" | "lg" | "xl" | "focus" | "active" | "disabled" | "hover", string>;
1063
1128
  };
1064
1129
  };
1065
1130
  paddingLeft: {
1066
1131
  dynamic: {
1067
1132
  default: string;
1068
- conditions: Record<"xs" | "md" | "lg" | "focus" | "active" | "disabled" | "hover", string>;
1133
+ conditions: Record<"xs" | "md" | "lg" | "xl" | "focus" | "active" | "disabled" | "hover", string>;
1069
1134
  };
1070
1135
  dynamicScale: {
1071
1136
  none: string;
@@ -1086,13 +1151,13 @@ export declare const box: {
1086
1151
  name: "paddingLeft";
1087
1152
  vars: {
1088
1153
  default: string;
1089
- conditions: Record<"xs" | "md" | "lg" | "focus" | "active" | "disabled" | "hover", string>;
1154
+ conditions: Record<"xs" | "md" | "lg" | "xl" | "focus" | "active" | "disabled" | "hover", string>;
1090
1155
  };
1091
1156
  };
1092
1157
  paddingRight: {
1093
1158
  dynamic: {
1094
1159
  default: string;
1095
- conditions: Record<"xs" | "md" | "lg" | "focus" | "active" | "disabled" | "hover", string>;
1160
+ conditions: Record<"xs" | "md" | "lg" | "xl" | "focus" | "active" | "disabled" | "hover", string>;
1096
1161
  };
1097
1162
  dynamicScale: {
1098
1163
  none: string;
@@ -1113,13 +1178,13 @@ export declare const box: {
1113
1178
  name: "paddingRight";
1114
1179
  vars: {
1115
1180
  default: string;
1116
- conditions: Record<"xs" | "md" | "lg" | "focus" | "active" | "disabled" | "hover", string>;
1181
+ conditions: Record<"xs" | "md" | "lg" | "xl" | "focus" | "active" | "disabled" | "hover", string>;
1117
1182
  };
1118
1183
  };
1119
1184
  margin: {
1120
1185
  dynamic: {
1121
1186
  default: string;
1122
- conditions: Record<"xs" | "md" | "lg" | "focus" | "active" | "disabled" | "hover", string>;
1187
+ conditions: Record<"xs" | "md" | "lg" | "xl" | "focus" | "active" | "disabled" | "hover", string>;
1123
1188
  };
1124
1189
  dynamicScale: {
1125
1190
  none: string;
@@ -1141,13 +1206,13 @@ export declare const box: {
1141
1206
  name: "margin";
1142
1207
  vars: {
1143
1208
  default: string;
1144
- conditions: Record<"xs" | "md" | "lg" | "focus" | "active" | "disabled" | "hover", string>;
1209
+ conditions: Record<"xs" | "md" | "lg" | "xl" | "focus" | "active" | "disabled" | "hover", string>;
1145
1210
  };
1146
1211
  };
1147
1212
  marginTop: {
1148
1213
  dynamic: {
1149
1214
  default: string;
1150
- conditions: Record<"xs" | "md" | "lg" | "focus" | "active" | "disabled" | "hover", string>;
1215
+ conditions: Record<"xs" | "md" | "lg" | "xl" | "focus" | "active" | "disabled" | "hover", string>;
1151
1216
  };
1152
1217
  dynamicScale: {
1153
1218
  none: string;
@@ -1169,13 +1234,13 @@ export declare const box: {
1169
1234
  name: "marginTop";
1170
1235
  vars: {
1171
1236
  default: string;
1172
- conditions: Record<"xs" | "md" | "lg" | "focus" | "active" | "disabled" | "hover", string>;
1237
+ conditions: Record<"xs" | "md" | "lg" | "xl" | "focus" | "active" | "disabled" | "hover", string>;
1173
1238
  };
1174
1239
  };
1175
1240
  marginBottom: {
1176
1241
  dynamic: {
1177
1242
  default: string;
1178
- conditions: Record<"xs" | "md" | "lg" | "focus" | "active" | "disabled" | "hover", string>;
1243
+ conditions: Record<"xs" | "md" | "lg" | "xl" | "focus" | "active" | "disabled" | "hover", string>;
1179
1244
  };
1180
1245
  dynamicScale: {
1181
1246
  none: string;
@@ -1197,13 +1262,13 @@ export declare const box: {
1197
1262
  name: "marginBottom";
1198
1263
  vars: {
1199
1264
  default: string;
1200
- conditions: Record<"xs" | "md" | "lg" | "focus" | "active" | "disabled" | "hover", string>;
1265
+ conditions: Record<"xs" | "md" | "lg" | "xl" | "focus" | "active" | "disabled" | "hover", string>;
1201
1266
  };
1202
1267
  };
1203
1268
  marginLeft: {
1204
1269
  dynamic: {
1205
1270
  default: string;
1206
- conditions: Record<"xs" | "md" | "lg" | "focus" | "active" | "disabled" | "hover", string>;
1271
+ conditions: Record<"xs" | "md" | "lg" | "xl" | "focus" | "active" | "disabled" | "hover", string>;
1207
1272
  };
1208
1273
  dynamicScale: {
1209
1274
  none: string;
@@ -1225,13 +1290,13 @@ export declare const box: {
1225
1290
  name: "marginLeft";
1226
1291
  vars: {
1227
1292
  default: string;
1228
- conditions: Record<"xs" | "md" | "lg" | "focus" | "active" | "disabled" | "hover", string>;
1293
+ conditions: Record<"xs" | "md" | "lg" | "xl" | "focus" | "active" | "disabled" | "hover", string>;
1229
1294
  };
1230
1295
  };
1231
1296
  marginRight: {
1232
1297
  dynamic: {
1233
1298
  default: string;
1234
- conditions: Record<"xs" | "md" | "lg" | "focus" | "active" | "disabled" | "hover", string>;
1299
+ conditions: Record<"xs" | "md" | "lg" | "xl" | "focus" | "active" | "disabled" | "hover", string>;
1235
1300
  };
1236
1301
  dynamicScale: {
1237
1302
  none: string;
@@ -1253,13 +1318,13 @@ export declare const box: {
1253
1318
  name: "marginRight";
1254
1319
  vars: {
1255
1320
  default: string;
1256
- conditions: Record<"xs" | "md" | "lg" | "focus" | "active" | "disabled" | "hover", string>;
1321
+ conditions: Record<"xs" | "md" | "lg" | "xl" | "focus" | "active" | "disabled" | "hover", string>;
1257
1322
  };
1258
1323
  };
1259
1324
  gap: {
1260
1325
  dynamic: {
1261
1326
  default: string;
1262
- conditions: Record<"xs" | "md" | "lg" | "focus" | "active" | "disabled" | "hover", string>;
1327
+ conditions: Record<"xs" | "md" | "lg" | "xl" | "focus" | "active" | "disabled" | "hover", string>;
1263
1328
  };
1264
1329
  dynamicScale: {
1265
1330
  none: string;
@@ -1281,13 +1346,13 @@ export declare const box: {
1281
1346
  name: "gap";
1282
1347
  vars: {
1283
1348
  default: string;
1284
- conditions: Record<"xs" | "md" | "lg" | "focus" | "active" | "disabled" | "hover", string>;
1349
+ conditions: Record<"xs" | "md" | "lg" | "xl" | "focus" | "active" | "disabled" | "hover", string>;
1285
1350
  };
1286
1351
  };
1287
1352
  gridGap: {
1288
1353
  dynamic: {
1289
1354
  default: string;
1290
- conditions: Record<"xs" | "md" | "lg" | "focus" | "active" | "disabled" | "hover", string>;
1355
+ conditions: Record<"xs" | "md" | "lg" | "xl" | "focus" | "active" | "disabled" | "hover", string>;
1291
1356
  };
1292
1357
  dynamicScale: {
1293
1358
  none: string;
@@ -1309,7 +1374,7 @@ export declare const box: {
1309
1374
  name: "gridGap";
1310
1375
  vars: {
1311
1376
  default: string;
1312
- conditions: Record<"xs" | "md" | "lg" | "focus" | "active" | "disabled" | "hover", string>;
1377
+ conditions: Record<"xs" | "md" | "lg" | "xl" | "focus" | "active" | "disabled" | "hover", string>;
1313
1378
  };
1314
1379
  };
1315
1380
  };
@@ -1653,7 +1718,7 @@ export declare const iconButton: {
1653
1718
  backgroundColor: {
1654
1719
  dynamic: {
1655
1720
  default: string;
1656
- conditions: Record<"xs" | "md" | "lg" | "focus" | "active" | "hover", string>;
1721
+ conditions: Record<"xs" | "md" | "lg" | "xl" | "focus" | "active" | "hover", string>;
1657
1722
  };
1658
1723
  dynamicScale: {
1659
1724
  transparent: string;
@@ -1664,13 +1729,13 @@ export declare const iconButton: {
1664
1729
  name: "backgroundColor";
1665
1730
  vars: {
1666
1731
  default: string;
1667
- conditions: Record<"xs" | "md" | "lg" | "focus" | "active" | "hover", string>;
1732
+ conditions: Record<"xs" | "md" | "lg" | "xl" | "focus" | "active" | "hover", string>;
1668
1733
  };
1669
1734
  };
1670
1735
  borderColor: {
1671
1736
  dynamic: {
1672
1737
  default: string;
1673
- conditions: Record<"xs" | "md" | "lg" | "focus" | "active" | "hover", string>;
1738
+ conditions: Record<"xs" | "md" | "lg" | "xl" | "focus" | "active" | "hover", string>;
1674
1739
  };
1675
1740
  dynamicScale: {
1676
1741
  "neutral.interactive": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
@@ -1684,31 +1749,31 @@ export declare const iconButton: {
1684
1749
  name: "borderColor";
1685
1750
  vars: {
1686
1751
  default: string;
1687
- conditions: Record<"xs" | "md" | "lg" | "focus" | "active" | "hover", string>;
1752
+ conditions: Record<"xs" | "md" | "lg" | "xl" | "focus" | "active" | "hover", string>;
1688
1753
  };
1689
1754
  };
1690
1755
  width: {
1691
1756
  dynamic: {
1692
1757
  default: string;
1693
- conditions: Record<"xs" | "md" | "lg" | "focus" | "active" | "hover", string>;
1758
+ conditions: Record<"xs" | "md" | "lg" | "xl" | "focus" | "active" | "hover", string>;
1694
1759
  };
1695
1760
  dynamicScale: true;
1696
1761
  name: "width";
1697
1762
  vars: {
1698
1763
  default: string;
1699
- conditions: Record<"xs" | "md" | "lg" | "focus" | "active" | "hover", string>;
1764
+ conditions: Record<"xs" | "md" | "lg" | "xl" | "focus" | "active" | "hover", string>;
1700
1765
  };
1701
1766
  };
1702
1767
  height: {
1703
1768
  dynamic: {
1704
1769
  default: string;
1705
- conditions: Record<"xs" | "md" | "lg" | "focus" | "active" | "hover", string>;
1770
+ conditions: Record<"xs" | "md" | "lg" | "xl" | "focus" | "active" | "hover", string>;
1706
1771
  };
1707
1772
  dynamicScale: true;
1708
1773
  name: "height";
1709
1774
  vars: {
1710
1775
  default: string;
1711
- conditions: Record<"xs" | "md" | "lg" | "focus" | "active" | "hover", string>;
1776
+ conditions: Record<"xs" | "md" | "lg" | "xl" | "focus" | "active" | "hover", string>;
1712
1777
  };
1713
1778
  };
1714
1779
  };
@@ -2098,14 +2163,25 @@ export declare const toggle: {
2098
2163
  export declare const link: {
2099
2164
  sprinkle: ((props: {
2100
2165
  textDecoration?: TextDecoration | undefined;
2166
+ fontSize?: "caption" | "base" | "highlight" | undefined;
2167
+ lineHeight?: "caption" | "base" | "highlight" | undefined;
2101
2168
  }) => string) & {
2102
- properties: Set<"textDecoration">;
2169
+ properties: Set<"fontSize" | "lineHeight" | "textDecoration">;
2103
2170
  };
2104
2171
  properties: {
2105
2172
  textDecoration: TextDecoration[];
2173
+ fontSize: {
2174
+ caption: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
2175
+ base: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
2176
+ highlight: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
2177
+ };
2178
+ lineHeight: {
2179
+ readonly caption: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
2180
+ readonly base: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
2181
+ readonly highlight: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
2182
+ };
2106
2183
  };
2107
2184
  classnames: {
2108
- size: Record<"caption" | "base" | "highlight", string>;
2109
2185
  appearance: Record<"primary" | "danger" | "neutral" | "neutral.background", string>;
2110
2186
  };
2111
2187
  };
@@ -2225,19 +2301,19 @@ export declare const modal: {
2225
2301
  maxWidth: {
2226
2302
  dynamic: {
2227
2303
  default: string;
2228
- conditions: Record<"xs" | "md" | "lg", string>;
2304
+ conditions: Record<"xs" | "md" | "lg" | "xl", string>;
2229
2305
  };
2230
2306
  dynamicScale: true;
2231
2307
  name: "maxWidth";
2232
2308
  vars: {
2233
2309
  default: string;
2234
- conditions: Record<"xs" | "md" | "lg", string>;
2310
+ conditions: Record<"xs" | "md" | "lg" | "xl", string>;
2235
2311
  };
2236
2312
  };
2237
2313
  padding: {
2238
2314
  dynamic: {
2239
2315
  default: string;
2240
- conditions: Record<"xs" | "md" | "lg", string>;
2316
+ conditions: Record<"xs" | "md" | "lg" | "xl", string>;
2241
2317
  };
2242
2318
  dynamicScale: {
2243
2319
  base: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
@@ -2247,7 +2323,7 @@ export declare const modal: {
2247
2323
  name: "padding";
2248
2324
  vars: {
2249
2325
  default: string;
2250
- conditions: Record<"xs" | "md" | "lg", string>;
2326
+ conditions: Record<"xs" | "md" | "lg" | "xl", string>;
2251
2327
  };
2252
2328
  };
2253
2329
  };
@@ -2288,15 +2364,15 @@ declare const sidebarSprinkle: {
2288
2364
  values: {
2289
2365
  base: {
2290
2366
  default: string;
2291
- conditions: Record<"xs" | "md" | "lg", string>;
2367
+ conditions: Record<"xs" | "md" | "lg" | "xl", string>;
2292
2368
  };
2293
2369
  small: {
2294
2370
  default: string;
2295
- conditions: Record<"xs" | "md" | "lg", string>;
2371
+ conditions: Record<"xs" | "md" | "lg" | "xl", string>;
2296
2372
  };
2297
2373
  none: {
2298
2374
  default: string;
2299
- conditions: Record<"xs" | "md" | "lg", string>;
2375
+ conditions: Record<"xs" | "md" | "lg" | "xl", string>;
2300
2376
  };
2301
2377
  };
2302
2378
  staticScale: {
@@ -2312,25 +2388,25 @@ declare const sidebarSprinkle: {
2312
2388
  maxWidth: {
2313
2389
  dynamic: {
2314
2390
  default: string;
2315
- conditions: Record<"xs" | "md" | "lg", string>;
2391
+ conditions: Record<"xs" | "md" | "lg" | "xl", string>;
2316
2392
  };
2317
2393
  dynamicScale: true;
2318
2394
  name: "maxWidth";
2319
2395
  vars: {
2320
2396
  default: string;
2321
- conditions: Record<"xs" | "md" | "lg", string>;
2397
+ conditions: Record<"xs" | "md" | "lg" | "xl", string>;
2322
2398
  };
2323
2399
  };
2324
2400
  zIndex: {
2325
2401
  dynamic: {
2326
2402
  default: string;
2327
- conditions: Record<"xs" | "md" | "lg", string>;
2403
+ conditions: Record<"xs" | "md" | "lg" | "xl", string>;
2328
2404
  };
2329
2405
  dynamicScale: true;
2330
2406
  name: "zIndex";
2331
2407
  vars: {
2332
2408
  default: string;
2333
- conditions: Record<"xs" | "md" | "lg", string>;
2409
+ conditions: Record<"xs" | "md" | "lg" | "xl", string>;
2334
2410
  };
2335
2411
  };
2336
2412
  };
@@ -2364,15 +2440,15 @@ export declare const sidebar: {
2364
2440
  values: {
2365
2441
  base: {
2366
2442
  default: string;
2367
- conditions: Record<"xs" | "md" | "lg", string>;
2443
+ conditions: Record<"xs" | "md" | "lg" | "xl", string>;
2368
2444
  };
2369
2445
  small: {
2370
2446
  default: string;
2371
- conditions: Record<"xs" | "md" | "lg", string>;
2447
+ conditions: Record<"xs" | "md" | "lg" | "xl", string>;
2372
2448
  };
2373
2449
  none: {
2374
2450
  default: string;
2375
- conditions: Record<"xs" | "md" | "lg", string>;
2451
+ conditions: Record<"xs" | "md" | "lg" | "xl", string>;
2376
2452
  };
2377
2453
  };
2378
2454
  staticScale: {
@@ -2388,25 +2464,25 @@ export declare const sidebar: {
2388
2464
  maxWidth: {
2389
2465
  dynamic: {
2390
2466
  default: string;
2391
- conditions: Record<"xs" | "md" | "lg", string>;
2467
+ conditions: Record<"xs" | "md" | "lg" | "xl", string>;
2392
2468
  };
2393
2469
  dynamicScale: true;
2394
2470
  name: "maxWidth";
2395
2471
  vars: {
2396
2472
  default: string;
2397
- conditions: Record<"xs" | "md" | "lg", string>;
2473
+ conditions: Record<"xs" | "md" | "lg" | "xl", string>;
2398
2474
  };
2399
2475
  };
2400
2476
  zIndex: {
2401
2477
  dynamic: {
2402
2478
  default: string;
2403
- conditions: Record<"xs" | "md" | "lg", string>;
2479
+ conditions: Record<"xs" | "md" | "lg" | "xl", string>;
2404
2480
  };
2405
2481
  dynamicScale: true;
2406
2482
  name: "zIndex";
2407
2483
  vars: {
2408
2484
  default: string;
2409
- conditions: Record<"xs" | "md" | "lg", string>;
2485
+ conditions: Record<"xs" | "md" | "lg" | "xl", string>;
2410
2486
  };
2411
2487
  };
2412
2488
  };
@@ -2467,10 +2543,10 @@ export interface TableConditions<T> extends Conditions<T> {
2467
2543
  hover?: T;
2468
2544
  }
2469
2545
  export interface TableSprinkle {
2470
- padding?: TablePaddingProperties;
2471
- width?: string;
2472
- maxWidth?: string;
2473
- minWidth?: string;
2546
+ padding?: TablePaddingProperties | TableConditions<TablePaddingProperties>;
2547
+ width?: string | TableConditions<string>;
2548
+ maxWidth?: string | TableConditions<string>;
2549
+ minWidth?: string | TableConditions<string>;
2474
2550
  backgroundColor?: TableRowBackgroundColorProperties | TableConditions<TableRowBackgroundColorProperties>;
2475
2551
  }
2476
2552
  export declare const table: {
@@ -2482,43 +2558,43 @@ export declare const table: {
2482
2558
  width: {
2483
2559
  dynamic: {
2484
2560
  default: string;
2485
- conditions: Record<"focus" | "rest" | "active" | "hover", string>;
2561
+ conditions: Record<"xs" | "md" | "lg" | "xl" | "focus" | "rest" | "active" | "hover", string>;
2486
2562
  };
2487
2563
  dynamicScale: true;
2488
2564
  name: "width";
2489
2565
  vars: {
2490
2566
  default: string;
2491
- conditions: Record<"focus" | "rest" | "active" | "hover", string>;
2567
+ conditions: Record<"xs" | "md" | "lg" | "xl" | "focus" | "rest" | "active" | "hover", string>;
2492
2568
  };
2493
2569
  };
2494
2570
  maxWidth: {
2495
2571
  dynamic: {
2496
2572
  default: string;
2497
- conditions: Record<"focus" | "rest" | "active" | "hover", string>;
2573
+ conditions: Record<"xs" | "md" | "lg" | "xl" | "focus" | "rest" | "active" | "hover", string>;
2498
2574
  };
2499
2575
  dynamicScale: true;
2500
2576
  name: "maxWidth";
2501
2577
  vars: {
2502
2578
  default: string;
2503
- conditions: Record<"focus" | "rest" | "active" | "hover", string>;
2579
+ conditions: Record<"xs" | "md" | "lg" | "xl" | "focus" | "rest" | "active" | "hover", string>;
2504
2580
  };
2505
2581
  };
2506
2582
  minWidth: {
2507
2583
  dynamic: {
2508
2584
  default: string;
2509
- conditions: Record<"focus" | "rest" | "active" | "hover", string>;
2585
+ conditions: Record<"xs" | "md" | "lg" | "xl" | "focus" | "rest" | "active" | "hover", string>;
2510
2586
  };
2511
2587
  dynamicScale: true;
2512
2588
  name: "minWidth";
2513
2589
  vars: {
2514
2590
  default: string;
2515
- conditions: Record<"focus" | "rest" | "active" | "hover", string>;
2591
+ conditions: Record<"xs" | "md" | "lg" | "xl" | "focus" | "rest" | "active" | "hover", string>;
2516
2592
  };
2517
2593
  };
2518
2594
  backgroundColor: {
2519
2595
  dynamic: {
2520
2596
  default: string;
2521
- conditions: Record<"focus" | "rest" | "active" | "hover", string>;
2597
+ conditions: Record<"xs" | "md" | "lg" | "xl" | "focus" | "rest" | "active" | "hover", string>;
2522
2598
  };
2523
2599
  dynamicScale: {
2524
2600
  transparent: string;
@@ -2531,13 +2607,13 @@ export declare const table: {
2531
2607
  name: "backgroundColor";
2532
2608
  vars: {
2533
2609
  default: string;
2534
- conditions: Record<"focus" | "rest" | "active" | "hover", string>;
2610
+ conditions: Record<"xs" | "md" | "lg" | "xl" | "focus" | "rest" | "active" | "hover", string>;
2535
2611
  };
2536
2612
  };
2537
2613
  padding: {
2538
2614
  dynamic: {
2539
2615
  default: string;
2540
- conditions: Record<"focus" | "rest" | "active" | "hover", string>;
2616
+ conditions: Record<"xs" | "md" | "lg" | "xl" | "focus" | "rest" | "active" | "hover", string>;
2541
2617
  };
2542
2618
  dynamicScale: {
2543
2619
  base: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
@@ -2547,7 +2623,7 @@ export declare const table: {
2547
2623
  name: "padding";
2548
2624
  vars: {
2549
2625
  default: string;
2550
- conditions: Record<"focus" | "rest" | "active" | "hover", string>;
2626
+ conditions: Record<"xs" | "md" | "lg" | "xl" | "focus" | "rest" | "active" | "hover", string>;
2551
2627
  };
2552
2628
  };
2553
2629
  };