@box/blueprint-web 13.17.1 → 13.18.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 (4) hide show
  1. package/dist/lib-esm/index.css +79 -70
  2. package/dist/lib-esm/primitives/base-button/base-button.js +7 -0
  3. package/dist/lib-esm/primitives/base-button/base-button.module.js +1 -1
  4. 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--c82d7[data-modern=true]{
358
+ .bp_base_button_module_button--04b55[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--c82d7[data-modern=true]:not(:disabled)[data-focus-visible]{
367
+ .bp_base_button_module_button--04b55[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--c82d7[data-modern=true].bp_base_button_module_primary--c82d7{
370
+ .bp_base_button_module_button--04b55[data-modern=true].bp_base_button_module_primary--04b55{
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--c82d7[data-modern=true].bp_base_button_module_secondary--c82d7{
379
+ .bp_base_button_module_button--04b55[data-modern=true].bp_base_button_module_secondary--04b55{
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--c82d7[data-modern=true].bp_base_button_module_tertiary--c82d7{
389
+ .bp_base_button_module_button--04b55[data-modern=true].bp_base_button_module_tertiary--04b55{
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--c82d7[data-modern=true].bp_base_button_module_quaternary--c82d7{
396
+ .bp_base_button_module_button--04b55[data-modern=true].bp_base_button_module_quaternary--04b55{
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--c82d7[data-modern=true].bp_base_button_module_tertiary-destructive--c82d7{
404
+ .bp_base_button_module_button--04b55[data-modern=true].bp_base_button_module_tertiary-destructive--04b55{
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,7 @@
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--c82d7[data-modern=true].bp_base_button_module_destructive--c82d7{
412
+ .bp_base_button_module_button--04b55[data-modern=true].bp_base_button_module_destructive--04b55{
413
413
  --button-color:var(--bp-text-text-on-dark);
414
414
  --button-background:var(--bp-surface-cta-destructive-surface-primary);
415
415
  --button-border:var(--bp-border-01) solid var(--bp-surface-cta-destructive-surface-primary);
@@ -418,7 +418,7 @@
418
418
  --button-active-background:var(--bp-surface-cta-destructive-surface-primary-pressed);
419
419
  --button-active-border:var(--bp-border-01) solid var(--bp-surface-cta-destructive-surface-primary-pressed);
420
420
  }
421
- .bp_base_button_module_button--c82d7[data-modern=true].bp_base_button_module_outline--c82d7{
421
+ .bp_base_button_module_button--04b55[data-modern=true].bp_base_button_module_outline--04b55{
422
422
  --button-color:var(--bp-text-text-on-light);
423
423
  --button-background:var(--bp-surface-cta-surface-secondary);
424
424
  --button-border:var(--bp-border-01) solid var(--bp-border-cta-border-high-contrast);
@@ -428,48 +428,48 @@
428
428
  --button-active-border:var(--bp-border-01) solid var(--bp-border-cta-border-high-contrast);
429
429
  --button-backdrop-filter:blur(16px);
430
430
  }
431
- .bp_base_button_module_button--c82d7[data-modern=true].bp_base_button_module_small--c82d7{
431
+ .bp_base_button_module_button--04b55[data-modern=true].bp_base_button_module_small--04b55{
432
432
  --button-small-gap:var(--bp-space-010);
433
433
  --button-small-min-height:var(--bp-size-080);
434
434
  --button-small-padding:0 var(--bp-size-030);
435
435
  }
436
- .bp_base_button_module_button--c82d7[data-modern=true].bp_base_button_module_small--c82d7.bp_base_button_module_isIconButton--c82d7{
436
+ .bp_base_button_module_button--04b55[data-modern=true].bp_base_button_module_small--04b55.bp_base_button_module_isIconButton--04b55{
437
437
  --icon-button-small-width:var(--bp-size-080);
438
438
  --icon-button-small-height:var(--bp-size-080);
439
439
  --icon-button-small-padding:0 calc((var(--bp-size-080) - var(--bp-size-040))/2);
440
440
  }
441
- .bp_base_button_module_button--c82d7[data-modern=true].bp_base_button_module_small--c82d7.bp_base_button_module_isTextWithIconEndButton--c82d7{
441
+ .bp_base_button_module_button--04b55[data-modern=true].bp_base_button_module_small--04b55.bp_base_button_module_isTextWithIconEndButton--04b55{
442
442
  --button-small-padding:0 0.625rem 0 var(--bp-space-030);
443
443
  }
444
- .bp_base_button_module_button--c82d7[data-modern=true].bp_base_button_module_small--c82d7.bp_base_button_module_isTextWithIconStartButton--c82d7{
444
+ .bp_base_button_module_button--04b55[data-modern=true].bp_base_button_module_small--04b55.bp_base_button_module_isTextWithIconStartButton--04b55{
445
445
  --button-small-padding:0 var(--bp-space-030) 0 0.625rem;
446
446
  }
447
- .bp_base_button_module_button--c82d7[data-modern=true].bp_base_button_module_small--c82d7.bp_base_button_module_isTextWithStartAndEndIconButton--c82d7{
447
+ .bp_base_button_module_button--04b55[data-modern=true].bp_base_button_module_small--04b55.bp_base_button_module_isTextWithStartAndEndIconButton--04b55{
448
448
  --button-small-padding:0 0.625rem 0 0.625rem;
449
449
  }
450
- .bp_base_button_module_button--c82d7[data-modern=true].bp_base_button_module_large--c82d7{
450
+ .bp_base_button_module_button--04b55[data-modern=true].bp_base_button_module_large--04b55{
451
451
  --button-large-gap:var(--bp-space-020);
452
452
  --button-large-min-height:var(--bp-size-100);
453
453
  --button-large-padding:0 var(--bp-size-040);
454
454
  --button-large-font-size:var(--body-large-bold-font-size);
455
455
  --button-large-line-height:var(--body-large-bold-line-height);
456
456
  }
457
- .bp_base_button_module_button--c82d7[data-modern=true].bp_base_button_module_large--c82d7.bp_base_button_module_isIconButton--c82d7{
457
+ .bp_base_button_module_button--04b55[data-modern=true].bp_base_button_module_large--04b55.bp_base_button_module_isIconButton--04b55{
458
458
  --icon-button-large-width:var(--bp-size-100);
459
459
  --icon-button-large-height:var(--bp-size-100);
460
460
  --icon-button-large-padding:0 calc((var(--bp-size-100) - var(--bp-size-050))/2);
461
461
  }
462
- .bp_base_button_module_button--c82d7[data-modern=true].bp_base_button_module_large--c82d7.bp_base_button_module_isTextWithIconEndButton--c82d7{
462
+ .bp_base_button_module_button--04b55[data-modern=true].bp_base_button_module_large--04b55.bp_base_button_module_isTextWithIconEndButton--04b55{
463
463
  --button-large-padding:0 0.875rem 0 var(--bp-space-040);
464
464
  }
465
- .bp_base_button_module_button--c82d7[data-modern=true].bp_base_button_module_large--c82d7.bp_base_button_module_isTextWithIconStartButton--c82d7{
465
+ .bp_base_button_module_button--04b55[data-modern=true].bp_base_button_module_large--04b55.bp_base_button_module_isTextWithIconStartButton--04b55{
466
466
  --button-large-padding:0 var(--bp-space-040) 0 0.875rem;
467
467
  }
468
- .bp_base_button_module_button--c82d7[data-modern=true].bp_base_button_module_large--c82d7.bp_base_button_module_isTextWithStartAndEndIconButton--c82d7{
468
+ .bp_base_button_module_button--04b55[data-modern=true].bp_base_button_module_large--04b55.bp_base_button_module_isTextWithStartAndEndIconButton--04b55{
469
469
  --button-large-padding:0 0.875rem 0 0.875rem;
470
470
  }
471
471
 
472
- .bp_base_button_module_button--c82d7[data-modern=false]{
472
+ .bp_base_button_module_button--04b55[data-modern=false]{
473
473
  --button-border-radius:var(--radius-2);
474
474
  font-family:var(--body-default-bold-font-family);
475
475
  font-size:var(--body-default-bold-font-size);
@@ -479,10 +479,10 @@
479
479
  text-decoration:var(--body-default-bold-text-decoration);
480
480
  text-transform:var(--body-default-bold-text-case);
481
481
  }
482
- .bp_base_button_module_button--c82d7[data-modern=false]:not(:disabled)[data-focus-visible]{
482
+ .bp_base_button_module_button--04b55[data-modern=false]:not(:disabled)[data-focus-visible]{
483
483
  box-shadow:0 0 0 var(--border-1, 1px) var(--background-background), 0 0 0 var(--border-3) var(--outline-focus-on-light);
484
484
  }
485
- .bp_base_button_module_button--c82d7[data-modern=false].bp_base_button_module_primary--c82d7{
485
+ .bp_base_button_module_button--04b55[data-modern=false].bp_base_button_module_primary--04b55{
486
486
  --button-color:var(--text-text-brand-on-color);
487
487
  --button-background:var(--surface-surface-brand);
488
488
  --button-border:var(--border-1) solid var(--surface-surface-brand);
@@ -491,7 +491,7 @@
491
491
  --button-active-background:var(--surface-surface-brand-pressed);
492
492
  --button-active-border:var(--border-1) solid var(--surface-surface-brand-pressed);
493
493
  }
494
- .bp_base_button_module_button--c82d7[data-modern=false].bp_base_button_module_secondary--c82d7{
494
+ .bp_base_button_module_button--04b55[data-modern=false].bp_base_button_module_secondary--04b55{
495
495
  --button-color:var(--text-text-on-light);
496
496
  --button-background:var(--surface-cta-surface-secondary);
497
497
  --button-border:var(--border-1) solid var(--border-cta-border-secondary);
@@ -501,7 +501,7 @@
501
501
  --button-active-border:var(--border-1) solid var(--border-cta-border-secondary-pressed);
502
502
  --button-backdrop-filter:none;
503
503
  }
504
- .bp_base_button_module_button--c82d7[data-modern=false].bp_base_button_module_tertiary--c82d7{
504
+ .bp_base_button_module_button--04b55[data-modern=false].bp_base_button_module_tertiary--04b55{
505
505
  --button-color:var(--text-cta-link);
506
506
  --button-background:#0000;
507
507
  --button-border:var(--border-1) solid #0000;
@@ -509,7 +509,7 @@
509
509
  --button-active-background:var(--surface-cta-surface-tertiary-pressed);
510
510
  --button-backdrop-filter:none;
511
511
  }
512
- .bp_base_button_module_button--c82d7[data-modern=false].bp_base_button_module_quaternary--c82d7{
512
+ .bp_base_button_module_button--04b55[data-modern=false].bp_base_button_module_quaternary--04b55{
513
513
  --button-color:var(--text-cta-link-secondary);
514
514
  --button-background:var(--bp-surface-cta-surface-quaternary);
515
515
  --button-border:var(--border-1) solid #0000;
@@ -517,7 +517,7 @@
517
517
  --button-active-background:var(--bp-surface-cta-surface-quaternary-pressed);
518
518
  --button-backdrop-filter:none;
519
519
  }
520
- .bp_base_button_module_button--c82d7[data-modern=false].bp_base_button_module_tertiary-destructive--c82d7{
520
+ .bp_base_button_module_button--04b55[data-modern=false].bp_base_button_module_tertiary-destructive--04b55{
521
521
  --button-color:var(--text-text-destructive-on-light);
522
522
  --button-background:#0000;
523
523
  --button-border:var(--border-1) solid #0000;
@@ -525,7 +525,7 @@
525
525
  --button-active-background:var(--surface-cta-destructive-surface-tertiary-pressed);
526
526
  --button-backdrop-filter:none;
527
527
  }
528
- .bp_base_button_module_button--c82d7[data-modern=false].bp_base_button_module_destructive--c82d7{
528
+ .bp_base_button_module_button--04b55[data-modern=false].bp_base_button_module_destructive--04b55{
529
529
  --button-color:var(--text-text-on-dark);
530
530
  --button-background:var(--bp-surface-cta-destructive-surface-primary);
531
531
  --button-border:var(--border-1) solid var(--bp-surface-cta-destructive-surface-primary);
@@ -535,7 +535,7 @@
535
535
  --button-active-border:var(--border-1) solid var(--bp-surface-cta-destructive-surface-primary-pressed);
536
536
  --button-backdrop-filter:none;
537
537
  }
538
- .bp_base_button_module_button--c82d7[data-modern=false].bp_base_button_module_outline--c82d7{
538
+ .bp_base_button_module_button--04b55[data-modern=false].bp_base_button_module_outline--04b55{
539
539
  --button-color:var(--text-text-on-light);
540
540
  --button-background:var(--surface-cta-surface-outline);
541
541
  --button-border:var(--border-1) solid var(--border-cta-border-outline);
@@ -545,48 +545,57 @@
545
545
  --button-active-border:var(--border-1) solid var(--border-cta-border-outline-pressed);
546
546
  --button-backdrop-filter:none;
547
547
  }
548
- .bp_base_button_module_button--c82d7[data-modern=false].bp_base_button_module_small--c82d7{
548
+ .bp_base_button_module_button--04b55[data-modern=false].bp_base_button_module_small--04b55{
549
549
  --button-small-gap:var(--space-1);
550
550
  --button-small-min-height:var(--size-8);
551
551
  --button-small-padding:0 var(--space-4);
552
552
  }
553
- .bp_base_button_module_button--c82d7[data-modern=false].bp_base_button_module_small--c82d7.bp_base_button_module_isIconButton--c82d7{
553
+ .bp_base_button_module_button--04b55[data-modern=false].bp_base_button_module_small--04b55.bp_base_button_module_isIconButton--04b55{
554
554
  --icon-button-small-width:var(--size-8);
555
555
  --icon-button-small-height:var(--size-8);
556
556
  --icon-button-small-padding:0 calc((var(--space-8) - var(--space-4))/2);
557
557
  }
558
- .bp_base_button_module_button--c82d7[data-modern=false].bp_base_button_module_small--c82d7.bp_base_button_module_isTextWithIconEndButton--c82d7{
558
+ .bp_base_button_module_button--04b55[data-modern=false].bp_base_button_module_small--04b55.bp_base_button_module_isTextWithIconEndButton--04b55{
559
559
  --button-small-padding:0 var(--space-3);
560
560
  }
561
- .bp_base_button_module_button--c82d7[data-modern=false].bp_base_button_module_small--c82d7.bp_base_button_module_isTextWithIconStartButton--c82d7{
561
+ .bp_base_button_module_button--04b55[data-modern=false].bp_base_button_module_small--04b55.bp_base_button_module_isTextWithIconStartButton--04b55{
562
562
  --button-small-padding:0 var(--space-3) 0 0.625rem;
563
563
  }
564
- .bp_base_button_module_button--c82d7[data-modern=false].bp_base_button_module_small--c82d7.bp_base_button_module_isTextWithStartAndEndIconButton--c82d7{
564
+ .bp_base_button_module_button--04b55[data-modern=false].bp_base_button_module_small--04b55.bp_base_button_module_isTextWithStartAndEndIconButton--04b55{
565
565
  --button-small-padding:0 var(--space-3) 0 var(--space-3);
566
566
  }
567
- .bp_base_button_module_button--c82d7[data-modern=false].bp_base_button_module_large--c82d7{
567
+ .bp_base_button_module_button--04b55[data-modern=false].bp_base_button_module_large--04b55{
568
568
  --button-large-gap:var(--space-2);
569
569
  --button-large-min-height:var(--size-10);
570
570
  --button-large-padding:0 var(--space-4);
571
571
  --button-large-font-size:var(--body-default-bold-font-size);
572
572
  --button-large-line-height:var(--body-default-bold-line-height);
573
573
  }
574
- .bp_base_button_module_button--c82d7[data-modern=false].bp_base_button_module_large--c82d7.bp_base_button_module_isIconButton--c82d7{
574
+ .bp_base_button_module_button--04b55[data-modern=false].bp_base_button_module_large--04b55.bp_base_button_module_isIconButton--04b55{
575
575
  --icon-button-large-width:var(--size-10);
576
576
  --icon-button-large-height:var(--size-10);
577
577
  --icon-button-large-padding:0 calc((var(--space-10) - var(--space-5))/2);
578
578
  }
579
- .bp_base_button_module_button--c82d7[data-modern=false].bp_base_button_module_large--c82d7.bp_base_button_module_isTextWithIconEndButton--c82d7{
579
+ .bp_base_button_module_button--04b55[data-modern=false].bp_base_button_module_large--04b55.bp_base_button_module_isTextWithIconEndButton--04b55{
580
580
  --button-large-padding:0 var(--space-4);
581
581
  }
582
- .bp_base_button_module_button--c82d7[data-modern=false].bp_base_button_module_large--c82d7.bp_base_button_module_isTextWithIconStartButton--c82d7{
582
+ .bp_base_button_module_button--04b55[data-modern=false].bp_base_button_module_large--04b55.bp_base_button_module_isTextWithIconStartButton--04b55{
583
583
  --button-large-padding:0 var(--space-4) 0 0.875rem;
584
584
  }
585
- .bp_base_button_module_button--c82d7[data-modern=false].bp_base_button_module_large--c82d7.bp_base_button_module_isTextWithStartAndEndIconButton--c82d7{
585
+ .bp_base_button_module_button--04b55[data-modern=false].bp_base_button_module_large--04b55.bp_base_button_module_isTextWithStartAndEndIconButton--04b55{
586
586
  --button-large-padding:0 var(--space-4) 0 var(--space-4);
587
587
  }
588
588
 
589
- .bp_base_button_module_button--c82d7{
589
+ .bp_base_button_module_button--04b55[data-bp-animated=true]{
590
+ transition-duration:var(--bp-duration-short);
591
+ transition-property:background;
592
+ transition-timing-function:var(--bp-curve-small-off);
593
+ }
594
+ .bp_base_button_module_button--04b55[data-bp-animated=true]:active,.bp_base_button_module_button--04b55[data-bp-animated=true]:hover{
595
+ transition-timing-function:var(--bp-curve-small-on);
596
+ }
597
+
598
+ .bp_base_button_module_button--04b55{
590
599
  border-radius:var(--button-border-radius);
591
600
  cursor:pointer;
592
601
  justify-content:center;
@@ -595,137 +604,137 @@
595
604
  user-select:none;
596
605
  white-space:nowrap;
597
606
  }
598
- .bp_base_button_module_button--c82d7,.bp_base_button_module_button--c82d7 .bp_base_button_module_icon--c82d7{
607
+ .bp_base_button_module_button--04b55,.bp_base_button_module_button--04b55 .bp_base_button_module_icon--04b55{
599
608
  align-items:center;
600
609
  display:flex;
601
610
  }
602
- .bp_base_button_module_button--c82d7:disabled{
611
+ .bp_base_button_module_button--04b55:disabled{
603
612
  opacity:.3;
604
613
  }
605
- .bp_base_button_module_button--c82d7.bp_base_button_module_primary--c82d7{
614
+ .bp_base_button_module_button--04b55.bp_base_button_module_primary--04b55{
606
615
  background:var(--button-background);
607
616
  border:var(--button-border);
608
617
  color:var(--button-color);
609
618
  }
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]{
619
+ .bp_base_button_module_button--04b55.bp_base_button_module_primary--04b55:not(:disabled):hover,.bp_base_button_module_button--04b55.bp_base_button_module_primary--04b55:not(:disabled)[data-focus-visible]{
611
620
  background:var(--button-focus-or-hover-background);
612
621
  border:var(--button-focus-or-hover-border);
613
622
  }
614
- .bp_base_button_module_button--c82d7.bp_base_button_module_primary--c82d7:not(:disabled):active{
623
+ .bp_base_button_module_button--04b55.bp_base_button_module_primary--04b55:not(:disabled):active{
615
624
  background:var(--button-active-background);
616
625
  border:var(--button-active-border);
617
626
  }
618
- .bp_base_button_module_button--c82d7.bp_base_button_module_secondary--c82d7{
627
+ .bp_base_button_module_button--04b55.bp_base_button_module_secondary--04b55{
619
628
  backdrop-filter:var(--button-backdrop-filter);
620
629
  background:var(--button-background);
621
630
  border:var(--button-border);
622
631
  color:var(--button-color);
623
632
  }
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]{
633
+ .bp_base_button_module_button--04b55.bp_base_button_module_secondary--04b55:not(:disabled):hover,.bp_base_button_module_button--04b55.bp_base_button_module_secondary--04b55:not(:disabled)[data-focus-visible]{
625
634
  background:var(--button-focus-or-hover-background);
626
635
  border:var(--button-focus-or-hover-border);
627
636
  }
628
- .bp_base_button_module_button--c82d7.bp_base_button_module_secondary--c82d7:not(:disabled):active{
637
+ .bp_base_button_module_button--04b55.bp_base_button_module_secondary--04b55:not(:disabled):active{
629
638
  background:var(--button-active-background);
630
639
  border:var(--button-active-border);
631
640
  }
632
- .bp_base_button_module_button--c82d7.bp_base_button_module_tertiary-destructive--c82d7{
641
+ .bp_base_button_module_button--04b55.bp_base_button_module_tertiary-destructive--04b55{
633
642
  backdrop-filter:var(--button-backdrop-filter);
634
643
  background:var(--button-background);
635
644
  border:var(--button-border);
636
645
  color:var(--button-color);
637
646
  }
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]{
647
+ .bp_base_button_module_button--04b55.bp_base_button_module_tertiary-destructive--04b55:not(:disabled):hover,.bp_base_button_module_button--04b55.bp_base_button_module_tertiary-destructive--04b55:not(:disabled)[data-focus-visible]{
639
648
  background:var(--button-focus-or-hover-background);
640
649
  }
641
- .bp_base_button_module_button--c82d7.bp_base_button_module_tertiary-destructive--c82d7:not(:disabled):active{
650
+ .bp_base_button_module_button--04b55.bp_base_button_module_tertiary-destructive--04b55:not(:disabled):active{
642
651
  background:var(--button-active-background);
643
652
  }
644
- .bp_base_button_module_button--c82d7.bp_base_button_module_tertiary--c82d7{
653
+ .bp_base_button_module_button--04b55.bp_base_button_module_tertiary--04b55{
645
654
  backdrop-filter:var(--button-backdrop-filter);
646
655
  background:var(--button-background);
647
656
  border:var(--button-border);
648
657
  color:var(--button-color);
649
658
  }
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]{
659
+ .bp_base_button_module_button--04b55.bp_base_button_module_tertiary--04b55:not(:disabled):hover,.bp_base_button_module_button--04b55.bp_base_button_module_tertiary--04b55:not(:disabled)[data-focus-visible]{
651
660
  background:var(--button-focus-or-hover-background);
652
661
  }
653
- .bp_base_button_module_button--c82d7.bp_base_button_module_tertiary--c82d7:not(:disabled):active{
662
+ .bp_base_button_module_button--04b55.bp_base_button_module_tertiary--04b55:not(:disabled):active{
654
663
  background:var(--button-active-background);
655
664
  }
656
- .bp_base_button_module_button--c82d7.bp_base_button_module_quaternary--c82d7{
665
+ .bp_base_button_module_button--04b55.bp_base_button_module_quaternary--04b55{
657
666
  backdrop-filter:var(--button-backdrop-filter);
658
667
  background:var(--button-background);
659
668
  border:var(--button-border);
660
669
  color:var(--button-color);
661
670
  }
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]{
671
+ .bp_base_button_module_button--04b55.bp_base_button_module_quaternary--04b55:not(:disabled):hover,.bp_base_button_module_button--04b55.bp_base_button_module_quaternary--04b55:not(:disabled)[data-focus-visible]{
663
672
  background:var(--button-focus-or-hover-background);
664
673
  }
665
- .bp_base_button_module_button--c82d7.bp_base_button_module_quaternary--c82d7:not(:disabled):active{
674
+ .bp_base_button_module_button--04b55.bp_base_button_module_quaternary--04b55:not(:disabled):active{
666
675
  background:var(--button-active-background);
667
676
  }
668
- .bp_base_button_module_button--c82d7.bp_base_button_module_destructive--c82d7{
677
+ .bp_base_button_module_button--04b55.bp_base_button_module_destructive--04b55{
669
678
  background:var(--button-background);
670
679
  border:var(--button-border);
671
680
  color:var(--button-color);
672
681
  }
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]{
682
+ .bp_base_button_module_button--04b55.bp_base_button_module_destructive--04b55:not(:disabled):hover,.bp_base_button_module_button--04b55.bp_base_button_module_destructive--04b55:not(:disabled)[data-focus-visible]{
674
683
  background:var(--button-focus-or-hover-background);
675
684
  border:var(--button-focus-or-hover-border);
676
685
  }
677
- .bp_base_button_module_button--c82d7.bp_base_button_module_destructive--c82d7:not(:disabled):active{
686
+ .bp_base_button_module_button--04b55.bp_base_button_module_destructive--04b55:not(:disabled):active{
678
687
  background:var(--button-active-background);
679
688
  border:var(--button-active-border);
680
689
  }
681
- .bp_base_button_module_button--c82d7.bp_base_button_module_outline--c82d7{
690
+ .bp_base_button_module_button--04b55.bp_base_button_module_outline--04b55{
682
691
  backdrop-filter:var(--button-backdrop-filter);
683
692
  background:var(--button-background);
684
693
  border:var(--button-border);
685
694
  color:var(--button-color);
686
695
  }
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]{
696
+ .bp_base_button_module_button--04b55.bp_base_button_module_outline--04b55:not(:disabled):hover,.bp_base_button_module_button--04b55.bp_base_button_module_outline--04b55:not(:disabled)[data-focus-visible]{
688
697
  background:var(--button-focus-or-hover-background);
689
698
  border:var(--button-focus-or-hover-border);
690
699
  }
691
- .bp_base_button_module_button--c82d7.bp_base_button_module_outline--c82d7:not(:disabled):active{
700
+ .bp_base_button_module_button--04b55.bp_base_button_module_outline--04b55:not(:disabled):active{
692
701
  background:var(--button-active-background);
693
702
  border:var(--button-active-border);
694
703
  }
695
- .bp_base_button_module_button--c82d7.bp_base_button_module_small--c82d7{
704
+ .bp_base_button_module_button--04b55.bp_base_button_module_small--04b55{
696
705
  gap:var(--button-small-gap);
697
706
  min-height:var(--button-small-min-height);
698
707
  padding:var(--button-small-padding);
699
708
  }
700
- .bp_base_button_module_button--c82d7.bp_base_button_module_small--c82d7.bp_base_button_module_isIconButton--c82d7{
709
+ .bp_base_button_module_button--04b55.bp_base_button_module_small--04b55.bp_base_button_module_isIconButton--04b55{
701
710
  height:var(--icon-button-small-height);
702
711
  min-height:unset;
703
712
  padding:var(--icon-button-small-padding);
704
713
  width:var(--icon-button-small-width);
705
714
  }
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{
715
+ .bp_base_button_module_button--04b55.bp_base_button_module_small--04b55.bp_base_button_module_isTextWithIconEndButton--04b55,.bp_base_button_module_button--04b55.bp_base_button_module_small--04b55.bp_base_button_module_isTextWithIconStartButton--04b55,.bp_base_button_module_button--04b55.bp_base_button_module_small--04b55.bp_base_button_module_isTextWithStartAndEndIconButton--04b55{
707
716
  padding:var(--button-small-padding);
708
717
  }
709
- .bp_base_button_module_button--c82d7.bp_base_button_module_large--c82d7{
718
+ .bp_base_button_module_button--04b55.bp_base_button_module_large--04b55{
710
719
  font-size:var(--button-large-font-size);
711
720
  gap:var(--button-large-gap);
712
721
  line-height:var(--button-large-line-height);
713
722
  min-height:var(--button-large-min-height);
714
723
  padding:var(--button-large-padding);
715
724
  }
716
- .bp_base_button_module_button--c82d7.bp_base_button_module_large--c82d7.bp_base_button_module_isIconButton--c82d7{
725
+ .bp_base_button_module_button--04b55.bp_base_button_module_large--04b55.bp_base_button_module_isIconButton--04b55{
717
726
  height:var(--icon-button-large-height);
718
727
  padding:var(--icon-button-large-padding);
719
728
  width:var(--icon-button-large-width);
720
729
  }
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{
730
+ .bp_base_button_module_button--04b55.bp_base_button_module_large--04b55.bp_base_button_module_isTextWithIconEndButton--04b55,.bp_base_button_module_button--04b55.bp_base_button_module_large--04b55.bp_base_button_module_isTextWithIconStartButton--04b55,.bp_base_button_module_button--04b55.bp_base_button_module_large--04b55.bp_base_button_module_isTextWithStartAndEndIconButton--04b55{
722
731
  padding:var(--button-large-padding);
723
732
  }
724
- .bp_base_button_module_button--c82d7.bp_base_button_module_hide--c82d7{
733
+ .bp_base_button_module_button--04b55.bp_base_button_module_hide--04b55{
725
734
  pointer-events:none;
726
735
  position:relative;
727
736
  }
728
- .bp_base_button_module_button--c82d7.bp_base_button_module_hide--c82d7 span{
737
+ .bp_base_button_module_button--04b55.bp_base_button_module_hide--04b55 span{
729
738
  color:#0000;
730
739
  opacity:0;
731
740
  }
package/dist/lib-esm/primitives/base-button/base-button.js CHANGED
@@ -2,6 +2,8 @@ import { jsx, jsxs } from 'react/jsx-runtime';
2
2
  import { Button } from '@ariakit/react';
3
3
  import clsx from 'clsx';
4
4
  import { forwardRef, useRef, useMemo } from 'react';
5
+ import '../../blueprint-configuration-context/blueprint-configuration-context.js';
6
+ import { useBlueprintConfiguration } from '../../blueprint-configuration-context/useBlueprintConfiguration.js';
5
7
  import { useBlueprintModernization } from '../../blueprint-modernization-context/useBlueprintModernization.js';
6
8
  import { LoadingIndicator } from '../../loading-indicator/loading-indicator.js';
7
9
  import { getButtonOptions } from '../../utils/getButtonOptions.js';
@@ -35,6 +37,10 @@ const BaseButton = /*#__PURE__*/forwardRef((props, forwardedRef) => {
35
37
  const {
36
38
  enableModernizedComponents
37
39
  } = useBlueprintModernization();
40
+ const {
41
+ componentsWithAnimationEnabled
42
+ } = useBlueprintConfiguration();
43
+ const isAnimationEnabled = componentsWithAnimationEnabled.includes('Button');
38
44
  const ref = useRef(null);
39
45
  const buttonType = useMemo(() => getButtonTypeFromChildren(children, BaseButtonIcon, BaseButtonLabel), [children]);
40
46
  const context = useMemo(() => ({
@@ -50,6 +56,7 @@ const BaseButton = /*#__PURE__*/forwardRef((props, forwardedRef) => {
50
56
  "aria-label": loading ? undefined : ariaLabel,
51
57
  className: getButtonClassName(variant, size, buttonType, loading, className),
52
58
  "data-modern": enableModernizedComponents ? 'true' : 'false',
59
+ "data-bp-animated": isAnimationEnabled ? 'true' : 'false',
53
60
  children: jsxs(BaseButtonContext.Provider, {
54
61
  value: context,
55
62
  children: [children, loading && loadingAriaLabel ? jsx(LoadingIndicator, {
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--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"};
2
+ var styles = {"button":"bp_base_button_module_button--04b55","primary":"bp_base_button_module_primary--04b55","secondary":"bp_base_button_module_secondary--04b55","tertiary":"bp_base_button_module_tertiary--04b55","quaternary":"bp_base_button_module_quaternary--04b55","tertiary-destructive":"bp_base_button_module_tertiary-destructive--04b55","destructive":"bp_base_button_module_destructive--04b55","outline":"bp_base_button_module_outline--04b55","small":"bp_base_button_module_small--04b55","isIconButton":"bp_base_button_module_isIconButton--04b55","isTextWithIconEndButton":"bp_base_button_module_isTextWithIconEndButton--04b55","isTextWithIconStartButton":"bp_base_button_module_isTextWithIconStartButton--04b55","isTextWithStartAndEndIconButton":"bp_base_button_module_isTextWithStartAndEndIconButton--04b55","large":"bp_base_button_module_large--04b55","icon":"bp_base_button_module_icon--04b55","hide":"bp_base_button_module_hide--04b55"};
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": "13.17.1",
3
+ "version": "13.18.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.12",
50
+ "@box/blueprint-web-assets": "^4.111.13",
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.12",
80
+ "@box/storybook-utils": "^0.17.13",
81
81
  "@figma/code-connect": "1.3.12",
82
82
  "@types/react": "^18.0.0",
83
83
  "@types/react-dom": "^18.0.0",