@box/blueprint-web 17.5.3 → 17.6.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 (9) hide show
  1. package/dist/lib-esm/components.css +41 -88
  2. package/dist/lib-esm/ghost/ghost.js +0 -2
  3. package/dist/lib-esm/ghost/ghost.module.js +1 -1
  4. package/dist/lib-esm/index.css +41 -88
  5. package/dist/lib-esm/loading-indicator/loading-indicator.js +0 -1
  6. package/dist/lib-esm/loading-indicator/loading-indicator.module.js +1 -1
  7. package/dist/lib-esm/progress-bar/progress-bar.js +0 -1
  8. package/dist/lib-esm/progress-bar/progress-bar.module.js +1 -1
  9. package/package.json +3 -3
package/dist/lib-esm/components.css CHANGED
@@ -1,52 +1,31 @@
1
- @layer blueprint {.bp_ghost_module_ghost--d6cc7[data-modern=false]{
2
- --ghost-background-color:var(--surface-surface-hover);
3
- --ghost-background-color-secondary:var(--surface-surface-secondary);
4
- --ghost-border-radius:var(--radius-1);
5
- --ghost-border-radius-half:var(--radius-half);
6
- --ghost-space-5:var(--space-5);
7
- --ghost-space-6:var(--space-6);
8
- }
9
-
10
- .bp_ghost_module_ghost--d6cc7[data-modern=true]{
11
- --ghost-background-color:var(--bp-surface-ghost-surface);
12
- --ghost-background-color-secondary:var(--bp-surface-ghost-surface-secondary);
13
- --ghost-border-radius:var(--bp-radius-02);
14
- --ghost-border-radius-half:var(--bp-radius-16);
15
- --ghost-space-5:var(--bp-space-050);
16
- --ghost-space-6:var(--bp-space-060);
17
- }
18
-
19
- .bp_ghost_module_ghost--d6cc7{
20
- animation:bp_ghost_module_ghost-keyframes--d6cc7 1.2s ease-in-out infinite;
21
- background-color:var(--ghost-background-color);
22
- border-radius:var(--ghost-border-radius);
1
+ @layer blueprint {.bp_ghost_module_ghost--79836{
2
+ animation:bp_ghost_module_ghost-keyframes--79836 1.2s ease-in-out infinite;
3
+ background-color:var(--bp-surface-ghost-surface);
4
+ border-radius:var(--bp-radius-02);
23
5
  display:inline-block;
24
6
  }
25
- .bp_ghost_module_ghost--d6cc7.bp_ghost_module_circle--d6cc7{
7
+ .bp_ghost_module_ghost--79836.bp_ghost_module_circle--79836{
26
8
  border-radius:50%;
27
- min-height:var(--ghost-space-6);
28
- min-width:var(--ghost-space-6);
9
+ min-height:var(--bp-space-060);
10
+ min-width:var(--bp-space-060);
29
11
  }
30
- .bp_ghost_module_ghost--d6cc7.bp_ghost_module_pill--d6cc7{
31
- border-radius:var(--ghost-border-radius-half);
32
- height:var(--ghost-space-5);
12
+ .bp_ghost_module_ghost--79836.bp_ghost_module_pill--79836{
13
+ border-radius:var(--bp-radius-16);
14
+ height:var(--bp-space-050);
33
15
  width:100%;
34
16
  }
35
- .bp_ghost_module_ghost--d6cc7.bp_ghost_module_rectangle--d6cc7{
36
- border-radius:var(--ghost-border-radius);
37
- height:var(--ghost-space-5);
17
+ .bp_ghost_module_ghost--79836.bp_ghost_module_rectangle--79836{
18
+ border-radius:var(--bp-radius-02);
19
+ height:var(--bp-space-050);
38
20
  width:100%;
39
21
  }
40
22
 
41
- @keyframes bp_ghost_module_ghost-keyframes--d6cc7{
42
- 0%{
43
- background-color:var(--ghost-background-color);
23
+ @keyframes bp_ghost_module_ghost-keyframes--79836{
24
+ 0%,100%{
25
+ background-color:var(--bp-surface-ghost-surface);
44
26
  }
45
27
  50%{
46
- background-color:var(--ghost-background-color-secondary);
47
- }
48
- 100%{
49
- background-color:var(--ghost-background-color);
28
+ background-color:var(--bp-surface-ghost-surface-secondary);
50
29
  }
51
30
  }
52
31
  .bp_base_inline_notice_module_noticeWrapper--201c6[data-modern=false]{
@@ -289,22 +268,7 @@
289
268
  }
290
269
  }
291
270
 
292
- .bp_loading_indicator_module_crawler--ce8bd[data-modern=false]{
293
- --loading-indicator-medium-size:1.5rem;
294
- --loading-indicator-segment-width:0.125rem;
295
- --loading-indicator-segment-height:0.625rem;
296
- --loading-indicator-segment-border-radius:0.375rem;
297
- --loading-indicator-segment-margin-left:0.125rem;
298
- --loading-indicator-segment-offset:0.5rem;
299
- --loading-indicator-segment-default-background:var(--box-blue-100);
300
- --loading-indicator-segment-default-background-opacity-30:var(--box-blue-30);
301
- --loading-indicator-segment-dark-background:var(--gray-black);
302
- --loading-indicator-segment-dark-background-opacity-30:var(--gray-30);
303
- --loading-indicator-segment-light-background:var(--gray-white);
304
- --loading-indicator-segment-light-background-opacity-30:var(--white-opacity-30);
305
- }
306
-
307
- .bp_loading_indicator_module_crawler--ce8bd[data-modern=true]{
271
+ .bp_loading_indicator_module_crawler--77620{
308
272
  --loading-indicator-medium-size:1.5rem;
309
273
  --loading-indicator-segment-width:0.125rem;
310
274
  --loading-indicator-segment-height:0.625rem;
@@ -317,9 +281,6 @@
317
281
  --loading-indicator-segment-dark-background-opacity-30:var(--bp-surface-loading-indicator-surface-on-light-tertiary);
318
282
  --loading-indicator-segment-light-background:var(--bp-surface-loading-indicator-surface-on-dark);
319
283
  --loading-indicator-segment-light-background-opacity-30:var(--bp-surface-loading-indicator-surface-on-dark-tertiary);
320
- }
321
-
322
- .bp_loading_indicator_module_crawler--ce8bd{
323
284
  align-items:center;
324
285
  display:flex;
325
286
  height:var(--loading-indicator-medium-size);
@@ -331,43 +292,43 @@
331
292
  white-space:nowrap;
332
293
  width:var(--loading-indicator-medium-size);
333
294
  }
334
- .bp_loading_indicator_module_crawler--ce8bd .bp_loading_indicator_module_segment--ce8bd{
295
+ .bp_loading_indicator_module_crawler--77620 .bp_loading_indicator_module_segment--77620{
335
296
  border-radius:var(--loading-indicator-segment-border-radius);
336
297
  display:inline-block;
337
298
  height:var(--loading-indicator-segment-height);
338
299
  width:var(--loading-indicator-segment-width);
339
300
  }
340
- .bp_loading_indicator_module_crawler--ce8bd.bp_loading_indicator_module_small--ce8bd{
301
+ .bp_loading_indicator_module_crawler--77620.bp_loading_indicator_module_small--77620{
341
302
  transform:scale(.6667);
342
303
  }
343
- .bp_loading_indicator_module_crawler--ce8bd.bp_loading_indicator_module_large--ce8bd{
304
+ .bp_loading_indicator_module_crawler--77620.bp_loading_indicator_module_large--77620{
344
305
  transform:scale(1.3334);
345
306
  }
346
- .bp_loading_indicator_module_crawler--ce8bd.bp_loading_indicator_module_x-large--ce8bd{
307
+ .bp_loading_indicator_module_crawler--77620.bp_loading_indicator_module_x-large--77620{
347
308
  transform:scale(2);
348
309
  }
349
- .bp_loading_indicator_module_crawler--ce8bd.bp_loading_indicator_module_default--ce8bd .bp_loading_indicator_module_segment--ce8bd{
350
- animation:bp_loading_indicator_module_segment-transform--ce8bd .66s ease-in-out infinite,bp_loading_indicator_module_segment-default--ce8bd .66s ease-in-out infinite;
310
+ .bp_loading_indicator_module_crawler--77620.bp_loading_indicator_module_default--77620 .bp_loading_indicator_module_segment--77620{
311
+ animation:bp_loading_indicator_module_segment-transform--77620 .66s ease-in-out infinite,bp_loading_indicator_module_segment-default--77620 .66s ease-in-out infinite;
351
312
  }
352
- .bp_loading_indicator_module_crawler--ce8bd.bp_loading_indicator_module_dark--ce8bd .bp_loading_indicator_module_segment--ce8bd{
353
- animation:bp_loading_indicator_module_segment-transform--ce8bd .66s ease-in-out infinite,bp_loading_indicator_module_segment-dark--ce8bd .66s ease-in-out infinite;
313
+ .bp_loading_indicator_module_crawler--77620.bp_loading_indicator_module_dark--77620 .bp_loading_indicator_module_segment--77620{
314
+ animation:bp_loading_indicator_module_segment-transform--77620 .66s ease-in-out infinite,bp_loading_indicator_module_segment-dark--77620 .66s ease-in-out infinite;
354
315
  }
355
- .bp_loading_indicator_module_crawler--ce8bd.bp_loading_indicator_module_light--ce8bd .bp_loading_indicator_module_segment--ce8bd{
356
- animation:bp_loading_indicator_module_segment-transform--ce8bd .66s ease-in-out infinite,bp_loading_indicator_module_segment-light--ce8bd .66s ease-in-out infinite;
316
+ .bp_loading_indicator_module_crawler--77620.bp_loading_indicator_module_light--77620 .bp_loading_indicator_module_segment--77620{
317
+ animation:bp_loading_indicator_module_segment-transform--77620 .66s ease-in-out infinite,bp_loading_indicator_module_segment-light--77620 .66s ease-in-out infinite;
357
318
  }
358
319
 
359
- .bp_loading_indicator_module_crawler--ce8bd .bp_loading_indicator_module_segment--ce8bd:nth-child(2){
320
+ .bp_loading_indicator_module_crawler--77620 .bp_loading_indicator_module_segment--77620:nth-child(2){
360
321
  animation-delay:.1s;
361
322
  margin-left:var(--loading-indicator-segment-margin-left);
362
323
  }
363
324
 
364
- .bp_loading_indicator_module_crawler--ce8bd .bp_loading_indicator_module_segment--ce8bd:last-child{
325
+ .bp_loading_indicator_module_crawler--77620 .bp_loading_indicator_module_segment--77620:last-child{
365
326
  animation-delay:.2s;
366
327
  left:var(--loading-indicator-segment-offset);
367
328
  margin-left:var(--loading-indicator-segment-margin-left);
368
329
  }
369
330
 
370
- @keyframes bp_loading_indicator_module_segment-transform--ce8bd{
331
+ @keyframes bp_loading_indicator_module_segment-transform--77620{
371
332
  0%,100%,80%{
372
333
  transform:scaleY(1.2);
373
334
  }
@@ -375,7 +336,7 @@
375
336
  transform:scaleY(1.6);
376
337
  }
377
338
  }
378
- @keyframes bp_loading_indicator_module_segment-dark--ce8bd{
339
+ @keyframes bp_loading_indicator_module_segment-dark--77620{
379
340
  0%,100%,80%{
380
341
  background-color:var(--loading-indicator-segment-dark-background-opacity-30);
381
342
  }
@@ -383,7 +344,7 @@
383
344
  background-color:var(--loading-indicator-segment-dark-background);
384
345
  }
385
346
  }
386
- @keyframes bp_loading_indicator_module_segment-default--ce8bd{
347
+ @keyframes bp_loading_indicator_module_segment-default--77620{
387
348
  0%,100%{
388
349
  background-color:var(--loading-indicator-segment-default-background-opacity-30);
389
350
  }
@@ -391,7 +352,7 @@
391
352
  background-color:var(--loading-indicator-segment-default-background);
392
353
  }
393
354
  }
394
- @keyframes bp_loading_indicator_module_segment-light--ce8bd{
355
+ @keyframes bp_loading_indicator_module_segment-light--77620{
395
356
  0%,100%,80%{
396
357
  background-color:var(--loading-indicator-segment-light-background-opacity-30);
397
358
  }
@@ -11290,12 +11251,16 @@ table.bp_inline_table_module_inlineTable--12cec[data-modern=true] td:last-child,
11290
11251
  background:none;
11291
11252
  }
11292
11253
 
11293
- .bp_progress_bar_module_reactAriaProgressBar--427a5{
11254
+ .bp_progress_bar_module_reactAriaProgressBar--71ccb{
11255
+ --progress-bar-border-radius:var(--bp-radius-02);
11256
+ --progress-bar-track-bg:var(--bp-surface-progress-bar-surface-brand-background);
11257
+ --progress-bar-fill-bg:var(--bp-surface-nav-surface-brand-foreground);
11294
11258
  display:grid;
11259
+ gap:var(--bp-space-010);
11295
11260
  grid-template-areas:"label value" "bar bar";
11296
11261
  grid-template-columns:1fr auto;
11297
11262
  }
11298
- .bp_progress_bar_module_reactAriaProgressBar--427a5 .bp_progress_bar_module_bar--427a5{
11263
+ .bp_progress_bar_module_reactAriaProgressBar--71ccb .bp_progress_bar_module_bar--71ccb{
11299
11264
  background:var(--progress-bar-track-bg);
11300
11265
  border-radius:var(--progress-bar-border-radius);
11301
11266
  forced-color-adjust:none;
@@ -11304,23 +11269,11 @@ table.bp_inline_table_module_inlineTable--12cec[data-modern=true] td:last-child,
11304
11269
  overflow:hidden;
11305
11270
  will-change:transform;
11306
11271
  }
11307
- .bp_progress_bar_module_reactAriaProgressBar--427a5 .bp_progress_bar_module_fill--427a5{
11272
+ .bp_progress_bar_module_reactAriaProgressBar--71ccb .bp_progress_bar_module_fill--71ccb{
11308
11273
  background:var(--progress-bar-fill-bg);
11309
11274
  border-radius:var(--progress-bar-border-radius);
11310
11275
  height:100%;
11311
11276
  }
11312
- .bp_progress_bar_module_reactAriaProgressBar--427a5[data-modern=false]{
11313
- --progress-bar-border-radius:var(--radius-1);
11314
- --progress-bar-track-bg:var(--surface-progress-bar-surface-brand-background);
11315
- --progress-bar-fill-bg:var(--surface-nav-surface-brand-foreground);
11316
- gap:var(--space-1);
11317
- }
11318
- .bp_progress_bar_module_reactAriaProgressBar--427a5[data-modern=true]{
11319
- --progress-bar-border-radius:var(--bp-radius-02);
11320
- --progress-bar-track-bg:var(--bp-surface-progress-bar-surface-brand-background);
11321
- --progress-bar-fill-bg:var(--bp-surface-nav-surface-brand-foreground);
11322
- gap:var(--bp-space-010);
11323
- }
11324
11277
  .bp_chip_module_chip--e6fd2[data-modern=false]{
11325
11278
  --chip-gap:var(--space-2);
11326
11279
  --chip-height:var(--size-8);
package/dist/lib-esm/ghost/ghost.js CHANGED
@@ -21,12 +21,10 @@ const Ghost = ({
21
21
  style = {},
22
22
  ...rest
23
23
  }) => {
24
- const enableModernizedComponents = true;
25
24
  return jsx("span", {
26
25
  className: clsx(className, styles.ghost, {
27
26
  [styles[variant]]: !!variant
28
27
  }),
29
- "data-modern": enableModernizedComponents,
30
28
  style: {
31
29
  height,
32
30
  width,
package/dist/lib-esm/ghost/ghost.module.js CHANGED
@@ -1,4 +1,4 @@
1
1
  import '../index.css';
2
- var styles = {"ghost":"bp_ghost_module_ghost--d6cc7","ghost-keyframes":"bp_ghost_module_ghost-keyframes--d6cc7","circle":"bp_ghost_module_circle--d6cc7","pill":"bp_ghost_module_pill--d6cc7","rectangle":"bp_ghost_module_rectangle--d6cc7"};
2
+ var styles = {"ghost":"bp_ghost_module_ghost--79836","ghost-keyframes":"bp_ghost_module_ghost-keyframes--79836","circle":"bp_ghost_module_circle--79836","pill":"bp_ghost_module_pill--79836","rectangle":"bp_ghost_module_rectangle--79836"};
3
3
 
4
4
  export { styles as default };
package/dist/lib-esm/index.css CHANGED
@@ -1,52 +1,31 @@
1
- .bp_ghost_module_ghost--d6cc7[data-modern=false]{
2
- --ghost-background-color:var(--surface-surface-hover);
3
- --ghost-background-color-secondary:var(--surface-surface-secondary);
4
- --ghost-border-radius:var(--radius-1);
5
- --ghost-border-radius-half:var(--radius-half);
6
- --ghost-space-5:var(--space-5);
7
- --ghost-space-6:var(--space-6);
8
- }
9
-
10
- .bp_ghost_module_ghost--d6cc7[data-modern=true]{
11
- --ghost-background-color:var(--bp-surface-ghost-surface);
12
- --ghost-background-color-secondary:var(--bp-surface-ghost-surface-secondary);
13
- --ghost-border-radius:var(--bp-radius-02);
14
- --ghost-border-radius-half:var(--bp-radius-16);
15
- --ghost-space-5:var(--bp-space-050);
16
- --ghost-space-6:var(--bp-space-060);
17
- }
18
-
19
- .bp_ghost_module_ghost--d6cc7{
20
- animation:bp_ghost_module_ghost-keyframes--d6cc7 1.2s ease-in-out infinite;
21
- background-color:var(--ghost-background-color);
22
- border-radius:var(--ghost-border-radius);
1
+ .bp_ghost_module_ghost--79836{
2
+ animation:bp_ghost_module_ghost-keyframes--79836 1.2s ease-in-out infinite;
3
+ background-color:var(--bp-surface-ghost-surface);
4
+ border-radius:var(--bp-radius-02);
23
5
  display:inline-block;
24
6
  }
25
- .bp_ghost_module_ghost--d6cc7.bp_ghost_module_circle--d6cc7{
7
+ .bp_ghost_module_ghost--79836.bp_ghost_module_circle--79836{
26
8
  border-radius:50%;
27
- min-height:var(--ghost-space-6);
28
- min-width:var(--ghost-space-6);
9
+ min-height:var(--bp-space-060);
10
+ min-width:var(--bp-space-060);
29
11
  }
30
- .bp_ghost_module_ghost--d6cc7.bp_ghost_module_pill--d6cc7{
31
- border-radius:var(--ghost-border-radius-half);
32
- height:var(--ghost-space-5);
12
+ .bp_ghost_module_ghost--79836.bp_ghost_module_pill--79836{
13
+ border-radius:var(--bp-radius-16);
14
+ height:var(--bp-space-050);
33
15
  width:100%;
34
16
  }
35
- .bp_ghost_module_ghost--d6cc7.bp_ghost_module_rectangle--d6cc7{
36
- border-radius:var(--ghost-border-radius);
37
- height:var(--ghost-space-5);
17
+ .bp_ghost_module_ghost--79836.bp_ghost_module_rectangle--79836{
18
+ border-radius:var(--bp-radius-02);
19
+ height:var(--bp-space-050);
38
20
  width:100%;
39
21
  }
40
22
 
41
- @keyframes bp_ghost_module_ghost-keyframes--d6cc7{
42
- 0%{
43
- background-color:var(--ghost-background-color);
23
+ @keyframes bp_ghost_module_ghost-keyframes--79836{
24
+ 0%,100%{
25
+ background-color:var(--bp-surface-ghost-surface);
44
26
  }
45
27
  50%{
46
- background-color:var(--ghost-background-color-secondary);
47
- }
48
- 100%{
49
- background-color:var(--ghost-background-color);
28
+ background-color:var(--bp-surface-ghost-surface-secondary);
50
29
  }
51
30
  }
52
31
  .bp_base_inline_notice_module_noticeWrapper--201c6[data-modern=false]{
@@ -289,22 +268,7 @@
289
268
  }
290
269
  }
291
270
 
292
- .bp_loading_indicator_module_crawler--ce8bd[data-modern=false]{
293
- --loading-indicator-medium-size:1.5rem;
294
- --loading-indicator-segment-width:0.125rem;
295
- --loading-indicator-segment-height:0.625rem;
296
- --loading-indicator-segment-border-radius:0.375rem;
297
- --loading-indicator-segment-margin-left:0.125rem;
298
- --loading-indicator-segment-offset:0.5rem;
299
- --loading-indicator-segment-default-background:var(--box-blue-100);
300
- --loading-indicator-segment-default-background-opacity-30:var(--box-blue-30);
301
- --loading-indicator-segment-dark-background:var(--gray-black);
302
- --loading-indicator-segment-dark-background-opacity-30:var(--gray-30);
303
- --loading-indicator-segment-light-background:var(--gray-white);
304
- --loading-indicator-segment-light-background-opacity-30:var(--white-opacity-30);
305
- }
306
-
307
- .bp_loading_indicator_module_crawler--ce8bd[data-modern=true]{
271
+ .bp_loading_indicator_module_crawler--77620{
308
272
  --loading-indicator-medium-size:1.5rem;
309
273
  --loading-indicator-segment-width:0.125rem;
310
274
  --loading-indicator-segment-height:0.625rem;
@@ -317,9 +281,6 @@
317
281
  --loading-indicator-segment-dark-background-opacity-30:var(--bp-surface-loading-indicator-surface-on-light-tertiary);
318
282
  --loading-indicator-segment-light-background:var(--bp-surface-loading-indicator-surface-on-dark);
319
283
  --loading-indicator-segment-light-background-opacity-30:var(--bp-surface-loading-indicator-surface-on-dark-tertiary);
320
- }
321
-
322
- .bp_loading_indicator_module_crawler--ce8bd{
323
284
  align-items:center;
324
285
  display:flex;
325
286
  height:var(--loading-indicator-medium-size);
@@ -331,43 +292,43 @@
331
292
  white-space:nowrap;
332
293
  width:var(--loading-indicator-medium-size);
333
294
  }
334
- .bp_loading_indicator_module_crawler--ce8bd .bp_loading_indicator_module_segment--ce8bd{
295
+ .bp_loading_indicator_module_crawler--77620 .bp_loading_indicator_module_segment--77620{
335
296
  border-radius:var(--loading-indicator-segment-border-radius);
336
297
  display:inline-block;
337
298
  height:var(--loading-indicator-segment-height);
338
299
  width:var(--loading-indicator-segment-width);
339
300
  }
340
- .bp_loading_indicator_module_crawler--ce8bd.bp_loading_indicator_module_small--ce8bd{
301
+ .bp_loading_indicator_module_crawler--77620.bp_loading_indicator_module_small--77620{
341
302
  transform:scale(.6667);
342
303
  }
343
- .bp_loading_indicator_module_crawler--ce8bd.bp_loading_indicator_module_large--ce8bd{
304
+ .bp_loading_indicator_module_crawler--77620.bp_loading_indicator_module_large--77620{
344
305
  transform:scale(1.3334);
345
306
  }
346
- .bp_loading_indicator_module_crawler--ce8bd.bp_loading_indicator_module_x-large--ce8bd{
307
+ .bp_loading_indicator_module_crawler--77620.bp_loading_indicator_module_x-large--77620{
347
308
  transform:scale(2);
348
309
  }
349
- .bp_loading_indicator_module_crawler--ce8bd.bp_loading_indicator_module_default--ce8bd .bp_loading_indicator_module_segment--ce8bd{
350
- animation:bp_loading_indicator_module_segment-transform--ce8bd .66s ease-in-out infinite,bp_loading_indicator_module_segment-default--ce8bd .66s ease-in-out infinite;
310
+ .bp_loading_indicator_module_crawler--77620.bp_loading_indicator_module_default--77620 .bp_loading_indicator_module_segment--77620{
311
+ animation:bp_loading_indicator_module_segment-transform--77620 .66s ease-in-out infinite,bp_loading_indicator_module_segment-default--77620 .66s ease-in-out infinite;
351
312
  }
352
- .bp_loading_indicator_module_crawler--ce8bd.bp_loading_indicator_module_dark--ce8bd .bp_loading_indicator_module_segment--ce8bd{
353
- animation:bp_loading_indicator_module_segment-transform--ce8bd .66s ease-in-out infinite,bp_loading_indicator_module_segment-dark--ce8bd .66s ease-in-out infinite;
313
+ .bp_loading_indicator_module_crawler--77620.bp_loading_indicator_module_dark--77620 .bp_loading_indicator_module_segment--77620{
314
+ animation:bp_loading_indicator_module_segment-transform--77620 .66s ease-in-out infinite,bp_loading_indicator_module_segment-dark--77620 .66s ease-in-out infinite;
354
315
  }
355
- .bp_loading_indicator_module_crawler--ce8bd.bp_loading_indicator_module_light--ce8bd .bp_loading_indicator_module_segment--ce8bd{
356
- animation:bp_loading_indicator_module_segment-transform--ce8bd .66s ease-in-out infinite,bp_loading_indicator_module_segment-light--ce8bd .66s ease-in-out infinite;
316
+ .bp_loading_indicator_module_crawler--77620.bp_loading_indicator_module_light--77620 .bp_loading_indicator_module_segment--77620{
317
+ animation:bp_loading_indicator_module_segment-transform--77620 .66s ease-in-out infinite,bp_loading_indicator_module_segment-light--77620 .66s ease-in-out infinite;
357
318
  }
358
319
 
359
- .bp_loading_indicator_module_crawler--ce8bd .bp_loading_indicator_module_segment--ce8bd:nth-child(2){
320
+ .bp_loading_indicator_module_crawler--77620 .bp_loading_indicator_module_segment--77620:nth-child(2){
360
321
  animation-delay:.1s;
361
322
  margin-left:var(--loading-indicator-segment-margin-left);
362
323
  }
363
324
 
364
- .bp_loading_indicator_module_crawler--ce8bd .bp_loading_indicator_module_segment--ce8bd:last-child{
325
+ .bp_loading_indicator_module_crawler--77620 .bp_loading_indicator_module_segment--77620:last-child{
365
326
  animation-delay:.2s;
366
327
  left:var(--loading-indicator-segment-offset);
367
328
  margin-left:var(--loading-indicator-segment-margin-left);
368
329
  }
369
330
 
370
- @keyframes bp_loading_indicator_module_segment-transform--ce8bd{
331
+ @keyframes bp_loading_indicator_module_segment-transform--77620{
371
332
  0%,100%,80%{
372
333
  transform:scaleY(1.2);
373
334
  }
@@ -375,7 +336,7 @@
375
336
  transform:scaleY(1.6);
376
337
  }
377
338
  }
378
- @keyframes bp_loading_indicator_module_segment-dark--ce8bd{
339
+ @keyframes bp_loading_indicator_module_segment-dark--77620{
379
340
  0%,100%,80%{
380
341
  background-color:var(--loading-indicator-segment-dark-background-opacity-30);
381
342
  }
@@ -383,7 +344,7 @@
383
344
  background-color:var(--loading-indicator-segment-dark-background);
384
345
  }
385
346
  }
386
- @keyframes bp_loading_indicator_module_segment-default--ce8bd{
347
+ @keyframes bp_loading_indicator_module_segment-default--77620{
387
348
  0%,100%{
388
349
  background-color:var(--loading-indicator-segment-default-background-opacity-30);
389
350
  }
@@ -391,7 +352,7 @@
391
352
  background-color:var(--loading-indicator-segment-default-background);
392
353
  }
393
354
  }
394
- @keyframes bp_loading_indicator_module_segment-light--ce8bd{
355
+ @keyframes bp_loading_indicator_module_segment-light--77620{
395
356
  0%,100%,80%{
396
357
  background-color:var(--loading-indicator-segment-light-background-opacity-30);
397
358
  }
@@ -11290,12 +11251,16 @@ table.bp_inline_table_module_inlineTable--12cec[data-modern=true] td:last-child,
11290
11251
  background:none;
11291
11252
  }
11292
11253
 
11293
- .bp_progress_bar_module_reactAriaProgressBar--427a5{
11254
+ .bp_progress_bar_module_reactAriaProgressBar--71ccb{
11255
+ --progress-bar-border-radius:var(--bp-radius-02);
11256
+ --progress-bar-track-bg:var(--bp-surface-progress-bar-surface-brand-background);
11257
+ --progress-bar-fill-bg:var(--bp-surface-nav-surface-brand-foreground);
11294
11258
  display:grid;
11259
+ gap:var(--bp-space-010);
11295
11260
  grid-template-areas:"label value" "bar bar";
11296
11261
  grid-template-columns:1fr auto;
11297
11262
  }
11298
- .bp_progress_bar_module_reactAriaProgressBar--427a5 .bp_progress_bar_module_bar--427a5{
11263
+ .bp_progress_bar_module_reactAriaProgressBar--71ccb .bp_progress_bar_module_bar--71ccb{
11299
11264
  background:var(--progress-bar-track-bg);
11300
11265
  border-radius:var(--progress-bar-border-radius);
11301
11266
  forced-color-adjust:none;
@@ -11304,23 +11269,11 @@ table.bp_inline_table_module_inlineTable--12cec[data-modern=true] td:last-child,
11304
11269
  overflow:hidden;
11305
11270
  will-change:transform;
11306
11271
  }
11307
- .bp_progress_bar_module_reactAriaProgressBar--427a5 .bp_progress_bar_module_fill--427a5{
11272
+ .bp_progress_bar_module_reactAriaProgressBar--71ccb .bp_progress_bar_module_fill--71ccb{
11308
11273
  background:var(--progress-bar-fill-bg);
11309
11274
  border-radius:var(--progress-bar-border-radius);
11310
11275
  height:100%;
11311
11276
  }
11312
- .bp_progress_bar_module_reactAriaProgressBar--427a5[data-modern=false]{
11313
- --progress-bar-border-radius:var(--radius-1);
11314
- --progress-bar-track-bg:var(--surface-progress-bar-surface-brand-background);
11315
- --progress-bar-fill-bg:var(--surface-nav-surface-brand-foreground);
11316
- gap:var(--space-1);
11317
- }
11318
- .bp_progress_bar_module_reactAriaProgressBar--427a5[data-modern=true]{
11319
- --progress-bar-border-radius:var(--bp-radius-02);
11320
- --progress-bar-track-bg:var(--bp-surface-progress-bar-surface-brand-background);
11321
- --progress-bar-fill-bg:var(--bp-surface-nav-surface-brand-foreground);
11322
- gap:var(--bp-space-010);
11323
- }
11324
11277
  .bp_chip_module_chip--e6fd2[data-modern=false]{
11325
11278
  --chip-gap:var(--space-2);
11326
11279
  --chip-height:var(--size-8);
package/dist/lib-esm/loading-indicator/loading-indicator.js CHANGED
@@ -16,7 +16,6 @@ function LoadingIndicator(props) {
16
16
  "aria-label": ariaLabel,
17
17
  "aria-live": ariaLive,
18
18
  className: clsx(styles.crawler, styles[variant], styles[size], className),
19
- "data-modern": 'true' ,
20
19
  role: "status",
21
20
  children: [jsx("div", {
22
21
  className: styles.segment
package/dist/lib-esm/loading-indicator/loading-indicator.module.js CHANGED
@@ -1,4 +1,4 @@
1
1
  import '../index.css';
2
- var styles = {"crawler":"bp_loading_indicator_module_crawler--ce8bd","segment":"bp_loading_indicator_module_segment--ce8bd","small":"bp_loading_indicator_module_small--ce8bd","large":"bp_loading_indicator_module_large--ce8bd","x-large":"bp_loading_indicator_module_x-large--ce8bd","default":"bp_loading_indicator_module_default--ce8bd","segment-transform":"bp_loading_indicator_module_segment-transform--ce8bd","segment-default":"bp_loading_indicator_module_segment-default--ce8bd","dark":"bp_loading_indicator_module_dark--ce8bd","segment-dark":"bp_loading_indicator_module_segment-dark--ce8bd","light":"bp_loading_indicator_module_light--ce8bd","segment-light":"bp_loading_indicator_module_segment-light--ce8bd"};
2
+ var styles = {"crawler":"bp_loading_indicator_module_crawler--77620","segment":"bp_loading_indicator_module_segment--77620","small":"bp_loading_indicator_module_small--77620","large":"bp_loading_indicator_module_large--77620","x-large":"bp_loading_indicator_module_x-large--77620","default":"bp_loading_indicator_module_default--77620","segment-transform":"bp_loading_indicator_module_segment-transform--77620","segment-default":"bp_loading_indicator_module_segment-default--77620","dark":"bp_loading_indicator_module_dark--77620","segment-dark":"bp_loading_indicator_module_segment-dark--77620","light":"bp_loading_indicator_module_light--77620","segment-light":"bp_loading_indicator_module_segment-light--77620"};
3
3
 
4
4
  export { styles as default };
package/dist/lib-esm/progress-bar/progress-bar.js CHANGED
@@ -22,7 +22,6 @@ function ProgressBar({
22
22
  "aria-label": ariaLabel,
23
23
  "aria-labelledby": label ? resolvedLabelId : undefined,
24
24
  className: clsx(styles.reactAriaProgressBar, className),
25
- "data-modern": 'true' ,
26
25
  children: ({
27
26
  percentage
28
27
  }) => {
package/dist/lib-esm/progress-bar/progress-bar.module.js CHANGED
@@ -1,4 +1,4 @@
1
1
  import '../index.css';
2
- var styles = {"reactAriaProgressBar":"bp_progress_bar_module_reactAriaProgressBar--427a5","bar":"bp_progress_bar_module_bar--427a5","fill":"bp_progress_bar_module_fill--427a5"};
2
+ var styles = {"reactAriaProgressBar":"bp_progress_bar_module_reactAriaProgressBar--71ccb","bar":"bp_progress_bar_module_bar--71ccb","fill":"bp_progress_bar_module_fill--71ccb"};
3
3
 
4
4
  export { styles as default };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@box/blueprint-web",
3
- "version": "17.5.3",
3
+ "version": "17.6.0",
4
4
  "type": "module",
5
5
  "license": "SEE LICENSE IN LICENSE",
6
6
  "publishConfig": {
@@ -55,7 +55,7 @@
55
55
  "dependencies": {
56
56
  "@ariakit/react": "0.4.21",
57
57
  "@ariakit/react-core": "0.4.21",
58
- "@box/blueprint-web-assets": "^5.9.9",
58
+ "@box/blueprint-web-assets": "^5.9.10",
59
59
  "@internationalized/date": "^3.12.0",
60
60
  "@radix-ui/react-accordion": "1.1.2",
61
61
  "@radix-ui/react-checkbox": "1.0.4",
@@ -86,7 +86,7 @@
86
86
  "devDependencies": {
87
87
  "@box/box-test-client": "^3.2.7",
88
88
  "@box/playwright-utils": "^2.8.5",
89
- "@box/storybook-utils": "^1.2.40",
89
+ "@box/storybook-utils": "^1.2.41",
90
90
  "@figma/code-connect": "1.4.4",
91
91
  "@playwright/test": "1.46.1",
92
92
  "@types/js-yaml": "^4.0.9",