@box/blueprint-web 12.40.1 → 12.41.1

package/dist/lib-esm/card/card.module.js

@@ -1,4 +1,4 @@
 import '../index.css';
-var styles = {"card":"bp_card_module_card--6d119","dropshadow-1":"bp_card_module_dropshadow-1--6d119","dropshadow-3":"bp_card_module_dropshadow-3--6d119"};
+var styles = {"card":"bp_card_module_card--ce148","dropshadow-1":"bp_card_module_dropshadow-1--ce148","dropshadow-3":"bp_card_module_dropshadow-3--ce148"};
 
 export { styles as default };

package/dist/lib-esm/combobox/combobox.js

@@ -4,6 +4,7 @@ import { SelectRenderer } from '@ariakit/react-core/select/select-renderer';
 import { Checkmark, XMark } from '@box/blueprint-web-assets/icons/Fill';
 import clsx from 'clsx';
 import React__default, { forwardRef, useMemo, useRef, useCallback, useEffect } from 'react';
+import { useBlueprintModernization } from '../blueprint-modernization-context/useBlueprintModernization.js';
 import { InputChip } from '../input-chip/input-chip.js';
 import { LoadingIndicator } from '../loading-indicator/loading-indicator.js';
 import { IconButton } from '../primitives/icon-button/icon-button.js';
@@ -91,6 +92,9 @@ const RootInner = ({
     getPopoverRef?.(node);
   }, [getPopoverRef]);
   const hasError = !!error && !disabled;
