@idds/js 1.0.34

package/dist/index.js

@@ -0,0 +1,1213 @@
+// src/js/components/stateful/button-group.js
+function initButtonGroup(rootSelector = `.${PREFIX}-btn-group`) {
+  document.querySelectorAll(rootSelector).forEach((buttonGroup) => {
+    const buttons = buttonGroup.querySelectorAll(`.${PREFIX}-btn`);
+    buttons.forEach((button) => {
+      function updateState() {
+        const index = Array.from(buttons).indexOf(button);
+        buttons.forEach((button2, i) => {
+          button2.classList.remove(`${PREFIX}-btn--active`);
+          if (i === index) {
+            button2.classList.add(`${PREFIX}-btn--active`);
+          }
+        });
+        button.dispatchEvent(
+          new CustomEvent("button:change", {
+            detail: { activeIndex: index },
+            bubbles: true,
+            composed: true
+          })
+        );
+      }
+      button.addEventListener("click", updateState);
+    });
+  });
+}
+
+// src/js/components/stateful/tab.js
+function initTab(rootSelector = `.${PREFIX}-tab`) {
+  document.querySelectorAll(rootSelector).forEach((tab) => {
+    const tabItem = tab.querySelectorAll(`.${PREFIX}-tab-item`);
+    tabItem.forEach((tabButton) => {
+      function updateState() {
+        const index = Array.from(tabItem).indexOf(tabButton);
+        tabItem.forEach((tabButton2, i) => {
+          tabButton2.classList.remove("active");
+          tabButton2.setAttribute("aria-selected", "false");
+          if (i === index) {
+            tabButton2.classList.add("active");
+            tabButton2.setAttribute("aria-selected", "true");
+          }
+        });
+        tab.dispatchEvent(
+          new CustomEvent("tab:change", {
+            detail: { activeIndex: index },
+            bubbles: true,
+            composed: true
+          })
+        );
+      }
+      tabButton.addEventListener("click", updateState);
+    });
+  });
+}
+
+// src/js/components/stateful/toggle.js
+function initToggle(rootSelector = `.${PREFIX}-toggle`) {
+  document.querySelectorAll(rootSelector).forEach((toggle) => {
+    function updateState() {
+      const isActive = toggle.classList.toggle("active");
+      toggle.setAttribute("aria-pressed", isActive);
+      toggle.dispatchEvent(
+        new CustomEvent("toggle:change", {
+          detail: { active: isActive },
+          bubbles: true,
+          composed: true
+        })
+      );
+    }
+    toggle.addEventListener("click", updateState);
+  });
+}
+
+// src/js/components/stateless/accordion.js
+function initAccordion(rootSelector = `.${PREFIX}-accordion`) {
+  document.querySelectorAll(rootSelector).forEach((accordion) => {
+    const behavior = accordion.dataset.behavior || "multiple";
+    const headers = accordion.querySelectorAll(`.${PREFIX}-accordion__header`);
+    headers.forEach((header) => {
+      header.addEventListener("click", () => {
+        const currentItem = header.closest(`.${PREFIX}-accordion__item`);
+        if (!currentItem) return;
+        const body = currentItem.querySelector(`.${PREFIX}-accordion__body`);
+        const isOpen = currentItem.classList.contains("show");
+        function openAccordionItem(item) {
+          const body2 = item.querySelector(`.${PREFIX}-accordion__body`);
+          item.classList.add("show");
+          if (body2) {
+            body2.style.maxHeight = `${body2.scrollHeight}px`;
+          }
+        }
+        function closeAccordionItem(item) {
+          const body2 = item.querySelector(`.${PREFIX}-accordion__body`);
+          item.classList.remove("show");
+          if (body2) {
+            body2.style.maxHeight = null;
+          }
+        }
+        if (behavior === "single") {
+          accordion.querySelectorAll(`.${PREFIX}-accordion__item`).forEach((item) => closeAccordionItem(item));
+          if (!isOpen) openAccordionItem(currentItem);
+        } else {
+          isOpen ? closeAccordionItem(currentItem) : openAccordionItem(currentItem);
+        }
+      });
+    });
+  });
+}
+
+// src/js/components/stateful/datepicker.js
+function initDatepicker() {
+  document.querySelectorAll(`.${PREFIX}-datepicker`).forEach((datepicker) => {
+    let currentDate = /* @__PURE__ */ new Date();
+    let selectedDateTarget = null;
+    let selectedDate = null;
+    const MONTHS = [
+      "Januari",
+      "Februari",
+      "Maret",
+      "April",
+      "Mei",
+      "Juni",
+      "Juli",
+      "Agustus",
+      "September",
+      "Oktober",
+      "November",
+      "Desember"
+    ];
+    const DAYS = ["Min", "Sen", "Sel", "Rab", "Kam", "Jum", "Sab"];
+    const datepickerTrigger = datepicker.querySelector(
+      `.${PREFIX}-datepicker__trigger`
+    );
+    const datepickerPopover = datepicker.querySelector(
+      `.${PREFIX}-datepicker__popover`
+    );
+    const datepickerMonthTrigger = datepicker.querySelector(
+      `.${PREFIX}-datepicker__month-trigger`
+    );
+    const datepickerMonthPopover = datepicker.querySelector(
+      `.${PREFIX}-datepicker__month-popover`
+    );
+    const datepickerMonthItem = datepicker.querySelectorAll(
+      `.${PREFIX}-datepicker__month-item`
+    );
+    const datepickerYearTrigger = datepicker.querySelector(
+      `.${PREFIX}-datepicker__year-trigger`
+    );
+    const datepickerYearPopover = datepicker.querySelector(
+      `.${PREFIX}-datepicker__year-popover`
+    );
+    const datepickerYearPrevButton = datepicker.querySelector(
+      `.${PREFIX}-datepicker__year-nav-prev`
+    );
+    const datepickerYearCurrent = datepicker.querySelector(
+      `.${PREFIX}-datepicker__year-current`
+    );
+    const datepickerYearNextButton = datepicker.querySelector(
+      `.${PREFIX}-datepicker__year-nav-next`
+    );
+    const datepickerYearContent = datepicker.querySelector(
+      `.${PREFIX}-datepicker__year-content`
+    );
+    const datepickerYearItem = datepicker.querySelectorAll(
+      `.${PREFIX}-datepicker__year-item`
+    );
+    const datepickerContent = datepicker.querySelector(
+      `.${PREFIX}-datepicker__content`
+    );
+    const prevMonthButton = datepicker.querySelector(
+      `.${PREFIX}-datepicker__nav-prev`
+    );
+    const nextMonthButton = datepicker.querySelector(
+      `.${PREFIX}-datepicker__nav-next`
+    );
+    const datepickerSubmitButton = datepicker.querySelector(
+      `.${PREFIX}-datepicker__submit`
+    );
+    function renderYear(startYear, endYear) {
+      datepickerYearContent.innerHTML = "";
+      datepickerYearCurrent.textContent = `${startYear} - ${endYear}`;
+      for (let y = startYear; y <= endYear; y++) {
+        const yearEl = document.createElement("button");
+        yearEl.className = `${PREFIX}-datepicker__year-item`;
+        yearEl.textContent = y;
+        yearEl.dataset.year = y;
+        if (y === currentDate.getFullYear()) {
+          yearEl.classList.add("selected");
+        }
+        datepickerYearContent.appendChild(yearEl);
+      }
+    }
+    function renderCalendar(year, month) {
+      datepickerContent.innerHTML = "";
+      datepickerMonthTrigger.textContent = MONTHS[month].substring(0, 3);
+      datepickerYearTrigger.textContent = year;
+      DAYS.forEach((day) => {
+        const dayNameWrapper = document.createElement("div");
+        dayNameWrapper.className = `${PREFIX}-datepicker__dayname-wrapper`;
+        const dayNameEl = document.createElement("span");
+        dayNameEl.className = `${PREFIX}-datepicker__dayname`;
+        dayNameEl.textContent = day.substring(0, 3);
+        dayNameWrapper.appendChild(dayNameEl);
+        datepickerContent.appendChild(dayNameWrapper);
+      });
+      const firstDayOfMonth = new Date(year, month, 1).getDay();
+      const daysInMonth = new Date(year, month + 1, 0).getDate();
+      const daysInPrevMonth = new Date(year, month, 0).getDate();
+      for (let i = 0; i < firstDayOfMonth; i++) {
+        const dayEl = document.createElement("button");
+        dayEl.className = `${PREFIX}-datepicker__calendar-day outside-month`;
+        dayEl.textContent = daysInPrevMonth - firstDayOfMonth + 1 + i;
+        dayEl.disabled = true;
+        datepickerContent.appendChild(dayEl);
+      }
+      const today = /* @__PURE__ */ new Date();
+      for (let i = 1; i <= daysInMonth; i++) {
+        const dayEl = document.createElement("button");
+        dayEl.className = `${PREFIX}-datepicker__calendar-day`;
+        dayEl.textContent = i;
+        dayEl.dataset.date = new Date(year, month, i).toISOString();
+        if (year === today.getFullYear() && month === today.getMonth() && i === today.getDate()) {
+          const marker = document.createElement("span");
+          marker.className = `${PREFIX}-datepicker__today-marker`;
+          marker.textContent = "Hari ini";
+          dayEl.appendChild(marker);
+          dayEl.classList.add("today");
+        }
+        if (selectedDate && year === selectedDate.getFullYear() && month === selectedDate.getMonth() && i === selectedDate.getDate()) {
+          dayEl.classList.add("selected");
+        }
+        datepickerContent.appendChild(dayEl);
+      }
+      const totalCells = 42;
+      const cellsRendered = firstDayOfMonth + daysInMonth;
+      const remainingCells = totalCells - cellsRendered;
+      for (let i = 1; i <= remainingCells; i++) {
+        const dayEl = document.createElement("button");
+        dayEl.className = `${PREFIX}-datepicker__calendar-day outside-month`;
+        dayEl.textContent = i;
+        dayEl.disabled = true;
+        datepickerContent.appendChild(dayEl);
+      }
+      datepickerMonthPopover.innerHTML = "";
+      MONTHS.forEach((monthName, index) => {
+        const monthEl = document.createElement("button");
+        monthEl.className = `${PREFIX}-datepicker__month-item`;
+        monthEl.textContent = monthName.substring(0, 3);
+        monthEl.dataset.month = index;
+        if (index === month) {
+          monthEl.classList.add("selected");
+        }
+        datepickerMonthPopover.appendChild(monthEl);
+      });
+      datepickerYearContent.innerHTML = "";
+      const startYear = Math.floor(year / 10) * 10;
+      const endYear = startYear + 19;
+      datepickerYearCurrent.textContent = `${startYear} - ${endYear}`;
+      for (let y = startYear; y <= endYear; y++) {
+        const yearEl = document.createElement("button");
+        yearEl.className = `${PREFIX}-datepicker__year-item`;
+        yearEl.textContent = y;
+        yearEl.dataset.year = y;
+        if (y === year) {
+          yearEl.classList.add("selected");
+        }
+        datepickerYearContent.appendChild(yearEl);
+      }
+    }
+    function togglePopover() {
+      if (datepickerPopover.style.display === "none" || datepickerPopover.style.display === "") {
+        datepickerPopover.style.display = "block";
+        renderCalendar(currentDate.getFullYear(), currentDate.getMonth());
+      } else {
+        datepickerPopover.style.display = "none";
+      }
+    }
+    function toggleMonthPopover() {
+      if (datepickerMonthPopover.style.display === "none" || datepickerMonthPopover.style.display === "") {
+        datepickerMonthPopover.style.display = "grid";
+      } else {
+        datepickerMonthPopover.style.display = "none";
+      }
+    }
+    function toggleYearPopover() {
+      if (datepickerYearPopover.style.display === "none" || datepickerYearPopover.style.display === "") {
+        datepickerYearPopover.style.display = "block";
+      } else {
+        datepickerYearPopover.style.display = "none";
+      }
+    }
+    datepickerTrigger.addEventListener("click", (e) => {
+      e.stopPropagation();
+      togglePopover();
+    });
+    prevMonthButton.addEventListener("click", () => {
+      currentDate.setMonth(currentDate.getMonth() - 1);
+      renderCalendar(currentDate.getFullYear(), currentDate.getMonth());
+    });
+    nextMonthButton.addEventListener("click", () => {
+      currentDate.setMonth(currentDate.getMonth() + 1);
+      renderCalendar(currentDate.getFullYear(), currentDate.getMonth());
+    });
+    datepickerMonthTrigger.addEventListener("click", (e) => {
+      e.stopPropagation();
+      toggleMonthPopover();
+    });
+    datepickerYearTrigger.addEventListener("click", (e) => {
+      e.stopPropagation();
+      toggleYearPopover();
+    });
+    document.addEventListener("click", (e) => {
+      if (!datepickerPopover.contains(e.target) && e.target !== datepickerTrigger && !datepickerTrigger.contains(e.target)) {
+        datepickerPopover.style.display = "none";
+      }
+    });
+    document.addEventListener("click", (e) => {
+      if (!datepickerMonthPopover.contains(e.target) && e.target !== datepickerMonthTrigger && !datepickerMonthTrigger.contains(e.target)) {
+        datepickerMonthPopover.style.display = "none";
+      }
+    });
+    document.addEventListener("click", (e) => {
+      if (!datepickerYearPopover.contains(e.target) && e.target !== datepickerYearTrigger && !datepickerYearTrigger.contains(e.target)) {
+        datepickerYearPopover.style.display = "none";
+      }
+    });
+    datepickerMonthPopover.addEventListener("click", (e) => {
+      e.stopPropagation();
+      const target = e.target;
+      if (target.classList.contains(`${PREFIX}-datepicker__month-item`)) {
+        const monthIndex = parseInt(target.dataset.month);
+        currentDate.setMonth(monthIndex);
+        renderCalendar(currentDate.getFullYear(), currentDate.getMonth());
+        datepickerMonthPopover.style.display = "none";
+      }
+    });
+    datepickerYearPopover.addEventListener("click", (e) => {
+      e.stopPropagation();
+      const target = e.target;
+      if (target.classList.contains(`${PREFIX}-datepicker__year-nav-prev`)) {
+        const currentYearRange = datepickerYearCurrent.textContent.split(" - ").map((y) => parseInt(y));
+        const newStartYear = currentYearRange[0] - 20;
+        const newEndYear = currentYearRange[1] - 20;
+        renderYear(newStartYear, newEndYear);
+      } else if (target.classList.contains(`${PREFIX}-datepicker__year-nav-next`)) {
+        const currentYearRange = datepickerYearCurrent.textContent.split(" - ").map((y) => parseInt(y));
+        const newStartYear = currentYearRange[0] + 20;
+        const newEndYear = currentYearRange[1] + 20;
+        renderYear(newStartYear, newEndYear);
+      }
+    });
+    datepickerYearContent.addEventListener("click", (e) => {
+      e.stopPropagation();
+      const target = e.target;
+      if (target.classList.contains(`${PREFIX}-datepicker__year-item`)) {
+        const yearValue = parseInt(target.dataset.year);
+        currentDate.setFullYear(yearValue);
+        renderCalendar(currentDate.getFullYear(), currentDate.getMonth());
+        datepickerYearPopover.style.display = "none";
+      }
+    });
+    datepickerContent.addEventListener("click", (e) => {
+      const target = e.target;
+      if (target.classList.contains(`${PREFIX}-datepicker__calendar-day`) && !target.classList.contains("outside-month")) {
+        if (target.classList.contains("selected")) {
+          target.classList.remove("selected");
+          selectedDateTarget = null;
+        } else {
+          const selectedDateEl = datepickerContent.querySelector(
+            `.${PREFIX}-datepicker__calendar-day.selected`
+          );
+          selectedDateEl?.classList.remove("selected");
+          target.classList.add("selected");
+          selectedDateTarget = target;
+        }
+      }
+    });
+    datepickerSubmitButton.addEventListener("click", () => {
+      selectedDate = selectedDateTarget ? new Date(selectedDateTarget.dataset.date) : null;
+      currentDate = selectedDate ? new Date(selectedDate) : /* @__PURE__ */ new Date();
+      datepicker.dispatchEvent(
+        new CustomEvent("date:changed", { detail: { selectedDate } })
+      );
+      datepickerPopover.style.display = "none";
+    });
+    renderCalendar(currentDate.getFullYear(), currentDate.getMonth());
+  });
+}
+document.addEventListener("DOMContentLoaded", () => {
+});
+
+// src/js/components/stateless/modal.js
+function initModal(rootSelector = `.${PREFIX}-modal`) {
+  document.querySelectorAll(rootSelector).forEach((modal) => {
+    const modalContent = modal.querySelector(`${rootSelector}__content`);
+    const modalTrigger = modal.querySelector(`${rootSelector}__trigger`);
+    const modalClose = modal.querySelector(`${rootSelector}__close`);
+    const modalOverlay = modal.querySelector(`${rootSelector}__overlay`);
+    modalTrigger.addEventListener("click", () => {
+      const modalTarget = modalTrigger.getAttribute("data-modal");
+      const modal2 = document.querySelector(
+        `.${PREFIX}-modal__content[data-modal="${modalTarget}"]`
+      );
+      document.body.style.overflow = "hidden";
+      modalContent.classList.add(`${PREFIX}-modal__content--show`);
+      modalOverlay.classList.add(`${PREFIX}-modal__overlay--show`);
+    });
+    modalClose.addEventListener("click", () => {
+      modalContent.classList.remove(`${PREFIX}-modal__content--show`);
+      modalOverlay.classList.remove(`${PREFIX}-modal__overlay--show`);
+      setTimeout(() => {
+        document.body.style.overflow = "";
+      }, 300);
+    });
+    modal.addEventListener("keydown", (event) => {
+      if (event.key === "Escape") {
+        modalContent.classList.remove(`${PREFIX}-modal__content--show`);
+        modalOverlay.classList.remove(`${PREFIX}-modal__overlay--show`);
+        setTimeout(() => {
+          document.body.style.overflow = "";
+        }, 300);
+      }
+    });
+    modalOverlay.addEventListener("click", () => {
+      modalContent.classList.remove(`${PREFIX}-modal__content--show`);
+      modalOverlay.classList.remove(`${PREFIX}-modal__overlay--show`);
+      setTimeout(() => {
+        document.body.style.overflow = "";
+      }, 300);
+    });
+  });
+}
+
+// src/js/components/stateful/dropdown.js
+function initDropdown(rootSelector = `.${PREFIX}-dropdown`) {
+  document.querySelectorAll(rootSelector).forEach((dropdown) => {
+    const trigger = dropdown.querySelector(`.${PREFIX}-dropdown__trigger`);
+    const input = dropdown.querySelector(`.${PREFIX}-dropdown__input`);
+    const menu = dropdown.querySelector(`.${PREFIX}-dropdown__menu`);
+    const menuItems = menu.querySelectorAll("li[role='option']");
+    const menuId = menu.id;
+    let activeIndex = -1;
+    menuItems.forEach((item, index) => {
+      item.id = `${menuId}-item-${index}`;
+    });
+    const toggleMenu = (show) => {
+      const isCurrentlyShown = dropdown.classList.contains("show");
+      const isShown = show !== void 0 ? show : !isCurrentlyShown;
+      if (isShown === isCurrentlyShown) {
+        return;
+      }
+      dropdown.classList.toggle("show", isShown);
+      trigger.setAttribute("aria-expanded", isShown);
+      if (isShown) {
+        input.focus();
+      } else {
+        input.blur();
+        removeHighlight();
+        activeIndex = -1;
+        input.removeAttribute("aria-activedescendant");
+      }
+    };
+    const filterItems = () => {
+      const filterValue = input.value.toLowerCase();
+      let hasVisibleItems = false;
+      activeIndex = -1;
+      removeHighlight();
+      input.removeAttribute("aria-activedescendant");
+      const activeItem = menu.querySelector("li[role='option'].selected");
+      if (activeItem && input.value !== activeItem.textContent.trim()) {
+        activeItem.classList.remove("selected");
+      }
+      menuItems.forEach((item) => {
+        const itemText = item.textContent.toLowerCase();
+        const isMatch = itemText.includes(filterValue);
+        item.classList.toggle("hidden", !isMatch);
+        if (isMatch) hasVisibleItems = true;
+      });
+      if (!dropdown.classList.contains("show") && hasVisibleItems) {
+        toggleMenu(true);
+      }
+    };
+    const selectItem = (item) => {
+      const itemText = item.textContent.trim();
+      input.value = itemText;
+      menuItems.forEach((li) => {
+        li.classList.remove("selected");
+      });
+      if (item) {
+        item.classList.add("selected");
+        dropdown.dispatchEvent(
+          new CustomEvent("dropdown:changed", {
+            detail: { value: itemText }
+          })
+        );
+      }
+      toggleMenu(false);
+    };
+    const setHighlight = (index) => {
+      removeHighlight();
+      const visibleItems = menu.querySelectorAll(
+        "li[role='option']:not(.hidden)"
+      );
+      if (visibleItems.length === 0) return;
+      if (index < 0) index = 0;
+      else if (index >= visibleItems.length) index = visibleItems.length - 1;
+      const itemToHighlight = visibleItems[index];
+      if (itemToHighlight) {
+        itemToHighlight.classList.add("highlighted");
+        input.setAttribute("aria-activedescendant", itemToHighlight.id);
+        itemToHighlight.scrollIntoView({
+          behavior: "smooth",
+          block: "nearest"
+        });
+        activeIndex = index;
+      }
+    };
+    const removeHighlight = () => {
+      menuItems.forEach((item) => item.classList.remove("highlighted"));
+    };
+    trigger.addEventListener("click", () => {
+      toggleMenu();
+    });
+    input.addEventListener("input", filterItems);
+    menu.addEventListener("click", (e) => {
+      const option = e.target.closest("li[role='option']");
+      if (option) {
+        e.preventDefault();
+        selectItem(option);
+      }
+    });
+    document.addEventListener("click", (e) => {
+      if (!dropdown.contains(e.target)) {
+        toggleMenu(false);
+      }
+    });
+    input.addEventListener("keydown", (e) => {
+      const { key } = e;
+      const isMenuOpen = dropdown.classList.contains("show");
+      switch (key) {
+        case "ArrowDown":
+          e.preventDefault();
+          if (!isMenuOpen) {
+            toggleMenu(true);
+          }
+          setHighlight(activeIndex + 1);
+          break;
+        case "ArrowUp":
+          e.preventDefault();
+          if (isMenuOpen) {
+            setHighlight(activeIndex - 1);
+          }
+          break;
+        case "Enter":
+          e.preventDefault();
+          const firstVisible = menu.querySelector(
+            "li[role='option']:not(.hidden)"
+          );
+          const activeItem = menu.querySelector(".highlighted");
+          if (isMenuOpen && activeItem) {
+            selectItem(activeItem);
+          } else if (isMenuOpen && firstVisible) {
+            toggleMenu(false);
+          }
+          break;
+        case "Escape":
+          e.preventDefault();
+          toggleMenu(false);
+          break;
+        case "Tab":
+          toggleMenu(false);
+          break;
+      }
+    });
+  });
+}
+
+// src/js/components/stateless/banner.js
+function initBanner(rootSelector = `.${PREFIX}-banner`) {
+  document.querySelectorAll(rootSelector).forEach((banner) => {
+    const mediaQuery = window.matchMedia("(max-width: 1279px)");
+    function updateElText(targetEl, mediaQuery2) {
+      targetEl.textContent = mediaQuery2.matches ? "Situs ini merupakan platform resmi pemerintah." : "Situs ini merupakan platform resmi pemerintah Indonesia yang dikelola oleh INA Digital.";
+    }
+    const contentEl = document.createElement("div");
+    contentEl.className = `${PREFIX}-banner__content`;
+    const iconEl = document.createElement("div");
+    iconEl.className = `${PREFIX}-banner__icon`;
+    const wrapperEl = document.createElement("div");
+    wrapperEl.className = `${PREFIX}-banner__wrapper`;
+    const headerEl = document.createElement("div");
+    headerEl.className = `${PREFIX}-banner__header`;
+    const headerWrapperEl = document.createElement("div");
+    headerWrapperEl.className = `${PREFIX}-banner__header-wrapper`;
+    const headerTitleEl = document.createElement("p");
+    headerTitleEl.className = `${PREFIX}-banner__title`;
+    headerTitleEl.textContent = "Situs ini merupakan platform resmi pemerintah. ";
+    updateElText(headerTitleEl, mediaQuery);
+    const identityEl = document.createElement("a");
+    identityEl.href = "#";
+    identityEl.className = `${PREFIX}-banner__identity`;
+    identityEl.textContent = "Lebih Lanjut";
+    identityEl.addEventListener("click", (e) => {
+      e.preventDefault();
+      banner.classList.toggle("open");
+    });
+    const chevronEl = document.createElement("button");
+    chevronEl.className = `${PREFIX}-banner__chevron`;
+    chevronEl.addEventListener("click", (e) => {
+      e.preventDefault();
+      banner.classList.toggle("open");
+      const isOpen = banner.classList.contains("open");
+      headerTitleEl.textContent = isOpen ? "Situs ini merupakan platform resmi pemerintah Indonesia yang dikelola oleh INA Digital." : "Situs ini merupakan platform resmi pemerintah. ";
+    });
+    headerWrapperEl.appendChild(headerTitleEl);
+    headerWrapperEl.appendChild(identityEl);
+    headerEl.appendChild(headerWrapperEl);
+    headerEl.appendChild(chevronEl);
+    const bodyEl = document.createElement("div");
+    bodyEl.className = `${PREFIX}-banner__body`;
+    const bodyTitleEl = document.createElement("p");
+    bodyTitleEl.className = `${PREFIX}-banner__title`;
+    bodyTitleEl.textContent = "INA Digital adalah inisiatif pemerintah Indonesia untuk membangun ekosistem layanan publik digital yang terintegrasi, aman, dan mudah digunakan oleh masyarakat.";
+    const descEl = document.createElement("p");
+    descEl.className = `${PREFIX}-banner__desc`;
+    descEl.textContent = "Pastikan untuk memperhatikan ikon kunci (\u{1F512}) dan alamat https:// sebagai penanda keamanan.";
+    bodyEl.appendChild(bodyTitleEl);
+    bodyEl.appendChild(descEl);
+    wrapperEl.appendChild(headerEl);
+    wrapperEl.appendChild(bodyEl);
+    contentEl.appendChild(iconEl);
+    contentEl.appendChild(wrapperEl);
+    banner.appendChild(contentEl);
+    mediaQuery.addEventListener("change", () => {
+      updateElText(headerTitleEl, mediaQuery);
+    });
+  });
+}
+
+// src/js/components/stateful/file-upload-base.js
+function initFileUploadBase(rootSelector = `.${PREFIX}-file-base`) {
+  document.querySelectorAll(rootSelector).forEach((fileUploadBase) => {
+    const fileIconContainer = fileUploadBase.querySelector(
+      ".ina-ss-file-base__icon-container"
+    );
+    const fileTitle = fileUploadBase.querySelector(".ina-ss-file-base__title");
+    const fileDesc = fileUploadBase.querySelector(".ina-ss-file-base__desc");
+    const buttonUpload = fileUploadBase.querySelector(
+      ".ina-ss-file-base__trigger"
+    );
+    const inputFile = fileUploadBase.querySelector(".ina-ss-file-base__input");
+    buttonUpload.addEventListener("click", () => {
+      inputFile.click();
+    });
+    inputFile.addEventListener("change", () => {
+      handleFile(inputFile.files[0]);
+    });
+    fileUploadBase.addEventListener("dragover", (e) => {
+      e.preventDefault();
+      fileUploadBase.classList.add("dragover");
+    });
+    fileUploadBase.addEventListener("dragleave", () => {
+      fileUploadBase.classList.remove("dragover");
+    });
+    fileUploadBase.addEventListener("drop", (e) => {
+      e.preventDefault();
+      fileUploadBase.classList.remove("dragover");
+      const file = e.dataTransfer.files;
+      handleFile(file[0]);
+    });
+    function simulateUpload() {
+      const fileIcon = fileUploadBase.querySelector(".ina-ss-file-base__icon");
+      const loadingEl = document.createElement("div");
+      loadingEl.classList.add("ina-ss-loading__spinner");
+      fileIconContainer.replaceChild(loadingEl, fileIcon);
+      fileTitle.textContent = "Mengunggah...";
+      fileDesc.textContent = "";
+      buttonUpload.disabled = true;
+    }
+    function handleFile(inputFile2) {
+      simulateUpload();
+      const FILE_NAME = inputFile2.name;
+      const FILE_SIZE_IN_MB = inputFile2.size / (1024 * 1024);
+      const FILE_TYPE = inputFile2.type;
+      const IMAGE_TYPE = ["image/png", "image/jpg", "image/jpeg"];
+      setTimeout(() => {
+        fileIconContainer.innerHTML = "";
+        const defaultFileIcon = document.createElement("div");
+        defaultFileIcon.classList.add("ina-ss-file-base__icon");
+        fileIconContainer.appendChild(defaultFileIcon);
+        if (FILE_TYPE === "application/pdf") {
+          defaultFileIcon.style.backgroundImage = "url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2232%22%20height%3D%2232%22%20viewBox%3D%220%200%2032%2032%22%20fill%3D%22none%22%3E%3Cpath%20d%3D%22M10.1556%200.400421H21.434L30.8002%209.76566V27.834C30.8002%2029.8914%2029.0115%2031.5996%2026.7523%2031.5996H10.056C7.78789%2031.5995%206.00037%2029.8909%206.00037%2027.834V4.16605C6.00033%202.12004%207.87549%200.400437%2010.1556%200.400421Z%22%20fill%3D%22white%22%20stroke%3D%22%23E5E5E5%22%20stroke-width%3D%220.8%22%2F%3E%3Cpath%20d%3D%22M21.6205%206.528V0L31.2%209.6H24.8136C21.9398%209.6%2021.4874%207.552%2021.6205%206.528Z%22%20fill%3D%22%23E5E5E5%22%2F%3E%3Crect%20x%3D%220.799988%22%20y%3D%2215.2%22%20width%3D%2221.4%22%20height%3D%2212.2%22%20rx%3D%222.4%22%20fill%3D%22%23D92D20%22%2F%3E%3Cpath%20d%3D%22M4.89925%2023.8V18.5636H6.96516C7.36232%2018.5636%207.70067%2018.6395%207.98022%2018.7912C8.25977%2018.9412%208.47283%2019.15%208.61942%2019.4176C8.76772%2019.6835%208.84187%2019.9903%208.84187%2020.3381C8.84187%2020.6858%208.76687%2020.9926%208.61687%2021.2585C8.46687%2021.5244%208.24954%2021.7315%207.96488%2021.8798C7.68192%2022.0281%207.33931%2022.1023%206.93704%2022.1023H5.62028V21.215H6.75806C6.97113%2021.215%207.1467%2021.1784%207.28477%2021.1051C7.42454%2021.0301%207.52852%2020.927%207.5967%2020.7957C7.66658%2020.6628%207.70153%2020.5102%207.70153%2020.3381C7.70153%2020.1642%207.66658%2020.0125%207.5967%2019.8829C7.52852%2019.7517%207.42454%2019.6503%207.28477%2019.5787C7.14499%2019.5054%206.96772%2019.4687%206.75295%2019.4687H6.00636V23.8H4.89925ZM11.4172%2023.8H9.56097V18.5636H11.4326C11.9593%2018.5636%2012.4127%2018.6685%2012.7928%2018.8781C13.1729%2019.0861%2013.4652%2019.3852%2013.6698%2019.7756C13.876%2020.1659%2013.9792%2020.6329%2013.9792%2021.1767C13.9792%2021.7221%2013.876%2022.1909%2013.6698%2022.5829C13.4652%2022.975%2013.1712%2023.2758%2012.7877%2023.4855C12.4059%2023.6952%2011.949%2023.8%2011.4172%2023.8ZM10.6681%2022.8514H11.3712C11.6985%2022.8514%2011.9738%2022.7935%2012.1971%2022.6775C12.4221%2022.5599%2012.5908%2022.3784%2012.7033%2022.1329C12.8175%2021.8858%2012.8746%2021.567%2012.8746%2021.1767C12.8746%2020.7898%2012.8175%2020.4736%2012.7033%2020.2281C12.5908%2019.9827%2012.4229%2019.802%2012.1996%2019.6861C11.9763%2019.5702%2011.701%2019.5122%2011.3738%2019.5122H10.6681V22.8514ZM14.7993%2023.8V18.5636H18.2663V19.4764H15.9064V20.7241H18.0362V21.6369H15.9064V23.8H14.7993Z%22%20fill%3D%22white%22%2F%3E%3C%2Fsvg%3E')";
+          defaultFileIcon.style.width = "2rem";
+          defaultFileIcon.style.height = "2rem";
+        }
+        if (IMAGE_TYPE.includes(FILE_TYPE)) {
+          defaultFileIcon.style.backgroundImage = "url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2232%22%20height%3D%2232%22%20viewBox%3D%220%200%2032%2032%22%20fill%3D%22none%22%3E%3Cpath%20d%3D%22M10.1556%200.400452H21.434L30.8002%209.76569V27.834C30.8002%2029.8915%2029.0115%2031.5996%2026.7523%2031.5997H10.056C7.78789%2031.5996%206.00037%2029.891%206.00037%2027.834V4.16608C6.00033%202.12007%207.87549%200.400467%2010.1556%200.400452Z%22%20fill%3D%22white%22%20stroke%3D%22%23E5E5E5%22%20stroke-width%3D%220.8%22%2F%3E%3Cpath%20d%3D%22M21.6205%206.528V0L31.2%209.6H24.8136C21.9398%209.6%2021.4874%207.552%2021.6205%206.528Z%22%20fill%3D%22%23E5E5E5%22%2F%3E%3Crect%20x%3D%220.799988%22%20y%3D%2215.2%22%20width%3D%2221.4%22%20height%3D%2212.2%22%20rx%3D%222.4%22%20fill%3D%22%237F56D9%22%2F%3E%3Cpath%20d%3D%22M6.02042%2018.5636V23.8H4.91332V18.5636H6.02042ZM6.93128%2018.5636H8.29663L9.73867%2022.0818H9.80004L11.2421%2018.5636H12.6074V23.8H11.5336V20.3917H11.4901L10.135%2023.7744H9.40373L8.04861%2020.379H8.00515V23.8H6.93128V18.5636ZM16.9917%2020.2562C16.9559%2020.1318%2016.9056%2020.0219%2016.8409%2019.9264C16.7761%2019.8292%2016.6968%2019.7474%2016.6031%2019.681C16.511%2019.6128%2016.4054%2019.5608%2016.286%2019.525C16.1684%2019.4892%2016.038%2019.4713%2015.8949%2019.4713C15.6272%2019.4713%2015.392%2019.5378%2015.1892%2019.6707C14.988%2019.8037%2014.8312%2019.9971%2014.7187%2020.2511C14.6062%2020.5034%2014.55%2020.8119%2014.55%2021.1767C14.55%2021.5415%2014.6054%2021.8517%2014.7162%2022.1074C14.827%2022.3631%2014.9838%2022.5582%2015.1866%2022.6929C15.3895%2022.8258%2015.6289%2022.8923%2015.9051%2022.8923C16.1556%2022.8923%2016.3696%2022.848%2016.5468%2022.7594C16.7258%2022.669%2016.8622%2022.542%2016.9559%2022.3784C17.0514%2022.2148%2017.0991%2022.0213%2017.0991%2021.798L17.3241%2021.8312H15.9741V20.9977H18.1653V21.6574C18.1653%2022.1176%2018.0681%2022.5131%2017.8738%2022.8437C17.6795%2023.1727%2017.4119%2023.4267%2017.071%2023.6057C16.7301%2023.7829%2016.3397%2023.8716%2015.9%2023.8716C15.4091%2023.8716%2014.9778%2023.7633%2014.6062%2023.5469C14.2346%2023.3287%2013.9449%2023.0193%2013.7369%2022.6187C13.5306%2022.2165%2013.4275%2021.7392%2013.4275%2021.1869C13.4275%2020.7625%2013.4889%2020.3841%2013.6116%2020.0517C13.736%2019.7176%2013.9099%2019.4346%2014.1332%2019.2028C14.3565%2018.971%2014.6164%2018.7946%2014.913%2018.6736C15.2096%2018.5525%2015.5309%2018.492%2015.877%2018.492C16.1735%2018.492%2016.4497%2018.5355%2016.7054%2018.6224C16.961%2018.7077%2017.1877%2018.8287%2017.3855%2018.9855C17.5849%2019.1423%2017.7477%2019.329%2017.8738%2019.5454C18%2019.7602%2018.0809%2019.9971%2018.1167%2020.2562H16.9917Z%22%20fill%3D%22white%22%2F%3E%3C%2Fsvg%3E')";
+          defaultFileIcon.style.width = "2rem";
+          defaultFileIcon.style.height = "2rem";
+        }
+        fileTitle.textContent = FILE_NAME;
+        fileDesc.textContent = `Ukuran File: ${FILE_SIZE_IN_MB.toFixed(2)}MB`;
+        buttonUpload.classList.replace(
+          "ina-ss-btn--secondary",
+          "ina-ss-btn--link"
+        );
+        buttonUpload.style.textDecoration = "underline";
+        buttonUpload.textContent = "Ubah File";
+        buttonUpload.disabled = false;
+        fileUploadBase.dispatchEvent(
+          new CustomEvent("file:changed", { detail: { inputFile: inputFile2 } })
+        );
+      }, 1e3);
+    }
+  });
+}
+
+// src/js/components/stateful/file-upload-item.js
+function initFileUploadItem(rootSelector = `.${PREFIX}-file-item`) {
+  document.querySelectorAll(rootSelector).forEach((fileUploadItem) => {
+    const fileIconContainer = fileUploadItem.querySelector(
+      ".ina-ss-file-item__icon-container"
+    );
+    const fileTitle = fileUploadItem.querySelector(".ina-ss-file-item__title");
+    const fileDesc = fileUploadItem.querySelector(".ina-ss-file-item__desc");
+    const inputFile = fileUploadItem.querySelector(".ina-ss-file-item__input");
+    fileUploadItem.addEventListener("click", () => {
+      inputFile.click();
+    });
+    inputFile.addEventListener("change", () => {
+      handleFile(inputFile.files[0]);
+    });
+    fileUploadItem.addEventListener("dragover", (e) => {
+      e.preventDefault();
+      fileUploadItem.classList.add("dragover");
+    });
+    fileUploadItem.addEventListener("dragleave", () => {
+      fileUploadItem.classList.remove("dragover");
+    });
+    fileUploadItem.addEventListener("drop", (e) => {
+      e.preventDefault();
+      fileUploadItem.classList.remove("dragover");
+      const file = e.dataTransfer.files;
+      handleFile(file[0]);
+    });
+    function simulateUpload() {
+      const fileIcon = fileUploadItem.querySelector(".ina-ss-file-item__icon");
+      const loadingEl = document.createElement("div");
+      loadingEl.classList.add("ina-ss-loading__spinner");
+      fileIconContainer.replaceChild(loadingEl, fileIcon);
+    }
+    function handleFile(inputFile2) {
+      simulateUpload();
+      const FILE_NAME = inputFile2.name;
+      const FILE_SIZE_IN_MB = inputFile2.size / (1024 * 1024);
+      const FILE_TYPE = inputFile2.type;
+      const IMAGE_TYPE = ["image/png", "image/jpg", "image/jpeg"];
+      setTimeout(() => {
+        fileIconContainer.innerHTML = "";
+        const defaultFileIcon = document.createElement("div");
+        defaultFileIcon.classList.add("ina-ss-file-item__icon");
+        fileIconContainer.appendChild(defaultFileIcon);
+        if (FILE_TYPE === "application/pdf") {
+          defaultFileIcon.style.backgroundImage = "url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2232%22%20height%3D%2232%22%20viewBox%3D%220%200%2032%2032%22%20fill%3D%22none%22%3E%3Cpath%20d%3D%22M10.1556%200.400421H21.434L30.8002%209.76566V27.834C30.8002%2029.8914%2029.0115%2031.5996%2026.7523%2031.5996H10.056C7.78789%2031.5995%206.00037%2029.8909%206.00037%2027.834V4.16605C6.00033%202.12004%207.87549%200.400437%2010.1556%200.400421Z%22%20fill%3D%22white%22%20stroke%3D%22%23E5E5E5%22%20stroke-width%3D%220.8%22%2F%3E%3Cpath%20d%3D%22M21.6205%206.528V0L31.2%209.6H24.8136C21.9398%209.6%2021.4874%207.552%2021.6205%206.528Z%22%20fill%3D%22%23E5E5E5%22%2F%3E%3Crect%20x%3D%220.799988%22%20y%3D%2215.2%22%20width%3D%2221.4%22%20height%3D%2212.2%22%20rx%3D%222.4%22%20fill%3D%22%23D92D20%22%2F%3E%3Cpath%20d%3D%22M4.89925%2023.8V18.5636H6.96516C7.36232%2018.5636%207.70067%2018.6395%207.98022%2018.7912C8.25977%2018.9412%208.47283%2019.15%208.61942%2019.4176C8.76772%2019.6835%208.84187%2019.9903%208.84187%2020.3381C8.84187%2020.6858%208.76687%2020.9926%208.61687%2021.2585C8.46687%2021.5244%208.24954%2021.7315%207.96488%2021.8798C7.68192%2022.0281%207.33931%2022.1023%206.93704%2022.1023H5.62028V21.215H6.75806C6.97113%2021.215%207.1467%2021.1784%207.28477%2021.1051C7.42454%2021.0301%207.52852%2020.927%207.5967%2020.7957C7.66658%2020.6628%207.70153%2020.5102%207.70153%2020.3381C7.70153%2020.1642%207.66658%2020.0125%207.5967%2019.8829C7.52852%2019.7517%207.42454%2019.6503%207.28477%2019.5787C7.14499%2019.5054%206.96772%2019.4687%206.75295%2019.4687H6.00636V23.8H4.89925ZM11.4172%2023.8H9.56097V18.5636H11.4326C11.9593%2018.5636%2012.4127%2018.6685%2012.7928%2018.8781C13.1729%2019.0861%2013.4652%2019.3852%2013.6698%2019.7756C13.876%2020.1659%2013.9792%2020.6329%2013.9792%2021.1767C13.9792%2021.7221%2013.876%2022.1909%2013.6698%2022.5829C13.4652%2022.975%2013.1712%2023.2758%2012.7877%2023.4855C12.4059%2023.6952%2011.949%2023.8%2011.4172%2023.8ZM10.6681%2022.8514H11.3712C11.6985%2022.8514%2011.9738%2022.7935%2012.1971%2022.6775C12.4221%2022.5599%2012.5908%2022.3784%2012.7033%2022.1329C12.8175%2021.8858%2012.8746%2021.567%2012.8746%2021.1767C12.8746%2020.7898%2012.8175%2020.4736%2012.7033%2020.2281C12.5908%2019.9827%2012.4229%2019.802%2012.1996%2019.6861C11.9763%2019.5702%2011.701%2019.5122%2011.3738%2019.5122H10.6681V22.8514ZM14.7993%2023.8V18.5636H18.2663V19.4764H15.9064V20.7241H18.0362V21.6369H15.9064V23.8H14.7993Z%22%20fill%3D%22white%22%2F%3E%3C%2Fsvg%3E')";
+          defaultFileIcon.style.width = "2rem";
+          defaultFileIcon.style.height = "2rem";
+        }
+        if (IMAGE_TYPE.includes(FILE_TYPE)) {
+          defaultFileIcon.style.backgroundImage = "url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2232%22%20height%3D%2232%22%20viewBox%3D%220%200%2032%2032%22%20fill%3D%22none%22%3E%3Cpath%20d%3D%22M10.1556%200.400452H21.434L30.8002%209.76569V27.834C30.8002%2029.8915%2029.0115%2031.5996%2026.7523%2031.5997H10.056C7.78789%2031.5996%206.00037%2029.891%206.00037%2027.834V4.16608C6.00033%202.12007%207.87549%200.400467%2010.1556%200.400452Z%22%20fill%3D%22white%22%20stroke%3D%22%23E5E5E5%22%20stroke-width%3D%220.8%22%2F%3E%3Cpath%20d%3D%22M21.6205%206.528V0L31.2%209.6H24.8136C21.9398%209.6%2021.4874%207.552%2021.6205%206.528Z%22%20fill%3D%22%23E5E5E5%22%2F%3E%3Crect%20x%3D%220.799988%22%20y%3D%2215.2%22%20width%3D%2221.4%22%20height%3D%2212.2%22%20rx%3D%222.4%22%20fill%3D%22%237F56D9%22%2F%3E%3Cpath%20d%3D%22M6.02042%2018.5636V23.8H4.91332V18.5636H6.02042ZM6.93128%2018.5636H8.29663L9.73867%2022.0818H9.80004L11.2421%2018.5636H12.6074V23.8H11.5336V20.3917H11.4901L10.135%2023.7744H9.40373L8.04861%2020.379H8.00515V23.8H6.93128V18.5636ZM16.9917%2020.2562C16.9559%2020.1318%2016.9056%2020.0219%2016.8409%2019.9264C16.7761%2019.8292%2016.6968%2019.7474%2016.6031%2019.681C16.511%2019.6128%2016.4054%2019.5608%2016.286%2019.525C16.1684%2019.4892%2016.038%2019.4713%2015.8949%2019.4713C15.6272%2019.4713%2015.392%2019.5378%2015.1892%2019.6707C14.988%2019.8037%2014.8312%2019.9971%2014.7187%2020.2511C14.6062%2020.5034%2014.55%2020.8119%2014.55%2021.1767C14.55%2021.5415%2014.6054%2021.8517%2014.7162%2022.1074C14.827%2022.3631%2014.9838%2022.5582%2015.1866%2022.6929C15.3895%2022.8258%2015.6289%2022.8923%2015.9051%2022.8923C16.1556%2022.8923%2016.3696%2022.848%2016.5468%2022.7594C16.7258%2022.669%2016.8622%2022.542%2016.9559%2022.3784C17.0514%2022.2148%2017.0991%2022.0213%2017.0991%2021.798L17.3241%2021.8312H15.9741V20.9977H18.1653V21.6574C18.1653%2022.1176%2018.0681%2022.5131%2017.8738%2022.8437C17.6795%2023.1727%2017.4119%2023.4267%2017.071%2023.6057C16.7301%2023.7829%2016.3397%2023.8716%2015.9%2023.8716C15.4091%2023.8716%2014.9778%2023.7633%2014.6062%2023.5469C14.2346%2023.3287%2013.9449%2023.0193%2013.7369%2022.6187C13.5306%2022.2165%2013.4275%2021.7392%2013.4275%2021.1869C13.4275%2020.7625%2013.4889%2020.3841%2013.6116%2020.0517C13.736%2019.7176%2013.9099%2019.4346%2014.1332%2019.2028C14.3565%2018.971%2014.6164%2018.7946%2014.913%2018.6736C15.2096%2018.5525%2015.5309%2018.492%2015.877%2018.492C16.1735%2018.492%2016.4497%2018.5355%2016.7054%2018.6224C16.961%2018.7077%2017.1877%2018.8287%2017.3855%2018.9855C17.5849%2019.1423%2017.7477%2019.329%2017.8738%2019.5454C18%2019.7602%2018.0809%2019.9971%2018.1167%2020.2562H16.9917Z%22%20fill%3D%22white%22%2F%3E%3C%2Fsvg%3E')";
+          defaultFileIcon.style.width = "2rem";
+          defaultFileIcon.style.height = "2rem";
+        }
+        fileTitle.textContent = FILE_NAME;
+        fileDesc.textContent = `Ukuran File: ${FILE_SIZE_IN_MB.toFixed(2)}MB`;
+        fileUploadItem.dispatchEvent(
+          new CustomEvent("file:changed", { detail: { inputFile: inputFile2 } })
+        );
+      }, 1e3);
+    }
+  });
+}
+
+// src/js/components/stateful/range-datepicker.js
+function initRangeDatepicker() {
+  document.querySelectorAll(".ina-ss-range-datepicker").forEach((rangeDatepicker) => {
+    let currentDate = /* @__PURE__ */ new Date();
+    let currentDateLeft = /* @__PURE__ */ new Date();
+    let currentDateRight = new Date(
+      currentDateLeft.getFullYear(),
+      currentDateLeft.getMonth() + 1,
+      currentDateLeft.getDate()
+    );
+    let selectedDateTarget = null;
+    let fromSelectedDate = null;
+    let toSelectedDate = null;
+    let selectedDate = null;
+    const MONTHS = [
+      "Januari",
+      "Februari",
+      "Maret",
+      "April",
+      "Mei",
+      "Juni",
+      "Juli",
+      "Agustus",
+      "September",
+      "Oktober",
+      "November",
+      "Desember"
+    ];
+    const DAYS = ["Min", "Sen", "Sel", "Rab", "Kam", "Jum", "Sab"];
+    const rangeDatepickerTrigger = rangeDatepicker.querySelector(
+      `.ina-ss-range-datepicker__trigger`
+    );
+    const rangeDatepickerPopover = rangeDatepicker.querySelector(
+      `.ina-ss-range-datepicker__popover`
+    );
+    const datePickerLeftDate = rangeDatepicker.querySelector(
+      `.ina-ss-range-datepicker__left-date`
+    );
+    const datePickerRightDate = rangeDatepicker.querySelector(
+      `.ina-ss-range-datepicker__right-date`
+    );
+    const datepickerMonthLeftTrigger = datePickerLeftDate.querySelector(
+      `.ina-ss-range-datepicker__month-trigger`
+    );
+    const datepickerMonthRightTrigger = datePickerRightDate.querySelector(
+      `.ina-ss-range-datepicker__month-trigger`
+    );
+    const datepickerLeftContent = datePickerLeftDate.querySelector(
+      `.ina-ss-range-datepicker__content`
+    );
+    const datepickerRightContent = datePickerRightDate.querySelector(
+      `.ina-ss-range-datepicker__content`
+    );
+    const prevMonthButtonLeft = datePickerLeftDate.querySelector(
+      `.ina-ss-range-datepicker__nav-prev`
+    );
+    const nextMonthButtonLeft = datePickerLeftDate.querySelector(
+      `.ina-ss-range-datepicker__nav-next`
+    );
+    const prevMonthButtonRight = datePickerRightDate.querySelector(
+      `.ina-ss-range-datepicker__nav-prev`
+    );
+    const nextMonthButtonRight = datePickerRightDate.querySelector(
+      `.ina-ss-range-datepicker__nav-next`
+    );
+    function renderCalendar(targetEl, year, month) {
+      const rangeDatepickerMonthTrigger = targetEl.querySelector(
+        `.ina-ss-range-datepicker__month-trigger`
+      );
+      const rangeDatepickerMonthPopover = targetEl.querySelector(
+        `.ina-ss-range-datepicker__month-popover`
+      );
+      const rangeDatepickerMonthItem = targetEl.querySelectorAll(
+        `.ina-ss-range-datepicker__month-item`
+      );
+      const rangeDatepickerYearTrigger = targetEl.querySelector(
+        `.ina-ss-range-datepicker__year-trigger`
+      );
+      const targetContentEl = targetEl.querySelector(
+        `.ina-ss-range-datepicker__content`
+      );
+      targetContentEl.innerHTML = "";
+      rangeDatepickerMonthTrigger.textContent = MONTHS[month].substring(0, 3);
+      rangeDatepickerYearTrigger.textContent = year;
+      DAYS.forEach((day) => {
+        const dayNameWrapper = document.createElement("div");
+        dayNameWrapper.className = `ina-ss-range-datepicker__dayname-wrapper`;
+        const dayNameEl = document.createElement("span");
+        dayNameEl.className = `ina-ss-range-datepicker__dayname`;
+        dayNameEl.textContent = day.substring(0, 3);
+        dayNameWrapper.appendChild(dayNameEl);
+        targetContentEl.appendChild(dayNameWrapper);
+      });
+      const firstDayOfMonth = new Date(year, month, 1).getDay();
+      const daysInMonth = new Date(year, month + 1, 0).getDate();
+      const daysInPrevMonth = new Date(year, month, 0).getDate();
+      for (let i = 0; i < firstDayOfMonth; i++) {
+        const dayEl = document.createElement("button");
+        dayEl.className = `ina-ss-range-datepicker__calendar-day outside-month`;
+        dayEl.textContent = daysInPrevMonth - firstDayOfMonth + 1 + i;
+        dayEl.disabled = true;
+        targetContentEl.appendChild(dayEl);
+      }
+      const today = /* @__PURE__ */ new Date();
+      for (let i = 1; i <= daysInMonth; i++) {
+        const dayEl = document.createElement("button");
+        dayEl.className = `ina-ss-range-datepicker__calendar-day`;
+        dayEl.textContent = i;
+        dayEl.dataset.date = new Date(year, month, i).toISOString();
+        if (fromSelectedDate && new Date(year, month, i).getTime() === fromSelectedDate?.getTime()) {
+          dayEl.classList.add("selected-from");
+        }
+        if (toSelectedDate && new Date(year, month, i).getTime() === toSelectedDate?.getTime()) {
+          dayEl.classList.add("selected-to");
+        }
+        if (toSelectedDate && new Date(year, month, i) === toSelectedDate) {
+          dayEl.classList.add("selected-to");
+        }
+        if (fromSelectedDate && toSelectedDate && new Date(year, month, i) > fromSelectedDate && new Date(year, month, i) < toSelectedDate) {
+          dayEl.classList.add("selected-range");
+        }
+        if (year === today.getFullYear() && month === today.getMonth() && i === today.getDate()) {
+          const marker = document.createElement("span");
+          marker.className = `ina-ss-range-datepicker__today-marker`;
+          marker.textContent = "Hari ini";
+          dayEl.appendChild(marker);
+          dayEl.classList.add("today");
+        }
+        if (selectedDate && year === selectedDate.getFullYear() && month === selectedDate.getMonth() && i === selectedDate.getDate()) {
+          dayEl.classList.add("selected");
+        }
+        targetContentEl.appendChild(dayEl);
+      }
+      const totalCells = 42;
+      const cellsRendered = firstDayOfMonth + daysInMonth;
+      const remainingCells = totalCells - cellsRendered;
+      for (let i = 1; i <= remainingCells; i++) {
+        const dayEl = document.createElement("button");
+        dayEl.className = `ina-ss-range-datepicker__calendar-day outside-month`;
+        dayEl.textContent = i;
+        dayEl.disabled = true;
+        targetContentEl.appendChild(dayEl);
+      }
+    }
+    function handleChangeDate(target) {
+      if (fromSelectedDate && toSelectedDate) {
+        if (target.classList.contains(
+          `ina-ss-range-datepicker__calendar-day`
+        ) && !target.classList.contains("outside-month")) {
+          const targetDate = new Date(target.dataset.date);
+          if (target.classList.contains("selected-from") || target.classList.contains("selected-to")) {
+            const fromSelectedDateLeftEl = datepickerLeftContent.querySelector(
+              `.ina-ss-range-datepicker__calendar-day.selected-from`
+            );
+            const fromSelectedDateRightEl = datepickerRightContent.querySelector(
+              `.ina-ss-range-datepicker__calendar-day.selected-from`
+            );
+            fromSelectedDateLeftEl?.classList.remove("selected-from");
+            fromSelectedDateRightEl?.classList.remove("selected-from");
+            const toSelectedDateLeftEl = datepickerLeftContent.querySelector(
+              `.ina-ss-range-datepicker__calendar-day.selected-to`
+            );
+            const toSelectedDateRightEl = datepickerRightContent.querySelector(
+              `.ina-ss-range-datepicker__calendar-day.selected-to`
+            );
+            toSelectedDateLeftEl?.classList.remove("selected-to");
+            toSelectedDateRightEl?.classList.remove("selected-to");
+            target.classList.add("selected-from");
+            target.classList.add("selected-to");
+            fromSelectedDate = targetDate;
+            toSelectedDate = targetDate;
+          }
+          if (targetDate < fromSelectedDate) {
+            const fromSelectedDateLeftEl = datepickerLeftContent.querySelector(
+              `.ina-ss-range-datepicker__calendar-day.selected-from`
+            );
+            const fromSelectedDateRightEl = datepickerRightContent.querySelector(
+              `.ina-ss-range-datepicker__calendar-day.selected-from`
+            );
+            fromSelectedDateLeftEl?.classList.remove("selected-from");
+            fromSelectedDateRightEl?.classList.remove("selected-from");
+            fromSelectedDate = targetDate;
+            target.classList.add("selected-from");
+          }
+          if (targetDate > toSelectedDate || targetDate > fromSelectedDate) {
+            const toSelectedDateLeftEl = datepickerLeftContent.querySelector(
+              `.ina-ss-range-datepicker__calendar-day.selected-to`
+            );
+            const toSelectedDateRightEl = datepickerRightContent.querySelector(
+              `.ina-ss-range-datepicker__calendar-day.selected-to`
+            );
+            toSelectedDateLeftEl?.classList.remove("selected-to");
+            toSelectedDateRightEl?.classList.remove("selected-to");
+            toSelectedDate = targetDate;
+            target.classList.add("selected-to");
+          }
+          const leftDays = datepickerLeftContent.querySelectorAll(
+            ".ina-ss-range-datepicker__calendar-day"
+          );
+          const rightDays = datepickerRightContent.querySelectorAll(
+            ".ina-ss-range-datepicker__calendar-day"
+          );
+          const leftDaysArray = Array.from(leftDays);
+          const rightDaysArray = Array.from(rightDays);
+          const leftFromIndex = leftDaysArray.findIndex(
+            (btn) => btn.classList.contains("selected-from")
+          );
+          const rightFromIndex = rightDaysArray.findIndex(
+            (btn) => btn.classList.contains("selected-from")
+          );
+          const leftToIndex = leftDaysArray.findIndex(
+            (btn) => btn.classList.contains("selected-to")
+          );
+          const rightToIndex = rightDaysArray.findIndex(
+            (btn) => btn.classList.contains("selected-to")
+          );
+          leftDaysArray.forEach(
+            (btn) => btn.classList.remove("selected-range")
+          );
+          rightDaysArray.forEach(
+            (btn) => btn.classList.remove("selected-range")
+          );
+          if (leftFromIndex !== -1 && leftToIndex !== -1 && rightFromIndex === -1 && rightToIndex === -1) {
+            for (let i = leftFromIndex + 1; i <= leftToIndex - 1; i++) {
+              leftDaysArray[i].classList.add("selected-range");
+            }
+          }
+          if (leftFromIndex !== -1 && rightToIndex !== -1) {
+            for (let i = leftFromIndex + 1; i < leftDaysArray.length; i++) {
+              leftDaysArray[i].classList.add("selected-range");
+            }
+            for (let i = 0; i < rightToIndex; i++) {
+              rightDaysArray[i].classList.add("selected-range");
+            }
+          }
+          if (leftFromIndex === -1 && leftToIndex === -1 && rightFromIndex !== -1 && rightToIndex !== -1) {
+            for (let i = rightFromIndex + 1; i <= rightToIndex - 1; i++) {
+              rightDaysArray[i].classList.add("selected-range");
+            }
+          }
+        }
+      } else {
+        if (target.classList.contains(
+          `ina-ss-range-datepicker__calendar-day`
+        ) && !target.classList.contains("outside-month")) {
+          if (target.classList.contains("selected-from") && target.classList.contains("selected-to")) {
+            target.classList.remove("selected-from");
+            target.classList.remove("selected-to");
+            selectedDateTarget = null;
+          } else {
+            target.classList.add("selected-from");
+            target.classList.add("selected-to");
+            selectedDateTarget = target;
+          }
+          fromSelectedDate = selectedDateTarget ? new Date(selectedDateTarget.dataset.date) : null;
+          toSelectedDate = selectedDateTarget ? new Date(selectedDateTarget.dataset.date) : null;
+        }
+      }
+      rangeDatepicker.dispatchEvent(
+        new CustomEvent("date:changed", {
+          detail: {
+            selectedDate: {
+              from: fromSelectedDate,
+              to: toSelectedDate
+            }
+          }
+        })
+      );
+    }
+    datepickerLeftContent.addEventListener("click", (e) => {
+      const target = e.target;
+      if (!target) return;
+      handleChangeDate(target);
+    });
+    datepickerRightContent.addEventListener("click", (e) => {
+      const target = e.target;
+      if (!target) return;
+      handleChangeDate(target);
+    });
+    function togglePopover() {
+      if (rangeDatepickerPopover.style.display === "none" || rangeDatepickerPopover.style.display === "") {
+        rangeDatepickerPopover.style.display = "flex";
+        renderCalendar(
+          datePickerLeftDate,
+          currentDateLeft.getFullYear(),
+          currentDateLeft.getMonth()
+        );
+        renderCalendar(
+          datePickerRightDate,
+          currentDateRight.getFullYear(),
+          currentDateRight.getMonth()
+        );
+      } else {
+        rangeDatepickerPopover.style.display = "none";
+      }
+    }
+    function getMonthDifference(d1, d2) {
+      let months;
+      months = (d2.getFullYear() - d1.getFullYear()) * 12;
+      months -= d1.getMonth();
+      months += d2.getMonth();
+      return months;
+    }
+    rangeDatepickerTrigger.addEventListener("click", (e) => {
+      e.stopPropagation();
+      togglePopover();
+    });
+    prevMonthButtonLeft.addEventListener("click", () => {
+      currentDateLeft.setMonth(currentDateLeft.getMonth() - 1);
+      renderCalendar(
+        datePickerLeftDate,
+        currentDateLeft.getFullYear(),
+        currentDateLeft.getMonth()
+      );
+    });
+    nextMonthButtonLeft.addEventListener("click", () => {
+      const monthDiff = getMonthDifference(currentDateLeft, currentDateRight);
+      currentDateLeft.setMonth(currentDateLeft.getMonth() + 1);
+      renderCalendar(
+        datePickerLeftDate,
+        currentDateLeft.getFullYear(),
+        currentDateLeft.getMonth()
+      );
+      if (monthDiff === 1) {
+        currentDateRight.setMonth(currentDateRight.getMonth() + 1);
+        renderCalendar(
+          datePickerRightDate,
+          currentDateRight.getFullYear(),
+          currentDateRight.getMonth()
+        );
+      }
+    });
+    prevMonthButtonRight.addEventListener("click", () => {
+      const monthDiff = getMonthDifference(currentDateLeft, currentDateRight);
+      currentDateRight.setMonth(currentDateRight.getMonth() - 1);
+      renderCalendar(
+        datePickerRightDate,
+        currentDateRight.getFullYear(),
+        currentDateRight.getMonth()
+      );
+      if (monthDiff === 1) {
+        currentDateLeft.setMonth(currentDateRight.getMonth() - 1);
+        renderCalendar(
+          datePickerLeftDate,
+          currentDateLeft.getFullYear(),
+          currentDateLeft.getMonth()
+        );
+      }
+    });
+    nextMonthButtonRight.addEventListener("click", () => {
+      currentDateRight.setMonth(currentDateRight.getMonth() + 1);
+      renderCalendar(
+        datePickerRightDate,
+        currentDateRight.getFullYear(),
+        currentDateRight.getMonth()
+      );
+    });
+    document.addEventListener("click", (e) => {
+      if (!rangeDatepickerPopover.contains(e.target) && e.target !== rangeDatepickerTrigger && !rangeDatepickerTrigger.contains(e.target)) {
+        rangeDatepickerPopover.style.display = "none";
+      }
+    });
+  });
+}
+
+// src/js/components/stateless/img-compare.js
+function initImgCompare(rootSelector = `.${PREFIX}-img-compare`) {
+  document.querySelectorAll(rootSelector).forEach((imgCompare) => {
+    const sliderEl = document.createElement("input");
+    sliderEl.type = "range";
+    sliderEl.min = "0";
+    sliderEl.max = "100";
+    sliderEl.value = "50";
+    sliderEl.setAttribute("aria-label", "Percentage of the image to show");
+    sliderEl.setAttribute("aria-valuenow", "50");
+    sliderEl.setAttribute("aria-valuemin", "0");
+    sliderEl.setAttribute("aria-valuemax", "100");
+    sliderEl.classList.add("ina-ss-img__slider");
+    sliderEl.addEventListener("input", () => {
+      imgCompare.style.setProperty(
+        `--${PREFIX}-position`,
+        `${sliderEl.value}%`
+      );
+    });
+    const sliderLineEl = document.createElement("div");
+    sliderLineEl.classList.add("ina-ss-img__slider-line");
+    const sliderButtonEl = document.createElement("button");
+    sliderButtonEl.classList.add("ina-ss-img__slider-button");
+    imgCompare.appendChild(sliderEl);
+    imgCompare.appendChild(sliderLineEl);
+    imgCompare.appendChild(sliderButtonEl);
+  });
+}
+
+// src/js/bundle.js
+if (typeof window !== void 0) {
+  document.addEventListener("DOMContentLoaded", () => {
+    initAccordion();
+    initBanner();
+    initButtonGroup();
+    initDatepicker();
+    initDropdown();
+    initFileUploadBase();
+    initFileUploadItem();
+    initImgCompare();
+    initModal();
+    initRangeDatepicker();
+    initTab();
+    initToggle();
+  });
+}
+
+// src/js/index.js
+var PREFIX = "ina-ss";
+function initAll() {
+  initAccordion();
+  initBanner();
+  initButtonGroup();
+  initDatepicker();
+  initDropdown();
+  initFileUploadBase();
+  initFileUploadItem();
+  initImgCompare();
+  initModal();
+  initRangeDatepicker();
+  initTab();
+  initToggle();
+}
+export {
+  PREFIX,
+  initAll
+};