@box/blueprint-web 12.69.2 → 12.71.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (10) hide show
  1. package/dist/lib-esm/index.css +332 -192
  2. package/dist/lib-esm/modal/modal-close.js +9 -3
  3. package/dist/lib-esm/modal/modal-content.d.ts +1 -1
  4. package/dist/lib-esm/modal/modal.d.ts +1 -1
  5. package/dist/lib-esm/modal/modal.module.js +1 -1
  6. package/dist/lib-esm/modal/types.d.ts +7 -6
  7. package/dist/lib-esm/primitives/popover/popover.module.js +1 -1
  8. package/dist/lib-esm/primitives/select-menu-grid/select-menu-grid-option.js +24 -4
  9. package/dist/lib-esm/primitives/select-menu-grid/select-menu-grid-option.module.js +1 -1
  10. package/package.json +1 -1
package/dist/lib-esm/index.css CHANGED
@@ -6013,7 +6013,8 @@ table.bp_inline_table_module_inlineTable--14908[data-modern=true] td:last-child,
6013
6013
  display:inline;
6014
6014
  }
6015
6015
 
6016
- .bp_modal_module_overlay--75897[data-modern=false]{
6016
+ .bp_modal_module_overlay--bc07b[data-modern=false]{
6017
+ --modal-body-text-color:var(--text-text-on-light);
6017
6018
  --modal-overlay-background:var(--overlay-modal-overlay);
6018
6019
  --modal-content-background:var(--gray-white);
6019
6020
  --modal-min-width-non-fullscreen:calc(460px - var(--space-8)*2);
@@ -6037,7 +6038,7 @@ table.bp_inline_table_module_inlineTable--14908[data-modern=true] td:last-child,
6037
6038
  --modal-title-gap:var(--space-2);
6038
6039
  --modal-title-padding:var(--space-5) var(--space-12) var(--space-5) var(--space-4);
6039
6040
  --modal-title-padding-non-fullscreen:var(--space-6) var(--space-16) var(--space-6) var(--space-6);
6040
- --modal-body-padding:var(--space-6) var(--space-4) var(--space-4);
6041
+ --modal-body-padding-fullscreen:var(--space-6) var(--space-4) var(--space-4);
6041
6042
  --modal-body-padding-non-fullscreen:var(--space-6) var(--space-6) var(--space-4);
6042
6043
  --modal-divider-line-border:var(--border-1) solid var(--border-divider-border);
6043
6044
  --modal-divider-line-offset-right:var(--space-4);
@@ -6049,9 +6050,9 @@ table.bp_inline_table_module_inlineTable--14908[data-modern=true] td:last-child,
6049
6050
  --modal-footer-button-margin-inline-start:var(--space-3);
6050
6051
  }
6051
6052
 
6052
- .bp_modal_module_overlay--75897[data-modern=true]{
6053
+ .bp_modal_module_overlay--bc07b[data-modern=true]{
6053
6054
  --modal-overlay-background:var(--bp-overlay-modal-overlay);
6054
- --modal-content-background:var(--bp-gray-white);
6055
+ --modal-content-background:var(--bp-surface-modal-surface);
6055
6056
  --modal-min-width-non-fullscreen:calc(460px - var(--bp-space-080)*2);
6056
6057
  --modal-max-height-non-fullscreen:calc(100vh - var(--bp-space-080)*2);
6057
6058
  --modal-max-width-small:460px;
@@ -6060,6 +6061,7 @@ table.bp_inline_table_module_inlineTable--14908[data-modern=true] td:last-child,
6060
6061
  --modal-max-width-xlarge:768px;
6061
6062
  --modal-margin:0 var(--bp-space-080);
6062
6063
  --modal-border-radius:var(--bp-radius-16);
6064
+ --modal-body-text-color:var(--bp-text-text-on-light);
6063
6065
  --modal-close-button-color:var(--bp-icon-icon-on-light-secondary);
6064
6066
  --modal-close-button-offset-top:var(--bp-space-040);
6065
6067
  --modal-close-button-offset-right:var(--bp-space-040);
@@ -6073,8 +6075,8 @@ table.bp_inline_table_module_inlineTable--14908[data-modern=true] td:last-child,
6073
6075
  --modal-title-gap:var(--bp-space-020);
6074
6076
  --modal-title-padding:var(--bp-space-050) var(--bp-space-120) var(--bp-space-050) var(--bp-space-040);
6075
6077
  --modal-title-padding-non-fullscreen:var(--bp-space-060) var(--bp-space-160) var(--bp-space-060) var(--bp-space-060);
6076
- --modal-body-padding:var(--bp-space-060) var(--bp-space-040) var(--bp-space-040);
6077
- --modal-body-padding-non-fullscreen:var(--bp-space-060) var(--bp-space-060) var(--bp-space-040);
6078
+ --modal-body-padding-fullscreen:var(--bp-space-020) var(--bp-space-040) var(--bp-space-040) var(--bp-space-040);
6079
+ --modal-body-padding-non-fullscreen:var(--bp-space-020) var(--bp-space-060) var(--bp-space-040) var(--bp-space-060);
6078
6080
  --modal-divider-line-border:var(--bp-border-01) solid var(--bp-border-divider-border);
6079
6081
  --modal-divider-line-offset-right:var(--bp-space-040);
6080
6082
  --modal-divider-line-offset-left:var(--bp-space-040);
@@ -6085,7 +6087,7 @@ table.bp_inline_table_module_inlineTable--14908[data-modern=true] td:last-child,
6085
6087
  --modal-footer-button-margin-inline-start:var(--bp-space-030);
6086
6088
  }
6087
6089
 
6088
- .bp_modal_module_overlay--75897{
6090
+ .bp_modal_module_overlay--bc07b{
6089
6091
  background-color:var(--modal-overlay-background);
6090
6092
  bottom:0;
6091
6093
  display:grid;
@@ -6097,13 +6099,13 @@ table.bp_inline_table_module_inlineTable--14908[data-modern=true] td:last-child,
6097
6099
  z-index:370;
6098
6100
  }
6099
6101
  @media (width > 459px){
6100
- .bp_modal_module_overlay--75897{
6102
+ .bp_modal_module_overlay--bc07b{
6101
6103
  place-items:center;
6102
6104
  }
6103
6105
  }
6104
6106
 
6105
- .bp_modal_module_content--75897{
6106
- animation:bp_modal_module_popup_bounce_in--75897 var(--animation-duration-3);
6107
+ .bp_modal_module_content--bc07b{
6108
+ animation:bp_modal_module_popup_bounce_in--bc07b var(--animation-duration-3);
6107
6109
  background-color:var(--modal-content-background);
6108
6110
  display:flex;
6109
6111
  flex-direction:column;
@@ -6112,80 +6114,80 @@ table.bp_inline_table_module_inlineTable--14908[data-modern=true] td:last-child,
6112
6114
  position:relative;
6113
6115
  }
6114
6116
  @media (width > 374px){
6115
- .bp_modal_module_content--75897{
6117
+ .bp_modal_module_content--bc07b{
6116
6118
  overflow:hidden;
6117
6119
  }
6118
6120
  }
6119
6121
  @media (width > 459px){
6120
- .bp_modal_module_content--75897{
6122
+ .bp_modal_module_content--bc07b{
6121
6123
  border-radius:var(--modal-border-radius);
6122
6124
  height:auto;
6123
6125
  margin:var(--modal-margin);
6124
6126
  max-height:var(--modal-max-height-non-fullscreen);
6125
6127
  min-width:var(--modal-min-width-non-fullscreen);
6126
6128
  }
6127
- .bp_modal_module_content--75897.bp_modal_module_smallSizeModal--75897{
6129
+ .bp_modal_module_content--bc07b.bp_modal_module_smallSizeModal--bc07b{
6128
6130
  max-width:var(--modal-max-width-small);
6129
6131
  }
6130
- .bp_modal_module_content--75897.bp_modal_module_mediumSizeModal--75897{
6132
+ .bp_modal_module_content--bc07b.bp_modal_module_mediumSizeModal--bc07b{
6131
6133
  max-width:var(--modal-max-width-medium);
6132
6134
  }
6133
- .bp_modal_module_content--75897.bp_modal_module_largeSizeModal--75897{
6135
+ .bp_modal_module_content--bc07b.bp_modal_module_largeSizeModal--bc07b{
6134
6136
  max-width:var(--modal-max-width-large);
6135
6137
  }
6136
- .bp_modal_module_content--75897.bp_modal_module_xlargeSizeModal--75897{
6138
+ .bp_modal_module_content--bc07b.bp_modal_module_xlargeSizeModal--bc07b{
6137
6139
  max-width:var(--modal-max-width-xlarge);
6138
6140
  }
6139
6141
  }
6140
6142
 
6141
- .bp_modal_module_scrollableContainer--75897{
6143
+ .bp_modal_module_scrollableContainer--bc07b{
6142
6144
  flex-grow:1;
6143
6145
  }
6144
6146
  @media (width > 374px){
6145
- .bp_modal_module_scrollableContainer--75897{
6147
+ .bp_modal_module_scrollableContainer--bc07b{
6146
6148
  overflow-y:auto;
6147
6149
  }
6148
6150
  }
6149
6151
 
6150
- .bp_modal_module_content--75897 .bp_modal_module_close--75897{
6152
+ .bp_modal_module_content--bc07b .bp_modal_module_close--bc07b{
6151
6153
  color:var(--modal-close-button-color);
6152
6154
  position:fixed;
6153
6155
  right:var(--modal-close-button-offset-right);
6154
6156
  top:var(--modal-close-button-offset-top);
6155
6157
  }
6156
6158
  @media (width > 374px){
6157
- .bp_modal_module_content--75897 .bp_modal_module_close--75897{
6159
+ .bp_modal_module_content--bc07b .bp_modal_module_close--bc07b{
6158
6160
  position:absolute;
6159
6161
  }
6160
6162
  }
6161
6163
 
6162
- .bp_modal_module_close--75897.bp_modal_module_onColor--75897{
6164
+ .bp_modal_module_close--bc07b.bp_modal_module_onColor--bc07b{
6163
6165
  background-color:var(--modal-close-button-on-color-background);
6164
6166
  }
6165
- .bp_modal_module_close--75897.bp_modal_module_onColor--75897:hover{
6167
+ .bp_modal_module_close--bc07b.bp_modal_module_onColor--bc07b:hover{
6166
6168
  background-color:var(--modal-close-button-on-color-background-hover);
6167
6169
  }
6168
- .bp_modal_module_close--75897.bp_modal_module_onColor--75897:active{
6170
+ .bp_modal_module_close--bc07b.bp_modal_module_onColor--bc07b:active{
6169
6171
  background-color:var(--modal-close-button-on-color-background-pressed);
6170
6172
  }
6171
6173
 
6172
- .bp_modal_module_content--75897 .bp_modal_module_backButton--75897{
6174
+ .bp_modal_module_content--bc07b .bp_modal_module_backButton--bc07b{
6173
6175
  color:var(--modal-back-button-color);
6174
6176
  margin-block-start:var(--modal-back-button-margin-top-start);
6175
6177
  margin-inline-start:var(--modal-back-button-margin-inline-start);
6176
6178
  }
6177
6179
  @media (width > 459px){
6178
- .bp_modal_module_content--75897 .bp_modal_module_backButton--75897{
6180
+ .bp_modal_module_content--bc07b .bp_modal_module_backButton--bc07b{
6179
6181
  height:var(--modal-back-button-size-non-fullscreen);
6180
6182
  width:var(--modal-back-button-size-non-fullscreen);
6181
6183
  }
6182
6184
  }
6183
6185
 
6184
- .bp_modal_module_modalHeader--75897{
6186
+ .bp_modal_module_modalHeader--bc07b{
6185
6187
  display:flex;
6186
6188
  }
6187
6189
 
6188
- .bp_modal_module_modalTitle--75897{
6190
+ .bp_modal_module_modalTitle--bc07b{
6189
6191
  display:flex;
6190
6192
  flex-direction:column;
6191
6193
  gap:var(--modal-title-gap);
@@ -6193,24 +6195,25 @@ table.bp_inline_table_module_inlineTable--14908[data-modern=true] td:last-child,
6193
6195
  padding:var(--modal-title-padding);
6194
6196
  }
6195
6197
  @media (width > 459px){
6196
- .bp_modal_module_modalTitle--75897{
6198
+ .bp_modal_module_modalTitle--bc07b{
6197
6199
  padding:var(--modal-title-padding-non-fullscreen);
6198
6200
  }
6199
6201
  }
6200
6202
 
6201
- .bp_modal_module_body--75897{
6202
- padding:var(--modal-body-padding);
6203
+ .bp_modal_module_body--bc07b{
6204
+ color:var(--modal-body-text-color);
6205
+ padding:var(--modal-body-padding-fullscreen);
6203
6206
  }
6204
6207
  @media (width > 459px){
6205
- .bp_modal_module_body--75897{
6208
+ .bp_modal_module_body--bc07b{
6206
6209
  padding:var(--modal-body-padding-non-fullscreen);
6207
6210
  }
6208
6211
  }
6209
6212
 
6210
- .bp_modal_module_headerDividerLine--75897{
6213
+ .bp_modal_module_headerDividerLine--bc07b{
6211
6214
  position:relative;
6212
6215
  }
6213
- .bp_modal_module_headerDividerLine--75897::after{
6216
+ .bp_modal_module_headerDividerLine--bc07b::after{
6214
6217
  border-bottom:var(--modal-divider-line-border);
6215
6218
  bottom:0;
6216
6219
  content:"";
@@ -6219,16 +6222,16 @@ table.bp_inline_table_module_inlineTable--14908[data-modern=true] td:last-child,
6219
6222
  right:var(--modal-divider-line-offset-right);
6220
6223
  }
6221
6224
  @media (width > 459px){
6222
- .bp_modal_module_headerDividerLine--75897::after{
6225
+ .bp_modal_module_headerDividerLine--bc07b::after{
6223
6226
  left:var(--modal-divider-line-offset-left-non-fullscreen);
6224
6227
  right:var(--modal-divider-line-offset-right-non-fullscreen);
6225
6228
  }
6226
6229
  }
6227
6230
 
6228
- .bp_modal_module_footerDividerLine--75897{
6231
+ .bp_modal_module_footerDividerLine--bc07b{
6229
6232
  position:relative;
6230
6233
  }
6231
- .bp_modal_module_footerDividerLine--75897::before{
6234
+ .bp_modal_module_footerDividerLine--bc07b::before{
6232
6235
  border-bottom:var(--modal-divider-line-border);
6233
6236
  content:"";
6234
6237
  left:var(--modal-divider-line-offset-left);
@@ -6237,28 +6240,28 @@ table.bp_inline_table_module_inlineTable--14908[data-modern=true] td:last-child,
6237
6240
  top:0;
6238
6241
  }
6239
6242
  @media (width > 459px){
6240
- .bp_modal_module_footerDividerLine--75897::before{
6243
+ .bp_modal_module_footerDividerLine--bc07b::before{
6241
6244
  left:var(--modal-divider-line-offset-left-non-fullscreen);
6242
6245
  right:var(--modal-divider-line-offset-right-non-fullscreen);
6243
6246
  }
6244
6247
  }
6245
6248
 
6246
- .bp_modal_module_footer--75897{
6249
+ .bp_modal_module_footer--bc07b{
6247
6250
  display:flex;
6248
6251
  justify-content:flex-end;
6249
6252
  padding:var(--modal-footer-padding);
6250
6253
  }
6251
6254
  @media (width > 459px){
6252
- .bp_modal_module_footer--75897{
6255
+ .bp_modal_module_footer--bc07b{
6253
6256
  padding:var(--modal-footer-padding-non-fullscreen);
6254
6257
  }
6255
6258
  }
6256
6259
 
6257
- .bp_modal_module_footerButton--75897 + .bp_modal_module_footerButton--75897{
6260
+ .bp_modal_module_footerButton--bc07b + .bp_modal_module_footerButton--bc07b{
6258
6261
  margin-inline-start:var(--modal-footer-button-margin-inline-start);
6259
6262
  }
6260
6263
 
6261
- @keyframes bp_modal_module_popup_bounce_in--75897{
6264
+ @keyframes bp_modal_module_popup_bounce_in--bc07b{
6262
6265
  0%{
6263
6266
  transform:scale3d(.1, .1, 1);
6264
6267
  }
@@ -7394,7 +7397,7 @@ div[data-radix-popper-content-wrapper]:has([role=menu]):has([data-state=open]):h
7394
7397
  fill:currentColor;
7395
7398
  }
7396
7399
 
7397
- .bp_popover_module_popoverContentContainer--195db .bp_popover_module_popoverCard--195db .bp_popover_module_popoverMainContent--195db,.bp_popover_module_popoverContentContainer--195db.bp_popover_module_accessibilitySmallBreakpoint--195db .bp_popover_module_popoverCard--195db .bp_popover_module_popoverScrollContainer--195db{
7400
+ .bp_popover_module_popoverContentContainer--12858 .bp_popover_module_popoverCard--12858 .bp_popover_module_popoverMainContent--12858,.bp_popover_module_popoverContentContainer--12858.bp_popover_module_accessibilitySmallBreakpoint--12858 .bp_popover_module_popoverCard--12858 .bp_popover_module_popoverScrollContainer--12858{
7398
7401
  margin-inline-end:var(--scroll-mask-margin-inline-end);
7399
7402
  mask-image:var(--scroll-mask-mask-image);
7400
7403
  mask-position:var(--scroll-mask-mask-position);
@@ -7404,7 +7407,7 @@ div[data-radix-popper-content-wrapper]:has([role=menu]):has([data-state=open]):h
7404
7407
  transition:var(--scroll-mask-transition);
7405
7408
  }
7406
7409
 
7407
- .bp_popover_module_popoverContentContainer--195db[data-modern=false]{
7410
+ .bp_popover_module_popoverContentContainer--12858[data-modern=false]{
7408
7411
  --scroll-mask-padding-right:var(--space-4);
7409
7412
  --scroll-mask-overflow:auto;
7410
7413
  --scroll-mask-transition:mask-position var(--animation-duration-3), -webkit-mask-position var(--animation-duration-3);
@@ -7414,6 +7417,7 @@ div[data-radix-popper-content-wrapper]:has([role=menu]):has([data-state=open]):h
7414
7417
  --scroll-mask-mask-position:left bottom;
7415
7418
  --popover-card-margin-block:var(--space-1);
7416
7419
  --popover-card-box-shadow:var(--dropshadow-3);
7420
+ --popover-content-text-color:var(--text-text-on-light);
7417
7421
  --popover-main-content-inner-container-padding:var(--space-3);
7418
7422
  --popover-scroll-container-small-breakpoint-max-height:min(
7419
7423
  var(
@@ -7429,7 +7433,7 @@ div[data-radix-popper-content-wrapper]:has([role=menu]):has([data-state=open]):h
7429
7433
  --popover-footer-border-top:var(--border-1) solid var(--border-card-border);
7430
7434
  }
7431
7435
 
7432
- .bp_popover_module_popoverContentContainer--195db[data-modern=true]{
7436
+ .bp_popover_module_popoverContentContainer--12858[data-modern=true]{
7433
7437
  --bp-dropshadow-3:var(--dropshadow-3);
7434
7438
  --bp-animation-duration-3:var(--animation-duration-3);
7435
7439
  --scroll-mask-padding-right:var(--bp-space-040);
@@ -7441,6 +7445,7 @@ div[data-radix-popper-content-wrapper]:has([role=menu]):has([data-state=open]):h
7441
7445
  --scroll-mask-mask-position:left bottom;
7442
7446
  --popover-card-margin-block:var(--bp-space-010);
7443
7447
  --popover-card-box-shadow:var(--bp-dropshadow-3);
7448
+ --popover-content-text-color:var(--bp-text-text-on-light);
7444
7449
  --popover-main-content-inner-container-padding:var(--bp-space-030);
7445
7450
  --popover-scroll-container-small-breakpoint-max-height:min(
7446
7451
  var(
@@ -7456,43 +7461,47 @@ div[data-radix-popper-content-wrapper]:has([role=menu]):has([data-state=open]):h
7456
7461
  --popover-footer-border-top:var(--bp-border-01) solid var(--bp-border-card-border);
7457
7462
  }
7458
7463
 
7459
- .bp_popover_module_popoverContentContainer--195db{
7464
+ .bp_popover_module_popoverContentContainer--12858{
7460
7465
  max-width:320px;
7461
7466
  z-index:var(--z-index-popover);
7462
7467
  }
7463
- .bp_popover_module_popoverContentContainer--195db .bp_popover_module_popoverCard--195db{
7468
+ .bp_popover_module_popoverContentContainer--12858 .bp_popover_module_popoverCard--12858{
7464
7469
  box-shadow:var(--popover-card-box-shadow);
7465
7470
  margin-block:var(--popover-card-margin-block);
7466
7471
  }
7467
- .bp_popover_module_popoverContentContainer--195db .bp_popover_module_popoverCard--195db .bp_popover_module_popoverMainContent--195db:hover{
7472
+ .bp_popover_module_popoverContentContainer--12858 .bp_popover_module_popoverCard--12858 .bp_popover_module_popoverMainContent--12858{
7473
+ color:var(--popover-content-text-color);
7474
+ }
7475
+ .bp_popover_module_popoverContentContainer--12858 .bp_popover_module_popoverCard--12858 .bp_popover_module_popoverMainContent--12858:hover{
7468
7476
  mask-position:left top;
7469
7477
  }
7470
- .bp_popover_module_popoverContentContainer--195db .bp_popover_module_popoverCard--195db .bp_popover_module_popoverMainContent--195db .bp_popover_module_popoverMainContentOuterContainer--195db{
7478
+ .bp_popover_module_popoverContentContainer--12858 .bp_popover_module_popoverCard--12858 .bp_popover_module_popoverMainContent--12858 .bp_popover_module_popoverMainContentOuterContainer--12858{
7471
7479
  max-height:inherit;
7472
7480
  }
7473
- .bp_popover_module_popoverContentContainer--195db .bp_popover_module_popoverCard--195db .bp_popover_module_popoverMainContent--195db .bp_popover_module_popoverMainContentOuterContainer--195db .bp_popover_module_popoverMainContentInnerContainerPadding--195db{
7481
+ .bp_popover_module_popoverContentContainer--12858 .bp_popover_module_popoverCard--12858 .bp_popover_module_popoverMainContent--12858 .bp_popover_module_popoverMainContentOuterContainer--12858 .bp_popover_module_popoverMainContentInnerContainerPadding--12858{
7474
7482
  padding-block-end:var(--popover-main-content-inner-container-padding);
7475
7483
  }
7476
- .bp_popover_module_popoverContentContainer--195db.bp_popover_module_accessibilitySmallBreakpoint--195db{
7484
+ .bp_popover_module_popoverContentContainer--12858.bp_popover_module_accessibilitySmallBreakpoint--12858{
7477
7485
  max-height:var(--radix-popover-content-available-height);
7478
7486
  }
7479
- .bp_popover_module_popoverContentContainer--195db.bp_popover_module_accessibilitySmallBreakpoint--195db .bp_popover_module_popoverCard--195db .bp_popover_module_popoverScrollContainer--195db{
7487
+ .bp_popover_module_popoverContentContainer--12858.bp_popover_module_accessibilitySmallBreakpoint--12858 .bp_popover_module_popoverCard--12858 .bp_popover_module_popoverScrollContainer--12858{
7488
+ color:var(--popover-content-text-color);
7480
7489
  max-height:var(--popover-scroll-container-small-breakpoint-max-height);
7481
7490
  padding-block:var(--popover-scroll-container-small-breakpoint-padding-block);
7482
7491
  }
7483
- .bp_popover_module_popoverContentContainer--195db.bp_popover_module_accessibilitySmallBreakpoint--195db .bp_popover_module_popoverCard--195db .bp_popover_module_popoverScrollContainer--195db:hover{
7492
+ .bp_popover_module_popoverContentContainer--12858.bp_popover_module_accessibilitySmallBreakpoint--12858 .bp_popover_module_popoverCard--12858 .bp_popover_module_popoverScrollContainer--12858:hover{
7484
7493
  mask-position:left top;
7485
7494
  }
7486
- .bp_popover_module_popoverContentContainer--195db.bp_popover_module_accessibilitySmallBreakpoint--195db .bp_popover_module_popoverCard--195db .bp_popover_module_popoverScrollContainer--195db .bp_popover_module_popoverMainContent--195db{
7495
+ .bp_popover_module_popoverContentContainer--12858.bp_popover_module_accessibilitySmallBreakpoint--12858 .bp_popover_module_popoverCard--12858 .bp_popover_module_popoverScrollContainer--12858 .bp_popover_module_popoverMainContent--12858{
7487
7496
  max-height:-moz-fit-content;
7488
7497
  max-height:fit-content;
7489
7498
  }
7490
- .bp_popover_module_popoverContentContainer--195db .bp_popover_module_popoverFooter--195db{
7499
+ .bp_popover_module_popoverContentContainer--12858 .bp_popover_module_popoverFooter--12858{
7491
7500
  margin-inline:var(--popover-footer-margin-inline);
7492
7501
  padding-block-start:var(--popover-footer-padding-block-start);
7493
7502
  padding-inline:var(--popover-footer-padding-inline);
7494
7503
  }
7495
- .bp_popover_module_popoverContentContainer--195db .bp_popover_module_popoverFooter--195db.bp_popover_module_popoverFooterTopBorder--195db{
7504
+ .bp_popover_module_popoverContentContainer--12858 .bp_popover_module_popoverFooter--12858.bp_popover_module_popoverFooterTopBorder--12858{
7496
7505
  border-top:var(--popover-footer-border-top);
7497
7506
  }
7498
7507
  .bp_select_menu_grid_module_grid--6e766{
@@ -7504,82 +7513,161 @@ div[data-radix-popper-content-wrapper]:has([role=menu]):has([data-state=open]):h
7504
7513
  flex-direction:row;
7505
7514
  }
7506
7515
 
7507
- .bp_select_menu_grid_option_module_buttonWrapper--bade8.bp_select_menu_grid_option_module_withLabel--bade8{
7516
+ .bp_select_menu_grid_option_module_buttonWrapper--fb290[data-modern=false]{
7517
+ --select-menu-grid-option-labeled-margin-small-breakpoint:var(--space-05) 0;
7518
+ --select-menu-grid-option-labeled-margin:var(--space-05);
7519
+ --select-menu-grid-option-labeled-max-width:calc(50% - var(--space-1));
7520
+ --select-menu-grid-option-labeled-max-width-first-child-margin-left:0;
7521
+ --select-menu-grid-option-labeled-max-width-last-child-margin-right:0;
7522
+ }
7523
+
7524
+ .bp_select_menu_grid_option_module_buttonWrapper--fb290[data-modern=true]{
7525
+ --select-menu-grid-option-labeled-margin-small-breakpoint:var(--bp-space-005) 0;
7526
+ --select-menu-grid-option-labeled-margin:var(--bp-space-005);
7527
+ --select-menu-grid-option-labeled-max-width:calc(50% - var(--bp-size-010));
7528
+ --select-menu-grid-option-labeled-max-width-first-child-margin-left:0;
7529
+ --select-menu-grid-option-labeled-max-width-last-child-margin-right:0;
7530
+ }
7531
+
7532
+ .bp_select_menu_grid_option_module_buttonWrapper--fb290.bp_select_menu_grid_option_module_withLabel--fb290{
7508
7533
  flex:1 1 0;
7509
- margin:var(--space-05) 0;
7534
+ margin:var(--select-menu-grid-option-labeled-margin-small-breakpoint);
7510
7535
  }
7511
- .bp_select_menu_grid_option_module_buttonWrapper--bade8.bp_select_menu_grid_option_module_withLabel--default--bade8{
7536
+ .bp_select_menu_grid_option_module_buttonWrapper--fb290.bp_select_menu_grid_option_module_withLabel--default--fb290{
7512
7537
  max-width:100%;
7513
7538
  }
7514
7539
  @media only screen and (width > 374px){
7515
- .bp_select_menu_grid_option_module_buttonWrapper--bade8.bp_select_menu_grid_option_module_withLabel--default--bade8{
7516
- margin:var(--space-05);
7517
- max-width:calc(50% - var(--space-1));
7540
+ .bp_select_menu_grid_option_module_buttonWrapper--fb290.bp_select_menu_grid_option_module_withLabel--default--fb290{
7541
+ margin:var(--select-menu-grid-option-labeled-margin);
7542
+ max-width:var(--select-menu-grid-option-labeled-max-width);
7518
7543
  }
7519
- .bp_select_menu_grid_option_module_buttonWrapper--bade8.bp_select_menu_grid_option_module_withLabel--default--bade8:first-child{
7520
- margin-left:0;
7544
+ .bp_select_menu_grid_option_module_buttonWrapper--fb290.bp_select_menu_grid_option_module_withLabel--default--fb290:first-child{
7545
+ margin-left:var(--select-menu-grid-option-labeled-max-width-first-child-margin-left);
7521
7546
  }
7522
- .bp_select_menu_grid_option_module_buttonWrapper--bade8.bp_select_menu_grid_option_module_withLabel--default--bade8:last-child{
7523
- margin-right:0;
7547
+ .bp_select_menu_grid_option_module_buttonWrapper--fb290.bp_select_menu_grid_option_module_withLabel--default--fb290:last-child{
7548
+ margin-right:var(--select-menu-grid-option-labeled-max-width-last-child-margin-right);
7524
7549
  }
7525
7550
  }
7526
7551
 
7527
- .bp_select_menu_grid_option_module_square--bade8{
7528
- height:var(--size-8);
7529
- width:var(--size-8);
7530
- }
7531
- .bp_select_menu_grid_option_module_square--bade8,.bp_select_menu_grid_option_module_square--bade8 .bp_select_menu_grid_option_module_outlineHost--bade8{
7532
- align-items:center;
7533
- border-radius:var(--radius-3);
7534
- display:flex;
7535
- justify-content:center;
7536
- }
7537
- .bp_select_menu_grid_option_module_square--bade8 .bp_select_menu_grid_option_module_outlineHost--bade8{
7538
- height:var(--size-7);
7539
- width:var(--size-7);
7540
- }
7541
-
7542
- .bp_select_menu_grid_option_module_circle--bade8{
7543
- align-items:center;
7544
- background-clip:content-box;
7545
- background-color:var(--gray-white);
7546
- border:var(--border-1) solid var(--gray-10);
7547
- border-radius:50%;
7548
- box-sizing:border-box;
7549
- display:flex;
7550
- height:var(--size-8);
7551
- justify-content:center;
7552
- width:var(--size-8);
7553
- }
7554
- .bp_select_menu_grid_option_module_circle--bade8.bp_select_menu_grid_option_module_loading--bade8{
7555
- border-color:var(--gray-white);
7556
- }
7557
- .bp_select_menu_grid_option_module_circle--bade8 .bp_select_menu_grid_option_module_color--bade8{
7558
- background-color:var(--circleColor);
7559
- border:var(--border-1) solid var(--circleBorderColor);
7560
- border-radius:50%;
7561
- box-sizing:border-box;
7562
- height:var(--size-6);
7563
- width:var(--size-6);
7564
- }
7565
- .bp_select_menu_grid_option_module_circle--bade8 .bp_select_menu_grid_option_module_strikeThrough--bade8{
7566
- position:relative;
7567
- }
7568
- .bp_select_menu_grid_option_module_circle--bade8 .bp_select_menu_grid_option_module_strikeThrough--bade8::after{
7569
- background-color:var(--watermelon-red-100);
7570
- border-radius:var(--radius-1);
7571
- content:"";
7572
- height:.15625rem;
7573
- left:.0625rem;
7574
- position:absolute;
7575
- top:45%;
7576
- transform:rotate(-45deg);
7577
- width:90%;
7578
- }
7579
-
7580
- .bp_select_menu_grid_option_module_optionButton--bade8{
7552
+ .bp_select_menu_grid_option_module_optionButton--fb290[data-modern=false]{
7553
+ --select-menu-grid-option-background-color:#0000;
7554
+ --select-menu-grid-option-labeled-background-color-hover:var(--surface-surface-secondary);
7555
+ --select-menu-grid-option-labeled-background-color-active:var(--surface-surface-secondary);
7556
+ --select-menu-grid-option-labeled-box-shadow:var(--dropshadow-2);
7557
+ --select-menu-grid-option-labeled-box-shadow-dragging:0 0 0 var(--border-1) var(--border-divider-border), var(--dropshadow-2);
7558
+ --select-menu-grid-option-labeled-box-shadow-focus:0 0 0 var(--border-2) var(--outline-focus-on-light);
7559
+ --select-menu-grid-option-not-labeled-width:var(--size-8);
7560
+ --select-menu-grid-option-not-labeled-height:var(--size-8);
7561
+ --select-menu-grid-option-not-labeled-padding:0;
7562
+ --select-menu-grid-option-labeled-gap:var(--space-3);
7563
+ --select-menu-grid-option-labeled-min-width:10rem;
7564
+ --select-menu-grid-option-labeled-padding:var(--space-1);
7565
+ --select-menu-grid-option-labeled-border-radius:var(--radius-3);
7566
+ --select-menu-grid-option-labeled-transition:background-color var(--animation-duration-2);
7567
+ --select-menu-grid-option-labeled-text-max-height:var(--size-8);
7568
+ --select-menu-grid-option-labeled-text-color:var(--text-text-on-light);
7569
+ --select-menu-grid-option-labeled-icon-border-radius:var(--radius-3);
7570
+ --select-menu-grid-option-labeled-icon-default-size:var(--size-8);
7571
+ --select-menu-grid-option-labeled-icon-large-size:var(--size-10);
7572
+ --select-menu-grid-option-labeled-icon-default-background:var(--surface-surface-tertiary);
7573
+ --select-menu-grid-option-labeled-icon-default-background-dark:var(--surface-surface-quaternary);
7574
+ --select-menu-grid-option-labeled-icon-box-background:var(--brand-box-tertiary);
7575
+ --select-menu-grid-option-labeled-icon-box-background-dark:var(--brand-box-secondary);
7576
+ --select-menu-grid-option-labeled-icon-docgen-background:var(--brand-docgen-tertiary);
7577
+ --select-menu-grid-option-labeled-icon-docgen-background-dark:var(--brand-docgen-secondary);
7578
+ --select-menu-grid-option-labeled-icon-forms-background:var(--brand-forms-tertiary);
7579
+ --select-menu-grid-option-labeled-icon-forms-background-dark:var(--brand-forms-secondary);
7580
+ --select-menu-grid-option-labeled-icon-sign-background:var(--brand-sign-tertiary);
7581
+ --select-menu-grid-option-labeled-icon-sign-background-dark:var(--brand-sign-secondary);
7582
+ --select-menu-grid-option-square-width:var(--size-8);
7583
+ --select-menu-grid-option-square-height:var(--size-8);
7584
+ --select-menu-grid-option-square-outline-host-width:var(--size-7);
7585
+ --select-menu-grid-option-square-outline-host-height:var(--size-7);
7586
+ --select-menu-grid-option-square-border-radius:var(--radius-3);
7587
+ --select-menu-grid-option-square-background-color-hover:var(--surface-cta-surface-outline-hover);
7588
+ --select-menu-grid-option-square-background-color-active:var(--surface-cta-surface-outline-pressed);
7589
+ --select-menu-grid-option-circle-width:var(--size-8);
7590
+ --select-menu-grid-option-circle-height:var(--size-8);
7591
+ --select-menu-grid-option-circle-border-radius:50%;
7592
+ --select-menu-grid-option-circle-background-color:var(--gray-white);
7593
+ --select-menu-grid-option-circle-border:var(--border-1) solid var(--gray-10);
7594
+ --select-menu-grid-option-circle-border-color-loading:var(--gray-white);
7595
+ --select-menu-grid-option-circle-border-width-active:var(--border-2);
7596
+ --select-menu-grid-option-circle-inner-width:var(--size-6);
7597
+ --select-menu-grid-option-circle-inner-height:var(--size-6);
7598
+ --select-menu-grid-option-circle-inner-border-width:var(--border-1);
7599
+ --select-menu-grid-option-circle-inner-border-width-active:var(--border-2);
7600
+ --select-menu-grid-option-circle-inner-border-radius:50%;
7601
+ --select-menu-grid-option-circle-strikethrough-background-color:var(--watermelon-red-100);
7602
+ --select-menu-grid-option-circle-strikethrough-border-radius:var(--radius-1);
7603
+ --select-menu-grid-option-circle-background-color-hover:var(--surface-option-grid-surface-hover);
7604
+ --select-menu-grid-option-circle-outline-host-box-shadow-focus:0 0 0 var(--border-2) var(--outline-focus-on-light);
7605
+ --select-menu-grid-option-circle-border-color-hover:var(--surface-option-grid-surface-hover);
7606
+ --select-menu-grid-option-circle-border-width-focus-active:var(--border-2);
7607
+ --select-menu-grid-option-circle-box-shadow-focus-active:0 0 0 var(--border-1) var(--gray-white), 0 0 0 var(--border-3) var(--outline-focus-on-light);
7608
+ }
7609
+
7610
+ .bp_select_menu_grid_option_module_optionButton--fb290[data-modern=true]{
7611
+ --select-menu-grid-option-background-color:#0000;
7612
+ --select-menu-grid-option-labeled-background-color-hover:var(--bp-surface-surface-secondary);
7613
+ --select-menu-grid-option-labeled-background-color-active:var(--bp-surface-surface-secondary);
7614
+ --select-menu-grid-option-labeled-box-shadow:var(--dropshadow-2);
7615
+ --select-menu-grid-option-labeled-box-shadow-dragging:0 0 0 var(--bp-border-01) var(--bp-border-divider-border), var(--dropshadow-2);
7616
+ --select-menu-grid-option-labeled-box-shadow-focus:0 0 0 var(--bp-border-02) var(--bp-border-input-border-focus);
7617
+ --select-menu-grid-option-not-labeled-width:var(--bp-size-080);
7618
+ --select-menu-grid-option-not-labeled-height:var(--bp-size-080);
7619
+ --select-menu-grid-option-not-labeled-padding:0;
7620
+ --select-menu-grid-option-labeled-gap:var(--bp-space-030);
7621
+ --select-menu-grid-option-labeled-min-width:10rem;
7622
+ --select-menu-grid-option-labeled-padding:var(--bp-space-010);
7623
+ --select-menu-grid-option-labeled-border-radius:var(--bp-radius-06);
7624
+ --select-menu-grid-option-labeled-transition:background-color var(--animation-duration-2);
7625
+ --select-menu-grid-option-labeled-text-max-height:var(--bp-size-080);
7626
+ --select-menu-grid-option-labeled-text-color:var(--bp-text-text-on-light);
7627
+ --select-menu-grid-option-labeled-icon-border-radius:var(--bp-radius-04);
7628
+ --select-menu-grid-option-labeled-icon-default-size:var(--bp-size-080);
7629
+ --select-menu-grid-option-labeled-icon-large-size:var(--bp-size-100);
7630
+ --select-menu-grid-option-labeled-icon-default-background:var(--bp-surface-cta-surface-icon-utility);
7631
+ --select-menu-grid-option-labeled-icon-default-background-dark:var(--bp-surface-surface-quaternary);
7632
+ --select-menu-grid-option-labeled-icon-box-background:var(--brand-box-tertiary);
7633
+ --select-menu-grid-option-labeled-icon-box-background-dark:var(--brand-box-secondary);
7634
+ --select-menu-grid-option-labeled-icon-docgen-background:var(--brand-docgen-tertiary);
7635
+ --select-menu-grid-option-labeled-icon-docgen-background-dark:var(--brand-docgen-secondary);
7636
+ --select-menu-grid-option-labeled-icon-forms-background:var(--brand-forms-tertiary);
7637
+ --select-menu-grid-option-labeled-icon-forms-background-dark:var(--brand-forms-secondary);
7638
+ --select-menu-grid-option-labeled-icon-sign-background:var(--brand-sign-tertiary);
7639
+ --select-menu-grid-option-labeled-icon-sign-background-dark:var(--brand-sign-secondary);
7640
+ --select-menu-grid-option-square-width:var(--bp-size-080);
7641
+ --select-menu-grid-option-square-height:var(--bp-size-080);
7642
+ --select-menu-grid-option-square-outline-host-width:var(--bp-size-070);
7643
+ --select-menu-grid-option-square-outline-host-height:var(--bp-size-070);
7644
+ --select-menu-grid-option-square-border-radius:var(--bp-radius-04);
7645
+ --select-menu-grid-option-square-background-color-hover:var(--bp-surface-option-grid-surface-hover);
7646
+ --select-menu-grid-option-square-background-color-active:var(--bp-surface-option-grid-surface-selected);
7647
+ --select-menu-grid-option-circle-width:var(--bp-size-080);
7648
+ --select-menu-grid-option-circle-height:var(--bp-size-080);
7649
+ --select-menu-grid-option-circle-border-radius:var(--bp-radius-16);
7650
+ --select-menu-grid-option-circle-background-color:var(--bp-gray-white);
7651
+ --select-menu-grid-option-circle-border:var(--bp-border-01) solid var(--bp-gray-10);
7652
+ --select-menu-grid-option-circle-border-color-loading:var(--bp-gray-white);
7653
+ --select-menu-grid-option-circle-border-width-active:var(--bp-border-02);
7654
+ --select-menu-grid-option-circle-inner-width:var(--bp-size-060);
7655
+ --select-menu-grid-option-circle-inner-height:var(--bp-size-060);
7656
+ --select-menu-grid-option-circle-inner-border-width:var(--bp-border-01);
7657
+ --select-menu-grid-option-circle-inner-border-width-active:var(--bp-border-02);
7658
+ --select-menu-grid-option-circle-inner-border-radius:var(--bp-radius-16);
7659
+ --select-menu-grid-option-circle-strikethrough-background-color:var(--bp-watermelon-red-100);
7660
+ --select-menu-grid-option-circle-strikethrough-border-radius:var(--bp-radius-02);
7661
+ --select-menu-grid-option-circle-background-color-hover:var(--bp-surface-option-grid-surface-hover);
7662
+ --select-menu-grid-option-circle-outline-host-box-shadow-focus:0 0 0 var(--bp-border-02) var(--bp-border-input-border-focus);
7663
+ --select-menu-grid-option-circle-border-color-hover:var(--bp-surface-option-grid-surface-hover);
7664
+ --select-menu-grid-option-circle-border-width-focus-active:var(--bp-border-02);
7665
+ --select-menu-grid-option-circle-box-shadow-focus-active:0 0 0 var(--bp-border-01) var(--bp-gray-white), 0 0 0 var(--bp-border-03) var(--bp-border-input-border-focus);
7666
+ }
7667
+
7668
+ .bp_select_menu_grid_option_module_optionButton--fb290{
7581
7669
  align-items:center;
7582
- background-color:initial;
7670
+ background-color:var(--select-menu-grid-option-background-color);
7583
7671
  border:none;
7584
7672
  cursor:pointer;
7585
7673
  display:flex;
@@ -7587,129 +7675,181 @@ div[data-radix-popper-content-wrapper]:has([role=menu]):has([data-state=open]):h
7587
7675
  -webkit-user-select:none;
7588
7676
  user-select:none;
7589
7677
  }
7590
- .bp_select_menu_grid_option_module_optionButton--bade8:not(.bp_select_menu_grid_option_module_labeled--bade8){
7591
- height:var(--size-8);
7678
+ .bp_select_menu_grid_option_module_optionButton--fb290:not(.bp_select_menu_grid_option_module_labeled--fb290){
7679
+ height:var(--select-menu-grid-option-not-labeled-height);
7592
7680
  justify-content:center;
7593
- padding:0;
7594
- width:var(--size-8);
7595
- }
7596
- .bp_select_menu_grid_option_module_optionButton--bade8.bp_select_menu_grid_option_module_labeled--bade8{
7597
- border-radius:var(--radius-3);
7598
- gap:var(--space-3);
7599
- min-width:10rem;
7600
- padding:var(--space-1);
7601
- transition:background-color var(--animation-duration-2);
7681
+ padding:var(--select-menu-grid-option-not-labeled-padding);
7682
+ width:var(--select-menu-grid-option-not-labeled-width);
7683
+ }
7684
+ .bp_select_menu_grid_option_module_optionButton--fb290.bp_select_menu_grid_option_module_labeled--fb290{
7685
+ border-radius:var(--select-menu-grid-option-labeled-border-radius);
7686
+ gap:var(--select-menu-grid-option-labeled-gap);
7687
+ min-width:var(--select-menu-grid-option-labeled-min-width);
7688
+ padding:var(--select-menu-grid-option-labeled-padding);
7689
+ transition:var(--select-menu-grid-option-labeled-transition);
7602
7690
  width:100%;
7603
7691
  }
7604
- .bp_select_menu_grid_option_module_optionButton--bade8.bp_select_menu_grid_option_module_labeled--bade8 .bp_select_menu_grid_option_module_text--bade8{
7605
- max-height:var(--size-8);
7692
+ .bp_select_menu_grid_option_module_optionButton--fb290.bp_select_menu_grid_option_module_labeled--fb290 .bp_select_menu_grid_option_module_text--fb290{
7693
+ color:var(--select-menu-grid-option-labeled-text-color);
7694
+ max-height:var(--select-menu-grid-option-labeled-text-max-height);
7606
7695
  text-align:left;
7607
7696
  }
7608
- .bp_select_menu_grid_option_module_optionButton--bade8.bp_select_menu_grid_option_module_labeled--bade8 .bp_select_menu_grid_option_module_text--large--bade8{
7697
+ .bp_select_menu_grid_option_module_optionButton--fb290.bp_select_menu_grid_option_module_labeled--fb290 .bp_select_menu_grid_option_module_text--large--fb290{
7609
7698
  -webkit-box-orient:vertical;
7610
7699
  -webkit-line-clamp:1;
7611
7700
  display:-webkit-box;
7612
7701
  overflow:hidden;
7613
7702
  }
7614
- .bp_select_menu_grid_option_module_optionButton--bade8.bp_select_menu_grid_option_module_labeled--bade8 .bp_select_menu_grid_option_module_text--default--bade8{
7703
+ .bp_select_menu_grid_option_module_optionButton--fb290.bp_select_menu_grid_option_module_labeled--fb290 .bp_select_menu_grid_option_module_text--default--fb290{
7615
7704
  -webkit-box-orient:vertical;
7616
7705
  -webkit-line-clamp:2;
7617
7706
  display:-webkit-box;
7618
7707
  overflow:hidden;
7619
7708
  }
7620
- .bp_select_menu_grid_option_module_optionButton--bade8.bp_select_menu_grid_option_module_labeled--bade8 .bp_select_menu_grid_option_module_iconContainer--bade8{
7709
+ .bp_select_menu_grid_option_module_optionButton--fb290.bp_select_menu_grid_option_module_labeled--fb290 .bp_select_menu_grid_option_module_iconContainer--fb290{
7621
7710
  align-items:center;
7622
7711
  background:var(--icon-background);
7623
- border-radius:var(--radius-3);
7712
+ border-radius:var(--select-menu-grid-option-labeled-icon-border-radius);
7624
7713
  display:flex;
7625
7714
  flex-shrink:0;
7626
7715
  justify-content:center;
7627
7716
  }
7628
- .bp_select_menu_grid_option_module_optionButton--bade8.bp_select_menu_grid_option_module_labeled--bade8 .bp_select_menu_grid_option_module_iconContainer--size-default--bade8{
7629
- height:var(--size-8);
7630
- width:var(--size-8);
7717
+ .bp_select_menu_grid_option_module_optionButton--fb290.bp_select_menu_grid_option_module_labeled--fb290 .bp_select_menu_grid_option_module_iconContainer--size-default--fb290{
7718
+ height:var(--select-menu-grid-option-labeled-icon-default-size);
7719
+ width:var(--select-menu-grid-option-labeled-icon-default-size);
7631
7720
  }
7632
- .bp_select_menu_grid_option_module_optionButton--bade8.bp_select_menu_grid_option_module_labeled--bade8 .bp_select_menu_grid_option_module_iconContainer--size-large--bade8{
7633
- height:var(--size-10);
7634
- width:var(--size-10);
7721
+ .bp_select_menu_grid_option_module_optionButton--fb290.bp_select_menu_grid_option_module_labeled--fb290 .bp_select_menu_grid_option_module_iconContainer--size-large--fb290{
7722
+ height:var(--select-menu-grid-option-labeled-icon-large-size);
7723
+ width:var(--select-menu-grid-option-labeled-icon-large-size);
7635
7724
  }
7636
- .bp_select_menu_grid_option_module_optionButton--bade8.bp_select_menu_grid_option_module_labeled--bade8 .bp_select_menu_grid_option_module_iconContainer--default--bade8{
7637
- --icon-background:var(--surface-surface-tertiary);
7638
- --icon-background-dark:var(--surface-surface-quaternary);
7725
+ .bp_select_menu_grid_option_module_optionButton--fb290.bp_select_menu_grid_option_module_labeled--fb290 .bp_select_menu_grid_option_module_iconContainer--default--fb290{
7726
+ --icon-background:var(--select-menu-grid-option-labeled-icon-default-background);
7727
+ --icon-background-dark:var(--select-menu-grid-option-labeled-icon-default-background-dark);
7639
7728
  }
7640
- .bp_select_menu_grid_option_module_optionButton--bade8.bp_select_menu_grid_option_module_labeled--bade8 .bp_select_menu_grid_option_module_iconContainer--box--bade8{
7641
- --icon-background:var(--brand-box-tertiary);
7642
- --icon-background-dark:var(--brand-box-secondary);
7729
+ .bp_select_menu_grid_option_module_optionButton--fb290.bp_select_menu_grid_option_module_labeled--fb290 .bp_select_menu_grid_option_module_iconContainer--box--fb290{
7730
+ --icon-background:var(--select-menu-grid-option-labeled-icon-box-background);
7731
+ --icon-background-dark:var(--select-menu-grid-option-labeled-icon-box-background-dark);
7643
7732
  }
7644
- .bp_select_menu_grid_option_module_optionButton--bade8.bp_select_menu_grid_option_module_labeled--bade8 .bp_select_menu_grid_option_module_iconContainer--docgen--bade8{
7645
- --icon-background:var(--brand-docgen-tertiary);
7646
- --icon-background-dark:var(--brand-docgen-secondary);
7733
+ .bp_select_menu_grid_option_module_optionButton--fb290.bp_select_menu_grid_option_module_labeled--fb290 .bp_select_menu_grid_option_module_iconContainer--docgen--fb290{
7734
+ --icon-background:var(--select-menu-grid-option-labeled-icon-docgen-background);
7735
+ --icon-background-dark:var(--select-menu-grid-option-labeled-icon-docgen-background-dark);
7647
7736
  }
7648
- .bp_select_menu_grid_option_module_optionButton--bade8.bp_select_menu_grid_option_module_labeled--bade8 .bp_select_menu_grid_option_module_iconContainer--forms--bade8{
7649
- --icon-background:var(--brand-forms-tertiary);
7650
- --icon-background-dark:var(--brand-forms-secondary);
7737
+ .bp_select_menu_grid_option_module_optionButton--fb290.bp_select_menu_grid_option_module_labeled--fb290 .bp_select_menu_grid_option_module_iconContainer--forms--fb290{
7738
+ --icon-background:var(--select-menu-grid-option-labeled-icon-forms-background);
7739
+ --icon-background-dark:var(--select-menu-grid-option-labeled-icon-forms-background-dark);
7651
7740
  }
7652
- .bp_select_menu_grid_option_module_optionButton--bade8.bp_select_menu_grid_option_module_labeled--bade8 .bp_select_menu_grid_option_module_iconContainer--sign--bade8{
7653
- --icon-background:var(--brand-sign-tertiary);
7654
- --icon-background-dark:var(--brand-sign-secondary);
7741
+ .bp_select_menu_grid_option_module_optionButton--fb290.bp_select_menu_grid_option_module_labeled--fb290 .bp_select_menu_grid_option_module_iconContainer--sign--fb290{
7742
+ --icon-background:var(--select-menu-grid-option-labeled-icon-sign-background);
7743
+ --icon-background-dark:var(--select-menu-grid-option-labeled-icon-sign-background-dark);
7655
7744
  }
7656
- .bp_select_menu_grid_option_module_optionButton--bade8.bp_select_menu_grid_option_module_labeled--bade8:hover{
7657
- background:var(--surface-surface-secondary);
7658
- box-shadow:var(--dropshadow-2);
7745
+ .bp_select_menu_grid_option_module_optionButton--fb290.bp_select_menu_grid_option_module_labeled--fb290:hover{
7746
+ background:var(--select-menu-grid-option-labeled-background-color-hover);
7747
+ box-shadow:var(--select-menu-grid-option-labeled-box-shadow);
7659
7748
  cursor:grab;
7660
7749
  }
7661
- .bp_select_menu_grid_option_module_optionButton--bade8.bp_select_menu_grid_option_module_labeled--bade8.bp_select_menu_grid_option_module_active--bade8,.bp_select_menu_grid_option_module_optionButton--bade8.bp_select_menu_grid_option_module_labeled--bade8.bp_select_menu_grid_option_module_dragging--bade8,.bp_select_menu_grid_option_module_optionButton--bade8.bp_select_menu_grid_option_module_labeled--bade8:active{
7662
- background:var(--surface-surface-secondary);
7663
- box-shadow:var(--dropshadow-2);
7750
+ .bp_select_menu_grid_option_module_optionButton--fb290.bp_select_menu_grid_option_module_labeled--fb290.bp_select_menu_grid_option_module_active--fb290,.bp_select_menu_grid_option_module_optionButton--fb290.bp_select_menu_grid_option_module_labeled--fb290.bp_select_menu_grid_option_module_dragging--fb290,.bp_select_menu_grid_option_module_optionButton--fb290.bp_select_menu_grid_option_module_labeled--fb290:active{
7751
+ background:var(--select-menu-grid-option-labeled-background-color-active);
7752
+ box-shadow:var(--select-menu-grid-option-labeled-box-shadow);
7664
7753
  }
7665
- .bp_select_menu_grid_option_module_optionButton--bade8.bp_select_menu_grid_option_module_labeled--bade8.bp_select_menu_grid_option_module_active--bade8 .bp_select_menu_grid_option_module_iconContainer--bade8,.bp_select_menu_grid_option_module_optionButton--bade8.bp_select_menu_grid_option_module_labeled--bade8:active .bp_select_menu_grid_option_module_iconContainer--bade8{
7754
+ .bp_select_menu_grid_option_module_optionButton--fb290.bp_select_menu_grid_option_module_labeled--fb290.bp_select_menu_grid_option_module_active--fb290 .bp_select_menu_grid_option_module_iconContainer--fb290,.bp_select_menu_grid_option_module_optionButton--fb290.bp_select_menu_grid_option_module_labeled--fb290:active .bp_select_menu_grid_option_module_iconContainer--fb290{
7666
7755
  background-color:var(--icon-background);
7667
7756
  }
7668
- .bp_select_menu_grid_option_module_optionButton--bade8.bp_select_menu_grid_option_module_labeled--bade8.bp_select_menu_grid_option_module_dragging--bade8{
7669
- box-shadow:0 0 0 var(--border-1) var(--border-divider-border), var(--dropshadow-2);
7757
+ .bp_select_menu_grid_option_module_optionButton--fb290.bp_select_menu_grid_option_module_labeled--fb290.bp_select_menu_grid_option_module_dragging--fb290{
7758
+ box-shadow:var(--select-menu-grid-option-labeled-box-shadow-dragging);
7670
7759
  }
7671
- .bp_select_menu_grid_option_module_optionButton--bade8.bp_select_menu_grid_option_module_labeled--bade8.bp_select_menu_grid_option_module_dragging--bade8 .bp_select_menu_grid_option_module_iconContainer--bade8{
7760
+ .bp_select_menu_grid_option_module_optionButton--fb290.bp_select_menu_grid_option_module_labeled--fb290.bp_select_menu_grid_option_module_dragging--fb290 .bp_select_menu_grid_option_module_iconContainer--fb290{
7672
7761
  background-color:var(--icon-background-dark);
7673
7762
  }
7674
- .bp_select_menu_grid_option_module_optionButton--bade8.bp_select_menu_grid_option_module_labeled--bade8.bp_select_menu_grid_option_module_dragging--bade8:hover{
7763
+ .bp_select_menu_grid_option_module_optionButton--fb290.bp_select_menu_grid_option_module_labeled--fb290.bp_select_menu_grid_option_module_dragging--fb290:hover{
7675
7764
  cursor:grabbing;
7676
7765
  }
7677
- .bp_select_menu_grid_option_module_optionButton--bade8.bp_select_menu_grid_option_module_labeled--bade8:hover:not(.bp_select_menu_grid_option_module_disabled--bade8) .bp_select_menu_grid_option_module_iconContainer--bade8{
7766
+ .bp_select_menu_grid_option_module_optionButton--fb290.bp_select_menu_grid_option_module_labeled--fb290:hover:not(.bp_select_menu_grid_option_module_disabled--fb290) .bp_select_menu_grid_option_module_iconContainer--fb290{
7678
7767
  background-color:var(--icon-background-dark);
7679
- transition:background-color var(--animation-duration-2);
7768
+ transition:var(--select-menu-grid-option-labeled-transition);
7680
7769
  }
7681
- .bp_select_menu_grid_option_module_optionButton--bade8.bp_select_menu_grid_option_module_labeled--bade8[data-focus-visible]{
7682
- box-shadow:0 0 0 var(--border-2) var(--outline-focus-on-light);
7770
+ .bp_select_menu_grid_option_module_optionButton--fb290.bp_select_menu_grid_option_module_labeled--fb290[data-focus-visible]{
7771
+ box-shadow:var(--select-menu-grid-option-labeled-box-shadow-focus);
7772
+ }
7773
+ .bp_select_menu_grid_option_module_optionButton--fb290.bp_select_menu_grid_option_module_labeled--fb290[data-focus-visible]:active{
7774
+ background:var(--select-menu-grid-option-labeled-background-color-active);
7775
+ }
7776
+ .bp_select_menu_grid_option_module_optionButton--fb290 .bp_select_menu_grid_option_module_square--fb290{
7777
+ height:var(--select-menu-grid-option-square-height);
7778
+ width:var(--select-menu-grid-option-square-width);
7779
+ }
7780
+ .bp_select_menu_grid_option_module_optionButton--fb290 .bp_select_menu_grid_option_module_square--fb290,.bp_select_menu_grid_option_module_optionButton--fb290 .bp_select_menu_grid_option_module_square--fb290 .bp_select_menu_grid_option_module_outlineHost--fb290{
7781
+ align-items:center;
7782
+ border-radius:var(--select-menu-grid-option-square-border-radius);
7783
+ display:flex;
7784
+ justify-content:center;
7785
+ }
7786
+ .bp_select_menu_grid_option_module_optionButton--fb290 .bp_select_menu_grid_option_module_square--fb290 .bp_select_menu_grid_option_module_outlineHost--fb290{
7787
+ height:var(--select-menu-grid-option-square-outline-host-height);
7788
+ width:var(--select-menu-grid-option-square-outline-host-width);
7789
+ }
7790
+ .bp_select_menu_grid_option_module_optionButton--fb290 .bp_select_menu_grid_option_module_circle--fb290{
7791
+ align-items:center;
7792
+ background-clip:content-box;
7793
+ background-color:var(--select-menu-grid-option-circle-background-color);
7794
+ border:var(--select-menu-grid-option-circle-border);
7795
+ border-radius:var(--select-menu-grid-option-circle-border-radius);
7796
+ box-sizing:border-box;
7797
+ display:flex;
7798
+ height:var(--select-menu-grid-option-circle-height);
7799
+ justify-content:center;
7800
+ width:var(--select-menu-grid-option-circle-width);
7801
+ }
7802
+ .bp_select_menu_grid_option_module_optionButton--fb290 .bp_select_menu_grid_option_module_circle--fb290.bp_select_menu_grid_option_module_loading--fb290{
7803
+ border-color:var(--select-menu-grid-option-circle-border-color-loading);
7804
+ }
7805
+ .bp_select_menu_grid_option_module_optionButton--fb290 .bp_select_menu_grid_option_module_circle--fb290 .bp_select_menu_grid_option_module_color--fb290{
7806
+ background-color:var(--circleColor);
7807
+ border:var(--select-menu-grid-option-circle-inner-border-width) solid var(--circleBorderColor);
7808
+ border-radius:var(--select-menu-grid-option-circle-inner-border-radius);
7809
+ box-sizing:border-box;
7810
+ height:var(--select-menu-grid-option-circle-inner-height);
7811
+ width:var(--select-menu-grid-option-circle-inner-width);
7683
7812
  }
7684
- .bp_select_menu_grid_option_module_optionButton--bade8.bp_select_menu_grid_option_module_labeled--bade8[data-focus-visible]:active{
7685
- background:var(--surface-surface-secondary);
7813
+ .bp_select_menu_grid_option_module_optionButton--fb290 .bp_select_menu_grid_option_module_circle--fb290 .bp_select_menu_grid_option_module_strikeThrough--fb290{
7814
+ position:relative;
7686
7815
  }
7687
- .bp_select_menu_grid_option_module_optionButton--bade8:hover .bp_select_menu_grid_option_module_square--bade8,.bp_select_menu_grid_option_module_optionButton--bade8[data-focus-visible] .bp_select_menu_grid_option_module_square--bade8{
7688
- background-color:var(--surface-cta-surface-outline-hover);
7816
+ .bp_select_menu_grid_option_module_optionButton--fb290 .bp_select_menu_grid_option_module_circle--fb290 .bp_select_menu_grid_option_module_strikeThrough--fb290::after{
7817
+ background-color:var(--select-menu-grid-option-circle-strikethrough-background-color);
7818
+ border-radius:var(--select-menu-grid-option-circle-strikethrough-border-radius);
7819
+ content:"";
7820
+ height:.15625rem;
7821
+ left:.0625rem;
7822
+ position:absolute;
7823
+ top:45%;
7824
+ transform:rotate(-45deg);
7825
+ width:90%;
7689
7826
  }
7690
- .bp_select_menu_grid_option_module_optionButton--bade8:hover .bp_select_menu_grid_option_module_circle--bade8,.bp_select_menu_grid_option_module_optionButton--bade8[data-focus-visible] .bp_select_menu_grid_option_module_circle--bade8{
7691
- background-color:var(--surface-option-grid-surface-hover);
7827
+ .bp_select_menu_grid_option_module_optionButton--fb290:hover .bp_select_menu_grid_option_module_square--fb290,.bp_select_menu_grid_option_module_optionButton--fb290[data-focus-visible] .bp_select_menu_grid_option_module_square--fb290{
7828
+ background-color:var(--select-menu-grid-option-square-background-color-hover);
7692
7829
  }
7693
- .bp_select_menu_grid_option_module_optionButton--bade8.bp_select_menu_grid_option_module_active--bade8 .bp_select_menu_grid_option_module_square--bade8,.bp_select_menu_grid_option_module_optionButton--bade8:active .bp_select_menu_grid_option_module_square--bade8{
7694
- background-color:var(--surface-cta-surface-outline-pressed);
7830
+ .bp_select_menu_grid_option_module_optionButton--fb290:hover .bp_select_menu_grid_option_module_circle--fb290,.bp_select_menu_grid_option_module_optionButton--fb290[data-focus-visible] .bp_select_menu_grid_option_module_circle--fb290{
7831
+ background-color:var(--select-menu-grid-option-circle-background-color-hover);
7695
7832
  }
7696
- .bp_select_menu_grid_option_module_optionButton--bade8.bp_select_menu_grid_option_module_active--bade8 .bp_select_menu_grid_option_module_circle--bade8,.bp_select_menu_grid_option_module_optionButton--bade8:active .bp_select_menu_grid_option_module_circle--bade8{
7697
- border:var(--border-2) solid var(--circleColor);
7833
+ .bp_select_menu_grid_option_module_optionButton--fb290.bp_select_menu_grid_option_module_active--fb290 .bp_select_menu_grid_option_module_square--fb290,.bp_select_menu_grid_option_module_optionButton--fb290:active .bp_select_menu_grid_option_module_square--fb290{
7834
+ background-color:var(--select-menu-grid-option-square-background-color-active);
7698
7835
  }
7699
- .bp_select_menu_grid_option_module_optionButton--bade8.bp_select_menu_grid_option_module_loading--bade8,.bp_select_menu_grid_option_module_optionButton--bade8:disabled{
7836
+ .bp_select_menu_grid_option_module_optionButton--fb290.bp_select_menu_grid_option_module_active--fb290 .bp_select_menu_grid_option_module_circle--fb290,.bp_select_menu_grid_option_module_optionButton--fb290:active .bp_select_menu_grid_option_module_circle--fb290{
7837
+ border:var(--select-menu-grid-option-circle-inner-border-width-active) solid var(--circleColor);
7838
+ }
7839
+ .bp_select_menu_grid_option_module_optionButton--fb290.bp_select_menu_grid_option_module_loading--fb290,.bp_select_menu_grid_option_module_optionButton--fb290:disabled{
7700
7840
  cursor:default;
7701
7841
  }
7702
- .bp_select_menu_grid_option_module_optionButton--bade8[data-focus-visible] .bp_select_menu_grid_option_module_outlineHost--bade8{
7703
- box-shadow:0 0 0 var(--border-2) var(--outline-focus-on-light);
7842
+ .bp_select_menu_grid_option_module_optionButton--fb290[data-focus-visible] .bp_select_menu_grid_option_module_outlineHost--fb290{
7843
+ box-shadow:var(--select-menu-grid-option-circle-outline-host-box-shadow-focus);
7704
7844
  }
7705
- .bp_select_menu_grid_option_module_optionButton--bade8[data-focus-visible] .bp_select_menu_grid_option_module_circle--bade8{
7706
- border-color:var(--surface-option-grid-surface-hover);
7845
+ .bp_select_menu_grid_option_module_optionButton--fb290[data-focus-visible] .bp_select_menu_grid_option_module_circle--fb290{
7846
+ border-color:var(--select-menu-grid-option-circle-border-color-hover);
7707
7847
  }
7708
- .bp_select_menu_grid_option_module_optionButton--bade8[data-focus-visible].bp_select_menu_grid_option_module_active--bade8 .bp_select_menu_grid_option_module_circle--bade8,.bp_select_menu_grid_option_module_optionButton--bade8[data-focus-visible]:active .bp_select_menu_grid_option_module_circle--bade8{
7709
- border:var(--border-2) solid var(--circleColor);
7710
- box-shadow:0 0 0 var(--border-1) var(--gray-white), 0 0 0 var(--border-3) var(--outline-focus-on-light);
7848
+ .bp_select_menu_grid_option_module_optionButton--fb290[data-focus-visible].bp_select_menu_grid_option_module_active--fb290 .bp_select_menu_grid_option_module_circle--fb290,.bp_select_menu_grid_option_module_optionButton--fb290[data-focus-visible]:active .bp_select_menu_grid_option_module_circle--fb290{
7849
+ border:var(--select-menu-grid-option-circle-border-width-focus-active) solid var(--circleColor);
7850
+ box-shadow:var(--select-menu-grid-option-circle-box-shadow-focus-active);
7711
7851
  }
7712
- .bp_select_menu_grid_option_module_optionButton--bade8:disabled:not(.bp_select_menu_grid_option_module_loading--bade8){
7852
+ .bp_select_menu_grid_option_module_optionButton--fb290:disabled:not(.bp_select_menu_grid_option_module_loading--fb290){
7713
7853
  opacity:.3;
7714
7854
  }
7715
7855
 
package/dist/lib-esm/modal/modal-close.js CHANGED
@@ -1,8 +1,10 @@
1
1
  import { jsx } from 'react/jsx-runtime';
2
- import { XMark } from '@box/blueprint-web-assets/icons/Fill';
2
+ import { XMark as XMark$1 } from '@box/blueprint-web-assets/icons/Fill';
3
+ import { XMark } from '@box/blueprint-web-assets/icons/Medium';
3
4
  import * as RadixDialog from '@radix-ui/react-dialog';
4
5
  import clsx from 'clsx';
5
6
  import { forwardRef } from 'react';
7
+ import { useBlueprintModernization } from '../blueprint-modernization-context/useBlueprintModernization.js';
6
8
  import { IconButton } from '../primitives/icon-button/icon-button.js';
7
9
  import { useMedia } from '../utils/useMedia.js';
8
10
  import styles from './modal.module.js';
@@ -16,11 +18,15 @@ const smallViewportProps = {
16
18
  const ModalClose = /*#__PURE__*/forwardRef(({
17
19
  'aria-label': ariaLabel,
18
20
  className,
19
- icon = XMark,
21
+ icon,
20
22
  size = 'large',
21
23
  variant = 'default',
22
24
  ...rest
23
25
  }, forwardedRef) => {
26
+ const {
27
+ enableModernizedComponents
28
+ } = useBlueprintModernization();
29
+ const defaultIcon = enableModernizedComponents ? XMark : XMark$1;
24
30
  // Change IconButton size for Mobile (only when IconButton size is large)
25
31
  // TODO: change to media query tokens
26
32
  const breakpoint = 459;
@@ -36,7 +42,7 @@ const ModalClose = /*#__PURE__*/forwardRef(({
36
42
  className: clsx(styles.close, {
37
43
  [styles.onColor]: variant === 'onColor' && !isMobile
38
44
  }, className),
39
- icon: icon,
45
+ icon: icon || defaultIcon,
40
46
  size: size,
41
47
  ...finalProps
42
48
  })
package/dist/lib-esm/modal/modal-content.d.ts CHANGED
@@ -3,7 +3,7 @@ import * as RadixDialog from '@radix-ui/react-dialog';
3
3
  * Contains content to be rendered in the open modal.
4
4
  */
5
5
  export declare const ModalContent: import("react").ForwardRefExoticComponent<RadixDialog.DialogContentProps & Pick<RadixDialog.DialogPortalProps, "container"> & {
6
- size: "small" | "medium" | "large" | "xlarge";
6
+ size: import("./types").ModalContentSize;
7
7
  } & {
8
8
  'data-testid'?: string;
9
9
  } & import("react").RefAttributes<HTMLDivElement>>;
package/dist/lib-esm/modal/modal.d.ts CHANGED
@@ -26,7 +26,7 @@ export declare const Modal: (({ children, modal, ...props }: ModalProps) => impo
26
26
  Body: import("react").ForwardRefExoticComponent<import("./types").ModalBodyProps & import("react").RefAttributes<HTMLDivElement>>;
27
27
  Close: import("react").ForwardRefExoticComponent<import("./types").ModalCloseProps & import("react").RefAttributes<HTMLButtonElement>>;
28
28
  Content: import("react").ForwardRefExoticComponent<import("@radix-ui/react-dialog").DialogContentProps & Pick<import("@radix-ui/react-dialog").DialogPortalProps, "container"> & {
29
- size: "small" | "medium" | "large" | "xlarge";
29
+ size: import("./types").ModalContentSize;
30
30
  } & {
31
31
  'data-testid'?: string;
32
32
  } & import("react").RefAttributes<HTMLDivElement>>;
package/dist/lib-esm/modal/modal.module.js CHANGED
@@ -1,4 +1,4 @@
1
1
  import '../index.css';
2
- var styles = {"overlay":"bp_modal_module_overlay--75897","content":"bp_modal_module_content--75897","popup_bounce_in":"bp_modal_module_popup_bounce_in--75897","smallSizeModal":"bp_modal_module_smallSizeModal--75897","mediumSizeModal":"bp_modal_module_mediumSizeModal--75897","largeSizeModal":"bp_modal_module_largeSizeModal--75897","xlargeSizeModal":"bp_modal_module_xlargeSizeModal--75897","scrollableContainer":"bp_modal_module_scrollableContainer--75897","close":"bp_modal_module_close--75897","onColor":"bp_modal_module_onColor--75897","backButton":"bp_modal_module_backButton--75897","modalHeader":"bp_modal_module_modalHeader--75897","modalTitle":"bp_modal_module_modalTitle--75897","body":"bp_modal_module_body--75897","headerDividerLine":"bp_modal_module_headerDividerLine--75897","footerDividerLine":"bp_modal_module_footerDividerLine--75897","footer":"bp_modal_module_footer--75897","footerButton":"bp_modal_module_footerButton--75897"};
2
+ var styles = {"overlay":"bp_modal_module_overlay--bc07b","content":"bp_modal_module_content--bc07b","popup_bounce_in":"bp_modal_module_popup_bounce_in--bc07b","smallSizeModal":"bp_modal_module_smallSizeModal--bc07b","mediumSizeModal":"bp_modal_module_mediumSizeModal--bc07b","largeSizeModal":"bp_modal_module_largeSizeModal--bc07b","xlargeSizeModal":"bp_modal_module_xlargeSizeModal--bc07b","scrollableContainer":"bp_modal_module_scrollableContainer--bc07b","close":"bp_modal_module_close--bc07b","onColor":"bp_modal_module_onColor--bc07b","backButton":"bp_modal_module_backButton--bc07b","modalHeader":"bp_modal_module_modalHeader--bc07b","modalTitle":"bp_modal_module_modalTitle--bc07b","body":"bp_modal_module_body--bc07b","headerDividerLine":"bp_modal_module_headerDividerLine--bc07b","footerDividerLine":"bp_modal_module_footerDividerLine--bc07b","footer":"bp_modal_module_footer--bc07b","footerButton":"bp_modal_module_footerButton--bc07b"};
3
3
 
4
4
  export { styles as default };
package/dist/lib-esm/modal/types.d.ts CHANGED
@@ -2,13 +2,14 @@ import { type DialogContentProps, type DialogPortalProps, type DialogProps, type
2
2
  import { type FunctionComponent, type HTMLAttributes, type PropsWithChildren, type ReactElement, type ReactNode, type SVGProps } from 'react';
3
3
  import { type IconButtonProps } from '../primitives/icon-button';
4
4
  export type ModalProps = DialogProps;
5
+ /** The size of the modal content.
6
+ * small: max-width: 460px
7
+ * medium: max-width: 540px
8
+ * large: max-width: 620px
9
+ * xlarge: max-width: 768px */
10
+ export type ModalContentSize = 'small' | 'medium' | 'large' | 'xlarge';
5
11
  export type ModalContentProps = DialogContentProps & Pick<DialogPortalProps, 'container'> & {
6
- /** The size of the modal content.
7
- * small: max-width: 460px
8
- * medium: max-width: 540px
9
- * large: max-width: 620px
10
- * xlarge: max-width: 768px */
11
- size: 'small' | 'medium' | 'large' | 'xlarge';
12
+ size: ModalContentSize;
12
13
  };
13
14
  export interface ModalCloseProps {
14
15
  /** The aria-label for the Close element */
package/dist/lib-esm/primitives/popover/popover.module.js CHANGED
@@ -1,4 +1,4 @@
1
1
  import '../../index.css';
2
- var styles = {"popoverContentContainer":"bp_popover_module_popoverContentContainer--195db","accessibilitySmallBreakpoint":"bp_popover_module_accessibilitySmallBreakpoint--195db","popoverCard":"bp_popover_module_popoverCard--195db","popoverScrollContainer":"bp_popover_module_popoverScrollContainer--195db","popoverMainContent":"bp_popover_module_popoverMainContent--195db","popoverMainContentOuterContainer":"bp_popover_module_popoverMainContentOuterContainer--195db","popoverMainContentInnerContainerPadding":"bp_popover_module_popoverMainContentInnerContainerPadding--195db","popoverFooter":"bp_popover_module_popoverFooter--195db","popoverFooterTopBorder":"bp_popover_module_popoverFooterTopBorder--195db"};
2
+ var styles = {"popoverContentContainer":"bp_popover_module_popoverContentContainer--12858","accessibilitySmallBreakpoint":"bp_popover_module_accessibilitySmallBreakpoint--12858","popoverCard":"bp_popover_module_popoverCard--12858","popoverScrollContainer":"bp_popover_module_popoverScrollContainer--12858","popoverMainContent":"bp_popover_module_popoverMainContent--12858","popoverMainContentOuterContainer":"bp_popover_module_popoverMainContentOuterContainer--12858","popoverMainContentInnerContainerPadding":"bp_popover_module_popoverMainContentInnerContainerPadding--12858","popoverFooter":"bp_popover_module_popoverFooter--12858","popoverFooterTopBorder":"bp_popover_module_popoverFooterTopBorder--12858"};
3
3
 
4
4
  export { styles as default };
package/dist/lib-esm/primitives/select-menu-grid/select-menu-grid-option.js CHANGED
@@ -1,10 +1,11 @@
1
1
  import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
2
2
  import { CompositeItem, Button } from '@ariakit/react';
3
- import { Gray05, Gray100, BoxBlue100, DarkBlue100, GreenLight100, Grimace100, Size4, Size6 } from '@box/blueprint-web-assets/tokens/tokens';
3
+ import { Gray05, Gray100, BoxBlue100, DarkBlue100, GreenLight100, Grimace100, bpIconIconOnLight, BrandBoxPrimary, BrandSignPrimary, BrandFormsPrimary, BrandDocgenPrimary, Size4, Size6, bpSize040, bpSize060 } from '@box/blueprint-web-assets/tokens/tokens';
4
4
  import clsx from 'clsx';
5
5
  import Color from 'color';
6
6
  import omit from 'lodash/omit';
7
7
  import { forwardRef, createElement } from 'react';
8
+ import { useBlueprintModernization } from '../../blueprint-modernization-context/useBlueprintModernization.js';
8
9
  import { Ghost } from '../../ghost/ghost.js';
9
10
  import { Text } from '../../text/text.js';
10
11
  import { Tooltip } from '../../tooltip/tooltip.js';
@@ -37,6 +38,9 @@ const SelectMenuGridOption = /*#__PURE__*/forwardRef((props, forwardedRef) => {
37
38
  disabled,
38
39
  ...restProps
39
40
  } = props;
41
+ const {
42
+ enableModernizedComponents
43
+ } = useBlueprintModernization();
40
44
  const isWithLabel = variant === 'labeled';
41
45
  const isButtonDisabled = disabled || loading;
42
46
  const isButtonActive = !disabled && !loading && active;
@@ -56,6 +60,7 @@ const SelectMenuGridOption = /*#__PURE__*/forwardRef((props, forwardedRef) => {
56
60
  [styles.active]: isButtonActive,
57
61
  [styles.dragging]: isButtonDragged
58
62
  }),
63
+ "data-modern": enableModernizedComponents,
59
64
  disabled: isButtonDisabled,
60
65
  children: [variant === 'colorCircle' && jsx(ColorSwatch, {
61
66
  color: color || '',
@@ -73,6 +78,7 @@ const SelectMenuGridOption = /*#__PURE__*/forwardRef((props, forwardedRef) => {
73
78
  [styles.withLabel]: isWithLabel,
74
79
  [styles['withLabel--default']]: isWithLabel && props.size === 'default'
75
80
  }),
81
+ "data-modern": enableModernizedComponents,
76
82
  role: "gridcell",
77
83
  children: [shouldShowTooltip && jsx(Tooltip, {
78
84
  __checkInteractivity: false,
@@ -129,20 +135,34 @@ const iconColor = {
129
135
  forms: GreenLight100,
130
136
  docgen: Grimace100
131
137
  };
138
+ const iconColorModern = {
139
+ default: bpIconIconOnLight,
140
+ box: BrandBoxPrimary,
141
+ sign: BrandSignPrimary,
142
+ forms: BrandFormsPrimary,
143
+ docgen: BrandDocgenPrimary
144
+ };
132
145
  const iconSize = {
133
146
  default: Size4,
134
147
  large: Size6
135
148
  };
149
+ const iconSizeModern = {
150
+ default: bpSize040,
151
+ large: bpSize060
152
+ };
136
153
  const ItemWithLabel = ({
137
154
  size,
138
155
  colorVariant,
139
156
  label,
140
157
  icon
141
158
  }) => {
159
+ const {
160
+ enableModernizedComponents
161
+ } = useBlueprintModernization();
142
162
  const iconElement = /*#__PURE__*/createElement(icon, {
143
- color: iconColor[colorVariant],
144
- width: iconSize[size],
145
- height: iconSize[size],
163
+ color: enableModernizedComponents ? iconColorModern[colorVariant] : iconColor[colorVariant],
164
+ width: enableModernizedComponents ? iconSizeModern[size] : iconSize[size],
165
+ height: enableModernizedComponents ? iconSizeModern[size] : iconSize[size],
146
166
  role: 'presentation'
147
167
  });
148
168
  return jsxs(Fragment, {
package/dist/lib-esm/primitives/select-menu-grid/select-menu-grid-option.module.js CHANGED
@@ -1,4 +1,4 @@
1
1
  import '../../index.css';
2
- var styles = {"buttonWrapper":"bp_select_menu_grid_option_module_buttonWrapper--bade8","withLabel":"bp_select_menu_grid_option_module_withLabel--bade8","withLabel--default":"bp_select_menu_grid_option_module_withLabel--default--bade8","square":"bp_select_menu_grid_option_module_square--bade8","outlineHost":"bp_select_menu_grid_option_module_outlineHost--bade8","circle":"bp_select_menu_grid_option_module_circle--bade8","loading":"bp_select_menu_grid_option_module_loading--bade8","color":"bp_select_menu_grid_option_module_color--bade8","strikeThrough":"bp_select_menu_grid_option_module_strikeThrough--bade8","optionButton":"bp_select_menu_grid_option_module_optionButton--bade8","labeled":"bp_select_menu_grid_option_module_labeled--bade8","text":"bp_select_menu_grid_option_module_text--bade8","text--large":"bp_select_menu_grid_option_module_text--large--bade8","text--default":"bp_select_menu_grid_option_module_text--default--bade8","iconContainer":"bp_select_menu_grid_option_module_iconContainer--bade8","iconContainer--size-default":"bp_select_menu_grid_option_module_iconContainer--size-default--bade8","iconContainer--size-large":"bp_select_menu_grid_option_module_iconContainer--size-large--bade8","iconContainer--default":"bp_select_menu_grid_option_module_iconContainer--default--bade8","iconContainer--box":"bp_select_menu_grid_option_module_iconContainer--box--bade8","iconContainer--docgen":"bp_select_menu_grid_option_module_iconContainer--docgen--bade8","iconContainer--forms":"bp_select_menu_grid_option_module_iconContainer--forms--bade8","iconContainer--sign":"bp_select_menu_grid_option_module_iconContainer--sign--bade8","active":"bp_select_menu_grid_option_module_active--bade8","dragging":"bp_select_menu_grid_option_module_dragging--bade8","disabled":"bp_select_menu_grid_option_module_disabled--bade8"};
2
+ var styles = {"buttonWrapper":"bp_select_menu_grid_option_module_buttonWrapper--fb290","withLabel":"bp_select_menu_grid_option_module_withLabel--fb290","withLabel--default":"bp_select_menu_grid_option_module_withLabel--default--fb290","optionButton":"bp_select_menu_grid_option_module_optionButton--fb290","labeled":"bp_select_menu_grid_option_module_labeled--fb290","text":"bp_select_menu_grid_option_module_text--fb290","text--large":"bp_select_menu_grid_option_module_text--large--fb290","text--default":"bp_select_menu_grid_option_module_text--default--fb290","iconContainer":"bp_select_menu_grid_option_module_iconContainer--fb290","iconContainer--size-default":"bp_select_menu_grid_option_module_iconContainer--size-default--fb290","iconContainer--size-large":"bp_select_menu_grid_option_module_iconContainer--size-large--fb290","iconContainer--default":"bp_select_menu_grid_option_module_iconContainer--default--fb290","iconContainer--box":"bp_select_menu_grid_option_module_iconContainer--box--fb290","iconContainer--docgen":"bp_select_menu_grid_option_module_iconContainer--docgen--fb290","iconContainer--forms":"bp_select_menu_grid_option_module_iconContainer--forms--fb290","iconContainer--sign":"bp_select_menu_grid_option_module_iconContainer--sign--fb290","active":"bp_select_menu_grid_option_module_active--fb290","dragging":"bp_select_menu_grid_option_module_dragging--fb290","disabled":"bp_select_menu_grid_option_module_disabled--fb290","square":"bp_select_menu_grid_option_module_square--fb290","outlineHost":"bp_select_menu_grid_option_module_outlineHost--fb290","circle":"bp_select_menu_grid_option_module_circle--fb290","loading":"bp_select_menu_grid_option_module_loading--fb290","color":"bp_select_menu_grid_option_module_color--fb290","strikeThrough":"bp_select_menu_grid_option_module_strikeThrough--fb290"};
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.69.2",
3
+ "version": "12.71.0",
4
4
  "type": "module",
5
5
  "license": "SEE LICENSE IN LICENSE",
6
6
  "publishConfig": {