@box/blueprint-web 10.5.0 → 11.0.1
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.
- package/dist/lib-esm/index.css +155 -109
- package/dist/lib-esm/password-input/password-input.d.ts +2 -2
- package/dist/lib-esm/password-input/password-input.js +1 -1
- package/dist/lib-esm/password-input/password-input.module.js +1 -1
- package/dist/lib-esm/primitives/base-text-input/base-text-input.js +57 -22
- package/dist/lib-esm/primitives/base-text-input/base-text-input.module.js +1 -1
- package/dist/lib-esm/primitives/base-text-input/types.d.ts +7 -2
- package/dist/lib-esm/text-input/text-input.d.ts +25 -1
- package/dist/lib-esm/text-input/text-input.js +43 -9
- package/dist/lib-esm/text-input/text-input.module.js +1 -1
- package/dist/lib-esm/text-input/types.d.ts +2 -2
- package/dist/lib-esm/util-components/base-grid-list-item/base-grid-list-item.module.js +1 -1
- package/dist/lib-esm/util-components/labelable/labelable.module.js +4 -0
- package/dist/lib-esm/util-components/labelable/useLabelable.d.ts +1 -1
- package/dist/lib-esm/util-components/labelable/useLabelable.js +9 -4
- package/package.json +3 -3
package/dist/lib-esm/index.css
CHANGED
|
@@ -1631,6 +1631,20 @@
|
|
|
1631
1631
|
.bp_text_area_module_textAreaContainer--71ba4 .bp_text_area_module_inlineError--71ba4{
|
|
1632
1632
|
margin-block-start:var(--space-2);
|
|
1633
1633
|
}
|
|
1634
|
+
.bp_labelable_module_required--23e9d{
|
|
1635
|
+
align-items:center;
|
|
1636
|
+
display:inline-flex;
|
|
1637
|
+
gap:var(--space-1);
|
|
1638
|
+
}
|
|
1639
|
+
.bp_labelable_module_required--23e9d::before{
|
|
1640
|
+
color:var(--icon-icon-required-on-light);
|
|
1641
|
+
content:"*";
|
|
1642
|
+
font-family:monospace;
|
|
1643
|
+
transform:scale(1.2);
|
|
1644
|
+
}
|
|
1645
|
+
.bp_labelable_module_required--23e9d::before *{
|
|
1646
|
+
fill:var(--icon-icon-required-on-light);
|
|
1647
|
+
}
|
|
1634
1648
|
|
|
1635
1649
|
.bp_combobox_module_container--076fd{
|
|
1636
1650
|
display:flex;
|
|
@@ -3317,7 +3331,8 @@
|
|
|
3317
3331
|
.bp_link_module_link--560b9 .bp_link_module_icon--560b9 *{
|
|
3318
3332
|
fill:currentColor;
|
|
3319
3333
|
}
|
|
3320
|
-
|
|
3334
|
+
|
|
3335
|
+
.bp_base_grid_list_item_module_smallList--70f04{
|
|
3321
3336
|
box-sizing:border-box;
|
|
3322
3337
|
display:grid;
|
|
3323
3338
|
gap:var(--space-2);
|
|
@@ -3328,7 +3343,7 @@
|
|
|
3328
3343
|
padding:var(--space-1);
|
|
3329
3344
|
width:auto;
|
|
3330
3345
|
}
|
|
3331
|
-
.bp_base_grid_list_item_module_smallList--
|
|
3346
|
+
.bp_base_grid_list_item_module_smallList--70f04 .bp_base_grid_list_item_module_smallListItem--70f04{
|
|
3332
3347
|
--actions-opacity:0;
|
|
3333
3348
|
--thumbnail-size:var(--size-9);
|
|
3334
3349
|
--item-background:var(--surface-item-small-surface);
|
|
@@ -3347,11 +3362,11 @@
|
|
|
3347
3362
|
transform:translateZ(0);
|
|
3348
3363
|
width:auto;
|
|
3349
3364
|
}
|
|
3350
|
-
.bp_base_grid_list_item_module_smallList--
|
|
3365
|
+
.bp_base_grid_list_item_module_smallList--70f04 .bp_base_grid_list_item_module_smallListItem--70f04.bp_base_grid_list_item_module_loading--70f04{
|
|
3351
3366
|
grid-template-columns:var(--thumbnail-size) auto 0;
|
|
3352
3367
|
grid-template-rows:100% 0;
|
|
3353
3368
|
}
|
|
3354
|
-
.bp_base_grid_list_item_module_smallList--
|
|
3369
|
+
.bp_base_grid_list_item_module_smallList--70f04 .bp_base_grid_list_item_module_smallListItem--70f04 .bp_base_grid_list_item_module_thumbnail--70f04{
|
|
3355
3370
|
align-items:center;
|
|
3356
3371
|
aspect-ratio:1;
|
|
3357
3372
|
display:flex;
|
|
@@ -3360,13 +3375,13 @@
|
|
|
3360
3375
|
overflow:hidden;
|
|
3361
3376
|
z-index:1;
|
|
3362
3377
|
}
|
|
3363
|
-
.bp_base_grid_list_item_module_smallList--
|
|
3378
|
+
.bp_base_grid_list_item_module_smallList--70f04 .bp_base_grid_list_item_module_smallListItem--70f04 .bp_base_grid_list_item_module_thumbnailContent--70f04 img,.bp_base_grid_list_item_module_smallList--70f04 .bp_base_grid_list_item_module_smallListItem--70f04 .bp_base_grid_list_item_module_thumbnailContent--70f04 svg{
|
|
3364
3379
|
height:100%;
|
|
3365
3380
|
object-fit:cover;
|
|
3366
3381
|
object-position:left;
|
|
3367
3382
|
width:100%;
|
|
3368
3383
|
}
|
|
3369
|
-
.bp_base_grid_list_item_module_smallList--
|
|
3384
|
+
.bp_base_grid_list_item_module_smallList--70f04 .bp_base_grid_list_item_module_smallListItem--70f04 .bp_base_grid_list_item_module_header--70f04{
|
|
3370
3385
|
color:var(--text-text-on-light);
|
|
3371
3386
|
font-family:Lato, -apple-system, BlinkMacSystemFont, "San Francisco", "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
|
|
3372
3387
|
font-size:.875rem;
|
|
@@ -3377,11 +3392,11 @@
|
|
|
3377
3392
|
text-decoration:none;
|
|
3378
3393
|
text-transform:none;
|
|
3379
3394
|
}
|
|
3380
|
-
.bp_base_grid_list_item_module_smallList--
|
|
3395
|
+
.bp_base_grid_list_item_module_smallList--70f04 .bp_base_grid_list_item_module_smallListItem--70f04 .bp_base_grid_list_item_module_header--70f04.bp_base_grid_list_item_module_loading--70f04{
|
|
3381
3396
|
align-items:center;
|
|
3382
3397
|
display:flex;
|
|
3383
3398
|
}
|
|
3384
|
-
.bp_base_grid_list_item_module_smallList--
|
|
3399
|
+
.bp_base_grid_list_item_module_smallList--70f04 .bp_base_grid_list_item_module_smallListItem--70f04 .bp_base_grid_list_item_module_subtitle--70f04{
|
|
3385
3400
|
color:var(--text-text-on-light-secondary);
|
|
3386
3401
|
font-family:Lato, -apple-system, BlinkMacSystemFont, "San Francisco", "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
|
|
3387
3402
|
font-size:.75rem;
|
|
@@ -3392,17 +3407,17 @@
|
|
|
3392
3407
|
text-decoration:none;
|
|
3393
3408
|
text-transform:none;
|
|
3394
3409
|
}
|
|
3395
|
-
.bp_base_grid_list_item_module_smallList--
|
|
3410
|
+
.bp_base_grid_list_item_module_smallList--70f04 .bp_base_grid_list_item_module_smallListItem--70f04 .bp_base_grid_list_item_module_header--70f04,.bp_base_grid_list_item_module_smallList--70f04 .bp_base_grid_list_item_module_smallListItem--70f04 .bp_base_grid_list_item_module_subtitle--70f04{
|
|
3396
3411
|
display:inline-block;
|
|
3397
3412
|
overflow:hidden;
|
|
3398
3413
|
text-overflow:ellipsis;
|
|
3399
3414
|
white-space:nowrap;
|
|
3400
3415
|
}
|
|
3401
|
-
.bp_base_grid_list_item_module_smallList--
|
|
3416
|
+
.bp_base_grid_list_item_module_smallList--70f04 .bp_base_grid_list_item_module_smallListItem--70f04:not(:has(.bp_base_grid_list_item_module_header--70f04)),.bp_base_grid_list_item_module_smallList--70f04 .bp_base_grid_list_item_module_smallListItem--70f04:not(:has(.bp_base_grid_list_item_module_subtitle--70f04)){
|
|
3402
3417
|
grid-template-rows:100% 0;
|
|
3403
3418
|
row-gap:0;
|
|
3404
3419
|
}
|
|
3405
|
-
.bp_base_grid_list_item_module_smallList--
|
|
3420
|
+
.bp_base_grid_list_item_module_smallList--70f04 .bp_base_grid_list_item_module_smallListItem--70f04 .bp_base_grid_list_item_module_actions--70f04{
|
|
3406
3421
|
align-items:center;
|
|
3407
3422
|
display:flex;
|
|
3408
3423
|
grid-area:actions;
|
|
@@ -3412,11 +3427,11 @@
|
|
|
3412
3427
|
padding-right:0;
|
|
3413
3428
|
}
|
|
3414
3429
|
@media (pointer: coarse){
|
|
3415
|
-
.bp_base_grid_list_item_module_smallList--
|
|
3430
|
+
.bp_base_grid_list_item_module_smallList--70f04 .bp_base_grid_list_item_module_smallListItem--70f04 .bp_base_grid_list_item_module_actions--70f04{
|
|
3416
3431
|
--actions-opacity:1;
|
|
3417
3432
|
}
|
|
3418
3433
|
}
|
|
3419
|
-
.bp_base_grid_list_item_module_smallList--
|
|
3434
|
+
.bp_base_grid_list_item_module_smallList--70f04 .bp_base_grid_list_item_module_smallListItem--70f04 .bp_base_grid_list_item_module_actions--70f04 .bp_base_grid_list_item_module_selection--70f04{
|
|
3420
3435
|
align-items:center;
|
|
3421
3436
|
background:var(--item-background);
|
|
3422
3437
|
border-radius:var(--radius-2);
|
|
@@ -3425,10 +3440,10 @@
|
|
|
3425
3440
|
justify-content:center;
|
|
3426
3441
|
width:var(--space-8);
|
|
3427
3442
|
}
|
|
3428
|
-
.bp_base_grid_list_item_module_smallList--
|
|
3443
|
+
.bp_base_grid_list_item_module_smallList--70f04 .bp_base_grid_list_item_module_smallListItem--70f04 .bp_base_grid_list_item_module_actions--70f04 .bp_base_grid_list_item_module_selection--70f04:hover{
|
|
3429
3444
|
background:var(--surface-cta-surface-icon-hover);
|
|
3430
3445
|
}
|
|
3431
|
-
.bp_base_grid_list_item_module_smallList--
|
|
3446
|
+
.bp_base_grid_list_item_module_smallList--70f04 .bp_base_grid_list_item_module_smallListItem--70f04 .bp_base_grid_list_item_module_actions--70f04 .bp_base_grid_list_item_module_inner--70f04{
|
|
3432
3447
|
align-items:center;
|
|
3433
3448
|
border-radius:var(--radius-2);
|
|
3434
3449
|
display:flex;
|
|
@@ -3436,18 +3451,18 @@
|
|
|
3436
3451
|
justify-content:flex-end;
|
|
3437
3452
|
margin-inline-end:var(--space-2);
|
|
3438
3453
|
}
|
|
3439
|
-
.bp_base_grid_list_item_module_smallList--
|
|
3454
|
+
.bp_base_grid_list_item_module_smallList--70f04 .bp_base_grid_list_item_module_smallListItem--70f04 .bp_base_grid_list_item_module_actions--70f04 .bp_base_grid_list_item_module_inner--70f04:last-child{
|
|
3440
3455
|
margin-inline-end:0;
|
|
3441
3456
|
}
|
|
3442
|
-
.bp_base_grid_list_item_module_smallList--
|
|
3457
|
+
.bp_base_grid_list_item_module_smallList--70f04 .bp_base_grid_list_item_module_smallListItem--70f04 .bp_base_grid_list_item_module_actions--70f04 .bp_base_grid_list_item_module_actionsCheckboxWrapper--70f04{
|
|
3443
3458
|
background:var(--item-hover);
|
|
3444
3459
|
display:flex;
|
|
3445
3460
|
}
|
|
3446
|
-
.bp_base_grid_list_item_module_smallList--
|
|
3461
|
+
.bp_base_grid_list_item_module_smallList--70f04 .bp_base_grid_list_item_module_smallListItem--70f04:hover,.bp_base_grid_list_item_module_smallList--70f04 .bp_base_grid_list_item_module_smallListItem--70f04[data-active-item],.bp_base_grid_list_item_module_smallList--70f04 .bp_base_grid_list_item_module_smallListItem--70f04[data-focus-visible],.bp_base_grid_list_item_module_smallList--70f04 .bp_base_grid_list_item_module_smallListItem--70f04[data-focused],.bp_base_grid_list_item_module_smallList--70f04 .bp_base_grid_list_item_module_smallListItem--70f04[data-hovered]{
|
|
3447
3462
|
--actions-opacity:1;
|
|
3448
3463
|
background:var(--item-hover);
|
|
3449
3464
|
}
|
|
3450
|
-
.bp_base_grid_list_item_module_smallList--
|
|
3465
|
+
.bp_base_grid_list_item_module_smallList--70f04 .bp_base_grid_list_item_module_smallListItem--70f04[data-active-item]::before,.bp_base_grid_list_item_module_smallList--70f04 .bp_base_grid_list_item_module_smallListItem--70f04[data-focus-visible]::before{
|
|
3451
3466
|
--actions-opacity:1;
|
|
3452
3467
|
border-radius:.875rem;
|
|
3453
3468
|
content:"";
|
|
@@ -3461,7 +3476,7 @@
|
|
|
3461
3476
|
width:100%;
|
|
3462
3477
|
}
|
|
3463
3478
|
|
|
3464
|
-
.bp_base_grid_list_item_module_largeList--
|
|
3479
|
+
.bp_base_grid_list_item_module_largeList--70f04{
|
|
3465
3480
|
box-sizing:border-box;
|
|
3466
3481
|
display:flex;
|
|
3467
3482
|
flex-direction:column;
|
|
@@ -3471,7 +3486,7 @@
|
|
|
3471
3486
|
overflow:auto;
|
|
3472
3487
|
padding:var(--space-1);
|
|
3473
3488
|
}
|
|
3474
|
-
.bp_base_grid_list_item_module_largeList--
|
|
3489
|
+
.bp_base_grid_list_item_module_largeList--70f04 .bp_base_grid_list_item_module_largeListItem--70f04{
|
|
3475
3490
|
--thumbnail-size:10rem;
|
|
3476
3491
|
--actions-opacity:0;
|
|
3477
3492
|
--item-background:var(--gray-white);
|
|
@@ -3488,18 +3503,18 @@
|
|
|
3488
3503
|
position:relative;
|
|
3489
3504
|
transform:translateZ(0);
|
|
3490
3505
|
}
|
|
3491
|
-
.bp_base_grid_list_item_module_largeList--
|
|
3506
|
+
.bp_base_grid_list_item_module_largeList--70f04 .bp_base_grid_list_item_module_largeListItem--70f04.bp_base_grid_list_item_module_loading--70f04{
|
|
3492
3507
|
grid-template-rows:1fr 1fr 1fr;
|
|
3493
3508
|
}
|
|
3494
|
-
.bp_base_grid_list_item_module_largeList--
|
|
3509
|
+
.bp_base_grid_list_item_module_largeList--70f04 .bp_base_grid_list_item_module_largeListItem--70f04:focus-within{
|
|
3495
3510
|
--actions-opacity:1;
|
|
3496
3511
|
}
|
|
3497
3512
|
@media (max-width: 374px){
|
|
3498
|
-
.bp_base_grid_list_item_module_largeList--
|
|
3513
|
+
.bp_base_grid_list_item_module_largeList--70f04 .bp_base_grid_list_item_module_largeListItem--70f04{
|
|
3499
3514
|
--thumbnail-size:7.5rem;
|
|
3500
3515
|
}
|
|
3501
3516
|
}
|
|
3502
|
-
.bp_base_grid_list_item_module_largeList--
|
|
3517
|
+
.bp_base_grid_list_item_module_largeList--70f04 .bp_base_grid_list_item_module_largeListItem--70f04 .bp_base_grid_list_item_module_thumbnail--70f04{
|
|
3503
3518
|
aspect-ratio:4/3;
|
|
3504
3519
|
border:var(--border-1) solid var(--gray-10);
|
|
3505
3520
|
border-radius:var(--radius-3);
|
|
@@ -3507,24 +3522,24 @@
|
|
|
3507
3522
|
overflow:hidden;
|
|
3508
3523
|
z-index:1;
|
|
3509
3524
|
}
|
|
3510
|
-
.bp_base_grid_list_item_module_largeList--
|
|
3525
|
+
.bp_base_grid_list_item_module_largeList--70f04 .bp_base_grid_list_item_module_largeListItem--70f04 .bp_base_grid_list_item_module_thumbnail--70f04 img{
|
|
3511
3526
|
height:100%;
|
|
3512
3527
|
object-fit:cover;
|
|
3513
3528
|
object-position:left;
|
|
3514
3529
|
width:100%;
|
|
3515
3530
|
}
|
|
3516
|
-
.bp_base_grid_list_item_module_largeList--
|
|
3531
|
+
.bp_base_grid_list_item_module_largeList--70f04 .bp_base_grid_list_item_module_largeListItem--70f04 .bp_base_grid_list_item_module_thumbnail--70f04.bp_base_grid_list_item_module_loading--70f04{
|
|
3517
3532
|
border:none;
|
|
3518
3533
|
}
|
|
3519
3534
|
@media (max-width: 374px){
|
|
3520
|
-
.bp_base_grid_list_item_module_largeList--
|
|
3535
|
+
.bp_base_grid_list_item_module_largeList--70f04 .bp_base_grid_list_item_module_largeListItem--70f04 .bp_base_grid_list_item_module_thumbnail--70f04{
|
|
3521
3536
|
aspect-ratio:1/1;
|
|
3522
3537
|
}
|
|
3523
|
-
.bp_base_grid_list_item_module_largeList--
|
|
3538
|
+
.bp_base_grid_list_item_module_largeList--70f04 .bp_base_grid_list_item_module_largeListItem--70f04 .bp_base_grid_list_item_module_thumbnail--70f04 img{
|
|
3524
3539
|
object-fit:contain;
|
|
3525
3540
|
}
|
|
3526
3541
|
}
|
|
3527
|
-
.bp_base_grid_list_item_module_largeList--
|
|
3542
|
+
.bp_base_grid_list_item_module_largeList--70f04 .bp_base_grid_list_item_module_largeListItem--70f04 .bp_base_grid_list_item_module_actions--70f04{
|
|
3528
3543
|
align-items:center;
|
|
3529
3544
|
display:flex;
|
|
3530
3545
|
height:var(--space-6);
|
|
@@ -3536,11 +3551,11 @@
|
|
|
3536
3551
|
top:.875rem;
|
|
3537
3552
|
}
|
|
3538
3553
|
@media (pointer: coarse){
|
|
3539
|
-
.bp_base_grid_list_item_module_largeList--
|
|
3554
|
+
.bp_base_grid_list_item_module_largeList--70f04 .bp_base_grid_list_item_module_largeListItem--70f04 .bp_base_grid_list_item_module_actions--70f04{
|
|
3540
3555
|
--actions-opacity:1;
|
|
3541
3556
|
}
|
|
3542
3557
|
}
|
|
3543
|
-
.bp_base_grid_list_item_module_largeList--
|
|
3558
|
+
.bp_base_grid_list_item_module_largeList--70f04 .bp_base_grid_list_item_module_largeListItem--70f04 .bp_base_grid_list_item_module_actions--70f04 .bp_base_grid_list_item_module_selection--70f04{
|
|
3544
3559
|
align-items:center;
|
|
3545
3560
|
background:var(--item-background);
|
|
3546
3561
|
border-radius:var(--radius-2);
|
|
@@ -3549,15 +3564,15 @@
|
|
|
3549
3564
|
justify-content:center;
|
|
3550
3565
|
width:var(--space-8);
|
|
3551
3566
|
}
|
|
3552
|
-
.bp_base_grid_list_item_module_largeList--
|
|
3567
|
+
.bp_base_grid_list_item_module_largeList--70f04 .bp_base_grid_list_item_module_largeListItem--70f04 .bp_base_grid_list_item_module_actions--70f04 .bp_base_grid_list_item_module_selection--70f04:hover{
|
|
3553
3568
|
background:var(--surface-cta-surface-icon-hover);
|
|
3554
3569
|
}
|
|
3555
|
-
.bp_base_grid_list_item_module_largeList--
|
|
3570
|
+
.bp_base_grid_list_item_module_largeList--70f04 .bp_base_grid_list_item_module_largeListItem--70f04 .bp_base_grid_list_item_module_actions--70f04 .bp_base_grid_list_item_module_fade--70f04{
|
|
3556
3571
|
align-self:stretch;
|
|
3557
3572
|
background:linear-gradient(270deg, #fff 0, #fff0 100%);
|
|
3558
3573
|
width:var(--size-8);
|
|
3559
3574
|
}
|
|
3560
|
-
.bp_base_grid_list_item_module_largeList--
|
|
3575
|
+
.bp_base_grid_list_item_module_largeList--70f04 .bp_base_grid_list_item_module_largeListItem--70f04 .bp_base_grid_list_item_module_actions--70f04 .bp_base_grid_list_item_module_inner--70f04{
|
|
3561
3576
|
align-items:center;
|
|
3562
3577
|
background:var(--item-background);
|
|
3563
3578
|
border-radius:var(--radius-2);
|
|
@@ -3566,14 +3581,14 @@
|
|
|
3566
3581
|
justify-content:flex-end;
|
|
3567
3582
|
margin-inline-end:var(--space-2);
|
|
3568
3583
|
}
|
|
3569
|
-
.bp_base_grid_list_item_module_largeList--
|
|
3584
|
+
.bp_base_grid_list_item_module_largeList--70f04 .bp_base_grid_list_item_module_largeListItem--70f04 .bp_base_grid_list_item_module_actions--70f04 .bp_base_grid_list_item_module_inner--70f04:last-child{
|
|
3570
3585
|
margin-inline-end:0;
|
|
3571
3586
|
}
|
|
3572
|
-
.bp_base_grid_list_item_module_largeList--
|
|
3587
|
+
.bp_base_grid_list_item_module_largeList--70f04 .bp_base_grid_list_item_module_largeListItem--70f04 .bp_base_grid_list_item_module_actions--70f04 .bp_base_grid_list_item_module_actionsCheckboxWrapper--70f04{
|
|
3573
3588
|
background:var(--item-background);
|
|
3574
3589
|
display:flex;
|
|
3575
3590
|
}
|
|
3576
|
-
.bp_base_grid_list_item_module_largeList--
|
|
3591
|
+
.bp_base_grid_list_item_module_largeList--70f04 .bp_base_grid_list_item_module_largeListItem--70f04 .bp_base_grid_list_item_module_header--70f04{
|
|
3577
3592
|
align-items:center;
|
|
3578
3593
|
color:var(--text-text-on-light);
|
|
3579
3594
|
display:inline-flex;
|
|
@@ -3590,7 +3605,7 @@
|
|
|
3590
3605
|
text-transform:none;
|
|
3591
3606
|
white-space:nowrap;
|
|
3592
3607
|
}
|
|
3593
|
-
.bp_base_grid_list_item_module_largeList--
|
|
3608
|
+
.bp_base_grid_list_item_module_largeList--70f04 .bp_base_grid_list_item_module_largeListItem--70f04 .bp_base_grid_list_item_module_subtitle--70f04{
|
|
3594
3609
|
align-items:center;
|
|
3595
3610
|
color:var(--text-text-on-light-secondary);
|
|
3596
3611
|
display:flex;
|
|
@@ -3605,7 +3620,7 @@
|
|
|
3605
3620
|
text-transform:none;
|
|
3606
3621
|
white-space:nowrap;
|
|
3607
3622
|
}
|
|
3608
|
-
.bp_base_grid_list_item_module_largeList--
|
|
3623
|
+
.bp_base_grid_list_item_module_largeList--70f04 .bp_base_grid_list_item_module_largeListItem--70f04 .bp_base_grid_list_item_module_description--70f04{
|
|
3609
3624
|
-webkit-box-orient:vertical;
|
|
3610
3625
|
-webkit-line-clamp:3;
|
|
3611
3626
|
color:var(--text-text-on-light);
|
|
@@ -3623,13 +3638,13 @@
|
|
|
3623
3638
|
text-decoration:none;
|
|
3624
3639
|
text-transform:none;
|
|
3625
3640
|
}
|
|
3626
|
-
.bp_base_grid_list_item_module_largeList--
|
|
3641
|
+
.bp_base_grid_list_item_module_largeList--70f04 .bp_base_grid_list_item_module_largeListItem--70f04 .bp_base_grid_list_item_module_snippet--70f04{
|
|
3627
3642
|
grid-area:description;
|
|
3628
3643
|
margin:0;
|
|
3629
3644
|
margin-block-end:var(--space-1);
|
|
3630
3645
|
margin-block-start:var(--space-3);
|
|
3631
3646
|
}
|
|
3632
|
-
.bp_base_grid_list_item_module_largeList--
|
|
3647
|
+
.bp_base_grid_list_item_module_largeList--70f04 .bp_base_grid_list_item_module_largeListItem--70f04 .bp_base_grid_list_item_module_snippet--70f04 .bp_base_grid_list_item_module_snippetContent--70f04{
|
|
3633
3648
|
-webkit-box-orient:vertical;
|
|
3634
3649
|
-webkit-line-clamp:2;
|
|
3635
3650
|
border:0 0 0 var(--space-05);
|
|
@@ -3648,12 +3663,12 @@
|
|
|
3648
3663
|
text-decoration:none;
|
|
3649
3664
|
text-transform:none;
|
|
3650
3665
|
}
|
|
3651
|
-
.bp_base_grid_list_item_module_largeList--
|
|
3666
|
+
.bp_base_grid_list_item_module_largeList--70f04 .bp_base_grid_list_item_module_largeListItem--70f04:hover,.bp_base_grid_list_item_module_largeList--70f04 .bp_base_grid_list_item_module_largeListItem--70f04[data-active-item],.bp_base_grid_list_item_module_largeList--70f04 .bp_base_grid_list_item_module_largeListItem--70f04[data-focus-visible],.bp_base_grid_list_item_module_largeList--70f04 .bp_base_grid_list_item_module_largeListItem--70f04[data-focused],.bp_base_grid_list_item_module_largeList--70f04 .bp_base_grid_list_item_module_largeListItem--70f04[data-hovered]{
|
|
3652
3667
|
--actions-opacity:1;
|
|
3653
3668
|
box-shadow:var(--dropshadow-2);
|
|
3654
3669
|
outline:var(--border-1) solid var(--border-card-border);
|
|
3655
3670
|
}
|
|
3656
|
-
.bp_base_grid_list_item_module_largeList--
|
|
3671
|
+
.bp_base_grid_list_item_module_largeList--70f04 .bp_base_grid_list_item_module_largeListItem--70f04[data-active-item]::before,.bp_base_grid_list_item_module_largeList--70f04 .bp_base_grid_list_item_module_largeListItem--70f04[data-focus-visible]::before{
|
|
3657
3672
|
border-radius:.875rem;
|
|
3658
3673
|
content:"";
|
|
3659
3674
|
display:block;
|
|
@@ -3665,31 +3680,31 @@
|
|
|
3665
3680
|
top:0;
|
|
3666
3681
|
width:100%;
|
|
3667
3682
|
}
|
|
3668
|
-
.bp_base_grid_list_item_module_largeList--
|
|
3683
|
+
.bp_base_grid_list_item_module_largeList--70f04 .bp_base_grid_list_item_module_largeListItem--70f04[aria-selected=true]{
|
|
3669
3684
|
--actions-opacity:1;
|
|
3670
3685
|
--item-background:var(--box-blue-05);
|
|
3671
3686
|
outline:var(--border-2) solid var(--border-card-border-focus);
|
|
3672
3687
|
z-index:2;
|
|
3673
3688
|
}
|
|
3674
|
-
.bp_base_grid_list_item_module_largeList--
|
|
3689
|
+
.bp_base_grid_list_item_module_largeList--70f04 .bp_base_grid_list_item_module_largeListItem--70f04[aria-selected=true] .bp_base_grid_list_item_module_actions--70f04 .bp_base_grid_list_item_module_fade--70f04{
|
|
3675
3690
|
background:linear-gradient(270deg, #f2f7fd 0, #f2f7fd00 100%);
|
|
3676
3691
|
}
|
|
3677
|
-
.bp_base_grid_list_item_module_largeList--
|
|
3692
|
+
.bp_base_grid_list_item_module_largeList--70f04 .bp_base_grid_list_item_module_largeListItem--70f04[aria-selected=true]:not([data-hovered], [data-focus-visible], [data-focused]) .bp_base_grid_list_item_module_actions--70f04 .bp_base_grid_list_item_module_inner--70f04{
|
|
3678
3693
|
display:none;
|
|
3679
3694
|
}
|
|
3680
3695
|
@supports selector(:has(.foo)){
|
|
3681
|
-
.bp_base_grid_list_item_module_largeList--
|
|
3696
|
+
.bp_base_grid_list_item_module_largeList--70f04 .bp_base_grid_list_item_module_largeListItem--70f04[aria-selected=true]:has(+ .bp_base_grid_list_item_module_react-aria-DropIndicator--70f04 + [aria-selected=true]),.bp_base_grid_list_item_module_largeList--70f04 .bp_base_grid_list_item_module_largeListItem--70f04[aria-selected=true]:has(+ [aria-selected=true]){
|
|
3682
3697
|
border-end-end-radius:0;
|
|
3683
3698
|
border-end-start-radius:0;
|
|
3684
3699
|
}
|
|
3685
|
-
.bp_base_grid_list_item_module_largeList--
|
|
3700
|
+
.bp_base_grid_list_item_module_largeList--70f04 .bp_base_grid_list_item_module_largeListItem--70f04[aria-selected=true] + .bp_base_grid_list_item_module_react-aria-DropIndicator--70f04 + [aria-selected=true],.bp_base_grid_list_item_module_largeList--70f04 .bp_base_grid_list_item_module_largeListItem--70f04[aria-selected=true] + [aria-selected=true]{
|
|
3686
3701
|
border-start-end-radius:0;
|
|
3687
3702
|
border-start-start-radius:0;
|
|
3688
3703
|
border-top:none;
|
|
3689
3704
|
}
|
|
3690
3705
|
}
|
|
3691
3706
|
|
|
3692
|
-
.bp_base_grid_list_item_module_gridList--
|
|
3707
|
+
.bp_base_grid_list_item_module_gridList--70f04{
|
|
3693
3708
|
box-sizing:border-box;
|
|
3694
3709
|
display:grid;
|
|
3695
3710
|
gap:var(--space-4);
|
|
@@ -3699,7 +3714,7 @@
|
|
|
3699
3714
|
overflow:auto;
|
|
3700
3715
|
padding:var(--space-1);
|
|
3701
3716
|
}
|
|
3702
|
-
.bp_base_grid_list_item_module_gridList--
|
|
3717
|
+
.bp_base_grid_list_item_module_gridList--70f04 .bp_base_grid_list_item_module_gridListItem--70f04{
|
|
3703
3718
|
--actions-opacity:0;
|
|
3704
3719
|
--item-background:var(--gray-white);
|
|
3705
3720
|
--row-gap:var(--space-2);
|
|
@@ -3717,15 +3732,15 @@
|
|
|
3717
3732
|
row-gap:var(--row-gap);
|
|
3718
3733
|
transform:translateZ(0);
|
|
3719
3734
|
}
|
|
3720
|
-
.bp_base_grid_list_item_module_gridList--
|
|
3735
|
+
.bp_base_grid_list_item_module_gridList--70f04 .bp_base_grid_list_item_module_gridListItem--70f04:focus-within{
|
|
3721
3736
|
--actions-opacity:1;
|
|
3722
3737
|
}
|
|
3723
|
-
.bp_base_grid_list_item_module_gridList--
|
|
3738
|
+
.bp_base_grid_list_item_module_gridList--70f04 .bp_base_grid_list_item_module_gridListItem--70f04 .bp_base_grid_list_item_module_statusPin--70f04{
|
|
3724
3739
|
left:var(--space-3);
|
|
3725
3740
|
position:absolute;
|
|
3726
3741
|
top:var(--space-3);
|
|
3727
3742
|
}
|
|
3728
|
-
.bp_base_grid_list_item_module_gridList--
|
|
3743
|
+
.bp_base_grid_list_item_module_gridList--70f04 .bp_base_grid_list_item_module_gridListItem--70f04 .bp_base_grid_list_item_module_thumbnail--70f04{
|
|
3729
3744
|
aspect-ratio:4/3;
|
|
3730
3745
|
background:var(--gray-white);
|
|
3731
3746
|
border:var(--border-1) solid var(--border-gridthumbnail-border);
|
|
@@ -3733,25 +3748,25 @@
|
|
|
3733
3748
|
grid-area:thumbnail;
|
|
3734
3749
|
overflow:hidden;
|
|
3735
3750
|
}
|
|
3736
|
-
.bp_base_grid_list_item_module_gridList--
|
|
3751
|
+
.bp_base_grid_list_item_module_gridList--70f04 .bp_base_grid_list_item_module_gridListItem--70f04 .bp_base_grid_list_item_module_thumbnail--70f04 img{
|
|
3737
3752
|
height:100%;
|
|
3738
3753
|
object-fit:contain;
|
|
3739
3754
|
width:100%;
|
|
3740
3755
|
}
|
|
3741
|
-
.bp_base_grid_list_item_module_gridList--
|
|
3756
|
+
.bp_base_grid_list_item_module_gridList--70f04 .bp_base_grid_list_item_module_gridListItem--70f04 .bp_base_grid_list_item_module_thumbnail--70f04.bp_base_grid_list_item_module_loading--70f04{
|
|
3742
3757
|
border:none;
|
|
3743
3758
|
}
|
|
3744
3759
|
@media (pointer: coarse){
|
|
3745
|
-
.bp_base_grid_list_item_module_gridList--
|
|
3760
|
+
.bp_base_grid_list_item_module_gridList--70f04 .bp_base_grid_list_item_module_gridListItem--70f04 .bp_base_grid_list_item_module_thumbnail--70f04{
|
|
3746
3761
|
margin-block-end:var(--space-1);
|
|
3747
3762
|
}
|
|
3748
3763
|
}
|
|
3749
|
-
.bp_base_grid_list_item_module_gridList--
|
|
3764
|
+
.bp_base_grid_list_item_module_gridList--70f04 .bp_base_grid_list_item_module_gridListItem--70f04 .bp_base_grid_list_item_module_actions--70f04{
|
|
3750
3765
|
grid-area:subtitle;
|
|
3751
3766
|
margin-block-start:-.25rem;
|
|
3752
3767
|
opacity:var(--actions-opacity);
|
|
3753
3768
|
}
|
|
3754
|
-
.bp_base_grid_list_item_module_gridList--
|
|
3769
|
+
.bp_base_grid_list_item_module_gridList--70f04 .bp_base_grid_list_item_module_gridListItem--70f04 .bp_base_grid_list_item_module_actions--70f04 .bp_base_grid_list_item_module_selection--70f04{
|
|
3755
3770
|
align-items:center;
|
|
3756
3771
|
border-radius:var(--radius-2);
|
|
3757
3772
|
display:flex;
|
|
@@ -3762,10 +3777,10 @@
|
|
|
3762
3777
|
top:var(--space-2);
|
|
3763
3778
|
width:var(--space-8);
|
|
3764
3779
|
}
|
|
3765
|
-
.bp_base_grid_list_item_module_gridList--
|
|
3780
|
+
.bp_base_grid_list_item_module_gridList--70f04 .bp_base_grid_list_item_module_gridListItem--70f04 .bp_base_grid_list_item_module_actions--70f04 .bp_base_grid_list_item_module_selection--70f04:hover{
|
|
3766
3781
|
background:var(--surface-cta-surface-icon-hover);
|
|
3767
3782
|
}
|
|
3768
|
-
.bp_base_grid_list_item_module_gridList--
|
|
3783
|
+
.bp_base_grid_list_item_module_gridList--70f04 .bp_base_grid_list_item_module_gridListItem--70f04 .bp_base_grid_list_item_module_actions--70f04 .bp_base_grid_list_item_module_inner--70f04{
|
|
3769
3784
|
align-items:center;
|
|
3770
3785
|
background:var(--item-background);
|
|
3771
3786
|
border-radius:var(--radius-2);
|
|
@@ -3774,12 +3789,12 @@
|
|
|
3774
3789
|
justify-content:center;
|
|
3775
3790
|
}
|
|
3776
3791
|
@media (pointer: coarse){
|
|
3777
|
-
.bp_base_grid_list_item_module_gridList--
|
|
3792
|
+
.bp_base_grid_list_item_module_gridList--70f04 .bp_base_grid_list_item_module_gridListItem--70f04 .bp_base_grid_list_item_module_actions--70f04{
|
|
3778
3793
|
grid-area:actions;
|
|
3779
3794
|
margin-block-start:0;
|
|
3780
3795
|
}
|
|
3781
3796
|
}
|
|
3782
|
-
.bp_base_grid_list_item_module_gridList--
|
|
3797
|
+
.bp_base_grid_list_item_module_gridList--70f04 .bp_base_grid_list_item_module_gridListItem--70f04 .bp_base_grid_list_item_module_header--70f04{
|
|
3783
3798
|
-webkit-box-orient:vertical;
|
|
3784
3799
|
-webkit-line-clamp:2;
|
|
3785
3800
|
color:var(--text-text-on-light);
|
|
@@ -3796,11 +3811,11 @@
|
|
|
3796
3811
|
text-decoration:none;
|
|
3797
3812
|
text-transform:none;
|
|
3798
3813
|
}
|
|
3799
|
-
.bp_base_grid_list_item_module_gridList--
|
|
3814
|
+
.bp_base_grid_list_item_module_gridList--70f04 .bp_base_grid_list_item_module_gridListItem--70f04 .bp_base_grid_list_item_module_header--70f04.bp_base_grid_list_item_module_loading--70f04{
|
|
3800
3815
|
align-items:center;
|
|
3801
3816
|
display:flex;
|
|
3802
3817
|
}
|
|
3803
|
-
.bp_base_grid_list_item_module_gridList--
|
|
3818
|
+
.bp_base_grid_list_item_module_gridList--70f04 .bp_base_grid_list_item_module_gridListItem--70f04 .bp_base_grid_list_item_module_subtitle--70f04{
|
|
3804
3819
|
color:var(--text-text-on-light-secondary);
|
|
3805
3820
|
font-family:Lato, -apple-system, BlinkMacSystemFont, "San Francisco", "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
|
|
3806
3821
|
font-size:.75rem;
|
|
@@ -3816,15 +3831,15 @@
|
|
|
3816
3831
|
text-transform:none;
|
|
3817
3832
|
white-space:nowrap;
|
|
3818
3833
|
}
|
|
3819
|
-
.bp_base_grid_list_item_module_gridList--
|
|
3834
|
+
.bp_base_grid_list_item_module_gridList--70f04 .bp_base_grid_list_item_module_gridListItem--70f04 .bp_base_grid_list_item_module_subtitle--70f04.bp_base_grid_list_item_module_loading--70f04{
|
|
3820
3835
|
height:1.25rem;
|
|
3821
3836
|
}
|
|
3822
|
-
.bp_base_grid_list_item_module_gridList--
|
|
3837
|
+
.bp_base_grid_list_item_module_gridList--70f04 .bp_base_grid_list_item_module_gridListItem--70f04.bp_base_grid_list_item_module_isItemInteracted--70f04,.bp_base_grid_list_item_module_gridList--70f04 .bp_base_grid_list_item_module_gridListItem--70f04:hover,.bp_base_grid_list_item_module_gridList--70f04 .bp_base_grid_list_item_module_gridListItem--70f04[data-active-item],.bp_base_grid_list_item_module_gridList--70f04 .bp_base_grid_list_item_module_gridListItem--70f04[data-focus-visible],.bp_base_grid_list_item_module_gridList--70f04 .bp_base_grid_list_item_module_gridListItem--70f04[data-focused],.bp_base_grid_list_item_module_gridList--70f04 .bp_base_grid_list_item_module_gridListItem--70f04[data-hovered]{
|
|
3823
3838
|
--actions-opacity:1;
|
|
3824
3839
|
box-shadow:var(--dropshadow-2);
|
|
3825
3840
|
outline:var(--border-1) solid var(--border-card-border);
|
|
3826
3841
|
}
|
|
3827
|
-
.bp_base_grid_list_item_module_gridList--
|
|
3842
|
+
.bp_base_grid_list_item_module_gridList--70f04 .bp_base_grid_list_item_module_gridListItem--70f04[data-active-item]::before,.bp_base_grid_list_item_module_gridList--70f04 .bp_base_grid_list_item_module_gridListItem--70f04[data-focus-visible]::before{
|
|
3828
3843
|
border-radius:var(--radius-3);
|
|
3829
3844
|
content:"";
|
|
3830
3845
|
display:block;
|
|
@@ -3836,7 +3851,7 @@
|
|
|
3836
3851
|
top:0;
|
|
3837
3852
|
width:100%;
|
|
3838
3853
|
}
|
|
3839
|
-
.bp_base_grid_list_item_module_gridList--
|
|
3854
|
+
.bp_base_grid_list_item_module_gridList--70f04 .bp_base_grid_list_item_module_gridListItem--70f04[data-active-item]::after,.bp_base_grid_list_item_module_gridList--70f04 .bp_base_grid_list_item_module_gridListItem--70f04[data-focus-visible]::after{
|
|
3840
3855
|
border-radius:var(--radius-3);
|
|
3841
3856
|
content:"";
|
|
3842
3857
|
display:block;
|
|
@@ -3848,16 +3863,16 @@
|
|
|
3848
3863
|
top:0;
|
|
3849
3864
|
width:100%;
|
|
3850
3865
|
}
|
|
3851
|
-
.bp_base_grid_list_item_module_gridList--
|
|
3866
|
+
.bp_base_grid_list_item_module_gridList--70f04 .bp_base_grid_list_item_module_gridListItem--70f04[aria-selected=true]{
|
|
3852
3867
|
--actions-opacity:1;
|
|
3853
3868
|
--item-background:var(--box-blue-05);
|
|
3854
3869
|
outline:var(--border-2) solid var(--border-card-border-focus);
|
|
3855
3870
|
}
|
|
3856
|
-
.bp_base_grid_list_item_module_gridList--
|
|
3871
|
+
.bp_base_grid_list_item_module_gridList--70f04 .bp_base_grid_list_item_module_gridListItem--70f04[aria-selected=true]:not([data-hovered], [data-focus-visible], [data-focused], .bp_base_grid_list_item_module_isItemInteracted--70f04) .bp_base_grid_list_item_module_actions--70f04 .bp_base_grid_list_item_module_inner--70f04{
|
|
3857
3872
|
opacity:0;
|
|
3858
3873
|
}
|
|
3859
3874
|
@media (pointer: coarse){
|
|
3860
|
-
.bp_base_grid_list_item_module_gridList--
|
|
3875
|
+
.bp_base_grid_list_item_module_gridList--70f04 .bp_base_grid_list_item_module_gridListItem--70f04{
|
|
3861
3876
|
--row-gap:var(--space-1);
|
|
3862
3877
|
--actions-opacity:1;
|
|
3863
3878
|
grid-template-areas:"thumbnail" "head" "subtitle" "actions";
|
|
@@ -3865,7 +3880,7 @@
|
|
|
3865
3880
|
}
|
|
3866
3881
|
}
|
|
3867
3882
|
|
|
3868
|
-
.bp_base_grid_list_item_module_tooltipContent--
|
|
3883
|
+
.bp_base_grid_list_item_module_tooltipContent--70f04{
|
|
3869
3884
|
background-color:var(--surface-tooltip-surface);
|
|
3870
3885
|
border:var(--border-1) solid var(--surface-tooltip-surface);
|
|
3871
3886
|
border-radius:var(--radius-1);
|
|
@@ -3883,28 +3898,28 @@
|
|
|
3883
3898
|
word-break:break-word;
|
|
3884
3899
|
z-index:2147483647;
|
|
3885
3900
|
}
|
|
3886
|
-
.bp_base_grid_list_item_module_tooltipContent--
|
|
3901
|
+
.bp_base_grid_list_item_module_tooltipContent--70f04 .bp_base_grid_list_item_module_tooltipArrow--70f04 svg{
|
|
3887
3902
|
display:block;
|
|
3888
3903
|
height:.5rem;
|
|
3889
3904
|
width:1rem;
|
|
3890
3905
|
}
|
|
3891
|
-
.bp_base_grid_list_item_module_tooltipContent--
|
|
3906
|
+
.bp_base_grid_list_item_module_tooltipContent--70f04[data-placement=top]{
|
|
3892
3907
|
margin-block-end:var(--space-2);
|
|
3893
3908
|
}
|
|
3894
|
-
.bp_base_grid_list_item_module_tooltipContent--
|
|
3909
|
+
.bp_base_grid_list_item_module_tooltipContent--70f04[data-placement=top] .bp_base_grid_list_item_module_tooltipArrow--70f04 svg{
|
|
3895
3910
|
transform:rotate(180deg);
|
|
3896
3911
|
}
|
|
3897
|
-
.bp_base_grid_list_item_module_tooltipContent--
|
|
3912
|
+
.bp_base_grid_list_item_module_tooltipContent--70f04[data-placement=bottom]{
|
|
3898
3913
|
margin-block-start:var(--space-2);
|
|
3899
3914
|
}
|
|
3900
|
-
.bp_base_grid_list_item_module_tooltipContent--
|
|
3915
|
+
.bp_base_grid_list_item_module_tooltipContent--70f04[data-placement=right]{
|
|
3901
3916
|
margin-inline-start:var(--space-2);
|
|
3902
3917
|
}
|
|
3903
|
-
.bp_base_grid_list_item_module_tooltipContent--
|
|
3918
|
+
.bp_base_grid_list_item_module_tooltipContent--70f04[data-placement=left]{
|
|
3904
3919
|
margin-inline-end:var(--space-2);
|
|
3905
3920
|
}
|
|
3906
3921
|
|
|
3907
|
-
.bp_base_grid_list_item_module_staticList--
|
|
3922
|
+
.bp_base_grid_list_item_module_staticList--70f04 .bp_base_grid_list_item_module_staticListItem--70f04{
|
|
3908
3923
|
display:contents;
|
|
3909
3924
|
}
|
|
3910
3925
|
|
|
@@ -4605,23 +4620,24 @@ table.bp_inline_table_module_inlineTable--b023b tr:not(:last-child) td{
|
|
|
4605
4620
|
width:100%;
|
|
4606
4621
|
}
|
|
4607
4622
|
|
|
4608
|
-
.bp_password_input_module_passwordInput--
|
|
4623
|
+
.bp_password_input_module_passwordInput--c5ea1 input[type=password],.bp_password_input_module_passwordInput--c5ea1 input[type=text]{
|
|
4609
4624
|
padding-inline-end:2.375rem;
|
|
4610
4625
|
}
|
|
4611
|
-
.bp_password_input_module_passwordInput--
|
|
4626
|
+
.bp_password_input_module_passwordInput--c5ea1 .bp_password_input_module_iconButton--c5ea1{
|
|
4627
|
+
height:1.5rem;
|
|
4612
4628
|
inset-inline-end:.5rem;
|
|
4629
|
+
width:1.5rem;
|
|
4613
4630
|
}
|
|
4614
|
-
.bp_password_input_module_passwordInput--
|
|
4631
|
+
.bp_password_input_module_passwordInput--c5ea1 .bp_password_input_module_iconButton--c5ea1:active,.bp_password_input_module_passwordInput--c5ea1 .bp_password_input_module_iconButton--c5ea1:hover{
|
|
4615
4632
|
background:none;
|
|
4616
4633
|
}
|
|
4617
4634
|
|
|
4618
|
-
.
|
|
4635
|
+
.bp_base_text_input_module_textInputContainerOuter--3d7b7{
|
|
4619
4636
|
display:flex;
|
|
4620
4637
|
flex-direction:column;
|
|
4621
4638
|
font-weight:400;
|
|
4622
|
-
position:relative;
|
|
4623
4639
|
}
|
|
4624
|
-
.
|
|
4640
|
+
.bp_base_text_input_module_textInputContainerOuter--3d7b7,.bp_base_text_input_module_textInputContainerOuter--3d7b7 .bp_base_text_input_module_label--3d7b7{
|
|
4625
4641
|
font-family:Lato, -apple-system, BlinkMacSystemFont, "San Francisco", "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
|
|
4626
4642
|
font-size:.875rem;
|
|
4627
4643
|
letter-spacing:.01875rem;
|
|
@@ -4629,17 +4645,22 @@ table.bp_inline_table_module_inlineTable--b023b tr:not(:last-child) td{
|
|
|
4629
4645
|
text-decoration:none;
|
|
4630
4646
|
text-transform:none;
|
|
4631
4647
|
}
|
|
4632
|
-
.
|
|
4648
|
+
.bp_base_text_input_module_textInputContainerOuter--3d7b7 .bp_base_text_input_module_label--3d7b7{
|
|
4633
4649
|
color:#222;
|
|
4634
4650
|
flex:0 0 fit-content;
|
|
4635
4651
|
font-weight:700;
|
|
4636
4652
|
width:-moz-fit-content;
|
|
4637
4653
|
width:fit-content;
|
|
4638
4654
|
}
|
|
4639
|
-
.
|
|
4655
|
+
.bp_base_text_input_module_textInputContainerOuter--3d7b7 .bp_base_text_input_module_label--3d7b7:not(.bp_base_text_input_module_hidden--3d7b7){
|
|
4640
4656
|
margin-block-end:var(--space-2);
|
|
4641
4657
|
}
|
|
4642
|
-
.
|
|
4658
|
+
.bp_base_text_input_module_textInputContainerOuter--3d7b7 .bp_base_text_input_module_textInputContainer--3d7b7{
|
|
4659
|
+
display:flex;
|
|
4660
|
+
height:2.5rem;
|
|
4661
|
+
position:relative;
|
|
4662
|
+
}
|
|
4663
|
+
.bp_base_text_input_module_textInputContainerOuter--3d7b7 .bp_base_text_input_module_textInputContainer--3d7b7 .bp_base_text_input_module_textInput--3d7b7,.bp_base_text_input_module_textInputContainerOuter--3d7b7 .bp_base_text_input_module_textInputContainer--3d7b7 input[type=number].bp_base_text_input_module_textInput--3d7b7,.bp_base_text_input_module_textInputContainerOuter--3d7b7 .bp_base_text_input_module_textInputContainer--3d7b7 input[type=text].bp_base_text_input_module_textInput--3d7b7{
|
|
4643
4664
|
background:#fff;
|
|
4644
4665
|
border:.0625rem solid #909090;
|
|
4645
4666
|
border-radius:.375rem;
|
|
@@ -4649,62 +4670,83 @@ table.bp_inline_table_module_inlineTable--b023b tr:not(:last-child) td{
|
|
|
4649
4670
|
font-family:Lato, -apple-system, BlinkMacSystemFont, "San Francisco", "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
|
|
4650
4671
|
font-size:.875rem;
|
|
4651
4672
|
font-weight:400;
|
|
4652
|
-
height:
|
|
4673
|
+
height:100%;
|
|
4653
4674
|
letter-spacing:.01875rem;
|
|
4654
4675
|
line-height:1.25rem;
|
|
4655
4676
|
padding-block:0;
|
|
4656
4677
|
padding-inline:.75rem;
|
|
4657
4678
|
text-decoration:none;
|
|
4658
4679
|
text-transform:none;
|
|
4659
|
-
width:
|
|
4680
|
+
width:100%;
|
|
4660
4681
|
}
|
|
4661
|
-
.bp_base_text_input_module_textInputContainer--
|
|
4682
|
+
.bp_base_text_input_module_textInputContainerOuter--3d7b7 .bp_base_text_input_module_textInputContainer--3d7b7 .bp_base_text_input_module_textInput--3d7b7:hover,.bp_base_text_input_module_textInputContainerOuter--3d7b7 .bp_base_text_input_module_textInputContainer--3d7b7 input[type=number].bp_base_text_input_module_textInput--3d7b7:hover,.bp_base_text_input_module_textInputContainerOuter--3d7b7 .bp_base_text_input_module_textInputContainer--3d7b7 input[type=text].bp_base_text_input_module_textInput--3d7b7:hover{
|
|
4662
4683
|
box-shadow:var(--innershadow-1);
|
|
4663
4684
|
}
|
|
4664
|
-
.bp_base_text_input_module_textInputContainer--
|
|
4685
|
+
.bp_base_text_input_module_textInputContainerOuter--3d7b7 .bp_base_text_input_module_textInputContainer--3d7b7 .bp_base_text_input_module_textInput--3d7b7::placeholder,.bp_base_text_input_module_textInputContainerOuter--3d7b7 .bp_base_text_input_module_textInputContainer--3d7b7 input[type=number].bp_base_text_input_module_textInput--3d7b7::placeholder,.bp_base_text_input_module_textInputContainerOuter--3d7b7 .bp_base_text_input_module_textInputContainer--3d7b7 input[type=text].bp_base_text_input_module_textInput--3d7b7::placeholder{
|
|
4665
4686
|
color:#6f6f6f;
|
|
4666
4687
|
opacity:1;
|
|
4667
4688
|
}
|
|
4668
|
-
.bp_base_text_input_module_textInputContainer--
|
|
4689
|
+
.bp_base_text_input_module_textInputContainerOuter--3d7b7 .bp_base_text_input_module_textInputContainer--3d7b7 .bp_base_text_input_module_textInput--3d7b7.bp_base_text_input_module_error--3d7b7,.bp_base_text_input_module_textInputContainerOuter--3d7b7 .bp_base_text_input_module_textInputContainer--3d7b7 input[type=number].bp_base_text_input_module_textInput--3d7b7.bp_base_text_input_module_error--3d7b7,.bp_base_text_input_module_textInputContainerOuter--3d7b7 .bp_base_text_input_module_textInputContainer--3d7b7 input[type=text].bp_base_text_input_module_textInput--3d7b7.bp_base_text_input_module_error--3d7b7{
|
|
4669
4690
|
background:#fff;
|
|
4670
4691
|
border:.125rem solid #ed3757;
|
|
4671
4692
|
outline:0;
|
|
4672
4693
|
padding-inline-start:.6875rem;
|
|
4673
4694
|
}
|
|
4674
|
-
.bp_base_text_input_module_textInputContainer--
|
|
4695
|
+
.bp_base_text_input_module_textInputContainerOuter--3d7b7 .bp_base_text_input_module_textInputContainer--3d7b7 .bp_base_text_input_module_textInput--3d7b7.bp_base_text_input_module_readOnly--3d7b7,.bp_base_text_input_module_textInputContainerOuter--3d7b7 .bp_base_text_input_module_textInputContainer--3d7b7 input[type=number].bp_base_text_input_module_textInput--3d7b7.bp_base_text_input_module_readOnly--3d7b7,.bp_base_text_input_module_textInputContainerOuter--3d7b7 .bp_base_text_input_module_textInputContainer--3d7b7 input[type=text].bp_base_text_input_module_textInput--3d7b7.bp_base_text_input_module_readOnly--3d7b7{
|
|
4696
|
+
border-color:var(--border-collapsible-border);
|
|
4697
|
+
box-shadow:var(--innershadow-1);
|
|
4698
|
+
color:var(--text-text-on-light-secondary);
|
|
4699
|
+
}
|
|
4700
|
+
.bp_base_text_input_module_textInputContainerOuter--3d7b7 .bp_base_text_input_module_textInputContainer--3d7b7 .bp_base_text_input_module_textInput--3d7b7.bp_base_text_input_module_readOnly--3d7b7:focus-visible,.bp_base_text_input_module_textInputContainerOuter--3d7b7 .bp_base_text_input_module_textInputContainer--3d7b7 input[type=number].bp_base_text_input_module_textInput--3d7b7.bp_base_text_input_module_readOnly--3d7b7:focus-visible,.bp_base_text_input_module_textInputContainerOuter--3d7b7 .bp_base_text_input_module_textInputContainer--3d7b7 input[type=text].bp_base_text_input_module_textInput--3d7b7.bp_base_text_input_module_readOnly--3d7b7:focus-visible{
|
|
4701
|
+
border:.125rem solid #2486fc;
|
|
4702
|
+
}
|
|
4703
|
+
.bp_base_text_input_module_textInputContainerOuter--3d7b7 .bp_base_text_input_module_textInputContainer--3d7b7 .bp_base_text_input_module_textInput--3d7b7.bp_base_text_input_module_readOnly--3d7b7:hover,.bp_base_text_input_module_textInputContainerOuter--3d7b7 .bp_base_text_input_module_textInputContainer--3d7b7 input[type=number].bp_base_text_input_module_textInput--3d7b7.bp_base_text_input_module_readOnly--3d7b7:hover,.bp_base_text_input_module_textInputContainerOuter--3d7b7 .bp_base_text_input_module_textInputContainer--3d7b7 input[type=text].bp_base_text_input_module_textInput--3d7b7.bp_base_text_input_module_readOnly--3d7b7:hover{
|
|
4704
|
+
cursor:default;
|
|
4705
|
+
}
|
|
4706
|
+
.bp_base_text_input_module_textInputContainerOuter--3d7b7 .bp_base_text_input_module_textInputContainer--3d7b7 .bp_base_text_input_module_textInput--3d7b7:disabled,.bp_base_text_input_module_textInputContainerOuter--3d7b7 .bp_base_text_input_module_textInputContainer--3d7b7 input[type=number].bp_base_text_input_module_textInput--3d7b7:disabled,.bp_base_text_input_module_textInputContainerOuter--3d7b7 .bp_base_text_input_module_textInputContainer--3d7b7 input[type=text].bp_base_text_input_module_textInput--3d7b7:disabled{
|
|
4675
4707
|
background:var(--surface-input-surface);
|
|
4676
4708
|
border-color:var(--border-input-border);
|
|
4677
4709
|
box-shadow:var(--innershadow-1);
|
|
4678
4710
|
color:var(--text-text-on-light);
|
|
4679
4711
|
}
|
|
4680
|
-
.bp_base_text_input_module_textInputContainer--
|
|
4712
|
+
.bp_base_text_input_module_textInputContainerOuter--3d7b7 .bp_base_text_input_module_textInputContainer--3d7b7 .bp_base_text_input_module_textInput--3d7b7:disabled:hover,.bp_base_text_input_module_textInputContainerOuter--3d7b7 .bp_base_text_input_module_textInputContainer--3d7b7 input[type=number].bp_base_text_input_module_textInput--3d7b7:disabled:hover,.bp_base_text_input_module_textInputContainerOuter--3d7b7 .bp_base_text_input_module_textInputContainer--3d7b7 input[type=text].bp_base_text_input_module_textInput--3d7b7:disabled:hover{
|
|
4681
4713
|
border-color:var(--border-input-border);
|
|
4682
4714
|
}
|
|
4683
|
-
.bp_base_text_input_module_textInputContainer--
|
|
4715
|
+
.bp_base_text_input_module_textInputContainerOuter--3d7b7 .bp_base_text_input_module_textInputContainer--3d7b7 .bp_base_text_input_module_textInput--3d7b7:focus-visible,.bp_base_text_input_module_textInputContainerOuter--3d7b7 .bp_base_text_input_module_textInputContainer--3d7b7 input[type=number].bp_base_text_input_module_textInput--3d7b7:focus-visible,.bp_base_text_input_module_textInputContainerOuter--3d7b7 .bp_base_text_input_module_textInputContainer--3d7b7 input[type=text].bp_base_text_input_module_textInput--3d7b7:focus-visible{
|
|
4684
4716
|
background:#fff;
|
|
4685
4717
|
border:.125rem solid #2486fc;
|
|
4686
4718
|
outline:0;
|
|
4687
4719
|
padding-inline-start:.6875rem;
|
|
4688
4720
|
}
|
|
4689
|
-
.bp_base_text_input_module_textInputContainer--
|
|
4690
|
-
padding-inline
|
|
4721
|
+
.bp_base_text_input_module_textInputContainerOuter--3d7b7 .bp_base_text_input_module_textInputContainer--3d7b7 .bp_base_text_input_module_textInput--3d7b7:has(+ .bp_base_text_input_module_endIcon--3d7b7),.bp_base_text_input_module_textInputContainerOuter--3d7b7 .bp_base_text_input_module_textInputContainer--3d7b7 input[type=number].bp_base_text_input_module_textInput--3d7b7:has(+ .bp_base_text_input_module_endIcon--3d7b7),.bp_base_text_input_module_textInputContainerOuter--3d7b7 .bp_base_text_input_module_textInputContainer--3d7b7 input[type=text].bp_base_text_input_module_textInput--3d7b7:has(+ .bp_base_text_input_module_endIcon--3d7b7){
|
|
4722
|
+
padding-inline-end:calc(1.25rem + var(--end-icon-width));
|
|
4691
4723
|
}
|
|
4692
|
-
.bp_base_text_input_module_textInputContainer--
|
|
4724
|
+
.bp_base_text_input_module_textInputContainerOuter--3d7b7 .bp_base_text_input_module_textInputContainer--3d7b7 .bp_base_text_input_module_textInput--3d7b7:not(:disabled):not(:focus-visible):not(.bp_base_text_input_module_error--3d7b7):hover,.bp_base_text_input_module_textInputContainerOuter--3d7b7 .bp_base_text_input_module_textInputContainer--3d7b7 input[type=number].bp_base_text_input_module_textInput--3d7b7:not(:disabled):not(:focus-visible):not(.bp_base_text_input_module_error--3d7b7):hover,.bp_base_text_input_module_textInputContainerOuter--3d7b7 .bp_base_text_input_module_textInputContainer--3d7b7 input[type=text].bp_base_text_input_module_textInput--3d7b7:not(:disabled):not(:focus-visible):not(.bp_base_text_input_module_error--3d7b7):hover{
|
|
4693
4725
|
background:#fff;
|
|
4694
4726
|
border:.0625rem solid #6f6f6f;
|
|
4695
4727
|
}
|
|
4696
|
-
.bp_base_text_input_module_textInputContainer--
|
|
4697
|
-
|
|
4698
|
-
inset-block-end:.375rem;
|
|
4699
|
-
inset-inline-start:unset;
|
|
4728
|
+
.bp_base_text_input_module_textInputContainerOuter--3d7b7 .bp_base_text_input_module_textInputContainer--3d7b7 .bp_base_text_input_module_startIcon--3d7b7{
|
|
4729
|
+
left:.8125rem;
|
|
4700
4730
|
position:absolute;
|
|
4701
|
-
|
|
4731
|
+
top:50%;
|
|
4732
|
+
transform:translateY(-50%);
|
|
4702
4733
|
}
|
|
4703
|
-
.bp_base_text_input_module_textInputContainer--
|
|
4734
|
+
.bp_base_text_input_module_textInputContainerOuter--3d7b7 .bp_base_text_input_module_textInputContainer--3d7b7 .bp_base_text_input_module_startIcon--3d7b7 + input.bp_base_text_input_module_textInput--3d7b7{
|
|
4735
|
+
padding-inline-start:calc(1.25rem + var(--start-icon-width));
|
|
4736
|
+
}
|
|
4737
|
+
.bp_base_text_input_module_textInputContainerOuter--3d7b7 .bp_base_text_input_module_textInputContainer--3d7b7 .bp_base_text_input_module_startIcon--3d7b7 + input.bp_base_text_input_module_textInput--3d7b7.bp_base_text_input_module_error--3d7b7,.bp_base_text_input_module_textInputContainerOuter--3d7b7 .bp_base_text_input_module_textInputContainer--3d7b7 .bp_base_text_input_module_startIcon--3d7b7 + input.bp_base_text_input_module_textInput--3d7b7:focus-visible{
|
|
4738
|
+
padding-inline-start:calc(1.1875rem + var(--start-icon-width));
|
|
4739
|
+
}
|
|
4740
|
+
.bp_base_text_input_module_textInputContainerOuter--3d7b7 .bp_base_text_input_module_textInputContainer--3d7b7 .bp_base_text_input_module_endIcon--3d7b7{
|
|
4741
|
+
position:absolute;
|
|
4742
|
+
right:.8125rem;
|
|
4743
|
+
top:50%;
|
|
4744
|
+
transform:translateY(-50%);
|
|
4745
|
+
}
|
|
4746
|
+
.bp_base_text_input_module_textInputContainerOuter--3d7b7.bp_base_text_input_module_disabled--3d7b7{
|
|
4704
4747
|
opacity:60%;
|
|
4705
4748
|
}
|
|
4706
|
-
|
|
4707
|
-
.bp_base_text_input_module_inlineError--36482{
|
|
4749
|
+
.bp_base_text_input_module_textInputContainerOuter--3d7b7 .bp_base_text_input_module_inlineError--3d7b7,.bp_base_text_input_module_textInputContainerOuter--3d7b7 .bp_base_text_input_module_subtext--3d7b7{
|
|
4708
4750
|
margin-block-start:var(--space-2);
|
|
4709
4751
|
}
|
|
4710
4752
|
.bp_chip_module_chip--26416{
|
|
@@ -6254,10 +6296,14 @@ div[data-radix-popper-content-wrapper]:has([role=menu]):has([data-state=open]):h
|
|
|
6254
6296
|
color:var(--text-cta-link-pressed);
|
|
6255
6297
|
}
|
|
6256
6298
|
|
|
6257
|
-
.bp_text_input_module_textInput--
|
|
6299
|
+
.bp_text_input_module_textInput--2839a.bp_text_input_module_textInput--2839a.bp_text_input_module_textInput--2839a input:has(+ .bp_text_input_module_iconEnd--2839a){
|
|
6258
6300
|
padding-inline-end:1.875rem;
|
|
6259
6301
|
}
|
|
6260
6302
|
|
|
6303
|
+
.bp_text_input_module_loadingIndicatorReset--2839a div{
|
|
6304
|
+
position:static;
|
|
6305
|
+
}
|
|
6306
|
+
|
|
6261
6307
|
.bp_text_toggle_button_module_textToggleButton--f8bea{
|
|
6262
6308
|
background:var(--surface-toggle-surface);
|
|
6263
6309
|
border:var(--border-1) solid var(--border-toggletext-border-off);
|
|
@@ -1,8 +1,8 @@
|
|
|
1
|
-
export declare const PasswordInput: import("react").ForwardRefExoticComponent<(Omit<Omit<import("../text-input").TextInputProps, "type" | "
|
|
1
|
+
export declare const PasswordInput: import("react").ForwardRefExoticComponent<(Omit<Omit<import("../text-input").TextInputProps, "type" | "loading" | "loadingAriaLabel" | "icon"> & {
|
|
2
2
|
showPasswordAriaLabel: string;
|
|
3
3
|
hidePasswordAriaLabel: string;
|
|
4
4
|
autoComplete: "current-password" | "new-password";
|
|
5
|
-
} & Required<Pick<import("./types").ControlledComponentProps, keyof import("./types").ControlledComponentProps>> & Omit<import("./types").ControlledComponentProps, keyof import("./types").ControlledComponentProps>, "ref"> | Omit<Omit<import("../text-input").TextInputProps, "type" | "
|
|
5
|
+
} & Required<Pick<import("./types").ControlledComponentProps, keyof import("./types").ControlledComponentProps>> & Omit<import("./types").ControlledComponentProps, keyof import("./types").ControlledComponentProps>, "ref"> | Omit<Omit<import("../text-input").TextInputProps, "type" | "loading" | "loadingAriaLabel" | "icon"> & {
|
|
6
6
|
showPasswordAriaLabel: string;
|
|
7
7
|
hidePasswordAriaLabel: string;
|
|
8
8
|
autoComplete: "current-password" | "new-password";
|
|
@@ -36,7 +36,7 @@ const PasswordInput = /*#__PURE__*/forwardRef((props, forwardedRef) => {
|
|
|
36
36
|
ref: useForkRef(inputRef, forwardedRef),
|
|
37
37
|
autoComplete: autocomplete,
|
|
38
38
|
className: clsx(styles.passwordInput, props.className),
|
|
39
|
-
|
|
39
|
+
endIcon: jsx(IconButton, {
|
|
40
40
|
"aria-controls": inputId,
|
|
41
41
|
"aria-label": iconButtonAriaLabel,
|
|
42
42
|
className: styles.iconButton,
|
|
@@ -1,4 +1,4 @@
|
|
|
1
1
|
import '../index.css';
|
|
2
|
-
var styles = {"passwordInput":"bp_password_input_module_passwordInput--
|
|
2
|
+
var styles = {"passwordInput":"bp_password_input_module_passwordInput--c5ea1","iconButton":"bp_password_input_module_iconButton--c5ea1"};
|
|
3
3
|
|
|
4
4
|
export { styles as default };
|
|
@@ -1,10 +1,11 @@
|
|
|
1
|
-
import { jsxs,
|
|
1
|
+
import { jsxs, jsx } from 'react/jsx-runtime';
|
|
2
2
|
import clsx from 'clsx';
|
|
3
|
-
import { forwardRef, useMemo, cloneElement } from 'react';
|
|
3
|
+
import { forwardRef, useState, useMemo, cloneElement } from 'react';
|
|
4
|
+
import { Text } from '../../text/text.js';
|
|
5
|
+
import { useLabelable } from '../../util-components/labelable/useLabelable.js';
|
|
4
6
|
import { useUniqueId } from '../../utils/useUniqueId.js';
|
|
5
7
|
import { InlineError } from '../inline-error/inline-error.js';
|
|
6
8
|
import styles from './base-text-input.module.js';
|
|
7
|
-
import { useLabelable } from '../../util-components/labelable/useLabelable.js';
|
|
8
9
|
|
|
9
10
|
/**
|
|
10
11
|
* This extends a default HTML <input/> and accepts the same props as well as some custom ones listed below.<br/>
|
|
@@ -20,53 +21,87 @@ const BaseTextInput = /*#__PURE__*/forwardRef((props, forwardedRef) => {
|
|
|
20
21
|
disabled,
|
|
21
22
|
invalid = false,
|
|
22
23
|
hideLabel,
|
|
24
|
+
readOnly,
|
|
23
25
|
error,
|
|
24
26
|
required = false,
|
|
25
|
-
|
|
27
|
+
endIcon,
|
|
28
|
+
startIcon,
|
|
29
|
+
subtext,
|
|
26
30
|
id,
|
|
27
31
|
...rest
|
|
28
32
|
} = props;
|
|
29
33
|
const uniqueId = useUniqueId('input-');
|
|
30
34
|
const inputId = id || uniqueId;
|
|
31
35
|
const inlineErrorId = useUniqueId('inline-error-');
|
|
36
|
+
const subtextId = useUniqueId('subtext-');
|
|
32
37
|
const hasError = !!error && !disabled;
|
|
33
38
|
const shouldMarkError = (!!error || invalid) && !disabled;
|
|
34
39
|
const ariaDescribedBy = clsx(rest['aria-describedby'], {
|
|
35
40
|
[inlineErrorId]: hasError
|
|
36
41
|
});
|
|
37
|
-
const
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
42
|
+
const [startIconWidth, setStartIconWidth] = useState(null);
|
|
43
|
+
const [endIconWidth, setEndIconWidth] = useState(null);
|
|
44
|
+
const StartIconComponent = useMemo(() => startIcon && /*#__PURE__*/cloneElement(startIcon, {
|
|
45
|
+
ref: node => {
|
|
46
|
+
if (node) {
|
|
47
|
+
setStartIconWidth(node.getBoundingClientRect().width);
|
|
48
|
+
}
|
|
49
|
+
},
|
|
50
|
+
className: clsx(startIcon.props?.className, styles.startIcon)
|
|
51
|
+
}), [startIcon]);
|
|
52
|
+
const EndIconComponent = useMemo(() => endIcon && /*#__PURE__*/cloneElement(endIcon, {
|
|
53
|
+
ref: node => {
|
|
54
|
+
if (node) {
|
|
55
|
+
setEndIconWidth(node.getBoundingClientRect().width);
|
|
56
|
+
}
|
|
57
|
+
},
|
|
58
|
+
className: clsx(endIcon.props?.className, styles.endIcon)
|
|
59
|
+
}), [endIcon]);
|
|
60
|
+
const hasSubtext = !error && !!subtext;
|
|
61
|
+
const Label = useLabelable(label, inputId, required);
|
|
62
|
+
return jsxs("div", {
|
|
63
|
+
className: clsx([styles.textInputContainerOuter], {
|
|
64
|
+
[styles.disabled]: disabled,
|
|
65
|
+
[styles.error]: shouldMarkError
|
|
66
|
+
}),
|
|
67
|
+
children: [jsx(Label, {
|
|
68
|
+
className: clsx([styles.label], {
|
|
69
|
+
[styles.hidden]: hideLabel
|
|
70
|
+
}),
|
|
71
|
+
hideLabel: hideLabel
|
|
72
|
+
}), jsxs("div", {
|
|
73
|
+
className: clsx([styles.textInputContainer], className),
|
|
74
|
+
style: {
|
|
75
|
+
'--end-icon-width': endIconWidth ? `${endIconWidth}px` : '0px',
|
|
76
|
+
'--start-icon-width': startIconWidth ? `${startIconWidth}px` : '0px'
|
|
77
|
+
},
|
|
78
|
+
children: [StartIconComponent, jsx("input", {
|
|
53
79
|
...rest,
|
|
54
80
|
ref: forwardedRef,
|
|
55
81
|
"aria-describedby": ariaDescribedBy,
|
|
56
82
|
"aria-invalid": shouldMarkError,
|
|
57
83
|
"aria-required": required,
|
|
58
84
|
className: clsx([styles.textInput], {
|
|
59
|
-
[styles.error]: shouldMarkError
|
|
85
|
+
[styles.error]: shouldMarkError,
|
|
86
|
+
[styles.readOnly]: readOnly
|
|
60
87
|
}),
|
|
61
88
|
disabled: disabled,
|
|
62
89
|
id: inputId,
|
|
90
|
+
readOnly: readOnly,
|
|
63
91
|
required: required,
|
|
64
92
|
type: type
|
|
65
|
-
}),
|
|
93
|
+
}), EndIconComponent]
|
|
66
94
|
}), jsx(InlineError, {
|
|
67
95
|
className: styles.inlineError,
|
|
68
96
|
id: inlineErrorId,
|
|
69
97
|
children: error
|
|
98
|
+
}), hasSubtext && jsx(Text, {
|
|
99
|
+
as: "p",
|
|
100
|
+
className: styles.subtext,
|
|
101
|
+
color: "textOnLightSecondary",
|
|
102
|
+
id: subtextId,
|
|
103
|
+
variant: "caption",
|
|
104
|
+
children: subtext
|
|
70
105
|
})]
|
|
71
106
|
});
|
|
72
107
|
});
|
|
@@ -1,4 +1,4 @@
|
|
|
1
1
|
import '../../index.css';
|
|
2
|
-
var styles = {"
|
|
2
|
+
var styles = {"textInputContainerOuter":"bp_base_text_input_module_textInputContainerOuter--3d7b7","label":"bp_base_text_input_module_label--3d7b7","hidden":"bp_base_text_input_module_hidden--3d7b7","textInputContainer":"bp_base_text_input_module_textInputContainer--3d7b7","textInput":"bp_base_text_input_module_textInput--3d7b7","error":"bp_base_text_input_module_error--3d7b7","readOnly":"bp_base_text_input_module_readOnly--3d7b7","endIcon":"bp_base_text_input_module_endIcon--3d7b7","startIcon":"bp_base_text_input_module_startIcon--3d7b7","disabled":"bp_base_text_input_module_disabled--3d7b7","inlineError":"bp_base_text_input_module_inlineError--3d7b7","subtext":"bp_base_text_input_module_subtext--3d7b7"};
|
|
3
3
|
|
|
4
4
|
export { styles as default };
|
|
@@ -17,8 +17,13 @@ export type BaseTextInputProps = React.ComponentPropsWithRef<'input'> & Labelabl
|
|
|
17
17
|
/** Content of error message */
|
|
18
18
|
error?: React.ReactNode;
|
|
19
19
|
/**
|
|
20
|
-
* Custom icon to be rendered after input
|
|
20
|
+
* Custom icon to be rendered after the input
|
|
21
21
|
* When loading is true and input is not disabled prop value will be ignored
|
|
22
22
|
* */
|
|
23
|
-
|
|
23
|
+
endIcon?: React.ReactElement;
|
|
24
|
+
/**
|
|
25
|
+
* Custom icon to be rendered before the input
|
|
26
|
+
* */
|
|
27
|
+
startIcon?: React.ReactElement;
|
|
28
|
+
subtext?: string;
|
|
24
29
|
};
|
|
@@ -1 +1,25 @@
|
|
|
1
|
-
export declare const TextInput: import("react").ForwardRefExoticComponent<(Omit<Omit<import("
|
|
1
|
+
export declare const TextInput: import("react").ForwardRefExoticComponent<(Omit<Omit<import("react").DetailedHTMLProps<import("react").InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "ref"> & {
|
|
2
|
+
ref?: ((instance: HTMLInputElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLInputElement> | null | undefined;
|
|
3
|
+
} & import("../..").Labelable & {
|
|
4
|
+
type?: "text" | "password";
|
|
5
|
+
hideLabel?: boolean;
|
|
6
|
+
invalid?: boolean;
|
|
7
|
+
disabled?: boolean;
|
|
8
|
+
required?: boolean;
|
|
9
|
+
error?: React.ReactNode;
|
|
10
|
+
endIcon?: React.ReactElement;
|
|
11
|
+
startIcon?: React.ReactElement;
|
|
12
|
+
subtext?: string;
|
|
13
|
+
} & Required<Pick<import("./types").Loading, keyof import("./types").Loading>> & Omit<import("./types").Loading, keyof import("./types").Loading>, "ref"> | Omit<Omit<import("react").DetailedHTMLProps<import("react").InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "ref"> & {
|
|
14
|
+
ref?: ((instance: HTMLInputElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLInputElement> | null | undefined;
|
|
15
|
+
} & import("../..").Labelable & {
|
|
16
|
+
type?: "text" | "password";
|
|
17
|
+
hideLabel?: boolean;
|
|
18
|
+
invalid?: boolean;
|
|
19
|
+
disabled?: boolean;
|
|
20
|
+
required?: boolean;
|
|
21
|
+
error?: React.ReactNode;
|
|
22
|
+
endIcon?: React.ReactElement;
|
|
23
|
+
startIcon?: React.ReactElement;
|
|
24
|
+
subtext?: string;
|
|
25
|
+
} & Partial<Record<keyof import("./types").Loading, never>> & Omit<import("./types").Loading, keyof import("./types").Loading>, "ref">) & import("react").RefAttributes<HTMLInputElement>>;
|
|
@@ -1,13 +1,17 @@
|
|
|
1
1
|
import { jsx } from 'react/jsx-runtime';
|
|
2
|
-
import {
|
|
2
|
+
import { PencilCrossed } from '@box/blueprint-web-assets/icons/Fill';
|
|
3
3
|
import clsx from 'clsx';
|
|
4
|
+
import { forwardRef, useRef, useCallback, useMemo, cloneElement } from 'react';
|
|
4
5
|
import { LoadingIndicator } from '../loading-indicator/loading-indicator.js';
|
|
5
|
-
import styles from './text-input.module.js';
|
|
6
6
|
import { BaseTextInput } from '../primitives/base-text-input/base-text-input.js';
|
|
7
7
|
import { useForkRef } from '../utils/useForkRef.js';
|
|
8
|
+
import styles from './text-input.module.js';
|
|
8
9
|
|
|
9
10
|
const TextInput = /*#__PURE__*/forwardRef((props, forwardedRef) => {
|
|
10
11
|
const {
|
|
12
|
+
readOnly,
|
|
13
|
+
startIcon,
|
|
14
|
+
endIcon,
|
|
11
15
|
loading = false,
|
|
12
16
|
loadingAriaLabel,
|
|
13
17
|
...rest
|
|
@@ -17,17 +21,47 @@ const TextInput = /*#__PURE__*/forwardRef((props, forwardedRef) => {
|
|
|
17
21
|
inputRef.current?.focus();
|
|
18
22
|
}, []);
|
|
19
23
|
const isLoading = !props.disabled && loading && loadingAriaLabel;
|
|
20
|
-
const
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
24
|
+
const endIconLocal = useMemo(() => {
|
|
25
|
+
if (isLoading) {
|
|
26
|
+
return jsx("div", {
|
|
27
|
+
className: styles.loadingIndicatorReset,
|
|
28
|
+
children: jsx(LoadingIndicator, {
|
|
29
|
+
"aria-label": loadingAriaLabel,
|
|
30
|
+
onClick: focusInput
|
|
31
|
+
})
|
|
32
|
+
});
|
|
33
|
+
}
|
|
34
|
+
if (endIcon) {
|
|
35
|
+
return /*#__PURE__*/cloneElement(endIcon, {
|
|
36
|
+
onClick: focusInput
|
|
37
|
+
});
|
|
38
|
+
}
|
|
39
|
+
if (readOnly) {
|
|
40
|
+
return jsx(PencilCrossed, {
|
|
41
|
+
onClick: focusInput,
|
|
42
|
+
role: "presentation"
|
|
43
|
+
});
|
|
44
|
+
}
|
|
45
|
+
return null;
|
|
46
|
+
}, [isLoading, endIcon, readOnly, loadingAriaLabel, focusInput]);
|
|
47
|
+
const startIconLocal = useMemo(() => {
|
|
48
|
+
if (startIcon) {
|
|
49
|
+
return /*#__PURE__*/cloneElement(startIcon, {
|
|
50
|
+
onClick: focusInput
|
|
51
|
+
});
|
|
52
|
+
}
|
|
53
|
+
return null;
|
|
54
|
+
}, [startIcon, focusInput]);
|
|
25
55
|
return jsx(BaseTextInput, {
|
|
26
56
|
...rest,
|
|
27
57
|
ref: useForkRef(inputRef, forwardedRef),
|
|
28
58
|
className: clsx(styles.textInput, props.className),
|
|
29
|
-
|
|
30
|
-
|
|
59
|
+
readOnly: readOnly,
|
|
60
|
+
...(endIconLocal ? {
|
|
61
|
+
endIcon: endIconLocal
|
|
62
|
+
} : {}),
|
|
63
|
+
...(startIconLocal ? {
|
|
64
|
+
startIcon: startIconLocal
|
|
31
65
|
} : {})
|
|
32
66
|
});
|
|
33
67
|
});
|
|
@@ -1,4 +1,4 @@
|
|
|
1
1
|
import '../index.css';
|
|
2
|
-
var styles = {"textInput":"bp_text_input_module_textInput--
|
|
2
|
+
var styles = {"textInput":"bp_text_input_module_textInput--2839a","iconEnd":"bp_text_input_module_iconEnd--2839a","loadingIndicatorReset":"bp_text_input_module_loadingIndicatorReset--2839a"};
|
|
3
3
|
|
|
4
4
|
export { styles as default };
|
|
@@ -1,9 +1,9 @@
|
|
|
1
1
|
import { type RequireAllOrNone } from 'type-fest';
|
|
2
2
|
import { type BaseTextInputProps } from '../primitives/base-text-input';
|
|
3
3
|
export interface Loading {
|
|
4
|
-
/** When true input is
|
|
4
|
+
/** When true input is rendered with loading indicator. When this is true `loadingAriaLabel` must also be provided. */
|
|
5
5
|
loading?: boolean;
|
|
6
6
|
/** The aria-label for the loading indicator. */
|
|
7
7
|
loadingAriaLabel?: string;
|
|
8
8
|
}
|
|
9
|
-
export type TextInputProps =
|
|
9
|
+
export type TextInputProps = BaseTextInputProps & RequireAllOrNone<Loading, keyof Loading>;
|
|
@@ -1,4 +1,4 @@
|
|
|
1
1
|
import '../../index.css';
|
|
2
|
-
var styles = {"smallList":"bp_base_grid_list_item_module_smallList--
|
|
2
|
+
var styles = {"smallList":"bp_base_grid_list_item_module_smallList--70f04","smallListItem":"bp_base_grid_list_item_module_smallListItem--70f04","loading":"bp_base_grid_list_item_module_loading--70f04","thumbnail":"bp_base_grid_list_item_module_thumbnail--70f04","thumbnailContent":"bp_base_grid_list_item_module_thumbnailContent--70f04","header":"bp_base_grid_list_item_module_header--70f04","subtitle":"bp_base_grid_list_item_module_subtitle--70f04","actions":"bp_base_grid_list_item_module_actions--70f04","selection":"bp_base_grid_list_item_module_selection--70f04","inner":"bp_base_grid_list_item_module_inner--70f04","actionsCheckboxWrapper":"bp_base_grid_list_item_module_actionsCheckboxWrapper--70f04","largeList":"bp_base_grid_list_item_module_largeList--70f04","largeListItem":"bp_base_grid_list_item_module_largeListItem--70f04","fade":"bp_base_grid_list_item_module_fade--70f04","description":"bp_base_grid_list_item_module_description--70f04","snippet":"bp_base_grid_list_item_module_snippet--70f04","snippetContent":"bp_base_grid_list_item_module_snippetContent--70f04","react-aria-DropIndicator":"bp_base_grid_list_item_module_react-aria-DropIndicator--70f04","gridList":"bp_base_grid_list_item_module_gridList--70f04","gridListItem":"bp_base_grid_list_item_module_gridListItem--70f04","statusPin":"bp_base_grid_list_item_module_statusPin--70f04","isItemInteracted":"bp_base_grid_list_item_module_isItemInteracted--70f04","tooltipContent":"bp_base_grid_list_item_module_tooltipContent--70f04","tooltipArrow":"bp_base_grid_list_item_module_tooltipArrow--70f04","staticList":"bp_base_grid_list_item_module_staticList--70f04","staticListItem":"bp_base_grid_list_item_module_staticListItem--70f04"};
|
|
3
3
|
|
|
4
4
|
export { styles as default };
|
|
@@ -1,2 +1,2 @@
|
|
|
1
1
|
import { type Labelable, type LabelProps } from './types';
|
|
2
|
-
export declare const useLabelable: (label: Labelable["label"], inputId: string) => import("react").ForwardRefExoticComponent<Omit<Omit<LabelProps, "htmlFor">, "ref"> & import("react").RefAttributes<HTMLLabelElement>>;
|
|
2
|
+
export declare const useLabelable: (label: Labelable["label"], inputId: string, isRequired?: boolean) => import("react").ForwardRefExoticComponent<Omit<Omit<LabelProps, "htmlFor">, "ref"> & import("react").RefAttributes<HTMLLabelElement>>;
|
|
@@ -1,10 +1,12 @@
|
|
|
1
1
|
import { jsx } from 'react/jsx-runtime';
|
|
2
|
-
import { useMemo, forwardRef } from 'react';
|
|
3
2
|
import { Role } from '@ariakit/react';
|
|
3
|
+
import clsx from 'clsx';
|
|
4
|
+
import { useMemo, forwardRef } from 'react';
|
|
4
5
|
import { useContextProps, LabelContext } from 'react-aria-components';
|
|
5
6
|
import { VisuallyHidden } from '../../visually-hidden/visually-hidden.js';
|
|
7
|
+
import styles from './labelable.module.js';
|
|
6
8
|
|
|
7
|
-
const useLabelable = (label, inputId) => {
|
|
9
|
+
const useLabelable = (label, inputId, isRequired = false) => {
|
|
8
10
|
return useMemo(() => {
|
|
9
11
|
const Label = /*#__PURE__*/forwardRef((props, ref) => {
|
|
10
12
|
// If this component is rendered within LabelContext from RAC, we can have props like htmlFor, id, elementType.
|
|
@@ -17,7 +19,10 @@ const useLabelable = (label, inputId) => {
|
|
|
17
19
|
const labelProps = {
|
|
18
20
|
...rest,
|
|
19
21
|
htmlFor: inputId,
|
|
20
|
-
ref
|
|
22
|
+
ref,
|
|
23
|
+
className: clsx(rest.className, {
|
|
24
|
+
[styles.required]: isRequired
|
|
25
|
+
})
|
|
21
26
|
};
|
|
22
27
|
if (!label) {
|
|
23
28
|
return null;
|
|
@@ -63,7 +68,7 @@ const useLabelable = (label, inputId) => {
|
|
|
63
68
|
});
|
|
64
69
|
Label.displayName = 'Label';
|
|
65
70
|
return Label;
|
|
66
|
-
}, [
|
|
71
|
+
}, [inputId, isRequired, label]);
|
|
67
72
|
};
|
|
68
73
|
|
|
69
74
|
export { useLabelable };
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@box/blueprint-web",
|
|
3
|
-
"version": "
|
|
3
|
+
"version": "11.0.1",
|
|
4
4
|
"type": "module",
|
|
5
5
|
"license": "SEE LICENSE IN LICENSE",
|
|
6
6
|
"publishConfig": {
|
|
@@ -47,7 +47,7 @@
|
|
|
47
47
|
"dependencies": {
|
|
48
48
|
"@ariakit/react": "0.4.15",
|
|
49
49
|
"@ariakit/react-core": "0.4.15",
|
|
50
|
-
"@box/blueprint-web-assets": "^4.39.
|
|
50
|
+
"@box/blueprint-web-assets": "^4.39.2",
|
|
51
51
|
"@internationalized/date": "^3.7.0",
|
|
52
52
|
"@radix-ui/react-accordion": "1.1.2",
|
|
53
53
|
"@radix-ui/react-checkbox": "1.0.4",
|
|
@@ -77,7 +77,7 @@
|
|
|
77
77
|
"type-fest": "^3.2.0"
|
|
78
78
|
},
|
|
79
79
|
"devDependencies": {
|
|
80
|
-
"@box/storybook-utils": "^0.9.
|
|
80
|
+
"@box/storybook-utils": "^0.9.1",
|
|
81
81
|
"@types/react": "^18.0.0",
|
|
82
82
|
"@types/react-dom": "^18.0.0",
|
|
83
83
|
"react": "^18.3.0",
|