@box/blueprint-web 12.72.0 → 12.74.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.
@@ -4903,7 +4903,8 @@
4903
4903
  .bp_link_module_link--fb308 .bp_link_module_icon--fb308 *{
4904
4904
  fill:currentColor;
4905
4905
  }
4906
- .bp_base_grid_list_item_module_smallList--17ab9[data-modern=false]{
4906
+
4907
+ .bp_base_grid_list_item_module_smallList--1d1aa[data-modern=false]{
4907
4908
  --small-list-gap:var(--space-2);
4908
4909
  --small-list-padding:var(--space-1);
4909
4910
  --small-list-item-background:var(--surface-item-small-surface);
@@ -4927,7 +4928,7 @@
4927
4928
  --small-list-focus-outline-offset:calc(var(--border-4)*-1);
4928
4929
  }
4929
4930
 
4930
- .bp_base_grid_list_item_module_smallList--17ab9[data-modern=true]{
4931
+ .bp_base_grid_list_item_module_smallList--1d1aa[data-modern=true]{
4931
4932
  --small-list-gap:var(--bp-space-020);
4932
4933
  --small-list-padding:var(--bp-space-010);
4933
4934
  --small-list-item-background:var(--bp-surface-item-small-surface);
@@ -4951,7 +4952,7 @@
4951
4952
  --small-list-focus-outline-offset:calc(var(--bp-border-04)*-1);
4952
4953
  }
4953
4954
 
4954
- .bp_base_grid_list_item_module_smallList--17ab9{
4955
+ .bp_base_grid_list_item_module_smallList--1d1aa{
4955
4956
  box-sizing:border-box;
4956
4957
  display:grid;
4957
4958
  gap:var(--small-list-gap);
@@ -4962,7 +4963,7 @@
4962
4963
  padding:var(--small-list-padding);
4963
4964
  width:auto;
4964
4965
  }
4965
- .bp_base_grid_list_item_module_smallList--17ab9 .bp_base_grid_list_item_module_smallListItem--17ab9{
4966
+ .bp_base_grid_list_item_module_smallList--1d1aa .bp_base_grid_list_item_module_smallListItem--1d1aa{
4966
4967
  --actions-opacity:var(--small-list-actions-opacity);
4967
4968
  --thumbnail-size:var(--small-list-thumbnail-size);
4968
4969
  --item-background:var(--small-list-item-background);
@@ -4981,11 +4982,11 @@
4981
4982
  transform:translateZ(0);
4982
4983
  width:auto;
4983
4984
  }
4984
- .bp_base_grid_list_item_module_smallList--17ab9 .bp_base_grid_list_item_module_smallListItem--17ab9.bp_base_grid_list_item_module_loading--17ab9{
4985
+ .bp_base_grid_list_item_module_smallList--1d1aa .bp_base_grid_list_item_module_smallListItem--1d1aa.bp_base_grid_list_item_module_loading--1d1aa{
4985
4986
  grid-template-columns:var(--thumbnail-size) auto 0;
4986
4987
  grid-template-rows:100% 0;
4987
4988
  }
4988
- .bp_base_grid_list_item_module_smallList--17ab9 .bp_base_grid_list_item_module_smallListItem--17ab9 .bp_base_grid_list_item_module_thumbnail--17ab9{
4989
+ .bp_base_grid_list_item_module_smallList--1d1aa .bp_base_grid_list_item_module_smallListItem--1d1aa .bp_base_grid_list_item_module_thumbnail--1d1aa{
4989
4990
  align-items:center;
4990
4991
  aspect-ratio:1;
4991
4992
  display:flex;
@@ -4994,13 +4995,13 @@
4994
4995
  overflow:hidden;
4995
4996
  z-index:1;
4996
4997
  }
4997
- .bp_base_grid_list_item_module_smallList--17ab9 .bp_base_grid_list_item_module_smallListItem--17ab9 .bp_base_grid_list_item_module_thumbnailContent--17ab9 img,.bp_base_grid_list_item_module_smallList--17ab9 .bp_base_grid_list_item_module_smallListItem--17ab9 .bp_base_grid_list_item_module_thumbnailContent--17ab9 svg{
4998
+ .bp_base_grid_list_item_module_smallList--1d1aa .bp_base_grid_list_item_module_smallListItem--1d1aa .bp_base_grid_list_item_module_thumbnailContent--1d1aa img,.bp_base_grid_list_item_module_smallList--1d1aa .bp_base_grid_list_item_module_smallListItem--1d1aa .bp_base_grid_list_item_module_thumbnailContent--1d1aa svg{
4998
4999
  height:100%;
4999
5000
  object-fit:cover;
5000
5001
  object-position:left;
5001
5002
  width:100%;
5002
5003
  }
5003
- .bp_base_grid_list_item_module_smallList--17ab9 .bp_base_grid_list_item_module_smallListItem--17ab9 .bp_base_grid_list_item_module_header--17ab9{
5004
+ .bp_base_grid_list_item_module_smallList--1d1aa .bp_base_grid_list_item_module_smallListItem--1d1aa .bp_base_grid_list_item_module_header--1d1aa{
5004
5005
  color:var(--small-list-header-color);
5005
5006
  font-family:var(--body-default-semibold-font-family);
5006
5007
  font-size:var(--body-default-semibold-font-size);
@@ -5012,11 +5013,11 @@
5012
5013
  text-decoration:var(--body-default-semibold-text-decoration);
5013
5014
  text-transform:var(--body-default-semibold-text-case);
5014
5015
  }
5015
- .bp_base_grid_list_item_module_smallList--17ab9 .bp_base_grid_list_item_module_smallListItem--17ab9 .bp_base_grid_list_item_module_header--17ab9.bp_base_grid_list_item_module_loading--17ab9{
5016
+ .bp_base_grid_list_item_module_smallList--1d1aa .bp_base_grid_list_item_module_smallListItem--1d1aa .bp_base_grid_list_item_module_header--1d1aa.bp_base_grid_list_item_module_loading--1d1aa{
5016
5017
  align-items:center;
5017
5018
  display:flex;
5018
5019
  }
5019
- .bp_base_grid_list_item_module_smallList--17ab9 .bp_base_grid_list_item_module_smallListItem--17ab9 .bp_base_grid_list_item_module_subtitle--17ab9{
5020
+ .bp_base_grid_list_item_module_smallList--1d1aa .bp_base_grid_list_item_module_smallListItem--1d1aa .bp_base_grid_list_item_module_subtitle--1d1aa{
5020
5021
  color:var(--small-list-subtitle-color);
5021
5022
  font-family:var(--caption-default-font-family);
5022
5023
  font-size:var(--caption-default-font-size);
@@ -5028,17 +5029,17 @@
5028
5029
  text-decoration:var(--caption-default-text-decoration);
5029
5030
  text-transform:var(--caption-default-text-case);
5030
5031
  }
5031
- .bp_base_grid_list_item_module_smallList--17ab9 .bp_base_grid_list_item_module_smallListItem--17ab9 .bp_base_grid_list_item_module_header--17ab9,.bp_base_grid_list_item_module_smallList--17ab9 .bp_base_grid_list_item_module_smallListItem--17ab9 .bp_base_grid_list_item_module_subtitle--17ab9{
5032
+ .bp_base_grid_list_item_module_smallList--1d1aa .bp_base_grid_list_item_module_smallListItem--1d1aa .bp_base_grid_list_item_module_header--1d1aa,.bp_base_grid_list_item_module_smallList--1d1aa .bp_base_grid_list_item_module_smallListItem--1d1aa .bp_base_grid_list_item_module_subtitle--1d1aa{
5032
5033
  display:inline-block;
5033
5034
  overflow:hidden;
5034
5035
  text-overflow:ellipsis;
5035
5036
  white-space:nowrap;
5036
5037
  }
5037
- .bp_base_grid_list_item_module_smallList--17ab9 .bp_base_grid_list_item_module_smallListItem--17ab9:not(:has(.bp_base_grid_list_item_module_header--17ab9)),.bp_base_grid_list_item_module_smallList--17ab9 .bp_base_grid_list_item_module_smallListItem--17ab9:not(:has(.bp_base_grid_list_item_module_subtitle--17ab9)){
5038
+ .bp_base_grid_list_item_module_smallList--1d1aa .bp_base_grid_list_item_module_smallListItem--1d1aa:not(:has(.bp_base_grid_list_item_module_header--1d1aa)),.bp_base_grid_list_item_module_smallList--1d1aa .bp_base_grid_list_item_module_smallListItem--1d1aa:not(:has(.bp_base_grid_list_item_module_subtitle--1d1aa)){
5038
5039
  grid-template-rows:100% 0;
5039
5040
  row-gap:0;
5040
5041
  }
5041
- .bp_base_grid_list_item_module_smallList--17ab9 .bp_base_grid_list_item_module_smallListItem--17ab9 .bp_base_grid_list_item_module_actions--17ab9{
5042
+ .bp_base_grid_list_item_module_smallList--1d1aa .bp_base_grid_list_item_module_smallListItem--1d1aa .bp_base_grid_list_item_module_actions--1d1aa{
5042
5043
  align-items:center;
5043
5044
  display:flex;
5044
5045
  grid-area:actions;
@@ -5048,11 +5049,11 @@
5048
5049
  padding-right:0;
5049
5050
  }
5050
5051
  @media (pointer: coarse){
5051
- .bp_base_grid_list_item_module_smallList--17ab9 .bp_base_grid_list_item_module_smallListItem--17ab9 .bp_base_grid_list_item_module_actions--17ab9{
5052
+ .bp_base_grid_list_item_module_smallList--1d1aa .bp_base_grid_list_item_module_smallListItem--1d1aa .bp_base_grid_list_item_module_actions--1d1aa{
5052
5053
  --actions-opacity:1;
5053
5054
  }
5054
5055
  }
5055
- .bp_base_grid_list_item_module_smallList--17ab9 .bp_base_grid_list_item_module_smallListItem--17ab9 .bp_base_grid_list_item_module_actions--17ab9 .bp_base_grid_list_item_module_selection--17ab9{
5056
+ .bp_base_grid_list_item_module_smallList--1d1aa .bp_base_grid_list_item_module_smallListItem--1d1aa .bp_base_grid_list_item_module_actions--1d1aa .bp_base_grid_list_item_module_selection--1d1aa{
5056
5057
  align-items:center;
5057
5058
  background:var(--item-background);
5058
5059
  border-radius:var(--small-list-selection-border-radius);
@@ -5061,10 +5062,10 @@
5061
5062
  justify-content:center;
5062
5063
  width:var(--small-list-selection-width);
5063
5064
  }
5064
- .bp_base_grid_list_item_module_smallList--17ab9 .bp_base_grid_list_item_module_smallListItem--17ab9 .bp_base_grid_list_item_module_actions--17ab9 .bp_base_grid_list_item_module_selection--17ab9:hover{
5065
+ .bp_base_grid_list_item_module_smallList--1d1aa .bp_base_grid_list_item_module_smallListItem--1d1aa .bp_base_grid_list_item_module_actions--1d1aa .bp_base_grid_list_item_module_selection--1d1aa:hover{
5065
5066
  background:var(--small-list-selection-hover-background);
5066
5067
  }
5067
- .bp_base_grid_list_item_module_smallList--17ab9 .bp_base_grid_list_item_module_smallListItem--17ab9 .bp_base_grid_list_item_module_actions--17ab9 .bp_base_grid_list_item_module_inner--17ab9{
5068
+ .bp_base_grid_list_item_module_smallList--1d1aa .bp_base_grid_list_item_module_smallListItem--1d1aa .bp_base_grid_list_item_module_actions--1d1aa .bp_base_grid_list_item_module_inner--1d1aa{
5068
5069
  align-items:center;
5069
5070
  border-radius:var(--small-list-inner-border-radius);
5070
5071
  display:flex;
@@ -5072,18 +5073,18 @@
5072
5073
  justify-content:flex-end;
5073
5074
  margin-inline-end:var(--small-list-inner-margin-end);
5074
5075
  }
5075
- .bp_base_grid_list_item_module_smallList--17ab9 .bp_base_grid_list_item_module_smallListItem--17ab9 .bp_base_grid_list_item_module_actions--17ab9 .bp_base_grid_list_item_module_inner--17ab9:last-child{
5076
+ .bp_base_grid_list_item_module_smallList--1d1aa .bp_base_grid_list_item_module_smallListItem--1d1aa .bp_base_grid_list_item_module_actions--1d1aa .bp_base_grid_list_item_module_inner--1d1aa:last-child{
5076
5077
  margin-inline-end:0;
5077
5078
  }
5078
- .bp_base_grid_list_item_module_smallList--17ab9 .bp_base_grid_list_item_module_smallListItem--17ab9 .bp_base_grid_list_item_module_actions--17ab9 .bp_base_grid_list_item_module_actionsCheckboxWrapper--17ab9{
5079
+ .bp_base_grid_list_item_module_smallList--1d1aa .bp_base_grid_list_item_module_smallListItem--1d1aa .bp_base_grid_list_item_module_actions--1d1aa .bp_base_grid_list_item_module_actionsCheckboxWrapper--1d1aa{
5079
5080
  background:var(--item-hover);
5080
5081
  display:flex;
5081
5082
  }
5082
- .bp_base_grid_list_item_module_smallList--17ab9 .bp_base_grid_list_item_module_smallListItem--17ab9:hover,.bp_base_grid_list_item_module_smallList--17ab9 .bp_base_grid_list_item_module_smallListItem--17ab9[data-active-item],.bp_base_grid_list_item_module_smallList--17ab9 .bp_base_grid_list_item_module_smallListItem--17ab9[data-focus-visible],.bp_base_grid_list_item_module_smallList--17ab9 .bp_base_grid_list_item_module_smallListItem--17ab9[data-focused],.bp_base_grid_list_item_module_smallList--17ab9 .bp_base_grid_list_item_module_smallListItem--17ab9[data-hovered]{
5083
+ .bp_base_grid_list_item_module_smallList--1d1aa .bp_base_grid_list_item_module_smallListItem--1d1aa:hover,.bp_base_grid_list_item_module_smallList--1d1aa .bp_base_grid_list_item_module_smallListItem--1d1aa[data-active-item],.bp_base_grid_list_item_module_smallList--1d1aa .bp_base_grid_list_item_module_smallListItem--1d1aa[data-focus-visible],.bp_base_grid_list_item_module_smallList--1d1aa .bp_base_grid_list_item_module_smallListItem--1d1aa[data-focused],.bp_base_grid_list_item_module_smallList--1d1aa .bp_base_grid_list_item_module_smallListItem--1d1aa[data-hovered]{
5083
5084
  --actions-opacity:1;
5084
5085
  background:var(--item-hover);
5085
5086
  }
5086
- .bp_base_grid_list_item_module_smallList--17ab9 .bp_base_grid_list_item_module_smallListItem--17ab9[data-active-item]::before,.bp_base_grid_list_item_module_smallList--17ab9 .bp_base_grid_list_item_module_smallListItem--17ab9[data-focus-visible]::before{
5087
+ .bp_base_grid_list_item_module_smallList--1d1aa .bp_base_grid_list_item_module_smallListItem--1d1aa[data-active-item]::before,.bp_base_grid_list_item_module_smallList--1d1aa .bp_base_grid_list_item_module_smallListItem--1d1aa[data-focus-visible]::before{
5087
5088
  --actions-opacity:1;
5088
5089
  border-radius:.875rem;
5089
5090
  content:"";
@@ -5097,144 +5098,255 @@
5097
5098
  width:100%;
5098
5099
  }
5099
5100
 
5100
- .bp_base_grid_list_item_module_largeList--17ab9{
5101
+ .bp_base_grid_list_item_module_largeList--1d1aa[data-modern=false]{
5102
+ --large-list-gap:var(--space-05);
5103
+ --large-list-padding:var(--space-1);
5104
+ --large-list-item-thumbnail-size:10rem;
5105
+ --large-list-item-grid-rows:2fr 1fr var(--size-20);
5106
+ --large-list-item-padding:var(--space-3);
5107
+ --large-list-item-column-gap:var(--space-6);
5108
+ --large-list-item-background:var(--gray-white);
5109
+ --large-list-item-border-radius:var(--radius-5);
5110
+ --large-list-item-thumbnail-size-small-viewport:7.5rem;
5111
+ --large-list-item-thumbnail-border:var(--border-1) solid var(--gray-10);
5112
+ --large-list-item-thumbnail-border-radius:var(--radius-3);
5113
+ --large-list-item-actions-top:.875rem;
5114
+ --large-list-item-actions-right:.625rem;
5115
+ --large-list-item-actions-height:var(--space-6);
5116
+ --large-list-item-selection-width:var(--space-8);
5117
+ --large-list-item-selection-height:var(--space-8);
5118
+ --large-list-item-selection-border-radius:var(--radius-2);
5119
+ --large-list-item-selection-hover-background:var(--surface-cta-surface-icon-hover);
5120
+ --large-list-item-fade-width:var(--size-8);
5121
+ --large-list-item-fade-background:linear-gradient(270deg, #fff 0%, #fff0 100%);
5122
+ --large-list-item-inner-gap:var(--space-2);
5123
+ --large-list-item-inner-border-radius:var(--radius-2);
5124
+ --large-list-item-inner-margin-end:var(--space-2);
5125
+ --large-list-item-header-gap:var(--space-1);
5126
+ --large-list-item-header-color:var(--text-text-on-light);
5127
+ --large-list-item-header-padding-block:var(--space-1);
5128
+ --large-list-item-subtitle-gap:var(--space-1);
5129
+ --large-list-item-subtitle-color:var(--text-text-on-light-secondary);
5130
+ --large-list-item-description-color:var(--text-text-on-light);
5131
+ --large-list-item-description-margin-start:var(--space-3);
5132
+ --large-list-item-description-margin-end:var(--space-1);
5133
+ --large-list-item-snippet-margin-start:var(--space-3);
5134
+ --large-list-item-snippet-margin-end:var(--space-1);
5135
+ --large-list-item-snippet-gap:0 0 0 var(--space-2);
5136
+ --large-list-item-snippet-padding:0 0 0 var(--space-2);
5137
+ --large-list-item-snippet-color:var(--text-text-on-light-secondary);
5138
+ --large-list-item-snippet-border:0 0 0 var(--space-05);
5139
+ --large-list-item-snippet-border-left:var(--space-05) solid var(--gray-20);
5140
+ --large-list-item-hover-outline:var(--border-1) solid var(--border-card-border);
5141
+ --large-list-item-interaction-box-shadow:var(--dropshadow-2);
5142
+ --large-list-item-focus-border-radius:.875rem;
5143
+ --large-list-item-focus-outline:var(--border-2) solid var(--outline-focus-on-light);
5144
+ --large-list-item-focus-outline-offset:-0.375rem;
5145
+ --large-list-item-selected-background:var(--box-blue-05);
5146
+ --large-list-item-selected-outline:var(--border-2) solid var(--border-card-border-focus);
5147
+ --large-list-item-selected-fade-background:linear-gradient(270deg, #f2f7fd 0%, #f2f7fd00 100%);
5148
+ --large-list-item-interaction-backdrop-filter:none;
5149
+ }
5150
+
5151
+ .bp_base_grid_list_item_module_largeList--1d1aa[data-modern=true]{
5152
+ --large-list-gap:var(--bp-space-005);
5153
+ --large-list-padding:var(--bp-space-010);
5154
+ --large-list-item-thumbnail-size:10rem;
5155
+ --large-list-item-grid-rows:2fr 1fr var(--bp-size-200);
5156
+ --large-list-item-padding:var(--bp-space-030);
5157
+ --large-list-item-column-gap:var(--bp-space-060);
5158
+ --large-list-item-background:var(--bp-gray-white);
5159
+ --large-list-item-border-radius:var(--bp-radius-10);
5160
+ --large-list-item-thumbnail-size-small-viewport:var(--bp-size-300);
5161
+ --large-list-item-thumbnail-border:var(--bp-border-01) solid var(--bp-gray-10);
5162
+ --large-list-item-thumbnail-border-radius:var(--bp-radius-06);
5163
+ --large-list-item-actions-top:var(--bp-space-030);
5164
+ --large-list-item-actions-right:var(--bp-space-030);
5165
+ --large-list-item-actions-height:var(--bp-size-100);
5166
+ --large-list-item-selection-width:var(--bp-size-080);
5167
+ --large-list-item-selection-height:var(--bp-size-080);
5168
+ --large-list-item-selection-border-radius:var(--bp-radius-10);
5169
+ --large-list-item-selection-hover-background:var(--bp-black-opacity-04);
5170
+ --large-list-item-fade-width:var(--bp-size-80);
5171
+ --large-list-item-fade-background:linear-gradient(270deg, #f4f4f4 0%, #f4f4f400 100%);
5172
+ --large-list-item-inner-gap:var(--bp-space-020);
5173
+ --large-list-item-inner-border-radius:0 var(--bp-radius-06) var(--bp-radius-06) 0;
5174
+ --large-list-item-inner-margin-end:var(--bp-space-020);
5175
+ --large-list-item-header-gap:var(--bp-space-010);
5176
+ --large-list-item-header-color:var(--bp-text-text-on-light);
5177
+ --large-list-item-header-padding-block:var(--bp-space-010);
5178
+ --large-list-item-subtitle-gap:var(--bp-space-010);
5179
+ --large-list-item-subtitle-color:var(--bp-text-text-on-light-secondary);
5180
+ --large-list-item-description-color:var(--bp-text-text-on-light);
5181
+ --large-list-item-description-margin-start:var(--bp-space-030);
5182
+ --large-list-item-description-margin-end:var(--bp-space-010);
5183
+ --large-list-item-snippet-margin-start:var(--bp-space-030);
5184
+ --large-list-item-snippet-margin-end:var(--bp-space-010);
5185
+ --large-list-item-snippet-gap:0 var(--bp-space-020) 0 var(--bp-space-020);
5186
+ --large-list-item-snippet-padding:0 var(--bp-space-020) 0 var(--bp-space-020);
5187
+ --large-list-item-snippet-color:var(--bp-text-text-on-light-secondary);
5188
+ --large-list-item-snippet-border:0 var(--bp-space-005) 0 var(--bp-space-005);
5189
+ --large-list-item-snippet-border-left:var(--bp-space-005) solid var(--bp-gray-20);
5190
+ --large-list-item-hover-outline:var(--bp-border-01) solid var(--bp-border-list-item-border);
5191
+ --large-list-item-hover-background:var(--bp-surface-list-item-surface-hover);
5192
+ --large-list-item-interaction-box-shadow:0 1px 4px 0 #0000001a;
5193
+ --large-list-item-focus-border-radius:var(--bp-radius-10);
5194
+ --large-list-item-focus-outline:var(--bp-border-02) solid var(--bp-outline-focus-on-light);
5195
+ --large-list-item-focus-outline-offset:-6px;
5196
+ --large-list-item-selected-background:var(--bp-surface-list-item-surface-selected);
5197
+ --large-list-item-selected-outline:var(--bp-border-02) solid var(--bp-border-list-item-border-selected);
5198
+ --large-list-item-selected-fade-background:var(--bp-surface-list-item-surface-selected-fade);
5199
+ --large-list-item-interaction-backdrop-filter:blur(16px);
5200
+ }
5201
+ .bp_base_grid_list_item_module_largeList--1d1aa[data-modern=true] .bp_base_grid_list_item_module_largeListItem--1d1aa{
5202
+ border-bottom:var(--bp-border-01) solid var(--bp-border-list-item-border);
5203
+ }
5204
+ .bp_base_grid_list_item_module_largeList--1d1aa[data-modern=true] .bp_base_grid_list_item_module_largeListItem--1d1aa[aria-selected=true]{
5205
+ backdrop-filter:var(--large-list-item-interaction-backdrop-filter);
5206
+ box-shadow:var(--large-list-item-interaction-box-shadow);
5207
+ }
5208
+ .bp_base_grid_list_item_module_largeList--1d1aa[data-modern=true] .bp_base_grid_list_item_module_largeListItem--1d1aa:not[aria-selected=true]:hover,.bp_base_grid_list_item_module_largeList--1d1aa[data-modern=true] .bp_base_grid_list_item_module_largeListItem--1d1aa:not[aria-selected=true][data-hovered]{
5209
+ --item-background:var(--large-list-item-hover-background);
5210
+ }
5211
+
5212
+ .bp_base_grid_list_item_module_largeList--1d1aa{
5101
5213
  box-sizing:border-box;
5102
5214
  display:flex;
5103
5215
  flex-direction:column;
5104
- gap:var(--space-05);
5216
+ gap:var(--large-list-gap);
5105
5217
  max-height:inherit;
5106
5218
  outline:none;
5107
5219
  overflow:auto;
5108
- padding:var(--space-1);
5220
+ padding:var(--large-list-padding);
5109
5221
  }
5110
- .bp_base_grid_list_item_module_largeList--17ab9 .bp_base_grid_list_item_module_largeListItem--17ab9{
5111
- --thumbnail-size:10rem;
5222
+ .bp_base_grid_list_item_module_largeList--1d1aa .bp_base_grid_list_item_module_largeListItem--1d1aa{
5223
+ --thumbnail-size:var(--large-list-item-thumbnail-size);
5112
5224
  --actions-opacity:0;
5113
- --item-background:var(--gray-white);
5225
+ --item-background:var(--large-list-item-background);
5114
5226
  background:var(--item-background);
5115
- border-radius:var(--radius-5);
5116
- column-gap:var(--space-6);
5227
+ border-radius:var(--large-list-item-border-radius);
5228
+ column-gap:var(--large-list-item-column-gap);
5117
5229
  cursor:default;
5118
5230
  display:grid;
5119
5231
  grid-template-areas:"thumbnail head" "thumbnail subtitle" "thumbnail description";
5120
5232
  grid-template-columns:var(--thumbnail-size) auto;
5121
- grid-template-rows:2fr 1fr var(--size-20);
5233
+ grid-template-rows:var(--large-list-item-grid-rows);
5122
5234
  outline:none;
5123
- padding:var(--space-3);
5235
+ padding:var(--large-list-item-padding);
5124
5236
  position:relative;
5125
5237
  transform:translateZ(0);
5126
5238
  }
5127
- .bp_base_grid_list_item_module_largeList--17ab9 .bp_base_grid_list_item_module_largeListItem--17ab9.bp_base_grid_list_item_module_loading--17ab9{
5239
+ .bp_base_grid_list_item_module_largeList--1d1aa .bp_base_grid_list_item_module_largeListItem--1d1aa.bp_base_grid_list_item_module_loading--1d1aa{
5128
5240
  grid-template-rows:1fr 1fr 1fr;
5129
5241
  }
5130
- .bp_base_grid_list_item_module_largeList--17ab9 .bp_base_grid_list_item_module_largeListItem--17ab9:focus-within{
5242
+ .bp_base_grid_list_item_module_largeList--1d1aa .bp_base_grid_list_item_module_largeListItem--1d1aa:focus-within{
5131
5243
  --actions-opacity:1;
5132
5244
  }
5133
5245
  @media (max-width: 374px){
5134
- .bp_base_grid_list_item_module_largeList--17ab9 .bp_base_grid_list_item_module_largeListItem--17ab9{
5135
- --thumbnail-size:7.5rem;
5246
+ .bp_base_grid_list_item_module_largeList--1d1aa .bp_base_grid_list_item_module_largeListItem--1d1aa{
5247
+ --thumbnail-size:var(--large-list-item-thumbnail-size-small-viewport);
5136
5248
  }
5137
5249
  }
5138
- .bp_base_grid_list_item_module_largeList--17ab9 .bp_base_grid_list_item_module_largeListItem--17ab9 .bp_base_grid_list_item_module_thumbnail--17ab9{
5250
+ .bp_base_grid_list_item_module_largeList--1d1aa .bp_base_grid_list_item_module_largeListItem--1d1aa .bp_base_grid_list_item_module_thumbnail--1d1aa{
5139
5251
  aspect-ratio:4/3;
5140
- border:var(--border-1) solid var(--gray-10);
5141
- border-radius:var(--radius-3);
5252
+ border:var(--large-list-item-thumbnail-border);
5253
+ border-radius:var(--large-list-item-thumbnail-border-radius);
5142
5254
  grid-area:thumbnail;
5143
5255
  overflow:hidden;
5144
5256
  z-index:1;
5145
5257
  }
5146
- .bp_base_grid_list_item_module_largeList--17ab9 .bp_base_grid_list_item_module_largeListItem--17ab9 .bp_base_grid_list_item_module_thumbnail--17ab9 img{
5258
+ .bp_base_grid_list_item_module_largeList--1d1aa .bp_base_grid_list_item_module_largeListItem--1d1aa .bp_base_grid_list_item_module_thumbnail--1d1aa img{
5147
5259
  height:100%;
5148
5260
  object-fit:cover;
5149
5261
  object-position:left;
5150
5262
  width:100%;
5151
5263
  }
5152
- .bp_base_grid_list_item_module_largeList--17ab9 .bp_base_grid_list_item_module_largeListItem--17ab9 .bp_base_grid_list_item_module_thumbnail--17ab9.bp_base_grid_list_item_module_loading--17ab9{
5264
+ .bp_base_grid_list_item_module_largeList--1d1aa .bp_base_grid_list_item_module_largeListItem--1d1aa .bp_base_grid_list_item_module_thumbnail--1d1aa.bp_base_grid_list_item_module_loading--1d1aa{
5153
5265
  border:none;
5154
5266
  }
5155
5267
  @media (max-width: 374px){
5156
- .bp_base_grid_list_item_module_largeList--17ab9 .bp_base_grid_list_item_module_largeListItem--17ab9 .bp_base_grid_list_item_module_thumbnail--17ab9{
5268
+ .bp_base_grid_list_item_module_largeList--1d1aa .bp_base_grid_list_item_module_largeListItem--1d1aa .bp_base_grid_list_item_module_thumbnail--1d1aa{
5157
5269
  aspect-ratio:1/1;
5158
5270
  }
5159
- .bp_base_grid_list_item_module_largeList--17ab9 .bp_base_grid_list_item_module_largeListItem--17ab9 .bp_base_grid_list_item_module_thumbnail--17ab9 img{
5271
+ .bp_base_grid_list_item_module_largeList--1d1aa .bp_base_grid_list_item_module_largeListItem--1d1aa .bp_base_grid_list_item_module_thumbnail--1d1aa img{
5160
5272
  object-fit:contain;
5161
5273
  }
5162
5274
  }
5163
- .bp_base_grid_list_item_module_largeList--17ab9 .bp_base_grid_list_item_module_largeListItem--17ab9 .bp_base_grid_list_item_module_actions--17ab9{
5275
+ .bp_base_grid_list_item_module_largeList--1d1aa .bp_base_grid_list_item_module_largeListItem--1d1aa .bp_base_grid_list_item_module_actions--1d1aa{
5164
5276
  align-items:center;
5165
5277
  display:flex;
5166
- height:var(--space-6);
5278
+ height:var(--large-list-item-actions-height);
5167
5279
  justify-content:flex-end;
5168
5280
  opacity:var(--actions-opacity);
5169
5281
  padding-right:0;
5170
5282
  position:absolute;
5171
- right:.625rem;
5172
- top:.875rem;
5283
+ right:var(--large-list-item-actions-right);
5284
+ top:var(--large-list-item-actions-top);
5173
5285
  }
5174
5286
  @media (pointer: coarse){
5175
- .bp_base_grid_list_item_module_largeList--17ab9 .bp_base_grid_list_item_module_largeListItem--17ab9 .bp_base_grid_list_item_module_actions--17ab9{
5287
+ .bp_base_grid_list_item_module_largeList--1d1aa .bp_base_grid_list_item_module_largeListItem--1d1aa .bp_base_grid_list_item_module_actions--1d1aa{
5176
5288
  --actions-opacity:1;
5177
5289
  }
5178
5290
  }
5179
- .bp_base_grid_list_item_module_largeList--17ab9 .bp_base_grid_list_item_module_largeListItem--17ab9 .bp_base_grid_list_item_module_actions--17ab9 .bp_base_grid_list_item_module_selection--17ab9{
5291
+ .bp_base_grid_list_item_module_largeList--1d1aa .bp_base_grid_list_item_module_largeListItem--1d1aa .bp_base_grid_list_item_module_actions--1d1aa .bp_base_grid_list_item_module_selection--1d1aa{
5180
5292
  align-items:center;
5181
5293
  background:var(--item-background);
5182
- border-radius:var(--radius-2);
5294
+ border-radius:var(--large-list-item-selection-border-radius);
5183
5295
  display:flex;
5184
- height:var(--space-8);
5296
+ height:var(--large-list-item-selection-height);
5185
5297
  justify-content:center;
5186
- width:var(--space-8);
5298
+ width:var(--large-list-item-selection-width);
5187
5299
  }
5188
- .bp_base_grid_list_item_module_largeList--17ab9 .bp_base_grid_list_item_module_largeListItem--17ab9 .bp_base_grid_list_item_module_actions--17ab9 .bp_base_grid_list_item_module_selection--17ab9:hover{
5189
- background:var(--surface-cta-surface-icon-hover);
5300
+ .bp_base_grid_list_item_module_largeList--1d1aa .bp_base_grid_list_item_module_largeListItem--1d1aa .bp_base_grid_list_item_module_actions--1d1aa .bp_base_grid_list_item_module_selection--1d1aa:hover{
5301
+ background:var(--large-list-item-selection-hover-background);
5190
5302
  }
5191
- .bp_base_grid_list_item_module_largeList--17ab9 .bp_base_grid_list_item_module_largeListItem--17ab9 .bp_base_grid_list_item_module_actions--17ab9 .bp_base_grid_list_item_module_fade--17ab9{
5303
+ .bp_base_grid_list_item_module_largeList--1d1aa .bp_base_grid_list_item_module_largeListItem--1d1aa .bp_base_grid_list_item_module_actions--1d1aa .bp_base_grid_list_item_module_fade--1d1aa{
5192
5304
  align-self:stretch;
5193
- background:linear-gradient(270deg, #fff 0, #fff0 100%);
5194
- width:var(--size-8);
5305
+ background:var(--large-list-item-fade-background);
5306
+ width:var(--large-list-item-fade-width);
5195
5307
  }
5196
- .bp_base_grid_list_item_module_largeList--17ab9 .bp_base_grid_list_item_module_largeListItem--17ab9 .bp_base_grid_list_item_module_actions--17ab9 .bp_base_grid_list_item_module_inner--17ab9{
5308
+ .bp_base_grid_list_item_module_largeList--1d1aa .bp_base_grid_list_item_module_largeListItem--1d1aa .bp_base_grid_list_item_module_actions--1d1aa .bp_base_grid_list_item_module_inner--1d1aa{
5197
5309
  align-items:center;
5198
5310
  background:var(--item-background);
5199
- border-radius:var(--radius-2);
5311
+ border-radius:var(--large-list-item-inner-border-radius);
5200
5312
  display:flex;
5201
- gap:var(--space-2);
5313
+ gap:var(--large-list-item-inner-gap);
5202
5314
  justify-content:flex-end;
5203
- margin-inline-end:var(--space-2);
5315
+ margin-inline-end:var(--large-list-item-inner-margin-end);
5204
5316
  }
5205
- .bp_base_grid_list_item_module_largeList--17ab9 .bp_base_grid_list_item_module_largeListItem--17ab9 .bp_base_grid_list_item_module_actions--17ab9 .bp_base_grid_list_item_module_inner--17ab9:last-child{
5317
+ .bp_base_grid_list_item_module_largeList--1d1aa .bp_base_grid_list_item_module_largeListItem--1d1aa .bp_base_grid_list_item_module_actions--1d1aa .bp_base_grid_list_item_module_inner--1d1aa:last-child{
5206
5318
  margin-inline-end:0;
5207
5319
  }
5208
- .bp_base_grid_list_item_module_largeList--17ab9 .bp_base_grid_list_item_module_largeListItem--17ab9 .bp_base_grid_list_item_module_actions--17ab9 .bp_base_grid_list_item_module_actionsCheckboxWrapper--17ab9{
5320
+ .bp_base_grid_list_item_module_largeList--1d1aa .bp_base_grid_list_item_module_largeListItem--1d1aa .bp_base_grid_list_item_module_actions--1d1aa .bp_base_grid_list_item_module_actionsCheckboxWrapper--1d1aa{
5209
5321
  background:var(--item-background);
5210
5322
  display:flex;
5211
5323
  }
5212
- .bp_base_grid_list_item_module_largeList--17ab9 .bp_base_grid_list_item_module_largeListItem--17ab9 .bp_base_grid_list_item_module_header--17ab9{
5324
+ .bp_base_grid_list_item_module_largeList--1d1aa .bp_base_grid_list_item_module_largeListItem--1d1aa .bp_base_grid_list_item_module_header--1d1aa{
5213
5325
  align-items:center;
5214
- color:var(--text-text-on-light);
5326
+ color:var(--large-list-item-header-color);
5215
5327
  display:inline-flex;
5216
5328
  font-family:var(--body-default-semibold-font-family);
5217
5329
  font-size:var(--body-default-semibold-font-size);
5218
5330
  font-weight:var(--body-default-semibold-font-weight);
5219
- gap:var(--space-1);
5331
+ gap:var(--large-list-item-header-gap);
5220
5332
  grid-area:head;
5221
5333
  letter-spacing:var(--body-default-semibold-letter-spacing);
5222
5334
  line-height:var(--body-default-semibold-line-height);
5223
5335
  overflow:hidden;
5224
- padding-block:var(--space-1);
5336
+ padding-block:var(--large-list-item-header-padding-block);
5225
5337
  -webkit-text-decoration:var(--body-default-semibold-text-decoration);
5226
5338
  text-decoration:var(--body-default-semibold-text-decoration);
5227
5339
  text-transform:var(--body-default-semibold-text-case);
5228
5340
  white-space:nowrap;
5229
5341
  }
5230
- .bp_base_grid_list_item_module_largeList--17ab9 .bp_base_grid_list_item_module_largeListItem--17ab9 .bp_base_grid_list_item_module_subtitle--17ab9{
5342
+ .bp_base_grid_list_item_module_largeList--1d1aa .bp_base_grid_list_item_module_largeListItem--1d1aa .bp_base_grid_list_item_module_subtitle--1d1aa{
5231
5343
  align-items:center;
5232
- color:var(--text-text-on-light-secondary);
5344
+ color:var(--large-list-item-subtitle-color);
5233
5345
  display:flex;
5234
5346
  font-family:var(--caption-default-font-family);
5235
5347
  font-size:var(--caption-default-font-size);
5236
5348
  font-weight:var(--caption-default-font-weight);
5237
- gap:var(--space-1);
5349
+ gap:var(--large-list-item-subtitle-gap);
5238
5350
  grid-area:subtitle;
5239
5351
  letter-spacing:var(--caption-default-letter-spacing);
5240
5352
  line-height:var(--caption-default-line-height);
@@ -5243,10 +5355,10 @@
5243
5355
  text-transform:var(--caption-default-text-case);
5244
5356
  white-space:nowrap;
5245
5357
  }
5246
- .bp_base_grid_list_item_module_largeList--17ab9 .bp_base_grid_list_item_module_largeListItem--17ab9 .bp_base_grid_list_item_module_description--17ab9{
5358
+ .bp_base_grid_list_item_module_largeList--1d1aa .bp_base_grid_list_item_module_largeListItem--1d1aa .bp_base_grid_list_item_module_description--1d1aa{
5247
5359
  -webkit-box-orient:vertical;
5248
5360
  -webkit-line-clamp:3;
5249
- color:var(--text-text-on-light);
5361
+ color:var(--large-list-item-description-color);
5250
5362
  display:-webkit-box;
5251
5363
  font-family:var(--body-default-font-family);
5252
5364
  font-size:var(--body-default-font-size);
@@ -5255,81 +5367,82 @@
5255
5367
  letter-spacing:var(--body-default-letter-spacing);
5256
5368
  line-height:var(--body-default-line-height);
5257
5369
  margin:0;
5258
- margin-block-end:var(--space-1);
5259
- margin-block-start:var(--space-3);
5370
+ margin-block-end:var(--large-list-item-description-margin-end);
5371
+ margin-block-start:var(--large-list-item-description-margin-start);
5260
5372
  overflow:hidden;
5261
5373
  -webkit-text-decoration:var(--body-default-text-decoration);
5262
5374
  text-decoration:var(--body-default-text-decoration);
5263
5375
  text-transform:var(--body-default-text-case);
5264
5376
  }
5265
- .bp_base_grid_list_item_module_largeList--17ab9 .bp_base_grid_list_item_module_largeListItem--17ab9 .bp_base_grid_list_item_module_snippet--17ab9{
5377
+ .bp_base_grid_list_item_module_largeList--1d1aa .bp_base_grid_list_item_module_largeListItem--1d1aa .bp_base_grid_list_item_module_snippet--1d1aa{
5266
5378
  grid-area:description;
5267
5379
  margin:0;
5268
- margin-block-end:var(--space-1);
5269
- margin-block-start:var(--space-3);
5380
+ margin-block-end:var(--large-list-item-snippet-margin-end);
5381
+ margin-block-start:var(--large-list-item-snippet-margin-start);
5270
5382
  }
5271
- .bp_base_grid_list_item_module_largeList--17ab9 .bp_base_grid_list_item_module_largeListItem--17ab9 .bp_base_grid_list_item_module_snippet--17ab9 .bp_base_grid_list_item_module_snippetContent--17ab9{
5383
+ .bp_base_grid_list_item_module_largeList--1d1aa .bp_base_grid_list_item_module_largeListItem--1d1aa .bp_base_grid_list_item_module_snippet--1d1aa .bp_base_grid_list_item_module_snippetContent--1d1aa{
5272
5384
  -webkit-box-orient:vertical;
5273
5385
  -webkit-line-clamp:2;
5274
- border:0 0 0 var(--space-05);
5275
- border-left:var(--space-05) solid var(--gray-20);
5276
- color:var(--text-text-on-light-secondary);
5386
+ border:var(--large-list-item-snippet-border);
5387
+ border-left:var(--large-list-item-snippet-border-left);
5388
+ color:var(--large-list-item-snippet-color);
5277
5389
  display:-webkit-box;
5278
5390
  font-family:var(--body-default-font-family);
5279
5391
  font-size:var(--body-default-font-size);
5280
5392
  font-style:italic;
5281
5393
  font-weight:var(--body-default-font-weight);
5282
- gap:0 0 0 var(--space-2);
5394
+ gap:var(--large-list-item-snippet-gap);
5283
5395
  letter-spacing:var(--body-default-letter-spacing);
5284
5396
  line-height:var(--body-default-line-height);
5285
5397
  overflow:hidden;
5286
- padding:0 0 0 var(--space-2);
5398
+ padding:var(--large-list-item-snippet-padding);
5287
5399
  -webkit-text-decoration:var(--body-default-text-decoration);
5288
5400
  text-decoration:var(--body-default-text-decoration);
5289
5401
  text-transform:var(--body-default-text-case);
5290
5402
  }
5291
- .bp_base_grid_list_item_module_largeList--17ab9 .bp_base_grid_list_item_module_largeListItem--17ab9:hover,.bp_base_grid_list_item_module_largeList--17ab9 .bp_base_grid_list_item_module_largeListItem--17ab9[data-active-item],.bp_base_grid_list_item_module_largeList--17ab9 .bp_base_grid_list_item_module_largeListItem--17ab9[data-focus-visible],.bp_base_grid_list_item_module_largeList--17ab9 .bp_base_grid_list_item_module_largeListItem--17ab9[data-focused],.bp_base_grid_list_item_module_largeList--17ab9 .bp_base_grid_list_item_module_largeListItem--17ab9[data-hovered]{
5403
+ .bp_base_grid_list_item_module_largeList--1d1aa .bp_base_grid_list_item_module_largeListItem--1d1aa:hover,.bp_base_grid_list_item_module_largeList--1d1aa .bp_base_grid_list_item_module_largeListItem--1d1aa[data-active-item],.bp_base_grid_list_item_module_largeList--1d1aa .bp_base_grid_list_item_module_largeListItem--1d1aa[data-focus-visible],.bp_base_grid_list_item_module_largeList--1d1aa .bp_base_grid_list_item_module_largeListItem--1d1aa[data-focused],.bp_base_grid_list_item_module_largeList--1d1aa .bp_base_grid_list_item_module_largeListItem--1d1aa[data-hovered]{
5292
5404
  --actions-opacity:1;
5293
- box-shadow:var(--dropshadow-2);
5294
- outline:var(--border-1) solid var(--border-card-border);
5405
+ backdrop-filter:var(--large-list-item-interaction-backdrop-filter);
5406
+ box-shadow:var(--large-list-item-interaction-box-shadow);
5407
+ outline:var(--large-list-item-hover-outline);
5295
5408
  }
5296
- .bp_base_grid_list_item_module_largeList--17ab9 .bp_base_grid_list_item_module_largeListItem--17ab9[data-active-item]::before,.bp_base_grid_list_item_module_largeList--17ab9 .bp_base_grid_list_item_module_largeListItem--17ab9[data-focus-visible]::before{
5297
- border-radius:.875rem;
5409
+ .bp_base_grid_list_item_module_largeList--1d1aa .bp_base_grid_list_item_module_largeListItem--1d1aa[data-active-item]::before,.bp_base_grid_list_item_module_largeList--1d1aa .bp_base_grid_list_item_module_largeListItem--1d1aa[data-focus-visible]::before{
5410
+ border-radius:var(--large-list-item-focus-border-radius);
5298
5411
  content:"";
5299
5412
  display:block;
5300
5413
  height:100%;
5301
5414
  left:0;
5302
- outline:var(--border-2) solid var(--outline-focus-on-light);
5303
- outline-offset:-6px;
5415
+ outline:var(--large-list-item-focus-outline);
5416
+ outline-offset:var(--large-list-item-focus-outline-offset);
5304
5417
  position:absolute;
5305
5418
  top:0;
5306
5419
  width:100%;
5307
5420
  }
5308
- .bp_base_grid_list_item_module_largeList--17ab9 .bp_base_grid_list_item_module_largeListItem--17ab9[aria-selected=true]{
5421
+ .bp_base_grid_list_item_module_largeList--1d1aa .bp_base_grid_list_item_module_largeListItem--1d1aa[aria-selected=true]{
5309
5422
  --actions-opacity:1;
5310
- --item-background:var(--box-blue-05);
5311
- outline:var(--border-2) solid var(--border-card-border-focus);
5423
+ --item-background:var(--large-list-item-selected-background);
5424
+ outline:var(--large-list-item-selected-outline);
5312
5425
  z-index:2;
5313
5426
  }
5314
- .bp_base_grid_list_item_module_largeList--17ab9 .bp_base_grid_list_item_module_largeListItem--17ab9[aria-selected=true] .bp_base_grid_list_item_module_actions--17ab9 .bp_base_grid_list_item_module_fade--17ab9{
5315
- background:linear-gradient(270deg, #f2f7fd 0, #f2f7fd00 100%);
5427
+ .bp_base_grid_list_item_module_largeList--1d1aa .bp_base_grid_list_item_module_largeListItem--1d1aa[aria-selected=true] .bp_base_grid_list_item_module_actions--1d1aa .bp_base_grid_list_item_module_fade--1d1aa{
5428
+ background:var(--large-list-item-selected-fade-background);
5316
5429
  }
5317
- .bp_base_grid_list_item_module_largeList--17ab9 .bp_base_grid_list_item_module_largeListItem--17ab9[aria-selected=true]:not([data-hovered], [data-focus-visible], [data-focused]) .bp_base_grid_list_item_module_actions--17ab9 .bp_base_grid_list_item_module_inner--17ab9{
5430
+ .bp_base_grid_list_item_module_largeList--1d1aa .bp_base_grid_list_item_module_largeListItem--1d1aa[aria-selected=true]:not([data-hovered], [data-focus-visible], [data-focused]) .bp_base_grid_list_item_module_actions--1d1aa .bp_base_grid_list_item_module_inner--1d1aa{
5318
5431
  display:none;
5319
5432
  }
5320
5433
  @supports selector(:has(.foo)){
5321
- .bp_base_grid_list_item_module_largeList--17ab9 .bp_base_grid_list_item_module_largeListItem--17ab9[aria-selected=true]:has(+ .bp_base_grid_list_item_module_react-aria-DropIndicator--17ab9 + [aria-selected=true]),.bp_base_grid_list_item_module_largeList--17ab9 .bp_base_grid_list_item_module_largeListItem--17ab9[aria-selected=true]:has(+ [aria-selected=true]){
5434
+ .bp_base_grid_list_item_module_largeList--1d1aa .bp_base_grid_list_item_module_largeListItem--1d1aa[aria-selected=true]:has(+ .bp_base_grid_list_item_module_react-aria-DropIndicator--1d1aa + [aria-selected=true]),.bp_base_grid_list_item_module_largeList--1d1aa .bp_base_grid_list_item_module_largeListItem--1d1aa[aria-selected=true]:has(+ [aria-selected=true]){
5322
5435
  border-end-end-radius:0;
5323
5436
  border-end-start-radius:0;
5324
5437
  }
5325
- .bp_base_grid_list_item_module_largeList--17ab9 .bp_base_grid_list_item_module_largeListItem--17ab9[aria-selected=true] + .bp_base_grid_list_item_module_react-aria-DropIndicator--17ab9 + [aria-selected=true],.bp_base_grid_list_item_module_largeList--17ab9 .bp_base_grid_list_item_module_largeListItem--17ab9[aria-selected=true] + [aria-selected=true]{
5438
+ .bp_base_grid_list_item_module_largeList--1d1aa .bp_base_grid_list_item_module_largeListItem--1d1aa[aria-selected=true] + .bp_base_grid_list_item_module_react-aria-DropIndicator--1d1aa + [aria-selected=true],.bp_base_grid_list_item_module_largeList--1d1aa .bp_base_grid_list_item_module_largeListItem--1d1aa[aria-selected=true] + [aria-selected=true]{
5326
5439
  border-start-end-radius:0;
5327
5440
  border-start-start-radius:0;
5328
5441
  border-top:none;
5329
5442
  }
5330
5443
  }
5331
5444
 
5332
- .bp_base_grid_list_item_module_gridList--17ab9[data-modern=false]{
5445
+ .bp_base_grid_list_item_module_gridList--1d1aa[data-modern=false]{
5333
5446
  --grid-list-minimum-item-width:188px;
5334
5447
  --grid-list-gap:var(--space-4);
5335
5448
  --grid-list-padding:var(--space-1);
@@ -5370,7 +5483,7 @@
5370
5483
  --grid-list-item-coarse-row-gap:var(--space-1);
5371
5484
  }
5372
5485
 
5373
- .bp_base_grid_list_item_module_gridList--17ab9[data-modern=true]{
5486
+ .bp_base_grid_list_item_module_gridList--1d1aa[data-modern=true]{
5374
5487
  --grid-list-minimum-item-width:188px;
5375
5488
  --grid-list-gap:var(--bp-space-040);
5376
5489
  --grid-list-padding:var(--bp-space-010);
@@ -5411,7 +5524,7 @@
5411
5524
  --grid-list-item-coarse-row-gap:var(--bp-space-010);
5412
5525
  }
5413
5526
 
5414
- .bp_base_grid_list_item_module_gridList--17ab9{
5527
+ .bp_base_grid_list_item_module_gridList--1d1aa{
5415
5528
  box-sizing:border-box;
5416
5529
  display:grid;
5417
5530
  gap:var(--grid-list-gap);
@@ -5421,7 +5534,7 @@
5421
5534
  overflow:auto;
5422
5535
  padding:var(--grid-list-padding);
5423
5536
  }
5424
- .bp_base_grid_list_item_module_gridList--17ab9 .bp_base_grid_list_item_module_gridListItem--17ab9{
5537
+ .bp_base_grid_list_item_module_gridList--1d1aa .bp_base_grid_list_item_module_gridListItem--1d1aa{
5425
5538
  --actions-opacity:0;
5426
5539
  --item-background:var(--grid-list-item-background);
5427
5540
  --row-gap:var(--grid-list-item-row-gap);
@@ -5439,15 +5552,15 @@
5439
5552
  row-gap:var(--row-gap);
5440
5553
  transform:translateZ(0);
5441
5554
  }
5442
- .bp_base_grid_list_item_module_gridList--17ab9 .bp_base_grid_list_item_module_gridListItem--17ab9:focus-within{
5555
+ .bp_base_grid_list_item_module_gridList--1d1aa .bp_base_grid_list_item_module_gridListItem--1d1aa:focus-within{
5443
5556
  --actions-opacity:1;
5444
5557
  }
5445
- .bp_base_grid_list_item_module_gridList--17ab9 .bp_base_grid_list_item_module_gridListItem--17ab9 .bp_base_grid_list_item_module_statusPin--17ab9{
5558
+ .bp_base_grid_list_item_module_gridList--1d1aa .bp_base_grid_list_item_module_gridListItem--1d1aa .bp_base_grid_list_item_module_statusPin--1d1aa{
5446
5559
  left:var(--grid-list-item-status-pin-left);
5447
5560
  position:absolute;
5448
5561
  top:var(--grid-list-item-status-pin-top);
5449
5562
  }
5450
- .bp_base_grid_list_item_module_gridList--17ab9 .bp_base_grid_list_item_module_gridListItem--17ab9 .bp_base_grid_list_item_module_thumbnail--17ab9{
5563
+ .bp_base_grid_list_item_module_gridList--1d1aa .bp_base_grid_list_item_module_gridListItem--1d1aa .bp_base_grid_list_item_module_thumbnail--1d1aa{
5451
5564
  aspect-ratio:var(--grid-list-thumbnail-aspect-ratio);
5452
5565
  background:var(--grid-list-thumbnail-background);
5453
5566
  border:var(--grid-list-thumbnail-border);
@@ -5455,25 +5568,25 @@
5455
5568
  grid-area:thumbnail;
5456
5569
  overflow:hidden;
5457
5570
  }
5458
- .bp_base_grid_list_item_module_gridList--17ab9 .bp_base_grid_list_item_module_gridListItem--17ab9 .bp_base_grid_list_item_module_thumbnail--17ab9 img{
5571
+ .bp_base_grid_list_item_module_gridList--1d1aa .bp_base_grid_list_item_module_gridListItem--1d1aa .bp_base_grid_list_item_module_thumbnail--1d1aa img{
5459
5572
  height:100%;
5460
5573
  object-fit:contain;
5461
5574
  width:100%;
5462
5575
  }
5463
- .bp_base_grid_list_item_module_gridList--17ab9 .bp_base_grid_list_item_module_gridListItem--17ab9 .bp_base_grid_list_item_module_thumbnail--17ab9.bp_base_grid_list_item_module_loading--17ab9{
5576
+ .bp_base_grid_list_item_module_gridList--1d1aa .bp_base_grid_list_item_module_gridListItem--1d1aa .bp_base_grid_list_item_module_thumbnail--1d1aa.bp_base_grid_list_item_module_loading--1d1aa{
5464
5577
  border:none;
5465
5578
  }
5466
5579
  @media (pointer: coarse){
5467
- .bp_base_grid_list_item_module_gridList--17ab9 .bp_base_grid_list_item_module_gridListItem--17ab9 .bp_base_grid_list_item_module_thumbnail--17ab9{
5580
+ .bp_base_grid_list_item_module_gridList--1d1aa .bp_base_grid_list_item_module_gridListItem--1d1aa .bp_base_grid_list_item_module_thumbnail--1d1aa{
5468
5581
  margin-block-end:var(--space-1);
5469
5582
  }
5470
5583
  }
5471
- .bp_base_grid_list_item_module_gridList--17ab9 .bp_base_grid_list_item_module_gridListItem--17ab9 .bp_base_grid_list_item_module_actions--17ab9{
5584
+ .bp_base_grid_list_item_module_gridList--1d1aa .bp_base_grid_list_item_module_gridListItem--1d1aa .bp_base_grid_list_item_module_actions--1d1aa{
5472
5585
  grid-area:subtitle;
5473
5586
  margin-block-start:var(--grid-list-actions-margin-block-start);
5474
5587
  opacity:var(--actions-opacity);
5475
5588
  }
5476
- .bp_base_grid_list_item_module_gridList--17ab9 .bp_base_grid_list_item_module_gridListItem--17ab9 .bp_base_grid_list_item_module_actions--17ab9 .bp_base_grid_list_item_module_selection--17ab9{
5589
+ .bp_base_grid_list_item_module_gridList--1d1aa .bp_base_grid_list_item_module_gridListItem--1d1aa .bp_base_grid_list_item_module_actions--1d1aa .bp_base_grid_list_item_module_selection--1d1aa{
5477
5590
  align-items:center;
5478
5591
  border-radius:var(--grid-list-selection-border-radius);
5479
5592
  display:flex;
@@ -5484,10 +5597,10 @@
5484
5597
  top:var(--grid-list-selection-top);
5485
5598
  width:var(--grid-list-selection-width);
5486
5599
  }
5487
- .bp_base_grid_list_item_module_gridList--17ab9 .bp_base_grid_list_item_module_gridListItem--17ab9 .bp_base_grid_list_item_module_actions--17ab9 .bp_base_grid_list_item_module_selection--17ab9:hover{
5600
+ .bp_base_grid_list_item_module_gridList--1d1aa .bp_base_grid_list_item_module_gridListItem--1d1aa .bp_base_grid_list_item_module_actions--1d1aa .bp_base_grid_list_item_module_selection--1d1aa:hover{
5488
5601
  background:var(--grid-list-selection-hover-background);
5489
5602
  }
5490
- .bp_base_grid_list_item_module_gridList--17ab9 .bp_base_grid_list_item_module_gridListItem--17ab9 .bp_base_grid_list_item_module_actions--17ab9 .bp_base_grid_list_item_module_inner--17ab9{
5603
+ .bp_base_grid_list_item_module_gridList--1d1aa .bp_base_grid_list_item_module_gridListItem--1d1aa .bp_base_grid_list_item_module_actions--1d1aa .bp_base_grid_list_item_module_inner--1d1aa{
5491
5604
  align-items:center;
5492
5605
  background:var(--item-background);
5493
5606
  border-radius:var(--grid-list-actions-inner-border-radius);
@@ -5496,12 +5609,12 @@
5496
5609
  justify-content:center;
5497
5610
  }
5498
5611
  @media (pointer: coarse){
5499
- .bp_base_grid_list_item_module_gridList--17ab9 .bp_base_grid_list_item_module_gridListItem--17ab9 .bp_base_grid_list_item_module_actions--17ab9{
5612
+ .bp_base_grid_list_item_module_gridList--1d1aa .bp_base_grid_list_item_module_gridListItem--1d1aa .bp_base_grid_list_item_module_actions--1d1aa{
5500
5613
  grid-area:actions;
5501
5614
  margin-block-start:0;
5502
5615
  }
5503
5616
  }
5504
- .bp_base_grid_list_item_module_gridList--17ab9 .bp_base_grid_list_item_module_gridListItem--17ab9 .bp_base_grid_list_item_module_header--17ab9{
5617
+ .bp_base_grid_list_item_module_gridList--1d1aa .bp_base_grid_list_item_module_gridListItem--1d1aa .bp_base_grid_list_item_module_header--1d1aa{
5505
5618
  -webkit-box-orient:vertical;
5506
5619
  -webkit-line-clamp:2;
5507
5620
  color:var(--grid-list-header-color);
@@ -5519,11 +5632,11 @@
5519
5632
  text-decoration:var(--body-default-text-decoration);
5520
5633
  text-transform:var(--body-default-text-case);
5521
5634
  }
5522
- .bp_base_grid_list_item_module_gridList--17ab9 .bp_base_grid_list_item_module_gridListItem--17ab9 .bp_base_grid_list_item_module_header--17ab9.bp_base_grid_list_item_module_loading--17ab9{
5635
+ .bp_base_grid_list_item_module_gridList--1d1aa .bp_base_grid_list_item_module_gridListItem--1d1aa .bp_base_grid_list_item_module_header--1d1aa.bp_base_grid_list_item_module_loading--1d1aa{
5523
5636
  align-items:center;
5524
5637
  display:flex;
5525
5638
  }
5526
- .bp_base_grid_list_item_module_gridList--17ab9 .bp_base_grid_list_item_module_gridListItem--17ab9 .bp_base_grid_list_item_module_subtitle--17ab9{
5639
+ .bp_base_grid_list_item_module_gridList--1d1aa .bp_base_grid_list_item_module_gridListItem--1d1aa .bp_base_grid_list_item_module_subtitle--1d1aa{
5527
5640
  color:var(--grid-list-subtitle-color);
5528
5641
  font-family:var(--caption-default-font-family);
5529
5642
  font-size:var(--caption-default-font-size);
@@ -5540,15 +5653,15 @@
5540
5653
  text-transform:var(--caption-default-text-case);
5541
5654
  white-space:nowrap;
5542
5655
  }
5543
- .bp_base_grid_list_item_module_gridList--17ab9 .bp_base_grid_list_item_module_gridListItem--17ab9 .bp_base_grid_list_item_module_subtitle--17ab9.bp_base_grid_list_item_module_loading--17ab9{
5656
+ .bp_base_grid_list_item_module_gridList--1d1aa .bp_base_grid_list_item_module_gridListItem--1d1aa .bp_base_grid_list_item_module_subtitle--1d1aa.bp_base_grid_list_item_module_loading--1d1aa{
5544
5657
  height:var(--grid-list-subtitle-loading-height);
5545
5658
  }
5546
- .bp_base_grid_list_item_module_gridList--17ab9 .bp_base_grid_list_item_module_gridListItem--17ab9.bp_base_grid_list_item_module_isItemInteracted--17ab9,.bp_base_grid_list_item_module_gridList--17ab9 .bp_base_grid_list_item_module_gridListItem--17ab9:hover,.bp_base_grid_list_item_module_gridList--17ab9 .bp_base_grid_list_item_module_gridListItem--17ab9[data-active-item],.bp_base_grid_list_item_module_gridList--17ab9 .bp_base_grid_list_item_module_gridListItem--17ab9[data-focus-visible],.bp_base_grid_list_item_module_gridList--17ab9 .bp_base_grid_list_item_module_gridListItem--17ab9[data-focused],.bp_base_grid_list_item_module_gridList--17ab9 .bp_base_grid_list_item_module_gridListItem--17ab9[data-hovered]{
5659
+ .bp_base_grid_list_item_module_gridList--1d1aa .bp_base_grid_list_item_module_gridListItem--1d1aa.bp_base_grid_list_item_module_isItemInteracted--1d1aa,.bp_base_grid_list_item_module_gridList--1d1aa .bp_base_grid_list_item_module_gridListItem--1d1aa:hover,.bp_base_grid_list_item_module_gridList--1d1aa .bp_base_grid_list_item_module_gridListItem--1d1aa[data-active-item],.bp_base_grid_list_item_module_gridList--1d1aa .bp_base_grid_list_item_module_gridListItem--1d1aa[data-focus-visible],.bp_base_grid_list_item_module_gridList--1d1aa .bp_base_grid_list_item_module_gridListItem--1d1aa[data-focused],.bp_base_grid_list_item_module_gridList--1d1aa .bp_base_grid_list_item_module_gridListItem--1d1aa[data-hovered]{
5547
5660
  --actions-opacity:1;
5548
5661
  box-shadow:var(--grid-list-item-hover-box-shadow);
5549
5662
  outline:var(--grid-list-item-hover-outline);
5550
5663
  }
5551
- .bp_base_grid_list_item_module_gridList--17ab9 .bp_base_grid_list_item_module_gridListItem--17ab9[data-active-item]::before,.bp_base_grid_list_item_module_gridList--17ab9 .bp_base_grid_list_item_module_gridListItem--17ab9[data-focus-visible]::before{
5664
+ .bp_base_grid_list_item_module_gridList--1d1aa .bp_base_grid_list_item_module_gridListItem--1d1aa[data-active-item]::before,.bp_base_grid_list_item_module_gridList--1d1aa .bp_base_grid_list_item_module_gridListItem--1d1aa[data-focus-visible]::before{
5552
5665
  border-radius:var(--grid-list-item-border-radius);
5553
5666
  content:"";
5554
5667
  display:block;
@@ -5560,7 +5673,7 @@
5560
5673
  top:0;
5561
5674
  width:100%;
5562
5675
  }
5563
- .bp_base_grid_list_item_module_gridList--17ab9 .bp_base_grid_list_item_module_gridListItem--17ab9[data-active-item]::after,.bp_base_grid_list_item_module_gridList--17ab9 .bp_base_grid_list_item_module_gridListItem--17ab9[data-focus-visible]::after{
5676
+ .bp_base_grid_list_item_module_gridList--1d1aa .bp_base_grid_list_item_module_gridListItem--1d1aa[data-active-item]::after,.bp_base_grid_list_item_module_gridList--1d1aa .bp_base_grid_list_item_module_gridListItem--1d1aa[data-focus-visible]::after{
5564
5677
  border-radius:var(--grid-list-item-border-radius);
5565
5678
  content:"";
5566
5679
  display:block;
@@ -5572,16 +5685,16 @@
5572
5685
  top:0;
5573
5686
  width:100%;
5574
5687
  }
5575
- .bp_base_grid_list_item_module_gridList--17ab9 .bp_base_grid_list_item_module_gridListItem--17ab9[aria-selected=true]{
5688
+ .bp_base_grid_list_item_module_gridList--1d1aa .bp_base_grid_list_item_module_gridListItem--1d1aa[aria-selected=true]{
5576
5689
  --actions-opacity:1;
5577
5690
  --item-background:var(--grid-list-item-selected-background);
5578
5691
  outline:var(--grid-list-item-selected-outline);
5579
5692
  }
5580
- .bp_base_grid_list_item_module_gridList--17ab9 .bp_base_grid_list_item_module_gridListItem--17ab9[aria-selected=true]:not([data-hovered], [data-focus-visible], [data-focused], .bp_base_grid_list_item_module_isItemInteracted--17ab9) .bp_base_grid_list_item_module_actions--17ab9 .bp_base_grid_list_item_module_inner--17ab9{
5693
+ .bp_base_grid_list_item_module_gridList--1d1aa .bp_base_grid_list_item_module_gridListItem--1d1aa[aria-selected=true]:not([data-hovered], [data-focus-visible], [data-focused], .bp_base_grid_list_item_module_isItemInteracted--1d1aa) .bp_base_grid_list_item_module_actions--1d1aa .bp_base_grid_list_item_module_inner--1d1aa{
5581
5694
  opacity:0;
5582
5695
  }
5583
5696
  @media (pointer: coarse){
5584
- .bp_base_grid_list_item_module_gridList--17ab9 .bp_base_grid_list_item_module_gridListItem--17ab9{
5697
+ .bp_base_grid_list_item_module_gridList--1d1aa .bp_base_grid_list_item_module_gridListItem--1d1aa{
5585
5698
  --row-gap:var(--grid-list-item-coarse-row-gap);
5586
5699
  --actions-opacity:1;
5587
5700
  grid-template-areas:"thumbnail" "head" "subtitle" "actions";
@@ -5589,18 +5702,40 @@
5589
5702
  }
5590
5703
  }
5591
5704
 
5592
- .bp_base_grid_list_item_module_tooltipContent--17ab9{
5593
- background-color:var(--surface-tooltip-surface);
5594
- border:var(--border-1) solid var(--surface-tooltip-surface);
5595
- border-radius:var(--radius-1);
5596
- color:var(--text-text-on-dark);
5705
+ .bp_base_grid_list_item_module_tooltipContent--1d1aa[data-modern=false]{
5706
+ --tooltip-offset:var(--space-2);
5707
+ --tooltip-background-color-standard:var(--surface-tooltip-surface);
5708
+ --tooltip-padding:var(--space-2) var(--space-3);
5709
+ --tooltip-border:var(--border-1) solid var(--surface-tooltip-surface);
5710
+ --tooltip-text-color:var(--text-text-on-dark);
5711
+ --tooltip-drop-shadow:none;
5712
+ --tooltip-backdrop-filter:none;
5713
+ --tooltip-radius:var(--radius-1);
5714
+ }
5715
+
5716
+ .bp_base_grid_list_item_module_tooltipContent--1d1aa[data-modern=true]{
5717
+ --tooltip-offset:var(--bp-space-020);
5718
+ --tooltip-background-color-standard:var(--bp-surface-tooltip-surface);
5719
+ --tooltip-padding:var(--bp-space-020) var(--bp-space-030);
5720
+ --tooltip-border:var(--bp-border-01) solid var(--bp-border-tooltip-border);
5721
+ --tooltip-text-color:var(--bp-text-text-on-dark);
5722
+ --tooltip-drop-shadow:var(--dropshadow-3);
5723
+ --tooltip-backdrop-filter:blur(16px);
5724
+ --tooltip-radius:var(--bp-radius-04);
5725
+ }
5726
+
5727
+ .bp_base_grid_list_item_module_tooltipContent--1d1aa{
5728
+ background-color:var(--tooltip-background-color-standard);
5729
+ border:var(--tooltip-border);
5730
+ border-radius:var(--tooltip-radius);
5731
+ color:var(--tooltip-text-color);
5597
5732
  font-family:var(--body-default-font-family);
5598
5733
  font-size:var(--body-default-font-size);
5599
5734
  font-weight:var(--body-default-font-weight);
5600
5735
  letter-spacing:var(--body-default-letter-spacing);
5601
5736
  line-height:var(--body-default-line-height);
5602
5737
  max-width:200px;
5603
- padding:var(--space-2) var(--space-3);
5738
+ padding:var(--tooltip-padding);
5604
5739
  position:relative;
5605
5740
  -webkit-text-decoration:var(--body-default-text-decoration);
5606
5741
  text-decoration:var(--body-default-text-decoration);
@@ -5608,28 +5743,28 @@
5608
5743
  word-break:break-word;
5609
5744
  z-index:2147483647;
5610
5745
  }
5611
- .bp_base_grid_list_item_module_tooltipContent--17ab9 .bp_base_grid_list_item_module_tooltipArrow--17ab9 svg{
5746
+ .bp_base_grid_list_item_module_tooltipContent--1d1aa .bp_base_grid_list_item_module_tooltipArrow--1d1aa svg{
5612
5747
  display:block;
5613
5748
  height:.5rem;
5614
5749
  width:1rem;
5615
5750
  }
5616
- .bp_base_grid_list_item_module_tooltipContent--17ab9[data-placement=top]{
5617
- margin-block-end:var(--space-2);
5751
+ .bp_base_grid_list_item_module_tooltipContent--1d1aa[data-placement=top]{
5752
+ margin-block-end:var(--tooltip-offset);
5618
5753
  }
5619
- .bp_base_grid_list_item_module_tooltipContent--17ab9[data-placement=top] .bp_base_grid_list_item_module_tooltipArrow--17ab9 svg{
5754
+ .bp_base_grid_list_item_module_tooltipContent--1d1aa[data-placement=top] .bp_base_grid_list_item_module_tooltipArrow--1d1aa svg{
5620
5755
  transform:rotate(180deg);
5621
5756
  }
5622
- .bp_base_grid_list_item_module_tooltipContent--17ab9[data-placement=bottom]{
5623
- margin-block-start:var(--space-2);
5757
+ .bp_base_grid_list_item_module_tooltipContent--1d1aa[data-placement=bottom]{
5758
+ margin-block-start:var(--tooltip-offset);
5624
5759
  }
5625
- .bp_base_grid_list_item_module_tooltipContent--17ab9[data-placement=right]{
5626
- margin-inline-start:var(--space-2);
5760
+ .bp_base_grid_list_item_module_tooltipContent--1d1aa[data-placement=right]{
5761
+ margin-inline-start:var(--tooltip-offset);
5627
5762
  }
5628
- .bp_base_grid_list_item_module_tooltipContent--17ab9[data-placement=left]{
5629
- margin-inline-end:var(--space-2);
5763
+ .bp_base_grid_list_item_module_tooltipContent--1d1aa[data-placement=left]{
5764
+ margin-inline-end:var(--tooltip-offset);
5630
5765
  }
5631
5766
 
5632
- .bp_base_grid_list_item_module_staticList--17ab9 .bp_base_grid_list_item_module_staticListItem--17ab9{
5767
+ .bp_base_grid_list_item_module_staticList--1d1aa .bp_base_grid_list_item_module_staticListItem--1d1aa{
5633
5768
  display:contents;
5634
5769
  }
5635
5770
  .bp_guided_tooltip_module_content--47a15{
@@ -6318,138 +6453,164 @@ table.bp_inline_table_module_inlineTable--f6f94[data-modern=true] td:last-child,
6318
6453
  .bp_navigation_menu_module_navigationMenuSeparator--a2f10{
6319
6454
  margin-block:var(--space-2);
6320
6455
  }
6321
- .bp_page_module_page--41d33{
6322
- --navigation-width-collapsed:var(--space-20);
6323
- --navigation-width-expanded:calc(var(--space-20)*3);
6324
- --large-viewport-inline-space:var(--space-8);
6456
+ .bp_page_module_page--96006[data-modern=false]{
6457
+ --page-navigation-width-collapsed:var(--space-20);
6458
+ --page-navigation-width-expanded:calc(var(--space-20)*3);
6459
+ --page-viewport-inline-space:var(--space-8);
6460
+ --page-height:calc(100vh - var(--space-5));
6461
+ --page-padding-block-start:var(--space-5);
6462
+ --page-top-section-gap:var(--space-5);
6463
+ --page-content-margin-block-start:var(--space-4);
6464
+ --page-sidebar-margin-inline-start:var(--space-4);
6465
+ --page-padding-with-sidebar-inline-end:var(--space-8);
6466
+ --page-navigation-portal-background-color:var(--box-blue-100);
6467
+ --page-medium-global-header-fixed-size-section-height:var(--space-16);
6468
+ --page-medium-global-header-fixed-size-section-collapsed:var(--space-16);
6469
+ --page-medium-page-main-padding-inline:var(--space-4);
6470
+ }
6471
+
6472
+ .bp_page_module_page--96006[data-modern=true]{
6473
+ --page-navigation-width-collapsed:var(--bp-space-200);
6474
+ --page-navigation-width-expanded:calc(var(--bp-space-200)*3);
6475
+ --page-viewport-inline-space:var(--bp-space-080);
6476
+ --page-height:calc(100vh - var(--bp-space-050));
6477
+ --page-padding-block-start:var(--bp-space-050);
6478
+ --page-top-section-gap:var(--bp-space-050);
6479
+ --page-content-margin-block-start:var(--bp-space-040);
6480
+ --page-sidebar-margin-inline-start:var(--bp-space-040);
6481
+ --page-navigation-portal-background-color:var(--bp-box-blue-100);
6482
+ --page-medium-global-header-fixed-size-section-height:var(--bp-space-160);
6483
+ --page-medium-global-header-fixed-size-section-collapsed:var(--bp-space-160);
6484
+ --page-medium-page-main-padding-inline:var(--bp-space-040);
6485
+ }
6486
+
6487
+ .bp_page_module_page--96006{
6325
6488
  display:flex;
6326
6489
  flex-direction:column;
6327
- height:calc(100vh - var(--space-5));
6490
+ height:var(--page-height);
6328
6491
  overflow:hidden;
6329
- padding-block-start:var(--space-5);
6330
- padding-inline-start:var(--navigation-width-collapsed);
6492
+ padding-block-start:var(--page-padding-block-start);
6493
+ padding-inline-start:var(--page-navigation-width-collapsed);
6331
6494
  position:relative;
6332
6495
  }
6333
- .bp_page_module_page--41d33 .bp_page_module_globalHeader--41d33{
6496
+ .bp_page_module_page--96006 .bp_page_module_globalHeader--96006{
6334
6497
  align-items:center;
6335
6498
  display:flex;
6336
6499
  flex-direction:row;
6337
6500
  justify-content:space-between;
6338
- padding-inline:var(--large-viewport-inline-space);
6501
+ padding-inline:var(--page-viewport-inline-space);
6339
6502
  position:relative;
6340
6503
  }
6341
- .bp_page_module_page--41d33 .bp_page_module_globalHeader--41d33 .bp_page_module_searchContainer--41d33,.bp_page_module_page--41d33 .bp_page_module_globalHeader--41d33 .bp_page_module_sideContentContainer--41d33{
6504
+ .bp_page_module_page--96006 .bp_page_module_globalHeader--96006 .bp_page_module_searchContainer--96006,.bp_page_module_page--96006 .bp_page_module_globalHeader--96006 .bp_page_module_sideContentContainer--96006{
6342
6505
  display:flex;
6343
6506
  flex:none;
6344
6507
  }
6345
- .bp_page_module_page--41d33 .bp_page_module_pageMain--41d33{
6508
+ .bp_page_module_page--96006 .bp_page_module_pageMain--96006{
6346
6509
  display:flex;
6347
6510
  flex-direction:column;
6348
6511
  height:inherit;
6349
6512
  overflow:hidden;
6350
- padding-block-start:var(--space-5);
6351
- padding-inline:var(--large-viewport-inline-space);
6513
+ padding-block-start:var(--page-padding-block-start);
6514
+ padding-inline:var(--page-viewport-inline-space);
6352
6515
  }
6353
- .bp_page_module_page--41d33 .bp_page_module_pageMain--41d33 .bp_page_module_topSection--41d33{
6516
+ .bp_page_module_page--96006 .bp_page_module_pageMain--96006 .bp_page_module_topSection--96006{
6354
6517
  display:flex;
6355
6518
  flex-direction:column;
6356
6519
  flex-shrink:0;
6357
- gap:var(--space-5);
6520
+ gap:var(--page-top-section-gap);
6358
6521
  overflow:hidden;
6359
6522
  }
6360
- .bp_page_module_page--41d33 .bp_page_module_pageMain--41d33 .bp_page_module_mainSection--41d33{
6523
+ .bp_page_module_page--96006 .bp_page_module_pageMain--96006 .bp_page_module_mainSection--96006{
6361
6524
  display:flex;
6362
6525
  flex-direction:row;
6363
6526
  height:inherit;
6364
6527
  overflow:hidden;
6365
6528
  }
6366
- .bp_page_module_page--41d33 .bp_page_module_pageMain--41d33 .bp_page_module_mainSection--41d33 .bp_page_module_content--41d33{
6529
+ .bp_page_module_page--96006 .bp_page_module_pageMain--96006 .bp_page_module_mainSection--96006 .bp_page_module_content--96006{
6367
6530
  flex-grow:1;
6368
- margin-block-start:var(--space-4);
6531
+ margin-block-start:var(--page-content-margin-block-start);
6369
6532
  overflow-y:auto;
6370
6533
  }
6371
- .bp_page_module_page--41d33 .bp_page_module_pageMain--41d33 .bp_page_module_mainSection--41d33 .bp_page_module_paddingWithSidebarVisible--41d33{
6372
- padding-inline-end:var(--space-8);
6534
+ .bp_page_module_page--96006 .bp_page_module_pageMain--96006 .bp_page_module_mainSection--96006 .bp_page_module_paddingWithSidebarVisible--96006{
6535
+ padding-inline-end:var(--page-padding-with-sidebar-inline-end);
6373
6536
  }
6374
- .bp_page_module_page--41d33 .bp_page_module_pageMain--41d33 .bp_page_module_mainSection--41d33 .bp_page_module_sidebar--41d33{
6537
+ .bp_page_module_page--96006 .bp_page_module_pageMain--96006 .bp_page_module_mainSection--96006 .bp_page_module_sidebar--96006{
6375
6538
  flex-shrink:0;
6376
- margin-inline-start:var(--space-4);
6539
+ margin-inline-start:var(--page-sidebar-margin-inline-start);
6377
6540
  }
6378
- .bp_page_module_page--41d33 .bp_page_module_navigationPortal--41d33{
6379
- background-color:var(--box-blue-100);
6541
+ .bp_page_module_page--96006 .bp_page_module_navigationPortal--96006{
6542
+ background-color:var(--page-navigation-portal-background-color);
6380
6543
  height:100%;
6381
6544
  left:0;
6382
6545
  position:absolute;
6383
6546
  top:0;
6384
6547
  width:var(--navigation-width);
6385
6548
  }
6386
- .bp_page_module_page--41d33 .bp_page_module_navigationPortal--41d33 .bp_page_module_navigationContent--41d33{
6549
+ .bp_page_module_page--96006 .bp_page_module_navigationPortal--96006 .bp_page_module_navigationContent--96006{
6387
6550
  height:100%;
6388
6551
  }
6389
- .bp_page_module_page--41d33 .bp_page_module_navigationPortalLargeCollapsed--41d33{
6390
- --navigation-width:var(--navigation-width-collapsed);
6552
+ .bp_page_module_page--96006 .bp_page_module_navigationPortalLargeCollapsed--96006{
6553
+ --navigation-width:var(--page-navigation-width-collapsed);
6391
6554
  }
6392
- .bp_page_module_page--41d33 .bp_page_module_navigationPortalLargeExpanded--41d33{
6393
- --navigation-width:var(--navigation-width-expanded);
6555
+ .bp_page_module_page--96006 .bp_page_module_navigationPortalLargeExpanded--96006{
6556
+ --navigation-width:var(--page-navigation-width-expanded);
6394
6557
  }
6395
6558
 
6396
- .bp_page_module_hide--41d33{
6559
+ .bp_page_module_hide--96006{
6397
6560
  visibility:hidden;
6398
6561
  }
6399
6562
 
6400
- .bp_page_module_pageMediumOrLessViewport--41d33{
6401
- --global-header-fixed-size-section-height:var(--space-16);
6402
- --global-header-fixed-size-section-collapsed:var(--space-16);
6403
- height:calc(100vh - var(--global-header-fixed-size-section-height));
6404
- padding-block-start:var(--global-header-fixed-size-section-height);
6563
+ .bp_page_module_pageMediumOrLessViewport--96006{
6564
+ height:calc(100vh - var(--page-medium-global-header-fixed-size-section-height));
6565
+ padding-block-start:var(--page-medium-global-header-fixed-size-section-height);
6405
6566
  padding-inline-start:0;
6406
6567
  }
6407
- .bp_page_module_pageMediumOrLessViewport--41d33 .bp_page_module_globalHeader--41d33{
6408
- height:var(--global-header-fixed-size-section-height);
6568
+ .bp_page_module_pageMediumOrLessViewport--96006 .bp_page_module_globalHeader--96006{
6569
+ height:var(--page-medium-global-header-fixed-size-section-height);
6409
6570
  left:0;
6410
6571
  padding-inline:0;
6411
- padding-inline-start:var(--global-header-fixed-size-section-collapsed);
6572
+ padding-inline-start:var(--page-medium-global-header-fixed-size-section-collapsed);
6412
6573
  position:fixed;
6413
6574
  top:0;
6414
- width:calc(100vw - var(--global-header-fixed-size-section-collapsed));
6575
+ width:calc(100vw - var(--page-medium-global-header-fixed-size-section-collapsed));
6415
6576
  }
6416
- .bp_page_module_pageMediumOrLessViewport--41d33 .bp_page_module_globalHeader--41d33 .bp_page_module_search--41d33{
6417
- width:var(--global-header-fixed-size-section-collapsed);
6577
+ .bp_page_module_pageMediumOrLessViewport--96006 .bp_page_module_globalHeader--96006 .bp_page_module_search--96006{
6578
+ width:var(--page-medium-global-header-fixed-size-section-collapsed);
6418
6579
  }
6419
- .bp_page_module_pageMediumOrLessViewport--41d33 .bp_page_module_pageMain--41d33{
6580
+ .bp_page_module_pageMediumOrLessViewport--96006 .bp_page_module_pageMain--96006{
6420
6581
  overflow-y:auto;
6421
- padding-inline:var(--space-4);
6582
+ padding-inline:var(--page-medium-page-main-padding-inline);
6422
6583
  }
6423
- .bp_page_module_pageMediumOrLessViewport--41d33 .bp_page_module_pageMain--41d33 .bp_page_module_mainSection--41d33{
6584
+ .bp_page_module_pageMediumOrLessViewport--96006 .bp_page_module_pageMain--96006 .bp_page_module_mainSection--96006{
6424
6585
  overflow:unset;
6425
6586
  }
6426
- .bp_page_module_pageMediumOrLessViewport--41d33 .bp_page_module_pageMain--41d33 .bp_page_module_mainSection--41d33 .bp_page_module_content--41d33{
6587
+ .bp_page_module_pageMediumOrLessViewport--96006 .bp_page_module_pageMain--96006 .bp_page_module_mainSection--96006 .bp_page_module_content--96006{
6427
6588
  overflow-y:unset;
6428
6589
  padding-inline-end:unset;
6429
6590
  }
6430
- .bp_page_module_pageMediumOrLessViewport--41d33 .bp_page_module_navigationPortalOverlayCollapsed--41d33{
6591
+ .bp_page_module_pageMediumOrLessViewport--96006 .bp_page_module_navigationPortalOverlayCollapsed--96006{
6431
6592
  height:100%;
6432
6593
  }
6433
- .bp_page_module_pageMediumOrLessViewport--41d33 .bp_page_module_navigationPortalOverlayCollapsed--41d33 .bp_page_module_navigationContent--41d33{
6434
- width:var(--global-header-fixed-size-section-collapsed);
6594
+ .bp_page_module_pageMediumOrLessViewport--96006 .bp_page_module_navigationPortalOverlayCollapsed--96006 .bp_page_module_navigationContent--96006{
6595
+ width:var(--page-medium-global-header-fixed-size-section-collapsed);
6435
6596
  }
6436
- .bp_page_module_pageMediumOrLessViewport--41d33 .bp_page_module_navigationPortalOverlayExpanded--41d33{
6597
+ .bp_page_module_pageMediumOrLessViewport--96006 .bp_page_module_navigationPortalOverlayExpanded--96006{
6437
6598
  height:100vh;
6438
6599
  width:100vw;
6439
6600
  z-index:1;
6440
6601
  }
6441
6602
 
6442
- .bp_page_module_pageNavigationXXLargeCollapsed--41d33{
6443
- --navigation-width:var(--navigation-width-collapsed);
6444
- padding-inline-start:var(--navigation-width-collapsed);
6603
+ .bp_page_module_pageNavigationXXLargeCollapsed--96006{
6604
+ --navigation-width:var(--page-navigation-width-collapsed);
6605
+ padding-inline-start:var(--page-navigation-width-collapsed);
6445
6606
  }
6446
6607
 
6447
- .bp_page_module_pageNavigationXXLargeExpanded--41d33{
6448
- --navigation-width:var(--navigation-width-expanded);
6449
- padding-inline-start:var(--navigation-width-expanded);
6608
+ .bp_page_module_pageNavigationXXLargeExpanded--96006{
6609
+ --navigation-width:var(--page-navigation-width-expanded);
6610
+ padding-inline-start:var(--page-navigation-width-expanded);
6450
6611
  }
6451
6612
 
6452
- .bp_page_module_portalEntry--41d33{
6613
+ .bp_page_module_portalEntry--96006{
6453
6614
  display:contents;
6454
6615
  }
6455
6616
  .bp_page_header_module_pageHeader--2768d[data-modern=false]{
@@ -1,6 +1,7 @@
1
1
  import { jsx, jsxs } from 'react/jsx-runtime';
2
2
  import clsx from 'clsx';
3
3
  import { forwardRef, useEffect, Children, isValidElement } from 'react';
4
+ import { useBlueprintModernization } from '../blueprint-modernization-context/useBlueprintModernization.js';
4
5
  import { useBreakpoint, Breakpoint } from '../utils/useBreakpoint.js';
5
6
  import { useRefWithEffect as useRefWithEffectMemoized } from '../utils/useRefWithEffect.js';
6
7
  import { PageProvider, usePageStore } from './page-context.js';
@@ -50,6 +51,9 @@ const PageLayout = /*#__PURE__*/forwardRef(({
50
51
  // eslint-disable-next-line react-hooks/exhaustive-deps
51
52
  }, []);
52
53
  const Slots = getChildrenForLandmarks(children);
54
+ const {
55
+ enableModernizedComponents
56
+ } = useBlueprintModernization();
53
57
  return jsxs("div", {
54
58
  ...rest,
55
59
  ref: setRefs,
@@ -58,6 +62,7 @@ const PageLayout = /*#__PURE__*/forwardRef(({
58
62
  [styles.pageNavigationXXLargeCollapsed]: xxLargeBreakpointActive && !navigationExpanded,
59
63
  [styles.pageMediumOrLessViewport]: breakpoint <= Breakpoint.Medium
60
64
  }, className),
65
+ "data-modern": enableModernizedComponents,
61
66
  children: [Slots.Navigation, Slots.GlobalHeader, jsxs("div", {
62
67
  // hide fixed focus trap region problem and overlaying content on the navigation
63
68
  className: clsx(styles.pageMain, {
@@ -1,4 +1,4 @@
1
1
  import '../index.css';
2
- var styles = {"page":"bp_page_module_page--41d33","globalHeader":"bp_page_module_globalHeader--41d33","sideContentContainer":"bp_page_module_sideContentContainer--41d33","searchContainer":"bp_page_module_searchContainer--41d33","pageMain":"bp_page_module_pageMain--41d33","topSection":"bp_page_module_topSection--41d33","mainSection":"bp_page_module_mainSection--41d33","content":"bp_page_module_content--41d33","paddingWithSidebarVisible":"bp_page_module_paddingWithSidebarVisible--41d33","sidebar":"bp_page_module_sidebar--41d33","navigationPortal":"bp_page_module_navigationPortal--41d33","navigationContent":"bp_page_module_navigationContent--41d33","navigationPortalLargeCollapsed":"bp_page_module_navigationPortalLargeCollapsed--41d33","navigationPortalLargeExpanded":"bp_page_module_navigationPortalLargeExpanded--41d33","hide":"bp_page_module_hide--41d33","pageMediumOrLessViewport":"bp_page_module_pageMediumOrLessViewport--41d33","search":"bp_page_module_search--41d33","navigationPortalOverlayCollapsed":"bp_page_module_navigationPortalOverlayCollapsed--41d33","navigationPortalOverlayExpanded":"bp_page_module_navigationPortalOverlayExpanded--41d33","pageNavigationXXLargeCollapsed":"bp_page_module_pageNavigationXXLargeCollapsed--41d33","pageNavigationXXLargeExpanded":"bp_page_module_pageNavigationXXLargeExpanded--41d33","portalEntry":"bp_page_module_portalEntry--41d33"};
2
+ var styles = {"page":"bp_page_module_page--96006","globalHeader":"bp_page_module_globalHeader--96006","sideContentContainer":"bp_page_module_sideContentContainer--96006","searchContainer":"bp_page_module_searchContainer--96006","pageMain":"bp_page_module_pageMain--96006","topSection":"bp_page_module_topSection--96006","mainSection":"bp_page_module_mainSection--96006","content":"bp_page_module_content--96006","paddingWithSidebarVisible":"bp_page_module_paddingWithSidebarVisible--96006","sidebar":"bp_page_module_sidebar--96006","navigationPortal":"bp_page_module_navigationPortal--96006","navigationContent":"bp_page_module_navigationContent--96006","navigationPortalLargeCollapsed":"bp_page_module_navigationPortalLargeCollapsed--96006","navigationPortalLargeExpanded":"bp_page_module_navigationPortalLargeExpanded--96006","hide":"bp_page_module_hide--96006","pageMediumOrLessViewport":"bp_page_module_pageMediumOrLessViewport--96006","search":"bp_page_module_search--96006","navigationPortalOverlayCollapsed":"bp_page_module_navigationPortalOverlayCollapsed--96006","navigationPortalOverlayExpanded":"bp_page_module_navigationPortalOverlayExpanded--96006","pageNavigationXXLargeCollapsed":"bp_page_module_pageNavigationXXLargeCollapsed--96006","pageNavigationXXLargeExpanded":"bp_page_module_pageNavigationXXLargeExpanded--96006","portalEntry":"bp_page_module_portalEntry--96006"};
3
3
 
4
4
  export { styles as default };
@@ -1,4 +1,4 @@
1
1
  import '../../index.css';
2
- var styles = {"smallList":"bp_base_grid_list_item_module_smallList--17ab9","smallListItem":"bp_base_grid_list_item_module_smallListItem--17ab9","loading":"bp_base_grid_list_item_module_loading--17ab9","thumbnail":"bp_base_grid_list_item_module_thumbnail--17ab9","thumbnailContent":"bp_base_grid_list_item_module_thumbnailContent--17ab9","header":"bp_base_grid_list_item_module_header--17ab9","subtitle":"bp_base_grid_list_item_module_subtitle--17ab9","actions":"bp_base_grid_list_item_module_actions--17ab9","selection":"bp_base_grid_list_item_module_selection--17ab9","inner":"bp_base_grid_list_item_module_inner--17ab9","actionsCheckboxWrapper":"bp_base_grid_list_item_module_actionsCheckboxWrapper--17ab9","largeList":"bp_base_grid_list_item_module_largeList--17ab9","largeListItem":"bp_base_grid_list_item_module_largeListItem--17ab9","fade":"bp_base_grid_list_item_module_fade--17ab9","description":"bp_base_grid_list_item_module_description--17ab9","snippet":"bp_base_grid_list_item_module_snippet--17ab9","snippetContent":"bp_base_grid_list_item_module_snippetContent--17ab9","react-aria-DropIndicator":"bp_base_grid_list_item_module_react-aria-DropIndicator--17ab9","gridList":"bp_base_grid_list_item_module_gridList--17ab9","gridListItem":"bp_base_grid_list_item_module_gridListItem--17ab9","statusPin":"bp_base_grid_list_item_module_statusPin--17ab9","isItemInteracted":"bp_base_grid_list_item_module_isItemInteracted--17ab9","tooltipContent":"bp_base_grid_list_item_module_tooltipContent--17ab9","tooltipArrow":"bp_base_grid_list_item_module_tooltipArrow--17ab9","staticList":"bp_base_grid_list_item_module_staticList--17ab9","staticListItem":"bp_base_grid_list_item_module_staticListItem--17ab9"};
2
+ var styles = {"smallList":"bp_base_grid_list_item_module_smallList--1d1aa","smallListItem":"bp_base_grid_list_item_module_smallListItem--1d1aa","loading":"bp_base_grid_list_item_module_loading--1d1aa","thumbnail":"bp_base_grid_list_item_module_thumbnail--1d1aa","thumbnailContent":"bp_base_grid_list_item_module_thumbnailContent--1d1aa","header":"bp_base_grid_list_item_module_header--1d1aa","subtitle":"bp_base_grid_list_item_module_subtitle--1d1aa","actions":"bp_base_grid_list_item_module_actions--1d1aa","selection":"bp_base_grid_list_item_module_selection--1d1aa","inner":"bp_base_grid_list_item_module_inner--1d1aa","actionsCheckboxWrapper":"bp_base_grid_list_item_module_actionsCheckboxWrapper--1d1aa","largeList":"bp_base_grid_list_item_module_largeList--1d1aa","largeListItem":"bp_base_grid_list_item_module_largeListItem--1d1aa","fade":"bp_base_grid_list_item_module_fade--1d1aa","description":"bp_base_grid_list_item_module_description--1d1aa","snippet":"bp_base_grid_list_item_module_snippet--1d1aa","snippetContent":"bp_base_grid_list_item_module_snippetContent--1d1aa","react-aria-DropIndicator":"bp_base_grid_list_item_module_react-aria-DropIndicator--1d1aa","gridList":"bp_base_grid_list_item_module_gridList--1d1aa","gridListItem":"bp_base_grid_list_item_module_gridListItem--1d1aa","statusPin":"bp_base_grid_list_item_module_statusPin--1d1aa","isItemInteracted":"bp_base_grid_list_item_module_isItemInteracted--1d1aa","tooltipContent":"bp_base_grid_list_item_module_tooltipContent--1d1aa","tooltipArrow":"bp_base_grid_list_item_module_tooltipArrow--1d1aa","staticList":"bp_base_grid_list_item_module_staticList--1d1aa","staticListItem":"bp_base_grid_list_item_module_staticListItem--1d1aa"};
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.72.0",
3
+ "version": "12.74.0",
4
4
  "type": "module",
5
5
  "license": "SEE LICENSE IN LICENSE",
6
6
  "publishConfig": {