@dynamic-framework/ui-react 1.34.0 → 1.35.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 (63) hide show
  1. package/README.md +1 -1
  2. package/dist/css/bootstrap-icons.css +3 -3
  3. package/dist/css/bootstrap-icons.min.css +2 -2
  4. package/dist/css/bootstrap-icons.scss +1 -1
  5. package/dist/css/dynamic-ui-non-root.css +720 -963
  6. package/dist/css/dynamic-ui-non-root.min.css +2 -2
  7. package/dist/css/dynamic-ui-root.css +1 -1
  8. package/dist/css/dynamic-ui-root.min.css +1 -1
  9. package/dist/css/dynamic-ui.css +720 -963
  10. package/dist/css/dynamic-ui.min.css +2 -2
  11. package/dist/css/fonts/bootstrap-icons.woff +0 -0
  12. package/dist/css/fonts/bootstrap-icons.woff2 +0 -0
  13. package/dist/index.esm.js +576 -146
  14. package/dist/index.esm.js.map +1 -1
  15. package/dist/index.js +573 -143
  16. package/dist/index.js.map +1 -1
  17. package/dist/js/bootstrap.bundle.js +19 -18
  18. package/dist/js/bootstrap.bundle.min.js +3 -3
  19. package/dist/js/bootstrap.esm.js +19 -16
  20. package/dist/js/bootstrap.esm.min.js +3 -3
  21. package/dist/js/bootstrap.js +19 -16
  22. package/dist/js/bootstrap.min.js +3 -3
  23. package/dist/types/components/DBoxFile/DBoxFile.d.ts +6 -5
  24. package/dist/types/components/DBoxFile/useDBoxFile.d.ts +37 -0
  25. package/dist/types/components/DBoxFile/utils.d.ts +39 -0
  26. package/dist/types/components/DDatePicker/DDatePicker.d.ts +6 -12
  27. package/dist/types/components/DDatePicker/components/DDatePickerHeaderSelector.d.ts +38 -0
  28. package/dist/types/components/{DDatePickerInput → DDatePicker/components}/DDatePickerInput.d.ts +2 -2
  29. package/dist/types/components/{DDatePickerTime → DDatePicker/components}/DDatePickerTime.d.ts +2 -2
  30. package/dist/types/components/DInput/DInput.d.ts +1 -1
  31. package/dist/types/components/DInputCounter/DInputCounter.d.ts +2 -2
  32. package/dist/types/components/DInputCurrency/DInputCurrency.d.ts +2 -2
  33. package/dist/types/components/DInputCurrencyBase/DInputCurrencyBase.d.ts +2 -2
  34. package/dist/types/components/DInputMask/DInputMask.d.ts +1 -1
  35. package/dist/types/components/DInputRange/DInputRange.d.ts +1 -1
  36. package/dist/types/components/DInputSearch/DInputSearch.d.ts +1 -1
  37. package/dist/types/components/DPopover/DPopover.d.ts +0 -3
  38. package/dist/types/utils/attr-accept.d.ts +11 -0
  39. package/dist/types/utils/getKeyboardFocusableElements.d.ts +1 -0
  40. package/jest/setup.js +14 -0
  41. package/package.json +13 -14
  42. package/src/style/abstracts/variables/_+import.scss +1 -0
  43. package/src/style/abstracts/variables/_box-file.scss +14 -7
  44. package/src/style/abstracts/variables/_cards.scss +1 -1
  45. package/src/style/abstracts/variables/_datepicker.scss +50 -0
  46. package/src/style/abstracts/variables/_forms.scss +6 -3
  47. package/src/style/base/_form-switch.scss +23 -2
  48. package/src/style/base/_input-group.scss +18 -1
  49. package/src/style/base/_nav.scss +0 -1
  50. package/src/style/base/_toast.scss +2 -0
  51. package/src/style/components/_d-box-file.scss +31 -15
  52. package/src/style/components/_d-button-icon.scss +17 -16
  53. package/src/style/components/_d-datepicker.scss +578 -243
  54. package/src/style/components/_d-input-pin.scss +8 -5
  55. package/src/style/components/_d-quick-action-button.scss +1 -1
  56. package/src/style/components/_d-quick-action-check.scss +1 -1
  57. package/src/style/components/_d-select.scss +35 -6
  58. package/src/style/components/_d-stepper-desktop.scss +1 -1
  59. package/src/style/helpers/_text-truncate.scss +2 -2
  60. package/dist/types/components/DDatePickerHeader/DDatePickerHeader.d.ts +0 -24
  61. package/dist/types/components/DDatePickerHeader/index.d.ts +0 -2
  62. package/dist/types/components/DDatePickerInput/index.d.ts +0 -2
  63. package/dist/types/components/DDatePickerTime/index.d.ts +0 -2
@@ -1,5 +1,5 @@
1
1
  /*!
2
- * dynamic-framework 1.34.0
2
+ * dynamic-framework 1.35.0
3
3
  * bootstrap ~5.3.3
4
4
  * license https://github.com/dynamic-framework/dynamic-ui/blob/master/libraries/dynamic-ui-react/LICENSE.md
5
5
  */
@@ -1271,8 +1271,8 @@ legend {
1271
1271
  width: 100%;
1272
1272
  padding: 0;
1273
1273
  margin-bottom: 0.5rem;
1274
- font-size: calc(1.275rem + 0.3vw);
1275
1274
  line-height: inherit;
1275
+ font-size: calc(1.275rem + 0.3vw);
1276
1276
  }
