@box/blueprint-web 12.46.0 → 12.47.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (4) hide show
  1. package/dist/lib-esm/index.css +189 -76
  2. package/dist/lib-esm/select/select.js +18 -1
  3. package/dist/lib-esm/select/select.module.js +1 -1
  4. package/package.json +3 -3
package/dist/lib-esm/index.css CHANGED
@@ -2631,24 +2631,84 @@
2631
2631
  --blueprint-select-border-error-left-width:none;
2632
2632
  }
2633
2633
 
2634
- .bp_select_module_container--776e4{
2634
+ .bp_select_module_container--a39b9[data-modern=false]{
2635
+ --select-gap:var(--space-2);
2636
+ --select-label-color:var(--text-text-on-light);
2637
+ --select-trigger-btn-gap:var(--space-2);
2638
+ --select-trigger-btn-height:var(--size-10);
2639
+ --select-trigger-btn-color:var(--text-text-on-light);
2640
+ --select-trigger-btn-bg-color:var(--surface-dropdown-surface);
2641
+ --select-trigger-btn-border-top:var(--blueprint-select-border-top-width, var(--border-1)) solid var(--border-dropdown-border);
2642
+ --select-trigger-btn-border-right:var(--blueprint-select-border-right-width, var(--border-1)) solid var(--border-dropdown-border);
2643
+ --select-trigger-btn-border-bottom:var(--blueprint-select-border-bottom-width, var(--border-1)) solid var(--border-dropdown-border);
2644
+ --select-trigger-btn-border-left:var(--blueprint-select-border-left-width, var(--border-1)) solid var(--border-dropdown-border);
2645
+ --select-trigger-btn-radius:var(--blueprint-select-trigger-radius, var(--radius-2));
2646
+ --select-trigger-btn-box-shadow:var(--dropshadow-2);
2647
+ --select-trigger-btn-padding-inline:var(--space-3);
2648
+ --select-trigger-btn-error-bg-color:var(--surface-dropdown-surface-error);
2649
+ --select-trigger-btn-focus-bg-color:var(--surface-dropdown-surface-error);
2650
+ --select-trigger-btn-error-border-top:var(--blueprint-select-border-error-top-width, var(--border-2)) solid var(--border-dropdown-border-error);
2651
+ --select-trigger-btn-error-border-right:var(--blueprint-select-border-error-right-width, var(--border-2)) solid var(--border-dropdown-border-error);
2652
+ --select-trigger-btn-error-border-bottom:var(--blueprint-select-border-error-bottom-width, var(--border-2)) solid var(--border-dropdown-border-error);
2653
+ --select-trigger-btn-error-border-left:var(--blueprint-select-border-error-left-width, var(--border-2)) solid var(--border-dropdown-border-error);
2654
+ --select-trigger-btn-focus-border:var(--border-2) solid var(--outline-focus-on-light);
2655
+ --select-trigger-btn-hover-bg-color:var(--surface-dropdown-surface-hover);
2656
+ --select-trigger-btn-hover-border-color:var(--border-dropdown-border-hover);
2657
+ --select-trigger-btn-caret-width:var(--size-2);
2658
+ --select-trigger-btn-caret-height:var(--size-2);
2659
+ --select-trigger-btn-caret-color:var(--icon-icon-on-light);
2660
+ --select-trigger-btn-pencil-width:var(--size-4);
2661
+ --select-trigger-btn-pencil-height:var(--size-4);
2662
+ }
2663
+
2664
+ .bp_select_module_container--a39b9[data-modern=true]{
2665
+ --select-gap:var(--bp-space-020);
2666
+ --select-label-color:var(--bp-text-text-on-light);
2667
+ --select-trigger-btn-gap:var(--bp-space-020);
2668
+ --select-trigger-btn-height:var(--bp-size-100);
2669
+ --select-trigger-btn-color:var(--bp-text-text-on-light);
2670
+ --select-trigger-btn-bg-color:var(--bp-surface-dropdown-surface);
2671
+ --select-trigger-btn-border-top:var(--blueprint-select-border-top-width, var(--bp-border-01)) solid var(--bp-border-dropdown-border);
2672
+ --select-trigger-btn-border-right:var(--blueprint-select-border-right-width, var(--bp-border-01)) solid var(--bp-border-dropdown-border);
2673
+ --select-trigger-btn-border-bottom:var(--blueprint-select-border-bottom-width, var(--bp-border-01)) solid var(--bp-border-dropdown-border);
2674
+ --select-trigger-btn-border-left:var(--blueprint-select-border-left-width, var(--border-1)) solid var(--bp-border-dropdown-border);
2675
+ --select-trigger-btn-radius:var(--blueprint-select-trigger-radius, var(--bp-radius-06));
2676
+ --select-trigger-btn-box-shadow:var(--dropshadow-2);
2677
+ --select-trigger-btn-padding-inline:var(--bp-space-030);
2678
+ --select-trigger-btn-error-bg-color:var(--bp-surface-dropdown-surface-error);
2679
+ --select-trigger-btn-focus-bg-color:var(--bp-surface-dropdown-surface-error-focus);
2680
+ --select-trigger-btn-error-border-top:var(--blueprint-select-border-error-top-width, var(--bp-border-02)) solid var(--bp-border-dropdown-border-error);
2681
+ --select-trigger-btn-error-border-right:var(--blueprint-select-border-error-right-width, var(--bp-border-02)) solid var(--bp-border-dropdown-border-error);
2682
+ --select-trigger-btn-error-border-bottom:var(--blueprint-select-border-error-bottom-width, var(--bp-border-02)) solid var(--bp-border-dropdown-border-error);
2683
+ --select-trigger-btn-error-border-left:var(--blueprint-select-border-error-left-width, var(--bp-border-02)) solid var(--bp-border-dropdown-border-error);
2684
+ --select-trigger-btn-focus-border:var(--bp-border-02) solid var(--bp-outline-focus-on-light);
2685
+ --select-trigger-btn-hover-bg-color:var(--bp-surface-dropdown-surface-hover);
2686
+ --select-trigger-btn-hover-border-color:var(--bp-border-dropdown-border-hover);
2687
+ --select-trigger-btn-caret-width:var(--bp-size-030);
2688
+ --select-trigger-btn-caret-height:var(--bp-size-030);
2689
+ --select-trigger-btn-caret-color:var(--bp-icon-icon-on-light);
2690
+ --select-trigger-btn-pencil-width:var(--bp-size-040);
2691
+ --select-trigger-btn-pencil-height:var(--bp-size-040);
2692
+ }
2693
+
2694
+ .bp_select_module_container--a39b9{
2635
2695
  display:flex;
2636
2696
  flex-direction:column;
2637
2697
  font-family:var(--body-default-font-family);
2638
2698
  font-size:var(--body-default-font-size);
2639
2699
  font-weight:var(--body-default-font-weight);
2640
- gap:var(--space-2);
2700
+ gap:var(--select-gap);
2641
2701
  letter-spacing:var(--body-default-letter-spacing);
2642
2702
  line-height:var(--body-default-line-height);
2643
2703
  -webkit-text-decoration:var(--body-default-text-decoration);
2644
2704
  text-decoration:var(--body-default-text-decoration);
2645
2705
  text-transform:var(--body-default-text-case);
2646
2706
  }
2647
- .bp_select_module_container--776e4.bp_select_module_disabled--776e4{
2707
+ .bp_select_module_container--a39b9.bp_select_module_disabled--a39b9{
2648
2708
  opacity:60%;
2649
2709
  }
2650
- .bp_select_module_container--776e4 .bp_select_module_label--776e4{
2651
- color:var(--text-text-on-light);
2710
+ .bp_select_module_container--a39b9 .bp_select_module_label--a39b9{
2711
+ color:var(--select-label-color);
2652
2712
  flex:0 0 fit-content;
2653
2713
  font-family:var(--body-default-bold-font-family);
2654
2714
  font-size:var(--body-default-bold-font-size);
@@ -2660,90 +2720,143 @@
2660
2720
  text-decoration:var(--body-default-bold-text-decoration);
2661
2721
  text-transform:var(--body-default-bold-text-case);
2662
2722
  }
2663
- .bp_select_module_container--776e4 .bp_select_module_triggerBtn--776e4{
2723
+ .bp_select_module_container--a39b9 .bp_select_module_triggerBtn--a39b9{
2664
2724
  align-items:center;
2665
- background-color:var(--surface-dropdown-surface);
2666
- border-bottom:var(--blueprint-select-border-bottom-width, var(--border-1)) solid var(--border-dropdown-border);
2667
- border-left:var(--blueprint-select-border-left-width, var(--border-1)) solid var(--border-dropdown-border);
2668
- border-radius:var(--blueprint-select-trigger-radius, var(--radius-2));
2669
- border-right:var(--blueprint-select-border-right-width, var(--border-1)) solid var(--border-dropdown-border);
2670
- border-top:var(--blueprint-select-border-top-width, var(--border-1)) solid var(--border-dropdown-border);
2671
- box-shadow:var(--dropshadow-2);
2672
- color:var(--text-text-on-light);
2725
+ background-color:var(--select-trigger-btn-bg-color);
2726
+ border-bottom:var(--select-trigger-btn-border-bottom);
2727
+ border-left:var(--select-trigger-btn-border-left);
2728
+ border-radius:var(--select-trigger-btn-radius);
2729
+ border-right:var(--select-trigger-btn-border-right);
2730
+ border-top:var(--select-trigger-btn-border-top);
2731
+ box-shadow:var(--select-trigger-btn-box-shadow);
2732
+ color:var(--select-trigger-btn-color);
2673
2733
  cursor:pointer;
2674
2734
  display:flex;
2675
2735
  font-family:var(--body-default-font-family);
2676
2736
  font-size:var(--body-default-font-size);
2677
2737
  font-weight:var(--body-default-font-weight);
2678
- gap:var(--space-2);
2679
- height:var(--size-10);
2738
+ gap:var(--select-trigger-btn-gap);
2739
+ height:var(--select-trigger-btn-height);
2680
2740
  justify-content:space-between;
2681
2741
  letter-spacing:var(--body-default-letter-spacing);
2682
2742
  line-height:var(--body-default-line-height);
2683
2743
  outline:none;
2684
2744
  padding-block:0;
2685
- padding-inline:var(--space-3);
2745
+ padding-inline:var(--select-trigger-btn-padding-inline);
2686
2746
  text-align:start;
2687
2747
  -webkit-text-decoration:var(--body-default-text-decoration);
2688
2748
  text-decoration:var(--body-default-text-decoration);
2689
2749
  text-transform:var(--body-default-text-case);
2690
2750
  width:100%;
2691
2751
  }
2692
- .bp_select_module_container--776e4 .bp_select_module_triggerBtn--776e4 span:first-child{
2752
+ .bp_select_module_container--a39b9 .bp_select_module_triggerBtn--a39b9 span:first-child{
2693
2753
  overflow:hidden;
2694
2754
  text-overflow:ellipsis;
2695
2755
  white-space:nowrap;
2696
2756
  }
2697
- .bp_select_module_container--776e4 .bp_select_module_triggerBtn--776e4:disabled{
2757
+ .bp_select_module_container--a39b9 .bp_select_module_triggerBtn--a39b9:disabled{
2698
2758
  cursor:default;
2699
2759
  }
2700
- .bp_select_module_container--776e4 .bp_select_module_triggerBtn--776e4.bp_select_module_readonly--776e4:not(:disabled){
2760
+ .bp_select_module_container--a39b9 .bp_select_module_triggerBtn--a39b9.bp_select_module_readonly--a39b9:not(:disabled){
2701
2761
  background-color:var(--gray-02);
2702
2762
  box-shadow:none;
2703
2763
  color:var(--text-text-on-light-secondary);
2704
2764
  cursor:default;
2705
2765
  }
2706
- .bp_select_module_container--776e4 .bp_select_module_triggerBtn--776e4:not(.bp_select_module_readonly--776e4):not(:disabled).bp_select_module_error--776e4,.bp_select_module_container--776e4 .bp_select_module_triggerBtn--776e4:not(.bp_select_module_readonly--776e4):not(:disabled)[aria-invalid=true]{
2707
- background-color:var(--surface-dropdown-surface-error);
2708
- border-bottom:var(--blueprint-select-border-error-bottom-width, var(--border-2)) solid var(--border-dropdown-border-error);
2709
- border-left:var(--blueprint-select-border-error-left-width, var(--border-2)) solid var(--border-dropdown-border-error);
2710
- border-right:var(--blueprint-select-border-error-right-width, var(--border-2)) solid var(--border-dropdown-border-error);
2711
- border-top:var(--blueprint-select-border-error-top-width, var(--border-2)) solid var(--border-dropdown-border-error);
2766
+ .bp_select_module_container--a39b9 .bp_select_module_triggerBtn--a39b9:not(.bp_select_module_readonly--a39b9):not(:disabled).bp_select_module_error--a39b9,.bp_select_module_container--a39b9 .bp_select_module_triggerBtn--a39b9:not(.bp_select_module_readonly--a39b9):not(:disabled)[aria-invalid=true]{
2767
+ background-color:var(----select-trigger-btn-error-bg-color);
2768
+ border-bottom:var(--select-trigger-btn-error-border-bottom);
2769
+ border-left:var(--select-trigger-btn-error-border-left);
2770
+ border-right:var(--select-trigger-btn-error-border-right);
2771
+ border-top:var(--select-trigger-btn-error-border-top);
2712
2772
  }
2713
- .bp_select_module_container--776e4 .bp_select_module_triggerBtn--776e4:not(.bp_select_module_readonly--776e4):focus,.bp_select_module_container--776e4 .bp_select_module_triggerBtn--776e4:not(.bp_select_module_readonly--776e4):not(:disabled).bp_select_module_error--776e4:focus,.bp_select_module_container--776e4 .bp_select_module_triggerBtn--776e4:not(.bp_select_module_readonly--776e4):not(:disabled)[aria-invalid=true]:focus{
2714
- background-color:var(--surface-dropdown-surface-focus);
2715
- border:var(--border-2) solid var(--outline-focus-on-light);
2773
+ .bp_select_module_container--a39b9 .bp_select_module_triggerBtn--a39b9:not(.bp_select_module_readonly--a39b9):focus,.bp_select_module_container--a39b9 .bp_select_module_triggerBtn--a39b9:not(.bp_select_module_readonly--a39b9):not(:disabled).bp_select_module_error--a39b9:focus,.bp_select_module_container--a39b9 .bp_select_module_triggerBtn--a39b9:not(.bp_select_module_readonly--a39b9):not(:disabled)[aria-invalid=true]:focus{
2774
+ background-color:var(--select-trigger-btn-focus-bg-color);
2775
+ border:var(--select-trigger-btn-focus-border);
2716
2776
  }
2717
- .bp_select_module_container--776e4 .bp_select_module_triggerBtn--776e4:not(.bp_select_module_readonly--776e4):not(:disabled):not(:focus):not(.bp_select_module_error--776e4):not([aria-invalid]):hover{
2718
- background-color:var(--surface-dropdown-surface-hover);
2719
- border-color:var(--border-dropdown-border-hover);
2777
+ .bp_select_module_container--a39b9 .bp_select_module_triggerBtn--a39b9:not(.bp_select_module_readonly--a39b9):not(:disabled):not(:focus):not(.bp_select_module_error--a39b9):not([aria-invalid]):hover{
2778
+ background-color:var(--select-trigger-btn-hover-bg-color);
2779
+ border-color:var(--select-trigger-btn-hover-border-color);
2720
2780
  }
2721
- .bp_select_module_container--776e4 .bp_select_module_triggerBtn--776e4 .bp_select_module_iconWrapper--776e4{
2781
+ .bp_select_module_container--a39b9 .bp_select_module_triggerBtn--a39b9 .bp_select_module_iconWrapper--a39b9{
2722
2782
  flex-shrink:0;
2723
2783
  -webkit-user-select:none;
2724
2784
  user-select:none;
2725
2785
  }
2726
- .bp_select_module_container--776e4 .bp_select_module_triggerBtn--776e4 .bp_select_module_iconCaret--776e4{
2786
+ .bp_select_module_container--a39b9 .bp_select_module_triggerBtn--a39b9 .bp_select_module_iconCaret--a39b9{
2727
2787
  display:block;
2728
- height:var(--size-2);
2729
- width:var(--size-2);
2788
+ height:var(--select-trigger-btn-caret-height);
2789
+ width:var(--select-trigger-btn-caret-width);
2730
2790
  }
2731
- .bp_select_module_container--776e4 .bp_select_module_triggerBtn--776e4 .bp_select_module_iconCaret--776e4 path{
2732
- fill:var(--icon-icon-on-light);
2791
+ .bp_select_module_container--a39b9 .bp_select_module_triggerBtn--a39b9 .bp_select_module_iconCaret--a39b9 path{
2792
+ fill:var(--select-trigger-btn-caret-color);
2733
2793
  }
2734
- .bp_select_module_container--776e4 .bp_select_module_triggerBtn--776e4 .bp_select_module_iconPencilCrossed--776e4{
2794
+ .bp_select_module_container--a39b9 .bp_select_module_triggerBtn--a39b9 .bp_select_module_iconPencilCrossed--a39b9{
2735
2795
  display:block;
2736
- height:var(--size-4);
2737
- width:var(--size-4);
2796
+ height:var(--select-trigger-btn-pencil-height);
2797
+ width:var(--select-trigger-btn-pencil-width);
2738
2798
  }
2739
- .bp_select_module_container--776e4 .bp_select_module_triggerBtn--776e4[data-state=open] .bp_select_module_icon--776e4{
2799
+ .bp_select_module_container--a39b9 .bp_select_module_triggerBtn--a39b9[data-state=open] .bp_select_module_icon--a39b9{
2740
2800
  transform:rotate(180deg);
2741
2801
  }
2742
2802
 
2743
- .bp_select_module_content--776e4{
2744
- background-color:var(--surface-menu-surface);
2745
- border:var(--border-1) solid var(--border-card-border);
2746
- border-radius:var(--radius-3);
2803
+ .bp_select_module_content--a39b9[data-modern=false]{
2804
+ --select-content-bg-color:var(--surface-menu-surface);
2805
+ --select-content-backdrop-filter:none;
2806
+ --select-content-border:var(--border-1) solid var(--border-card-border);
2807
+ --select-content-border-radius:var(--radius-3);
2808
+ --select-content-viewport-padding-block:var(--space-3);
2809
+ --select-content-viewport-padding-inline:var(--space-3);
2810
+ --select-content-viewport-option-gap:var(--space-2);
2811
+ --select-content-viewport-option-border:var(--border-2) solid #0000;
2812
+ --select-content-viewport-option-border-radius:var(--space-2);
2813
+ --select-content-viewport-option-padding-block:var(--space-2);
2814
+ --select-content-viewport-option-padding-inline:var(--space-10) var(--space-2);
2815
+ --select-content-viewport-option-focus-bg-color:var(--surface-menu-surface-focus);
2816
+ --select-content-viewport-option-focus-border:var(--border-2) solid var(--outline-focus-on-light);
2817
+ --select-content-viewport-option-active-bg-color:var(--surface-menu-surface-hover);
2818
+ --select-content-viewport-option-active-border:var(--border-2) solid #0000;
2819
+ --select-content-viewport-option-hover-bg-color:var(--surface-menu-surface-hover);
2820
+ --select-content-viewport-option-secondary-text-color:var(--text-text-on-light-secondary);
2821
+ --select-content-viewport-option-indicator-left:var(--space-2);
2822
+ --select-content-viewport-option-indicator-height:var(--size-9);
2823
+ --select-content-viewport-option-indicator-color:var(--icon-icon-on-light);
2824
+ --select-content-viewport-option-separator-height:var(--border-1);
2825
+ --select-content-viewport-option-separator-bg-color:var(--border-divider-border);
2826
+ --select-content-viewport-option-separator-margin-block:var(--space-2);
2827
+ }
2828
+
2829
+ .bp_select_module_content--a39b9[data-modern=true]{
2830
+ --select-content-bg-color:var(--bp-surface-menu-surface-dropdown);
2831
+ --select-content-backdrop-filter:blur(16px);
2832
+ --select-content-border:var(--bp-border-01) solid var(--bp-border-card-border);
2833
+ --select-content-border-radius:var(--bp-radius-10);
2834
+ --select-content-viewport-padding-block:var(--bp-space-030);
2835
+ --select-content-viewport-padding-inline:var(--bp-space-030);
2836
+ --select-content-viewport-option-gap:var(--bp-space-020);
2837
+ --select-content-viewport-option-border:var(--bp-border-02) solid #0000;
2838
+ --select-content-viewport-option-border-radius:var(--bp-radius-10);
2839
+ --select-content-viewport-option-padding-block:var(--bp-space-020);
2840
+ --select-content-viewport-option-padding-inline:var(--bp-space-100) var(--bp-space-020);
2841
+ --select-content-viewport-option-focus-bg-color:var(--bp-surface-menu-item-surface-hover);
2842
+ --select-content-viewport-option-focus-border:var(--bp-border-02) solid var(--bp-outline-focus-on-light);
2843
+ --select-content-viewport-option-active-bg-color:var(--bp-surface-menu-item-surface-hover);
2844
+ --select-content-viewport-option-active-border:var(--bp-border-02) solid #0000;
2845
+ --select-content-viewport-option-hover-bg-color:var(--bp-surface-menu-item-surface-hover);
2846
+ --select-content-viewport-option-secondary-text-color:var(--bp-text-text-on-light-secondary);
2847
+ --select-content-viewport-option-indicator-left:var(--bp-space-020);
2848
+ --select-content-viewport-option-indicator-height:var(--bp-size-090);
2849
+ --select-content-viewport-option-indicator-color:var(--bp-icon-icon-on-light);
2850
+ --select-content-viewport-option-separator-height:var(--bp-border-01);
2851
+ --select-content-viewport-option-separator-bg-color:var(--bp-border-divider-border);
2852
+ --select-content-viewport-option-separator-margin-block:var(--bp-space-020);
2853
+ }
2854
+
2855
+ .bp_select_module_content--a39b9{
2856
+ backdrop-filter:var(--select-content-backdrop-filter);
2857
+ background-color:var(--select-content-bg-color);
2858
+ border:var(--select-content-border);
2859
+ border-radius:var(--select-content-border-radius);
2747
2860
  box-shadow:var(--dropshadow-3);
2748
2861
  font-family:var(--body-default-font-family);
2749
2862
  font-size:var(--body-default-font-size);
@@ -2759,64 +2872,64 @@
2759
2872
  text-transform:var(--body-default-text-case);
2760
2873
  z-index:380;
2761
2874
  }
2762
- .bp_select_module_content--776e4 .bp_select_module_viewport--776e4{
2763
- padding-block:var(--space-3);
2764
- padding-inline:var(--space-3);
2875
+ .bp_select_module_content--a39b9 .bp_select_module_viewport--a39b9{
2876
+ padding-block:var(--select-content-viewport-padding-block);
2877
+ padding-inline:var(--select-content-viewport-padding-inline);
2765
2878
  }
2766
- .bp_select_module_content--776e4 .bp_select_module_viewport--776e4 .bp_select_module_option--776e4{
2767
- border:var(--border-2) solid #0000;
2768
- border-radius:var(--radius-3);
2879
+ .bp_select_module_content--a39b9 .bp_select_module_viewport--a39b9 .bp_select_module_option--a39b9{
2880
+ border:var(--select-content-viewport-option-border);
2881
+ border-radius:var(--select-content-viewport-option-border-radius);
2769
2882
  cursor:pointer;
2770
2883
  display:flex;
2771
2884
  flex-wrap:wrap;
2772
- gap:var(--space-2);
2885
+ gap:var(--select-content-viewport-option-gap);
2773
2886
  justify-content:space-between;
2774
2887
  outline:none;
2775
- padding-block:var(--space-2);
2776
- padding-inline:var(--space-10) var(--space-2);
2888
+ padding-block:var(--select-content-viewport-option-padding-block);
2889
+ padding-inline:var(--select-content-viewport-option-padding-inline);
2777
2890
  position:relative;
2778
2891
  -webkit-user-select:none;
2779
2892
  user-select:none;
2780
2893
  }
2781
- .bp_select_module_content--776e4 .bp_select_module_viewport--776e4 .bp_select_module_option--776e4[data-disabled]{
2894
+ .bp_select_module_content--a39b9 .bp_select_module_viewport--a39b9 .bp_select_module_option--a39b9[data-disabled]{
2782
2895
  opacity:60%;
2783
2896
  pointer-events:none;
2784
2897
  }
2785
- .bp_select_module_content--776e4 .bp_select_module_viewport--776e4 .bp_select_module_option--776e4[data-highlighted]{
2786
- background-color:var(--surface-menu-surface-focus);
2787
- border:var(--border-2) solid var(--outline-focus-on-light);
2898
+ .bp_select_module_content--a39b9 .bp_select_module_viewport--a39b9 .bp_select_module_option--a39b9[data-highlighted]{
2899
+ background-color:var(--select-content-viewport-option-focus-bg-color);
2900
+ border:var(--select-content-viewport-option-focus-border);
2788
2901
  }
2789
- .bp_select_module_content--776e4 .bp_select_module_viewport--776e4 .bp_select_module_option--776e4:active{
2790
- background-color:var(--surface-menu-surface-hover);
2791
- border:var(--border-2) solid #0000;
2902
+ .bp_select_module_content--a39b9 .bp_select_module_viewport--a39b9 .bp_select_module_option--a39b9:active{
2903
+ background-color:var(--select-content-viewport-option-active-bg-color);
2904
+ border:var(--select-content-viewport-option-active-border);
2792
2905
  }
2793
- .bp_select_module_content--776e4 .bp_select_module_viewport--776e4 .bp_select_module_option--776e4:hover{
2794
- background-color:var(--surface-menu-surface-hover);
2906
+ .bp_select_module_content--a39b9 .bp_select_module_viewport--a39b9 .bp_select_module_option--a39b9:hover{
2907
+ background-color:var(--select-content-viewport-option-hover-bg-color);
2795
2908
  }
2796
- .bp_select_module_content--776e4 .bp_select_module_viewport--776e4 .bp_select_module_option--776e4 span:first-child{
2909
+ .bp_select_module_content--a39b9 .bp_select_module_viewport--a39b9 .bp_select_module_option--a39b9 span:first-child{
2797
2910
  overflow:hidden;
2798
2911
  overflow-wrap:break-word;
2799
2912
  }
2800
- .bp_select_module_content--776e4 .bp_select_module_viewport--776e4 .bp_select_module_option--776e4 .bp_select_module_secondaryText--776e4{
2801
- color:var(--text-text-on-light-secondary);
2913
+ .bp_select_module_content--a39b9 .bp_select_module_viewport--a39b9 .bp_select_module_option--a39b9 .bp_select_module_secondaryText--a39b9{
2914
+ color:var(--select-content-viewport-option-secondary-text-color);
2802
2915
  }
2803
- .bp_select_module_content--776e4 .bp_select_module_viewport--776e4 .bp_select_module_option--776e4 .bp_select_module_indicator--776e4{
2916
+ .bp_select_module_content--a39b9 .bp_select_module_viewport--a39b9 .bp_select_module_option--a39b9 .bp_select_module_indicator--a39b9{
2804
2917
  align-items:center;
2805
2918
  display:flex;
2806
- height:var(--size-9);
2919
+ height:var(--select-content-viewport-option-indicator-height);
2807
2920
  justify-content:center;
2808
- left:var(--space-2);
2921
+ left:var(--select-content-viewport-option-indicator-left);
2809
2922
  position:absolute;
2810
2923
  top:0;
2811
2924
  }
2812
- .bp_select_module_content--776e4 .bp_select_module_viewport--776e4 .bp_select_module_option--776e4 .bp_select_module_indicator--776e4 path{
2813
- fill:var(--icon-icon-on-light);
2925
+ .bp_select_module_content--a39b9 .bp_select_module_viewport--a39b9 .bp_select_module_option--a39b9 .bp_select_module_indicator--a39b9 path{
2926
+ fill:var(--select-content-viewport-option-indicator-color);
2814
2927
  }
2815
- .bp_select_module_content--776e4 .bp_select_module_viewport--776e4 .bp_select_module_separator--776e4{
2816
- background-color:var(--border-divider-border);
2928
+ .bp_select_module_content--a39b9 .bp_select_module_viewport--a39b9 .bp_select_module_separator--a39b9{
2929
+ background-color:var(--select-content-bg-color-viewport-option-separator-bg-color);
2817
2930
  flex-shrink:0;
2818
- height:var(--border-1);
2819
- margin-block:var(--space-2);
2931
+ height:var(--select-content-bg-color-viewport-option-separator-height);
2932
+ margin-block:var(--select-content-bg-color-viewport-option-separator-margin-block);
2820
2933
  }
2821
2934
 
2822
2935
  .bp_content_card_module_card--0a584{
package/dist/lib-esm/select/select.js CHANGED
@@ -1,9 +1,12 @@
1
1
  import { jsx, jsxs } from 'react/jsx-runtime';
2
2
  import { PencilCrossed, Caret, Checkmark } from '@box/blueprint-web-assets/icons/Fill';
3
+ import { CheckmarkCircle } from '@box/blueprint-web-assets/icons/Medium';
4
+ import { Size5 } from '@box/blueprint-web-assets/tokens/px-tokens';
3
5
  import * as ScrollArea from '@radix-ui/react-scroll-area';
4
6
  import * as SelectPrimitive from '@radix-ui/react-select';
5
7
  import clsx from 'clsx';
6
8
  import { forwardRef, useCallback } from 'react';
9
+ import { useBlueprintModernization } from '../blueprint-modernization-context/useBlueprintModernization.js';
7
10
  import { InlineError } from '../primitives/inline-error/inline-error.js';
8
11
  import { Text } from '../text/text.js';
9
12
  import { useLabelable } from '../util-components/labelable/useLabelable.js';
@@ -66,10 +69,14 @@ const Root = /*#__PURE__*/forwardRef((props, forwardedRef) => {
66
69
  }) : jsx(Caret, {
67
70
  className: styles.iconCaret
68
71
  });
72
+ const {
73
+ enableModernizedComponents
74
+ } = useBlueprintModernization();
69
75
  return jsxs("div", {
70
76
  className: clsx(styles.container, {
71
77
  [styles.disabled]: disabled
72
78
  }, className),
79
+ "data-modern": enableModernizedComponents,
73
80
  children: [jsx(Label, {
74
81
  className: styles.label,
75
82
  hideLabel: hideLabel
@@ -114,12 +121,16 @@ const Content = /*#__PURE__*/forwardRef((props, forwardedRef) => {
114
121
  container,
115
122
  ...contentProps
116
123
  } = props;
124
+ const {
125
+ enableModernizedComponents
126
+ } = useBlueprintModernization();
117
127
  return jsx(SelectPrimitive.Portal, {
118
128
  container: container,
119
129
  children: jsx(SelectPrimitive.Content, {
120
130
  ...contentProps,
121
131
  ref: forwardedRef,
122
132
  className: clsx(styles.content, className),
133
+ "data-modern": enableModernizedComponents,
123
134
  position: "popper",
124
135
  sideOffset: 8,
125
136
  children: jsx(ScrollArea.Root, {
@@ -144,6 +155,9 @@ const Option = /*#__PURE__*/forwardRef((props, forwardedRef) => {
144
155
  } = props;
145
156
  const onPointerLeave = useCallback(event => event.preventDefault(), []);
146
157
  const onPointerMove = useCallback(event => event.preventDefault(), []);
158
+ const {
159
+ enableModernizedComponents
160
+ } = useBlueprintModernization();
147
161
  return jsxs(SelectPrimitive.Item, {
148
162
  ...itemProps,
149
163
  ref: forwardedRef,
@@ -157,7 +171,10 @@ const Option = /*#__PURE__*/forwardRef((props, forwardedRef) => {
157
171
  children: secondaryText
158
172
  }), !itemProps.disabled && jsx(SelectPrimitive.ItemIndicator, {
159
173
  className: styles.indicator,
160
- children: jsx(Checkmark, {})
174
+ children: enableModernizedComponents ? jsx(CheckmarkCircle, {
175
+ height: Size5,
176
+ width: Size5
177
+ }) : jsx(Checkmark, {})
161
178
  })]
162
179
  });
163
180
  });
package/dist/lib-esm/select/select.module.js CHANGED
@@ -1,4 +1,4 @@
1
1
  import '../index.css';
2
- var styles = {"container":"bp_select_module_container--776e4","disabled":"bp_select_module_disabled--776e4","label":"bp_select_module_label--776e4","triggerBtn":"bp_select_module_triggerBtn--776e4","readonly":"bp_select_module_readonly--776e4","error":"bp_select_module_error--776e4","iconWrapper":"bp_select_module_iconWrapper--776e4","iconCaret":"bp_select_module_iconCaret--776e4","iconPencilCrossed":"bp_select_module_iconPencilCrossed--776e4","icon":"bp_select_module_icon--776e4","content":"bp_select_module_content--776e4","viewport":"bp_select_module_viewport--776e4","option":"bp_select_module_option--776e4","secondaryText":"bp_select_module_secondaryText--776e4","indicator":"bp_select_module_indicator--776e4","separator":"bp_select_module_separator--776e4"};
2
+ var styles = {"container":"bp_select_module_container--a39b9","disabled":"bp_select_module_disabled--a39b9","label":"bp_select_module_label--a39b9","triggerBtn":"bp_select_module_triggerBtn--a39b9","readonly":"bp_select_module_readonly--a39b9","error":"bp_select_module_error--a39b9","iconWrapper":"bp_select_module_iconWrapper--a39b9","iconCaret":"bp_select_module_iconCaret--a39b9","iconPencilCrossed":"bp_select_module_iconPencilCrossed--a39b9","icon":"bp_select_module_icon--a39b9","content":"bp_select_module_content--a39b9","viewport":"bp_select_module_viewport--a39b9","option":"bp_select_module_option--a39b9","secondaryText":"bp_select_module_secondaryText--a39b9","indicator":"bp_select_module_indicator--a39b9","separator":"bp_select_module_separator--a39b9"};
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": "12.46.0",
3
+ "version": "12.47.0",
4
4
  "type": "module",
5
5
  "license": "SEE LICENSE IN LICENSE",
6
6
  "publishConfig": {
@@ -47,7 +47,7 @@
47
47
  "dependencies": {
48
48
  "@ariakit/react": "0.4.15",
49
49
  "@ariakit/react-core": "0.4.15",
50
- "@box/blueprint-web-assets": "^4.61.0",
50
+ "@box/blueprint-web-assets": "^4.61.3",
51
51
  "@internationalized/date": "^3.7.0",
52
52
  "@radix-ui/react-accordion": "1.1.2",
53
53
  "@radix-ui/react-checkbox": "1.0.4",
@@ -77,7 +77,7 @@
77
77
  "type-fest": "^3.2.0"
78
78
  },
79
79
  "devDependencies": {
80
- "@box/storybook-utils": "^0.13.15",
80
+ "@box/storybook-utils": "^0.13.16",
81
81
  "@types/react": "^18.0.0",
82
82
  "@types/react-dom": "^18.0.0",
83
83
  "react": "^18.3.0",