@idds/vue 1.3.5 → 1.4.3

package/dist/index.es.js

@@ -1,4 +1,4 @@
-import { defineComponent, inject, ref, computed, onMounted, onUnmounted, watch, createElementBlock, openBlock, normalizeClass, createElementVNode, renderSlot, createTextVNode, toDisplayString, createVNode, createCommentVNode, createBlock, resolveDynamicComponent, Transition, withCtx, provide, withModifiers, normalizeStyle, nextTick, h, unref, Fragment, renderList, mergeProps, withDirectives, vModelDynamic, withKeys, vModelText, Teleport, createStaticVNode, vModelRadio, useAttrs } from "vue";
+import { defineComponent, inject, ref, computed, onMounted, onUnmounted, watch, createElementBlock, openBlock, normalizeClass, createElementVNode, renderSlot, createTextVNode, toDisplayString, createVNode, createCommentVNode, createBlock, resolveDynamicComponent, Transition, withCtx, provide, withModifiers, normalizeStyle, nextTick, h, unref, Fragment, renderList, mergeProps, useAttrs, withDirectives, vModelDynamic, withKeys, vModelText, Teleport, createStaticVNode, vModelRadio } from "vue";
 const iddsColorTokens = {
   // Neutral Colors
   "neutral-25": "var(--ina-neutral-25)",
@@ -572,7 +572,7 @@ const _hoisted_7$j = {
   key: 0,
   class: "ina-accordion-card__subtitle"
 };
-const _hoisted_8$f = ["id", "aria-labelledby"];
+const _hoisted_8$e = ["id", "aria-labelledby"];
 const _hoisted_9$b = { class: "ina-accordion-card__body" };
 const _sfc_main$N = /* @__PURE__ */ defineComponent({
   __name: "AccordionCard",
@@ -667,7 +667,7 @@ const _sfc_main$N = /* @__PURE__ */ defineComponent({
                 createElementVNode("div", _hoisted_9$b, [
                   renderSlot(_ctx.$slots, "default", {}, void 0, true)
                 ])
-              ], 8, _hoisted_8$f)) : createCommentVNode("", true)
+              ], 8, _hoisted_8$e)) : createCommentVNode("", true)
             ]),
             _: 3
           })
@@ -1103,6 +1103,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 +1138,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
  *
@@ -1694,7 +1715,7 @@ const _hoisted_6$i = {
   class: "ina-card__avatar"
 };
 const _hoisted_7$h = ["src", "alt"];
-const _hoisted_8$e = {
+const _hoisted_8$d = {
   key: 0,
   class: "ina-card__title"
 };
@@ -1716,7 +1737,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"
 };
