akfatimeline 1.0.4 → 1.0.6

package/dist/Timeline.js

@@ -12,6 +12,834 @@ return /******/ (() => { // webpackBootstrap
 /******/ 	"use strict";
 /******/ 	var __webpack_modules__ = ({
 
+/***/ 941:
+/***/ ((module, __webpack_exports__, __webpack_require__) => {
+
+/* harmony export */ __webpack_require__.d(__webpack_exports__, {
+/* harmony export */   A: () => (__WEBPACK_DEFAULT_EXPORT__)
+/* harmony export */ });
+/* harmony import */ var _css_loader_dist_runtime_noSourceMaps_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(601);
+/* harmony import */ var _css_loader_dist_runtime_noSourceMaps_js__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_css_loader_dist_runtime_noSourceMaps_js__WEBPACK_IMPORTED_MODULE_0__);
+/* harmony import */ var _css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(314);
+/* harmony import */ var _css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1__);
+// Imports
+
+
+var ___CSS_LOADER_EXPORT___ = _css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1___default()((_css_loader_dist_runtime_noSourceMaps_js__WEBPACK_IMPORTED_MODULE_0___default()));
+// Module
+___CSS_LOADER_EXPORT___.push([module.id, `.flatpickr-calendar {
+  background: transparent;
+  opacity: 0;
+  display: none;
+  text-align: center;
+  visibility: hidden;
+  padding: 0;
+  -webkit-animation: none;
+          animation: none;
+  direction: ltr;
+  border: 0;
+  font-size: 14px;
+  line-height: 24px;
+  border-radius: 5px;
+  position: absolute;
+  width: 307.875px;
+  -webkit-box-sizing: border-box;
+          box-sizing: border-box;
+  -ms-touch-action: manipulation;
+      touch-action: manipulation;
+  -webkit-box-shadow: 0 3px 13px rgba(0,0,0,0.08);
+          box-shadow: 0 3px 13px rgba(0,0,0,0.08);
+}
+.flatpickr-calendar.open,
+.flatpickr-calendar.inline {
+  opacity: 1;
+  max-height: 640px;
+  visibility: visible;
+}
+.flatpickr-calendar.open {
+  display: inline-block;
+  z-index: 99999;
+}
+.flatpickr-calendar.animate.open {
+  -webkit-animation: fpFadeInDown 300ms cubic-bezier(0.23, 1, 0.32, 1);
+          animation: fpFadeInDown 300ms cubic-bezier(0.23, 1, 0.32, 1);
+}
+.flatpickr-calendar.inline {
+  display: block;
+  position: relative;
+  top: 2px;
+}
+.flatpickr-calendar.static {
+  position: absolute;
+  top: calc(100% + 2px);
+}
+.flatpickr-calendar.static.open {
+  z-index: 999;
+  display: block;
+}
+.flatpickr-calendar.multiMonth .flatpickr-days .dayContainer:nth-child(n+1) .flatpickr-day.inRange:nth-child(7n+7) {
+  -webkit-box-shadow: none !important;
+          box-shadow: none !important;
+}
+.flatpickr-calendar.multiMonth .flatpickr-days .dayContainer:nth-child(n+2) .flatpickr-day.inRange:nth-child(7n+1) {
+  -webkit-box-shadow: -2px 0 0 #e6e6e6, 5px 0 0 #e6e6e6;
+          box-shadow: -2px 0 0 #e6e6e6, 5px 0 0 #e6e6e6;
+}
+.flatpickr-calendar .hasWeeks .dayContainer,
+.flatpickr-calendar .hasTime .dayContainer {
+  border-bottom: 0;
+  border-bottom-right-radius: 0;
+  border-bottom-left-radius: 0;
+}
+.flatpickr-calendar .hasWeeks .dayContainer {
+  border-left: 0;
+}
+.flatpickr-calendar.hasTime .flatpickr-time {
+  height: 40px;
+  border-top: 1px solid rgba(72,72,72,0.2);
+}
+.flatpickr-calendar.hasTime .flatpickr-innerContainer {
+  border-bottom: 0;
+}
+.flatpickr-calendar.hasTime .flatpickr-time {
+  border: 1px solid rgba(72,72,72,0.2);
+}
+.flatpickr-calendar.noCalendar.hasTime .flatpickr-time {
+  height: auto;
+}
+.flatpickr-calendar:before,
+.flatpickr-calendar:after {
+  position: absolute;
+  display: block;
+  pointer-events: none;
+  border: solid transparent;
+  content: '';
+  height: 0;
+  width: 0;
+  left: 22px;
+}
+.flatpickr-calendar.rightMost:before,
+.flatpickr-calendar.arrowRight:before,
+.flatpickr-calendar.rightMost:after,
+.flatpickr-calendar.arrowRight:after {
+  left: auto;
+  right: 22px;
+}
+.flatpickr-calendar.arrowCenter:before,
+.flatpickr-calendar.arrowCenter:after {
+  left: 50%;
+  right: 50%;
+}
+.flatpickr-calendar:before {
+  border-width: 5px;
+  margin: 0 -5px;
+}
+.flatpickr-calendar:after {
+  border-width: 4px;
+  margin: 0 -4px;
+}
+.flatpickr-calendar.arrowTop:before,
+.flatpickr-calendar.arrowTop:after {
+  bottom: 100%;
+}
+.flatpickr-calendar.arrowTop:before {
+  border-bottom-color: rgba(72,72,72,0.2);
+}
+.flatpickr-calendar.arrowTop:after {
+  border-bottom-color: #1bbc9b;
+}
+.flatpickr-calendar.arrowBottom:before,
+.flatpickr-calendar.arrowBottom:after {
+  top: 100%;
+}
+.flatpickr-calendar.arrowBottom:before {
+  border-top-color: rgba(72,72,72,0.2);
+}
+.flatpickr-calendar.arrowBottom:after {
+  border-top-color: #1bbc9b;
+}
+.flatpickr-calendar:focus {
+  outline: 0;
+}
+.flatpickr-wrapper {
+  position: relative;
+  display: inline-block;
+}
+.flatpickr-months {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+}
+.flatpickr-months .flatpickr-month {
+  border-radius: 5px 5px 0 0;
+  background: #1bbc9b;
+  color: #fff;
+  fill: #fff;
+  height: 34px;
+  line-height: 1;
+  text-align: center;
+  position: relative;
+  -webkit-user-select: none;
+     -moz-user-select: none;
+      -ms-user-select: none;
+          user-select: none;
+  overflow: hidden;
+  -webkit-box-flex: 1;
+  -webkit-flex: 1;
+      -ms-flex: 1;
+          flex: 1;
+}
+.flatpickr-months .flatpickr-prev-month,
+.flatpickr-months .flatpickr-next-month {
+  -webkit-user-select: none;
+     -moz-user-select: none;
+      -ms-user-select: none;
+          user-select: none;
+  text-decoration: none;
+  cursor: pointer;
+  position: absolute;
+  top: 0;
+  height: 34px;
+  padding: 10px;
+  z-index: 3;
+  color: #fff;
+  fill: #fff;
+}
+.flatpickr-months .flatpickr-prev-month.flatpickr-disabled,
+.flatpickr-months .flatpickr-next-month.flatpickr-disabled {
+  display: none;
+}
+.flatpickr-months .flatpickr-prev-month i,
+.flatpickr-months .flatpickr-next-month i {
+  position: relative;
+}
+.flatpickr-months .flatpickr-prev-month.flatpickr-prev-month,
+.flatpickr-months .flatpickr-next-month.flatpickr-prev-month {
+/*
+      /*rtl:begin:ignore*/
+/*
+      */
+  left: 0;
+/*
+      /*rtl:end:ignore*/
+/*
+      */
+}
+/*
+      /*rtl:begin:ignore*/
+/*
+      /*rtl:end:ignore*/
+.flatpickr-months .flatpickr-prev-month.flatpickr-next-month,
+.flatpickr-months .flatpickr-next-month.flatpickr-next-month {
+/*
+      /*rtl:begin:ignore*/
+/*
+      */
+  right: 0;
+/*
+      /*rtl:end:ignore*/
+/*
+      */
+}
+/*
+      /*rtl:begin:ignore*/
+/*
+      /*rtl:end:ignore*/
+.flatpickr-months .flatpickr-prev-month:hover,
+.flatpickr-months .flatpickr-next-month:hover {
+  color: #bbb;
+}
+.flatpickr-months .flatpickr-prev-month:hover svg,
+.flatpickr-months .flatpickr-next-month:hover svg {
+  fill: #f64747;
+}
+.flatpickr-months .flatpickr-prev-month svg,
+.flatpickr-months .flatpickr-next-month svg {
+  width: 14px;
+  height: 14px;
+}
+.flatpickr-months .flatpickr-prev-month svg path,
+.flatpickr-months .flatpickr-next-month svg path {
+  -webkit-transition: fill 0.1s;
+  transition: fill 0.1s;
+  fill: inherit;
+}
+.numInputWrapper {
+  position: relative;
+  height: auto;
+}
+.numInputWrapper input,
+.numInputWrapper span {
+  display: inline-block;
+}
+.numInputWrapper input {
+  width: 100%;
+}
+.numInputWrapper input::-ms-clear {
+  display: none;
+}
+.numInputWrapper input::-webkit-outer-spin-button,
+.numInputWrapper input::-webkit-inner-spin-button {
+  margin: 0;
+  -webkit-appearance: none;
+}
+.numInputWrapper span {
+  position: absolute;
+  right: 0;
+  width: 14px;
+  padding: 0 4px 0 2px;
+  height: 50%;
+  line-height: 50%;
+  opacity: 0;
+  cursor: pointer;
+  border: 1px solid rgba(72,72,72,0.15);
+  -webkit-box-sizing: border-box;
+          box-sizing: border-box;
+}
+.numInputWrapper span:hover {
+  background: rgba(0,0,0,0.1);
+}
+.numInputWrapper span:active {
+  background: rgba(0,0,0,0.2);
+}
+.numInputWrapper span:after {
+  display: block;
+  content: "";
+  position: absolute;
+}
+.numInputWrapper span.arrowUp {
+  top: 0;
+  border-bottom: 0;
+}
+.numInputWrapper span.arrowUp:after {
+  border-left: 4px solid transparent;
+  border-right: 4px solid transparent;
+  border-bottom: 4px solid rgba(72,72,72,0.6);
+  top: 26%;
+}
+.numInputWrapper span.arrowDown {
+  top: 50%;
+}
+.numInputWrapper span.arrowDown:after {
+  border-left: 4px solid transparent;
+  border-right: 4px solid transparent;
+  border-top: 4px solid rgba(72,72,72,0.6);
+  top: 40%;
+}
+.numInputWrapper span svg {
+  width: inherit;
+  height: auto;
+}
+.numInputWrapper span svg path {
+  fill: rgba(255,255,255,0.5);
+}
+.numInputWrapper:hover {
+  background: rgba(0,0,0,0.05);
+}
+.numInputWrapper:hover span {
+  opacity: 1;
+}
+.flatpickr-current-month {
+  font-size: 135%;
+  line-height: inherit;
+  font-weight: 300;
+  color: inherit;
+  position: absolute;
+  width: 75%;
+  left: 12.5%;
+  padding: 7.48px 0 0 0;
+  line-height: 1;
+  height: 34px;
+  display: inline-block;
+  text-align: center;
+  -webkit-transform: translate3d(0px, 0px, 0px);
+          transform: translate3d(0px, 0px, 0px);
+}
+.flatpickr-current-month span.cur-month {
+  font-family: inherit;
+  font-weight: 700;
+  color: inherit;
+  display: inline-block;
+  margin-left: 0.5ch;
+  padding: 0;
+}
+.flatpickr-current-month span.cur-month:hover {
+  background: rgba(0,0,0,0.05);
+}
+.flatpickr-current-month .numInputWrapper {
+  width: 6ch;
+  width: 7ch\\0;
+  display: inline-block;
+}
+.flatpickr-current-month .numInputWrapper span.arrowUp:after {
+  border-bottom-color: #fff;
+}
+.flatpickr-current-month .numInputWrapper span.arrowDown:after {
+  border-top-color: #fff;
+}
+.flatpickr-current-month input.cur-year {
+  background: transparent;
+  -webkit-box-sizing: border-box;
+          box-sizing: border-box;
+  color: inherit;
+  cursor: text;
+  padding: 0 0 0 0.5ch;
+  margin: 0;
+  display: inline-block;
+  font-size: inherit;
+  font-family: inherit;
+  font-weight: 300;
+  line-height: inherit;
+  height: auto;
+  border: 0;
+  border-radius: 0;
+  vertical-align: initial;
+  -webkit-appearance: textfield;
+  -moz-appearance: textfield;
+  appearance: textfield;
+}
+.flatpickr-current-month input.cur-year:focus {
+  outline: 0;
+}
+.flatpickr-current-month input.cur-year[disabled],
+.flatpickr-current-month input.cur-year[disabled]:hover {
+  font-size: 100%;
+  color: rgba(255,255,255,0.5);
+  background: transparent;
+  pointer-events: none;
+}
+.flatpickr-current-month .flatpickr-monthDropdown-months {
+  appearance: menulist;
+  background: #1bbc9b;
+  border: none;
+  border-radius: 0;
+  box-sizing: border-box;
+  color: inherit;
+  cursor: pointer;
+  font-size: inherit;
+  font-family: inherit;
+  font-weight: 300;
+  height: auto;
+  line-height: inherit;
+  margin: -1px 0 0 0;
+  outline: none;
+  padding: 0 0 0 0.5ch;
+  position: relative;
+  vertical-align: initial;
+  -webkit-box-sizing: border-box;
+  -webkit-appearance: menulist;
+  -moz-appearance: menulist;
+  width: auto;
+}
+.flatpickr-current-month .flatpickr-monthDropdown-months:focus,
+.flatpickr-current-month .flatpickr-monthDropdown-months:active {
+  outline: none;
+}
+.flatpickr-current-month .flatpickr-monthDropdown-months:hover {
+  background: rgba(0,0,0,0.05);
+}
+.flatpickr-current-month .flatpickr-monthDropdown-months .flatpickr-monthDropdown-month {
+  background-color: #1bbc9b;
+  outline: none;
+  padding: 0;
+}
+.flatpickr-weekdays {
+  background: #1bbc9b;
+  text-align: center;
+  overflow: hidden;
+  width: 100%;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-align: center;
+  -webkit-align-items: center;
+      -ms-flex-align: center;
+          align-items: center;
+  height: 28px;
+}
+.flatpickr-weekdays .flatpickr-weekdaycontainer {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-flex: 1;
+  -webkit-flex: 1;
+      -ms-flex: 1;
+          flex: 1;
+}
+span.flatpickr-weekday {
+  cursor: default;
+  font-size: 90%;
+  background: #1bbc9b;
+  color: rgba(0,0,0,0.54);
+  line-height: 1;
+  margin: 0;
+  text-align: center;
+  display: block;
+  -webkit-box-flex: 1;
+  -webkit-flex: 1;
+      -ms-flex: 1;
+          flex: 1;
+  font-weight: bolder;
+}
+.dayContainer,
+.flatpickr-weeks {
+  padding: 1px 0 0 0;
+}
+.flatpickr-days {
+  position: relative;
+  overflow: hidden;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-align: start;
+  -webkit-align-items: flex-start;
+      -ms-flex-align: start;
+          align-items: flex-start;
+  width: 307.875px;
+  border-left: 1px solid rgba(72,72,72,0.2);
+  border-right: 1px solid rgba(72,72,72,0.2);
+}
+.flatpickr-days:focus {
+  outline: 0;
+}
+.dayContainer {
+  padding: 0;
+  outline: 0;
+  text-align: left;
+  width: 307.875px;
+  min-width: 307.875px;
+  max-width: 307.875px;
+  -webkit-box-sizing: border-box;
+          box-sizing: border-box;
+  display: inline-block;
+  display: -ms-flexbox;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: flex;
+  -webkit-flex-wrap: wrap;
+          flex-wrap: wrap;
+  -ms-flex-wrap: wrap;
+  -ms-flex-pack: justify;
+  -webkit-justify-content: space-around;
+          justify-content: space-around;
+  -webkit-transform: translate3d(0px, 0px, 0px);
+          transform: translate3d(0px, 0px, 0px);
+  opacity: 1;
+}
+.dayContainer + .dayContainer {
+  -webkit-box-shadow: -1px 0 0 rgba(72,72,72,0.2);
+          box-shadow: -1px 0 0 rgba(72,72,72,0.2);
+}
+.flatpickr-day {
+  background: none;
+  border: 1px solid transparent;
+  border-radius: 150px;
+  -webkit-box-sizing: border-box;
+          box-sizing: border-box;
+  color: #484848;
+  cursor: pointer;
+  font-weight: 400;
+  width: 14.2857143%;
+  -webkit-flex-basis: 14.2857143%;
+      -ms-flex-preferred-size: 14.2857143%;
+          flex-basis: 14.2857143%;
+  max-width: 39px;
+  height: 39px;
+  line-height: 39px;
+  margin: 0;
+  display: inline-block;
+  position: relative;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+      -ms-flex-pack: center;
+          justify-content: center;
+  text-align: center;
+}
+.flatpickr-day.inRange,
+.flatpickr-day.prevMonthDay.inRange,
+.flatpickr-day.nextMonthDay.inRange,
+.flatpickr-day.today.inRange,
+.flatpickr-day.prevMonthDay.today.inRange,
+.flatpickr-day.nextMonthDay.today.inRange,
+.flatpickr-day:hover,
+.flatpickr-day.prevMonthDay:hover,
+.flatpickr-day.nextMonthDay:hover,
+.flatpickr-day:focus,
+.flatpickr-day.prevMonthDay:focus,
+.flatpickr-day.nextMonthDay:focus {
+  cursor: pointer;
+  outline: 0;
+  background: #e2e2e2;
+  border-color: #e2e2e2;
+}
+.flatpickr-day.today {
+  border-color: #bbb;
+}
+.flatpickr-day.today:hover,
+.flatpickr-day.today:focus {
+  border-color: #bbb;
+  background: #bbb;
+  color: #fff;
+}
+.flatpickr-day.selected,
+.flatpickr-day.startRange,
+.flatpickr-day.endRange,
+.flatpickr-day.selected.inRange,
+.flatpickr-day.startRange.inRange,
+.flatpickr-day.endRange.inRange,
+.flatpickr-day.selected:focus,
+.flatpickr-day.startRange:focus,
+.flatpickr-day.endRange:focus,
+.flatpickr-day.selected:hover,
+.flatpickr-day.startRange:hover,
+.flatpickr-day.endRange:hover,
+.flatpickr-day.selected.prevMonthDay,
+.flatpickr-day.startRange.prevMonthDay,
+.flatpickr-day.endRange.prevMonthDay,
+.flatpickr-day.selected.nextMonthDay,
+.flatpickr-day.startRange.nextMonthDay,
+.flatpickr-day.endRange.nextMonthDay {
+  background: #1bbc9b;
+  -webkit-box-shadow: none;
+          box-shadow: none;
+  color: #fff;
+  border-color: #1bbc9b;
+}
+.flatpickr-day.selected.startRange,
+.flatpickr-day.startRange.startRange,
+.flatpickr-day.endRange.startRange {
+  border-radius: 50px 0 0 50px;
+}
+.flatpickr-day.selected.endRange,
+.flatpickr-day.startRange.endRange,
+.flatpickr-day.endRange.endRange {
+  border-radius: 0 50px 50px 0;
+}
+.flatpickr-day.selected.startRange + .endRange:not(:nth-child(7n+1)),
+.flatpickr-day.startRange.startRange + .endRange:not(:nth-child(7n+1)),
+.flatpickr-day.endRange.startRange + .endRange:not(:nth-child(7n+1)) {
+  -webkit-box-shadow: -10px 0 0 #1bbc9b;
+          box-shadow: -10px 0 0 #1bbc9b;
+}
+.flatpickr-day.selected.startRange.endRange,
+.flatpickr-day.startRange.startRange.endRange,
+.flatpickr-day.endRange.startRange.endRange {
+  border-radius: 50px;
+}
+.flatpickr-day.inRange {
+  border-radius: 0;
+  -webkit-box-shadow: -5px 0 0 #e2e2e2, 5px 0 0 #e2e2e2;
+          box-shadow: -5px 0 0 #e2e2e2, 5px 0 0 #e2e2e2;
+}
+.flatpickr-day.flatpickr-disabled,
+.flatpickr-day.flatpickr-disabled:hover,
+.flatpickr-day.prevMonthDay,
+.flatpickr-day.nextMonthDay,
+.flatpickr-day.notAllowed,
+.flatpickr-day.notAllowed.prevMonthDay,
+.flatpickr-day.notAllowed.nextMonthDay {
+  color: rgba(72,72,72,0.3);
+  background: transparent;
+  border-color: transparent;
+  cursor: default;
+}
+.flatpickr-day.flatpickr-disabled,
+.flatpickr-day.flatpickr-disabled:hover {
+  cursor: not-allowed;
+  color: rgba(72,72,72,0.1);
+}
+.flatpickr-day.week.selected {
+  border-radius: 0;
+  -webkit-box-shadow: -5px 0 0 #1bbc9b, 5px 0 0 #1bbc9b;
+          box-shadow: -5px 0 0 #1bbc9b, 5px 0 0 #1bbc9b;
+}
+.flatpickr-day.hidden {
+  visibility: hidden;
+}
+.rangeMode .flatpickr-day {
+  margin-top: 1px;
+}
+.flatpickr-weekwrapper {
+  float: left;
+}
+.flatpickr-weekwrapper .flatpickr-weeks {
+  padding: 0 12px;
+  border-left: 1px solid rgba(72,72,72,0.2);
+}
+.flatpickr-weekwrapper .flatpickr-weekday {
+  float: none;
+  width: 100%;
+  line-height: 28px;
+}
+.flatpickr-weekwrapper span.flatpickr-day,
+.flatpickr-weekwrapper span.flatpickr-day:hover {
+  display: block;
+  width: 100%;
+  max-width: none;
+  color: rgba(72,72,72,0.3);
+  background: transparent;
+  cursor: default;
+  border: none;
+}
+.flatpickr-innerContainer {
+  display: block;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-sizing: border-box;
+          box-sizing: border-box;
+  overflow: hidden;
+  background: #fff;
+  border-bottom: 1px solid rgba(72,72,72,0.2);
+}
+.flatpickr-rContainer {
+  display: inline-block;
+  padding: 0;
+  -webkit-box-sizing: border-box;
+          box-sizing: border-box;
+}
+.flatpickr-time {
+  text-align: center;
+  outline: 0;
+  display: block;
+  height: 0;
+  line-height: 40px;
+  max-height: 40px;
+  -webkit-box-sizing: border-box;
+          box-sizing: border-box;
+  overflow: hidden;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  background: #fff;
+  border-radius: 0 0 5px 5px;
+}
+.flatpickr-time:after {
+  content: "";
+  display: table;
+  clear: both;
+}
+.flatpickr-time .numInputWrapper {
+  -webkit-box-flex: 1;
+  -webkit-flex: 1;
+      -ms-flex: 1;
+          flex: 1;
+  width: 40%;
+  height: 40px;
+  float: left;
+}
+.flatpickr-time .numInputWrapper span.arrowUp:after {
+  border-bottom-color: #484848;
+}
+.flatpickr-time .numInputWrapper span.arrowDown:after {
+  border-top-color: #484848;
+}
+.flatpickr-time.hasSeconds .numInputWrapper {
+  width: 26%;
+}
+.flatpickr-time.time24hr .numInputWrapper {
+  width: 49%;
+}
+.flatpickr-time input {
+  background: transparent;
+  -webkit-box-shadow: none;
+          box-shadow: none;
+  border: 0;
+  border-radius: 0;
+  text-align: center;
+  margin: 0;
+  padding: 0;
+  height: inherit;
+  line-height: inherit;
+  color: #484848;
+  font-size: 14px;
+  position: relative;
+  -webkit-box-sizing: border-box;
+          box-sizing: border-box;
+  -webkit-appearance: textfield;
+  -moz-appearance: textfield;
+  appearance: textfield;
+}
+.flatpickr-time input.flatpickr-hour {
+  font-weight: bold;
+}
+.flatpickr-time input.flatpickr-minute,
+.flatpickr-time input.flatpickr-second {
+  font-weight: 400;
+}
+.flatpickr-time input:focus {
+  outline: 0;
+  border: 0;
+}
+.flatpickr-time .flatpickr-time-separator,
+.flatpickr-time .flatpickr-am-pm {
+  height: inherit;
+  float: left;
+  line-height: inherit;
+  color: #484848;
+  font-weight: bold;
+  width: 2%;
+  -webkit-user-select: none;
+     -moz-user-select: none;
+      -ms-user-select: none;
+          user-select: none;
+  -webkit-align-self: center;
+      -ms-flex-item-align: center;
+          align-self: center;
+}
+.flatpickr-time .flatpickr-am-pm {
+  outline: 0;
+  width: 18%;
+  cursor: pointer;
+  text-align: center;
+  font-weight: 400;
+}
+.flatpickr-time input:hover,
+.flatpickr-time .flatpickr-am-pm:hover,
+.flatpickr-time input:focus,
+.flatpickr-time .flatpickr-am-pm:focus {
+  background: #eaeaea;
+}
+.flatpickr-input[readonly] {
+  cursor: pointer;
+}
+@-webkit-keyframes fpFadeInDown {
+  from {
+    opacity: 0;
+    -webkit-transform: translate3d(0, -20px, 0);
+            transform: translate3d(0, -20px, 0);
+  }
+  to {
+    opacity: 1;
+    -webkit-transform: translate3d(0, 0, 0);
+            transform: translate3d(0, 0, 0);
+  }
+}
+@keyframes fpFadeInDown {
+  from {
+    opacity: 0;
+    -webkit-transform: translate3d(0, -20px, 0);
+            transform: translate3d(0, -20px, 0);
+  }
+  to {
+    opacity: 1;
+    -webkit-transform: translate3d(0, 0, 0);
+            transform: translate3d(0, 0, 0);
+  }
+}
+`, ""]);
+// Exports
+/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (___CSS_LOADER_EXPORT___);
+
+
+/***/ }),
+
 /***/ 27:
 /***/ ((module, __webpack_exports__, __webpack_require__) => {
 
@@ -22,10 +850,13 @@ return /******/ (() => { // webpackBootstrap
 /* harmony import */ var _node_modules_css_loader_dist_runtime_noSourceMaps_js__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_node_modules_css_loader_dist_runtime_noSourceMaps_js__WEBPACK_IMPORTED_MODULE_0__);
 /* harmony import */ var _node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(314);
 /* harmony import */ var _node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(_node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1__);
+/* harmony import */ var _node_modules_css_loader_dist_cjs_js_node_modules_flatpickr_dist_themes_material_green_css__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(941);
 // Imports
 
 
+
 var ___CSS_LOADER_EXPORT___ = _node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1___default()((_node_modules_css_loader_dist_runtime_noSourceMaps_js__WEBPACK_IMPORTED_MODULE_0___default()));
+___CSS_LOADER_EXPORT___.i(_node_modules_css_loader_dist_cjs_js_node_modules_flatpickr_dist_themes_material_green_css__WEBPACK_IMPORTED_MODULE_2__/* ["default"] */ .A);
 // Module
 ___CSS_LOADER_EXPORT___.push([module.id, `/* src/components/Timeline/Timeline.css */
 
@@ -405,31 +1236,31 @@ ___CSS_LOADER_EXPORT___.push([module.id, `/* src/components/Timeline/Timeline.cs
 .master-header-container {
   display: flex;
   align-items: center;
+  justify-content: space-between; /* Butonlar solda, select sağda */
   padding: 10px;
-
   background-color: var(--header-background-color);
   color: var(--header-text-color);
+}
 
-  /* eğer border vs. istersen
-  border-bottom: 1px solid var(--border-color);
-  */
+.master-header-buttons {
+  display: flex; /* Yan yana dizilim */
+  align-items: center; /* Dikey hizalama */
 }
 
-/* Butonlar */
 .master-header-btn {
   background-color: transparent;
   color: var(--header-text-color);
   border: 1px solid var(--border-color);
   border-radius: 4px;
   padding: 6px 12px;
-  margin-right: 10px;
+  margin-right: 10px; /* Butonlar arasında mesafe */
   cursor: pointer;
   font-size: 14px;
   transition: background-color 0.2s ease, color 0.2s ease;
 }
 
 .master-header-btn:hover {
-  background-color: rgba(25, 118, 210, 0.2); /* Light tema hover */
+  background-color: rgba(25, 118, 210, 0.2); /* Açık tema hover */
 }
 
 .dark-mode .master-header-btn:hover {
@@ -440,9 +1271,36 @@ ___CSS_LOADER_EXPORT___.push([module.id, `/* src/components/Timeline/Timeline.cs
   outline: none;
 }
 
+
+
+/* Tarih seçici (Date Picker) */
+.master-header-date-picker {
+  background-color: transparent;
+  color: var(--header-text-color);
+  border: 1px solid var(--border-color);
+  border-radius: 4px;
+  padding: 5px 12px;
+  margin-right: 10px; /* Butonlar arasında mesafe */
+  cursor: pointer;
+  font-size: 14px;
+  transition: background-color 0.2s ease, color 0.2s ease;
+}
+
+.master-header-date-picker:hover {
+  background-color: rgba(25, 118, 210, 0.2); /* Açık tema hover */
+}
+
+.dark-mode .master-header-date-picker:hover {
+  background-color: rgba(76, 175, 80, 0.2); /* Koyu tema hover */
+}
+
+.master-header-date-picker:focus {
+  outline: none;
+}
+
 /* Select */
 .master-header-select {
-  margin-left: 10px;
+  margin-left: auto; /* Sağa yaslamak için */
   background-color: transparent;
   color: var(--header-text-color);
   border: 1px solid var(--border-color);
@@ -456,6 +1314,60 @@ ___CSS_LOADER_EXPORT___.push([module.id, `/* src/components/Timeline/Timeline.cs
   outline: none;
 }
 
+/* Flatpickr Takvim Kutusu */
+.flatpickr-calendar {
+  background-color: var(--background-color);
+  color: var(--text-color);
+  border: 1px solid var(--border-color);
+  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2); /* Gölge efekti */
+}
+
+
+/* Flatpickr Günü */
+.flatpickr-day {
+  background-color: var(--background-color); /* Arka plan rengi */
+  color: var(--text-color); /* Yazı rengi */
+  border-radius: 4px; /* Köşeleri yuvarlat */
+  cursor: pointer;
+}
+
+.flatpickr-day:hover {
+  background-color: rgba(25, 118, 210, 0.2); /* Hover efekti */
+}
+
+.dark-mode .flatpickr-day:hover {
+  background-color: rgba(76, 175, 80, 0.2); /* Koyu tema hover efekti */
+}
+
+/* Seçili Gün */
+.flatpickr-day.selected {
+  background-color: #4caf50; /* Seçili gün rengi */
+  color: white; /* Seçili gün yazı rengi */
+}
+
+/* Flatpickr Ay ve Yıl */
+.flatpickr-months .flatpickr-month {
+  background-color: var(--background-color);
+  color: var(--text-color);
+}
+
+/* Flatpickr Ay İleri ve Geri Düğmeleri */
+.flatpickr-prev-month, .flatpickr-next-month {
+  color: var(--text-color);
+  cursor: pointer;
+}
+
+/* Koyu Tema Örnekleri */
+.dark-mode .flatpickr-calendar {
+  background-color: #1f2937; /* Koyu tema arka plan */
+  color: #ffffff; /* Koyu tema yazı rengi */
+}
+
+.dark-mode .flatpickr-day.selected {
+  background-color: #4caf50;
+  color: white;
+}
+
 
 /* Container */
 .timeline-content-container {
@@ -1058,54 +1970,92 @@ var update = injectStylesIntoStyleTag_default()(Timeline/* default */.A, options
 
        /* harmony default export */ const Timeline_Timeline = (Timeline/* default */.A && Timeline/* default */.A.locals ? Timeline/* default */.A.locals : undefined);
 
+// EXTERNAL MODULE: ./node_modules/css-loader/dist/cjs.js!./node_modules/flatpickr/dist/themes/material_green.css
+var material_green = __webpack_require__(941);
+;// ./node_modules/flatpickr/dist/themes/material_green.css
+
+      
+      
+      
+      
+      
+      
+      
+      
+      
+
+var material_green_options = {};
+
+material_green_options.styleTagTransform = (styleTagTransform_default());
+material_green_options.setAttributes = (setAttributesWithoutAttributes_default());
+material_green_options.insert = insertBySelector_default().bind(null, "head");
+material_green_options.domAPI = (styleDomAPI_default());
+material_green_options.insertStyleElement = (insertStyleElement_default());
+
+var material_green_update = injectStylesIntoStyleTag_default()(material_green/* default */.A, material_green_options);
+
+
+
+
+       /* harmony default export */ const themes_material_green = (material_green/* default */.A && material_green/* default */.A.locals ? material_green/* default */.A.locals : undefined);
+
 ;// ./src/components/Timeline/MasterHeader.js
-// src/components/Timeline/MasterHeader.js
 
  // veya MasterHeader.css, eğer ayrı dosyaya koyacaksan
+ // Flatpickr Tema
 
 const MasterHeader = _ref => {
   let {
+    selectedDate,
+    onDateSelect,
     onToday,
     onAdvance,
     onRetreat,
     onMonthAdvance,
     onMonthRetreat,
     dayRange,
-    setDayRange,
-    isDarkMode,
-    toggleDarkMode
+    setDayRange
   } = _ref;
+  const formattedDate = new Date(selectedDate.getTime() + 24 * 60 * 60 * 1000 - selectedDate.getTimezoneOffset() * 60000).toISOString().split("T")[0]; // YYYY-MM-DD formatı
+
   return /*#__PURE__*/external_react_default().createElement("div", {
     className: "master-header-container"
+  }, /*#__PURE__*/external_react_default().createElement("div", {
+    className: "master-header-buttons"
   }, /*#__PURE__*/external_react_default().createElement("button", {
-    className: "master-header-btn",
-    onClick: onToday
-  }, "Today"), /*#__PURE__*/external_react_default().createElement("button", {
     className: "master-header-btn",
     onClick: onMonthRetreat
   }, "1 Ay Geri"), /*#__PURE__*/external_react_default().createElement("button", {
     className: "master-header-btn",
     onClick: onRetreat
-  }, "5 G\xFCn Geri"), /*#__PURE__*/external_react_default().createElement("button", {
+  }, "5 G\xFCn Geri"), /*#__PURE__*/external_react_default().createElement("input", {
+    type: "date",
+    className: "master-header-date-picker",
+    value: formattedDate // Seçili tarih burada gösteriliyor
+    ,
+    onChange: e => onDateSelect(e.target.value) // Tarih seçimi
+    ,
+    onKeyDown: e => e.preventDefault() // Manuel girişleri engelle
+  }), /*#__PURE__*/external_react_default().createElement("button", {
     className: "master-header-btn",
     onClick: onAdvance
   }, "5 G\xFCn \u0130leri"), /*#__PURE__*/external_react_default().createElement("button", {
     className: "master-header-btn",
     onClick: onMonthAdvance
-  }, "1 Ay \u0130leri"), /*#__PURE__*/external_react_default().createElement("select", {
+  }, "1 Ay \u0130leri"), /*#__PURE__*/external_react_default().createElement("button", {
+    className: "master-header-btn",
+    onClick: onToday
+  }, "Bug\xFCn")), /*#__PURE__*/external_react_default().createElement("select", {
     className: "master-header-select",
     value: dayRange,
-    onChange: e => setDayRange(parseInt(e.target.value))
+    onChange: e => setDayRange(parseInt(e.target.value, 10))
   }, /*#__PURE__*/external_react_default().createElement("option", {
     value: 30
   }, "30 G\xFCn"), /*#__PURE__*/external_react_default().createElement("option", {
     value: 60
   }, "60 G\xFCn"), /*#__PURE__*/external_react_default().createElement("option", {
     value: 90
-  }, "90 G\xFCn")), /*#__PURE__*/external_react_default().createElement("button", {
-    className: "master-header-btn",
-    onClick: toggleDarkMode
-  }, isDarkMode ? "Light Mode" : "Dark Mode"));
+  }, "90 G\xFCn")));
 };
 /* harmony default export */ const Timeline_MasterHeader = (MasterHeader);
 ;// ./src/components/Timeline/ResourcesHeader.js
@@ -1360,14 +2310,15 @@ const useEventDragDrop = (events, setEvents, setDropInfo) => {
         const offsetDays = Math.floor(dragOffset / cellWidth);
         const newStartDate = new Date(targetDate.getTime() - offsetDays * 24 * 60 * 60 * 1000);
         const newEndDate = new Date(newStartDate.getTime() + duration);
-        console.log("New Start Date:", newStartDate);
-        console.log("New End Date:", newEndDate);
-        setEvents(prevEvents => prevEvents.map(evt => evt.id === draggingEvent ? _objectSpread(_objectSpread({}, evt), {}, {
-          resourceId,
-          startDate: newStartDate,
-          endDate: newEndDate
-        }) : evt));
+
+        // Callback kontrolü ve loglama
         if (setDropInfo) {
+          console.log("setDropInfo is being called with:", {
+            id: draggingEvent,
+            newResourceId: resourceId,
+            newStartDate,
+            newEndDate
+          });
           setDropInfo({
             id: draggingEvent,
             newResourceId: resourceId,
@@ -1375,6 +2326,13 @@ const useEventDragDrop = (events, setEvents, setDropInfo) => {
             newEndDate
           });
         }
+
+        // Event güncellemesi
+        setEvents(prevEvents => prevEvents.map(evt => evt.id === draggingEvent ? _objectSpread(_objectSpread({}, evt), {}, {
+          resourceId,
+          startDate: newStartDate,
+          endDate: newEndDate
+        }) : evt));
       }
     }
     setDraggingEvent(null);
@@ -1413,11 +2371,8 @@ const Indicator = _ref => {
     totalDays
   } = _ref;
   if (todayIndex < 0 || todayIndex >= totalDays) {
-    console.log("Indicator not visible: Out of bounds");
     return null; // Bugün timeline dışında ise çizgiyi gösterme
   }
-  console.log("todayIndex:", todayIndex);
-  console.log("totalDays:", totalDays);
   return /*#__PURE__*/external_react_default().createElement("div", {
     style: {
       position: "absolute",
@@ -1487,14 +2442,16 @@ const TimelineContent = _ref => {
     indicatorOn,
     resourceSettings,
     setDropInfo,
-    // Yeni prop'lar
     eventsDragOn = true,
     eventsExtendOn = true,
     createNewEventOn = true,
-    onDragInfo,
     onExtendInfo,
     onCreateEventInfo,
-    onEventRightClick
+    onEventRightClick,
+    eventTooltipOn = true,
+    tooltipComponent: TooltipComponent,
+    tempEventStyle = {},
+    eventStyleResolver = () => ({})
   } = _ref;
   // ------------------- HOOKS & STATE -------------------
   const containerRef = (0,external_react_.useRef)(null);
@@ -1510,7 +2467,8 @@ const TimelineContent = _ref => {
     handleDragOver,
     handleDrop,
     handleDragEnd
-  } = hooks_useEventDragDrop(events, setEvents, setDropInfo);
+  } = hooks_useEventDragDrop(events, setEvents, setDropInfo // Doğrudan setDropInfo'yu geçiriyoruz
+  );
 
   // Extend
   const {
@@ -1536,6 +2494,11 @@ const TimelineContent = _ref => {
   // ------------------- Tooltip Logic -------------------
   const handleEventClickInternal = (event, e) => {
     e.stopPropagation();
+    // Eğer mod "extend" ise tooltip'i açma
+    if (mode === "extend") {
+      return;
+    }
+
     // Harici callback
     if (onEventClick) onEventClick(event, e);
 
@@ -1625,7 +2588,6 @@ const TimelineContent = _ref => {
       return;
     }
     handleDragEnd();
-    // onDragInfo(...) => if needed
   };
 
   // ------------------- Extend Logic -------------------
@@ -1647,7 +2609,6 @@ const TimelineContent = _ref => {
     const daysToAdd = Math.floor(deltaX / cellW);
     const newEndDate = new Date((originalEndDate !== null && originalEndDate !== void 0 ? originalEndDate : new Date()).getTime());
     newEndDate.setDate(newEndDate.getDate() + daysToAdd);
-    console.log(">>> Extending ID:", extendingEvent.id, "=>", newEndDate);
     setEvents(prev => prev.map(evt => evt.id === extendingEvent.id ? TimelineContent_objectSpread(TimelineContent_objectSpread({}, evt), {}, {
       endDate: newEndDate
     }) : evt));
@@ -1664,7 +2625,11 @@ const TimelineContent = _ref => {
         });
       }
     }
-    setMode(null);
+
+    // Tooltip açılmasını engellemek için modun null olmasını geciktiriyoruz
+    setTimeout(() => {
+      setMode(null);
+    }, 100); // 100ms gecikme
     setExtendingEvent(null);
     setOriginalEndDate(null);
     setStartMouseX(null);
@@ -1769,6 +2734,9 @@ const TimelineContent = _ref => {
         isPartialEnd
       } = calculatePosition(event, dates);
       if (!isVisible) return null;
+
+      // Kullanıcıdan gelen stil
+      const eventStyle = eventStyleResolver ? eventStyleResolver(event) : {};
       return /*#__PURE__*/external_react_default().createElement("div", {
         key: event.id,
         className: "timeline-event",
@@ -1789,18 +2757,16 @@ const TimelineContent = _ref => {
         },
         onContextMenu: reactEvent => handleRightClickEvent(event, reactEvent),
         onClick: ev => handleEventClickInternal(event, ev),
-        style: {
+        style: TimelineContent_objectSpread({
           left,
           width,
           top: "5px",
-          // color from var(--timeline-event-text-color)
-          // background from event.color or var(...) => if event.color empty, fallback in CSS
           borderTopLeftRadius: isPartialStart ? "0px" : "20px",
           borderBottomLeftRadius: isPartialStart ? "0px" : "20px",
           borderTopRightRadius: isPartialEnd ? "0px" : "20px",
           borderBottomRightRadius: isPartialEnd ? "0px" : "20px",
           cursor: mode === "extend" ? "col-resize" : "grab"
-        }
+        }, eventStyle)
       }, event.title, eventsExtendOn && /*#__PURE__*/external_react_default().createElement("div", {
         className: "timeline-event-extend-handle",
         onMouseDown: mouseEvent => {
@@ -1810,9 +2776,7 @@ const TimelineContent = _ref => {
       }));
     }), tempEvent && tempEvent.resourceId === resource.id && /*#__PURE__*/external_react_default().createElement("div", {
       className: "timeline-temp-event",
-      style: TimelineContent_objectSpread(TimelineContent_objectSpread({}, calculatePosition(tempEvent, dates)), {}, {
-        top: "5px"
-      })
+      style: TimelineContent_objectSpread(TimelineContent_objectSpread({}, calculatePosition(tempEvent, dates)), tempEventStyle)
     }, tempEvent.title), dates.map((dateObj, colIndex) => /*#__PURE__*/external_react_default().createElement("div", {
       key: "cell-".concat(groupIndex, "-").concat(rowIndex, "-").concat(colIndex),
       className: "timeline-cell ".concat(isCellSelected(resource.id, dateObj) ? "selected" : ""),
@@ -1822,25 +2786,11 @@ const TimelineContent = _ref => {
       onDragOver: e => handleDragOver(e),
       onDrop: e => handleDrop(e, resource.id, parseDate(dateObj.fullDate))
     })));
-  }))), selectedEvent &&
-  /*#__PURE__*/
-  // "timeline-event-tooltip" gibi className tanımlanabilir
-  // eğer custom css istenirse
-  external_react_default().createElement("div", {
-    style: {
-      position: "absolute",
-      top: tooltipPosition.top,
-      left: tooltipPosition.left,
-      // ...
-      backgroundColor: "#333",
-      color: "#fff",
-      padding: "5px",
-      borderRadius: "4px",
-      zIndex: 999
-    }
-  }, /*#__PURE__*/external_react_default().createElement("button", {
-    onClick: () => handleCloseTooltip()
-  }, "X"), selectedEvent.title));
+  }))), eventTooltipOn && selectedEvent && TooltipComponent && mode !== "extend" && /*#__PURE__*/external_react_default().createElement(TooltipComponent, {
+    event: selectedEvent,
+    position: tooltipPosition,
+    onClose: handleCloseTooltip
+  }));
 };
 /* harmony default export */ const Timeline_TimelineContent = (TimelineContent);
 ;// ./src/components/Timeline/EventTooltip.js
