@idds/js 1.2.4 → 1.6.0

package/dist/index.iife.js

@@ -21,19 +21,20 @@ var InaUI = (() => {
   var bundle_exports = {};
   __export(bundle_exports, {
     DatePicker: () => DatePicker,
+    PhoneInput: () => PhoneInput,
     Table: () => Table,
     TimePicker: () => TimePicker,
     initAccordion: () => initAccordion,
     initButtonGroup: () => initButtonGroup,
     initCheckbox: () => initCheckbox,
-    initChip: () => initChip,
+    initChip: () => initChip2,
     initDatepicker: () => initDatepicker,
     initDrawer: () => initDrawer,
     initDropdown: () => initDropdown,
     initFileUpload: () => initFileUpload,
     initFileUploadBase: () => initFileUploadBase,
     initFileUploadItem: () => initFileUploadItem,
-    initImgCompare: () => initImgCompare,
+    initImgCompare: () => initImgCompare2,
     initModal: () => initModal,
     initMonthPicker: () => initMonthPicker,
     initPagination: () => initPagination,
@@ -103,18 +104,18 @@ var InaUI = (() => {
       const tabItem = tab.querySelectorAll(`.${PREFIX}-tab-item`);
       tabItem.forEach((tabButton) => {
         function updateState() {
-          const index2 = Array.from(tabItem).indexOf(tabButton);
+          const index = Array.from(tabItem).indexOf(tabButton);
           tabItem.forEach((tabButton2, i) => {
             tabButton2.classList.remove("active");
             tabButton2.setAttribute("aria-selected", "false");
-            if (i === index2) {
+            if (i === index) {
               tabButton2.classList.add("active");
               tabButton2.setAttribute("aria-selected", "true");
             }
           });
           tab.dispatchEvent(
             new CustomEvent("tab:change", {
-              detail: { activeIndex: index2 },
+              detail: { activeIndex: index },
               bubbles: true,
               composed: true
             })
@@ -209,28 +210,28 @@ var InaUI = (() => {
       this.element.__inaAccordionGroup = this;
     }
     registerItem(item) {
-      const index2 = this.items.size;
-      this.items.set(item.id, index2);
+      const index = this.items.size;
+      this.items.set(item.id, index);
       this.itemsArray.push(item);
       if (item.defaultOpen) {
         if (this.isMultiple) {
-          if (!this.openIndexes.includes(index2)) {
-            this.openIndexes.push(index2);
+          if (!this.openIndexes.includes(index)) {
+            this.openIndexes.push(index);
           }
         } else {
           if (this.openIndexes.length === 0) {
-            this.openIndexes.push(index2);
+            this.openIndexes.push(index);
           }
         }
       }
-      return index2;
+      return index;
     }
     unregisterItem(item) {
-      const index2 = this.items.get(item.id);
-      if (index2 !== void 0) {
+      const index = this.items.get(item.id);
+      if (index !== void 0) {
         this.items.delete(item.id);
         this.itemsArray = this.itemsArray.filter((i) => i !== item);
-        this.openIndexes = this.openIndexes.filter((idx) => idx !== index2).map((idx) => idx > index2 ? idx - 1 : idx);
+        this.openIndexes = this.openIndexes.filter((idx) => idx !== index).map((idx) => idx > index ? idx - 1 : idx);
         const newMap = /* @__PURE__ */ new Map();
         this.itemsArray.forEach((itm, newIdx) => {
           newMap.set(itm.id, newIdx);
@@ -238,22 +239,22 @@ var InaUI = (() => {
         this.items = newMap;
       }
     }
-    handleItemToggle(index2, isOpen) {
+    handleItemToggle(index, isOpen) {
       const prevIndexes = [...this.openIndexes];
       let nextIndexes = [];
       if (this.isMultiple) {
         if (isOpen) {
-          if (!prevIndexes.includes(index2)) {
-            nextIndexes = [...prevIndexes, index2];
+          if (!prevIndexes.includes(index)) {
+            nextIndexes = [...prevIndexes, index];
           } else {
             nextIndexes = prevIndexes;
           }
         } else {
-          nextIndexes = prevIndexes.filter((idx) => idx !== index2);
+          nextIndexes = prevIndexes.filter((idx) => idx !== index);
         }
       } else {
         if (isOpen) {
-          nextIndexes = [index2];
+          nextIndexes = [index];
         } else {
           nextIndexes = [];
         }
@@ -261,16 +262,16 @@ var InaUI = (() => {
       this.openIndexes = nextIndexes;
       this.notifyItems();
     }
-    isItemOpen(index2) {
-      return this.openIndexes.includes(index2);
+    isItemOpen(index) {
+      return this.openIndexes.includes(index);
     }
     getItemIndex(itemId) {
       return this.items.get(itemId);
     }
     // Notify all children to update their visual state based on new openIndexes
     notifyItems() {
-      this.itemsArray.forEach((item, index2) => {
-        const isOpen = this.openIndexes.includes(index2);
+      this.itemsArray.forEach((item, index) => {
+        const isOpen = this.openIndexes.includes(index);
         item.setOpenState(isOpen);
       });
     }
@@ -379,7 +380,7 @@ var InaUI = (() => {
 
   // src/js/components/stateful/date-picker.js
   var DatePicker = class {
-    constructor(selectorOrElement, options2 = {}) {
+    constructor(selectorOrElement, options = {}) {
       this.container = typeof selectorOrElement === "string" ? document.querySelector(selectorOrElement) : selectorOrElement;
       if (!this.container) {
         console.warn("[IDDS DatePicker] Container not found:", selectorOrElement);
@@ -405,7 +406,11 @@ var InaUI = (() => {
         onChange: null,
         triggerWidth: "",
         panelMaxHeight: "",
-        ...options2
+        allowClear: true,
+        // Added allowClear option
+        className: "",
+        // Added className option
+        ...options
       };
       this.state = {
         viewDate: /* @__PURE__ */ new Date(),
@@ -559,6 +564,18 @@ var InaUI = (() => {
       }
       this.renderPanel();
     }
+    getFullDayName(shortName) {
+      const map = {
+        Min: "Minggu",
+        Sen: "Senin",
+        Sel: "Selasa",
+        Rab: "Rabu",
+        Kam: "Kamis",
+        Jum: "Jumat",
+        Sab: "Sabtu"
+      };
+      return map[shortName] || shortName;
+    }
     initDOM() {
       if (!this.container.classList.contains(`${PREFIX}-date-picker`)) {
         this.container.classList.add(`${PREFIX}-date-picker`);
@@ -574,6 +591,9 @@ var InaUI = (() => {
         if (this.options.triggerWidth) {
           trigger.style.width = typeof this.options.triggerWidth === "number" ? `${this.options.triggerWidth}px` : this.options.triggerWidth;
         }
+        trigger.setAttribute("aria-haspopup", "dialog");
+        trigger.setAttribute("aria-expanded", "false");
+        trigger.setAttribute("aria-label", "Pilih Tanggal");
         const textWrapper = document.createElement("span");
         textWrapper.className = `${PREFIX}-date-picker__trigger-text ${PREFIX}-date-picker__trigger-text--placeholder`;
         textWrapper.textContent = "Pilih Tanggal";
@@ -583,6 +603,26 @@ var InaUI = (() => {
         trigger.appendChild(textWrapper);
         trigger.appendChild(iconWrapper);
         this.container.appendChild(trigger);
+      } else if (trigger) {
+        if (!trigger.hasAttribute("aria-haspopup"))
+          trigger.setAttribute("aria-haspopup", "dialog");
+        if (!trigger.hasAttribute("aria-expanded"))
+          trigger.setAttribute("aria-expanded", "false");
+        if (!trigger.hasAttribute("aria-label"))
+          trigger.setAttribute("aria-label", "Pilih Tanggal");
+      }
+      if (this.options.allowClear && !this.options.panelOnly) {
+        let clearBtn = this.container.querySelector(`.${PREFIX}-date-picker__clear-button`);
+        if (!clearBtn) {
+          clearBtn = document.createElement("button");
+          clearBtn.type = "button";
+          clearBtn.className = `${PREFIX}-date-picker__clear-button`;
+          clearBtn.setAttribute("aria-label", "Hapus tanggal terpilih");
+          clearBtn.innerHTML = this.createIcon("x");
+          clearBtn.style.display = "none";
+          this.container.appendChild(clearBtn);
+        }
+        this.elements.clearBtn = clearBtn;
       }
       this.elements.trigger = trigger;
       if (trigger) {
@@ -877,10 +917,13 @@ var InaUI = (() => {
       header.appendChild(nextBtn);
       const grid = document.createElement("div");
       grid.className = `${PREFIX}-date-picker__calendar-grid`;
+      grid.setAttribute("role", "grid");
       this.DAYS_SHORT.forEach((d) => {
         const dh = document.createElement("div");
         dh.className = `${PREFIX}-date-picker__day-header`;
         dh.textContent = d;
+        dh.setAttribute("role", "columnheader");
+        dh.setAttribute("aria-label", this.getFullDayName(d));
         grid.appendChild(dh);
       });
       const firstDayOfMonth = new Date(year, month, 1).getDay();
@@ -1025,6 +1068,7 @@ var InaUI = (() => {
       this.state.isOpen = true;
       this.elements.panel.classList.add(`${PREFIX}-date-picker__panel--open`);
       this.elements.panel.style.display = "block";
+      if (this.elements.trigger) this.elements.trigger.setAttribute("aria-expanded", "true");
       this.renderPanel();
     }
     close() {
@@ -1032,6 +1076,7 @@ var InaUI = (() => {
       this.state.isOpen = false;
       this.elements.panel.classList.remove(`${PREFIX}-date-picker__panel--open`);
       this.elements.panel.style.display = "none";
+      if (this.elements.trigger) this.elements.trigger.setAttribute("aria-expanded", "false");
     }
     toggle() {
       if (this.state.isOpen) this.close();
@@ -1076,11 +1121,11 @@ var InaUI = (() => {
       return this.state.rangeDate;
     }
   };
-  function initDatepicker(selectorOrElement, options2 = {}) {
+  function initDatepicker(selectorOrElement, options = {}) {
     const elements = typeof selectorOrElement === "string" ? document.querySelectorAll(selectorOrElement) : selectorOrElement ? typeof selectorOrElement.length !== "undefined" ? selectorOrElement : [selectorOrElement] : document.querySelectorAll(`.${PREFIX}-date-picker`);
     const instances = [];
     elements.forEach((container) => {
-      const instance = new DatePicker(container, options2);
+      const instance = new DatePicker(container, options);
       container.__datepickerAPI = instance;
       instances.push(instance);
     });
@@ -1090,7 +1135,7 @@ var InaUI = (() => {
 
   // src/js/components/stateful/time-picker.js
   var TimePicker = class {
-    constructor(selectorOrElement, options2 = {}) {
+    constructor(selectorOrElement, options = {}) {
       this.container = typeof selectorOrElement === "string" ? document.querySelector(selectorOrElement) : selectorOrElement;
       if (!this.container) {
         console.warn("[IDDS TimePicker] Container not found:", selectorOrElement);
@@ -1123,7 +1168,7 @@ var InaUI = (() => {
         secondStep: 1,
         onChange: null,
         size: this.container.dataset.size || "md",
-        ...options2
+        ...options
       };
       this.state = {
         isOpen: false,
@@ -1131,6 +1176,7 @@ var InaUI = (() => {
         internalValue: ""
       };
       this.elements = {};
+      this.inputId = this.container.id || `time-picker-${Math.random().toString(36).substr(2, 9)}`;
       this.initDOM();
       this.bindEvents();
       if (this.elements.input && this.elements.input.value) {
@@ -1238,12 +1284,16 @@ var InaUI = (() => {
       if (!wrapper) {
         wrapper = document.createElement("div");
         wrapper.className = `${PREFIX}-time-picker__wrapper`;
+        wrapper.setAttribute("role", "combobox");
+        wrapper.setAttribute("aria-haspopup", "listbox");
+        wrapper.setAttribute("aria-expanded", "false");
         const prefixIcon = document.createElement("div");
         prefixIcon.className = `${PREFIX}-time-picker__prefix-icon`;
         prefixIcon.innerHTML = this.createIcon("clock");
         wrapper.appendChild(prefixIcon);
         input = document.createElement("input");
         input.type = "text";
+        input.id = this.inputId;
         input.className = `${PREFIX}-time-picker__input ${PREFIX}-time-picker__input--size-${this.options.size} ${PREFIX}-time-picker__input--with-prefix`;
         if (this.options.allowClear)
           input.classList.add(`${PREFIX}-time-picker__input--with-suffix`);
@@ -1253,13 +1303,23 @@ var InaUI = (() => {
         else input.readOnly = true;
         wrapper.appendChild(input);
         if (this.options.allowClear) {
-          clearBtn = document.createElement("div");
+          clearBtn = document.createElement("button");
+          clearBtn.type = "button";
           clearBtn.className = `${PREFIX}-time-picker__clear-button`;
+          clearBtn.setAttribute("aria-label", "Hapus waktu");
           clearBtn.innerHTML = this.createIcon("x");
           clearBtn.style.display = "none";
           wrapper.appendChild(clearBtn);
         }
         this.container.appendChild(wrapper);
+      } else {
+        wrapper.setAttribute("role", "combobox");
+        wrapper.setAttribute("aria-haspopup", "listbox");
+        wrapper.setAttribute("aria-expanded", "false");
+        if (input && !input.id) input.id = this.inputId;
+        if (clearBtn && !clearBtn.hasAttribute("aria-label")) {
+          clearBtn.setAttribute("aria-label", "Hapus waktu");
+        }
       }
       this.elements.wrapper = wrapper;
       this.elements.input = input;
@@ -1340,24 +1400,24 @@ var InaUI = (() => {
       }
     }
     generateOptions(type) {
-      const options2 = [];
+      const options = [];
       const { use12Hours, hourStep, minuteStep, secondStep } = this.options;
       let limit = type === "hour" ? use12Hours ? 12 : 24 : 60;
       let step = type === "hour" ? hourStep : type === "minute" ? minuteStep : secondStep;
       if (limit === 12) {
         for (let i = type === "hour" ? 1 : 0; i <= (type === "hour" ? 12 : 59); i += step) {
-          options2.push(i);
+          options.push(i);
         }
       } else if (limit === 24) {
         for (let i = 0; i <= 23; i += step) {
-          options2.push(i);
+          options.push(i);
         }
       } else {
         for (let i = 0; i <= 59; i += step) {
-          options2.push(i);
+          options.push(i);
         }
       }
-      return options2;
+      return options;
     }
     renderColumn(type, optionsArr) {
       const column = document.createElement("div");
@@ -1367,7 +1427,7 @@ var InaUI = (() => {
       column.appendChild(colContent);
       const { use12Hours } = this.options;
       const { currentTime } = this.state;
-      optionsArr.forEach((optValue) => {
+      optionsArr.forEach((optValue, index) => {
         const option = document.createElement("div");
         option.className = `${PREFIX}-time-picker__option`;
         let isSelected = false;
@@ -1413,9 +1473,9 @@ var InaUI = (() => {
           option.classList.add(`${PREFIX}-time-picker__option--disabled`);
         option.setAttribute("role", "option");
         option.setAttribute("aria-selected", isSelected.toString());
-        const isFirstFocusable = index === 0 && !options.some((opt) => {
+        const isFirstFocusable = index === 0 && !optionsArr.some((opt) => {
           if (type === "hour") {
-            return use12Hours ? (currentTime.hours === 0 ? 12 : currentTime.hours) === opt : currentTime.hours === opt;
+            return (use12Hours && currentTime.hours === 0 ? 12 : currentTime.hours) === opt;
           } else if (type === "minute") {
             return currentTime.minutes === opt;
           } else if (type === "second") {
@@ -1533,6 +1593,7 @@ var InaUI = (() => {
       this.state.isOpen = true;
       this.container.classList.add(`${PREFIX}-time-picker--open`);
       this.elements.panel.style.display = "block";
+      this.elements.wrapper.setAttribute("aria-expanded", "true");
       this.state.currentTime = this.parseTime(this.elements.input.value);
       this.buildPanel();
       document.dispatchEvent(
@@ -1545,6 +1606,7 @@ var InaUI = (() => {
       this.state.isOpen = false;
       this.container.classList.remove(`${PREFIX}-time-picker--open`);
       this.elements.panel.style.display = "none";
+      this.elements.wrapper.setAttribute("aria-expanded", "false");
     }
     toggle() {
       if (this.state.isOpen) this.close();
@@ -1555,16 +1617,9 @@ var InaUI = (() => {
         e.stopPropagation();
         this.toggle();
       });
-      if (this.elements.clearBtn && this.options.allowClear) {
+      if (this.elements.clearBtn) {
         this.elements.clearBtn.addEventListener("click", (e) => {
           e.stopPropagation();
-          this.elements.input.value = "";
-          this.state.currentTime = {
-            hours: 0,
-            minutes: 0,
-            seconds: 0,
-            period: "AM"
-          };
           this.container.dataset.value = "";
           this.state.internalValue = "";
           this.elements.clearBtn.style.display = "none";
@@ -1588,11 +1643,11 @@ var InaUI = (() => {
       return this.state.internalValue;
     }
   };
-  function initTimepicker(selectorOrElement, options2 = {}) {
+  function initTimepicker(selectorOrElement, options = {}) {
     const elements = typeof selectorOrElement === "string" ? document.querySelectorAll(selectorOrElement) : selectorOrElement ? typeof selectorOrElement.length !== "undefined" ? selectorOrElement : [selectorOrElement] : document.querySelectorAll(`.${PREFIX}-time-picker`);
     const instances = [];
     elements.forEach((container) => {
-      const instance = new TimePicker(container, options2);
+      const instance = new TimePicker(container, options);
       container.__timepickerAPI = instance;
       instances.push(instance);
     });
@@ -1635,6 +1690,17 @@ var InaUI = (() => {
     modalEl.style.display = "flex";
     document.body.style.overflow = "hidden";
     modalEl.setAttribute("aria-hidden", "false");
+    modalEl.setAttribute("tabindex", "-1");
+    if (!modalEl.hasAttribute("role")) {
+      modalEl.setAttribute("role", "dialog");
+    }
+    if (!modalEl.hasAttribute("aria-modal")) {
+      modalEl.setAttribute("aria-modal", "true");
+    }
+    const closeBtn = modalEl.querySelector(`.${PREFIX}-modal__close-button`);
+    if (closeBtn && !closeBtn.hasAttribute("aria-label")) {
+      closeBtn.setAttribute("aria-label", "Tutup dialog");
+    }
     modalEl.classList.remove(
       `${PREFIX}-modal--exit`,
       `${PREFIX}-modal--exit-active`
@@ -1733,6 +1799,19 @@ var InaUI = (() => {
       if (!drawer) return;
       drawer.style.display = "flex";
       document.body.style.overflow = "hidden";
+      drawer.setAttribute("aria-hidden", "false");
+      drawer.setAttribute("tabindex", "-1");
+      if (!drawer.hasAttribute("role")) {
+        drawer.setAttribute("role", "complementary");
+      }
+      if (!drawer.hasAttribute("aria-modal")) {
+        drawer.setAttribute("aria-modal", "true");
+      }
+      const panel = drawer.querySelector(`.${PREFIX2}-drawer__panel`) || drawer.querySelector(`.${PREFIX2}-drawer__content`) || drawer;
+      const closeBtn = panel.querySelector(`.${PREFIX2}-drawer__close-button`);
+      if (closeBtn && !closeBtn.hasAttribute("aria-label")) {
+        closeBtn.setAttribute("aria-label", "Tutup panel");
+      }
       drawer.offsetHeight;
       drawer.classList.add(`${PREFIX2}-drawer--open`);
       drawer.dispatchEvent(new CustomEvent("drawer:open"));
@@ -1805,9 +1884,20 @@ var InaUI = (() => {
     if (newState.isOpen !== void 0) {
       root.setAttribute("data-state", newState.isOpen ? "open" : "closed");
       const trigger = root.querySelector(`.${PREFIX3}-select-dropdown__trigger`);
-      if (trigger) trigger.setAttribute("aria-expanded", newState.isOpen);
+      if (trigger) {
+        trigger.setAttribute("aria-expanded", newState.isOpen);
+        if (!trigger.hasAttribute("aria-haspopup")) {
+          trigger.setAttribute("aria-haspopup", "listbox");
+        }
+      }
       const panel = root.querySelector(`.${PREFIX3}-select-dropdown__panel`);
       if (panel) {
+        if (!panel.hasAttribute("role")) {
+          panel.setAttribute("role", "listbox");
+        }
+        if (newState.isMultiple) {
+          panel.setAttribute("aria-multiselectable", "true");
+        }
         if (newState.isOpen) {
           panel.style.removeProperty("display");
         } else {
@@ -1834,9 +1924,9 @@ var InaUI = (() => {
       `.${PREFIX3}-select-dropdown__trigger-text`
     );
     const placeholder = input ? input.getAttribute("placeholder") : textSpan ? textSpan.getAttribute("data-placeholder") : "Select...";
-    const options2 = root.querySelectorAll(`.${PREFIX3}-select-dropdown__option`);
+    const options = root.querySelectorAll(`.${PREFIX3}-select-dropdown__option`);
     const getLabel = (val) => {
-      const opt = Array.from(options2).find(
+      const opt = Array.from(options).find(
         (o) => o.getAttribute("data-value") === val
       );
       return opt ? opt.textContent.trim() : val;
@@ -1862,7 +1952,7 @@ var InaUI = (() => {
         values.length === 0
       );
     }
-    options2.forEach((opt) => {
+    options.forEach((opt) => {
       const val = opt.getAttribute("data-value");
       const isSelected = values.includes(val);
       if (isMultiple) {
@@ -1884,6 +1974,10 @@ var InaUI = (() => {
           isSelected
         );
       }
+      if (!opt.hasAttribute("role")) {
+        opt.setAttribute("role", "option");
+      }
+      opt.setAttribute("aria-selected", isSelected);
     });
   }
   function initSelectDropdown() {
@@ -1942,13 +2036,13 @@ var InaUI = (() => {
         const root = e.target.closest(`.${PREFIX3}-select-dropdown`);
         if (root) {
           const term = e.target.value.toLowerCase();
-          const options2 = root.querySelectorAll(
+          const options = root.querySelectorAll(
             `.${PREFIX3}-select-dropdown__option`
           );
           if (root.getAttribute("data-state") !== "open") {
             setDropdownState(root, { isOpen: true });
           }
-          options2.forEach((opt) => {
+          options.forEach((opt) => {
             const text = opt.textContent.trim().toLowerCase();
             opt.style.display = text.includes(term) ? "" : "none";
           });
@@ -2022,20 +2116,20 @@ var InaUI = (() => {
     `;
       const updateUI = () => {
         stepper.dataset.currentStep = currentStep;
-        items.forEach((item, index2) => {
+        items.forEach((item, index) => {
           const iconWrapper = item.querySelector(
             `.${PREFIX}-stepper__icon-wrapper`
           );
-          const itemNumber = index2 + 1;
+          const itemNumber = index + 1;
           item.classList.remove(
             `${PREFIX}-stepper__item--completed`,
             `${PREFIX}-stepper__item--active`
           );
           if (iconWrapper) iconWrapper.innerHTML = "";
-          if (index2 < currentStep) {
+          if (index < currentStep) {
             item.classList.add(`${PREFIX}-stepper__item--completed`);
             if (iconWrapper) iconWrapper.innerHTML = checkIcon;
-          } else if (index2 === currentStep) {
+          } else if (index === currentStep) {
             item.classList.add(`${PREFIX}-stepper__item--active`);
             if (iconWrapper)
               iconWrapper.innerHTML = `<span class="${PREFIX}-stepper__step-number">${itemNumber}</span>`;
@@ -2044,8 +2138,8 @@ var InaUI = (() => {
               iconWrapper.innerHTML = `<span class="${PREFIX}-stepper__step-number">${itemNumber}</span>`;
           }
         });
-        separators.forEach((separator, index2) => {
-          if (index2 < currentStep) {
+        separators.forEach((separator, index) => {
+          if (index < currentStep) {
             separator.classList.add(`${PREFIX}-stepper__separator--completed`);
           } else {
             separator.classList.remove(`${PREFIX}-stepper__separator--completed`);
@@ -2091,11 +2185,11 @@ var InaUI = (() => {
           }
         });
       });
-      items.forEach((item, index2) => {
+      items.forEach((item, index) => {
         if (item.classList.contains(`${PREFIX}-stepper__item--clickable`) || item.hasAttribute("data-clickable")) {
           item.addEventListener("click", () => {
             if (!item.classList.contains(`${PREFIX}-stepper__item--disabled`)) {
-              currentStep = index2;
+              currentStep = index;
               updateUI();
             }
           });
@@ -2169,7 +2263,7 @@ var InaUI = (() => {
         } else {
           filesContainer.style.display = "none";
         }
-        uploadedFiles.forEach((f, index2) => {
+        uploadedFiles.forEach((f, index) => {
           const fileEl = document.createElement("div");
           fileEl.className = `${PREFIX}-file-upload__file`;
           let statusClass = "";
@@ -2993,342 +3087,67 @@ var InaUI = (() => {
     });
   }
 
-  // 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/components/stateful/chip.js
-  var PREFIX4 = "ina";
-  function initChip(rootSelector = `.${PREFIX4}-chip`) {
-    const chips = document.querySelectorAll(rootSelector);
-    chips.forEach((container) => {
-      if (container.__inaChipInitialized) return;
-      const showCustomization = container.getAttribute("data-show-customization") === "true";
-      const customizationLabel = container.getAttribute("data-customization-label") || "Kustomisasi";
-      const isMultiple = container.getAttribute("data-multiple") === "true";
-      let selectedValue = container.getAttribute("data-selected") || "";
-      const list = container.querySelector(`.${PREFIX4}-chip__list`);
-      const items = list ? list.querySelectorAll(`.${PREFIX4}-chip__item`) : [];
-      let customFieldContainer = container.querySelector(
-        `.${PREFIX4}-chip__custom-field`
+  // src/js/components/stateful/pagination.js
+  function initPagination() {
+    document.querySelectorAll(`.${PREFIX}-pagination`).forEach((container) => {
+      if (container.dataset.initialized === "true") return;
+      container.dataset.initialized = "true";
+      const navButtonsContainer = container.querySelector(
+        `.${PREFIX}-pagination__nav-buttons`
       );
-      const getNormalizedSelected = () => {
-        if (!selectedValue) return [];
-        return isMultiple ? selectedValue.split(",").map((s) => s.trim()).filter(Boolean) : [selectedValue];
-      };
+      const pageInfo = container.querySelector(
+        `.${PREFIX}-pagination__page-info`
+      );
+      const firstBtn = container.querySelector('[data-action="first"]');
+      const prevBtn = container.querySelector('[data-action="prev"]');
+      const nextBtn = container.querySelector('[data-action="next"]');
+      const lastBtn = container.querySelector('[data-action="last"]');
+      const pageSizeSelect = container.querySelector('[data-role="page-size"]');
+      if (!navButtonsContainer || !pageInfo) return;
+      let currentPage = parseInt(container.dataset.current || "1", 10);
+      let totalPages = parseInt(container.dataset.total || "10", 10);
+      let pageSize = parseInt(container.dataset.pageSize || "10", 10);
+      let isDisabled = container.dataset.disabled === "true";
+      let pageButtons = [];
       const updateUI = () => {
-        const normSelected = getNormalizedSelected();
-        const getInitialFocusIndex = () => {
-          if (normSelected.length > 0) {
-            const standardValues = Array.from(items).filter((item) => item.textContent.trim() !== customizationLabel).map((item) => item.getAttribute("data-value"));
-            const hasCustomVal = normSelected.some(
-              (val) => !standardValues.includes(val) && val !== ""
-            );
-            if (hasCustomVal && showCustomization) {
-              return items.length - 1;
-            }
-            const firstSelectedIndex = Array.from(items).findIndex(
-              (opt) => normSelected.includes(opt.getAttribute("data-value"))
-            );
-            if (firstSelectedIndex !== -1) return firstSelectedIndex;
-          }
-          return 0;
-        };
-        const focusedIndex = getInitialFocusIndex();
-        items.forEach((item, index2) => {
-          const itemValue = item.getAttribute("data-value");
-          const isSelected = normSelected.includes(itemValue) || showCustomization && item.textContent.trim() === customizationLabel && normSelected.some(
-            (val) => !Array.from(items).filter((i) => i.textContent.trim() !== customizationLabel).map((i) => i.getAttribute("data-value")).includes(val) && val !== ""
-          );
-          const isDisabled = item.hasAttribute("disabled");
-          if (isSelected) {
-            item.classList.add(`${PREFIX4}-chip__item--selected`);
-          } else {
-            item.classList.remove(`${PREFIX4}-chip__item--selected`);
-          }
-          if (isDisabled) {
-            item.classList.add(`${PREFIX4}-chip__item--disabled`);
-          }
-          item.setAttribute(
-            "tabindex",
-            index2 === focusedIndex && !isDisabled ? "0" : "-1"
+        pageInfo.textContent = `Halaman ${currentPage} dari ${totalPages}`;
+        const isFirst = currentPage === 1;
+        if (firstBtn) {
+          const disabled = isDisabled || isFirst;
+          firstBtn.disabled = disabled;
+          firstBtn.classList.toggle(
+            `${PREFIX}-pagination__nav-button--disabled`,
+            disabled
           );
-        });
-        if (showCustomization) {
-          const isToggleBtn2 = (i) => i.hasAttribute("data-customization-toggle") || i.textContent.trim() === customizationLabel;
-          const standardValues = Array.from(items).filter((item) => !isToggleBtn2(item)).map((item) => item.getAttribute("data-value"));
-          const customValues = normSelected.filter(
-            (val) => !standardValues.includes(val) && val !== ""
+          firstBtn.classList.toggle(
+            `${PREFIX}-pagination__nav-button--enabled`,
+            !disabled
           );
-          const isStandard = customValues.length === 0;
-          const primaryCustomValue = customValues[customValues.length - 1] || "";
-          const toggleBtn = Array.from(items).find(isToggleBtn2);
-          const showInput = toggleBtn && normSelected.includes(toggleBtn.getAttribute("data-value")) || !isStandard && normSelected.length > 0;
-          if (showInput) {
-            if (!customFieldContainer) {
-              customFieldContainer = document.createElement("div");
-              customFieldContainer.className = `${PREFIX4}-chip__custom-field`;
-              container.appendChild(customFieldContainer);
-            }
-            let input = customFieldContainer.querySelector(
-              `.${PREFIX4}-chip__input`
-            );
-            if (!input) {
-              customFieldContainer.innerHTML = `
-               <div class="${PREFIX4}-chip__input-wrapper">
-                 <input type="text" class="${PREFIX4}-chip__input" placeholder="Masukkan data yang Anda inginkan" value="${!isStandard ? primaryCustomValue : ""}" />
-                 <button type="button" class="${PREFIX4}-chip__clear-button" aria-label="Clear input" style="display: ${!isStandard && primaryCustomValue ? "inline-flex" : "none"};">
-                   <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="${PREFIX4}-chip__clear-icon">
-                     <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
-                     <path d="M18 6l-12 12"></path>
-                     <path d="M6 6l12 12"></path>
-                   </svg>
-                 </button>
-               </div>
-             `;
-              input = customFieldContainer.querySelector("input");
-              const clearBtn = customFieldContainer.querySelector(
-                ".ina-chip__clear-button"
-              );
-              input.addEventListener("input", (e) => {
-                clearBtn.style.display = e.target.value ? "inline-flex" : "none";
-              });
-              clearBtn.addEventListener("click", () => {
-                input.value = "";
-                clearBtn.style.display = "none";
-                commitCustomValue(input);
-              });
-              input.addEventListener("blur", (e) => {
-                commitCustomValue(e.target);
-              });
-              input.addEventListener("keydown", (e) => {
-                if (e.key === "Enter") {
-                  commitCustomValue(e.target);
-                  e.target.blur();
-                }
-              });
-            } else {
-              const inputEl = customFieldContainer.querySelector("input");
-              if (inputEl && document.activeElement !== inputEl) {
-                inputEl.value = !isStandard ? primaryCustomValue : "";
-              }
-            }
-            customFieldContainer.style.display = "block";
-          } else {
-            if (customFieldContainer) {
-              customFieldContainer.style.display = "none";
-            }
-          }
         }
-      };
-      const handleSelect = (val) => {
-        if (!val) return;
-        let finalVal = val;
-        if (isMultiple) {
-          const normSelected = getNormalizedSelected();
-          let newSelected;
-          if (normSelected.includes(val)) {
-            newSelected = normSelected.filter((v) => v !== val);
-          } else {
-            newSelected = [...normSelected, val];
-          }
-          finalVal = newSelected;
-          selectedValue = newSelected.join(",");
-        } else {
-          const normSelected = getNormalizedSelected();
-          if (normSelected.includes(val)) {
-            selectedValue = "";
-            finalVal = "";
-          } else {
-            selectedValue = val;
-          }
+        if (prevBtn) {
+          const disabled = isDisabled || isFirst;
+          prevBtn.disabled = disabled;
+          prevBtn.classList.toggle(
+            `${PREFIX}-pagination__nav-button--disabled`,
+            disabled
+          );
+          prevBtn.classList.toggle(
+            `${PREFIX}-pagination__nav-button--enabled`,
+            !disabled
+          );
         }
-        container.setAttribute("data-selected", selectedValue);
-        updateUI();
-        container.dispatchEvent(
-          new CustomEvent("chip:select", {
-            detail: { value: finalVal },
-            bubbles: true
-          })
-        );
-      };
-      let currentFocusedIndex = -1;
-      const setItemFocus = (index2) => {
-        items.forEach((item, i) => {
-          item.setAttribute("tabindex", i === index2 ? "0" : "-1");
-        });
-        if (items[index2]) {
-          items[index2].focus();
-          currentFocusedIndex = index2;
-        }
-      };
-      const commitCustomValue = (inputEl) => {
-        const finalValue = inputEl.value.trim();
-        let normSelected = getNormalizedSelected();
-        const toggleBtn = Array.from(items).find(isToggleBtn);
-        const toggleVal = toggleBtn ? toggleBtn.getAttribute("data-value") : null;
-        const standardValues = Array.from(items).filter((i) => !isToggleBtn(i)).map((i) => i.getAttribute("data-value"));
-        const customValues = normSelected.filter(
-          (val) => !standardValues.includes(val) && val !== "" && val !== toggleVal
-        );
-        const primaryCustomValue = customValues[customValues.length - 1];
-        if (primaryCustomValue) {
-          normSelected = normSelected.filter((v) => v !== primaryCustomValue);
-        }
-        if (finalValue !== "") {
-          if (!normSelected.includes(finalValue)) {
-            normSelected.push(finalValue);
-          }
-        } else {
-          if (toggleVal) {
-            normSelected = normSelected.filter((v) => v !== toggleVal);
-          }
-        }
-        if (isMultiple) {
-          selectedValue = normSelected.join(",");
-        } else {
-          selectedValue = finalValue;
-        }
-        updateUI();
-        const changeEvent = new CustomEvent(`${PREFIX4}-chip:change`, {
-          detail: { value: isMultiple ? getNormalizedSelected() : selectedValue },
-          bubbles: true
-        });
-        container.dispatchEvent(changeEvent);
-      };
-      items.forEach((item, index2) => {
-        item.addEventListener("click", (e) => {
-          if (item.hasAttribute("disabled")) return;
-          currentFocusedIndex = index2;
-          const val = item.getAttribute("data-value");
-          if (showCustomization && isToggleBtn(item)) {
-            const normSelected = getNormalizedSelected();
-            const standardValues = Array.from(items).filter((i) => !isToggleBtn(i)).map((i) => i.getAttribute("data-value"));
-            const customValues = normSelected.filter(
-              (v) => !standardValues.includes(v) && v !== "" && v !== val
-            );
-            const isInputVisible = normSelected.includes(val) || customValues.length > 0;
-            if (!isInputVisible) {
-              handleSelect(val);
-            }
-          } else {
-            handleSelect(val);
-          }
-        });
-        item.addEventListener("keydown", (e) => {
-          if (item.hasAttribute("disabled")) return;
-          if (e.key === "ArrowRight" || e.key === "ArrowDown") {
-            e.preventDefault();
-            let nextIndex = (index2 + 1) % items.length;
-            while (items[nextIndex].hasAttribute("disabled") && nextIndex !== index2) {
-              nextIndex = (nextIndex + 1) % items.length;
-            }
-            setItemFocus(nextIndex);
-          } else if (e.key === "ArrowLeft" || e.key === "ArrowUp") {
-            e.preventDefault();
-            let prevIndex = (index2 - 1 + items.length) % items.length;
-            while (items[prevIndex].hasAttribute("disabled") && prevIndex !== index2) {
-              prevIndex = (prevIndex - 1 + items.length) % items.length;
-            }
-            setItemFocus(prevIndex);
-          }
-          if (e.key === " " || e.key === "Enter") {
-            e.preventDefault();
-            item.click();
-          }
-        });
-      });
-      updateUI();
-      container.__inaChipInitialized = true;
-    });
-  }
-
-  // src/js/components/stateful/pagination.js
-  function initPagination() {
-    document.querySelectorAll(`.${PREFIX}-pagination`).forEach((container) => {
-      if (container.dataset.initialized === "true") return;
-      container.dataset.initialized = "true";
-      const navButtonsContainer = container.querySelector(
-        `.${PREFIX}-pagination__nav-buttons`
-      );
-      const pageInfo = container.querySelector(
-        `.${PREFIX}-pagination__page-info`
-      );
-      const firstBtn = container.querySelector('[data-action="first"]');
-      const prevBtn = container.querySelector('[data-action="prev"]');
-      const nextBtn = container.querySelector('[data-action="next"]');
-      const lastBtn = container.querySelector('[data-action="last"]');
-      const pageSizeSelect = container.querySelector('[data-role="page-size"]');
-      if (!navButtonsContainer || !pageInfo) return;
-      let currentPage = parseInt(container.dataset.current || "1", 10);
-      let totalPages = parseInt(container.dataset.total || "10", 10);
-      let pageSize = parseInt(container.dataset.pageSize || "10", 10);
-      let isDisabled = container.dataset.disabled === "true";
-      let pageButtons = [];
-      const updateUI = () => {
-        pageInfo.textContent = `Halaman ${currentPage} dari ${totalPages}`;
-        const isFirst = currentPage === 1;
-        if (firstBtn) {
-          const disabled = isDisabled || isFirst;
-          firstBtn.disabled = disabled;
-          firstBtn.classList.toggle(
-            `${PREFIX}-pagination__nav-button--disabled`,
-            disabled
-          );
-          firstBtn.classList.toggle(
-            `${PREFIX}-pagination__nav-button--enabled`,
-            !disabled
-          );
-        }
-        if (prevBtn) {
-          const disabled = isDisabled || isFirst;
-          prevBtn.disabled = disabled;
-          prevBtn.classList.toggle(
-            `${PREFIX}-pagination__nav-button--disabled`,
-            disabled
-          );
-          prevBtn.classList.toggle(
-            `${PREFIX}-pagination__nav-button--enabled`,
-            !disabled
-          );
-        }
-        const isLast = currentPage === totalPages;
-        if (nextBtn) {
-          const disabled = isDisabled || isLast;
-          nextBtn.disabled = disabled;
-          nextBtn.classList.toggle(
-            `${PREFIX}-pagination__nav-button--disabled`,
-            disabled
-          );
-          nextBtn.classList.toggle(
-            `${PREFIX}-pagination__nav-button--enabled`,
-            !disabled
-          );
+        const isLast = currentPage === totalPages;
+        if (nextBtn) {
+          const disabled = isDisabled || isLast;
+          nextBtn.disabled = disabled;
+          nextBtn.classList.toggle(
+            `${PREFIX}-pagination__nav-button--disabled`,
+            disabled
+          );
+          nextBtn.classList.toggle(
+            `${PREFIX}-pagination__nav-button--enabled`,
+            !disabled
+          );
         }
         if (lastBtn) {
           const disabled = isDisabled || isLast;
@@ -3490,6 +3309,567 @@ var InaUI = (() => {
     });
   }
 
+  // src/js/utils/countries.js
+  var COUNTRIES = [
+    { code: "ID", name: "Indonesia", dialCode: "+62" },
+    { code: "AF", name: "Afghanistan", dialCode: "+93" },
+    { code: "AL", name: "Albania", dialCode: "+355" },
+    { code: "DZ", name: "Algeria", dialCode: "+213" },
+    { code: "AS", name: "American Samoa", dialCode: "+1684" },
+    { code: "AD", name: "Andorra", dialCode: "+376" },
+    { code: "AO", name: "Angola", dialCode: "+244" },
+    { code: "AI", name: "Anguilla", dialCode: "+1264" },
+    { code: "AG", name: "Antigua and Barbuda", dialCode: "+1268" },
+    { code: "AR", name: "Argentina", dialCode: "+54" },
+    { code: "AM", name: "Armenia", dialCode: "+374" },
+    { code: "AW", name: "Aruba", dialCode: "+297" },
+    { code: "AU", name: "Australia", dialCode: "+61" },
+    { code: "AT", name: "Austria", dialCode: "+43" },
+    { code: "AZ", name: "Azerbaijan", dialCode: "+994" },
+    { code: "BS", name: "Bahamas", dialCode: "+1242" },
+    { code: "BH", name: "Bahrain", dialCode: "+973" },
+    { code: "BD", name: "Bangladesh", dialCode: "+880" },
+    { code: "BB", name: "Barbados", dialCode: "+1246" },
+    { code: "BY", name: "Belarus", dialCode: "+375" },
+    { code: "BE", name: "Belgium", dialCode: "+32" },
+    { code: "BZ", name: "Belize", dialCode: "+501" },
+    { code: "BJ", name: "Benin", dialCode: "+229" },
+    { code: "BM", name: "Bermuda", dialCode: "+1441" },
+    { code: "BT", name: "Bhutan", dialCode: "+975" },
+    { code: "BO", name: "Bolivia", dialCode: "+591" },
+    { code: "BA", name: "Bosnia and Herzegovina", dialCode: "+387" },
+    { code: "BW", name: "Botswana", dialCode: "+267" },
+    { code: "BR", name: "Brazil", dialCode: "+55" },
+    { code: "IO", name: "British Indian Ocean Territory", dialCode: "+246" },
+    { code: "BN", name: "Brunei Darussalam", dialCode: "+673" },
+    { code: "BG", name: "Bulgaria", dialCode: "+359" },
+    { code: "BF", name: "Burkina Faso", dialCode: "+226" },
+    { code: "BI", name: "Burundi", dialCode: "+257" },
+    { code: "KH", name: "Cambodia", dialCode: "+855" },
+    { code: "CM", name: "Cameroon", dialCode: "+237" },
+    { code: "CA", name: "Canada", dialCode: "+1" },
+    { code: "CV", name: "Cape Verde", dialCode: "+238" },
+    { code: "KY", name: "Cayman Islands", dialCode: "+1345" },
+    { code: "CF", name: "Central African Republic", dialCode: "+236" },
+    { code: "TD", name: "Chad", dialCode: "+235" },
+    { code: "CL", name: "Chile", dialCode: "+56" },
+    { code: "CN", name: "China", dialCode: "+86" },
+    { code: "CX", name: "Christmas Island", dialCode: "+61" },
+    { code: "CC", name: "Cocos (Keeling) Islands", dialCode: "+61" },
+    { code: "CO", name: "Colombia", dialCode: "+57" },
+    { code: "KM", name: "Comoros", dialCode: "+269" },
+    { code: "CG", name: "Congo", dialCode: "+242" },
+    { code: "CD", name: "Congo, Democratic Republic of the", dialCode: "+243" },
+    { code: "CK", name: "Cook Islands", dialCode: "+682" },
+    { code: "CR", name: "Costa Rica", dialCode: "+506" },
+    { code: "CI", name: "Cote d'Ivoire", dialCode: "+225" },
+    { code: "HR", name: "Croatia", dialCode: "+385" },
+    { code: "CU", name: "Cuba", dialCode: "+53" },
+    { code: "CY", name: "Cyprus", dialCode: "+357" },
+    { code: "CZ", name: "Czech Republic", dialCode: "+420" },
+    { code: "DK", name: "Denmark", dialCode: "+45" },
+    { code: "DJ", name: "Djibouti", dialCode: "+253" },
+    { code: "DM", name: "Dominica", dialCode: "+1767" },
+    { code: "DO", name: "Dominican Republic", dialCode: "+1" },
+    { code: "EC", name: "Ecuador", dialCode: "+593" },
+    { code: "EG", name: "Egypt", dialCode: "+20" },
+    { code: "SV", name: "El Salvador", dialCode: "+503" },
+    { code: "GQ", name: "Equatorial Guinea", dialCode: "+240" },
+    { code: "ER", name: "Eritrea", dialCode: "+291" },
+    { code: "EE", name: "Estonia", dialCode: "+372" },
+    { code: "ET", name: "Ethiopia", dialCode: "+251" },
+    { code: "FK", name: "Falkland Islands (Malvinas)", dialCode: "+500" },
+    { code: "FO", name: "Faroe Islands", dialCode: "+298" },
+    { code: "FJ", name: "Fiji", dialCode: "+679" },
+    { code: "FI", name: "Finland", dialCode: "+358" },
+    { code: "FR", name: "France", dialCode: "+33" },
+    { code: "GF", name: "French Guiana", dialCode: "+594" },
+    { code: "PF", name: "French Polynesia", dialCode: "+689" },
+    { code: "GA", name: "Gabon", dialCode: "+241" },
+    { code: "GM", name: "Gambia", dialCode: "+220" },
+    { code: "GE", name: "Georgia", dialCode: "+995" },
+    { code: "DE", name: "Germany", dialCode: "+49" },
+    { code: "GH", name: "Ghana", dialCode: "+233" },
+    { code: "GI", name: "Gibraltar", dialCode: "+350" },
+    { code: "GR", name: "Greece", dialCode: "+30" },
+    { code: "GL", name: "Greenland", dialCode: "+299" },
+    { code: "GD", name: "Grenada", dialCode: "+1473" },
+    { code: "GP", name: "Guadeloupe", dialCode: "+590" },
+    { code: "GU", name: "Guam", dialCode: "+1671" },
+    { code: "GT", name: "Guatemala", dialCode: "+502" },
+    { code: "GG", name: "Guernsey", dialCode: "+44" },
+    { code: "GN", name: "Guinea", dialCode: "+224" },
+    { code: "GW", name: "Guinea-Bissau", dialCode: "+245" },
+    { code: "GY", name: "Guyana", dialCode: "+592" },
+    { code: "HT", name: "Haiti", dialCode: "+509" },
+    { code: "VA", name: "Holy See (Vatican City State)", dialCode: "+379" },
+    { code: "HN", name: "Honduras", dialCode: "+504" },
+    { code: "HK", name: "Hong Kong", dialCode: "+852" },
+    { code: "HU", name: "Hungary", dialCode: "+36" },
+    { code: "IS", name: "Iceland", dialCode: "+354" },
+    { code: "IN", name: "India", dialCode: "+91" },
+    { code: "IR", name: "Iran, Islamic Republic of", dialCode: "+98" },
+    { code: "IQ", name: "Iraq", dialCode: "+964" },
+    { code: "IE", name: "Ireland", dialCode: "+353" },
+    { code: "IM", name: "Isle of Man", dialCode: "+44" },
+    { code: "IL", name: "Israel", dialCode: "+972" },
+    { code: "IT", name: "Italy", dialCode: "+39" },
+    { code: "JM", name: "Jamaica", dialCode: "+1876" },
+    { code: "JP", name: "Japan", dialCode: "+81" },
+    { code: "JE", name: "Jersey", dialCode: "+44" },
+    { code: "JO", name: "Jordan", dialCode: "+962" },
+    { code: "KZ", name: "Kazakhstan", dialCode: "+7" },
+    { code: "KE", name: "Kenya", dialCode: "+254" },
+    { code: "KI", name: "Kiribati", dialCode: "+686" },
+    { code: "KP", name: "Korea, Democratic People's Republic of", dialCode: "+850" },
+    { code: "KR", name: "Korea, Republic of", dialCode: "+82" },
+    { code: "KW", name: "Kuwait", dialCode: "+965" },
+    { code: "KG", name: "Kyrgyzstan", dialCode: "+996" },
+    { code: "LA", name: "Laos", dialCode: "+856" },
+    { code: "LV", name: "Latvia", dialCode: "+371" },
+    { code: "LB", name: "Lebanon", dialCode: "+961" },
+    { code: "LS", name: "Lesotho", dialCode: "+266" },
+    { code: "LR", name: "Liberia", dialCode: "+231" },
+    { code: "LY", name: "Libyan Arab Jamahiriya", dialCode: "+218" },
+    { code: "LI", name: "Liechtenstein", dialCode: "+423" },
+    { code: "LT", name: "Lithuania", dialCode: "+370" },
+    { code: "LU", name: "Luxembourg", dialCode: "+352" },
+    { code: "MO", name: "Macao", dialCode: "+853" },
+    { code: "MK", name: "Macedonia, the Former Yugoslav Republic of", dialCode: "+389" },
+    { code: "MG", name: "Madagascar", dialCode: "+261" },
+    { code: "MW", name: "Malawi", dialCode: "+265" },
+    { code: "MY", name: "Malaysia", dialCode: "+60" },
+    { code: "MV", name: "Maldives", dialCode: "+960" },
+    { code: "ML", name: "Mali", dialCode: "+223" },
+    { code: "MT", name: "Malta", dialCode: "+356" },
+    { code: "MH", name: "Marshall Islands", dialCode: "+692" },
+    { code: "MQ", name: "Martinique", dialCode: "+596" },
+    { code: "MR", name: "Mauritania", dialCode: "+222" },
+    { code: "MU", name: "Mauritius", dialCode: "+230" },
+    { code: "YT", name: "Mayotte", dialCode: "+262" },
+    { code: "MX", name: "Mexico", dialCode: "+52" },
+    { code: "FM", name: "Micronesia, Federated States of", dialCode: "+691" },
+    { code: "MD", name: "Moldova, Republic of", dialCode: "+373" },
+    { code: "MC", name: "Monaco", dialCode: "+377" },
+    { code: "MN", name: "Mongolia", dialCode: "+976" },
+    { code: "ME", name: "Montenegro", dialCode: "+382" },
+    { code: "MS", name: "Montserrat", dialCode: "+1664" },
+    { code: "MA", name: "Morocco", dialCode: "+212" },
+    { code: "MZ", name: "Mozambique", dialCode: "+258" },
+    { code: "MM", name: "Myanmar", dialCode: "+95" },
+    { code: "NA", name: "Namibia", dialCode: "+264" },
+    { code: "NR", name: "Nauru", dialCode: "+674" },
+    { code: "NP", name: "Nepal", dialCode: "+977" },
+    { code: "NL", name: "Netherlands", dialCode: "+31" },
+    { code: "NC", name: "New Caledonia", dialCode: "+687" },
+    { code: "NZ", name: "New Zealand", dialCode: "+64" },
+    { code: "NI", name: "Nicaragua", dialCode: "+505" },
+    { code: "NE", name: "Niger", dialCode: "+227" },
+    { code: "NG", name: "Nigeria", dialCode: "+234" },
+    { code: "NU", name: "Niue", dialCode: "+683" },
+    { code: "NF", name: "Norfolk Island", dialCode: "+672" },
+    { code: "MP", name: "Northern Mariana Islands", dialCode: "+1670" },
+    { code: "NO", name: "Norway", dialCode: "+47" },
+    { code: "OM", name: "Oman", dialCode: "+968" },
+    { code: "PK", name: "Pakistan", dialCode: "+92" },
+    { code: "PW", name: "Palau", dialCode: "+680" },
+    { code: "PS", name: "Palestine", dialCode: "+970" },
+    { code: "PA", name: "Panama", dialCode: "+507" },
+    { code: "PG", name: "Papua New Guinea", dialCode: "+675" },
+    { code: "PY", name: "Paraguay", dialCode: "+595" },
+    { code: "PE", name: "Peru", dialCode: "+51" },
+    { code: "PH", name: "Philippines", dialCode: "+63" },
+    { code: "PN", name: "Pitcairn", dialCode: "+870" },
+    { code: "PL", name: "Poland", dialCode: "+48" },
+    { code: "PT", name: "Portugal", dialCode: "+351" },
+    { code: "PR", name: "Puerto Rico", dialCode: "+1939" },
+    { code: "QA", name: "Qatar", dialCode: "+974" },
+    { code: "RE", name: "Reunion", dialCode: "+262" },
+    { code: "RO", name: "Romania", dialCode: "+40" },
+    { code: "RU", name: "Russian Federation", dialCode: "+7" },
+    { code: "RW", name: "Rwanda", dialCode: "+250" },
+    { code: "BL", name: "Saint Barthelemy", dialCode: "+590" },
+    { code: "SH", name: "Saint Helena", dialCode: "+290" },
+    { code: "KN", name: "Saint Kitts and Nevis", dialCode: "+1869" },
+    { code: "LC", name: "Saint Lucia", dialCode: "+1758" },
+    { code: "MF", name: "Saint Martin", dialCode: "+590" },
+    { code: "PM", name: "Saint Pierre and Miquelon", dialCode: "+508" },
+    { code: "VC", name: "Saint Vincent and the Grenadines", dialCode: "+1784" },
+    { code: "WS", name: "Samoa", dialCode: "+685" },
+    { code: "SM", name: "San Marino", dialCode: "+378" },
+    { code: "ST", name: "Sao Tome and Principe", dialCode: "+239" },
+    { code: "SA", name: "Saudi Arabia", dialCode: "+966" },
+    { code: "SN", name: "Senegal", dialCode: "+221" },
+    { code: "RS", name: "Serbia", dialCode: "+381" },
+    { code: "SC", name: "Seychelles", dialCode: "+248" },
+    { code: "SL", name: "Sierra Leone", dialCode: "+232" },
+    { code: "SG", name: "Singapore", dialCode: "+65" },
+    { code: "SK", name: "Slovakia", dialCode: "+421" },
+    { code: "SI", name: "Slovenia", dialCode: "+386" },
+    { code: "SB", name: "Solomon Islands", dialCode: "+677" },
+    { code: "SO", name: "Somalia", dialCode: "+252" },
+    { code: "ZA", name: "South Africa", dialCode: "+27" },
+    { code: "GS", name: "South Georgia and the South Sandwich Islands", dialCode: "+500" },
+    { code: "ES", name: "Spain", dialCode: "+34" },
+    { code: "LK", name: "Sri Lanka", dialCode: "+94" },
+    { code: "SD", name: "Sudan", dialCode: "+249" },
+    { code: "SR", name: "Suriname", dialCode: "+597" },
+    { code: "SJ", name: "Svalbard and Jan Mayen", dialCode: "+47" },
+    { code: "SZ", name: "Swaziland", dialCode: "+268" },
+    { code: "SE", name: "Sweden", dialCode: "+46" },
+    { code: "CH", name: "Switzerland", dialCode: "+41" },
+    { code: "SY", name: "Syrian Arab Republic", dialCode: "+963" },
+    { code: "TW", name: "Taiwan, Province of China", dialCode: "+886" },
+    { code: "TJ", name: "Tajikistan", dialCode: "+992" },
+    { code: "TZ", name: "Tanzania, United Republic of", dialCode: "+255" },
+    { code: "TH", name: "Thailand", dialCode: "+66" },
+    { code: "TL", name: "Timor-Leste", dialCode: "+670" },
+    { code: "TG", name: "Togo", dialCode: "+228" },
+    { code: "TK", name: "Tokelau", dialCode: "+690" },
+    { code: "TO", name: "Tonga", dialCode: "+676" },
+    { code: "TT", name: "Trinidad and Tobago", dialCode: "+1868" },
+    { code: "TN", name: "Tunisia", dialCode: "+216" },
+    { code: "TR", name: "Turkey", dialCode: "+90" },
+    { code: "TM", name: "Turkmenistan", dialCode: "+993" },
+    { code: "TC", name: "Turks and Caicos Islands", dialCode: "+1649" },
+    { code: "TV", name: "Tuvalu", dialCode: "+688" },
+    { code: "UG", name: "Uganda", dialCode: "+256" },
+    { code: "UA", name: "Ukraine", dialCode: "+380" },
+    { code: "AE", name: "United Arab Emirates", dialCode: "+971" },
+    { code: "GB", name: "United Kingdom", dialCode: "+44" },
+    { code: "US", name: "United States", dialCode: "+1" },
+    { code: "UY", name: "Uruguay", dialCode: "+598" },
+    { code: "UZ", name: "Uzbekistan", dialCode: "+998" },
+    { code: "VU", name: "Vanuatu", dialCode: "+678" },
+    { code: "VE", name: "Venezuela", dialCode: "+58" },
+    { code: "VN", name: "Vietnam", dialCode: "+84" },
+    { code: "VG", name: "Virgin Islands, British", dialCode: "+1284" },
+    { code: "VI", name: "Virgin Islands, U.S.", dialCode: "+1340" },
+    { code: "WF", name: "Wallis and Futuna", dialCode: "+681" },
+    { code: "EH", name: "Western Sahara", dialCode: "+212" },
+    { code: "YE", name: "Yemen", dialCode: "+967" },
+    { code: "ZM", name: "Zambia", dialCode: "+260" },
+    { code: "ZW", name: "Zimbabwe", dialCode: "+263" }
+  ];
+
+  // src/js/utils/flags.js
+  var flagCache = {};
+  var getFlag = async (code) => {
+    if (flagCache[code]) {
+      return flagCache[code];
+    }
+    try {
+      const flag = await import(`@idds/styles/assets/flags/${code.toLowerCase()}.svg`);
+      flagCache[code] = flag.default;
+      return flag.default;
+    } catch (error) {
+      console.error(`[IDDS PhoneInput] Failed to load flag for: ${code}`, error);
+      return "";
+    }
+  };
+
+  // src/js/components/stateful/phone-input.js
+  var PhoneInput = class {
+    constructor(selectorOrElement, options = {}) {
+      this.container = typeof selectorOrElement === "string" ? document.querySelector(selectorOrElement) : selectorOrElement;
+      if (!this.container) {
+        console.warn("[IDDS PhoneInput] Container not found:", selectorOrElement);
+        return;
+      }
+      if (this.container.dataset.initialized === "true") {
+        return;
+      }
+      this.container.dataset.initialized = "true";
+      this.options = {
+        modelValue: this.container.dataset.value || "",
+        label: this.container.dataset.label || "",
+        placeholder: this.container.getAttribute("placeholder") || "812-3456-7890",
+        size: this.container.dataset.size || "md",
+        status: this.container.dataset.status || "neutral",
+        disabled: this.container.hasAttribute("disabled") || false,
+        readonly: this.container.hasAttribute("readonly") || false,
+        required: this.container.hasAttribute("required") || false,
+        defaultCountry: this.container.dataset.defaultCountry || "ID",
+        allowClear: this.container.dataset.allowClear !== "false",
+        countries: COUNTRIES,
+        onChange: null,
+        ...options
+      };
+      this.state = {
+        isOpen: false,
+        countrySearch: "",
+        selectedCountry: this.options.countries.find((c) => c.code === this.options.defaultCountry) || this.options.countries[0],
+        phoneNumber: ""
+      };
+      this.elements = {};
+      this.inputId = `phone-input-${Math.random().toString(36).substr(2, 9)}`;
+      this.init();
+    }
+    async init() {
+      this.initDOM();
+      this.initEvents();
+      this.syncValueFromOptions();
+      await this.updateFlag();
+    }
+    initDOM() {
+      if (this.options.label) {
+        const label = document.createElement("label");
+        label.className = `${PREFIX}-phone-input__label`;
+        label.setAttribute("for", this.inputId);
+        label.textContent = this.options.label;
+        if (this.options.required) {
+          const asterisk = document.createElement("span");
+          asterisk.className = `${PREFIX}-phone-input__required`;
+          asterisk.textContent = "*";
+          label.appendChild(asterisk);
+        }
+        this.container.appendChild(label);
+      }
+      const wrapper = document.createElement("div");
+      wrapper.className = `${PREFIX}-phone-input__wrapper ${PREFIX}-phone-input__wrapper--size-${this.options.size}`;
+      if (this.options.status !== "neutral") {
+        wrapper.classList.add(`${PREFIX}-phone-input__wrapper--status-${this.options.status}`);
+      }
+      if (this.options.disabled) {
+        wrapper.classList.add(`${PREFIX}-phone-input__wrapper--disabled`);
+      }
+      const selector = document.createElement("div");
+      selector.className = `${PREFIX}-phone-input__country-selector`;
+      const countryBtn = document.createElement("button");
+      countryBtn.type = "button";
+      countryBtn.className = `${PREFIX}-phone-input__country-button`;
+      countryBtn.setAttribute("aria-label", "Pilih negara");
+      countryBtn.setAttribute("aria-haspopup", "listbox");
+      countryBtn.setAttribute("aria-expanded", "false");
+      if (this.options.disabled || this.options.readonly) countryBtn.disabled = true;
+      const flagImg = document.createElement("img");
+      flagImg.className = `${PREFIX}-phone-input__country-flag-img`;
+      flagImg.width = 24;
+      flagImg.height = 18;
+      flagImg.alt = "";
+      const dialCode = document.createElement("span");
+      dialCode.className = `${PREFIX}-phone-input__country-code`;
+      dialCode.textContent = this.state.selectedCountry.dialCode;
+      const chevron = document.createElement("div");
+      chevron.innerHTML = `<svg class="${PREFIX}-phone-input__country-chevron" width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <path d="M6 9L12 15L18 9" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+    </svg>`;
+      countryBtn.appendChild(flagImg);
+      countryBtn.appendChild(dialCode);
+      countryBtn.appendChild(chevron.firstChild);
+      selector.appendChild(countryBtn);
+      wrapper.appendChild(selector);
+      const divider = document.createElement("div");
+      divider.className = `${PREFIX}-phone-input__divider`;
+      wrapper.appendChild(divider);
+      const input = document.createElement("input");
+      input.type = "tel";
+      input.id = this.inputId;
+      input.placeholder = this.options.placeholder;
+      input.className = `${PREFIX}-phone-input__input`;
+      if (this.options.disabled) input.disabled = true;
+      if (this.options.readonly) input.readOnly = true;
+      wrapper.appendChild(input);
+      if (this.options.allowClear) {
+        const clearBtn = document.createElement("button");
+        clearBtn.type = "button";
+        clearBtn.className = `${PREFIX}-phone-input__clear-button`;
+        clearBtn.setAttribute("aria-label", "Hapus nomor telepon");
+        clearBtn.innerHTML = `<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+        <line x1="18" y1="6" x2="6" y2="18"></line>
+        <line x1="6" y1="6" x2="18" y2="18"></line>
+      </svg>`;
+        clearBtn.style.display = "none";
+        wrapper.appendChild(clearBtn);
+        this.elements.clearBtn = clearBtn;
+      }
+      this.container.appendChild(wrapper);
+      const panel = document.createElement("div");
+      panel.className = `${PREFIX}-phone-input__country-dropdown`;
+      panel.style.display = "none";
+      const searchDiv = document.createElement("div");
+      searchDiv.className = `${PREFIX}-phone-input__country-search`;
+      const searchInput = document.createElement("input");
+      searchInput.type = "text";
+      searchInput.placeholder = "Cari";
+      searchInput.className = `${PREFIX}-phone-input__country-search-input`;
+      searchDiv.appendChild(searchInput);
+      panel.appendChild(searchDiv);
+      const list = document.createElement("div");
+      list.className = `${PREFIX}-phone-input__country-list`;
+      list.setAttribute("role", "listbox");
+      panel.appendChild(list);
+      selector.appendChild(panel);
+      this.elements.wrapper = wrapper;
+      this.elements.countryBtn = countryBtn;
+      this.elements.flagImg = flagImg;
+      this.elements.dialCode = dialCode;
+      this.elements.input = input;
+      this.elements.panel = panel;
+      this.elements.searchInput = searchInput;
+      this.elements.list = list;
+      this.elements.chevron = selector.querySelector(`.${PREFIX}-phone-input__country-chevron`);
+    }
+    initEvents() {
+      this.elements.countryBtn.addEventListener("click", (e) => {
+        e.stopPropagation();
+        this.toggleDropdown();
+      });
+      this.elements.searchInput.addEventListener("input", (e) => {
+        this.state.countrySearch = e.target.value;
+        this.renderCountryList();
+      });
+      this.elements.input.addEventListener("input", (e) => {
+        this.handleInput(e);
+      });
+      if (this.elements.clearBtn) {
+        this.elements.clearBtn.addEventListener("click", () => {
+          this.clear();
+        });
+      }
+      document.addEventListener("click", (e) => {
+        if (!this.elements.wrapper.contains(e.target)) {
+          this.closeDropdown();
+        }
+      });
+    }
+    async updateFlag() {
+      const url = await getFlag(this.state.selectedCountry.code);
+      this.elements.flagImg.src = url;
+      this.elements.flagImg.alt = this.state.selectedCountry.name;
+      this.elements.dialCode.textContent = this.state.selectedCountry.dialCode;
+    }
+    toggleDropdown() {
+      if (this.state.isOpen) {
+        this.closeDropdown();
+      } else {
+        this.openDropdown();
+      }
+    }
+    openDropdown() {
+      this.state.isOpen = true;
+      this.elements.panel.style.display = "flex";
+      this.elements.countryBtn.setAttribute("aria-expanded", "true");
+      this.elements.chevron.classList.add(`${PREFIX}-phone-input__country-chevron--open`);
+      this.state.countrySearch = "";
+      this.elements.searchInput.value = "";
+      this.renderCountryList();
+      setTimeout(() => this.elements.searchInput.focus(), 0);
+    }
+    closeDropdown() {
+      this.state.isOpen = false;
+      this.elements.panel.style.display = "none";
+      this.elements.countryBtn.setAttribute("aria-expanded", "false");
+      this.elements.chevron.classList.remove(`${PREFIX}-phone-input__country-chevron--open`);
+    }
+    renderCountryList() {
+      const list = this.elements.list;
+      list.innerHTML = "";
+      const filtered = this.options.countries.filter(
+        (c) => c.name.toLowerCase().includes(this.state.countrySearch.toLowerCase()) || c.dialCode.includes(this.state.countrySearch) || c.code.toLowerCase().includes(this.state.countrySearch.toLowerCase())
+      );
+      filtered.forEach(async (country) => {
+        const option = document.createElement("button");
+        option.type = "button";
+        option.className = `${PREFIX}-phone-input__country-option`;
+        if (country.code === this.state.selectedCountry.code) {
+          option.classList.add(`${PREFIX}-phone-input__country-option--selected`);
+        }
+        option.setAttribute("role", "option");
+        option.setAttribute("aria-selected", country.code === this.state.selectedCountry.code ? "true" : "false");
+        const flag = document.createElement("img");
+        flag.className = `${PREFIX}-phone-input__country-flag-img`;
+        flag.width = 20;
+        flag.height = 15;
+        getFlag(country.code).then((url) => flag.src = url);
+        const name = document.createElement("span");
+        name.className = `${PREFIX}-phone-input__country-name`;
+        name.textContent = `${country.name} (${country.code})`;
+        const code = document.createElement("span");
+        code.className = `${PREFIX}-phone-input__country-dial-code`;
+        code.textContent = country.dialCode;
+        option.appendChild(flag);
+        option.appendChild(name);
+        option.appendChild(code);
+        option.addEventListener("click", () => {
+          this.selectCountry(country);
+        });
+        list.appendChild(option);
+      });
+    }
+    selectCountry(country) {
+      this.state.selectedCountry = country;
+      this.updateFlag();
+      this.closeDropdown();
+      this.elements.input.focus();
+      this.triggerChange();
+    }
+    formatPhoneNumber(value) {
+      const clean = value.replace(/\D/g, "");
+      if (clean.length > 7) {
+        return clean.replace(/^(\d{3})(\d{4})(.*)/, "$1-$2-$3");
+      } else if (clean.length > 3) {
+        return clean.replace(/^(\d{3})(.*)/, "$1-$2");
+      }
+      return clean;
+    }
+    handleInput(e) {
+      const value = e.target.value;
+      const formatted = this.formatPhoneNumber(value);
+      e.target.value = formatted;
+      this.state.phoneNumber = formatted;
+      if (this.elements.clearBtn) {
+        this.elements.clearBtn.style.display = formatted ? "flex" : "none";
+      }
+      this.triggerChange();
+    }
+    clear() {
+      this.state.phoneNumber = "";
+      this.elements.input.value = "";
+      if (this.elements.clearBtn) {
+        this.elements.clearBtn.style.display = "none";
+      }
+      this.elements.input.focus();
+      this.triggerChange();
+    }
+    syncValueFromOptions() {
+      if (this.options.modelValue) {
+        let val = this.options.modelValue;
+        const dial = this.state.selectedCountry.dialCode;
+        if (val.startsWith(dial)) {
+          val = val.substring(dial.length);
+        }
+        this.state.phoneNumber = this.formatPhoneNumber(val);
+        this.elements.input.value = this.state.phoneNumber;
+        if (this.elements.clearBtn && this.state.phoneNumber) {
+          this.elements.clearBtn.style.display = "flex";
+        }
+      }
+    }
+    triggerChange() {
+      const cleanLocal = this.state.phoneNumber.replace(/\D/g, "");
+      const cleanNoZero = cleanLocal.startsWith("0") ? cleanLocal.substring(1) : cleanLocal;
+      const fullValue = `${this.state.selectedCountry.dialCode}${cleanNoZero}`;
+      if (this.options.onChange) {
+        this.options.onChange(fullValue);
+      }
+      this.container.dispatchEvent(new CustomEvent("change", {
+        detail: { value: fullValue, country: this.state.selectedCountry }
+      }));
+    }
+  };
+  function initPhoneInput(selectorOrElement, options = {}) {
+    const elements = typeof selectorOrElement === "string" ? document.querySelectorAll(selectorOrElement) : selectorOrElement ? typeof selectorOrElement.length !== "undefined" ? selectorOrElement : [selectorOrElement] : document.querySelectorAll(`.${PREFIX}-phone-input`);
+    const instances = [];
+    elements.forEach((container) => {
+      const instance = new PhoneInput(container, options);
+      container.__phoneInputAPI = instance;
+      instances.push(instance);
+    });
+    if (instances.length === 0) return null;
+    return instances.length === 1 ? instances[0] : instances;
+  }
+
   // src/js/components/stateful/tab-vertical.js
   function initTabVertical() {
     const tabs = document.querySelectorAll(`.${PREFIX}-tab-vertical`);
@@ -3602,7 +3982,7 @@ var InaUI = (() => {
 
   // src/js/components/stateful/table.js
   var Table = class {
-    constructor(selectorOrElement, options2 = {}) {
+    constructor(selectorOrElement, options = {}) {
       this.container = typeof selectorOrElement === "string" ? document.querySelector(selectorOrElement) : selectorOrElement;
       if (!this.container) {
         console.warn("[IDDS Table] Container not found:", selectorOrElement);
@@ -3634,7 +4014,7 @@ var InaUI = (() => {
         searchContainer: null,
         searchButton: null,
         onSearch: null,
-        ...options2
+        ...options
       };
       this.state = {
         currentPage: this.options.initialPage,
@@ -3753,34 +4133,43 @@ var InaUI = (() => {
         if (col.sortable && col.accessor) {
           th.classList.add(`${PREFIX}-table__header-cell--sortable`);
           th.setAttribute("data-sort", col.accessor);
+          let sortLabel = `Urutkan ${col.header}`;
+          let currentSort = "none";
+          if (this.state.sortField === field) {
+            currentSort = this.state.sortOrder === "asc" ? "ascending" : "descending";
+          }
+          th.setAttribute("aria-sort", currentSort);
           let sortControlsHtml = `
           <div class="${PREFIX}-table__sort-controls">
             ${col.header}
             <div class="${PREFIX}-table__sort-icon">
-              <div class="${PREFIX}-table__sort-button" data-order="asc">
+              <div class="${PREFIX}-table__sort-button" data-order="asc" role="button" aria-label="Urutkan ${col.header} menaik">
                 <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M12 5l0 14" /><path d="M16 9l-4 -4" /><path d="M8 9l4 -4" /></svg>
               </div>
-              <div class="${PREFIX}-table__sort-button ${PREFIX}-table__sort-button-right" data-order="desc">
+              <div class="${PREFIX}-table__sort-button ${PREFIX}-table__sort-button-right" data-order="desc" role="button" aria-label="Urutkan ${col.header} menurun">
                 <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M12 5l0 14" /><path d="M16 15l-4 4" /><path d="M8 15l4 4" /></svg>
               </div>
             </div>
           </div>
         `;
           th.innerHTML = sortControlsHtml;
+          const ascBtn = th.querySelector('[data-order="asc"]');
+          const descBtn = th.querySelector('[data-order="desc"]');
+          ascBtn.addEventListener("click", (e) => {
+            e.stopPropagation();
+            this.handleHeaderSort(col, "asc");
+          });
+          descBtn.addEventListener("click", (e) => {
+            e.stopPropagation();
+            this.handleHeaderSort(col, "desc");
+          });
           th.addEventListener("click", () => {
-            const field = col.accessor;
+            let nextOrder = "asc";
             if (this.state.sortField === field) {
-              if (this.state.sortOrder === "asc") this.state.sortOrder = "desc";
-              else {
-                this.state.sortField = null;
-                this.state.sortOrder = null;
-              }
-            } else {
-              this.state.sortField = field;
-              this.state.sortOrder = "asc";
+              if (this.state.sortOrder === "asc") nextOrder = "desc";
+              else nextOrder = null;
             }
-            this.state.currentPage = 1;
-            this.loadData();
+            this.handleHeaderSort(col, nextOrder);
           });
         } else {
           th.textContent = col.header;
@@ -3839,7 +4228,7 @@ var InaUI = (() => {
         this.updateSelectAllState();
         return;
       }
-      rowData.forEach((row, index2) => {
+      rowData.forEach((row, index) => {
         const tr = document.createElement("tr");
         tr.className = `${PREFIX}-table__row`;
         if (this.options.rowClickable) {
@@ -3850,11 +4239,11 @@ var InaUI = (() => {
               return;
             }
             if (typeof this.options.onRowClick === "function") {
-              this.options.onRowClick(row, index2);
+              this.options.onRowClick(row, index);
             }
           });
         }
-        const rowKeyStr = String(row[this.options.rowKey] || index2);
+        const rowKeyStr = String(row[this.options.rowKey] || index);
         if (this.options.selectable) {
           const td = document.createElement("td");
           td.className = `${PREFIX}-table__cell`;
@@ -3880,7 +4269,7 @@ var InaUI = (() => {
           const td = document.createElement("td");
           td.className = `${PREFIX}-table__cell`;
           if (typeof col.render === "function") {
-            const content = col.render(row, index2);
+            const content = col.render(row, index);
             if (typeof content === "string") {
               td.innerHTML = content;
             } else if (content instanceof HTMLElement) {
@@ -4026,6 +4415,13 @@ var InaUI = (() => {
         }
       );
     }
+    handleHeaderSort(col, order) {
+      const field2 = col.accessor;
+      this.state.sortField = field2 ? order === null ? null : field2 : null;
+      this.state.sortOrder = order;
+      this.state.currentPage = 1;
+      this.loadData();
+    }
     updateSortIndicators() {
       const btns = this.elements.theadTr.querySelectorAll(
         `.${PREFIX}-table__sort-button`
@@ -4033,10 +4429,15 @@ var InaUI = (() => {
       btns.forEach((btn) => {
         const th = btn.closest("th");
         if (!th) return;
-        const field = th.getAttribute("data-sort");
+        const field2 = th.getAttribute("data-sort");
         const order = btn.getAttribute("data-order");
-        const active = this.state.sortField === field && this.state.sortOrder === order;
+        const active = this.state.sortField === field2 && this.state.sortOrder === order;
         btn.classList.toggle(`${PREFIX}-table__sort-button--active`, active);
+        let currentSort = "none";
+        if (this.state.sortField === field2) {
+          currentSort = this.state.sortOrder === "asc" ? "ascending" : "descending";
+        }
+        th.setAttribute("aria-sort", currentSort);
       });
     }
     async loadData() {
@@ -4114,8 +4515,8 @@ var InaUI = (() => {
       this.triggerSelectionChange();
     }
     toggleAllSelection(checked) {
-      this.state.currentData.forEach((row, index2) => {
-        const keyStr = String(row[this.options.rowKey] || index2);
+      this.state.currentData.forEach((row, index) => {
+        const keyStr = String(row[this.options.rowKey] || index);
         if (checked) {
           this.state.selectedKeys.add(keyStr);
           this.state.selectedRows.set(keyStr, row);
@@ -4196,11 +4597,11 @@ var InaUI = (() => {
       };
     }
   };
-  function initTable(selectorOrElement, options2 = {}) {
+  function initTable(selectorOrElement, options = {}) {
     const elements = typeof selectorOrElement === "string" ? document.querySelectorAll(selectorOrElement) : selectorOrElement ? typeof selectorOrElement.length !== "undefined" ? selectorOrElement : [selectorOrElement] : document.querySelectorAll(`.${PREFIX}-table`);
     const instances = [];
     elements.forEach((container) => {
-      const instance = new Table(container, options2);
+      const instance = new Table(container, options);
       container.__tableAPI = instance;
       instances.push(instance);
     });
@@ -4234,17 +4635,17 @@ var InaUI = (() => {
       const trigger = container.querySelector(`.${PREFIX}-month-picker__trigger`);
       const panel = container.querySelector(`.${PREFIX}-month-picker__panel`);
       const grid = container.querySelector(`.${PREFIX}-month-picker__grid`);
-      const options2 = grid ? Array.from(
+      const options = grid ? Array.from(
         grid.querySelectorAll(`.${PREFIX}-month-picker__month-option`)
       ) : [];
-      if (!trigger || !panel || !grid || options2.length === 0) return;
+      if (!trigger || !panel || !grid || options.length === 0) return;
       let isPickerOpen = false;
       const updateText = () => {
         const textEl = trigger.querySelector(
           `.${PREFIX}-month-picker__trigger-text`
         );
         if (textEl) textEl.textContent = MONTHS_SHORT_ID[currentMonthIdx];
-        options2.forEach((opt, idx) => {
+        options.forEach((opt, idx) => {
           if (idx === currentMonthIdx) {
             opt.classList.add(`${PREFIX}-month-picker__month-option--selected`);
             opt.setAttribute("aria-selected", "true");
@@ -4265,7 +4666,7 @@ var InaUI = (() => {
           panel.classList.add(`${PREFIX}-month-picker__panel--open`);
           trigger.setAttribute("aria-expanded", "true");
           setTimeout(() => {
-            const selectedOpt = options2.find((o) => o.tabIndex === 0);
+            const selectedOpt = options.find((o) => o.tabIndex === 0);
             if (selectedOpt) selectedOpt.focus();
           }, 0);
         } else {
@@ -4289,7 +4690,7 @@ var InaUI = (() => {
       document.addEventListener("click", (e) => {
         if (!container.contains(e.target)) togglePicker(false);
       });
-      options2.forEach((btn, idx) => {
+      options.forEach((btn, idx) => {
         btn.setAttribute("role", "option");
         btn.addEventListener("click", (e) => {
           if (disabled || readonly) return;
@@ -4332,8 +4733,8 @@ var InaUI = (() => {
             else if (e.key === "ArrowDown")
               nextIndex += 3;
             else if (e.key === "ArrowUp") nextIndex -= 3;
-            if (options2[nextIndex]) {
-              options2[nextIndex].focus();
+            if (options[nextIndex]) {
+              options[nextIndex].focus();
             }
           }
         });
@@ -4434,12 +4835,12 @@ var InaUI = (() => {
             } else if (["ArrowRight", "ArrowLeft", "ArrowDown", "ArrowUp"].includes(e.key)) {
               e.preventDefault();
               e.stopPropagation();
-              const options2 = Array.from(
+              const options = Array.from(
                 grid.querySelectorAll(
                   `.${PREFIX}-year-picker__year-option:not(:disabled)`
                 )
               );
-              const currentIndex = options2.indexOf(btn);
+              const currentIndex = options.indexOf(btn);
               if (currentIndex === -1) return;
               let nextIndex = currentIndex;
               if (e.key === "ArrowRight") nextIndex += 1;
@@ -4447,8 +4848,8 @@ var InaUI = (() => {
               else if (e.key === "ArrowDown")
                 nextIndex += 4;
               else if (e.key === "ArrowUp") nextIndex -= 4;
-              if (options2[nextIndex]) {
-                options2[nextIndex].focus();
+              if (options[nextIndex]) {
+                options[nextIndex].focus();
               } else {
               }
             }
@@ -4575,7 +4976,7 @@ var InaUI = (() => {
     return { toastItem, toast };
   }
   function showToast(optionsOrMessage, variant = "default", duration = 5e3) {
-    const options2 = typeof optionsOrMessage === "string" ? {
+    const options = typeof optionsOrMessage === "string" ? {
       message: optionsOrMessage,
       state: variant,
       duration
@@ -4588,7 +4989,7 @@ var InaUI = (() => {
       duration: autoCloseDuration = 5e3,
       position = "top-right",
       actionHtml = ""
-    } = options2;
+    } = options;
     const container = getOrCreateContainer(position);
     const { toastItem, toast } = createToastElement({
       title,
@@ -4656,6 +5057,12 @@ var InaUI = (() => {
       const buttons = buttonGroup.querySelectorAll(
         `.${PREFIX}-button-group__button`
       );
+      if (!buttonGroup.hasAttribute("role")) {
+        buttonGroup.setAttribute("role", "group");
+      }
+      if (!buttonGroup.hasAttribute("aria-label")) {
+        buttonGroup.setAttribute("aria-label", "Grup tombol");
+      }
       const updateState = (clickedButton) => {
         const isDisabled = clickedButton.hasAttribute("disabled") || clickedButton.classList.contains(
           `${PREFIX}-button-group__button--disabled`
@@ -4679,7 +5086,7 @@ var InaUI = (() => {
           })
         );
       };
-      buttons.forEach((button, index2) => {
+      buttons.forEach((button, index) => {
         button.addEventListener("click", (e) => {
           if (button.type !== "submit") {
             e.preventDefault();
@@ -4694,19 +5101,19 @@ var InaUI = (() => {
             updateState(button);
           } else if (e.key === "ArrowRight" || e.key === "ArrowDown") {
             e.preventDefault();
-            let nextIndex = (index2 + 1) % buttons.length;
+            let nextIndex = (index + 1) % buttons.length;
             while ((buttons[nextIndex].hasAttribute("disabled") || buttons[nextIndex].classList.contains(
               `${PREFIX}-button-group__button--disabled`
-            )) && nextIndex !== index2) {
+            )) && nextIndex !== index) {
               nextIndex = (nextIndex + 1) % buttons.length;
             }
             buttons[nextIndex]?.focus();
           } else if (e.key === "ArrowLeft" || e.key === "ArrowUp") {
             e.preventDefault();
-            let prevIndex = (index2 - 1 + buttons.length) % buttons.length;
+            let prevIndex = (index - 1 + buttons.length) % buttons.length;
             while ((buttons[prevIndex].hasAttribute("disabled") || buttons[prevIndex].classList.contains(
               `${PREFIX}-button-group__button--disabled`
-            )) && prevIndex !== index2) {
+            )) && prevIndex !== index) {
               prevIndex = (prevIndex - 1 + buttons.length) % buttons.length;
             }
             buttons[prevIndex]?.focus();
@@ -4726,8 +5133,8 @@ var InaUI = (() => {
       const menuItems = menu.querySelectorAll("li[role='option']");
       const menuId = menu.id;
       let activeIndex = -1;
-      menuItems.forEach((item, index2) => {
-        item.id = `${menuId}-item-${index2}`;
+      menuItems.forEach((item, index) => {
+        item.id = `${menuId}-item-${index}`;
       });
       const toggleMenu = (show) => {
         const isCurrentlyShown = dropdown.classList.contains("show");
@@ -4782,15 +5189,15 @@ var InaUI = (() => {
         }
         toggleMenu(false);
       };
-      const setHighlight = (index2) => {
+      const setHighlight = (index) => {
         removeHighlight();
         const visibleItems = menu.querySelectorAll(
           "li[role='option']:not(.hidden)"
         );
         if (visibleItems.length === 0) return;
-        if (index2 < 0) index2 = 0;
-        else if (index2 >= visibleItems.length) index2 = visibleItems.length - 1;
-        const itemToHighlight = visibleItems[index2];
+        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);
@@ -4798,7 +5205,7 @@ var InaUI = (() => {
             behavior: "smooth",
             block: "nearest"
           });
-          activeIndex = index2;
+          activeIndex = index;
         }
       };
       const removeHighlight = () => {
@@ -4861,6 +5268,291 @@ var InaUI = (() => {
     });
   }
 
+  // src/js/components/stateful/chip.js
+  var PREFIX4 = "ina";
+  function initChip2(rootSelector = `.${PREFIX4}-chip`) {
+    const chips = document.querySelectorAll(rootSelector);
+    chips.forEach((container) => {
+      if (container.__inaChipInitialized) return;
+      const showCustomization = container.getAttribute("data-show-customization") === "true";
+      const customizationLabel = container.getAttribute("data-customization-label") || "Kustomisasi";
+      const isMultiple = container.getAttribute("data-multiple") === "true";
+      let selectedValue = container.getAttribute("data-selected") || "";
+      const list = container.querySelector(`.${PREFIX4}-chip__list`);
+      const items = list ? list.querySelectorAll(`.${PREFIX4}-chip__item`) : [];
+      let customFieldContainer = container.querySelector(
+        `.${PREFIX4}-chip__custom-field`
+      );
+      const getNormalizedSelected = () => {
+        if (!selectedValue) return [];
+        return isMultiple ? selectedValue.split(",").map((s) => s.trim()).filter(Boolean) : [selectedValue];
+      };
+      const updateUI = () => {
+        const normSelected = getNormalizedSelected();
+        const getInitialFocusIndex = () => {
+          if (normSelected.length > 0) {
+            const standardValues = Array.from(items).filter((item) => item.textContent.trim() !== customizationLabel).map((item) => item.getAttribute("data-value"));
+            const hasCustomVal = normSelected.some(
+              (val) => !standardValues.includes(val) && val !== ""
+            );
+            if (hasCustomVal && showCustomization) {
+              return items.length - 1;
+            }
+            const firstSelectedIndex = Array.from(items).findIndex(
+              (opt) => normSelected.includes(opt.getAttribute("data-value"))
+            );
+            if (firstSelectedIndex !== -1) return firstSelectedIndex;
+          }
+          return 0;
+        };
+        const focusedIndex = getInitialFocusIndex();
+        items.forEach((item, index) => {
+          const itemValue = item.getAttribute("data-value");
+          const isSelected = normSelected.includes(itemValue) || showCustomization && item.textContent.trim() === customizationLabel && normSelected.some(
+            (val) => !Array.from(items).filter((i) => i.textContent.trim() !== customizationLabel).map((i) => i.getAttribute("data-value")).includes(val) && val !== ""
+          );
+          const isDisabled = item.hasAttribute("disabled");
+          if (isSelected) {
+            item.classList.add(`${PREFIX4}-chip__item--selected`);
+          } else {
+            item.classList.remove(`${PREFIX4}-chip__item--selected`);
+          }
+          if (isDisabled) {
+            item.classList.add(`${PREFIX4}-chip__item--disabled`);
+          }
+          if (!item.hasAttribute("role")) {
+            item.setAttribute("role", "option");
+          }
+          item.setAttribute("aria-selected", isSelected);
+          item.setAttribute(
+            "tabindex",
+            index === focusedIndex && !isDisabled ? "0" : "-1"
+          );
+        });
+        if (showCustomization) {
+          const isToggleBtn2 = (i) => i.hasAttribute("data-customization-toggle") || i.textContent.trim() === customizationLabel;
+          const standardValues = Array.from(items).filter((item) => !isToggleBtn2(item)).map((item) => item.getAttribute("data-value"));
+          const customValues = normSelected.filter(
+            (val) => !standardValues.includes(val) && val !== ""
+          );
+          const isStandard = customValues.length === 0;
+          const primaryCustomValue = customValues[customValues.length - 1] || "";
+          const toggleBtn = Array.from(items).find(isToggleBtn2);
+          const showInput = toggleBtn && normSelected.includes(toggleBtn.getAttribute("data-value")) || !isStandard && normSelected.length > 0;
+          if (showInput) {
+            if (!customFieldContainer) {
+              customFieldContainer = document.createElement("div");
+              customFieldContainer.className = `${PREFIX4}-chip__custom-field`;
+              container.appendChild(customFieldContainer);
+            }
+            let input = customFieldContainer.querySelector(
+              `.${PREFIX4}-chip__input`
+            );
+            if (!input) {
+              customFieldContainer.innerHTML = `
+               <div class="${PREFIX4}-chip__input-wrapper">
+                 <input type="text" class="${PREFIX4}-chip__input" placeholder="Masukkan data yang Anda inginkan" value="${!isStandard ? primaryCustomValue : ""}" />
+                 <button type="button" class="${PREFIX4}-chip__clear-button" aria-label="Hapus input" style="display: ${!isStandard && primaryCustomValue ? "inline-flex" : "none"};">
+                   <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="${PREFIX4}-chip__clear-icon">
+                     <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
+                     <path d="M18 6l-12 12"></path>
+                     <path d="M6 6l12 12"></path>
+                   </svg>
+                 </button>
+               </div>
+             `;
+              input = customFieldContainer.querySelector("input");
+              const clearBtn = customFieldContainer.querySelector(
+                ".ina-chip__clear-button"
+              );
+              input.addEventListener("input", (e) => {
+                clearBtn.style.display = e.target.value ? "inline-flex" : "none";
+              });
+              clearBtn.addEventListener("click", () => {
+                input.value = "";
+                clearBtn.style.display = "none";
+                commitCustomValue(input);
+              });
+              input.addEventListener("blur", (e) => {
+                commitCustomValue(e.target);
+              });
+              input.addEventListener("keydown", (e) => {
+                if (e.key === "Enter") {
+                  commitCustomValue(e.target);
+                  e.target.blur();
+                }
+              });
+            } else {
+              const inputEl = customFieldContainer.querySelector("input");
+              if (inputEl && document.activeElement !== inputEl) {
+                inputEl.value = !isStandard ? primaryCustomValue : "";
+              }
+            }
+            customFieldContainer.style.display = "block";
+          } else {
+            if (customFieldContainer) {
+              customFieldContainer.style.display = "none";
+            }
+          }
+        }
+      };
+      const handleSelect = (val) => {
+        if (!val) return;
+        let finalVal = val;
+        if (isMultiple) {
+          const normSelected = getNormalizedSelected();
+          let newSelected;
+          if (normSelected.includes(val)) {
+            newSelected = normSelected.filter((v) => v !== val);
+          } else {
+            newSelected = [...normSelected, val];
+          }
+          finalVal = newSelected;
+          selectedValue = newSelected.join(",");
+        } else {
+          const normSelected = getNormalizedSelected();
+          if (normSelected.includes(val)) {
+            selectedValue = "";
+            finalVal = "";
+          } else {
+            selectedValue = val;
+          }
+        }
+        container.setAttribute("data-selected", selectedValue);
+        updateUI();
+        container.dispatchEvent(
+          new CustomEvent("chip:select", {
+            detail: { value: finalVal },
+            bubbles: true
+          })
+        );
+      };
+      let currentFocusedIndex = -1;
+      const setItemFocus = (index) => {
+        items.forEach((item, i) => {
+          item.setAttribute("tabindex", i === index ? "0" : "-1");
+        });
+        if (items[index]) {
+          items[index].focus();
+          currentFocusedIndex = index;
+        }
+      };
+      const commitCustomValue = (inputEl) => {
+        const finalValue = inputEl.value.trim();
+        let normSelected = getNormalizedSelected();
+        const toggleBtn = Array.from(items).find(isToggleBtn);
+        const toggleVal = toggleBtn ? toggleBtn.getAttribute("data-value") : null;
+        const standardValues = Array.from(items).filter((i) => !isToggleBtn(i)).map((i) => i.getAttribute("data-value"));
+        const customValues = normSelected.filter(
+          (val) => !standardValues.includes(val) && val !== "" && val !== toggleVal
+        );
+        const primaryCustomValue = customValues[customValues.length - 1];
+        if (primaryCustomValue) {
+          normSelected = normSelected.filter((v) => v !== primaryCustomValue);
+        }
+        if (finalValue !== "") {
+          if (!normSelected.includes(finalValue)) {
+            normSelected.push(finalValue);
+          }
+        } else {
+          if (toggleVal) {
+            normSelected = normSelected.filter((v) => v !== toggleVal);
+          }
+        }
+        if (isMultiple) {
+          selectedValue = normSelected.join(",");
+        } else {
+          selectedValue = finalValue;
+        }
+        updateUI();
+        const changeEvent = new CustomEvent(`${PREFIX4}-chip:change`, {
+          detail: { value: isMultiple ? getNormalizedSelected() : selectedValue },
+          bubbles: true
+        });
+        container.dispatchEvent(changeEvent);
+      };
+      items.forEach((item, index) => {
+        item.addEventListener("click", (e) => {
+          if (item.hasAttribute("disabled")) return;
+          currentFocusedIndex = index;
+          const val = item.getAttribute("data-value");
+          if (showCustomization && isToggleBtn(item)) {
+            const normSelected = getNormalizedSelected();
+            const standardValues = Array.from(items).filter((i) => !isToggleBtn(i)).map((i) => i.getAttribute("data-value"));
+            const customValues = normSelected.filter(
+              (v) => !standardValues.includes(v) && v !== "" && v !== val
+            );
+            const isInputVisible = normSelected.includes(val) || customValues.length > 0;
+            if (!isInputVisible) {
+              handleSelect(val);
+            }
+          } else {
+            handleSelect(val);
+          }
+        });
+        item.addEventListener("keydown", (e) => {
+          if (item.hasAttribute("disabled")) return;
+          if (e.key === "ArrowRight" || e.key === "ArrowDown") {
+            e.preventDefault();
+            let nextIndex = (index + 1) % items.length;
+            while (items[nextIndex].hasAttribute("disabled") && nextIndex !== index) {
+              nextIndex = (nextIndex + 1) % items.length;
+            }
+            setItemFocus(nextIndex);
+          } else if (e.key === "ArrowLeft" || e.key === "ArrowUp") {
+            e.preventDefault();
+            let prevIndex = (index - 1 + items.length) % items.length;
+            while (items[prevIndex].hasAttribute("disabled") && prevIndex !== index) {
+              prevIndex = (prevIndex - 1 + items.length) % items.length;
+            }
+            setItemFocus(prevIndex);
+          }
+          if (e.key === " " || e.key === "Enter") {
+            e.preventDefault();
+            item.click();
+          }
+        });
+      });
+      updateUI();
+      if (list && !list.hasAttribute("role")) {
+        list.setAttribute("role", "listbox");
+        if (isMultiple) {
+          list.setAttribute("aria-multiselectable", "true");
+        }
+      }
+      container.__inaChipInitialized = true;
+    });
+  }
+
+  // src/js/components/stateless/img-compare.js
+  function initImgCompare2(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", () => {
@@ -4875,7 +5567,7 @@ var InaUI = (() => {
       initSingleFileUpload();
       initFileUploadBase();
       initFileUploadItem();
-      initImgCompare();
+      initImgCompare2();
       initModal();
       initRangeDatepicker();
       initRadioButton();
@@ -4884,12 +5576,13 @@ var InaUI = (() => {
       initToggle();
       initPagination();
       initSelectDropdown();
-      initChip();
+      initChip2();
       initTabVertical();
       initTabHorizontal();
       initTable();
       initMonthPicker();
       initYearPicker();
+      initPhoneInput();
     });
   }
   return __toCommonJS(bundle_exports);