@@ -1843,7 +1864,7 @@ const _sfc_main$D = /* @__PURE__ */ defineComponent({
             ])
           ])) : createCommentVNode("", true),
           createElementVNode("div", null, [
-            __props.title || _ctx.$slots.title ? (openBlock(), createElementBlock("h3", _hoisted_8$e, [
+            __props.title || _ctx.$slots.title ? (openBlock(), createElementBlock("h3", _hoisted_8$d, [
               renderSlot(_ctx.$slots, "title", {}, () => [
                 createTextVNode(toDisplayString(__props.title), 1)
               ])
@@ -1888,7 +1909,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,
@@ -2317,7 +2338,7 @@ const _hoisted_4$n = {
   key: 0,
   class: "ina-text-field__prefix-icon"
 };
-const _hoisted_5$j = ["id", "type", "placeholder", "disabled", "readonly", "maxlength", "autocomplete", "spellcheck", "autocapitalize", "autocorrect", "inputmode", "dir"];
+const _hoisted_5$j = ["id", "name", "type", "placeholder", "disabled", "readonly", "maxlength", "autocomplete", "spellcheck", "autocapitalize", "autocorrect", "inputmode", "dir"];
 const _hoisted_6$g = {
   key: 1,
   class: "ina-text-field__char-count"
@@ -2354,6 +2375,7 @@ const _sfc_main$B = /* @__PURE__ */ defineComponent({
   setup(__props, { emit: __emit }) {
     const props = __props;
     const emit = __emit;
+    const attrs = useAttrs();
     const inputRef = ref();
     const inputValue = ref(getInitialValue());
     const debounceTimer = ref();
@@ -2367,9 +2389,20 @@ const _sfc_main$B = /* @__PURE__ */ defineComponent({
       }
       return value;
     }
-    const inputId = computed(
-      () => `text-field-${Math.random().toString(36).substr(2, 9)}`
-    );
+    const inputId = computed(() => {
+      const providedId = attrs.id || attrs.name;
+      if (providedId) {
+        return String(providedId);
+      }
+      if (props.label) {
+        return String(props.label).toLowerCase();
+      }
+      return `text-field-${Math.random().toString(36).substr(2, 9)}`;
+    });
+    const filteredAttrs = computed(() => {
+      const { id, name, ...rest } = attrs;
+      return rest;
+    });
     const wrapperClasses = computed(() => {
       const classes = ["ina-text-field__wrapper"];
       classes.push(`ina-text-field__wrapper--size-${props.size}`);
@@ -2538,11 +2571,12 @@ const _sfc_main$B = /* @__PURE__ */ defineComponent({
           __props.prefixIcon ? (openBlock(), createElementBlock("div", _hoisted_4$n, [
             (openBlock(), createBlock(resolveDynamicComponent(__props.prefixIcon), { size: 16 }))
           ])) : createCommentVNode("", true),
-          withDirectives(createElementVNode("input", mergeProps(_ctx.$attrs, {
+          withDirectives(createElementVNode("input", mergeProps(filteredAttrs.value, {
             id: inputId.value,
             ref_key: "inputRef",
             ref: inputRef,
             "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => inputValue.value = $event),
+            name: unref(attrs).name || void 0,
             type: __props.type,
             placeholder: __props.placeholder,
             disabled: __props.disabled,
@@ -3336,7 +3370,7 @@ 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$d = ["disabled"];
+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 = {
@@ -3355,7 +3389,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 = {
@@ -3618,7 +3652,7 @@ const _sfc_main$v = /* @__PURE__ */ defineComponent({
               class: "ina-file-upload__button",
               disabled: __props.disabled,
               onClick: withModifiers(triggerFileInput, ["stop"])
-            }, " Pilih File ", 8, _hoisted_8$d)
+            }, " Pilih File ", 8, _hoisted_8$c)
           ])
         ], 34),
         files.value.length > 0 ? (openBlock(), createElementBlock(Fragment, { key: 1 }, [
@@ -3635,27 +3669,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)
@@ -3668,7 +3702,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",
@@ -3676,7 +3710,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,
@@ -3685,7 +3719,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",
@@ -3693,7 +3727,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",
@@ -3701,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_24$1)) : createCommentVNode("", true)
                 ])
               ], 2);
@@ -3948,7 +3982,7 @@ const _hoisted_4$h = ["id"];
 const _hoisted_5$g = ["aria-label"];
 const _hoisted_6$e = { class: "ina-modal__body" };
 const _hoisted_7$e = ["id"];
-const _hoisted_8$c = {
+const _hoisted_8$b = {
   key: 1,
   class: "ina-modal__footer"
 };
@@ -4084,7 +4118,7 @@ const _sfc_main$t = /* @__PURE__ */ defineComponent({
                     }, toDisplayString(__props.description), 9, _hoisted_7$e)) : createCommentVNode("", true),
                     renderSlot(_ctx.$slots, "default", {}, void 0, true)
                   ]),
-                  __props.showFooter ? (openBlock(), createElementBlock("div", _hoisted_8$c, [
+                  __props.showFooter ? (openBlock(), createElementBlock("div", _hoisted_8$b, [
                     renderSlot(_ctx.$slots, "footer", {}, void 0, true)
                   ])) : createCommentVNode("", true)
                 ], 10, _hoisted_2$o)
@@ -4116,15 +4150,14 @@ const _hoisted_2$n = {
   key: 0,
   class: "ina-month-picker__required"
 };
-const _hoisted_3$l = { class: "ina-month-picker__wrapper" };
-const _hoisted_4$g = ["id", "disabled", "aria-expanded", "aria-labelledby"];
-const _hoisted_5$f = {
+const _hoisted_3$l = ["id", "disabled", "aria-expanded", "aria-labelledby"];
+const _hoisted_4$g = {
   key: 0,
   class: "ina-month-picker__prefix-icon"
 };
-const _hoisted_6$d = { class: "ina-month-picker__trigger-text" };
-const _hoisted_7$d = { class: "ina-month-picker__grid" };
-const _hoisted_8$b = ["disabled", "onClick", "onMouseenter"];
+const _hoisted_5$f = { class: "ina-month-picker__trigger-text" };
+const _hoisted_6$d = { class: "ina-month-picker__grid" };
+const _hoisted_7$d = ["disabled", "onClick", "onMouseenter"];
 const _sfc_main$s = /* @__PURE__ */ defineComponent({
   __name: "MonthPicker",
   props: {
@@ -4144,6 +4177,7 @@ const _sfc_main$s = /* @__PURE__ */ defineComponent({
   setup(__props, { emit: __emit }) {
     const props = __props;
     const emit = __emit;
+    const containerRef = ref();
     const triggerRef = ref();
     const panelRef = ref();
     const isOpen = ref(false);
@@ -4240,39 +4274,23 @@ const _sfc_main$s = /* @__PURE__ */ defineComponent({
         let leftValue = void 0;
         let rightValue = void 0;
         if (isMobile) {
-          const threshold = 16;
-          const triggerCenter = triggerRect.left + triggerRect.width / 2;
-          const viewportCenter = viewportWidth / 2;
-          if (triggerRect.right > viewportWidth - threshold) {
-            shouldUseRight = true;
-            rightValue = `${viewportWidth - triggerRect.right}px`;
-            leftValue = void 0;
-          } else if (triggerRect.left < threshold) {
-            shouldUseRight = false;
-            leftValue = `${triggerRect.left}px`;
-            rightValue = void 0;
-          } else if (Math.abs(triggerCenter - viewportCenter) < panelWidthValue / 2) {
-            const panelLeft = triggerRect.left - (panelWidthValue - triggerRect.width) / 2;
-            if (panelLeft < 0) {
-              leftValue = "0";
-              rightValue = void 0;
-            } else if (panelLeft + panelWidthValue > viewportWidth) {
-              rightValue = "0";
-              leftValue = void 0;
-            } else {
-              leftValue = `${panelLeft}px`;
-              rightValue = void 0;
+          const panelCenterX = viewportWidth / 2;
+          const panelLeftFromViewport = panelCenterX - panelWidthValue / 2;
+          if (containerRef.value) {
+            const containerRect = containerRef.value.getBoundingClientRect();
+            const leftRelativeToContainer = panelLeftFromViewport - containerRect.left;
+            let calculatedLeft = Math.max(0, leftRelativeToContainer);
+            const maxLeft = viewportWidth - panelWidthValue - containerRect.left;
+            if (leftRelativeToContainer > maxLeft) {
+              calculatedLeft = Math.max(0, maxLeft);
             }
+            leftValue = `${calculatedLeft}px`;
+            rightValue = void 0;
             shouldUseRight = false;
           } else {
-            shouldUseRight = panelWidthValue > availableSpaceRight;
-            if (shouldUseRight) {
-              rightValue = `${viewportWidth - triggerRect.right}px`;
-              leftValue = void 0;
-            } else {
-              leftValue = `${triggerRect.left}px`;
-              rightValue = void 0;
-            }
+            leftValue = `${Math.max(0, panelLeftFromViewport)}px`;
+            rightValue = void 0;
+            shouldUseRight = false;
           }
         } else {
           shouldUseRight = panelWidthValue > availableSpaceRight;
@@ -4377,6 +4395,8 @@ const _sfc_main$s = /* @__PURE__ */ defineComponent({
     });
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock("div", {
+        ref_key: "containerRef",
+        ref: containerRef,
         class: normalizeClass(["ina-month-picker", containerClasses.value])
       }, [
         __props.label ? (openBlock(), createElementBlock("label", {
@@ -4387,94 +4407,92 @@ const _sfc_main$s = /* @__PURE__ */ defineComponent({
           createTextVNode(toDisplayString(__props.label) + " ", 1),
           __props.required ? (openBlock(), createElementBlock("span", _hoisted_2$n, "*")) : createCommentVNode("", true)
         ], 8, _hoisted_1$o)) : createCommentVNode("", true),
-        createElementVNode("div", _hoisted_3$l, [
-          createElementVNode("button", {
-            id: triggerId.value,
-            ref_key: "triggerRef",
-            ref: triggerRef,
+        createElementVNode("button", {
+          id: triggerId.value,
+          ref_key: "triggerRef",
+          ref: triggerRef,
+          type: "button",
+          class: normalizeClass(triggerClasses.value),
+          disabled: __props.disabled || __props.readonly,
+          "aria-expanded": isOpen.value,
+          "aria-haspopup": true,
+          "aria-labelledby": __props.label ? `${triggerId.value}-label` : void 0,
+          onClick: togglePanel,
+          onKeydown: handleKeydown
+        }, [
+          __props.showIcon ? (openBlock(), createElementBlock("div", _hoisted_4$g, [..._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),
+          __props.showClearButton && selectedMonth.value !== void 0 && !__props.disabled && !__props.readonly ? (openBlock(), createElementBlock("button", {
+            key: 1,
             type: "button",
-            class: normalizeClass(triggerClasses.value),
-            disabled: __props.disabled || __props.readonly,
-            "aria-expanded": isOpen.value,
-            "aria-haspopup": true,
-            "aria-labelledby": __props.label ? `${triggerId.value}-label` : void 0,
-            onClick: togglePanel,
-            onKeydown: handleKeydown
-          }, [
-            __props.showIcon ? (openBlock(), createElementBlock("div", _hoisted_5$f, [..._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-452431d5><rect x="3" y="4" width="18" height="18" rx="2" ry="2" stroke="currentColor" stroke-width="2" data-v-452431d5></rect><line x1="16" y1="2" x2="16" y2="6" stroke="currentColor" stroke-width="2" stroke-linecap="round" data-v-452431d5></line><line x1="8" y1="2" x2="8" y2="6" stroke="currentColor" stroke-width="2" stroke-linecap="round" data-v-452431d5></line><line x1="3" y1="10" x2="21" y2="10" stroke="currentColor" stroke-width="2" stroke-linecap="round" data-v-452431d5></line></svg>', 1)
-            ])])) : createCommentVNode("", true),
-            createElementVNode("span", _hoisted_6$d, toDisplayString(selectedMonthDisplay.value || __props.placeholder), 1),
-            __props.showClearButton && selectedMonth.value !== void 0 && !__props.disabled && !__props.readonly ? (openBlock(), createElementBlock("button", {
-              key: 1,
-              type: "button",
-              class: "ina-month-picker__clear-button",
-              onClick: withModifiers(handleClear, ["stop"])
-            }, [..._cache[2] || (_cache[2] = [
-              createElementVNode("svg", {
-                width: "16",
-                height: "16",
-                viewBox: "0 0 24 24",
-                fill: "none",
-                xmlns: "http://www.w3.org/2000/svg"
-              }, [
-                createElementVNode("path", {
-                  d: "M18 6L6 18M6 6L18 18",
-                  stroke: "currentColor",
-                  "stroke-width": "2",
-                  "stroke-linecap": "round",
-                  "stroke-linejoin": "round"
-                })
-              ], -1)
-            ])])) : createCommentVNode("", true),
-            (openBlock(), createElementBlock("svg", {
-              class: normalizeClass(["ina-month-picker__chevron", { "ina-month-picker__chevron--open": isOpen.value }]),
+            class: "ina-month-picker__clear-button",
+            onClick: withModifiers(handleClear, ["stop"])
+          }, [..._cache[2] || (_cache[2] = [
+            createElementVNode("svg", {
               width: "16",
               height: "16",
               viewBox: "0 0 24 24",
               fill: "none",
               xmlns: "http://www.w3.org/2000/svg"
-            }, [..._cache[3] || (_cache[3] = [
+            }, [
               createElementVNode("path", {
-                d: "M6 9L12 15L18 9",
+                d: "M18 6L6 18M6 6L18 18",
                 stroke: "currentColor",
                 "stroke-width": "2",
                 "stroke-linecap": "round",
                 "stroke-linejoin": "round"
-              }, null, -1)
-            ])], 2))
-          ], 42, _hoisted_4$g),
-          createVNode(Transition, { name: "panel" }, {
-            default: withCtx(() => [
-              isOpen.value ? (openBlock(), createElementBlock("div", {
-                key: 0,
-                ref_key: "panelRef",
-                ref: panelRef,
-                class: normalizeClass([
-                  "ina-month-picker__panel",
-                  { "ina-month-picker__panel--open": isOpen.value },
-                  { "ina-month-picker__panel--right-aligned": useRightPositioning.value }
-                ]),
-                style: normalizeStyle(panelStyle.value)
-              }, [
-                createElementVNode("div", _hoisted_7$d, [
-                  (openBlock(), createElementBlock(Fragment, null, renderList(monthNames, (month, index2) => {
-                    return createElementVNode("button", {
-                      key: index2,
-                      type: "button",
-                      class: normalizeClass(getMonthClasses(index2)),
-                      disabled: props.disabled,
-                      onClick: ($event) => selectMonth(index2),
-                      onMouseenter: ($event) => !props.disabled && (hoveredMonth.value = index2),
-                      onMouseleave: _cache[0] || (_cache[0] = ($event) => hoveredMonth.value = null)
-                    }, toDisplayString(month), 43, _hoisted_8$b);
-                  }), 64))
-                ])
-              ], 6)) : createCommentVNode("", true)
-            ]),
-            _: 1
-          })
-        ]),
+              })
+            ], -1)
+          ])])) : createCommentVNode("", true),
+          (openBlock(), createElementBlock("svg", {
+            class: normalizeClass(["ina-month-picker__chevron", { "ina-month-picker__chevron--open": isOpen.value }]),
+            width: "16",
+            height: "16",
+            viewBox: "0 0 24 24",
+            fill: "none",
+            xmlns: "http://www.w3.org/2000/svg"
+          }, [..._cache[3] || (_cache[3] = [
+            createElementVNode("path", {
+              d: "M6 9L12 15L18 9",
+              stroke: "currentColor",
+              "stroke-width": "2",
+              "stroke-linecap": "round",
+              "stroke-linejoin": "round"
+            }, null, -1)
+          ])], 2))
+        ], 42, _hoisted_3$l),
+        createVNode(Transition, { name: "panel" }, {
+          default: withCtx(() => [
+            isOpen.value ? (openBlock(), createElementBlock("div", {
+              key: 0,
+              ref_key: "panelRef",
+              ref: panelRef,
+              class: normalizeClass([
+                "ina-month-picker__panel",
+                { "ina-month-picker__panel--open": isOpen.value },
+                { "ina-month-picker__panel--right-aligned": useRightPositioning.value }
+              ]),
+              style: normalizeStyle(panelStyle.value)
+            }, [
+              createElementVNode("div", _hoisted_6$d, [
+                (openBlock(), createElementBlock(Fragment, null, renderList(monthNames, (month, index2) => {
+                  return createElementVNode("button", {
+                    key: index2,
+                    type: "button",
+                    class: normalizeClass(getMonthClasses(index2)),
+                    disabled: props.disabled,
+                    onClick: ($event) => selectMonth(index2),
+                    onMouseenter: ($event) => !props.disabled && (hoveredMonth.value = index2),
+                    onMouseleave: _cache[0] || (_cache[0] = ($event) => hoveredMonth.value = null)
+                  }, toDisplayString(month), 43, _hoisted_7$d);
+                }), 64))
+              ])
+            ], 6)) : createCommentVNode("", true)
+          ]),
+          _: 1
+        }),
         __props.statusMessage ? (openBlock(), createElementBlock("div", {
           key: 1,
           class: normalizeClass(statusClasses.value)
@@ -4483,7 +4501,7 @@ const _sfc_main$s = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const MonthPicker = /* @__PURE__ */ _export_sfc(_sfc_main$s, [["__scopeId", "data-v-452431d5"]]);
+const MonthPicker = /* @__PURE__ */ _export_sfc(_sfc_main$s, [["__scopeId", "data-v-f53ade24"]]);
 const _hoisted_1$n = {
   key: 0,
   class: "ina-multiple-choice-grid__title"
@@ -5588,6 +5606,7 @@ const _sfc_main$k = /* @__PURE__ */ defineComponent({
   setup(__props, { emit: __emit }) {
     const props = __props;
     const emit = __emit;
+    const containerRef = ref();
     const triggerRef = ref();
     const panelRef = ref();
     const isOpen = ref(false);
@@ -5683,48 +5702,32 @@ const _sfc_main$k = /* @__PURE__ */ defineComponent({
         const panelRect = panelRef.value.getBoundingClientRect();
         const viewportWidth = window.innerWidth;
         const viewportHeight = window.innerHeight;
-        const defaultPanelWidth = 320;
+        const isMobile = viewportWidth <= 640;
+        const defaultPanelWidth = isMobile ? 200 : 320;
         const panelWidthValue = panelRect.width || defaultPanelWidth;
         const availableSpaceRight = viewportWidth - triggerRect.right;
         triggerRect.left;
-        const isMobile = viewportWidth <= 640;
         let shouldUseRight = false;
         let leftValue = void 0;
         let rightValue = void 0;
         if (isMobile) {
-          const threshold = 16;
-          const triggerCenter = triggerRect.left + triggerRect.width / 2;
-          const viewportCenter = viewportWidth / 2;
-          if (triggerRect.right > viewportWidth - threshold) {
-            shouldUseRight = true;
-            rightValue = `${viewportWidth - triggerRect.right}px`;
-            leftValue = void 0;
-          } else if (triggerRect.left < threshold) {
-            shouldUseRight = false;
-            leftValue = `${triggerRect.left}px`;
-            rightValue = void 0;
-          } else if (Math.abs(triggerCenter - viewportCenter) < panelWidthValue / 2) {
-            const panelLeft = triggerRect.left - (panelWidthValue - triggerRect.width) / 2;
-            if (panelLeft < 0) {
-              leftValue = "0";
-              rightValue = void 0;
-            } else if (panelLeft + panelWidthValue > viewportWidth) {
-              rightValue = "0";
-              leftValue = void 0;
-            } else {
-              leftValue = `${panelLeft}px`;
-              rightValue = void 0;
+          const panelCenterX = viewportWidth / 2;
+          const panelLeftFromViewport = panelCenterX - panelWidthValue / 2;
+          if (containerRef.value) {
+            const containerRect = containerRef.value.getBoundingClientRect();
+            const leftRelativeToContainer = panelLeftFromViewport - containerRect.left;
+            let calculatedLeft = Math.max(0, leftRelativeToContainer);
+            const maxLeft = viewportWidth - panelWidthValue - containerRect.left;
+            if (leftRelativeToContainer > maxLeft) {
+              calculatedLeft = Math.max(0, maxLeft);
             }
+            leftValue = `${calculatedLeft}px`;
+            rightValue = void 0;
             shouldUseRight = false;
           } else {
-            shouldUseRight = panelWidthValue > availableSpaceRight;
-            if (shouldUseRight) {
-              rightValue = `${viewportWidth - triggerRect.right}px`;
-              leftValue = void 0;
-            } else {
-              leftValue = `${triggerRect.left}px`;
-              rightValue = void 0;
-            }
+            leftValue = `${Math.max(0, panelLeftFromViewport)}px`;
+            rightValue = void 0;
+            shouldUseRight = false;
           }
         } else {
           shouldUseRight = panelWidthValue > availableSpaceRight;
@@ -5848,6 +5851,8 @@ const _sfc_main$k = /* @__PURE__ */ defineComponent({
     });
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock("div", {
+        ref_key: "containerRef",
+        ref: containerRef,
         class: normalizeClass(["ina-year-picker", containerClasses.value])
       }, [
         __props.label ? (openBlock(), createElementBlock("label", {
@@ -5873,7 +5878,7 @@ const _sfc_main$k = /* @__PURE__ */ defineComponent({
             onKeydown: handleKeydown
           }, [
             __props.showIcon ? (openBlock(), createElementBlock("div", _hoisted_5$9, [..._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-3336f854><rect x="3" y="4" width="18" height="18" rx="2" ry="2" stroke="currentColor" stroke-width="2" data-v-3336f854></rect><line x1="16" y1="2" x2="16" y2="6" stroke="currentColor" stroke-width="2" stroke-linecap="round" data-v-3336f854></line><line x1="8" y1="2" x2="8" y2="6" stroke="currentColor" stroke-width="2" stroke-linecap="round" data-v-3336f854></line><line x1="3" y1="10" x2="21" y2="10" stroke="currentColor" stroke-width="2" stroke-linecap="round" data-v-3336f854></line></svg>', 1)
+              createStaticVNode('<svg width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" data-v-6e7c1cdf><rect x="3" y="4" width="18" height="18" rx="2" ry="2" stroke="currentColor" stroke-width="2" data-v-6e7c1cdf></rect><line x1="16" y1="2" x2="16" y2="6" stroke="currentColor" stroke-width="2" stroke-linecap="round" data-v-6e7c1cdf></line><line x1="8" y1="2" x2="8" y2="6" stroke="currentColor" stroke-width="2" stroke-linecap="round" data-v-6e7c1cdf></line><line x1="3" y1="10" x2="21" y2="10" stroke="currentColor" stroke-width="2" stroke-linecap="round" data-v-6e7c1cdf></line></svg>', 1)
             ])])) : createCommentVNode("", true),
             createElementVNode("span", _hoisted_6$8, toDisplayString(selectedYear.value || __props.placeholder), 1),
             __props.showClearButton && selectedYear.value && !__props.disabled && !__props.readonly ? (openBlock(), createElementBlock("button", {
@@ -5957,7 +5962,7 @@ const _sfc_main$k = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const YearPicker = /* @__PURE__ */ _export_sfc(_sfc_main$k, [["__scopeId", "data-v-3336f854"]]);
+const YearPicker = /* @__PURE__ */ _export_sfc(_sfc_main$k, [["__scopeId", "data-v-6e7c1cdf"]]);
 const _hoisted_1$g = ["for"];
 const _hoisted_2$g = {
   key: 0,
@@ -5978,17 +5983,19 @@ 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"];
-const _hoisted_19$1 = { class: "ina-date-picker__calendar" };
-const _hoisted_20$1 = { class: "ina-date-picker__next-month-header" };
-const _hoisted_21$1 = { class: "ina-date-picker__next-month-controls" };
-const _hoisted_22 = { class: "ina-date-picker__dropdown-container" };
+const _hoisted_19$1 = { class: "ina-date-picker__day-number" };
+const _hoisted_20$1 = { class: "ina-date-picker__calendar" };
+const _hoisted_21$1 = { class: "ina-date-picker__next-month-header" };
+const _hoisted_22 = { class: "ina-date-picker__next-month-controls" };
 const _hoisted_23 = { class: "ina-date-picker__dropdown-container" };
-const _hoisted_24 = { class: "ina-date-picker__calendar-grid" };
-const _hoisted_25 = ["disabled", "onClick"];
+const _hoisted_24 = { class: "ina-date-picker__dropdown-container" };
+const _hoisted_25 = { class: "ina-date-picker__calendar-grid" };
+const _hoisted_26 = ["disabled", "onClick"];
+const _hoisted_27 = { class: "ina-date-picker__day-number" };
 const _sfc_main$j = /* @__PURE__ */ defineComponent({
   __name: "DatePicker",
   props: {
@@ -6012,7 +6019,7 @@ const _sfc_main$j = /* @__PURE__ */ defineComponent({
     disabledFutureDate: { type: Boolean },
     disabledDateBefore: {},
     disabledDateAfter: {},
-    triggerWidth: { default: "100%" },
+    triggerWidth: { default: "" },
     panelMaxHeight: { default: void 0 },
     panelClassName: { default: "" },
     triggerClassname: { default: "" },
@@ -6894,7 +6901,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,
@@ -6941,12 +6948,14 @@ const _sfc_main$j = /* @__PURE__ */ defineComponent({
                       class: normalizeClass(getDayClasses(day)),
                       disabled: isDayDisabled(day.date),
                       onClick: ($event) => selectDay(day)
-                    }, toDisplayString(day.date.getDate()), 11, _hoisted_18$1);
+                    }, [
+                      createElementVNode("span", _hoisted_19$1, toDisplayString(day.date.getDate()), 1)
+                    ], 10, _hoisted_18$1);
                   }), 128))
                 ])
               ]),
-              createElementVNode("div", _hoisted_19$1, [
-                createElementVNode("div", _hoisted_20$1, [
+              createElementVNode("div", _hoisted_20$1, [
+                createElementVNode("div", _hoisted_21$1, [
                   createElementVNode("button", {
                     type: "button",
                     class: "ina-date-picker__nav-button",
@@ -6957,8 +6966,8 @@ const _sfc_main$j = /* @__PURE__ */ defineComponent({
                       class: "ina-date-picker__nav-icon"
                     })
                   ]),
-                  createElementVNode("div", _hoisted_21$1, [
-                    createElementVNode("div", _hoisted_22, [
+                  createElementVNode("div", _hoisted_22, [
+                    createElementVNode("div", _hoisted_23, [
                       createVNode(MonthPicker, {
                         "model-value": nextMonth.value,
                         disabled: __props.disabled,
@@ -6967,7 +6976,7 @@ const _sfc_main$j = /* @__PURE__ */ defineComponent({
                         "onUpdate:modelValue": handleNextMonthChange
                       }, null, 8, ["model-value", "disabled", "readonly"])
                     ]),
-                    createElementVNode("div", _hoisted_23, [
+                    createElementVNode("div", _hoisted_24, [
                       createVNode(YearPicker, {
                         "model-value": nextYear.value,
                         "min-year": 1900,
@@ -6991,7 +7000,7 @@ const _sfc_main$j = /* @__PURE__ */ defineComponent({
                     })
                   ])
                 ]),
-                createElementVNode("div", _hoisted_24, [
+                createElementVNode("div", _hoisted_25, [
                   (openBlock(), createElementBlock(Fragment, null, renderList(dayNames, (day) => {
                     return createElementVNode("div", {
                       key: `rh-${day}`,
@@ -7005,7 +7014,9 @@ const _sfc_main$j = /* @__PURE__ */ defineComponent({
                       class: normalizeClass(getDayClasses(day)),
                       disabled: isDayDisabled(day.date),
                       onClick: ($event) => selectDay(day)
-                    }, toDisplayString(day.date.getDate()), 11, _hoisted_25);
+                    }, [
+                      createElementVNode("span", _hoisted_27, toDisplayString(day.date.getDate()), 1)
+                    ], 10, _hoisted_26);
                   }), 128))
                 ])
               ])
@@ -7020,7 +7031,7 @@ const _sfc_main$j = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const DatePicker = /* @__PURE__ */ _export_sfc(_sfc_main$j, [["__scopeId", "data-v-9cd9726e"]]);
+const DatePicker = /* @__PURE__ */ _export_sfc(_sfc_main$j, [["__scopeId", "data-v-d43f3297"]]);
 const _hoisted_1$f = ["disabled"];
 const _hoisted_2$f = {
   key: 0,
@@ -7050,7 +7061,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"
@@ -7103,7 +7114,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;
@@ -7114,6 +7125,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
@@ -7195,16 +7207,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(() => {
@@ -7231,10 +7321,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);
@@ -7255,11 +7341,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;
@@ -7271,6 +7369,7 @@ const _sfc_main$i = /* @__PURE__ */ defineComponent({
       }
     };
     const removeSelectedItem = (value) => {
+      selectedLabelsCache.value.delete(value);
       if (props.onRemoveSelected) {
         props.onRemoveSelected(value);
       } else {
@@ -7440,7 +7539,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", {
@@ -7499,7 +7598,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,
@@ -7617,10 +7716,10 @@ const _sfc_main$h = /* @__PURE__ */ defineComponent({
       return openBlock(), createBlock(Teleport, { to: "body" }, [
         createVNode(Transition, { name: "drawer" }, {
           default: withCtx(() => [
-            isOpen.value ? (openBlock(), createElementBlock("div", {
+            isOpen.value ? (openBlock(), createElementBlock("div", mergeProps({
               key: 0,
-              class: normalizeClass(["ina-drawer", drawerClasses.value])
-            }, [
+              class: ["ina-drawer", drawerClasses.value]
+            }, _ctx.$attrs), [
               createElementVNode("div", {
                 class: "ina-drawer__backdrop",
                 onClick: handleBackdropClick
@@ -7681,7 +7780,7 @@ const _sfc_main$h = /* @__PURE__ */ defineComponent({
                   renderSlot(_ctx.$slots, "footer", {}, void 0, true)
                 ])) : createCommentVNode("", true)
               ], 10, _hoisted_1$e)
-            ], 2)) : createCommentVNode("", true)
+            ], 16)) : createCommentVNode("", true)
           ]),
           _: 3
         })
@@ -7689,7 +7788,7 @@ const _sfc_main$h = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const Drawer = /* @__PURE__ */ _export_sfc(_sfc_main$h, [["__scopeId", "data-v-cdbda5b3"]]);
+const Drawer = /* @__PURE__ */ _export_sfc(_sfc_main$h, [["__scopeId", "data-v-a924d690"]]);
 const _sfc_main$g = /* @__PURE__ */ defineComponent({
   __name: "Skeleton",
   props: {
@@ -8720,7 +8819,7 @@ const _hoisted_2$8 = {
   key: 0,
   class: "ina-text-area__required"
 };
-const _hoisted_3$6 = ["id", "placeholder", "disabled", "readonly", "maxlength", "rows", "autocomplete", "spellcheck", "autocapitalize", "autocorrect", "dir"];
+const _hoisted_3$6 = ["id", "name", "placeholder", "disabled", "readonly", "maxlength", "rows", "autocomplete", "spellcheck", "autocapitalize", "autocorrect", "dir"];
 const _sfc_main$9 = /* @__PURE__ */ defineComponent({
   __name: "TextArea",
   props: {
@@ -8751,6 +8850,7 @@ const _sfc_main$9 = /* @__PURE__ */ defineComponent({
   setup(__props, { emit: __emit }) {
     const props = __props;
     const emit = __emit;
+    const attrs = useAttrs();
     const textareaRef = ref();
     const inputValue = ref(getInitialValue());
     const validationError = ref(null);
@@ -8763,9 +8863,20 @@ const _sfc_main$9 = /* @__PURE__ */ defineComponent({
       }
       return value;
     }
-    const textareaId = computed(
-      () => `text-area-${Math.random().toString(36).substr(2, 9)}`
-    );
+    const textareaId = computed(() => {
+      const providedId = attrs.id || attrs.name;
+      if (providedId) {
+        return String(providedId);
+      }
+      if (props.label) {
+        return String(props.label).toLowerCase();
+      }
+      return `text-area-${Math.random().toString(36).substr(2, 9)}`;
+    });
+    const filteredAttrs = computed(() => {
+      const { id, name, ...rest } = attrs;
+      return rest;
+    });
     const containerClasses = computed(() => {
       const classes = ["ina-text-area"];
       if (props.disabled) {
@@ -8923,11 +9034,12 @@ const _sfc_main$9 = /* @__PURE__ */ defineComponent({
         createElementVNode("div", {
           class: normalizeClass(["ina-text-area__wrapper", wrapperClasses.value])
         }, [
-          withDirectives(createElementVNode("textarea", mergeProps({
+          withDirectives(createElementVNode("textarea", mergeProps(filteredAttrs.value, {
             id: textareaId.value,
             ref_key: "textareaRef",
             ref: textareaRef,
             "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => inputValue.value = $event),
+            name: unref(attrs).name || void 0,
             placeholder: __props.placeholder,
             disabled: __props.disabled,
             readonly: __props.readonly,
@@ -8938,8 +9050,7 @@ const _sfc_main$9 = /* @__PURE__ */ defineComponent({
             autocapitalize: __props.autoCapitalize,
             autocorrect: __props.autoCorrect,
             dir: __props.dir,
-            class: textareaClasses.value
-          }, _ctx.$attrs, {
+            class: textareaClasses.value,
             onInput: handleInput,
             onBlur: handleBlur,
             onFocus: handleFocus
@@ -10475,40 +10586,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: {
@@ -10546,16 +10635,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;
@@ -10778,79 +10879,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);