@box/blueprint-web 12.26.0 → 12.27.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (6) hide show
  1. package/dist/lib-esm/date-picker/date-picker.js +5 -0
  2. package/dist/lib-esm/date-picker/date-picker.module.js +1 -1
  3. package/dist/lib-esm/index.css +230 -112
  4. package/dist/lib-esm/primitives/calendar/calendar.js +5 -0
  5. package/dist/lib-esm/primitives/calendar/calendar.module.js +1 -1
  6. package/package.json +1 -1
package/dist/lib-esm/date-picker/date-picker.js CHANGED
@@ -5,6 +5,7 @@ import * as RadixPopover from '@radix-ui/react-popover';
5
5
  import clsx from 'clsx';
6
6
  import { forwardRef, useState, useEffect, useRef, useCallback } from 'react';
7
7
  import { DatePicker as DatePicker$1, Group, DateInput, DateSegment, Button } from 'react-aria-components';
8
+ import { useBlueprintModernization } from '../blueprint-modernization-context/useBlueprintModernization.js';
8
9
  import { Calendar as Calendar$1 } from '../primitives/calendar/calendar.js';
9
10
  import '@internationalized/date';
10
11
  import { IconButton } from '../primitives/icon-button/icon-button.js';
@@ -44,6 +45,9 @@ const DatePicker = /*#__PURE__*/forwardRef((props, forwardedRef) => {
44
45
  previousMonthAriaLabel,
45
46
  ...rest
46
47
  } = props;
48
+ const {
49
+ enableModernizedComponents
50
+ } = useBlueprintModernization();
47
51
  const [internalValue, setInternalValue] = useState(defaultValue);
48
52
  useEffect(() => {
49
53
  if (value !== undefined) {
@@ -114,6 +118,7 @@ const DatePicker = /*#__PURE__*/forwardRef((props, forwardedRef) => {
114
118
  className: clsx(styles.datePicker, {
115
119
  [styles.disabled]: isDisabled
116
120
  }, className),
121
+ "data-modern": enableModernizedComponents,
117
122
  isDisabled: isDisabled,
118
123
  isInvalid: hasError,
119
124
  onChange: onDatePickerValueChanged,
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--5d704","disabled":"bp_date_picker_module_disabled--5d704","label":"bp_date_picker_module_label--5d704","group":"bp_date_picker_module_group--5d704","groupContainer":"bp_date_picker_module_groupContainer--5d704","error":"bp_date_picker_module_error--5d704","groupContainerInput":"bp_date_picker_module_groupContainerInput--5d704","groupContainerInputSegment":"bp_date_picker_module_groupContainerInputSegment--5d704","button":"bp_date_picker_module_button--5d704","clear":"bp_date_picker_module_clear--5d704","inlineError":"bp_date_picker_module_inlineError--5d704","datePickerPopoverContent":"bp_date_picker_module_datePickerPopoverContent--5d704","slide":"bp_date_picker_module_slide--5d704"};
2
+ var styles = {"datePicker":"bp_date_picker_module_datePicker--89682","disabled":"bp_date_picker_module_disabled--89682","label":"bp_date_picker_module_label--89682","group":"bp_date_picker_module_group--89682","groupContainer":"bp_date_picker_module_groupContainer--89682","error":"bp_date_picker_module_error--89682","groupContainerInput":"bp_date_picker_module_groupContainerInput--89682","groupContainerInputSegment":"bp_date_picker_module_groupContainerInputSegment--89682","button":"bp_date_picker_module_button--89682","clear":"bp_date_picker_module_clear--89682","inlineError":"bp_date_picker_module_inlineError--89682","datePickerPopoverContent":"bp_date_picker_module_datePickerPopoverContent--89682","slide":"bp_date_picker_module_slide--89682"};
3
3
 
4
4
  export { styles as default };
package/dist/lib-esm/index.css CHANGED
@@ -3455,33 +3455,99 @@
3455
3455
  z-index:-1;
3456
3456
  }
3457
3457
 
3458
- .bp_calendar_module_calendar--d053c{
3459
- background:var(--gray-white);
3460
- border-radius:var(--radius-2);
3461
- box-shadow:var(--dropshadow-3);
3458
+ .bp_calendar_module_calendar--085e4[data-modern=false]{
3459
+ --calendar-background:var(--gray-white);
3460
+ --calendar-padding-inline:var(--space-4);
3461
+ --calendar-padding-block:var(--space-4);
3462
+ --calendar-border-radius:var(--radius-2);
3463
+ --calendar-box-shadow:var(--dropshadow-3);
3464
+ --calendar-cell-selected-background:var(--box-blue-100);
3465
+ --calendar-cell-hovered-background:var(--gray-05);
3466
+ --calendar-cell-selected-hovered-background:var(--dark-blue-100);
3467
+ --calendar-cell-selected-focused-background:var(--dark-blue-100);
3468
+ --calendar-cell-outside-range-text-color:var(--gray-10);
3469
+ --calendar-cell-selected-text-color:var(--gray-white);
3470
+ --calendar-cell-border-radius:var(--radius-2);
3471
+ --calendar-cell-text-color:var(--gray-90);
3472
+ --calendar-cell-today-text-color:var(--box-blue-100);
3473
+ --calendar-cell-today-disabled-opacity:.6;
3474
+ --calendar-cell-today-dot-diameter:var(--space-1);
3475
+ --calendar-cell-today-dot-background:var(--box-blue-100);
3476
+ --calendar-cell-today-dot-bottom:var(--space-1);
3477
+ --calendar-cell-size:var(--size-8);
3478
+ --calendar-cell-focus-box-shadow:0 0 0 var(--size-05) var(--box-blue-100);
3479
+ --calendar-header-text-color:var(--gray-90);
3480
+ --calendar-header-button-background:var(--gray-white);
3481
+ --calendar-header-button-hover-background:var(--gray-05);
3482
+ --calendar-header-button-size:var(--size-8);
3483
+ --calendar-header-button-outline-width:var(--size-05);
3484
+ --calendar-header-button-focus-box-shadow:0 0 0 var(--size-05) var(--box-blue-100);
3485
+ --calendar-header-margin-bottom:var(--space-2);
3486
+ --calendar-header-cell-text-color:var(--text-text-on-light-secondary);
3487
+ --calendar-disabled-text-color:var(--gray-30);
3488
+ --calendar-focus-outline:var(--border-1) solid #fff;
3489
+ }
3490
+
3491
+ .bp_calendar_module_calendar--085e4[data-modern=true]{
3492
+ --calendar-background:var(--bp-gray-white);
3493
+ --calendar-padding-inline:var(--bp-space-040);
3494
+ --calendar-padding-block:var(--bp-space-040);
3495
+ --calendar-border-radius:var(--bp-radius-10);
3496
+ --calendar-box-shadow:var(--dropshadow-2);
3497
+ --calendar-cell-selected-background:var(--bp-box-blue-100);
3498
+ --calendar-cell-hovered-background:var(--bp-gray-05);
3499
+ --calendar-cell-selected-hovered-background:var(--bp-dark-blue-100);
3500
+ --calendar-cell-selected-focused-background:var(--bp-dark-blue-100);
3501
+ --calendar-cell-outside-range-text-color:var(--bp-gray-10);
3502
+ --calendar-cell-selected-text-color:var(--bp-gray-white);
3503
+ --calendar-cell-border-radius:var(--bp-radius-02);
3504
+ --calendar-cell-text-color:var(--bp-gray-90);
3505
+ --calendar-cell-today-text-color:var(--bp-box-blue-100);
3506
+ --calendar-cell-today-disabled-opacity:.6;
3507
+ --calendar-cell-today-dot-diameter:var(--bp-space-010);
3508
+ --calendar-cell-today-dot-background:var(--bp-box-blue-100);
3509
+ --calendar-cell-today-dot-bottom:var(--bp-space-010);
3510
+ --calendar-cell-size:var(--bp-size-080);
3511
+ --calendar-cell-focus-box-shadow:0 0 0 var(--bp-size-005) var(--bp-box-blue-100);
3512
+ --calendar-header-text-color:var(--bp-text-text-on-light);
3513
+ --calendar-header-button-background:var(--bp-gray-white);
3514
+ --calendar-header-button-hover-background:var(--bp-gray-05);
3515
+ --calendar-header-button-size:var(--bp-size-060);
3516
+ --calendar-header-button-outline-width:var(--bp-size-005);
3517
+ --calendar-header-button-focus-box-shadow:0 0 0 var(--bp-size-005) var(--bp-box-blue-100);
3518
+ --calendar-header-margin-bottom:var(--bp-space-020);
3519
+ --calendar-header-cell-text-color:var(--bp-text-text-on-light-secondary);
3520
+ --calendar-disabled-text-color:var(--bp-gray-30);
3521
+ --calendar-focus-outline:var(--bp-border-01) solid #fff;
3522
+ }
3523
+
3524
+ .bp_calendar_module_calendar--085e4{
3525
+ background:var(--calendar-background);
3526
+ border-radius:var(--calendar-border-radius);
3527
+ box-shadow:var(--calendar-box-shadow);
3462
3528
  font-family:var(--body-default-font-family);
3463
3529
  font-size:var(--body-default-font-size);
3464
3530
  font-weight:var(--body-default-font-weight);
3465
3531
  letter-spacing:var(--body-default-letter-spacing);
3466
3532
  line-height:var(--body-default-line-height);
3467
3533
  max-width:100%;
3468
- padding-block:var(--space-4);
3469
- padding-inline:var(--space-4);
3534
+ padding-block:var(--calendar-padding-block);
3535
+ padding-inline:var(--calendar-padding-inline);
3470
3536
  -webkit-text-decoration:var(--body-default-text-decoration);
3471
3537
  text-decoration:var(--body-default-text-decoration);
3472
3538
  text-transform:var(--body-default-text-case);
3473
3539
  width:-moz-fit-content;
3474
3540
  width:fit-content;
3475
3541
  }
3476
- .bp_calendar_module_calendar--d053c .bp_calendar_module_calendarGrid--d053c{
3542
+ .bp_calendar_module_calendar--085e4 .bp_calendar_module_calendarGrid--085e4{
3477
3543
  border-collapse:revert;
3478
3544
  border-spacing:revert;
3479
3545
  }
3480
- .bp_calendar_module_calendar--d053c .bp_calendar_module_calendarGrid--d053c td{
3546
+ .bp_calendar_module_calendar--085e4 .bp_calendar_module_calendarGrid--085e4 td{
3481
3547
  padding:1px;
3482
3548
  }
3483
- .bp_calendar_module_calendar--d053c .bp_calendar_module_calendarHeaderCell--d053c{
3484
- color:var(--text-text-on-light-secondary);
3549
+ .bp_calendar_module_calendar--085e4 .bp_calendar_module_calendarHeaderCell--085e4{
3550
+ color:var(--calendar-header-cell-text-color);
3485
3551
  font-family:var(--body-default-font-family);
3486
3552
  font-size:var(--body-default-font-size);
3487
3553
  font-weight:var(--body-default-font-weight);
@@ -3492,13 +3558,13 @@
3492
3558
  text-decoration:var(--body-default-text-decoration);
3493
3559
  text-transform:var(--body-default-text-case);
3494
3560
  }
3495
- .bp_calendar_module_calendar--d053c .bp_calendar_module_calendarHeader--d053c{
3561
+ .bp_calendar_module_calendar--085e4 .bp_calendar_module_calendarHeader--085e4{
3496
3562
  align-items:center;
3497
- color:var(--gray-90);
3563
+ color:var(--calendar-header-text-color);
3498
3564
  display:flex;
3499
- margin-block-end:var(--space-2);
3565
+ margin-block-end:var(--calendar-header-margin-bottom);
3500
3566
  }
3501
- .bp_calendar_module_calendar--d053c .bp_calendar_module_calendarHeader--d053c .bp_calendar_module_calendarHeaderHeading--d053c{
3567
+ .bp_calendar_module_calendar--085e4 .bp_calendar_module_calendarHeader--085e4 .bp_calendar_module_calendarHeaderHeading--085e4{
3502
3568
  flex:1;
3503
3569
  font-family:var(--body-large-bold-font-family);
3504
3570
  font-size:var(--body-large-bold-font-size);
@@ -3512,114 +3578,166 @@
3512
3578
  text-transform:capitalize;
3513
3579
  text-transform:var(--body-large-bold-text-case);
3514
3580
  }
3515
- .bp_calendar_module_calendar--d053c .bp_calendar_module_calendarHeader--d053c .bp_calendar_module_calendarHeaderButton--d053c{
3581
+ .bp_calendar_module_calendar--085e4 .bp_calendar_module_calendarHeader--085e4 .bp_calendar_module_calendarHeaderButton--085e4{
3516
3582
  align-items:center;
3517
- background-color:var(--gray-white);
3583
+ background-color:var(--calendar-header-button-background);
3518
3584
  border:none;
3519
- border-radius:var(--radius-2);
3585
+ border-radius:var(--calendar-cell-border-radius);
3520
3586
  cursor:pointer;
3521
3587
  display:flex;
3522
- height:var(--size-8);
3588
+ height:var(--calendar-header-button-size);
3523
3589
  justify-content:center;
3524
3590
  margin:0;
3525
3591
  outline:none;
3526
3592
  padding:0;
3527
- width:var(--size-8);
3593
+ width:var(--calendar-header-button-size);
3528
3594
  }
3529
- .bp_calendar_module_calendar--d053c .bp_calendar_module_calendarHeader--d053c .bp_calendar_module_calendarHeaderButton--d053c:disabled{
3595
+ .bp_calendar_module_calendar--085e4 .bp_calendar_module_calendarHeader--085e4 .bp_calendar_module_calendarHeaderButton--085e4:disabled{
3530
3596
  cursor:default;
3531
3597
  opacity:60%;
3532
3598
  }
3533
- .bp_calendar_module_calendar--d053c .bp_calendar_module_calendarHeader--d053c .bp_calendar_module_calendarHeaderButton--d053c:disabled *{
3534
- fill:var(--gray-30);
3599
+ .bp_calendar_module_calendar--085e4 .bp_calendar_module_calendarHeader--085e4 .bp_calendar_module_calendarHeaderButton--085e4:disabled *{
3600
+ fill:var(--calendar-disabled-text-color);
3535
3601
  }
3536
- .bp_calendar_module_calendar--d053c .bp_calendar_module_calendarHeader--d053c .bp_calendar_module_calendarHeaderButton--d053c:hover:not(:disabled){
3537
- background-color:var(--gray-05);
3602
+ .bp_calendar_module_calendar--085e4 .bp_calendar_module_calendarHeader--085e4 .bp_calendar_module_calendarHeaderButton--085e4:hover:not(:disabled){
3603
+ background-color:var(--calendar-header-button-hover-background);
3538
3604
  }
3539
- .bp_calendar_module_calendar--d053c .bp_calendar_module_calendarHeader--d053c .bp_calendar_module_calendarHeaderButton--d053c[data-focus-visible]{
3540
- background-color:var(--gray-05);
3541
- box-shadow:0 0 0 var(--size-05) var(--box-blue-100);
3605
+ .bp_calendar_module_calendar--085e4 .bp_calendar_module_calendarHeader--085e4 .bp_calendar_module_calendarHeaderButton--085e4[data-focus-visible]{
3606
+ background-color:var(--calendar-header-button-hover-background);
3607
+ box-shadow:var(--calendar-header-button-focus-box-shadow);
3542
3608
  }
3543
- .bp_calendar_module_calendar--d053c .bp_calendar_module_calendarCell--d053c{
3544
- border-radius:var(--radius-2);
3545
- color:var(--gray-90);
3546
- line-height:var(--size-8);
3609
+ .bp_calendar_module_calendar--085e4 .bp_calendar_module_calendarCell--085e4{
3610
+ border-radius:var(--calendar-cell-border-radius);
3611
+ color:var(--calendar-cell-text-color);
3612
+ line-height:var(--calendar-cell-size);
3547
3613
  outline:none;
3548
3614
  text-align:center;
3549
- width:var(--size-8);
3615
+ width:var(--calendar-cell-size);
3550
3616
  }
3551
- .bp_calendar_module_calendar--d053c .bp_calendar_module_calendarCell--d053c.bp_calendar_module_today--d053c{
3552
- color:var(--box-blue-100);
3617
+ .bp_calendar_module_calendar--085e4 .bp_calendar_module_calendarCell--085e4.bp_calendar_module_today--085e4{
3618
+ color:var(--calendar-cell-today-text-color);
3553
3619
  font-family:var(--body-default-bold-font-family);
3554
3620
  font-size:var(--body-default-bold-font-size);
3555
3621
  font-weight:var(--body-default-bold-font-weight);
3556
3622
  letter-spacing:var(--body-default-bold-letter-spacing);
3557
3623
  line-height:var(--body-default-bold-line-height);
3558
- line-height:var(--size-8);
3624
+ line-height:var(--calendar-cell-size);
3559
3625
  position:relative;
3560
3626
  -webkit-text-decoration:var(--body-default-bold-text-decoration);
3561
3627
  text-decoration:var(--body-default-bold-text-decoration);
3562
3628
  text-transform:var(--body-default-bold-text-case);
3563
3629
  }
3564
- .bp_calendar_module_calendar--d053c .bp_calendar_module_calendarCell--d053c.bp_calendar_module_today--d053c[data-disabled]{
3630
+ .bp_calendar_module_calendar--085e4 .bp_calendar_module_calendarCell--085e4.bp_calendar_module_today--085e4[data-disabled]{
3565
3631
  cursor:default;
3566
- opacity:.6;
3632
+ opacity:var(--calendar-cell-today-disabled-opacity);
3567
3633
  }
3568
- .bp_calendar_module_calendar--d053c .bp_calendar_module_calendarCell--d053c.bp_calendar_module_today--d053c::after{
3569
- background-color:var(--box-blue-100);
3634
+ .bp_calendar_module_calendar--085e4 .bp_calendar_module_calendarCell--085e4.bp_calendar_module_today--085e4::after{
3635
+ background-color:var(--calendar-cell-today-dot-background);
3570
3636
  border-radius:50%;
3571
- bottom:var(--space-1);
3637
+ bottom:var(--calendar-cell-today-dot-bottom);
3572
3638
  content:"";
3573
- height:var(--space-1);
3639
+ height:var(--calendar-cell-today-dot-diameter);
3574
3640
  left:50%;
3575
3641
  position:absolute;
3576
3642
  transform:translateX(-50%);
3577
- width:var(--space-1);
3643
+ width:var(--calendar-cell-today-dot-diameter);
3578
3644
  }
3579
- .bp_calendar_module_calendar--d053c .bp_calendar_module_calendarCell--d053c:not([data-outside-month]){
3645
+ .bp_calendar_module_calendar--085e4 .bp_calendar_module_calendarCell--085e4:not([data-outside-month]){
3580
3646
  cursor:pointer;
3581
3647
  }
3582
- .bp_calendar_module_calendar--d053c .bp_calendar_module_calendarCell--d053c:not([data-outside-month]):not([data-selected]):not([data-disabled]):hover{
3583
- background-color:var(--gray-05);
3648
+ .bp_calendar_module_calendar--085e4 .bp_calendar_module_calendarCell--085e4:not([data-outside-month]):not([data-selected]):not([data-disabled]):hover{
3649
+ background-color:var(--calendar-cell-hovered-background);
3584
3650
  }
3585
- .bp_calendar_module_calendar--d053c .bp_calendar_module_calendarCell--d053c[data-focus-visible]:not([data-outside-month]){
3586
- box-shadow:0 0 0 var(--size-05) var(--box-blue-100);
3651
+ .bp_calendar_module_calendar--085e4 .bp_calendar_module_calendarCell--085e4[data-focus-visible]:not([data-outside-month]){
3652
+ box-shadow:var(--calendar-cell-focus-box-shadow);
3587
3653
  }
3588
- .bp_calendar_module_calendar--d053c .bp_calendar_module_calendarCell--d053c[data-selected]{
3589
- background-color:var(--box-blue-100);
3590
- color:var(--gray-white);
3654
+ .bp_calendar_module_calendar--085e4 .bp_calendar_module_calendarCell--085e4[data-selected]{
3655
+ background-color:var(--calendar-cell-selected-background);
3656
+ color:var(--calendar-cell-selected-text-color);
3591
3657
  }
3592
- .bp_calendar_module_calendar--d053c .bp_calendar_module_calendarCell--d053c[data-selected]:hover{
3593
- background-color:var(--dark-blue-100);
3658
+ .bp_calendar_module_calendar--085e4 .bp_calendar_module_calendarCell--085e4[data-selected]:hover{
3659
+ background-color:var(--calendar-cell-selected-hovered-background);
3594
3660
  }
3595
- .bp_calendar_module_calendar--d053c .bp_calendar_module_calendarCell--d053c[data-selected][data-focus-visible]{
3596
- background-color:var(--dark-blue-100);
3597
- box-shadow:0 0 0 var(--size-05) var(--box-blue-100);
3598
- outline:var(--border-1) solid #fff;
3661
+ .bp_calendar_module_calendar--085e4 .bp_calendar_module_calendarCell--085e4[data-selected][data-focus-visible]{
3662
+ background-color:var(--calendar-cell-selected-focused-background);
3663
+ box-shadow:var(--calendar-cell-focus-box-shadow);
3664
+ outline:var(--calendar-focus-outline);
3599
3665
  outline-offset:-.0625rem;
3600
3666
  }
3601
- .bp_calendar_module_calendar--d053c .bp_calendar_module_calendarCell--d053c[data-selected]::after{
3602
- background-color:var(--gray-white);
3667
+ .bp_calendar_module_calendar--085e4 .bp_calendar_module_calendarCell--085e4[data-selected]::after{
3668
+ background-color:var(--calendar-cell-selected-text-color);
3603
3669
  }
3604
- .bp_calendar_module_calendar--d053c .bp_calendar_module_calendarCell--d053c[data-disabled]:not(.bp_calendar_module_today--d053c){
3605
- color:var(--gray-10);
3670
+ .bp_calendar_module_calendar--085e4 .bp_calendar_module_calendarCell--085e4[data-disabled]:not(.bp_calendar_module_today--085e4){
3671
+ color:var(--calendar-cell-outside-range-text-color);
3606
3672
  cursor:default;
3607
3673
  }
3608
- .bp_calendar_module_calendar--d053c .bp_calendar_module_calendarCell--d053c[data-unavailable]{
3609
- color:var(--gray-30);
3674
+ .bp_calendar_module_calendar--085e4 .bp_calendar_module_calendarCell--085e4[data-unavailable]{
3675
+ color:var(--calendar-disabled-text-color);
3610
3676
  text-decoration:line-through;
3611
3677
  }
3612
3678
 
3613
- .bp_date_picker_module_datePicker--5d704{
3679
+ .bp_date_picker_module_datePicker--89682[data-modern=false]{
3680
+ --date-picker-label-margin-bottom:var(--space-2);
3681
+ --date-picker-input-placeholder-color:var(--text-text-on-light-secondary);
3682
+ --date-picker-input-placeholder-focused-color:var(--text-text-on-light);
3683
+ --date-picker-input-text-color:var(--text-text-on-light);
3684
+ --date-picker-input-segment-focused-background:var(--light-blue-20);
3685
+ --date-picker-input-inner-shadow:var(--innershadow-1);
3686
+ --date-picker-height:var(--size-10);
3687
+ --date-picker-padding-inline:var(--space-2);
3688
+ --date-picker-border:var(--border-1) solid var(--border-input-border);
3689
+ --date-picker-margin:var(--border-1);
3690
+ --date-picker-focus-outline:var(--border-2) solid var(--outline-focus-on-light);
3691
+ --date-picker-error-outline:var(--border-2) solid var(--text-text-error-on-light);
3692
+ --date-picker-border-radius:var(--radius-2);
3693
+ --date-picker-icon-button-size:var(--size-6);
3694
+ --date-picker-inline-error-margin:var(--space-2);
3695
+ --date-picker-icon-button-border-radius:var(--radius-2);
3696
+ --date-picker-icon-button-focus-background-color:var(--surface-cta-surface-icon-pressed);
3697
+ --date-picker-icon-button-focus-outline:var(--border-2) solid var(--outline-focus-on-light);
3698
+ --date-picker-icon-button-active-background:var(--surface-cta-surface-icon-pressed);
3699
+ --date-picker-icon-button-active-fill:var(--icon-cta-icon-pressed);
3700
+ --date-picker-icon-button-hover-background:var(--surface-cta-surface-icon-hover);
3701
+ --date-picker-icon-button-hover-fill:var(--icon-cta-icon-hover);
3702
+ --date-picker-clear-button-right:var(--size-9);
3703
+ }
3704
+
3705
+ .bp_date_picker_module_datePicker--89682[data-modern=true]{
3706
+ --date-picker-label-margin-bottom:var(--bp-space-020);
3707
+ --date-picker-input-placeholder-color:var(--bp-text-text-on-light-secondary);
3708
+ --date-picker-input-placeholder-focused-color:var(--bp-text-text-on-light);
3709
+ --date-picker-input-text-color:var(--bp-text-text-on-light);
3710
+ --date-picker-input-segment-focused-background:var(--bp-light-blue-20);
3711
+ --date-picker-input-inner-shadow:var(--innershadow-1);
3712
+ --date-picker-height:var(--bp-size-100);
3713
+ --date-picker-padding-inline:var(--bp-space-020);
3714
+ --date-picker-border:var(--bp-border-01) solid var(--bp-border-input-border);
3715
+ --date-picker-margin:var(--border-1);
3716
+ --date-picker-focus-outline:var(--bp-border-02) solid var(--bp-outline-focus-on-light);
3717
+ --date-picker-error-outline:var(--bp-border-02) solid var(--bp-text-text-error-on-light);
3718
+ --date-picker-border-radius:var(--bp-radius-06);
3719
+ --date-picker-icon-button-size:var(--bp-size-060);
3720
+ --date-picker-inline-error-margin:var(--bp-space-020);
3721
+ --date-picker-icon-button-border-radius:var(--bp-radius-06);
3722
+ --date-picker-icon-button-focus-background-color:var(--bp-surface-cta-surface-icon-pressed);
3723
+ --date-picker-icon-button-focus-outline:var(--bp-border-02) solid var(--bp-outline-focus-on-light);
3724
+ --date-picker-icon-button-active-background:var(--bp-surface-cta-surface-icon-pressed);
3725
+ --date-picker-icon-button-active-fill:var(--bp-icon-cta-icon-pressed);
3726
+ --date-picker-icon-button-hover-background:var(--bp-surface-cta-surface-icon-hover);
3727
+ --date-picker-icon-button-hover-fill:var(--bp-icon-cta-icon-hover);
3728
+ --date-picker-clear-button-right:var(--bp-size-090);
3729
+ }
3730
+
3731
+ .bp_date_picker_module_datePicker--89682{
3614
3732
  width:100%;
3615
3733
  }
3616
- .bp_date_picker_module_datePicker--5d704.bp_date_picker_module_disabled--5d704{
3734
+ .bp_date_picker_module_datePicker--89682.bp_date_picker_module_disabled--89682{
3617
3735
  opacity:60%;
3618
3736
  pointer-events:none;
3619
3737
  -webkit-user-select:none;
3620
3738
  user-select:none;
3621
3739
  }
3622
- .bp_date_picker_module_datePicker--5d704 .bp_date_picker_module_label--5d704{
3740
+ .bp_date_picker_module_datePicker--89682 .bp_date_picker_module_label--89682{
3623
3741
  cursor:default;
3624
3742
  display:block;
3625
3743
  font-family:var(--body-default-bold-font-family);
@@ -3627,16 +3745,15 @@
3627
3745
  font-weight:var(--body-default-bold-font-weight);
3628
3746
  letter-spacing:var(--body-default-bold-letter-spacing);
3629
3747
  line-height:var(--body-default-bold-line-height);
3630
- margin-block-end:var(--space-2);
3748
+ margin-block-end:var(--date-picker-label-margin-bottom);
3631
3749
  -webkit-text-decoration:var(--body-default-bold-text-decoration);
3632
3750
  text-decoration:var(--body-default-bold-text-decoration);
3633
3751
  text-transform:var(--body-default-bold-text-case);
3634
3752
  width:-moz-fit-content;
3635
3753
  width:fit-content;
3636
3754
  }
3637
- .bp_date_picker_module_datePicker--5d704 .bp_date_picker_module_group--5d704{
3755
+ .bp_date_picker_module_datePicker--89682 .bp_date_picker_module_group--89682{
3638
3756
  align-items:center;
3639
- box-shadow:var(--innershadow-1);
3640
3757
  display:inline-flex;
3641
3758
  font-family:var(--body-default-font-family);
3642
3759
  font-size:var(--body-default-font-size);
@@ -3649,96 +3766,97 @@
3649
3766
  text-transform:var(--body-default-text-case);
3650
3767
  width:100%;
3651
3768
  }
3652
- .bp_date_picker_module_datePicker--5d704 .bp_date_picker_module_group--5d704 .bp_date_picker_module_groupContainer--5d704{
3769
+ .bp_date_picker_module_datePicker--89682 .bp_date_picker_module_group--89682 .bp_date_picker_module_groupContainer--89682{
3653
3770
  align-items:center;
3654
- border-radius:var(--radius-2);
3771
+ border-radius:var(--date-picker-border-radius);
3772
+ box-shadow:var(--date-picker-input-inner-shadow);
3655
3773
  display:inline-flex;
3656
- margin:var(--border-1);
3657
- outline:var(--border-1) solid var(--border-input-border);
3658
- padding-inline:var(--space-2) var(--space-2);
3774
+ margin:var(--date-picker-margin);
3775
+ outline:var(--date-picker-border);
3776
+ padding-inline:var(--date-picker-padding-inline);
3659
3777
  position:relative;
3660
3778
  width:100%;
3661
3779
  }
3662
- .bp_date_picker_module_datePicker--5d704 .bp_date_picker_module_group--5d704 .bp_date_picker_module_groupContainer--5d704:focus-within{
3663
- outline:var(--border-2) solid var(--outline-focus-on-light);
3780
+ .bp_date_picker_module_datePicker--89682 .bp_date_picker_module_group--89682 .bp_date_picker_module_groupContainer--89682:focus-within{
3781
+ outline:var(--date-picker-focus-outline);
3664
3782
  }
3665
- .bp_date_picker_module_datePicker--5d704 .bp_date_picker_module_group--5d704 .bp_date_picker_module_groupContainer--5d704.bp_date_picker_module_error--5d704:not(:focus-within){
3666
- outline:var(--border-2) solid var(--text-text-error-on-light);
3783
+ .bp_date_picker_module_datePicker--89682 .bp_date_picker_module_group--89682 .bp_date_picker_module_groupContainer--89682.bp_date_picker_module_error--89682:not(:focus-within){
3784
+ outline:var(--date-picker-error-outline);
3667
3785
  }
3668
- .bp_date_picker_module_datePicker--5d704 .bp_date_picker_module_group--5d704 .bp_date_picker_module_groupContainer--5d704.bp_date_picker_module_error--5d704:focus-within{
3669
- outline:var(--border-2) solid var(--outline-focus-on-light);
3786
+ .bp_date_picker_module_datePicker--89682 .bp_date_picker_module_group--89682 .bp_date_picker_module_groupContainer--89682.bp_date_picker_module_error--89682:focus-within{
3787
+ outline:var(--date-picker-focus-outline);
3670
3788
  }
3671
- .bp_date_picker_module_datePicker--5d704 .bp_date_picker_module_group--5d704 .bp_date_picker_module_groupContainer--5d704 .bp_date_picker_module_groupContainerInput--5d704{
3789
+ .bp_date_picker_module_datePicker--89682 .bp_date_picker_module_group--89682 .bp_date_picker_module_groupContainer--89682 .bp_date_picker_module_groupContainerInput--89682{
3672
3790
  align-items:center;
3673
3791
  display:inline-flex;
3674
- height:var(--size-10);
3792
+ height:var(--date-picker-height);
3675
3793
  text-transform:uppercase;
3676
3794
  white-space:nowrap;
3677
3795
  }
3678
- .bp_date_picker_module_datePicker--5d704 .bp_date_picker_module_group--5d704 .bp_date_picker_module_groupContainer--5d704 .bp_date_picker_module_groupContainerInput--5d704 .bp_date_picker_module_groupContainerInputSegment--5d704{
3796
+ .bp_date_picker_module_datePicker--89682 .bp_date_picker_module_group--89682 .bp_date_picker_module_groupContainer--89682 .bp_date_picker_module_groupContainerInput--89682 .bp_date_picker_module_groupContainerInputSegment--89682{
3679
3797
  border:unset;
3680
3798
  border-radius:unset;
3681
3799
  box-shadow:unset;
3682
- color:var(--text-text-on-light);
3800
+ color:var(--date-picker-input-text-color);
3683
3801
  height:-moz-fit-content;
3684
3802
  height:fit-content;
3685
3803
  padding:unset;
3686
3804
  transition:unset;
3687
3805
  width:unset;
3688
3806
  }
3689
- .bp_date_picker_module_datePicker--5d704 .bp_date_picker_module_group--5d704 .bp_date_picker_module_groupContainer--5d704 .bp_date_picker_module_groupContainerInput--5d704 .bp_date_picker_module_groupContainerInputSegment--5d704[data-placeholder]{
3690
- color:var(--text-text-on-light-secondary);
3807
+ .bp_date_picker_module_datePicker--89682 .bp_date_picker_module_group--89682 .bp_date_picker_module_groupContainer--89682 .bp_date_picker_module_groupContainerInput--89682 .bp_date_picker_module_groupContainerInputSegment--89682[data-placeholder]{
3808
+ color:var(--date-picker-input-placeholder-color);
3691
3809
  }
3692
- .bp_date_picker_module_datePicker--5d704 .bp_date_picker_module_group--5d704 .bp_date_picker_module_groupContainer--5d704 .bp_date_picker_module_groupContainerInput--5d704 .bp_date_picker_module_groupContainerInputSegment--5d704:focus{
3693
- background:var(--light-blue-20);
3810
+ .bp_date_picker_module_datePicker--89682 .bp_date_picker_module_group--89682 .bp_date_picker_module_groupContainer--89682 .bp_date_picker_module_groupContainerInput--89682 .bp_date_picker_module_groupContainerInputSegment--89682:focus{
3811
+ background:var(--date-picker-input-segment-focused-background);
3694
3812
  caret-color:#0000;
3695
3813
  outline:none;
3696
3814
  }
3697
- .bp_date_picker_module_datePicker--5d704 .bp_date_picker_module_group--5d704 .bp_date_picker_module_groupContainer--5d704 .bp_date_picker_module_groupContainerInput--5d704 .bp_date_picker_module_groupContainerInputSegment--5d704:focus[data-placeholder]{
3698
- color:var(--text-text-on-light);
3815
+ .bp_date_picker_module_datePicker--89682 .bp_date_picker_module_group--89682 .bp_date_picker_module_groupContainer--89682 .bp_date_picker_module_groupContainerInput--89682 .bp_date_picker_module_groupContainerInputSegment--89682:focus[data-placeholder]{
3816
+ color:var(--date-picker-input-placeholder-focused-color);
3699
3817
  }
3700
- .bp_date_picker_module_datePicker--5d704 .bp_date_picker_module_group--5d704 .bp_date_picker_module_button--5d704{
3818
+ .bp_date_picker_module_datePicker--89682 .bp_date_picker_module_group--89682 .bp_date_picker_module_button--89682{
3701
3819
  align-items:center;
3702
3820
  background-color:initial;
3703
3821
  border:none;
3704
- border-radius:var(--radius-2);
3822
+ border-radius:var(--date-picker-icon-button-border-radius);
3705
3823
  cursor:pointer;
3706
3824
  display:flex;
3707
- height:var(--size-6);
3825
+ height:var(--date-picker-icon-button-size);
3708
3826
  justify-content:center;
3709
3827
  outline:none;
3710
3828
  padding:0;
3711
3829
  position:absolute;
3712
- right:var(--space-2);
3713
- width:var(--size-6);
3830
+ right:var(--date-picker-padding-inline);
3831
+ width:var(--date-picker-icon-button-size);
3714
3832
  }
3715
- .bp_date_picker_module_datePicker--5d704 .bp_date_picker_module_group--5d704 .bp_date_picker_module_button--5d704.bp_date_picker_module_clear--5d704{
3716
- right:var(--size-9);
3833
+ .bp_date_picker_module_datePicker--89682 .bp_date_picker_module_group--89682 .bp_date_picker_module_button--89682.bp_date_picker_module_clear--89682{
3834
+ right:var(--date-picker-clear-button-right);
3717
3835
  }
3718
- .bp_date_picker_module_datePicker--5d704 .bp_date_picker_module_group--5d704 .bp_date_picker_module_button--5d704:focus-visible,.bp_date_picker_module_datePicker--5d704 .bp_date_picker_module_group--5d704 .bp_date_picker_module_button--5d704[data-focus-visible]{
3719
- background-color:var(--surface-cta-surface-icon-pressed);
3720
- outline:var(--border-2) solid var(--outline-focus-on-light);
3836
+ .bp_date_picker_module_datePicker--89682 .bp_date_picker_module_group--89682 .bp_date_picker_module_button--89682:focus-visible,.bp_date_picker_module_datePicker--89682 .bp_date_picker_module_group--89682 .bp_date_picker_module_button--89682[data-focus-visible]{
3837
+ background-color:var(--date-picker-icon-button-focus-background-color);
3838
+ outline:var(--date-picker-icon-button-focus-outline);
3721
3839
  }
3722
- .bp_date_picker_module_datePicker--5d704 .bp_date_picker_module_group--5d704 .bp_date_picker_module_button--5d704:hover{
3723
- background:var(--surface-cta-surface-icon-hover);
3840
+ .bp_date_picker_module_datePicker--89682 .bp_date_picker_module_group--89682 .bp_date_picker_module_button--89682:hover{
3841
+ background:var(--date-picker-icon-button-hover-background);
3724
3842
  }
3725
- .bp_date_picker_module_datePicker--5d704 .bp_date_picker_module_group--5d704 .bp_date_picker_module_button--5d704:hover *{
3726
- fill:var(--icon-cta-icon-hover);
3843
+ .bp_date_picker_module_datePicker--89682 .bp_date_picker_module_group--89682 .bp_date_picker_module_button--89682:hover *{
3844
+ fill:var(--date-picker-icon-button-hover-fill);
3727
3845
  }
3728
- .bp_date_picker_module_datePicker--5d704 .bp_date_picker_module_group--5d704 .bp_date_picker_module_button--5d704:active{
3729
- background:var(--surface-cta-surface-icon-pressed);
3846
+ .bp_date_picker_module_datePicker--89682 .bp_date_picker_module_group--89682 .bp_date_picker_module_button--89682:active{
3847
+ background:var(--date-picker-icon-button-active-background);
3730
3848
  }
3731
- .bp_date_picker_module_datePicker--5d704 .bp_date_picker_module_group--5d704 .bp_date_picker_module_button--5d704:active *{
3732
- fill:var(--icon-cta-icon-pressed);
3849
+ .bp_date_picker_module_datePicker--89682 .bp_date_picker_module_group--89682 .bp_date_picker_module_button--89682:active *{
3850
+ fill:var(--date-picker-icon-button-active-fill);
3733
3851
  }
3734
- .bp_date_picker_module_datePicker--5d704 .bp_date_picker_module_group--5d704 .bp_date_picker_module_button--5d704:disabled{
3852
+ .bp_date_picker_module_datePicker--89682 .bp_date_picker_module_group--89682 .bp_date_picker_module_button--89682:disabled{
3735
3853
  opacity:1;
3736
3854
  }
3737
- .bp_date_picker_module_datePicker--5d704 .bp_date_picker_module_inlineError--5d704{
3738
- margin-block-start:var(--space-2);
3855
+ .bp_date_picker_module_datePicker--89682 .bp_date_picker_module_inlineError--89682{
3856
+ margin-block-start:var(--date-picker-inline-error-margin);
3739
3857
  }
3740
3858
 
3741
- @keyframes bp_date_picker_module_slide--5d704{
3859
+ @keyframes bp_date_picker_module_slide--89682{
3742
3860
  from{
3743
3861
  opacity:0;
3744
3862
  transform:var(--popover-slide-translation);
@@ -3748,7 +3866,7 @@
3748
3866
  transform:translateY(0);
3749
3867
  }
3750
3868
  }
3751
- .bp_date_picker_module_datePickerPopoverContent--5d704{
3869
+ .bp_date_picker_module_datePickerPopoverContent--89682{
3752
3870
  z-index:380;
3753
3871
  }
3754
3872
 
package/dist/lib-esm/primitives/calendar/calendar.js CHANGED
@@ -5,6 +5,7 @@ import { isSameDay, today, getLocalTimeZone } from '@internationalized/date';
5
5
  import { clsx } from 'clsx';
6
6
  import { forwardRef, useRef, useEffect } from 'react';
7
7
  import { Calendar as Calendar$1, Button, Heading, CalendarGrid, CalendarGridHeader, CalendarHeaderCell, CalendarGridBody, CalendarCell } from 'react-aria-components';
8
+ import { useBlueprintModernization } from '../../blueprint-modernization-context/useBlueprintModernization.js';
8
9
  import styles from './calendar.module.js';
9
10
 
10
11
  // Dispatch duplicated event with bubbling enabled, so Radix popover knows that this click happened.
@@ -61,11 +62,15 @@ const Calendar = /*#__PURE__*/forwardRef((props, forwardedRef) => {
61
62
  nextMonthAriaLabel,
62
63
  ...rest
63
64
  } = props;
65
+ const {
66
+ enableModernizedComponents
67
+ } = useBlueprintModernization();
64
68
  return jsxs(Calendar$1, {
65
69
  ...rest,
66
70
  ref: forwardedRef,
67
71
  "aria-label": calendarAriaLabel,
68
72
  className: clsx(styles.calendar, className),
73
+ "data-modern": enableModernizedComponents,
69
74
  children: [jsxs("header", {
70
75
  className: styles.calendarHeader,
71
76
  children: [jsx(Button, {
package/dist/lib-esm/primitives/calendar/calendar.module.js CHANGED
@@ -1,4 +1,4 @@
1
1
  import '../../index.css';
2
- var styles = {"calendar":"bp_calendar_module_calendar--d053c","calendarGrid":"bp_calendar_module_calendarGrid--d053c","calendarHeaderCell":"bp_calendar_module_calendarHeaderCell--d053c","calendarHeader":"bp_calendar_module_calendarHeader--d053c","calendarHeaderHeading":"bp_calendar_module_calendarHeaderHeading--d053c","calendarHeaderButton":"bp_calendar_module_calendarHeaderButton--d053c","calendarCell":"bp_calendar_module_calendarCell--d053c","today":"bp_calendar_module_today--d053c"};
2
+ var styles = {"calendar":"bp_calendar_module_calendar--085e4","calendarGrid":"bp_calendar_module_calendarGrid--085e4","calendarHeaderCell":"bp_calendar_module_calendarHeaderCell--085e4","calendarHeader":"bp_calendar_module_calendarHeader--085e4","calendarHeaderHeading":"bp_calendar_module_calendarHeaderHeading--085e4","calendarHeaderButton":"bp_calendar_module_calendarHeaderButton--085e4","calendarCell":"bp_calendar_module_calendarCell--085e4","today":"bp_calendar_module_today--085e4"};
3
3
 
4
4
  export { styles as default };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@box/blueprint-web",
3
- "version": "12.26.0",
3
+ "version": "12.27.0",
4
4
  "type": "module",
5
5
  "license": "SEE LICENSE IN LICENSE",
6
6
  "publishConfig": {