@box/blueprint-web 13.5.7 → 13.5.8

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/dist/lib-esm/index.css +83 -55
  2. package/dist/lib-esm/primitives/base-button/base-button.module.js +1 -1
  3. package/dist/lib-esm/primitives/base-button/types.d.ts +1 -1
  4. package/dist/lib-esm/primitives/base-button/utils.js +3 -1
  5. package/package.json +3 -3
package/dist/lib-esm/index.css CHANGED
@@ -355,7 +355,7 @@
355
355
  }
356
356
  }
357
357
 
358
- .bp_base_button_module_button--cf95b[data-modern=true]{
358
+ .bp_base_button_module_button--ef525[data-modern=true]{
359
359
  --button-border-radius:var(--bp-radius-10);
360
360
  font-family:var(--bp-font-font-family), -apple-system, BlinkMacSystemFont, "San Francisco", "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
361
361
  font-size:var(--bp-font-size-05);
@@ -364,10 +364,10 @@
364
364
  letter-spacing:var(--bp-font-letter-spacing-01);
365
365
  line-height:var(--bp-font-line-height-04);
366
366
  }
367
- .bp_base_button_module_button--cf95b[data-modern=true]:not(:disabled)[data-focus-visible]{
367
+ .bp_base_button_module_button--ef525[data-modern=true]:not(:disabled)[data-focus-visible]{
368
368
  box-shadow:0 0 0 var(--border-1, 1px) var(--background-background), 0 0 0 var(--border-3) var(--bp-outline-focus-on-light);
369
369
  }
370
- .bp_base_button_module_button--cf95b[data-modern=true].bp_base_button_module_primary--cf95b{
370
+ .bp_base_button_module_button--ef525[data-modern=true].bp_base_button_module_primary--ef525{
371
371
  --button-color:var(--bp-text-text-on-dark);
372
372
  --button-background:var(--bp-surface-surface-brand);
373
373
  --button-border:var(--bp-border-01) solid var(--bp-surface-surface-brand);
@@ -376,7 +376,7 @@
376
376
  --button-active-background:var(--bp-surface-surface-brand-pressed);
377
377
  --button-active-border:var(--bp-border-01) solid var(--bp-surface-surface-brand-pressed);
378
378
  }
379
- .bp_base_button_module_button--cf95b[data-modern=true].bp_base_button_module_secondary--cf95b{
379
+ .bp_base_button_module_button--ef525[data-modern=true].bp_base_button_module_secondary--ef525{
380
380
  --button-color:var(--bp-text-text-on-light);
381
381
  --button-background:var(--bp-surface-cta-surface-secondary);
382
382
  --button-border:var(--bp-border-01) solid var(--bp-border-cta-border-secondary);
@@ -386,14 +386,22 @@
386
386
  --button-active-border:var(--bp-border-01) solid var(--bp-border-cta-border-secondary);
387
387
  --button-backdrop-filter:blur(16px);
388
388
  }
389
- .bp_base_button_module_button--cf95b[data-modern=true].bp_base_button_module_tertiary--cf95b{
389
+ .bp_base_button_module_button--ef525[data-modern=true].bp_base_button_module_tertiary--ef525{
390
390
  --button-color:var(--bp-text-cta-link);
391
391
  --button-background:var(--bp-surface-cta-surface-tertiary);
392
392
  --button-focus-or-hover-background:var(--bp-surface-cta-surface-tertiary-hover);
393
393
  --button-active-background:var(--bp-surface-cta-surface-tertiary-pressed);
394
394
  --button-backdrop-filter:blur(16px);
395
395
  }
396
- .bp_base_button_module_button--cf95b[data-modern=true].bp_base_button_module_outline--cf95b{
396
+ .bp_base_button_module_button--ef525[data-modern=true].bp_base_button_module_quaternary--ef525{
397
+ --button-color:var(--bp-text-cta-link-secondary);
398
+ --button-background:var(--bp-surface-cta-surface-quaternary);
399
+ --button-border:var(--bp-border-01) solid #0000;
400
+ --button-focus-or-hover-background:var(--bp-surface-cta-surface-quaternary-hover);
401
+ --button-active-background:var(--bp-surface-cta-surface-quaternary-pressed);
402
+ --button-backdrop-filter:blur(16px);
403
+ }
404
+ .bp_base_button_module_button--ef525[data-modern=true].bp_base_button_module_outline--ef525{
397
405
  --button-color:var(--bp-text-text-on-light);
398
406
  --button-background:var(--bp-surface-cta-surface-secondary);
399
407
  --button-border:var(--bp-border-01) solid var(--bp-border-cta-border-high-contrast);
@@ -403,48 +411,48 @@
403
411
  --button-active-border:var(--bp-border-01) solid var(--bp-border-cta-border-high-contrast);
404
412
  --button-backdrop-filter:blur(16px);
405
413
  }
406
- .bp_base_button_module_button--cf95b[data-modern=true].bp_base_button_module_small--cf95b{
414
+ .bp_base_button_module_button--ef525[data-modern=true].bp_base_button_module_small--ef525{
407
415
  --button-small-gap:var(--bp-space-010);
408
416
  --button-small-min-height:var(--bp-size-080);
409
417
  --button-small-padding:0 var(--bp-size-030);
410
418
  }
411
- .bp_base_button_module_button--cf95b[data-modern=true].bp_base_button_module_small--cf95b.bp_base_button_module_isIconButton--cf95b{
419
+ .bp_base_button_module_button--ef525[data-modern=true].bp_base_button_module_small--ef525.bp_base_button_module_isIconButton--ef525{
412
420
  --icon-button-small-width:var(--bp-size-080);
413
421
  --icon-button-small-height:var(--bp-size-080);
414
422
  --icon-button-small-padding:0 calc((var(--bp-size-080) - var(--bp-size-040))/2);
415
423
  }
416
- .bp_base_button_module_button--cf95b[data-modern=true].bp_base_button_module_small--cf95b.bp_base_button_module_isTextWithIconEndButton--cf95b{
424
+ .bp_base_button_module_button--ef525[data-modern=true].bp_base_button_module_small--ef525.bp_base_button_module_isTextWithIconEndButton--ef525{
417
425
  --button-small-padding:0 0.625rem 0 var(--bp-space-030);
418
426
  }
419
- .bp_base_button_module_button--cf95b[data-modern=true].bp_base_button_module_small--cf95b.bp_base_button_module_isTextWithIconStartButton--cf95b{
427
+ .bp_base_button_module_button--ef525[data-modern=true].bp_base_button_module_small--ef525.bp_base_button_module_isTextWithIconStartButton--ef525{
420
428
  --button-small-padding:0 var(--bp-space-030) 0 0.625rem;
421
429
  }
422
- .bp_base_button_module_button--cf95b[data-modern=true].bp_base_button_module_small--cf95b.bp_base_button_module_isTextWithStartAndEndIconButton--cf95b{
430
+ .bp_base_button_module_button--ef525[data-modern=true].bp_base_button_module_small--ef525.bp_base_button_module_isTextWithStartAndEndIconButton--ef525{
423
431
  --button-small-padding:0 0.625rem 0 0.625rem;
424
432
  }
425
- .bp_base_button_module_button--cf95b[data-modern=true].bp_base_button_module_large--cf95b{
433
+ .bp_base_button_module_button--ef525[data-modern=true].bp_base_button_module_large--ef525{
426
434
  --button-large-gap:var(--bp-space-020);
427
435
  --button-large-min-height:var(--bp-size-100);
428
436
  --button-large-padding:0 var(--bp-size-040);
429
437
  --button-large-font-size:var(--body-large-bold-font-size);
430
438
  --button-large-line-height:var(--body-large-bold-line-height);
431
439
  }
432
- .bp_base_button_module_button--cf95b[data-modern=true].bp_base_button_module_large--cf95b.bp_base_button_module_isIconButton--cf95b{
440
+ .bp_base_button_module_button--ef525[data-modern=true].bp_base_button_module_large--ef525.bp_base_button_module_isIconButton--ef525{
433
441
  --icon-button-large-width:var(--bp-size-100);
434
442
  --icon-button-large-height:var(--bp-size-100);
435
443
  --icon-button-large-padding:0 calc((var(--bp-size-100) - var(--bp-size-050))/2);
436
444
  }
437
- .bp_base_button_module_button--cf95b[data-modern=true].bp_base_button_module_large--cf95b.bp_base_button_module_isTextWithIconEndButton--cf95b{
445
+ .bp_base_button_module_button--ef525[data-modern=true].bp_base_button_module_large--ef525.bp_base_button_module_isTextWithIconEndButton--ef525{
438
446
  --button-large-padding:0 0.875rem 0 var(--bp-space-040);
439
447
  }
440
- .bp_base_button_module_button--cf95b[data-modern=true].bp_base_button_module_large--cf95b.bp_base_button_module_isTextWithIconStartButton--cf95b{
448
+ .bp_base_button_module_button--ef525[data-modern=true].bp_base_button_module_large--ef525.bp_base_button_module_isTextWithIconStartButton--ef525{
441
449
  --button-large-padding:0 var(--bp-space-040) 0 0.875rem;
442
450
  }
443
- .bp_base_button_module_button--cf95b[data-modern=true].bp_base_button_module_large--cf95b.bp_base_button_module_isTextWithStartAndEndIconButton--cf95b{
451
+ .bp_base_button_module_button--ef525[data-modern=true].bp_base_button_module_large--ef525.bp_base_button_module_isTextWithStartAndEndIconButton--ef525{
444
452
  --button-large-padding:0 0.875rem 0 0.875rem;
445
453
  }
446
454
 
447
- .bp_base_button_module_button--cf95b[data-modern=false]{
455
+ .bp_base_button_module_button--ef525[data-modern=false]{
448
456
  --button-border-radius:var(--radius-2);
449
457
  font-family:var(--body-default-bold-font-family);
450
458
  font-size:var(--body-default-bold-font-size);
@@ -454,10 +462,10 @@
454
462
  text-decoration:var(--body-default-bold-text-decoration);
455
463
  text-transform:var(--body-default-bold-text-case);
456
464
  }
457
- .bp_base_button_module_button--cf95b[data-modern=false]:not(:disabled)[data-focus-visible]{
465
+ .bp_base_button_module_button--ef525[data-modern=false]:not(:disabled)[data-focus-visible]{
458
466
  box-shadow:0 0 0 var(--border-1, 1px) var(--background-background), 0 0 0 var(--border-3) var(--outline-focus-on-light);
459
467
  }
460
- .bp_base_button_module_button--cf95b[data-modern=false].bp_base_button_module_primary--cf95b{
468
+ .bp_base_button_module_button--ef525[data-modern=false].bp_base_button_module_primary--ef525{
461
469
  --button-color:var(--text-text-brand-on-color);
462
470
  --button-background:var(--surface-surface-brand);
463
471
  --button-border:var(--border-1) solid var(--surface-surface-brand);
@@ -466,7 +474,7 @@
466
474
  --button-active-background:var(--surface-surface-brand-pressed);
467
475
  --button-active-border:var(--border-1) solid var(--surface-surface-brand-pressed);
468
476
  }
469
- .bp_base_button_module_button--cf95b[data-modern=false].bp_base_button_module_secondary--cf95b{
477
+ .bp_base_button_module_button--ef525[data-modern=false].bp_base_button_module_secondary--ef525{
470
478
  --button-color:var(--text-text-on-light);
471
479
  --button-background:var(--surface-cta-surface-secondary);
472
480
  --button-border:var(--border-1) solid var(--border-cta-border-secondary);
@@ -476,7 +484,7 @@
476
484
  --button-active-border:var(--border-1) solid var(--border-cta-border-secondary-pressed);
477
485
  --button-backdrop-filter:none;
478
486
  }
479
- .bp_base_button_module_button--cf95b[data-modern=false].bp_base_button_module_tertiary--cf95b{
487
+ .bp_base_button_module_button--ef525[data-modern=false].bp_base_button_module_tertiary--ef525{
480
488
  --button-color:var(--text-cta-link);
481
489
  --button-background:#0000;
482
490
  --button-border:var(--border-1) solid #0000;
@@ -484,7 +492,15 @@
484
492
  --button-active-background:var(--surface-cta-surface-tertiary-pressed);
485
493
  --button-backdrop-filter:none;
486
494
  }
487
- .bp_base_button_module_button--cf95b[data-modern=false].bp_base_button_module_outline--cf95b{
495
+ .bp_base_button_module_button--ef525[data-modern=false].bp_base_button_module_quaternary--ef525{
496
+ --button-color:var(--text-cta-link-secondary);
497
+ --button-background:var(--bp-surface-cta-surface-quaternary);
498
+ --button-border:var(--border-1) solid #0000;
499
+ --button-focus-or-hover-background:var(--bp-surface-cta-surface-quaternary-hover);
500
+ --button-active-background:var(--bp-surface-cta-surface-quaternary-pressed);
501
+ --button-backdrop-filter:none;
502
+ }
503
+ .bp_base_button_module_button--ef525[data-modern=false].bp_base_button_module_outline--ef525{
488
504
  --button-color:var(--text-text-on-light);
489
505
  --button-background:var(--surface-cta-surface-outline);
490
506
  --button-border:var(--border-1) solid var(--border-cta-border-outline);
@@ -494,48 +510,48 @@
494
510
  --button-active-border:var(--border-1) solid var(--border-cta-border-outline-pressed);
495
511
  --button-backdrop-filter:none;
496
512
  }
497
- .bp_base_button_module_button--cf95b[data-modern=false].bp_base_button_module_small--cf95b{
513
+ .bp_base_button_module_button--ef525[data-modern=false].bp_base_button_module_small--ef525{
498
514
  --button-small-gap:var(--space-1);
499
515
  --button-small-min-height:var(--size-8);
500
516
  --button-small-padding:0 var(--space-4);
501
517
  }
502
- .bp_base_button_module_button--cf95b[data-modern=false].bp_base_button_module_small--cf95b.bp_base_button_module_isIconButton--cf95b{
518
+ .bp_base_button_module_button--ef525[data-modern=false].bp_base_button_module_small--ef525.bp_base_button_module_isIconButton--ef525{
503
519
  --icon-button-small-width:var(--size-8);
504
520
  --icon-button-small-height:var(--size-8);
505
521
  --icon-button-small-padding:0 calc((var(--space-8) - var(--space-4))/2);
506
522
  }
507
- .bp_base_button_module_button--cf95b[data-modern=false].bp_base_button_module_small--cf95b.bp_base_button_module_isTextWithIconEndButton--cf95b{
523
+ .bp_base_button_module_button--ef525[data-modern=false].bp_base_button_module_small--ef525.bp_base_button_module_isTextWithIconEndButton--ef525{
508
524
  --button-small-padding:0 var(--space-3);
509
525
  }
510
- .bp_base_button_module_button--cf95b[data-modern=false].bp_base_button_module_small--cf95b.bp_base_button_module_isTextWithIconStartButton--cf95b{
526
+ .bp_base_button_module_button--ef525[data-modern=false].bp_base_button_module_small--ef525.bp_base_button_module_isTextWithIconStartButton--ef525{
511
527
  --button-small-padding:0 var(--space-3) 0 0.625rem;
512
528
  }
513
- .bp_base_button_module_button--cf95b[data-modern=false].bp_base_button_module_small--cf95b.bp_base_button_module_isTextWithStartAndEndIconButton--cf95b{
529
+ .bp_base_button_module_button--ef525[data-modern=false].bp_base_button_module_small--ef525.bp_base_button_module_isTextWithStartAndEndIconButton--ef525{
514
530
  --button-small-padding:0 var(--space-3) 0 var(--space-3);
515
531
  }
516
- .bp_base_button_module_button--cf95b[data-modern=false].bp_base_button_module_large--cf95b{
532
+ .bp_base_button_module_button--ef525[data-modern=false].bp_base_button_module_large--ef525{
517
533
  --button-large-gap:var(--space-2);
518
534
  --button-large-min-height:var(--size-10);
519
535
  --button-large-padding:0 var(--space-4);
520
536
  --button-large-font-size:var(--body-default-bold-font-size);
521
537
  --button-large-line-height:var(--body-default-bold-line-height);
522
538
  }
523
- .bp_base_button_module_button--cf95b[data-modern=false].bp_base_button_module_large--cf95b.bp_base_button_module_isIconButton--cf95b{
539
+ .bp_base_button_module_button--ef525[data-modern=false].bp_base_button_module_large--ef525.bp_base_button_module_isIconButton--ef525{
524
540
  --icon-button-large-width:var(--size-10);
525
541
  --icon-button-large-height:var(--size-10);
526
542
  --icon-button-large-padding:0 calc((var(--space-10) - var(--space-5))/2);
527
543
  }
528
- .bp_base_button_module_button--cf95b[data-modern=false].bp_base_button_module_large--cf95b.bp_base_button_module_isTextWithIconEndButton--cf95b{
544
+ .bp_base_button_module_button--ef525[data-modern=false].bp_base_button_module_large--ef525.bp_base_button_module_isTextWithIconEndButton--ef525{
529
545
  --button-large-padding:0 var(--space-4);
530
546
  }
531
- .bp_base_button_module_button--cf95b[data-modern=false].bp_base_button_module_large--cf95b.bp_base_button_module_isTextWithIconStartButton--cf95b{
547
+ .bp_base_button_module_button--ef525[data-modern=false].bp_base_button_module_large--ef525.bp_base_button_module_isTextWithIconStartButton--ef525{
532
548
  --button-large-padding:0 var(--space-4) 0 0.875rem;
533
549
  }
534
- .bp_base_button_module_button--cf95b[data-modern=false].bp_base_button_module_large--cf95b.bp_base_button_module_isTextWithStartAndEndIconButton--cf95b{
550
+ .bp_base_button_module_button--ef525[data-modern=false].bp_base_button_module_large--ef525.bp_base_button_module_isTextWithStartAndEndIconButton--ef525{
535
551
  --button-large-padding:0 var(--space-4) 0 var(--space-4);
536
552
  }
537
553
 
538
- .bp_base_button_module_button--cf95b{
554
+ .bp_base_button_module_button--ef525{
539
555
  border-radius:var(--button-border-radius);
540
556
  cursor:pointer;
541
557
  justify-content:center;
@@ -544,100 +560,112 @@
544
560
  user-select:none;
545
561
  white-space:nowrap;
546
562
  }
547
- .bp_base_button_module_button--cf95b,.bp_base_button_module_button--cf95b .bp_base_button_module_icon--cf95b{
563
+ .bp_base_button_module_button--ef525,.bp_base_button_module_button--ef525 .bp_base_button_module_icon--ef525{
548
564
  align-items:center;
549
565
  display:flex;
550
566
  }
551
- .bp_base_button_module_button--cf95b:disabled{
567
+ .bp_base_button_module_button--ef525:disabled{
552
568
  opacity:.3;
553
569
  }
554
- .bp_base_button_module_button--cf95b.bp_base_button_module_primary--cf95b{
570
+ .bp_base_button_module_button--ef525.bp_base_button_module_primary--ef525{
555
571
  background:var(--button-background);
556
572
  border:var(--button-border);
557
573
  color:var(--button-color);
558
574
  }
559
- .bp_base_button_module_button--cf95b.bp_base_button_module_primary--cf95b:not(:disabled):hover,.bp_base_button_module_button--cf95b.bp_base_button_module_primary--cf95b:not(:disabled)[data-focus-visible]{
575
+ .bp_base_button_module_button--ef525.bp_base_button_module_primary--ef525:not(:disabled):hover,.bp_base_button_module_button--ef525.bp_base_button_module_primary--ef525:not(:disabled)[data-focus-visible]{
560
576
  background:var(--button-focus-or-hover-background);
561
577
  border:var(--button-focus-or-hover-border);
562
578
  }
563
- .bp_base_button_module_button--cf95b.bp_base_button_module_primary--cf95b:not(:disabled):active{
579
+ .bp_base_button_module_button--ef525.bp_base_button_module_primary--ef525:not(:disabled):active{
564
580
  background:var(--button-active-background);
565
581
  border:var(--button-active-border);
566
582
  }
567
- .bp_base_button_module_button--cf95b.bp_base_button_module_secondary--cf95b{
583
+ .bp_base_button_module_button--ef525.bp_base_button_module_secondary--ef525{
568
584
  backdrop-filter:var(--button-backdrop-filter);
569
585
  background:var(--button-background);
570
586
  border:var(--button-border);
571
587
  color:var(--button-color);
572
588
  }
573
- .bp_base_button_module_button--cf95b.bp_base_button_module_secondary--cf95b:not(:disabled):hover,.bp_base_button_module_button--cf95b.bp_base_button_module_secondary--cf95b:not(:disabled)[data-focus-visible]{
589
+ .bp_base_button_module_button--ef525.bp_base_button_module_secondary--ef525:not(:disabled):hover,.bp_base_button_module_button--ef525.bp_base_button_module_secondary--ef525:not(:disabled)[data-focus-visible]{
574
590
  background:var(--button-focus-or-hover-background);
575
591
  border:var(--button-focus-or-hover-border);
576
592
  }
577
- .bp_base_button_module_button--cf95b.bp_base_button_module_secondary--cf95b:not(:disabled):active{
593
+ .bp_base_button_module_button--ef525.bp_base_button_module_secondary--ef525:not(:disabled):active{
578
594
  background:var(--button-active-background);
579
595
  border:var(--button-active-border);
580
596
  }
581
- .bp_base_button_module_button--cf95b.bp_base_button_module_tertiary--cf95b{
597
+ .bp_base_button_module_button--ef525.bp_base_button_module_tertiary--ef525{
598
+ backdrop-filter:var(--button-backdrop-filter);
599
+ background:var(--button-background);
600
+ border:var(--button-border);
601
+ color:var(--button-color);
602
+ }
603
+ .bp_base_button_module_button--ef525.bp_base_button_module_tertiary--ef525:not(:disabled):hover,.bp_base_button_module_button--ef525.bp_base_button_module_tertiary--ef525:not(:disabled)[data-focus-visible]{
604
+ background:var(--button-focus-or-hover-background);
605
+ }
606
+ .bp_base_button_module_button--ef525.bp_base_button_module_tertiary--ef525:not(:disabled):active{
607
+ background:var(--button-active-background);
608
+ }
609
+ .bp_base_button_module_button--ef525.bp_base_button_module_quaternary--ef525{
582
610
  backdrop-filter:var(--button-backdrop-filter);
583
611
  background:var(--button-background);
584
612
  border:var(--button-border);
585
613
  color:var(--button-color);
586
614
  }
587
- .bp_base_button_module_button--cf95b.bp_base_button_module_tertiary--cf95b:not(:disabled):hover,.bp_base_button_module_button--cf95b.bp_base_button_module_tertiary--cf95b:not(:disabled)[data-focus-visible]{
615
+ .bp_base_button_module_button--ef525.bp_base_button_module_quaternary--ef525:not(:disabled):hover,.bp_base_button_module_button--ef525.bp_base_button_module_quaternary--ef525:not(:disabled)[data-focus-visible]{
588
616
  background:var(--button-focus-or-hover-background);
589
617
  }
590
- .bp_base_button_module_button--cf95b.bp_base_button_module_tertiary--cf95b:not(:disabled):active{
618
+ .bp_base_button_module_button--ef525.bp_base_button_module_quaternary--ef525:not(:disabled):active{
591
619
  background:var(--button-active-background);
592
620
  }
593
- .bp_base_button_module_button--cf95b.bp_base_button_module_outline--cf95b{
621
+ .bp_base_button_module_button--ef525.bp_base_button_module_outline--ef525{
594
622
  backdrop-filter:var(--button-backdrop-filter);
595
623
  background:var(--button-background);
596
624
  border:var(--button-border);
597
625
  color:var(--button-color);
598
626
  }
599
- .bp_base_button_module_button--cf95b.bp_base_button_module_outline--cf95b:not(:disabled):hover,.bp_base_button_module_button--cf95b.bp_base_button_module_outline--cf95b:not(:disabled)[data-focus-visible]{
627
+ .bp_base_button_module_button--ef525.bp_base_button_module_outline--ef525:not(:disabled):hover,.bp_base_button_module_button--ef525.bp_base_button_module_outline--ef525:not(:disabled)[data-focus-visible]{
600
628
  background:var(--button-focus-or-hover-background);
601
629
  border:var(--button-focus-or-hover-border);
602
630
  }
603
- .bp_base_button_module_button--cf95b.bp_base_button_module_outline--cf95b:not(:disabled):active{
631
+ .bp_base_button_module_button--ef525.bp_base_button_module_outline--ef525:not(:disabled):active{
604
632
  background:var(--button-active-background);
605
633
  border:var(--button-active-border);
606
634
  }
607
- .bp_base_button_module_button--cf95b.bp_base_button_module_small--cf95b{
635
+ .bp_base_button_module_button--ef525.bp_base_button_module_small--ef525{
608
636
  gap:var(--button-small-gap);
609
637
  min-height:var(--button-small-min-height);
610
638
  padding:var(--button-small-padding);
611
639
  }
612
- .bp_base_button_module_button--cf95b.bp_base_button_module_small--cf95b.bp_base_button_module_isIconButton--cf95b{
640
+ .bp_base_button_module_button--ef525.bp_base_button_module_small--ef525.bp_base_button_module_isIconButton--ef525{
613
641
  height:var(--icon-button-small-height);
614
642
  min-height:unset;
615
643
  padding:var(--icon-button-small-padding);
616
644
  width:var(--icon-button-small-width);
617
645
  }
618
- .bp_base_button_module_button--cf95b.bp_base_button_module_small--cf95b.bp_base_button_module_isTextWithIconEndButton--cf95b,.bp_base_button_module_button--cf95b.bp_base_button_module_small--cf95b.bp_base_button_module_isTextWithIconStartButton--cf95b,.bp_base_button_module_button--cf95b.bp_base_button_module_small--cf95b.bp_base_button_module_isTextWithStartAndEndIconButton--cf95b{
646
+ .bp_base_button_module_button--ef525.bp_base_button_module_small--ef525.bp_base_button_module_isTextWithIconEndButton--ef525,.bp_base_button_module_button--ef525.bp_base_button_module_small--ef525.bp_base_button_module_isTextWithIconStartButton--ef525,.bp_base_button_module_button--ef525.bp_base_button_module_small--ef525.bp_base_button_module_isTextWithStartAndEndIconButton--ef525{
619
647
  padding:var(--button-small-padding);
620
648
  }
621
- .bp_base_button_module_button--cf95b.bp_base_button_module_large--cf95b{
649
+ .bp_base_button_module_button--ef525.bp_base_button_module_large--ef525{
622
650
  font-size:var(--button-large-font-size);
623
651
  gap:var(--button-large-gap);
624
652
  line-height:var(--button-large-line-height);
625
653
  min-height:var(--button-large-min-height);
626
654
  padding:var(--button-large-padding);
627
655
  }
628
- .bp_base_button_module_button--cf95b.bp_base_button_module_large--cf95b.bp_base_button_module_isIconButton--cf95b{
656
+ .bp_base_button_module_button--ef525.bp_base_button_module_large--ef525.bp_base_button_module_isIconButton--ef525{
629
657
  height:var(--icon-button-large-height);
630
658
  padding:var(--icon-button-large-padding);
631
659
  width:var(--icon-button-large-width);
632
660
  }
633
- .bp_base_button_module_button--cf95b.bp_base_button_module_large--cf95b.bp_base_button_module_isTextWithIconEndButton--cf95b,.bp_base_button_module_button--cf95b.bp_base_button_module_large--cf95b.bp_base_button_module_isTextWithIconStartButton--cf95b,.bp_base_button_module_button--cf95b.bp_base_button_module_large--cf95b.bp_base_button_module_isTextWithStartAndEndIconButton--cf95b{
661
+ .bp_base_button_module_button--ef525.bp_base_button_module_large--ef525.bp_base_button_module_isTextWithIconEndButton--ef525,.bp_base_button_module_button--ef525.bp_base_button_module_large--ef525.bp_base_button_module_isTextWithIconStartButton--ef525,.bp_base_button_module_button--ef525.bp_base_button_module_large--ef525.bp_base_button_module_isTextWithStartAndEndIconButton--ef525{
634
662
  padding:var(--button-large-padding);
635
663
  }
636
- .bp_base_button_module_button--cf95b.bp_base_button_module_hide--cf95b{
664
+ .bp_base_button_module_button--ef525.bp_base_button_module_hide--ef525{
637
665
  pointer-events:none;
638
666
  position:relative;
639
667
  }
640
- .bp_base_button_module_button--cf95b.bp_base_button_module_hide--cf95b span{
668
+ .bp_base_button_module_button--ef525.bp_base_button_module_hide--ef525 span{
641
669
  color:#0000;
642
670
  opacity:0;
643
671
  }
package/dist/lib-esm/primitives/base-button/base-button.module.js CHANGED
@@ -1,4 +1,4 @@
1
1
  import '../../index.css';
2
- var styles = {"button":"bp_base_button_module_button--cf95b","primary":"bp_base_button_module_primary--cf95b","secondary":"bp_base_button_module_secondary--cf95b","tertiary":"bp_base_button_module_tertiary--cf95b","outline":"bp_base_button_module_outline--cf95b","small":"bp_base_button_module_small--cf95b","isIconButton":"bp_base_button_module_isIconButton--cf95b","isTextWithIconEndButton":"bp_base_button_module_isTextWithIconEndButton--cf95b","isTextWithIconStartButton":"bp_base_button_module_isTextWithIconStartButton--cf95b","isTextWithStartAndEndIconButton":"bp_base_button_module_isTextWithStartAndEndIconButton--cf95b","large":"bp_base_button_module_large--cf95b","icon":"bp_base_button_module_icon--cf95b","hide":"bp_base_button_module_hide--cf95b"};
2
+ var styles = {"button":"bp_base_button_module_button--ef525","primary":"bp_base_button_module_primary--ef525","secondary":"bp_base_button_module_secondary--ef525","tertiary":"bp_base_button_module_tertiary--ef525","quaternary":"bp_base_button_module_quaternary--ef525","outline":"bp_base_button_module_outline--ef525","small":"bp_base_button_module_small--ef525","isIconButton":"bp_base_button_module_isIconButton--ef525","isTextWithIconEndButton":"bp_base_button_module_isTextWithIconEndButton--ef525","isTextWithIconStartButton":"bp_base_button_module_isTextWithIconStartButton--ef525","isTextWithStartAndEndIconButton":"bp_base_button_module_isTextWithStartAndEndIconButton--ef525","large":"bp_base_button_module_large--ef525","icon":"bp_base_button_module_icon--ef525","hide":"bp_base_button_module_hide--ef525"};
3
3
 
4
4
  export { styles as default };
package/dist/lib-esm/primitives/base-button/types.d.ts CHANGED
@@ -9,7 +9,7 @@ export interface Loading {
9
9
  }
10
10
  export interface BaseButtonInterface extends AriakitButtonProps {
11
11
  /** The visual style of the button. */
12
- variant?: 'primary' | 'secondary' | 'tertiary' | 'outline';
12
+ variant?: 'primary' | 'secondary' | 'tertiary' | 'quaternary' | 'outline';
13
13
  /** The size of the button. */
14
14
  size?: 'small' | 'large';
15
15
  }
package/dist/lib-esm/primitives/base-button/utils.js CHANGED
@@ -1,4 +1,4 @@
1
- import { IconIconOnLight, TextCtaLink, IconIconOnDark, bpSize050, bpSize040, Size5, Size4, Size3 } from '@box/blueprint-web-assets/tokens/tokens';
1
+ import { IconIconOnLight, TextCtaLinkSecondary, TextCtaLink, IconIconOnDark, bpSize050, bpSize040, Size5, Size4, Size3 } from '@box/blueprint-web-assets/tokens/tokens';
2
2
  import { Children, isValidElement } from 'react';
3
3
 
4
4
  function getButtonTypeFromChildren(children, baseButtonIcon, baseButtonLabel) {
@@ -41,12 +41,14 @@ const loadingIndicatorVariantMap = {
41
41
  primary: 'light',
42
42
  secondary: 'default',
43
43
  tertiary: 'default',
44
+ quaternary: 'dark',
44
45
  outline: 'dark'
45
46
  };
46
47
  const buttonVariantToIconColorMap = {
47
48
  primary: IconIconOnDark,
48
49
  secondary: IconIconOnLight,
49
50
  tertiary: TextCtaLink,
51
+ quaternary: TextCtaLinkSecondary,
50
52
  outline: IconIconOnLight
51
53
  };
52
54
 
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@box/blueprint-web",
3
- "version": "13.5.7",
3
+ "version": "13.5.8",
4
4
  "type": "module",
5
5
  "license": "SEE LICENSE IN LICENSE",
6
6
  "publishConfig": {
@@ -47,7 +47,7 @@
47
47
  "dependencies": {
48
48
  "@ariakit/react": "0.4.15",
49
49
  "@ariakit/react-core": "0.4.15",
50
- "@box/blueprint-web-assets": "^4.104.2",
50
+ "@box/blueprint-web-assets": "^4.104.3",
51
51
  "@internationalized/date": "^3.7.0",
52
52
  "@radix-ui/react-accordion": "1.1.2",
53
53
  "@radix-ui/react-checkbox": "1.0.4",
@@ -77,7 +77,7 @@
77
77
  "type-fest": "^3.2.0"
78
78
  },
79
79
  "devDependencies": {
80
- "@box/storybook-utils": "^0.16.63",
80
+ "@box/storybook-utils": "^0.16.64",
81
81
  "@figma/code-connect": "1.3.12",
82
82
  "@types/react": "^18.0.0",
83
83
  "@types/react-dom": "^18.0.0",