@box/blueprint-web 12.40.0 → 12.41.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 (4) hide show
  1. package/dist/lib-esm/combobox/combobox.js +6 -0
  2. package/dist/lib-esm/combobox/combobox.module.js +1 -1
  3. package/dist/lib-esm/index.css +269 -85
  4. package/package.json +1 -1
package/dist/lib-esm/combobox/combobox.js CHANGED
@@ -4,6 +4,7 @@ import { SelectRenderer } from '@ariakit/react-core/select/select-renderer';
4
4
  import { Checkmark, XMark } from '@box/blueprint-web-assets/icons/Fill';
5
5
  import clsx from 'clsx';
6
6
  import React__default, { forwardRef, useMemo, useRef, useCallback, useEffect } from 'react';
7
+ import { useBlueprintModernization } from '../blueprint-modernization-context/useBlueprintModernization.js';
7
8
  import { InputChip } from '../input-chip/input-chip.js';
8
9
  import { LoadingIndicator } from '../loading-indicator/loading-indicator.js';
9
10
  import { IconButton } from '../primitives/icon-button/icon-button.js';
@@ -91,6 +92,9 @@ const RootInner = ({
91
92
  getPopoverRef?.(node);
92
93
  }, [getPopoverRef]);
93
94
  const hasError = !!error && !disabled;
