@idds/vue 1.4.0 → 1.4.4

package/dist/index.es.js

@@ -702,8 +702,16 @@ const _sfc_main$M = /* @__PURE__ */ defineComponent({
     const registerItem = (item) => {
       const index2 = items.value.size;
       items.value.set(item.id, index2);
-      if (!allowMultiple.value && item.defaultOpen && openIndexes.value.length === 0) {
-        openIndexes.value = [index2];
+      if (item.defaultOpen) {
+        if (allowMultiple.value) {
+          if (!openIndexes.value.includes(index2)) {
+            openIndexes.value = [...openIndexes.value, index2];
+          }
+        } else {
+          if (openIndexes.value.length === 0) {
+            openIndexes.value = [index2];
+          }
+        }
       }
       return index2;
     };
@@ -763,7 +771,7 @@ const _sfc_main$M = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const AccordionGroup = /* @__PURE__ */ _export_sfc(_sfc_main$M, [["__scopeId", "data-v-b60ded7f"]]);
+const AccordionGroup = /* @__PURE__ */ _export_sfc(_sfc_main$M, [["__scopeId", "data-v-a85c5702"]]);
 const _hoisted_1$G = ["disabled", "aria-expanded"];
 const _hoisted_2$B = { class: "ina-action-dropdown__trigger-content" };
 const _hoisted_3$x = { class: "ina-action-dropdown__menu" };
@@ -1103,6 +1111,20 @@ var IconClock = createVueComponent("outline", "clock", "Clock", [["path", { "d":
  * See the LICENSE file in the root directory of this source tree.
  */
 var IconCube3dSphere = createVueComponent("outline", "cube-3d-sphere", "Cube3dSphere", [["path", { "d": "M6 17.6l-2 -1.1v-2.5", "key": "svg-0" }], ["path", { "d": "M4 10v-2.5l2 -1.1", "key": "svg-1" }], ["path", { "d": "M10 4.1l2 -1.1l2 1.1", "key": "svg-2" }], ["path", { "d": "M18 6.4l2 1.1v2.5", "key": "svg-3" }], ["path", { "d": "M20 14v2.5l-2 1.12", "key": "svg-4" }], ["path", { "d": "M14 19.9l-2 1.1l-2 -1.1", "key": "svg-5" }], ["path", { "d": "M12 12l2 -1.1", "key": "svg-6" }], ["path", { "d": "M18 8.6l2 -1.1", "key": "svg-7" }], ["path", { "d": "M12 12l0 2.5", "key": "svg-8" }], ["path", { "d": "M12 18.5l0 2.5", "key": "svg-9" }], ["path", { "d": "M12 12l-2 -1.12", "key": "svg-10" }], ["path", { "d": "M6 8.6l-2 -1.1", "key": "svg-11" }]]);
+/**
+ * @license @tabler/icons-vue v3.35.0 - MIT
+ *
+ * This source code is licensed under the MIT license.
+ * See the LICENSE file in the root directory of this source tree.
+ */
+var IconFileTypePdf = createVueComponent("outline", "file-type-pdf", "FileTypePdf", [["path", { "d": "M14 3v4a1 1 0 0 0 1 1h4", "key": "svg-0" }], ["path", { "d": "M5 12v-7a2 2 0 0 1 2 -2h7l5 5v4", "key": "svg-1" }], ["path", { "d": "M5 18h1.5a1.5 1.5 0 0 0 0 -3h-1.5v6", "key": "svg-2" }], ["path", { "d": "M17 18h2", "key": "svg-3" }], ["path", { "d": "M20 15h-3v6", "key": "svg-4" }], ["path", { "d": "M11 15v6h1a2 2 0 0 0 2 -2v-2a2 2 0 0 0 -2 -2h-1z", "key": "svg-5" }]]);
+/**
+ * @license @tabler/icons-vue v3.35.0 - MIT
+ *
+ * This source code is licensed under the MIT license.
+ * See the LICENSE file in the root directory of this source tree.
+ */
+var IconFile = createVueComponent("outline", "file", "File", [["path", { "d": "M14 3v4a1 1 0 0 0 1 1h4", "key": "svg-0" }], ["path", { "d": "M17 21h-10a2 2 0 0 1 -2 -2v-14a2 2 0 0 1 2 -2h7l5 5v11a2 2 0 0 1 -2 2z", "key": "svg-1" }]]);
 /**
  * @license @tabler/icons-vue v3.35.0 - MIT
  *
@@ -1124,6 +1146,13 @@ var IconLoader2 = createVueComponent("outline", "loader-2", "Loader2", [["path",
  * See the LICENSE file in the root directory of this source tree.
  */
 var IconMoon = createVueComponent("outline", "moon", "Moon", [["path", { "d": "M12 3c.132 0 .263 0 .393 0a7.5 7.5 0 0 0 7.92 12.446a9 9 0 1 1 -8.313 -12.454z", "key": "svg-0" }]]);
+/**
+ * @license @tabler/icons-vue v3.35.0 - MIT
+ *
+ * This source code is licensed under the MIT license.
+ * See the LICENSE file in the root directory of this source tree.
+ */
+var IconPhoto = createVueComponent("outline", "photo", "Photo", [["path", { "d": "M15 8h.01", "key": "svg-0" }], ["path", { "d": "M3 6a3 3 0 0 1 3 -3h12a3 3 0 0 1 3 3v12a3 3 0 0 1 -3 3h-12a3 3 0 0 1 -3 -3v-12z", "key": "svg-1" }], ["path", { "d": "M3 16l5 -5c.928 -.893 2.072 -.893 3 0l5 5", "key": "svg-2" }], ["path", { "d": "M14 14l1 -1c.928 -.893 2.072 -.893 3 0l3 3", "key": "svg-3" }]]);
 /**
  * @license @tabler/icons-vue v3.35.0 - MIT
  *
@@ -1716,7 +1745,7 @@ const _hoisted_13$6 = {
   class: "ina-card__media"
 };
 const _hoisted_14$5 = ["src", "alt"];
-const _hoisted_15$4 = {
+const _hoisted_15$3 = {
   key: 4,
   class: "ina-card__media"
 };
@@ -1888,7 +1917,7 @@ const _sfc_main$D = /* @__PURE__ */ defineComponent({
             }, null, 8, _hoisted_14$5)) : createCommentVNode("", true)
           ])
         ])) : createCommentVNode("", true),
-        __props.variant === "horizontal" && computedMediaPosition.value === "right" ? (openBlock(), createElementBlock("div", _hoisted_15$4, [
+        __props.variant === "horizontal" && computedMediaPosition.value === "right" ? (openBlock(), createElementBlock("div", _hoisted_15$3, [
           renderSlot(_ctx.$slots, "media", {}, () => [
             __props.mediaSrc ? (openBlock(), createElementBlock("img", {
               key: 0,
@@ -3368,7 +3397,7 @@ const _hoisted_14$4 = {
   key: 3,
   class: "ina-file-upload__file-icon-wrapper ina-file-upload__file-icon-wrapper--success"
 };
-const _hoisted_15$3 = { class: "ina-file-upload__file-info" };
+const _hoisted_15$2 = { class: "ina-file-upload__file-info" };
 const _hoisted_16$2 = { class: "ina-file-upload__file-name" };
 const _hoisted_17$2 = { class: "ina-file-upload__file-size" };
 const _hoisted_18$2 = {
@@ -3648,27 +3677,27 @@ const _sfc_main$v = /* @__PURE__ */ defineComponent({
                 createElementVNode("div", _hoisted_10$8, [
                   uploadedFile.status === "uploading" ? (openBlock(), createElementBlock("div", _hoisted_11$8, [
                     createVNode(unref(IconLoader2), {
-                      size: 16,
+                      size: 20,
                       class: "ina-file-upload__file-icon--spinning"
                     })
                   ])) : uploadedFile.status === "success" ? (openBlock(), createElementBlock("div", _hoisted_12$7, [
                     createVNode(unref(IconCircleCheck), {
-                      size: 16,
+                      size: 20,
                       stroke: "2"
                     })
                   ])) : uploadedFile.status === "error" ? (openBlock(), createElementBlock("div", _hoisted_13$5, [
                     createVNode(unref(IconCircleX), {
-                      size: 16,
+                      size: 20,
                       stroke: "2"
                     })
                   ])) : uploadedFile.status === "idle" ? (openBlock(), createElementBlock("div", _hoisted_14$4, [
                     createVNode(unref(IconCircleCheck), {
-                      size: 16,
+                      size: 20,
                       stroke: "2"
                     })
                   ])) : createCommentVNode("", true)
                 ]),
-                createElementVNode("div", _hoisted_15$3, [
+                createElementVNode("div", _hoisted_15$2, [
                   createElementVNode("div", _hoisted_16$2, toDisplayString(unref(sanitizeFileName)(uploadedFile.file.name)), 1),
                   createElementVNode("div", _hoisted_17$2, toDisplayString(unref(formatFileSize)(uploadedFile.file.size)), 1),
                   uploadedFile.error ? (openBlock(), createElementBlock("div", _hoisted_18$2, toDisplayString(uploadedFile.error), 1)) : createCommentVNode("", true)
@@ -3681,7 +3710,7 @@ const _sfc_main$v = /* @__PURE__ */ defineComponent({
                       class: "ina-file-upload__file-retry",
                       onClick: ($event) => updateFileStatus(getOriginalIndex(uploadedFile), "idle")
                     }, [
-                      createVNode(unref(IconRotateClockwise), { size: 16 })
+                      createVNode(unref(IconRotateClockwise), { size: 20 })
                     ], 8, _hoisted_20$2),
                     createElementVNode("button", {
                       title: "Hapus file",
@@ -3689,7 +3718,7 @@ const _sfc_main$v = /* @__PURE__ */ defineComponent({
                       class: "ina-file-upload__file-remove",
                       onClick: ($event) => removeFile(getOriginalIndex(uploadedFile))
                     }, [
-                      createVNode(unref(IconTrash), { size: 16 })
+                      createVNode(unref(IconTrash), { size: 20 })
                     ], 8, _hoisted_21$2)
                   ], 64)) : uploadedFile.status === "uploading" ? (openBlock(), createElementBlock("button", {
                     key: 1,
@@ -3698,7 +3727,7 @@ const _sfc_main$v = /* @__PURE__ */ defineComponent({
                     class: "ina-file-upload__file-remove",
                     onClick: ($event) => removeFile(getOriginalIndex(uploadedFile))
                   }, [
-                    createVNode(unref(IconX), { size: 16 })
+                    createVNode(unref(IconX), { size: 20 })
                   ], 8, _hoisted_22$1)) : uploadedFile.status === "success" ? (openBlock(), createElementBlock("button", {
                     key: 2,
                     title: "Hapus file",
@@ -3706,7 +3735,7 @@ const _sfc_main$v = /* @__PURE__ */ defineComponent({
                     class: "ina-file-upload__file-remove",
                     onClick: ($event) => removeFile(getOriginalIndex(uploadedFile))
                   }, [
-                    createVNode(unref(IconTrash), { size: 16 })
+                    createVNode(unref(IconTrash), { size: 20 })
                   ], 8, _hoisted_23$1)) : uploadedFile.status === "idle" ? (openBlock(), createElementBlock("button", {
                     key: 3,
                     title: "Hapus file",
@@ -3714,7 +3743,7 @@ const _sfc_main$v = /* @__PURE__ */ defineComponent({
                     class: "ina-file-upload__file-remove",
                     onClick: ($event) => removeFile(getOriginalIndex(uploadedFile))
                   }, [
-                    createVNode(unref(IconTrash), { size: 16 })
+                    createVNode(unref(IconTrash), { size: 20 })
                   ], 8, _hoisted_24$1)) : createCommentVNode("", true)
                 ])
               ], 2);
@@ -5962,7 +5991,7 @@ const _hoisted_11$4 = { class: "ina-date-picker__day-number" };
 const _hoisted_12$3 = { class: "ina-date-picker__calendar-container" };
 const _hoisted_13$3 = { class: "ina-date-picker__calendar-header" };
 const _hoisted_14$2 = { class: "ina-date-picker__header-controls" };
-const _hoisted_15$2 = { class: "ina-date-picker__dropdown-container" };
+const _hoisted_15$1 = { class: "ina-date-picker__dropdown-container" };
 const _hoisted_16$1 = { class: "ina-date-picker__dropdown-container" };
 const _hoisted_17$1 = { class: "ina-date-picker__calendar-grid" };
 const _hoisted_18$1 = ["disabled", "onClick"];
@@ -6880,7 +6909,7 @@ const _sfc_main$j = /* @__PURE__ */ defineComponent({
                     })
                   ]),
                   createElementVNode("div", _hoisted_14$2, [
-                    createElementVNode("div", _hoisted_15$2, [
+                    createElementVNode("div", _hoisted_15$1, [
                       createVNode(MonthPicker, {
                         "model-value": currentMonth.value,
                         disabled: __props.disabled,
@@ -7040,7 +7069,7 @@ const _hoisted_11$3 = { class: "ina-select-dropdown__preview-item-text" };
 const _hoisted_12$2 = ["aria-label"];
 const _hoisted_13$2 = ["disabled", "onClick"];
 const _hoisted_14$1 = { class: "ina-select-dropdown__option-content" };
-const _hoisted_15$1 = { class: "ina-select-dropdown__option-label" };
+const _hoisted_15 = { class: "ina-select-dropdown__option-label" };
 const _hoisted_16 = {
   key: 0,
   class: "ina-select-dropdown__option-check-indicator"
@@ -7093,7 +7122,7 @@ const _sfc_main$i = /* @__PURE__ */ defineComponent({
     showPreviewValue: { type: Boolean, default: true },
     searchable: { type: Boolean, default: true }
   },
-  emits: ["update:modelValue", "change", "clear"],
+  emits: ["update:modelValue", "change", "clear", "update:selectedRaw", "selectedRawChange"],
   setup(__props, { emit: __emit }) {
     const props = __props;
     const emit = __emit;
@@ -7104,6 +7133,7 @@ const _sfc_main$i = /* @__PURE__ */ defineComponent({
     const isOpen = ref(false);
     const internalSearchTerm = ref("");
     const searchTimeoutRef = ref(null);
+    const selectedLabelsCache = ref(/* @__PURE__ */ new Map());
     const isSearchControlled = computed(() => props.searchValue !== void 0);
     const searchTerm = computed(
       () => isSearchControlled.value ? props.searchValue || "" : internalSearchTerm.value
@@ -7185,16 +7215,94 @@ const _sfc_main$i = /* @__PURE__ */ defineComponent({
     const singleSelected = computed(
       () => !props.multiple ? props.modelValue : null
     );
+    const getLabelForValue = (value) => {
+      if (selectedLabelsCache.value.has(value)) {
+        return selectedLabelsCache.value.get(value) || null;
+      }
+      const found = props.options.find((o) => o.value === value);
+      if (found) {
+        selectedLabelsCache.value.set(value, found.label);
+        return found.label;
+      }
+      return null;
+    };
+    const getOptionLabelByValue = (value) => {
+      const label = getLabelForValue(value);
+      return label || value;
+    };
+    watch(
+      () => props.options,
+      (newOptions) => {
+        newOptions.forEach((option) => {
+          if (selectedLabelsCache.value.has(option.value)) {
+            selectedLabelsCache.value.set(option.value, option.label);
+          }
+        });
+      },
+      { deep: true }
+    );
+    const getOptionForValue = (value) => {
+      const label = getLabelForValue(value);
+      if (label !== null) {
+        return { label, value };
+      }
+      const found = props.options.find((o) => o.value === value);
+      return found || null;
+    };
+    watch(
+      () => [props.modelValue, props.multiple],
+      () => {
+        const cache = selectedLabelsCache.value;
+        if (props.multiple && Array.isArray(props.modelValue)) {
+          props.modelValue.forEach((value) => {
+            if (!cache.has(value)) {
+              const found = props.options.find((o) => o.value === value);
+              if (found) {
+                cache.set(value, found.label);
+              }
+            }
+          });
+          cache.forEach((_, value) => {
+            if (!props.modelValue.includes(value)) {
+              cache.delete(value);
+            }
+          });
+        } else if (props.modelValue !== null && props.modelValue !== void 0 && props.modelValue !== "") {
+          if (!cache.has(props.modelValue)) {
+            const found = props.options.find((o) => o.value === props.modelValue);
+            if (found) {
+              cache.set(props.modelValue, found.label);
+            }
+          }
+        } else {
+          cache.clear();
+        }
+        let selectedRaw = null;
+        if (props.multiple && Array.isArray(props.modelValue)) {
+          if (props.modelValue.length > 0) {
+            const rawOptions = props.modelValue.map((val) => getOptionForValue(val)).filter((opt) => opt !== null);
+            selectedRaw = rawOptions.length > 0 ? rawOptions : null;
+          }
+        } else if (props.modelValue !== null && props.modelValue !== void 0 && props.modelValue !== "") {
+          selectedRaw = getOptionForValue(props.modelValue);
+        }
+        emit("update:selectedRaw", selectedRaw);
+        emit("selectedRawChange", selectedRaw);
+      },
+      { deep: true, immediate: true }
+    );
     const triggerLabel = computed(() => {
       if (props.multiple) {
         if (!selectedArray.value.length) return props.placeholder;
         else if (selectedArray.value.length > 3)
           return `${selectedArray.value.length} data terpilih`;
-        else
-          return props.options.filter((o) => selectedArray.value.includes(o.value)).map((o) => o.label).join(", ");
+        else {
+          const labels = selectedArray.value.map((val) => getLabelForValue(val)).filter((label) => label !== null);
+          return labels.length > 0 ? labels.join(", ") : props.placeholder;
+        }
       } else {
-        const found = props.options.find((o) => o.value === singleSelected.value);
-        return found ? found.label : props.placeholder;
+        const label = getLabelForValue(singleSelected.value);
+        return label || props.placeholder;
       }
     });
     const filteredOptions = computed(() => {
@@ -7221,10 +7329,6 @@ const _sfc_main$i = /* @__PURE__ */ defineComponent({
     const getOptionLabel = (option) => {
       return option.label;
     };
-    const getOptionLabelByValue = (value) => {
-      const option = props.options.find((o) => o.value === value);
-      return option ? option.label : value;
-    };
     const isSelected = (option) => {
       if (props.multiple) {
         return selectedArray.value.includes(option.value);
@@ -7245,11 +7349,23 @@ const _sfc_main$i = /* @__PURE__ */ defineComponent({
       if (props.disabled) return;
       if (props.multiple) {
         const prev = Array.isArray(props.modelValue) ? [...props.modelValue] : [];
-        const newValue = prev.includes(option.value) ? prev.filter((v) => v !== option.value) : [...prev, option.value];
+        const isCurrentlySelected = prev.includes(option.value);
+        const newValue = isCurrentlySelected ? prev.filter((v) => v !== option.value) : [...prev, option.value];
+        if (isCurrentlySelected) {
+          selectedLabelsCache.value.delete(option.value);
+        } else {
+          selectedLabelsCache.value.set(option.value, option.label);
+        }
         emit("update:modelValue", newValue);
         emit("change", newValue);
       } else {
-        const newValue = isSelected(option) ? null : option.value;
+        const isCurrentlySelected = isSelected(option);
+        const newValue = isCurrentlySelected ? null : option.value;
+        if (isCurrentlySelected) {
+          selectedLabelsCache.value.delete(option.value);
+        } else {
+          selectedLabelsCache.value.set(option.value, option.label);
+        }
         emit("update:modelValue", newValue);
         emit("change", newValue);
         isOpen.value = false;
@@ -7261,6 +7377,7 @@ const _sfc_main$i = /* @__PURE__ */ defineComponent({
       }
     };
     const removeSelectedItem = (value) => {
+      selectedLabelsCache.value.delete(value);
       if (props.onRemoveSelected) {
         props.onRemoveSelected(value);
       } else {
@@ -7430,7 +7547,7 @@ const _sfc_main$i = /* @__PURE__ */ defineComponent({
                         option,
                         selected: isSelected(option)
                       }, () => [
-                        createElementVNode("span", _hoisted_15$1, toDisplayString(getOptionLabel(option)), 1)
+                        createElementVNode("span", _hoisted_15, toDisplayString(getOptionLabel(option)), 1)
                       ], true)
                     ]),
                     __props.multiple ? (openBlock(), createElementBlock("div", {
@@ -7489,7 +7606,7 @@ const _sfc_main$i = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const SelectDropdown = /* @__PURE__ */ _export_sfc(_sfc_main$i, [["__scopeId", "data-v-5e6f9f90"]]);
+const SelectDropdown = /* @__PURE__ */ _export_sfc(_sfc_main$i, [["__scopeId", "data-v-e3f2a508"]]);
 const _hoisted_1$e = ["aria-labelledby", "aria-describedby"];
 const _hoisted_2$e = {
   key: 0,
@@ -10477,40 +10594,18 @@ if (typeof window !== "undefined") {
 }
 const _hoisted_1 = ["accept", "disabled"];
 const _hoisted_2 = ["tabindex", "aria-label"];
-const _hoisted_3 = { class: "ina-single-file-upload__content" };
-const _hoisted_4 = { class: "ina-single-file-upload__title" };
-const _hoisted_5 = { class: "ina-single-file-upload__description" };
-const _hoisted_6 = { class: "ina-single-file-upload__progress" };
-const _hoisted_7 = { class: "ina-single-file-upload__progress-bar" };
-const _hoisted_8 = { class: "ina-single-file-upload__progress-text" };
-const _hoisted_9 = { class: "ina-single-file-upload__icon-wrapper ina-single-file-upload__icon-wrapper--file" };
-const _hoisted_10 = {
-  key: 0,
-  width: "16",
-  height: "16",
-  viewBox: "0 0 24 24",
-  fill: "none",
-  xmlns: "http://www.w3.org/2000/svg"
-};
-const _hoisted_11 = {
-  key: 1,
-  width: "16",
-  height: "16",
-  viewBox: "0 0 24 24",
-  fill: "none",
-  xmlns: "http://www.w3.org/2000/svg"
-};
-const _hoisted_12 = {
-  key: 2,
-  width: "16",
-  height: "16",
-  viewBox: "0 0 24 24",
-  fill: "none",
-  xmlns: "http://www.w3.org/2000/svg"
-};
-const _hoisted_13 = { class: "ina-single-file-upload__content" };
-const _hoisted_14 = { class: "ina-single-file-upload__title" };
-const _hoisted_15 = { class: "ina-single-file-upload__description" };
+const _hoisted_3 = { class: "ina-single-file-upload__icon-wrapper ina-single-file-upload__icon-wrapper--default" };
+const _hoisted_4 = { class: "ina-single-file-upload__content" };
+const _hoisted_5 = { class: "ina-single-file-upload__title" };
+const _hoisted_6 = { class: "ina-single-file-upload__description" };
+const _hoisted_7 = { class: "ina-single-file-upload__icon-wrapper ina-single-file-upload__icon-wrapper--default" };
+const _hoisted_8 = { class: "ina-single-file-upload__progress" };
+const _hoisted_9 = { class: "ina-single-file-upload__progress-bar" };
+const _hoisted_10 = { class: "ina-single-file-upload__progress-text" };
+const _hoisted_11 = { class: "ina-single-file-upload__icon-wrapper ina-single-file-upload__icon-wrapper--file" };
+const _hoisted_12 = { class: "ina-single-file-upload__content" };
+const _hoisted_13 = { class: "ina-single-file-upload__title" };
+const _hoisted_14 = { class: "ina-single-file-upload__description" };
 const _sfc_main = /* @__PURE__ */ defineComponent({
   __name: "SingleFileUpload",
   props: {
@@ -10548,16 +10643,28 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
         "ina-single-file-upload__container--disabled": props.disabled
       }
     ]);
-    const isPdfFile = computed(() => {
+    computed(() => {
       if (!file.value) return false;
       const fileType = file.value.type;
       const fileName = file.value.name.toLowerCase();
       return fileType === "application/pdf" || fileName.endsWith(".pdf");
     });
-    const isImageFile = computed(() => {
+    computed(() => {
       if (!file.value) return false;
       return file.value.type.startsWith("image/");
     });
+    const fileIconComponent = computed(() => {
+      if (!file.value) return null;
+      const fileType = file.value.type;
+      const fileName = file.value.name.toLowerCase();
+      if (fileType === "application/pdf" || fileName.endsWith(".pdf")) {
+        return IconFileTypePdf;
+      }
+      if (fileType.startsWith("image/")) {
+        return IconPhoto;
+      }
+      return IconFile;
+    });
     const triggerFileInput = () => {
       var _a;
       if (props.disabled || file.value) return;
@@ -10780,79 +10887,44 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
           onDrop: handleDrop
         }, [
           !file.value && status.value === "idle" ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [
-            _cache[0] || (_cache[0] = createStaticVNode('<div class="ina-single-file-upload__icon-wrapper ina-single-file-upload__icon-wrapper--default"><svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M21 15V19C21 19.5304 20.7893 20.0391 20.4142 20.4142C20.0391 20.7893 19.5304 21 19 21H5C4.46957 21 3.96086 20.7893 3.58579 20.4142C3.21071 20.0391 3 19.5304 3 19V15" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path><path d="M7 10L12 15L17 10" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path><path d="M12 15V3" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path></svg></div>', 1)),
             createElementVNode("div", _hoisted_3, [
-              createElementVNode("div", _hoisted_4, toDisplayString(props.title), 1),
-              createElementVNode("div", _hoisted_5, toDisplayString(props.description), 1)
+              createVNode(unref(IconUpload), { size: 24 })
+            ]),
+            createElementVNode("div", _hoisted_4, [
+              createElementVNode("div", _hoisted_5, toDisplayString(props.title), 1),
+              createElementVNode("div", _hoisted_6, toDisplayString(props.description), 1)
             ])
           ], 64)) : createCommentVNode("", true),
           !file.value && status.value === "uploading" ? (openBlock(), createElementBlock(Fragment, { key: 1 }, [
-            _cache[1] || (_cache[1] = createStaticVNode('<div class="ina-single-file-upload__icon-wrapper ina-single-file-upload__icon-wrapper--default"><svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M21 15V19C21 19.5304 20.7893 20.0391 20.4142 20.4142C20.0391 20.7893 19.5304 21 19 21H5C4.46957 21 3.96086 20.7893 3.58579 20.4142C3.21071 20.0391 3 19.5304 3 19V15" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path><path d="M7 10L12 15L17 10" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path><path d="M12 15V3" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path></svg></div>', 1)),
-            createElementVNode("div", _hoisted_6, [
-              createElementVNode("div", _hoisted_7, [
+            createElementVNode("div", _hoisted_7, [
+              createVNode(unref(IconUpload), { size: 24 })
+            ]),
+            createElementVNode("div", _hoisted_8, [
+              createElementVNode("div", _hoisted_9, [
                 createElementVNode("div", {
                   class: "ina-single-file-upload__progress-fill",
                   style: normalizeStyle({ width: `${progress.value}%` })
                 }, null, 4)
               ]),
-              createElementVNode("div", _hoisted_8, " Uploading... " + toDisplayString(progress.value) + "% ", 1)
+              createElementVNode("div", _hoisted_10, " Uploading... " + toDisplayString(progress.value) + "% ", 1)
             ])
           ], 64)) : createCommentVNode("", true),
           file.value && status.value === "success" ? (openBlock(), createElementBlock(Fragment, { key: 2 }, [
-            createElementVNode("div", _hoisted_9, [
-              isPdfFile.value ? (openBlock(), createElementBlock("svg", _hoisted_10, [..._cache[2] || (_cache[2] = [
-                createStaticVNode('<path d="M14 2H6C5.46957 2 4.96086 2.21071 4.58579 2.58579C4.21071 2.96086 4 3.46957 4 4V20C4 20.5304 4.21071 21.0391 4.58579 21.4142C4.96086 21.7893 5.46957 22 6 22H18C18.5304 22 19.0391 21.7893 19.4142 21.4142C19.7893 21.0391 20 20.5304 20 20V8L14 2Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path><path d="M14 2V8H20" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path><path d="M16 13H8" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path><path d="M16 17H8" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path><path d="M10 9H9H8" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>', 5)
-              ])])) : isImageFile.value ? (openBlock(), createElementBlock("svg", _hoisted_11, [..._cache[3] || (_cache[3] = [
-                createElementVNode("path", {
-                  d: "M21 19V5C21 4.46957 20.7893 3.96086 20.4142 3.58579C20.0391 3.21071 19.5304 3 19 3H5C4.46957 3 3.96086 3.21071 3.58579 3.58579C3.21071 3.96086 3 4.46957 3 5V19C3 19.5304 3.21071 20.0391 3.58579 20.4142C3.96086 20.7893 4.46957 21 5 21H19C19.5304 21 20.0391 20.7893 20.4142 20.4142C20.7893 20.0391 21 19.5304 21 19Z",
-                  stroke: "currentColor",
-                  "stroke-width": "2",
-                  "stroke-linecap": "round",
-                  "stroke-linejoin": "round"
-                }, null, -1),
-                createElementVNode("path", {
-                  d: "M9 9C9.55228 9 10 8.55228 10 8C10 7.44772 9.55228 7 9 7C8.44772 7 8 7.44772 8 8C8 8.55228 8.44772 9 9 9Z",
-                  stroke: "currentColor",
-                  "stroke-width": "2",
-                  "stroke-linecap": "round",
-                  "stroke-linejoin": "round"
-                }, null, -1),
-                createElementVNode("path", {
-                  d: "M21 15L16 10L5 21",
-                  stroke: "currentColor",
-                  "stroke-width": "2",
-                  "stroke-linecap": "round",
-                  "stroke-linejoin": "round"
-                }, null, -1)
-              ])])) : (openBlock(), createElementBlock("svg", _hoisted_12, [..._cache[4] || (_cache[4] = [
-                createElementVNode("path", {
-                  d: "M14 2H6C5.46957 2 4.96086 2.21071 4.58579 2.58579C4.21071 2.96086 4 3.46957 4 4V20C4 20.5304 4.21071 21.0391 4.58579 21.4142C4.96086 21.7893 5.46957 22 6 22H18C18.5304 22 19.0391 21.7893 19.4142 21.4142C19.7893 21.0391 20 20.5304 20 20V8L14 2Z",
-                  stroke: "currentColor",
-                  "stroke-width": "2",
-                  "stroke-linecap": "round",
-                  "stroke-linejoin": "round"
-                }, null, -1),
-                createElementVNode("path", {
-                  d: "M14 2V8H20",
-                  stroke: "currentColor",
-                  "stroke-width": "2",
-                  "stroke-linecap": "round",
-                  "stroke-linejoin": "round"
-                }, null, -1)
-              ])]))
+            createElementVNode("div", _hoisted_11, [
+              (openBlock(), createBlock(resolveDynamicComponent(fileIconComponent.value), { size: 16 }))
             ]),
-            createElementVNode("div", _hoisted_13, [
-              createElementVNode("div", _hoisted_14, toDisplayString(file.value.name), 1),
-              createElementVNode("div", _hoisted_15, toDisplayString(props.description), 1)
+            createElementVNode("div", _hoisted_12, [
+              createElementVNode("div", _hoisted_13, toDisplayString(file.value.name), 1),
+              createElementVNode("div", _hoisted_14, toDisplayString(props.description), 1)
             ]),
             createElementVNode("button", {
               type: "button",
               class: "ina-single-file-upload__delete-button",
               "aria-label": "Remove file",
               onClick: withModifiers(handleRemove, ["stop"])
-            }, [..._cache[5] || (_cache[5] = [
-              createStaticVNode('<svg width="20" height="20" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M3 6H5H21" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path><path d="M8 6V4C8 3.46957 8.21071 2.96086 8.58579 2.58579C8.96086 2.21071 9.46957 2 10 2H14C14.5304 2 15.0391 2.21071 15.4142 2.58579C15.7893 2.96086 16 3.46957 16 4V6M19 6V20C19 20.5304 18.7893 21.0391 18.4142 21.4142C18.0391 21.7893 17.5304 22 17 22H7C6.46957 22 5.96086 21.7893 5.58579 21.4142C5.21071 21.0391 5 20.5304 5 20V6H19Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path><path d="M10 11V17" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path><path d="M14 11V17" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path></svg>', 1)
-            ])])
+            }, [
+              createVNode(unref(IconTrash), { size: 18 })
+            ])
           ], 64)) : createCommentVNode("", true)
         ], 42, _hoisted_2)
       ], 2);