@dynamic-framework/ui-react 1.33.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 (71) 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 +724 -965
  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 +724 -965
  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 +680 -169
  14. package/dist/index.esm.js.map +1 -1
  15. package/dist/index.js +686 -165
  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/components/DQuickActionButton/DQuickActionButton.d.ts +4 -9
  39. package/dist/types/contexts/DContext.d.ts +9 -0
  40. package/dist/types/hooks/index.d.ts +2 -0
  41. package/dist/types/hooks/useMediaBreakpointUp.d.ts +6 -0
  42. package/dist/types/hooks/useMediaQuery.d.ts +1 -0
  43. package/dist/types/utils/attr-accept.d.ts +11 -0
  44. package/dist/types/utils/getCssVariable.d.ts +1 -0
  45. package/dist/types/utils/getKeyboardFocusableElements.d.ts +1 -0
  46. package/dist/types/utils/index.d.ts +2 -0
  47. package/dist/types/utils/mediaQuery.d.ts +2 -0
  48. package/jest/setup.js +14 -0
  49. package/package.json +13 -14
  50. package/src/style/abstracts/variables/_+import.scss +1 -0
  51. package/src/style/abstracts/variables/_box-file.scss +14 -7
  52. package/src/style/abstracts/variables/_cards.scss +1 -1
  53. package/src/style/abstracts/variables/_datepicker.scss +50 -0
  54. package/src/style/abstracts/variables/_forms.scss +6 -3
  55. package/src/style/base/_form-switch.scss +23 -2
  56. package/src/style/base/_input-group.scss +18 -1
  57. package/src/style/base/_nav.scss +0 -1
  58. package/src/style/base/_toast.scss +2 -0
  59. package/src/style/components/_d-box-file.scss +31 -15
  60. package/src/style/components/_d-button-icon.scss +17 -16
  61. package/src/style/components/_d-datepicker.scss +578 -243
  62. package/src/style/components/_d-input-pin.scss +8 -5
  63. package/src/style/components/_d-quick-action-button.scss +5 -3
  64. package/src/style/components/_d-quick-action-check.scss +1 -1
  65. package/src/style/components/_d-select.scss +35 -6
  66. package/src/style/components/_d-stepper-desktop.scss +1 -1
  67. package/src/style/helpers/_text-truncate.scss +2 -2
  68. package/dist/types/components/DDatePickerHeader/DDatePickerHeader.d.ts +0 -24
  69. package/dist/types/components/DDatePickerHeader/index.d.ts +0 -2
  70. package/dist/types/components/DDatePickerInput/index.d.ts +0 -2
  71. package/dist/types/components/DDatePickerTime/index.d.ts +0 -2
@@ -1,5 +1,5 @@
1
1
  /*!
2
- * dynamic-framework 1.33.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
  */
@@ -325,8 +325,8 @@ legend {
325
325
  width: 100%;
326
326
  padding: 0;
327
327
  margin-bottom: 0.5rem;
328
- font-size: calc(1.275rem + 0.3vw);
329
328
  line-height: inherit;
329
+ font-size: calc(1.275rem + 0.3vw);
330
330
  }
