@box/blueprint-web 17.15.0 → 17.15.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.
Files changed (7) hide show
  1. package/dist/lib-esm/components.css +51 -51
  2. package/dist/lib-esm/date-picker/date-picker.js +3 -1
  3. package/dist/lib-esm/date-picker/date-picker.module.js +1 -1
  4. package/dist/lib-esm/date-picker/types.d.ts +6 -1
  5. package/dist/lib-esm/index.css +51 -51
  6. package/dist/lib-esm/util-components/labelable/useLabelable.js +6 -3
  7. package/package.json +3 -3
package/dist/lib-esm/components.css CHANGED
@@ -7398,7 +7398,7 @@
7398
7398
  color:var(--calendar-disabled-text-color);
7399
7399
  text-decoration:line-through;
7400
7400
  }
7401
- .bp_date_picker_module_datePicker--b164e[data-modern=false]{
7401
+ .bp_date_picker_module_datePicker--464ce[data-modern=false]{
7402
7402
  --date-picker-label-margin-bottom:var(--space-2);
7403
7403
  --date-picker-input-placeholder-color:var(--text-text-on-light-secondary);
7404
7404
  --date-picker-input-placeholder-focused-color:var(--text-text-on-light);
@@ -7424,7 +7424,7 @@
7424
7424
  --date-picker-icon-button-hover-fill:var(--icon-cta-icon-hover);
7425
7425
  --date-picker-clear-button-right:var(--size-9);
7426
7426
  }
7427
- .bp_date_picker_module_datePicker--b164e[data-modern=false] .bp_date_picker_module_label--b164e{
7427
+ .bp_date_picker_module_datePicker--464ce[data-modern=false] .bp_date_picker_module_label--464ce{
7428
7428
  font-family:var(--body-default-bold-font-family);
7429
7429
  font-size:var(--body-default-bold-font-size);
7430
7430
  font-weight:var(--body-default-bold-font-weight);
@@ -7433,7 +7433,7 @@
7433
7433
  text-decoration:var(--body-default-bold-text-decoration);
7434
7434
  text-transform:var(--body-default-bold-text-case);
7435
7435
  }
7436
- .bp_date_picker_module_datePicker--b164e[data-modern=false] .bp_date_picker_module_group--b164e{
7436
+ .bp_date_picker_module_datePicker--464ce[data-modern=false] .bp_date_picker_module_group--464ce{
7437
7437
  font-family:var(--body-default-font-family);
7438
7438
  font-size:var(--body-default-font-size);
7439
7439
  font-weight:var(--body-default-font-weight);
@@ -7443,7 +7443,7 @@
7443
7443
  text-transform:var(--body-default-text-case);
7444
7444
  }
7445
7445
 
7446
- .bp_date_picker_module_datePicker--b164e[data-modern=true]{
7446
+ .bp_date_picker_module_datePicker--464ce[data-modern=true]{
7447
7447
  --date-picker-label-margin-bottom:var(--bp-space-020);
7448
7448
  --date-picker-input-placeholder-color:var(--bp-text-text-on-light-secondary);
7449
7449
  --date-picker-input-placeholder-focused-color:var(--bp-text-text-on-light);
@@ -7469,7 +7469,7 @@
7469
7469
  --date-picker-icon-button-hover-fill:var(--bp-icon-cta-icon-hover);
7470
7470
  --date-picker-clear-button-right:var(--bp-size-090);
7471
7471
  }
7472
- .bp_date_picker_module_datePicker--b164e[data-modern=true] .bp_date_picker_module_label--b164e{
7472
+ .bp_date_picker_module_datePicker--464ce[data-modern=true] .bp_date_picker_module_label--464ce{
7473
7473
  font-family:var(--bp-font-font-family), -apple-system, BlinkMacSystemFont, "San Francisco", "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
7474
7474
  font-size:var(--bp-font-size-05);
7475
7475
  font-style:normal;
@@ -7477,7 +7477,7 @@
7477
7477
  letter-spacing:var(--bp-font-letter-spacing-01);
7478
7478
  line-height:var(--bp-font-line-height-04);
7479
7479
  }
7480
- :where(body.is-inter-font) .bp_date_picker_module_datePicker--b164e[data-modern=true] .bp_date_picker_module_label--b164e{
7480
+ :where(body.is-inter-font) .bp_date_picker_module_datePicker--464ce[data-modern=true] .bp_date_picker_module_label--464ce{
7481
7481
  font-family:"Inter Variable", -apple-system, BlinkMacSystemFont, "San Francisco", "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
7482
7482
  font-size:.875rem;
7483
7483
  font-style:normal;
@@ -7488,7 +7488,7 @@
7488
7488
  text-transform:none;
7489
7489
  }
7490
7490
 
7491
- .bp_date_picker_module_datePicker--b164e[data-modern=true] .bp_date_picker_module_group--b164e{
7491
+ .bp_date_picker_module_datePicker--464ce[data-modern=true] .bp_date_picker_module_group--464ce{
7492
7492
  font-family:var(--bp-font-font-family), -apple-system, BlinkMacSystemFont, "San Francisco", "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
7493
7493
  font-size:var(--bp-font-size-05);
7494
7494
  font-style:normal;
@@ -7496,7 +7496,7 @@
7496
7496
  letter-spacing:var(--bp-font-letter-spacing-01);
7497
7497
  line-height:var(--bp-font-line-height-04);
7498
7498
  }
7499
- :where(body.is-inter-font) .bp_date_picker_module_datePicker--b164e[data-modern=true] .bp_date_picker_module_group--b164e{
7499
+ :where(body.is-inter-font) .bp_date_picker_module_datePicker--464ce[data-modern=true] .bp_date_picker_module_group--464ce{
7500
7500
  font-family:"Inter Variable", -apple-system, BlinkMacSystemFont, "San Francisco", "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
7501
7501
  font-size:.875rem;
7502
7502
  font-style:normal;
@@ -7507,28 +7507,28 @@
7507
7507
  text-transform:none;
7508
7508
  }
7509
7509
 
7510
- .bp_date_picker_module_datePicker--b164e{
7510
+ .bp_date_picker_module_datePicker--464ce{
7511
7511
  width:100%;
7512
7512
  }
7513
- .bp_date_picker_module_datePicker--b164e.bp_date_picker_module_disabled--b164e{
7513
+ .bp_date_picker_module_datePicker--464ce.bp_date_picker_module_disabled--464ce{
7514
7514
  opacity:var(--disabled-opacity);
7515
7515
  pointer-events:none;
7516
7516
  -webkit-user-select:none;
7517
7517
  user-select:none;
7518
7518
  }
7519
- .bp_date_picker_module_datePicker--b164e .bp_date_picker_module_label--b164e{
7519
+ .bp_date_picker_module_datePicker--464ce .bp_date_picker_module_label--464ce{
7520
7520
  cursor:default;
7521
- display:block;
7521
+ display:flex;
7522
7522
  margin-block-end:var(--date-picker-label-margin-bottom);
7523
7523
  width:fit-content;
7524
7524
  }
7525
- .bp_date_picker_module_datePicker--b164e .bp_date_picker_module_group--b164e{
7525
+ .bp_date_picker_module_datePicker--464ce .bp_date_picker_module_group--464ce{
7526
7526
  align-items:center;
7527
7527
  display:inline-flex;
7528
7528
  position:relative;
7529
7529
  width:100%;
7530
7530
  }
7531
- .bp_date_picker_module_datePicker--b164e .bp_date_picker_module_group--b164e .bp_date_picker_module_groupContainer--b164e{
7531
+ .bp_date_picker_module_datePicker--464ce .bp_date_picker_module_group--464ce .bp_date_picker_module_groupContainer--464ce{
7532
7532
  align-items:center;
7533
7533
  border-radius:var(--date-picker-border-radius);
7534
7534
  box-shadow:var(--date-picker-input-inner-shadow);
@@ -7539,23 +7539,23 @@
7539
7539
  position:relative;
7540
7540
  width:100%;
7541
7541
  }
7542
- .bp_date_picker_module_datePicker--b164e .bp_date_picker_module_group--b164e .bp_date_picker_module_groupContainer--b164e:focus-within{
7542
+ .bp_date_picker_module_datePicker--464ce .bp_date_picker_module_group--464ce .bp_date_picker_module_groupContainer--464ce:focus-within{
7543
7543
  outline:var(--date-picker-focus-outline);
7544
7544
  }
7545
- .bp_date_picker_module_datePicker--b164e .bp_date_picker_module_group--b164e .bp_date_picker_module_groupContainer--b164e.bp_date_picker_module_error--b164e:not(:focus-within){
7545
+ .bp_date_picker_module_datePicker--464ce .bp_date_picker_module_group--464ce .bp_date_picker_module_groupContainer--464ce.bp_date_picker_module_error--464ce:not(:focus-within){
7546
7546
  outline:var(--date-picker-error-outline);
7547
7547
  }
7548
- .bp_date_picker_module_datePicker--b164e .bp_date_picker_module_group--b164e .bp_date_picker_module_groupContainer--b164e.bp_date_picker_module_error--b164e:focus-within{
7548
+ .bp_date_picker_module_datePicker--464ce .bp_date_picker_module_group--464ce .bp_date_picker_module_groupContainer--464ce.bp_date_picker_module_error--464ce:focus-within{
7549
7549
  outline:var(--date-picker-focus-outline);
7550
7550
  }
7551
- .bp_date_picker_module_datePicker--b164e .bp_date_picker_module_group--b164e .bp_date_picker_module_groupContainer--b164e .bp_date_picker_module_groupContainerInput--b164e{
7551
+ .bp_date_picker_module_datePicker--464ce .bp_date_picker_module_group--464ce .bp_date_picker_module_groupContainer--464ce .bp_date_picker_module_groupContainerInput--464ce{
7552
7552
  align-items:center;
7553
7553
  display:inline-flex;
7554
7554
  height:var(--date-picker-height);
7555
7555
  text-transform:uppercase;
7556
7556
  white-space:nowrap;
7557
7557
  }
7558
- .bp_date_picker_module_datePicker--b164e .bp_date_picker_module_group--b164e .bp_date_picker_module_groupContainer--b164e .bp_date_picker_module_groupContainerInput--b164e .bp_date_picker_module_groupContainerInputSegment--b164e{
7558
+ .bp_date_picker_module_datePicker--464ce .bp_date_picker_module_group--464ce .bp_date_picker_module_groupContainer--464ce .bp_date_picker_module_groupContainerInput--464ce .bp_date_picker_module_groupContainerInputSegment--464ce{
7559
7559
  border:unset;
7560
7560
  border-radius:unset;
7561
7561
  box-shadow:unset;
@@ -7565,21 +7565,21 @@
7565
7565
  transition:unset;
7566
7566
  width:unset;
7567
7567
  }
7568
- .bp_date_picker_module_datePicker--b164e .bp_date_picker_module_group--b164e .bp_date_picker_module_groupContainer--b164e .bp_date_picker_module_groupContainerInput--b164e .bp_date_picker_module_groupContainerInputSegment--b164e[data-placeholder]{
7568
+ .bp_date_picker_module_datePicker--464ce .bp_date_picker_module_group--464ce .bp_date_picker_module_groupContainer--464ce .bp_date_picker_module_groupContainerInput--464ce .bp_date_picker_module_groupContainerInputSegment--464ce[data-placeholder]{
7569
7569
  color:var(--date-picker-input-placeholder-color);
7570
7570
  }
7571
- .bp_date_picker_module_datePicker--b164e .bp_date_picker_module_group--b164e .bp_date_picker_module_groupContainer--b164e .bp_date_picker_module_groupContainerInput--b164e .bp_date_picker_module_groupContainerInputSegment--b164e:focus{
7571
+ .bp_date_picker_module_datePicker--464ce .bp_date_picker_module_group--464ce .bp_date_picker_module_groupContainer--464ce .bp_date_picker_module_groupContainerInput--464ce .bp_date_picker_module_groupContainerInputSegment--464ce:focus{
7572
7572
  background:var(--date-picker-input-segment-focused-background);
7573
7573
  caret-color:#0000;
7574
7574
  outline:none;
7575
7575
  }
7576
- .bp_date_picker_module_datePicker--b164e .bp_date_picker_module_group--b164e .bp_date_picker_module_groupContainer--b164e .bp_date_picker_module_groupContainerInput--b164e .bp_date_picker_module_groupContainerInputSegment--b164e:focus[data-placeholder]{
7576
+ .bp_date_picker_module_datePicker--464ce .bp_date_picker_module_group--464ce .bp_date_picker_module_groupContainer--464ce .bp_date_picker_module_groupContainerInput--464ce .bp_date_picker_module_groupContainerInputSegment--464ce:focus[data-placeholder]{
7577
7577
  color:var(--date-picker-input-placeholder-focused-color);
7578
7578
  }
7579
- .bp_date_picker_module_datePicker--b164e .bp_date_picker_module_group--b164e:hover .bp_date_picker_module_groupContainer--b164e:not(:focus-within, .bp_date_picker_module_error--b164e){
7579
+ .bp_date_picker_module_datePicker--464ce .bp_date_picker_module_group--464ce:hover .bp_date_picker_module_groupContainer--464ce:not(:focus-within, .bp_date_picker_module_error--464ce){
7580
7580
  outline-color:var(--date-picker-hover-outline-color);
7581
7581
  }
7582
- .bp_date_picker_module_datePicker--b164e .bp_date_picker_module_group--b164e .bp_date_picker_module_button--b164e{
7582
+ .bp_date_picker_module_datePicker--464ce .bp_date_picker_module_group--464ce .bp_date_picker_module_button--464ce{
7583
7583
  align-items:center;
7584
7584
  background-color:initial;
7585
7585
  border:none;
@@ -7594,70 +7594,70 @@
7594
7594
  right:var(--date-picker-padding-inline);
7595
7595
  width:var(--date-picker-icon-button-size);
7596
7596
  }
7597
- .bp_date_picker_module_datePicker--b164e .bp_date_picker_module_group--b164e .bp_date_picker_module_button--b164e.bp_date_picker_module_clear--b164e{
7597
+ .bp_date_picker_module_datePicker--464ce .bp_date_picker_module_group--464ce .bp_date_picker_module_button--464ce.bp_date_picker_module_clear--464ce{
7598
7598
  right:var(--date-picker-clear-button-right);
7599
7599
  }
7600
- .bp_date_picker_module_datePicker--b164e .bp_date_picker_module_group--b164e .bp_date_picker_module_button--b164e:focus-visible,.bp_date_picker_module_datePicker--b164e .bp_date_picker_module_group--b164e .bp_date_picker_module_button--b164e[data-focus-visible]{
7600
+ .bp_date_picker_module_datePicker--464ce .bp_date_picker_module_group--464ce .bp_date_picker_module_button--464ce:focus-visible,.bp_date_picker_module_datePicker--464ce .bp_date_picker_module_group--464ce .bp_date_picker_module_button--464ce[data-focus-visible]{
7601
7601
  background-color:var(--date-picker-icon-button-focus-background-color);
7602
7602
  outline:var(--date-picker-icon-button-focus-outline);
7603
7603
  }
7604
- .bp_date_picker_module_datePicker--b164e .bp_date_picker_module_group--b164e .bp_date_picker_module_button--b164e:hover{
7604
+ .bp_date_picker_module_datePicker--464ce .bp_date_picker_module_group--464ce .bp_date_picker_module_button--464ce:hover{
7605
7605
  background:var(--date-picker-icon-button-hover-background);
7606
7606
  }
7607
- .bp_date_picker_module_datePicker--b164e .bp_date_picker_module_group--b164e .bp_date_picker_module_button--b164e:hover *{
7607
+ .bp_date_picker_module_datePicker--464ce .bp_date_picker_module_group--464ce .bp_date_picker_module_button--464ce:hover *{
7608
7608
  fill:var(--date-picker-icon-button-hover-fill);
7609
7609
  }
7610
- .bp_date_picker_module_datePicker--b164e .bp_date_picker_module_group--b164e .bp_date_picker_module_button--b164e:active{
7610
+ .bp_date_picker_module_datePicker--464ce .bp_date_picker_module_group--464ce .bp_date_picker_module_button--464ce:active{
7611
7611
  background:var(--date-picker-icon-button-active-background);
7612
7612
  }
7613
- .bp_date_picker_module_datePicker--b164e .bp_date_picker_module_group--b164e .bp_date_picker_module_button--b164e:active *{
7613
+ .bp_date_picker_module_datePicker--464ce .bp_date_picker_module_group--464ce .bp_date_picker_module_button--464ce:active *{
7614
7614
  fill:var(--date-picker-icon-button-active-fill);
7615
7615
  }
7616
- .bp_date_picker_module_datePicker--b164e .bp_date_picker_module_group--b164e .bp_date_picker_module_button--b164e:disabled{
7616
+ .bp_date_picker_module_datePicker--464ce .bp_date_picker_module_group--464ce .bp_date_picker_module_button--464ce:disabled{
7617
7617
  opacity:1;
7618
7618
  }
7619
- .bp_date_picker_module_datePicker--b164e .bp_date_picker_module_inlineError--b164e{
7619
+ .bp_date_picker_module_datePicker--464ce .bp_date_picker_module_inlineError--464ce{
7620
7620
  margin-block-start:var(--date-picker-inline-error-margin);
7621
7621
  }
7622
7622
 
7623
- .bp_date_picker_module_datePickerPopoverContent--b164e{
7623
+ .bp_date_picker_module_datePickerPopoverContent--464ce{
7624
7624
  z-index:var(--z-index-popover);
7625
7625
  }
7626
7626
 
7627
- .bp_date_picker_module_groupContainer--b164e[data-bp-animated=true]{
7627
+ .bp_date_picker_module_groupContainer--464ce[data-bp-animated=true]{
7628
7628
  transition-duration:var(--bp-duration-short);
7629
7629
  transition-property:outline-color;
7630
7630
  transition-timing-function:var(--bp-curve-small-off);
7631
7631
  }
7632
7632
 
7633
- .bp_date_picker_module_group--b164e:hover .bp_date_picker_module_groupContainer--b164e[data-bp-animated=true]:not(:focus-within, .bp_date_picker_module_error--b164e), .bp_date_picker_module_groupContainer--b164e[data-bp-animated=true].bp_date_picker_module_error--b164e, .bp_date_picker_module_groupContainer--b164e[data-bp-animated=true]:focus-within{
7633
+ .bp_date_picker_module_group--464ce:hover .bp_date_picker_module_groupContainer--464ce[data-bp-animated=true]:not(:focus-within, .bp_date_picker_module_error--464ce), .bp_date_picker_module_groupContainer--464ce[data-bp-animated=true].bp_date_picker_module_error--464ce, .bp_date_picker_module_groupContainer--464ce[data-bp-animated=true]:focus-within{
7634
7634
  transition-timing-function:var(--bp-curve-small-on);
7635
7635
  }
7636
7636
 
7637
- .bp_date_picker_module_datePickerPopoverContent--b164e[data-bp-animated=true][data-state=open]{
7637
+ .bp_date_picker_module_datePickerPopoverContent--464ce[data-bp-animated=true][data-state=open]{
7638
7638
  animation-duration:var(--bp-duration-medium);
7639
7639
  animation-fill-mode:backwards;
7640
7640
  animation-timing-function:var(--bp-curve-medium-on);
7641
7641
  }
7642
- .bp_date_picker_module_datePickerPopoverContent--b164e[data-bp-animated=true][data-state=open][data-side=top]{
7643
- animation-name:bp_date_picker_module_bpDatePickerCalendarMenuTopSlideEnter--b164e, bp_date_picker_module_bpDatePickerCalendarMenuFadeIn--b164e;
7642
+ .bp_date_picker_module_datePickerPopoverContent--464ce[data-bp-animated=true][data-state=open][data-side=top]{
7643
+ animation-name:bp_date_picker_module_bpDatePickerCalendarMenuTopSlideEnter--464ce, bp_date_picker_module_bpDatePickerCalendarMenuFadeIn--464ce;
7644
7644
  }
7645
- .bp_date_picker_module_datePickerPopoverContent--b164e[data-bp-animated=true][data-state=open][data-side=bottom]{
7646
- animation-name:bp_date_picker_module_bpDatePickerCalendarMenuBottomSlideEnter--b164e, bp_date_picker_module_bpDatePickerCalendarMenuFadeIn--b164e;
7645
+ .bp_date_picker_module_datePickerPopoverContent--464ce[data-bp-animated=true][data-state=open][data-side=bottom]{
7646
+ animation-name:bp_date_picker_module_bpDatePickerCalendarMenuBottomSlideEnter--464ce, bp_date_picker_module_bpDatePickerCalendarMenuFadeIn--464ce;
7647
7647
  }
7648
- .bp_date_picker_module_datePickerPopoverContent--b164e[data-bp-animated=true][data-state=closed]{
7648
+ .bp_date_picker_module_datePickerPopoverContent--464ce[data-bp-animated=true][data-state=closed]{
7649
7649
  animation-duration:var(--bp-duration-short);
7650
7650
  animation-fill-mode:forwards;
7651
7651
  animation-timing-function:var(--bp-curve-medium-off);
7652
7652
  }
7653
- .bp_date_picker_module_datePickerPopoverContent--b164e[data-bp-animated=true][data-state=closed][data-side=top]{
7654
- animation-name:bp_date_picker_module_bpDatePickerCalendarMenuTopSlideExit--b164e, bp_date_picker_module_bpDatePickerCalendarMenuFadeOut--b164e;
7653
+ .bp_date_picker_module_datePickerPopoverContent--464ce[data-bp-animated=true][data-state=closed][data-side=top]{
7654
+ animation-name:bp_date_picker_module_bpDatePickerCalendarMenuTopSlideExit--464ce, bp_date_picker_module_bpDatePickerCalendarMenuFadeOut--464ce;
7655
7655
  }
7656
- .bp_date_picker_module_datePickerPopoverContent--b164e[data-bp-animated=true][data-state=closed][data-side=bottom]{
7657
- animation-name:bp_date_picker_module_bpDatePickerCalendarMenuBottomSlideExit--b164e, bp_date_picker_module_bpDatePickerCalendarMenuFadeOut--b164e;
7656
+ .bp_date_picker_module_datePickerPopoverContent--464ce[data-bp-animated=true][data-state=closed][data-side=bottom]{
7657
+ animation-name:bp_date_picker_module_bpDatePickerCalendarMenuBottomSlideExit--464ce, bp_date_picker_module_bpDatePickerCalendarMenuFadeOut--464ce;
7658
7658
  }
7659
7659
 
7660
- @keyframes bp_date_picker_module_bpDatePickerCalendarMenuFadeIn--b164e{
7660
+ @keyframes bp_date_picker_module_bpDatePickerCalendarMenuFadeIn--464ce{
7661
7661
  from{
7662
7662
  opacity:var(--bp-opacity-hidden);
7663
7663
  }
@@ -7665,7 +7665,7 @@
7665
7665
  opacity:var(--bp-opacity-visible);
7666
7666
  }
7667
7667
  }
7668
- @keyframes bp_date_picker_module_bpDatePickerCalendarMenuFadeOut--b164e{
7668
+ @keyframes bp_date_picker_module_bpDatePickerCalendarMenuFadeOut--464ce{
7669
7669
  from{
7670
7670
  opacity:var(--bp-opacity-visible);
7671
7671
  }
@@ -7673,7 +7673,7 @@
7673
7673
  opacity:var(--bp-opacity-hidden);
7674
7674
  }
7675
7675
  }
7676
- @keyframes bp_date_picker_module_bpDatePickerCalendarMenuTopSlideEnter--b164e{
7676
+ @keyframes bp_date_picker_module_bpDatePickerCalendarMenuTopSlideEnter--464ce{
7677
7677
  from{
7678
7678
  transform:translateY(var(--bp-space-020));
7679
7679
  }
@@ -7681,7 +7681,7 @@
7681
7681
  transform:translateY(0);
7682
7682
  }
7683
7683
  }
7684
- @keyframes bp_date_picker_module_bpDatePickerCalendarMenuTopSlideExit--b164e{
7684
+ @keyframes bp_date_picker_module_bpDatePickerCalendarMenuTopSlideExit--464ce{
7685
7685
  from{
7686
7686
  transform:translateY(0);
7687
7687
  }
@@ -7689,7 +7689,7 @@
7689
7689
  transform:translateY(var(--bp-space-020));
7690
7690
  }
7691
7691
  }
7692
- @keyframes bp_date_picker_module_bpDatePickerCalendarMenuBottomSlideEnter--b164e{
7692
+ @keyframes bp_date_picker_module_bpDatePickerCalendarMenuBottomSlideEnter--464ce{
7693
7693
  from{
7694
7694
  transform:translateY(calc(var(--bp-space-020)*-1));
7695
7695
  }
@@ -7697,7 +7697,7 @@
7697
7697
  transform:translateY(0);
7698
7698
  }
7699
7699
  }
7700
- @keyframes bp_date_picker_module_bpDatePickerCalendarMenuBottomSlideExit--b164e{
7700
+ @keyframes bp_date_picker_module_bpDatePickerCalendarMenuBottomSlideExit--464ce{
7701
7701
  from{
7702
7702
  transform:translateY(0);
7703
7703
  }
package/dist/lib-esm/date-picker/date-picker.js CHANGED
@@ -41,6 +41,7 @@ const DatePicker = /*#__PURE__*/forwardRef((props, forwardedRef) => {
41
41
  hideLabel = false,
42
42
  label,
43
43
  openCalendarDropdownAriaLabel,
44
+ required = false,
44
45
  clearDatePickerAriaLabel,
45
46
  error,
46
47
  isOpen: isOpenProp,
@@ -157,7 +158,7 @@ const DatePicker = /*#__PURE__*/forwardRef((props, forwardedRef) => {
157
158
  event.preventDefault();
158
159
  }, []);
159
160
  const displayValue = value !== undefined ? value : internalValue;
160
- const Label = useLabelable(label, '');
161
+ const Label = useLabelable(label, '', required);
161
162
  const inlineErrorId = useUniqueId('inline-error-');
162
163
  const ariaDescribedBy = clsx(rest['aria-describedby'], {
163
164
  [inlineErrorId]: hasError
@@ -176,6 +177,7 @@ const DatePicker = /*#__PURE__*/forwardRef((props, forwardedRef) => {
176
177
  "data-modern": 'true' ,
177
178
  isDisabled: isDisabled,
178
179
  isInvalid: hasError,
180
+ isRequired: required,
179
181
  onChange: onDatePickerValueChanged,
180
182
  value: displayValue,
181
183
  children: [jsx(Label, {
package/dist/lib-esm/date-picker/date-picker.module.js CHANGED
@@ -1,4 +1,4 @@
1
1
  import '../index.css';
2
- var styles = {"datePicker":"bp_date_picker_module_datePicker--b164e","label":"bp_date_picker_module_label--b164e","group":"bp_date_picker_module_group--b164e","disabled":"bp_date_picker_module_disabled--b164e","groupContainer":"bp_date_picker_module_groupContainer--b164e","error":"bp_date_picker_module_error--b164e","groupContainerInput":"bp_date_picker_module_groupContainerInput--b164e","groupContainerInputSegment":"bp_date_picker_module_groupContainerInputSegment--b164e","button":"bp_date_picker_module_button--b164e","clear":"bp_date_picker_module_clear--b164e","inlineError":"bp_date_picker_module_inlineError--b164e","datePickerPopoverContent":"bp_date_picker_module_datePickerPopoverContent--b164e"};
2
+ var styles = {"datePicker":"bp_date_picker_module_datePicker--464ce","label":"bp_date_picker_module_label--464ce","group":"bp_date_picker_module_group--464ce","disabled":"bp_date_picker_module_disabled--464ce","groupContainer":"bp_date_picker_module_groupContainer--464ce","error":"bp_date_picker_module_error--464ce","groupContainerInput":"bp_date_picker_module_groupContainerInput--464ce","groupContainerInputSegment":"bp_date_picker_module_groupContainerInputSegment--464ce","button":"bp_date_picker_module_button--464ce","clear":"bp_date_picker_module_clear--464ce","inlineError":"bp_date_picker_module_inlineError--464ce","datePickerPopoverContent":"bp_date_picker_module_datePickerPopoverContent--464ce"};
3
3
 
4
4
  export { styles as default };
package/dist/lib-esm/date-picker/types.d.ts CHANGED
@@ -3,7 +3,7 @@ import { type CalendarBase } from '../primitives/calendar/types';
3
3
  import { type InputValueProps } from '../types/input-value-props';
4
4
  import { type Modify } from '../types/modify';
5
5
  import { type Labelable } from '../util-components/labelable/types';
6
- interface DatePickerPropsBase extends Omit<RACDatePickerProps<DateValue>, 'children' | 'isOpen' | 'onOpenChange' | 'defaultOpen'>, Labelable {
6
+ interface DatePickerPropsBase extends Omit<RACDatePickerProps<DateValue>, 'children' | 'isOpen' | 'onOpenChange' | 'defaultOpen' | 'isRequired'>, Labelable {
7
7
  /**
8
8
  * When `true`, label text is hidden.
9
9
  *
@@ -14,6 +14,11 @@ interface DatePickerPropsBase extends Omit<RACDatePickerProps<DateValue>, 'child
14
14
  * Aria label for button opening calendar in DatePicker
15
15
  */
16
16
  openCalendarDropdownAriaLabel: string;
17
+ /**
18
+ * When true it indicates DatePicker input must be filled out
19
+ * @default false
20
+ */
21
+ required?: boolean;
17
22
  /**
18
23
  * Aria label for button clearing DatePicker input
19
24
  */
package/dist/lib-esm/index.css CHANGED
@@ -7398,7 +7398,7 @@
7398
7398
  color:var(--calendar-disabled-text-color);
7399
7399
  text-decoration:line-through;
7400
7400
  }
7401
- .bp_date_picker_module_datePicker--b164e[data-modern=false]{
7401
+ .bp_date_picker_module_datePicker--464ce[data-modern=false]{
7402
7402
  --date-picker-label-margin-bottom:var(--space-2);
7403
7403
  --date-picker-input-placeholder-color:var(--text-text-on-light-secondary);
7404
7404
  --date-picker-input-placeholder-focused-color:var(--text-text-on-light);
@@ -7424,7 +7424,7 @@
7424
7424
  --date-picker-icon-button-hover-fill:var(--icon-cta-icon-hover);
7425
7425
  --date-picker-clear-button-right:var(--size-9);
7426
7426
  }
7427
- .bp_date_picker_module_datePicker--b164e[data-modern=false] .bp_date_picker_module_label--b164e{
7427
+ .bp_date_picker_module_datePicker--464ce[data-modern=false] .bp_date_picker_module_label--464ce{
7428
7428
  font-family:var(--body-default-bold-font-family);
7429
7429
  font-size:var(--body-default-bold-font-size);
7430
7430
  font-weight:var(--body-default-bold-font-weight);
@@ -7433,7 +7433,7 @@
7433
7433
  text-decoration:var(--body-default-bold-text-decoration);
7434
7434
  text-transform:var(--body-default-bold-text-case);
7435
7435
  }
7436
- .bp_date_picker_module_datePicker--b164e[data-modern=false] .bp_date_picker_module_group--b164e{
7436
+ .bp_date_picker_module_datePicker--464ce[data-modern=false] .bp_date_picker_module_group--464ce{
7437
7437
  font-family:var(--body-default-font-family);
7438
7438
  font-size:var(--body-default-font-size);
7439
7439
  font-weight:var(--body-default-font-weight);
@@ -7443,7 +7443,7 @@
7443
7443
  text-transform:var(--body-default-text-case);
7444
7444
  }
7445
7445
 
7446
- .bp_date_picker_module_datePicker--b164e[data-modern=true]{
7446
+ .bp_date_picker_module_datePicker--464ce[data-modern=true]{
7447
7447
  --date-picker-label-margin-bottom:var(--bp-space-020);
7448
7448
  --date-picker-input-placeholder-color:var(--bp-text-text-on-light-secondary);
7449
7449
  --date-picker-input-placeholder-focused-color:var(--bp-text-text-on-light);
@@ -7469,7 +7469,7 @@
7469
7469
  --date-picker-icon-button-hover-fill:var(--bp-icon-cta-icon-hover);
7470
7470
  --date-picker-clear-button-right:var(--bp-size-090);
7471
7471
  }
7472
- .bp_date_picker_module_datePicker--b164e[data-modern=true] .bp_date_picker_module_label--b164e{
7472
+ .bp_date_picker_module_datePicker--464ce[data-modern=true] .bp_date_picker_module_label--464ce{
7473
7473
  font-family:var(--bp-font-font-family), -apple-system, BlinkMacSystemFont, "San Francisco", "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
7474
7474
  font-size:var(--bp-font-size-05);
7475
7475
  font-style:normal;
@@ -7477,7 +7477,7 @@
7477
7477
  letter-spacing:var(--bp-font-letter-spacing-01);
7478
7478
  line-height:var(--bp-font-line-height-04);
7479
7479
  }
7480
- :where(body.is-inter-font) .bp_date_picker_module_datePicker--b164e[data-modern=true] .bp_date_picker_module_label--b164e{
7480
+ :where(body.is-inter-font) .bp_date_picker_module_datePicker--464ce[data-modern=true] .bp_date_picker_module_label--464ce{
7481
7481
  font-family:"Inter Variable", -apple-system, BlinkMacSystemFont, "San Francisco", "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
7482
7482
  font-size:.875rem;
7483
7483
  font-style:normal;
@@ -7488,7 +7488,7 @@
7488
7488
  text-transform:none;
7489
7489
  }
7490
7490
 
7491
- .bp_date_picker_module_datePicker--b164e[data-modern=true] .bp_date_picker_module_group--b164e{
7491
+ .bp_date_picker_module_datePicker--464ce[data-modern=true] .bp_date_picker_module_group--464ce{
7492
7492
  font-family:var(--bp-font-font-family), -apple-system, BlinkMacSystemFont, "San Francisco", "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
7493
7493
  font-size:var(--bp-font-size-05);
7494
7494
  font-style:normal;
@@ -7496,7 +7496,7 @@
7496
7496
  letter-spacing:var(--bp-font-letter-spacing-01);
7497
7497
  line-height:var(--bp-font-line-height-04);
7498
7498
  }
7499
- :where(body.is-inter-font) .bp_date_picker_module_datePicker--b164e[data-modern=true] .bp_date_picker_module_group--b164e{
7499
+ :where(body.is-inter-font) .bp_date_picker_module_datePicker--464ce[data-modern=true] .bp_date_picker_module_group--464ce{
7500
7500
  font-family:"Inter Variable", -apple-system, BlinkMacSystemFont, "San Francisco", "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
7501
7501
  font-size:.875rem;
7502
7502
  font-style:normal;
@@ -7507,28 +7507,28 @@
7507
7507
  text-transform:none;
7508
7508
  }
7509
7509
 
7510
- .bp_date_picker_module_datePicker--b164e{
7510
+ .bp_date_picker_module_datePicker--464ce{
7511
7511
  width:100%;
7512
7512
  }
7513
- .bp_date_picker_module_datePicker--b164e.bp_date_picker_module_disabled--b164e{
7513
+ .bp_date_picker_module_datePicker--464ce.bp_date_picker_module_disabled--464ce{
7514
7514
  opacity:var(--disabled-opacity);
7515
7515
  pointer-events:none;
7516
7516
  -webkit-user-select:none;
7517
7517
  user-select:none;
7518
7518
  }
7519
- .bp_date_picker_module_datePicker--b164e .bp_date_picker_module_label--b164e{
7519
+ .bp_date_picker_module_datePicker--464ce .bp_date_picker_module_label--464ce{
7520
7520
  cursor:default;
7521
- display:block;
7521
+ display:flex;
7522
7522
  margin-block-end:var(--date-picker-label-margin-bottom);
7523
7523
  width:fit-content;
7524
7524
  }
7525
- .bp_date_picker_module_datePicker--b164e .bp_date_picker_module_group--b164e{
7525
+ .bp_date_picker_module_datePicker--464ce .bp_date_picker_module_group--464ce{
7526
7526
  align-items:center;
7527
7527
  display:inline-flex;
7528
7528
  position:relative;
7529
7529
  width:100%;
7530
7530
  }
7531
- .bp_date_picker_module_datePicker--b164e .bp_date_picker_module_group--b164e .bp_date_picker_module_groupContainer--b164e{
7531
+ .bp_date_picker_module_datePicker--464ce .bp_date_picker_module_group--464ce .bp_date_picker_module_groupContainer--464ce{
7532
7532
  align-items:center;
7533
7533
  border-radius:var(--date-picker-border-radius);
7534
7534
  box-shadow:var(--date-picker-input-inner-shadow);
@@ -7539,23 +7539,23 @@
7539
7539
  position:relative;
7540
7540
  width:100%;
7541
7541
  }
7542
- .bp_date_picker_module_datePicker--b164e .bp_date_picker_module_group--b164e .bp_date_picker_module_groupContainer--b164e:focus-within{
7542
+ .bp_date_picker_module_datePicker--464ce .bp_date_picker_module_group--464ce .bp_date_picker_module_groupContainer--464ce:focus-within{
7543
7543
  outline:var(--date-picker-focus-outline);
7544
7544
  }
7545
- .bp_date_picker_module_datePicker--b164e .bp_date_picker_module_group--b164e .bp_date_picker_module_groupContainer--b164e.bp_date_picker_module_error--b164e:not(:focus-within){
7545
+ .bp_date_picker_module_datePicker--464ce .bp_date_picker_module_group--464ce .bp_date_picker_module_groupContainer--464ce.bp_date_picker_module_error--464ce:not(:focus-within){
7546
7546
  outline:var(--date-picker-error-outline);
7547
7547
  }
7548
- .bp_date_picker_module_datePicker--b164e .bp_date_picker_module_group--b164e .bp_date_picker_module_groupContainer--b164e.bp_date_picker_module_error--b164e:focus-within{
7548
+ .bp_date_picker_module_datePicker--464ce .bp_date_picker_module_group--464ce .bp_date_picker_module_groupContainer--464ce.bp_date_picker_module_error--464ce:focus-within{
7549
7549
  outline:var(--date-picker-focus-outline);
7550
7550
  }
7551
- .bp_date_picker_module_datePicker--b164e .bp_date_picker_module_group--b164e .bp_date_picker_module_groupContainer--b164e .bp_date_picker_module_groupContainerInput--b164e{
7551
+ .bp_date_picker_module_datePicker--464ce .bp_date_picker_module_group--464ce .bp_date_picker_module_groupContainer--464ce .bp_date_picker_module_groupContainerInput--464ce{
7552
7552
  align-items:center;
7553
7553
  display:inline-flex;
7554
7554
  height:var(--date-picker-height);
7555
7555
  text-transform:uppercase;
7556
7556
  white-space:nowrap;
7557
7557
  }
7558
- .bp_date_picker_module_datePicker--b164e .bp_date_picker_module_group--b164e .bp_date_picker_module_groupContainer--b164e .bp_date_picker_module_groupContainerInput--b164e .bp_date_picker_module_groupContainerInputSegment--b164e{
7558
+ .bp_date_picker_module_datePicker--464ce .bp_date_picker_module_group--464ce .bp_date_picker_module_groupContainer--464ce .bp_date_picker_module_groupContainerInput--464ce .bp_date_picker_module_groupContainerInputSegment--464ce{
7559
7559
  border:unset;
7560
7560
  border-radius:unset;
7561
7561
  box-shadow:unset;
@@ -7565,21 +7565,21 @@
7565
7565
  transition:unset;
7566
7566
  width:unset;
7567
7567
  }
7568
- .bp_date_picker_module_datePicker--b164e .bp_date_picker_module_group--b164e .bp_date_picker_module_groupContainer--b164e .bp_date_picker_module_groupContainerInput--b164e .bp_date_picker_module_groupContainerInputSegment--b164e[data-placeholder]{
7568
+ .bp_date_picker_module_datePicker--464ce .bp_date_picker_module_group--464ce .bp_date_picker_module_groupContainer--464ce .bp_date_picker_module_groupContainerInput--464ce .bp_date_picker_module_groupContainerInputSegment--464ce[data-placeholder]{
7569
7569
  color:var(--date-picker-input-placeholder-color);
7570
7570
  }
7571
- .bp_date_picker_module_datePicker--b164e .bp_date_picker_module_group--b164e .bp_date_picker_module_groupContainer--b164e .bp_date_picker_module_groupContainerInput--b164e .bp_date_picker_module_groupContainerInputSegment--b164e:focus{
7571
+ .bp_date_picker_module_datePicker--464ce .bp_date_picker_module_group--464ce .bp_date_picker_module_groupContainer--464ce .bp_date_picker_module_groupContainerInput--464ce .bp_date_picker_module_groupContainerInputSegment--464ce:focus{
7572
7572
  background:var(--date-picker-input-segment-focused-background);
7573
7573
  caret-color:#0000;
7574
7574
  outline:none;
7575
7575
  }
7576
- .bp_date_picker_module_datePicker--b164e .bp_date_picker_module_group--b164e .bp_date_picker_module_groupContainer--b164e .bp_date_picker_module_groupContainerInput--b164e .bp_date_picker_module_groupContainerInputSegment--b164e:focus[data-placeholder]{
7576
+ .bp_date_picker_module_datePicker--464ce .bp_date_picker_module_group--464ce .bp_date_picker_module_groupContainer--464ce .bp_date_picker_module_groupContainerInput--464ce .bp_date_picker_module_groupContainerInputSegment--464ce:focus[data-placeholder]{
7577
7577
  color:var(--date-picker-input-placeholder-focused-color);
7578
7578
  }
7579
- .bp_date_picker_module_datePicker--b164e .bp_date_picker_module_group--b164e:hover .bp_date_picker_module_groupContainer--b164e:not(:focus-within, .bp_date_picker_module_error--b164e){
7579
+ .bp_date_picker_module_datePicker--464ce .bp_date_picker_module_group--464ce:hover .bp_date_picker_module_groupContainer--464ce:not(:focus-within, .bp_date_picker_module_error--464ce){
7580
7580
  outline-color:var(--date-picker-hover-outline-color);
7581
7581
  }
7582
- .bp_date_picker_module_datePicker--b164e .bp_date_picker_module_group--b164e .bp_date_picker_module_button--b164e{
7582
+ .bp_date_picker_module_datePicker--464ce .bp_date_picker_module_group--464ce .bp_date_picker_module_button--464ce{
7583
7583
  align-items:center;
7584
7584
  background-color:initial;
7585
7585
  border:none;
@@ -7594,70 +7594,70 @@
7594
7594
  right:var(--date-picker-padding-inline);
7595
7595
  width:var(--date-picker-icon-button-size);
7596
7596
  }
7597
- .bp_date_picker_module_datePicker--b164e .bp_date_picker_module_group--b164e .bp_date_picker_module_button--b164e.bp_date_picker_module_clear--b164e{
7597
+ .bp_date_picker_module_datePicker--464ce .bp_date_picker_module_group--464ce .bp_date_picker_module_button--464ce.bp_date_picker_module_clear--464ce{
7598
7598
  right:var(--date-picker-clear-button-right);
7599
7599
  }
7600
- .bp_date_picker_module_datePicker--b164e .bp_date_picker_module_group--b164e .bp_date_picker_module_button--b164e:focus-visible,.bp_date_picker_module_datePicker--b164e .bp_date_picker_module_group--b164e .bp_date_picker_module_button--b164e[data-focus-visible]{
7600
+ .bp_date_picker_module_datePicker--464ce .bp_date_picker_module_group--464ce .bp_date_picker_module_button--464ce:focus-visible,.bp_date_picker_module_datePicker--464ce .bp_date_picker_module_group--464ce .bp_date_picker_module_button--464ce[data-focus-visible]{
7601
7601
  background-color:var(--date-picker-icon-button-focus-background-color);
7602
7602
  outline:var(--date-picker-icon-button-focus-outline);
7603
7603
  }
7604
- .bp_date_picker_module_datePicker--b164e .bp_date_picker_module_group--b164e .bp_date_picker_module_button--b164e:hover{
7604
+ .bp_date_picker_module_datePicker--464ce .bp_date_picker_module_group--464ce .bp_date_picker_module_button--464ce:hover{
7605
7605
  background:var(--date-picker-icon-button-hover-background);
7606
7606
  }
7607
- .bp_date_picker_module_datePicker--b164e .bp_date_picker_module_group--b164e .bp_date_picker_module_button--b164e:hover *{
7607
+ .bp_date_picker_module_datePicker--464ce .bp_date_picker_module_group--464ce .bp_date_picker_module_button--464ce:hover *{
7608
7608
  fill:var(--date-picker-icon-button-hover-fill);
7609
7609
  }
7610
- .bp_date_picker_module_datePicker--b164e .bp_date_picker_module_group--b164e .bp_date_picker_module_button--b164e:active{
7610
+ .bp_date_picker_module_datePicker--464ce .bp_date_picker_module_group--464ce .bp_date_picker_module_button--464ce:active{
7611
7611
  background:var(--date-picker-icon-button-active-background);
7612
7612
  }
7613
- .bp_date_picker_module_datePicker--b164e .bp_date_picker_module_group--b164e .bp_date_picker_module_button--b164e:active *{
7613
+ .bp_date_picker_module_datePicker--464ce .bp_date_picker_module_group--464ce .bp_date_picker_module_button--464ce:active *{
7614
7614
  fill:var(--date-picker-icon-button-active-fill);
7615
7615
  }
7616
- .bp_date_picker_module_datePicker--b164e .bp_date_picker_module_group--b164e .bp_date_picker_module_button--b164e:disabled{
7616
+ .bp_date_picker_module_datePicker--464ce .bp_date_picker_module_group--464ce .bp_date_picker_module_button--464ce:disabled{
7617
7617
  opacity:1;
7618
7618
  }
7619
- .bp_date_picker_module_datePicker--b164e .bp_date_picker_module_inlineError--b164e{
7619
+ .bp_date_picker_module_datePicker--464ce .bp_date_picker_module_inlineError--464ce{
7620
7620
  margin-block-start:var(--date-picker-inline-error-margin);
7621
7621
  }
7622
7622
 
7623
- .bp_date_picker_module_datePickerPopoverContent--b164e{
7623
+ .bp_date_picker_module_datePickerPopoverContent--464ce{
7624
7624
  z-index:var(--z-index-popover);
7625
7625
  }
7626
7626
 
7627
- .bp_date_picker_module_groupContainer--b164e[data-bp-animated=true]{
7627
+ .bp_date_picker_module_groupContainer--464ce[data-bp-animated=true]{
7628
7628
  transition-duration:var(--bp-duration-short);
7629
7629
  transition-property:outline-color;
7630
7630
  transition-timing-function:var(--bp-curve-small-off);
7631
7631
  }
7632
7632
 
7633
- .bp_date_picker_module_group--b164e:hover .bp_date_picker_module_groupContainer--b164e[data-bp-animated=true]:not(:focus-within, .bp_date_picker_module_error--b164e), .bp_date_picker_module_groupContainer--b164e[data-bp-animated=true].bp_date_picker_module_error--b164e, .bp_date_picker_module_groupContainer--b164e[data-bp-animated=true]:focus-within{
7633
+ .bp_date_picker_module_group--464ce:hover .bp_date_picker_module_groupContainer--464ce[data-bp-animated=true]:not(:focus-within, .bp_date_picker_module_error--464ce), .bp_date_picker_module_groupContainer--464ce[data-bp-animated=true].bp_date_picker_module_error--464ce, .bp_date_picker_module_groupContainer--464ce[data-bp-animated=true]:focus-within{
7634
7634
  transition-timing-function:var(--bp-curve-small-on);
7635
7635
  }
7636
7636
 
7637
- .bp_date_picker_module_datePickerPopoverContent--b164e[data-bp-animated=true][data-state=open]{
7637
+ .bp_date_picker_module_datePickerPopoverContent--464ce[data-bp-animated=true][data-state=open]{
7638
7638
  animation-duration:var(--bp-duration-medium);
7639
7639
  animation-fill-mode:backwards;
7640
7640
  animation-timing-function:var(--bp-curve-medium-on);
7641
7641
  }
7642
- .bp_date_picker_module_datePickerPopoverContent--b164e[data-bp-animated=true][data-state=open][data-side=top]{
7643
- animation-name:bp_date_picker_module_bpDatePickerCalendarMenuTopSlideEnter--b164e, bp_date_picker_module_bpDatePickerCalendarMenuFadeIn--b164e;
7642
+ .bp_date_picker_module_datePickerPopoverContent--464ce[data-bp-animated=true][data-state=open][data-side=top]{
7643
+ animation-name:bp_date_picker_module_bpDatePickerCalendarMenuTopSlideEnter--464ce, bp_date_picker_module_bpDatePickerCalendarMenuFadeIn--464ce;
7644
7644
  }
7645
- .bp_date_picker_module_datePickerPopoverContent--b164e[data-bp-animated=true][data-state=open][data-side=bottom]{
7646
- animation-name:bp_date_picker_module_bpDatePickerCalendarMenuBottomSlideEnter--b164e, bp_date_picker_module_bpDatePickerCalendarMenuFadeIn--b164e;
7645
+ .bp_date_picker_module_datePickerPopoverContent--464ce[data-bp-animated=true][data-state=open][data-side=bottom]{
7646
+ animation-name:bp_date_picker_module_bpDatePickerCalendarMenuBottomSlideEnter--464ce, bp_date_picker_module_bpDatePickerCalendarMenuFadeIn--464ce;
7647
7647
  }
7648
- .bp_date_picker_module_datePickerPopoverContent--b164e[data-bp-animated=true][data-state=closed]{
7648
+ .bp_date_picker_module_datePickerPopoverContent--464ce[data-bp-animated=true][data-state=closed]{
7649
7649
  animation-duration:var(--bp-duration-short);
7650
7650
  animation-fill-mode:forwards;
7651
7651
  animation-timing-function:var(--bp-curve-medium-off);
7652
7652
  }
7653
- .bp_date_picker_module_datePickerPopoverContent--b164e[data-bp-animated=true][data-state=closed][data-side=top]{
7654
- animation-name:bp_date_picker_module_bpDatePickerCalendarMenuTopSlideExit--b164e, bp_date_picker_module_bpDatePickerCalendarMenuFadeOut--b164e;
7653
+ .bp_date_picker_module_datePickerPopoverContent--464ce[data-bp-animated=true][data-state=closed][data-side=top]{
7654
+ animation-name:bp_date_picker_module_bpDatePickerCalendarMenuTopSlideExit--464ce, bp_date_picker_module_bpDatePickerCalendarMenuFadeOut--464ce;
7655
7655
  }
7656
- .bp_date_picker_module_datePickerPopoverContent--b164e[data-bp-animated=true][data-state=closed][data-side=bottom]{
7657
- animation-name:bp_date_picker_module_bpDatePickerCalendarMenuBottomSlideExit--b164e, bp_date_picker_module_bpDatePickerCalendarMenuFadeOut--b164e;
7656
+ .bp_date_picker_module_datePickerPopoverContent--464ce[data-bp-animated=true][data-state=closed][data-side=bottom]{
7657
+ animation-name:bp_date_picker_module_bpDatePickerCalendarMenuBottomSlideExit--464ce, bp_date_picker_module_bpDatePickerCalendarMenuFadeOut--464ce;
7658
7658
  }
7659
7659
 
7660
- @keyframes bp_date_picker_module_bpDatePickerCalendarMenuFadeIn--b164e{
7660
+ @keyframes bp_date_picker_module_bpDatePickerCalendarMenuFadeIn--464ce{
7661
7661
  from{
7662
7662
  opacity:var(--bp-opacity-hidden);
7663
7663
  }
@@ -7665,7 +7665,7 @@
7665
7665
  opacity:var(--bp-opacity-visible);
7666
7666
  }
7667
7667
  }
7668
- @keyframes bp_date_picker_module_bpDatePickerCalendarMenuFadeOut--b164e{
7668
+ @keyframes bp_date_picker_module_bpDatePickerCalendarMenuFadeOut--464ce{
7669
7669
  from{
7670
7670
  opacity:var(--bp-opacity-visible);
7671
7671
  }
@@ -7673,7 +7673,7 @@
7673
7673
  opacity:var(--bp-opacity-hidden);
7674
7674
  }
7675
7675
  }
7676
- @keyframes bp_date_picker_module_bpDatePickerCalendarMenuTopSlideEnter--b164e{
7676
+ @keyframes bp_date_picker_module_bpDatePickerCalendarMenuTopSlideEnter--464ce{
7677
7677
  from{
7678
7678
  transform:translateY(var(--bp-space-020));
7679
7679
  }
@@ -7681,7 +7681,7 @@
7681
7681
  transform:translateY(0);
7682
7682
  }
7683
7683
  }
7684
- @keyframes bp_date_picker_module_bpDatePickerCalendarMenuTopSlideExit--b164e{
7684
+ @keyframes bp_date_picker_module_bpDatePickerCalendarMenuTopSlideExit--464ce{
7685
7685
  from{
7686
7686
  transform:translateY(0);
7687
7687
  }
@@ -7689,7 +7689,7 @@
7689
7689
  transform:translateY(var(--bp-space-020));
7690
7690
  }
7691
7691
  }
7692
- @keyframes bp_date_picker_module_bpDatePickerCalendarMenuBottomSlideEnter--b164e{
7692
+ @keyframes bp_date_picker_module_bpDatePickerCalendarMenuBottomSlideEnter--464ce{
7693
7693
  from{
7694
7694
  transform:translateY(calc(var(--bp-space-020)*-1));
7695
7695
  }
@@ -7697,7 +7697,7 @@
7697
7697
  transform:translateY(0);
7698
7698
  }
7699
7699
  }
7700
- @keyframes bp_date_picker_module_bpDatePickerCalendarMenuBottomSlideExit--b164e{
7700
+ @keyframes bp_date_picker_module_bpDatePickerCalendarMenuBottomSlideExit--464ce{
7701
7701
  from{
7702
7702
  transform:translateY(0);
7703
7703
  }
package/dist/lib-esm/util-components/labelable/useLabelable.js CHANGED
@@ -16,13 +16,14 @@ const useLabelable = (label, inputId, isRequired = false) => {
16
16
  elementType = 'label',
17
17
  ...rest
18
18
  } = props;
19
+ const classNames = clsx(rest.className, {
20
+ [styles.required]: isRequired
21
+ });
19
22
  const labelProps = {
20
23
  ...rest,
21
24
  htmlFor: inputId,
22
25
  ref,
23
- className: clsx(rest.className, {
24
- [styles.required]: isRequired
25
- })
26
+ className: classNames
26
27
  };
27
28
  if (!label) {
28
29
  return null;
@@ -48,6 +49,7 @@ const useLabelable = (label, inputId, isRequired = false) => {
48
49
  }) : jsx(Role.span, {
49
50
  ...rest,
50
51
  ref: ref,
52
+ className: classNames,
51
53
  children: label
52
54
  });
53
55
  }
@@ -60,6 +62,7 @@ const useLabelable = (label, inputId, isRequired = false) => {
60
62
  }) : jsx(Role.span, {
61
63
  ...rest,
62
64
  ref: ref,
65
+ className: classNames,
63
66
  // @ts-expect-error: Otherwise we have a conflict of HTMLAttributes and our Blueprint components props.
64
67
  render: hideLabel ? jsx(VisuallyHidden, {
65
68
  render: label
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@box/blueprint-web",
3
- "version": "17.15.0",
3
+ "version": "17.15.1",
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.10.22",
58
+ "@box/blueprint-web-assets": "^5.10.23",
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.66",
89
+ "@box/storybook-utils": "^1.2.67",
90
90
  "@figma/code-connect": "1.4.4",
91
91
  "@playwright/test": "1.46.1",
92
92
  "@types/js-yaml": "^4.0.9",