95
+ const {
96
+ enableModernizedComponents
97
+ } = useBlueprintModernization();
94
98
  const comboboxStore = useComboboxStore({
95
99
  // Input state
96
100
  defaultValue: defaultInputValue,
@@ -415,10 +419,12 @@ const RootInner = ({
415
419
  className: clsx(styles.container, {
416
420
  [styles.disabled]: disabled
417
421
  }, className),
422
+ "data-modern": enableModernizedComponents,
418
423
  children: [inputComponent, showLoading || filteredOptions.length > 0 || filteredOptions.length <= 0 && noResultMessage ? jsx(ComboboxPopover, {
419
424
  ref: popoverRefCallback,
420
425
  "aria-labelledby": comboboxId,
421
426
  className: styles.popover,
427
+ "data-modern": enableModernizedComponents,
422
428
  fitViewport: true,
423
429
  gutter: 8,
424
430
  hideOnEscape: hideOnEscape,
package/dist/lib-esm/combobox/combobox.module.js CHANGED
@@ -1,4 +1,4 @@
1
1
  import '../index.css';
2
- 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"};
2
+ 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"};
3
3
 
4
4
  export { styles as default };
package/dist/lib-esm/index.css CHANGED
@@ -2148,7 +2148,188 @@
2148
2148
  margin-block-start:var(--text-area-container-row-gap);
2149
2149
  }
2150
2150
 
2151
- .bp_combobox_module_container--015a0{
2151
+ .bp_combobox_module_container--ec81c[data-modern=false]{
2152
+ --max-lines:3;
2153
+ --input-height:var(--space-5);
2154
+ --chip-height:var(--space-7);
2155
+ --combobox-height:2.5rem;
2156
+ --combobox-space:calc((var(--combobox-height) - var(--input-height))/2);
2157
+ --combobox-with-chips-space:calc((var(--combobox-height) - var(--chip-height))/2);
2158
+ --combobox-border-width:var(--border-1);
2159
+ --combobox-border-width-error:var(--border-2);
2160
+ --combobox-border-width-focus:var(--border-2);
2161
+ --combobox-label-color:var(--text-text-on-light);
2162
+ --combobox-label-margin-block-end:var(--space-2);
2163
+ --combobox-container-contents-gap:var(--space-2);
2164
+ --combobox-container-background-color:var(--surface-dropdown-surface);
2165
+ --combobox-container-border-top-width:var(--blueprint-combobox-border-top-width, var(--combobox-border-width));
2166
+ --combobox-container-border-right-width:var(--blueprint-combobox-border-right-width, var(--combobox-border-width));
2167
+ --combobox-container-border-bottom-width:var(
2168
+ --blueprint-combobox-border-bottom-width,
2169
+ var(--combobox-border-width)
2170
+ );
2171
+ --combobox-container-border-left-width:var(--blueprint-combobox-border-left-width, var(--combobox-border-width));
2172
+ --combobox-container-border-color:var(--blueprint-combobox-border-color, var(--border-input-border));
2173
+ --combobox-container-border-radius:var(--blueprint-combobox-input-radius, var(--radius-2));
2174
+ --combobox-container-box-shadow:var(--innershadow-1);
2175
+ --combobox-container-padding-block:calc(var(--combobox-space) - var(--combobox-border-width));
2176
+ --combobox-container-padding-inline:var(--space-3);
2177
+ --combobox-container-padding-inline-end-with-buttons:var(--space-10);
2178
+ --combobox-container-focus-background-color:var(--surface-dropdown-surface-focus);
2179
+ --combobox-container-focus-border:var(--combobox-border-width-focus) solid var(--outline-focus-on-light);
2180
+ --combobox-padding-block-focus:calc(var(--combobox-space) - var(--combobox-border-width-focus));
2181
+ --combobox-container-focus-padding-block:var(--combobox-padding-block-focus);
2182
+ --combobox-container-error-background-color:var(--surface-dropdown-surface-error);
2183
+ --combobox-container-error-border-top-width:var(--blueprint-combobox-border-error-top-width, var(--border-2));
2184
+ --combobox-container-error-border-right-width:var(--blueprint-combobox-border-error-right-width, var(--border-2));
2185
+ --combobox-container-error-border-bottom-width:var(
2186
+ --blueprint-combobox-border-error-bottom-width,
2187
+ var(--border-2)
2188
+ );
2189
+ --combobox-container-error-border-left-width:var(--blueprint-combobox-border-error-left-width, var(--border-2));
2190
+ --combobox-container-error-border-color:var(--border-input-border-error);
2191
+ --combobox-padding-block-error:calc(var(--combobox-space) - var(--combobox-border-width-error));
2192
+ --combobox-container-error-padding-block:var(--combobox-padding-block-error);
2193
+ --combobox-container-with-chips-max-height:calc((var(--max-lines) - 1)*var(--space-2) + var(--max-lines)*var(--space-6));
2194
+ --combobox-with-chips-padding-block:calc(var(--combobox-with-chips-space) - var(--combobox-border-width));
2195
+ --combobox-container-with-chips-padding-block:var(--combobox-with-chips-padding-block);
2196
+ --combobox-container-with-chips-error-padding-block:calc(var(--combobox-with-chips-space) - var(--combobox-border-width-error));
2197
+ --combobox-container-with-chips-focus-padding-block:calc(var(--combobox-with-chips-space) - var(--combobox-border-width-focus));
2198
+ --combobox-text-input-color:var(--text-text-on-light);
2199
+ --combobox-text-input-wrapper-gap:var(--space-2);
2200
+ --combobox-text-input-background-color:#0000;
2201
+ --combobox-error-icon-fill:var(--icon-icon-error-on-light);
2202
+ --combobox-inline-error-margin-block-start:var(--space-2);
2203
+ --combobox-button-spacing:var(--space-2);
2204
+ }
2205
+
2206
+ .bp_combobox_module_container--ec81c[data-modern=true]{
2207
+ --max-lines:3;
2208
+ --bp-innershadow-01:var(--innershadow-1);
2209
+ --bp-input-height:var(--bp-space-050);
2210
+ --bp-chip-height:var(--bp-space-070);
2211
+ --bp-combobox-height:2.5rem;
2212
+ --bp-combobox-space:calc((var(--bp-combobox-height) - var(--bp-input-height))/2);
2213
+ --bp-combobox-with-chips-space:calc((var(--bp-combobox-height) - var(--bp-chip-height))/2);
2214
+ --combobox-border-width:var(--bp-border-01);
2215
+ --combobox-border-width-error:var(--bp-border-02);
2216
+ --combobox-border-width-focus:var(--bp-border-02);
2217
+ --combobox-label-color:var(--bp-text-text-on-light);
2218
+ --combobox-label-margin-block-end:var(--bp-space-020);
2219
+ --combobox-container-contents-gap:var(--bp-space-020);
2220
+ --combobox-container-background-color:var(--bp-surface-combobox-surface);
2221
+ --combobox-container-border-top-width:var(--blueprint-combobox-border-top-width, var(--bp-border-01));
2222
+ --combobox-container-border-right-width:var(--blueprint-combobox-border-right-width, var(--bp-border-01));
2223
+ --combobox-container-border-bottom-width:var(--blueprint-combobox-border-bottom-width, var(--bp-border-01));
2224
+ --combobox-container-border-left-width:var(--blueprint-combobox-border-left-width, var(--bp-border-01));
2225
+ --combobox-container-border-color:var(
2226
+ --blueprint-combobox-border-color,
2227
+ var(--bp-border-combobox-border, var(--bp-gray-50))
2228
+ );
2229
+ --combobox-container-border-radius:var(--blueprint-combobox-input-radius, var(--bp-radius-06));
2230
+ --combobox-container-box-shadow:var(--bp-innershadow-01);
2231
+ --combobox-container-padding-block:calc(var(--bp-combobox-space) - var(--combobox-border-width));
2232
+ --combobox-container-padding-inline:var(--bp-space-030);
2233
+ --combobox-container-padding-inline-end-with-buttons:var(--bp-space-100);
2234
+ --combobox-container-focus-background-color:var(--bp-gray-white);
2235
+ --combobox-container-focus-border:var(--combobox-border-width-focus) solid var(--bp-outline-focus-on-light);
2236
+ --combobox-container-focus-padding-block:var(--bp-space-020);
2237
+ --combobox-container-error-background-color:var(--bp-gray-white);
2238
+ --combobox-container-error-border-top-width:var(--blueprint-combobox-border-error-top-width, var(--bp-border-02));
2239
+ --combobox-container-error-border-right-width:var(
2240
+ --blueprint-combobox-border-error-right-width,
2241
+ var(--bp-border-02)
2242
+ );
2243
+ --combobox-container-error-border-bottom-width:var(
2244
+ --blueprint-combobox-border-error-bottom-width,
2245
+ var(--bp-border-02)
2246
+ );
2247
+ --combobox-container-error-border-left-width:var(
2248
+ --blueprint-combobox-border-error-left-width,
2249
+ var(--bp-border-02)
2250
+ );
2251
+ --combobox-container-error-border-color:var(--bp-border-input-border-error);
2252
+ --combobox-padding-block-error:calc(var(--bp-combobox-space) - var(--combobox-border-width-error));
2253
+ --combobox-container-error-padding-block:var(--combobox-padding-block-error);
2254
+ --combobox-container-with-chips-max-height:calc((var(--max-lines) - 1)*var(--bp-space-020) + var(--max-lines)*var(--bp-space-060));
2255
+ --combobox-with-chips-padding-block:calc(var(--bp-combobox-with-chips-space) - var(--combobox-border-width));
2256
+ --combobox-container-with-chips-padding-block:var(--combobox-with-chips-padding-block);
2257
+ --combobox-container-with-chips-error-padding-block:calc(var(--bp-combobox-with-chips-space) - var(--combobox-border-width-error));
2258
+ --combobox-container-with-chips-focus-padding-block:calc(var(--bp-combobox-with-chips-space) - var(--combobox-border-width-focus));
2259
+ --combobox-text-input-color:var(--bp-text-text-on-light);
2260
+ --combobox-text-input-wrapper-gap:var(--bp-space-020);
2261
+ --combobox-text-input-background-color:#0000;
2262
+ --combobox-error-icon-fill:var(--bp-icon-icon-error-on-light);
2263
+ --combobox-inline-error-margin-block-start:var(--bp-space-020);
2264
+ --combobox-button-spacing:var(--bp-space-020);
2265
+ }
2266
+
2267
+ .bp_combobox_module_popover--ec81c[data-modern=false]{
2268
+ --option-height:2.25rem;
2269
+ --dropdown-max-height:12.5rem;
2270
+ --combobox-popover-max-height:min(
2271
+ var(--popover-available-height, var(--option-height)),
2272
+ var(--dropdown-max-height)
2273
+ );
2274
+ --combobox-popover-background-color:var(--surface-menu-surface);
2275
+ --combobox-popover-border:var(--border-1) solid var(--border-card-border);
2276
+ --combobox-popover-border-radius:var(--radius-3);
2277
+ --combobox-popover-padding-block:var(--space-3);
2278
+ --combobox-popover-padding-inline:var(--space-3);
2279
+ --combobox-popover-box-shadow:var(--dropshadow-3);
2280
+ --combobox-option-border:var(--border-2) solid #0000;
2281
+ --combobox-option-border-radius:var(--radius-3);
2282
+ --combobox-option-padding-block:var(--space-2);
2283
+ --combobox-option-padding-inline:var(--space-2);
2284
+ --combobox-option-disabled-opacity:tokens.$disabled-opacity;
2285
+ --combobox-option-active-background-color:var(--surface-menu-surface-focus);
2286
+ --combobox-option-active-border:var(--border-2) solid var(--outline-focus-on-light);
2287
+ --combobox-option-active-padding-block:var(--space-2);
2288
+ --combobox-option-active-padding-inline:var(--space-2);
2289
+ --combobox-option-hover-background-color:var(--surface-menu-surface-hover);
2290
+ --combobox-option-indicator-top:0;
2291
+ --combobox-option-indicator-left:var(--space-2);
2292
+ --combobox-option-indicator-height:var(--size-9);
2293
+ --combobox-option-indicator-icon-fill:var(--icon-icon-on-light);
2294
+ --combobox-option-with-indicator-padding-inline:var(--space-10) var(--space-2);
2295
+ --combobox-loading-indicator-position:unset;
2296
+ --combobox-no-result-option-color:var(--text-text-on-light);
2297
+ }
2298
+
2299
+ .bp_combobox_module_popover--ec81c[data-modern=true]{
2300
+ --option-height:2.25rem;
2301
+ --dropdown-max-height:12.5rem;
2302
+ --bp-dropshadow-03:var(--dropshadow-3);
2303
+ --combobox-popover-max-height:min(
2304
+ var(--popover-available-height, var(--option-height)),
2305
+ var(--dropdown-max-height)
2306
+ );
2307
+ --combobox-popover-background-color:var(--bp-surface-menu-surface);
2308
+ --combobox-popover-border:var(--bp-border-01) solid var(--bp-border-menu-border);
2309
+ --combobox-popover-border-radius:var(--bp-radius-10);
2310
+ --combobox-popover-padding-block:var(--bp-space-030);
2311
+ --combobox-popover-padding-inline:var(--bp-space-030);
2312
+ --combobox-popover-box-shadow:var(--bp-dropshadow-03);
2313
+ --combobox-option-border:var(--bp-border-02) solid #0000;
2314
+ --combobox-option-border-radius:var(--bp-radius-10);
2315
+ --combobox-option-padding-block:var(--bp-space-020);
2316
+ --combobox-option-padding-inline:var(--bp-space-020);
2317
+ --combobox-option-disabled-opacity:.3;
2318
+ --combobox-option-active-background-color:var(--bp-surface-menu-item-surface-pressed);
2319
+ --combobox-option-active-border:var(--bp-border-02) solid var(--bp-outline-focus-on-light);
2320
+ --combobox-option-active-padding-block:var(--bp-space-020);
2321
+ --combobox-option-active-padding-inline:var(--bp-space-020);
2322
+ --combobox-option-hover-background-color:var(--bp-surface-menu-item-surface-hover);
2323
+ --combobox-option-indicator-top:0;
2324
+ --combobox-option-indicator-left:var(--bp-space-020);
2325
+ --combobox-option-indicator-height:var(--bp-size-090);
2326
+ --combobox-option-indicator-icon-fill:var(--bp-icon-icon-on-light);
2327
+ --combobox-option-with-indicator-padding-inline:var(--bp-space-100) var(--bp-space-020);
2328
+ --combobox-loading-indicator-position:unset;
2329
+ --combobox-no-result-option-color:var(--bp-text-text-on-light);
2330
+ }
2331
+
2332
+ .bp_combobox_module_container--ec81c{
2152
2333
  display:flex;
2153
2334
  flex-direction:column;
2154
2335
  font-family:var(--body-default-font-family);
@@ -2160,11 +2341,11 @@
2160
2341
  text-decoration:var(--body-default-text-decoration);
2161
2342
  text-transform:var(--body-default-text-case);
2162
2343
  }
2163
- .bp_combobox_module_container--015a0.bp_combobox_module_disabled--015a0{
2344
+ .bp_combobox_module_container--ec81c.bp_combobox_module_disabled--ec81c{
2164
2345
  opacity:60%;
2165
2346
  }
2166
- .bp_combobox_module_container--015a0 .bp_combobox_module_label--015a0{
2167
- color:var(--text-text-on-light);
2347
+ .bp_combobox_module_container--ec81c .bp_combobox_module_label--ec81c{
2348
+ color:var(--combobox-label-color);
2168
2349
  flex:0 0 fit-content;
2169
2350
  font-family:var(--body-default-bold-font-family);
2170
2351
  font-size:var(--body-default-bold-font-size);
@@ -2176,56 +2357,56 @@
2176
2357
  text-decoration:var(--body-default-bold-text-decoration);
2177
2358
  text-transform:var(--body-default-bold-text-case);
2178
2359
  }
2179
- .bp_combobox_module_container--015a0 .bp_combobox_module_label--015a0:not(.bp_combobox_module_hiddenLabel--015a0){
2180
- margin-block-end:var(--space-2);
2181
- }
2182
- .bp_combobox_module_container--015a0 .bp_combobox_module_comboboxContainer--015a0{
2183
- background-color:var(--surface-dropdown-surface);
2184
- border-bottom:var(--blueprint-combobox-border-bottom-width, var(--border-1)) solid var(--blueprint-combobox-border-color, var(--border-input-border));
2185
- border-left:var(--blueprint-combobox-border-left-width, var(--border-1)) solid var(--blueprint-combobox-border-color, var(--border-input-border));
2186
- border-radius:var(--blueprint-combobox-input-radius, var(--radius-2));
2187
- border-right:var(--blueprint-combobox-border-right-width, var(--border-1)) solid var(--blueprint-combobox-border-color, var(--border-input-border));
2188
- border-top:var(--blueprint-combobox-border-top-width, var(--border-1)) solid var(--blueprint-combobox-border-color, var(--border-input-border));
2189
- box-shadow:var(--innershadow-1);
2360
+ .bp_combobox_module_container--ec81c .bp_combobox_module_label--ec81c:not(.bp_combobox_module_hiddenLabel--ec81c){
2361
+ margin-block-end:var(--combobox-label-margin-block-end);
2362
+ }
2363
+ .bp_combobox_module_container--ec81c .bp_combobox_module_comboboxContainer--ec81c{
2364
+ background-color:var(--combobox-container-background-color);
2365
+ border-bottom:var(--combobox-container-border-bottom-width) solid var(--combobox-container-border-color);
2366
+ border-left:var(--combobox-container-border-left-width) solid var(--combobox-container-border-color);
2367
+ border-radius:var(--combobox-container-border-radius);
2368
+ border-right:var(--combobox-container-border-right-width) solid var(--combobox-container-border-color);
2369
+ border-top:var(--combobox-container-border-top-width) solid var(--combobox-container-border-color);
2370
+ box-shadow:var(--combobox-container-box-shadow);
2190
2371
  cursor:text;
2191
2372
  display:flex;
2192
2373
  flex-wrap:wrap;
2193
- gap:var(--space-2);
2374
+ gap:var(--combobox-container-contents-gap);
2194
2375
  overflow-y:auto;
2195
- padding-block:calc((2.5rem - var(--space-5))/2 - var(--border-1));
2196
- padding-inline:var(--space-3);
2376
+ padding-block:var(--combobox-container-padding-block);
2377
+ padding-inline:var(--combobox-container-padding-inline);
2197
2378
  position:relative;
2198
2379
  }
2199
- .bp_combobox_module_container--015a0 .bp_combobox_module_comboboxContainer--015a0.bp_combobox_module_withComboboxButtons--015a0{
2200
- padding-inline-end:var(--space-10);
2380
+ .bp_combobox_module_container--ec81c .bp_combobox_module_comboboxContainer--ec81c.bp_combobox_module_withComboboxButtons--ec81c{
2381
+ padding-inline-end:var(--combobox-container-padding-inline-end-with-buttons);
2201
2382
  }
2202
- .bp_combobox_module_container--015a0 .bp_combobox_module_comboboxContainer--015a0:not(:disabled):has(input:focus){
2203
- background-color:var(--surface-dropdown-surface-focus);
2204
- border:var(--border-2) solid var(--outline-focus-on-light);
2205
- padding-block:calc((2.5rem - var(--space-5))/2 - var(--border-2));
2383
+ .bp_combobox_module_container--ec81c .bp_combobox_module_comboboxContainer--ec81c:not(:disabled):has(input:focus){
2384
+ background-color:var(--combobox-container-focus-background-color);
2385
+ border:var(--combobox-container-focus-border);
2386
+ padding-block:var(--combobox-container-focus-padding-block);
2206
2387
  }
2207
- .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]){
2208
- background-color:var(--surface-dropdown-surface-error);
2209
- border-bottom:var(--blueprint-combobox-border-error-bottom-width, var(--border-2)) solid var(--border-input-border-error);
2210
- border-left:var(--blueprint-combobox-border-error-left-width, var(--border-2)) solid var(--border-input-border-error);
2211
- border-right:var(--blueprint-combobox-border-error-right-width, var(--border-2)) solid var(--border-input-border-error);
2212
- border-top:var(--blueprint-combobox-border-error-top-width, var(--border-2)) solid var(--border-input-border-error);
2213
- padding-block:calc((2.5rem - var(--space-5))/2 - var(--border-2));
2388
+ .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]){
2389
+ background-color:var(--combobox-container-error-background-color);
2390
+ border-bottom:var(--combobox-container-error-border-bottom-width) solid var(--combobox-container-error-border-color);
2391
+ border-left:var(--combobox-container-error-border-left-width) solid var(--combobox-container-error-border-color);
2392
+ border-right:var(--combobox-container-error-border-right-width) solid var(--combobox-container-error-border-color);
2393
+ border-top:var(--combobox-container-error-border-top-width) solid var(--combobox-container-error-border-color);
2394
+ padding-block:var(--combobox-container-error-padding-block);
2214
2395
  }
2215
- .bp_combobox_module_container--015a0 .bp_combobox_module_comboboxContainer--015a0 .bp_combobox_module_textInputWrapper--015a0{
2396
+ .bp_combobox_module_container--ec81c .bp_combobox_module_comboboxContainer--ec81c .bp_combobox_module_textInputWrapper--ec81c{
2216
2397
  align-items:center;
2217
2398
  display:flex;
2218
2399
  flex:content;
2219
- gap:var(--space-2);
2400
+ gap:var(--combobox-text-input-wrapper-gap);
2220
2401
  }
2221
- .bp_combobox_module_container--015a0 .bp_combobox_module_comboboxContainer--015a0 .bp_combobox_module_textInputWrapper--015a0 .bp_combobox_module_textInput--015a0{
2222
- background-color:initial;
2402
+ .bp_combobox_module_container--ec81c .bp_combobox_module_comboboxContainer--ec81c .bp_combobox_module_textInputWrapper--ec81c .bp_combobox_module_textInput--ec81c{
2403
+ background-color:var(--combobox-text-input-background-color);
2223
2404
  border:none;
2224
- color:var(--text-text-on-light);
2405
+ color:var(--combobox-text-input-color);
2225
2406
  font-family:var(--body-default-font-family);
2226
2407
  font-size:var(--body-default-font-size);
2227
2408
  font-weight:var(--body-default-font-weight);
2228
- height:var(--space-5);
2409
+ height:var(--input-height);
2229
2410
  letter-spacing:var(--body-default-letter-spacing);
2230
2411
  line-height:var(--body-default-line-height);
2231
2412
  outline:none;
@@ -2235,94 +2416,97 @@
2235
2416
  text-transform:var(--body-default-text-case);
2236
2417
  width:100%;
2237
2418
  }
2238
- .bp_combobox_module_container--015a0 .bp_combobox_module_comboboxContainer--015a0 .bp_combobox_module_textInputWrapper--015a0 .bp_combobox_module_errorIcon--015a0 path{
2239
- fill:var(--icon-icon-error-on-light);
2419
+ .bp_combobox_module_container--ec81c .bp_combobox_module_comboboxContainer--ec81c .bp_combobox_module_textInputWrapper--ec81c .bp_combobox_module_errorIcon--ec81c path{
2420
+ fill:var(--combobox-error-icon-fill);
2240
2421
  }
2241
- .bp_combobox_module_container--015a0 .bp_combobox_module_comboboxContainer--015a0 .bp_combobox_module_textInputWrapper--015a0 .bp_combobox_module_comboboxButtons--015a0{
2422
+ .bp_combobox_module_container--ec81c .bp_combobox_module_comboboxContainer--ec81c .bp_combobox_module_textInputWrapper--ec81c .bp_combobox_module_comboboxButtons--ec81c{
2242
2423
  align-items:center;
2243
2424
  display:flex;
2244
2425
  position:absolute;
2245
- right:var(--space-2);
2246
- top:var(--space-2);
2426
+ right:var(--combobox-button-spacing);
2427
+ top:var(--combobox-button-spacing);
2247
2428
  }
2248
- .bp_combobox_module_container--015a0 .bp_combobox_module_comboboxContainer--015a0.bp_combobox_module_withChips--015a0{
2249
- max-height:calc(var(--space-2)*2 + var(--space-6)*3);
2250
- padding-block:calc((2.5rem - var(--space-7))/2 - var(--border-1));
2429
+ .bp_combobox_module_container--ec81c .bp_combobox_module_comboboxContainer--ec81c.bp_combobox_module_withChips--ec81c{
2430
+ max-height:var(--combobox-container-with-chips-max-height);
2431
+ padding-block:var(--combobox-container-with-chips-padding-block);
2251
2432
  }
2252
- .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){
2253
- padding-block:calc((2.5rem - var(--space-7))/2 - var(--border-2));
2433
+ .bp_combobox_module_container--ec81c .bp_combobox_module_comboboxContainer--ec81c.bp_combobox_module_withChips--ec81c:not(:disabled).bp_combobox_module_error--ec81c{
2434
+ padding-block:var(--combobox-container-with-chips-error-padding-block);
2254
2435
  }
2255
- .bp_combobox_module_container--015a0 .bp_combobox_module_inlineError--015a0{
2256
- margin-block-start:var(--space-2);
2436
+ .bp_combobox_module_container--ec81c .bp_combobox_module_comboboxContainer--ec81c.bp_combobox_module_withChips--ec81c:not(:disabled):has(input:focus){
2437
+ padding-block:var(--combobox-container-with-chips-focus-padding-block);
2438
+ }
2439
+ .bp_combobox_module_container--ec81c .bp_combobox_module_inlineError--ec81c{
2440
+ margin-block-start:var(--combobox-inline-error-margin-block-start);
2257
2441
  }
2258
2442
 
2259
- .bp_combobox_module_popover--015a0{
2260
- background-color:var(--surface-menu-surface);
2261
- border:var(--border-1) solid var(--border-card-border);
2262
- border-radius:var(--radius-3);
2263
- box-shadow:var(--dropshadow-3);
2443
+ .bp_combobox_module_popover--ec81c{
2444
+ background-color:var(--combobox-popover-background-color);
2445
+ border:var(--combobox-popover-border);
2446
+ border-radius:var(--combobox-popover-border-radius);
2447
+ box-shadow:var(--combobox-popover-box-shadow);
2264
2448
  font-family:var(--body-default-font-family);
2265
2449
  font-size:var(--body-default-font-size);
2266
2450
  font-weight:var(--body-default-font-weight);
2267
2451
  letter-spacing:var(--body-default-letter-spacing);
2268
2452
  line-height:var(--body-default-line-height);
2269
- max-height:min(var(--popover-available-height, 2.25rem), 12.5rem);
2453
+ max-height:var(--combobox-popover-max-height);
2270
2454
  overflow:auto;
2271
- padding-block:var(--space-3);
2272
- padding-inline:var(--space-3);
2455
+ padding-block:var(--combobox-popover-padding-block);
2456
+ padding-inline:var(--combobox-popover-padding-inline);
2273
2457
  -webkit-text-decoration:var(--body-default-text-decoration);
2274
2458
  text-decoration:var(--body-default-text-decoration);
2275
2459
  text-transform:var(--body-default-text-case);
2276
- z-index:380;
2460
+ z-index:var(--z-index-popover);
2277
2461
  }
2278
- .bp_combobox_module_popover--015a0 .bp_combobox_module_option--015a0{
2279
- border:var(--border-2) solid #0000;
2280
- border-radius:var(--radius-3);
2462
+ .bp_combobox_module_popover--ec81c .bp_combobox_module_option--ec81c{
2463
+ border:var(--combobox-option-border);
2464
+ border-radius:var(--combobox-option-border-radius);
2281
2465
  box-sizing:border-box;
2282
2466
  cursor:pointer;
2283
2467
  outline:none;
2284
2468
  overflow-wrap:break-word;
2285
- padding-block:var(--space-2);
2286
- padding-inline:var(--space-2);
2469
+ padding-block:var(--combobox-option-padding-block);
2470
+ padding-inline:var(--combobox-option-padding-inline);
2287
2471
  position:relative;
2288
2472
  -webkit-user-select:none;
2289
2473
  user-select:none;
2290
2474
  width:100%;
2291
2475
  }
2292
- .bp_combobox_module_popover--015a0 .bp_combobox_module_option--015a0[aria-disabled]{
2293
- opacity:60%;
2476
+ .bp_combobox_module_popover--ec81c .bp_combobox_module_option--ec81c[aria-disabled]{
2477
+ opacity:var(--combobox-option-disabled-opacity);
2294
2478
  }
2295
- .bp_combobox_module_popover--015a0 .bp_combobox_module_option--015a0[data-active-item]:not([aria-disabled]){
2296
- background-color:var(--surface-menu-surface-focus);
2297
- border:var(--border-2) solid var(--outline-focus-on-light);
2479
+ .bp_combobox_module_popover--ec81c .bp_combobox_module_option--ec81c[data-active-item]:not([aria-disabled]){
2480
+ background-color:var(--combobox-option-active-background-color);
2481
+ border:var(--combobox-option-active-border);
2298
2482
  }
2299
- .bp_combobox_module_popover--015a0 .bp_combobox_module_option--015a0:active{
2300
- background-color:var(--surface-menu-surface-hover);
2301
- border:var(--border-2) solid #0000;
2483
+ .bp_combobox_module_popover--ec81c .bp_combobox_module_option--ec81c:active{
2484
+ background-color:var(--combobox-option-hover-background-color);
2485
+ border:var(--combobox-option-border);
2302
2486
  }
2303
- .bp_combobox_module_popover--015a0 .bp_combobox_module_option--015a0:hover{
2304
- background-color:var(--surface-menu-surface-hover);
2487
+ .bp_combobox_module_popover--ec81c .bp_combobox_module_option--ec81c:hover{
2488
+ background-color:var(--combobox-option-hover-background-color);
2305
2489
  }
2306
- .bp_combobox_module_popover--015a0 .bp_combobox_module_option--015a0 .bp_combobox_module_indicator--015a0{
2490
+ .bp_combobox_module_popover--ec81c .bp_combobox_module_option--ec81c .bp_combobox_module_indicator--ec81c{
2307
2491
  align-items:center;
2308
2492
  display:flex;
2309
- height:var(--size-9);
2493
+ height:var(--combobox-option-indicator-height);
2310
2494
  justify-content:center;
2311
- left:var(--space-2);
2495
+ left:var(--combobox-option-indicator-left);
2312
2496
  position:absolute;
2313
- top:0;
2497
+ top:var(--combobox-option-indicator-top);
2314
2498
  }
2315
- .bp_combobox_module_popover--015a0 .bp_combobox_module_option--015a0 .bp_combobox_module_indicator--015a0 .bp_combobox_module_indicatorIcon--015a0 path{
2316
- fill:var(--icon-icon-on-light);
2499
+ .bp_combobox_module_popover--ec81c .bp_combobox_module_option--ec81c .bp_combobox_module_indicator--ec81c .bp_combobox_module_indicatorIcon--ec81c path{
2500
+ fill:var(--combobox-option-indicator-icon-fill);
2317
2501
  }
2318
- .bp_combobox_module_popover--015a0 .bp_combobox_module_optionWithIndicator--015a0{
2319
- padding-inline:var(--space-10) var(--space-2);
2502
+ .bp_combobox_module_popover--ec81c .bp_combobox_module_optionWithIndicator--ec81c{
2503
+ padding-inline:var(--combobox-option-with-indicator-padding-inline);
2320
2504
  }
2321
- .bp_combobox_module_popover--015a0 .bp_combobox_module_loadingIndicator--015a0{
2322
- position:unset;
2505
+ .bp_combobox_module_popover--ec81c .bp_combobox_module_loadingIndicator--ec81c{
2506
+ position:var(--combobox-loading-indicator-position);
2323
2507
  }
2324
- .bp_combobox_module_popover--015a0 .bp_combobox_module_noResultOption--015a0{
2325
- color:var(--text-text-on-light);
2508
+ .bp_combobox_module_popover--ec81c .bp_combobox_module_noResultOption--ec81c{
2509
+ color:var(--combobox-no-result-option-color);
2326
2510
  -webkit-user-select:none;
2327
2511
  user-select:none;
2328
2512
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@box/blueprint-web",
3
- "version": "12.40.0",
3
+ "version": "12.41.0",
4
4
  "type": "module",
5
5
  "license": "SEE LICENSE IN LICENSE",
6
6
  "publishConfig": {