1277
1277
  @media (min-width: 1200px) {
1278
1278
  legend {
@@ -1878,7 +1878,7 @@ progress {
1878
1878
  }
1879
1879
 
1880
1880
  .col {
1881
- flex: 1 0 0%;
1881
+ flex: 1 0 0;
1882
1882
  }
1883
1883
 
1884
1884
  .row-cols-auto > * {
@@ -2337,7 +2337,7 @@ progress {
2337
2337
 
2338
2338
  @media (min-width: 576px) {
2339
2339
  .col-sm {
2340
- flex: 1 0 0%;
2340
+ flex: 1 0 0;
2341
2341
  }
2342
2342
  .row-cols-sm-auto > * {
2343
2343
  flex: 0 0 auto;
@@ -2706,7 +2706,7 @@ progress {
2706
2706
  }
2707
2707
  @media (min-width: 768px) {
2708
2708
  .col-md {
2709
- flex: 1 0 0%;
2709
+ flex: 1 0 0;
2710
2710
  }
2711
2711
  .row-cols-md-auto > * {
2712
2712
  flex: 0 0 auto;
@@ -3075,7 +3075,7 @@ progress {
3075
3075
  }
3076
3076
  @media (min-width: 992px) {
3077
3077
  .col-lg {
3078
- flex: 1 0 0%;
3078
+ flex: 1 0 0;
3079
3079
  }
3080
3080
  .row-cols-lg-auto > * {
3081
3081
  flex: 0 0 auto;
@@ -3444,7 +3444,7 @@ progress {
3444
3444
  }
3445
3445
  @media (min-width: 1200px) {
3446
3446
  .col-xl {
3447
- flex: 1 0 0%;
3447
+ flex: 1 0 0;
3448
3448
  }
3449
3449
  .row-cols-xl-auto > * {
3450
3450
  flex: 0 0 auto;
@@ -3813,7 +3813,7 @@ progress {
3813
3813
  }
3814
3814
  @media (min-width: 1400px) {
3815
3815
  .col-xxl {
3816
- flex: 1 0 0%;
3816
+ flex: 1 0 0;
3817
3817
  }
3818
3818
  .row-cols-xxl-auto > * {
3819
3819
  flex: 0 0 auto;
@@ -4691,7 +4691,7 @@ textarea.form-control-lg {
4691
4691
  background-image: var(--bs-form-select-bg-img), var(--bs-form-select-bg-icon, none);
4692
4692
  background-repeat: no-repeat;
4693
4693
  background-position: right 1rem center;
4694
- background-size: 24px;
4694
+ background-size: 16px;
4695
4695
  border: var(--bs-border-width) solid var(--bs-border-color);
4696
4696
  border-radius: var(--bs-border-radius-sm);
4697
4697
  box-shadow: none;
@@ -4976,9 +4976,11 @@ textarea.form-control-lg {
4976
4976
  top: 0;
4977
4977
  left: 0;
4978
4978
  z-index: 2;
4979
+ max-width: 100%;
4979
4980
  height: 100%;
4980
4981
  padding: 1rem 1rem;
4981
4982
  overflow: hidden;
4983
+ color: rgba(var(--bs-body-color-rgb), 0.65);
4982
4984
  text-align: start;
4983
4985
  text-overflow: ellipsis;
4984
4986
  white-space: nowrap;
@@ -5003,7 +5005,7 @@ textarea.form-control-lg {
5003
5005
  .form-floating > .form-control-plaintext::placeholder {
5004
5006
  color: transparent;
5005
5007
  }
5006
- .form-floating > .form-control:not(:-moz-placeholder-shown), .form-floating > .form-control-plaintext:not(:-moz-placeholder-shown) {
5008
+ .form-floating > .form-control:not(:-moz-placeholder), .form-floating > .form-control-plaintext:not(:-moz-placeholder) {
5007
5009
  padding-top: 1.625rem;
5008
5010
  padding-bottom: 0.625rem;
5009
5011
  }
@@ -5021,19 +5023,21 @@ textarea.form-control-lg {
5021
5023
  .form-floating > .form-select {
5022
5024
  padding-top: 1.625rem;
5023
5025
  padding-bottom: 0.625rem;
5026
+ padding-left: 1rem;
5024
5027
  }
5025
- .form-floating > .form-control:not(:-moz-placeholder-shown) ~ label {
5026
- color: rgba(var(--bs-body-color-rgb), 0.65);
5028
+ .form-floating > .form-control:not(:-moz-placeholder) ~ label {
5027
5029
  transform: scale(0.85) translateY(-0.5rem) translateX(0.15rem);
5028
5030
  }
5029
5031
  .form-floating > .form-control:focus ~ label,
5030
5032
  .form-floating > .form-control:not(:placeholder-shown) ~ label,
5031
5033
  .form-floating > .form-control-plaintext ~ label,
5032
5034
  .form-floating > .form-select ~ label {
5033
- color: rgba(var(--bs-body-color-rgb), 0.65);
5034
5035
  transform: scale(0.85) translateY(-0.5rem) translateX(0.15rem);
5035
5036
  }
5036
- .form-floating > .form-control:not(:-moz-placeholder-shown) ~ label::after {
5037
+ .form-floating > .form-control:-webkit-autofill ~ label {
5038
+ transform: scale(0.85) translateY(-0.5rem) translateX(0.15rem);
5039
+ }
5040
+ .form-floating > textarea:not(:-moz-placeholder) ~ label::after {
5037
5041
  position: absolute;
5038
5042
  inset: 1rem 0.5rem;
5039
5043
  z-index: -1;
@@ -5042,10 +5046,8 @@ textarea.form-control-lg {
5042
5046
  background-color: var(--bs-white);
5043
5047
  border-radius: var(--bs-border-radius-sm);
5044
5048
  }
5045
- .form-floating > .form-control:focus ~ label::after,
5046
- .form-floating > .form-control:not(:placeholder-shown) ~ label::after,
5047
- .form-floating > .form-control-plaintext ~ label::after,
5048
- .form-floating > .form-select ~ label::after {
5049
+ .form-floating > textarea:focus ~ label::after,
5050
+ .form-floating > textarea:not(:placeholder-shown) ~ label::after {
5049
5051
  position: absolute;
5050
5052
  inset: 1rem 0.5rem;
5051
5053
  z-index: -1;
@@ -5054,9 +5056,8 @@ textarea.form-control-lg {
5054
5056
  background-color: var(--bs-white);
5055
5057
  border-radius: var(--bs-border-radius-sm);
5056
5058
  }
5057
- .form-floating > .form-control:-webkit-autofill ~ label {
5058
- color: rgba(var(--bs-body-color-rgb), 0.65);
5059
- transform: scale(0.85) translateY(-0.5rem) translateX(0.15rem);
5059
+ .form-floating > textarea:disabled ~ label::after {
5060
+ background-color: var(--bs-gray-100);
5060
5061
  }
5061
5062
  .form-floating > .form-control-plaintext ~ label {
5062
5063
  border-width: var(--bs-border-width) 0;
@@ -5065,10 +5066,6 @@ textarea.form-control-lg {
5065
5066
  .form-floating > .form-control:disabled ~ label {
5066
5067
  color: var(--bs-gray-600);
5067
5068
  }
5068
- .form-floating > :disabled ~ label::after,
5069
- .form-floating > .form-control:disabled ~ label::after {
5070
- background-color: var(--bs-gray-100);
5071
- }
5072
5069
 
5073
5070
  .input-group {
5074
5071
  position: relative;
@@ -5151,7 +5148,7 @@ textarea.form-control-lg {
5151
5148
  border-bottom-right-radius: 0;
5152
5149
  }
5153
5150
  .input-group > :not(:first-child):not(.dropdown-menu):not(.valid-tooltip):not(.valid-feedback):not(.invalid-tooltip):not(.invalid-feedback) {
5154
- margin-left: calc(var(--bs-border-width) * -1);
5151
+ margin-left: calc(-1 * var(--bs-border-width));
5155
5152
  border-top-left-radius: 0;
5156
5153
  border-bottom-left-radius: 0;
5157
5154
  }
@@ -5215,7 +5212,7 @@ textarea.form-control-lg {
5215
5212
  --bs-form-select-bg-icon: var(--bs-form-feedback-icon-valid);
5216
5213
  padding-right: 5.5rem;
5217
5214
  background-position: right 1rem center, center right 3rem;
5218
- background-size: 24px, calc(0.75em + 0.75rem) calc(0.75em + 0.75rem);
5215
+ background-size: 16px, calc(0.75em + 0.75rem) calc(0.75em + 0.75rem);
5219
5216
  }
5220
5217
  .was-validated .form-select:valid:focus, .form-select.is-valid:focus {
5221
5218
  border-color: var(--bs-form-valid-border-color);
@@ -5305,7 +5302,7 @@ textarea.form-control-lg {
5305
5302
  --bs-form-select-bg-icon: var(--bs-form-feedback-icon-invalid);
5306
5303
  padding-right: 5.5rem;
5307
5304
  background-position: right 1rem center, center right 3rem;
5308
- background-size: 24px, calc(0.75em + 0.75rem) calc(0.75em + 0.75rem);
5305
+ background-size: 16px, calc(0.75em + 0.75rem) calc(0.75em + 0.75rem);
5309
5306
  }
5310
5307
  .was-validated .form-select:invalid:focus, .form-select.is-invalid:focus {
5311
5308
  border-color: var(--bs-form-invalid-border-color);
@@ -5699,7 +5696,7 @@ textarea.form-control-lg {
5699
5696
  }
5700
5697
  .btn-group > :not(.btn-check:first-child) + .btn,
5701
5698
  .btn-group > .btn-group:not(:first-child) {
5702
- margin-left: calc(var(--bs-border-width) * -1);
5699
+ margin-left: calc(-1 * var(--bs-border-width));
5703
5700
  }
5704
5701
  .btn-group > .btn:not(:last-child):not(.dropdown-toggle),
5705
5702
  .btn-group > .btn.dropdown-toggle-split:first-child,
@@ -5753,14 +5750,15 @@ textarea.form-control-lg {
5753
5750
  }
5754
5751
  .btn-group-vertical > .btn:not(:first-child),
5755
5752
  .btn-group-vertical > .btn-group:not(:first-child) {
5756
- margin-top: calc(var(--bs-border-width) * -1);
5753
+ margin-top: calc(-1 * var(--bs-border-width));
5757
5754
  }
5758
5755
  .btn-group-vertical > .btn:not(:last-child):not(.dropdown-toggle),
5759
5756
  .btn-group-vertical > .btn-group:not(:last-child) > .btn {
5760
5757
  border-bottom-right-radius: 0;
5761
5758
  border-bottom-left-radius: 0;
5762
5759
  }
5763
- .btn-group-vertical > .btn ~ .btn,
5760
+ .btn-group-vertical > .btn:nth-child(n+3),
5761
+ .btn-group-vertical > :not(.btn-check) + .btn,
5764
5762
  .btn-group-vertical > .btn-group:not(:first-child) > .btn {
5765
5763
  border-top-left-radius: 0;
5766
5764
  border-top-right-radius: 0;
@@ -5885,8 +5883,8 @@ textarea.form-control-lg {
5885
5883
 
5886
5884
  .nav-justified > .nav-link,
5887
5885
  .nav-justified .nav-item {
5888
- flex-basis: 0;
5889
5886
  flex-grow: 1;
5887
+ flex-basis: 0;
5890
5888
  text-align: center;
5891
5889
  }
5892
5890
 
@@ -5988,8 +5986,8 @@ textarea.form-control-lg {
5988
5986
  }
5989
5987
 
5990
5988
  .navbar-collapse {
5991
- flex-basis: 100%;
5992
5989
  flex-grow: 1;
5990
+ flex-basis: 100%;
5993
5991
  align-items: center;
5994
5992
  }
5995
5993
 
@@ -6490,7 +6488,7 @@ textarea.form-control-lg {
6490
6488
  flex-flow: row wrap;
6491
6489
  }
6492
6490
  .card-group > .card {
6493
- flex: 1 0 0%;
6491
+ flex: 1 0 0;
6494
6492
  margin-bottom: 0;
6495
6493
  }
6496
6494
  .card-group > .card + .card {
@@ -6501,24 +6499,24 @@ textarea.form-control-lg {
6501
6499
  border-top-right-radius: 0;
6502
6500
  border-bottom-right-radius: 0;
6503
6501
  }
6504
- .card-group > .card:not(:last-child) .card-img-top,
6505
- .card-group > .card:not(:last-child) .card-header {
6502
+ .card-group > .card:not(:last-child) > .card-img-top,
6503
+ .card-group > .card:not(:last-child) > .card-header {
6506
6504
  border-top-right-radius: 0;
6507
6505
  }
6508
- .card-group > .card:not(:last-child) .card-img-bottom,
6509
- .card-group > .card:not(:last-child) .card-footer {
6506
+ .card-group > .card:not(:last-child) > .card-img-bottom,
6507
+ .card-group > .card:not(:last-child) > .card-footer {
6510
6508
  border-bottom-right-radius: 0;
6511
6509
  }
6512
6510
  .card-group > .card:not(:first-child) {
6513
6511
  border-top-left-radius: 0;
6514
6512
  border-bottom-left-radius: 0;
6515
6513
  }
6516
- .card-group > .card:not(:first-child) .card-img-top,
6517
- .card-group > .card:not(:first-child) .card-header {
6514
+ .card-group > .card:not(:first-child) > .card-img-top,
6515
+ .card-group > .card:not(:first-child) > .card-header {
6518
6516
  border-top-left-radius: 0;
6519
6517
  }
6520
- .card-group > .card:not(:first-child) .card-img-bottom,
6521
- .card-group > .card:not(:first-child) .card-footer {
6518
+ .card-group > .card:not(:first-child) > .card-img-bottom,
6519
+ .card-group > .card:not(:first-child) > .card-footer {
6522
6520
  border-bottom-left-radius: 0;
6523
6521
  }
6524
6522
  }
@@ -6649,10 +6647,9 @@ textarea.form-control-lg {
6649
6647
  .accordion-flush > .accordion-item:last-child {
6650
6648
  border-bottom: 0;
6651
6649
  }
6652
- .accordion-flush > .accordion-item > .accordion-header .accordion-button, .accordion-flush > .accordion-item > .accordion-header .accordion-button.collapsed {
6653
- border-radius: 0;
6654
- }
6655
- .accordion-flush > .accordion-item > .accordion-collapse {
6650
+ .accordion-flush > .accordion-item > .accordion-collapse,
6651
+ .accordion-flush > .accordion-item > .accordion-header .accordion-button,
6652
+ .accordion-flush > .accordion-item > .accordion-header .accordion-button.collapsed {
6656
6653
  border-radius: 0;
6657
6654
  }
6658
6655
 
@@ -6757,7 +6754,7 @@ textarea.form-control-lg {
6757
6754
  }
6758
6755
 
6759
6756
  .page-item:not(:first-child) .page-link {
6760
- margin-left: calc(0 * -1);
6757
+ margin-left: calc(-1 * 0);
6761
6758
  }
6762
6759
  .page-item:first-child .page-link {
6763
6760
  border-top-left-radius: var(--bs-pagination-border-radius);
@@ -6879,7 +6876,7 @@ textarea.form-control-lg {
6879
6876
 
6880
6877
  @keyframes progress-bar-stripes {
6881
6878
  0% {
6882
- background-position-x: 1rem;
6879
+ background-position-x: var(--bs-progress-height);
6883
6880
  }
6884
6881
  }
6885
6882
  .progress,
@@ -6974,22 +6971,6 @@ textarea.form-control-lg {
6974
6971
  counter-increment: section;
6975
6972
  }
6976
6973
 
6977
- .list-group-item-action {
6978
- width: 100%;
6979
- color: var(--bs-list-group-action-color);
6980
- text-align: inherit;
6981
- }
6982
- .list-group-item-action:hover, .list-group-item-action:focus {
6983
- z-index: 1;
6984
- color: var(--bs-list-group-action-hover-color);
6985
- text-decoration: none;
6986
- background-color: var(--bs-list-group-action-hover-bg);
6987
- }
6988
- .list-group-item-action:active {
6989
- color: var(--bs-list-group-action-active-color);
6990
- background-color: var(--bs-list-group-action-active-bg);
6991
- }
6992
-
6993
6974
  .list-group-item {
6994
6975
  position: relative;
6995
6976
  display: block;
@@ -7025,6 +7006,22 @@ textarea.form-control-lg {
7025
7006
  border-top-width: var(--bs-list-group-border-width);
7026
7007
  }
7027
7008
 
7009
+ .list-group-item-action {
7010
+ width: 100%;
7011
+ color: var(--bs-list-group-action-color);
7012
+ text-align: inherit;
7013
+ }
7014
+ .list-group-item-action:not(.active):hover, .list-group-item-action:not(.active):focus {
7015
+ z-index: 1;
7016
+ color: var(--bs-list-group-action-hover-color);
7017
+ text-decoration: none;
7018
+ background-color: var(--bs-list-group-action-hover-bg);
7019
+ }
7020
+ .list-group-item-action:not(.active):active {
7021
+ color: var(--bs-list-group-action-active-color);
7022
+ background-color: var(--bs-list-group-action-active-bg);
7023
+ }
7024
+
7028
7025
  .list-group-horizontal {
7029
7026
  flex-direction: row;
7030
7027
  }
@@ -7284,19 +7281,19 @@ textarea.form-control-lg {
7284
7281
 
7285
7282
  .btn-close {
7286
7283
  --bs-btn-close-color: var(--bs-black);
7287
- --bs-btn-close-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='var%28--bs-black%29'%3e%3cpath d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414z'/%3e%3c/svg%3e");
7284
+ --bs-btn-close-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='var%28--bs-black%29'%3e%3cpath d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414'/%3e%3c/svg%3e");
7288
7285
  --bs-btn-close-opacity: 1;
7289
7286
  --bs-btn-close-hover-opacity: 1;
7290
7287
  --bs-btn-close-focus-shadow: none;
7291
7288
  --bs-btn-close-focus-opacity: 1;
7292
7289
  --bs-btn-close-disabled-opacity: 0.25;
7293
- --bs-btn-close-white-filter: invert(1) grayscale(100%) brightness(200%);
7294
7290
  box-sizing: content-box;
7295
7291
  width: 1em;
7296
7292
  height: 1em;
7297
7293
  padding: 0 0;
7298
7294
  color: var(--bs-btn-close-color);
7299
7295
  background: transparent var(--bs-btn-close-bg) center/1em auto no-repeat;
7296
+ filter: var(--bs-btn-close-filter);
7300
7297
  border: 0;
7301
7298
  border-radius: 1rem;
7302
7299
  opacity: var(--bs-btn-close-opacity);
@@ -7320,7 +7317,12 @@ textarea.form-control-lg {
7320
7317
  }
7321
7318
 
7322
7319
  .btn-close-white {
7323
- filter: var(--bs-btn-close-white-filter);
7320
+ --bs-btn-close-filter: invert(1) grayscale(100%) brightness(200%);
7321
+ }
7322
+
7323
+ :root,
7324
+ [data-bs-theme=light] {
7325
+ --bs-btn-close-filter: ;
7324
7326
  }
7325
7327
 
7326
7328
  .toast {
@@ -7397,7 +7399,7 @@ textarea.form-control-lg {
7397
7399
  --bs-modal-width: 500px;
7398
7400
  --bs-modal-padding: var(--bs-ref-spacer-4);
7399
7401
  --bs-modal-margin: 0.5rem;
7400
- --bs-modal-color: ;
7402
+ --bs-modal-color: var(--bs-body-color);
7401
7403
  --bs-modal-bg: var(--bs-white);
7402
7404
  --bs-modal-border-color: transparent;
7403
7405
  --bs-modal-border-width: var(--bs-border-width);
@@ -7433,8 +7435,8 @@ textarea.form-control-lg {
7433
7435
  pointer-events: none;
7434
7436
  }
7435
7437
  .modal.fade .modal-dialog {
7436
- transition: transform 0.3s ease-out;
7437
7438
  transform: translate(0, -50px);
7439
+ transition: transform 0.3s ease-out;
7438
7440
  }
7439
7441
  @media (prefers-reduced-motion: reduce) {
7440
7442
  .modal.fade .modal-dialog {
@@ -7510,7 +7512,10 @@ textarea.form-control-lg {
7510
7512
  }
7511
7513
  .modal-header .btn-close {
7512
7514
  padding: calc(var(--bs-modal-header-padding-y) * 0.5) calc(var(--bs-modal-header-padding-x) * 0.5);
7513
- margin: calc(-0.5 * var(--bs-modal-header-padding-y)) calc(-0.5 * var(--bs-modal-header-padding-x)) calc(-0.5 * var(--bs-modal-header-padding-y)) auto;
7515
+ margin-top: calc(-0.5 * var(--bs-modal-header-padding-y));
7516
+ margin-right: calc(-0.5 * var(--bs-modal-header-padding-x));
7517
+ margin-bottom: calc(-0.5 * var(--bs-modal-header-padding-y));
7518
+ margin-left: auto;
7514
7519
  }
7515
7520
 
7516
7521
  .modal-title {
@@ -8032,6 +8037,7 @@ textarea.form-control-lg {
8032
8037
  color: var(--bs-white);
8033
8038
  text-align: center;
8034
8039
  background: none;
8040
+ filter: var(--bs-carousel-control-icon-filter);
8035
8041
  border: 0;
8036
8042
  opacity: 0.5;
8037
8043
  transition: opacity 0.15s ease;
@@ -8070,11 +8076,11 @@ textarea.form-control-lg {
8070
8076
  }
8071
8077
 
8072
8078
  .carousel-control-prev-icon {
8073
- background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='var%28--bs-white%29'%3e%3cpath d='M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z'/%3e%3c/svg%3e") /*rtl:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='var%28--bs-white%29'%3e%3cpath d='M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e")*/;
8079
+ background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='var%28--bs-white%29'%3e%3cpath d='M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0'/%3e%3c/svg%3e") /*rtl:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='var%28--bs-white%29'%3e%3cpath d='M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708'/%3e%3c/svg%3e")*/;
8074
8080
  }
8075
8081
 
8076
8082
  .carousel-control-next-icon {
8077
- background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='var%28--bs-white%29'%3e%3cpath d='M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e") /*rtl:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='var%28--bs-white%29'%3e%3cpath d='M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z'/%3e%3c/svg%3e")*/;
8083
+ background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='var%28--bs-white%29'%3e%3cpath d='M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708'/%3e%3c/svg%3e") /*rtl:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='var%28--bs-white%29'%3e%3cpath d='M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0'/%3e%3c/svg%3e")*/;
8078
8084
  }
8079
8085
 
8080
8086
  .carousel-indicators {
@@ -8100,7 +8106,7 @@ textarea.form-control-lg {
8100
8106
  margin-left: 3px;
8101
8107
  text-indent: -999px;
8102
8108
  cursor: pointer;
8103
- background-color: var(--bs-white);
8109
+ background-color: var(--bs-carousel-indicator-active-bg);
8104
8110
  background-clip: padding-box;
8105
8111
  border: 0;
8106
8112
  border-top: 10px solid transparent;
@@ -8124,19 +8130,21 @@ textarea.form-control-lg {
8124
8130
  left: 15%;
8125
8131
  padding-top: 1.25rem;
8126
8132
  padding-bottom: 1.25rem;
8127
- color: var(--bs-white);
8133
+ color: var(--bs-carousel-caption-color);
8128
8134
  text-align: center;
8129
8135
  }
8130
8136
 
8131
- .carousel-dark .carousel-control-prev-icon,
8132
- .carousel-dark .carousel-control-next-icon {
8133
- filter: invert(1) grayscale(100);
8134
- }
8135
- .carousel-dark .carousel-indicators [data-bs-target] {
8136
- background-color: var(--bs-black);
8137
+ .carousel-dark {
8138
+ --bs-carousel-indicator-active-bg: var(--bs-black);
8139
+ --bs-carousel-caption-color: var(--bs-black);
8140
+ --bs-carousel-control-icon-filter: invert(1) grayscale(100);
8137
8141
  }
8138
- .carousel-dark .carousel-caption {
8139
- color: var(--bs-black);
8142
+
8143
+ :root,
8144
+ [data-bs-theme=light] {
8145
+ --bs-carousel-indicator-active-bg: var(--bs-white);
8146
+ --bs-carousel-caption-color: var(--bs-white);
8147
+ --bs-carousel-control-icon-filter: ;
8140
8148
  }
8141
8149
 
8142
8150
  .spinner-grow,
@@ -8692,7 +8700,10 @@ textarea.form-control-lg {
8692
8700
  }
8693
8701
  .offcanvas-header .btn-close {
8694
8702
  padding: calc(var(--bs-offcanvas-padding-y) * 0.5) calc(var(--bs-offcanvas-padding-x) * 0.5);
8695
- margin: calc(-0.5 * var(--bs-offcanvas-padding-y)) calc(-0.5 * var(--bs-offcanvas-padding-x)) calc(-0.5 * var(--bs-offcanvas-padding-y)) auto;
8703
+ margin-top: calc(-0.5 * var(--bs-offcanvas-padding-y));
8704
+ margin-right: calc(-0.5 * var(--bs-offcanvas-padding-x));
8705
+ margin-bottom: calc(-0.5 * var(--bs-offcanvas-padding-y));
8706
+ margin-left: auto;
8696
8707
  }
8697
8708
 
8698
8709
  .offcanvas-title {
@@ -8935,6 +8946,25 @@ body {
8935
8946
  padding-top: var(--bs-accordion-body-padding-top);
8936
8947
  }
8937
8948
 
8949
+ .form-switch {
8950
+ --bs-form-switch-width: 2em;
8951
+ --bs-form-switch-padding-start: 2em * -1;
8952
+ --bs-form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23a7a7b4'/%3e%3c/svg%3e");
8953
+ --bs-form-switch-border-radius: 2em;
8954
+ --bs-form-switch-focus-bg-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%239191d4'/%3e%3c/svg%3e");
8955
+ --bs-form-switch-checked-bg-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23fff'/%3e%3c/svg%3e");
8956
+ }
8957
+ .form-switch .form-check-input {
8958
+ width: var(--bs-form-switch-width);
8959
+ margin-left: var(--bs-form-switch-padding-start);
8960
+ border-radius: var(--bs-form-switch-border-radius);
8961
+ }
8962
+ .form-switch .form-check-input:focus {
8963
+ --bs-form-switch-bg: var(--bs-form-switch-focus-bg-image);
8964
+ }
8965
+ .form-switch .form-check-input:checked {
8966
+ --bs-form-switch-bg: var(--bs-form-switch-checked-bg-image);
8967
+ }
8938
8968
  .form-switch .form-check-input.is-valid:not(:checked) {
8939
8969
  --bs-form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23198754'/%3e%3c/svg%3e");
8940
8970
  }
@@ -9034,6 +9064,10 @@ body {
9034
9064
  .input-group > .form-floating:not(:first-child) .form-control {
9035
9065
  padding-left: 0;
9036
9066
  }
9067
+ .input-group > .form-floating:not(:first-child) .form-select ~ label,
9068
+ .input-group > .form-floating:not(:first-child) .form-control ~ label {
9069
+ padding-left: 0;
9070
+ }
9037
9071
 
9038
9072
  .input-group > .form-floating:not(:last-child) .form-select {
9039
9073
  padding-right: 2rem;
@@ -9053,9 +9087,17 @@ body {
9053
9087
  --bs-input-disabled-border-color: var(--bs-gray-300);
9054
9088
  --bs-input-disabled-bg: var(--bs-gray-100);
9055
9089
  --bs-input-disabled-color: var(--bs-body-color);
9090
+ --bs-input-group-sm-icon-size: 1rem;
9091
+ --bs-input-group-lg-icon-size: 1.75rem;
9056
9092
  border: var(--bs-input-border-width) solid var(--bs-input-border-color);
9057
9093
  border-radius: var(--bs-input-border-radius);
9058
9094
  }
9095
+ .input-group.input-group-sm .d-icon {
9096
+ --bs-icon-component-size: var(--bs-input-group-sm-icon-size);
9097
+ }
9098
+ .input-group.input-group-lg .d-icon {
9099
+ --bs-icon-component-size: var(--bs-input-group-lg-icon-size);
9100
+ }
9059
9101
  .input-group:focus-within {
9060
9102
  border-color: var(--bs-input-focus-border-color);
9061
9103
  box-shadow: var(--bs-input-focus-box-shadow);
@@ -9067,7 +9109,7 @@ body {
9067
9109
  box-shadow: 0 0 0 0.25rem rgba(var(--bs-success-rgb), 0.25);
9068
9110
  }
9069
9111
  .input-group:has(.form-control.is-valid, .form-select.is-valid) ~ .form-text {
9070
- color: var(--bs-form-valid-border-color);
9112
+ color: var(--bs-form-valid-color);
9071
9113
  }
9072
9114
  .input-group:has(.form-control.is-valid, .form-select.is-valid) .input-group-validation-icon {
9073
9115
  --bs-icon-color: var(--bs-success);
@@ -9079,7 +9121,7 @@ body {
9079
9121
  box-shadow: 0 0 0 0.25rem rgba(var(--bs-danger-rgb), 0.25);
9080
9122
  }
9081
9123
  .input-group:has(.form-control.is-invalid, .form-select.is-invalid) ~ .form-text {
9082
- color: var(--bs-form-invalid-border-color);
9124
+ color: var(--bs-form-invalid-color);
9083
9125
  }
9084
9126
  .input-group:has(.form-control.is-invalid, .form-select.is-invalid) .input-group-validation-icon {
9085
9127
  --bs-icon-color: var(--bs-danger);
@@ -10118,6 +10160,7 @@ label .d-icon {
10118
10160
 
10119
10161
  .toast {
10120
10162
  --bs-toast-header-gap: var(--bs-ref-spacer-2);
10163
+ --bs-toast-body-gap: var(--bs-ref-spacer-2);
10121
10164
  --bs-toast-color: var(--bs-gray-900);
10122
10165
  --bs-toast-close-color: var(--bs-gray-900);
10123
10166
  --bs-toast-header-color: var(--bs-gray-900);
@@ -10131,6 +10174,7 @@ label .d-icon {
10131
10174
  }
10132
10175
  .toast .toast-body {
10133
10176
  display: flex;
10177
+ gap: var(--bs-toast-body-gap);
10134
10178
  align-items: center;
10135
10179
  justify-content: space-between;
10136
10180
  }
@@ -10326,7 +10370,6 @@ label .d-icon {
10326
10370
  .nav-pills,
10327
10371
  .nav-underline {
10328
10372
  gap: var(--bs-nav-tabs-nav-gap);
10329
- padding: var(--bs-nav-link-padding-y) var(--bs-nav-link-padding-x);
10330
10373
  }
10331
10374
  .nav-pills.flex-column,
10332
10375
  .nav-underline.flex-column {
@@ -10533,9 +10576,10 @@ label .d-icon {
10533
10576
  }
10534
10577
  .d-input-pin {
10535
10578
  --bs-input-pin-form-gap: var(--bs-ref-spacer-1);
10536
- --bs-input-pin-form-control-size: 4rem;
10537
10579
  --bs-input-pin-form-control-focus-border-color: var(--bs-focus-ring-border-color);
10538
10580
  --bs-input-pin-form-control-focus-box-shadow: 0 0 0 0.25rem var(--bs-focus-ring-color);
10581
+ --bs-input-pin-form-control-min-width: 2rem;
10582
+ --bs-input-pin-form-control-max-width: 4rem;
10539
10583
  display: flex;
10540
10584
  flex-direction: column;
10541
10585
  align-items: flex-start;
@@ -10547,13 +10591,14 @@ label .d-icon {
10547
10591
  width: 100%;
10548
10592
  }
10549
10593
  .d-input-pin .form-control {
10550
- width: var(--bs-input-pin-form-control-size);
10551
- height: var(--bs-input-pin-form-control-size);
10594
+ min-width: var(--bs-input-pin-form-control-min-width);
10595
+ max-width: var(--bs-input-pin-form-control-max-width);
10596
+ aspect-ratio: 1;
10552
10597
  text-align: center;
10553
10598
  box-shadow: none;
10554
10599
  }
10555
10600
  .d-input-pin .form-control:has(~ .input-group-text) {
10556
- padding: var(--bs-ref-spacer-3) var(--bs-ref-spacer-4);
10601
+ padding: var(--bs-ref-spacer-3) var(--bs-ref-spacer-3);
10557
10602
  }
10558
10603
  .d-input-pin .form-control::-webkit-inner-spin-button,
10559
10604
  .d-input-pin .form-control::-webkit-outer-spin-button {
@@ -10613,15 +10658,13 @@ label .d-icon {
10613
10658
  --bs-btn-sm-padding-y: var(--bs-ref-spacer-2);
10614
10659
  --bs-btn-sm-padding-x: var(--bs-ref-spacer-2);
10615
10660
  }
10616
-
10617
- .btn-lg, .btn-group-lg > .btn {
10661
+ .d-button-icon.btn-lg, .btn-group-lg > .d-button-icon.btn {
10618
10662
  --bs-btn-padding-y: var(--bs-btn-lg-padding-y);
10619
10663
  --bs-btn-padding-x: var(--bs-btn-lg-padding-x);
10620
10664
  --bs-btn-font-size: var(--bs-btn-lg-font-size);
10621
10665
  --bs-btn-border-radius: var(--bs-btn-lg-border-radius);
10622
10666
  }
10623
-
10624
- .btn-sm, .btn-group-sm > .btn {
10667
+ .d-button-icon.btn-sm, .btn-group-sm > .d-button-icon.btn {
10625
10668
  --bs-btn-padding-y: var(--bs-btn-sm-padding-y);
10626
10669
  --bs-btn-padding-x: var(--bs-btn-sm-padding-x);
10627
10670
  --bs-btn-font-size: var(--bs-btn-sm-font-size);
@@ -10703,8 +10746,8 @@ label .d-icon {
10703
10746
  }
10704
10747
  .d-quick-action-button .d-quick-action-button-text {
10705
10748
  display: flex;
10706
- flex-direction: column;
10707
10749
  flex-grow: 1;
10750
+ flex-direction: column;
10708
10751
  }
10709
10752
  .d-quick-action-button .d-quick-action-button-action-link,
10710
10753
  .d-quick-action-button .d-quick-action-button-secondary-action-link {
@@ -10818,8 +10861,8 @@ label .d-icon {
10818
10861
  }
10819
10862
  .d-quick-action-check .d-quick-action-check-detail {
10820
10863
  display: flex;
10821
- flex-direction: column;
10822
10864
  flex-grow: 1;
10865
+ flex-direction: column;
10823
10866
  }
10824
10867
  .d-quick-action-check .d-quick-action-check-line1 {
10825
10868
  font-size: var(--bs-quick-action-check-line1-font-size);
@@ -11053,139 +11096,101 @@ label .d-icon {
11053
11096
  font-weight: var(--bs-collapse-icon-text-header-font-weight);
11054
11097
  }
11055
11098
 
11056
- .react-datepicker__year-read-view--down-arrow,
11057
- .react-datepicker__month-read-view--down-arrow,
11058
- .react-datepicker__month-year-read-view--down-arrow, .react-datepicker__navigation-icon::before {
11059
- border-color: #ccc;
11060
- border-style: solid;
11061
- border-width: 3px 3px 0 0;
11062
- content: "";
11063
- display: block;
11064
- height: 9px;
11065
- position: absolute;
11066
- top: 6px;
11067
- width: 9px;
11068
- }
11069
- .react-datepicker-popper[data-placement^=top] .react-datepicker__triangle, .react-datepicker-popper[data-placement^=bottom] .react-datepicker__triangle {
11070
- margin-left: -4px;
11071
- position: absolute;
11072
- width: 0;
11073
- }
11074
- .react-datepicker-popper[data-placement^=top] .react-datepicker__triangle::before, .react-datepicker-popper[data-placement^=bottom] .react-datepicker__triangle::before, .react-datepicker-popper[data-placement^=top] .react-datepicker__triangle::after, .react-datepicker-popper[data-placement^=bottom] .react-datepicker__triangle::after {
11075
- box-sizing: content-box;
11076
- position: absolute;
11077
- border: 8px solid transparent;
11078
- height: 0;
11079
- width: 1px;
11080
- content: "";
11081
- z-index: -1;
11082
- border-width: 8px;
11083
- left: -8px;
11084
- }
11085
- .react-datepicker-popper[data-placement^=top] .react-datepicker__triangle::before, .react-datepicker-popper[data-placement^=bottom] .react-datepicker__triangle::before {
11086
- border-bottom-color: #aeaeae;
11087
- }
11088
-
11089
- .react-datepicker-popper[data-placement^=bottom] .react-datepicker__triangle {
11090
- top: 0;
11091
- margin-top: -8px;
11092
- }
11093
- .react-datepicker-popper[data-placement^=bottom] .react-datepicker__triangle::before, .react-datepicker-popper[data-placement^=bottom] .react-datepicker__triangle::after {
11094
- border-top: none;
11095
- border-bottom-color: #f0f0f0;
11096
- }
11097
- .react-datepicker-popper[data-placement^=bottom] .react-datepicker__triangle::after {
11098
- top: 0;
11099
- }
11100
- .react-datepicker-popper[data-placement^=bottom] .react-datepicker__triangle::before {
11101
- top: -1px;
11102
- border-bottom-color: #aeaeae;
11103
- }
11104
-
11105
- .react-datepicker-popper[data-placement^=top] .react-datepicker__triangle {
11106
- bottom: 0;
11107
- margin-bottom: -8px;
11108
- }
11109
- .react-datepicker-popper[data-placement^=top] .react-datepicker__triangle::before, .react-datepicker-popper[data-placement^=top] .react-datepicker__triangle::after {
11110
- border-bottom: none;
11111
- border-top-color: #fff;
11112
- }
11113
- .react-datepicker-popper[data-placement^=top] .react-datepicker__triangle::after {
11114
- bottom: 0;
11115
- }
11116
- .react-datepicker-popper[data-placement^=top] .react-datepicker__triangle::before {
11117
- bottom: -1px;
11118
- border-top-color: #aeaeae;
11119
- }
11120
-
11099
+ /* stylelint-disable */
11121
11100
  .react-datepicker-wrapper {
11122
11101
  display: inline-block;
11123
11102
  padding: 0;
11124
11103
  border: 0;
11104
+ width: 100%;
11105
+ margin-inline: auto;
11125
11106
  }
11126
11107
 
11127
11108
  .react-datepicker {
11128
- font-family: "Helvetica Neue", helvetica, arial, sans-serif;
11129
- font-size: 0.8rem;
11130
- background-color: #fff;
11131
- color: #000;
11132
- border: 1px solid #aeaeae;
11133
- border-radius: 0.3rem;
11109
+ --bs-datepicker-bg: var(--bs-white);
11110
+ --bs-datepicker-border-color: var(--bs-gray-400);
11111
+ --bs-datepicker-border: 1px solid var(--bs-gray-400);
11112
+ --bs-datepicker-border-radius: var(--bs-border-radius-sm);
11113
+ --bs-datepicker-header-bg: var(--bs-gray-100);
11114
+ --bs-datepicker-header-border-bottom: 1px solid var(--bs-gray-400);
11115
+ --bs-datepicker-header-padding: var(--bs-ref-spacer-2) 0;
11116
+ --bs-datepicker-header-font-weight: var(--bs-fw-bold);
11117
+ --bs-datepicker-day-names-color: var(--bs-body-color);
11118
+ --bs-datepicker-day-names-font-size: var(--bs-fs-small);
11119
+ --bs-datepicker-body-margin: var(--bs-ref-spacer-2);
11120
+ --bs-datepicker-body-gap: var(--bs-ref-spacer-2);
11121
+ --bs-datepicker-highlighted-color: inherit;
11122
+ --bs-datepicker-highlighted-bg: transparent;
11123
+ --bs-datepicker-highlighted-border-radius: unset;
11124
+ --bs-datepicker-holidays-color: inherit;
11125
+ --bs-datepicker-holidays-bg: transparent;
11126
+ --bs-datepicker-holidays-border-radius: unset;
11127
+ --bs-datepicker-day-border-radius: 0.25rem;
11128
+ --bs-datepicker-day-outside-month-color: var(--bs-gray-700);
11129
+ --bs-datepicker-day-bg: var(--bs-secondary);
11130
+ --bs-datepicker-day-hover-bg: var(--bs-gray-100);
11131
+ --bs-datepicker-day-width: var(--bs-ref-spacer-7);
11132
+ --bs-datepicker-day-selected-color: var(--bs-white);
11133
+ --bs-datepicker-day-selected-bg: var(--bs-secondary);
11134
+ --bs-datepicker-day-disabled-color: var(--bs-gray-400);
11135
+ --bs-datepicker-week-number-color: var(--bs-datepicker-day-disabled-color);
11136
+ --bs-datepicker-week-number-bg: var(--bs-white);
11137
+ --bs-datepicker-week-number-selected-color: var(--bs-datepicker-day-selected-color);
11138
+ --bs-datepicker-week-number-selected-bg: var(--bs-datepicker-day-selected-bg);
11139
+ --bs-datepicker-week-number-hover-bg: var(--bs-datepicker-day-hover-bg);
11140
+ --bs-datepicker-week-number-hover-color: var(--bs-body-color);
11141
+ --bs-datepicker-week-number-border-radius: 0.25rem;
11142
+ --bs-datepicker-range-start-color: var(--bs-white);
11143
+ --bs-datepicker-range-start-bg: var(--bs-secondary-600);
11144
+ --bs-datepicker-range-end-color: var(--bs-white);
11145
+ --bs-datepicker-range-end-bg: var(--bs-secondary-600);
11146
+ --bs-datepicker-in-range-bg: var(--bs-secondary-200);
11147
+ --bs-datepicker-range-color: var(--bs-body-color);
11148
+ --bs-datepicker-in-range-hover-bg: var(--bs-secondary-400);
11149
+ --bs-datepicker-in-range-disabled-color: var(--bs-secondary-300);
11150
+ --bs-datepicker-in-range-disabled-bg: var(--bs-gray-300);
11151
+ --bs-datepicker-portal-bg: rgba(var(--bs-black-rgb), 0.3);
11152
+ background-color: var(--bs-datepicker-bg);
11153
+ border: var(--bs-datepicker-border);
11154
+ border-radius: var(--bs-datepicker-border-radius);
11134
11155
  display: inline-block;
11135
11156
  position: relative;
11157
+ line-height: initial;
11158
+ overflow: hidden;
11136
11159
  }
11137
11160
 
11138
- .react-datepicker--time-only .react-datepicker__triangle {
11139
- left: 35px;
11140
- }
11141
11161
  .react-datepicker--time-only .react-datepicker__time-container {
11142
11162
  border-left: 0;
11143
11163
  }
11144
11164
  .react-datepicker--time-only .react-datepicker__time,
11145
11165
  .react-datepicker--time-only .react-datepicker__time-box {
11146
- border-bottom-left-radius: 0.3rem;
11147
- border-bottom-right-radius: 0.3rem;
11148
- }
11149
-
11150
- .react-datepicker__triangle {
11151
- position: absolute;
11152
- left: 50px;
11166
+ border-bottom-left-radius: var(--bs-datepicker-border-radius);
11167
+ border-bottom-right-radius: var(--bs-datepicker-border-radius);
11153
11168
  }
11154
11169
 
11155
11170
  .react-datepicker-popper {
11156
11171
  z-index: 1;
11172
+ line-height: 0;
11157
11173
  }
11158
- .react-datepicker-popper[data-placement^=bottom] {
11159
- padding-top: 10px;
11160
- }
11161
- .react-datepicker-popper[data-placement=bottom-end] .react-datepicker__triangle, .react-datepicker-popper[data-placement=top-end] .react-datepicker__triangle {
11162
- left: auto;
11163
- right: 50px;
11164
- }
11165
- .react-datepicker-popper[data-placement^=top] {
11166
- padding-bottom: 10px;
11167
- }
11168
- .react-datepicker-popper[data-placement^=right] {
11169
- padding-left: 8px;
11170
- }
11171
- .react-datepicker-popper[data-placement^=right] .react-datepicker__triangle {
11172
- left: auto;
11173
- right: 42px;
11174
+ .react-datepicker-popper .react-datepicker__triangle {
11175
+ --bs-datepicker-border-color: var(--bs-gray-400);
11176
+ stroke: var(--bs-datepicker-border-color);
11174
11177
  }
11175
- .react-datepicker-popper[data-placement^=left] {
11176
- padding-right: 8px;
11178
+ .react-datepicker-popper[data-placement^=bottom] .react-datepicker__triangle {
11179
+ --bs-datepicker-header-bg: var(--bs-gray-100);
11180
+ fill: var(--bs-datepicker-header-bg);
11181
+ color: var(--bs-datepicker-header-bg);
11177
11182
  }
11178
- .react-datepicker-popper[data-placement^=left] .react-datepicker__triangle {
11179
- left: 42px;
11180
- right: auto;
11183
+ .react-datepicker-popper[data-placement^=top] .react-datepicker__triangle {
11184
+ --bs-datepicker-header-bg: var(--bs-white);
11185
+ fill: var(--bs-datepicker-header-bg);
11186
+ color: var(--bs-datepicker-header-bg);
11181
11187
  }
11182
11188
 
11183
11189
  .react-datepicker__header {
11184
11190
  text-align: center;
11185
- background-color: #f0f0f0;
11186
- border-bottom: 1px solid #aeaeae;
11187
- border-top-left-radius: 0.3rem;
11188
- padding: 8px 0;
11191
+ background-color: var(--bs-datepicker-header-bg);
11192
+ border-bottom: var(--bs-datepicker-header-border-bottom);
11193
+ padding: var(--bs-datepicker-header-padding);
11189
11194
  position: relative;
11190
11195
  }
11191
11196
  .react-datepicker__header--time {
@@ -11196,97 +11201,72 @@ label .d-icon {
11196
11201
  .react-datepicker__header--time:not(.react-datepicker__header--time--only) {
11197
11202
  border-top-left-radius: 0;
11198
11203
  }
11199
- .react-datepicker__header:not(.react-datepicker__header--has-time-select) {
11200
- border-top-right-radius: 0.3rem;
11204
+ .react-datepicker__header-selector {
11205
+ display: flex;
11206
+ align-items: center;
11207
+ gap: var(--bs-ref-spacer-1);
11201
11208
  }
11202
-
11203
- .react-datepicker__year-dropdown-container--select,
11204
- .react-datepicker__month-dropdown-container--select,
11205
- .react-datepicker__month-year-dropdown-container--select,
11206
- .react-datepicker__year-dropdown-container--scroll,
11207
- .react-datepicker__month-dropdown-container--scroll,
11208
- .react-datepicker__month-year-dropdown-container--scroll {
11209
- display: inline-block;
11210
- margin: 0 15px;
11209
+ .react-datepicker__header-selector .d-select {
11210
+ --bs-select-option-selected-bg: var(--bs-datepicker-bg);
11211
+ --bs-select-option-selected-color: var(--bs-datepicker-text-color);
11211
11212
  }
11212
-
11213
- .react-datepicker__current-month,
11214
- .react-datepicker-time__header,
11215
- .react-datepicker-year-header {
11216
- margin-top: 0;
11217
- color: #000;
11218
- font-weight: bold;
11219
- font-size: 0.944rem;
11213
+ .react-datepicker__header-selector .d-select .d-select__control {
11214
+ padding: var(--bs-ref-spacer-1) var(--bs-ref-spacer-2);
11220
11215
  }
11221
-
11222
- .react-datepicker-time__header {
11223
- text-overflow: ellipsis;
11224
- white-space: nowrap;
11225
- overflow: hidden;
11216
+ .react-datepicker__header-selector .d-select .d-select__menu-list {
11217
+ border: var(--bs-datepicker-border);
11218
+ line-height: var(--bs-ref-spacer-8);
11219
+ max-height: 7lh;
11226
11220
  }
11227
-
11228
- .react-datepicker__navigation {
11229
- align-items: center;
11230
- background: none;
11231
- display: flex;
11232
- justify-content: center;
11233
- text-align: center;
11234
- cursor: pointer;
11235
- position: absolute;
11236
- top: 2px;
11237
- padding: 0;
11238
- border: none;
11239
- z-index: 1;
11240
- height: 32px;
11241
- width: 32px;
11242
- text-indent: -999em;
11243
- overflow: hidden;
11221
+ .react-datepicker__header-selector .d-select .d-select__option {
11222
+ padding: var(--bs-ref-spacer-1) var(--bs-ref-spacer-2);
11223
+ line-height: var(--bs-ref-spacer-8);
11224
+ text-align: start;
11244
11225
  }
11245
- .react-datepicker__navigation--previous {
11246
- left: 2px;
11226
+ .react-datepicker__header-selector .d-select .d-select__option--is-selected {
11227
+ font-weight: bold;
11247
11228
  }
11248
- .react-datepicker__navigation--next {
11249
- right: 2px;
11229
+ .react-datepicker__header-selector .d-select .d-select__option--is-selected:hover {
11230
+ background-color: var(--bs-datepicker-day-hover-bg);
11250
11231
  }
11251
- .react-datepicker__navigation--next--with-time:not(.react-datepicker__navigation--next--with-today-button) {
11252
- right: 85px;
11232
+ .react-datepicker__header-selector .d-select.custom-year-selector .d-select__single-value {
11233
+ width: 4ch;
11253
11234
  }
11254
- .react-datepicker__navigation--years {
11255
- position: relative;
11256
- top: 0;
11257
- display: block;
11258
- margin-left: auto;
11235
+ .react-datepicker__header-selector p {
11236
+ margin: 0;
11237
+ font-weight: bold;
11238
+ }
11239
+ .react-datepicker__header-selector .header-button:first-child {
11240
+ padding: var(--bs-ref-spacer-1);
11241
+ margin-left: var(--bs-ref-spacer-1);
11259
11242
  margin-right: auto;
11260
11243
  }
11261
- .react-datepicker__navigation--years-previous {
11262
- top: 4px;
11244
+ .react-datepicker__header-selector .header-button:last-child {
11245
+ padding: var(--bs-ref-spacer-1);
11246
+ margin-right: var(--bs-ref-spacer-1);
11247
+ margin-left: auto;
11263
11248
  }
11264
- .react-datepicker__navigation--years-upcoming {
11265
- top: -4px;
11249
+ .react-datepicker__header-day-selector {
11250
+ margin-bottom: var(--bs-ref-spacer-4);
11266
11251
  }
11267
- .react-datepicker__navigation:hover *::before {
11268
- border-color: #a6a6a6;
11252
+ .react-datepicker__header-day-selector .custom-month-selector .d-select__single-value {
11253
+ text-align: start;
11254
+ min-width: 10ch;
11269
11255
  }
11270
11256
 
11271
- .react-datepicker__navigation-icon {
11272
- position: relative;
11273
- top: -1px;
11274
- font-size: 20px;
11275
- width: 0;
11276
- }
11277
- .react-datepicker__navigation-icon--next {
11278
- left: -2px;
11279
- }
11280
- .react-datepicker__navigation-icon--next::before {
11281
- transform: rotate(45deg);
11282
- left: -7px;
11283
- }
11284
- .react-datepicker__navigation-icon--previous {
11285
- right: -2px;
11257
+ .react-datepicker__current-month,
11258
+ .react-datepicker-time__header,
11259
+ .react-datepicker-year-header {
11260
+ margin-top: 0;
11261
+ color: var(--bs-datepicker-text-color);
11262
+ font-weight: var(--bs-datepicker-header-font-weight);
11263
+ font-size: var(--bs-datepicker-font-size);
11286
11264
  }
11287
- .react-datepicker__navigation-icon--previous::before {
11288
- transform: rotate(225deg);
11289
- right: -7px;
11265
+
11266
+ .react-datepicker-time__header {
11267
+ text-overflow: ellipsis;
11268
+ white-space: nowrap;
11269
+ overflow: hidden;
11290
11270
  }
11291
11271
 
11292
11272
  .react-datepicker__month-container {
@@ -11294,218 +11274,219 @@ label .d-icon {
11294
11274
  }
11295
11275
 
11296
11276
  .react-datepicker__year {
11297
- margin: 0.4rem;
11277
+ margin: var(--bs-datepicker-body-margin);
11298
11278
  text-align: center;
11299
11279
  }
11300
11280
  .react-datepicker__year-wrapper {
11301
11281
  display: flex;
11302
11282
  flex-wrap: wrap;
11303
- max-width: 180px;
11283
+ max-width: calc(12rem + var(--bs-datepicker-body-gap) * 2);
11284
+ gap: var(--bs-datepicker-body-gap);
11304
11285
  }
11305
11286
  .react-datepicker__year .react-datepicker__year-text {
11306
11287
  display: inline-block;
11307
11288
  width: 4rem;
11308
- margin: 2px;
11309
11289
  }
11310
11290
 
11311
- .react-datepicker__month {
11312
- margin: 0.4rem;
11291
+ .react-datepicker__month,
11292
+ .react-datepicker__quarter {
11293
+ margin: var(--bs-datepicker-body-margin);
11313
11294
  text-align: center;
11295
+ display: flex;
11296
+ flex-direction: column;
11297
+ gap: var(--bs-datepicker-body-gap);
11298
+ }
11299
+ .react-datepicker__month-wrapper,
11300
+ .react-datepicker__quarter-wrapper {
11301
+ display: flex;
11302
+ flex: 1;
11303
+ gap: var(--bs-datepicker-body-gap);
11314
11304
  }
11315
11305
  .react-datepicker__month .react-datepicker__month-text,
11316
- .react-datepicker__month .react-datepicker__quarter-text {
11306
+ .react-datepicker__quarter .react-datepicker__month-text {
11317
11307
  display: inline-block;
11318
- width: 4rem;
11319
- margin: 2px;
11320
- }
11321
-
11322
- .react-datepicker__input-time-container {
11323
- clear: both;
11324
- width: 100%;
11325
- float: left;
11326
- margin: 5px 0 10px 15px;
11327
- text-align: left;
11308
+ width: 10ch;
11309
+ flex: 1;
11328
11310
  }
11329
- .react-datepicker__input-time-container .react-datepicker-time__caption {
11311
+ .react-datepicker__month .react-datepicker__quarter-text,
11312
+ .react-datepicker__quarter .react-datepicker__quarter-text {
11330
11313
  display: inline-block;
11314
+ width: 6ch;
11331
11315
  }
11332
- .react-datepicker__input-time-container .react-datepicker-time__input-container {
11316
+
11317
+ .react-datepicker__week-number {
11318
+ color: var(--bs-datepicker-week-number-color);
11333
11319
  display: inline-block;
11320
+ width: var(--bs-datepicker-day-width);
11321
+ line-height: var(--bs-datepicker-day-width);
11322
+ text-align: center;
11323
+ font-size: var(--bs-datepicker-day-names-font-size);
11334
11324
  }
11335
- .react-datepicker__input-time-container .react-datepicker-time__input-container .react-datepicker-time__input {
11336
- display: inline-block;
11337
- margin-left: 10px;
11325
+ .react-datepicker__week-number.react-datepicker__week-number--clickable {
11326
+ cursor: pointer;
11327
+ color: var(--bs-body-color);
11338
11328
  }
11339
- .react-datepicker__input-time-container .react-datepicker-time__input-container .react-datepicker-time__input input {
11340
- width: auto;
11329
+ .react-datepicker__week-number.react-datepicker__week-number--clickable.react-datepicker__week-number--selected {
11330
+ border-radius: var(--bs-datepicker-week-number-border-radius);
11331
+ background-color: var(--bs-datepicker-week-number-selected-bg);
11332
+ color: var(--bs-datepicker-week-number-selected-color);
11341
11333
  }
11342
- .react-datepicker__input-time-container .react-datepicker-time__input-container .react-datepicker-time__input input[type=time]::-webkit-inner-spin-button,
11343
- .react-datepicker__input-time-container .react-datepicker-time__input-container .react-datepicker-time__input input[type=time]::-webkit-outer-spin-button {
11344
- -webkit-appearance: none;
11345
- margin: 0;
11334
+ .react-datepicker__week-number.react-datepicker__week-number--clickable:hover {
11335
+ border-radius: var(--bs-datepicker-week-number-border-radius);
11336
+ background-color: var(--bs-datepicker-week-number-hover-bg);
11337
+ color: var(--bs-datepicker-week-number-hover-color);
11338
+ }
11339
+
11340
+ .react-datepicker__day-names {
11341
+ white-space: nowrap;
11342
+ display: inline-flex;
11343
+ gap: var(--bs-datepicker-body-gap);
11346
11344
  }
11347
- .react-datepicker__input-time-container .react-datepicker-time__input-container .react-datepicker-time__input input[type=time] {
11348
- -moz-appearance: textfield;
11345
+
11346
+ .react-datepicker__week {
11347
+ white-space: nowrap;
11348
+ display: inline-flex;
11349
+ gap: var(--bs-datepicker-body-gap);
11350
+ align-self: center;
11351
+ align-items: center;
11349
11352
  }
11350
- .react-datepicker__input-time-container .react-datepicker-time__input-container .react-datepicker-time__delimiter {
11351
- margin-left: 5px;
11353
+
11354
+ .react-datepicker__day-name,
11355
+ .react-datepicker__day,
11356
+ .react-datepicker__time-name {
11357
+ color: var(--bs-datepicker-day-names-color);
11352
11358
  display: inline-block;
11359
+ text-align: center;
11360
+ width: var(--bs-datepicker-day-width);
11361
+ line-height: var(--bs-datepicker-day-width);
11362
+ font-size: var(--bs-datepicker-day-names-font-size);
11353
11363
  }
11354
11364
 
11355
- .react-datepicker__time-container {
11356
- float: right;
11357
- border-left: 1px solid #aeaeae;
11358
- width: 85px;
11365
+ .react-datepicker__day--outside-month {
11366
+ color: var(--bs-datepicker-day-outside-month-color);
11359
11367
  }
11360
- .react-datepicker__time-container--with-today-button {
11361
- display: inline;
11362
- border: 1px solid #aeaeae;
11363
- border-radius: 0.3rem;
11364
- position: absolute;
11365
- right: -87px;
11366
- top: 0;
11368
+
11369
+ .react-datepicker__day {
11370
+ cursor: pointer;
11367
11371
  }
11368
- .react-datepicker__time-container .react-datepicker__time {
11369
- position: relative;
11370
- background: white;
11371
- border-bottom-right-radius: 0.3rem;
11372
+ .react-datepicker__day:not([aria-disabled=true], .react-datepicker__day--selected):hover {
11373
+ border-radius: var(--bs-datepicker-day-border-radius);
11374
+ background-color: var(--bs-datepicker-day-hover-bg);
11372
11375
  }
11373
- .react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box {
11374
- width: 85px;
11375
- overflow-x: hidden;
11376
- margin: 0 auto;
11377
- text-align: center;
11378
- border-bottom-right-radius: 0.3rem;
11376
+ .react-datepicker__day--today {
11377
+ font-weight: bold;
11379
11378
  }
11380
- .react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list {
11381
- list-style: none;
11382
- margin: 0;
11383
- height: calc(195px + 1.7rem / 2);
11384
- overflow-y: scroll;
11385
- padding-right: 0;
11386
- padding-left: 0;
11387
- width: 100%;
11388
- box-sizing: content-box;
11379
+ .react-datepicker__day--highlighted {
11380
+ border-radius: var(--bs-datepicker-highlighted-border-radius);
11381
+ background-color: var(--bs-datepicker-highlighted-bg);
11382
+ color: var(--bs-datepicker-highlighted-color);
11383
+ }
11384
+ .react-datepicker__day--highlighted:not([aria-disabled=true]):hover {
11385
+ background-color: var(--bs-datepicker-day-hover-bg);
11389
11386
  }
11390
- .react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item {
11391
- height: 30px;
11392
- padding: 5px 10px;
11387
+ .react-datepicker__day--holidays {
11388
+ position: relative;
11389
+ border-radius: var(--bs-datepicker-holidays-border-radius);
11390
+ background-color: var(--bs-datepicker-holidays-bg);
11391
+ color: var(--bs-datepicker-holidays-color);
11392
+ }
11393
+ .react-datepicker__day--holidays .overlay {
11394
+ position: absolute;
11395
+ bottom: 100%;
11396
+ left: 50%;
11397
+ transform: translateX(-50%);
11398
+ background-color: #333;
11399
+ color: #fff;
11400
+ padding: 4px;
11401
+ border-radius: 4px;
11393
11402
  white-space: nowrap;
11403
+ visibility: hidden;
11404
+ opacity: 0;
11405
+ transition: visibility 0s, opacity 0.3s ease-in-out;
11394
11406
  }
11395
- .react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item:hover {
11396
- cursor: pointer;
11397
- background-color: #f0f0f0;
11407
+ .react-datepicker__day--holidays:not([aria-disabled=true]):hover {
11408
+ background-color: var(--bs-datepicker-day-hover-bg);
11398
11409
  }
11399
- .react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item--selected {
11400
- background-color: #216ba5;
11401
- color: white;
11402
- font-weight: bold;
11410
+ .react-datepicker__day--holidays:hover .overlay {
11411
+ visibility: visible;
11412
+ opacity: 1;
11403
11413
  }
11404
- .react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item--selected:hover {
11405
- background-color: #216ba5;
11414
+ .react-datepicker__day--selected {
11415
+ color: var(--bs-datepicker-day-selected-color);
11416
+ background-color: var(--bs-datepicker-day-selected-bg);
11417
+ border-radius: var(--bs-datepicker-day-border-radius);
11406
11418
  }
11407
- .react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item--disabled {
11408
- color: #ccc;
11419
+ .react-datepicker__day--in-range, .react-datepicker__day--in-selecting-range {
11420
+ border-radius: var(--bs-datepicker-day-border-radius);
11421
+ background-color: var(--bs-datepicker-in-range-bg);
11422
+ color: var(--bs-datepicker-range-color);
11409
11423
  }
11410
- .react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item--disabled:hover {
11411
- cursor: default;
11412
- background-color: transparent;
11424
+ .react-datepicker__day--in-range[aria-disabled=true], .react-datepicker__day--in-selecting-range[aria-disabled=true] {
11425
+ background-color: var(--bs-datepicker-in-range-disabled-bg);
11426
+ color: var(--bs-datepicker-in-range-disabled-color);
11413
11427
  }
11414
-
11415
- .react-datepicker__week-number {
11416
- color: #ccc;
11417
- display: inline-block;
11418
- width: 1.7rem;
11419
- line-height: 1.7rem;
11420
- text-align: center;
11421
- margin: 0.166rem;
11428
+ .react-datepicker__day--in-range:not(.react-datepicker__day--range-start,
11429
+ .react-datepicker__day--range-end,
11430
+ .react-datepicker__day--disabled):hover, .react-datepicker__day--in-selecting-range:not(.react-datepicker__day--range-start,
11431
+ .react-datepicker__day--range-end,
11432
+ .react-datepicker__day--disabled):hover {
11433
+ background-color: var(--bs-datepicker-in-range-hover-bg);
11422
11434
  }
11423
- .react-datepicker__week-number.react-datepicker__week-number--clickable {
11424
- cursor: pointer;
11435
+ .react-datepicker__day--in-range:is(.react-datepicker__day--range-start, .react-datepicker__day--range-end):hover, .react-datepicker__day--in-selecting-range:is(.react-datepicker__day--range-start, .react-datepicker__day--range-end):hover {
11436
+ background-color: var(--bs-datepicker-in-range-hover-bg);
11425
11437
  }
11426
- .react-datepicker__week-number.react-datepicker__week-number--clickable:hover {
11427
- border-radius: 0.3rem;
11428
- background-color: #f0f0f0;
11438
+ .react-datepicker__day--range-start:not(.react-datepicker__day--disabled) {
11439
+ color: var(--bs-datepicker-range-start-color);
11440
+ background-color: var(--bs-datepicker-range-start-bg);
11429
11441
  }
11430
-
11431
- .react-datepicker__day-names,
11432
- .react-datepicker__week {
11433
- white-space: nowrap;
11442
+ .react-datepicker__day--range-end:not(.react-datepicker__day--disabled) {
11443
+ color: var(--bs-datepicker-range-end-color);
11444
+ background-color: var(--bs-datepicker-range-end-bg);
11434
11445
  }
11435
-
11436
- .react-datepicker__day-names {
11437
- margin-bottom: -8px;
11446
+ .react-datepicker__day--disabled {
11447
+ cursor: default;
11448
+ color: var(--bs-datepicker-day-disabled-color);
11438
11449
  }
11439
-
11440
- .react-datepicker__day-name,
11441
- .react-datepicker__day,
11442
- .react-datepicker__time-name {
11443
- color: #000;
11444
- display: inline-block;
11445
- width: 1.7rem;
11446
- line-height: 1.7rem;
11447
- text-align: center;
11448
- margin: 0.166rem;
11450
+ .react-datepicker__day--disabled .overlay {
11451
+ position: absolute;
11452
+ bottom: 70%;
11453
+ left: 50%;
11454
+ transform: translateX(-50%);
11455
+ background-color: #333;
11456
+ color: #fff;
11457
+ padding: 4px;
11458
+ border-radius: 4px;
11459
+ white-space: nowrap;
11460
+ visibility: hidden;
11461
+ opacity: 0;
11462
+ transition: visibility 0s, opacity 0.3s ease-in-out;
11449
11463
  }
11450
11464
 
11451
- .react-datepicker__day,
11452
- .react-datepicker__month-text,
11453
- .react-datepicker__quarter-text,
11454
- .react-datepicker__year-text {
11465
+ .react-datepicker__month-text {
11455
11466
  cursor: pointer;
11456
11467
  }
11457
- .react-datepicker__day:hover,
11458
- .react-datepicker__month-text:hover,
11459
- .react-datepicker__quarter-text:hover,
11460
- .react-datepicker__year-text:hover {
11461
- border-radius: 0.3rem;
11462
- background-color: #f0f0f0;
11468
+ .react-datepicker__month-text:not([aria-disabled=true], .react-datepicker__month-text--selected):hover {
11469
+ border-radius: var(--bs-datepicker-day-border-radius);
11470
+ background-color: var(--bs-datepicker-day-hover-bg);
11463
11471
  }
11464
- .react-datepicker__day--today,
11465
- .react-datepicker__month-text--today,
11466
- .react-datepicker__quarter-text--today,
11467
- .react-datepicker__year-text--today {
11472
+ .react-datepicker__month-text--today {
11468
11473
  font-weight: bold;
11469
11474
  }
11470
- .react-datepicker__day--highlighted,
11471
- .react-datepicker__month-text--highlighted,
11472
- .react-datepicker__quarter-text--highlighted,
11473
- .react-datepicker__year-text--highlighted {
11474
- border-radius: 0.3rem;
11475
- background-color: #3dcc4a;
11476
- color: #fff;
11475
+ .react-datepicker__month-text--highlighted {
11476
+ border-radius: var(--bs-datepicker-highlighted-border-radius);
11477
+ background-color: var(--bs-datepicker-highlighted-bg);
11478
+ color: var(--bs-datepicker-highlighted-color);
11477
11479
  }
11478
- .react-datepicker__day--highlighted:hover,
11479
- .react-datepicker__month-text--highlighted:hover,
11480
- .react-datepicker__quarter-text--highlighted:hover,
11481
- .react-datepicker__year-text--highlighted:hover {
11482
- background-color: #32be3f;
11483
- }
11484
- .react-datepicker__day--highlighted-custom-1,
11485
- .react-datepicker__month-text--highlighted-custom-1,
11486
- .react-datepicker__quarter-text--highlighted-custom-1,
11487
- .react-datepicker__year-text--highlighted-custom-1 {
11488
- color: magenta;
11489
- }
11490
- .react-datepicker__day--highlighted-custom-2,
11491
- .react-datepicker__month-text--highlighted-custom-2,
11492
- .react-datepicker__quarter-text--highlighted-custom-2,
11493
- .react-datepicker__year-text--highlighted-custom-2 {
11494
- color: green;
11495
- }
11496
- .react-datepicker__day--holidays,
11497
- .react-datepicker__month-text--holidays,
11498
- .react-datepicker__quarter-text--holidays,
11499
- .react-datepicker__year-text--holidays {
11480
+ .react-datepicker__month-text--highlighted:not([aria-disabled=true]):hover {
11481
+ background-color: var(--bs-datepicker-day-hover-bg);
11482
+ }
11483
+ .react-datepicker__month-text--holidays {
11500
11484
  position: relative;
11501
- border-radius: 0.3rem;
11502
- background-color: #ff6803;
11503
- color: #fff;
11485
+ border-radius: var(--bs-datepicker-holidays-border-radius);
11486
+ background-color: var(--bs-datepicker-holidays-bg);
11487
+ color: var(--bs-datepicker-holidays-color);
11504
11488
  }
11505
- .react-datepicker__day--holidays .holiday-overlay,
11506
- .react-datepicker__month-text--holidays .holiday-overlay,
11507
- .react-datepicker__quarter-text--holidays .holiday-overlay,
11508
- .react-datepicker__year-text--holidays .holiday-overlay {
11489
+ .react-datepicker__month-text--holidays .overlay {
11509
11490
  position: absolute;
11510
11491
  bottom: 100%;
11511
11492
  left: 50%;
@@ -11519,289 +11500,283 @@ label .d-icon {
11519
11500
  opacity: 0;
11520
11501
  transition: visibility 0s, opacity 0.3s ease-in-out;
11521
11502
  }
11522
- .react-datepicker__day--holidays:hover,
11523
- .react-datepicker__month-text--holidays:hover,
11524
- .react-datepicker__quarter-text--holidays:hover,
11525
- .react-datepicker__year-text--holidays:hover {
11526
- background-color: #cf5300;
11503
+ .react-datepicker__month-text--holidays:not([aria-disabled=true]):hover {
11504
+ background-color: var(--bs-datepicker-day-hover-bg);
11527
11505
  }
11528
- .react-datepicker__day--holidays:hover .holiday-overlay,
11529
- .react-datepicker__month-text--holidays:hover .holiday-overlay,
11530
- .react-datepicker__quarter-text--holidays:hover .holiday-overlay,
11531
- .react-datepicker__year-text--holidays:hover .holiday-overlay {
11506
+ .react-datepicker__month-text--holidays:hover .overlay {
11532
11507
  visibility: visible;
11533
11508
  opacity: 1;
11534
11509
  }
11535
- .react-datepicker__day--selected, .react-datepicker__day--in-selecting-range, .react-datepicker__day--in-range,
11536
- .react-datepicker__month-text--selected,
11537
- .react-datepicker__month-text--in-selecting-range,
11538
- .react-datepicker__month-text--in-range,
11539
- .react-datepicker__quarter-text--selected,
11540
- .react-datepicker__quarter-text--in-selecting-range,
11541
- .react-datepicker__quarter-text--in-range,
11542
- .react-datepicker__year-text--selected,
11543
- .react-datepicker__year-text--in-selecting-range,
11544
- .react-datepicker__year-text--in-range {
11545
- border-radius: 0.3rem;
11546
- background-color: #216ba5;
11547
- color: #fff;
11510
+ .react-datepicker__month-text--selected {
11511
+ color: var(--bs-datepicker-day-selected-color);
11512
+ background-color: var(--bs-datepicker-day-selected-bg);
11513
+ border-radius: var(--bs-datepicker-day-border-radius);
11548
11514
  }
11549
- .react-datepicker__day--selected:hover, .react-datepicker__day--in-selecting-range:hover, .react-datepicker__day--in-range:hover,
11550
- .react-datepicker__month-text--selected:hover,
11551
- .react-datepicker__month-text--in-selecting-range:hover,
11552
- .react-datepicker__month-text--in-range:hover,
11553
- .react-datepicker__quarter-text--selected:hover,
11554
- .react-datepicker__quarter-text--in-selecting-range:hover,
11555
- .react-datepicker__quarter-text--in-range:hover,
11556
- .react-datepicker__year-text--selected:hover,
11557
- .react-datepicker__year-text--in-selecting-range:hover,
11558
- .react-datepicker__year-text--in-range:hover {
11559
- background-color: #1d5d90;
11560
- }
11561
- .react-datepicker__day--keyboard-selected,
11562
- .react-datepicker__month-text--keyboard-selected,
11563
- .react-datepicker__quarter-text--keyboard-selected,
11564
- .react-datepicker__year-text--keyboard-selected {
11565
- border-radius: 0.3rem;
11566
- background-color: #bad9f1;
11567
- color: rgb(0, 0, 0);
11568
- }
11569
- .react-datepicker__day--keyboard-selected:hover,
11570
- .react-datepicker__month-text--keyboard-selected:hover,
11571
- .react-datepicker__quarter-text--keyboard-selected:hover,
11572
- .react-datepicker__year-text--keyboard-selected:hover {
11573
- background-color: #1d5d90;
11574
- }
11575
- .react-datepicker__day--in-selecting-range:not(.react-datepicker__day--in-range,
11576
- .react-datepicker__month-text--in-range,
11577
- .react-datepicker__quarter-text--in-range,
11578
- .react-datepicker__year-text--in-range),
11579
- .react-datepicker__month-text--in-selecting-range:not(.react-datepicker__day--in-range,
11580
- .react-datepicker__month-text--in-range,
11581
- .react-datepicker__quarter-text--in-range,
11582
- .react-datepicker__year-text--in-range),
11583
- .react-datepicker__quarter-text--in-selecting-range:not(.react-datepicker__day--in-range,
11584
- .react-datepicker__month-text--in-range,
11585
- .react-datepicker__quarter-text--in-range,
11586
- .react-datepicker__year-text--in-range),
11587
- .react-datepicker__year-text--in-selecting-range:not(.react-datepicker__day--in-range,
11588
- .react-datepicker__month-text--in-range,
11589
- .react-datepicker__quarter-text--in-range,
11590
- .react-datepicker__year-text--in-range) {
11591
- background-color: rgba(33, 107, 165, 0.5);
11592
- }
11593
- .react-datepicker__month--selecting-range .react-datepicker__day--in-range:not(.react-datepicker__day--in-selecting-range,
11594
- .react-datepicker__month-text--in-selecting-range,
11595
- .react-datepicker__quarter-text--in-selecting-range,
11596
- .react-datepicker__year-text--in-selecting-range), .react-datepicker__year--selecting-range .react-datepicker__day--in-range:not(.react-datepicker__day--in-selecting-range,
11597
- .react-datepicker__month-text--in-selecting-range,
11598
- .react-datepicker__quarter-text--in-selecting-range,
11599
- .react-datepicker__year-text--in-selecting-range),
11600
- .react-datepicker__month--selecting-range .react-datepicker__month-text--in-range:not(.react-datepicker__day--in-selecting-range,
11601
- .react-datepicker__month-text--in-selecting-range,
11602
- .react-datepicker__quarter-text--in-selecting-range,
11603
- .react-datepicker__year-text--in-selecting-range),
11604
- .react-datepicker__year--selecting-range .react-datepicker__month-text--in-range:not(.react-datepicker__day--in-selecting-range,
11605
- .react-datepicker__month-text--in-selecting-range,
11606
- .react-datepicker__quarter-text--in-selecting-range,
11607
- .react-datepicker__year-text--in-selecting-range),
11608
- .react-datepicker__month--selecting-range .react-datepicker__quarter-text--in-range:not(.react-datepicker__day--in-selecting-range,
11609
- .react-datepicker__month-text--in-selecting-range,
11610
- .react-datepicker__quarter-text--in-selecting-range,
11611
- .react-datepicker__year-text--in-selecting-range),
11612
- .react-datepicker__year--selecting-range .react-datepicker__quarter-text--in-range:not(.react-datepicker__day--in-selecting-range,
11613
- .react-datepicker__month-text--in-selecting-range,
11614
- .react-datepicker__quarter-text--in-selecting-range,
11615
- .react-datepicker__year-text--in-selecting-range),
11616
- .react-datepicker__month--selecting-range .react-datepicker__year-text--in-range:not(.react-datepicker__day--in-selecting-range,
11617
- .react-datepicker__month-text--in-selecting-range,
11618
- .react-datepicker__quarter-text--in-selecting-range,
11619
- .react-datepicker__year-text--in-selecting-range),
11620
- .react-datepicker__year--selecting-range .react-datepicker__year-text--in-range:not(.react-datepicker__day--in-selecting-range,
11621
- .react-datepicker__month-text--in-selecting-range,
11622
- .react-datepicker__quarter-text--in-selecting-range,
11623
- .react-datepicker__year-text--in-selecting-range) {
11624
- background-color: #f0f0f0;
11625
- color: #000;
11626
- }
11627
- .react-datepicker__day--disabled,
11628
- .react-datepicker__month-text--disabled,
11629
- .react-datepicker__quarter-text--disabled,
11630
- .react-datepicker__year-text--disabled {
11515
+ .react-datepicker__month-text--in-range, .react-datepicker__month-text--in-selecting-range {
11516
+ border-radius: var(--bs-datepicker-day-border-radius);
11517
+ background-color: var(--bs-datepicker-in-range-bg);
11518
+ color: var(--bs-datepicker-range-color);
11519
+ }
11520
+ .react-datepicker__month-text--in-range[aria-disabled=true], .react-datepicker__month-text--in-selecting-range[aria-disabled=true] {
11521
+ background-color: var(--bs-datepicker-in-range-disabled-bg);
11522
+ color: var(--bs-datepicker-in-range-disabled-color);
11523
+ }
11524
+ .react-datepicker__month-text--in-range:not(.react-datepicker__month-text--range-start,
11525
+ .react-datepicker__month-text--range-end,
11526
+ .react-datepicker__month-text--disabled):hover, .react-datepicker__month-text--in-selecting-range:not(.react-datepicker__month-text--range-start,
11527
+ .react-datepicker__month-text--range-end,
11528
+ .react-datepicker__month-text--disabled):hover {
11529
+ background-color: var(--bs-datepicker-in-range-hover-bg);
11530
+ }
11531
+ .react-datepicker__month-text--in-range:is(.react-datepicker__month-text--range-start, .react-datepicker__month-text--range-end):hover, .react-datepicker__month-text--in-selecting-range:is(.react-datepicker__month-text--range-start, .react-datepicker__month-text--range-end):hover {
11532
+ background-color: var(--bs-datepicker-in-range-hover-bg);
11533
+ }
11534
+ .react-datepicker__month-text--range-start:not(.react-datepicker__month-text--disabled) {
11535
+ color: var(--bs-datepicker-range-start-color);
11536
+ background-color: var(--bs-datepicker-range-start-bg);
11537
+ }
11538
+ .react-datepicker__month-text--range-end:not(.react-datepicker__month-text--disabled) {
11539
+ color: var(--bs-datepicker-range-end-color);
11540
+ background-color: var(--bs-datepicker-range-end-bg);
11541
+ }
11542
+ .react-datepicker__month-text--disabled {
11631
11543
  cursor: default;
11632
- color: #ccc;
11544
+ color: var(--bs-datepicker-day-disabled-color);
11633
11545
  }
11634
- .react-datepicker__day--disabled:hover,
11635
- .react-datepicker__month-text--disabled:hover,
11636
- .react-datepicker__quarter-text--disabled:hover,
11637
- .react-datepicker__year-text--disabled:hover {
11638
- background-color: transparent;
11546
+ .react-datepicker__month-text--disabled .overlay {
11547
+ position: absolute;
11548
+ bottom: 70%;
11549
+ left: 50%;
11550
+ transform: translateX(-50%);
11551
+ background-color: #333;
11552
+ color: #fff;
11553
+ padding: 4px;
11554
+ border-radius: 4px;
11555
+ white-space: nowrap;
11556
+ visibility: hidden;
11557
+ opacity: 0;
11558
+ transition: visibility 0s, opacity 0.3s ease-in-out;
11639
11559
  }
11640
11560
 
11641
- .react-datepicker__input-container {
11561
+ .react-datepicker__quarter-text {
11562
+ cursor: pointer;
11563
+ }
11564
+ .react-datepicker__quarter-text:not([aria-disabled=true], .react-datepicker__quarter-text--selected):hover {
11565
+ border-radius: var(--bs-datepicker-day-border-radius);
11566
+ background-color: var(--bs-datepicker-day-hover-bg);
11567
+ }
11568
+ .react-datepicker__quarter-text--today {
11569
+ font-weight: bold;
11570
+ }
11571
+ .react-datepicker__quarter-text--highlighted {
11572
+ border-radius: var(--bs-datepicker-highlighted-border-radius);
11573
+ background-color: var(--bs-datepicker-highlighted-bg);
11574
+ color: var(--bs-datepicker-highlighted-color);
11575
+ }
11576
+ .react-datepicker__quarter-text--highlighted:not([aria-disabled=true]):hover {
11577
+ background-color: var(--bs-datepicker-day-hover-bg);
11578
+ }
11579
+ .react-datepicker__quarter-text--holidays {
11642
11580
  position: relative;
11643
- display: inline-block;
11644
- width: 100%;
11581
+ border-radius: var(--bs-datepicker-holidays-border-radius);
11582
+ background-color: var(--bs-datepicker-holidays-bg);
11583
+ color: var(--bs-datepicker-holidays-color);
11645
11584
  }
11646
- .react-datepicker__input-container .react-datepicker__calendar-icon {
11585
+ .react-datepicker__quarter-text--holidays .overlay {
11647
11586
  position: absolute;
11648
- padding: 0.5rem;
11649
- box-sizing: content-box;
11587
+ bottom: 100%;
11588
+ left: 50%;
11589
+ transform: translateX(-50%);
11590
+ background-color: #333;
11591
+ color: #fff;
11592
+ padding: 4px;
11593
+ border-radius: 4px;
11594
+ white-space: nowrap;
11595
+ visibility: hidden;
11596
+ opacity: 0;
11597
+ transition: visibility 0s, opacity 0.3s ease-in-out;
11650
11598
  }
11651
-
11652
- .react-datepicker__view-calendar-icon input {
11653
- padding: 6px 10px 5px 25px;
11599
+ .react-datepicker__quarter-text--holidays:not([aria-disabled=true]):hover {
11600
+ background-color: var(--bs-datepicker-day-hover-bg);
11654
11601
  }
11655
-
11656
- .react-datepicker__year-read-view,
11657
- .react-datepicker__month-read-view,
11658
- .react-datepicker__month-year-read-view {
11659
- border: 1px solid transparent;
11660
- border-radius: 0.3rem;
11661
- position: relative;
11602
+ .react-datepicker__quarter-text--holidays:hover .overlay {
11603
+ visibility: visible;
11604
+ opacity: 1;
11662
11605
  }
11663
- .react-datepicker__year-read-view:hover,
11664
- .react-datepicker__month-read-view:hover,
11665
- .react-datepicker__month-year-read-view:hover {
11666
- cursor: pointer;
11606
+ .react-datepicker__quarter-text--selected {
11607
+ color: var(--bs-datepicker-day-selected-color);
11608
+ background-color: var(--bs-datepicker-day-selected-bg);
11609
+ border-radius: var(--bs-datepicker-day-border-radius);
11667
11610
  }
11668
- .react-datepicker__year-read-view:hover .react-datepicker__year-read-view--down-arrow,
11669
- .react-datepicker__year-read-view:hover .react-datepicker__month-read-view--down-arrow,
11670
- .react-datepicker__month-read-view:hover .react-datepicker__year-read-view--down-arrow,
11671
- .react-datepicker__month-read-view:hover .react-datepicker__month-read-view--down-arrow,
11672
- .react-datepicker__month-year-read-view:hover .react-datepicker__year-read-view--down-arrow,
11673
- .react-datepicker__month-year-read-view:hover .react-datepicker__month-read-view--down-arrow {
11674
- border-top-color: #b3b3b3;
11675
- }
11676
- .react-datepicker__year-read-view--down-arrow,
11677
- .react-datepicker__month-read-view--down-arrow,
11678
- .react-datepicker__month-year-read-view--down-arrow {
11679
- transform: rotate(135deg);
11680
- right: -16px;
11681
- top: 0;
11611
+ .react-datepicker__quarter-text--in-range, .react-datepicker__quarter-text--in-selecting-range {
11612
+ border-radius: var(--bs-datepicker-day-border-radius);
11613
+ background-color: var(--bs-datepicker-in-range-bg);
11614
+ color: var(--bs-datepicker-range-color);
11682
11615
  }
11683
-
11684
- .react-datepicker__year-dropdown,
11685
- .react-datepicker__month-dropdown,
11686
- .react-datepicker__month-year-dropdown {
11687
- background-color: #f0f0f0;
11688
- position: absolute;
11689
- width: 50%;
11690
- left: 25%;
11691
- top: 30px;
11692
- z-index: 1;
11693
- text-align: center;
11694
- border-radius: 0.3rem;
11695
- border: 1px solid #aeaeae;
11616
+ .react-datepicker__quarter-text--in-range[aria-disabled=true], .react-datepicker__quarter-text--in-selecting-range[aria-disabled=true] {
11617
+ background-color: var(--bs-datepicker-in-range-disabled-bg);
11618
+ color: var(--bs-datepicker-in-range-disabled-color);
11696
11619
  }
11697
- .react-datepicker__year-dropdown:hover,
11698
- .react-datepicker__month-dropdown:hover,
11699
- .react-datepicker__month-year-dropdown:hover {
11700
- cursor: pointer;
11620
+ .react-datepicker__quarter-text--in-range:not(.react-datepicker__quarter-text--range-start,
11621
+ .react-datepicker__quarter-text--range-end,
11622
+ .react-datepicker__quarter-text--disabled):hover, .react-datepicker__quarter-text--in-selecting-range:not(.react-datepicker__quarter-text--range-start,
11623
+ .react-datepicker__quarter-text--range-end,
11624
+ .react-datepicker__quarter-text--disabled):hover {
11625
+ background-color: var(--bs-datepicker-in-range-hover-bg);
11701
11626
  }
11702
- .react-datepicker__year-dropdown--scrollable,
11703
- .react-datepicker__month-dropdown--scrollable,
11704
- .react-datepicker__month-year-dropdown--scrollable {
11705
- height: 150px;
11706
- overflow-y: scroll;
11627
+ .react-datepicker__quarter-text--in-range:is(.react-datepicker__quarter-text--range-start, .react-datepicker__quarter-text--range-end):hover, .react-datepicker__quarter-text--in-selecting-range:is(.react-datepicker__quarter-text--range-start, .react-datepicker__quarter-text--range-end):hover {
11628
+ background-color: var(--bs-datepicker-in-range-hover-bg);
11707
11629
  }
11708
-
11709
- .react-datepicker__year-option,
11710
- .react-datepicker__month-option,
11711
- .react-datepicker__month-year-option {
11712
- line-height: 20px;
11713
- width: 100%;
11714
- display: block;
11715
- margin-left: auto;
11716
- margin-right: auto;
11630
+ .react-datepicker__quarter-text--range-start:not(.react-datepicker__quarter-text--disabled) {
11631
+ color: var(--bs-datepicker-range-start-color);
11632
+ background-color: var(--bs-datepicker-range-start-bg);
11717
11633
  }
11718
- .react-datepicker__year-option:first-of-type,
11719
- .react-datepicker__month-option:first-of-type,
11720
- .react-datepicker__month-year-option:first-of-type {
11721
- border-top-left-radius: 0.3rem;
11722
- border-top-right-radius: 0.3rem;
11634
+ .react-datepicker__quarter-text--range-end:not(.react-datepicker__quarter-text--disabled) {
11635
+ color: var(--bs-datepicker-range-end-color);
11636
+ background-color: var(--bs-datepicker-range-end-bg);
11723
11637
  }
11724
- .react-datepicker__year-option:last-of-type,
11725
- .react-datepicker__month-option:last-of-type,
11726
- .react-datepicker__month-year-option:last-of-type {
11727
- -webkit-user-select: none;
11728
- -moz-user-select: none;
11729
- user-select: none;
11730
- border-bottom-left-radius: 0.3rem;
11731
- border-bottom-right-radius: 0.3rem;
11732
- }
11733
- .react-datepicker__year-option:hover,
11734
- .react-datepicker__month-option:hover,
11735
- .react-datepicker__month-year-option:hover {
11736
- background-color: #ccc;
11737
- }
11738
- .react-datepicker__year-option:hover .react-datepicker__navigation--years-upcoming,
11739
- .react-datepicker__month-option:hover .react-datepicker__navigation--years-upcoming,
11740
- .react-datepicker__month-year-option:hover .react-datepicker__navigation--years-upcoming {
11741
- border-bottom-color: #b3b3b3;
11742
- }
11743
- .react-datepicker__year-option:hover .react-datepicker__navigation--years-previous,
11744
- .react-datepicker__month-option:hover .react-datepicker__navigation--years-previous,
11745
- .react-datepicker__month-year-option:hover .react-datepicker__navigation--years-previous {
11746
- border-top-color: #b3b3b3;
11747
- }
11748
- .react-datepicker__year-option--selected,
11749
- .react-datepicker__month-option--selected,
11750
- .react-datepicker__month-year-option--selected {
11751
- position: absolute;
11752
- left: 15px;
11638
+ .react-datepicker__quarter-text--disabled {
11639
+ cursor: default;
11640
+ color: var(--bs-datepicker-day-disabled-color);
11753
11641
  }
11754
-
11755
- .react-datepicker__close-icon {
11756
- cursor: pointer;
11757
- background-color: transparent;
11758
- border: 0;
11759
- outline: 0;
11760
- padding: 0 6px 0 0;
11642
+ .react-datepicker__quarter-text--disabled .overlay {
11761
11643
  position: absolute;
11762
- top: 0;
11763
- right: 0;
11764
- height: 100%;
11765
- display: table-cell;
11766
- vertical-align: middle;
11767
- }
11768
- .react-datepicker__close-icon::after {
11769
- cursor: pointer;
11770
- background-color: #216ba5;
11644
+ bottom: 70%;
11645
+ left: 50%;
11646
+ transform: translateX(-50%);
11647
+ background-color: #333;
11771
11648
  color: #fff;
11772
- border-radius: 50%;
11773
- height: 16px;
11774
- width: 16px;
11775
- padding: 2px;
11776
- font-size: 12px;
11777
- line-height: 1;
11778
- text-align: center;
11779
- display: table-cell;
11780
- vertical-align: middle;
11781
- content: "×";
11649
+ padding: 4px;
11650
+ border-radius: 4px;
11651
+ white-space: nowrap;
11652
+ visibility: hidden;
11653
+ opacity: 0;
11654
+ transition: visibility 0s, opacity 0.3s ease-in-out;
11782
11655
  }
11783
11656
 
11784
- .react-datepicker__today-button {
11785
- background: #f0f0f0;
11786
- border-top: 1px solid #aeaeae;
11657
+ .react-datepicker__year-text {
11787
11658
  cursor: pointer;
11788
- text-align: center;
11659
+ }
11660
+ .react-datepicker__year-text:not([aria-disabled=true], .react-datepicker__year-text--selected):hover {
11661
+ border-radius: var(--bs-datepicker-day-border-radius);
11662
+ background-color: var(--bs-datepicker-day-hover-bg);
11663
+ }
11664
+ .react-datepicker__year-text--today {
11789
11665
  font-weight: bold;
11790
- padding: 5px 0;
11791
- clear: left;
11666
+ }
11667
+ .react-datepicker__year-text--highlighted {
11668
+ border-radius: var(--bs-datepicker-highlighted-border-radius);
11669
+ background-color: var(--bs-datepicker-highlighted-bg);
11670
+ color: var(--bs-datepicker-highlighted-color);
11671
+ }
11672
+ .react-datepicker__year-text--highlighted:not([aria-disabled=true]):hover {
11673
+ background-color: var(--bs-datepicker-day-hover-bg);
11674
+ }
11675
+ .react-datepicker__year-text--holidays {
11676
+ position: relative;
11677
+ border-radius: var(--bs-datepicker-holidays-border-radius);
11678
+ background-color: var(--bs-datepicker-holidays-bg);
11679
+ color: var(--bs-datepicker-holidays-color);
11680
+ }
11681
+ .react-datepicker__year-text--holidays .overlay {
11682
+ position: absolute;
11683
+ bottom: 100%;
11684
+ left: 50%;
11685
+ transform: translateX(-50%);
11686
+ background-color: #333;
11687
+ color: #fff;
11688
+ padding: 4px;
11689
+ border-radius: 4px;
11690
+ white-space: nowrap;
11691
+ visibility: hidden;
11692
+ opacity: 0;
11693
+ transition: visibility 0s, opacity 0.3s ease-in-out;
11694
+ }
11695
+ .react-datepicker__year-text--holidays:not([aria-disabled=true]):hover {
11696
+ background-color: var(--bs-datepicker-day-hover-bg);
11697
+ }
11698
+ .react-datepicker__year-text--holidays:hover .overlay {
11699
+ visibility: visible;
11700
+ opacity: 1;
11701
+ }
11702
+ .react-datepicker__year-text--selected {
11703
+ color: var(--bs-datepicker-day-selected-color);
11704
+ background-color: var(--bs-datepicker-day-selected-bg);
11705
+ border-radius: var(--bs-datepicker-day-border-radius);
11706
+ }
11707
+ .react-datepicker__year-text--in-range, .react-datepicker__year-text--in-selecting-range {
11708
+ border-radius: var(--bs-datepicker-day-border-radius);
11709
+ background-color: var(--bs-datepicker-in-range-bg);
11710
+ color: var(--bs-datepicker-range-color);
11711
+ }
11712
+ .react-datepicker__year-text--in-range[aria-disabled=true], .react-datepicker__year-text--in-selecting-range[aria-disabled=true] {
11713
+ background-color: var(--bs-datepicker-in-range-disabled-bg);
11714
+ color: var(--bs-datepicker-in-range-disabled-color);
11715
+ }
11716
+ .react-datepicker__year-text--in-range:not(.react-datepicker__year-text--range-start,
11717
+ .react-datepicker__year-text--range-end,
11718
+ .react-datepicker__year-text--disabled):hover, .react-datepicker__year-text--in-selecting-range:not(.react-datepicker__year-text--range-start,
11719
+ .react-datepicker__year-text--range-end,
11720
+ .react-datepicker__year-text--disabled):hover {
11721
+ background-color: var(--bs-datepicker-in-range-hover-bg);
11722
+ }
11723
+ .react-datepicker__year-text--in-range:is(.react-datepicker__year-text--range-start, .react-datepicker__year-text--range-end):hover, .react-datepicker__year-text--in-selecting-range:is(.react-datepicker__year-text--range-start, .react-datepicker__year-text--range-end):hover {
11724
+ background-color: var(--bs-datepicker-in-range-hover-bg);
11725
+ }
11726
+ .react-datepicker__year-text--range-start:not(.react-datepicker__year-text--disabled) {
11727
+ color: var(--bs-datepicker-range-start-color);
11728
+ background-color: var(--bs-datepicker-range-start-bg);
11729
+ }
11730
+ .react-datepicker__year-text--range-end:not(.react-datepicker__year-text--disabled) {
11731
+ color: var(--bs-datepicker-range-end-color);
11732
+ background-color: var(--bs-datepicker-range-end-bg);
11733
+ }
11734
+ .react-datepicker__year-text--disabled {
11735
+ cursor: default;
11736
+ color: var(--bs-datepicker-day-disabled-color);
11737
+ }
11738
+ .react-datepicker__year-text--disabled .overlay {
11739
+ position: absolute;
11740
+ bottom: 70%;
11741
+ left: 50%;
11742
+ transform: translateX(-50%);
11743
+ background-color: #333;
11744
+ color: #fff;
11745
+ padding: 4px;
11746
+ border-radius: 4px;
11747
+ white-space: nowrap;
11748
+ visibility: hidden;
11749
+ opacity: 0;
11750
+ transition: visibility 0s, opacity 0.3s ease-in-out;
11792
11751
  }
11793
11752
 
11753
+ /* Removed following styles:
11754
+ view-calendar-icon
11755
+ year-read-view,
11756
+ month-read-view,
11757
+ month-year-read-view
11758
+ month-year-read-view
11759
+ year-dropdown,
11760
+ month-dropdown,
11761
+ month-year-dropdown
11762
+ year-option,
11763
+ month-option,
11764
+ month-year-option
11765
+ close-icon
11766
+ react-datepicker__navigation
11767
+ */
11794
11768
  .react-datepicker__portal {
11769
+ --bs-datepicker-portal-bg: rgba(var(--bs-black-rgb), 0.3);
11795
11770
  position: fixed;
11796
11771
  width: 100vw;
11797
11772
  height: 100vh;
11798
- background-color: rgba(0, 0, 0, 0.8);
11773
+ background-color: var(--bs-datepicker-portal-bg);
11799
11774
  left: 0;
11800
11775
  top: 0;
11801
11776
  justify-content: center;
11802
11777
  align-items: center;
11803
11778
  display: flex;
11804
- z-index: 2147483647;
11779
+ z-index: 1060;
11805
11780
  }
11806
11781
  .react-datepicker__portal .react-datepicker__day-name,
11807
11782
  .react-datepicker__portal .react-datepicker__day,
@@ -11817,10 +11792,6 @@ label .d-icon {
11817
11792
  line-height: 2rem;
11818
11793
  }
11819
11794
  }
11820
- .react-datepicker__portal .react-datepicker__current-month,
11821
- .react-datepicker__portal .react-datepicker-time__header {
11822
- font-size: 1.44rem;
11823
- }
11824
11795
 
11825
11796
  .react-datepicker__children-container {
11826
11797
  width: 13.8rem;
@@ -11843,260 +11814,7 @@ label .d-icon {
11843
11814
  white-space: nowrap;
11844
11815
  }
11845
11816
 
11846
- .react-datepicker__calendar-icon {
11847
- width: 1em;
11848
- height: 1em;
11849
- vertical-align: -0.125em;
11850
- }
11851
-
11852
- .react-datepicker-wrapper {
11853
- width: 100%;
11854
- margin-inline: auto;
11855
- }
11856
-
11857
- .react-datepicker {
11858
- --bs-datepicker-font-family: var(--bs-font-sans-serif);
11859
- --bs-datepicker-border: 0px;
11860
- --bs-datepicker-box-shadow: var(--bs-box-shadow);
11861
- --bs-datepicker-font-size: var(--bs-ref-spacer-4);
11862
- --bs-datepicker-header-gap: var(--bs-ref-spacer-4);
11863
- --bs-datepicker-header-padding: var(--bs-ref-spacer-4) var(--bs-ref-spacer-7);
11864
- --bs-datepicker-header-background-color: var(--bs-secondary-soft);
11865
- --bs-datepicker-header-border: 0;
11866
- --bs-datepicker-header-font-size: var(--bs-fs-6);
11867
- --bs-datepicker-header-button-padding: 0;
11868
- --bs-datepicker-header-select-padding: 0 var(--bs-ref-spacer-1);
11869
- --bs-datepicker-header-select-font-weight: var(--bs-fw-bold);
11870
- --bs-datepicker-header-select-menu-width: fit-content;
11871
- --bs-datepicker-day-names-margin: 0;
11872
- --bs-datepicker-day-names-font-size: var(--bs-ref-spacer-4);
11873
- --bs-datepicker-day-name-weight: var(--bs-fw-bold);
11874
- --bs-datepicker-day-name-margin: 0;
11875
- --bs-datepicker-day-name-padding: 0;
11876
- --bs-datepicker-day-name-size: var(--bs-ref-spacer-5);
11877
- --bs-datepicker-day-name-color: var(--bs-gray-500);
11878
- --bs-datepicker-month-gap: .875rem;
11879
- --bs-datepicker-month-padding: var(--bs-ref-spacer-4) var(--bs-ref-spacer-7) var(--bs-ref-spacer-6);
11880
- --bs-datepicker-month-margin: 0;
11881
- --bs-datepicker-month-color: var(--bs-white);
11882
- --bs-datepicker-week-gap: var(--bs-ref-spacer-8);
11883
- --bs-datepicker-day-margin: 0;
11884
- --bs-datepicker-day-font-size: var(--bs-fs-small);
11885
- --bs-datepicker-day-size: var(--bs-ref-spacer-5);
11886
- --bs-datepicker-day-padding: 0;
11887
- --bs-datepicker-day-radius: 100%;
11888
- --bs-datepicker-day-color: var(--bs-gray-900);
11889
- --bs-datepicker-day-disabled-color: var(--bs-gray-300);
11890
- --bs-datepicker-day-color-hover: var(--bs-gray-900);
11891
- --bs-datepicker-day-bg-hover: var(--bs-info-100);
11892
- --bs-datepicker-day-selected-color: var(--bs-white);
11893
- --bs-datepicker-day-selected-bg: var(--bs-secondary-500);
11894
- --bs-datepicker-day-in-range-color: var(--bs-dark);
11895
- --bs-datepicker-day-in-range-bg: var(--bs-secondary-100);
11896
- --bs-datepicker-day-outside-month-color: var(--bs-gray-400);
11897
- --bs-datepicker-day-today-font-weight: var(--bs-fw-normal);
11898
- --bs-datepicker-day-today-box-shadow: 0 0 0 2px var(--bs-secondary);
11899
- --bs-datepicker-time-container-margin: 0;
11900
- --bs-datepicker-time-container-align: center;
11901
- --bs-datepicker-time-input-width: 50%;
11902
- --bs-datepicker-time-input-margin: 0;
11903
- --bs-datepicker-time-input-align: center;
11904
- --bs-datepicker-time-input-padding: var(--bs-ref-spacer-4);
11905
- --bs-datepicker-time-input-gap: var(--bs-ref-spacer-2);
11906
- --bs-datepicker-time-input-label-weight: var(--bs-fw-bold);
11907
- --bs-datepicker-time-input-label-color: var(--bs-gray-700);
11908
- --bs-datepicker-time-input-label-size: var(--bs-fs-small);
11909
- font-family: var(--bs-datepicker-font-family);
11910
- font-size: var(--bs-datepicker-font-size);
11911
- border: var(--bs-datepicker-border);
11912
- box-shadow: var(--bs-datepicker-box-shadow);
11913
- /* Start time selector */
11914
- /* End time selector */
11915
- }
11916
- .react-datepicker .react-datepicker__header {
11917
- display: flex;
11918
- flex-direction: column;
11919
- gap: var(--bs-datepicker-header-gap);
11920
- padding: var(--bs-datepicker-header-padding);
11921
- font-size: var(--bs-datepicker-header-font-size);
11922
- background-color: var(--bs-datepicker-header-background-color);
11923
- border: var(--bs-datepicker-header-border);
11924
- }
11925
- .react-datepicker .react-datepicker__header .react-datepicker__day-names {
11926
- display: flex;
11927
- gap: var(--bs-ref-spacer-8);
11928
- margin: var(--bs-datepicker-day-names-margin);
11929
- font-size: var(--bs-datepicker-day-names-font-size);
11930
- }
11931
- .react-datepicker .react-datepicker__header .react-datepicker__day-name {
11932
- width: var(--bs-datepicker-day-name-size);
11933
- height: var(--bs-datepicker-day-name-size);
11934
- padding: var(--bs-datepicker-day-name-padding);
11935
- margin: var(--bs-datepicker-day-name-margin);
11936
- font-weight: var(--bs-datepicker-day-name-weight);
11937
- line-height: var(--bs-datepicker-day-name-size);
11938
- color: var(--bs-datepicker-day-name-color);
11939
- }
11940
- .react-datepicker.d-month-picker .react-datepicker__month-container .d-icon {
11941
- --bs-icon-component-color: var(--bs-datepicker-month-color);
11942
- }
11943
- .react-datepicker .react-datepicker__month {
11944
- display: flex;
11945
- flex-direction: column;
11946
- gap: var(--bs-datepicker-month-gap);
11947
- padding: var(--bs-datepicker-month-padding);
11948
- margin: var(--bs-datepicker-month-margin);
11949
- }
11950
- .react-datepicker .react-datepicker__week {
11951
- display: flex;
11952
- gap: var(--bs-datepicker-week-gap);
11953
- }
11954
- .react-datepicker .react-datepicker__day {
11955
- display: flex;
11956
- align-items: center;
11957
- justify-content: center;
11958
- width: var(--bs-datepicker-day-size);
11959
- height: var(--bs-datepicker-day-size);
11960
- padding: var(--bs-datepicker-day-padding);
11961
- margin: var(--bs-datepicker-day-margin);
11962
- font-size: var(--bs-datepicker-day-font-size);
11963
- line-height: var(--bs-datepicker-day-size);
11964
- color: var(--bs-datepicker-day-color);
11965
- }
11966
- .react-datepicker .react-datepicker__day.react-datepicker__day--in-range.react-datepicker__day--range-end, .react-datepicker .react-datepicker__day.react-datepicker__day--in-selecting-range.react-datepicker__day--selecting-range-end {
11967
- color: var(--bs-datepicker-day-selected-color);
11968
- background-color: var(--bs-datepicker-day-selected-bg);
11969
- box-shadow: 0 0 0 2px var(--bs-datepicker-day-selected-bg);
11970
- }
11971
- .react-datepicker .react-datepicker__day:not(.react-datepicker__day--selected,
11972
- .react-datepicker__month-text--selected,
11973
- .react-datepicker__quarter-text--selected,
11974
- .react-datepicker__year-text--selected):hover,
11975
- .react-datepicker .react-datepicker__month-text:not(.react-datepicker__day--selected,
11976
- .react-datepicker__month-text--selected,
11977
- .react-datepicker__quarter-text--selected,
11978
- .react-datepicker__year-text--selected):hover,
11979
- .react-datepicker .react-datepicker__quarter-text:not(.react-datepicker__day--selected,
11980
- .react-datepicker__month-text--selected,
11981
- .react-datepicker__quarter-text--selected,
11982
- .react-datepicker__year-text--selected):hover,
11983
- .react-datepicker .react-datepicker__year-text:not(.react-datepicker__day--selected,
11984
- .react-datepicker__month-text--selected,
11985
- .react-datepicker__quarter-text--selected,
11986
- .react-datepicker__year-text--selected):hover {
11987
- color: var(--bs-datepicker-day-color-hover);
11988
- background-color: var(--bs-datepicker-day-bg-hover);
11989
- border-radius: var(--bs-datepicker-day-radius);
11990
- box-shadow: 0 0 0 2px var(--bs-datepicker-day-bg-hover);
11991
- }
11992
- .react-datepicker .react-datepicker__day--disabled {
11993
- color: var(--bs-datepicker-day-disabled-color);
11994
- }
11995
- .react-datepicker .react-datepicker__day--selected,
11996
- .react-datepicker .react-datepicker__month--selected,
11997
- .react-datepicker .react-datepicker__quarter--selected,
11998
- .react-datepicker .react-datepicker__year--selected {
11999
- color: var(--bs-datepicker-day-selected-color);
12000
- background-color: var(--bs-datepicker-day-selected-bg);
12001
- border-radius: var(--bs-datepicker-day-radius);
12002
- box-shadow: 0 0 0 2px var(--bs-datepicker-day-selected-bg);
12003
- }
12004
- .react-datepicker .react-datepicker__day--selected.react-datepicker__day--in-range.react-datepicker__day--range-start, .react-datepicker .react-datepicker__day--selected.react-datepicker__day--in-selecting-range.react-datepicker__day--selecting-range-start {
12005
- color: var(--bs-datepicker-day-selected-color);
12006
- background-color: var(--bs-datepicker-day-selected-bg);
12007
- box-shadow: 0 0 0 2px var(--bs-datepicker-day-selected-bg);
12008
- }
12009
- .react-datepicker .react-datepicker__day--in-range,
12010
- .react-datepicker .react-datepicker__month-text--in-range,
12011
- .react-datepicker .react-datepicker__quarter-text--in-range,
12012
- .react-datepicker .react-datepicker__year-text--in-range,
12013
- .react-datepicker .react-datepicker__day--in-selecting-range,
12014
- .react-datepicker .react-datepicker__month-text--in-selecting-range,
12015
- .react-datepicker .react-datepicker__quarter-text--in-selecting-range,
12016
- .react-datepicker .react-datepicker__year-text--in-selecting-range,
12017
- .react-datepicker .react-datepicker__day--keyboard-selected,
12018
- .react-datepicker .react-datepicker__month-text--keyboard-selected,
12019
- .react-datepicker .react-datepicker__quarter-text--keyboard-selected,
12020
- .react-datepicker .react-datepicker__year-text--keyboard-selected {
12021
- color: var(--bs-datepicker-day-in-range-color);
12022
- background-color: var(--bs-datepicker-day-in-range-bg);
12023
- border-radius: var(--bs-datepicker-day-radius);
12024
- }
12025
- .react-datepicker .react-datepicker__day--outside-month {
12026
- color: var(--bs-datepicker-day-outside-month-color);
12027
- }
12028
- .react-datepicker .react-datepicker-wrapper {
12029
- margin-inline: auto;
12030
- }
12031
- .react-datepicker .react-datepicker__input-time-container {
12032
- width: 100%;
12033
- margin: var(--bs-datepicker-time-container-margin);
12034
- text-align: var(--bs-datepicker-time-container-align);
12035
- border-top: var(--bs-border-width) solid var(--bs-light);
12036
- }
12037
- .react-datepicker .react-datepicker__input-time-container .react-datepicker-time__caption {
12038
- display: none;
12039
- }
12040
- .react-datepicker .react-datepicker__input-time-container .react-datepicker-time__input-container {
12041
- width: 100%;
12042
- }
12043
- .react-datepicker .react-datepicker__input-time-container .react-datepicker-time__input-container .react-datepicker-time__input {
12044
- width: var(--bs-datepicker-time-input-width);
12045
- margin: var(--bs-datepicker-time-input-margin);
12046
- text-align: var(--bs-datepicker-time-input-align);
12047
- outline: 0;
12048
- }
12049
- .react-datepicker .react-datepicker__day--today {
12050
- font-weight: var(--bs-datepicker-day-today-font-weight);
12051
- border-radius: var(--bs-datepicker-day-radius);
12052
- box-shadow: var(--bs-datepicker-day-today-box-shadow);
12053
- }
12054
- .react-datepicker .d-datepicker-time {
12055
- gap: var(--bs-datepicker-time-input-gap);
12056
- padding: var(--bs-datepicker-time-input-padding);
12057
- }
12058
- .react-datepicker .d-datepicker-time .d-datepicker-time-label {
12059
- font-size: var(--bs-datepicker-time-input-label-size);
12060
- font-weight: var(--bs-datepicker-time-input-label-weight);
12061
- color: var(--bs-datepicker-time-input-label-color);
12062
- }
12063
- .react-datepicker .d-datepicker-header {
12064
- font-size: var(--bs-datepicker-header-font-size);
12065
- }
12066
- .react-datepicker .header-button {
12067
- --bs-btn-padding-y: var(--bs-datepicker-header-button-padding);
12068
- --bs-btn-padding-x: var(--bs-datepicker-header-button-padding);
12069
- }
12070
- .react-datepicker .header-button:hover, .react-datepicker .header-button:active {
12071
- color: inherit;
12072
- background-color: inherit;
12073
- }
12074
- .react-datepicker .header-button:focus {
12075
- --bs-btn-focus-outline-offset: 8px;
12076
- }
12077
- .react-datepicker .d-select:focus-within .input-group {
12078
- border-color: transparent;
12079
- box-shadow: none;
12080
- }
12081
- .react-datepicker .d-select .input-group {
12082
- --bs-input-border-width: 0;
12083
- }
12084
- .react-datepicker .d-select .d-select__indicators {
12085
- display: none;
12086
- }
12087
- .react-datepicker .d-select .d-select__control {
12088
- padding: var(--bs-datepicker-header-select-padding);
12089
- background-color: transparent;
12090
- }
12091
- .react-datepicker .d-select .d-select__single-value {
12092
- font-weight: var(--bs-datepicker-header-select-font-weight);
12093
- }
12094
- .react-datepicker .d-select__menu {
12095
- left: 50%;
12096
- min-width: var(--bs-datepicker-header-select-menu-width);
12097
- translate: -50%;
12098
- }
12099
-
11817
+ /* stylelint-enable */
12100
11818
  .d-datepicker-time {
12101
11819
  --bs-datepicker-time-input: 100%;
12102
11820
  --bs-datepicker-webkit-time-color: var(--bs-black);
@@ -12155,19 +11873,20 @@ label .d-icon {
12155
11873
  .d-box-file {
12156
11874
  --bs-box-file-gap: var(--bs-ref-spacer-4);
12157
11875
  --bs-box-file-bg: unset;
12158
- --bs-box-file-border: 1px dashed var(--bs-gray-700);
12159
- --bs-box-file-border-radius: var(--bs-border-radius);
11876
+ --bs-box-file-border: 1px dashed var(--bs-gray-100);
11877
+ --bs-box-file-border-radius: var(--bs-ref-spacer-1);
12160
11878
  --bs-box-file-padding: var(--bs-ref-spacer-8);
12161
11879
  --bs-box-file-content-max-width: 220px;
12162
11880
  --bs-box-file-icon-size: var(--bs-ref-spacer-14);
12163
- --bs-box-file-icon-color: var(--bs-secondary-300);
12164
- --bs-box-file-hover-border: 1px dashed var(--bs-secondary-700);
12165
- --bs-box-file-hover-bg: var(--bs-secondary-100);
12166
- --bs-box-file-selected-border: 1px dashed var(--bs-secondary-700);
11881
+ --bs-box-file-icon-color: var(--bs-primary);
11882
+ --bs-box-file-hover-border: 1px dashed var(--bs-primary-700);
11883
+ --bs-box-file-hover-bg: var(--bs-primary-25);
11884
+ --bs-box-file-selected-border: 1px dashed var(--bs-primary-700);
12167
11885
  --bs-box-file-selected-bg: var(--bs-white);
12168
- display: flex;
12169
- flex-direction: column;
12170
- gap: var(--bs-box-file-gap);
11886
+ --bs-box-file-disabled-border: 1px dashed var(--bs-gray-300);
11887
+ --bs-box-file-disabled-bg: var(--bs-gray-100);
11888
+ --bs-box-file-valid-border: 1px dashed var(--bs-success);
11889
+ --bs-box-file-invalid-border: 1px dashed var(--bs-danger);
12171
11890
  width: 100%;
12172
11891
  cursor: pointer;
12173
11892
  background: var(--bs-box-file-bg);
@@ -12182,6 +11901,17 @@ label .d-icon {
12182
11901
  background: var(--bs-box-file-selected-bg);
12183
11902
  border: var(--bs-box-file-selected-border);
12184
11903
  }
11904
+ .d-box-file.d-box-file-valid {
11905
+ border: var(--bs-box-file-valid-border);
11906
+ }
11907
+ .d-box-file.d-box-file-invalid {
11908
+ border: var(--bs-box-file-invalid-border);
11909
+ }
11910
+ .d-box-file.d-box-file-disabled {
11911
+ cursor: default;
11912
+ background: var(--bs-box-file-disabled-bg);
11913
+ border: var(--bs-box-file-disabled-border);
11914
+ }
12185
11915
  .d-box-file .d-icon {
12186
11916
  --bs-icon-size: var(--bs-box-file-icon-size);
12187
11917
  --bs-icon-color: var(--bs-box-file-icon-color);
@@ -12194,20 +11924,21 @@ label .d-icon {
12194
11924
  width: 100%;
12195
11925
  padding: var(--bs-box-file-padding);
12196
11926
  }
12197
- .d-box-file .d-box-file-dropzone:not(:last-child) {
12198
- padding-bottom: 0;
12199
- }
12200
11927
  .d-box-file .d-box-content {
12201
11928
  max-width: var(--bs-box-file-content-max-width);
12202
11929
  }
12203
- .d-box-file .d-box-files {
11930
+
11931
+ .d-box-files {
11932
+ --bs-box-file-list-gap: var(--bs-ref-spacer-4);
11933
+ --bs-box-file-list-padding: var(--bs-ref-spacer-0);
12204
11934
  display: flex;
12205
11935
  flex-direction: column;
12206
- gap: var(--bs-box-file-gap);
12207
- padding: 0 var(--bs-box-file-padding) var(--bs-box-file-padding);
11936
+ gap: var(--bs-box-file-list-gap);
11937
+ padding: var(--bs-box-file-list-padding);
12208
11938
  }
12209
- .d-box-file .d-box-files-text {
12210
- word-break: break-word;
11939
+ .d-box-files .input-group:focus-within {
11940
+ --bs-input-focus-border-color: var(--bs-gray-100);
11941
+ --bs-input-focus-box-shadow: none;
12211
11942
  }
12212
11943
 
12213
11944
  .splide__container {
@@ -12715,8 +12446,8 @@ label .d-icon {
12715
12446
  }
12716
12447
  .d-stepper-desktop.is-vertical .d-step .d-step-text-container {
12717
12448
  display: flex;
12718
- flex-direction: column;
12719
12449
  flex-grow: 1;
12450
+ flex-direction: column;
12720
12451
  align-items: flex-start;
12721
12452
  min-height: var(--bs-step-label-height);
12722
12453
  padding: var(--bs-step-vertical-label-padding);
@@ -12839,12 +12570,17 @@ label .d-icon {
12839
12570
  --bs-select-option-is-checkbox-font-weight: var(--bs-fw-normal);
12840
12571
  --bs-select-option-is-checkbox-color: var(--bs-gray-900);
12841
12572
  --bs-select-option-has-icon-icon-size: var(--bs-ref-spacer-4);
12842
- --bs-select-multi-value-padding-x: var(--bs-select-gap);
12843
- --bs-select-multi-value-padding-y: 0;
12573
+ --bs-select-multi-value-padding: 0 var(--bs-ref-spacer-1) 0 var(--bs-select-gap);
12844
12574
  --bs-select-multi-value-margin-right: var(--bs-select-gap);
12845
- --bs-select-multi-value-background: var(--bs-gray-100);
12575
+ --bs-select-multi-value-background: var(--bs-secondary-100);
12846
12576
  --bs-select-multi-value-border-radius: 0.25rem;
12847
12577
  --bs-select-multi-value-label-color: var(--bs-secondary);
12578
+ --bs-select-multi-value-remove-color: var(--bs-secondary);
12579
+ --bs-select-multi-value-remove-hover-color: var(--bs-white);
12580
+ --bs-select-multi-value-remove-hover-background: var(--bs-primary);
12581
+ --bs-select-indicator-separator-width: 1px;
12582
+ --bs-select-indicator-separator-margin: var(--bs-ref-spacer-0) var(--bs-ref-spacer-1);
12583
+ --bs-select-indicator-separator-color: var(--bs-transparent);
12848
12584
  --bs-select-indicator-width: var(--bs-ref-spacer-4);
12849
12585
  --bs-select-indicator-height: var(--bs-ref-spacer-4);
12850
12586
  }
@@ -12963,14 +12699,23 @@ label .d-icon {
12963
12699
  color: var(--bs-select-option-is-checkbox-color);
12964
12700
  }
12965
12701
  .d-select .d-select__multi-value {
12966
- padding: var(--bs-select-multi-value-padding-y) var(--bs-select-multi-value-padding-x);
12967
12702
  margin-right: var(--bs-select-multi-value-margin-right);
12968
12703
  background: var(--bs-select-multi-value-background);
12969
12704
  border-radius: var(--bs-select-multi-value-border-radius);
12970
12705
  }
12971
12706
  .d-select .d-select__multi-value__label {
12707
+ padding: var(--bs-select-multi-value-padding);
12972
12708
  color: var(--bs-select-multi-value-label-color);
12973
12709
  }
12710
+ .d-select .d-select__multi-value__remove {
12711
+ color: var(--bs-select-multi-value-remove-color);
12712
+ }
12713
+ .d-select .d-select__multi-value__remove:hover {
12714
+ color: var(--bs-select-multi-value-remove-hover-color);
12715
+ background-color: var(--bs-select-multi-value-remove-hover-background);
12716
+ border-top-right-radius: inherit;
12717
+ border-bottom-right-radius: inherit;
12718
+ }
12974
12719
  .d-select .d-select__control--has-icon,
12975
12720
  .d-select .d-select__option--has-icon {
12976
12721
  display: flex;
@@ -12990,8 +12735,16 @@ label .d-icon {
12990
12735
  width: var(--bs-select-indicator-width);
12991
12736
  height: var(--bs-select-indicator-height);
12992
12737
  }
12993
- .d-select .d-select__indicator-separator {
12994
- width: var(--bs-select-gap);
12738
+ .d-select .d-select__indicator .d-icon {
12739
+ --bs-icon-component-size: var(--bs-select-indicator-width);
12740
+ }
12741
+ .d-select .d-select__indicators .d-select__indicator-separator {
12742
+ width: var(--bs-select-indicator-separator-width);
12743
+ margin: var(--bs-select-indicator-separator-margin);
12744
+ background-color: var(--bs-select-indicator-separator-color);
12745
+ }
12746
+ .d-select .d-select__indicators .d-select__indicator-separator:not(:first-child) {
12747
+ --bs-select-indicator-separator-color: var(--bs-gray-100);
12995
12748
  }
12996
12749
  .d-select.disabled .d-select__control {
12997
12750
  background: var(--bs-input-disabled-bg);
@@ -13791,6 +13544,10 @@ label .d-icon {
13791
13544
  .visually-hidden-focusable:not(:focus):not(:focus-within):not(caption) {
13792
13545
  position: absolute !important;
13793
13546
  }
13547
+ .visually-hidden *,
13548
+ .visually-hidden-focusable:not(:focus):not(:focus-within) * {
13549
+ overflow: hidden !important;
13550
+ }
13794
13551
 
13795
13552
  .stretched-link::after {
13796
13553
  position: absolute;
@@ -13833,10 +13590,10 @@ label .d-icon {
13833
13590
 
13834
13591
  [class*=text-truncate-] {
13835
13592
  display: -webkit-box;
13836
- -webkit-line-clamp: var(--bs-text-truncate);
13837
- -webkit-box-orient: vertical;
13838
13593
  overflow: hidden;
13839
13594
  text-overflow: ellipsis;
13595
+ -webkit-line-clamp: var(--bs-text-truncate);
13596
+ -webkit-box-orient: vertical;
13840
13597
  white-space: normal;
13841
13598
  }
13842
13599