@idds/js 1.0.34

package/dist/index.iife.js

@@ -0,0 +1,1262 @@
+var InaUI = (() => {
+  var __defProp = Object.defineProperty;
+  var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+  var __getOwnPropNames = Object.getOwnPropertyNames;
+  var __hasOwnProp = Object.prototype.hasOwnProperty;
+  var __export = (target, all) => {
+    for (var name in all)
+      __defProp(target, name, { get: all[name], enumerable: true });
+  };
+  var __copyProps = (to, from, except, desc) => {
+    if (from && typeof from === "object" || typeof from === "function") {
+      for (let key of __getOwnPropNames(from))
+        if (!__hasOwnProp.call(to, key) && key !== except)
+          __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+    }
+    return to;
+  };
+  var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+  // src/js/bundle.js
+  var bundle_exports = {};
+  __export(bundle_exports, {
+    initAccordion: () => initAccordion,
+    initBanner: () => initBanner,
+    initButtonGroup: () => initButtonGroup,
+    initDatepicker: () => initDatepicker,
+    initDropdown: () => initDropdown,
+    initFileUploadBase: () => initFileUploadBase,
+    initFileUploadItem: () => initFileUploadItem,
+    initImgCompare: () => initImgCompare,
+    initModal: () => initModal,
+    initRangeDatepicker: () => initRangeDatepicker,
+    initTab: () => initTab,
+    initToggle: () => initToggle,
+    showToast: () => showToast
+  });
+
+  // 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/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/index.js
+  var PREFIX = "ina-ss";
+
+  // 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/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/toast.js
+  function showToast(message, variant = "default", duration = 3e3) {
+    const toastContainer = document.createElement("div");
+    toastContainer.className = "ina-ss-toast--container";
+    const toast = document.createElement("div");
+    toast.className = `ina-ss-toast ina-ss-toast--${variant}`;
+    const iconEl = document.createElement("div");
+    iconEl.className = "ina-ss-toast__icon";
+    toast.appendChild(iconEl);
+    const contentEl = document.createElement("span");
+    contentEl.textContent = message;
+    toast.appendChild(contentEl);
+    const closeEl = document.createElement("button");
+    closeEl.className = "ina-ss-toast__close";
+    toast.appendChild(closeEl);
+    closeEl.addEventListener("click", () => {
+      toast.classList.remove("show");
+      toast.addEventListener("transitionend", () => toast.remove());
+    });
+    toastContainer.appendChild(toast);
+    document.body.appendChild(toastContainer);
+    requestAnimationFrame(() => toast.classList.add("show"));
+    setTimeout(() => {
+      toast.classList.remove("show");
+      toast.addEventListener("transitionend", () => toast.remove());
+    }, duration);
+  }
+
+  // src/js/bundle.js
+  if (typeof window !== void 0) {
+    document.addEventListener("DOMContentLoaded", () => {
+      initAccordion();
+      initBanner();
+      initButtonGroup();
+      initDatepicker();
+      initDropdown();
+      initFileUploadBase();
+      initFileUploadItem();
+      initImgCompare();
+      initModal();
+      initRangeDatepicker();
+      initTab();
+      initToggle();
+    });
+  }
+  return __toCommonJS(bundle_exports);
+})();