@box/blueprint-web 16.11.0 → 16.12.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -400,7 +400,7 @@
400
400
  }
401
401
  }
402
402
 
403
- .bp_base_button_module_button--ab27d[data-modern=true]{
403
+ .bp_base_button_module_button--e3ebe[data-modern=true]{
404
404
  --button-border-radius:var(--bp-radius-10);
405
405
  --button-line-height:1;
406
406
  font-family:var(--bp-font-font-family), -apple-system, BlinkMacSystemFont, "San Francisco", "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
@@ -410,7 +410,7 @@
410
410
  letter-spacing:var(--bp-font-letter-spacing-01);
411
411
  line-height:var(--bp-font-line-height-04);
412
412
  }
413
- :where(body.is-inter-font) .bp_base_button_module_button--ab27d[data-modern=true]{
413
+ :where(body.is-inter-font) .bp_base_button_module_button--e3ebe[data-modern=true]{
414
414
  font-family:InterVariable, -apple-system, BlinkMacSystemFont, "San Francisco", "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
415
415
  font-size:.875rem;
416
416
  font-style:normal;
@@ -421,13 +421,13 @@
421
421
  text-transform:none;
422
422
  }
423
423
 
424
- .bp_base_button_module_button--ab27d[data-modern=true]{
424
+ .bp_base_button_module_button--e3ebe[data-modern=true]{
425
425
  line-height:var(--button-line-height);
426
426
  }
427
- .bp_base_button_module_button--ab27d[data-modern=true]:not(:disabled)[data-focus-visible]{
427
+ .bp_base_button_module_button--e3ebe[data-modern=true]:not(:disabled)[data-focus-visible]{
428
428
  box-shadow:0 0 0 var(--border-1, 1px) var(--background-background), 0 0 0 var(--border-3) var(--bp-outline-focus-on-light);
429
429
  }
430
- .bp_base_button_module_button--ab27d[data-modern=true].bp_base_button_module_primary--ab27d{
430
+ .bp_base_button_module_button--e3ebe[data-modern=true].bp_base_button_module_primary--e3ebe{
431
431
  --button-color:var(--bp-text-text-on-dark);
432
432
  --button-background:var(--bp-surface-surface-brand);
433
433
  --button-border:var(--bp-border-01) solid var(--bp-surface-surface-brand);
@@ -436,7 +436,7 @@
436
436
  --button-active-background:var(--bp-surface-surface-brand-pressed);
437
437
  --button-active-border:var(--bp-border-01) solid var(--bp-surface-surface-brand-pressed);
438
438
  }
439
- .bp_base_button_module_button--ab27d[data-modern=true].bp_base_button_module_secondary--ab27d{
439
+ .bp_base_button_module_button--e3ebe[data-modern=true].bp_base_button_module_secondary--e3ebe{
440
440
  --button-color:var(--bp-text-text-on-light);
441
441
  --button-background:var(--bp-surface-cta-surface-secondary);
442
442
  --button-border:var(--bp-border-01) solid var(--bp-border-cta-border-secondary);
@@ -446,14 +446,14 @@
446
446
  --button-active-border:var(--bp-border-01) solid var(--bp-border-cta-border-secondary);
447
447
  --button-backdrop-filter:blur(16px);
448
448
  }
449
- .bp_base_button_module_button--ab27d[data-modern=true].bp_base_button_module_tertiary--ab27d{
449
+ .bp_base_button_module_button--e3ebe[data-modern=true].bp_base_button_module_tertiary--e3ebe{
450
450
  --button-color:var(--bp-text-cta-link);
451
451
  --button-background:var(--bp-surface-cta-surface-tertiary);
452
452
  --button-focus-or-hover-background:var(--bp-surface-cta-surface-tertiary-hover);
453
453
  --button-active-background:var(--bp-surface-cta-surface-tertiary-pressed);
454
454
  --button-backdrop-filter:blur(16px);
455
455
  }
456
- .bp_base_button_module_button--ab27d[data-modern=true].bp_base_button_module_quaternary--ab27d{
456
+ .bp_base_button_module_button--e3ebe[data-modern=true].bp_base_button_module_quaternary--e3ebe{
457
457
  --button-color:var(--bp-text-cta-link-secondary);
458
458
  --button-background:var(--bp-surface-cta-surface-quaternary);
459
459
  --button-border:var(--bp-border-01) solid #0000;
@@ -461,7 +461,7 @@
461
461
  --button-active-background:var(--bp-surface-cta-surface-quaternary-pressed);
462
462
  --button-backdrop-filter:blur(16px);
463
463
  }
464
- .bp_base_button_module_button--ab27d[data-modern=true].bp_base_button_module_tertiary-destructive--ab27d{
464
+ .bp_base_button_module_button--e3ebe[data-modern=true].bp_base_button_module_tertiary-destructive--e3ebe{
465
465
  --button-color:var(--bp-text-text-destructive-on-light);
466
466
  --button-background:var(--bp-surface-cta-destructive-surface-tertiary);
467
467
  --button-border:var(--bp-border-01) solid #0000;
@@ -469,7 +469,7 @@
469
469
  --button-active-background:var(--bp-surface-cta-destructive-surface-tertiary-pressed);
470
470
  --button-backdrop-filter:blur(16px);
471
471
  }
472
- .bp_base_button_module_button--ab27d[data-modern=true].bp_base_button_module_destructive--ab27d{
472
+ .bp_base_button_module_button--e3ebe[data-modern=true].bp_base_button_module_destructive--e3ebe{
473
473
  --button-color:var(--bp-text-text-on-dark);
474
474
  --button-background:var(--bp-surface-cta-destructive-surface-primary);
475
475
  --button-border:var(--bp-border-01) solid var(--bp-surface-cta-destructive-surface-primary);
@@ -478,7 +478,7 @@
478
478
  --button-active-background:var(--bp-surface-cta-destructive-surface-primary-pressed);
479
479
  --button-active-border:var(--bp-border-01) solid var(--bp-surface-cta-destructive-surface-primary-pressed);
480
480
  }
481
- .bp_base_button_module_button--ab27d[data-modern=true].bp_base_button_module_outline--ab27d{
481
+ .bp_base_button_module_button--e3ebe[data-modern=true].bp_base_button_module_outline--e3ebe{
482
482
  --button-color:var(--bp-text-text-on-light);
483
483
  --button-background:var(--bp-surface-cta-surface-secondary);
484
484
  --button-border:var(--bp-border-01) solid var(--bp-border-cta-border-high-contrast);
@@ -488,26 +488,26 @@
488
488
  --button-active-border:var(--bp-border-01) solid var(--bp-border-cta-border-high-contrast);
489
489
  --button-backdrop-filter:blur(16px);
490
490
  }
491
- .bp_base_button_module_button--ab27d[data-modern=true].bp_base_button_module_small--ab27d{
491
+ .bp_base_button_module_button--e3ebe[data-modern=true].bp_base_button_module_small--e3ebe{
492
492
  --button-small-gap:var(--bp-space-010);
493
493
  --button-small-min-height:var(--bp-size-080);
494
494
  --button-small-padding:0 var(--bp-size-030);
495
495
  }
496
- .bp_base_button_module_button--ab27d[data-modern=true].bp_base_button_module_small--ab27d.bp_base_button_module_isIconButton--ab27d{
496
+ .bp_base_button_module_button--e3ebe[data-modern=true].bp_base_button_module_small--e3ebe.bp_base_button_module_isIconButton--e3ebe{
497
497
  --icon-button-small-width:var(--bp-size-080);
498
498
  --icon-button-small-height:var(--bp-size-080);
499
499
  --icon-button-small-padding:0 calc((var(--bp-size-080) - var(--bp-size-040))/2);
500
500
  }
501
- .bp_base_button_module_button--ab27d[data-modern=true].bp_base_button_module_small--ab27d.bp_base_button_module_isTextWithIconEndButton--ab27d{
501
+ .bp_base_button_module_button--e3ebe[data-modern=true].bp_base_button_module_small--e3ebe.bp_base_button_module_isTextWithIconEndButton--e3ebe{
502
502
  --button-small-padding:0 0.625rem 0 var(--bp-space-030);
503
503
  }
504
- .bp_base_button_module_button--ab27d[data-modern=true].bp_base_button_module_small--ab27d.bp_base_button_module_isTextWithIconStartButton--ab27d{
504
+ .bp_base_button_module_button--e3ebe[data-modern=true].bp_base_button_module_small--e3ebe.bp_base_button_module_isTextWithIconStartButton--e3ebe{
505
505
  --button-small-padding:0 var(--bp-space-030) 0 0.625rem;
506
506
  }
507
- .bp_base_button_module_button--ab27d[data-modern=true].bp_base_button_module_small--ab27d.bp_base_button_module_isTextWithStartAndEndIconButton--ab27d{
507
+ .bp_base_button_module_button--e3ebe[data-modern=true].bp_base_button_module_small--e3ebe.bp_base_button_module_isTextWithStartAndEndIconButton--e3ebe{
508
508
  --button-small-padding:0 0.625rem 0 0.625rem;
509
509
  }
510
- .bp_base_button_module_button--ab27d[data-modern=true].bp_base_button_module_x-small--ab27d{
510
+ .bp_base_button_module_button--e3ebe[data-modern=true].bp_base_button_module_x-small--e3ebe{
511
511
  --button-x-small-gap:var(--bp-space-010);
512
512
  --button-x-small-min-height:var(--bp-size-060);
513
513
  --button-x-small-padding:var(--bp-space-005) var(--bp-space-020);
@@ -518,7 +518,7 @@
518
518
  letter-spacing:var(--bp-font-letter-spacing-01);
519
519
  line-height:var(--bp-font-line-height-04);
520
520
  }
521
- :where(body.is-inter-font) .bp_base_button_module_button--ab27d[data-modern=true].bp_base_button_module_x-small--ab27d{
521
+ :where(body.is-inter-font) .bp_base_button_module_button--e3ebe[data-modern=true].bp_base_button_module_x-small--e3ebe{
522
522
  font-family:InterVariable, -apple-system, BlinkMacSystemFont, "San Francisco", "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
523
523
  font-size:.8125rem;
524
524
  font-style:normal;
@@ -529,43 +529,58 @@
529
529
  text-transform:none;
530
530
  }
531
531
 
532
- .bp_base_button_module_button--ab27d[data-modern=true].bp_base_button_module_x-small--ab27d.bp_base_button_module_isIconButton--ab27d{
532
+ .bp_base_button_module_button--e3ebe[data-modern=true].bp_base_button_module_x-small--e3ebe.bp_base_button_module_isIconButton--e3ebe{
533
533
  --icon-button-x-small-width:var(--bp-size-060);
534
534
  --icon-button-x-small-height:var(--bp-size-060);
535
535
  --icon-button-x-small-padding:0 calc((var(--bp-size-060) - var(--bp-size-040))/2);
536
536
  }
537
- .bp_base_button_module_button--ab27d[data-modern=true].bp_base_button_module_x-small--ab27d.bp_base_button_module_isTextWithIconEndButton--ab27d{
537
+ .bp_base_button_module_button--e3ebe[data-modern=true].bp_base_button_module_x-small--e3ebe.bp_base_button_module_isTextWithIconEndButton--e3ebe{
538
538
  --button-x-small-padding:var(--bp-space-005) 0.375rem var(--bp-space-005) var(--bp-space-020);
539
539
  }
540
- .bp_base_button_module_button--ab27d[data-modern=true].bp_base_button_module_x-small--ab27d.bp_base_button_module_isTextWithIconStartButton--ab27d{
540
+ .bp_base_button_module_button--e3ebe[data-modern=true].bp_base_button_module_x-small--e3ebe.bp_base_button_module_isTextWithIconStartButton--e3ebe{
541
541
  --button-x-small-padding:var(--bp-space-005) var(--bp-space-020) var(--bp-space-005) 0.375rem;
542
542
  }
543
- .bp_base_button_module_button--ab27d[data-modern=true].bp_base_button_module_x-small--ab27d.bp_base_button_module_isTextWithStartAndEndIconButton--ab27d{
543
+ .bp_base_button_module_button--e3ebe[data-modern=true].bp_base_button_module_x-small--e3ebe.bp_base_button_module_isTextWithStartAndEndIconButton--e3ebe{
544
544
  --button-x-small-padding:var(--bp-space-005) 0.375rem;
545
545
  }
546
- .bp_base_button_module_button--ab27d[data-modern=true].bp_base_button_module_large--ab27d{
546
+ .bp_base_button_module_button--e3ebe[data-modern=true].bp_base_button_module_large--e3ebe{
547
547
  --button-large-gap:var(--bp-space-020);
548
548
  --button-large-min-height:var(--bp-size-100);
549
549
  --button-large-padding:0 var(--bp-size-040);
550
- --button-large-font-size:var(--body-large-bold-font-size);
551
- --button-large-line-height:var(--body-large-bold-line-height);
550
+ font-family:var(--bp-font-font-family), -apple-system, BlinkMacSystemFont, "San Francisco", "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
551
+ font-size:var(--bp-font-size-06);
552
+ font-style:normal;
553
+ font-weight:var(--bp-font-weight-bold);
554
+ letter-spacing:var(--bp-font-letter-spacing-01);
555
+ line-height:var(--bp-font-line-height-05);
556
+ }
557
+ :where(body.is-inter-font) .bp_base_button_module_button--e3ebe[data-modern=true].bp_base_button_module_large--e3ebe{
558
+ font-family:InterVariable, -apple-system, BlinkMacSystemFont, "San Francisco", "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
559
+ font-size:1rem;
560
+ font-style:normal;
561
+ font-weight:600;
562
+ letter-spacing:0;
563
+ line-height:1.375rem;
564
+ text-decoration:none;
565
+ text-transform:none;
552
566
  }
553
- .bp_base_button_module_button--ab27d[data-modern=true].bp_base_button_module_large--ab27d.bp_base_button_module_isIconButton--ab27d{
567
+
568
+ .bp_base_button_module_button--e3ebe[data-modern=true].bp_base_button_module_large--e3ebe.bp_base_button_module_isIconButton--e3ebe{
554
569
  --icon-button-large-width:var(--bp-size-100);
555
570
  --icon-button-large-height:var(--bp-size-100);
556
571
  --icon-button-large-padding:0 calc((var(--bp-size-100) - var(--bp-size-050))/2);
557
572
  }
558
- .bp_base_button_module_button--ab27d[data-modern=true].bp_base_button_module_large--ab27d.bp_base_button_module_isTextWithIconEndButton--ab27d{
573
+ .bp_base_button_module_button--e3ebe[data-modern=true].bp_base_button_module_large--e3ebe.bp_base_button_module_isTextWithIconEndButton--e3ebe{
559
574
  --button-large-padding:0 0.875rem 0 var(--bp-space-040);
560
575
  }
561
- .bp_base_button_module_button--ab27d[data-modern=true].bp_base_button_module_large--ab27d.bp_base_button_module_isTextWithIconStartButton--ab27d{
576
+ .bp_base_button_module_button--e3ebe[data-modern=true].bp_base_button_module_large--e3ebe.bp_base_button_module_isTextWithIconStartButton--e3ebe{
562
577
  --button-large-padding:0 var(--bp-space-040) 0 0.875rem;
563
578
  }
564
- .bp_base_button_module_button--ab27d[data-modern=true].bp_base_button_module_large--ab27d.bp_base_button_module_isTextWithStartAndEndIconButton--ab27d{
579
+ .bp_base_button_module_button--e3ebe[data-modern=true].bp_base_button_module_large--e3ebe.bp_base_button_module_isTextWithStartAndEndIconButton--e3ebe{
565
580
  --button-large-padding:0 0.875rem 0 0.875rem;
566
581
  }
567
582
 
568
- .bp_base_button_module_button--ab27d[data-modern=false]{
583
+ .bp_base_button_module_button--e3ebe[data-modern=false]{
569
584
  --button-border-radius:var(--radius-2);
570
585
  --button-line-height:1;
571
586
  font-family:var(--body-default-bold-font-family);
@@ -577,10 +592,10 @@
577
592
  text-decoration:var(--body-default-bold-text-decoration);
578
593
  text-transform:var(--body-default-bold-text-case);
579
594
  }
580
- .bp_base_button_module_button--ab27d[data-modern=false]:not(:disabled)[data-focus-visible]{
595
+ .bp_base_button_module_button--e3ebe[data-modern=false]:not(:disabled)[data-focus-visible]{
581
596
  box-shadow:0 0 0 var(--border-1, 1px) var(--background-background), 0 0 0 var(--border-3) var(--outline-focus-on-light);
582
597
  }
583
- .bp_base_button_module_button--ab27d[data-modern=false].bp_base_button_module_primary--ab27d{
598
+ .bp_base_button_module_button--e3ebe[data-modern=false].bp_base_button_module_primary--e3ebe{
584
599
  --button-color:var(--text-text-brand-on-color);
585
600
  --button-background:var(--surface-surface-brand);
586
601
  --button-border:var(--border-1) solid var(--surface-surface-brand);
@@ -589,7 +604,7 @@
589
604
  --button-active-background:var(--surface-surface-brand-pressed);
590
605
  --button-active-border:var(--border-1) solid var(--surface-surface-brand-pressed);
591
606
  }
592
- .bp_base_button_module_button--ab27d[data-modern=false].bp_base_button_module_secondary--ab27d{
607
+ .bp_base_button_module_button--e3ebe[data-modern=false].bp_base_button_module_secondary--e3ebe{
593
608
  --button-color:var(--text-text-on-light);
594
609
  --button-background:var(--surface-cta-surface-secondary);
595
610
  --button-border:var(--border-1) solid var(--border-cta-border-secondary);
@@ -599,7 +614,7 @@
599
614
  --button-active-border:var(--border-1) solid var(--border-cta-border-secondary-pressed);
600
615
  --button-backdrop-filter:none;
601
616
  }
602
- .bp_base_button_module_button--ab27d[data-modern=false].bp_base_button_module_tertiary--ab27d{
617
+ .bp_base_button_module_button--e3ebe[data-modern=false].bp_base_button_module_tertiary--e3ebe{
603
618
  --button-color:var(--text-cta-link);
604
619
  --button-background:#0000;
605
620
  --button-border:var(--border-1) solid #0000;
@@ -607,7 +622,7 @@
607
622
  --button-active-background:var(--surface-cta-surface-tertiary-pressed);
608
623
  --button-backdrop-filter:none;
609
624
  }
610
- .bp_base_button_module_button--ab27d[data-modern=false].bp_base_button_module_quaternary--ab27d{
625
+ .bp_base_button_module_button--e3ebe[data-modern=false].bp_base_button_module_quaternary--e3ebe{
611
626
  --button-color:var(--text-cta-link-secondary);
612
627
  --button-background:var(--bp-surface-cta-surface-quaternary);
613
628
  --button-border:var(--border-1) solid #0000;
@@ -615,7 +630,7 @@
615
630
  --button-active-background:var(--bp-surface-cta-surface-quaternary-pressed);
616
631
  --button-backdrop-filter:none;
617
632
  }
618
- .bp_base_button_module_button--ab27d[data-modern=false].bp_base_button_module_tertiary-destructive--ab27d{
633
+ .bp_base_button_module_button--e3ebe[data-modern=false].bp_base_button_module_tertiary-destructive--e3ebe{
619
634
  --button-color:var(--text-text-destructive-on-light);
620
635
  --button-background:#0000;
621
636
  --button-border:var(--border-1) solid #0000;
@@ -623,7 +638,7 @@
623
638
  --button-active-background:var(--surface-cta-destructive-surface-tertiary-pressed);
624
639
  --button-backdrop-filter:none;
625
640
  }
626
- .bp_base_button_module_button--ab27d[data-modern=false].bp_base_button_module_destructive--ab27d{
641
+ .bp_base_button_module_button--e3ebe[data-modern=false].bp_base_button_module_destructive--e3ebe{
627
642
  --button-color:var(--text-text-on-dark);
628
643
  --button-background:var(--bp-surface-cta-destructive-surface-primary);
629
644
  --button-border:var(--border-1) solid var(--bp-surface-cta-destructive-surface-primary);
@@ -633,7 +648,7 @@
633
648
  --button-active-border:var(--border-1) solid var(--bp-surface-cta-destructive-surface-primary-pressed);
634
649
  --button-backdrop-filter:none;
635
650
  }
636
- .bp_base_button_module_button--ab27d[data-modern=false].bp_base_button_module_outline--ab27d{
651
+ .bp_base_button_module_button--e3ebe[data-modern=false].bp_base_button_module_outline--e3ebe{
637
652
  --button-color:var(--text-text-on-light);
638
653
  --button-background:var(--surface-cta-surface-outline);
639
654
  --button-border:var(--border-1) solid var(--border-cta-border-outline);
@@ -643,26 +658,26 @@
643
658
  --button-active-border:var(--border-1) solid var(--border-cta-border-outline-pressed);
644
659
  --button-backdrop-filter:none;
645
660
  }
646
- .bp_base_button_module_button--ab27d[data-modern=false].bp_base_button_module_small--ab27d{
661
+ .bp_base_button_module_button--e3ebe[data-modern=false].bp_base_button_module_small--e3ebe{
647
662
  --button-small-gap:var(--space-1);
648
663
  --button-small-min-height:var(--size-8);
649
664
  --button-small-padding:0 var(--space-4);
650
665
  }
651
- .bp_base_button_module_button--ab27d[data-modern=false].bp_base_button_module_small--ab27d.bp_base_button_module_isIconButton--ab27d{
666
+ .bp_base_button_module_button--e3ebe[data-modern=false].bp_base_button_module_small--e3ebe.bp_base_button_module_isIconButton--e3ebe{
652
667
  --icon-button-small-width:var(--size-8);
653
668
  --icon-button-small-height:var(--size-8);
654
669
  --icon-button-small-padding:0 calc((var(--space-8) - var(--space-4))/2);
655
670
  }
656
- .bp_base_button_module_button--ab27d[data-modern=false].bp_base_button_module_small--ab27d.bp_base_button_module_isTextWithIconEndButton--ab27d{
671
+ .bp_base_button_module_button--e3ebe[data-modern=false].bp_base_button_module_small--e3ebe.bp_base_button_module_isTextWithIconEndButton--e3ebe{
657
672
  --button-small-padding:0 var(--space-3);
658
673
  }
659
- .bp_base_button_module_button--ab27d[data-modern=false].bp_base_button_module_small--ab27d.bp_base_button_module_isTextWithIconStartButton--ab27d{
674
+ .bp_base_button_module_button--e3ebe[data-modern=false].bp_base_button_module_small--e3ebe.bp_base_button_module_isTextWithIconStartButton--e3ebe{
660
675
  --button-small-padding:0 var(--space-3) 0 0.625rem;
661
676
  }
662
- .bp_base_button_module_button--ab27d[data-modern=false].bp_base_button_module_small--ab27d.bp_base_button_module_isTextWithStartAndEndIconButton--ab27d{
677
+ .bp_base_button_module_button--e3ebe[data-modern=false].bp_base_button_module_small--e3ebe.bp_base_button_module_isTextWithStartAndEndIconButton--e3ebe{
663
678
  --button-small-padding:0 var(--space-3) 0 var(--space-3);
664
679
  }
665
- .bp_base_button_module_button--ab27d[data-modern=false].bp_base_button_module_x-small--ab27d{
680
+ .bp_base_button_module_button--e3ebe[data-modern=false].bp_base_button_module_x-small--e3ebe{
666
681
  --button-x-small-gap:var(--space-1);
667
682
  --button-x-small-min-height:var(--size-6);
668
683
  --button-x-small-padding:var(--space-05) var(--space-2);
@@ -673,52 +688,54 @@
673
688
  font-weight:var(--button-x-small-font-weight);
674
689
  line-height:var(--button-x-small-line-height);
675
690
  }
676
- .bp_base_button_module_button--ab27d[data-modern=false].bp_base_button_module_x-small--ab27d.bp_base_button_module_isIconButton--ab27d{
691
+ .bp_base_button_module_button--e3ebe[data-modern=false].bp_base_button_module_x-small--e3ebe.bp_base_button_module_isIconButton--e3ebe{
677
692
  --icon-button-x-small-width:var(--size-6);
678
693
  --icon-button-x-small-height:var(--size-6);
679
694
  --icon-button-x-small-padding:0 calc((var(--size-6) - var(--space-4))/2);
680
695
  }
681
- .bp_base_button_module_button--ab27d[data-modern=false].bp_base_button_module_x-small--ab27d.bp_base_button_module_isTextWithIconEndButton--ab27d{
696
+ .bp_base_button_module_button--e3ebe[data-modern=false].bp_base_button_module_x-small--e3ebe.bp_base_button_module_isTextWithIconEndButton--e3ebe{
682
697
  --button-x-small-padding:var(--space-05) 0.375rem var(--space-05) var(--space-2);
683
698
  }
684
- .bp_base_button_module_button--ab27d[data-modern=false].bp_base_button_module_x-small--ab27d.bp_base_button_module_isTextWithIconStartButton--ab27d{
699
+ .bp_base_button_module_button--e3ebe[data-modern=false].bp_base_button_module_x-small--e3ebe.bp_base_button_module_isTextWithIconStartButton--e3ebe{
685
700
  --button-x-small-padding:var(--space-05) var(--space-2) var(--space-05) 0.375rem;
686
701
  }
687
- .bp_base_button_module_button--ab27d[data-modern=false].bp_base_button_module_x-small--ab27d.bp_base_button_module_isTextWithStartAndEndIconButton--ab27d{
702
+ .bp_base_button_module_button--e3ebe[data-modern=false].bp_base_button_module_x-small--e3ebe.bp_base_button_module_isTextWithStartAndEndIconButton--e3ebe{
688
703
  --button-x-small-padding:var(--space-05) 0.375rem;
689
704
  }
690
- .bp_base_button_module_button--ab27d[data-modern=false].bp_base_button_module_large--ab27d{
705
+ .bp_base_button_module_button--e3ebe[data-modern=false].bp_base_button_module_large--e3ebe{
691
706
  --button-large-gap:var(--space-2);
692
707
  --button-large-min-height:var(--size-10);
693
708
  --button-large-padding:0 var(--space-4);
694
709
  --button-large-font-size:var(--body-default-bold-font-size);
695
710
  --button-large-line-height:var(--body-default-bold-line-height);
711
+ font-size:var(--button-large-font-size);
712
+ line-height:var(--button-large-line-height);
696
713
  }
697
- .bp_base_button_module_button--ab27d[data-modern=false].bp_base_button_module_large--ab27d.bp_base_button_module_isIconButton--ab27d{
714
+ .bp_base_button_module_button--e3ebe[data-modern=false].bp_base_button_module_large--e3ebe.bp_base_button_module_isIconButton--e3ebe{
698
715
  --icon-button-large-width:var(--size-10);
699
716
  --icon-button-large-height:var(--size-10);
700
717
  --icon-button-large-padding:0 calc((var(--space-10) - var(--space-5))/2);
701
718
  }
702
- .bp_base_button_module_button--ab27d[data-modern=false].bp_base_button_module_large--ab27d.bp_base_button_module_isTextWithIconEndButton--ab27d{
719
+ .bp_base_button_module_button--e3ebe[data-modern=false].bp_base_button_module_large--e3ebe.bp_base_button_module_isTextWithIconEndButton--e3ebe{
703
720
  --button-large-padding:0 var(--space-4);
704
721
  }
705
- .bp_base_button_module_button--ab27d[data-modern=false].bp_base_button_module_large--ab27d.bp_base_button_module_isTextWithIconStartButton--ab27d{
722
+ .bp_base_button_module_button--e3ebe[data-modern=false].bp_base_button_module_large--e3ebe.bp_base_button_module_isTextWithIconStartButton--e3ebe{
706
723
  --button-large-padding:0 var(--space-4) 0 0.875rem;
707
724
  }
708
- .bp_base_button_module_button--ab27d[data-modern=false].bp_base_button_module_large--ab27d.bp_base_button_module_isTextWithStartAndEndIconButton--ab27d{
725
+ .bp_base_button_module_button--e3ebe[data-modern=false].bp_base_button_module_large--e3ebe.bp_base_button_module_isTextWithStartAndEndIconButton--e3ebe{
709
726
  --button-large-padding:0 var(--space-4) 0 var(--space-4);
710
727
  }
711
728
 
712
- .bp_base_button_module_button--ab27d[data-bp-animated=true]{
729
+ .bp_base_button_module_button--e3ebe[data-bp-animated=true]{
713
730
  transition-duration:var(--bp-duration-short);
714
731
  transition-property:background;
715
732
  transition-timing-function:var(--bp-curve-small-off);
716
733
  }
717
- .bp_base_button_module_button--ab27d[data-bp-animated=true]:active,.bp_base_button_module_button--ab27d[data-bp-animated=true]:hover{
734
+ .bp_base_button_module_button--e3ebe[data-bp-animated=true]:active,.bp_base_button_module_button--e3ebe[data-bp-animated=true]:hover{
718
735
  transition-timing-function:var(--bp-curve-small-on);
719
736
  }
720
737
 
721
- .bp_base_button_module_button--ab27d{
738
+ .bp_base_button_module_button--e3ebe{
722
739
  border-radius:var(--button-border-radius);
723
740
  cursor:pointer;
724
741
  justify-content:center;
@@ -727,151 +744,149 @@
727
744
  user-select:none;
728
745
  white-space:nowrap;
729
746
  }
730
- .bp_base_button_module_button--ab27d,.bp_base_button_module_button--ab27d .bp_base_button_module_icon--ab27d{
747
+ .bp_base_button_module_button--e3ebe,.bp_base_button_module_button--e3ebe .bp_base_button_module_icon--e3ebe{
731
748
  align-items:center;
732
749
  display:flex;
733
750
  }
734
- .bp_base_button_module_button--ab27d:disabled{
751
+ .bp_base_button_module_button--e3ebe:disabled{
735
752
  opacity:.3;
736
753
  }
737
- .bp_base_button_module_button--ab27d.bp_base_button_module_primary--ab27d{
754
+ .bp_base_button_module_button--e3ebe.bp_base_button_module_primary--e3ebe{
738
755
  background:var(--button-background);
739
756
  border:var(--button-border);
740
757
  color:var(--button-color);
741
758
  }
742
- .bp_base_button_module_button--ab27d.bp_base_button_module_primary--ab27d:not(:disabled):hover,.bp_base_button_module_button--ab27d.bp_base_button_module_primary--ab27d:not(:disabled)[data-focus-visible]{
759
+ .bp_base_button_module_button--e3ebe.bp_base_button_module_primary--e3ebe:not(:disabled):hover,.bp_base_button_module_button--e3ebe.bp_base_button_module_primary--e3ebe:not(:disabled)[data-focus-visible]{
743
760
  background:var(--button-focus-or-hover-background);
744
761
  border:var(--button-focus-or-hover-border);
745
762
  }
746
- .bp_base_button_module_button--ab27d.bp_base_button_module_primary--ab27d:not(:disabled):active{
763
+ .bp_base_button_module_button--e3ebe.bp_base_button_module_primary--e3ebe:not(:disabled):active{
747
764
  background:var(--button-active-background);
748
765
  border:var(--button-active-border);
749
766
  }
750
- .bp_base_button_module_button--ab27d.bp_base_button_module_secondary--ab27d{
767
+ .bp_base_button_module_button--e3ebe.bp_base_button_module_secondary--e3ebe{
751
768
  backdrop-filter:var(--button-backdrop-filter);
752
769
  background:var(--button-background);
753
770
  border:var(--button-border);
754
771
  color:var(--button-color);
755
772
  }
756
- .bp_base_button_module_button--ab27d.bp_base_button_module_secondary--ab27d:not(:disabled):hover,.bp_base_button_module_button--ab27d.bp_base_button_module_secondary--ab27d:not(:disabled)[data-focus-visible]{
773
+ .bp_base_button_module_button--e3ebe.bp_base_button_module_secondary--e3ebe:not(:disabled):hover,.bp_base_button_module_button--e3ebe.bp_base_button_module_secondary--e3ebe:not(:disabled)[data-focus-visible]{
757
774
  background:var(--button-focus-or-hover-background);
758
775
  border:var(--button-focus-or-hover-border);
759
776
  }
760
- .bp_base_button_module_button--ab27d.bp_base_button_module_secondary--ab27d:not(:disabled):active{
777
+ .bp_base_button_module_button--e3ebe.bp_base_button_module_secondary--e3ebe:not(:disabled):active{
761
778
  background:var(--button-active-background);
762
779
  border:var(--button-active-border);
763
780
  }
764
- .bp_base_button_module_button--ab27d.bp_base_button_module_tertiary-destructive--ab27d{
781
+ .bp_base_button_module_button--e3ebe.bp_base_button_module_tertiary-destructive--e3ebe{
765
782
  backdrop-filter:var(--button-backdrop-filter);
766
783
  background:var(--button-background);
767
784
  border:var(--button-border);
768
785
  color:var(--button-color);
769
786
  }
770
- .bp_base_button_module_button--ab27d.bp_base_button_module_tertiary-destructive--ab27d:not(:disabled):hover,.bp_base_button_module_button--ab27d.bp_base_button_module_tertiary-destructive--ab27d:not(:disabled)[data-focus-visible]{
787
+ .bp_base_button_module_button--e3ebe.bp_base_button_module_tertiary-destructive--e3ebe:not(:disabled):hover,.bp_base_button_module_button--e3ebe.bp_base_button_module_tertiary-destructive--e3ebe:not(:disabled)[data-focus-visible]{
771
788
  background:var(--button-focus-or-hover-background);
772
789
  }
773
- .bp_base_button_module_button--ab27d.bp_base_button_module_tertiary-destructive--ab27d:not(:disabled):active{
790
+ .bp_base_button_module_button--e3ebe.bp_base_button_module_tertiary-destructive--e3ebe:not(:disabled):active{
774
791
  background:var(--button-active-background);
775
792
  }
776
- .bp_base_button_module_button--ab27d.bp_base_button_module_tertiary--ab27d{
793
+ .bp_base_button_module_button--e3ebe.bp_base_button_module_tertiary--e3ebe{
777
794
  backdrop-filter:var(--button-backdrop-filter);
778
795
  background:var(--button-background);
779
796
  border:var(--button-border);
780
797
  color:var(--button-color);
781
798
  }
782
- .bp_base_button_module_button--ab27d.bp_base_button_module_tertiary--ab27d:not(:disabled):hover,.bp_base_button_module_button--ab27d.bp_base_button_module_tertiary--ab27d:not(:disabled)[data-focus-visible]{
799
+ .bp_base_button_module_button--e3ebe.bp_base_button_module_tertiary--e3ebe:not(:disabled):hover,.bp_base_button_module_button--e3ebe.bp_base_button_module_tertiary--e3ebe:not(:disabled)[data-focus-visible]{
783
800
  background:var(--button-focus-or-hover-background);
784
801
  }
785
- .bp_base_button_module_button--ab27d.bp_base_button_module_tertiary--ab27d:not(:disabled):active{
802
+ .bp_base_button_module_button--e3ebe.bp_base_button_module_tertiary--e3ebe:not(:disabled):active{
786
803
  background:var(--button-active-background);
787
804
  }
788
- .bp_base_button_module_button--ab27d.bp_base_button_module_quaternary--ab27d{
805
+ .bp_base_button_module_button--e3ebe.bp_base_button_module_quaternary--e3ebe{
789
806
  backdrop-filter:var(--button-backdrop-filter);
790
807
  background:var(--button-background);
791
808
  border:var(--button-border);
792
809
  color:var(--button-color);
793
810
  }
794
- .bp_base_button_module_button--ab27d.bp_base_button_module_quaternary--ab27d:not(:disabled):hover,.bp_base_button_module_button--ab27d.bp_base_button_module_quaternary--ab27d:not(:disabled)[data-focus-visible]{
811
+ .bp_base_button_module_button--e3ebe.bp_base_button_module_quaternary--e3ebe:not(:disabled):hover,.bp_base_button_module_button--e3ebe.bp_base_button_module_quaternary--e3ebe:not(:disabled)[data-focus-visible]{
795
812
  background:var(--button-focus-or-hover-background);
796
813
  }
797
- .bp_base_button_module_button--ab27d.bp_base_button_module_quaternary--ab27d:not(:disabled):active{
814
+ .bp_base_button_module_button--e3ebe.bp_base_button_module_quaternary--e3ebe:not(:disabled):active{
798
815
  background:var(--button-active-background);
799
816
  }
800
- .bp_base_button_module_button--ab27d.bp_base_button_module_destructive--ab27d{
817
+ .bp_base_button_module_button--e3ebe.bp_base_button_module_destructive--e3ebe{
801
818
  background:var(--button-background);
802
819
  border:var(--button-border);
803
820
  color:var(--button-color);
804
821
  }
805
- .bp_base_button_module_button--ab27d.bp_base_button_module_destructive--ab27d:not(:disabled):hover,.bp_base_button_module_button--ab27d.bp_base_button_module_destructive--ab27d:not(:disabled)[data-focus-visible]{
822
+ .bp_base_button_module_button--e3ebe.bp_base_button_module_destructive--e3ebe:not(:disabled):hover,.bp_base_button_module_button--e3ebe.bp_base_button_module_destructive--e3ebe:not(:disabled)[data-focus-visible]{
806
823
  background:var(--button-focus-or-hover-background);
807
824
  border:var(--button-focus-or-hover-border);
808
825
  }
809
- .bp_base_button_module_button--ab27d.bp_base_button_module_destructive--ab27d:not(:disabled):active{
826
+ .bp_base_button_module_button--e3ebe.bp_base_button_module_destructive--e3ebe:not(:disabled):active{
810
827
  background:var(--button-active-background);
811
828
  border:var(--button-active-border);
812
829
  }
813
- .bp_base_button_module_button--ab27d.bp_base_button_module_outline--ab27d{
830
+ .bp_base_button_module_button--e3ebe.bp_base_button_module_outline--e3ebe{
814
831
  backdrop-filter:var(--button-backdrop-filter);
815
832
  background:var(--button-background);
816
833
  border:var(--button-border);
817
834
  color:var(--button-color);
818
835
  }
819
- .bp_base_button_module_button--ab27d.bp_base_button_module_outline--ab27d:not(:disabled):hover,.bp_base_button_module_button--ab27d.bp_base_button_module_outline--ab27d:not(:disabled)[data-focus-visible]{
836
+ .bp_base_button_module_button--e3ebe.bp_base_button_module_outline--e3ebe:not(:disabled):hover,.bp_base_button_module_button--e3ebe.bp_base_button_module_outline--e3ebe:not(:disabled)[data-focus-visible]{
820
837
  background:var(--button-focus-or-hover-background);
821
838
  border:var(--button-focus-or-hover-border);
822
839
  }
823
- .bp_base_button_module_button--ab27d.bp_base_button_module_outline--ab27d:not(:disabled):active{
840
+ .bp_base_button_module_button--e3ebe.bp_base_button_module_outline--e3ebe:not(:disabled):active{
824
841
  background:var(--button-active-background);
825
842
  border:var(--button-active-border);
826
843
  }
827
- .bp_base_button_module_button--ab27d.bp_base_button_module_small--ab27d{
844
+ .bp_base_button_module_button--e3ebe.bp_base_button_module_small--e3ebe{
828
845
  gap:var(--button-small-gap);
829
846
  min-height:var(--button-small-min-height);
830
847
  padding:var(--button-small-padding);
831
848
  }
832
- .bp_base_button_module_button--ab27d.bp_base_button_module_small--ab27d.bp_base_button_module_isIconButton--ab27d{
849
+ .bp_base_button_module_button--e3ebe.bp_base_button_module_small--e3ebe.bp_base_button_module_isIconButton--e3ebe{
833
850
  height:var(--icon-button-small-height);
834
851
  min-height:unset;
835
852
  padding:var(--icon-button-small-padding);
836
853
  width:var(--icon-button-small-width);
837
854
  }
838
- .bp_base_button_module_button--ab27d.bp_base_button_module_small--ab27d.bp_base_button_module_isTextWithIconEndButton--ab27d,.bp_base_button_module_button--ab27d.bp_base_button_module_small--ab27d.bp_base_button_module_isTextWithIconStartButton--ab27d,.bp_base_button_module_button--ab27d.bp_base_button_module_small--ab27d.bp_base_button_module_isTextWithStartAndEndIconButton--ab27d{
855
+ .bp_base_button_module_button--e3ebe.bp_base_button_module_small--e3ebe.bp_base_button_module_isTextWithIconEndButton--e3ebe,.bp_base_button_module_button--e3ebe.bp_base_button_module_small--e3ebe.bp_base_button_module_isTextWithIconStartButton--e3ebe,.bp_base_button_module_button--e3ebe.bp_base_button_module_small--e3ebe.bp_base_button_module_isTextWithStartAndEndIconButton--e3ebe{
839
856
  padding:var(--button-small-padding);
840
857
  }
841
- .bp_base_button_module_button--ab27d.bp_base_button_module_x-small--ab27d{
858
+ .bp_base_button_module_button--e3ebe.bp_base_button_module_x-small--e3ebe{
842
859
  gap:var(--button-x-small-gap);
843
860
  min-height:var(--button-x-small-min-height);
844
861
  padding:var(--button-x-small-padding);
845
862
  }
846
- .bp_base_button_module_button--ab27d.bp_base_button_module_x-small--ab27d.bp_base_button_module_isIconButton--ab27d{
863
+ .bp_base_button_module_button--e3ebe.bp_base_button_module_x-small--e3ebe.bp_base_button_module_isIconButton--e3ebe{
847
864
  height:var(--icon-button-x-small-height);
848
865
  min-height:unset;
849
866
  padding:var(--icon-button-x-small-padding);
850
867
  width:var(--icon-button-x-small-width);
851
868
  }
852
- .bp_base_button_module_button--ab27d.bp_base_button_module_x-small--ab27d.bp_base_button_module_isTextWithIconEndButton--ab27d,.bp_base_button_module_button--ab27d.bp_base_button_module_x-small--ab27d.bp_base_button_module_isTextWithIconStartButton--ab27d,.bp_base_button_module_button--ab27d.bp_base_button_module_x-small--ab27d.bp_base_button_module_isTextWithStartAndEndIconButton--ab27d{
869
+ .bp_base_button_module_button--e3ebe.bp_base_button_module_x-small--e3ebe.bp_base_button_module_isTextWithIconEndButton--e3ebe,.bp_base_button_module_button--e3ebe.bp_base_button_module_x-small--e3ebe.bp_base_button_module_isTextWithIconStartButton--e3ebe,.bp_base_button_module_button--e3ebe.bp_base_button_module_x-small--e3ebe.bp_base_button_module_isTextWithStartAndEndIconButton--e3ebe{
853
870
  padding:var(--button-x-small-padding);
854
871
  }
855
- .bp_base_button_module_button--ab27d.bp_base_button_module_large--ab27d{
856
- font-size:var(--button-large-font-size);
872
+ .bp_base_button_module_button--e3ebe.bp_base_button_module_large--e3ebe{
857
873
  gap:var(--button-large-gap);
858
- line-height:var(--button-large-line-height);
859
874
  min-height:var(--button-large-min-height);
860
875
  padding:var(--button-large-padding);
861
876
  }
862
- .bp_base_button_module_button--ab27d.bp_base_button_module_large--ab27d.bp_base_button_module_isIconButton--ab27d{
877
+ .bp_base_button_module_button--e3ebe.bp_base_button_module_large--e3ebe.bp_base_button_module_isIconButton--e3ebe{
863
878
  height:var(--icon-button-large-height);
864
879
  padding:var(--icon-button-large-padding);
865
880
  width:var(--icon-button-large-width);
866
881
  }
867
- .bp_base_button_module_button--ab27d.bp_base_button_module_large--ab27d.bp_base_button_module_isTextWithIconEndButton--ab27d,.bp_base_button_module_button--ab27d.bp_base_button_module_large--ab27d.bp_base_button_module_isTextWithIconStartButton--ab27d,.bp_base_button_module_button--ab27d.bp_base_button_module_large--ab27d.bp_base_button_module_isTextWithStartAndEndIconButton--ab27d{
882
+ .bp_base_button_module_button--e3ebe.bp_base_button_module_large--e3ebe.bp_base_button_module_isTextWithIconEndButton--e3ebe,.bp_base_button_module_button--e3ebe.bp_base_button_module_large--e3ebe.bp_base_button_module_isTextWithIconStartButton--e3ebe,.bp_base_button_module_button--e3ebe.bp_base_button_module_large--e3ebe.bp_base_button_module_isTextWithStartAndEndIconButton--e3ebe{
868
883
  padding:var(--button-large-padding);
869
884
  }
870
- .bp_base_button_module_button--ab27d.bp_base_button_module_hide--ab27d{
885
+ .bp_base_button_module_button--e3ebe.bp_base_button_module_hide--e3ebe{
871
886
  pointer-events:none;
872
887
  position:relative;
873
888
  }
874
- .bp_base_button_module_button--ab27d.bp_base_button_module_hide--ab27d span{
889
+ .bp_base_button_module_button--e3ebe.bp_base_button_module_hide--e3ebe span{
875
890
  color:#0000;
876
891
  opacity:0;
877
892
  }
@@ -1,4 +1,4 @@
1
1
  import '../../index.css';
2
- var styles = {"button":"bp_base_button_module_button--ab27d","primary":"bp_base_button_module_primary--ab27d","secondary":"bp_base_button_module_secondary--ab27d","tertiary":"bp_base_button_module_tertiary--ab27d","quaternary":"bp_base_button_module_quaternary--ab27d","tertiary-destructive":"bp_base_button_module_tertiary-destructive--ab27d","destructive":"bp_base_button_module_destructive--ab27d","outline":"bp_base_button_module_outline--ab27d","small":"bp_base_button_module_small--ab27d","isIconButton":"bp_base_button_module_isIconButton--ab27d","isTextWithIconEndButton":"bp_base_button_module_isTextWithIconEndButton--ab27d","isTextWithIconStartButton":"bp_base_button_module_isTextWithIconStartButton--ab27d","isTextWithStartAndEndIconButton":"bp_base_button_module_isTextWithStartAndEndIconButton--ab27d","x-small":"bp_base_button_module_x-small--ab27d","large":"bp_base_button_module_large--ab27d","icon":"bp_base_button_module_icon--ab27d","hide":"bp_base_button_module_hide--ab27d"};
2
+ var styles = {"button":"bp_base_button_module_button--e3ebe","primary":"bp_base_button_module_primary--e3ebe","secondary":"bp_base_button_module_secondary--e3ebe","tertiary":"bp_base_button_module_tertiary--e3ebe","quaternary":"bp_base_button_module_quaternary--e3ebe","tertiary-destructive":"bp_base_button_module_tertiary-destructive--e3ebe","destructive":"bp_base_button_module_destructive--e3ebe","outline":"bp_base_button_module_outline--e3ebe","small":"bp_base_button_module_small--e3ebe","isIconButton":"bp_base_button_module_isIconButton--e3ebe","isTextWithIconEndButton":"bp_base_button_module_isTextWithIconEndButton--e3ebe","isTextWithIconStartButton":"bp_base_button_module_isTextWithIconStartButton--e3ebe","isTextWithStartAndEndIconButton":"bp_base_button_module_isTextWithStartAndEndIconButton--e3ebe","x-small":"bp_base_button_module_x-small--e3ebe","large":"bp_base_button_module_large--e3ebe","icon":"bp_base_button_module_icon--e3ebe","hide":"bp_base_button_module_hide--e3ebe"};
3
3
 
4
4
  export { styles as default };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@box/blueprint-web",
3
- "version": "16.11.0",
3
+ "version": "16.12.0",
4
4
  "type": "module",
5
5
  "license": "SEE LICENSE IN LICENSE",
6
6
  "publishConfig": {
@@ -42,12 +42,15 @@
42
42
  },
43
43
  "./index.css": {
44
44
  "import": "./dist/lib-esm/index.css"
45
+ },
46
+ "./components.css": {
47
+ "import": "./dist/lib-esm/components.css"
45
48
  }
46
49
  },
47
50
  "dependencies": {
48
51
  "@ariakit/react": "0.4.21",
49
52
  "@ariakit/react-core": "0.4.21",
50
- "@box/blueprint-web-assets": "^5.5.6",
53
+ "@box/blueprint-web-assets": "^5.5.7",
51
54
  "@internationalized/date": "^3.12.0",
52
55
  "@radix-ui/react-accordion": "1.1.2",
53
56
  "@radix-ui/react-checkbox": "1.0.4",
@@ -76,7 +79,7 @@
76
79
  "type-fest": "^3.2.0"
77
80
  },
78
81
  "devDependencies": {
79
- "@box/storybook-utils": "^1.1.30",
82
+ "@box/storybook-utils": "^1.1.31",
80
83
  "@figma/code-connect": "1.4.4",
81
84
  "@types/react": "^18.0.0",
82
85
  "@types/react-dom": "^18.0.0",