@idds/vue 1.4.22 → 1.4.24

package/dist/index.es.js

@@ -413,7 +413,7 @@ const _hoisted_1$K = ["id", "aria-expanded", "aria-controls", "disabled"];
 const _hoisted_2$E = { class: "ina-accordion__title" };
 const _hoisted_3$A = { class: "ina-accordion__toggler" };
 const _hoisted_4$u = ["id", "aria-labelledby"];
-const _hoisted_5$o = { class: "ina-accordion__body" };
+const _hoisted_5$p = { class: "ina-accordion__body" };
 const _sfc_main$P = /* @__PURE__ */ defineComponent({
   __name: "Accordion",
   props: {
@@ -547,7 +547,7 @@ const _sfc_main$P = /* @__PURE__ */ defineComponent({
           class: normalizeClass(["ina-accordion__content", { "ina-accordion__content--open": isOpen.value }]),
           "aria-labelledby": headerId.value
         }, [
-          createElementVNode("div", _hoisted_5$o, [
+          createElementVNode("div", _hoisted_5$p, [
             renderSlot(_ctx.$slots, "default")
           ])
         ], 10, _hoisted_4$u)
@@ -562,13 +562,13 @@ const _hoisted_4$t = {
   key: 0,
   class: "ina-accordion-card__icon"
 };
-const _hoisted_5$n = { class: "ina-accordion-card__title-section" };
+const _hoisted_5$o = { class: "ina-accordion-card__title-section" };
 const _hoisted_6$k = { class: "ina-accordion-card__title" };
-const _hoisted_7$j = {
+const _hoisted_7$k = {
   key: 0,
   class: "ina-accordion-card__subtitle"
 };
-const _hoisted_8$e = ["id", "aria-labelledby"];
+const _hoisted_8$f = ["id", "aria-labelledby"];
 const _hoisted_9$b = { class: "ina-accordion-card__body" };
 const _sfc_main$O = /* @__PURE__ */ defineComponent({
   __name: "AccordionCard",
@@ -626,13 +626,13 @@ const _sfc_main$O = /* @__PURE__ */ defineComponent({
               __props.icon ? (openBlock(), createElementBlock("div", _hoisted_4$t, [
                 (openBlock(), createBlock(resolveDynamicComponent(__props.icon), { size: 20 }))
               ])) : createCommentVNode("", true),
-              createElementVNode("div", _hoisted_5$n, [
+              createElementVNode("div", _hoisted_5$o, [
                 createElementVNode("h3", _hoisted_6$k, [
                   renderSlot(_ctx.$slots, "title", {}, () => [
                     createTextVNode(toDisplayString(__props.title), 1)
                   ], true)
                 ]),
-                __props.subtitle ? (openBlock(), createElementBlock("p", _hoisted_7$j, toDisplayString(__props.subtitle), 1)) : createCommentVNode("", true)
+                __props.subtitle ? (openBlock(), createElementBlock("p", _hoisted_7$k, toDisplayString(__props.subtitle), 1)) : createCommentVNode("", true)
               ])
             ]),
             (openBlock(), createElementBlock("svg", {
@@ -663,7 +663,7 @@ const _sfc_main$O = /* @__PURE__ */ defineComponent({
                 createElementVNode("div", _hoisted_9$b, [
                   renderSlot(_ctx.$slots, "default", {}, void 0, true)
                 ])
-              ], 8, _hoisted_8$e)) : createCommentVNode("", true)
+              ], 8, _hoisted_8$f)) : createCommentVNode("", true)
             ]),
             _: 3
           })
@@ -1194,7 +1194,7 @@ const _hoisted_4$s = {
   key: 0,
   class: "ina-alert__title"
 };
-const _hoisted_5$m = {
+const _hoisted_5$n = {
   key: 1,
   class: "ina-alert__description"
 };
@@ -1202,7 +1202,7 @@ const _hoisted_6$j = {
   key: 2,
   class: "ina-alert__actions"
 };
-const _hoisted_7$i = ["aria-label"];
+const _hoisted_7$j = ["aria-label"];
 const _sfc_main$L = /* @__PURE__ */ defineComponent({
   __name: "Alert",
   props: {
@@ -1260,7 +1260,7 @@ const _sfc_main$L = /* @__PURE__ */ defineComponent({
         createElementVNode("div", _hoisted_2$B, [
           createElementVNode("div", _hoisted_3$x, [
             __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, [
+            _ctx.$slots.default || __props.message ? (openBlock(), createElementBlock("div", _hoisted_5$n, [
               renderSlot(_ctx.$slots, "default", {}, () => [
                 createTextVNode(toDisplayString(__props.message), 1)
               ])
@@ -1292,7 +1292,7 @@ const _sfc_main$L = /* @__PURE__ */ defineComponent({
               "stroke-linejoin": "round"
             })
           ], -1)
-        ])], 8, _hoisted_7$i)) : createCommentVNode("", true)
+        ])], 8, _hoisted_7$j)) : createCommentVNode("", true)
       ], 2);
     };
   }
@@ -1701,13 +1701,13 @@ const _hoisted_3$v = {
   class: "ina-card__media"
 };
 const _hoisted_4$q = ["src", "alt"];
-const _hoisted_5$l = { class: "ina-card__content" };
+const _hoisted_5$m = { class: "ina-card__content" };
 const _hoisted_6$i = {
   key: 0,
   class: "ina-card__avatar"
 };
-const _hoisted_7$h = ["src", "alt"];
-const _hoisted_8$d = {
+const _hoisted_7$i = ["src", "alt"];
+const _hoisted_8$e = {
   key: 0,
   class: "ina-card__title"
 };
@@ -1715,11 +1715,11 @@ const _hoisted_9$a = {
   key: 1,
   class: "ina-card__description"
 };
-const _hoisted_10$9 = {
+const _hoisted_10$a = {
   key: 1,
   class: "ina-card__button"
 };
-const _hoisted_11$9 = {
+const _hoisted_11$a = {
   key: 2,
   class: "ina-card__media"
 };
@@ -1729,11 +1729,11 @@ const _hoisted_13$6 = {
   class: "ina-card__media"
 };
 const _hoisted_14$5 = ["src", "alt"];
-const _hoisted_15$4 = {
+const _hoisted_15$5 = {
   key: 4,
   class: "ina-card__media"
 };
-const _hoisted_16$3 = ["src", "alt"];
+const _hoisted_16$4 = ["src", "alt"];
 const _hoisted_17$3 = {
   key: 0,
   class: "ina-card__header"
@@ -1841,18 +1841,18 @@ const _sfc_main$E = /* @__PURE__ */ defineComponent({
             }, null, 8, _hoisted_4$q)) : createCommentVNode("", true)
           ])
         ])) : createCommentVNode("", true),
-        createElementVNode("div", _hoisted_5$l, [
+        createElementVNode("div", _hoisted_5$m, [
           __props.avatar || _ctx.$slots.avatar ? (openBlock(), createElementBlock("div", _hoisted_6$i, [
             renderSlot(_ctx.$slots, "avatar", {}, () => [
               __props.avatar ? (openBlock(), createElementBlock("img", {
                 key: 0,
                 src: __props.avatar,
                 alt: __props.avatarAlt || "Avatar"
-              }, null, 8, _hoisted_7$h)) : createCommentVNode("", true)
+              }, null, 8, _hoisted_7$i)) : createCommentVNode("", true)
             ])
           ])) : createCommentVNode("", true),
           createElementVNode("div", null, [
-            __props.title || _ctx.$slots.title ? (openBlock(), createElementBlock("h3", _hoisted_8$d, [
+            __props.title || _ctx.$slots.title ? (openBlock(), createElementBlock("h3", _hoisted_8$e, [
               renderSlot(_ctx.$slots, "title", {}, () => [
                 typeof __props.title !== "string" && __props.title ? (openBlock(), createBlock(resolveDynamicComponent(__props.title), { key: 0 })) : typeof __props.title === "string" ? (openBlock(), createElementBlock(Fragment, { key: 1 }, [
                   createTextVNode(toDisplayString(__props.title), 1)
@@ -1867,7 +1867,7 @@ const _sfc_main$E = /* @__PURE__ */ defineComponent({
               ])
             ])) : createCommentVNode("", true)
           ]),
-          __props.showButton || _ctx.$slots.button ? (openBlock(), createElementBlock("div", _hoisted_10$9, [
+          __props.showButton || _ctx.$slots.button ? (openBlock(), createElementBlock("div", _hoisted_10$a, [
             renderSlot(_ctx.$slots, "button", {}, () => [
               __props.showButton && __props.buttonText ? (openBlock(), createBlock(_sfc_main$G, {
                 key: 0,
@@ -1883,7 +1883,7 @@ const _sfc_main$E = /* @__PURE__ */ defineComponent({
             ])
           ])) : createCommentVNode("", true)
         ]),
-        __props.variant === "basic" && computedMediaPosition.value === "bottom" ? (openBlock(), createElementBlock("div", _hoisted_11$9, [
+        __props.variant === "basic" && computedMediaPosition.value === "bottom" ? (openBlock(), createElementBlock("div", _hoisted_11$a, [
           renderSlot(_ctx.$slots, "media", {}, () => [
             __props.mediaSrc ? (openBlock(), createElementBlock("img", {
               key: 0,
@@ -1901,13 +1901,13 @@ const _sfc_main$E = /* @__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$5, [
           renderSlot(_ctx.$slots, "media", {}, () => [
             __props.mediaSrc ? (openBlock(), createElementBlock("img", {
               key: 0,
               src: __props.mediaSrc,
               alt: __props.mediaAlt || "Card media"
-            }, null, 8, _hoisted_16$3)) : createCommentVNode("", true)
+            }, null, 8, _hoisted_16$4)) : createCommentVNode("", true)
           ])
         ])) : createCommentVNode("", true),
         __props.variant !== "basic" && __props.variant !== "horizontal" && __props.variant !== "overlay" ? (openBlock(), createElementBlock(Fragment, { key: 5 }, [
@@ -1961,12 +1961,12 @@ const _hoisted_4$p = {
   fill: "none",
   xmlns: "http://www.w3.org/2000/svg"
 };
-const _hoisted_5$k = { class: "ina-checkbox__content" };
+const _hoisted_5$l = { class: "ina-checkbox__content" };
 const _hoisted_6$h = {
   key: 0,
   class: "ina-checkbox__label"
 };
-const _hoisted_7$g = {
+const _hoisted_7$h = {
   key: 1,
   class: "ina-checkbox__subtext"
 };
@@ -2101,13 +2101,13 @@ const _sfc_main$D = /* @__PURE__ */ defineComponent({
               }, null, -1)
             ])])) : createCommentVNode("", true)
           ], 2),
-          createElementVNode("div", _hoisted_5$k, [
+          createElementVNode("div", _hoisted_5$l, [
             _ctx.$slots.default || __props.label ? (openBlock(), createElementBlock("span", _hoisted_6$h, [
               renderSlot(_ctx.$slots, "default", {}, () => [
                 createTextVNode(toDisplayString(__props.label), 1)
               ])
             ])) : createCommentVNode("", true),
-            __props.subtext ? (openBlock(), createElementBlock("span", _hoisted_7$g, toDisplayString(__props.subtext), 1)) : createCommentVNode("", true)
+            __props.subtext ? (openBlock(), createElementBlock("span", _hoisted_7$h, toDisplayString(__props.subtext), 1)) : createCommentVNode("", true)
           ])
         ], 10, _hoisted_1$z),
         __props.statusMessage ? (openBlock(), createElementBlock("div", {
@@ -2326,24 +2326,27 @@ function sanitizeFileName(fileName) {
 }
 const _hoisted_1$y = { class: "ina-text-field" };
 const _hoisted_2$v = ["for"];
-const _hoisted_3$t = {
-  key: 0,
+const _hoisted_3$t = { key: 1 };
+const _hoisted_4$o = {
+  key: 2,
   class: "ina-text-field__required"
 };
-const _hoisted_4$o = {
+const _hoisted_5$k = {
   key: 0,
   class: "ina-text-field__prefix-icon"
 };
-const _hoisted_5$j = ["id", "name", "type", "placeholder", "disabled", "readonly", "maxlength", "autocomplete", "spellcheck", "autocapitalize", "autocorrect", "inputmode", "dir"];
-const _hoisted_6$g = {
+const _hoisted_6$g = ["id", "name", "type", "placeholder", "disabled", "readonly", "maxlength", "autocomplete", "spellcheck", "autocapitalize", "autocorrect", "inputmode", "dir"];
+const _hoisted_7$g = {
   key: 1,
   class: "ina-text-field__char-count"
 };
+const _hoisted_8$d = { key: 1 };
 const _sfc_main$C = /* @__PURE__ */ defineComponent({
   __name: "TextField",
   props: {
     modelValue: { default: "" },
     label: {},
+    helperText: {},
     placeholder: {},
     type: { default: "text" },
     size: { default: "md" },
@@ -2390,11 +2393,28 @@ const _sfc_main$C = /* @__PURE__ */ defineComponent({
       if (providedId) {
         return String(providedId);
       }
-      if (props.label) {
+      if (props.label && typeof props.label === "string") {
         return String(props.label).toLowerCase();
       }
       return `text-field-${Math.random().toString(36).substr(2, 9)}`;
     });
+    const labelComponent = computed(() => {
+      if (!props.label) return null;
+      if (typeof props.label === "string") return null;
+      return props.label;
+    });
+    const bottomText = computed(() => {
+      if (props.status !== "neutral" && props.statusMessage) {
+        return props.statusMessage;
+      }
+      return props.statusMessage || props.helperText;
+    });
+    const bottomTextComponent = computed(() => {
+      const text = bottomText.value;
+      if (!text) return null;
+      if (typeof text === "string") return null;
+      return text;
+    });
     const filteredAttrs = computed(() => {
       const { id, name, ...rest } = attrs;
       return rest;
@@ -2558,13 +2578,13 @@ const _sfc_main$C = /* @__PURE__ */ defineComponent({
           for: inputId.value,
           class: "ina-text-field__label"
         }, [
-          createTextVNode(toDisplayString(__props.label) + " ", 1),
-          __props.required ? (openBlock(), createElementBlock("span", _hoisted_3$t, "*")) : createCommentVNode("", true)
+          labelComponent.value ? (openBlock(), createBlock(resolveDynamicComponent(labelComponent.value), { key: 0 })) : __props.label && typeof __props.label === "string" ? (openBlock(), createElementBlock("span", _hoisted_3$t, toDisplayString(__props.label), 1)) : createCommentVNode("", true),
+          __props.required ? (openBlock(), createElementBlock("span", _hoisted_4$o, "*")) : createCommentVNode("", true)
         ], 8, _hoisted_2$v)) : createCommentVNode("", true),
         createElementVNode("div", {
           class: normalizeClass(wrapperClasses.value)
         }, [
-          __props.prefixIcon ? (openBlock(), createElementBlock("div", _hoisted_4$o, [
+          __props.prefixIcon ? (openBlock(), createElementBlock("div", _hoisted_5$k, [
             (openBlock(), createBlock(resolveDynamicComponent(__props.prefixIcon), { size: 16 }))
           ])) : createCommentVNode("", true),
           withDirectives(createElementVNode("input", mergeProps(filteredAttrs.value, {
@@ -2588,10 +2608,10 @@ const _sfc_main$C = /* @__PURE__ */ defineComponent({
             onInput: handleInput,
             onBlur: handleBlur,
             onFocus: handleFocus
-          }), null, 16, _hoisted_5$j), [
+          }), null, 16, _hoisted_6$g), [
             [vModelDynamic, inputValue.value]
           ]),
-          __props.showCharCount && __props.maxLength ? (openBlock(), createElementBlock("div", _hoisted_6$g, toDisplayString(inputValue.value.length) + "/" + toDisplayString(__props.maxLength), 1)) : createCommentVNode("", true),
+          __props.showCharCount && __props.maxLength ? (openBlock(), createElementBlock("div", _hoisted_7$g, toDisplayString(inputValue.value.length) + "/" + toDisplayString(__props.maxLength), 1)) : createCommentVNode("", true),
           __props.showClearButton && !__props.disabled && inputValue.value ? (openBlock(), createElementBlock("button", {
             key: 2,
             type: "button",
@@ -2601,10 +2621,16 @@ const _sfc_main$C = /* @__PURE__ */ defineComponent({
             createVNode(unref(IconX), { size: 16 })
           ])) : createCommentVNode("", true)
         ], 2),
-        __props.statusMessage || validationError.value ? (openBlock(), createElementBlock("div", {
+        bottomText.value || validationError.value ? (openBlock(), createElementBlock("div", {
           key: 1,
           class: normalizeClass(statusClasses.value)
-        }, toDisplayString(validationError.value || __props.statusMessage), 3)) : createCommentVNode("", true)
+        }, [
+          validationError.value ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [
+            createTextVNode(toDisplayString(validationError.value), 1)
+          ], 64)) : (openBlock(), createElementBlock(Fragment, { key: 1 }, [
+            bottomTextComponent.value ? (openBlock(), createBlock(resolveDynamicComponent(bottomTextComponent.value), { key: 0 })) : (openBlock(), createElementBlock("span", _hoisted_8$d, toDisplayString(bottomText.value), 1))
+          ], 64))
+        ], 2)) : createCommentVNode("", true)
       ]);
     };
   }
@@ -2616,7 +2642,7 @@ const _hoisted_3$s = {
   class: "ina-chip__custom-field"
 };
 const _hoisted_4$n = { key: 0 };
-const _hoisted_5$i = { key: 1 };
+const _hoisted_5$j = { key: 1 };
 const _sfc_main$B = /* @__PURE__ */ defineComponent({
   __name: "Chip",
   props: {
@@ -2730,7 +2756,7 @@ const _sfc_main$B = /* @__PURE__ */ defineComponent({
         __props.showCustomization && showInput.value ? (openBlock(), createElementBlock("div", _hoisted_3$s, [
           __props.customizationComponent ? (openBlock(), createElementBlock("div", _hoisted_4$n, [
             (openBlock(), createBlock(resolveDynamicComponent(__props.customizationComponent)))
-          ])) : (openBlock(), createElementBlock("div", _hoisted_5$i, [
+          ])) : (openBlock(), createElementBlock("div", _hoisted_5$j, [
             createVNode(_sfc_main$C, {
               "model-value": tempValue.value,
               class: "ina-chip__input",
@@ -3444,13 +3470,13 @@ const _hoisted_1$r = {
 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_5$i = { 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_10$9 = { class: "ina-file-upload__files" };
+const _hoisted_11$9 = { 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"
@@ -3463,11 +3489,11 @@ const _hoisted_14$4 = {
   key: 2,
   class: "ina-file-upload__file-icon-wrapper ina-file-upload__file-icon-wrapper--error"
 };
-const _hoisted_15$3 = {
+const _hoisted_15$4 = {
   key: 3,
   class: "ina-file-upload__file-icon-wrapper ina-file-upload__file-icon-wrapper--success"
 };
-const _hoisted_16$2 = { class: "ina-file-upload__file-info" };
+const _hoisted_16$3 = { 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 = {
@@ -3739,7 +3765,7 @@ const _sfc_main$v = /* @__PURE__ */ defineComponent({
             onChange: handleFileChange
           }), null, 16, _hoisted_3$o),
           createElementVNode("div", _hoisted_4$k, [
-            createElementVNode("div", _hoisted_5$h, [
+            createElementVNode("div", _hoisted_5$i, [
               createVNode(unref(IconUpload), { size: 24 })
             ]),
             createElementVNode("div", _hoisted_6$f, [
@@ -3755,7 +3781,7 @@ const _sfc_main$v = /* @__PURE__ */ defineComponent({
           ])
         ], 34),
         files.value.length > 0 ? (openBlock(), createElementBlock(Fragment, { key: 1 }, [
-          createElementVNode("div", _hoisted_10$8, [
+          createElementVNode("div", _hoisted_10$9, [
             (openBlock(true), createElementBlock(Fragment, null, renderList(displayedFiles.value, (uploadedFile, displayIndex) => {
               return openBlock(), createElementBlock("div", {
                 key: `${uploadedFile.file.name}-${getOriginalIndex(uploadedFile)}`,
@@ -3765,7 +3791,7 @@ const _sfc_main$v = /* @__PURE__ */ defineComponent({
                   "ina-file-upload__file--uploading": uploadedFile.status === "uploading"
                 }])
               }, [
-                createElementVNode("div", _hoisted_11$8, [
+                createElementVNode("div", _hoisted_11$9, [
                   uploadedFile.status === "uploading" ? (openBlock(), createElementBlock("div", _hoisted_12$7, [
                     createVNode(unref(IconLoader2), {
                       size: 20,
@@ -3781,14 +3807,14 @@ const _sfc_main$v = /* @__PURE__ */ defineComponent({
                       size: 20,
                       stroke: "2"
                     })
-                  ])) : uploadedFile.status === "idle" ? (openBlock(), createElementBlock("div", _hoisted_15$3, [
+                  ])) : uploadedFile.status === "idle" ? (openBlock(), createElementBlock("div", _hoisted_15$4, [
                     createVNode(unref(IconCircleCheck), {
                       size: 20,
                       stroke: "2"
                     })
                   ])) : createCommentVNode("", true)
                 ]),
-                createElementVNode("div", _hoisted_16$2, [
+                createElementVNode("div", _hoisted_16$3, [
                   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)
@@ -4078,7 +4104,7 @@ const _hoisted_3$m = {
   class: "ina-modal__header"
 };
 const _hoisted_4$i = ["id"];
-const _hoisted_5$g = ["aria-label"];
+const _hoisted_5$h = ["aria-label"];
 const _hoisted_6$e = { class: "ina-modal__body" };
 const _hoisted_7$e = ["id"];
 const _hoisted_8$b = {
@@ -4209,7 +4235,7 @@ const _sfc_main$t = /* @__PURE__ */ defineComponent({
                         size: 24,
                         class: "ina-modal__close-icon"
                       })
-                    ], 8, _hoisted_5$g)) : createCommentVNode("", true)
+                    ], 8, _hoisted_5$h)) : createCommentVNode("", true)
                   ])) : createCommentVNode("", true),
                   createElementVNode("div", _hoisted_6$e, [
                     __props.description ? (openBlock(), createElementBlock("div", {
@@ -4256,7 +4282,7 @@ const _hoisted_4$h = {
   key: 0,
   class: "ina-month-picker__prefix-icon"
 };
-const _hoisted_5$f = { class: "ina-month-picker__trigger-text" };
+const _hoisted_5$g = { 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({
@@ -4524,7 +4550,7 @@ const _sfc_main$s = /* @__PURE__ */ defineComponent({
           __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),
+          createElementVNode("span", _hoisted_5$g, toDisplayString(selectedMonthDisplay.value || __props.placeholder), 1),
           __props.showClearButton && selectedMonth.value !== void 0 && !__props.disabled && !__props.readonly ? (openBlock(), createElementBlock("button", {
             key: 1,
             type: "button",
@@ -4613,7 +4639,7 @@ const _hoisted_2$m = {
 };
 const _hoisted_3$k = { class: "ina-multiple-choice-grid__container" };
 const _hoisted_4$g = { class: "ina-multiple-choice-grid__grid" };
-const _hoisted_5$e = { class: "ina-multiple-choice-grid__header-row" };
+const _hoisted_5$f = { 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"];
 const _hoisted_8$a = ["for"];
@@ -4670,7 +4696,7 @@ const _sfc_main$r = /* @__PURE__ */ defineComponent({
         __props.subtitle ? (openBlock(), createElementBlock("div", _hoisted_2$m, toDisplayString(__props.subtitle), 1)) : createCommentVNode("", true),
         createElementVNode("div", _hoisted_3$k, [
           createElementVNode("div", _hoisted_4$g, [
-            createElementVNode("div", _hoisted_5$e, [
+            createElementVNode("div", _hoisted_5$f, [
               _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) => {
                 return openBlock(), createElementBlock("div", {
@@ -4726,16 +4752,16 @@ 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$f = { class: "ina-pagination__nav-buttons" };
-const _hoisted_5$d = ["disabled"];
+const _hoisted_5$e = ["disabled"];
 const _hoisted_6$b = ["disabled", "aria-label"];
 const _hoisted_7$b = ["onClick", "disabled", "aria-label", "aria-current"];
 const _hoisted_8$9 = ["disabled", "aria-label"];
 const _hoisted_9$8 = ["disabled"];
-const _hoisted_10$7 = {
+const _hoisted_10$8 = {
   key: 0,
   class: "ina-pagination__page-size-container"
 };
-const _hoisted_11$7 = ["value", "disabled"];
+const _hoisted_11$8 = ["value", "disabled"];
 const _hoisted_12$6 = ["value"];
 const _sfc_main$q = /* @__PURE__ */ defineComponent({
   __name: "Pagination",
@@ -4878,7 +4904,7 @@ const _sfc_main$q = /* @__PURE__ */ defineComponent({
                   "stroke-linejoin": "round"
                 })
               ], -1)
-            ])], 10, _hoisted_5$d),
+            ])], 10, _hoisted_5$e),
             createElementVNode("button", {
               type: "button",
               class: normalizeClass(["ina-pagination__nav-button", {
@@ -4973,7 +4999,7 @@ const _sfc_main$q = /* @__PURE__ */ defineComponent({
             ])], 10, _hoisted_9$8)
           ])
         ]),
-        __props.showPageSize ? (openBlock(), createElementBlock("div", _hoisted_10$7, [
+        __props.showPageSize ? (openBlock(), createElementBlock("div", _hoisted_10$8, [
           _cache[4] || (_cache[4] = createElementVNode("span", { class: "ina-pagination__page-size-label" }, " Baris per halaman ", -1)),
           createElementVNode("select", {
             value: __props.pageSize,
@@ -4989,7 +5015,7 @@ const _sfc_main$q = /* @__PURE__ */ defineComponent({
                 value: opt
               }, toDisplayString(opt), 9, _hoisted_12$6);
             }), 128))
-          ], 42, _hoisted_11$7)
+          ], 42, _hoisted_11$8)
         ])) : createCommentVNode("", true)
       ], 10, _hoisted_1$m)) : createCommentVNode("", true);
     };
@@ -4997,13 +5023,14 @@ const _sfc_main$q = /* @__PURE__ */ defineComponent({
 });
 const _hoisted_1$l = { class: "ina-password-input" };
 const _hoisted_2$k = ["for"];
-const _hoisted_3$i = {
-  key: 0,
+const _hoisted_3$i = { key: 1 };
+const _hoisted_4$e = {
+  key: 2,
   class: "ina-password-input__required"
 };
-const _hoisted_4$e = ["id", "type", "placeholder", "disabled", "readonly", "maxlength"];
-const _hoisted_5$c = ["disabled"];
-const _hoisted_6$a = {
+const _hoisted_5$d = ["id", "type", "placeholder", "disabled", "readonly", "maxlength"];
+const _hoisted_6$a = ["disabled"];
+const _hoisted_7$a = {
   key: 0,
   width: "16",
   height: "16",
@@ -5011,7 +5038,7 @@ const _hoisted_6$a = {
   fill: "none",
   xmlns: "http://www.w3.org/2000/svg"
 };
-const _hoisted_7$a = {
+const _hoisted_8$8 = {
   key: 1,
   width: "16",
   height: "16",
@@ -5019,11 +5046,12 @@ const _hoisted_7$a = {
   fill: "none",
   xmlns: "http://www.w3.org/2000/svg"
 };
-const _hoisted_8$8 = {
+const _hoisted_9$7 = {
   key: 1,
   class: "ina-password-input__status-area"
 };
-const _hoisted_9$7 = {
+const _hoisted_10$7 = { key: 1 };
+const _hoisted_11$7 = {
   key: 0,
   class: "ina-password-input__character-count"
 };
@@ -5032,6 +5060,7 @@ const _sfc_main$p = /* @__PURE__ */ defineComponent({
   props: {
     modelValue: { default: "" },
     label: {},
+    helperText: {},
     placeholder: {},
     size: { default: "md" },
     status: { default: "neutral" },
@@ -5049,7 +5078,23 @@ const _sfc_main$p = /* @__PURE__ */ defineComponent({
     const inputRef = ref();
     const inputValue = ref(props.modelValue);
     const showPassword = ref(false);
-    const inputId = computed(() => `password-input-${Math.random().toString(36).substr(2, 9)}`);
+    const bottomText = computed(() => {
+      if (props.status !== "neutral" && props.statusMessage) {
+        return props.statusMessage;
+      }
+      return props.statusMessage || props.helperText;
+    });
+    const labelComponent = computed(() => {
+      if (!props.label) return null;
+      if (typeof props.label === "string") return null;
+      return props.label;
+    });
+    const inputId = computed(() => {
+      if (props.label && typeof props.label === "string") {
+        return String(props.label).toLowerCase();
+      }
+      return `password-input-${Math.random().toString(36).substr(2, 9)}`;
+    });
     const wrapperClasses = computed(() => {
       const classes = ["ina-password-input__wrapper"];
       classes.push(`ina-password-input__wrapper--size-${props.size}`);
@@ -5109,8 +5154,8 @@ const _sfc_main$p = /* @__PURE__ */ defineComponent({
           for: inputId.value,
           class: "ina-password-input__label"
         }, [
-          createTextVNode(toDisplayString(__props.label) + " ", 1),
-          __props.required ? (openBlock(), createElementBlock("span", _hoisted_3$i, "*")) : createCommentVNode("", true)
+          labelComponent.value ? (openBlock(), createBlock(resolveDynamicComponent(labelComponent.value), { key: 0 })) : __props.label && typeof __props.label === "string" ? (openBlock(), createElementBlock("span", _hoisted_3$i, toDisplayString(__props.label), 1)) : createCommentVNode("", true),
+          __props.required ? (openBlock(), createElementBlock("span", _hoisted_4$e, "*")) : createCommentVNode("", true)
         ], 8, _hoisted_2$k)) : createCommentVNode("", true),
         createElementVNode("div", {
           class: normalizeClass(wrapperClasses.value)
@@ -5129,7 +5174,7 @@ const _sfc_main$p = /* @__PURE__ */ defineComponent({
             onInput: handleInput,
             onBlur: handleBlur,
             onFocus: handleFocus
-          }, _ctx.$attrs), null, 16, _hoisted_4$e), [
+          }, _ctx.$attrs), null, 16, _hoisted_5$d), [
             [vModelDynamic, inputValue.value]
           ]),
           createElementVNode("button", {
@@ -5138,7 +5183,7 @@ const _sfc_main$p = /* @__PURE__ */ defineComponent({
             onClick: togglePasswordVisibility,
             disabled: __props.disabled
           }, [
-            !showPassword.value ? (openBlock(), createElementBlock("svg", _hoisted_6$a, [..._cache[1] || (_cache[1] = [
+            !showPassword.value ? (openBlock(), createElementBlock("svg", _hoisted_7$a, [..._cache[1] || (_cache[1] = [
               createElementVNode("path", {
                 d: "M1 12S5 4 12 4s11 8 11 8-4 8-11 8-11-8-11-8z",
                 stroke: "currentColor",
@@ -5155,7 +5200,7 @@ const _sfc_main$p = /* @__PURE__ */ defineComponent({
                 "stroke-linecap": "round",
                 "stroke-linejoin": "round"
               }, null, -1)
-            ])])) : (openBlock(), createElementBlock("svg", _hoisted_7$a, [..._cache[2] || (_cache[2] = [
+            ])])) : (openBlock(), createElementBlock("svg", _hoisted_8$8, [..._cache[2] || (_cache[2] = [
               createElementVNode("path", {
                 d: "M17.94 17.94A10.07 10.07 0 0 1 12 20c-7 0-11-8-11-8a18.45 18.45 0 0 1 5.06-5.94M9.9 4.24A9.12 9.12 0 0 1 12 4c7 0 11 8 11 8a18.5 18.5 0 0 1-2.16 3.19m-6.72-1.07a3 3 0 1 1-4.24-4.24",
                 stroke: "currentColor",
@@ -5174,13 +5219,15 @@ const _sfc_main$p = /* @__PURE__ */ defineComponent({
                 "stroke-linejoin": "round"
               }, null, -1)
             ])]))
-          ], 8, _hoisted_5$c)
+          ], 8, _hoisted_6$a)
         ], 2),
-        __props.statusMessage ? (openBlock(), createElementBlock("div", _hoisted_8$8, [
+        bottomText.value ? (openBlock(), createElementBlock("div", _hoisted_9$7, [
           createElementVNode("div", {
             class: normalizeClass(statusClasses.value)
-          }, toDisplayString(__props.statusMessage), 3),
-          __props.showCharCount && __props.maxLength ? (openBlock(), createElementBlock("div", _hoisted_9$7, toDisplayString(inputValue.value.length) + "/" + toDisplayString(__props.maxLength), 1)) : createCommentVNode("", true)
+          }, [
+            typeof bottomText.value !== "string" ? (openBlock(), createBlock(resolveDynamicComponent(bottomText.value), { key: 0 })) : (openBlock(), createElementBlock("span", _hoisted_10$7, toDisplayString(bottomText.value), 1))
+          ], 2),
+          __props.showCharCount && __props.maxLength ? (openBlock(), createElementBlock("div", _hoisted_11$7, toDisplayString(inputValue.value.length) + "/" + toDisplayString(__props.maxLength), 1)) : createCommentVNode("", true)
         ])) : createCommentVNode("", true)
       ]);
     };
@@ -5429,24 +5476,26 @@ const COUNTRIES = [
 ];
 const _hoisted_1$k = { class: "ina-phone-input" };
 const _hoisted_2$j = ["for"];
-const _hoisted_3$h = {
-  key: 0,
+const _hoisted_3$h = { key: 1 };
+const _hoisted_4$d = {
+  key: 2,
   class: "ina-phone-input__asterisk"
 };
-const _hoisted_4$d = ["disabled"];
-const _hoisted_5$b = { class: "ina-phone-input__country-flag" };
-const _hoisted_6$9 = { class: "ina-phone-input__country-code" };
-const _hoisted_7$9 = {
+const _hoisted_5$c = ["disabled"];
+const _hoisted_6$9 = { class: "ina-phone-input__country-flag" };
+const _hoisted_7$9 = { class: "ina-phone-input__country-code" };
+const _hoisted_8$7 = {
   key: 0,
   class: "ina-phone-input__country-dropdown"
 };
-const _hoisted_8$7 = { class: "ina-phone-input__country-search" };
-const _hoisted_9$6 = { class: "ina-phone-input__country-list" };
-const _hoisted_10$6 = ["onClick"];
-const _hoisted_11$6 = { class: "ina-phone-input__country-flag" };
-const _hoisted_12$5 = { class: "ina-phone-input__country-name" };
-const _hoisted_13$4 = { class: "ina-phone-input__country-dial-code" };
-const _hoisted_14$3 = ["id", "placeholder", "disabled", "readonly"];
+const _hoisted_9$6 = { class: "ina-phone-input__country-search" };
+const _hoisted_10$6 = { class: "ina-phone-input__country-list" };
+const _hoisted_11$6 = ["onClick"];
+const _hoisted_12$5 = { class: "ina-phone-input__country-flag" };
+const _hoisted_13$4 = { class: "ina-phone-input__country-name" };
+const _hoisted_14$3 = { class: "ina-phone-input__country-dial-code" };
+const _hoisted_15$3 = ["id", "placeholder", "disabled", "readonly"];
+const _hoisted_16$2 = { key: 1 };
 const _sfc_main$o = /* @__PURE__ */ defineComponent({
   __name: "PhoneInput",
   props: {
@@ -5479,6 +5528,11 @@ const _sfc_main$o = /* @__PURE__ */ defineComponent({
     const inputId = computed(
       () => `phone-input-${Math.random().toString(36).substr(2, 9)}`
     );
+    const labelComponent = computed(() => {
+      if (!props.label) return null;
+      if (typeof props.label === "string") return null;
+      return props.label;
+    });
     const wrapperClasses = computed(() => {
       const classes = ["ina-phone-input__wrapper"];
       classes.push(`ina-phone-input__wrapper--size-${props.size}`);
@@ -5499,7 +5553,18 @@ const _sfc_main$o = /* @__PURE__ */ defineComponent({
       }
       return classes;
     });
-    const bottomText = computed(() => props.statusMessage || props.helperText);
+    const bottomText = computed(() => {
+      if (props.status !== "neutral" && props.statusMessage) {
+        return props.statusMessage;
+      }
+      return props.statusMessage || props.helperText;
+    });
+    const bottomTextComponent = computed(() => {
+      const text = bottomText.value;
+      if (!text) return null;
+      if (typeof text === "string") return null;
+      return text;
+    });
     const filteredCountries = computed(() => {
       if (!countrySearch.value) {
         return props.countries;
@@ -5611,8 +5676,8 @@ const _sfc_main$o = /* @__PURE__ */ defineComponent({
           for: inputId.value,
           class: "ina-phone-input__label"
         }, [
-          createTextVNode(toDisplayString(__props.label) + " ", 1),
-          __props.required ? (openBlock(), createElementBlock("span", _hoisted_3$h, "*")) : createCommentVNode("", true)
+          labelComponent.value ? (openBlock(), createBlock(resolveDynamicComponent(labelComponent.value), { key: 0 })) : __props.label && typeof __props.label === "string" ? (openBlock(), createElementBlock("span", _hoisted_3$h, toDisplayString(__props.label), 1)) : createCommentVNode("", true),
+          __props.required ? (openBlock(), createElementBlock("span", _hoisted_4$d, "*")) : createCommentVNode("", true)
         ], 8, _hoisted_2$j)) : createCommentVNode("", true),
         createElementVNode("div", {
           class: normalizeClass(wrapperClasses.value)
@@ -5628,8 +5693,8 @@ const _sfc_main$o = /* @__PURE__ */ defineComponent({
               onClick: toggleCountryDropdown,
               disabled: __props.disabled || __props.readonly
             }, [
-              createElementVNode("span", _hoisted_5$b, toDisplayString(selectedCountry.value.flag), 1),
-              createElementVNode("span", _hoisted_6$9, toDisplayString(selectedCountry.value.dialCode), 1),
+              createElementVNode("span", _hoisted_6$9, toDisplayString(selectedCountry.value.flag), 1),
+              createElementVNode("span", _hoisted_7$9, toDisplayString(selectedCountry.value.dialCode), 1),
               (openBlock(), createElementBlock("svg", {
                 class: normalizeClass(["ina-phone-input__country-chevron", {
                   "ina-phone-input__country-chevron--open": isCountryDropdownOpen.value
@@ -5648,11 +5713,11 @@ const _sfc_main$o = /* @__PURE__ */ defineComponent({
                   "stroke-linejoin": "round"
                 }, null, -1)
               ])], 2))
-            ], 8, _hoisted_4$d),
+            ], 8, _hoisted_5$c),
             createVNode(Transition, { name: "dropdown" }, {
               default: withCtx(() => [
-                isCountryDropdownOpen.value ? (openBlock(), createElementBlock("div", _hoisted_7$9, [
-                  createElementVNode("div", _hoisted_8$7, [
+                isCountryDropdownOpen.value ? (openBlock(), createElementBlock("div", _hoisted_8$7, [
+                  createElementVNode("div", _hoisted_9$6, [
                     withDirectives(createElementVNode("input", {
                       "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => countrySearch.value = $event),
                       ref_key: "searchInputRef",
@@ -5664,7 +5729,7 @@ const _sfc_main$o = /* @__PURE__ */ defineComponent({
                       [vModelText, countrySearch.value]
                     ])
                   ]),
-                  createElementVNode("div", _hoisted_9$6, [
+                  createElementVNode("div", _hoisted_10$6, [
                     (openBlock(true), createElementBlock(Fragment, null, renderList(filteredCountries.value, (country) => {
                       return openBlock(), createElementBlock("button", {
                         key: country.code,
@@ -5672,10 +5737,10 @@ const _sfc_main$o = /* @__PURE__ */ defineComponent({
                         class: normalizeClass(getCountryClasses(country)),
                         onClick: ($event) => selectCountry(country)
                       }, [
-                        createElementVNode("span", _hoisted_11$6, toDisplayString(country.flag), 1),
-                        createElementVNode("span", _hoisted_12$5, toDisplayString(country.name), 1),
-                        createElementVNode("span", _hoisted_13$4, toDisplayString(country.dialCode), 1)
-                      ], 10, _hoisted_10$6);
+                        createElementVNode("span", _hoisted_12$5, toDisplayString(country.flag), 1),
+                        createElementVNode("span", _hoisted_13$4, toDisplayString(country.name), 1),
+                        createElementVNode("span", _hoisted_14$3, toDisplayString(country.dialCode), 1)
+                      ], 10, _hoisted_11$6);
                     }), 128))
                   ])
                 ])) : createCommentVNode("", true)
@@ -5697,19 +5762,21 @@ const _sfc_main$o = /* @__PURE__ */ defineComponent({
             onInput: handleInput,
             onBlur: handleBlur,
             onFocus: handleFocus
-          }), null, 16, _hoisted_14$3), [
+          }), null, 16, _hoisted_15$3), [
             [vModelText, phoneNumber.value]
           ])
         ], 2),
         bottomText.value ? (openBlock(), createElementBlock("div", {
           key: 1,
           class: normalizeClass(helperTextClasses.value)
-        }, toDisplayString(bottomText.value), 3)) : createCommentVNode("", true)
+        }, [
+          bottomTextComponent.value ? (openBlock(), createBlock(resolveDynamicComponent(bottomTextComponent.value), { key: 0 })) : (openBlock(), createElementBlock("span", _hoisted_16$2, toDisplayString(bottomText.value), 1))
+        ], 2)) : createCommentVNode("", true)
       ]);
     };
   }
 });
-const PhoneInput = /* @__PURE__ */ _export_sfc(_sfc_main$o, [["__scopeId", "data-v-fc52068c"]]);
+const PhoneInput = /* @__PURE__ */ _export_sfc(_sfc_main$o, [["__scopeId", "data-v-2d50c62b"]]);
 const _hoisted_1$j = {
   key: 0,
   class: "ina-progress-bar__shimmer"
@@ -5807,7 +5874,7 @@ const _hoisted_1$i = ["disabled"];
 const _hoisted_2$i = { class: "ina-radio-input__group" };
 const _hoisted_3$g = ["for"];
 const _hoisted_4$c = ["id", "name", "value", "disabled"];
-const _hoisted_5$a = ["for"];
+const _hoisted_5$b = ["for"];
 const _sfc_main$l = /* @__PURE__ */ defineComponent({
   __name: "RadioInput",
   props: {
@@ -5912,7 +5979,7 @@ const _sfc_main$l = /* @__PURE__ */ defineComponent({
               createElementVNode("label", {
                 for: `${labelId.value}-${option.value}-${index2}`,
                 class: normalizeClass(["ina-radio-input__option-label", { "ina-radio-input__option-label--disabled": __props.disabled }])
-              }, toDisplayString(option.label), 11, _hoisted_5$a)
+              }, toDisplayString(option.label), 11, _hoisted_5$b)
             ], 2);
           }), 128))
         ]),
@@ -5931,7 +5998,7 @@ const _hoisted_2$h = {
 };
 const _hoisted_3$f = { class: "ina-year-picker__wrapper" };
 const _hoisted_4$b = ["id", "disabled", "aria-expanded", "aria-labelledby"];
-const _hoisted_5$9 = {
+const _hoisted_5$a = {
   key: 0,
   class: "ina-year-picker__prefix-icon"
 };
@@ -6235,7 +6302,7 @@ const _sfc_main$k = /* @__PURE__ */ defineComponent({
             onClick: togglePanel,
             onKeydown: handleKeydown
           }, [
-            __props.showIcon ? (openBlock(), createElementBlock("div", _hoisted_5$9, [..._cache[1] || (_cache[1] = [
+            __props.showIcon ? (openBlock(), createElementBlock("div", _hoisted_5$a, [..._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-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),
@@ -6331,7 +6398,7 @@ const _hoisted_4$a = {
   key: 0,
   class: "ina-date-picker__calendar-container"
 };
-const _hoisted_5$8 = { class: "ina-date-picker__calendar-header" };
+const _hoisted_5$9 = { class: "ina-date-picker__calendar-header" };
 const _hoisted_6$7 = { class: "ina-date-picker__header-controls" };
 const _hoisted_7$7 = { class: "ina-date-picker__dropdown-container" };
 const _hoisted_8$5 = { class: "ina-date-picker__dropdown-container" };
@@ -7176,7 +7243,7 @@ const _sfc_main$j = /* @__PURE__ */ defineComponent({
             class: normalizeClass(panelContentClasses.value)
           }, [
             __props.mode === "single" ? (openBlock(), createElementBlock("div", _hoisted_4$a, [
-              createElementVNode("div", _hoisted_5$8, [
+              createElementVNode("div", _hoisted_5$9, [
                 createElementVNode("button", {
                   type: "button",
                   class: "ina-date-picker__nav-button",
@@ -7395,7 +7462,7 @@ const _hoisted_3$d = {
   class: "ina-select-dropdown__search"
 };
 const _hoisted_4$9 = ["aria-label", "disabled"];
-const _hoisted_5$7 = {
+const _hoisted_5$8 = {
   key: 1,
   class: "ina-select-dropdown__preview"
 };
@@ -7832,7 +7899,7 @@ const _sfc_main$i = /* @__PURE__ */ defineComponent({
                   [vModelText, internalSearchTerm.value]
                 ])
               ])) : createCommentVNode("", true),
-              __props.showPreviewValue && hasSelectedItems.value ? (openBlock(), createElementBlock("div", _hoisted_5$7, [
+              __props.showPreviewValue && hasSelectedItems.value ? (openBlock(), createElementBlock("div", _hoisted_5$8, [
                 createElementVNode("div", _hoisted_6$6, [
                   __props.multiple ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [
                     (openBlock(true), createElementBlock(Fragment, null, renderList(selectedArray.value.slice(0, 3), (value, index2) => {
@@ -7954,7 +8021,7 @@ const _hoisted_2$e = {
 };
 const _hoisted_3$c = ["id"];
 const _hoisted_4$8 = ["aria-label"];
-const _hoisted_5$6 = { class: "ina-drawer__content" };
+const _hoisted_5$7 = { class: "ina-drawer__content" };
 const _hoisted_6$5 = ["id"];
 const _hoisted_7$5 = {
   key: 1,
@@ -8116,7 +8183,7 @@ const _sfc_main$h = /* @__PURE__ */ defineComponent({
                     ], -1)
                   ])], 8, _hoisted_4$8)) : createCommentVNode("", true)
                 ])) : createCommentVNode("", true),
-                createElementVNode("div", _hoisted_5$6, [
+                createElementVNode("div", _hoisted_5$7, [
                   __props.description ? (openBlock(), createElementBlock("div", {
                     key: 0,
                     id: descriptionId.value,
@@ -8259,7 +8326,7 @@ const _hoisted_4$7 = {
   key: 2,
   class: "ina-stepper__step-number"
 };
-const _hoisted_5$5 = { class: "ina-stepper__label" };
+const _hoisted_5$6 = { class: "ina-stepper__label" };
 const _sfc_main$e = /* @__PURE__ */ defineComponent({
   __name: "Stepper",
   props: {
@@ -8310,7 +8377,7 @@ const _sfc_main$e = /* @__PURE__ */ defineComponent({
                   createElementVNode("path", { d: "M5 12l5 5l10 -10" }, null, -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, [
+              createElementVNode("div", _hoisted_5$6, [
                 typeof step.label === "string" ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [
                   createTextVNode(toDisplayString(step.label), 1)
                 ], 64)) : (openBlock(), createBlock(resolveDynamicComponent(step.label), { key: 1 }))
@@ -8686,7 +8753,7 @@ const _hoisted_4$6 = {
   key: 1,
   class: "ina-table__sort-icon"
 };
-const _hoisted_5$4 = ["onClick"];
+const _hoisted_5$5 = ["onClick"];
 const _hoisted_6$4 = ["onClick"];
 const _hoisted_7$4 = { key: 0 };
 const _hoisted_8$3 = ["colspan"];
@@ -9034,7 +9101,7 @@ const _sfc_main$a = /* @__PURE__ */ defineComponent({
                             size: 16,
                             stroke: String(isSorted(col) && sortOrder.value === "asc" ? 3 : 2)
                           }, null, 8, ["stroke"])
-                        ], 10, _hoisted_5$4),
+                        ], 10, _hoisted_5$5),
                         createElementVNode("div", {
                           class: normalizeClass([
                             "ina-table__sort-button",
@@ -9150,6 +9217,7 @@ const _hoisted_3$6 = {
   class: "ina-text-area__required"
 };
 const _hoisted_4$5 = ["id", "name", "placeholder", "disabled", "readonly", "maxlength", "rows", "autocomplete", "spellcheck", "autocapitalize", "autocorrect", "dir"];
+const _hoisted_5$4 = { key: 1 };
 const _sfc_main$9 = /* @__PURE__ */ defineComponent({
   __name: "TextArea",
   props: {
@@ -9159,6 +9227,7 @@ const _sfc_main$9 = /* @__PURE__ */ defineComponent({
     size: { default: "md" },
     status: { default: "neutral" },
     statusMessage: {},
+    helperText: {},
     disabled: { type: Boolean, default: false },
     readonly: { type: Boolean, default: false },
     required: { type: Boolean, default: false },
@@ -9207,6 +9276,18 @@ const _sfc_main$9 = /* @__PURE__ */ defineComponent({
       const { id, name, ...rest } = attrs;
       return rest;
     });
+    const bottomText = computed(() => {
+      if (props.status !== "neutral" && props.statusMessage) {
+        return props.statusMessage;
+      }
+      return props.statusMessage || props.helperText;
+    });
+    const bottomTextComponent = computed(() => {
+      const text = bottomText.value;
+      if (!text) return null;
+      if (typeof text === "string") return null;
+      return text;
+    });
     const labelComponent = computed(() => {
       if (!props.label) return null;
       if (typeof props.label === "string") return null;
@@ -9405,10 +9486,16 @@ const _sfc_main$9 = /* @__PURE__ */ defineComponent({
             })
           ])) : createCommentVNode("", true)
         ], 2),
-        __props.statusMessage || validationError.value ? (openBlock(), createElementBlock("div", {
+        bottomText.value || validationError.value ? (openBlock(), createElementBlock("div", {
           key: 1,
           class: normalizeClass(statusMessageClasses.value)
-        }, toDisplayString(validationError.value || __props.statusMessage), 3)) : createCommentVNode("", true),
+        }, [
+          validationError.value ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [
+            createTextVNode(toDisplayString(validationError.value), 1)
+          ], 64)) : (openBlock(), createElementBlock(Fragment, { key: 1 }, [
+            bottomTextComponent.value ? (openBlock(), createBlock(resolveDynamicComponent(bottomTextComponent.value), { key: 0 })) : (openBlock(), createElementBlock("span", _hoisted_5$4, toDisplayString(bottomText.value), 1))
+          ], 64))
+        ], 2)) : createCommentVNode("", true),
         __props.showCharCount && __props.maxLength ? (openBlock(), createElementBlock("div", {
           key: 2,
           class: normalizeClass(charCountClasses.value)