@box/blueprint-web 17.15.3 → 17.16.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -12399,7 +12399,7 @@ div[data-radix-popper-content-wrapper]:has([role=menu]):has([data-state=open]):h
|
|
|
12399
12399
|
display:flex;
|
|
12400
12400
|
flex-direction:row;
|
|
12401
12401
|
}
|
|
12402
|
-
.bp_select_menu_grid_option_module_buttonWrapper--
|
|
12402
|
+
.bp_select_menu_grid_option_module_buttonWrapper--7314c[data-modern=false]{
|
|
12403
12403
|
--select-menu-grid-option-labeled-margin-small-breakpoint:var(--space-05) 0;
|
|
12404
12404
|
--select-menu-grid-option-labeled-margin:var(--space-05);
|
|
12405
12405
|
--select-menu-grid-option-labeled-max-width:calc(50% - var(--space-1));
|
|
@@ -12407,7 +12407,7 @@ div[data-radix-popper-content-wrapper]:has([role=menu]):has([data-state=open]):h
|
|
|
12407
12407
|
--select-menu-grid-option-labeled-max-width-last-child-margin-right:0;
|
|
12408
12408
|
}
|
|
12409
12409
|
|
|
12410
|
-
.bp_select_menu_grid_option_module_buttonWrapper--
|
|
12410
|
+
.bp_select_menu_grid_option_module_buttonWrapper--7314c[data-modern=true]{
|
|
12411
12411
|
--select-menu-grid-option-labeled-margin-small-breakpoint:var(--bp-space-005) 0;
|
|
12412
12412
|
--select-menu-grid-option-labeled-margin:var(--bp-space-005);
|
|
12413
12413
|
--select-menu-grid-option-labeled-max-width:calc(50% - var(--bp-size-010));
|
|
@@ -12415,31 +12415,30 @@ div[data-radix-popper-content-wrapper]:has([role=menu]):has([data-state=open]):h
|
|
|
12415
12415
|
--select-menu-grid-option-labeled-max-width-last-child-margin-right:0;
|
|
12416
12416
|
}
|
|
12417
12417
|
|
|
12418
|
-
.bp_select_menu_grid_option_module_buttonWrapper--
|
|
12418
|
+
.bp_select_menu_grid_option_module_buttonWrapper--7314c.bp_select_menu_grid_option_module_withLabel--7314c{
|
|
12419
12419
|
flex:1 1 0;
|
|
12420
12420
|
margin:var(--select-menu-grid-option-labeled-margin-small-breakpoint);
|
|
12421
12421
|
}
|
|
12422
|
-
.bp_select_menu_grid_option_module_buttonWrapper--
|
|
12422
|
+
.bp_select_menu_grid_option_module_buttonWrapper--7314c.bp_select_menu_grid_option_module_withLabel--default--7314c{
|
|
12423
12423
|
max-width:100%;
|
|
12424
12424
|
}
|
|
12425
12425
|
@media only screen and (width > 374px){
|
|
12426
|
-
.bp_select_menu_grid_option_module_buttonWrapper--
|
|
12426
|
+
.bp_select_menu_grid_option_module_buttonWrapper--7314c.bp_select_menu_grid_option_module_withLabel--default--7314c{
|
|
12427
12427
|
margin:var(--select-menu-grid-option-labeled-margin);
|
|
12428
12428
|
max-width:var(--select-menu-grid-option-labeled-max-width);
|
|
12429
12429
|
}
|
|
12430
|
-
.bp_select_menu_grid_option_module_buttonWrapper--
|
|
12430
|
+
.bp_select_menu_grid_option_module_buttonWrapper--7314c.bp_select_menu_grid_option_module_withLabel--default--7314c:first-child{
|
|
12431
12431
|
margin-left:var(--select-menu-grid-option-labeled-max-width-first-child-margin-left);
|
|
12432
12432
|
}
|
|
12433
|
-
.bp_select_menu_grid_option_module_buttonWrapper--
|
|
12433
|
+
.bp_select_menu_grid_option_module_buttonWrapper--7314c.bp_select_menu_grid_option_module_withLabel--default--7314c:last-child{
|
|
12434
12434
|
margin-right:var(--select-menu-grid-option-labeled-max-width-last-child-margin-right);
|
|
12435
12435
|
}
|
|
12436
12436
|
}
|
|
12437
12437
|
|
|
12438
|
-
.bp_select_menu_grid_option_module_optionButton--
|
|
12438
|
+
.bp_select_menu_grid_option_module_optionButton--7314c[data-modern=false]{
|
|
12439
12439
|
--select-menu-grid-option-background-color:#0000;
|
|
12440
12440
|
--select-menu-grid-option-labeled-background-color-hover:var(--surface-surface-secondary);
|
|
12441
12441
|
--select-menu-grid-option-labeled-background-color-active:var(--surface-surface-secondary);
|
|
12442
|
-
--select-menu-grid-option-labeled-box-shadow:var(--dropshadow-2);
|
|
12443
12442
|
--select-menu-grid-option-labeled-box-shadow-dragging:0 0 0 var(--border-1) var(--border-divider-border), var(--dropshadow-2);
|
|
12444
12443
|
--select-menu-grid-option-labeled-box-shadow-focus:0 0 0 var(--border-2) var(--outline-focus-on-light);
|
|
12445
12444
|
--select-menu-grid-option-not-labeled-width:var(--size-8);
|
|
@@ -12495,12 +12494,11 @@ div[data-radix-popper-content-wrapper]:has([role=menu]):has([data-state=open]):h
|
|
|
12495
12494
|
--select-menu-grid-option-circle-box-shadow-focus-active:0 0 0 var(--border-1) var(--gray-white), 0 0 0 var(--border-3) var(--outline-focus-on-light);
|
|
12496
12495
|
}
|
|
12497
12496
|
|
|
12498
|
-
.bp_select_menu_grid_option_module_optionButton--
|
|
12497
|
+
.bp_select_menu_grid_option_module_optionButton--7314c[data-modern=true]{
|
|
12499
12498
|
--select-menu-grid-option-background-color:#0000;
|
|
12500
12499
|
--select-menu-grid-option-labeled-background-color-hover:var(--bp-surface-surface-secondary);
|
|
12501
12500
|
--select-menu-grid-option-labeled-background-color-active:var(--bp-surface-surface-secondary);
|
|
12502
|
-
--select-menu-grid-option-labeled-box-shadow:var(--dropshadow-2);
|
|
12503
|
-
--select-menu-grid-option-labeled-box-shadow-dragging:0 0 0 var(--bp-border-01) var(--bp-border-divider-border), var(--dropshadow-2);
|
|
12501
|
+
--select-menu-grid-option-labeled-box-shadow-dragging:0 0 0 var(--bp-border-01) var(--bp-border-input-border-focus), var(--dropshadow-2);
|
|
12504
12502
|
--select-menu-grid-option-labeled-box-shadow-focus:0 0 0 var(--bp-border-02) var(--bp-border-input-border-focus);
|
|
12505
12503
|
--select-menu-grid-option-not-labeled-width:var(--bp-size-080);
|
|
12506
12504
|
--select-menu-grid-option-not-labeled-height:var(--bp-size-080);
|
|
@@ -12515,6 +12513,8 @@ div[data-radix-popper-content-wrapper]:has([role=menu]):has([data-state=open]):h
|
|
|
12515
12513
|
--select-menu-grid-option-labeled-label-content-optical-offset:var(--bp-border-01);
|
|
12516
12514
|
--select-menu-grid-option-labeled-text-color:var(--bp-text-text-on-light);
|
|
12517
12515
|
--select-menu-grid-option-labeled-icon-border-radius:var(--bp-radius-04);
|
|
12516
|
+
--select-menu-grid-option-labeled-icon-large-border-radius:var(--bp-radius-05);
|
|
12517
|
+
--select-menu-grid-option-labeled-large-border-radius:var(--bp-radius-07);
|
|
12518
12518
|
--select-menu-grid-option-labeled-icon-default-size:var(--bp-size-080);
|
|
12519
12519
|
--select-menu-grid-option-labeled-icon-large-size:var(--bp-size-100);
|
|
12520
12520
|
--select-menu-grid-option-labeled-icon-default-background:var(--bp-surface-cta-surface-icon-utility);
|
|
@@ -12555,7 +12555,7 @@ div[data-radix-popper-content-wrapper]:has([role=menu]):has([data-state=open]):h
|
|
|
12555
12555
|
--select-menu-grid-option-circle-box-shadow-focus-active:0 0 0 var(--bp-border-01) var(--bp-gray-white), 0 0 0 var(--bp-border-03) var(--bp-border-input-border-focus);
|
|
12556
12556
|
}
|
|
12557
12557
|
|
|
12558
|
-
.bp_select_menu_grid_option_module_optionButton--
|
|
12558
|
+
.bp_select_menu_grid_option_module_optionButton--7314c{
|
|
12559
12559
|
align-items:center;
|
|
12560
12560
|
background-color:var(--select-menu-grid-option-background-color);
|
|
12561
12561
|
border:none;
|
|
@@ -12565,13 +12565,13 @@ div[data-radix-popper-content-wrapper]:has([role=menu]):has([data-state=open]):h
|
|
|
12565
12565
|
-webkit-user-select:none;
|
|
12566
12566
|
user-select:none;
|
|
12567
12567
|
}
|
|
12568
|
-
.bp_select_menu_grid_option_module_optionButton--
|
|
12568
|
+
.bp_select_menu_grid_option_module_optionButton--7314c:not(.bp_select_menu_grid_option_module_labeled--7314c){
|
|
12569
12569
|
height:var(--select-menu-grid-option-not-labeled-height);
|
|
12570
12570
|
justify-content:center;
|
|
12571
12571
|
padding:var(--select-menu-grid-option-not-labeled-padding);
|
|
12572
12572
|
width:var(--select-menu-grid-option-not-labeled-width);
|
|
12573
12573
|
}
|
|
12574
|
-
.bp_select_menu_grid_option_module_optionButton--
|
|
12574
|
+
.bp_select_menu_grid_option_module_optionButton--7314c.bp_select_menu_grid_option_module_labeled--7314c{
|
|
12575
12575
|
border-radius:var(--select-menu-grid-option-labeled-border-radius);
|
|
12576
12576
|
gap:var(--select-menu-grid-option-labeled-gap);
|
|
12577
12577
|
min-width:var(--select-menu-grid-option-labeled-min-width);
|
|
@@ -12579,7 +12579,7 @@ div[data-radix-popper-content-wrapper]:has([role=menu]):has([data-state=open]):h
|
|
|
12579
12579
|
transition:var(--select-menu-grid-option-labeled-transition);
|
|
12580
12580
|
width:100%;
|
|
12581
12581
|
}
|
|
12582
|
-
.bp_select_menu_grid_option_module_optionButton--
|
|
12582
|
+
.bp_select_menu_grid_option_module_optionButton--7314c.bp_select_menu_grid_option_module_labeled--7314c .bp_select_menu_grid_option_module_labelContent--7314c{
|
|
12583
12583
|
display:flex;
|
|
12584
12584
|
flex:1;
|
|
12585
12585
|
flex-direction:column;
|
|
@@ -12587,33 +12587,33 @@ div[data-radix-popper-content-wrapper]:has([role=menu]):has([data-state=open]):h
|
|
|
12587
12587
|
min-width:0;
|
|
12588
12588
|
text-align:left;
|
|
12589
12589
|
}
|
|
12590
|
-
.bp_select_menu_grid_option_module_optionButton--
|
|
12590
|
+
.bp_select_menu_grid_option_module_optionButton--7314c.bp_select_menu_grid_option_module_labeled--7314c .bp_select_menu_grid_option_module_labelContent--withDescription--7314c{
|
|
12591
12591
|
gap:var(--select-menu-grid-option-labeled-label-content-gap);
|
|
12592
12592
|
margin-top:calc(var(--select-menu-grid-option-labeled-label-content-optical-offset)*-1);
|
|
12593
12593
|
}
|
|
12594
|
-
.bp_select_menu_grid_option_module_optionButton--
|
|
12594
|
+
.bp_select_menu_grid_option_module_optionButton--7314c.bp_select_menu_grid_option_module_labeled--7314c .bp_select_menu_grid_option_module_text--7314c{
|
|
12595
12595
|
color:var(--select-menu-grid-option-labeled-text-color);
|
|
12596
12596
|
max-height:var(--select-menu-grid-option-labeled-text-max-height);
|
|
12597
12597
|
}
|
|
12598
|
-
.bp_select_menu_grid_option_module_optionButton--
|
|
12598
|
+
.bp_select_menu_grid_option_module_optionButton--7314c.bp_select_menu_grid_option_module_labeled--7314c .bp_select_menu_grid_option_module_text--large--7314c{
|
|
12599
12599
|
-webkit-box-orient:vertical;
|
|
12600
12600
|
-webkit-line-clamp:1;
|
|
12601
12601
|
display:-webkit-box;
|
|
12602
12602
|
overflow:hidden;
|
|
12603
12603
|
}
|
|
12604
|
-
.bp_select_menu_grid_option_module_optionButton--
|
|
12604
|
+
.bp_select_menu_grid_option_module_optionButton--7314c.bp_select_menu_grid_option_module_labeled--7314c .bp_select_menu_grid_option_module_text--default--7314c{
|
|
12605
12605
|
-webkit-box-orient:vertical;
|
|
12606
12606
|
-webkit-line-clamp:2;
|
|
12607
12607
|
display:-webkit-box;
|
|
12608
12608
|
overflow:hidden;
|
|
12609
12609
|
}
|
|
12610
|
-
.bp_select_menu_grid_option_module_optionButton--
|
|
12610
|
+
.bp_select_menu_grid_option_module_optionButton--7314c.bp_select_menu_grid_option_module_labeled--7314c .bp_select_menu_grid_option_module_description--7314c{
|
|
12611
12611
|
-webkit-box-orient:vertical;
|
|
12612
12612
|
-webkit-line-clamp:1;
|
|
12613
12613
|
display:-webkit-box;
|
|
12614
12614
|
overflow:hidden;
|
|
12615
12615
|
}
|
|
12616
|
-
.bp_select_menu_grid_option_module_optionButton--
|
|
12616
|
+
.bp_select_menu_grid_option_module_optionButton--7314c.bp_select_menu_grid_option_module_labeled--7314c .bp_select_menu_grid_option_module_iconContainer--7314c{
|
|
12617
12617
|
align-items:center;
|
|
12618
12618
|
background:var(--icon-background);
|
|
12619
12619
|
border-radius:var(--select-menu-grid-option-labeled-icon-border-radius);
|
|
@@ -12621,80 +12621,82 @@ div[data-radix-popper-content-wrapper]:has([role=menu]):has([data-state=open]):h
|
|
|
12621
12621
|
flex-shrink:0;
|
|
12622
12622
|
justify-content:center;
|
|
12623
12623
|
}
|
|
12624
|
-
.bp_select_menu_grid_option_module_optionButton--
|
|
12624
|
+
.bp_select_menu_grid_option_module_optionButton--7314c.bp_select_menu_grid_option_module_labeled--7314c .bp_select_menu_grid_option_module_iconContainer--size-default--7314c{
|
|
12625
12625
|
height:var(--select-menu-grid-option-labeled-icon-default-size);
|
|
12626
12626
|
width:var(--select-menu-grid-option-labeled-icon-default-size);
|
|
12627
12627
|
}
|
|
12628
|
-
.bp_select_menu_grid_option_module_optionButton--
|
|
12628
|
+
.bp_select_menu_grid_option_module_optionButton--7314c.bp_select_menu_grid_option_module_labeled--7314c .bp_select_menu_grid_option_module_iconContainer--size-large--7314c{
|
|
12629
|
+
border-radius:var(--select-menu-grid-option-labeled-icon-large-border-radius);
|
|
12629
12630
|
height:var(--select-menu-grid-option-labeled-icon-large-size);
|
|
12630
12631
|
width:var(--select-menu-grid-option-labeled-icon-large-size);
|
|
12631
12632
|
}
|
|
12632
|
-
.bp_select_menu_grid_option_module_optionButton--
|
|
12633
|
+
.bp_select_menu_grid_option_module_optionButton--7314c.bp_select_menu_grid_option_module_labeled--7314c .bp_select_menu_grid_option_module_iconContainer--default--7314c{
|
|
12633
12634
|
--icon-background:var(--select-menu-grid-option-labeled-icon-default-background);
|
|
12634
12635
|
--icon-background-dark:var(--select-menu-grid-option-labeled-icon-default-background-dark);
|
|
12635
12636
|
}
|
|
12636
|
-
.bp_select_menu_grid_option_module_optionButton--
|
|
12637
|
+
.bp_select_menu_grid_option_module_optionButton--7314c.bp_select_menu_grid_option_module_labeled--7314c .bp_select_menu_grid_option_module_iconContainer--box--7314c{
|
|
12637
12638
|
--icon-background:var(--select-menu-grid-option-labeled-icon-box-background);
|
|
12638
12639
|
--icon-background-dark:var(--select-menu-grid-option-labeled-icon-box-background-dark);
|
|
12639
12640
|
}
|
|
12640
|
-
.bp_select_menu_grid_option_module_optionButton--
|
|
12641
|
+
.bp_select_menu_grid_option_module_optionButton--7314c.bp_select_menu_grid_option_module_labeled--7314c .bp_select_menu_grid_option_module_iconContainer--docgen--7314c{
|
|
12641
12642
|
--icon-background:var(--select-menu-grid-option-labeled-icon-docgen-background);
|
|
12642
12643
|
--icon-background-dark:var(--select-menu-grid-option-labeled-icon-docgen-background-dark);
|
|
12643
12644
|
}
|
|
12644
|
-
.bp_select_menu_grid_option_module_optionButton--
|
|
12645
|
+
.bp_select_menu_grid_option_module_optionButton--7314c.bp_select_menu_grid_option_module_labeled--7314c .bp_select_menu_grid_option_module_iconContainer--forms--7314c{
|
|
12645
12646
|
--icon-background:var(--select-menu-grid-option-labeled-icon-forms-background);
|
|
12646
12647
|
--icon-background-dark:var(--select-menu-grid-option-labeled-icon-forms-background-dark);
|
|
12647
12648
|
}
|
|
12648
|
-
.bp_select_menu_grid_option_module_optionButton--
|
|
12649
|
+
.bp_select_menu_grid_option_module_optionButton--7314c.bp_select_menu_grid_option_module_labeled--7314c .bp_select_menu_grid_option_module_iconContainer--sign--7314c{
|
|
12649
12650
|
--icon-background:var(--select-menu-grid-option-labeled-icon-sign-background);
|
|
12650
12651
|
--icon-background-dark:var(--select-menu-grid-option-labeled-icon-sign-background-dark);
|
|
12651
12652
|
}
|
|
12652
|
-
.bp_select_menu_grid_option_module_optionButton--
|
|
12653
|
+
.bp_select_menu_grid_option_module_optionButton--7314c.bp_select_menu_grid_option_module_labeled--7314c:hover{
|
|
12653
12654
|
background:var(--select-menu-grid-option-labeled-background-color-hover);
|
|
12654
|
-
box-shadow:var(--select-menu-grid-option-labeled-box-shadow);
|
|
12655
12655
|
cursor:grab;
|
|
12656
12656
|
}
|
|
12657
|
-
.bp_select_menu_grid_option_module_optionButton--
|
|
12657
|
+
.bp_select_menu_grid_option_module_optionButton--7314c.bp_select_menu_grid_option_module_labeled--7314c.bp_select_menu_grid_option_module_active--7314c,.bp_select_menu_grid_option_module_optionButton--7314c.bp_select_menu_grid_option_module_labeled--7314c.bp_select_menu_grid_option_module_dragging--7314c,.bp_select_menu_grid_option_module_optionButton--7314c.bp_select_menu_grid_option_module_labeled--7314c:active{
|
|
12658
12658
|
background:var(--select-menu-grid-option-labeled-background-color-active);
|
|
12659
|
-
box-shadow:var(--select-menu-grid-option-labeled-box-shadow);
|
|
12660
12659
|
}
|
|
12661
|
-
.bp_select_menu_grid_option_module_optionButton--
|
|
12660
|
+
.bp_select_menu_grid_option_module_optionButton--7314c.bp_select_menu_grid_option_module_labeled--7314c.bp_select_menu_grid_option_module_labeled--large--7314c{
|
|
12661
|
+
border-radius:var(--select-menu-grid-option-labeled-large-border-radius);
|
|
12662
|
+
}
|
|
12663
|
+
.bp_select_menu_grid_option_module_optionButton--7314c.bp_select_menu_grid_option_module_labeled--7314c.bp_select_menu_grid_option_module_active--7314c .bp_select_menu_grid_option_module_iconContainer--7314c,.bp_select_menu_grid_option_module_optionButton--7314c.bp_select_menu_grid_option_module_labeled--7314c:active .bp_select_menu_grid_option_module_iconContainer--7314c{
|
|
12662
12664
|
background-color:var(--icon-background);
|
|
12663
12665
|
}
|
|
12664
|
-
.bp_select_menu_grid_option_module_optionButton--
|
|
12666
|
+
.bp_select_menu_grid_option_module_optionButton--7314c.bp_select_menu_grid_option_module_labeled--7314c.bp_select_menu_grid_option_module_dragging--7314c{
|
|
12665
12667
|
box-shadow:var(--select-menu-grid-option-labeled-box-shadow-dragging);
|
|
12666
12668
|
}
|
|
12667
|
-
.bp_select_menu_grid_option_module_optionButton--
|
|
12669
|
+
.bp_select_menu_grid_option_module_optionButton--7314c.bp_select_menu_grid_option_module_labeled--7314c.bp_select_menu_grid_option_module_dragging--7314c .bp_select_menu_grid_option_module_iconContainer--7314c{
|
|
12668
12670
|
background-color:var(--icon-background-dark);
|
|
12669
12671
|
}
|
|
12670
|
-
.bp_select_menu_grid_option_module_optionButton--
|
|
12672
|
+
.bp_select_menu_grid_option_module_optionButton--7314c.bp_select_menu_grid_option_module_labeled--7314c.bp_select_menu_grid_option_module_dragging--7314c:hover{
|
|
12671
12673
|
cursor:grabbing;
|
|
12672
12674
|
}
|
|
12673
|
-
.bp_select_menu_grid_option_module_optionButton--
|
|
12675
|
+
.bp_select_menu_grid_option_module_optionButton--7314c.bp_select_menu_grid_option_module_labeled--7314c:hover:not(.bp_select_menu_grid_option_module_disabled--7314c) .bp_select_menu_grid_option_module_iconContainer--7314c{
|
|
12674
12676
|
background-color:var(--icon-background-dark);
|
|
12675
12677
|
transition:var(--select-menu-grid-option-labeled-transition);
|
|
12676
12678
|
}
|
|
12677
|
-
.bp_select_menu_grid_option_module_optionButton--
|
|
12679
|
+
.bp_select_menu_grid_option_module_optionButton--7314c.bp_select_menu_grid_option_module_labeled--7314c[data-focus-visible]{
|
|
12678
12680
|
box-shadow:var(--select-menu-grid-option-labeled-box-shadow-focus);
|
|
12679
12681
|
}
|
|
12680
|
-
.bp_select_menu_grid_option_module_optionButton--
|
|
12682
|
+
.bp_select_menu_grid_option_module_optionButton--7314c.bp_select_menu_grid_option_module_labeled--7314c[data-focus-visible]:active{
|
|
12681
12683
|
background:var(--select-menu-grid-option-labeled-background-color-active);
|
|
12682
12684
|
}
|
|
12683
|
-
.bp_select_menu_grid_option_module_optionButton--
|
|
12685
|
+
.bp_select_menu_grid_option_module_optionButton--7314c .bp_select_menu_grid_option_module_square--7314c{
|
|
12684
12686
|
height:var(--select-menu-grid-option-square-height);
|
|
12685
12687
|
width:var(--select-menu-grid-option-square-width);
|
|
12686
12688
|
}
|
|
12687
|
-
.bp_select_menu_grid_option_module_optionButton--
|
|
12689
|
+
.bp_select_menu_grid_option_module_optionButton--7314c .bp_select_menu_grid_option_module_square--7314c,.bp_select_menu_grid_option_module_optionButton--7314c .bp_select_menu_grid_option_module_square--7314c .bp_select_menu_grid_option_module_outlineHost--7314c{
|
|
12688
12690
|
align-items:center;
|
|
12689
12691
|
border-radius:var(--select-menu-grid-option-square-border-radius);
|
|
12690
12692
|
display:flex;
|
|
12691
12693
|
justify-content:center;
|
|
12692
12694
|
}
|
|
12693
|
-
.bp_select_menu_grid_option_module_optionButton--
|
|
12695
|
+
.bp_select_menu_grid_option_module_optionButton--7314c .bp_select_menu_grid_option_module_square--7314c .bp_select_menu_grid_option_module_outlineHost--7314c{
|
|
12694
12696
|
height:var(--select-menu-grid-option-square-outline-host-height);
|
|
12695
12697
|
width:var(--select-menu-grid-option-square-outline-host-width);
|
|
12696
12698
|
}
|
|
12697
|
-
.bp_select_menu_grid_option_module_optionButton--
|
|
12699
|
+
.bp_select_menu_grid_option_module_optionButton--7314c .bp_select_menu_grid_option_module_circle--7314c{
|
|
12698
12700
|
align-items:center;
|
|
12699
12701
|
background-clip:content-box;
|
|
12700
12702
|
background-color:var(--select-menu-grid-option-circle-background-color);
|
|
@@ -12706,10 +12708,10 @@ div[data-radix-popper-content-wrapper]:has([role=menu]):has([data-state=open]):h
|
|
|
12706
12708
|
justify-content:center;
|
|
12707
12709
|
width:var(--select-menu-grid-option-circle-width);
|
|
12708
12710
|
}
|
|
12709
|
-
.bp_select_menu_grid_option_module_optionButton--
|
|
12711
|
+
.bp_select_menu_grid_option_module_optionButton--7314c .bp_select_menu_grid_option_module_circle--7314c.bp_select_menu_grid_option_module_loading--7314c{
|
|
12710
12712
|
border-color:var(--select-menu-grid-option-circle-border-color-loading);
|
|
12711
12713
|
}
|
|
12712
|
-
.bp_select_menu_grid_option_module_optionButton--
|
|
12714
|
+
.bp_select_menu_grid_option_module_optionButton--7314c .bp_select_menu_grid_option_module_circle--7314c .bp_select_menu_grid_option_module_color--7314c{
|
|
12713
12715
|
background-color:var(--circleColor);
|
|
12714
12716
|
border:var(--select-menu-grid-option-circle-inner-border-width) solid var(--circleBorderColor);
|
|
12715
12717
|
border-radius:var(--select-menu-grid-option-circle-inner-border-radius);
|
|
@@ -12717,10 +12719,10 @@ div[data-radix-popper-content-wrapper]:has([role=menu]):has([data-state=open]):h
|
|
|
12717
12719
|
height:var(--select-menu-grid-option-circle-inner-height);
|
|
12718
12720
|
width:var(--select-menu-grid-option-circle-inner-width);
|
|
12719
12721
|
}
|
|
12720
|
-
.bp_select_menu_grid_option_module_optionButton--
|
|
12722
|
+
.bp_select_menu_grid_option_module_optionButton--7314c .bp_select_menu_grid_option_module_circle--7314c .bp_select_menu_grid_option_module_strikeThrough--7314c{
|
|
12721
12723
|
position:relative;
|
|
12722
12724
|
}
|
|
12723
|
-
.bp_select_menu_grid_option_module_optionButton--
|
|
12725
|
+
.bp_select_menu_grid_option_module_optionButton--7314c .bp_select_menu_grid_option_module_circle--7314c .bp_select_menu_grid_option_module_strikeThrough--7314c::after{
|
|
12724
12726
|
background-color:var(--select-menu-grid-option-circle-strikethrough-background-color);
|
|
12725
12727
|
border-radius:var(--select-menu-grid-option-circle-strikethrough-border-radius);
|
|
12726
12728
|
content:"";
|
|
@@ -12731,32 +12733,32 @@ div[data-radix-popper-content-wrapper]:has([role=menu]):has([data-state=open]):h
|
|
|
12731
12733
|
transform:rotate(-45deg);
|
|
12732
12734
|
width:90%;
|
|
12733
12735
|
}
|
|
12734
|
-
.bp_select_menu_grid_option_module_optionButton--
|
|
12736
|
+
.bp_select_menu_grid_option_module_optionButton--7314c:hover .bp_select_menu_grid_option_module_square--7314c,.bp_select_menu_grid_option_module_optionButton--7314c[data-focus-visible] .bp_select_menu_grid_option_module_square--7314c{
|
|
12735
12737
|
background-color:var(--select-menu-grid-option-square-background-color-hover);
|
|
12736
12738
|
}
|
|
12737
|
-
.bp_select_menu_grid_option_module_optionButton--
|
|
12739
|
+
.bp_select_menu_grid_option_module_optionButton--7314c:hover .bp_select_menu_grid_option_module_circle--7314c,.bp_select_menu_grid_option_module_optionButton--7314c[data-focus-visible] .bp_select_menu_grid_option_module_circle--7314c{
|
|
12738
12740
|
background-color:var(--select-menu-grid-option-circle-background-color-hover);
|
|
12739
12741
|
}
|
|
12740
|
-
.bp_select_menu_grid_option_module_optionButton--
|
|
12742
|
+
.bp_select_menu_grid_option_module_optionButton--7314c.bp_select_menu_grid_option_module_active--7314c .bp_select_menu_grid_option_module_square--7314c,.bp_select_menu_grid_option_module_optionButton--7314c:active .bp_select_menu_grid_option_module_square--7314c{
|
|
12741
12743
|
background-color:var(--select-menu-grid-option-square-background-color-active);
|
|
12742
12744
|
}
|
|
12743
|
-
.bp_select_menu_grid_option_module_optionButton--
|
|
12745
|
+
.bp_select_menu_grid_option_module_optionButton--7314c.bp_select_menu_grid_option_module_active--7314c .bp_select_menu_grid_option_module_circle--7314c,.bp_select_menu_grid_option_module_optionButton--7314c:active .bp_select_menu_grid_option_module_circle--7314c{
|
|
12744
12746
|
border:var(--select-menu-grid-option-circle-inner-border-width-active) solid var(--circleColor);
|
|
12745
12747
|
}
|
|
12746
|
-
.bp_select_menu_grid_option_module_optionButton--
|
|
12748
|
+
.bp_select_menu_grid_option_module_optionButton--7314c.bp_select_menu_grid_option_module_loading--7314c,.bp_select_menu_grid_option_module_optionButton--7314c:disabled{
|
|
12747
12749
|
cursor:default;
|
|
12748
12750
|
}
|
|
12749
|
-
.bp_select_menu_grid_option_module_optionButton--
|
|
12751
|
+
.bp_select_menu_grid_option_module_optionButton--7314c[data-focus-visible] .bp_select_menu_grid_option_module_outlineHost--7314c{
|
|
12750
12752
|
box-shadow:var(--select-menu-grid-option-circle-outline-host-box-shadow-focus);
|
|
12751
12753
|
}
|
|
12752
|
-
.bp_select_menu_grid_option_module_optionButton--
|
|
12754
|
+
.bp_select_menu_grid_option_module_optionButton--7314c[data-focus-visible] .bp_select_menu_grid_option_module_circle--7314c{
|
|
12753
12755
|
border-color:var(--select-menu-grid-option-circle-border-color-hover);
|
|
12754
12756
|
}
|
|
12755
|
-
.bp_select_menu_grid_option_module_optionButton--
|
|
12757
|
+
.bp_select_menu_grid_option_module_optionButton--7314c[data-focus-visible].bp_select_menu_grid_option_module_active--7314c .bp_select_menu_grid_option_module_circle--7314c,.bp_select_menu_grid_option_module_optionButton--7314c[data-focus-visible]:active .bp_select_menu_grid_option_module_circle--7314c{
|
|
12756
12758
|
border:var(--select-menu-grid-option-circle-border-width-focus-active) solid var(--circleColor);
|
|
12757
12759
|
box-shadow:var(--select-menu-grid-option-circle-box-shadow-focus-active);
|
|
12758
12760
|
}
|
|
12759
|
-
.bp_select_menu_grid_option_module_optionButton--
|
|
12761
|
+
.bp_select_menu_grid_option_module_optionButton--7314c:disabled:not(.bp_select_menu_grid_option_module_loading--7314c){
|
|
12760
12762
|
opacity:.3;
|
|
12761
12763
|
}
|
|
12762
12764
|
|
package/dist/lib-esm/index.css
CHANGED
|
@@ -12399,7 +12399,7 @@ div[data-radix-popper-content-wrapper]:has([role=menu]):has([data-state=open]):h
|
|
|
12399
12399
|
display:flex;
|
|
12400
12400
|
flex-direction:row;
|
|
12401
12401
|
}
|
|
12402
|
-
.bp_select_menu_grid_option_module_buttonWrapper--
|
|
12402
|
+
.bp_select_menu_grid_option_module_buttonWrapper--7314c[data-modern=false]{
|
|
12403
12403
|
--select-menu-grid-option-labeled-margin-small-breakpoint:var(--space-05) 0;
|
|
12404
12404
|
--select-menu-grid-option-labeled-margin:var(--space-05);
|
|
12405
12405
|
--select-menu-grid-option-labeled-max-width:calc(50% - var(--space-1));
|
|
@@ -12407,7 +12407,7 @@ div[data-radix-popper-content-wrapper]:has([role=menu]):has([data-state=open]):h
|
|
|
12407
12407
|
--select-menu-grid-option-labeled-max-width-last-child-margin-right:0;
|
|
12408
12408
|
}
|
|
12409
12409
|
|
|
12410
|
-
.bp_select_menu_grid_option_module_buttonWrapper--
|
|
12410
|
+
.bp_select_menu_grid_option_module_buttonWrapper--7314c[data-modern=true]{
|
|
12411
12411
|
--select-menu-grid-option-labeled-margin-small-breakpoint:var(--bp-space-005) 0;
|
|
12412
12412
|
--select-menu-grid-option-labeled-margin:var(--bp-space-005);
|
|
12413
12413
|
--select-menu-grid-option-labeled-max-width:calc(50% - var(--bp-size-010));
|
|
@@ -12415,31 +12415,30 @@ div[data-radix-popper-content-wrapper]:has([role=menu]):has([data-state=open]):h
|
|
|
12415
12415
|
--select-menu-grid-option-labeled-max-width-last-child-margin-right:0;
|
|
12416
12416
|
}
|
|
12417
12417
|
|
|
12418
|
-
.bp_select_menu_grid_option_module_buttonWrapper--
|
|
12418
|
+
.bp_select_menu_grid_option_module_buttonWrapper--7314c.bp_select_menu_grid_option_module_withLabel--7314c{
|
|
12419
12419
|
flex:1 1 0;
|
|
12420
12420
|
margin:var(--select-menu-grid-option-labeled-margin-small-breakpoint);
|
|
12421
12421
|
}
|
|
12422
|
-
.bp_select_menu_grid_option_module_buttonWrapper--
|
|
12422
|
+
.bp_select_menu_grid_option_module_buttonWrapper--7314c.bp_select_menu_grid_option_module_withLabel--default--7314c{
|
|
12423
12423
|
max-width:100%;
|
|
12424
12424
|
}
|
|
12425
12425
|
@media only screen and (width > 374px){
|
|
12426
|
-
.bp_select_menu_grid_option_module_buttonWrapper--
|
|
12426
|
+
.bp_select_menu_grid_option_module_buttonWrapper--7314c.bp_select_menu_grid_option_module_withLabel--default--7314c{
|
|
12427
12427
|
margin:var(--select-menu-grid-option-labeled-margin);
|
|
12428
12428
|
max-width:var(--select-menu-grid-option-labeled-max-width);
|
|
12429
12429
|
}
|
|
12430
|
-
.bp_select_menu_grid_option_module_buttonWrapper--
|
|
12430
|
+
.bp_select_menu_grid_option_module_buttonWrapper--7314c.bp_select_menu_grid_option_module_withLabel--default--7314c:first-child{
|
|
12431
12431
|
margin-left:var(--select-menu-grid-option-labeled-max-width-first-child-margin-left);
|
|
12432
12432
|
}
|
|
12433
|
-
.bp_select_menu_grid_option_module_buttonWrapper--
|
|
12433
|
+
.bp_select_menu_grid_option_module_buttonWrapper--7314c.bp_select_menu_grid_option_module_withLabel--default--7314c:last-child{
|
|
12434
12434
|
margin-right:var(--select-menu-grid-option-labeled-max-width-last-child-margin-right);
|
|
12435
12435
|
}
|
|
12436
12436
|
}
|
|
12437
12437
|
|
|
12438
|
-
.bp_select_menu_grid_option_module_optionButton--
|
|
12438
|
+
.bp_select_menu_grid_option_module_optionButton--7314c[data-modern=false]{
|
|
12439
12439
|
--select-menu-grid-option-background-color:#0000;
|
|
12440
12440
|
--select-menu-grid-option-labeled-background-color-hover:var(--surface-surface-secondary);
|
|
12441
12441
|
--select-menu-grid-option-labeled-background-color-active:var(--surface-surface-secondary);
|
|
12442
|
-
--select-menu-grid-option-labeled-box-shadow:var(--dropshadow-2);
|
|
12443
12442
|
--select-menu-grid-option-labeled-box-shadow-dragging:0 0 0 var(--border-1) var(--border-divider-border), var(--dropshadow-2);
|
|
12444
12443
|
--select-menu-grid-option-labeled-box-shadow-focus:0 0 0 var(--border-2) var(--outline-focus-on-light);
|
|
12445
12444
|
--select-menu-grid-option-not-labeled-width:var(--size-8);
|
|
@@ -12495,12 +12494,11 @@ div[data-radix-popper-content-wrapper]:has([role=menu]):has([data-state=open]):h
|
|
|
12495
12494
|
--select-menu-grid-option-circle-box-shadow-focus-active:0 0 0 var(--border-1) var(--gray-white), 0 0 0 var(--border-3) var(--outline-focus-on-light);
|
|
12496
12495
|
}
|
|
12497
12496
|
|
|
12498
|
-
.bp_select_menu_grid_option_module_optionButton--
|
|
12497
|
+
.bp_select_menu_grid_option_module_optionButton--7314c[data-modern=true]{
|
|
12499
12498
|
--select-menu-grid-option-background-color:#0000;
|
|
12500
12499
|
--select-menu-grid-option-labeled-background-color-hover:var(--bp-surface-surface-secondary);
|
|
12501
12500
|
--select-menu-grid-option-labeled-background-color-active:var(--bp-surface-surface-secondary);
|
|
12502
|
-
--select-menu-grid-option-labeled-box-shadow:var(--dropshadow-2);
|
|
12503
|
-
--select-menu-grid-option-labeled-box-shadow-dragging:0 0 0 var(--bp-border-01) var(--bp-border-divider-border), var(--dropshadow-2);
|
|
12501
|
+
--select-menu-grid-option-labeled-box-shadow-dragging:0 0 0 var(--bp-border-01) var(--bp-border-input-border-focus), var(--dropshadow-2);
|
|
12504
12502
|
--select-menu-grid-option-labeled-box-shadow-focus:0 0 0 var(--bp-border-02) var(--bp-border-input-border-focus);
|
|
12505
12503
|
--select-menu-grid-option-not-labeled-width:var(--bp-size-080);
|
|
12506
12504
|
--select-menu-grid-option-not-labeled-height:var(--bp-size-080);
|
|
@@ -12515,6 +12513,8 @@ div[data-radix-popper-content-wrapper]:has([role=menu]):has([data-state=open]):h
|
|
|
12515
12513
|
--select-menu-grid-option-labeled-label-content-optical-offset:var(--bp-border-01);
|
|
12516
12514
|
--select-menu-grid-option-labeled-text-color:var(--bp-text-text-on-light);
|
|
12517
12515
|
--select-menu-grid-option-labeled-icon-border-radius:var(--bp-radius-04);
|
|
12516
|
+
--select-menu-grid-option-labeled-icon-large-border-radius:var(--bp-radius-05);
|
|
12517
|
+
--select-menu-grid-option-labeled-large-border-radius:var(--bp-radius-07);
|
|
12518
12518
|
--select-menu-grid-option-labeled-icon-default-size:var(--bp-size-080);
|
|
12519
12519
|
--select-menu-grid-option-labeled-icon-large-size:var(--bp-size-100);
|
|
12520
12520
|
--select-menu-grid-option-labeled-icon-default-background:var(--bp-surface-cta-surface-icon-utility);
|
|
@@ -12555,7 +12555,7 @@ div[data-radix-popper-content-wrapper]:has([role=menu]):has([data-state=open]):h
|
|
|
12555
12555
|
--select-menu-grid-option-circle-box-shadow-focus-active:0 0 0 var(--bp-border-01) var(--bp-gray-white), 0 0 0 var(--bp-border-03) var(--bp-border-input-border-focus);
|
|
12556
12556
|
}
|
|
12557
12557
|
|
|
12558
|
-
.bp_select_menu_grid_option_module_optionButton--
|
|
12558
|
+
.bp_select_menu_grid_option_module_optionButton--7314c{
|
|
12559
12559
|
align-items:center;
|
|
12560
12560
|
background-color:var(--select-menu-grid-option-background-color);
|
|
12561
12561
|
border:none;
|
|
@@ -12565,13 +12565,13 @@ div[data-radix-popper-content-wrapper]:has([role=menu]):has([data-state=open]):h
|
|
|
12565
12565
|
-webkit-user-select:none;
|
|
12566
12566
|
user-select:none;
|
|
12567
12567
|
}
|
|
12568
|
-
.bp_select_menu_grid_option_module_optionButton--
|
|
12568
|
+
.bp_select_menu_grid_option_module_optionButton--7314c:not(.bp_select_menu_grid_option_module_labeled--7314c){
|
|
12569
12569
|
height:var(--select-menu-grid-option-not-labeled-height);
|
|
12570
12570
|
justify-content:center;
|
|
12571
12571
|
padding:var(--select-menu-grid-option-not-labeled-padding);
|
|
12572
12572
|
width:var(--select-menu-grid-option-not-labeled-width);
|
|
12573
12573
|
}
|
|
12574
|
-
.bp_select_menu_grid_option_module_optionButton--
|
|
12574
|
+
.bp_select_menu_grid_option_module_optionButton--7314c.bp_select_menu_grid_option_module_labeled--7314c{
|
|
12575
12575
|
border-radius:var(--select-menu-grid-option-labeled-border-radius);
|
|
12576
12576
|
gap:var(--select-menu-grid-option-labeled-gap);
|
|
12577
12577
|
min-width:var(--select-menu-grid-option-labeled-min-width);
|
|
@@ -12579,7 +12579,7 @@ div[data-radix-popper-content-wrapper]:has([role=menu]):has([data-state=open]):h
|
|
|
12579
12579
|
transition:var(--select-menu-grid-option-labeled-transition);
|
|
12580
12580
|
width:100%;
|
|
12581
12581
|
}
|
|
12582
|
-
.bp_select_menu_grid_option_module_optionButton--
|
|
12582
|
+
.bp_select_menu_grid_option_module_optionButton--7314c.bp_select_menu_grid_option_module_labeled--7314c .bp_select_menu_grid_option_module_labelContent--7314c{
|
|
12583
12583
|
display:flex;
|
|
12584
12584
|
flex:1;
|
|
12585
12585
|
flex-direction:column;
|
|
@@ -12587,33 +12587,33 @@ div[data-radix-popper-content-wrapper]:has([role=menu]):has([data-state=open]):h
|
|
|
12587
12587
|
min-width:0;
|
|
12588
12588
|
text-align:left;
|
|
12589
12589
|
}
|
|
12590
|
-
.bp_select_menu_grid_option_module_optionButton--
|
|
12590
|
+
.bp_select_menu_grid_option_module_optionButton--7314c.bp_select_menu_grid_option_module_labeled--7314c .bp_select_menu_grid_option_module_labelContent--withDescription--7314c{
|
|
12591
12591
|
gap:var(--select-menu-grid-option-labeled-label-content-gap);
|
|
12592
12592
|
margin-top:calc(var(--select-menu-grid-option-labeled-label-content-optical-offset)*-1);
|
|
12593
12593
|
}
|
|
12594
|
-
.bp_select_menu_grid_option_module_optionButton--
|
|
12594
|
+
.bp_select_menu_grid_option_module_optionButton--7314c.bp_select_menu_grid_option_module_labeled--7314c .bp_select_menu_grid_option_module_text--7314c{
|
|
12595
12595
|
color:var(--select-menu-grid-option-labeled-text-color);
|
|
12596
12596
|
max-height:var(--select-menu-grid-option-labeled-text-max-height);
|
|
12597
12597
|
}
|
|
12598
|
-
.bp_select_menu_grid_option_module_optionButton--
|
|
12598
|
+
.bp_select_menu_grid_option_module_optionButton--7314c.bp_select_menu_grid_option_module_labeled--7314c .bp_select_menu_grid_option_module_text--large--7314c{
|
|
12599
12599
|
-webkit-box-orient:vertical;
|
|
12600
12600
|
-webkit-line-clamp:1;
|
|
12601
12601
|
display:-webkit-box;
|
|
12602
12602
|
overflow:hidden;
|
|
12603
12603
|
}
|
|
12604
|
-
.bp_select_menu_grid_option_module_optionButton--
|
|
12604
|
+
.bp_select_menu_grid_option_module_optionButton--7314c.bp_select_menu_grid_option_module_labeled--7314c .bp_select_menu_grid_option_module_text--default--7314c{
|
|
12605
12605
|
-webkit-box-orient:vertical;
|
|
12606
12606
|
-webkit-line-clamp:2;
|
|
12607
12607
|
display:-webkit-box;
|
|
12608
12608
|
overflow:hidden;
|
|
12609
12609
|
}
|
|
12610
|
-
.bp_select_menu_grid_option_module_optionButton--
|
|
12610
|
+
.bp_select_menu_grid_option_module_optionButton--7314c.bp_select_menu_grid_option_module_labeled--7314c .bp_select_menu_grid_option_module_description--7314c{
|
|
12611
12611
|
-webkit-box-orient:vertical;
|
|
12612
12612
|
-webkit-line-clamp:1;
|
|
12613
12613
|
display:-webkit-box;
|
|
12614
12614
|
overflow:hidden;
|
|
12615
12615
|
}
|
|
12616
|
-
.bp_select_menu_grid_option_module_optionButton--
|
|
12616
|
+
.bp_select_menu_grid_option_module_optionButton--7314c.bp_select_menu_grid_option_module_labeled--7314c .bp_select_menu_grid_option_module_iconContainer--7314c{
|
|
12617
12617
|
align-items:center;
|
|
12618
12618
|
background:var(--icon-background);
|
|
12619
12619
|
border-radius:var(--select-menu-grid-option-labeled-icon-border-radius);
|
|
@@ -12621,80 +12621,82 @@ div[data-radix-popper-content-wrapper]:has([role=menu]):has([data-state=open]):h
|
|
|
12621
12621
|
flex-shrink:0;
|
|
12622
12622
|
justify-content:center;
|
|
12623
12623
|
}
|
|
12624
|
-
.bp_select_menu_grid_option_module_optionButton--
|
|
12624
|
+
.bp_select_menu_grid_option_module_optionButton--7314c.bp_select_menu_grid_option_module_labeled--7314c .bp_select_menu_grid_option_module_iconContainer--size-default--7314c{
|
|
12625
12625
|
height:var(--select-menu-grid-option-labeled-icon-default-size);
|
|
12626
12626
|
width:var(--select-menu-grid-option-labeled-icon-default-size);
|
|
12627
12627
|
}
|
|
12628
|
-
.bp_select_menu_grid_option_module_optionButton--
|
|
12628
|
+
.bp_select_menu_grid_option_module_optionButton--7314c.bp_select_menu_grid_option_module_labeled--7314c .bp_select_menu_grid_option_module_iconContainer--size-large--7314c{
|
|
12629
|
+
border-radius:var(--select-menu-grid-option-labeled-icon-large-border-radius);
|
|
12629
12630
|
height:var(--select-menu-grid-option-labeled-icon-large-size);
|
|
12630
12631
|
width:var(--select-menu-grid-option-labeled-icon-large-size);
|
|
12631
12632
|
}
|
|
12632
|
-
.bp_select_menu_grid_option_module_optionButton--
|
|
12633
|
+
.bp_select_menu_grid_option_module_optionButton--7314c.bp_select_menu_grid_option_module_labeled--7314c .bp_select_menu_grid_option_module_iconContainer--default--7314c{
|
|
12633
12634
|
--icon-background:var(--select-menu-grid-option-labeled-icon-default-background);
|
|
12634
12635
|
--icon-background-dark:var(--select-menu-grid-option-labeled-icon-default-background-dark);
|
|
12635
12636
|
}
|
|
12636
|
-
.bp_select_menu_grid_option_module_optionButton--
|
|
12637
|
+
.bp_select_menu_grid_option_module_optionButton--7314c.bp_select_menu_grid_option_module_labeled--7314c .bp_select_menu_grid_option_module_iconContainer--box--7314c{
|
|
12637
12638
|
--icon-background:var(--select-menu-grid-option-labeled-icon-box-background);
|
|
12638
12639
|
--icon-background-dark:var(--select-menu-grid-option-labeled-icon-box-background-dark);
|
|
12639
12640
|
}
|
|
12640
|
-
.bp_select_menu_grid_option_module_optionButton--
|
|
12641
|
+
.bp_select_menu_grid_option_module_optionButton--7314c.bp_select_menu_grid_option_module_labeled--7314c .bp_select_menu_grid_option_module_iconContainer--docgen--7314c{
|
|
12641
12642
|
--icon-background:var(--select-menu-grid-option-labeled-icon-docgen-background);
|
|
12642
12643
|
--icon-background-dark:var(--select-menu-grid-option-labeled-icon-docgen-background-dark);
|
|
12643
12644
|
}
|
|
12644
|
-
.bp_select_menu_grid_option_module_optionButton--
|
|
12645
|
+
.bp_select_menu_grid_option_module_optionButton--7314c.bp_select_menu_grid_option_module_labeled--7314c .bp_select_menu_grid_option_module_iconContainer--forms--7314c{
|
|
12645
12646
|
--icon-background:var(--select-menu-grid-option-labeled-icon-forms-background);
|
|
12646
12647
|
--icon-background-dark:var(--select-menu-grid-option-labeled-icon-forms-background-dark);
|
|
12647
12648
|
}
|
|
12648
|
-
.bp_select_menu_grid_option_module_optionButton--
|
|
12649
|
+
.bp_select_menu_grid_option_module_optionButton--7314c.bp_select_menu_grid_option_module_labeled--7314c .bp_select_menu_grid_option_module_iconContainer--sign--7314c{
|
|
12649
12650
|
--icon-background:var(--select-menu-grid-option-labeled-icon-sign-background);
|
|
12650
12651
|
--icon-background-dark:var(--select-menu-grid-option-labeled-icon-sign-background-dark);
|
|
12651
12652
|
}
|
|
12652
|
-
.bp_select_menu_grid_option_module_optionButton--
|
|
12653
|
+
.bp_select_menu_grid_option_module_optionButton--7314c.bp_select_menu_grid_option_module_labeled--7314c:hover{
|
|
12653
12654
|
background:var(--select-menu-grid-option-labeled-background-color-hover);
|
|
12654
|
-
box-shadow:var(--select-menu-grid-option-labeled-box-shadow);
|
|
12655
12655
|
cursor:grab;
|
|
12656
12656
|
}
|
|
12657
|
-
.bp_select_menu_grid_option_module_optionButton--
|
|
12657
|
+
.bp_select_menu_grid_option_module_optionButton--7314c.bp_select_menu_grid_option_module_labeled--7314c.bp_select_menu_grid_option_module_active--7314c,.bp_select_menu_grid_option_module_optionButton--7314c.bp_select_menu_grid_option_module_labeled--7314c.bp_select_menu_grid_option_module_dragging--7314c,.bp_select_menu_grid_option_module_optionButton--7314c.bp_select_menu_grid_option_module_labeled--7314c:active{
|
|
12658
12658
|
background:var(--select-menu-grid-option-labeled-background-color-active);
|
|
12659
|
-
box-shadow:var(--select-menu-grid-option-labeled-box-shadow);
|
|
12660
12659
|
}
|
|
12661
|
-
.bp_select_menu_grid_option_module_optionButton--
|
|
12660
|
+
.bp_select_menu_grid_option_module_optionButton--7314c.bp_select_menu_grid_option_module_labeled--7314c.bp_select_menu_grid_option_module_labeled--large--7314c{
|
|
12661
|
+
border-radius:var(--select-menu-grid-option-labeled-large-border-radius);
|
|
12662
|
+
}
|
|
12663
|
+
.bp_select_menu_grid_option_module_optionButton--7314c.bp_select_menu_grid_option_module_labeled--7314c.bp_select_menu_grid_option_module_active--7314c .bp_select_menu_grid_option_module_iconContainer--7314c,.bp_select_menu_grid_option_module_optionButton--7314c.bp_select_menu_grid_option_module_labeled--7314c:active .bp_select_menu_grid_option_module_iconContainer--7314c{
|
|
12662
12664
|
background-color:var(--icon-background);
|
|
12663
12665
|
}
|
|
12664
|
-
.bp_select_menu_grid_option_module_optionButton--
|
|
12666
|
+
.bp_select_menu_grid_option_module_optionButton--7314c.bp_select_menu_grid_option_module_labeled--7314c.bp_select_menu_grid_option_module_dragging--7314c{
|
|
12665
12667
|
box-shadow:var(--select-menu-grid-option-labeled-box-shadow-dragging);
|
|
12666
12668
|
}
|
|
12667
|
-
.bp_select_menu_grid_option_module_optionButton--
|
|
12669
|
+
.bp_select_menu_grid_option_module_optionButton--7314c.bp_select_menu_grid_option_module_labeled--7314c.bp_select_menu_grid_option_module_dragging--7314c .bp_select_menu_grid_option_module_iconContainer--7314c{
|
|
12668
12670
|
background-color:var(--icon-background-dark);
|
|
12669
12671
|
}
|
|
12670
|
-
.bp_select_menu_grid_option_module_optionButton--
|
|
12672
|
+
.bp_select_menu_grid_option_module_optionButton--7314c.bp_select_menu_grid_option_module_labeled--7314c.bp_select_menu_grid_option_module_dragging--7314c:hover{
|
|
12671
12673
|
cursor:grabbing;
|
|
12672
12674
|
}
|
|
12673
|
-
.bp_select_menu_grid_option_module_optionButton--
|
|
12675
|
+
.bp_select_menu_grid_option_module_optionButton--7314c.bp_select_menu_grid_option_module_labeled--7314c:hover:not(.bp_select_menu_grid_option_module_disabled--7314c) .bp_select_menu_grid_option_module_iconContainer--7314c{
|
|
12674
12676
|
background-color:var(--icon-background-dark);
|
|
12675
12677
|
transition:var(--select-menu-grid-option-labeled-transition);
|
|
12676
12678
|
}
|
|
12677
|
-
.bp_select_menu_grid_option_module_optionButton--
|
|
12679
|
+
.bp_select_menu_grid_option_module_optionButton--7314c.bp_select_menu_grid_option_module_labeled--7314c[data-focus-visible]{
|
|
12678
12680
|
box-shadow:var(--select-menu-grid-option-labeled-box-shadow-focus);
|
|
12679
12681
|
}
|
|
12680
|
-
.bp_select_menu_grid_option_module_optionButton--
|
|
12682
|
+
.bp_select_menu_grid_option_module_optionButton--7314c.bp_select_menu_grid_option_module_labeled--7314c[data-focus-visible]:active{
|
|
12681
12683
|
background:var(--select-menu-grid-option-labeled-background-color-active);
|
|
12682
12684
|
}
|
|
12683
|
-
.bp_select_menu_grid_option_module_optionButton--
|
|
12685
|
+
.bp_select_menu_grid_option_module_optionButton--7314c .bp_select_menu_grid_option_module_square--7314c{
|
|
12684
12686
|
height:var(--select-menu-grid-option-square-height);
|
|
12685
12687
|
width:var(--select-menu-grid-option-square-width);
|
|
12686
12688
|
}
|
|
12687
|
-
.bp_select_menu_grid_option_module_optionButton--
|
|
12689
|
+
.bp_select_menu_grid_option_module_optionButton--7314c .bp_select_menu_grid_option_module_square--7314c,.bp_select_menu_grid_option_module_optionButton--7314c .bp_select_menu_grid_option_module_square--7314c .bp_select_menu_grid_option_module_outlineHost--7314c{
|
|
12688
12690
|
align-items:center;
|
|
12689
12691
|
border-radius:var(--select-menu-grid-option-square-border-radius);
|
|
12690
12692
|
display:flex;
|
|
12691
12693
|
justify-content:center;
|
|
12692
12694
|
}
|
|
12693
|
-
.bp_select_menu_grid_option_module_optionButton--
|
|
12695
|
+
.bp_select_menu_grid_option_module_optionButton--7314c .bp_select_menu_grid_option_module_square--7314c .bp_select_menu_grid_option_module_outlineHost--7314c{
|
|
12694
12696
|
height:var(--select-menu-grid-option-square-outline-host-height);
|
|
12695
12697
|
width:var(--select-menu-grid-option-square-outline-host-width);
|
|
12696
12698
|
}
|
|
12697
|
-
.bp_select_menu_grid_option_module_optionButton--
|
|
12699
|
+
.bp_select_menu_grid_option_module_optionButton--7314c .bp_select_menu_grid_option_module_circle--7314c{
|
|
12698
12700
|
align-items:center;
|
|
12699
12701
|
background-clip:content-box;
|
|
12700
12702
|
background-color:var(--select-menu-grid-option-circle-background-color);
|
|
@@ -12706,10 +12708,10 @@ div[data-radix-popper-content-wrapper]:has([role=menu]):has([data-state=open]):h
|
|
|
12706
12708
|
justify-content:center;
|
|
12707
12709
|
width:var(--select-menu-grid-option-circle-width);
|
|
12708
12710
|
}
|
|
12709
|
-
.bp_select_menu_grid_option_module_optionButton--
|
|
12711
|
+
.bp_select_menu_grid_option_module_optionButton--7314c .bp_select_menu_grid_option_module_circle--7314c.bp_select_menu_grid_option_module_loading--7314c{
|
|
12710
12712
|
border-color:var(--select-menu-grid-option-circle-border-color-loading);
|
|
12711
12713
|
}
|
|
12712
|
-
.bp_select_menu_grid_option_module_optionButton--
|
|
12714
|
+
.bp_select_menu_grid_option_module_optionButton--7314c .bp_select_menu_grid_option_module_circle--7314c .bp_select_menu_grid_option_module_color--7314c{
|
|
12713
12715
|
background-color:var(--circleColor);
|
|
12714
12716
|
border:var(--select-menu-grid-option-circle-inner-border-width) solid var(--circleBorderColor);
|
|
12715
12717
|
border-radius:var(--select-menu-grid-option-circle-inner-border-radius);
|
|
@@ -12717,10 +12719,10 @@ div[data-radix-popper-content-wrapper]:has([role=menu]):has([data-state=open]):h
|
|
|
12717
12719
|
height:var(--select-menu-grid-option-circle-inner-height);
|
|
12718
12720
|
width:var(--select-menu-grid-option-circle-inner-width);
|
|
12719
12721
|
}
|
|
12720
|
-
.bp_select_menu_grid_option_module_optionButton--
|
|
12722
|
+
.bp_select_menu_grid_option_module_optionButton--7314c .bp_select_menu_grid_option_module_circle--7314c .bp_select_menu_grid_option_module_strikeThrough--7314c{
|
|
12721
12723
|
position:relative;
|
|
12722
12724
|
}
|
|
12723
|
-
.bp_select_menu_grid_option_module_optionButton--
|
|
12725
|
+
.bp_select_menu_grid_option_module_optionButton--7314c .bp_select_menu_grid_option_module_circle--7314c .bp_select_menu_grid_option_module_strikeThrough--7314c::after{
|
|
12724
12726
|
background-color:var(--select-menu-grid-option-circle-strikethrough-background-color);
|
|
12725
12727
|
border-radius:var(--select-menu-grid-option-circle-strikethrough-border-radius);
|
|
12726
12728
|
content:"";
|
|
@@ -12731,32 +12733,32 @@ div[data-radix-popper-content-wrapper]:has([role=menu]):has([data-state=open]):h
|
|
|
12731
12733
|
transform:rotate(-45deg);
|
|
12732
12734
|
width:90%;
|
|
12733
12735
|
}
|
|
12734
|
-
.bp_select_menu_grid_option_module_optionButton--
|
|
12736
|
+
.bp_select_menu_grid_option_module_optionButton--7314c:hover .bp_select_menu_grid_option_module_square--7314c,.bp_select_menu_grid_option_module_optionButton--7314c[data-focus-visible] .bp_select_menu_grid_option_module_square--7314c{
|
|
12735
12737
|
background-color:var(--select-menu-grid-option-square-background-color-hover);
|
|
12736
12738
|
}
|
|
12737
|
-
.bp_select_menu_grid_option_module_optionButton--
|
|
12739
|
+
.bp_select_menu_grid_option_module_optionButton--7314c:hover .bp_select_menu_grid_option_module_circle--7314c,.bp_select_menu_grid_option_module_optionButton--7314c[data-focus-visible] .bp_select_menu_grid_option_module_circle--7314c{
|
|
12738
12740
|
background-color:var(--select-menu-grid-option-circle-background-color-hover);
|
|
12739
12741
|
}
|
|
12740
|
-
.bp_select_menu_grid_option_module_optionButton--
|
|
12742
|
+
.bp_select_menu_grid_option_module_optionButton--7314c.bp_select_menu_grid_option_module_active--7314c .bp_select_menu_grid_option_module_square--7314c,.bp_select_menu_grid_option_module_optionButton--7314c:active .bp_select_menu_grid_option_module_square--7314c{
|
|
12741
12743
|
background-color:var(--select-menu-grid-option-square-background-color-active);
|
|
12742
12744
|
}
|
|
12743
|
-
.bp_select_menu_grid_option_module_optionButton--
|
|
12745
|
+
.bp_select_menu_grid_option_module_optionButton--7314c.bp_select_menu_grid_option_module_active--7314c .bp_select_menu_grid_option_module_circle--7314c,.bp_select_menu_grid_option_module_optionButton--7314c:active .bp_select_menu_grid_option_module_circle--7314c{
|
|
12744
12746
|
border:var(--select-menu-grid-option-circle-inner-border-width-active) solid var(--circleColor);
|
|
12745
12747
|
}
|
|
12746
|
-
.bp_select_menu_grid_option_module_optionButton--
|
|
12748
|
+
.bp_select_menu_grid_option_module_optionButton--7314c.bp_select_menu_grid_option_module_loading--7314c,.bp_select_menu_grid_option_module_optionButton--7314c:disabled{
|
|
12747
12749
|
cursor:default;
|
|
12748
12750
|
}
|
|
12749
|
-
.bp_select_menu_grid_option_module_optionButton--
|
|
12751
|
+
.bp_select_menu_grid_option_module_optionButton--7314c[data-focus-visible] .bp_select_menu_grid_option_module_outlineHost--7314c{
|
|
12750
12752
|
box-shadow:var(--select-menu-grid-option-circle-outline-host-box-shadow-focus);
|
|
12751
12753
|
}
|
|
12752
|
-
.bp_select_menu_grid_option_module_optionButton--
|
|
12754
|
+
.bp_select_menu_grid_option_module_optionButton--7314c[data-focus-visible] .bp_select_menu_grid_option_module_circle--7314c{
|
|
12753
12755
|
border-color:var(--select-menu-grid-option-circle-border-color-hover);
|
|
12754
12756
|
}
|
|
12755
|
-
.bp_select_menu_grid_option_module_optionButton--
|
|
12757
|
+
.bp_select_menu_grid_option_module_optionButton--7314c[data-focus-visible].bp_select_menu_grid_option_module_active--7314c .bp_select_menu_grid_option_module_circle--7314c,.bp_select_menu_grid_option_module_optionButton--7314c[data-focus-visible]:active .bp_select_menu_grid_option_module_circle--7314c{
|
|
12756
12758
|
border:var(--select-menu-grid-option-circle-border-width-focus-active) solid var(--circleColor);
|
|
12757
12759
|
box-shadow:var(--select-menu-grid-option-circle-box-shadow-focus-active);
|
|
12758
12760
|
}
|
|
12759
|
-
.bp_select_menu_grid_option_module_optionButton--
|
|
12761
|
+
.bp_select_menu_grid_option_module_optionButton--7314c:disabled:not(.bp_select_menu_grid_option_module_loading--7314c){
|
|
12760
12762
|
opacity:.3;
|
|
12761
12763
|
}
|
|
12762
12764
|
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
|
|
2
2
|
import { CompositeItem, Button } from '@ariakit/react';
|
|
3
|
-
import { Gray05,
|
|
3
|
+
import { Gray05, bpSize050, bpSize040, BrandDocgenPrimary, BrandFormsPrimary, BrandSignPrimary, BrandBoxPrimary, bpIconIconOnLight } from '@box/blueprint-web-assets/tokens/tokens';
|
|
4
4
|
import clsx from 'clsx';
|
|
5
5
|
import Color from 'color';
|
|
6
6
|
import { forwardRef, createElement } from 'react';
|
|
@@ -38,6 +38,7 @@ const SelectMenuGridOption = /*#__PURE__*/forwardRef((props, forwardedRef) => {
|
|
|
38
38
|
...restProps
|
|
39
39
|
} = props;
|
|
40
40
|
const isWithLabel = variant === 'labeled';
|
|
41
|
+
const labeledSize = isWithLabel ? props.size : undefined;
|
|
41
42
|
const isButtonDisabled = disabled || loading;
|
|
42
43
|
const isButtonActive = !disabled && !loading && active;
|
|
43
44
|
const isButtonDragged = isWithLabel && !isButtonDisabled && props.draggable && props.dragging;
|
|
@@ -65,6 +66,7 @@ const SelectMenuGridOption = /*#__PURE__*/forwardRef((props, forwardedRef) => {
|
|
|
65
66
|
"aria-label": loading ? loadingAriaLabel : ariaLabel,
|
|
66
67
|
className: clsx(styles.optionButton, className, {
|
|
67
68
|
[styles.labeled]: isWithLabel,
|
|
69
|
+
[styles['labeled--large']]: labeledSize === 'large',
|
|
68
70
|
[styles.loading]: loading,
|
|
69
71
|
[styles.active]: isButtonActive,
|
|
70
72
|
[styles.dragging]: isButtonDragged
|
|
@@ -145,7 +147,7 @@ const iconColorModern = {
|
|
|
145
147
|
};
|
|
146
148
|
const iconSizeModern = {
|
|
147
149
|
default: bpSize040,
|
|
148
|
-
large:
|
|
150
|
+
large: bpSize050
|
|
149
151
|
};
|
|
150
152
|
const ItemWithLabel = ({
|
|
151
153
|
size,
|
|
@@ -171,7 +173,7 @@ const ItemWithLabel = ({
|
|
|
171
173
|
children: [jsx(Text, {
|
|
172
174
|
as: "span",
|
|
173
175
|
className: clsx(styles.text, styles[`text--${size}`]),
|
|
174
|
-
variant: size === 'default' ? '
|
|
176
|
+
variant: size === 'default' ? 'bodySmall' : 'bodyDefaultBold',
|
|
175
177
|
children: label
|
|
176
178
|
}), description && jsx(Text, {
|
|
177
179
|
as: "span",
|
|
@@ -1,4 +1,4 @@
|
|
|
1
1
|
import '../../index.css';
|
|
2
|
-
var styles = {"buttonWrapper":"bp_select_menu_grid_option_module_buttonWrapper--
|
|
2
|
+
var styles = {"buttonWrapper":"bp_select_menu_grid_option_module_buttonWrapper--7314c","withLabel":"bp_select_menu_grid_option_module_withLabel--7314c","withLabel--default":"bp_select_menu_grid_option_module_withLabel--default--7314c","optionButton":"bp_select_menu_grid_option_module_optionButton--7314c","labeled":"bp_select_menu_grid_option_module_labeled--7314c","labelContent":"bp_select_menu_grid_option_module_labelContent--7314c","labelContent--withDescription":"bp_select_menu_grid_option_module_labelContent--withDescription--7314c","text":"bp_select_menu_grid_option_module_text--7314c","text--large":"bp_select_menu_grid_option_module_text--large--7314c","text--default":"bp_select_menu_grid_option_module_text--default--7314c","description":"bp_select_menu_grid_option_module_description--7314c","iconContainer":"bp_select_menu_grid_option_module_iconContainer--7314c","iconContainer--size-default":"bp_select_menu_grid_option_module_iconContainer--size-default--7314c","iconContainer--size-large":"bp_select_menu_grid_option_module_iconContainer--size-large--7314c","iconContainer--default":"bp_select_menu_grid_option_module_iconContainer--default--7314c","iconContainer--box":"bp_select_menu_grid_option_module_iconContainer--box--7314c","iconContainer--docgen":"bp_select_menu_grid_option_module_iconContainer--docgen--7314c","iconContainer--forms":"bp_select_menu_grid_option_module_iconContainer--forms--7314c","iconContainer--sign":"bp_select_menu_grid_option_module_iconContainer--sign--7314c","active":"bp_select_menu_grid_option_module_active--7314c","dragging":"bp_select_menu_grid_option_module_dragging--7314c","labeled--large":"bp_select_menu_grid_option_module_labeled--large--7314c","disabled":"bp_select_menu_grid_option_module_disabled--7314c","square":"bp_select_menu_grid_option_module_square--7314c","outlineHost":"bp_select_menu_grid_option_module_outlineHost--7314c","circle":"bp_select_menu_grid_option_module_circle--7314c","loading":"bp_select_menu_grid_option_module_loading--7314c","color":"bp_select_menu_grid_option_module_color--7314c","strikeThrough":"bp_select_menu_grid_option_module_strikeThrough--7314c"};
|
|
3
3
|
|
|
4
4
|
export { styles as default };
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@box/blueprint-web",
|
|
3
|
-
"version": "17.
|
|
3
|
+
"version": "17.16.0",
|
|
4
4
|
"type": "module",
|
|
5
5
|
"license": "SEE LICENSE IN LICENSE",
|
|
6
6
|
"publishConfig": {
|
|
@@ -55,7 +55,7 @@
|
|
|
55
55
|
"dependencies": {
|
|
56
56
|
"@ariakit/react": "0.4.21",
|
|
57
57
|
"@ariakit/react-core": "0.4.21",
|
|
58
|
-
"@box/blueprint-web-assets": "^5.10.
|
|
58
|
+
"@box/blueprint-web-assets": "^5.10.27",
|
|
59
59
|
"@internationalized/date": "^3.12.0",
|
|
60
60
|
"@radix-ui/react-accordion": "1.1.2",
|
|
61
61
|
"@radix-ui/react-checkbox": "1.0.4",
|
|
@@ -86,7 +86,7 @@
|
|
|
86
86
|
"devDependencies": {
|
|
87
87
|
"@box/box-test-client": "^3.2.7",
|
|
88
88
|
"@box/playwright-utils": "^2.8.5",
|
|
89
|
-
"@box/storybook-utils": "^1.2.
|
|
89
|
+
"@box/storybook-utils": "^1.2.71",
|
|
90
90
|
"@figma/code-connect": "1.4.4",
|
|
91
91
|
"@playwright/test": "1.46.1",
|
|
92
92
|
"@types/js-yaml": "^4.0.9",
|