@box/blueprint-web 14.34.1 → 14.36.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.
@@ -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
  }
@@ -13350,11 +13414,11 @@ div[data-radix-popper-content-wrapper]:has([role=menu]):has([data-state=open]):h
13350
13414
  .bp_time_picker_module_timePicker--41158 .bp_time_picker_module_inlineError--41158{
13351
13415
  margin-block-start:var(--time-picker-inline-error-margin-top);
13352
13416
  }
13353
- .bp_toolbar_module_dropdownIndicator--5aae4.bp_toolbar_module_invertCaret--5aae4{
13417
+ .bp_toolbar_module_dropdownIndicator--c54d6.bp_toolbar_module_invertCaret--c54d6{
13354
13418
  transform:rotate(.5turn);
13355
13419
  }
13356
13420
 
13357
- .bp_toolbar_module_toolbarRoot--5aae4[data-modern=false]{
13421
+ .bp_toolbar_module_toolbarRoot--c54d6[data-modern=false]{
13358
13422
  --toolbar-root-gap:var(--space-1);
13359
13423
  --toolbar-root-padding:calc(var(--space-1) - var(--border-1));
13360
13424
  --toolbar-root-background:var(--surface-surface);
@@ -13368,9 +13432,13 @@ div[data-radix-popper-content-wrapper]:has([role=menu]):has([data-state=open]):h
13368
13432
  --toolbar-separator-height:var(--size-6);
13369
13433
  --toolbar-separator-background:var(--border-divider-border);
13370
13434
  --toolbar-separator-border-radius:var(--radius-2);
13435
+ --toolbar-link-color:var(--text-cta-link);
13436
+ --toolbar-link-hover-color:var(--text-cta-link-hover);
13437
+ --toolbar-link-padding-inline:var(--space-2);
13438
+ --toolbar-link-max-width:400px;
13371
13439
  }
13372
13440
 
13373
- .bp_toolbar_module_toolbarRoot--5aae4[data-modern=true]{
13441
+ .bp_toolbar_module_toolbarRoot--c54d6[data-modern=true]{
13374
13442
  --box-shadow:0 4px 12px 0 #0000001a;
13375
13443
  --toolbar-root-gap:var(--bp-space-010);
13376
13444
  --toolbar-root-padding:var(--bp-space-010);
@@ -13386,12 +13454,16 @@ div[data-radix-popper-content-wrapper]:has([role=menu]):has([data-state=open]):h
13386
13454
  --toolbar-separator-background:var(--bp-border-divider-border);
13387
13455
  --toolbar-separator-border-radius:var(--bp-radius-03);
13388
13456
  --toolbar-toggle-group-gap:var(--bp-space-010);
13457
+ --toolbar-link-color:var(--bp-text-cta-link);
13458
+ --toolbar-link-hover-color:var(--bp-text-cta-link-hover);
13459
+ --toolbar-link-padding-inline:var(--bp-space-020);
13460
+ --toolbar-link-max-width:400px;
13389
13461
  }
13390
- .bp_toolbar_module_toolbarRoot--5aae4[data-modern=true].bp_toolbar_module_ScrollableToolbarWithReducedPadding--5aae4{
13462
+ .bp_toolbar_module_toolbarRoot--c54d6[data-modern=true].bp_toolbar_module_ScrollableToolbarWithReducedPadding--c54d6{
13391
13463
  --toolbar-root-padding:0;
13392
13464
  }
13393
13465
 
13394
- .bp_toolbar_module_toolbarItem--5aae4[data-modern=false]{
13466
+ .bp_toolbar_module_toolbarItem--c54d6[data-modern=false]{
13395
13467
  --toolbar-item-min-width:var(--size-8);
13396
13468
  --toolbar-item-min-height:var(--size-8);
13397
13469
  --toolbar-item-text-indent:var(--space-1);
@@ -13402,7 +13474,7 @@ div[data-radix-popper-content-wrapper]:has([role=menu]):has([data-state=open]):h
13402
13474
  --toolbar-item-off-hover-background:var(--surface-toggle-surface-hover);
13403
13475
  --toolbar-item-off-hover-border:var(--border-1) solid var(--surface-toggle-surface-hover);
13404
13476
  --toolbar-item-focus-outline:var(--outline-focus-on-light);
13405
- --toolbar-item-disabled-opacity:.3;
13477
+ --toolbar-item-disabled-opacity:0.3;
13406
13478
  --toolbar-toggle-on-pressed-border:none;
13407
13479
  --toolbar-toggle-on-pressed-background:var(--surface-toggle-surface-pressed);
13408
13480
  --toolbar-toggle-icon-fill:var(--icon-icon-on-dark);
@@ -13425,9 +13497,9 @@ div[data-radix-popper-content-wrapper]:has([role=menu]):has([data-state=open]):h
13425
13497
  --toolbar-text-toggle-checked-hover-border-color:var(--border-toggletext-border-on-hover);
13426
13498
  --toolbar-text-toggle-checked-active-background:var(--surface-toggletext-surface-on-pressed);
13427
13499
  --toolbar-text-toggle-checked-active-border-color:var(--border-toggletext-border-on-pressed);
13428
- --trigger-button-hover-opacity:.7;
13500
+ --trigger-button-hover-opacity:0.7;
13429
13501
  }
13430
- .bp_toolbar_module_toolbarItem--5aae4[data-modern=false].bp_toolbar_module_toolbarButton--5aae4,.bp_toolbar_module_toolbarItem--5aae4[data-modern=false].bp_toolbar_module_toolbarTextToggleItem--5aae4{
13502
+ .bp_toolbar_module_toolbarItem--c54d6[data-modern=false].bp_toolbar_module_toolbarButton--c54d6,.bp_toolbar_module_toolbarItem--c54d6[data-modern=false].bp_toolbar_module_toolbarTextToggleItem--c54d6{
13431
13503
  font-family:var(--body-default-font-family);
13432
13504
  font-size:var(--body-default-font-size);
13433
13505
  font-weight:var(--body-default-font-weight);
@@ -13436,8 +13508,17 @@ div[data-radix-popper-content-wrapper]:has([role=menu]):has([data-state=open]):h
13436
13508
  text-decoration:var(--body-default-text-decoration);
13437
13509
  text-transform:var(--body-default-text-case);
13438
13510
  }
13511
+ .bp_toolbar_module_toolbarItem--c54d6[data-modern=false].bp_toolbar_module_toolbarLink--c54d6{
13512
+ font-family:var(--body-default-bold-font-family);
13513
+ font-size:var(--body-default-bold-font-size);
13514
+ font-weight:var(--body-default-bold-font-weight);
13515
+ letter-spacing:var(--body-default-bold-letter-spacing);
13516
+ line-height:var(--body-default-bold-line-height);
13517
+ text-decoration:var(--body-default-bold-text-decoration);
13518
+ text-transform:var(--body-default-bold-text-case);
13519
+ }
13439
13520
 
13440
- .bp_toolbar_module_toolbarItem--5aae4[data-modern=true]{
13521
+ .bp_toolbar_module_toolbarItem--c54d6[data-modern=true]{
13441
13522
  --toolbar-item-min-width:var(--bp-size-080);
13442
13523
  --toolbar-item-min-height:var(--bp-size-080);
13443
13524
  --toolbar-item-text-indent:var(--bp-space-010);
@@ -13448,7 +13529,7 @@ div[data-radix-popper-content-wrapper]:has([role=menu]):has([data-state=open]):h
13448
13529
  --toolbar-item-off-hover-background:var(--bp-surface-toggle-surface-hover);
13449
13530
  --toolbar-item-off-hover-border:var(--bp-border-01) solid var(--bp-surface-toggle-surface-hover);
13450
13531
  --toolbar-item-focus-outline:var(--bp-outline-focus-on-light);
13451
- --toolbar-item-disabled-opacity:.3;
13532
+ --toolbar-item-disabled-opacity:0.3;
13452
13533
  --toolbar-toggle-on-pressed-border:var(--bp-border-01) solid var(--bp-border-toggle-border-on);
13453
13534
  --toolbar-toggle-on-pressed-background:var(--bp-surface-toggle-surface-on);
13454
13535
  --toolbar-toggle-icon-fill:var(--bp-icon-icon-blue);
@@ -13471,30 +13552,30 @@ div[data-radix-popper-content-wrapper]:has([role=menu]):has([data-state=open]):h
13471
13552
  --toolbar-text-toggle-checked-hover-border-color:var(--bp-border-toggle-text-border-on-hover);
13472
13553
  --toolbar-text-toggle-checked-active-background:var(--bp-surface-toggle-text-surface-on-pressed);
13473
13554
  --toolbar-text-toggle-checked-active-border-color:var(--bp-border-toggle-text-border-on-pressed);
13474
- --trigger-button-hover-opacity:.65;
13475
- --trigger-button-active-opacity:.8;
13555
+ --trigger-button-hover-opacity:0.65;
13556
+ --trigger-button-active-opacity:0.8;
13476
13557
  }
13477
- .bp_toolbar_module_toolbarItem--5aae4[data-modern=true]:active,.bp_toolbar_module_toolbarItem--5aae4[data-modern=true][data-active]{
13558
+ .bp_toolbar_module_toolbarItem--c54d6[data-modern=true]:active,.bp_toolbar_module_toolbarItem--c54d6[data-modern=true][data-active]{
13478
13559
  background:var(--bp-surface-toggle-surface-off-pressed);
13479
13560
  border:var(--bp-border-01) solid var(--bp-border-toggle-border-off);
13480
13561
  }
13481
- .bp_toolbar_module_toolbarItem--5aae4[data-modern=true][data-state=on]:active,.bp_toolbar_module_toolbarItem--5aae4[data-modern=true][data-state=on][data-active]{
13562
+ .bp_toolbar_module_toolbarItem--c54d6[data-modern=true][data-state=on]:active,.bp_toolbar_module_toolbarItem--c54d6[data-modern=true][data-state=on][data-active]{
13482
13563
  background:var(--bp-surface-toggle-surface-on-pressed);
13483
13564
  border:var(--bp-border-01) solid var(--bp-border-toggle-border-on);
13484
13565
  }
13485
- .bp_toolbar_module_toolbarItem--5aae4[data-modern=true][data-state=on]:hover .bp_toolbar_module_dropdownIndicator--5aae4{
13566
+ .bp_toolbar_module_toolbarItem--c54d6[data-modern=true][data-state=on]:hover .bp_toolbar_module_dropdownIndicator--c54d6{
13486
13567
  transform:rotate(1turn);
13487
13568
  }
13488
- .bp_toolbar_module_toolbarItem--5aae4[data-modern=true].bp_toolbar_module_triggerButtonSelectedWithColor--5aae4:active,.bp_toolbar_module_toolbarItem--5aae4[data-modern=true].bp_toolbar_module_triggerButtonSelectedWithColor--5aae4[data-active]{
13569
+ .bp_toolbar_module_toolbarItem--c54d6[data-modern=true].bp_toolbar_module_triggerButtonSelectedWithColor--c54d6:active,.bp_toolbar_module_toolbarItem--c54d6[data-modern=true].bp_toolbar_module_triggerButtonSelectedWithColor--c54d6[data-active]{
13489
13570
  background-color:var(--toolbar-button-color);
13490
13571
  opacity:var(--trigger-button-active-opacity);
13491
13572
  }
13492
- .bp_toolbar_module_toolbarItem--5aae4[data-modern=true].bp_toolbar_module_triggerButtonSelectedWithColor--5aae4[data-state=on]:hover{
13573
+ .bp_toolbar_module_toolbarItem--c54d6[data-modern=true].bp_toolbar_module_triggerButtonSelectedWithColor--c54d6[data-state=on]:hover{
13493
13574
  background-color:var(--toolbar-button-color);
13494
13575
  border-color:var(--toolbar-button-color);
13495
13576
  opacity:var(--trigger-button-hover-opacity);
13496
13577
  }
13497
- .bp_toolbar_module_toolbarItem--5aae4[data-modern=true].bp_toolbar_module_toolbarButton--5aae4,.bp_toolbar_module_toolbarItem--5aae4[data-modern=true].bp_toolbar_module_toolbarTextToggleItem--5aae4{
13578
+ .bp_toolbar_module_toolbarItem--c54d6[data-modern=true].bp_toolbar_module_toolbarButton--c54d6,.bp_toolbar_module_toolbarItem--c54d6[data-modern=true].bp_toolbar_module_toolbarTextToggleItem--c54d6{
13498
13579
  font-family:var(--bp-font-font-family), -apple-system, BlinkMacSystemFont, "San Francisco", "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
13499
13580
  font-size:var(--bp-font-size-07);
13500
13581
  font-style:normal;
@@ -13502,16 +13583,24 @@ div[data-radix-popper-content-wrapper]:has([role=menu]):has([data-state=open]):h
13502
13583
  letter-spacing:var(--bp-font-letter-spacing-01);
13503
13584
  line-height:var(--bp-font-line-height-05);
13504
13585
  }
13586
+ .bp_toolbar_module_toolbarItem--c54d6[data-modern=true].bp_toolbar_module_toolbarLink--c54d6{
13587
+ font-family:var(--bp-font-font-family), -apple-system, BlinkMacSystemFont, "San Francisco", "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
13588
+ font-size:var(--bp-font-size-05);
13589
+ font-style:normal;
13590
+ font-weight:var(--bp-font-weight-bold);
13591
+ letter-spacing:var(--bp-font-letter-spacing-01);
13592
+ line-height:var(--bp-font-line-height-04);
13593
+ }
13505
13594
 
13506
- .bp_toolbar_module_toggleGroup--5aae4[data-modern=false]{
13595
+ .bp_toolbar_module_toggleGroup--c54d6[data-modern=false]{
13507
13596
  --toolbar-toggle-group-gap:var(--space-1);
13508
13597
  }
13509
13598
 
13510
- .bp_toolbar_module_toggleGroup--5aae4[data-modern=true]{
13599
+ .bp_toolbar_module_toggleGroup--c54d6[data-modern=true]{
13511
13600
  --toolbar-toggle-group-gap:var(--bp-space-010);
13512
13601
  }
13513
13602
 
13514
- .bp_toolbar_module_toolbarRoot--5aae4{
13603
+ .bp_toolbar_module_toolbarRoot--c54d6{
13515
13604
  align-items:center;
13516
13605
  background:var(--toolbar-root-background);
13517
13606
  border:var(--toolbar-root-border);
@@ -13522,23 +13611,23 @@ div[data-radix-popper-content-wrapper]:has([role=menu]):has([data-state=open]):h
13522
13611
  padding:var(--toolbar-root-padding);
13523
13612
  }
13524
13613
 
13525
- .bp_toolbar_module_scrollButtonWrapper--5aae4{
13614
+ .bp_toolbar_module_scrollButtonWrapper--c54d6{
13526
13615
  align-items:center;
13527
13616
  display:flex;
13528
13617
  gap:var(--toolbar-scroll-button-gap);
13529
13618
  }
13530
- .bp_toolbar_module_scrollButtonWrapper--5aae4.bp_toolbar_module_hidden--5aae4{
13619
+ .bp_toolbar_module_scrollButtonWrapper--c54d6.bp_toolbar_module_hidden--c54d6{
13531
13620
  display:none;
13532
13621
  }
13533
13622
 
13534
- .bp_toolbar_module_scrollableChildrenWrapper--5aae4{
13623
+ .bp_toolbar_module_scrollableChildrenWrapper--c54d6{
13535
13624
  -ms-overflow-style:none;
13536
13625
  scrollbar-width:none;
13537
13626
  }
13538
- .bp_toolbar_module_scrollableChildrenWrapper--5aae4::-webkit-scrollbar{
13627
+ .bp_toolbar_module_scrollableChildrenWrapper--c54d6::-webkit-scrollbar{
13539
13628
  display:none;
13540
13629
  }
13541
- .bp_toolbar_module_scrollableChildrenWrapper--5aae4{
13630
+ .bp_toolbar_module_scrollableChildrenWrapper--c54d6{
13542
13631
  align-items:center;
13543
13632
  display:flex;
13544
13633
  flex-grow:1;
@@ -13549,23 +13638,23 @@ div[data-radix-popper-content-wrapper]:has([role=menu]):has([data-state=open]):h
13549
13638
  scroll-padding:var(--toolbar-scrollable-children-scroll-padding);
13550
13639
  white-space:nowrap;
13551
13640
  }
13552
- .bp_toolbar_module_scrollableChildrenWrapper--5aae4 > *{
13641
+ .bp_toolbar_module_scrollableChildrenWrapper--c54d6 > *{
13553
13642
  flex:none;
13554
13643
  }
13555
13644
 
13556
- .bp_toolbar_module_separator--5aae4{
13645
+ .bp_toolbar_module_separator--c54d6{
13557
13646
  background-color:var(--toolbar-separator-background);
13558
13647
  border-radius:var(--toolbar-separator-border-radius);
13559
13648
  height:var(--toolbar-separator-height);
13560
13649
  width:1px;
13561
13650
  }
13562
13651
 
13563
- .bp_toolbar_module_toggleGroup--5aae4{
13652
+ .bp_toolbar_module_toggleGroup--c54d6{
13564
13653
  display:flex;
13565
13654
  gap:var(--toolbar-toggle-group-gap);
13566
13655
  }
13567
13656
 
13568
- .bp_toolbar_module_toolbarItem--5aae4{
13657
+ .bp_toolbar_module_toolbarItem--c54d6{
13569
13658
  align-items:center;
13570
13659
  background:var(--toolbar-button-color, var(--toolbar-item-background));
13571
13660
  border:var(--toolbar-item-border);
@@ -13583,41 +13672,41 @@ div[data-radix-popper-content-wrapper]:has([role=menu]):has([data-state=open]):h
13583
13672
  -webkit-user-select:none;
13584
13673
  user-select:none;
13585
13674
  }
13586
- .bp_toolbar_module_toolbarItem--5aae4[data-disabled]{
13675
+ .bp_toolbar_module_toolbarItem--c54d6[data-disabled]{
13587
13676
  background:var(--toolbar-item-background);
13588
13677
  opacity:var(--toolbar-item-disabled-opacity);
13589
13678
  pointer-events:none;
13590
13679
  }
13591
- .bp_toolbar_module_toolbarItem--5aae4:not([data-disabled]):focus-visible{
13680
+ .bp_toolbar_module_toolbarItem--c54d6:not([data-disabled]):focus-visible{
13592
13681
  box-shadow:0 0 0 var(--border-1, 1px) var(--background-background), 0 0 0 var(--border-3) var(--toolbar-item-focus-outline);
13593
13682
  }
13594
- .bp_toolbar_module_toolbarItem--5aae4:not([data-disabled]):hover{
13683
+ .bp_toolbar_module_toolbarItem--c54d6:not([data-disabled]):hover{
13595
13684
  background:var(--toolbar-button-color, var(--toolbar-item-off-hover-background));
13596
13685
  border:var(--toolbar-item-off-hover-border);
13597
13686
  }
13598
13687
 
13599
- .bp_toolbar_module_toolbarToggle--5aae4[data-state=on]{
13688
+ .bp_toolbar_module_toolbarToggle--c54d6[data-state=on]{
13600
13689
  background:var(--toolbar-toggle-on-pressed-background);
13601
13690
  border:var(--toolbar-toggle-on-pressed-border);
13602
13691
  }
13603
- .bp_toolbar_module_toolbarToggle--5aae4[data-state=on] svg *{
13692
+ .bp_toolbar_module_toolbarToggle--c54d6[data-state=on] svg *{
13604
13693
  fill:var(--toolbar-toggle-icon-fill);
13605
13694
  }
13606
- .bp_toolbar_module_toolbarToggle--5aae4[data-state=on]:not([data-disabled]):hover{
13695
+ .bp_toolbar_module_toolbarToggle--c54d6[data-state=on]:not([data-disabled]):hover{
13607
13696
  background:var(--toolbar-toggle-on-hover-background);
13608
13697
  border:var(--toolbar-toggle-on-hover-border);
13609
13698
  }
13610
13699
 
13611
- .bp_toolbar_module_triggerButtonSelectedWithColor--5aae4[data-state=on] .bp_toolbar_module_dropdownIndicator--5aae4 path{
13700
+ .bp_toolbar_module_triggerButtonSelectedWithColor--c54d6[data-state=on] .bp_toolbar_module_dropdownIndicator--c54d6 path{
13612
13701
  fill:var(--icon-icon-on-light);
13613
13702
  }
13614
- .bp_toolbar_module_triggerButtonSelectedWithColor--5aae4[data-state=on]:hover{
13703
+ .bp_toolbar_module_triggerButtonSelectedWithColor--c54d6[data-state=on]:hover{
13615
13704
  background-color:var(--toolbar-button-color);
13616
13705
  border-color:var(--toolbar-button-color);
13617
13706
  opacity:var(--trigger-button-hover-opacity);
13618
13707
  }
13619
13708
 
13620
- .bp_toolbar_module_toolbarIcon--5aae4{
13709
+ .bp_toolbar_module_toolbarIcon--c54d6{
13621
13710
  align-items:center;
13622
13711
  display:flex;
13623
13712
  height:var(--toolbar-icon-height);
@@ -13625,31 +13714,182 @@ div[data-radix-popper-content-wrapper]:has([role=menu]):has([data-state=open]):h
13625
13714
  width:var(--toolbar-icon-width);
13626
13715
  }
13627
13716
 
13628
- .bp_toolbar_module_toolbarTextToggleItem--5aae4{
13717
+ .bp_toolbar_module_toolbarLink--c54d6{
13718
+ color:var(--toolbar-link-color);
13719
+ max-width:var(--toolbar-link-max-width);
13720
+ padding-inline:var(--toolbar-link-padding-inline);
13721
+ text-decoration:none;
13722
+ text-indent:unset;
13723
+ }
13724
+
13725
+ .bp_toolbar_module_toolbarLinkText--c54d6{
13726
+ display:block;
13727
+ min-width:0;
13728
+ overflow:hidden;
13729
+ text-overflow:ellipsis;
13730
+ white-space:nowrap;
13731
+ }
13732
+
13733
+ .bp_toolbar_module_toolbarInputContainer--c54d6{
13734
+ align-items:center;
13735
+ display:flex;
13736
+ flex:1 1 0;
13737
+ min-width:0;
13738
+ position:relative;
13739
+ }
13740
+
13741
+ .bp_toolbar_module_toolbarInputContainer--c54d6:has(.bp_toolbar_module_toolbarInput--c54d6[data-modern=false]){
13742
+ --toolbar-input-height:var(--size-8);
13743
+ --toolbar-input-padding-block:var(--space-2);
13744
+ --toolbar-input-padding-inline:var(--space-3);
13745
+ --toolbar-input-gap:var(--space-2);
13746
+ --toolbar-input-background:var(--surface-input-surface);
13747
+ --toolbar-input-border-width:var(--border-1);
13748
+ --toolbar-input-border-color:var(--border-input-border);
13749
+ --toolbar-input-border-color-focus:var(--border-input-border-focus);
13750
+ --toolbar-input-border-radius:var(--radius-4);
13751
+ --toolbar-input-box-shadow:var(--innershadow-1);
13752
+ --toolbar-input-color:var(--text-text-on-light);
13753
+ --toolbar-input-placeholder-color:var(--text-text-on-light-secondary);
13754
+ --toolbar-input-focus-border-width:var(--border-2);
13755
+ --toolbar-input-disabled-color:var(--text-text-on-light);
13756
+ --toolbar-input-disabled-background:var(--surface-input-surface);
13757
+ --toolbar-input-disabled-border-color:var(--border-input-border);
13758
+ --toolbar-input-hover-border-color:var(--border-input-border-hover);
13759
+ --toolbar-input-error-border-color:var(--border-input-border-error);
13760
+ --toolbar-input-error-border-width:var(--border-2);
13761
+ --toolbar-input-icon-size:var(--size-5);
13762
+ --toolbar-input-icon-padding:var(--space-2);
13763
+ --toolbar-input-icon-end-pad:calc(var(--toolbar-input-padding-inline) + var(--toolbar-input-icon-size) + var(--toolbar-input-icon-padding));
13764
+ }
13765
+
13766
+ .bp_toolbar_module_toolbarInputContainer--c54d6:has(.bp_toolbar_module_toolbarInput--c54d6[data-modern=true]){
13767
+ --toolbar-input-height:var(--bp-size-080);
13768
+ --toolbar-input-padding-block:var(--bp-space-020);
13769
+ --toolbar-input-padding-inline:var(--bp-space-030);
13770
+ --toolbar-input-gap:var(--bp-space-020);
13771
+ --toolbar-input-background:var(--bp-surface-input-surface);
13772
+ --toolbar-input-border-width:var(--bp-border-01);
13773
+ --toolbar-input-border-color:var(--bp-border-input-border);
13774
+ --toolbar-input-border-color-focus:var(--bp-border-input-border-focus);
13775
+ --toolbar-input-border-radius:var(--bp-radius-12);
13776
+ --toolbar-input-box-shadow:var(--innershadow-1);
13777
+ --toolbar-input-color:var(--bp-text-text-on-light);
13778
+ --toolbar-input-placeholder-color:var(--bp-text-text-on-light-secondary);
13779
+ --toolbar-input-focus-border-width:var(--bp-border-02);
13780
+ --toolbar-input-disabled-color:var(--bp-text-text-on-light);
13781
+ --toolbar-input-disabled-background:var(--bp-surface-input-surface);
13782
+ --toolbar-input-disabled-border-color:var(--bp-border-input-border);
13783
+ --toolbar-input-hover-border-color:var(--bp-border-input-border-hover);
13784
+ --toolbar-input-error-border-color:var(--bp-border-input-border-error);
13785
+ --toolbar-input-error-border-width:var(--bp-border-02);
13786
+ --toolbar-input-icon-size:var(--bp-size-050);
13787
+ --toolbar-input-icon-padding:var(--bp-space-020);
13788
+ --toolbar-input-icon-end-pad:calc(var(--toolbar-input-padding-inline) + var(--toolbar-input-icon-size) + var(--toolbar-input-icon-padding));
13789
+ }
13790
+
13791
+ .bp_toolbar_module_toolbarInput--c54d6{
13792
+ background:var(--toolbar-input-background);
13793
+ border:var(--toolbar-input-border-width) solid var(--toolbar-input-border-color);
13794
+ border-radius:var(--toolbar-input-border-radius);
13795
+ box-shadow:var(--toolbar-input-box-shadow);
13796
+ box-sizing:border-box;
13797
+ color:var(--toolbar-input-color);
13798
+ gap:var(--toolbar-input-gap);
13799
+ height:var(--toolbar-input-height);
13800
+ min-width:0;
13801
+ outline:none;
13802
+ padding-block:var(--toolbar-input-padding-block);
13803
+ padding-inline:var(--toolbar-input-padding-inline);
13804
+ width:100%;
13805
+ }
13806
+ .bp_toolbar_module_toolbarInput--c54d6[data-modern=false]{
13807
+ font-family:var(--body-default-font-family);
13808
+ font-size:var(--body-default-font-size);
13809
+ font-weight:var(--body-default-font-weight);
13810
+ letter-spacing:var(--body-default-letter-spacing);
13811
+ line-height:var(--body-default-line-height);
13812
+ text-decoration:var(--body-default-text-decoration);
13813
+ text-transform:var(--body-default-text-case);
13814
+ }
13815
+ .bp_toolbar_module_toolbarInput--c54d6[data-modern=true]{
13816
+ font-family:var(--bp-font-font-family), -apple-system, BlinkMacSystemFont, "San Francisco", "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
13817
+ font-size:var(--bp-font-size-07);
13818
+ font-style:normal;
13819
+ font-weight:var(--bp-font-weight-regular);
13820
+ letter-spacing:var(--bp-font-letter-spacing-01);
13821
+ line-height:var(--bp-font-line-height-05);
13822
+ }
13823
+ .bp_toolbar_module_toolbarInput--c54d6::placeholder{
13824
+ color:var(--toolbar-input-placeholder-color);
13825
+ opacity:1;
13826
+ }
13827
+ .bp_toolbar_module_toolbarInput--c54d6:focus-visible{
13828
+ --toolbar-input-border-offset:calc(var(--toolbar-input-focus-border-width) - var(--toolbar-input-border-width));
13829
+ border:var(--toolbar-input-focus-border-width) solid var(--toolbar-input-border-color-focus);
13830
+ padding-inline-start:calc(var(--toolbar-input-padding-inline) - var(--toolbar-input-border-offset));
13831
+ }
13832
+ .bp_toolbar_module_toolbarInput--c54d6:disabled{
13833
+ background:var(--toolbar-input-disabled-background);
13834
+ border-color:var(--toolbar-input-disabled-border-color);
13835
+ box-shadow:var(--toolbar-input-box-shadow);
13836
+ color:var(--toolbar-input-disabled-color);
13837
+ cursor:default;
13838
+ opacity:.5;
13839
+ }
13840
+ .bp_toolbar_module_toolbarInput--c54d6:has(+ .bp_toolbar_module_toolbarInputErrorIcon--c54d6){
13841
+ padding-inline-end:var(--toolbar-input-icon-end-pad);
13842
+ }
13843
+ .bp_toolbar_module_toolbarInput--c54d6:hover:not(:disabled, :focus-visible, .bp_toolbar_module_toolbarInputError--c54d6){
13844
+ border-color:var(--toolbar-input-hover-border-color);
13845
+ }
13846
+
13847
+ .bp_toolbar_module_toolbarInput--c54d6.bp_toolbar_module_toolbarInputError--c54d6{
13848
+ --toolbar-input-error-border-offset:calc(var(--toolbar-input-error-border-width) - var(--toolbar-input-border-width));
13849
+ border:var(--toolbar-input-error-border-width) solid var(--toolbar-input-error-border-color);
13850
+ padding-inline:calc(var(--toolbar-input-padding-inline) - var(--toolbar-input-error-border-offset)) calc(var(--toolbar-input-icon-end-pad) - var(--toolbar-input-error-border-offset));
13851
+ }
13852
+
13853
+ .bp_toolbar_module_toolbarInputErrorIcon--c54d6{
13854
+ color:var(--toolbar-input-error-border-color);
13855
+ height:var(--toolbar-input-icon-size);
13856
+ inset-inline-end:var(--toolbar-input-icon-padding);
13857
+ pointer-events:none;
13858
+ position:absolute;
13859
+ top:50%;
13860
+ transform:translateY(-50%);
13861
+ width:var(--toolbar-input-icon-size);
13862
+ }
13863
+
13864
+ .bp_toolbar_module_toolbarInputErrorIconHidden--c54d6{
13865
+ visibility:hidden;
13866
+ }
13867
+
13868
+ .bp_toolbar_module_toolbarTextToggleItem--c54d6{
13629
13869
  border:var(--toolbar-text-toggle-off-border);
13630
13870
  color:var(--toolbar-text-toggle-color);
13631
13871
  padding-inline:var(--toolbar-text-toggle-padding-inline);
13632
13872
  text-indent:unset;
13633
13873
  white-space:nowrap;
13634
13874
  }
13635
- .bp_toolbar_module_toolbarTextToggleItem--5aae4:hover{
13875
+ .bp_toolbar_module_toolbarTextToggleItem--c54d6:hover{
13636
13876
  background:var(--toolbar-text-toggle-hover-background);
13637
13877
  border-color:var(--toolbar-text-toggle-hover-border-color);
13638
13878
  }
13639
- .bp_toolbar_module_toolbarTextToggleItem--5aae4:active{
13879
+ .bp_toolbar_module_toolbarTextToggleItem--c54d6:active{
13640
13880
  background:var(--toolbar-text-toggle-active-background);
13641
13881
  border-color:var(--toolbar-text-toggle-active-border-color);
13642
13882
  }
13643
- .bp_toolbar_module_toolbarTextToggleItem--5aae4[aria-checked=true]{
13883
+ .bp_toolbar_module_toolbarTextToggleItem--c54d6[aria-checked=true]{
13644
13884
  background:var(--toolbar-text-toggle-checked-background);
13645
13885
  border:var(--toolbar-text-toggle-checked-border);
13646
13886
  color:var(--toolbar-text-toggle-checked-color);
13647
13887
  }
13648
- .bp_toolbar_module_toolbarTextToggleItem--5aae4[aria-checked=true]:hover{
13888
+ .bp_toolbar_module_toolbarTextToggleItem--c54d6[aria-checked=true]:hover{
13649
13889
  background:var(--toolbar-text-toggle-checked-hover-background);
13650
13890
  border-color:var(--toolbar-text-toggle-checked-hover-border-color);
13651
13891
  }
13652
- .bp_toolbar_module_toolbarTextToggleItem--5aae4[aria-checked=true]:active{
13892
+ .bp_toolbar_module_toolbarTextToggleItem--c54d6[aria-checked=true]:active{
13653
13893
  background:var(--toolbar-text-toggle-checked-active-background);
13654
13894
  border-color:var(--toolbar-text-toggle-checked-active-border-color);
13655
13895
  }
@@ -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, {
@@ -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 };
@@ -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>;
@@ -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;
@@ -1,4 +1,4 @@
1
- export { type ToolbarButtonProps, type ToolbarIconProps, type ToolbarProps, type ToolbarSeparatorProps, type ToolbarToggleGroupProps, type ToolbarToggleItemProps, type ToolbarTriggerButtonProps, type ToolbarTextToggleItemProps, } from './types';
1
+ export { type ToolbarButtonProps, type ToolbarIconProps, type ToolbarInputProps, type ToolbarLinkProps, type ToolbarProps, type ToolbarSeparatorProps, type ToolbarToggleGroupProps, type ToolbarToggleItemProps, type ToolbarTriggerButtonProps, type ToolbarTextToggleItemProps, } from './types';
2
2
  /**
3
3
  * A container for grouping a set of controls, such as buttons, toggle groups or dropdowns.
4
4
  * @example
@@ -9,6 +9,9 @@ export { type ToolbarButtonProps, type ToolbarIconProps, type ToolbarProps, type
9
9
  * </Toolbar.ToggleGroup>
10
10
  * <Toolbar.Separator />
11
11
  *
12
+ * <Toolbar.Link href="https://box.com">box.com</Toolbar.Link>
13
+ * <Toolbar.Separator />
14
+ *
12
15
  * <Toolbar.Button>
13
16
  * share
14
17
  * </Toolbar.Button>
@@ -48,10 +51,18 @@ export declare const Toolbar: {
48
51
  * A button item.
49
52
  */
50
53
  Button: import("react").ForwardRefExoticComponent<import("./types").ToolbarButtonProps & import("react").RefAttributes<HTMLButtonElement>>;
54
+ /**
55
+ * A text input field.
56
+ */
57
+ Input: import("react").ForwardRefExoticComponent<import("./types").ToolbarInputProps & import("react").RefAttributes<HTMLInputElement>>;
51
58
  /**
52
59
  * Component used to visually separate options in the Toolbar.
53
60
  */
54
61
  Separator: import("react").ForwardRefExoticComponent<import("@radix-ui/react-toolbar").ToolbarSeparatorProps & import("react").RefAttributes<HTMLDivElement>>;
62
+ /**
63
+ * A link item.
64
+ */
65
+ Link: import("react").ForwardRefExoticComponent<import("./types").ToolbarLinkProps & import("react").RefAttributes<HTMLAnchorElement>>;
55
66
  /**
56
67
  * Caret icon indicating dropdown.
57
68
  */
@@ -1,6 +1,8 @@
1
1
  import { ToolbarButton } from './toolbar-button.js';
2
2
  import { ToolbarDropdownIndicator } from './toolbar-dropdown-indicator.js';
3
3
  import { ToolbarIcon } from './toolbar-icon.js';
4
+ import { ToolbarInput } from './toolbar-input.js';
5
+ import { ToolbarLink } from './toolbar-link.js';
4
6
  import { ToolbarRoot } from './toolbar-root.js';
5
7
  import { ToolbarSeparator } from './toolbar-separator.js';
6
8
  import { ToolbarToggleGroup } from './toolbar-toggle-group.js';
@@ -18,6 +20,9 @@ import { ToolbarTextToggleItem } from './toolbar-text-toggle-item.js';
18
20
  * </Toolbar.ToggleGroup>
19
21
  * <Toolbar.Separator />
20
22
  *
23
+ * <Toolbar.Link href="https://box.com">box.com</Toolbar.Link>
24
+ * <Toolbar.Separator />
25
+ *
21
26
  * <Toolbar.Button>
22
27
  * share
23
28
  * </Toolbar.Button>
@@ -57,10 +62,18 @@ const Toolbar = {
57
62
  * A button item.
58
63
  */
59
64
  Button: ToolbarButton,
65
+ /**
66
+ * A text input field.
67
+ */
68
+ Input: ToolbarInput,
60
69
  /**
61
70
  * Component used to visually separate options in the Toolbar.
62
71
  */
63
72
  Separator: ToolbarSeparator,
73
+ /**
74
+ * A link item.
75
+ */
76
+ Link: ToolbarLink,
64
77
  /**
65
78
  * Caret icon indicating dropdown.
66
79
  */
@@ -0,0 +1,2 @@
1
+ import { type ToolbarInputProps } from './types';
2
+ export declare const ToolbarInput: import("react").ForwardRefExoticComponent<ToolbarInputProps & import("react").RefAttributes<HTMLInputElement>>;
@@ -0,0 +1,36 @@
1
+ import { jsxs, jsx } from 'react/jsx-runtime';
2
+ import { AlertCircle } from '@box/blueprint-web-assets/icons/Medium';
3
+ import clsx from 'clsx';
4
+ import { forwardRef } from 'react';
5
+ import { useBlueprintModernization } from '../blueprint-modernization-context/useBlueprintModernization.js';
6
+ import styles from './toolbar.module.js';
7
+
8
+ const ToolbarInput = /*#__PURE__*/forwardRef((props, forwardedRef) => {
9
+ const {
10
+ className,
11
+ error,
12
+ disabled,
13
+ ...rest
14
+ } = props;
15
+ const {
16
+ enableModernizedComponents
17
+ } = useBlueprintModernization();
18
+ const showError = error && !disabled;
19
+ return jsxs("div", {
20
+ className: styles.toolbarInputContainer,
21
+ children: [jsx("input", {
22
+ ...rest,
23
+ ref: forwardedRef,
24
+ className: clsx(styles.toolbarInput, showError && styles.toolbarInputError, className),
25
+ "data-modern": enableModernizedComponents ? 'true' : 'false',
26
+ disabled: disabled,
27
+ "aria-invalid": showError || undefined
28
+ }), jsx(AlertCircle, {
29
+ "aria-hidden": "true",
30
+ className: clsx(styles.toolbarInputErrorIcon, !showError && styles.toolbarInputErrorIconHidden),
31
+ color: "currentColor"
32
+ })]
33
+ });
34
+ });
35
+
36
+ export { ToolbarInput };
@@ -0,0 +1,2 @@
1
+ import { type ToolbarLinkProps } from './types';
2
+ export declare const ToolbarLink: import("react").ForwardRefExoticComponent<ToolbarLinkProps & import("react").RefAttributes<HTMLAnchorElement>>;
@@ -0,0 +1,29 @@
1
+ import { jsx } from 'react/jsx-runtime';
2
+ import * as ToolbarPrimitive from '@radix-ui/react-toolbar';
3
+ import clsx from 'clsx';
4
+ import { forwardRef } from 'react';
5
+ import { useBlueprintModernization } from '../blueprint-modernization-context/useBlueprintModernization.js';
6
+ import styles from './toolbar.module.js';
7
+
8
+ const ToolbarLink = /*#__PURE__*/forwardRef((props, forwardedRef) => {
9
+ const {
10
+ children,
11
+ className,
12
+ ...rest
13
+ } = props;
14
+ const {
15
+ enableModernizedComponents
16
+ } = useBlueprintModernization();
17
+ return jsx(ToolbarPrimitive.Link, {
18
+ ...rest,
19
+ ref: forwardedRef,
20
+ className: clsx(styles.toolbarItem, styles.toolbarLink, className),
21
+ "data-modern": enableModernizedComponents ? 'true' : 'false',
22
+ children: jsx("span", {
23
+ className: styles.toolbarLinkText,
24
+ children: children
25
+ })
26
+ });
27
+ });
28
+
29
+ export { ToolbarLink };
@@ -1,4 +1,4 @@
1
1
  import '../index.css';
2
- var styles = {"dropdownIndicator":"bp_toolbar_module_dropdownIndicator--5aae4","invertCaret":"bp_toolbar_module_invertCaret--5aae4","toolbarRoot":"bp_toolbar_module_toolbarRoot--5aae4","ScrollableToolbarWithReducedPadding":"bp_toolbar_module_ScrollableToolbarWithReducedPadding--5aae4","toolbarItem":"bp_toolbar_module_toolbarItem--5aae4","toolbarButton":"bp_toolbar_module_toolbarButton--5aae4","toolbarTextToggleItem":"bp_toolbar_module_toolbarTextToggleItem--5aae4","triggerButtonSelectedWithColor":"bp_toolbar_module_triggerButtonSelectedWithColor--5aae4","toggleGroup":"bp_toolbar_module_toggleGroup--5aae4","scrollButtonWrapper":"bp_toolbar_module_scrollButtonWrapper--5aae4","hidden":"bp_toolbar_module_hidden--5aae4","scrollableChildrenWrapper":"bp_toolbar_module_scrollableChildrenWrapper--5aae4","separator":"bp_toolbar_module_separator--5aae4","toolbarToggle":"bp_toolbar_module_toolbarToggle--5aae4","toolbarIcon":"bp_toolbar_module_toolbarIcon--5aae4"};
2
+ var styles = {"dropdownIndicator":"bp_toolbar_module_dropdownIndicator--c54d6","invertCaret":"bp_toolbar_module_invertCaret--c54d6","toolbarRoot":"bp_toolbar_module_toolbarRoot--c54d6","ScrollableToolbarWithReducedPadding":"bp_toolbar_module_ScrollableToolbarWithReducedPadding--c54d6","toolbarItem":"bp_toolbar_module_toolbarItem--c54d6","toolbarButton":"bp_toolbar_module_toolbarButton--c54d6","toolbarTextToggleItem":"bp_toolbar_module_toolbarTextToggleItem--c54d6","toolbarLink":"bp_toolbar_module_toolbarLink--c54d6","triggerButtonSelectedWithColor":"bp_toolbar_module_triggerButtonSelectedWithColor--c54d6","toggleGroup":"bp_toolbar_module_toggleGroup--c54d6","scrollButtonWrapper":"bp_toolbar_module_scrollButtonWrapper--c54d6","hidden":"bp_toolbar_module_hidden--c54d6","scrollableChildrenWrapper":"bp_toolbar_module_scrollableChildrenWrapper--c54d6","separator":"bp_toolbar_module_separator--c54d6","toolbarToggle":"bp_toolbar_module_toolbarToggle--c54d6","toolbarIcon":"bp_toolbar_module_toolbarIcon--c54d6","toolbarLinkText":"bp_toolbar_module_toolbarLinkText--c54d6","toolbarInputContainer":"bp_toolbar_module_toolbarInputContainer--c54d6","toolbarInput":"bp_toolbar_module_toolbarInput--c54d6","toolbarInputErrorIcon":"bp_toolbar_module_toolbarInputErrorIcon--c54d6","toolbarInputError":"bp_toolbar_module_toolbarInputError--c54d6","toolbarInputErrorIconHidden":"bp_toolbar_module_toolbarInputErrorIconHidden--c54d6"};
3
3
 
4
4
  export { styles as default };
@@ -1,4 +1,4 @@
1
- import { type ToolbarButtonProps as ToolbarPrimitiveButtonProps, type ToolbarProps as ToolbarPrimitiveProps, type ToolbarSeparatorProps as ToolbarPrimitiveSeparatorProps, type ToolbarToggleItemProps as ToolbarPrimitiveToggleItemProps, type ToggleGroupProps as ToolbarToggleGroupPrimitiveProps } from '@radix-ui/react-toolbar';
1
+ import { type ToolbarButtonProps as ToolbarPrimitiveButtonProps, type ToolbarLinkProps as ToolbarPrimitiveLinkProps, type ToolbarProps as ToolbarPrimitiveProps, type ToolbarSeparatorProps as ToolbarPrimitiveSeparatorProps, type ToolbarToggleItemProps as ToolbarPrimitiveToggleItemProps, type ToggleGroupProps as ToolbarToggleGroupPrimitiveProps } from '@radix-ui/react-toolbar';
2
2
  import { type CSSProperties, type FunctionComponent, type HTMLAttributes, type PropsWithChildren, type SVGProps } from 'react';
3
3
  interface ToolbarWithoutScrollProps {
4
4
  scrollable?: false;
@@ -51,6 +51,26 @@ export interface ToolbarIconProps {
51
51
  /** Icon rendered by the component. */
52
52
  icon: React.FunctionComponent<React.PropsWithChildren<React.SVGProps<SVGSVGElement>>>;
53
53
  }
54
+ export interface ToolbarInputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'type'> {
55
+ 'aria-label': NonNullable<React.HTMLAttributes<HTMLInputElement>['aria-label']>;
56
+ /** Input type attribute.
57
+ * @default 'text'
58
+ */
59
+ type?: 'text' | 'search' | 'url' | 'email' | 'tel';
60
+ /** Displays error styling with alert icon.
61
+ * @default false
62
+ */
63
+ error?: boolean;
64
+ }
65
+ interface ToolbarLinkCSS extends CSSProperties {
66
+ /** Max width of the link before truncation with ellipsis.
67
+ * @default '400px'
68
+ */
69
+ '--toolbar-link-max-width'?: string;
70
+ }
71
+ export interface ToolbarLinkProps extends Omit<ToolbarPrimitiveLinkProps, 'style'> {
72
+ style?: ToolbarLinkCSS;
73
+ }
54
74
  export interface ToolbarDropdownIndicatorProps {
55
75
  /** Direction in which by indicator is pointing.
56
76
  * @default 'down'
@@ -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.36.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.2",
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.17",
81
81
  "@figma/code-connect": "1.4.4",
82
82
  "@types/react": "^18.0.0",
83
83
  "@types/react-dom": "^18.0.0",