albinasoft-ui-package 1.0.75 → 1.0.77

package/dist/assets/css/custom-datetime-picker.css

@@ -1,11 +1,13 @@
+/* Genel Ayarlar */
 .react-datepicker-popper {
   z-index: 5;
 }
 
-.react-datepicker__navigation-icon::before, .react-datepicker__year-read-view--down-arrow,
+.react-datepicker__navigation-icon::before,
+.react-datepicker__year-read-view--down-arrow,
 .react-datepicker__month-read-view--down-arrow,
 .react-datepicker__month-year-read-view--down-arrow {
-  border-color: #ccc;
+  border-color: var(--bs-border-color);
   border-style: solid;
   border-width: 3px 3px 0 0;
   content: "";
@@ -23,17 +25,18 @@
 }
 
 .react-datepicker {
-  font-family: "Helvetica Neue", helvetica, arial, sans-serif;
+  font-family: var(--bs-body-font-family, "Helvetica Neue", Helvetica, Arial, sans-serif);
   font-size: 0.8rem;
-  background-color: #fff;
-  color: #000;
-  border: 1px solid #aeaeae;
-  border-radius: 0.3rem;
+  background-color: var(--bs-body-bg);
+  color: var(--bs-body-color);
+  border: 1px solid var(--bs-border-color);
+  border-radius: var(--bs-border-radius);
   display: inline-block;
   position: relative;
   line-height: initial;
 }
 
+/* Zaman Seçimi */
 .react-datepicker--time-only .react-datepicker__time-container {
   border-left: 0;
 }
@@ -48,22 +51,23 @@
   line-height: 0;
 }
 .react-datepicker-popper .react-datepicker__triangle {
-  stroke: #aeaeae;
+  stroke: var(--bs-border-color);
 }
-.react-datepicker-popper[data-placement^=bottom] .react-datepicker__triangle {
-  fill: #f0f0f0;
-  color: #f0f0f0;
+.react-datepicker-popper[data-placement^="bottom"] .react-datepicker__triangle {
+  fill: var(--bs-light-bg-subtle);
+  color: var(--bs-light-bg-subtle);
 }
-.react-datepicker-popper[data-placement^=top] .react-datepicker__triangle {
-  fill: #fff;
-  color: #fff;
+.react-datepicker-popper[data-placement^="top"] .react-datepicker__triangle {
+  fill: var(--bs-white);
+  color: var(--bs-white);
 }
 
+/* Header */
 .react-datepicker__header {
   text-align: center;
-  background-color: #f0f0f0;
-  border-bottom: 1px solid #aeaeae;
-  border-top-left-radius: 0.3rem;
+  background-color: var(--bs-light-bg-subtle);
+  border-bottom: 1px solid var(--bs-border-color);
+  border-top-left-radius: var(--bs-border-radius);
   padding: 8px 0;
   position: relative;
 }
@@ -79,6 +83,7 @@
   border-top-right-radius: 0.3rem;
 }
 
+/* Dropdown Container */
 .react-datepicker__year-dropdown-container--select,
 .react-datepicker__month-dropdown-container--select,
 .react-datepicker__month-year-dropdown-container--select,
@@ -89,11 +94,12 @@
   margin: 0 15px;
 }
 
+/* Başlık Metinleri */
 .react-datepicker__current-month,
 .react-datepicker-time__header,
 .react-datepicker-year-header {
   margin-top: 0;
-  color: #000;
+  color: var(--bs-body-color);
   font-weight: bold;
   font-size: 0.944rem;
 }
@@ -109,6 +115,7 @@ h2.react-datepicker__current-month {
   overflow: hidden;
 }
 
