@box/blueprint-web 17.4.2 → 17.5.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 (5) hide show
  1. package/dist/lib-esm/components.css +113 -36
  2. package/dist/lib-esm/date-picker/date-picker.js +9 -0
  3. package/dist/lib-esm/date-picker/date-picker.module.js +1 -1
  4. package/dist/lib-esm/index.css +113 -36
  5. package/package.json +3 -3
package/dist/lib-esm/components.css CHANGED
@@ -7745,7 +7745,7 @@
7745
7745
  color:var(--calendar-disabled-text-color);
7746
7746
  text-decoration:line-through;
7747
7747
  }
7748
- .bp_date_picker_module_datePicker--01416[data-modern=false]{
7748
+ .bp_date_picker_module_datePicker--b164e[data-modern=false]{
7749
7749
  --date-picker-label-margin-bottom:var(--space-2);
7750
7750
  --date-picker-input-placeholder-color:var(--text-text-on-light-secondary);
7751
7751
  --date-picker-input-placeholder-focused-color:var(--text-text-on-light);
@@ -7755,6 +7755,7 @@
7755
7755
  --date-picker-height:var(--size-10);
7756
7756
  --date-picker-padding-inline:var(--space-2);
7757
7757
  --date-picker-border:var(--border-1) solid var(--border-input-border);
7758
+ --date-picker-hover-outline-color:var(--border-input-border-hover);
7758
7759
  --date-picker-margin:var(--border-1);
7759
7760
  --date-picker-focus-outline:var(--border-2) solid var(--outline-focus-on-light);
7760
7761
  --date-picker-error-outline:var(--border-2) solid var(--text-text-error-on-light);
@@ -7770,7 +7771,7 @@
7770
7771
  --date-picker-icon-button-hover-fill:var(--icon-cta-icon-hover);
7771
7772
  --date-picker-clear-button-right:var(--size-9);
7772
7773
  }
7773
- .bp_date_picker_module_datePicker--01416[data-modern=false] .bp_date_picker_module_label--01416{
7774
+ .bp_date_picker_module_datePicker--b164e[data-modern=false] .bp_date_picker_module_label--b164e{
7774
7775
  font-family:var(--body-default-bold-font-family);
7775
7776
  font-size:var(--body-default-bold-font-size);
7776
7777
  font-weight:var(--body-default-bold-font-weight);
@@ -7779,7 +7780,7 @@
7779
7780
  text-decoration:var(--body-default-bold-text-decoration);
7780
7781
  text-transform:var(--body-default-bold-text-case);
7781
7782
  }
7782
- .bp_date_picker_module_datePicker--01416[data-modern=false] .bp_date_picker_module_group--01416{
7783
+ .bp_date_picker_module_datePicker--b164e[data-modern=false] .bp_date_picker_module_group--b164e{
7783
7784
  font-family:var(--body-default-font-family);
7784
7785
  font-size:var(--body-default-font-size);
7785
7786
  font-weight:var(--body-default-font-weight);
@@ -7789,7 +7790,7 @@
7789
7790
  text-transform:var(--body-default-text-case);
7790
7791
  }
7791
7792
 
7792
- .bp_date_picker_module_datePicker--01416[data-modern=true]{
7793
+ .bp_date_picker_module_datePicker--b164e[data-modern=true]{
7793
7794
  --date-picker-label-margin-bottom:var(--bp-space-020);
7794
7795
  --date-picker-input-placeholder-color:var(--bp-text-text-on-light-secondary);
7795
7796
  --date-picker-input-placeholder-focused-color:var(--bp-text-text-on-light);
@@ -7799,6 +7800,7 @@
7799
7800
  --date-picker-height:var(--bp-size-100);
7800
7801
  --date-picker-padding-inline:var(--bp-space-020);
7801
7802
  --date-picker-border:var(--bp-border-01) solid var(--bp-border-input-border);
7803
+ --date-picker-hover-outline-color:var(--bp-border-date-picker-border-hover);
7802
7804
  --date-picker-margin:var(--border-1);
7803
7805
  --date-picker-focus-outline:var(--bp-border-02) solid var(--bp-outline-focus-on-light);
7804
7806
  --date-picker-error-outline:var(--bp-border-02) solid var(--bp-text-text-error-on-light);
@@ -7814,7 +7816,7 @@
7814
7816
  --date-picker-icon-button-hover-fill:var(--bp-icon-cta-icon-hover);
7815
7817
  --date-picker-clear-button-right:var(--bp-size-090);
7816
7818
  }
7817
- .bp_date_picker_module_datePicker--01416[data-modern=true] .bp_date_picker_module_label--01416{
7819
+ .bp_date_picker_module_datePicker--b164e[data-modern=true] .bp_date_picker_module_label--b164e{
7818
7820
  font-family:var(--bp-font-font-family), -apple-system, BlinkMacSystemFont, "San Francisco", "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
7819
7821
  font-size:var(--bp-font-size-05);
7820
7822
  font-style:normal;
@@ -7822,7 +7824,7 @@
7822
7824
  letter-spacing:var(--bp-font-letter-spacing-01);
7823
7825
  line-height:var(--bp-font-line-height-04);
7824
7826
  }
7825
- :where(body.is-inter-font) .bp_date_picker_module_datePicker--01416[data-modern=true] .bp_date_picker_module_label--01416{
7827
+ :where(body.is-inter-font) .bp_date_picker_module_datePicker--b164e[data-modern=true] .bp_date_picker_module_label--b164e{
7826
7828
  font-family:"Inter Variable", -apple-system, BlinkMacSystemFont, "San Francisco", "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
7827
7829
  font-size:.875rem;
7828
7830
  font-style:normal;
@@ -7833,7 +7835,7 @@
7833
7835
  text-transform:none;
7834
7836
  }
7835
7837
 
7836
- .bp_date_picker_module_datePicker--01416[data-modern=true] .bp_date_picker_module_group--01416{
7838
+ .bp_date_picker_module_datePicker--b164e[data-modern=true] .bp_date_picker_module_group--b164e{
7837
7839
  font-family:var(--bp-font-font-family), -apple-system, BlinkMacSystemFont, "San Francisco", "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
7838
7840
  font-size:var(--bp-font-size-05);
7839
7841
  font-style:normal;
@@ -7841,7 +7843,7 @@
7841
7843
  letter-spacing:var(--bp-font-letter-spacing-01);
7842
7844
  line-height:var(--bp-font-line-height-04);
7843
7845
  }
7844
- :where(body.is-inter-font) .bp_date_picker_module_datePicker--01416[data-modern=true] .bp_date_picker_module_group--01416{
7846
+ :where(body.is-inter-font) .bp_date_picker_module_datePicker--b164e[data-modern=true] .bp_date_picker_module_group--b164e{
7845
7847
  font-family:"Inter Variable", -apple-system, BlinkMacSystemFont, "San Francisco", "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
7846
7848
  font-size:.875rem;
7847
7849
  font-style:normal;
@@ -7852,28 +7854,28 @@
7852
7854
  text-transform:none;
7853
7855
  }
7854
7856
 
7855
- .bp_date_picker_module_datePicker--01416{
7857
+ .bp_date_picker_module_datePicker--b164e{
7856
7858
  width:100%;
7857
7859
  }
7858
- .bp_date_picker_module_datePicker--01416.bp_date_picker_module_disabled--01416{
7860
+ .bp_date_picker_module_datePicker--b164e.bp_date_picker_module_disabled--b164e{
7859
7861
  opacity:var(--disabled-opacity);
7860
7862
  pointer-events:none;
7861
7863
  -webkit-user-select:none;
7862
7864
  user-select:none;
7863
7865
  }
7864
- .bp_date_picker_module_datePicker--01416 .bp_date_picker_module_label--01416{
7866
+ .bp_date_picker_module_datePicker--b164e .bp_date_picker_module_label--b164e{
7865
7867
  cursor:default;
7866
7868
  display:block;
7867
7869
  margin-block-end:var(--date-picker-label-margin-bottom);
7868
7870
  width:fit-content;
7869
7871
  }
7870
- .bp_date_picker_module_datePicker--01416 .bp_date_picker_module_group--01416{
7872
+ .bp_date_picker_module_datePicker--b164e .bp_date_picker_module_group--b164e{
7871
7873
  align-items:center;
7872
7874
  display:inline-flex;
7873
7875
  position:relative;
7874
7876
  width:100%;
7875
7877
  }
7876
- .bp_date_picker_module_datePicker--01416 .bp_date_picker_module_group--01416 .bp_date_picker_module_groupContainer--01416{
7878
+ .bp_date_picker_module_datePicker--b164e .bp_date_picker_module_group--b164e .bp_date_picker_module_groupContainer--b164e{
7877
7879
  align-items:center;
7878
7880
  border-radius:var(--date-picker-border-radius);
7879
7881
  box-shadow:var(--date-picker-input-inner-shadow);
@@ -7884,23 +7886,23 @@
7884
7886
  position:relative;
7885
7887
  width:100%;
7886
7888
  }
7887
- .bp_date_picker_module_datePicker--01416 .bp_date_picker_module_group--01416 .bp_date_picker_module_groupContainer--01416:focus-within{
7889
+ .bp_date_picker_module_datePicker--b164e .bp_date_picker_module_group--b164e .bp_date_picker_module_groupContainer--b164e:focus-within{
7888
7890
  outline:var(--date-picker-focus-outline);
7889
7891
  }
7890
- .bp_date_picker_module_datePicker--01416 .bp_date_picker_module_group--01416 .bp_date_picker_module_groupContainer--01416.bp_date_picker_module_error--01416:not(:focus-within){
7892
+ .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){
7891
7893
  outline:var(--date-picker-error-outline);
7892
7894
  }
7893
- .bp_date_picker_module_datePicker--01416 .bp_date_picker_module_group--01416 .bp_date_picker_module_groupContainer--01416.bp_date_picker_module_error--01416:focus-within{
7895
+ .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{
7894
7896
  outline:var(--date-picker-focus-outline);
7895
7897
  }
7896
- .bp_date_picker_module_datePicker--01416 .bp_date_picker_module_group--01416 .bp_date_picker_module_groupContainer--01416 .bp_date_picker_module_groupContainerInput--01416{
7898
+ .bp_date_picker_module_datePicker--b164e .bp_date_picker_module_group--b164e .bp_date_picker_module_groupContainer--b164e .bp_date_picker_module_groupContainerInput--b164e{
7897
7899
  align-items:center;
7898
7900
  display:inline-flex;
7899
7901
  height:var(--date-picker-height);
7900
7902
  text-transform:uppercase;
7901
7903
  white-space:nowrap;
7902
7904
  }
7903
- .bp_date_picker_module_datePicker--01416 .bp_date_picker_module_group--01416 .bp_date_picker_module_groupContainer--01416 .bp_date_picker_module_groupContainerInput--01416 .bp_date_picker_module_groupContainerInputSegment--01416{
7905
+ .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{
7904
7906
  border:unset;
7905
7907
  border-radius:unset;
7906
7908
  box-shadow:unset;
@@ -7910,18 +7912,21 @@
7910
7912
  transition:unset;
7911
7913
  width:unset;
7912
7914
  }
7913
- .bp_date_picker_module_datePicker--01416 .bp_date_picker_module_group--01416 .bp_date_picker_module_groupContainer--01416 .bp_date_picker_module_groupContainerInput--01416 .bp_date_picker_module_groupContainerInputSegment--01416[data-placeholder]{
7915
+ .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]{
7914
7916
  color:var(--date-picker-input-placeholder-color);
7915
7917
  }
7916
- .bp_date_picker_module_datePicker--01416 .bp_date_picker_module_group--01416 .bp_date_picker_module_groupContainer--01416 .bp_date_picker_module_groupContainerInput--01416 .bp_date_picker_module_groupContainerInputSegment--01416:focus{
7918
+ .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{
7917
7919
  background:var(--date-picker-input-segment-focused-background);
7918
7920
  caret-color:#0000;
7919
7921
  outline:none;
7920
7922
  }
7921
- .bp_date_picker_module_datePicker--01416 .bp_date_picker_module_group--01416 .bp_date_picker_module_groupContainer--01416 .bp_date_picker_module_groupContainerInput--01416 .bp_date_picker_module_groupContainerInputSegment--01416:focus[data-placeholder]{
7923
+ .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]{
7922
7924
  color:var(--date-picker-input-placeholder-focused-color);
7923
7925
  }
7924
- .bp_date_picker_module_datePicker--01416 .bp_date_picker_module_group--01416 .bp_date_picker_module_button--01416{
7926
+ .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){
7927
+ outline-color:var(--date-picker-hover-outline-color);
7928
+ }
7929
+ .bp_date_picker_module_datePicker--b164e .bp_date_picker_module_group--b164e .bp_date_picker_module_button--b164e{
7925
7930
  align-items:center;
7926
7931
  background-color:initial;
7927
7932
  border:none;
@@ -7936,44 +7941,116 @@
7936
7941
  right:var(--date-picker-padding-inline);
7937
7942
  width:var(--date-picker-icon-button-size);
7938
7943
  }
7939
- .bp_date_picker_module_datePicker--01416 .bp_date_picker_module_group--01416 .bp_date_picker_module_button--01416.bp_date_picker_module_clear--01416{
7944
+ .bp_date_picker_module_datePicker--b164e .bp_date_picker_module_group--b164e .bp_date_picker_module_button--b164e.bp_date_picker_module_clear--b164e{
7940
7945
  right:var(--date-picker-clear-button-right);
7941
7946
  }
7942
- .bp_date_picker_module_datePicker--01416 .bp_date_picker_module_group--01416 .bp_date_picker_module_button--01416:focus-visible,.bp_date_picker_module_datePicker--01416 .bp_date_picker_module_group--01416 .bp_date_picker_module_button--01416[data-focus-visible]{
7947
+ .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]{
7943
7948
  background-color:var(--date-picker-icon-button-focus-background-color);
7944
7949
  outline:var(--date-picker-icon-button-focus-outline);
7945
7950
  }
7946
- .bp_date_picker_module_datePicker--01416 .bp_date_picker_module_group--01416 .bp_date_picker_module_button--01416:hover{
7951
+ .bp_date_picker_module_datePicker--b164e .bp_date_picker_module_group--b164e .bp_date_picker_module_button--b164e:hover{
7947
7952
  background:var(--date-picker-icon-button-hover-background);
7948
7953
  }
7949
- .bp_date_picker_module_datePicker--01416 .bp_date_picker_module_group--01416 .bp_date_picker_module_button--01416:hover *{
7954
+ .bp_date_picker_module_datePicker--b164e .bp_date_picker_module_group--b164e .bp_date_picker_module_button--b164e:hover *{
7950
7955
  fill:var(--date-picker-icon-button-hover-fill);
7951
7956
  }
7952
- .bp_date_picker_module_datePicker--01416 .bp_date_picker_module_group--01416 .bp_date_picker_module_button--01416:active{
7957
+ .bp_date_picker_module_datePicker--b164e .bp_date_picker_module_group--b164e .bp_date_picker_module_button--b164e:active{
7953
7958
  background:var(--date-picker-icon-button-active-background);
7954
7959
  }
7955
- .bp_date_picker_module_datePicker--01416 .bp_date_picker_module_group--01416 .bp_date_picker_module_button--01416:active *{
7960
+ .bp_date_picker_module_datePicker--b164e .bp_date_picker_module_group--b164e .bp_date_picker_module_button--b164e:active *{
7956
7961
  fill:var(--date-picker-icon-button-active-fill);
7957
7962
  }
7958
- .bp_date_picker_module_datePicker--01416 .bp_date_picker_module_group--01416 .bp_date_picker_module_button--01416:disabled{
7963
+ .bp_date_picker_module_datePicker--b164e .bp_date_picker_module_group--b164e .bp_date_picker_module_button--b164e:disabled{
7959
7964
  opacity:1;
7960
7965
  }
7961
- .bp_date_picker_module_datePicker--01416 .bp_date_picker_module_inlineError--01416{
7966
+ .bp_date_picker_module_datePicker--b164e .bp_date_picker_module_inlineError--b164e{
7962
7967
  margin-block-start:var(--date-picker-inline-error-margin);
7963
7968
  }
7964
7969
 
7965
- @keyframes bp_date_picker_module_slide--01416{
7970
+ .bp_date_picker_module_datePickerPopoverContent--b164e{
7971
+ z-index:var(--z-index-popover);
7972
+ }
7973
+
7974
+ .bp_date_picker_module_groupContainer--b164e[data-bp-animated=true]{
7975
+ transition-duration:var(--bp-duration-short);
7976
+ transition-property:outline-color;
7977
+ transition-timing-function:var(--bp-curve-small-off);
7978
+ }
7979
+
7980
+ .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{
7981
+ transition-timing-function:var(--bp-curve-small-on);
7982
+ }
7983
+
7984
+ .bp_date_picker_module_datePickerPopoverContent--b164e[data-bp-animated=true][data-state=open]{
7985
+ animation-duration:var(--bp-duration-medium);
7986
+ animation-fill-mode:backwards;
7987
+ animation-timing-function:var(--bp-curve-medium-on);
7988
+ }
7989
+ .bp_date_picker_module_datePickerPopoverContent--b164e[data-bp-animated=true][data-state=open][data-side=top]{
7990
+ animation-name:bp_date_picker_module_bpDatePickerCalendarMenuTopSlideEnter--b164e, bp_date_picker_module_bpDatePickerCalendarMenuFadeIn--b164e;
7991
+ }
7992
+ .bp_date_picker_module_datePickerPopoverContent--b164e[data-bp-animated=true][data-state=open][data-side=bottom]{
7993
+ animation-name:bp_date_picker_module_bpDatePickerCalendarMenuBottomSlideEnter--b164e, bp_date_picker_module_bpDatePickerCalendarMenuFadeIn--b164e;
7994
+ }
7995
+ .bp_date_picker_module_datePickerPopoverContent--b164e[data-bp-animated=true][data-state=closed]{
7996
+ animation-duration:var(--bp-duration-short);
7997
+ animation-fill-mode:forwards;
7998
+ animation-timing-function:var(--bp-curve-medium-off);
7999
+ }
8000
+ .bp_date_picker_module_datePickerPopoverContent--b164e[data-bp-animated=true][data-state=closed][data-side=top]{
8001
+ animation-name:bp_date_picker_module_bpDatePickerCalendarMenuTopSlideExit--b164e, bp_date_picker_module_bpDatePickerCalendarMenuFadeOut--b164e;
8002
+ }
8003
+ .bp_date_picker_module_datePickerPopoverContent--b164e[data-bp-animated=true][data-state=closed][data-side=bottom]{
8004
+ animation-name:bp_date_picker_module_bpDatePickerCalendarMenuBottomSlideExit--b164e, bp_date_picker_module_bpDatePickerCalendarMenuFadeOut--b164e;
8005
+ }
8006
+
8007
+ @keyframes bp_date_picker_module_bpDatePickerCalendarMenuFadeIn--b164e{
7966
8008
  from{
7967
- opacity:0;
7968
- transform:var(--popover-slide-translation);
8009
+ opacity:var(--bp-opacity-hidden);
8010
+ }
8011
+ to{
8012
+ opacity:var(--bp-opacity-visible);
8013
+ }
8014
+ }
8015
+ @keyframes bp_date_picker_module_bpDatePickerCalendarMenuFadeOut--b164e{
8016
+ from{
8017
+ opacity:var(--bp-opacity-visible);
8018
+ }
8019
+ to{
8020
+ opacity:var(--bp-opacity-hidden);
8021
+ }
8022
+ }
8023
+ @keyframes bp_date_picker_module_bpDatePickerCalendarMenuTopSlideEnter--b164e{
8024
+ from{
8025
+ transform:translateY(var(--bp-space-020));
7969
8026
  }
7970
8027
  to{
7971
- opacity:1;
7972
8028
  transform:translateY(0);
7973
8029
  }
7974
8030
  }
7975
- .bp_date_picker_module_datePickerPopoverContent--01416{
7976
- z-index:var(--z-index-popover);
8031
+ @keyframes bp_date_picker_module_bpDatePickerCalendarMenuTopSlideExit--b164e{
8032
+ from{
8033
+ transform:translateY(0);
8034
+ }
8035
+ to{
8036
+ transform:translateY(var(--bp-space-020));
8037
+ }
8038
+ }
8039
+ @keyframes bp_date_picker_module_bpDatePickerCalendarMenuBottomSlideEnter--b164e{
8040
+ from{
8041
+ transform:translateY(calc(var(--bp-space-020)*-1));
8042
+ }
8043
+ to{
8044
+ transform:translateY(0);
8045
+ }
8046
+ }
8047
+ @keyframes bp_date_picker_module_bpDatePickerCalendarMenuBottomSlideExit--b164e{
8048
+ from{
8049
+ transform:translateY(0);
8050
+ }
8051
+ to{
8052
+ transform:translateY(calc(var(--bp-space-020)*-1));
8053
+ }
7977
8054
  }
7978
8055
 
7979
8056
  .bp_elemental_breadcrumb_module_nav--483cf{
package/dist/lib-esm/date-picker/date-picker.js CHANGED
@@ -5,6 +5,9 @@ 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 '../blueprint-configuration-context/blueprint-configuration-context.js';
9
+ import '../blueprint-configuration-context/consts.js';
10
+ import { useBlueprintConfiguration } from '../blueprint-configuration-context/useBlueprintConfiguration.js';
8
11
  import { Calendar as Calendar$1 } from '../primitives/calendar/calendar.js';
9
12
  import '@internationalized/date';
10
13
  import { IconButton } from '../primitives/icon-button/icon-button.js';
@@ -49,6 +52,10 @@ const DatePicker = /*#__PURE__*/forwardRef((props, forwardedRef) => {
49
52
  previousMonthAriaLabel,
50
53
  ...rest
51
54
  } = props;
55
+ const {
56
+ componentsWithAnimationEnabled
57
+ } = useBlueprintConfiguration();
58
+ const isAnimationEnabled = componentsWithAnimationEnabled.includes('Datepicker');
52
59
  const [internalValue, setInternalValue] = useState(defaultValue);
53
60
  useEffect(() => {
54
61
  if (value !== undefined) {
@@ -170,6 +177,7 @@ const DatePicker = /*#__PURE__*/forwardRef((props, forwardedRef) => {
170
177
  className: clsx(styles.groupContainer, {
171
178
  [styles.error]: hasError
172
179
  }),
180
+ "data-bp-animated": isAnimationEnabled ? 'true' : 'false',
173
181
  "data-testid": "date-picker-input",
174
182
  onClickCapture: onDateInputClick,
175
183
  children: jsx(DateInput, {
@@ -207,6 +215,7 @@ const DatePicker = /*#__PURE__*/forwardRef((props, forwardedRef) => {
207
215
  children: jsx(RadixPopover.Content, {
208
216
  align: "start",
209
217
  className: styles.datePickerPopoverContent,
218
+ "data-bp-animated": isAnimationEnabled ? 'true' : 'false',
210
219
  onCloseAutoFocus: onCloseAutoFocus,
211
220
  onFocusOutside: onFocusOutside,
212
221
  onOpenAutoFocus: onOpenAutoFocus,
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--01416","label":"bp_date_picker_module_label--01416","group":"bp_date_picker_module_group--01416","disabled":"bp_date_picker_module_disabled--01416","groupContainer":"bp_date_picker_module_groupContainer--01416","error":"bp_date_picker_module_error--01416","groupContainerInput":"bp_date_picker_module_groupContainerInput--01416","groupContainerInputSegment":"bp_date_picker_module_groupContainerInputSegment--01416","button":"bp_date_picker_module_button--01416","clear":"bp_date_picker_module_clear--01416","inlineError":"bp_date_picker_module_inlineError--01416","datePickerPopoverContent":"bp_date_picker_module_datePickerPopoverContent--01416"};
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"};
3
3
 
4
4
  export { styles as default };
package/dist/lib-esm/index.css CHANGED
@@ -7745,7 +7745,7 @@
7745
7745
  color:var(--calendar-disabled-text-color);
7746
7746
  text-decoration:line-through;
7747
7747
  }
7748
- .bp_date_picker_module_datePicker--01416[data-modern=false]{
7748
+ .bp_date_picker_module_datePicker--b164e[data-modern=false]{
7749
7749
  --date-picker-label-margin-bottom:var(--space-2);
7750
7750
  --date-picker-input-placeholder-color:var(--text-text-on-light-secondary);
7751
7751
  --date-picker-input-placeholder-focused-color:var(--text-text-on-light);
@@ -7755,6 +7755,7 @@
7755
7755
  --date-picker-height:var(--size-10);
7756
7756
  --date-picker-padding-inline:var(--space-2);
7757
7757
  --date-picker-border:var(--border-1) solid var(--border-input-border);
7758
+ --date-picker-hover-outline-color:var(--border-input-border-hover);
7758
7759
  --date-picker-margin:var(--border-1);
7759
7760
  --date-picker-focus-outline:var(--border-2) solid var(--outline-focus-on-light);
7760
7761
  --date-picker-error-outline:var(--border-2) solid var(--text-text-error-on-light);
@@ -7770,7 +7771,7 @@
7770
7771
  --date-picker-icon-button-hover-fill:var(--icon-cta-icon-hover);
7771
7772
  --date-picker-clear-button-right:var(--size-9);
7772
7773
  }
7773
- .bp_date_picker_module_datePicker--01416[data-modern=false] .bp_date_picker_module_label--01416{
7774
+ .bp_date_picker_module_datePicker--b164e[data-modern=false] .bp_date_picker_module_label--b164e{
7774
7775
  font-family:var(--body-default-bold-font-family);
7775
7776
  font-size:var(--body-default-bold-font-size);
7776
7777
  font-weight:var(--body-default-bold-font-weight);
@@ -7779,7 +7780,7 @@
7779
7780
  text-decoration:var(--body-default-bold-text-decoration);
7780
7781
  text-transform:var(--body-default-bold-text-case);
7781
7782
  }
7782
- .bp_date_picker_module_datePicker--01416[data-modern=false] .bp_date_picker_module_group--01416{
7783
+ .bp_date_picker_module_datePicker--b164e[data-modern=false] .bp_date_picker_module_group--b164e{
7783
7784
  font-family:var(--body-default-font-family);
7784
7785
  font-size:var(--body-default-font-size);
7785
7786
  font-weight:var(--body-default-font-weight);
@@ -7789,7 +7790,7 @@
7789
7790
  text-transform:var(--body-default-text-case);
7790
7791
  }
7791
7792
 
7792
- .bp_date_picker_module_datePicker--01416[data-modern=true]{
7793
+ .bp_date_picker_module_datePicker--b164e[data-modern=true]{
7793
7794
  --date-picker-label-margin-bottom:var(--bp-space-020);
7794
7795
  --date-picker-input-placeholder-color:var(--bp-text-text-on-light-secondary);
7795
7796
  --date-picker-input-placeholder-focused-color:var(--bp-text-text-on-light);
@@ -7799,6 +7800,7 @@
7799
7800
  --date-picker-height:var(--bp-size-100);
7800
7801
  --date-picker-padding-inline:var(--bp-space-020);
7801
7802
  --date-picker-border:var(--bp-border-01) solid var(--bp-border-input-border);
7803
+ --date-picker-hover-outline-color:var(--bp-border-date-picker-border-hover);
7802
7804
  --date-picker-margin:var(--border-1);
7803
7805
  --date-picker-focus-outline:var(--bp-border-02) solid var(--bp-outline-focus-on-light);
7804
7806
  --date-picker-error-outline:var(--bp-border-02) solid var(--bp-text-text-error-on-light);
@@ -7814,7 +7816,7 @@
7814
7816
  --date-picker-icon-button-hover-fill:var(--bp-icon-cta-icon-hover);
7815
7817
  --date-picker-clear-button-right:var(--bp-size-090);
7816
7818
  }
7817
- .bp_date_picker_module_datePicker--01416[data-modern=true] .bp_date_picker_module_label--01416{
7819
+ .bp_date_picker_module_datePicker--b164e[data-modern=true] .bp_date_picker_module_label--b164e{
7818
7820
  font-family:var(--bp-font-font-family), -apple-system, BlinkMacSystemFont, "San Francisco", "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
7819
7821
  font-size:var(--bp-font-size-05);
7820
7822
  font-style:normal;
@@ -7822,7 +7824,7 @@
7822
7824
  letter-spacing:var(--bp-font-letter-spacing-01);
7823
7825
  line-height:var(--bp-font-line-height-04);
7824
7826
  }
7825
- :where(body.is-inter-font) .bp_date_picker_module_datePicker--01416[data-modern=true] .bp_date_picker_module_label--01416{
7827
+ :where(body.is-inter-font) .bp_date_picker_module_datePicker--b164e[data-modern=true] .bp_date_picker_module_label--b164e{
7826
7828
  font-family:"Inter Variable", -apple-system, BlinkMacSystemFont, "San Francisco", "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
7827
7829
  font-size:.875rem;
7828
7830
  font-style:normal;
@@ -7833,7 +7835,7 @@
7833
7835
  text-transform:none;
7834
7836
  }
7835
7837
 
7836
- .bp_date_picker_module_datePicker--01416[data-modern=true] .bp_date_picker_module_group--01416{
7838
+ .bp_date_picker_module_datePicker--b164e[data-modern=true] .bp_date_picker_module_group--b164e{
7837
7839
  font-family:var(--bp-font-font-family), -apple-system, BlinkMacSystemFont, "San Francisco", "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
7838
7840
  font-size:var(--bp-font-size-05);
7839
7841
  font-style:normal;
@@ -7841,7 +7843,7 @@
7841
7843
  letter-spacing:var(--bp-font-letter-spacing-01);
7842
7844
  line-height:var(--bp-font-line-height-04);
7843
7845
  }
7844
- :where(body.is-inter-font) .bp_date_picker_module_datePicker--01416[data-modern=true] .bp_date_picker_module_group--01416{
7846
+ :where(body.is-inter-font) .bp_date_picker_module_datePicker--b164e[data-modern=true] .bp_date_picker_module_group--b164e{
7845
7847
  font-family:"Inter Variable", -apple-system, BlinkMacSystemFont, "San Francisco", "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
7846
7848
  font-size:.875rem;
7847
7849
  font-style:normal;
@@ -7852,28 +7854,28 @@
7852
7854
  text-transform:none;
7853
7855
  }
7854
7856
 
7855
- .bp_date_picker_module_datePicker--01416{
7857
+ .bp_date_picker_module_datePicker--b164e{
7856
7858
  width:100%;
7857
7859
  }
7858
- .bp_date_picker_module_datePicker--01416.bp_date_picker_module_disabled--01416{
7860
+ .bp_date_picker_module_datePicker--b164e.bp_date_picker_module_disabled--b164e{
7859
7861
  opacity:var(--disabled-opacity);
7860
7862
  pointer-events:none;
7861
7863
  -webkit-user-select:none;
7862
7864
  user-select:none;
7863
7865
  }
7864
- .bp_date_picker_module_datePicker--01416 .bp_date_picker_module_label--01416{
7866
+ .bp_date_picker_module_datePicker--b164e .bp_date_picker_module_label--b164e{
7865
7867
  cursor:default;
7866
7868
  display:block;
7867
7869
  margin-block-end:var(--date-picker-label-margin-bottom);
7868
7870
  width:fit-content;
7869
7871
  }
7870
- .bp_date_picker_module_datePicker--01416 .bp_date_picker_module_group--01416{
7872
+ .bp_date_picker_module_datePicker--b164e .bp_date_picker_module_group--b164e{
7871
7873
  align-items:center;
7872
7874
  display:inline-flex;
7873
7875
  position:relative;
7874
7876
  width:100%;
7875
7877
  }
7876
- .bp_date_picker_module_datePicker--01416 .bp_date_picker_module_group--01416 .bp_date_picker_module_groupContainer--01416{
7878
+ .bp_date_picker_module_datePicker--b164e .bp_date_picker_module_group--b164e .bp_date_picker_module_groupContainer--b164e{
7877
7879
  align-items:center;
7878
7880
  border-radius:var(--date-picker-border-radius);
7879
7881
  box-shadow:var(--date-picker-input-inner-shadow);
@@ -7884,23 +7886,23 @@
7884
7886
  position:relative;
7885
7887
  width:100%;
7886
7888
  }
7887
- .bp_date_picker_module_datePicker--01416 .bp_date_picker_module_group--01416 .bp_date_picker_module_groupContainer--01416:focus-within{
7889
+ .bp_date_picker_module_datePicker--b164e .bp_date_picker_module_group--b164e .bp_date_picker_module_groupContainer--b164e:focus-within{
7888
7890
  outline:var(--date-picker-focus-outline);
7889
7891
  }
7890
- .bp_date_picker_module_datePicker--01416 .bp_date_picker_module_group--01416 .bp_date_picker_module_groupContainer--01416.bp_date_picker_module_error--01416:not(:focus-within){
7892
+ .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){
7891
7893
  outline:var(--date-picker-error-outline);
7892
7894
  }
7893
- .bp_date_picker_module_datePicker--01416 .bp_date_picker_module_group--01416 .bp_date_picker_module_groupContainer--01416.bp_date_picker_module_error--01416:focus-within{
7895
+ .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{
7894
7896
  outline:var(--date-picker-focus-outline);
7895
7897
  }
7896
- .bp_date_picker_module_datePicker--01416 .bp_date_picker_module_group--01416 .bp_date_picker_module_groupContainer--01416 .bp_date_picker_module_groupContainerInput--01416{
7898
+ .bp_date_picker_module_datePicker--b164e .bp_date_picker_module_group--b164e .bp_date_picker_module_groupContainer--b164e .bp_date_picker_module_groupContainerInput--b164e{
7897
7899
  align-items:center;
7898
7900
  display:inline-flex;
7899
7901
  height:var(--date-picker-height);
7900
7902
  text-transform:uppercase;
7901
7903
  white-space:nowrap;
7902
7904
  }
7903
- .bp_date_picker_module_datePicker--01416 .bp_date_picker_module_group--01416 .bp_date_picker_module_groupContainer--01416 .bp_date_picker_module_groupContainerInput--01416 .bp_date_picker_module_groupContainerInputSegment--01416{
7905
+ .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{
7904
7906
  border:unset;
7905
7907
  border-radius:unset;
7906
7908
  box-shadow:unset;
@@ -7910,18 +7912,21 @@
7910
7912
  transition:unset;
7911
7913
  width:unset;
7912
7914
  }
7913
- .bp_date_picker_module_datePicker--01416 .bp_date_picker_module_group--01416 .bp_date_picker_module_groupContainer--01416 .bp_date_picker_module_groupContainerInput--01416 .bp_date_picker_module_groupContainerInputSegment--01416[data-placeholder]{
7915
+ .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]{
7914
7916
  color:var(--date-picker-input-placeholder-color);
7915
7917
  }
7916
- .bp_date_picker_module_datePicker--01416 .bp_date_picker_module_group--01416 .bp_date_picker_module_groupContainer--01416 .bp_date_picker_module_groupContainerInput--01416 .bp_date_picker_module_groupContainerInputSegment--01416:focus{
7918
+ .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{
7917
7919
  background:var(--date-picker-input-segment-focused-background);
7918
7920
  caret-color:#0000;
7919
7921
  outline:none;
7920
7922
  }
7921
- .bp_date_picker_module_datePicker--01416 .bp_date_picker_module_group--01416 .bp_date_picker_module_groupContainer--01416 .bp_date_picker_module_groupContainerInput--01416 .bp_date_picker_module_groupContainerInputSegment--01416:focus[data-placeholder]{
7923
+ .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]{
7922
7924
  color:var(--date-picker-input-placeholder-focused-color);
7923
7925
  }
7924
- .bp_date_picker_module_datePicker--01416 .bp_date_picker_module_group--01416 .bp_date_picker_module_button--01416{
7926
+ .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){
7927
+ outline-color:var(--date-picker-hover-outline-color);
7928
+ }
7929
+ .bp_date_picker_module_datePicker--b164e .bp_date_picker_module_group--b164e .bp_date_picker_module_button--b164e{
7925
7930
  align-items:center;
7926
7931
  background-color:initial;
7927
7932
  border:none;
@@ -7936,44 +7941,116 @@
7936
7941
  right:var(--date-picker-padding-inline);
7937
7942
  width:var(--date-picker-icon-button-size);
7938
7943
  }
7939
- .bp_date_picker_module_datePicker--01416 .bp_date_picker_module_group--01416 .bp_date_picker_module_button--01416.bp_date_picker_module_clear--01416{
7944
+ .bp_date_picker_module_datePicker--b164e .bp_date_picker_module_group--b164e .bp_date_picker_module_button--b164e.bp_date_picker_module_clear--b164e{
7940
7945
  right:var(--date-picker-clear-button-right);
7941
7946
  }
7942
- .bp_date_picker_module_datePicker--01416 .bp_date_picker_module_group--01416 .bp_date_picker_module_button--01416:focus-visible,.bp_date_picker_module_datePicker--01416 .bp_date_picker_module_group--01416 .bp_date_picker_module_button--01416[data-focus-visible]{
7947
+ .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]{
7943
7948
  background-color:var(--date-picker-icon-button-focus-background-color);
7944
7949
  outline:var(--date-picker-icon-button-focus-outline);
7945
7950
  }
7946
- .bp_date_picker_module_datePicker--01416 .bp_date_picker_module_group--01416 .bp_date_picker_module_button--01416:hover{
7951
+ .bp_date_picker_module_datePicker--b164e .bp_date_picker_module_group--b164e .bp_date_picker_module_button--b164e:hover{
7947
7952
  background:var(--date-picker-icon-button-hover-background);
7948
7953
  }
7949
- .bp_date_picker_module_datePicker--01416 .bp_date_picker_module_group--01416 .bp_date_picker_module_button--01416:hover *{
7954
+ .bp_date_picker_module_datePicker--b164e .bp_date_picker_module_group--b164e .bp_date_picker_module_button--b164e:hover *{
7950
7955
  fill:var(--date-picker-icon-button-hover-fill);
7951
7956
  }
7952
- .bp_date_picker_module_datePicker--01416 .bp_date_picker_module_group--01416 .bp_date_picker_module_button--01416:active{
7957
+ .bp_date_picker_module_datePicker--b164e .bp_date_picker_module_group--b164e .bp_date_picker_module_button--b164e:active{
7953
7958
  background:var(--date-picker-icon-button-active-background);
7954
7959
  }
7955
- .bp_date_picker_module_datePicker--01416 .bp_date_picker_module_group--01416 .bp_date_picker_module_button--01416:active *{
7960
+ .bp_date_picker_module_datePicker--b164e .bp_date_picker_module_group--b164e .bp_date_picker_module_button--b164e:active *{
7956
7961
  fill:var(--date-picker-icon-button-active-fill);
7957
7962
  }
7958
- .bp_date_picker_module_datePicker--01416 .bp_date_picker_module_group--01416 .bp_date_picker_module_button--01416:disabled{
7963
+ .bp_date_picker_module_datePicker--b164e .bp_date_picker_module_group--b164e .bp_date_picker_module_button--b164e:disabled{
7959
7964
  opacity:1;
7960
7965
  }
7961
- .bp_date_picker_module_datePicker--01416 .bp_date_picker_module_inlineError--01416{
7966
+ .bp_date_picker_module_datePicker--b164e .bp_date_picker_module_inlineError--b164e{
7962
7967
  margin-block-start:var(--date-picker-inline-error-margin);
7963
7968
  }
7964
7969
 
7965
- @keyframes bp_date_picker_module_slide--01416{
7970
+ .bp_date_picker_module_datePickerPopoverContent--b164e{
7971
+ z-index:var(--z-index-popover);
7972
+ }
7973
+
7974
+ .bp_date_picker_module_groupContainer--b164e[data-bp-animated=true]{
7975
+ transition-duration:var(--bp-duration-short);
7976
+ transition-property:outline-color;
7977
+ transition-timing-function:var(--bp-curve-small-off);
7978
+ }
7979
+
7980
+ .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{
7981
+ transition-timing-function:var(--bp-curve-small-on);
7982
+ }
7983
+
7984
+ .bp_date_picker_module_datePickerPopoverContent--b164e[data-bp-animated=true][data-state=open]{
7985
+ animation-duration:var(--bp-duration-medium);
7986
+ animation-fill-mode:backwards;
7987
+ animation-timing-function:var(--bp-curve-medium-on);
7988
+ }
7989
+ .bp_date_picker_module_datePickerPopoverContent--b164e[data-bp-animated=true][data-state=open][data-side=top]{
7990
+ animation-name:bp_date_picker_module_bpDatePickerCalendarMenuTopSlideEnter--b164e, bp_date_picker_module_bpDatePickerCalendarMenuFadeIn--b164e;
7991
+ }
7992
+ .bp_date_picker_module_datePickerPopoverContent--b164e[data-bp-animated=true][data-state=open][data-side=bottom]{
7993
+ animation-name:bp_date_picker_module_bpDatePickerCalendarMenuBottomSlideEnter--b164e, bp_date_picker_module_bpDatePickerCalendarMenuFadeIn--b164e;
7994
+ }
7995
+ .bp_date_picker_module_datePickerPopoverContent--b164e[data-bp-animated=true][data-state=closed]{
7996
+ animation-duration:var(--bp-duration-short);
7997
+ animation-fill-mode:forwards;
7998
+ animation-timing-function:var(--bp-curve-medium-off);
7999
+ }
8000
+ .bp_date_picker_module_datePickerPopoverContent--b164e[data-bp-animated=true][data-state=closed][data-side=top]{
8001
+ animation-name:bp_date_picker_module_bpDatePickerCalendarMenuTopSlideExit--b164e, bp_date_picker_module_bpDatePickerCalendarMenuFadeOut--b164e;
8002
+ }
8003
+ .bp_date_picker_module_datePickerPopoverContent--b164e[data-bp-animated=true][data-state=closed][data-side=bottom]{
8004
+ animation-name:bp_date_picker_module_bpDatePickerCalendarMenuBottomSlideExit--b164e, bp_date_picker_module_bpDatePickerCalendarMenuFadeOut--b164e;
8005
+ }
8006
+
8007
+ @keyframes bp_date_picker_module_bpDatePickerCalendarMenuFadeIn--b164e{
7966
8008
  from{
7967
- opacity:0;
7968
- transform:var(--popover-slide-translation);
8009
+ opacity:var(--bp-opacity-hidden);
8010
+ }
8011
+ to{
8012
+ opacity:var(--bp-opacity-visible);
8013
+ }
8014
+ }
8015
+ @keyframes bp_date_picker_module_bpDatePickerCalendarMenuFadeOut--b164e{
8016
+ from{
8017
+ opacity:var(--bp-opacity-visible);
8018
+ }
8019
+ to{
8020
+ opacity:var(--bp-opacity-hidden);
8021
+ }
8022
+ }
8023
+ @keyframes bp_date_picker_module_bpDatePickerCalendarMenuTopSlideEnter--b164e{
8024
+ from{
8025
+ transform:translateY(var(--bp-space-020));
7969
8026
  }
7970
8027
  to{
7971
- opacity:1;
7972
8028
  transform:translateY(0);
7973
8029
  }
7974
8030
  }
7975
- .bp_date_picker_module_datePickerPopoverContent--01416{
7976
- z-index:var(--z-index-popover);
8031
+ @keyframes bp_date_picker_module_bpDatePickerCalendarMenuTopSlideExit--b164e{
8032
+ from{
8033
+ transform:translateY(0);
8034
+ }
8035
+ to{
8036
+ transform:translateY(var(--bp-space-020));
8037
+ }
8038
+ }
8039
+ @keyframes bp_date_picker_module_bpDatePickerCalendarMenuBottomSlideEnter--b164e{
8040
+ from{
8041
+ transform:translateY(calc(var(--bp-space-020)*-1));
8042
+ }
8043
+ to{
8044
+ transform:translateY(0);
8045
+ }
8046
+ }
8047
+ @keyframes bp_date_picker_module_bpDatePickerCalendarMenuBottomSlideExit--b164e{
8048
+ from{
8049
+ transform:translateY(0);
8050
+ }
8051
+ to{
8052
+ transform:translateY(calc(var(--bp-space-020)*-1));
8053
+ }
7977
8054
  }
7978
8055
 
7979
8056
  .bp_elemental_breadcrumb_module_nav--483cf{
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@box/blueprint-web",
3
- "version": "17.4.2",
3
+ "version": "17.5.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.9.5",
58
+ "@box/blueprint-web-assets": "^5.9.7",
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.36",
89
+ "@box/storybook-utils": "^1.2.38",
90
90
  "@figma/code-connect": "1.4.4",
91
91
  "@playwright/test": "1.46.1",
92
92
  "@types/js-yaml": "^4.0.9",