@box/blueprint-web 12.48.0 → 12.49.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.
@@ -2,6 +2,8 @@ import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
2
2
  import { SelectItemCheck, SelectItem, ComboboxItem, useComboboxStore, useSelectStore, PopoverAnchor, Combobox as Combobox$1, ComboboxCancel, SelectList, ComboboxPopover } from '@ariakit/react';
3
3
  import { SelectRenderer } from '@ariakit/react-core/select/select-renderer';
4
4
  import { Checkmark, XMark } from '@box/blueprint-web-assets/icons/Fill';
5
+ import { CheckmarkCircle } from '@box/blueprint-web-assets/icons/Medium';
6
+ import { bpSize050 } from '@box/blueprint-web-assets/tokens/tokens';
5
7
  import clsx from 'clsx';
6
8
  import React__default, { forwardRef, useMemo, useRef, useCallback, useEffect } from 'react';
7
9
  import { useBlueprintModernization } from '../blueprint-modernization-context/useBlueprintModernization.js';
@@ -449,6 +451,9 @@ const RootInner = ({
449
451
  };
450
452
  const Root = /*#__PURE__*/forwardRef(RootInner);
451
453
  const Indicator = /*#__PURE__*/forwardRef((_, ref) => {
454
+ const {
455
+ enableModernizedComponents
456
+ } = useBlueprintModernization();
452
457
  return jsx(SelectItemCheck, {
453
458
  ref: ref,
454
459
  className: styles.indicator,
@@ -457,7 +462,11 @@ const Indicator = /*#__PURE__*/forwardRef((_, ref) => {
457
462
  width: 'none',
458
463
  height: 'none'
459
464
  },
460
- children: jsx(Checkmark, {
465
+ children: enableModernizedComponents ? jsx(CheckmarkCircle, {
466
+ className: styles.indicatorIcon,
467
+ height: bpSize050,
468
+ width: bpSize050
469
+ }) : jsx(Checkmark, {
461
470
  className: styles.indicatorIcon
462
471
  })
463
472
  });
@@ -1,4 +1,4 @@
1
1
  import '../index.css';
2
- var styles = {"container":"bp_combobox_module_container--1857e","popover":"bp_combobox_module_popover--1857e","disabled":"bp_combobox_module_disabled--1857e","label":"bp_combobox_module_label--1857e","hiddenLabel":"bp_combobox_module_hiddenLabel--1857e","comboboxContainer":"bp_combobox_module_comboboxContainer--1857e","withComboboxButtons":"bp_combobox_module_withComboboxButtons--1857e","error":"bp_combobox_module_error--1857e","textInputWrapper":"bp_combobox_module_textInputWrapper--1857e","textInput":"bp_combobox_module_textInput--1857e","errorIcon":"bp_combobox_module_errorIcon--1857e","comboboxButtons":"bp_combobox_module_comboboxButtons--1857e","withChips":"bp_combobox_module_withChips--1857e","inlineError":"bp_combobox_module_inlineError--1857e","option":"bp_combobox_module_option--1857e","indicator":"bp_combobox_module_indicator--1857e","indicatorIcon":"bp_combobox_module_indicatorIcon--1857e","optionWithIndicator":"bp_combobox_module_optionWithIndicator--1857e","loadingIndicator":"bp_combobox_module_loadingIndicator--1857e","noResultOption":"bp_combobox_module_noResultOption--1857e"};
2
+ var styles = {"container":"bp_combobox_module_container--2cc49","popover":"bp_combobox_module_popover--2cc49","disabled":"bp_combobox_module_disabled--2cc49","label":"bp_combobox_module_label--2cc49","hiddenLabel":"bp_combobox_module_hiddenLabel--2cc49","comboboxContainer":"bp_combobox_module_comboboxContainer--2cc49","withComboboxButtons":"bp_combobox_module_withComboboxButtons--2cc49","error":"bp_combobox_module_error--2cc49","textInputWrapper":"bp_combobox_module_textInputWrapper--2cc49","textInput":"bp_combobox_module_textInput--2cc49","errorIcon":"bp_combobox_module_errorIcon--2cc49","comboboxButtons":"bp_combobox_module_comboboxButtons--2cc49","withChips":"bp_combobox_module_withChips--2cc49","inlineError":"bp_combobox_module_inlineError--2cc49","option":"bp_combobox_module_option--2cc49","indicator":"bp_combobox_module_indicator--2cc49","indicatorIcon":"bp_combobox_module_indicatorIcon--2cc49","optionWithIndicator":"bp_combobox_module_optionWithIndicator--2cc49","loadingIndicator":"bp_combobox_module_loadingIndicator--2cc49","noResultOption":"bp_combobox_module_noResultOption--2cc49"};
3
3
 
4
4
  export { styles as default };
@@ -1,6 +1,7 @@
1
1
  import { jsx, jsxs } from 'react/jsx-runtime';
2
2
  import clsx from 'clsx';
3
3
  import { forwardRef } from 'react';
4
+ import { useBlueprintModernization } from '../blueprint-modernization-context/useBlueprintModernization.js';
4
5
  import { InlineError } from '../primitives/inline-error/inline-error.js';
5
6
  import { useLabelable } from '../util-components/labelable/useLabelable.js';
6
7
  import { ComboboxGroupCombobox } from './combobox-group-combobox.js';
@@ -21,6 +22,9 @@ const Root = /*#__PURE__*/forwardRef(({
21
22
  isDisabled,
22
23
  subcomponentId
23
24
  } = useComboboxGroupContext();
25
+ const {
26
+ enableModernizedComponents
27
+ } = useBlueprintModernization();
24
28
  const selectHasError = !!errors.select;
25
29
  const comboboxHasError = !!errors.combobox;
26
30
  const Label = useLabelable(label, subcomponentId);
@@ -30,6 +34,7 @@ const Root = /*#__PURE__*/forwardRef(({
30
34
  className: clsx(styles.container, {
31
35
  [styles.disabled]: isDisabled
32
36
  }),
37
+ "data-modern": enableModernizedComponents,
33
38
  children: [jsx(Label, {
34
39
  className: styles.label,
35
40
  hideLabel: hideLabel
@@ -1,4 +1,4 @@
1
1
  import '../index.css';
2
- var styles = {"container":"bp_combobox_group_module_container--4fa0a","comboboxGroupcontainer":"bp_combobox_group_module_comboboxGroupcontainer--4fa0a","disabled":"bp_combobox_group_module_disabled--4fa0a","label":"bp_combobox_group_module_label--4fa0a","trailing":"bp_combobox_group_module_trailing--4fa0a","leading":"bp_combobox_group_module_leading--4fa0a","errorCombobox":"bp_combobox_group_module_errorCombobox--4fa0a","errorSelect":"bp_combobox_group_module_errorSelect--4fa0a","selectHasFocus":"bp_combobox_group_module_selectHasFocus--4fa0a","comboboxHasFocus":"bp_combobox_group_module_comboboxHasFocus--4fa0a"};
2
+ var styles = {"container":"bp_combobox_group_module_container--71411","trailing":"bp_combobox_group_module_trailing--71411","leading":"bp_combobox_group_module_leading--71411","comboboxGroupcontainer":"bp_combobox_group_module_comboboxGroupcontainer--71411","disabled":"bp_combobox_group_module_disabled--71411","label":"bp_combobox_group_module_label--71411","errorCombobox":"bp_combobox_group_module_errorCombobox--71411","errorSelect":"bp_combobox_group_module_errorSelect--71411","selectHasFocus":"bp_combobox_group_module_selectHasFocus--71411","comboboxHasFocus":"bp_combobox_group_module_comboboxHasFocus--71411"};
3
3
 
4
4
  export { styles as default };
@@ -2213,7 +2213,7 @@
2213
2213
  margin-block-start:var(--text-area-container-row-gap);
2214
2214
  }
2215
2215
 
2216
- .bp_combobox_module_container--1857e[data-modern=false]{
2216
+ .bp_combobox_module_container--2cc49[data-modern=false]{
2217
2217
  --max-lines:3;
2218
2218
  --input-height:var(--space-5);
2219
2219
  --chip-height:var(--space-7);
@@ -2268,7 +2268,7 @@
2268
2268
  --combobox-button-spacing:var(--space-2);
2269
2269
  }
2270
2270
 
2271
- .bp_combobox_module_container--1857e[data-modern=true]{
2271
+ .bp_combobox_module_container--2cc49[data-modern=true]{
2272
2272
  --max-lines:3;
2273
2273
  --bp-innershadow-01:var(--innershadow-1);
2274
2274
  --bp-input-height:var(--bp-space-050);
@@ -2329,7 +2329,7 @@
2329
2329
  --combobox-button-spacing:var(--bp-space-020);
2330
2330
  }
2331
2331
 
2332
- .bp_combobox_module_popover--1857e[data-modern=false]{
2332
+ .bp_combobox_module_popover--2cc49[data-modern=false]{
2333
2333
  --option-height:2.25rem;
2334
2334
  --dropdown-max-height:12.5rem;
2335
2335
  --combobox-popover-max-height:min(
@@ -2359,9 +2359,10 @@
2359
2359
  --combobox-option-with-indicator-padding-inline:var(--space-10) var(--space-2);
2360
2360
  --combobox-loading-indicator-position:unset;
2361
2361
  --combobox-no-result-option-color:var(--text-text-on-light);
2362
+ --combobox-popover-backdrop-filter:;
2362
2363
  }
2363
2364
 
2364
- .bp_combobox_module_popover--1857e[data-modern=true]{
2365
+ .bp_combobox_module_popover--2cc49[data-modern=true]{
2365
2366
  --option-height:2.25rem;
2366
2367
  --dropdown-max-height:12.5rem;
2367
2368
  --bp-dropshadow-03:var(--dropshadow-3);
@@ -2369,7 +2370,7 @@
2369
2370
  var(--popover-available-height, var(--option-height)),
2370
2371
  var(--dropdown-max-height)
2371
2372
  );
2372
- --combobox-popover-background-color:var(--bp-surface-menu-surface);
2373
+ --combobox-popover-background-color:var(--bp-surface-menu-surface-dropdown);
2373
2374
  --combobox-popover-border:var(--bp-border-01) solid var(--bp-border-menu-border);
2374
2375
  --combobox-popover-border-radius:var(--bp-radius-10);
2375
2376
  --combobox-popover-padding-block:var(--bp-space-030);
@@ -2392,9 +2393,10 @@
2392
2393
  --combobox-option-with-indicator-padding-inline:var(--bp-space-100) var(--bp-space-020);
2393
2394
  --combobox-loading-indicator-position:unset;
2394
2395
  --combobox-no-result-option-color:var(--bp-text-text-on-light);
2396
+ --combobox-popover-backdrop-filter:blur(16px);
2395
2397
  }
2396
2398
 
2397
- .bp_combobox_module_container--1857e{
2399
+ .bp_combobox_module_container--2cc49{
2398
2400
  display:flex;
2399
2401
  flex-direction:column;
2400
2402
  font-family:var(--body-default-font-family);
@@ -2406,10 +2408,10 @@
2406
2408
  text-decoration:var(--body-default-text-decoration);
2407
2409
  text-transform:var(--body-default-text-case);
2408
2410
  }
2409
- .bp_combobox_module_container--1857e.bp_combobox_module_disabled--1857e{
2411
+ .bp_combobox_module_container--2cc49.bp_combobox_module_disabled--2cc49{
2410
2412
  opacity:60%;
2411
2413
  }
2412
- .bp_combobox_module_container--1857e .bp_combobox_module_label--1857e{
2414
+ .bp_combobox_module_container--2cc49 .bp_combobox_module_label--2cc49{
2413
2415
  color:var(--combobox-label-color);
2414
2416
  flex:0 0 fit-content;
2415
2417
  font-family:var(--body-default-bold-font-family);
@@ -2422,10 +2424,10 @@
2422
2424
  text-decoration:var(--body-default-bold-text-decoration);
2423
2425
  text-transform:var(--body-default-bold-text-case);
2424
2426
  }
2425
- .bp_combobox_module_container--1857e .bp_combobox_module_label--1857e:not(.bp_combobox_module_hiddenLabel--1857e){
2427
+ .bp_combobox_module_container--2cc49 .bp_combobox_module_label--2cc49:not(.bp_combobox_module_hiddenLabel--2cc49){
2426
2428
  margin-block-end:var(--combobox-label-margin-block-end);
2427
2429
  }
2428
- .bp_combobox_module_container--1857e .bp_combobox_module_comboboxContainer--1857e{
2430
+ .bp_combobox_module_container--2cc49 .bp_combobox_module_comboboxContainer--2cc49{
2429
2431
  background-color:var(--combobox-container-background-color);
2430
2432
  border-bottom:var(--combobox-container-border-bottom-width) solid var(--combobox-container-border-color);
2431
2433
  border-left:var(--combobox-container-border-left-width) solid var(--combobox-container-border-color);
@@ -2442,15 +2444,15 @@
2442
2444
  padding-inline:var(--combobox-container-padding-inline);
2443
2445
  position:relative;
2444
2446
  }
2445
- .bp_combobox_module_container--1857e .bp_combobox_module_comboboxContainer--1857e.bp_combobox_module_withComboboxButtons--1857e{
2447
+ .bp_combobox_module_container--2cc49 .bp_combobox_module_comboboxContainer--2cc49.bp_combobox_module_withComboboxButtons--2cc49{
2446
2448
  padding-inline-end:var(--combobox-container-padding-inline-end-with-buttons);
2447
2449
  }
2448
- .bp_combobox_module_container--1857e .bp_combobox_module_comboboxContainer--1857e:not(:disabled):has(input:focus){
2450
+ .bp_combobox_module_container--2cc49 .bp_combobox_module_comboboxContainer--2cc49:not(:disabled):has(input:focus){
2449
2451
  background-color:var(--combobox-container-focus-background-color);
2450
2452
  border:var(--combobox-container-focus-border);
2451
2453
  padding-block:var(--combobox-container-focus-padding-block);
2452
2454
  }
2453
- .bp_combobox_module_container--1857e .bp_combobox_module_comboboxContainer--1857e:not(:disabled).bp_combobox_module_error--1857e,.bp_combobox_module_container--1857e .bp_combobox_module_comboboxContainer--1857e:not(:disabled):has([aria-invalid=true]){
2455
+ .bp_combobox_module_container--2cc49 .bp_combobox_module_comboboxContainer--2cc49:not(:disabled).bp_combobox_module_error--2cc49,.bp_combobox_module_container--2cc49 .bp_combobox_module_comboboxContainer--2cc49:not(:disabled):has([aria-invalid=true]){
2454
2456
  background-color:var(--combobox-container-error-background-color);
2455
2457
  border-bottom:var(--combobox-container-error-border-bottom-width) solid var(--combobox-container-error-border-color);
2456
2458
  border-left:var(--combobox-container-error-border-left-width) solid var(--combobox-container-error-border-color);
@@ -2458,13 +2460,13 @@
2458
2460
  border-top:var(--combobox-container-error-border-top-width) solid var(--combobox-container-error-border-color);
2459
2461
  padding-block:var(--combobox-container-error-padding-block);
2460
2462
  }
2461
- .bp_combobox_module_container--1857e .bp_combobox_module_comboboxContainer--1857e .bp_combobox_module_textInputWrapper--1857e{
2463
+ .bp_combobox_module_container--2cc49 .bp_combobox_module_comboboxContainer--2cc49 .bp_combobox_module_textInputWrapper--2cc49{
2462
2464
  align-items:center;
2463
2465
  display:flex;
2464
2466
  flex:content;
2465
2467
  gap:var(--combobox-text-input-wrapper-gap);
2466
2468
  }
2467
- .bp_combobox_module_container--1857e .bp_combobox_module_comboboxContainer--1857e .bp_combobox_module_textInputWrapper--1857e .bp_combobox_module_textInput--1857e{
2469
+ .bp_combobox_module_container--2cc49 .bp_combobox_module_comboboxContainer--2cc49 .bp_combobox_module_textInputWrapper--2cc49 .bp_combobox_module_textInput--2cc49{
2468
2470
  background-color:var(--combobox-text-input-background-color);
2469
2471
  border:none;
2470
2472
  color:var(--combobox-text-input-color);
@@ -2481,31 +2483,32 @@
2481
2483
  text-transform:var(--body-default-text-case);
2482
2484
  width:100%;
2483
2485
  }
2484
- .bp_combobox_module_container--1857e .bp_combobox_module_comboboxContainer--1857e .bp_combobox_module_textInputWrapper--1857e .bp_combobox_module_errorIcon--1857e path{
2486
+ .bp_combobox_module_container--2cc49 .bp_combobox_module_comboboxContainer--2cc49 .bp_combobox_module_textInputWrapper--2cc49 .bp_combobox_module_errorIcon--2cc49 path{
2485
2487
  fill:var(--combobox-error-icon-fill);
2486
2488
  }
2487
- .bp_combobox_module_container--1857e .bp_combobox_module_comboboxContainer--1857e .bp_combobox_module_textInputWrapper--1857e .bp_combobox_module_comboboxButtons--1857e{
2489
+ .bp_combobox_module_container--2cc49 .bp_combobox_module_comboboxContainer--2cc49 .bp_combobox_module_textInputWrapper--2cc49 .bp_combobox_module_comboboxButtons--2cc49{
2488
2490
  align-items:center;
2489
2491
  display:flex;
2490
2492
  position:absolute;
2491
2493
  right:var(--combobox-button-spacing);
2492
2494
  top:var(--combobox-button-spacing);
2493
2495
  }
2494
- .bp_combobox_module_container--1857e .bp_combobox_module_comboboxContainer--1857e.bp_combobox_module_withChips--1857e{
2496
+ .bp_combobox_module_container--2cc49 .bp_combobox_module_comboboxContainer--2cc49.bp_combobox_module_withChips--2cc49{
2495
2497
  max-height:var(--combobox-container-with-chips-max-height);
2496
2498
  padding-block:var(--combobox-container-with-chips-padding-block);
2497
2499
  }
2498
- .bp_combobox_module_container--1857e .bp_combobox_module_comboboxContainer--1857e.bp_combobox_module_withChips--1857e:not(:disabled).bp_combobox_module_error--1857e{
2500
+ .bp_combobox_module_container--2cc49 .bp_combobox_module_comboboxContainer--2cc49.bp_combobox_module_withChips--2cc49:not(:disabled).bp_combobox_module_error--2cc49{
2499
2501
  padding-block:var(--combobox-container-with-chips-error-padding-block);
2500
2502
  }
2501
- .bp_combobox_module_container--1857e .bp_combobox_module_comboboxContainer--1857e.bp_combobox_module_withChips--1857e:not(:disabled):has(input:focus){
2503
+ .bp_combobox_module_container--2cc49 .bp_combobox_module_comboboxContainer--2cc49.bp_combobox_module_withChips--2cc49:not(:disabled):has(input:focus){
2502
2504
  padding-block:var(--combobox-container-with-chips-focus-padding-block);
2503
2505
  }
2504
- .bp_combobox_module_container--1857e .bp_combobox_module_inlineError--1857e{
2506
+ .bp_combobox_module_container--2cc49 .bp_combobox_module_inlineError--2cc49{
2505
2507
  margin-block-start:var(--combobox-inline-error-margin-block-start);
2506
2508
  }
2507
2509
 
2508
- .bp_combobox_module_popover--1857e{
2510
+ .bp_combobox_module_popover--2cc49{
2511
+ backdrop-filter:var(--combobox-popover-backdrop-filter);
2509
2512
  background-color:var(--combobox-popover-background-color);
2510
2513
  border:var(--combobox-popover-border);
2511
2514
  border-radius:var(--combobox-popover-border-radius);
@@ -2524,7 +2527,7 @@
2524
2527
  text-transform:var(--body-default-text-case);
2525
2528
  z-index:var(--z-index-popover);
2526
2529
  }
2527
- .bp_combobox_module_popover--1857e .bp_combobox_module_option--1857e{
2530
+ .bp_combobox_module_popover--2cc49 .bp_combobox_module_option--2cc49{
2528
2531
  border:var(--combobox-option-border);
2529
2532
  border-radius:var(--combobox-option-border-radius);
2530
2533
  box-sizing:border-box;
@@ -2538,21 +2541,21 @@
2538
2541
  user-select:none;
2539
2542
  width:100%;
2540
2543
  }
2541
- .bp_combobox_module_popover--1857e .bp_combobox_module_option--1857e[aria-disabled]{
2544
+ .bp_combobox_module_popover--2cc49 .bp_combobox_module_option--2cc49[aria-disabled]{
2542
2545
  opacity:var(--combobox-option-disabled-opacity);
2543
2546
  }
2544
- .bp_combobox_module_popover--1857e .bp_combobox_module_option--1857e[data-active-item]:not([aria-disabled]){
2547
+ .bp_combobox_module_popover--2cc49 .bp_combobox_module_option--2cc49[data-active-item]:not([aria-disabled]){
2545
2548
  background-color:var(--combobox-option-active-background-color);
2546
2549
  border:var(--combobox-option-active-border);
2547
2550
  }
2548
- .bp_combobox_module_popover--1857e .bp_combobox_module_option--1857e:active{
2551
+ .bp_combobox_module_popover--2cc49 .bp_combobox_module_option--2cc49:active{
2549
2552
  background-color:var(--combobox-option-hover-background-color);
2550
2553
  border:var(--combobox-option-border);
2551
2554
  }
2552
- .bp_combobox_module_popover--1857e .bp_combobox_module_option--1857e:hover{
2555
+ .bp_combobox_module_popover--2cc49 .bp_combobox_module_option--2cc49:hover{
2553
2556
  background-color:var(--combobox-option-hover-background-color);
2554
2557
  }
2555
- .bp_combobox_module_popover--1857e .bp_combobox_module_option--1857e .bp_combobox_module_indicator--1857e{
2558
+ .bp_combobox_module_popover--2cc49 .bp_combobox_module_option--2cc49 .bp_combobox_module_indicator--2cc49{
2556
2559
  align-items:center;
2557
2560
  display:flex;
2558
2561
  height:var(--combobox-option-indicator-height);
@@ -2561,41 +2564,75 @@
2561
2564
  position:absolute;
2562
2565
  top:var(--combobox-option-indicator-top);
2563
2566
  }
2564
- .bp_combobox_module_popover--1857e .bp_combobox_module_option--1857e .bp_combobox_module_indicator--1857e .bp_combobox_module_indicatorIcon--1857e path{
2567
+ .bp_combobox_module_popover--2cc49 .bp_combobox_module_option--2cc49 .bp_combobox_module_indicator--2cc49 .bp_combobox_module_indicatorIcon--2cc49 path{
2565
2568
  fill:var(--combobox-option-indicator-icon-fill);
2566
2569
  }
2567
- .bp_combobox_module_popover--1857e .bp_combobox_module_optionWithIndicator--1857e{
2570
+ .bp_combobox_module_popover--2cc49 .bp_combobox_module_optionWithIndicator--2cc49{
2568
2571
  padding-inline:var(--combobox-option-with-indicator-padding-inline);
2569
2572
  }
2570
- .bp_combobox_module_popover--1857e .bp_combobox_module_loadingIndicator--1857e{
2573
+ .bp_combobox_module_popover--2cc49 .bp_combobox_module_loadingIndicator--2cc49{
2571
2574
  position:var(--combobox-loading-indicator-position);
2572
2575
  }
2573
- .bp_combobox_module_popover--1857e .bp_combobox_module_noResultOption--1857e{
2576
+ .bp_combobox_module_popover--2cc49 .bp_combobox_module_noResultOption--2cc49{
2574
2577
  color:var(--combobox-no-result-option-color);
2575
2578
  -webkit-user-select:none;
2576
2579
  user-select:none;
2577
2580
  }
2578
2581
 
2579
- .bp_combobox_group_module_container--4fa0a{
2582
+ .bp_combobox_group_module_container--71411[data-modern=false]{
2583
+ --combobox-group-container-gap:var(--space-2);
2584
+ --combobox-group-container-max-width:358px;
2585
+ --combobox-group-disabled-opacity:60%;
2586
+ --combobox-group-label-color:var(--text-text-on-light);
2587
+ }
2588
+ .bp_combobox_group_module_container--71411[data-modern=false] .bp_combobox_group_module_trailing--71411{
2589
+ --blueprint-combobox-input-radius:0 var(--radius-2) var(--radius-2) 0;
2590
+ --blueprint-select-trigger-radius:0 var(--radius-2) var(--radius-2) 0;
2591
+ --blueprint-combobox-border-left-width:none;
2592
+ --blueprint-select-border-left-width:none;
2593
+ }
2594
+ .bp_combobox_group_module_container--71411[data-modern=false] .bp_combobox_group_module_leading--71411{
2595
+ --blueprint-combobox-input-radius:var(--radius-2) 0 0 var(--radius-2);
2596
+ --blueprint-select-trigger-radius:var(--radius-2) 0 0 var(--radius-2);
2597
+ }
2598
+
2599
+ .bp_combobox_group_module_container--71411[data-modern=true]{
2600
+ --combobox-group-container-gap:var(--bp-space-020);
2601
+ --combobox-group-container-max-width:358px;
2602
+ --combobox-group-disabled-opacity:60%;
2603
+ --combobox-group-label-color:var(--bp-text-text-on-light);
2604
+ }
2605
+ .bp_combobox_group_module_container--71411[data-modern=true] .bp_combobox_group_module_trailing--71411{
2606
+ --blueprint-combobox-input-radius:0 var(--bp-radius-06) var(--bp-radius-06) 0;
2607
+ --blueprint-select-trigger-radius:0 var(--bp-radius-06) var(--bp-radius-06) 0;
2608
+ --blueprint-combobox-border-left-width:none;
2609
+ --blueprint-select-border-left-width:none;
2610
+ }
2611
+ .bp_combobox_group_module_container--71411[data-modern=true] .bp_combobox_group_module_leading--71411{
2612
+ --blueprint-combobox-input-radius:var(--bp-radius-06) 0 0 var(--bp-radius-06);
2613
+ --blueprint-select-trigger-radius:var(--bp-radius-06) 0 0 var(--bp-radius-06);
2614
+ }
2615
+
2616
+ .bp_combobox_group_module_container--71411{
2580
2617
  align-items:flex-start;
2581
2618
  display:flex;
2582
2619
  flex-direction:column;
2583
- gap:var(--space-2);
2584
- max-width:358px;
2620
+ gap:var(--combobox-group-container-gap);
2621
+ max-width:var(--combobox-group-container-max-width);
2585
2622
  }
2586
2623
 
2587
- .bp_combobox_group_module_comboboxGroupcontainer--4fa0a{
2624
+ .bp_combobox_group_module_comboboxGroupcontainer--71411{
2588
2625
  display:flex;
2589
2626
  flex-direction:row;
2590
2627
  }
2591
2628
 
2592
- .bp_combobox_group_module_disabled--4fa0a{
2593
- opacity:60%;
2629
+ .bp_combobox_group_module_disabled--71411{
2630
+ opacity:var(--combobox-group-disabled-opacity);
2594
2631
  pointer-events:none;
2595
2632
  }
2596
2633
 
2597
- .bp_combobox_group_module_label--4fa0a{
2598
- color:var(--text-text-on-light);
2634
+ .bp_combobox_group_module_label--71411{
2635
+ color:var(--combobox-group-label-color);
2599
2636
  flex:0 0 fit-content;
2600
2637
  font-family:var(--body-default-bold-font-family);
2601
2638
  font-size:var(--body-default-bold-font-size);
@@ -2608,55 +2645,43 @@
2608
2645
  text-transform:var(--body-default-bold-text-case);
2609
2646
  }
2610
2647
 
2611
- .bp_combobox_group_module_trailing--4fa0a{
2612
- --blueprint-combobox-input-radius:0 var(--radius-2) var(--radius-2) 0;
2613
- --blueprint-select-trigger-radius:0 var(--radius-2) var(--radius-2) 0;
2614
- --blueprint-combobox-border-left-width:none;
2615
- --blueprint-select-border-left-width:none;
2616
- }
2617
-
2618
- .bp_combobox_group_module_leading--4fa0a{
2619
- --blueprint-combobox-input-radius:var(--radius-2) 0 0 var(--radius-2);
2620
- --blueprint-select-trigger-radius:var(--radius-2) 0 0 var(--radius-2);
2621
- }
2622
-
2623
- .bp_combobox_group_module_errorCombobox--4fa0a.bp_combobox_group_module_leading--4fa0a{
2648
+ .bp_combobox_group_module_errorCombobox--71411.bp_combobox_group_module_leading--71411{
2624
2649
  --blueprint-select-border-right-width:none;
2625
2650
  }
2626
2651
 
2627
- .bp_combobox_group_module_errorSelect--4fa0a.bp_combobox_group_module_leading--4fa0a{
2652
+ .bp_combobox_group_module_errorSelect--71411.bp_combobox_group_module_leading--71411{
2628
2653
  --blueprint-combobox-border-right-width:none;
2629
2654
  }
2630
2655
 
2631
- .bp_combobox_group_module_errorCombobox--4fa0a.bp_combobox_group_module_errorSelect--4fa0a.bp_combobox_group_module_trailing--4fa0a{
2656
+ .bp_combobox_group_module_errorCombobox--71411.bp_combobox_group_module_errorSelect--71411.bp_combobox_group_module_trailing--71411{
2632
2657
  --blueprint-select-border-error-left-width:none;
2633
2658
  }
2634
2659
 
2635
- .bp_combobox_group_module_errorCombobox--4fa0a.bp_combobox_group_module_errorSelect--4fa0a.bp_combobox_group_module_leading--4fa0a{
2660
+ .bp_combobox_group_module_errorCombobox--71411.bp_combobox_group_module_errorSelect--71411.bp_combobox_group_module_leading--71411{
2636
2661
  --blueprint-select-border-error-right-width:none;
2637
2662
  }
2638
2663
 
2639
- .bp_combobox_group_module_selectHasFocus--4fa0a.bp_combobox_group_module_leading--4fa0a{
2664
+ .bp_combobox_group_module_selectHasFocus--71411.bp_combobox_group_module_leading--71411{
2640
2665
  --blueprint-combobox-border-right-width:none;
2641
2666
  }
2642
2667
 
2643
- .bp_combobox_group_module_selectHasFocus--4fa0a.bp_combobox_group_module_errorCombobox--4fa0a.bp_combobox_group_module_leading--4fa0a{
2668
+ .bp_combobox_group_module_selectHasFocus--71411.bp_combobox_group_module_errorCombobox--71411.bp_combobox_group_module_leading--71411{
2644
2669
  --blueprint-combobox-border-error-right-width:none;
2645
2670
  }
2646
2671
 
2647
- .bp_combobox_group_module_selectHasFocus--4fa0a.bp_combobox_group_module_errorCombobox--4fa0a.bp_combobox_group_module_trailing--4fa0a{
2672
+ .bp_combobox_group_module_selectHasFocus--71411.bp_combobox_group_module_errorCombobox--71411.bp_combobox_group_module_trailing--71411{
2648
2673
  --blueprint-combobox-border-error-left-width:none;
2649
2674
  }
2650
2675
 
2651
- .bp_combobox_group_module_comboboxHasFocus--4fa0a.bp_combobox_group_module_leading--4fa0a{
2676
+ .bp_combobox_group_module_comboboxHasFocus--71411.bp_combobox_group_module_leading--71411{
2652
2677
  --blueprint-select-border-right-width:none;
2653
2678
  }
2654
2679
 
2655
- .bp_combobox_group_module_comboboxHasFocus--4fa0a.bp_combobox_group_module_errorSelect--4fa0a.bp_combobox_group_module_leading--4fa0a{
2680
+ .bp_combobox_group_module_comboboxHasFocus--71411.bp_combobox_group_module_errorSelect--71411.bp_combobox_group_module_leading--71411{
2656
2681
  --blueprint-select-border-error-right-width:none;
2657
2682
  }
2658
2683
 
2659
- .bp_combobox_group_module_comboboxHasFocus--4fa0a.bp_combobox_group_module_errorSelect--4fa0a.bp_combobox_group_module_trailing--4fa0a{
2684
+ .bp_combobox_group_module_comboboxHasFocus--71411.bp_combobox_group_module_errorSelect--71411.bp_combobox_group_module_trailing--71411{
2660
2685
  --blueprint-select-border-error-left-width:none;
2661
2686
  }
2662
2687
 
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@box/blueprint-web",
3
- "version": "12.48.0",
3
+ "version": "12.49.0",
4
4
  "type": "module",
5
5
  "license": "SEE LICENSE IN LICENSE",
6
6
  "publishConfig": {