+/* Navigasyon */
 .react-datepicker__navigation {
   align-items: center;
   background: none;
@@ -149,9 +156,8 @@ h2.react-datepicker__current-month {
   top: -4px;
 }
 .react-datepicker__navigation:hover *::before {
-  border-color: rgb(165.75, 165.75, 165.75);
+  border-color: var(--bs-nav-hover-border, rgb(165, 165, 165));
 }
-
 .react-datepicker__navigation-icon {
   position: relative;
   top: -1px;
@@ -173,6 +179,7 @@ h2.react-datepicker__current-month {
   right: -7px;
 }
 
+/* Yıl & Ay */
 .react-datepicker__month-container {
   float: left;
 }
@@ -203,6 +210,7 @@ h2.react-datepicker__current-month {
   margin: 2px;
 }
 
+/* Zaman Girişi */
 .react-datepicker__input-time-container {
   clear: both;
   width: 100%;
@@ -236,15 +244,15 @@ h2.react-datepicker__current-month {
   display: inline-block;
 }
 
+/* Zaman Kutucuğu */
 .react-datepicker__time-container {
   float: right;
-  border-left: 1px solid #aeaeae;
+  border-left: 1px solid var(--bs-border-color);
   width: 85px;
 }
-
 .react-datepicker__time-container--with-today-button {
   display: inline;
-  border: 1px solid #aeaeae;
+  border: 1px solid var(--bs-border-color);
   border-radius: 0.3rem;
   position: absolute;
   right: -87px;
@@ -252,7 +260,7 @@ h2.react-datepicker__current-month {
 }
 .react-datepicker__time-container .react-datepicker__time {
   position: relative;
-  background: white;
+  background: var(--bs-white, #fff);
   border-bottom-right-radius: 0.3rem;
 }
 .react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box {
@@ -279,26 +287,27 @@ h2.react-datepicker__current-month {
 }
 .react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item:hover {
   cursor: pointer;
-  background-color: #f0f0f0;
+  background-color: var(--bs-light-hover-bg, #f0f0f0);
 }
 .react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item--selected {
-  background-color: #216ba5;
-  color: white;
+  background-color: var(--bs-primary, #216ba5);
+  color: var(--bs-white, #fff);
   font-weight: bold;
 }
 .react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item--selected:hover {
-  background-color: #216ba5;
+  background-color: var(--bs-primary, #216ba5);
 }
 .react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item--disabled {
-  color: #ccc;
+  color: var(--bs-gray-300, #ccc);
 }
 .react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item--disabled:hover {
   cursor: default;
   background-color: transparent;
 }
 
+/* Hafta Numarası */
 .react-datepicker__week-number {
-  color: #ccc;
+  color: var(--bs-gray-300, #ccc);
   display: inline-block;
   width: 1.7rem;
   line-height: 1.7rem;
@@ -310,50 +319,43 @@ h2.react-datepicker__current-month {
 }
 .react-datepicker__week-number.react-datepicker__week-number--clickable:not(.react-datepicker__week-number--selected):hover {
   border-radius: 0.3rem;
-  background-color: #f0f0f0;
+  background-color: var(--bs-light-hover-bg, #f0f0f0);
 }
 .react-datepicker__week-number--selected {
   border-radius: 0.3rem;
-  background-color: #216ba5;
-  color: #fff;
+  background-color: var(--bs-primary, #216ba5);
+  color: var(--bs-white, #fff);
 }
 .react-datepicker__week-number--selected:hover {
-  background-color: rgb(28.75, 93.2196969697, 143.75);
-}
-
-.react-datepicker__day-names {
-  white-space: nowrap;
-  margin-bottom: -8px;
-}
-
-.react-datepicker__week {
-  white-space: nowrap;
+  background-color: var(--bs-primary-hover-bg, var(--bs-primary, rgb(28,93,144)));
 }
 
+/* Gün, Ay, Yıl */
 .react-datepicker__day-name,
 .react-datepicker__day,
 .react-datepicker__time-name {
-  color: #000;
+  color: var(--bs-body-color, #000);
   display: inline-block;
   width: 1.7rem;
   line-height: 1.7rem;
   text-align: center;
   margin: 0.166rem;
 }
-
 .react-datepicker__day,
 .react-datepicker__month-text,
 .react-datepicker__quarter-text,
 .react-datepicker__year-text {
   cursor: pointer;
 }
-.react-datepicker__day:not([aria-disabled=true]):hover,
-.react-datepicker__month-text:not([aria-disabled=true]):hover,
-.react-datepicker__quarter-text:not([aria-disabled=true]):hover,
-.react-datepicker__year-text:not([aria-disabled=true]):hover {
-  border-radius: 0.3rem;
-  background-color: #f0f0f0;
+.react-datepicker__day:not([aria-disabled="true"]):hover,
+.react-datepicker__month-text:not([aria-disabled="true"]):hover,
+.react-datepicker__quarter-text:not([aria-disabled="true"]):hover,
+.react-datepicker__year-text:not([aria-disabled="true"]):hover {
+  border-radius: var(--bs-border-radius);
+  background-color: var(--bs-light-hover-bg, #f0f0f0);
 }
+
+/* Bugün & Seçili */
 .react-datepicker__day--today,
 .react-datepicker__month-text--today,
 .react-datepicker__quarter-text--today,
@@ -365,35 +367,39 @@ h2.react-datepicker__current-month {
 .react-datepicker__quarter-text--highlighted,
 .react-datepicker__year-text--highlighted {
   border-radius: 0.3rem;
-  background-color: #3dcc4a;
-  color: #fff;
+  background-color: var(--bs-success, #3dcc4a);
+  color: var(--bs-white, #fff);
 }
-.react-datepicker__day--highlighted:not([aria-disabled=true]):hover,
-.react-datepicker__month-text--highlighted:not([aria-disabled=true]):hover,
-.react-datepicker__quarter-text--highlighted:not([aria-disabled=true]):hover,
-.react-datepicker__year-text--highlighted:not([aria-disabled=true]):hover {
-  background-color: rgb(49.8551020408, 189.6448979592, 62.5632653061);
+.react-datepicker__day--highlighted:not([aria-disabled="true"]):hover,
+.react-datepicker__month-text--highlighted:not([aria-disabled="true"]):hover,
+.react-datepicker__quarter-text--highlighted:not([aria-disabled="true"]):hover,
+.react-datepicker__year-text--highlighted:not([aria-disabled="true"]):hover {
+  background-color: var(--bs-success-hover-bg, rgb(50,190,63));
 }
+
+/* Özel Highlight Renkleri */
 .react-datepicker__day--highlighted-custom-1,
 .react-datepicker__month-text--highlighted-custom-1,
 .react-datepicker__quarter-text--highlighted-custom-1,
 .react-datepicker__year-text--highlighted-custom-1 {
-  color: magenta;
+  color: var(--bs-pink, magenta);
 }
 .react-datepicker__day--highlighted-custom-2,
 .react-datepicker__month-text--highlighted-custom-2,
 .react-datepicker__quarter-text--highlighted-custom-2,
 .react-datepicker__year-text--highlighted-custom-2 {
-  color: green;
+  color: var(--bs-success, green);
 }
+
+/* Tatil Günleri */
 .react-datepicker__day--holidays,
 .react-datepicker__month-text--holidays,
 .react-datepicker__quarter-text--holidays,
 .react-datepicker__year-text--holidays {
   position: relative;
   border-radius: 0.3rem;
-  background-color: #ff6803;
-  color: #fff;
+  background-color: var(--bs-warning, #ff6803);
+  color: var(--bs-white, #fff);
 }
 .react-datepicker__day--holidays .overlay,
 .react-datepicker__month-text--holidays .overlay,
@@ -403,8 +409,8 @@ h2.react-datepicker__current-month {
   bottom: 100%;
   left: 50%;
   transform: translateX(-50%);
-  background-color: #333;
-  color: #fff;
+  background-color: var(--bs-dark, #333);
+  color: var(--bs-white, #fff);
   padding: 4px;
   border-radius: 4px;
   white-space: nowrap;
@@ -412,11 +418,8 @@ h2.react-datepicker__current-month {
   opacity: 0;
   transition: visibility 0s, opacity 0.3s ease-in-out;
 }
-.react-datepicker__day--holidays:not([aria-disabled=true]):hover,
-.react-datepicker__month-text--holidays:not([aria-disabled=true]):hover,
-.react-datepicker__quarter-text--holidays:not([aria-disabled=true]):hover,
-.react-datepicker__year-text--holidays:not([aria-disabled=true]):hover {
-  background-color: rgb(207, 82.9642857143, 0);
+.react-datepicker__day--holidays:not([aria-disabled="true"]):hover {
+  background-color: var(--bs-warning-hover-bg, rgb(207,83,0));
 }
 .react-datepicker__day--holidays:hover .overlay,
 .react-datepicker__month-text--holidays:hover .overlay,
@@ -425,7 +428,11 @@ h2.react-datepicker__current-month {
   visibility: visible;
   opacity: 1;
 }
-.react-datepicker__day--selected, .react-datepicker__day--in-selecting-range, .react-datepicker__day--in-range,
+
+/* Seçili Gün/Ay/Yıl */
+.react-datepicker__day--selected,
+.react-datepicker__day--in-selecting-range,
+.react-datepicker__day--in-range,
 .react-datepicker__month-text--selected,
 .react-datepicker__month-text--in-selecting-range,
 .react-datepicker__month-text--in-range,
@@ -435,94 +442,69 @@ h2.react-datepicker__current-month {
 .react-datepicker__year-text--selected,
 .react-datepicker__year-text--in-selecting-range,
 .react-datepicker__year-text--in-range {
-  border-radius: 0.3rem;
-  background-color: #216ba5;
-  color: #fff;
-}
-.react-datepicker__day--selected:not([aria-disabled=true]):hover, .react-datepicker__day--in-selecting-range:not([aria-disabled=true]):hover, .react-datepicker__day--in-range:not([aria-disabled=true]):hover,
-.react-datepicker__month-text--selected:not([aria-disabled=true]):hover,
-.react-datepicker__month-text--in-selecting-range:not([aria-disabled=true]):hover,
-.react-datepicker__month-text--in-range:not([aria-disabled=true]):hover,
-.react-datepicker__quarter-text--selected:not([aria-disabled=true]):hover,
-.react-datepicker__quarter-text--in-selecting-range:not([aria-disabled=true]):hover,
-.react-datepicker__quarter-text--in-range:not([aria-disabled=true]):hover,
-.react-datepicker__year-text--selected:not([aria-disabled=true]):hover,
-.react-datepicker__year-text--in-selecting-range:not([aria-disabled=true]):hover,
-.react-datepicker__year-text--in-range:not([aria-disabled=true]):hover {
-  background-color: rgb(28.75, 93.2196969697, 143.75);
-}
+  border-radius: var(--bs-border-radius);
+  background-color: var(--bs-primary, #216ba5);
+  color: var(--bs-white, #fff);
+}
+.react-datepicker__day--selected:not([aria-disabled="true"]):hover,
+.react-datepicker__day--in-selecting-range:not([aria-disabled="true"]):hover,
+.react-datepicker__day--in-range:not([aria-disabled="true"]):hover,
+.react-datepicker__month-text--selected:not([aria-disabled="true"]):hover,
+.react-datepicker__month-text--in-selecting-range:not([aria-disabled="true"]):hover,
+.react-datepicker__month-text--in-range:not([aria-disabled="true"]):hover,
+.react-datepicker__quarter-text--selected:not([aria-disabled="true"]):hover,
+.react-datepicker__quarter-text--in-selecting-range:not([aria-disabled="true"]):hover,
+.react-datepicker__quarter-text--in-range:not([aria-disabled="true"]):hover,
+.react-datepicker__year-text--selected:not([aria-disabled="true"]):hover,
+.react-datepicker__year-text--in-selecting-range:not([aria-disabled="true"]):hover,
+.react-datepicker__year-text--in-range:not([aria-disabled="true"]):hover {
+  background-color: var(--bs-primary-hover-bg, var(--bs-primary, rgb(29,93,144)));
+}
+
+/* Klavye Seçimi */
 .react-datepicker__day--keyboard-selected,
 .react-datepicker__month-text--keyboard-selected,
 .react-datepicker__quarter-text--keyboard-selected,
 .react-datepicker__year-text--keyboard-selected {
   border-radius: 0.3rem;
-  background-color: rgb(186.25, 217.0833333333, 241.25);
-  color: rgb(0, 0, 0);
-}
-.react-datepicker__day--keyboard-selected:not([aria-disabled=true]):hover,
-.react-datepicker__month-text--keyboard-selected:not([aria-disabled=true]):hover,
-.react-datepicker__quarter-text--keyboard-selected:not([aria-disabled=true]):hover,
-.react-datepicker__year-text--keyboard-selected:not([aria-disabled=true]):hover {
-  background-color: rgb(28.75, 93.2196969697, 143.75);
-}
-.react-datepicker__day--in-selecting-range:not(.react-datepicker__day--in-range,
-.react-datepicker__month-text--in-range,
-.react-datepicker__quarter-text--in-range,
-.react-datepicker__year-text--in-range),
-.react-datepicker__month-text--in-selecting-range:not(.react-datepicker__day--in-range,
-.react-datepicker__month-text--in-range,
-.react-datepicker__quarter-text--in-range,
-.react-datepicker__year-text--in-range),
-.react-datepicker__quarter-text--in-selecting-range:not(.react-datepicker__day--in-range,
-.react-datepicker__month-text--in-range,
-.react-datepicker__quarter-text--in-range,
-.react-datepicker__year-text--in-range),
-.react-datepicker__year-text--in-selecting-range:not(.react-datepicker__day--in-range,
-.react-datepicker__month-text--in-range,
-.react-datepicker__quarter-text--in-range,
-.react-datepicker__year-text--in-range) {
-  background-color: rgba(33, 107, 165, 0.5);
-}
-.react-datepicker__month--selecting-range .react-datepicker__day--in-range:not(.react-datepicker__day--in-selecting-range,
-.react-datepicker__month-text--in-selecting-range,
-.react-datepicker__quarter-text--in-selecting-range,
-.react-datepicker__year-text--in-selecting-range), .react-datepicker__year--selecting-range .react-datepicker__day--in-range:not(.react-datepicker__day--in-selecting-range,
-.react-datepicker__month-text--in-selecting-range,
-.react-datepicker__quarter-text--in-selecting-range,
-.react-datepicker__year-text--in-selecting-range),
-.react-datepicker__month--selecting-range .react-datepicker__month-text--in-range:not(.react-datepicker__day--in-selecting-range,
-.react-datepicker__month-text--in-selecting-range,
-.react-datepicker__quarter-text--in-selecting-range,
-.react-datepicker__year-text--in-selecting-range),
-.react-datepicker__year--selecting-range .react-datepicker__month-text--in-range:not(.react-datepicker__day--in-selecting-range,
-.react-datepicker__month-text--in-selecting-range,
-.react-datepicker__quarter-text--in-selecting-range,
-.react-datepicker__year-text--in-selecting-range),
-.react-datepicker__month--selecting-range .react-datepicker__quarter-text--in-range:not(.react-datepicker__day--in-selecting-range,
-.react-datepicker__month-text--in-selecting-range,
-.react-datepicker__quarter-text--in-selecting-range,
-.react-datepicker__year-text--in-selecting-range),
-.react-datepicker__year--selecting-range .react-datepicker__quarter-text--in-range:not(.react-datepicker__day--in-selecting-range,
-.react-datepicker__month-text--in-selecting-range,
-.react-datepicker__quarter-text--in-selecting-range,
-.react-datepicker__year-text--in-selecting-range),
-.react-datepicker__month--selecting-range .react-datepicker__year-text--in-range:not(.react-datepicker__day--in-selecting-range,
-.react-datepicker__month-text--in-selecting-range,
-.react-datepicker__quarter-text--in-selecting-range,
-.react-datepicker__year-text--in-selecting-range),
-.react-datepicker__year--selecting-range .react-datepicker__year-text--in-range:not(.react-datepicker__day--in-selecting-range,
-.react-datepicker__month-text--in-selecting-range,
-.react-datepicker__quarter-text--in-selecting-range,
-.react-datepicker__year-text--in-selecting-range) {
-  background-color: #f0f0f0;
-  color: #000;
-}
+  background-color: var(--bs-light-bg-subtle, rgb(186,217,241));
+  color: var(--bs-black, #000);
+}
+.react-datepicker__day--keyboard-selected:not([aria-disabled="true"]):hover,
+.react-datepicker__month-text--keyboard-selected:not([aria-disabled="true"]):hover,
+.react-datepicker__quarter-text--keyboard-selected:not([aria-disabled="true"]):hover,
+.react-datepicker__year-text--keyboard-selected:not([aria-disabled="true"]):hover {
+  background-color: var(--bs-primary-hover-bg, var(--bs-primary, rgb(29,93,144)));
+}
+
+/* Seçim Aralığı */
+.react-datepicker__day--in-selecting-range:not(.react-datepicker__day--in-range),
+.react-datepicker__month-text--in-selecting-range:not(.react-datepicker__month-text--in-range),
+.react-datepicker__quarter-text--in-selecting-range:not(.react-datepicker__quarter-text--in-range),
+.react-datepicker__year-text--in-selecting-range:not(.react-datepicker__year-text--in-range) {
+  background-color: var(--bs-dark-soft, rgba(33,107,165,0.5));
+}
+
+/* Seçim Aralığı (Ay/Yıl) */
+.react-datepicker__month--selecting-range .react-datepicker__day--in-range:not(.react-datepicker__day--in-selecting-range),
+.react-datepicker__year--selecting-range .react-datepicker__day--in-range:not(.react-datepicker__day--in-selecting-range),
+.react-datepicker__month--selecting-range .react-datepicker__month-text--in-range:not(.react-datepicker__month-text--in-selecting-range),
+.react-datepicker__year--selecting-range .react-datepicker__month-text--in-range:not(.react-datepicker__month-text--in-selecting-range),
+.react-datepicker__month--selecting-range .react-datepicker__quarter-text--in-range:not(.react-datepicker__quarter-text--in-selecting-range),
+.react-datepicker__year--selecting-range .react-datepicker__quarter-text--in-range:not(.react-datepicker__quarter-text--in-selecting-range),
+.react-datepicker__month--selecting-range .react-datepicker__year-text--in-range:not(.react-datepicker__year-text--in-selecting-range),
+.react-datepicker__year--selecting-range .react-datepicker__year-text--in-range:not(.react-datepicker__year-text--in-selecting-range) {
+  background-color: var(--bs-light-bg-subtle, #f0f0f0);
+  color: var(--bs-black, #000);
+}
+
+/* Devre Dışı Günler */
 .react-datepicker__day--disabled,
 .react-datepicker__month-text--disabled,
 .react-datepicker__quarter-text--disabled,
 .react-datepicker__year-text--disabled {
   cursor: default;
-  color: #ccc;
+  color: var(--bs-gray-300, #ccc);
 }
 .react-datepicker__day--disabled .overlay,
 .react-datepicker__month-text--disabled .overlay,
@@ -532,8 +514,8 @@ h2.react-datepicker__current-month {
   bottom: 70%;
   left: 50%;
   transform: translateX(-50%);
-  background-color: #333;
-  color: #fff;
+  background-color: var(--bs-dark, #333);
+  color: var(--bs-white, #fff);
   padding: 4px;
   border-radius: 4px;
   white-space: nowrap;
@@ -542,6 +524,7 @@ h2.react-datepicker__current-month {
   transition: visibility 0s, opacity 0.3s ease-in-out;
 }
 
+/* Input Container */
 .react-datepicker__input-container {
   position: relative;
   display: inline-block;
@@ -552,11 +535,11 @@ h2.react-datepicker__current-month {
   padding: 0.5rem;
   box-sizing: content-box;
 }
-
 .react-datepicker__view-calendar-icon input {
   padding: 6px 10px 5px 25px;
 }
 
+/* Ok Görünümü */
 .react-datepicker__year-read-view,
 .react-datepicker__month-read-view,
 .react-datepicker__month-year-read-view {
@@ -570,12 +553,11 @@ h2.react-datepicker__current-month {
   cursor: pointer;
 }
 .react-datepicker__year-read-view:hover .react-datepicker__year-read-view--down-arrow,
-.react-datepicker__year-read-view:hover .react-datepicker__month-read-view--down-arrow,
 .react-datepicker__month-read-view:hover .react-datepicker__year-read-view--down-arrow,
 .react-datepicker__month-read-view:hover .react-datepicker__month-read-view--down-arrow,
 .react-datepicker__month-year-read-view:hover .react-datepicker__year-read-view--down-arrow,
 .react-datepicker__month-year-read-view:hover .react-datepicker__month-read-view--down-arrow {
-  border-top-color: rgb(178.5, 178.5, 178.5);
+  border-top-color: var(--bs-gray-400, var(--bs-gray, rgb(178,178,178)));
 }
 .react-datepicker__year-read-view--down-arrow,
 .react-datepicker__month-read-view--down-arrow,
@@ -585,10 +567,11 @@ h2.react-datepicker__current-month {
   top: 0;
 }
 
+/* Dropdowns */
 .react-datepicker__year-dropdown,
 .react-datepicker__month-dropdown,
 .react-datepicker__month-year-dropdown {
-  background-color: #f0f0f0;
+  background-color: var(--bs-light-bg-subtle, #f0f0f0);
   position: absolute;
   width: 50%;
   left: 25%;
@@ -596,7 +579,7 @@ h2.react-datepicker__current-month {
   z-index: 1;
   text-align: center;
   border-radius: 0.3rem;
-  border: 1px solid #aeaeae;
+  border: 1px solid var(--bs-border-color);
 }
 .react-datepicker__year-dropdown:hover,
 .react-datepicker__month-dropdown:hover,
@@ -610,6 +593,7 @@ h2.react-datepicker__current-month {
   overflow-y: scroll;
 }
 
+/* Dropdown Seçenekleri */
 .react-datepicker__year-option,
 .react-datepicker__month-option,
 .react-datepicker__month-year-option {
@@ -628,9 +612,6 @@ h2.react-datepicker__current-month {
 .react-datepicker__year-option:last-of-type,
 .react-datepicker__month-option:last-of-type,
 .react-datepicker__month-year-option:last-of-type {
-  -webkit-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
   user-select: none;
   border-bottom-left-radius: 0.3rem;
   border-bottom-right-radius: 0.3rem;
@@ -638,17 +619,17 @@ h2.react-datepicker__current-month {
 .react-datepicker__year-option:hover,
 .react-datepicker__month-option:hover,
 .react-datepicker__month-year-option:hover {
-  background-color: #ccc;
+  background-color: var(--bs-gray-hover-bg, #ccc);
 }
 .react-datepicker__year-option:hover .react-datepicker__navigation--years-upcoming,
 .react-datepicker__month-option:hover .react-datepicker__navigation--years-upcoming,
 .react-datepicker__month-year-option:hover .react-datepicker__navigation--years-upcoming {
-  border-bottom-color: rgb(178.5, 178.5, 178.5);
+  border-bottom-color: var(--bs-gray-hover-bg, #ccc);
 }
 .react-datepicker__year-option:hover .react-datepicker__navigation--years-previous,
 .react-datepicker__month-option:hover .react-datepicker__navigation--years-previous,
 .react-datepicker__month-year-option:hover .react-datepicker__navigation--years-previous {
-  border-top-color: rgb(178.5, 178.5, 178.5);
+  border-top-color: var(--bs-gray-hover-bg, #ccc);
 }
 .react-datepicker__year-option--selected,
 .react-datepicker__month-option--selected,
@@ -657,6 +638,7 @@ h2.react-datepicker__current-month {
   left: 15px;
 }
 
+/* Kapatma Ikonu */
 .react-datepicker__close-icon {
   cursor: pointer;
   background-color: transparent;
@@ -672,8 +654,8 @@ h2.react-datepicker__current-month {
 }
 .react-datepicker__close-icon::after {
   cursor: pointer;
-  background-color: #216ba5;
-  color: #fff;
+  background-color: var(--bs-primary, #216ba5);
+  color: var(--bs-white, #fff);
   border-radius: 50%;
   height: 16px;
   width: 16px;
@@ -690,12 +672,13 @@ h2.react-datepicker__current-month {
 }
 .react-datepicker__close-icon--disabled::after {
   cursor: default;
-  background-color: #ccc;
+  background-color: var(--bs-gray, #ccc);
 }
 
+/* Bugün Butonu */
 .react-datepicker__today-button {
-  background: #f0f0f0;
-  border-top: 1px solid #aeaeae;
+  background: var(--bs-light-bg-subtle, #f0f0f0);
+  border-top: 1px solid var(--bs-border-color);
   cursor: pointer;
   text-align: center;
   font-weight: bold;
@@ -703,11 +686,12 @@ h2.react-datepicker__current-month {
   clear: left;
 }
 
+/* Portal */
 .react-datepicker__portal {
   position: fixed;
   width: 100vw;
   height: 100vh;
-  background-color: rgba(0, 0, 0, 0.8);
+  background-color: var(--bs-portal-bg, rgba(0, 0, 0, 0.8));
   left: 0;
   top: 0;
   justify-content: center;
@@ -734,6 +718,7 @@ h2.react-datepicker__current-month {
   font-size: 1.44rem;
 }
 
+/* Çocuk Konteyner */
 .react-datepicker__children-container {
   width: 13.8rem;
   margin: 0.4rem;
@@ -742,6 +727,7 @@ h2.react-datepicker__current-month {
   height: auto;
 }
 
+/* Erişilebilirlik */
 .react-datepicker__aria-live {
   position: absolute;
   clip-path: circle(0);
@@ -754,33 +740,33 @@ h2.react-datepicker__current-month {
   white-space: nowrap;
 }
 
+/* Takvim İkonu */
 .react-datepicker__calendar-icon {
   width: 1em;
   height: 1em;
   vertical-align: -0.125em;
 }
 
-
+/* Yıl Navigasyon Okları */
 .react-datepicker__navigation--years-upcoming::before {
   content: "";
   position: absolute;
   right: 8px;
   top: 70%;
   transform: translateY(-50%) rotate(-135deg);
-  border: solid #000; /* ikon rengi */
+  border: solid var(--bs-black, #000);
   border-width: 0 2px 2px 0;
   display: inline-block;
   width: 15px;
   height: 15px;
 }
-
 .react-datepicker__navigation--years-previous::before {
   content: "";
   position: absolute;
   right: 8px;
   top: 30%;
   transform: translateY(-50%) rotate(45deg);
-  border: solid #000; /* ikon rengi */
+  border: solid var(--bs-black, #000);
   border-width: 0 2px 2px 0;
   display: inline-block;
   width: 15px;

package/dist/components/CustomProgressBar.d.ts

@@ -1,5 +1,5 @@
 import React from "react";
-import "../assets/css/ProgressBar.css";
+import "../assets/css/custom-progress-bar.css";
 interface CustomProgressBarProps {
     activeStep: number;
     stepLabels: string[];

package/dist/components/CustomProgressBar.js

@@ -4,7 +4,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 var react_1 = __importDefault(require("react"));
-require("../assets/css/ProgressBar.css");
+require("../assets/css/custom-progress-bar.css");
 var CustomProgressBar = function (_a) {
     var activeStep = _a.activeStep, stepLabels = _a.stepLabels, onStepClick = _a.onStepClick;
     return (react_1.default.createElement("div", { className: "progress-bar-container" },

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "albinasoft-ui-package",
-  "version": "1.0.75",
+  "version": "1.0.77",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "scripts": {