331
331
  @media (min-width: 1200px) {
332
332
  legend {
@@ -932,7 +932,7 @@ progress {
932
932
  }
933
933
 
934
934
  .col {
935
- flex: 1 0 0%;
935
+ flex: 1 0 0;
936
936
  }
937
937
 
938
938
  .row-cols-auto > * {
@@ -1391,7 +1391,7 @@ progress {
1391
1391
 
1392
1392
  @media (min-width: 576px) {
1393
1393
  .col-sm {
1394
- flex: 1 0 0%;
1394
+ flex: 1 0 0;
1395
1395
  }
1396
1396
  .row-cols-sm-auto > * {
1397
1397
  flex: 0 0 auto;
@@ -1760,7 +1760,7 @@ progress {
1760
1760
  }
1761
1761
  @media (min-width: 768px) {
1762
1762
  .col-md {
1763
- flex: 1 0 0%;
1763
+ flex: 1 0 0;
1764
1764
  }
1765
1765
  .row-cols-md-auto > * {
1766
1766
  flex: 0 0 auto;
@@ -2129,7 +2129,7 @@ progress {
2129
2129
  }
2130
2130
  @media (min-width: 992px) {
2131
2131
  .col-lg {
2132
- flex: 1 0 0%;
2132
+ flex: 1 0 0;
2133
2133
  }
2134
2134
  .row-cols-lg-auto > * {
2135
2135
  flex: 0 0 auto;
@@ -2498,7 +2498,7 @@ progress {
2498
2498
  }
2499
2499
  @media (min-width: 1200px) {
2500
2500
  .col-xl {
2501
- flex: 1 0 0%;
2501
+ flex: 1 0 0;
2502
2502
  }
2503
2503
  .row-cols-xl-auto > * {
2504
2504
  flex: 0 0 auto;
@@ -2867,7 +2867,7 @@ progress {
2867
2867
  }
2868
2868
  @media (min-width: 1400px) {
2869
2869
  .col-xxl {
2870
- flex: 1 0 0%;
2870
+ flex: 1 0 0;
2871
2871
  }
2872
2872
  .row-cols-xxl-auto > * {
2873
2873
  flex: 0 0 auto;
@@ -3745,7 +3745,7 @@ textarea.form-control-lg {
3745
3745
  background-image: var(--bs-form-select-bg-img), var(--bs-form-select-bg-icon, none);
3746
3746
  background-repeat: no-repeat;
3747
3747
  background-position: right 1rem center;
3748
- background-size: 24px;
3748
+ background-size: 16px;
3749
3749
  border: var(--bs-border-width) solid var(--bs-border-color);
3750
3750
  border-radius: var(--bs-border-radius-sm);
3751
3751
  box-shadow: none;
@@ -4030,9 +4030,11 @@ textarea.form-control-lg {
4030
4030
  top: 0;
4031
4031
  left: 0;
4032
4032
  z-index: 2;
4033
+ max-width: 100%;
4033
4034
  height: 100%;
4034
4035
  padding: 1rem 1rem;
4035
4036
  overflow: hidden;
4037
+ color: rgba(var(--bs-body-color-rgb), 0.65);
4036
4038
  text-align: start;
4037
4039
  text-overflow: ellipsis;
4038
4040
  white-space: nowrap;
@@ -4057,7 +4059,7 @@ textarea.form-control-lg {
4057
4059
  .form-floating > .form-control-plaintext::placeholder {
4058
4060
  color: transparent;
4059
4061
  }
4060
- .form-floating > .form-control:not(:-moz-placeholder-shown), .form-floating > .form-control-plaintext:not(:-moz-placeholder-shown) {
4062
+ .form-floating > .form-control:not(:-moz-placeholder), .form-floating > .form-control-plaintext:not(:-moz-placeholder) {
4061
4063
  padding-top: 1.625rem;
4062
4064
  padding-bottom: 0.625rem;
4063
4065
  }
@@ -4075,19 +4077,21 @@ textarea.form-control-lg {
4075
4077
  .form-floating > .form-select {
4076
4078
  padding-top: 1.625rem;
4077
4079
  padding-bottom: 0.625rem;
4080
+ padding-left: 1rem;
4078
4081
  }
4079
- .form-floating > .form-control:not(:-moz-placeholder-shown) ~ label {
4080
- color: rgba(var(--bs-body-color-rgb), 0.65);
4082
+ .form-floating > .form-control:not(:-moz-placeholder) ~ label {
4081
4083
  transform: scale(0.85) translateY(-0.5rem) translateX(0.15rem);
4082
4084
  }
4083
4085
  .form-floating > .form-control:focus ~ label,
4084
4086
  .form-floating > .form-control:not(:placeholder-shown) ~ label,
4085
4087
  .form-floating > .form-control-plaintext ~ label,
4086
4088
  .form-floating > .form-select ~ label {
4087
- color: rgba(var(--bs-body-color-rgb), 0.65);
4088
4089
  transform: scale(0.85) translateY(-0.5rem) translateX(0.15rem);
4089
4090
  }
4090
- .form-floating > .form-control:not(:-moz-placeholder-shown) ~ label::after {
4091
+ .form-floating > .form-control:-webkit-autofill ~ label {
4092
+ transform: scale(0.85) translateY(-0.5rem) translateX(0.15rem);
4093
+ }
4094
+ .form-floating > textarea:not(:-moz-placeholder) ~ label::after {
4091
4095
  position: absolute;
4092
4096
  inset: 1rem 0.5rem;
4093
4097
  z-index: -1;
@@ -4096,10 +4100,8 @@ textarea.form-control-lg {
4096
4100
  background-color: var(--bs-white);
4097
4101
  border-radius: var(--bs-border-radius-sm);
4098
4102
  }
4099
- .form-floating > .form-control:focus ~ label::after,
4100
- .form-floating > .form-control:not(:placeholder-shown) ~ label::after,
4101
- .form-floating > .form-control-plaintext ~ label::after,
4102
- .form-floating > .form-select ~ label::after {
4103
+ .form-floating > textarea:focus ~ label::after,
4104
+ .form-floating > textarea:not(:placeholder-shown) ~ label::after {
4103
4105
  position: absolute;
4104
4106
  inset: 1rem 0.5rem;
4105
4107
  z-index: -1;
@@ -4108,9 +4110,8 @@ textarea.form-control-lg {
4108
4110
  background-color: var(--bs-white);
4109
4111
  border-radius: var(--bs-border-radius-sm);
4110
4112
  }
4111
- .form-floating > .form-control:-webkit-autofill ~ label {
4112
- color: rgba(var(--bs-body-color-rgb), 0.65);
4113
- transform: scale(0.85) translateY(-0.5rem) translateX(0.15rem);
4113
+ .form-floating > textarea:disabled ~ label::after {
4114
+ background-color: var(--bs-gray-100);
4114
4115
  }
4115
4116
  .form-floating > .form-control-plaintext ~ label {
4116
4117
  border-width: var(--bs-border-width) 0;
@@ -4119,10 +4120,6 @@ textarea.form-control-lg {
4119
4120
  .form-floating > .form-control:disabled ~ label {
4120
4121
  color: var(--bs-gray-600);
4121
4122
  }
4122
- .form-floating > :disabled ~ label::after,
4123
- .form-floating > .form-control:disabled ~ label::after {
4124
- background-color: var(--bs-gray-100);
4125
- }
4126
4123
 
4127
4124
  .input-group {
4128
4125
  position: relative;
@@ -4205,7 +4202,7 @@ textarea.form-control-lg {
4205
4202
  border-bottom-right-radius: 0;
4206
4203
  }
4207
4204
  .input-group > :not(:first-child):not(.dropdown-menu):not(.valid-tooltip):not(.valid-feedback):not(.invalid-tooltip):not(.invalid-feedback) {
4208
- margin-left: calc(var(--bs-border-width) * -1);
4205
+ margin-left: calc(-1 * var(--bs-border-width));
4209
4206
  border-top-left-radius: 0;
4210
4207
  border-bottom-left-radius: 0;
4211
4208
  }
@@ -4269,7 +4266,7 @@ textarea.form-control-lg {
4269
4266
  --bs-form-select-bg-icon: var(--bs-form-feedback-icon-valid);
4270
4267
  padding-right: 5.5rem;
4271
4268
  background-position: right 1rem center, center right 3rem;
4272
- background-size: 24px, calc(0.75em + 0.75rem) calc(0.75em + 0.75rem);
4269
+ background-size: 16px, calc(0.75em + 0.75rem) calc(0.75em + 0.75rem);
4273
4270
  }
4274
4271
  .was-validated .form-select:valid:focus, .form-select.is-valid:focus {
4275
4272
  border-color: var(--bs-form-valid-border-color);
@@ -4359,7 +4356,7 @@ textarea.form-control-lg {
4359
4356
  --bs-form-select-bg-icon: var(--bs-form-feedback-icon-invalid);
4360
4357
  padding-right: 5.5rem;
4361
4358
  background-position: right 1rem center, center right 3rem;
4362
- background-size: 24px, calc(0.75em + 0.75rem) calc(0.75em + 0.75rem);
4359
+ background-size: 16px, calc(0.75em + 0.75rem) calc(0.75em + 0.75rem);
4363
4360
  }
4364
4361
  .was-validated .form-select:invalid:focus, .form-select.is-invalid:focus {
4365
4362
  border-color: var(--bs-form-invalid-border-color);
@@ -4753,7 +4750,7 @@ textarea.form-control-lg {
4753
4750
  }
4754
4751
  .btn-group > :not(.btn-check:first-child) + .btn,
4755
4752
  .btn-group > .btn-group:not(:first-child) {
4756
- margin-left: calc(var(--bs-border-width) * -1);
4753
+ margin-left: calc(-1 * var(--bs-border-width));
4757
4754
  }
4758
4755
  .btn-group > .btn:not(:last-child):not(.dropdown-toggle),
4759
4756
  .btn-group > .btn.dropdown-toggle-split:first-child,
@@ -4807,14 +4804,15 @@ textarea.form-control-lg {
4807
4804
  }
4808
4805
  .btn-group-vertical > .btn:not(:first-child),
4809
4806
  .btn-group-vertical > .btn-group:not(:first-child) {
4810
- margin-top: calc(var(--bs-border-width) * -1);
4807
+ margin-top: calc(-1 * var(--bs-border-width));
4811
4808
  }
4812
4809
  .btn-group-vertical > .btn:not(:last-child):not(.dropdown-toggle),
4813
4810
  .btn-group-vertical > .btn-group:not(:last-child) > .btn {
4814
4811
  border-bottom-right-radius: 0;
4815
4812
  border-bottom-left-radius: 0;
4816
4813
  }
4817
- .btn-group-vertical > .btn ~ .btn,
4814
+ .btn-group-vertical > .btn:nth-child(n+3),
4815
+ .btn-group-vertical > :not(.btn-check) + .btn,
4818
4816
  .btn-group-vertical > .btn-group:not(:first-child) > .btn {
4819
4817
  border-top-left-radius: 0;
4820
4818
  border-top-right-radius: 0;
@@ -4939,8 +4937,8 @@ textarea.form-control-lg {
4939
4937
 
4940
4938
  .nav-justified > .nav-link,
4941
4939
  .nav-justified .nav-item {
4942
- flex-basis: 0;
4943
4940
  flex-grow: 1;
4941
+ flex-basis: 0;
4944
4942
  text-align: center;
4945
4943
  }
4946
4944
 
@@ -5042,8 +5040,8 @@ textarea.form-control-lg {
5042
5040
  }
5043
5041
 
5044
5042
  .navbar-collapse {
5045
- flex-basis: 100%;
5046
5043
  flex-grow: 1;
5044
+ flex-basis: 100%;
5047
5045
  align-items: center;
5048
5046
  }
5049
5047
 
@@ -5544,7 +5542,7 @@ textarea.form-control-lg {
5544
5542
  flex-flow: row wrap;
5545
5543
  }
5546
5544
  .card-group > .card {
5547
- flex: 1 0 0%;
5545
+ flex: 1 0 0;
5548
5546
  margin-bottom: 0;
5549
5547
  }
5550
5548
  .card-group > .card + .card {
@@ -5555,24 +5553,24 @@ textarea.form-control-lg {
5555
5553
  border-top-right-radius: 0;
5556
5554
  border-bottom-right-radius: 0;
5557
5555
  }
5558
- .card-group > .card:not(:last-child) .card-img-top,
5559
- .card-group > .card:not(:last-child) .card-header {
5556
+ .card-group > .card:not(:last-child) > .card-img-top,
5557
+ .card-group > .card:not(:last-child) > .card-header {
5560
5558
  border-top-right-radius: 0;
5561
5559
  }
5562
- .card-group > .card:not(:last-child) .card-img-bottom,
5563
- .card-group > .card:not(:last-child) .card-footer {
5560
+ .card-group > .card:not(:last-child) > .card-img-bottom,
5561
+ .card-group > .card:not(:last-child) > .card-footer {
5564
5562
  border-bottom-right-radius: 0;
5565
5563
  }
5566
5564
  .card-group > .card:not(:first-child) {
5567
5565
  border-top-left-radius: 0;
5568
5566
  border-bottom-left-radius: 0;
5569
5567
  }
5570
- .card-group > .card:not(:first-child) .card-img-top,
5571
- .card-group > .card:not(:first-child) .card-header {
5568
+ .card-group > .card:not(:first-child) > .card-img-top,
5569
+ .card-group > .card:not(:first-child) > .card-header {
5572
5570
  border-top-left-radius: 0;
5573
5571
  }
5574
- .card-group > .card:not(:first-child) .card-img-bottom,
5575
- .card-group > .card:not(:first-child) .card-footer {
5572
+ .card-group > .card:not(:first-child) > .card-img-bottom,
5573
+ .card-group > .card:not(:first-child) > .card-footer {
5576
5574
  border-bottom-left-radius: 0;
5577
5575
  }
5578
5576
  }
@@ -5703,10 +5701,9 @@ textarea.form-control-lg {
5703
5701
  .accordion-flush > .accordion-item:last-child {
5704
5702
  border-bottom: 0;
5705
5703
  }
5706
- .accordion-flush > .accordion-item > .accordion-header .accordion-button, .accordion-flush > .accordion-item > .accordion-header .accordion-button.collapsed {
5707
- border-radius: 0;
5708
- }
5709
- .accordion-flush > .accordion-item > .accordion-collapse {
5704
+ .accordion-flush > .accordion-item > .accordion-collapse,
5705
+ .accordion-flush > .accordion-item > .accordion-header .accordion-button,
5706
+ .accordion-flush > .accordion-item > .accordion-header .accordion-button.collapsed {
5710
5707
  border-radius: 0;
5711
5708
  }
5712
5709
 
@@ -5811,7 +5808,7 @@ textarea.form-control-lg {
5811
5808
  }
5812
5809
 
5813
5810
  .page-item:not(:first-child) .page-link {
5814
- margin-left: calc(0 * -1);
5811
+ margin-left: calc(-1 * 0);
5815
5812
  }
5816
5813
  .page-item:first-child .page-link {
5817
5814
  border-top-left-radius: var(--bs-pagination-border-radius);
@@ -5933,7 +5930,7 @@ textarea.form-control-lg {
5933
5930
 
5934
5931
  @keyframes progress-bar-stripes {
5935
5932
  0% {
5936
- background-position-x: 1rem;
5933
+ background-position-x: var(--bs-progress-height);
5937
5934
  }
5938
5935
  }
5939
5936
  .progress,
@@ -6028,22 +6025,6 @@ textarea.form-control-lg {
6028
6025
  counter-increment: section;
6029
6026
  }
6030
6027
 
6031
- .list-group-item-action {
6032
- width: 100%;
6033
- color: var(--bs-list-group-action-color);
6034
- text-align: inherit;
6035
- }
6036
- .list-group-item-action:hover, .list-group-item-action:focus {
6037
- z-index: 1;
6038
- color: var(--bs-list-group-action-hover-color);
6039
- text-decoration: none;
6040
- background-color: var(--bs-list-group-action-hover-bg);
6041
- }
6042
- .list-group-item-action:active {
6043
- color: var(--bs-list-group-action-active-color);
6044
- background-color: var(--bs-list-group-action-active-bg);
6045
- }
6046
-
6047
6028
  .list-group-item {
6048
6029
  position: relative;
6049
6030
  display: block;
@@ -6079,6 +6060,22 @@ textarea.form-control-lg {
6079
6060
  border-top-width: var(--bs-list-group-border-width);
6080
6061
  }
6081
6062
 
6063
+ .list-group-item-action {
6064
+ width: 100%;
6065
+ color: var(--bs-list-group-action-color);
6066
+ text-align: inherit;
6067
+ }
6068
+ .list-group-item-action:not(.active):hover, .list-group-item-action:not(.active):focus {
6069
+ z-index: 1;
6070
+ color: var(--bs-list-group-action-hover-color);
6071
+ text-decoration: none;
6072
+ background-color: var(--bs-list-group-action-hover-bg);
6073
+ }
6074
+ .list-group-item-action:not(.active):active {
6075
+ color: var(--bs-list-group-action-active-color);
6076
+ background-color: var(--bs-list-group-action-active-bg);
6077
+ }
6078
+
6082
6079
  .list-group-horizontal {
6083
6080
  flex-direction: row;
6084
6081
  }
@@ -6338,19 +6335,19 @@ textarea.form-control-lg {
6338
6335
 
6339
6336
  .btn-close {
6340
6337
  --bs-btn-close-color: var(--bs-black);
6341
- --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");
6338
+ --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");
6342
6339
  --bs-btn-close-opacity: 1;
6343
6340
  --bs-btn-close-hover-opacity: 1;
6344
6341
  --bs-btn-close-focus-shadow: none;
6345
6342
  --bs-btn-close-focus-opacity: 1;
6346
6343
  --bs-btn-close-disabled-opacity: 0.25;
6347
- --bs-btn-close-white-filter: invert(1) grayscale(100%) brightness(200%);
6348
6344
  box-sizing: content-box;
6349
6345
  width: 1em;
6350
6346
  height: 1em;
6351
6347
  padding: 0 0;
6352
6348
  color: var(--bs-btn-close-color);
6353
6349
  background: transparent var(--bs-btn-close-bg) center/1em auto no-repeat;
6350
+ filter: var(--bs-btn-close-filter);
6354
6351
  border: 0;
6355
6352
  border-radius: 1rem;
6356
6353
  opacity: var(--bs-btn-close-opacity);
@@ -6374,7 +6371,12 @@ textarea.form-control-lg {
6374
6371
  }
6375
6372
 
6376
6373
  .btn-close-white {
6377
- filter: var(--bs-btn-close-white-filter);
6374
+ --bs-btn-close-filter: invert(1) grayscale(100%) brightness(200%);
6375
+ }
6376
+
6377
+ :root,
6378
+ [data-bs-theme=light] {
6379
+ --bs-btn-close-filter: ;
6378
6380
  }
6379
6381
 
6380
6382
  .toast {
@@ -6451,7 +6453,7 @@ textarea.form-control-lg {
6451
6453
  --bs-modal-width: 500px;
6452
6454
  --bs-modal-padding: var(--bs-ref-spacer-4);
6453
6455
  --bs-modal-margin: 0.5rem;
6454
- --bs-modal-color: ;
6456
+ --bs-modal-color: var(--bs-body-color);
6455
6457
  --bs-modal-bg: var(--bs-white);
6456
6458
  --bs-modal-border-color: transparent;
6457
6459
  --bs-modal-border-width: var(--bs-border-width);
@@ -6487,8 +6489,8 @@ textarea.form-control-lg {
6487
6489
  pointer-events: none;
6488
6490
  }
6489
6491
  .modal.fade .modal-dialog {
6490
- transition: transform 0.3s ease-out;
6491
6492
  transform: translate(0, -50px);
6493
+ transition: transform 0.3s ease-out;
6492
6494
  }
6493
6495
  @media (prefers-reduced-motion: reduce) {
6494
6496
  .modal.fade .modal-dialog {
@@ -6564,7 +6566,10 @@ textarea.form-control-lg {
6564
6566
  }
6565
6567
  .modal-header .btn-close {
6566
6568
  padding: calc(var(--bs-modal-header-padding-y) * 0.5) calc(var(--bs-modal-header-padding-x) * 0.5);
6567
- 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;
6569
+ margin-top: calc(-0.5 * var(--bs-modal-header-padding-y));
6570
+ margin-right: calc(-0.5 * var(--bs-modal-header-padding-x));
6571
+ margin-bottom: calc(-0.5 * var(--bs-modal-header-padding-y));
6572
+ margin-left: auto;
6568
6573
  }
6569
6574
 
6570
6575
  .modal-title {
@@ -7086,6 +7091,7 @@ textarea.form-control-lg {
7086
7091
  color: var(--bs-white);
7087
7092
  text-align: center;
7088
7093
  background: none;
7094
+ filter: var(--bs-carousel-control-icon-filter);
7089
7095
  border: 0;
7090
7096
  opacity: 0.5;
7091
7097
  transition: opacity 0.15s ease;
@@ -7124,11 +7130,11 @@ textarea.form-control-lg {
7124
7130
  }
7125
7131
 
7126
7132
  .carousel-control-prev-icon {
7127
- 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")*/;
7133
+ 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")*/;
7128
7134
  }
7129
7135
 
7130
7136
  .carousel-control-next-icon {
7131
- 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")*/;
7137
+ 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")*/;
7132
7138
  }
7133
7139
 
7134
7140
  .carousel-indicators {
@@ -7154,7 +7160,7 @@ textarea.form-control-lg {
7154
7160
  margin-left: 3px;
7155
7161
  text-indent: -999px;
7156
7162
  cursor: pointer;
7157
- background-color: var(--bs-white);
7163
+ background-color: var(--bs-carousel-indicator-active-bg);
7158
7164
  background-clip: padding-box;
7159
7165
  border: 0;
7160
7166
  border-top: 10px solid transparent;
@@ -7178,19 +7184,21 @@ textarea.form-control-lg {
7178
7184
  left: 15%;
7179
7185
  padding-top: 1.25rem;
7180
7186
  padding-bottom: 1.25rem;
7181
- color: var(--bs-white);
7187
+ color: var(--bs-carousel-caption-color);
7182
7188
  text-align: center;
7183
7189
  }
7184
7190
 
7185
- .carousel-dark .carousel-control-prev-icon,
7186
- .carousel-dark .carousel-control-next-icon {
7187
- filter: invert(1) grayscale(100);
7188
- }
7189
- .carousel-dark .carousel-indicators [data-bs-target] {
7190
- background-color: var(--bs-black);
7191
+ .carousel-dark {
7192
+ --bs-carousel-indicator-active-bg: var(--bs-black);
7193
+ --bs-carousel-caption-color: var(--bs-black);
7194
+ --bs-carousel-control-icon-filter: invert(1) grayscale(100);
7191
7195
  }
7192
- .carousel-dark .carousel-caption {
7193
- color: var(--bs-black);
7196
+
7197
+ :root,
7198
+ [data-bs-theme=light] {
7199
+ --bs-carousel-indicator-active-bg: var(--bs-white);
7200
+ --bs-carousel-caption-color: var(--bs-white);
7201
+ --bs-carousel-control-icon-filter: ;
7194
7202
  }
7195
7203
 
7196
7204
  .spinner-grow,
@@ -7746,7 +7754,10 @@ textarea.form-control-lg {
7746
7754
  }
7747
7755
  .offcanvas-header .btn-close {
7748
7756
  padding: calc(var(--bs-offcanvas-padding-y) * 0.5) calc(var(--bs-offcanvas-padding-x) * 0.5);
7749
- 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;
7757
+ margin-top: calc(-0.5 * var(--bs-offcanvas-padding-y));
7758
+ margin-right: calc(-0.5 * var(--bs-offcanvas-padding-x));
7759
+ margin-bottom: calc(-0.5 * var(--bs-offcanvas-padding-y));
7760
+ margin-left: auto;
7750
7761
  }
7751
7762
 
7752
7763
  .offcanvas-title {
@@ -7989,6 +8000,25 @@ body {
7989
8000
  padding-top: var(--bs-accordion-body-padding-top);
7990
8001
  }
7991
8002
 
8003
+ .form-switch {
8004
+ --bs-form-switch-width: 2em;
8005
+ --bs-form-switch-padding-start: 2em * -1;
8006
+ --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");
8007
+ --bs-form-switch-border-radius: 2em;
8008
+ --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");
8009
+ --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");
8010
+ }
8011
+ .form-switch .form-check-input {
8012
+ width: var(--bs-form-switch-width);
8013
+ margin-left: var(--bs-form-switch-padding-start);
8014
+ border-radius: var(--bs-form-switch-border-radius);
8015
+ }
8016
+ .form-switch .form-check-input:focus {
8017
+ --bs-form-switch-bg: var(--bs-form-switch-focus-bg-image);
8018
+ }
8019
+ .form-switch .form-check-input:checked {
8020
+ --bs-form-switch-bg: var(--bs-form-switch-checked-bg-image);
8021
+ }
7992
8022
  .form-switch .form-check-input.is-valid:not(:checked) {
7993
8023
  --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");
7994
8024
  }
@@ -8088,6 +8118,10 @@ body {
8088
8118
  .input-group > .form-floating:not(:first-child) .form-control {
8089
8119
  padding-left: 0;
8090
8120
  }
8121
+ .input-group > .form-floating:not(:first-child) .form-select ~ label,
8122
+ .input-group > .form-floating:not(:first-child) .form-control ~ label {
8123
+ padding-left: 0;
8124
+ }
8091
8125
 
8092
8126
  .input-group > .form-floating:not(:last-child) .form-select {
8093
8127
  padding-right: 2rem;
@@ -8107,9 +8141,17 @@ body {
8107
8141
  --bs-input-disabled-border-color: var(--bs-gray-300);
8108
8142
  --bs-input-disabled-bg: var(--bs-gray-100);
8109
8143
  --bs-input-disabled-color: var(--bs-body-color);
8144
+ --bs-input-group-sm-icon-size: 1rem;
8145
+ --bs-input-group-lg-icon-size: 1.75rem;
8110
8146
  border: var(--bs-input-border-width) solid var(--bs-input-border-color);
8111
8147
  border-radius: var(--bs-input-border-radius);
8112
8148
  }
8149
+ .input-group.input-group-sm .d-icon {
8150
+ --bs-icon-component-size: var(--bs-input-group-sm-icon-size);
8151
+ }
8152
+ .input-group.input-group-lg .d-icon {
8153
+ --bs-icon-component-size: var(--bs-input-group-lg-icon-size);
8154
+ }
8113
8155
  .input-group:focus-within {
8114
8156
  border-color: var(--bs-input-focus-border-color);
8115
8157
  box-shadow: var(--bs-input-focus-box-shadow);
@@ -8121,7 +8163,7 @@ body {
8121
8163
  box-shadow: 0 0 0 0.25rem rgba(var(--bs-success-rgb), 0.25);
8122
8164
  }
8123
8165
  .input-group:has(.form-control.is-valid, .form-select.is-valid) ~ .form-text {
8124
- color: var(--bs-form-valid-border-color);
8166
+ color: var(--bs-form-valid-color);
8125
8167
  }
8126
8168
  .input-group:has(.form-control.is-valid, .form-select.is-valid) .input-group-validation-icon {
8127
8169
  --bs-icon-color: var(--bs-success);
@@ -8133,7 +8175,7 @@ body {
8133
8175
  box-shadow: 0 0 0 0.25rem rgba(var(--bs-danger-rgb), 0.25);
8134
8176
  }
8135
8177
  .input-group:has(.form-control.is-invalid, .form-select.is-invalid) ~ .form-text {
8136
- color: var(--bs-form-invalid-border-color);
8178
+ color: var(--bs-form-invalid-color);
8137
8179
  }
8138
8180
  .input-group:has(.form-control.is-invalid, .form-select.is-invalid) .input-group-validation-icon {
8139
8181
  --bs-icon-color: var(--bs-danger);
@@ -9172,6 +9214,7 @@ label .d-icon {
9172
9214
 
9173
9215
  .toast {
9174
9216
  --bs-toast-header-gap: var(--bs-ref-spacer-2);
9217
+ --bs-toast-body-gap: var(--bs-ref-spacer-2);
9175
9218
  --bs-toast-color: var(--bs-gray-900);
9176
9219
  --bs-toast-close-color: var(--bs-gray-900);
9177
9220
  --bs-toast-header-color: var(--bs-gray-900);
@@ -9185,6 +9228,7 @@ label .d-icon {
9185
9228
  }
9186
9229
  .toast .toast-body {
9187
9230
  display: flex;
9231
+ gap: var(--bs-toast-body-gap);
9188
9232
  align-items: center;
9189
9233
  justify-content: space-between;
9190
9234
  }
@@ -9380,7 +9424,6 @@ label .d-icon {
9380
9424
  .nav-pills,
9381
9425
  .nav-underline {
9382
9426
  gap: var(--bs-nav-tabs-nav-gap);
9383
- padding: var(--bs-nav-link-padding-y) var(--bs-nav-link-padding-x);
9384
9427
  }
9385
9428
  .nav-pills.flex-column,
9386
9429
  .nav-underline.flex-column {
@@ -9587,9 +9630,10 @@ label .d-icon {
9587
9630
  }
9588
9631
  .d-input-pin {
9589
9632
  --bs-input-pin-form-gap: var(--bs-ref-spacer-1);
9590
- --bs-input-pin-form-control-size: 4rem;
9591
9633
  --bs-input-pin-form-control-focus-border-color: var(--bs-focus-ring-border-color);
9592
9634
  --bs-input-pin-form-control-focus-box-shadow: 0 0 0 0.25rem var(--bs-focus-ring-color);
9635
+ --bs-input-pin-form-control-min-width: 2rem;
9636
+ --bs-input-pin-form-control-max-width: 4rem;
9593
9637
  display: flex;
9594
9638
  flex-direction: column;
9595
9639
  align-items: flex-start;
@@ -9601,13 +9645,14 @@ label .d-icon {
9601
9645
  width: 100%;
9602
9646
  }
9603
9647
  .d-input-pin .form-control {
9604
- width: var(--bs-input-pin-form-control-size);
9605
- height: var(--bs-input-pin-form-control-size);
9648
+ min-width: var(--bs-input-pin-form-control-min-width);
9649
+ max-width: var(--bs-input-pin-form-control-max-width);
9650
+ aspect-ratio: 1;
9606
9651
  text-align: center;
9607
9652
  box-shadow: none;
9608
9653
  }
9609
9654
  .d-input-pin .form-control:has(~ .input-group-text) {
9610
- padding: var(--bs-ref-spacer-3) var(--bs-ref-spacer-4);
9655
+ padding: var(--bs-ref-spacer-3) var(--bs-ref-spacer-3);
9611
9656
  }
9612
9657
  .d-input-pin .form-control::-webkit-inner-spin-button,
9613
9658
  .d-input-pin .form-control::-webkit-outer-spin-button {
@@ -9667,15 +9712,13 @@ label .d-icon {
9667
9712
  --bs-btn-sm-padding-y: var(--bs-ref-spacer-2);
9668
9713
  --bs-btn-sm-padding-x: var(--bs-ref-spacer-2);
9669
9714
  }
9670
-
9671
- .btn-lg, .btn-group-lg > .btn {
9715
+ .d-button-icon.btn-lg, .btn-group-lg > .d-button-icon.btn {
9672
9716
  --bs-btn-padding-y: var(--bs-btn-lg-padding-y);
9673
9717
  --bs-btn-padding-x: var(--bs-btn-lg-padding-x);
9674
9718
  --bs-btn-font-size: var(--bs-btn-lg-font-size);
9675
9719
  --bs-btn-border-radius: var(--bs-btn-lg-border-radius);
9676
9720
  }
9677
-
9678
- .btn-sm, .btn-group-sm > .btn {
9721
+ .d-button-icon.btn-sm, .btn-group-sm > .d-button-icon.btn {
9679
9722
  --bs-btn-padding-y: var(--bs-btn-sm-padding-y);
9680
9723
  --bs-btn-padding-x: var(--bs-btn-sm-padding-x);
9681
9724
  --bs-btn-font-size: var(--bs-btn-sm-font-size);
@@ -9729,12 +9772,14 @@ label .d-icon {
9729
9772
  border-radius: var(--bs-quick-action-button-border-radius);
9730
9773
  box-shadow: var(--bs-quick-action-button-box-shadow);
9731
9774
  }
9732
- .d-quick-action-button:hover {
9775
+ .d-quick-action-button.d-quick-action-button-feedback:hover {
9776
+ text-decoration: none;
9733
9777
  background: var(--bs-quick-action-button-hover-bg);
9734
9778
  border-color: var(--bs-quick-action-button-hover-border-color);
9735
9779
  box-shadow: var(--bs-quick-action-button-hover-box-shadow);
9736
9780
  }
9737
- .d-quick-action-button:active {
9781
+ .d-quick-action-button.d-quick-action-button-feedback:active {
9782
+ text-decoration: none;
9738
9783
  background: var(--bs-quick-action-button-active-bg);
9739
9784
  border-color: var(--bs-quick-action-button-active-border-color);
9740
9785
  box-shadow: var(--bs-quick-action-button-active-box-shadow);
@@ -9755,8 +9800,8 @@ label .d-icon {
9755
9800
  }
9756
9801
  .d-quick-action-button .d-quick-action-button-text {
9757
9802
  display: flex;
9758
- flex-direction: column;
9759
9803
  flex-grow: 1;
9804
+ flex-direction: column;
9760
9805
  }
9761
9806
  .d-quick-action-button .d-quick-action-button-action-link,
9762
9807
  .d-quick-action-button .d-quick-action-button-secondary-action-link {
@@ -9870,8 +9915,8 @@ label .d-icon {
9870
9915
  }
9871
9916
  .d-quick-action-check .d-quick-action-check-detail {
9872
9917
  display: flex;
9873
- flex-direction: column;
9874
9918
  flex-grow: 1;
9919
+ flex-direction: column;
9875
9920
  }
9876
9921
  .d-quick-action-check .d-quick-action-check-line1 {
9877
9922
  font-size: var(--bs-quick-action-check-line1-font-size);
@@ -10105,139 +10150,101 @@ label .d-icon {
10105
10150
  font-weight: var(--bs-collapse-icon-text-header-font-weight);
10106
10151
  }
10107
10152
 
10108
- .react-datepicker__year-read-view--down-arrow,
10109
- .react-datepicker__month-read-view--down-arrow,
10110
- .react-datepicker__month-year-read-view--down-arrow, .react-datepicker__navigation-icon::before {
10111
- border-color: #ccc;
10112
- border-style: solid;
10113
- border-width: 3px 3px 0 0;
10114
- content: "";
10115
- display: block;
10116
- height: 9px;
10117
- position: absolute;
10118
- top: 6px;
10119
- width: 9px;
10120
- }
10121
- .react-datepicker-popper[data-placement^=top] .react-datepicker__triangle, .react-datepicker-popper[data-placement^=bottom] .react-datepicker__triangle {
10122
- margin-left: -4px;
10123
- position: absolute;
10124
- width: 0;
10125
- }
10126
- .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 {
10127
- box-sizing: content-box;
10128
- position: absolute;
10129
- border: 8px solid transparent;
10130
- height: 0;
10131
- width: 1px;
10132
- content: "";
10133
- z-index: -1;
10134
- border-width: 8px;
10135
- left: -8px;
10136
- }
10137
- .react-datepicker-popper[data-placement^=top] .react-datepicker__triangle::before, .react-datepicker-popper[data-placement^=bottom] .react-datepicker__triangle::before {
10138
- border-bottom-color: #aeaeae;
10139
- }
10140
-
10141
- .react-datepicker-popper[data-placement^=bottom] .react-datepicker__triangle {
10142
- top: 0;
10143
- margin-top: -8px;
10144
- }
10145
- .react-datepicker-popper[data-placement^=bottom] .react-datepicker__triangle::before, .react-datepicker-popper[data-placement^=bottom] .react-datepicker__triangle::after {
10146
- border-top: none;
10147
- border-bottom-color: #f0f0f0;
10148
- }
10149
- .react-datepicker-popper[data-placement^=bottom] .react-datepicker__triangle::after {
10150
- top: 0;
10151
- }
10152
- .react-datepicker-popper[data-placement^=bottom] .react-datepicker__triangle::before {
10153
- top: -1px;
10154
- border-bottom-color: #aeaeae;
10155
- }
10156
-
10157
- .react-datepicker-popper[data-placement^=top] .react-datepicker__triangle {
10158
- bottom: 0;
10159
- margin-bottom: -8px;
10160
- }
10161
- .react-datepicker-popper[data-placement^=top] .react-datepicker__triangle::before, .react-datepicker-popper[data-placement^=top] .react-datepicker__triangle::after {
10162
- border-bottom: none;
10163
- border-top-color: #fff;
10164
- }
10165
- .react-datepicker-popper[data-placement^=top] .react-datepicker__triangle::after {
10166
- bottom: 0;
10167
- }
10168
- .react-datepicker-popper[data-placement^=top] .react-datepicker__triangle::before {
10169
- bottom: -1px;
10170
- border-top-color: #aeaeae;
10171
- }
10172
-
10153
+ /* stylelint-disable */
10173
10154
  .react-datepicker-wrapper {
10174
10155
  display: inline-block;
10175
10156
  padding: 0;
10176
10157
  border: 0;
10158
+ width: 100%;
10159
+ margin-inline: auto;
10177
10160
  }
10178
10161
 
10179
10162
  .react-datepicker {
10180
- font-family: "Helvetica Neue", helvetica, arial, sans-serif;
10181
- font-size: 0.8rem;
10182
- background-color: #fff;
10183
- color: #000;
10184
- border: 1px solid #aeaeae;
10185
- border-radius: 0.3rem;
10163
+ --bs-datepicker-bg: var(--bs-white);
10164
+ --bs-datepicker-border-color: var(--bs-gray-400);
10165
+ --bs-datepicker-border: 1px solid var(--bs-gray-400);
10166
+ --bs-datepicker-border-radius: var(--bs-border-radius-sm);
10167
+ --bs-datepicker-header-bg: var(--bs-gray-100);
10168
+ --bs-datepicker-header-border-bottom: 1px solid var(--bs-gray-400);
10169
+ --bs-datepicker-header-padding: var(--bs-ref-spacer-2) 0;
10170
+ --bs-datepicker-header-font-weight: var(--bs-fw-bold);
10171
+ --bs-datepicker-day-names-color: var(--bs-body-color);
10172
+ --bs-datepicker-day-names-font-size: var(--bs-fs-small);
10173
+ --bs-datepicker-body-margin: var(--bs-ref-spacer-2);
10174
+ --bs-datepicker-body-gap: var(--bs-ref-spacer-2);
10175
+ --bs-datepicker-highlighted-color: inherit;
10176
+ --bs-datepicker-highlighted-bg: transparent;
10177
+ --bs-datepicker-highlighted-border-radius: unset;
10178
+ --bs-datepicker-holidays-color: inherit;
10179
+ --bs-datepicker-holidays-bg: transparent;
10180
+ --bs-datepicker-holidays-border-radius: unset;
10181
+ --bs-datepicker-day-border-radius: 0.25rem;
10182
+ --bs-datepicker-day-outside-month-color: var(--bs-gray-700);
10183
+ --bs-datepicker-day-bg: var(--bs-secondary);
10184
+ --bs-datepicker-day-hover-bg: var(--bs-gray-100);
10185
+ --bs-datepicker-day-width: var(--bs-ref-spacer-7);
10186
+ --bs-datepicker-day-selected-color: var(--bs-white);
10187
+ --bs-datepicker-day-selected-bg: var(--bs-secondary);
10188
+ --bs-datepicker-day-disabled-color: var(--bs-gray-400);
10189
+ --bs-datepicker-week-number-color: var(--bs-datepicker-day-disabled-color);
10190
+ --bs-datepicker-week-number-bg: var(--bs-white);
10191
+ --bs-datepicker-week-number-selected-color: var(--bs-datepicker-day-selected-color);
10192
+ --bs-datepicker-week-number-selected-bg: var(--bs-datepicker-day-selected-bg);
10193
+ --bs-datepicker-week-number-hover-bg: var(--bs-datepicker-day-hover-bg);
10194
+ --bs-datepicker-week-number-hover-color: var(--bs-body-color);
10195
+ --bs-datepicker-week-number-border-radius: 0.25rem;
10196
+ --bs-datepicker-range-start-color: var(--bs-white);
10197
+ --bs-datepicker-range-start-bg: var(--bs-secondary-600);
10198
+ --bs-datepicker-range-end-color: var(--bs-white);
10199
+ --bs-datepicker-range-end-bg: var(--bs-secondary-600);
10200
+ --bs-datepicker-in-range-bg: var(--bs-secondary-200);
10201
+ --bs-datepicker-range-color: var(--bs-body-color);
10202
+ --bs-datepicker-in-range-hover-bg: var(--bs-secondary-400);
10203
+ --bs-datepicker-in-range-disabled-color: var(--bs-secondary-300);
10204
+ --bs-datepicker-in-range-disabled-bg: var(--bs-gray-300);
10205
+ --bs-datepicker-portal-bg: rgba(var(--bs-black-rgb), 0.3);
10206
+ background-color: var(--bs-datepicker-bg);
10207
+ border: var(--bs-datepicker-border);
10208
+ border-radius: var(--bs-datepicker-border-radius);
10186
10209
  display: inline-block;
10187
10210
  position: relative;
10211
+ line-height: initial;
10212
+ overflow: hidden;
10188
10213
  }
10189
10214
 
10190
- .react-datepicker--time-only .react-datepicker__triangle {
10191
- left: 35px;
10192
- }
10193
10215
  .react-datepicker--time-only .react-datepicker__time-container {
10194
10216
  border-left: 0;
10195
10217
  }
10196
10218
  .react-datepicker--time-only .react-datepicker__time,
10197
10219
  .react-datepicker--time-only .react-datepicker__time-box {
10198
- border-bottom-left-radius: 0.3rem;
10199
- border-bottom-right-radius: 0.3rem;
10200
- }
10201
-
10202
- .react-datepicker__triangle {
10203
- position: absolute;
10204
- left: 50px;
10220
+ border-bottom-left-radius: var(--bs-datepicker-border-radius);
10221
+ border-bottom-right-radius: var(--bs-datepicker-border-radius);
10205
10222
  }
10206
10223
 
10207
10224
  .react-datepicker-popper {
10208
10225
  z-index: 1;
10226
+ line-height: 0;
10209
10227
  }
10210
- .react-datepicker-popper[data-placement^=bottom] {
10211
- padding-top: 10px;
10212
- }
10213
- .react-datepicker-popper[data-placement=bottom-end] .react-datepicker__triangle, .react-datepicker-popper[data-placement=top-end] .react-datepicker__triangle {
10214
- left: auto;
10215
- right: 50px;
10216
- }
10217
- .react-datepicker-popper[data-placement^=top] {
10218
- padding-bottom: 10px;
10219
- }
10220
- .react-datepicker-popper[data-placement^=right] {
10221
- padding-left: 8px;
10222
- }
10223
- .react-datepicker-popper[data-placement^=right] .react-datepicker__triangle {
10224
- left: auto;
10225
- right: 42px;
10228
+ .react-datepicker-popper .react-datepicker__triangle {
10229
+ --bs-datepicker-border-color: var(--bs-gray-400);
10230
+ stroke: var(--bs-datepicker-border-color);
10226
10231
  }
10227
- .react-datepicker-popper[data-placement^=left] {
10228
- padding-right: 8px;
10232
+ .react-datepicker-popper[data-placement^=bottom] .react-datepicker__triangle {
10233
+ --bs-datepicker-header-bg: var(--bs-gray-100);
10234
+ fill: var(--bs-datepicker-header-bg);
10235
+ color: var(--bs-datepicker-header-bg);
10229
10236
  }
10230
- .react-datepicker-popper[data-placement^=left] .react-datepicker__triangle {
10231
- left: 42px;
10232
- right: auto;
10237
+ .react-datepicker-popper[data-placement^=top] .react-datepicker__triangle {
10238
+ --bs-datepicker-header-bg: var(--bs-white);
10239
+ fill: var(--bs-datepicker-header-bg);
10240
+ color: var(--bs-datepicker-header-bg);
10233
10241
  }
10234
10242
 
10235
10243
  .react-datepicker__header {
10236
10244
  text-align: center;
10237
- background-color: #f0f0f0;
10238
- border-bottom: 1px solid #aeaeae;
10239
- border-top-left-radius: 0.3rem;
10240
- padding: 8px 0;
10245
+ background-color: var(--bs-datepicker-header-bg);
10246
+ border-bottom: var(--bs-datepicker-header-border-bottom);
10247
+ padding: var(--bs-datepicker-header-padding);
10241
10248
  position: relative;
10242
10249
  }
10243
10250
  .react-datepicker__header--time {
@@ -10248,97 +10255,72 @@ label .d-icon {
10248
10255
  .react-datepicker__header--time:not(.react-datepicker__header--time--only) {
10249
10256
  border-top-left-radius: 0;
10250
10257
  }
10251
- .react-datepicker__header:not(.react-datepicker__header--has-time-select) {
10252
- border-top-right-radius: 0.3rem;
10258
+ .react-datepicker__header-selector {
10259
+ display: flex;
10260
+ align-items: center;
10261
+ gap: var(--bs-ref-spacer-1);
10253
10262
  }
10254
-
10255
- .react-datepicker__year-dropdown-container--select,
10256
- .react-datepicker__month-dropdown-container--select,
10257
- .react-datepicker__month-year-dropdown-container--select,
10258
- .react-datepicker__year-dropdown-container--scroll,
10259
- .react-datepicker__month-dropdown-container--scroll,
10260
- .react-datepicker__month-year-dropdown-container--scroll {
10261
- display: inline-block;
10262
- margin: 0 15px;
10263
+ .react-datepicker__header-selector .d-select {
10264
+ --bs-select-option-selected-bg: var(--bs-datepicker-bg);
10265
+ --bs-select-option-selected-color: var(--bs-datepicker-text-color);
10263
10266
  }
10264
-
10265
- .react-datepicker__current-month,
10266
- .react-datepicker-time__header,
10267
- .react-datepicker-year-header {
10268
- margin-top: 0;
10269
- color: #000;
10270
- font-weight: bold;
10271
- font-size: 0.944rem;
10267
+ .react-datepicker__header-selector .d-select .d-select__control {
10268
+ padding: var(--bs-ref-spacer-1) var(--bs-ref-spacer-2);
10272
10269
  }
10273
-
10274
- .react-datepicker-time__header {
10275
- text-overflow: ellipsis;
10276
- white-space: nowrap;
10277
- overflow: hidden;
10270
+ .react-datepicker__header-selector .d-select .d-select__menu-list {
10271
+ border: var(--bs-datepicker-border);
10272
+ line-height: var(--bs-ref-spacer-8);
10273
+ max-height: 7lh;
10278
10274
  }
10279
-
10280
- .react-datepicker__navigation {
10281
- align-items: center;
10282
- background: none;
10283
- display: flex;
10284
- justify-content: center;
10285
- text-align: center;
10286
- cursor: pointer;
10287
- position: absolute;
10288
- top: 2px;
10289
- padding: 0;
10290
- border: none;
10291
- z-index: 1;
10292
- height: 32px;
10293
- width: 32px;
10294
- text-indent: -999em;
10295
- overflow: hidden;
10275
+ .react-datepicker__header-selector .d-select .d-select__option {
10276
+ padding: var(--bs-ref-spacer-1) var(--bs-ref-spacer-2);
10277
+ line-height: var(--bs-ref-spacer-8);
10278
+ text-align: start;
10296
10279
  }
10297
- .react-datepicker__navigation--previous {
10298
- left: 2px;
10280
+ .react-datepicker__header-selector .d-select .d-select__option--is-selected {
10281
+ font-weight: bold;
10299
10282
  }
10300
- .react-datepicker__navigation--next {
10301
- right: 2px;
10283
+ .react-datepicker__header-selector .d-select .d-select__option--is-selected:hover {
10284
+ background-color: var(--bs-datepicker-day-hover-bg);
10302
10285
  }
10303
- .react-datepicker__navigation--next--with-time:not(.react-datepicker__navigation--next--with-today-button) {
10304
- right: 85px;
10286
+ .react-datepicker__header-selector .d-select.custom-year-selector .d-select__single-value {
10287
+ width: 4ch;
10305
10288
  }
10306
- .react-datepicker__navigation--years {
10307
- position: relative;
10308
- top: 0;
10309
- display: block;
10310
- margin-left: auto;
10289
+ .react-datepicker__header-selector p {
10290
+ margin: 0;
10291
+ font-weight: bold;
10292
+ }
10293
+ .react-datepicker__header-selector .header-button:first-child {
10294
+ padding: var(--bs-ref-spacer-1);
10295
+ margin-left: var(--bs-ref-spacer-1);
10311
10296
  margin-right: auto;
10312
10297
  }
10313
- .react-datepicker__navigation--years-previous {
10314
- top: 4px;
10298
+ .react-datepicker__header-selector .header-button:last-child {
10299
+ padding: var(--bs-ref-spacer-1);
10300
+ margin-right: var(--bs-ref-spacer-1);
10301
+ margin-left: auto;
10315
10302
  }
10316
- .react-datepicker__navigation--years-upcoming {
10317
- top: -4px;
10303
+ .react-datepicker__header-day-selector {
10304
+ margin-bottom: var(--bs-ref-spacer-4);
10318
10305
  }
10319
- .react-datepicker__navigation:hover *::before {
10320
- border-color: #a6a6a6;
10306
+ .react-datepicker__header-day-selector .custom-month-selector .d-select__single-value {
10307
+ text-align: start;
10308
+ min-width: 10ch;
10321
10309
  }
10322
10310
 
10323
- .react-datepicker__navigation-icon {
10324
- position: relative;
10325
- top: -1px;
10326
- font-size: 20px;
10327
- width: 0;
10328
- }
10329
- .react-datepicker__navigation-icon--next {
10330
- left: -2px;
10331
- }
10332
- .react-datepicker__navigation-icon--next::before {
10333
- transform: rotate(45deg);
10334
- left: -7px;
10335
- }
10336
- .react-datepicker__navigation-icon--previous {
10337
- right: -2px;
10311
+ .react-datepicker__current-month,
10312
+ .react-datepicker-time__header,
10313
+ .react-datepicker-year-header {
10314
+ margin-top: 0;
10315
+ color: var(--bs-datepicker-text-color);
10316
+ font-weight: var(--bs-datepicker-header-font-weight);
10317
+ font-size: var(--bs-datepicker-font-size);
10338
10318
  }
10339
- .react-datepicker__navigation-icon--previous::before {
10340
- transform: rotate(225deg);
10341
- right: -7px;
10319
+
10320
+ .react-datepicker-time__header {
10321
+ text-overflow: ellipsis;
10322
+ white-space: nowrap;
10323
+ overflow: hidden;
10342
10324
  }
10343
10325
 
10344
10326
  .react-datepicker__month-container {
@@ -10346,218 +10328,219 @@ label .d-icon {
10346
10328
  }
10347
10329
 
10348
10330
  .react-datepicker__year {
10349
- margin: 0.4rem;
10331
+ margin: var(--bs-datepicker-body-margin);
10350
10332
  text-align: center;
10351
10333
  }
10352
10334
  .react-datepicker__year-wrapper {
10353
10335
  display: flex;
10354
10336
  flex-wrap: wrap;
10355
- max-width: 180px;
10337
+ max-width: calc(12rem + var(--bs-datepicker-body-gap) * 2);
10338
+ gap: var(--bs-datepicker-body-gap);
10356
10339
  }
10357
10340
  .react-datepicker__year .react-datepicker__year-text {
10358
10341
  display: inline-block;
10359
10342
  width: 4rem;
10360
- margin: 2px;
10361
10343
  }
10362
10344
 
10363
- .react-datepicker__month {
10364
- margin: 0.4rem;
10345
+ .react-datepicker__month,
10346
+ .react-datepicker__quarter {
10347
+ margin: var(--bs-datepicker-body-margin);
10365
10348
  text-align: center;
10349
+ display: flex;
10350
+ flex-direction: column;
10351
+ gap: var(--bs-datepicker-body-gap);
10352
+ }
10353
+ .react-datepicker__month-wrapper,
10354
+ .react-datepicker__quarter-wrapper {
10355
+ display: flex;
10356
+ flex: 1;
10357
+ gap: var(--bs-datepicker-body-gap);
10366
10358
  }
10367
10359
  .react-datepicker__month .react-datepicker__month-text,
10368
- .react-datepicker__month .react-datepicker__quarter-text {
10360
+ .react-datepicker__quarter .react-datepicker__month-text {
10369
10361
  display: inline-block;
10370
- width: 4rem;
10371
- margin: 2px;
10372
- }
10373
-
10374
- .react-datepicker__input-time-container {
10375
- clear: both;
10376
- width: 100%;
10377
- float: left;
10378
- margin: 5px 0 10px 15px;
10379
- text-align: left;
10362
+ width: 10ch;
10363
+ flex: 1;
10380
10364
  }
10381
- .react-datepicker__input-time-container .react-datepicker-time__caption {
10365
+ .react-datepicker__month .react-datepicker__quarter-text,
10366
+ .react-datepicker__quarter .react-datepicker__quarter-text {
10382
10367
  display: inline-block;
10368
+ width: 6ch;
10383
10369
  }
10384
- .react-datepicker__input-time-container .react-datepicker-time__input-container {
10370
+
10371
+ .react-datepicker__week-number {
10372
+ color: var(--bs-datepicker-week-number-color);
10385
10373
  display: inline-block;
10374
+ width: var(--bs-datepicker-day-width);
10375
+ line-height: var(--bs-datepicker-day-width);
10376
+ text-align: center;
10377
+ font-size: var(--bs-datepicker-day-names-font-size);
10386
10378
  }
10387
- .react-datepicker__input-time-container .react-datepicker-time__input-container .react-datepicker-time__input {
10388
- display: inline-block;
10389
- margin-left: 10px;
10379
+ .react-datepicker__week-number.react-datepicker__week-number--clickable {
10380
+ cursor: pointer;
10381
+ color: var(--bs-body-color);
10390
10382
  }
10391
- .react-datepicker__input-time-container .react-datepicker-time__input-container .react-datepicker-time__input input {
10392
- width: auto;
10383
+ .react-datepicker__week-number.react-datepicker__week-number--clickable.react-datepicker__week-number--selected {
10384
+ border-radius: var(--bs-datepicker-week-number-border-radius);
10385
+ background-color: var(--bs-datepicker-week-number-selected-bg);
10386
+ color: var(--bs-datepicker-week-number-selected-color);
10393
10387
  }
10394
- .react-datepicker__input-time-container .react-datepicker-time__input-container .react-datepicker-time__input input[type=time]::-webkit-inner-spin-button,
10395
- .react-datepicker__input-time-container .react-datepicker-time__input-container .react-datepicker-time__input input[type=time]::-webkit-outer-spin-button {
10396
- -webkit-appearance: none;
10397
- margin: 0;
10388
+ .react-datepicker__week-number.react-datepicker__week-number--clickable:hover {
10389
+ border-radius: var(--bs-datepicker-week-number-border-radius);
10390
+ background-color: var(--bs-datepicker-week-number-hover-bg);
10391
+ color: var(--bs-datepicker-week-number-hover-color);
10392
+ }
10393
+
10394
+ .react-datepicker__day-names {
10395
+ white-space: nowrap;
10396
+ display: inline-flex;
10397
+ gap: var(--bs-datepicker-body-gap);
10398
10398
  }
10399
- .react-datepicker__input-time-container .react-datepicker-time__input-container .react-datepicker-time__input input[type=time] {
10400
- -moz-appearance: textfield;
10399
+
10400
+ .react-datepicker__week {
10401
+ white-space: nowrap;
10402
+ display: inline-flex;
10403
+ gap: var(--bs-datepicker-body-gap);
10404
+ align-self: center;
10405
+ align-items: center;
10401
10406
  }
10402
- .react-datepicker__input-time-container .react-datepicker-time__input-container .react-datepicker-time__delimiter {
10403
- margin-left: 5px;
10407
+
10408
+ .react-datepicker__day-name,
10409
+ .react-datepicker__day,
10410
+ .react-datepicker__time-name {
10411
+ color: var(--bs-datepicker-day-names-color);
10404
10412
  display: inline-block;
10413
+ text-align: center;
10414
+ width: var(--bs-datepicker-day-width);
10415
+ line-height: var(--bs-datepicker-day-width);
10416
+ font-size: var(--bs-datepicker-day-names-font-size);
10405
10417
  }
10406
10418
 
10407
- .react-datepicker__time-container {
10408
- float: right;
10409
- border-left: 1px solid #aeaeae;
10410
- width: 85px;
10419
+ .react-datepicker__day--outside-month {
10420
+ color: var(--bs-datepicker-day-outside-month-color);
10411
10421
  }
10412
- .react-datepicker__time-container--with-today-button {
10413
- display: inline;
10414
- border: 1px solid #aeaeae;
10415
- border-radius: 0.3rem;
10416
- position: absolute;
10417
- right: -87px;
10418
- top: 0;
10422
+
10423
+ .react-datepicker__day {
10424
+ cursor: pointer;
10419
10425
  }
10420
- .react-datepicker__time-container .react-datepicker__time {
10421
- position: relative;
10422
- background: white;
10423
- border-bottom-right-radius: 0.3rem;
10426
+ .react-datepicker__day:not([aria-disabled=true], .react-datepicker__day--selected):hover {
10427
+ border-radius: var(--bs-datepicker-day-border-radius);
10428
+ background-color: var(--bs-datepicker-day-hover-bg);
10424
10429
  }
10425
- .react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box {
10426
- width: 85px;
10427
- overflow-x: hidden;
10428
- margin: 0 auto;
10429
- text-align: center;
10430
- border-bottom-right-radius: 0.3rem;
10430
+ .react-datepicker__day--today {
10431
+ font-weight: bold;
10431
10432
  }
10432
- .react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list {
10433
- list-style: none;
10434
- margin: 0;
10435
- height: calc(195px + 1.7rem / 2);
10436
- overflow-y: scroll;
10437
- padding-right: 0;
10438
- padding-left: 0;
10439
- width: 100%;
10440
- box-sizing: content-box;
10433
+ .react-datepicker__day--highlighted {
10434
+ border-radius: var(--bs-datepicker-highlighted-border-radius);
10435
+ background-color: var(--bs-datepicker-highlighted-bg);
10436
+ color: var(--bs-datepicker-highlighted-color);
10437
+ }
10438
+ .react-datepicker__day--highlighted:not([aria-disabled=true]):hover {
10439
+ background-color: var(--bs-datepicker-day-hover-bg);
10441
10440
  }
10442
- .react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item {
10443
- height: 30px;
10444
- padding: 5px 10px;
10441
+ .react-datepicker__day--holidays {
10442
+ position: relative;
10443
+ border-radius: var(--bs-datepicker-holidays-border-radius);
10444
+ background-color: var(--bs-datepicker-holidays-bg);
10445
+ color: var(--bs-datepicker-holidays-color);
10446
+ }
10447
+ .react-datepicker__day--holidays .overlay {
10448
+ position: absolute;
10449
+ bottom: 100%;
10450
+ left: 50%;
10451
+ transform: translateX(-50%);
10452
+ background-color: #333;
10453
+ color: #fff;
10454
+ padding: 4px;
10455
+ border-radius: 4px;
10445
10456
  white-space: nowrap;
10457
+ visibility: hidden;
10458
+ opacity: 0;
10459
+ transition: visibility 0s, opacity 0.3s ease-in-out;
10446
10460
  }
10447
- .react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item:hover {
10448
- cursor: pointer;
10449
- background-color: #f0f0f0;
10461
+ .react-datepicker__day--holidays:not([aria-disabled=true]):hover {
10462
+ background-color: var(--bs-datepicker-day-hover-bg);
10450
10463
  }
10451
- .react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item--selected {
10452
- background-color: #216ba5;
10453
- color: white;
10454
- font-weight: bold;
10464
+ .react-datepicker__day--holidays:hover .overlay {
10465
+ visibility: visible;
10466
+ opacity: 1;
10455
10467
  }
10456
- .react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item--selected:hover {
10457
- background-color: #216ba5;
10468
+ .react-datepicker__day--selected {
10469
+ color: var(--bs-datepicker-day-selected-color);
10470
+ background-color: var(--bs-datepicker-day-selected-bg);
10471
+ border-radius: var(--bs-datepicker-day-border-radius);
10458
10472
  }
10459
- .react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item--disabled {
10460
- color: #ccc;
10473
+ .react-datepicker__day--in-range, .react-datepicker__day--in-selecting-range {
10474
+ border-radius: var(--bs-datepicker-day-border-radius);
10475
+ background-color: var(--bs-datepicker-in-range-bg);
10476
+ color: var(--bs-datepicker-range-color);
10461
10477
  }
10462
- .react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item--disabled:hover {
10463
- cursor: default;
10464
- background-color: transparent;
10478
+ .react-datepicker__day--in-range[aria-disabled=true], .react-datepicker__day--in-selecting-range[aria-disabled=true] {
10479
+ background-color: var(--bs-datepicker-in-range-disabled-bg);
10480
+ color: var(--bs-datepicker-in-range-disabled-color);
10465
10481
  }
10466
-
10467
- .react-datepicker__week-number {
10468
- color: #ccc;
10469
- display: inline-block;
10470
- width: 1.7rem;
10471
- line-height: 1.7rem;
10472
- text-align: center;
10473
- margin: 0.166rem;
10482
+ .react-datepicker__day--in-range:not(.react-datepicker__day--range-start,
10483
+ .react-datepicker__day--range-end,
10484
+ .react-datepicker__day--disabled):hover, .react-datepicker__day--in-selecting-range:not(.react-datepicker__day--range-start,
10485
+ .react-datepicker__day--range-end,
10486
+ .react-datepicker__day--disabled):hover {
10487
+ background-color: var(--bs-datepicker-in-range-hover-bg);
10474
10488
  }
10475
- .react-datepicker__week-number.react-datepicker__week-number--clickable {
10476
- cursor: pointer;
10489
+ .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 {
10490
+ background-color: var(--bs-datepicker-in-range-hover-bg);
10477
10491
  }
10478
- .react-datepicker__week-number.react-datepicker__week-number--clickable:hover {
10479
- border-radius: 0.3rem;
10480
- background-color: #f0f0f0;
10492
+ .react-datepicker__day--range-start:not(.react-datepicker__day--disabled) {
10493
+ color: var(--bs-datepicker-range-start-color);
10494
+ background-color: var(--bs-datepicker-range-start-bg);
10481
10495
  }
10482
-
10483
- .react-datepicker__day-names,
10484
- .react-datepicker__week {
10485
- white-space: nowrap;
10496
+ .react-datepicker__day--range-end:not(.react-datepicker__day--disabled) {
10497
+ color: var(--bs-datepicker-range-end-color);
10498
+ background-color: var(--bs-datepicker-range-end-bg);
10486
10499
  }
10487
-
10488
- .react-datepicker__day-names {
10489
- margin-bottom: -8px;
10500
+ .react-datepicker__day--disabled {
10501
+ cursor: default;
10502
+ color: var(--bs-datepicker-day-disabled-color);
10490
10503
  }
10491
-
10492
- .react-datepicker__day-name,
10493
- .react-datepicker__day,
10494
- .react-datepicker__time-name {
10495
- color: #000;
10496
- display: inline-block;
10497
- width: 1.7rem;
10498
- line-height: 1.7rem;
10499
- text-align: center;
10500
- margin: 0.166rem;
10504
+ .react-datepicker__day--disabled .overlay {
10505
+ position: absolute;
10506
+ bottom: 70%;
10507
+ left: 50%;
10508
+ transform: translateX(-50%);
10509
+ background-color: #333;
10510
+ color: #fff;
10511
+ padding: 4px;
10512
+ border-radius: 4px;
10513
+ white-space: nowrap;
10514
+ visibility: hidden;
10515
+ opacity: 0;
10516
+ transition: visibility 0s, opacity 0.3s ease-in-out;
10501
10517
  }
10502
10518
 
10503
- .react-datepicker__day,
10504
- .react-datepicker__month-text,
10505
- .react-datepicker__quarter-text,
10506
- .react-datepicker__year-text {
10519
+ .react-datepicker__month-text {
10507
10520
  cursor: pointer;
10508
10521
  }
10509
- .react-datepicker__day:hover,
10510
- .react-datepicker__month-text:hover,
10511
- .react-datepicker__quarter-text:hover,
10512
- .react-datepicker__year-text:hover {
10513
- border-radius: 0.3rem;
10514
- background-color: #f0f0f0;
10522
+ .react-datepicker__month-text:not([aria-disabled=true], .react-datepicker__month-text--selected):hover {
10523
+ border-radius: var(--bs-datepicker-day-border-radius);
10524
+ background-color: var(--bs-datepicker-day-hover-bg);
10515
10525
  }
10516
- .react-datepicker__day--today,
10517
- .react-datepicker__month-text--today,
10518
- .react-datepicker__quarter-text--today,
10519
- .react-datepicker__year-text--today {
10526
+ .react-datepicker__month-text--today {
10520
10527
  font-weight: bold;
10521
10528
  }
10522
- .react-datepicker__day--highlighted,
10523
- .react-datepicker__month-text--highlighted,
10524
- .react-datepicker__quarter-text--highlighted,
10525
- .react-datepicker__year-text--highlighted {
10526
- border-radius: 0.3rem;
10527
- background-color: #3dcc4a;
10528
- color: #fff;
10529
+ .react-datepicker__month-text--highlighted {
10530
+ border-radius: var(--bs-datepicker-highlighted-border-radius);
10531
+ background-color: var(--bs-datepicker-highlighted-bg);
10532
+ color: var(--bs-datepicker-highlighted-color);
10529
10533
  }
10530
- .react-datepicker__day--highlighted:hover,
10531
- .react-datepicker__month-text--highlighted:hover,
10532
- .react-datepicker__quarter-text--highlighted:hover,
10533
- .react-datepicker__year-text--highlighted:hover {
10534
- background-color: #32be3f;
10535
- }
10536
- .react-datepicker__day--highlighted-custom-1,
10537
- .react-datepicker__month-text--highlighted-custom-1,
10538
- .react-datepicker__quarter-text--highlighted-custom-1,
10539
- .react-datepicker__year-text--highlighted-custom-1 {
10540
- color: magenta;
10541
- }
10542
- .react-datepicker__day--highlighted-custom-2,
10543
- .react-datepicker__month-text--highlighted-custom-2,
10544
- .react-datepicker__quarter-text--highlighted-custom-2,
10545
- .react-datepicker__year-text--highlighted-custom-2 {
10546
- color: green;
10547
- }
10548
- .react-datepicker__day--holidays,
10549
- .react-datepicker__month-text--holidays,
10550
- .react-datepicker__quarter-text--holidays,
10551
- .react-datepicker__year-text--holidays {
10534
+ .react-datepicker__month-text--highlighted:not([aria-disabled=true]):hover {
10535
+ background-color: var(--bs-datepicker-day-hover-bg);
10536
+ }
10537
+ .react-datepicker__month-text--holidays {
10552
10538
  position: relative;
10553
- border-radius: 0.3rem;
10554
- background-color: #ff6803;
10555
- color: #fff;
10539
+ border-radius: var(--bs-datepicker-holidays-border-radius);
10540
+ background-color: var(--bs-datepicker-holidays-bg);
10541
+ color: var(--bs-datepicker-holidays-color);
10556
10542
  }
10557
- .react-datepicker__day--holidays .holiday-overlay,
10558
- .react-datepicker__month-text--holidays .holiday-overlay,
10559
- .react-datepicker__quarter-text--holidays .holiday-overlay,
10560
- .react-datepicker__year-text--holidays .holiday-overlay {
10543
+ .react-datepicker__month-text--holidays .overlay {
10561
10544
  position: absolute;
10562
10545
  bottom: 100%;
10563
10546
  left: 50%;
@@ -10571,289 +10554,283 @@ label .d-icon {
10571
10554
  opacity: 0;
10572
10555
  transition: visibility 0s, opacity 0.3s ease-in-out;
10573
10556
  }
10574
- .react-datepicker__day--holidays:hover,
10575
- .react-datepicker__month-text--holidays:hover,
10576
- .react-datepicker__quarter-text--holidays:hover,
10577
- .react-datepicker__year-text--holidays:hover {
10578
- background-color: #cf5300;
10557
+ .react-datepicker__month-text--holidays:not([aria-disabled=true]):hover {
10558
+ background-color: var(--bs-datepicker-day-hover-bg);
10579
10559
  }
10580
- .react-datepicker__day--holidays:hover .holiday-overlay,
10581
- .react-datepicker__month-text--holidays:hover .holiday-overlay,
10582
- .react-datepicker__quarter-text--holidays:hover .holiday-overlay,
10583
- .react-datepicker__year-text--holidays:hover .holiday-overlay {
10560
+ .react-datepicker__month-text--holidays:hover .overlay {
10584
10561
  visibility: visible;
10585
10562
  opacity: 1;
10586
10563
  }
10587
- .react-datepicker__day--selected, .react-datepicker__day--in-selecting-range, .react-datepicker__day--in-range,
10588
- .react-datepicker__month-text--selected,
10589
- .react-datepicker__month-text--in-selecting-range,
10590
- .react-datepicker__month-text--in-range,
10591
- .react-datepicker__quarter-text--selected,
10592
- .react-datepicker__quarter-text--in-selecting-range,
10593
- .react-datepicker__quarter-text--in-range,
10594
- .react-datepicker__year-text--selected,
10595
- .react-datepicker__year-text--in-selecting-range,
10596
- .react-datepicker__year-text--in-range {
10597
- border-radius: 0.3rem;
10598
- background-color: #216ba5;
10599
- color: #fff;
10564
+ .react-datepicker__month-text--selected {
10565
+ color: var(--bs-datepicker-day-selected-color);
10566
+ background-color: var(--bs-datepicker-day-selected-bg);
10567
+ border-radius: var(--bs-datepicker-day-border-radius);
10600
10568
  }
10601
- .react-datepicker__day--selected:hover, .react-datepicker__day--in-selecting-range:hover, .react-datepicker__day--in-range:hover,
10602
- .react-datepicker__month-text--selected:hover,
10603
- .react-datepicker__month-text--in-selecting-range:hover,
10604
- .react-datepicker__month-text--in-range:hover,
10605
- .react-datepicker__quarter-text--selected:hover,
10606
- .react-datepicker__quarter-text--in-selecting-range:hover,
10607
- .react-datepicker__quarter-text--in-range:hover,
10608
- .react-datepicker__year-text--selected:hover,
10609
- .react-datepicker__year-text--in-selecting-range:hover,
10610
- .react-datepicker__year-text--in-range:hover {
10611
- background-color: #1d5d90;
10612
- }
10613
- .react-datepicker__day--keyboard-selected,
10614
- .react-datepicker__month-text--keyboard-selected,
10615
- .react-datepicker__quarter-text--keyboard-selected,
10616
- .react-datepicker__year-text--keyboard-selected {
10617
- border-radius: 0.3rem;
10618
- background-color: #bad9f1;
10619
- color: rgb(0, 0, 0);
10620
- }
10621
- .react-datepicker__day--keyboard-selected:hover,
10622
- .react-datepicker__month-text--keyboard-selected:hover,
10623
- .react-datepicker__quarter-text--keyboard-selected:hover,
10624
- .react-datepicker__year-text--keyboard-selected:hover {
10625
- background-color: #1d5d90;
10626
- }
10627
- .react-datepicker__day--in-selecting-range:not(.react-datepicker__day--in-range,
10628
- .react-datepicker__month-text--in-range,
10629
- .react-datepicker__quarter-text--in-range,
10630
- .react-datepicker__year-text--in-range),
10631
- .react-datepicker__month-text--in-selecting-range:not(.react-datepicker__day--in-range,
10632
- .react-datepicker__month-text--in-range,
10633
- .react-datepicker__quarter-text--in-range,
10634
- .react-datepicker__year-text--in-range),
10635
- .react-datepicker__quarter-text--in-selecting-range:not(.react-datepicker__day--in-range,
10636
- .react-datepicker__month-text--in-range,
10637
- .react-datepicker__quarter-text--in-range,
10638
- .react-datepicker__year-text--in-range),
10639
- .react-datepicker__year-text--in-selecting-range:not(.react-datepicker__day--in-range,
10640
- .react-datepicker__month-text--in-range,
10641
- .react-datepicker__quarter-text--in-range,
10642
- .react-datepicker__year-text--in-range) {
10643
- background-color: rgba(33, 107, 165, 0.5);
10644
- }
10645
- .react-datepicker__month--selecting-range .react-datepicker__day--in-range:not(.react-datepicker__day--in-selecting-range,
10646
- .react-datepicker__month-text--in-selecting-range,
10647
- .react-datepicker__quarter-text--in-selecting-range,
10648
- .react-datepicker__year-text--in-selecting-range), .react-datepicker__year--selecting-range .react-datepicker__day--in-range:not(.react-datepicker__day--in-selecting-range,
10649
- .react-datepicker__month-text--in-selecting-range,
10650
- .react-datepicker__quarter-text--in-selecting-range,
10651
- .react-datepicker__year-text--in-selecting-range),
10652
- .react-datepicker__month--selecting-range .react-datepicker__month-text--in-range:not(.react-datepicker__day--in-selecting-range,
10653
- .react-datepicker__month-text--in-selecting-range,
10654
- .react-datepicker__quarter-text--in-selecting-range,
10655
- .react-datepicker__year-text--in-selecting-range),
10656
- .react-datepicker__year--selecting-range .react-datepicker__month-text--in-range:not(.react-datepicker__day--in-selecting-range,
10657
- .react-datepicker__month-text--in-selecting-range,
10658
- .react-datepicker__quarter-text--in-selecting-range,
10659
- .react-datepicker__year-text--in-selecting-range),
10660
- .react-datepicker__month--selecting-range .react-datepicker__quarter-text--in-range:not(.react-datepicker__day--in-selecting-range,
10661
- .react-datepicker__month-text--in-selecting-range,
10662
- .react-datepicker__quarter-text--in-selecting-range,
10663
- .react-datepicker__year-text--in-selecting-range),
10664
- .react-datepicker__year--selecting-range .react-datepicker__quarter-text--in-range:not(.react-datepicker__day--in-selecting-range,
10665
- .react-datepicker__month-text--in-selecting-range,
10666
- .react-datepicker__quarter-text--in-selecting-range,
10667
- .react-datepicker__year-text--in-selecting-range),
10668
- .react-datepicker__month--selecting-range .react-datepicker__year-text--in-range:not(.react-datepicker__day--in-selecting-range,
10669
- .react-datepicker__month-text--in-selecting-range,
10670
- .react-datepicker__quarter-text--in-selecting-range,
10671
- .react-datepicker__year-text--in-selecting-range),
10672
- .react-datepicker__year--selecting-range .react-datepicker__year-text--in-range:not(.react-datepicker__day--in-selecting-range,
10673
- .react-datepicker__month-text--in-selecting-range,
10674
- .react-datepicker__quarter-text--in-selecting-range,
10675
- .react-datepicker__year-text--in-selecting-range) {
10676
- background-color: #f0f0f0;
10677
- color: #000;
10678
- }
10679
- .react-datepicker__day--disabled,
10680
- .react-datepicker__month-text--disabled,
10681
- .react-datepicker__quarter-text--disabled,
10682
- .react-datepicker__year-text--disabled {
10569
+ .react-datepicker__month-text--in-range, .react-datepicker__month-text--in-selecting-range {
10570
+ border-radius: var(--bs-datepicker-day-border-radius);
10571
+ background-color: var(--bs-datepicker-in-range-bg);
10572
+ color: var(--bs-datepicker-range-color);
10573
+ }
10574
+ .react-datepicker__month-text--in-range[aria-disabled=true], .react-datepicker__month-text--in-selecting-range[aria-disabled=true] {
10575
+ background-color: var(--bs-datepicker-in-range-disabled-bg);
10576
+ color: var(--bs-datepicker-in-range-disabled-color);
10577
+ }
10578
+ .react-datepicker__month-text--in-range:not(.react-datepicker__month-text--range-start,
10579
+ .react-datepicker__month-text--range-end,
10580
+ .react-datepicker__month-text--disabled):hover, .react-datepicker__month-text--in-selecting-range:not(.react-datepicker__month-text--range-start,
10581
+ .react-datepicker__month-text--range-end,
10582
+ .react-datepicker__month-text--disabled):hover {
10583
+ background-color: var(--bs-datepicker-in-range-hover-bg);
10584
+ }
10585
+ .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 {
10586
+ background-color: var(--bs-datepicker-in-range-hover-bg);
10587
+ }
10588
+ .react-datepicker__month-text--range-start:not(.react-datepicker__month-text--disabled) {
10589
+ color: var(--bs-datepicker-range-start-color);
10590
+ background-color: var(--bs-datepicker-range-start-bg);
10591
+ }
10592
+ .react-datepicker__month-text--range-end:not(.react-datepicker__month-text--disabled) {
10593
+ color: var(--bs-datepicker-range-end-color);
10594
+ background-color: var(--bs-datepicker-range-end-bg);
10595
+ }
10596
+ .react-datepicker__month-text--disabled {
10683
10597
  cursor: default;
10684
- color: #ccc;
10598
+ color: var(--bs-datepicker-day-disabled-color);
10685
10599
  }
10686
- .react-datepicker__day--disabled:hover,
10687
- .react-datepicker__month-text--disabled:hover,
10688
- .react-datepicker__quarter-text--disabled:hover,
10689
- .react-datepicker__year-text--disabled:hover {
10690
- background-color: transparent;
10600
+ .react-datepicker__month-text--disabled .overlay {
10601
+ position: absolute;
10602
+ bottom: 70%;
10603
+ left: 50%;
10604
+ transform: translateX(-50%);
10605
+ background-color: #333;
10606
+ color: #fff;
10607
+ padding: 4px;
10608
+ border-radius: 4px;
10609
+ white-space: nowrap;
10610
+ visibility: hidden;
10611
+ opacity: 0;
10612
+ transition: visibility 0s, opacity 0.3s ease-in-out;
10691
10613
  }
10692
10614
 
10693
- .react-datepicker__input-container {
10615
+ .react-datepicker__quarter-text {
10616
+ cursor: pointer;
10617
+ }
10618
+ .react-datepicker__quarter-text:not([aria-disabled=true], .react-datepicker__quarter-text--selected):hover {
10619
+ border-radius: var(--bs-datepicker-day-border-radius);
10620
+ background-color: var(--bs-datepicker-day-hover-bg);
10621
+ }
10622
+ .react-datepicker__quarter-text--today {
10623
+ font-weight: bold;
10624
+ }
10625
+ .react-datepicker__quarter-text--highlighted {
10626
+ border-radius: var(--bs-datepicker-highlighted-border-radius);
10627
+ background-color: var(--bs-datepicker-highlighted-bg);
10628
+ color: var(--bs-datepicker-highlighted-color);
10629
+ }
10630
+ .react-datepicker__quarter-text--highlighted:not([aria-disabled=true]):hover {
10631
+ background-color: var(--bs-datepicker-day-hover-bg);
10632
+ }
10633
+ .react-datepicker__quarter-text--holidays {
10694
10634
  position: relative;
10695
- display: inline-block;
10696
- width: 100%;
10635
+ border-radius: var(--bs-datepicker-holidays-border-radius);
10636
+ background-color: var(--bs-datepicker-holidays-bg);
10637
+ color: var(--bs-datepicker-holidays-color);
10697
10638
  }
10698
- .react-datepicker__input-container .react-datepicker__calendar-icon {
10639
+ .react-datepicker__quarter-text--holidays .overlay {
10699
10640
  position: absolute;
10700
- padding: 0.5rem;
10701
- box-sizing: content-box;
10641
+ bottom: 100%;
10642
+ left: 50%;
10643
+ transform: translateX(-50%);
10644
+ background-color: #333;
10645
+ color: #fff;
10646
+ padding: 4px;
10647
+ border-radius: 4px;
10648
+ white-space: nowrap;
10649
+ visibility: hidden;
10650
+ opacity: 0;
10651
+ transition: visibility 0s, opacity 0.3s ease-in-out;
10702
10652
  }
10703
-
10704
- .react-datepicker__view-calendar-icon input {
10705
- padding: 6px 10px 5px 25px;
10653
+ .react-datepicker__quarter-text--holidays:not([aria-disabled=true]):hover {
10654
+ background-color: var(--bs-datepicker-day-hover-bg);
10706
10655
  }
10707
-
10708
- .react-datepicker__year-read-view,
10709
- .react-datepicker__month-read-view,
10710
- .react-datepicker__month-year-read-view {
10711
- border: 1px solid transparent;
10712
- border-radius: 0.3rem;
10713
- position: relative;
10656
+ .react-datepicker__quarter-text--holidays:hover .overlay {
10657
+ visibility: visible;
10658
+ opacity: 1;
10714
10659
  }
10715
- .react-datepicker__year-read-view:hover,
10716
- .react-datepicker__month-read-view:hover,
10717
- .react-datepicker__month-year-read-view:hover {
10718
- cursor: pointer;
10660
+ .react-datepicker__quarter-text--selected {
10661
+ color: var(--bs-datepicker-day-selected-color);
10662
+ background-color: var(--bs-datepicker-day-selected-bg);
10663
+ border-radius: var(--bs-datepicker-day-border-radius);
10719
10664
  }
10720
- .react-datepicker__year-read-view:hover .react-datepicker__year-read-view--down-arrow,
10721
- .react-datepicker__year-read-view:hover .react-datepicker__month-read-view--down-arrow,
10722
- .react-datepicker__month-read-view:hover .react-datepicker__year-read-view--down-arrow,
10723
- .react-datepicker__month-read-view:hover .react-datepicker__month-read-view--down-arrow,
10724
- .react-datepicker__month-year-read-view:hover .react-datepicker__year-read-view--down-arrow,
10725
- .react-datepicker__month-year-read-view:hover .react-datepicker__month-read-view--down-arrow {
10726
- border-top-color: #b3b3b3;
10727
- }
10728
- .react-datepicker__year-read-view--down-arrow,
10729
- .react-datepicker__month-read-view--down-arrow,
10730
- .react-datepicker__month-year-read-view--down-arrow {
10731
- transform: rotate(135deg);
10732
- right: -16px;
10733
- top: 0;
10665
+ .react-datepicker__quarter-text--in-range, .react-datepicker__quarter-text--in-selecting-range {
10666
+ border-radius: var(--bs-datepicker-day-border-radius);
10667
+ background-color: var(--bs-datepicker-in-range-bg);
10668
+ color: var(--bs-datepicker-range-color);
10734
10669
  }
10735
-
10736
- .react-datepicker__year-dropdown,
10737
- .react-datepicker__month-dropdown,
10738
- .react-datepicker__month-year-dropdown {
10739
- background-color: #f0f0f0;
10740
- position: absolute;
10741
- width: 50%;
10742
- left: 25%;
10743
- top: 30px;
10744
- z-index: 1;
10745
- text-align: center;
10746
- border-radius: 0.3rem;
10747
- border: 1px solid #aeaeae;
10670
+ .react-datepicker__quarter-text--in-range[aria-disabled=true], .react-datepicker__quarter-text--in-selecting-range[aria-disabled=true] {
10671
+ background-color: var(--bs-datepicker-in-range-disabled-bg);
10672
+ color: var(--bs-datepicker-in-range-disabled-color);
10748
10673
  }
10749
- .react-datepicker__year-dropdown:hover,
10750
- .react-datepicker__month-dropdown:hover,
10751
- .react-datepicker__month-year-dropdown:hover {
10752
- cursor: pointer;
10674
+ .react-datepicker__quarter-text--in-range:not(.react-datepicker__quarter-text--range-start,
10675
+ .react-datepicker__quarter-text--range-end,
10676
+ .react-datepicker__quarter-text--disabled):hover, .react-datepicker__quarter-text--in-selecting-range:not(.react-datepicker__quarter-text--range-start,
10677
+ .react-datepicker__quarter-text--range-end,
10678
+ .react-datepicker__quarter-text--disabled):hover {
10679
+ background-color: var(--bs-datepicker-in-range-hover-bg);
10753
10680
  }
10754
- .react-datepicker__year-dropdown--scrollable,
10755
- .react-datepicker__month-dropdown--scrollable,
10756
- .react-datepicker__month-year-dropdown--scrollable {
10757
- height: 150px;
10758
- overflow-y: scroll;
10681
+ .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 {
10682
+ background-color: var(--bs-datepicker-in-range-hover-bg);
10759
10683
  }
10760
-
10761
- .react-datepicker__year-option,
10762
- .react-datepicker__month-option,
10763
- .react-datepicker__month-year-option {
10764
- line-height: 20px;
10765
- width: 100%;
10766
- display: block;
10767
- margin-left: auto;
10768
- margin-right: auto;
10684
+ .react-datepicker__quarter-text--range-start:not(.react-datepicker__quarter-text--disabled) {
10685
+ color: var(--bs-datepicker-range-start-color);
10686
+ background-color: var(--bs-datepicker-range-start-bg);
10769
10687
  }
10770
- .react-datepicker__year-option:first-of-type,
10771
- .react-datepicker__month-option:first-of-type,
10772
- .react-datepicker__month-year-option:first-of-type {
10773
- border-top-left-radius: 0.3rem;
10774
- border-top-right-radius: 0.3rem;
10688
+ .react-datepicker__quarter-text--range-end:not(.react-datepicker__quarter-text--disabled) {
10689
+ color: var(--bs-datepicker-range-end-color);
10690
+ background-color: var(--bs-datepicker-range-end-bg);
10775
10691
  }
10776
- .react-datepicker__year-option:last-of-type,
10777
- .react-datepicker__month-option:last-of-type,
10778
- .react-datepicker__month-year-option:last-of-type {
10779
- -webkit-user-select: none;
10780
- -moz-user-select: none;
10781
- user-select: none;
10782
- border-bottom-left-radius: 0.3rem;
10783
- border-bottom-right-radius: 0.3rem;
10784
- }
10785
- .react-datepicker__year-option:hover,
10786
- .react-datepicker__month-option:hover,
10787
- .react-datepicker__month-year-option:hover {
10788
- background-color: #ccc;
10789
- }
10790
- .react-datepicker__year-option:hover .react-datepicker__navigation--years-upcoming,
10791
- .react-datepicker__month-option:hover .react-datepicker__navigation--years-upcoming,
10792
- .react-datepicker__month-year-option:hover .react-datepicker__navigation--years-upcoming {
10793
- border-bottom-color: #b3b3b3;
10794
- }
10795
- .react-datepicker__year-option:hover .react-datepicker__navigation--years-previous,
10796
- .react-datepicker__month-option:hover .react-datepicker__navigation--years-previous,
10797
- .react-datepicker__month-year-option:hover .react-datepicker__navigation--years-previous {
10798
- border-top-color: #b3b3b3;
10799
- }
10800
- .react-datepicker__year-option--selected,
10801
- .react-datepicker__month-option--selected,
10802
- .react-datepicker__month-year-option--selected {
10803
- position: absolute;
10804
- left: 15px;
10692
+ .react-datepicker__quarter-text--disabled {
10693
+ cursor: default;
10694
+ color: var(--bs-datepicker-day-disabled-color);
10805
10695
  }
10806
-
10807
- .react-datepicker__close-icon {
10808
- cursor: pointer;
10809
- background-color: transparent;
10810
- border: 0;
10811
- outline: 0;
10812
- padding: 0 6px 0 0;
10696
+ .react-datepicker__quarter-text--disabled .overlay {
10813
10697
  position: absolute;
10814
- top: 0;
10815
- right: 0;
10816
- height: 100%;
10817
- display: table-cell;
10818
- vertical-align: middle;
10819
- }
10820
- .react-datepicker__close-icon::after {
10821
- cursor: pointer;
10822
- background-color: #216ba5;
10698
+ bottom: 70%;
10699
+ left: 50%;
10700
+ transform: translateX(-50%);
10701
+ background-color: #333;
10823
10702
  color: #fff;
10824
- border-radius: 50%;
10825
- height: 16px;
10826
- width: 16px;
10827
- padding: 2px;
10828
- font-size: 12px;
10829
- line-height: 1;
10830
- text-align: center;
10831
- display: table-cell;
10832
- vertical-align: middle;
10833
- content: "×";
10703
+ padding: 4px;
10704
+ border-radius: 4px;
10705
+ white-space: nowrap;
10706
+ visibility: hidden;
10707
+ opacity: 0;
10708
+ transition: visibility 0s, opacity 0.3s ease-in-out;
10834
10709
  }
10835
10710
 
10836
- .react-datepicker__today-button {
10837
- background: #f0f0f0;
10838
- border-top: 1px solid #aeaeae;
10711
+ .react-datepicker__year-text {
10839
10712
  cursor: pointer;
10840
- text-align: center;
10713
+ }
10714
+ .react-datepicker__year-text:not([aria-disabled=true], .react-datepicker__year-text--selected):hover {
10715
+ border-radius: var(--bs-datepicker-day-border-radius);
10716
+ background-color: var(--bs-datepicker-day-hover-bg);
10717
+ }
10718
+ .react-datepicker__year-text--today {
10841
10719
  font-weight: bold;
10842
- padding: 5px 0;
10843
- clear: left;
10720
+ }
10721
+ .react-datepicker__year-text--highlighted {
10722
+ border-radius: var(--bs-datepicker-highlighted-border-radius);
10723
+ background-color: var(--bs-datepicker-highlighted-bg);
10724
+ color: var(--bs-datepicker-highlighted-color);
10725
+ }
10726
+ .react-datepicker__year-text--highlighted:not([aria-disabled=true]):hover {
10727
+ background-color: var(--bs-datepicker-day-hover-bg);
10728
+ }
10729
+ .react-datepicker__year-text--holidays {
10730
+ position: relative;
10731
+ border-radius: var(--bs-datepicker-holidays-border-radius);
10732
+ background-color: var(--bs-datepicker-holidays-bg);
10733
+ color: var(--bs-datepicker-holidays-color);
10734
+ }
10735
+ .react-datepicker__year-text--holidays .overlay {
10736
+ position: absolute;
10737
+ bottom: 100%;
10738
+ left: 50%;
10739
+ transform: translateX(-50%);
10740
+ background-color: #333;
10741
+ color: #fff;
10742
+ padding: 4px;
10743
+ border-radius: 4px;
10744
+ white-space: nowrap;
10745
+ visibility: hidden;
10746
+ opacity: 0;
10747
+ transition: visibility 0s, opacity 0.3s ease-in-out;
10748
+ }
10749
+ .react-datepicker__year-text--holidays:not([aria-disabled=true]):hover {
10750
+ background-color: var(--bs-datepicker-day-hover-bg);
10751
+ }
10752
+ .react-datepicker__year-text--holidays:hover .overlay {
10753
+ visibility: visible;
10754
+ opacity: 1;
10755
+ }
10756
+ .react-datepicker__year-text--selected {
10757
+ color: var(--bs-datepicker-day-selected-color);
10758
+ background-color: var(--bs-datepicker-day-selected-bg);
10759
+ border-radius: var(--bs-datepicker-day-border-radius);
10760
+ }
10761
+ .react-datepicker__year-text--in-range, .react-datepicker__year-text--in-selecting-range {
10762
+ border-radius: var(--bs-datepicker-day-border-radius);
10763
+ background-color: var(--bs-datepicker-in-range-bg);
10764
+ color: var(--bs-datepicker-range-color);
10765
+ }
10766
+ .react-datepicker__year-text--in-range[aria-disabled=true], .react-datepicker__year-text--in-selecting-range[aria-disabled=true] {
10767
+ background-color: var(--bs-datepicker-in-range-disabled-bg);
10768
+ color: var(--bs-datepicker-in-range-disabled-color);
10769
+ }
10770
+ .react-datepicker__year-text--in-range:not(.react-datepicker__year-text--range-start,
10771
+ .react-datepicker__year-text--range-end,
10772
+ .react-datepicker__year-text--disabled):hover, .react-datepicker__year-text--in-selecting-range:not(.react-datepicker__year-text--range-start,
10773
+ .react-datepicker__year-text--range-end,
10774
+ .react-datepicker__year-text--disabled):hover {
10775
+ background-color: var(--bs-datepicker-in-range-hover-bg);
10776
+ }
10777
+ .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 {
10778
+ background-color: var(--bs-datepicker-in-range-hover-bg);
10779
+ }
10780
+ .react-datepicker__year-text--range-start:not(.react-datepicker__year-text--disabled) {
10781
+ color: var(--bs-datepicker-range-start-color);
10782
+ background-color: var(--bs-datepicker-range-start-bg);
10783
+ }
10784
+ .react-datepicker__year-text--range-end:not(.react-datepicker__year-text--disabled) {
10785
+ color: var(--bs-datepicker-range-end-color);
10786
+ background-color: var(--bs-datepicker-range-end-bg);
10787
+ }
10788
+ .react-datepicker__year-text--disabled {
10789
+ cursor: default;
10790
+ color: var(--bs-datepicker-day-disabled-color);
10791
+ }
10792
+ .react-datepicker__year-text--disabled .overlay {
10793
+ position: absolute;
10794
+ bottom: 70%;
10795
+ left: 50%;
10796
+ transform: translateX(-50%);
10797
+ background-color: #333;
10798
+ color: #fff;
10799
+ padding: 4px;
10800
+ border-radius: 4px;
10801
+ white-space: nowrap;
10802
+ visibility: hidden;
10803
+ opacity: 0;
10804
+ transition: visibility 0s, opacity 0.3s ease-in-out;
10844
10805
  }
10845
10806
 
10807
+ /* Removed following styles:
10808
+ view-calendar-icon
10809
+ year-read-view,
10810
+ month-read-view,
10811
+ month-year-read-view
10812
+ month-year-read-view
10813
+ year-dropdown,
10814
+ month-dropdown,
10815
+ month-year-dropdown
10816
+ year-option,
10817
+ month-option,
10818
+ month-year-option
10819
+ close-icon
10820
+ react-datepicker__navigation
10821
+ */
10846
10822
  .react-datepicker__portal {
10823
+ --bs-datepicker-portal-bg: rgba(var(--bs-black-rgb), 0.3);
10847
10824
  position: fixed;
10848
10825
  width: 100vw;
10849
10826
  height: 100vh;
10850
- background-color: rgba(0, 0, 0, 0.8);
10827
+ background-color: var(--bs-datepicker-portal-bg);
10851
10828
  left: 0;
10852
10829
  top: 0;
10853
10830
  justify-content: center;
10854
10831
  align-items: center;
10855
10832
  display: flex;
10856
- z-index: 2147483647;
10833
+ z-index: 1060;
10857
10834
  }
10858
10835
  .react-datepicker__portal .react-datepicker__day-name,
10859
10836
  .react-datepicker__portal .react-datepicker__day,
@@ -10869,10 +10846,6 @@ label .d-icon {
10869
10846
  line-height: 2rem;
10870
10847
  }
10871
10848
  }
10872
- .react-datepicker__portal .react-datepicker__current-month,
10873
- .react-datepicker__portal .react-datepicker-time__header {
10874
- font-size: 1.44rem;
10875
- }
10876
10849
 
10877
10850
  .react-datepicker__children-container {
10878
10851
  width: 13.8rem;
@@ -10895,260 +10868,7 @@ label .d-icon {
10895
10868
  white-space: nowrap;
10896
10869
  }
10897
10870
 
10898
- .react-datepicker__calendar-icon {
10899
- width: 1em;
10900
- height: 1em;
10901
- vertical-align: -0.125em;
10902
- }
10903
-
10904
- .react-datepicker-wrapper {
10905
- width: 100%;
10906
- margin-inline: auto;
10907
- }
10908
-
10909
- .react-datepicker {
10910
- --bs-datepicker-font-family: var(--bs-font-sans-serif);
10911
- --bs-datepicker-border: 0px;
10912
- --bs-datepicker-box-shadow: var(--bs-box-shadow);
10913
- --bs-datepicker-font-size: var(--bs-ref-spacer-4);
10914
- --bs-datepicker-header-gap: var(--bs-ref-spacer-4);
10915
- --bs-datepicker-header-padding: var(--bs-ref-spacer-4) var(--bs-ref-spacer-7);
10916
- --bs-datepicker-header-background-color: var(--bs-secondary-soft);
10917
- --bs-datepicker-header-border: 0;
10918
- --bs-datepicker-header-font-size: var(--bs-fs-6);
10919
- --bs-datepicker-header-button-padding: 0;
10920
- --bs-datepicker-header-select-padding: 0 var(--bs-ref-spacer-1);
10921
- --bs-datepicker-header-select-font-weight: var(--bs-fw-bold);
10922
- --bs-datepicker-header-select-menu-width: fit-content;
10923
- --bs-datepicker-day-names-margin: 0;
10924
- --bs-datepicker-day-names-font-size: var(--bs-ref-spacer-4);
10925
- --bs-datepicker-day-name-weight: var(--bs-fw-bold);
10926
- --bs-datepicker-day-name-margin: 0;
10927
- --bs-datepicker-day-name-padding: 0;
10928
- --bs-datepicker-day-name-size: var(--bs-ref-spacer-5);
10929
- --bs-datepicker-day-name-color: var(--bs-gray-500);
10930
- --bs-datepicker-month-gap: .875rem;
10931
- --bs-datepicker-month-padding: var(--bs-ref-spacer-4) var(--bs-ref-spacer-7) var(--bs-ref-spacer-6);
10932
- --bs-datepicker-month-margin: 0;
10933
- --bs-datepicker-month-color: var(--bs-white);
10934
- --bs-datepicker-week-gap: var(--bs-ref-spacer-8);
10935
- --bs-datepicker-day-margin: 0;
10936
- --bs-datepicker-day-font-size: var(--bs-fs-small);
10937
- --bs-datepicker-day-size: var(--bs-ref-spacer-5);
10938
- --bs-datepicker-day-padding: 0;
10939
- --bs-datepicker-day-radius: 100%;
10940
- --bs-datepicker-day-color: var(--bs-gray-900);
10941
- --bs-datepicker-day-disabled-color: var(--bs-gray-300);
10942
- --bs-datepicker-day-color-hover: var(--bs-gray-900);
10943
- --bs-datepicker-day-bg-hover: var(--bs-info-100);
10944
- --bs-datepicker-day-selected-color: var(--bs-white);
10945
- --bs-datepicker-day-selected-bg: var(--bs-secondary-500);
10946
- --bs-datepicker-day-in-range-color: var(--bs-dark);
10947
- --bs-datepicker-day-in-range-bg: var(--bs-secondary-100);
10948
- --bs-datepicker-day-outside-month-color: var(--bs-gray-400);
10949
- --bs-datepicker-day-today-font-weight: var(--bs-fw-normal);
10950
- --bs-datepicker-day-today-box-shadow: 0 0 0 2px var(--bs-secondary);
10951
- --bs-datepicker-time-container-margin: 0;
10952
- --bs-datepicker-time-container-align: center;
10953
- --bs-datepicker-time-input-width: 50%;
10954
- --bs-datepicker-time-input-margin: 0;
10955
- --bs-datepicker-time-input-align: center;
10956
- --bs-datepicker-time-input-padding: var(--bs-ref-spacer-4);
10957
- --bs-datepicker-time-input-gap: var(--bs-ref-spacer-2);
10958
- --bs-datepicker-time-input-label-weight: var(--bs-fw-bold);
10959
- --bs-datepicker-time-input-label-color: var(--bs-gray-700);
10960
- --bs-datepicker-time-input-label-size: var(--bs-fs-small);
10961
- font-family: var(--bs-datepicker-font-family);
10962
- font-size: var(--bs-datepicker-font-size);
10963
- border: var(--bs-datepicker-border);
10964
- box-shadow: var(--bs-datepicker-box-shadow);
10965
- /* Start time selector */
10966
- /* End time selector */
10967
- }
10968
- .react-datepicker .react-datepicker__header {
10969
- display: flex;
10970
- flex-direction: column;
10971
- gap: var(--bs-datepicker-header-gap);
10972
- padding: var(--bs-datepicker-header-padding);
10973
- font-size: var(--bs-datepicker-header-font-size);
10974
- background-color: var(--bs-datepicker-header-background-color);
10975
- border: var(--bs-datepicker-header-border);
10976
- }
10977
- .react-datepicker .react-datepicker__header .react-datepicker__day-names {
10978
- display: flex;
10979
- gap: var(--bs-ref-spacer-8);
10980
- margin: var(--bs-datepicker-day-names-margin);
10981
- font-size: var(--bs-datepicker-day-names-font-size);
10982
- }
10983
- .react-datepicker .react-datepicker__header .react-datepicker__day-name {
10984
- width: var(--bs-datepicker-day-name-size);
10985
- height: var(--bs-datepicker-day-name-size);
10986
- padding: var(--bs-datepicker-day-name-padding);
10987
- margin: var(--bs-datepicker-day-name-margin);
10988
- font-weight: var(--bs-datepicker-day-name-weight);
10989
- line-height: var(--bs-datepicker-day-name-size);
10990
- color: var(--bs-datepicker-day-name-color);
10991
- }
10992
- .react-datepicker.d-month-picker .react-datepicker__month-container .d-icon {
10993
- --bs-icon-component-color: var(--bs-datepicker-month-color);
10994
- }
10995
- .react-datepicker .react-datepicker__month {
10996
- display: flex;
10997
- flex-direction: column;
10998
- gap: var(--bs-datepicker-month-gap);
10999
- padding: var(--bs-datepicker-month-padding);
11000
- margin: var(--bs-datepicker-month-margin);
11001
- }
11002
- .react-datepicker .react-datepicker__week {
11003
- display: flex;
11004
- gap: var(--bs-datepicker-week-gap);
11005
- }
11006
- .react-datepicker .react-datepicker__day {
11007
- display: flex;
11008
- align-items: center;
11009
- justify-content: center;
11010
- width: var(--bs-datepicker-day-size);
11011
- height: var(--bs-datepicker-day-size);
11012
- padding: var(--bs-datepicker-day-padding);
11013
- margin: var(--bs-datepicker-day-margin);
11014
- font-size: var(--bs-datepicker-day-font-size);
11015
- line-height: var(--bs-datepicker-day-size);
11016
- color: var(--bs-datepicker-day-color);
11017
- }
11018
- .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 {
11019
- color: var(--bs-datepicker-day-selected-color);
11020
- background-color: var(--bs-datepicker-day-selected-bg);
11021
- box-shadow: 0 0 0 2px var(--bs-datepicker-day-selected-bg);
11022
- }
11023
- .react-datepicker .react-datepicker__day:not(.react-datepicker__day--selected,
11024
- .react-datepicker__month-text--selected,
11025
- .react-datepicker__quarter-text--selected,
11026
- .react-datepicker__year-text--selected):hover,
11027
- .react-datepicker .react-datepicker__month-text:not(.react-datepicker__day--selected,
11028
- .react-datepicker__month-text--selected,
11029
- .react-datepicker__quarter-text--selected,
11030
- .react-datepicker__year-text--selected):hover,
11031
- .react-datepicker .react-datepicker__quarter-text:not(.react-datepicker__day--selected,
11032
- .react-datepicker__month-text--selected,
11033
- .react-datepicker__quarter-text--selected,
11034
- .react-datepicker__year-text--selected):hover,
11035
- .react-datepicker .react-datepicker__year-text:not(.react-datepicker__day--selected,
11036
- .react-datepicker__month-text--selected,
11037
- .react-datepicker__quarter-text--selected,
11038
- .react-datepicker__year-text--selected):hover {
11039
- color: var(--bs-datepicker-day-color-hover);
11040
- background-color: var(--bs-datepicker-day-bg-hover);
11041
- border-radius: var(--bs-datepicker-day-radius);
11042
- box-shadow: 0 0 0 2px var(--bs-datepicker-day-bg-hover);
11043
- }
11044
- .react-datepicker .react-datepicker__day--disabled {
11045
- color: var(--bs-datepicker-day-disabled-color);
11046
- }
11047
- .react-datepicker .react-datepicker__day--selected,
11048
- .react-datepicker .react-datepicker__month--selected,
11049
- .react-datepicker .react-datepicker__quarter--selected,
11050
- .react-datepicker .react-datepicker__year--selected {
11051
- color: var(--bs-datepicker-day-selected-color);
11052
- background-color: var(--bs-datepicker-day-selected-bg);
11053
- border-radius: var(--bs-datepicker-day-radius);
11054
- box-shadow: 0 0 0 2px var(--bs-datepicker-day-selected-bg);
11055
- }
11056
- .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 {
11057
- color: var(--bs-datepicker-day-selected-color);
11058
- background-color: var(--bs-datepicker-day-selected-bg);
11059
- box-shadow: 0 0 0 2px var(--bs-datepicker-day-selected-bg);
11060
- }
11061
- .react-datepicker .react-datepicker__day--in-range,
11062
- .react-datepicker .react-datepicker__month-text--in-range,
11063
- .react-datepicker .react-datepicker__quarter-text--in-range,
11064
- .react-datepicker .react-datepicker__year-text--in-range,
11065
- .react-datepicker .react-datepicker__day--in-selecting-range,
11066
- .react-datepicker .react-datepicker__month-text--in-selecting-range,
11067
- .react-datepicker .react-datepicker__quarter-text--in-selecting-range,
11068
- .react-datepicker .react-datepicker__year-text--in-selecting-range,
11069
- .react-datepicker .react-datepicker__day--keyboard-selected,
11070
- .react-datepicker .react-datepicker__month-text--keyboard-selected,
11071
- .react-datepicker .react-datepicker__quarter-text--keyboard-selected,
11072
- .react-datepicker .react-datepicker__year-text--keyboard-selected {
11073
- color: var(--bs-datepicker-day-in-range-color);
11074
- background-color: var(--bs-datepicker-day-in-range-bg);
11075
- border-radius: var(--bs-datepicker-day-radius);
11076
- }
11077
- .react-datepicker .react-datepicker__day--outside-month {
11078
- color: var(--bs-datepicker-day-outside-month-color);
11079
- }
11080
- .react-datepicker .react-datepicker-wrapper {
11081
- margin-inline: auto;
11082
- }
11083
- .react-datepicker .react-datepicker__input-time-container {
11084
- width: 100%;
11085
- margin: var(--bs-datepicker-time-container-margin);
11086
- text-align: var(--bs-datepicker-time-container-align);
11087
- border-top: var(--bs-border-width) solid var(--bs-light);
11088
- }
11089
- .react-datepicker .react-datepicker__input-time-container .react-datepicker-time__caption {
11090
- display: none;
11091
- }
11092
- .react-datepicker .react-datepicker__input-time-container .react-datepicker-time__input-container {
11093
- width: 100%;
11094
- }
11095
- .react-datepicker .react-datepicker__input-time-container .react-datepicker-time__input-container .react-datepicker-time__input {
11096
- width: var(--bs-datepicker-time-input-width);
11097
- margin: var(--bs-datepicker-time-input-margin);
11098
- text-align: var(--bs-datepicker-time-input-align);
11099
- outline: 0;
11100
- }
11101
- .react-datepicker .react-datepicker__day--today {
11102
- font-weight: var(--bs-datepicker-day-today-font-weight);
11103
- border-radius: var(--bs-datepicker-day-radius);
11104
- box-shadow: var(--bs-datepicker-day-today-box-shadow);
11105
- }
11106
- .react-datepicker .d-datepicker-time {
11107
- gap: var(--bs-datepicker-time-input-gap);
11108
- padding: var(--bs-datepicker-time-input-padding);
11109
- }
11110
- .react-datepicker .d-datepicker-time .d-datepicker-time-label {
11111
- font-size: var(--bs-datepicker-time-input-label-size);
11112
- font-weight: var(--bs-datepicker-time-input-label-weight);
11113
- color: var(--bs-datepicker-time-input-label-color);
11114
- }
11115
- .react-datepicker .d-datepicker-header {
11116
- font-size: var(--bs-datepicker-header-font-size);
11117
- }
11118
- .react-datepicker .header-button {
11119
- --bs-btn-padding-y: var(--bs-datepicker-header-button-padding);
11120
- --bs-btn-padding-x: var(--bs-datepicker-header-button-padding);
11121
- }
11122
- .react-datepicker .header-button:hover, .react-datepicker .header-button:active {
11123
- color: inherit;
11124
- background-color: inherit;
11125
- }
11126
- .react-datepicker .header-button:focus {
11127
- --bs-btn-focus-outline-offset: 8px;
11128
- }
11129
- .react-datepicker .d-select:focus-within .input-group {
11130
- border-color: transparent;
11131
- box-shadow: none;
11132
- }
11133
- .react-datepicker .d-select .input-group {
11134
- --bs-input-border-width: 0;
11135
- }
11136
- .react-datepicker .d-select .d-select__indicators {
11137
- display: none;
11138
- }
11139
- .react-datepicker .d-select .d-select__control {
11140
- padding: var(--bs-datepicker-header-select-padding);
11141
- background-color: transparent;
11142
- }
11143
- .react-datepicker .d-select .d-select__single-value {
11144
- font-weight: var(--bs-datepicker-header-select-font-weight);
11145
- }
11146
- .react-datepicker .d-select__menu {
11147
- left: 50%;
11148
- min-width: var(--bs-datepicker-header-select-menu-width);
11149
- translate: -50%;
11150
- }
11151
-
10871
+ /* stylelint-enable */
11152
10872
  .d-datepicker-time {
11153
10873
  --bs-datepicker-time-input: 100%;
11154
10874
  --bs-datepicker-webkit-time-color: var(--bs-black);
@@ -11207,19 +10927,20 @@ label .d-icon {
11207
10927
  .d-box-file {
11208
10928
  --bs-box-file-gap: var(--bs-ref-spacer-4);
11209
10929
  --bs-box-file-bg: unset;
11210
- --bs-box-file-border: 1px dashed var(--bs-gray-700);
11211
- --bs-box-file-border-radius: var(--bs-border-radius);
10930
+ --bs-box-file-border: 1px dashed var(--bs-gray-100);
10931
+ --bs-box-file-border-radius: var(--bs-ref-spacer-1);
11212
10932
  --bs-box-file-padding: var(--bs-ref-spacer-8);
11213
10933
  --bs-box-file-content-max-width: 220px;
11214
10934
  --bs-box-file-icon-size: var(--bs-ref-spacer-14);
11215
- --bs-box-file-icon-color: var(--bs-secondary-300);
11216
- --bs-box-file-hover-border: 1px dashed var(--bs-secondary-700);
11217
- --bs-box-file-hover-bg: var(--bs-secondary-100);
11218
- --bs-box-file-selected-border: 1px dashed var(--bs-secondary-700);
10935
+ --bs-box-file-icon-color: var(--bs-primary);
10936
+ --bs-box-file-hover-border: 1px dashed var(--bs-primary-700);
10937
+ --bs-box-file-hover-bg: var(--bs-primary-25);
10938
+ --bs-box-file-selected-border: 1px dashed var(--bs-primary-700);
11219
10939
  --bs-box-file-selected-bg: var(--bs-white);
11220
- display: flex;
11221
- flex-direction: column;
11222
- gap: var(--bs-box-file-gap);
10940
+ --bs-box-file-disabled-border: 1px dashed var(--bs-gray-300);
10941
+ --bs-box-file-disabled-bg: var(--bs-gray-100);
10942
+ --bs-box-file-valid-border: 1px dashed var(--bs-success);
10943
+ --bs-box-file-invalid-border: 1px dashed var(--bs-danger);
11223
10944
  width: 100%;
11224
10945
  cursor: pointer;
11225
10946
  background: var(--bs-box-file-bg);
@@ -11234,6 +10955,17 @@ label .d-icon {
11234
10955
  background: var(--bs-box-file-selected-bg);
11235
10956
  border: var(--bs-box-file-selected-border);
11236
10957
  }
10958
+ .d-box-file.d-box-file-valid {
10959
+ border: var(--bs-box-file-valid-border);
10960
+ }
10961
+ .d-box-file.d-box-file-invalid {
10962
+ border: var(--bs-box-file-invalid-border);
10963
+ }
10964
+ .d-box-file.d-box-file-disabled {
10965
+ cursor: default;
10966
+ background: var(--bs-box-file-disabled-bg);
10967
+ border: var(--bs-box-file-disabled-border);
10968
+ }
11237
10969
  .d-box-file .d-icon {
11238
10970
  --bs-icon-size: var(--bs-box-file-icon-size);
11239
10971
  --bs-icon-color: var(--bs-box-file-icon-color);
@@ -11246,20 +10978,21 @@ label .d-icon {
11246
10978
  width: 100%;
11247
10979
  padding: var(--bs-box-file-padding);
11248
10980
  }
11249
- .d-box-file .d-box-file-dropzone:not(:last-child) {
11250
- padding-bottom: 0;
11251
- }
11252
10981
  .d-box-file .d-box-content {
11253
10982
  max-width: var(--bs-box-file-content-max-width);
11254
10983
  }
11255
- .d-box-file .d-box-files {
10984
+
10985
+ .d-box-files {
10986
+ --bs-box-file-list-gap: var(--bs-ref-spacer-4);
10987
+ --bs-box-file-list-padding: var(--bs-ref-spacer-0);
11256
10988
  display: flex;
11257
10989
  flex-direction: column;
11258
- gap: var(--bs-box-file-gap);
11259
- padding: 0 var(--bs-box-file-padding) var(--bs-box-file-padding);
10990
+ gap: var(--bs-box-file-list-gap);
10991
+ padding: var(--bs-box-file-list-padding);
11260
10992
  }
11261
- .d-box-file .d-box-files-text {
11262
- word-break: break-word;
10993
+ .d-box-files .input-group:focus-within {
10994
+ --bs-input-focus-border-color: var(--bs-gray-100);
10995
+ --bs-input-focus-box-shadow: none;
11263
10996
  }
11264
10997
 
11265
10998
  .splide__container {
@@ -11767,8 +11500,8 @@ label .d-icon {
11767
11500
  }
11768
11501
  .d-stepper-desktop.is-vertical .d-step .d-step-text-container {
11769
11502
  display: flex;
11770
- flex-direction: column;
11771
11503
  flex-grow: 1;
11504
+ flex-direction: column;
11772
11505
  align-items: flex-start;
11773
11506
  min-height: var(--bs-step-label-height);
11774
11507
  padding: var(--bs-step-vertical-label-padding);
@@ -11891,12 +11624,17 @@ label .d-icon {
11891
11624
  --bs-select-option-is-checkbox-font-weight: var(--bs-fw-normal);
11892
11625
  --bs-select-option-is-checkbox-color: var(--bs-gray-900);
11893
11626
  --bs-select-option-has-icon-icon-size: var(--bs-ref-spacer-4);
11894
- --bs-select-multi-value-padding-x: var(--bs-select-gap);
11895
- --bs-select-multi-value-padding-y: 0;
11627
+ --bs-select-multi-value-padding: 0 var(--bs-ref-spacer-1) 0 var(--bs-select-gap);
11896
11628
  --bs-select-multi-value-margin-right: var(--bs-select-gap);
11897
- --bs-select-multi-value-background: var(--bs-gray-100);
11629
+ --bs-select-multi-value-background: var(--bs-secondary-100);
11898
11630
  --bs-select-multi-value-border-radius: 0.25rem;
11899
11631
  --bs-select-multi-value-label-color: var(--bs-secondary);
11632
+ --bs-select-multi-value-remove-color: var(--bs-secondary);
11633
+ --bs-select-multi-value-remove-hover-color: var(--bs-white);
11634
+ --bs-select-multi-value-remove-hover-background: var(--bs-primary);
11635
+ --bs-select-indicator-separator-width: 1px;
11636
+ --bs-select-indicator-separator-margin: var(--bs-ref-spacer-0) var(--bs-ref-spacer-1);
11637
+ --bs-select-indicator-separator-color: var(--bs-transparent);
11900
11638
  --bs-select-indicator-width: var(--bs-ref-spacer-4);
11901
11639
  --bs-select-indicator-height: var(--bs-ref-spacer-4);
11902
11640
  }
@@ -12015,14 +11753,23 @@ label .d-icon {
12015
11753
  color: var(--bs-select-option-is-checkbox-color);
12016
11754
  }
12017
11755
  .d-select .d-select__multi-value {
12018
- padding: var(--bs-select-multi-value-padding-y) var(--bs-select-multi-value-padding-x);
12019
11756
  margin-right: var(--bs-select-multi-value-margin-right);
12020
11757
  background: var(--bs-select-multi-value-background);
12021
11758
  border-radius: var(--bs-select-multi-value-border-radius);
12022
11759
  }
12023
11760
  .d-select .d-select__multi-value__label {
11761
+ padding: var(--bs-select-multi-value-padding);
12024
11762
  color: var(--bs-select-multi-value-label-color);
12025
11763
  }
11764
+ .d-select .d-select__multi-value__remove {
11765
+ color: var(--bs-select-multi-value-remove-color);
11766
+ }
11767
+ .d-select .d-select__multi-value__remove:hover {
11768
+ color: var(--bs-select-multi-value-remove-hover-color);
11769
+ background-color: var(--bs-select-multi-value-remove-hover-background);
11770
+ border-top-right-radius: inherit;
11771
+ border-bottom-right-radius: inherit;
11772
+ }
12026
11773
  .d-select .d-select__control--has-icon,
12027
11774
  .d-select .d-select__option--has-icon {
12028
11775
  display: flex;
@@ -12042,8 +11789,16 @@ label .d-icon {
12042
11789
  width: var(--bs-select-indicator-width);
12043
11790
  height: var(--bs-select-indicator-height);
12044
11791
  }
12045
- .d-select .d-select__indicator-separator {
12046
- width: var(--bs-select-gap);
11792
+ .d-select .d-select__indicator .d-icon {
11793
+ --bs-icon-component-size: var(--bs-select-indicator-width);
11794
+ }
11795
+ .d-select .d-select__indicators .d-select__indicator-separator {
11796
+ width: var(--bs-select-indicator-separator-width);
11797
+ margin: var(--bs-select-indicator-separator-margin);
11798
+ background-color: var(--bs-select-indicator-separator-color);
11799
+ }
11800
+ .d-select .d-select__indicators .d-select__indicator-separator:not(:first-child) {
11801
+ --bs-select-indicator-separator-color: var(--bs-gray-100);
12047
11802
  }
12048
11803
  .d-select.disabled .d-select__control {
12049
11804
  background: var(--bs-input-disabled-bg);
@@ -12843,6 +12598,10 @@ label .d-icon {
12843
12598
  .visually-hidden-focusable:not(:focus):not(:focus-within):not(caption) {
12844
12599
  position: absolute !important;
12845
12600
  }
12601
+ .visually-hidden *,
12602
+ .visually-hidden-focusable:not(:focus):not(:focus-within) * {
12603
+ overflow: hidden !important;
12604
+ }
12846
12605
 
12847
12606
  .stretched-link::after {
12848
12607
  position: absolute;
@@ -12885,10 +12644,10 @@ label .d-icon {
12885
12644
 
12886
12645
  [class*=text-truncate-] {
12887
12646
  display: -webkit-box;
12888
- -webkit-line-clamp: var(--bs-text-truncate);
12889
- -webkit-box-orient: vertical;
12890
12647
  overflow: hidden;
12891
12648
  text-overflow: ellipsis;
12649
+ -webkit-line-clamp: var(--bs-text-truncate);
12650
+ -webkit-box-orient: vertical;
12892
12651
  white-space: normal;
12893
12652
  }
12894
12653