@idds/vue 1.4.4 → 1.4.5

package/dist/index.es.js

@@ -412,7 +412,7 @@ const defaultColorTokens = {
 const _hoisted_1$J = ["id", "aria-expanded", "aria-controls", "disabled"];
 const _hoisted_2$D = { class: "ina-accordion__title" };
 const _hoisted_3$z = { class: "ina-accordion__toggler" };
-const _hoisted_4$t = ["id", "aria-labelledby"];
+const _hoisted_4$u = ["id", "aria-labelledby"];
 const _hoisted_5$o = { class: "ina-accordion__body" };
 const _sfc_main$O = /* @__PURE__ */ defineComponent({
   __name: "Accordion",
@@ -554,7 +554,7 @@ const _sfc_main$O = /* @__PURE__ */ defineComponent({
           createElementVNode("div", _hoisted_5$o, [
             renderSlot(_ctx.$slots, "default")
           ])
-        ], 10, _hoisted_4$t)
+        ], 10, _hoisted_4$u)
       ], 2);
     };
   }
@@ -562,7 +562,7 @@ const _sfc_main$O = /* @__PURE__ */ defineComponent({
 const _hoisted_1$I = { class: "ina-accordion-card__item" };
 const _hoisted_2$C = ["id", "aria-expanded", "aria-controls"];
 const _hoisted_3$y = { class: "ina-accordion-card__header-content" };
-const _hoisted_4$s = {
+const _hoisted_4$t = {
   key: 0,
   class: "ina-accordion-card__icon"
 };
@@ -627,7 +627,7 @@ const _sfc_main$N = /* @__PURE__ */ defineComponent({
             onClick: toggle
           }, [
             createElementVNode("div", _hoisted_3$y, [
-              __props.icon ? (openBlock(), createElementBlock("div", _hoisted_4$s, [
+              __props.icon ? (openBlock(), createElementBlock("div", _hoisted_4$t, [
                 (openBlock(), createBlock(resolveDynamicComponent(__props.icon), { size: 20 }))
               ])) : createCommentVNode("", true),
               createElementVNode("div", _hoisted_5$n, [
@@ -1194,7 +1194,7 @@ const _hoisted_1$F = {
 };
 const _hoisted_2$A = { class: "ina-alert__content" };
 const _hoisted_3$w = { class: "ina-alert__text-section" };
-const _hoisted_4$r = {
+const _hoisted_4$s = {
   key: 0,
   class: "ina-alert__title"
 };
@@ -1263,7 +1263,7 @@ const _sfc_main$K = /* @__PURE__ */ defineComponent({
         ])) : createCommentVNode("", true),
         createElementVNode("div", _hoisted_2$A, [
           createElementVNode("div", _hoisted_3$w, [
-            __props.title ? (openBlock(), createElementBlock("div", _hoisted_4$r, toDisplayString(__props.title), 1)) : createCommentVNode("", true),
+            __props.title ? (openBlock(), createElementBlock("div", _hoisted_4$s, toDisplayString(__props.title), 1)) : createCommentVNode("", true),
             _ctx.$slots.default || __props.message ? (openBlock(), createElementBlock("div", _hoisted_5$m, [
               renderSlot(_ctx.$slots, "default", {}, () => [
                 createTextVNode(toDisplayString(__props.message), 1)
@@ -1472,7 +1472,7 @@ const _hoisted_2$y = {
   class: "ina-breadcrumb__icon"
 };
 const _hoisted_3$v = { class: "ina-breadcrumb__text" };
-const _hoisted_4$q = {
+const _hoisted_4$r = {
   key: 0,
   class: "ina-breadcrumb__separator",
   "aria-hidden": "true"
@@ -1562,7 +1562,7 @@ const _sfc_main$G = /* @__PURE__ */ defineComponent({
                 ]),
                 _: 2
               }, 1032, ["href", "class", "onClick"])),
-              index2 < __props.items.length - 1 ? (openBlock(), createElementBlock("span", _hoisted_4$q, [
+              index2 < __props.items.length - 1 ? (openBlock(), createElementBlock("span", _hoisted_4$r, [
                 renderSlot(_ctx.$slots, "separator", {}, () => [
                   typeof computedSeparator.value === "string" ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [
                     createTextVNode(toDisplayString(computedSeparator.value), 1)
@@ -1716,7 +1716,7 @@ const _hoisted_3$u = {
   key: 1,
   class: "ina-card__media"
 };
-const _hoisted_4$p = ["src", "alt"];
+const _hoisted_4$q = ["src", "alt"];
 const _hoisted_5$l = { class: "ina-card__content" };
 const _hoisted_6$i = {
   key: 0,
@@ -1858,7 +1858,7 @@ const _sfc_main$D = /* @__PURE__ */ defineComponent({
               key: 0,
               src: __props.mediaSrc,
               alt: __props.mediaAlt || "Card media"
-            }, null, 8, _hoisted_4$p)) : createCommentVNode("", true)
+            }, null, 8, _hoisted_4$q)) : createCommentVNode("", true)
           ])
         ])) : createCommentVNode("", true),
         createElementVNode("div", _hoisted_5$l, [
@@ -1964,7 +1964,7 @@ const _hoisted_3$t = {
   fill: "none",
   xmlns: "http://www.w3.org/2000/svg"
 };
-const _hoisted_4$o = {
+const _hoisted_4$p = {
   key: 1,
   class: "ina-checkbox__icon",
   width: "14",
@@ -2103,7 +2103,7 @@ const _sfc_main$C = /* @__PURE__ */ defineComponent({
                 "stroke-linecap": "round",
                 "stroke-linejoin": "round"
               }, null, -1)
-            ])])) : __props.indeterminate ? (openBlock(), createElementBlock("svg", _hoisted_4$o, [..._cache[1] || (_cache[1] = [
+            ])])) : __props.indeterminate ? (openBlock(), createElementBlock("svg", _hoisted_4$p, [..._cache[1] || (_cache[1] = [
               createElementVNode("path", {
                 d: "M5 12H19",
                 stroke: "currentColor",
@@ -2342,7 +2342,7 @@ const _hoisted_3$s = {
   key: 0,
   class: "ina-text-field__required"
 };
-const _hoisted_4$n = {
+const _hoisted_4$o = {
   key: 0,
   class: "ina-text-field__prefix-icon"
 };
@@ -2576,7 +2576,7 @@ const _sfc_main$B = /* @__PURE__ */ defineComponent({
         createElementVNode("div", {
           class: normalizeClass(wrapperClasses.value)
         }, [
-          __props.prefixIcon ? (openBlock(), createElementBlock("div", _hoisted_4$n, [
+          __props.prefixIcon ? (openBlock(), createElementBlock("div", _hoisted_4$o, [
             (openBlock(), createBlock(resolveDynamicComponent(__props.prefixIcon), { size: 16 }))
           ])) : createCommentVNode("", true),
           withDirectives(createElementVNode("input", mergeProps(filteredAttrs.value, {
@@ -2641,7 +2641,7 @@ const _hoisted_3$r = {
   key: 0,
   class: "ina-chip__custom-field"
 };
-const _hoisted_4$m = { key: 0 };
+const _hoisted_4$n = { key: 0 };
 const _hoisted_5$i = { key: 1 };
 const _sfc_main$A = /* @__PURE__ */ defineComponent({
   __name: "Chip",
@@ -2758,7 +2758,7 @@ const _sfc_main$A = /* @__PURE__ */ defineComponent({
           }), 128))
         ]),
         __props.showCustomization && showInput.value ? (openBlock(), createElementBlock("div", _hoisted_3$r, [
-          __props.customizationComponent ? (openBlock(), createElementBlock("div", _hoisted_4$m, [
+          __props.customizationComponent ? (openBlock(), createElementBlock("div", _hoisted_4$n, [
             (openBlock(), createBlock(resolveDynamicComponent(__props.customizationComponent)))
           ])) : (openBlock(), createElementBlock("div", _hoisted_5$i, [
             createVNode(_sfc_main$B, {
@@ -2779,7 +2779,7 @@ const _sfc_main$A = /* @__PURE__ */ defineComponent({
 const _hoisted_1$v = ["id", "aria-expanded", "aria-controls"];
 const _hoisted_2$s = { class: "ina-collapse__title" };
 const _hoisted_3$q = ["id", "aria-labelledby"];
-const _hoisted_4$l = { class: "ina-collapse__body" };
+const _hoisted_4$m = { class: "ina-collapse__body" };
 const _sfc_main$z = /* @__PURE__ */ defineComponent({
   __name: "Collapse",
   props: {
@@ -2859,7 +2859,7 @@ const _sfc_main$z = /* @__PURE__ */ defineComponent({
               class: "ina-collapse__content",
               "aria-labelledby": headerId.value
             }, [
-              createElementVNode("div", _hoisted_4$l, [
+              createElementVNode("div", _hoisted_4$m, [
                 renderSlot(_ctx.$slots, "default", {}, void 0, true)
               ])
             ], 8, _hoisted_3$q)) : createCommentVNode("", true)
@@ -3037,7 +3037,7 @@ const Dropdown = /* @__PURE__ */ _export_sfc(_sfc_main$x, [["__scopeId", "data-v
 const _hoisted_1$s = { class: "ina-field-input-table__wrapper" };
 const _hoisted_2$r = { class: "ina-field-input-table__label" };
 const _hoisted_3$p = ["value"];
-const _hoisted_4$k = { class: "ina-field-input-table__actions" };
+const _hoisted_4$l = { class: "ina-field-input-table__actions" };
 const _sfc_main$w = /* @__PURE__ */ defineComponent({
   __name: "FieldInputTable",
   props: {
@@ -3097,7 +3097,7 @@ const _sfc_main$w = /* @__PURE__ */ defineComponent({
             autofocus: ""
           }, null, 40, _hoisted_3$p)
         ]),
-        createElementVNode("div", _hoisted_4$k, [
+        createElementVNode("div", _hoisted_4$l, [
           createElementVNode("button", {
             type: "button",
             onClick: handleCommit,
@@ -3372,45 +3372,46 @@ const _hoisted_1$r = {
   key: 0,
   class: "ina-file-upload__label"
 };
-const _hoisted_2$q = ["accept", "multiple", "disabled"];
-const _hoisted_3$o = { class: "ina-file-upload__content" };
-const _hoisted_4$j = { class: "ina-file-upload__icon" };
-const _hoisted_5$h = { class: "ina-file-upload__text" };
-const _hoisted_6$f = { class: "ina-file-upload__title" };
-const _hoisted_7$f = { class: "ina-file-upload__description" };
-const _hoisted_8$c = ["disabled"];
-const _hoisted_9$9 = { class: "ina-file-upload__files" };
-const _hoisted_10$8 = { class: "ina-file-upload__file-indicator" };
-const _hoisted_11$8 = {
+const _hoisted_2$q = { key: 1 };
+const _hoisted_3$o = ["id", "accept", "multiple", "disabled"];
+const _hoisted_4$k = { class: "ina-file-upload__content" };
+const _hoisted_5$h = { class: "ina-file-upload__icon" };
+const _hoisted_6$f = { class: "ina-file-upload__text" };
+const _hoisted_7$f = { class: "ina-file-upload__title" };
+const _hoisted_8$c = { class: "ina-file-upload__description" };
+const _hoisted_9$9 = ["disabled"];
+const _hoisted_10$8 = { class: "ina-file-upload__files" };
+const _hoisted_11$8 = { class: "ina-file-upload__file-indicator" };
+const _hoisted_12$7 = {
   key: 0,
   class: "ina-file-upload__file-icon-wrapper ina-file-upload__file-icon-wrapper--uploading"
 };
-const _hoisted_12$7 = {
+const _hoisted_13$5 = {
   key: 1,
   class: "ina-file-upload__file-icon-wrapper ina-file-upload__file-icon-wrapper--success"
 };
-const _hoisted_13$5 = {
+const _hoisted_14$4 = {
   key: 2,
   class: "ina-file-upload__file-icon-wrapper ina-file-upload__file-icon-wrapper--error"
 };
-const _hoisted_14$4 = {
+const _hoisted_15$2 = {
   key: 3,
   class: "ina-file-upload__file-icon-wrapper ina-file-upload__file-icon-wrapper--success"
 };
-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 = {
+const _hoisted_16$2 = { class: "ina-file-upload__file-info" };
+const _hoisted_17$2 = { class: "ina-file-upload__file-name" };
+const _hoisted_18$2 = { class: "ina-file-upload__file-size" };
+const _hoisted_19$2 = {
   key: 0,
   class: "ina-file-upload__file-error"
 };
-const _hoisted_19$2 = { class: "ina-file-upload__file-actions" };
-const _hoisted_20$2 = ["onClick"];
+const _hoisted_20$2 = { class: "ina-file-upload__file-actions" };
 const _hoisted_21$2 = ["onClick"];
 const _hoisted_22$1 = ["onClick"];
 const _hoisted_23$1 = ["onClick"];
 const _hoisted_24$1 = ["onClick"];
-const _hoisted_25$1 = {
+const _hoisted_25$1 = ["onClick"];
+const _hoisted_26$1 = {
   key: 2,
   class: "ina-file-upload__errors"
 };
@@ -3435,17 +3436,39 @@ const _sfc_main$v = /* @__PURE__ */ defineComponent({
   emits: ["change", "remove"],
   setup(__props, { emit: __emit }) {
     const props = __props;
+    const attrs = useAttrs();
     const fileInputRef = ref();
     const files = ref([]);
     const isDragOver = ref(false);
     const validationErrors = ref([]);
     const showAllFiles = ref(false);
+    const inputId = computed(() => {
+      const providedId = attrs.id || attrs.name;
+      return providedId ? String(providedId) : void 0;
+    });
+    const filteredAttrs = computed(() => {
+      const {
+        id,
+        name,
+        type,
+        multiple,
+        disabled,
+        class: classAttr,
+        ...rest
+      } = attrs;
+      return rest;
+    });
     const displayedFiles = computed(() => {
       if (props.multiple && files.value.length > 5 && !showAllFiles.value) {
         return files.value.slice(0, 5);
       }
       return files.value;
     });
+    const labelComponent = computed(() => {
+      if (!props.label) return null;
+      if (typeof props.label === "string") return null;
+      return props.label;
+    });
     const getOriginalIndex = (uploadedFile) => {
       return files.value.findIndex(
         (f) => f.file.name === uploadedFile.file.name && f.file.size === uploadedFile.file.size && f.status === uploadedFile.status
@@ -3629,7 +3652,9 @@ const _sfc_main$v = /* @__PURE__ */ defineComponent({
       return openBlock(), createElementBlock("div", {
         class: normalizeClass(["ina-file-upload", uploadClasses.value])
       }, [
-        __props.label ? (openBlock(), createElementBlock("div", _hoisted_1$r, toDisplayString(__props.label), 1)) : createCommentVNode("", true),
+        __props.label ? (openBlock(), createElementBlock("div", _hoisted_1$r, [
+          labelComponent.value ? (openBlock(), createBlock(resolveDynamicComponent(labelComponent.value), { key: 0 })) : __props.label && typeof __props.label === "string" ? (openBlock(), createElementBlock("span", _hoisted_2$q, toDisplayString(__props.label), 1)) : createCommentVNode("", true)
+        ])) : createCommentVNode("", true),
         createElementVNode("div", {
           class: normalizeClass(["ina-file-upload__dropzone", dropzoneClasses.value]),
           onClick: triggerFileInput,
@@ -3637,7 +3662,8 @@ const _sfc_main$v = /* @__PURE__ */ defineComponent({
           onDragleave: handleDragLeave,
           onDrop: handleDrop
         }, [
-          createElementVNode("input", {
+          createElementVNode("input", mergeProps(filteredAttrs.value, {
+            id: inputId.value,
             ref_key: "fileInputRef",
             ref: fileInputRef,
             type: "file",
@@ -3646,25 +3672,25 @@ const _sfc_main$v = /* @__PURE__ */ defineComponent({
             disabled: __props.disabled,
             class: "ina-file-upload__input",
             onChange: handleFileChange
-          }, null, 40, _hoisted_2$q),
-          createElementVNode("div", _hoisted_3$o, [
-            createElementVNode("div", _hoisted_4$j, [
+          }), null, 16, _hoisted_3$o),
+          createElementVNode("div", _hoisted_4$k, [
+            createElementVNode("div", _hoisted_5$h, [
               createVNode(unref(IconUpload), { size: 24 })
             ]),
-            createElementVNode("div", _hoisted_5$h, [
-              createElementVNode("div", _hoisted_6$f, toDisplayString(__props.title), 1),
-              createElementVNode("div", _hoisted_7$f, toDisplayString(__props.description), 1)
+            createElementVNode("div", _hoisted_6$f, [
+              createElementVNode("div", _hoisted_7$f, toDisplayString(__props.title), 1),
+              createElementVNode("div", _hoisted_8$c, toDisplayString(__props.description), 1)
             ]),
             createElementVNode("button", {
               type: "button",
               class: "ina-file-upload__button",
               disabled: __props.disabled,
               onClick: withModifiers(triggerFileInput, ["stop"])
-            }, " Pilih File ", 8, _hoisted_8$c)
+            }, " Pilih File ", 8, _hoisted_9$9)
           ])
         ], 34),
         files.value.length > 0 ? (openBlock(), createElementBlock(Fragment, { key: 1 }, [
-          createElementVNode("div", _hoisted_9$9, [
+          createElementVNode("div", _hoisted_10$8, [
             (openBlock(true), createElementBlock(Fragment, null, renderList(displayedFiles.value, (uploadedFile, displayIndex) => {
               return openBlock(), createElementBlock("div", {
                 key: `${uploadedFile.file.name}-${getOriginalIndex(uploadedFile)}`,
@@ -3674,35 +3700,35 @@ const _sfc_main$v = /* @__PURE__ */ defineComponent({
                   "ina-file-upload__file--uploading": uploadedFile.status === "uploading"
                 }])
               }, [
-                createElementVNode("div", _hoisted_10$8, [
-                  uploadedFile.status === "uploading" ? (openBlock(), createElementBlock("div", _hoisted_11$8, [
+                createElementVNode("div", _hoisted_11$8, [
+                  uploadedFile.status === "uploading" ? (openBlock(), createElementBlock("div", _hoisted_12$7, [
                     createVNode(unref(IconLoader2), {
                       size: 20,
                       class: "ina-file-upload__file-icon--spinning"
                     })
-                  ])) : uploadedFile.status === "success" ? (openBlock(), createElementBlock("div", _hoisted_12$7, [
+                  ])) : uploadedFile.status === "success" ? (openBlock(), createElementBlock("div", _hoisted_13$5, [
                     createVNode(unref(IconCircleCheck), {
                       size: 20,
                       stroke: "2"
                     })
-                  ])) : uploadedFile.status === "error" ? (openBlock(), createElementBlock("div", _hoisted_13$5, [
+                  ])) : uploadedFile.status === "error" ? (openBlock(), createElementBlock("div", _hoisted_14$4, [
                     createVNode(unref(IconCircleX), {
                       size: 20,
                       stroke: "2"
                     })
-                  ])) : uploadedFile.status === "idle" ? (openBlock(), createElementBlock("div", _hoisted_14$4, [
+                  ])) : uploadedFile.status === "idle" ? (openBlock(), createElementBlock("div", _hoisted_15$2, [
                     createVNode(unref(IconCircleCheck), {
                       size: 20,
                       stroke: "2"
                     })
                   ])) : createCommentVNode("", true)
                 ]),
-                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)
+                createElementVNode("div", _hoisted_16$2, [
+                  createElementVNode("div", _hoisted_17$2, toDisplayString(unref(sanitizeFileName)(uploadedFile.file.name)), 1),
+                  createElementVNode("div", _hoisted_18$2, toDisplayString(unref(formatFileSize)(uploadedFile.file.size)), 1),
+                  uploadedFile.error ? (openBlock(), createElementBlock("div", _hoisted_19$2, toDisplayString(uploadedFile.error), 1)) : createCommentVNode("", true)
                 ]),
-                createElementVNode("div", _hoisted_19$2, [
+                createElementVNode("div", _hoisted_20$2, [
                   uploadedFile.status === "error" ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [
                     createElementVNode("button", {
                       title: "Coba lagi",
@@ -3711,7 +3737,7 @@ const _sfc_main$v = /* @__PURE__ */ defineComponent({
                       onClick: ($event) => updateFileStatus(getOriginalIndex(uploadedFile), "idle")
                     }, [
                       createVNode(unref(IconRotateClockwise), { size: 20 })
-                    ], 8, _hoisted_20$2),
+                    ], 8, _hoisted_21$2),
                     createElementVNode("button", {
                       title: "Hapus file",
                       type: "button",
@@ -3719,7 +3745,7 @@ const _sfc_main$v = /* @__PURE__ */ defineComponent({
                       onClick: ($event) => removeFile(getOriginalIndex(uploadedFile))
                     }, [
                       createVNode(unref(IconTrash), { size: 20 })
-                    ], 8, _hoisted_21$2)
+                    ], 8, _hoisted_22$1)
                   ], 64)) : uploadedFile.status === "uploading" ? (openBlock(), createElementBlock("button", {
                     key: 1,
                     title: "Batalkan upload",
@@ -3728,7 +3754,7 @@ const _sfc_main$v = /* @__PURE__ */ defineComponent({
                     onClick: ($event) => removeFile(getOriginalIndex(uploadedFile))
                   }, [
                     createVNode(unref(IconX), { size: 20 })
-                  ], 8, _hoisted_22$1)) : uploadedFile.status === "success" ? (openBlock(), createElementBlock("button", {
+                  ], 8, _hoisted_23$1)) : uploadedFile.status === "success" ? (openBlock(), createElementBlock("button", {
                     key: 2,
                     title: "Hapus file",
                     type: "button",
@@ -3736,7 +3762,7 @@ const _sfc_main$v = /* @__PURE__ */ defineComponent({
                     onClick: ($event) => removeFile(getOriginalIndex(uploadedFile))
                   }, [
                     createVNode(unref(IconTrash), { size: 20 })
-                  ], 8, _hoisted_23$1)) : uploadedFile.status === "idle" ? (openBlock(), createElementBlock("button", {
+                  ], 8, _hoisted_24$1)) : uploadedFile.status === "idle" ? (openBlock(), createElementBlock("button", {
                     key: 3,
                     title: "Hapus file",
                     type: "button",
@@ -3744,7 +3770,7 @@ const _sfc_main$v = /* @__PURE__ */ defineComponent({
                     onClick: ($event) => removeFile(getOriginalIndex(uploadedFile))
                   }, [
                     createVNode(unref(IconTrash), { size: 20 })
-                  ], 8, _hoisted_24$1)) : createCommentVNode("", true)
+                  ], 8, _hoisted_25$1)) : createCommentVNode("", true)
                 ])
               ], 2);
             }), 128))
@@ -3776,7 +3802,7 @@ const _sfc_main$v = /* @__PURE__ */ defineComponent({
             ])], 2))
           ])) : createCommentVNode("", true)
         ], 64)) : createCommentVNode("", true),
-        validationErrors.value.length > 0 ? (openBlock(), createElementBlock("div", _hoisted_25$1, [
+        validationErrors.value.length > 0 ? (openBlock(), createElementBlock("div", _hoisted_26$1, [
           (openBlock(true), createElementBlock(Fragment, null, renderList(validationErrors.value, (error, index2) => {
             return openBlock(), createElementBlock("div", {
               key: index2,
@@ -3794,7 +3820,7 @@ const _hoisted_2$p = {
   class: "ina-input-search__required"
 };
 const _hoisted_3$n = { class: "ina-input-search__wrapper" };
-const _hoisted_4$i = ["id", "placeholder", "disabled", "readonly", "maxlength"];
+const _hoisted_4$j = ["id", "placeholder", "disabled", "readonly", "maxlength"];
 const _sfc_main$u = /* @__PURE__ */ defineComponent({
   __name: "InputSearch",
   props: {
@@ -3946,7 +3972,7 @@ const _sfc_main$u = /* @__PURE__ */ defineComponent({
             onBlur: handleBlur,
             onFocus: handleFocus,
             onKeydown: withKeys(handleSearch, ["enter"])
-          }), null, 16, _hoisted_4$i), [
+          }), null, 16, _hoisted_4$j), [
             [vModelText, inputValue.value]
           ]),
           inputValue.value && __props.showClearButton ? (openBlock(), createElementBlock("button", {
@@ -3986,7 +4012,7 @@ const _hoisted_3$m = {
   key: 0,
   class: "ina-modal__header"
 };
-const _hoisted_4$h = ["id"];
+const _hoisted_4$i = ["id"];
 const _hoisted_5$g = ["aria-label"];
 const _hoisted_6$e = { class: "ina-modal__body" };
 const _hoisted_7$e = ["id"];
@@ -4104,7 +4130,7 @@ const _sfc_main$t = /* @__PURE__ */ defineComponent({
                       renderSlot(_ctx.$slots, "title", {}, () => [
                         createTextVNode(toDisplayString(__props.title), 1)
                       ], true)
-                    ], 8, _hoisted_4$h),
+                    ], 8, _hoisted_4$i),
                     __props.showCloseButton ? (openBlock(), createElementBlock("button", {
                       key: 0,
                       type: "button",
@@ -4159,7 +4185,7 @@ const _hoisted_2$n = {
   class: "ina-month-picker__required"
 };
 const _hoisted_3$l = ["id", "disabled", "aria-expanded", "aria-labelledby"];
-const _hoisted_4$g = {
+const _hoisted_4$h = {
   key: 0,
   class: "ina-month-picker__prefix-icon"
 };
@@ -4428,7 +4454,7 @@ const _sfc_main$s = /* @__PURE__ */ defineComponent({
           onClick: togglePanel,
           onKeydown: handleKeydown
         }, [
-          __props.showIcon ? (openBlock(), createElementBlock("div", _hoisted_4$g, [..._cache[1] || (_cache[1] = [
+          __props.showIcon ? (openBlock(), createElementBlock("div", _hoisted_4$h, [..._cache[1] || (_cache[1] = [
             createStaticVNode('<svg width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" data-v-f53ade24><rect x="3" y="4" width="18" height="18" rx="2" ry="2" stroke="currentColor" stroke-width="2" data-v-f53ade24></rect><line x1="16" y1="2" x2="16" y2="6" stroke="currentColor" stroke-width="2" stroke-linecap="round" data-v-f53ade24></line><line x1="8" y1="2" x2="8" y2="6" stroke="currentColor" stroke-width="2" stroke-linecap="round" data-v-f53ade24></line><line x1="3" y1="10" x2="21" y2="10" stroke="currentColor" stroke-width="2" stroke-linecap="round" data-v-f53ade24></line></svg>', 1)
           ])])) : createCommentVNode("", true),
           createElementVNode("span", _hoisted_5$f, toDisplayString(selectedMonthDisplay.value || __props.placeholder), 1),
@@ -4519,7 +4545,7 @@ const _hoisted_2$m = {
   class: "ina-multiple-choice-grid__subtitle"
 };
 const _hoisted_3$k = { class: "ina-multiple-choice-grid__container" };
-const _hoisted_4$f = { class: "ina-multiple-choice-grid__grid" };
+const _hoisted_4$g = { class: "ina-multiple-choice-grid__grid" };
 const _hoisted_5$e = { class: "ina-multiple-choice-grid__header-row" };
 const _hoisted_6$c = { class: "ina-multiple-choice-grid__row-label" };
 const _hoisted_7$c = ["id", "name", "value", "disabled"];
@@ -4576,7 +4602,7 @@ const _sfc_main$r = /* @__PURE__ */ defineComponent({
         __props.title ? (openBlock(), createElementBlock("div", _hoisted_1$n, toDisplayString(__props.title), 1)) : createCommentVNode("", true),
         __props.subtitle ? (openBlock(), createElementBlock("div", _hoisted_2$m, toDisplayString(__props.subtitle), 1)) : createCommentVNode("", true),
         createElementVNode("div", _hoisted_3$k, [
-          createElementVNode("div", _hoisted_4$f, [
+          createElementVNode("div", _hoisted_4$g, [
             createElementVNode("div", _hoisted_5$e, [
               _cache[1] || (_cache[1] = createElementVNode("div", { class: "ina-multiple-choice-grid__header-cell ina-multiple-choice-grid__header-cell--empty" }, null, -1)),
               (openBlock(true), createElementBlock(Fragment, null, renderList(__props.columns, (column, colIndex) => {
@@ -4632,7 +4658,7 @@ const _sfc_main$r = /* @__PURE__ */ defineComponent({
 const _hoisted_1$m = ["aria-label"];
 const _hoisted_2$l = { class: "ina-pagination__nav-container" };
 const _hoisted_3$j = { class: "ina-pagination__page-info" };
-const _hoisted_4$e = { class: "ina-pagination__nav-buttons" };
+const _hoisted_4$f = { class: "ina-pagination__nav-buttons" };
 const _hoisted_5$d = ["disabled"];
 const _hoisted_6$b = ["disabled", "aria-label"];
 const _hoisted_7$b = ["onClick", "disabled", "aria-label", "aria-current"];
@@ -4758,7 +4784,7 @@ const _sfc_main$q = /* @__PURE__ */ defineComponent({
       }, [
         createElementVNode("div", _hoisted_2$l, [
           createElementVNode("div", _hoisted_3$j, " Halaman " + toDisplayString(currentPage.value) + " dari " + toDisplayString(__props.totalPages), 1),
-          createElementVNode("div", _hoisted_4$e, [
+          createElementVNode("div", _hoisted_4$f, [
             createElementVNode("button", {
               type: "button",
               class: normalizeClass(["ina-pagination__nav-button", {
@@ -4908,7 +4934,7 @@ const _hoisted_3$i = {
   key: 0,
   class: "ina-password-input__required"
 };
-const _hoisted_4$d = ["id", "type", "placeholder", "disabled", "readonly", "maxlength"];
+const _hoisted_4$e = ["id", "type", "placeholder", "disabled", "readonly", "maxlength"];
 const _hoisted_5$c = ["disabled"];
 const _hoisted_6$a = {
   key: 0,
@@ -5036,7 +5062,7 @@ const _sfc_main$p = /* @__PURE__ */ defineComponent({
             onInput: handleInput,
             onBlur: handleBlur,
             onFocus: handleFocus
-          }, _ctx.$attrs), null, 16, _hoisted_4$d), [
+          }, _ctx.$attrs), null, 16, _hoisted_4$e), [
             [vModelDynamic, inputValue.value]
           ]),
           createElementVNode("button", {
@@ -5099,7 +5125,7 @@ const _hoisted_2$j = {
   class: "ina-phone-input__required"
 };
 const _hoisted_3$h = { class: "ina-phone-input__wrapper" };
-const _hoisted_4$c = { class: "ina-phone-input__country-selector" };
+const _hoisted_4$d = { class: "ina-phone-input__country-selector" };
 const _hoisted_5$b = { class: "ina-phone-input__country-flag" };
 const _hoisted_6$9 = { class: "ina-phone-input__country-code" };
 const _hoisted_7$9 = {
@@ -5267,7 +5293,7 @@ const _sfc_main$o = /* @__PURE__ */ defineComponent({
           __props.required ? (openBlock(), createElementBlock("span", _hoisted_2$j, "*")) : createCommentVNode("", true)
         ], 8, _hoisted_1$k)) : createCommentVNode("", true),
         createElementVNode("div", _hoisted_3$h, [
-          createElementVNode("div", _hoisted_4$c, [
+          createElementVNode("div", _hoisted_4$d, [
             createElementVNode("button", {
               type: "button",
               class: "ina-phone-input__country-button",
@@ -5456,7 +5482,7 @@ const _sfc_main$m = /* @__PURE__ */ defineComponent({
 const _hoisted_1$i = ["disabled"];
 const _hoisted_2$i = { class: "ina-radio-input__group" };
 const _hoisted_3$g = ["for"];
-const _hoisted_4$b = ["id", "name", "value", "disabled"];
+const _hoisted_4$c = ["id", "name", "value", "disabled"];
 const _hoisted_5$a = ["for"];
 const _sfc_main$l = /* @__PURE__ */ defineComponent({
   __name: "RadioInput",
@@ -5556,7 +5582,7 @@ const _sfc_main$l = /* @__PURE__ */ defineComponent({
                 onChange: handleChange,
                 onFocus: handleFocus,
                 onBlur: handleBlur
-              }), null, 16, _hoisted_4$b), [
+              }), null, 16, _hoisted_4$c), [
                 [vModelRadio, selectedValue.value]
               ]),
               createElementVNode("label", {
@@ -5580,7 +5606,7 @@ const _hoisted_2$h = {
   class: "ina-year-picker__required"
 };
 const _hoisted_3$f = { class: "ina-year-picker__wrapper" };
-const _hoisted_4$a = ["id", "disabled", "aria-expanded", "aria-labelledby"];
+const _hoisted_4$b = ["id", "disabled", "aria-expanded", "aria-labelledby"];
 const _hoisted_5$9 = {
   key: 0,
   class: "ina-year-picker__prefix-icon"
@@ -5911,7 +5937,7 @@ const _sfc_main$k = /* @__PURE__ */ defineComponent({
                 })
               ], -1)
             ])])) : createCommentVNode("", true)
-          ], 42, _hoisted_4$a),
+          ], 42, _hoisted_4$b),
           createVNode(Transition, { name: "panel" }, {
             default: withCtx(() => [
               isOpen.value ? (openBlock(), createElementBlock("div", {
@@ -5977,7 +6003,7 @@ const _hoisted_2$g = {
   class: "ina-date-picker__required"
 };
 const _hoisted_3$e = ["id", "disabled"];
-const _hoisted_4$9 = {
+const _hoisted_4$a = {
   key: 0,
   class: "ina-date-picker__calendar-container"
 };
@@ -6830,7 +6856,7 @@ const _sfc_main$j = /* @__PURE__ */ defineComponent({
           createElementVNode("div", {
             class: normalizeClass(panelContentClasses.value)
           }, [
-            __props.mode === "single" ? (openBlock(), createElementBlock("div", _hoisted_4$9, [
+            __props.mode === "single" ? (openBlock(), createElementBlock("div", _hoisted_4$a, [
               createElementVNode("div", _hoisted_5$8, [
                 createElementVNode("button", {
                   type: "button",
@@ -7049,7 +7075,7 @@ const _hoisted_3$d = {
   key: 0,
   class: "ina-select-dropdown__search"
 };
-const _hoisted_4$8 = ["aria-label", "disabled"];
+const _hoisted_4$9 = ["aria-label", "disabled"];
 const _hoisted_5$7 = {
   key: 1,
   class: "ina-select-dropdown__preview"
@@ -7488,7 +7514,7 @@ const _sfc_main$i = /* @__PURE__ */ defineComponent({
                   disabled: __props.disabled,
                   class: normalizeClass(searchInputClasses.value),
                   onInput: handleSearchInput
-                }, null, 42, _hoisted_4$8), [
+                }, null, 42, _hoisted_4$9), [
                   [vModelText, internalSearchTerm.value]
                 ])
               ])) : createCommentVNode("", true),
@@ -7613,7 +7639,7 @@ const _hoisted_2$e = {
   class: "ina-drawer__header"
 };
 const _hoisted_3$c = ["id"];
-const _hoisted_4$7 = ["aria-label"];
+const _hoisted_4$8 = ["aria-label"];
 const _hoisted_5$6 = { class: "ina-drawer__content" };
 const _hoisted_6$5 = ["id"];
 const _hoisted_7$5 = {
@@ -7774,7 +7800,7 @@ const _sfc_main$h = /* @__PURE__ */ defineComponent({
                         "stroke-linejoin": "round"
                       })
                     ], -1)
-                  ])], 8, _hoisted_4$7)) : createCommentVNode("", true)
+                  ])], 8, _hoisted_4$8)) : createCommentVNode("", true)
                 ])) : createCommentVNode("", true),
                 createElementVNode("div", _hoisted_5$6, [
                   __props.description ? (openBlock(), createElementBlock("div", {
@@ -7919,7 +7945,7 @@ const _hoisted_3$a = {
   "stroke-linecap": "round",
   "stroke-linejoin": "round"
 };
-const _hoisted_4$6 = {
+const _hoisted_4$7 = {
   key: 2,
   class: "ina-stepper__step-number"
 };
@@ -7974,7 +8000,7 @@ const _sfc_main$e = /* @__PURE__ */ defineComponent({
                     fill: "none"
                   }, null, -1),
                   createElementVNode("path", { d: "M5 12l5 5l10 -10" }, null, -1)
-                ])])) : step.icon ? (openBlock(), createBlock(resolveDynamicComponent(step.icon), { key: 1 })) : (openBlock(), createElementBlock("span", _hoisted_4$6, toDisplayString(index2 + 1), 1))
+                ])])) : step.icon ? (openBlock(), createBlock(resolveDynamicComponent(step.icon), { key: 1 })) : (openBlock(), createElementBlock("span", _hoisted_4$7, toDisplayString(index2 + 1), 1))
               ]),
               createElementVNode("div", _hoisted_5$5, [
                 typeof step.label === "string" ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [
@@ -8360,7 +8386,7 @@ const _hoisted_2$9 = {
   class: "ina-table__header-cell"
 };
 const _hoisted_3$7 = { class: "ina-table__sort-controls" };
-const _hoisted_4$5 = {
+const _hoisted_4$6 = {
   key: 1,
   class: "ina-table__sort-icon"
 };
@@ -8701,7 +8727,7 @@ const _sfc_main$a = /* @__PURE__ */ defineComponent({
                         isSorted: isSorted(col),
                         sortOrder: sortOrder.value,
                         handleSort: (order) => handleSort(col, order)
-                      }) : (openBlock(), createElementBlock("div", _hoisted_4$5, [
+                      }) : (openBlock(), createElementBlock("div", _hoisted_4$6, [
                         createElementVNode("div", {
                           class: normalizeClass([
                             "ina-table__sort-button",
@@ -8823,11 +8849,12 @@ const _sfc_main$a = /* @__PURE__ */ defineComponent({
   }
 });
 const _hoisted_1$8 = ["for"];
-const _hoisted_2$8 = {
-  key: 0,
+const _hoisted_2$8 = { key: 1 };
+const _hoisted_3$6 = {
+  key: 2,
   class: "ina-text-area__required"
 };
-const _hoisted_3$6 = ["id", "name", "placeholder", "disabled", "readonly", "maxlength", "rows", "autocomplete", "spellcheck", "autocapitalize", "autocorrect", "dir"];
+const _hoisted_4$5 = ["id", "name", "placeholder", "disabled", "readonly", "maxlength", "rows", "autocomplete", "spellcheck", "autocapitalize", "autocorrect", "dir"];
 const _sfc_main$9 = /* @__PURE__ */ defineComponent({
   __name: "TextArea",
   props: {
@@ -8885,6 +8912,11 @@ const _sfc_main$9 = /* @__PURE__ */ defineComponent({
       const { id, name, ...rest } = attrs;
       return rest;
     });
+    const labelComponent = computed(() => {
+      if (!props.label) return null;
+      if (typeof props.label === "string") return null;
+      return props.label;
+    });
     const containerClasses = computed(() => {
       const classes = ["ina-text-area"];
       if (props.disabled) {
@@ -9036,8 +9068,8 @@ const _sfc_main$9 = /* @__PURE__ */ defineComponent({
           for: textareaId.value,
           class: "ina-text-area__label"
         }, [
-          createTextVNode(toDisplayString(__props.label) + " ", 1),
-          __props.required ? (openBlock(), createElementBlock("span", _hoisted_2$8, "*")) : createCommentVNode("", true)
+          labelComponent.value ? (openBlock(), createBlock(resolveDynamicComponent(labelComponent.value), { key: 0 })) : __props.label && typeof __props.label === "string" ? (openBlock(), createElementBlock("span", _hoisted_2$8, toDisplayString(__props.label), 1)) : createCommentVNode("", true),
+          __props.required ? (openBlock(), createElementBlock("span", _hoisted_3$6, "*")) : createCommentVNode("", true)
         ], 8, _hoisted_1$8)) : createCommentVNode("", true),
         createElementVNode("div", {
           class: normalizeClass(["ina-text-area__wrapper", wrapperClasses.value])
@@ -9062,7 +9094,7 @@ const _sfc_main$9 = /* @__PURE__ */ defineComponent({
             onInput: handleInput,
             onBlur: handleBlur,
             onFocus: handleFocus
-          }), null, 16, _hoisted_3$6), [
+          }), null, 16, _hoisted_4$5), [
             [vModelText, inputValue.value]
           ]),
           __props.showClearButton && inputValue.value !== "" && !__props.disabled ? (openBlock(), createElementBlock("button", {
@@ -10323,7 +10355,7 @@ const _sfc_main$2 = /* @__PURE__ */ defineComponent({
       return openBlock(), createElementBlock("div", {
         class: normalizeClass(["ina-toggle", toggleClasses.value])
       }, [
-        createElementVNode("input", mergeProps({
+        createElementVNode("input", mergeProps(filteredAttrs.value, {
           id: inputId.value,
           ref_key: "inputRef",
           ref: inputRef,
@@ -10331,8 +10363,7 @@ const _sfc_main$2 = /* @__PURE__ */ defineComponent({
           type: "checkbox",
           disabled: __props.disabled,
           readonly: __props.readonly,
-          class: "ina-toggle__input"
-        }, filteredAttrs.value, {
+          class: "ina-toggle__input",
           onChange: handleChange,
           onFocus: handleFocus,
           onBlur: handleBlur
@@ -10592,7 +10623,7 @@ function initializeTheme(brandName) {
 if (typeof window !== "undefined") {
   initializeTheme();
 }
-const _hoisted_1 = ["accept", "disabled"];
+const _hoisted_1 = ["id", "accept", "disabled"];
 const _hoisted_2 = ["tabindex", "aria-label"];
 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" };
@@ -10624,12 +10655,21 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
   setup(__props, { emit: __emit }) {
     const props = __props;
     const emit = __emit;
+    const attrs = useAttrs();
     const fileInputRef = ref();
     const file = ref(null);
     const internalProgress = ref(0);
     const internalStatus = ref("idle");
     const error = ref(null);
     const isActive = ref(false);
+    const inputId = computed(() => {
+      const providedId = attrs.id || attrs.name;
+      return providedId ? String(providedId) : void 0;
+    });
+    const filteredAttrs = computed(() => {
+      const { id, name, type, accept, disabled, class: classAttr, ...rest } = attrs;
+      return rest;
+    });
     const progress = computed(
       () => props.progress !== void 0 ? props.progress : internalProgress.value
     );
@@ -10865,7 +10905,8 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       return openBlock(), createElementBlock("div", {
         class: normalizeClass(["ina-single-file-upload", props.className])
       }, [
-        createElementVNode("input", {
+        createElementVNode("input", mergeProps(filteredAttrs.value, {
+          id: inputId.value,
           ref_key: "fileInputRef",
           ref: fileInputRef,
           type: "file",
@@ -10873,7 +10914,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
           disabled: props.disabled,
           class: "ina-single-file-upload__input",
           onChange: handleFileChange
-        }, null, 40, _hoisted_1),
+        }), null, 16, _hoisted_1),
         createElementVNode("div", {
           class: normalizeClass(containerClasses.value),
           role: "button",