@box/blueprint-web 12.86.0 → 12.87.0

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

@@ -1,7 +1,8 @@
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { SelectItemCheck, SelectItem, ComboboxItem, useComboboxStore, useSelectStore, PopoverAnchor, Combobox as Combobox$1, ComboboxCancel, SelectList, ComboboxPopover } from '@ariakit/react';
 import { SelectRenderer } from '@ariakit/react-core/select/select-renderer';
-import { Checkmark, XMark } from '@box/blueprint-web-assets/icons/Fill';
+import { Checkmark, XMark as XMark$1 } from '@box/blueprint-web-assets/icons/Fill';
+import { XMark } from '@box/blueprint-web-assets/icons/Medium';
 import { bpIconIconOnLight, IconIconOnLight } from '@box/blueprint-web-assets/tokens/tokens';
 import clsx from 'clsx';
 import React__default, { forwardRef, useMemo, useRef, useCallback, useEffect } from 'react';
@@ -395,7 +396,7 @@ const RootInner = ({
               render: cancelProps => jsx(IconButton, {
                 ...cancelProps,
                 "aria-label": clearButtonAriaLabel,
-                icon: XMark,
+                icon: enableModernizedComponents ? XMark : XMark$1,
                 size: "x-small"
               }),
               store: comboboxStore

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

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

package/dist/lib-esm/index.css

@@ -2573,7 +2573,7 @@
   margin-block-start:var(--text-area-container-row-gap);
 }
 
-.bp_combobox_module_container--32caf[data-modern=false]{
+.bp_combobox_module_container--2f327[data-modern=false]{
   --max-lines:3;
   --input-height:var(--space-5);
   --chip-height:var(--space-7);
@@ -2629,7 +2629,7 @@
   --combobox-button-spacing:var(--space-2);
 }
 
-.bp_combobox_module_container--32caf[data-modern=true]{
+.bp_combobox_module_container--2f327[data-modern=true]{
   --max-lines:3;
   --bp-innershadow-01:var(--innershadow-1);
   --bp-input-height:var(--bp-space-050);
@@ -2691,7 +2691,7 @@
   --combobox-button-spacing:var(--bp-space-020);
 }
 
-.bp_combobox_module_popover--32caf[data-modern=false]{
+.bp_combobox_module_popover--2f327[data-modern=false]{
   --option-height:2.25rem;
   --dropdown-max-height:12.5rem;
   --combobox-popover-max-height:min(
@@ -2719,12 +2719,13 @@
   --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-option-text-color:var(--text-text-on-light);
   --combobox-loading-indicator-position:unset;
   --combobox-no-result-option-color:var(--text-text-on-light);
   --combobox-popover-backdrop-filter:none;
 }
 
-.bp_combobox_module_popover--32caf[data-modern=true]{
+.bp_combobox_module_popover--2f327[data-modern=true]{
   --option-height:2.25rem;
   --dropdown-max-height:12.5rem;
   --bp-dropshadow-03:var(--dropshadow-3);
@@ -2753,12 +2754,13 @@
   --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-option-text-color:var(--bp-text-text-on-light);
   --combobox-loading-indicator-position:unset;
   --combobox-no-result-option-color:var(--bp-text-text-on-light);
   --combobox-popover-backdrop-filter:blur(16px);
 }
 
-.bp_combobox_module_container--32caf{
+.bp_combobox_module_container--2f327{
   display:flex;
   flex-direction:column;
   font-family:var(--body-default-font-family);
@@ -2770,10 +2772,10 @@
           text-decoration:var(--body-default-text-decoration);
   text-transform:var(--body-default-text-case);
 }
-.bp_combobox_module_container--32caf.bp_combobox_module_disabled--32caf{
+.bp_combobox_module_container--2f327.bp_combobox_module_disabled--2f327{
   opacity:60%;
 }
-.bp_combobox_module_container--32caf .bp_combobox_module_label--32caf{
+.bp_combobox_module_container--2f327 .bp_combobox_module_label--2f327{
   color:var(--combobox-label-color);
   flex:0 0 fit-content;
   font-family:var(--body-default-bold-font-family);
@@ -2786,10 +2788,10 @@
           text-decoration:var(--body-default-bold-text-decoration);
   text-transform:var(--body-default-bold-text-case);
 }
-.bp_combobox_module_container--32caf .bp_combobox_module_label--32caf:not(.bp_combobox_module_hiddenLabel--32caf){
+.bp_combobox_module_container--2f327 .bp_combobox_module_label--2f327:not(.bp_combobox_module_hiddenLabel--2f327){
   margin-block-end:var(--combobox-label-margin-block-end);
 }
-.bp_combobox_module_container--32caf .bp_combobox_module_comboboxContainer--32caf{
+.bp_combobox_module_container--2f327 .bp_combobox_module_comboboxContainer--2f327{
   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);
@@ -2806,15 +2808,15 @@
   padding-inline:var(--combobox-container-padding-inline);
   position:relative;
 }
-.bp_combobox_module_container--32caf .bp_combobox_module_comboboxContainer--32caf.bp_combobox_module_withComboboxButtons--32caf{
+.bp_combobox_module_container--2f327 .bp_combobox_module_comboboxContainer--2f327.bp_combobox_module_withComboboxButtons--2f327{
   padding-inline-end:var(--combobox-container-padding-inline-end-with-buttons);
 }
-.bp_combobox_module_container--32caf .bp_combobox_module_comboboxContainer--32caf:not(:disabled):has(input:focus){
+.bp_combobox_module_container--2f327 .bp_combobox_module_comboboxContainer--2f327: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--32caf .bp_combobox_module_comboboxContainer--32caf:not(:disabled).bp_combobox_module_error--32caf,.bp_combobox_module_container--32caf .bp_combobox_module_comboboxContainer--32caf:not(:disabled):has([aria-invalid=true]){
+.bp_combobox_module_container--2f327 .bp_combobox_module_comboboxContainer--2f327:not(:disabled).bp_combobox_module_error--2f327,.bp_combobox_module_container--2f327 .bp_combobox_module_comboboxContainer--2f327: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);
@@ -2822,19 +2824,19 @@
   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--32caf .bp_combobox_module_comboboxContainer--32caf:not(:disabled):not(:has(input:focus)):has(input:hover):not(.bp_combobox_module_error--32caf):not(:has([aria-invalid=true])){
+.bp_combobox_module_container--2f327 .bp_combobox_module_comboboxContainer--2f327:not(:disabled):not(:has(input:focus)):has(input:hover):not(.bp_combobox_module_error--2f327):not(:has([aria-invalid=true])){
   border-bottom:var(--combobox-container-border-bottom-width) solid var(--combobox-container-border-color-hover);
   border-left:var(--combobox-container-border-left-width) solid var(--combobox-container-border-color-hover);
   border-right:var(--combobox-container-border-right-width) solid var(--combobox-container-border-color-hover);
   border-top:var(--combobox-container-border-top-width) solid var(--combobox-container-border-color-hover);
 }
-.bp_combobox_module_container--32caf .bp_combobox_module_comboboxContainer--32caf .bp_combobox_module_textInputWrapper--32caf{
+.bp_combobox_module_container--2f327 .bp_combobox_module_comboboxContainer--2f327 .bp_combobox_module_textInputWrapper--2f327{
   align-items:center;
   display:flex;
   flex:content;
   gap:var(--combobox-text-input-wrapper-gap);
 }
-.bp_combobox_module_container--32caf .bp_combobox_module_comboboxContainer--32caf .bp_combobox_module_textInputWrapper--32caf .bp_combobox_module_textInput--32caf{
+.bp_combobox_module_container--2f327 .bp_combobox_module_comboboxContainer--2f327 .bp_combobox_module_textInputWrapper--2f327 .bp_combobox_module_textInput--2f327{
   background-color:var(--combobox-text-input-background-color);
   border:none;
   color:var(--combobox-text-input-color);
@@ -2851,31 +2853,31 @@
   text-transform:var(--body-default-text-case);
   width:100%;
 }
-.bp_combobox_module_container--32caf .bp_combobox_module_comboboxContainer--32caf .bp_combobox_module_textInputWrapper--32caf .bp_combobox_module_errorIcon--32caf path{
+.bp_combobox_module_container--2f327 .bp_combobox_module_comboboxContainer--2f327 .bp_combobox_module_textInputWrapper--2f327 .bp_combobox_module_errorIcon--2f327 path{
   fill:var(--combobox-error-icon-fill);
 }
-.bp_combobox_module_container--32caf .bp_combobox_module_comboboxContainer--32caf .bp_combobox_module_textInputWrapper--32caf .bp_combobox_module_comboboxButtons--32caf{
+.bp_combobox_module_container--2f327 .bp_combobox_module_comboboxContainer--2f327 .bp_combobox_module_textInputWrapper--2f327 .bp_combobox_module_comboboxButtons--2f327{
   align-items:center;
   display:flex;
   position:absolute;
   right:var(--combobox-button-spacing);
   top:var(--combobox-button-spacing);
 }
-.bp_combobox_module_container--32caf .bp_combobox_module_comboboxContainer--32caf.bp_combobox_module_withChips--32caf{
+.bp_combobox_module_container--2f327 .bp_combobox_module_comboboxContainer--2f327.bp_combobox_module_withChips--2f327{
   max-height:var(--combobox-container-with-chips-max-height);
   padding-block:var(--combobox-container-with-chips-padding-block);
 }
-.bp_combobox_module_container--32caf .bp_combobox_module_comboboxContainer--32caf.bp_combobox_module_withChips--32caf:not(:disabled).bp_combobox_module_error--32caf{
+.bp_combobox_module_container--2f327 .bp_combobox_module_comboboxContainer--2f327.bp_combobox_module_withChips--2f327:not(:disabled).bp_combobox_module_error--2f327{
   padding-block:var(--combobox-container-with-chips-error-padding-block);
 }
-.bp_combobox_module_container--32caf .bp_combobox_module_comboboxContainer--32caf.bp_combobox_module_withChips--32caf:not(:disabled):has(input:focus){
+.bp_combobox_module_container--2f327 .bp_combobox_module_comboboxContainer--2f327.bp_combobox_module_withChips--2f327:not(:disabled):has(input:focus){
   padding-block:var(--combobox-container-with-chips-focus-padding-block);
 }
-.bp_combobox_module_container--32caf .bp_combobox_module_inlineError--32caf{
+.bp_combobox_module_container--2f327 .bp_combobox_module_inlineError--2f327{
   margin-block-start:var(--combobox-inline-error-margin-block-start);
 }
 
-.bp_combobox_module_popover--32caf{
+.bp_combobox_module_popover--2f327{
   backdrop-filter:var(--combobox-popover-backdrop-filter);
   background-color:var(--combobox-popover-background-color);
   border:var(--combobox-popover-border);
@@ -2895,10 +2897,11 @@
   text-transform:var(--body-default-text-case);
   z-index:var(--z-index-popover);
 }
-.bp_combobox_module_popover--32caf .bp_combobox_module_option--32caf{
+.bp_combobox_module_popover--2f327 .bp_combobox_module_option--2f327{
   border:var(--combobox-option-border);
   border-radius:var(--combobox-option-border-radius);
   box-sizing:border-box;
+  color:var(--combobox-option-text-color);
   cursor:pointer;
   outline:none;
   overflow-wrap:break-word;
@@ -2909,21 +2912,21 @@
           user-select:none;
   width:100%;
 }
-.bp_combobox_module_popover--32caf .bp_combobox_module_option--32caf[aria-disabled]{
+.bp_combobox_module_popover--2f327 .bp_combobox_module_option--2f327[aria-disabled]{
   opacity:var(--combobox-option-disabled-opacity);
 }
-.bp_combobox_module_popover--32caf .bp_combobox_module_option--32caf[data-active-item]:not([aria-disabled]){
+.bp_combobox_module_popover--2f327 .bp_combobox_module_option--2f327[data-active-item]:not([aria-disabled]){
   background-color:var(--combobox-option-active-background-color);
   border:var(--combobox-option-active-border);
 }
-.bp_combobox_module_popover--32caf .bp_combobox_module_option--32caf:active{
+.bp_combobox_module_popover--2f327 .bp_combobox_module_option--2f327:active{
   background-color:var(--combobox-option-hover-background-color);
   border:var(--combobox-option-border);
 }
-.bp_combobox_module_popover--32caf .bp_combobox_module_option--32caf:hover{
+.bp_combobox_module_popover--2f327 .bp_combobox_module_option--2f327:hover{
   background-color:var(--combobox-option-hover-background-color);
 }
-.bp_combobox_module_popover--32caf .bp_combobox_module_option--32caf .bp_combobox_module_indicator--32caf{
+.bp_combobox_module_popover--2f327 .bp_combobox_module_option--2f327 .bp_combobox_module_indicator--2f327{
   align-items:center;
   display:flex;
   height:var(--combobox-option-indicator-height);
@@ -2932,16 +2935,16 @@
   position:absolute;
   top:var(--combobox-option-indicator-top);
 }
-.bp_combobox_module_popover--32caf .bp_combobox_module_option--32caf .bp_combobox_module_indicator--32caf .bp_combobox_module_indicatorIcon--32caf path{
+.bp_combobox_module_popover--2f327 .bp_combobox_module_option--2f327 .bp_combobox_module_indicator--2f327 .bp_combobox_module_indicatorIcon--2f327 path{
   fill:var(--combobox-option-indicator-icon-fill);
 }
-.bp_combobox_module_popover--32caf .bp_combobox_module_optionWithIndicator--32caf{
+.bp_combobox_module_popover--2f327 .bp_combobox_module_optionWithIndicator--2f327{
   padding-inline:var(--combobox-option-with-indicator-padding-inline);
 }
-.bp_combobox_module_popover--32caf .bp_combobox_module_loadingIndicator--32caf{
+.bp_combobox_module_popover--2f327 .bp_combobox_module_loadingIndicator--2f327{
   position:var(--combobox-loading-indicator-position);
 }
-.bp_combobox_module_popover--32caf .bp_combobox_module_noResultOption--32caf{
+.bp_combobox_module_popover--2f327 .bp_combobox_module_noResultOption--2f327{
   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.86.0",
+    "version": "12.87.0",
     "type": "module",
     "license": "SEE LICENSE IN LICENSE",
     "publishConfig": {