@idds/vue 1.0.61 → 1.0.63

package/dist/index.es.js

@@ -1,4 +1,4 @@
-import { defineComponent, inject, ref, computed, onMounted, onUnmounted, watch, createElementBlock, openBlock, normalizeClass, createElementVNode, renderSlot, createTextVNode, toDisplayString, createVNode, createCommentVNode, createBlock, resolveDynamicComponent, Transition, withCtx, provide, withModifiers, normalizeStyle, nextTick, h, Fragment, renderList, mergeProps, withDirectives, vModelDynamic, unref, createStaticVNode, withKeys, vModelText, Teleport, vModelRadio } from "vue";
+import { defineComponent, inject, ref, computed, onMounted, onUnmounted, watch, createElementBlock, openBlock, normalizeClass, createElementVNode, renderSlot, createTextVNode, toDisplayString, createVNode, createCommentVNode, createBlock, resolveDynamicComponent, Transition, withCtx, provide, withModifiers, normalizeStyle, nextTick, h, Fragment, renderList, mergeProps, withDirectives, vModelDynamic, unref, withKeys, vModelText, Teleport, createStaticVNode, vModelRadio } from "vue";
 const iddsColorTokens = {
   // Neutral Colors
   "neutral-25": "var(--ina-neutral-25)",
@@ -409,12 +409,12 @@ const defaultColorTokens = {
   "secondary-800": "#164564",
   "secondary-900": "#0f2d42"
 };
-const _hoisted_1$H = ["id", "aria-expanded", "aria-controls", "disabled"];
-const _hoisted_2$B = { class: "ina-accordion__title" };
-const _hoisted_3$x = { class: "ina-accordion__toggler" };
-const _hoisted_4$s = ["id", "aria-labelledby"];
+const _hoisted_1$I = ["id", "aria-expanded", "aria-controls", "disabled"];
+const _hoisted_2$C = { class: "ina-accordion__title" };
+const _hoisted_3$z = { class: "ina-accordion__toggler" };
+const _hoisted_4$t = ["id", "aria-labelledby"];
 const _hoisted_5$o = { class: "ina-accordion__body" };
-const _sfc_main$M = /* @__PURE__ */ defineComponent({
+const _sfc_main$N = /* @__PURE__ */ defineComponent({
   __name: "Accordion",
   props: {
     title: { default: "" },
@@ -524,12 +524,12 @@ const _sfc_main$M = /* @__PURE__ */ defineComponent({
           disabled: __props.disabled,
           onClick: handleToggle
         }, [
-          createElementVNode("div", _hoisted_2$B, [
+          createElementVNode("div", _hoisted_2$C, [
             renderSlot(_ctx.$slots, "title", {}, () => [
               createTextVNode(toDisplayString(__props.title), 1)
             ])
           ]),
-          createElementVNode("div", _hoisted_3$x, [
+          createElementVNode("div", _hoisted_3$z, [
             (openBlock(), createElementBlock("svg", {
               class: normalizeClass(["ina-accordion__icon", { "ina-accordion__icon--open": isOpen.value }]),
               width: "24",
@@ -547,7 +547,7 @@ const _sfc_main$M = /* @__PURE__ */ defineComponent({
               }, null, -1)
             ])], 2))
           ])
-        ], 8, _hoisted_1$H),
+        ], 8, _hoisted_1$I),
         createElementVNode("div", {
           id: contentId.value,
           class: normalizeClass(["ina-accordion__content", { "ina-accordion__content--open": isOpen.value }]),
@@ -556,15 +556,15 @@ const _sfc_main$M = /* @__PURE__ */ defineComponent({
           createElementVNode("div", _hoisted_5$o, [
             renderSlot(_ctx.$slots, "default")
           ])
-        ], 10, _hoisted_4$s)
+        ], 10, _hoisted_4$t)
       ], 2);
     };
   }
 });
