@box/blueprint-web 12.26.0 → 12.28.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 (8) hide show
  1. package/dist/lib-esm/collapsible/collapsible-section.js +5 -0
  2. package/dist/lib-esm/collapsible/collapsible-section.module.js +1 -1
  3. package/dist/lib-esm/date-picker/date-picker.js +5 -0
  4. package/dist/lib-esm/date-picker/date-picker.module.js +1 -1
  5. package/dist/lib-esm/index.css +288 -144
  6. package/dist/lib-esm/primitives/calendar/calendar.js +5 -0
  7. package/dist/lib-esm/primitives/calendar/calendar.module.js +1 -1
  8. package/package.json +1 -1
package/dist/lib-esm/collapsible/collapsible-section.js CHANGED
@@ -7,6 +7,7 @@ import { IconButton } from '../primitives/icon-button/icon-button.js';
7
7
  import { Slot } from '../primitives/slot.js';
8
8
  import { useNamedSlots } from '../utils/useNamedSlots.hook.js';
9
9
  import styles from './collapsible-section.module.js';
10
+ import { useBlueprintModernization } from '../blueprint-modernization-context/useBlueprintModernization.js';
10
11
 
11
12
  const CollapsibleSectionImpl = /*#__PURE__*/forwardRef((props, forwardedRef) => {
12
13
  const {
@@ -18,6 +19,9 @@ const CollapsibleSectionImpl = /*#__PURE__*/forwardRef((props, forwardedRef) =>
18
19
  children,
19
20
  ...rest
20
21
  } = props;
22
+ const {
23
+ enableModernizedComponents
24
+ } = useBlueprintModernization();
21
25
  const [collapsibleSectionOpen, setCollapsibleSectionOpen] = useState(open);
22
26
  const [headerSlot, contentSlot] = useNamedSlots(children, ['header', 'content']);
23
27
  useEffect(() => {
@@ -31,6 +35,7 @@ const CollapsibleSectionImpl = /*#__PURE__*/forwardRef((props, forwardedRef) =>
31
35
  ...rest,
32
36
  ref: forwardedRef,
33
37
  className: clsx(styles.collapsibleSection, className),
38
+ "data-modern": enableModernizedComponents,
34
39
  onOpenChange: onCollapsibleOpenChanged,
35
40
  open: collapsibleSectionOpen,
36
41
  children: [jsx(Collapsible.Trigger, {
package/dist/lib-esm/collapsible/collapsible-section.module.js CHANGED
@@ -1,4 +1,4 @@
1
1
  import '../index.css';
2
- var styles = {"collapsibleSection":"bp_collapsible_section_module_collapsibleSection--cc646","collapsibleSectionHeader":"bp_collapsible_section_module_collapsibleSectionHeader--cc646","collapsibleSectionHeaderArrow":"bp_collapsible_section_module_collapsibleSectionHeaderArrow--cc646","collapsibleSectionContent":"bp_collapsible_section_module_collapsibleSectionContent--cc646","slideDown":"bp_collapsible_section_module_slideDown--cc646","slideUp":"bp_collapsible_section_module_slideUp--cc646","collapsibleSectionBody":"bp_collapsible_section_module_collapsibleSectionBody--cc646"};
2
+ var styles = {"collapsibleSection":"bp_collapsible_section_module_collapsibleSection--e6aba","collapsibleSectionHeader":"bp_collapsible_section_module_collapsibleSectionHeader--e6aba","collapsibleSectionHeaderArrow":"bp_collapsible_section_module_collapsibleSectionHeaderArrow--e6aba","collapsibleSectionContent":"bp_collapsible_section_module_collapsibleSectionContent--e6aba","slideDown":"bp_collapsible_section_module_slideDown--e6aba","slideUp":"bp_collapsible_section_module_slideUp--e6aba","collapsibleSectionBody":"bp_collapsible_section_module_collapsibleSectionBody--e6aba"};
3
3
 
4
4
  export { styles as default };
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
@@ -1723,70 +1723,96 @@
1723
1723
  height:var(--icon-button-size-x-small);
1724
1724
  width:var(--icon-button-size-x-small);
1725
1725
  }
1726
- .bp_collapsible_section_module_collapsibleSection--cc646{
1726
+ .bp_collapsible_section_module_collapsibleSection--e6aba[data-modern=false]{
1727
+ --collapsible-section-padding:var(--space-5);
1728
+ --collapsible-section-border-radius:var(--radius-3);
1729
+ --collapsible-section-outline-border-radius:var(--radius-2);
1730
+ --collapsible-section-background-color:var(--surface-surface);
1731
+ --collapsible-section-border:var(--border-1) solid var(--border-collapsible-border);
1732
+ --collapsible-section-outline-width:var(--border-2);
1733
+ --collapsible-section-outline-offset:var(--space-05);
1734
+ --collapsible-section-header-focus-color:var(--outline-focus-on-light);
1735
+ --collapsible-section-header-background-color:var(--surface-surface);
1736
+ --collapsible-section-content-background-color:var(--surface-surface);
1737
+ }
1738
+
1739
+ .bp_collapsible_section_module_collapsibleSection--e6aba[data-modern=true]{
1740
+ --collapsible-section-padding:var(--bp-space-050);
1741
+ --collapsible-section-border-radius:var(--bp-radius-10);
1742
+ --collapsible-section-outline-border-radius:var(--bp-radius-03);
1743
+ --collapsible-section-background-color:var(--bp-surface-surface);
1744
+ --collapsible-section-border:var(--bp-border-01) solid var(--bp-border-collapsible-border);
1745
+ --collapsible-section-outline-width:var(--bp-border-02);
1746
+ --collapsible-section-outline-offset:var(--bp-space-005);
1747
+ --collapsible-section-header-focus-color:var(--bp-outline-focus-on-light);
1748
+ --collapsible-section-header-background-color:var(--bp-surface-surface);
1749
+ --collapsible-section-content-background-color:var(--bp-surface-surface);
1750
+ }
1751
+
1752
+ .bp_collapsible_section_module_collapsibleSection--e6aba{
1727
1753
  width:100%;
1728
1754
  }
1729
- .bp_collapsible_section_module_collapsibleSectionHeader--cc646{
1755
+ .bp_collapsible_section_module_collapsibleSectionHeader--e6aba{
1730
1756
  align-items:center;
1731
- background:var(--surface-surface);
1732
- border:var(--border-1) solid var(--border-collapsible-border);
1733
- border-radius:var(--radius-3);
1757
+ background:var(--collapsible-section-header-background-color);
1758
+ border:var(--collapsible-section-border);
1759
+ border-radius:var(--collapsible-section-border-radius);
1734
1760
  box-sizing:border-box;
1735
1761
  cursor:pointer;
1736
1762
  display:flex;
1737
1763
  justify-content:space-between;
1738
1764
  outline:0;
1739
- padding-block:var(--space-5);
1740
- padding-inline:var(--space-5);
1765
+ padding-block:var(--collapsible-section-padding);
1766
+ padding-inline:var(--collapsible-section-padding);
1741
1767
  position:relative;
1742
1768
  -webkit-user-select:none;
1743
1769
  user-select:none;
1744
1770
  width:100%;
1745
1771
  }
1746
- .bp_collapsible_section_module_collapsibleSectionHeader--cc646:focus::before{
1747
- border:var(--border-2) solid var(--outline-focus-on-light);
1748
- border-radius:var(--radius-2);
1749
- bottom:var(--space-05);
1772
+ .bp_collapsible_section_module_collapsibleSectionHeader--e6aba:focus::before{
1773
+ border:var(--collapsible-section-outline-width) solid var(--collapsible-section-header-focus-color);
1774
+ border-radius:var(--collapsible-section-outline-border-radius);
1775
+ bottom:var(--collapsible-section-outline-offset);
1750
1776
  content:"";
1751
- left:var(--space-05);
1777
+ left:var(--collapsible-section-outline-offset);
1752
1778
  position:absolute;
1753
- right:var(--space-05);
1754
- top:var(--space-05);
1779
+ right:var(--collapsible-section-outline-offset);
1780
+ top:var(--collapsible-section-outline-offset);
1755
1781
  }
1756
- .bp_collapsible_section_module_collapsibleSectionHeader--cc646[aria-expanded=true],.bp_collapsible_section_module_collapsibleSectionHeader--cc646[aria-expanded=true]::before{
1782
+ .bp_collapsible_section_module_collapsibleSectionHeader--e6aba[aria-expanded=true],.bp_collapsible_section_module_collapsibleSectionHeader--e6aba[aria-expanded=true]::before{
1757
1783
  border-end-end-radius:0;
1758
1784
  border-end-start-radius:0;
1759
1785
  }
1760
- .bp_collapsible_section_module_collapsibleSectionHeaderArrow--cc646{
1786
+ .bp_collapsible_section_module_collapsibleSectionHeaderArrow--e6aba{
1761
1787
  display:block;
1762
- margin-inline-start:var(--space-5);
1788
+ margin-inline-start:var(--collapsible-section-padding);
1763
1789
  }
1764
- .bp_collapsible_section_module_collapsibleSectionHeaderArrow--cc646 > svg{
1790
+ .bp_collapsible_section_module_collapsibleSectionHeaderArrow--e6aba > svg{
1765
1791
  vertical-align:middle;
1766
1792
  }
1767
- .bp_collapsible_section_module_collapsibleSectionContent--cc646{
1793
+ .bp_collapsible_section_module_collapsibleSectionContent--e6aba{
1768
1794
  overflow:hidden;
1769
1795
  }
1770
- .bp_collapsible_section_module_collapsibleSectionContent--cc646[data-state=open]{
1771
- animation:bp_collapsible_section_module_slideDown--cc646 .25s ease-out;
1796
+ .bp_collapsible_section_module_collapsibleSectionContent--e6aba[data-state=open]{
1797
+ animation:bp_collapsible_section_module_slideDown--e6aba .25s ease-out;
1772
1798
  }
1773
- .bp_collapsible_section_module_collapsibleSectionContent--cc646[data-state=closed]{
1774
- animation:bp_collapsible_section_module_slideUp--cc646 .25s ease-out;
1799
+ .bp_collapsible_section_module_collapsibleSectionContent--e6aba[data-state=closed]{
1800
+ animation:bp_collapsible_section_module_slideUp--e6aba .25s ease-out;
1775
1801
  }
1776
- .bp_collapsible_section_module_collapsibleSectionBody--cc646{
1802
+ .bp_collapsible_section_module_collapsibleSectionBody--e6aba{
1777
1803
  align-items:center;
1778
- background:var(--surface-surface);
1779
- border:var(--border-1) solid var(--border-collapsible-border);
1780
- border-end-end-radius:var(--radius-3);
1781
- border-end-start-radius:var(--radius-3);
1804
+ background:var(--collapsible-section-content-background-color);
1805
+ border:var(--collapsible-section-border);
1806
+ border-end-end-radius:var(--collapsible-section-border-radius);
1807
+ border-end-start-radius:var(--collapsible-section-border-radius);
1782
1808
  border-top:none;
1783
1809
  display:flex;
1784
1810
  justify-content:space-between;
1785
- padding-block:var(--space-5);
1786
- padding-inline:var(--space-5);
1811
+ padding-block:var(--collapsible-section-padding);
1812
+ padding-inline:var(--collapsible-section-padding);
1787
1813
  }
1788
1814
 
1789
- @keyframes bp_collapsible_section_module_slideDown--cc646{
1815
+ @keyframes bp_collapsible_section_module_slideDown--e6aba{
1790
1816
  from{
1791
1817
  height:0;
1792
1818
  }
@@ -1794,7 +1820,7 @@
1794
1820
  height:var(--radix-collapsible-content-height);
1795
1821
  }
1796
1822
  }
1797
- @keyframes bp_collapsible_section_module_slideUp--cc646{
1823
+ @keyframes bp_collapsible_section_module_slideUp--e6aba{
1798
1824
  from{
1799
1825
  height:var(--radix-collapsible-content-height);
1800
1826
  }
@@ -3455,33 +3481,99 @@
3455
3481
  z-index:-1;
3456
3482
  }
3457
3483
 
3458
- .bp_calendar_module_calendar--d053c{
3459
- background:var(--gray-white);
3460
- border-radius:var(--radius-2);
3461
- box-shadow:var(--dropshadow-3);
3484
+ .bp_calendar_module_calendar--085e4[data-modern=false]{
3485
+ --calendar-background:var(--gray-white);
3486
+ --calendar-padding-inline:var(--space-4);
3487
+ --calendar-padding-block:var(--space-4);
3488
+ --calendar-border-radius:var(--radius-2);
3489
+ --calendar-box-shadow:var(--dropshadow-3);
3490
+ --calendar-cell-selected-background:var(--box-blue-100);
3491
+ --calendar-cell-hovered-background:var(--gray-05);
3492
+ --calendar-cell-selected-hovered-background:var(--dark-blue-100);
3493
+ --calendar-cell-selected-focused-background:var(--dark-blue-100);
3494
+ --calendar-cell-outside-range-text-color:var(--gray-10);
3495
+ --calendar-cell-selected-text-color:var(--gray-white);
3496
+ --calendar-cell-border-radius:var(--radius-2);
3497
+ --calendar-cell-text-color:var(--gray-90);
3498
+ --calendar-cell-today-text-color:var(--box-blue-100);
3499
+ --calendar-cell-today-disabled-opacity:.6;
3500
+ --calendar-cell-today-dot-diameter:var(--space-1);
3501
+ --calendar-cell-today-dot-background:var(--box-blue-100);
3502
+ --calendar-cell-today-dot-bottom:var(--space-1);
3503
+ --calendar-cell-size:var(--size-8);
3504
+ --calendar-cell-focus-box-shadow:0 0 0 var(--size-05) var(--box-blue-100);
3505
+ --calendar-header-text-color:var(--gray-90);
3506
+ --calendar-header-button-background:var(--gray-white);
3507
+ --calendar-header-button-hover-background:var(--gray-05);
3508
+ --calendar-header-button-size:var(--size-8);
3509
+ --calendar-header-button-outline-width:var(--size-05);
3510
+ --calendar-header-button-focus-box-shadow:0 0 0 var(--size-05) var(--box-blue-100);
3511
+ --calendar-header-margin-bottom:var(--space-2);
3512
+ --calendar-header-cell-text-color:var(--text-text-on-light-secondary);
3513
+ --calendar-disabled-text-color:var(--gray-30);
3514
+ --calendar-focus-outline:var(--border-1) solid #fff;
3515
+ }
3516
+
3517
+ .bp_calendar_module_calendar--085e4[data-modern=true]{
3518
+ --calendar-background:var(--bp-gray-white);
3519
+ --calendar-padding-inline:var(--bp-space-040);
3520
+ --calendar-padding-block:var(--bp-space-040);
3521
+ --calendar-border-radius:var(--bp-radius-10);
3522
+ --calendar-box-shadow:var(--dropshadow-2);
3523
+ --calendar-cell-selected-background:var(--bp-box-blue-100);
3524
+ --calendar-cell-hovered-background:var(--bp-gray-05);
3525
+ --calendar-cell-selected-hovered-background:var(--bp-dark-blue-100);
3526
+ --calendar-cell-selected-focused-background:var(--bp-dark-blue-100);
3527
+ --calendar-cell-outside-range-text-color:var(--bp-gray-10);
3528
+ --calendar-cell-selected-text-color:var(--bp-gray-white);
3529
+ --calendar-cell-border-radius:var(--bp-radius-02);
3530
+ --calendar-cell-text-color:var(--bp-gray-90);
3531
+ --calendar-cell-today-text-color:var(--bp-box-blue-100);
3532
+ --calendar-cell-today-disabled-opacity:.6;
3533
+ --calendar-cell-today-dot-diameter:var(--bp-space-010);
3534
+ --calendar-cell-today-dot-background:var(--bp-box-blue-100);
3535
+ --calendar-cell-today-dot-bottom:var(--bp-space-010);
3536
+ --calendar-cell-size:var(--bp-size-080);
3537
+ --calendar-cell-focus-box-shadow:0 0 0 var(--bp-size-005) var(--bp-box-blue-100);
3538
+ --calendar-header-text-color:var(--bp-text-text-on-light);
3539
+ --calendar-header-button-background:var(--bp-gray-white);
3540
+ --calendar-header-button-hover-background:var(--bp-gray-05);
3541
+ --calendar-header-button-size:var(--bp-size-060);
3542
+ --calendar-header-button-outline-width:var(--bp-size-005);
3543
+ --calendar-header-button-focus-box-shadow:0 0 0 var(--bp-size-005) var(--bp-box-blue-100);
3544
+ --calendar-header-margin-bottom:var(--bp-space-020);
3545
+ --calendar-header-cell-text-color:var(--bp-text-text-on-light-secondary);
3546
+ --calendar-disabled-text-color:var(--bp-gray-30);
3547
+ --calendar-focus-outline:var(--bp-border-01) solid #fff;
3548
+ }
3549
+
3550
+ .bp_calendar_module_calendar--085e4{
3551
+ background:var(--calendar-background);
3552
+ border-radius:var(--calendar-border-radius);
3553
+ box-shadow:var(--calendar-box-shadow);
3462
3554
  font-family:var(--body-default-font-family);
3463
3555
  font-size:var(--body-default-font-size);
3464
3556
  font-weight:var(--body-default-font-weight);
3465
3557
  letter-spacing:var(--body-default-letter-spacing);
3466
3558
  line-height:var(--body-default-line-height);
3467
3559
  max-width:100%;
3468
- padding-block:var(--space-4);
3469
- padding-inline:var(--space-4);
3560
+ padding-block:var(--calendar-padding-block);
3561
+ padding-inline:var(--calendar-padding-inline);
3470
3562
  -webkit-text-decoration:var(--body-default-text-decoration);
3471
3563
  text-decoration:var(--body-default-text-decoration);
3472
3564
  text-transform:var(--body-default-text-case);
3473
3565
  width:-moz-fit-content;
3474
3566
  width:fit-content;
3475
3567
  }
3476
- .bp_calendar_module_calendar--d053c .bp_calendar_module_calendarGrid--d053c{
3568
+ .bp_calendar_module_calendar--085e4 .bp_calendar_module_calendarGrid--085e4{
3477
3569
  border-collapse:revert;
3478
3570
  border-spacing:revert;
3479
3571
  }
3480
- .bp_calendar_module_calendar--d053c .bp_calendar_module_calendarGrid--d053c td{
3572
+ .bp_calendar_module_calendar--085e4 .bp_calendar_module_calendarGrid--085e4 td{
3481
3573
  padding:1px;
3482
3574
  }
3483
- .bp_calendar_module_calendar--d053c .bp_calendar_module_calendarHeaderCell--d053c{
3484
- color:var(--text-text-on-light-secondary);
3575
+ .bp_calendar_module_calendar--085e4 .bp_calendar_module_calendarHeaderCell--085e4{
3576
+ color:var(--calendar-header-cell-text-color);
3485
3577
  font-family:var(--body-default-font-family);
3486
3578
  font-size:var(--body-default-font-size);
3487
3579
  font-weight:var(--body-default-font-weight);
@@ -3492,13 +3584,13 @@
3492
3584
  text-decoration:var(--body-default-text-decoration);
3493
3585
  text-transform:var(--body-default-text-case);
3494
3586
  }
3495
- .bp_calendar_module_calendar--d053c .bp_calendar_module_calendarHeader--d053c{
3587
+ .bp_calendar_module_calendar--085e4 .bp_calendar_module_calendarHeader--085e4{
3496
3588
  align-items:center;
3497
- color:var(--gray-90);
3589
+ color:var(--calendar-header-text-color);
3498
3590
  display:flex;
3499
- margin-block-end:var(--space-2);
3591
+ margin-block-end:var(--calendar-header-margin-bottom);
3500
3592
  }
3501
- .bp_calendar_module_calendar--d053c .bp_calendar_module_calendarHeader--d053c .bp_calendar_module_calendarHeaderHeading--d053c{
3593
+ .bp_calendar_module_calendar--085e4 .bp_calendar_module_calendarHeader--085e4 .bp_calendar_module_calendarHeaderHeading--085e4{
3502
3594
  flex:1;
3503
3595
  font-family:var(--body-large-bold-font-family);
3504
3596
  font-size:var(--body-large-bold-font-size);
@@ -3512,114 +3604,166 @@
3512
3604
  text-transform:capitalize;
3513
3605
  text-transform:var(--body-large-bold-text-case);
3514
3606
  }
3515
- .bp_calendar_module_calendar--d053c .bp_calendar_module_calendarHeader--d053c .bp_calendar_module_calendarHeaderButton--d053c{
3607
+ .bp_calendar_module_calendar--085e4 .bp_calendar_module_calendarHeader--085e4 .bp_calendar_module_calendarHeaderButton--085e4{
3516
3608
  align-items:center;
3517
- background-color:var(--gray-white);
3609
+ background-color:var(--calendar-header-button-background);
3518
3610
  border:none;
3519
- border-radius:var(--radius-2);
3611
+ border-radius:var(--calendar-cell-border-radius);
3520
3612
  cursor:pointer;
3521
3613
  display:flex;
3522
- height:var(--size-8);
3614
+ height:var(--calendar-header-button-size);
3523
3615
  justify-content:center;
3524
3616
  margin:0;
3525
3617
  outline:none;
3526
3618
  padding:0;
3527
- width:var(--size-8);
3619
+ width:var(--calendar-header-button-size);
3528
3620
  }
3529
- .bp_calendar_module_calendar--d053c .bp_calendar_module_calendarHeader--d053c .bp_calendar_module_calendarHeaderButton--d053c:disabled{
3621
+ .bp_calendar_module_calendar--085e4 .bp_calendar_module_calendarHeader--085e4 .bp_calendar_module_calendarHeaderButton--085e4:disabled{
3530
3622
  cursor:default;
3531
3623
  opacity:60%;
3532
3624
  }
3533
- .bp_calendar_module_calendar--d053c .bp_calendar_module_calendarHeader--d053c .bp_calendar_module_calendarHeaderButton--d053c:disabled *{
3534
- fill:var(--gray-30);
3625
+ .bp_calendar_module_calendar--085e4 .bp_calendar_module_calendarHeader--085e4 .bp_calendar_module_calendarHeaderButton--085e4:disabled *{
3626
+ fill:var(--calendar-disabled-text-color);
3535
3627
  }
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);
3628
+ .bp_calendar_module_calendar--085e4 .bp_calendar_module_calendarHeader--085e4 .bp_calendar_module_calendarHeaderButton--085e4:hover:not(:disabled){
3629
+ background-color:var(--calendar-header-button-hover-background);
3538
3630
  }
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);
3631
+ .bp_calendar_module_calendar--085e4 .bp_calendar_module_calendarHeader--085e4 .bp_calendar_module_calendarHeaderButton--085e4[data-focus-visible]{
3632
+ background-color:var(--calendar-header-button-hover-background);
3633
+ box-shadow:var(--calendar-header-button-focus-box-shadow);
3542
3634
  }
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);
3635
+ .bp_calendar_module_calendar--085e4 .bp_calendar_module_calendarCell--085e4{
3636
+ border-radius:var(--calendar-cell-border-radius);
3637
+ color:var(--calendar-cell-text-color);
3638
+ line-height:var(--calendar-cell-size);
3547
3639
  outline:none;
3548
3640
  text-align:center;
3549
- width:var(--size-8);
3641
+ width:var(--calendar-cell-size);
3550
3642
  }
3551
- .bp_calendar_module_calendar--d053c .bp_calendar_module_calendarCell--d053c.bp_calendar_module_today--d053c{
3552
- color:var(--box-blue-100);
3643
+ .bp_calendar_module_calendar--085e4 .bp_calendar_module_calendarCell--085e4.bp_calendar_module_today--085e4{
3644
+ color:var(--calendar-cell-today-text-color);
3553
3645
  font-family:var(--body-default-bold-font-family);
3554
3646
  font-size:var(--body-default-bold-font-size);
3555
3647
  font-weight:var(--body-default-bold-font-weight);
3556
3648
  letter-spacing:var(--body-default-bold-letter-spacing);
3557
3649
  line-height:var(--body-default-bold-line-height);
3558
- line-height:var(--size-8);
3650
+ line-height:var(--calendar-cell-size);
3559
3651
  position:relative;
3560
3652
  -webkit-text-decoration:var(--body-default-bold-text-decoration);
3561
3653
  text-decoration:var(--body-default-bold-text-decoration);
3562
3654
  text-transform:var(--body-default-bold-text-case);
3563
3655
  }
3564
- .bp_calendar_module_calendar--d053c .bp_calendar_module_calendarCell--d053c.bp_calendar_module_today--d053c[data-disabled]{
3656
+ .bp_calendar_module_calendar--085e4 .bp_calendar_module_calendarCell--085e4.bp_calendar_module_today--085e4[data-disabled]{
3565
3657
  cursor:default;
3566
- opacity:.6;
3658
+ opacity:var(--calendar-cell-today-disabled-opacity);
3567
3659
  }
3568
- .bp_calendar_module_calendar--d053c .bp_calendar_module_calendarCell--d053c.bp_calendar_module_today--d053c::after{
3569
- background-color:var(--box-blue-100);
3660
+ .bp_calendar_module_calendar--085e4 .bp_calendar_module_calendarCell--085e4.bp_calendar_module_today--085e4::after{
3661
+ background-color:var(--calendar-cell-today-dot-background);
3570
3662
  border-radius:50%;
3571
- bottom:var(--space-1);
3663
+ bottom:var(--calendar-cell-today-dot-bottom);
3572
3664
  content:"";
3573
- height:var(--space-1);
3665
+ height:var(--calendar-cell-today-dot-diameter);
3574
3666
  left:50%;
3575
3667
  position:absolute;
3576
3668
  transform:translateX(-50%);
3577
- width:var(--space-1);
3669
+ width:var(--calendar-cell-today-dot-diameter);
3578
3670
  }
3579
- .bp_calendar_module_calendar--d053c .bp_calendar_module_calendarCell--d053c:not([data-outside-month]){
3671
+ .bp_calendar_module_calendar--085e4 .bp_calendar_module_calendarCell--085e4:not([data-outside-month]){
3580
3672
  cursor:pointer;
3581
3673
  }
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);
3674
+ .bp_calendar_module_calendar--085e4 .bp_calendar_module_calendarCell--085e4:not([data-outside-month]):not([data-selected]):not([data-disabled]):hover{
3675
+ background-color:var(--calendar-cell-hovered-background);
3584
3676
  }
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);
3677
+ .bp_calendar_module_calendar--085e4 .bp_calendar_module_calendarCell--085e4[data-focus-visible]:not([data-outside-month]){
3678
+ box-shadow:var(--calendar-cell-focus-box-shadow);
3587
3679
  }
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);
3680
+ .bp_calendar_module_calendar--085e4 .bp_calendar_module_calendarCell--085e4[data-selected]{
3681
+ background-color:var(--calendar-cell-selected-background);
3682
+ color:var(--calendar-cell-selected-text-color);
3591
3683
  }
3592
- .bp_calendar_module_calendar--d053c .bp_calendar_module_calendarCell--d053c[data-selected]:hover{
3593
- background-color:var(--dark-blue-100);
3684
+ .bp_calendar_module_calendar--085e4 .bp_calendar_module_calendarCell--085e4[data-selected]:hover{
3685
+ background-color:var(--calendar-cell-selected-hovered-background);
3594
3686
  }
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;
3687
+ .bp_calendar_module_calendar--085e4 .bp_calendar_module_calendarCell--085e4[data-selected][data-focus-visible]{
3688
+ background-color:var(--calendar-cell-selected-focused-background);
3689
+ box-shadow:var(--calendar-cell-focus-box-shadow);
3690
+ outline:var(--calendar-focus-outline);
3599
3691
  outline-offset:-.0625rem;
3600
3692
  }
3601
- .bp_calendar_module_calendar--d053c .bp_calendar_module_calendarCell--d053c[data-selected]::after{
3602
- background-color:var(--gray-white);
3693
+ .bp_calendar_module_calendar--085e4 .bp_calendar_module_calendarCell--085e4[data-selected]::after{
3694
+ background-color:var(--calendar-cell-selected-text-color);
3603
3695
  }
3604
- .bp_calendar_module_calendar--d053c .bp_calendar_module_calendarCell--d053c[data-disabled]:not(.bp_calendar_module_today--d053c){
3605
- color:var(--gray-10);
3696
+ .bp_calendar_module_calendar--085e4 .bp_calendar_module_calendarCell--085e4[data-disabled]:not(.bp_calendar_module_today--085e4){
3697
+ color:var(--calendar-cell-outside-range-text-color);
3606
3698
  cursor:default;
3607
3699
  }
3608
- .bp_calendar_module_calendar--d053c .bp_calendar_module_calendarCell--d053c[data-unavailable]{
3609
- color:var(--gray-30);
3700
+ .bp_calendar_module_calendar--085e4 .bp_calendar_module_calendarCell--085e4[data-unavailable]{
3701
+ color:var(--calendar-disabled-text-color);
3610
3702
  text-decoration:line-through;
3611
3703
  }
3612
3704
 
3613
- .bp_date_picker_module_datePicker--5d704{
3705
+ .bp_date_picker_module_datePicker--89682[data-modern=false]{
3706
+ --date-picker-label-margin-bottom:var(--space-2);
3707
+ --date-picker-input-placeholder-color:var(--text-text-on-light-secondary);
3708
+ --date-picker-input-placeholder-focused-color:var(--text-text-on-light);
3709
+ --date-picker-input-text-color:var(--text-text-on-light);
3710
+ --date-picker-input-segment-focused-background:var(--light-blue-20);
3711
+ --date-picker-input-inner-shadow:var(--innershadow-1);
3712
+ --date-picker-height:var(--size-10);
3713
+ --date-picker-padding-inline:var(--space-2);
3714
+ --date-picker-border:var(--border-1) solid var(--border-input-border);
3715
+ --date-picker-margin:var(--border-1);
3716
+ --date-picker-focus-outline:var(--border-2) solid var(--outline-focus-on-light);
3717
+ --date-picker-error-outline:var(--border-2) solid var(--text-text-error-on-light);
3718
+ --date-picker-border-radius:var(--radius-2);
3719
+ --date-picker-icon-button-size:var(--size-6);
3720
+ --date-picker-inline-error-margin:var(--space-2);
3721
+ --date-picker-icon-button-border-radius:var(--radius-2);
3722
+ --date-picker-icon-button-focus-background-color:var(--surface-cta-surface-icon-pressed);
3723
+ --date-picker-icon-button-focus-outline:var(--border-2) solid var(--outline-focus-on-light);
3724
+ --date-picker-icon-button-active-background:var(--surface-cta-surface-icon-pressed);
3725
+ --date-picker-icon-button-active-fill:var(--icon-cta-icon-pressed);
3726
+ --date-picker-icon-button-hover-background:var(--surface-cta-surface-icon-hover);
3727
+ --date-picker-icon-button-hover-fill:var(--icon-cta-icon-hover);
3728
+ --date-picker-clear-button-right:var(--size-9);
3729
+ }
3730
+
3731
+ .bp_date_picker_module_datePicker--89682[data-modern=true]{
3732
+ --date-picker-label-margin-bottom:var(--bp-space-020);
3733
+ --date-picker-input-placeholder-color:var(--bp-text-text-on-light-secondary);
3734
+ --date-picker-input-placeholder-focused-color:var(--bp-text-text-on-light);
3735
+ --date-picker-input-text-color:var(--bp-text-text-on-light);
3736
+ --date-picker-input-segment-focused-background:var(--bp-light-blue-20);
3737
+ --date-picker-input-inner-shadow:var(--innershadow-1);
3738
+ --date-picker-height:var(--bp-size-100);
3739
+ --date-picker-padding-inline:var(--bp-space-020);
3740
+ --date-picker-border:var(--bp-border-01) solid var(--bp-border-input-border);
3741
+ --date-picker-margin:var(--border-1);
3742
+ --date-picker-focus-outline:var(--bp-border-02) solid var(--bp-outline-focus-on-light);
3743
+ --date-picker-error-outline:var(--bp-border-02) solid var(--bp-text-text-error-on-light);
3744
+ --date-picker-border-radius:var(--bp-radius-06);
3745
+ --date-picker-icon-button-size:var(--bp-size-060);
3746
+ --date-picker-inline-error-margin:var(--bp-space-020);
3747
+ --date-picker-icon-button-border-radius:var(--bp-radius-06);
3748
+ --date-picker-icon-button-focus-background-color:var(--bp-surface-cta-surface-icon-pressed);
3749
+ --date-picker-icon-button-focus-outline:var(--bp-border-02) solid var(--bp-outline-focus-on-light);
3750
+ --date-picker-icon-button-active-background:var(--bp-surface-cta-surface-icon-pressed);
3751
+ --date-picker-icon-button-active-fill:var(--bp-icon-cta-icon-pressed);
3752
+ --date-picker-icon-button-hover-background:var(--bp-surface-cta-surface-icon-hover);
3753
+ --date-picker-icon-button-hover-fill:var(--bp-icon-cta-icon-hover);
3754
+ --date-picker-clear-button-right:var(--bp-size-090);
3755
+ }
3756
+
3757
+ .bp_date_picker_module_datePicker--89682{
3614
3758
  width:100%;
3615
3759
  }
3616
- .bp_date_picker_module_datePicker--5d704.bp_date_picker_module_disabled--5d704{
3760
+ .bp_date_picker_module_datePicker--89682.bp_date_picker_module_disabled--89682{
3617
3761
  opacity:60%;
3618
3762
  pointer-events:none;
3619
3763
  -webkit-user-select:none;
3620
3764
  user-select:none;
3621
3765
  }
3622
- .bp_date_picker_module_datePicker--5d704 .bp_date_picker_module_label--5d704{
3766
+ .bp_date_picker_module_datePicker--89682 .bp_date_picker_module_label--89682{
3623
3767
  cursor:default;
3624
3768
  display:block;
3625
3769
  font-family:var(--body-default-bold-font-family);
@@ -3627,16 +3771,15 @@
3627
3771
  font-weight:var(--body-default-bold-font-weight);
3628
3772
  letter-spacing:var(--body-default-bold-letter-spacing);
3629
3773
  line-height:var(--body-default-bold-line-height);
3630
- margin-block-end:var(--space-2);
3774
+ margin-block-end:var(--date-picker-label-margin-bottom);
3631
3775
  -webkit-text-decoration:var(--body-default-bold-text-decoration);
3632
3776
  text-decoration:var(--body-default-bold-text-decoration);
3633
3777
  text-transform:var(--body-default-bold-text-case);
3634
3778
  width:-moz-fit-content;
3635
3779
  width:fit-content;
3636
3780
  }
3637
- .bp_date_picker_module_datePicker--5d704 .bp_date_picker_module_group--5d704{
3781
+ .bp_date_picker_module_datePicker--89682 .bp_date_picker_module_group--89682{
3638
3782
  align-items:center;
3639
- box-shadow:var(--innershadow-1);
3640
3783
  display:inline-flex;
3641
3784
  font-family:var(--body-default-font-family);
3642
3785
  font-size:var(--body-default-font-size);
@@ -3649,96 +3792,97 @@
3649
3792
  text-transform:var(--body-default-text-case);
3650
3793
  width:100%;
3651
3794
  }
3652
- .bp_date_picker_module_datePicker--5d704 .bp_date_picker_module_group--5d704 .bp_date_picker_module_groupContainer--5d704{
3795
+ .bp_date_picker_module_datePicker--89682 .bp_date_picker_module_group--89682 .bp_date_picker_module_groupContainer--89682{
3653
3796
  align-items:center;
3654
- border-radius:var(--radius-2);
3797
+ border-radius:var(--date-picker-border-radius);
3798
+ box-shadow:var(--date-picker-input-inner-shadow);
3655
3799
  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);
3800
+ margin:var(--date-picker-margin);
3801
+ outline:var(--date-picker-border);
3802
+ padding-inline:var(--date-picker-padding-inline);
3659
3803
  position:relative;
3660
3804
  width:100%;
3661
3805
  }
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);
3806
+ .bp_date_picker_module_datePicker--89682 .bp_date_picker_module_group--89682 .bp_date_picker_module_groupContainer--89682:focus-within{
3807
+ outline:var(--date-picker-focus-outline);
3664
3808
  }
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);
3809
+ .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){
3810
+ outline:var(--date-picker-error-outline);
3667
3811
  }
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);
3812
+ .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{
3813
+ outline:var(--date-picker-focus-outline);
3670
3814
  }
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{
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{
3672
3816
  align-items:center;
3673
3817
  display:inline-flex;
3674
- height:var(--size-10);
3818
+ height:var(--date-picker-height);
3675
3819
  text-transform:uppercase;
3676
3820
  white-space:nowrap;
3677
3821
  }
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{
3822
+ .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
3823
  border:unset;
3680
3824
  border-radius:unset;
3681
3825
  box-shadow:unset;
3682
- color:var(--text-text-on-light);
3826
+ color:var(--date-picker-input-text-color);
3683
3827
  height:-moz-fit-content;
3684
3828
  height:fit-content;
3685
3829
  padding:unset;
3686
3830
  transition:unset;
3687
3831
  width:unset;
3688
3832
  }
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);
3833
+ .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]{
3834
+ color:var(--date-picker-input-placeholder-color);
3691
3835
  }
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);
3836
+ .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{
3837
+ background:var(--date-picker-input-segment-focused-background);
3694
3838
  caret-color:#0000;
3695
3839
  outline:none;
3696
3840
  }
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);
3841
+ .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]{
3842
+ color:var(--date-picker-input-placeholder-focused-color);
3699
3843
  }
3700
- .bp_date_picker_module_datePicker--5d704 .bp_date_picker_module_group--5d704 .bp_date_picker_module_button--5d704{
3844
+ .bp_date_picker_module_datePicker--89682 .bp_date_picker_module_group--89682 .bp_date_picker_module_button--89682{
3701
3845
  align-items:center;
3702
3846
  background-color:initial;
3703
3847
  border:none;
3704
- border-radius:var(--radius-2);
3848
+ border-radius:var(--date-picker-icon-button-border-radius);
3705
3849
  cursor:pointer;
3706
3850
  display:flex;
3707
- height:var(--size-6);
3851
+ height:var(--date-picker-icon-button-size);
3708
3852
  justify-content:center;
3709
3853
  outline:none;
3710
3854
  padding:0;
3711
3855
  position:absolute;
3712
- right:var(--space-2);
3713
- width:var(--size-6);
3856
+ right:var(--date-picker-padding-inline);
3857
+ width:var(--date-picker-icon-button-size);
3714
3858
  }
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);
3859
+ .bp_date_picker_module_datePicker--89682 .bp_date_picker_module_group--89682 .bp_date_picker_module_button--89682.bp_date_picker_module_clear--89682{
3860
+ right:var(--date-picker-clear-button-right);
3717
3861
  }
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);
3862
+ .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]{
3863
+ background-color:var(--date-picker-icon-button-focus-background-color);
3864
+ outline:var(--date-picker-icon-button-focus-outline);
3721
3865
  }
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);
3866
+ .bp_date_picker_module_datePicker--89682 .bp_date_picker_module_group--89682 .bp_date_picker_module_button--89682:hover{
3867
+ background:var(--date-picker-icon-button-hover-background);
3724
3868
  }
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);
3869
+ .bp_date_picker_module_datePicker--89682 .bp_date_picker_module_group--89682 .bp_date_picker_module_button--89682:hover *{
3870
+ fill:var(--date-picker-icon-button-hover-fill);
3727
3871
  }
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);
3872
+ .bp_date_picker_module_datePicker--89682 .bp_date_picker_module_group--89682 .bp_date_picker_module_button--89682:active{
3873
+ background:var(--date-picker-icon-button-active-background);
3730
3874
  }
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);
3875
+ .bp_date_picker_module_datePicker--89682 .bp_date_picker_module_group--89682 .bp_date_picker_module_button--89682:active *{
3876
+ fill:var(--date-picker-icon-button-active-fill);
3733
3877
  }
3734
- .bp_date_picker_module_datePicker--5d704 .bp_date_picker_module_group--5d704 .bp_date_picker_module_button--5d704:disabled{
3878
+ .bp_date_picker_module_datePicker--89682 .bp_date_picker_module_group--89682 .bp_date_picker_module_button--89682:disabled{
3735
3879
  opacity:1;
3736
3880
  }
3737
- .bp_date_picker_module_datePicker--5d704 .bp_date_picker_module_inlineError--5d704{
3738
- margin-block-start:var(--space-2);
3881
+ .bp_date_picker_module_datePicker--89682 .bp_date_picker_module_inlineError--89682{
3882
+ margin-block-start:var(--date-picker-inline-error-margin);
3739
3883
  }
3740
3884
 
3741
- @keyframes bp_date_picker_module_slide--5d704{
3885
+ @keyframes bp_date_picker_module_slide--89682{
3742
3886
  from{
3743
3887
  opacity:0;
3744
3888
  transform:var(--popover-slide-translation);
@@ -3748,7 +3892,7 @@
3748
3892
  transform:translateY(0);
3749
3893
  }
3750
3894
  }
3751
- .bp_date_picker_module_datePickerPopoverContent--5d704{
3895
+ .bp_date_picker_module_datePickerPopoverContent--89682{
3752
3896
  z-index:380;
3753
3897
  }
3754
3898
 
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.28.0",
4
4
  "type": "module",
5
5
  "license": "SEE LICENSE IN LICENSE",
6
6
  "publishConfig": {