@idds/vue 1.4.16 → 1.4.18

package/dist/index.es.js

@@ -409,12 +409,12 @@ const defaultColorTokens = {
   "secondary-800": "#164564",
   "secondary-900": "#0f2d42"
 };
-const _hoisted_1$J = ["id", "aria-expanded", "aria-controls", "disabled"];
-const _hoisted_2$D = { class: "ina-accordion__title" };
-const _hoisted_3$z = { class: "ina-accordion__toggler" };
+const _hoisted_1$K = ["id", "aria-expanded", "aria-controls", "disabled"];
+const _hoisted_2$E = { class: "ina-accordion__title" };
+const _hoisted_3$A = { class: "ina-accordion__toggler" };
 const _hoisted_4$u = ["id", "aria-labelledby"];
 const _hoisted_5$o = { class: "ina-accordion__body" };
-const _sfc_main$O = /* @__PURE__ */ defineComponent({
+const _sfc_main$P = /* @__PURE__ */ defineComponent({
   __name: "Accordion",
   props: {
     title: { default: "" },
@@ -524,12 +524,12 @@ const _sfc_main$O = /* @__PURE__ */ defineComponent({
           disabled: __props.disabled,
           onClick: handleToggle
         }, [
-          createElementVNode("div", _hoisted_2$D, [
+          createElementVNode("div", _hoisted_2$E, [
             renderSlot(_ctx.$slots, "title", {}, () => [
               createTextVNode(toDisplayString(__props.title), 1)
             ])
           ]),
-          createElementVNode("div", _hoisted_3$z, [
+          createElementVNode("div", _hoisted_3$A, [
             (openBlock(), createElementBlock("svg", {
               class: normalizeClass(["ina-accordion__icon", { "ina-accordion__icon--open": isOpen.value }]),
               viewBox: "0 0 24 24",
@@ -545,7 +545,7 @@ const _sfc_main$O = /* @__PURE__ */ defineComponent({
               }, null, -1)
             ])], 2))
           ])
-        ], 8, _hoisted_1$J),
+        ], 8, _hoisted_1$K),
         createElementVNode("div", {
           id: contentId.value,
           class: normalizeClass(["ina-accordion__content", { "ina-accordion__content--open": isOpen.value }]),
@@ -559,9 +559,9 @@ const _sfc_main$O = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _hoisted_1$I = { class: "ina-accordion-card__item" };
-const _hoisted_2$C = ["id", "aria-expanded", "aria-controls"];
-const _hoisted_3$y = { class: "ina-accordion-card__header-content" };
+const _hoisted_1$J = { class: "ina-accordion-card__item" };
+const _hoisted_2$D = ["id", "aria-expanded", "aria-controls"];
+const _hoisted_3$z = { class: "ina-accordion-card__header-content" };
 const _hoisted_4$t = {
   key: 0,
   class: "ina-accordion-card__icon"
@@ -574,7 +574,7 @@ const _hoisted_7$j = {
 };
 const _hoisted_8$e = ["id", "aria-labelledby"];
 const _hoisted_9$b = { class: "ina-accordion-card__body" };
-const _sfc_main$N = /* @__PURE__ */ defineComponent({
+const _sfc_main$O = /* @__PURE__ */ defineComponent({
   __name: "AccordionCard",
   props: {
     title: { default: "" },
@@ -617,7 +617,7 @@ const _sfc_main$N = /* @__PURE__ */ defineComponent({
       return openBlock(), createElementBlock("div", {
         class: normalizeClass(["ina-accordion-card", cardClasses.value])
       }, [
-        createElementVNode("div", _hoisted_1$I, [
+        createElementVNode("div", _hoisted_1$J, [
           createElementVNode("button", {
             id: headerId.value,
             type: "button",
@@ -626,7 +626,7 @@ const _sfc_main$N = /* @__PURE__ */ defineComponent({
             "aria-controls": contentId.value,
             onClick: toggle
           }, [
-            createElementVNode("div", _hoisted_3$y, [
+            createElementVNode("div", _hoisted_3$z, [
               __props.icon ? (openBlock(), createElementBlock("div", _hoisted_4$t, [
                 (openBlock(), createBlock(resolveDynamicComponent(__props.icon), { size: 20 }))
               ])) : createCommentVNode("", true),
@@ -655,7 +655,7 @@ const _sfc_main$N = /* @__PURE__ */ defineComponent({
                 "stroke-linejoin": "round"
               }, null, -1)
             ])], 2))
-          ], 8, _hoisted_2$C),
+          ], 8, _hoisted_2$D),
           createVNode(Transition, { name: "accordion" }, {
             default: withCtx(() => [
               isOpen.value ? (openBlock(), createElementBlock("div", {
@@ -683,9 +683,9 @@ const _export_sfc = (sfc, props) => {
   }
   return target;
 };
-const AccordionCard = /* @__PURE__ */ _export_sfc(_sfc_main$N, [["__scopeId", "data-v-5e3f081f"]]);
-const _hoisted_1$H = { class: "ina-accordion-group" };
-const _sfc_main$M = /* @__PURE__ */ defineComponent({
+const AccordionCard = /* @__PURE__ */ _export_sfc(_sfc_main$O, [["__scopeId", "data-v-5e3f081f"]]);
+const _hoisted_1$I = { class: "ina-accordion-group" };
+const _sfc_main$N = /* @__PURE__ */ defineComponent({
   __name: "AccordionGroup",
   props: {
     multiple: { type: Boolean, default: false },
@@ -765,17 +765,17 @@ const _sfc_main$M = /* @__PURE__ */ defineComponent({
       openIndexes: computed(() => openIndexes.value)
     });
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", _hoisted_1$H, [
+      return openBlock(), createElementBlock("div", _hoisted_1$I, [
         renderSlot(_ctx.$slots, "default", {}, void 0, true)
       ]);
     };
   }
 });
-const AccordionGroup = /* @__PURE__ */ _export_sfc(_sfc_main$M, [["__scopeId", "data-v-a85c5702"]]);
-const _hoisted_1$G = ["disabled", "aria-expanded"];
-const _hoisted_2$B = { class: "ina-action-dropdown__trigger-content" };
-const _hoisted_3$x = { class: "ina-action-dropdown__menu" };
-const _sfc_main$L = /* @__PURE__ */ defineComponent({
+const AccordionGroup = /* @__PURE__ */ _export_sfc(_sfc_main$N, [["__scopeId", "data-v-a85c5702"]]);
+const _hoisted_1$H = ["disabled", "aria-expanded"];
+const _hoisted_2$C = { class: "ina-action-dropdown__trigger-content" };
+const _hoisted_3$y = { class: "ina-action-dropdown__menu" };
+const _sfc_main$M = /* @__PURE__ */ defineComponent({
   __name: "ActionDropdown",
   props: {
     disabled: { type: Boolean, default: false },
@@ -903,7 +903,7 @@ const _sfc_main$L = /* @__PURE__ */ defineComponent({
           "aria-expanded": isOpen.value,
           "aria-haspopup": true
         }, [
-          createElementVNode("span", _hoisted_2$B, [
+          createElementVNode("span", _hoisted_2$C, [
             renderSlot(_ctx.$slots, "trigger", {}, () => [
               _cache[1] || (_cache[1] = createElementVNode("svg", {
                 width: "16",
@@ -933,7 +933,7 @@ const _sfc_main$L = /* @__PURE__ */ defineComponent({
               ], -1))
             ], true)
           ])
-        ], 42, _hoisted_1$G),
+        ], 42, _hoisted_1$H),
         createVNode(Transition, { name: "dropdown" }, {
           default: withCtx(() => [
             isOpen.value ? (openBlock(), createElementBlock("div", {
@@ -945,7 +945,7 @@ const _sfc_main$L = /* @__PURE__ */ defineComponent({
               onClick: _cache[0] || (_cache[0] = withModifiers(() => {
               }, ["stop"]))
             }, [
-              createElementVNode("div", _hoisted_3$x, [
+              createElementVNode("div", _hoisted_3$y, [
                 renderSlot(_ctx.$slots, "default", {}, void 0, true)
               ])
             ], 4)) : createCommentVNode("", true)
@@ -956,7 +956,7 @@ const _sfc_main$L = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const ActionDropdown = /* @__PURE__ */ _export_sfc(_sfc_main$L, [["__scopeId", "data-v-7f534f78"]]);
+const ActionDropdown = /* @__PURE__ */ _export_sfc(_sfc_main$M, [["__scopeId", "data-v-7f534f78"]]);
 /**
  * @license @tabler/icons-vue v3.35.0 - MIT
  *
@@ -1188,12 +1188,12 @@ var IconUpload = createVueComponent("outline", "upload", "Upload", [["path", { "
  * 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$F = {
+const _hoisted_1$G = {
   key: 0,
   class: "ina-alert__icon"
 };
-const _hoisted_2$A = { class: "ina-alert__content" };
-const _hoisted_3$w = { class: "ina-alert__text-section" };
+const _hoisted_2$B = { class: "ina-alert__content" };
+const _hoisted_3$x = { class: "ina-alert__text-section" };
 const _hoisted_4$s = {
   key: 0,
   class: "ina-alert__title"
@@ -1207,7 +1207,7 @@ const _hoisted_6$j = {
   class: "ina-alert__actions"
 };
 const _hoisted_7$i = ["aria-label"];
-const _sfc_main$K = /* @__PURE__ */ defineComponent({
+const _sfc_main$L = /* @__PURE__ */ defineComponent({
   __name: "Alert",
   props: {
     variant: { default: "info" },
@@ -1240,7 +1240,7 @@ const _sfc_main$K = /* @__PURE__ */ defineComponent({
         class: normalizeClass(["ina-alert", alertClasses.value]),
         role: "alert"
       }, [
-        __props.icon || showVariantIcon.value ? (openBlock(), createElementBlock("div", _hoisted_1$F, [
+        __props.icon || showVariantIcon.value ? (openBlock(), createElementBlock("div", _hoisted_1$G, [
           __props.icon ? (openBlock(), createBlock(resolveDynamicComponent(__props.icon), {
             key: 0,
             size: 20
@@ -1261,8 +1261,8 @@ const _sfc_main$K = /* @__PURE__ */ defineComponent({
             size: 20
           })) : createCommentVNode("", true)
         ])) : createCommentVNode("", true),
-        createElementVNode("div", _hoisted_2$A, [
-          createElementVNode("div", _hoisted_3$w, [
+        createElementVNode("div", _hoisted_2$B, [
+          createElementVNode("div", _hoisted_3$x, [
             __props.title ? (openBlock(), createElementBlock("div", _hoisted_4$s, toDisplayString(__props.title), 1)) : createCommentVNode("", true),
             _ctx.$slots.default || __props.message ? (openBlock(), createElementBlock("div", _hoisted_5$m, [
               renderSlot(_ctx.$slots, "default", {}, () => [
@@ -1301,8 +1301,8 @@ const _sfc_main$K = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _hoisted_1$E = ["src", "alt"];
-const _sfc_main$J = /* @__PURE__ */ defineComponent({
+const _hoisted_1$F = ["src", "alt"];
+const _sfc_main$K = /* @__PURE__ */ defineComponent({
   __name: "Avatar",
   props: {
     src: {},
@@ -1342,22 +1342,22 @@ const _sfc_main$J = /* @__PURE__ */ defineComponent({
         class: normalizeClass(avatarClasses.value),
         onError: handleImageError,
         onLoad: handleImageLoad
-      }, null, 42, _hoisted_1$E)) : (openBlock(), createElementBlock("div", {
+      }, null, 42, _hoisted_1$F)) : (openBlock(), createElementBlock("div", {
         key: 1,
         class: normalizeClass(avatarClasses.value)
       }, toDisplayString(__props.initials ? __props.initials.slice(0, 2).toUpperCase() : ""), 3));
     };
   }
 });
-const _hoisted_1$D = {
+const _hoisted_1$E = {
   key: 0,
   class: "ina-badge__prefix-icon"
 };
-const _hoisted_2$z = {
+const _hoisted_2$A = {
   key: 1,
   class: "ina-badge__suffix-icon"
 };
-const _sfc_main$I = /* @__PURE__ */ defineComponent({
+const _sfc_main$J = /* @__PURE__ */ defineComponent({
   __name: "Badge",
   props: {
     type: { default: "soft" },
@@ -1387,20 +1387,20 @@ const _sfc_main$I = /* @__PURE__ */ defineComponent({
       return openBlock(), createElementBlock("span", {
         class: normalizeClass(["ina-badge", badgeClasses.value])
       }, [
-        __props.prefixIcon ? (openBlock(), createElementBlock("span", _hoisted_1$D, [
+        __props.prefixIcon ? (openBlock(), createElementBlock("span", _hoisted_1$E, [
           (openBlock(), createBlock(resolveDynamicComponent(__props.prefixIcon)))
         ])) : createCommentVNode("", true),
         createElementVNode("span", null, [
           renderSlot(_ctx.$slots, "default")
         ]),
-        __props.suffixIcon ? (openBlock(), createElementBlock("span", _hoisted_2$z, [
+        __props.suffixIcon ? (openBlock(), createElementBlock("span", _hoisted_2$A, [
           (openBlock(), createBlock(resolveDynamicComponent(__props.suffixIcon)))
         ])) : createCommentVNode("", true)
       ], 2);
     };
   }
 });
-const _sfc_main$H = /* @__PURE__ */ defineComponent({
+const _sfc_main$I = /* @__PURE__ */ defineComponent({
   __name: "BottomSheet",
   props: {
     open: { type: Boolean, default: false },
@@ -1466,18 +1466,18 @@ const _sfc_main$H = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _hoisted_1$C = { class: "ina-breadcrumb__list" };
-const _hoisted_2$y = {
+const _hoisted_1$D = { class: "ina-breadcrumb__list" };
+const _hoisted_2$z = {
   key: 0,
   class: "ina-breadcrumb__icon"
 };
-const _hoisted_3$v = { class: "ina-breadcrumb__text" };
+const _hoisted_3$w = { class: "ina-breadcrumb__text" };
 const _hoisted_4$r = {
   key: 0,
   class: "ina-breadcrumb__separator",
   "aria-hidden": "true"
 };
-const _sfc_main$G = /* @__PURE__ */ defineComponent({
+const _sfc_main$H = /* @__PURE__ */ defineComponent({
   __name: "Breadcrumb",
   props: {
     items: {},
@@ -1543,7 +1543,7 @@ const _sfc_main$G = /* @__PURE__ */ defineComponent({
         class: normalizeClass(["ina-breadcrumb", breadcrumbClasses.value]),
         "aria-label": "Breadcrumb"
       }, [
-        createElementVNode("ol", _hoisted_1$C, [
+        createElementVNode("ol", _hoisted_1$D, [
           (openBlock(true), createElementBlock(Fragment, null, renderList(__props.items, (item, index2) => {
             return openBlock(), createElementBlock("li", {
               key: index2,
@@ -1555,10 +1555,10 @@ const _sfc_main$G = /* @__PURE__ */ defineComponent({
                 onClick: ($event) => handleItemClick(item, index2)
               }, {
                 default: withCtx(() => [
-                  item.icon ? (openBlock(), createElementBlock("span", _hoisted_2$y, [
+                  item.icon ? (openBlock(), createElementBlock("span", _hoisted_2$z, [
                     (openBlock(), createBlock(resolveDynamicComponent(item.icon), { size: 16 }))
                   ])) : createCommentVNode("", true),
-                  createElementVNode("span", _hoisted_3$v, toDisplayString(getTruncatedLabel(item.label, index2)), 1)
+                  createElementVNode("span", _hoisted_3$w, toDisplayString(getTruncatedLabel(item.label, index2)), 1)
                 ]),
                 _: 2
               }, 1032, ["href", "class", "onClick"])),
@@ -1576,8 +1576,8 @@ const _sfc_main$G = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _hoisted_1$B = ["type", "disabled"];
-const _sfc_main$F = /* @__PURE__ */ defineComponent({
+const _hoisted_1$C = ["type", "disabled"];
+const _sfc_main$G = /* @__PURE__ */ defineComponent({
   __name: "Button",
   props: {
     hierarchy: { default: "primary" },
@@ -1625,13 +1625,13 @@ const _sfc_main$F = /* @__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$B);
+      ], 16, _hoisted_1$C);
     };
   }
 });
-const _hoisted_1$A = ["disabled", "onClick", "aria-pressed", "aria-disabled", "name", "value"];
-const _hoisted_2$x = { class: "ina-button-group__button-content" };
-const _sfc_main$E = /* @__PURE__ */ defineComponent({
+const _hoisted_1$B = ["disabled", "onClick", "aria-pressed", "aria-disabled", "name", "value"];
+const _hoisted_2$y = { class: "ina-button-group__button-content" };
+const _sfc_main$F = /* @__PURE__ */ defineComponent({
   __name: "ButtonGroup",
   props: {
     options: {},
@@ -1693,7 +1693,7 @@ const _sfc_main$E = /* @__PURE__ */ defineComponent({
             name: __props.name,
             value: option.value
           }, [
-            createElementVNode("span", _hoisted_2$x, [
+            createElementVNode("span", _hoisted_2$y, [
               renderSlot(_ctx.$slots, `option-${index2}`, {
                 option,
                 selected: isSelected(option)
@@ -1701,18 +1701,18 @@ const _sfc_main$E = /* @__PURE__ */ defineComponent({
                 createTextVNode(toDisplayString(option.label), 1)
               ])
             ])
-          ], 10, _hoisted_1$A);
+          ], 10, _hoisted_1$B);
         }), 128))
       ], 2);
     };
   }
 });
-const _hoisted_1$z = {
+const _hoisted_1$A = {
   key: 0,
   class: "ina-card__media"
 };
-const _hoisted_2$w = ["src", "alt"];
-const _hoisted_3$u = {
+const _hoisted_2$x = ["src", "alt"];
+const _hoisted_3$v = {
   key: 1,
   class: "ina-card__media"
 };
@@ -1774,7 +1774,7 @@ const _hoisted_22$2 = {
   key: 2,
   class: "ina-card__footer"
 };
-const _sfc_main$D = /* @__PURE__ */ defineComponent({
+const _sfc_main$E = /* @__PURE__ */ defineComponent({
   __name: "Card",
   props: {
     variant: { default: "basic" },
@@ -1843,16 +1843,16 @@ const _sfc_main$D = /* @__PURE__ */ defineComponent({
       return openBlock(), createElementBlock("div", {
         class: normalizeClass(["ina-card", cardClasses.value])
       }, [
-        __props.variant === "basic" && computedMediaPosition.value === "top" ? (openBlock(), createElementBlock("div", _hoisted_1$z, [
+        __props.variant === "basic" && computedMediaPosition.value === "top" ? (openBlock(), createElementBlock("div", _hoisted_1$A, [
           renderSlot(_ctx.$slots, "media", {}, () => [
             __props.mediaSrc ? (openBlock(), createElementBlock("img", {
               key: 0,
               src: __props.mediaSrc,
               alt: __props.mediaAlt || "Card media"
-            }, null, 8, _hoisted_2$w)) : createCommentVNode("", true)
+            }, null, 8, _hoisted_2$x)) : createCommentVNode("", true)
           ])
         ])) : createCommentVNode("", true),
-        __props.variant === "overlay" ? (openBlock(), createElementBlock("div", _hoisted_3$u, [
+        __props.variant === "overlay" ? (openBlock(), createElementBlock("div", _hoisted_3$v, [
           renderSlot(_ctx.$slots, "media", {}, () => [
             __props.mediaSrc ? (openBlock(), createElementBlock("img", {
               key: 0,
@@ -1889,7 +1889,7 @@ const _sfc_main$D = /* @__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$F, {
+              __props.showButton && __props.buttonText ? (openBlock(), createBlock(_sfc_main$G, {
                 key: 0,
                 hierarchy: __props.buttonHierarchy,
                 size: "md",
@@ -1961,9 +1961,9 @@ const _sfc_main$D = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _hoisted_1$y = ["for"];
-const _hoisted_2$v = ["id", "checked", "disabled", "readonly", "indeterminate"];
-const _hoisted_3$t = {
+const _hoisted_1$z = ["for"];
+const _hoisted_2$w = ["id", "checked", "disabled", "readonly", "indeterminate"];
+const _hoisted_3$u = {
   key: 0,
   class: "ina-checkbox__icon",
   width: "14",
@@ -1990,7 +1990,7 @@ const _hoisted_7$g = {
   key: 1,
   class: "ina-checkbox__subtext"
 };
-const _sfc_main$C = /* @__PURE__ */ defineComponent({
+const _sfc_main$D = /* @__PURE__ */ defineComponent({
   __name: "Checkbox",
   props: {
     modelValue: { type: [Boolean, Array], default: false },
@@ -2099,11 +2099,11 @@ const _sfc_main$C = /* @__PURE__ */ defineComponent({
             onChange: handleChange,
             onFocus: handleFocus,
             onBlur: handleBlur
-          }), null, 16, _hoisted_2$v),
+          }), null, 16, _hoisted_2$w),
           createElementVNode("div", {
             class: normalizeClass(boxClasses.value)
           }, [
-            checked.value && !__props.indeterminate ? (openBlock(), createElementBlock("svg", _hoisted_3$t, [..._cache[0] || (_cache[0] = [
+            checked.value && !__props.indeterminate ? (openBlock(), createElementBlock("svg", _hoisted_3$u, [..._cache[0] || (_cache[0] = [
               createElementVNode("path", {
                 d: "M20 6L9 17L4 12",
                 stroke: "currentColor",
@@ -2129,7 +2129,7 @@ const _sfc_main$C = /* @__PURE__ */ defineComponent({
             ])) : createCommentVNode("", true),
             __props.subtext ? (openBlock(), createElementBlock("span", _hoisted_7$g, toDisplayString(__props.subtext), 1)) : createCommentVNode("", true)
           ])
-        ], 10, _hoisted_1$y),
+        ], 10, _hoisted_1$z),
         __props.statusMessage ? (openBlock(), createElementBlock("div", {
           key: 0,
           class: normalizeClass(statusClasses.value)
@@ -2344,9 +2344,9 @@ function sanitizeFileName(fileName) {
   sanitized = sanitized.replace(/^[\s.]+|[\s.]+$/g, "");
   return sanitized || "file";
 }
-const _hoisted_1$x = { class: "ina-text-field" };
-const _hoisted_2$u = ["for"];
-const _hoisted_3$s = {
+const _hoisted_1$y = { class: "ina-text-field" };
+const _hoisted_2$v = ["for"];
+const _hoisted_3$t = {
   key: 0,
   class: "ina-text-field__required"
 };
@@ -2359,7 +2359,7 @@ const _hoisted_6$g = {
   key: 1,
   class: "ina-text-field__char-count"
 };
-const _sfc_main$B = /* @__PURE__ */ defineComponent({
+const _sfc_main$C = /* @__PURE__ */ defineComponent({
   __name: "TextField",
   props: {
     modelValue: { default: "" },
@@ -2572,15 +2572,15 @@ const _sfc_main$B = /* @__PURE__ */ defineComponent({
       }
     });
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", _hoisted_1$x, [
+      return openBlock(), createElementBlock("div", _hoisted_1$y, [
         __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$s, "*")) : createCommentVNode("", true)
-        ], 8, _hoisted_2$u)) : createCommentVNode("", true),
+          __props.required ? (openBlock(), createElementBlock("span", _hoisted_3$t, "*")) : createCommentVNode("", true)
+        ], 8, _hoisted_2$v)) : createCommentVNode("", true),
         createElementVNode("div", {
           class: normalizeClass(wrapperClasses.value)
         }, [
@@ -2643,15 +2643,15 @@ const _sfc_main$B = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _hoisted_1$w = { class: "ina-chip__list" };
-const _hoisted_2$t = ["onClick"];
-const _hoisted_3$r = {
+const _hoisted_1$x = { class: "ina-chip__list" };
+const _hoisted_2$u = ["onClick"];
+const _hoisted_3$s = {
   key: 0,
   class: "ina-chip__custom-field"
 };
 const _hoisted_4$n = { key: 0 };
 const _hoisted_5$i = { key: 1 };
-const _sfc_main$A = /* @__PURE__ */ defineComponent({
+const _sfc_main$B = /* @__PURE__ */ defineComponent({
   __name: "Chip",
   props: {
     options: {},
@@ -2755,21 +2755,21 @@ const _sfc_main$A = /* @__PURE__ */ defineComponent({
       return openBlock(), createElementBlock("div", {
         class: normalizeClass(["ina-chip", chipContainerClasses.value])
       }, [
-        createElementVNode("div", _hoisted_1$w, [
+        createElementVNode("div", _hoisted_1$x, [
           (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$t);
+            }, toDisplayString(opt.label), 11, _hoisted_2$u);
           }), 128))
         ]),
-        __props.showCustomization && showInput.value ? (openBlock(), createElementBlock("div", _hoisted_3$r, [
+        __props.showCustomization && showInput.value ? (openBlock(), createElementBlock("div", _hoisted_3$s, [
           __props.customizationComponent ? (openBlock(), createElementBlock("div", _hoisted_4$n, [
             (openBlock(), createBlock(resolveDynamicComponent(__props.customizationComponent)))
           ])) : (openBlock(), createElementBlock("div", _hoisted_5$i, [
-            createVNode(_sfc_main$B, {
+            createVNode(_sfc_main$C, {
               "model-value": tempValue.value,
               class: "ina-chip__input",
               placeholder: "Masukkan data yang Anda inginkan",
@@ -2784,6 +2784,81 @@ const _sfc_main$A = /* @__PURE__ */ defineComponent({
     };
   }
 });
+const _hoisted_1$w = ["viewBox"];
+const _hoisted_2$t = ["cx", "cy", "r", "stroke-width"];
+const _hoisted_3$r = ["cx", "cy", "r", "stroke-width", "stroke-dasharray", "stroke-dashoffset"];
+const _sfc_main$A = /* @__PURE__ */ defineComponent({
+  __name: "CircleProgressBar",
+  props: {
+    progress: { default: 0 },
+    diameter: { default: 20 },
+    strokeWidth: { default: 3 },
+    variant: { default: "primary" },
+    trackColor: { default: "#EAECF0" },
+    className: { default: "" }
+  },
+  setup(__props) {
+    const props = __props;
+    const normalizedProgress = computed(
+      () => Math.min(100, Math.max(0, props.progress))
+    );
+    const center = computed(() => props.diameter / 2);
+    const radius = computed(() => (props.diameter - props.strokeWidth) / 2);
+    const circumference = computed(() => 2 * Math.PI * radius.value);
+    const strokeDashoffset = computed(
+      () => circumference.value - normalizedProgress.value / 100 * circumference.value
+    );
+    const isCustomColor = computed(() => props.variant.startsWith("#"));
+    const containerClasses = computed(() => {
+      const variantClass = !isCustomColor.value ? `ina-circle-progress-bar--${props.variant}` : "";
+      return ["ina-circle-progress-bar", variantClass, props.className].filter(Boolean).join(" ");
+    });
+    const containerStyle = computed(() => {
+      const style = {
+        "--ina-circle-progress-size": `${props.diameter}px`
+      };
+      if (props.trackColor) {
+        style["--ina-circle-progress-track-color"] = props.trackColor;
+      }
+      if (isCustomColor.value) {
+        style["--ina-circle-progress-color"] = props.variant;
+      }
+      return style;
+    });
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", {
+        class: normalizeClass(containerClasses.value),
+        style: normalizeStyle(containerStyle.value)
+      }, [
+        (openBlock(), createElementBlock("svg", {
+          class: "ina-circle-progress-bar__svg",
+          width: "100%",
+          height: "100%",
+          viewBox: `0 0 ${__props.diameter} ${__props.diameter}`,
+          fill: "none",
+          xmlns: "http://www.w3.org/2000/svg"
+        }, [
+          createElementVNode("circle", {
+            class: "ina-circle-progress-bar__track",
+            cx: center.value,
+            cy: center.value,
+            r: radius.value,
+            "stroke-width": __props.strokeWidth
+          }, null, 8, _hoisted_2$t),
+          createElementVNode("circle", {
+            class: "ina-circle-progress-bar__progress",
+            cx: center.value,
+            cy: center.value,
+            r: radius.value,
+            "stroke-width": __props.strokeWidth,
+            "stroke-dasharray": circumference.value,
+            "stroke-dashoffset": strokeDashoffset.value
+          }, null, 8, _hoisted_3$r)
+        ], 8, _hoisted_1$w))
+      ], 6);
+    };
+  }
+});
 const _hoisted_1$v = ["id", "aria-expanded", "aria-controls"];
 const _hoisted_2$s = { class: "ina-collapse__title" };
 const _hoisted_3$q = ["id", "aria-labelledby"];
@@ -5163,13 +5238,254 @@ const _sfc_main$p = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _hoisted_1$k = ["for"];
-const _hoisted_2$j = {
+const COUNTRIES = [
+  { code: "ID", name: "Indonesia", dialCode: "+62", flag: "🇮🇩" },
+  { code: "AF", name: "Afghanistan", dialCode: "+93", flag: "🇦🇫" },
+  { code: "AL", name: "Albania", dialCode: "+355", flag: "🇦🇱" },
+  { code: "DZ", name: "Algeria", dialCode: "+213", flag: "🇩🇿" },
+  { code: "AS", name: "American Samoa", dialCode: "+1684", flag: "🇦🇸" },
+  { code: "AD", name: "Andorra", dialCode: "+376", flag: "🇦🇩" },
+  { code: "AO", name: "Angola", dialCode: "+244", flag: "🇦🇴" },
+  { code: "AI", name: "Anguilla", dialCode: "+1264", flag: "🇦🇮" },
+  { code: "AG", name: "Antigua and Barbuda", dialCode: "+1268", flag: "🇦🇬" },
+  { code: "AR", name: "Argentina", dialCode: "+54", flag: "🇦🇷" },
+  { code: "AM", name: "Armenia", dialCode: "+374", flag: "🇦🇲" },
+  { code: "AW", name: "Aruba", dialCode: "+297", flag: "🇦🇼" },
+  { code: "AU", name: "Australia", dialCode: "+61", flag: "🇦🇺" },
+  { code: "AT", name: "Austria", dialCode: "+43", flag: "🇦🇹" },
+  { code: "AZ", name: "Azerbaijan", dialCode: "+994", flag: "🇦🇿" },
+  { code: "BS", name: "Bahamas", dialCode: "+1242", flag: "🇧🇸" },
+  { code: "BH", name: "Bahrain", dialCode: "+973", flag: "🇧🇭" },
+  { code: "BD", name: "Bangladesh", dialCode: "+880", flag: "🇧🇩" },
+  { code: "BB", name: "Barbados", dialCode: "+1246", flag: "🇧🇧" },
+  { code: "BY", name: "Belarus", dialCode: "+375", flag: "🇧🇾" },
+  { code: "BE", name: "Belgium", dialCode: "+32", flag: "🇧🇪" },
+  { code: "BZ", name: "Belize", dialCode: "+501", flag: "🇧🇿" },
+  { code: "BJ", name: "Benin", dialCode: "+229", flag: "🇧🇯" },
+  { code: "BM", name: "Bermuda", dialCode: "+1441", flag: "🇧🇲" },
+  { code: "BT", name: "Bhutan", dialCode: "+975", flag: "🇧🇹" },
+  { code: "BO", name: "Bolivia", dialCode: "+591", flag: "🇧🇴" },
+  { code: "BA", name: "Bosnia and Herzegovina", dialCode: "+387", flag: "🇧🇦" },
+  { code: "BW", name: "Botswana", dialCode: "+267", flag: "🇧🇼" },
+  { code: "BR", name: "Brazil", dialCode: "+55", flag: "🇧🇷" },
+  { code: "IO", name: "British Indian Ocean Territory", dialCode: "+246", flag: "🇮🇴" },
+  { code: "BN", name: "Brunei Darussalam", dialCode: "+673", flag: "🇧🇳" },
+  { code: "BG", name: "Bulgaria", dialCode: "+359", flag: "🇧🇬" },
+  { code: "BF", name: "Burkina Faso", dialCode: "+226", flag: "🇧🇫" },
+  { code: "BI", name: "Burundi", dialCode: "+257", flag: "🇧🇮" },
+  { code: "KH", name: "Cambodia", dialCode: "+855", flag: "🇰🇭" },
+  { code: "CM", name: "Cameroon", dialCode: "+237", flag: "🇨🇲" },
+  { code: "CA", name: "Canada", dialCode: "+1", flag: "🇨🇦" },
+  { code: "CV", name: "Cape Verde", dialCode: "+238", flag: "🇨🇻" },
+  { code: "KY", name: "Cayman Islands", dialCode: "+1345", flag: "🇰🇾" },
+  { code: "CF", name: "Central African Republic", dialCode: "+236", flag: "🇨🇫" },
+  { code: "TD", name: "Chad", dialCode: "+235", flag: "🇹🇩" },
+  { code: "CL", name: "Chile", dialCode: "+56", flag: "🇨🇱" },
+  { code: "CN", name: "China", dialCode: "+86", flag: "🇨🇳" },
+  { code: "CX", name: "Christmas Island", dialCode: "+61", flag: "🇨🇽" },
+  { code: "CC", name: "Cocos (Keeling) Islands", dialCode: "+61", flag: "🇨🇨" },
+  { code: "CO", name: "Colombia", dialCode: "+57", flag: "🇨🇴" },
+  { code: "KM", name: "Comoros", dialCode: "+269", flag: "🇰🇲" },
+  { code: "CG", name: "Congo", dialCode: "+242", flag: "🇨🇬" },
+  { code: "CD", name: "Congo, Democratic Republic of the", dialCode: "+243", flag: "🇨🇩" },
+  { code: "CK", name: "Cook Islands", dialCode: "+682", flag: "🇨🇰" },
+  { code: "CR", name: "Costa Rica", dialCode: "+506", flag: "🇨🇷" },
+  { code: "CI", name: "Cote d'Ivoire", dialCode: "+225", flag: "🇨🇮" },
+  { code: "HR", name: "Croatia", dialCode: "+385", flag: "🇭🇷" },
+  { code: "CU", name: "Cuba", dialCode: "+53", flag: "🇨🇺" },
+  { code: "CY", name: "Cyprus", dialCode: "+357", flag: "🇨🇾" },
+  { code: "CZ", name: "Czech Republic", dialCode: "+420", flag: "🇨🇿" },
+  { code: "DK", name: "Denmark", dialCode: "+45", flag: "🇩🇰" },
+  { code: "DJ", name: "Djibouti", dialCode: "+253", flag: "🇩🇯" },
+  { code: "DM", name: "Dominica", dialCode: "+1767", flag: "🇩🇲" },
+  { code: "DO", name: "Dominican Republic", dialCode: "+1", flag: "🇩🇴" },
+  { code: "EC", name: "Ecuador", dialCode: "+593", flag: "🇪🇨" },
+  { code: "EG", name: "Egypt", dialCode: "+20", flag: "🇪🇬" },
+  { code: "SV", name: "El Salvador", dialCode: "+503", flag: "🇸🇻" },
+  { code: "GQ", name: "Equatorial Guinea", dialCode: "+240", flag: "🇬🇶" },
+  { code: "ER", name: "Eritrea", dialCode: "+291", flag: "🇪🇷" },
+  { code: "EE", name: "Estonia", dialCode: "+372", flag: "🇪🇪" },
+  { code: "ET", name: "Ethiopia", dialCode: "+251", flag: "🇪🇹" },
+  { code: "FK", name: "Falkland Islands (Malvinas)", dialCode: "+500", flag: "🇫🇰" },
+  { code: "FO", name: "Faroe Islands", dialCode: "+298", flag: "🇫🇴" },
+  { code: "FJ", name: "Fiji", dialCode: "+679", flag: "🇫🇯" },
+  { code: "FI", name: "Finland", dialCode: "+358", flag: "🇫🇮" },
+  { code: "FR", name: "France", dialCode: "+33", flag: "🇫🇷" },
+  { code: "GF", name: "French Guiana", dialCode: "+594", flag: "🇬🇫" },
+  { code: "PF", name: "French Polynesia", dialCode: "+689", flag: "🇵🇫" },
+  { code: "GA", name: "Gabon", dialCode: "+241", flag: "🇬🇦" },
+  { code: "GM", name: "Gambia", dialCode: "+220", flag: "🇬🇲" },
+  { code: "GE", name: "Georgia", dialCode: "+995", flag: "🇬🇪" },
+  { code: "DE", name: "Germany", dialCode: "+49", flag: "🇩🇪" },
+  { code: "GH", name: "Ghana", dialCode: "+233", flag: "🇬🇭" },
+  { code: "GI", name: "Gibraltar", dialCode: "+350", flag: "🇬🇮" },
+  { code: "GR", name: "Greece", dialCode: "+30", flag: "🇬🇷" },
+  { code: "GL", name: "Greenland", dialCode: "+299", flag: "🇬🇱" },
+  { code: "GD", name: "Grenada", dialCode: "+1473", flag: "🇬🇩" },
+  { code: "GP", name: "Guadeloupe", dialCode: "+590", flag: "🇬🇵" },
+  { code: "GU", name: "Guam", dialCode: "+1671", flag: "🇬🇺" },
+  { code: "GT", name: "Guatemala", dialCode: "+502", flag: "🇬🇹" },
+  { code: "GG", name: "Guernsey", dialCode: "+44", flag: "🇬🇬" },
+  { code: "GN", name: "Guinea", dialCode: "+224", flag: "🇬🇳" },
+  { code: "GW", name: "Guinea-Bissau", dialCode: "+245", flag: "🇬🇼" },
+  { code: "GY", name: "Guyana", dialCode: "+592", flag: "🇬🇾" },
+  { code: "HT", name: "Haiti", dialCode: "+509", flag: "🇭🇹" },
+  { code: "VA", name: "Holy See (Vatican City State)", dialCode: "+379", flag: "🇻🇦" },
+  { code: "HN", name: "Honduras", dialCode: "+504", flag: "🇭🇳" },
+  { code: "HK", name: "Hong Kong", dialCode: "+852", flag: "🇭🇰" },
+  { code: "HU", name: "Hungary", dialCode: "+36", flag: "🇭🇺" },
+  { code: "IS", name: "Iceland", dialCode: "+354", flag: "🇮🇸" },
+  { code: "IN", name: "India", dialCode: "+91", flag: "🇮🇳" },
+  { code: "IR", name: "Iran, Islamic Republic of", dialCode: "+98", flag: "🇮🇷" },
+  { code: "IQ", name: "Iraq", dialCode: "+964", flag: "🇮🇶" },
+  { code: "IE", name: "Ireland", dialCode: "+353", flag: "🇮🇪" },
+  { code: "IM", name: "Isle of Man", dialCode: "+44", flag: "🇮🇲" },
+  { code: "IL", name: "Israel", dialCode: "+972", flag: "🇮🇱" },
+  { code: "IT", name: "Italy", dialCode: "+39", flag: "🇮🇹" },
+  { code: "JM", name: "Jamaica", dialCode: "+1876", flag: "🇯🇲" },
+  { code: "JP", name: "Japan", dialCode: "+81", flag: "🇯🇵" },
+  { code: "JE", name: "Jersey", dialCode: "+44", flag: "🇯🇪" },
+  { code: "JO", name: "Jordan", dialCode: "+962", flag: "🇯🇴" },
+  { code: "KZ", name: "Kazakhstan", dialCode: "+7", flag: "🇰🇿" },
+  { code: "KE", name: "Kenya", dialCode: "+254", flag: "🇰🇪" },
+  { code: "KI", name: "Kiribati", dialCode: "+686", flag: "🇰🇮" },
+  { code: "KP", name: "Korea, Democratic People's Republic of", dialCode: "+850", flag: "🇰🇵" },
+  { code: "KR", name: "Korea, Republic of", dialCode: "+82", flag: "🇰🇷" },
+  { code: "KW", name: "Kuwait", dialCode: "+965", flag: "🇰🇼" },
+  { code: "KG", name: "Kyrgyzstan", dialCode: "+996", flag: "🇰🇬" },
+  { code: "LA", name: "Lao People's Democratic Republic", dialCode: "+856", flag: "🇱🇦" },
+  { code: "LV", name: "Latvia", dialCode: "+371", flag: "🇱🇻" },
+  { code: "LB", name: "Lebanon", dialCode: "+961", flag: "🇱🇧" },
+  { code: "LS", name: "Lesotho", dialCode: "+266", flag: "🇱🇸" },
+  { code: "LR", name: "Liberia", dialCode: "+231", flag: "🇱🇷" },
+  { code: "LY", name: "Libyan Arab Jamahiriya", dialCode: "+218", flag: "🇱🇾" },
+  { code: "LI", name: "Liechtenstein", dialCode: "+423", flag: "🇱🇮" },
+  { code: "LT", name: "Lithuania", dialCode: "+370", flag: "🇱🇹" },
+  { code: "LU", name: "Luxembourg", dialCode: "+352", flag: "🇱🇺" },
+  { code: "MO", name: "Macao", dialCode: "+853", flag: "🇲🇴" },
+  { code: "MK", name: "Macedonia, the Former Yugoslav Republic of", dialCode: "+389", flag: "🇲🇰" },
+  { code: "MG", name: "Madagascar", dialCode: "+261", flag: "🇲🇬" },
+  { code: "MW", name: "Malawi", dialCode: "+265", flag: "🇲🇼" },
+  { code: "MY", name: "Malaysia", dialCode: "+60", flag: "🇲🇾" },
+  { code: "MV", name: "Maldives", dialCode: "+960", flag: "🇲🇻" },
+  { code: "ML", name: "Mali", dialCode: "+223", flag: "🇲🇱" },
+  { code: "MT", name: "Malta", dialCode: "+356", flag: "🇲🇹" },
+  { code: "MH", name: "Marshall Islands", dialCode: "+692", flag: "🇲🇭" },
+  { code: "MQ", name: "Martinique", dialCode: "+596", flag: "🇲🇶" },
+  { code: "MR", name: "Mauritania", dialCode: "+222", flag: "🇲🇷" },
+  { code: "MU", name: "Mauritius", dialCode: "+230", flag: "🇲🇺" },
+  { code: "YT", name: "Mayotte", dialCode: "+262", flag: "🇾🇹" },
+  { code: "MX", name: "Mexico", dialCode: "+52", flag: "🇲🇽" },
+  { code: "FM", name: "Micronesia, Federated States of", dialCode: "+691", flag: "🇫🇲" },
+  { code: "MD", name: "Moldova, Republic of", dialCode: "+373", flag: "🇲🇩" },
+  { code: "MC", name: "Monaco", dialCode: "+377", flag: "🇲🇨" },
+  { code: "MN", name: "Mongolia", dialCode: "+976", flag: "🇲🇳" },
+  { code: "ME", name: "Montenegro", dialCode: "+382", flag: "🇲🇪" },
+  { code: "MS", name: "Montserrat", dialCode: "+1664", flag: "🇲🇸" },
+  { code: "MA", name: "Morocco", dialCode: "+212", flag: "🇲🇦" },
+  { code: "MZ", name: "Mozambique", dialCode: "+258", flag: "🇲🇿" },
+  { code: "MM", name: "Myanmar", dialCode: "+95", flag: "🇲🇲" },
+  { code: "NA", name: "Namibia", dialCode: "+264", flag: "🇳🇦" },
+  { code: "NR", name: "Nauru", dialCode: "+674", flag: "🇳🇷" },
+  { code: "NP", name: "Nepal", dialCode: "+977", flag: "🇳🇵" },
+  { code: "NL", name: "Netherlands", dialCode: "+31", flag: "🇳🇱" },
+  { code: "NC", name: "New Caledonia", dialCode: "+687", flag: "🇳🇨" },
+  { code: "NZ", name: "New Zealand", dialCode: "+64", flag: "🇳🇿" },
+  { code: "NI", name: "Nicaragua", dialCode: "+505", flag: "🇳🇮" },
+  { code: "NE", name: "Niger", dialCode: "+227", flag: "🇳🇪" },
+  { code: "NG", name: "Nigeria", dialCode: "+234", flag: "🇳🇬" },
+  { code: "NU", name: "Niue", dialCode: "+683", flag: "🇳🇺" },
+  { code: "NF", name: "Norfolk Island", dialCode: "+672", flag: "🇳🇫" },
+  { code: "MP", name: "Northern Mariana Islands", dialCode: "+1670", flag: "🇲🇵" },
+  { code: "NO", name: "Norway", dialCode: "+47", flag: "🇳🇴" },
+  { code: "OM", name: "Oman", dialCode: "+968", flag: "🇴🇲" },
+  { code: "PK", name: "Pakistan", dialCode: "+92", flag: "🇵🇰" },
+  { code: "PW", name: "Palau", dialCode: "+680", flag: "🇵🇼" },
+  { code: "PS", name: "Palestinian Territory, Occupied", dialCode: "+970", flag: "🇵🇸" },
+  { code: "PA", name: "Panama", dialCode: "+507", flag: "🇵🇦" },
+  { code: "PG", name: "Papua New Guinea", dialCode: "+675", flag: "🇵🇬" },
+  { code: "PY", name: "Paraguay", dialCode: "+595", flag: "🇵🇾" },
+  { code: "PE", name: "Peru", dialCode: "+51", flag: "🇵🇪" },
+  { code: "PH", name: "Philippines", dialCode: "+63", flag: "🇵🇭" },
+  { code: "PN", name: "Pitcairn", dialCode: "+870", flag: "🇵🇳" },
+  { code: "PL", name: "Poland", dialCode: "+48", flag: "🇵🇱" },
+  { code: "PT", name: "Portugal", dialCode: "+351", flag: "🇵🇹" },
+  { code: "PR", name: "Puerto Rico", dialCode: "+1939", flag: "🇵🇷" },
+  { code: "QA", name: "Qatar", dialCode: "+974", flag: "🇶🇦" },
+  { code: "RE", name: "Reunion", dialCode: "+262", flag: "🇷🇪" },
+  { code: "RO", name: "Romania", dialCode: "+40", flag: "🇷🇴" },
+  { code: "RU", name: "Russian Federation", dialCode: "+7", flag: "🇷🇺" },
+  { code: "RW", name: "Rwanda", dialCode: "+250", flag: "🇷🇼" },
+  { code: "BL", name: "Saint Barthelemy", dialCode: "+590", flag: "🇧🇱" },
+  { code: "SH", name: "Saint Helena", dialCode: "+290", flag: "🇸🇭" },
+  { code: "KN", name: "Saint Kitts and Nevis", dialCode: "+1869", flag: "🇰🇳" },
+  { code: "LC", name: "Saint Lucia", dialCode: "+1758", flag: "🇱🇨" },
+  { code: "MF", name: "Saint Martin", dialCode: "+590", flag: "🇲🇫" },
+  { code: "PM", name: "Saint Pierre and Miquelon", dialCode: "+508", flag: "🇵🇲" },
+  { code: "VC", name: "Saint Vincent and the Grenadines", dialCode: "+1784", flag: "🇻🇨" },
+  { code: "WS", name: "Samoa", dialCode: "+685", flag: "🇼🇸" },
+  { code: "SM", name: "San Marino", dialCode: "+378", flag: "🇸🇲" },
+  { code: "ST", name: "Sao Tome and Principe", dialCode: "+239", flag: "🇸🇹" },
+  { code: "SA", name: "Saudi Arabia", dialCode: "+966", flag: "🇸🇦" },
+  { code: "SN", name: "Senegal", dialCode: "+221", flag: "🇸🇳" },
+  { code: "RS", name: "Serbia", dialCode: "+381", flag: "🇷🇸" },
+  { code: "SC", name: "Seychelles", dialCode: "+248", flag: "🇸🇨" },
+  { code: "SL", name: "Sierra Leone", dialCode: "+232", flag: "🇸🇱" },
+  { code: "SG", name: "Singapore", dialCode: "+65", flag: "🇸🇬" },
+  { code: "SK", name: "Slovakia", dialCode: "+421", flag: "🇸🇰" },
+  { code: "SI", name: "Slovenia", dialCode: "+386", flag: "🇸🇮" },
+  { code: "SB", name: "Solomon Islands", dialCode: "+677", flag: "🇸🇧" },
+  { code: "SO", name: "Somalia", dialCode: "+252", flag: "🇸🇴" },
+  { code: "ZA", name: "South Africa", dialCode: "+27", flag: "🇿🇦" },
+  { code: "GS", name: "South Georgia and the South Sandwich Islands", dialCode: "+500", flag: "🇬🇸" },
+  { code: "ES", name: "Spain", dialCode: "+34", flag: "🇪🇸" },
+  { code: "LK", name: "Sri Lanka", dialCode: "+94", flag: "🇱🇰" },
+  { code: "SD", name: "Sudan", dialCode: "+249", flag: "🇸🇩" },
+  { code: "SR", name: "Suriname", dialCode: "+597", flag: "🇸🇷" },
+  { code: "SJ", name: "Svalbard and Jan Mayen", dialCode: "+47", flag: "🇸🇯" },
+  { code: "SZ", name: "Swaziland", dialCode: "+268", flag: "🇸🇿" },
+  { code: "SE", name: "Sweden", dialCode: "+46", flag: "🇸🇪" },
+  { code: "CH", name: "Switzerland", dialCode: "+41", flag: "🇨🇭" },
+  { code: "SY", name: "Syrian Arab Republic", dialCode: "+963", flag: "🇸🇾" },
+  { code: "TW", name: "Taiwan, Province of China", dialCode: "+886", flag: "🇹🇼" },
+  { code: "TJ", name: "Tajikistan", dialCode: "+992", flag: "🇹🇯" },
+  { code: "TZ", name: "Tanzania, United Republic of", dialCode: "+255", flag: "🇹🇿" },
+  { code: "TH", name: "Thailand", dialCode: "+66", flag: "🇹🇭" },
+  { code: "TL", name: "Timor-Leste", dialCode: "+670", flag: "🇹🇱" },
+  { code: "TG", name: "Togo", dialCode: "+228", flag: "🇹🇬" },
+  { code: "TK", name: "Tokelau", dialCode: "+690", flag: "🇹🇰" },
+  { code: "TO", name: "Tonga", dialCode: "+676", flag: "🇹🇴" },
+  { code: "TT", name: "Trinidad and Tobago", dialCode: "+1868", flag: "🇹🇹" },
+  { code: "TN", name: "Tunisia", dialCode: "+216", flag: "🇹🇳" },
+  { code: "TR", name: "Turkey", dialCode: "+90", flag: "🇹🇷" },
+  { code: "TM", name: "Turkmenistan", dialCode: "+993", flag: "🇹🇲" },
+  { code: "TC", name: "Turks and Caicos Islands", dialCode: "+1649", flag: "🇹🇨" },
+  { code: "TV", name: "Tuvalu", dialCode: "+688", flag: "🇹🇻" },
+  { code: "UG", name: "Uganda", dialCode: "+256", flag: "🇺🇬" },
+  { code: "UA", name: "Ukraine", dialCode: "+380", flag: "🇺🇦" },
+  { code: "AE", name: "United Arab Emirates", dialCode: "+971", flag: "🇦🇪" },
+  { code: "GB", name: "United Kingdom", dialCode: "+44", flag: "🇬🇧" },
+  { code: "US", name: "United States", dialCode: "+1", flag: "🇺🇸" },
+  { code: "UY", name: "Uruguay", dialCode: "+598", flag: "🇺🇾" },
+  { code: "UZ", name: "Uzbekistan", dialCode: "+998", flag: "🇺🇿" },
+  { code: "VU", name: "Vanuatu", dialCode: "+678", flag: "🇻🇺" },
+  { code: "VE", name: "Venezuela", dialCode: "+58", flag: "🇻🇪" },
+  { code: "VN", name: "Vietnam", dialCode: "+84", flag: "🇻🇳" },
+  { code: "VG", name: "Virgin Islands, British", dialCode: "+1284", flag: "🇻🇬" },
+  { code: "VI", name: "Virgin Islands, U.S.", dialCode: "+1340", flag: "🇻🇮" },
+  { code: "WF", name: "Wallis and Futuna", dialCode: "+681", flag: "🇼🇫" },
+  { code: "EH", name: "Western Sahara", dialCode: "+212", flag: "🇪🇭" },
+  { code: "YE", name: "Yemen", dialCode: "+967", flag: "🇾🇪" },
+  { code: "ZM", name: "Zambia", dialCode: "+260", flag: "🇿🇲" },
+  { code: "ZW", name: "Zimbabwe", dialCode: "+263", flag: "🇿🇼" }
+];
+const _hoisted_1$k = { class: "ina-phone-input" };
+const _hoisted_2$j = ["for"];
+const _hoisted_3$h = {
   key: 0,
-  class: "ina-phone-input__required"
+  class: "ina-phone-input__asterisk"
 };
-const _hoisted_3$h = { class: "ina-phone-input__wrapper" };
-const _hoisted_4$d = { class: "ina-phone-input__country-selector" };
+const _hoisted_4$d = ["disabled"];
 const _hoisted_5$b = { class: "ina-phone-input__country-flag" };
 const _hoisted_6$9 = { class: "ina-phone-input__country-code" };
 const _hoisted_7$9 = {
@@ -5192,33 +5508,20 @@ const _sfc_main$o = /* @__PURE__ */ defineComponent({
     size: { default: "md" },
     status: { default: "neutral" },
     statusMessage: {},
+    helperText: {},
     disabled: { type: Boolean, default: false },
     readonly: { type: Boolean, default: false },
     required: { type: Boolean, default: false },
     defaultCountry: { default: "ID" },
-    countries: { default: () => [
-      { code: "ID", name: "Indonesia", dialCode: "+62", flag: "🇮🇩" },
-      { code: "US", name: "United States", dialCode: "+1", flag: "🇺🇸" },
-      { code: "SG", name: "Singapore", dialCode: "+65", flag: "🇸🇬" },
-      { code: "MY", name: "Malaysia", dialCode: "+60", flag: "🇲🇾" },
-      { code: "TH", name: "Thailand", dialCode: "+66", flag: "🇹🇭" },
-      { code: "PH", name: "Philippines", dialCode: "+63", flag: "🇵🇭" },
-      { code: "VN", name: "Vietnam", dialCode: "+84", flag: "🇻🇳" },
-      { code: "AU", name: "Australia", dialCode: "+61", flag: "🇦🇺" },
-      { code: "GB", name: "United Kingdom", dialCode: "+44", flag: "🇬🇧" },
-      { code: "DE", name: "Germany", dialCode: "+49", flag: "🇩🇪" },
-      { code: "FR", name: "France", dialCode: "+33", flag: "🇫🇷" },
-      { code: "JP", name: "Japan", dialCode: "+81", flag: "🇯🇵" },
-      { code: "KR", name: "South Korea", dialCode: "+82", flag: "🇰🇷" },
-      { code: "CN", name: "China", dialCode: "+86", flag: "🇨🇳" },
-      { code: "IN", name: "India", dialCode: "+91", flag: "🇮🇳" }
-    ] }
+    countries: { default: () => COUNTRIES }
   },
   emits: ["update:modelValue", "input", "blur", "focus", "countryChange"],
   setup(__props, { emit: __emit }) {
     const props = __props;
     const emit = __emit;
     const inputRef = ref();
+    const searchInputRef = ref();
+    const dropdownRef = ref();
     const phoneNumber = ref(props.modelValue);
     const isCountryDropdownOpen = ref(false);
     const countrySearch = ref("");
@@ -5228,34 +5531,27 @@ const _sfc_main$o = /* @__PURE__ */ defineComponent({
     const inputId = computed(
       () => `phone-input-${Math.random().toString(36).substr(2, 9)}`
     );
-    const containerClasses = computed(() => {
-      const classes = ["ina-phone-input"];
-      if (props.disabled) {
-        classes.push("ina-phone-input--disabled");
-      }
-      return classes;
-    });
-    const inputClasses = computed(() => {
-      const classes = ["ina-phone-input__input"];
-      classes.push(`ina-phone-input__input--size-${props.size}`);
+    const wrapperClasses = computed(() => {
+      const classes = ["ina-phone-input__wrapper"];
+      classes.push(`ina-phone-input__wrapper--size-${props.size}`);
       if (props.disabled) {
-        classes.push("ina-phone-input__input--disabled");
-      }
-      if (props.readonly) {
-        classes.push("ina-phone-input__input--readonly");
+        classes.push("ina-phone-input__wrapper--disabled");
       }
       if (props.status !== "neutral") {
-        classes.push(`ina-phone-input__input--status-${props.status}`);
+        classes.push(`ina-phone-input__wrapper--status-${props.status}`);
       }
       return classes;
     });
-    const statusClasses = computed(() => {
-      const classes = ["ina-phone-input__status"];
-      if (props.status !== "neutral") {
-        classes.push(`ina-phone-input__status--${props.status}`);
+    const helperTextClasses = computed(() => {
+      const classes = ["ina-phone-input__helper-text"];
+      if (props.status === "error") {
+        classes.push("ina-phone-input__helper-text--error");
+      } else if (props.status === "warning") {
+        classes.push("ina-phone-input__helper-text--warning");
       }
       return classes;
     });
+    const bottomText = computed(() => props.statusMessage || props.helperText);
     const filteredCountries = computed(() => {
       if (!countrySearch.value) {
         return props.countries;
@@ -5278,26 +5574,35 @@ const _sfc_main$o = /* @__PURE__ */ defineComponent({
       if (isCountryDropdownOpen.value) {
         countrySearch.value = "";
         nextTick(() => {
-          const searchInput = document.querySelector(
-            ".ina-phone-input__country-search-input"
-          );
-          searchInput == null ? void 0 : searchInput.focus();
+          var _a;
+          (_a = searchInputRef.value) == null ? void 0 : _a.focus();
         });
       }
     };
-    const selectCountry = (country) => {
-      selectedCountry.value = country;
-      isCountryDropdownOpen.value = false;
-      emit("countryChange", country);
-      nextTick(() => {
-        var _a;
-        (_a = inputRef.value) == null ? void 0 : _a.focus();
-      });
+    const formatPhoneNumber = (value) => {
+      const clean = value.replace(/\D/g, "");
+      if (clean.length > 7) {
+        return clean.replace(/^(\d{3})(\d{4})(.*)/, "$1-$2-$3");
+      } else if (clean.length > 3) {
+        return clean.replace(/^(\d{3})(.*)/, "$1-$2");
+      }
+      return clean;
     };
     const handleInput = (event) => {
       const target = event.target;
-      phoneNumber.value = target.value;
-      emit("update:modelValue", phoneNumber.value);
+      const rawValue = target.value;
+      let cleanValue = rawValue.replace(/\D/g, "");
+      if (cleanValue.startsWith("0")) {
+        cleanValue = cleanValue.substring(1);
+      }
+      const displayClean = rawValue.replace(/\D/g, "");
+      const formatted = formatPhoneNumber(displayClean);
+      if (formatted !== rawValue) {
+        target.value = formatted;
+      }
+      phoneNumber.value = formatted;
+      const fullValue = `${selectedCountry.value.dialCode}${cleanValue}`;
+      emit("update:modelValue", fullValue);
       emit("input", event);
     };
     const handleBlur = (event) => {
@@ -5308,15 +5613,42 @@ const _sfc_main$o = /* @__PURE__ */ defineComponent({
     };
     const handleClickOutside = (event) => {
       const target = event.target;
-      if (!target.closest(".ina-phone-input__country-selector")) {
+      if (dropdownRef.value && !dropdownRef.value.contains(target)) {
         isCountryDropdownOpen.value = false;
       }
     };
+    const selectCountry = (country) => {
+      selectedCountry.value = country;
+      isCountryDropdownOpen.value = false;
+      emit("countryChange", country);
+      if (phoneNumber.value) {
+        const cleanValue = phoneNumber.value.replace(/\D/g, "");
+        const cleanLocal = cleanValue.startsWith("0") ? cleanValue.substring(1) : cleanValue;
+        const fullValue = `${country.dialCode}${cleanLocal}`;
+        emit("update:modelValue", fullValue);
+      }
+      nextTick(() => {
+        var _a;
+        (_a = inputRef.value) == null ? void 0 : _a.focus();
+      });
+    };
     watch(
       () => props.modelValue,
       (newValue) => {
-        phoneNumber.value = newValue || "";
-      }
+        if (!newValue) {
+          phoneNumber.value = "";
+          return;
+        }
+        const dialCode = selectedCountry.value.dialCode;
+        let localPart = newValue;
+        if (newValue.startsWith(dialCode)) {
+          localPart = newValue.substring(dialCode.length);
+        } else if (newValue.startsWith(dialCode.substring(1))) {
+          localPart = newValue.substring(dialCode.length - 1);
+        }
+        phoneNumber.value = formatPhoneNumber(localPart);
+      },
+      { immediate: true }
     );
     onMounted(() => {
       document.addEventListener("click", handleClickOutside);
@@ -5325,23 +5657,28 @@ const _sfc_main$o = /* @__PURE__ */ defineComponent({
       document.removeEventListener("click", handleClickOutside);
     });
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", {
-        class: normalizeClass(["ina-phone-input", containerClasses.value])
-      }, [
+      return openBlock(), createElementBlock("div", _hoisted_1$k, [
         __props.label ? (openBlock(), createElementBlock("label", {
           key: 0,
           for: inputId.value,
           class: "ina-phone-input__label"
         }, [
           createTextVNode(toDisplayString(__props.label) + " ", 1),
-          __props.required ? (openBlock(), createElementBlock("span", _hoisted_2$j, "*")) : createCommentVNode("", true)
-        ], 8, _hoisted_1$k)) : createCommentVNode("", true),
-        createElementVNode("div", _hoisted_3$h, [
-          createElementVNode("div", _hoisted_4$d, [
+          __props.required ? (openBlock(), createElementBlock("span", _hoisted_3$h, "*")) : createCommentVNode("", true)
+        ], 8, _hoisted_2$j)) : createCommentVNode("", true),
+        createElementVNode("div", {
+          class: normalizeClass(wrapperClasses.value)
+        }, [
+          createElementVNode("div", {
+            class: "ina-phone-input__country-selector",
+            ref_key: "dropdownRef",
+            ref: dropdownRef
+          }, [
             createElementVNode("button", {
               type: "button",
               class: "ina-phone-input__country-button",
-              onClick: toggleCountryDropdown
+              onClick: toggleCountryDropdown,
+              disabled: __props.disabled || __props.readonly
             }, [
               createElementVNode("span", _hoisted_5$b, toDisplayString(selectedCountry.value.flag), 1),
               createElementVNode("span", _hoisted_6$9, toDisplayString(selectedCountry.value.dialCode), 1),
@@ -5363,13 +5700,15 @@ const _sfc_main$o = /* @__PURE__ */ defineComponent({
                   "stroke-linejoin": "round"
                 }, null, -1)
               ])], 2))
-            ]),
+            ], 8, _hoisted_4$d),
             createVNode(Transition, { name: "dropdown" }, {
               default: withCtx(() => [
                 isCountryDropdownOpen.value ? (openBlock(), createElementBlock("div", _hoisted_7$9, [
                   createElementVNode("div", _hoisted_8$7, [
                     withDirectives(createElementVNode("input", {
                       "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => countrySearch.value = $event),
+                      ref_key: "searchInputRef",
+                      ref: searchInputRef,
                       type: "text",
                       placeholder: "Search countries...",
                       class: "ina-phone-input__country-search-input"
@@ -5395,8 +5734,9 @@ const _sfc_main$o = /* @__PURE__ */ defineComponent({
               ]),
               _: 1
             })
-          ]),
-          withDirectives(createElementVNode("input", mergeProps({
+          ], 512),
+          _cache[3] || (_cache[3] = createElementVNode("div", { class: "ina-phone-input__divider" }, null, -1)),
+          withDirectives(createElementVNode("input", mergeProps(_ctx.$attrs, {
             id: inputId.value,
             ref_key: "inputRef",
             ref: inputRef,
@@ -5405,23 +5745,23 @@ const _sfc_main$o = /* @__PURE__ */ defineComponent({
             placeholder: __props.placeholder,
             disabled: __props.disabled,
             readonly: __props.readonly,
-            class: inputClasses.value,
+            class: "ina-phone-input__input",
             onInput: handleInput,
             onBlur: handleBlur,
             onFocus: handleFocus
-          }, _ctx.$attrs), null, 16, _hoisted_14$3), [
+          }), null, 16, _hoisted_14$3), [
             [vModelText, phoneNumber.value]
           ])
-        ]),
-        __props.statusMessage ? (openBlock(), createElementBlock("div", {
+        ], 2),
+        bottomText.value ? (openBlock(), createElementBlock("div", {
           key: 1,
-          class: normalizeClass(statusClasses.value)
-        }, toDisplayString(__props.statusMessage), 3)) : createCommentVNode("", true)
-      ], 2);
+          class: normalizeClass(helperTextClasses.value)
+        }, toDisplayString(bottomText.value), 3)) : createCommentVNode("", true)
+      ]);
     };
   }
 });
-const PhoneInput = /* @__PURE__ */ _export_sfc(_sfc_main$o, [["__scopeId", "data-v-005a7f02"]]);
+const PhoneInput = /* @__PURE__ */ _export_sfc(_sfc_main$o, [["__scopeId", "data-v-fc52068c"]]);
 const _hoisted_1$j = {
   key: 0,
   class: "ina-progress-bar__shimmer"
@@ -8711,14 +9051,14 @@ const _sfc_main$a = /* @__PURE__ */ defineComponent({
           class: normalizeClass(searchContainerClasses.value)
         }, [
           createElementVNode("div", _hoisted_1$9, [
-            createVNode(_sfc_main$B, {
+            createVNode(_sfc_main$C, {
               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$F, {
+            createVNode(_sfc_main$G, {
               disabled: loading.value,
               onClick: handleSearchButton
             }, {
@@ -8745,7 +9085,7 @@ const _sfc_main$a = /* @__PURE__ */ defineComponent({
           }, [
             createElementVNode("tr", null, [
               __props.selectable ? (openBlock(), createElementBlock("th", _hoisted_2$9, [
-                createVNode(_sfc_main$C, {
+                createVNode(_sfc_main$D, {
                   id: `${reactId.value}-select-all`,
                   label: "",
                   modelValue: allSelected.value,
@@ -8827,7 +9167,7 @@ const _sfc_main$a = /* @__PURE__ */ defineComponent({
                 onClick: (e) => handleRowClick(row, e)
               }, [
                 __props.selectable ? (openBlock(), createElementBlock("td", _hoisted_10$2, [
-                  createVNode(_sfc_main$C, {
+                  createVNode(_sfc_main$D, {
                     id: `${reactId.value}-select-${String(row[__props.rowKey])}`,
                     label: "",
                     modelValue: selectedMap.value[String(row[__props.rowKey])] || false,
@@ -10202,7 +10542,7 @@ const _sfc_main$3 = /* @__PURE__ */ defineComponent({
     const defaultFooterActions = (cancelClassName, confirmClassName, cancelText, confirmText, handleCloseFn) => {
       return h("div", { class: "ina-modal-confirmation__footer" }, [
         h(
-          _sfc_main$F,
+          _sfc_main$G,
           {
             hierarchy: "custom",
             size: "sm",
@@ -10212,7 +10552,7 @@ const _sfc_main$3 = /* @__PURE__ */ defineComponent({
           { default: () => cancelText }
         ),
         h(
-          _sfc_main$F,
+          _sfc_main$G,
           {
             hierarchy: "custom",
             size: "sm",
@@ -11017,20 +11357,21 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
   }
 });
 const index = {
-  Accordion: _sfc_main$O,
+  Accordion: _sfc_main$P,
   AccordionCard,
   AccordionGroup,
   ActionDropdown,
-  Alert: _sfc_main$K,
-  Avatar: _sfc_main$J,
-  Badge: _sfc_main$I,
-  BottomSheet: _sfc_main$H,
-  Breadcrumb: _sfc_main$G,
-  Button: _sfc_main$F,
-  ButtonGroup: _sfc_main$E,
-  Card: _sfc_main$D,
-  Checkbox: _sfc_main$C,
-  Chip: _sfc_main$A,
+  Alert: _sfc_main$L,
+  Avatar: _sfc_main$K,
+  Badge: _sfc_main$J,
+  BottomSheet: _sfc_main$I,
+  Breadcrumb: _sfc_main$H,
+  Button: _sfc_main$G,
+  ButtonGroup: _sfc_main$F,
+  Card: _sfc_main$E,
+  CircleProgressBar: _sfc_main$A,
+  Checkbox: _sfc_main$D,
+  Chip: _sfc_main$B,
   Collapse,
   Divider: _sfc_main$y,
   Drawer,
@@ -11057,7 +11398,7 @@ const index = {
   Table: _sfc_main$a,
   TableProgressBar: _sfc_main$b,
   TextArea: _sfc_main$9,
-  TextField: _sfc_main$B,
+  TextField: _sfc_main$C,
   OneTimePassword: _sfc_main$8,
   ThemeToggle: _sfc_main$7,
   TimePicker: _sfc_main$6,
@@ -11070,20 +11411,21 @@ const index = {
   setBrandTheme
 };
 export {
-  _sfc_main$O as Accordion,
+  _sfc_main$P as Accordion,
   AccordionCard,
   AccordionGroup,
   ActionDropdown,
-  _sfc_main$K as Alert,
-  _sfc_main$J as Avatar,
-  _sfc_main$I as Badge,
-  _sfc_main$H as BottomSheet,
-  _sfc_main$G as Breadcrumb,
-  _sfc_main$F as Button,
-  _sfc_main$E as ButtonGroup,
-  _sfc_main$D as Card,
-  _sfc_main$C as Checkbox,
-  _sfc_main$A as Chip,
+  _sfc_main$L as Alert,
+  _sfc_main$K as Avatar,
+  _sfc_main$J as Badge,
+  _sfc_main$I as BottomSheet,
+  _sfc_main$H as Breadcrumb,
+  _sfc_main$G as Button,
+  _sfc_main$F as ButtonGroup,
+  _sfc_main$E as Card,
+  _sfc_main$D as Checkbox,
+  _sfc_main$B as Chip,
+  _sfc_main$A as CircleProgressBar,
   Collapse,
   ConfirmationContextKey,
   _sfc_main$3 as ConfirmationProvider,
@@ -11114,7 +11456,7 @@ export {
   _sfc_main$a as Table,
   _sfc_main$b as TableProgressBar,
   _sfc_main$9 as TextArea,
-  _sfc_main$B as TextField,
+  _sfc_main$C as TextField,
   _sfc_main$7 as ThemeToggle,
   _sfc_main$6 as TimePicker,
   _sfc_main$5 as Toast,