@@ -1887,7 +2837,7 @@ const EventTooltip = _ref => {
   return /*#__PURE__*/external_react_default().createElement("div", {
     style: {
       position: "absolute",
-      top: top - 30,
+      top: top - 200,
       // Tooltip'in biraz yukarıda görünmesi için
       left: left + 70,
       transform: "translateX(-50%)",
@@ -2087,7 +3037,25 @@ const Timeline_Timeline_Timeline = _ref => {
     onEventClick,
     onEventRightClick,
     // Yatay scroll özelliği aç/kapa
-    horizontalScrollOn = false // Varsayılan false
+    horizontalScrollOn = false,
+    // Varsayılan false
+
+    dayRange = 30,
+    setDayRange,
+    themeType = "light",
+    // Tema bilgisi varsayılan olarak light
+
+    eventTooltipOn = true,
+    tooltipComponent: TooltipComponent,
+    // Özelleştirilebilir Tooltip bileşeni
+    tempEventStyle = {},
+    eventStyleResolver = () => ({}),
+    indicatorDate = new Date(),
+    onToday,
+    onAdvance,
+    onRetreat,
+    onMonthAdvance,
+    onMonthRetreat
   } = _ref;
   // ---------------------------------------------------------
   // 1) timelineData oluştur (dates, monthHeaders vs.)
@@ -2097,16 +3065,16 @@ const Timeline_Timeline_Timeline = _ref => {
     dates,
     monthHeaders
   } = timelineData;
+  const [selectedDate, setSelectedDate] = (0,external_react_.useState)(() => {
+    const date = programDate ? new Date(programDate) : new Date();
+    date.setDate(date.getDate() - 3); // Program tarihinden 3 gün öncesini al
+    return date;
+  });
 
   // ---------------------------------------------------------
   // 2) local state
   // ---------------------------------------------------------
   const [collapsedGroups, setCollapsedGroups] = (0,external_react_.useState)({});
-  const [selectedDate, setSelectedDate] = (0,external_react_.useState)(() => {
-    const date = programDate ? new Date(programDate) : new Date();
-    date.setDate(date.getDate() - 3);
-    return date;
-  });
   const [localEvents, setLocalEvents] = (0,external_react_.useState)(events);
   const [selectedEvent, setSelectedEvent] = (0,external_react_.useState)(null);
   const [tooltipPosition, setTooltipPosition] = (0,external_react_.useState)({
@@ -2115,9 +3083,16 @@ const Timeline_Timeline_Timeline = _ref => {
   });
 
   // dayRange = ekranda göstermeyi istediğimiz gün/hücre sayısı (ör. 30 gün)
-  const [dayRange, setDayRange] = (0,external_react_.useState)(30);
-  const [isDarkMode, setIsDarkMode] = (0,external_react_.useState)(false);
 
+  const [isDarkMode, setIsDarkMode] = (0,external_react_.useState)(themeType === "dark");
+  (0,external_react_.useEffect)(() => {
+    if (themeType !== undefined) {
+      setIsDarkMode(themeType === "dark");
+    }
+  }, [themeType]);
+  const toggleDarkMode = () => {
+    setIsDarkMode(prev => !prev);
+  };
   // ---------------------------------------------------------
   // 3) Sabit hücre genişliği (örneğin 56.95 px)
   //    Container genişliği = dayRange * cellWidth
@@ -2156,7 +3131,8 @@ const Timeline_Timeline_Timeline = _ref => {
   const endIndex = startIndex + dayRange;
   const filteredDates = startIndex !== -1 ? dates.slice(startIndex, Math.min(endIndex, dates.length)) : [];
   const today = programDate ? new Date(programDate) : new Date();
-  const todayIndex = filteredDates.findIndex(d => new Date(d.fullDate).toDateString() === today.toDateString());
+  today.setDate(today.getDate() - 3);
+  const todayIndex = filteredDates.findIndex(d => new Date(d.fullDate).toDateString() === new Date(indicatorDate).toDateString());
   const totalDays = filteredDates.length;
 
   // ---------------------------------------------------------
@@ -2170,34 +3146,40 @@ const Timeline_Timeline_Timeline = _ref => {
 
   // ---------------------------------------------------------
   // 7) Navigation fonksiyonları
-  // ---------------------------------------------------------
+  // ---------------------------------------------------------  const { dates, monthHeaders } = timelineData;
+
+  const handleDateChange = newDate => {
+    setSelectedDate(new Date(newDate));
+  };
   const handleToday = () => {
-    const date = programDate ? new Date(programDate) : new Date();
-    date.setDate(date.getDate() - 3);
-    setSelectedDate(date);
+    const today = programDate ? new Date(programDate) : new Date();
+    today.setDate(today.getDate() - 3); // Program tarihinden 3 gün öncesini ayarla
+    setSelectedDate(today);
+  };
+  const handleAdvance = () => {
+    setSelectedDate(prev => new Date(prev.getTime() + 5 * 24 * 60 * 60 * 1000));
+  };
+  const handleRetreat = () => {
+    setSelectedDate(prev => new Date(prev.getTime() - 5 * 24 * 60 * 60 * 1000));
+  };
+  const handleMonthAdvance = () => {
+    setSelectedDate(prev => {
+      const newDate = new Date(prev);
+      newDate.setMonth(newDate.getMonth() + 1);
+      return newDate;
+    });
+  };
+  const handleMonthRetreat = () => {
+    setSelectedDate(prev => {
+      const newDate = new Date(prev);
+      newDate.setMonth(newDate.getMonth() - 1);
+      return newDate;
+    });
   };
-  const handleAdvance = () => setSelectedDate(prev => new Date(prev.getTime() + 5 * 24 * 60 * 60 * 1000));
-  const handleRetreat = () => setSelectedDate(prev => new Date(prev.getTime() - 5 * 24 * 60 * 60 * 1000));
-  const handleMonthRetreat = () => setSelectedDate(prev => {
-    const newDate = new Date(prev);
-    newDate.setMonth(newDate.getMonth() - 1);
-    return newDate;
-  });
-  const handleMonthAdvance = () => setSelectedDate(prev => {
-    const newDate = new Date(prev);
-    newDate.setMonth(newDate.getMonth() + 1);
-    return newDate;
-  });
 
   // ---------------------------------------------------------
   // 8) Dark Mode
   // ---------------------------------------------------------
-  const toggleDarkMode = () => {
-    setIsDarkMode(prevMode => !prevMode);
-  };
-  (0,external_react_.useEffect)(() => {
-    document.body.classList.toggle("dark-mode", isDarkMode);
-  }, [isDarkMode]);
 
   // ---------------------------------------------------------
   // 9) Ay başlıklarını filtrele
@@ -2219,20 +3201,23 @@ const Timeline_Timeline_Timeline = _ref => {
   }, masterHeaderView && /*#__PURE__*/external_react_default().createElement("div", {
     className: "timeline-master-header"
   }, /*#__PURE__*/external_react_default().createElement(Timeline_MasterHeader, {
+    selectedDate: selectedDate // Seçili tarihi gönder
+    ,
+    onDateSelect: handleDateChange,
     onToday: handleToday,
     onAdvance: handleAdvance,
     onRetreat: handleRetreat,
     onMonthAdvance: handleMonthAdvance,
     onMonthRetreat: handleMonthRetreat,
     dayRange: dayRange,
-    setDayRange: setDayRange // dayRange'ı burada user değiştirebilir
-    ,
-    isDarkMode: isDarkMode,
-    toggleDarkMode: toggleDarkMode
+    setDayRange: setDayRange
   })), /*#__PURE__*/external_react_default().createElement("div", {
     className: "timeline-body"
   }, /*#__PURE__*/external_react_default().createElement("div", {
-    className: "timeline-resources-container"
+    className: "timeline-resources-container",
+    style: {
+      overflow: "hidden"
+    }
   }, /*#__PURE__*/external_react_default().createElement(Timeline_ResourcesHeader, {
     content: resourceHeaderContent
   }), /*#__PURE__*/external_react_default().createElement(Timeline_Resources, {
@@ -2253,31 +3238,31 @@ const Timeline_Timeline_Timeline = _ref => {
   }, /*#__PURE__*/external_react_default().createElement(Timeline_TimelineHeader, {
     dates: filteredDates,
     monthHeaders: filteredMonthHeaders
-  }), /*#__PURE__*/external_react_default().createElement(Timeline_TimelineContent
-  // Props
-  , {
+  }), /*#__PURE__*/external_react_default().createElement(Timeline_TimelineContent, {
     groupedResources: resources,
     dates: filteredDates,
     collapsedGroups: collapsedGroups,
     events: localEvents,
     setEvents: setLocalEvents,
-    onEventClick: handleEventClick,
+    onEventClick: onEventClick,
     todayIndex: todayIndex,
-    totalDays: totalDays,
     indicatorOn: indicatorOn,
     resourceSettings: resourceSettings,
     toggleGroupCollapse: toggleGroupCollapse,
-    setDropInfo: setDropInfo
-
-    // Yeni prop'lar
-    ,
+    setDropInfo: setDropInfo,
     eventsDragOn: eventsDragOn,
     eventsExtendOn: eventsExtendOn,
     createNewEventOn: createNewEventOn,
     onDragInfo: onDragInfo,
     onExtendInfo: onExtendInfo,
     onCreateEventInfo: onCreateEventInfo,
-    onEventRightClick: onEventRightClick
+    onEventRightClick: onEventRightClick,
+    eventTooltipOn: eventTooltipOn // Tooltip kontrolü
+    ,
+    tooltipComponent: TooltipComponent // Özelleştirilebilir Tooltip bileşeni
+    ,
+    tempEventStyle: tempEventStyle,
+    eventStyleResolver: eventStyleResolver
   }), selectedEvent && /*#__PURE__*/external_react_default().createElement(Timeline_EventTooltip, {
     event: selectedEvent,
     position: tooltipPosition,