-const _hoisted_1$G = { class: "ina-accordion-card__item" };
-const _hoisted_2$A = ["id", "aria-expanded", "aria-controls"];
-const _hoisted_3$w = { class: "ina-accordion-card__header-content" };
-const _hoisted_4$r = {
+const _hoisted_1$H = { class: "ina-accordion-card__item" };
+const _hoisted_2$B = ["id", "aria-expanded", "aria-controls"];
+const _hoisted_3$y = { class: "ina-accordion-card__header-content" };
+const _hoisted_4$s = {
   key: 0,
   class: "ina-accordion-card__icon"
 };
@@ -576,7 +576,7 @@ const _hoisted_7$j = {
 };
 const _hoisted_8$g = ["id", "aria-labelledby"];
 const _hoisted_9$d = { class: "ina-accordion-card__body" };
-const _sfc_main$L = /* @__PURE__ */ defineComponent({
+const _sfc_main$M = /* @__PURE__ */ defineComponent({
   __name: "AccordionCard",
   props: {
     title: { default: "" },
@@ -619,7 +619,7 @@ const _sfc_main$L = /* @__PURE__ */ defineComponent({
       return openBlock(), createElementBlock("div", {
         class: normalizeClass(["ina-accordion-card", cardClasses.value])
       }, [
-        createElementVNode("div", _hoisted_1$G, [
+        createElementVNode("div", _hoisted_1$H, [
           createElementVNode("button", {
             id: headerId.value,
             type: "button",
@@ -628,8 +628,8 @@ const _sfc_main$L = /* @__PURE__ */ defineComponent({
             "aria-controls": contentId.value,
             onClick: toggle
           }, [
-            createElementVNode("div", _hoisted_3$w, [
-              __props.icon ? (openBlock(), createElementBlock("div", _hoisted_4$r, [
+            createElementVNode("div", _hoisted_3$y, [
+              __props.icon ? (openBlock(), createElementBlock("div", _hoisted_4$s, [
                 (openBlock(), createBlock(resolveDynamicComponent(__props.icon), { size: 20 }))
               ])) : createCommentVNode("", true),
               createElementVNode("div", _hoisted_5$n, [
@@ -657,7 +657,7 @@ const _sfc_main$L = /* @__PURE__ */ defineComponent({
                 "stroke-linejoin": "round"
               }, null, -1)
             ])], 2))
-          ], 8, _hoisted_2$A),
+          ], 8, _hoisted_2$B),
           createVNode(Transition, { name: "accordion" }, {
             default: withCtx(() => [
               isOpen.value ? (openBlock(), createElementBlock("div", {
@@ -685,9 +685,9 @@ const _export_sfc = (sfc, props) => {
   }
   return target;
 };
-const AccordionCard = /* @__PURE__ */ _export_sfc(_sfc_main$L, [["__scopeId", "data-v-61699a37"]]);
-const _hoisted_1$F = { class: "ina-accordion-group" };
-const _sfc_main$K = /* @__PURE__ */ defineComponent({
+const AccordionCard = /* @__PURE__ */ _export_sfc(_sfc_main$M, [["__scopeId", "data-v-61699a37"]]);
+const _hoisted_1$G = { class: "ina-accordion-group" };
+const _sfc_main$L = /* @__PURE__ */ defineComponent({
   __name: "AccordionGroup",
   props: {
     multiple: { type: Boolean, default: false },
@@ -759,17 +759,17 @@ const _sfc_main$K = /* @__PURE__ */ defineComponent({
       openIndexes: computed(() => openIndexes.value)
     });
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", _hoisted_1$F, [
+      return openBlock(), createElementBlock("div", _hoisted_1$G, [
         renderSlot(_ctx.$slots, "default", {}, void 0, true)
       ]);
     };
   }
 });
-const AccordionGroup = /* @__PURE__ */ _export_sfc(_sfc_main$K, [["__scopeId", "data-v-b60ded7f"]]);
-const _hoisted_1$E = ["disabled", "aria-expanded"];
-const _hoisted_2$z = { class: "ina-action-dropdown__trigger-content" };
-const _hoisted_3$v = { class: "ina-action-dropdown__menu" };
-const _sfc_main$J = /* @__PURE__ */ defineComponent({
+const AccordionGroup = /* @__PURE__ */ _export_sfc(_sfc_main$L, [["__scopeId", "data-v-b60ded7f"]]);
+const _hoisted_1$F = ["disabled", "aria-expanded"];
+const _hoisted_2$A = { class: "ina-action-dropdown__trigger-content" };
+const _hoisted_3$x = { class: "ina-action-dropdown__menu" };
+const _sfc_main$K = /* @__PURE__ */ defineComponent({
   __name: "ActionDropdown",
   props: {
     disabled: { type: Boolean, default: false },
@@ -897,7 +897,7 @@ const _sfc_main$J = /* @__PURE__ */ defineComponent({
           "aria-expanded": isOpen.value,
           "aria-haspopup": true
         }, [
-          createElementVNode("span", _hoisted_2$z, [
+          createElementVNode("span", _hoisted_2$A, [
             renderSlot(_ctx.$slots, "trigger", {}, () => [
               _cache[1] || (_cache[1] = createElementVNode("svg", {
                 width: "16",
@@ -927,7 +927,7 @@ const _sfc_main$J = /* @__PURE__ */ defineComponent({
               ], -1))
             ], true)
           ])
-        ], 42, _hoisted_1$E),
+        ], 42, _hoisted_1$F),
         createVNode(Transition, { name: "dropdown" }, {
           default: withCtx(() => [
             isOpen.value ? (openBlock(), createElementBlock("div", {
@@ -939,7 +939,7 @@ const _sfc_main$J = /* @__PURE__ */ defineComponent({
               onClick: _cache[0] || (_cache[0] = withModifiers(() => {
               }, ["stop"]))
             }, [
-              createElementVNode("div", _hoisted_3$v, [
+              createElementVNode("div", _hoisted_3$x, [
                 renderSlot(_ctx.$slots, "default", {}, void 0, true)
               ])
             ], 4)) : createCommentVNode("", true)
@@ -950,12 +950,12 @@ const _sfc_main$J = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const ActionDropdown = /* @__PURE__ */ _export_sfc(_sfc_main$J, [["__scopeId", "data-v-302f8f72"]]);
-const _hoisted_1$D = {
+const ActionDropdown = /* @__PURE__ */ _export_sfc(_sfc_main$K, [["__scopeId", "data-v-302f8f72"]]);
+const _hoisted_1$E = {
   key: 0,
   class: "ina-alert__icon"
 };
-const _hoisted_2$y = {
+const _hoisted_2$z = {
   key: 1,
   width: "20",
   height: "20",
@@ -963,7 +963,7 @@ const _hoisted_2$y = {
   fill: "none",
   xmlns: "http://www.w3.org/2000/svg"
 };
-const _hoisted_3$u = {
+const _hoisted_3$w = {
   key: 0,
   d: "M12 2L13.09 8.26L20 9L13.09 9.74L12 16L10.91 9.74L4 9L10.91 8.26L12 2Z",
   stroke: "currentColor",
@@ -971,7 +971,7 @@ const _hoisted_3$u = {
   "stroke-linecap": "round",
   "stroke-linejoin": "round"
 };
-const _hoisted_4$q = {
+const _hoisted_4$r = {
   key: 1,
   d: "M9 12L11 14L15 10M21 12C21 16.9706 16.9706 21 12 21C7.02944 21 3 16.9706 3 12C3 7.02944 7.02944 3 12 3C16.9706 3 21 7.02944 21 12Z",
   stroke: "currentColor",
@@ -1018,7 +1018,7 @@ const _hoisted_12$9 = {
   class: "ina-alert__actions"
 };
 const _hoisted_13$7 = ["aria-label"];
-const _sfc_main$I = /* @__PURE__ */ defineComponent({
+const _sfc_main$J = /* @__PURE__ */ defineComponent({
   __name: "Alert",
   props: {
     variant: { default: "info" },
@@ -1051,12 +1051,12 @@ const _sfc_main$I = /* @__PURE__ */ defineComponent({
         class: normalizeClass(["ina-alert", alertClasses.value]),
         role: "alert"
       }, [
-        __props.icon || showVariantIcon.value ? (openBlock(), createElementBlock("div", _hoisted_1$D, [
+        __props.icon || showVariantIcon.value ? (openBlock(), createElementBlock("div", _hoisted_1$E, [
           __props.icon ? (openBlock(), createBlock(resolveDynamicComponent(__props.icon), {
             key: 0,
             size: 20
-          })) : showVariantIcon.value ? (openBlock(), createElementBlock("svg", _hoisted_2$y, [
-            __props.variant === "neutral" ? (openBlock(), createElementBlock("path", _hoisted_3$u)) : __props.variant === "success" ? (openBlock(), createElementBlock("path", _hoisted_4$q)) : __props.variant === "caution" ? (openBlock(), createElementBlock("path", _hoisted_5$m)) : __props.variant === "info" ? (openBlock(), createElementBlock("path", _hoisted_6$j)) : __props.variant === "critical" ? (openBlock(), createElementBlock("path", _hoisted_7$i)) : createCommentVNode("", true)
+          })) : showVariantIcon.value ? (openBlock(), createElementBlock("svg", _hoisted_2$z, [
+            __props.variant === "neutral" ? (openBlock(), createElementBlock("path", _hoisted_3$w)) : __props.variant === "success" ? (openBlock(), createElementBlock("path", _hoisted_4$r)) : __props.variant === "caution" ? (openBlock(), createElementBlock("path", _hoisted_5$m)) : __props.variant === "info" ? (openBlock(), createElementBlock("path", _hoisted_6$j)) : __props.variant === "critical" ? (openBlock(), createElementBlock("path", _hoisted_7$i)) : createCommentVNode("", true)
           ])) : createCommentVNode("", true)
         ])) : createCommentVNode("", true),
         createElementVNode("div", _hoisted_8$f, [
@@ -1099,8 +1099,8 @@ const _sfc_main$I = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _hoisted_1$C = ["src", "alt"];
-const _sfc_main$H = /* @__PURE__ */ defineComponent({
+const _hoisted_1$D = ["src", "alt"];
+const _sfc_main$I = /* @__PURE__ */ defineComponent({
   __name: "Avatar",
   props: {
     src: {},
@@ -1140,22 +1140,22 @@ const _sfc_main$H = /* @__PURE__ */ defineComponent({
         class: normalizeClass(avatarClasses.value),
         onError: handleImageError,
         onLoad: handleImageLoad
-      }, null, 42, _hoisted_1$C)) : (openBlock(), createElementBlock("div", {
+      }, null, 42, _hoisted_1$D)) : (openBlock(), createElementBlock("div", {
         key: 1,
         class: normalizeClass(avatarClasses.value)
       }, toDisplayString(__props.initials ? __props.initials.slice(0, 2).toUpperCase() : ""), 3));
     };
   }
 });
-const _hoisted_1$B = {
+const _hoisted_1$C = {
   key: 0,
   class: "ina-badge__prefix-icon"
 };
-const _hoisted_2$x = {
+const _hoisted_2$y = {
   key: 1,
   class: "ina-badge__suffix-icon"
 };
-const _sfc_main$G = /* @__PURE__ */ defineComponent({
+const _sfc_main$H = /* @__PURE__ */ defineComponent({
   __name: "Badge",
   props: {
     type: { default: "soft" },
@@ -1185,20 +1185,20 @@ const _sfc_main$G = /* @__PURE__ */ defineComponent({
       return openBlock(), createElementBlock("span", {
         class: normalizeClass(["ina-badge", badgeClasses.value])
       }, [
-        __props.prefixIcon ? (openBlock(), createElementBlock("span", _hoisted_1$B, [
+        __props.prefixIcon ? (openBlock(), createElementBlock("span", _hoisted_1$C, [
           (openBlock(), createBlock(resolveDynamicComponent(__props.prefixIcon)))
         ])) : createCommentVNode("", true),
         createElementVNode("span", null, [
           renderSlot(_ctx.$slots, "default")
         ]),
-        __props.suffixIcon ? (openBlock(), createElementBlock("span", _hoisted_2$x, [
+        __props.suffixIcon ? (openBlock(), createElementBlock("span", _hoisted_2$y, [
           (openBlock(), createBlock(resolveDynamicComponent(__props.suffixIcon)))
         ])) : createCommentVNode("", true)
       ], 2);
     };
   }
 });
-const _sfc_main$F = /* @__PURE__ */ defineComponent({
+const _sfc_main$G = /* @__PURE__ */ defineComponent({
   __name: "BottomSheet",
   props: {
     open: { type: Boolean, default: false },
@@ -1390,6 +1390,13 @@ var IconChevronUp = createVueComponent("outline", "chevron-up", "ChevronUp", [["
  * See the LICENSE file in the root directory of this source tree.
  */
 var IconCircleCheck = createVueComponent("outline", "circle-check", "CircleCheck", [["path", { "d": "M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0", "key": "svg-0" }], ["path", { "d": "M9 12l2 2l4 -4", "key": "svg-1" }]]);
+/**
+ * @license @tabler/icons-vue v3.35.0 - MIT
+ *
+ * This source code is licensed under the MIT license.
+ * See the LICENSE file in the root directory of this source tree.
+ */
+var IconCircleX = createVueComponent("outline", "circle-x", "CircleX", [["path", { "d": "M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0", "key": "svg-0" }], ["path", { "d": "M10 10l4 4m0 -4l-4 4", "key": "svg-1" }]]);
 /**
  * @license @tabler/icons-vue v3.35.0 - MIT
  *
@@ -1418,6 +1425,13 @@ var IconLoader2 = createVueComponent("outline", "loader-2", "Loader2", [["path",
  * See the LICENSE file in the root directory of this source tree.
  */
 var IconMoon = createVueComponent("outline", "moon", "Moon", [["path", { "d": "M12 3c.132 0 .263 0 .393 0a7.5 7.5 0 0 0 7.92 12.446a9 9 0 1 1 -8.313 -12.454z", "key": "svg-0" }]]);
+/**
+ * @license @tabler/icons-vue v3.35.0 - MIT
+ *
+ * This source code is licensed under the MIT license.
+ * See the LICENSE file in the root directory of this source tree.
+ */
+var IconRotateClockwise = createVueComponent("outline", "rotate-clockwise", "RotateClockwise", [["path", { "d": "M4.05 11a8 8 0 1 1 .5 4m-.5 5v-5h5", "key": "svg-0" }]]);
 /**
  * @license @tabler/icons-vue v3.35.0 - MIT
  *
@@ -1425,6 +1439,20 @@ var IconMoon = createVueComponent("outline", "moon", "Moon", [["path", { "d": "M
  * See the LICENSE file in the root directory of this source tree.
  */
 var IconSun = createVueComponent("outline", "sun", "Sun", [["path", { "d": "M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0", "key": "svg-0" }], ["path", { "d": "M3 12h1m8 -9v1m8 8h1m-9 8v1m-6.4 -15.4l.7 .7m12.1 -.7l-.7 .7m0 11.4l.7 .7m-12.1 -.7l-.7 .7", "key": "svg-1" }]]);
+/**
+ * @license @tabler/icons-vue v3.35.0 - MIT
+ *
+ * This source code is licensed under the MIT license.
+ * See the LICENSE file in the root directory of this source tree.
+ */
+var IconTrash = createVueComponent("outline", "trash", "Trash", [["path", { "d": "M4 7l16 0", "key": "svg-0" }], ["path", { "d": "M10 11l0 6", "key": "svg-1" }], ["path", { "d": "M14 11l0 6", "key": "svg-2" }], ["path", { "d": "M5 7l1 12a2 2 0 0 0 2 2h8a2 2 0 0 0 2 -2l1 -12", "key": "svg-3" }], ["path", { "d": "M9 7v-3a1 1 0 0 1 1 -1h4a1 1 0 0 1 1 1v3", "key": "svg-4" }]]);
+/**
+ * @license @tabler/icons-vue v3.35.0 - MIT
+ *
+ * This source code is licensed under the MIT license.
+ * See the LICENSE file in the root directory of this source tree.
+ */
+var IconUpload = createVueComponent("outline", "upload", "Upload", [["path", { "d": "M4 17v2a2 2 0 0 0 2 2h12a2 2 0 0 0 2 -2v-2", "key": "svg-0" }], ["path", { "d": "M7 9l5 -5l5 5", "key": "svg-1" }], ["path", { "d": "M12 4l0 12", "key": "svg-2" }]]);
 /**
  * @license @tabler/icons-vue v3.35.0 - MIT
  *
@@ -1432,18 +1460,18 @@ var IconSun = createVueComponent("outline", "sun", "Sun", [["path", { "d": "M12
  * See the LICENSE file in the root directory of this source tree.
  */
 var IconX = createVueComponent("outline", "x", "X", [["path", { "d": "M18 6l-12 12", "key": "svg-0" }], ["path", { "d": "M6 6l12 12", "key": "svg-1" }]]);
-const _hoisted_1$A = { class: "ina-breadcrumb__list" };
-const _hoisted_2$w = {
+const _hoisted_1$B = { class: "ina-breadcrumb__list" };
+const _hoisted_2$x = {
   key: 0,
   class: "ina-breadcrumb__icon"
 };
-const _hoisted_3$t = { class: "ina-breadcrumb__text" };
-const _hoisted_4$p = {
+const _hoisted_3$v = { class: "ina-breadcrumb__text" };
+const _hoisted_4$q = {
   key: 0,
   class: "ina-breadcrumb__separator",
   "aria-hidden": "true"
 };
-const _sfc_main$E = /* @__PURE__ */ defineComponent({
+const _sfc_main$F = /* @__PURE__ */ defineComponent({
   __name: "Breadcrumb",
   props: {
     items: {},
@@ -1509,7 +1537,7 @@ const _sfc_main$E = /* @__PURE__ */ defineComponent({
         class: normalizeClass(["ina-breadcrumb", breadcrumbClasses.value]),
         "aria-label": "Breadcrumb"
       }, [
-        createElementVNode("ol", _hoisted_1$A, [
+        createElementVNode("ol", _hoisted_1$B, [
           (openBlock(true), createElementBlock(Fragment, null, renderList(__props.items, (item, index2) => {
             return openBlock(), createElementBlock("li", {
               key: index2,
@@ -1521,14 +1549,14 @@ const _sfc_main$E = /* @__PURE__ */ defineComponent({
                 onClick: ($event) => handleItemClick(item, index2)
               }, {
                 default: withCtx(() => [
-                  item.icon ? (openBlock(), createElementBlock("span", _hoisted_2$w, [
+                  item.icon ? (openBlock(), createElementBlock("span", _hoisted_2$x, [
                     (openBlock(), createBlock(resolveDynamicComponent(item.icon), { size: 16 }))
                   ])) : createCommentVNode("", true),
-                  createElementVNode("span", _hoisted_3$t, toDisplayString(getTruncatedLabel(item.label, index2)), 1)
+                  createElementVNode("span", _hoisted_3$v, toDisplayString(getTruncatedLabel(item.label, index2)), 1)
                 ]),
                 _: 2
               }, 1032, ["href", "class", "onClick"])),
-              index2 < __props.items.length - 1 ? (openBlock(), createElementBlock("span", _hoisted_4$p, [
+              index2 < __props.items.length - 1 ? (openBlock(), createElementBlock("span", _hoisted_4$q, [
                 renderSlot(_ctx.$slots, "separator", {}, () => [
                   typeof computedSeparator.value === "string" ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [
                     createTextVNode(toDisplayString(computedSeparator.value), 1)
@@ -1542,8 +1570,8 @@ const _sfc_main$E = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _hoisted_1$z = ["type", "disabled"];
-const _sfc_main$D = /* @__PURE__ */ defineComponent({
+const _hoisted_1$A = ["type", "disabled"];
+const _sfc_main$E = /* @__PURE__ */ defineComponent({
   __name: "Button",
   props: {
     hierarchy: { default: "primary" },
@@ -1591,13 +1619,13 @@ const _sfc_main$D = /* @__PURE__ */ defineComponent({
         prefixIconNode.value ? (openBlock(), createBlock(resolveDynamicComponent(prefixIconNode.value), { key: 0 })) : createCommentVNode("", true),
         renderSlot(_ctx.$slots, "default"),
         suffixIconNode.value ? (openBlock(), createBlock(resolveDynamicComponent(suffixIconNode.value), { key: 1 })) : createCommentVNode("", true)
-      ], 16, _hoisted_1$z);
+      ], 16, _hoisted_1$A);
     };
   }
 });
-const _hoisted_1$y = ["disabled", "onClick", "aria-pressed", "aria-disabled", "name", "value"];
-const _hoisted_2$v = { class: "ina-button-group__button-content" };
-const _sfc_main$C = /* @__PURE__ */ defineComponent({
+const _hoisted_1$z = ["disabled", "onClick", "aria-pressed", "aria-disabled", "name", "value"];
+const _hoisted_2$w = { class: "ina-button-group__button-content" };
+const _sfc_main$D = /* @__PURE__ */ defineComponent({
   __name: "ButtonGroup",
   props: {
     options: {},
@@ -1659,7 +1687,7 @@ const _sfc_main$C = /* @__PURE__ */ defineComponent({
             name: __props.name,
             value: option.value
           }, [
-            createElementVNode("span", _hoisted_2$v, [
+            createElementVNode("span", _hoisted_2$w, [
               renderSlot(_ctx.$slots, `option-${index2}`, {
                 option,
                 selected: isSelected(option)
@@ -1667,22 +1695,22 @@ const _sfc_main$C = /* @__PURE__ */ defineComponent({
                 createTextVNode(toDisplayString(option.label), 1)
               ])
             ])
-          ], 10, _hoisted_1$y);
+          ], 10, _hoisted_1$z);
         }), 128))
       ], 2);
     };
   }
 });
-const _hoisted_1$x = {
+const _hoisted_1$y = {
   key: 0,
   class: "ina-card__media"
 };
-const _hoisted_2$u = ["src", "alt"];
-const _hoisted_3$s = {
+const _hoisted_2$v = ["src", "alt"];
+const _hoisted_3$u = {
   key: 1,
   class: "ina-card__media"
 };
-const _hoisted_4$o = ["src", "alt"];
+const _hoisted_4$p = ["src", "alt"];
 const _hoisted_5$l = { class: "ina-card__content" };
 const _hoisted_6$i = {
   key: 0,
@@ -1740,7 +1768,7 @@ const _hoisted_22$2 = {
   key: 2,
   class: "ina-card__footer"
 };
-const _sfc_main$B = /* @__PURE__ */ defineComponent({
+const _sfc_main$C = /* @__PURE__ */ defineComponent({
   __name: "Card",
   props: {
     variant: { default: "basic" },
@@ -1809,22 +1837,22 @@ const _sfc_main$B = /* @__PURE__ */ defineComponent({
       return openBlock(), createElementBlock("div", {
         class: normalizeClass(["ina-card", cardClasses.value])
       }, [
-        __props.variant === "basic" && computedMediaPosition.value === "top" ? (openBlock(), createElementBlock("div", _hoisted_1$x, [
+        __props.variant === "basic" && computedMediaPosition.value === "top" ? (openBlock(), createElementBlock("div", _hoisted_1$y, [
           renderSlot(_ctx.$slots, "media", {}, () => [
             __props.mediaSrc ? (openBlock(), createElementBlock("img", {
               key: 0,
               src: __props.mediaSrc,
               alt: __props.mediaAlt || "Card media"
-            }, null, 8, _hoisted_2$u)) : createCommentVNode("", true)
+            }, null, 8, _hoisted_2$v)) : createCommentVNode("", true)
           ])
         ])) : createCommentVNode("", true),
-        __props.variant === "overlay" ? (openBlock(), createElementBlock("div", _hoisted_3$s, [
+        __props.variant === "overlay" ? (openBlock(), createElementBlock("div", _hoisted_3$u, [
           renderSlot(_ctx.$slots, "media", {}, () => [
             __props.mediaSrc ? (openBlock(), createElementBlock("img", {
               key: 0,
               src: __props.mediaSrc,
               alt: __props.mediaAlt || "Card media"
-            }, null, 8, _hoisted_4$o)) : createCommentVNode("", true)
+            }, null, 8, _hoisted_4$p)) : createCommentVNode("", true)
           ])
         ])) : createCommentVNode("", true),
         createElementVNode("div", _hoisted_5$l, [
@@ -1851,7 +1879,7 @@ const _sfc_main$B = /* @__PURE__ */ defineComponent({
           ]),
           __props.showButton || _ctx.$slots.button ? (openBlock(), createElementBlock("div", _hoisted_10$9, [
             renderSlot(_ctx.$slots, "button", {}, () => [
-              __props.showButton && __props.buttonText ? (openBlock(), createBlock(_sfc_main$D, {
+              __props.showButton && __props.buttonText ? (openBlock(), createBlock(_sfc_main$E, {
                 key: 0,
                 hierarchy: __props.buttonHierarchy,
                 size: "md",
@@ -1919,9 +1947,9 @@ const _sfc_main$B = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _hoisted_1$w = ["for"];
-const _hoisted_2$t = ["id", "checked", "disabled", "readonly", "indeterminate"];
-const _hoisted_3$r = {
+const _hoisted_1$x = ["for"];
+const _hoisted_2$u = ["id", "checked", "disabled", "readonly", "indeterminate"];
+const _hoisted_3$t = {
   key: 0,
   class: "ina-checkbox__icon",
   width: "14",
@@ -1930,7 +1958,7 @@ const _hoisted_3$r = {
   fill: "none",
   xmlns: "http://www.w3.org/2000/svg"
 };
-const _hoisted_4$n = {
+const _hoisted_4$o = {
   key: 1,
   class: "ina-checkbox__icon",
   width: "14",
@@ -1948,7 +1976,7 @@ const _hoisted_7$g = {
   key: 1,
   class: "ina-checkbox__subtext"
 };
-const _sfc_main$A = /* @__PURE__ */ defineComponent({
+const _sfc_main$B = /* @__PURE__ */ defineComponent({
   __name: "Checkbox",
   props: {
     modelValue: { type: [Boolean, Array], default: false },
@@ -2049,11 +2077,11 @@ const _sfc_main$A = /* @__PURE__ */ defineComponent({
             onChange: handleChange,
             onFocus: handleFocus,
             onBlur: handleBlur
-          }, _ctx.$attrs), null, 16, _hoisted_2$t),
+          }, _ctx.$attrs), null, 16, _hoisted_2$u),
           createElementVNode("div", {
             class: normalizeClass(boxClasses.value)
           }, [
-            checked.value && !__props.indeterminate ? (openBlock(), createElementBlock("svg", _hoisted_3$r, [..._cache[0] || (_cache[0] = [
+            checked.value && !__props.indeterminate ? (openBlock(), createElementBlock("svg", _hoisted_3$t, [..._cache[0] || (_cache[0] = [
               createElementVNode("path", {
                 d: "M20 6L9 17L4 12",
                 stroke: "currentColor",
@@ -2061,7 +2089,7 @@ const _sfc_main$A = /* @__PURE__ */ defineComponent({
                 "stroke-linecap": "round",
                 "stroke-linejoin": "round"
               }, null, -1)
-            ])])) : __props.indeterminate ? (openBlock(), createElementBlock("svg", _hoisted_4$n, [..._cache[1] || (_cache[1] = [
+            ])])) : __props.indeterminate ? (openBlock(), createElementBlock("svg", _hoisted_4$o, [..._cache[1] || (_cache[1] = [
               createElementVNode("path", {
                 d: "M5 12H19",
                 stroke: "currentColor",
@@ -2079,7 +2107,7 @@ const _sfc_main$A = /* @__PURE__ */ defineComponent({
             ])) : createCommentVNode("", true),
             __props.subtext ? (openBlock(), createElementBlock("span", _hoisted_7$g, toDisplayString(__props.subtext), 1)) : createCommentVNode("", true)
           ])
-        ], 10, _hoisted_1$w),
+        ], 10, _hoisted_1$x),
         __props.statusMessage ? (openBlock(), createElementBlock("div", {
           key: 0,
           class: normalizeClass(statusClasses.value)
@@ -2294,13 +2322,13 @@ function sanitizeFileName(fileName) {
   sanitized = sanitized.replace(/^[\s.]+|[\s.]+$/g, "");
   return sanitized || "file";
 }
-const _hoisted_1$v = { class: "ina-text-field" };
-const _hoisted_2$s = ["for"];
-const _hoisted_3$q = {
+const _hoisted_1$w = { class: "ina-text-field" };
+const _hoisted_2$t = ["for"];
+const _hoisted_3$s = {
   key: 0,
   class: "ina-text-field__required"
 };
-const _hoisted_4$m = {
+const _hoisted_4$n = {
   key: 0,
   class: "ina-text-field__prefix-icon"
 };
@@ -2309,7 +2337,7 @@ const _hoisted_6$g = {
   key: 1,
   class: "ina-text-field__char-count"
 };
-const _sfc_main$z = /* @__PURE__ */ defineComponent({
+const _sfc_main$A = /* @__PURE__ */ defineComponent({
   __name: "TextField",
   props: {
     modelValue: { default: "" },
@@ -2510,19 +2538,19 @@ const _sfc_main$z = /* @__PURE__ */ defineComponent({
       }
     });
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", _hoisted_1$v, [
+      return openBlock(), createElementBlock("div", _hoisted_1$w, [
         __props.label ? (openBlock(), createElementBlock("label", {
           key: 0,
           for: inputId.value,
           class: "ina-text-field__label"
         }, [
           createTextVNode(toDisplayString(__props.label) + " ", 1),
-          __props.required ? (openBlock(), createElementBlock("span", _hoisted_3$q, "*")) : createCommentVNode("", true)
-        ], 8, _hoisted_2$s)) : createCommentVNode("", true),
+          __props.required ? (openBlock(), createElementBlock("span", _hoisted_3$s, "*")) : createCommentVNode("", true)
+        ], 8, _hoisted_2$t)) : createCommentVNode("", true),
         createElementVNode("div", {
           class: normalizeClass(wrapperClasses.value)
         }, [
-          __props.prefixIcon ? (openBlock(), createElementBlock("div", _hoisted_4$m, [
+          __props.prefixIcon ? (openBlock(), createElementBlock("div", _hoisted_4$n, [
             (openBlock(), createBlock(resolveDynamicComponent(__props.prefixIcon), { size: 16 }))
           ])) : createCommentVNode("", true),
           withDirectives(createElementVNode("input", mergeProps(_ctx.$attrs, {
@@ -2580,15 +2608,15 @@ const _sfc_main$z = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _hoisted_1$u = { class: "ina-chip__list" };
-const _hoisted_2$r = ["onClick"];
-const _hoisted_3$p = {
+const _hoisted_1$v = { class: "ina-chip__list" };
+const _hoisted_2$s = ["onClick"];
+const _hoisted_3$r = {
   key: 0,
   class: "ina-chip__custom-field"
 };
-const _hoisted_4$l = { key: 0 };
+const _hoisted_4$m = { key: 0 };
 const _hoisted_5$i = { key: 1 };
-const _sfc_main$y = /* @__PURE__ */ defineComponent({
+const _sfc_main$z = /* @__PURE__ */ defineComponent({
   __name: "Chip",
   props: {
     options: {},
@@ -2692,21 +2720,21 @@ const _sfc_main$y = /* @__PURE__ */ defineComponent({
       return openBlock(), createElementBlock("div", {
         class: normalizeClass(["ina-chip", chipContainerClasses.value])
       }, [
-        createElementVNode("div", _hoisted_1$u, [
+        createElementVNode("div", _hoisted_1$v, [
           (openBlock(true), createElementBlock(Fragment, null, renderList(allOptions.value, (opt, index2) => {
             return openBlock(), createElementBlock("button", {
               key: `${opt.label}-${index2}`,
               type: "button",
               class: normalizeClass(getChipItemClasses(opt)),
               onClick: ($event) => handleChipClick(opt)
-            }, toDisplayString(opt.label), 11, _hoisted_2$r);
+            }, toDisplayString(opt.label), 11, _hoisted_2$s);
           }), 128))
         ]),
-        __props.showCustomization && showInput.value ? (openBlock(), createElementBlock("div", _hoisted_3$p, [
-          __props.customizationComponent ? (openBlock(), createElementBlock("div", _hoisted_4$l, [
+        __props.showCustomization && showInput.value ? (openBlock(), createElementBlock("div", _hoisted_3$r, [
+          __props.customizationComponent ? (openBlock(), createElementBlock("div", _hoisted_4$m, [
             (openBlock(), createBlock(resolveDynamicComponent(__props.customizationComponent)))
           ])) : (openBlock(), createElementBlock("div", _hoisted_5$i, [
-            createVNode(_sfc_main$z, {
+            createVNode(_sfc_main$A, {
               "model-value": tempValue.value,
               class: "ina-chip__input",
               placeholder: "Masukkan data yang Anda inginkan",
@@ -2720,11 +2748,11 @@ const _sfc_main$y = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _hoisted_1$t = ["id", "aria-expanded", "aria-controls"];
-const _hoisted_2$q = { class: "ina-collapse__title" };
-const _hoisted_3$o = ["id", "aria-labelledby"];
-const _hoisted_4$k = { class: "ina-collapse__body" };
-const _sfc_main$x = /* @__PURE__ */ defineComponent({
+const _hoisted_1$u = ["id", "aria-expanded", "aria-controls"];
+const _hoisted_2$r = { class: "ina-collapse__title" };
+const _hoisted_3$q = ["id", "aria-labelledby"];
+const _hoisted_4$l = { class: "ina-collapse__body" };
+const _sfc_main$y = /* @__PURE__ */ defineComponent({
   __name: "Collapse",
   props: {
     title: { default: "" },
@@ -2773,7 +2801,7 @@ const _sfc_main$x = /* @__PURE__ */ defineComponent({
           "aria-controls": contentId.value,
           onClick: toggle
         }, [
-          createElementVNode("span", _hoisted_2$q, [
+          createElementVNode("span", _hoisted_2$r, [
             renderSlot(_ctx.$slots, "title", {}, () => [
               createTextVNode(toDisplayString(__props.title), 1)
             ], true)
@@ -2794,7 +2822,7 @@ const _sfc_main$x = /* @__PURE__ */ defineComponent({
               "stroke-linejoin": "round"
             }, null, -1)
           ])], 2))
-        ], 8, _hoisted_1$t),
+        ], 8, _hoisted_1$u),
         createVNode(Transition, { name: "collapse" }, {
           default: withCtx(() => [
             isOpen.value ? (openBlock(), createElementBlock("div", {
@@ -2803,10 +2831,10 @@ const _sfc_main$x = /* @__PURE__ */ defineComponent({
               class: "ina-collapse__content",
               "aria-labelledby": headerId.value
             }, [
-              createElementVNode("div", _hoisted_4$k, [
+              createElementVNode("div", _hoisted_4$l, [
                 renderSlot(_ctx.$slots, "default", {}, void 0, true)
               ])
-            ], 8, _hoisted_3$o)) : createCommentVNode("", true)
+            ], 8, _hoisted_3$q)) : createCommentVNode("", true)
           ]),
           _: 3
         })
@@ -2814,12 +2842,12 @@ const _sfc_main$x = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const Collapse = /* @__PURE__ */ _export_sfc(_sfc_main$x, [["__scopeId", "data-v-95c02a4c"]]);
-const _hoisted_1$s = {
+const Collapse = /* @__PURE__ */ _export_sfc(_sfc_main$y, [["__scopeId", "data-v-95c02a4c"]]);
+const _hoisted_1$t = {
   key: 0,
   class: "ina-divider__label"
 };
-const _sfc_main$w = /* @__PURE__ */ defineComponent({
+const _sfc_main$x = /* @__PURE__ */ defineComponent({
   __name: "Divider",
   props: {
     orientation: { default: "horizontal" },
@@ -2846,13 +2874,13 @@ const _sfc_main$w = /* @__PURE__ */ defineComponent({
         class: normalizeClass(["ina-divider", dividerClasses.value]),
         role: "separator"
       }, [
-        __props.label ? (openBlock(), createElementBlock("div", _hoisted_1$s, toDisplayString(__props.label), 1)) : createCommentVNode("", true)
+        __props.label ? (openBlock(), createElementBlock("div", _hoisted_1$t, toDisplayString(__props.label), 1)) : createCommentVNode("", true)
       ], 2);
     };
   }
 });
-const _hoisted_1$r = { class: "ina-dropdown__list" };
-const _sfc_main$v = /* @__PURE__ */ defineComponent({
+const _hoisted_1$s = { class: "ina-dropdown__list" };
+const _sfc_main$w = /* @__PURE__ */ defineComponent({
   __name: "Dropdown",
   props: {
     trigger: {},
@@ -2956,7 +2984,7 @@ const _sfc_main$v = /* @__PURE__ */ defineComponent({
               onMousedown: _cache[0] || (_cache[0] = withModifiers(() => {
               }, ["stop"]))
             }, [
-              createElementVNode("ul", _hoisted_1$r, [
+              createElementVNode("ul", _hoisted_1$s, [
                 (openBlock(true), createElementBlock(Fragment, null, renderList(displayItems.value, (item, idx) => {
                   return openBlock(), createElementBlock("li", {
                     key: idx,
@@ -2977,12 +3005,12 @@ const _sfc_main$v = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const Dropdown = /* @__PURE__ */ _export_sfc(_sfc_main$v, [["__scopeId", "data-v-133b76aa"]]);
-const _hoisted_1$q = { class: "ina-field-input-table__wrapper" };
-const _hoisted_2$p = { class: "ina-field-input-table__label" };
-const _hoisted_3$n = ["value"];
-const _hoisted_4$j = { class: "ina-field-input-table__actions" };
-const _sfc_main$u = /* @__PURE__ */ defineComponent({
+const Dropdown = /* @__PURE__ */ _export_sfc(_sfc_main$w, [["__scopeId", "data-v-133b76aa"]]);
+const _hoisted_1$r = { class: "ina-field-input-table__wrapper" };
+const _hoisted_2$q = { class: "ina-field-input-table__label" };
+const _hoisted_3$p = ["value"];
+const _hoisted_4$k = { class: "ina-field-input-table__actions" };
+const _sfc_main$v = /* @__PURE__ */ defineComponent({
   __name: "FieldInputTable",
   props: {
     value: {},
@@ -3028,8 +3056,8 @@ const _sfc_main$u = /* @__PURE__ */ defineComponent({
       return openBlock(), createElementBlock("div", {
         class: normalizeClass(containerClasses.value)
       }, [
-        createElementVNode("div", _hoisted_1$q, [
-          createElementVNode("label", _hoisted_2$p, toDisplayString(__props.placeholder), 1),
+        createElementVNode("div", _hoisted_1$r, [
+          createElementVNode("label", _hoisted_2$q, toDisplayString(__props.placeholder), 1),
           createElementVNode("input", {
             ref_key: "inputRef",
             ref: inputRef,
@@ -3039,9 +3067,9 @@ const _sfc_main$u = /* @__PURE__ */ defineComponent({
             onInput: handleChange,
             onKeydown: handleKeyDown,
             autofocus: ""
-          }, null, 40, _hoisted_3$n)
+          }, null, 40, _hoisted_3$p)
         ]),
-        createElementVNode("div", _hoisted_4$j, [
+        createElementVNode("div", _hoisted_4$k, [
           createElementVNode("button", {
             type: "button",
             onClick: handleCommit,
@@ -3312,38 +3340,35 @@ async function validateMagicNumber(file, expectedMimeType) {
     reader.readAsArrayBuffer(file.slice(0, HEADER_BYTES));
   });
 }
-const _hoisted_1$p = {
+const _hoisted_1$q = {
   key: 0,
   class: "ina-file-upload__label"
 };
-const _hoisted_2$o = ["accept", "multiple", "disabled"];
-const _hoisted_3$m = { class: "ina-file-upload__content" };
-const _hoisted_4$i = { class: "ina-file-upload__text" };
-const _hoisted_5$h = { class: "ina-file-upload__title" };
-const _hoisted_6$f = { class: "ina-file-upload__description" };
-const _hoisted_7$f = ["disabled"];
-const _hoisted_8$d = { class: "ina-file-upload__files" };
-const _hoisted_9$a = { class: "ina-file-upload__file-indicator" };
-const _hoisted_10$8 = {
+const _hoisted_2$p = ["accept", "multiple", "disabled"];
+const _hoisted_3$o = { class: "ina-file-upload__content" };
+const _hoisted_4$j = { class: "ina-file-upload__icon" };
+const _hoisted_5$h = { class: "ina-file-upload__text" };
+const _hoisted_6$f = { class: "ina-file-upload__title" };
+const _hoisted_7$f = { class: "ina-file-upload__description" };
+const _hoisted_8$d = ["disabled"];
+const _hoisted_9$a = { class: "ina-file-upload__files" };
+const _hoisted_10$8 = { class: "ina-file-upload__file-indicator" };
+const _hoisted_11$8 = {
   key: 0,
   class: "ina-file-upload__file-icon-wrapper ina-file-upload__file-icon-wrapper--uploading"
 };
-const _hoisted_11$8 = {
+const _hoisted_12$7 = {
   key: 1,
   class: "ina-file-upload__file-icon-wrapper ina-file-upload__file-icon-wrapper--success"
 };
-const _hoisted_12$7 = {
+const _hoisted_13$5 = {
   key: 2,
   class: "ina-file-upload__file-icon-wrapper ina-file-upload__file-icon-wrapper--error"
 };
-const _hoisted_13$5 = {
+const _hoisted_14$4 = {
   key: 3,
   class: "ina-file-upload__file-icon-wrapper ina-file-upload__file-icon-wrapper--success"
 };
-const _hoisted_14$4 = {
-  key: 4,
-  class: "ina-file-upload__file-icon-placeholder"
-};
 const _hoisted_15$3 = { class: "ina-file-upload__file-info" };
 const _hoisted_16$2 = { class: "ina-file-upload__file-name" };
 const _hoisted_17$2 = { class: "ina-file-upload__file-size" };
@@ -3357,12 +3382,11 @@ const _hoisted_21$2 = ["onClick"];
 const _hoisted_22$1 = ["onClick"];
 const _hoisted_23$1 = ["onClick"];
 const _hoisted_24$1 = ["onClick"];
-const _hoisted_25 = ["onClick"];
-const _hoisted_26 = {
+const _hoisted_25$1 = {
   key: 2,
   class: "ina-file-upload__errors"
 };
-const _sfc_main$t = /* @__PURE__ */ defineComponent({
+const _sfc_main$u = /* @__PURE__ */ defineComponent({
   __name: "FileUpload",
   props: {
     label: {},
@@ -3577,7 +3601,7 @@ const _sfc_main$t = /* @__PURE__ */ defineComponent({
       return openBlock(), createElementBlock("div", {
         class: normalizeClass(["ina-file-upload", uploadClasses.value])
       }, [
-        __props.label ? (openBlock(), createElementBlock("div", _hoisted_1$p, toDisplayString(__props.label), 1)) : createCommentVNode("", true),
+        __props.label ? (openBlock(), createElementBlock("div", _hoisted_1$q, toDisplayString(__props.label), 1)) : createCommentVNode("", true),
         createElementVNode("div", {
           class: normalizeClass(["ina-file-upload__dropzone", dropzoneClasses.value]),
           onClick: triggerFileInput,
@@ -3594,23 +3618,25 @@ const _sfc_main$t = /* @__PURE__ */ defineComponent({
             disabled: __props.disabled,
             class: "ina-file-upload__input",
             onChange: handleFileChange
-          }, null, 40, _hoisted_2$o),
-          createElementVNode("div", _hoisted_3$m, [
-            _cache[1] || (_cache[1] = createStaticVNode('<div class="ina-file-upload__icon"><svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M21 15V19C21 19.5304 20.7893 20.0391 20.4142 20.4142C20.0391 20.7893 19.5304 21 19 21H5C4.46957 21 3.96086 20.7893 3.58579 20.4142C3.21071 20.0391 3 19.5304 3 19V15" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path><path d="M7 10L12 15L17 10" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path><path d="M12 15V3" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path></svg></div>', 1)),
-            createElementVNode("div", _hoisted_4$i, [
-              createElementVNode("div", _hoisted_5$h, toDisplayString(__props.title), 1),
-              createElementVNode("div", _hoisted_6$f, toDisplayString(__props.description), 1)
+          }, null, 40, _hoisted_2$p),
+          createElementVNode("div", _hoisted_3$o, [
+            createElementVNode("div", _hoisted_4$j, [
+              createVNode(unref(IconUpload), { size: 24 })
+            ]),
+            createElementVNode("div", _hoisted_5$h, [
+              createElementVNode("div", _hoisted_6$f, toDisplayString(__props.title), 1),
+              createElementVNode("div", _hoisted_7$f, toDisplayString(__props.description), 1)
             ]),
             createElementVNode("button", {
               type: "button",
               class: "ina-file-upload__button",
               disabled: __props.disabled,
               onClick: withModifiers(triggerFileInput, ["stop"])
-            }, " Pilih File ", 8, _hoisted_7$f)
+            }, " Pilih File ", 8, _hoisted_8$d)
           ])
         ], 34),
         files.value.length > 0 ? (openBlock(), createElementBlock(Fragment, { key: 1 }, [
-          createElementVNode("div", _hoisted_8$d, [
+          createElementVNode("div", _hoisted_9$a, [
             (openBlock(true), createElementBlock(Fragment, null, renderList(displayedFiles.value, (uploadedFile, displayIndex) => {
               return openBlock(), createElementBlock("div", {
                 key: `${uploadedFile.file.name}-${getOriginalIndex(uploadedFile)}`,
@@ -3620,95 +3646,28 @@ const _sfc_main$t = /* @__PURE__ */ defineComponent({
                   "ina-file-upload__file--uploading": uploadedFile.status === "uploading"
                 }])
               }, [
-                createElementVNode("div", _hoisted_9$a, [
-                  uploadedFile.status === "uploading" ? (openBlock(), createElementBlock("div", _hoisted_10$8, [..._cache[2] || (_cache[2] = [
-                    createElementVNode("svg", {
-                      class: "ina-file-upload__file-icon--spinning",
-                      width: "16",
-                      height: "16",
-                      viewBox: "0 0 24 24",
-                      fill: "none",
-                      xmlns: "http://www.w3.org/2000/svg"
-                    }, [
-                      createElementVNode("circle", {
-                        cx: "12",
-                        cy: "12",
-                        r: "10",
-                        stroke: "currentColor",
-                        "stroke-width": "2",
-                        "stroke-linecap": "round",
-                        "stroke-dasharray": "31.416",
-                        "stroke-dashoffset": "31.416"
-                      }, [
-                        createElementVNode("animate", {
-                          attributeName: "stroke-dasharray",
-                          dur: "2s",
-                          values: "0 31.416;15.708 15.708;0 31.416",
-                          repeatCount: "indefinite"
-                        }),
-                        createElementVNode("animate", {
-                          attributeName: "stroke-dashoffset",
-                          dur: "2s",
-                          values: "0;-15.708;-31.416",
-                          repeatCount: "indefinite"
-                        })
-                      ])
-                    ], -1)
-                  ])])) : uploadedFile.status === "success" ? (openBlock(), createElementBlock("div", _hoisted_11$8, [..._cache[3] || (_cache[3] = [
-                    createElementVNode("svg", {
-                      width: "16",
-                      height: "16",
-                      viewBox: "0 0 24 24",
-                      fill: "none",
-                      xmlns: "http://www.w3.org/2000/svg"
-                    }, [
-                      createElementVNode("path", {
-                        d: "M20 6L9 17L4 12",
-                        stroke: "currentColor",
-                        "stroke-width": "2",
-                        "stroke-linecap": "round",
-                        "stroke-linejoin": "round"
-                      })
-                    ], -1)
-                  ])])) : uploadedFile.status === "error" ? (openBlock(), createElementBlock("div", _hoisted_12$7, [..._cache[4] || (_cache[4] = [
-                    createElementVNode("svg", {
-                      width: "16",
-                      height: "16",
-                      viewBox: "0 0 24 24",
-                      fill: "none",
-                      xmlns: "http://www.w3.org/2000/svg"
-                    }, [
-                      createElementVNode("circle", {
-                        cx: "12",
-                        cy: "12",
-                        r: "10",
-                        stroke: "currentColor",
-                        "stroke-width": "2"
-                      }),
-                      createElementVNode("path", {
-                        d: "M12 8V12M12 16H12.01",
-                        stroke: "currentColor",
-                        "stroke-width": "2",
-                        "stroke-linecap": "round"
-                      })
-                    ], -1)
-                  ])])) : uploadedFile.status === "idle" ? (openBlock(), createElementBlock("div", _hoisted_13$5, [..._cache[5] || (_cache[5] = [
-                    createElementVNode("svg", {
-                      width: "16",
-                      height: "16",
-                      viewBox: "0 0 24 24",
-                      fill: "none",
-                      xmlns: "http://www.w3.org/2000/svg"
-                    }, [
-                      createElementVNode("path", {
-                        d: "M20 6L9 17L4 12",
-                        stroke: "currentColor",
-                        "stroke-width": "2",
-                        "stroke-linecap": "round",
-                        "stroke-linejoin": "round"
-                      })
-                    ], -1)
-                  ])])) : (openBlock(), createElementBlock("div", _hoisted_14$4))
+                createElementVNode("div", _hoisted_10$8, [
+                  uploadedFile.status === "uploading" ? (openBlock(), createElementBlock("div", _hoisted_11$8, [
+                    createVNode(unref(IconLoader2), {
+                      size: 16,
+                      class: "ina-file-upload__file-icon--spinning"
+                    })
+                  ])) : uploadedFile.status === "success" ? (openBlock(), createElementBlock("div", _hoisted_12$7, [
+                    createVNode(unref(IconCircleCheck), {
+                      size: 16,
+                      stroke: "2"
+                    })
+                  ])) : uploadedFile.status === "error" ? (openBlock(), createElementBlock("div", _hoisted_13$5, [
+                    createVNode(unref(IconCircleX), {
+                      size: 16,
+                      stroke: "2"
+                    })
+                  ])) : uploadedFile.status === "idle" ? (openBlock(), createElementBlock("div", _hoisted_14$4, [
+                    createVNode(unref(IconCircleCheck), {
+                      size: 16,
+                      stroke: "2"
+                    })
+                  ])) : createCommentVNode("", true)
                 ]),
                 createElementVNode("div", _hoisted_15$3, [
                   createElementVNode("div", _hoisted_16$2, toDisplayString(unref(sanitizeFileName)(uploadedFile.file.name)), 1),
@@ -3722,169 +3681,42 @@ const _sfc_main$t = /* @__PURE__ */ defineComponent({
                       type: "button",
                       class: "ina-file-upload__file-retry",
                       onClick: ($event) => updateFileStatus(getOriginalIndex(uploadedFile), "idle")
-                    }, [..._cache[6] || (_cache[6] = [
-                      createElementVNode("svg", {
-                        width: "16",
-                        height: "16",
-                        viewBox: "0 0 24 24",
-                        fill: "none",
-                        xmlns: "http://www.w3.org/2000/svg"
-                      }, [
-                        createElementVNode("path", {
-                          d: "M1 4V10H7",
-                          stroke: "currentColor",
-                          "stroke-width": "2",
-                          "stroke-linecap": "round",
-                          "stroke-linejoin": "round"
-                        }),
-                        createElementVNode("path", {
-                          d: "M23 20V14H17",
-                          stroke: "currentColor",
-                          "stroke-width": "2",
-                          "stroke-linecap": "round",
-                          "stroke-linejoin": "round"
-                        }),
-                        createElementVNode("path", {
-                          d: "M20.49 9A9 9 0 0 0 5.64 5.64L1 10M23 14L18.36 18.36A9 9 0 0 1 3.51 15",
-                          stroke: "currentColor",
-                          "stroke-width": "2",
-                          "stroke-linecap": "round",
-                          "stroke-linejoin": "round"
-                        })
-                      ], -1)
-                    ])], 8, _hoisted_20$2),
+                    }, [
+                      createVNode(unref(IconRotateClockwise), { size: 16 })
+                    ], 8, _hoisted_20$2),
                     createElementVNode("button", {
                       title: "Hapus file",
                       type: "button",
                       class: "ina-file-upload__file-remove",
                       onClick: ($event) => removeFile(getOriginalIndex(uploadedFile))
-                    }, [..._cache[7] || (_cache[7] = [
-                      createElementVNode("svg", {
-                        width: "16",
-                        height: "16",
-                        viewBox: "0 0 24 24",
-                        fill: "none",
-                        xmlns: "http://www.w3.org/2000/svg"
-                      }, [
-                        createElementVNode("path", {
-                          d: "M3 6H5H21M8 6V4C8 3.46957 8.21071 2.96086 8.58579 2.58579C8.96086 2.21071 9.46957 2 10 2H14C14.5304 2 15.0391 2.21071 15.4142 2.58579C15.7893 2.96086 16 3.46957 16 4V6M19 6V20C19 20.5304 18.7893 21.0391 18.4142 21.4142C18.0391 21.7893 17.5304 22 17 22H7C6.46957 22 5.96086 21.7893 5.58579 21.4142C5.21071 21.0391 5 20.5304 5 20V6H19Z",
-                          stroke: "currentColor",
-                          "stroke-width": "2",
-                          "stroke-linecap": "round",
-                          "stroke-linejoin": "round"
-                        }),
-                        createElementVNode("path", {
-                          d: "M10 11V17M14 11V17",
-                          stroke: "currentColor",
-                          "stroke-width": "2",
-                          "stroke-linecap": "round",
-                          "stroke-linejoin": "round"
-                        })
-                      ], -1)
-                    ])], 8, _hoisted_21$2)
+                    }, [
+                      createVNode(unref(IconTrash), { size: 16 })
+                    ], 8, _hoisted_21$2)
                   ], 64)) : uploadedFile.status === "uploading" ? (openBlock(), createElementBlock("button", {
                     key: 1,
                     title: "Batalkan upload",
                     type: "button",
                     class: "ina-file-upload__file-remove",
                     onClick: ($event) => removeFile(getOriginalIndex(uploadedFile))
-                  }, [..._cache[8] || (_cache[8] = [
-                    createElementVNode("svg", {
-                      width: "16",
-                      height: "16",
-                      viewBox: "0 0 24 24",
-                      fill: "none",
-                      xmlns: "http://www.w3.org/2000/svg"
-                    }, [
-                      createElementVNode("path", {
-                        d: "M18 6L6 18M6 6L18 18",
-                        stroke: "currentColor",
-                        "stroke-width": "2",
-                        "stroke-linecap": "round",
-                        "stroke-linejoin": "round"
-                      })
-                    ], -1)
-                  ])], 8, _hoisted_22$1)) : uploadedFile.status === "success" ? (openBlock(), createElementBlock("button", {
+                  }, [
+                    createVNode(unref(IconX), { size: 16 })
+                  ], 8, _hoisted_22$1)) : uploadedFile.status === "success" ? (openBlock(), createElementBlock("button", {
                     key: 2,
                     title: "Hapus file",
                     type: "button",
                     class: "ina-file-upload__file-remove",
                     onClick: ($event) => removeFile(getOriginalIndex(uploadedFile))
-                  }, [..._cache[9] || (_cache[9] = [
-                    createElementVNode("svg", {
-                      width: "16",
-                      height: "16",
-                      viewBox: "0 0 24 24",
-                      fill: "none",
-                      xmlns: "http://www.w3.org/2000/svg"
-                    }, [
-                      createElementVNode("path", {
-                        d: "M3 6H5H21M8 6V4C8 3.46957 8.21071 2.96086 8.58579 2.58579C8.96086 2.21071 9.46957 2 10 2H14C14.5304 2 15.0391 2.21071 15.4142 2.58579C15.7893 2.96086 16 3.46957 16 4V6M19 6V20C19 20.5304 18.7893 21.0391 18.4142 21.4142C18.0391 21.7893 17.5304 22 17 22H7C6.46957 22 5.96086 21.7893 5.58579 21.4142C5.21071 21.0391 5 20.5304 5 20V6H19Z",
-                        stroke: "currentColor",
-                        "stroke-width": "2",
-                        "stroke-linecap": "round",
-                        "stroke-linejoin": "round"
-                      }),
-                      createElementVNode("path", {
-                        d: "M10 11V17M14 11V17",
-                        stroke: "currentColor",
-                        "stroke-width": "2",
-                        "stroke-linecap": "round",
-                        "stroke-linejoin": "round"
-                      })
-                    ], -1)
-                  ])], 8, _hoisted_23$1)) : uploadedFile.status === "idle" ? (openBlock(), createElementBlock("button", {
+                  }, [
+                    createVNode(unref(IconTrash), { size: 16 })
+                  ], 8, _hoisted_23$1)) : uploadedFile.status === "idle" ? (openBlock(), createElementBlock("button", {
                     key: 3,
                     title: "Hapus file",
                     type: "button",
                     class: "ina-file-upload__file-remove",
                     onClick: ($event) => removeFile(getOriginalIndex(uploadedFile))
-                  }, [..._cache[10] || (_cache[10] = [
-                    createElementVNode("svg", {
-                      width: "16",
-                      height: "16",
-                      viewBox: "0 0 24 24",
-                      fill: "none",
-                      xmlns: "http://www.w3.org/2000/svg"
-                    }, [
-                      createElementVNode("path", {
-                        d: "M3 6H5H21M8 6V4C8 3.46957 8.21071 2.96086 8.58579 2.58579C8.96086 2.21071 9.46957 2 10 2H14C14.5304 2 15.0391 2.21071 15.4142 2.58579C15.7893 2.96086 16 3.46957 16 4V6M19 6V20C19 20.5304 18.7893 21.0391 18.4142 21.4142C18.0391 21.7893 17.5304 22 17 22H7C6.46957 22 5.96086 21.7893 5.58579 21.4142C5.21071 21.0391 5 20.5304 5 20V6H19Z",
-                        stroke: "currentColor",
-                        "stroke-width": "2",
-                        "stroke-linecap": "round",
-                        "stroke-linejoin": "round"
-                      }),
-                      createElementVNode("path", {
-                        d: "M10 11V17M14 11V17",
-                        stroke: "currentColor",
-                        "stroke-width": "2",
-                        "stroke-linecap": "round",
-                        "stroke-linejoin": "round"
-                      })
-                    ], -1)
-                  ])], 8, _hoisted_24$1)) : (openBlock(), createElementBlock("button", {
-                    key: 4,
-                    title: "Hapus file",
-                    type: "button",
-                    class: "ina-file-upload__file-remove",
-                    onClick: ($event) => removeFile(getOriginalIndex(uploadedFile))
-                  }, [..._cache[11] || (_cache[11] = [
-                    createElementVNode("svg", {
-                      width: "16",
-                      height: "16",
-                      viewBox: "0 0 24 24",
-                      fill: "none",
-                      xmlns: "http://www.w3.org/2000/svg"
-                    }, [
-                      createElementVNode("path", {
-                        d: "M18 6L6 18M6 6L18 18",
-                        stroke: "currentColor",
-                        "stroke-width": "2",
-                        "stroke-linecap": "round",
-                        "stroke-linejoin": "round"
-                      })
-                    ], -1)
-                  ])], 8, _hoisted_25))
+                  }, [
+                    createVNode(unref(IconTrash), { size: 16 })
+                  ], 8, _hoisted_24$1)) : createCommentVNode("", true)
                 ])
               ], 2);
             }), 128))
@@ -3905,7 +3737,7 @@ const _sfc_main$t = /* @__PURE__ */ defineComponent({
               class: normalizeClass([{
                 "ina-file-upload__show-more-icon--expanded": showAllFiles.value
               }, "ina-file-upload__show-more-icon"])
-            }, [..._cache[12] || (_cache[12] = [
+            }, [..._cache[1] || (_cache[1] = [
               createElementVNode("path", {
                 d: "M6 9L12 15L18 9",
                 stroke: "currentColor",
@@ -3916,7 +3748,7 @@ const _sfc_main$t = /* @__PURE__ */ defineComponent({
             ])], 2))
           ])) : createCommentVNode("", true)
         ], 64)) : createCommentVNode("", true),
-        validationErrors.value.length > 0 ? (openBlock(), createElementBlock("div", _hoisted_26, [
+        validationErrors.value.length > 0 ? (openBlock(), createElementBlock("div", _hoisted_25$1, [
           (openBlock(true), createElementBlock(Fragment, null, renderList(validationErrors.value, (error, index2) => {
             return openBlock(), createElementBlock("div", {
               key: index2,
@@ -3928,14 +3760,14 @@ const _sfc_main$t = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _hoisted_1$o = ["for"];
-const _hoisted_2$n = {
+const _hoisted_1$p = ["for"];
+const _hoisted_2$o = {
   key: 0,
   class: "ina-input-search__required"
 };
-const _hoisted_3$l = { class: "ina-input-search__wrapper" };
-const _hoisted_4$h = ["id", "placeholder", "disabled", "readonly", "maxlength"];
-const _sfc_main$s = /* @__PURE__ */ defineComponent({
+const _hoisted_3$n = { class: "ina-input-search__wrapper" };
+const _hoisted_4$i = ["id", "placeholder", "disabled", "readonly", "maxlength"];
+const _sfc_main$t = /* @__PURE__ */ defineComponent({
   __name: "InputSearch",
   props: {
     modelValue: { default: "" },
@@ -4044,9 +3876,9 @@ const _sfc_main$s = /* @__PURE__ */ defineComponent({
           class: "ina-input-search__label"
         }, [
           createTextVNode(toDisplayString(__props.label) + " ", 1),
-          __props.required ? (openBlock(), createElementBlock("span", _hoisted_2$n, "*")) : createCommentVNode("", true)
-        ], 8, _hoisted_1$o)) : createCommentVNode("", true),
-        createElementVNode("div", _hoisted_3$l, [
+          __props.required ? (openBlock(), createElementBlock("span", _hoisted_2$o, "*")) : createCommentVNode("", true)
+        ], 8, _hoisted_1$p)) : createCommentVNode("", true),
+        createElementVNode("div", _hoisted_3$n, [
           _cache[2] || (_cache[2] = createElementVNode("div", { class: "ina-input-search__search-icon" }, [
             createElementVNode("svg", {
               width: "16",
@@ -4086,7 +3918,7 @@ const _sfc_main$s = /* @__PURE__ */ defineComponent({
             onBlur: handleBlur,
             onFocus: handleFocus,
             onKeydown: withKeys(handleSearch, ["enter"])
-          }), null, 16, _hoisted_4$h), [
+          }), null, 16, _hoisted_4$i), [
             [vModelText, inputValue.value]
           ]),
           inputValue.value && __props.showClearButton ? (openBlock(), createElementBlock("button", {
@@ -4120,13 +3952,13 @@ const _sfc_main$s = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _hoisted_1$n = { class: "ina-modal__container" };
-const _hoisted_2$m = ["aria-labelledby", "aria-describedby"];
-const _hoisted_3$k = {
+const _hoisted_1$o = { class: "ina-modal__container" };
+const _hoisted_2$n = ["aria-labelledby", "aria-describedby"];
+const _hoisted_3$m = {
   key: 0,
   class: "ina-modal__header"
 };
-const _hoisted_4$g = ["id"];
+const _hoisted_4$h = ["id"];
 const _hoisted_5$g = ["aria-label"];
 const _hoisted_6$e = { class: "ina-modal__body" };
 const _hoisted_7$e = ["id"];
@@ -4134,7 +3966,7 @@ const _hoisted_8$c = {
   key: 1,
   class: "ina-modal__footer"
 };
-const _sfc_main$r = /* @__PURE__ */ defineComponent({
+const _sfc_main$s = /* @__PURE__ */ defineComponent({
   __name: "Modal",
   props: {
     modelValue: { type: Boolean, default: false },
@@ -4224,7 +4056,7 @@ const _sfc_main$r = /* @__PURE__ */ defineComponent({
               onClick: handleBackdropClick
             }, [
               _cache[1] || (_cache[1] = createElementVNode("div", { class: "ina-modal__backdrop" }, null, -1)),
-              createElementVNode("div", _hoisted_1$n, [
+              createElementVNode("div", _hoisted_1$o, [
                 createElementVNode("div", {
                   ref_key: "modalRef",
                   ref: modalRef,
@@ -4236,7 +4068,7 @@ const _sfc_main$r = /* @__PURE__ */ defineComponent({
                   onClick: _cache[0] || (_cache[0] = withModifiers(() => {
                   }, ["stop"]))
                 }, [
-                  __props.showHeader ? (openBlock(), createElementBlock("div", _hoisted_3$k, [
+                  __props.showHeader ? (openBlock(), createElementBlock("div", _hoisted_3$m, [
                     createElementVNode("h2", {
                       id: titleId.value,
                       class: "ina-modal__title"
@@ -4244,7 +4076,7 @@ const _sfc_main$r = /* @__PURE__ */ defineComponent({
                       renderSlot(_ctx.$slots, "title", {}, () => [
                         createTextVNode(toDisplayString(__props.title), 1)
                       ], true)
-                    ], 8, _hoisted_4$g),
+                    ], 8, _hoisted_4$h),
                     __props.showCloseButton ? (openBlock(), createElementBlock("button", {
                       key: 0,
                       type: "button",
@@ -4269,7 +4101,7 @@ const _sfc_main$r = /* @__PURE__ */ defineComponent({
                   __props.showFooter ? (openBlock(), createElementBlock("div", _hoisted_8$c, [
                     renderSlot(_ctx.$slots, "footer", {}, void 0, true)
                   ])) : createCommentVNode("", true)
-                ], 10, _hoisted_2$m)
+                ], 10, _hoisted_2$n)
               ])
             ], 2)) : createCommentVNode("", true)
           ]),
@@ -4279,7 +4111,7 @@ const _sfc_main$r = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const Modal = /* @__PURE__ */ _export_sfc(_sfc_main$r, [["__scopeId", "data-v-524eaf2f"]]);
+const Modal = /* @__PURE__ */ _export_sfc(_sfc_main$s, [["__scopeId", "data-v-524eaf2f"]]);
 function r(e) {
   var t, f, n = "";
   if ("string" == typeof e || "number" == typeof e) n += e;
@@ -4293,13 +4125,13 @@ function clsx() {
   for (var e, t, f = 0, n = "", o = arguments.length; f < o; f++) (e = arguments[f]) && (t = r(e)) && (n && (n += " "), n += t);
   return n;
 }
-const _hoisted_1$m = ["for"];
-const _hoisted_2$l = {
+const _hoisted_1$n = ["for"];
+const _hoisted_2$m = {
   key: 0,
   class: "ina-month-picker__required"
 };
-const _hoisted_3$j = { class: "ina-month-picker__wrapper" };
-const _hoisted_4$f = ["id", "disabled", "aria-expanded", "aria-labelledby"];
+const _hoisted_3$l = { class: "ina-month-picker__wrapper" };
+const _hoisted_4$g = ["id", "disabled", "aria-expanded", "aria-labelledby"];
 const _hoisted_5$f = {
   key: 0,
   class: "ina-month-picker__prefix-icon"
@@ -4307,7 +4139,7 @@ const _hoisted_5$f = {
 const _hoisted_6$d = { class: "ina-month-picker__trigger-text" };
 const _hoisted_7$d = { class: "ina-month-picker__grid" };
 const _hoisted_8$b = ["disabled", "onClick", "onMouseenter"];
-const _sfc_main$q = /* @__PURE__ */ defineComponent({
+const _sfc_main$r = /* @__PURE__ */ defineComponent({
   __name: "MonthPicker",
   props: {
     modelValue: { default: void 0 },
@@ -4567,9 +4399,9 @@ const _sfc_main$q = /* @__PURE__ */ defineComponent({
           class: "ina-month-picker__label"
         }, [
           createTextVNode(toDisplayString(__props.label) + " ", 1),
-          __props.required ? (openBlock(), createElementBlock("span", _hoisted_2$l, "*")) : createCommentVNode("", true)
-        ], 8, _hoisted_1$m)) : createCommentVNode("", true),
-        createElementVNode("div", _hoisted_3$j, [
+          __props.required ? (openBlock(), createElementBlock("span", _hoisted_2$m, "*")) : createCommentVNode("", true)
+        ], 8, _hoisted_1$n)) : createCommentVNode("", true),
+        createElementVNode("div", _hoisted_3$l, [
           createElementVNode("button", {
             id: triggerId.value,
             ref_key: "triggerRef",
@@ -4625,7 +4457,7 @@ const _sfc_main$q = /* @__PURE__ */ defineComponent({
                 "stroke-linejoin": "round"
               }, null, -1)
             ])], 2))
-          ], 42, _hoisted_4$f),
+          ], 42, _hoisted_4$g),
           createVNode(Transition, { name: "panel" }, {
             default: withCtx(() => [
               isOpen.value ? (openBlock(), createElementBlock("div", {
@@ -4665,22 +4497,22 @@ const _sfc_main$q = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const MonthPicker = /* @__PURE__ */ _export_sfc(_sfc_main$q, [["__scopeId", "data-v-a8fe0103"]]);
-const _hoisted_1$l = {
+const MonthPicker = /* @__PURE__ */ _export_sfc(_sfc_main$r, [["__scopeId", "data-v-a8fe0103"]]);
+const _hoisted_1$m = {
   key: 0,
   class: "ina-multiple-choice-grid__title"
 };
-const _hoisted_2$k = {
+const _hoisted_2$l = {
   key: 1,
   class: "ina-multiple-choice-grid__subtitle"
 };
-const _hoisted_3$i = { class: "ina-multiple-choice-grid__container" };
-const _hoisted_4$e = { class: "ina-multiple-choice-grid__grid" };
+const _hoisted_3$k = { class: "ina-multiple-choice-grid__container" };
+const _hoisted_4$f = { class: "ina-multiple-choice-grid__grid" };
 const _hoisted_5$e = { class: "ina-multiple-choice-grid__header-row" };
 const _hoisted_6$c = { class: "ina-multiple-choice-grid__row-label" };
 const _hoisted_7$c = ["id", "name", "value", "disabled"];
 const _hoisted_8$a = ["for"];
-const _sfc_main$p = /* @__PURE__ */ defineComponent({
+const _sfc_main$q = /* @__PURE__ */ defineComponent({
   __name: "MultipleChoiceGrid",
   props: {
     modelValue: { default: () => [] },
@@ -4729,10 +4561,10 @@ const _sfc_main$p = /* @__PURE__ */ defineComponent({
       return openBlock(), createElementBlock("div", {
         class: normalizeClass(["ina-multiple-choice-grid", gridClasses.value])
       }, [
-        __props.title ? (openBlock(), createElementBlock("div", _hoisted_1$l, toDisplayString(__props.title), 1)) : createCommentVNode("", true),
-        __props.subtitle ? (openBlock(), createElementBlock("div", _hoisted_2$k, toDisplayString(__props.subtitle), 1)) : createCommentVNode("", true),
-        createElementVNode("div", _hoisted_3$i, [
-          createElementVNode("div", _hoisted_4$e, [
+        __props.title ? (openBlock(), createElementBlock("div", _hoisted_1$m, toDisplayString(__props.title), 1)) : createCommentVNode("", true),
+        __props.subtitle ? (openBlock(), createElementBlock("div", _hoisted_2$l, toDisplayString(__props.subtitle), 1)) : createCommentVNode("", true),
+        createElementVNode("div", _hoisted_3$k, [
+          createElementVNode("div", _hoisted_4$f, [
             createElementVNode("div", _hoisted_5$e, [
               _cache[1] || (_cache[1] = createElementVNode("div", { class: "ina-multiple-choice-grid__header-cell ina-multiple-choice-grid__header-cell--empty" }, null, -1)),
               (openBlock(true), createElementBlock(Fragment, null, renderList(__props.columns, (column, colIndex) => {
@@ -4785,10 +4617,10 @@ const _sfc_main$p = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _hoisted_1$k = ["aria-label"];
-const _hoisted_2$j = { class: "ina-pagination__nav-container" };
-const _hoisted_3$h = { class: "ina-pagination__page-info" };
-const _hoisted_4$d = { class: "ina-pagination__nav-buttons" };
+const _hoisted_1$l = ["aria-label"];
+const _hoisted_2$k = { class: "ina-pagination__nav-container" };
+const _hoisted_3$j = { class: "ina-pagination__page-info" };
+const _hoisted_4$e = { class: "ina-pagination__nav-buttons" };
 const _hoisted_5$d = ["disabled"];
 const _hoisted_6$b = ["disabled", "aria-label"];
 const _hoisted_7$b = ["onClick", "disabled", "aria-label", "aria-current"];
@@ -4800,7 +4632,7 @@ const _hoisted_10$7 = {
 };
 const _hoisted_11$7 = ["value", "disabled"];
 const _hoisted_12$6 = ["value"];
-const _sfc_main$o = /* @__PURE__ */ defineComponent({
+const _sfc_main$p = /* @__PURE__ */ defineComponent({
   __name: "Pagination",
   props: {
     modelValue: { default: 1 },
@@ -4834,8 +4666,18 @@ const _sfc_main$o = /* @__PURE__ */ defineComponent({
           pages.push(i);
         }
       } else {
-        const start = Math.max(1, current - 1);
-        const end = Math.min(total, current + 1);
+        let start;
+        let end;
+        if (current === 1) {
+          start = 1;
+          end = Math.min(3, total);
+        } else if (current === total) {
+          start = Math.max(1, total - 2);
+          end = total;
+        } else {
+          start = current - 1;
+          end = current + 1;
+        }
         for (let i = start; i <= end; i++) {
           pages.push(i);
         }
@@ -4902,9 +4744,9 @@ const _sfc_main$o = /* @__PURE__ */ defineComponent({
         role: "navigation",
         "aria-label": __props.ariaLabel
       }, [
-        createElementVNode("div", _hoisted_2$j, [
-          createElementVNode("div", _hoisted_3$h, " Halaman " + toDisplayString(currentPage.value) + " dari " + toDisplayString(__props.totalPages), 1),
-          createElementVNode("div", _hoisted_4$d, [
+        createElementVNode("div", _hoisted_2$k, [
+          createElementVNode("div", _hoisted_3$j, " Halaman " + toDisplayString(currentPage.value) + " dari " + toDisplayString(__props.totalPages), 1),
+          createElementVNode("div", _hoisted_4$e, [
             createElementVNode("button", {
               type: "button",
               class: normalizeClass(["ina-pagination__nav-button", {
@@ -5044,17 +4886,17 @@ const _sfc_main$o = /* @__PURE__ */ defineComponent({
             }), 128))
           ], 42, _hoisted_11$7)
         ])) : createCommentVNode("", true)
-      ], 10, _hoisted_1$k)) : createCommentVNode("", true);
+      ], 10, _hoisted_1$l)) : createCommentVNode("", true);
     };
   }
 });
-const _hoisted_1$j = { class: "ina-password-input" };
-const _hoisted_2$i = ["for"];
-const _hoisted_3$g = {
+const _hoisted_1$k = { class: "ina-password-input" };
+const _hoisted_2$j = ["for"];
+const _hoisted_3$i = {
   key: 0,
   class: "ina-password-input__required"
 };
-const _hoisted_4$c = ["id", "type", "placeholder", "disabled", "readonly", "maxlength"];
+const _hoisted_4$d = ["id", "type", "placeholder", "disabled", "readonly", "maxlength"];
 const _hoisted_5$c = ["disabled"];
 const _hoisted_6$a = {
   key: 0,
@@ -5080,7 +4922,7 @@ const _hoisted_9$8 = {
   key: 0,
   class: "ina-password-input__character-count"
 };
-const _sfc_main$n = /* @__PURE__ */ defineComponent({
+const _sfc_main$o = /* @__PURE__ */ defineComponent({
   __name: "PasswordInput",
   props: {
     modelValue: { default: "" },
@@ -5156,15 +4998,15 @@ const _sfc_main$n = /* @__PURE__ */ defineComponent({
       }
     );
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", _hoisted_1$j, [
+      return openBlock(), createElementBlock("div", _hoisted_1$k, [
         __props.label ? (openBlock(), createElementBlock("label", {
           key: 0,
           for: inputId.value,
           class: "ina-password-input__label"
         }, [
           createTextVNode(toDisplayString(__props.label) + " ", 1),
-          __props.required ? (openBlock(), createElementBlock("span", _hoisted_3$g, "*")) : createCommentVNode("", true)
-        ], 8, _hoisted_2$i)) : createCommentVNode("", true),
+          __props.required ? (openBlock(), createElementBlock("span", _hoisted_3$i, "*")) : createCommentVNode("", true)
+        ], 8, _hoisted_2$j)) : createCommentVNode("", true),
         createElementVNode("div", {
           class: normalizeClass(wrapperClasses.value)
         }, [
@@ -5182,7 +5024,7 @@ const _sfc_main$n = /* @__PURE__ */ defineComponent({
             onInput: handleInput,
             onBlur: handleBlur,
             onFocus: handleFocus
-          }, _ctx.$attrs), null, 16, _hoisted_4$c), [
+          }, _ctx.$attrs), null, 16, _hoisted_4$d), [
             [vModelDynamic, inputValue.value]
           ]),
           createElementVNode("button", {
@@ -5239,13 +5081,13 @@ const _sfc_main$n = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _hoisted_1$i = ["for"];
-const _hoisted_2$h = {
+const _hoisted_1$j = ["for"];
+const _hoisted_2$i = {
   key: 0,
   class: "ina-phone-input__required"
 };
-const _hoisted_3$f = { class: "ina-phone-input__wrapper" };
-const _hoisted_4$b = { class: "ina-phone-input__country-selector" };
+const _hoisted_3$h = { class: "ina-phone-input__wrapper" };
+const _hoisted_4$c = { class: "ina-phone-input__country-selector" };
 const _hoisted_5$b = { class: "ina-phone-input__country-flag" };
 const _hoisted_6$9 = { class: "ina-phone-input__country-code" };
 const _hoisted_7$9 = {
@@ -5259,7 +5101,7 @@ 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 _sfc_main$m = /* @__PURE__ */ defineComponent({
+const _sfc_main$n = /* @__PURE__ */ defineComponent({
   __name: "PhoneInput",
   props: {
     modelValue: { default: "" },
@@ -5410,10 +5252,10 @@ const _sfc_main$m = /* @__PURE__ */ defineComponent({
           class: "ina-phone-input__label"
         }, [
           createTextVNode(toDisplayString(__props.label) + " ", 1),
-          __props.required ? (openBlock(), createElementBlock("span", _hoisted_2$h, "*")) : createCommentVNode("", true)
-        ], 8, _hoisted_1$i)) : createCommentVNode("", true),
-        createElementVNode("div", _hoisted_3$f, [
-          createElementVNode("div", _hoisted_4$b, [
+          __props.required ? (openBlock(), createElementBlock("span", _hoisted_2$i, "*")) : createCommentVNode("", true)
+        ], 8, _hoisted_1$j)) : createCommentVNode("", true),
+        createElementVNode("div", _hoisted_3$h, [
+          createElementVNode("div", _hoisted_4$c, [
             createElementVNode("button", {
               type: "button",
               class: "ina-phone-input__country-button",
@@ -5497,12 +5339,12 @@ const _sfc_main$m = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const PhoneInput = /* @__PURE__ */ _export_sfc(_sfc_main$m, [["__scopeId", "data-v-8d7dab9d"]]);
-const _hoisted_1$h = {
+const PhoneInput = /* @__PURE__ */ _export_sfc(_sfc_main$n, [["__scopeId", "data-v-8d7dab9d"]]);
+const _hoisted_1$i = {
   key: 0,
   class: "ina-progress-bar__shimmer"
 };
-const _sfc_main$l = /* @__PURE__ */ defineComponent({
+const _sfc_main$m = /* @__PURE__ */ defineComponent({
   __name: "ProgressBar",
   props: {
     visible: { type: Boolean, default: true },
@@ -5552,7 +5394,7 @@ const _sfc_main$l = /* @__PURE__ */ defineComponent({
             transitionDuration: `${__props.duration}ms`
           })
         }, null, 6),
-        __props.shimmer ? (openBlock(), createElementBlock("div", _hoisted_1$h)) : createCommentVNode("", true),
+        __props.shimmer ? (openBlock(), createElementBlock("div", _hoisted_1$i)) : createCommentVNode("", true),
         createElementVNode("div", {
           class: normalizeClass(indicatorClasses.value),
           style: normalizeStyle({
@@ -5565,7 +5407,7 @@ const _sfc_main$l = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _sfc_main$k = /* @__PURE__ */ defineComponent({
+const _sfc_main$l = /* @__PURE__ */ defineComponent({
   __name: "LinearProgressIndicator",
   props: {
     value: { default: 0 },
@@ -5599,12 +5441,12 @@ const _sfc_main$k = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _hoisted_1$g = ["disabled"];
-const _hoisted_2$g = { class: "ina-radio-input__group" };
-const _hoisted_3$e = ["for"];
-const _hoisted_4$a = ["id", "name", "value", "disabled"];
+const _hoisted_1$h = ["disabled"];
+const _hoisted_2$h = { class: "ina-radio-input__group" };
+const _hoisted_3$g = ["for"];
+const _hoisted_4$b = ["id", "name", "value", "disabled"];
 const _hoisted_5$a = ["for"];
-const _sfc_main$j = /* @__PURE__ */ defineComponent({
+const _sfc_main$k = /* @__PURE__ */ defineComponent({
   __name: "RadioInput",
   props: {
     modelValue: {},
@@ -5677,11 +5519,11 @@ const _sfc_main$j = /* @__PURE__ */ defineComponent({
         class: normalizeClass(["ina-radio-input", radioClasses.value]),
         disabled: __props.disabled
       }, [
-        createElementVNode("div", _hoisted_2$g, [
+        createElementVNode("div", _hoisted_2$h, [
           createElementVNode("label", {
             class: normalizeClass(labelClasses.value),
             for: labelId.value
-          }, toDisplayString(__props.label), 11, _hoisted_3$e),
+          }, toDisplayString(__props.label), 11, _hoisted_3$g),
           (openBlock(true), createElementBlock(Fragment, null, renderList(__props.options, (option, index2) => {
             return openBlock(), createElementBlock("div", {
               key: `${option.value}-${index2}`,
@@ -5702,7 +5544,7 @@ const _sfc_main$j = /* @__PURE__ */ defineComponent({
                 onChange: handleChange,
                 onFocus: handleFocus,
                 onBlur: handleBlur
-              }), null, 16, _hoisted_4$a), [
+              }), null, 16, _hoisted_4$b), [
                 [vModelRadio, selectedValue.value]
               ]),
               createElementVNode("label", {
@@ -5716,17 +5558,17 @@ const _sfc_main$j = /* @__PURE__ */ defineComponent({
           key: 0,
           class: normalizeClass(helperClasses.value)
         }, toDisplayString(__props.helperText), 3)) : createCommentVNode("", true)
-      ], 10, _hoisted_1$g);
+      ], 10, _hoisted_1$h);
     };
   }
 });
-const _hoisted_1$f = ["for"];
-const _hoisted_2$f = {
+const _hoisted_1$g = ["for"];
+const _hoisted_2$g = {
   key: 0,
   class: "ina-year-picker__required"
 };
-const _hoisted_3$d = { class: "ina-year-picker__wrapper" };
-const _hoisted_4$9 = ["id", "disabled", "aria-expanded", "aria-labelledby"];
+const _hoisted_3$f = { class: "ina-year-picker__wrapper" };
+const _hoisted_4$a = ["id", "disabled", "aria-expanded", "aria-labelledby"];
 const _hoisted_5$9 = {
   key: 0,
   class: "ina-year-picker__prefix-icon"
@@ -5738,7 +5580,7 @@ const _hoisted_9$6 = { class: "ina-year-picker__decade-range" };
 const _hoisted_10$5 = ["disabled"];
 const _hoisted_11$5 = { class: "ina-year-picker__grid" };
 const _hoisted_12$4 = ["disabled", "onClick", "onMouseenter"];
-const _sfc_main$i = /* @__PURE__ */ defineComponent({
+const _sfc_main$j = /* @__PURE__ */ defineComponent({
   __name: "YearPicker",
   props: {
     modelValue: { default: void 0 },
@@ -6028,9 +5870,9 @@ const _sfc_main$i = /* @__PURE__ */ defineComponent({
           class: "ina-year-picker__label"
         }, [
           createTextVNode(toDisplayString(__props.label) + " ", 1),
-          __props.required ? (openBlock(), createElementBlock("span", _hoisted_2$f, "*")) : createCommentVNode("", true)
-        ], 8, _hoisted_1$f)) : createCommentVNode("", true),
-        createElementVNode("div", _hoisted_3$d, [
+          __props.required ? (openBlock(), createElementBlock("span", _hoisted_2$g, "*")) : createCommentVNode("", true)
+        ], 8, _hoisted_1$g)) : createCommentVNode("", true),
+        createElementVNode("div", _hoisted_3$f, [
           createElementVNode("button", {
             id: triggerId.value,
             ref_key: "triggerRef",
@@ -6070,7 +5912,7 @@ const _sfc_main$i = /* @__PURE__ */ defineComponent({
                 })
               ], -1)
             ])])) : createCommentVNode("", true)
-          ], 42, _hoisted_4$9),
+          ], 42, _hoisted_4$a),
           createVNode(Transition, { name: "panel" }, {
             default: withCtx(() => [
               isOpen.value ? (openBlock(), createElementBlock("div", {
@@ -6129,14 +5971,14 @@ const _sfc_main$i = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const YearPicker = /* @__PURE__ */ _export_sfc(_sfc_main$i, [["__scopeId", "data-v-336f52a7"]]);
-const _hoisted_1$e = ["for"];
-const _hoisted_2$e = {
+const YearPicker = /* @__PURE__ */ _export_sfc(_sfc_main$j, [["__scopeId", "data-v-336f52a7"]]);
+const _hoisted_1$f = ["for"];
+const _hoisted_2$f = {
   key: 0,
   class: "ina-date-picker__required"
 };
-const _hoisted_3$c = ["id", "disabled"];
-const _hoisted_4$8 = {
+const _hoisted_3$e = ["id", "disabled"];
+const _hoisted_4$9 = {
   key: 0,
   class: "ina-date-picker__calendar-container"
 };
@@ -6146,21 +5988,25 @@ const _hoisted_7$7 = { class: "ina-date-picker__dropdown-container" };
 const _hoisted_8$5 = { class: "ina-date-picker__dropdown-container" };
 const _hoisted_9$5 = { class: "ina-date-picker__calendar-grid" };
 const _hoisted_10$4 = ["disabled", "onClick"];
-const _hoisted_11$4 = { class: "ina-date-picker__calendar-container" };
-const _hoisted_12$3 = { class: "ina-date-picker__calendar-header" };
-const _hoisted_13$3 = { class: "ina-date-picker__header-controls" };
-const _hoisted_14$2 = { class: "ina-date-picker__dropdown-container" };
+const _hoisted_11$4 = {
+  key: 0,
+  class: "ina-date-picker__today-label"
+};
+const _hoisted_12$3 = { class: "ina-date-picker__calendar-container" };
+const _hoisted_13$3 = { class: "ina-date-picker__calendar-header" };
+const _hoisted_14$2 = { class: "ina-date-picker__header-controls" };
 const _hoisted_15$2 = { class: "ina-date-picker__dropdown-container" };
-const _hoisted_16$1 = { class: "ina-date-picker__calendar-grid" };
-const _hoisted_17$1 = ["disabled", "onClick"];
-const _hoisted_18$1 = { class: "ina-date-picker__calendar" };
-const _hoisted_19$1 = { class: "ina-date-picker__next-month-header" };
-const _hoisted_20$1 = { class: "ina-date-picker__next-month-controls" };
-const _hoisted_21$1 = { class: "ina-date-picker__dropdown-container" };
+const _hoisted_16$1 = { class: "ina-date-picker__dropdown-container" };
+const _hoisted_17$1 = { class: "ina-date-picker__calendar-grid" };
+const _hoisted_18$1 = ["disabled", "onClick"];
+const _hoisted_19$1 = { class: "ina-date-picker__calendar" };
+const _hoisted_20$1 = { class: "ina-date-picker__next-month-header" };
+const _hoisted_21$1 = { class: "ina-date-picker__next-month-controls" };
 const _hoisted_22 = { class: "ina-date-picker__dropdown-container" };
-const _hoisted_23 = { class: "ina-date-picker__calendar-grid" };
-const _hoisted_24 = ["disabled", "onClick"];
-const _sfc_main$h = /* @__PURE__ */ defineComponent({
+const _hoisted_23 = { class: "ina-date-picker__dropdown-container" };
+const _hoisted_24 = { class: "ina-date-picker__calendar-grid" };
+const _hoisted_25 = ["disabled", "onClick"];
+const _sfc_main$i = /* @__PURE__ */ defineComponent({
   __name: "DatePicker",
   props: {
     modelValue: { default: "" },
@@ -6756,7 +6602,29 @@ const _sfc_main$h = /* @__PURE__ */ defineComponent({
         } else {
           targetMonth = getFirstEnabledMonth();
         }
-        if (targetEndDate) {
+        if (props.mode === "range") {
+          if (targetDate && targetEndDate) {
+            const startMonth = new Date(
+              targetDate.getFullYear(),
+              targetDate.getMonth(),
+              1
+            );
+            const endMonth = new Date(
+              targetEndDate.getFullYear(),
+              targetEndDate.getMonth(),
+              1
+            );
+            if (startMonth.getFullYear() === endMonth.getFullYear() && startMonth.getMonth() === endMonth.getMonth()) {
+              targetNextMonth = new Date(startMonth);
+              targetNextMonth.setMonth(targetNextMonth.getMonth() + 1);
+            } else {
+              targetNextMonth = endMonth;
+            }
+          } else if (targetDate && !targetEndDate) {
+            targetNextMonth = new Date(targetMonth);
+            targetNextMonth.setMonth(targetNextMonth.getMonth() + 1);
+          }
+        } else if (targetEndDate) {
           targetNextMonth = new Date(
             targetEndDate.getFullYear(),
             targetEndDate.getMonth(),
@@ -6769,9 +6637,19 @@ const _sfc_main$h = /* @__PURE__ */ defineComponent({
             if (targetNextMonth) {
               nextDate.value = targetNextMonth;
             } else {
-              const nextMonthDate = new Date(targetMonth);
-              nextMonthDate.setMonth(nextMonthDate.getMonth() + 1);
-              nextDate.value = nextMonthDate;
+              if (props.mode === "multiple") {
+                const nextMonthDate = new Date(targetMonth);
+                nextMonthDate.setMonth(nextMonthDate.getMonth() + 1);
+                nextDate.value = nextMonthDate;
+              } else if (props.mode === "range") {
+                const range = props.modelValue;
+                const hasNoDates = !range || !range[0] && !range[1];
+                if (hasNoDates) {
+                  const nextMonthDate = new Date(targetMonth);
+                  nextMonthDate.setMonth(nextMonthDate.getMonth() + 1);
+                  nextDate.value = nextMonthDate;
+                }
+              }
             }
           }
         }
@@ -6907,8 +6785,8 @@ const _sfc_main$h = /* @__PURE__ */ defineComponent({
           class: "ina-date-picker__label"
         }, [
           createTextVNode(toDisplayString(__props.label) + " ", 1),
-          __props.required ? (openBlock(), createElementBlock("span", _hoisted_2$e, "*")) : createCommentVNode("", true)
-        ], 8, _hoisted_1$e)) : createCommentVNode("", true),
+          __props.required ? (openBlock(), createElementBlock("span", _hoisted_2$f, "*")) : createCommentVNode("", true)
+        ], 8, _hoisted_1$f)) : createCommentVNode("", true),
         createElementVNode("button", {
           id: triggerId.value,
           ref_key: "triggerRef",
@@ -6938,7 +6816,7 @@ const _sfc_main$h = /* @__PURE__ */ defineComponent({
               class: "ina-date-picker__clear-icon"
             })
           ])) : createCommentVNode("", true)
-        ], 46, _hoisted_3$c),
+        ], 46, _hoisted_3$e),
         isOpen.value && !__props.disabled && !__props.readonly ? (openBlock(), createElementBlock("div", {
           key: 1,
           ref_key: "panelRef",
@@ -6949,7 +6827,7 @@ const _sfc_main$h = /* @__PURE__ */ defineComponent({
           createElementVNode("div", {
             class: normalizeClass(panelContentClasses.value)
           }, [
-            __props.mode === "single" ? (openBlock(), createElementBlock("div", _hoisted_4$8, [
+            __props.mode === "single" ? (openBlock(), createElementBlock("div", _hoisted_4$9, [
               createElementVNode("div", _hoisted_5$8, [
                 createElementVNode("button", {
                   type: "button",
@@ -7009,12 +6887,15 @@ const _sfc_main$h = /* @__PURE__ */ defineComponent({
                     class: normalizeClass(getDayClasses(day)),
                     disabled: isDayDisabled(day.date),
                     onClick: ($event) => selectDay(day)
-                  }, toDisplayString(day.date.getDate()), 11, _hoisted_10$4);
+                  }, [
+                    createTextVNode(toDisplayString(day.date.getDate()) + " ", 1),
+                    day.isToday ? (openBlock(), createElementBlock("span", _hoisted_11$4, " Hari ini ")) : createCommentVNode("", true)
+                  ], 10, _hoisted_10$4);
                 }), 128))
               ])
             ])) : (openBlock(), createElementBlock(Fragment, { key: 1 }, [
-              createElementVNode("div", _hoisted_11$4, [
-                createElementVNode("div", _hoisted_12$3, [
+              createElementVNode("div", _hoisted_12$3, [
+                createElementVNode("div", _hoisted_13$3, [
                   createElementVNode("button", {
                     type: "button",
                     class: "ina-date-picker__nav-button",
@@ -7025,8 +6906,8 @@ const _sfc_main$h = /* @__PURE__ */ defineComponent({
                       class: "ina-date-picker__nav-icon"
                     })
                   ]),
-                  createElementVNode("div", _hoisted_13$3, [
-                    createElementVNode("div", _hoisted_14$2, [
+                  createElementVNode("div", _hoisted_14$2, [
+                    createElementVNode("div", _hoisted_15$2, [
                       createVNode(MonthPicker, {
                         "model-value": currentMonth.value,
                         disabled: __props.disabled,
@@ -7035,7 +6916,7 @@ const _sfc_main$h = /* @__PURE__ */ defineComponent({
                         "onUpdate:modelValue": handleMonthChange
                       }, null, 8, ["model-value", "disabled", "readonly"])
                     ]),
-                    createElementVNode("div", _hoisted_15$2, [
+                    createElementVNode("div", _hoisted_16$1, [
                       createVNode(YearPicker, {
                         "model-value": currentYear.value,
                         "min-year": 1900,
@@ -7059,7 +6940,7 @@ const _sfc_main$h = /* @__PURE__ */ defineComponent({
                     })
                   ])
                 ]),
-                createElementVNode("div", _hoisted_16$1, [
+                createElementVNode("div", _hoisted_17$1, [
                   (openBlock(), createElementBlock(Fragment, null, renderList(dayNames, (day) => {
                     return createElementVNode("div", {
                       key: `lh-${day}`,
@@ -7073,12 +6954,12 @@ const _sfc_main$h = /* @__PURE__ */ defineComponent({
                       class: normalizeClass(getDayClasses(day)),
                       disabled: isDayDisabled(day.date),
                       onClick: ($event) => selectDay(day)
-                    }, toDisplayString(day.date.getDate()), 11, _hoisted_17$1);
+                    }, toDisplayString(day.date.getDate()), 11, _hoisted_18$1);
                   }), 128))
                 ])
               ]),
-              createElementVNode("div", _hoisted_18$1, [
-                createElementVNode("div", _hoisted_19$1, [
+              createElementVNode("div", _hoisted_19$1, [
+                createElementVNode("div", _hoisted_20$1, [
                   createElementVNode("button", {
                     type: "button",
                     class: "ina-date-picker__nav-button",
@@ -7089,8 +6970,8 @@ const _sfc_main$h = /* @__PURE__ */ defineComponent({
                       class: "ina-date-picker__nav-icon"
                     })
                   ]),
-                  createElementVNode("div", _hoisted_20$1, [
-                    createElementVNode("div", _hoisted_21$1, [
+                  createElementVNode("div", _hoisted_21$1, [
+                    createElementVNode("div", _hoisted_22, [
                       createVNode(MonthPicker, {
                         "model-value": nextMonth.value,
                         disabled: __props.disabled,
@@ -7099,7 +6980,7 @@ const _sfc_main$h = /* @__PURE__ */ defineComponent({
                         "onUpdate:modelValue": handleNextMonthChange
                       }, null, 8, ["model-value", "disabled", "readonly"])
                     ]),
-                    createElementVNode("div", _hoisted_22, [
+                    createElementVNode("div", _hoisted_23, [
                       createVNode(YearPicker, {
                         "model-value": nextYear.value,
                         "min-year": 1900,
@@ -7123,7 +7004,7 @@ const _sfc_main$h = /* @__PURE__ */ defineComponent({
                     })
                   ])
                 ]),
-                createElementVNode("div", _hoisted_23, [
+                createElementVNode("div", _hoisted_24, [
                   (openBlock(), createElementBlock(Fragment, null, renderList(dayNames, (day) => {
                     return createElementVNode("div", {
                       key: `rh-${day}`,
@@ -7137,7 +7018,7 @@ const _sfc_main$h = /* @__PURE__ */ defineComponent({
                       class: normalizeClass(getDayClasses(day)),
                       disabled: isDayDisabled(day.date),
                       onClick: ($event) => selectDay(day)
-                    }, toDisplayString(day.date.getDate()), 11, _hoisted_24);
+                    }, toDisplayString(day.date.getDate()), 11, _hoisted_25);
                   }), 128))
                 ])
               ])
@@ -7152,17 +7033,17 @@ const _sfc_main$h = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const DatePicker = /* @__PURE__ */ _export_sfc(_sfc_main$h, [["__scopeId", "data-v-b36c8028"]]);
-const _hoisted_1$d = ["disabled"];
-const _hoisted_2$d = {
+const DatePicker = /* @__PURE__ */ _export_sfc(_sfc_main$i, [["__scopeId", "data-v-2e07b81c"]]);
+const _hoisted_1$e = ["disabled"];
+const _hoisted_2$e = {
   key: 0,
   class: "ina-select-dropdown__trigger-prefix"
 };
-const _hoisted_3$b = {
+const _hoisted_3$d = {
   key: 0,
   class: "ina-select-dropdown__search"
 };
-const _hoisted_4$7 = ["aria-label", "disabled"];
+const _hoisted_4$8 = ["aria-label", "disabled"];
 const _hoisted_5$7 = {
   key: 1,
   class: "ina-select-dropdown__preview"
@@ -7204,7 +7085,7 @@ const _hoisted_20 = {
   class: "ina-select-dropdown__loading"
 };
 const _hoisted_21 = { class: "ina-select-dropdown__loading-spinner" };
-const _sfc_main$g = /* @__PURE__ */ defineComponent({
+const _sfc_main$h = /* @__PURE__ */ defineComponent({
   __name: "SelectDropdown",
   props: {
     modelValue: { default: null },
@@ -7479,7 +7360,7 @@ const _sfc_main$g = /* @__PURE__ */ defineComponent({
           class: normalizeClass(triggerClasses.value),
           onClick: toggleDropdown
         }, [
-          __props.prefixNode ? (openBlock(), createElementBlock("span", _hoisted_2$d, [
+          __props.prefixNode ? (openBlock(), createElementBlock("span", _hoisted_2$e, [
             (openBlock(), createBlock(resolveDynamicComponent(__props.prefixNode)))
           ])) : createCommentVNode("", true),
           createElementVNode("span", {
@@ -7494,7 +7375,7 @@ const _sfc_main$g = /* @__PURE__ */ defineComponent({
             size: __props.size === "sm" ? 16 : 20,
             class: normalizeClass(triggerIconClasses.value)
           }, null, 8, ["size", "class"]))
-        ], 10, _hoisted_1$d),
+        ], 10, _hoisted_1$e),
         createVNode(Transition, { name: "dropdown" }, {
           default: withCtx(() => [
             isOpen.value && !__props.disabled ? (openBlock(), createElementBlock("div", {
@@ -7504,7 +7385,7 @@ const _sfc_main$g = /* @__PURE__ */ defineComponent({
               class: normalizeClass(panelClasses.value),
               style: normalizeStyle(panelStyle.value)
             }, [
-              __props.searchable ? (openBlock(), createElementBlock("div", _hoisted_3$b, [
+              __props.searchable ? (openBlock(), createElementBlock("div", _hoisted_3$d, [
                 withDirectives(createElementVNode("input", {
                   "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => internalSearchTerm.value = $event),
                   type: "text",
@@ -7513,7 +7394,7 @@ const _sfc_main$g = /* @__PURE__ */ defineComponent({
                   disabled: __props.disabled,
                   class: normalizeClass(searchInputClasses.value),
                   onInput: handleSearchInput
-                }, null, 42, _hoisted_4$7), [
+                }, null, 42, _hoisted_4$8), [
                   [vModelText, internalSearchTerm.value]
                 ])
               ])) : createCommentVNode("", true),
@@ -7631,21 +7512,21 @@ const _sfc_main$g = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const SelectDropdown = /* @__PURE__ */ _export_sfc(_sfc_main$g, [["__scopeId", "data-v-48ba2789"]]);
-const _hoisted_1$c = ["aria-labelledby", "aria-describedby"];
-const _hoisted_2$c = {
+const SelectDropdown = /* @__PURE__ */ _export_sfc(_sfc_main$h, [["__scopeId", "data-v-48ba2789"]]);
+const _hoisted_1$d = ["aria-labelledby", "aria-describedby"];
+const _hoisted_2$d = {
   key: 0,
   class: "ina-drawer__header"
 };
-const _hoisted_3$a = ["id"];
-const _hoisted_4$6 = ["aria-label"];
+const _hoisted_3$c = ["id"];
+const _hoisted_4$7 = ["aria-label"];
 const _hoisted_5$6 = { class: "ina-drawer__content" };
 const _hoisted_6$5 = ["id"];
 const _hoisted_7$5 = {
   key: 1,
   class: "ina-drawer__footer"
 };
-const _sfc_main$f = /* @__PURE__ */ defineComponent({
+const _sfc_main$g = /* @__PURE__ */ defineComponent({
   __name: "Drawer",
   props: {
     modelValue: { type: Boolean, default: false },
@@ -7768,7 +7649,7 @@ const _sfc_main$f = /* @__PURE__ */ defineComponent({
                 onClick: _cache[0] || (_cache[0] = withModifiers(() => {
                 }, ["stop"]))
               }, [
-                __props.showHeader ? (openBlock(), createElementBlock("div", _hoisted_2$c, [
+                __props.showHeader ? (openBlock(), createElementBlock("div", _hoisted_2$d, [
                   createElementVNode("h2", {
                     id: titleId.value,
                     class: "ina-drawer__title"
@@ -7776,7 +7657,7 @@ const _sfc_main$f = /* @__PURE__ */ defineComponent({
                     renderSlot(_ctx.$slots, "title", {}, () => [
                       createTextVNode(toDisplayString(__props.title), 1)
                     ], true)
-                  ], 8, _hoisted_3$a),
+                  ], 8, _hoisted_3$c),
                   __props.showCloseButton ? (openBlock(), createElementBlock("button", {
                     key: 0,
                     type: "button",
@@ -7799,7 +7680,7 @@ const _sfc_main$f = /* @__PURE__ */ defineComponent({
                         "stroke-linejoin": "round"
                       })
                     ], -1)
-                  ])], 8, _hoisted_4$6)) : createCommentVNode("", true)
+                  ])], 8, _hoisted_4$7)) : createCommentVNode("", true)
                 ])) : createCommentVNode("", true),
                 createElementVNode("div", _hoisted_5$6, [
                   __props.description ? (openBlock(), createElementBlock("div", {
@@ -7812,7 +7693,7 @@ const _sfc_main$f = /* @__PURE__ */ defineComponent({
                 __props.showFooter ? (openBlock(), createElementBlock("div", _hoisted_7$5, [
                   renderSlot(_ctx.$slots, "footer", {}, void 0, true)
                 ])) : createCommentVNode("", true)
-              ], 10, _hoisted_1$c)
+              ], 10, _hoisted_1$d)
             ], 2)) : createCommentVNode("", true)
           ]),
           _: 3
@@ -7821,8 +7702,8 @@ const _sfc_main$f = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const Drawer = /* @__PURE__ */ _export_sfc(_sfc_main$f, [["__scopeId", "data-v-d7406981"]]);
-const _sfc_main$e = /* @__PURE__ */ defineComponent({
+const Drawer = /* @__PURE__ */ _export_sfc(_sfc_main$g, [["__scopeId", "data-v-d7406981"]]);
+const _sfc_main$f = /* @__PURE__ */ defineComponent({
   __name: "Skeleton",
   props: {
     width: { default: "100%" },
@@ -7860,16 +7741,16 @@ const _sfc_main$e = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _hoisted_1$b = ["aria-label"];
-const _hoisted_2$b = {
+const _hoisted_1$c = ["aria-label"];
+const _hoisted_2$c = {
   key: 0,
   class: "ina-spinner__title"
 };
-const _hoisted_3$9 = {
+const _hoisted_3$b = {
   key: 1,
   class: "ina-spinner__subtitle"
 };
-const _sfc_main$d = /* @__PURE__ */ defineComponent({
+const _sfc_main$e = /* @__PURE__ */ defineComponent({
   __name: "Spinner",
   props: {
     size: { default: 32 },
@@ -7916,15 +7797,15 @@ const _sfc_main$d = /* @__PURE__ */ defineComponent({
           class: normalizeClass(["ina-spinner__element", elementClasses.value]),
           style: normalizeStyle(elementStyle.value)
         }, null, 6),
-        !__props.spinnerOnly ? (openBlock(), createElementBlock("div", _hoisted_2$b, toDisplayString(__props.title), 1)) : createCommentVNode("", true),
-        !__props.spinnerOnly ? (openBlock(), createElementBlock("div", _hoisted_3$9, toDisplayString(__props.subtitle), 1)) : createCommentVNode("", true)
-      ], 10, _hoisted_1$b);
+        !__props.spinnerOnly ? (openBlock(), createElementBlock("div", _hoisted_2$c, toDisplayString(__props.title), 1)) : createCommentVNode("", true),
+        !__props.spinnerOnly ? (openBlock(), createElementBlock("div", _hoisted_3$b, toDisplayString(__props.subtitle), 1)) : createCommentVNode("", true)
+      ], 10, _hoisted_1$c);
     };
   }
 });
-const _hoisted_1$a = ["onClick"];
-const _hoisted_2$a = { class: "ina-stepper__icon-wrapper" };
-const _hoisted_3$8 = {
+const _hoisted_1$b = ["onClick"];
+const _hoisted_2$b = { class: "ina-stepper__icon-wrapper" };
+const _hoisted_3$a = {
   key: 0,
   xmlns: "http://www.w3.org/2000/svg",
   class: "ina-stepper__check-icon",
@@ -7937,12 +7818,12 @@ const _hoisted_3$8 = {
   "stroke-linecap": "round",
   "stroke-linejoin": "round"
 };
-const _hoisted_4$5 = {
+const _hoisted_4$6 = {
   key: 2,
   class: "ina-stepper__step-number"
 };
 const _hoisted_5$5 = { class: "ina-stepper__label" };
-const _sfc_main$c = /* @__PURE__ */ defineComponent({
+const _sfc_main$d = /* @__PURE__ */ defineComponent({
   __name: "Stepper",
   props: {
     steps: {},
@@ -7984,22 +7865,22 @@ const _sfc_main$c = /* @__PURE__ */ defineComponent({
                 return !step.disabled && ((_a = props.onStepClick) == null ? void 0 : _a.call(props, index2));
               }
             }, [
-              createElementVNode("div", _hoisted_2$a, [
-                index2 < props.currentStep ? (openBlock(), createElementBlock("svg", _hoisted_3$8, [..._cache[0] || (_cache[0] = [
+              createElementVNode("div", _hoisted_2$b, [
+                index2 < props.currentStep ? (openBlock(), createElementBlock("svg", _hoisted_3$a, [..._cache[0] || (_cache[0] = [
                   createElementVNode("path", {
                     stroke: "none",
                     d: "M0 0h24v24H0z",
                     fill: "none"
                   }, null, -1),
                   createElementVNode("path", { d: "M5 12l5 5l10 -10" }, null, -1)
-                ])])) : step.icon ? (openBlock(), createBlock(resolveDynamicComponent(step.icon), { key: 1 })) : (openBlock(), createElementBlock("span", _hoisted_4$5, toDisplayString(index2 + 1), 1))
+                ])])) : step.icon ? (openBlock(), createBlock(resolveDynamicComponent(step.icon), { key: 1 })) : (openBlock(), createElementBlock("span", _hoisted_4$6, toDisplayString(index2 + 1), 1))
               ]),
               createElementVNode("div", _hoisted_5$5, [
                 typeof step.label === "string" ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [
                   createTextVNode(toDisplayString(step.label), 1)
                 ], 64)) : (openBlock(), createBlock(resolveDynamicComponent(step.label), { key: 1 }))
               ])
-            ], 10, _hoisted_1$a),
+            ], 10, _hoisted_1$b),
             index2 < props.steps.length - 1 ? (openBlock(), createElementBlock("div", {
               key: 0,
               class: normalizeClass([
@@ -8015,18 +7896,18 @@ const _sfc_main$c = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const Stepper = /* @__PURE__ */ _export_sfc(_sfc_main$c, [["__scopeId", "data-v-91ea04f2"]]);
-const _hoisted_1$9 = ["aria-selected", "aria-disabled", "disabled", "onClick", "onKeydown"];
-const _hoisted_2$9 = { key: 0 };
-const _hoisted_3$7 = { key: 1 };
-const _sfc_main$b = /* @__PURE__ */ defineComponent({
+const Stepper = /* @__PURE__ */ _export_sfc(_sfc_main$d, [["__scopeId", "data-v-91ea04f2"]]);
+const _hoisted_1$a = ["aria-selected", "aria-disabled", "disabled", "onClick", "onKeydown"];
+const _hoisted_2$a = { key: 0 };
+const _hoisted_3$9 = { key: 1 };
+const _sfc_main$c = /* @__PURE__ */ defineComponent({
   __name: "TabHorizontal",
   props: {
     items: {},
     value: {},
     defaultValue: {},
     onChange: {},
-    size: { default: "md" },
+    size: { default: "sm" },
     variant: { default: "outline" },
     fullWidth: { type: Boolean, default: false },
     useBrandColor: { type: Boolean, default: false },
@@ -8149,26 +8030,27 @@ const _sfc_main$b = /* @__PURE__ */ defineComponent({
               onClick: ($event) => handleTabClick(item.value, item.disabled),
               onKeydown: ($event) => handleKeyDown($event, item.value, item.disabled)
             }, [
-              typeof item.label !== "string" ? (openBlock(), createElementBlock("div", _hoisted_2$9, [
+              typeof item.label !== "string" ? (openBlock(), createElementBlock("div", _hoisted_2$a, [
                 (openBlock(), createBlock(resolveDynamicComponent(item.label)))
-              ])) : (openBlock(), createElementBlock("span", _hoisted_3$7, toDisplayString(item.label), 1))
-            ], 42, _hoisted_1$9);
+              ])) : (openBlock(), createElementBlock("span", _hoisted_3$9, toDisplayString(item.label), 1))
+            ], 42, _hoisted_1$a);
           }), 128))
         ], 2)
       ], 2);
     };
   }
 });
-const _hoisted_1$8 = ["aria-selected", "aria-disabled", "disabled", "onClick", "onKeydown"];
-const _hoisted_2$8 = { key: 1 };
-const _sfc_main$a = /* @__PURE__ */ defineComponent({
+const _hoisted_1$9 = ["aria-selected", "aria-disabled", "disabled", "onClick", "onKeydown"];
+const _hoisted_2$9 = { key: 0 };
+const _hoisted_3$8 = { key: 1 };
+const _sfc_main$b = /* @__PURE__ */ defineComponent({
   __name: "TabVertical",
   props: {
     items: {},
     value: {},
     defaultValue: {},
     onChange: {},
-    size: { default: "md" },
+    size: { default: "sm" },
     variant: { default: "outline" },
     useBrandColor: { type: Boolean, default: false },
     disabled: { type: Boolean, default: false },
@@ -8182,9 +8064,7 @@ const _sfc_main$a = /* @__PURE__ */ defineComponent({
     var _a;
     const props = __props;
     const emit = __emit;
-    const internalValue = ref(
-      props.defaultValue || ((_a = props.items[0]) == null ? void 0 : _a.value) || ""
-    );
+    const internalValue = ref(props.defaultValue || ((_a = props.items[0]) == null ? void 0 : _a.value) || "");
     const currentValue = computed(() => {
       return props.value !== void 0 ? props.value : internalValue.value;
     });
@@ -8290,15 +8170,17 @@ const _sfc_main$a = /* @__PURE__ */ defineComponent({
               onClick: ($event) => handleTabClick(item.value, item.disabled),
               onKeydown: ($event) => handleKeyDown($event, item.value, item.disabled)
             }, [
-              typeof item.label !== "string" ? (openBlock(), createBlock(resolveDynamicComponent(item.label), { key: 0 })) : (openBlock(), createElementBlock("span", _hoisted_2$8, toDisplayString(item.label), 1))
-            ], 42, _hoisted_1$8);
+              typeof item.label !== "string" ? (openBlock(), createElementBlock("div", _hoisted_2$9, [
+                (openBlock(), createBlock(resolveDynamicComponent(item.label)))
+              ])) : (openBlock(), createElementBlock("span", _hoisted_3$8, toDisplayString(item.label), 1))
+            ], 42, _hoisted_1$9);
           }), 128))
         ], 2)
       ], 6);
     };
   }
 });
-const _sfc_main$9 = /* @__PURE__ */ defineComponent({
+const _sfc_main$a = /* @__PURE__ */ defineComponent({
   __name: "TableProgressBar",
   props: {
     visible: { type: Boolean, default: true },
@@ -8359,7 +8241,7 @@ const _sfc_main$9 = /* @__PURE__ */ defineComponent({
         key: 0,
         class: normalizeClass(containerClasses.value)
       }, [
-        createVNode(_sfc_main$l, {
+        createVNode(_sfc_main$m, {
           visible: true,
           progress: progress.value,
           variant: __props.variant,
@@ -8371,13 +8253,13 @@ const _sfc_main$9 = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _hoisted_1$7 = { class: "ina-table__search-controls" };
-const _hoisted_2$7 = {
+const _hoisted_1$8 = { class: "ina-table__search-controls" };
+const _hoisted_2$8 = {
   key: 0,
   class: "ina-table__header-cell"
 };
-const _hoisted_3$6 = { class: "ina-table__sort-controls" };
-const _hoisted_4$4 = {
+const _hoisted_3$7 = { class: "ina-table__sort-controls" };
+const _hoisted_4$5 = {
   key: 1,
   class: "ina-table__sort-icon"
 };
@@ -8393,7 +8275,7 @@ const _hoisted_10$2 = {
 const _hoisted_11$2 = ["tabindex"];
 const _hoisted_12$1 = ["onClick"];
 const _hoisted_13$1 = { class: "ina-table__pagination" };
-const _sfc_main$8 = /* @__PURE__ */ defineComponent({
+const _sfc_main$9 = /* @__PURE__ */ defineComponent({
   __name: "Table",
   props: {
     columns: {},
@@ -8647,15 +8529,15 @@ const _sfc_main$8 = /* @__PURE__ */ defineComponent({
           key: 0,
           class: normalizeClass(searchContainerClasses.value)
         }, [
-          createElementVNode("div", _hoisted_1$7, [
-            createVNode(_sfc_main$z, {
+          createElementVNode("div", _hoisted_1$8, [
+            createVNode(_sfc_main$A, {
               modelValue: searchInput.value,
               placeholder: props.searchPlaceholder || props.placeholderSearch || "Input pencarian",
               disabled: loading.value,
               "onUpdate:modelValue": handleSearchChange,
               onKeydown: handleSearchKeyDown
             }, null, 8, ["modelValue", "placeholder", "disabled"]),
-            createVNode(_sfc_main$D, {
+            createVNode(_sfc_main$E, {
               disabled: loading.value,
               onClick: handleSearchButton
             }, {
@@ -8666,7 +8548,7 @@ const _sfc_main$8 = /* @__PURE__ */ defineComponent({
             }, 8, ["disabled"])
           ])
         ], 2)) : createCommentVNode("", true),
-        createVNode(_sfc_main$9, {
+        createVNode(_sfc_main$a, {
           visible: loading.value,
           loading: loading.value,
           variant: "primary",
@@ -8681,8 +8563,8 @@ const _sfc_main$8 = /* @__PURE__ */ defineComponent({
             class: normalizeClass(tableHeaderClasses.value)
           }, [
             createElementVNode("tr", null, [
-              __props.selectable ? (openBlock(), createElementBlock("th", _hoisted_2$7, [
-                createVNode(_sfc_main$A, {
+              __props.selectable ? (openBlock(), createElementBlock("th", _hoisted_2$8, [
+                createVNode(_sfc_main$B, {
                   id: `${reactId.value}-select-all`,
                   label: "",
                   modelValue: allSelected.value,
@@ -8698,7 +8580,7 @@ const _sfc_main$8 = /* @__PURE__ */ defineComponent({
                     col.sortable && "ina-table__header-cell--sortable"
                   ])
                 }, [
-                  createElementVNode("div", _hoisted_3$6, [
+                  createElementVNode("div", _hoisted_3$7, [
                     createTextVNode(toDisplayString(col.header) + " ", 1),
                     col.sortable ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [
                       __props.renderSortIndicator ? renderSlot(_ctx.$slots, "sort-indicator", {
@@ -8708,7 +8590,7 @@ const _sfc_main$8 = /* @__PURE__ */ defineComponent({
                         isSorted: isSorted(col),
                         sortOrder: sortOrder.value,
                         handleSort: (order) => handleSort(col, order)
-                      }) : (openBlock(), createElementBlock("div", _hoisted_4$4, [
+                      }) : (openBlock(), createElementBlock("div", _hoisted_4$5, [
                         createElementVNode("div", {
                           class: normalizeClass([
                             "ina-table__sort-button",
@@ -8760,7 +8642,7 @@ const _sfc_main$8 = /* @__PURE__ */ defineComponent({
                 onClick: (e) => handleRowClick(row, e)
               }, [
                 __props.selectable ? (openBlock(), createElementBlock("td", _hoisted_10$2, [
-                  createVNode(_sfc_main$A, {
+                  createVNode(_sfc_main$B, {
                     id: `${reactId.value}-select-${String(row[__props.rowKey])}`,
                     label: "",
                     modelValue: selectedMap.value[String(row[__props.rowKey])] || false,
@@ -8810,7 +8692,7 @@ const _sfc_main$8 = /* @__PURE__ */ defineComponent({
           ], 2)
         ], 2),
         createElementVNode("div", _hoisted_13$1, [
-          createVNode(_sfc_main$o, {
+          createVNode(_sfc_main$p, {
             modelValue: page.value,
             totalPages: totalPages.value,
             pageSize: pageSize.value,
@@ -8825,13 +8707,13 @@ const _sfc_main$8 = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _hoisted_1$6 = ["for"];
-const _hoisted_2$6 = {
+const _hoisted_1$7 = ["for"];
+const _hoisted_2$7 = {
   key: 0,
   class: "ina-text-area__required"
 };
-const _hoisted_3$5 = ["id", "placeholder", "disabled", "readonly", "maxlength", "rows", "autocomplete", "spellcheck", "autocapitalize", "autocorrect", "dir"];
-const _sfc_main$7 = /* @__PURE__ */ defineComponent({
+const _hoisted_3$6 = ["id", "placeholder", "disabled", "readonly", "maxlength", "rows", "autocomplete", "spellcheck", "autocapitalize", "autocorrect", "dir"];
+const _sfc_main$8 = /* @__PURE__ */ defineComponent({
   __name: "TextArea",
   props: {
     modelValue: { default: "" },
@@ -9028,8 +8910,8 @@ const _sfc_main$7 = /* @__PURE__ */ defineComponent({
           class: "ina-text-area__label"
         }, [
           createTextVNode(toDisplayString(__props.label) + " ", 1),
-          __props.required ? (openBlock(), createElementBlock("span", _hoisted_2$6, "*")) : createCommentVNode("", true)
-        ], 8, _hoisted_1$6)) : createCommentVNode("", true),
+          __props.required ? (openBlock(), createElementBlock("span", _hoisted_2$7, "*")) : createCommentVNode("", true)
+        ], 8, _hoisted_1$7)) : createCommentVNode("", true),
         createElementVNode("div", {
           class: normalizeClass(["ina-text-area__wrapper", wrapperClasses.value])
         }, [
@@ -9053,7 +8935,7 @@ const _sfc_main$7 = /* @__PURE__ */ defineComponent({
             onInput: handleInput,
             onBlur: handleBlur,
             onFocus: handleFocus
-          }), null, 16, _hoisted_3$5), [
+          }), null, 16, _hoisted_3$6), [
             [vModelText, inputValue.value]
           ]),
           __props.showClearButton && inputValue.value !== "" && !__props.disabled ? (openBlock(), createElementBlock("button", {
@@ -9081,6 +8963,249 @@ const _sfc_main$7 = /* @__PURE__ */ defineComponent({
     };
   }
 });
+const _hoisted_1$6 = {
+  key: 0,
+  class: "ina-one-time-password__title"
+};
+const _hoisted_2$6 = {
+  key: 1,
+  class: "ina-one-time-password__description"
+};
+const _hoisted_3$5 = { class: "ina-one-time-password__container" };
+const _hoisted_4$4 = ["value", "disabled", "readonly", "aria-label", "onInput", "onKeydown", "onFocus"];
+const _sfc_main$7 = /* @__PURE__ */ defineComponent({
+  __name: "OneTimePassword",
+  props: {
+    modelValue: { default: "" },
+    length: { default: 6 },
+    title: {},
+    description: {},
+    helperText: {},
+    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"],
+  setup(__props, { emit: __emit }) {
+    const props = __props;
+    const emit = __emit;
+    const inputRefs = ref([]);
+    const isInternalUpdate = ref(false);
+    const setInputRef = (el, index2) => {
+      if (el) {
+        inputRefs.value[index2] = el;
+      }
+    };
+    watch(
+      () => props.length,
+      () => {
+        inputRefs.value = inputRefs.value.slice(0, props.length);
+      },
+      { immediate: true }
+    );
+    onMounted(() => {
+      if (props.autoFocus && inputRefs.value[0] && !props.disabled && !props.readonly) {
+        inputRefs.value[0].focus();
+      }
+    });
+    watch(
+      () => props.modelValue,
+      (newValue, oldValue) => {
+        if (isInternalUpdate.value) {
+          isInternalUpdate.value = false;
+          return;
+        }
+        const currentValue = newValue || "";
+        const previousValue = oldValue || "";
+        if (currentValue.length === props.length && previousValue.length !== props.length) {
+          nextTick(() => {
+            emit("complete", currentValue);
+          });
+        }
+      }
+    );
+    const containerClasses = computed(() => {
+      return clsx("ina-one-time-password", props.className);
+    });
+    const inputClasses = computed(() => {
+      return clsx(
+        "ina-one-time-password__input",
+        props.error && "ina-one-time-password__input--error"
+      );
+    });
+    const helperTextClasses = computed(() => {
+      return clsx(
+        "ina-one-time-password__helper-text",
+        props.error && "ina-one-time-password__helper-text--error"
+      );
+    });
+    const getDigitValue = (index2) => {
+      var _a;
+      return ((_a = props.modelValue) == null ? void 0 : _a[index2]) || "";
+    };
+    const handleChange = (index2, event) => {
+      var _a;
+      const target = event.target;
+      const inputValue = target.value;
+      if (inputValue && !/^\d$/.test(inputValue)) {
+        target.value = ((_a = props.modelValue) == null ? void 0 : _a[index2]) || "";
+        return;
+      }
+      const currentValue = props.modelValue || "";
+      const newValue = currentValue.split("");
+      newValue[index2] = inputValue;
+      const updatedValue = newValue.join("").slice(0, props.length);
+      isInternalUpdate.value = true;
+      emit("update:modelValue", updatedValue);
+      if (updatedValue.length === props.length) {
+        nextTick(() => {
+          emit("complete", updatedValue);
+        });
+      }
+      if (inputValue && index2 < props.length - 1) {
+        const nextIndex = index2 + 1;
+        nextTick(() => {
+          var _a2;
+          if (inputRefs.value[nextIndex] && !props.disabled && !props.readonly) {
+            (_a2 = inputRefs.value[nextIndex]) == null ? void 0 : _a2.focus();
+          }
+        });
+      }
+    };
+    const handleKeyDown = (index2, event) => {
+      var _a, _b, _c;
+      if (event.key === "Backspace") {
+        const currentValue = props.modelValue || "";
+        if (!currentValue[index2] && index2 > 0) {
+          const prevIndex = index2 - 1;
+          if (inputRefs.value[prevIndex]) {
+            (_a = inputRefs.value[prevIndex]) == null ? void 0 : _a.focus();
+            const newValue = (props.modelValue || "").split("");
+            newValue[prevIndex] = "";
+            const updatedValue = newValue.join("");
+            isInternalUpdate.value = true;
+            emit("update:modelValue", updatedValue);
+          }
+        } else {
+          const newValue = (props.modelValue || "").split("");
+          newValue[index2] = "";
+          const updatedValue = newValue.join("");
+          isInternalUpdate.value = true;
+          emit("update:modelValue", updatedValue);
+        }
+      }
+      if (event.key === "ArrowLeft" && index2 > 0) {
+        event.preventDefault();
+        (_b = inputRefs.value[index2 - 1]) == null ? void 0 : _b.focus();
+      }
+      if (event.key === "ArrowRight" && index2 < props.length - 1) {
+        event.preventDefault();
+        (_c = inputRefs.value[index2 + 1]) == null ? void 0 : _c.focus();
+      }
+      if ((event.ctrlKey || event.metaKey) && event.key === "v") {
+        event.preventDefault();
+        navigator.clipboard.readText().then((text) => {
+          const digits = text.replace(/\D/g, "").slice(0, props.length);
+          if (digits) {
+            isInternalUpdate.value = true;
+            emit("update:modelValue", digits);
+            if (digits.length === props.length) {
+              nextTick(() => {
+                emit("complete", digits);
+              });
+            }
+            const focusIndex = Math.min(digits.length - 1, props.length - 1);
+            nextTick(() => {
+              var _a2;
+              if (inputRefs.value[focusIndex]) {
+                (_a2 = inputRefs.value[focusIndex]) == null ? void 0 : _a2.focus();
+              }
+            });
+          }
+        });
+      }
+    };
+    const handleFocus = (index2) => {
+      nextTick(() => {
+        var _a;
+        if (inputRefs.value[index2]) {
+          (_a = inputRefs.value[index2]) == null ? void 0 : _a.select();
+        }
+      });
+    };
+    const handleBlur = () => {
+    };
+    const handlePaste = (event) => {
+      event.preventDefault();
+      const pastedText = event.clipboardData.getData("text");
+      const digits = pastedText.replace(/\D/g, "").slice(0, props.length);
+      if (digits) {
+        isInternalUpdate.value = true;
+        emit("update:modelValue", digits);
+        if (digits.length === props.length) {
+          nextTick(() => {
+            emit("complete", digits);
+          });
+        }
+        const focusIndex = Math.min(digits.length - 1, props.length - 1);
+        nextTick(() => {
+          var _a;
+          if (inputRefs.value[focusIndex]) {
+            (_a = inputRefs.value[focusIndex]) == null ? void 0 : _a.focus();
+          }
+        });
+      }
+    };
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", {
+        class: normalizeClass(containerClasses.value)
+      }, [
+        __props.title ? (openBlock(), createElementBlock("div", _hoisted_1$6, [
+          typeof __props.title === "string" ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [
+            createTextVNode(toDisplayString(__props.title), 1)
+          ], 64)) : (openBlock(), createBlock(resolveDynamicComponent(__props.title), { key: 1 }))
+        ])) : createCommentVNode("", true),
+        __props.description ? (openBlock(), createElementBlock("div", _hoisted_2$6, [
+          typeof __props.description === "string" ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [
+            createTextVNode(toDisplayString(__props.description), 1)
+          ], 64)) : (openBlock(), createBlock(resolveDynamicComponent(__props.description), { key: 1 }))
+        ])) : createCommentVNode("", true),
+        createElementVNode("div", _hoisted_3$5, [
+          (openBlock(true), createElementBlock(Fragment, null, renderList(__props.length, (_, index2) => {
+            return openBlock(), createElementBlock("input", {
+              key: index2,
+              ref_for: true,
+              ref: (el) => setInputRef(el, index2),
+              type: "text",
+              inputmode: "numeric",
+              maxlength: "1",
+              value: getDigitValue(index2),
+              disabled: __props.disabled,
+              readonly: __props.readonly,
+              class: normalizeClass(inputClasses.value),
+              "aria-label": `Digit ${index2 + 1} of ${__props.length}`,
+              onInput: ($event) => handleChange(index2, $event),
+              onKeydown: ($event) => handleKeyDown(index2, $event),
+              onFocus: ($event) => handleFocus(index2),
+              onBlur: handleBlur,
+              onPaste: _cache[0] || (_cache[0] = ($event) => handlePaste($event))
+            }, null, 42, _hoisted_4$4);
+          }), 128))
+        ]),
+        __props.helperText ? (openBlock(), createElementBlock("div", {
+          key: 2,
+          class: normalizeClass(helperTextClasses.value)
+        }, [
+          typeof __props.helperText === "string" ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [
+            createTextVNode(toDisplayString(__props.helperText), 1)
+          ], 64)) : (openBlock(), createBlock(resolveDynamicComponent(__props.helperText), { key: 1 }))
+        ], 2)) : createCommentVNode("", true)
+      ], 2);
+    };
+  }
+});
 const _hoisted_1$5 = {
   key: 0,
   class: "ina-theme-toggle__label"
@@ -10624,47 +10749,48 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
   }
 });
 const index = {
-  Accordion: _sfc_main$M,
+  Accordion: _sfc_main$N,
   AccordionCard,
   AccordionGroup,
   ActionDropdown,
-  Alert: _sfc_main$I,
-  Avatar: _sfc_main$H,
-  Badge: _sfc_main$G,
-  BottomSheet: _sfc_main$F,
-  Breadcrumb: _sfc_main$E,
-  Button: _sfc_main$D,
-  ButtonGroup: _sfc_main$C,
-  Card: _sfc_main$B,
-  Checkbox: _sfc_main$A,
-  Chip: _sfc_main$y,
+  Alert: _sfc_main$J,
+  Avatar: _sfc_main$I,
+  Badge: _sfc_main$H,
+  BottomSheet: _sfc_main$G,
+  Breadcrumb: _sfc_main$F,
+  Button: _sfc_main$E,
+  ButtonGroup: _sfc_main$D,
+  Card: _sfc_main$C,
+  Checkbox: _sfc_main$B,
+  Chip: _sfc_main$z,
   Collapse,
-  Divider: _sfc_main$w,
+  Divider: _sfc_main$x,
   Drawer,
   Dropdown,
-  FieldInputTable: _sfc_main$u,
-  FileUpload: _sfc_main$t,
-  InputSearch: _sfc_main$s,
+  FieldInputTable: _sfc_main$v,
+  FileUpload: _sfc_main$u,
+  InputSearch: _sfc_main$t,
   Modal,
   MonthPicker,
-  MultipleChoiceGrid: _sfc_main$p,
-  Pagination: _sfc_main$o,
-  PasswordInput: _sfc_main$n,
+  MultipleChoiceGrid: _sfc_main$q,
+  Pagination: _sfc_main$p,
+  PasswordInput: _sfc_main$o,
   PhoneInput,
-  ProgressBar: _sfc_main$l,
-  LinearProgressIndicator: _sfc_main$k,
-  RadioInput: _sfc_main$j,
+  ProgressBar: _sfc_main$m,
+  LinearProgressIndicator: _sfc_main$l,
+  RadioInput: _sfc_main$k,
   DatePicker,
   SelectDropdown,
-  Skeleton: _sfc_main$e,
-  Spinner: _sfc_main$d,
+  Skeleton: _sfc_main$f,
+  Spinner: _sfc_main$e,
   Stepper,
-  TabHorizontal: _sfc_main$b,
-  TabVertical: _sfc_main$a,
-  Table: _sfc_main$8,
-  TableProgressBar: _sfc_main$9,
-  TextArea: _sfc_main$7,
-  TextField: _sfc_main$z,
+  TabHorizontal: _sfc_main$c,
+  TabVertical: _sfc_main$b,
+  Table: _sfc_main$9,
+  TableProgressBar: _sfc_main$a,
+  TextArea: _sfc_main$8,
+  TextField: _sfc_main$A,
+  OneTimePassword: _sfc_main$7,
   ThemeToggle: _sfc_main$6,
   TimePicker: _sfc_main$5,
   Toast: _sfc_main$4,
@@ -10675,48 +10801,49 @@ const index = {
   setBrandTheme
 };
 export {
-  _sfc_main$M as Accordion,
+  _sfc_main$N as Accordion,
   AccordionCard,
   AccordionGroup,
   ActionDropdown,
-  _sfc_main$I as Alert,
-  _sfc_main$H as Avatar,
-  _sfc_main$G as Badge,
-  _sfc_main$F as BottomSheet,
-  _sfc_main$E as Breadcrumb,
-  _sfc_main$D as Button,
-  _sfc_main$C as ButtonGroup,
-  _sfc_main$B as Card,
-  _sfc_main$A as Checkbox,
-  _sfc_main$y as Chip,
+  _sfc_main$J as Alert,
+  _sfc_main$I as Avatar,
+  _sfc_main$H as Badge,
+  _sfc_main$G as BottomSheet,
+  _sfc_main$F as Breadcrumb,
+  _sfc_main$E as Button,
+  _sfc_main$D as ButtonGroup,
+  _sfc_main$C as Card,
+  _sfc_main$B as Checkbox,
+  _sfc_main$z as Chip,
   Collapse,
   DatePicker,
-  _sfc_main$w as Divider,
+  _sfc_main$x as Divider,
   Drawer,
   Dropdown,
-  _sfc_main$u as FieldInputTable,
-  _sfc_main$t as FileUpload,
-  _sfc_main$s as InputSearch,
-  _sfc_main$k as LinearProgressIndicator,
+  _sfc_main$v as FieldInputTable,
+  _sfc_main$u as FileUpload,
+  _sfc_main$t as InputSearch,
+  _sfc_main$l as LinearProgressIndicator,
   Modal,
   MonthPicker,
-  _sfc_main$p as MultipleChoiceGrid,
-  _sfc_main$o as Pagination,
-  _sfc_main$n as PasswordInput,
+  _sfc_main$q as MultipleChoiceGrid,
+  _sfc_main$7 as OneTimePassword,
+  _sfc_main$p as Pagination,
+  _sfc_main$o as PasswordInput,
   PhoneInput,
-  _sfc_main$l as ProgressBar,
-  _sfc_main$j as RadioInput,
+  _sfc_main$m as ProgressBar,
+  _sfc_main$k as RadioInput,
   SelectDropdown,
   _sfc_main as SingleFileUpload,
-  _sfc_main$e as Skeleton,
-  _sfc_main$d as Spinner,
+  _sfc_main$f as Skeleton,
+  _sfc_main$e as Spinner,
   Stepper,
-  _sfc_main$b as TabHorizontal,
-  _sfc_main$a as TabVertical,
-  _sfc_main$8 as Table,
-  _sfc_main$9 as TableProgressBar,
-  _sfc_main$7 as TextArea,
-  _sfc_main$z as TextField,
+  _sfc_main$c as TabHorizontal,
+  _sfc_main$b as TabVertical,
+  _sfc_main$9 as Table,
+  _sfc_main$a as TableProgressBar,
+  _sfc_main$8 as TextArea,
+  _sfc_main$A as TextField,
   _sfc_main$6 as ThemeToggle,
   _sfc_main$5 as TimePicker,
   _sfc_main$4 as Toast,