@idds/vue 1.4.21 → 1.4.23

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: {
@@ -422,8 +422,7 @@ const _sfc_main$P = /* @__PURE__ */ defineComponent({
     defaultOpen: { type: Boolean, default: false },
     open: { type: Boolean, default: void 0 },
     onToggle: {},
-    disabled: { type: Boolean, default: false },
-    className: { default: "" }
+    disabled: { type: Boolean, default: false }
   },
   emits: ["toggle"],
   setup(__props, { emit: __emit }) {
@@ -456,9 +455,6 @@ const _sfc_main$P = /* @__PURE__ */ defineComponent({
     const contentId = computed(() => `accordion-content-${itemId.value}`);
     const accordionClasses = computed(() => {
       const classes = ["ina-accordion"];
-      if (props.className) {
-        classes.push(props.className);
-      }
       if (props.disabled) {
         classes.push("ina-accordion--disabled");
       }
@@ -551,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)
@@ -566,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",
@@ -630,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", {
@@ -667,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
           })
@@ -1198,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"
 };
@@ -1206,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: {
@@ -1264,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)
               ])
@@ -1296,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);
     };
   }
@@ -1309,21 +1305,21 @@ const _sfc_main$K = /* @__PURE__ */ defineComponent({
     alt: { default: "Avatar" },
     initials: { default: "" },
     size: { default: 32 },
-    shape: { default: "circle" },
-    className: { default: "" }
+    shape: { default: "circle" }
   },
   setup(__props) {
     const props = __props;
     const imageError = ref(false);
     const imageLoaded = ref(false);
     const avatarClasses = computed(() => {
-      const classes = ["ina-avatar", `ina-avatar--${props.size}`, `ina-avatar--${props.shape}`];
+      const classes = [
+        "ina-avatar",
+        `ina-avatar--${props.size}`,
+        `ina-avatar--${props.shape}`
+      ];
       if (props.src && !imageError.value) {
         classes.push("ina-avatar--image");
       }
-      if (props.className) {
-        classes.push(props.className);
-      }
       return classes;
     });
     const handleImageError = () => {
@@ -1365,8 +1361,7 @@ const _sfc_main$J = /* @__PURE__ */ defineComponent({
     size: { default: "md" },
     rounded: { default: "full" },
     prefixIcon: {},
-    suffixIcon: {},
-    className: { default: "" }
+    suffixIcon: {}
   },
   setup(__props) {
     const props = __props;
@@ -1378,9 +1373,6 @@ const _sfc_main$J = /* @__PURE__ */ defineComponent({
         `ina-badge--${props.size}`,
         `ina-badge--rounded-${props.rounded}`
       ];
-      if (props.className) {
-        classes.push(props.className);
-      }
       return classes;
     });
     return (_ctx, _cache) => {
@@ -1585,8 +1577,7 @@ const _sfc_main$G = /* @__PURE__ */ defineComponent({
     prefixIcon: {},
     suffixIcon: {},
     disabled: { type: Boolean, default: false },
-    type: { default: "button" },
-    className: { default: "" }
+    type: { default: "button" }
   },
   emits: ["click"],
   setup(__props) {
@@ -1595,9 +1586,6 @@ const _sfc_main$G = /* @__PURE__ */ defineComponent({
       const classes = ["ina-button"];
       classes.push(`ina-button--${props.hierarchy}`);
       classes.push(`ina-button--${props.size}`);
-      if (props.className) {
-        classes.push(props.className);
-      }
       return classes;
     });
     const renderIcon = (icon, wrapperClass) => {
@@ -1637,7 +1625,6 @@ const _sfc_main$F = /* @__PURE__ */ defineComponent({
     options: {},
     modelValue: {},
     disabled: { type: Boolean, default: false },
-    className: { default: "" },
     name: {}
   },
   emits: ["update:modelValue", "change"],
@@ -1649,9 +1636,6 @@ const _sfc_main$F = /* @__PURE__ */ defineComponent({
       if (props.disabled) {
         classes.push("ina-button-group--disabled");
       }
-      if (props.className) {
-        classes.push(props.className);
-      }
       return classes;
     });
     const isSelected = (option) => {
@@ -1717,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"
 };
@@ -1731,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"
 };
@@ -1745,11 +1729,11 @@ const _hoisted_13$6 = {
   class: "ina-card__media"
 };
 const _hoisted_14$5 = ["src", "alt"];
-const _hoisted_15$3 = {
+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"
@@ -1793,8 +1777,7 @@ const _sfc_main$E = /* @__PURE__ */ defineComponent({
     showFooter: { type: Boolean, default: false },
     hoverable: { type: Boolean, default: false },
     clickable: { type: Boolean, default: false },
-    size: { default: "md" },
-    className: { default: "" }
+    size: { default: "md" }
   },
   emits: ["buttonClick", "click"],
   setup(__props, { emit: __emit }) {
@@ -1831,9 +1814,6 @@ const _sfc_main$E = /* @__PURE__ */ defineComponent({
       if (props.showFooter) {
         classes.push("ina-card--with-footer");
       }
-      if (props.className) {
-        classes.push(props.className);
-      }
       return classes;
     });
     const handleButtonClick = () => {
@@ -1861,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)
@@ -1887,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,
@@ -1903,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,
@@ -1921,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$3, [
+        __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 }, [
@@ -1981,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"
 };
@@ -2121,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", {
@@ -2346,19 +2326,21 @@ 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: {
@@ -2410,11 +2392,16 @@ 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 filteredAttrs = computed(() => {
       const { id, name, ...rest } = attrs;
       return rest;
@@ -2578,13 +2565,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, {
@@ -2608,10 +2595,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",
@@ -2624,7 +2611,13 @@ const _sfc_main$C = /* @__PURE__ */ defineComponent({
         __props.statusMessage || 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 }, [
+            typeof __props.statusMessage !== "string" ? (openBlock(), createBlock(resolveDynamicComponent(__props.statusMessage), { key: 0 })) : (openBlock(), createElementBlock("span", _hoisted_8$d, toDisplayString(__props.statusMessage), 1))
+          ], 64))
+        ], 2)) : createCommentVNode("", true)
       ]);
     };
   }
@@ -2636,7 +2629,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: {
@@ -2647,8 +2640,7 @@ const _sfc_main$B = /* @__PURE__ */ defineComponent({
     onSelect: {},
     showCustomization: { type: Boolean, default: false },
     customizationLabel: { default: "Kustomisasi" },
-    customizationComponent: {},
-    className: { default: "" }
+    customizationComponent: {}
   },
   emits: ["select"],
   setup(__props, { emit: __emit }) {
@@ -2690,9 +2682,6 @@ const _sfc_main$B = /* @__PURE__ */ defineComponent({
     );
     const chipContainerClasses = computed(() => {
       const classes = ["ina-chip"];
-      if (props.className) {
-        classes.push(props.className);
-      }
       return classes;
     });
     const getChipItemClasses = (opt, index2) => {
@@ -2754,7 +2743,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",
@@ -2780,8 +2769,7 @@ const _sfc_main$A = /* @__PURE__ */ defineComponent({
     diameter: { default: 20 },
     strokeWidth: { default: 3 },
     variant: { default: "primary" },
-    trackColor: { default: "#EAECF0" },
-    className: { default: "" }
+    trackColor: { default: "#EAECF0" }
   },
   setup(__props) {
     const props = __props;
@@ -2797,7 +2785,7 @@ const _sfc_main$A = /* @__PURE__ */ defineComponent({
     const isCustomColor = computed(() => props.variant.startsWith("#"));
     const containerClasses = computed(() => {
       const variantClass = !isCustomColor.value ? `ina-circle-progress-bar--${props.variant}` : "";
-      return ["ina-circle-progress-bar", variantClass, props.className].filter(Boolean).join(" ");
+      return ["ina-circle-progress-bar", variantClass].filter(Boolean).join(" ");
     });
     const containerStyle = computed(() => {
       const style = {
@@ -2983,7 +2971,6 @@ const _sfc_main$x = /* @__PURE__ */ defineComponent({
     trigger: {},
     triggerText: { default: "Dropdown" },
     items: {},
-    className: { default: "" },
     dropdownClassName: { default: "" },
     dropdownStyle: {},
     disabled: { type: Boolean, default: false },
@@ -3000,9 +2987,6 @@ const _sfc_main$x = /* @__PURE__ */ defineComponent({
     });
     const containerClasses = computed(() => {
       const classes = ["ina-dropdown"];
-      if (props.className) {
-        classes.push(props.className);
-      }
       return classes;
     });
     const triggerClasses = computed(() => {
@@ -3136,7 +3120,7 @@ const _sfc_main$x = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const Dropdown = /* @__PURE__ */ _export_sfc(_sfc_main$x, [["__scopeId", "data-v-caab13f9"]]);
+const Dropdown = /* @__PURE__ */ _export_sfc(_sfc_main$x, [["__scopeId", "data-v-3db9a074"]]);
 const _hoisted_1$s = { class: "ina-field-input-table__wrapper" };
 const _hoisted_2$r = { class: "ina-field-input-table__label" };
 const _hoisted_3$p = ["value"];
@@ -3148,19 +3132,14 @@ const _sfc_main$w = /* @__PURE__ */ defineComponent({
     onChange: {},
     onCommit: {},
     onCancel: {},
-    placeholder: { default: "" },
-    className: { default: "" }
+    placeholder: { default: "" }
   },
   emits: ["change", "commit", "cancel"],
   setup(__props, { emit: __emit }) {
-    const props = __props;
     const emit = __emit;
     const inputRef = ref(null);
     const containerClasses = computed(() => {
       const classes = ["ina-field-input-table"];
-      if (props.className) {
-        classes.push(props.className);
-      }
       return classes.join(" ");
     });
     const handleKeyDown = (e) => {
@@ -3478,13 +3457,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"
@@ -3497,11 +3476,11 @@ const _hoisted_14$4 = {
   key: 2,
   class: "ina-file-upload__file-icon-wrapper ina-file-upload__file-icon-wrapper--error"
 };
-const _hoisted_15$2 = {
+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 = {
@@ -3532,7 +3511,6 @@ const _sfc_main$v = /* @__PURE__ */ defineComponent({
     maxTotalSizeMB: { default: void 0 },
     validateMagicNumber: { type: Boolean, default: true },
     disabled: { type: Boolean, default: false },
-    className: { default: "" },
     onChange: {},
     onRemove: {}
   },
@@ -3579,9 +3557,6 @@ const _sfc_main$v = /* @__PURE__ */ defineComponent({
     };
     const uploadClasses = computed(() => {
       const classes = ["ina-file-upload"];
-      if (props.className) {
-        classes.push(props.className);
-      }
       if (props.disabled) {
         classes.push("ina-file-upload--disabled");
       }
@@ -3777,7 +3752,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, [
@@ -3793,7 +3768,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)}`,
@@ -3803,7 +3778,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,
@@ -3819,14 +3794,14 @@ const _sfc_main$v = /* @__PURE__ */ defineComponent({
                       size: 20,
                       stroke: "2"
                     })
-                  ])) : uploadedFile.status === "idle" ? (openBlock(), createElementBlock("div", _hoisted_15$2, [
+                  ])) : 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)
@@ -4116,7 +4091,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 = {
@@ -4247,7 +4222,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", {
@@ -4294,7 +4269,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({
@@ -4562,7 +4537,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",
@@ -4651,7 +4626,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"];
@@ -4708,7 +4683,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", {
@@ -4764,16 +4739,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",
@@ -4916,7 +4891,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", {
@@ -5011,7 +4986,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,
@@ -5027,7 +5002,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);
     };
@@ -5035,13 +5010,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",
@@ -5049,7 +5025,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",
@@ -5057,11 +5033,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"
 };
@@ -5087,7 +5064,17 @@ 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 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}`);
@@ -5147,8 +5134,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)
@@ -5167,7 +5154,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", {
@@ -5176,7 +5163,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",
@@ -5193,7 +5180,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",
@@ -5212,13 +5199,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, [
+        __props.statusMessage ? (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 __props.statusMessage !== "string" ? (openBlock(), createBlock(resolveDynamicComponent(__props.statusMessage), { key: 0 })) : (openBlock(), createElementBlock("span", _hoisted_10$7, toDisplayString(__props.statusMessage), 1))
+          ], 2),
+          __props.showCharCount && __props.maxLength ? (openBlock(), createElementBlock("div", _hoisted_11$7, toDisplayString(inputValue.value.length) + "/" + toDisplayString(__props.maxLength), 1)) : createCommentVNode("", true)
         ])) : createCommentVNode("", true)
       ]);
     };
@@ -5467,24 +5456,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: {
@@ -5517,6 +5508,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}`);
@@ -5649,8 +5645,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)
@@ -5666,8 +5662,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
@@ -5686,11 +5682,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",
@@ -5702,7 +5698,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,
@@ -5710,10 +5706,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)
@@ -5735,19 +5731,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)
+        }, [
+          typeof bottomText.value !== "string" ? (openBlock(), createBlock(resolveDynamicComponent(bottomText.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-89171b69"]]);
 const _hoisted_1$j = {
   key: 0,
   class: "ina-progress-bar__shimmer"
@@ -5760,8 +5758,7 @@ const _sfc_main$n = /* @__PURE__ */ defineComponent({
     duration: { default: 1e3 },
     variant: { default: "primary" },
     height: { default: "sm" },
-    shimmer: { type: Boolean, default: true },
-    className: { default: "" }
+    shimmer: { type: Boolean, default: true }
   },
   setup(__props) {
     const props = __props;
@@ -5773,9 +5770,6 @@ const _sfc_main$n = /* @__PURE__ */ defineComponent({
       if (!props.visible) {
         classes.push("ina-progress-bar--hidden");
       }
-      if (props.className) {
-        classes.push(props.className);
-      }
       return classes.join(" ");
     });
     const fillClasses = computed(() => {
@@ -5819,8 +5813,7 @@ const _sfc_main$m = /* @__PURE__ */ defineComponent({
   __name: "LinearProgressIndicator",
   props: {
     value: { default: 0 },
-    visible: { type: Boolean, default: true },
-    className: { default: "" }
+    visible: { type: Boolean, default: true }
   },
   setup(__props) {
     const props = __props;
@@ -5829,9 +5822,6 @@ const _sfc_main$m = /* @__PURE__ */ defineComponent({
     });
     const containerClasses = computed(() => {
       const classes = ["ina-linear-progress-indicator"];
-      if (props.className) {
-        classes.push(props.className);
-      }
       return classes.join(" ");
     });
     return (_ctx, _cache) => {
@@ -5853,7 +5843,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: {
@@ -5958,7 +5948,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))
         ]),
@@ -5977,7 +5967,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"
 };
@@ -6281,7 +6271,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),
@@ -6377,7 +6367,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" };
@@ -6387,7 +6377,7 @@ const _hoisted_11$4 = { class: "ina-date-picker__day-number" };
 const _hoisted_12$3 = { class: "ina-date-picker__calendar-container" };
 const _hoisted_13$3 = { class: "ina-date-picker__calendar-header" };
 const _hoisted_14$2 = { class: "ina-date-picker__header-controls" };
-const _hoisted_15$1 = { class: "ina-date-picker__dropdown-container" };
+const _hoisted_15$2 = { 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"];
@@ -6427,8 +6417,7 @@ const _sfc_main$j = /* @__PURE__ */ defineComponent({
     panelMaxHeight: { default: void 0 },
     panelClassName: { default: "" },
     triggerClassname: { default: "" },
-    popperPlacement: { default: "bottom-start" },
-    className: {}
+    popperPlacement: { default: "bottom-start" }
   },
   emits: ["update:modelValue", "change", "clear"],
   setup(__props, { emit: __emit }) {
@@ -6501,11 +6490,7 @@ const _sfc_main$j = /* @__PURE__ */ defineComponent({
       return "";
     });
     const containerClasses = computed(() => {
-      return clsx(
-        "ina-date-picker",
-        props.className,
-        props.disabled && "ina-date-picker--disabled"
-      );
+      return clsx("ina-date-picker", props.disabled && "ina-date-picker--disabled");
     });
     const triggerClasses = computed(() => {
       return clsx(
@@ -7227,7 +7212,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",
@@ -7305,7 +7290,7 @@ const _sfc_main$j = /* @__PURE__ */ defineComponent({
                     })
                   ]),
                   createElementVNode("div", _hoisted_14$2, [
-                    createElementVNode("div", _hoisted_15$1, [
+                    createElementVNode("div", _hoisted_15$2, [
                       createVNode(MonthPicker, {
                         "model-value": currentMonth.value,
                         disabled: __props.disabled,
@@ -7435,7 +7420,7 @@ const _sfc_main$j = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const DatePicker = /* @__PURE__ */ _export_sfc(_sfc_main$j, [["__scopeId", "data-v-d43f3297"]]);
+const DatePicker = /* @__PURE__ */ _export_sfc(_sfc_main$j, [["__scopeId", "data-v-93b333e7"]]);
 const _hoisted_1$f = ["disabled"];
 const _hoisted_2$f = {
   key: 0,
@@ -7446,7 +7431,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"
 };
@@ -7465,7 +7450,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 = { class: "ina-select-dropdown__option-label" };
+const _hoisted_15$1 = { class: "ina-select-dropdown__option-label" };
 const _hoisted_16 = {
   key: 0,
   class: "ina-select-dropdown__option-check-indicator"
@@ -7514,7 +7499,6 @@ const _sfc_main$i = /* @__PURE__ */ defineComponent({
     onRemoveSelected: {},
     panelClassName: { default: "" },
     triggerClassName: { default: "" },
-    className: { default: "" },
     showPreviewValue: { type: Boolean, default: true },
     searchable: { type: Boolean, default: true }
   },
@@ -7792,11 +7776,7 @@ const _sfc_main$i = /* @__PURE__ */ defineComponent({
       }
     };
     const containerClasses = computed(() => {
-      return clsx(
-        "ina-select-dropdown",
-        `ina-select-dropdown--size-${props.size}`,
-        props.className
-      );
+      return clsx("ina-select-dropdown", `ina-select-dropdown--size-${props.size}`);
     });
     const triggerClasses = computed(() => {
       return clsx(
@@ -7888,7 +7868,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) => {
@@ -7943,7 +7923,7 @@ const _sfc_main$i = /* @__PURE__ */ defineComponent({
                         option,
                         selected: isSelected(option)
                       }, () => [
-                        createElementVNode("span", _hoisted_15, toDisplayString(getOptionLabel(option)), 1)
+                        createElementVNode("span", _hoisted_15$1, toDisplayString(getOptionLabel(option)), 1)
                       ], true)
                     ]),
                     __props.multiple ? (openBlock(), createElementBlock("div", {
@@ -8002,7 +7982,7 @@ const _sfc_main$i = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const SelectDropdown = /* @__PURE__ */ _export_sfc(_sfc_main$i, [["__scopeId", "data-v-e3f2a508"]]);
+const SelectDropdown = /* @__PURE__ */ _export_sfc(_sfc_main$i, [["__scopeId", "data-v-1efeeb5b"]]);
 const _hoisted_1$e = ["aria-labelledby", "aria-describedby"];
 const _hoisted_2$e = {
   key: 0,
@@ -8010,7 +7990,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,
@@ -8172,7 +8152,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,
@@ -8196,7 +8176,6 @@ const Drawer = /* @__PURE__ */ _export_sfc(_sfc_main$h, [["__scopeId", "data-v-a
 const _sfc_main$g = /* @__PURE__ */ defineComponent({
   __name: "Skeleton",
   props: {
-    className: { default: "" },
     color: { default: "gray" },
     width: { default: void 0 },
     height: { default: "32px" },
@@ -8208,9 +8187,6 @@ const _sfc_main$g = /* @__PURE__ */ defineComponent({
       const classes = ["ina-skeleton"];
       classes.push(`ina-skeleton--rounded-${props.rounded}`);
       classes.push(`ina-skeleton--color-${props.color}`);
-      if (props.className) {
-        classes.push(props.className);
-      }
       return classes;
     });
     const skeletonStyle = computed(() => {
@@ -8319,14 +8295,13 @@ 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: {
     steps: {},
     currentStep: {},
     orientation: { default: "horizontal" },
-    className: {},
     onStepClick: {},
     errorSteps: { default: () => [] }
   },
@@ -8340,8 +8315,7 @@ const _sfc_main$e = /* @__PURE__ */ defineComponent({
           `ina-stepper--${props.orientation}`,
           {
             "ina-stepper--horizontal-responsive": isHorizontal.value
-          },
-          props.className
+          }
         ])
       }, [
         (openBlock(true), createElementBlock(Fragment, null, renderList(props.steps, (step, index2) => {
@@ -8372,7 +8346,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 }))
@@ -8393,7 +8367,7 @@ const _sfc_main$e = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const Stepper = /* @__PURE__ */ _export_sfc(_sfc_main$e, [["__scopeId", "data-v-2ab1d888"]]);
+const Stepper = /* @__PURE__ */ _export_sfc(_sfc_main$e, [["__scopeId", "data-v-7098cd68"]]);
 const _hoisted_1$b = ["aria-selected", "aria-disabled", "disabled", "onClick", "onKeydown"];
 const _hoisted_2$b = { key: 0 };
 const _hoisted_3$9 = { key: 1 };
@@ -8409,7 +8383,6 @@ const _sfc_main$d = /* @__PURE__ */ defineComponent({
     fullWidth: { type: Boolean, default: false },
     useBrandColor: { type: Boolean, default: false },
     disabled: { type: Boolean, default: false },
-    className: { default: "" },
     containerClassName: { default: "" },
     tabClassName: { default: "" }
   },
@@ -8437,9 +8410,6 @@ const _sfc_main$d = /* @__PURE__ */ defineComponent({
       if (props.disabled) {
         classes.push("ina-tab-horizontal--disabled");
       }
-      if (props.className) {
-        classes.push(props.className);
-      }
       return classes;
     });
     const tabsContainerClasses = computed(() => {
@@ -8551,7 +8521,6 @@ const _sfc_main$c = /* @__PURE__ */ defineComponent({
     variant: { default: "outline" },
     useBrandColor: { type: Boolean, default: false },
     disabled: { type: Boolean, default: false },
-    className: { default: "" },
     containerClassName: { default: "" },
     tabClassName: { default: "" },
     width: { default: "200px" }
@@ -8577,9 +8546,6 @@ const _sfc_main$c = /* @__PURE__ */ defineComponent({
       if (props.disabled) {
         classes.push("ina-tab-vertical--disabled");
       }
-      if (props.className) {
-        classes.push(props.className);
-      }
       return classes;
     });
     const tabsContainerClasses = computed(() => {
@@ -8682,8 +8648,7 @@ const _sfc_main$b = /* @__PURE__ */ defineComponent({
   props: {
     visible: { type: Boolean, default: true },
     loading: { type: Boolean, default: false },
-    variant: { default: "primary" },
-    className: { default: "" }
+    variant: { default: "primary" }
   },
   setup(__props) {
     const props = __props;
@@ -8728,9 +8693,6 @@ const _sfc_main$b = /* @__PURE__ */ defineComponent({
       if (isAnimating.value) {
         classes.push("ina-table-progress-bar--animating");
       }
-      if (props.className) {
-        classes.push(props.className);
-      }
       return classes.join(" ");
     });
     return (_ctx, _cache) => {
@@ -8760,7 +8722,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"];
@@ -8784,7 +8746,6 @@ const _sfc_main$a = /* @__PURE__ */ defineComponent({
     placeholderSearch: { default: "Search..." },
     searchPlaceholder: { default: "Input pencarian" },
     buttonSearchLabel: { default: "Cari" },
-    className: { default: "" },
     selectable: { type: Boolean, default: false },
     onSelectionChange: {},
     editableColumns: { default: () => [] },
@@ -9013,7 +8974,7 @@ const _sfc_main$a = /* @__PURE__ */ defineComponent({
       page.value = 1;
     };
     const tableContainerClasses = computed(() => {
-      return clsx("ina-table", props.className, {
+      return clsx("ina-table", {
         "ina-table--sticky-last-column": props.lastColumnSticky
       });
     });
@@ -9059,7 +9020,7 @@ const _sfc_main$a = /* @__PURE__ */ defineComponent({
           visible: loading.value,
           loading: loading.value,
           variant: "primary",
-          className: "ina-table__progress-bar"
+          class: "ina-table__progress-bar"
         }, null, 8, ["visible", "loading"]),
         createElementVNode("table", {
           ref_key: "tableRef",
@@ -9109,7 +9070,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",
@@ -9225,6 +9186,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: {
@@ -9483,7 +9445,13 @@ const _sfc_main$9 = /* @__PURE__ */ defineComponent({
         __props.statusMessage || 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 }, [
+            typeof __props.statusMessage !== "string" ? (openBlock(), createBlock(resolveDynamicComponent(__props.statusMessage), { key: 0 })) : (openBlock(), createElementBlock("span", _hoisted_5$4, toDisplayString(__props.statusMessage), 1))
+          ], 64))
+        ], 2)) : createCommentVNode("", true),
         __props.showCharCount && __props.maxLength ? (openBlock(), createElementBlock("div", {
           key: 2,
           class: normalizeClass(charCountClasses.value)
@@ -9513,7 +9481,6 @@ const _sfc_main$8 = /* @__PURE__ */ defineComponent({
     error: { type: Boolean, default: false },
     disabled: { type: Boolean, default: false },
     readonly: { type: Boolean, default: false },
-    className: {},
     autoFocus: { type: Boolean, default: false }
   },
   emits: ["update:modelValue", "complete"],
@@ -9556,7 +9523,7 @@ const _sfc_main$8 = /* @__PURE__ */ defineComponent({
       }
     );
     const containerClasses = computed(() => {
-      return clsx("ina-one-time-password", props.className);
+      return clsx("ina-one-time-password");
     });
     const inputClasses = computed(() => {
       return clsx(
@@ -9743,7 +9710,6 @@ const _hoisted_2$6 = ["aria-label", "title"];
 const _sfc_main$7 = /* @__PURE__ */ defineComponent({
   __name: "ThemeToggle",
   props: {
-    className: { default: "" },
     size: { default: "md" },
     showLabel: { type: Boolean, default: false }
   },
@@ -9765,9 +9731,6 @@ const _sfc_main$7 = /* @__PURE__ */ defineComponent({
     };
     const containerClasses = computed(() => {
       const classes = ["ina-theme-toggle", `ina-theme-toggle--size-${props.size}`];
-      if (props.className) {
-        classes.push(props.className);
-      }
       return classes.join(" ");
     });
     const buttonClasses = computed(() => {
@@ -9847,7 +9810,6 @@ const _sfc_main$6 = /* @__PURE__ */ defineComponent({
     modelValue: {},
     onChange: {},
     onOpenChange: {},
-    className: {},
     use12Hours: { type: Boolean, default: false },
     showSecond: { type: Boolean, default: false },
     allowClear: { type: Boolean, default: true },
@@ -10062,9 +10024,6 @@ const _sfc_main$6 = /* @__PURE__ */ defineComponent({
       if (isOpen.value) {
         classes.push("ina-time-picker--open");
       }
-      if (props.className) {
-        classes.push(props.className);
-      }
       return classes;
     });
     const inputClasses = computed(() => {
@@ -10310,8 +10269,7 @@ const _sfc_main$5 = /* @__PURE__ */ defineComponent({
     state: { default: "default" },
     style: { default: "solid" },
     duration: { default: 5e3 },
-    position: { default: "top-right" },
-    className: { default: "" }
+    position: { default: "top-right" }
   },
   setup(__props) {
     const props = __props;
@@ -10400,13 +10358,14 @@ const _sfc_main$5 = /* @__PURE__ */ defineComponent({
         }
       }, 300);
     }
+    const attrs = useAttrs();
     const toastClasses = computed(() => {
       return clsx(
         "ina-toast",
         `ina-toast--state-${props.state}`,
         `ina-toast--style-${props.style}`,
         `ina-toast--${isVisible.value ? "visible" : "hidden"}`,
-        props.className
+        attrs.class
       );
     });
     return (_ctx, _cache) => {
@@ -10490,8 +10449,8 @@ const _sfc_main$4 = /* @__PURE__ */ defineComponent({
             style: normalizeStyle(toast2.style),
             duration: toast2.duration,
             position: toast2.position,
-            className: toast2.className
-          }, null, 8, ["onClose", "title", "description", "actionNode", "state", "style", "duration", "position", "className"]);
+            class: normalizeClass(toast2.class)
+          }, null, 8, ["onClose", "title", "description", "actionNode", "state", "style", "duration", "position", "class"]);
         }), 128))
       ]);
     };
@@ -10534,7 +10493,7 @@ const _sfc_main$3 = /* @__PURE__ */ defineComponent({
           {
             hierarchy: "custom",
             size: "sm",
-            className: cancelClassName,
+            class: cancelClassName,
             onClick: () => handleCloseFn(false)
           },
           { default: () => cancelText }
@@ -10544,7 +10503,7 @@ const _sfc_main$3 = /* @__PURE__ */ defineComponent({
           {
             hierarchy: "custom",
             size: "sm",
-            className: confirmClassName,
+            class: confirmClassName,
             onClick: () => handleCloseFn(true)
           },
           { default: () => confirmText }
@@ -10802,8 +10761,7 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
     showArrow: { type: Boolean, default: true },
     onClose: {},
     onNext: {},
-    customContent: { type: Boolean, default: false },
-    className: { default: "" }
+    customContent: { type: Boolean, default: false }
   },
   emits: ["close", "next"],
   setup(__props, { emit: __emit }) {
@@ -10831,9 +10789,6 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
     };
     const tooltipClasses = computed(() => {
       const classes = ["ina-tooltip", `ina-tooltip--placement-${props.placement}`];
-      if (props.className) {
-        classes.push(props.className);
-      }
       if (isClosed.value) {
         classes.push("ina-tooltip--closed");
       }
@@ -10932,7 +10887,7 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const Tooltip = /* @__PURE__ */ _export_sfc(_sfc_main$1, [["__scopeId", "data-v-e5a730e8"]]);
+const Tooltip = /* @__PURE__ */ _export_sfc(_sfc_main$1, [["__scopeId", "data-v-6ec52ff3"]]);
 const predefinedBrands = [
   "inagov",
   "inaku",
@@ -10995,20 +10950,21 @@ function initializeTheme(brandName) {
 if (typeof window !== "undefined") {
   initializeTheme();
 }
-const _hoisted_1 = ["id", "accept", "disabled"];
-const _hoisted_2 = ["tabindex", "aria-label"];
-const _hoisted_3 = { class: "ina-single-file-upload__icon-wrapper ina-single-file-upload__icon-wrapper--default" };
-const _hoisted_4 = { class: "ina-single-file-upload__content" };
-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 _hoisted_1 = { class: "ina-single-file-upload" };
+const _hoisted_2 = ["id", "accept", "disabled"];
+const _hoisted_3 = ["tabindex", "aria-label"];
+const _hoisted_4 = { class: "ina-single-file-upload__icon-wrapper ina-single-file-upload__icon-wrapper--default" };
+const _hoisted_5 = { class: "ina-single-file-upload__content" };
+const _hoisted_6 = { class: "ina-single-file-upload__title" };
+const _hoisted_7 = { class: "ina-single-file-upload__description" };
+const _hoisted_8 = { class: "ina-single-file-upload__icon-wrapper ina-single-file-upload__icon-wrapper--default" };
+const _hoisted_9 = { class: "ina-single-file-upload__progress" };
+const _hoisted_10 = { class: "ina-single-file-upload__progress-bar" };
+const _hoisted_11 = { class: "ina-single-file-upload__progress-text" };
+const _hoisted_12 = { class: "ina-single-file-upload__icon-wrapper ina-single-file-upload__icon-wrapper--file" };
+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 _sfc_main = /* @__PURE__ */ defineComponent({
   __name: "SingleFileUpload",
   props: {
@@ -11019,7 +10975,6 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     allowedExtensions: {},
     validateMagicNumber: { type: Boolean, default: true },
     disabled: { type: Boolean, default: false },
-    className: { default: "" },
     progress: {},
     status: {}
   },
@@ -11274,9 +11229,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       emit("change", droppedFile, null);
     };
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", {
-        class: normalizeClass(["ina-single-file-upload", props.className])
-      }, [
+      return openBlock(), createElementBlock("div", _hoisted_1, [
         createElementVNode("input", mergeProps(filteredAttrs.value, {
           id: inputId.value,
           ref_key: "fileInputRef",
@@ -11286,7 +11239,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
           disabled: props.disabled,
           class: "ina-single-file-upload__input",
           onChange: handleFileChange
-        }), null, 16, _hoisted_1),
+        }), null, 16, _hoisted_2),
         createElementVNode("div", {
           class: normalizeClass(containerClasses.value),
           role: "button",
@@ -11300,35 +11253,35 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
           onDrop: handleDrop
         }, [
           !file.value && status.value === "idle" ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [
-            createElementVNode("div", _hoisted_3, [
+            createElementVNode("div", _hoisted_4, [
               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)
+            createElementVNode("div", _hoisted_5, [
+              createElementVNode("div", _hoisted_6, toDisplayString(props.title), 1),
+              createElementVNode("div", _hoisted_7, toDisplayString(props.description), 1)
             ])
           ], 64)) : createCommentVNode("", true),
           !file.value && status.value === "uploading" ? (openBlock(), createElementBlock(Fragment, { key: 1 }, [
-            createElementVNode("div", _hoisted_7, [
+            createElementVNode("div", _hoisted_8, [
               createVNode(unref(IconUpload), { size: 24 })
             ]),
-            createElementVNode("div", _hoisted_8, [
-              createElementVNode("div", _hoisted_9, [
+            createElementVNode("div", _hoisted_9, [
+              createElementVNode("div", _hoisted_10, [
                 createElementVNode("div", {
                   class: "ina-single-file-upload__progress-fill",
                   style: normalizeStyle({ width: `${progress.value}%` })
                 }, null, 4)
               ]),
-              createElementVNode("div", _hoisted_10, " Uploading... " + toDisplayString(progress.value) + "% ", 1)
+              createElementVNode("div", _hoisted_11, " Uploading... " + toDisplayString(progress.value) + "% ", 1)
             ])
           ], 64)) : createCommentVNode("", true),
           file.value && status.value === "success" ? (openBlock(), createElementBlock(Fragment, { key: 2 }, [
-            createElementVNode("div", _hoisted_11, [
+            createElementVNode("div", _hoisted_12, [
               (openBlock(), createBlock(resolveDynamicComponent(fileIconComponent.value), { size: 16 }))
             ]),
-            createElementVNode("div", _hoisted_12, [
-              createElementVNode("div", _hoisted_13, toDisplayString(file.value.name), 1),
-              createElementVNode("div", _hoisted_14, toDisplayString(props.description), 1)
+            createElementVNode("div", _hoisted_13, [
+              createElementVNode("div", _hoisted_14, toDisplayString(file.value.name), 1),
+              createElementVNode("div", _hoisted_15, toDisplayString(props.description), 1)
             ]),
             createElementVNode("button", {
               type: "button",
@@ -11339,8 +11292,8 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
               createVNode(unref(IconTrash), { size: 18 })
             ])
           ], 64)) : createCommentVNode("", true)
-        ], 42, _hoisted_2)
-      ], 2);
+        ], 42, _hoisted_3)
+      ]);
     };
   }
 });