@box/blueprint-web 8.2.0 → 8.3.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.
@@ -1,4 +1,4 @@
1
1
  import '../index.css';
2
- var styles = {"datePicker":"bp_date_picker_module_datePicker--c2977","disabled":"bp_date_picker_module_disabled--c2977","label":"bp_date_picker_module_label--c2977","group":"bp_date_picker_module_group--c2977","groupContainer":"bp_date_picker_module_groupContainer--c2977","error":"bp_date_picker_module_error--c2977","groupContainerInput":"bp_date_picker_module_groupContainerInput--c2977","groupContainerInputSegment":"bp_date_picker_module_groupContainerInputSegment--c2977","button":"bp_date_picker_module_button--c2977","clear":"bp_date_picker_module_clear--c2977","popover":"bp_date_picker_module_popover--c2977","slide":"bp_date_picker_module_slide--c2977","popoverContent":"bp_date_picker_module_popoverContent--c2977","inlineError":"bp_date_picker_module_inlineError--c2977"};
2
+ var styles = {"datePicker":"bp_date_picker_module_datePicker--bde5d","disabled":"bp_date_picker_module_disabled--bde5d","label":"bp_date_picker_module_label--bde5d","group":"bp_date_picker_module_group--bde5d","groupContainer":"bp_date_picker_module_groupContainer--bde5d","error":"bp_date_picker_module_error--bde5d","groupContainerInput":"bp_date_picker_module_groupContainerInput--bde5d","groupContainerInputSegment":"bp_date_picker_module_groupContainerInputSegment--bde5d","button":"bp_date_picker_module_button--bde5d","clear":"bp_date_picker_module_clear--bde5d","inlineError":"bp_date_picker_module_inlineError--bde5d","datePickerPopoverContent":"bp_date_picker_module_datePickerPopoverContent--bde5d","slide":"bp_date_picker_module_slide--bde5d"};
3
3
 
4
4
  export { styles as default };
package/lib-esm/index.css CHANGED
@@ -2773,16 +2773,16 @@
2773
2773
  text-decoration:line-through;
2774
2774
  }
2775
2775
 