+  const {
+    enableModernizedComponents
+  } = useBlueprintModernization();
   const comboboxStore = useComboboxStore({
     // Input state
     defaultValue: defaultInputValue,
@@ -415,10 +419,12 @@ const RootInner = ({
     className: clsx(styles.container, {
       [styles.disabled]: disabled
     }, className),
+    "data-modern": enableModernizedComponents,
     children: [inputComponent, showLoading || filteredOptions.length > 0 || filteredOptions.length <= 0 && noResultMessage ? jsx(ComboboxPopover, {
       ref: popoverRefCallback,
       "aria-labelledby": comboboxId,
       className: styles.popover,
+      "data-modern": enableModernizedComponents,
       fitViewport: true,
       gutter: 8,
       hideOnEscape: hideOnEscape,

package/dist/lib-esm/combobox/combobox.module.js

@@ -1,4 +1,4 @@
 import '../index.css';
-var styles = {"container":"bp_combobox_module_container--015a0","disabled":"bp_combobox_module_disabled--015a0","label":"bp_combobox_module_label--015a0","hiddenLabel":"bp_combobox_module_hiddenLabel--015a0","comboboxContainer":"bp_combobox_module_comboboxContainer--015a0","withComboboxButtons":"bp_combobox_module_withComboboxButtons--015a0","error":"bp_combobox_module_error--015a0","textInputWrapper":"bp_combobox_module_textInputWrapper--015a0","textInput":"bp_combobox_module_textInput--015a0","errorIcon":"bp_combobox_module_errorIcon--015a0","comboboxButtons":"bp_combobox_module_comboboxButtons--015a0","withChips":"bp_combobox_module_withChips--015a0","inlineError":"bp_combobox_module_inlineError--015a0","popover":"bp_combobox_module_popover--015a0","option":"bp_combobox_module_option--015a0","indicator":"bp_combobox_module_indicator--015a0","indicatorIcon":"bp_combobox_module_indicatorIcon--015a0","optionWithIndicator":"bp_combobox_module_optionWithIndicator--015a0","loadingIndicator":"bp_combobox_module_loadingIndicator--015a0","noResultOption":"bp_combobox_module_noResultOption--015a0"};
+var styles = {"container":"bp_combobox_module_container--ec81c","popover":"bp_combobox_module_popover--ec81c","disabled":"bp_combobox_module_disabled--ec81c","label":"bp_combobox_module_label--ec81c","hiddenLabel":"bp_combobox_module_hiddenLabel--ec81c","comboboxContainer":"bp_combobox_module_comboboxContainer--ec81c","withComboboxButtons":"bp_combobox_module_withComboboxButtons--ec81c","error":"bp_combobox_module_error--ec81c","textInputWrapper":"bp_combobox_module_textInputWrapper--ec81c","textInput":"bp_combobox_module_textInput--ec81c","errorIcon":"bp_combobox_module_errorIcon--ec81c","comboboxButtons":"bp_combobox_module_comboboxButtons--ec81c","withChips":"bp_combobox_module_withChips--ec81c","inlineError":"bp_combobox_module_inlineError--ec81c","option":"bp_combobox_module_option--ec81c","indicator":"bp_combobox_module_indicator--ec81c","indicatorIcon":"bp_combobox_module_indicatorIcon--ec81c","optionWithIndicator":"bp_combobox_module_optionWithIndicator--ec81c","loadingIndicator":"bp_combobox_module_loadingIndicator--ec81c","noResultOption":"bp_combobox_module_noResultOption--ec81c"};
 
 export { styles as default };

package/dist/lib-esm/index.css

@@ -1251,7 +1251,7 @@
 .bp_button_wrapper_module_buttonWrapper--b0897{
   all:unset;
 }
-.bp_card_module_card--6d119[data-modern=true]{
+.bp_card_module_card--ce148[data-modern=true]{
   --bp-card-dropshadow-1:var(--dropshadow-1);
   --bp-card-dropshadow-3:var(--dropshadow-3);
   --card-radius:var(--bp-radius-10);
@@ -1262,25 +1262,27 @@
   --card-dropshadow-3:var(--bp-card-dropshadow-3);
 }
 
-.bp_card_module_card--6d119[data-modern=false]{
+.bp_card_module_card--ce148[data-modern=false]{
   --card-padding:var(--space-4);
   --card-background:var(--surface-card-surface);
   --card-border:var(--border-1) solid var(--border-card-border);
   --card-radius:var(--radius-4);
   --card-dropshadow-1:var(--dropshadow-1);
   --card-dropshadow-3:var(--dropshadow-3);
+  --card-backdrop-filter:blur(16px);
 }
 
-.bp_card_module_card--6d119{
+.bp_card_module_card--ce148{
+  backdrop-filter:var(--card-backdrop-filter);
   background:var(--card-background);
   border:var(--card-border);
   border-radius:var(--card-radius);
   padding:var(--card-padding);
 }
-.bp_card_module_card--6d119.bp_card_module_dropshadow-1--6d119{
+.bp_card_module_card--ce148.bp_card_module_dropshadow-1--ce148{
   box-shadow:var(--card-dropshadow-1);
 }
-.bp_card_module_card--6d119.bp_card_module_dropshadow-3--6d119{
+.bp_card_module_card--ce148.bp_card_module_dropshadow-3--ce148{
   box-shadow:var(--card-dropshadow-3);
 }
 
@@ -2148,7 +2150,188 @@
   margin-block-start:var(--text-area-container-row-gap);
 }
 
-.bp_combobox_module_container--015a0{
+.bp_combobox_module_container--ec81c[data-modern=false]{
+  --max-lines:3;
+  --input-height:var(--space-5);
+  --chip-height:var(--space-7);
+  --combobox-height:2.5rem;
+  --combobox-space:calc((var(--combobox-height) - var(--input-height))/2);
+  --combobox-with-chips-space:calc((var(--combobox-height) - var(--chip-height))/2);
+  --combobox-border-width:var(--border-1);
+  --combobox-border-width-error:var(--border-2);
+  --combobox-border-width-focus:var(--border-2);
+  --combobox-label-color:var(--text-text-on-light);
+  --combobox-label-margin-block-end:var(--space-2);
+  --combobox-container-contents-gap:var(--space-2);
+  --combobox-container-background-color:var(--surface-dropdown-surface);
+  --combobox-container-border-top-width:var(--blueprint-combobox-border-top-width, var(--combobox-border-width));
+  --combobox-container-border-right-width:var(--blueprint-combobox-border-right-width, var(--combobox-border-width));
+  --combobox-container-border-bottom-width:var(
+          --blueprint-combobox-border-bottom-width,
+          var(--combobox-border-width)
+      );
+  --combobox-container-border-left-width:var(--blueprint-combobox-border-left-width, var(--combobox-border-width));
+  --combobox-container-border-color:var(--blueprint-combobox-border-color, var(--border-input-border));
+  --combobox-container-border-radius:var(--blueprint-combobox-input-radius, var(--radius-2));
+  --combobox-container-box-shadow:var(--innershadow-1);
+  --combobox-container-padding-block:calc(var(--combobox-space) - var(--combobox-border-width));
+  --combobox-container-padding-inline:var(--space-3);
+  --combobox-container-padding-inline-end-with-buttons:var(--space-10);
+  --combobox-container-focus-background-color:var(--surface-dropdown-surface-focus);
+  --combobox-container-focus-border:var(--combobox-border-width-focus) solid var(--outline-focus-on-light);
+  --combobox-padding-block-focus:calc(var(--combobox-space) - var(--combobox-border-width-focus));
+  --combobox-container-focus-padding-block:var(--combobox-padding-block-focus);
+  --combobox-container-error-background-color:var(--surface-dropdown-surface-error);
+  --combobox-container-error-border-top-width:var(--blueprint-combobox-border-error-top-width, var(--border-2));
+  --combobox-container-error-border-right-width:var(--blueprint-combobox-border-error-right-width, var(--border-2));
+  --combobox-container-error-border-bottom-width:var(
+          --blueprint-combobox-border-error-bottom-width,
+          var(--border-2)
+      );
+  --combobox-container-error-border-left-width:var(--blueprint-combobox-border-error-left-width, var(--border-2));
+  --combobox-container-error-border-color:var(--border-input-border-error);
+  --combobox-padding-block-error:calc(var(--combobox-space) - var(--combobox-border-width-error));
+  --combobox-container-error-padding-block:var(--combobox-padding-block-error);
+  --combobox-container-with-chips-max-height:calc((var(--max-lines) - 1)*var(--space-2) + var(--max-lines)*var(--space-6));
+  --combobox-with-chips-padding-block:calc(var(--combobox-with-chips-space) - var(--combobox-border-width));
+  --combobox-container-with-chips-padding-block:var(--combobox-with-chips-padding-block);
+  --combobox-container-with-chips-error-padding-block:calc(var(--combobox-with-chips-space) - var(--combobox-border-width-error));
+  --combobox-container-with-chips-focus-padding-block:calc(var(--combobox-with-chips-space) - var(--combobox-border-width-focus));
+  --combobox-text-input-color:var(--text-text-on-light);
+  --combobox-text-input-wrapper-gap:var(--space-2);
+  --combobox-text-input-background-color:#0000;
+  --combobox-error-icon-fill:var(--icon-icon-error-on-light);
+  --combobox-inline-error-margin-block-start:var(--space-2);
+  --combobox-button-spacing:var(--space-2);
+}
+
+.bp_combobox_module_container--ec81c[data-modern=true]{
+  --max-lines:3;
+  --bp-innershadow-01:var(--innershadow-1);
+  --bp-input-height:var(--bp-space-050);
+  --bp-chip-height:var(--bp-space-070);
+  --bp-combobox-height:2.5rem;
+  --bp-combobox-space:calc((var(--bp-combobox-height) - var(--bp-input-height))/2);
+  --bp-combobox-with-chips-space:calc((var(--bp-combobox-height) - var(--bp-chip-height))/2);
+  --combobox-border-width:var(--bp-border-01);
+  --combobox-border-width-error:var(--bp-border-02);
+  --combobox-border-width-focus:var(--bp-border-02);
+  --combobox-label-color:var(--bp-text-text-on-light);
+  --combobox-label-margin-block-end:var(--bp-space-020);
+  --combobox-container-contents-gap:var(--bp-space-020);
+  --combobox-container-background-color:var(--bp-surface-combobox-surface);
+  --combobox-container-border-top-width:var(--blueprint-combobox-border-top-width, var(--bp-border-01));
+  --combobox-container-border-right-width:var(--blueprint-combobox-border-right-width, var(--bp-border-01));
+  --combobox-container-border-bottom-width:var(--blueprint-combobox-border-bottom-width, var(--bp-border-01));
+  --combobox-container-border-left-width:var(--blueprint-combobox-border-left-width, var(--bp-border-01));
+  --combobox-container-border-color:var(
+          --blueprint-combobox-border-color,
+          var(--bp-border-combobox-border, var(--bp-gray-50))
+      );
+  --combobox-container-border-radius:var(--blueprint-combobox-input-radius, var(--bp-radius-06));
+  --combobox-container-box-shadow:var(--bp-innershadow-01);
+  --combobox-container-padding-block:calc(var(--bp-combobox-space) - var(--combobox-border-width));
+  --combobox-container-padding-inline:var(--bp-space-030);
+  --combobox-container-padding-inline-end-with-buttons:var(--bp-space-100);
+  --combobox-container-focus-background-color:var(--bp-gray-white);
+  --combobox-container-focus-border:var(--combobox-border-width-focus) solid var(--bp-outline-focus-on-light);
+  --combobox-container-focus-padding-block:var(--bp-space-020);
+  --combobox-container-error-background-color:var(--bp-gray-white);
+  --combobox-container-error-border-top-width:var(--blueprint-combobox-border-error-top-width, var(--bp-border-02));
+  --combobox-container-error-border-right-width:var(
+          --blueprint-combobox-border-error-right-width,
+          var(--bp-border-02)
+      );
+  --combobox-container-error-border-bottom-width:var(
+          --blueprint-combobox-border-error-bottom-width,
+          var(--bp-border-02)
+      );
+  --combobox-container-error-border-left-width:var(
+          --blueprint-combobox-border-error-left-width,
+          var(--bp-border-02)
+      );
+  --combobox-container-error-border-color:var(--bp-border-input-border-error);
+  --combobox-padding-block-error:calc(var(--bp-combobox-space) - var(--combobox-border-width-error));
+  --combobox-container-error-padding-block:var(--combobox-padding-block-error);
+  --combobox-container-with-chips-max-height:calc((var(--max-lines) - 1)*var(--bp-space-020) + var(--max-lines)*var(--bp-space-060));
+  --combobox-with-chips-padding-block:calc(var(--bp-combobox-with-chips-space) - var(--combobox-border-width));
+  --combobox-container-with-chips-padding-block:var(--combobox-with-chips-padding-block);
+  --combobox-container-with-chips-error-padding-block:calc(var(--bp-combobox-with-chips-space) - var(--combobox-border-width-error));
+  --combobox-container-with-chips-focus-padding-block:calc(var(--bp-combobox-with-chips-space) - var(--combobox-border-width-focus));
+  --combobox-text-input-color:var(--bp-text-text-on-light);
+  --combobox-text-input-wrapper-gap:var(--bp-space-020);
+  --combobox-text-input-background-color:#0000;
+  --combobox-error-icon-fill:var(--bp-icon-icon-error-on-light);
+  --combobox-inline-error-margin-block-start:var(--bp-space-020);
+  --combobox-button-spacing:var(--bp-space-020);
+}
+
+.bp_combobox_module_popover--ec81c[data-modern=false]{
+  --option-height:2.25rem;
+  --dropdown-max-height:12.5rem;
+  --combobox-popover-max-height:min(
+          var(--popover-available-height, var(--option-height)),
+          var(--dropdown-max-height)
+      );
+  --combobox-popover-background-color:var(--surface-menu-surface);
+  --combobox-popover-border:var(--border-1) solid var(--border-card-border);
+  --combobox-popover-border-radius:var(--radius-3);
+  --combobox-popover-padding-block:var(--space-3);
+  --combobox-popover-padding-inline:var(--space-3);
+  --combobox-popover-box-shadow:var(--dropshadow-3);
+  --combobox-option-border:var(--border-2) solid #0000;
+  --combobox-option-border-radius:var(--radius-3);
+  --combobox-option-padding-block:var(--space-2);
+  --combobox-option-padding-inline:var(--space-2);
+  --combobox-option-disabled-opacity:tokens.$disabled-opacity;
+  --combobox-option-active-background-color:var(--surface-menu-surface-focus);
+  --combobox-option-active-border:var(--border-2) solid var(--outline-focus-on-light);
+  --combobox-option-active-padding-block:var(--space-2);
+  --combobox-option-active-padding-inline:var(--space-2);
+  --combobox-option-hover-background-color:var(--surface-menu-surface-hover);
+  --combobox-option-indicator-top:0;
+  --combobox-option-indicator-left:var(--space-2);
+  --combobox-option-indicator-height:var(--size-9);
+  --combobox-option-indicator-icon-fill:var(--icon-icon-on-light);
+  --combobox-option-with-indicator-padding-inline:var(--space-10) var(--space-2);
+  --combobox-loading-indicator-position:unset;
+  --combobox-no-result-option-color:var(--text-text-on-light);
+}
+
+.bp_combobox_module_popover--ec81c[data-modern=true]{
+  --option-height:2.25rem;
+  --dropdown-max-height:12.5rem;
+  --bp-dropshadow-03:var(--dropshadow-3);
+  --combobox-popover-max-height:min(
+          var(--popover-available-height, var(--option-height)),
+          var(--dropdown-max-height)
+      );
+  --combobox-popover-background-color:var(--bp-surface-menu-surface);
+  --combobox-popover-border:var(--bp-border-01) solid var(--bp-border-menu-border);
+  --combobox-popover-border-radius:var(--bp-radius-10);
+  --combobox-popover-padding-block:var(--bp-space-030);
+  --combobox-popover-padding-inline:var(--bp-space-030);
+  --combobox-popover-box-shadow:var(--bp-dropshadow-03);
+  --combobox-option-border:var(--bp-border-02) solid #0000;
+  --combobox-option-border-radius:var(--bp-radius-10);
+  --combobox-option-padding-block:var(--bp-space-020);
+  --combobox-option-padding-inline:var(--bp-space-020);
+  --combobox-option-disabled-opacity:.3;
+  --combobox-option-active-background-color:var(--bp-surface-menu-item-surface-pressed);
+  --combobox-option-active-border:var(--bp-border-02) solid var(--bp-outline-focus-on-light);
+  --combobox-option-active-padding-block:var(--bp-space-020);
+  --combobox-option-active-padding-inline:var(--bp-space-020);
+  --combobox-option-hover-background-color:var(--bp-surface-menu-item-surface-hover);
+  --combobox-option-indicator-top:0;
+  --combobox-option-indicator-left:var(--bp-space-020);
+  --combobox-option-indicator-height:var(--bp-size-090);
+  --combobox-option-indicator-icon-fill:var(--bp-icon-icon-on-light);
+  --combobox-option-with-indicator-padding-inline:var(--bp-space-100) var(--bp-space-020);
+  --combobox-loading-indicator-position:unset;
+  --combobox-no-result-option-color:var(--bp-text-text-on-light);
+}
+
+.bp_combobox_module_container--ec81c{
   display:flex;
   flex-direction:column;
   font-family:var(--body-default-font-family);
@@ -2160,11 +2343,11 @@
           text-decoration:var(--body-default-text-decoration);
   text-transform:var(--body-default-text-case);
 }
-.bp_combobox_module_container--015a0.bp_combobox_module_disabled--015a0{
+.bp_combobox_module_container--ec81c.bp_combobox_module_disabled--ec81c{
   opacity:60%;
 }
-.bp_combobox_module_container--015a0 .bp_combobox_module_label--015a0{
-  color:var(--text-text-on-light);
+.bp_combobox_module_container--ec81c .bp_combobox_module_label--ec81c{
+  color:var(--combobox-label-color);
   flex:0 0 fit-content;
   font-family:var(--body-default-bold-font-family);
   font-size:var(--body-default-bold-font-size);
@@ -2176,56 +2359,56 @@
           text-decoration:var(--body-default-bold-text-decoration);
   text-transform:var(--body-default-bold-text-case);
 }
-.bp_combobox_module_container--015a0 .bp_combobox_module_label--015a0:not(.bp_combobox_module_hiddenLabel--015a0){
-  margin-block-end:var(--space-2);
-}
-.bp_combobox_module_container--015a0 .bp_combobox_module_comboboxContainer--015a0{
-  background-color:var(--surface-dropdown-surface);
-  border-bottom:var(--blueprint-combobox-border-bottom-width, var(--border-1)) solid var(--blueprint-combobox-border-color, var(--border-input-border));
-  border-left:var(--blueprint-combobox-border-left-width, var(--border-1)) solid var(--blueprint-combobox-border-color, var(--border-input-border));
-  border-radius:var(--blueprint-combobox-input-radius, var(--radius-2));
-  border-right:var(--blueprint-combobox-border-right-width, var(--border-1)) solid var(--blueprint-combobox-border-color, var(--border-input-border));
-  border-top:var(--blueprint-combobox-border-top-width, var(--border-1)) solid var(--blueprint-combobox-border-color, var(--border-input-border));
-  box-shadow:var(--innershadow-1);
+.bp_combobox_module_container--ec81c .bp_combobox_module_label--ec81c:not(.bp_combobox_module_hiddenLabel--ec81c){
+  margin-block-end:var(--combobox-label-margin-block-end);
+}
+.bp_combobox_module_container--ec81c .bp_combobox_module_comboboxContainer--ec81c{
+  background-color:var(--combobox-container-background-color);
+  border-bottom:var(--combobox-container-border-bottom-width) solid var(--combobox-container-border-color);
+  border-left:var(--combobox-container-border-left-width) solid var(--combobox-container-border-color);
+  border-radius:var(--combobox-container-border-radius);
+  border-right:var(--combobox-container-border-right-width) solid var(--combobox-container-border-color);
+  border-top:var(--combobox-container-border-top-width) solid var(--combobox-container-border-color);
+  box-shadow:var(--combobox-container-box-shadow);
   cursor:text;
   display:flex;
   flex-wrap:wrap;
-  gap:var(--space-2);
+  gap:var(--combobox-container-contents-gap);
   overflow-y:auto;
-  padding-block:calc((2.5rem - var(--space-5))/2 - var(--border-1));
-  padding-inline:var(--space-3);
+  padding-block:var(--combobox-container-padding-block);
+  padding-inline:var(--combobox-container-padding-inline);
   position:relative;
 }
-.bp_combobox_module_container--015a0 .bp_combobox_module_comboboxContainer--015a0.bp_combobox_module_withComboboxButtons--015a0{
-  padding-inline-end:var(--space-10);
+.bp_combobox_module_container--ec81c .bp_combobox_module_comboboxContainer--ec81c.bp_combobox_module_withComboboxButtons--ec81c{
+  padding-inline-end:var(--combobox-container-padding-inline-end-with-buttons);
 }
-.bp_combobox_module_container--015a0 .bp_combobox_module_comboboxContainer--015a0:not(:disabled):has(input:focus){
-  background-color:var(--surface-dropdown-surface-focus);
-  border:var(--border-2) solid var(--outline-focus-on-light);
-  padding-block:calc((2.5rem - var(--space-5))/2 - var(--border-2));
+.bp_combobox_module_container--ec81c .bp_combobox_module_comboboxContainer--ec81c:not(:disabled):has(input:focus){
+  background-color:var(--combobox-container-focus-background-color);
+  border:var(--combobox-container-focus-border);
+  padding-block:var(--combobox-container-focus-padding-block);
 }
-.bp_combobox_module_container--015a0 .bp_combobox_module_comboboxContainer--015a0:not(:disabled).bp_combobox_module_error--015a0,.bp_combobox_module_container--015a0 .bp_combobox_module_comboboxContainer--015a0:not(:disabled):has([aria-invalid=true]){
-  background-color:var(--surface-dropdown-surface-error);
-  border-bottom:var(--blueprint-combobox-border-error-bottom-width, var(--border-2)) solid var(--border-input-border-error);
-  border-left:var(--blueprint-combobox-border-error-left-width, var(--border-2)) solid var(--border-input-border-error);
-  border-right:var(--blueprint-combobox-border-error-right-width, var(--border-2)) solid var(--border-input-border-error);
-  border-top:var(--blueprint-combobox-border-error-top-width, var(--border-2)) solid var(--border-input-border-error);
-  padding-block:calc((2.5rem - var(--space-5))/2 - var(--border-2));
+.bp_combobox_module_container--ec81c .bp_combobox_module_comboboxContainer--ec81c:not(:disabled).bp_combobox_module_error--ec81c,.bp_combobox_module_container--ec81c .bp_combobox_module_comboboxContainer--ec81c:not(:disabled):has([aria-invalid=true]){
+  background-color:var(--combobox-container-error-background-color);
+  border-bottom:var(--combobox-container-error-border-bottom-width) solid var(--combobox-container-error-border-color);
+  border-left:var(--combobox-container-error-border-left-width) solid var(--combobox-container-error-border-color);
+  border-right:var(--combobox-container-error-border-right-width) solid var(--combobox-container-error-border-color);
+  border-top:var(--combobox-container-error-border-top-width) solid var(--combobox-container-error-border-color);
+  padding-block:var(--combobox-container-error-padding-block);
 }
-.bp_combobox_module_container--015a0 .bp_combobox_module_comboboxContainer--015a0 .bp_combobox_module_textInputWrapper--015a0{
+.bp_combobox_module_container--ec81c .bp_combobox_module_comboboxContainer--ec81c .bp_combobox_module_textInputWrapper--ec81c{
   align-items:center;
   display:flex;
   flex:content;
-  gap:var(--space-2);
+  gap:var(--combobox-text-input-wrapper-gap);
 }
-.bp_combobox_module_container--015a0 .bp_combobox_module_comboboxContainer--015a0 .bp_combobox_module_textInputWrapper--015a0 .bp_combobox_module_textInput--015a0{
-  background-color:initial;
+.bp_combobox_module_container--ec81c .bp_combobox_module_comboboxContainer--ec81c .bp_combobox_module_textInputWrapper--ec81c .bp_combobox_module_textInput--ec81c{
+  background-color:var(--combobox-text-input-background-color);
   border:none;
-  color:var(--text-text-on-light);
+  color:var(--combobox-text-input-color);
   font-family:var(--body-default-font-family);
   font-size:var(--body-default-font-size);
   font-weight:var(--body-default-font-weight);
-  height:var(--space-5);
+  height:var(--input-height);
   letter-spacing:var(--body-default-letter-spacing);
   line-height:var(--body-default-line-height);
   outline:none;
@@ -2235,94 +2418,97 @@
   text-transform:var(--body-default-text-case);
   width:100%;
 }
-.bp_combobox_module_container--015a0 .bp_combobox_module_comboboxContainer--015a0 .bp_combobox_module_textInputWrapper--015a0 .bp_combobox_module_errorIcon--015a0 path{
-  fill:var(--icon-icon-error-on-light);
+.bp_combobox_module_container--ec81c .bp_combobox_module_comboboxContainer--ec81c .bp_combobox_module_textInputWrapper--ec81c .bp_combobox_module_errorIcon--ec81c path{
+  fill:var(--combobox-error-icon-fill);
 }
-.bp_combobox_module_container--015a0 .bp_combobox_module_comboboxContainer--015a0 .bp_combobox_module_textInputWrapper--015a0 .bp_combobox_module_comboboxButtons--015a0{
+.bp_combobox_module_container--ec81c .bp_combobox_module_comboboxContainer--ec81c .bp_combobox_module_textInputWrapper--ec81c .bp_combobox_module_comboboxButtons--ec81c{
   align-items:center;
   display:flex;
   position:absolute;
-  right:var(--space-2);
-  top:var(--space-2);
+  right:var(--combobox-button-spacing);
+  top:var(--combobox-button-spacing);
 }
-.bp_combobox_module_container--015a0 .bp_combobox_module_comboboxContainer--015a0.bp_combobox_module_withChips--015a0{
-  max-height:calc(var(--space-2)*2 + var(--space-6)*3);
-  padding-block:calc((2.5rem - var(--space-7))/2 - var(--border-1));
+.bp_combobox_module_container--ec81c .bp_combobox_module_comboboxContainer--ec81c.bp_combobox_module_withChips--ec81c{
+  max-height:var(--combobox-container-with-chips-max-height);
+  padding-block:var(--combobox-container-with-chips-padding-block);
 }
-.bp_combobox_module_container--015a0 .bp_combobox_module_comboboxContainer--015a0.bp_combobox_module_withChips--015a0:not(:disabled).bp_combobox_module_error--015a0,.bp_combobox_module_container--015a0 .bp_combobox_module_comboboxContainer--015a0.bp_combobox_module_withChips--015a0:not(:disabled):has(input:focus){
-  padding-block:calc((2.5rem - var(--space-7))/2 - var(--border-2));
+.bp_combobox_module_container--ec81c .bp_combobox_module_comboboxContainer--ec81c.bp_combobox_module_withChips--ec81c:not(:disabled).bp_combobox_module_error--ec81c{
+  padding-block:var(--combobox-container-with-chips-error-padding-block);
 }
-.bp_combobox_module_container--015a0 .bp_combobox_module_inlineError--015a0{
-  margin-block-start:var(--space-2);
+.bp_combobox_module_container--ec81c .bp_combobox_module_comboboxContainer--ec81c.bp_combobox_module_withChips--ec81c:not(:disabled):has(input:focus){
+  padding-block:var(--combobox-container-with-chips-focus-padding-block);
+}
+.bp_combobox_module_container--ec81c .bp_combobox_module_inlineError--ec81c{
+  margin-block-start:var(--combobox-inline-error-margin-block-start);
 }
 
-.bp_combobox_module_popover--015a0{
-  background-color:var(--surface-menu-surface);
-  border:var(--border-1) solid var(--border-card-border);
-  border-radius:var(--radius-3);
-  box-shadow:var(--dropshadow-3);
+.bp_combobox_module_popover--ec81c{
+  background-color:var(--combobox-popover-background-color);
+  border:var(--combobox-popover-border);
+  border-radius:var(--combobox-popover-border-radius);
+  box-shadow:var(--combobox-popover-box-shadow);
   font-family:var(--body-default-font-family);
   font-size:var(--body-default-font-size);
   font-weight:var(--body-default-font-weight);
   letter-spacing:var(--body-default-letter-spacing);
   line-height:var(--body-default-line-height);
-  max-height:min(var(--popover-available-height, 2.25rem), 12.5rem);
+  max-height:var(--combobox-popover-max-height);
   overflow:auto;
-  padding-block:var(--space-3);
-  padding-inline:var(--space-3);
+  padding-block:var(--combobox-popover-padding-block);
+  padding-inline:var(--combobox-popover-padding-inline);
   -webkit-text-decoration:var(--body-default-text-decoration);
           text-decoration:var(--body-default-text-decoration);
   text-transform:var(--body-default-text-case);
-  z-index:380;
+  z-index:var(--z-index-popover);
 }
-.bp_combobox_module_popover--015a0 .bp_combobox_module_option--015a0{
-  border:var(--border-2) solid #0000;
-  border-radius:var(--radius-3);
+.bp_combobox_module_popover--ec81c .bp_combobox_module_option--ec81c{
+  border:var(--combobox-option-border);
+  border-radius:var(--combobox-option-border-radius);
   box-sizing:border-box;
   cursor:pointer;
   outline:none;
   overflow-wrap:break-word;
-  padding-block:var(--space-2);
-  padding-inline:var(--space-2);
+  padding-block:var(--combobox-option-padding-block);
+  padding-inline:var(--combobox-option-padding-inline);
   position:relative;
   -webkit-user-select:none;
           user-select:none;
   width:100%;
 }
-.bp_combobox_module_popover--015a0 .bp_combobox_module_option--015a0[aria-disabled]{
-  opacity:60%;
+.bp_combobox_module_popover--ec81c .bp_combobox_module_option--ec81c[aria-disabled]{
+  opacity:var(--combobox-option-disabled-opacity);
 }
-.bp_combobox_module_popover--015a0 .bp_combobox_module_option--015a0[data-active-item]:not([aria-disabled]){
-  background-color:var(--surface-menu-surface-focus);
-  border:var(--border-2) solid var(--outline-focus-on-light);
+.bp_combobox_module_popover--ec81c .bp_combobox_module_option--ec81c[data-active-item]:not([aria-disabled]){
+  background-color:var(--combobox-option-active-background-color);
+  border:var(--combobox-option-active-border);
 }
-.bp_combobox_module_popover--015a0 .bp_combobox_module_option--015a0:active{
-  background-color:var(--surface-menu-surface-hover);
-  border:var(--border-2) solid #0000;
+.bp_combobox_module_popover--ec81c .bp_combobox_module_option--ec81c:active{
+  background-color:var(--combobox-option-hover-background-color);
+  border:var(--combobox-option-border);
 }
-.bp_combobox_module_popover--015a0 .bp_combobox_module_option--015a0:hover{
-  background-color:var(--surface-menu-surface-hover);
+.bp_combobox_module_popover--ec81c .bp_combobox_module_option--ec81c:hover{
+  background-color:var(--combobox-option-hover-background-color);
 }
-.bp_combobox_module_popover--015a0 .bp_combobox_module_option--015a0 .bp_combobox_module_indicator--015a0{
+.bp_combobox_module_popover--ec81c .bp_combobox_module_option--ec81c .bp_combobox_module_indicator--ec81c{
   align-items:center;
   display:flex;
-  height:var(--size-9);
+  height:var(--combobox-option-indicator-height);
   justify-content:center;
-  left:var(--space-2);
+  left:var(--combobox-option-indicator-left);
   position:absolute;
-  top:0;
+  top:var(--combobox-option-indicator-top);
 }
-.bp_combobox_module_popover--015a0 .bp_combobox_module_option--015a0 .bp_combobox_module_indicator--015a0 .bp_combobox_module_indicatorIcon--015a0 path{
-  fill:var(--icon-icon-on-light);
+.bp_combobox_module_popover--ec81c .bp_combobox_module_option--ec81c .bp_combobox_module_indicator--ec81c .bp_combobox_module_indicatorIcon--ec81c path{
+  fill:var(--combobox-option-indicator-icon-fill);
 }
-.bp_combobox_module_popover--015a0 .bp_combobox_module_optionWithIndicator--015a0{
-  padding-inline:var(--space-10) var(--space-2);
+.bp_combobox_module_popover--ec81c .bp_combobox_module_optionWithIndicator--ec81c{
+  padding-inline:var(--combobox-option-with-indicator-padding-inline);
 }
-.bp_combobox_module_popover--015a0 .bp_combobox_module_loadingIndicator--015a0{
-  position:unset;
+.bp_combobox_module_popover--ec81c .bp_combobox_module_loadingIndicator--ec81c{
+  position:var(--combobox-loading-indicator-position);
 }
-.bp_combobox_module_popover--015a0 .bp_combobox_module_noResultOption--015a0{
-  color:var(--text-text-on-light);
+.bp_combobox_module_popover--ec81c .bp_combobox_module_noResultOption--ec81c{
+  color:var(--combobox-no-result-option-color);
   -webkit-user-select:none;
           user-select:none;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@box/blueprint-web",
-    "version": "12.40.1",
+    "version": "12.41.1",
     "type": "module",
     "license": "SEE LICENSE IN LICENSE",
     "publishConfig": {