@box/blueprint-web 13.15.1 → 13.16.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (5) hide show
  1. package/dist/lib-esm/index.css +97 -65
  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--bbe35[data-modern=true]{
358
+ .bp_base_button_module_button--c82d7[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--bbe35[data-modern=true]:not(:disabled)[data-focus-visible]{
367
+ .bp_base_button_module_button--c82d7[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--bbe35[data-modern=true].bp_base_button_module_primary--bbe35{
370
+ .bp_base_button_module_button--c82d7[data-modern=true].bp_base_button_module_primary--c82d7{
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--bbe35[data-modern=true].bp_base_button_module_secondary--bbe35{
379
+ .bp_base_button_module_button--c82d7[data-modern=true].bp_base_button_module_secondary--c82d7{
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,14 @@
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--bbe35[data-modern=true].bp_base_button_module_tertiary--bbe35{
389
+ .bp_base_button_module_button--c82d7[data-modern=true].bp_base_button_module_tertiary--c82d7{
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--bbe35[data-modern=true].bp_base_button_module_quaternary--bbe35{
396
+ .bp_base_button_module_button--c82d7[data-modern=true].bp_base_button_module_quaternary--c82d7{
397
397
  --button-color:var(--bp-text-cta-link-secondary);
398
398
  --button-background:var(--bp-surface-cta-surface-quaternary);
399
399
  --button-border:var(--bp-border-01) solid #0000;
@@ -401,7 +401,7 @@
401
401
  --button-active-background:var(--bp-surface-cta-surface-quaternary-pressed);
402
402
  --button-backdrop-filter:blur(16px);
403
403
  }
404
- .bp_base_button_module_button--bbe35[data-modern=true].bp_base_button_module_tertiary-destructive--bbe35{
404
+ .bp_base_button_module_button--c82d7[data-modern=true].bp_base_button_module_tertiary-destructive--c82d7{
405
405
  --button-color:var(--bp-text-text-destructive-on-light);
406
406
  --button-background:var(--bp-surface-cta-destructive-surface-tertiary);
407
407
  --button-border:var(--bp-border-01) solid #0000;
@@ -409,7 +409,16 @@
409
409
  --button-active-background:var(--bp-surface-cta-destructive-surface-tertiary-pressed);
410
410
  --button-backdrop-filter:blur(16px);
411
411
  }
412
- .bp_base_button_module_button--bbe35[data-modern=true].bp_base_button_module_outline--bbe35{
412
+ .bp_base_button_module_button--c82d7[data-modern=true].bp_base_button_module_destructive--c82d7{
413
+ --button-color:var(--bp-text-text-on-dark);
414
+ --button-background:var(--bp-surface-cta-destructive-surface-primary);
415
+ --button-border:var(--bp-border-01) solid var(--bp-surface-cta-destructive-surface-primary);
416
+ --button-focus-or-hover-background:var(--bp-surface-cta-destructive-surface-primary-hover);
417
+ --button-focus-or-hover-border:var(--bp-border-01) solid var(--bp-surface-cta-destructive-surface-primary-hover);
418
+ --button-active-background:var(--bp-surface-cta-destructive-surface-primary-pressed);
419
+ --button-active-border:var(--bp-border-01) solid var(--bp-surface-cta-destructive-surface-primary-pressed);
420
+ }
421
+ .bp_base_button_module_button--c82d7[data-modern=true].bp_base_button_module_outline--c82d7{
413
422
  --button-color:var(--bp-text-text-on-light);
414
423
  --button-background:var(--bp-surface-cta-surface-secondary);
415
424
  --button-border:var(--bp-border-01) solid var(--bp-border-cta-border-high-contrast);
@@ -419,48 +428,48 @@
419
428
  --button-active-border:var(--bp-border-01) solid var(--bp-border-cta-border-high-contrast);
420
429
  --button-backdrop-filter:blur(16px);
421
430
  }
422
- .bp_base_button_module_button--bbe35[data-modern=true].bp_base_button_module_small--bbe35{
431
+ .bp_base_button_module_button--c82d7[data-modern=true].bp_base_button_module_small--c82d7{
423
432
  --button-small-gap:var(--bp-space-010);
424
433
  --button-small-min-height:var(--bp-size-080);
425
434
  --button-small-padding:0 var(--bp-size-030);
426
435
  }
427
- .bp_base_button_module_button--bbe35[data-modern=true].bp_base_button_module_small--bbe35.bp_base_button_module_isIconButton--bbe35{
436
+ .bp_base_button_module_button--c82d7[data-modern=true].bp_base_button_module_small--c82d7.bp_base_button_module_isIconButton--c82d7{
428
437
  --icon-button-small-width:var(--bp-size-080);
429
438
  --icon-button-small-height:var(--bp-size-080);
430
439
  --icon-button-small-padding:0 calc((var(--bp-size-080) - var(--bp-size-040))/2);
431
440
  }
432
- .bp_base_button_module_button--bbe35[data-modern=true].bp_base_button_module_small--bbe35.bp_base_button_module_isTextWithIconEndButton--bbe35{
441
+ .bp_base_button_module_button--c82d7[data-modern=true].bp_base_button_module_small--c82d7.bp_base_button_module_isTextWithIconEndButton--c82d7{
433
442
  --button-small-padding:0 0.625rem 0 var(--bp-space-030);
434
443
  }
435
- .bp_base_button_module_button--bbe35[data-modern=true].bp_base_button_module_small--bbe35.bp_base_button_module_isTextWithIconStartButton--bbe35{
444
+ .bp_base_button_module_button--c82d7[data-modern=true].bp_base_button_module_small--c82d7.bp_base_button_module_isTextWithIconStartButton--c82d7{
436
445
  --button-small-padding:0 var(--bp-space-030) 0 0.625rem;
437
446
  }
438
- .bp_base_button_module_button--bbe35[data-modern=true].bp_base_button_module_small--bbe35.bp_base_button_module_isTextWithStartAndEndIconButton--bbe35{
447
+ .bp_base_button_module_button--c82d7[data-modern=true].bp_base_button_module_small--c82d7.bp_base_button_module_isTextWithStartAndEndIconButton--c82d7{
439
448
  --button-small-padding:0 0.625rem 0 0.625rem;
440
449
  }
441
- .bp_base_button_module_button--bbe35[data-modern=true].bp_base_button_module_large--bbe35{
450
+ .bp_base_button_module_button--c82d7[data-modern=true].bp_base_button_module_large--c82d7{
442
451
  --button-large-gap:var(--bp-space-020);
443
452
  --button-large-min-height:var(--bp-size-100);
444
453
  --button-large-padding:0 var(--bp-size-040);
445
454
  --button-large-font-size:var(--body-large-bold-font-size);
446
455
  --button-large-line-height:var(--body-large-bold-line-height);
447
456
  }
448
- .bp_base_button_module_button--bbe35[data-modern=true].bp_base_button_module_large--bbe35.bp_base_button_module_isIconButton--bbe35{
457
+ .bp_base_button_module_button--c82d7[data-modern=true].bp_base_button_module_large--c82d7.bp_base_button_module_isIconButton--c82d7{
449
458
  --icon-button-large-width:var(--bp-size-100);
450
459
  --icon-button-large-height:var(--bp-size-100);
451
460
  --icon-button-large-padding:0 calc((var(--bp-size-100) - var(--bp-size-050))/2);
452
461
  }
453
- .bp_base_button_module_button--bbe35[data-modern=true].bp_base_button_module_large--bbe35.bp_base_button_module_isTextWithIconEndButton--bbe35{
462
+ .bp_base_button_module_button--c82d7[data-modern=true].bp_base_button_module_large--c82d7.bp_base_button_module_isTextWithIconEndButton--c82d7{
454
463
  --button-large-padding:0 0.875rem 0 var(--bp-space-040);
455
464
  }
456
- .bp_base_button_module_button--bbe35[data-modern=true].bp_base_button_module_large--bbe35.bp_base_button_module_isTextWithIconStartButton--bbe35{
465
+ .bp_base_button_module_button--c82d7[data-modern=true].bp_base_button_module_large--c82d7.bp_base_button_module_isTextWithIconStartButton--c82d7{
457
466
  --button-large-padding:0 var(--bp-space-040) 0 0.875rem;
458
467
  }
459
- .bp_base_button_module_button--bbe35[data-modern=true].bp_base_button_module_large--bbe35.bp_base_button_module_isTextWithStartAndEndIconButton--bbe35{
468
+ .bp_base_button_module_button--c82d7[data-modern=true].bp_base_button_module_large--c82d7.bp_base_button_module_isTextWithStartAndEndIconButton--c82d7{
460
469
  --button-large-padding:0 0.875rem 0 0.875rem;
461
470
  }
462
471
 
463
- .bp_base_button_module_button--bbe35[data-modern=false]{
472
+ .bp_base_button_module_button--c82d7[data-modern=false]{
464
473
  --button-border-radius:var(--radius-2);
465
474
  font-family:var(--body-default-bold-font-family);
466
475
  font-size:var(--body-default-bold-font-size);
@@ -470,10 +479,10 @@
470
479
  text-decoration:var(--body-default-bold-text-decoration);
471
480
  text-transform:var(--body-default-bold-text-case);
472
481
  }
473
- .bp_base_button_module_button--bbe35[data-modern=false]:not(:disabled)[data-focus-visible]{
482
+ .bp_base_button_module_button--c82d7[data-modern=false]:not(:disabled)[data-focus-visible]{
474
483
  box-shadow:0 0 0 var(--border-1, 1px) var(--background-background), 0 0 0 var(--border-3) var(--outline-focus-on-light);
475
484
  }
476
- .bp_base_button_module_button--bbe35[data-modern=false].bp_base_button_module_primary--bbe35{
485
+ .bp_base_button_module_button--c82d7[data-modern=false].bp_base_button_module_primary--c82d7{
477
486
  --button-color:var(--text-text-brand-on-color);
478
487
  --button-background:var(--surface-surface-brand);
479
488
  --button-border:var(--border-1) solid var(--surface-surface-brand);
@@ -482,7 +491,7 @@
482
491
  --button-active-background:var(--surface-surface-brand-pressed);
483
492
  --button-active-border:var(--border-1) solid var(--surface-surface-brand-pressed);
484
493
  }
485
- .bp_base_button_module_button--bbe35[data-modern=false].bp_base_button_module_secondary--bbe35{
494
+ .bp_base_button_module_button--c82d7[data-modern=false].bp_base_button_module_secondary--c82d7{
486
495
  --button-color:var(--text-text-on-light);
487
496
  --button-background:var(--surface-cta-surface-secondary);
488
497
  --button-border:var(--border-1) solid var(--border-cta-border-secondary);
@@ -492,7 +501,7 @@
492
501
  --button-active-border:var(--border-1) solid var(--border-cta-border-secondary-pressed);
493
502
  --button-backdrop-filter:none;
494
503
  }
495
- .bp_base_button_module_button--bbe35[data-modern=false].bp_base_button_module_tertiary--bbe35{
504
+ .bp_base_button_module_button--c82d7[data-modern=false].bp_base_button_module_tertiary--c82d7{
496
505
  --button-color:var(--text-cta-link);
497
506
  --button-background:#0000;
498
507
  --button-border:var(--border-1) solid #0000;
@@ -500,7 +509,7 @@
500
509
  --button-active-background:var(--surface-cta-surface-tertiary-pressed);
501
510
  --button-backdrop-filter:none;
502
511
  }
503
- .bp_base_button_module_button--bbe35[data-modern=false].bp_base_button_module_quaternary--bbe35{
512
+ .bp_base_button_module_button--c82d7[data-modern=false].bp_base_button_module_quaternary--c82d7{
504
513
  --button-color:var(--text-cta-link-secondary);
505
514
  --button-background:var(--bp-surface-cta-surface-quaternary);
506
515
  --button-border:var(--border-1) solid #0000;
@@ -508,7 +517,7 @@
508
517
  --button-active-background:var(--bp-surface-cta-surface-quaternary-pressed);
509
518
  --button-backdrop-filter:none;
510
519
  }
511
- .bp_base_button_module_button--bbe35[data-modern=false].bp_base_button_module_tertiary-destructive--bbe35{
520
+ .bp_base_button_module_button--c82d7[data-modern=false].bp_base_button_module_tertiary-destructive--c82d7{
512
521
  --button-color:var(--text-text-destructive-on-light);
513
522
  --button-background:#0000;
514
523
  --button-border:var(--border-1) solid #0000;
@@ -516,7 +525,17 @@
516
525
  --button-active-background:var(--surface-cta-destructive-surface-tertiary-pressed);
517
526
  --button-backdrop-filter:none;
518
527
  }
519
- .bp_base_button_module_button--bbe35[data-modern=false].bp_base_button_module_outline--bbe35{
528
+ .bp_base_button_module_button--c82d7[data-modern=false].bp_base_button_module_destructive--c82d7{
529
+ --button-color:var(--text-text-on-dark);
530
+ --button-background:var(--bp-surface-cta-destructive-surface-primary);
531
+ --button-border:var(--border-1) solid var(--bp-surface-cta-destructive-surface-primary);
532
+ --button-focus-or-hover-background:var(--bp-surface-cta-destructive-surface-primary-hover);
533
+ --button-focus-or-hover-border:var(--border-1) solid var(--bp-surface-cta-destructive-surface-primary-hover);
534
+ --button-active-background:var(--bp-surface-cta-destructive-surface-primary-pressed);
535
+ --button-active-border:var(--border-1) solid var(--bp-surface-cta-destructive-surface-primary-pressed);
536
+ --button-backdrop-filter:none;
537
+ }
538
+ .bp_base_button_module_button--c82d7[data-modern=false].bp_base_button_module_outline--c82d7{
520
539
  --button-color:var(--text-text-on-light);
521
540
  --button-background:var(--surface-cta-surface-outline);
522
541
  --button-border:var(--border-1) solid var(--border-cta-border-outline);
@@ -526,48 +545,48 @@
526
545
  --button-active-border:var(--border-1) solid var(--border-cta-border-outline-pressed);
527
546
  --button-backdrop-filter:none;
528
547
  }
529
- .bp_base_button_module_button--bbe35[data-modern=false].bp_base_button_module_small--bbe35{
548
+ .bp_base_button_module_button--c82d7[data-modern=false].bp_base_button_module_small--c82d7{
530
549
  --button-small-gap:var(--space-1);
531
550
  --button-small-min-height:var(--size-8);
532
551
  --button-small-padding:0 var(--space-4);
533
552
  }
534
- .bp_base_button_module_button--bbe35[data-modern=false].bp_base_button_module_small--bbe35.bp_base_button_module_isIconButton--bbe35{
553
+ .bp_base_button_module_button--c82d7[data-modern=false].bp_base_button_module_small--c82d7.bp_base_button_module_isIconButton--c82d7{
535
554
  --icon-button-small-width:var(--size-8);
536
555
  --icon-button-small-height:var(--size-8);
537
556
  --icon-button-small-padding:0 calc((var(--space-8) - var(--space-4))/2);
538
557
  }
539
- .bp_base_button_module_button--bbe35[data-modern=false].bp_base_button_module_small--bbe35.bp_base_button_module_isTextWithIconEndButton--bbe35{
558
+ .bp_base_button_module_button--c82d7[data-modern=false].bp_base_button_module_small--c82d7.bp_base_button_module_isTextWithIconEndButton--c82d7{
540
559
  --button-small-padding:0 var(--space-3);
541
560
  }
542
- .bp_base_button_module_button--bbe35[data-modern=false].bp_base_button_module_small--bbe35.bp_base_button_module_isTextWithIconStartButton--bbe35{
561
+ .bp_base_button_module_button--c82d7[data-modern=false].bp_base_button_module_small--c82d7.bp_base_button_module_isTextWithIconStartButton--c82d7{
543
562
  --button-small-padding:0 var(--space-3) 0 0.625rem;
544
563
  }
545
- .bp_base_button_module_button--bbe35[data-modern=false].bp_base_button_module_small--bbe35.bp_base_button_module_isTextWithStartAndEndIconButton--bbe35{
564
+ .bp_base_button_module_button--c82d7[data-modern=false].bp_base_button_module_small--c82d7.bp_base_button_module_isTextWithStartAndEndIconButton--c82d7{
546
565
  --button-small-padding:0 var(--space-3) 0 var(--space-3);
547
566
  }
548
- .bp_base_button_module_button--bbe35[data-modern=false].bp_base_button_module_large--bbe35{
567
+ .bp_base_button_module_button--c82d7[data-modern=false].bp_base_button_module_large--c82d7{
549
568
  --button-large-gap:var(--space-2);
550
569
  --button-large-min-height:var(--size-10);
551
570
  --button-large-padding:0 var(--space-4);
552
571
  --button-large-font-size:var(--body-default-bold-font-size);
553
572
  --button-large-line-height:var(--body-default-bold-line-height);
554
573
  }
555
- .bp_base_button_module_button--bbe35[data-modern=false].bp_base_button_module_large--bbe35.bp_base_button_module_isIconButton--bbe35{
574
+ .bp_base_button_module_button--c82d7[data-modern=false].bp_base_button_module_large--c82d7.bp_base_button_module_isIconButton--c82d7{
556
575
  --icon-button-large-width:var(--size-10);
557
576
  --icon-button-large-height:var(--size-10);
558
577
  --icon-button-large-padding:0 calc((var(--space-10) - var(--space-5))/2);
559
578
  }
560
- .bp_base_button_module_button--bbe35[data-modern=false].bp_base_button_module_large--bbe35.bp_base_button_module_isTextWithIconEndButton--bbe35{
579
+ .bp_base_button_module_button--c82d7[data-modern=false].bp_base_button_module_large--c82d7.bp_base_button_module_isTextWithIconEndButton--c82d7{
561
580
  --button-large-padding:0 var(--space-4);
562
581
  }
563
- .bp_base_button_module_button--bbe35[data-modern=false].bp_base_button_module_large--bbe35.bp_base_button_module_isTextWithIconStartButton--bbe35{
582
+ .bp_base_button_module_button--c82d7[data-modern=false].bp_base_button_module_large--c82d7.bp_base_button_module_isTextWithIconStartButton--c82d7{
564
583
  --button-large-padding:0 var(--space-4) 0 0.875rem;
565
584
  }
566
- .bp_base_button_module_button--bbe35[data-modern=false].bp_base_button_module_large--bbe35.bp_base_button_module_isTextWithStartAndEndIconButton--bbe35{
585
+ .bp_base_button_module_button--c82d7[data-modern=false].bp_base_button_module_large--c82d7.bp_base_button_module_isTextWithStartAndEndIconButton--c82d7{
567
586
  --button-large-padding:0 var(--space-4) 0 var(--space-4);
568
587
  }
569
588
 
570
- .bp_base_button_module_button--bbe35{
589
+ .bp_base_button_module_button--c82d7{
571
590
  border-radius:var(--button-border-radius);
572
591
  cursor:pointer;
573
592
  justify-content:center;
@@ -576,124 +595,137 @@
576
595
  user-select:none;
577
596
  white-space:nowrap;
578
597
  }
579
- .bp_base_button_module_button--bbe35,.bp_base_button_module_button--bbe35 .bp_base_button_module_icon--bbe35{
598
+ .bp_base_button_module_button--c82d7,.bp_base_button_module_button--c82d7 .bp_base_button_module_icon--c82d7{
580
599
  align-items:center;
581
600
  display:flex;
582
601
  }
583
- .bp_base_button_module_button--bbe35:disabled{
602
+ .bp_base_button_module_button--c82d7:disabled{
584
603
  opacity:.3;
585
604
  }
586
- .bp_base_button_module_button--bbe35.bp_base_button_module_primary--bbe35{
605
+ .bp_base_button_module_button--c82d7.bp_base_button_module_primary--c82d7{
587
606
  background:var(--button-background);
588
607
  border:var(--button-border);
589
608
  color:var(--button-color);
590
609
  }
591
- .bp_base_button_module_button--bbe35.bp_base_button_module_primary--bbe35:not(:disabled):hover,.bp_base_button_module_button--bbe35.bp_base_button_module_primary--bbe35:not(:disabled)[data-focus-visible]{
610
+ .bp_base_button_module_button--c82d7.bp_base_button_module_primary--c82d7:not(:disabled):hover,.bp_base_button_module_button--c82d7.bp_base_button_module_primary--c82d7:not(:disabled)[data-focus-visible]{
592
611
  background:var(--button-focus-or-hover-background);
593
612
  border:var(--button-focus-or-hover-border);
594
613
  }
595
- .bp_base_button_module_button--bbe35.bp_base_button_module_primary--bbe35:not(:disabled):active{
614
+ .bp_base_button_module_button--c82d7.bp_base_button_module_primary--c82d7:not(:disabled):active{
596
615
  background:var(--button-active-background);
597
616
  border:var(--button-active-border);
598
617
  }
599
- .bp_base_button_module_button--bbe35.bp_base_button_module_secondary--bbe35{
618
+ .bp_base_button_module_button--c82d7.bp_base_button_module_secondary--c82d7{
600
619
  backdrop-filter:var(--button-backdrop-filter);
601
620
  background:var(--button-background);
602
621
  border:var(--button-border);
603
622
  color:var(--button-color);
604
623
  }
605
- .bp_base_button_module_button--bbe35.bp_base_button_module_secondary--bbe35:not(:disabled):hover,.bp_base_button_module_button--bbe35.bp_base_button_module_secondary--bbe35:not(:disabled)[data-focus-visible]{
624
+ .bp_base_button_module_button--c82d7.bp_base_button_module_secondary--c82d7:not(:disabled):hover,.bp_base_button_module_button--c82d7.bp_base_button_module_secondary--c82d7:not(:disabled)[data-focus-visible]{
606
625
  background:var(--button-focus-or-hover-background);
607
626
  border:var(--button-focus-or-hover-border);
608
627
  }
609
- .bp_base_button_module_button--bbe35.bp_base_button_module_secondary--bbe35:not(:disabled):active{
628
+ .bp_base_button_module_button--c82d7.bp_base_button_module_secondary--c82d7:not(:disabled):active{
610
629
  background:var(--button-active-background);
611
630
  border:var(--button-active-border);
612
631
  }
613
- .bp_base_button_module_button--bbe35.bp_base_button_module_tertiary-destructive--bbe35{
632
+ .bp_base_button_module_button--c82d7.bp_base_button_module_tertiary-destructive--c82d7{
614
633
  backdrop-filter:var(--button-backdrop-filter);
615
634
  background:var(--button-background);
616
635
  border:var(--button-border);
617
636
  color:var(--button-color);
618
637
  }
619
- .bp_base_button_module_button--bbe35.bp_base_button_module_tertiary-destructive--bbe35:not(:disabled):hover,.bp_base_button_module_button--bbe35.bp_base_button_module_tertiary-destructive--bbe35:not(:disabled)[data-focus-visible]{
638
+ .bp_base_button_module_button--c82d7.bp_base_button_module_tertiary-destructive--c82d7:not(:disabled):hover,.bp_base_button_module_button--c82d7.bp_base_button_module_tertiary-destructive--c82d7:not(:disabled)[data-focus-visible]{
620
639
  background:var(--button-focus-or-hover-background);
621
640
  }
622
- .bp_base_button_module_button--bbe35.bp_base_button_module_tertiary-destructive--bbe35:not(:disabled):active{
641
+ .bp_base_button_module_button--c82d7.bp_base_button_module_tertiary-destructive--c82d7:not(:disabled):active{
623
642
  background:var(--button-active-background);
624
643
  }
625
- .bp_base_button_module_button--bbe35.bp_base_button_module_tertiary--bbe35{
644
+ .bp_base_button_module_button--c82d7.bp_base_button_module_tertiary--c82d7{
626
645
  backdrop-filter:var(--button-backdrop-filter);
627
646
  background:var(--button-background);
628
647
  border:var(--button-border);
629
648
  color:var(--button-color);
630
649
  }
631
- .bp_base_button_module_button--bbe35.bp_base_button_module_tertiary--bbe35:not(:disabled):hover,.bp_base_button_module_button--bbe35.bp_base_button_module_tertiary--bbe35:not(:disabled)[data-focus-visible]{
650
+ .bp_base_button_module_button--c82d7.bp_base_button_module_tertiary--c82d7:not(:disabled):hover,.bp_base_button_module_button--c82d7.bp_base_button_module_tertiary--c82d7:not(:disabled)[data-focus-visible]{
632
651
  background:var(--button-focus-or-hover-background);
633
652
  }
634
- .bp_base_button_module_button--bbe35.bp_base_button_module_tertiary--bbe35:not(:disabled):active{
653
+ .bp_base_button_module_button--c82d7.bp_base_button_module_tertiary--c82d7:not(:disabled):active{
635
654
  background:var(--button-active-background);
636
655
  }
637
- .bp_base_button_module_button--bbe35.bp_base_button_module_quaternary--bbe35{
656
+ .bp_base_button_module_button--c82d7.bp_base_button_module_quaternary--c82d7{
638
657
  backdrop-filter:var(--button-backdrop-filter);
639
658
  background:var(--button-background);
640
659
  border:var(--button-border);
641
660
  color:var(--button-color);
642
661
  }
643
- .bp_base_button_module_button--bbe35.bp_base_button_module_quaternary--bbe35:not(:disabled):hover,.bp_base_button_module_button--bbe35.bp_base_button_module_quaternary--bbe35:not(:disabled)[data-focus-visible]{
662
+ .bp_base_button_module_button--c82d7.bp_base_button_module_quaternary--c82d7:not(:disabled):hover,.bp_base_button_module_button--c82d7.bp_base_button_module_quaternary--c82d7:not(:disabled)[data-focus-visible]{
644
663
  background:var(--button-focus-or-hover-background);
645
664
  }
646
- .bp_base_button_module_button--bbe35.bp_base_button_module_quaternary--bbe35:not(:disabled):active{
665
+ .bp_base_button_module_button--c82d7.bp_base_button_module_quaternary--c82d7:not(:disabled):active{
647
666
  background:var(--button-active-background);
648
667
  }
649
- .bp_base_button_module_button--bbe35.bp_base_button_module_outline--bbe35{
668
+ .bp_base_button_module_button--c82d7.bp_base_button_module_destructive--c82d7{
669
+ background:var(--button-background);
670
+ border:var(--button-border);
671
+ color:var(--button-color);
672
+ }
673
+ .bp_base_button_module_button--c82d7.bp_base_button_module_destructive--c82d7:not(:disabled):hover,.bp_base_button_module_button--c82d7.bp_base_button_module_destructive--c82d7:not(:disabled)[data-focus-visible]{
674
+ background:var(--button-focus-or-hover-background);
675
+ border:var(--button-focus-or-hover-border);
676
+ }
677
+ .bp_base_button_module_button--c82d7.bp_base_button_module_destructive--c82d7:not(:disabled):active{
678
+ background:var(--button-active-background);
679
+ border:var(--button-active-border);
680
+ }
681
+ .bp_base_button_module_button--c82d7.bp_base_button_module_outline--c82d7{
650
682
  backdrop-filter:var(--button-backdrop-filter);
651
683
  background:var(--button-background);
652
684
  border:var(--button-border);
653
685
  color:var(--button-color);
654
686
  }
655
- .bp_base_button_module_button--bbe35.bp_base_button_module_outline--bbe35:not(:disabled):hover,.bp_base_button_module_button--bbe35.bp_base_button_module_outline--bbe35:not(:disabled)[data-focus-visible]{
687
+ .bp_base_button_module_button--c82d7.bp_base_button_module_outline--c82d7:not(:disabled):hover,.bp_base_button_module_button--c82d7.bp_base_button_module_outline--c82d7:not(:disabled)[data-focus-visible]{
656
688
  background:var(--button-focus-or-hover-background);
657
689
  border:var(--button-focus-or-hover-border);
658
690
  }
659
- .bp_base_button_module_button--bbe35.bp_base_button_module_outline--bbe35:not(:disabled):active{
691
+ .bp_base_button_module_button--c82d7.bp_base_button_module_outline--c82d7:not(:disabled):active{
660
692
  background:var(--button-active-background);
661
693
  border:var(--button-active-border);
662
694
  }
663
- .bp_base_button_module_button--bbe35.bp_base_button_module_small--bbe35{
695
+ .bp_base_button_module_button--c82d7.bp_base_button_module_small--c82d7{
664
696
  gap:var(--button-small-gap);
665
697
  min-height:var(--button-small-min-height);
666
698
  padding:var(--button-small-padding);
667
699
  }
668
- .bp_base_button_module_button--bbe35.bp_base_button_module_small--bbe35.bp_base_button_module_isIconButton--bbe35{
700
+ .bp_base_button_module_button--c82d7.bp_base_button_module_small--c82d7.bp_base_button_module_isIconButton--c82d7{
669
701
  height:var(--icon-button-small-height);
670
702
  min-height:unset;
671
703
  padding:var(--icon-button-small-padding);
672
704
  width:var(--icon-button-small-width);
673
705
  }
674
- .bp_base_button_module_button--bbe35.bp_base_button_module_small--bbe35.bp_base_button_module_isTextWithIconEndButton--bbe35,.bp_base_button_module_button--bbe35.bp_base_button_module_small--bbe35.bp_base_button_module_isTextWithIconStartButton--bbe35,.bp_base_button_module_button--bbe35.bp_base_button_module_small--bbe35.bp_base_button_module_isTextWithStartAndEndIconButton--bbe35{
706
+ .bp_base_button_module_button--c82d7.bp_base_button_module_small--c82d7.bp_base_button_module_isTextWithIconEndButton--c82d7,.bp_base_button_module_button--c82d7.bp_base_button_module_small--c82d7.bp_base_button_module_isTextWithIconStartButton--c82d7,.bp_base_button_module_button--c82d7.bp_base_button_module_small--c82d7.bp_base_button_module_isTextWithStartAndEndIconButton--c82d7{
675
707
  padding:var(--button-small-padding);
676
708
  }
677
- .bp_base_button_module_button--bbe35.bp_base_button_module_large--bbe35{
709
+ .bp_base_button_module_button--c82d7.bp_base_button_module_large--c82d7{
678
710
  font-size:var(--button-large-font-size);
679
711
  gap:var(--button-large-gap);
680
712
  line-height:var(--button-large-line-height);
681
713
  min-height:var(--button-large-min-height);
682
714
  padding:var(--button-large-padding);
683
715
  }
684
- .bp_base_button_module_button--bbe35.bp_base_button_module_large--bbe35.bp_base_button_module_isIconButton--bbe35{
716
+ .bp_base_button_module_button--c82d7.bp_base_button_module_large--c82d7.bp_base_button_module_isIconButton--c82d7{
685
717
  height:var(--icon-button-large-height);
686
718
  padding:var(--icon-button-large-padding);
687
719
  width:var(--icon-button-large-width);
688
720
  }
689
- .bp_base_button_module_button--bbe35.bp_base_button_module_large--bbe35.bp_base_button_module_isTextWithIconEndButton--bbe35,.bp_base_button_module_button--bbe35.bp_base_button_module_large--bbe35.bp_base_button_module_isTextWithIconStartButton--bbe35,.bp_base_button_module_button--bbe35.bp_base_button_module_large--bbe35.bp_base_button_module_isTextWithStartAndEndIconButton--bbe35{
721
+ .bp_base_button_module_button--c82d7.bp_base_button_module_large--c82d7.bp_base_button_module_isTextWithIconEndButton--c82d7,.bp_base_button_module_button--c82d7.bp_base_button_module_large--c82d7.bp_base_button_module_isTextWithIconStartButton--c82d7,.bp_base_button_module_button--c82d7.bp_base_button_module_large--c82d7.bp_base_button_module_isTextWithStartAndEndIconButton--c82d7{
690
722
  padding:var(--button-large-padding);
691
723
  }
692
- .bp_base_button_module_button--bbe35.bp_base_button_module_hide--bbe35{
724
+ .bp_base_button_module_button--c82d7.bp_base_button_module_hide--c82d7{
693
725
  pointer-events:none;
694
726
  position:relative;
695
727
  }
696
- .bp_base_button_module_button--bbe35.bp_base_button_module_hide--bbe35 span{
728
+ .bp_base_button_module_button--c82d7.bp_base_button_module_hide--c82d7 span{
697
729
  color:#0000;
698
730
  opacity:0;
699
731
  }
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--bbe35","primary":"bp_base_button_module_primary--bbe35","secondary":"bp_base_button_module_secondary--bbe35","tertiary":"bp_base_button_module_tertiary--bbe35","quaternary":"bp_base_button_module_quaternary--bbe35","tertiary-destructive":"bp_base_button_module_tertiary-destructive--bbe35","outline":"bp_base_button_module_outline--bbe35","small":"bp_base_button_module_small--bbe35","isIconButton":"bp_base_button_module_isIconButton--bbe35","isTextWithIconEndButton":"bp_base_button_module_isTextWithIconEndButton--bbe35","isTextWithIconStartButton":"bp_base_button_module_isTextWithIconStartButton--bbe35","isTextWithStartAndEndIconButton":"bp_base_button_module_isTextWithStartAndEndIconButton--bbe35","large":"bp_base_button_module_large--bbe35","icon":"bp_base_button_module_icon--bbe35","hide":"bp_base_button_module_hide--bbe35"};
2
+ var styles = {"button":"bp_base_button_module_button--c82d7","primary":"bp_base_button_module_primary--c82d7","secondary":"bp_base_button_module_secondary--c82d7","tertiary":"bp_base_button_module_tertiary--c82d7","quaternary":"bp_base_button_module_quaternary--c82d7","tertiary-destructive":"bp_base_button_module_tertiary-destructive--c82d7","destructive":"bp_base_button_module_destructive--c82d7","outline":"bp_base_button_module_outline--c82d7","small":"bp_base_button_module_small--c82d7","isIconButton":"bp_base_button_module_isIconButton--c82d7","isTextWithIconEndButton":"bp_base_button_module_isTextWithIconEndButton--c82d7","isTextWithIconStartButton":"bp_base_button_module_isTextWithIconStartButton--c82d7","isTextWithStartAndEndIconButton":"bp_base_button_module_isTextWithStartAndEndIconButton--c82d7","large":"bp_base_button_module_large--c82d7","icon":"bp_base_button_module_icon--c82d7","hide":"bp_base_button_module_hide--c82d7"};
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' | 'tertiary-destructive' | 'quaternary' | 'outline';
12
+ variant?: 'primary' | 'secondary' | 'tertiary' | 'tertiary-destructive' | 'destructive' | '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, TextCtaLinkSecondary, TextTextDestructiveOnLight, TextCtaLink, IconIconOnDark, bpSize050, bpSize040, Size5, Size4, Size3 } from '@box/blueprint-web-assets/tokens/tokens';
1
+ import { IconIconOnLight, TextCtaLinkSecondary, IconIconOnDark, TextTextDestructiveOnLight, TextCtaLink, 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) {
@@ -42,6 +42,7 @@ const loadingIndicatorVariantMap = {
42
42
  secondary: 'default',
43
43
  tertiary: 'default',
44
44
  'tertiary-destructive': 'default',
45
+ destructive: 'light',
45
46
  quaternary: 'dark',
46
47
  outline: 'dark'
47
48
  };
@@ -50,6 +51,7 @@ const buttonVariantToIconColorMap = {
50
51
  secondary: IconIconOnLight,
51
52
  tertiary: TextCtaLink,
52
53
  'tertiary-destructive': TextTextDestructiveOnLight,
54
+ destructive: IconIconOnDark,
53
55
  quaternary: TextCtaLinkSecondary,
54
56
  outline: IconIconOnLight
55
57
  };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@box/blueprint-web",
3
- "version": "13.15.1",
3
+ "version": "13.16.0",
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.111.7",
50
+ "@box/blueprint-web-assets": "^4.111.8",
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.17.7",
80
+ "@box/storybook-utils": "^0.17.8",
81
81
  "@figma/code-connect": "1.3.12",
82
82
  "@types/react": "^18.0.0",
83
83
  "@types/react-dom": "^18.0.0",