2776
- .bp_date_picker_module_datePicker--c2977{
2776
+ .bp_date_picker_module_datePicker--bde5d{
2777
2777
  width:100%;
2778
2778
  }
2779
- .bp_date_picker_module_datePicker--c2977.bp_date_picker_module_disabled--c2977{
2779
+ .bp_date_picker_module_datePicker--bde5d.bp_date_picker_module_disabled--bde5d{
2780
2780
  opacity:60%;
2781
2781
  pointer-events:none;
2782
2782
  -webkit-user-select:none;
2783
2783
  user-select:none;
2784
2784
  }
2785
- .bp_date_picker_module_datePicker--c2977 .bp_date_picker_module_label--c2977{
2785
+ .bp_date_picker_module_datePicker--bde5d .bp_date_picker_module_label--bde5d{
2786
2786
  cursor:default;
2787
2787
  display:block;
2788
2788
  font-weight:700;
@@ -2790,7 +2790,7 @@
2790
2790
  width:-moz-fit-content;
2791
2791
  width:fit-content;
2792
2792
  }
2793
- .bp_date_picker_module_datePicker--c2977 .bp_date_picker_module_group--c2977,.bp_date_picker_module_datePicker--c2977 .bp_date_picker_module_label--c2977{
2793
+ .bp_date_picker_module_datePicker--bde5d .bp_date_picker_module_group--bde5d,.bp_date_picker_module_datePicker--bde5d .bp_date_picker_module_label--bde5d{
2794
2794
  font-family:Lato, -apple-system, BlinkMacSystemFont, "San Francisco", "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
2795
2795
  font-size:.875rem;
2796
2796
  letter-spacing:.01875rem;
@@ -2798,7 +2798,7 @@
2798
2798
  text-decoration:none;
2799
2799
  text-transform:none;
2800
2800
  }
2801
- .bp_date_picker_module_datePicker--c2977 .bp_date_picker_module_group--c2977{
2801
+ .bp_date_picker_module_datePicker--bde5d .bp_date_picker_module_group--bde5d{
2802
2802
  align-items:center;
2803
2803
  box-shadow:var(--innershadow-1);
2804
2804
  display:inline-flex;
@@ -2806,7 +2806,7 @@
2806
2806
  position:relative;
2807
2807
  width:100%;
2808
2808
  }
2809
- .bp_date_picker_module_datePicker--c2977 .bp_date_picker_module_group--c2977 .bp_date_picker_module_groupContainer--c2977{
2809
+ .bp_date_picker_module_datePicker--bde5d .bp_date_picker_module_group--bde5d .bp_date_picker_module_groupContainer--bde5d{
2810
2810
  align-items:center;
2811
2811
  border-radius:var(--radius-2);
2812
2812
  display:inline-flex;
@@ -2815,23 +2815,23 @@
2815
2815
  position:relative;
2816
2816
  width:100%;
2817
2817
  }
2818
- .bp_date_picker_module_datePicker--c2977 .bp_date_picker_module_group--c2977 .bp_date_picker_module_groupContainer--c2977:focus-within{
2818
+ .bp_date_picker_module_datePicker--bde5d .bp_date_picker_module_group--bde5d .bp_date_picker_module_groupContainer--bde5d:focus-within{
2819
2819
  outline:var(--border-2) solid var(--outline-focus-on-light);
2820
2820
  }
2821
- .bp_date_picker_module_datePicker--c2977 .bp_date_picker_module_group--c2977 .bp_date_picker_module_groupContainer--c2977.bp_date_picker_module_error--c2977:not(:focus-within){
2821
+ .bp_date_picker_module_datePicker--bde5d .bp_date_picker_module_group--bde5d .bp_date_picker_module_groupContainer--bde5d.bp_date_picker_module_error--bde5d:not(:focus-within){
2822
2822
  outline:var(--border-2) solid var(--text-text-error-on-light);
2823
2823
  }
2824
- .bp_date_picker_module_datePicker--c2977 .bp_date_picker_module_group--c2977 .bp_date_picker_module_groupContainer--c2977.bp_date_picker_module_error--c2977:focus-within{
2824
+ .bp_date_picker_module_datePicker--bde5d .bp_date_picker_module_group--bde5d .bp_date_picker_module_groupContainer--bde5d.bp_date_picker_module_error--bde5d:focus-within{
2825
2825
  outline:var(--border-2) solid var(--outline-focus-on-light);
2826
2826
  }
2827
- .bp_date_picker_module_datePicker--c2977 .bp_date_picker_module_group--c2977 .bp_date_picker_module_groupContainer--c2977 .bp_date_picker_module_groupContainerInput--c2977{
2827
+ .bp_date_picker_module_datePicker--bde5d .bp_date_picker_module_group--bde5d .bp_date_picker_module_groupContainer--bde5d .bp_date_picker_module_groupContainerInput--bde5d{
2828
2828
  align-items:center;
2829
2829
  display:inline-flex;
2830
2830
  height:var(--size-10);
2831
2831
  text-transform:uppercase;
2832
2832
  white-space:nowrap;
2833
2833
  }
2834
- .bp_date_picker_module_datePicker--c2977 .bp_date_picker_module_group--c2977 .bp_date_picker_module_groupContainer--c2977 .bp_date_picker_module_groupContainerInput--c2977 .bp_date_picker_module_groupContainerInputSegment--c2977{
2834
+ .bp_date_picker_module_datePicker--bde5d .bp_date_picker_module_group--bde5d .bp_date_picker_module_groupContainer--bde5d .bp_date_picker_module_groupContainerInput--bde5d .bp_date_picker_module_groupContainerInputSegment--bde5d{
2835
2835
  border:unset;
2836
2836
  border-radius:unset;
2837
2837
  box-shadow:unset;
@@ -2842,18 +2842,18 @@
2842
2842
  transition:unset;
2843
2843
  width:unset;
2844
2844
  }
2845
- .bp_date_picker_module_datePicker--c2977 .bp_date_picker_module_group--c2977 .bp_date_picker_module_groupContainer--c2977 .bp_date_picker_module_groupContainerInput--c2977 .bp_date_picker_module_groupContainerInputSegment--c2977[data-placeholder]{
2845
+ .bp_date_picker_module_datePicker--bde5d .bp_date_picker_module_group--bde5d .bp_date_picker_module_groupContainer--bde5d .bp_date_picker_module_groupContainerInput--bde5d .bp_date_picker_module_groupContainerInputSegment--bde5d[data-placeholder]{
2846
2846
  color:var(--text-text-on-light-secondary);
2847
2847
  }
2848
- .bp_date_picker_module_datePicker--c2977 .bp_date_picker_module_group--c2977 .bp_date_picker_module_groupContainer--c2977 .bp_date_picker_module_groupContainerInput--c2977 .bp_date_picker_module_groupContainerInputSegment--c2977:focus{
2848
+ .bp_date_picker_module_datePicker--bde5d .bp_date_picker_module_group--bde5d .bp_date_picker_module_groupContainer--bde5d .bp_date_picker_module_groupContainerInput--bde5d .bp_date_picker_module_groupContainerInputSegment--bde5d:focus{
2849
2849
  background:var(--light-blue-20);
2850
2850
  caret-color:#0000;
2851
2851
  outline:none;
2852
2852
  }
2853
- .bp_date_picker_module_datePicker--c2977 .bp_date_picker_module_group--c2977 .bp_date_picker_module_groupContainer--c2977 .bp_date_picker_module_groupContainerInput--c2977 .bp_date_picker_module_groupContainerInputSegment--c2977:focus[data-placeholder]{
2853
+ .bp_date_picker_module_datePicker--bde5d .bp_date_picker_module_group--bde5d .bp_date_picker_module_groupContainer--bde5d .bp_date_picker_module_groupContainerInput--bde5d .bp_date_picker_module_groupContainerInputSegment--bde5d:focus[data-placeholder]{
2854
2854
  color:var(--text-text-on-light);
2855
2855
  }
2856
- .bp_date_picker_module_datePicker--c2977 .bp_date_picker_module_group--c2977 .bp_date_picker_module_button--c2977{
2856
+ .bp_date_picker_module_datePicker--bde5d .bp_date_picker_module_group--bde5d .bp_date_picker_module_button--bde5d{
2857
2857
  align-items:center;
2858
2858
  background-color:initial;
2859
2859
  border:none;
@@ -2868,52 +2868,33 @@
2868
2868
  right:var(--space-2);
2869
2869
  width:var(--size-6);
2870
2870
  }
2871
- .bp_date_picker_module_datePicker--c2977 .bp_date_picker_module_group--c2977 .bp_date_picker_module_button--c2977.bp_date_picker_module_clear--c2977{
2871
+ .bp_date_picker_module_datePicker--bde5d .bp_date_picker_module_group--bde5d .bp_date_picker_module_button--bde5d.bp_date_picker_module_clear--bde5d{
2872
2872
  right:var(--size-9);
2873
2873
  }
2874
- .bp_date_picker_module_datePicker--c2977 .bp_date_picker_module_group--c2977 .bp_date_picker_module_button--c2977:focus-visible,.bp_date_picker_module_datePicker--c2977 .bp_date_picker_module_group--c2977 .bp_date_picker_module_button--c2977[data-focus-visible]{
2874
+ .bp_date_picker_module_datePicker--bde5d .bp_date_picker_module_group--bde5d .bp_date_picker_module_button--bde5d:focus-visible,.bp_date_picker_module_datePicker--bde5d .bp_date_picker_module_group--bde5d .bp_date_picker_module_button--bde5d[data-focus-visible]{
2875
2875
  background-color:var(--surface-cta-surface-icon-pressed);
2876
2876
  outline:var(--border-2) solid var(--outline-focus-on-light);
2877
2877
  }
2878
- .bp_date_picker_module_datePicker--c2977 .bp_date_picker_module_group--c2977 .bp_date_picker_module_button--c2977:hover{
2878
+ .bp_date_picker_module_datePicker--bde5d .bp_date_picker_module_group--bde5d .bp_date_picker_module_button--bde5d:hover{
2879
2879
  background:var(--surface-cta-surface-icon-hover);
2880
2880
  }
2881
- .bp_date_picker_module_datePicker--c2977 .bp_date_picker_module_group--c2977 .bp_date_picker_module_button--c2977:hover *{
2881
+ .bp_date_picker_module_datePicker--bde5d .bp_date_picker_module_group--bde5d .bp_date_picker_module_button--bde5d:hover *{
2882
2882
  fill:var(--icon-cta-icon-hover);
2883
2883
  }
2884
- .bp_date_picker_module_datePicker--c2977 .bp_date_picker_module_group--c2977 .bp_date_picker_module_button--c2977:active{
2884
+ .bp_date_picker_module_datePicker--bde5d .bp_date_picker_module_group--bde5d .bp_date_picker_module_button--bde5d:active{
2885
2885
  background:var(--surface-cta-surface-icon-pressed);
2886
2886
  }
2887
- .bp_date_picker_module_datePicker--c2977 .bp_date_picker_module_group--c2977 .bp_date_picker_module_button--c2977:active *{
2887
+ .bp_date_picker_module_datePicker--bde5d .bp_date_picker_module_group--bde5d .bp_date_picker_module_button--bde5d:active *{
2888
2888
  fill:var(--icon-cta-icon-pressed);
2889
2889
  }
2890
- .bp_date_picker_module_datePicker--c2977 .bp_date_picker_module_group--c2977 .bp_date_picker_module_button--c2977:disabled{
2890
+ .bp_date_picker_module_datePicker--bde5d .bp_date_picker_module_group--bde5d .bp_date_picker_module_button--bde5d:disabled{
2891
2891
  opacity:1;
2892
2892
  }
2893
- .bp_date_picker_module_datePicker--c2977 .bp_date_picker_module_popover--c2977{
2894
- box-shadow:var(--dropshadow-3);
2895
- overflow:auto;
2896
- }
2897
- .bp_date_picker_module_datePicker--c2977 .bp_date_picker_module_popover--c2977[data-placement=top]{
2898
- --popover-slide-translation:translateY($animationTranslateDistance);
2899
- }
2900
- .bp_date_picker_module_datePicker--c2977 .bp_date_picker_module_popover--c2977[data-placement=bottom]{
2901
- --popover-slide-translation:translateY(-8px);
2902
- }
2903
- .bp_date_picker_module_datePicker--c2977 .bp_date_picker_module_popover--c2977[data-entering]{
2904
- animation:bp_date_picker_module_slide--c2977 var(--animation-duration-2);
2905
- }
2906
- .bp_date_picker_module_datePicker--c2977 .bp_date_picker_module_popover--c2977[data-exiting]{
2907
- animation:bp_date_picker_module_slide--c2977 var(--animation-duration-2) reverse var(--animation-easing-ease-base);
2908
- }
2909
- .bp_date_picker_module_datePicker--c2977 .bp_date_picker_module_popoverContent--c2977{
2910
- z-index:380;
2911
- }
2912
- .bp_date_picker_module_datePicker--c2977 .bp_date_picker_module_inlineError--c2977{
2893
+ .bp_date_picker_module_datePicker--bde5d .bp_date_picker_module_inlineError--bde5d{
2913
2894
  margin-block-start:var(--space-2);
2914
2895
  }
2915
2896
 
2916
- @keyframes bp_date_picker_module_slide--c2977{
2897
+ @keyframes bp_date_picker_module_slide--bde5d{
2917
2898
  from{
2918
2899
  opacity:0;
2919
2900
  transform:var(--popover-slide-translation);
@@ -2923,6 +2904,9 @@
2923
2904
  transform:translateY(0);
2924
2905
  }
2925
2906
  }
2907
+ .bp_date_picker_module_datePickerPopoverContent--bde5d{
2908
+ z-index:380;
2909
+ }
2926
2910
 
2927
2911
  .bp_divider_module_divider--7d37b{
2928
2912
  background-color:var(--border-divider-border);
@@ -4803,22 +4787,23 @@ table.bp_inline_table_module_inlineTable--b023b tr:not(:last-child) td{
4803
4787
  display:flex;
4804
4788
  flex-direction:row;
4805
4789
  }
4806
- .bp_select_menu_grid_option_module_square--921c1{
4790
+
4791
+ .bp_select_menu_grid_option_module_square--6ad66{
4807
4792
  height:var(--size-8);
4808
4793
  width:var(--size-8);
4809
4794
  }
4810
- .bp_select_menu_grid_option_module_square--921c1,.bp_select_menu_grid_option_module_square--921c1 .bp_select_menu_grid_option_module_outlineHost--921c1{
4795
+ .bp_select_menu_grid_option_module_square--6ad66,.bp_select_menu_grid_option_module_square--6ad66 .bp_select_menu_grid_option_module_outlineHost--6ad66{
4811
4796
  align-items:center;
4812
4797
  border-radius:var(--radius-3);
4813
4798
  display:flex;
4814
4799
  justify-content:center;
4815
4800
  }
4816
- .bp_select_menu_grid_option_module_square--921c1 .bp_select_menu_grid_option_module_outlineHost--921c1{
4801
+ .bp_select_menu_grid_option_module_square--6ad66 .bp_select_menu_grid_option_module_outlineHost--6ad66{
4817
4802
  height:var(--size-7);
4818
4803
  width:var(--size-7);
4819
4804
  }
4820
4805
 
4821
- .bp_select_menu_grid_option_module_circle--921c1{
4806
+ .bp_select_menu_grid_option_module_circle--6ad66{
4822
4807
  align-items:center;
4823
4808
  background-clip:content-box;
4824
4809
  background-color:var(--gray-white);
@@ -4830,10 +4815,10 @@ table.bp_inline_table_module_inlineTable--b023b tr:not(:last-child) td{
4830
4815
  justify-content:center;
4831
4816
  width:var(--size-8);
4832
4817
  }
4833
- .bp_select_menu_grid_option_module_circle--921c1.bp_select_menu_grid_option_module_loading--921c1{
4818
+ .bp_select_menu_grid_option_module_circle--6ad66.bp_select_menu_grid_option_module_loading--6ad66{
4834
4819
  border-color:var(--gray-white);
4835
4820
  }
4836
- .bp_select_menu_grid_option_module_circle--921c1 .bp_select_menu_grid_option_module_color--921c1{
4821
+ .bp_select_menu_grid_option_module_circle--6ad66 .bp_select_menu_grid_option_module_color--6ad66{
4837
4822
  background-color:var(--circleColor);
4838
4823
  border:var(--border-1) solid var(--circleBorderColor);
4839
4824
  border-radius:50%;
@@ -4841,8 +4826,22 @@ table.bp_inline_table_module_inlineTable--b023b tr:not(:last-child) td{
4841
4826
  height:var(--size-6);
4842
4827
  width:var(--size-6);
4843
4828
  }
4829
+ .bp_select_menu_grid_option_module_circle--6ad66 .bp_select_menu_grid_option_module_strikeThrough--6ad66{
4830
+ position:relative;
4831
+ }
4832
+ .bp_select_menu_grid_option_module_circle--6ad66 .bp_select_menu_grid_option_module_strikeThrough--6ad66::after{
4833
+ background-color:var(--watermelon-red-100);
4834
+ border-radius:var(--radius-1);
4835
+ content:"";
4836
+ height:.15625rem;
4837
+ left:.0625rem;
4838
+ position:absolute;
4839
+ top:45%;
4840
+ transform:rotate(-45deg);
4841
+ width:90%;
4842
+ }
4844
4843
 
4845
- .bp_select_menu_grid_option_module_optionButton--921c1{
4844
+ .bp_select_menu_grid_option_module_optionButton--6ad66{
4846
4845
  align-items:center;
4847
4846
  background-color:initial;
4848
4847
  border:none;
@@ -4856,32 +4855,32 @@ table.bp_inline_table_module_inlineTable--b023b tr:not(:last-child) td{
4856
4855
  user-select:none;
4857
4856
  width:var(--size-8);
4858
4857
  }
4859
- .bp_select_menu_grid_option_module_optionButton--921c1:hover .bp_select_menu_grid_option_module_square--921c1,.bp_select_menu_grid_option_module_optionButton--921c1[data-focus-visible] .bp_select_menu_grid_option_module_square--921c1{
4858
+ .bp_select_menu_grid_option_module_optionButton--6ad66:hover .bp_select_menu_grid_option_module_square--6ad66,.bp_select_menu_grid_option_module_optionButton--6ad66[data-focus-visible] .bp_select_menu_grid_option_module_square--6ad66{
4860
4859
  background-color:var(--surface-cta-surface-outline-hover);
4861
4860
  }
4862
- .bp_select_menu_grid_option_module_optionButton--921c1:hover .bp_select_menu_grid_option_module_circle--921c1,.bp_select_menu_grid_option_module_optionButton--921c1[data-focus-visible] .bp_select_menu_grid_option_module_circle--921c1{
4861
+ .bp_select_menu_grid_option_module_optionButton--6ad66:hover .bp_select_menu_grid_option_module_circle--6ad66,.bp_select_menu_grid_option_module_optionButton--6ad66[data-focus-visible] .bp_select_menu_grid_option_module_circle--6ad66{
4863
4862
  background-color:var(--surface-option-grid-surface-hover);
4864
4863
  }
4865
- .bp_select_menu_grid_option_module_optionButton--921c1.bp_select_menu_grid_option_module_active--921c1 .bp_select_menu_grid_option_module_square--921c1,.bp_select_menu_grid_option_module_optionButton--921c1:active .bp_select_menu_grid_option_module_square--921c1{
4864
+ .bp_select_menu_grid_option_module_optionButton--6ad66.bp_select_menu_grid_option_module_active--6ad66 .bp_select_menu_grid_option_module_square--6ad66,.bp_select_menu_grid_option_module_optionButton--6ad66:active .bp_select_menu_grid_option_module_square--6ad66{
4866
4865
  background-color:var(--surface-cta-surface-outline-pressed);
4867
4866
  }
4868
- .bp_select_menu_grid_option_module_optionButton--921c1.bp_select_menu_grid_option_module_active--921c1 .bp_select_menu_grid_option_module_circle--921c1,.bp_select_menu_grid_option_module_optionButton--921c1:active .bp_select_menu_grid_option_module_circle--921c1{
4867
+ .bp_select_menu_grid_option_module_optionButton--6ad66.bp_select_menu_grid_option_module_active--6ad66 .bp_select_menu_grid_option_module_circle--6ad66,.bp_select_menu_grid_option_module_optionButton--6ad66:active .bp_select_menu_grid_option_module_circle--6ad66{
4869
4868
  border:var(--border-2) solid var(--circleColor);
4870
4869
  }
4871
- .bp_select_menu_grid_option_module_optionButton--921c1.bp_select_menu_grid_option_module_loading--921c1,.bp_select_menu_grid_option_module_optionButton--921c1:disabled{
4870
+ .bp_select_menu_grid_option_module_optionButton--6ad66.bp_select_menu_grid_option_module_loading--6ad66,.bp_select_menu_grid_option_module_optionButton--6ad66:disabled{
4872
4871
  cursor:default;
4873
4872
  }
4874
- .bp_select_menu_grid_option_module_optionButton--921c1[data-focus-visible] .bp_select_menu_grid_option_module_outlineHost--921c1{
4873
+ .bp_select_menu_grid_option_module_optionButton--6ad66[data-focus-visible] .bp_select_menu_grid_option_module_outlineHost--6ad66{
4875
4874
  box-shadow:0 0 0 var(--border-2) var(--outline-focus-on-light);
4876
4875
  }
4877
- .bp_select_menu_grid_option_module_optionButton--921c1[data-focus-visible] .bp_select_menu_grid_option_module_circle--921c1{
4876
+ .bp_select_menu_grid_option_module_optionButton--6ad66[data-focus-visible] .bp_select_menu_grid_option_module_circle--6ad66{
4878
4877
  border-color:var(--surface-option-grid-surface-hover);
4879
4878
  }
4880
- .bp_select_menu_grid_option_module_optionButton--921c1[data-focus-visible].bp_select_menu_grid_option_module_active--921c1 .bp_select_menu_grid_option_module_circle--921c1,.bp_select_menu_grid_option_module_optionButton--921c1[data-focus-visible]:active .bp_select_menu_grid_option_module_circle--921c1{
4879
+ .bp_select_menu_grid_option_module_optionButton--6ad66[data-focus-visible].bp_select_menu_grid_option_module_active--6ad66 .bp_select_menu_grid_option_module_circle--6ad66,.bp_select_menu_grid_option_module_optionButton--6ad66[data-focus-visible]:active .bp_select_menu_grid_option_module_circle--6ad66{
4881
4880
  border:var(--border-2) solid var(--circleColor);
4882
4881
  box-shadow:0 0 0 var(--border-1) var(--gray-white), 0 0 0 var(--border-3) var(--outline-focus-on-light);
4883
4882
  }
4884
- .bp_select_menu_grid_option_module_optionButton--921c1:disabled:not(.bp_select_menu_grid_option_module_loading--921c1){
4883
+ .bp_select_menu_grid_option_module_optionButton--6ad66:disabled:not(.bp_select_menu_grid_option_module_loading--6ad66){
4885
4884
  opacity:.3;
4886
4885
  }
4887
4886
 
@@ -1,5 +1,6 @@
1
1
  import { jsx, jsxs } from 'react/jsx-runtime';
2
2
  import { CompositeItem, Button } from '@ariakit/react';
3
+ import { Gray05 } from '@box/blueprint-web-assets/tokens/tokens';
3
4
  import clsx from 'clsx';
4
5
  import Color from 'color';
5
6
  import { forwardRef } from 'react';
@@ -67,9 +68,11 @@ const ColorSwatch = ({
67
68
  color,
68
69
  loading
69
70
  }) => {
70
- const borderColor = new Color(color).darken(0.5).hex();
71
+ const isNoColorOption = color === 'no-color';
72
+ const finalColor = isNoColorOption ? Gray05 : color;
73
+ const borderColor = new Color(finalColor).darken(0.5).hex();
71
74
  const style = {
72
- '--circleColor': color,
75
+ '--circleColor': finalColor,
73
76
  '--circleBorderColor': borderColor
74
77
  };
75
78
  return jsx("div", {
@@ -80,7 +83,9 @@ const ColorSwatch = ({
80
83
  children: loading ? jsx(Ghost, {
81
84
  variant: "circle"
82
85
  }) : jsx("div", {
83
- className: styles.color
86
+ className: clsx(styles.color, {
87
+ [styles.strikeThrough]: isNoColorOption
88
+ })
84
89
  })
85
90
  });
86
91
  };
@@ -1,4 +1,4 @@
1
1
  import '../../index.css';
2
- var styles = {"square":"bp_select_menu_grid_option_module_square--921c1","outlineHost":"bp_select_menu_grid_option_module_outlineHost--921c1","circle":"bp_select_menu_grid_option_module_circle--921c1","loading":"bp_select_menu_grid_option_module_loading--921c1","color":"bp_select_menu_grid_option_module_color--921c1","optionButton":"bp_select_menu_grid_option_module_optionButton--921c1","active":"bp_select_menu_grid_option_module_active--921c1"};
2
+ var styles = {"square":"bp_select_menu_grid_option_module_square--6ad66","outlineHost":"bp_select_menu_grid_option_module_outlineHost--6ad66","circle":"bp_select_menu_grid_option_module_circle--6ad66","loading":"bp_select_menu_grid_option_module_loading--6ad66","color":"bp_select_menu_grid_option_module_color--6ad66","strikeThrough":"bp_select_menu_grid_option_module_strikeThrough--6ad66","optionButton":"bp_select_menu_grid_option_module_optionButton--6ad66","active":"bp_select_menu_grid_option_module_active--6ad66"};
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": "8.2.0",
3
+ "version": "8.3.0",
4
4
  "type": "module",
5
5
  "license": "SEE LICENSE IN LICENSE",
6
6
  "publishConfig": {
@@ -63,7 +63,7 @@
63
63
  "react-stately": "^3.31.1",
64
64
  "tsx": "^4.16.5"
65
65
  },
66
- "gitHead": "e8ce4660827c02409096c1972517bcf898d1f251",
66
+ "gitHead": "30a4168eff5a8500b505e86beb4dff3b527aac44",
67
67
  "module": "lib-esm/index.js",
68
68
  "main": "lib-esm/index.js",
69
69
  "exports": {