@box/blueprint-web 14.34.1 → 14.35.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 (7) hide show
  1. package/dist/lib-esm/index.css +136 -72
  2. package/dist/lib-esm/primitives/base-button/base-button.js +4 -3
  3. package/dist/lib-esm/primitives/base-button/base-button.module.js +1 -1
  4. package/dist/lib-esm/primitives/base-button/types.d.ts +7 -2
  5. package/dist/lib-esm/primitives/base-button/utils.js +5 -2
  6. package/dist/lib-esm/trigger-button/trigger-button.d.ts +1 -1
  7. 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--04b55[data-modern=true]{
358
+ .bp_base_button_module_button--31640[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--04b55[data-modern=true]:not(:disabled)[data-focus-visible]{
367
+ .bp_base_button_module_button--31640[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--04b55[data-modern=true].bp_base_button_module_primary--04b55{
370
+ .bp_base_button_module_button--31640[data-modern=true].bp_base_button_module_primary--31640{
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--04b55[data-modern=true].bp_base_button_module_secondary--04b55{
379
+ .bp_base_button_module_button--31640[data-modern=true].bp_base_button_module_secondary--31640{
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--04b55[data-modern=true].bp_base_button_module_tertiary--04b55{
389
+ .bp_base_button_module_button--31640[data-modern=true].bp_base_button_module_tertiary--31640{
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--04b55[data-modern=true].bp_base_button_module_quaternary--04b55{
396
+ .bp_base_button_module_button--31640[data-modern=true].bp_base_button_module_quaternary--31640{
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--04b55[data-modern=true].bp_base_button_module_tertiary-destructive--04b55{
404
+ .bp_base_button_module_button--31640[data-modern=true].bp_base_button_module_tertiary-destructive--31640{
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--04b55[data-modern=true].bp_base_button_module_destructive--04b55{
412
+ .bp_base_button_module_button--31640[data-modern=true].bp_base_button_module_destructive--31640{
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--04b55[data-modern=true].bp_base_button_module_outline--04b55{
421
+ .bp_base_button_module_button--31640[data-modern=true].bp_base_button_module_outline--31640{
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,73 @@
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--04b55[data-modern=true].bp_base_button_module_small--04b55{
431
+ .bp_base_button_module_button--31640[data-modern=true].bp_base_button_module_small--31640{
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--04b55[data-modern=true].bp_base_button_module_small--04b55.bp_base_button_module_isIconButton--04b55{
436
+ .bp_base_button_module_button--31640[data-modern=true].bp_base_button_module_small--31640.bp_base_button_module_isIconButton--31640{
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--04b55[data-modern=true].bp_base_button_module_small--04b55.bp_base_button_module_isTextWithIconEndButton--04b55{
441
+ .bp_base_button_module_button--31640[data-modern=true].bp_base_button_module_small--31640.bp_base_button_module_isTextWithIconEndButton--31640{
442
442
  --button-small-padding:0 0.625rem 0 var(--bp-space-030);
443
443
  }
444
- .bp_base_button_module_button--04b55[data-modern=true].bp_base_button_module_small--04b55.bp_base_button_module_isTextWithIconStartButton--04b55{
444
+ .bp_base_button_module_button--31640[data-modern=true].bp_base_button_module_small--31640.bp_base_button_module_isTextWithIconStartButton--31640{
445
445
  --button-small-padding:0 var(--bp-space-030) 0 0.625rem;
446
446
  }
447
- .bp_base_button_module_button--04b55[data-modern=true].bp_base_button_module_small--04b55.bp_base_button_module_isTextWithStartAndEndIconButton--04b55{
447
+ .bp_base_button_module_button--31640[data-modern=true].bp_base_button_module_small--31640.bp_base_button_module_isTextWithStartAndEndIconButton--31640{
448
448
  --button-small-padding:0 0.625rem 0 0.625rem;
449
449
  }
450
- .bp_base_button_module_button--04b55[data-modern=true].bp_base_button_module_large--04b55{
450
+ .bp_base_button_module_button--31640[data-modern=true].bp_base_button_module_quaternary--31640.bp_base_button_module_x-small--31640{
451
+ --button-x-small-gap:var(--bp-space-010);
452
+ --button-x-small-min-height:var(--bp-size-060);
453
+ --button-x-small-padding:var(--bp-space-005) var(--bp-space-020);
454
+ font-family:var(--bp-font-font-family), -apple-system, BlinkMacSystemFont, "San Francisco", "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
455
+ font-size:var(--bp-font-size-04);
456
+ font-style:normal;
457
+ font-weight:var(--bp-font-weight-semibold);
458
+ letter-spacing:var(--bp-font-letter-spacing-01);
459
+ line-height:var(--bp-font-line-height-04);
460
+ }
461
+ .bp_base_button_module_button--31640[data-modern=true].bp_base_button_module_quaternary--31640.bp_base_button_module_x-small--31640.bp_base_button_module_isIconButton--31640{
462
+ --icon-button-x-small-width:var(--bp-size-060);
463
+ --icon-button-x-small-height:var(--bp-size-060);
464
+ --icon-button-x-small-padding:0 calc((var(--bp-size-060) - var(--bp-size-040))/2);
465
+ }
466
+ .bp_base_button_module_button--31640[data-modern=true].bp_base_button_module_quaternary--31640.bp_base_button_module_x-small--31640.bp_base_button_module_isTextWithIconEndButton--31640{
467
+ --button-x-small-padding:var(--bp-space-005) 0.375rem var(--bp-space-005) var(--bp-space-020);
468
+ }
469
+ .bp_base_button_module_button--31640[data-modern=true].bp_base_button_module_quaternary--31640.bp_base_button_module_x-small--31640.bp_base_button_module_isTextWithIconStartButton--31640{
470
+ --button-x-small-padding:var(--bp-space-005) var(--bp-space-020) var(--bp-space-005) 0.375rem;
471
+ }
472
+ .bp_base_button_module_button--31640[data-modern=true].bp_base_button_module_quaternary--31640.bp_base_button_module_x-small--31640.bp_base_button_module_isTextWithStartAndEndIconButton--31640{
473
+ --button-x-small-padding:var(--bp-space-005) 0.375rem;
474
+ }
475
+ .bp_base_button_module_button--31640[data-modern=true].bp_base_button_module_large--31640{
451
476
  --button-large-gap:var(--bp-space-020);
452
477
  --button-large-min-height:var(--bp-size-100);
453
478
  --button-large-padding:0 var(--bp-size-040);
454
479
  --button-large-font-size:var(--body-large-bold-font-size);
455
480
  --button-large-line-height:var(--body-large-bold-line-height);
456
481
  }
457
- .bp_base_button_module_button--04b55[data-modern=true].bp_base_button_module_large--04b55.bp_base_button_module_isIconButton--04b55{
482
+ .bp_base_button_module_button--31640[data-modern=true].bp_base_button_module_large--31640.bp_base_button_module_isIconButton--31640{
458
483
  --icon-button-large-width:var(--bp-size-100);
459
484
  --icon-button-large-height:var(--bp-size-100);
460
485
  --icon-button-large-padding:0 calc((var(--bp-size-100) - var(--bp-size-050))/2);
461
486
  }
462
- .bp_base_button_module_button--04b55[data-modern=true].bp_base_button_module_large--04b55.bp_base_button_module_isTextWithIconEndButton--04b55{
487
+ .bp_base_button_module_button--31640[data-modern=true].bp_base_button_module_large--31640.bp_base_button_module_isTextWithIconEndButton--31640{
463
488
  --button-large-padding:0 0.875rem 0 var(--bp-space-040);
464
489
  }
465
- .bp_base_button_module_button--04b55[data-modern=true].bp_base_button_module_large--04b55.bp_base_button_module_isTextWithIconStartButton--04b55{
490
+ .bp_base_button_module_button--31640[data-modern=true].bp_base_button_module_large--31640.bp_base_button_module_isTextWithIconStartButton--31640{
466
491
  --button-large-padding:0 var(--bp-space-040) 0 0.875rem;
467
492
  }
468
- .bp_base_button_module_button--04b55[data-modern=true].bp_base_button_module_large--04b55.bp_base_button_module_isTextWithStartAndEndIconButton--04b55{
493
+ .bp_base_button_module_button--31640[data-modern=true].bp_base_button_module_large--31640.bp_base_button_module_isTextWithStartAndEndIconButton--31640{
469
494
  --button-large-padding:0 0.875rem 0 0.875rem;
470
495
  }
471
496
 
472
- .bp_base_button_module_button--04b55[data-modern=false]{
497
+ .bp_base_button_module_button--31640[data-modern=false]{
473
498
  --button-border-radius:var(--radius-2);
474
499
  font-family:var(--body-default-bold-font-family);
475
500
  font-size:var(--body-default-bold-font-size);
@@ -479,10 +504,10 @@
479
504
  text-decoration:var(--body-default-bold-text-decoration);
480
505
  text-transform:var(--body-default-bold-text-case);
481
506
  }
482
- .bp_base_button_module_button--04b55[data-modern=false]:not(:disabled)[data-focus-visible]{
507
+ .bp_base_button_module_button--31640[data-modern=false]:not(:disabled)[data-focus-visible]{
483
508
  box-shadow:0 0 0 var(--border-1, 1px) var(--background-background), 0 0 0 var(--border-3) var(--outline-focus-on-light);
484
509
  }
485
- .bp_base_button_module_button--04b55[data-modern=false].bp_base_button_module_primary--04b55{
510
+ .bp_base_button_module_button--31640[data-modern=false].bp_base_button_module_primary--31640{
486
511
  --button-color:var(--text-text-brand-on-color);
487
512
  --button-background:var(--surface-surface-brand);
488
513
  --button-border:var(--border-1) solid var(--surface-surface-brand);
@@ -491,7 +516,7 @@
491
516
  --button-active-background:var(--surface-surface-brand-pressed);
492
517
  --button-active-border:var(--border-1) solid var(--surface-surface-brand-pressed);
493
518
  }
494
- .bp_base_button_module_button--04b55[data-modern=false].bp_base_button_module_secondary--04b55{
519
+ .bp_base_button_module_button--31640[data-modern=false].bp_base_button_module_secondary--31640{
495
520
  --button-color:var(--text-text-on-light);
496
521
  --button-background:var(--surface-cta-surface-secondary);
497
522
  --button-border:var(--border-1) solid var(--border-cta-border-secondary);
@@ -501,7 +526,7 @@
501
526
  --button-active-border:var(--border-1) solid var(--border-cta-border-secondary-pressed);
502
527
  --button-backdrop-filter:none;
503
528
  }
504
- .bp_base_button_module_button--04b55[data-modern=false].bp_base_button_module_tertiary--04b55{
529
+ .bp_base_button_module_button--31640[data-modern=false].bp_base_button_module_tertiary--31640{
505
530
  --button-color:var(--text-cta-link);
506
531
  --button-background:#0000;
507
532
  --button-border:var(--border-1) solid #0000;
@@ -509,7 +534,7 @@
509
534
  --button-active-background:var(--surface-cta-surface-tertiary-pressed);
510
535
  --button-backdrop-filter:none;
511
536
  }
512
- .bp_base_button_module_button--04b55[data-modern=false].bp_base_button_module_quaternary--04b55{
537
+ .bp_base_button_module_button--31640[data-modern=false].bp_base_button_module_quaternary--31640{
513
538
  --button-color:var(--text-cta-link-secondary);
514
539
  --button-background:var(--bp-surface-cta-surface-quaternary);
515
540
  --button-border:var(--border-1) solid #0000;
@@ -517,7 +542,7 @@
517
542
  --button-active-background:var(--bp-surface-cta-surface-quaternary-pressed);
518
543
  --button-backdrop-filter:none;
519
544
  }
520
- .bp_base_button_module_button--04b55[data-modern=false].bp_base_button_module_tertiary-destructive--04b55{
545
+ .bp_base_button_module_button--31640[data-modern=false].bp_base_button_module_tertiary-destructive--31640{
521
546
  --button-color:var(--text-text-destructive-on-light);
522
547
  --button-background:#0000;
523
548
  --button-border:var(--border-1) solid #0000;
@@ -525,7 +550,7 @@
525
550
  --button-active-background:var(--surface-cta-destructive-surface-tertiary-pressed);
526
551
  --button-backdrop-filter:none;
527
552
  }
528
- .bp_base_button_module_button--04b55[data-modern=false].bp_base_button_module_destructive--04b55{
553
+ .bp_base_button_module_button--31640[data-modern=false].bp_base_button_module_destructive--31640{
529
554
  --button-color:var(--text-text-on-dark);
530
555
  --button-background:var(--bp-surface-cta-destructive-surface-primary);
531
556
  --button-border:var(--border-1) solid var(--bp-surface-cta-destructive-surface-primary);
@@ -535,7 +560,7 @@
535
560
  --button-active-border:var(--border-1) solid var(--bp-surface-cta-destructive-surface-primary-pressed);
536
561
  --button-backdrop-filter:none;
537
562
  }
538
- .bp_base_button_module_button--04b55[data-modern=false].bp_base_button_module_outline--04b55{
563
+ .bp_base_button_module_button--31640[data-modern=false].bp_base_button_module_outline--31640{
539
564
  --button-color:var(--text-text-on-light);
540
565
  --button-background:var(--surface-cta-surface-outline);
541
566
  --button-border:var(--border-1) solid var(--border-cta-border-outline);
@@ -545,57 +570,82 @@
545
570
  --button-active-border:var(--border-1) solid var(--border-cta-border-outline-pressed);
546
571
  --button-backdrop-filter:none;
547
572
  }
548
- .bp_base_button_module_button--04b55[data-modern=false].bp_base_button_module_small--04b55{
573
+ .bp_base_button_module_button--31640[data-modern=false].bp_base_button_module_small--31640{
549
574
  --button-small-gap:var(--space-1);
550
575
  --button-small-min-height:var(--size-8);
551
576
  --button-small-padding:0 var(--space-4);
552
577
  }
553
- .bp_base_button_module_button--04b55[data-modern=false].bp_base_button_module_small--04b55.bp_base_button_module_isIconButton--04b55{
578
+ .bp_base_button_module_button--31640[data-modern=false].bp_base_button_module_small--31640.bp_base_button_module_isIconButton--31640{
554
579
  --icon-button-small-width:var(--size-8);
555
580
  --icon-button-small-height:var(--size-8);
556
581
  --icon-button-small-padding:0 calc((var(--space-8) - var(--space-4))/2);
557
582
  }
558
- .bp_base_button_module_button--04b55[data-modern=false].bp_base_button_module_small--04b55.bp_base_button_module_isTextWithIconEndButton--04b55{
583
+ .bp_base_button_module_button--31640[data-modern=false].bp_base_button_module_small--31640.bp_base_button_module_isTextWithIconEndButton--31640{
559
584
  --button-small-padding:0 var(--space-3);
560
585
  }
561
- .bp_base_button_module_button--04b55[data-modern=false].bp_base_button_module_small--04b55.bp_base_button_module_isTextWithIconStartButton--04b55{
586
+ .bp_base_button_module_button--31640[data-modern=false].bp_base_button_module_small--31640.bp_base_button_module_isTextWithIconStartButton--31640{
562
587
  --button-small-padding:0 var(--space-3) 0 0.625rem;
563
588
  }
564
- .bp_base_button_module_button--04b55[data-modern=false].bp_base_button_module_small--04b55.bp_base_button_module_isTextWithStartAndEndIconButton--04b55{
589
+ .bp_base_button_module_button--31640[data-modern=false].bp_base_button_module_small--31640.bp_base_button_module_isTextWithStartAndEndIconButton--31640{
565
590
  --button-small-padding:0 var(--space-3) 0 var(--space-3);
566
591
  }
567
- .bp_base_button_module_button--04b55[data-modern=false].bp_base_button_module_large--04b55{
592
+ .bp_base_button_module_button--31640[data-modern=false].bp_base_button_module_quaternary--31640.bp_base_button_module_x-small--31640{
593
+ --button-x-small-gap:var(--space-1);
594
+ --button-x-small-min-height:var(--size-6);
595
+ --button-x-small-padding:var(--space-05) var(--space-2);
596
+ --button-x-small-font-size:var(--caption-bold-font-size);
597
+ --button-x-small-line-height:var(--caption-bold-line-height);
598
+ --button-x-small-font-weight:var(--caption-bold-font-weight);
599
+ font-size:var(--button-x-small-font-size);
600
+ font-weight:var(--button-x-small-font-weight);
601
+ line-height:var(--button-x-small-line-height);
602
+ }
603
+ .bp_base_button_module_button--31640[data-modern=false].bp_base_button_module_quaternary--31640.bp_base_button_module_x-small--31640.bp_base_button_module_isIconButton--31640{
604
+ --icon-button-x-small-width:var(--size-6);
605
+ --icon-button-x-small-height:var(--size-6);
606
+ --icon-button-x-small-padding:0 calc((var(--size-6) - var(--space-4))/2);
607
+ }
608
+ .bp_base_button_module_button--31640[data-modern=false].bp_base_button_module_quaternary--31640.bp_base_button_module_x-small--31640.bp_base_button_module_isTextWithIconEndButton--31640{
609
+ --button-x-small-padding:var(--space-05) 0.375rem var(--space-05) var(--space-2);
610
+ }
611
+ .bp_base_button_module_button--31640[data-modern=false].bp_base_button_module_quaternary--31640.bp_base_button_module_x-small--31640.bp_base_button_module_isTextWithIconStartButton--31640{
612
+ --button-x-small-padding:var(--space-05) var(--space-2) var(--space-05) 0.375rem;
613
+ }
614
+ .bp_base_button_module_button--31640[data-modern=false].bp_base_button_module_quaternary--31640.bp_base_button_module_x-small--31640.bp_base_button_module_isTextWithStartAndEndIconButton--31640{
615
+ --button-x-small-padding:var(--space-05) 0.375rem;
616
+ }
617
+ .bp_base_button_module_button--31640[data-modern=false].bp_base_button_module_large--31640{
568
618
  --button-large-gap:var(--space-2);
569
619
  --button-large-min-height:var(--size-10);
570
620
  --button-large-padding:0 var(--space-4);
571
621
  --button-large-font-size:var(--body-default-bold-font-size);
572
622
  --button-large-line-height:var(--body-default-bold-line-height);
573
623
  }
574
- .bp_base_button_module_button--04b55[data-modern=false].bp_base_button_module_large--04b55.bp_base_button_module_isIconButton--04b55{
624
+ .bp_base_button_module_button--31640[data-modern=false].bp_base_button_module_large--31640.bp_base_button_module_isIconButton--31640{
575
625
  --icon-button-large-width:var(--size-10);
576
626
  --icon-button-large-height:var(--size-10);
577
627
  --icon-button-large-padding:0 calc((var(--space-10) - var(--space-5))/2);
578
628
  }
579
- .bp_base_button_module_button--04b55[data-modern=false].bp_base_button_module_large--04b55.bp_base_button_module_isTextWithIconEndButton--04b55{
629
+ .bp_base_button_module_button--31640[data-modern=false].bp_base_button_module_large--31640.bp_base_button_module_isTextWithIconEndButton--31640{
580
630
  --button-large-padding:0 var(--space-4);
581
631
  }
582
- .bp_base_button_module_button--04b55[data-modern=false].bp_base_button_module_large--04b55.bp_base_button_module_isTextWithIconStartButton--04b55{
632
+ .bp_base_button_module_button--31640[data-modern=false].bp_base_button_module_large--31640.bp_base_button_module_isTextWithIconStartButton--31640{
583
633
  --button-large-padding:0 var(--space-4) 0 0.875rem;
584
634
  }
585
- .bp_base_button_module_button--04b55[data-modern=false].bp_base_button_module_large--04b55.bp_base_button_module_isTextWithStartAndEndIconButton--04b55{
635
+ .bp_base_button_module_button--31640[data-modern=false].bp_base_button_module_large--31640.bp_base_button_module_isTextWithStartAndEndIconButton--31640{
586
636
  --button-large-padding:0 var(--space-4) 0 var(--space-4);
587
637
  }
588
638
 
589
- .bp_base_button_module_button--04b55[data-bp-animated=true]{
639
+ .bp_base_button_module_button--31640[data-bp-animated=true]{
590
640
  transition-duration:var(--bp-duration-short);
591
641
  transition-property:background;
592
642
  transition-timing-function:var(--bp-curve-small-off);
593
643
  }
594
- .bp_base_button_module_button--04b55[data-bp-animated=true]:active,.bp_base_button_module_button--04b55[data-bp-animated=true]:hover{
644
+ .bp_base_button_module_button--31640[data-bp-animated=true]:active,.bp_base_button_module_button--31640[data-bp-animated=true]:hover{
595
645
  transition-timing-function:var(--bp-curve-small-on);
596
646
  }
597
647
 
598
- .bp_base_button_module_button--04b55{
648
+ .bp_base_button_module_button--31640{
599
649
  border-radius:var(--button-border-radius);
600
650
  cursor:pointer;
601
651
  justify-content:center;
@@ -604,137 +654,151 @@
604
654
  user-select:none;
605
655
  white-space:nowrap;
606
656
  }
607
- .bp_base_button_module_button--04b55,.bp_base_button_module_button--04b55 .bp_base_button_module_icon--04b55{
657
+ .bp_base_button_module_button--31640,.bp_base_button_module_button--31640 .bp_base_button_module_icon--31640{
608
658
  align-items:center;
609
659
  display:flex;
610
660
  }
611
- .bp_base_button_module_button--04b55:disabled{
661
+ .bp_base_button_module_button--31640:disabled{
612
662
  opacity:.3;
613
663
  }
614
- .bp_base_button_module_button--04b55.bp_base_button_module_primary--04b55{
664
+ .bp_base_button_module_button--31640.bp_base_button_module_primary--31640{
615
665
  background:var(--button-background);
616
666
  border:var(--button-border);
617
667
  color:var(--button-color);
618
668
  }
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]{
669
+ .bp_base_button_module_button--31640.bp_base_button_module_primary--31640:not(:disabled):hover,.bp_base_button_module_button--31640.bp_base_button_module_primary--31640:not(:disabled)[data-focus-visible]{
620
670
  background:var(--button-focus-or-hover-background);
621
671
  border:var(--button-focus-or-hover-border);
622
672
  }
623
- .bp_base_button_module_button--04b55.bp_base_button_module_primary--04b55:not(:disabled):active{
673
+ .bp_base_button_module_button--31640.bp_base_button_module_primary--31640:not(:disabled):active{
624
674
  background:var(--button-active-background);
625
675
  border:var(--button-active-border);
626
676
  }
627
- .bp_base_button_module_button--04b55.bp_base_button_module_secondary--04b55{
677
+ .bp_base_button_module_button--31640.bp_base_button_module_secondary--31640{
628
678
  backdrop-filter:var(--button-backdrop-filter);
629
679
  background:var(--button-background);
630
680
  border:var(--button-border);
631
681
  color:var(--button-color);
632
682
  }
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]{
683
+ .bp_base_button_module_button--31640.bp_base_button_module_secondary--31640:not(:disabled):hover,.bp_base_button_module_button--31640.bp_base_button_module_secondary--31640:not(:disabled)[data-focus-visible]{
634
684
  background:var(--button-focus-or-hover-background);
635
685
  border:var(--button-focus-or-hover-border);
636
686
  }
637
- .bp_base_button_module_button--04b55.bp_base_button_module_secondary--04b55:not(:disabled):active{
687
+ .bp_base_button_module_button--31640.bp_base_button_module_secondary--31640:not(:disabled):active{
638
688
  background:var(--button-active-background);
639
689
  border:var(--button-active-border);
640
690
  }
641
- .bp_base_button_module_button--04b55.bp_base_button_module_tertiary-destructive--04b55{
691
+ .bp_base_button_module_button--31640.bp_base_button_module_tertiary-destructive--31640{
642
692
  backdrop-filter:var(--button-backdrop-filter);
643
693
  background:var(--button-background);
644
694
  border:var(--button-border);
645
695
  color:var(--button-color);
646
696
  }
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]{
697
+ .bp_base_button_module_button--31640.bp_base_button_module_tertiary-destructive--31640:not(:disabled):hover,.bp_base_button_module_button--31640.bp_base_button_module_tertiary-destructive--31640:not(:disabled)[data-focus-visible]{
648
698
  background:var(--button-focus-or-hover-background);
649
699
  }
650
- .bp_base_button_module_button--04b55.bp_base_button_module_tertiary-destructive--04b55:not(:disabled):active{
700
+ .bp_base_button_module_button--31640.bp_base_button_module_tertiary-destructive--31640:not(:disabled):active{
651
701
  background:var(--button-active-background);
652
702
  }
653
- .bp_base_button_module_button--04b55.bp_base_button_module_tertiary--04b55{
703
+ .bp_base_button_module_button--31640.bp_base_button_module_tertiary--31640{
654
704
  backdrop-filter:var(--button-backdrop-filter);
655
705
  background:var(--button-background);
656
706
  border:var(--button-border);
657
707
  color:var(--button-color);
658
708
  }
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]{
709
+ .bp_base_button_module_button--31640.bp_base_button_module_tertiary--31640:not(:disabled):hover,.bp_base_button_module_button--31640.bp_base_button_module_tertiary--31640:not(:disabled)[data-focus-visible]{
660
710
  background:var(--button-focus-or-hover-background);
661
711
  }
662
- .bp_base_button_module_button--04b55.bp_base_button_module_tertiary--04b55:not(:disabled):active{
712
+ .bp_base_button_module_button--31640.bp_base_button_module_tertiary--31640:not(:disabled):active{
663
713
  background:var(--button-active-background);
664
714
  }
665
- .bp_base_button_module_button--04b55.bp_base_button_module_quaternary--04b55{
715
+ .bp_base_button_module_button--31640.bp_base_button_module_quaternary--31640{
666
716
  backdrop-filter:var(--button-backdrop-filter);
667
717
  background:var(--button-background);
668
718
  border:var(--button-border);
669
719
  color:var(--button-color);
670
720
  }
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]{
721
+ .bp_base_button_module_button--31640.bp_base_button_module_quaternary--31640:not(:disabled):hover,.bp_base_button_module_button--31640.bp_base_button_module_quaternary--31640:not(:disabled)[data-focus-visible]{
672
722
  background:var(--button-focus-or-hover-background);
673
723
  }
674
- .bp_base_button_module_button--04b55.bp_base_button_module_quaternary--04b55:not(:disabled):active{
724
+ .bp_base_button_module_button--31640.bp_base_button_module_quaternary--31640:not(:disabled):active{
675
725
  background:var(--button-active-background);
676
726
  }
677
- .bp_base_button_module_button--04b55.bp_base_button_module_destructive--04b55{
727
+ .bp_base_button_module_button--31640.bp_base_button_module_destructive--31640{
678
728
  background:var(--button-background);
679
729
  border:var(--button-border);
680
730
  color:var(--button-color);
681
731
  }
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]{
732
+ .bp_base_button_module_button--31640.bp_base_button_module_destructive--31640:not(:disabled):hover,.bp_base_button_module_button--31640.bp_base_button_module_destructive--31640:not(:disabled)[data-focus-visible]{
683
733
  background:var(--button-focus-or-hover-background);
684
734
  border:var(--button-focus-or-hover-border);
685
735
  }
686
- .bp_base_button_module_button--04b55.bp_base_button_module_destructive--04b55:not(:disabled):active{
736
+ .bp_base_button_module_button--31640.bp_base_button_module_destructive--31640:not(:disabled):active{
687
737
  background:var(--button-active-background);
688
738
  border:var(--button-active-border);
689
739
  }
690
- .bp_base_button_module_button--04b55.bp_base_button_module_outline--04b55{
740
+ .bp_base_button_module_button--31640.bp_base_button_module_outline--31640{
691
741
  backdrop-filter:var(--button-backdrop-filter);
692
742
  background:var(--button-background);
693
743
  border:var(--button-border);
694
744
  color:var(--button-color);
695
745
  }
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]{
746
+ .bp_base_button_module_button--31640.bp_base_button_module_outline--31640:not(:disabled):hover,.bp_base_button_module_button--31640.bp_base_button_module_outline--31640:not(:disabled)[data-focus-visible]{
697
747
  background:var(--button-focus-or-hover-background);
698
748
  border:var(--button-focus-or-hover-border);
699
749
  }
700
- .bp_base_button_module_button--04b55.bp_base_button_module_outline--04b55:not(:disabled):active{
750
+ .bp_base_button_module_button--31640.bp_base_button_module_outline--31640:not(:disabled):active{
701
751
  background:var(--button-active-background);
702
752
  border:var(--button-active-border);
703
753
  }
704
- .bp_base_button_module_button--04b55.bp_base_button_module_small--04b55{
754
+ .bp_base_button_module_button--31640.bp_base_button_module_small--31640{
705
755
  gap:var(--button-small-gap);
706
756
  min-height:var(--button-small-min-height);
707
757
  padding:var(--button-small-padding);
708
758
  }
709
- .bp_base_button_module_button--04b55.bp_base_button_module_small--04b55.bp_base_button_module_isIconButton--04b55{
759
+ .bp_base_button_module_button--31640.bp_base_button_module_small--31640.bp_base_button_module_isIconButton--31640{
710
760
  height:var(--icon-button-small-height);
711
761
  min-height:unset;
712
762
  padding:var(--icon-button-small-padding);
713
763
  width:var(--icon-button-small-width);
714
764
  }
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{
765
+ .bp_base_button_module_button--31640.bp_base_button_module_small--31640.bp_base_button_module_isTextWithIconEndButton--31640,.bp_base_button_module_button--31640.bp_base_button_module_small--31640.bp_base_button_module_isTextWithIconStartButton--31640,.bp_base_button_module_button--31640.bp_base_button_module_small--31640.bp_base_button_module_isTextWithStartAndEndIconButton--31640{
716
766
  padding:var(--button-small-padding);
717
767
  }
718
- .bp_base_button_module_button--04b55.bp_base_button_module_large--04b55{
768
+ .bp_base_button_module_button--31640.bp_base_button_module_quaternary--31640.bp_base_button_module_x-small--31640{
769
+ gap:var(--button-x-small-gap);
770
+ min-height:var(--button-x-small-min-height);
771
+ padding:var(--button-x-small-padding);
772
+ }
773
+ .bp_base_button_module_button--31640.bp_base_button_module_quaternary--31640.bp_base_button_module_x-small--31640.bp_base_button_module_isIconButton--31640{
774
+ height:var(--icon-button-x-small-height);
775
+ min-height:unset;
776
+ padding:var(--icon-button-x-small-padding);
777
+ width:var(--icon-button-x-small-width);
778
+ }
779
+ .bp_base_button_module_button--31640.bp_base_button_module_quaternary--31640.bp_base_button_module_x-small--31640.bp_base_button_module_isTextWithIconEndButton--31640,.bp_base_button_module_button--31640.bp_base_button_module_quaternary--31640.bp_base_button_module_x-small--31640.bp_base_button_module_isTextWithIconStartButton--31640,.bp_base_button_module_button--31640.bp_base_button_module_quaternary--31640.bp_base_button_module_x-small--31640.bp_base_button_module_isTextWithStartAndEndIconButton--31640{
780
+ padding:var(--button-x-small-padding);
781
+ }
782
+ .bp_base_button_module_button--31640.bp_base_button_module_large--31640{
719
783
  font-size:var(--button-large-font-size);
720
784
  gap:var(--button-large-gap);
721
785
  line-height:var(--button-large-line-height);
722
786
  min-height:var(--button-large-min-height);
723
787
  padding:var(--button-large-padding);
724
788
  }
725
- .bp_base_button_module_button--04b55.bp_base_button_module_large--04b55.bp_base_button_module_isIconButton--04b55{
789
+ .bp_base_button_module_button--31640.bp_base_button_module_large--31640.bp_base_button_module_isIconButton--31640{
726
790
  height:var(--icon-button-large-height);
727
791
  padding:var(--icon-button-large-padding);
728
792
  width:var(--icon-button-large-width);
729
793
  }
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{
794
+ .bp_base_button_module_button--31640.bp_base_button_module_large--31640.bp_base_button_module_isTextWithIconEndButton--31640,.bp_base_button_module_button--31640.bp_base_button_module_large--31640.bp_base_button_module_isTextWithIconStartButton--31640,.bp_base_button_module_button--31640.bp_base_button_module_large--31640.bp_base_button_module_isTextWithStartAndEndIconButton--31640{
731
795
  padding:var(--button-large-padding);
732
796
  }
733
- .bp_base_button_module_button--04b55.bp_base_button_module_hide--04b55{
797
+ .bp_base_button_module_button--31640.bp_base_button_module_hide--31640{
734
798
  pointer-events:none;
735
799
  position:relative;
736
800
  }
737
- .bp_base_button_module_button--04b55.bp_base_button_module_hide--04b55 span{
801
+ .bp_base_button_module_button--31640.bp_base_button_module_hide--31640 span{
738
802
  color:#0000;
739
803
  opacity:0;
740
804
  }
package/dist/lib-esm/primitives/base-button/base-button.js CHANGED
@@ -34,6 +34,7 @@ const BaseButton = /*#__PURE__*/forwardRef((props, forwardedRef) => {
34
34
  'aria-label': ariaLabel,
35
35
  ...rest
36
36
  } = getButtonOptions(props);
37
+ const effectiveSize = size === 'x-small' && variant !== 'quaternary' ? 'small' : size;
37
38
  const {
38
39
  enableModernizedComponents
39
40
  } = useBlueprintModernization();
@@ -46,15 +47,15 @@ const BaseButton = /*#__PURE__*/forwardRef((props, forwardedRef) => {
46
47
  const context = useMemo(() => ({
47
48
  ariaLabel,
48
49
  loading,
49
- size,
50
+ size: effectiveSize,
50
51
  variant,
51
52
  buttonType
52
- }), [ariaLabel, loading, size, variant, buttonType]);
53
+ }), [ariaLabel, loading, effectiveSize, variant, buttonType]);
53
54
  return jsx(Button, {
54
55
  ...rest,
55
56
  ref: useForkRef(ref, forwardedRef),
56
57
  "aria-label": loading ? undefined : ariaLabel,
57
- className: getButtonClassName(variant, size, buttonType, loading, className),
58
+ className: getButtonClassName(variant, effectiveSize, buttonType, loading, className),
58
59
  "data-modern": enableModernizedComponents ? 'true' : 'false',
59
60
  "data-bp-animated": isAnimationEnabled ? 'true' : 'false',
60
61
  children: jsxs(BaseButtonContext.Provider, {
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--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"};
2
+ var styles = {"button":"bp_base_button_module_button--31640","primary":"bp_base_button_module_primary--31640","secondary":"bp_base_button_module_secondary--31640","tertiary":"bp_base_button_module_tertiary--31640","quaternary":"bp_base_button_module_quaternary--31640","tertiary-destructive":"bp_base_button_module_tertiary-destructive--31640","destructive":"bp_base_button_module_destructive--31640","outline":"bp_base_button_module_outline--31640","small":"bp_base_button_module_small--31640","isIconButton":"bp_base_button_module_isIconButton--31640","isTextWithIconEndButton":"bp_base_button_module_isTextWithIconEndButton--31640","isTextWithIconStartButton":"bp_base_button_module_isTextWithIconStartButton--31640","isTextWithStartAndEndIconButton":"bp_base_button_module_isTextWithStartAndEndIconButton--31640","x-small":"bp_base_button_module_x-small--31640","large":"bp_base_button_module_large--31640","icon":"bp_base_button_module_icon--31640","hide":"bp_base_button_module_hide--31640"};
3
3
 
4
4
  export { styles as default };
package/dist/lib-esm/primitives/base-button/types.d.ts CHANGED
@@ -10,8 +10,13 @@ export interface Loading {
10
10
  export interface BaseButtonInterface extends AriakitButtonProps {
11
11
  /** The visual style of the button. */
12
12
  variant?: 'primary' | 'secondary' | 'tertiary' | 'tertiary-destructive' | 'destructive' | 'quaternary' | 'outline';
13
- /** The size of the button. */
14
- size?: 'small' | 'large';
13
+ /**
14
+ * The size of the button.
15
+ *
16
+ * Note: `'x-small'` is only valid with `variant='quaternary'`. When used with any other
17
+ * variant, BaseButton falls back to `'small'`.
18
+ */
19
+ size?: 'x-small' | 'small' | 'large';
15
20
  }
16
21
  export type BaseButtonProps = BaseButtonInterface & RequireAllOrNone<Loading, keyof Loading>;
17
22
  export type BaseButtonPropsAll = BaseButtonInterface & Required<Loading>;
package/dist/lib-esm/primitives/base-button/utils.js CHANGED
@@ -1,4 +1,4 @@
1
- import { IconIconOnLight, TextCtaLinkSecondary, IconIconOnDark, TextTextDestructiveOnLight, TextCtaLink, bpSize050, bpSize040, Size5, Size4, Size3 } from '@box/blueprint-web-assets/tokens/tokens';
1
+ import { IconIconOnLight, TextCtaLinkSecondary, IconIconOnDark, TextTextDestructiveOnLight, TextCtaLink, bpSize040, Size4, bpSize050, Size5, Size3 } from '@box/blueprint-web-assets/tokens/tokens';
2
2
  import { Children, isValidElement } from 'react';
3
3
 
4
4
  function getButtonTypeFromChildren(children, baseButtonIcon, baseButtonLabel) {
@@ -22,8 +22,11 @@ function getButtonTypeFromChildren(children, baseButtonIcon, baseButtonLabel) {
22
22
  }
23
23
  const getIconSize = (buttonSize, isIconButton, enableModernizedComponents = false) => {
24
24
  const isLarge = buttonSize === 'large';
25
+ const isXSmall = buttonSize === 'x-small';
25
26
  let size;
26
- if (enableModernizedComponents && isIconButton) {
27
+ if (isXSmall) {
28
+ size = enableModernizedComponents ? bpSize040 : Size4;
29
+ } else if (enableModernizedComponents && isIconButton) {
27
30
  size = isLarge ? bpSize050 : bpSize040;
28
31
  } else if (enableModernizedComponents && !isIconButton) {
29
32
  size = isLarge ? bpSize050 : bpSize040;
package/dist/lib-esm/trigger-button/trigger-button.d.ts CHANGED
@@ -1,5 +1,5 @@
1
1
  import { type BaseButtonIconProps, type BaseButtonProps } from '../primitives/base-button';
2
- export type TriggerButtonSize = 'extraSmall' | NonNullable<BaseButtonProps['size']>;
2
+ export type TriggerButtonSize = 'extraSmall' | Exclude<NonNullable<BaseButtonProps['size']>, 'x-small'>;
3
3
  export type TriggerButtonProps = Omit<BaseButtonProps, 'size'> & {
4
4
  /** Trigger button label */
5
5
  label?: string;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@box/blueprint-web",
3
- "version": "14.34.1",
3
+ "version": "14.35.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.21",
49
49
  "@ariakit/react-core": "0.4.21",
50
- "@box/blueprint-web-assets": "^4.120.0",
50
+ "@box/blueprint-web-assets": "^4.120.1",
51
51
  "@internationalized/date": "^3.12.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.19.15",
80
+ "@box/storybook-utils": "^0.19.16",
81
81
  "@figma/code-connect": "1.4.4",
82
82
  "@types/react": "^18.0.0",
83
83
  "@types/react-dom": "^18.0.0",