@krds.ui/vue 0.0.10 → 0.0.11

package/dist/krds-vue.es.js

@@ -1,5 +1,5 @@
-import { defineComponent as B, computed as g, h as c, ref as K, onMounted as le, onBeforeUnmount as Se, createElementBlock as w, openBlock as k, createElementVNode as d, normalizeClass as I, withDirectives as Q, unref as P, toDisplayString as E, Fragment as F, renderList as N, vShow as te, createBlock as ie, withCtx as re, createTextVNode as A, watch as ae, provide as Ve, inject as ze, createCommentVNode as Y, onUnmounted as X, resolveDirective as Ee, resolveDynamicComponent as ye, renderSlot as J, normalizeStyle as ne, nextTick as we, withModifiers as de, getCurrentInstance as Ie, Teleport as Le } from "vue";
-const Ce = B({
+import { defineComponent as _, computed as h, h as u, ref as B, onMounted as le, onBeforeUnmount as Se, createElementBlock as S, openBlock as k, createElementVNode as r, normalizeClass as E, withDirectives as Q, unref as A, toDisplayString as V, Fragment as F, renderList as N, vShow as te, createBlock as ie, withCtx as de, createTextVNode as P, watch as ae, provide as Ve, inject as Ie, createCommentVNode as Y, onUnmounted as J, resolveDirective as ze, resolveDynamicComponent as ye, renderSlot as G, normalizeStyle as ne, nextTick as we, withModifiers as re, getCurrentInstance as Ee, Teleport as Le } from "vue";
+const Ce = _({
   name: "KrdsButton",
   props: {
     type: {
@@ -40,29 +40,29 @@ const Ce = B({
     }
   },
   emits: ["click"],
-  setup(e, { emit: o, slots: s }) {
-    const n = g(() => {
-      const a = ["krds-btn"];
-      return e.icon && a.push("icon"), e.border && a.push("border"), e.pure && a.push("pure"), e.text && a.push("text"), e.variant && !e.icon && a.push(e.variant), e.size && a.push(e.size), e.class && a.push(e.class), a;
-    }), t = (a) => {
-      e.disabled || o("click", a);
+  setup(e, { emit: o, slots: a }) {
+    const l = h(() => {
+      const n = ["krds-btn"];
+      return e.icon && n.push("icon"), e.border && n.push("border"), e.pure && n.push("pure"), e.text && n.push("text"), e.variant && !e.icon && n.push(e.variant), e.size && n.push(e.size), e.class && n.push(e.class), n;
+    }), t = (n) => {
+      e.disabled || o("click", n);
     };
-    return () => c(
+    return () => u(
       "button",
       {
         type: e.type,
-        class: n.value,
+        class: l.value,
         disabled: e.disabled,
         onClick: t
       },
-      s.default?.()
+      a.default?.()
     );
   }
-}), Me = B({
+}), Me = _({
   name: "KrdsButtonGroup",
   props: {},
   setup(e, { slots: o }) {
-    return () => c(
+    return () => u(
       "div",
       {
         class: "btn-group"
@@ -70,7 +70,7 @@ const Ce = B({
       o.default?.()
     );
   }
-}), Re = B({
+}), Re = _({
   name: "KrdsIcon",
   props: {
     name: {
@@ -83,11 +83,11 @@ const Ce = B({
     }
   },
   setup(e) {
-    return () => c("i", {
+    return () => u("i", {
       class: ["svg-icon", e.name, e.class].filter(Boolean).join(" ")
     });
   }
-}), Te = B({
+}), Te = _({
   name: "KrdsLink",
   props: {
     href: {
@@ -124,29 +124,29 @@ const Ce = B({
     }
   },
   emits: ["click"],
-  setup(e, { emit: o, slots: s }) {
-    const n = g(() => {
-      const r = ["krds-btn"];
-      return e.size && r.push(e.size), e.link && r.push("link"), e.basic && r.push("basic"), e.pure && r.push("pure"), e.class && r.push(e.class), r;
-    }), t = g(() => {
-      const r = {
+  setup(e, { emit: o, slots: a }) {
+    const l = h(() => {
+      const i = ["krds-btn"];
+      return e.size && i.push(e.size), e.link && i.push("link"), e.basic && i.push("basic"), e.pure && i.push("pure"), e.class && i.push(e.class), i;
+    }), t = h(() => {
+      const i = {
         href: e.href,
-        class: n.value
+        class: l.value
       };
-      return e.target && (r.target = e.target), e.title && (r.title = e.title), e.target === "_blank" && (r.rel = "noopener noreferrer"), r;
-    }), a = (r) => {
-      o("click", r);
+      return e.target && (i.target = e.target), e.title && (i.title = e.title), e.target === "_blank" && (i.rel = "noopener noreferrer"), i;
+    }), n = (i) => {
+      o("click", i);
     };
-    return () => c(
+    return () => u(
       "a",
       {
         ...t.value,
-        onClick: a
+        onClick: n
       },
-      s.default?.()
+      a.default?.()
     );
   }
-}), xe = B({
+}), xe = _({
   name: "KrdsSpinner",
   props: {
     label: {
@@ -155,10 +155,10 @@ const Ce = B({
     }
   },
   render() {
-    const e = [c("span", { class: "sr-only" }, "로딩 중")];
-    return this.label && e.push(c("span", this.label)), c("div", { class: "krds-spinner", role: "status" }, e);
+    const e = [u("span", { class: "sr-only" }, "로딩 중")];
+    return this.label && e.push(u("span", this.label)), u("div", { class: "krds-spinner", role: "status" }, e);
   }
-}), Pe = B({
+}), Ae = _({
   name: "KrdsInput",
   props: {
     modelValue: {
@@ -247,27 +247,27 @@ const Ce = B({
     }
   },
   emits: ["update:modelValue", "input", "change", "focus", "blur", "keydown", "keyup"],
-  setup(e, { emit: o, slots: s }) {
-    const n = g(() => {
+  setup(e, { emit: o, slots: a }) {
+    const l = h(() => {
       const b = ["krds-input"];
       return e.size && b.push(e.size), e.class && b.push(e.class), b;
     }), t = (b) => {
       const D = b.target, m = e.type === "number" ? Number(D.value) : D.value;
       o("update:modelValue", m), o("input", b);
-    }, a = (b) => {
+    }, n = (b) => {
       o("change", b);
-    }, r = (b) => {
+    }, i = (b) => {
       o("focus", b);
     }, v = (b) => {
       o("blur", b);
     }, p = (b) => {
       o("keydown", b);
-    }, h = (b) => {
+    }, y = (b) => {
       o("keyup", b);
-    }, y = g(() => {
+    }, g = h(() => {
       const b = {
         type: e.type,
-        class: n.value,
+        class: l.value,
         value: e.modelValue,
         placeholder: e.placeholder,
         name: e.name,
@@ -278,23 +278,23 @@ const Ce = B({
         autocomplete: e.autocomplete,
         autofocus: e.autofocus,
         onInput: t,
-        onChange: a,
-        onFocus: r,
+        onChange: n,
+        onFocus: i,
         onBlur: v,
         onKeydown: p,
-        onKeyup: h
+        onKeyup: y
       };
       return e.maxlength !== void 0 && (b.maxlength = e.maxlength), e.minlength !== void 0 && (b.minlength = e.minlength), e.type === "number" && (e.max !== void 0 && (b.max = e.max), e.min !== void 0 && (b.min = e.min), e.step !== void 0 && (b.step = e.step)), b;
-    }), S = g(() => {
+    }), w = h(() => {
       const b = ["form-conts"];
       return e.state !== "default" && b.push(`is-${e.state}`), e.icon && b.push("btn-ico-wrap"), b;
     });
     return () => {
-      const b = [c("input", y.value)];
-      return e.loading ? c("div", { class: S.value }, [c("div", { class: "form-spinner" }, [...b, c(xe)])]) : (s.default && b.push(...s.default()), c("div", { class: S.value }, b));
+      const b = [u("input", g.value)];
+      return e.loading ? u("div", { class: w.value }, [u("div", { class: "form-spinner" }, [...b, u(xe)])]) : (a.default && b.push(...a.default()), u("div", { class: w.value }, b));
     };
   }
-}), Ae = B({
+}), Pe = _({
   name: "KrdsFormLabel",
   props: {
     for: {
@@ -315,25 +315,25 @@ const Ce = B({
     }
   },
   emits: ["click"],
-  setup(e, { emit: o, slots: s }) {
-    const n = (t) => {
+  setup(e, { emit: o, slots: a }) {
+    const l = (t) => {
       o("click", t);
     };
-    return () => c("div", { class: "form-tit" }, [
-      c(
+    return () => u("div", { class: "form-tit" }, [
+      u(
         "label",
         {
           for: e.for,
           id: e.id,
           class: e.class,
           style: e.style,
-          onClick: n
+          onClick: l
         },
-        s.default?.()
+        a.default?.()
       )
     ]);
   }
-}), Fe = B({
+}), Fe = _({
   name: "KrdsFormHint",
   props: {
     type: {
@@ -354,39 +354,39 @@ const Ce = B({
     }
   },
   emits: ["click"],
-  setup(e, { emit: o, slots: s }) {
-    const n = (a) => {
-      o("click", a);
+  setup(e, { emit: o, slots: a }) {
+    const l = (n) => {
+      o("click", n);
     }, t = () => {
-      let a;
+      let n;
       switch (e.type) {
         case "error":
-          a = "form-hint-invalid";
+          n = "form-hint-invalid";
           break;
         case "success":
-          a = "form-hint-success";
+          n = "form-hint-success";
           break;
         case "information":
-          a = "form-hint-information";
+          n = "form-hint-information";
           break;
         default:
-          a = "form-hint";
+          n = "form-hint";
           break;
       }
-      return e.class ? `${a} ${e.class}` : a;
+      return e.class ? `${n} ${e.class}` : n;
     };
-    return () => c(
+    return () => u(
       "p",
       {
         id: e.id,
         class: t(),
         style: e.style,
-        onClick: n
+        onClick: l
       },
-      s.default?.()
+      a.default?.()
     );
   }
-}), Oe = B({
+}), Oe = _({
   name: "KrdsFormGroup",
   props: {
     class: {
@@ -403,15 +403,15 @@ const Ce = B({
     }
   },
   setup(e, { slots: o }) {
-    const s = g(() => {
-      const n = ["form-group"];
-      return e.class && n.push(e.class), n;
+    const a = h(() => {
+      const l = ["form-group"];
+      return e.class && l.push(e.class), l;
     });
-    return () => c(
+    return () => u(
       "div",
       {
         id: e.id,
-        class: s.value,
+        class: a.value,
         style: e.style
       },
       o.default?.()
@@ -419,65 +419,65 @@ const Ce = B({
   }
 });
 function qe(e, o) {
-  const s = /* @__PURE__ */ new Date(), n = K(e || s.getFullYear()), t = K(o || s.getMonth() + 1), a = K(null), r = K(null), v = K(null), p = g(() => {
-    const u = s.getFullYear(), i = [];
-    for (let f = u - 10; f <= u + 10; f++)
-      i.push(f);
-    return i;
-  }), h = g(() => Array.from({ length: 12 }, (u, i) => i + 1)), y = () => {
-    a.value = null, r.value = null;
-  }, S = () => {
-    t.value === 1 ? (t.value = 12, n.value -= 1) : t.value -= 1;
+  const a = /* @__PURE__ */ new Date(), l = B(e || a.getFullYear()), t = B(o || a.getMonth() + 1), n = B(null), i = B(null), v = B(null), p = h(() => {
+    const c = a.getFullYear(), d = [];
+    for (let f = c - 10; f <= c + 10; f++)
+      d.push(f);
+    return d;
+  }), y = h(() => Array.from({ length: 12 }, (c, d) => d + 1)), g = () => {
+    n.value = null, i.value = null;
+  }, w = () => {
+    t.value === 1 ? (t.value = 12, l.value -= 1) : t.value -= 1;
   }, b = () => {
-    t.value === 12 ? (t.value = 1, n.value += 1) : t.value += 1;
-  }, D = (u, i = !1) => {
-    if (i)
-      a.value = u, r.value = u;
-    else if (!a.value || a.value && r.value)
-      a.value = u, r.value = null;
+    t.value === 12 ? (t.value = 1, l.value += 1) : t.value += 1;
+  }, D = (c, d = !1) => {
+    if (d)
+      n.value = c, i.value = c;
+    else if (!n.value || n.value && i.value)
+      n.value = c, i.value = null;
     else {
-      const f = new Date(a.value.replace(/\./g, "-"));
-      new Date(u.replace(/\./g, "-")) < f ? (a.value = u, r.value = null) : r.value = u;
+      const f = new Date(n.value.replace(/\./g, "-"));
+      new Date(c.replace(/\./g, "-")) < f ? (n.value = c, i.value = null) : i.value = c;
     }
   };
   return {
     // State
-    currentYear: n,
+    currentYear: l,
     currentMonth: t,
-    selectedStartDate: a,
-    selectedEndDate: r,
+    selectedStartDate: n,
+    selectedEndDate: i,
     activeDateSelector: v,
     // Computed
     yearOptions: p,
-    monthOptions: h,
+    monthOptions: y,
     // Methods
-    clearDateSelection: y,
-    prevMonth: S,
+    clearDateSelection: g,
+    prevMonth: w,
     nextMonth: b,
     handleDateSelection: D,
     selectToday: () => {
-      const u = `${s.getFullYear()}.${String(s.getMonth() + 1).padStart(2, "0")}.${String(s.getDate()).padStart(2, "0")}`;
-      D(u, !0);
+      const c = `${a.getFullYear()}.${String(a.getMonth() + 1).padStart(2, "0")}.${String(a.getDate()).padStart(2, "0")}`;
+      D(c, !0);
     },
-    isDateInSelectedRange: (u) => {
-      if (!a.value || !r.value)
+    isDateInSelectedRange: (c) => {
+      if (!n.value || !i.value)
         return { isInRange: !1, isStart: !1, isEnd: !1 };
-      const i = new Date(u.replace(/\./g, "-")), f = new Date(a.value.replace(/\./g, "-")), x = new Date(r.value.replace(/\./g, "-")), R = u === a.value, L = u === r.value;
-      return { isInRange: i >= f && i <= x, isStart: R, isEnd: L };
+      const d = new Date(c.replace(/\./g, "-")), f = new Date(n.value.replace(/\./g, "-")), x = new Date(i.value.replace(/\./g, "-")), R = c === n.value, L = c === i.value;
+      return { isInRange: d >= f && d <= x, isStart: R, isEnd: L };
     }
   };
 }
-function Ne(e, o, s = {}) {
-  let n = null;
-  const t = typeof s == "string" ? { ignore: s } : s, { ignore: a, event: r = "click" } = t, v = () => {
-    n = (h) => {
-      const y = h.target;
-      e.value?.contains(y) || a && y.closest(a) || o();
-    }, document.addEventListener(r, n);
+function Ne(e, o, a = {}) {
+  let l = null;
+  const t = typeof a == "string" ? { ignore: a } : a, { ignore: n, event: i = "click" } = t, v = () => {
+    l = (y) => {
+      const g = y.target;
+      e.value?.contains(g) || n && g.closest(n) || o();
+    }, document.addEventListener(i, l);
   }, p = () => {
-    if (n) {
-      const h = typeof s == "string" ? "click" : s.event || "click";
-      document.removeEventListener(h, n), n = null;
+    if (l) {
+      const y = typeof a == "string" ? "click" : a.event || "click";
+      document.removeEventListener(y, l), l = null;
     }
   };
   return le(() => {
@@ -489,7 +489,7 @@ function Ne(e, o, s = {}) {
     removeGlobalListeners: p
   };
 }
-const He = { class: "form-conts" }, je = { class: "calendar-input" }, We = ["id", "name", "placeholder", "value", "readonly", "disabled", "required", "autofocus"], Ye = ["disabled", "aria-expanded"], Ge = { class: "calendar-head" }, Ue = { class: "calendar-switch-wrap" }, Xe = { class: "calendar-drop-down" }, Je = ["aria-expanded"], Qe = { class: "calendar-select calendar-year-wrap" }, Ze = { class: "sel year" }, et = ["onClick"], tt = { class: "calendar-drop-down" }, lt = ["aria-expanded"], at = { class: "calendar-select calendar-mon-wrap" }, nt = { class: "sel month" }, st = ["onClick"], ot = { class: "calendar-body" }, it = { class: "calendar-table-wrap" }, rt = { class: "calendar-tbl" }, dt = ["data-date"], ut = ["aria-pressed", "onClick"], ct = { class: "calendar-footer" }, ft = { class: "calendar-btn-wrap" }, vt = /* @__PURE__ */ B({
+const He = { class: "form-conts" }, je = { class: "calendar-input" }, We = ["id", "name", "placeholder", "value", "readonly", "disabled", "required", "autofocus"], Ye = ["disabled", "aria-expanded"], Ge = { class: "calendar-head" }, Ue = { class: "calendar-switch-wrap" }, Xe = { class: "calendar-drop-down" }, Je = ["aria-expanded"], Qe = { class: "calendar-select calendar-year-wrap" }, Ze = { class: "sel year" }, et = ["onClick"], tt = { class: "calendar-drop-down" }, lt = ["aria-expanded"], at = { class: "calendar-select calendar-mon-wrap" }, nt = { class: "sel month" }, st = ["onClick"], ot = { class: "calendar-body" }, it = { class: "calendar-table-wrap" }, dt = { class: "calendar-tbl" }, rt = ["data-date"], ct = ["aria-pressed", "onClick"], ut = { class: "calendar-footer" }, ft = { class: "calendar-btn-wrap" }, vt = /* @__PURE__ */ _({
   __name: "KrdsDateInput",
   props: {
     modelValue: { default: void 0 },
@@ -510,32 +510,32 @@ const He = { class: "form-conts" }, je = { class: "calendar-input" }, We = ["id"
   },
   emits: ["update:modelValue", "input", "change", "focus", "blur"],
   setup(e, { emit: o }) {
-    const s = e, n = o, t = K(), a = K(), r = K(!1), v = K(null), {
+    const a = e, l = o, t = B(), n = B(), i = B(!1), v = B(null), {
       currentYear: p,
-      currentMonth: h,
-      selectedStartDate: y,
-      selectedEndDate: S,
+      currentMonth: y,
+      selectedStartDate: g,
+      selectedEndDate: w,
       yearOptions: b,
       monthOptions: D,
       prevMonth: m,
-      nextMonth: l,
-      handleDateSelection: u,
-      selectToday: i,
+      nextMonth: s,
+      handleDateSelection: c,
+      selectToday: d,
       isDateInSelectedRange: f
-    } = qe(s.initialYear, s.initialMonth), x = () => {
-      r.value && a.value?.focus(), r.value = !1, v.value = null;
+    } = qe(a.initialYear, a.initialMonth), x = () => {
+      i.value && n.value?.focus(), i.value = !1, v.value = null;
     };
     Ne(t, x, ".calendar-conts");
-    const R = g(() => {
+    const R = h(() => {
       const C = ["krds-input", "datepicker", "cal"];
-      return s.size && C.push(s.size), s.class && C.push(s.class), C;
-    }), L = g(() => ["form-conts", "calendar-conts"]), M = g(() => ({
+      return a.size && C.push(a.size), a.class && C.push(a.class), C;
+    }), L = h(() => ["form-conts", "calendar-conts"]), M = h(() => ({
       "krds-calendar-area": !0,
-      active: r.value
-    })), z = g(() => {
-      const C = p.value, _ = h.value, $ = new Date(C, _ - 1, 1), G = new Date($);
-      G.setDate(G.getDate() - $.getDay());
-      const W = [], T = new Date(G);
+      active: i.value
+    })), z = h(() => {
+      const C = p.value, $ = y.value, K = new Date(C, $ - 1, 1), U = new Date(K);
+      U.setDate(U.getDate() - K.getDay());
+      const W = [], T = new Date(U);
       for (let oe = 0; oe < 6; oe++) {
         const pe = [];
         for (let me = 0; me < 7; me++) {
@@ -543,10 +543,10 @@ const He = { class: "form-conts" }, je = { class: "calendar-input" }, We = ["id"
           pe.push({
             day: T.getDate(),
             dateString: De,
-            isCurrentMonth: T.getMonth() === _ - 1,
+            isCurrentMonth: T.getMonth() === $ - 1,
             isToday: T.toDateString() === (/* @__PURE__ */ new Date()).toDateString(),
-            isPrevMonth: T.getMonth() < _ - 1 || T.getMonth() === 11 && _ === 1,
-            isNextMonth: T.getMonth() > _ - 1 || T.getMonth() === 0 && _ === 12,
+            isPrevMonth: T.getMonth() < $ - 1 || T.getMonth() === 11 && $ === 1,
+            isNextMonth: T.getMonth() > $ - 1 || T.getMonth() === 0 && $ === 12,
             isSunday: he === 0,
             isSaturday: he === 6
           }), T.setDate(T.getDate() + 1);
@@ -555,20 +555,20 @@ const He = { class: "form-conts" }, je = { class: "calendar-input" }, We = ["id"
       }
       return W;
     }), H = (C) => {
-      const _ = [];
-      if (C.isPrevMonth && _.push("old"), C.isNextMonth && _.push("new"), C.isToday && _.push("today"), C.isSunday && _.push("day-off"), s.holidays?.includes(C.dateString) && _.push("day-off"), s.eventDates?.includes(C.dateString) && _.push("day-event"), C.isCurrentMonth) {
-        const $ = f(C.dateString);
-        $.isInRange && (_.push("period"), $.isStart && _.push("start"), $.isEnd && _.push("end"));
+      const $ = [];
+      if (C.isPrevMonth && $.push("old"), C.isNextMonth && $.push("new"), C.isToday && $.push("today"), C.isSunday && $.push("day-off"), a.holidays?.includes(C.dateString) && $.push("day-off"), a.eventDates?.includes(C.dateString) && $.push("day-event"), C.isCurrentMonth) {
+        const K = f(C.dateString);
+        K.isInRange && ($.push("period"), K.isStart && $.push("start"), K.isEnd && $.push("end"));
       }
-      return _;
-    }, V = g(() => [
+      return $;
+    }, I = h(() => [
       {
         id: "get-today",
         label: "오늘",
         class: "text",
         variant: void 0,
         size: "small",
-        handler: i
+        handler: d
       },
       {
         id: "cancel-btn",
@@ -584,50 +584,50 @@ const He = { class: "form-conts" }, je = { class: "calendar-input" }, We = ["id"
         class: void 0,
         variant: "primary",
         size: "small",
-        handler: U
+        handler: X
       }
     ]), j = (C) => {
       v.value === C ? v.value = null : v.value = C;
     }, Z = (C) => {
       p.value = C, v.value = null;
     }, se = (C) => {
-      h.value = C, v.value = null;
-    }, U = () => {
-      if (y.value) {
-        if (S.value && y.value !== S.value) {
-          const C = `${y.value} ~ ${S.value}`;
-          n("update:modelValue", C);
+      y.value = C, v.value = null;
+    }, X = () => {
+      if (g.value) {
+        if (w.value && g.value !== w.value) {
+          const C = `${g.value} ~ ${w.value}`;
+          l("update:modelValue", C);
         } else
-          n("update:modelValue", y.value);
+          l("update:modelValue", g.value);
         x();
       }
     }, O = () => {
-      r.value = !0, v.value = null, setTimeout(() => {
+      i.value = !0, v.value = null, setTimeout(() => {
         t.value?.querySelector(".calendar-wrap")?.focus();
       }, 50);
     }, q = () => {
-      r.value ? x() : O();
+      i.value ? x() : O();
     }, ve = (C) => {
-      C.code === "Escape" && (v.value ? v.value = null : r.value && x());
+      C.code === "Escape" && (v.value ? v.value = null : i.value && x());
     }, ee = (C) => {
-      const _ = C.target;
-      n("update:modelValue", _.value), n("input", C);
+      const $ = C.target;
+      l("update:modelValue", $.value), l("input", C);
+    }, _e = (C) => {
+      l("change", C);
     }, Be = (C) => {
-      n("change", C);
+      l("focus", C);
     }, Ke = (C) => {
-      n("focus", C);
-    }, $e = (C) => {
-      n("blur", C);
+      l("blur", C);
     };
-    return (C, _) => (k(), w("div", He, [
-      d("div", {
-        class: I(L.value)
+    return (C, $) => (k(), S("div", He, [
+      r("div", {
+        class: E(L.value)
       }, [
-        d("div", je, [
-          d("input", {
+        r("div", je, [
+          r("input", {
             id: e.id,
             name: e.name,
-            class: I(R.value),
+            class: E(R.value),
             placeholder: e.placeholder,
             value: e.modelValue,
             readonly: e.readonly,
@@ -636,82 +636,82 @@ const He = { class: "form-conts" }, je = { class: "calendar-input" }, We = ["id"
             autofocus: e.autofocus,
             type: "text",
             onInput: ee,
-            onChange: Be,
-            onFocus: Ke,
-            onBlur: $e
+            onChange: _e,
+            onFocus: Be,
+            onBlur: Ke
           }, null, 42, We),
-          d("button", {
+          r("button", {
             ref_key: "datePickerButtonRef",
-            ref: a,
-            class: I(`krds-btn ${e.size || "medium"} icon form-btn-datepicker`),
+            ref: n,
+            class: E(`krds-btn ${e.size || "medium"} icon form-btn-datepicker`),
             disabled: e.disabled,
-            "aria-expanded": r.value,
+            "aria-expanded": i.value,
             type: "button",
             onClick: q
-          }, [..._[4] || (_[4] = [
-            d("span", { class: "sr-only" }, "달력 열기", -1),
-            d("i", { class: "svg-icon ico-calendar" }, null, -1)
+          }, [...$[4] || ($[4] = [
+            r("span", { class: "sr-only" }, "달력 열기", -1),
+            r("i", { class: "svg-icon ico-calendar" }, null, -1)
           ])], 10, Ye)
         ]),
-        d("div", {
+        r("div", {
           ref_key: "datePickerAreaRef",
           ref: t,
-          class: I(M.value)
+          class: E(M.value)
         }, [
-          Q(d("div", {
+          Q(r("div", {
             class: "calendar-wrap bottom",
             "aria-label": "달력",
             tabindex: "0",
             onKeydown: ve
           }, [
-            d("div", Ge, [
-              d("button", {
+            r("div", Ge, [
+              r("button", {
                 type: "button",
                 class: "btn-cal-move prev",
-                onClick: _[0] || (_[0] = //@ts-ignore
-                (...$) => P(m) && P(m)(...$))
-              }, [..._[5] || (_[5] = [
-                d("span", { class: "sr-only" }, "이전 달", -1)
+                onClick: $[0] || ($[0] = //@ts-ignore
+                (...K) => A(m) && A(m)(...K))
+              }, [...$[5] || ($[5] = [
+                r("span", { class: "sr-only" }, "이전 달", -1)
               ])]),
-              d("div", Ue, [
-                d("div", Xe, [
-                  d("button", {
+              r("div", Ue, [
+                r("div", Xe, [
+                  r("button", {
                     type: "button",
                     class: "btn-cal-switch year",
                     "aria-label": "연도 선택",
                     "aria-expanded": v.value === "year",
-                    onClick: _[1] || (_[1] = ($) => j("year"))
-                  }, E(P(p)) + "년 ", 9, Je),
-                  Q(d("div", Qe, [
-                    d("ul", Ze, [
-                      (k(!0), w(F, null, N(P(b), ($) => (k(), w("li", { key: $ }, [
-                        d("button", {
+                    onClick: $[1] || ($[1] = (K) => j("year"))
+                  }, V(A(p)) + "년 ", 9, Je),
+                  Q(r("div", Qe, [
+                    r("ul", Ze, [
+                      (k(!0), S(F, null, N(A(b), (K) => (k(), S("li", { key: K }, [
+                        r("button", {
                           type: "button",
-                          class: I({ active: $ === P(p) }),
-                          onClick: (G) => Z($)
-                        }, E($) + "년", 11, et)
+                          class: E({ active: K === A(p) }),
+                          onClick: (U) => Z(K)
+                        }, V(K) + "년", 11, et)
                       ]))), 128))
                     ])
                   ], 512), [
                     [te, v.value === "year"]
                   ])
                 ]),
-                d("div", tt, [
-                  d("button", {
+                r("div", tt, [
+                  r("button", {
                     type: "button",
                     class: "btn-cal-switch month",
                     "aria-label": "월 선택",
                     "aria-expanded": v.value === "month",
-                    onClick: _[2] || (_[2] = ($) => j("month"))
-                  }, E(P(h).toString().padStart(2, "0")) + "월 ", 9, lt),
-                  Q(d("div", at, [
-                    d("ul", nt, [
-                      (k(!0), w(F, null, N(P(D), ($) => (k(), w("li", { key: $ }, [
-                        d("button", {
+                    onClick: $[2] || ($[2] = (K) => j("month"))
+                  }, V(A(y).toString().padStart(2, "0")) + "월 ", 9, lt),
+                  Q(r("div", at, [
+                    r("ul", nt, [
+                      (k(!0), S(F, null, N(A(D), (K) => (k(), S("li", { key: K }, [
+                        r("button", {
                           type: "button",
-                          class: I({ active: $ === P(h) }),
-                          onClick: (G) => se($)
-                        }, E($.toString().padStart(2, "0")) + "월 ", 11, st)
+                          class: E({ active: K === A(y) }),
+                          onClick: (U) => se(K)
+                        }, V(K.toString().padStart(2, "0")) + "월 ", 11, st)
                       ]))), 128))
                     ])
                   ], 512), [
@@ -719,76 +719,76 @@ const He = { class: "form-conts" }, je = { class: "calendar-input" }, We = ["id"
                   ])
                 ])
               ]),
-              d("button", {
+              r("button", {
                 type: "button",
                 class: "btn-cal-move next",
-                onClick: _[3] || (_[3] = //@ts-ignore
-                (...$) => P(l) && P(l)(...$))
-              }, [..._[6] || (_[6] = [
-                d("span", { class: "sr-only" }, "다음 달", -1)
+                onClick: $[3] || ($[3] = //@ts-ignore
+                (...K) => A(s) && A(s)(...K))
+              }, [...$[6] || ($[6] = [
+                r("span", { class: "sr-only" }, "다음 달", -1)
               ])])
             ]),
-            d("div", ot, [
-              d("div", it, [
-                d("table", rt, [
-                  d("caption", null, E(P(p)) + "년 " + E(P(h).toString().padStart(2, "0")) + "월", 1),
-                  _[7] || (_[7] = d("thead", null, [
-                    d("tr", null, [
-                      d("th", null, "일"),
-                      d("th", null, "월"),
-                      d("th", null, "화"),
-                      d("th", null, "수"),
-                      d("th", null, "목"),
-                      d("th", null, "금"),
-                      d("th", null, "토")
+            r("div", ot, [
+              r("div", it, [
+                r("table", dt, [
+                  r("caption", null, V(A(p)) + "년 " + V(A(y).toString().padStart(2, "0")) + "월", 1),
+                  $[7] || ($[7] = r("thead", null, [
+                    r("tr", null, [
+                      r("th", null, "일"),
+                      r("th", null, "월"),
+                      r("th", null, "화"),
+                      r("th", null, "수"),
+                      r("th", null, "목"),
+                      r("th", null, "금"),
+                      r("th", null, "토")
                     ])
                   ], -1)),
-                  d("tbody", null, [
-                    (k(!0), w(F, null, N(z.value, ($, G) => (k(), w("tr", { key: G }, [
-                      (k(!0), w(F, null, N($, (W, T) => (k(), w("td", {
+                  r("tbody", null, [
+                    (k(!0), S(F, null, N(z.value, (K, U) => (k(), S("tr", { key: U }, [
+                      (k(!0), S(F, null, N(K, (W, T) => (k(), S("td", {
                         key: T,
-                        class: I(H(W)),
+                        class: E(H(W)),
                         "data-date": W.dateString
                       }, [
-                        d("button", {
+                        r("button", {
                           type: "button",
                           class: "btn-set-date",
-                          "aria-pressed": P(f)(W.dateString).isInRange ? "true" : "false",
-                          onClick: (oe) => P(u)(W.dateString)
+                          "aria-pressed": A(f)(W.dateString).isInRange ? "true" : "false",
+                          onClick: (oe) => A(c)(W.dateString)
                         }, [
-                          d("span", null, E(W.day), 1)
-                        ], 8, ut)
-                      ], 10, dt))), 128))
+                          r("span", null, V(W.day), 1)
+                        ], 8, ct)
+                      ], 10, rt))), 128))
                     ]))), 128))
                   ])
                 ])
               ])
             ]),
-            d("div", ct, [
-              d("div", ft, [
-                (k(!0), w(F, null, N(V.value, ($) => (k(), ie(P(Ce), {
-                  id: $.id,
-                  key: $.id,
-                  class: I($.class),
-                  variant: $.variant,
-                  size: $.size,
-                  onClick: $.handler
+            r("div", ut, [
+              r("div", ft, [
+                (k(!0), S(F, null, N(I.value, (K) => (k(), ie(A(Ce), {
+                  id: K.id,
+                  key: K.id,
+                  class: E(K.class),
+                  variant: K.variant,
+                  size: K.size,
+                  onClick: K.handler
                 }, {
-                  default: re(() => [
-                    A(E($.label), 1)
+                  default: de(() => [
+                    P(V(K.label), 1)
                   ]),
                   _: 2
                 }, 1032, ["id", "class", "variant", "size", "onClick"]))), 128))
               ])
             ])
           ], 544), [
-            [te, r.value]
+            [te, i.value]
           ])
         ], 2)
       ], 2)
     ]));
   }
-}), pt = B({
+}), pt = _({
   name: "KrdsTextarea",
   props: {
     modelValue: {
@@ -863,36 +863,36 @@ const He = { class: "form-conts" }, je = { class: "calendar-input" }, We = ["id"
   },
   emits: ["update:modelValue", "input", "change", "focus", "blur", "keydown", "keyup"],
   setup(e, { emit: o }) {
-    const s = K(0);
+    const a = B(0);
     ae(
       () => e.modelValue,
-      (l) => {
-        s.value = (l || "").length;
+      (s) => {
+        a.value = (s || "").length;
       },
       { immediate: !0 }
     );
-    const n = g(() => {
-      const l = ["krds-input"];
-      return e.size && l.push(e.size), e.class && l.push(e.class), l;
-    }), t = g(() => {
-      const l = {};
-      return e.resize && (l.resize = e.resize), l;
-    }), a = (l) => {
-      const i = l.target.value;
-      s.value = i.length, o("update:modelValue", i), o("input", l);
-    }, r = (l) => {
-      o("change", l);
-    }, v = (l) => {
-      o("focus", l);
-    }, p = (l) => {
-      o("blur", l);
-    }, h = (l) => {
-      o("keydown", l);
-    }, y = (l) => {
-      o("keyup", l);
-    }, S = g(() => {
-      const l = {
-        class: n.value,
+    const l = h(() => {
+      const s = ["krds-input"];
+      return e.size && s.push(e.size), e.class && s.push(e.class), s;
+    }), t = h(() => {
+      const s = {};
+      return e.resize && (s.resize = e.resize), s;
+    }), n = (s) => {
+      const d = s.target.value;
+      a.value = d.length, o("update:modelValue", d), o("input", s);
+    }, i = (s) => {
+      o("change", s);
+    }, v = (s) => {
+      o("focus", s);
+    }, p = (s) => {
+      o("blur", s);
+    }, y = (s) => {
+      o("keydown", s);
+    }, g = (s) => {
+      o("keyup", s);
+    }, w = h(() => {
+      const s = {
+        class: l.value,
         style: t.value,
         value: e.modelValue,
         placeholder: e.placeholder,
@@ -904,33 +904,33 @@ const He = { class: "form-conts" }, je = { class: "calendar-input" }, We = ["id"
         autofocus: e.autofocus,
         rows: e.rows,
         cols: e.cols,
-        onInput: a,
-        onChange: r,
+        onInput: n,
+        onChange: i,
         onFocus: v,
         onBlur: p,
-        onKeydown: h,
-        onKeyup: y
+        onKeydown: y,
+        onKeyup: g
       };
-      return e.maxlength !== void 0 && (l.maxlength = e.maxlength), e.minlength !== void 0 && (l.minlength = e.minlength), l;
-    }), b = g(() => ["form-conts"]), D = g(() => ["textarea-wrap"]), m = g(() => {
+      return e.maxlength !== void 0 && (s.maxlength = e.maxlength), e.minlength !== void 0 && (s.minlength = e.minlength), s;
+    }), b = h(() => ["form-conts"]), D = h(() => ["textarea-wrap"]), m = h(() => {
       if (!e.showCount) return null;
-      const l = s.value, u = e.maxlength;
+      const s = a.value, c = e.maxlength;
       return {
-        current: l,
-        max: u || ""
+        current: s,
+        max: c || ""
       };
     });
     return () => {
-      const l = [c("textarea", S.value)];
-      return m.value && l.push(
-        c("p", { class: "textarea-count" }, [
-          c("span", { class: "count-now" }, m.value.current),
-          c("span", { class: "count-total" }, m.value.max ? `/${m.value.max}` : "")
+      const s = [u("textarea", w.value)];
+      return m.value && s.push(
+        u("p", { class: "textarea-count" }, [
+          u("span", { class: "count-now" }, m.value.current),
+          u("span", { class: "count-total" }, m.value.max ? `/${m.value.max}` : "")
         ])
-      ), c("div", { class: b.value }, [c("div", { class: D.value }, l)]);
+      ), u("div", { class: b.value }, [u("div", { class: D.value }, s)]);
     };
   }
-}), mt = B({
+}), mt = _({
   name: "KrdsSelect",
   props: {
     modelValue: {
@@ -979,52 +979,52 @@ const He = { class: "form-conts" }, je = { class: "calendar-input" }, We = ["id"
     }
   },
   emits: ["update:modelValue", "focus", "blur"],
-  setup(e, { emit: o, slots: s }) {
-    const n = g(() => {
-      const y = [];
-      return e.sort ? y.push("krds-form-select-sort") : y.push("krds-form-select"), e.size && y.push(e.size), e.class && y.push(e.class), y;
-    }), t = (y) => {
-      const S = y.target, b = S.value === "" ? null : S.value;
+  setup(e, { emit: o, slots: a }) {
+    const l = h(() => {
+      const g = [];
+      return e.sort ? g.push("krds-form-select-sort") : g.push("krds-form-select"), e.size && g.push(e.size), e.class && g.push(e.class), g;
+    }), t = (g) => {
+      const w = g.target, b = w.value === "" ? null : w.value;
       o("update:modelValue", b);
-    }, a = (y) => {
-      o("focus", y);
-    }, r = (y) => {
-      o("blur", y);
-    }, v = g(() => ({
-      class: n.value,
+    }, n = (g) => {
+      o("focus", g);
+    }, i = (g) => {
+      o("blur", g);
+    }, v = h(() => ({
+      class: l.value,
       value: e.modelValue ?? "",
       title: e.title || e.placeholder,
       name: e.name,
       id: e.id,
       disabled: e.disabled || e.readonly,
       onChange: t,
-      onFocus: a,
-      onBlur: r
-    })), p = g(() => {
-      const y = ["form-conts"];
-      return e.state !== "default" && y.push(`is-${e.state}`), y;
-    }), h = () => {
-      const y = [];
-      return e.placeholder && !e.modelValue && y.push(c("option", { value: "", disabled: !0, selected: !0 }, e.placeholder)), e.options && e.options.length > 0 && e.options.forEach((S) => {
-        y.push(
-          c(
+      onFocus: n,
+      onBlur: i
+    })), p = h(() => {
+      const g = ["form-conts"];
+      return e.state !== "default" && g.push(`is-${e.state}`), g;
+    }), y = () => {
+      const g = [];
+      return e.placeholder && !e.modelValue && g.push(u("option", { value: "", disabled: !0, selected: !0 }, e.placeholder)), e.options && e.options.length > 0 && e.options.forEach((w) => {
+        g.push(
+          u(
             "option",
             {
-              value: S.value,
-              disabled: S.disabled,
-              selected: S.value === e.modelValue
+              value: w.value,
+              disabled: w.disabled,
+              selected: w.value === e.modelValue
             },
-            S.label
+            w.label
           )
         );
-      }), s.default && y.push(...s.default()), y;
+      }), a.default && g.push(...a.default()), g;
     };
     return () => {
-      const y = c("select", v.value, h());
-      return e.sort ? y : c("div", { class: p.value }, [y]);
+      const g = u("select", v.value, y());
+      return e.sort ? g : u("div", { class: p.value }, [g]);
     };
   }
-}), ht = B({
+}), ht = _({
   name: "KrdsFileUpload",
   props: {
     modelValue: {
@@ -1128,14 +1128,14 @@ const He = { class: "form-conts" }, je = { class: "calendar-input" }, We = ["id"
     "preview"
   ],
   setup(e, { emit: o }) {
-    K(!1), g(() => {
-      const n = ["krds-file-upload", "line"];
-      return e.class && n.push(e.class), n;
+    B(!1), h(() => {
+      const l = ["krds-file-upload", "line"];
+      return e.class && l.push(e.class), l;
     });
-    const s = g(() => e.modelValue?.length || 0);
-    return g(() => !e.disabled && s.value < e.maxFiles), () => null;
+    const a = h(() => e.modelValue?.length || 0);
+    return h(() => !e.disabled && a.value < e.maxFiles), () => null;
   }
-}), yt = B({
+}), yt = _({
   name: "KrdsBadge",
   props: {
     type: {
@@ -1160,27 +1160,27 @@ const He = { class: "form-conts" }, je = { class: "calendar-input" }, We = ["id"
     }
   },
   emits: ["click"],
-  setup(e, { emit: o, slots: s }) {
-    const n = g(() => {
-      const a = ["krds-badge"];
-      return a.push(`${e.type}-${e.color}`), e.size && a.push(e.size), e.number && a.push("number"), e.class && a.push(e.class), a;
-    }), t = (a) => {
-      o("click", a);
+  setup(e, { emit: o, slots: a }) {
+    const l = h(() => {
+      const n = ["krds-badge"];
+      return n.push(`${e.type}-${e.color}`), e.size && n.push(e.size), e.number && n.push("number"), e.class && n.push(e.class), n;
+    }), t = (n) => {
+      o("click", n);
     };
-    return () => c(
+    return () => u(
       "span",
       {
         type: e.type,
         color: e.color,
         size: e.size,
         number: e.number,
-        class: n.value,
+        class: l.value,
         onClick: t
       },
-      s.default?.()
+      a.default?.()
     );
   }
-}), gt = B({
+}), gt = _({
   name: "KrdsTag",
   props: {
     link: {
@@ -1205,40 +1205,40 @@ const He = { class: "form-conts" }, je = { class: "calendar-input" }, We = ["id"
     }
   },
   emits: ["remove"],
-  setup(e, { emit: o, slots: s }) {
-    const n = g(() => {
-      const r = ["krds-btn-tag"];
-      return e.link && r.push("link"), e.class && r.push(e.class), r;
-    }), t = (r) => {
-      o("remove", r);
-    }, a = () => c(
+  setup(e, { emit: o, slots: a }) {
+    const l = h(() => {
+      const i = ["krds-btn-tag"];
+      return e.link && i.push("link"), e.class && i.push(e.class), i;
+    }), t = (i) => {
+      o("remove", i);
+    }, n = () => u(
       "button",
       {
         type: "button",
         class: "btn-delete",
         onClick: t
       },
-      [c("span", { class: "sr-only" }, "삭제")]
+      [u("span", { class: "sr-only" }, "삭제")]
     );
     return () => {
-      const r = [], v = s.default?.();
-      if (v && r.push(v), e.link || r.push(a()), e.link) {
+      const i = [], v = a.default?.();
+      if (v && i.push(v), e.link || i.push(n()), e.link) {
         const p = {
           href: e.href,
-          class: n.value
+          class: l.value
         };
-        return e.target && (p.target = e.target), e.rel && (p.rel = e.rel), c("a", p, r);
+        return e.target && (p.target = e.target), e.rel && (p.rel = e.rel), u("a", p, i);
       }
-      return c(
+      return u(
         "span",
         {
-          class: n.value
+          class: l.value
         },
-        r
+        i
       );
     };
   }
-}), bt = B({
+}), bt = _({
   name: "KrdsTagGroup",
   props: {
     size: {
@@ -1251,19 +1251,19 @@ const He = { class: "form-conts" }, je = { class: "calendar-input" }, We = ["id"
     }
   },
   setup(e, { slots: o }) {
-    const s = g(() => {
-      const n = ["krds-tag-wrap"];
-      return e.size && n.push(e.size), e.class && n.push(e.class), n;
+    const a = h(() => {
+      const l = ["krds-tag-wrap"];
+      return e.size && l.push(e.size), e.class && l.push(e.class), l;
     });
-    return () => c(
+    return () => u(
       "div",
       {
-        class: s.value
+        class: a.value
       },
       o.default?.()
     );
   }
-}), kt = B({
+}), kt = _({
   name: "KrdsMasthead",
   props: {
     class: {
@@ -1272,40 +1272,40 @@ const He = { class: "form-conts" }, je = { class: "calendar-input" }, We = ["id"
     }
   },
   emits: ["click"],
-  setup(e, { emit: o, slots: s }) {
-    const n = g(() => {
-      const a = [""];
-      return e.class && a.push(e.class), a;
-    }), t = (a) => {
-      o("click", a);
+  setup(e, { emit: o, slots: a }) {
+    const l = h(() => {
+      const n = [""];
+      return e.class && n.push(e.class), n;
+    }), t = (n) => {
+      o("click", n);
     };
-    return () => c(
+    return () => u(
       "div",
       {
         id: "krds-masthead",
-        class: n.value,
+        class: l.value,
         onClick: t
       },
       [
-        c("div", { class: "toggle-wrap" }, [
-          c("div", { class: "toggle-head" }, [c("div", { class: "inner" }, [c("span", { class: "nuri-txt" }, s.default?.())])])
+        u("div", { class: "toggle-wrap" }, [
+          u("div", { class: "toggle-head" }, [u("div", { class: "inner" }, [u("span", { class: "nuri-txt" }, a.default?.())])])
         ])
       ]
     );
   }
 });
 let St = 0;
-function ue(e = "krds") {
+function ce(e = "krds") {
   return `${e}-${++St}`;
 }
-function xl() {
+function Il() {
   const e = Date.now().toString(36).slice(-4), o = Math.random().toString(36).substring(2, 5);
   return `${e}${o}`;
 }
-function ce(...e) {
+function ue(...e) {
   return e.filter(Boolean).join(" ");
 }
-const wt = B({
+const wt = _({
   name: "KrdsToggleSwitch",
   props: {
     modelValue: {
@@ -1347,40 +1347,40 @@ const wt = B({
     }
   },
   emits: ["update:modelValue", "change"],
-  setup(e, { emit: o, attrs: s }) {
-    const n = g(() => e.modelValue), t = g(() => ce("krds-form-toggle-switch", e.size, e.class)), a = (v) => {
+  setup(e, { emit: o, attrs: a }) {
+    const l = h(() => e.modelValue), t = h(() => ue("krds-form-toggle-switch", e.size, e.class)), n = (v) => {
       if (e.disabled)
         return;
-      const h = v.target.checked;
-      o("update:modelValue", h), o("change", h);
-    }, r = g(() => e.id || ue("toggle-switch"));
-    return () => c(
+      const y = v.target.checked;
+      o("update:modelValue", y), o("change", y);
+    }, i = h(() => e.id || ce("toggle-switch"));
+    return () => u(
       "div",
       {
         class: t.value
       },
       [
-        c("input", {
+        u("input", {
           type: "checkbox",
-          id: r.value,
+          id: i.value,
           name: e.name,
-          checked: n.value,
+          checked: l.value,
           disabled: e.disabled,
-          onChange: a,
-          ...s
+          onChange: n,
+          ...a
         }),
-        c(
+        u(
           "label",
           {
-            for: r.value
+            for: i.value
           },
           [
-            c(
+            u(
               "span",
               {
                 class: "switch-toggle"
               },
-              [c("i")]
+              [u("i")]
             ),
             e.label || ""
           ]
@@ -1388,7 +1388,7 @@ const wt = B({
       ]
     );
   }
-}), Ct = B({
+}), Ct = _({
   name: "KrdsCheckArea",
   props: {
     class: {
@@ -1402,17 +1402,17 @@ const wt = B({
   },
   setup(e, { slots: o }) {
     return () => {
-      const s = ["krds-check-area"];
-      return e.column && s.push("chk-column"), e.class && s.push(e.class), c(
+      const a = ["krds-check-area"];
+      return e.column && a.push("chk-column"), e.class && a.push(e.class), u(
         "div",
         {
-          class: s
+          class: a
         },
         o.default?.()
       );
     };
   }
-}), xt = B({
+}), xt = _({
   name: "KrdsCheckbox",
   props: {
     modelValue: {
@@ -1443,44 +1443,44 @@ const wt = B({
   },
   emits: ["update:modelValue"],
   slots: Object,
-  setup(e, { emit: o, attrs: s, slots: n }) {
-    const t = g(() => e.modelValue), a = g(() => {
+  setup(e, { emit: o, attrs: a, slots: l }) {
+    const t = h(() => e.modelValue), n = h(() => {
       const p = e.chip ? "krds-form-chip" : "krds-form-check";
-      return ce(p, e.size, e.class);
-    }), r = (p) => {
+      return ue(p, e.size, e.class);
+    }), i = (p) => {
       if (e.disabled)
         return;
-      const y = p.target.checked;
-      o("update:modelValue", y);
-    }, v = g(() => e.id || ue("checkbox"));
+      const g = p.target.checked;
+      o("update:modelValue", g);
+    }, v = h(() => e.id || ce("checkbox"));
     return () => {
       const p = [
-        c("input", {
+        u("input", {
           type: "checkbox",
           id: v.value,
           checked: t.value,
           disabled: e.disabled,
-          onChange: r,
-          ...s
+          onChange: i,
+          ...a
         }),
-        c(
+        u(
           "label",
           {
             for: v.value
           },
-          n.default?.()
+          l.default?.()
         )
       ];
-      return n.description && !e.chip && p.push(c("div", { class: "krds-form-check-cnt" }, c("p", { class: "krds-form-check-p" }, n.description()))), c(
+      return l.description && !e.chip && p.push(u("div", { class: "krds-form-check-cnt" }, u("p", { class: "krds-form-check-p" }, l.description()))), u(
         "div",
         {
-          class: a.value
+          class: n.value
         },
         p
       );
     };
   }
-}), _t = B({
+}), $t = _({
   name: "KrdsRadio",
   props: {
     modelValue: {
@@ -1519,45 +1519,45 @@ const wt = B({
   },
   emits: ["update:modelValue"],
   slots: Object,
-  setup(e, { emit: o, attrs: s, slots: n }) {
-    const t = g(() => e.modelValue === e.value), a = g(() => {
-      const h = e.chip ? "krds-form-chip" : "krds-form-check";
-      return ce(h, e.size, e.class);
-    }), r = (h) => {
+  setup(e, { emit: o, attrs: a, slots: l }) {
+    const t = h(() => e.modelValue === e.value), n = h(() => {
+      const y = e.chip ? "krds-form-chip" : "krds-form-check";
+      return ue(y, e.size, e.class);
+    }), i = (y) => {
       if (e.disabled)
         return;
-      h.target.checked && o("update:modelValue", e.value);
-    }, v = g(() => e.id || ue("radio")), p = g(() => e.name);
+      y.target.checked && o("update:modelValue", e.value);
+    }, v = h(() => e.id || ce("radio")), p = h(() => e.name);
     return () => {
-      const h = [
-        c("input", {
+      const y = [
+        u("input", {
           type: "radio",
           id: v.value,
           name: p.value,
           value: String(e.value),
           checked: t.value,
           disabled: e.disabled,
-          onChange: r,
-          ...s
+          onChange: i,
+          ...a
         }),
-        c(
+        u(
           "label",
           {
             for: v.value
           },
-          n.default?.()
+          l.default?.()
         )
       ];
-      return n.description && !e.chip && h.push(c("div", { class: "krds-form-check-cnt" }, c("p", { class: "krds-form-check-p" }, n.description()))), c(
+      return l.description && !e.chip && y.push(u("div", { class: "krds-form-check-cnt" }, u("p", { class: "krds-form-check-p" }, l.description()))), u(
         "div",
         {
-          class: a.value
+          class: n.value
         },
-        h
+        y
       );
     };
   }
-}), Bt = B({
+}), _t = _({
   name: "KrdsStepIndicator",
   props: {
     modelValue: {
@@ -1571,29 +1571,29 @@ const wt = B({
   },
   emits: ["update:modelValue"],
   setup(e, { slots: o }) {
-    const s = g(() => {
+    const a = h(() => {
       const v = ["krds-step-wrap"];
       return e.class && v.push(e.class), v;
-    }), n = (v) => {
+    }), l = (v) => {
       const p = e.modelValue || 0;
       return v < p ? "done" : v === p ? "active" : "pending";
-    }, t = K(0), a = () => {
+    }, t = B(0), n = () => {
       t.value = 0;
-    }, r = () => t.value++;
+    }, i = () => t.value++;
     return Ve("stepIndicator", {
-      activeStep: g(() => e.modelValue || 0),
-      getStepStatus: n,
-      getNextStepIndex: r,
-      resetStepIndex: a
-    }), () => (a(), c(
+      activeStep: h(() => e.modelValue || 0),
+      getStepStatus: l,
+      getNextStepIndex: i,
+      resetStepIndex: n
+    }), () => (n(), u(
       "ol",
       {
-        class: s.value
+        class: a.value
       },
       o.default?.()
     ));
   }
-}), Kt = B({
+}), Bt = _({
   name: "KrdsStep",
   props: {
     step: {
@@ -1614,37 +1614,37 @@ const wt = B({
     }
   },
   emits: ["click"],
-  setup(e, { emit: o, slots: s }) {
-    const n = ze("stepIndicator"), t = n ? n.getNextStepIndex() : -1, a = g(() => e.status ? e.status : n && t >= 0 ? n.getStepStatus(t) : "pending"), r = g(() => {
-      const p = [a.value];
+  setup(e, { emit: o, slots: a }) {
+    const l = Ie("stepIndicator"), t = l ? l.getNextStepIndex() : -1, n = h(() => e.status ? e.status : l && t >= 0 ? l.getStepStatus(t) : "pending"), i = h(() => {
+      const p = [n.value];
       return e.class && p.push(e.class), p;
     }), v = (p) => {
       o("click", p, e.step);
     };
     return () => {
-      const p = a.value === "active";
-      return c(
+      const p = n.value === "active";
+      return u(
         "li",
         {
-          class: r.value,
+          class: i.value,
           onClick: v
         },
         [
-          c("span", [
+          u("span", [
             // 현재 단계 표시 (활성 상태일 때만)
-            p && c("em", { class: "sr-only" }, "현재단계"),
+            p && u("em", { class: "sr-only" }, "현재단계"),
             // 단계 번호
-            c("i", { class: "step" }, e.step),
+            u("i", { class: "step" }, e.step),
             // 단계 제목
-            c("span", { class: "step-tit" }, e.title),
+            u("span", { class: "step-tit" }, e.title),
             // 슬롯 내용 (추가 콘텐츠가 있는 경우)
-            s.default?.()
+            a.default?.()
           ])
         ]
       );
     };
   }
-}), $t = B({
+}), Kt = _({
   name: "KrdsSkipLink",
   props: {
     /**
@@ -1672,14 +1672,14 @@ const wt = B({
     }
   },
   setup(e, { slots: o }) {
-    return () => c(
+    return () => u(
       "div",
       {
         id: e.id,
         class: e.class
       },
       [
-        c(
+        u(
           "a",
           {
             href: e.href
@@ -1689,7 +1689,7 @@ const wt = B({
       ]
     );
   }
-}), Dt = ["id", "aria-label"], Vt = { class: "breadcrumb" }, zt = ["href", "aria-current", "onClick"], Et = { key: 0 }, It = /* @__PURE__ */ B({
+}), Dt = ["id", "aria-label"], Vt = { class: "breadcrumb" }, It = ["href", "aria-current", "onClick"], zt = { key: 0 }, Et = /* @__PURE__ */ _({
   __name: "KrdsBreadcrumb",
   props: {
     items: {},
@@ -1699,32 +1699,32 @@ const wt = B({
   },
   emits: ["item-click"],
   setup(e, { emit: o }) {
-    const s = e, n = o, t = (r) => r === s.items.length - 1, a = (r, v) => {
-      r.onClick && r.onClick(v), n("item-click", r, v);
+    const a = e, l = o, t = (i) => i === a.items.length - 1, n = (i, v) => {
+      i.onClick && i.onClick(v), l("item-click", i, v);
     };
-    return (r, v) => (k(), w("nav", {
+    return (i, v) => (k(), S("nav", {
       id: e.id,
       class: "krds-breadcrumb-wrap",
       "aria-label": e.ariaLabel
     }, [
-      d("ol", Vt, [
-        (k(!0), w(F, null, N(e.items, (p, h) => (k(), w("li", {
-          key: `breadcrumb-${h}`,
-          class: I({ home: h === 0 && e.showHomeIcon })
+      r("ol", Vt, [
+        (k(!0), S(F, null, N(e.items, (p, y) => (k(), S("li", {
+          key: `breadcrumb-${y}`,
+          class: E({ home: y === 0 && e.showHomeIcon })
         }, [
-          d("a", {
+          r("a", {
             href: p.href || "#",
             class: "txt",
-            "aria-current": t(h) ? "page" : void 0,
-            onClick: (y) => a(p, y)
+            "aria-current": t(y) ? "page" : void 0,
+            onClick: (g) => n(p, g)
           }, [
-            h === 0 && e.showHomeIcon ? Y("", !0) : (k(), w("span", Et, E(p.text), 1))
-          ], 8, zt)
+            y === 0 && e.showHomeIcon ? Y("", !0) : (k(), S("span", zt, V(p.text), 1))
+          ], 8, It)
         ], 2))), 128))
       ])
     ], 8, Dt));
   }
-}), Lt = B({
+}), Lt = _({
   name: "KrdsInPageNavigation",
   props: {
     title: {
@@ -1758,37 +1758,37 @@ const wt = B({
   },
   emits: ["itemClick"],
   slots: Object,
-  setup(e, { emit: o, slots: s }) {
-    const n = K(""), t = K(/* @__PURE__ */ new Map()), a = g(() => {
+  setup(e, { emit: o, slots: a }) {
+    const l = B(""), t = B(/* @__PURE__ */ new Map()), n = h(() => {
       const m = ["krds-in-page-navigation-type"];
       return e.class && m.push(e.class), m;
-    }), r = () => {
-      const m = e.headerTopSelector, l = e.headerInnerSelector, u = document.querySelector(m)?.clientHeight || 0, i = document.querySelector(l)?.clientHeight || 0;
-      return u + i;
-    }, v = (m, l) => {
-      if (o("itemClick", m, l), m.href.startsWith("#")) {
-        l.preventDefault();
-        const u = document.querySelector(m.href);
-        if (u) {
-          const i = r();
+    }), i = () => {
+      const m = e.headerTopSelector, s = e.headerInnerSelector, c = document.querySelector(m)?.clientHeight || 0, d = document.querySelector(s)?.clientHeight || 0;
+      return c + d;
+    }, v = (m, s) => {
+      if (o("itemClick", m, s), m.href.startsWith("#")) {
+        s.preventDefault();
+        const c = document.querySelector(m.href);
+        if (c) {
+          const d = i();
           if (window.scrollTo({
             left: 0,
-            top: u.getBoundingClientRect().top + window.scrollY - i,
+            top: c.getBoundingClientRect().top + window.scrollY - d,
             behavior: "smooth"
-          }), n.value = m.href, l instanceof KeyboardEvent) {
-            const f = u.querySelector(".sec-tit, h1, h2, h3, h4, h5, h6");
+          }), l.value = m.href, s instanceof KeyboardEvent) {
+            const f = c.querySelector(".sec-tit, h1, h2, h3, h4, h5, h6");
             f && f instanceof HTMLElement && (f.setAttribute("tabindex", "-1"), f.focus({ preventScroll: !0 }));
           }
         }
       }
     }, p = () => {
       t.value.clear(), e.items && e.items.filter((m) => m.href.startsWith("#")).forEach((m) => {
-        const l = document.querySelector(m.href);
-        l && t.value.set(m.href, l);
+        const s = document.querySelector(m.href);
+        s && t.value.set(m.href, s);
       });
-    }, h = () => {
+    }, y = () => {
       if (!e.autoActive || !e.items || t.value.size === 0) return;
-      const m = window.innerHeight, l = Math.ceil(m / 5), u = window.scrollY + m, i = document.body.scrollHeight, f = e.items.filter((z) => z.href.startsWith("#") && t.value.has(z.href)).map((z) => ({
+      const m = window.innerHeight, s = Math.ceil(m / 5), c = window.scrollY + m, d = document.body.scrollHeight, f = e.items.filter((z) => z.href.startsWith("#") && t.value.has(z.href)).map((z) => ({
         href: z.href,
         element: t.value.get(z.href),
         item: z
@@ -1796,69 +1796,69 @@ const wt = B({
       if (f.length === 0) return;
       const x = f[0], R = f[f.length - 1], L = x.element.offsetTop;
       let M = "";
-      if (u >= i)
+      if (c >= d)
         M = R.href;
       else if (window.scrollY <= L)
         M = x.href;
       else
         for (const z of f) {
-          const H = z.element.offsetHeight, V = z.element.offsetTop - l;
-          if (window.scrollY > V && window.scrollY <= V + H) {
+          const H = z.element.offsetHeight, I = z.element.offsetTop - s;
+          if (window.scrollY > I && window.scrollY <= I + H) {
             M = z.href;
             break;
           }
         }
-      M && M !== n.value && (n.value = M);
-    }, y = () => {
+      M && M !== l.value && (l.value = M);
+    }, g = () => {
       if (!e.items) return;
-      const m = e.items.find((l) => l.active);
-      m ? n.value = m.href : e.items.length > 0 && (n.value = e.items[0].href);
+      const m = e.items.find((s) => s.active);
+      m ? l.value = m.href : e.items.length > 0 && (l.value = e.items[0].href);
     };
     le(() => {
-      if (y(), e.autoActive) {
-        p(), h(), window.addEventListener("scroll", h, { passive: !0 });
+      if (g(), e.autoActive) {
+        p(), y(), window.addEventListener("scroll", y, { passive: !0 });
         const m = new MutationObserver(() => {
           p();
         });
         m.observe(document.body, {
           childList: !0,
           subtree: !0
-        }), X(() => {
+        }), J(() => {
           m.disconnect();
         });
       }
-    }), X(() => {
-      e.autoActive && (window.removeEventListener("scroll", h), t.value.clear());
+    }), J(() => {
+      e.autoActive && (window.removeEventListener("scroll", y), t.value.clear());
     });
-    const S = () => !e.caption && !e.title ? null : c("div", { class: "in-page-navigation-header" }, [
-      e.caption && c("p", { class: "quick-caption" }, e.caption),
-      e.title && c("p", { class: "quick-title" }, e.title)
+    const w = () => !e.caption && !e.title ? null : u("div", { class: "in-page-navigation-header" }, [
+      e.caption && u("p", { class: "quick-caption" }, e.caption),
+      e.title && u("p", { class: "quick-title" }, e.title)
     ]), b = () => {
       if (!e.items) return null;
-      const m = e.items.map((l) => {
-        const u = n.value === l.href || !e.autoActive && l.active;
-        return c("li", { key: l.href }, [
-          c(
+      const m = e.items.map((s) => {
+        const c = l.value === s.href || !e.autoActive && s.active;
+        return u("li", { key: s.href }, [
+          u(
             "a",
             {
-              href: l.href,
-              class: u ? "active" : "",
-              onClick: (i) => v(l, i),
-              onKeydown: (i) => {
-                (i.key === "Enter" || i.key === " ") && (i.preventDefault(), v(l, i));
+              href: s.href,
+              class: c ? "active" : "",
+              onClick: (d) => v(s, d),
+              onKeydown: (d) => {
+                (d.key === "Enter" || d.key === " ") && (d.preventDefault(), v(s, d));
               }
             },
-            l.text
+            s.text
           )
         ]);
       });
-      return c("nav", { class: "in-page-navigation-list" }, [c("ul", {}, m)]);
-    }, D = () => s.action ? c("div", { class: "in-page-navigation-action" }, [s.action()]) : null;
-    return () => c("div", { class: a.value }, [
-      c("div", { class: "krds-in-page-navigation-area" }, [S(), b(), D()].filter(Boolean))
+      return u("nav", { class: "in-page-navigation-list" }, [u("ul", {}, m)]);
+    }, D = () => a.action ? u("div", { class: "in-page-navigation-action" }, [a.action()]) : null;
+    return () => u("div", { class: n.value }, [
+      u("div", { class: "krds-in-page-navigation-area" }, [w(), b(), D()].filter(Boolean))
     ]);
   }
-}), Mt = ["id"], Rt = { class: "page-links" }, Tt = ["href", "aria-current", "onClick"], Pt = { key: 0 }, At = ["aria-label"], Ft = /* @__PURE__ */ B({
+}), Mt = ["id"], Rt = { class: "page-links" }, Tt = ["href", "aria-current", "onClick"], At = { key: 0 }, Pt = ["aria-label"], Ft = /* @__PURE__ */ _({
   __name: "KrdsPagination",
   props: {
     modelValue: { default: 1 },
@@ -1870,170 +1870,170 @@ const wt = B({
   },
   emits: ["update:modelValue"],
   setup(e, { emit: o }) {
-    const s = e, n = o, t = g(() => Math.max(1, s.min)), a = g(() => s.modelValue ?? t.value), r = g(() => a.value <= t.value), v = g(() => a.value >= s.max), p = g(() => {
-      if (!r.value)
+    const a = e, l = o, t = h(() => Math.max(1, a.min)), n = h(() => a.modelValue ?? t.value), i = h(() => n.value <= t.value), v = h(() => n.value >= a.max), p = h(() => {
+      if (!i.value)
         return "#";
-    }), h = g(() => {
+    }), y = h(() => {
       if (!v.value)
         return "#";
-    }), y = g(() => {
-      const { pageRange: m, max: l } = s, u = 1, i = [];
-      if (l <= m + 2 * u)
-        for (let f = t.value; f <= l; f++)
-          i.push({
+    }), g = h(() => {
+      const { pageRange: m, max: s } = a, c = 1, d = [];
+      if (s <= m + 2 * c)
+        for (let f = t.value; f <= s; f++)
+          d.push({
             type: "page",
             key: `page-${f}`,
             page: f,
             href: "#"
           });
       else {
-        const f = Math.min(u, l), x = Math.max(l - u + 1, 1), R = Math.max(t.value, a.value - Math.floor(m / 2)), L = Math.min(l, R + m - 1), M = Math.max(t.value, L - m + 1);
-        for (let V = t.value; V <= f; V++)
-          i.push({
+        const f = Math.min(c, s), x = Math.max(s - c + 1, 1), R = Math.max(t.value, n.value - Math.floor(m / 2)), L = Math.min(s, R + m - 1), M = Math.max(t.value, L - m + 1);
+        for (let I = t.value; I <= f; I++)
+          d.push({
             type: "page",
-            key: `page-${V}`,
-            page: V,
+            key: `page-${I}`,
+            page: I,
             href: "#"
           });
-        M > f + 1 && i.push({
+        M > f + 1 && d.push({
           type: "ellipsis",
           key: "ellipsis-left",
           ariaLabel: "페이지 생략"
         });
         const z = Math.max(M, f + 1), H = Math.min(L, x - 1);
-        for (let V = z; V <= H; V++)
-          i.push({
+        for (let I = z; I <= H; I++)
+          d.push({
             type: "page",
-            key: `page-${V}`,
-            page: V,
+            key: `page-${I}`,
+            page: I,
             href: "#"
           });
-        L < x - 1 && i.push({
+        L < x - 1 && d.push({
           type: "ellipsis",
           key: "ellipsis-right",
           ariaLabel: "페이지 생략"
         });
-        for (let V = x; V <= l; V++)
-          i.push({
+        for (let I = x; I <= s; I++)
+          d.push({
             type: "page",
-            key: `page-${V}`,
-            page: V,
+            key: `page-${I}`,
+            page: I,
             href: "#"
           });
       }
-      return i;
-    }), S = (m, l) => {
-      if (m === a.value) {
-        l.preventDefault();
+      return d;
+    }), w = (m, s) => {
+      if (m === n.value) {
+        s.preventDefault();
         return;
       }
-      n("update:modelValue", m);
+      l("update:modelValue", m);
     }, b = (m) => {
-      if (r.value) {
+      if (i.value) {
         m.preventDefault();
         return;
       }
-      const l = a.value - 1;
-      n("update:modelValue", l);
+      const s = n.value - 1;
+      l("update:modelValue", s);
     }, D = (m) => {
       if (v.value) {
         m.preventDefault();
         return;
       }
-      const l = a.value + 1;
-      n("update:modelValue", l);
+      const s = n.value + 1;
+      l("update:modelValue", s);
     };
-    return (m, l) => {
-      const u = Ee("sr-only");
-      return k(), w("div", {
+    return (m, s) => {
+      const c = ze("sr-only");
+      return k(), S("div", {
         id: e.id,
         class: "krds-pagination"
       }, [
-        (k(), ie(ye(r.value ? "span" : "a"), {
-          href: r.value ? void 0 : p.value,
-          class: I(["page-navi", "prev", { disabled: r.value }]),
+        (k(), ie(ye(i.value ? "span" : "a"), {
+          href: i.value ? void 0 : p.value,
+          class: E(["page-navi", "prev", { disabled: i.value }]),
           onClick: b
         }, {
-          default: re(() => [...l[0] || (l[0] = [
-            A(" 이전 ", -1)
+          default: de(() => [...s[0] || (s[0] = [
+            P(" 이전 ", -1)
           ])]),
           _: 1
         }, 8, ["href", "class"])),
-        d("div", Rt, [
-          (k(!0), w(F, null, N(y.value, (i) => (k(), w(F, {
-            key: i.key
+        r("div", Rt, [
+          (k(!0), S(F, null, N(g.value, (d) => (k(), S(F, {
+            key: d.key
           }, [
-            i.type === "page" ? (k(), w("a", {
+            d.type === "page" ? (k(), S("a", {
               key: 0,
-              href: i.href || "#",
-              class: I(["page-link", { active: i.page === a.value }]),
-              "aria-current": i.page === a.value ? "page" : void 0,
-              onClick: (f) => S(i.page, f)
+              href: d.href || "#",
+              class: E(["page-link", { active: d.page === n.value }]),
+              "aria-current": d.page === n.value ? "page" : void 0,
+              onClick: (f) => w(d.page, f)
             }, [
-              i.page === a.value ? Q((k(), w("span", Pt, [...l[1] || (l[1] = [
-                A("현재페이지", -1)
+              d.page === n.value ? Q((k(), S("span", At, [...s[1] || (s[1] = [
+                P("현재페이지", -1)
               ])])), [
-                [u]
+                [c]
               ]) : Y("", !0),
-              A(" " + E(i.page), 1)
-            ], 10, Tt)) : i.type === "ellipsis" ? (k(), w("span", {
+              P(" " + V(d.page), 1)
+            ], 10, Tt)) : d.type === "ellipsis" ? (k(), S("span", {
               key: 1,
               class: "page-link link-dot",
-              "aria-label": i.ariaLabel
-            }, null, 8, At)) : Y("", !0)
+              "aria-label": d.ariaLabel
+            }, null, 8, Pt)) : Y("", !0)
           ], 64))), 128))
         ]),
         (k(), ie(ye(v.value ? "span" : "a"), {
-          href: v.value ? void 0 : h.value,
-          class: I(["page-navi", "next", { disabled: v.value }]),
+          href: v.value ? void 0 : y.value,
+          class: E(["page-navi", "next", { disabled: v.value }]),
           onClick: D
         }, {
-          default: re(() => [...l[2] || (l[2] = [
-            A(" 다음 ", -1)
+          default: de(() => [...s[2] || (s[2] = [
+            P(" 다음 ", -1)
           ])]),
           _: 1
         }, 8, ["href", "class"]))
       ], 8, Mt);
     };
   }
-}), Ot = { class: "inner help-panel-flexible" }, qt = { class: "help-panel-wrap" }, Nt = { class: "help-conts-area" }, Ht = /* @__PURE__ */ B({
+}), Ot = { class: "inner help-panel-flexible" }, qt = { class: "help-panel-wrap" }, Nt = { class: "help-conts-area" }, Ht = /* @__PURE__ */ _({
   __name: "KrdsPanel",
   props: {
     modelValue: { type: Boolean, default: !1 }
   },
   emits: ["update:modelValue"],
   setup(e, { emit: o }) {
-    const s = e, n = o, t = g({
-      get: () => s.modelValue,
-      set: (v) => n("update:modelValue", v)
-    }), a = () => {
+    const a = e, l = o, t = h({
+      get: () => a.modelValue,
+      set: (v) => l("update:modelValue", v)
+    }), n = () => {
       t.value = !0;
-    }, r = () => {
+    }, i = () => {
       t.value = !1;
     };
-    return (v, p) => (k(), w("div", Ot, [
-      d("button", {
+    return (v, p) => (k(), S("div", Ot, [
+      r("button", {
         type: "button",
         class: "krds-btn small tertiary btn-help-panel expand btn-help-exec",
-        onClick: a
+        onClick: n
       }, [...p[0] || (p[0] = [
-        d("i", { class: "svg-icon ico-fold" }, null, -1),
-        A(" 도움말 ", -1)
+        r("i", { class: "svg-icon ico-fold" }, null, -1),
+        P(" 도움말 ", -1)
       ])]),
-      d("div", {
-        class: I(["krds-help-panel", { expand: t.value }])
+      r("div", {
+        class: E(["krds-help-panel", { expand: t.value }])
       }, [
-        d("div", qt, [
-          d("div", Nt, [
-            J(v.$slots, "default"),
-            d("button", {
+        r("div", qt, [
+          r("div", Nt, [
+            G(v.$slots, "default"),
+            r("button", {
               type: "button",
               class: "krds-btn small tertiary btn-help-panel fold",
-              onClick: r
+              onClick: i
             }, [...p[1] || (p[1] = [
-              d("span", { class: "sr-only" }, "도움말", -1),
-              A(" 접어두기 ", -1),
-              d("i", { class: "svg-icon ico-angle right" }, null, -1)
+              r("span", { class: "sr-only" }, "도움말", -1),
+              P(" 접어두기 ", -1),
+              r("i", { class: "svg-icon ico-angle right" }, null, -1)
             ])])
           ])
         ])
@@ -2046,7 +2046,7 @@ const wt = B({
 }, Yt = {
   key: 1,
   class: "svg-icon ico-tooltip"
-}, Gt = { class: "tooltip-title" }, Ut = { class: "tooltip-contents" }, Xt = /* @__PURE__ */ B({
+}, Gt = { class: "tooltip-title" }, Ut = { class: "tooltip-contents" }, Xt = /* @__PURE__ */ _({
   __name: "KrdsContextualHelp",
   props: {
     tooltipTitle: { default: "도움말 제목" },
@@ -2054,75 +2054,75 @@ const wt = B({
     position: { default: "top left" }
   },
   setup(e) {
-    const o = e, s = K(), n = K(), t = K(), a = K(), r = K(!1), v = () => {
-      const l = r.value;
-      y(), l || p();
+    const o = e, a = B(), l = B(), t = B(), n = B(), i = B(!1), v = () => {
+      const s = i.value;
+      g(), s || p();
     }, p = () => {
-      if (!t.value || !n.value) return;
-      r.value = !0, t.value.style.display = "block", n.value.setAttribute("aria-expanded", "true"), t.value.querySelector('a, button, [tabindex="0"], input, textarea, select')?.focus(), S();
-    }, h = () => {
-      !t.value || !n.value || (r.value = !1, t.value.style.display = "none", n.value.setAttribute("aria-expanded", "false"));
+      if (!t.value || !l.value) return;
+      i.value = !0, t.value.style.display = "block", l.value.setAttribute("aria-expanded", "true"), t.value.querySelector('a, button, [tabindex="0"], input, textarea, select')?.focus(), w();
     }, y = () => {
-      const l = document.querySelectorAll(".krds-contextual-help .tooltip-popover"), u = document.querySelectorAll(".krds-contextual-help .tooltip-btn");
-      l.forEach((i) => {
-        i.style.display = "none";
-      }), u.forEach((i) => {
-        i.setAttribute("aria-expanded", "false");
-      }), r.value = !1;
-    }, S = () => {
-      if (!s.value || !t.value) return;
-      const l = window.innerWidth <= 768, u = s.value.querySelector(".tooltip-action");
-      if (l) {
-        const f = getComputedStyle(document.querySelector(":root")).getPropertyValue("--krds-contents-padding-x").trim().split("px")[0], R = u.getBoundingClientRect().left - parseInt(f), L = document.body.clientWidth - parseInt(f) * 2;
+      !t.value || !l.value || (i.value = !1, t.value.style.display = "none", l.value.setAttribute("aria-expanded", "false"));
+    }, g = () => {
+      const s = document.querySelectorAll(".krds-contextual-help .tooltip-popover"), c = document.querySelectorAll(".krds-contextual-help .tooltip-btn");
+      s.forEach((d) => {
+        d.style.display = "none";
+      }), c.forEach((d) => {
+        d.setAttribute("aria-expanded", "false");
+      }), i.value = !1;
+    }, w = () => {
+      if (!a.value || !t.value) return;
+      const s = window.innerWidth <= 768, c = a.value.querySelector(".tooltip-action");
+      if (s) {
+        const f = getComputedStyle(document.querySelector(":root")).getPropertyValue("--krds-contents-padding-x").trim().split("px")[0], R = c.getBoundingClientRect().left - parseInt(f), L = document.body.clientWidth - parseInt(f) * 2;
         t.value.style.left = `-${R}px`, t.value.style.width = `${L}px`;
       } else
         t.value.style.left = "", t.value.style.right = "", t.value.style.width = "360px";
-    }, b = (l) => {
-      (l.key === "Escape" || l.key === "Esc") && y();
-    }, D = (l) => {
-      l.target.closest(".tooltip-action") || y();
+    }, b = (s) => {
+      (s.key === "Escape" || s.key === "Esc") && g();
+    }, D = (s) => {
+      s.target.closest(".tooltip-action") || g();
     }, m = () => {
-      r.value && S();
+      i.value && w();
     };
     return le(() => {
-      s.value && (n.value && n.value.setAttribute("aria-expanded", "false"), t.value && t.value.setAttribute("role", "tooltip"), document.addEventListener("keydown", b), document.addEventListener("click", D), window.addEventListener("resize", m));
-    }), X(() => {
+      a.value && (l.value && l.value.setAttribute("aria-expanded", "false"), t.value && t.value.setAttribute("role", "tooltip"), document.addEventListener("keydown", b), document.addEventListener("click", D), window.addEventListener("resize", m));
+    }), J(() => {
       document.removeEventListener("keydown", b), document.removeEventListener("click", D), window.removeEventListener("resize", m);
-    }), (l, u) => (k(), w("div", {
+    }), (s, c) => (k(), S("div", {
       ref_key: "containerRef",
-      ref: s,
-      class: I(["krds-contextual-help", o.position])
+      ref: a,
+      class: E(["krds-contextual-help", o.position])
     }, [
-      d("div", jt, [
-        d("button", {
+      r("div", jt, [
+        r("button", {
           ref_key: "tooltipBtnRef",
-          ref: n,
+          ref: l,
           type: "button",
           class: "krds-btn medium icon tooltip-btn",
           onClick: v
         }, [
-          u[0] || (u[0] = d("span", { class: "sr-only" }, "도움말", -1)),
-          o.helpIcon ? (k(), w("i", Wt)) : (k(), w("i", Yt))
+          c[0] || (c[0] = r("span", { class: "sr-only" }, "도움말", -1)),
+          o.helpIcon ? (k(), S("i", Wt)) : (k(), S("i", Yt))
         ], 512),
-        d("div", {
+        r("div", {
           ref_key: "tooltipPopoverRef",
           ref: t,
           class: "tooltip-popover",
           role: "tooltip"
         }, [
-          d("h4", Gt, E(o.tooltipTitle), 1),
-          d("div", Ut, [
-            J(l.$slots, "default")
+          r("h4", Gt, V(o.tooltipTitle), 1),
+          r("div", Ut, [
+            G(s.$slots, "default")
           ]),
-          d("button", {
+          r("button", {
             ref_key: "closeBtnRef",
-            ref: a,
+            ref: n,
             type: "button",
             class: "krds-btn xsmall icon tooltip-close",
-            onClick: h
-          }, [...u[1] || (u[1] = [
-            d("span", { class: "sr-only" }, "닫기", -1),
-            d("i", { class: "svg-icon ico-modal-close" }, null, -1)
+            onClick: y
+          }, [...c[1] || (c[1] = [
+            r("span", { class: "sr-only" }, "닫기", -1),
+            r("i", { class: "svg-icon ico-modal-close" }, null, -1)
           ])], 512)
         ], 512)
       ])
@@ -2131,7 +2131,7 @@ const wt = B({
 }), Jt = {
   key: 0,
   class: "coach-balloon"
-}, Qt = { class: "coach-tit" }, Zt = { class: "desc" }, el = { class: "coach-controls" }, tl = { class: "num" }, ll = { class: "btn-wrap" }, al = /* @__PURE__ */ B({
+}, Qt = { class: "coach-tit" }, Zt = { class: "desc" }, el = { class: "coach-controls" }, tl = { class: "num" }, ll = { class: "btn-wrap" }, al = /* @__PURE__ */ _({
   __name: "KrdsCoachMark",
   props: {
     coachMarkClass: { default: "" },
@@ -2144,56 +2144,56 @@ const wt = B({
   },
   emits: ["update:modelValue", "close"],
   setup(e, { emit: o }) {
-    const s = e, n = g(() => {
-      const p = s.activeStep - 1;
-      return s.stepsData && p >= 0 && p < s.stepsData.length ? s.stepsData[p] : null;
-    }), t = o, a = () => {
-      s.activeStep > 1 && t("update:modelValue", s.activeStep - 1);
-    }, r = () => {
-      s.activeStep < s.stepsData.length && t("update:modelValue", s.activeStep + 1);
+    const a = e, l = h(() => {
+      const p = a.activeStep - 1;
+      return a.stepsData && p >= 0 && p < a.stepsData.length ? a.stepsData[p] : null;
+    }), t = o, n = () => {
+      a.activeStep > 1 && t("update:modelValue", a.activeStep - 1);
+    }, i = () => {
+      a.activeStep < a.stepsData.length && t("update:modelValue", a.activeStep + 1);
     }, v = () => {
       t("close");
     };
-    return (p, h) => (k(), w("div", {
-      class: I(["krds-coach-mark", e.coachMarkClass]),
+    return (p, y) => (k(), S("div", {
+      class: E(["krds-coach-mark", e.coachMarkClass]),
       style: ne(e.style)
     }, [
-      e.modelValue === e.activeStep && n.value ? (k(), w("div", Jt, [
-        h[2] || (h[2] = d("h5", { class: "sr-only" }, "따라하기 가이드", -1)),
-        d("h6", Qt, E(e.activeStep) + "단계 : " + E(n.value.title), 1),
-        d("p", Zt, E(n.value.description), 1),
-        d("div", el, [
-          d("div", tl, [
-            h[0] || (h[0] = d("span", { class: "sr-only" }, "현재 단계", -1)),
-            d("strong", null, E(e.activeStep), 1),
-            h[1] || (h[1] = d("span", { class: "sr-only" }, "총 단계", -1)),
-            d("span", null, E(e.stepsData.length), 1)
+      e.modelValue === e.activeStep && l.value ? (k(), S("div", Jt, [
+        y[2] || (y[2] = r("h5", { class: "sr-only" }, "따라하기 가이드", -1)),
+        r("h6", Qt, V(e.activeStep) + "단계 : " + V(l.value.title), 1),
+        r("p", Zt, V(l.value.description), 1),
+        r("div", el, [
+          r("div", tl, [
+            y[0] || (y[0] = r("span", { class: "sr-only" }, "현재 단계", -1)),
+            r("strong", null, V(e.activeStep), 1),
+            y[1] || (y[1] = r("span", { class: "sr-only" }, "총 단계", -1)),
+            r("span", null, V(e.stepsData.length), 1)
           ]),
-          d("div", ll, [
-            d("button", {
+          r("div", ll, [
+            r("button", {
               type: "button",
               class: "krds-btn small text",
               onClick: v
             }, "그만보기"),
-            e.activeStep !== 1 ? (k(), w("button", {
+            e.activeStep !== 1 ? (k(), S("button", {
               key: 0,
               type: "button",
               class: "krds-btn small text",
-              onClick: a
+              onClick: n
             }, "이전으로")) : Y("", !0),
-            e.activeStep !== e.stepsData.length ? (k(), w("button", {
+            e.activeStep !== e.stepsData.length ? (k(), S("button", {
               key: 1,
               type: "button",
               class: "krds-btn small tertiary",
-              onClick: r
+              onClick: i
             }, "다음으로")) : Y("", !0)
           ])
         ])
       ])) : Y("", !0),
-      J(p.$slots, "coach-mark-content")
+      G(p.$slots, "coach-mark-content")
     ], 6));
   }
-}), nl = ["disabled", "aria-labelledby"], sl = ["id", "aria-hidden"], ol = { class: "sr-only" }, il = /* @__PURE__ */ B({
+}), nl = ["disabled", "aria-labelledby"], sl = ["id", "aria-hidden"], ol = { class: "sr-only" }, il = /* @__PURE__ */ _({
   __name: "KrdsTooltip",
   props: {
     type: { default: "default" },
@@ -2206,83 +2206,83 @@ const wt = B({
     id: {}
   },
   setup(e) {
-    const o = e, s = K(null), n = K(null), t = K(!1), a = K({}), r = K(`tooltip-popover-${Math.random().toString(36).substring(2, 9)}`), v = K(!1), p = g(() => {
+    const o = e, a = B(null), l = B(null), t = B(!1), n = B({}), i = B(`tooltip-popover-${Math.random().toString(36).substring(2, 9)}`), v = B(!1), p = h(() => {
       const f = ["krds-btn", "krds-tooltip"];
       return o.type === "default" ? f.push("small", "text") : o.type === "icon" ? f.push("icon") : o.type === "button" && f.push(""), !o.box && o.vertical && f.push("tooltip-vertical"), o.box && !o.vertical && f.push("tooltip-box"), f.join(" ");
-    }), h = g(() => {
+    }), y = h(() => {
       const f = [];
       return o.box && f.push("tooltip-box"), o.vertical && f.push("tooltip-vertical"), t.value && f.push("active"), f;
-    }), y = g(() => s.value?.querySelector("button")?.textContent?.trim() || ""), S = () => window.innerWidth <= 768, b = () => {
-      if (!s.value || !n.value) return;
-      const f = s.value.querySelector("button");
+    }), g = h(() => a.value?.querySelector("button")?.textContent?.trim() || ""), w = () => window.innerWidth <= 768, b = () => {
+      if (!a.value || !l.value) return;
+      const f = a.value.querySelector("button");
       if (!f) return;
-      const x = 12, { clientHeight: R, clientWidth: L } = n.value, { top: M, left: z, right: H, height: V, width: j } = f.getBoundingClientRect(), Z = window.innerWidth / 2, se = window.innerHeight / 2;
-      let U, O;
+      const x = 12, { clientHeight: R, clientWidth: L } = l.value, { top: M, left: z, right: H, height: I, width: j } = f.getBoundingClientRect(), Z = window.innerWidth / 2, se = window.innerHeight / 2;
+      let X, O;
       const q = [];
-      v.value || o.box || o.vertical ? (M + V > se ? (U = M - R - x, q.push("top")) : (U = M + V + x, q.push("bottom")), z + j > Z ? (O = H - L, q.push("right"), window.innerWidth - (z + j) > L / 2 && (O = z + (j - L) / 2, q.splice(q.indexOf("right"), 1))) : (O = z + (j - L) / 2, O < 0 && (O = z, q.push("left")))) : (U = M + (V - R) / 2, z + j > Z ? (O = z - L - x, q.push("right")) : O = H + x);
+      v.value || o.box || o.vertical ? (M + I > se ? (X = M - R - x, q.push("top")) : (X = M + I + x, q.push("bottom")), z + j > Z ? (O = H - L, q.push("right"), window.innerWidth - (z + j) > L / 2 && (O = z + (j - L) / 2, q.splice(q.indexOf("right"), 1))) : (O = z + (j - L) / 2, O < 0 && (O = z, q.push("left")))) : (X = M + (I - R) / 2, z + j > Z ? (O = z - L - x, q.push("right")) : O = H + x);
       const ee = window.innerWidth <= 420;
-      a.value = {
-        top: `${U}px`,
+      n.value = {
+        top: `${X}px`,
         left: ee ? "50%" : `${O}px`,
         transform: ee ? "translateX(-50%)" : "none"
-      }, n.value && (n.value.className = `krds-tooltip-popover ${q.join(" ")} ${h.value.join(" ")}`);
+      }, l.value && (l.value.className = `krds-tooltip-popover ${q.join(" ")} ${y.value.join(" ")}`);
     }, D = async () => {
       o.disabled || !o.tooltipContent || (t.value = !0, await we(), b());
     }, m = () => {
-      t.value = !1, a.value = {};
-    }, l = (f) => {
+      t.value = !1, n.value = {};
+    }, s = (f) => {
       (f.key === "Escape" || f.key === "Esc") && t.value && m();
-    }, u = () => {
-      v.value = S(), t.value && m();
-    }, i = () => {
+    }, c = () => {
+      v.value = w(), t.value && m();
+    }, d = () => {
       t.value && m();
     };
     return le(() => {
-      v.value = S(), document.addEventListener("keydown", l), window.addEventListener("scroll", i), window.addEventListener("resize", u);
-    }), X(() => {
-      document.removeEventListener("keydown", l), window.removeEventListener("scroll", i), window.removeEventListener("resize", u);
-    }), (f, x) => (k(), w("div", {
+      v.value = w(), document.addEventListener("keydown", s), window.addEventListener("scroll", d), window.addEventListener("resize", c);
+    }), J(() => {
+      document.removeEventListener("keydown", s), window.removeEventListener("scroll", d), window.removeEventListener("resize", c);
+    }), (f, x) => (k(), S("div", {
       ref_key: "containerRef",
-      ref: s
+      ref: a
     }, [
-      d("button", {
+      r("button", {
         type: "button",
-        class: I(p.value),
+        class: E(p.value),
         disabled: e.disabled,
-        "aria-labelledby": r.value,
+        "aria-labelledby": i.value,
         onMouseover: D,
         onMouseout: m,
         onFocusin: D,
         onFocusout: m
       }, [
-        J(f.$slots, "default")
+        G(f.$slots, "default")
       ], 42, nl),
-      Q(d("div", {
-        id: r.value,
+      Q(r("div", {
+        id: i.value,
         ref_key: "popoverRef",
-        ref: n,
-        class: I(["krds-tooltip-popover", h.value]),
-        style: ne(a.value),
+        ref: l,
+        class: E(["krds-tooltip-popover", y.value]),
+        style: ne(n.value),
         "aria-hidden": !t.value,
         role: "tooltip"
       }, [
-        d("span", ol, E(y.value), 1),
-        A(" " + E(e.tooltipContent), 1)
+        r("span", ol, V(g.value), 1),
+        P(" " + V(e.tooltipContent), 1)
       ], 14, sl), [
         [te, t.value]
       ])
     ], 512));
   }
-}), rl = ["aria-expanded"], dl = { class: "drop-in" }, ul = {
+}), dl = ["aria-expanded"], rl = { class: "drop-in" }, cl = {
   key: 0,
   class: "drop-top"
-}, cl = {
+}, ul = {
   key: 1,
   class: "drop-list"
 }, fl = ["lang", "aria-selected", "onClick"], vl = { class: "sr-only" }, pl = {
   key: 2,
   class: "drop-list"
-}, ml = ["href", "lang"], hl = /* @__PURE__ */ B({
+}, ml = ["href", "lang"], hl = /* @__PURE__ */ _({
   __name: "KrdsLanguageSwitcher",
   props: {
     languageList: {},
@@ -2295,96 +2295,96 @@ const wt = B({
   },
   emits: ["update:modelValue", "close"],
   setup(e, { emit: o }) {
-    const s = e, n = o, t = K(!1), a = K(), r = K(), v = () => {
-      t.value = !t.value, t.value && a.value && y();
+    const a = e, l = o, t = B(!1), n = B(), i = B(), v = () => {
+      t.value = !t.value, t.value && n.value && g();
     }, p = () => {
       t.value = !1;
-    }, h = (l) => {
-      n("update:modelValue", l), p(), n("close"), r.value?.focus();
-    }, y = () => {
-      if (!a.value) return;
-      const l = a.value.querySelector(".drop-menu");
-      if (!l) return;
-      const u = l.getBoundingClientRect(), i = window.innerWidth;
-      a.value.classList.remove("drop-left", "drop-right"), u.left < 0 ? a.value.classList.add("drop-left") : i < u.left + u.width && a.value.classList.add("drop-right");
-    }, S = (l) => {
-      l.key === "Escape" && (p(), r.value?.focus());
-    }, b = (l) => {
-      a.value?.contains(l.target) || p();
-    }, D = (l) => {
-      a.value?.contains(l.relatedTarget) || p();
-    }, m = (l) => {
-      if (!a.value) return;
-      a.value.querySelectorAll(".drop-list .item-link").forEach((f) => {
+    }, y = (s) => {
+      l("update:modelValue", s), p(), l("close"), i.value?.focus();
+    }, g = () => {
+      if (!n.value) return;
+      const s = n.value.querySelector(".drop-menu");
+      if (!s) return;
+      const c = s.getBoundingClientRect(), d = window.innerWidth;
+      n.value.classList.remove("drop-left", "drop-right"), c.left < 0 ? n.value.classList.add("drop-left") : d < c.left + c.width && n.value.classList.add("drop-right");
+    }, w = (s) => {
+      s.key === "Escape" && (p(), i.value?.focus());
+    }, b = (s) => {
+      n.value?.contains(s.target) || p();
+    }, D = (s) => {
+      n.value?.contains(s.relatedTarget) || p();
+    }, m = (s) => {
+      if (!n.value) return;
+      n.value.querySelectorAll(".drop-list .item-link").forEach((f) => {
         f.style.position = "relative", f.style.zIndex = "0";
       });
-      const i = l.target;
-      i.style.zIndex = "1";
+      const d = s.target;
+      d.style.zIndex = "1";
     };
-    return ae(t, (l) => {
-      l ? (document.addEventListener("keydown", S), document.addEventListener("click", b)) : (document.removeEventListener("keydown", S), document.removeEventListener("click", b));
-    }), X(() => {
-      document.removeEventListener("keydown", S), document.removeEventListener("click", b);
-    }), (l, u) => (k(), w("div", {
+    return ae(t, (s) => {
+      s ? (document.addEventListener("keydown", w), document.addEventListener("click", b)) : (document.removeEventListener("keydown", w), document.removeEventListener("click", b));
+    }), J(() => {
+      document.removeEventListener("keydown", w), document.removeEventListener("click", b);
+    }), (s, c) => (k(), S("div", {
       ref_key: "dropdownRef",
-      ref: a,
-      class: I(["krds-drop-wrap krds-language", {
+      ref: n,
+      class: E(["krds-drop-wrap krds-language", {
         active: t.value,
-        "drop-left": s.dropPosition === "left",
-        "drop-right": s.dropPosition === "right"
+        "drop-left": a.dropPosition === "left",
+        "drop-right": a.dropPosition === "right"
       }]),
       onFocusout: D
     }, [
-      d("button", {
+      r("button", {
         ref_key: "buttonRef",
-        ref: r,
+        ref: i,
         type: "button",
-        class: I(["krds-btn small text drop-btn", { active: t.value }]),
+        class: E(["krds-btn small text drop-btn", { active: t.value }]),
         "aria-expanded": t.value,
         onClick: v
       }, [
-        u[0] || (u[0] = d("i", { class: "svg-icon ico-global" }, null, -1)),
-        J(l.$slots, "default"),
-        u[1] || (u[1] = d("i", { class: "svg-icon ico-toggle" }, null, -1))
-      ], 10, rl),
-      d("div", {
+        c[0] || (c[0] = r("i", { class: "svg-icon ico-global" }, null, -1)),
+        G(s.$slots, "default"),
+        c[1] || (c[1] = r("i", { class: "svg-icon ico-toggle" }, null, -1))
+      ], 10, dl),
+      r("div", {
         class: "drop-menu",
         style: ne({ display: t.value ? "block" : "none" })
       }, [
-        d("div", dl, [
-          l.$slots["prev-item"] ? (k(), w("div", ul, [
-            J(l.$slots, "prev-item")
+        r("div", rl, [
+          s.$slots["prev-item"] ? (k(), S("div", cl, [
+            G(s.$slots, "prev-item")
           ])) : Y("", !0),
-          s.type === "default" ? (k(), w("ul", cl, [
-            (k(!0), w(F, null, N(e.languageList, (i) => (k(), w("li", {
-              key: i.code
+          a.type === "default" ? (k(), S("ul", ul, [
+            (k(!0), S(F, null, N(e.languageList, (d) => (k(), S("li", {
+              key: d.code
             }, [
-              d("a", {
+              r("a", {
                 href: "#",
-                class: I(["item-link", { active: s.modelValue === i.code }]),
-                lang: i.code,
-                "aria-selected": s.modelValue === i.code,
-                onClick: de((f) => h(i.code), ["prevent"]),
+                class: E(["item-link", { active: a.modelValue === d.code }]),
+                lang: d.code,
+                "aria-selected": a.modelValue === d.code,
+                onClick: re((f) => y(d.code), ["prevent"]),
                 onFocus: m
               }, [
-                A(E(i.name) + " ", 1),
-                d("span", vl, E(s.modelValue === i.code ? "선택됨" : ""), 1)
+                P(V(d.name) + " ", 1),
+                r("span", vl, V(a.modelValue === d.code ? "선택됨" : ""), 1)
               ], 42, fl)
             ]))), 128))
-          ])) : s.type === "external" ? (k(), w("ul", pl, [
-            (k(!0), w(F, null, N(e.languageList, (i) => (k(), w("li", {
-              key: i.code
+          ])) : a.type === "external" ? (k(), S("ul", pl, [
+            (k(!0), S(F, null, N(e.languageList, (d) => (k(), S("li", {
+              key: d.code
             }, [
-              d("a", {
-                href: i.url || "#",
+              r("a", {
+                href: d.url || "#",
                 class: "item-link",
-                lang: i.code,
+                lang: d.code,
                 target: "_blank",
                 title: "새 창 열림",
                 onFocus: m
               }, [
-                A(E(i.name) + " ", 1),
-                u[2] || (u[2] = d("i", { class: "svg-icon ico-go" }, null, -1))
+                P(V(d.name) + " ", 1),
+                c[2] || (c[2] = r("i", { class: "svg-icon ico-go" }, null, -1))
               ], 40, ml)
             ]))), 128))
           ])) : Y("", !0)
@@ -2392,101 +2392,101 @@ const wt = B({
       ], 4)
     ], 34));
   }
-}), yl = { class: "drop-in" }, gl = { class: "drop-list" }, bl = ["data-adjust-scale", "onClick"], kl = { class: "drop-bottom" }, Sl = /* @__PURE__ */ B({
+}), yl = { class: "drop-in" }, gl = { class: "drop-list" }, bl = ["data-adjust-scale", "onClick"], kl = { class: "drop-bottom" }, Sl = /* @__PURE__ */ _({
   __name: "KrdsResize",
   emits: ["update:modelValue", "close"],
   setup(e, { emit: o }) {
-    const s = o, n = K(!1), t = K(), a = K(), r = K("md"), v = [
+    const a = o, l = B(!1), t = B(), n = B(), i = B("md"), v = [
       { key: "sm", label: "작게", zoom: "0.9" },
       { key: "md", label: "보통", zoom: "1" },
       { key: "lg", label: "조금 크게", zoom: "1.1" },
       { key: "xlg", label: "크게", zoom: "1.3" },
       { key: "xxlg", label: "가장 크게", zoom: "1.5" }
     ], p = () => {
-      n.value = !n.value, n.value && t.value && b();
-    }, h = () => {
-      n.value = !1;
-    }, y = (i) => {
-      h(), s("close"), a.value?.focus(), r.value = i.key, document.body.style.zoom = i?.zoom;
-    }, S = () => {
-      const i = v.find((f) => f.key === "md");
-      i && y(i);
+      l.value = !l.value, l.value && t.value && b();
+    }, y = () => {
+      l.value = !1;
+    }, g = (d) => {
+      y(), a("close"), n.value?.focus(), i.value = d.key, document.body.style.zoom = d?.zoom;
+    }, w = () => {
+      const d = v.find((f) => f.key === "md");
+      d && g(d);
     }, b = () => {
       if (!t.value) return;
-      const i = t.value.querySelector(".drop-menu");
-      if (!i) return;
-      const f = i.getBoundingClientRect(), x = window.innerWidth;
+      const d = t.value.querySelector(".drop-menu");
+      if (!d) return;
+      const f = d.getBoundingClientRect(), x = window.innerWidth;
       t.value.classList.remove("drop-left", "drop-right"), f.left < 0 ? t.value.classList.add("drop-left") : x < f.left + f.width && t.value.classList.add("drop-right");
-    }, D = (i) => {
-      i.key === "Escape" && (h(), a.value?.focus());
-    }, m = (i) => {
-      t.value?.contains(i.target) || h();
-    }, l = (i) => {
-      t.value?.contains(i.relatedTarget) || h();
-    }, u = (i) => {
+    }, D = (d) => {
+      d.key === "Escape" && (y(), n.value?.focus());
+    }, m = (d) => {
+      t.value?.contains(d.target) || y();
+    }, s = (d) => {
+      t.value?.contains(d.relatedTarget) || y();
+    }, c = (d) => {
       if (!t.value) return;
       t.value.querySelectorAll(".drop-list .item-link").forEach((R) => {
         R.style.position = "relative", R.style.zIndex = "0";
       });
-      const x = i.target;
+      const x = d.target;
       x.style.zIndex = "1";
     };
-    return ae(n, (i) => {
-      i ? (document.addEventListener("keydown", D), document.addEventListener("click", m)) : (document.removeEventListener("keydown", D), document.removeEventListener("click", m));
-    }), X(() => {
+    return ae(l, (d) => {
+      d ? (document.addEventListener("keydown", D), document.addEventListener("click", m)) : (document.removeEventListener("keydown", D), document.removeEventListener("click", m));
+    }), J(() => {
       document.removeEventListener("keydown", D), document.removeEventListener("click", m);
-    }), (i, f) => (k(), w("div", {
+    }), (d, f) => (k(), S("div", {
       ref_key: "dropdownRef",
       ref: t,
       class: "krds-drop-wrap krds-resize",
       "data-adjust": "scale",
-      onFocusout: l
+      onFocusout: s
     }, [
-      d("button", {
+      r("button", {
         ref_key: "buttonRef",
-        ref: a,
+        ref: n,
         type: "button",
         class: "krds-btn small text drop-btn",
         onClick: p
       }, [...f[0] || (f[0] = [
-        A(" 화면크기 ", -1),
-        d("i", { class: "svg-icon ico-toggle" }, null, -1)
+        P(" 화면크기 ", -1),
+        r("i", { class: "svg-icon ico-toggle" }, null, -1)
       ])], 512),
-      d("div", {
+      r("div", {
         class: "drop-menu",
-        style: ne({ display: n.value ? "block" : "none" })
+        style: ne({ display: l.value ? "block" : "none" })
       }, [
-        d("div", yl, [
-          d("ul", gl, [
-            (k(), w(F, null, N(v, (x) => d("li", {
+        r("div", yl, [
+          r("ul", gl, [
+            (k(), S(F, null, N(v, (x) => r("li", {
               key: x.key
             }, [
-              d("button", {
+              r("button", {
                 type: "button",
-                class: I(["item-link", [x.key, x.key === r.value ? "active" : ""]]),
+                class: E(["item-link", [x.key, x.key === i.value ? "active" : ""]]),
                 "data-adjust-scale": x.key,
-                onClick: de((R) => y(x), ["prevent"]),
-                onFocus: u
-              }, E(x.label), 43, bl)
+                onClick: re((R) => g(x), ["prevent"]),
+                onFocus: c
+              }, V(x.label), 43, bl)
             ])), 64))
           ]),
-          d("div", kl, [
-            d("button", {
+          r("div", kl, [
+            r("button", {
               type: "button",
               class: "krds-btn medium text",
               "data-adjust-scale": "md",
-              onClick: de(S, ["prevent"]),
-              onFocus: u
+              onClick: re(w, ["prevent"]),
+              onFocus: c
             }, [...f[1] || (f[1] = [
-              d("i", { class: "svg-icon ico-reset" }, null, -1),
-              A(" 초기화 ", -1)
+              r("i", { class: "svg-icon ico-reset" }, null, -1),
+              P(" 초기화 ", -1)
             ])], 32)
           ])
         ])
       ], 4)
     ], 544));
   }
-}), wl = B({
+}), wl = _({
   name: "KrdsModal",
   props: {
     modelValue: {
@@ -2520,89 +2520,89 @@ const wt = B({
   },
   emits: ["update:modelValue"],
   slots: Object,
-  setup(e, { slots: o, emit: s }) {
-    const n = Ie()?.uid, t = g(() => e.modalId ?? `krds-modal-${n}`), a = g({
+  setup(e, { slots: o, emit: a }) {
+    const l = Ee()?.uid, t = h(() => e.modalId ?? `krds-modal-${l}`), n = h({
       get: () => e.modelValue,
-      set: (u) => s("update:modelValue", u)
-    }), r = g(() => `tit_${t.value}`), v = g(() => ({
+      set: (c) => a("update:modelValue", c)
+    }), i = h(() => `tit_${t.value}`), v = h(() => ({
       small: "modal-sm",
       medium: "modal-md",
       large: "modal-lg"
     })[e.size]), p = () => {
-      a.value = !1;
+      n.value = !1;
     };
-    let h = "", y = null;
-    const S = K(null), b = (u) => Array.from(u.querySelectorAll('button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])')).filter(
+    let y = "", g = null;
+    const w = B(null), b = (c) => Array.from(c.querySelectorAll('button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])')).filter(
       (f) => !f.hasAttribute("disabled") && f.getAttribute("tabindex") !== "-1"
-    ), D = (u) => {
-      if (!S.value || u.key !== "Tab") return;
-      const i = b(S.value);
-      if (i.length === 0) {
-        u.preventDefault();
+    ), D = (c) => {
+      if (!w.value || c.key !== "Tab") return;
+      const d = b(w.value);
+      if (d.length === 0) {
+        c.preventDefault();
         return;
       }
-      const f = i[0], x = i[i.length - 1];
-      u.shiftKey && document.activeElement === f ? (u.preventDefault(), x.focus()) : !u.shiftKey && document.activeElement === x && (u.preventDefault(), f.focus());
-    }, m = (u) => {
-      u.key === "Escape" && !e.persistent && p();
-    }, l = () => {
-      document.body.style.overflow = h, document.removeEventListener("keydown", D), document.removeEventListener("keydown", m), y && (y.focus(), y = null), S.value = null;
+      const f = d[0], x = d[d.length - 1];
+      c.shiftKey && document.activeElement === f ? (c.preventDefault(), x.focus()) : !c.shiftKey && document.activeElement === x && (c.preventDefault(), f.focus());
+    }, m = (c) => {
+      c.key === "Escape" && !e.persistent && p();
+    }, s = () => {
+      document.body.style.overflow = y, document.removeEventListener("keydown", D), document.removeEventListener("keydown", m), g && (g.focus(), g = null), w.value = null;
     };
     return ae(
       () => e.modelValue,
-      async (u) => {
-        if (u) {
-          h = document.body.style.overflow, document.body.style.overflow = "hidden", y = document.activeElement, await we();
-          const i = document.getElementById(t.value);
-          if (i) {
-            S.value = i;
-            const f = i.querySelector(".modal-conts");
+      async (c) => {
+        if (c) {
+          y = document.body.style.overflow, document.body.style.overflow = "hidden", g = document.activeElement, await we();
+          const d = document.getElementById(t.value);
+          if (d) {
+            w.value = d;
+            const f = d.querySelector(".modal-conts");
             f && (f.setAttribute("tabindex", "-1"), f.focus()), document.addEventListener("keydown", D), document.addEventListener("keydown", m);
           }
         } else
-          l();
+          s();
       },
       { immediate: !0 }
     ), Se(() => {
-      e.modelValue && l();
+      e.modelValue && s();
     }), () => {
-      if (!a.value) return null;
-      const u = {
+      if (!n.value) return null;
+      const c = {
         id: t.value,
         class: "krds-modal fade in shown",
         role: "dialog",
         "aria-modal": !0,
-        "aria-labelledby": r.value
+        "aria-labelledby": i.value
       };
-      return e.full ? u["data-type"] = "full" : e.bottomSheet && (u["data-type"] = "bottom-sheet"), c(
+      return e.full ? c["data-type"] = "full" : e.bottomSheet && (c["data-type"] = "bottom-sheet"), u(
         Le,
         { to: "body" },
-        c("section", u, [
-          c("div", { class: `modal-dialog ${v.value}` }, [
-            c(
+        u("section", c, [
+          u("div", { class: `modal-dialog ${v.value}` }, [
+            u(
               "div",
               { class: "modal-content" },
               [
                 // modal title
-                o.title ? c("div", { class: "modal-header" }, [c("h2", { id: r.value, class: "modal-title" }, o.title())]) : null,
+                o.title ? u("div", { class: "modal-header" }, [u("h2", { id: i.value, class: "modal-title" }, o.title())]) : null,
                 // modal contents
-                c("div", { class: "modal-conts" }, [c("div", { class: "conts-area" }, o.default?.())]),
+                u("div", { class: "modal-conts" }, [u("div", { class: "conts-area" }, o.default?.())]),
                 // modal btn
-                o.footer ? c("div", { class: "modal-btn btn-wrap" }, o.footer()) : null,
+                o.footer ? u("div", { class: "modal-btn btn-wrap" }, o.footer()) : null,
                 // close button
-                c(
+                u(
                   "button",
                   {
                     type: "button",
                     class: "krds-btn medium icon btn-close close-modal",
                     onClick: p
                   },
-                  [c("span", { class: "sr-only" }, "닫기"), c("i", { class: "svg-icon ico-popup-close" })]
+                  [u("span", { class: "sr-only" }, "닫기"), u("i", { class: "svg-icon ico-popup-close" })]
                 )
               ].filter(Boolean)
             )
           ]),
-          c("div", {
+          u("div", {
             class: e.backdrop ? "modal-back in" : "modal-back",
             onClick: e.persistent ? void 0 : p
           })
@@ -2610,10 +2610,81 @@ const wt = B({
       );
     };
   }
+}), Cl = _({
+  name: "KrdsAccordionGroup",
+  props: {
+    typeLine: {
+      type: Boolean,
+      default: !1
+    },
+    class: {
+      type: String,
+      default: void 0
+    }
+  },
+  setup(e, { slots: o }) {
+    const a = h(() => {
+      const l = ["krds-accordion"];
+      return e.typeLine && l.push("type-line"), e.class && l.push(e.class), l;
+    });
+    return () => u(
+      "div",
+      {
+        class: a.value
+      },
+      o.default?.()
+    );
+  }
+}), xl = ["id"], $l = { class: "accordion-header" }, _l = ["id", "aria-expanded", "aria-controls"], Bl = ["id", "aria-labelledby"], Kl = { class: "accordion-body" }, Dl = /* @__PURE__ */ _({
+  __name: "KrdsAccordionItem",
+  props: {
+    id: {},
+    openItem: {},
+    title: {},
+    content: {}
+  },
+  emits: ["toggle"],
+  setup(e, { emit: o }) {
+    const a = e, l = o, t = h(() => a.openItem === a.id), n = () => {
+      l("toggle", a.id);
+    };
+    return (i, v) => (k(), S("div", {
+      id: e.id,
+      class: E(["accordion-item", { active: t.value }])
+    }, [
+      r("h5", $l, [
+        r("button", {
+          id: `accordion-header-${e.id}`,
+          type: "button",
+          class: "btn-accordion",
+          "aria-expanded": t.value,
+          "aria-controls": `accordion-collapse-${e.id}`,
+          onClick: v[0] || (v[0] = (p) => n())
+        }, [
+          G(i.$slots, "title", {}, () => [
+            P(V(e.title), 1)
+          ])
+        ], 8, _l)
+      ]),
+      r("div", {
+        id: `accordion-collapse-${e.id}`,
+        class: "accordion-collapse collapse",
+        "aria-labelledby": `accordion-header-${e.id}`
+      }, [
+        r("div", Kl, [
+          G(i.$slots, "content", {}, () => [
+            P(V(e.content), 1)
+          ])
+        ])
+      ], 8, Bl)
+    ], 10, xl));
+  }
 }), ge = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
   __proto__: null,
+  KrdsAccordionGroup: Cl,
+  KrdsAccordionItem: Dl,
   KrdsBadge: yt,
-  KrdsBreadcrumb: It,
+  KrdsBreadcrumb: Et,
   KrdsButton: Ce,
   KrdsButtonGroup: Me,
   KrdsCheckArea: Ct,
@@ -2624,23 +2695,23 @@ const wt = B({
   KrdsFileUpload: ht,
   KrdsFormGroup: Oe,
   KrdsFormHint: Fe,
-  KrdsFormLabel: Ae,
+  KrdsFormLabel: Pe,
   KrdsIcon: Re,
   KrdsInPageNavigation: Lt,
-  KrdsInput: Pe,
+  KrdsInput: Ae,
   KrdsLanguageSwitcher: hl,
   KrdsLink: Te,
   KrdsMasthead: kt,
   KrdsModal: wl,
   KrdsPagination: Ft,
   KrdsPanel: Ht,
-  KrdsRadio: _t,
+  KrdsRadio: $t,
   KrdsResize: Sl,
   KrdsSelect: mt,
-  KrdsSkipLink: $t,
+  KrdsSkipLink: Kt,
   KrdsSpinner: xe,
-  KrdsStep: Kt,
-  KrdsStepIndicator: Bt,
+  KrdsStep: Bt,
+  KrdsStepIndicator: _t,
   KrdsTag: gt,
   KrdsTagGroup: bt,
   KrdsTextarea: pt,
@@ -2658,29 +2729,31 @@ const wt = B({
   }
 }, be = {
   "sr-only": fe
-}, _e = (e) => {
+}, $e = (e) => {
   e.directive("sr-only", fe);
 }, ke = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
   __proto__: null,
   default: be,
   directives: be,
-  installDirectives: _e,
+  installDirectives: $e,
   vSrOnly: fe
-}, Symbol.toStringTag, { value: "Module" })), _l = {
+}, Symbol.toStringTag, { value: "Module" })), zl = {
   install(e, o = {}) {
     e.provide("krds:config", o);
-    const s = o.components || Object.keys(ge);
-    s.forEach((n) => {
-      const t = ge[n];
-      t && e.component(n, t);
-    }), typeof ke == "object" && ke !== null && _e(e), e.config.globalProperties.$krds = {
+    const a = o.components || Object.keys(ge);
+    a.forEach((l) => {
+      const t = ge[l];
+      t && e.component(l, t);
+    }), typeof ke == "object" && ke !== null && $e(e), e.config.globalProperties.$krds = {
       version: "__VERSION__"
-    }, process.env.NODE_ENV !== "production" && console.log(`[KRDS Vue] v__VERSION__ 설치 완료 - 컴포넌트: ${s.length}개`);
+    }, process.env.NODE_ENV !== "production" && console.log(`[KRDS Vue] v__VERSION__ 설치 완료 - 컴포넌트: ${a.length}개`);
   }
-}, Bl = "__VERSION__";
+}, El = "__VERSION__";
 export {
+  Cl as KrdsAccordionGroup,
+  Dl as KrdsAccordionItem,
   yt as KrdsBadge,
-  It as KrdsBreadcrumb,
+  Et as KrdsBreadcrumb,
   Ce as KrdsButton,
   Me as KrdsButtonGroup,
   Ct as KrdsCheckArea,
@@ -2691,32 +2764,32 @@ export {
   ht as KrdsFileUpload,
   Oe as KrdsFormGroup,
   Fe as KrdsFormHint,
-  Ae as KrdsFormLabel,
+  Pe as KrdsFormLabel,
   Re as KrdsIcon,
   Lt as KrdsInPageNavigation,
-  Pe as KrdsInput,
+  Ae as KrdsInput,
   hl as KrdsLanguageSwitcher,
   Te as KrdsLink,
   kt as KrdsMasthead,
   wl as KrdsModal,
   Ft as KrdsPagination,
   Ht as KrdsPanel,
-  _t as KrdsRadio,
+  $t as KrdsRadio,
   Sl as KrdsResize,
   mt as KrdsSelect,
-  $t as KrdsSkipLink,
+  Kt as KrdsSkipLink,
   xe as KrdsSpinner,
-  Kt as KrdsStep,
-  Bt as KrdsStepIndicator,
+  Bt as KrdsStep,
+  _t as KrdsStepIndicator,
   gt as KrdsTag,
   bt as KrdsTagGroup,
   pt as KrdsTextarea,
   wt as KrdsToggleSwitch,
   il as KrdsTooltip,
-  ce as classNames,
-  _l as default,
-  ue as generateId,
-  xl as generateUid,
-  Bl as version
+  ue as classNames,
+  zl as default,
+  ce as generateId,
+  Il as generateUid,
+  El as version
 };
 //# sourceMappingURL=krds-vue.es.js.map